:root{--brand:#6366f1;--brand-d:#4f46e5;--ok:#16a34a;--ok-d:#15803d;--err:#e11d48;--err-d:#be123c;--fg:#0f172a;--mut:#64748b;--mut-2:#94a3b8;--bg:#0b1220;--panel:#0b1220;--card:#0d1324;--line:#e2e8f0}*{box-sizing:border-box}.page{background:radial-gradient(35rem 35rem at -10% -10%,rgba(99,102,241,.15),transparent 60%),radial-gradient(28rem 28rem at 110% -10%,rgba(14,165,233,.14),transparent 60%),linear-gradient(#0a0f1d,#0b1220 18%,#0b1220);color:var(--fg);min-height:100dvh;padding:16px}.container{margin:0 auto;max-width:1600px}.appbar{align-items:center;background:linear-gradient(135deg,#0ea5e9,#6366f1);border-radius:16px;box-shadow:0 12px 26px #0000002e;color:#fff;display:flex;gap:12px;justify-content:space-between;margin:10px 0 18px;padding:14px 16px}.glass{-webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px)}.brand{align-items:center;display:flex;gap:12px}.brand h1{font-size:20px;margin:0}.brand .muted{font-size:12.5px;margin:0;opacity:.92}.logo{font-size:22px}.appbar-actions{align-items:center;display:flex;gap:10px}.density .chip{background:#ffffff1f;border:1px solid hsla(0,0%,100%,.35);border-radius:999px;color:#fff;cursor:pointer;font-size:12px;font-weight:600;height:32px;padding:0 10px;transition:.15s}.density .chip:hover{background:#ffffff2e}.density .chip.active{background:#fff;color:#0f172a}.panel{background:#fff;border-radius:16px;box-shadow:0 8px 16px #0000001a;padding:18px}.block{margin:18px 0}.block-head{align-items:flex-end;display:flex;gap:12px;justify-content:space-between;margin-bottom:10px}.block-head h2{font-size:18px;margin:0}.sub{margin:4px 0 0}.tools{align-items:center;display:flex;gap:10px}.pill{background:#f1f5f9;border-radius:999px;color:#0f172a;font-size:12px;font-weight:700;padding:6px 10px}.alert{background:#e9f9f0;border:1px solid #c7ead1;border-radius:10px;color:#185b37;margin:12px 0;padding:10px 12px}.alert.err{background:#ffe8ee;border-color:#ffc4d1;color:#8a1f1f}.search{align-items:center;display:flex;position:relative}.search-input{border:1px solid #e5e7eb;border-radius:10px;height:36px;min-width:280px;padding:0 36px 0 12px}.kbd{background:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#94a3b8;font-size:11px;padding:2px 6px;position:absolute;right:8px}.tableshell{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:auto}.tableshell.compact table{font-size:12.5px}.tableshell.compact td,.tableshell.compact th{padding:8px 10px}.tableshell.comfortable table{font-size:13.2px}.tableshell.comfortable td,.tableshell.comfortable th{padding:11px 12px}table{border-collapse:separate;border-spacing:0;min-width:1200px;width:100%}td,th{border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}th{background:#f8fafc;color:#334155;cursor:pointer;font-weight:700;position:sticky;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}td .cell,th{white-space:nowrap}td .cell{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis}tr:hover td{background:#fafbff}.actions{white-space:nowrap}.sort{color:#64748b;font-size:11px;margin-left:4px}.sticky-right{background:#fff;border-left:1px solid #eef2f7;position:sticky;right:0;z-index:1}.tiny-pill{background:#f1f5f9;border-radius:999px;color:#0f172a;display:inline-block;font-size:11px;font-weight:700;padding:2px 8px}.tiny-pill.yes{background:#dcfce7;color:#166534}.skeleton-row .sk{animation:shimmer 1.2s infinite;background:linear-gradient(90deg,#f2f4f8 25%,#eceff4 37%,#f2f4f8 63%);background-size:400% 100%;border-radius:6px;height:12px}.skeleton-row .sk-btn{border-radius:8px;height:24px;width:64px}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}.empty{color:#64748b;padding:18px;text-align:center}.btn{align-items:center;background:#fff;border:1px solid transparent;border-radius:10px;color:#0f172a;cursor:pointer;display:inline-flex;font-weight:700;height:40px;justify-content:center;padding:0 14px;transition:all .18s ease}.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-d)}.btn-danger{background:var(--err);border-color:var(--err);color:#fff}.btn-danger:hover{background:#be123c}.btn-ghost{background:#fff;border-color:#e5e7eb;color:var(--brand)}.btn-ghost:hover{background:#f8fafc}.w-full{width:100%}.spinner{animation:spin .6s linear infinite;border:2px solid hsla(0,0%,100%,.5);border-radius:9999px;border-top-color:#fff;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.login-overlay{align-items:center;-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%);background:radial-gradient(30rem 30rem at 20% 10%,rgba(99,102,241,.2),transparent 60%),#040714b8;display:flex;inset:0;justify-content:center;position:fixed;z-index:1000}.login-card{background:linear-gradient(180deg,#0f172a,#0b1220);border:1px solid hsla(0,0%,100%,.06);border-radius:16px;box-shadow:0 24px 60px #00000073;color:#e5e7eb;padding:22px 20px;width:min(460px,92vw)}.login-brand{align-items:center;display:flex;gap:12px;margin-bottom:8px}.badge{background:#111827;border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:#fff;font-weight:800;letter-spacing:.5px;padding:10px 12px}.login-card h3{color:#fff;font-size:18px;margin:0}.login-card .muted{color:#a6b3c4;margin:2px 0 0}.hint{color:#a6b3c4;font-size:12px;margin:10px 2px 0}.field{display:flex;flex-direction:column;margin:12px 0}.field>span{color:#444;font-size:12.5px;margin-bottom:6px}.field input,.field select,.field textarea{background:#0e162a;border:1px solid hsla(0,0%,100%,.16);border-radius:10px;color:#e5e7eb;outline:none;padding:12px 13px;width:100%}.field input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa26}.modal{background:#00000073;display:flex;inset:0;position:fixed;z-index:999}.modal-card{background:#fff;border-radius:16px;box-shadow:0 24px 60px #0003;left:50%;max-height:92vh;overflow:auto;padding:18px;position:absolute;top:50%;transform:translate(-50%,-50%);width:min(980px,96vw)}.modal-head{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:8px}.fieldset{border:1px solid #e5e7eb;border-radius:12px;margin:12px 0;padding:12px}.fieldset legend{font-weight:700;padding:0 6px}.grid{display:grid;gap:10px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.ro{background:#f5f6fa}.modal-bar{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}@media (max-width:1024px){.g2,.g3{grid-template-columns:1fr}.search-input{min-width:200px}td .cell{max-width:220px}}.icon-btn{align-items:center;background:#ffffff1f;border:1px solid hsla(0,0%,100%,.35);border-radius:10px;color:#fff;cursor:pointer;display:inline-flex;font-weight:800;height:36px;justify-content:center;width:36px}.icon-btn:hover{background:#fff3}.hamburger{margin-right:8px}.drawer{background:linear-gradient(180deg,#0f172a,#0b1220);border-right:1px solid hsla(0,0%,100%,.08);box-shadow:0 18px 48px #00000073;color:#e5e7eb;display:flex;flex-direction:column;inset:0 auto 0 0;max-width:86vw;position:fixed;transform:translate(-100%);transition:transform .2s ease;width:280px;z-index:1200}.drawer.open{transform:translate(0)}.drawer-head{align-items:center;display:flex;gap:10px;justify-content:space-between;padding:12px 14px}.drawer-nav{display:flex;flex-direction:column;padding:8px}.nav-item{background:transparent;border:1px solid transparent;border-radius:10px;color:#e5e7eb;cursor:pointer;font-weight:700;margin:4px 0;padding:10px 12px;text-align:left}.nav-item:hover{background:#ffffff0f}.nav-item.active{background:#111827;border-color:#ffffff1a}.drawer-foot{margin-top:auto;padding:12px 14px}.drawer-overlay{background:#00000073;inset:0;position:fixed;z-index:1100}.appbar .brand{gap:10px}@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:600;src:url(./Sarabun-SemiBold.N4jXUJuT.ttf) format("truetype")}@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:400;src:url(./Sarabun-Regular.DzuTqyK_.ttf) format("truetype")}:root{--font-sans:"Sarabun",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.page,body,html{font-family:var(--font-sans)}.password-field .input-wrap{position:relative}.password-field input{padding-right:40px}.pw-toggle{align-items:center;background:transparent;border:0;border-radius:8px;color:var(--mut);cursor:pointer;display:inline-flex;height:32px;justify-content:center;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px}.pw-toggle:hover{background:#f1f5f9;color:var(--fg)}.pw-toggle:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}