/* DOXA · sistema visual
   Prioridade: clareza > velocidade > confiabilidade > usabilidade > estética.
   Cor tem significado fixo: dourado = ação principal e item atual; verde = tocando;
   âmbar = algo preparado/loop; vermelho = perigo ou mute; azul = foco do teclado. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  color-scheme: dark;
  --bg: #0b0e14;
  --surface: #131924;
  --surface-2: #19212e;
  --surface-3: #212b3b;
  --line: #2a3446;
  --line-soft: #1f2836;
  --text: #eef1f6;
  --dim: #9aa6b8;
  --faint: #6c7789;
  --gold: #e6be63;
  --gold-rgb: 229, 184, 92;
  --gold-strong: #f3cf7c;
  --gold-ink: #231b0a;
  --gold-wash: #2c2515;
  --green: #5fd49a;
  --green-wash: #12301f;
  --amber: #f4a940;
  --amber-wash: #33240c;
  --red: #ff7a6b;
  --red-wash: #3a1713;
  --focus: #7cc4ff;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: 14px;
  --top: 60px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 0; background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, summary { font: inherit; }
button, input, select { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: inherit; padding: 10px 13px; }
button { cursor: pointer; font-weight: 650; letter-spacing: .005em; transition: background .12s ease, border-color .12s ease; touch-action: manipulation; }
button:hover:not(:disabled) { border-color: #4a5870; background: var(--surface-3); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button.gold { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
button.gold:hover:not(:disabled) { background: var(--gold-strong); border-color: var(--gold-strong); }
button.gold:disabled { opacity: 1; color: var(--dim); background: transparent; border-color: var(--line); }
button.quiet { background: transparent; border-color: transparent; color: var(--dim); }
button.quiet:hover:not(:disabled) { color: var(--text); background: var(--surface-2); border-color: var(--line); }
button.danger { color: var(--red); border-color: #5a2a24; background: transparent; }
button.danger:hover:not(:disabled) { color: #ffd2cc; background: var(--red-wash); border-color: var(--red); }
button.small { min-height: 34px; padding: 6px 10px; font-size: .84rem; }
button[aria-pressed="true"] { background: var(--gold-wash); color: #ffe3a3; border-color: #7d6534; }
a { color: var(--focus); }
label { display: grid; gap: 6px; color: var(--dim); font-size: .88rem; }
input, select { width: 100%; background: #0f141d; }
input[type="range"] { accent-color: var(--gold); height: 30px; min-height: 30px; padding: 0; background: transparent; border: 0; }
input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; letter-spacing: -.025em; overflow-wrap: anywhere; }
h2 { margin-bottom: 10px; font-size: 1.08rem; letter-spacing: -.01em; }
h3 { font-size: .98rem; margin-bottom: 8px; }
p { line-height: 1.5; }
small, .subtle { color: var(--dim); font-size: .84rem; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { display: block; margin-bottom: 4px; color: var(--gold); font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.empty { color: var(--dim); padding: 18px 0; margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Barra superior: marca, áreas, estado do sistema, conta ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; min-height: var(--top); padding: calc(8px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line-soft); background: #0b0e14f2; backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-size: 1.05rem; font-weight: 800; letter-spacing: .18em; }
.tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-soft); border-radius: 12px; background: #0f141d; }
.tabs button { min-height: 36px; padding: 6px 15px; border: 0; border-radius: 9px; background: transparent; color: var(--dim); font-weight: 600; }
.tabs button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border: 0; }
.tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.tabs .tab-live[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--green); }
body.is-playing .tabs .tab-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.system { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.system-pill, .action-state { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); background: #0f141d; font-size: .7rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.system-pill.is-player { color: #ffe3a3; border-color: #5b4a26; }
.system-pill.is-offline { color: var(--red); border-color: #5a2a24; }
.remote-open { min-height: 32px; padding: 4px 12px; border: 1px solid var(--line) !important; color: var(--text) !important; }
#identity { color: var(--faint); font-size: .8rem; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account-toggle { min-height: 34px; padding: 5px 12px; }

/* Aviso: flutua, não empurra a tela; informações somem sozinhas, erros ficam. */
#notice { position: fixed; z-index: 40; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: min(620px, calc(100vw - 32px)); margin: 0; padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; background: #1a2230f7; color: var(--text); font-size: .9rem; box-shadow: 0 14px 40px #000a; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; overflow-wrap: anywhere; }
#notice.is-visible, #notice.error { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
#notice.error { border-color: #7a3229; background: #2b1411f7; color: #ffd2cc; }
#notice:empty { display: none; }

