:root{--primitive-neutral-0: #ffffff;--primitive-neutral-50: #faf9f5;--primitive-neutral-100: #e5e7eb;--primitive-neutral-200: #dcd6c4;--primitive-neutral-250: #d4d4d0;--primitive-neutral-300: #d1d5db;--primitive-neutral-350: #c4bfa9;--primitive-neutral-400: #a8a8a0;--primitive-neutral-500: #6b6759;--primitive-neutral-600: #55554f;--primitive-neutral-650: #4d4d49;--primitive-neutral-700: #444440;--primitive-neutral-750: #3a3a37;--primitive-neutral-800: #383834;--primitive-neutral-850: #374151;--primitive-neutral-900: #2b2b28;--primitive-neutral-950: #252525;--primitive-slate-50: #f8fafc;--primitive-slate-100: #f1f5f9;--primitive-slate-200: #e2e8f0;--primitive-slate-300: #cbd5e1;--primitive-slate-400: #94a3b8;--primitive-slate-500: #64748b;--primitive-slate-600: #565f6f;--primitive-slate-700: #313744;--primitive-slate-800: #232730;--primitive-slate-850: #1c2027;--primitive-slate-900: #14171d;--primitive-slate-950: #0b0d10;--primitive-yellow-100: #fff9b2;--primitive-yellow-200: #fef08a;--primitive-yellow-800: #363427;--primitive-yellow-900: #383000;--primitive-yellow-alpha-16: rgba(254, 240, 138, .16);--primitive-red-100: #fee2e2;--primitive-red-400: #f87171;--primitive-red-600: #dc2626;--primitive-red-700: #c62828;--primitive-red-alpha-12: rgba(248, 113, 113, .12);--primitive-orange-100: #ffedd5;--primitive-orange-400: #fb923c;--primitive-orange-600: #ea580c;--primitive-orange-alpha-12: rgba(251, 146, 60, .12);--primitive-green-100: #dcfce7;--primitive-green-400: #4ade80;--primitive-green-600: #16a34a;--primitive-green-alpha-12: rgba(74, 222, 128, .12);--primitive-purple-100: #e4d9fb;--primitive-purple-200: #e9d5ff;--primitive-purple-300: #cbb6f8;--primitive-purple-600: #7c3aed;--primitive-purple-700: #524378;--primitive-purple-800: #3a2f55;--primitive-purple-900: #2e1065;--primitive-blue-100: #dbeafe;--primitive-blue-200: #bfdbfe;--primitive-blue-300: #93c5fd;--primitive-blue-500: #3b82f6;--primitive-blue-600: #2563eb;--primitive-blue-700: #1d4ed8;--primitive-blue-800: #1e3a5f;--primitive-blue-900: #1e3a8a;--primitive-emerald-100: #d1fae5;--primitive-emerald-200: #a7f3d0;--primitive-emerald-300: #6ee7b7;--primitive-emerald-600: #059669;--primitive-emerald-700: #047857;--primitive-emerald-800: #1b4332;--primitive-emerald-900: #064e3b;--primitive-amber-100: #fef3c7;--primitive-amber-200: #fde68a;--primitive-amber-300: #fcd34d;--primitive-amber-600: #d97706;--primitive-amber-700: #b45309;--primitive-amber-800: #45321b;--primitive-amber-900: #78350f;--primitive-rose-100: #ffe4e6;--primitive-rose-200: #fecdd3;--primitive-rose-300: #fda4af;--primitive-rose-600: #e11d48;--primitive-rose-700: #be123c;--primitive-rose-800: #4c2330;--primitive-rose-900: #881337;--primitive-cyan-100: #cffafe;--primitive-cyan-200: #a5f3fc;--primitive-cyan-300: #67e8f9;--primitive-cyan-600: #0891b2;--primitive-cyan-700: #0e7490;--primitive-cyan-800: #1e3f47;--primitive-cyan-900: #164e63;--primitive-alpha-white-85: rgba(255, 255, 255, .85);--primitive-alpha-dark-85: rgba(20, 23, 29, .85);--primitive-alpha-black-05: rgba(0, 0, 0, .05);--primitive-shadow-control-light: 0 1px 3px rgba(0, 0, 0, .05);--primitive-shadow-control-dark: 0 1px 3px rgba(0, 0, 0, .28);--primitive-shadow-card-light: 0 4px 10px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .04);--primitive-shadow-card-hover-light: 0 8px 16px rgba(0, 0, 0, .12);--primitive-shadow-card-dark: 0 4px 14px rgba(0, 0, 0, .42), 0 1px 3px rgba(0, 0, 0, .24);--primitive-shadow-card-hover-dark: 0 8px 18px rgba(0, 0, 0, .55);--primitive-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--primitive-font-code: "JetBrains Mono", Consolas, Menlo, monospace;--primitive-transition-fast: .15s ease;--primitive-transition-base: .2s ease}:root,[data-theme=light]{color-scheme:light;--semantic-accent-surface: var(--primitive-blue-100);--semantic-accent-content: var(--primitive-blue-900);--semantic-accent-border: var(--primitive-blue-300);--semantic-accent-solid: var(--primitive-slate-950);--semantic-accent-solid-hover: var(--primitive-slate-800);--semantic-accent-contrast: var(--primitive-neutral-0);--semantic-surface-canvas: var(--primitive-slate-50);--semantic-surface-elevated: var(--primitive-neutral-0);--semantic-surface-interactive: var(--primitive-neutral-0);--semantic-surface-interactive-hover: var(--primitive-slate-100);--semantic-surface-highlight: var(--primitive-yellow-100);--semantic-surface-subtle: var(--primitive-slate-100);--semantic-content-primary: var(--primitive-slate-950);--semantic-content-muted: var(--primitive-slate-500);--semantic-content-highlight: var(--primitive-yellow-900);--semantic-content-subtle: var(--primitive-slate-400);--semantic-content-danger: var(--primitive-red-600);--semantic-border-default: var(--primitive-slate-200);--semantic-border-interactive: var(--primitive-slate-300);--semantic-border-highlight: var(--primitive-alpha-black-05);--semantic-border-frame: var(--primitive-neutral-350);--semantic-border-subtle: var(--primitive-slate-100);--semantic-border-connector: var(--primitive-slate-400);--semantic-elevation-control: var(--primitive-shadow-control-light);--semantic-elevation-card: var(--primitive-shadow-card-light);--semantic-elevation-card-hover: var(--primitive-shadow-card-hover-light);--semantic-status-pass: var(--primitive-green-600);--semantic-status-pass-surface: var(--primitive-green-100);--semantic-status-action: var(--primitive-blue-600);--semantic-status-warn: var(--primitive-orange-600);--semantic-status-warn-surface: var(--primitive-orange-100);--semantic-status-fail: var(--primitive-red-600);--semantic-status-fail-surface: var(--primitive-red-100)}[data-theme=dark]{color-scheme:dark;--semantic-accent-surface: var(--primitive-blue-800);--semantic-accent-content: var(--primitive-blue-200);--semantic-accent-border: var(--primitive-blue-700);--semantic-accent-solid: var(--primitive-blue-600);--semantic-accent-solid-hover: var(--primitive-blue-700);--semantic-accent-contrast: var(--primitive-neutral-0);--semantic-surface-canvas: var(--primitive-slate-950);--semantic-surface-elevated: var(--primitive-slate-900);--semantic-surface-interactive: var(--primitive-slate-900);--semantic-surface-interactive-hover: var(--primitive-slate-850);--semantic-surface-highlight: var(--primitive-yellow-800);--semantic-surface-subtle: var(--primitive-slate-850);--semantic-content-primary: var(--primitive-slate-100);--semantic-content-muted: var(--primitive-slate-400);--semantic-content-highlight: var(--primitive-yellow-200);--semantic-content-subtle: var(--primitive-slate-600);--semantic-content-danger: var(--primitive-red-400);--semantic-border-default: var(--primitive-slate-800);--semantic-border-interactive: var(--primitive-slate-700);--semantic-border-highlight: var(--primitive-yellow-alpha-16);--semantic-border-frame: var(--primitive-neutral-600);--semantic-border-subtle: #1a1e25;--semantic-border-connector: var(--primitive-slate-600);--semantic-elevation-control: var(--primitive-shadow-control-dark);--semantic-elevation-card: var(--primitive-shadow-card-dark);--semantic-elevation-card-hover: var(--primitive-shadow-card-hover-dark);--semantic-status-pass: var(--primitive-green-400);--semantic-status-pass-surface: var(--primitive-green-alpha-12);--semantic-status-action: var(--primitive-blue-500);--semantic-status-warn: var(--primitive-orange-400);--semantic-status-warn-surface: var(--primitive-orange-alpha-12);--semantic-status-fail: var(--primitive-red-400);--semantic-status-fail-surface: var(--primitive-red-alpha-12)}:root[data-accent=purple],[data-theme=light][data-accent=purple]{--semantic-accent-surface: var(--primitive-purple-100);--semantic-accent-content: var(--primitive-purple-900);--semantic-accent-border: var(--primitive-purple-300);--semantic-accent-solid: var(--primitive-purple-700);--semantic-accent-solid-hover: var(--primitive-purple-800)}:root[data-accent=blue],[data-theme=light][data-accent=blue]{--semantic-accent-surface: var(--primitive-blue-100);--semantic-accent-content: var(--primitive-blue-900);--semantic-accent-border: var(--primitive-blue-300);--semantic-accent-solid: var(--primitive-slate-950);--semantic-accent-solid-hover: var(--primitive-slate-800)}:root[data-accent=emerald],[data-theme=light][data-accent=emerald]{--semantic-accent-surface: var(--primitive-emerald-100);--semantic-accent-content: var(--primitive-emerald-900);--semantic-accent-border: var(--primitive-emerald-300);--semantic-accent-solid: var(--primitive-emerald-700);--semantic-accent-solid-hover: var(--primitive-emerald-800)}:root[data-accent=amber],[data-theme=light][data-accent=amber]{--semantic-accent-surface: var(--primitive-amber-100);--semantic-accent-content: var(--primitive-amber-900);--semantic-accent-border: var(--primitive-amber-300);--semantic-accent-solid: var(--primitive-amber-700);--semantic-accent-solid-hover: var(--primitive-amber-800)}:root[data-accent=rose],[data-theme=light][data-accent=rose]{--semantic-accent-surface: var(--primitive-rose-100);--semantic-accent-content: var(--primitive-rose-900);--semantic-accent-border: var(--primitive-rose-300);--semantic-accent-solid: var(--primitive-rose-700);--semantic-accent-solid-hover: var(--primitive-rose-800)}:root[data-accent=cyan],[data-theme=light][data-accent=cyan]{--semantic-accent-surface: var(--primitive-cyan-100);--semantic-accent-content: var(--primitive-cyan-900);--semantic-accent-border: var(--primitive-cyan-300);--semantic-accent-solid: var(--primitive-cyan-700);--semantic-accent-solid-hover: var(--primitive-cyan-800)}[data-theme=dark][data-accent=purple]{--semantic-accent-surface: var(--primitive-purple-800);--semantic-accent-content: var(--primitive-purple-200);--semantic-accent-border: var(--primitive-purple-700);--semantic-accent-solid: var(--primitive-purple-600);--semantic-accent-solid-hover: var(--primitive-purple-700)}[data-theme=dark][data-accent=blue]{--semantic-accent-surface: var(--primitive-blue-800);--semantic-accent-content: var(--primitive-blue-200);--semantic-accent-border: var(--primitive-blue-700);--semantic-accent-solid: var(--primitive-blue-600);--semantic-accent-solid-hover: var(--primitive-blue-700)}[data-theme=dark][data-accent=emerald]{--semantic-accent-surface: var(--primitive-emerald-800);--semantic-accent-content: var(--primitive-emerald-200);--semantic-accent-border: var(--primitive-emerald-700);--semantic-accent-solid: var(--primitive-emerald-600);--semantic-accent-solid-hover: var(--primitive-emerald-700)}[data-theme=dark][data-accent=amber]{--semantic-accent-surface: var(--primitive-amber-800);--semantic-accent-content: var(--primitive-amber-200);--semantic-accent-border: var(--primitive-amber-700);--semantic-accent-solid: var(--primitive-amber-600);--semantic-accent-solid-hover: var(--primitive-amber-700)}[data-theme=dark][data-accent=rose]{--semantic-accent-surface: var(--primitive-rose-800);--semantic-accent-content: var(--primitive-rose-200);--semantic-accent-border: var(--primitive-rose-700);--semantic-accent-solid: var(--primitive-rose-600);--semantic-accent-solid-hover: var(--primitive-rose-700)}[data-theme=dark][data-accent=cyan]{--semantic-accent-surface: var(--primitive-cyan-800);--semantic-accent-content: var(--primitive-cyan-200);--semantic-accent-border: var(--primitive-cyan-700);--semantic-accent-solid: var(--primitive-cyan-600);--semantic-accent-solid-hover: var(--primitive-cyan-700)}:root{--page-bg: var(--semantic-surface-canvas);--page-text: var(--semantic-content-primary);--font-ui: var(--primitive-font-ui);--font-code: var(--primitive-font-code);--shell-header-bg: var(--semantic-surface-elevated);--shell-header-border: var(--semantic-border-default);--shell-control-bg: var(--semantic-surface-interactive);--shell-control-bg-hover: var(--semantic-surface-interactive-hover);--shell-control-color: var(--semantic-content-primary);--shell-control-border: var(--semantic-border-default);--shell-control-shadow: var(--semantic-elevation-control);--shell-tab-color: var(--semantic-content-muted);--shell-tab-hover-color: var(--semantic-content-primary);--shell-tab-active-bg: transparent;--shell-tab-active-color: var(--semantic-accent-solid);--shell-tab-active-border: var(--semantic-accent-solid);--btn-bg: var(--semantic-surface-interactive);--btn-bg-hover: var(--semantic-border-interactive);--btn-color: var(--semantic-content-primary);--btn-border: var(--semantic-border-default);--btn-primary-bg: var(--semantic-accent-solid);--btn-primary-bg-hover: var(--semantic-accent-solid-hover);--btn-primary-color: var(--semantic-accent-contrast);--btn-primary-border: var(--semantic-accent-solid);--input-bg: var(--semantic-surface-elevated);--input-color: var(--semantic-content-primary);--input-border: var(--semantic-border-default);--input-border-focus: var(--semantic-border-interactive);--surface-bg: var(--semantic-surface-elevated);--surface-subtle-bg: var(--semantic-surface-subtle);--surface-border: var(--semantic-border-default);--surface-border-subtle: var(--semantic-border-subtle);--frame-border: var(--semantic-border-frame);--frame-title: var(--semantic-content-muted);--swatch-green: var(--semantic-status-pass);--swatch-blue: var(--semantic-status-action);--swatch-red: var(--semantic-status-fail);--swatch-shadow: var(--semantic-elevation-control);--status-success: var(--semantic-status-pass);--status-danger: var(--semantic-status-fail);--status-warn: var(--semantic-status-warn)}[data-theme=dark]{--shell-tab-active-color: var(--semantic-status-action);--shell-tab-active-border: var(--semantic-status-action)}*{box-sizing:border-box}body{margin:0;font-family:var(--font-ui);background-color:var(--page-bg);color:var(--page-text);transition:background-color var(--primitive-transition-fast),color var(--primitive-transition-fast)}app-root{display:flex;flex-direction:column;height:100vh;overflow:hidden}header{border-bottom:1px solid var(--shell-header-border);padding:8px 16px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;background-color:var(--shell-header-bg);transition:background-color var(--primitive-transition-fast),border-color var(--primitive-transition-fast)}nav{border-bottom:1px solid var(--shell-header-border);display:flex;gap:4px;padding:0 28px;flex-shrink:0;background-color:var(--shell-header-bg);transition:background-color var(--primitive-transition-fast),border-color var(--primitive-transition-fast)}.tab{padding:12px 18px;cursor:pointer;font-size:13px;font-weight:500;text-decoration:none;color:var(--shell-tab-color);border:none;border-bottom:2px solid transparent;background:transparent;display:block;transition:color var(--primitive-transition-fast),border-color var(--primitive-transition-fast),background-color var(--primitive-transition-fast)}.tab.active{color:var(--shell-tab-active-color);border-bottom-color:var(--shell-tab-active-border);font-weight:600;background:var(--shell-tab-active-bg)}.tab:hover:not(.active){color:var(--shell-tab-hover-color);background:transparent}main{flex:1;overflow-y:auto;padding:16px}.btn{border:1px solid var(--btn-border);background-color:var(--btn-bg);color:var(--btn-color);padding:4px 10px;cursor:pointer;font-family:var(--font-ui);font-size:12px;border-radius:4px;transition:background-color var(--primitive-transition-fast),color var(--primitive-transition-fast),border-color var(--primitive-transition-fast)}.btn:hover{background-color:var(--btn-bg-hover)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-color);border-color:var(--btn-primary-border);font-weight:600}.btn.primary:hover{opacity:.9;background-color:var(--btn-primary-bg-hover);border-color:var(--btn-primary-bg-hover)}.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}.toolbar h2{margin:0;font-size:15px}.status-text{font-size:12px;opacity:.7}.error-text{color:var(--status-danger);opacity:1}.empty{opacity:.4;font-size:13px;padding:20px 0}.msg{font-size:13px;padding:6px 0}.msg.success{color:var(--status-success)}.msg.error{color:var(--status-danger)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent;border:none}*::-webkit-scrollbar-corner{background:transparent}*::-webkit-scrollbar-button{display:none;width:0;height:0;background:none}*::-webkit-scrollbar-thumb{background-color:#4d4d4db3;background-clip:padding-box;border-radius:2px;border:0 solid transparent}*::-webkit-scrollbar-thumb:vertical{min-height:30px;border-width:0 3px}*::-webkit-scrollbar-thumb:horizontal{min-width:30px;border-width:3px 0}*::-webkit-scrollbar-thumb:hover{background-color:#666666d9}*::-webkit-scrollbar-thumb:vertical:hover{border-width:0}*::-webkit-scrollbar-thumb:horizontal:hover{border-width:0}*::-webkit-scrollbar-thumb:active{background-color:#333333f2}@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:rgba(77,77,77,.7) transparent}}