:root{--bg:#f3f5f8;--ink:#1d2733;--muted:#64748b;--line:#dde3ea;--accent:#2f5d8a;--warn:#b42318;--warn-bg:#fdecea;--ok:#157347;--ok-bg:#e6f4ea}
*{box-sizing:border-box}
body{font-family:system-ui,"Sarabun",Tahoma,sans-serif;margin:0;background:var(--bg);color:var(--ink)}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
main{max-width:1100px;margin:16px auto;padding:0 12px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:14px}
.narrow{max-width:420px;margin:40px auto}
.muted{color:var(--muted);font-weight:normal;font-size:13px}
.hidden{display:none!important}
input,select,button{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.narrow input{display:block;width:100%;margin-bottom:10px}
button{cursor:pointer}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.msg{color:var(--warn);margin-top:8px;min-height:1.2em}
.hero{display:block;width:100%;text-align:left;border:1px solid var(--warn);background:var(--warn-bg);border-radius:8px;padding:18px;margin-bottom:14px;color:var(--ink)}
.hero.ok{border-color:var(--ok);background:var(--ok-bg)}
.hero-title{font-size:15px;margin-bottom:6px}
.hero-nums{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.hero-nums span{margin-right:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{margin-bottom:14px}
.big-num{font-size:24px;font-weight:700}
.num{font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:#eef2f6}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
.tag{padding:2px 8px;border-radius:10px;font-size:12px;background:#eef2f6}
.tag.matched{background:var(--ok-bg);color:var(--ok)}
.tag.unmatched{background:var(--warn-bg);color:var(--warn)}
.tag.review{background:#fff4d6;color:#8a5a00}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.filters input{flex:1;min-width:200px}
summary{cursor:pointer;font-weight:600}
.skeleton{background:linear-gradient(90deg,#e8ecf1,#f4f6f9,#e8ecf1);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:8px;height:60px;margin-bottom:14px}
.skeleton.big{height:90px}.skeleton.tall{height:200px}
.skeleton-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@keyframes sh{to{background-position:-200% 0}}
@media(max-width:700px){.stats,.skeleton-row{grid-template-columns:1fr}.hero-nums{font-size:22px}}
.pager{display:flex;gap:8px;align-items:center;margin-top:8px}