/* =========================================================================
   BTC 5M Polymarket Strategy Discovery — Light Professional Theme
   - White background, soft gray sections, dark readable text
   - Color used only as accents (green=robust, amber=fragile, red=risk,
     blue=information, purple=ranking)
   - Mobile-first: cards stack on small screens, tables horizontal scroll,
     nav wraps cleanly, no overlap
   ========================================================================= */

:root{
  /* surfaces */
  --bg:#ffffff;
  --bg-soft:#fafbfc;
  --bg-tint:#f4f6f9;
  --line:#eef0f4;
  --line-strong:#d6dbe3;

  /* text */
  --text:#0f1729;
  --text-soft:#3a4358;
  --muted:#6b7280;
  --dim:#9ca3af;

  /* accents (used sparingly) */
  --green:#15803d;        --green-2:#22c55e;
  --green-bg:#f0fdf4;     --green-line:#bbf7d0;
  --orange:#c2410c;       --orange-2:#fb923c;
  --orange-bg:#fff7ed;    --orange-line:#fed7aa;
  --red:#b91c1c;          --red-2:#ef4444;
  --red-bg:#fef2f2;       --red-line:#fecaca;
  --blue:#1d4ed8;         --blue-2:#3b82f6;
  --blue-bg:#eff6ff;      --blue-line:#bfdbfe;
  --purple:#6d28d9;       --purple-2:#8b5cf6;
  --purple-bg:#f5f3ff;    --purple-line:#ddd6fe;

  /* shadows */
  --sh-1:0 1px 2px rgba(15,23,42,0.04);
  --sh-2:0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
  --sh-3:0 4px 12px -2px rgba(15,23,42,0.07), 0 2px 4px -1px rgba(15,23,42,0.03);

  /* radii */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:16px;
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Inter','SF Pro Text','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
strong,b{color:var(--text);font-weight:600}

code{background:var(--bg-tint);padding:2px 6px;border-radius:5px;color:#374151;
  font-family:'JetBrains Mono','SF Mono','Consolas',monospace;font-size:0.88em;
  border:1px solid var(--line)}

h1{font-size:30px;margin:0 0 8px;color:var(--text);letter-spacing:-0.02em;
  font-weight:700;line-height:1.2}
h2{font-size:21px;margin:48px 0 16px;color:var(--text);font-weight:600;
  letter-spacing:-0.01em;padding-bottom:12px;border-bottom:1px solid var(--line)}
h3{font-size:15px;margin:24px 0 10px;color:var(--text);font-weight:600;
  letter-spacing:-0.005em}
p{margin:8px 0 14px;color:var(--text-soft)}

img,svg{max-width:100%;display:block}

/* ---------------- top navigation ---------------- */
nav.topnav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  padding:12px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
nav.topnav .brand{
  font-weight:700;color:var(--text);font-size:14px;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:9px;flex-shrink:0}
nav.topnav .brand .pill{
  background:var(--green);color:#fff;padding:3px 8px;border-radius:5px;
  font-size:10.5px;font-weight:700;letter-spacing:0.6px}
nav.topnav .links{
  display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
nav.topnav .links::-webkit-scrollbar{display:none}
nav.topnav .links a{
  color:var(--muted);font-weight:500;padding:4px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .15s ease,border-color .15s ease}
nav.topnav .links a.active{color:var(--text);border-bottom-color:var(--blue)}
nav.topnav .links a:hover{color:var(--text);text-decoration:none}

/* ---------------- layout ---------------- */
.wrap{max-width:1240px;margin:0 auto;padding:32px 28px 96px}
.lead{font-size:15px;color:var(--text-soft);max-width:760px;line-height:1.65}

/* ---------------- hero ---------------- */
.hero{
  background:linear-gradient(180deg,#fbfbfd 0%,#ffffff 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px 34px 30px;margin-top:6px;box-shadow:var(--sh-2);
  position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--green) 0%,var(--blue) 50%,var(--purple) 100%);
  opacity:.85}
.hero h1{font-size:30px;margin:0 0 10px;line-height:1.18}
.hero p{color:var(--text-soft);font-size:14.5px;max-width:880px;line-height:1.65;margin:0}
.hero .tagline{
  display:inline-block;color:var(--green);font-weight:600;letter-spacing:0.6px;
  text-transform:uppercase;font-size:10.5px;margin-bottom:12px;
  background:var(--green-bg);padding:5px 11px;border-radius:999px;
  border:1px solid var(--green-line)}

/* ---------------- stat cards ---------------- */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin:18px 0 6px}
.stat-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 20px;position:relative;overflow:hidden;
  box-shadow:var(--sh-1);transition:box-shadow .15s ease,transform .15s ease}
