:root { color-scheme: dark; --bg:#080b12; --card:rgba(20,27,43,.88); --line:rgba(255,255,255,.1); --text:#f5f7fb; --muted:#9ca7bb; --accent:#70e1b2; --accent-dark:#092b20; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 15% 10%,rgba(52,211,153,.13),transparent 32rem),radial-gradient(circle at 90% 70%,rgba(59,130,246,.12),transparent 28rem),var(--bg); }
button,input { font:inherit; } button { cursor:pointer; }
.shell { width:min(100% - 32px,480px); margin:0 auto; padding:max(24px,env(safe-area-inset-top)) 0 28px; }
header { display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:14px; background:#141b2b; color:var(--accent); font-size:28px; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:18px; }
.eyebrow { margin-bottom:3px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.ghost { margin-left:auto; padding:9px 13px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:transparent; }
.hero { padding:64px 2px 32px; } .hero h2 { margin:18px 0 12px; max-width:370px; font-size:clamp(38px,10vw,56px); line-height:.98; letter-spacing:-.05em; }
.hero>p { color:var(--muted); font-size:17px; line-height:1.55; }
.pill { display:inline-flex; align-items:center; gap:8px; color:#b6f4d8; font-size:12px; font-weight:700; }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(112,225,178,.12); }
.card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 20px 70px rgba(0,0,0,.3); backdrop-filter:blur(18px); }
.tabs { display:grid; grid-template-columns:1fr 1fr; padding:6px; border-bottom:1px solid var(--line); }
.tab { padding:12px; border:0; border-radius:12px; color:var(--muted); background:transparent; font-weight:700; }
.tab.active { color:var(--text); background:rgba(255,255,255,.07); }
.panel { padding:30px; } .panel h3,.account h3 { margin-bottom:8px; font-size:23px; } .panel p,.account p { color:var(--muted); line-height:1.55; }
.key-visual,.success { display:grid; place-items:center; width:54px; height:54px; margin-bottom:20px; border-radius:17px; color:var(--accent); background:var(--accent-dark); font-size:30px; }
label { display:block; margin-bottom:8px; font-size:13px; font-weight:700; }
input { width:100%; padding:15px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--text); background:rgba(5,8,14,.55); }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(112,225,178,.12); }
small { display:block; margin:8px 0 20px; color:var(--muted); line-height:1.4; }
.primary,.secondary { width:100%; padding:15px 18px; border-radius:12px; font-weight:800; }
.primary { border:0; color:#07150f; background:var(--accent); } .secondary { border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.04); }
button:disabled { cursor:wait; opacity:.55; } .busy::after { content:" …"; }
.account { padding:32px; } .status { margin-top:14px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:rgba(20,27,43,.7); font-size:13px; }
.status.error { border-color:rgba(248,113,113,.35); color:#fca5a5; } .status.success-message { border-color:rgba(112,225,178,.35); color:#a7f3d0; }
.hidden { display:none!important; } footer { padding:28px 0 0; color:#606b7f; text-align:center; font-size:11px; }
@media (max-width:390px) { .hero { padding-top:48px; } .panel,.account { padding:24px; } }