:root { --bg:#0b1220; --panel:#131d2d; --panel-soft:#17243a; --line:#26364e; --text:#f3f7fb; --muted:#93a4ba; --blue:#54b6ff; --green:#55d69a; --yellow:#ffcf70; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font:15px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.rail { position:fixed; inset:0 auto 0 0; width:238px; padding:28px 18px; border-right:1px solid var(--line); background:#0d1727; display:flex; flex-direction:column; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:#06101b; background:linear-gradient(135deg,#71c7ff,#58e0a4); }
nav { display:grid; gap:6px; margin:48px 0; } nav a { color:var(--muted); text-decoration:none; padding:11px 13px; border-radius:8px; } nav a:hover, nav a.active { color:var(--text); background:#1c2c44; } nav a.active { box-shadow:inset 3px 0 var(--blue); }
.rail-note { margin-top:auto; color:var(--muted); font-size:12px; }
main { max-width:1500px; margin-left:238px; padding:36px 46px 64px; }
.topbar, .panel-heading, .topbar-actions, .formula-grid { display:flex; align-items:center; justify-content:space-between; gap:20px; }
h1,h2,p { margin:0; } h1 { margin-top:2px; font-size:30px; } h2 { font-size:18px; }.eyebrow { color:var(--blue); font-size:11px; letter-spacing:.1em; font-weight:800; }
button,.period { border:1px solid var(--line); background:var(--panel-soft); color:var(--text); border-radius:8px; padding:10px 13px; cursor:pointer; }.period-label { display:grid; gap:4px; color:var(--muted); font-size:11px; }.period { min-width:92px; }.status { color:var(--muted); font-size:13px; }.status i { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--yellow); }.status i.healthy { background:var(--green); }
.notice { display:flex; gap:12px; margin:30px 0 22px; padding:14px 16px; border:1px solid #554622; border-radius:10px; color:#f6d58e; background:#261f12; }.notice span { color:#d1b978; }
.login-panel { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:0 0 22px; padding:18px; border:1px solid #275a76; border-radius:12px; background:#102136; }.login-panel h2 { margin-top:4px; }.login-panel form { display:flex; align-items:end; gap:10px; }.login-panel label { display:grid; gap:5px; color:var(--muted); font-size:12px; }.login-panel input { width:150px; border:1px solid var(--line); border-radius:7px; padding:10px; background:#0b1220; color:var(--text); }.login-panel button { border-color:#2e7eb9; background:#1e5f91; }.login-message { color:var(--yellow); font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.metric-card,.panel { border:1px solid var(--line); border-radius:13px; background:var(--panel); }.metric-card { min-height:132px; padding:19px; display:flex; flex-direction:column; gap:6px; }.metric-card span,.metric-card small { color:var(--muted); }.metric-card strong { font-size:31px; letter-spacing:-.04em; }.metric-card small { font-size:12px; }.metric-card.accent { border-color:#24649b; background:linear-gradient(145deg,#162b43,#132136); }.metric-card.accent strong { color:#8ed1ff; }
.layout { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin:16px 0; }.panel { padding:22px; }.panel-heading button { color:var(--blue); }.chart-placeholder { display:grid; place-items:center; height:260px; margin-top:20px; border-radius:9px; border:1px dashed #38506c; color:var(--muted); background:repeating-linear-gradient(0deg,transparent 0 48px,#1a2940 49px 50px); }.sources ul { list-style:none; margin:20px 0 0; padding:0; }.sources li { display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); }.sources b { font-size:12px; }.pending { color:var(--yellow); }.pill { border:1px solid #275a76; color:#8dd8f7; border-radius:999px; padding:6px 10px; font-size:12px; }.formula-grid { align-items:stretch; margin-top:20px; }.formula-grid div { flex:1; padding:15px; border-radius:9px; background:var(--panel-soft); }.formula-grid p { color:var(--muted); margin-top:8px; font-size:13px; }
.overview-chart { display:grid; place-items:center; min-height:260px; margin-top:20px; border-radius:9px; border:1px solid #38506c; color:var(--muted); background:repeating-linear-gradient(0deg,transparent 0 48px,#1a2940 49px 50px); padding:8px; }.overview-chart svg { display:block; width:100%; max-height:230px; }.trend-caption { color:var(--muted); font-size:12px; text-align:center; }
.reference-page { margin-top:28px; }.reference-page h2 { margin:4px 0 8px; font-size:25px; }.page-intro { color:var(--muted); margin-bottom:22px; }.reference-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }.reference-summary article { border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:17px; }.reference-summary span { display:block; color:var(--muted); font-size:13px; }.reference-summary strong { display:block; margin-top:6px; font-size:26px; }.reference-filters { display:flex; gap:14px; margin:18px 0; }.reference-filters label { display:grid; gap:6px; min-width:210px; color:var(--muted); font-size:12px; }.reference-filters input,.reference-filters select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:8px; padding:9px 11px; color:var(--text); background:var(--panel-soft); }.reference-list { display:grid; gap:12px; }.reference-card { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:18px; }.reference-card h3 { margin:0 0 5px; font-size:17px; }.reference-card p { color:var(--muted); margin:4px 0; overflow-wrap:anywhere; }.reference-card details { border-top:1px solid var(--line); margin-top:12px; padding-top:11px; }.reference-card summary { cursor:pointer; color:#9bd5ff; }.reference-row { border-top:1px solid var(--line); padding:11px 0; }.reference-row:first-child { border-top:0; }.reference-row b { color:var(--text); }.reference-row a { color:#8ed1ff; overflow-wrap:anywhere; }.reference-empty { color:var(--muted); border:1px dashed var(--line); border-radius:10px; padding:20px; }
.ad-unit-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.ad-unit-alert { padding:13px; border:1px solid #705234; border-radius:8px; background:#271e19; }.ad-unit-alert p { margin:5px 0; color:#ffd38b; }.ad-unit-alert small { color:var(--muted); }.ad-unit-alert a { color:#8ed1ff; }
.xray-row { display:grid; grid-template-columns:70px 100px 1fr; gap:14px; align-items:center; padding:13px 16px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }.xray-row strong { color:#8ed1ff; }.xray-row span { color:var(--muted); font-size:13px; }
.xray-subheading { margin:28px 0 12px; }.reference-page > h3 { font-size:17px; }
.sp2-hourly { margin-top:36px; padding-top:25px; border-top:1px solid var(--line); }.sp2-hourly h3 { margin:0 0 8px; font-size:20px; }.sp2-hourly .reference-filters { align-items:end; }.sp2-hourly button { min-height:40px; }.sp2-scroll { overflow-x:auto; }.sp2-table { border-collapse:collapse; width:100%; min-width:730px; font-size:13px; }.sp2-table th,.sp2-table td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }.sp2-table th:first-child,.sp2-table td:first-child,.sp2-table th:nth-child(2),.sp2-table td:nth-child(2) { text-align:left; }.sp2-table th { color:var(--muted); font-weight:600; }.sp2-table .pending { color:var(--yellow); }
@media (max-width:900px) { .rail { width:185px; padding:22px 10px; }.rail nav { margin:28px 0; }.rail nav a { padding:9px; font-size:13px; } main { margin-left:185px; padding:28px 22px; }.metrics,.reference-summary { grid-template-columns:repeat(2,1fr); }.layout,.ad-unit-columns { grid-template-columns:1fr; } }
@media (max-width:600px) { .rail { position:static; width:auto; padding:14px 16px; border-right:0; border-bottom:1px solid var(--line); }.rail nav { display:flex; overflow-x:auto; margin:12px 0 0; }.rail nav a { white-space:nowrap; }.rail-note { display:none; } main { margin-left:0; padding:22px 16px; }.topbar,.topbar-actions,.notice,.panel-heading,.formula-grid,.login-panel,.login-panel form,.reference-filters { align-items:flex-start; flex-direction:column; }.metrics,.reference-summary { grid-template-columns:1fr 1fr; }.notice { line-height:1.35; }.login-panel input { width:100%; }.xray-row { grid-template-columns:55px 1fr; }.xray-row span { grid-column:1 / -1; } }