/* ============================================================
   OSRS Coffer — osrscoffer.net
   Death's Coffer theme: red / black / bone
   ============================================================ */

:root{
  --black:      #0a0505;
  --black-2:    #100808;
  --panel:      #170d0d;
  --panel-2:    #1f1212;
  --panel-3:    #2a1717;
  --line:       #3a1c1c;
  --line-soft:  #271414;

  --red:        #d42a2a;
  --red-hot:    #ff4444;
  --red-deep:   #6e0f0f;
  --bone:       #e7e0d2;
  --bone-hot:   #fff3d6;
  --bone-deep:  #8f8672;

  --text:       #f0e9e4;
  --text-2:     #c9bbb5;
  --muted:      #93807b;
  --muted-2:    #6b5a56;

  --pos:        #ffd27a;
  --neg:        #ff5252;
  --neg-deep:   #6e0f0f;
  --f2p:        #b7ab9e;

  --ring:       0 0 0 1px var(--line);
  --shadow:     0 10px 30px -12px rgba(0,0,0,.9);
  --glow-red:   0 0 24px -6px rgba(212,42,42,.55);
  --glow-bone:  0 0 24px -6px rgba(231,224,210,.35);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 880px;
  --pad: 20px; /* page-edge padding — grows on wider screens, see the Responsive block */
  --panel-pad: 20px; /* panel's own internal padding — deliberately NOT responsive.
    .t-scroll cancels exactly this (not --pad) to bleed a wide table to the panel's
    own edge; if this and --panel's padding ever drift apart, the table bleeds past
    the panel border instead of stopping at it. */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--ff);
  background:var(--black);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 420px at 12% -10%, rgba(212,42,42,.16), transparent 62%),
    radial-gradient(760px 380px at 92% -6%, rgba(110,15,15,.22), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

img{ max-width:100%; display:block; }
a{ color:var(--red-hot); text-decoration:none; }
a:hover{ color:var(--bone-hot); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }

/* ============================================================
   Header / footer
   ============================================================ */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,5,5,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-header::after{
  content:""; display:block; height:2px;
  background:linear-gradient(90deg,var(--red-deep),var(--red-hot),var(--red-deep));
  opacity:.9;
}
.header-inner{
  max-width:var(--wrap); margin:0 auto; padding:12px var(--pad);
  display:flex; align-items:center; gap:22px;
}
.logo{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.logo-mark{
  width:36px; height:36px; border-radius:10px; flex:0 0 auto;
  background:linear-gradient(145deg,var(--red-deep) 0%, #2d0707 55%, #0a0202 100%);
  border:1px solid rgba(231,224,210,.32);
  display:grid; place-items:center;
  box-shadow:var(--glow-red), inset 0 1px 0 rgba(255,255,255,.10);
}
.logo-mark img{ width:22px; height:22px; image-rendering:pixelated; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-name{ font-size:17px; font-weight:800; letter-spacing:.2px; color:var(--text); }
.logo-name em{ font-style:normal; color:var(--red-hot); }
.logo-tld{ font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted-2); margin-top:4px; }
.header-links{ display:flex; gap:8px; margin-left:auto; align-items:center; }
.header-links a{
  color:var(--text-2); font-size:13.5px; font-weight:600;
  padding:8px 13px; border-radius:var(--r-sm); border:1px solid transparent; transition:.16s;
}
.header-links a:hover{ color:var(--text); background:var(--panel-2); border-color:var(--line); }

.bookmark-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff); font-size:13px; font-weight:700; color:var(--black);
  background:linear-gradient(160deg,var(--bone),var(--bone-deep));
  border:1px solid rgba(0,0,0,.25); border-radius:var(--r-sm);
  padding:8px 13px; cursor:pointer; transition:.16s; box-shadow:var(--glow-bone);
}
.bookmark-btn:hover{ filter:brightness(1.08); }
.bookmark-tip{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  background:var(--panel-3); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 13px; font-size:12.5px; color:var(--text-2); white-space:nowrap;
  box-shadow:var(--shadow); opacity:0; transform:translateY(-4px); pointer-events:none; transition:.14s;
}
.bookmark-tip.is-shown{ opacity:1; transform:translateY(0); }
.bookmark-tip kbd{
  font-family:var(--ff-mono); font-size:11px; color:var(--red-hot);
  background:var(--black-2); border:1px solid var(--line); border-radius:4px; padding:2px 6px;
}
.header-actions{ position:relative; margin-left:auto; display:flex; align-items:center; gap:8px; }

.site-footer{ margin-top:56px; border-top:1px solid var(--line-soft); background:var(--black-2); }
.footer-inner{
  max-width:var(--wrap); margin:0 auto; padding:26px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.footer-inner p{ margin:0; color:var(--muted); font-size:13px; max-width:560px; }
.footer-links{ display:flex; gap:16px; }
.footer-links a{ color:var(--text-2); font-size:13px; }
.footer-links a:hover{ color:var(--red-hot); }
.foot-legal{ border-top:1px solid var(--line-soft); padding:14px var(--pad); text-align:center; font-size:12px; color:var(--muted-2); }

/* ============================================================
   Hero
   ============================================================ */

.hero{ padding:44px 0 8px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--red-hot); background:rgba(212,42,42,.1);
  border:1px solid rgba(212,42,42,.32); border-radius:999px;
  padding:6px 14px; margin-bottom:16px;
}
.eyebrow .dot{ width:6px;height:6px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 8px var(--red-hot); }
.hero h1{ margin:0 0 12px; font-size:clamp(28px,4.6vw,42px); line-height:1.06; font-weight:800; letter-spacing:-1px; }
.hero h1 .accent{
  background:linear-gradient(100deg,var(--red) 0%,var(--red-hot) 45%,var(--bone) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ margin:0; max-width:680px; color:var(--text-2); font-size:15.5px; }

/* ============================================================
   Panels, stats, forms
   ============================================================ */

.panel{
  background:linear-gradient(165deg,var(--panel) 0%,var(--black-2) 130%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--panel-pad); box-shadow:var(--shadow);
}
.panel + .panel{ margin-top:18px; }
.panel-title{
  display:flex; align-items:center; gap:9px; margin:0 0 16px;
  font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted);
}
.panel-title::before{ content:""; width:14px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--red),var(--bone)); }
.panel-title .right{ margin-left:auto; letter-spacing:0; text-transform:none; font-weight:600; font-size:12px; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.stat{
  background:var(--black-2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 15px; position:relative; overflow:hidden;
}
.stat .k{ font-size:10.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); }
.stat .v{ font-size:23px; font-weight:800; letter-spacing:-.6px; margin-top:5px; font-variant-numeric:tabular-nums; }
.stat .s{ font-size:12px; color:var(--muted-2); margin-top:3px; }
.stat.gold .v{ color:var(--bone); }
.stat.green .v{ color:var(--red-hot); }

/* Status strip — the "we crawl this ourselves" banner above the stats */
.status-strip{ display:flex; align-items:center; gap:16px; margin:22px 0; }
.status-icon{
  width:44px; height:44px; border-radius:12px; flex:none;
  background:linear-gradient(145deg,var(--red-deep) 0%, #2d0707 55%, #0a0202 100%);
  border:1px solid rgba(231,224,210,.28);
  display:grid; place-items:center;
  box-shadow:var(--glow-red), inset 0 1px 0 rgba(255,255,255,.10);
}
.status-icon img{ width:26px; height:26px; image-rendering:pixelated; }
.status-text{ min-width:0; }
.status-title{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; color:var(--text); }
.status-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.status-sub strong{ color:var(--text-2); font-weight:700; }
.status-pulse{
  width:8px; height:8px; border-radius:50%; background:var(--red-hot); flex:none;
  animation:statusPulse 2s infinite;
}
.status-strip.is-err .status-icon{
  background:linear-gradient(145deg,var(--neg-deep) 0%, #2a0d07 55%, #120503 100%);
  border-color:rgba(255,82,82,.4); box-shadow:none;
}
.status-strip.is-err .status-pulse{ background:var(--neg); animation:none; }
@keyframes statusPulse{
  0%{ box-shadow:0 0 0 0 rgba(212,42,42,.55); }
  70%{ box-shadow:0 0 0 8px rgba(212,42,42,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,42,42,0); }
}

/* Filters — collapsible panel; compact/minimal since it's scanned, not read */
#filtersPanel{ padding:0; }
#filtersPanel > summary{
  display:flex; align-items:center; gap:9px; margin:0; list-style:none; cursor:pointer;
  padding:16px 20px;
  font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted);
}
#filtersPanel > summary::-webkit-details-marker{ display:none; }
#filtersPanel > summary:hover{ color:var(--text-2); }
#filtersPanel > summary .chevron{ font-size:11px; color:var(--muted-2); transition:transform .15s; }
#filtersPanel[open] > summary .chevron{ transform:rotate(90deg); }
#filtersPanel > summary .right{ margin-left:auto; letter-spacing:0; text-transform:none; font-weight:600; font-size:11.5px; color:var(--muted-2); }

#filters{ padding:0 16px 14px; }
#filters .field{ margin-bottom:8px; }
#filters .field:last-child{ margin-bottom:0; }
#filters .field > label,#filters .lbl{
  font-size:10px; font-weight:700; letter-spacing:.7px; margin-bottom:3px;
}
#filters .hint{ font-size:10.5px; margin-top:3px; }
#filters .row{ gap:8px; margin-bottom:8px; }
#filters .row-3{ gap:8px; margin-bottom:8px; }
#filters input[type=text],#filters input[type=number]{ padding:7px 9px; font-size:13px; }
#filters .seg{ padding:3px; }
#filters .seg button{ padding:5px 6px; font-size:12px; }
#filters .btn-row{ margin-top:10px; }

