:root {
  --bg: #080b0c;
  --panel: #101516;
  --panel-2: #141a1b;
  --line: #222a2b;
  --line-soft: #1a2021;
  --text: #f2f5f4;
  --muted: #8d9997;
  --green: #59f5a6;
  --green-soft: rgba(89, 245, 166, .1);
  --amber: #f4c76b;
  --red: #ff7777;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, Segoe UI, system-ui, sans-serif; min-width: 320px; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% -10%, rgba(58, 136, 101, .12), transparent 31%), linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 65%); }
button, input, select { font: inherit; }
.app-shell { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 32px 48px; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--green); color: #06120c; border-radius: 10px; box-shadow: 0 0 32px rgba(89,245,166,.16); }
.brand-mark svg { width: 27px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-weight: 800; font-size: 14px; letter-spacing: .15em; }
.brand-name span { color: var(--green); }.brand-sub { color: var(--muted); font-size: 10px; margin-top: 2px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.live-pill, .mode-badge { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(244,199,107,.09); }.live-pill.online .pulse { background: var(--green); box-shadow: 0 0 0 4px rgba(89,245,166,.09); }
.mode-badge { color: var(--green); background: var(--green-soft); border-color: rgba(89,245,166,.2); }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; display: grid; place-items: center; cursor: pointer; }.icon-button:hover { border-color: #3b4846; color: var(--text); }.icon-button svg { width: 17px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
main { padding-top: 42px; }
.hero-row { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 25px; }
.eyebrow { color: var(--green); font-weight: 800; letter-spacing: .16em; font-size: 10px; margin-bottom: 10px; }
h1 { font-size: clamp(29px, 3vw, 43px); line-height: 1.05; margin: 0 0 11px; letter-spacing: -.045em; }
.hero-row p { margin: 0; color: var(--muted); font-size: 13px; max-width: 720px; }
.update-meta { min-width: 175px; text-align: right; }.update-meta span, .update-meta small { display: block; color: var(--muted); font-size: 10px; }.update-meta strong { display: block; margin: 5px 0 3px; font-size: 14px; }
.notice { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid rgba(244,199,107,.22); background: rgba(244,199,107,.055); border-radius: 10px; margin-bottom: 18px; }.notice[hidden] { display: none; }.notice svg { width: 19px; flex: none; stroke: var(--amber); stroke-width: 1.8; }.notice div { display: flex; gap: 8px; align-items: baseline; flex: 1; font-size: 11px; }.notice strong { color: var(--amber); }.notice span { color: var(--muted); }.notice a { color: var(--text); font-size: 10px; text-decoration: none; border-bottom: 1px solid #67706f; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.metric-card, .panel { background: linear-gradient(145deg, rgba(18,24,25,.98), rgba(13,18,19,.98)); border: 1px solid var(--line); border-radius: 12px; }.metric-card { min-height: 128px; padding: 18px; position: relative; overflow: hidden; }.metric-card.accent::after { content:""; position:absolute; width:100px; height:100px; right:-40px; top:-40px; border-radius:50%; background:var(--green); filter:blur(60px); opacity:.13; }
.metric-label { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.metric-icon { color:#62706e; font-size:14px; }.status-dot { margin-top:4px; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.metric-value { font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.04em; margin: 18px 0 10px; }.metric-value.compact { font-size:25px; }.metric-foot { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-panel { overflow: hidden; }.panel-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid var(--line-soft); }.panel-title { font-size:14px; font-weight:700; }.panel-subtitle { margin-top:4px; color:var(--muted); font-size:10px; }.count-badge { color:var(--green); font-size:9px; padding:3px 6px; border-radius:5px; background:var(--green-soft); vertical-align:2px; margin-left:5px; }.legend { display:flex; gap:16px; color:var(--muted); font-size:9px; }.legend span { display:flex; align-items:center; gap:6px; }.legend i { width:6px; height:6px; border-radius:50%; }.legend .green { background:var(--green); }.legend .amber { background:var(--amber); }.legend .gray { background:#515b59; }
.filters { display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1fr auto; gap:10px; align-items:end; padding:14px 20px; border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.012); }.filters label>span { display:block; color:var(--muted); font-size:9px; margin:0 0 7px 2px; }.filters select, .filters input { width:100%; height:37px; appearance:none; background:#0c1011; border:1px solid var(--line); color:#dce2e0; border-radius:7px; padding:0 30px 0 11px; font-size:11px; outline:none; }.filters select { background-image:linear-gradient(45deg,transparent 50%,#62706e 50%),linear-gradient(135deg,#62706e 50%,transparent 50%); background-position:calc(100% - 14px) 15px,calc(100% - 10px) 15px;background-size:4px 4px;background-repeat:no-repeat; }.filters select:focus,.filters input:focus{border-color:#3b4a47}.input-suffix{position:relative}.input-suffix b{position:absolute;right:11px;top:10px;font-size:10px;color:var(--muted)}.toggle-label{min-width:86px}.toggle{width:45px;height:25px;border:1px solid var(--line);border-radius:20px;background:#0c1011;padding:2px;cursor:pointer}.toggle span{display:block;width:19px;height:19px;background:#596361;border-radius:50%;transition:.2s}.toggle.active{background:var(--green-soft);border-color:rgba(89,245,166,.3)}.toggle.active span{transform:translateX(19px);background:var(--green)}
.table-wrap { overflow-x:auto; min-height:260px; position:relative; } table { width:100%; border-collapse:collapse; min-width:1180px; } th { padding:12px 13px; color:#6f7b79; text-transform:uppercase; letter-spacing:.06em; font-size:8px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line-soft); } td { padding:14px 13px; border-bottom:1px solid var(--line-soft); font-size:10px; white-space:nowrap; } tbody tr { transition:.15s; } tbody tr:hover { background:rgba(255,255,255,.018); } tbody tr.signal { background:linear-gradient(90deg,rgba(89,245,166,.045),transparent 35%); }
.asset { display:flex; align-items:center; gap:9px; }.asset-icon { width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#1c2424;color:var(--green);font-size:9px;font-weight:800;}.asset strong,.stack strong{display:block;font-size:11px}.asset small,.stack small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.exchange { display:flex;align-items:center;gap:7px;font-weight:600}.exchange-dot{width:7px;height:7px;border:2px solid var(--green);border-radius:50%}.number-positive{color:var(--green)}.number-negative{color:var(--red)}.money{font-weight:700;font-size:11px}.costs{color:var(--amber)}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;background:#19201f;color:#aeb7b5;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.status-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:#697370}.status-pill.active{background:var(--green-soft);color:var(--green)}.status-pill.active::before{background:var(--green);box-shadow:0 0 7px var(--green)}.status-pill.candidate,.status-pill.refreshing{background:rgba(244,199,107,.08);color:var(--amber)}.status-pill.candidate::before,.status-pill.refreshing::before{background:var(--amber)}.best-tag{font-size:7px;color:#07100c;background:var(--green);padding:2px 4px;border-radius:3px;margin-left:5px;font-weight:800}.quote-age{color:var(--muted)}.quote-age.stale{color:var(--red)}
.empty-state { position:absolute;inset:42px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:7px;background:rgba(12,16,17,.5); }.empty-state.hidden { display:none; }.empty-state strong{font-size:12px;color:#c5cdcb}.empty-state span{font-size:9px}.loader-rings{display:flex;gap:4px;margin-bottom:8px}.loader-rings i{width:6px;height:18px;border-radius:5px;background:var(--green);animation:load 1s infinite ease-in-out}.loader-rings i:nth-child(2){animation-delay:.15s}.loader-rings i:nth-child(3){animation-delay:.3s}@keyframes load{0%,100%{transform:scaleY(.4);opacity:.35}50%{transform:scaleY(1);opacity:1}}
.lower-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:14px;margin-top:14px}.compact-head{padding:16px 18px}.chart-value{font-size:20px;color:var(--green);font-weight:700}.chart-wrap{height:190px;position:relative;padding:14px 18px 18px}.chart-wrap canvas{width:100%;height:100%}.chart-zero{position:absolute;left:7px;bottom:45%;font-size:8px;color:#56605e}.check-list{padding:8px 18px 14px}.check-list>div{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft)}.check-list>div:last-child{border-bottom:0}.check{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(244,199,107,.08);color:var(--amber);font-size:11px;font-weight:800}.check.ok{background:var(--green-soft);color:var(--green)}.check.error{background:rgba(255,119,119,.08);color:var(--red)}.check-list p{margin:0}.check-list strong{display:block;font-size:10px}.check-list small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.formula-note{display:flex;align-items:center;gap:13px;margin-top:14px;padding:11px 14px;border:1px dashed #293130;border-radius:9px;color:var(--muted);font-size:9px}.formula-note>span{text-transform:uppercase;letter-spacing:.08em;color:#687371}.formula-note code{flex:1;color:#aab4b1;font-family:inherit}.formula-note b{color:var(--green)}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:repeat(2,1fr)}.toggle-label{grid-column:span 2}.lower-grid{grid-template-columns:1fr}.notice div{display:block}.notice span{display:block;margin-top:3px}}
@media(max-width:620px){.app-shell{padding:0 14px 30px}.topbar{height:66px}.brand-sub,.mode-badge{display:none}.live-pill{padding:0 9px}.hero-row{display:block;margin-bottom:18px}.update-meta{text-align:left;margin-top:20px}.notice{align-items:flex-start}.notice a{display:none}.metrics{grid-template-columns:1fr 1fr;gap:8px}.metric-card{min-height:110px;padding:14px}.metric-value{font-size:25px;margin:14px 0 8px}.filters{grid-template-columns:1fr;padding:12px}.toggle-label{grid-column:auto}.panel-head{align-items:flex-start}.legend{display:none}.formula-note{display:block}.formula-note code,.formula-note small{display:block;margin-top:8px}}