:root {
  --bg:#0d1317; --panel:rgba(22,36,42,.97); --surface:#111a1f; --line:#2d4044;
  --text:#f2f4f2; --muted:#8f9a9b; --green:#c4ed74; --red:#ff826d;
  --shadow:0 24px 60px rgba(0,0,0,.22);
}
:root[data-theme="light"] {
  --bg:#edf3f4; --panel:rgba(255,255,255,.97); --surface:#f6f9f9; --line:#cad5d7;
  --text:#203138; --muted:#6f7d82; --green:#668319; --red:#c85f51;
  --shadow:0 24px 60px rgba(45,67,72,.14);
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--text); background:var(--bg); font-family:"DM Sans","Segoe UI",Arial,sans-serif; transition:background-color .2s,color .2s; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.04; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:72px 72px; }
.theme-button { position:fixed; z-index:4; top:18px; right:18px; width:38px; height:38px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); font:19px/1 inherit; cursor:pointer; box-shadow:var(--shadow); }
.theme-button:hover { color:var(--red); }
.login-shell { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:32px; position:relative; overflow:hidden; }
.login-card { width:min(100%,460px); padding:34px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); position:relative; z-index:2; }
.brand-mark { width:38px; height:38px; display:flex; align-items:end; gap:3px; padding:7px; border:1px solid var(--red); border-radius:8px; box-shadow:0 5px 18px rgba(255,130,109,.13); margin-bottom:42px; }
.brand-mark i { width:4px; display:block; background:var(--green); }
.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:12px}.brand-mark i:nth-child(4){height:22px}
.eyebrow { margin:0 0 12px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(38px,5vw,56px); line-height:.98; letter-spacing:-.055em; }
h1 span { color:var(--muted); }
.intro { max-width:430px; margin:25px 0 34px; color:var(--muted); font-size:14px; line-height:1.65; }
form label { display:block; margin-bottom:9px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.15em; }
.token-field { height:56px; display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); transition:border-color .2s,box-shadow .2s; }
.token-field:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(196,237,116,.12); }
.token-field input { min-width:0; flex:1; border:0; outline:0; color:var(--text); background:transparent; padding:0 16px; font:16px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.04em; }
.token-field button { width:92px; border:0; border-left:1px solid var(--line); color:var(--green); background:transparent; font-size:9px; font-weight:800; letter-spacing:.1em; cursor:pointer; }
.submit { width:100%; min-height:56px; margin-top:13px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--red); border-radius:8px; background:var(--red); color:#2a1816; box-shadow:0 5px 18px rgba(255,130,109,.13); font-size:12px; font-weight:900; letter-spacing:.06em; cursor:pointer; }
.submit:hover { filter:brightness(1.06); }.submit:disabled { opacity:.55; cursor:wait; }.submit b { font-size:21px; }
.error { margin:12px 0 0; padding:10px 12px; color:#ffd9da; background:#3d1e21; border-left:2px solid var(--red); border-radius:6px; font-size:11px; }
.security-note { display:flex; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); }
.security-note>span { color:var(--green); }.security-note p { margin:0; font-size:10px; line-height:1.55; }.security-note b { display:block; color:var(--text); font-size:9px; letter-spacing:.09em; margin-bottom:4px; }
aside { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(76,109,89,.22),transparent 42%); }
.market-word { position:absolute; top:50%; left:50%; transform:translate(-50%,-54%); color:transparent; -webkit-text-stroke:1px rgba(123,181,255,.15); font-size:min(31vw,430px); font-weight:900; letter-spacing:-.09em; }
.quote { position:absolute; left:5%; bottom:6%; }.quote small,.quote b { display:block; }.quote small { color:var(--green); font-size:9px; letter-spacing:.16em; margin-bottom:10px; }.quote b { font-size:clamp(22px,3vw,43px); line-height:1.05; letter-spacing:-.04em; opacity:.42; }
:root[data-theme="light"] body::before { opacity:.12; background-image:linear-gradient(rgba(61,85,91,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(61,85,91,.13) 1px,transparent 1px); }
:root[data-theme="light"] .market-word { -webkit-text-stroke-color:rgba(63,119,181,.12); }
@media(max-width:760px){
  .login-shell{display:grid;padding:max(20px,env(safe-area-inset-top)) 14px max(20px,env(safe-area-inset-bottom))}
  .login-card{padding:27px 20px}.brand-mark{margin-bottom:34px}h1{font-size:43px}.intro{font-size:13px;margin:22px 0 29px}
  .token-field,.submit{min-height:58px}aside{display:none}.security-note{margin-top:24px}
  .theme-button{top:max(12px,env(safe-area-inset-top));right:12px;box-shadow:none}
}