/* ============================================================
   ایسکو لاگین — استایل کامل بر اساس طراحی ECO Blueprint
   رنگ اصلی: #FF6A1F | ثانویه: #48D6E8 | پس‌زمینه: #0F131A
   ============================================================ */

:root{
  --bg:#0F131A;
  --bg-soft:#141A22;
  --panel:#181F29;
  --panel-2:#1D2530;
  --border:#28313E;
  --border-soft:#1F2731;
  --text:#EDEFF3;
  --text-dim:#9AA4B5;
  --text-faint:#5B6577;
  --orange:#D4941E;
  --orange-hi:#E5A637;
  --cyan:#48D6E8;
  --red:#FF5A5F;
  --green:#3ED598;
  --radius-s:2px;
  --radius-m:4px;
  --font-display:'Vazirmatn','Vazir','Tahoma','Segoe UI',sans-serif;
  --font-body:'Vazirmatn','Vazir','Tahoma','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','Consolas','Courier New',monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
svg{ display:block; }
input{ font-family:inherit; }
.mono{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; letter-spacing:0.02em; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }

/* ---------- پس‌زمینه blueprint ---------- */
.grid-field{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:0.3;
}
.reg-mark{ position:fixed; width:22px; height:22px; z-index:40; pointer-events:none; opacity:0.5; }
.reg-mark svg{ width:100%; height:100%; }
.reg-tl{ top:14px; left:14px; } .reg-tr{ top:14px; right:14px; }
.reg-bl{ bottom:14px; left:14px; } .reg-br{ bottom:14px; right:14px; }
@media (max-width:720px){ .reg-mark{ display:none; } }

/* ---------- هدر ---------- */
.top-bar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
}
@media (max-width:720px){ .top-bar{ padding:18px 20px; } }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:20px; }
.logo-mark{ width:30px; height:30px; flex-shrink:0; }
.logo-sub{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); letter-spacing:0.18em; margin-inline-start:2px; font-weight:400; }
.back-home{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--text-dim);
  border:1px solid var(--border); border-radius:var(--radius-s);
  padding:9px 16px; transition:border-color 0.18s ease, color 0.18s ease;
}
.back-home:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ---------- shell ---------- */
.auth-shell{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  padding:20px 32px 60px;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  align-items:stretch;
  min-height:calc(100vh - 92px);
}
@media (max-width:720px){ .auth-shell{ padding:8px 20px 40px; } }
@media (max-width:980px){ .auth-shell{ grid-template-columns:1fr; min-height:auto; } }

/* ---------- visual panel ---------- */
.auth-visual{
  position:relative;
  border:1px solid var(--border);
  border-inline-end:none;
  border-radius:var(--radius-m) 0 0 var(--radius-m);
  background:linear-gradient(180deg, var(--panel) 0%, var(--bg-soft) 100%);
  padding:44px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:560px; overflow:hidden;
}
@media (max-width:980px){
  .auth-visual{ border-radius:var(--radius-m) var(--radius-m) 0 0; border-inline-end:1px solid var(--border); border-bottom:none; min-height:280px; padding:32px; }
}
@media (max-width:560px){ .auth-visual{ min-height:200px; padding:26px 22px; } }

.sheet-tag{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); letter-spacing:0.1em; direction:ltr; }
.auth-visual-tagline{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(22px, 2.4vw, 30px); line-height:1.32; letter-spacing:-0.01em;
  max-width:380px;
}
.auth-visual-tagline em{ font-style:normal; color:var(--orange); }
.auth-visual-desc{ color:var(--text-dim); font-size:14px; max-width:340px; margin-top:14px; }
.auth-visual-svg{ margin:12px 0; }
.auth-visual-svg svg{ width:100%; height:auto; max-width:380px; }
@media (max-width:980px){ .auth-visual-svg{ display:none; } }
.auth-visual-foot{ display:flex; gap:22px; flex-wrap:wrap; border-top:1px solid var(--border-soft); padding-top:18px; }
.auth-visual-foot div{ display:flex; flex-direction:column; gap:3px; }
.auth-visual-foot .num{ font-family:var(--font-mono); font-size:12.5px; color:var(--cyan); }
.auth-visual-foot .lbl{ font-size:12px; color:var(--text-faint); }
@media (max-width:560px){ .auth-visual-foot{ display:none; } }

/* ---------- form panel ---------- */
.auth-panel{
  border:1px solid var(--border);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
  background:var(--bg-soft);
  padding:44px;
  display:flex; flex-direction:column; justify-content:center;
  min-height:560px;
}
@media (max-width:980px){ .auth-panel{ border-radius:0 0 var(--radius-m) var(--radius-m); min-height:auto; padding:36px 32px 40px; } }
@media (max-width:560px){ .auth-panel{ padding:28px 20px 32px; } }
.auth-form-wrap{ max-width:400px; width:100%; margin:0 auto; }

.auth-title{ font-family:var(--font-display); font-weight:800; font-size:26px; margin-bottom:8px; }
.auth-subtitle{ color:var(--text-dim); font-size:14px; margin-bottom:30px; }

