:root{
  --green:#063c21;
  --green2:#0a6b39;
  --gold:#d7b46a;
  --bg:#f4f7f5;
  --card:#ffffff;
  --text:#122018;
  --muted:#6b756f;
  --line:#dde7e1;
  --buy:#0b7a3f;
  --sell:#c33a2f;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"Noto Sans Thai",sans-serif}
body{min-height:100vh}
.page{max-width:1180px;margin:0 auto;padding:22px}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#052f1a,#0b6a39);color:#fff;padding:24px 26px;border-radius:22px;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.brand{font-weight:900;font-size:32px;letter-spacing:.5px}.subtitle{font-size:14px;opacity:.84;margin-top:5px}.status-wrap{text-align:right}.status{display:inline-flex;align-items:center;font-size:12px;font-weight:800;border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.12)}.status.online::before,.status.offline::before{content:"";width:8px;height:8px;border-radius:50%;margin-right:7px}.status.online::before{background:#53e08e}.status.offline::before{background:#ffb34f}.updated{font-size:12px;opacity:.78;margin-top:7px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:14px 2px;gap:10px}.legend{font-size:12px;color:var(--muted);font-weight:800}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 5px 0 10px}.dot.buy{background:var(--buy)}.dot.sell{background:var(--sell)}button{border:1px solid #cdd8d2;background:#fff;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer}
.board-shell{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.board{width:100%;border-collapse:collapse}.board thead th{background:#0b5932;color:#fff;padding:13px 12px;font-size:13px;letter-spacing:.2px;text-align:left}.board thead th.rate-col{text-align:right}.board tbody td{padding:12px;border-bottom:1px solid #edf2ef;vertical-align:middle}.board tbody tr:last-child td{border-bottom:0}.board tbody tr.currency-start td{border-top:2px solid #d7e3dc}.currency{font-size:17px;font-weight:900;color:#074c2a}.name{font-size:11px;color:var(--muted);margin-top:2px}.denom{font-weight:800;color:#35433b}.rate{text-align:right;font-variant-numeric:tabular-nums;font-size:20px;font-weight:900}.rate.buy{color:var(--buy)}.rate.sell{color:var(--sell)}.currency-col{width:32%}.denom-col{width:24%}.rate-col{width:22%}
.empty{text-align:center;padding:36px!important;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:16px;padding:14px 4px;color:var(--muted);font-size:11px}.domain{font-weight:800}
@media(max-width:720px){.page{padding:10px}.hero{padding:17px 16px;border-radius:16px;align-items:flex-start}.brand{font-size:25px}.subtitle{font-size:12px}.status-wrap{max-width:48%}.board thead th{font-size:11px;padding:10px 7px}.board tbody td{padding:10px 7px}.currency{font-size:15px}.name{display:none}.denom{font-size:12px}.rate{font-size:16px}.currency-col{width:27%}.denom-col{width:25%}.rate-col{width:24%}footer{display:block;text-align:center;line-height:1.7}}
:fullscreen .page{max-width:none;padding:16px;background:var(--bg)}