:root{
  --ink:#0A0A0A; --ink2:#71717A; --label:#A1A1AA; --line:#E4E4E7;
  --surface:#F2F3F5; --card:#FFF;
  --ocean:#1A73E8; --ocean-deep:#1557B0; --ocean-tint:#E8F0FE;
  --neg:#DC2626; --neg-tint:#FEF2F2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--surface);color:var(--ink);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;text-align:right}
.micro{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--label)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.pill{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px}
.pill{display:inline-flex;align-items:center}
.pill.strong{background:var(--ocean-tint);color:var(--ocean-deep)}
.pill.weak{background:var(--neg-tint);color:var(--neg)}
.pill.mixed{background:#F4F4F5;color:#52525B}
.pill.watch{background:#FEF9C3;color:#854D0E}
.up{color:var(--ocean)} .down{color:var(--neg)}
a{color:inherit;text-decoration:none}
/* lucide icons */
svg.lucide{width:14px;height:14px;stroke-width:2;vertical-align:-2px;color:var(--label);flex:none}
.ic-ocean svg.lucide,svg.lucide.ic-ocean{color:var(--ocean)}
.ic-neg svg.lucide,svg.lucide.ic-neg{color:var(--neg)}
.pill svg.lucide{width:10px;height:10px;vertical-align:-1px;margin-right:3px;color:currentColor;stroke-width:2.5}
.micro svg.lucide{width:13px;height:13px;margin-right:4px;vertical-align:-3px}
.ctl svg.lucide{width:13px;height:13px}
.mbadge{display:inline-flex;align-items:center;padding:2px 7px;border:1px solid var(--line);border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;background:#fff;color:var(--ink)}
/* staging banner */
.stage-banner{background:var(--ink);color:#fff;padding:14px 28px;display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
.stage-banner .tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8AB4F8;white-space:nowrap}
.stage-banner p{font-size:12px;color:#D4D4D8;max-width:980px}
.stage-banner a.back{margin-left:auto;font-size:11px;color:#A1A1AA;border:1px solid #3F3F46;border-radius:8px;padding:4px 10px;white-space:nowrap}
/* left rail */
.rail{position:fixed;left:0;top:0;bottom:0;width:56px;background:var(--ink);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px;z-index:50}
.rail .logo{width:30px;height:30px;border-radius:8px;background:var(--ocean);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-bottom:12px}
.rail .ric{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#71717A;font-size:15px;cursor:pointer}
.rail .ric.on{background:#27272A;color:#fff}
.rail .ric svg.lucide{width:17px;height:17px;color:currentColor}
/* controls */
.ctl{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap}
.ctl:hover{border-color:#C9C9CE}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:none;padding:6px 12px;font:inherit;font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer}
.seg button.on{background:var(--ocean);color:#fff}
table.dense{width:100%;border-collapse:collapse;font-size:12px}
table.dense th{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--label);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;cursor:pointer;white-space:nowrap}
table.dense th.num{text-align:right}
table.dense td{padding:6px 10px;border-bottom:1px solid #F1F1F3;white-space:nowrap}
table.dense tbody tr:hover{background:#FAFAFB}
/* ---- app chrome (BEFORE/AFTER frame) ---- */
.app-rail{position:fixed;left:0;top:0;bottom:0;width:60px;background:#FAFAFA;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px;z-index:60}
.app-rail .logo{width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:14px}
.app-rail .ric{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer}
.app-rail .ric:hover{background:var(--surface);color:var(--ink)}
.app-rail .ric.on{background:var(--ocean-tint);color:var(--ocean)}
.app-rail .ric svg.lucide{width:17px;height:17px;color:currentColor}
.app-rail .rspace{flex:1}
.app-top{position:fixed;top:0;left:60px;right:0;height:52px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 22px;z-index:55}
.app-top h1{font-size:16px;font-weight:700;letter-spacing:-.01em}
.app-top .tspace{flex:1}
.app-top .bell{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.app-top .bell:hover{background:var(--surface)}
.app-top .bell svg.lucide{width:17px;height:17px;color:var(--ink2)}
.app-top .bell .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:99px;background:var(--neg);border:1.5px solid #fff}
.app-top .avatar{width:30px;height:30px;border-radius:99px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.app-content{margin-left:60px;padding-top:52px}
/* floating BEFORE/AFTER flip pill */
.flip{position:fixed;top:62px;right:18px;z-index:70;display:inline-flex;background:var(--line);border-radius:99px;padding:3px;box-shadow:0 2px 8px rgba(10,10,10,.10)}
.flip a{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 12px;border-radius:99px;color:var(--ink2)}
.flip a.on{background:var(--ocean);color:#fff}
.flip a:not(.on):hover{color:var(--ink)}