body{margin:0}[hidden]{display:none!important}img{max-width:100%}
/* Layout: a "rate board" strip of live numbers on top, then one working view per tab — tables are the product, cards only for top picks */
:root {
  --bg: #f2f5f4; --surface: #ffffff; --ink: #13211c; --muted: #5a6a65; --line: #d9e2df;
  --accent: #0d6b59; --accent-soft: #e0efeb; --gold: #8f6300; --up: #1d8049; --down: #bf3b28; --warn: #9a5a00;
  --font-display: "Noto Serif Thai", "Sarabun", Georgia, serif;
  --font-body: "IBM Plex Sans Thai", "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0c1412; --surface: #13201c; --ink: #e2ebe8; --muted: #93a5a0; --line: #243530;
  --accent: #52c4a7; --accent-soft: #173a31; --gold: #e1b448; --up: #4cc27d; --down: #f0785f; --warn: #e3a54a; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0c1412; --surface: #13201c; --ink: #e2ebe8; --muted: #93a5a0; --line: #243530;
  --accent: #52c4a7; --accent-soft: #173a31; --gold: #e1b448; --up: #4cc27d; --down: #f0785f; --warn: #e3a54a; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1120px; margin: 0 auto; padding-block: 20px 48px; display: grid; gap: 22px }
a { color: var(--accent) }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.3; text-wrap: balance; margin: 0 }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em }
.muted { color: var(--muted) }
.small { font-size: 13px }

/* masthead */
.mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px }
.brand { display: flex; align-items: baseline; gap: 10px }
.brand h1 { font-size: 28px; letter-spacing: -0.01em }
.brand h1 span { color: var(--accent) }
.tag { font-size: 13px; color: var(--muted) }
.proto { font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted) }

/* rate board */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.board > div { padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; margin: 0 -1px -1px 0 }
.board .lbl { font-size: 12px; color: var(--muted); letter-spacing: 0.02em }
.board .val { font-family: var(--font-num); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums }
.board .sub { font-size: 12px; color: var(--muted) }
.board .goldv { color: var(--gold) }
@media (max-width: 560px) { .board { grid-template-columns: 1fr 1fr } .board > div:last-child:nth-child(odd) { grid-column: 1 / -1 } }

/* tabs */
nav.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin }
nav.tabs button { font: inherit; font-weight: 500; background: none; border: 0; padding: 10px 14px; color: var(--muted);
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap }
nav.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent) }
nav.tabs button:hover { color: var(--ink) }

section.view { display: grid; gap: 18px }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px }
.head h2 { font-size: 22px }
.head p { margin: 4px 0 0; color: var(--muted); max-width: 70ch }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.chip { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 5px 12px; border-radius: 999px; cursor: pointer }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface) }
label.field { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted) }
input[type="number"], select { font: inherit; font-family: var(--font-num); font-size: 14px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--ink); width: 9.5em }
select { font-family: var(--font-body); width: auto }

/* tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface) }
table { border-collapse: collapse; width: 100%; font-size: 14px }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; background: var(--surface); position: sticky; top: 0 }
tr:last-child td { border-bottom: 0 }
td.r, th.r { text-align: right }
td.r { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap }
td .prov { font-weight: 600 }
td .prod { color: var(--muted); font-size: 13px }
td .note { color: var(--muted); font-size: 12.5px; max-width: 42ch }
tr.dim td { opacity: 0.55 }
.best td:first-child { box-shadow: inset 3px 0 0 var(--accent) }
.rank { font-family: var(--font-num); color: var(--muted); width: 2.5em }
.big { font-weight: 600; color: var(--accent) }

.badge { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap }
.badge.high { color: var(--up); border-color: currentColor }
.badge.medium { color: var(--warn); border-color: currentColor }
.badge.low { color: var(--down); border-color: currentColor }
.badge.exp { color: var(--down); border-color: currentColor }
.badge.api { color: var(--accent); border-color: currentColor }

/* picks */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.pick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 4px; align-content: start }
.pick .k { font-size: 12px; color: var(--muted) }
.pick .v { font-family: var(--font-num); font-size: 26px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums }
.pick .w { font-weight: 600 }
.pick .d { font-size: 13px; color: var(--muted) }
.pick button { justify-self: start; font: inherit; font-size: 13px; background: none; border: 0; color: var(--accent); padding: 0; cursor: pointer }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start }
@media (max-width: 820px) { .grid2 { grid-template-columns: minmax(0, 1fr) } }

