:root { --bg: #f7f9fc; --card: #fff; --fg: #0f1b2b; --mut: #5b6b7d; --line: #dfe5ee; --acc: #0b63ce; --bad: #c62828; --ok: #1b8a4b; --top: #0c1a2b; }
@media (prefers-color-scheme: dark) { :root { --bg: #0b1320; --card: #111c2d; --fg: #e7eef7; --mut: #9fb3c8; --line: #22324a; --acc: #5aa2ff; --bad: #ff6b6b; --ok: #4cd18a; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", Sarabun, sans-serif; }
a { color: var(--acc); }
.top { background: var(--top); color: #fff; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 16px; }
.top a { color: #fff; text-decoration: none; }
.brand { font-weight: 700; }
.top nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
main { max-width: 900px; margin: 0 auto; padding: 16px; }
h1 { font-size: 26px; line-height: 1.25; margin: 8px 0 4px; }
h2 { font-size: 19px; margin: 26px 0 8px; }
.upd, .m { color: var(--mut); font-size: 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.kpis div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.kpis b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.kpis span { color: var(--mut); font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--mut); font-weight: 600; font-size: 13px; }
td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn { display: inline-block; background: var(--acc); color: #fff; text-decoration: none; padding: 12px 18px; border-radius: 10px; font-weight: 600; }
.cta { margin: 24px 0 10px; }
.share { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--mut); font-size: 14px; margin: 8px 0 20px; }
.share a { font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
.warn { color: var(--bad); font-weight: 600; }
.dlist { columns: 2 220px; padding-left: 18px; }
.reports { list-style: none; padding: 0; }
.reports li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.reports .t, .reports .src { color: var(--mut); font-size: 13px; }
.reports img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; margin: 6px 0; background: #0b1220; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
summary { cursor: pointer; font-weight: 600; }
footer { max-width: 900px; margin: 0 auto; padding: 16px; font-size: 14px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { h1 { font-size: 22px; } table { font-size: 14px; } th, td { padding: 7px 8px; } }

.snippet { width: 100%; font: 13px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--card); color: var(--fg); }
body.embed { margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.embed main { flex: 1; overflow: hidden; }
body.embed main { padding: 12px; max-width: none; }
body.embed h1 { font-size: 17px; margin: 0; }
body.embed .kpis { grid-template-columns: repeat(3, 1fr); margin: 8px 0; }
body.embed .kpis b { font-size: 18px; }
body.embed ol { margin: 6px 0 8px 18px; padding: 0; font-size: 14px; }
.live { background: #dc2626; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 800; margin-right: 6px; }
/* Always-visible call to action at the bottom of the embed, whatever height the host site gives the iframe. */
.embed-cta { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 12px 12px; padding: 13px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #0b63ce, #1f8bff); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(11, 99, 206, .35); transition: transform .15s ease, box-shadow .15s ease; }
.embed-cta b { font-size: 20px; line-height: 1; transition: transform .15s ease; }
.embed-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11, 99, 206, .45); }
.embed-cta:hover b { transform: translateX(3px); }
.embed-cta:focus-visible { outline: 3px solid #ffd54f; outline-offset: 2px; }
.px { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }