body{font-family:system-ui,sans-serif;background:#111;color:#eee;margin:0}
.wrap{max-width:960px;margin:0 auto;padding:24px}
header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.brand h1{margin:0 0 6px}
.nav a{margin-right:12px;color:#9cf}
.badge{background:#333;padding:6px 10px;border-radius:8px;height:fit-content}
.grid{display:grid;gap:12px}
.card{background:#1b1b1b;border:1px solid #333;border-radius:12px;padding:16px}
.studio-master{border-color:#a80}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.status.on{color:#6f6;font-weight:700}
.status.off{color:#f66;font-weight:700}
.toggle{width:48px;height:28px;border-radius:999px;border:0;background:#444;position:relative;cursor:pointer}
.toggle[aria-checked=true]{background:#2a7}
.toggle:disabled{opacity:.45;cursor:not-allowed}
.knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.toggle[aria-checked=true] .knob{left:23px}
.desc{opacity:.8}
.meta{opacity:.7;font-size:.9rem}
.notes{margin:12px 0 0;display:grid;grid-template-columns:140px 1fr;gap:6px 10px;opacity:.9}
.submodules{margin-top:14px;padding-top:12px;border-top:1px solid #333}
.submodules h3{margin:0 0 6px;font-size:1rem}
.subrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #2a2a2a}
.subrow .desc{display:block;font-size:.85rem;opacity:.75;margin-top:2px}
.disabled-banner{background:#5a1e1e;color:#fff;padding:12px 14px;border-radius:8px;margin-bottom:16px}
.beat-pad{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.beat-pad button{min-width:64px;padding:12px 14px}
.toast{position:fixed;bottom:20px;right:20px;background:#222;padding:10px 14px;border-radius:8px;opacity:0;transition:opacity .2s;border:1px solid #444}
.toast.show{opacity:1}

/* Studio Time — piano + sequencer */
kbd{background:#2a2a2a;border:1px solid #555;border-radius:4px;padding:1px 5px;font-size:.85em}
.mode-btn.active{outline:2px solid #6af;background:#243}
.piano{position:relative;margin-top:14px;height:160px;user-select:none}
.white-row{display:flex;gap:2px;height:150px}
.pkey.white{flex:1;background:linear-gradient(#f6f6f6,#ddd);color:#111;border:1px solid #999;border-radius:0 0 8px 8px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;cursor:pointer;min-width:40px}
.pkey.white small{opacity:.55;font-size:.75rem}
.pkey.white.down,.pkey.white:active{background:#bcdfff}
.black-row{position:absolute;top:0;left:0;right:0;height:95px;pointer-events:none}
.pkey.black{pointer-events:auto;position:absolute;width:34px;height:95px;background:linear-gradient(#333,#111);color:#eee;border:1px solid #000;border-radius:0 0 6px 6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;cursor:pointer;z-index:2;font-size:.75rem}
.pkey.black.down,.pkey.black:active{background:#456}
.drum-pads .drum{min-width:88px;min-height:72px;background:#2a2030;border:1px solid #635;border-radius:10px;color:#eee;cursor:pointer}
.drum-pads .drum.down,.drum-pads .drum:active{background:#5a3a60}
.seq-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.seq-grid{display:grid;gap:6px}
.seq-row{display:flex;align-items:center;gap:4px}
.seq-lab{width:52px;text-transform:capitalize;opacity:.85;font-size:.9rem}
.seq-cell{width:28px;height:28px;border-radius:5px;border:1px solid #444;background:#222;cursor:pointer;padding:0}
.seq-cell.bar{border-color:#666}
.seq-cell.on{background:#2a8;border-color:#3ca}
.seq-cell.now{box-shadow:0 0 0 2px #fc6}

/* Studio Time beat maker */
.studio-wrap{max-width:1100px}
.studio-hero h1{margin-top:0}
.price-banner{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin:12px 0;padding:12px 14px;border-radius:10px;border:1px solid #2a7;background:#12351f}
.price-banner.free strong{display:inline-block;background:#2a7;color:#041;padding:4px 10px;border-radius:999px;font-size:.85rem;letter-spacing:.04em}
.price-banner span{opacity:.95;flex:1;min-width:200px}
.primary-btn{background:#2a7;color:#041;border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer}
.primary-btn:hover{filter:brightness(1.08)}
.hint{opacity:.75;font-size:.9rem}
.hint code{background:#222;padding:2px 6px;border-radius:4px}
.drum-pad button{min-width:88px;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#252525;color:#eee;border:1px solid #444;border-radius:10px;cursor:pointer}
.drum-pad button:hover,.drum-pad button.active{background:#3a2a10;border-color:#c80;transform:translateY(1px)}
.drum-pad .pad-name{font-weight:700}
.drum-pad kbd,.piano kbd{font-size:.7rem;opacity:.7;background:#111;padding:2px 5px;border-radius:4px;border:1px solid #333}
.inline-label{display:inline-flex;align-items:center;gap:8px;opacity:.9}
.inline-label select,.inline-label input[type=range]{accent-color:#2a7}
.piano{position:relative;display:flex;align-items:flex-end;height:160px;margin-top:12px;user-select:none;touch-action:none}
.piano .white{position:relative;width:54px;height:150px;margin:0 2px;background:linear-gradient(#f5f5f5,#d8d8d8);color:#111;border:1px solid #666;border-radius:0 0 6px 6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;gap:4px;cursor:pointer;z-index:1}
.piano .white.active,.piano .white:active{background:linear-gradient(#cde,#9cf)}
.piano .black{position:relative;width:36px;height:96px;margin:0 -18px;background:linear-gradient(#333,#111);color:#eee;border:1px solid #000;border-radius:0 0 4px 4px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;gap:2px;cursor:pointer;z-index:2}
.piano .black.active,.piano .black:active{background:linear-gradient(#864,#421)}
.seq-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0 12px}
.seq-grid{display:flex;flex-direction:column;gap:6px;overflow-x:auto}
.seq-row{display:flex;align-items:center;gap:4px}
.seq-label{width:56px;flex-shrink:0;font-size:.85rem;opacity:.85}
.seq-cell{width:28px;height:28px;flex-shrink:0;border:1px solid #444;border-radius:4px;background:#1a1a1a;cursor:pointer;padding:0}
.seq-cell.beat{border-color:#666}
.seq-cell.on{background:#2a7;border-color:#4c9}
.seq-cell.playhead{outline:2px solid #fc6;outline-offset:1px}
.fx-row{display:block;margin:8px 0;cursor:pointer}
.muted{opacity:.85}
.off-list{margin:8px 0;padding-left:18px}
.off-list li{margin:4px 0;color:#f88}
button{background:#333;color:#eee;border:1px solid #555;border-radius:8px;padding:10px 14px;cursor:pointer}
button:hover{border-color:#888}

/* Concert Mode admin (sandbox) */
.num-in{width:90px;padding:6px 8px;border-radius:6px;border:1px solid #555;background:#111;color:#eee}
.concert-admin{padding:12px 0;border-top:1px solid #333;margin-top:10px}
.ca-fields b{color:#fc6;font-weight:600}
.ca-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.ca-actions label{display:flex;gap:6px;align-items:center}
.ca-btn{background:#2a2a2a;color:#eee;border:1px solid #555;border-radius:8px;padding:7px 10px;cursor:pointer}
.ca-btn:hover{border-color:#a80}
.ca-btn.release{background:#12351f;border-color:#2a7}
.ca-btn.danger{background:#3a1515;border-color:#a44}
.ca-btn:disabled{opacity:.5}
.ca-msg{min-height:1.1em;margin:6px 0 0}
.speed-review{margin-top:10px;padding:10px;border:1px solid #3a3a3a;border-radius:10px;background:#141414}
.sr-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.85rem;opacity:.9}
.sr-time{font-variant-numeric:tabular-nums;color:#fc6}
.sr-bar{position:relative;height:18px;margin:8px 0;border-radius:6px;cursor:pointer;background:repeating-linear-gradient(90deg,#3d2a00 0 22px,#5a4200 22px 30px,#3d2a00 30px 60px,#222 60px 64px)}
.sr-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(242,195,25,.45);border-radius:6px 0 0 6px}
.sr-playhead{position:absolute;top:-4px;bottom:-4px;width:3px;left:0;background:#f2c319;box-shadow:0 0 6px #f2c319}
.sr-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sr-btn{background:#222;color:#eee;border:1px solid #555;border-radius:6px;padding:4px 10px;cursor:pointer}
.sr-btn.active{background:#a80;color:#111;border-color:#fc6;font-weight:700}