.stat-card:hover{box-shadow:var(--sh-3);transform:translateY(-1px)}
.stat-card .label{
  font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.8px;font-weight:600}
.stat-card .value{
  font-size:28px;font-weight:700;color:var(--text);margin-top:6px;
  line-height:1.1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.stat-card .sub{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.5}
.stat-card.green{border-top:3px solid var(--green)}
.stat-card.green .value{color:var(--green)}
.stat-card.orange{border-top:3px solid var(--orange)}
.stat-card.orange .value{color:var(--orange)}
.stat-card.red{border-top:3px solid var(--red)}
.stat-card.red .value{color:var(--red)}
.stat-card.blue{border-top:3px solid var(--blue)}
.stat-card.blue .value{color:var(--blue)}
.stat-card.purple{border-top:3px solid var(--purple)}
.stat-card.purple .value{color:var(--purple)}

/* ---------------- badges ---------------- */
.badge{
  display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;
  font-weight:600;letter-spacing:0.25px;vertical-align:middle;line-height:1.55;
  white-space:nowrap}
.badge.green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-line)}
.badge.orange{background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-line)}
.badge.red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}
.badge.blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-line)}
.badge.purple{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-line)}
.badge.gray{background:var(--bg-tint);color:var(--text-soft);border:1px solid var(--line)}

/* ---------------- strategy cards ---------------- */
.cards{display:grid;grid-template-columns:1fr;gap:20px;margin-top:6px}
@media (min-width:900px){
  .cards{grid-template-columns:repeat(auto-fill,minmax(460px,1fr))}
}
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 24px 22px;box-shadow:var(--sh-2);
  transition:box-shadow .15s ease,border-color .15s ease}
.card:hover{box-shadow:var(--sh-3);border-color:var(--line-strong)}
.card .head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card .head > div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.card .id{
  font-family:'JetBrains Mono','SF Mono',monospace;color:var(--text-soft);
  font-size:11.5px;background:var(--bg-tint);padding:3px 8px;border-radius:5px;
  border:1px solid var(--line);font-weight:500;word-break:break-all}
.card .title{
  font-size:15px;font-weight:600;color:var(--text);margin:8px 0 4px;
  letter-spacing:-0.01em;word-break:break-word}
.card .rule{
  color:var(--text-soft);font-size:13px;background:var(--bg-soft);
  border:1px solid var(--line);border-left:3px solid var(--blue);
  padding:11px 14px;border-radius:8px;margin:12px 0 16px;line-height:1.6}

/* spec grid */
.spec-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px 14px;margin-top:6px}
.spec-grid .spec{
  font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.4px;font-weight:600;line-height:1.4}
.spec-grid .spec b{
  display:block;color:var(--text);font-weight:700;font-size:14px;
  margin-bottom:2px;text-transform:none;letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums}
.spec-grid .spec.good b{color:var(--green)}
.spec-grid .spec.warn b{color:var(--orange)}
.spec-grid .spec.bad  b{color:var(--red)}
.spec-grid .spec.purple b{color:var(--purple)}

/* note blocks (Why good / Risk / Watch / Bot rules / Exact PnL) */
.note{
  margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);
  font-size:13.5px;line-height:1.6;background:var(--bg-soft);
  border:1px solid var(--line);color:var(--text-soft);
  border-left:3px solid var(--line-strong)}
.note b{color:var(--text);letter-spacing:-0.005em}
.note.good{background:var(--green-bg);border-color:var(--green-line);border-left-color:var(--green)}
.note.good b{color:var(--green)}
.note.warn{background:var(--orange-bg);border-color:var(--orange-line);border-left-color:var(--orange)}
.note.warn b{color:var(--orange)}
.note.bad{background:var(--red-bg);border-color:var(--red-line);border-left-color:var(--red)}
.note.bad b{color:var(--red)}
.note.info{background:var(--blue-bg);border-color:var(--blue-line);border-left-color:var(--blue)}
.note.info b{color:var(--blue)}

