:root{
  --bg:#0B1220; --bg-2:#0E1730; --surface:#121C33; --surface-2:#182541; --line:rgba(154,176,220,.13);
  --text:#E8EEFA; --muted:#8C9BBB; --faint:#5C6A8A;
  --rm:#4CC3FF; --rm-soft:rgba(76,195,255,.16);
  --fetch:#F5B84B; --fetch-soft:rgba(245,184,75,.16);
  --pos:#3DDC97; --pos-soft:rgba(61,220,151,.14);
  --neg:#FF6B7A; --neg-soft:rgba(255,107,122,.14);
  --warn:#FFB020;
  --r-lg:20px; --r-md:14px; --r-sm:8px;
  --shadow:0 20px 50px -30px rgba(0,0,0,.8);
  font-family:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%,rgba(76,195,255,.10),transparent 60%),
             radial-gradient(900px 500px at 100% 0%,rgba(245,184,75,.08),transparent 60%),var(--bg);
  font-size:14px;line-height:1.45;
  font-feature-settings:"tnum" 1,"ss01" 1;
  padding:22px clamp(14px,3vw,36px) 40px;
  min-height:100vh;
}
h2{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em}
button,a.ghost{font:inherit}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.03em}
.logo{width:38px;height:38px;filter:drop-shadow(0 0 10px rgba(245,184,75,.35))}
.brand .tag{font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.02em;margin-left:4px;padding-top:6px}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--fetch);box-shadow:0 0 16px rgba(245,184,75,.3)}
.status{display:flex;align-items:center;gap:10px}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pulse 2.2s infinite}
.live.stale .live-dot{background:var(--warn);animation:none}
.live.err .live-dot{background:var(--neg);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer;text-decoration:none;font-size:12px}
.ghost:hover{color:var(--text);border-color:rgba(154,176,220,.35)}
.ghost:focus-visible,.seg button:focus-visible,input:focus-visible,.login button:focus-visible{outline:2px solid var(--rm);outline-offset:2px}

/* alerts */
.alerts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.alert{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid}
.alert.neg{color:var(--neg);background:var(--neg-soft);border-color:rgba(255,107,122,.3)}
.alert.pos{color:var(--pos);background:var(--pos-soft);border-color:rgba(61,220,151,.3)}
.alert.warn{color:var(--warn);background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.3)}

