:root { color-scheme: dark; --bg:#030817; --card:#081329; --card-soft:#0b1b38; --line:#183b6e; --blue:#0878e8; --cyan:#10c8ff; --muted:#9eb4d1; --danger:#ff6577; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font:15px/1.5 Inter,system-ui,sans-serif; background:radial-gradient(circle at 50% -20%,#0b3b8c 0,transparent 42%),var(--bg); color:#f4f8ff; }
a { color:var(--cyan); text-decoration:none; }
.shell { max-width:1180px; margin:0 auto; padding:28px 20px 60px; }
header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:900; letter-spacing:.08em; font-size:20px; }
.brand img { width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(16,200,255,.45),0 8px 26px rgba(0,89,255,.28); }
.brand-name strong { color:var(--cyan); }
.card { background:linear-gradient(145deg,rgba(11,27,56,.96),rgba(5,15,34,.98)); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 20px 70px rgba(0,0,0,.25); }
.metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
.metric strong { display:block; color:var(--cyan); font-size:30px; }.metric small,.muted { color:var(--muted); }
input { width:100%; padding:12px 13px; background:#030b1c; color:white; border:1px solid var(--line); border-radius:10px; outline:none; transition:border-color .2s,box-shadow .2s; }
input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(16,200,255,.14); }
input::placeholder { color:#647b9c; }
label { display:block; color:var(--muted); margin:12px 0 5px; }
button,.button { display:inline-block; border:0; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; padding:11px 16px; font-weight:850; cursor:pointer; box-shadow:0 10px 28px rgba(8,120,232,.22); }
button:hover,.button:hover { filter:brightness(1.08); transform:translateY(-1px); }
button.secondary,.button.secondary { background:#132b4b; color:white; box-shadow:none; } button.danger { background:var(--danger); color:white; }
form.inline { display:inline; } .actions { display:flex; flex-wrap:wrap; gap:8px; }
table { width:100%; border-collapse:collapse; } th,td { padding:11px; text-align:left; border-bottom:1px solid var(--line); } th { color:var(--muted); }
.status { display:inline-block; padding:3px 8px; border-radius:99px; background:#132b4b; }.status.active { color:var(--cyan); }
.notice { background:rgba(16,200,255,.1); border:1px solid rgba(16,200,255,.38); padding:12px; border-radius:10px; margin:14px 0; overflow-wrap:anywhere; }
.error { color:#ff9ca7; background:rgba(255,101,119,.08); border:1px solid rgba(255,101,119,.3); padding:10px 12px; border-radius:10px; }.login { max-width:420px; margin:10vh auto; }.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card { max-width:820px; }.form-actions { margin-top:20px; }.form-card small { display:block; margin-top:5px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#030b1c; padding:12px; border-radius:8px; }

.activation-page { background:radial-gradient(circle at 50% 0,rgba(8,120,232,.48),transparent 38%),radial-gradient(circle at 10% 90%,rgba(16,200,255,.13),transparent 30%),#020714; }
.activation-page .shell { max-width:1120px; }
.activation-page header { justify-content:center; }
.activation-page header .brand { display:none; }
.activation-card { position:relative; max-width:500px; margin:5vh auto 0; padding:38px 42px 32px; text-align:center; overflow:hidden; border-color:rgba(16,200,255,.34); box-shadow:0 28px 100px rgba(0,0,0,.48),0 0 70px rgba(8,120,232,.12); }
.activation-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent); }
.activation-logo-wrap { width:132px; height:132px; margin:0 auto 18px; border-radius:50%; padding:4px; background:linear-gradient(135deg,#fff,var(--cyan),var(--blue)); box-shadow:0 0 45px rgba(16,200,255,.28); }
.activation-logo { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.eyebrow { margin:0 0 5px; color:var(--cyan); font-size:12px; font-weight:900; letter-spacing:.22em; }
.activation-card h1 { margin:0; font-size:clamp(28px,6vw,38px); line-height:1.15; letter-spacing:-.025em; }
.activation-intro { margin:13px auto 22px; max-width:390px; color:var(--muted); }
.activation-form { text-align:left; }
.activation-form label { color:#d9e8fb; font-weight:700; }
.activation-form button { width:100%; margin-top:18px; padding:14px 18px; letter-spacing:.035em; }
.form-help { margin:7px 0 0; color:#7890ad; font-size:12px; }
.activation-action .button { width:100%; padding:14px 18px; }
.secure-note { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:22px; color:#7890ad; font-size:12px; }
.secure-note span { display:inline-grid; place-items:center; width:18px; height:18px; border:1px solid rgba(16,200,255,.45); border-radius:50%; color:var(--cyan); }

@media(max-width:800px){ .metrics{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr} table{font-size:13px}.shell{padding:18px 12px}.activation-card{margin-top:2vh;padding:30px 22px 26px}.activation-logo-wrap{width:112px;height:112px} }