:root{--brand-50: #eef2ff;--brand-100: #e0e7ff;--brand-200: #c7d2fe;--brand-500: #6366f1;--brand-600: #4f46e5;--brand-700: #4338ca;--bg-app: #f6f7f9;--bg-surface: #ffffff;--bg-subtle: #f3f4f6;--bg-hover: #f9fafb;--bg-sunken: #eef0f3;--text: #0f172a;--text-secondary: #475569;--text-muted: #64748b;--text-faint: #94a3b8;--border: #e2e8f0;--border-strong: #cbd5e1;--brand: var(--brand-600);--brand-hover: var(--brand-700);--brand-soft: var(--brand-50);--brand-on-soft: var(--brand-700);--success: #059669;--success-soft: #ecfdf5;--success-on-soft: #047857;--warn: #d97706;--warn-soft: #fffbeb;--warn-on-soft: #b45309;--danger: #dc2626;--danger-soft: #fef2f2;--danger-on-soft: #b91c1c;--info: #0284c7;--info-soft: #f0f9ff;--info-on-soft: #0369a1;--nav-bg: #0f172a;--nav-bg-elevated: #1e293b;--nav-border: #1e293b;--nav-text: #cbd5e1;--nav-text-strong: #f8fafc;--nav-text-faint: #64748b;--shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);--shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);--shadow-lg: 0 16px 40px rgba(15, 23, 42, .16), 0 4px 12px rgba(15, 23, 42, .08);--radius-sm: 6px;--radius: 8px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 999px;--font-sans: Inter, "IBM Plex Sans Thai", "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif;--font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;--text-xs: 11px;--text-sm: 12px;--text-base: 13px;--text-md: 14px;--text-lg: 16px;--text-xl: 19px;--text-2xl: 24px;--ease: cubic-bezier(.4, 0, .2, 1);--dur: .16s;--ring: 0 0 0 3px var(--brand-100);color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-app: #0b1120;--bg-surface: #131c2e;--bg-subtle: #1b2436;--bg-hover: #1a2334;--bg-sunken: #0f1729;--text: #e8edf5;--text-secondary: #b4c0d3;--text-muted: #8b99ae;--text-faint: #64748b;--border: #243043;--border-strong: #33415a;--brand: var(--brand-500);--brand-hover: #818cf8;--brand-soft: #1e2647;--brand-on-soft: #a5b4fc;--success-soft: #0d2a22;--success-on-soft: #6ee7b7;--warn-soft: #2c2110;--warn-on-soft: #fcd34d;--danger-soft: #2d1518;--danger-on-soft: #fca5a5;--info-soft: #0c2436;--info-on-soft: #7dd3fc;--nav-bg: #080d18;--nav-bg-elevated: #131c2e;--nav-border: #1c2740;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);--shadow-md: 0 4px 12px rgba(0, 0, 0, .45);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);--ring: 0 0 0 3px rgba(99, 102, 241, .35);color-scheme:dark}}:root[data-theme=dark]{--bg-app: #0b1120;--bg-surface: #131c2e;--bg-subtle: #1b2436;--bg-hover: #1a2334;--bg-sunken: #0f1729;--text: #e8edf5;--text-secondary: #b4c0d3;--text-muted: #8b99ae;--text-faint: #64748b;--border: #243043;--border-strong: #33415a;--brand: var(--brand-500);--brand-hover: #818cf8;--brand-soft: #1e2647;--brand-on-soft: #a5b4fc;--success-soft: #0d2a22;--success-on-soft: #6ee7b7;--warn-soft: #2c2110;--warn-on-soft: #fcd34d;--danger-soft: #2d1518;--danger-on-soft: #fca5a5;--info-soft: #0c2436;--info-on-soft: #7dd3fc;--nav-bg: #080d18;--nav-bg-elevated: #131c2e;--nav-border: #1c2740;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);--shadow-md: 0 4px 12px rgba(0, 0, 0, .45);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);--ring: 0 0 0 3px rgba(99, 102, 241, .35);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg-app);color:var(--text);font-family:var(--font-sans);font-size:var(--text-md);line-height:1.55;-webkit-font-smoothing:antialiased}h1,h2,h3{color:var(--text);letter-spacing:-.011em;font-weight:650}h1{font-size:var(--text-2xl);margin:0 0 18px;line-height:1.25}h2{font-size:var(--text-lg);margin:0 0 12px;line-height:1.35}h3{font-size:var(--text-md);margin:0 0 8px}a{color:var(--brand)}::selection{background:var(--brand-200);color:var(--brand-700)}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full);border:3px solid transparent;background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background-color:var(--text-faint);background-clip:content-box}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-xs)}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface)}table{width:100%;border-collapse:collapse;font-size:var(--text-base)}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}th{background:var(--bg-subtle);font-weight:600;font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);border-bottom-color:var(--border-strong)}tbody tr{transition:background var(--dur) var(--ease)}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--bg-hover)}tbody tr.selectable{cursor:pointer}tbody tr.selected,tbody tr.selected:hover{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}.mono{font-family:var(--font-mono);font-size:var(--text-sm);font-variant-ligatures:none}.muted{color:var(--text-muted)}.right{text-align:right;font-variant-numeric:tabular-nums}.empty{padding:32px 24px;text-align:center;color:var(--text-muted);font-size:var(--text-base)}button,input,select,textarea{font-family:inherit;font-size:var(--text-md);color:var(--text)}input,select,textarea{padding:8px 11px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-surface);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}input::placeholder,textarea::placeholder{color:var(--text-faint)}input:hover,select:hover,textarea:hover{border-color:var(--text-faint)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}input:disabled,select:disabled,textarea:disabled{background:var(--bg-subtle);color:var(--text-faint);cursor:not-allowed}select{appearance:none;padding-right:30px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}input[type=checkbox]{width:15px;height:15px;padding:0;accent-color:var(--brand);cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 15px;border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--text-secondary);border-radius:var(--radius);font-weight:550;font-size:var(--text-base);line-height:1.4;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-xs);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.btn:hover:not(:disabled){background:var(--bg-subtle);border-color:var(--text-faint);color:var(--text)}.btn:active:not(:disabled){box-shadow:none}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn.small{padding:5px 10px;font-size:var(--text-sm)}.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}.btn-danger{background:var(--bg-surface);border-color:var(--danger);color:var(--danger)}.btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger);color:var(--danger-on-soft)}.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:var(--text-sm);font-weight:550;color:var(--text-muted)}.alert{padding:11px 14px;border-radius:var(--radius-md);margin-bottom:14px;font-size:var(--text-base);border:1px solid transparent;border-left-width:3px}.alert-error{background:var(--danger-soft);color:var(--danger-on-soft);border-color:var(--danger)}.alert-ok{background:var(--success-soft);color:var(--success-on-soft);border-color:var(--success)}.alert-info{background:var(--info-soft);color:var(--info-on-soft);border-color:var(--info)}
