/* ====== Theme & Font ====== */
:root{
  --brand-primary:#06b6d4;   /* فیروزه‌ای */
  --brand-primary-dark:#0aa0ba;
  --brand-accent:#f97316;    /* نارنجی */
  --brand-accent-dark:#e35d05;
  --bg-grad-1:#0ea5e9;
  --bg-grad-2:#06b6d4;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.18);
  --fa-font:'Vazir', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* reset */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html[dir="rtl"]{direction:rtl}
body{
  font-family:var(--fa-font);
  background:linear-gradient(135deg,var(--bg-grad-1),var(--bg-grad-2));
  color:#17212b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ensure form controls inherit font */
button,input,select,textarea{font-family:var(--fa-font)}

/* ====== Layout helpers ====== */
.container{max-width:960px;margin:0 auto;padding:16px}
.card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid #eef0f3;padding:20px;margin-bottom:20px
}

/* ====== Alerts ====== */
.alert{padding:12px;border-radius:10px;margin-bottom:14px;font-size:13.5px}
.alert-danger{background:#ffe4e6;border:1px solid #fecdd3;color:#9f1239}
.alert-success{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}

/* ====== Buttons ====== */
.btn{display:inline-block;cursor:pointer;border:none;border-radius:10px;padding:12px 16px;font-weight:700}
.btn-primary{background:var(--brand-primary);color:#fff}
.btn-primary:hover{background:var(--brand-primary-dark)}
.btn-accent{background:var(--brand-accent);color:#fff}
.btn-accent:hover{background:var(--brand-accent-dark)}

/* ====== Forms ====== */
.form-group{margin-bottom:14px}
label{display:block;margin-bottom:6px;font-weight:600;font-size:13.5px;color:#475569}
input[type=text],input[type=password],input[type=email],input[type=number],textarea,select{
  width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;background:#fff
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--brand-primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-primary) 20%, transparent)
}

/* ====== LOGIN PAGE (card + tabs) ====== */
.login-page{
  min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px
}
.login-card{
  width:440px;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)
  /* padding handled by sections */
}
.brand-bar{
  padding:16px 20px;background:linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 15%, #fff), color-mix(in srgb, var(--brand-accent) 15%, #fff));
  border-bottom:1px solid #eef0f3
}
.brand-title{margin:0;font-size:20px;font-weight:800;color:#0f172a}

/* tabs */
.login-tabs{display:flex;border-bottom:1px solid #eef0f3}
.login-tabs button{
  flex:1;padding:16px 12px;background:#f8fafc;border:none;cursor:pointer;
  font-weight:800;font-size:15.5px;color:#334155;transition:.2s;
  border-bottom:3px solid transparent
}
.login-tabs button:hover{background:#f1f5f9}
.login-tabs button.active{
  background:#fff;color:var(--brand-primary);border-bottom-color:var(--brand-primary)
}

/* tab bodies */
.tab-content{display:none;padding:20px}
.tab-content.active{display:block}

/* helper note under card */
.helper-note{
  padding:14px 20px;border-top:1px solid #f1f5f9;background:#fcfcfd;
  text-align:center;font-size:13.5px;color:#64748b
}

/* ====== Tables (for later pages) ====== */
table{width:100%;border-collapse:collapse;margin-bottom:16px}
th,td{padding:10px;border:1px solid #e2e8f0;text-align:left;font-size:14px}
a{color:var(--brand-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* small utilities */
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}