/* rank chips inside cards */
.ranks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rank-chip{
  font-size:10.5px;padding:3px 8px;border-radius:5px;background:var(--purple-bg);
  color:var(--purple);border:1px solid var(--purple-line);
  font-weight:600;letter-spacing:0.2px;line-height:1.5}

/* ---------------- tables ---------------- */
.tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg);margin-top:14px;box-shadow:var(--sh-1)}
table.data{
  width:100%;border-collapse:collapse;font-size:12.5px;
  min-width:1100px;background:var(--bg)}
table.data thead th{
  position:sticky;top:0;background:var(--bg-soft);color:var(--text);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:0.5px;cursor:pointer;user-select:none;white-space:nowrap;z-index:5}
table.data thead th:hover{background:var(--bg-tint);color:var(--blue)}
table.data thead th.sorted-asc::after{content:" \2191";color:var(--blue)}
table.data thead th.sorted-desc::after{content:" \2193";color:var(--blue)}
table.data tbody td{
  padding:10px 14px;border-bottom:1px solid var(--line);color:var(--text-soft);
  white-space:nowrap;font-variant-numeric:tabular-nums}
table.data tbody tr:hover{background:var(--bg-soft)}
table.data tbody tr.robust td:first-child{box-shadow:inset 3px 0 0 var(--green)}
table.data tbody tr.fragile td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
table.data tbody tr.fragile2 td:first-child{box-shadow:inset 3px 0 0 var(--red)}

/* table controls */
.tablecontrols{
  display:flex;gap:10px;align-items:center;margin:14px 0;flex-wrap:wrap}
.tablecontrols input{
  background:var(--bg);color:var(--text);border:1px solid var(--line-strong);
  border-radius:8px;padding:9px 14px;font-size:14px;min-width:260px;
  font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease;
  flex:1 1 240px;max-width:380px}
.tablecontrols input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.tablecontrols .pillgrp{display:flex;gap:6px;flex-wrap:wrap}
.tablecontrols .pillbtn{
  background:var(--bg);color:var(--text-soft);border:1px solid var(--line-strong);
  border-radius:999px;padding:7px 14px;font-size:12px;cursor:pointer;
  font-weight:600;transition:all .15s ease;font-family:inherit;line-height:1.4}
.tablecontrols .pillbtn:hover{background:var(--bg-tint)}
.tablecontrols .pillbtn.active{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-line)}
.tablecontrols .pillbtn.green.active{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.tablecontrols .pillbtn.orange.active{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-line)}

/* ---------------- key/value explainer ---------------- */
.kv{
  display:grid;grid-template-columns:minmax(180px,220px) 1fr;
  gap:14px 24px;margin:14px 0 22px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;box-shadow:var(--sh-1)}
.kv .k{color:var(--blue);font-weight:600;font-size:13.5px;line-height:1.5}
.kv .v{color:var(--text-soft);font-size:13.5px;line-height:1.65}
.kv .k.green{color:var(--green)}
.kv .k.orange{color:var(--orange)}
.kv .k.red{color:var(--red)}
.kv .k.purple{color:var(--purple)}

/* ---------------- callout banners ---------------- */
.callout{
  background:var(--blue-bg);border:1px solid var(--blue-line);
  border-left:3px solid var(--blue);border-radius:var(--r-md);
  padding:14px 18px;color:var(--text-soft);margin:14px 0;
  font-size:14px;line-height:1.65}
.callout b{color:var(--blue);font-weight:600}
.callout.green{background:var(--green-bg);border-color:var(--green-line);border-left-color:var(--green)}
.callout.green b{color:var(--green)}
.callout.orange{background:var(--orange-bg);border-color:var(--orange-line);border-left-color:var(--orange)}
.callout.orange b{color:var(--orange)}
.callout.red{background:var(--red-bg);border-color:var(--red-line);border-left-color:var(--red)}
.callout.red b{color:var(--red)}

/* ---------------- summary comparison tables ---------------- */
.summary-wrap{margin-top:8px}
table.data.summary{min-width:1280px}
table.data.summary td .cellTitle{
  font-weight:600;color:var(--text);font-size:12.5px;line-height:1.3;white-space:nowrap}
