:root{--bg:#f5f7fb;--surface:#ffffff;--line:rgba(30,41,59,.12);--text:#1e2432;--dim:#5c6b84;
    --accent:#3b82f6;--accent2:#06b6d4;--violet:#7c6bff;--bad:#ef4444}
  [data-theme="dark"]{--bg:#0a0e18;--surface:#111a2e;--line:rgba(148,163,184,.16);--text:#e8eefb;--dim:#93a5c4;
    --accent:#4f9dff;--accent2:#38d4f0;--violet:#8b7bff;--bad:#f87171}
  [data-theme="aurora"]{--bg:#0b0f2a;--surface:#151d45;--line:rgba(167,139,250,.2);--text:#f0ecff;--dim:#a9b4e8;
    --accent:#8b5cf6;--accent2:#22d3ee;--violet:#c084fc;--bad:#fb7185}
  *{box-sizing:border-box}
  html{color-scheme:light}
  html[data-theme="dark"],html[data-theme="aurora"]{color-scheme:dark}
  body{margin:0;min-height:100vh;display:flex;color:var(--text);
    font:14px/1.65 "Segoe UI","Inter","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    background:var(--bg);
    background-image:
      radial-gradient(1000px 600px at 82% 8%,var(--glow1,rgba(59,130,246,.09)),transparent 60%),
      radial-gradient(800px 520px at 6% 94%,var(--glow2,rgba(124,107,255,.08)),transparent 58%);}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(30,41,59,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(30,41,59,.04) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%)}
  .shell{position:relative;width:min(1060px,94vw);margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:0;
    background:linear-gradient(160deg,#ffffff,#fbfcfe);border:1px solid var(--line);border-radius:26px;overflow:hidden;
    box-shadow:0 40px 100px rgba(30,41,59,.16);backdrop-filter:blur(14px)}
  .hero{padding:58px 52px;display:flex;flex-direction:column;justify-content:space-between;
    border-right:1px solid var(--line);position:relative;overflow:hidden;
    background:linear-gradient(160deg,rgba(59,130,246,.08),rgba(124,107,255,.06))}
  .hero::after{content:"";position:absolute;right:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(124,107,255,.14),transparent 65%);filter:blur(8px)}
  .hero .brand{display:flex;align-items:center;gap:15px}
  .hero .brand b{font-size:19px;font-weight:750;letter-spacing:.5px;line-height:1.4;
    background:linear-gradient(90deg,#1e293b,#2563eb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hero .brand span{display:block;font-size:11px;color:var(--dim);letter-spacing:3px;text-transform:uppercase}
  .hero h1{margin:46px 0 14px;font-size:31px;font-weight:750;line-height:1.35;letter-spacing:.5px;color:var(--text)}
  .hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--violet));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hero p{color:var(--dim);font-size:13.5px;line-height:1.9;max-width:400px;margin:0}
  .hero .flow{display:flex;gap:8px;align-items:center;margin-top:34px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
  .hero .flow span{padding:5px 12px;border:1px solid var(--line);border-radius:20px;background:rgba(59,130,246,.05);letter-spacing:.4px}
  .hero .flow i{color:var(--accent2);font-style:normal}
  .hero .foot{margin-top:44px;font-size:11px;color:#94a3b8;letter-spacing:1.6px}
  .form-side{padding:56px 50px;display:flex;flex-direction:column;justify-content:center}
  .form-side h2{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:.4px;color:var(--text)}
  .form-side .sub{color:var(--dim);font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:30px}
  label{display:block;font-size:12px;color:var(--dim);margin:18px 0 7px;letter-spacing:.6px;font-weight:600}
  .field{position:relative}
  .field .lbl-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#94a3b8;pointer-events:none}
  input{width:100%;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:12px;
    padding:12px 14px 12px 42px;font-size:14.5px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
  input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(59,130,246,.15);background:#fff}
  .eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    background:transparent;border:0;border-radius:9px;cursor:pointer;color:#94a3b8;padding:0;box-shadow:none}
  .eye-btn:hover{color:var(--accent);background:rgba(59,130,246,.07);box-shadow:none}
  .eye-btn .ic{width:19px;height:19px}
  .eye-btn.off .ic{opacity:.4}
  .field input[type="password"],.field input[type="text"]{padding-right:46px}
  input::placeholder{color:#94a3b8}
  .btn{margin-top:28px;width:100%;position:relative;border:0;border-radius:12px;padding:13px;font-size:15px;font-weight:700;letter-spacing:3px;cursor:pointer;
    color:#fff;background:linear-gradient(135deg,var(--accent),var(--violet));
    box-shadow:0 10px 30px rgba(59,110,255,.32);transition:filter .15s,transform .12s,box-shadow .15s;overflow:hidden}
  .btn::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
    transform:translateX(-100%);transition:transform .6s ease}
  .btn:hover{filter:brightness(1.05);box-shadow:0 14px 38px rgba(59,110,255,.45)}
  .btn:hover::before{transform:translateX(100%)}
  .btn:active{transform:translateY(1px)}
  .btn:disabled{filter:grayscale(.55);cursor:wait}
  .err{color:var(--bad);font-size:12.5px;min-height:20px;margin-top:14px;text-align:center;letter-spacing:.4px}
  .sec{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:#94a3b8;letter-spacing:.8px}
  .sec svg{width:13px;height:13px;color:var(--ok)}
  [data-theme="dark"] .shell,[data-theme="aurora"] .shell{background:linear-gradient(160deg,var(--surface),#0f1730)}
  [data-theme="dark"] input,[data-theme="aurora"] input{background:var(--surface);border-color:var(--line)}
  [data-theme="dark"] .hero,[data-theme="aurora"] .hero{background:linear-gradient(160deg,rgba(79,157,255,.1),rgba(139,123,255,.08))}
  [data-theme="dark"] .hero .brand b,[data-theme="aurora"] .hero .brand b{background:linear-gradient(90deg,#f0f4ff,#8ab4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .theme-switch{position:absolute;top:18px;right:18px;display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
  .theme-switch button{all:unset;cursor:pointer;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--dim)}
  .theme-switch button.on{background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff}
  @media (max-width:820px){
    .shell{grid-template-columns:1fr}
    .hero{display:none}
    .form-side{padding:44px 30px}
  }