*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0f;--bg-secondary: #111119;--bg-track: #16162a;--bg-hover: #1e1e3a;--text-primary: #e0e0e0;--text-secondary: #888;--accent: #f7931a;--accent-hover: #ffaa33;--border: #2a2a3e;--progress-bg: #1a1a2e;--progress-fill: #f7931a}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{max-width:900px;margin:0 auto;padding:24px 16px}.header{text-align:center;margin-bottom:32px}.header h1{font-size:2rem;font-weight:700;color:var(--accent);letter-spacing:-.5px}.header p{color:var(--text-secondary);margin-top:8px;font-size:.95rem}.transport-wrapper{position:relative;margin-bottom:20px}.transport{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px 20px}.transport-buttons{display:flex;gap:8px;margin-bottom:12px;justify-content:center;align-items:center}.transport-spacer{flex:1}.progress-container{display:flex;align-items:center;gap:12px}.progress-time{font-family:monospace;font-size:.85rem;color:var(--text-secondary);min-width:36px}.progress-bar{flex:1;height:6px;background:var(--progress-bg);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--progress-fill);border-radius:3px;transition:width .1s linear}.btn{border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:.85rem;cursor:pointer;color:var(--text-primary);background:var(--bg-track);transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-hover);border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:default}.btn:disabled:hover{background:var(--bg-track);border-color:var(--border)}.btn-play{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}.btn-play:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-pause{background:#555;border-color:#555;font-weight:600}.btn-mute.active{background:#c0392b;border-color:#c0392b;color:#fff}.btn-remove{color:#888}.btn-remove:hover{color:#e74c3c;border-color:#e74c3c}.btn-add{background:transparent;color:var(--accent);border-color:var(--accent)}.btn-add:hover{background:#f7931a1a}.btn-export,.btn-share{font-size:.8rem;padding:6px 12px}.btn-export{margin-left:auto}.btn-share{color:var(--accent);border-color:var(--accent);background:transparent}.btn-share:hover{background:#f7931a1a}.mode-toggle{display:flex;gap:4px;margin-bottom:12px;background:var(--bg-primary);border-radius:8px;padding:3px;width:fit-content}.mode-btn{border:none;border-radius:6px;padding:6px 16px;font-size:.8rem;cursor:pointer;color:var(--text-secondary);background:transparent;transition:background .15s,color .15s;font-family:inherit}.mode-btn:hover:not(:disabled){color:var(--text-primary)}.mode-btn:disabled{opacity:.4;cursor:default}.mode-btn-active{background:var(--bg-track);color:var(--text-primary);font-weight:600}.btn-go-live{background:#2ecc71;color:#000;border-color:#2ecc71;font-weight:600}.btn-go-live:hover:not(:disabled){background:#27ae60;border-color:#27ae60}.btn-stop-live{background:#e74c3c;color:#fff;border-color:#e74c3c;font-weight:600}.btn-stop-live:hover{background:#c0392b;border-color:#c0392b}.live-indicator{display:inline-flex;align-items:center;gap:6px;color:#e74c3c;font-weight:700;font-size:.85rem;letter-spacing:1px;animation:live-pulse 1.5s ease-in-out infinite}.live-indicator:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#e74c3c;animation:live-dot 1.5s ease-in-out infinite}@keyframes live-pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes live-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.mixer{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:20px}.mixer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mixer-header h2{font-size:1rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.mixer-actions{display:flex;gap:8px;align-items:center}.track-list{display:flex;flex-direction:column;gap:8px}.track-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-track);border-radius:8px;border:1px solid transparent;transition:border-color .15s}.track-row:hover{border-color:var(--border)}.track-muted{opacity:.5}.coin-select,.instrument-select{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:.85rem;cursor:pointer;min-width:140px}.coin-select:focus,.instrument-select:focus{outline:none;border-color:var(--accent)}.track-volume{flex:1;display:flex;align-items:center;min-width:80px}.volume-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;background:var(--progress-bg);border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.loading-indicator{font-size:.75rem;color:var(--accent);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.effects-toggle{display:flex;gap:3px}.btn-effect{padding:3px 6px;font-size:.7rem;border-radius:4px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s,border-color .15s;font-family:inherit}.btn-effect:hover{border-color:var(--accent);color:var(--text-primary)}.btn-effect-active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}.btn-effect-active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.sample-uploader{display:flex;gap:6px;align-items:center}.base-note-select{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:4px 6px;font-size:.75rem;cursor:pointer}.base-note-select:focus{outline:none;border-color:var(--accent)}.btn-upload{cursor:pointer;color:var(--accent);border-color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:8px;padding:6px 12px;font-size:.8rem;transition:background .15s;font-family:inherit}.btn-upload:hover{background:#f7931a1a}.share-modal{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:12px;min-width:220px;box-shadow:0 8px 32px #00000080;z-index:100}.share-modal h3{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;padding:0 10px}.share-option{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:6px;color:var(--text-primary);font-size:.9rem;cursor:pointer;text-align:left;transition:background .15s;font-family:inherit}.share-option:hover{background:var(--bg-hover)}.share-option-icon{width:24px;text-align:center;font-weight:700;font-size:.85rem;color:var(--accent)}.share-copied{color:#2ecc71}.chart-container{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:12px;overflow:hidden}.price-chart{width:100%;height:200px;display:block;border-radius:8px}@media(max-width:640px){.app{padding:16px 8px}.header h1{font-size:1.5rem}.track-row{flex-wrap:wrap;gap:6px}.coin-select,.instrument-select{min-width:120px;flex:1}.track-volume{min-width:60px}.mixer-actions{flex-wrap:wrap}.effects-toggle{gap:2px}}