/* chart */
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 6px; min-width: 0; align-content: start }
.chart svg { width: 100%; height: auto; display: block }
.chart .axis { fill: var(--muted); font-family: var(--font-num); font-size: 11px }
.chart .grid { stroke: var(--line); stroke-width: 1 }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2 }
.chart .area { fill: var(--gold); opacity: 0.12 }
.chart .dot { fill: var(--gold) }

/* news */
.newslist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px }
.story { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 6px; align-content: start; cursor: pointer; text-align: left; font: inherit; color: inherit }
.story:hover { border-color: var(--accent) }
.story .cat { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.02em }
.story h3 { font-size: 17px }
.story p { margin: 0; font-size: 14px; color: var(--muted) }
article.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px clamp(16px, 4vw, 40px); max-width: 780px; width: 100%; justify-self: center; min-width: 0 }
article.post h1 { font-size: clamp(22px, 3.2vw, 30px); margin-bottom: 8px }
article.post h2 { font-size: 19px; margin: 26px 0 8px }
article.post h3 { font-size: 16px; margin: 18px 0 6px }
article.post p, article.post li { max-width: 68ch }
article.post blockquote { margin: 18px 0; padding: 10px 14px; border-left: 3px solid var(--line); color: var(--muted); font-size: 14px }
article.post .tablewrap { margin: 12px 0 }
.back { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; justify-self: start }
.sources { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 24px; padding-top: 12px }
.sources ol { padding-left: 1.2em; margin: 6px 0 0 }

footer { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 6px }
@media (prefers-reduced-motion: no-preference) { .story, .chip { transition: border-color .15s, background-color .15s } }

/* helper mascot (น้องใส) */
.helper { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  display: flex; align-items: flex-end; gap: 8px; pointer-events: none }
.helper > * { pointer-events: auto }
.mascot { width: 100px; height: 97px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)) }
.mascot svg { width: 100%; height: 100%; display: block; overflow: visible }
.bubble { position: relative; max-width: min(300px, calc(100vw - 130px)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px;
  padding: 10px 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.10); margin-bottom: 40px }
.bubble .who { font-size: 12px; font-weight: 600; color: var(--accent) }
.bubble p { margin: 2px 0 6px }
.bubble .acts { display: flex; gap: 12px; justify-content: flex-end }
.bubble .acts button { font: inherit; font-size: 13px; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer }
.bubble .acts button.quiet { color: var(--muted) }
@media (prefers-reduced-motion: no-preference) { .bubble { animation: bubble-in .25s ease-out } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98) } to { opacity: 1; transform: none } }
@media (max-width: 560px) { .mascot { width: 70px; height: 68px } .bubble { margin-bottom: 30px; font-size: 13.5px } }
footer { padding-bottom: 90px }

/* dist: หน้าข่าว/รายการข่าวที่เป็น HTML ล้วน */
.brand a { color: inherit; text-decoration: none }
nav.tabs a { font-weight: 500; padding: 10px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap }
nav.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent) }
nav.tabs a:hover { color: var(--ink) }
a.story, a.back { text-decoration: none }
a.story h3 { color: var(--ink) }
.story[hidden] { display: none }
article.post { overflow-wrap: break-word }
article.post .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 10px; font-size: 13px; color: var(--accent); font-weight: 600 }
article.post .meta .badge { font-weight: 500 }
.badge.fc { color: var(--up); border-color: currentColor }
details.factcheck { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--muted) }
details.factcheck summary { cursor: pointer; color: var(--ink); font-weight: 600 }
details.factcheck ul { padding-left: 1.2em; margin: 8px 0 0 }
details.factcheck li { margin-bottom: 4px }
.related { display: grid; gap: 10px; max-width: 780px; width: 100%; justify-self: center }
.related h2 { font-size: 19px }