:root{--bg:#f4f7fb;--fg:#18243b;--muted:#708098;--card:#fff;--line:#e6ecf4;--primary:#2463eb;--navy:#102347}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:Prompt,"Noto Sans Thai",Tahoma,system-ui,sans-serif;font-size:13px}.layout{display:flex;min-height:100vh}.sidebar{width:235px;flex:none;background:#102347;color:white;padding:28px 18px;position:sticky;top:0;height:100vh}.mark{height:42px;width:42px;border-radius:13px;background:#477efa;display:grid;place-items:center;font-size:25px}.brand{font-size:18px;font-weight:700;line-height:1.45;margin:16px 0 4px}.subtitle{font-size:11px;color:#aabbd7}.nav{margin-top:38px;background:#24416d;border:1px solid #396093;border-radius:10px;padding:12px;font-weight:600}.source{margin-top:27px;color:#acbad0;font-size:11px;line-height:2}.main{flex:1;min-width:0;padding:30px 34px 60px;max-width:1750px;margin:0 auto}.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.eyebrow{color:var(--primary);font-weight:700;font-size:11px;letter-spacing:1.5px}.top h1{font-size:26px;margin:4px 0 5px;line-height:1.5}.muted{color:var(--muted)}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}button,select,input{font:inherit}button{cursor:pointer}button.primary{background:var(--primary);color:white;border:1px solid var(--primary)}button,.buttonlike{border:1px solid #d6e0ef;background:white;color:#334866;padding:10px 15px;border-radius:10px;font-weight:600}button:hover{filter:brightness(.96)}.panel{background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:0 3px 15px #14254608}.filter{margin-top:23px;padding:20px}.sectiontitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.sectiontitle h2{margin:0;font-size:15px}.filters{display:grid;grid-template-columns:2fr repeat(4,minmax(120px,1fr));gap:12px}.field label{display:block;color:#687993;font-size:11px;font-weight:600;margin-bottom:7px}.field input,.field select{width:100%;height:41px;border:1px solid #dce4ef;border-radius:9px;background:#fff;padding:0 11px;outline:0;color:#253955;min-width:0}.field input:focus,.field select:focus{border-color:#477efa;box-shadow:0 0 0 3px #dbe7ff}.cards{margin-top:17px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.kpi{padding:20px}.kpi .tag{color:#74839a;font-weight:500}.kpi .value{font-size:26px;font-weight:700;letter-spacing:-.5px;margin:9px 0 4px;overflow-wrap:anywhere}.kpi .hint{font-size:11px;color:#8594a6}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.green{background:#17a786}.orange{background:#f59e0b}.purple{background:#8b5cf6}.blue{background:#3b82f6}.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:17px}.chartcard{padding:22px;min-width:0}.charthead{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}.charthead h2{font-size:15px;margin:0}.bars{display:flex;flex-direction:column;gap:13px}.barrow{display:grid;grid-template-columns:minmax(80px,170px) 1fr 58px;align-items:center;gap:12px}.barlabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#53647d}.track{height:9px;background:#edf2fa;border-radius:10px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#3b82f6,#7dacf9);border-radius:10px}.barvalue{text-align:right;font-weight:600}.statusline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;font-size:11px}.statuskey{display:flex;gap:6px;align-items:center}.stack{height:13px;border-radius:10px;overflow:hidden;display:flex;background:#eef2f8;margin-bottom:25px}.stack>div{height:100%}.tablepanel{margin-top:17px;padding:20px}.tabletop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}.tabletop h2{margin:0;font-size:16px}.scroller{overflow:auto;border:1px solid var(--line);border-radius:10px}table{border-collapse:collapse;min-width:1350px;width:100%;font-size:12px}th{position:sticky;top:0;background:#f5f8fc;color:#667792;text-align:left;font-weight:600;padding:13px 12px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:11px 12px;border-bottom:1px solid #edf1f7;vertical-align:middle;color:#3b4d67;max-width:280px}tr:hover td{background:#f8faff}.name{font-weight:600;color:#1b2c47}.nowrap{white-space:nowrap}.money{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.pill{padding:4px 9px;border-radius:30px;background:#e9f8f2;color:#168469;display:inline-block;white-space:nowrap;font-size:11px}.pill.bad{background:#fff1eb;color:#ba5e35}.pill.other{background:#eff2f7;color:#68788c}.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:17px}.paging{display:flex;gap:7px;align-items:center}.paging button{padding:7px 12px}.empty{padding:35px;text-align:center;color:#8290a4}.loading{position:fixed;inset:0;background:#f4f7fb;display:flex;align-items:center;justify-content:center;z-index:100;font-size:18px;font-weight:600;color:#355aa3;text-align:center;padding:20px}.loading.hide{display:none}.notice{font-size:11px;color:#8695a9;margin-top:14px}.truncate{max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:1100px){.sidebar{display:none}.filters{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.main{padding:20px 14px}.filters,.charts{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr);gap:8px}.kpi{padding:14px}.kpi .value{font-size:19px}.top h1{font-size:21px}}

.filters{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.field.searchwide{grid-column:span 2}
.input-hint{display:block;font-size:10px;color:#8594a6;margin-top:6px}
.uploadbar{margin-top:19px;padding:15px 19px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.uploadbar .intro{min-width:240px;flex:1}
.uploadbar .intro strong{display:block;font-size:13px;margin-bottom:4px;color:#253955}
.uploadbar .intro small{color:#7a899e;font-size:11px}
.uploadbar .actions{justify-content:flex-end}
button.attention{background:#e9f2ff;border-color:#93baff;color:#175bd5}
#dataOrigin{font-weight:500;color:#314e7a}
.feedback{padding:11px 14px;border-radius:9px;font-size:12px;margin-top:10px}
.feedback.ok{background:#eaf8f1;color:#257151;border:1px solid #c9ecdc}
.feedback.error{background:#fff0f0;color:#a43434;border:1px solid #f5cece}
.feedback[hidden]{display:none}
#loading{white-space:normal;line-height:2}
#loadingMessage{display:block}
#loadingDetail{display:block;font-size:11px;font-weight:400;color:#627c9c}
.faint{color:#a2afbf}
.barrow{grid-template-columns:minmax(80px,180px) 1fr 62px}
.scroller table{min-width:1620px}
#vendorCoverage{white-space:normal}
@media(max-width:1100px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.field.searchwide{grid-column:span 2}}
@media(max-width:680px){.field.searchwide{grid-column:span 1}.filters{grid-template-columns:1fr}.uploadbar{align-items:stretch}.uploadbar .actions{justify-content:flex-start}.barrow{grid-template-columns:minmax(80px,130px) 1fr 62px}}


.sidebar-tools{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.sidebar-tools button{width:100%;text-align:left;border-radius:10px;padding:11px 12px}
.sidebar-tools .nav-upload{background:#477efa;border:1px solid #739cff;color:white}
.sidebar-tools .nav-export{background:#203c69;border:1px solid #52719d;color:white}
.sidebar-tools .nav-export:disabled{opacity:.5;cursor:not-allowed}
.sidebar-tools .nav-note{font-size:10px;color:#aabbd7;line-height:1.7}
.auth-overlay:not([hidden]){position:fixed;inset:0;z-index:250;background:#07172cb8;display:flex;align-items:center;justify-content:center;padding:18px}
.auth-overlay[hidden]{display:none}
.auth-dialog{width:min(100%,440px);background:#fff;border-radius:16px;padding:24px;box-shadow:0 24px 70px #0003}
.auth-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.auth-heading h2{margin:0;font-size:19px}
.auth-close{border:0;background:transparent;font-size:25px;padding:0 6px}
.auth-dialog p{color:#667792;line-height:1.7}
.auth-dialog label{display:block;margin-bottom:7px;font-weight:600}
.auth-dialog input{width:100%;padding:12px;border:1px solid #d6e0ef;border-radius:9px;font-size:16px}
.auth-dialog input:focus{outline:2px solid #b5caff}
.auth-actions{display:flex;justify-content:flex-end;gap:8px;margin:18px 0}
.auth-dialog small{color:#8594a6;line-height:1.7;display:block}
.auth-error{color:#bb3030;margin-top:8px}
.auth-error[hidden]{display:none}
@media(max-width:1100px){.sidebar{display:block;position:relative;height:auto;width:100%;padding:14px}.layout{flex-direction:column}.sidebar .mark,.sidebar .brand,.sidebar .subtitle,.sidebar .source{display:none}.sidebar .nav{margin:0}.sidebar-tools{flex-direction:row;flex-wrap:wrap}.sidebar-tools button{width:auto}.sidebar-tools .nav-note{width:100%}}