@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";
:root{--bg-main:#0c0c12;--bg-surface:#12121a;--bg-elevated:#1a1a24;--accent:#00e5ff;--accent-glow:#00e5ff4d;--accent-soft:#00e5ff1a;--purple:#a855f7;--purple-glow:#a855f740;--green:#10b981;--red:#ef4444;--amber:#f59e0b;--glass-bg:#ffffff0b;--glass-border:#ffffff1a;--glass-hover:#ffffff14;--glass-active:#00e5ff17;--text-primary:#f5f5fa;--text-secondary:#a0a0b8;--text-dim:#6b6b82;--font:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--transition:.2s cubic-bezier(.4, 0, .2, 1)}.light-mode{--bg-main:#fafaf5;--bg-surface:#f2f2ec;--bg-elevated:#fff;--accent:#4d7c0f;--accent-glow:#65a30d4d;--accent-soft:#65a30d1a;--purple:#e11d48;--purple-glow:#e11d4833;--green:#65a30d;--red:#e11d48;--amber:#d97706;--glass-bg:#00000008;--glass-border:#0000001a;--glass-hover:#0000000d;--glass-active:#65a30d14;--text-primary:#1a1a1a;--text-secondary:#525252;--text-dim:#8a8a8a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg-main);color:var(--text-primary);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;overflow:hidden}.ambient-glow{z-index:0;pointer-events:none;background:radial-gradient(900px 700px at 80% 10%,#00e5ff12,#0000),radial-gradient(700px 700px at 15% 80%,#a855f70d,#0000),radial-gradient(500px 500px at 50% 40%,#00e5ff06,#0000);position:fixed;inset:0}.main-container{width:100%;height:100vh;position:relative}.light-mode .ambient-glow{background:radial-gradient(900px 700px at 80% 10%,#65a30d14,#0000),radial-gradient(700px 700px at 15% 80%,#e11d480f,#0000),radial-gradient(500px 500px at 50% 40%,#65a30d08,#0000)}.light-mode .sidebar{background:#ffffffeb}.light-mode .sidebar-brand-icon{background:linear-gradient(135deg,#65a30d26,#e11d481f);border-color:#65a30d40}.light-mode .sidebar-footer{background:#00000008}.light-mode .sidebar-nav-item.active{background:#65a30d14;border-color:#65a30d26}.light-mode .controls-panel{background:#ffffffb3;border-color:#00000014}.light-mode .settings-strip{background:#00000006}.light-mode .prompt-textarea{background:#00000008}.light-mode .generate-btn{background:linear-gradient(135deg,#65a30d1f,#e11d4814);border-color:#65a30d4d}.light-mode .generate-btn:hover:not(:disabled){background:linear-gradient(135deg,#65a30d33,#e11d481f);border-color:#65a30d80;box-shadow:0 0 30px #65a30d1f}.light-mode .pill-sm.active{background:#65a30d1a;border-color:#65a30d4d}.light-mode .gallery-card{background:#fffc;border-color:#00000014}.light-mode .lightbox-overlay{background:#ffffffe6}.light-mode .select-field{background:#00000008}.light-mode .select-field option{color:#1a1a1a;background:#fff}.light-mode .error-banner{background:#e11d4814;border-color:#e11d4833}.light-mode .empty-state-icon{background:linear-gradient(135deg,#65a30d1f,#e11d4814);border-color:#65a30d33}.light-mode .api-key-input{background:#00000008}.light-mode .theme-toggle{color:var(--text-dim)}.light-mode .theme-toggle:hover{color:var(--accent)}.app-shell{z-index:1;height:100vh;display:flex;position:relative}.sidebar{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid var(--glass-border);z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:#0e0e16eb;flex-direction:column;flex-shrink:0;width:64px;height:100vh;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.sidebar::-webkit-scrollbar{display:none}.sidebar.expanded{width:240px}.sidebar-brand{align-items:center;gap:12px;height:68px;padding:20px 0 20px 15px;display:flex}.sidebar-brand-icon{background:linear-gradient(135deg,#00e5ff26,#a855f726);border:1px solid #00e5ff33;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.sidebar-brand-text{opacity:0;white-space:nowrap;transition:opacity .2s 50ms}.sidebar.expanded .sidebar-brand-text{opacity:1}.theme-toggle{border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;transition:all var(--transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;margin:0 8px 4px;padding:8px;font-family:inherit;display:flex}.theme-toggle:hover{background:var(--glass-hover);color:var(--accent);border-color:var(--glass-border)}.sidebar-brand h1{letter-spacing:-.3px;color:var(--text-primary);font-size:1.15rem;font-weight:700}.sidebar-brand h1 span{color:var(--accent)}.sidebar-brand-sub{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-top:2px;font-size:.6rem;font-weight:600}.sidebar-divider{background:var(--glass-border);height:1px;margin:0 12px}.sidebar-section-label{text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim);opacity:0;height:28px;padding:14px 20px 6px;font-size:.55rem;font-weight:700;transition:opacity .2s}.sidebar.expanded .sidebar-section-label{opacity:1}.sidebar-nav{scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex:1;gap:2px;padding:4px 8px;display:flex;overflow-y:auto}.sidebar-nav::-webkit-scrollbar{display:none}.sidebar-nav-item{border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:background var(--transition), color var(--transition), border-color var(--transition);background:0 0;border:1px solid #0000;align-items:center;gap:12px;width:100%;padding:10px 16px;font-family:inherit;font-size:.82rem;font-weight:500;display:flex}.sidebar-nav-item .nav-icon{opacity:.6;flex-shrink:0;width:18px;height:18px}.sidebar-nav-item.active .nav-icon{opacity:1}.sidebar-nav-item span{opacity:0;white-space:nowrap;font-size:.82rem;transition:opacity .2s 50ms}.sidebar.expanded .sidebar-nav-item span{opacity:1}.sidebar-nav-item:hover{background:var(--glass-hover);color:var(--text-primary)}.sidebar-nav-item.active{background:var(--glass-active);color:var(--accent);border-color:#00e5ff1f}.sidebar-footer{border-top:1px solid var(--glass-border);background:#0000001f;margin-top:auto;padding:12px 8px}.sidebar.expanded .sidebar-footer{padding:16px}.api-key-section{display:none}.sidebar.expanded .api-key-section{flex-direction:column;gap:6px;display:flex}.api-key-collapsed-icon{color:var(--text-dim);justify-content:center;align-items:center;padding:4px 0;display:flex}.sidebar.expanded .api-key-collapsed-icon{display:none}.api-key-section label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-size:.65rem;font-weight:700}.api-key-row{gap:6px;display:flex}.api-key-input{border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary);transition:border-color var(--transition);background:#0003;outline:none;flex:1;padding:8px 12px;font-family:Courier New,monospace;font-size:.7rem}.api-key-input:focus{border-color:var(--accent)}.api-key-status{color:var(--text-dim);align-items:center;gap:6px;font-size:.65rem;display:flex}.status-dot{border-radius:50%;width:6px;height:6px}.status-dot.connected{background:var(--green);box-shadow:0 0 8px #10b98166}.status-dot.disconnected{background:var(--red);box-shadow:0 0 8px #ef44444d}.main-content{flex-direction:column;flex:1;min-width:0;height:100vh;display:flex;overflow:hidden}.studio-layout{flex:1;min-height:0;display:flex;overflow:hidden}.controls-panel{border-right:1px solid var(--glass-border);background:#0e0e1699;flex-direction:column;flex-shrink:0;width:380px;height:100%;display:flex}.controls-scroll{flex-direction:column;flex:1;gap:14px;padding:24px 20px;display:flex;overflow-y:auto}.preview-area{flex-direction:column;flex:1;min-width:0;padding:24px;display:flex;overflow-y:auto}.ctrl-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);align-items:center;gap:6px;margin-bottom:6px;font-size:.65rem;font-weight:700;display:flex}.section-badge{background:var(--accent-soft);color:var(--accent);border:1px solid #00e5ff1f;border-radius:6px;padding:1px 7px;font-size:.55rem;font-weight:700}.prompt-textarea{border:1px solid var(--glass-border);border-radius:var(--radius-md);width:100%;min-height:100px;color:var(--text-primary);font-family:var(--font);resize:vertical;transition:border-color var(--transition);background:#0003;outline:none;padding:12px 14px;font-size:.85rem;line-height:1.6}.prompt-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00e5ff0f}.prompt-textarea::placeholder{color:var(--text-dim)}.settings-strip{border-radius:var(--radius-md);border:1px solid var(--glass-border);background:#00000026;flex-direction:column;gap:10px;padding:12px;display:flex}.pill-row{grid-template-columns:repeat(auto-fill,minmax(0,1fr));gap:4px;display:grid}.pill-row.cols-3{grid-template-columns:repeat(3,1fr)}.pill-row.cols-4{grid-template-columns:repeat(4,1fr)}.pill-row.cols-5{grid-template-columns:repeat(5,1fr)}.pill-sm{border:1px solid var(--glass-border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);white-space:nowrap;text-align:center;background:0 0;border-radius:6px;padding:6px 4px;font-family:inherit;font-size:.68rem;font-weight:600}.pill-sm:hover{background:var(--glass-hover);color:var(--text-primary)}.pill-sm.active{background:var(--accent-soft);color:var(--accent);border-color:#00e5ff4d}.pill-sm.disabled{opacity:.3;pointer-events:none}.select-wrap{position:relative}.select-field{border:1px solid var(--glass-border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font);appearance:none;cursor:pointer;transition:border-color var(--transition);background:#0003;outline:none;padding:10px 36px 10px 14px;font-size:.8rem;font-weight:500}.select-field:focus{border-color:var(--accent)}.select-field option{color:#fff;background:#1a1a24}.select-arrow{pointer-events:none;color:var(--text-dim);position:absolute;top:50%;right:12px;transform:translateY(-50%)}.cost-estimator{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:6px;margin-bottom:8px;padding:6px 10px}.cost-row{color:var(--text-dim);letter-spacing:.02em;font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;font-size:.62rem;font-weight:600;display:flex}.cost-total{color:var(--accent);font-size:.68rem;font-weight:700}.generate-btn{border-radius:var(--radius-md);width:100%;color:var(--accent);font-family:var(--font);cursor:pointer;transition:all var(--transition);background:linear-gradient(135deg,#00e5ff1f,#a855f714);border:1px solid #00e5ff4d;justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-size:.9rem;font-weight:700;display:flex}.generate-btn:hover:not(:disabled){background:linear-gradient(135deg,#00e5ff33,#a855f726);border-color:#00e5ff80;transform:translateY(-1px);box-shadow:0 0 30px #00e5ff26}.generate-btn:active:not(:disabled){transform:translateY(0)}.generate-btn:disabled{opacity:.4;cursor:not-allowed}.ref-upload-zone{border:1px dashed var(--glass-border);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:8px;min-height:60px;padding:12px;display:flex}.ref-thumb{border-radius:var(--radius-sm);border:1px solid var(--glass-border);width:52px;height:52px;position:relative;overflow:hidden}.ref-thumb img{object-fit:cover;width:100%;height:100%}.ref-thumb-remove{background:var(--red);color:#fff;cursor:pointer;opacity:0;width:16px;height:16px;transition:opacity var(--transition);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:10px;line-height:1;display:flex;position:absolute;top:-4px;right:-4px}.ref-thumb:hover .ref-thumb-remove{opacity:1}.ref-add-btn{border-radius:var(--radius-sm);width:52px;height:52px;color:var(--text-dim);cursor:pointer;transition:all var(--transition);background:0 0;border:1px dashed #ffffff26;justify-content:center;align-items:center;display:flex}.ref-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;display:grid}.gallery-card{border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--glass-bg);transition:all var(--transition);overflow:hidden}.gallery-card:hover{border-color:#ffffff1f;transform:translateY(-2px);box-shadow:0 8px 32px #0000004d}.gallery-card-img{aspect-ratio:1;cursor:pointer;position:relative;overflow:hidden}.gallery-card-img img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.gallery-card:hover .gallery-card-img img{transform:scale(1.03)}.gallery-card-overlay{opacity:0;transition:opacity var(--transition);background:linear-gradient(#0000 40%,#0009);justify-content:flex-end;align-items:flex-end;gap:6px;padding:10px;display:flex;position:absolute;inset:0}.gallery-card:hover .gallery-card-overlay{opacity:1}.gallery-card-footer{padding:10px 12px}.gallery-card-prompt{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:Courier New,monospace;font-size:.7rem;line-height:1.5;display:-webkit-box;overflow:hidden}.skeleton{background:#ffffff0d;position:relative;overflow:hidden}.skeleton:after{content:"";background:linear-gradient(90deg,#0000,#ffffff0a,#0000);animation:1.5s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.empty-state{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:40px;display:flex}.empty-state-icon{background:linear-gradient(135deg,#00e5ff14,#a855f70f);border:1px solid #00e5ff1a;border-radius:24px;justify-content:center;align-items:center;width:80px;height:80px;display:flex}.empty-state h3{color:var(--text-secondary);font-size:1.1rem;font-weight:600}.empty-state p{color:var(--text-dim);max-width:320px;font-size:.8rem}.error-banner{border-radius:var(--radius-sm);color:#fca5a5;background:#ef444414;border:1px solid #ef444433;align-items:center;gap:8px;padding:10px 14px;font-size:.75rem;display:flex}.error-banner button{color:inherit;cursor:pointer;opacity:.6;background:0 0;border:none;margin-left:auto;padding:2px}.error-banner button:hover{opacity:1}.action-btn{border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-family:var(--font);cursor:pointer;transition:all var(--transition);background:#0006;border-radius:6px;align-items:center;gap:4px;padding:6px 12px;font-size:.65rem;font-weight:700;display:flex}.action-btn:hover{background:#00e5ff26;border-color:#00e5ff4d}.action-btn.danger:hover{background:#ef444426;border-color:#ef44444d}.lightbox-overlay{z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#000000d9;justify-content:center;align-items:center;padding:40px;display:flex;position:fixed;inset:0}.lightbox-img{object-fit:contain;border-radius:var(--radius-md);max-width:90%;max-height:90vh;box-shadow:0 20px 60px #00000080}.lightbox-close{color:#fff;cursor:pointer;width:40px;height:40px;transition:all var(--transition);background:#00000080;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:absolute;top:24px;right:24px}.lightbox-close:hover{background:#ffffff1a}.lightbox-actions{gap:8px;display:flex;position:absolute;bottom:32px}.spinner{border:2px solid var(--glass-border);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}.spinner-lg{border-width:3px;width:40px;height:40px}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff0f;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff1f}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.3s forwards fadeIn}.animate-slide-up{animation:.4s forwards slideUp}.text-accent{color:var(--accent)}.text-dim{color:var(--text-dim)}.text-secondary{color:var(--text-secondary)}