:root {
  --brand-primary: #006EFF;
  --brand-accent: #FFFFFF;
  --green: #54f58d;
  --red: #ff5c72;
  --white: #f8fafc;
  --muted: #a9afba;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; color: #fff; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { cursor: none; }
body.cursor-visible { cursor: default; }
button { font: inherit; }
.hidden { display: none !important; }
.display-root, .scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.scene { background: #000; }

.fullscreen-button { position: fixed; right: 18px; bottom: 18px; z-index: 1000; min-height: 42px; padding: 0 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(12,13,17,.82); color: rgba(255,255,255,.8); font-size: 12px; cursor: pointer; backdrop-filter: blur(14px); transition: opacity .25s; }
body:not(.cursor-visible) .fullscreen-button { opacity: 0; pointer-events: none; }
.connection-warning { position: fixed; top: 17px; left: 50%; z-index: 1100; transform: translate(-50%, -20px); padding: 9px 13px; border: 1px solid rgba(251,191,36,.25); border-radius: 999px; background: rgba(20,18,11,.9); color: #fcd34d; font-size: 10px; font-weight: 800; letter-spacing: .08em; opacity: 0; transition: .25s; pointer-events: none; }
.connection-warning.show { transform: translate(-50%, 0); opacity: 1; }

.display-brand { position: relative; z-index: 2; min-height: 14vh; padding: 2.5vh 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
.display-brand-lockup { display: flex; align-items: center; gap: 1.2vw; min-width: 0; }
.display-brand-lockup img { width: clamp(48px, 4.8vw, 92px); height: clamp(48px, 4.8vw, 92px); border-radius: 22%; object-fit: contain; background: rgba(15,16,20,.86); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.display-brand-lockup strong, .display-brand-lockup span { display: block; }
.display-brand-lockup strong { max-width: 54vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(19px, 2vw, 38px); letter-spacing: -.035em; }
.display-brand-lockup span { margin-top: .5vh; color: var(--muted); font-size: clamp(10px, .92vw, 18px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.header-clock { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(24px, 3.1vw, 60px); font-weight: 750; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }

.timer-scene { display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--brand-primary) 32%, transparent), transparent 35%), linear-gradient(150deg, #08090c 0%, #111218 56%, #07080b 100%); }
.timer-scene::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px); background-size: 55px 55px; mask-image: radial-gradient(circle at center, #000 0%, transparent 72%); }
.timer-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2vh 4vw 5vh; text-align: center; }
.scene-eyebrow { color: var(--brand-accent); font-size: clamp(15px, 1.4vw, 27px); font-weight: 900; letter-spacing: .25em; }
.main-timer { margin-top: 3vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(115px, 22vw, 430px); font-weight: 800; line-height: .82; letter-spacing: -.09em; font-variant-numeric: tabular-nums; color: var(--green); text-shadow: 0 0 60px rgba(84,245,141,.14); transform: translateX(-.04em); }
.main-timer.overtime { color: var(--red); text-shadow: 0 0 70px rgba(255,92,114,.2); }
.timer-status-line { margin-top: 4.2vh; padding: 1.1vh 1.5vw; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); font-size: clamp(10px, .9vw, 18px); font-weight: 800; letter-spacing: .16em; }
.display-footer { position: relative; z-index: 2; min-height: 10vh; padding: 0 4vw; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid rgba(255,255,255,.08); color: var(--muted); font-size: clamp(11px, 1vw, 20px); font-weight: 750; letter-spacing: .12em; }
.display-footer span:nth-child(2) { text-align: center; color: var(--white); }
.display-footer span:last-child { text-align: right; color: var(--brand-accent); }

.clock-scene { display: flex; flex-direction: column; background: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--brand-primary) 34%, transparent), transparent 38%), #07080a; }
.display-brand-centered { justify-content: center; border: 0; }
.clock-center { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 10vh; }
.main-clock { margin-top: 3vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(120px, 21vw, 410px); font-weight: 800; line-height: .85; letter-spacing: -.095em; font-variant-numeric: tabular-nums; transform: translateX(-.04em); }
.long-date { margin-top: 5vh; color: var(--muted); font-size: clamp(20px, 2.2vw, 44px); font-weight: 700; letter-spacing: .08em; }
.clock-accent-line { position: absolute; left: 17vw; right: 17vw; bottom: 10vh; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-accent), transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--brand-accent) 50%, transparent); }

