.ai-panel{max-width:720px;margin:0 auto;padding:24px 18px 40px;display:flex;flex-direction:column;gap:14px}.ai-hero h2{font-size:20px;margin-bottom:6px}.ai-hero p{margin:0;font-size:13px}.ai-prompt{font-size:15px;resize:vertical;min-height:76px}.ai-examples{display:flex;flex-wrap:wrap;gap:6px}.ai-chip{font-size:12px;padding:5px 10px;border-radius:999px;color:var(--text-dim)}.ai-chip:hover{color:var(--text)}.ai-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}.ai-option{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--text-dim)}.ai-option select,.ai-option input{font-size:12px}.ai-option input[type=number]{width:72px}.ai-voices{gap:6px;flex-wrap:wrap}.ai-voice.active{color:var(--text);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}.ai-voice:not(.active){opacity:.55;text-decoration:line-through}.ai-voice:disabled{cursor:default;opacity:1}.ai-actions{display:flex;gap:8px;flex-wrap:wrap}.ai-generate{flex:1;min-width:180px;min-height:44px;font-size:15px}.ai-autoplay{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;text-transform:none;letter-spacing:0;color:var(--text-dim);white-space:nowrap}.ai-autoplay input{width:16px;height:16px;margin:0;accent-color:var(--accent)}.ai-result{display:flex;flex-direction:column;gap:12px}.ai-summary{margin:0;font-size:13px;color:var(--accent);word-break:break-word}.ai-meta{display:flex;flex-direction:column;gap:6px}.ai-matched{margin:0;font-size:12px}.ai-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}.ai-stat{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px}.ai-stat-value{font-size:16px;font-weight:600}.ai-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.ai-composer{width:170px}.layout-mobile .ai-panel{padding:16px 12px 28px}.layout-mobile .ai-stats{grid-template-columns:repeat(2,1fr)}.layout-mobile .ai-actions button,.layout-mobile .ai-option select,.layout-mobile .ai-option input{min-height:var(--touch)}.layout-mobile .ai-voices{width:100%}.layout-mobile .ai-voice{min-height:var(--touch);padding:5px 14px}.layout-mobile .ai-composer{width:100%}.layout-landscape .ai-panel{padding:12px 14px 20px}.layout-landscape .ai-stats{grid-template-columns:repeat(4,1fr)}.pianoroll{display:flex;flex-direction:column;height:100%;min-height:0}.pr-toolbar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.pr-channels{display:flex;gap:3px}.pr-channels button{padding:6px 10px;font-size:12px}.pr-velocity{gap:6px;align-items:center}.pr-velocity label{margin:0;font-size:11px;color:var(--text-dim)}.pr-velocity input[type=range]{width:90px}.pr-velocity span{min-width:18px;text-align:right;font-size:11px}.pr-ruler{position:relative;height:20px;flex-shrink:0;border-bottom:1px solid var(--border);background:var(--panel);cursor:pointer;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.pr-ruler-bar{position:absolute;top:0;bottom:0;padding-left:4px;font-size:10px;line-height:20px;color:var(--dim);border-left:1px solid var(--border);pointer-events:none}.pr-ruler-head{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent, #ff5f7e);pointer-events:none}.pr-canvas-stack{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:crosshair}.pr-canvas-stack canvas{position:absolute;top:0;right:0;bottom:0;left:0}.pr-scrollbar{display:flex;align-items:center;gap:10px;padding:6px 10px;border-top:1px solid var(--border);flex-shrink:0}.pr-scrollbar input[type=range]{flex:1}.pr-vscroll{max-width:140px}.pr-snap{width:84px}.pr-instrument{width:120px}.layout-mobile .pr-toolbar{gap:5px;padding:6px}.layout-mobile .pr-channels button{padding:8px 7px;font-size:11px;flex:1}.layout-mobile .pr-channels{width:100%}.layout-mobile .pr-toolbar button{min-height:38px}.layout-mobile .pr-snap{width:92px}.layout-mobile .pr-instrument{flex:1;min-width:90px;width:auto}.layout-landscape .pr-channels{width:auto}.layout-landscape .pr-zoom{display:none}.layout-landscape .pr-toolbar{flex-wrap:nowrap;overflow-x:auto;min-width:0}.layout-landscape .pianoroll{min-width:0}.layout-landscape .pr-scrollbar{padding:3px 10px}.sfx-editor{display:flex;gap:14px;padding:14px;align-items:flex-start;min-height:100%}.sfx-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.sfx-presets{display:flex;flex-wrap:wrap;gap:6px}.sfx-actions{display:flex;gap:8px;flex-wrap:wrap}.sfx-actions .primary{min-width:100px}.sfx-params{display:flex;flex-direction:column;gap:14px}.sfx-field label{display:flex;align-items:center;justify-content:space-between;gap:8px}.sfx-value{text-transform:none;letter-spacing:0;color:var(--accent);font-size:11px}.sfx-toggle{min-height:20px;padding:1px 7px;font-size:10px;text-transform:lowercase;letter-spacing:0}.sfx-envelope{display:flex;gap:2px;height:90px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:4px;touch-action:none}.sfx-env-col{flex:1;display:flex;align-items:flex-end;cursor:ns-resize;min-width:8px;background:#ffffff05}.sfx-env-bar{width:100%;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px}.sfx-library{width:230px;flex-shrink:0;display:flex;flex-direction:column;gap:6px}.sfx-lib-item{display:flex;gap:3px}.sfx-lib-item button{padding:5px 7px;font-size:12px}.layout-mobile .sfx-editor{flex-direction:column;padding:10px}.layout-mobile .sfx-library{width:100%}.layout-mobile .sfx-presets button,.layout-mobile .sfx-actions button{min-height:var(--touch);flex:1}.layout-mobile .sfx-envelope{height:110px}.layout-landscape .sfx-editor{flex-direction:row;padding:8px}.layout-landscape .sfx-library{width:200px}.layout-landscape .sfx-envelope{height:84px}.tracker{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--font-mono)}.tr-toolbar{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;font-family:var(--font-ui);flex-wrap:wrap}.tr-head{display:flex;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;font-size:11px}.tr-col-head{flex:1;border:none;border-radius:0;border-left:1px solid var(--border);background:transparent;padding:6px 4px;min-height:28px;font-family:var(--font-ui)}.tr-col-head.active{background:var(--bg-raised);box-shadow:inset 0 -2px 0 var(--accent)}.tr-scroll{flex:1;min-height:0;overflow-y:auto;background:var(--bg)}.tr-row{position:absolute;left:0;right:0;display:flex;align-items:center;font-size:12px;line-height:1;cursor:pointer}.tr-row.beat{background:#ffffff06}.tr-row.bar{background:#57f28a0f;box-shadow:inset 0 1px 0 var(--border)}.tr-row.cursor{background:#57f28a24;outline:1px solid var(--accent);outline-offset:-1px}.tr-row.playing{background:#4fd6ff33}.tr-rownum{width:34px;flex-shrink:0;text-align:center;color:var(--text-faint);font-size:11px}button.tr-rownum{padding:0;border:none;border-radius:0;background:none;font-family:inherit;line-height:inherit;min-height:0;cursor:pointer}button.tr-rownum:hover{color:var(--text);background:var(--bg-raised)}.tr-cell{flex:1;display:flex;gap:6px;justify-content:center;border-left:1px solid rgba(44,44,85,.55);padding:3px 2px;white-space:nowrap}.tr-cell.empty{color:var(--text-faint);opacity:.55}.tr-cell.active{background:#ffffff0a}.tr-inst,.tr-vol{color:var(--text-dim)}.tr-keys,.tr-keyboard{display:none}.tr-step{width:54px}.layout-mobile .tr-keyboard{display:block;flex-shrink:0}.layout-mobile .tr-keys-black button.black{background:var(--bg);color:var(--text-dim);min-height:calc(var(--touch) * .8)}.layout-mobile .tr-key-gap{flex:1}.layout-mobile .tr-cell{font-size:11px;gap:3px}.layout-portrait .tr-inst,.layout-portrait .tr-vol{display:none}.layout-mobile .tr-keys{display:flex;border-top:1px solid var(--border);background:var(--bg-panel);flex-shrink:0}.layout-mobile .tr-keys button{flex:1;border-radius:0;border:none;border-left:1px solid var(--border);min-height:var(--touch);background:var(--bg-raised)}.layout-mobile .tr-toolbar button{min-height:38px}.layout-landscape .tr-keys button{min-height:36px}.layout-landscape .tr-keys-black button.black{min-height:30px}.layout-landscape .tr-toolbar{flex-wrap:nowrap;overflow-x:auto;min-width:0;padding:5px 8px}.layout-landscape .tracker{min-width:0}.settings-body{display:flex;flex-direction:column;gap:20px}.settings-body p{margin:0}.settings-field{display:flex;flex-direction:column;gap:4px}.settings-field label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-dim)}.settings-check{display:flex;align-items:center;gap:8px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--text);min-height:var(--touch)}.settings-check input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent)}.settings-hint{font-size:11px;line-height:1.5}.settings-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);margin-bottom:16px;flex:none}.settings-tabs::-webkit-scrollbar{display:none}.settings-tab{flex:none;min-height:34px;padding:0 14px;border:none;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.layout-mobile .settings-tab{min-height:var(--touch);flex:1;min-width:0;padding:0 4px;font-size:11px;letter-spacing:.02em}.settings-tab:hover{color:var(--text)}.settings-tab.is-active{color:var(--text);border-bottom-color:var(--accent)}.settings-swatches{display:flex;gap:6px}.settings-swatch{width:28px;height:16px;border-radius:3px;border:1px solid var(--border-bright)}.settings-keys summary{min-height:var(--touch);display:flex;align-items:center;font-size:12px;color:var(--text-dim);cursor:pointer}.settings-keys-list{list-style:none;margin:8px 0;padding:0;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.settings-key-row{display:grid;grid-template-columns:1fr 56px auto auto;align-items:center;gap:8px}.settings-key-note{font-size:12px;color:var(--text-dim)}.settings-key-cap{text-align:center;padding:2px 0;font-size:12px;border:1px solid var(--border);border-radius:4px;background:var(--bg-input)}.settings-key-cap.is-moved{border-color:var(--accent);color:var(--accent)}.settings-key-clear{padding:0 8px}.settings-keys-message{color:var(--accent)}.fm-toolbar{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.fm-search{flex:1;min-width:140px}.fm-empty{font-size:12px;line-height:1.6;margin:0;padding:12px 2px}.fm-badge{display:inline-block;margin-right:6px;padding:1px 5px;border-radius:999px;background:var(--accent);color:#06210f;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:1px}.fm-foot{flex-wrap:wrap}.fm-foot button{font-size:12px}.fm-count{flex:1;min-width:60px;font-size:11px}.export-body{display:flex;flex-direction:column;gap:14px}.export-song{margin:0;font-size:12px}.export-formats{display:flex;flex-direction:column;gap:6px;border:none;padding:0;margin:0}.export-choice,.export-choice-label,.export-choice-hint{text-transform:none;letter-spacing:0}.export-choice{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"radio label" "radio hint";align-items:center;gap:0 10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);cursor:pointer;min-height:var(--touch)}.export-choice.active{border-color:var(--accent)}.export-choice input{grid-area:radio;width:16px;height:16px;margin:0;accent-color:var(--accent)}.export-choice-label{grid-area:label;font-size:13px;color:var(--text)}.export-choice-hint{grid-area:hint;font-size:11px;line-height:1.4}.export-field{display:flex;flex-direction:column;gap:4px}.export-field label,.export-channels-field>span{font-size:12px;color:var(--text-dim)}.export-channels{display:flex;flex-wrap:wrap;gap:6px}.export-channel{font-size:12px;padding:5px 12px;border-radius:999px;color:var(--text-dim);min-height:var(--touch)}.export-channel.active{color:var(--text);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}.export-channel:not(.active){opacity:.55;text-decoration:line-through}.export-channel:disabled:not(.active){opacity:.3}.export-channel.active:disabled{opacity:1;cursor:default}.export-foot{justify-content:flex-end;flex-wrap:wrap}.export-progress{display:flex;flex-direction:column;gap:6px;width:100%;font-size:12px}.export-progress progress{width:100%;height:8px;accent-color:var(--accent)}.tutorial-body{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0 4px}.tutorial-card{text-align:center;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px}.tutorial-icon{font-size:44px;line-height:1}.tutorial-title{font-size:15px;text-transform:none;letter-spacing:0;color:var(--text);margin:0}.tutorial-text{margin:0;font-size:13px;line-height:1.6;color:var(--text-dim);max-width:34ch}.tutorial-dots{display:flex;gap:6px;list-style:none;margin:0;padding:0}.tutorial-dot{width:7px;height:7px;border-radius:50%;background:var(--border-bright)}.tutorial-dot.active{background:var(--accent)}.tutorial-foot{gap:6px}.tutorial-skip{color:var(--text-faint)}.ai-prompt.spotlit{animation:spotlight-pulse 1.2s ease-in-out 4}@keyframes spotlight-pulse{50%{border-color:var(--accent);box-shadow:0 0 0 3px #57f28a59,0 0 22px #57f28a66}}@media (prefers-reduced-motion: reduce){.ai-prompt.spotlit{animation:none;border-color:var(--accent)}}:root{--bg: #0b0b18;--bg-panel: #12122b;--bg-raised: #1b1b3a;--bg-input: #0f0f22;--border: #2c2c55;--border-bright: #414179;--text: #e8e8ff;--text-dim: #9a9ac4;--text-faint: #6a6a96;--pulse1: #ff5f7e;--pulse2: #ffb454;--triangle: #4fd6ff;--noise: #a78bfa;--accent: #57f28a;--danger: #ff6b6b;--font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;--radius: 6px;--touch: 44px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}@supports (height: 100dvh){#root{height:100dvh}}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:14px;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,select,input{font-family:inherit;font-size:inherit;color:var(--text)}button{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:7px 12px;cursor:pointer;min-height:32px;transition:background .12s,border-color .12s}button:hover:not(:disabled){background:var(--border);border-color:var(--border-bright)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#06210f;font-weight:600}button.primary:hover:not(:disabled){background:#6dffa0;border-color:#6dffa0}button.active{background:var(--border-bright);border-color:var(--accent)}input[type=text],input[type=number],select,textarea{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;width:100%}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[type=range]{accent-color:var(--accent);width:100%}label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:4px}h1,h2,h3{margin:0;font-weight:600}h2{font-size:15px}h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim)}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.row{display:flex;align-items:center;gap:8px}.col{display:flex;flex-direction:column;gap:10px}.spacer{flex:1}.dim{color:var(--text-dim)}.mono{font-family:var(--font-mono)}.chan-pulse1{color:var(--pulse1)}.chan-pulse2{color:var(--pulse2)}.chan-triangle{color:var(--triangle)}.chan-noise{color:var(--noise)}canvas{touch-action:none;display:block}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.app{display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app-header{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0}.app-logo{font-weight:700;letter-spacing:.04em;font-size:14px;white-space:nowrap}.app-logo span{color:var(--accent)}.app-title-wrap{flex:1;min-width:0;display:flex;align-items:baseline;gap:4px}.app-song-title{min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-dirty{flex:none;color:var(--accent);font-size:12px}.app-body{flex:1;display:flex;min-height:0}.sidebar{width:250px;flex-shrink:0;border-right:1px solid var(--border);background:var(--bg-panel);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:16px}.main-area{flex:1;min-width:0;display:flex;flex-direction:column}.view-tabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}.view-tabs button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;margin-bottom:-1px;white-space:nowrap}.view-tabs button.active{background:var(--bg);border-color:var(--border);border-bottom-color:var(--bg);color:var(--accent)}.view-content{flex:1;min-height:0;overflow:auto;position:relative}.transport{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-panel);border-top:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;padding-bottom:calc(8px + env(safe-area-inset-bottom))}.transport .play-btn{min-width:54px;font-size:16px}.transport .record-btn{font-size:15px;line-height:1}.transport .record-btn.armed{color:#ff5f5f;border-color:#ff5f5f}.transport .record-btn.recording{color:#ff5f5f;border-color:#ff5f5f;animation:record-pulse 1s ease-in-out infinite}@keyframes record-pulse{50%{opacity:.4}}.channel-strip{display:flex;gap:4px}.channel-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);font-size:10px;cursor:pointer;min-width:52px}.channel-chip .chip-buttons{display:flex;gap:2px}.channel-chip .chip-buttons button{min-height:18px;padding:0 5px;font-size:9px;line-height:1}.chip-buttons button.on{background:var(--accent);color:#06210f;border-color:var(--accent)}.chip-buttons button.muted{background:var(--danger);color:#2a0808;border-color:var(--danger)}.tab-bar{display:none}.transport-main{display:contents}.volume-ctl{width:120px;gap:6px}.transport .bpm-field{width:72px}.layout-mobile .sidebar{display:none}.layout-mobile .sidebar.mobile-open{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;width:100%;padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}.layout-mobile .view-tabs{display:none}.layout-mobile .tab-bar{display:flex;background:var(--bg-panel);border-top:1px solid var(--border);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.layout-mobile .tab-bar button{flex:1;border:none;border-radius:0;background:transparent;min-height:var(--touch);font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-dim)}.layout-mobile .tab-bar button.active{color:var(--accent);background:var(--bg-raised)}.layout-mobile .tab-bar .tab-icon{font-size:17px}.layout-mobile .transport{gap:6px;padding:6px 8px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}.layout-mobile .saved-song-actions button{min-height:40px;font-size:12px}.layout-mobile .saved-song button{min-height:44px}.layout-mobile .transport .bpm-field{width:64px}.layout-mobile .transport button{min-height:var(--touch)}.layout-mobile .channel-chip .chip-buttons button{min-height:28px;padding:0 6px;font-size:10px}.layout-mobile .transport .spacer{display:none}.layout-mobile .volume-ctl input[type=range]{min-width:0}.layout-mobile .channel-chip{min-width:62px;padding:3px 4px}.layout-mobile .transport-main label[for=bpm]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.layout-mobile .transport-fold{margin-left:auto;min-width:34px;padding:0 8px;font-size:14px;line-height:1}.layout-landscape .transport-fold{order:3}.layout-mobile .transport.collapsed .transport-secondary,.layout-mobile .transport.collapsed .channel-strip,.layout-mobile .transport.collapsed .volume-ctl{display:none}.layout-portrait .transport{flex-wrap:wrap;padding-bottom:6px}.layout-portrait .transport-main{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;width:100%;min-width:0;order:0}.layout-portrait .transport-main>*{min-width:0}.layout-portrait .transport-main button{padding:0 8px;font-size:12px;white-space:nowrap;overflow:hidden}.layout-portrait .transport .play-btn{min-width:46px;font-size:15px}.layout-portrait .transport .record-btn{font-size:14px}.layout-portrait .transport-fold{min-width:30px;padding:0 6px;font-size:14px}.layout-portrait .transport .bpm-field{width:56px;padding:0 4px;font-size:12px}.layout-portrait .channel-strip{order:1;flex:1 1 auto;gap:6px}.layout-portrait .channel-chip{flex:1 1 0}.layout-portrait .volume-ctl{order:2;width:auto;flex:0 1 92px;min-width:74px}.app.layout-landscape{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"rail header" "rail body" "rail transport"}.layout-landscape .app-header{grid-area:header;padding:3px 10px;gap:10px}.layout-landscape .app-header .menu-btn{min-height:30px;padding:4px 10px}.layout-landscape .app-logo{font-size:12px}.layout-landscape .app-body{grid-area:body;min-height:0;min-width:0}.layout-landscape .transport{grid-area:transport;flex-wrap:wrap}.layout-landscape .tab-bar{grid-area:rail;flex-direction:column;width:60px;border-top:none;border-right:1px solid var(--border);padding-bottom:0;overflow-y:auto}.layout-landscape .tab-bar button{flex:0 0 auto;min-height:52px;font-size:9px;padding:4px 2px;min-width:0;overflow:hidden}.layout-landscape .tab-bar .tab-icon{font-size:18px}.layout-landscape .transport{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}.layout-landscape .transport,.layout-landscape .channel-strip{gap:4px}.layout-landscape .channel-chip{padding:2px 3px;min-width:56px}.layout-landscape .transport .play-btn{min-width:48px}.layout-landscape .volume-ctl{width:auto;flex:1 1 46px;min-width:46px;max-width:120px;gap:3px}.layout-landscape .volume-ctl>span{display:none}.saved-song{display:flex;gap:3px}.saved-song-open{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:7px 10px}.saved-song-title{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-song-meta{font-size:10px;color:var(--text-dim)}.saved-song-wrap{display:flex;flex-direction:column;gap:3px}.saved-song-actions{display:flex;gap:3px;padding:3px 0 6px;flex-wrap:wrap}.saved-song-actions button{flex:1;min-width:68px;font-size:11px;padding:6px 4px}button.danger-text{color:var(--danger)}button.danger{background:var(--danger);border-color:var(--danger);color:#2a0808;font-weight:600}button.danger:hover:not(:disabled){background:#ff8585;border-color:#ff8585}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;padding:20px;z-index:200}.dialog{background:var(--bg-panel);border:1px solid var(--border-bright);border-radius:10px;padding:20px;max-width:340px;width:100%;box-shadow:0 12px 40px #0009}.dialog h2{font-size:16px;margin-bottom:8px}.dialog p{margin:0 0 18px;font-size:13px;color:var(--text-dim);line-height:1.5}.dialog-actions{display:flex;gap:8px}.dialog-actions button{flex:1;min-height:40px}.dialog.dialog-md{max-width:460px;max-height:min(85vh,640px);display:flex;flex-direction:column;overflow:hidden}.dialog.dialog-full{max-width:720px;height:min(85vh,700px);display:flex;flex-direction:column;overflow:hidden}.dialog-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.dialog-head h2{flex:1;margin-bottom:0}.dialog-body{flex:1;min-height:0;overflow-y:auto;padding:2px;margin:-2px}.dialog-foot{display:flex;align-items:center;gap:8px;padding-top:12px;margin-top:12px;border-top:1px solid var(--border)}.layout-mobile .dialog-backdrop.backdrop-full{padding:0}.layout-mobile .dialog.dialog-full{max-width:none;width:100%;height:100%;border:none;border-radius:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--bg-raised);border:1px solid var(--border-bright);border-radius:var(--radius);padding:10px 16px;z-index:100;max-width:90vw;box-shadow:0 6px 24px #00000080}.toast.error{border-color:var(--danger);color:#ffd9d9}.layout-landscape .toast{bottom:calc(64px + env(safe-area-inset-bottom))}.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}.order-row{display:flex;align-items:center;gap:2px}.order-row button{padding:4px 6px;font-size:11px;min-height:28px}.order-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app.scale-small{zoom:.9}.app.scale-large{zoom:1.15}