/* Quick-filter presets */
/* 5 preset buttons — explicit column counts per tier (rather than auto-fit
   reflow) so a row never ends with one lonely leftover button: 5-across on
   desktop (one full row), 3-across on tablet (a clean 3+2), 1-across on
   mobile (full width, since the labels run long — see the max-width:720
   override further down). */
.presets{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.preset-btn{
  display:flex; align-items:center; gap:9px; text-align:left; width:100%;
  background:var(--black-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; cursor:pointer; transition:.15s; font-family:var(--ff);
}
.preset-btn:hover{ border-color:var(--muted-2); }
.preset-btn.is-on{ border-color:var(--red-hot); background:rgba(212,42,42,.12); box-shadow:var(--glow-red); }
.preset-icon{ width:20px; height:20px; flex:none; object-fit:contain; image-rendering:pixelated; }
.preset-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.preset-name{ font-size:12.5px; font-weight:700; color:var(--text); }
.preset-sub{ font-size:10.5px; color:var(--muted); line-height:1.35; }

/* Advanced settings — nested collapsible for the fine-grained numeric fields */
.advanced-details{ margin-top:10px; border-top:1px solid var(--line-soft); padding-top:10px; }
.advanced-details summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--red-hot);
}
.advanced-details summary::-webkit-details-marker{ display:none; }
.advanced-details summary:hover{ color:var(--bone-hot); }
.advanced-details summary .chevron{ font-size:10px; transition:transform .15s; }
.advanced-details[open] summary .chevron{ transform:rotate(90deg); }
.advanced-details .adv-body{ margin-top:10px; }

