:root {
    color-scheme: dark;
    --ground: #0B111B; --ink: #EDF1F7; --ink-2: #C3CBD9; --muted: #93A0B5;
    --glass: rgba(255,255,255,0.055); --glass-2: rgba(255,255,255,0.09); --edge: rgba(255,255,255,0.10); --edge-2: rgba(255,255,255,0.20);
    --accent: #F2A93B; --accent-2: #FFC46B; --blue: #3E6FD9;
    --bad: #F0716A; --bad-bg: rgba(240,113,106,0.14); --warn: #F2C14E; --warn-bg: rgba(242,193,78,0.14); --good: #5AD08A; --good-bg: rgba(90,208,138,0.14); --info-bg: rgba(255,255,255,0.06);
    --shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    --r: 18px; --t: 180ms; --ease: cubic-bezier(.16,1,.3,1); --bar: 84px;
    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, sans-serif;
    --font-mono: "Archivo", system-ui, sans-serif; /* one family everywhere; numbers stay tabular via font-variant-numeric */
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; } /* .btn and .repform set display, which otherwise beats the browser default for [hidden] */
  html { scroll-behavior: smooth; }
  body { margin: 0; height: 100dvh; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; overflow: hidden; touch-action: manipulation; }
  /* the universe is the page background at all times: full screen, behind everything, never unmounted */
  #universe { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 44%, #111c33, #0a1122 45%, #04060d 100%); }
  #universe canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
  #universe canvas.grabbing { cursor: grabbing; }
  .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 700px at 80% -10%, rgba(62,111,217,0.22), transparent 60%), radial-gradient(900px 600px at -10% 100%, rgba(242,169,59,0.16), transparent 60%), var(--ground); }
  .bg .blob { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
  .bg .b1 { background: rgba(62,111,217,0.35); top: -25vmax; right: -15vmax; }
  .bg .b2 { background: rgba(242,169,59,0.22); bottom: -30vmax; left: -20vmax; }
  .num, code, .price, .stat b, td.n, .mono, .kpi b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  h1, h2, h3, .tab, .btn, th, .kpi span, .card h4 { font-family: var(--font-display); letter-spacing: -0.005em; }
  a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  button, input { font: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .glass { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }

  /* ---- the shell: a transparent top bar over the universe --------------------------------------- */
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; /* above the menu so the hamburger cross stays clickable */ height: var(--bar); display: flex; align-items: center; gap: 10px; padding: 0 max(14px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-left)); pointer-events: none; }
  .topbar > * { pointer-events: auto; }
  .tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; background: none; border: 0; border-radius: 12px; color: var(--ink-2); cursor: pointer; transition: color var(--t), background var(--t); }
  .tb-btn:hover { color: var(--ink); background: rgba(255,255,255,0.07); }
  /* the menu and search buttons turn into a cross while their panel is open */
  .tb-btn.morph { position: relative; }
  .burger path { transform-origin: 12px 12px; transition: transform 280ms var(--ease), opacity 200ms var(--ease); }
  #menuBtn[aria-expanded="true"] .burger .l1 { transform: translateY(5px) rotate(45deg); }
  #menuBtn[aria-expanded="true"] .burger .l2 { opacity: 0; transform: scaleX(0.2); }
  #menuBtn[aria-expanded="true"] .burger .l3 { transform: translateY(-5px) rotate(-45deg); }
  #searchBtn .ic-a, #searchBtn .ic-b { position: absolute; inset: 0; margin: auto; transition: transform 280ms var(--ease), opacity 200ms var(--ease); }
  #searchBtn .ic-b { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  #searchBtn[aria-expanded="true"] .ic-a { opacity: 0; transform: rotate(90deg) scale(0.6); }
  #searchBtn[aria-expanded="true"] .ic-b { opacity: 1; transform: none; }
  #searchClose { display: none; }
  .brand { position: absolute; left: 50%; top: calc(50% + 15px); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-height: 44px; }
  .logo { height: 62px; width: auto; flex: none; display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)); }
  .tb-right { margin-left: auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
  .tb-search { display: flex; align-items: center; gap: 4px; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms; }
  .tb-search.open { opacity: 1; visibility: visible; transform: none; }
  .search { width: 300px; max-width: 100%; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: rgba(0,0,0,0.42); border: 1px solid var(--edge); border-radius: 12px; transition: border-color var(--t), box-shadow var(--t); color: var(--muted); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(242,169,59,0.12); color: var(--accent-2); }
  .search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); min-height: 44px; font-size: 14px; outline: none; }
  .search input::placeholder { color: var(--muted); }
  svg.i.thin { stroke-width: 1.5; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #1A1204; border: 0; border-radius: 12px; padding: 0 14px; font-weight: 700; cursor: pointer; transition: transform 150ms var(--ease), filter 150ms; }
  .btn:hover { filter: brightness(1.06); } .btn:active { transform: scale(0.97); }
  .btn.icon { padding: 0; width: 44px; }
  .backlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--accent-2); font-family: var(--font-display); font-weight: 600; font-size: 14px; cursor: pointer; }
  .backlink:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* ---- half-page menu ---------------------------------------------------------------------------- */
  .scrim { position: fixed; inset: 0; z-index: 44; background: none; opacity: 0; transition: opacity 240ms var(--ease); }
  .scrim.open { opacity: 1; }
  .menu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(64vw, 720px); background: linear-gradient(90deg, rgba(3,6,12,0.96) 0%, rgba(3,6,12,0.88) 42%, rgba(3,6,12,0.55) 70%, rgba(3,6,12,0) 100%); border-right: 0; transform: translateX(-102%); transition: transform 280ms var(--ease); overflow-y: auto; overscroll-behavior: contain; }
  .menu.open { transform: none; }
  .menu-in { display: grid; gap: 4px; padding: calc(var(--bar) + 10px) 26px calc(28px + env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-left));  max-width: 440px; }
  .menu-item { display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left; background: none; border: 0; border-radius: 14px; padding: 14px 14px 14px 10px; color: var(--ink); text-decoration: none; cursor: pointer; transition: background var(--t); }
  .menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,0.06); }
  .menu-item[aria-current="true"] { color: var(--accent-2); }
  .menu-item svg.i { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); opacity: 0.9; }
  .menu-item span { display: grid; gap: 3px; min-width: 0; }
  .menu-item b { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.75vw, 18px); line-height: 1.15; letter-spacing: -0.02em; }
  .menu-item small { color: var(--muted); font-size: 10px; line-height: 1.4; }
  .menu-rule { border: 0; border-top: 1px solid var(--edge); margin: 14px 10px; }
  .menu-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 22px 10px 0; margin-top: 10px; border-top: 1px solid var(--edge); }
  .menu-foot a { color: var(--muted); text-decoration: none; font-size: 13px; }
  .menu-foot a:hover { color: var(--ink); }

  /* ---- the overlay panel: everything that is not the universe lives in here ---------------------- */
  .ov { position: fixed; inset: 0; z-index: 30; background: rgba(5,9,16,0.55); display: flex; justify-content: center; padding: var(--bar) max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-right)); }
  .ov-panel { width: 100%; max-width: 1180px; max-height: calc(100dvh - var(--bar) - 12px); display: flex; flex-direction: column; min-height: 0; border-radius: var(--r) var(--r) 0 0; background: rgba(10,15,25,0.62); overflow: hidden; }
  .ov-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge); color: var(--muted); font-size: 12.5px; }
  .ov-head .grow { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 8px; }
  .ov-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; background: none; border: 0; border-radius: 10px; color: var(--ink-2); cursor: pointer; }
  .ov-close:hover { background: var(--glass-2); color: var(--ink); }
  .ov-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); }
  body.ov-open .uni-hud, body.menu-open .uni-hud, body.sheet-open .uni-hud { opacity: 0; pointer-events: none; }
  body.ov-open #uni, body.menu-open #uni, body.sheet-open #uni { pointer-events: none; }
  body.ov-open .footchev { opacity: 0; pointer-events: none; }

  /* ---- the full report sheet ---------------------------------------------------------------------
     Level 3 of the universe is a cutaway planet; the report rises over its lower half and then reads
     as a normal page. .repsheet, never .sheet: that one is the footer, and the .uni-hud fade rules
     above key off it. Nothing here touches .uni-hud — the universe fades its own callouts and coin
     header through Universe.setSheet. z-index sits above the canvas and the HUD and below the scrim
     (44), the footer sheet (46), the menu (50) and the top bar (60). */
  .repsheet { position: fixed; left: 0; right: 0; top: 0; height: 100dvh; max-height: 100dvh; z-index: 42; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateY(100%); will-change: transform; touch-action: pan-y; }
  .repsheet.lifting { touch-action: none; }               /* while it is still rising the drag is ours */
  .repsheet.glide { transition: transform 300ms var(--ease); }
  /* the footer sheet's black-to-transparent gradient as the top edge: no scrim and no solid panel, so
     the top half of the planet is still there above it. A fixed 200px band, not a stretch over the
     whole sheet, or half the report would sit on half-transparent black. */
  .rep-wrap { position: relative; min-height: 100%; padding: calc(var(--bar) + 14px) 0 calc(48px + env(safe-area-inset-bottom)); }
  .rep-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(3,6,12,0.97) 0%, rgba(3,6,12,0.90) 46%, rgba(3,6,12,0.50) 78%, rgba(3,6,12,0) 100%); }
  .rep-wrap::after { content: ""; position: absolute; left: 0; right: 0; top: 199px; bottom: 0; z-index: -1; background: rgba(3,6,12,0.97); }
  .rep-top, .rep-in { max-width: 1180px; margin: 0 auto; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .rep-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin-bottom: 10px; }
  .rep-sym { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .rep-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 28px; flex: none; background: rgba(10,15,25,0.5); border: 1px solid var(--edge); border-radius: 10px; color: var(--ink-2); cursor: pointer; transition: color var(--t), background var(--t); }
  .rep-close:hover { color: var(--ink); background: rgba(255,255,255,0.1); }
  .rep-close svg.i { transform: rotate(180deg); }
  /* minmax(0, 1fr), or the widest nowrap table inside .scroll sets the column's max-content width and
     every panel above it is stretched to match — on a phone that is a page wider than the screen */
  .rep-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
  /* once the report covers the planet the transparent top bar gets a wash, so the logo never sits on
     body text; the strength is set from the lift in app.js */
  .topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 128px; z-index: -1; pointer-events: none; background: var(--barwash, none); }
  body.rep-full .footchev { opacity: 0; pointer-events: none; }
  /* every wallet in the report is a link to that wallet's own record page */
  tr[data-owner] { cursor: pointer; }
  tr[data-owner]:hover > td { background: rgba(255,255,255,0.045); }
  tr[data-owner]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  a.wlink { color: inherit; text-decoration: none; }
  tr[data-owner]:hover a.wlink, a.wlink:hover, a.wlink:focus-visible { color: var(--accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .maker-line { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--edge); color: var(--muted); font-size: 12px; }
  .maker-line a { color: var(--accent-2); }
  /* back to the top of the report, and then back to the planet. Only on screen once the sheet is
     over the equator and there is something above the reader worth going back to. */
  .rep-top-btn { position: fixed; z-index: 43; right: max(12px, env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(10,15,25,0.5); border: 1px solid var(--edge); color: var(--ink-2); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 200ms var(--ease), color var(--t), background var(--t); }
  .rep-top-btn:hover { background: var(--glass-2); color: var(--ink); }
  .rep-top-btn svg.i { width: 20px; height: 20px; }

  /* ---- footer sheet ------------------------------------------------------------------------------ */
  .footchev { position: fixed; z-index: 47; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 34px; background: rgba(10,15,25,0.5); border: 1px solid var(--edge); border-radius: 12px; color: var(--ink-2); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity var(--t), color var(--t), background var(--t); }
  .footchev:hover { color: var(--ink); background: rgba(255,255,255,0.1); }
  /* when the sheet is up the chevron rides on its top edge, so it is still the way to put it away */
  .footchev { transition: opacity var(--t), color var(--t), background var(--t), bottom 300ms var(--ease); }
  body.sheet-open .footchev { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
  .footchev[aria-expanded="true"] svg.i { transform: rotate(180deg); }
  .footchev svg.i { transition: transform 240ms var(--ease); }
  .sheet { position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; padding-top: 110px; background: linear-gradient(0deg, rgba(3,6,12,0.97) 0%, rgba(3,6,12,0.9) 55%, rgba(3,6,12,0.5) 82%, rgba(3,6,12,0) 100%); border-top: 0; border-radius: 0; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateY(102%); transition: transform 300ms var(--ease); }
  .sheet.open { transform: none; }
  .sheet .sitefoot { margin: 0 20px; border-top: 0; padding-top: 0; }

  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 4px; color: var(--muted); font-size: 12.5px; min-height: 24px; }
  .bar .grow { flex: 1; display: flex; align-items: center; gap: 8px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
  .help { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 8px; background: transparent; border: 1px solid var(--edge); color: var(--muted); font-size: 12px; cursor: pointer; }
  .help[aria-expanded="true"], .help:hover { color: var(--ink); background: var(--glass-2); }
  .legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; padding: 14px 18px; font-size: 12.5px; color: var(--ink-2); }
  .legend[hidden], .help[hidden] { display: none; }
  .legend b { color: var(--ink); font-weight: 600; }

  .panel { padding: 0; overflow: hidden; }
  /* One scrolling surface per view. A table wider than the phone still slides sideways, but it never
     gets a scrollbar of its own down the side: overflow-x on its own would make the browser compute
     overflow-y as auto, so the vertical axis is spelled out and the table simply grows to its rows. */
  .scroll { overflow-x: auto; overflow-y: hidden; }
  table { border-collapse: collapse; width: 100%; font-size: 13px; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--edge); white-space: nowrap; vertical-align: middle; }
  th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: rgba(0,0,0,0.22); position: sticky; top: 0; z-index: 1; }
  th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
  th button:hover, th[aria-sort] button { color: var(--ink); }
  th button svg.i { width: 12px; height: 12px; opacity: 0.5; }
  th[aria-sort="ascending"] button svg.i { transform: rotate(180deg); opacity: 1; }
  th[aria-sort="descending"] button svg.i { opacity: 1; }
  td.n, th.n { text-align: right; } th.n button { justify-content: flex-end; width: 100%; }
  tbody tr { cursor: pointer; transition: background var(--t); }
  tbody tr:hover, tbody tr:focus-within { background: var(--glass-2); }
  tbody tr:last-child td { border-bottom: 0; }
  .two { display: grid; gap: 1px; line-height: 1.25; }
  .two b { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
  .two small { color: var(--muted); font-size: 11.5px; }
  .coin { display: flex; align-items: center; gap: 10px; }
  .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--accent-2); background: var(--glass-2); border: 1px solid var(--edge); position: relative; overflow: hidden; }
  .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .bs { display: grid; gap: 4px; min-width: 96px; }
  .bs .track { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.08); }
  .bs .b { background: var(--good); height: 100%; } .bs .s { background: var(--bad); height: 100%; }
  .bs small { color: var(--muted); font-size: 11px; font-family: var(--font-mono); }
  .bs.compact { min-width: 0; }
  .bs.compact .track { height: 4px; }
  .bs.compact small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .why { color: var(--muted); font-size: 11.5px; white-space: normal; min-width: 220px; max-width: 380px; line-height: 1.35; }
  .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-display); }
  .chip svg.i { width: 12px; height: 12px; stroke-width: 3; }
  .AVOID, .fail { color: var(--bad); background: var(--bad-bg); border-color: rgba(240,113,106,0.3); }
  .CAUTION, .warn { color: var(--warn); background: var(--warn-bg); border-color: rgba(242,193,78,0.3); }
  .CLEAN, .pass { color: var(--good); background: var(--good-bg); border-color: rgba(90,208,138,0.3); }
  .na, .info { color: var(--muted); background: var(--info-bg); }
  .empty { padding: 28px 22px; color: var(--ink-2); display: grid; gap: 8px; }

  /* detail */
  .hero { padding: 22px 22px 18px; display: grid; gap: 14px; }
  .hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; justify-content: space-between; }
  .title { display: flex; align-items: center; gap: 14px; }
  .title .avatar { width: 52px; height: 52px; font-size: 16px; }
  .hero h2 { margin: 0; font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; line-height: 1.1; }
  .hero .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
  .verdict { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; border: 1px solid; }
  .summary { font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 74ch; margin: 0; }
  .links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; align-items: center; }
  .links a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  .stat { padding: 12px 14px; display: grid; gap: 6px; border-radius: 14px; background: rgba(0,0,0,0.2); border: 1px solid var(--edge); transition: border-color var(--t); align-content: start; }
  .stat:hover { border-color: var(--edge-2); }
  .stat span { font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
  .stat b { font-size: 20px; font-weight: 600; line-height: 1.1; }
  .stat small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
  .range { position: relative; height: 6px; border-radius: 3px; overflow: visible; margin: 4px 0 2px; }
  .range .zones { display: flex; height: 100%; border-radius: 3px; overflow: hidden; }
  .range .zones span { height: 100%; opacity: 0.55; }
  .range .g { background: var(--good); } .range .a { background: var(--warn); } .range .r { background: var(--bad); }
  .range .marker { position: absolute; top: -4px; width: 3px; height: 14px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--ground); transform: translateX(-50%); transition: left 700ms var(--ease); }
  .live { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(242,169,59,0.10), rgba(62,111,217,0.10)); border: 1px solid var(--edge-2); min-width: 230px; }
  .live .lbl { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
  .price { font-size: 26px; font-weight: 600; transition: color 300ms; }
  .price.up { color: var(--good); } .price.down { color: var(--bad); }
  .live small { color: var(--muted); font-size: 11px; }
  .reasons { display: grid; gap: 8px; padding: 18px 22px; }
  .reasons h3 { margin: 0 0 4px; font-size: 15px; }
  .reason { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,0.18); border: 1px solid var(--edge); transition: background var(--t); }
  .reason:hover { background: var(--glass-2); }
  .reason .ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; }
  .reason .ic svg.i { width: 14px; height: 14px; stroke-width: 3; }
  .reason .t { font-size: 14px; color: var(--ink); }
  .reason .t small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; font-family: var(--font-mono); }
  details { padding: 0 22px 18px; }
  details summary { cursor: pointer; color: var(--ink-2); font-family: var(--font-display); font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
  details summary svg.i { transition: transform var(--t); color: var(--accent); }
  details[open] summary svg.i { transform: rotate(90deg); }
  .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
  .box { border-radius: 14px; border: 1px solid var(--edge); background: rgba(0,0,0,0.18); overflow: hidden; }
  .box h4 { margin: 0; padding: 10px 12px; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--edge); }
  .box table { font-size: 12.5px; }
  .note { color: var(--muted); font-size: 12px; padding: 8px 12px; }
  .foot { color: var(--muted); font-size: 12px; padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }

  /* lab record */
  .lab { display: grid; gap: 12px; }
  .lab .hero h2 { font-size: clamp(22px, 3vw, 28px); }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .kpi { padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,0.2); border: 1px solid var(--edge); display: grid; gap: 4px; align-content: start; }
  .kpi span { font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
  .kpi b { font-size: 26px; font-weight: 600; line-height: 1.1; }
  .kpi small { color: var(--muted); font-size: 11.5px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
  .card { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
  .card h4 { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .card h4 svg.i { width: 14px; height: 14px; color: var(--accent); }
  .card .big { font-size: 30px; font-weight: 600; line-height: 1.05; font-family: var(--font-mono); }
  .card p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
  .split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.08); }
  .split span { height: 100%; width: 0; transition: width 900ms var(--ease); }
  .split .c { background: var(--good); } .split .w { background: var(--warn); } .split .a { background: var(--bad); }
  .splitkey { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
  .splitkey i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
  .ringwrap { display: flex; align-items: center; gap: 14px; }
  .ring { width: 72px; height: 72px; transform: rotate(-90deg); }
  .ring circle { fill: none; stroke-width: 8; }
  .ring .bg { stroke: rgba(255,255,255,0.08); }
  .ring .fg { stroke: var(--warn); stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; transition: stroke-dashoffset 1s var(--ease); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chips .chip { font-family: var(--font-mono); font-weight: 600; }
  .up { color: var(--good); background: var(--good-bg); } .down { color: var(--bad); background: var(--bad-bg); }
  .flags { display: flex; flex-wrap: wrap; gap: 6px; }
  .flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--info-bg); border: 1px solid var(--edge); font-size: 12px; color: var(--ink-2); }
  .flag b { font-family: var(--font-mono); color: var(--ink); }
  pre.report { margin: 0; white-space: pre-wrap; font-family: var(--font-body); color: var(--ink-2); padding: 12px 0 0; line-height: 1.6; font-size: 13.5px; }

  /* share dialog */
  .sharedlg { border: 0; padding: 0; background: transparent; max-width: min(96vw, 900px); width: 100%; }
  .sharedlg::backdrop { background: rgba(5,9,16,0.7); backdrop-filter: blur(6px); }
  .sharebox { background: #101827; border: 1px solid var(--edge-2); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; color: var(--ink); box-shadow: var(--shadow); }
  .sharehead { display: flex; align-items: center; justify-content: space-between; }
  .sharehead h3 { margin: 0; font-size: 16px; }
  #card { display: block; width: 100%; height: auto; max-height: 66vh; object-fit: contain; margin: 0 auto; border-radius: 12px; }
  #fmt { min-height: 32px; background: rgba(0,0,0,0.3); color: var(--ink); border: 1px solid var(--edge); border-radius: 9px; padding: 0 8px; font-size: 12px; font-family: var(--font-display); }
  .shareactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .shareactions .btn { min-height: 32px; padding: 0 12px; font-size: 12px; border-radius: 9px; gap: 6px; }
  .shareactions .btn svg.i { width: 14px; height: 14px; }
  .sharehead h3 { font-size: 14px; }
  #postText { width: 100%; background: rgba(0,0,0,0.3); color: var(--ink-2); border: 1px solid var(--edge); border-radius: 10px; padding: 10px 12px; font: 13.5px/1.5 var(--font-body); resize: vertical; }

  /* layout toggle (List | Deck) */
  /* home: the narrative map */
  .home { display: grid; gap: 12px; }
  .mapwrap { padding: 18px 18px 14px; display: grid; gap: 12px; }
  .maphead { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: flex-start; }
  .mh-text { flex: 1 1 380px; max-width: 640px; }
  .mh-text h2 { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; line-height: 1.1; }
  .mh-text p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
  .counters { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px; flex: 0 1 420px; }
  .counters .kpi b { font-size: 22px; }
  #map { display: block; width: 100%; border-radius: 14px; background: radial-gradient(ellipse at 50% 45%, rgba(20,33,61,0.55), rgba(0,0,0,0.25) 70%); border: 1px solid var(--edge); touch-action: pan-y; }
  .maplegend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 11.5px; }
  .maplegend span { display: inline-flex; align-items: center; gap: 6px; }
  .lg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .lg.hub { background: rgba(242,169,59,0.35); border: 1.5px solid var(--good); } .lg.word { border: 1px dashed #7FA7FF; background: rgba(127,167,255,0.2); } .lg.dot { width: 5px; height: 5px; background: #E6ECF6; } .lg.glow { background: radial-gradient(circle, rgba(242,169,59,0.6), rgba(242,169,59,0)); }
  .formchips { display: flex; flex-wrap: wrap; gap: 8px; }
  .fchip { display: grid; gap: 2px; text-align: left; padding: 8px 12px; border-radius: 12px; background: rgba(127,167,255,0.08); border: 1px dashed rgba(127,167,255,0.5); color: var(--ink); cursor: pointer; transition: transform 150ms var(--ease), background var(--t); }
  .fchip:hover { transform: translateY(-2px); background: rgba(127,167,255,0.16); }
  .fchip b { font-family: var(--font-display); font-size: 14px; } .fchip span { font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .fchip em { color: var(--accent-2); font-style: normal; }
  .ntiles-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 0; }
  .ntiles-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
  .ntiles-head select, .note select { background: rgba(0,0,0,0.3); color: var(--ink); border: 1px solid var(--edge); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; }
  .ntiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .ntile { display: grid; gap: 10px; text-align: left; padding: 14px 14px 12px; color: var(--ink); cursor: pointer; transition: transform 160ms var(--ease), border-color var(--t), background var(--t); align-content: start; }
  .ntile:hover, .ntile:focus-visible { transform: translateY(-3px); border-color: var(--edge-2); background: var(--glass-2); }
  .nt-top { display: flex; align-items: center; gap: 10px; min-width: 0; } .nt-top .two { min-width: 0; } .nt-top b { font-family: var(--font-display); font-size: 14.5px; } .nt-top small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nt-emoji { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: rgba(242,169,59,0.14); border: 1px solid rgba(242,169,59,0.35); flex: none; }
  .nt-emoji.big { width: 52px; height: 52px; font-size: 28px; }
  .nt-big { font-family: var(--font-mono); font-size: 26px; font-weight: 600; line-height: 1; display: flex; align-items: baseline; gap: 6px; } .nt-big small { font-size: 11px; color: var(--muted); font-family: var(--font-body, inherit); } .nt-big.up { color: var(--good); } .nt-big.down { color: var(--bad); }
  .nt-mom { display: grid; gap: 4px; } .nt-mom > span { display: grid; grid-template-columns: 26px 1fr 52px; align-items: center; gap: 8px; font-size: 11px; } .nt-mom small { color: var(--muted); } .nt-mom em { font-style: normal; font-family: var(--font-mono); text-align: right; color: var(--ink-2); }
  .mom { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; } .mom i { position: absolute; top: 0; bottom: 0; left: 50%; display: block; border-radius: 3px; max-width: 50%; transform-origin: left; } .mom.up i { background: var(--good); } .mom.down i { background: var(--bad); transform: translateX(-100%); }
  .nt-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); border-top: 1px solid var(--edge); padding-top: 8px; }
  .metahead { display: grid; gap: 10px; padding: 6px 4px 12px; }
  .metahead .mh { display: flex; align-items: center; gap: 12px; } .metahead h2 { margin: 0; font-size: 22px; } .metahead .chips { display: flex; gap: 10px; align-items: center; } .metahead .chips small { color: var(--muted); }
  @media (max-width: 719px) { .counters { grid-template-columns: repeat(3, 1fr); flex-basis: 100%; } .counters .kpi { padding: 10px; } .counters .kpi b { font-size: 18px; } .mapwrap { padding: 14px 12px 12px; } .ntiles { grid-template-columns: 1fr 1fr; } .nt-big { font-size: 22px; } }
  @media (max-width: 479px) { .ntiles { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }

  /* mobile cards */
  .cards-list { display: grid; gap: 10px; }
  .sortbar { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
  .sortbar select { min-height: 40px; background: rgba(0,0,0,0.3); color: var(--ink); border: 1px solid var(--edge); border-radius: 10px; padding: 0 10px; font-family: var(--font-display); font-weight: 600; }
  .tcard { padding: 14px; display: grid; gap: 10px; cursor: pointer; transition: background var(--t); }
  .tcard:active { background: var(--glass-2); }
  .tcard .top { display: flex; align-items: center; gap: 10px; }
  .tcard .top .coin { flex: 1; min-width: 0; }
  .tcard .top .two b, .tcard .top .two small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tcard .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tcard .mini div { display: grid; gap: 2px; min-width: 0; }
  .tcard .mini span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .tcard .mini b { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; }
  .tcard .mini small { color: var(--muted); font-size: 11px; }
  .tcard .why { min-width: 0; max-width: none; font-size: 12px; }

  .skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06)); background-size: 200% 100%; }
  .skel-row { display: grid; grid-template-columns: 60px 1fr 1fr 1fr 2fr; gap: 12px; padding: 16px 12px; border-bottom: 1px solid var(--edge); }
  .enter { animation: rise 320ms var(--ease) both; }
  @media (prefers-reduced-motion: no-preference) {
    .bg .b1 { animation: drift 28s ease-in-out infinite alternate; }
    .bg .b2 { animation: drift 34s ease-in-out infinite alternate-reverse; }
    .dot.pulse { animation: pulse 1.6s ease-out infinite; }
    .skel { animation: shimmer 1.2s linear infinite; }
    tbody tr.enter { animation-delay: calc(var(--i, 0) * 24ms); }
    .reason.enter, .kpi.enter, .card.enter { animation-delay: calc(var(--i, 0) * 50ms); }
    .flash { animation: flash 500ms ease-out; }
  }
  @media (prefers-reduced-motion: reduce) { .enter, .flash, .bg .blob, .dot.pulse, .skel { animation: none !important; } * { transition: none !important; } }
  @keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(90,208,138,0.55); } 100% { box-shadow: 0 0 0 12px rgba(90,208,138,0); } }
  @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes flash { from { background: rgba(255,255,255,0.12); } to { background: transparent; } }
  @media (max-width: 720px) { .hero, .card { padding: 16px; } .reasons, details { padding-left: 16px; padding-right: 16px; } }

  /* ==========================================================================
     RESPONSIVE (mobile-first fixes, breakpoints 375 / 600 / 768 / 1024 / 1440)
     Only .scroll containers and #card (canvas) may overflow horizontally.
     ========================================================================== */

  /* --- base fixes that block responsiveness at any width --- */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, canvas, video { max-width: 100%; }
  .kpi b, .card .big, .stat b, .price { overflow-wrap: anywhere; }

  /* --- phones + small tablets: under 768px --- */
  @media (max-width: 767px) {
    :root { --bar: 64px; }
    .logo { height: 46px; }
    .brand { min-height: 0; }
    /* the search takes the whole bar when it opens, and hides the logo behind it */
    .tb-right { position: absolute; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); justify-content: flex-end; pointer-events: none; }
    .tb-right > * { pointer-events: auto; }
    .tb-search { flex: 1; min-width: 0; }
    .tb-search.open { background: rgba(10,15,25,0.72); border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
    .search { width: 100%; }
    .search input { min-height: 44px; font-size: 16px; }
    .menu { width: 100%; background: linear-gradient(90deg, rgba(3,6,12,0.96) 0%, rgba(3,6,12,0.9) 70%, rgba(3,6,12,0.6) 100%); }
    .ov { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
    .ov-panel { max-width: none; max-height: calc(100dvh - var(--bar)); }
    .ov-body { padding-left: 10px; padding-right: 10px; }
    .rep-top, .rep-in { padding-left: 10px; padding-right: 10px; }
    .rep-wrap { padding-top: calc(var(--bar) + 10px); }
  }

  /* --- under 720px: existing JS mobile breakpoint --- */
  @media (max-width: 719px) {
    /* status bar stacks */
    .bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .bar .grow { width: 100%; }
    .help { align-self: flex-end; }

    /* legend single column */
    .legend { grid-template-columns: 1fr; }

    /* hero: title block then full-width live price tile */
    .hero-top { flex-direction: column; align-items: stretch; }
    .live { width: 100%; min-width: 0; }
    .title .avatar { width: 44px; height: 44px; font-size: 14px; }
    .hero h2 { font-size: clamp(19px, 6vw, 24px); }

    /* tiles: 2 columns */
    .tiles { grid-template-columns: repeat(2, 1fr); }

    /* details padding reduces */
    details { padding: 0 14px 14px; }
    .reasons { padding: 14px; }

    /* two-column groups collapse to one */
    .grid2 { grid-template-columns: 1fr; }

    /* lab record */
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .cards { grid-template-columns: 1fr; }
    .card .big { font-size: clamp(22px, 7vw, 30px); }

    /* mini stat grid: keep numbers from clipping */
    .tcard .mini b, .tcard .mini small, .kpi b, .stat b { min-width: 0; overflow-wrap: anywhere; }

    /* share dialog becomes a full-screen sheet */
    .sharedlg { max-width: 100vw; width: 100vw; margin: 0; max-height: 100dvh; border-radius: 0; }
    .sharebox { overflow: auto; max-height: 100dvh; border-radius: 0; }
    .sharehead { flex-wrap: wrap; gap: 8px; align-items: flex-start; }
    .sharehead h3 { width: 100%; }
    #fmt { max-width: 100%; }
    #card { max-height: 55vh; }
    .shareactions { flex-wrap: wrap; }
    .shareactions .btn { flex: 1 1 auto; }
    #copyImg { flex-basis: 100%; }
    #postText { width: 100%; }
  }

  /* --- 400px and below --- */
  @media (max-width: 399px) {
    .tiles { grid-template-columns: 1fr; }
    .ringwrap { flex-direction: column; align-items: flex-start; }
    .tcard .mini { grid-template-columns: repeat(2, 1fr); }
  }

  /* --- down to 360px: mini grid still 3-up above this, 2 below --- */
  @media (min-width: 400px) and (max-width: 767px) {
    .tcard .mini { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 359px) {
    .tcard .mini { grid-template-columns: repeat(2, 1fr); }
  }

  /* --- tablet and up: restore centred, bounded share dialog --- */
  @media (min-width: 720px) {
    .sharedlg { max-width: min(96vw, 900px); width: 100%; max-height: none; border-radius: var(--r); }
    .sharebox { max-height: none; border-radius: var(--r); }
  }

  /* --- site footer, shared by every page (footer.js) --- */
  .sitefoot { margin: 40px 20px 0; padding: 36px 0 28px; border-top: 1px solid var(--edge); }
  .sf-in { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr)); gap: 28px 24px; }
  .sf-brand img { height: 56px; width: auto; display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45)); }
  .sf-brand p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 14px 0 0; max-width: 340px; }
  .sf-col { display: grid; align-content: start; gap: 8px; }
  .sf-col h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .sf-col a { color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 1.4; }
  .sf-col a:hover { color: var(--accent-2); }
  .sf-legal { max-width: 1100px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
  @media (max-width: 900px) { .sf-in { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } }
  @media (max-width: 480px) { .sf-in { grid-template-columns: 1fr; } .sitefoot { margin: 32px 10px 0; } }

  /* holder reports: a separate strip under the coin page, styled like the other cards */
  .reports { gap: 12px; }
  .reports > .note { padding: 0; }
  .rep { border-radius: 12px; border: 1px solid var(--edge); background: rgba(0,0,0,0.18); padding: 10px 12px; display: grid; gap: 6px; }
  .rep + .rep { margin-top: -4px; }
  .rep-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
  .rep-h code { color: var(--muted); font-size: 12px; }
  .rep-h b { font-family: var(--font-display); font-size: 13.5px; }
  .rep-h small { color: var(--muted); font-size: 11.5px; margin-left: auto; }
  .rep p { margin: 0; color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
  .repform { display: grid; gap: 12px; border-top: 1px solid var(--edge); padding-top: 12px; }
  .repform label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
  .repform select, .repform textarea, .repform input { width: 100%; background: rgba(0,0,0,0.3); color: var(--ink); border: 1px solid var(--edge); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 14px; min-height: 44px; }
  .repform textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
  .repform small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .repform :focus-visible { border-color: var(--accent); }
  .repactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  @media (max-width: 560px) { .repactions { display: grid; } .repactions .btn { width: 100%; } .rep-h small { margin-left: 0; } }

  /* ---- Universe HUD: floats over the full-screen canvas ----------------------------------------- */
  .uni-hud { position: absolute; inset: 0; pointer-events: none; transition: opacity 260ms var(--ease); }
  .uni-hud > * { pointer-events: auto; }
  /* the counters and the legend step aside after six still seconds; the controls stay */
  .uni-kpis { transition: opacity 600ms var(--ease); }
  .uni-hud.idle .uni-kpis { opacity: 0; pointer-events: none; }
  .uni-kpis { position: absolute; left: clamp(16px, 4vw, 84px); bottom: calc(56px + env(safe-area-inset-bottom)); width: min(320px, calc(100% - 32px)); display: grid; gap: 8px; text-shadow: 0 1px 8px rgba(0,0,0,0.8); }
  .uni-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 8px; }
  .uni-row .kpi { flex: 1; padding: 0 22px 0 0; border: 0; background: none; border-radius: 0; gap: 2px; }
  .uni-row .kpi + .kpi { padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.45); }
  .uni-row .kpi span { font-size: 9px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); font-weight: 500; font-family: var(--font-body); }
  .uni-row .kpi b { font-size: 16px; font-weight: 600; line-height: 1.1; }
  .uni-note { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.7; max-width: 46ch; }
  .uni-ctl { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 6px; transition: opacity 240ms var(--ease); }
  /* neither button means anything on the coin page: there is no camera to reset in there, and the
     motion setting stays where it was set. Opacity, not display: the planet's lower edge is laid out
     against this box, so taking it out of the flow would move the planet. */
  .uni-hud.coinview .uni-ctl { opacity: 0; pointer-events: none; }
  .uni-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; background: rgba(10,15,25,0.5); border: 1px solid var(--edge); color: var(--ink-2); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .uni-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .uni-btn:hover { background: var(--glass-2); color: var(--ink); }
  .uni-btn.on { color: var(--accent-2); border-color: var(--edge-2); background: var(--glass-2); }
  /* level 2 header: a centred breadcrumb under the logo, then the story name in large caps */
  .uni-head { position: absolute; left: 0; right: 0; top: calc(var(--bar) + 6px); z-index: 2; display: grid; justify-items: center; gap: 7px; padding: 0 16px; text-align: center; pointer-events: none; opacity: 0; transition: opacity 420ms var(--ease); text-shadow: 0 2px 20px rgba(0,0,0,0.75); }
  .uni-head.in { opacity: 1; }
  .uni-crumb { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }
  .uni-crumb i { font-style: normal; opacity: 0.6; }
  .uni-back { background: none; border: 0; padding: 0; margin: 0; min-height: 24px; color: var(--accent-2); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .uni-back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .uni-h1 { margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5.2vw, 104px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
  .uni-sub { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 52ch; }
  .uni-card { position: absolute; z-index: 3; max-width: 260px; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(11,17,27,0.88); border: 1px solid var(--edge); box-shadow: 0 12px 30px rgba(0,0,0,0.5); pointer-events: none; }
  .uni-card b { font-family: var(--font-display); font-size: 14px; }
  .uni-card b i { font-style: normal; font-weight: 600; font-size: 12px; }
  .uni-card span { color: var(--ink-2); font-size: 12px; }
  .uni-card em { color: var(--muted); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
  /* the card itself never takes the pointer — it would swallow the drag — but the wallet link in it must */
  .uni-card a.uni-wlink { pointer-events: auto; justify-self: start; margin-top: 4px; color: var(--accent-2); font-size: 11.5px; text-decoration: none; border-bottom: 1px solid rgba(255,196,107,0.45); }
  .uni-card a.uni-wlink:hover { color: var(--accent); }
  @media (max-width: 719px) {
    .uni-kpis { left: 12px; right: 12px; width: auto; bottom: calc(104px + env(safe-area-inset-bottom)); gap: 10px; }
    .uni-row .kpi span { font-size: 11px; }
    .uni-row .kpi b { font-size: 22px; }
    .uni-note { font-size: 13px; line-height: 1.5; }
    .uni-ctl { left: 8px; right: 8px; bottom: calc(52px + env(safe-area-inset-bottom)); justify-content: flex-end; }
    .uni-head { top: calc(var(--bar) + 2px); gap: 5px; padding: 0 10px; }
    .uni-h1 { font-size: clamp(26px, 8.6vw, 44px); max-width: 12ch; }
    .uni-crumb { font-size: 10.5px; }
    .uni-sub { font-size: 11px; }
    .uni-card { max-width: 200px; }
  }
  /* level 2: the universe counters give way to the galaxy header */
  .uni-hud.galaxy .uni-kpis { display: none; }

  /* level 3: the coin solar system. The crumb gains the galaxy name as a second link, the sub
     line carries the verdict word, and one glass button keeps the full coin page a click away. */
  .uni-crumb .uni-c2b { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .uni-sub .uni-verdict { font-style: normal; font-weight: 600; }
  .uni-full { pointer-events: auto; margin-top: 2px; min-height: 32px; padding: 0 14px; border-radius: 10px; background: rgba(10,15,25,0.5); border: 1px solid var(--edge); color: var(--ink); font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .uni-full:hover { background: var(--glass-2); border-color: var(--edge-2); color: #fff; }
  .uni-full[hidden] { display: none; }
  @media (max-width: 719px) {
    .uni-crumb .uni-c2b { max-width: 12ch; }
    .uni-full { min-height: 30px; padding: 0 12px; font-size: 10.5px; }
  }

  /* paid promotion, kept as a small badge on the row so the signal is not lost with the old tab */
  .boost { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); background: rgba(242,169,59,0.12); border: 1px solid rgba(242,169,59,0.32); white-space: nowrap; vertical-align: middle; }
  .boost svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

  /* ---- sponsorships: labelled ads inside the universe ------------------------------------------
     Ads never borrow the look of data. The card is muted, the tag says "ad", and the line about
     sponsors not changing the data is part of the card itself, not an optional footnote. */
  .uni-card.ad { max-width: 250px; gap: 4px; border-color: rgba(255,255,255,0.10); }
  .uni-card .ad-head { display: flex; align-items: center; gap: 8px; }
  .uni-card .ad-head b { font-size: 13.5px; }
  .uni-card img.ad-logo { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.05); flex: none; }
  .uni-card .ad-tag { margin-left: auto; font-style: normal; font-weight: 700; font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--edge); border-radius: 5px; padding: 1px 5px; }
  .uni-card.ad em { color: #7C889C; font-size: 10.5px; line-height: 1.4; }
  .uni-card.ad em.ad-go { color: var(--accent-2); }

  /* The hidden universe tuning panel. Developer surface only: no button opens it, it is reached
     with the T key or ?tune=1, so a normal visitor never sees it. */
  .uni-tune { position: fixed; left: 12px; bottom: 12px; z-index: 40; width: 262px; max-height: min(560px, calc(100vh - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border-radius: 12px; background: rgba(9,14,24,0.86); border: 1px solid var(--edge); box-shadow: 0 14px 34px rgba(0,0,0,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .uni-tune[hidden] { display: none; }
  .uni-tune .ut-head { display: flex; align-items: baseline; gap: 8px; }
  .uni-tune .ut-head b { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
  .uni-tune .ut-head i { margin-left: auto; font-style: normal; font-size: 10px; color: var(--muted); }
  .uni-tune .ut-rows { min-height: 0; overflow-y: auto; display: grid; gap: 2px; padding-right: 2px; }
  .uni-tune .ut-row { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 6px; }
  .uni-tune .ut-row span { font-size: 10px; color: var(--muted); line-height: 1.2; }
  .uni-tune .ut-row b { font-size: 10.5px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
  .uni-tune input[type="range"] { width: 100%; height: 16px; accent-color: var(--accent-2); background: transparent; cursor: pointer; }
  .uni-tune .ut-btns { display: flex; flex-wrap: wrap; gap: 5px; }
  .uni-tune .ut-btns button { flex: 1 1 40%; min-height: 26px; padding: 0 9px; border-radius: 8px; background: var(--glass); border: 1px solid var(--edge); color: var(--ink-2); font-family: var(--font-display); font-size: 11px; font-weight: 600; cursor: pointer; }
  .uni-tune .ut-btns button:hover { background: var(--glass-2); color: var(--ink); }
  .uni-tune .ut-btns button[data-t="cam"] { flex: 1 1 100%; }
  .uni-tune .ut-btns button[data-t="save"] { flex: 1 1 40%; color: var(--accent-2); border-color: var(--edge-2); }
  .uni-tune .ut-msg { min-height: 12px; font-size: 10.5px; color: var(--muted); }