:root{--bg:#08111f;--panel:#111c2d;--panel2:#172337;--text:#e5edf8;--muted:#9fb0c7;--line:rgba(148,163,184,.24);--shadow:0 24px 80px rgba(0,0,0,.38);font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;color-scheme:dark}
    :root.light{--bg:#f5f7fb;--panel:#fff;--panel2:#eef3f8;--text:#152033;--muted:#5d6c81;--line:rgba(71,85,105,.22);--shadow:0 20px 60px rgba(15,23,42,.12);color-scheme:light}
    *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,select,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid rgba(96,165,250,.9);outline-offset:2px}button:disabled{opacity:.48;cursor:not-allowed}

    /* Top bar */
    .topbar{display:flex;justify-content:space-between;align-items:center;padding:10px clamp(18px,4vw,56px);background:rgba(4,10,22,.97);border-bottom:1px solid rgba(148,163,184,.18);position:sticky;top:0;z-index:10}
    .light .topbar{background:rgba(255,255,255,.97);border-bottom-color:rgba(71,85,105,.22)}
    .topbar-brand{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd}
    .light .topbar-brand{color:#1e40af}

    /* Hero */
    .hero{display:grid;grid-template-columns:minmax(280px,.92fr) minmax(360px,1fr);gap:28px;align-items:end;padding:38px clamp(18px,4vw,56px) 34px;background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(30,41,59,.91) 62%,rgba(43,74,88,.9)),repeating-linear-gradient(105deg,rgba(125,211,252,.1) 0 2px,transparent 2px 22px);border-bottom:1px solid var(--line)}
    /* Hero text always light — hero bg is always dark */
    .hero h1{color:#e2e8f0}
    .hero .subcopy{color:#cbd5e1}
    .eyebrow{margin:0 0 8px;color:#93c5fd;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0}
    h1,h2,h3,p{margin-top:0}h1{max-width:760px;margin-bottom:14px;font-size:clamp(2.35rem,6vw,5.3rem);line-height:.96;letter-spacing:0}h2{margin-bottom:4px;font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:0}.subcopy{max-width:720px;margin-bottom:0;font-size:1.02rem;line-height:1.6}

    .panel,.card,.module,.status,.modal{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px}.panel{padding:16px}.ticker{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.ticker span{min-height:34px;padding:8px 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);font-weight:800}
    .controls,.toolbar,.section-header,.top,.stats,.modal-top,.actions{display:flex;align-items:center;gap:12px}.controls,.section-header,.modal-top{justify-content:space-between;flex-wrap:wrap}.segmented{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:8px;background:rgba(15,23,42,.38)}.segmented button,.secondary,.actions button,.primary{min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:7px}.segmented button{background:transparent;color:#dbeafe}.segmented .active{color:#0f172a;background:#e0f2fe}.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-color:color-mix(in srgb,#38bdf8 54%,var(--line));background:linear-gradient(135deg,#0ea5e9,#14b8a6);color:#04111d;font-weight:900}.secondary,.actions button{display:inline-flex;align-items:center;gap:8px;background:var(--panel2)}
    .toolbar{flex-wrap:wrap}.toolbar label,.form-grid label{display:grid;gap:4px;color:#dbeafe;font-size:.8rem;font-weight:700}
    .light .toolbar label,.light .form-grid label{color:#1e3a5f}
    select,input{width:100%;min-height:36px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--text);padding:0 10px}.icon{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:.95rem}

    /* View mode buttons */
    .view-mode{display:flex;align-items:center;gap:6px}.view-mode-label{font-size:.73rem;font-weight:800;color:var(--muted);white-space:nowrap}
    .vm-btn{min-height:32px;padding:5px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--muted);font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}
    .vm-btn.active{background:#1e40af;border-color:#3b82f6;color:#e0f2fe}
    .light .vm-btn.active{background:#0ea5e9;border-color:#0284c7;color:#fff}

    .status-grid,.engagement{display:grid;gap:16px;margin:24px clamp(18px,4vw,56px)}.status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.status{display:grid;gap:7px;min-height:124px;padding:16px}.status small,.form-grid span{color:var(--muted);font-weight:800;text-transform:uppercase}.status span,.muted,small,footer,.empty{color:var(--muted);line-height:1.45}
    .compare,.module{margin:24px clamp(18px,4vw,56px);padding:18px}.compare-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px}.chart-box,.heatmap{min-height:300px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--panel2) 70%,transparent);padding:12px}.heatmap-grid{display:grid;gap:6px}.heatmap-grid span{display:grid;min-height:46px;place-items:center;border-radius:7px;color:#fff;font-weight:900;text-shadow:0 1px 6px rgba(0,0,0,.35)}
    .grid{column-count:3;column-gap:18px;padding:0 clamp(18px,4vw,56px) 24px}.card{position:relative;display:inline-block;width:100%;min-height:308px;margin:0 0 18px;overflow:hidden;padding:16px;break-inside:avoid}.card:before,.spark:before,.detail-chart:before{position:absolute;inset:0;background:var(--chart-bg);content:"";opacity:.38;pointer-events:none}.card:after,.spark:after,.detail-chart:after{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 80%,transparent),color-mix(in srgb,var(--panel) 96%,transparent));content:"";pointer-events:none}.top,.price,.spark,.stats,.badge,.note{position:relative;z-index:2}.top{justify-content:space-between}.title{display:flex;min-width:0;flex:1;align-items:center;gap:10px;border:0;background:transparent;text-align:left}.dot{width:13px;height:13px;flex:0 0 auto;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}.check{display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}.check.checked{background:var(--accent);color:#08111f}.trend{font-size:.78rem;font-weight:900}.up{color:#22c55e}.down{color:#ef4444}.price{display:block;margin-top:14px;padding:0;border:0;background:transparent;text-align:left}.price strong{display:block;font-size:1.65rem}.spark{height:136px;margin:10px 0;overflow:hidden;border:1px solid var(--line);border-radius:8px}.stats{justify-content:space-between;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem}.stats b{color:var(--text)}.badge,.note{display:inline-flex;margin-top:10px;font-size:.78rem}.badge{margin-right:8px;color:#facc15}
    .engagement{grid-template-columns:1fr}.engagement .module{margin:0}.form-grid,.activity{display:grid;gap:12px}.message{margin:12px 0 0;line-height:1.45}.message.ok{color:#86efac}.message.err{color:#fca5a5}
    footer{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px;padding:18px clamp(18px,4vw,56px) 34px;font-size:.9rem}footer strong{color:var(--text)}.copyright{font-style:italic;color:var(--muted);font-size:.85rem;text-align:right}.version{font-style:normal;font-weight:800;letter-spacing:.02em;color:#93c5fd}
    .backdrop{position:fixed;inset:0;z-index:20;display:none;justify-content:flex-end;background:rgba(2,6,23,.72)}.backdrop.open{display:flex}.modal{position:relative;width:min(920px,100%);height:100%;overflow:auto;border-radius:8px 0 0 8px;padding:24px}.detail-chart{position:relative;min-height:410px;overflow:hidden;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--panel2)}.actions{flex-wrap:wrap;margin:16px 0}.events{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:8px}
    svg.chart{position:relative;z-index:2;width:100%;height:100%;overflow:visible}.axis{stroke:var(--line);stroke-width:1}.line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.area{opacity:.22}.label{fill:var(--muted);font-size:11px}.point-label{fill:var(--text);font-size:11px;font-weight:800;text-anchor:middle}
    .tip{position:fixed;display:none;z-index:40;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel);box-shadow:var(--shadow);font-size:.82rem;pointer-events:none;max-width:260px;white-space:nowrap}
    .tp{cursor:crosshair}
    .xaxis{position:relative;height:14px;margin-top:3px}.xaxis span{position:absolute;top:0;transform:translateX(-50%);font-size:.56rem;font-weight:800;color:var(--text);white-space:nowrap;line-height:1}
    .xaxis.xaxis-lg{height:20px;margin:8px 13px 0}.xaxis.xaxis-lg span{font-size:.74rem}
    /* Correlation pair cards (unique pairs only) */
    .heatmap-grid .corr-pair{grid-auto-rows:auto;gap:3px;padding:8px 10px;text-align:center;min-height:auto}
    .corr-pair .corr-names{font-size:.72rem;font-weight:800;line-height:1.18;text-shadow:0 1px 4px rgba(0,0,0,.4)}
    .corr-pair .corr-val{font-size:1.2rem;font-weight:900;line-height:1}
    .heatmap .corr-empty{display:block;padding:18px 12px;color:var(--muted);font-size:.85rem;line-height:1.5;text-align:center}
    @media(max-width:1180px){.hero,.compare-grid{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{column-count:2}}@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:28px}.segmented{display:grid;grid-template-columns:1fr;width:100%}.status-grid{grid-template-columns:1fr}.grid{column-count:1}.section-header,.controls{align-items:stretch;flex-direction:column}.card{min-height:300px}.topbar-brand{display:none}footer{flex-direction:column;align-items:flex-start}.copyright{text-align:left}}