.field{ margin-bottom:14px; }
.field:last-child{ margin-bottom:0; }
.field > label,.lbl{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.hint{ font-size:12px; color:var(--muted-2); margin-top:5px; }

input[type=text],input[type=number],select{
  width:100%; font-family:var(--ff); font-size:14.5px; color:var(--text);
  background:var(--black-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; outline:none; transition:.15s;
}
input[type=number]{ font-family:var(--ff-mono); }
input:focus,select:focus{ border-color:rgba(212,42,42,.65); box-shadow:0 0 0 3px rgba(212,42,42,.12); }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.seg{ display:flex; gap:4px; background:var(--black-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px; }
.seg button{
  flex:1; font-family:var(--ff); font-size:13px; font-weight:700; color:var(--muted);
  background:transparent; border:0; border-radius:6px; padding:8px 6px; cursor:pointer; transition:.15s;
}
.seg button:hover{ color:var(--text); }
.seg button.is-on{ background:linear-gradient(160deg,var(--red),var(--red-deep)); color:#fdeceb; box-shadow:var(--glow-red); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ff); font-size:14px; font-weight:700; cursor:pointer;
  border-radius:var(--r-sm); padding:11px 18px; border:1px solid transparent; transition:.16s;
}
.btn-ghost{ background:var(--panel-2); border-color:var(--line); color:var(--text-2); }
.btn-ghost:hover{ color:var(--text); border-color:var(--muted-2); }
.btn-ghost:disabled{ opacity:.35; cursor:default; }
.btn-sm{ padding:7px 12px; font-size:12.5px; }
.btn-row{ display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }

/* ============================================================
   Table
   ============================================================ */

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); padding:0 10px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
}
thead th[data-col]{ cursor:pointer; user-select:none; }
thead th[data-col]:hover{ color:var(--red-hot); }
thead th.sorted{ color:var(--red-hot); }
thead th .arrow{ opacity:.65; font-size:9px; margin-left:3px; }
thead th .th-icon{ display:inline-block; width:13px; height:13px; object-fit:contain; vertical-align:-2px; margin-right:4px; image-rendering:pixelated; }
tbody tr[data-item]{ cursor:pointer; }
tbody td{ padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:rgba(255,255,255,.03); }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--ff-mono); font-size:12.5px; }
.t-scroll{ overflow-x:auto; min-width:0; margin:0 calc(var(--panel-pad) * -1); padding:0 var(--panel-pad); }

/* Item column widened; name on top, membership + buy-limit tags stacked underneath */
thead th:first-child,tbody td:first-child{ min-width:230px; width:32%; }
.item-cell{ display:flex; align-items:center; gap:10px; white-space:normal; }
.item-cell img{ width:26px; height:26px; object-fit:contain; flex:none; image-rendering:pixelated; background:var(--black-2); border-radius:4px; }
.item-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.item-cell .t-name{ font-weight:650; color:var(--text); line-height:1.25; }
.item-tags{ display:flex; gap:5px; flex-wrap:wrap; }

.badge{ font-size:10px; font-weight:700; border-radius:5px; padding:2px 6px; letter-spacing:.3px; }
.badge.mem{ background:rgba(212,42,42,.16); color:var(--red-hot); }
.badge.f2p{ background:rgba(183,171,158,.16); color:var(--f2p); }
.badge.limit{ background:var(--panel-3); color:var(--muted); border:1px solid var(--line); font-family:var(--ff-mono); }

.pos{ color:var(--pos); } .neg{ color:var(--neg); }

.pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; font-size:13px; color:var(--muted); }

.note{
  font-size:12.5px; color:var(--muted); background:var(--black-2);
  border:1px solid var(--line-soft); border-left:3px solid var(--red-hot);
  border-radius:var(--r-sm); padding:11px 13px; margin-top:16px; line-height:1.55;
}
.note strong{ color:var(--text-2); }

.price-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.price-dot{ width:7px;height:7px;border-radius:50%;background:var(--muted-2); }
.price-dot.live{ background:var(--red-hot); box-shadow:0 0 8px var(--red-hot); }
.price-dot.err{ background:var(--neg); }

/* ============================================================
   Item detail modal
   ============================================================ */

