/* login.html — extracted CSS (sprint 14 ship 37 2026-05-30). Was inline <style> in login.html. Non-functional move. */

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
  --bg:          #f4f3ef;
  --bg-2:        #ffffff;
  --bg-3:        #eae9e3;
  --bg-dark:     #0f1b2d;
  --ink:         #15141a;
  --ink-2:       #3a3944;
  --ink-3:       #74737e;
  --line:        rgba(21,20,26,0.09);
  --line-2:      rgba(21,20,26,0.16);
  --brand:       #1b2a4a;
  --brand-mid:   #233661;
  --brand-light: #e8ecf5;
  --good:        #1f6f4a;
  --good-soft:   #d6efe2;
  --danger:      #c41e1e;
  --danger-soft: #fee2e2;
  --radius:      6px;
  --radius-lg:   12px;
  --font:        "Plus Jakarta Sans", system-ui, sans-serif;
  --mono:        "JetBrains Mono", ui-monospace, monospace;
}
/* dark-context overrides used inside left panel */
.auth-left { --brand: #1b2a4a; }

*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
svg{display:block;}
input,select{font:inherit;}

/* ── Panel system ────────────────────────────────────────────────── */
.panel{display:none;}
.panel--active{display:block;}

/* ══════════════════════════════════════════════════════════════════
   MAIN LOGIN LAYOUT (panel-main)
   Two-column: brand left, tabbed form right
   ══════════════════════════════════════════════════════════════════ */
#panel-main{display:none;}
#panel-main.panel--active{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}

/* ── Left brand panel ────────────────────────────────────────────── */
.auth-left{background:#1b2a4a;display:flex;flex-direction:column;padding:40px;position:relative;overflow:hidden;}
.auth-left__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;}
.auth-left__inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;}
.auth-left__logo{display:flex;align-items:center;gap:10px;margin-bottom:auto;}
.auth-left__mark{width:36px;height:36px;background:rgba(255,255,255,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.auth-left__name{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff;}
.auth-left__domain{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:1px;}
.auth-left__body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0;}
.auth-left__tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:12px;}
.auth-left__title{font-size:36px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.15;margin-bottom:16px;}
.auth-left__desc{font-size:14px;color:rgba(255,255,255,.65);line-height:1.65;margin-bottom:32px;max-width:340px;}
.auth-left__services{display:flex;flex-direction:column;gap:10px;}
.auth-svc{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:12px 16px;}
.auth-svc__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.auth-svc__label{font-size:13px;font-weight:600;color:#fff;}
.auth-svc__sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:1px;}
.auth-svc--cs{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18);border-radius:var(--radius);padding:9px 16px;}
.auth-svc--cs .auth-svc__label{font-size:12px;color:rgba(255,255,255,.5);font-weight:500;}
.auth-left__footer{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.3);}

/* ── Right form panel ────────────────────────────────────────────── */
.auth-right{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg);overflow-y:auto;}
.auth-card{width:100%;max-width:440px;}

