:root{--bg:#f6f7f9;--surface:#fff;--text:#1c2430;--muted:#5a6574;--line:#d9dee5;--brand:#1f3a5f;--brand-ink:#fff;--accent:#2563a8;--info-bg:#eaf2fb;--info-line:#9cc0e6;--warn-bg:#fff6e0;--warn-line:#e3b54a;--warn-ink:#6b4a00;--mock-bg:#3b2a5c;--focus:#f59e0b;color:var(--text);background:var(--bg);font-family:Leelawadee UI,Segoe UI,Tahoma,Noto Sans Thai,sans-serif;font-size:15px;line-height:1.55}*{box-sizing:border-box}body{background:var(--bg);margin:0}h1{margin:.4rem 0 .8rem;font-size:1.45rem}h2{margin:1.4rem 0 .6rem;font-size:1.12rem}h3{margin:1rem 0 .4rem;font-size:1rem}a{color:var(--accent)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.muted{color:var(--muted);font-size:.92rem}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip{background:var(--surface);z-index:10;padding:.5rem 1rem;position:absolute;top:0;left:-999px}.skip:focus{left:.5rem}.mock-banner{background:var(--mock-bg);color:#fff;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;padding:.45rem 1rem;font-size:.9rem;display:flex}.topbar{background:var(--brand);color:var(--brand-ink);flex-wrap:wrap;align-items:center;gap:.5rem 2rem;padding:.6rem 1rem;display:flex}.brand{font-size:1.05rem;font-weight:700}.brand-sub{opacity:.85;margin-left:.4rem;font-size:.9rem;font-weight:400}.topbar ul{flex-wrap:wrap;gap:.2rem;margin:0;padding:0;list-style:none;display:flex}.topbar a{color:var(--brand-ink);border-radius:6px;padding:.35rem .7rem;text-decoration:none;display:inline-block}.topbar a.active{background:#ffffff2e;font-weight:600}.topbar a:hover{background:#ffffff1a}.demo-controls{background:#eef0f4;border-bottom:1px dashed #b7bfcc;flex-wrap:wrap;align-items:end;gap:.5rem 1.2rem;padding:.5rem 1rem;font-size:.88rem;display:flex}.demo-tag{color:#4b3a78;align-self:center;font-weight:600}.demo-controls label{flex-direction:column;gap:.15rem;display:flex}.demo-link{align-self:center}main{max-width:1180px;margin:0 auto;padding:1rem}.foot{max-width:1180px;color:var(--muted);margin:1.5rem auto;padding:0 1rem;font-size:.82rem}label{flex-direction:column;gap:.2rem;font-size:.9rem;display:flex}input,select,textarea,button{font:inherit}input,select,textarea{border:1px solid var(--line);background:var(--surface);border-radius:6px;min-width:0;padding:.4rem .5rem}input:disabled{color:var(--muted);background:#eef0f3}button{border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;border-radius:6px;padding:.42rem .9rem}button.secondary{background:var(--surface);color:var(--accent)}button.link{color:var(--accent);background:0 0;border:none;padding:0;text-decoration:underline}button:disabled{color:#4d5663;cursor:not-allowed;background:#c9cfd8;border-color:#c9cfd8}[aria-invalid=true]{border-color:#b45309}.field-error{color:#9a3412;font-size:.86rem}.row{flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.8rem;display:flex}.title-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;display:flex}.filters{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem 1rem;margin:.8rem 0;display:grid}.notice{border:1px solid var(--info-line);background:var(--info-bg);border-radius:8px;margin:.6rem 0;padding:.55rem .8rem}.notice.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-ink)}.state-box{border:1px solid var(--line);background:var(--surface);border-radius:10px;align-items:flex-start;gap:.8rem;margin:.8rem 0;padding:1rem 1.1rem;display:flex}.state-box.warn{border-color:var(--warn-line);background:var(--warn-bg)}.state-icon{font-size:1.5rem;line-height:1}.state-title{margin:0;font-weight:700}.state-text{color:var(--muted);margin:.2rem 0 0}.source-strip{background:var(--surface);border:1px solid var(--line);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.4rem 1rem;margin:0 0 .6rem;padding:.55rem .8rem;display:grid}.source-strip dt{color:var(--muted);font-size:.78rem}.source-strip dd{margin:0;font-weight:600}.kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;display:grid}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;flex-direction:column;padding:.7rem .9rem;display:flex}.kpi-label{color:var(--muted);font-size:.88rem}.kpi-value{font-size:1.6rem;font-weight:700}.kpi-note{color:var(--muted);font-size:.78rem}.kpis.compact .kpi-value{font-size:1.2rem}.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:.5rem .7rem}th{white-space:nowrap;background:#f0f2f6;font-weight:600}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}tr[aria-selected=true] td{background:#f3f7fd}.chip{border:1px solid var(--line);white-space:nowrap;background:#f4f5f7;border-radius:999px;align-items:center;gap:.25rem;padding:.05rem .55rem;font-size:.84rem;display:inline-flex}.chip-info{border-color:var(--info-line);background:var(--info-bg)}.chip-warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-ink)}.kv{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.4rem 1rem;margin:.6rem 0;display:grid}.kv dt{color:var(--muted);font-size:.8rem}.kv dd{margin:0}.readonly-note{border-left:3px solid var(--line);padding-left:.6rem}.tabs{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:.3rem;margin-top:1rem;display:flex}.tabs [role=tab]{color:var(--text);background:0 0;border:1px solid #0000;border-bottom:none;border-radius:8px 8px 0 0}.tabs [role=tab][aria-selected=true]{background:var(--surface);border-color:var(--line);margin-bottom:-1px;font-weight:700}.tabpanel{background:var(--surface);border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;padding:.4rem 1rem 1rem}.recon{font-size:1.05rem}.split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;gap:1rem;display:grid}.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-top:.8rem;padding:.4rem 1rem 1rem}.split .panel{margin-top:0}.links li{margin:.25rem 0}.login-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:.6rem;max-width:420px;margin:1.5rem auto;padding:1rem 1.2rem;display:flex}.login-card.wide{max-width:620px}.login-card form,.dialog form{flex-direction:column;gap:.6rem;display:flex}.login-card label,.dialog label{flex-direction:column;gap:.2rem;display:flex}.secret{letter-spacing:.04em;background:var(--bg,#f4f5f7);border:1px dashed var(--line);word-break:break-all;border-radius:8px;padding:.5rem .7rem;font-family:ui-monospace,Consolas,monospace;font-size:1.15rem}.secret.small{font-size:.85rem}.topbar .who{align-items:center;gap:.6rem;margin-left:auto;font-size:.9rem;display:flex}td.ua{overflow-wrap:anywhere;max-width:22rem;font-size:.82rem}.panel pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:.82rem}.login-brand{color:var(--muted);margin:0}dialog.dialog{background:var(--surface);color:var(--text);border:none;border-radius:12px;width:min(560px,100% - 2rem);margin-top:6vh;padding:1rem 1.2rem}dialog.dialog[open]{flex-direction:column;gap:.5rem;display:flex}dialog.dialog::backdrop{background:#0f172a73}.dialog h2{margin-top:.2rem}@media (width<=760px){.split{grid-template-columns:1fr}main{padding:.8rem}}