table.data.summary td .cellSub{
  font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3;white-space:nowrap}
table.data.summary td.ruleCell{
  white-space:normal;max-width:340px;font-size:12px;color:var(--text-soft);line-height:1.5}
/* sticky first column on the summary tables */
table.data.summary thead th:first-child,
table.data.summary tbody td:first-child{
  position:sticky;left:0;background:var(--bg);
  box-shadow:1px 0 0 var(--line);z-index:3;
  text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
table.data.summary thead th:first-child{background:var(--bg-soft);z-index:6}
/* second column too (combined name) — sticky on wider mobiles */
@media (min-width:480px){
  table.data.summary thead th:nth-child(2),
  table.data.summary tbody td:nth-child(2){
    position:sticky;left:48px;background:var(--bg);
    box-shadow:1px 0 0 var(--line);z-index:2}
  table.data.summary thead th:nth-child(2){background:var(--bg-soft);z-index:5}
}

/* ---------------- common-values callout ---------------- */
.callout.common-box{padding:16px 18px 14px;background:#fbfcfe;border-color:var(--line);border-left-color:var(--blue)}
.common-box .common-title{font-size:13.5px;color:var(--text-soft);margin-bottom:10px;line-height:1.6}
.common-box .common-title b{color:var(--blue)}
.common-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:6px 16px}
.common-grid .cv-k{
  color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;
  font-weight:600;padding-top:6px}
.common-grid .cv-v{
  color:var(--text);font-size:13.5px;font-weight:600;line-height:1.5;
  padding-bottom:6px;border-bottom:1px dashed var(--line)}

/* ---------------- collapsible detail cards (<details>) ---------------- */
.cards.stacked{grid-template-columns:1fr}
.detail-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow .15s ease,border-color .15s ease}
.detail-card[open]{box-shadow:var(--sh-2);border-color:var(--line-strong)}
.detail-card summary{
  cursor:pointer;padding:16px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;list-style:none;
  user-select:none;transition:background .12s ease}
