body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
#beatLab[hidden],#acapellaFixer[hidden]{display:none!important}
.bl-edit-modes{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin:16px 0}
#beatLab[data-edit-mode=simple] .bl-manual-only,#beatLab[data-edit-mode=manual] .bl-simple-only{display:none!important}
#beatLab[data-edit-mode=simple] #beatChordButtons button{cursor:default;opacity:.8}
body[data-vwa-page=beat-lab] .shell>section:not(#beatLab),body[data-vwa-page=beat-lab] .shell>header.topbar~.hero,body[data-vwa-page=songs] .shell>section:not(#librarySection),body[data-vwa-page=acapella-fixer] .shell>section:not(#acapellaFixer),body[data-vwa-page=acapella-fixer] .shell>header.topbar~.hero,body[data-vwa-page=studio] #librarySection,body[data-vwa-page=beat-lab] #librarySection,body[data-vwa-page=acapella-fixer] #librarySection,body[data-vwa-page=songs] #beatLab,body[data-vwa-page=songs] #acapellaFixer{display:none!important}
#beatLab{margin-top:20px;padding:20px;border:1px solid #302c36;border-radius:22px;background:linear-gradient(150deg,rgba(30,27,35,.98),rgba(21,20,23,.99) 65%);animation:settle .4s ease both}
#beatLab h2{margin:0 0 4px;font:800 clamp(20px,5vw,26px)/1.2 var(--font-display);letter-spacing:-.03em}
#beatLab .bl-sub{color:var(--soft);font-size:12px;margin:0 0 16px}
#beatLab h3{margin:20px 0 10px;color:#d3ced8;font:700 11px var(--font-display);letter-spacing:.12em;text-transform:uppercase}
#beatLab button,#beatLab select,#beatLab input[type=text]{min-height:60px;border:1px solid #393440;border-radius:12px;background:#211e25;color:#eae6ef;font-size:13px;font-weight:600;padding:0 14px;cursor:pointer}
#beatLab input[type=text]{cursor:text;width:100%}
.bl-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bl-presets button:last-child{grid-column:1/-1}
#beatLab [aria-pressed=true],#beatLab .active{border-color:#9c80d4;background:rgba(139,92,246,.25);color:#fff}
.bl-row{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;margin-bottom:8px}
.bl-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.bl-steps button{padding:0;min-width:0}
.bl-chords,.bl-toggles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bl-toggles{grid-template-columns:1fr 1fr}
.bl-field{display:grid;gap:8px;margin-bottom:12px}
.bl-field label{color:#e9e4ed;font-size:12px;font-weight:600;display:flex;justify-content:space-between}
.bl-key{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#beatLab input[type=range]{min-height:60px}
#beatPlay,#beatSave{width:100%;margin-top:12px}
#beatPlay{min-height:72px;border:0;background:var(--mix-gradient);color:#fff;font-size:16px;font-weight:800}
#beatSave{background:#362447;border-color:#57416c}
#beatLabStatus{min-height:18px;margin:12px 0 0;color:#d5c7ec;font-size:12px}
.bl-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.bl-track{padding:16px 0;border-bottom:1px solid #332c3c}
.bl-track h3{margin-top:0}
.bl-drum-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.bl-layer-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}
.bl-layer-row h3{margin:0}.bl-layer-row .bl-sub{margin:0;grid-column:1}.bl-layer-row button{grid-column:2;grid-row:1/3;min-width:100px}
.bl-steps{grid-template-columns:repeat(4,1fr)}
.bl-saved-beat{padding:16px;border:1px solid #38303f;border-radius:14px;background:#17131c;display:flex;flex-wrap:wrap;gap:8px}
.bl-saved-beat>strong,.bl-saved-beat>p{width:100%;overflow-wrap:anywhere}
.bl-saved-beat>p{margin:0 0 8px;color:#aca2b5;font-size:12px}
#beatLab .bl-saved-beat button{flex:1 1 40%}
.bl-list:empty::before{content:attr(data-empty);display:block;padding:20px 14px;border:1px dashed #393340;border-radius:12px;color:#928a97;text-align:center;font-size:12px;line-height:1.5}
#beatShareNotice{margin-top:16px;padding:12px 14px;border:1px solid rgba(167,139,250,.22);border-radius:12px;background:rgba(139,92,246,.08);color:#c4b5fd;font-size:12px;line-height:1.55}
#vwaNav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(15,15,15,.94);border-top:1px solid var(--line);backdrop-filter:blur(12px)}
#vwaNav button{min-height:60px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--soft);font:800 11px var(--font-display);letter-spacing:.12em;cursor:pointer}
#vwaNav button[aria-current=page],#vwaNav button.active{background:rgba(139,92,246,.2);border-color:rgba(167,139,250,.45);color:#e6dcff}
@media(min-width:760px){#beatLab{padding:28px}.bl-row{grid-template-columns:120px 1fr}#vwaNav{left:50%;right:auto;width:620px;transform:translateX(-50%);border-radius:18px 18px 0 0;border:1px solid var(--line)}}

#acapellaFixer{margin-top:20px;padding:clamp(16px,4vw,28px);border:1px solid #302c36;border-radius:22px;background:linear-gradient(150deg,rgba(30,27,35,.98),rgba(21,20,23,.99) 65%);animation:settle .4s ease both}
.af-heading{margin:0 0 18px}
.af-eyebrow{color:#c4b5fd;font:700 10px var(--font-display);letter-spacing:.16em}
#acapellaFixer h2{margin:8px 0 5px;font:800 clamp(25px,6vw,34px)/1.15 var(--font-display);letter-spacing:-.045em}
.af-heading>p,#acapellaFixer .af-step p{margin:0;color:var(--soft);font-size:12px;line-height:1.55}
.af-panel{margin-top:14px;padding:16px;border:1px solid #302c36;border-radius:17px;background:rgba(13,12,15,.5)}
.af-step{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}
.af-step>span{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;background:rgba(139,92,246,.16);color:#c4b5fd;font:700 11px var(--font-display)}
#acapellaFixer h3{margin:0 0 3px;font:700 14px var(--font-display);letter-spacing:-.015em}
.af-action-row{display:flex;flex-wrap:wrap;gap:9px}
.af-primary,.af-secondary,.af-match,.af-play-mix{min-height:60px;border:1px solid #393440;border-radius:13px;padding:0 15px;background:#211e25;color:#f4f1f7;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation}
.af-primary{border:0;background:linear-gradient(110deg,#8b5cf6,#a855f7);box-shadow:0 9px 25px rgba(139,92,246,.16)}
.af-match{color:#d8cbff;border-color:rgba(167,139,250,.35);background:rgba(139,92,246,.12)}
.af-primary:disabled,.af-secondary:disabled,.af-match:disabled,.af-play-mix:disabled{opacity:.48;cursor:not-allowed}
.af-action-row>*{flex:1 1 160px}
.af-status{min-height:20px;margin:11px 0 0;color:#aaa3b0;font-size:11px;line-height:1.6}
.af-audio-block{margin-top:16px;padding:12px;border:1px solid #29252e;border-radius:13px;background:#111012}
.af-wave-title{margin-bottom:9px;color:#d7d1dd;font-size:11px;font-weight:700}
#acapellaFixer canvas{width:100%;height:auto;max-height:125px;border-radius:9px;background:linear-gradient(180deg,#17151a,#100f11)}
#acapellaFixer audio{display:block;width:100%;height:48px;margin-top:9px}
.af-fix-controls{margin-top:16px;padding:14px;border:1px solid rgba(167,139,250,.22);border-radius:14px;background:rgba(139,92,246,.055)}
.af-control-heading,.af-slider-label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.af-control-heading strong,.af-export-group>strong{font:700 12px var(--font-display)}
.af-control-heading>span,.af-slider-label output{color:#bca8ff;font-size:11px}
.af-effect-tags{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 17px}
.af-effect-tags span{padding:6px 8px;border:1px solid #393440;border-radius:999px;color:#d1c7df;font-size:10px}
.af-slider{margin-top:13px}
.af-slider label{color:#eee9f2;font-size:12px;font-weight:600}
.af-slider input[type=range]{display:block;width:100%;min-height:30px;margin:8px 0;accent-color:#a78bfa}
.af-slider p{margin:4px 0 0;color:#928b98;font-size:10px;line-height:1.5}
.af-wide{width:100%;margin-top:15px}
.af-music-summary{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.af-music-summary span{padding:7px 9px;border:1px solid #393440;border-radius:9px;color:#d5c8ff;font-size:10px}
.af-play-mix{width:100%;margin-top:14px;border:1px solid rgba(167,139,250,.4);background:rgba(139,92,246,.18);color:#e9e0ff}
.af-export-group{margin-top:13px}
.af-export-group>strong{display:block;margin-bottom:8px;color:#e5dfeb}
.af-export{font-size:11px}
#acapellaFixer .af-export-panel>.af-status{margin-top:15px}
@media(max-width:390px){#vwaNav button{font-size:9px;letter-spacing:.06em}.af-action-row>*{flex-basis:100%}.af-panel{padding:13px}}