main { max-width: 1680px; margin: 0 auto; padding: 18px max(18px, env(safe-area-inset-right)) 90px max(18px, env(safe-area-inset-left)); }
.panel { min-width: 0; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.page-head { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; }
.page-head > div:first-child { margin-right: auto; }
.page-head h1 { margin: 0; }
.page-head p { margin: 6px 0 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.inline-title { display: flex; align-items: baseline; gap: 10px; }
.inline-title small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; }

/* ---------- Conta ---------- */
.account-card { max-width: 480px; margin: 6vh auto 24px; }
#login { display: grid; gap: 14px; }

/* ---------- Cultos ---------- */
.create-show { display: flex; gap: 8px; width: min(520px, 100%); }
.create-show input { flex: 1; }
.show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); margin: 0 0 22px; }
.show-card { display: grid; gap: 10px; align-content: space-between; min-height: 140px; }
.show-card h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.show-card p { margin: 0; color: var(--dim); font-size: .88rem; }
.show-card .actions button:first-child { min-width: 104px; }
.show-card .actions .danger { margin-left: auto; }
.playback-mode { margin-bottom: 22px; }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-option { display: grid; align-content: start; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #0f141d; }
.mode-option.is-selected { border-color: #5b4a26; }
.mode-option p { margin: 0; color: var(--dim); font-size: .86rem; }
.mode-option .system-pill { justify-self: start; }
body.is-mac-player .playback-mode { display: none; }
.library-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: var(--gap); align-items: start; }
.library-side { display: grid; gap: var(--gap); }
#cloud-song-list { display: grid; gap: 8px; margin-top: 10px; }
.cloud-song { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0f141d; }
.cloud-song strong, .cloud-song small { display: block; overflow-wrap: anywhere; }
.cloud-song small { margin-top: 3px; }
.cloud-song button { min-height: 34px; padding: 6px 10px; font-size: .82rem; color: var(--red); background: transparent; border-color: #5a2a24; }
.compact-grid { grid-template-columns: 1fr; margin: 8px 0 0; }
.study-library-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0f141d; }
.study-library-card h3, .study-library-card p { margin: 0; overflow-wrap: anywhere; }
.study-library-card p { margin-top: 4px; color: var(--dim); font-size: .84rem; }
.storage-card { display: grid; gap: 8px; }
.storage-card progress { width: 100%; height: 10px; accent-color: var(--gold); }
.storage-card .subtle { display: block; }
.offline-song-state { display: block; margin: 10px 0 0; color: var(--dim); font-size: .8rem; }

/* ---------- Equipe ---------- */
.team-profile { display: grid; gap: 4px; margin-bottom: var(--gap); }
.team-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: var(--gap); align-items: start; }
.team-form { display: grid; gap: 14px; }
.team-form fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.team-form legend { padding: 0 6px; color: var(--dim); font-size: .84rem; }
.team-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.team-options label { display: flex; align-items: center; gap: 8px; min-height: 36px; color: inherit; }
.team-options input { flex: none; margin: 0; }
.team-list { display: grid; gap: 8px; }
.team-member { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0f141d; }
.team-member-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.team-member strong, .team-member span, .team-member small { display: block; overflow-wrap: anywhere; }
.team-member span { margin-top: 3px; color: #dfe5ee; }
.team-member small { margin-top: 4px; }
.team-member .actions { justify-content: end; }
.team-status { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: .7rem; }
.team-status.is-active { color: var(--green); border-color: #2c5a41; }
.team-status.is-pending { color: var(--amber); border-color: #6a4a1c; }
.team-status.is-expired { color: var(--red); border-color: #5a2a24; }

/* ---------- Ao vivo ----------
   Desktop: setlist fixo à esquerda; à direita a operação em ordem de uso:
   música + estado + posição, seção atual → próxima, transporte, seções, pads, mixer. */
.stage-grid { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); grid-template-areas: "setlist performance" "setlist sections" "setlist chart" "setlist pads" "setlist mixer"; gap: var(--gap); align-items: start; }
.set-order { grid-area: setlist; position: sticky; top: calc(var(--top) + 12px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; max-height: calc(100vh - var(--top) - 30px); padding: 14px; }
.performance { grid-area: performance; padding: 18px 20px 16px; }
.sections { grid-area: sections; }
.pad-panel { grid-area: pads; }
.mixer { grid-area: mixer; }
.live-show strong { display: block; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.setlist { display: grid; align-content: start; gap: 6px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.setlist-foot { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.song-button { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 8px 10px; text-align: left; background: transparent; border-color: var(--line-soft); }
.song-number { color: var(--faint); font-size: .76rem; font-variant-numeric: tabular-nums; }
.song-copy { min-width: 0; }
.song-copy strong, .song-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-copy strong { font-size: .95rem; }
.song-copy small { margin-top: 2px; font-size: .76rem; }
.song-state { font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: var(--dim); }
.song-button.is-current { border-color: var(--gold); background: var(--gold-wash); }
.song-button.is-current .song-state { color: var(--gold-strong); }
.setlist.is-playing .song-button.is-current { border-color: var(--green); background: var(--green-wash); }
.setlist.is-playing .song-button.is-current .song-state { color: var(--green); }
.song-button.is-next { border-color: #34465e; }
.song-button.is-next .song-state { color: #9fd0ff; }
.song-button.is-past:not(.is-current) { opacity: .5; }

.now-row { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.now-playing { min-width: 0; }
.now-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.now-playing h1 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.04; }
.now-playing #song-detail { margin: 6px 0 0; color: var(--dim); font-size: .95rem; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status-pill.is-live { color: #c8f6dc; border-color: #2c6a49; background: var(--green-wash); }
.status-pill.is-live::before { background: var(--green); box-shadow: 0 0 0 4px #5fd49a2b; }
.status-pill.is-paused { color: #ffe0b0; border-color: #6a4a1c; background: var(--amber-wash); }
.status-pill.is-paused::before { background: var(--amber); }
.clock { display: grid; justify-items: end; flex: none; font-variant-numeric: tabular-nums; }
.clock strong { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.clock span { color: var(--dim); font-size: .9rem; margin-top: 4px; }
.clock small { color: var(--faint); font-size: .8rem; }

.timeline { position: relative; margin: 14px 0 24px; }
progress { display: block; width: 100%; height: 12px; margin: 0; border: 0; accent-color: var(--gold); }
progress::-webkit-progress-bar { border-radius: 99px; background: #070a0f; }
progress::-webkit-progress-value { border-radius: 99px; background: var(--gold); }
.timeline #timeline-markers { position: absolute; inset: -3px 0 auto; height: 18px; pointer-events: none; }
.timeline-marker { position: absolute; top: 0; width: 2px; height: 18px; border-radius: 2px; background: #c9d4e2bb; transform: translateX(-1px); }
.timeline-marker::after { content: attr(data-label); position: absolute; top: 20px; left: 3px; max-width: 12ch; overflow: hidden; color: var(--faint); font-size: .66rem; white-space: nowrap; text-overflow: ellipsis; }

.section-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0f141d; }
.section-strip span { display: block; color: var(--dim); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.section-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1.15rem, 2vw, 1.55rem); }
.strip-now strong { color: var(--gold-strong); }
.strip-next { text-align: right; }
.strip-next strong { color: #cfe2f7; }
.strip-arrow { color: var(--faint); font-size: 1.4rem; }
/* Linha reservada: avisos de loop/salto aparecem sem deslocar o transporte. */
.strip-pending { grid-column: 1 / -1; min-height: 1.35em; margin: 0; color: var(--dim); font-size: .86rem; line-height: 1.35; }
.section-strip.is-queued { border-color: #8a5f1c; background: var(--amber-wash); }
.section-strip.is-queued .strip-pending, .section-strip.is-queued .strip-next strong { color: #ffd59a; }
.section-strip.is-looping { border-color: #8a5f1c; }
.section-strip.is-looping .strip-pending { color: var(--amber); font-weight: 700; }

.transport { display: grid; gap: 8px; }
.primary-transport { grid-template-columns: 1fr 2fr 1fr 1fr; }
.transport button { min-height: 64px; padding: 8px; font-size: 1.02rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.transport .transport-primary { font-size: 1.15rem; }
body.is-playing #play-pause { background: var(--surface-3); color: var(--text); border-color: #4a5870; }
#stop:not(:disabled):hover { border-color: var(--red); }
.live-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr minmax(220px, 1.4fr); gap: 8px; margin-top: 8px; align-items: stretch; }
.live-actions > button { min-height: 52px; }
#repeat[aria-pressed="true"] { color: #2a1a04; border-color: var(--amber); background: var(--amber); }
.action-state { grid-column: 1 / -1; justify-self: start; color: #ffe0b0; border-color: #6a4a1c; background: var(--amber-wash); }
.transpose-panel { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0f141d; }
.transpose-panel > span { color: var(--dim); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.transpose-live { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; align-items: center; }
.transpose-live button { min-height: 42px; padding: 4px; font-size: 1.3rem; }
.transpose-live strong { text-align: center; font-size: 1.05rem; color: #ffe3a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.performance-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.next-up { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.next-up span { color: var(--dim); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.next-up strong { overflow-wrap: anywhere; }
.secondary-controls > summary { color: var(--dim); cursor: pointer; font-size: .84rem; }
.secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 10px; min-width: 320px; }

.change-time { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.change-time select { width: auto; min-height: 38px; padding: 6px 10px; }
.cue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.cue-button { display: grid; align-content: center; gap: 2px; min-height: 60px; padding: 8px 12px; text-align: left; background: #0f141d; }
.cue-button strong { overflow-wrap: anywhere; font-size: .98rem; }
.cue-button small { color: var(--faint); font-size: .74rem; font-variant-numeric: tabular-nums; }
.cue-button.is-current { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }
.cue-button.is-current small { color: #5b4719; }
.cue-button.is-queued { border-color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.section-actions { margin-top: 10px; }
.section-actions button { color: var(--amber); border-color: #6a4a1c !important; }

#pad-state { color: var(--faint); }
#pad-state.is-on { color: var(--green); }
.pad-volume { width: min(260px, 100%); font-size: .8rem; }
#pad-keys { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
#pad-keys button { min-height: 52px; padding: 6px 2px; font-size: .92rem; }
#pad-keys button[aria-pressed="true"] { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }
.pad-settings { margin-top: 8px; }
.pad-settings > summary, .guide-mix > summary { min-height: 34px; padding-top: 6px; color: var(--dim); cursor: pointer; font-size: .84rem; }
.aux-controls { display: grid; gap: 12px; margin: 10px 0; }
.pad-settings .aux-controls { grid-template-columns: 1fr 1fr; align-items: end; }

.mixer-heading { margin-bottom: 0; }
#mixer-content { margin-top: 12px; }
.mixer-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.batch-routing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.batch-routing strong { min-width: 140px; color: var(--dim); font-size: .78rem; }
.batch-routing button { min-height: 34px; padding: 5px 10px; font-size: .84rem; }
.guide-mix { padding: 6px 12px; margin-bottom: 10px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0f141d; }
.guide-mix p { margin: 6px 0 0; }
.guide-controls { grid-template-columns: repeat(4, minmax(140px, 1fr)); align-items: end; }
/* Canais em faixas compactas: nome · mute/solo · volume · pan · saída · ordem */
#channel-list .channel-grid { display: grid; gap: 6px; }
#channel-list .channel { display: grid; grid-template-columns: minmax(150px, 1.1fr) auto minmax(150px, 1.6fr) minmax(170px, 1.6fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0f141d; }
#channel-list .channel.is-selected { border-color: #7d6534; }
#channel-list .channel.is-muted { opacity: .55; }
#channel-list .channel.is-solo { border-color: var(--gold); }
#channel-list .channel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin: 0; }
#channel-list .channel-head h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
#channel-list .channel-pick { display: flex; min-width: 0; align-items: center; gap: 8px; color: inherit; }
#channel-list .channel-pick input { flex: none; margin: 0; }
#channel-list .channel-state { flex: none; color: var(--green); font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
#channel-list .channel.is-muted .channel-state { color: var(--red); }
#channel-list .channel.is-solo .channel-state { color: var(--gold-strong); }
#channel-list .channel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
#channel-list .channel-actions button { min-height: 38px; padding: 4px 12px; font-size: .84rem; }
#channel-list .channel-actions button:first-child[aria-pressed="true"] { color: #2b0c08; border-color: var(--red); background: var(--red); }
#channel-list .channel-actions button:last-child[aria-pressed="true"] { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }
#channel-list .channel-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-column: 3 / 5; }
#channel-list .channel-sliders label { font-size: .74rem; gap: 0; }
#channel-list .channel-route { display: flex; align-items: center; gap: 6px; font-size: .74rem; }
#channel-list .channel-route select { min-height: 36px; padding: 4px 8px; font-size: .84rem; }
#channel-list .channel > .channel-route { grid-column: 5; }
#channel-list .channel-more { display: flex; gap: 4px; grid-column: 6; }
#channel-list .channel-more button { min-height: 34px; width: 34px; padding: 0; color: var(--dim); }
#channel-list .channel { grid-template-columns: minmax(150px, 1.1fr) auto minmax(300px, 3.2fr) 0 minmax(150px, 1fr) auto; }


/* ---------- Componentes compartilhados com Remote e Modo Estudo ---------- */
.eyebrow { display: block; margin-bottom: 4px; color: var(--gold); font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.heading h2 { margin: 0; }
.live-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.live-heading > div:first-child { min-width: 0; }
.time { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 8px; color: var(--dim); font-size: .9rem; font-variant-numeric: tabular-nums; }
.live-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: center; margin-bottom: var(--gap); }
.live-show span, .live-song-summary span, .live-song-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-song-summary span { font-size: 1.2rem; font-weight: 750; }
.live-indicators { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.section-glance { min-width: 130px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: #0f141d; text-align: right; }
.section-glance span { display: block; color: var(--dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.section-glance strong { color: var(--gold-strong); font-size: 1.1rem; }
.performance-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.performance-lower .next-up { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0f141d; }
.setlist { display: grid; align-content: start; gap: 6px; }
.channel { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0f141d; }
.channel.is-muted { opacity: .55; }
.channel.is-solo { border-color: var(--gold); }
.channel.is-selected { border-color: #7d6534; }
.channel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.channel-head h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
.channel-pick { display: flex; min-width: 0; align-items: center; gap: 8px; color: inherit; }
.channel-state { flex: none; color: var(--green); font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.channel.is-muted .channel-state { color: var(--red); }
.channel.is-solo .channel-state { color: var(--gold-strong); }
.channel-grid { display: grid; gap: 8px; }

/* ---------- Preparar ---------- */
.publish-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: var(--gap); align-items: start; }
.publish-grid form { display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--top) + 12px); max-height: calc(100vh - var(--top) - 30px); overflow-y: auto; }
.editor { border-bottom: 1px solid var(--line-soft); padding: 4px 0 10px; }
.editor:last-child { border-bottom: 0; }
.editor > summary { min-height: 46px; padding: 12px 4px; cursor: pointer; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.editor[open] > summary { color: var(--gold-strong); }
.editor label { margin-bottom: 10px; }
.editor .actions { margin: 12px 0; }
.editor .actions button:last-child { color: var(--red); border-color: #5a2a24; background: transparent; }
.cue-edit { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto auto; gap: 8px; align-items: center; }
.cue-edit > * { min-width: 0; }
.cue-guide-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(170px, 1fr) auto; gap: 8px; align-items: center; margin: 6px 0; }
.cue-guide-row span { overflow-wrap: anywhere; }
.tempo-map-editor { display: grid; gap: 8px; margin: 10px 0; }
.als-import { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #0f141d; }
.als-import summary { min-height: 34px; cursor: pointer; color: var(--dim); }
.als-import[open] summary { color: var(--text); }
.als-import label, .als-import button { margin-top: 10px; }
.als-confirm { display: flex; align-items: center; gap: 10px; }
.als-confirm input { flex: none; }
.als-warning { color: #ffd59a; }
#als-preview { margin-top: 10px; overflow-wrap: anywhere; }
#als-preview ul { max-height: 230px; overflow: auto; padding-left: 22px; }

/* ---------- Diálogos ---------- */
.conflict-dialog { width: min(560px, calc(100vw - 28px)); padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; }
.conflict-dialog::backdrop { background: #05070bdd; backdrop-filter: blur(3px); }
.conflict-dialog h2 { margin-top: 0; font-size: 1.25rem; }
.conflict-dialog h3 { margin: 16px 0 8px; color: var(--dim); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.conflict-actions { display: grid; gap: 8px; margin-top: 14px; }
.share-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.dialog-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.study-share-dialog { width: min(620px, calc(100vw - 24px)); }
.study-share-dialog input { width: 100%; }
.study-recipient-list { display: grid; gap: 8px; max-height: 230px; overflow: auto; margin: 6px 0 10px; }
.study-recipient-list:empty { display: none; }
.study-recipient { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0f141d; color: inherit; }
.study-recipient input { flex: none; margin: 0; }
.study-recipient span, .study-recipient strong, .study-recipient small { display: block; }
.study-recipient small { margin-top: 2px; }
.remote-dialog { width: min(640px, calc(100vw - 24px)); }
.mac-remote-share { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; align-items: center; }
.mac-remote-share p { color: var(--dim); }
.mac-remote-share label { margin-bottom: 10px; }
.mac-remote-share img { width: 200px; height: 200px; padding: 10px; border-radius: 10px; background: white; image-rendering: pixelated; }

/* ---------- Telas intermediárias ---------- */
@media (max-width: 1180px) {
  .stage-grid { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); }
  .live-actions { grid-template-columns: repeat(3, 1fr); }
  .transpose-panel { grid-column: 1 / -1; }
  #channel-list .channel { grid-template-columns: minmax(130px, 1fr) auto minmax(220px, 2.4fr) 0 minmax(130px, 1fr) auto; }
  #pad-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .library-grid, .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .top { flex-wrap: wrap; gap: 10px; }
  .tabs { order: 3; width: 100%; }
  .tabs button { flex: 1; }
  #identity { display: none; }
  .stage-grid { grid-template-columns: 1fr; grid-template-areas: "performance" "chart" "sections" "setlist" "pads" "mixer"; }
  .set-order { position: static; max-height: none; }
  .setlist { max-height: 360px; }
  .publish-grid { grid-template-columns: 1fr; }
  .publish-grid form { position: static; max-height: none; }
  .mode-options { grid-template-columns: 1fr; }
  #channel-list .channel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head acts" "sliders sliders" "route more"; }
  #channel-list .channel-head { grid-area: head; }
  #channel-list .channel-actions { grid-area: acts; }
  #channel-list .channel-sliders { grid-area: sliders; grid-column: auto; }
  #channel-list .channel > #channel-list .channel-route { grid-area: route; grid-column: auto; }
  #channel-list .channel-more { grid-area: more; grid-column: auto; }
  .guide-controls { grid-template-columns: 1fr 1fr; }
}
/* ---------- Celular ---------- */
@media (max-width: 620px) {
  :root { --top: 52px; }
  /* Sem filtro no cabeçalho: backdrop-filter prenderia a barra fixa de áreas dentro dele. */
  .top { padding-left: 12px; padding-right: 12px; backdrop-filter: none; background: var(--bg); }
  .brand span { display: none; }
  .system { gap: 4px; }
  .system-pill { padding: 3px 8px; font-size: .62rem; }
  /* As áreas viram uma barra inferior, ao alcance do polegar. */
  .tabs { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; order: 0; width: auto; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #0b0e14f7; backdrop-filter: blur(14px); }
  .tabs button { min-height: 44px; padding: 4px; font-size: .84rem; }
  #notice { bottom: calc(76px + env(safe-area-inset-bottom)); }
  main { padding: 12px 12px 110px; }
  .panel { padding: 14px; border-radius: 13px; }
  .page-head { margin-bottom: 12px; }
  .create-show { width: 100%; }
  .show-grid { grid-template-columns: 1fr; }
  .cloud-song { grid-template-columns: 1fr; }
  .team-member { grid-template-columns: 1fr; }
  .team-member .actions { justify-content: start; }
  .now-row { display: grid; gap: 10px; }
  .clock { grid-template-columns: auto auto 1fr; justify-items: start; align-items: baseline; gap: 8px; }
  .clock small { justify-self: end; }
  .now-playing h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .timeline-marker::after { display: none; }
  .timeline { margin-bottom: 14px; }
  .primary-transport { grid-template-columns: 1fr 1.6fr 1fr 1fr; }
  .transport button { min-height: 58px; font-size: .95rem; }
  .transport button span { display: none; }
  .live-actions { grid-template-columns: repeat(3, 1fr); }
  .live-actions > button { min-height: 48px; font-size: .86rem; }
  .cue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .change-time { width: 100%; }
  .change-time select { flex: 1; }
  #pad-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pad-volume { width: 100%; }
  .pad-settings .aux-controls, .guide-controls, .secondary-grid { grid-template-columns: 1fr; min-width: 0; }
  .performance-foot { display: grid; }
  .cue-edit { grid-template-columns: minmax(0, 1fr) 72px; }
  .cue-edit button { grid-column: auto; }
  .cue-guide-row { grid-template-columns: 1fr; }
  .share-row { grid-template-columns: 1fr; }
  .mac-remote-share { grid-template-columns: 1fr; }
  .mac-remote-share img { justify-self: center; }
}
@media (orientation: landscape) and (max-height: 640px) and (min-width: 621px) {
  .top { position: static; }
  .set-order { position: static; max-height: none; }
  .transport button { min-height: 52px; }
}

/* =========================================================================
   Refinamento visual · acabamento profissional
   Sóbrio: superfícies com profundidade sutil, tipografia contida, dourado
   reservado para marca, ação principal e item atual.
   ========================================================================= */
:root {
  --bg: #090b10;
  --surface: #11151d;
  --surface-2: #171c26;
  --surface-3: #1f2632;
  --line: #262e3b;
  --line-soft: #1b222d;
  --text: #edf0f5;
  --dim: #95a0b2;
  --faint: #677285;
  --gold: #d9b261;
  --gold-strong: #ebc67a;
  --gold-wash: #241e12;
  --shadow: 0 1px 0 #ffffff08 inset, 0 10px 30px -18px #000c;
  --radius: 16px;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -.003em;
}
body { background: radial-gradient(1200px 600px at 15% -10%, #141a26 0, transparent 60%), var(--bg); }
.panel { background: linear-gradient(180deg, #131823 0%, #10141c 100%); border-color: var(--line-soft); box-shadow: var(--shadow); }
h1 { font-weight: 700; letter-spacing: -.03em; }
h2 { font-weight: 650; letter-spacing: -.015em; }
.kicker, .eyebrow { color: var(--faint); font-weight: 650; letter-spacing: .12em; font-size: .68rem; }
.page-head .kicker { color: var(--gold); }

/* Botões: menos bordas, mais peso tipográfico; ícones alinhados */
button { font-weight: 600; border-color: #2a3240; background: linear-gradient(180deg, #1b212c, #171c25); box-shadow: 0 1px 0 #ffffff0a inset; }
button:hover:not(:disabled) { background: linear-gradient(180deg, #232a37, #1d2330); border-color: #3a4558; }
button.gold { background: linear-gradient(180deg, var(--gold-strong), var(--gold)); border-color: var(--gold); color: #1e1708; box-shadow: 0 1px 0 #fff4 inset, 0 6px 18px -8px rgba(var(--gold-rgb), .6); }
button.gold:hover:not(:disabled) { background: linear-gradient(180deg, var(--gold-strong), var(--gold-strong)); border-color: var(--gold-strong); }
button.quiet { background: transparent; box-shadow: none; }
button.danger { background: transparent; box-shadow: none; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.transport .i { width: 1.25em; height: 1.25em; }
.transport .transport-primary .i { width: 1.4em; height: 1.4em; }
.live-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Barra superior mais limpa */
.top { background: #090b10e8; border-bottom-color: #ffffff0d; }
.brand { font-weight: 750; letter-spacing: .22em; font-size: .98rem; }
.brand img { border-radius: 8px; }
.tabs { background: #0d1118; border-color: #ffffff0d; }
.tabs button { box-shadow: none; background: transparent; font-weight: 550; letter-spacing: .005em; }
.tabs button[aria-selected="true"] { background: #1c222d; box-shadow: inset 0 0 0 1px #ffffff12, inset 0 -2px 0 var(--gold); }
.tabs .tab-live[aria-selected="true"] { box-shadow: inset 0 0 0 1px #ffffff12, inset 0 -2px 0 var(--green); }
.system-pill { background: transparent; border-color: #ffffff14; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.system-pill.is-player { color: #e9cf95; border-color: #5a4a2a; }

/* Campos */
input, select { background: #0c1017; border-color: #252d3a; box-shadow: 0 1px 0 #00000040 inset; }
input:focus, select:focus { border-color: #4a5a72; outline: none; }
input::placeholder { color: #5d6778; }

/* Cultos: cartões com hierarquia */
.show-card { position: relative; padding: 18px 18px 16px; transition: border-color .15s ease, transform .15s ease; }
.show-card:hover { border-color: #2c3545; }
.show-card h2 { font-size: 1.12rem; font-weight: 650; }
.show-card p { font-size: .84rem; }
.show-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 16px 0 0 16px; background: linear-gradient(180deg, var(--gold), transparent); opacity: .55; }

/* Palco */
.performance { background: radial-gradient(900px 260px at 100% 0, #1a1810 0, transparent 60%), linear-gradient(180deg, #131823, #10141c); }
.now-playing h1 { font-weight: 720; letter-spacing: -.035em; }
.clock strong { font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.status-pill { font-weight: 700; letter-spacing: .1em; font-size: .68rem; }
progress::-webkit-progress-value { background: linear-gradient(90deg, #c99e4c, #ebc67a); }
.section-strip { background: #0c1017; border-color: #222a37; }
.section-strip span { color: var(--faint); font-weight: 650; }
.section-strip strong { font-weight: 680; letter-spacing: -.02em; }
.cue-button { background: #0e1219; box-shadow: none; }
.cue-button strong { font-weight: 640; }
.cue-button.is-current { background: linear-gradient(180deg, #e7c272, #d3a854); box-shadow: 0 6px 18px -10px #d9b261aa; }
.song-button { background: transparent; box-shadow: none; }
.song-button:hover:not(:disabled) { background: #161b25; }
.song-copy strong { font-weight: 620; }
#pad-keys button { font-weight: 600; background: #0e1219; box-shadow: none; }
#pad-keys button[aria-pressed="true"] { background: linear-gradient(180deg, #e7c272, #d3a854); }

/* Mixer e listas */
#channel-list .channel, .cloud-song, .team-member, .study-library-card, .mode-option { background: #0d1118; border-color: #1d2430; }
#channel-list .channel-actions button, .channel-actions button { box-shadow: none; }
.cloud-song strong, .team-member strong { font-weight: 620; }
.cloud-song button { box-shadow: none; }

/* Diálogos e aviso */
.conflict-dialog { background: linear-gradient(180deg, #151a24, #10141c); border-color: #2a3240; box-shadow: 0 30px 80px -20px #000; }
#notice { background: #161b25f5; border-color: #2a3240; backdrop-filter: blur(10px); }
.show-card { padding-right: 18px; }
.show-card h2 { padding-right: 70px; }
.show-card .actions .danger { position: absolute; top: 14px; right: 12px; margin: 0; min-height: 30px; padding: 4px 9px; font-size: .78rem; color: var(--faint); border-color: transparent; }
.show-card .actions .danger:hover:not(:disabled) { color: #ffd2cc; border-color: #5a2a24; background: var(--red-wash); }
.show-card::before { opacity: .35; }
.cloud-song button { color: var(--faint); border-color: #232b37; background: transparent; }
.cloud-song button:hover:not(:disabled) { color: #ffd2cc; border-color: var(--red); background: var(--red-wash); }
.empty, .shared-study .empty { font-size: .88rem; color: var(--faint); padding: 10px 0; }
.fixed-pitch { color: var(--faint); font-size: .72rem; font-weight: 600; }
.study-share-dialog input[type="checkbox"], .study-recipient input { width: 20px; min-width: 20px; flex: none; }
.team-member.is-inactive { opacity: .62; }
.team-settings { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-top: 8px; }
.team-settings label { flex: 1 1 220px; }
#team-switch-field { display: grid; gap: 4px; margin: 8px 0; }
/* Escala */
.schedule-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap); align-items: start; }
.schedule-side { display: grid; gap: var(--gap); }
.schedule-list { display: grid; gap: 10px; }
.schedule-assignment, .schedule-day { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.schedule-assignment p, .schedule-day small, .schedule-assignment small { margin: 2px 0 0; color: var(--dim); display: block; }
.schedule-assignment.is-pending { border-color: #6a4a1c; }
.schedule-assignment.is-confirmed { border-color: #2c5a41; }
.schedule-day.needs-attention { border-color: #5a2a24; background: var(--red-wash); }
.schedule-alert { color: var(--red) !important; font-weight: 600; }
.schedule-month { margin: 12px 0 2px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.team-status.is-ok { color: var(--green); border-color: #2c5a41; }
.team-status.is-warning { color: var(--amber); border-color: #6a4a1c; }
.team-status.is-danger { color: var(--red); border-color: #5a2a24; }
.availability-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.availability-form, .schedule-when { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.availability-form label, .schedule-when label { display: grid; gap: 4px; flex: 0 1 160px; }
.availability-form .wide, .schedule-when .wide { flex: 1 1 220px; }
.schedule-editor { margin-top: var(--gap); }
.schedule-positions { display: grid; gap: 8px; margin: 12px 0; }
.schedule-position { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.schedule-position.has-voice { grid-template-columns: 150px 120px minmax(0, 1fr) auto auto; }
.schedule-position.is-declined { border-color: #5a2a24; background: var(--red-wash); }
.schedule-position small { grid-column: 1 / -1; color: var(--dim); }
@media (max-width: 760px) {
  .schedule-grid { grid-template-columns: 1fr; }
  .schedule-assignment, .schedule-day { grid-template-columns: 1fr; }
  .schedule-position, .schedule-position.has-voice { grid-template-columns: 1fr 1fr; }
  .schedule-position.has-voice > select:nth-child(3) { grid-column: 1 / -1; }
}
.tabs button { white-space: nowrap; }
.repertoire-panel { margin-bottom: var(--gap); }
.repertoire-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; justify-content: space-between; }
.repertoire-row label { display: grid; gap: 4px; }
.minister-key { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.chart-editor { display: grid; gap: 8px; margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.chart-editor h4 { margin: 0; }
.chart-text { width: 100%; min-height: 260px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.4; white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 4; }
.chart-sections { font-size: .85rem; }
.chart-remote { max-height: 220px; overflow: auto; padding: 10px; border: 1px dashed var(--amber); border-radius: var(--radius-sm); white-space: pre; font-size: 13px; }
/* Início por perfil */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.home-attention-panel { grid-column: 1 / -1; }
.home-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.home-item small { display: block; color: var(--dim); margin-top: 2px; }
.home-item.is-confirm { border-color: #6a4a1c; }
.home-item.is-prepare { border-color: var(--gold); }
.home-item.is-cover { border-color: #5a2a24; background: var(--red-wash); }
.home-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.home-help, .role-help-list { margin: 6px 0 0; padding-left: 18px; color: var(--dim); font-size: .88rem; display: grid; gap: 4px; }
.role-help-list strong { color: var(--text); }
#home-hello h1 { margin: 2px 0; }
@media (max-width: 760px) { .home-grid { grid-template-columns: 1fr; } .home-item { grid-template-columns: 1fr; } }

/* Cifra opcional no Ao vivo: só leitura, acompanha a seção do VS. */
.live-chart { grid-area: chart; min-width: 0; --chart-scale: 1; }
.live-chart-toggle { display: flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--dim); cursor: pointer; }
.live-chart .chart-body { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 30vh; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: calc(17px * var(--chart-scale) * var(--user-chart-scale, 1)); line-height: 1.35; }
.live-chart .chart-section { padding: 8px 12px; margin: 0 0 8px; border-left: 3px solid transparent; border-radius: 8px; opacity: .7; transition: background-color .35s ease, border-color .35s ease, opacity .35s ease; }
.live-chart .chart-section.is-current { opacity: 1; border-left-color: var(--gold); background: var(--gold-wash); }
.live-chart .chart-section.is-next { opacity: .9; border-left-color: rgba(var(--gold-rgb), .35); }
.live-chart .chart-section-name { margin: 0 0 4px; font-size: .75em; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.live-chart .chart-chords { white-space: pre; color: var(--gold); font-weight: 700; }
.live-chart .chart-lyric { white-space: pre-wrap; }
.live-chart .chart-gap { height: .5em; }
@media (prefers-reduced-motion: reduce) { .live-chart .chart-section { transition: none; } }

/* Parte atual: selo "AGORA" brilhando, "A SEGUIR" discreto e barra de progresso da seção. */
.chart-section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.chart-section-head .chart-section-name { margin: 0; }
.chart-now, .chart-up-next { display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .68em; font-weight: 800; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; }
.chart-section.is-current .chart-now { display: inline-block; color: #14110a; background: var(--gold); box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .7); animation: chart-now-glow 1.6s ease-in-out infinite; }
.chart-section.is-next .chart-up-next { display: inline-block; color: var(--gold); border: 1px solid rgba(var(--gold-rgb), .45); }
.chart-progress { display: none; height: 3px; margin: 0 0 8px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) calc(var(--progress, 0) * 100%), rgba(var(--gold-rgb), .15) 0); transition: background .25s linear; }
.chart-section.is-current .chart-progress { display: block; }
.chart-section.is-current { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35), 0 0 22px rgba(var(--gold-rgb), .12); }
@keyframes chart-now-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .55); } 50% { box-shadow: 0 0 14px 3px rgba(var(--gold-rgb), .55); } }
@media (prefers-reduced-motion: reduce) { .chart-section.is-current .chart-now { animation: none; } }
/* Cifras por ministro */
.chart-lib-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.chart-lib-side { display: grid; gap: 10px; position: sticky; top: 76px; }
.chart-lib-side label { display: grid; gap: 4px; }
.chart-lib-list { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.chart-lib-song { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.chart-lib-song.is-selected { border-color: var(--gold); background: var(--gold-wash); }
.chart-lib-song.is-empty { opacity: .6; }
.chart-lib-song small { display: block; color: var(--dim); }
.chart-lib-key { min-width: 46px; text-align: center; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); font-weight: 800; }
.chart-lib-key.is-own { color: #14110a; background: var(--gold); border-color: var(--gold); }
.chart-lib-viewer.live-chart { grid-area: auto; }
.chart-lib-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 8px; }
.chart-lib-tools label { display: grid; gap: 4px; }
.chart-lib-viewer .chart-body { max-height: 70vh; }
@media (max-width: 760px) { .chart-lib-grid { grid-template-columns: 1fr; } .chart-lib-side { position: static; } }
.chart-lib-side label.als-confirm { display: flex; align-items: center; gap: 8px; }

/* Check-up do culto ("Pronto para o culto?") */
.checkup-dialog { width: min(640px, calc(100vw - 28px)); }
.checkup-summary { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--line-soft); font-weight: 600; }
.checkup-summary.is-ok { color: var(--green); background: var(--green-wash); }
.checkup-summary.is-warn { color: var(--amber); background: var(--amber-wash); }
.checkup-summary.is-error { color: var(--red); background: var(--red-wash); }
.checkup-list { display: grid; gap: 8px; max-height: min(60vh, 520px); overflow: auto; }
.checkup-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.checkup-item > div { display: grid; gap: 2px; min-width: 0; }
.checkup-item small { color: var(--dim); overflow-wrap: anywhere; }
.checkup-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .8rem; font-weight: 700; background: var(--line-soft); color: var(--dim); }
.checkup-item.is-ok .checkup-icon { color: var(--green); background: var(--green-wash); }
.checkup-item.is-warn .checkup-icon { color: var(--amber); background: var(--amber-wash); }
.checkup-item.is-error { border-color: #5a2a24; }
.checkup-item.is-error .checkup-icon { color: var(--red); background: var(--red-wash); }
@media (max-width: 560px) { .checkup-item { grid-template-columns: 26px 1fr; } .checkup-item > button { grid-column: 2; justify-self: start; } }
.availability-form label[hidden] { display: none; }
.availability-row.is-rule span::before { content: "↻ "; color: var(--gold); }

/* Avisos no aparelho */
.push-control { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.push-control[hidden] { display: none; }
.push-control .push-copy { display: grid; gap: 4px; flex: 1 1 260px; }
.push-control small { color: var(--dim); }

/* Rodízio: quem mais serviu e sugestão de escala */
.history-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.history-row > div { display: grid; gap: 2px; min-width: 0; }
.history-row small { color: var(--dim); }
.history-count { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.history-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) calc(var(--share) * 100%), var(--line-soft) 0); }
.schedule-position.is-suggested { outline: 1px dashed var(--gold); outline-offset: 2px; }
.library-history { margin: 6px 0; color: var(--dim); font-size: .9rem; }
.library-history.is-recent { color: var(--amber); }
.library-history.is-recent::before { content: "⚠ "; }

/* Por papel: só quem opera o culto vê Ao vivo/controle do Mac/biblioteca; só o Administrador envia stems. */
body:not(.is-operator) .operator-only, body:not(.can-upload-audio) .multitrack-only { display: none !important; }
.show-author { color: var(--dim); font-size: .82rem; }
/* Culto criado pela mídia (Ready): mesmo selo que o Ready mostra nos cultos do DOXA. */
.from-ready { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 8px 1px 3px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #b6f36a; background: rgba(150, 230, 80, .13); border: 1px solid rgba(150, 230, 80, .35); vertical-align: 1px; }
.from-ready img { width: 15px; height: 15px; border-radius: 4px; }

/* Celular: a barra de abas NÃO rola (no iPhone, botão dentro de área rolável pede dois toques). As abas encolhem para caber. */
@media (max-width: 620px) {
  .tabs { overflow: visible; }
  .tabs button { flex: 1 1 0; min-width: 0; padding: 4px 2px; font-size: clamp(.66rem, 2.9vw, .8rem); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  /* Escala no celular: função em cima, pessoa em linha inteira (nome sem corte), selo e Remover lado a lado. */
  .schedule-position, .schedule-position.has-voice { grid-template-columns: minmax(0, 1fr) auto; }
  .schedule-position > select:first-child, .schedule-position.has-voice > select:nth-child(3) { grid-column: 1 / -1; }
  .schedule-position > select:nth-child(2) { grid-column: 1 / -1; }
  .schedule-position .team-status { justify-self: start; }
}
@media (max-width: 620px) {
  /* Ao rolar até um painel, ele não fica escondido atrás da barra do topo. */
  .panel, .view { scroll-margin-top: 76px; }
}
/* "Saída de áudio e fades" aberta ocupa a largura do painel (no iPad em pé ela passava da borda). */
.performance-foot { flex-wrap: wrap; }
.secondary-controls[open] { flex: 1 1 100%; }
.secondary-controls[open] > summary { text-align: right; }
.secondary-controls[open] .secondary-grid { min-width: 0; }

/* Telas de toque (iPhone, iPad, Android): campos com 16 px para o iOS não dar zoom ao tocar; alvos de toque maiores. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px; }
  button, select { min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
}
/* Windows/Linux com mouse: barras de rolagem finas e discretas nas listas e na cifra. */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #2a3240 transparent; }
}
/* Teclado na tela (iPhone/Android) não esconde a barra de abas por cima dos campos. */
@supports (height: 100dvh) { body { min-height: 100dvh; } }

/* Timeline (TESTE, só no computador) — remover junto com dist/timeline.js se o teste for descartado. */
#timeline { --daw-bg: #0b0e14; --daw-panel: #121721; --daw-line: #232b3a; --daw-text: #c9d2e0; --daw-dim: #7d889b; }
.daw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--daw-line); border-radius: 12px; background: linear-gradient(180deg, #151b26, #10141c); }
.daw-title { display: grid; gap: 4px; min-width: 210px; }
.daw-title .kicker { font-size: .66rem; }
.daw-title select { min-height: 32px; padding: 4px 10px; font-weight: 600; }
.daw-group { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--daw-line); border-radius: 9px; background: var(--daw-bg); }
.daw-icon, .daw-text { min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--daw-text); font-size: .82rem; font-weight: 600; box-shadow: none; }
.daw-icon { width: 32px; padding: 0; display: grid; place-items: center; font-size: 1.05rem; }
.daw-icon svg { width: 16px; height: 16px; }
.daw-icon:hover:not(:disabled), .daw-text:hover:not(:disabled) { background: #1c2331; color: #fff; }
.daw-icon[aria-pressed="true"] { background: #2a2414; color: var(--gold); box-shadow: inset 0 0 0 1px #6a5426; }
.daw-icon.is-play { color: var(--green); }
.daw-icon.is-play[aria-pressed="true"] { background: #12301f; color: var(--green); box-shadow: inset 0 0 0 1px #2c5a41; }
.daw-icon:disabled, .daw-text:disabled { opacity: .35; }
.daw-lcd { display: flex; gap: 2px; padding: 4px; border-radius: 9px; background: #06080c; border: 1px solid #1b2230; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.daw-lcd span { display: grid; padding: 0 10px; border-right: 1px solid #141a24; }
.daw-lcd span:last-child { border-right: 0; }
.daw-lcd small { color: var(--daw-dim); font-size: .55rem; letter-spacing: .14em; }
.daw-lcd strong { color: #9be7c0; font-size: .98rem; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.daw-select { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px; color: var(--daw-dim); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.daw-select select { min-height: 28px; padding: 2px 8px; font-size: .8rem; text-transform: none; letter-spacing: 0; }
.daw-zoom { margin-left: auto; }
.daw-zoom input { width: 110px; }
.tl-board { padding: 0; overflow: hidden; border-color: var(--daw-line); background: var(--daw-bg); }
.tl-board.is-drawing .tl-lane canvas { cursor: crosshair; }
.tl-scroll { overflow: auto; max-height: calc(100vh - 210px); position: relative; }
.tl-content { position: relative; min-width: 100%; }
.tl-empty { padding: 28px; }
.tl-row { display: flex; border-bottom: 1px solid #161c27; }
.tl-head { position: sticky; left: 0; z-index: 2; flex: 0 0 232px; width: 232px; box-sizing: border-box; padding: 6px 10px 6px 14px; background: var(--daw-panel); border-right: 1px solid var(--daw-line); display: grid; align-content: center; gap: 5px; min-width: 0; }
.daw-label { color: var(--daw-dim); font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
.tl-ruler .tl-head, .tl-markers .tl-head { background: #0e131b; }
.tl-lane .tl-head { box-shadow: inset 4px 0 0 var(--track); cursor: pointer; }
.tl-lane.is-selected .tl-head { background: #19202d; }
.tl-track-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tl-track-number { color: var(--daw-dim); font: 600 .7rem ui-monospace, Menlo, Consolas, monospace; }
.tl-track-title strong { font-size: .84rem; color: var(--daw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row canvas { position: sticky; left: 232px; display: block; cursor: text; }
.tl-markers canvas { cursor: default; }
.tl-controls { display: flex; align-items: center; gap: 4px; }
.tl-controls input[type=range] { flex: 1; min-width: 0; height: 14px; }
.tl-db { width: 52px; text-align: right; color: var(--daw-dim); font: 600 .68rem ui-monospace, Menlo, Consolas, monospace; }
.tl-toggle { min-height: 22px; width: 22px; padding: 0; border-radius: 5px; font-size: .68rem; font-weight: 800; background: #1a202b; color: var(--daw-dim); border: 1px solid #252d3b; box-shadow: none; }
.tl-toggle.is-mute[aria-pressed="true"] { background: #4a1d17; color: #ffb3a8; border-color: #6c2a22; }
.tl-toggle.is-solo[aria-pressed="true"] { background: #4a3812; color: var(--gold-strong); border-color: #6a5020; }
.tl-toggle.is-auto[aria-pressed="true"] { background: #2a2414; color: var(--gold); border-color: #6a5426; }
.tl-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #9be7c0; pointer-events: none; z-index: 1; box-shadow: 0 0 6px #5fd49a; }
.daw-range { padding: 0 8px; color: #9be7c0; font: 600 .74rem ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
.daw-text.is-danger:not(:disabled) { color: #ffb3a8; }
.daw-save { display: flex; align-items: center; gap: 6px; }
.daw-save button { min-height: 32px; padding: 0 12px; font-size: .82rem; }
.daw-draft { color: var(--amber); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }

/* Aviso de versão nova */
.update-banner { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border: 1px solid #6a5426; border-radius: 12px; background: #17140c; color: var(--text); box-shadow: 0 18px 40px -12px #000; max-width: calc(100vw - 24px); }
.update-banner[hidden] { display: none; }
.update-banner button { min-height: 34px; padding: 0 14px; }
@media (max-width: 620px) { .update-banner { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.daw-save button:disabled { opacity: .38; box-shadow: none; filter: saturate(.4); }

/* Central de avisos (sininho) */
.inbox { position: relative; display: flex; align-items: center; }
.inbox[hidden] { display: none; }
.inbox-bell { position: relative; width: 40px; min-height: 38px; padding: 0; display: grid; place-items: center; }
.inbox-bell svg { width: 20px; height: 20px; }
.inbox-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #1a0705; font-size: .66rem; font-weight: 800; line-height: 17px; text-align: center; }
.inbox-badge[hidden] { display: none; }
.inbox-panel { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 520px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 24px 60px -18px #000; overflow: hidden; }
.inbox-panel[hidden] { display: none; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.inbox-list { overflow-y: auto; }
.inbox-list .empty { padding: 18px 14px; }
.inbox-item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; text-align: left; box-shadow: none; min-height: 0; }
.inbox-item:hover { background: var(--surface-2); }
.inbox-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.inbox-item.is-unread .inbox-dot { background: var(--gold); }
.inbox-copy { display: grid; gap: 3px; min-width: 0; }
.inbox-copy strong { font-size: .9rem; }
.inbox-item:not(.is-unread) .inbox-copy strong { color: var(--dim); font-weight: 600; }
.inbox-copy span { color: var(--dim); font-size: .84rem; line-height: 1.35; }
.inbox-copy small { color: var(--faint); font-size: .74rem; }
@media (max-width: 620px) { .inbox-panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; } }
/* Cabeçalho em janelas médias (900–1240 px: notebook, iPad deitado, janela dividida): abas vão para a 2ª linha,
   assim sininho e Conta nunca saem da tela. */
@media (max-width: 1240px) {
  .top { flex-wrap: wrap; gap: 10px; }
  .tabs { order: 3; width: 100%; }
  .tabs button { flex: 1; }
  #identity { display: none; }
}

/* Entrada (sem conta): só a boas-vindas e o login, sem abas nem telas por trás. */
body.signed-out .tabs, body.signed-out .view, body.signed-out .system, body.signed-out #account-toggle, body.signed-out #identity, body.signed-out .inbox { display: none !important; }
body.signed-out .account-card { margin-top: 10vh; }
.welcome { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.welcome h1 { margin: 0; font-size: 1.9rem; letter-spacing: .18em; }
.welcome p { margin: 4px 0 0; color: var(--dim); line-height: 1.45; }
body:not(.signed-out) .welcome { display: none; }
.account-title { margin: 0 0 12px; font-size: 1.1rem; }
.link-button { margin-top: 10px; padding: 0; min-height: 0; border: 0; background: none; color: var(--dim); font-size: .85rem; text-decoration: underline; box-shadow: none; }
.link-button:hover { color: var(--text); background: none; }

/* Revisão de interface (2/10) */
body.is-desktop .playback-mode, body.is-desktop #player-device { display: none !important; }
#sync-show.is-status { background: transparent; color: var(--green); border-color: #2c5a41; box-shadow: none; cursor: default; }
.home-date { margin: 2px 0 6px; }
.chart-lib-placeholder { display: grid; place-items: center; min-height: 260px; color: var(--dim); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px; }
.show-date { color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.chart-lib-placeholder[hidden] { display: none; }

/* Novo culto */
.new-show-dialog form { display: grid; gap: 12px; }
.new-show-dialog .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.check-row input { margin-top: 3px; }
.check-row span { display: grid; gap: 2px; font-weight: 600; }
.check-row small { color: var(--dim); font-weight: 400; }

/* Toque imediato no iPhone/Android: sem atraso de duplo toque nem destaque cinza do WebKit. */
button, a, select, label, summary, input[type=checkbox], input[type=range] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.reference-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 10px; }
/* Ajustes iPad/iPhone (3/10): textos sem sobrepor. */
.chart-lib-song > :first-child { flex: 1 1 auto; min-width: 0; }
.chart-lib-song small { overflow-wrap: anywhere; }
.chart-lib-key { flex: 0 0 auto; }
.daw-text, .daw-icon { white-space: nowrap; flex-shrink: 0; }
.daw-group { flex-wrap: wrap; }
.song-state:empty { display: none; }
@media (max-width: 1280px) {
  /* Setlist estreito (iPad): o selo ATUAL/PRÓXIMA vai para baixo do nome, o título ganha a largura toda. */
  .song-button { grid-template-columns: 26px minmax(0, 1fr); row-gap: 2px; }
  .song-button .song-state { grid-column: 2; justify-self: start; }
}
.tl-cue-dialog form { display: grid; gap: 12px; }
.tl-cue-dialog label { display: grid; gap: 6px; }
.tl-cue-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
/* Cifra do Ao vivo em tela cheia (iPad/iPhone no palco): ocupa a tela toda e rola sozinha com o VS. */
.live-chart-actions { display: flex; gap: 8px; align-items: center; }
body.live-chart-full { overflow: hidden; }
body.live-chart-full #live-chart-panel { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px, env(safe-area-inset-left)); --chart-scale: 1.15; }
body.live-chart-full #live-chart-body { max-height: none; flex: 1 1 auto; min-height: 0; }
@media (max-width: 1100px) { .live-chart .chart-body { max-height: 62vh; } }
@media (pointer: coarse) and (min-width: 1101px) { .stage-grid { grid-template-areas: "setlist performance" "setlist chart" "setlist sections" "setlist pads" "setlist mixer"; } }
@media (pointer: coarse) and (max-width: 1100px) and (min-width: 901px) { .stage-grid { grid-template-areas: "setlist performance" "setlist chart" "setlist sections" "setlist pads" "setlist mixer"; } }
.cue-links { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.cue-links summary { cursor: pointer; font-weight: 650; }
.cue-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.cue-link.is-unmatched span { color: var(--gold); font-weight: 650; }
@media (max-width: 560px) { .cue-link { grid-template-columns: 1fr; gap: 4px; } }
/* Aviso da cifra ao vivo: próxima seção programada e loop. */
.chart-banner { position: sticky; top: 0; z-index: 3; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: max(.95rem, .8em); font-weight: 800; letter-spacing: .03em; color: #14110a; background: var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.chart-banner[data-kind="loop"] { background: #7cc4ff; }
.chart-banner[data-kind="exit"] { background: #9be7c0; }
.chart-section.is-target { border-left-color: #7cc4ff; outline: 2px dashed rgba(124, 196, 255, .55); outline-offset: 2px; opacity: 1; }
.live-chart-capo { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--dim); }
.live-chart-capo select { min-height: 34px; padding: 4px 8px; width: auto; }
/* Botão fixo no rodapé da cifra: parar de seguir o DOXA / voltar a seguir (grande o bastante para o dedo no palco). */
.chart-follow-toggle { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 4; display: block; margin: 12px 0 0 auto; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 999px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 800; color: #e9edf5; background: rgba(28, 35, 49, .94); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); touch-action: manipulation; }
.chart-follow-toggle.is-paused { color: #14110a; background: var(--gold); }
/* Abertura: até o perfil chegar, nada de telas (evita mostrar a tela do administrador para o músico por um instante). */
body.is-booting main > *, body.is-booting .tabs, body.is-booting #identity { visibility: hidden; }

/* Segurança: se o app não carregar, a tela aparece sozinha depois de 15 s (nunca fica presa em "Carregando…"). */
@keyframes doxa-boot-reveal { to { visibility: visible; } }
@keyframes doxa-boot-hide { to { visibility: hidden; } }
body.is-booting main > *, body.is-booting .tabs, body.is-booting #identity { animation: doxa-boot-reveal 0s 15s forwards; }
body.is-booting .boot-splash { animation: doxa-splash-in .35s ease both, doxa-boot-hide 0s 15s forwards; }
/* Abertura do DOXA: logo, nome e barrinha de progresso enquanto descobre quem é a pessoa. */
.boot-splash { display: none; }
body.is-booting .boot-splash { position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(circle at 50% 42%, rgba(var(--gold-rgb), .10), transparent 55%), var(--bg, #0b0e14); }
.boot-splash img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .45); animation: doxa-splash-glow 1.8s ease-in-out infinite; }
.boot-splash strong { font-size: 1.5rem; font-weight: 800; letter-spacing: .42em; padding-left: .42em; color: #f1ead8; }
.boot-splash small { color: var(--dim, #8b93a3); font-size: .9rem; letter-spacing: .02em; }
.boot-bar { position: relative; width: 168px; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(var(--gold-rgb), .16); }
.boot-bar span { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: doxa-splash-bar 1.2s ease-in-out infinite; }
@keyframes doxa-splash-bar { to { left: 100%; } }
@keyframes doxa-splash-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .35); transform: scale(1); } 50% { box-shadow: 0 0 34px 6px rgba(var(--gold-rgb), .28); transform: scale(1.04); } }
@keyframes doxa-splash-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot-splash img, .boot-bar span { animation: none; } .boot-bar span { left: 30%; } }
/* Ícones das abas (desenho em linha, cor do texto): a barra do celular fica com cara de aplicativo. */
.tabs button::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 7px; vertical-align: -4px; background: currentColor; -webkit-mask: var(--tab-icon) center / contain no-repeat; mask: var(--tab-icon) center / contain no-repeat; opacity: .9; }
.tabs button[data-view="home"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011.5%2012%204l9%207.5%22/%3E%3Cpath%20d%3D%22M5.5%2010v9.5h13V10%22/%3E%3Cpath%20d%3D%22M10%2019.5v-5h4v5%22/%3E%3C/svg%3E"); }
.tabs button[data-view="library"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215%22%20rx%3D%222.5%22/%3E%3Cpath%20d%3D%22M3.5%209.5h17M8%203v4M16%203v4%22/%3E%3C/svg%3E"); }
.tabs button[data-view="publish"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%206h14M5%2012h14M5%2018h9%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2218%22%20r%3D%222%22/%3E%3C/svg%3E"); }
.tabs button[data-view="stage"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpath%20d%3D%22M10%208.5%2015.5%2012%2010%2015.5z%22%20fill%3D%22black%22/%3E%3C/svg%3E"); }
.tabs button[data-view="timeline"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010v4M8%207v10M12%204v16M16%208v8M20%2011v2%22/%3E%3C/svg%3E"); }
.tabs button[data-view="schedule"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215%22%20rx%3D%222.5%22/%3E%3Cpath%20d%3D%22M3.5%209.5h17M8.5%2014.5l2.2%202.2%204.8-4.8%22/%3E%3C/svg%3E"); }
.tabs button[data-view="chart-library"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5.5l10-2v12.5%22/%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2218%22%20r%3D%222.5%22/%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2216%22%20r%3D%222.5%22/%3E%3C/svg%3E"); }
.tabs button[data-view="team"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.5%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M3%2019.5c.6-3.4%203-5%206-5s5.4%201.6%206%205%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229.5%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M16.5%2014.6c2.4.2%204%201.6%204.5%204.4%22/%3E%3C/svg%3E"); }
@media (max-width: 620px) { .tabs button { display: flex; flex-direction: column; min-height: 52px; align-items: center; justify-content: center; gap: 3px; font-size: .72rem; } .tabs button::before { width: 22px; height: 22px; margin: 0; } }
/* Polimento geral (3/10): cartões com profundidade suave, cultos em grade, botões que respondem ao toque. */
.panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 32px rgba(0, 0, 0, .22); }
.show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.create-show { margin-left: auto; }
button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease; }
button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
:focus-visible { outline: 2px solid rgba(var(--gold-rgb), .7); outline-offset: 2px; }
.home-item { border-radius: 12px; }
.kicker, .eyebrow { letter-spacing: .12em; }
h1 { letter-spacing: -.01em; }
/* Pads com timbres e clique do DOXA lado a lado na área de ambiente. */
.aux-stack { grid-area: pads; display: grid; gap: var(--gap); min-width: 0; }
.aux-stack > .panel { grid-area: auto; }
.pad-head-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.pad-style select { min-height: 34px; padding: 4px 8px; width: auto; }
.click-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0; }
.click-controls label { display: grid; gap: 4px; font-size: .85rem; color: var(--dim); }
#click-toggle[aria-pressed="true"] { color: #14110a; background: var(--gold); border-color: var(--gold); }
/* Preferências do músico (⚙): o que mostrar, cor da parte atual e alto contraste. */
.prefs-gear { min-width: 38px; min-height: 36px; padding: 4px 8px; font-size: 1.15rem; line-height: 1; }
.prefs-dialog form { display: grid; gap: 12px; }
.prefs-dialog label { display: grid; gap: 5px; font-size: .9rem; color: var(--dim); }
:root[data-chart-show="chords"] .chart-lyric { display: none; }
:root[data-chart-show="lyrics"] .chart-chords { display: none; }
.chart-section.is-current { border-left-color: var(--chart-accent, var(--gold)) !important; background: color-mix(in srgb, var(--chart-accent, var(--gold)) 11%, transparent) !important; }
.chart-section.is-current .chart-now { background: var(--chart-accent, var(--gold)) !important; }
:root[data-contrast="high"] { --dim: #cfd5df; --faint: #aeb6c3; }
:root[data-contrast="high"] .chart-lyric { color: #ffffff; font-weight: 600; }
:root[data-contrast="high"] .chart-section { opacity: .92; }
:root[data-contrast="high"] .chart-chords { filter: brightness(1.18); }
.reference-audio { display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.reference-audio audio { width: 100%; }
/* Classificação das músicas */
.song-meta { margin: 6px 0 12px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.song-meta summary { cursor: pointer; font-weight: 650; }
.song-meta[open] { display: grid; gap: 8px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { min-height: 32px; padding: 4px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.tag-chip[aria-pressed="true"] { color: #14110a; background: var(--gold); border-color: var(--gold); }
.song-meta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.song-meta-row label { display: grid; gap: 4px; font-size: .85rem; color: var(--dim); }
.catalog-filter { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
.new-song-meta { margin: 4px 0 10px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.new-song-meta summary { cursor: pointer; font-weight: 650; }
.new-song-meta[open] { display: grid; gap: 8px; }
/* Barra de armazenamento estilo iPhone */
.space-bar { display: flex; height: 14px; overflow: hidden; border-radius: 7px; background: #1b212c; box-shadow: inset 0 0 0 1px var(--line-soft); }
.space-bar span { height: 100%; }
.space-bar span + span { box-shadow: -1px 0 0 rgba(0, 0, 0, .35); }
.space-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--dim); }
.space-item { display: inline-flex; align-items: center; gap: 6px; }
.space-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.space-item i.is-free { background: #1b212c; box-shadow: inset 0 0 0 1px var(--line); }
/* ⓘ Como instalar o DOXA (atalho na tela inicial) */
.install-help { min-width: 36px; min-height: 36px; padding: 4px 8px; font-size: 1.15rem; line-height: 1; }
.install-dialog form { display: grid; gap: 10px; }
.install-steps { padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.install-steps summary { cursor: pointer; font-weight: 700; }
.install-steps ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.4; }
.song-click { display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
/* Editor da música: três blocos (Sobre a música · Neste culto · Técnico). */
.editor > .editor-section { display: grid; gap: 10px; margin: 0; padding: 14px 0 6px; border-top: 1px solid var(--line-soft); }
.editor > .editor-section:first-of-type { border-top: 0; padding-top: 6px; }
.editor-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.editor-section-head h4 { margin: 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, var(--gold)); }
.editor-section-head small { font-size: .78rem; }
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; }
.editor-grid > label { margin: 0; }
.editor-technical { opacity: .97; }
.editor-technical .song-click, .editor-technical .chart-editor { margin: 0; }
.editor-order { justify-content: flex-start; gap: 6px; }
.editor-culto .reference-audio { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
@media (max-width: 560px) { .editor-grid { grid-template-columns: 1fr; } }
/* Adicionar ao culto: abas "Da biblioteca" e "Música nova". */
.add-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #0f141d; }
.add-mode button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--dim); font-weight: 600; }
.add-mode button[aria-selected="true"] { background: var(--panel-raised, #1b2230); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.add-song[data-mode="library"] .add-new, .add-song[data-mode="new"] .add-library { display: none; }
.add-library, .add-new { display: grid; gap: 10px; }
body:not(.can-tech) .technical-only { display: none !important; }
/* Bloco Técnico: partes que abrem e fecham. */
.tech-part { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 0 12px; }
.tech-part > summary { min-height: 42px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--dim); }
.tech-part[open] > summary { color: var(--text); }
.tech-part[open] { padding-bottom: 12px; }
.tech-part > *:not(summary) { margin-top: 8px; }
/* Escala: ao editar um culto, só o editor aparece (nada de rolar até o fim da página). */
#schedule.is-editing > :not(.page-head):not(#schedule-editor), #schedule.is-editing .schedule-layout > :not(#schedule-editor) { display: none !important; }
.schedule-summary { margin: 4px 0 0; color: var(--dim); font-size: .9rem; }
.schedule-position { grid-template-columns: 140px minmax(0, 1fr) auto 36px; }
.schedule-position.has-voice { grid-template-columns: 140px 120px minmax(0, 1fr) auto 36px; }
.schedule-position > select:first-child { font-weight: 600; }
.schedule-remove { min-width: 34px; min-height: 34px; padding: 0; font-size: 1.15rem; line-height: 1; color: var(--dim); }
.schedule-remove:hover { color: var(--text); }
.schedule-actions { position: sticky; bottom: 0; z-index: 3; padding: 10px 0; margin-top: 4px; background: linear-gradient(to top, var(--panel, #121822) 75%, transparent); flex-wrap: wrap; }
.schedule-actions #schedule-save { margin-left: auto; }
@media (max-width: 720px) { .schedule-position, .schedule-position.has-voice { grid-template-columns: minmax(0, 1fr) auto 36px; } .schedule-actions #schedule-save { margin-left: 0; width: 100%; } }
/* Fim da abertura: a tela de carregamento esmaece e o app surge por baixo. */
.boot-splash.is-leaving { position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(circle at 50% 42%, rgba(var(--gold-rgb), .10), transparent 55%), var(--bg, #0b0e14); pointer-events: none; animation: doxa-splash-out .55s ease forwards; }
.boot-splash.is-leaving img { animation: none; transform: scale(1.06); transition: transform .55s ease; }
@keyframes doxa-splash-out { from { opacity: 1; } to { opacity: 0; } }
body.boot-reveal main > *, body.boot-reveal .tabs, body.boot-reveal #identity { animation: doxa-app-in .55s ease both; }
@keyframes doxa-app-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .boot-splash.is-leaving { animation-duration: .2s; } body.boot-reveal main > *, body.boot-reveal .tabs { animation: none; } }
/* Música fora do repertório (momento espontâneo). */
.live-extra-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(var(--gold-rgb), .12); color: #f1ead8; font-weight: 600; }
.live-extra-bar[hidden] { display: none; }
.extra-dialog { width: min(560px, calc(100vw - 32px)); }
.extra-dialog form { display: grid; gap: 10px; }
.extra-list { display: grid; gap: 6px; max-height: min(52vh, 460px); overflow-y: auto; }
.extra-song { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; text-align: left; }
.extra-song .song-copy { display: grid; gap: 2px; min-width: 0; }
.extra-song .song-copy small { color: var(--dim); }
/* Quem estudou? */
.study-progress-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.study-progress-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.study-progress-table th, .study-progress-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.study-progress-table th:first-child, .study-progress-table td:first-child { text-align: left; white-space: normal; min-width: 130px; }
.study-progress-table td:first-child small { display: block; color: var(--dim); font-size: .78rem; }
.study-progress-table .study-done { color: #6fd39b; font-weight: 700; }
.study-progress-table .study-started { color: var(--gold); }
.study-progress-table .study-none { color: var(--dim); }
.study-progress-table .study-total { font-weight: 600; }
.study-progress-legend { font-size: .8rem; }
/* Celular: a Timeline (edição fina) não cabe nem é usável; sai da barra de baixo e as outras abas ganham espaço. */
@media (max-width: 700px) { .tabs [data-view="timeline"] { display: none !important; } }
@media (pointer: coarse) { .show-card .actions .danger { min-height: 38px; padding: 6px 12px; } }
/* iPad/celular: controles compactos da Timeline e links de ação com altura confortável para o dedo. */
@media (pointer: coarse) {
  .timeline button, .timeline select, [id^="tl-"]:is(button, select) { min-height: 40px; min-width: 40px; }
  .link-button { min-height: 36px; display: inline-flex; align-items: center; }
}
/* Android estreito (≤ 380 px): rótulos das abas cabem inteiros. */
@media (max-width: 380px) { .tabs [data-view] { font-size: .66rem; letter-spacing: -.02em; padding-left: 1px; padding-right: 1px; } }
/* Modo Estudo aberto por cima do app. */
.study-layer { position: fixed; inset: 0; z-index: 9500; background: var(--bg, #0b0e14); }
.study-layer iframe { width: 100%; height: 100%; border: 0; display: block; }
body.has-study-layer { overflow: hidden; }
/* Cifra do Ao vivo em tela cheia no celular: cabeçalho numa linha só, a cifra ganha a tela. */
@media (max-width: 600px) {
  body.live-chart-full #live-chart-panel .section-head { flex-wrap: nowrap; gap: 6px; }
  body.live-chart-full #live-chart-panel .section-head .kicker { display: none; }
  body.live-chart-full #live-chart-panel .section-head > div:first-child { min-width: 0; flex: 1; }
  body.live-chart-full #live-chart-title { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  body.live-chart-full .live-chart-actions { flex-wrap: nowrap; gap: 4px; }
  body.live-chart-full #live-extra-pick { font-size: 0; min-width: 40px; }
  body.live-chart-full #live-extra-pick::before { content: "＋"; font-size: 1.1rem; }
  body.live-chart-full .live-chart-capo { font-size: 0; }
  body.live-chart-full .live-chart-capo select { font-size: .85rem; }
}
/* Rolagem no tempo (música sem VS). */
.chart-tempo { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; padding: 6px 8px; border-radius: 10px; background: #10141cee; border: 1px solid var(--line-soft, #222a38); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.chart-tempo[hidden] { display: none; }
.chart-tempo .tempo-play { min-height: 38px; padding: 6px 12px; font-weight: 650; }
.chart-tempo .tempo-play.is-on { background: var(--gold); color: #14110a; }
.chart-tempo .tempo-step { min-width: 38px; min-height: 38px; padding: 0; font-size: 1.1rem; }
.chart-tempo .tempo-speed { color: var(--dim, #8b93a3); font-size: .82rem; min-width: 92px; text-align: center; }
/* Modo Ministro (celular deitado, tela fixa). */
.minister-mode { position: fixed; inset: 0; z-index: 9600; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: #0b0e14; color: #f1ead8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.mm-top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.mm-exit { min-height: 38px; padding: 4px 12px; }
.mm-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; }
.mm-key { color: var(--gold); font-weight: 600; }
.mm-status { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: #8b93a3; }
.mm-status.is-live { color: #6fd39b; }
.mm-status.is-off { color: #ff8a7a; }
.mm-now { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 8px 12px; border-radius: 12px; background: #121822; }
.mm-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8b93a3; }
.mm-current { font-size: 1.25rem; }
.mm-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #1f2633; overflow: hidden; }
.mm-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .45s linear; }
.mm-body { display: grid; grid-template-columns: 1fr minmax(150px, 26%); gap: 10px; min-height: 0; }
.mm-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: minmax(64px, 1fr); gap: 8px; min-height: 0; overflow-y: auto; }
.mm-section { min-height: 64px; padding: 6px; border-radius: 14px; border: 2px solid #263042; background: #151b26; color: #f1ead8; font-size: 1.05rem; font-weight: 700; }
.mm-section.is-current { border-color: #6fd39b; background: #133024; }
.mm-section.is-next { border-color: var(--gold); background: var(--gold); color: #14110a; }
.mm-section.is-asked { border-color: var(--gold); animation: mm-pulse 1s ease-in-out infinite; }
@keyframes mm-pulse { 50% { background: #3a2f17; } }
.mm-side { display: grid; grid-template-rows: 1fr auto auto; gap: 8px; min-height: 0; }
.mm-loop { border-radius: 16px; border: 2px solid #3b4a63; background: #151b26; color: #f1ead8; font-size: 1.3rem; font-weight: 800; }
.mm-loop.is-on { background: #7cc4ff; border-color: #7cc4ff; color: #0b1520; }
.mm-loop.is-asked { animation: mm-pulse 1s ease-in-out infinite; }
.mm-cancel { min-height: 44px; border-radius: 12px; }
.mm-hint { margin: 0; font-size: .8rem; color: #b8bfcc; line-height: 1.3; }
.mm-empty { color: #8b93a3; }
.mm-rotate { display: none; }
@media (orientation: portrait) { .mm-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .mm-side { grid-template-rows: 64px auto auto; } .mm-rotate { display: block; text-align: center; font-size: .78rem; color: #8b93a3; } }
.live-show .minister-open { margin-top: 8px; width: 100%; }
.extra-dialog .extra-song { min-height: 58px; font-size: 1rem; }
.extra-dialog .extra-hint { display: block; margin: 2px 0 4px; }
.extra-dialog input[type="search"] { min-height: 44px; font-size: 1rem; }
/* Painel minimizável (Escala → Quem mais serviu). */
.collapse-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: left; box-shadow: none; min-height: 44px; }
.collapse-head h2 { margin: 2px 0 0; }
.collapse-head:hover { background: none; }
.collapse-icon { font-size: 1.1rem; color: var(--dim); }
.collapsible-panel .collapse-body { margin-top: 8px; }
/* Cultos passados (mais de 1 semana): guardados num grupo que abre e fecha. */
.past-shows-box { grid-column: 1 / -1; margin-top: 14px; }
.past-shows-box > summary { cursor: pointer; color: var(--dim); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.past-shows-box .past-shows { margin-top: 10px; opacity: .85; }
.chart-link { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; }
.chart-link select { flex: 1; min-width: 0; }
.new-chart-dialog form { display: grid; gap: 10px; }
.new-chart-dialog { width: min(640px, calc(100vw - 32px)); }

/* Energia da seção (degradê verde → amarelo → vermelho), medida no VS. */
.cue-button.has-energy, .mm-section.has-energy { border-left: 7px solid var(--energy); background-image: linear-gradient(90deg, color-mix(in srgb, var(--energy) 24%, transparent), transparent 75%); }
#free-click.is-on { background: var(--gold); color: #14110a; }
.live-extra-bar { flex-wrap: wrap; }
/* Frases da tela de abertura: trocam com fade. */
.boot-splash small { box-sizing: content-box; width: min(86vw, 420px); height: 5.8em; overflow: hidden; white-space: pre-line; text-align: center; line-height: 1.45; transition: opacity .4s ease; }
.boot-splash small.is-fading { opacity: 0; }
.boot-bar.is-real span { left: 0; width: 0; animation: none; background: linear-gradient(90deg, rgba(var(--gold-rgb), .55), var(--gold)); transition: none; }
/* Escolher música da nuvem: lista limpa com busca (nome, artista, uma etiqueta). */
.library-pick { display: grid; gap: 8px; }
.library-pick-title { font-size: .9rem; color: var(--dim); }
.library-picker { display: grid; gap: 4px; max-height: min(46vh, 380px); overflow-y: auto; padding: 2px; border: 1px solid var(--line); border-radius: 12px; }
.library-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 12px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; }
.library-option:hover { background: rgba(255, 255, 255, .04); }
.library-option[aria-selected="true"] { border-color: var(--gold); background: rgba(var(--gold-rgb), .10); }
.library-option .song-copy { display: grid; gap: 2px; min-width: 0; }
.library-option .song-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-option .song-copy small { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-recent { color: var(--amber); }
.library-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; color: var(--dim); border: 1px solid var(--line); }
.library-badge.is-vs { color: var(--gold); border-color: rgba(var(--gold-rgb), .5); }
.library-picker .empty { padding: 10px 12px; margin: 0; }

/* Trocar de área (DOXA → Nexus / Mídia): o logo ganha uma setinha quando a pessoa tem outras áreas. */
.brand.has-areas::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--gold, var(--gold)); border-bottom: 2px solid var(--gold, var(--gold)); transform: rotate(45deg) translateY(-3px); }
.area-dialog { width: min(92vw, 420px); display: grid; gap: 10px; }
.area-dialog h2 { margin: 0 0 4px; }
.area-option { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--line, #262e3d); background: rgba(255, 255, 255, .03); color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.area-option img { border-radius: 26%; flex: 0 0 auto; }
.area-option span { display: grid; gap: 2px; }
.area-option small { color: var(--dim, #9aa3b2); }
.area-option.is-current { border-color: rgba(var(--gold-rgb), .6); background: rgba(var(--gold-rgb), .1); }

/* ===== Família NEXUS: o DOXA com o mesmo visual da Nexus e da Signal (só aparência) =====
   Cantos mais redondos, cartões de vidro, botões em pílula com brilho dourado e fundo com brilho.
   Ao vivo (stage) e Timeline ficam como estavam: no culto nada muda de lugar nem de tamanho. */
body { background: radial-gradient(900px 520px at 50% -12%, rgba(var(--gold-rgb), .13), transparent 62%), radial-gradient(600px 420px at 110% 40%, rgba(var(--gold-rgb), .05), transparent 60%), var(--bg); background-attachment: fixed; }
.brand img { border-radius: 26%; box-shadow: 0 6px 18px -8px rgba(var(--gold-rgb), .7); }
/* Sem desfoque no topo: ele prenderia a barra de abas do celular (fixa embaixo) dentro do cabeçalho. */
@media (min-width: 621px) { .tabs { gap: 4px; padding: 4px; border-radius: 18px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); } }
.tabs button { border-radius: 14px; }
.tabs button[aria-selected="true"] { background: linear-gradient(135deg, var(--gold-strong), var(--gold)); color: #1a1206; box-shadow: 0 8px 22px -12px rgba(var(--gold-rgb), .9); }
.tabs .tab-live[aria-selected="true"] { background: linear-gradient(135deg, #9df0bf, #3fb877); color: #052012; box-shadow: 0 8px 22px -12px rgba(95, 212, 154, .9); }
.conflict-dialog { border-radius: 26px; border-color: rgba(255, 255, 255, .1); background: rgba(18, 22, 28, .9); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); }
body:not([data-view="stage"]):not([data-view="timeline"]) .panel { border-radius: 22px; border-color: rgba(255, 255, 255, .085); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -28px rgba(0, 0, 0, .9); }
body:not([data-view="stage"]):not([data-view="timeline"]) main button:not(.quiet):not(.danger) { border-radius: 14px; }
body:not([data-view="stage"]):not([data-view="timeline"]) main button.gold { border: 0; background: linear-gradient(135deg, var(--gold-strong), var(--gold)); color: #1a1206; box-shadow: 0 12px 26px -14px rgba(var(--gold-rgb), .95); }
body:not([data-view="stage"]):not([data-view="timeline"]) main input:not([type="range"]):not([type="checkbox"]), body:not([data-view="stage"]):not([data-view="timeline"]) main select { border-radius: 14px; background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .085); }
body:not([data-view="stage"]):not([data-view="timeline"]) .kicker { color: var(--gold); letter-spacing: .16em; font-weight: 800; }

/* Lembrete dos avisos (push-nag.js): faixa acima da barra de abas, a cada abertura enquanto estiverem desligados. */
.push-nag { position: fixed; z-index: 34; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 18px; background: rgba(24, 22, 16, .95); border: 1px solid rgba(var(--gold-rgb), .5); box-shadow: 0 18px 40px -16px #000; font-size: .92rem; font-weight: 600; }
.push-nag span { flex: 1 1 200px; min-width: 0; }
@media (max-width: 620px) { .push-nag { bottom: calc(78px + env(safe-area-inset-bottom)); } }

/* Tela de carregamento do DOXA no mesmo estilo da Nexus e do Ready. */
body.is-booting .boot-splash, .boot-splash.is-leaving { gap: 16px; background: radial-gradient(700px 420px at 50% 38%, rgba(var(--gold-rgb), .16), transparent 65%), var(--bg, #0b0e14); }
.boot-splash img { border-radius: 26%; }
.boot-splash strong { font-weight: 800; letter-spacing: .32em; }
.boot-bar { width: 180px; background: rgba(var(--gold-rgb), .16); }
.boot-bar.is-real span { background: linear-gradient(90deg, var(--gold-strong), var(--gold)); box-shadow: 0 0 12px rgba(var(--gold-rgb), .7); }
.boot-splash small { font-size: 14.5px; color: #9aa3b2; }

/* ⚙ do clique da música sem VS */
.free-click-dialog form { display: grid; gap: 12px; }
.free-click-tempo { display: flex; gap: 6px; align-items: center; }
.free-click-tempo input { width: 90px; text-align: center; }

/* Bolinha da conta (igual à Nexus e ao Ready) e o menu dela. */
#account-toggle.avatar-btn, .account-menu .avatar-btn { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; border: 0; font-weight: 800; font-size: 15px; color: #1a1206; background: linear-gradient(135deg, var(--gold-strong), var(--gold)); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18); }
.account-menu { width: min(92vw, 400px); display: grid; gap: 8px; }
.account-menu-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.account-menu-head .avatar-btn { width: 48px; height: 48px; font-size: 19px; }
.account-menu-head div { display: grid; gap: 2px; min-width: 0; }
.account-menu-head small { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.account-menu-item { display: grid; gap: 2px; text-align: left; min-height: 56px; border-radius: 16px; }
.account-menu-item small { color: var(--dim); font-weight: 500; }
.account-menu-item.is-danger strong { color: var(--red); }

#account-toggle.avatar-btn img, .account-menu .avatar-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#account-toggle.avatar-btn:has(img), .account-menu .avatar-btn:has(img) { overflow: hidden; }
.profile-dialog label { display: grid; gap: 6px; }
.profile-preview { width: 72px !important; height: 72px !important; font-size: 26px !important; overflow: hidden; }
.profile-dialog .account-menu-head div { display: flex; gap: 8px; flex-wrap: wrap; }

/* Minha escala: lembrete para quem vai servir. */
.serve-note { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(var(--gold-rgb), .35); background: linear-gradient(135deg, rgba(var(--gold-rgb), .1), transparent); }
.serve-note strong { font-size: .98rem; }
.serve-note small { color: var(--dim); font-style: italic; line-height: 1.45; }

/* Trocar de área (DOXA): mesma folha do Ready e da Nexus. */
.area-sheet { margin: auto auto 0; padding: 0; width: 100%; max-width: 480px; max-height: 86dvh; border: 0; background: transparent; color: var(--fg, #f5f6f7); overflow: visible; }
.area-sheet::backdrop { background: rgba(0, 0, 0, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.area-sheet-body { display: grid; gap: 10px; padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 22px); background: rgba(18, 22, 28, .9); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 30px 30px 0 0; animation: area-up .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes area-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.area-grab { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); margin-bottom: 4px; }
.area-family { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.area-word { height: 34px; width: auto; }
.area-church { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #4aa8ff; background: rgba(10, 132, 255, .16); }
.area-title { font-size: 18px; padding: 4px 4px 0; }
.area-choice { --o: 229, 184, 92; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); color: inherit; text-decoration: none; text-align: left; font: inherit; width: 100%; }
.area-choice:active { transform: scale(.99); }
.area-choice img { border-radius: 26%; flex: 0 0 auto; }
.area-choice span:not(.area-check) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.area-choice strong { font-size: 16px; }
.area-choice small { font-size: 12.5px; color: var(--dim, #9aa3b2); }
.area-choice.is-current { background: linear-gradient(135deg, rgba(var(--o), .2), rgba(var(--o), .05)); border-color: rgba(var(--o), .6); box-shadow: 0 14px 30px -18px rgba(var(--o), .9); }
.area-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--o)); color: #1a1206; font-weight: 900; flex: 0 0 auto; }
.area-note { color: var(--dim, #9aa3b2); font-size: 12px; padding: 4px 4px 0; }

/* Áudios das vozes (aula de canto): Preparar, escala do líder de vozes e Modo Estudo. */
.voice-guides { display: grid; gap: 8px; margin-top: 12px; }
.voice-guides-list { display: grid; gap: 6px; }
.voice-guide { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line, #262e3d); }
.voice-guide.has-audio { border-color: rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .07); }
.voice-guide .voice-name { font-weight: 700; }
.voice-guide .voice-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.schedule-voice-audios { display: grid; gap: 8px; margin: 10px 0; }
.schedule-voice-audios h3 { margin: 0; }
.voice-song { border: 1px solid var(--line, #262e3d); border-radius: 14px; padding: 8px 12px; }
.voice-song summary { cursor: pointer; font-weight: 700; }

/* Cultos vêm da Nexus: aviso no lugar do antigo "+ Novo culto". */
.from-nexus-note { margin: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(0, 180, 255, .35); background: rgba(0, 180, 255, .08); color: var(--dim); font-size: .9rem; }
.from-nexus-note a { color: #4cc9ff; font-weight: 800; margin-left: 4px; }

/* Preparar · editor da música em abas (Neste culto, Música, Áudios, Cifra, Tempo e pad, Seções, Arquivo). */
.editor > summary.editor-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.editor-summary small { color: var(--dim); font-weight: 600; font-size: .82rem; }
.editor[open] > .editor-order { margin: 2px 0 10px; }
.editor-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin: 0 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); scrollbar-width: none; }
.editor-tabs::-webkit-scrollbar { display: none; }
.editor-tab { flex: 0 0 auto; min-height: 34px; padding: 6px 14px; border-radius: 10px; border: 0; background: transparent; color: var(--dim); font-weight: 700; font-size: .88rem; }
.editor-tab[aria-selected="true"] { background: rgba(var(--gold-rgb), .16); color: var(--gold-strong, var(--gold-strong)); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .4); }
.editor-panels > .editor-panel { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.editor-panels > .editor-panel[hidden] { display: none; }
.editor-panels > .editor-panel > .editor-section-head h4 { display: none; }
.editor-panels > .tech-part { border: 0; padding: 0; }
.editor-panels > .tech-part > * { margin-top: 0; }
.editor-transpose { max-width: 420px; }

/* Cartão do culto: ministro, passagem de som e quem criou. */
.show-info { display: grid; gap: 2px; }
.show-info-line { display: flex; gap: 6px; color: var(--dim); font-size: .82rem; }
.show-info-line b { color: var(--text, #f5f6f7); font-weight: 700; }

/* Preparar · Tempo e pad e Seções mais leves. */
.tempo-map-editor { border: 1px solid var(--line-soft); border-radius: 12px; padding: 0 12px; }
.tempo-map-editor > summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--dim); }
.tempo-map-editor[open] { padding-bottom: 12px; }
.tempo-map-editor[open] > summary { color: var(--text); }
.cue-guide-row .cue-remove { min-width: 34px; min-height: 34px; padding: 0; color: var(--dim); border-color: transparent; background: transparent; }
.cue-guide-row .cue-remove:hover { color: var(--red); }

/* Textos compridos (nome de culto sem espaços, e-mail) quebram a linha em vez de estourar a tela. */
.home-item, .schedule-day, .show-card, .schedule-assignment, .team-member, .home-item > *, .schedule-day > * { min-width: 0; }
.home-item :is(strong, small, span, p, h2, h3), .schedule-day :is(strong, small, span, p, h3), .show-card :is(h2, p, small, span), .schedule-assignment :is(strong, p, small), .editor-summary strong { overflow-wrap: anywhere; }

/* Mural de avisos no Início. */
.home-notices-panel { border-color: rgba(0, 180, 255, .35); }
.home-notice .notice-text { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text, #f5f6f7); }

/* Nome da igreja ao lado do DOXA e aviso de assinatura pausada. */
.top .brand { display: inline-flex; align-items: center; gap: 8px; }
.top .brand .brand-church { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--dim); padding-left: 8px; border-left: 1px solid var(--line-soft); }
.top .brand { min-width: 0; flex-shrink: 1; }
@media (max-width: 560px) { .top .brand .brand-church { max-width: 26vw; font-size: .72rem; } }
.plan-paused { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(8, 10, 14, .94); }
.plan-paused strong { font-size: 1.4rem; color: var(--gold-strong, var(--gold-strong)); }
.plan-paused p { max-width: 420px; color: var(--dim); line-height: 1.5; }

/* Painel do sistema (igrejas e assinaturas). */
.system-panel { width: min(94vw, 520px); }
.system-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.system-church { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-soft); }
.system-church.is-paused { opacity: .7; border-style: dashed; }
.system-head { display: flex; justify-content: space-between; gap: 8px; }
.system-status { font-size: .78rem; font-weight: 800; color: var(--gold-strong, var(--gold-strong)); }
.system-church button { justify-self: start; }
.system-new { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* Detalhes do culto (tema, roupa, observações, link). */
.culto-info { display: grid; gap: 5px; padding: 9px 11px; margin: 6px 0; border-radius: 12px; background: rgba(var(--gold-rgb), .07); border: 1px solid rgba(var(--gold-rgb), .25); }
.culto-info .info-line { font-size: .86rem; line-height: 1.45; color: var(--text, #f5f6f7); overflow-wrap: anywhere; white-space: pre-wrap; }
.culto-info .info-line b { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, var(--gold)); margin-right: 4px; }
.culto-info .info-link { color: var(--gold-strong, var(--gold-strong)); font-weight: 700; text-decoration: none; }
.culto-info .swatches { display: inline-flex; gap: 4px; vertical-align: middle; }
.culto-info .swatches i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: inline-block; }

/* Personalizar a igreja (Equipe). */
.church-looks { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.looks-label { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.looks-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.looks-color { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .2); }
.looks-color[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.looks-colors input[type="color"] { width: 40px; height: 34px; padding: 0; border: 0; background: none; }
.looks-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.looks-logo img { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.looks-tabs { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.looks-tab { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.church-looks > button { justify-self: start; }
.brand-church-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; vertical-align: -3px; margin-right: 5px; }
.boot-splash .splash-church { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; margin-top: 10px; }

/* Menu ☰ em todas as telas: as abas viram uma lista em pé que abre pela esquerda (substitui a barra de abas). */
.nav-burger { flex: 0 0 auto; width: 42px; height: 42px; min-height: 42px; padding: 0; display: grid; place-items: center; border-radius: 12px; }
html body .tabs.as-drawer { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: min(82vw, 300px) !important; max-width: none !important; z-index: 85 !important; order: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; margin: 0 !important; padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px) !important; overflow-y: auto !important; border: 0 !important; border-right: 1px solid var(--line-soft) !important; border-radius: 0 22px 22px 0 !important; background: #0d1118 !important; box-shadow: 18px 0 48px -18px #000c; transform: translateX(-106%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
html body.nav-open .tabs.as-drawer { transform: none; }
html body .tabs.as-drawer button { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important; min-height: 50px !important; padding: 10px 14px !important; font-size: 1rem !important; letter-spacing: 0 !important; border-radius: 14px !important; white-space: nowrap !important; }
html body .tabs.as-drawer button[hidden] { display: none !important; }
html body .tabs.as-drawer button::before { margin: 0 !important; width: 20px !important; height: 20px !important; flex: 0 0 auto; }
html body .tabs.as-drawer button[aria-selected="true"] { background: rgba(var(--gold-rgb), .14) !important; color: var(--text) !important; box-shadow: inset 3px 0 0 var(--gold) !important; }
.nav-drawer-head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; letter-spacing: .14em; }
.nav-drawer-head img { border-radius: 9px; }
.nav-backdrop { position: fixed; inset: 0; z-index: 84; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { html body .tabs.as-drawer { transition: none; } }
/* Sem a barra de abas de baixo no celular, a página não precisa mais do espaço extra no fim. */
@media (max-width: 760px) { html body:has(.tabs.as-drawer) main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); } }
/* Topo do celular: ⓘ (instalar) e ⚙ (preferências) ficam só no menu da bolinha; o nome da igreja vira só o logo. */
@media (max-width: 560px) {
  .top .install-help, .top .prefs-gear { display: none !important; }
  .top { flex-wrap: nowrap !important; }
  .top .brand .brand-church { font-size: 0 !important; padding-left: 6px; max-width: none; }
  .top .brand .brand-church-logo { margin-right: 0; }
}

/* Ao vivo · Som do culto: pads, clique, guia e mixer num painel só, com abas; ajustes finos recolhidos. */
.stage-grid { grid-template-areas: "setlist performance" "setlist sections" "setlist chart" "setlist pads"; }
@media (pointer: coarse) and (min-width: 901px) { .stage-grid { grid-template-areas: "setlist performance" "setlist chart" "setlist sections" "setlist pads"; } }
@media (max-width: 900px) { .stage-grid { grid-template-areas: "performance" "chart" "sections" "setlist" "pads"; } }
.sound-console { grid-area: pads; display: grid; gap: 12px; min-width: 0; }
.sound-console .console-pane { grid-area: auto; display: grid; gap: 12px; min-width: 0; padding: 0; margin: 0; border: 0; background: none; }
.sound-console .console-pane[hidden] { display: none; }
.console-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.console-tabs button { flex: 1 1 0; min-width: max-content; min-height: 38px; padding: 6px 12px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--dim); font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.console-tabs button small { font-size: .62rem; font-weight: 700; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.console-tabs button small.is-on, .console-tabs button small.is-on-text { color: var(--green); }
.console-tabs button[aria-selected="true"] { background: var(--surface-3, #1d2430); color: var(--text); }
.console-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.console-volume { flex: 1 1 220px; display: grid; gap: 4px; font-size: .82rem; color: var(--dim); }
.console-inline { display: grid; gap: 4px; font-size: .82rem; color: var(--dim); }
.console-row #click-toggle { min-width: 150px; }
#click-toggle[aria-pressed="true"] { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }
.console-more > summary { min-height: 32px; display: flex; align-items: center; color: var(--dim); cursor: pointer; font-size: .82rem; width: max-content; }
.console-more[open] { display: grid; gap: 10px; }
.console-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.console-grid label { display: grid; gap: 4px; font-size: .82rem; color: var(--dim); }
.sound-console .mixer-tools { align-items: start; margin-bottom: 4px; }
.sound-console .batch-box .batch-routing { flex-wrap: wrap; }
.sound-console .guide-announce { font-size: .85rem; }
/* Tocando: sem vidro no cabeçalho (menos trabalho para a GPU do iPad/celular). */
body.is-playing .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }

/* Cultos: cartões enxutos (data, nome, uma linha de resumo) e o resto em “⋯”. */
.show-card { min-height: 0; gap: 8px; }
.show-card .show-summary { margin: 0; color: var(--dim); font-size: .84rem; }
.show-card .actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.show-card .actions > button { flex: 1 1 0; min-width: 0; }
.show-card .actions .show-more { flex: 0 0 auto; position: relative; }
.show-card .actions .show-more > summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-soft); color: var(--dim); cursor: pointer; font-size: 1.1rem; letter-spacing: .05em; }
.show-card .actions .show-more > summary::-webkit-details-marker { display: none; }
.show-card .actions .show-more[open] > summary { color: var(--text); border-color: var(--line, #2c3545); }
.show-more-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; gap: 4px; min-width: 190px; padding: 6px; border-radius: 12px; border: 1px solid var(--line, #2c3545); background: var(--surface-2, #141922); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.show-more-menu button { justify-content: flex-start; text-align: left; border: 0; background: transparent; box-shadow: none; min-height: 38px; }
.show-more-menu button:hover { background: rgba(255, 255, 255, .05); }
.show-more-menu .danger { color: #ffb4aa; }
.show-more-menu small { padding: 4px 10px 2px; color: var(--faint); font-size: .74rem; }
.show-card .culto-info { margin: 0; padding: 7px 10px; }
.show-card .actions .danger { position: static; }
.library-more { margin-top: 8px; }
.library-more > summary { cursor: pointer; color: var(--dim); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.library-more[open] > summary { margin-bottom: 12px; }
.show-card .actions > button, .show-card .actions > button:first-child { min-width: 0; padding-left: 10px; padding-right: 10px; }
.show-card .actions .show-more > summary { width: 38px; height: 38px; }
.library-more > summary::before { content: "▸"; margin-right: 8px; transition: transform .15s ease; }
.library-more[open] > summary::before { transform: rotate(90deg); }
.library-more > summary::-webkit-details-marker { display: none; }
.library-more > summary { list-style: none; }
.console-more > summary { list-style: none; }
.console-more > summary::-webkit-details-marker { display: none; }
.console-more > summary::before { content: "▸"; margin-right: 7px; transition: transform .15s ease; }
.console-more[open] > summary::before { transform: rotate(90deg); }
/* Sem música carregada não há seções: o painel some. */
.stage-grid > .panel.sections:not(:has(#cue-list > *)) { display: none; }
.show-more:not([open]) .show-more-menu { display: none; }
.console-tabs button small { font-size: .66rem; }
@media (max-width: 600px) {
  .console-tabs button { padding: 6px 8px; gap: 5px; font-size: .9rem; }
  .console-tabs button small { display: none; }
  .console-tabs button small.is-on { display: inline-block; width: 7px; height: 7px; padding: 0; border-radius: 50%; background: var(--green); font-size: 0; }
  #song-name { font-size: 1.55rem; }
  .clock strong { font-size: 1.7rem; }
}
/* Equipe: formulário de membro recolhido até tocar em “＋ Adicionar” ou editar alguém. */
.team-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-form:not(.is-open) > :not(.team-form-head) { display: none !important; }
.team-form:not(.is-open) { align-self: start; }
.looks-box > summary { cursor: pointer; font-weight: 650; min-height: 40px; display: flex; align-items: center; list-style: none; }
.looks-box > summary::-webkit-details-marker { display: none; }
.looks-box > summary::before { content: "▸"; margin-right: 8px; color: var(--dim); transition: transform .15s ease; }
.looks-box[open] > summary::before { transform: rotate(90deg); }
.looks-box[open] { display: grid; gap: 10px; }
/* Cor de destaque: a bolinha mantém a própria cor; a escolhida ganha um anel em volta (nada de fundo preto). */
#church-looks .looks-color, #church-looks .looks-color:hover:not(:disabled), #church-looks .looks-color[aria-pressed="true"] { background: var(--c) !important; background-image: none !important; color: transparent; }
#church-looks .looks-color[aria-pressed="true"] { border: 2px solid var(--bg, #0b0e14) !important; box-shadow: 0 0 0 2px var(--c), 0 0 0 4px rgba(255, 255, 255, .85) !important; transform: scale(1.06); }
#church-looks .looks-color { border-radius: 50% !important; width: 34px; height: 34px; min-width: 34px; }
.looks-box > small, .looks-box > .looks-label { display: block; }
.looks-box .looks-label { margin-top: 4px; }
/* Sem internet: faixa discreta acima das abas; o DOXA segue com os cultos baixados. */
body.is-offline::after { content: "Sem internet · cultos baixados continuam tocando"; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 44; max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 999px; background: #2a2414; border: 1px solid rgba(var(--gold-rgb), .45); color: #ffe3a0; font-size: .8rem; font-weight: 650; text-align: center; pointer-events: none; }
/* Início limpo */
#home .page-head { align-items: center; }
#home .home-refresh { min-width: 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 12px; font-size: 1.1rem; }
#home .home-item.is-link { cursor: pointer; transition: border-color .15s ease; }
#home .home-item.is-link:hover { border-color: rgba(var(--gold-rgb), .4); }
#home .home-link { display: block; margin-top: 6px; color: var(--gold); font-size: .8rem; font-weight: 650; }
#home .home-date { margin-top: 2px; }
.free-tempo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .025); }
.free-tempo-label { flex: 1 1 100%; color: var(--dim); font-size: .78rem; }
.free-tempo input { width: 64px; min-height: 36px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
.free-tempo-unit { color: var(--dim); font-size: .78rem; margin-right: 4px; }
.free-tempo button { min-width: 38px; min-height: 36px; }
.free-tempo #free-bpm-play { margin-left: auto; min-width: 96px; }
#free-bpm-play.is-on { background: var(--surface-3); color: var(--text); border-color: var(--line); }
/* Seção atual com cor de energia: texto claro e moldura dourada (antes ficava escuro sobre escuro). */
.cue-button.has-energy.is-current { color: var(--text); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 18px -10px rgba(var(--gold-rgb), .7); }
.cue-button.has-energy.is-current small { color: var(--gold); }
/* Mac / telas largas: três colunas no Ao vivo — repertório | player e seções | som do culto (fica sempre à mão). */
@media (min-width: 1360px) {
  .stage-grid { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(320px, 380px); grid-template-areas: "setlist performance pads" "setlist sections pads" "setlist chart pads"; align-items: start; }
  .sound-console { position: sticky; top: calc(var(--top) + 16px); max-height: calc(100vh - var(--top) - 32px); overflow-y: auto; }
  .sound-console #pad-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sound-console #pad-keys button { min-height: 44px; }
  .sound-console .console-tabs button small { display: none; }
  .sound-console .console-tabs button small.is-on { display: inline-block; width: 7px; height: 7px; padding: 0; border-radius: 50%; background: var(--green); font-size: 0; }
  .sound-console .channel-grid { grid-template-columns: 1fr; }
}
.culto-details-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.culto-details-dialog form { display: grid; gap: 12px; }
.culto-details-dialog label { display: grid; gap: 4px; color: var(--dim); font-size: .85rem; }
.culto-details-dialog h2 { margin: 0; font-size: 1.15rem; }
.culto-details-dialog .actions { justify-content: flex-end; }
/* Capa do álbum */
.cover-thumb { display: inline-grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; background: rgba(255, 255, 255, .05) center / cover no-repeat; border: 1px solid var(--line-soft); color: var(--faint); font-size: 1.2rem; }
.cover-thumb.has-cover { color: transparent; border-color: rgba(255, 255, 255, .12); }
.cover-thumb.small { width: 40px; height: 40px; border-radius: 8px; font-size: .9rem; }
.cover-block { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--line-soft); }
.cover-block .cover-thumb { width: 72px; height: 72px; }
.cover-block > div { display: grid; gap: 4px; }
.cloud-song { display: flex; align-items: center; gap: 12px; }
.cloud-song > div { flex: 1 1 auto; min-width: 0; }
.song-number.has-cover { width: 34px; height: 34px; min-width: 34px; border-radius: 7px; background: center / cover no-repeat; color: transparent; }
.now-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.now-title h1 { min-width: 0; }
.now-cover { width: 54px; height: 54px; }
.now-cover[hidden] { display: none; }
.catalog-suggest { display: grid; gap: 4px; margin-top: -6px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.catalog-suggest[hidden] { display: none; }
.catalog-hint { padding: 2px 6px; color: var(--faint); font-size: .72rem; }
.catalog-option { display: grid; gap: 1px; justify-items: start; text-align: left; min-height: 0; padding: 8px 10px; border: 0; background: transparent; box-shadow: none; }
.catalog-option:hover { background: rgba(255, 255, 255, .05); }
.catalog-option small { color: var(--dim); font-size: .78rem; }
/* Logos nunca achatam: mantêm a proporção e diminuem por inteiro quando falta espaço (iPhone com nome de igreja longo). */
.area-family { min-width: 0; }
.area-word { height: auto; max-height: 34px; width: auto; max-width: min(62%, 230px); object-fit: contain; object-position: left center; flex: 0 1 auto; min-width: 0; }
.area-church { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-choice img, .area-sheet-body > img { flex: 0 0 auto; object-fit: contain; }
/* DOXA: nome + slogan ao lado do ícone (no celular também). */
.top .brand .brand-lockup { display: grid !important; gap: 2px; line-height: 1.05; letter-spacing: normal; min-width: 0; }
.top .brand .brand-lockup b { font-size: .98rem; font-weight: 800; letter-spacing: .2em; }
.top .brand .brand-lockup small { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.welcome .brand-slogan { display: block; margin: 2px 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 620px) { .top .brand .brand-lockup b { font-size: .86rem; letter-spacing: .16em; } .top .brand .brand-lockup small { font-size: .52rem; letter-spacing: .1em; } }
@media (max-width: 350px) { .top .brand .brand-lockup small { display: none; } }
.boot-slogan { margin-top: -6px; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.top .brand .brand-lockup { flex: 0 0 auto; }
.top .brand.has-areas::after { flex: 0 0 auto; align-self: center; margin-left: 6px; }
@media (max-width: 620px) { .top { background-color: var(--bg) !important; } }
.top .brand { flex: 0 0 auto; }
@media (max-width: 620px) { .top { gap: 10px; } .top .brand { margin-right: auto; } }
/* Barra de cima: botões da direita nunca encolhem; quem cede espaço é o slogan (termina em “…”). */
.top > :not(.brand) { flex-shrink: 0; }
.top .brand { flex: 0 1 auto; min-width: 0; }
.top .brand .brand-lockup { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.top .brand .brand-lockup small { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .top .brand .brand-church { display: none !important; } .top .brand.has-areas::after { margin-left: 2px; } .top .brand { gap: 7px; } .top .brand img { width: 30px; height: 30px; } }
@media (max-width: 620px) { .top .brand .brand-lockup small { font-size: .5rem; letter-spacing: .03em; } .top .chat-toggle { width: 40px; min-width: 40px; padding: 0; } }
/* Abertura: começa vazia; a logo sobe de baixo até o meio, depois o nome, o slogan e a barra (um após o outro). */
@keyframes doxa-rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.boot-splash img { animation: doxa-rise .75s cubic-bezier(.2, .8, .2, 1) both, doxa-splash-glow 1.8s ease-in-out .75s infinite; }
.boot-splash strong { animation: doxa-rise .75s cubic-bezier(.2, .8, .2, 1) .15s both; }
.boot-splash .boot-slogan { animation: doxa-rise .75s cubic-bezier(.2, .8, .2, 1) .3s both; }
.boot-splash .boot-bar { animation: doxa-rise .75s cubic-bezier(.2, .8, .2, 1) .45s both; }
@media (prefers-reduced-motion: reduce) { .boot-splash img, .boot-splash strong, .boot-splash .boot-slogan, .boot-splash .boot-bar { animation: none; } }
@media (max-width: 380px) { .top .brand img { width: 28px; height: 28px; } .top .brand { gap: 6px; } .top .brand .brand-lockup b { font-size: .8rem; letter-spacing: .14em; } .top .brand .brand-lockup small { font-size: .46rem; letter-spacing: .02em; } .top { gap: 8px; padding-left: 10px; padding-right: 10px; } }
/* Menu ☰: rodapé com player/conexão, instalar e preferências. */
.nav-drawer-foot { margin-top: auto; display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.nav-drawer-status { padding: 4px 12px; color: var(--faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-drawer-status:empty { display: none; }
html body .tabs.as-drawer .nav-drawer-extra { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--dim); font-weight: 600; text-align: left; justify-content: flex-start; }
html body .tabs.as-drawer .nav-drawer-extra:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
/* Celular: barra de cima mais alta, sem os selos (vão para o menu); ícone e nome maiores. */
@media (max-width: 620px) {
  :root { --top: 62px; }
  .top .system { display: none !important; }
  .top { min-height: var(--top); gap: 8px; }
  .top .brand img { width: 36px !important; height: 36px !important; border-radius: 10px; }
  .top .brand .brand-lockup b { font-size: .98rem; letter-spacing: .16em; }
  .top .brand .brand-lockup small { font-size: .54rem; letter-spacing: .05em; }
  .top .nav-burger { width: 38px; min-width: 38px; padding: 0; }
  .top .chat-toggle, .top .inbox > button, .top #account-toggle { flex-shrink: 0; }
}
@media (max-width: 380px) { .top .brand img { width: 30px !important; height: 30px !important; } .top .brand .brand-lockup b { font-size: .86rem; letter-spacing: .12em; } .top .brand .brand-lockup small { font-size: .48rem; letter-spacing: .02em; } }
html body .tabs.as-drawer .nav-drawer-extra::before { display: none !important; content: none !important; }
html body .tabs.as-drawer .nav-drawer-extra > span:first-child { width: 18px; text-align: center; font-size: 1rem; }
/* Escala mais limpa */
.schedule-actions { position: static; }
.schedule-when-box { margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 0 12px; }
.schedule-when-box > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--text); font-weight: 600; font-size: .9rem; list-style: none; }
.schedule-when-box > summary::-webkit-details-marker { display: none; }
.schedule-when-box > summary::after { content: "Editar"; margin-left: auto; padding-left: 10px; color: var(--gold); font-size: .78rem; font-weight: 700; }
.schedule-when-box[open] > summary::after { content: "Fechar"; }
.schedule-when-box .schedule-when { margin: 0 0 12px; }
.schedule-positions { margin-top: 12px; }
.schedule-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.schedule-tools > button { min-height: 38px; padding: 6px 12px; font-size: .84rem; }
.schedule-add-row { display: flex; gap: 6px; flex: 1 1 220px; }
.schedule-add-row select { flex: 1 1 auto; min-width: 0; min-height: 38px; }
.schedule-add-row button { min-height: 38px; white-space: nowrap; }
.schedule-hint { margin: 10px 0 0; font-size: .76rem; }
.schedule-savebar { position: sticky; bottom: 0; z-index: 3; padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 4px); margin-top: 10px; background: linear-gradient(to top, var(--panel, #121822) 70%, transparent); }
.schedule-savebar #schedule-save { width: 100%; min-height: 48px; }
.schedule-position > select:first-child { border-color: transparent; background-color: transparent; padding-left: 4px; }
/* Calendário: cartão inteiro clicável com barrinha de cobertura */
.schedule-day.is-link { cursor: pointer; }
.schedule-day.is-link:hover { border-color: rgba(var(--gold-rgb), .4); }
.coverage-bar { display: flex; gap: 2px; height: 5px; margin-top: 6px; border-radius: 4px; overflow: hidden; max-width: 220px; }
.coverage-bar i { display: block; height: 100%; }
.coverage-bar .ok { background: var(--green); } .coverage-bar .warn { background: var(--gold); } .coverage-bar .bad { background: #e5534b; } .coverage-bar .open { background: rgba(255, 255, 255, .12); }
.schedule-open { display: block; margin-top: 6px; color: var(--gold); font-size: .8rem; font-weight: 650; }
/* Não posso: motivos prontos */
.decline-dialog { width: min(440px, calc(100vw - 24px)); }
.decline-dialog form { display: grid; gap: 12px; }
.decline-dialog h2 { margin: 0; }
.decline-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.decline-reason { min-height: 36px; padding: 6px 12px; border-radius: 999px; font-size: .85rem; }
.decline-reason[aria-pressed="true"] { border-color: var(--gold); background: rgba(var(--gold-rgb), .16); color: var(--text); }
.decline-dialog .actions { justify-content: flex-end; }
/* Disponibilidade: domingos num toque, tipos em botões, fichas */
.availability-quick { display: grid; gap: 8px; }
.availability-quick-label { color: var(--dim); font-size: .82rem; }
.availability-days { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.availability-day { display: grid; place-items: center; gap: 0; min-height: 52px; padding: 4px 0; border-radius: 12px; line-height: 1.05; }
.availability-day b { font-size: 1.05rem; } .availability-day small { font-size: .62rem; text-transform: uppercase; color: var(--dim); }
.availability-day[aria-pressed="true"] { border-color: #e5534b; background: rgba(229, 83, 75, .16); color: #ffb4aa; }
.availability-day[aria-pressed="true"] small { color: #ffb4aa; }
@media (max-width: 460px) { .availability-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.availability-types { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.availability-types button { min-height: 36px; padding: 6px 12px; border-radius: 999px; font-size: .84rem; }
.availability-types button[aria-pressed="true"] { border-color: var(--gold); background: rgba(var(--gold-rgb), .14); color: var(--text); }
.availability-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; border: 1px solid var(--line-soft); font-size: .86rem; }
.availability-x { min-width: 32px; min-height: 32px; padding: 0; border-radius: 50%; }
/* Equipe enxuta */
.team-head-actions { display: flex; gap: 8px; align-items: center; }
#refresh-team { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 12px; }
.team-settings-box > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; font-weight: 650; list-style: none; min-height: 28px; }
.team-settings-box > summary::-webkit-details-marker { display: none; }
.team-settings-box > summary small { color: var(--dim); font-weight: 500; font-size: .78rem; }
.team-settings-box[open] { display: grid; gap: 10px; }
.team-grid { grid-template-columns: 1fr !important; }
.team-grid > form#team-form:not(.is-open) { display: none !important; }
.team-form-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.team-form-dialog .team-form { border: 0; background: none; padding: 0; box-shadow: none; }
.team-form-dialog #team-form-toggle { display: none; }
.team-tools { display: grid; gap: 8px; margin-bottom: 8px; }
.team-search { width: 100%; min-height: 42px; font-size: 16px; }
.team-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.team-filter { min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; }
.team-filter[aria-pressed="true"] { border-color: var(--gold); background: rgba(var(--gold-rgb), .14); color: var(--text); }
.team-rows { display: grid; gap: 6px; }
.team-row { border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.team-row.is-open { border-color: rgba(var(--gold-rgb), .35); }
.team-row.is-inactive { opacity: .6; }
.team-row-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 12px; border: 0; background: none; box-shadow: none; text-align: left; color: inherit; font: inherit; }
.team-avatar { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: hsl(var(--h) 55% 30% / .55); color: hsl(var(--h) 85% 80%); }
.team-row-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.team-row-copy strong, .team-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row-copy small { color: var(--dim); font-size: .8rem; }
.team-dot { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--dim); }
.team-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.team-dot.is-pending::before { background: var(--gold); } .team-dot.is-none::before { background: rgba(255, 255, 255, .3); } .team-dot.is-inactive::before { background: rgba(255, 255, 255, .15); }
.team-row-detail { display: grid; gap: 8px; padding: 0 12px 12px 62px; }
.team-row-detail .actions { flex-wrap: wrap; gap: 6px; }
@media (max-width: 460px) { .team-dot { font-size: 0; gap: 0; } .team-row-detail { padding-left: 12px; } }
.icon-refresh { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 12px; }
/* Posição da escala: em cima função · status · ✕; embaixo a pessoa (e a voz, quando é vocal). */
html body .schedule-position { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "role status remove" "member member member" "note note note"; gap: 6px 8px !important; padding: 10px 12px; }
html body .schedule-position.has-voice { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto !important; grid-template-areas: "role role status remove" "part member member member" "note note note note"; }
html body .schedule-position > .role-pick { grid-area: role; min-height: 30px; padding: 2px 22px 2px 2px; border-color: transparent !important; background-color: transparent !important; box-shadow: none; color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; width: auto; justify-self: start; }
html body .schedule-position > .voice-part { grid-area: part; }
html body .schedule-position > .member-pick { grid-area: member; min-height: 44px; }
html body .schedule-position > .team-status { grid-area: status; justify-self: end; align-self: center; }
html body .schedule-position > .schedule-remove { grid-area: remove; min-width: 30px; min-height: 30px; padding: 0; }
html body .schedule-position > small { grid-area: note; }
@media (min-width: 900px) { html body .schedule-position { grid-template-columns: 150px minmax(0, 1fr) auto auto !important; grid-template-areas: "role member status remove" "note note note note"; } html body .schedule-position.has-voice { grid-template-columns: 150px 130px minmax(0, 1fr) auto auto !important; grid-template-areas: "role part member status remove" "note note note note note"; } }
html body .schedule-position > .member-pick, html body .schedule-position > .voice-part { width: 100% !important; max-width: none !important; min-width: 0; }
html body .schedule-position > .role-pick { max-width: 100%; }
html body .schedule-position.has-voice > select.member-pick, html body .schedule-position > select.member-pick { grid-area: member; }
html body .schedule-position.has-voice > select.voice-part { grid-area: part; }
html body .schedule-position > select.role-pick { grid-area: role; }
html body .schedule-position.has-voice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto !important; }
.schedule-section { margin: 10px 2px 2px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.schedule-section:first-child { margin-top: 0; }
.team-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .06); }
.team-code-label { flex: 1 1 100%; color: var(--dim); font-size: .78rem; }
.team-code-value { font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; letter-spacing: .25em; margin-right: auto; }
.join-hint { display: grid; gap: 8px; justify-items: start; margin-bottom: 14px; border-color: rgba(var(--gold-rgb), .45); }
.join-hint p { margin: 0; }
/* ↻ do Início girando enquanto atualiza */
.home-refresh.is-spinning { animation: home-refresh-spin .8s linear infinite; }
@keyframes home-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .home-refresh.is-spinning { animation: none; opacity: .5; } }
/* Gravar a voz direto no app */
.voice-recorder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(239, 83, 80, .5); background: rgba(239, 83, 80, .07); }
.voice-recorder audio { grid-column: 1 / -1; width: 100%; }
.voice-rec-status { font-variant-numeric: tabular-nums; color: var(--muted, #9aa4b6); font-size: 13px; }
.voice-record { color: #ff8a80; }
@media (max-width: 520px) { .voice-recorder { grid-template-columns: 1fr; } .voice-guide { flex-wrap: wrap; } }
/* Vozes enviadas pelos cantores esperando aprovação */
.voice-guide.voice-pending { border-style: dashed; border-color: rgba(var(--gold-rgb), .55); margin-left: 14px; }
.voice-cloud-note { color: var(--muted, #9aa4b6); font-size: 12px; }
.study-voice-pending { margin: 6px 0 0; font-size: 13px; }
.study-voice-send-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }