:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a2e;--glass-bg: rgba(255, 255, 255, .04);--glass-border: rgba(255, 255, 255, .08);--glass-hover: rgba(255, 255, 255, .08);--text-primary: #f0f0f5;--text-secondary: #8888a0;--text-muted: #55556a;--accent-1: #6366f1;--accent-2: #a855f7;--accent-3: #ec4899;--accent-gradient: linear-gradient(135deg, #6366f1, #a855f7);--accent-gradient-wide: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);--success: #22c55e;--warning: #f59e0b;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-glow: 0 0 40px rgba(99, 102, 241, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition: .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}#app:before,#app:after{content:"";position:fixed;border-radius:50%;filter:blur(120px);opacity:.3;pointer-events:none;z-index:0}#app:before{width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.3),transparent 70%);top:-200px;right:-100px}#app:after{width:500px;height:500px;background:radial-gradient(circle,rgba(168,85,247,.2),transparent 70%);bottom:-150px;left:-100px}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg)}#app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--glass-border);background:#0a0a0fcc;backdrop-filter:blur(12px);z-index:10;position:relative}.header-left{display:flex;align-items:center;gap:12px}.logo{display:flex;align-items:center}#app-header h1{font-size:1.3rem;font-weight:700;letter-spacing:-.5px}.accent{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--text-secondary);font-size:.85rem;font-weight:400}.screen{display:none;flex:1;overflow:auto;position:relative;z-index:1}.screen.active{display:flex}#upload-screen{justify-content:center;align-items:center;padding:40px}.upload-container{max-width:640px;width:100%;display:flex;flex-direction:column;gap:24px}.drop-zone{border:2px dashed rgba(99,102,241,.3);border-radius:var(--radius-xl);padding:60px 40px;text-align:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.drop-zone:before{content:"";position:absolute;inset:0;background:var(--accent-gradient);opacity:0;transition:opacity .3s}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent-1);transform:translateY(-2px)}.drop-zone:hover:before,.drop-zone.drag-over:before{opacity:.05}.drop-zone-content{position:relative;z-index:1}.upload-icon{margin-bottom:20px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.drop-zone h2{font-size:1.4rem;font-weight:600;margin-bottom:8px}.drop-zone p{color:var(--text-secondary);font-size:.9rem}.upload-hint{margin-top:20px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#6366f11a;border-radius:100px;font-size:.8rem;color:var(--text-secondary)}.badge{font-size:.75rem}.thumbnails{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.thumbnails.hidden{display:none}.thumb-item{position:relative;width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;border:2px solid var(--glass-border);transition:var(--transition)}.thumb-item:hover{border-color:var(--accent-1);transform:scale(1.05)}.thumb-item img{width:100%;height:100%;object-fit:cover}.thumb-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#000000b3;border:none;color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.thumb-item:hover .thumb-remove{opacity:1}.scale-section.hidden{display:none}.scale-card{padding:20px 24px;text-align:center}.scale-card h3{font-size:1rem;margin-bottom:6px}.scale-card p{font-size:.8rem;color:var(--text-secondary);margin-bottom:16px}.scale-input-group{display:inline-flex;align-items:center;gap:8px;background:var(--bg-secondary);border-radius:var(--radius-md);padding:4px 16px 4px 4px;border:1px solid var(--glass-border)}.scale-input-group input{width:80px;background:transparent;border:none;color:var(--text-primary);font-size:1.2rem;font-weight:600;font-family:var(--font);text-align:center;padding:8px;outline:none}.scale-input-group .unit{color:var(--text-secondary);font-size:.9rem}.process-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border:none;border-radius:var(--radius-md);background:var(--accent-gradient);color:#fff;font-size:1rem;font-weight:600;font-family:var(--font);cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.process-btn.hidden{display:none}.process-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15),transparent);transform:translate(-100%);transition:transform .6s}.process-btn:hover:before{transform:translate(100%)}.process-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.process-btn:active{transform:translateY(0)}.btn-icon{transition:transform .3s}.process-btn:hover .btn-icon{transform:translate(4px)}#processing-screen{justify-content:center;align-items:center}.processing-container{text-align:center;max-width:480px}.processing-visual{position:relative;width:120px;height:120px;margin:0 auto 32px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid var(--accent-1);animation:pulse-out 2s ease-out infinite}.delay-1{animation-delay:.4s}.delay-2{animation-delay:.8s}@keyframes pulse-out{0%{transform:scale(.5);opacity:.8}to{transform:scale(1.5);opacity:0}}.processing-icon{font-size:48px;animation:spin-slow 4s linear infinite}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#processing-screen h2{font-size:1.5rem;font-weight:700;margin-bottom:20px}.progress-bar-container{width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;margin-bottom:12px;overflow:hidden}.progress-bar{height:100%;background:var(--accent-gradient-wide);border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}.processing-status{color:var(--text-secondary);font-size:.85rem;margin-bottom:32px}.processing-steps{display:flex;flex-direction:column;gap:12px;text-align:left}.step{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:.9rem;transition:color .3s}.step.active{color:var(--text-primary)}.step.done{color:var(--success)}.step-indicator{width:20px;height:20px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition)}.step.active .step-indicator{border-color:var(--accent-1);box-shadow:0 0 12px #6366f166;animation:step-pulse 1s ease-in-out infinite alternate}.step.done .step-indicator{background:var(--success);border-color:var(--success)}.step.done .step-indicator:after{content:"✓";font-size:11px;color:#fff}@keyframes step-pulse{0%{box-shadow:0 0 6px #6366f14d}to{box-shadow:0 0 16px #6366f199}}#viewer-screen{flex:1}.viewer-layout{display:flex;height:100%;width:100%;overflow:hidden}.sidebar-left{order:-1;border-left:none;border-right:1px solid var(--glass-border);width:220px}.tuning-sidebar{width:280px;display:flex;flex-direction:column;padding:0;gap:0;border-radius:0;border-left:1px solid var(--glass-border);overflow-y:auto;min-height:0;flex-shrink:0}.tuning-sidebar .tuning-panel{padding:0}.tuning-sidebar .sidebar-header{padding:16px 16px 8px}.tuning-sidebar .tuning-controls{padding:0 16px 16px}.viewer-panel{flex:1;position:relative;background:var(--bg-secondary);overflow:hidden}#three-canvas{width:100%;height:100%;display:block}.viewer-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:6px;border-radius:var(--radius-md)}.ctrl-btn{width:40px;height:40px;border:none;background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.ctrl-btn:hover{background:var(--glass-hover);color:var(--text-primary)}.ctrl-btn.active{color:var(--accent-1);background:#6366f11a}.ctrl-divider{width:1px;height:24px;background:var(--glass-border);margin:0 2px}.volume-overlay{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-md);z-index:5}.volume-overlay .label{color:var(--text-secondary);font-size:.8rem}.volume-overlay .value{font-size:1.1rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.click-hint{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:100px;font-size:.8rem;color:var(--text-secondary);animation:fadeInDown .6s ease;white-space:nowrap}@keyframes fadeInDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.info-sidebar{width:220px;display:flex;flex-direction:column;padding:16px;gap:12px;border-radius:0;border-left:1px solid var(--glass-border);border-top:none;border-bottom:none;border-right:none;overflow-y:auto;min-height:0;flex-shrink:0}.sidebar-header h2{font-size:1rem;font-weight:700;margin-bottom:4px}.total-volume{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#6366f114;border-radius:var(--radius-md);border:1px solid rgba(99,102,241,.15)}.total-volume .label{color:var(--text-secondary);font-size:.85rem}.total-volume .value{font-size:1.2rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ingredient-list{display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto}.ingredient-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);border:1px solid transparent}.ingredient-item:hover{background:var(--glass-hover);border-color:var(--glass-border)}.ingredient-item.selected{background:#6366f114;border-color:#6366f133}.ingredient-swatch{width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0}.ingredient-info{flex:1;min-width:0}.ingredient-name{font-size:.9rem;font-weight:500;margin-bottom:2px}.ingredient-vol{font-size:.8rem;color:var(--text-secondary)}.ingredient-pct{font-size:.75rem;color:var(--text-muted);font-weight:600;background:var(--bg-secondary);padding:3px 8px;border-radius:100px}.selected-info.hidden{display:none}.selected-info h3{font-size:.9rem;font-weight:600;margin-bottom:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}.selected-detail{padding:16px;background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--glass-border)}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}.detail-row:not(:last-child){border-bottom:1px solid var(--glass-border)}.detail-row .label{color:var(--text-secondary);font-size:.8rem}.detail-row .value{font-weight:600;font-size:.9rem}@media(max-width:768px){#app-header{padding:12px 16px}.tagline{display:none}.viewer-layout{flex-direction:column}.viewer-panel{height:45vh}.info-sidebar,.sidebar-left{width:100%;border-left:none;border-right:none;border-top:none;border-bottom:1px solid var(--glass-border);max-height:120px;flex-direction:row;flex-wrap:wrap;order:-1}.tuning-sidebar{width:100%;max-height:35vh;border-left:none;border-top:1px solid var(--glass-border)}#upload-screen{padding:20px}.drop-zone{padding:40px 20px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.screen.active{animation:fadeIn .4s ease}.tooltip{position:absolute;background:var(--bg-tertiary);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:8px 12px;font-size:.8rem;color:var(--text-primary);pointer-events:none;z-index:100;white-space:nowrap;box-shadow:var(--shadow-lg);animation:fadeIn .15s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.tuning-panel{border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:visible}.tuning-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#6366f10f;border:none;color:var(--text-primary);font-family:var(--font);font-size:.9rem;font-weight:500;cursor:pointer;transition:var(--transition)}.tuning-toggle:hover{background:#6366f11f}.toggle-arrow{font-size:.8rem;transition:transform .3s;color:var(--text-secondary)}.tuning-panel.collapsed .toggle-arrow{transform:rotate(-90deg)}.tuning-controls{padding:16px;display:flex;flex-direction:column;gap:14px;transition:max-height .3s ease,padding .3s ease,opacity .3s ease;max-height:600px;opacity:1}.tuning-panel.collapsed .tuning-controls{max-height:0;padding:0 16px;opacity:0;overflow:hidden}.tune-group label{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-secondary);margin-bottom:6px}.tune-val{font-weight:600;color:var(--accent-1);font-size:.8rem}.tune-group input[type=range]{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:2px;outline:none}.tune-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-1);cursor:pointer;border:2px solid var(--bg-primary);box-shadow:0 0 6px #6366f166}.tune-hint{font-size:.7rem;color:var(--text-muted);margin-top:2px}.tune-select{width:100%;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font);font-size:.8rem;cursor:pointer;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.tune-select:hover{border-color:var(--accent-1)}.tune-select:focus{border-color:var(--accent-1);box-shadow:0 0 0 2px #6366f126}.tune-select option{background:var(--bg-secondary);color:var(--text-primary)}.tune-divider{border:none;border-top:1px solid var(--glass-border);margin:4px 0}.tune-toggles{display:flex;gap:16px;flex-direction:row!important}.tune-checkbox{display:flex!important;align-items:center;gap:6px;cursor:pointer;font-size:.8rem;color:var(--text-secondary)}.tune-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-1);cursor:pointer}.tune-apply-btn{width:100%;padding:10px;border:none;border-radius:var(--radius-sm);background:var(--accent-gradient);color:#fff;font-family:var(--font);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition);margin-top:4px}.tune-apply-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)}.tune-apply-btn:active{transform:translateY(0)}.tune-apply-btn.regenerating{opacity:.7;pointer-events:none}