/* پیام سراسری */
.auth-message{
  display:none; align-items:flex-start; gap:10px;
  padding:13px 15px; border-radius:var(--radius-s);
  font-size:13.5px; margin-bottom:22px; border:1px solid transparent;
}
.auth-message.show{ display:flex; }
.auth-message.success{ background:rgba(62,213,152,0.08); border-color:rgba(62,213,152,0.35); color:var(--green); }
.auth-message.error{ background:rgba(255,90,95,0.08); border-color:rgba(255,90,95,0.35); color:var(--red); }
.auth-message svg{ flex-shrink:0; margin-top:2px; width:16px; height:16px; }

/* فیلدها */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:8px; font-weight:500; }
.field-input-wrap{ position:relative; }
.field input{
  width:100%; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-s); color:var(--text);
  padding:13px 14px; font-size:14.5px;
  transition:border-color 0.18s ease, background 0.18s ease;
}
.field input::placeholder{ color:var(--text-faint); }
.field input:focus{ outline:none; border-color:var(--cyan); background:var(--panel-2); }
.field input.has-error{ border-color:var(--red); }
.field input[type="password"]{ padding-inline-end:44px; }
.field input[dir="ltr"]{ direction:ltr; text-align:left; }
.field-hint{ display:block; font-size:11.5px; color:var(--text-faint); margin-top:6px; }

.pw-toggle{
  position:absolute; top:50%; transform:translateY(-50%);
  inset-inline-end:6px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text-faint);
  border-radius:var(--radius-s); transition:color 0.18s ease;
}
.pw-toggle:hover{ color:var(--cyan); }
.pw-toggle svg{ width:18px; height:18px; }

.field-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; }
.checkbox-row input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--orange); cursor:pointer; }
.checkbox-row label{ font-size:13px; color:var(--text-dim); cursor:pointer; }
.link-muted{ font-size:13px; color:var(--cyan); }
.link-muted:hover{ color:var(--orange-hi); }

/* دکمه ارسال */
.auth-submit{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; background:var(--orange); color:#181008;
  border:none; border-radius:var(--radius-s);
  font-family:var(--font-display); font-weight:700; font-size:15px;
  transition:background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
  margin-top:6px;
}
.auth-submit:hover{ background:var(--orange-hi); transform:translateY(-1px); }
.auth-submit:disabled{ opacity:0.75; cursor:not-allowed; transform:none; }
.spinner{
  width:16px; height:16px;
  border:2px solid rgba(24,16,8,0.35); border-top-color:#181008;
  border-radius:50%; animation:spin 0.7s linear infinite;
  display:none; flex-shrink:0;
}
.auth-submit.loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-text{
  width:100%; background:transparent; color:var(--text-dim);
  border:none; padding:10px; font-size:13px; font-family:inherit;
  margin-top:6px; cursor:pointer; transition:color 0.18s ease;
}
.btn-text:hover{ color:var(--cyan); }

.auth-switch{ text-align:center; font-size:13.5px; color:var(--text-dim); margin-top:26px; }
.auth-switch a:hover{ color:var(--orange-hi); }

/* role note */
.role-note{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
  margin-bottom:22px; padding:10px 12px;
  border:1px dashed var(--border); border-radius:var(--radius-s);
}

/* پیام خطا (زیر هر فیلد / عمومی فرم) */
.isko-msg{
  display:none; padding:10px 14px; font-size:13px;
  margin:12px 0; border-radius:var(--radius-s); line-height:1.6; text-align:center;
}
.isko-msg.active, .isko-msg.show{ display:block; }
.isko-msg-success{ background:rgba(62,213,152,0.08); color:var(--green); border:1px solid rgba(62,213,152,0.35); }
.isko-msg-error{ background:rgba(255,90,95,0.08); color:var(--red); border:1px solid rgba(255,90,95,0.35); }

/* تایمر */
.isko-timer{
  text-align:center; font-size:13px; color:var(--text-dim);
  margin:10px 0; font-family:var(--font-mono);
}
.isko-timer span{ color:var(--orange); font-weight:bold; }

/* OTP input */
.otp-input{
  font-size:22px !important; text-align:center !important;
  letter-spacing:8px !important; font-family:var(--font-mono) !important;
  padding:14px !important;
}

/* مراحل */
.isko-step{ display:none; animation:fadeIn 0.35s ease; }
.isko-step.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* کاربر لاگین شده */
.isko-loggedin{
  max-width:480px; margin:80px auto; text-align:center;
  padding:40px 30px; background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius-m);
}
.isko-loggedin p{ color:var(--text-dim); margin-bottom:20px; }

/* موبایل */
@media (max-width:480px){
  .auth-title{ font-size:22px; }
  .otp-input{ font-size:20px !important; letter-spacing:6px !important; }
}
/* ============ بازگشت به صفحه اصلی (تنها چیز بالای فرم) ============ */
.top-bar-minimal {
  justify-content: flex-end;
  padding: 22px 32px;
}
.top-bar-minimal .back-home {
  font-size: 13px;
}
@media (max-width: 720px) {
  .top-bar-minimal { padding: 16px 20px; }
}

/* ============ کارت دسترسی (SVG) ============ */
.auth-visual-svg svg.idcard {
  width: 100%;
  height: auto;
  max-width: 420px;
  display: block;
  margin: 0 auto;
}

/* در موبایل و تبلت کارت پنهان بشه */
@media (max-width: 980px) {
  .auth-visual-svg { display: none !important; }
}