/* JAX Live studio — compact music UI inside the same Society, never a duplicate page. */
.jax-stage[hidden],.jax-stage-mini[hidden]{display:none!important}
.jax-stage{
 position:fixed;inset:0;z-index:212;display:flex;align-items:center;justify-content:center;
 padding:clamp(12px,3vw,40px);background:#040b16cf;backdrop-filter:blur(12px);color:#edfafa;
}
.jax-stage-frame{
 width:min(96vw,650px);max-height:93dvh;overflow:auto;overscroll-behavior:contain;
 background:linear-gradient(155deg,#0c1c2d,#101a27 66%,#10382f);
 border:1px solid #7cb6aa85;border-radius:21px;box-shadow:0 36px 80px #000b;
}
.jax-stage-header{display:flex;align-items:center;justify-content:space-between;padding:13px 22px;border-bottom:1px solid #85bdb741}
.jax-stage-badge{font:800 11px Inter,sans-serif;letter-spacing:.15em;color:#b4f17b}
.jax-stage-close{min-width:45px;min-height:45px;border:1px solid #8ca4ae73;background:#162936;color:#eefdfb;border-radius:11px;font-size:26px;line-height:1}
.jax-stage-hero{display:flex;align-items:center;gap:20px;padding:22px 28px 12px}
.jax-stage-icon{height:102px;width:102px;flex:0 0 102px;display:grid;place-items:center;border-radius:21px;
 background:linear-gradient(137deg,#b7f435,#36bfb0);color:#072b1c;font:900 46px 'Space Grotesk',sans-serif;transform:rotate(-3deg);box-shadow:6px 8px 0 #061b20}
.jax-stage-eyebrow{font:800 10px Inter,sans-serif;color:#a1dbcd;letter-spacing:.15em}
.jax-stage-summary h2{margin:5px 0;font:800 clamp(32px,6vw,55px)/1 'Space Grotesk',sans-serif}
.jax-stage-lead{color:#bbccd2;font:12px/1.55 Inter,sans-serif;max-width:31ch;margin:0}
.jax-stage-live{padding:14px 28px 9px}
.jax-stage-track-name{font:800 22px/1.3 'Space Grotesk',sans-serif;color:#d9f4e8;letter-spacing:-.02em;margin:0 0 4px}
.jax-stage-track-info{color:#9ac4b5;font:800 10px Inter,sans-serif;letter-spacing:.1em;margin:0}
.jax-stage-subtitle{display:flex;align-items:center;justify-content:center;min-height:63px;margin:14px 0 4px;padding:12px;text-align:center;border-radius:10px;
 background:#153b40;border:1px solid #7db9a852;font:600 14px/1.5 'Space Grotesk',sans-serif;color:#f3ffe0}
.jax-stage-timer{display:flex;align-items:center;gap:11px;padding:0 28px;color:#9ecfbf;font:700 11px Inter,sans-serif}
.jax-stage-seek{flex:1;min-width:0;accent-color:#b6f17a;height:30px;cursor:pointer}
.jax-stage-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:11px 28px}
.jax-stage-buttons button{min-height:50px;border-radius:11px;padding:10px;font:800 11px Inter,sans-serif;letter-spacing:.04em}
.jax-stage-play{grid-column:1/-1;background:#b7f435;color:#163422;border:1px solid #daff9b;font-size:14px!important}
.jax-stage-next,.jax-stage-radio{background:#173748;border:1px solid #569c9b9e;color:#d5f4eb}
.jax-stage-radio[aria-pressed=true]{border-color:#b7f435;color:#b7f435}
.jax-stage-tracks{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:6px 28px 19px}
.jax-stage-song{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;min-height:65px;text-align:left;
 padding:9px 11px;background:#152933;border:1px solid #57857d88;border-radius:11px;color:#e3fbef}
.jax-stage-song.selected{border-color:var(--track-accent,#b7f435);background:#1e3b3b}
.jax-song-number{color:#85b3ad;font:800 12px Inter,sans-serif}
.jax-song-title{font:700 11px 'Space Grotesk',sans-serif}
.jax-song-time{color:#b6d2c4;font:10px Inter,sans-serif}
.jax-stage-footer{border-top:1px solid #6b9e9559;padding:13px 28px 22px}
.jax-stage-request{min-height:44px;padding:10px 13px;background:#10352e;border:1px solid #7ecba69a;color:#b9e4cf;border-radius:9px;font:800 11px Inter,sans-serif}
.jax-stage-footer p{color:#8fa8a9;font:11px/1.55 Inter,sans-serif;margin:9px 0 0}
.jax-stage-mini{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:100;
 background:#163f39;color:#c6fa84;border:1px solid #a2da7b;border-radius:100px;box-shadow:0 7px 20px #0009;min-height:43px;
 padding:8px 18px;font:800 10px Inter,sans-serif;letter-spacing:.04em;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.jax-stage-open #metroUi,body.jax-stage-open .cx-toolbar,body.jax-stage-open .visitor-hud{pointer-events:none}
@media(max-width:680px){
 .jax-stage{padding:0;align-items:stretch}
 .jax-stage-frame{height:100dvh;max-height:100dvh;width:100vw;border-radius:0;border:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .jax-stage-header{padding:8px 15px}
 .jax-stage-hero{padding:14px 18px 9px;gap:14px}
 .jax-stage-icon{height:77px;width:77px;flex-basis:77px;font-size:34px;border-radius:15px}
 .jax-stage-summary h2{font-size:35px}
 .jax-stage-live{padding:12px 15px 8px}
 .jax-stage-track-name{font-size:21px}
 .jax-stage-subtitle{min-height:58px;font-size:14px;margin:12px 0 5px}
 .jax-stage-timer{padding:0 16px}
 .jax-stage-buttons{padding:10px 16px;gap:8px}
 .jax-stage-buttons button{min-height:48px;font-size:10px}
 .jax-stage-tracks{padding:5px 16px 15px;gap:8px}
 .jax-stage-song{min-height:54px;grid-template-columns:auto 1fr;gap:3px 7px}
 .jax-stage-song .jax-song-time{grid-column:2}
 .jax-stage-footer{padding:10px 16px 20px}
 .jax-stage-footer p{font-size:10px}
 #metroUi #metroActions #metroJaxLive{border-color:#b7f435;color:#dbff9d;background:#1c463b}
}
@media(max-width:350px){
 .jax-stage-icon{width:64px;flex-basis:64px;height:64px;font-size:29px}
 .jax-stage-summary h2{font-size:29px}
 .jax-stage-buttons{grid-template-columns:1fr}
 .jax-stage-play{grid-column:auto}
}

/* Obsolete bottom HUD controls are not duplicated. Voice lives in the
   existing collapsible menu and in the one Society chat header. */
.bottom-actions{display:none!important}
#metroActions #toggleVoice{position:static;display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:9px 8px;border:1px solid #8ad1b9;border-radius:9px;
  background:#21483e;color:#e0ffda;font:750 10px Inter,sans-serif;white-space:normal;touch-action:manipulation}
.chat-panel .chat-title-actions #chatKokoroToggle{min-width:51px;min-height:42px;
 font:750 9px Inter,sans-serif;color:#c5f3d8;background:#1e4a3d;border:1px solid #77b99a;
 border-radius:8px;padding:7px 8px;white-space:nowrap;touch-action:manipulation}
@media(max-width:680px){
 #metroUi #metroActions #toggleVoice{min-height:46px;height:auto;font-size:10px!important}
 .chat-panel .chat-title-actions #chatKokoroToggle{min-width:44px;min-height:44px;font-size:8px}
}

.jax-stage-mini{bottom:calc(56px + env(safe-area-inset-bottom))}
@media(max-width:680px){.jax-stage-mini{bottom:calc(45px + env(safe-area-inset-bottom));z-index:105}}

.jax-stage-share{min-height:44px;margin-left:8px;padding:10px 13px;background:#152d38;
 border:1px solid #83b1ab88;color:#c2ecdc;border-radius:9px;font:800 11px Inter,sans-serif}
@media(max-width:390px){.jax-stage-share{display:block;margin:8px 0 0}}