/* Tabs */
.auth-card__tabs{display:flex;background:var(--bg-3);border-radius:var(--radius-lg);padding:4px;gap:4px;margin-bottom:32px;}
.auth-tab{flex:1;display:flex;align-items:center;justify-content:center;height:40px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s;user-select:none;}
.auth-tab--active{background:var(--bg-2);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.role-toggle{display:flex;gap:6px;background:var(--bg-2,#eef2f7);border-radius:11px;padding:4px;margin:0 0 16px;}
.role-tab{flex:1;height:42px;border:none;background:transparent;border-radius:8px;font-family:inherit;font-weight:700;font-size:13.5px;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s;}
.role-tab--active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.10);}

/* Sign-in tab content */
#tab-panel-signin{display:flex;flex-direction:column;gap:16px;}
#tab-panel-signup{display:none;flex-direction:column;gap:14px;}
#tab-panel-signup.tab-active{display:flex;}
#tab-panel-signin.tab-active{display:flex;}

/* Form primitives */
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-label{font-size:12.5px;font-weight:700;color:var(--ink-2);}
.form-input{
  height:46px;padding:0 14px;
  border:1.5px solid var(--line-2);border-radius:var(--radius);
  font-size:16px;/* ≥16px prevents iOS zoom */
  color:var(--ink);background:var(--bg-2);
  outline:none;transition:border-color .15s,box-shadow .15s;width:100%;
}
.form-input:focus{border-color:#1b2a4a;box-shadow:0 0 0 3px rgba(27,42,74,.08);}
.form-input::placeholder{color:var(--ink-3);}

/* Submit button */
.btn-submit{
  width:100%;height:48px;
  background:#1b2a4a;color:#fff;
  font-weight:800;font-size:15px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,transform .1s,opacity .15s;
  box-shadow:0 2px 8px rgba(27,42,74,.22);border:none;cursor:pointer;
}
.btn-submit:hover:not(:disabled){background:#233661;transform:translateY(-1px);}
.btn-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;}

/* Google button */
.btn-google{
  width:100%;height:48px;
  background:var(--bg-2);color:var(--ink);
  border:1.5px solid var(--line-2);
  font-weight:700;font-size:14px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s,border-color .15s;cursor:pointer;
}
.btn-google:hover:not(:disabled){background:var(--bg-3);border-color:#1b2a4a;}
.btn-google:disabled{opacity:.55;cursor:not-allowed;}

/* Auth divider */
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line-2);}

/* Error bar */
.error-bar{display:none;padding:10px 14px;background:var(--danger-soft);border:1px solid rgba(196,30,30,.25);border-radius:var(--radius);font-size:13px;color:var(--danger);font-weight:600;}
.error-bar--show{display:block;}

/* Spinner */
.spin{animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Track shortcut link */
.track-link{text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:4px;}
.track-link a{color:#1b2a4a;font-weight:700;}

/* Service picker (Create account tab) */
.svc-picks{display:flex;flex-direction:column;gap:8px;}
.svc-pick{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border:1.5px solid var(--line-2);border-radius:var(--radius);
  cursor:pointer;transition:border-color .15s,background .15s;user-select:none;
}
.svc-pick:hover{border-color:#1b2a4a;}
.svc-pick--selected{border-color:#1b2a4a;background:var(--brand-light);}
.svc-pick__radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s;}
.svc-pick--selected .svc-pick__radio{background:#1b2a4a;border-color:#1b2a4a;}
.svc-pick--selected .svc-pick__radio::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff;}
.svc-pick__icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.svc-pick__label{font-size:13px;font-weight:700;color:var(--ink);}
.svc-pick__sub{font-size:11px;color:var(--ink-3);margin-top:1px;}

.auth-foot{text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:4px;}
.auth-foot a{color:#1b2a4a;font-weight:700;cursor:pointer;}

/* ══════════════════════════════════════════════════════════════════
   SECONDARY PANELS (wrap inside .page-wrap for top-nav layout)
   ══════════════════════════════════════════════════════════════════ */
.page-wrap{flex:1;display:flex;flex-direction:column;}

/* Top nav — shown only on secondary panels */
.top-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;border-bottom:1px solid var(--line);
  background:rgba(244,243,239,0.97);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:10;flex-shrink:0;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-mark{width:32px;height:32px;background:#1b2a4a;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-brand{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.nav-sub{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:1px;}

/* Auth card wrapper for secondary panels */
.auth-wrap{display:flex;align-items:center;justify-content:center;padding:48px 20px;flex:1;}
.auth-card-sm{width:100%;max-width:460px;}

/* Back button */
.back-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--ink-3);
  cursor:pointer;margin-bottom:24px;transition:color .15s;
  background:none;border:none;padding:0;
}
.back-btn:hover{color:var(--ink);}

/* Auth section title */
.auth-title{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-bottom:6px;}
.auth-desc{font-size:13px;color:var(--ink-2);margin-bottom:24px;line-height:1.6;}

/* 2FA / OTP */
.tfa-header{text-align:center;margin-bottom:24px;}
.tfa-icon{width:56px;height:56px;background:var(--brand-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.tfa-title{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px;}
.tfa-desc{font-size:13px;color:var(--ink-2);line-height:1.55;}
.otp-input{
  height:64px;font-size:28px;font-family:var(--mono);font-weight:700;
  text-align:center;letter-spacing:.25em;
  border:2px solid var(--line-2);border-radius:var(--radius);
  background:var(--bg-2);color:var(--ink);
  outline:none;width:100%;transition:border-color .15s,box-shadow .15s;
}
.otp-input:focus{border-color:#1b2a4a;box-shadow:0 0 0 3px rgba(27,42,74,.08);}
.otp-resend{text-align:center;font-size:12.5px;color:var(--ink-3);}
.otp-resend a{color:#1b2a4a;font-weight:700;cursor:pointer;}
.otp-back{text-align:center;font-size:12.5px;color:var(--ink-3);}
.otp-back a{color:var(--ink-2);font-weight:600;cursor:pointer;}

/* Form primitives (secondary panels) */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-divider{height:1px;background:var(--line);margin:4px 0;}
.form-hint{font-size:11.5px;color:var(--ink-3);line-height:1.5;}
.form-input-sec{
  height:46px;padding:0 14px;
  border:1.5px solid var(--line-2);border-radius:var(--radius);
  font-size:16px;color:var(--ink);background:var(--bg-2);
  outline:none;transition:border-color .15s,box-shadow .15s;width:100%;
}
.form-input-sec:focus{border-color:#1b2a4a;box-shadow:0 0 0 3px rgba(27,42,74,.08);}
.form-input-sec::placeholder{color:var(--ink-3);}
.form-input-sec:disabled{opacity:.5;cursor:not-allowed;}

/* Status panels */
.status-panel{text-align:center;padding:32px 0;}
.status-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.status-icon--good{background:var(--good-soft);}
.status-icon--warn{background:rgba(245,158,11,0.15);}
.status-icon--block{background:var(--danger-soft);}
.status-title{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-bottom:8px;}
.status-desc{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:24px;}

/* svc-picks in register panel (checkbox mode) */
.svc-picks-chk .svc-pick-chk{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--radius);
  cursor:pointer;transition:border-color .15s,background .15s;user-select:none;
}
.svc-picks-chk .svc-pick-chk--checked{border-color:#1b2a4a;background:var(--brand-light);}
.svc-pick-chk__checkbox{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s;}
.svc-pick-chk--checked .svc-pick-chk__checkbox{background:#1b2a4a;border-color:#1b2a4a;}
.svc-pick__icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.svc-pick__label{font-size:13px;font-weight:700;color:var(--ink);}
.svc-pick__sub{font-size:11px;color:var(--ink-3);margin-top:1px;}
.svc-pick__price{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3);}

/* Forgot panels */
#panel-forgot .auth-wrap,
#panel-forgot-sent .auth-wrap{min-height:calc(100vh - 68px);}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media(max-width:767px){
  #panel-main.panel--active{
    display:flex;flex-direction:column;min-height:100vh;
  }
  .auth-left{
    padding:20px 24px 16px;
    flex-direction:row;align-items:center;gap:12px;
    overflow:visible;
  }
  .auth-left__grid{display:none;}
  .auth-left__inner{flex-direction:row;align-items:center;height:auto;width:100%;}
  .auth-left__logo{margin-bottom:0;flex-shrink:0;}
  .auth-left__body{display:none;}
  .auth-left__footer{display:none;}
  .auth-right{padding:24px 16px 48px;align-items:flex-start;}
  .auth-card{max-width:100%;}
  .top-nav{padding:14px 16px;}
  .auth-wrap{padding:32px 16px;}
  .form-row{grid-template-columns:1fr;}
}
@media(min-width:768px) and (max-width:1100px){
  #panel-main.panel--active{grid-template-columns:420px 1fr;}
}