:root { color-scheme: dark; --bg:#050b13; --panel:#091522; --line:#173149; --text:#edf5ff; --muted:#8ca0b6; --brand:#f5a524; --orange:#ff6b2c; --cyan:#49c8ff; --green:#4bd46a; --red:#ff5a63; font-family:Inter,Segoe UI,Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 40% -20%,#123352 0,#07111d 38%,var(--bg) 72%); }
button,input { font:inherit; }
button { min-height:42px; border:1px solid #8e5d15; border-radius:9px; padding:8px 14px; color:#111923; background:linear-gradient(135deg,#ffc24d,var(--brand)); font-weight:800; cursor:pointer; }
button.ghost { color:var(--text); background:#0b1724; border-color:var(--line); }
.topbar { position:sticky; top:0; z-index:10; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px clamp(18px,4vw,58px); border-bottom:1px solid var(--line); background:#06101beF; backdrop-filter:blur(16px); }
.brand { display:flex; align-items:baseline; gap:7px; font-weight:900; font-style:italic; letter-spacing:.04em; }.brand strong { color:var(--orange); font-size:30px; }.brand span { font-size:18px; }.brand small { color:var(--muted); font-size:9px; letter-spacing:.24em; }.brand.large { justify-content:center; }.brand.large strong { font-size:44px; }
.top-actions { display:flex; align-items:center; gap:9px; }
.pill { display:inline-flex; align-items:center; min-height:34px; padding:6px 10px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:#091522; font-size:12px; font-weight:800; }.pill.ok { color:var(--green); border-color:#28653a; }.pill.error { color:var(--red); border-color:#73343a; }.pill.pending { color:var(--brand); }
main { width:min(1420px,calc(100% - 32px)); margin:0 auto; padding:34px 0 70px; }
.hero { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; padding:28px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(125deg,#0a1c2c,#09121e 55%,#21170b); box-shadow:0 20px 60px #0007; }.hero h1 { margin:3px 0 9px; font-size:clamp(28px,4vw,48px); }.hero p { margin:0; color:var(--muted); }.eyebrow { color:var(--brand)!important; font-size:11px; font-weight:900; letter-spacing:.16em; }.hero-status { min-width:220px; padding:16px; border:1px solid #674a1f; border-radius:12px; background:#0a1420; }.hero-status span,.hero-status small { display:block; color:var(--muted); }.hero-status strong { display:block; margin:6px 0; color:var(--cyan); font-size:21px; }
.site-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }.site-card { display:grid; gap:5px; text-align:left; color:var(--text); background:linear-gradient(145deg,#0b1928,#08111d); border-color:var(--line); }.site-card.is-active { border-color:var(--brand); box-shadow:inset 3px 0 var(--brand); }.site-card small { color:var(--muted); font-weight:500; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:25px 0 12px; }.section-head h2 { margin:2px 0; }.metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }.metrics article { min-width:0; padding:17px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,#0b1928,#08111d); }.metrics article.safe { border-color:#28653a; }.metrics span { display:block; min-height:30px; color:var(--muted); font-size:12px; }.metrics strong { display:block; overflow:hidden; color:var(--brand); font-size:23px; text-overflow:ellipsis; white-space:nowrap; }.metrics .safe strong { color:var(--green); }
.panel { margin-top:20px; padding:1px 18px 18px; border:1px solid var(--line); border-radius:14px; background:#08131f; }.safe-note { color:var(--green); font-size:12px; }.table-wrap { overflow:auto; }table { width:100%; border-collapse:collapse; }th,td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }th { color:var(--muted); font-size:11px; }td { font-size:13px; }.hash { display:block; max-width:150px; overflow:hidden; color:var(--muted); font-family:Consolas,monospace; text-overflow:ellipsis; }.status-ok { color:var(--green); font-weight:800; }.download { min-height:34px; padding:5px 10px; }
.login-layer { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:18px; background:#03080deF; backdrop-filter:blur(13px); }.login-layer[hidden] { display:none; }.login-card { width:min(460px,100%); padding:28px; border:1px solid #77531e; border-radius:18px; background:linear-gradient(145deg,#0c1a28,#080f18); box-shadow:0 30px 90px #000; }.login-card h1 { margin:20px 0 8px; }.login-card p { color:var(--muted); }.login-card label { display:grid; gap:7px; margin:18px 0; color:var(--muted); font-size:12px; }.login-card input { width:100%; min-height:46px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:#050c14; }.login-card button { width:100%; }.error { min-height:20px; color:var(--red)!important; }
.toast { position:fixed; right:20px; bottom:20px; z-index:40; width:min(380px,calc(100% - 40px)); padding:13px; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:10px; background:#122235; box-shadow:0 18px 45px #0009; }
@media(max-width:1000px) { .metrics { grid-template-columns:repeat(2,1fr); }.site-list { grid-template-columns:1fr 1fr; } }
@media(max-width:650px) { .topbar,.hero,.section-head { align-items:stretch; flex-direction:column; }.topbar { position:static; }.top-actions { flex-wrap:wrap; }.hero { grid-template-columns:1fr; }.site-list,.metrics { grid-template-columns:1fr; }.hero-status { min-width:0; } }