:root{color-scheme:light dark;--x-brand: light-dark(#3b2bc4, #8b7dff);--x-brand-strong: light-dark(#2a1d99, #a99fff);--x-brand-soft: light-dark(#efedff, #1d1846);--x-signal: light-dark(#0aa2b8, #3fd3e6);--x-signal-soft: light-dark(#e3f8fb, #0d2f36);--x-ink: light-dark(#0d1023, #eceef7);--x-muted: light-dark(#5a6078, #9aa1b9);--x-faint: light-dark(#8b91a7, #6d7390);--x-bg: light-dark(#ffffff, #0a0c16);--x-panel: light-dark(#ffffff, #12152396);--x-surface: light-dark(#f6f7fb, #10131f);--x-line: light-dark(#e6e8f0, #232842);--x-ok: light-dark(#13804b, #45c486);--x-warn: light-dark(#a15c00, #f2b14b);--x-bad: light-dark(#c4262e, #ff6b72);--x-radius: 12px;--x-radius-sm: 8px;--x-shadow: 0 1px 2px rgba(13, 16, 35, .06), 0 10px 30px rgba(13, 16, 35, .07);--x-font: "Inter", "Noto Sans Thai", "Noto Sans Lao", system-ui, -apple-system, "Segoe UI", sans-serif;--x-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--xtnd-accent: var(--x-brand)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--x-bg);color:var(--x-ink);font:15px/1.55 var(--x-font);-webkit-font-smoothing:antialiased}a{color:var(--x-brand);text-decoration:none}a:hover{text-decoration:underline}code,kbd,pre,.mono{font-family:var(--x-mono);font-size:.92em}h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}p{margin:0 0 1em}:focus-visible{outline:2px solid var(--x-brand);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--x-radius-sm);border:1px solid var(--x-line);background:var(--x-bg);color:var(--x-ink);font:600 14px/1 var(--x-font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .05s}.btn:hover{border-color:var(--x-brand);text-decoration:none}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.primary{background:var(--x-brand);border-color:var(--x-brand);color:#fff}.btn.primary:hover{background:var(--x-brand-strong)}.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--x-surface)}.btn.danger{color:var(--x-bad)}.btn.sm{height:30px;padding:0 10px;font-size:13px}.btn.lg{height:48px;padding:0 22px;font-size:16px;border-radius:10px}.icon-btn{width:32px;padding:0}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field>span,.label{font-size:13px;font-weight:600;color:var(--x-muted)}.field small,.hint{font-size:12px;color:var(--x-faint)}.input,select.input,textarea.input{width:100%;min-height:38px;padding:8px 12px;border-radius:var(--x-radius-sm);border:1px solid var(--x-line);background:var(--x-bg);color:var(--x-ink);font:14px/1.4 var(--x-font)}textarea.input{min-height:80px;resize:vertical}.input:focus{outline:none;border-color:var(--x-brand);box-shadow:0 0 0 3px var(--x-brand-soft)}.input.invalid{border-color:var(--x-bad)}.check{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px;cursor:pointer}.row{display:flex;gap:12px;align-items:center}.row.wrap{flex-wrap:wrap}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px}.spacer{flex:1}.muted{color:var(--x-muted)}.faint{color:var(--x-faint)}.small{font-size:13px}.error-text{color:var(--x-bad);font-size:13px}.ok-text{color:var(--x-ok)}.card{background:var(--x-bg);border:1px solid var(--x-line);border-radius:var(--x-radius);padding:20px;box-shadow:var(--x-shadow)}.card+.card{margin-top:16px}.card h3{font-size:15px}.chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;background:var(--x-surface);color:var(--x-muted);font-size:12px;font-weight:600;white-space:nowrap}.chip.brand{background:var(--x-brand-soft);color:var(--x-brand)}.chip.signal{background:var(--x-signal-soft);color:var(--x-signal)}.chip.ok{background:light-dark(#e6f5ec,#10301f);color:var(--x-ok)}.chip.warn{background:light-dark(#fdf1df,#33250c);color:var(--x-warn)}.chip.bad{background:light-dark(#fde8e9,#3a1416);color:var(--x-bad)}.banner{padding:12px 16px;border-radius:var(--x-radius-sm);background:var(--x-surface);border:1px solid var(--x-line);margin-bottom:16px;font-size:14px}.banner.bad{background:light-dark(#fde8e9,#3a1416);border-color:transparent;color:var(--x-bad)}.banner.ok{background:light-dark(#e6f5ec,#10301f);border-color:transparent;color:var(--x-ok)}table.table{width:100%;border-collapse:collapse;font-size:14px}.table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--x-faint);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--x-line)}.table td{padding:12px;border-bottom:1px solid var(--x-line);vertical-align:middle}.table tr:hover td{background:var(--x-surface)}dialog.sheet{border:1px solid var(--x-line);border-radius:16px;padding:0;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);background:var(--x-bg);color:var(--x-ink);box-shadow:var(--x-shadow)}dialog.sheet::backdrop{background:#0a0c1673;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sheet-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--x-line)}.sheet-head h2{margin:0;font-size:18px}.sheet-body{padding:20px 22px;overflow:auto;max-height:calc(100vh - 200px)}.sheet-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--x-line)}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--x-line);margin-bottom:20px;overflow-x:auto}.tabs button{border:0;background:transparent;padding:10px 14px;font:600 14px var(--x-font);color:var(--x-muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}.tabs button.on{color:var(--x-brand);border-bottom-color:var(--x-brand)}.empty{text-align:center;padding:48px 16px;color:var(--x-muted)}.empty h3{color:var(--x-ink)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1000;background:var(--x-ink);color:var(--x-bg);padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:var(--x-shadow)}.skeleton{background:linear-gradient(90deg,var(--x-surface),var(--x-line),var(--x-surface));background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:6px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}