.detail-card summary::-webkit-details-marker{display:none}
.detail-card summary:hover{background:var(--bg-soft)}
.detail-card[open] summary{border-bottom:1px solid var(--line);background:var(--bg-soft)}
.detail-card .sumLeft{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.detail-card .sumRight{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1;justify-content:flex-end;min-width:0}
.detail-card .sumTitle{
  color:var(--text);font-size:13.5px;font-weight:600;letter-spacing:-0.005em;
  text-align:right;word-break:break-word;line-height:1.4}
.detail-card .caret{
  color:var(--muted);font-size:14px;transition:transform .15s ease;
  display:inline-block;width:14px;text-align:center}
.detail-card[open] .caret{transform:rotate(180deg)}
.detail-card .detailBody{padding:18px 22px 20px;background:var(--bg)}
.detail-card .detailBody .rule{
  color:var(--text-soft);font-size:13px;background:var(--bg-soft);
  border:1px solid var(--line);border-left:3px solid var(--blue);
  padding:11px 14px;border-radius:8px;margin:0 0 14px;line-height:1.6}

/* mobile tweaks for tables & details */
@media (max-width:680px){
  table.data.summary{min-width:1180px}
  table.data.summary td.ruleCell{max-width:240px}
  .common-grid{grid-template-columns:1fr;gap:0}
  .common-grid .cv-k{padding-top:10px;border-top:1px dashed var(--line)}
  .common-grid .cv-k:first-child{border-top:none;padding-top:0}
  .common-grid .cv-v{padding-bottom:8px;border-bottom:none}
  .detail-card summary{padding:13px 14px;gap:8px}
  .detail-card .sumTitle{font-size:12.5px;text-align:left;flex:1 1 100%}
  .detail-card .sumRight{justify-content:flex-start}
  .detail-card .detailBody{padding:14px 14px 16px}
}

/* ---------------- footer ---------------- */
footer{
  color:var(--muted);font-size:12px;text-align:center;
  margin-top:64px;padding:24px 0 0;border-top:1px solid var(--line)}

/* ---------------- bar charts ---------------- */
.bars{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0 16px}
.bar{display:grid;grid-template-columns:240px 1fr 80px;gap:14px;
  align-items:center;font-size:13px}
.bar .barlabel{color:var(--text-soft);font-size:13px}
.bar .bartrack{
  height:12px;background:var(--bg-tint);border-radius:6px;
  border:1px solid var(--line);overflow:hidden;position:relative}
.bar .barfill{
  height:100%;border-radius:6px 0 0 6px;
  background:linear-gradient(90deg,var(--blue-2),var(--purple-2))}
.bar .barfill.green{background:linear-gradient(90deg,var(--green),var(--green-2))}
.bar .barfill.orange{background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.bar .barfill.red{background:linear-gradient(90deg,var(--red),var(--red-2))}
.bar .barvalue{
  color:var(--text-soft);font-variant-numeric:tabular-nums;
  text-align:right;font-size:13px;font-weight:600}

/* ============================================================
   RESPONSIVE OVERRIDES — tablet + mobile + ultra-small
   ============================================================ */

@media (max-width:980px){
  .wrap{padding:24px 20px 80px}
  .hero{padding:26px 22px 22px}
  .hero h1{font-size:26px}
  h2{font-size:19px;margin:36px 0 12px}
  .kv{padding:18px 18px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .stat-card .value{font-size:25px}
}

@media (max-width:680px){
  body{font-size:14.5px}
  .wrap{padding:18px 14px 80px}

  nav.topnav{padding:10px 14px;gap:12px}
  nav.topnav .brand{font-size:13px}
  nav.topnav .links{font-size:13px;gap:14px;width:100%;padding-bottom:2px}

  .hero{padding:22px 18px 18px;border-radius:var(--r-lg)}
  .hero h1{font-size:22px;line-height:1.22}
  .hero p{font-size:13.5px}
  .hero .tagline{font-size:10px;padding:4px 9px}

  h2{font-size:17px;margin:32px 0 10px;padding-bottom:8px}
  h3{font-size:14px;margin:20px 0 8px}

  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{padding:14px 14px}
  .stat-card .value{font-size:22px}
  .stat-card .label{font-size:9.5px}
  .stat-card .sub{font-size:11px}

  .cards{gap:16px}
  .card{padding:18px 16px 16px;border-radius:var(--r-md)}
  .card .head{gap:8px}
  .card .id{font-size:10.5px;padding:2px 6px}
  .card .title{font-size:14px}
  .card .rule{font-size:12.5px;padding:10px 12px;line-height:1.55}

  .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .spec-grid .spec{font-size:9.5px}
  .spec-grid .spec b{font-size:13px}

  .note{padding:11px 13px;font-size:12.5px;border-radius:7px}
  .ranks{gap:5px}
  .rank-chip{font-size:9.5px;padding:2px 7px}

  /* tables: native horizontal scroll, smaller text */
  .tablewrap{border-radius:var(--r-sm)}
  table.data{font-size:11.5px;min-width:1000px}
  table.data thead th{font-size:10px;padding:9px 11px}
  table.data tbody td{padding:8px 11px}

  .tablecontrols input{font-size:13px;padding:8px 12px;min-width:0;width:100%;max-width:none}
  .tablecontrols .pillbtn{font-size:11.5px;padding:6px 12px}

  .kv{grid-template-columns:1fr;gap:4px 0;padding:14px 14px}
  .kv .k{font-size:12.5px;color:var(--text);margin-top:12px;font-weight:700}
  .kv .k:first-child{margin-top:0}
  .kv .v{font-size:13px;line-height:1.6;margin-bottom:6px}

  .callout{padding:12px 14px;font-size:13px;border-radius:8px}

  .bars .bar{grid-template-columns:1fr 60px;gap:6px 10px;font-size:11.5px;row-gap:4px}
  .bars .bar .barlabel{grid-column:1 / span 2;color:var(--text)}
  .bars .bar .bartrack{grid-column:1;height:10px}
  .bars .bar .barvalue{grid-column:2;align-self:center;font-size:12px}
}

@media (max-width:380px){
  .stat-grid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
}

/* Print */
@media print{
  body{background:#fff;color:#000}
  nav.topnav{position:static;border-bottom:1px solid #ccc;background:#fff}
  .card,.stat-card,.kv,.tablewrap{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .hero{box-shadow:none}
  .cards{grid-template-columns:1fr 1fr;gap:12px}
}