:root {
  --bg: #f4f6f8; --surface: #ffffff; --fg: #17202b; --muted: #5d6b7a; --line: #e3e7ec; --accent: #2f5bd3;
  --buy: #178a4c; --buy-bg: #e3f4ea; --ok: #a86d00; --ok-bg: #fcf1d6; --wait: #c4332f; --wait-bg: #fbe5e3;
  --pieces: #1f6f9c; --pieces-bg: #e2f0f8;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0f141a; --surface: #171e26; --fg: #e8edf2; --muted: #95a3b2; --line: #26303a; --accent: #7ea2ff;
  --buy: #4cc47f; --buy-bg: #133224; --ok: #f0b43c; --ok-bg: #372b10; --wait: #ff7a72; --wait-bg: #3c1a19;
  --pieces: #6cb8e6; --pieces-bg: #12283a; color-scheme: dark } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; display: grid; gap: 16px; }
nav.top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 4px; }
nav.top .brand { font-weight: 800; font-size: 1.1rem; color: var(--fg); text-decoration: none; margin-right: auto; }
nav.top a:not(.brand) { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
nav.top a[aria-current="page"] { color: var(--fg); }
h1 { font-size: 1.45rem; font-weight: 800; margin: 6px 0 0; }
.lede { color: var(--muted); margin: 4px 0 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card > h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; padding: 12px 14px 0; }
.pad { padding: 8px 14px 14px; }
.pad p { margin: 0.4em 0; }
.how { display: grid; gap: 8px; }
.rule { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; align-items: start; font-size: 0.92rem; }
.tag { display: inline-block; font-size: 0.74rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; text-align: center; }
.t-buy { color: var(--buy); background: var(--buy-bg); } .t-ok { color: var(--ok); background: var(--ok-bg); }
.t-wait { color: var(--wait); background: var(--wait-bg); } .t-pieces { color: var(--pieces); background: var(--pieces-bg); }
.note { font-size: 0.85rem; color: var(--muted); }
.chartbox { height: 440px; }
.tape { min-height: 46px; }
.group-h { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 12px 14px 4px; border-top: 1px solid var(--line); }
.group-h:first-child { border-top: 0; }
details.row { border-top: 1px solid var(--line); }
details.row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 0.8rem;
  grid-template-areas: "tk badges chev"; align-items: center; gap: 4px 10px; padding: 8px 12px 8px 14px; min-height: 44px; }
.tk { grid-area: tk; display: flex; align-items: baseline; gap: 8px; min-width: 0; font-weight: 800; }
.tk small { font-weight: 400; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badges { grid-area: badges; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.chev { grid-area: chev; }
.badges { flex-wrap: nowrap; }
.badges .tag { font-size: 0.7rem; padding: 3px 8px; }
@media (max-width: 480px) { .tk small { font-size: 0.78rem; } details.row > summary { gap: 4px 6px; padding-left: 12px; } }

.t-trend { color: var(--muted); background: transparent; border: 1px solid var(--line); font-weight: 600; }
.asof { font-size: 0.8rem; color: var(--muted); padding: 2px 14px 8px; }
details.row > summary::-webkit-details-marker { display: none; }
details.row[open] > summary { background: color-mix(in srgb, var(--accent) 10%, transparent); }
details.row > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mini { height: 150px; min-width: 0; pointer-events: none; }
.chev::after { content: "›"; color: var(--muted); display: inline-block; transition: transform .15s; }
details[open] .chev::after { transform: rotate(90deg); }
.big { height: 440px; border-top: 1px solid var(--line); }
.rowlinks { padding: 8px 14px 12px; font-size: 0.9rem; display: flex; gap: 16px; flex-wrap: wrap; }
.widget { height: 420px; }
.widget.short { height: 330px; }
.info { min-height: 170px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }
.kv .lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kv .val { font-family: var(--font-num); font-size: 1.02rem; }
.grades { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 0.92rem; }
.grades .g { font-family: var(--font-num); font-weight: 700; }
ul.tight { margin: 0.3em 0; padding-left: 1.2em; }
footer { color: var(--muted); font-size: 0.85rem; display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
footer .attr { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .chev::after { transition: none; } }
@media (max-width: 480px) { .rule { grid-template-columns: 6.6rem 1fr; } .chartbox, .big, .widget { height: 380px; } }
/* TradingView iframes: match the embedded page's color-scheme so the browser doesn't paint an opaque white
   backdrop behind transparent dark-theme widgets (that caused light-gray text on white). */
.tradingview-widget-container iframe { color-scheme: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#sub { margin-top: -4px; }
[lang="th"] { font-family: "IBM Plex Sans Thai", var(--font-ui); }
.brand-th { font-weight: 600; font-size: 0.85em; color: var(--muted); margin-left: 4px; }
.eyebrow { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.eyebrow [lang="th"] { color: var(--fg); font-weight: 600; font-size: 1.05rem; }
.t-verdict { min-width: 5.6rem; text-align: center; }
.t-none { visibility: hidden; }
nav.top .brand { display: grid; line-height: 1.15; }
.brand-tag { font-size: 0.72rem; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
@media (max-width: 420px) { .brand-th { font-size: 0.8em; } nav.top { gap: 12px; } nav.top a:not(.brand) { font-size: 0.82rem; } }