.stage-scene { display: grid; grid-template-rows: auto 1fr; background: #050608; }
.stage-rail { position: relative; z-index: 20; min-height: 15vh; padding: 1.4vh 2.2vw; display: flex; align-items: center; justify-content: space-between; gap: 2vw; border-bottom: 1px solid rgba(255,255,255,.11); background: linear-gradient(180deg,#111318,#08090c); box-shadow: 0 18px 45px rgba(0,0,0,.42); }
.stage-brand { min-width: 0; display: flex; align-items: center; gap: 1vw; }
.stage-brand img { width: clamp(42px, 4.1vw, 80px); height: clamp(42px, 4.1vw, 80px); object-fit: contain; border-radius: 19%; background: #111318; }
.stage-brand strong, .stage-brand span { display: block; }
.stage-brand strong { max-width: 38vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(16px, 1.7vw, 32px); }
.stage-brand span { margin-top: .45vh; color: var(--brand-accent); font-size: clamp(8px, .75vw, 15px); font-weight: 900; letter-spacing: .17em; }
.stage-metrics { display: flex; align-items: stretch; gap: .7vw; }
.metric { min-width: clamp(135px, 13vw, 250px); min-height: 10vh; padding: 1.1vh 1.2vw; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.1); border-radius: 1.2vw; background: rgba(255,255,255,.035); }
.metric span { color: var(--muted); font-size: clamp(8px, .65vw, 13px); font-weight: 900; letter-spacing: .15em; }
.metric strong { margin-top: .35vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(24px, 3.1vw, 60px); line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.timer-metric strong { color: var(--green); }
.timer-metric strong.overtime { color: var(--red); }

.setlist-stage-area { position: relative; min-height: 0; padding: 3.2vh 3.4vw 2.4vh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 2vh; overflow: hidden; background: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--brand-primary) 23%, transparent), transparent 26%), linear-gradient(145deg,#07080a,#0d0f14 56%,#050608); }
.setlist-stage-area::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at center,#000,transparent 80%); }
.stage-block-heading { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 2vw; }
.stage-block-heading > div:first-child { min-width: 0; }
.stage-block-index { display: block; color: var(--brand-accent); font-size: clamp(11px,1vw,20px); font-weight: 950; letter-spacing: .22em; }
.stage-block-heading h1 { margin: .6vh 0 0; max-width: 72vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(48px,6.2vw,118px); line-height: .95; letter-spacing: -.055em; }
.stage-live-indicator { flex: 0 0 auto; min-height: 4.5vh; padding: 0 1vw; display: flex; align-items: center; gap: .6vw; border: 1px solid rgba(84,245,141,.18); border-radius: 999px; color: #8bf6ae; background: rgba(84,245,141,.06); font-size: clamp(8px,.7vw,14px); font-weight: 900; letter-spacing: .14em; }
.stage-live-indicator i { width: clamp(6px,.5vw,10px); height: clamp(6px,.5vw,10px); border-radius: 50%; background: var(--green); box-shadow: 0 0 18px rgba(84,245,141,.75); }
.stage-song-list { position: relative; z-index: 2; min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(0,1fr); gap: clamp(9px,1vw,18px); align-content: stretch; }
.stage-song-list[data-count="1"], .stage-song-list[data-count="2"], .stage-song-list[data-count="3"], .stage-song-list[data-count="4"], .stage-song-list[data-count="5"], .stage-song-list[data-count="6"] { grid-template-columns: 1fr; }
.stage-song-list.dense { grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(7px,.75vw,13px); }
.stage-song-item { min-width: 0; min-height: 0; padding: 1.05vh 1.25vw; display: flex; align-items: center; gap: 1.15vw; border: 1px solid rgba(255,255,255,.11); border-radius: clamp(12px,1.15vw,23px); background: linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 28px rgba(0,0,0,.18); }
.stage-song-item span { flex: 0 0 auto; width: clamp(34px,3vw,58px); color: var(--brand-accent); font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size: clamp(14px,1.45vw,28px); font-weight: 850; opacity: .72; }
.stage-song-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(25px,3.15vw,61px); line-height: 1.05; letter-spacing: -.035em; }
.stage-song-list.compact .stage-song-item strong { font-size: clamp(21px,2.45vw,47px); }
.stage-song-list.dense .stage-song-item { padding: .8vh .9vw; gap: .8vw; }
.stage-song-list.dense .stage-song-item span { width: clamp(28px,2.2vw,42px); font-size: clamp(11px,1vw,20px); }
.stage-song-list.dense .stage-song-item strong { font-size: clamp(17px,1.8vw,35px); }
.stage-song-empty { grid-column: 1/-1; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.14); border-radius: 24px; color: var(--muted); font-size: clamp(18px,2vw,38px); font-weight: 650; }
.stage-next-block { position: relative; z-index: 2; min-height: 6vh; padding-top: 1.7vh; display: flex; align-items: center; justify-content: space-between; gap: 2vw; border-top: 1px solid rgba(255,255,255,.09); }
.stage-next-block span { color: var(--muted); font-size: clamp(9px,.75vw,15px); font-weight: 900; letter-spacing: .18em; }
.stage-next-block strong { max-width: 65vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brand-accent); font-size: clamp(16px,1.7vw,32px); letter-spacing: -.02em; }

.blank-scene { background: #000; }

.artist-message { position: fixed; left: 50%; bottom: 5vh; z-index: 500; width: min(1180px, 88vw); min-height: 13vh; transform: translate(-50%, 30px); padding: 2.2vh 2vw; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.6vw; border: 2px solid rgba(96,165,250,.7); border-radius: clamp(16px, 1.5vw, 28px); background: rgba(8,17,31,.95); box-shadow: 0 24px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(16px); animation: messageIn .35s ease forwards; }
@keyframes messageIn { to { transform: translate(-50%,0); } }
.message-priority { display: flex; align-items: center; gap: .65vw; color: #93c5fd; font-size: clamp(9px, .8vw, 15px); font-weight: 950; letter-spacing: .16em; writing-mode: vertical-rl; transform: rotate(180deg); }
.message-priority i { width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 18px rgba(96,165,250,.8); }
.message-display-text { white-space: pre-line; font-size: clamp(23px, 3vw, 58px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-align: center; }
.message-brand { color: rgba(255,255,255,.35); font-size: clamp(8px, .7vw, 13px); font-weight: 900; letter-spacing: .14em; }
.artist-message.attention { border-color: rgba(251,191,36,.78); background: rgba(35,26,7,.96); }
.artist-message.attention .message-priority { color: #fcd34d; }
.artist-message.attention .message-priority i { background: #fbbf24; box-shadow: 0 0 20px rgba(251,191,36,.9); }
.artist-message.urgent { border-color: rgba(255,92,114,.9); background: rgba(38,7,13,.97); animation: messageIn .35s ease forwards, urgentPulse 1.25s infinite 1s; }
.artist-message.urgent .message-priority { color: #fda4af; }
.artist-message.urgent .message-priority i { background: #ff5c72; box-shadow: 0 0 20px rgba(255,92,114,.95); }
@keyframes urgentPulse { 50% { box-shadow: 0 24px 90px rgba(0,0,0,.65), 0 0 45px rgba(255,92,114,.28), inset 0 1px 0 rgba(255,255,255,.1); } }

.is-preview .fullscreen-button, .is-preview .connection-warning { display: none !important; }
.is-preview { cursor: default; }
.is-preview .display-brand-lockup img { border-radius: 18%; }

@media (max-aspect-ratio: 4/3) {
  .main-timer { font-size: clamp(90px, 19vw, 300px); }
  .main-clock { font-size: clamp(95px, 18vw, 300px); }
  .stage-rail { min-height: 14vh; }
}

/* Resposta adaptativa para monitor, tablet e consulta móvel */
@media (max-width: 700px) and (orientation: portrait) {
  .display-brand { min-height: 11vh; padding: 1.6vh 4vw; }
  .display-brand-lockup img { width: 44px; height: 44px; }
  .display-brand-lockup strong { max-width: 48vw; font-size: 17px; }
  .header-clock { font-size: 25px; }
  .main-timer { font-size: clamp(76px, 24vw, 150px); }
  .main-clock { font-size: clamp(78px, 23vw, 145px); }
  .long-date { padding-inline: 5vw; font-size: 16px; text-align: center; }
  .display-footer { padding-inline: 3vw; font-size: 9px; letter-spacing: .06em; }

  .stage-scene { display: block; overflow-y: auto; }
  .stage-rail { min-height: auto; padding: 12px 14px; display: grid; grid-template-columns: 1fr; gap: 10px; position: sticky; top: 0; }
  .stage-brand strong { max-width: 62vw; font-size: 16px; }
  .stage-metrics { width: 100%; gap: 7px; }
  .metric { min-width: 0; min-height: 58px; flex: 1 1 0; border-radius: 10px; }
  .metric strong { font-size: 26px; }
  .setlist-stage-area { min-height: calc(100vh - 145px); padding: 20px 14px; overflow: visible; gap: 14px; }
  .stage-block-heading { gap: 8px; }
  .stage-block-heading h1 { max-width: 100%; white-space: normal; font-size: 38px; }
  .stage-live-indicator { display: none; }
  .stage-song-list, .stage-song-list.dense, .stage-song-list[data-count="1"], .stage-song-list[data-count="2"], .stage-song-list[data-count="3"], .stage-song-list[data-count="4"], .stage-song-list[data-count="5"], .stage-song-list[data-count="6"] { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .stage-song-item, .stage-song-list.dense .stage-song-item { min-height: 52px; padding: 10px 12px; border-radius: 12px; }
  .stage-song-item strong, .stage-song-list.compact .stage-song-item strong, .stage-song-list.dense .stage-song-item strong { white-space: normal; font-size: 20px; }
  .stage-next-block { min-height: 55px; }
  .stage-next-block strong { max-width: 62vw; font-size: 17px; }
  .artist-message { width: 92vw; min-height: 110px; bottom: 3vh; padding: 14px; grid-template-columns: auto 1fr; }
  .message-brand { display: none; }
  .message-display-text { font-size: 23px; }
}