@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-bg-primary: #050508;--color-bg-secondary: #0d0d14;--color-bg-tertiary: #15151f;--color-bg-card: rgba(20, 20, 32, .7);--color-bg-card-hover: rgba(30, 30, 50, .9);--glass-bg: rgba(15, 15, 25, .85);--glass-border: rgba(255, 255, 255, .06);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .5);--color-accent-primary: #6366f1;--color-accent-secondary: #8b5cf6;--color-accent-tertiary: #a855f7;--color-accent-cyan: #22d3ee;--color-accent-pink: #ec4899;--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, .15) 0%, rgba(139, 92, 246, .15) 100%);--gradient-hero: linear-gradient(135deg, rgba(99, 102, 241, .2) 0%, rgba(168, 85, 247, .15) 50%, rgba(236, 72, 153, .1) 100%);--gradient-card: linear-gradient(180deg, rgba(99, 102, 241, .08) 0%, rgba(139, 92, 246, .02) 100%);--gradient-border: linear-gradient(135deg, rgba(99, 102, 241, .5) 0%, rgba(168, 85, 247, .3) 100%);--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-text-primary: #f8fafc;--color-text-secondary: #94a3b8;--color-text-tertiary: #64748b;--color-text-muted: #475569;--color-border: rgba(255, 255, 255, .05);--color-border-hover: rgba(255, 255, 255, .1);--color-border-active: rgba(99, 102, 241, .4);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);--shadow-xl: 0 24px 60px rgba(0, 0, 0, .6);--shadow-glow: 0 0 60px rgba(99, 102, 241, .4);--shadow-glow-sm: 0 0 30px rgba(99, 102, 241, .25);--shadow-card: 0 4px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .05);--sidebar-width: 280px;--header-height: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 800px 600px at 20% 10%,rgba(99,102,241,.12) 0%,transparent 50%),radial-gradient(ellipse 600px 500px at 80% 70%,rgba(139,92,246,.1) 0%,transparent 50%),radial-gradient(ellipse 500px 400px at 40% 80%,rgba(236,72,153,.06) 0%,transparent 50%),radial-gradient(ellipse 700px 500px at 70% 20%,rgba(34,211,238,.05) 0%,transparent 50%);pointer-events:none;z-index:-1;animation:bgShift 20s ease-in-out infinite alternate}@keyframes bgShift{0%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}to{opacity:.9;transform:scale(1)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-bg-tertiary);border-radius:var(--radius-full);transition:var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;color:var(--color-text-primary)}h1{font-size:2.5rem;letter-spacing:-.02em}h2{font-size:2rem;letter-spacing:-.015em}h3{font-size:1.5rem;letter-spacing:-.01em}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{color:var(--color-text-secondary)}a{color:var(--color-accent-primary);text-decoration:none;transition:var(--transition-fast)}a:hover{color:var(--color-accent-secondary)}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:var(--transition-base)}.sidebar-header{padding:var(--space-lg);border-bottom:1px solid var(--glass-border)}.sidebar-logo{display:flex;align-items:center;gap:var(--space-sm)}.sidebar-logo-icon{width:40px;height:40px;background:var(--gradient-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow)}.sidebar-logo-text{font-size:1.25rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-nav{flex:1;padding:var(--space-md);overflow-y:auto}.nav-section{margin-bottom:var(--space-lg)}.nav-section-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);padding:var(--space-sm) var(--space-sm);margin-bottom:var(--space-xs)}.nav-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast);margin-bottom:var(--space-xs);text-decoration:none}.nav-item:hover{background:var(--color-bg-card-hover);color:var(--color-text-primary)}.nav-item.active{background:var(--gradient-glow);color:var(--color-text-primary);border:1px solid var(--color-border-active)}.nav-item-icon{width:20px;height:20px;opacity:.8}.nav-item.active .nav-item-icon{opacity:1}.main-content{flex:1;margin-left:var(--sidebar-width);min-height:100vh;padding:var(--space-xl)}.page-header{margin-bottom:var(--space-xl)}.page-title{font-size:1.75rem;font-weight:700;margin-bottom:var(--space-xs)}.page-subtitle{color:var(--color-text-secondary);font-size:.95rem}.card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base);position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0;background:var(--gradient-card);opacity:0;transition:opacity var(--transition-base);pointer-events:none}.card:hover{border-color:var(--color-border-active);box-shadow:var(--shadow-card),var(--shadow-glow-sm);transform:translateY(-4px)}.card:hover:before{opacity:1}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.card-title{font-size:1.125rem;font-weight:600}.card-description{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:var(--space-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);border:none;outline:none;text-decoration:none;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.1),transparent);opacity:0;transition:opacity var(--transition-fast)}.btn:hover:after{opacity:1}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md),0 0 25px #6366f159}.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg),0 0 40px #6366f180}.btn-primary:active{transform:translateY(-1px) scale(.99)}.btn-secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-bg-card-hover);border-color:var(--color-accent-primary);transform:translateY(-2px)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-bg-card);color:var(--color-text-primary);transform:translate(4px)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:1rem;border-radius:var(--radius-lg)}.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--radius-md)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.input-group{margin-bottom:var(--space-md)}.input-label{display:block;font-size:.85rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-xs);transition:color var(--transition-fast)}.input-group:focus-within .input-label{color:var(--color-accent-primary)}.input{width:100%;padding:12px var(--space-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.95rem;font-family:var(--font-sans);transition:all var(--transition-fast)}.input:hover{border-color:var(--color-border-hover);background:var(--color-bg-tertiary)}.input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 4px #6366f126,var(--shadow-sm);background:var(--color-bg-secondary)}.input::placeholder{color:var(--color-text-muted)}.input-textarea{min-height:140px;resize:vertical;line-height:1.6}.select{width:100%;padding:12px var(--space-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.95rem;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}.select:hover{border-color:var(--color-border-hover);background-color:var(--color-bg-tertiary)}.select:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 4px #6366f126,var(--shadow-sm)}.grid{display:grid;gap:var(--space-lg)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media(max-width:1200px){.grid-4{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.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-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.image-viewer{position:relative;width:100%;aspect-ratio:16/9;background:var(--color-bg-secondary);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border)}.image-viewer img{width:100%;height:100%;object-fit:contain}.image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-text-tertiary)}.image-placeholder-icon{width:64px;height:64px;margin-bottom:var(--space-md);opacity:.5}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-bg-tertiary);border-top-color:var(--color-accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay{position:absolute;inset:0;background:#0a0a0fcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);z-index:10}.loading-text{font-size:.875rem;color:var(--color-text-secondary)}.badge{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:500;border-radius:var(--radius-full);background:var(--color-bg-tertiary);color:var(--color-text-secondary)}.badge-primary{background:#6366f133;color:var(--color-accent-primary)}.badge-success{background:#10b98133;color:var(--color-success)}.tabs{display:flex;gap:var(--space-xs);padding:var(--space-xs);background:var(--color-bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.tab{flex:1;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast);border:none;background:transparent;text-align:center}.tab:hover{color:var(--color-text-primary)}.tab.active{background:var(--gradient-primary);color:#fff}.modal-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--space-xl);max-width:500px;width:90%;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{margin-bottom:var(--space-lg)}.modal-title{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-xs)}.modal-description{font-size:.875rem;color:var(--color-text-secondary)}.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-lg)}.room-list{display:flex;flex-direction:column;gap:var(--space-sm);max-height:300px;overflow-y:auto;padding-right:var(--space-sm)}.room-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border)}.room-item-name{flex:1;font-weight:500}.room-item-dims{font-size:.875rem;color:var(--color-text-secondary);font-family:var(--font-mono)}.room-item-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-tertiary);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-fast)}.room-item-remove:hover{background:#ef444433;color:var(--color-error)}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md)}.history-item{aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;position:relative;border:1px solid var(--color-border);transition:var(--transition-fast)}.history-item:hover{border-color:var(--color-accent-primary);transform:scale(1.02)}.history-item img{width:100%;height:100%;object-fit:cover}.history-item-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--space-sm);background:linear-gradient(transparent,#000c)}.history-item-type{font-size:.75rem;font-weight:500;color:#fff}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3xl);text-align:center}.empty-state-icon{width:80px;height:80px;color:var(--color-text-muted);margin-bottom:var(--space-lg);opacity:.5}.empty-state-title{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-sm)}.empty-state-description{font-size:.875rem;color:var(--color-text-secondary);max-width:400px}.animate-pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-float{animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.storyboard-frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-md)}.storyboard-frame{position:relative;aspect-ratio:16/9;background:var(--color-bg-secondary);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border)}.storyboard-frame-number{position:absolute;top:var(--space-sm);left:var(--space-sm);background:#000000b3;color:#fff;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.storyboard-frame img{width:100%;height:100%;object-fit:cover}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:var(--space-xs) var(--space-sm);background:var(--color-bg-primary);color:var(--color-text-primary);font-size:.75rem;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;visibility:hidden;transition:var(--transition-fast);margin-bottom:var(--space-xs);border:1px solid var(--color-border)}.tooltip:hover:after{opacity:1;visibility:visible}.progress-bar{height:4px;background:var(--color-bg-tertiary);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width .3s ease}.toast-container{position:fixed;top:var(--space-xl);right:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);z-index:2000;pointer-events:none}.toast{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);pointer-events:auto;animation:toastSlideIn .3s ease;max-width:400px}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-success{border-color:#10b9814d}.toast-success .toast-icon{color:var(--color-success)}.toast-error{border-color:#ef44444d}.toast-error .toast-icon{color:var(--color-error)}.toast-info{border-color:#3b82f64d}.toast-info .toast-icon{color:var(--color-info)}.toast-message{flex:1;font-size:.875rem;color:var(--color-text-primary)}.toast-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-tertiary);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-fast)}.toast-close:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.error-boundary{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-xl);background:var(--color-bg-primary)}.error-boundary-content{text-align:center;max-width:500px}.error-boundary-icon{width:80px;height:80px;margin:0 auto var(--space-lg);color:var(--color-warning);opacity:.8}.error-boundary-content h1{font-size:1.75rem;margin-bottom:var(--space-sm)}.error-boundary-content p{font-size:1rem;color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.error-boundary-details{padding:var(--space-md);background:var(--color-bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--space-lg);overflow-x:auto}.error-boundary-details code{font-family:var(--font-mono);font-size:.75rem;color:var(--color-error)}.error-boundary-actions{display:flex;gap:var(--space-sm);justify-content:center}.modal{position:relative}.modal-close-btn{position:absolute;top:var(--space-md);right:var(--space-md);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast)}.modal-close-btn:hover{background:var(--color-bg-card-hover);color:var(--color-text-primary);border-color:var(--color-border-hover)}.spin{animation:spin 1s linear infinite}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 0%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1em;margin:var(--space-xs) 0}.skeleton-card{height:200px}*:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}.card{transform:translateY(0)}.card:hover{transform:translateY(-2px)}.btn:active:not(:disabled){transform:scale(.98)}.main-content{animation:pageIn .3s ease}@keyframes pageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.sidebar{transform:translate(-100%);width:260px}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}}