/* runways (hero) */
.runways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.runway{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:22px 24px 20px;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);box-shadow:var(--shadow)}
.runway::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 220px at 0% 0%,var(--glow),transparent 70%)}
.runway.rm{--c:var(--rm);--glow:rgba(76,195,255,.18)}
.runway.fetch{--c:var(--fetch);--glow:rgba(245,184,75,.16)}
.rw-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;position:relative}
.rw-title{font-weight:600;color:var(--muted)}
.rw-title b{color:var(--text);font-weight:800}
.rw-pace{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.rw-pace.ahead{color:var(--pos);background:var(--pos-soft)}
.rw-pace.behind{color:var(--neg);background:var(--neg-soft)}
.rw-nums{display:flex;align-items:baseline;gap:12px;margin:10px 0 14px;position:relative}
.rw-mtd{font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--c)}
.rw-target{color:var(--muted);font-size:14px}
.rw-target b{color:var(--text)}
.rw-pct{margin-left:auto;font-size:26px;font-weight:800;letter-spacing:-.03em}
.rw-bar{position:relative;height:18px;border-radius:999px;background:rgba(255,255,255,.06);overflow:visible;border:1px solid var(--line)}
.rw-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,transparent),var(--c));box-shadow:0 0 22px color-mix(in srgb,var(--c) 45%,transparent);transition:width 1.1s cubic-bezier(.2,.8,.2,1);width:0}
.rw-fill::after{content:"";position:absolute;inset:0;border-radius:999px;background:repeating-linear-gradient(-55deg,transparent 0 10px,rgba(255,255,255,.07) 10px 14px)}
.rw-fill{position:relative}
.rw-proj{position:absolute;top:-1px;height:18px;border-right:2px dashed color-mix(in srgb,var(--c) 70%,white);opacity:.55;pointer-events:none}
.rw-marker{position:absolute;top:-7px;width:2px;height:32px;background:#fff;border-radius:2px;transform:translateX(-1px)}
.rw-marker span{position:absolute;top:34px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--muted)}
.rw-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:34px;position:relative}
.rw-meta div{padding:8px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.rw-meta small{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}
.rw-meta b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.rw-next{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;position:relative}
.rw-next span{font-size:11px;color:var(--faint);padding:3px 8px;border-radius:999px;border:1px dashed var(--line)}
.rw-next span b{color:var(--muted);font-weight:600}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.kpi{padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.kpi small{display:block;color:var(--muted);font-size:12px}
.kpi .v{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:4px 0 6px}
.kpi.fetch .v{color:var(--fetch)}
.kpi .d{display:flex;flex-wrap:wrap;gap:4px 8px}
.delta{font-size:12px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.delta.pos{color:var(--pos);background:var(--pos-soft)}
.delta.neg{color:var(--neg);background:var(--neg-soft)}
.delta.flat{color:var(--muted);background:rgba(255,255,255,.05)}
.delta em{font-style:normal;font-weight:400;opacity:.75}

/* grid + panels */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.sub{color:var(--faint);font-size:12px}
.chart{position:relative;height:240px}.chart.tall{height:300px}
.seg{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{background:transparent;border:0;color:var(--muted);padding:4px 12px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600}
.seg button.on{background:var(--rm-soft);color:var(--rm)}
.donut-wrap{display:flex;justify-content:center}
.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.donut-center b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em}
.donut-center small{color:var(--muted);font-size:11px}
.share-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:10px;font-size:12px}
.share-legend div{display:flex;align-items:center;gap:8px;color:var(--muted)}
.share-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.share-legend b{color:var(--text);margin-left:auto}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--muted);font-weight:600;text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12px}
td{padding:9px 10px;text-align:right;border-bottom:1px solid rgba(154,176,220,.06);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
.sources th{cursor:pointer;user-select:none}
.sources th.sorted{color:var(--text)}
.sources th.sorted::after{content:" ▾";font-size:10px}
.src{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.src i{width:10px;height:10px;border-radius:3px;display:inline-block}
td.money{font-weight:600}
td.cell{font-weight:700;border-radius:6px}
tr.total td{font-weight:800;border-top:1px solid var(--line);color:var(--text)}
.spark{width:110px;height:28px;vertical-align:middle}
.badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.01em}
.badge.hot{color:#06251A;background:var(--pos)}
.badge.ok{color:var(--muted);background:rgba(255,255,255,.06)}
.badge.cold{color:#2B0A0E;background:var(--neg)}
.badge.zero{color:#2A1A00;background:var(--warn)}
.raw td.dim{color:var(--faint)}
.raw td.hi{color:var(--pos)}
.raw td.lo{color:var(--neg)}

/* heatmap */
.heatmap{display:grid;grid-template-columns:auto repeat(7,1fr);gap:6px;align-items:center}
.heatmap .hl{color:var(--muted);font-size:12px;text-align:center}
.heatmap .rl{color:var(--muted);font-size:12px;padding-right:6px;white-space:nowrap}
.heatmap .hc{height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text);border:1px solid rgba(154,176,220,.08)}
.heatmap .hc.empty{background:transparent;border-style:dashed;color:var(--faint);font-weight:400}

.months-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
@media (max-width:900px){.months-wrap{grid-template-columns:1fr}}
.foot{margin-top:22px;color:var(--faint);font-size:12px}

/* login */
.login-body{display:grid;place-items:center}
.login{width:min(360px,92vw);padding:0 28px 28px;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:grid;gap:10px;box-shadow:var(--shadow)}
.login-bear{width:calc(100% + 56px);margin:0 -28px 6px;aspect-ratio:1;object-fit:cover;object-position:50% 30%;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.login .brand{margin-top:-18px;justify-content:center;font-size:26px}
.login .logo{width:56px;height:56px}
.login label{color:var(--muted);font-size:12px;margin-top:8px}
.login input{font:inherit;padding:11px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text)}
.login button{margin-top:6px;padding:11px;border:0;border-radius:var(--r-sm);background:var(--rm);color:#04202E;font-weight:800;cursor:pointer}
.login-error{color:var(--neg);font-size:12px;margin:0}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr 1fr}.span-3{grid-column:span 2}}
@media (max-width:760px){.runways{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.span-2,.span-3{grid-column:span 1}.rw-meta{grid-template-columns:1fr 1fr}.top{flex-direction:column;gap:10px;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.rw-fill{transition:none}.live-dot{animation:none}}