:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f0f3ff;
  background: #0c1020;
  --lime: #cdf771;
  --ink: #0d1224;
  --line: #28324b;
  --muted: #a3afcb;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100dvh; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .48; cursor: default; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; flex: none; vertical-align: middle; }
:focus-visible { outline: 2px solid #64a8ff; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.brand-mark { display: inline-grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--lime); color: #171e2e; }
.brand-mark svg { width: 24px; height: 24px; }
.feedback { position: absolute; z-index: 10; inset: auto 12px 14px; margin: 0; padding: 10px 12px; border: 1px solid #a6d851; border-radius: 8px; color: #182d0b; background: #e8ffa9; box-shadow: 0 6px 16px #0004; font-size: 13px; font-weight: 700; }
.feedback.error { background: #fff0e9; color: #842e26; border-color: #df9c86; }

body[data-view="studio"] { background: radial-gradient(ellipse 85% 48% at 50% 0%, #202e58 0%, #111830 53%, #0c1020 100%); }
.studio-header { border-bottom: 1px solid #303a564d; }
.studio-header-inner { width: min(1500px, 100%); min-height: 66px; padding: 0 clamp(18px, 3vw, 50px); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.85px; }
.wordmark-sub { display: block; margin-top: 4px; color: #b6c1e1; font: 700 8px var(--mono); letter-spacing: .23em; }
.header-right { display: flex; align-items: center; gap: 16px; }
.lab-label { color: #a6b4d3; font: 700 10px var(--mono); letter-spacing: .14em; }
.live-pill, .dj-live { display: flex; align-items: center; gap: 7px; width: max-content; border: 1px solid #b4f85745; border-radius: 50px; padding: 5px 10px; color: #dcffa0; background: #b0fa3812; font-size: 11px; font-weight: 700; white-space: nowrap; }
.live-pill i, .dj-live i, .xp-live i, .xp-sidebar small i, .stage-now small i, .dj-now-label i { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.offline { opacity: .64; }
.studio-shell { position: relative; width: min(1500px, 100%); padding: 0 clamp(18px, 3vw, 50px); margin: auto; }
.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: clamp(26px, 4vw, 53px) 0 26px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #c1cbeb; font: 700 11px var(--mono); letter-spacing: .14em; }
.eyebrow span { width: 13px; height: 4px; background: var(--lime); border-radius: 1px; }
.eyebrow b { color: #7487b8; }
.intro h1 { margin: 7px 0 6px; font-size: clamp(33px, 5vw, 72px); letter-spacing: -.075em; line-height: 1; }
.intro h1 em { color: var(--lime); font-weight: 800; }
.intro h1 em span { color: #f2f5ff; }
.intro p { margin: 12px 0 0; color: #b3bfdc; font-size: clamp(13px, 1.15vw, 16px); }
.join-link { display: flex; flex: none; align-items: center; gap: 10px; padding: 7px 11px 7px 7px; border: 1px solid #3b4b73; border-radius: 10px; background: #182241; box-shadow: 0 8px 30px #0002; }
.join-link:hover { background: #243058; }
.join-link img { border-radius: 4px; background: white; }
.join-link small { display: block; font: 700 8px var(--mono); color: #aabce2; letter-spacing: .07em; }
.join-link strong { display: block; margin-top: 3px; font-size: 12px; }
.join-link strong svg { width: 13px; height: 13px; color: var(--lime); }

.studio-grid { display: grid; grid-template-columns: minmax(231px, .92fr) minmax(370px, 2.05fr) minmax(242px, 1fr); align-items: start; gap: 12px; }
.studio-panel { min-width: 0; overflow: hidden; background: #131c32; border: 1px solid #37435e; border-radius: 13px; box-shadow: 0 9px 28px #02071157; }
.panel-top { height: 58px; padding: 8px 11px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #34425f; }
.panel-symbol { display: grid; width: 33px; height: 33px; place-items: center; flex: none; border: 1px solid #405785; border-radius: 8px; color: #c3d5ff; background: #283b66; }
.stage-panel .panel-symbol { color: #d7ffa0; background: #344b33; border-color: #547155; }
.dj-panel .panel-symbol { color: #e7ceff; background: #41335d; border-color: #62517a; }
.panel-top small { display: block; color: #a7b7da; font: 700 9px var(--mono); letter-spacing: .1em; }
.panel-top h2 { margin: 3px 0 0; color: #f5f7ff; font-size: 16px; line-height: 1; letter-spacing: -.035em; }
.panel-open { display: grid; width: 34px; height: 34px; place-items: center; margin-left: auto; border: 1px solid #33425f; border-radius: 7px; color: #c2ccec; }
.panel-open:hover { color: #fff; background: #293b63; }
.panel-open svg { width: 15px; height: 15px; }
.studio-panel iframe { display: block; width: 100%; height: clamp(412px, 54vh, 600px); border: 0; background: #10172b; }
.demo-guide { display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 10px 12px; border: 1px solid #364362; border-radius: 11px; background: #141d33; }
.guide-icon { display: grid; flex: none; width: 34px; height: 34px; place-items: center; color: #d6ff78; background: #2c3c33; border: 1px solid #527044; border-radius: 7px; }
.demo-guide strong { display: block; color: #eff5ff; font-size: 13px; }
.demo-guide p { margin: 2px 0 0; color: #aab8d8; font-size: 12px; }
.demo-guide p b { color: #dde6ff; }
.demo-button { margin-left: auto; padding: 8px 10px; flex: none; color: #dbff99; background: #2a3c33; border: 1px solid #4f6848; border-radius: 7px; font-size: 12px; font-weight: 700; }
.demo-button:hover { background: #394d3b; }
.demo-button svg { width: 15px; height: 15px; margin-right: 3px; }
.studio-foot { display: flex; justify-content: space-between; margin: 15px 0 18px; color: #7e8eb3; font: 700 9px var(--mono); letter-spacing: .13em; }
.studio-foot button { padding: 0; border: 0; color: #a3b5dd; background: transparent; font: inherit; }
.studio-foot button:hover { color: #fff; text-decoration: underline; }
button[aria-busy="true"] { cursor: progress; opacity: .65; }

body[data-view="telemovel"] { color-scheme: light; background: #1b4fac; font-family: Tahoma, "Segoe UI", sans-serif; }
.xp-desktop.phone-desktop { overflow: clip; padding: clamp(5px, 1.4vmin, 14px); }
.xp-window.phone-shell { position: relative; width: min(100%, 460px); }
.xp-title.phone-header { min-height: 49px; padding: 3px 5px; }
.xp-title.phone-header > svg { width: 29px; height: 29px; }
.xp-title.phone-header strong { font-size: clamp(12px, 3.5vw, 16px); }
.phone-header .window-actions > button { width: 44px; height: 44px; }
.xp-to.phone-to { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11px; }
.phone-to > div { overflow: hidden; text-overflow: ellipsis; }
.phone-to .xp-live { flex: none; }
.phone-to .xp-live span { color: #425b89; }
.icon-button { padding: 0; display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 5px; background: transparent; color: inherit; }
.join-body { flex: 1; overflow: auto; padding: clamp(18px, 6vh, 44px) 15px 15px; background: linear-gradient(150deg, #fcfdff, #dce9ff); text-align: center; }
.xp-avatar.join-avatar { width: 79px; max-width: 100%; margin: 0 auto 10px; }
.join-body h1 { margin: 0; font-size: 25px; letter-spacing: -.06em; color: #203975; }
.join-body p { max-width: 220px; margin: 7px auto 18px; font-size: 12px; line-height: 1.45; color: #475980; }
.join-body form { max-width: 325px; margin: auto; text-align: left; }
.join-body label { display: block; margin-bottom: 5px; color: #354a74; font-size: 11px; font-weight: 700; }
.phone-shell input { width: 100%; min-width: 0; padding: 9px; border: 1px solid #98add8; border-radius: 5px; background: #fff; color: #1b2c54; font-size: 16px; }
.phone-shell input::placeholder { color: #627398; }
.xp-primary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 9px; border: 1px solid #244aa0; border-radius: 5px; background: linear-gradient(#75a0ff, #416bcf 54%, #345ab6); box-shadow: inset 0 1px 0 #ffffff6b; color: white; font-size: 11px; font-weight: 700; }
.xp-primary:not(:disabled):hover { filter: brightness(1.14); }
.join-body .xp-primary { width: 100%; margin-top: 9px; }
.join-privacy { display: block; max-width: 220px; margin: 12px auto 0; color: #576988; font-size: 10px; line-height: 1.4; }
.phone-session { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.phone-conversation { position: relative; flex: 1; margin: 5px 6px; }
.phone-feed { flex: 1; padding: 7px; }
.phone-feed:focus-visible { outline-offset: -2px; }
.history-more { flex: none; padding: 7px; border: 0; border-bottom: 1px solid #cfdaed; background: #f4f7fc; color: #425b89; font-size: 11px; cursor: pointer; }
#message-cooldown, #song-cooldown { display: block; margin-top: 5px; color: #425b89; font-size: 11px; }
.feed { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9db3df transparent; }
.phone-compose { padding: 6px; flex: none; border-top: 1px solid #a2b7de; }
.phone-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 7px; }
.phone-tabs button { min-width: 0; padding: 6px 2px; color: #2c487d; border: 1px solid #a2b7de; border-radius: 3px; background: linear-gradient(#f9fcff, #e3edff 64%, #c9daf5); white-space: nowrap; font-size: 10px; font-weight: 700; }
.phone-tabs button svg { width: 16px; height: 16px; color: #3265c3; }
.phone-tabs #song-tab svg { color: #637d24; }
.phone-tabs button[aria-pressed="true"] { border-color: #779ad3; background: #f9fbff; color: #253c7b; box-shadow: inset 0 0 0 1px #fff; }
.phone-form { display: flex; gap: 5px; }
.phone-form .send { flex: none; min-width: 44px; padding: 0 9px; }
.phone-form input { padding: 7px 8px; }
.xp-status.phone-meta { padding: 5px 7px; font-size: 10px; }
.phone-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-form { position: relative; display: grid; gap: 5px; }
.search-box { display: flex; align-items: center; gap: 3px; padding: 0 4px 0 7px; border: 1px solid #98add8; border-radius: 5px; background: white; color: #52688e; }
.search-box svg { width: 15px; height: 15px; }
.search-box input { border: 0; padding: 7px 2px; }
.song-list { position: absolute; bottom: calc(100% + 4px); z-index: 3; width: 100%; max-height: 166px; overflow: auto; padding: 4px; border: 1px solid #9bb0dc; border-radius: 6px; box-shadow: 0 5px 15px #152f6050; background: #fff; }
.song-list button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px; text-align: left; color: #273c62; background: transparent; border: 0; border-radius: 4px; }
.song-list button:hover, .song-list button:focus-visible { background: #e4edff; }
.song-list .record { width: 26px; height: 26px; }
.song-list .record svg { width: 17px; height: 17px; }
.song-list strong, .song-list small { display: block; font-size: 10px; }
.song-list small { color: #526586; }
.song-list p { margin: 5px; font-size: 11px; }
.phone-now { display: flex; flex: none; align-items: center; gap: 7px; margin: 6px 6px 0; padding: 6px 8px; color: #233808; background: linear-gradient(125deg, #f5ffd4, #d0f686); border: 1px solid #89b645; border-radius: 5px; }
.phone-now-copy { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.phone-now-copy small { font: 900 10px var(--mono); letter-spacing: .1em; }
.phone-now-copy strong { font-size: 15px; text-transform: uppercase; }
.phone-now-copy > span { font-size: 11px; max-height: 2.6em; overflow: auto; }
.new-message { align-self: center; position: absolute; bottom: 6px; z-index: 2; padding: 6px 9px; color: white; background: #315ab0; border: 0; border-radius: 10px; font-size: 11px; }
.phone-shell:has(#session:not([hidden])) .feedback { bottom: 106px; pointer-events: none; }

.multiplier { display: inline-flex; align-items: center; justify-content: center; gap: 1px; flex: none; min-width: 25px; padding: 2px 5px; border: 1px solid #a1b3db; border-radius: 5px; background: #e1eaff; color: #31487c; font: 900 12px var(--mono); line-height: 1.15; white-space: nowrap; }
.multiplier svg { width: 11px; height: 11px; }
.multiplier.green { border-color: #74a934; color: #263d05; background: #c9f475; }
.multiplier.warm { border-color: #c09223; color: #472700; background: #ffd25a; }
.multiplier.hot { border-color: #c84f9d; color: #4e1244; background: #ff9cdf; }
.feed-entry:last-child .multiplier:not(.base) { animation: power-up 390ms cubic-bezier(.16,1.8,.48,1); }
@keyframes power-up { 0% { transform: scale(.63) rotate(-8deg); } 60% { transform: scale(1.13) rotate(3deg); } 100% { transform: none; } }
.feed-entry { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 5px; padding: 5px 6px; border-radius: 5px; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.feed-icon { display: grid; place-items: center; flex: none; color: #4567aa; }
.feed-icon svg { width: 14px; height: 14px; }
.feed-entry b { color: #2d4e9b; }
.feed-copy { min-width: 0; }
.feed-entry time, .feed-system time { margin-left: auto; flex: none; color: #5e6e8f; font: 400 9px var(--mono); line-height: 1.5; }
.request-entry { background: #edf2ff; border: 1px solid #d6e2ff; }
.feed-system { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 0 6px; color: #52668c; font-size: 10px; }
.feed-system svg { width: 13px; height: 13px; }
.played-entry { justify-content: start; padding: 5px 6px; background: #edf7d6; border: 1px solid #d4e9ac; border-radius: 5px; color: #3a5617; }

body[data-view="projecao"] { color-scheme: light; background: #1b4fac; font-family: Tahoma, "Segoe UI", sans-serif; }
.xp-desktop { position: relative; display: flex; flex-direction: column; height: 100dvh; min-height: 330px; overflow: hidden; isolation: isolate; padding: clamp(11px, 3vw, 44px) clamp(12px, 5vw, 86px) clamp(42px, 6vw, 82px); background: radial-gradient(ellipse at 22% 40%, #fcfeffb5, transparent 27%), linear-gradient(180deg, #1250c0, #579eed 48%, #a6d7fc 69%, #57952a 70%, #83b73c); color: #22345e; }
.hills { position: absolute; z-index: -1; inset: 58% -15% -19%; border-radius: 50% 45% 0 0; transform: rotate(-8deg); background: radial-gradient(ellipse at 32% 5%, #b1da5c, transparent 60%), linear-gradient(#7fb33c, #3a741c 80%); box-shadow: 0 -4px 11px #d7ffc842; }
.hills::after { content: ""; position: absolute; inset: 28% 0 0; background: repeating-linear-gradient(5deg, #14451019 0px, transparent 2px 5px); }
.xp-window { display: flex; flex-direction: column; flex: 1; min-height: 0; width: min(100%, 1550px); margin: 0 auto; overflow: hidden; border: 3px solid #205ac9; border-top: 2px solid #80b2ff; border-radius: 9px 9px 3px 3px; box-shadow: 0 15px 28px #0b2b53aa, 0 0 0 1px #173d87; background: #d9e6ff; }
.xp-title { display: flex; align-items: center; gap: 5px; flex: none; min-height: clamp(27px, 4.5vw, 55px); padding: 3px 4px; color: #fff; text-shadow: 0 1px 1px #173676; background: linear-gradient(#7aa9ff 0%, #467fee 21%, #2865df 53%, #2153bd 89%, #4c86ed 100%); }
.xp-title > svg { width: clamp(21px, 3.2vw, 38px); height: clamp(21px, 3.2vw, 38px); }
.xp-title strong { font-size: clamp(11px, 1.9vw, 26px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.window-actions { display: flex; gap: 2px; margin-left: auto; }
.window-actions > * { display: grid; padding: 0; color: inherit; width: clamp(16px, 2.5vw, 29px); height: clamp(16px, 2.5vw, 29px); place-items: center; border: 1px solid #e7efff; border-radius: 3px; font-size: clamp(12px, 2vw, 24px); line-height: 1; background: linear-gradient(145deg, #80afff, #255bd3 70%); }
.window-actions button:hover:not(:disabled) { filter: brightness(1.22); }
.window-actions b:last-child { background: linear-gradient(145deg, #ffbc91, #d7432a 75%); }
.xp-toolbar { display: flex; align-items: center; gap: clamp(7px, 2vw, 24px); flex: none; min-height: clamp(29px, 5.8vw, 64px); padding: 4px clamp(6px, 2vw, 24px); color: #2c487d; background: linear-gradient(#f9fcff, #e3edff 64%, #c9daf5); border-bottom: 1px solid #a2b7de; }
.xp-toolbar span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: clamp(9px, 1.45vw, 19px); font-weight: 700; }
.xp-toolbar svg { width: clamp(13px, 2.5vw, 30px); height: clamp(13px, 2.5vw, 30px); color: #3265c3; }
.xp-toolbar span:nth-child(2) svg { color: #637d24; }
.xp-toolbar span:nth-child(3) svg { color: #a26c14; fill: #ffea98; }
.xp-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(61px, 16vw, 218px); flex: 1; min-height: 0; gap: clamp(4px, 1vw, 12px); padding: clamp(4px, 1vw, 12px); }
.xp-conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #97afd8; background: #fff; border-radius: 2px; }
.xp-to { flex: none; padding: clamp(4px, .85vw, 12px) clamp(5px, 1.4vw, 20px); color: #425b89; border-bottom: 1px solid #cfdaed; background: #f4f7fc; font-size: clamp(9px, 1.4vw, 17px); white-space: nowrap; }
.xp-to span { color: #7b8fb0; }
.stage-feed { flex: 1; padding: clamp(5px, 1.3vw, 17px); }
.stage-feed .feed-entry { gap: clamp(4px, 1vw, 15px); margin-bottom: clamp(4px, .8vw, 10px); padding: clamp(4px, .8vw, 11px); font-size: clamp(11px, 2vw, 32px); }
.stage-feed .feed-icon svg { width: clamp(12px, 2.6vw, 32px); height: clamp(12px, 2.6vw, 32px); }
.stage-feed time, .stage-feed .feed-system { font-size: clamp(8px, 1.25vw, 17px); }
.stage-feed .feed-system svg { width: clamp(12px, 2vw, 24px); height: clamp(12px, 2vw, 24px); }
.stage-feed .multiplier { font-size: clamp(12px, 2.2vw, 30px); }
.stage-feed .multiplier svg { width: 1em; height: 1em; }
.xp-sidebar { container-type: size; display: flex; flex-direction: column; align-items: center; min-height: 0; text-align: center; background: linear-gradient(#eaf2ff, #cbdbf7); border: 1px solid #aec1e1; border-radius: 3px; padding: clamp(4px, .55vw, 8px); color: #2a467b; }
.xp-avatar { flex: none; display: grid; width: 100%; max-width: min(143px, 32cqh); aspect-ratio: 1; place-items: center; margin-bottom: 5px; border: 1px solid #819bca; border-radius: 3px; background: radial-gradient(ellipse at 25% 15%, #fff, #c0d9fd); box-shadow: inset 0 0 0 2px #f9fcff8a; }
.xp-avatar svg { width: 94%; height: 94%; }
.xp-sidebar strong { font-size: clamp(9px, 1.6vw, 22px); }
.xp-sidebar small { margin-top: 2px; font-size: clamp(8px, 1.25vw, 16px); }
.xp-sidebar small i { color: #4b9417; width: 5px; height: 5px; }
.qr-link { display: block; width: min(100%, max(42px, calc(68cqh - 54px))); margin: auto auto 0; padding-top: 7px; }
.qr-link img { display: block; width: 100%; margin: 0 auto; border-radius: 2px; border: 1px solid #b5c5e4; background: white; }
.qr-link span { display: block; margin-top: 4px; color: #3e5583; font-size: clamp(8px, 1.15vw, 14px); font-weight: 700; line-height: 1.2; }
.xp-status { display: flex; justify-content: space-between; gap: 3px; flex: none; padding: clamp(3px, .6vw, 9px) 7px; color: #405782; background: #d6e3fa; border-top: 1px solid #aebfe1; font-size: clamp(8px, 1.3vw, 16px); }
.xp-live { display: flex; align-items: center; gap: 4px; }
.xp-live i { color: #4f8e14; width: 5px; height: 5px; }
.xp-taskbar { position: absolute; inset: auto 0 0; display: flex; align-items: center; height: clamp(29px, 4vw, 53px); gap: 6px; padding-right: 9px; color: #fff; border-top: 2px solid #6aa3fa; background: linear-gradient(#3984ee, #225cca 25%, #2355be 80%, #174491); font-size: clamp(9px, 1.3vw, 15px); }
.start-button { display: flex; align-items: center; align-self: stretch; padding: 0 clamp(7px, 1.4vw, 22px); border-radius: 0 11px 11px 0; color: #fff; background: linear-gradient(#7acc42, #409325 56%, #327621); font-size: clamp(11px, 1.8vw, 23px); font-style: italic; font-weight: 900; text-shadow: 0 1px 1px #295a1c; }
.start-button svg { width: 1em; height: 1em; }
.task-app { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border: 1px solid #0e429d; border-radius: 3px; background: #1249ad; }
.task-app svg { width: 1em; height: 1em; }
.xp-taskbar time { margin-left: auto; font-family: var(--mono); }
.stage-now { display: flex; flex: none; align-items: center; gap: clamp(4px, 1vw, 14px); margin: clamp(4px, .8vw, 10px); padding: clamp(5px, 1.25vw, 17px); border: 1px solid #89b645; border-radius: 5px; background: linear-gradient(125deg, #f5ffd4, #d0f686); box-shadow: 0 3px 12px #6e9d3540; color: #233808; animation: now-in 280ms ease-out; }
@keyframes now-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.stage-now .record { width: clamp(22px, 6vw, 90px); height: clamp(22px, 6vw, 90px); }
.stage-now .record svg { width: 68%; height: 68%; }
.stage-now-copy { display: grid; gap: 1px; min-width: 0; }
.stage-now small { font: 900 clamp(8px, 1.4vw, 18px) var(--mono); letter-spacing: .1em; }
.stage-now small i { width: 5px; height: 5px; color: #4c7b16; }
.stage-now strong { color: #1e3106; font-size: clamp(17px, 5vw, 73px); line-height: 1; letter-spacing: -.055em; text-transform: uppercase; overflow-wrap: anywhere; }
.stage-now-copy > span { font-size: clamp(9px, 1.55vw, 22px); overflow-wrap: anywhere; }
.stage-now.compact { padding-block: clamp(3px, .55vw, 9px); }
.stage-now.compact .record { width: clamp(19px, 3vw, 49px); height: clamp(19px, 3vw, 49px); }
.stage-now.compact strong { font-size: clamp(13px, 2.55vw, 34px); }
.stage-highlight { flex: none; max-height: 35%; overflow: auto; margin: 0 10px 6px; padding: clamp(7px, 1.5vw, 20px); border: 1px solid #b991dc; border-radius: 5px; color: #422564; background: linear-gradient(120deg, #f9edff, #ead4ff); }
.stage-highlight small { display: block; font: 700 clamp(8px, 1vw, 14px) var(--mono); letter-spacing: .08em; }
.stage-highlight strong { display: block; margin-top: 3px; font-size: clamp(12px, 1.7vw, 24px); }
.stage-highlight p { margin: 5px 0 0; font-size: clamp(15px, 2.3vw, 34px); line-height: 1.25; overflow-wrap: anywhere; }
.equalizer { display: flex; align-items: flex-end; height: clamp(12px, 3.6vw, 45px); gap: 2px; margin-left: auto; }
.equalizer i { display: block; width: clamp(2px, .55vw, 7px); height: 90%; border-radius: 2px; background: #679632; transform-origin: bottom; animation: equalize .92s ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { height: 63%; animation-delay: -.23s; }
.equalizer i:nth-child(3) { height: 80%; animation-delay: -.62s; }
.equalizer i:nth-child(4) { height: 55%; animation-delay: -.41s; }
@keyframes equalize { from { transform: scaleY(.32); } to { transform: scaleY(1); } }

body[data-view="dj"] { background: #10172b; }
.dj-shell { position: relative; display: flex; flex-direction: column; width: min(100%, 830px); height: 100dvh; min-height: 330px; margin: auto; background: #131b30; }
.dj-header { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px; min-height: 56px; background: #17213a; border-bottom: 1px solid #2d3b58; }
.dj-brand { display: grid; width: 30px; height: 30px; place-items: center; color: #e0c1ff; background: #3c3158; border: 1px solid #6b5388; border-radius: 7px; }
.dj-header h1 { margin: 0; font-size: 15px; letter-spacing: -.04em; }
.dj-header small { color: #adbbdc; font: 700 8px var(--mono); letter-spacing: .1em; }
.dj-live { padding: 3px 6px; margin-left: auto; font-size: 9px; }
.dj-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; scrollbar-width: thin; }
.dj-now { padding: 9px; border: 1px solid #3b513e; border-radius: 8px; background: linear-gradient(130deg, #293a38, #202a3a); }
.dj-now-label { color: #d0f88f; font: 700 9px var(--mono); letter-spacing: .11em; }
.projection-controls { margin-bottom: 12px; padding: 12px; border: 1px solid #405474; border-radius: 9px; background: #1b2740; }
.pace-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pace-heading h2 { margin: 0; font-size: 14px; }
.pace-heading output { color: #cff47f; font: 700 12px var(--mono); white-space: nowrap; }
#projection-speed { display: block; width: 100%; height: 36px; margin: 4px 0 0; accent-color: #cff47f; cursor: pointer; }
.pace-scale { display: flex; justify-content: space-between; color: #b0c0df; font-size: 10px; }
.pace-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.projection-controls button, .projection-controls select { min-height: 36px; padding: 6px 9px; border: 1px solid #52678b; border-radius: 5px; color: #e5edff; background: #293d60; font-size: 12px; }
.projection-controls button[aria-pressed="true"] { color: #203014; background: #cff47f; border-color: #b7dd72; }
.pace-actions label { margin-left: auto; color: #c0cee8; font-size: 11px; }
.pace-status { margin: 9px 0 0; color: #aebede; font-size: 11px; }
.highlight-picker { margin-top: 10px; border-top: 1px solid #344664; padding-top: 9px; font-size: 12px; color: #c7d5ef; }
.highlight-picker summary { cursor: pointer; }
.highlight-option { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.highlight-option p { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.highlight-option button { flex: none; }
#highlight-clear { margin-top: 8px; }
.dj-now-label i { width: 5px; height: 5px; margin-right: 3px; }
.dj-now-track { display: flex; gap: 6px; align-items: center; margin-top: 7px; overflow-wrap: anywhere; }
.dj-now-track > div { min-width: 0; }
.dj-now-track strong { display: block; font-size: 12px; }
.dj-now-track small { display: block; margin-top: 2px; max-height: 38px; overflow: auto; color: #b9c7df; font-size: 10px; }
.record { display: inline-grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 6px; color: #25144b; background: radial-gradient(circle at 21% 13%, #fff9, transparent 55%), #b8a0ff; }
.record svg { width: 22px; height: 22px; }
.record.pink { background-color: #fb95c2; color: #642047; }
.record.orange { background-color: #ffb878; color: #67340e; }
.record.lime { background-color: #bcde65; color: #364610; }
.record.blue { background-color: #91bdff; color: #224477; }
.record.idle { background: #344451; color: #adbed5; }
.queue-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 16px 0 7px; }
.queue-heading h2, .moderation-panel h2 { margin: 0; font-size: 13px; letter-spacing: -.02em; }
.queue-heading span { color: #9faed0; font: 700 8px var(--mono); letter-spacing: .075em; }
.queue-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-bottom: 6px; padding: 7px; border: 1px solid #384866; border-radius: 7px; background: #1e2943; }
.queue-pos { color: #a6b6d8; font: 700 9px var(--mono); }
.queue-track strong, .queue-track small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-track strong { font-size: 12px; }
.queue-track small { margin-top: 2px; color: #bcc9e4; font-size: 9px; }
.queue-bottom { grid-column: 2 / -1; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.queue-bottom span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #adbfe0; font-size: 9px; }
.play-button { flex: none; padding: 4px 5px; border: 1px solid #bae76a; border-radius: 5px; background: #cff47f; color: #1d2a16; font-size: 9px; font-weight: 800; }
.play-button svg { width: 11px; height: 11px; }
.play-button:hover { background: #e5ffa8; }
.queue-empty, #dj-lock { margin: 0; padding: 8px; color: #a8b8d9; font-size: 11px; line-height: 1.4; }
#dj-lock { width: min(100%, 340px); padding: 16px; }
#dj-lock h2 { color: #f2f5ff; margin: 0 0 12px; font-size: 16px; }
#dj-login { display: grid; gap: 8px; }
#dj-login input { width: 100%; padding: 8px; border: 1px solid #435272; border-radius: 5px; background: #202c45; color: white; }
#dj-login button { justify-self: start; padding: 6px 12px; font-size: 12px; }
.dj-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; flex: none; padding: 5px 9px; background: #17213a; border-top: 1px solid #2d3b58; }
.dj-footer button, .review-item button { color: #c3d0ec; border: 1px solid #435272; border-radius: 5px; background: #263552; padding: 4px 6px; font-size: 10px; font-weight: 700; }
.dj-footer button:hover, .review-item button:hover { background: #35486e; }
.dj-footer button svg { width: 13px; height: 13px; }
.dj-footer > span { color: #a7b5d4; font: 700 9px var(--mono); }
.dj-shell .feedback { bottom: 49px; pointer-events: none; }
.moderation-panel { margin-top: 10px; }
.review-item { padding: 7px; margin-top: 5px; border: 1px solid #495671; border-radius: 5px; background: #1d293f; font-size: 11px; }
.review-item p { margin: 0 0 5px; overflow-wrap: anywhere; }
.review-item button + button { margin-left: 5px; }
body[data-view="dj"]:not(.embedded) .dj-shell { border-inline: 1px solid #2d3b58; }
body[data-view="dj"]:not(.embedded) .dj-header, body[data-view="dj"]:not(.embedded) .dj-body, body[data-view="dj"]:not(.embedded) .dj-footer { padding: 16px; }
body[data-view="dj"]:not(.embedded) .queue-row { padding: 12px; }
body[data-view="dj"]:not(.embedded) .queue-track strong, body[data-view="dj"]:not(.embedded) .dj-now-track strong { font-size: 16px; }
body[data-view="dj"]:not(.embedded) .play-button { font-size: 12px; padding: 6px 9px; }
body[data-view="telemovel"]:not(.embedded) .phone-compose { padding: 8px; }
body[data-view="telemovel"]:not(.embedded) .phone-tabs button, body[data-view="telemovel"]:not(.embedded) .xp-primary { min-height: 44px; font-size: 13px; }
body[data-view="telemovel"]:not(.embedded) .feed-entry { font-size: 13px; }
body[data-view="telemovel"]:not(.embedded) .song-list button { min-height: 40px; }
body[data-view="telemovel"]:not(.embedded) .song-list strong, body[data-view="telemovel"]:not(.embedded) .song-list small { font-size: 12px; }

@media (max-width: 950px) {
  .studio-grid { grid-template-columns: minmax(195px, 1fr) minmax(280px, 1.85fr) minmax(205px, 1.05fr); gap: 8px; }
  .panel-top { padding-inline: 8px; }
}
@media (max-width: 742px) {
  .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-panel { grid-column: 1 / -1; grid-row: 1; }
  .stage-panel iframe { height: clamp(330px, 69vw, 420px); }
  .intro { align-items: flex-start; flex-direction: column; }
  .intro h1 { font-size: clamp(38px, 8.5vw, 62px); }
  .intro p { line-height: 1.5; }
  .join-link img { width: 42px; height: 42px; }
}
@media (max-width: 465px) {
  .studio-grid { grid-template-columns: 1fr; }
  .stage-panel { grid-row: auto; }
  .demo-guide { flex-wrap: wrap; }
  .demo-guide > div:nth-child(2) { flex: 1; }
  .demo-button { margin-left: 46px; }
  .lab-label { display: none; }
  .xp-sidebar .qr-link span { font-size: 8px; }
}
@media (max-height: 490px) and (min-width: 760px) {
  .xp-desktop { padding: 8px 6vw 33px; }
  .xp-title { min-height: 25px; }
  .xp-title > svg { width: 24px; height: 24px; }
  .xp-toolbar { min-height: 28px; }
  .xp-toolbar svg { width: 19px; height: 19px; }
  .xp-sidebar { padding: 4px; }
  .xp-avatar { max-width: min(60px, 32cqh); }
  .xp-taskbar { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

.admin-link, #logout { padding: 5px 9px; color: #d8e4fc; border: 1px solid #435272; border-radius: 5px; background: #263552; font-size: 11px; font-weight: 700; }
.admin-link:hover, #logout:hover { background: #35486e; }
body.admin-view { background: radial-gradient(ellipse at top, #243455, #11182c 66%); }
.admin-view .dj-shell { width: min(100%, 1120px); min-height: 100dvh; height: auto; border-inline: 1px solid #2d3b58; }
.admin-view .dj-header, .admin-view .dj-footer { padding: 11px 16px; }
.admin-view .dj-body { flex: 1; padding: 16px; overflow: visible; }
.admin-view .dj-header h1 { font-size: 19px; }
.admin-view .dj-header small { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.admin-view .dj-now-track strong { font-size: 16px; }
.admin-view .queue-row { padding: 11px; }
.admin-view .queue-track strong { font-size: 15px; }
.admin-view .play-button { font-size: 12px; padding: 6px 9px; }
.admin-view #dj-lock { margin: 24px auto; }
.admin-view .feedback { position: fixed; inset: auto 16px 16px auto; width: min(380px, calc(100vw - 32px)); }
.admin-tools { padding: 14px; margin-bottom: 12px; background: #1c2945; border: 1px solid #405474; border-radius: 9px; }
.admin-event { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-event h2 { margin: 3px 0 0; color: #eef4ff; font-size: clamp(19px, 4vw, 27px); overflow-wrap: anywhere; }
.admin-kicker { margin: 0; color: #c7f07e; font: 700 10px var(--mono); letter-spacing: .1em; }
.admin-picker { display: grid; min-width: min(100%, 210px); gap: 4px; }
.admin-tools label { color: #bbcbe9; font-size: 11px; font-weight: 700; }
.admin-tools select, .admin-tools input, .admin-tools textarea { min-width: 0; width: 100%; padding: 8px; color: #eff3ff; background: #15203a; border: 1px solid #4b5d7d; border-radius: 6px; font: inherit; font-size: 13px; }
.admin-launch { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.admin-launch a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 8px; color: #d9e7ff; background: #293d63; border: 1px solid #4a6089; border-radius: 6px; font-size: 12px; font-weight: 700; }
.admin-launch a:hover { background: #364e78; }
.admin-launch svg { width: 14px; height: 14px; }
.admin-launch svg:last-child { width: 11px; height: 11px; color: #aec4f2; }
.admin-launch img { width: 18px; height: 18px; background: white; }
.admin-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-settings details { padding: 8px; border: 1px solid #3d4c6c; border-radius: 6px; background: #18233b; font-size: 12px; }
.admin-settings summary { color: #d7e4fd; cursor: pointer; font-weight: 700; }
.admin-settings form { display: grid; gap: 6px; margin-top: 10px; }
.admin-settings textarea { resize: vertical; }
.admin-settings button { justify-self: start; padding: 7px 9px; color: #253414; background: #d1f882; border: 1px solid #bae76a; border-radius: 5px; font-size: 11px; font-weight: 800; }
.admin-view .booth-queue { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 13px; }
.admin-view .moderation-panel { margin-top: 0; }
.review-item small { display: block; margin-bottom: 5px; color: #ffe0a2; }
@media (max-width: 560px) {
  .admin-settings, .admin-view .booth-queue { grid-template-columns: 1fr; }
  .admin-picker { width: 100%; }
}