:root{
  --navy:#0F2557; --blue:#1D4ED8; --sky:#E0ECFF; --line:#C7D8F5;
  --ink:#0F172A; --muted:#55657F; --bg:#F5F8FD; --panel:#fff; --warn:#B45309;
  --digit:#FFFFFF; --boardbg:#0F2557; --boardline:#28407A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E6EDF8; --muted:#9AAAC6; --bg:#08122B; --panel:#0E1B3D; --line:#22345F;
    --sky:#16264F; --boardbg:#0A1736; --boardline:#203668; --warn:#F59E0B;
  }
}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Anuphan",Tahoma,"Noto Sans Thai",sans-serif;font-size:16px;line-height:1.6}
.wrap{max-width:560px;margin:0 auto;padding:20px 16px 32px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
h1{margin:0;font-size:1.75rem;font-weight:600;color:var(--navy);line-height:1.2}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) h1{color:#fff}}
.sub{margin:4px 0 0;color:var(--muted)}

.board{background:var(--boardbg);border-radius:14px;padding:6px 0 10px;color:#fff;overflow:hidden}
.board-head{display:flex;justify-content:space-between;padding:10px 20px;font-size:.85rem;color:#A9BEEB;
  border-bottom:1px solid var(--boardline)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--boardline)}
.list li:last-child{border-bottom:0}
.name{font-weight:500;font-size:1.02rem}
.price{font-family:"Chakra Petch",monospace;font-weight:700;font-size:1.9rem;color:var(--digit);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.list .empty{display:block;color:#A9BEEB;text-align:center;padding:28px 20px}
.loading .price{opacity:.35}

.status{min-height:1.6em;margin:10px 4px 18px;font-size:.9rem;color:var(--muted)}
.status.warn{color:var(--warn)}

.controls{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.controls label{display:block;font-weight:500;margin-bottom:8px}
.row{display:flex;gap:10px}
input[type=date]{flex:1;min-width:0;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink)}
button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:10px 16px;background:var(--blue);color:#fff;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
button.ghost{background:var(--sky);color:var(--blue);padding:8px 14px;white-space:nowrap}
button:focus-visible,input:focus-visible{outline:3px solid #93B4F5;outline-offset:2px}
.foot{margin-top:22px;font-size:.8rem;color:var(--muted);text-align:center}
@media (max-width:380px){.price{font-size:1.55rem}.list li{padding:11px 16px}}