.modal-backdrop{
  position:fixed; inset:0; z-index:100; background:rgba(4,2,2,.76);
  display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 16px; overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.modal{
  width:100%; max-width:560px;
  background:linear-gradient(165deg,var(--panel) 0%,var(--black-2) 130%);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 30px 70px -20px rgba(0,0,0,.95);
  padding:22px; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:16px;
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-2);
  cursor:pointer; font-size:15px; line-height:1;
}
.modal-close:hover{ color:var(--text); border-color:var(--muted-2); }
.modal-head{ display:flex; align-items:center; gap:12px; padding-right:40px; }
.modal-head img{ width:36px; height:36px; image-rendering:pixelated; background:var(--black-2); border-radius:8px; }
.modal-head h3{ margin:0; font-size:18px; font-weight:800; }
.modal-head .examine{ margin:2px 0 0; font-size:12.5px; color:var(--muted); font-style:italic; }
.modal-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:16px 0 4px; }
.modal-breakdown{
  margin-top:10px; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:8px; font-size:13px;
}
.modal-breakdown .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.modal-breakdown .row .k{ color:var(--muted); }
.modal-breakdown .row .v{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; color:var(--text); }
.modal-breakdown .row.total{ padding-top:8px; border-top:1px dashed var(--line); font-weight:700; }
.modal-actions{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }

/* ============================================================
   Legal / privacy page
   ============================================================ */

.legal-main{ max-width:820px; margin:0 auto; padding:34px var(--pad) 60px; }
.legal-main h1{ font-size:clamp(26px,4vw,36px); font-weight:800; margin:0 0 6px; letter-spacing:-.8px; }
.legal-updated{ color:var(--muted); font-size:12.5px; margin-bottom:26px; }
.legal-toc{ background:var(--black-2); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; margin-bottom:30px; }
.legal-toc div{ font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.legal-toc ol{ margin:0; padding-left:20px; columns:2; gap:24px; font-size:13.5px; }
.legal-toc a{ color:var(--text-2); }
.legal-toc a:hover{ color:var(--red-hot); }
.legal-content h2{ font-size:18px; font-weight:800; margin:30px 0 10px; letter-spacing:-.3px; }
.legal-content p{ color:var(--text-2); font-size:14.5px; line-height:1.7; margin:0 0 12px; }
.legal-content ul{ color:var(--text-2); font-size:14.5px; line-height:1.7; padding-left:22px; }
.legal-content strong{ color:var(--text); }
.legal-content table{ width:100%; margin:12px 0 16px; font-size:13px; }
.legal-content table th{ text-align:left; padding:8px 10px; background:var(--panel-2); color:var(--muted); border-bottom:1px solid var(--line); }
.legal-content table td{ padding:8px 10px; border-bottom:1px solid var(--line-soft); color:var(--text-2); vertical-align:top; }
.legal-callout{
  background:rgba(212,42,42,.08); border:1px solid rgba(212,42,42,.3); border-left:3px solid var(--red-hot);
  border-radius:var(--r-sm); padding:14px 16px; margin-bottom:26px; font-size:13.5px; color:var(--text-2); line-height:1.6;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Wider screens get a bit more edge padding — .wrap/.header-inner/.footer-inner/
   .legal-main all key off --pad, so this alone widens every edge margin on the
   page consistently without touching the max-width columns themselves.
   (.t-scroll deliberately keys off the separate, non-responsive --panel-pad
   instead — see its definition — so it always cancels exactly the panel's own
   padding and the table never bleeds past the panel edge.) */
@media (min-width:1100px){
  :root{ --pad: 36px; }
}
@media (min-width:1500px){
  :root{ --pad: 56px; }
}

@media (max-width:1024px){
  .presets{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:720px){
  .row,.row-3{ grid-template-columns:1fr; }
  #filters .row-3{ grid-template-columns:1fr 1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .header-links a:not(:last-child){ display:none; }
  .legal-toc ol{ columns:1; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .stat.wide{ grid-column:1 / -1; }
  .status-strip{ align-items:flex-start; }
  .presets{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}