/* Music AI 2026 command deck: isolated responsive layer. */
:root{--deck-bg:#0b1020;--deck-card:#111a31;--deck-line:#263553;--deck-text:#eef2ff;--deck-muted:#9ca9c7;--deck-v4:#38e8b0;--deck-v3:#9d7cff;--deck-warn:#ffbd59}
html,body{max-width:100%;overflow-x:hidden}.audio-command-deck{max-width:1400px;margin:0 auto 28px;padding:0 30px;color:var(--deck-text)}
.deck-shell{position:relative;overflow:hidden;border:1px solid var(--deck-line);border-radius:22px;background:radial-gradient(circle at 85% -20%,rgba(157,124,255,.25),transparent 38%),linear-gradient(145deg,#101a32,#090e1b);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.deck-head{display:flex;justify-content:space-between;gap:20px;padding:24px 26px 18px;border-bottom:1px solid var(--deck-line)}.deck-kicker{font-size:11px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--deck-v4)}.deck-head h2{margin:5px 0;font-size:clamp(23px,3vw,36px)}.deck-head p{margin:0;color:var(--deck-muted)}.deck-health{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.deck-status{padding:7px 10px;border:1px solid var(--deck-line);border-radius:999px;background:#0a1020;color:var(--deck-muted);font-size:11px}.deck-status.ok{color:var(--deck-v4);border-color:rgba(56,232,176,.4)}
.engine-matrix{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 26px}.engine-card{position:relative;padding:17px;border:1px solid var(--deck-line);border-radius:15px;background:rgba(17,26,49,.86);cursor:pointer;text-align:left;color:inherit}.engine-card.active{border-color:var(--deck-v4);box-shadow:0 0 0 2px rgba(56,232,176,.1)}.engine-card[data-engine=v3].active{border-color:var(--deck-v3);box-shadow:0 0 0 2px rgba(157,124,255,.12)}.engine-card strong{display:block;font-size:16px}.engine-card span{display:block;margin-top:3px;color:var(--deck-muted);font-size:12px}.engine-badge{position:absolute;right:12px;top:12px;padding:4px 7px;border-radius:7px;background:rgba(56,232,176,.13);color:var(--deck-v4);font-size:10px;font-weight:800}.engine-card[data-engine=v3] .engine-badge{background:rgba(157,124,255,.15);color:#c8b9ff}
.deck-cost{display:flex;justify-content:space-between;gap:16px;margin:0 26px 18px;padding:11px 13px;border:1px solid var(--deck-line);border-radius:11px;background:#080d1a;color:var(--deck-muted);font-size:12px}.deck-cost strong{color:var(--deck-text)}
.deck-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 26px}.deck-tab{min-width:0;padding:11px 8px;border:1px solid var(--deck-line);border-radius:10px 10px 0 0;background:#0b1223;color:var(--deck-muted);font-weight:700;cursor:pointer}.deck-tab.active{background:var(--deck-card);color:var(--deck-text);border-bottom-color:var(--deck-card)}
.deck-panel{display:none;margin:0 26px 26px;padding:18px;border:1px solid var(--deck-line);border-radius:0 12px 12px;background:var(--deck-card)}.deck-panel.active{display:block}.deck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.deck-field{min-width:0;padding:12px;border:1px solid var(--deck-line);border-radius:11px;background:#0b1223}.deck-field label{display:block;margin-bottom:7px;color:var(--deck-muted);font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.deck-input,.deck-select,.deck-textarea{width:100%;min-width:0;border:1px solid var(--deck-line);border-radius:8px;background:#080d1a;color:var(--deck-text);padding:10px;font:inherit}.deck-textarea{min-height:86px;resize:vertical}.deck-input:focus,.deck-select:focus,.deck-textarea:focus{outline:none;border-color:var(--deck-v4)}.deck-upload{display:grid;place-items:center;min-height:86px;border:1px dashed #3d5078;border-radius:9px;color:var(--deck-muted);cursor:pointer;text-align:center;padding:12px}.deck-upload input{display:none}.deck-action{display:block;margin:14px 0 0 auto;padding:11px 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#7c5cff,#27d5af);color:#fff;font-weight:800;cursor:pointer}.deck-action:disabled{opacity:.45;cursor:not-allowed}.deck-result{margin-top:10px;color:var(--deck-muted);font-size:12px}.deck-result.error{color:#ff8091}
.visualizer-phone{width:min(170px,100%);aspect-ratio:9/16;margin:auto;overflow:hidden;display:grid;place-items:center;border:1px solid #40527b;border-radius:18px;background:linear-gradient(180deg,#251752,#081c28)}.visualizer-bars{height:80px;display:flex;align-items:center;gap:4px}.visualizer-bars i{display:block;width:5px;height:var(--h);border-radius:3px;background:linear-gradient(#a98cff,#36e8b2);animation:deckBeat .9s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes deckBeat{to{transform:scaleY(.35)}}
.faction-canvas{min-height:150px;border:1px solid #40527b;border-radius:12px;background:radial-gradient(circle at center,rgba(157,124,255,.32),transparent 50%),#080d1a;display:grid;place-items:center;text-align:center;padding:18px}.contract-chip{display:inline-block;margin:3px;padding:4px 7px;border-radius:999px;background:rgba(56,232,176,.1);color:var(--deck-v4);font-size:10px}.audio-command-deck audio{display:block;width:100%;max-width:100%;margin-top:10px}
@media(max-width:900px){.deck-grid{grid-template-columns:1fr 1fr}.deck-tabs{grid-template-columns:1fr 1fr}.deck-tab{border-radius:9px}.deck-panel{border-radius:12px}}
@media(max-width:600px){.audio-command-deck{padding:0 14px}.deck-head{padding:20px 16px;flex-direction:column}.engine-matrix{grid-template-columns:1fr;padding:14px 16px}.deck-cost{margin:0 16px 14px;flex-direction:column;gap:3px}.deck-tabs{padding:0 16px;grid-template-columns:1fr}.deck-panel{margin:8px 16px 18px;padding:14px}.deck-grid{grid-template-columns:1fr}.engine-badge{position:static;display:inline-block!important;margin-top:8px}.deck-action{width:100%;min-height:46px}}

/* 2026 high-fidelity interaction polish — structure remains unchanged. */
.deck-shell{isolation:isolate;transition:border-color .4s ease,box-shadow .55s ease,background .55s ease}.deck-shell::before{content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;border-radius:inherit;opacity:.16;transition:opacity .45s ease;background:radial-gradient(circle at 20% 0,var(--engine-glow,#38e8b0),transparent 38%)}.deck-shell.engine-v3{--engine-glow:#9d7cff}.deck-shell.engine-v4{--engine-glow:#38e8b0}.deck-shell.engine-switching{border-color:color-mix(in srgb,var(--engine-glow) 68%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--engine-glow) 35%,transparent),0 22px 72px color-mix(in srgb,var(--engine-glow) 18%,#000)}.deck-shell.engine-switching::before{opacity:.34}
.engine-card,.deck-tab,.feature-card,.style-card,.character-card,.deck-action{transition:transform .22s ease,border-color .22s ease,box-shadow .3s ease,background .3s ease,color .22s ease}.engine-card:hover,.style-card:hover,.character-card:hover{transform:translateY(-2px)}.engine-card:focus-visible,.deck-tab:focus-visible,.style-card:focus-visible,.character-card:focus-visible,.deck-action:focus-visible{outline:2px solid #76f5d1;outline-offset:3px}.feature-card{background:linear-gradient(155deg,rgba(15,25,48,.96),rgba(8,14,28,.92));box-shadow:inset 0 1px rgba(255,255,255,.025)}.feature-card:hover{border-color:#3b4e75;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.style-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:3px 0 10px}.style-card{min-width:0;padding:10px;border:1px solid #2a3b5e;border-radius:9px;background:linear-gradient(150deg,#101a31,#090f1e);color:var(--deck-text);text-align:left;cursor:pointer}.style-card strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12px}.style-card span{display:block;margin-top:3px;color:var(--deck-muted);font-size:10px}.style-card.active{border-color:var(--deck-v4);background:linear-gradient(145deg,rgba(56,232,176,.15),rgba(12,23,38,.96));box-shadow:0 0 0 1px rgba(56,232,176,.12),0 8px 24px rgba(10,210,165,.08)}.accessible-select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.inline-style-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}.high-contrast-prompt{color:#fff!important;font-weight:550;line-height:1.55;letter-spacing:.01em;background:linear-gradient(145deg,#070c17,#0b1325)!important}.high-contrast-prompt::placeholder{color:#8794b4;opacity:1}
.workflow-progress{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;margin:0;transition:grid-template-rows .3s ease,opacity .3s ease,margin .3s ease,padding .3s ease}.workflow-progress.visible{grid-template-rows:1fr;opacity:1;margin:14px 0 0;padding:11px 13px;border:1px solid rgba(56,232,176,.2);border-radius:10px;background:rgba(5,15,26,.74)}.workflow-progress-copy{display:flex;justify-content:space-between;gap:12px;color:var(--deck-muted);font-size:11px}.workflow-progress-copy strong{color:var(--deck-v4)}.workflow-track{height:6px;margin-top:8px;overflow:hidden;border-radius:99px;background:#18243c}.workflow-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c5cff,#38e8b0);box-shadow:0 0 14px rgba(56,232,176,.5);transition:width .25s cubic-bezier(.2,.7,.2,1)}
.action-row{display:flex;justify-content:flex-end;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}.action-row .deck-action{margin:0}.burn-badge{opacity:0;transform:translateY(4px);padding:6px 9px;border:1px solid rgba(157,124,255,.35);border-radius:999px;background:rgba(157,124,255,.1);color:#d8ceff;font-size:10px;font-weight:800;white-space:nowrap;transition:opacity .35s ease,transform .35s ease}.burn-badge.visible{opacity:1;transform:none}
.quantizer{position:relative;overflow:hidden;min-height:135px;padding:12px;border:1px solid #273959;border-radius:10px;background:linear-gradient(180deg,#070d19,#0b1425)}.voice-wave{position:absolute;inset:12px 12px 36px;display:flex;align-items:center;justify-content:space-around;gap:3px}.voice-wave i{width:4px;height:var(--q);border-radius:3px;background:linear-gradient(#a78bfa,#38e8b0);opacity:.72;transition:transform .75s cubic-bezier(.2,.8,.2,1),height .75s ease}.quantizer.snapped .voice-wave i{transform:translateY(var(--snap));height:7px;opacity:1;box-shadow:0 0 8px rgba(56,232,176,.6)}.midi-rail{position:absolute;inset:12px 12px 36px;display:grid;grid-template-rows:repeat(8,1fr);pointer-events:none}.midi-rail b{border-top:1px solid rgba(121,146,190,.14)}.quantizer>span{position:absolute;left:12px;right:12px;bottom:10px;color:var(--deck-muted);font-size:10px}.quantizer.snapped>span{color:var(--deck-v4)}
.character-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px}.character-card{position:relative;overflow:hidden;min-width:0;padding:0;border:1px solid #293a59;border-radius:10px;background:#080e1c;color:#fff;cursor:pointer}.character-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.86);transition:filter .25s ease,transform .3s ease}.character-card span{display:block;overflow:hidden;padding:6px;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.character-card.active{border-color:var(--faction);box-shadow:0 0 0 1px color-mix(in srgb,var(--faction) 50%,transparent)}.character-card.active img{filter:saturate(1.16);transform:scale(1.035)}.character-card.theme-ready,.faction-canvas.theme-ready{animation:factionPulse 1s ease-in-out 3;border-color:var(--faction);box-shadow:0 0 0 1px color-mix(in srgb,var(--faction) 40%,transparent),0 0 25px color-mix(in srgb,var(--faction) 42%,transparent)}.faction-canvas{--faction:#9d7cff;background:radial-gradient(circle at center,color-mix(in srgb,var(--faction) 28%,transparent),transparent 56%),#080d1a;transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}@keyframes factionPulse{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--faction) 38%,transparent),0 0 42px color-mix(in srgb,var(--faction) 56%,transparent)}}
.audio-command-deck audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.custom-audio{display:grid;grid-template-columns:38px minmax(0,1fr) 36px;align-items:center;gap:8px;margin-top:12px}.custom-audio button{width:38px;height:38px;border:1px solid #40547b;border-radius:50%;background:linear-gradient(145deg,#192846,#0c1426);color:#fff;cursor:pointer}.custom-audio input{width:100%;min-width:0;accent-color:#38e8b0;touch-action:pan-y}.custom-audio span{color:var(--deck-muted);font-variant-numeric:tabular-nums;font-size:10px}
.staging-fade-out{animation:stagingFadeOut .24s ease both}@keyframes stagingFadeOut{to{opacity:0;transform:translateY(4px);filter:blur(2px)}}
#quickModeSection{transition:border-color .35s ease,box-shadow .5s ease,background .5s ease}#quickModeSection:has(#engineBtnV2.active){box-shadow:0 0 0 1px rgba(16,185,129,.2),0 16px 46px rgba(16,185,129,.08)}#quickModeSection:has(#engineBtnV3.active){box-shadow:0 0 0 1px rgba(139,92,246,.25),0 16px 46px rgba(139,92,246,.1)}#quickModePrompt{color:#fff!important;font-weight:550!important;line-height:1.55!important;letter-spacing:.01em!important}#quickModePrompt::placeholder{color:#8996b4!important}.engine-btn{transition:transform .2s ease,box-shadow .4s ease,border-color .3s ease!important}.engine-btn.active{transform:translateY(-1px);box-shadow:0 0 24px currentColor}
@media(max-width:900px){.inline-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.style-card-grid,.inline-style-grid{grid-template-columns:1fr 1fr}.character-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.character-card span{font-size:8px}.action-row{align-items:stretch}.action-row .deck-action{flex:1 1 100%}.burn-badge{margin-left:auto}.custom-audio{grid-template-columns:42px minmax(0,1fr) 34px}.custom-audio button{width:42px;height:42px}.deck-field{overflow:hidden}}
@media(prefers-reduced-motion:reduce){.deck-shell,.engine-card,.style-card,.character-card,.voice-wave i,.workflow-track i{transition:none!important}.theme-ready,.visualizer-bars i{animation:none!important}}
#quickModeSection.engine-glow-v4{--create-engine-glow:#10b981}#quickModeSection.engine-glow-v3{--create-engine-glow:#8b5cf6}#quickModeSection.engine-glow-transition{box-shadow:0 0 0 2px color-mix(in srgb,var(--create-engine-glow) 32%,transparent),0 18px 54px color-mix(in srgb,var(--create-engine-glow) 18%,transparent)!important}