:root { color-scheme:light; --bg:#fff; --fg:#1a1d21; --muted:#5b6470; --line:#e3e6ea; --accent:#0b5fff; --head:#f4f6f8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#12151a; --fg:#e8ebef; --muted:#9aa3ae; --line:#272c33; --accent:#6aa2ff; --head:#1a1f26; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#12151a; --fg:#e8ebef; --muted:#9aa3ae; --line:#272c33; --accent:#6aa2ff; --head:#1a1f26; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; }
header, main, footer { max-width:1200px; margin:0 auto; padding:16px; }
h1 { margin:0 0 4px; font-size:1.5rem; }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.brand { display:flex; gap:12px; align-items:flex-start; min-width:0; }
.logo { flex:none; width:48px; height:48px; }
header p { margin:0; color:var(--muted); }
#theme { flex:none; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--head); color:var(--fg); font:inherit; cursor:pointer; white-space:nowrap; }
#theme:hover { border-color:var(--accent); color:var(--accent); }
.filters { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--head); }
.filters h2 { margin:0; font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.filters input, .filters select { padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; }
.filters button { padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--head); color:var(--fg); font:inherit; cursor:pointer; }
.filters button:hover { border-color:var(--accent); color:var(--accent); }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; }
.sortfield { display:none !important; }
th, td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:var(--head); position:sticky; top:0; cursor:pointer; white-space:nowrap; user-select:none; }
th.sorted { color:var(--accent); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.title a { color:var(--accent); text-decoration:none; }
td.title a:hover { text-decoration:underline; }
tr[hidden] { display:none; }
footer { color:var(--muted); font-size:13px; }
.pager { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; margin:8px 0; }
.pager select, .pager button { padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; }
.pager button { background:var(--head); cursor:pointer; }
.pager button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.pager button:disabled { opacity:.45; cursor:default; }
.pg-nav { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pg-info { color:var(--muted); padding:0 6px; white-space:nowrap; }
.filters .grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.filters .field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.filters .field.wide { grid-column:span 2; }
.filters .field > span { font-size:.75rem; font-weight:600; color:var(--muted); }
.filters .field input, .filters .field select { width:100%; min-width:0; }
.filters .foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; border-top:1px solid var(--line); }
#count { color:var(--muted); }
@media (max-width:760px) { .filters .grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
td.title { min-width:340px; }
td.title a { vertical-align:middle; }
.thumb { float:left; width:48px; height:48px; margin:0 10px 0 0; object-fit:contain; border-radius:4px; background:#fff; border:1px solid var(--line); }
td.feat { white-space:nowrap; }
.chip { display:inline-block; padding:1px 7px; border-radius:999px; background:var(--head); border:1px solid var(--line); font-size:.72rem; color:var(--muted); }

/* Landscape tablet: drop the low-value columns so the rest fit without a long sideways scroll. */
@media (max-width:1180px) {
  .c-lo { display:none; }
  #t td.title { min-width:280px; }
}

/* Phone and portrait tablet: one card per product, no column headers (sorting is in the "Sort by" select). */
@media (max-width:1000px) {
  .sortfield { display:flex !important; }
  .tablewrap { border:0; overflow:visible; border-radius:0; }
  #t, #t tbody { display:block; min-width:0; width:100%; }
  #t thead { display:none; }
  #t tr { display:grid; align-content:start; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px 10px; margin:0 0 10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
  #t tr[hidden] { display:none; }
  #t td { display:block; padding:0; border:0; text-align:left; font-variant-numeric:tabular-nums; min-width:0; }
  #t td.num { text-align:left; }
  #t td::before { content:attr(data-label); display:block; font-size:.68rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
  #t td.na { display:none; }
  #t td.title { grid-column:1 / -1; order:-2; min-width:0; }
  #t td.title::before { display:none; }
  #t td.title a { font-weight:500; }
  .thumb { width:56px; height:56px; }
  #t td.c-ppt, #t td.c-price, #t td.c-cap { order:-1; font-size:1.05rem; font-weight:600; }
  #t td.c-lo { display:block; }
  #t td.c-lo.na, #t td.dflt { display:none; }
  #t td.feat { grid-column:1 / -1; white-space:normal; }
  #t td.feat::before { display:none; }
  .pager { justify-content:center; }
}

/* Portrait tablet: two cards per row. */
@media (min-width:640px) and (max-width:1000px) {
  #t tbody { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  #t tr { margin:0; }
}

/* Optional columns: hidden until ticked under "Show columns" (the script toggles show-<name> on the table). */
#t:not(.show-pack) .col-pack, #t:not(.show-size) .col-size,
#t:not(.show-iface) .col-iface, #t:not(.show-speed) .col-speed, #t:not(.show-feat) .col-feat { display:none; }
.filters .cols { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:0; padding:10px 0 0; border:0; border-top:1px solid var(--line); min-width:0; }
.filters .cols legend { float:left; margin:0 4px 0 0; padding:0; font-size:.75rem; font-weight:600; color:var(--muted); }
.filters .cols label { display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.filters .cols input { width:auto; margin:0; accent-color:var(--accent); }

/* ---- Category pages and home: breadcrumbs, hero, deal cards, category cards, browse chips ---- */
:root { --accent2:#7a5cff; --g1:#0b5fff; --g2:#1d3fd1; --g3:#0f1f6b; --glow:122,92,255; --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08); --radius:16px; --gold:#ffc83d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); } }
:root[data-theme="dark"] { --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); }

.sec-title { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:1.1rem; font-weight:700; letter-spacing:-.01em; }
.sec-title::before { content:""; width:4px; height:1.1em; border-radius:2px; background:linear-gradient(180deg, var(--accent), var(--accent2)); }

.crumbs { margin:0 0 12px; font-size:.85rem; color:var(--muted); }
.crumbs a { color:var(--accent); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }

/* Hero: always a blue gradient so the illustration pops in both themes. */
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:24px; align-items:center; margin:0 0 24px; padding:30px; border-radius:22px; color:#fff; overflow:hidden;
  background:radial-gradient(700px 280px at 90% -10%, rgba(255,255,255,.22), transparent 60%), radial-gradient(500px 240px at 0% 110%, rgba(var(--glow),.45), transparent 60%), linear-gradient(135deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%);
  box-shadow:0 14px 36px rgba(11,95,255,.28); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.hero .blurb { margin:16px 0 22px; max-width:62ch; font-size:1.02rem; line-height:1.65; color:rgba(255,255,255,.93); }
.tiles { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:10px; }
.tiles li { padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); }
.tiles b { display:block; font-size:1.45rem; line-height:1.15; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tiles span { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.hero-art { width:100%; height:auto; max-height:300px; justify-self:center; filter:drop-shadow(0 14px 26px rgba(0,0,0,.3)); }

/* Best-deal cards */
.deals { margin:0 0 26px; }
.picks { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.pick { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:6px 14px; align-content:start; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow); transition:transform .15s ease, border-color .15s ease; }
.pick:hover { transform:translateY(-3px); border-color:var(--accent); }
.rank { position:absolute; top:-10px; left:-8px; z-index:1; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-size:.85rem; font-weight:800; color:#1a1d21; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.r1 { background:linear-gradient(135deg,#ffe27a,#ffb300); } .r2 { background:linear-gradient(135deg,#f1f3f6,#b9c0cc); } .r3 { background:linear-gradient(135deg,#f3c9a0,#c98a4b); }
.pick-img { width:72px; height:72px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid var(--line); }
.pick-body { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pick-ppt { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.pick-ppt small { font-size:.75rem; font-weight:600; color:var(--muted); }
.pick-title { color:var(--fg); text-decoration:none; font-size:.92rem; line-height:1.4; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pick-title:hover { color:var(--accent); }
.pick-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pick-chips span { padding:2px 9px; border-radius:999px; background:var(--head); border:1px solid var(--line); font-size:.75rem; color:var(--muted); }
.btn { grid-column:1 / -1; margin-top:8px; display:inline-flex; justify-content:center; align-items:center; gap:6px; padding:10px 14px; border-radius:12px; background:var(--accent); color:#fff; font-weight:700; font-size:.92rem; text-decoration:none; transition:filter .15s ease, transform .15s ease; }
:root[data-theme="dark"] .btn { color:#0b1020; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color:#0b1020; } }
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* Home: category cards */
.explore { margin:0 0 26px; }
.cards { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(172px, 190px); gap:14px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.card { scroll-snap-align:start; }
.card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); overflow:hidden; text-decoration:none; color:var(--fg); box-shadow:var(--shadow); transition:transform .15s ease, border-color .15s ease; }
.card:hover { transform:translateY(-3px); border-color:var(--accent); }
.card-art { display:block; background:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3)); }
.card-art img { display:block; width:100%; height:auto; }
.card-body { display:flex; flex-direction:column; gap:2px; padding:12px 14px 14px; }
.card-group { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.card-label { font-size:1.05rem; font-weight:700; }
.card-meta { font-size:.8rem; color:var(--muted); }

/* Browse panels (bottom of every page) */
.browse { max-width:1200px; margin:34px auto 0; padding:0 16px; }
.browse-title { margin:0 0 12px; font-size:1.1rem; font-weight:700; display:flex; align-items:center; gap:10px; }
.browse-title::before { content:""; width:4px; height:1.1em; border-radius:2px; background:linear-gradient(180deg, var(--accent), var(--accent2)); }
.bgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.bgroup { padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--head); }
.bgroup:last-child { grid-column:1 / -1; }
.bgroup h2 { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.bicon { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:.8rem; letter-spacing:0; }
.bgroup ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chip-link { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:.9rem; font-weight:500; text-decoration:none; transition:transform .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; }
.chip-link small { padding:1px 7px; border-radius:999px; background:var(--head); border:1px solid var(--line); font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }
a.chip-link:hover { transform:translateY(-2px); border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow); }
.chip-link.is-current { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
:root[data-theme="dark"] .chip-link.is-current { color:#0b1020; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-link.is-current { color:#0b1020; } }
.chip-link.is-current small { background:rgba(255,255,255,.22); border-color:transparent; color:inherit; }

@media (max-width:900px) { .picks { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px) {
  .hero { grid-template-columns:minmax(0,1fr); padding:22px 18px; border-radius:18px; }
  .hero-art { max-height:190px; order:-1; }
  .picks { grid-template-columns:minmax(0,1fr); }
  .rank { left:-4px; }
  .cards { grid-auto-columns:minmax(150px, 160px); gap:10px; margin-right:-16px; padding-right:16px; }
}

/* ---- Guide, snapshot, FAQ, brand profile and the methodology page ---- */
.guide, .insights, .faq, .glance, .method { margin:34px 0 0; }
.panel { overflow-x:auto; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow); min-width:0; }
.panel h3, .fit-card h3 { margin:0 0 12px; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.panel p { margin:0 0 12px; max-width:75ch; line-height:1.65; }
.panel p:last-child { margin-bottom:0; }
.guide-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start; }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.checks li { position:relative; padding-left:30px; line-height:1.6; }
.checks li::before { content:"\2713"; position:absolute; left:0; top:1px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:.72rem; font-weight:800; }
.fit { display:grid; gap:16px; }
.fit-card { padding:18px 20px; border-radius:var(--radius); border:1px solid var(--line); }
.fit-card p { margin:0; line-height:1.6; }
.fit-card.good { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.35); }
.fit-card.warn { background:rgba(217,119,6,.09); border-color:rgba(217,119,6,.38); }
.fit-card.good h3 { color:#15803d; } .fit-card.warn h3 { color:#b45309; }
:root[data-theme="dark"] .fit-card.good h3 { color:#4ade80; } :root[data-theme="dark"] .fit-card.warn h3 { color:#fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fit-card.good h3 { color:#4ade80; } :root:not([data-theme="light"]) .fit-card.warn h3 { color:#fbbf24; } }
.ins-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:16px; margin-bottom:16px; }
.panel.wide { grid-column:1 / -1; }
table.mini { width:100%; min-width:0; border-collapse:collapse; font-size:.9rem; }
table.mini th, table.mini td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; font-variant-numeric:tabular-nums; }
table.mini th { position:static; background:none; cursor:default; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
table.mini .num { text-align:right; }
table.mini tbody tr:last-child td { border-bottom:0; }
table.mini tr.self td { font-weight:700; background:var(--head); }
table.mini a { color:var(--accent); text-decoration:none; } table.mini a:hover { text-decoration:underline; }
.bar { display:inline-block; vertical-align:middle; width:calc(52px * var(--p, 1)); min-width:6px; height:8px; margin-right:8px; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.facts { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.facts li { position:relative; padding-left:18px; line-height:1.5; }
.facts li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.note { margin:12px 0 0; font-size:.82rem; color:var(--muted); }
.notable { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.notable li { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--head); }
.nl-label { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.notable a { color:var(--fg); text-decoration:none; line-height:1.4; } .notable a:hover { color:var(--accent); }
.nl-meta { font-size:.82rem; color:var(--muted); }
.glance h3 { margin:16px 0 10px; }
.faq-list { display:grid; gap:10px; }
.faq details { border:1px solid var(--line); border-radius:14px; background:var(--bg); box-shadow:var(--shadow); overflow:hidden; }
.faq summary { cursor:pointer; list-style:none; padding:16px 48px 16px 18px; font-weight:600; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--head); border:1px solid var(--line); color:var(--accent); font-size:1.1rem; line-height:1; }
.faq details[open] summary::after { content:"\2212"; }
.faq details[open] summary { border-bottom:1px solid var(--line); }
.faq details p { margin:0; padding:14px 18px 18px; line-height:1.65; max-width:75ch; }
.method-note { margin:24px 0 0; font-size:.85rem; color:var(--muted); }
.method-note a { color:var(--accent); }
.prose { max-width:78ch; margin:8px 0 0; line-height:1.7; }
.prose .lead { font-size:1.1rem; }
.prose h2 { margin:28px 0 8px; font-size:1.2rem; letter-spacing:-.01em; }
.prose ul { padding-left:20px; display:grid; gap:8px; }
.prose a { color:var(--accent); }
footer a { color:var(--accent); }
@media (max-width:900px) { .guide-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:480px) {
  .panel { padding:14px; }
  table.mini { font-size:.82rem; }
  table.mini th, table.mini td { padding:7px 5px; }
  table.mini th { font-size:.66rem; letter-spacing:.03em; }
  .bar { display:none; }
}

/* =====================================================================
   Design round 2: conversion-first. Sticky top bar + browse menu, compact
   filters with chips, amber "View deal" buttons, price badges, row states.
   ===================================================================== */
:root { --cta:#ffb020; --cta-hover:#ffc04d; --cta-fg:#1a1d21; --topbar-h:60px; --good:#15803d; --good-bg:rgba(22,163,74,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --good:#4ade80; --good-bg:rgba(74,222,128,.14); } }
:root[data-theme="dark"] { --good:#4ade80; --good-bg:rgba(74,222,128,.14); }
html { scroll-padding-top:calc(var(--topbar-h) + 12px); }
.sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* Top bar */
header.topbar { display:block; position:sticky; top:0; z-index:50; max-width:none; margin:0; padding:0; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); }
.topbar-in { max-width:1200px; height:var(--topbar-h); margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:14px; }
.site { display:inline-flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.topbar .logo, .site-foot .logo { width:36px; height:36px; }
.menus { margin-left:auto; display:flex; align-items:center; gap:4px; }
.quick { padding:7px 12px; border-radius:999px; color:var(--fg); text-decoration:none; font-size:.9rem; font-weight:600; }
.quick:hover { background:var(--head); color:var(--accent); }
details.mega { position:relative; }
details.mega > summary { list-style:none; cursor:pointer; padding:8px 16px; border-radius:999px; background:var(--accent); color:#fff; font-size:.9rem; font-weight:700; user-select:none; }
details.mega > summary::-webkit-details-marker { display:none; }
:root[data-theme="dark"] details.mega > summary { color:#0b1020; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) details.mega > summary { color:#0b1020; } }
.mega-panel { position:absolute; right:0; top:calc(100% + 12px); width:min(760px, calc(100vw - 32px)); max-height:72vh; overflow:auto; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--bg); box-shadow:var(--shadow), 0 24px 60px rgba(0,0,0,.18);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 24px; }
.mega-panel h2 { margin:0 0 8px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mega-panel ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.mega-panel a { display:inline-flex; gap:6px; align-items:center; padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:var(--fg); text-decoration:none; font-size:.88rem; }
.mega-panel a:hover { border-color:var(--accent); color:var(--accent); }
.mega-panel small { color:var(--muted); font-size:.7rem; }
#theme { margin-left:0; }

/* Hero h1 */
.hero h1 { margin:14px 0 0; font-size:clamp(1.6rem, 3.4vw, 2.3rem); line-height:1.15; letter-spacing:-.02em; font-weight:800; }
.hero .blurb { margin-top:12px; }

/* Deals */
.deals-note { margin:-4px 0 14px; color:var(--muted); font-size:.88rem; }
.pick-chips .hot { background:rgba(255,176,32,.16); border-color:rgba(255,176,32,.5); color:#b45309; font-weight:600; }
:root[data-theme="dark"] .pick-chips .hot { color:#fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pick-chips .hot { color:#fbbf24; } }
.btn, .btn-sm { background:var(--cta); color:var(--cta-fg); font-weight:800; text-decoration:none; border:0; }
:root[data-theme="dark"] .btn { color:var(--cta-fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color:var(--cta-fg); } }
.btn { box-shadow:0 2px 0 rgba(0,0,0,.12), 0 8px 18px rgba(255,176,32,.28); }
.btn:hover, .btn-sm:hover { background:var(--cta-hover); filter:none; }
.btn-sm { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:10px; font-size:.82rem; white-space:nowrap; transition:transform .12s ease, background .12s ease; }
.btn-sm:hover { transform:translateY(-1px); }

/* Filters: compact main row, drawer for the rest, removable chips */
.filters { gap:12px; }
.filters .f-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.filters .f-head h2 { margin:0; font-size:1rem; letter-spacing:-.01em; text-transform:none; color:var(--fg); }
.filters #count { color:var(--muted); font-size:.9rem; }
.filters .grid { grid-template-columns:repeat(5, minmax(0,1fr)); }
.filters .field.wide { grid-column:span 2; }
.more > summary { display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none; padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg); font-size:.88rem; font-weight:600; color:var(--accent); user-select:none; }
.more > summary::-webkit-details-marker { display:none; }
.more > summary::before { content:"+"; font-weight:800; }
.more[open] > summary::before { content:"\2212"; }
.more .grid { margin-top:12px; }
.more .cols { margin-top:12px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips:empty { display:none; }
.fchip { padding:5px 12px; border-radius:999px; border:1px solid var(--accent); background:transparent; color:var(--accent); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; }
.filters .fchip:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
:root[data-theme="dark"] .filters .fchip:hover { color:#0b1020; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .filters .fchip:hover { color:#0b1020; } }
.filters .foot { display:none; }

/* Table */
@media (min-width:1181px) { .tablewrap { overflow:visible; } }
th { top:var(--topbar-h); z-index:5; }
tbody tr { transition:background .1s ease; }
#t tbody tr:hover { background:var(--head); }
.ppt { display:inline-block; padding:2px 9px; border-radius:999px; font-weight:700; font-variant-numeric:tabular-nums; }
.ppt.tier-great { background:var(--good-bg); color:var(--good); }
.ppt.tier-high { color:var(--muted); font-weight:500; }
.muted { color:var(--muted); }
.thumb { width:56px; height:56px; }
td.title a { color:var(--fg); }
td.title a:hover { color:var(--accent); text-decoration:underline; }
td.c-buy { text-align:right; white-space:nowrap; vertical-align:middle; }
th.c-buy-h { width:1%; }

/* Footer + back to top */
footer.site-foot { max-width:none; margin:48px 0 0; padding:0; background:var(--head); border-top:1px solid var(--line); color:var(--muted); }
.foot-in { max-width:1200px; margin:0 auto; padding:24px 16px 32px; display:flex; gap:24px; align-items:flex-start; }
.foot-in p { margin:0; max-width:80ch; font-size:.85rem; line-height:1.6; }
#totop { position:fixed; right:16px; bottom:16px; z-index:40; width:44px; height:44px; border-radius:50%; border:0; background:var(--accent); color:#fff; font-size:1.2rem; font-weight:800; cursor:pointer; box-shadow:var(--shadow); }
:root[data-theme="dark"] #totop { color:#0b1020; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #totop { color:#0b1020; } }
#totop[hidden] { display:none; }

@media (max-width:900px) { .quick { display:none; } }
@media (max-width:1000px) {
  .filters .grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #t td.c-buy { grid-column:1 / -1; order:99; text-align:left; }
  #t td.c-buy::before { display:none; }
  #t td.c-buy .btn-sm { width:100%; justify-content:center; padding:11px 14px; font-size:.95rem; border-radius:12px; }
  #t td.c-ppt { overflow:visible; }
}
@media (max-width:760px) {
  details.mega { position:static; }
  .mega-panel { position:fixed; left:12px; right:12px; top:calc(var(--topbar-h) + 6px); width:auto; max-height:75vh; grid-template-columns:minmax(0,1fr); }
  .foot-in { flex-direction:column; gap:14px; }
}
@media (max-width:480px) { .topbar .site span { display:none; } }
.filters .f-right { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.filters #clear { padding:5px 12px; font-size:.82rem; }
@media (max-width:760px) {
  .hero { padding:18px 16px; }
  .hero-art { max-height:120px; }
  .hero .blurb { font-size:.95rem; line-height:1.55; margin:10px 0 16px; }
  .tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tiles b { font-size:1.25rem; }
  .filters .f-head { flex-wrap:wrap; }
  .filters .f-head h2 { white-space:nowrap; }
  .filters #clear { white-space:nowrap; }
}
.hero-main > h1:first-child { margin-top:0; }

/* Single-column deal cards. */
.pick { grid-template-columns:minmax(0,1fr); }

/* ---- Charts (inline SVG; colours follow the theme through CSS variables) ---- */
.charts { margin:34px 0 0; }
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:16px; }
.chart-card { padding:18px 18px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow); min-width:0; }
.chart-card.wide { grid-column:1 / -1; }
.chart-card h3 { margin:0 0 12px; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.chart-scroll { overflow-x:auto; }
svg.chart { display:block; width:100%; height:auto; min-width:440px; font-family:inherit; }
.chart-card.wide svg.chart { min-width:620px; }
svg.chart text { font-size:12px; fill:var(--fg); }
.ch-tick { fill:var(--muted) !important; font-size:11px !important; }
.ch-label { font-weight:600; }
.ch-label.ch-on { fill:var(--accent); font-weight:800; }
.ch-val { font-weight:700; font-size:12px; }
.ch-grid { stroke:var(--line); stroke-width:1; }
.ch-bar { fill:var(--accent); opacity:.85; }
.ch-bar-on { opacity:1; }
.ch-min { stroke:var(--gold); stroke-width:3; stroke-linecap:round; }
.ch-whisker { stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.ch-box { opacity:.85; }
.ch-median { stroke:var(--fg); stroke-width:2.5; stroke-linecap:round; }
.ch-zone { fill:var(--good-bg); }
text.ch-zone-label { fill:var(--good) !important; font-size:11px !important; font-weight:700; }
.vm a { cursor:pointer; }
.vm circle { opacity:.72; stroke:var(--bg); stroke-width:1; transition:opacity .1s ease, r .1s ease; }
.vm a:hover circle, .vm a:focus circle { opacity:1; r:6.5; stroke:var(--fg); stroke-width:1.5; }
.ch-line { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ch-dash { stroke-dasharray:5 5; }
.ch-legend { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.8rem; color:var(--muted); }
.ch-legend li { display:inline-flex; align-items:center; gap:6px; }
.ch-legend span { display:inline-block; width:10px; height:10px; border-radius:50%; }
.ch-legend .bar { width:16px; height:8px; border-radius:3px; background:var(--accent); }
.ch-legend .tick { width:3px; height:12px; border-radius:2px; background:var(--gold); }
.ch-legend .box { width:16px; height:10px; border-radius:3px; background:var(--accent); opacity:.85; }
.ch-legend .whisk { width:16px; height:2px; border-radius:1px; background:var(--muted); }
.ch-legend .med { width:3px; height:12px; border-radius:2px; background:var(--fg); }
.ch-caption { margin:12px 0 0; font-size:.88rem; line-height:1.55; color:var(--muted); }
.ch-caption a { color:var(--accent); }
.ch-tip { position:fixed; z-index:80; max-width:300px; padding:10px 12px; border-radius:12px; background:var(--fg); color:var(--bg); font-size:.8rem; line-height:1.4; box-shadow:0 10px 30px rgba(0,0,0,.3); pointer-events:none; }
.ch-tip[hidden] { display:none; }
.ch-tip strong { display:block; margin-bottom:3px; }
.ch-tip em { display:block; margin-top:4px; opacity:.75; font-style:normal; }
@media (max-width:480px) { .chart-card { padding:14px 12px; } }
/* Phones: bar-style charts shrink to fit; the scatter keeps a readable minimum width and scrolls sideways. */
.chart-card:not(.wide) svg.chart { min-width:0; }
.chart-card.wide h3::after { content:" \00b7  swipe sideways"; display:none; text-transform:none; letter-spacing:0; font-weight:500; }
@media (max-width:760px) { .chart-card.wide h3::after { display:inline; } }

/* interactive charts */
.ch-legend .lg { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--fg); font:inherit; font-size:.8rem; cursor:pointer; transition:opacity .12s ease, border-color .12s ease; }
.ch-legend .lg:hover { border-color:var(--accent); }
.ch-legend .lg[aria-pressed="false"] { opacity:.45; text-decoration:line-through; }
.lg-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:8px; font-size:.78rem; color:var(--muted); }
.lg-reset { padding:2px 10px; border:1px solid var(--line); border-radius:999px; background:var(--head); color:var(--accent); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.is-off { display:none; }
.ch-hit { fill:transparent; }
.ch-hit:hover { fill:var(--accent); fill-opacity:.08; }
.ch-click { cursor:pointer; }
rect.ch-bar.ch-click:hover { opacity:1; stroke:var(--fg); stroke-width:1.5; }
.ch-pt { stroke:var(--bg); stroke-width:1.5; transition:r .1s ease; }
.ch-pt:hover { r:7; stroke:var(--fg); }

/* site theme */
:root{--accent:#0f766e;--accent2:#0ea5e9;--g1:#0f766e;--g2:#115e59;--g3:#042f2e;--glow:14,165,233;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:#5eead4;}}
:root[data-theme="dark"]{--accent:#5eead4;}