:root{color-scheme:light;--color-bg: #F0F2F5;--color-surface: #FFFFFF;--color-surface-2: #F8FAFC;--color-surface-3: #EEF2F7;--color-border: #E2E8F0;--color-border-strong: #CBD5E1;--color-primary: #2563EB;--color-primary-hover: #1D4ED8;--color-primary-light: #EFF6FF;--color-danger: #DC2626;--color-danger-hover: #B91C1C;--color-danger-light: #FEF2F2;--color-success: #16A34A;--color-success-light: #F0FDF4;--color-warning: #D97706;--color-warning-light: #FFFBEB;--color-text: #111827;--color-text-2: #374151;--color-text-muted: #6B7280;--color-text-placeholder: #9CA3AF;--chrome-bg: #1E293B;--chrome-border: #334155;--chrome-border-strong: #475569;--chrome-text: #F1F5F9;--chrome-text-muted: #94A3B8;--chrome-surface: #0F172A;--chrome-surface-2: #0f172a;--chrome-hover: #334155;--chrome-accent: #38bdf8;--color-info-bg: #EFF6FF;--color-info-border: #BFDBFE;--color-info-text: #1E40AF;--color-warn-bg: #FFFBEB;--color-warn-border: #FDE68A;--color-warn-text: #92400E;--color-ok-bg: #DCFCE7;--color-ok-text: #166534;--color-err-bg: #FEE2E2;--color-err-text: #991B1B;--color-err-border: #FECACA;--preview-stage-bg: #0f172a;--preview-code-bg: #0f172a;--preview-code-text: #e2e8f0;--sidebar-width: 240px;--topbar-height: 56px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);--font: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}[data-theme=dark]{color-scheme:dark;--color-bg: #0f1117;--color-surface: #181b24;--color-surface-2: #1f2430;--color-surface-3: #282e3d;--color-border: #2c3345;--color-border-strong: #3a4358;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-light: #1a2f52;--color-danger: #f87171;--color-danger-hover: #ef4444;--color-danger-light: #3b2224;--color-success: #4ade80;--color-success-light: #152a1f;--color-warning: #fbbf24;--color-warning-light: #2d2612;--color-text: #e8eaed;--color-text-2: #c5cad6;--color-text-muted: #8b92a5;--color-text-placeholder: #5f677c;--chrome-bg: #12151d;--chrome-border: #2a3040;--chrome-border-strong: #3d4660;--chrome-text: #e8eaed;--chrome-text-muted: #8b92a5;--chrome-surface: #0c0e14;--chrome-surface-2: #161a24;--chrome-hover: #252b3a;--chrome-accent: #60a5fa;--color-info-bg: #152238;--color-info-border: #2a4570;--color-info-text: #93c5fd;--color-warn-bg: #2a2310;--color-warn-border: #5c4a1a;--color-warn-text: #fcd34d;--color-ok-bg: #152a1f;--color-ok-text: #86efac;--color-err-bg: #3b2224;--color-err-text: #fca5a5;--color-err-border: #5c3035;--preview-stage-bg: #080a0f;--preview-code-bg: #080a0f;--preview-code-text: #cbd5e1;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .35);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .45), 0 4px 6px -4px rgb(0 0 0 / .35)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);font-size:14px;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}#app{height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}h1{font-size:22px;font-weight:700}h2{font-size:18px;font-weight:700}h3{font-size:15px;font-weight:600}h4{font-size:13px;font-weight:600}.btn{display:inline-flex;align-items:center;gap:6px;padding:0 14px;height:34px;border:1px solid transparent;border-radius:var(--radius-md);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap;text-decoration:none}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-surface);color:var(--color-text-2);border-color:var(--color-border-strong)}.btn-secondary:hover{background:var(--color-surface-2)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:var(--color-danger-hover)}.btn-ghost{background:transparent;color:var(--color-text-muted);border-color:transparent}.btn-ghost:hover{background:var(--color-surface-2);color:var(--color-text)}.btn-sm{height:28px;padding:0 10px;font-size:12px}.btn-icon{width:34px;padding:0;justify-content:center}.btn-icon.btn-sm{width:28px}.btn:disabled{opacity:.5;cursor:not-allowed}.form-label{display:block;font-size:12px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}.form-input,.form-textarea,.form-select{width:100%;padding:7px 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font-size:13px;font-family:var(--font);color:var(--color-text);background:var(--color-surface);transition:border-color .15s,box-shadow .15s;line-height:1.5}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-placeholder)}.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 25%,transparent)}.form-textarea{resize:vertical;min-height:72px}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:32px}.form-group{margin-bottom:14px}.form-group:last-child{margin-bottom:0}.form-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}.form-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:100px;font-size:11px;font-weight:600;line-height:1.4}.badge-blue{background:var(--color-primary-light);color:var(--color-primary)}.badge-green{background:var(--color-success-light);color:var(--color-success)}.badge-gray{background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.divider{height:1px;background:var(--color-border);margin:16px 0}.spinner{width:18px;height:18px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--color-text);color:#fff;border-radius:var(--radius-md);font-size:13px;box-shadow:var(--shadow-lg);animation:toast-in .2s ease}.toast.toast-success{background:var(--color-success)}.toast.toast-error{background:var(--color-danger)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}