@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap";:root,[data-theme=dark]{--bg-void: #000000;--bg-primary: #0a0a0a;--bg-secondary: #111111;--bg-elevated: #181818;--bg-surface: #1f1f1f;--bg-hover: #252525;--accent: #00d9ff;--accent-dim: rgba(0, 217, 255, .15);--accent-glow: rgba(0, 217, 255, .4);--accent-alt: #a855f7;--accent-alt-dim: rgba(168, 85, 247, .15);--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--gradient-glow: 0 8px 24px rgba(59, 130, 246, .4);--border: rgba(255, 255, 255, .06);--border-hover: rgba(255, 255, 255, .12);--border-focus: var(--accent);--text-primary: #fafafa;--text-secondary: #a1a1a1;--text-tertiary: #666666;--text-muted: #404040;--success: #22c55e;--success-dim: rgba(34, 197, 94, .15);--warning: #eab308;--warning-dim: rgba(234, 179, 8, .15);--error: #ef4444;--error-dim: rgba(239, 68, 68, .15);--skeleton-base: rgba(255, 255, 255, .05);--skeleton-shine: rgba(255, 255, 255, .1);--overlay: rgba(0, 0, 0, .8);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--sp-16: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-base: .25s;--duration-slow: .4s;--z-base: 1;--z-elevated: 10;--z-sticky: 100;--z-modal: 1000;--z-toast: 1100;--z-tooltip: 1200;--mobile-nav-height: 56px;--header-height: 56px}[data-theme=light]{--bg-void: #f8fafc;--bg-primary: #ffffff;--bg-secondary: #f1f5f9;--bg-elevated: #ffffff;--bg-surface: #e2e8f0;--bg-hover: #e5e7eb;--accent: #0284c7;--accent-dim: rgba(2, 132, 199, .12);--accent-glow: rgba(2, 132, 199, .3);--accent-alt: #7c3aed;--accent-alt-dim: rgba(124, 58, 237, .12);--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--gradient-glow: 0 8px 24px rgba(59, 130, 246, .25);--border: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .15);--border-focus: var(--accent);--text-primary: #0f172a;--text-secondary: #475569;--text-tertiary: #94a3b8;--text-muted: #cbd5e1;--success: #16a34a;--success-dim: rgba(22, 163, 74, .12);--warning: #ca8a04;--warning-dim: rgba(202, 138, 4, .12);--error: #dc2626;--error-dim: rgba(220, 38, 38, .12);--skeleton-base: rgba(0, 0, 0, .06);--skeleton-shine: rgba(0, 0, 0, .1);--overlay: rgba(0, 0, 0, .5)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg-void);color:var(--text-primary);min-height:100vh;line-height:1.5;-webkit-overflow-scrolling:touch;transition:background-color .3s ease,color .3s ease}#root{min-height:100vh;display:flex;flex-direction:column}.landing-page,.scroll-stack-card,.aurora-container{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent);color:var(--bg-void)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--text-primary)}h1{font-size:2rem}h2{font-size:1.25rem}h3{font-size:1rem}p{color:var(--text-secondary)}.mono{font-family:var(--font-mono)}.bg-animation{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 80% at 20% 40%,rgba(0,217,255,.03),transparent),radial-gradient(ellipse 50% 50% at 80% 60%,rgba(168,85,247,.02),transparent)}[data-theme=light] .bg-animation{background:radial-gradient(ellipse 50% 80% at 20% 40%,rgba(59,130,246,.05),transparent),radial-gradient(ellipse 50% 50% at 80% 60%,rgba(124,58,237,.03),transparent)}.bg-gradient,.bg-grid,.bg-orb,.bg-orb-1,.bg-orb-2,.bg-orb-3{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:10px 18px;font-family:var(--font-sans);font-size:.8125rem;font-weight:500;color:var(--text-secondary);background:linear-gradient(145deg,#ffffff0a,#ffffff05);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s var(--ease-out);white-space:nowrap;-webkit-user-select:none;user-select:none}[data-theme=light] .btn{background:var(--bg-primary);border-color:var(--border);color:var(--text-secondary)}.btn:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover);transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--gradient-primary);color:#fff;border:none;box-shadow:var(--gradient-glow)}.btn-primary:hover:not(:disabled){box-shadow:0 12px 36px #3b82f680;transform:translateY(-2px)}.btn-ghost{border:none;background:transparent}.btn-ghost:hover:not(:disabled){background:var(--bg-hover)}.btn-sm{padding:6px 14px;font-size:.75rem}.btn-icon{padding:10px;aspect-ratio:1}.btn-danger{background:var(--error-dim);color:var(--error);border-color:var(--error)}.btn-danger:hover:not(:disabled){background:var(--error);color:#fff}.btn-generate{background:var(--gradient-primary);color:#fff;border:none;padding:14px 28px;font-size:.9375rem;font-weight:600;border-radius:var(--radius-lg);box-shadow:var(--gradient-glow);transition:all .3s var(--ease-out);position:relative;overflow:hidden}.btn-generate:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);opacity:0;transition:opacity .3s ease}.btn-generate:hover:not(:disabled):before{opacity:1}.btn-generate:hover:not(:disabled){box-shadow:0 12px 36px #3b82f680,0 0 40px #8b5cf64d;transform:translateY(-2px) scale(1.02)}.btn-generate:disabled{background:var(--bg-surface);color:var(--text-tertiary);box-shadow:none}.input-group{display:flex;flex-direction:column;gap:var(--sp-2)}.input-group label{font-size:.6875rem;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em}input[type=text],input[type=password],input[type=number],textarea,select{width:100%;padding:12px 16px;font-family:var(--font-sans);font-size:.875rem;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .3s var(--ease-out)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim),0 8px 24px #0003}textarea{resize:none;min-height:100px;line-height:1.6}input::placeholder,textarea::placeholder{color:var(--text-muted)}.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);transition:all .3s var(--ease-out)}.card:hover{border-color:var(--border-hover);box-shadow:0 8px 32px #00000026}.skeleton-text{height:1em;margin-bottom:.5em}.skeleton-text:last-child{width:70%}.skeleton-image{aspect-ratio:1;width:100%}.skeleton-card{padding:var(--sp-4)}.modal-overlay{position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--sp-4)}.modal-content{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:520px;max-height:85vh;overflow:hidden;box-shadow:0 40px 100px #00000080}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border)}.modal-header h2{font-size:1.125rem;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.modal-body{padding:var(--sp-6);overflow-y:auto;max-height:60vh}.modal-footer{display:flex;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border);background:var(--bg-secondary)}.toast-container{position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-3)}.toast{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;animation:toastIn .3s var(--ease-out);box-shadow:0 8px 24px #0003}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}}.toast-info{border-left:3px solid var(--accent)}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:4px 10px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);background:var(--accent-dim);color:var(--accent)}.badge-success{background:var(--success-dim);color:var(--success)}.badge-warning{background:var(--warning-dim);color:var(--warning)}.badge-error{background:var(--error-dim);color:var(--error)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.w-full{width:100%}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.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:0}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-height);background:var(--bg-elevated);border-top:1px solid var(--border);z-index:var(--z-sticky);padding:var(--sp-2);padding-bottom:max(var(--sp-2),env(safe-area-inset-bottom))}.mobile-nav-inner{display:flex;justify-content:space-around;align-items:center;height:100%}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--sp-2) var(--sp-4);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;color:var(--text-tertiary)}.mobile-nav-item.active{color:var(--accent);background:var(--accent-dim)}.mobile-nav-item svg{width:20px;height:20px}.mobile-nav-item span{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.hamburger-btn{display:none;padding:var(--sp-2);background:transparent;border:none;cursor:pointer;color:var(--text-secondary)}.hamburger-btn:hover{color:var(--text-primary)}@media(max-width:1200px){html{font-size:15px}}@media(max-width:1024px){.mobile-nav{display:block}.hamburger-btn{display:flex}body{padding-bottom:var(--mobile-nav-height)}}@media(max-width:768px){html{font-size:14px}.toast-container{left:var(--sp-4);right:var(--sp-4);bottom:calc(var(--mobile-nav-height) + var(--sp-4))}.modal-content{max-width:100%;max-height:90vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;margin-top:auto}.modal-overlay{align-items:flex-end;padding:0;padding-bottom:var(--mobile-nav-height)}}@media(max-width:480px){:root{--sp-4: 12px;--sp-5: 16px;--sp-6: 20px}.btn{padding:8px 14px}.btn-generate{padding:12px 20px}}.aurora-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.aurora-container canvas{width:100%!important;height:100%!important}.decrypted-text{display:inline-block;font-family:var(--font-mono)}.decrypted-text .char{display:inline-block;transition:color .1s ease}.decrypted-text .char.scrambled{color:var(--accent);opacity:.7}.decrypted-text .char.revealed{color:inherit}.decrypted-text.revealing .char{animation:glitch .1s ease}@keyframes glitch{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.blur-text{display:inline-flex;flex-wrap:wrap}.blur-word{display:inline-block;margin-right:.25em}.spotlight-card{position:relative;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;cursor:pointer}.spotlight-gradient{position:absolute;inset:0;pointer-events:none;transition:opacity .3s ease;z-index:1}.spotlight-content{position:relative;z-index:2;padding:var(--sp-8)}.spotlight-card:hover{border-color:var(--border-hover)}.star-border{position:relative;display:inline-block;border-radius:16px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.star-border:before{content:"";position:absolute;inset:-3px;background:conic-gradient(from 0deg,transparent 0deg,var(--star-color) 60deg,transparent 120deg,transparent 180deg,var(--star-color) 240deg,transparent 300deg,transparent 360deg);animation:star-rotate var(--star-speed) linear infinite;border-radius:18px;z-index:0;filter:blur(.5px)}.star-border-inner{position:relative;z-index:2;background:linear-gradient(145deg,#1a1f2e,#0f1218);border-radius:14px;margin:3px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.star-border-glow{position:absolute;inset:0;background:radial-gradient(circle at center,var(--star-color),transparent 70%);opacity:.15;filter:blur(25px);z-index:1;pointer-events:none}@keyframes star-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.blob-cursor{position:fixed;border-radius:50%;pointer-events:none;z-index:9998;mix-blend-mode:screen;opacity:.6;transition:width .2s,height .2s}@media(max-width:768px){.blob-cursor{display:none}}:root{--linear-ease: linear(0, .068, .19 2.7%, .804 8.1%, 1.037, 1.199 13.2%, 1.245, 1.27 15.8%, 1.274, 1.272 17.4%, 1.249 19.1%, .996 28%, .949, .928 33.3%, .926, .933 36.8%, 1.001 45.6%, 1.013, 1.019 50.8%, 1.018 54.4%, 1 63.1%, .995 68%, 1.001 85%, 1);--color-1: #ffffff;--color-2: #ffffff;--color-3: #ffffff;--color-4: #ffffff}.gooey-nav-container{position:relative}.gooey-nav-container nav{display:flex;position:relative;transform:translateZ(.01px);background:transparent}.gooey-nav-container nav ul{display:flex;gap:1.5em;list-style:none;padding:.5em 1em;margin:0;position:relative;z-index:3;color:#fff;text-shadow:0 1px 1px hsl(205deg 30% 10% / .2);background:transparent}.gooey-nav-container nav ul li{border-radius:100vw;position:relative;cursor:pointer;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;box-shadow:0 0 .5px 1.5px transparent;color:#fffc;font-size:.875rem;font-weight:500}.gooey-nav-container nav ul li:hover{color:#fff}.gooey-nav-container nav ul li a{display:inline-block;padding:.5em 1em;text-decoration:none;color:inherit}.gooey-nav-container nav ul li:focus-within:has(:focus-visible){box-shadow:0 0 .5px 1.5px #fff}.gooey-nav-container nav ul li:after{content:"";position:absolute;inset:0;border-radius:100vw;background:#fff;opacity:0;transform:scale(0);transition:all .3s ease;z-index:-1}.gooey-nav-container nav ul li.active{color:#000;text-shadow:none}.gooey-nav-container nav ul li.active:after{opacity:1;transform:scale(1)}.gooey-nav-container .effect{position:absolute;left:0;top:0;width:0;height:0;opacity:1;pointer-events:none;display:grid;place-items:center;z-index:1}.gooey-nav-container .effect.text{color:#fff;transition:color .3s ease;font-size:.875rem;font-weight:500}.gooey-nav-container .effect.text.active{color:#000}.gooey-nav-container .effect.filter{filter:blur(7px) contrast(100) blur(0);mix-blend-mode:lighten}.gooey-nav-container .effect.filter:before{content:"";position:absolute;inset:-75px;z-index:-2;background:transparent}.gooey-nav-container .effect.filter:after{content:"";position:absolute;inset:0;background:#fff;transform:scale(0);opacity:0;z-index:-1;border-radius:100vw}.gooey-nav-container .effect.active:after{animation:pill .3s ease both}@keyframes pill{to{transform:scale(1);opacity:1}}.particle,.point{display:block;opacity:0;width:20px;height:20px;border-radius:100%;transform-origin:center}.particle{--time: 5s;position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);animation:particle calc(var(--time)) ease 1 -.35s}.point{background:var(--color);opacity:1;animation:point calc(var(--time)) ease 1 -.35s}@keyframes particle{0%{transform:rotate(0) translate(calc(var(--start-x)),calc(var(--start-y)));opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}70%{transform:rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x) * 1.2),calc(var(--end-y) * 1.2));opacity:1;animation-timing-function:ease}85%{transform:rotate(calc(var(--rotate) * .66)) translate(calc(var(--end-x)),calc(var(--end-y)));opacity:1}to{transform:rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5),calc(var(--end-y) * .5));opacity:1}}@keyframes point{0%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}25%{transform:scale(calc(var(--scale) * .25))}38%{opacity:1}65%{transform:scale(var(--scale));opacity:1;animation-timing-function:ease}85%{transform:scale(var(--scale));opacity:1}to{transform:scale(0);opacity:0}}.rotating-text{display:flex;flex-wrap:wrap;white-space:pre-wrap;position:relative}.rotating-text-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}.rotating-text-word{display:inline-flex}.rotating-text-lines{display:flex;flex-direction:column;width:100%}.rotating-text-element{display:inline-block}.rotating-text-space{white-space:pre}.rotating-highlight{padding:0 .5rem;background:linear-gradient(135deg,var(--accent) 0%,#a855f7 100%);border-radius:var(--radius-md);color:var(--bg-void)}.scroll-stack-scroller{position:relative;width:100%}.scroll-stack-inner{padding:80px 2rem 250px;max-width:850px;margin:0 auto}.scroll-stack-card{position:-webkit-sticky;position:sticky;top:100px;min-height:280px;width:100%;padding:3rem;margin-bottom:50px;border-radius:32px;box-sizing:border-box;background:linear-gradient(145deg,#151515,#0a0a0a);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px #00000080,0 0 0 1px #ffffff08 inset,0 1px #ffffff0d inset;overflow:hidden;transition:box-shadow .4s ease}.scroll-stack-card:hover{box-shadow:0 40px 100px #0009,0 0 0 1px #00d9ff1a inset,0 1px #ffffff14 inset}.scroll-stack-card:nth-child(1){top:100px;z-index:1}.scroll-stack-card:nth-child(2){top:130px;z-index:2}.scroll-stack-card:nth-child(3){top:160px;z-index:3}.scroll-stack-card:nth-child(4){top:190px;z-index:4}.scroll-stack-card:nth-child(5){top:220px;z-index:5}.scroll-stack-card:nth-child(6){top:250px;z-index:6}.scroll-stack-card h3{font-size:1.75rem;font-weight:700;margin-bottom:1rem;color:#fff;letter-spacing:-.02em}.scroll-stack-card p{font-size:1.0625rem;line-height:1.7;color:#ffffff8c;max-width:550px}.stack-card-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00d9ff1f,#8b5cf61f);border-radius:18px;color:#00d9ff;margin-bottom:1.5rem}.stack-card-number{position:absolute;top:3rem;right:3rem;font-family:var(--font-mono, "SF Mono", "Fira Code", monospace);font-size:5rem;font-weight:800;color:#ffffff08;line-height:1;letter-spacing:-.05em}@media(max-width:768px){.scroll-stack-inner{padding:60px 1rem 180px}.scroll-stack-card{padding:2rem;min-height:220px;border-radius:24px;margin-bottom:40px}.scroll-stack-card:nth-child(1){top:80px}.scroll-stack-card:nth-child(2){top:105px}.scroll-stack-card:nth-child(3){top:130px}.scroll-stack-card:nth-child(4){top:155px}.scroll-stack-card:nth-child(5){top:180px}.scroll-stack-card:nth-child(6){top:205px}.scroll-stack-card h3{font-size:1.5rem}.stack-card-number{font-size:3.5rem;top:2rem;right:2rem}.stack-card-icon{width:52px;height:52px;border-radius:14px}}.particles-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.particle{position:absolute;background:#ffffff80;border-radius:50%;animation:float linear infinite}@keyframes float{0%,to{transform:translateY(0) translate(0);opacity:0}10%{opacity:.8}50%{transform:translateY(-100px) translate(30px);opacity:.5}90%{opacity:.8}}.scroll-progress-container{position:fixed;top:0;left:0;width:100%;height:3px;background:#ffffff1a;z-index:200}.scroll-progress-bar{height:100%;background:linear-gradient(90deg,#00d9ff,#8b5cf6,#ec4899);transition:width .1s ease-out;box-shadow:0 0 10px #00d9ff80}.before-after-container{position:relative;width:100%;max-width:800px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;cursor:ew-resize;background:#0a0a0a;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px #0006}.before-image,.after-image{position:absolute;top:0;left:0;width:100%;height:100%}.before-image img,.after-image img{width:100%;height:100%;object-fit:cover}.image-label{position:absolute;bottom:20px;padding:.5rem 1rem;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:100px;font-size:.875rem;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.1)}.before-label{left:20px}.after-label{right:20px}.slider-handle{position:absolute;top:0;bottom:0;width:4px;transform:translate(-50%);cursor:ew-resize;z-index:10}.slider-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translate(-50%);box-shadow:0 0 10px #ffffff80}.slider-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;box-shadow:0 4px 20px #0000004d;transition:transform .2s ease}.slider-circle:hover{transform:translate(-50%,-50%) scale(1.1)}@media(max-width:768px){.before-after-container{border-radius:16px}.image-label{font-size:.75rem;padding:.375rem .75rem;bottom:12px}.before-label{left:12px}.after-label{right:12px}.slider-circle{width:40px;height:40px}}.landing-page{min-height:100vh;background:#030712;color:#fff;position:relative;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.landing-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center top,transparent 0%,rgba(3,7,18,.7) 70%);pointer-events:none;z-index:1}.landing-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 3rem;z-index:100;background:linear-gradient(180deg,rgba(3,7,18,.9) 0%,transparent 100%)}.nav-logo{display:flex;align-items:center;gap:.75rem}.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:32px;height:32px}.logo-square{background:linear-gradient(135deg,#3b82f6,#60a5fa);border-radius:4px;animation:squarePulse 3s ease-in-out infinite}.logo-square:nth-child(1){animation-delay:0s}.logo-square:nth-child(2){animation-delay:.15s}.logo-square:nth-child(3){animation-delay:.3s}.logo-square:nth-child(4){animation-delay:.45s}@keyframes squarePulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.logo-grid.small{width:24px;height:24px;gap:2px}.logo-grid.small .logo-square{border-radius:3px}.logo-text{display:flex;flex-direction:column;line-height:1}.logo-main{font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:-.02em}.logo-sub{font-size:.5rem;font-weight:500;color:#ffffff80;letter-spacing:.15em;text-transform:uppercase;margin-top:2px}.logo-icon-animated{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:12px;color:#fff;animation:logoGlow 3s ease-in-out infinite}.logo-icon-animated.small{width:28px;height:28px;border-radius:8px}@keyframes logoGlow{0%,to{box-shadow:0 0 20px #3b82f666}50%{box-shadow:0 0 30px #8b5cf699}}.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 2rem 60px;z-index:2;gap:4rem}.hero-content{text-align:center;max-width:900px}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:100px;font-size:.8125rem;font-weight:500;color:#60a5fa;margin-bottom:2rem}.hero-badge svg{color:#60a5fa}.hero-title{font-size:clamp(2.5rem,7vw,5rem);font-weight:800;line-height:1.1;letter-spacing:-.04em;margin-bottom:1.5rem}.hero-title-main{color:#ffffffe6}.hero-title-gradient{background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-title-accent{display:block;margin-top:.25rem}.rotating-highlight{display:inline-flex;padding:.1em .4em;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-size:clamp(2rem,5vw,3.5rem);font-weight:700}.overflow-hidden{overflow:hidden;padding-bottom:.1em}.hero-subtitle{font-size:1.125rem;line-height:1.7;color:#fff9;max-width:600px;margin:0 auto 2rem}.hide-mobile{display:inline}.hero-buttons{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.btn-primary-hero{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.75rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-size:1rem;font-weight:600;border:none;border-radius:14px;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 32px #3b82f64d}.btn-primary-hero:hover{box-shadow:0 16px 48px #3b82f666}.btn-secondary-hero{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;background:#ffffff0d;color:#fffc;font-size:1rem;font-weight:500;border:1px solid rgba(255,255,255,.1);border-radius:14px;cursor:pointer;transition:all .3s ease}.btn-secondary-hero:hover{background:#ffffff1a;border-color:#fff3;color:#fff}.hero-preview{width:100%;max-width:900px}.preview-showcase{position:relative;padding:2rem;background:linear-gradient(145deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.08);border-radius:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.preview-frames{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.preview-frame{display:flex;flex-direction:column;align-items:center;gap:.75rem}.frame-image{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border:2px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;transition:all .3s ease}.frame-image img{width:100%;height:100%;object-fit:cover}.preview-frame:hover .frame-image{border-color:#3b82f699;transform:scale(1.02);box-shadow:0 10px 30px #3b82f633}.frame-info{display:flex;flex-direction:column;align-items:center;gap:.25rem}.frame-angle{font-size:1rem;font-weight:700;color:#fff}.frame-label{font-size:.75rem;color:#ffffff80;text-transform:uppercase;letter-spacing:.05em}.preview-badge{position:absolute;bottom:-12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#10b981,#059669);border-radius:100px;font-size:.75rem;font-weight:600;color:#fff;box-shadow:0 8px 20px #10b9814d}.features-section{position:relative;z-index:2;padding:120px 2rem}.section-header{text-align:center;max-width:600px;margin:0 auto 4rem}.section-tag{display:inline-block;padding:.375rem .875rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:100px;font-size:.75rem;font-weight:600;color:#60a5fa;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.section-header h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem;color:#fff}.section-header p{font-size:1.125rem;color:#ffffff80;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1100px;margin:0 auto}.feature-card{position:relative;padding:2rem;background:linear-gradient(145deg,#ffffff0a,#ffffff03);border:1px solid rgba(255,255,255,.06);border-radius:20px;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:default;overflow:hidden}.feature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.1) 0%,transparent 50%);opacity:0;transition:opacity .3s ease}.feature-card:hover:before{opacity:1}.feature-card:hover{border-color:#3b82f64d;box-shadow:0 20px 60px #0000004d}.feature-highlight{position:absolute;top:1rem;right:1rem;padding:.25rem .625rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:6px;font-size:.625rem;font-weight:600;color:#60a5fa;text-transform:uppercase;letter-spacing:.05em}.feature-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f626,#8b5cf626);border-radius:16px;color:#60a5fa;margin-bottom:1.25rem}.feature-card h3{font-size:1.25rem;font-weight:700;margin-bottom:.75rem;color:#fff}.feature-card p{font-size:.9375rem;line-height:1.6;color:#ffffff80}.stats-section{position:relative;z-index:2;padding:80px 2rem}.stats-container{display:flex;align-items:center;justify-content:center;gap:3rem;max-width:800px;margin:0 auto;padding:2.5rem 3rem;background:linear-gradient(145deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.06);border-radius:24px}.stat-item{text-align:center;flex:1}.stat-icon{display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;color:#60a5fa}.stat-value{font-size:2.5rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1;margin-bottom:.25rem}.stat-label{font-size:.8125rem;color:#fff6;text-transform:uppercase;letter-spacing:.1em;font-weight:500}.stat-divider{width:1px;height:60px;background:#ffffff14}.workflow-section{position:relative;z-index:2;padding:120px 2rem;background:linear-gradient(180deg,transparent 0%,rgba(59,130,246,.03) 50%,transparent 100%)}.workflow-steps{display:flex;justify-content:center;gap:2rem;max-width:1000px;margin:0 auto}.workflow-card{position:relative;flex:1;max-width:300px;padding:2.5rem 2rem;background:linear-gradient(145deg,#ffffff0a,#ffffff03);border:1px solid rgba(255,255,255,.06);border-radius:24px;text-align:center;transition:all .3s ease}.workflow-card:hover{border-color:#3b82f64d;transform:translateY(-5px)}.workflow-num{position:absolute;top:-16px;left:50%;transform:translate(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:10px;font-size:.875rem;font-weight:800;color:#fff;box-shadow:0 8px 20px #3b82f64d}.workflow-icon{width:64px;height:64px;margin:.5rem auto 1.25rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border-radius:20px;color:#60a5fa}.workflow-card h3{font-size:1.375rem;font-weight:700;margin-bottom:.75rem;color:#fff}.workflow-card p{font-size:.9375rem;line-height:1.6;color:#ffffff80}.workflow-connector{position:absolute;right:-30px;top:50%;transform:translateY(-50%);color:#fff3}.use-cases-section{position:relative;z-index:2;padding:120px 2rem}.use-cases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:900px;margin:0 auto}.use-case-card{padding:1.75rem;background:linear-gradient(145deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.06);border-radius:20px;text-align:center;transition:all .3s ease;cursor:default}.use-case-card:hover{border-color:#3b82f64d;background:linear-gradient(145deg,#3b82f614,#8b5cf60d)}.use-case-icon{width:52px;height:52px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border-radius:16px;color:#60a5fa}.use-case-card h4{font-size:1rem;font-weight:700;margin-bottom:.5rem;color:#fff}.use-case-card p{font-size:.8125rem;line-height:1.5;color:#ffffff80}.gallery-section{position:relative;z-index:2;padding:120px 2rem;background:linear-gradient(180deg,rgba(139,92,246,.03) 0%,transparent 100%)}.sample-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1000px;margin:0 auto}.gallery-item{position:relative;border-radius:20px;overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:pointer}.gallery-image{aspect-ratio:1;border-radius:20px;overflow:hidden;border:2px solid rgba(255,255,255,.08);transition:all .3s ease}.gallery-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.gallery-item:hover .gallery-image{border-color:#3b82f680;box-shadow:0 20px 60px #3b82f64d}.gallery-item:hover .gallery-image img{transform:scale(1.1)}.gallery-label{position:absolute;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 100%);font-size:.875rem;font-weight:600;color:#fff;text-align:center;border-radius:0 0 20px 20px}.cta-section{position:relative;z-index:2;padding:120px 2rem}.cta-content{max-width:600px;margin:0 auto;padding:4rem;background:linear-gradient(145deg,#3b82f61a,#8b5cf61a);border:1px solid rgba(59,130,246,.2);border-radius:32px;text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.cta-content h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;margin-bottom:.75rem;color:#fff}.cta-content p{font-size:1.125rem;color:#fff9;margin-bottom:2rem}.btn-cta{display:inline-flex;align-items:center;gap:.75rem;padding:1.125rem 2rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-size:1rem;font-weight:600;border:none;border-radius:14px;cursor:pointer;transition:all .3s ease}.btn-cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px #3b82f64d}.landing-footer{position:relative;z-index:2;padding:40px 2rem;border-top:1px solid rgba(255,255,255,.06)}.footer-content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto;padding-bottom:1.5rem}.footer-brand{display:flex;align-items:center;gap:.75rem;font-size:1rem;font-weight:600;color:#fff}.footer-links{display:flex;gap:.75rem}.footer-links a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#ffffff80;transition:all .3s ease}.footer-links a:hover{background:#3b82f61a;border-color:#3b82f64d;color:#60a5fa}.footer-bottom{display:flex;justify-content:space-between;max-width:1000px;margin:0 auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06)}.footer-bottom p{font-size:.8125rem;color:#fff6}@media(max-width:1024px){.features-grid,.use-cases-grid,.sample-gallery{grid-template-columns:repeat(2,1fr)}.preview-frames{grid-template-columns:repeat(5,1fr);gap:.5rem}}@media(max-width:768px){.landing-header{padding:1rem 1.5rem}.hero{padding:100px 1.5rem 40px;gap:2rem}.hero-subtitle{font-size:1rem}.hide-mobile{display:none}.preview-frames{grid-template-columns:repeat(5,1fr);gap:.35rem}.frame-angle{font-size:.875rem}.frame-label{font-size:.625rem}.features-grid,.use-cases-grid{grid-template-columns:1fr;max-width:400px}.stats-container{flex-direction:column;gap:2rem;padding:2rem}.stat-divider{width:60px;height:1px}.workflow-steps{flex-direction:column;align-items:center}.workflow-connector{display:none}.cta-content{padding:2rem}.footer-content,.footer-bottom{flex-direction:column;text-align:center;gap:1rem}}.theme-toggle{display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;cursor:pointer}.theme-toggle-track{position:relative;width:48px;height:26px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:2px;transition:background-color .3s ease,border-color .3s ease}.theme-toggle:hover .theme-toggle-track{border-color:var(--border-hover)}.theme-toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 8px #3b82f666;z-index:2}.theme-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 6px;pointer-events:none}.theme-icons svg{color:var(--text-muted);transition:color .2s ease,opacity .2s ease;opacity:.5}.theme-icons svg.active{color:var(--text-primary);opacity:0}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-full)}@media(max-width:768px){.theme-toggle-track{width:42px;height:24px}.theme-toggle-thumb{width:18px;height:18px}}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--sp-5);background:var(--bg-primary);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:var(--z-sticky);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header-left,.header-center,.header-right{display:flex;align-items:center;gap:var(--sp-3)}.header-left{flex-shrink:0}.header-center{flex:1;justify-content:center}.header-right{flex-shrink:0;gap:var(--sp-2)}.logo{display:flex;align-items:center;gap:var(--sp-3)}.logo-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.logo-icon svg{width:100%;height:100%}.logo-image{width:32px;height:32px;object-fit:contain}.logo-text{display:flex;flex-direction:column;line-height:1.2}.logo-title{font-size:.9375rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.logo-tagline{font-size:.625rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.header-actions-group{display:flex;align-items:center;gap:var(--sp-1);background:var(--bg-secondary);padding:var(--sp-1);border-radius:var(--radius-md);border:1px solid var(--border)}.header-divider{width:1px;height:24px;background:var(--border);margin:0 var(--sp-2)}.header-btn{padding:var(--sp-2);border-radius:var(--radius-md);color:var(--text-tertiary);transition:all .2s ease}.header-btn:hover:not(:disabled){color:var(--text-primary);background:var(--bg-hover)}.header-btn:disabled{opacity:.3;cursor:not-allowed}.project-btn{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.8125rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-family:var(--font-sans);max-width:200px}.project-btn:hover{border-color:var(--border-hover);background:var(--bg-hover);color:var(--text-primary)}.project-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-btn svg{flex-shrink:0;color:var(--accent)}.header-new-btn{padding:var(--sp-2) var(--sp-4);font-size:.8125rem}.header-new-btn span{display:inline}@media(max-width:1024px){.header-center,.header-new-btn span{display:none}.header-new-btn{padding:var(--sp-2)}}@media(max-width:768px){.app-header{padding:0 var(--sp-4)}.logo-text,.header-actions-group{display:none}.header-right{gap:var(--sp-1)}}@media(max-width:480px){.header-new-btn{display:none}}.panel-input{display:flex;flex-direction:column}.prompt-group{margin-bottom:var(--sp-6)}.prompt-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}.prompt-header label{font-size:.6875rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em}.prompt-actions{display:flex;gap:var(--sp-1);align-items:center}.btn-enhance{display:flex;align-items:center;gap:var(--sp-1);padding:6px 14px;background:linear-gradient(135deg,#00d9ff26,#a855f726);border:1px solid rgba(0,217,255,.3);border-radius:100px;color:var(--accent);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1)}.btn-enhance:hover:not(:disabled){background:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 100%);color:var(--bg-void);border-color:transparent;box-shadow:0 4px 16px #00d9ff4d;transform:translateY(-1px)}.btn-enhance:disabled{opacity:.4;cursor:not-allowed}.prompt-group textarea{width:100%;background:linear-gradient(145deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:var(--sp-4);font-size:.9375rem;line-height:1.7;color:var(--text-primary);min-height:130px;resize:vertical;transition:all .3s ease}.prompt-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px #00d9ff1a,0 8px 24px #0003;outline:none}.prompt-group textarea::placeholder{color:var(--text-muted)}.prompt-suggestions{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:linear-gradient(145deg,#00d9ff0d,#a855f70d);border:1px solid rgba(0,217,255,.1);border-radius:var(--radius-lg)}.suggestion-item{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) 0;font-size:.8125rem;color:var(--text-secondary);line-height:1.5}.suggestion-icon{flex-shrink:0;color:var(--accent)}.input-group>label{font-size:.6875rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-3);display:block}.visual-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}.visual-preset-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-2);background:transparent;border:2px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.visual-preset-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,217,255,.1) 0%,transparent 50%);opacity:0;transition:opacity .3s ease}.visual-preset-card:hover:before{opacity:1}.visual-preset-card:hover{border-color:#ffffff26;background:#ffffff05;transform:translateY(-2px)}.visual-preset-card.active{border-color:var(--accent);background:linear-gradient(145deg,#00d9ff1a,#a855f71a);box-shadow:0 0 20px #00d9ff33}.preset-preview{width:100%;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;position:relative;background:var(--bg-surface)}.preset-preview img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease}.visual-preset-card:hover .preset-preview img{transform:scale(1.05)}.preset-preview .preset-gradient{width:100%;height:100%}.preset-selected{position:absolute;top:6px;right:6px;width:20px;height:20px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bg-void);z-index:1;box-shadow:0 2px 8px #00d9ff66}.preset-selected svg{width:12px;height:12px}.preset-label{font-size:.625rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;text-align:center;position:relative;z-index:1;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.visual-preset-card.active .preset-label,.visual-preset-card:hover .preset-label{color:var(--text-primary)}.accordion{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-6)}.accordion-item{background:linear-gradient(145deg,#ffffff05,#ffffff03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s ease}.accordion-item.open{border-color:#00d9ff33;background:linear-gradient(145deg,#ffffff08,#ffffff03)}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4);background:transparent;border:none;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.accordion-header:hover{color:var(--text-primary);background:#ffffff05}.accordion-header span{display:flex;align-items:center;gap:var(--sp-2)}.accordion-header svg{width:18px;height:18px;color:var(--accent)}.accordion-arrow{color:var(--text-muted)!important;transition:transform .3s cubic-bezier(.16,1,.3,1)}.accordion-item.open .accordion-arrow{transform:rotate(180deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1);padding:0 var(--sp-4)}.accordion-item.open .accordion-content{max-height:500px;padding:0 var(--sp-4) var(--sp-4)}.visual-lighting-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}.lighting-preset-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-2);background:transparent;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease}.lighting-preset-card:hover{border-color:#ffffff1f;background:#ffffff05}.lighting-preset-card.active{border-color:var(--accent);background:#00d9ff14}.lighting-preview{width:100%;height:40px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface)}.lighting-preview img{width:100%;height:100%;object-fit:cover;object-position:center}.lighting-preview .preset-gradient{width:100%;height:100%}.lighting-label{font-size:.625rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;text-align:center}.lighting-preset-card.active .lighting-label{color:var(--accent)}.visual-palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}.palette-preset-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding:var(--sp-2);background:transparent;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease;height:95px}.palette-preset-card:hover{border-color:#ffffff1f;background:#ffffff05}.palette-preset-card.active{border-color:var(--accent);background:#00d9ff14}.palette-preview-large{width:50px;height:50px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface);position:relative}.palette-preview-large img{width:100%;height:100%;object-fit:cover;object-position:center}.palette-preview-large .preset-gradient{width:100%;height:100%}.palette-label{font-size:.5625rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.palette-preset-card.active .palette-label{color:var(--accent)}.image-upload-zone{border:2px dashed rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:var(--sp-6);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);background:linear-gradient(145deg,#ffffff05,#ffffff03)}.image-upload-zone:hover{border-color:var(--accent);background:linear-gradient(145deg,#00d9ff14,#a855f70d);box-shadow:0 0 30px #00d9ff1a}.image-upload-zone.dragging{border-color:var(--accent);background:linear-gradient(145deg,#00d9ff26,#a855f71a);transform:scale(1.02);box-shadow:0 0 40px #00d9ff33}.image-upload-zone.has-image{padding:0;border:none}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);color:var(--text-tertiary)}.upload-placeholder svg{color:var(--accent);opacity:.6}.upload-placeholder span{font-size:.9375rem;font-weight:500}.upload-placeholder small{font-size:.75rem;opacity:.6}.image-preview{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 8px 24px #0000004d}.image-preview img{width:100%;height:auto;max-height:200px;object-fit:cover;display:block}.remove-image-btn{position:absolute;top:var(--sp-2);right:var(--sp-2);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#000c;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#fff;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.remove-image-btn:hover{background:var(--error);border-color:var(--error);transform:scale(1.1)}.image-preview-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 50%,transparent 100%);display:flex;align-items:flex-end;justify-content:center;gap:var(--sp-2);padding:var(--sp-4);opacity:0;transition:opacity .2s ease}.image-preview:hover .image-preview-overlay{opacity:1}.input-hint{font-size:.75rem;color:var(--text-tertiary);margin-top:var(--sp-2);padding-left:var(--sp-2);border-left:2px solid var(--accent)}.panel-inner{display:flex;flex-direction:column;height:100%}.panel-inner .panel-header{flex-shrink:0}.panel-inner .panel-content{flex:1;overflow-y:auto;min-height:0}@media(max-width:768px){.visual-style-grid,.visual-lighting-grid,.visual-palette-grid{grid-template-columns:repeat(2,1fr)}}.panel-planner{display:flex;flex-direction:column}.panel-planner .panel-content{flex:1;overflow-y:auto;min-height:0}.panel-planner .panel-footer{flex-shrink:0}.shot-templates{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-bottom:var(--sp-6)}.template-btn{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4);background:linear-gradient(145deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);text-align:left;position:relative;overflow:hidden}.template-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,217,255,.1) 0%,transparent 50%);opacity:0;transition:opacity .3s ease}.template-btn:hover:before{opacity:1}.template-btn:hover{border-color:#00d9ff66;background:linear-gradient(145deg,#ffffff0d,#ffffff05);transform:translateY(-2px);box-shadow:0 8px 24px #0000004d,0 0 20px #00d9ff1a}.template-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#00d9ff26,#a855f726);border-radius:var(--radius-md);margin-bottom:var(--sp-2);color:var(--accent);position:relative;z-index:1}.template-btn:hover .template-icon{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 100%);color:var(--bg-void);box-shadow:0 4px 12px #00d9ff4d}.template-name{font-size:.875rem;font-weight:600;color:var(--text-primary);position:relative;z-index:1}.template-count{font-size:.75rem;color:var(--text-tertiary);position:relative;z-index:1}.shot-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:linear-gradient(145deg,#ffffff05,#ffffff03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1)}.shot-card:hover{border-color:#ffffff26;background:linear-gradient(145deg,#ffffff0a,#ffffff05);transform:translate(4px)}.shot-card.generating{border-color:var(--accent);background:linear-gradient(145deg,#00d9ff14,#00d9ff05);animation:pulseGlow 2s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 #00d9ff33}50%{box-shadow:0 0 20px #00d9ff4d}}.shot-card.complete{border-color:var(--success);background:linear-gradient(145deg,#22c55e14,#22c55e05)}.shot-number{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffffff14,#ffffff0a);border-radius:var(--radius-md);font-size:.8125rem;font-weight:700;color:var(--text-secondary);flex-shrink:0}.shot-card.generating .shot-number{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 100%);color:var(--bg-void);animation:spin 2s linear infinite}.shot-card.complete .shot-number{background:var(--success);color:#fff}.shot-name{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:2px}.shot-details{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-size:.6875rem;color:var(--text-tertiary)}.shot-details span{padding:3px 8px;background:#ffffff0a;border-radius:var(--radius-sm);font-family:var(--font-mono)}.shot-thumb{width:44px;height:44px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}.shot-status svg{width:18px;height:18px;color:var(--text-tertiary)}.shot-actions .btn{padding:var(--sp-1)}.shot-card.regenerating .shot-actions{opacity:1}.empty-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00d9ff1a,#a855f71a);border:2px dashed rgba(255,255,255,.1);border-radius:var(--radius-xl);margin-bottom:var(--sp-5);color:var(--accent);opacity:.6}.empty-state h3{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:var(--sp-2)}.empty-state p{font-size:.875rem;color:var(--text-tertiary);max-width:260px;line-height:1.6}.generation-info{display:flex;align-items:center;gap:var(--sp-2);font-size:.75rem;color:var(--text-tertiary);font-family:var(--font-mono);padding:var(--sp-2) var(--sp-3);background:#ffffff05;border-radius:var(--radius-md)}.progress-bar{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;min-width:100px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-alt) 100%);border-radius:3px;transition:width .3s ease}.progress-text{font-family:var(--font-mono);font-size:.75rem;font-weight:600;color:var(--accent);min-width:42px;text-align:right}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.base-preview-overlay{position:fixed;inset:0;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--sp-8)}.base-preview-modal{background:linear-gradient(145deg,#141414f2,#0a0a0af2);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-2xl);width:100%;max-width:500px;overflow:hidden;box-shadow:0 32px 64px #00000080,0 0 40px #00d9ff1a}.base-preview-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid rgba(255,255,255,.06)}.base-preview-header h3{display:flex;align-items:center;gap:var(--sp-2);font-size:1rem;font-weight:600}.base-preview-header h3 svg{color:var(--accent)}.base-preview-content{padding:var(--sp-6)}.preview-loading{display:flex;flex-direction:column;align-items:center;padding:var(--sp-10);text-align:center}.preview-loading svg{color:var(--accent);margin-bottom:var(--sp-4)}.preview-loading p{font-size:1rem;font-weight:500;color:var(--text-primary);margin-bottom:var(--sp-2)}.preview-loading span{font-size:.875rem;color:var(--text-tertiary)}.preview-result img{width:100%;border-radius:var(--radius-lg);margin-bottom:var(--sp-4);box-shadow:0 8px 24px #0000004d}.preview-info{text-align:center}.preview-info p{font-size:.9375rem;color:var(--text-secondary)}.quick-templates{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);justify-content:center}.base-preview-footer{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-4) var(--sp-5);border-top:1px solid rgba(255,255,255,.06);background:#0000004d}.skeleton{background:var(--skeleton-base);border-radius:var(--radius-md);position:relative;overflow:hidden}.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shine) 50%,transparent 100%);animation:skeleton-shimmer 1.5s infinite}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-text-group{display:flex;flex-direction:column;gap:var(--sp-2)}.skeleton-text{height:14px;border-radius:var(--radius-sm)}.skeleton-title{height:20px;width:70%;margin-bottom:var(--sp-2)}.skeleton-image{width:100%;border-radius:var(--radius-lg);background:var(--skeleton-base)}.skeleton-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.skeleton-card-content{padding:var(--sp-4)}.skeleton-shot{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md)}.skeleton-shot-number{width:28px;height:28px;border-radius:var(--radius-sm);flex-shrink:0}.skeleton-shot-info{flex:1;display:flex;flex-direction:column;gap:var(--sp-2)}.skeleton-shot-name{height:14px;width:120px;border-radius:var(--radius-sm)}.skeleton-shot-details{display:flex;gap:var(--sp-2)}.skeleton-tag{height:18px;width:50px;border-radius:var(--radius-sm)}.skeleton-shot-thumb{width:40px;height:40px;border-radius:var(--radius-sm);flex-shrink:0}.skeleton-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}.skeleton-gallery .skeleton-image{aspect-ratio:1}.generating-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:var(--z-modal)}.generating-content{display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);padding:var(--sp-8)}.generating-spinner{position:relative;width:80px;height:80px}.spinner-ring{position:absolute;inset:0;border:3px solid transparent;border-top-color:var(--accent);border-radius:50%}.spinner-ring.inner{inset:10px;border-top-color:var(--accent-alt)}.generating-message{font-size:1.125rem;font-weight:500;color:var(--text-primary);text-align:center}.generating-progress{display:flex;align-items:center;gap:var(--sp-3);width:200px}.progress-track{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:3px}.progress-text{font-family:var(--font-mono);font-size:.875rem;color:var(--accent);min-width:45px;text-align:right}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}.skeleton-pulse{animation:skeleton-pulse 1.5s ease-in-out infinite}.lazy-image-container{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}.lazy-image-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--skeleton-base)}.skeleton-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shine) 50%,transparent 100%);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.lazy-image{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}.lazy-image.visible{opacity:1}.lazy-image-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);color:var(--text-muted);font-size:1.5rem}.progressive-image-container{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}.progressive-thumbnail{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px);transform:scale(1.1)}.progressive-full{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}.progressive-full.visible{opacity:1}.progressive-image-container.loaded .progressive-thumbnail{display:none}.panel-output .panel-inner{display:flex;flex-direction:column;height:100%}.score-suffix{font-size:.875rem;color:var(--text-tertiary);margin-left:2px}.bar-label{font-size:.75rem;color:var(--text-tertiary);width:85px;flex-shrink:0}.bar-value{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);width:42px;text-align:right}.export-dropdown{position:relative}.export-menu{position:absolute;top:100%;right:0;margin-top:var(--sp-2);width:220px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4);z-index:var(--z-elevated);box-shadow:0 12px 40px #0000004d}.export-menu-section{margin-bottom:var(--sp-4)}.export-menu-section:last-child{margin-bottom:0}.export-menu-section>label{display:block;font-size:.6875rem;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--sp-2)}.format-options{display:flex;gap:var(--sp-1)}.format-btn{flex:1;padding:var(--sp-2);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.6875rem;font-weight:600;color:var(--text-tertiary);cursor:pointer;transition:all .2s ease;font-family:var(--font-sans)}.format-btn:hover{border-color:var(--border-hover);color:var(--text-secondary)}.format-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.checkbox-label{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;font-size:.8125rem;color:var(--text-secondary)}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.export-menu-actions{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--border)}.export-menu-actions .btn{width:100%;justify-content:center}.output-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}.output-item{aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(145deg,#ffffff08,#ffffff03);border:2px solid rgba(255,255,255,.08);cursor:pointer;transition:all .3s var(--ease-out);position:relative}.output-item:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(0,217,255,.1) 0%,transparent 50%);opacity:0;transition:opacity .3s ease}.output-item:hover:after{opacity:1}.output-item:hover{border-color:var(--accent);transform:scale(1.03);z-index:1;box-shadow:0 16px 40px #0006,0 0 30px #00d9ff33}.output-item img,.output-item .output-image{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out)}.output-item:hover img,.output-item:hover .output-image .lazy-image{transform:scale(1.08)}.output-item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-3);opacity:0;transition:opacity .2s ease;z-index:2}.output-item-name{font-size:.75rem;font-weight:600;color:#fff;margin-bottom:var(--sp-2)}.output-item-actions .btn{background:#ffffff1a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff}.output-item-actions .btn:hover{background:#fff3}.output-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-16) var(--sp-6);color:var(--text-muted);position:relative}.generating-skeleton{display:flex;flex-direction:column;gap:var(--sp-4)}.generating-info{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3);background:var(--accent-dim);border-radius:var(--radius-md);font-size:.875rem;color:var(--accent)}.animation-preview{margin-bottom:var(--sp-5);border:2px solid var(--accent);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 0 40px #00d9ff4d;position:relative}.animation-preview:before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 100%);z-index:-1;animation:borderGlow 3s ease-in-out infinite}@keyframes borderGlow{0%,to{opacity:.5}50%{opacity:1}}.animation-frame{aspect-ratio:1;background:var(--bg-secondary)}.animation-frame img{width:100%;height:100%;object-fit:cover}.animation-info{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);background:#00000080;border-top:1px solid rgba(255,255,255,.1)}.animation-label{font-size:.875rem;font-weight:600;color:var(--text-primary)}.animation-progress{font-family:var(--font-mono);font-size:.8125rem;color:var(--accent);font-weight:500}.lightbox-overlay{position:fixed;inset:0;background:#000000f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--sp-8);cursor:pointer}.lightbox-content{position:relative;max-width:90vw;max-height:90vh;cursor:default}.lightbox-content img{max-width:100%;max-height:85vh;border-radius:var(--radius-xl);box-shadow:0 32px 80px #00000080,0 0 60px #00d9ff1a}.lightbox-close{position:absolute;top:var(--sp-3);right:var(--sp-3);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#0009;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.lightbox-close:hover{color:var(--text-primary);border-color:var(--accent);background:#00d9ff1a}@media(max-width:768px){.output-grid{grid-template-columns:1fr 1fr;gap:var(--sp-2)}.export-menu{right:-20px;width:200px}.consistency-bar{flex-direction:column;align-items:flex-start;gap:var(--sp-1)}.bar-label,.bar-track{width:100%}.consistency-bar{position:relative}.bar-value{position:absolute;right:0;top:0}}@media(max-width:480px){.output-grid{grid-template-columns:1fr}.panel-actions{flex-wrap:wrap}}.settings-section{margin-bottom:var(--sp-6)}.settings-section h3{font-size:.75rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-4)}.provider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}.provider-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-5);background:#ffffff05;border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);text-align:center;min-height:120px}.provider-card:hover{border-color:var(--border-hover);background:#ffffff0a;transform:translateY(-2px)}.provider-card.active{border-color:var(--accent);background:linear-gradient(145deg,#00d9ff14,#00d9ff05);box-shadow:0 0 20px #00d9ff1a}.provider-card.disabled{opacity:.4;cursor:not-allowed}.provider-card.disabled:hover{transform:none;border-color:var(--border)}.provider-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border-radius:var(--radius-md);color:var(--text-secondary);transition:all .3s ease}.provider-card.active .provider-icon{background:var(--accent);color:var(--bg-void);box-shadow:0 8px 20px #00d9ff4d}.provider-info{display:flex;flex-direction:column;gap:4px}.provider-name{font-size:.875rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);flex-wrap:wrap}.free-badge{font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-radius:100px}.provider-desc{font-size:.6875rem;color:var(--text-tertiary);line-height:1.4}.settings-section .input-group{margin-bottom:var(--sp-4)}.settings-section .input-group label{display:block;font-size:.8125rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--sp-2)}.settings-section input[type=password],.settings-section input[type=text],.settings-section select{width:100%;padding:var(--sp-3) var(--sp-4);background:#ffffff08;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem;transition:all .2s ease}.settings-section input:focus,.settings-section select:focus{outline:none;border-color:var(--accent);background:#00d9ff0d;box-shadow:0 0 0 3px #00d9ff1a}.settings-section select{cursor:pointer;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='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}.input-hint{display:block;font-size:.75rem;color:var(--text-tertiary);margin-top:var(--sp-2)}.input-hint a{color:var(--accent);text-decoration:none}.input-hint a:hover{text-decoration:underline}.settings-section input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:#ffffff1a;border-radius:3px;cursor:pointer;margin:var(--sp-2) 0}.settings-section input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:linear-gradient(135deg,var(--accent) 0%,#8b5cf6 100%);border-radius:50%;cursor:grab;transition:transform .2s ease;box-shadow:0 4px 12px #00d9ff4d}.settings-section input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.settings-section input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}.range-labels{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}@media(max-width:480px){.provider-grid{grid-template-columns:1fr}}.modal-wide{max-width:700px}.shot-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}.shot-preview{aspect-ratio:1;background:var(--bg-tertiary);border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center}.shot-preview img{width:100%;height:100%;object-fit:cover}.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);color:var(--text-muted);text-align:center;padding:var(--space-lg)}.preview-placeholder svg{opacity:.5}.preview-placeholder span{font-size:.8125rem}.shot-controls{display:flex;flex-direction:column;gap:var(--space-md)}.control-group{display:flex;flex-direction:column;gap:var(--space-sm)}.control-group label{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}.control-group input[type=text],.control-group select,.control-group textarea{width:100%;padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:.875rem}.control-group input:focus,.control-group select:focus,.control-group textarea:focus{outline:none;border-color:var(--accent-primary)}.control-group textarea{resize:vertical;min-height:60px}.angle-selector{display:flex;gap:var(--space-xs)}.angle-btn{flex:1;padding:var(--space-sm);background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast)}.angle-btn:hover{background:var(--glass-hover);color:var(--text-primary)}.angle-btn.active{background:#6366f133;border-color:var(--accent-primary);color:var(--text-primary)}.slider-with-value{display:flex;align-items:center;gap:var(--space-md)}.slider-with-value input[type=range]{flex:1}.modal-footer{display:flex;align-items:center;justify-content:space-between}.modal-footer-right{display:flex;gap:var(--space-sm)}.delete-btn{color:var(--error)}.delete-btn:hover{background:#ef44441a}@media(max-width:600px){.shot-editor-grid{grid-template-columns:1fr}.shot-preview{max-height:200px}}.onboarding-overlay{position:fixed;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--sp-6)}.onboarding-modal{position:relative;width:100%;max-width:480px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden}.onboarding-close{position:absolute;top:var(--sp-4);right:var(--sp-4);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-tertiary);cursor:pointer;transition:all var(--duration-fast)}.onboarding-close:hover{border-color:var(--border-hover);color:var(--text-primary)}.onboarding-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5);border-bottom:1px solid var(--border)}.onboarding-badge{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);background:var(--accent-dim);border-radius:var(--radius-full);font-size:.6875rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}.onboarding-steps{display:flex;gap:var(--sp-2)}.step-dot{width:8px;height:8px;background:var(--bg-surface);border-radius:50%;transition:all var(--duration-base)}.step-dot.active{width:24px;border-radius:4px;background:var(--accent)}.step-dot.complete{background:var(--accent)}.onboarding-content{padding:var(--sp-8);text-align:center}.onboarding-icon{width:72px;height:72px;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-6);background:var(--accent-dim);border:1px solid rgba(0,217,255,.2);border-radius:var(--radius-xl);color:var(--accent)}.step-number{font-size:.6875rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-3)}.onboarding-content h2{font-size:1.5rem;font-weight:600;margin-bottom:var(--sp-3)}.onboarding-content>p{font-size:.9375rem;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--sp-6)}.onboarding-tip{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:left}.tip-label{font-size:.75rem;font-weight:600;color:var(--text-primary)}.onboarding-tip>span:last-child{font-size:.8125rem;color:var(--text-tertiary);line-height:1.5}.onboarding-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5);border-top:1px solid var(--border);background:var(--bg-secondary)}.onboarding-next{display:flex;align-items:center;gap:var(--sp-2);background:var(--accent);color:var(--bg-void);border:none}.onboarding-next:hover{background:var(--accent);opacity:.9}.toast{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:280px;max-width:400px}.toast-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;flex-shrink:0}.toast-icon-success{background:#10b98133;color:var(--success)}.toast-icon-error{background:#ef444433;color:var(--error)}.toast-icon-info{background:#3b82f633;color:var(--info)}.toast-message{flex:1;font-size:.875rem;color:var(--text-primary)}.toast-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);flex-shrink:0}.toast-close:hover{background:var(--glass-bg);color:var(--text-primary)}.toast-success{border-left:3px solid var(--success)}.toast-error{border-left:3px solid var(--error)}.toast-info{border-left:3px solid var(--info)}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-height);background:var(--bg-elevated);border-top:1px solid var(--border);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mobile-nav-inner{display:flex;justify-content:space-around;align-items:center;height:100%;padding:0 var(--sp-4);max-width:400px;margin:0 auto}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--sp-2) var(--sp-5);background:transparent;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease;color:var(--text-tertiary);position:relative;font-family:var(--font-sans)}.mobile-nav-item:hover{background:var(--bg-hover)}.mobile-nav-item.active{color:var(--accent)}.mobile-nav-item svg{width:22px;height:22px;transition:transform .2s ease}.mobile-nav-item.active svg{transform:scale(1.1)}.mobile-nav-item span{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.nav-indicator{position:absolute;bottom:-2px;left:50%;transform:translate(-50%);width:24px;height:3px;background:var(--accent);border-radius:var(--radius-full)}@media(max-width:1024px){.mobile-nav{display:block}}@supports (padding-bottom: env(safe-area-inset-bottom)){.mobile-nav{padding-bottom:env(safe-area-inset-bottom);height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}}.history-modal{max-width:640px}.modal-header-actions{display:flex;align-items:center;gap:var(--sp-2)}.history-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-12);text-align:center}.history-empty-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border:2px dashed var(--border);border-radius:var(--radius-xl);color:var(--text-muted);margin-bottom:var(--sp-4)}.history-empty h3{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--sp-2)}.history-empty p{font-size:.875rem;color:var(--text-tertiary)}.history-list{display:flex;flex-direction:column;gap:var(--sp-3)}.history-item{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease}.history-item:hover{border-color:var(--border-hover);background:var(--bg-hover)}.history-item-preview{display:flex;align-items:center;flex-shrink:0}.history-thumb{width:40px;height:40px;border-radius:var(--radius-md);overflow:hidden;border:2px solid var(--bg-secondary);margin-left:-12px;position:relative;background:var(--bg-surface)}.history-thumb:first-child{margin-left:0}.history-thumb img{width:100%;height:100%;object-fit:cover}.history-thumb-more{width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-surface);border:2px solid var(--bg-secondary);margin-left:-12px;display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:600;color:var(--text-tertiary)}.history-item-info{flex:1;min-width:0}.history-prompt{font-size:.875rem;color:var(--text-primary);line-height:1.4;margin-bottom:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.history-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3)}.history-time,.history-shots,.history-score{display:flex;align-items:center;gap:var(--sp-1);font-size:.6875rem;color:var(--text-tertiary)}.history-score{color:var(--success)}.history-load-btn{flex-shrink:0;opacity:0;transition:opacity .2s ease}.history-item:hover .history-load-btn{opacity:1}.history-load-btn svg:last-child{margin-left:-4px}@media(max-width:640px){.history-modal{max-width:100%}.history-item{flex-direction:column;align-items:flex-start}.history-item-preview{margin-bottom:var(--sp-2)}.history-load-btn{opacity:1;align-self:flex-end}}.presets-modal{max-width:560px}.preset-create{margin-bottom:var(--sp-5);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border)}.preset-create-btn{width:100%;justify-content:center;padding:var(--sp-4);border:2px dashed var(--border);background:transparent}.preset-create-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-dim)}.preset-create-form{display:flex;flex-direction:column;gap:var(--sp-3)}.preset-create-form input{width:100%}.preset-create-actions{display:flex;justify-content:flex-end;gap:var(--sp-2)}.presets-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-10);text-align:center}.presets-empty-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border:2px dashed var(--border);border-radius:var(--radius-xl);color:var(--text-muted);margin-bottom:var(--sp-4)}.presets-empty h3{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--sp-2)}.presets-empty p{font-size:.875rem;color:var(--text-tertiary)}.presets-list{display:flex;flex-direction:column;gap:var(--sp-3)}.preset-item{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s ease}.preset-item:hover{border-color:var(--border-hover);background:var(--bg-hover)}.preset-item-info{flex:1;min-width:0}.preset-item-info h4{font-size:.9375rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--sp-1)}.preset-prompt{font-size:.8125rem;color:var(--text-secondary);line-height:1.4;margin-bottom:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.preset-meta{display:flex;align-items:center;gap:var(--sp-3)}.preset-style{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;background:var(--accent-dim);color:var(--accent);border-radius:var(--radius-sm)}.preset-date{font-size:.6875rem;color:var(--text-tertiary)}.preset-actions{display:flex;gap:var(--sp-2);flex-shrink:0}@media(max-width:560px){.presets-modal{max-width:100%}.preset-item{flex-direction:column}.preset-actions{align-self:flex-end}}.comparison-overlay{padding:var(--sp-4)}.comparison-tool{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-xl);max-width:900px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.comparison-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);gap:var(--sp-4)}.comparison-header h2{display:flex;align-items:center;gap:var(--sp-2);font-size:1rem;font-weight:600;color:var(--text-primary);flex-shrink:0}.comparison-modes{display:flex;gap:var(--sp-1);background:var(--bg-secondary);padding:var(--sp-1);border-radius:var(--radius-md)}.mode-btn{padding:var(--sp-2) var(--sp-3);background:transparent;border:none;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;color:var(--text-tertiary);cursor:pointer;transition:all .2s ease;font-family:var(--font-sans)}.mode-btn:hover{color:var(--text-secondary)}.mode-btn.active{background:var(--bg-elevated);color:var(--text-primary)}.comparison-body{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);min-height:400px;overflow:hidden}.comparison-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-muted)}.comparison-empty svg{margin-bottom:var(--sp-4);opacity:.5}.comparison-empty h3{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--sp-2)}.comparison-empty p{font-size:.875rem;color:var(--text-tertiary)}.comparison-slider{position:relative;width:100%;max-width:600px;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;cursor:col-resize}.slider-before,.slider-after{position:absolute;inset:0}.slider-before img,.slider-after img{width:100%;height:100%;object-fit:cover}.slider-label{position:absolute;bottom:var(--sp-3);left:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:#000c;color:#fff;font-size:.75rem;font-weight:600;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.slider-label.right{left:auto;right:var(--sp-3)}.slider-handle{position:absolute;top:0;bottom:0;width:4px;background:#fff;cursor:col-resize;transform:translate(-50%);z-index:10}.slider-handle:before,.slider-handle:after{content:"";position:absolute;width:24px;height:24px;background:#fff;border-radius:50%;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000004d}.slider-handle:before{top:var(--sp-4)}.slider-handle:after{bottom:var(--sp-4)}.comparison-side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);width:100%;max-width:800px}.side-image{position:relative;border-radius:var(--radius-lg);overflow:hidden}.side-image img{width:100%;height:auto;display:block}.side-label{position:absolute;bottom:var(--sp-2);left:var(--sp-2);padding:var(--sp-1) var(--sp-2);background:#000c;color:#fff;font-size:.6875rem;font-weight:600;border-radius:var(--radius-sm)}.comparison-overlay-view{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);width:100%}.overlay-stack{position:relative;max-width:500px;width:100%;border-radius:var(--radius-lg);overflow:hidden}.overlay-base,.overlay-top{width:100%;height:auto;display:block}.overlay-top{position:absolute;inset:0;transition:opacity .1s ease}.overlay-controls{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);background:var(--bg-secondary);border-radius:var(--radius-md)}.overlay-controls label{font-size:.75rem;color:var(--text-tertiary);white-space:nowrap}.overlay-controls input[type=range]{width:150px;cursor:pointer}.overlay-controls span{font-size:.75rem;font-family:var(--font-mono);color:var(--text-secondary);min-width:40px}.comparison-animation{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);width:100%}.animation-display{position:relative;max-width:500px;width:100%;border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--accent);box-shadow:0 0 30px var(--accent-glow)}.animation-display img{width:100%;height:auto;display:block}.animation-label{position:absolute;bottom:var(--sp-3);left:50%;transform:translate(-50%);padding:var(--sp-2) var(--sp-4);background:#000c;color:#fff;font-size:.8125rem;font-weight:600;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.animation-controls{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);background:var(--bg-secondary);border-radius:var(--radius-lg)}.speed-control{display:flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-3);padding-left:var(--sp-3);border-left:1px solid var(--border)}.speed-control label{font-size:.6875rem;color:var(--text-tertiary)}.speed-control input[type=range]{width:80px;cursor:pointer}.frame-counter{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);padding:var(--sp-1) var(--sp-2);background:var(--bg-surface);border-radius:var(--radius-sm)}.comparison-thumbnails{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);background:var(--bg-secondary)}.thumbnail-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}.thumbnail-row:last-child{margin-bottom:0}.thumbnail-label{font-size:.6875rem;font-weight:500;color:var(--text-tertiary);min-width:60px}.thumbnail-btn{width:48px;height:48px;padding:0;border:2px solid var(--border);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:var(--bg-surface);transition:all .2s ease}.thumbnail-btn:hover{border-color:var(--border-hover)}.thumbnail-btn.active{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.thumbnail-btn img{width:100%;height:100%;object-fit:cover}@media(max-width:768px){.comparison-header{flex-wrap:wrap}.comparison-modes{order:3;width:100%;flex-wrap:wrap}.comparison-side-by-side{grid-template-columns:1fr}.animation-controls{flex-wrap:wrap;justify-content:center}.speed-control{margin-left:0;padding-left:0;border-left:none;width:100%;justify-content:center}.thumbnail-row{overflow-x:auto;padding-bottom:var(--sp-2)}}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-void)}.app-main{flex:1;display:grid;grid-template-columns:320px 1fr 380px;gap:1px;background:var(--border);height:calc(100vh - var(--header-height));overflow:hidden}.panel{display:flex;flex-direction:column;background:var(--bg-primary);overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);flex-shrink:0;min-height:52px;background:var(--bg-primary)}.panel-header h2{display:flex;align-items:center;gap:var(--sp-2);font-size:.8125rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.panel-header h2 svg{color:var(--accent);width:16px;height:16px}.panel-actions{display:flex;gap:var(--sp-1)}.panel-content{flex:1;overflow-y:auto;padding:var(--sp-5);min-height:0}.panel-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);flex-shrink:0;background:var(--bg-secondary)}.shot-templates{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);margin-bottom:var(--sp-6)}.template-btn{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);text-align:left}.template-btn:hover{border-color:var(--accent);background:var(--bg-elevated)}.template-icon{font-size:1.25rem;margin-bottom:var(--sp-1)}.template-name{font-size:.8125rem;font-weight:500;color:var(--text-primary)}.template-count{font-size:.6875rem;color:var(--text-tertiary)}.shot-list{display:flex;flex-direction:column;gap:var(--sp-2)}.shot-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.shot-card:hover{border-color:var(--border-hover);background:var(--bg-elevated)}.shot-card.generating{border-color:var(--accent);background:var(--accent-dim)}.shot-card.complete{border-color:var(--success)}.shot-card.error{border-color:var(--error)}.shot-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;color:var(--text-secondary);flex-shrink:0}.shot-card.generating .shot-number{background:var(--accent-dim);color:var(--accent)}.shot-info{flex:1;min-width:0}.shot-name{font-size:.8125rem;font-weight:500;color:var(--text-primary);margin-bottom:2px}.shot-details{display:flex;gap:var(--sp-2);font-size:.6875rem;color:var(--text-tertiary)}.shot-details span{padding:2px 6px;background:var(--bg-surface);border-radius:var(--radius-sm)}.shot-thumb{width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}.shot-thumb img{width:100%;height:100%;object-fit:cover}.shot-thumb-skeleton{width:40px;height:40px;border-radius:var(--radius-sm)}.shot-status svg{width:16px;height:16px;color:var(--text-tertiary)}.shot-card.complete .shot-status svg{color:var(--success)}.shot-card.error .shot-status svg{color:var(--error)}.shot-actions{display:flex;gap:var(--sp-1);opacity:0;transition:opacity .2s ease}.shot-card:hover .shot-actions{opacity:1}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-12) var(--sp-6)}.empty-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:2px dashed var(--border);border-radius:var(--radius-lg);margin-bottom:var(--sp-5);color:var(--text-muted)}.empty-state h3{font-size:.9375rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--sp-2)}.empty-state p{font-size:.8125rem;color:var(--text-tertiary);max-width:240px}.generation-info{display:flex;align-items:center;gap:var(--sp-2);font-size:.75rem;color:var(--text-tertiary)}.separator{color:var(--text-muted)}.output-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}.output-item{aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-secondary);border:1px solid var(--border);cursor:pointer;transition:all var(--duration-base) var(--ease-out);position:relative}.output-item:hover{border-color:var(--accent);transform:scale(1.02);z-index:1}.output-item img{width:100%;height:100%;object-fit:cover}.output-item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 50%);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-3)}.output-item:hover .output-item-overlay{opacity:1}.output-item-name{font-size:.75rem;font-weight:500;color:#fff;margin-bottom:var(--sp-2)}.output-item-actions{display:flex;gap:var(--sp-1)}.output-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-16) var(--sp-6);color:var(--text-muted);text-align:center;position:relative}.output-empty-state svg{margin-bottom:var(--sp-4);opacity:.5}.output-empty-state p{font-size:.875rem;color:var(--text-tertiary)}.pulse-ring{position:absolute;width:120px;height:120px;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:pulse-ring 2s ease-out infinite}@keyframes pulse-ring{0%{transform:scale(.5);opacity:.5}to{transform:scale(1.2);opacity:0}}.undo-redo-bar{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border)}.undo-redo-bar button{padding:var(--sp-2);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-tertiary);transition:all .2s ease}.undo-redo-bar button:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.undo-redo-bar button:disabled{opacity:.3;cursor:not-allowed}.analyzing-state{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);background:var(--accent-dim);border:1px solid var(--accent);border-radius:var(--radius-md);margin-bottom:var(--sp-4)}.analyzing-state span{font-size:.875rem;color:var(--accent)}.consistency-panel{background:linear-gradient(145deg,#22c55e14,#22c55e05);border:1px solid rgba(34,197,94,.2);border-radius:var(--radius-lg);padding:var(--sp-4);margin-bottom:var(--sp-5)}.consistency-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}.consistency-title{display:flex;align-items:center;gap:var(--sp-2);font-size:.875rem;font-weight:600;color:var(--text-secondary)}.consistency-icon{display:flex;align-items:center}.consistency-score{display:flex;align-items:baseline}.score-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:700}.score-suffix{font-size:.875rem;color:var(--text-tertiary)}.consistency-bars{display:flex;flex-direction:column;gap:var(--sp-3)}.consistency-bar{display:flex;align-items:center;gap:var(--sp-3)}.bar-label{font-size:.75rem;color:var(--text-tertiary);width:80px;flex-shrink:0}.bar-track{flex:1;height:6px;background:#ffffff0d;border-radius:3px;overflow:hidden}.bar-fill{height:100%;border-radius:3px;transition:width .6s var(--ease-out)}.bar-value{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);width:40px;text-align:right}.consistency-badge{margin-top:var(--sp-3);padding:var(--sp-3);background:var(--success-dim);border:1px solid var(--success);border-radius:var(--radius-md);font-size:.8125rem;font-weight:600;color:var(--success);text-align:center}@media(max-width:1400px){.app-main{grid-template-columns:300px 1fr 360px}}@media(max-width:1280px){.app-main{grid-template-columns:280px 1fr 340px}}@media(max-width:1024px){.app-main{grid-template-columns:1fr;height:calc(100vh - var(--header-height) - var(--mobile-nav-height));background:transparent;gap:0}.panel{display:none;height:100%}.panel.active{display:flex}.panel-header{position:sticky;top:0;z-index:10}}@media(max-width:768px){.panel-content{padding:var(--sp-4)}.shot-templates{grid-template-columns:1fr}.output-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}.consistency-bar{flex-direction:column;align-items:flex-start;gap:var(--sp-1)}.bar-label,.bar-track{width:100%}.bar-value{position:absolute;right:0;top:0}.consistency-bar{position:relative}}@media(max-width:480px){.output-grid{grid-template-columns:1fr}.shot-card{padding:var(--sp-3)}.shot-details{flex-wrap:wrap}}