:root{--color-primary: #6400ee;--color-primary-soft: rgba(100, 0, 238, .1);--color-secondary: #35495e;--color-success: #5bca4d;--color-success-soft: rgba(91, 202, 77, .1);--color-error: #d84947;--color-error-soft: rgba(216, 73, 71, .1);--color-warning: #e3a600;--color-warning-soft: rgba(227, 166, 0, .1);--color-info: #666efd;--color-info-soft: rgba(102, 110, 253, .1);--color-bg: #1a1a2e;--color-surface: #1e293b;--color-text: #ffffff;--color-text-muted: #94a3b8;--color-text-secondary: #64748b;--color-border: #334155;--color-input-bg: #1e293b;--color-preview-bg: #16213e;--color-surface-hover: rgba(255, 255, 255, .05);--color-switch-knob: #1a1a2e;--radius-xxl: 1rem;--radius-xl: .875rem;--radius-lg: .75rem;--radius-base: .625rem;--radius-md: .5rem;--radius-sm: .375rem;--radius-xs: .25rem;--shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .05);--bg-gradient-start: #1a1a2e;--bg-gradient-end: #16213e}[data-theme=light]{--color-bg: #f0f1f5;--color-surface: #ffffff;--color-text: #000000;--color-text-muted: #555555;--color-text-secondary: #475569;--color-border: #e0e0e1;--color-input-bg: #ffffff;--color-preview-bg: #f7f8fa;--color-surface-hover: #f7f8fa;--color-switch-knob: #ffffff;--bg-gradient-start: #f0f1f5;--bg-gradient-end: #f0f1f5}*{margin:0;padding:0;box-sizing:border-box}html{background-color:var(--color-bg);background-attachment:fixed;min-height:100vh;transition:background .3s ease}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:transparent;color:var(--color-text);min-height:100vh;transition:color .3s ease}::-webkit-scrollbar{width:.375rem;height:.375rem}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:.625rem}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}#app{width:100%;min-height:100vh;position:relative;overflow-x:hidden}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}.bounce-enter-active{animation:bounce-in .6s ease}.bounce-leave-active{animation:bounce-in .6s ease reverse}@keyframes bounce-in{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.slide-enter-active,.slide-leave-active{transition:all .5s cubic-bezier(.4,0,.2,1)}.slide-enter-from{transform:translate(-100%);opacity:0}.slide-leave-to{transform:translate(100%);opacity:0}