:root{--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--text-xs: 11px;--text-sm: 13px;--text-base: 14px;--text-md: 15px;--text-lg: 17px;--text-xl: 20px;--text-2xl: 26px;--text-3xl: 34px;--text-4xl: 44px;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--space-0: 0;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .32s cubic-bezier(.4, 0, .2, 1);--max-content: 1120px;--header-height: 60px}[data-theme=light]{color-scheme:light;--primary: #5b5bf6;--primary-hover: #4747e8;--primary-soft: rgba(91, 91, 246, .1);--primary-contrast: #ffffff;--accent: #10b9a6;--bg: #f7f8fb;--bg-elevated: #ffffff;--surface: #ffffff;--surface-muted: #f1f3f7;--surface-hover: #eef0f5;--border: rgba(20, 25, 45, .08);--border-strong: rgba(20, 25, 45, .16);--text-primary: #0f1220;--text-secondary: #3d4256;--text-muted: #6b7088;--text-inverse: #ffffff;--success: #10b981;--success-soft: rgba(16, 185, 129, .12);--warning: #f59e0b;--warning-soft: rgba(245, 158, 11, .14);--danger: #ef4444;--danger-soft: rgba(239, 68, 68, .12);--info: #3b82f6;--info-soft: rgba(59, 130, 246, .12);--neutral: #6b7088;--neutral-soft: rgba(107, 112, 136, .14);--gradient-hero: radial-gradient( ellipse 80% 70% at 50% -10%, rgba(91, 91, 246, .22), transparent 60% ), linear-gradient(135deg, #eef1ff 0%, #f7f8fb 60%);--gradient-primary: linear-gradient(135deg, #6a6afc 0%, #8b5cf6 100%);--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);--shadow-xs: 0 1px 2px rgba(17, 24, 39, .06);--shadow-sm: 0 2px 6px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04);--shadow-md: 0 6px 16px rgba(17, 24, 39, .08), 0 2px 4px rgba(17, 24, 39, .04);--shadow-lg: 0 20px 40px -12px rgba(17, 24, 39, .18), 0 4px 10px rgba(17, 24, 39, .06);--shadow-glow: 0 0 0 4px rgba(91, 91, 246, .18);--code-bg: #0f1220;--code-fg: #e4e7ef;--code-muted: #8a90a8}:root,[data-theme=dark]{color-scheme:dark;--primary: #8b8bff;--primary-hover: #a5a5ff;--primary-soft: rgba(139, 139, 255, .16);--primary-contrast: #0f1220;--accent: #2dd4bf;--bg: #0a0c14;--bg-elevated: #12151f;--surface: #161a26;--surface-muted: #1b2030;--surface-hover: #212739;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text-primary: #f2f4fa;--text-secondary: #c7cbdc;--text-muted: #8a90a8;--text-inverse: #0f1220;--success: #34d399;--success-soft: rgba(52, 211, 153, .14);--warning: #fbbf24;--warning-soft: rgba(251, 191, 36, .16);--danger: #f87171;--danger-soft: rgba(248, 113, 113, .16);--info: #60a5fa;--info-soft: rgba(96, 165, 250, .16);--neutral: #8a90a8;--neutral-soft: rgba(138, 144, 168, .18);--gradient-hero: radial-gradient( ellipse 80% 70% at 50% -10%, rgba(139, 139, 255, .28), transparent 60% ), linear-gradient(135deg, rgba(20, 24, 48, .85) 0%, rgba(10, 12, 20, .7) 60%);--gradient-primary: linear-gradient(135deg, #8b8bff 0%, #b08cff 100%);--gradient-success: linear-gradient(135deg, #34d399 0%, #10b981 100%);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 2px 6px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 6px 16px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .3);--shadow-glow: 0 0 0 4px rgba(139, 139, 255, .28);--code-bg: #05070d;--code-fg: #e4e7ef;--code-muted: #8a90a8}@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--primary: #8b8bff;--primary-hover: #a5a5ff;--primary-soft: rgba(139, 139, 255, .16);--primary-contrast: #0f1220;--accent: #2dd4bf;--bg: #0a0c14;--bg-elevated: #12151f;--surface: #161a26;--surface-muted: #1b2030;--surface-hover: #212739;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text-primary: #f2f4fa;--text-secondary: #c7cbdc;--text-muted: #8a90a8;--text-inverse: #0f1220;--success: #34d399;--success-soft: rgba(52, 211, 153, .14);--warning: #fbbf24;--warning-soft: rgba(251, 191, 36, .16);--danger: #f87171;--danger-soft: rgba(248, 113, 113, .16);--info: #60a5fa;--info-soft: rgba(96, 165, 250, .16);--neutral: #8a90a8;--neutral-soft: rgba(138, 144, 168, .18);--gradient-hero: radial-gradient( ellipse 80% 70% at 50% -10%, rgba(139, 139, 255, .28), transparent 60% ), linear-gradient(135deg, rgba(20, 24, 48, .85) 0%, rgba(10, 12, 20, .7) 60%);--gradient-primary: linear-gradient(135deg, #8b8bff 0%, #b08cff 100%);--gradient-success: linear-gradient(135deg, #34d399 0%, #10b981 100%);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 2px 6px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 6px 16px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .3);--shadow-glow: 0 0 0 4px rgba(139, 139, 255, .28);--code-bg: #05070d;--code-fg: #e4e7ef;--code-muted: #8a90a8}}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}html{background:var(--bg)}body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:1.55;color:var(--text-primary);background:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;transition:color var(--transition-base)}@media(prefers-color-scheme:dark){html:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-image:radial-gradient(ellipse 600px 400px at 20% 40%,rgba(91,91,246,.07) 0%,transparent 70%),radial-gradient(ellipse 500px 500px at 75% 20%,rgba(139,139,255,.05) 0%,transparent 70%),radial-gradient(ellipse 400px 350px at 50% 80%,rgba(74,222,128,.04) 0%,transparent 70%),radial-gradient(ellipse 450px 300px at 85% 65%,rgba(167,139,250,.04) 0%,transparent 70%);background-size:200% 200%;animation:meshDrift 25s ease-in-out infinite alternate}}[data-theme=dark] html:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-image:radial-gradient(ellipse 600px 400px at 20% 40%,rgba(91,91,246,.07) 0%,transparent 70%),radial-gradient(ellipse 500px 500px at 75% 20%,rgba(139,139,255,.05) 0%,transparent 70%),radial-gradient(ellipse 400px 350px at 50% 80%,rgba(74,222,128,.04) 0%,transparent 70%),radial-gradient(ellipse 450px 300px at 85% 65%,rgba(167,139,250,.04) 0%,transparent 70%);background-size:200% 200%;animation:meshDrift 25s ease-in-out infinite alternate}@keyframes meshDrift{0%{background-position:0% 0%}25%{background-position:30% 20%}50%{background-position:60% 40%}75%{background-position:40% 70%}to{background-position:10% 50%}}@media(prefers-reduced-motion:reduce){html:after,[data-theme=dark] html:after{animation:none!important}}h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--weight-semibold);letter-spacing:-.01em;color:var(--text-primary)}h1{font-size:var(--text-3xl);letter-spacing:-.02em;font-weight:var(--weight-bold)}h2{font-size:var(--text-2xl);letter-spacing:-.015em}h3{font-size:var(--text-lg)}p{margin:0}a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-hover)}button{font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}code,pre{font-family:var(--font-mono)}:where(button,a,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full);border:2px solid var(--bg)}*::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--primary-soft);color:var(--text-primary)}main{min-height:calc(100vh - var(--header-height));animation:fade-in .3s ease both;position:relative;z-index:2}.container{width:100%;max-width:var(--max-content);margin:0 auto;padding:0 var(--space-6)}.container-narrow{width:100%;max-width:820px;margin:0 auto;padding:0 var(--space-6)}.stack{display:flex;flex-direction:column}.row{display:flex;align-items:center}.grow{flex:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field-label{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);margin-bottom:var(--space-2)}.field-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2)}.field-error{font-size:var(--text-xs);color:var(--danger);margin-top:var(--space-2)}@media(max-width:760px){.app-header{padding-inline:var(--space-4)!important}.app-header-inner{gap:var(--space-2)!important}.app-header-left{gap:var(--space-3)!important;min-width:0}.app-brand-label,.app-user-label{display:none!important}.app-brand-button{flex:0 0 auto}.nav-link{padding-inline:9px!important}.app-nav-label{display:none}}@media(max-width:420px){.app-header{padding-inline:var(--space-3)!important}.app-header-inner{gap:var(--space-1)!important}.app-header-left{gap:var(--space-2)!important}.nav-link{padding-inline:7px!important}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.94)}}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--pulse-color, rgba(16, 185, 129, .6))}70%{box-shadow:0 0 0 10px #0000}to{box-shadow:0 0 #0000}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@keyframes blink{50%{opacity:.35}}.animate-fade-in{animation:fade-in var(--transition-slow) ease both}.animate-slide-up{animation:slide-up var(--transition-slow) cubic-bezier(.2,.8,.2,1) both}.animate-slide-down{animation:slide-down var(--transition-slow) cubic-bezier(.2,.8,.2,1) both}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin .8s linear infinite}.shimmer{background:linear-gradient(90deg,var(--surface-muted) 0%,var(--surface-hover) 50%,var(--surface-muted) 100%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}.stagger{animation-delay:calc(var(--stagger, 0) * 60ms)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-md);font-family:inherit;font-weight:var(--weight-medium);cursor:pointer;white-space:nowrap;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);-webkit-user-select:none;user-select:none;line-height:1}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-sm{padding:6px 12px;font-size:var(--text-sm);height:30px;border-radius:var(--radius-sm)}.btn-md{padding:8px 16px;font-size:var(--text-sm);height:36px}.btn-lg{padding:12px 22px;font-size:var(--text-md);height:44px}.btn-primary{background:var(--primary);color:var(--primary-contrast);box-shadow:var(--shadow-xs)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--shadow-sm)}.btn-secondary{background:var(--surface);color:var(--text-primary);border-color:var(--border-strong)}.btn-secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--surface-muted);color:var(--text-primary)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 85%,black)}.btn-block{width:100%}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.btn-icon:hover{background:var(--surface-muted);color:var(--text-primary)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base),background var(--transition-base);overflow:hidden}.card-interactive{cursor:pointer}.card-interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-padded{padding:var(--space-6)}.card-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.card-body{padding:var(--space-6)}.card-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);background:var(--surface-muted);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2)}.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.02em;text-transform:capitalize;line-height:1.4;white-space:nowrap;border:1px solid transparent}.badge-success{background:var(--success-soft);color:var(--success)}.badge-warning{background:var(--warning-soft);color:var(--warning)}.badge-danger{background:var(--danger-soft);color:var(--danger)}.badge-info{background:var(--info-soft);color:var(--info)}.badge-neutral{background:var(--neutral-soft);color:var(--text-muted)}.badge-primary{background:var(--primary-soft);color:var(--primary)}.input,.textarea,.select{width:100%;background:var(--surface);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:10px 12px;font-size:var(--text-sm);line-height:1.45;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.input::placeholder,.textarea::placeholder{color:var(--text-muted)}.input:hover,.textarea:hover,.select:hover{border-color:var(--text-muted)}.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-glow)}.input-mono{font-family:var(--font-mono)}.input-error,.textarea-error{border-color:var(--danger)}.input-error:focus,.textarea-error:focus{box-shadow:0 0 0 4px var(--danger-soft)}.textarea{resize:vertical;min-height:96px}.spinner{display:inline-block;width:var(--spinner-size, 18px);height:var(--spinner-size, 18px);border:2px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.spinner-sm{--spinner-size: 14px;border-width:2px}.spinner-md{--spinner-size: 18px}.spinner-lg{--spinner-size: 28px;border-width:3px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-10) var(--space-6);gap:var(--space-3)}.empty-state-icon{width:64px;height:64px;border-radius:var(--radius-full);background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2)}.empty-state h3{font-size:var(--text-lg);color:var(--text-primary)}.empty-state p{color:var(--text-muted);max-width:420px;font-size:var(--text-sm)}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--dot-color, var(--neutral));position:relative;flex-shrink:0}.status-dot-live:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--dot-color, var(--success));opacity:.6;animation:pulse 1.6s ease-in-out infinite}.status-dot-success{--dot-color: var(--success);--pulse-color: rgba(16, 185, 129, .6)}.status-dot-danger{--dot-color: var(--danger);--pulse-color: rgba(239, 68, 68, .6)}.status-dot-warning{--dot-color: var(--warning);--pulse-color: rgba(245, 158, 11, .6)}.status-dot-info{--dot-color: var(--info);--pulse-color: rgba(59, 130, 246, .6)}.status-dot-neutral{--dot-color: var(--neutral)}.progress{position:relative;width:100%;height:8px;background:var(--surface-muted);border-radius:var(--radius-full);overflow:hidden}.progress-sm{height:4px}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:inherit;transition:width .5s cubic-bezier(.2,.8,.2,1)}.progress-fill-success{background:var(--gradient-success)}.progress-fill-danger{background:var(--danger)}.progress-indeterminate{position:absolute;top:0;bottom:0;width:40%;background:var(--gradient-primary);border-radius:inherit;animation:indeterminate 1.4s cubic-bezier(.4,0,.2,1) infinite}.tabs{display:flex;gap:2px;padding:4px;background:var(--surface-muted);border-radius:var(--radius-md);width:fit-content}.tabs-underline{background:transparent;padding:0;border-bottom:1px solid var(--border);border-radius:0;gap:var(--space-2);width:100%}.tab{background:transparent;border:none;padding:8px 14px;border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast)}.tab:hover{color:var(--text-primary)}.tab-active{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-xs)}.tabs-underline .tab{border-radius:0;border-bottom:2px solid transparent;padding:10px 4px;margin-bottom:-1px}.tabs-underline .tab-active{background:transparent;color:var(--primary);border-bottom-color:var(--primary);box-shadow:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0c148c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fade-in .18s ease both}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:540px;max-height:calc(100vh - 2 * var(--space-4));overflow:auto;animation:slide-up .24s cubic-bezier(.2,.8,.2,1) both}