:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#e0e0e0;min-height:100vh}#root{max-width:960px;margin:0 auto;padding:1.5rem;overflow-x:hidden;width:100%}.app-header{text-align:center;padding:1.5rem 0 1rem}.app-header h1{font-size:2rem;background:linear-gradient(90deg,#7f5af0,#2cb67d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#94a1b2;font-size:.9rem;margin-top:.25rem}.server-warning{margin-top:.75rem;padding:.5rem 1rem;background:#ff6b6b26;border:1px solid rgba(255,107,107,.3);border-radius:8px;color:#ff6b6b;font-size:.85rem}.app-main{display:grid;grid-template-columns:280px 1fr;gap:1.5rem;margin-top:1.5rem}@media(max-width:700px){.app-main{grid-template-columns:1fr}}.left-panel,.right-panel{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.channel-selector h3,.mood-control h3{font-size:.85rem;color:#94a1b2;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.channel-list{display:flex;flex-direction:column;gap:.5rem}.channel-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#e0e0e0;cursor:pointer;transition:all .2s;font-size:.95rem}.channel-btn:hover{background:#7f5af026;border-color:#7f5af04d}.channel-btn.active{background:#7f5af033;border-color:#7f5af0;color:#fff}.channel-icon{font-size:1.3rem}.mood-control{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1rem}.energy-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.9rem}.energy-value{color:#7f5af0;font-weight:600}.slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:3px;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#7f5af0;cursor:pointer;border:2px solid #fff}.energy-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#72757e;margin-top:.25rem}.sub-scene-selector{margin-top:1rem}.sub-scene-selector h4{font-size:.8rem;color:#94a1b2;margin-bottom:.5rem}.sub-scene-list{display:flex;flex-wrap:wrap;gap:.4rem}.sub-scene-btn{padding:.35rem .75rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:silver;font-size:.8rem;cursor:pointer;transition:all .2s}.sub-scene-btn:hover{background:#2cb67d26}.sub-scene-btn.active{background:#2cb67d33;border-color:#2cb67d;color:#fff}.player{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.25rem;overflow:hidden}.player-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.connect-btn{padding:.6rem 1.2rem;border:1px solid #2cb67d;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;background:transparent;color:#2cb67d}.connect-btn:hover{background:#2cb67d26}.connect-btn.connected{background:#2cb67d33;border-color:#2cb67d;color:#fff}.play-btn{padding:.6rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;background:#7f5af0;color:#fff;min-width:100px}.play-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.play-btn:hover:not(:disabled){background:#6b46e5;transform:scale(1.02)}.play-btn.playing{background:#e53170}.play-btn.playing:hover{background:#d02060}.beep-btn{padding:.6rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .2s;background:#ffffff0f;color:#e0e0e0}.beep-btn:hover{background:#ffffff1f}.volume-control{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.volume-slider{flex:1;min-width:0}.player-status{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;font-size:.85rem;color:#94a1b2}.status-dot{width:8px;height:8px;border-radius:50%;background:#72757e}.status-dot.connected{background:#2cb67d;box-shadow:0 0 6px #2cb67d80}.current-prompt{margin-top:.5rem;font-size:.8rem;color:#72757e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.prompt-label{color:#94a1b2;margin-right:.4rem}.audio-indicator{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.8rem;color:#94a1b2}.indicator-dot{width:8px;height:8px;border-radius:50%}.indicator-dot.waiting{background:#f0a030;animation:pulse 1.5s infinite}.indicator-dot.received{background:#2cb67d;box-shadow:0 0 6px #2cb67d80}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.vocals-toggle{margin-top:.75rem}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.85rem}.toggle-checkbox{display:none}.toggle-switch{position:relative;width:36px;height:20px;background:#ffffff1a;border-radius:10px;transition:background .2s;flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#72757e;transition:all .2s}.toggle-checkbox:checked+.toggle-switch{background:#7f5af04d}.toggle-checkbox:checked+.toggle-switch:after{left:18px;background:#7f5af0}.toggle-text{color:#94a1b2}.bpm-control{margin-top:.75rem}.bpm-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.bpm-header h4{font-size:.8rem;color:#94a1b2;margin:0}.bpm-value{font-size:.85rem;color:#7f5af0;font-weight:600}.bpm-reset-btn{padding:.15rem .5rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#72757e;font-size:.7rem;cursor:pointer;transition:all .2s}.bpm-reset-btn:hover{color:#e0e0e0;border-color:#fff3}.keyscale-control{margin-top:.75rem;display:flex;align-items:center;gap:.5rem}.keyscale-control h4{font-size:.8rem;color:#94a1b2;margin:0;flex-shrink:0}.keyscale-select{flex:1;padding:.4rem 1.8rem .4rem .6rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#e0e0e0;font-size:.8rem;font-family:inherit;cursor:pointer;transition:all .2s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a1b2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center}.keyscale-select:hover{border-color:#7f5af04d;background-color:#ffffff14}.keyscale-select:focus{outline:none;border-color:#7f5af066}.keyscale-select option{background:#24243e;color:#e0e0e0}.scene-prompt-display{margin-top:.75rem}.scene-prompt-display h4{font-size:.75rem;color:#72757e;margin-bottom:.3rem}.scene-prompt-text{font-size:.75rem;color:#94a1b2;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:.4rem .6rem;line-height:1.4;word-break:break-word}.clear-selection-btn{margin-top:.5rem;padding:.25rem .6rem;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#72757e;font-size:.7rem;cursor:pointer;transition:all .2s}.clear-selection-btn:hover{color:#e0e0e0;border-color:#fff3}.instrument-selector{margin-top:1rem}.instrument-selector h4{font-size:.8rem;color:#94a1b2;margin-bottom:.5rem}.instrument-hint{font-weight:400;color:#72757e;font-size:.75rem}.instrument-list{display:flex;flex-wrap:wrap;gap:.4rem}.instrument-btn{padding:.35rem .75rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:silver;font-size:.8rem;cursor:pointer;transition:all .2s}.instrument-btn:hover{background:#7f5af026}.instrument-btn.active{background:#7f5af033;border-color:#7f5af0;color:#fff}.text-generator{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.25rem;overflow:hidden}.text-generator h3{font-size:.85rem;color:#94a1b2;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.tg-desc{font-size:.8rem;color:#72757e;margin-bottom:.75rem}.tg-input{width:100%;padding:.6rem .8rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#e0e0e0;font-size:.85rem;font-family:inherit;resize:vertical;min-height:60px}.tg-input::placeholder{color:#5a5a6a}.tg-input:focus{outline:none;border-color:#7f5af066}.tg-input:disabled{opacity:.5}.tg-ai-buttons{display:flex;gap:.5rem;margin-top:.5rem}.tg-ai-btn{padding:.3rem .7rem;background:#7f5af01f;border:1px solid rgba(127,90,240,.25);border-radius:6px;color:#a78bfa;font-size:.75rem;cursor:pointer;transition:all .2s}.tg-ai-btn:hover:not(:disabled){background:#7f5af038;border-color:#7f5af066}.tg-ai-btn:disabled{opacity:.4;cursor:not-allowed}.tg-inspire-btn{background:#2cb67d1f;border-color:#2cb67d40;color:#2cb67d}.tg-inspire-btn:hover:not(:disabled){background:#2cb67d38;border-color:#2cb67d66}.tg-options{display:flex;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}.tg-duration-label{font-size:.8rem;color:#94a1b2;display:flex;align-items:center;gap:.4rem}.tg-duration-select{padding:.3rem .5rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#e0e0e0;font-size:.8rem}.tg-generate-btn{padding:.5rem 1.2rem;background:#7f5af0;border:none;border-radius:8px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.tg-generate-btn:hover:not(:disabled){background:#6b46e5;transform:scale(1.02)}.tg-generate-btn:disabled{opacity:.4;cursor:not-allowed}.tg-progress{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;font-size:.8rem;color:#f0a030}.tg-error{margin-top:.75rem;padding:.5rem .75rem;background:#ff6b6b1a;border:1px solid rgba(255,107,107,.2);border-radius:6px;color:#ff6b6b;font-size:.8rem}.tg-result{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}.tg-audio{width:100%;height:36px;border-radius:6px}.tg-download-btn{align-self:flex-start;padding:.4rem .8rem;background:#2cb67d26;border:1px solid rgba(44,182,125,.3);border-radius:6px;color:#2cb67d;font-size:.8rem;cursor:pointer;transition:all .2s}.tg-download-btn:hover{background:#2cb67d40}.app-footer{text-align:center;padding:2rem 0 1rem;color:#4a4a5a;font-size:.8rem}