:root{--bg:#f4f5f9;--panel:#fff;--line:#e3e5ee;--fg:#1d2130;--muted:#6b7183;--faint:#9aa0b2;--accent:#4f37b5;--accent-soft:#efeafd;--ok:#1f8a4c;--ok-soft:#e4f6ea;--warn:#b96a00;--warn-soft:#fff1dc;--bad:#c62828;--bad-soft:#fde7e7;--info:#1f5fbf;--info-soft:#e5eefb;--grey-soft:#eceef4;--radius:10px;--nav-h:54px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font:14px/1.5 IBM Plex Sans Thai,Sarabun,Noto Sans Thai,system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit;color:inherit}code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}.nav{z-index:20;height:var(--nav-h);border-bottom:1px solid var(--line);white-space:nowrap;background:#fff;align-items:center;gap:4px;padding:0 12px;display:flex;position:sticky;top:0;overflow-x:auto}.nav .brand{color:var(--accent);align-items:center;gap:6px;margin-right:10px;font-weight:700;display:flex}.nav a.item{color:var(--muted);border-radius:8px;padding:6px 10px;font-weight:500}.nav a.item:hover{background:var(--grey-soft);text-decoration:none}.nav a.item.on{background:var(--accent-soft);color:var(--accent)}.nav .spacer{flex:1}.nav button.link{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:6px 10px}.wrap{max-width:1280px;margin:0 auto;padding:16px}.wrap.narrow{max-width:860px}h1{margin:4px 0 12px;font-size:20px}h2{margin:18px 0 8px;font-size:16px}.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:12.5px}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.grid{gap:12px;display:grid}.grid.auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.grid.two{grid-template-columns:1fr 1fr}@media (max-width:820px){.grid.two{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:inherit;padding:12px;display:block}.card:hover{border-color:#c9bef5;text-decoration:none;box-shadow:0 2px 10px #4f37b51f}.kpis{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}.kpi b{font-size:22px;font-weight:600;display:block}.badge{white-space:nowrap;vertical-align:middle;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;display:inline-block}.badge.grey{background:var(--grey-soft);color:var(--muted)}.badge.blue{background:var(--info-soft);color:var(--info)}.badge.green{background:var(--ok-soft);color:var(--ok)}.badge.orange{background:var(--warn-soft);color:var(--warn)}.badge.red{background:var(--bad-soft);color:var(--bad)}.dot{vertical-align:middle;border-radius:50%;width:8px;height:8px;margin-right:5px;display:inline-block}label.f{color:var(--muted);margin:10px 0 4px;font-size:12.5px;font-weight:500;display:block}input.i,select.i,textarea.i{background:#fff;border:1px solid #cfd3e0;border-radius:8px;width:100%;padding:8px 10px}textarea.i{resize:vertical;min-height:120px;line-height:1.5}input.i:focus,select.i:focus,textarea.i:focus{border-color:var(--accent);outline:2px solid #c9bef5}.btn{cursor:pointer;color:var(--fg);background:#fff;border:1px solid #cfd3e0;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-weight:600;display:inline-flex}.btn:hover{background:#f6f6fb;text-decoration:none}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:#432e9e}.btn.danger{color:var(--bad);border-color:#f0b5b5}.btn.ok{color:var(--ok);border-color:#b5e0c2}.btn.sm{padding:4px 10px;font-size:12.5px}.btn.big{padding:12px 22px;font-size:16px}.inline-form{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.inline-form input.i{flex:1;width:auto;min-width:160px}.tbl{border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:100%;overflow:hidden}.tbl th{text-align:left;color:var(--muted);border-bottom:1px solid var(--line);background:#fafbfe;padding:8px 10px;font-size:12px;font-weight:600}.tbl td{vertical-align:top;border-bottom:1px solid #f0f1f6;padding:8px 10px}.tbl tr:last-child td{border-bottom:0}.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:#faf9ff}.tbl-wrap{overflow-x:auto}@media (max-width:760px){.tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{width:100%;display:block}.tbl.stack thead{display:none}.tbl.stack tr{border-bottom:6px solid var(--bg)}.tbl.stack td{border:0;padding:4px 10px}.tbl.stack td:before{content:attr(data-l) " ";color:var(--muted);font-size:12px}}.bar{background:var(--grey-soft);border-radius:3px;height:6px;overflow:hidden}.bar>i{background:var(--accent);height:100%;transition:width .4s;display:block}.timeline{border-left:2px solid var(--line);margin-left:6px;padding-left:14px;list-style:none}.timeline li{padding:4px 0 8px;position:relative}.timeline li:before{content:"";background:var(--accent);border:2px solid #fff;border-radius:50%;width:10px;height:10px;position:absolute;top:10px;left:-20px}.pre{white-space:pre-wrap;word-break:break-word;border:1px solid var(--line);background:#fafbfe;border-radius:8px;padding:10px;font-size:13px}.alert{border-radius:8px;margin:8px 0;padding:10px 12px}.alert.bad{background:var(--bad-soft);color:var(--bad)}.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.warn{background:var(--warn-soft);color:var(--warn)}.thumb{aspect-ratio:9/16;background:#111;border-radius:8px;justify-content:center;align-items:center;display:flex;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%}.modal-bg{z-index:50;background:#0a0a14b3;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:12px;width:100%;max-width:980px;max-height:95vh;padding:16px;overflow:auto}.modal video{background:#000;border-radius:8px;width:100%;max-height:70vh}.sep{background:var(--line);height:1px;margin:12px 0}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;padding:3px 10px;font-size:12.5px}.chip.on{background:var(--accent-soft);color:var(--accent);border-color:#c9bef5}.login-box{max-width:380px;margin:12vh auto}.spark{width:100%;height:44px;display:block}.dropzone{text-align:center;color:var(--muted);cursor:pointer;border:2px dashed #cfd3e0;border-radius:10px;padding:14px}.dropzone.on{border-color:var(--accent);background:var(--accent-soft)}.previews{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.previews div{border:1px solid var(--line);background:#000;border-radius:8px;width:84px;height:84px;position:relative;overflow:hidden}.previews img{object-fit:cover;width:100%;height:100%}.previews button{color:#fff;cursor:pointer;background:#0009;border:0;border-radius:50%;width:20px;height:20px;line-height:1;position:absolute;top:2px;right:2px}.thumb.pic{aspect-ratio:1;background:#f3f1fa}.thumb.pic img{object-fit:contain}.imgwall{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;display:grid}.imgwall .card{cursor:pointer;padding:8px}.modal img.full{background:#111;border-radius:8px;max-width:100%;max-height:70vh;margin:8px auto 0;display:block}