:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --panel: #ffffff;
  --bg: #f5f7fb;
  --blue: #1d4ed8;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Noto Sans Thai", sans-serif; }
button, input, select { font: inherit; }
a { color: var(--blue); }
.shell { width: min(1480px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 36px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:20px; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.12em; color:#0369a1; margin-bottom:8px; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#0ea5e9; box-shadow:0 0 0 5px #e0f2fe; margin:0 10px 0 4px; }
h1 { margin:0; font-size:clamp(28px,4vw,48px); line-height:1.1; letter-spacing:-.03em; }
.subtitle { color:var(--muted); font-size:17px; margin:10px 0 0; }
.actions { text-align:right; min-width:250px; }
.updated { color:var(--muted); font-size:12px; margin-bottom:9px; }
button { border:0; border-radius:12px; background:#0f172a; color:white; padding:11px 16px; font-weight:700; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.formula { background:#eff6ff; border:1px solid #bfdbfe; border-radius:16px; padding:15px 18px; display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.formula-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#dbeafe; color:#1d4ed8; font-size:19px; font-weight:900; }
.formula p { margin:3px 0 0; color:#475569; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.kpi span { display:block; color:var(--muted); font-size:13px; }
.kpi strong { font-size:30px; letter-spacing:-.04em; margin-right:6px; }
.kpi small { color:#94a3b8; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 3px rgba(15,23,42,.04); overflow:hidden; margin-bottom:16px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); }
.panel h2 { margin:0; font-size:18px; }
.panel-head p { margin:4px 0 0; color:var(--muted); font-size:13px; }
#map { height:600px; background:#e2e8f0; }
.map-panel { position:relative; }
.legend { position:absolute; z-index:500; bottom:18px; right:18px; background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:12px; box-shadow:0 5px 20px rgba(15,23,42,.14); line-height:1.8; }
.legend strong { display:block; margin-bottom:4px; }
.swatch { width:14px; height:10px; display:inline-block; border-radius:3px; margin-right:7px; border:1px solid rgba(15,23,42,.12); }
.s0 { background:#e5e7eb; }.s1 { background:#dbeafe; }.s2 { background:#93c5fd; }.s3 { background:#60a5fa; }.s4 { background:#2563eb; }.s5 { background:#1e3a8a; }
.table-tools { align-items:flex-end; }
.filters { display:flex; gap:8px; }
input, select { border:1px solid #cbd5e1; border-radius:10px; padding:9px 11px; background:white; color:var(--ink); outline:none; }
input:focus, select:focus { border-color:#60a5fa; box-shadow:0 0 0 3px #dbeafe; }
.table-wrap { overflow:auto; max-height:720px; }
table { border-collapse:collapse; width:100%; min-width:820px; }
th, td { padding:12px 16px; border-bottom:1px solid #eef2f7; text-align:left; vertical-align:middle; }
th { position:sticky; top:0; z-index:2; background:#f8fafc; color:#475569; font-size:12px; font-weight:800; }
th small { font-weight:600; color:#94a3b8; }
tbody tr:hover { background:#f8fafc; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.sortable { cursor:pointer; user-select:none; }
.years { display:block; color:#94a3b8; margin-top:3px; font-weight:500; }
.ratio { display:inline-block; min-width:78px; text-align:center; padding:5px 8px; border-radius:999px; border:1px solid #cbd5e1; background:color-mix(in srgb, var(--ratio-color) 30%, white); font-weight:800; }
.status { display:inline-block; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:700; white-space:nowrap; }
.status.ok { background:#ecfeff; color:#0e7490; }.status.muted { background:#f1f5f9; color:#64748b; }.status.warn { background:#fff7ed; color:#c2410c; }
.loading,.empty,.error { text-align:center; padding:34px; color:var(--muted); }
.error { color:#b91c1c; }
.notes { border:1px dashed #cbd5e1; border-radius:16px; padding:16px 18px; color:#475569; background:#fff; }
.notes p { margin:5px 0 0; }
footer { display:flex; justify-content:space-between; gap:16px; color:#94a3b8; font-size:12px; padding:16px 4px 0; }
.popup { min-width:270px; color:#0f172a; }
.popup h3 { font-size:18px; margin:0; }.popup-years { color:#64748b; font-size:11px; margin:2px 0 10px; }
.popup-ratio { display:flex; justify-content:space-between; align-items:center; background:#eff6ff; border-radius:10px; padding:8px 10px; margin-bottom:8px; }
.popup-ratio strong { color:#1d4ed8; font-size:21px; }
.popup-row { display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:12px; }
.popup-note { background:#f8fafc; border-radius:8px; padding:9px 10px; margin:9px 0 0; font-size:12px; line-height:1.55; }
@media (max-width:900px){ .hero{align-items:flex-start;flex-direction:column}.actions{text-align:left}.kpis{grid-template-columns:repeat(2,1fr)}#map{height:520px}.panel-head.table-tools{align-items:flex-start;flex-direction:column}.filters{width:100%}.filters input{flex:1}footer{flex-direction:column}.legend{position:static;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none} }
@media (max-width:560px){ .shell{width:min(100% - 20px,1480px);padding-top:18px}.kpis{grid-template-columns:1fr 1fr}.kpi{padding:13px}.kpi strong{font-size:24px}.filters{flex-direction:column}.hero h1{font-size:30px}#map{height:460px} }

.crop-picker{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:16px;display:flex;align-items:end;justify-content:space-between;gap:18px}.crop-picker label{display:flex;flex-direction:column;gap:6px;font-weight:700}.crop-picker select{min-width:260px;font-weight:700}.crop-picker p{margin:0;color:var(--muted);font-size:12px}@media(max-width:700px){.crop-picker{align-items:stretch;flex-direction:column}.crop-picker select{width:100%}}