:root {
  --ink: #082438; --ink-2: #31566a; --muted: #5b7585; --faint: #8aa1ad;
  --blue: #0877bb; --aqua: #11a8a2; --aqua-d: #0b8781; --lime: #d3f35d; --sun: #ff775c;
  --cream: #f8fbf8; --mist: #e8f5f4; --line: #dce9ea; --line-2: #eaf2f2; --card: #ffffff; --night: #0c2032; --night-2: #13304a;
  --good: #15946d; --good-bg: #e3f6ee; --warn: #c27a00; --warn-bg: #fff3dc; --bad: #d64545; --bad-bg: #fde8e8; --info-bg: #e6f2fb;
  --shadow: 0 1px 2px rgba(7, 42, 58, .05), 0 8px 24px rgba(7, 42, 58, .06);
  --shadow-lg: 0 22px 55px rgba(7, 42, 58, .15);
  --r: 16px;
  --font: 'Inter', 'IBM Plex Sans Thai', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--cream); color: var(--ink); font-family: var(--font); line-height: 1.5; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.brand { font-weight: 900; letter-spacing: -.05em; font-size: 19px; }
.brand em { font-style: normal; color: var(--aqua); }
.muted { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #18c783; box-shadow: 0 0 0 0 rgba(24, 199, 131, .6); animation: pulse 2s infinite; display: inline-block; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(24, 199, 131, .55); } 70% { box-shadow: 0 0 0 9px rgba(24, 199, 131, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 199, 131, 0); } }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 13px; transition: .15s; }
.btn:hover { border-color: var(--aqua); color: var(--aqua-d); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--aqua-d); border-color: var(--aqua-d); color: #fff; }
.btn-aqua { background: var(--aqua); border-color: var(--aqua); color: #fff; }
.btn-aqua:hover { background: var(--aqua-d); color: #fff; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tip { position: fixed; z-index: 100; pointer-events: none; background: var(--night); color: #fff; padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; box-shadow: var(--shadow-lg); max-width: 280px; opacity: 0; transition: opacity .12s; }
.tip b { font-weight: 700; }
.tip .tip-row { display: flex; justify-content: space-between; gap: 14px; }
.tip .tip-muted { color: #9fb6c4; }
.demo-badge { font-size: 11px; font-weight: 700; color: var(--warn); background: var(--warn-bg); padding: 3px 9px; border-radius: 99px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfdfe1; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }