/* v27 · Mesa de som */
#mesaBt{position:fixed;right:max(20px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 18px);z-index:9;width:44px;height:44px;border:0;border-radius:50%;background:rgba(7,9,20,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f6d98a;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 22px rgba(232,180,74,.18);transition:box-shadow .3s,color .3s,opacity .5s}
#mesaBt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#mesaBt .m1,#mesaBt .m2{opacity:.35;transition:opacity .4s}
#mesaBt.vivo .m1{opacity:1;animation:mesaOnda 1.6s ease-in-out infinite}#mesaBt.vivo .m2{opacity:1;animation:mesaOnda 1.6s ease-in-out .3s infinite}
@keyframes mesaOnda{0%,100%{opacity:.45}50%{opacity:1}}
#mesaBt i{position:absolute;right:-2px;top:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#fff6dc,#e8b44a 70%);color:#16120a;font:600 10px/18px "IBM Plex Mono",monospace;text-align:center;opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s}
#mesaBt[data-n]:not([data-n=""]) i{opacity:1;transform:none}
#mesaBt:hover,#mesaBt:focus-visible,#mesaBt[aria-expanded="true"]{color:#fff6dc;box-shadow:0 0 34px rgba(232,180,74,.42)}
body.ceu-on #mesaBt,body.jw-on #mesaBt,body.closing #mesaBt,body.warp #mesaBt{opacity:0;pointer-events:none}
#mesa{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 70px);z-index:9;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 120px);box-sizing:border-box;padding:14px 14px 10px;border-radius:22px;background:rgba(8,10,26,.66);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 0 60px rgba(232,180,74,.16),0 20px 60px rgba(0,0,0,.5);color:#ece5d8;display:flex;flex-direction:column;gap:8px;
 opacity:0;pointer-events:none;transform:translateY(-10px) scale(.97);transform-origin:100% 0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
#mesa.on{opacity:1;pointer-events:auto;transform:none}
#mesa header{display:flex;align-items:center;gap:10px;padding:0 2px 6px}
#mesa header b{font:400 11px "Michroma","Jost",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#f6d98a}
#mesa header span{flex:1;font:400 9.5px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(236,229,216,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mesa .mesa-x{all:unset;cursor:pointer;width:40px;height:26px;display:grid;place-items:center;border-radius:999px}
#mesa .mesa-x::before{content:"";width:20px;height:5px;border-radius:999px;background:#000;box-shadow:0 0 12px rgba(232,180,74,.45),inset 0 1px 2px rgba(0,0,0,.9)}
#mesa .mf-l{display:flex;flex-direction:column;gap:6px;overflow:auto;scrollbar-width:none}
#mesa .mf-l::-webkit-scrollbar{display:none}
#mesa .mf{padding:10px 12px;border-radius:16px;background:rgba(246,217,138,.05);display:flex;flex-direction:column;gap:8px;transition:background .3s,box-shadow .3s}
#mesa .mf.toca{background:rgba(246,217,138,.1);box-shadow:0 0 24px rgba(232,180,74,.14)}
#mesa .mf-t{display:flex;align-items:baseline;gap:10px;min-width:0}
#mesa .mf-t b{font:500 14px "Jost",sans-serif;color:#fff6dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#mesa .mf-t span{flex:none;font:400 9px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,229,216,.45);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mesa .mf.toca .mf-t b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 8px 1px 0;background:#f6d98a;box-shadow:0 0 10px rgba(246,217,138,.9);animation:mesaOnda 1.4s ease-in-out infinite}
#mesa label{display:flex;align-items:center;gap:10px}
#mesa input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:26px;margin:0;background:transparent;cursor:pointer;--p:100%}
#mesa input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#f6d98a var(--p),rgba(246,217,138,.16) var(--p))}
#mesa input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#f6d98a var(--p),rgba(246,217,138,.16) var(--p))}
#mesa input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6dc,#e8b44a 70%);box-shadow:0 0 14px rgba(246,217,138,.8)}
#mesa input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6dc,#e8b44a 70%);box-shadow:0 0 14px rgba(246,217,138,.8)}
#mesa label em{flex:none;width:36px;text-align:right;font:400 10px "IBM Plex Mono",monospace;font-style:normal;color:rgba(236,229,216,.6)}
#mesa .mf p{margin:0;font:300 12.5px/1.45 "Jost",sans-serif;color:rgba(236,229,216,.6)}
#mesa .mf-b{display:flex;gap:6px;flex-wrap:wrap}
#mesa .mf-b:empty{display:none}
#mesa .mf-b button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;background:rgba(10,12,30,.6);color:#ece5d8;font:500 9.5px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 14px rgba(232,180,74,.14);transition:box-shadow .3s,color .3s}
#mesa .mf-b button:hover,#mesa .mf-b button:focus-visible{color:#fff6dc;box-shadow:0 0 22px rgba(232,180,74,.4)}
@media (max-width:599px){#mesaBt{right:16px;top:calc(env(safe-area-inset-top,0px) + 14px);width:40px;height:40px}#mesa{right:8px;left:8px;width:auto;top:calc(env(safe-area-inset-top,0px) + 62px)}}
@media (prefers-reduced-motion:reduce){#mesaBt.vivo .m1,#mesaBt.vivo .m2,#mesa .mf.toca .mf-t b::before{animation:none}}
/* v32: o computador na mesa */
#mesa h5{margin:4px 2px 2px;font:400 8.5px "IBM Plex Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,217,138,.55)}
#mesa .mf-aviso{margin:4px 2px 0;font:300 11.5px/1.45 "Jost",sans-serif;color:rgba(236,229,216,.5)}
#mesa .mf-aviso button{all:unset;cursor:pointer;margin-left:6px;padding:3px 10px;border-radius:999px;background:rgba(10,12,30,.6);color:#f6d98a;font:500 9px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 12px rgba(232,180,74,.18)}
/* v33: cada aba e cada programa com o seu medidor ao vivo e o seu silenciar */
#mesa .mf-t{align-items:center}
#mesa .mf-nivel{flex:none;margin-left:auto;width:46px;height:6px;border-radius:999px;background:linear-gradient(90deg,#f6d98a calc(var(--n) * 100%),rgba(246,217,138,.12) calc(var(--n) * 100%));box-shadow:0 0 calc(var(--n) * 14px) rgba(246,217,138,.7);transition:box-shadow .2s}
#mesa .mf.pc .mf-t span{margin-left:0}
#mesa .mf-mudo{all:unset;flex:none;cursor:pointer;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,30,.6);box-shadow:0 0 12px rgba(232,180,74,.14)}
#mesa .mf-mudo::before{content:"";width:14px;height:14px;background:#f6d98a;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10z'/%3E%3Cpath d='M16 9a4 4 0 010 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10z'/%3E%3Cpath d='M16 9a4 4 0 010 6'/%3E%3C/svg%3E") center/contain no-repeat}
#mesa .mf-mudo.on{background:rgba(232,180,74,.22)}
#mesa .mf-mudo.on::before{background:#fff6dc;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10z'/%3E%3Cpath d='M17 9l5 5M22 9l-5 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10z'/%3E%3Cpath d='M17 9l5 5M22 9l-5 5'/%3E%3C/svg%3E")}
#mesa .mf.pc:not(.toca){opacity:.62}
#mesa .mf.pc:not(.toca):hover,#mesa .mf.pc:not(.toca):focus-within{opacity:1}
#mesa .mf-ico{flex:none;width:16px;height:16px;border-radius:4px;margin-right:2px}
#mesa .mf.aba:not(.toca){opacity:.7}
#mesa .mf.aba .mf-t .mf-mudo{margin-left:auto}