:root{--color-bg-primary: #0a0a0f;--color-bg-secondary: #12121a;--color-bg-tertiary: #1a1a24;--color-bg-elevated: #22222e;--color-bg-hover: #2a2a38;--glass-bg: rgba(255, 255, 255, .03);--glass-bg-hover: rgba(255, 255, 255, .06);--glass-bg-active: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(255, 255, 255, .15);--glass-border-active: rgba(255, 255, 255, .2);--color-accent-primary: #8b5cf6;--color-accent-secondary: #06b6d4;--color-accent-tertiary: #ec4899;--color-accent-success: #10b981;--color-accent-warning: #f59e0b;--color-accent-error: #ef4444;--gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);--gradient-secondary: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);--gradient-tertiary: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);--gradient-glow: linear-gradient(135deg, rgba(139, 92, 246, .4) 0%, rgba(6, 182, 212, .4) 100%);--gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, .15) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(6, 182, 212, .1) 0%, transparent 40%), radial-gradient(ellipse at 20% 80%, rgba(236, 72, 153, .1) 0%, transparent 40%);--glow-purple: 0 0 20px rgba(139, 92, 246, .3), 0 0 40px rgba(139, 92, 246, .2);--glow-cyan: 0 0 20px rgba(6, 182, 212, .3), 0 0 40px rgba(6, 182, 212, .2);--glow-pink: 0 0 20px rgba(236, 72, 153, .3), 0 0 40px rgba(236, 72, 153, .2);--glow-success: 0 0 20px rgba(16, 185, 129, .3), 0 0 40px rgba(16, 185, 129, .2);--glow-error: 0 0 20px rgba(239, 68, 68, .3), 0 0 40px rgba(239, 68, 68, .2);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--text-muted: rgba(255, 255, 255, .3);--text-disabled: rgba(255, 255, 255, .2);--provider-google: #4285F4;--provider-openai: #00A67E;--provider-bfl: #FF6B35;--provider-bytedance: #FE2C55;--provider-ideogram: #7C3AED;--provider-stability: #8B5CF6;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .6);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .7);--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, .3);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease;--transition-slower: .5s ease;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-toast: 700;--z-tooltip: 800;--sidebar-width: 280px;--sidebar-collapsed-width: 72px;--header-height: 72px;--max-content-width: 1400px}.glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);transition:all var(--transition-base)}.glass:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover)}.glass-subtle{background:#ffffff05;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-xl)}.glass-strong{background:#ffffff0f;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl)}.glass-card{background:linear-gradient(135deg,#ffffff0d,#ffffff05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff0d;transition:all var(--transition-base)}.glass-card:hover{background:linear-gradient(135deg,#ffffff12,#ffffff08);border-color:var(--glass-border-hover);transform:translateY(-2px);box-shadow:0 12px 40px #0006,inset 0 1px #ffffff14}.glass-panel{background:linear-gradient(180deg,#ffffff0a,#ffffff03);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:var(--radius-2xl);box-shadow:0 4px 24px #0003,inset 0 1px #ffffff0a}.glow-border{position:relative}.glow-border:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--gradient-primary);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--transition-base);pointer-events:none}.glow-border:hover:before{opacity:1}.glow-border-active:before{opacity:1}.gradient-border{position:relative;background:var(--color-bg-secondary);border-radius:var(--radius-xl)}.gradient-border:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--gradient-primary);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.glass-button{background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-primary);font-weight:var(--font-medium);padding:var(--space-sm) var(--space-lg);cursor:pointer;transition:all var(--transition-base)}.glass-button:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.glass-button:active{transform:translateY(0)}.glass-input{background:#ffffff08;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);padding:var(--space-md);font-size:var(--text-base);transition:all var(--transition-base);outline:none}.glass-input:hover{border-color:var(--glass-border-hover)}.glass-input:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #8b5cf626}.glass-input::placeholder{color:var(--text-muted)}.glass-overlay{background:#0a0a0fcc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.frosted{background:#ffffff05;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,.05)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulseScale{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes glow{0%,to{box-shadow:var(--glow-purple)}50%{box-shadow:var(--glow-cyan)}}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #8b5cf64d}50%{box-shadow:0 0 40px #8b5cf680}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes floatSlow{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(2deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes progressPulse{0%{box-shadow:0 0 #8b5cf666}70%{box-shadow:0 0 0 15px #8b5cf600}to{box-shadow:0 0 #8b5cf600}}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes borderGlow{0%,to{border-color:#8b5cf680}50%{border-color:#06b6d480}}@keyframes slideProgress{0%{transform:translate(-100%)}to{transform:translate(100%)}}.animate-fade-in{animation:fadeIn var(--transition-base) ease forwards}.animate-fade-out{animation:fadeOut var(--transition-base) ease forwards}.animate-fade-in-up{animation:fadeInUp var(--transition-slow) ease forwards}.animate-fade-in-down{animation:fadeInDown var(--transition-slow) ease forwards}.animate-slide-in-right{animation:slideInRight var(--transition-slow) ease forwards}.animate-slide-in-left{animation:slideInLeft var(--transition-slow) ease forwards}.animate-scale-in{animation:scaleIn var(--transition-base) ease forwards}.animate-scale-out{animation:scaleOut var(--transition-base) ease forwards}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-pulse-scale{animation:pulseScale 2s ease-in-out infinite}.animate-glow{animation:glow 3s ease-in-out infinite}.animate-glow-pulse{animation:glowPulse 2s ease-in-out infinite}.animate-shimmer{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);background-size:200% 100%;animation:shimmer 2s infinite}.animate-float{animation:float 3s ease-in-out infinite}.animate-float-slow{animation:floatSlow 6s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-spin-slow{animation:spinSlow 3s linear infinite}.animate-bounce{animation:bounce 1s infinite}.animate-progress-pulse{animation:progressPulse 2s ease-in-out infinite}.animate-gradient{background-size:200% 200%;animation:gradientMove 5s ease infinite}.animate-border-glow{animation:borderGlow 2s ease-in-out infinite}.stagger-children>*{opacity:0;animation:fadeInUp var(--transition-slow) ease forwards}.stagger-children>*:nth-child(1){animation-delay:.05s}.stagger-children>*:nth-child(2){animation-delay:.1s}.stagger-children>*:nth-child(3){animation-delay:.15s}.stagger-children>*:nth-child(4){animation-delay:.2s}.stagger-children>*:nth-child(5){animation-delay:.25s}.stagger-children>*:nth-child(6){animation-delay:.3s}.stagger-children>*:nth-child(7){animation-delay:.35s}.stagger-children>*:nth-child(8){animation-delay:.4s}.stagger-children>*:nth-child(9){animation-delay:.45s}.stagger-children>*:nth-child(10){animation-delay:.5s}.hover-lift{transition:transform var(--transition-base),box-shadow var(--transition-base)}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.hover-scale{transition:transform var(--transition-base)}.hover-scale:hover{transform:scale(1.02)}.hover-glow{transition:box-shadow var(--transition-base)}.hover-glow:hover{box-shadow:var(--glow-purple)}.skeleton{background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-bg-elevated) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.skeleton-text{height:1em;margin-bottom:.5em}.skeleton-circle{border-radius:var(--radius-full)}.progress-bar{position:relative;overflow:hidden;background:var(--color-bg-tertiary);border-radius:var(--radius-full)}.progress-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:slideProgress 1.5s infinite}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--color-bg-primary);background-image:var(--gradient-hero);background-attachment:fixed;min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--text-primary)}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-3xl)}h4{font-size:var(--text-2xl)}h5{font-size:var(--text-xl)}h6{font-size:var(--text-lg)}p{color:var(--text-secondary);line-height:var(--leading-relaxed)}a{color:var(--color-accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-secondary)}strong,b{font-weight:var(--font-semibold)}code{font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-tertiary);padding:.2em .4em;border-radius:var(--radius-sm)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;background:transparent;border:none;outline:none}textarea{resize:vertical}img,video{max-width:100%;height:auto;display:block}ul,ol{list-style:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-bg-elevated);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-bg-hover)}*{scrollbar-width:thin;scrollbar-color:var(--color-bg-elevated) var(--color-bg-secondary)}::selection{background:#8b5cf64d;color:var(--text-primary)}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}.hidden{display:none!important}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.gap-2xl{gap:var(--space-2xl)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--color-accent-primary)}.text-success{color:var(--color-accent-success)}.text-warning{color:var(--color-accent-warning)}.text-error{color:var(--color-accent-error)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.text-5xl{font-size:var(--text-5xl)}.p-0{padding:0}.p-xs{padding:var(--space-xs)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.p-2xl{padding:var(--space-2xl)}.px-md{padding-left:var(--space-md);padding-right:var(--space-md)}.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.py-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.px-xl{padding-left:var(--space-xl);padding-right:var(--space-xl)}.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}.max-w-content{max-width:var(--max-content-width)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.inset-0{inset:0}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-scroll{overflow:scroll}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:var(--radius-full)}.z-0{z-index:var(--z-base)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-dropdown{z-index:var(--z-dropdown)}.z-modal{z-index:var(--z-modal)}.z-toast{z-index:var(--z-toast)}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.transition{transition:all var(--transition-base)}.transition-fast{transition:all var(--transition-fast)}.transition-slow{transition:all var(--transition-slow)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media(max-width:768px){.md\:hidden{display:none}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}}@media(min-width:769px){.md\:flex{display:flex}.md\:block{display:block}}@media(max-width:1024px){.lg\:hidden{display:none}}@media(min-width:1025px){.lg\:flex{display:flex}.lg\:block{display:block}}.container{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:0 var(--space-lg)}@media(max-width:768px){.container{padding:0 var(--space-md)}}.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}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:var(--z-fixed);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-lg);border-bottom:1px solid var(--glass-border)}.header-left{display:flex;align-items:center;gap:var(--space-md)}.menu-toggle{display:none;background:none;border:none;padding:var(--space-sm);cursor:pointer}.hamburger{display:flex;flex-direction:column;gap:5px;width:24px}.hamburger span{display:block;height:2px;background:var(--text-primary);border-radius:2px;transition:var(--transition-fast)}.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none}.logo-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center}.logo-icon svg{width:100%;height:100%}.logo-text{font-size:var(--text-xl);font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.logo-highlight{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-nav{display:flex;align-items:center;gap:var(--space-xs)}.nav-link{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-md);transition:var(--transition-fast)}.nav-link:hover{color:var(--text-primary);background:var(--glass-bg)}.nav-link.active{color:var(--color-accent-primary);background:#8b5cf61a}.header-right{display:flex;align-items:center;gap:var(--space-md)}.search-box{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);min-width:240px}.search-icon{width:16px;height:16px;color:var(--text-muted);flex-shrink:0}.search-input{flex:1;background:transparent;border:none;outline:none;font-size:var(--text-sm);color:var(--text-primary)}.search-input::placeholder{color:var(--text-muted)}.search-shortcut{font-size:var(--text-xs);padding:var(--space-xs) var(--space-sm);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-muted);font-family:inherit}.generate-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--gradient-primary);border:none;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;color:#fff;text-decoration:none;cursor:pointer;transition:var(--transition-fast);box-shadow:var(--glow-purple)}.generate-btn:hover{transform:translateY(-1px);box-shadow:var(--glow-purple)}.generate-btn svg{width:16px;height:16px}.logout-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;color:#fca5a5;cursor:pointer;transition:var(--transition-fast)}.logout-btn:hover{background:#ef444433;border-color:#ef444480;color:#f87171}.logout-btn svg{width:16px;height:16px}.user-menu{position:relative}.user-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--glass-bg);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast)}.user-avatar:hover{border-color:var(--color-accent-primary)}.user-avatar svg{width:18px;height:18px;color:var(--text-secondary)}@media(max-width:1024px){.header-nav,.search-box{display:none}.menu-toggle{display:block}}@media(max-width:640px){.header{padding:0 var(--space-md)}.generate-btn span{display:none}.generate-btn{padding:var(--space-sm);border-radius:var(--radius-full)}.logout-btn span{display:none}.logout-btn{padding:var(--space-sm);border-radius:var(--radius-full)}}.sidebar{position:fixed;top:var(--header-height);left:0;bottom:0;width:var(--sidebar-width);z-index:var(--z-fixed);display:flex;flex-direction:column;border-right:1px solid var(--glass-border);overflow-y:auto;transition:transform var(--transition-base)}.sidebar-overlay{display:none;position:fixed;inset:0;background:#0009;z-index:calc(var(--z-fixed) - 1);opacity:0;visibility:hidden;transition:var(--transition-base)}.sidebar-overlay.active{opacity:1;visibility:visible}.sidebar-nav{flex:1;padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-lg)}.nav-section{display:flex;flex-direction:column;gap:var(--space-sm)}.nav-section-title{font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:0 var(--space-sm);margin-bottom:var(--space-xs)}.nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-xs)}.nav-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);font-weight:500;transition:var(--transition-fast)}.nav-item:hover{background:var(--glass-bg);color:var(--text-primary)}.nav-item.active{background:#8b5cf626;color:var(--color-accent-primary)}.nav-item.active .nav-icon svg{stroke:var(--color-accent-primary)}.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-icon svg{width:100%;height:100%}.nav-label{flex:1}.provider-item{display:flex;align-items:center}.provider-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.provider-count{font-size:var(--text-xs);color:var(--text-muted);background:var(--glass-bg);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full)}.quick-gen{display:flex;align-items:center}.quick-icon{font-size:var(--text-base);width:20px;text-align:center}.quick-badge{font-size:var(--text-xs);padding:2px var(--space-sm);border-radius:var(--radius-full);background:var(--gradient-primary);color:#fff;font-weight:600}.sidebar-footer{padding:var(--space-md);margin:var(--space-md);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-sm)}.api-status{display:flex;align-items:center;gap:var(--space-sm)}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--text-muted)}.status-dot.online{background:var(--color-accent-success);box-shadow:0 0 8px var(--color-accent-success)}.status-dot.offline{background:var(--color-accent-error)}.status-text{font-size:var(--text-sm);color:var(--text-secondary)}.usage-link{font-size:var(--text-sm);color:var(--color-accent-primary);text-decoration:none;font-weight:500}.usage-link:hover{text-decoration:underline}@media(max-width:1024px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block}}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.layout{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;margin-top:var(--header-height);margin-left:var(--sidebar-width);padding:var(--space-lg);min-height:calc(100vh - var(--header-height))}.main-content>*{animation:fadeInUp .4s ease-out}@media(max-width:1024px){.main-content{margin-left:0}}@media(max-width:640px){.main-content{padding:var(--space-md)}}.home-page{display:flex;flex-direction:column;gap:var(--space-4xl);padding-bottom:var(--space-4xl)}.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3xl);align-items:center;min-height:calc(100vh - var(--header-height) - var(--space-3xl));padding:var(--space-2xl) 0}.hero-background{position:absolute;inset:-100px;overflow:hidden;pointer-events:none;z-index:-1}.hero-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(139,92,246,.15),transparent 50%)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 60% 60% at 50% 30%,black 30%,transparent 70%)}.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(120px);opacity:.4}.hero-glow--1{top:-100px;left:10%;background:var(--color-accent-primary);animation:float 8s ease-in-out infinite}.hero-glow--2{bottom:-100px;right:10%;background:var(--color-accent-secondary);animation:float 10s ease-in-out infinite reverse}.hero-content{display:flex;flex-direction:column;gap:var(--space-lg)}.hero-badge{align-self:flex-start;animation:fadeInUp .6s ease-out}.badge-sparkle{margin-right:var(--space-xs)}.hero-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.1;color:var(--text-primary);letter-spacing:-.03em;animation:fadeInUp .6s ease-out .1s both}.hero-title-gradient{display:block;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:var(--text-lg);color:var(--text-secondary);line-height:1.7;max-width:500px;animation:fadeInUp .6s ease-out .2s both}.hero-actions{display:flex;gap:var(--space-md);margin-top:var(--space-md);animation:fadeInUp .6s ease-out .3s both}.hero-stats{display:flex;align-items:center;gap:var(--space-lg);margin-top:var(--space-2xl);animation:fadeInUp .6s ease-out .4s both}.hero-stat{display:flex;flex-direction:column;gap:var(--space-xs)}.hero-stat-value{font-size:var(--text-3xl);font-weight:700;color:var(--text-primary)}.hero-stat-label{font-size:var(--text-sm);color:var(--text-muted)}.hero-stat-divider{width:1px;height:40px;background:var(--glass-border)}.hero-visual{display:flex;justify-content:center;align-items:center;animation:fadeIn .8s ease-out .3s both}.hero-card-stack{position:relative;width:350px;height:400px}.hero-image-card{position:absolute;width:280px;height:340px;border-radius:var(--radius-2xl);overflow:hidden;transition:transform .5s ease}.hero-image-card--1{z-index:3;transform:rotate(-5deg) translate(20px);animation:float 6s ease-in-out infinite}.hero-image-card--2{z-index:2;transform:rotate(3deg) translate(-20px) translateY(20px);animation:float 7s ease-in-out infinite reverse}.hero-image-card--3{z-index:1;transform:rotate(-2deg) translateY(40px);animation:float 8s ease-in-out .5s infinite}.hero-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);font-size:4rem}.providers-section{text-align:center}.section-title{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-lg)}.section-subtitle{font-size:var(--text-lg);color:var(--text-secondary);margin-top:calc(var(--space-sm) * -1);margin-bottom:var(--space-2xl)}.providers-grid{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap}.provider-card{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);text-decoration:none;transition:var(--transition-fast)}.provider-card:hover{transform:translateY(-2px);border-color:var(--color-accent-primary)}.provider-icon{width:28px;height:28px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;color:#fff}.provider-name{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}.features-section{text-align:center}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg)}.feature-card{text-align:left;padding:var(--space-lg)}.feature-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-md)}.feature-icon svg{width:24px;height:24px;color:#fff}.feature-icon--purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}.feature-icon--cyan{background:linear-gradient(135deg,#06b6d4,#22d3ee)}.feature-icon--pink{background:linear-gradient(135deg,#ec4899,#f472b6)}.feature-icon--green{background:linear-gradient(135deg,#10b981,#34d399)}.feature-icon--orange{background:linear-gradient(135deg,#f59e0b,#fbbf24)}.feature-icon--blue{background:linear-gradient(135deg,#3b82f6,#60a5fa)}.feature-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.feature-description{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6}.quickstart-section{text-align:center}.quickstart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-2xl);text-align:left}.quickstart-category-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md)}.category-icon{font-size:var(--text-xl)}.model-list{display:flex;flex-direction:column;gap:var(--space-sm)}.quick-model-card{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-radius:var(--radius-lg);text-decoration:none;transition:var(--transition-fast)}.quick-model-card:hover{transform:translate(4px);border-color:var(--color-accent-primary)}.quick-model-info{display:flex;align-items:center;gap:var(--space-sm)}.quick-model-icon{font-size:var(--text-xl)}.quick-model-name{font-size:var(--text-base);font-weight:500;color:var(--text-primary)}.quick-model-provider{font-size:var(--text-sm);color:var(--text-muted)}.quickstart-cta{margin-top:var(--space-2xl)}.models-preview-section{text-align:center}.models-preview-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm)}.model-preview-card{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);text-decoration:none;transition:var(--transition-fast);animation:fadeInUp .4s ease-out both}.model-preview-card:hover{transform:translateY(-2px);border-color:var(--color-accent-primary)}.model-preview-icon{font-size:var(--text-base)}.model-preview-name{font-size:var(--text-sm);color:var(--text-primary)}.model-preview-dot{width:6px;height:6px;border-radius:var(--radius-full)}@media(max-width:1024px){.hero{grid-template-columns:1fr;text-align:center;min-height:auto;padding:var(--space-2xl) 0}.hero-content{align-items:center}.hero-subtitle{max-width:600px}.hero-actions,.hero-stats{justify-content:center}.hero-visual{display:none}}@media(max-width:640px){.home-page{gap:var(--space-3xl)}.hero-title{font-size:2rem}.hero-actions{flex-direction:column;width:100%}.hero-actions a,.hero-actions button{width:100%}.hero-stats{flex-wrap:wrap;gap:var(--space-md)}.hero-stat-divider{display:none}.providers-grid{gap:var(--space-sm)}.provider-card{padding:var(--space-sm) var(--space-sm)}.quickstart-grid{grid-template-columns:1fr}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0f23,#1a1a3e,#2d1b4e);padding:20px}.login-container{width:100%;max-width:420px;background:#ffffff0d;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:48px 40px;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d inset}.login-header{text-align:center;margin-bottom:32px}.login-logo{width:80px;height:80px;margin:0 auto 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px #667eea4d}.logo-icon{font-size:36px}.login-header h1{margin:0 0 8px;font-size:28px;font-weight:700;color:#fff;letter-spacing:-.5px}.login-header p{margin:0;color:#fff9;font-size:14px}.login-form{display:flex;flex-direction:column;gap:20px}.login-error{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;font-size:14px;animation:shake .5s ease-in-out}.error-icon{font-size:16px}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:500;color:#fffc}.form-group input{padding:14px 16px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;font-size:15px;transition:all .2s ease}.form-group input::placeholder{color:#ffffff59}.form-group input:hover{border-color:#fff3;background:#ffffff1a}.form-group input:focus{outline:none;border-color:#667eea;background:#ffffff1a;box-shadow:0 0 0 4px #667eea26}.form-group input:disabled{opacity:.6;cursor:not-allowed}.login-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:8px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 40px #667eea66}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.7;cursor:not-allowed}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-footer{margin-top:32px;text-align:center}.login-footer p{margin:0;color:#fff6;font-size:13px}@media(max-width:480px){.login-container{padding:36px 24px;border-radius:20px}.login-header h1{font-size:24px}.login-logo{width:64px;height:64px;border-radius:16px}.logo-icon{font-size:28px}}.not-found-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-height) - var(--space-4xl))}.not-found-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);text-align:center;padding:var(--space-2xl)}.not-found-icon{font-size:5rem;animation:float 3s ease-in-out infinite}.not-found-title{font-size:6rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.not-found-subtitle{font-size:var(--text-2xl);font-weight:600;color:var(--text-primary)}.not-found-description{font-size:var(--text-lg);color:var(--text-secondary);max-width:400px}.not-found-actions{display:flex;gap:var(--space-md);margin-top:var(--space-md)}@media(max-width:640px){.not-found-title{font-size:4rem}.not-found-actions{flex-direction:column;width:100%}.not-found-actions a,.not-found-actions button{width:100%}}