:root {
    color-scheme: light;
    --bg: #eef0ec;
    --surface: #fbfbf9;
    --raised: #ffffff;
    --ink: #191d1b;
    --ink-2: #545a55;
    --ink-muted: #868c85;
    --hairline: #e2e4de;
    --hairline-strong: #d0d3cb;
    --accent: #2f4858;
    --accent-2: #456375;
    --accent-wash: rgba(47, 72, 88, 0.07);
    --pos: #067313;
    --pos-wash: rgba(6, 115, 19, 0.1);
    --neg: #b23b30;
    --neg-wash: rgba(178, 59, 48, 0.1);
    --warn: #9a6b00;
    --warn-wash: rgba(154, 107, 0, 0.12);
    --s1: #2a78d6;
    --s2: #eb6834;
    --s3: #1baf7a;
    --spark: #46687b;
    --spark-fill: rgba(70, 104, 123, 0.13);
    --grid: #e4e5df;
    --shadow: 0 1px 2px rgba(25, 29, 27, 0.05), 0 4px 14px rgba(25, 29, 27, 0.05);
    --shadow-lg: 0 8px 40px rgba(25, 29, 27, 0.16);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0c0f0d;
      --surface: #14181500;
      --surface: #141814;
      --raised: #1a1f1b;
      --ink: #eceee9;
      --ink-2: #a7ada5;
      --ink-muted: #6f756e;
      --hairline: #272c27;
      --hairline-strong: #363c36;
      --accent: #86b1c5;
      --accent-2: #9ec4d5;
      --accent-wash: rgba(134, 177, 197, 0.13);
      --pos: #3ab13a;
      --pos-wash: rgba(58, 177, 58, 0.14);
      --neg: #e8776b;
      --neg-wash: rgba(232, 119, 107, 0.14);
      --warn: #e0a53a;
      --warn-wash: rgba(224, 165, 58, 0.15);
      --s1: #3987e5;
      --s2: #d95926;
      --s3: #199e70;
      --spark: #86b1c5;
      --spark-fill: rgba(134, 177, 197, 0.14);
      --grid: #262b26;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 10px 44px rgba(0, 0, 0, 0.55);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c0f0d;
    --surface: #141814;
    --raised: #1a1f1b;
    --ink: #eceee9;
    --ink-2: #a7ada5;
    --ink-muted: #6f756e;
    --hairline: #272c27;
    --hairline-strong: #363c36;
    --accent: #86b1c5;
    --accent-2: #9ec4d5;
    --accent-wash: rgba(134, 177, 197, 0.13);
    --pos: #3ab13a;
    --pos-wash: rgba(58, 177, 58, 0.14);
    --neg: #e8776b;
    --neg-wash: rgba(232, 119, 107, 0.14);
    --warn: #e0a53a;
    --warn-wash: rgba(224, 165, 58, 0.15);
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --spark: #86b1c5;
    --spark-fill: rgba(134, 177, 197, 0.14);
    --grid: #262b26;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 44px rgba(0, 0, 0, 0.55);
  }

  * { box-sizing: border-box; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .mono { font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; font-variant-numeric: tabular-nums; }
  h1, h2, h3, h4 { font-family: "Newsreader", Georgia, serif; font-weight: 500; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
  a { color: var(--accent-2); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }
  button { font-family: inherit; }
  :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; }
  .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-muted); }

  /* ---------------- app shell ---------------- */
  .app { display: grid; grid-template-columns: 208px 1fr; min-height: 100vh; }

  .chrome {
    grid-column: 1 / -1; position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 91%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline);
  }
  .topbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px 8px; }
  .modebar { display: flex; gap: 2px; padding: 0 20px; }
  .modebar button {
    font-family: "Newsreader", Georgia, serif; font-size: 14px; font-weight: 600;
    padding: 7px 15px 9px; background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--ink-muted); cursor: pointer; margin-bottom: -1px; letter-spacing: 0.01em;
  }
  .modebar button:hover { color: var(--ink-2); }
  .modebar button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
  .brand { font-family: "Newsreader", serif; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
  .brand .d { color: var(--accent-2); }
  .pill {
    font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
  }
  .pill.proto { color: var(--accent-2); }
  .risk {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500;
    padding: 3px 9px; border-radius: 999px;
  }
  .risk.watch { background: var(--warn-wash); color: var(--warn); }
  .risk .rd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .topbar .spacer { margin-left: auto; }
  .topbar .asof { font-size: 11px; color: var(--ink-muted); }
  .tbtn { font-size: 11.5px; cursor: pointer; color: var(--ink-2); background: transparent; border: 1px solid var(--hairline-strong); border-radius: 6px; padding: 3px 9px; }
  .tbtn:hover { color: var(--ink); border-color: var(--ink-muted); }

  /* ---------------- sidebar ---------------- */
  .side { position: sticky; top: var(--chrome-h, 80px); align-self: start; height: calc(100vh - var(--chrome-h, 80px)); overflow-y: auto; border-right: 1px solid var(--hairline); padding: 14px 10px; background: var(--surface); }
  .side .navgrp { margin-bottom: 14px; }
  .side .navgrp > .lbl { padding: 0 8px 6px; display: block; }
  .navbtn {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: transparent; border: none; color: var(--ink-2); cursor: pointer;
    padding: 7px 8px; border-radius: 7px; font-size: 13px; line-height: 1.2;
  }
  .navbtn:hover { background: var(--accent-wash); color: var(--ink); }
  .navbtn[aria-current="true"] { background: var(--accent); color: #fff; font-weight: 500; }
  :root[data-theme="dark"] .navbtn[aria-current="true"], :root:not([data-theme="light"]) .navbtn[aria-current="true"] { color: #0c0f0d; }
  .navbtn .ic { width: 15px; text-align: center; flex: none; opacity: 0.8; font-size: 12px; }
  .navbtn .ct { margin-left: auto; font-size: 10px; opacity: 0.6; font-family: "IBM Plex Mono", monospace; }

  /* ---------------- main ---------------- */
  main { padding: 16px 20px 60px; min-width: 0; }
  .viewhead { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
  .viewhead h2 { font-size: 22px; }
  .viewhead .sub { font-size: 12px; color: var(--ink-2); }

  /* market strip */
  .strip {
    display: flex; gap: 0; overflow-x: auto; border: 1px solid var(--hairline);
    border-radius: 10px; background: var(--surface); margin-bottom: 16px; scrollbar-width: thin;
  }
  .strip .s {
    flex: 1 0 auto; min-width: 116px; padding: 9px 13px; border-right: 1px solid var(--hairline);
    display: grid; gap: 1px; cursor: pointer;
  }
  .strip .s:last-child { border-right: none; }
  .strip .s:hover { background: var(--accent-wash); }
  .strip .s .k { font-size: 10px; color: var(--ink-muted); font-weight: 500; letter-spacing: 0.03em; }
  .strip .s .v { font-size: 14px; }
  .strip .s .c { font-size: 10.5px; }
  .strip .s .c.pos { color: var(--pos); }
  .strip .s .c.neg { color: var(--neg); }

  /* panels */
  .panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 15px; margin-bottom: 16px; }
  .panel > .phead { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
  .panel > .phead h3 { font-size: 14px; font-family: "IBM Plex Sans", sans-serif; font-weight: 600; }
  .panel > .phead .lbl { font-family: "IBM Plex Sans", sans-serif; }
  .panel > .phead .more { margin-left: auto; font-size: 11.5px; cursor: pointer; background: none; border: none; color: var(--accent-2); }

  .groupbar { display: flex; align-items: center; gap: 10px; margin: 18px 0 9px; }
  .groupbar h3 { font-size: 12px; font-family: "IBM Plex Sans", sans-serif; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
  .groupbar::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

  /* metric tiles */
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
  .tiles.lg { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .tile {
    text-align: left; background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 10px; padding: 12px 13px 9px; cursor: pointer; display: flex; flex-direction: column;
    box-shadow: var(--shadow); transition: border-color .12s, transform .12s;
  }
  .tile:hover { border-color: var(--accent-2); transform: translateY(-1px); }
  .tile .th { display: flex; align-items: center; gap: 6px; }
  .tile .th .k { font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
  .tile .th .sd { width: 6px; height: 6px; border-radius: 50%; flex: none; margin-left: auto; }
  .tile .th .sd.ok { background: var(--pos); }
  .tile .th .sd.watch { background: var(--warn); }
  .tile .th .sd.alert { background: var(--neg); }
  .tile .v { font-size: 21px; margin: 4px 0 1px; }
  .tile .c { font-size: 11px; display: flex; align-items: center; gap: 4px; }
  .tile .c.pos { color: var(--pos); } .tile .c.neg { color: var(--neg); } .tile .c.flat { color: var(--ink-muted); }
  .tile .c .a { font-size: 8px; }
  .tile .spk { margin-top: 7px; position: relative; }
  .tile .spk svg { display: block; width: 100%; height: 30px; overflow: visible; }
  .tile .tf { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--hairline); font-size: 10px; color: var(--ink-muted); display: flex; gap: 9px; }
  .tile .tf b { color: var(--accent-2); font-weight: 600; }

  /* signal list */
  .siglist { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 9px; overflow: hidden; }
  .sigrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; background: var(--surface); cursor: pointer; }
  .sigrow:hover { background: var(--accent-wash); }
  .sigrow .sd { width: 7px; height: 7px; border-radius: 50%; }
  .sigrow .sd.watch { background: var(--warn); } .sigrow .sd.alert { background: var(--neg); }
  .sigrow .m { font-size: 12.5px; }
  .sigrow .m small { color: var(--ink-muted); }
  .sigrow .vv { font-size: 12.5px; text-align: right; }

  /* news list */
  .news { display: grid; gap: 0; }
  .news a.n {
    display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: start;
    padding: 9px 0; border-top: 1px solid var(--hairline); color: var(--ink);
  }
  .news a.n:first-child { border-top: none; }
  .news a.n:hover { text-decoration: none; }
  .news a.n:hover .hl { text-decoration: underline; text-underline-offset: 2px; }
  .news .tm { font-size: 10.5px; color: var(--ink-muted); padding-top: 2px; }
  .news .hl { font-size: 13px; line-height: 1.4; }
  .news .sc { font-size: 10.5px; color: var(--ink-muted); margin-top: 2px; }
  .news .sc .rg { color: var(--accent-2); font-weight: 500; }
  .news .ext { font-size: 10px; color: var(--ink-muted); padding-top: 3px; }

  /* topic cards */
  .tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
  .tcard {
    text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
    padding: 13px 14px; cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 7px;
  }
  .tcard:hover { border-color: var(--accent-2); }
  .tcard .tt { font-size: 14px; font-weight: 600; line-height: 1.3; }
  .tcard .ds { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
  .tcard .lk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
  .mchip {
    font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 5px;
    background: var(--accent-wash); color: var(--accent-2); white-space: nowrap;
  }
  .mchip.theme { background: color-mix(in srgb, var(--s2) 13%, transparent); color: color-mix(in srgb, var(--s2) 80%, var(--ink)); }

  /* theme cards */
  .thcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .thcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); }
  .thcard h3 { font-size: 16px; margin-bottom: 3px; }
  .thcard .kick { display: block; font-family: "IBM Plex Sans", sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; }
  .thcard .take { font-size: 12px; color: var(--ink-2); border-left: 2px solid var(--accent); background: var(--accent-wash); padding: 5px 10px; border-radius: 0 6px 6px 0; margin-top: 10px; }
  .thcard .take b { color: var(--ink); }
  .thchart { margin-top: 10px; }
  .thchart svg { display: block; width: 100%; height: 108px; overflow: visible; }
  .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: var(--ink-2); margin-top: 5px; }
  .legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: 0px; }

  /* demand */
  .dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
  .dcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 13px 14px; box-shadow: var(--shadow); }
  .dcard .label { font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
  .dcard .val { font-size: 20px; margin: 3px 0 1px; }
  .dcard .sub { font-size: 10.5px; } .dcard .sub.pos { color: var(--pos); } .dcard .sub.neg { color: var(--neg); } .dcard .sub.flat { color: var(--ink-muted); }
  .dcard .src { font-size: 10px; color: var(--ink-muted); margin-top: 5px; }
  .dcard .spk { margin-top: 8px; position: relative; }
  .dcard .spk svg { display: block; width: 100%; height: 28px; overflow: visible; }
  .readnote { background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; padding: 16px 18px; }
  .readnote h3 { font-size: 15px; margin-bottom: 7px; }
  .readnote p { font-size: 12.5px; color: var(--ink-2); margin: 0 0 7px; } .readnote p:last-child { margin: 0; }

  /* ---------------- drill panel ---------------- */
  .drill-bd { position: fixed; inset: 0; background: rgba(15, 18, 16, 0.42); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 60; }
  .drill-bd.open { opacity: 1; pointer-events: auto; }
  .drill {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(468px, 94vw);
    background: var(--bg); border-left: 1px solid var(--hairline-strong); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1); z-index: 61;
    display: flex; flex-direction: column;
  }
  .drill.open { transform: translateX(0); }
  .drill-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--hairline); }
  .drill-head .dk { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
  .drill-head .x { margin-left: auto; background: transparent; border: none; font-size: 20px; line-height: 1; color: var(--ink-2); cursor: pointer; padding: 2px 6px; }
  .drill-head .x:hover { color: var(--ink); }
  .drill-body { overflow-y: auto; padding: 16px; flex: 1; }
  .drill-body h3 { font-size: 20px; margin-bottom: 4px; }
  .drill-body .dtag { font-size: 11px; color: var(--ink-muted); margin-bottom: 12px; }
  .dbignum { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .dbignum .bv { font-size: 27px; }
  .dbignum .bc { font-size: 12px; } .dbignum .bc.pos { color: var(--pos); } .dbignum .bc.neg { color: var(--neg); } .dbignum .bc.flat { color: var(--ink-muted); }
  .statpill { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
  .statpill.ok { background: var(--pos-wash); color: var(--pos); }
  .statpill.watch { background: var(--warn-wash); color: var(--warn); }
  .statpill.alert { background: var(--neg-wash); color: var(--neg); }
  .drill-chart { margin: 6px 0 4px; }
  .drill-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
  .dsect { margin-top: 18px; }
  .dsect > .lbl { display: block; margin-bottom: 8px; }
  .dread { font-size: 12.5px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: 9px; padding: 10px 12px; }
  .dstat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; }
  .dstat { display: grid; gap: 1px; } .dstat .k { font-size: 10px; color: var(--ink-muted); } .dstat .v { font-size: 15px; }
  .chipwrap { display: flex; flex-wrap: wrap; gap: 5px; }
  button.mchip { border: none; cursor: pointer; }
  button.mchip:hover { background: var(--accent); color: #fff; }
  :root[data-theme="dark"] button.mchip:hover, :root:not([data-theme="light"]) button.mchip:hover { color: #0c0f0d; }
  .tline { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .tline li { font-size: 12px; line-height: 1.4; padding-left: 15px; position: relative; }
  .tline li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
  .tline .d { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--ink-muted); margin-right: 3px; }
  .tline a { color: var(--ink); } .tline a:hover { color: var(--accent-2); }
  .ins { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .ins li { font-size: 12.5px; line-height: 1.45; padding-left: 17px; position: relative; }
  .ins li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent-2); }
  .dtopics { display: grid; gap: 6px; }
  .dtbtn { text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 9px 11px; cursor: pointer; color: var(--ink-2); }
  .dtbtn:hover { border-color: var(--accent-2); color: var(--ink); }
  .dtbtn .n { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .dtbtn .g { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }

  /* tooltip */
  .tip {
    position: fixed; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .1s;
    background: var(--raised); border: 1px solid var(--hairline-strong); border-radius: 7px;
    box-shadow: var(--shadow); padding: 5px 8px; font-size: 11px; color: var(--ink);
    font-family: "IBM Plex Mono", monospace; white-space: nowrap;
  }
  .tip .tt-k { color: var(--ink-muted); }

  .tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; flex-wrap: wrap; }
  .tabs button { font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; background: transparent; border: none; color: var(--ink-2); padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .tabs button:hover { color: var(--ink); }
  .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

  /* summary hero */
  .summary-hero { background: var(--raised); border: 1px solid var(--hairline-strong); border-radius: 14px; padding: 19px 21px; margin-bottom: 18px; box-shadow: var(--shadow); }
  .summary-hero .sh-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .summary-hero .sh-top .gen { margin-left: auto; font-size: 10px; color: var(--ink-muted); }
  .summary-hero .lead { font-family: "Newsreader", Georgia, serif; font-size: 19px; line-height: 1.42; letter-spacing: -0.01em; margin-bottom: 8px; }
  .summary-hero .body { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-bottom: 13px; }
  .summary-hero .pts-h { display: block; margin-bottom: 7px; }
  .summary-hero ol.pts { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
  .summary-hero ol.pts li { font-size: 12.5px; line-height: 1.5; padding-left: 3px; }
  .summary-hero ol.pts li b { color: var(--ink); font-weight: 600; }

  /* macro-link view */
  .linkrow { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 13px 15px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: start; box-shadow: var(--shadow); }
  .linkrow .lr-main { min-width: 0; }
  .linkrow .lr-t { font-size: 13.5px; font-weight: 600; }
  .linkrow .lr-v { font-size: 12px; color: var(--ink-2); margin-left: 8px; font-weight: 400; }
  .linkrow .lr-d { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
  .linkrow .lr-btn { font-size: 11.5px; white-space: nowrap; background: var(--accent-wash); color: var(--accent-2); border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; align-self: center; }
  .linkrow .lr-btn:hover { background: var(--accent); color: #fff; }
  :root[data-theme="dark"] .linkrow .lr-btn:hover, :root:not([data-theme="light"]) .linkrow .lr-btn:hover { color: #0c0f0d; }
  @media (max-width: 560px) { .linkrow { grid-template-columns: 1fr; } .linkrow .lr-btn { justify-self: start; } }

  footer { border-top: 1px solid var(--hairline); padding: 18px 20px 40px; color: var(--ink-muted); font-size: 11px; line-height: 1.6; }
  footer .fl { max-width: 74ch; }
  footer details.pipe { margin-top: 12px; border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 12px; background: var(--surface); max-width: 74ch; }
  footer details.pipe summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: 11.5px; }
  footer details.pipe .mermaid { margin-top: 12px; overflow-x: auto; }
  footer details.pipe .cap { margin-top: 8px; font-size: 10.5px; }

  /* ---------------- responsive ---------------- */
  @media (max-width: 640px) {
    .topbar { flex-wrap: wrap; row-gap: 4px; padding: 8px 14px 6px; }
    .modebar { padding: 0 14px; }
    .risk { display: none; }
    .topbar .spacer { display: none; }
    .topbar .asof { white-space: nowrap; font-size: 10px; }
    main { padding: 14px 14px 60px; }
  }
  @media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .side {
      position: sticky; top: var(--chrome-h, 80px); height: auto; display: flex; gap: 4px; overflow-x: auto;
      border-right: none; border-bottom: 1px solid var(--hairline); padding: 8px 10px;
    }
    .side .navgrp { margin: 0; display: flex; gap: 4px; }
    .side .navgrp > .lbl { display: none; }
    .navbtn { white-space: nowrap; padding: 6px 10px; }
    .navbtn .ct, .navbtn .ic { display: none; }
    .thcards { grid-template-columns: 1fr; }
  }

  /* ---------------- data status notice (P1) ---------------- */
  .datawarn {
    font-size: 10.5px; color: var(--warn); background: var(--warn-wash);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    border-radius: 6px; padding: 2px 8px;
  }
  .loading { padding: 40px 4px; color: var(--ink-muted); font-size: 13px; }