:root{
    --bg:#f4f6fb;
    --surface:#ffffff;
    --surface-2:#eaeef7;
    --border:#dbe1ee;
    --text:#161a2b;
    --text-dim:#5c6480;
    --text-faint:#8b91a8;
    --accent:#3552d6;
    --accent-ink:#ffffff;
    --accent-soft:#e6eafc;
    --accent-hover:#2a41ab;
    --success:#0e8f5c;
    --success-soft:#e2f5ec;
    --warning:#b5740b;
    --warning-soft:#faf0dc;
    --danger:#d13b46;
    --danger-soft:#fbe4e6;
    --info:#0f8299;
    --info-soft:#e0f1f5;
    --shadow-sm: 0 1px 2px rgba(23,28,55,0.04), 0 1px 1px rgba(23,28,55,0.03);
    --shadow-md: 0 10px 24px -12px rgba(23,28,55,0.18), 0 2px 6px -2px rgba(23,28,55,0.06);
    --shadow-lg: 0 30px 60px -16px rgba(23,28,55,0.25), 0 8px 20px -8px rgba(23,28,55,0.12);
    --card-border: rgba(23,28,55,0.06);
    --radius:18px;
    --radius-sm:12px;
    --radius-lg:22px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0f1220; --surface:#171b2e; --surface-2:#1e2338; --border:#2c3350;
      --text:#e7e9f5; --text-dim:#9ba0bf; --text-faint:#6b7194;
      --accent:#7d94ff; --accent-ink:#0f1220; --accent-soft:#232a4d; --accent-hover:#9caeff;
      --success:#4cc38a; --success-soft:#173226;
      --warning:#e0a63f; --warning-soft:#332711;
      --danger:#ef7b81; --danger-soft:#3a1f22;
      --info:#5fc3d8; --info-soft:#132d33;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
      --shadow-md: 0 10px 24px -12px rgba(0,0,0,0.45), 0 2px 6px -2px rgba(0,0,0,0.3);
      --shadow-lg: 0 30px 60px -16px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.35);
      --card-border: rgba(255,255,255,0.07);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0f1220; --surface:#171b2e; --surface-2:#1e2338; --border:#2c3350;
    --text:#e7e9f5; --text-dim:#9ba0bf; --text-faint:#6b7194;
    --accent:#7d94ff; --accent-ink:#0f1220; --accent-soft:#232a4d; --accent-hover:#9caeff;
    --success:#4cc38a; --success-soft:#173226;
    --warning:#e0a63f; --warning-soft:#332711;
    --danger:#ef7b81; --danger-soft:#3a1f22;
    --info:#5fc3d8; --info-soft:#132d33;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 24px -12px rgba(0,0,0,0.45), 0 2px 6px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 30px 60px -16px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.35);
    --card-border: rgba(255,255,255,0.07);
  }

  *{box-sizing:border-box;}
  html,body{margin:0; padding:0;}
  body{
    background:
      radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
      radial-gradient(900px 500px at 100% 110%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    font-size:14.5px; line-height:1.5;
    min-height:100vh;
  }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}
  button:focus-visible, a:focus-visible, input:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
  }
  button{transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  /* ===== Page shell ===== */
  .authpage{height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 20px;}
  @media (max-width:860px){ .authpage{height:auto; min-height:100vh; overflow-y:auto; padding:28px 14px;} }

  .auth-shell{width:100%; max-width:940px; position:relative;}

  .theme-toggle-fab{
    position:absolute; top:16px; right:16px; z-index:5;
    width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-dim);
    transition:background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  }
  .theme-toggle-fab:hover{color:var(--text); background:var(--surface-2); box-shadow:var(--shadow-sm);}
  .theme-toggle-fab:active{transform:scale(.94);}

  /* ---- Card ---- */
  .auth-card2{
    display:flex; background:var(--surface); border-radius:32px; overflow:hidden;
    box-shadow:var(--shadow-lg); border:1px solid var(--card-border);
    height:min(640px, calc(100vh - 48px));
  }

  /* ---- Left branding panel ---- */
  .auth-panel-brand{
    flex:0 0 42%; position:relative; overflow:hidden; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:52px 40px;
    color:#fff;
    background:linear-gradient(165deg, #2a3fc7 0%, #3552d6 50%, #5a3fd6 100%);
  }
  .auth-panel-brand::before{
    content:""; position:absolute; inset:0; opacity:.55; pointer-events:none; z-index:0;
    background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
    background-size:20px 20px; mask-image:radial-gradient(circle at 30% 20%, rgba(0,0,0,.6), transparent 65%);
  }
  .wave-v{position:absolute; top:0; right:-1px; height:100%; width:70px; z-index:1;}
  .wave-h{position:absolute; left:0; bottom:-1px; width:100%; height:56px; z-index:1; display:none;}

  .brand-content{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;}
  .brand-eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:16px;}
  .brand-circle{
    width:92px; height:92px; border-radius:50%; background:#fff; color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:26px;
    box-shadow:0 14px 30px -8px rgba(10,15,40,0.35); margin-bottom:22px; flex-shrink:0;
  }
  .brand-circle img{width:60%; height:60%; object-fit:contain;}
  .auth-panel-brand h1{font-size:21px; font-weight:650; letter-spacing:-0.01em; margin:0 0 12px 0;}
  .auth-panel-brand p.tagline{font-size:13px; color:rgba(255,255,255,0.78); max-width:270px; margin:0; line-height:1.6;}

  .brand-foot{position:relative; z-index:2; margin-top:34px; font-size:11.5px; color:rgba(255,255,255,0.55);}

  @media (max-width:860px){
    .auth-card2{flex-direction:column; height:auto; border-radius:26px;}
    .auth-panel-brand{flex:none; padding:38px 32px 46px 32px;}
    .wave-v{display:none;}
    .wave-h{display:block;}
    .brand-circle{width:72px; height:72px; font-size:21px; margin-bottom:16px;}
    .auth-panel-brand h1{font-size:19px;}
    .brand-foot{margin-top:20px;}
  }

  /* ---- Right form panel ---- */
  .auth-panel-form{flex:1 1 58%; padding:34px 46px; display:flex; flex-direction:column; justify-content:center; justify-content:safe center; position:relative; overflow-y:auto; max-height:100%;}
  @media (max-width:860px){ .auth-panel-form{padding:38px 30px 42px 30px;} }
  @media (max-width:480px){ .auth-panel-form{padding:32px 22px 36px 22px;} }

  .auth-card{width:100%; max-width:360px; margin:0 auto;}

  .auth-card h2{font-size:21px; font-weight:650; letter-spacing:-0.015em; margin:0 0 4px 0;}
  .auth-card > p.sub{font-size:13px; color:var(--text-dim); margin:0 0 18px 0;}

  /* ---- Fields ---- */
  .field{margin-bottom:12px;}
  .field-row{display:flex; gap:12px;}
  .field-row .field{flex:1;}
  label.field-label{display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px; letter-spacing:.01em;}
  .input-wrap{position:relative; display:flex; align-items:center;}
  .input-wrap .icon{
    position:absolute; left:13px; color:var(--text-faint); display:flex; align-items:center; pointer-events:none;
  }
  .input-wrap input{
    width:100%; padding:9.5px 13px 9.5px 40px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--surface); color:var(--text); font-family:inherit; font-size:13.5px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .input-wrap input.no-icon{padding-left:13px;}
  .input-wrap input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none;}
  .input-wrap input.invalid{border-color:var(--danger);}
  .input-wrap input.invalid:focus{box-shadow:0 0 0 3px var(--danger-soft);}
  .pw-toggle{
    position:absolute; right:6px; width:30px; height:30px; border-radius:8px; border:none; background:none;
    color:var(--text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .pw-toggle:hover{background:var(--surface-2); color:var(--text-dim);}
  .field-error{display:none; align-items:center; gap:5px; font-size:12px; color:var(--danger); margin-top:6px; font-weight:500;}
  .field-error.show{display:flex;}
  .field-hint{font-size:11.5px; color:var(--text-faint); margin-top:6px;}

  /* ---- Password strength ---- */
  .pw-strength{display:none; align-items:center; gap:8px; margin-top:6px;}
  .pw-strength.show{display:flex;}
  .pw-strength-track{flex:1; display:flex; gap:4px;}
  .pw-strength-seg{height:5px; border-radius:100px; background:var(--surface-2); flex:1; transition:background-color .2s ease;}
  .pw-strength-label{font-size:11px; font-weight:600; color:var(--text-faint); width:52px; text-align:right; flex-shrink:0;}

  /* ---- Checkbox row ---- */
  .check-row{display:flex; align-items:flex-start; gap:9px; margin-bottom:16px;}
  .check-row input[type=checkbox]{
    width:17px; height:17px; margin-top:1.5px; accent-color:var(--accent); cursor:pointer; flex-shrink:0;
  }
  .check-row label{font-size:12.5px; color:var(--text-dim); line-height:1.45; cursor:pointer;}
  .check-row a{color:var(--accent); font-weight:600;}
  .check-row a:hover{text-decoration:underline;}
  .field-row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .field-row-between .check-inline{display:flex; align-items:center; gap:8px;}
  .field-row-between .check-inline input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer;}
  .field-row-between .check-inline label{font-size:12.5px; color:var(--text-dim); cursor:pointer;}
  .link-accent{font-size:12.5px; font-weight:600; color:var(--accent); cursor:pointer;}
  .link-accent:hover{text-decoration:underline;}

  /* ---- Buttons ---- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 17px; border-radius:var(--radius-sm);
    font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap; width:100%;
  }
  .btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 2px 8px -2px color-mix(in srgb, var(--accent) 55%, transparent);}
  .btn-primary:hover{background:var(--accent-hover); box-shadow:0 4px 14px -3px color-mix(in srgb, var(--accent) 60%, transparent); transform:translateY(-1px);}
  .btn-primary:active{transform:translateY(0);}
  .btn-primary[disabled]{opacity:.7; cursor:not-allowed; transform:none;}
  .btn-ghost{background:var(--surface); border-color:var(--border); color:var(--text);}
  .btn-ghost:hover{background:var(--surface-2); box-shadow:var(--shadow-sm);}
  .spinner{
    width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
    animation:spin .7s linear infinite; display:none; flex-shrink:0;
  }
  .btn-primary.loading .spinner{display:inline-block;}
  .btn-primary.loading .btn-label{opacity:.85;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .auth-divider{display:flex; align-items:center; gap:12px; margin:16px 0 14px 0; color:var(--text-faint); font-size:12px;}
  .auth-divider::before, .auth-divider::after{content:""; flex:1; height:1px; background:var(--border);}

  /* ---- Social login row ---- */
  .social-row{display:flex; gap:10px; justify-content:center;}
  .social-btn{
    width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-dim); flex-shrink:0;
  }
  .social-btn:hover{background:var(--surface-2); box-shadow:var(--shadow-sm); transform:translateY(-1px);}

  .auth-foot{text-align:center; font-size:13px; color:var(--text-dim); margin-top:16px;}
  .auth-foot a{color:var(--accent); font-weight:600;}
  .auth-foot a:hover{text-decoration:underline;}

  .back-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:16px; cursor:pointer;}
  .back-link:hover{color:var(--text);}

  .demo-note{
    display:flex; align-items:flex-start; gap:9px; background:var(--info-soft); color:var(--info);
    border-radius:var(--radius-sm); padding:10px 13px; font-size:11.5px; margin-top:16px; line-height:1.5;
  }
  .demo-note svg{flex-shrink:0; margin-top:1px;}
  .demo-note b{font-weight:700;}

  /* ---- Success state (forgot password) ---- */
  .success-state{display:none; text-align:center;}
  .success-state.show{display:block;}
  .success-icon{
    width:60px; height:60px; border-radius:50%; background:var(--success-soft); color:var(--success);
    display:flex; align-items:center; justify-content:center; margin:0 auto 20px auto;
  }
  .success-state h2{margin-bottom:10px;}
  .success-state p.sub{margin-bottom:6px;}
  .success-state .sent-to{font-weight:700; color:var(--text); font-family:'IBM Plex Mono', monospace; font-size:13px;}
  .success-actions{margin-top:26px; display:flex; flex-direction:column; gap:10px;}

  .toast{
    position:fixed; bottom:26px; right:26px; background:var(--text); color:var(--bg);
    padding:13px 20px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; box-shadow:var(--shadow-lg);
    opacity:0; transform:translateY(8px); transition:all .25s ease; pointer-events:none; z-index:200;
    display:flex; align-items:center; gap:9px;
  }
  .toast.show{opacity:1; transform:none;}

  @media (max-width:480px){
    .authpage{padding:20px 12px;}
  }