:root {
  --bg:#080a0f;
  --panel:rgba(18,21,29,.78);
  --line:rgba(255,255,255,.10);
  --text:#f7f8fb;
  --muted:#9ca3af;
  --accent:#ffffff;
  --accent-dark:#101216;
  --danger:#ff5c7a;
  --success:#9af0b7;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.08),transparent 28%),
    radial-gradient(circle at 85% 80%,rgba(120,120,140,.13),transparent 30%),
    linear-gradient(135deg,#07080c 0%,#11141b 52%,#080a0f 100%);
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;
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:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.orb{position:fixed;width:360px;height:360px;border-radius:50%;filter:blur(90px);opacity:.15;pointer-events:none}
.orb.one{background:#fff;top:-180px;left:-120px}
.orb.two{background:#7c83ff;bottom:-180px;right:-120px}
.shell{width:min(1080px,92vw);min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;
border:1px solid var(--line);border-radius:30px;overflow:hidden;background:rgba(10,12,17,.66);
box-shadow:0 35px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(24px)}
.brand{position:relative;padding:58px;display:flex;flex-direction:column;justify-content:space-between;
background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012));border-right:1px solid var(--line)}
.logo-wrap{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:14px 18px;border-radius:18px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.3)}
.logo{width:245px;height:auto;display:block}
.kicker{margin-top:55px;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:#aeb4c0;font-weight:700}
h1{font-size:48px;line-height:1.04;margin:13px 0 18px;letter-spacing:-.045em}
.tagline{max-width:430px;color:#aeb4c0;line-height:1.7;font-size:15px}
.stats{display:flex;gap:30px;margin-top:35px}
.stat strong{display:block;font-size:20px}
.stat span{font-size:11px;color:#777f8d;text-transform:uppercase;letter-spacing:.1em}
.footer{color:#68707d;font-size:11px;letter-spacing:.04em}
.login{padding:58px;display:flex;align-items:center;justify-content:center}
.card{width:min(390px,100%)}
.eyebrow{font-size:12px;color:#8f97a5;text-transform:uppercase;letter-spacing:.18em;font-weight:700}
h2{font-size:34px;letter-spacing:-.035em;margin:10px 0 8px}
.sub{font-size:14px;color:var(--muted);margin:0 0 32px}
.field{margin-bottom:18px}
label{display:block;font-size:12px;font-weight:650;color:#c7ccd5;margin:0 0 8px}
.input{position:relative}
input[type="email"],input[type="password"],input[type="text"]{width:100%;height:52px;border:1px solid rgba(255,255,255,.10);border-radius:13px;background:rgba(255,255,255,.045);color:#fff;padding:0 15px;font-size:14px;outline:none;transition:.2s}
input:focus{border-color:rgba(255,255,255,.42);box-shadow:0 0 0 4px rgba(255,255,255,.055)}
.toggle{position:absolute;right:7px;top:7px;height:38px;padding:0 11px;border:0;border-radius:9px;background:rgba(255,255,255,.07);color:#b9bfca;cursor:pointer}
.row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 24px;font-size:12px;color:#8f97a5}
.check{display:flex;align-items:center;gap:8px;cursor:pointer}
.check input{accent-color:#fff}
a{color:#dfe2e8;text-decoration:none}
a:hover{text-decoration:underline}
.btn{width:100%;height:53px;border:0;border-radius:13px;background:#fff;color:#0a0c10;font-size:14px;font-weight:800;letter-spacing:.01em;cursor:pointer;transition:.2s;box-shadow:0 10px 25px rgba(255,255,255,.09)}
.btn:hover{transform:translateY(-1px);box-shadow:0 15px 30px rgba(255,255,255,.14)}
.btn:active{transform:translateY(0)}
.divider{display:flex;align-items:center;gap:12px;color:#606875;font-size:11px;margin:25px 0}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--line)}
.help{text-align:center;color:#747c89;font-size:12px;line-height:1.6}
.message{display:none;margin-top:15px;padding:11px 13px;border-radius:10px;font-size:12px}
.message.show{display:block;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);color:#9af0b7}
@media(max-width:800px){
  body{overflow:auto;padding:18px}
  .shell{grid-template-columns:1fr;min-height:auto}
  .brand{padding:34px;border-right:0;border-bottom:1px solid var(--line)}
  .login{padding:38px 28px}
  h1{font-size:38px}
  .kicker{margin-top:32px}
  .logo{width:200px}
}
@media(max-width:480px){
  .brand{padding:27px}
  .login{padding:32px 20px}
  h1{font-size:32px}
  .stats{gap:20px}
}


html[data-theme="light"]{
  --bg:#eef2f7;--panel:rgba(255,255,255,.86);--line:rgba(15,23,42,.10);--text:#101827;--muted:#667085;--accent:#101216;--accent-dark:#ffffff;--danger:#c6284d;--success:#137a3b;
}
html[data-theme="light"] body{background:radial-gradient(circle at 15% 20%,rgba(0,0,0,.045),transparent 28%),radial-gradient(circle at 85% 80%,rgba(76,87,120,.08),transparent 30%),linear-gradient(135deg,#f8fafc 0%,#e9eef5 52%,#f7f9fc 100%)}
html[data-theme="light"] body:before{background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px)}
html[data-theme="light"] .shell{background:rgba(255,255,255,.72);box-shadow:0 35px 100px rgba(15,23,42,.16),inset 0 1px rgba(255,255,255,.8)}
html[data-theme="light"] .brand{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.35))}
html[data-theme="light"] .kicker,html[data-theme="light"] .tagline{color:#667085}
html[data-theme="light"] .stat span{color:#667085}
html[data-theme="light"] .footer{color:#7b8492}
html[data-theme="light"] label{color:#344054}
html[data-theme="light"] input[type="email"],html[data-theme="light"] input[type="password"],html[data-theme="light"] input[type="text"]{border-color:rgba(15,23,42,.12);background:rgba(255,255,255,.78);color:#101827}
html[data-theme="light"] input:focus{border-color:rgba(15,23,42,.34);box-shadow:0 0 0 4px rgba(15,23,42,.055)}
html[data-theme="light"] .toggle{background:rgba(15,23,42,.06);color:#475467}
html[data-theme="light"] .row{color:#667085}
html[data-theme="light"] a{color:#101827}
html[data-theme="light"] .btn{background:#101216;color:#fff;box-shadow:0 10px 25px rgba(15,23,42,.12)}
html[data-theme="light"] .btn:hover{box-shadow:0 15px 30px rgba(15,23,42,.18)}
.theme-control{position:fixed;right:24px;top:22px;z-index:20;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);backdrop-filter:blur(12px);font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 8px 25px rgba(0,0,0,.12)}
.message.error{background:rgba(255,92,122,.08);border:1px solid rgba(255,92,122,.20);color:#ff9ab0}.message.success{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);color:var(--success)}
.setup-link{text-align:center;margin-top:18px;color:#747c89;font-size:11px}.setup-link a{font-weight:700}
@media(max-width:800px){.theme-control{top:12px;right:12px}.shell{width:min(720px,94vw)}}
@media(max-width:480px){.theme-control{font-size:11px;height:34px;padding:0 10px}.shell{width:100%;border-radius:22px}.logo{width:180px}}