/* NEXUS (visão geral dos líderes) e SIGNAL (Mídia). Cada área tem a própria cara; o tema troca junto com a área.
   Página separada do DOXA (o DOXA tem o próprio interface.css e não usa este arquivo). */
:root { color-scheme: dark; --display: "Sora", "Avenir Next", system-ui, sans-serif; --body: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif;
  --bg: #060b11; --fg: #f6f8fa; --dim: #9aa3b2; --accent: #0A84FF; --accent-rgb: 10, 132, 255; --grad: linear-gradient(135deg, #00D2FF, #0A84FF); --on-accent: #03121c;
  --glass: rgba(255, 255, 255, .045); --glass2: rgba(255, 255, 255, .025); --edge: rgba(255, 255, 255, .085); --edge2: rgba(255, 255, 255, .06);
  --ok: #7fd6a1; --ok-rgb: 95, 197, 138; --warn: #f6c48a; --warn-rgb: 240, 162, 74; --bad: #ff8f86; }
body.theme-doxa { --bg: #0b0e14; --fg: #f1ead8; --dim: #9aa3b2; --accent: #e5b85c; --accent-rgb: 229, 184, 92; --grad: linear-gradient(135deg, #ffe3a0, #d99a32); --on-accent: #1a1206; }
body.theme-signal { --bg: #121416; --fg: #f5f6f7; --dim: #9ea4ab; --accent: #b8ff3d; --accent-rgb: 184, 255, 61; --grad: linear-gradient(135deg, #dcff8a, #74cf1f); --on-accent: #0f1406; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; color: var(--fg); font-family: var(--body); font-size: 15px; letter-spacing: .005em;
  background: radial-gradient(900px 520px at 50% -12%, rgba(var(--accent-rgb), .22), transparent 62%), radial-gradient(600px 420px at 115% 38%, rgba(var(--accent-rgb), .08), transparent 60%), var(--bg);
  background-attachment: fixed; transition: background-color .35s ease; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.wrap { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* Topo do app */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 8px; }
.logo-btn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px 6px 6px; border-radius: 20px; background: var(--glass); border: 1px solid var(--edge); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }
button.logo-btn:active { transform: scale(.98); }
.logo-btn .chev { width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); }
.brand-icon { border-radius: 26%; box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), .7); flex: 0 0 auto; }
.wordmark-img { width: auto; }
.doxa-word { display: grid; line-height: 1; gap: 4px; }
.doxa-word b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .24em; }
.doxa-word small { font-size: 8.5px; font-weight: 700; letter-spacing: .3em; color: #e5b85c; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--on-accent); background: var(--grad); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); flex: 0 0 auto; }

/* Conteúdo */
.page-head { padding: 10px 16px 4px; display: grid; gap: 6px; }
.eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.h1 { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.sub { font-size: 14px; color: var(--dim); line-height: 1.45; }
.body { padding: 14px 16px 48px; display: grid; gap: 14px; align-content: start; }
.card { background: linear-gradient(180deg, var(--glass), var(--glass2)); border: 1px solid var(--edge); border-radius: 22px; overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -28px rgba(0, 0, 0, .9); }
.card.pad { padding: 16px 18px; display: grid; gap: 10px; }
.card.hero { position: relative; border-color: rgba(var(--accent-rgb), .35); background: radial-gradient(420px 160px at 0% 0%, rgba(var(--accent-rgb), .2), transparent 70%), linear-gradient(180deg, var(--glass), var(--glass2)); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 16px 18px 10px; }
.card-head strong { font-family: var(--display); font-size: 16px; font-weight: 700; }
.card-head span { font-size: 12px; color: var(--dim); }
.row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 8px 18px; border-top: 1px solid var(--edge2); width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; transition: background .15s; }
button.row-item:hover { background: rgba(255, 255, 255, .03); }
.stack { display: grid; gap: 3px; min-width: 0; }
.label { font-size: 12px; color: var(--dim); font-weight: 600; }
.name { font-size: 15.5px; font-weight: 700; }
.name.open { color: var(--bad); }
.name.gap { color: var(--warn); }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--ok); background: rgba(var(--ok-rgb), .12); }
.chip.pend { color: var(--warn); background: rgba(var(--warn-rgb), .12); }
.chip.accent { color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.chip.plain::before { display: none; }
.chip.fill { color: #1a1006; background: #f0a24a; }
.chip.fill::before { display: none; }
.meta { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--dim); }
.meta.mine { color: var(--accent); }
.btn { min-height: 50px; padding: 0 18px; border-radius: 16px; font-size: 15px; font-weight: 800; background: var(--glass); border: 1px solid var(--edge); transition: transform .12s, box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--grad); color: var(--on-accent); border: 0; box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb), .95); }
.btn.big { min-height: 58px; font-size: 16px; border-radius: 18px; }
.btn.small { min-height: 44px; font-size: 14px; border-radius: 14px; padding: 0 16px; }
.btn.orange { background: linear-gradient(135deg, #ffc27a, #f08a2a); color: #1a1006; border: 0; }
.btn.ghost { background: transparent; border-style: dashed; color: var(--dim); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 14px; border-radius: 20px; background: linear-gradient(180deg, var(--glass), var(--glass2)); border: 1px solid var(--edge); display: grid; gap: 2px; }
.stat strong { font-family: var(--display); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat span { font-size: 11.5px; color: var(--dim); font-weight: 600; }
.stat.warn { border-color: rgba(var(--warn-rgb), .45); background: linear-gradient(180deg, rgba(var(--warn-rgb), .14), rgba(var(--warn-rgb), .05)); }
.stat.warn strong { color: var(--warn); }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.days button { min-height: 64px; border-radius: 18px; background: var(--glass); border: 1px solid var(--edge); display: grid; place-content: center; gap: 3px; transition: all .2s; }
.days button[aria-selected="true"] { border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .12); box-shadow: 0 10px 24px -14px rgba(var(--accent-rgb), .9); }
.days small { font-size: 10px; color: var(--dim); font-weight: 700; letter-spacing: .08em; }
.days strong { font-family: var(--display); font-size: 18px; }
.days span { font-size: 10.5px; font-weight: 800; }
.ok-text { color: var(--ok); } .warn-text { color: var(--warn); }
.note { font-size: 13px; line-height: 1.55; color: var(--dim); margin: 0; }
.success { padding: 16px 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(var(--ok-rgb), .16), rgba(var(--ok-rgb), .06)); border: 1px solid rgba(var(--ok-rgb), .4); display: grid; gap: 6px; animation: pop .35s cubic-bezier(.2, .9, .3, 1.2); }
.success strong { font-family: var(--display); color: var(--ok); }
.success span { font-size: 14px; line-height: 1.5; color: #d3eadc; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 184px; flex: 0 0 auto; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .2); border: 1px solid var(--edge2); }
.pair button { min-height: 40px; border-radius: 12px; font-size: 13px; font-weight: 800; background: transparent; border: 0; color: var(--dim); transition: all .18s; }
.pair button.yes[aria-pressed="true"] { background: linear-gradient(135deg, #9df0bf, #3fb877); color: #052012; box-shadow: 0 8px 18px -10px rgba(var(--ok-rgb), .9); }
.pair button.no[aria-pressed="true"] { background: rgba(255, 143, 134, .16); color: var(--bad); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tiles button { min-height: 92px; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, var(--glass), var(--glass2)); border: 1px solid var(--edge); text-align: left; display: grid; gap: 4px; align-content: start; }
.tiles strong { font-family: var(--display); font-size: 16px; }
.tiles span { font-size: 12px; color: var(--dim); }
.persona { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.persona button { min-height: 56px; padding: 6px 4px; border-radius: 16px; background: rgba(0, 0, 0, .18); border: 1px solid var(--edge2); display: grid; gap: 2px; place-content: center; text-align: center; transition: all .2s; }
.persona button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .65); }
.persona strong { font-size: 13px; }
.persona span { font-size: 10.5px; color: var(--dim); }
.progress { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.progress i { display: block; width: 86%; height: 100%; border-radius: 10px; background: var(--grad); box-shadow: 0 0 16px rgba(var(--accent-rgb), .6); }
.song-n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--accent); background: rgba(var(--accent-rgb), .1); flex: 0 0 auto; }

/* Janelas que sobem de baixo */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-wrap > .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); border: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s ease; }
.sheet { position: relative; width: 100%; max-width: 480px; margin: 0 auto; max-height: 82dvh; overflow-y: auto; padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 26px); background: rgba(18, 22, 28, .82); 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; display: grid; gap: 10px; animation: up .32s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .8); }
.grip { width: 44px; height: 5px; margin: 0 auto 6px; border-radius: 5px; background: rgba(255, 255, 255, .18); }
.sheet-title { font-family: var(--display); font-size: 18px; font-weight: 700; padding: 0 4px; }
.family { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 12px; border-bottom: 1px solid var(--edge2); margin-bottom: 2px; }
.option { --o: var(--accent-rgb); display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--edge2); text-align: left; transition: all .2s; }
.option:active { transform: scale(.99); }
.option.active { 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); }
.option.dim { opacity: .72; }
.option .opt-title { font-family: var(--display); font-size: 16px; font-weight: 700; }
.option .note2 { font-size: 12.5px; color: var(--dim); }
.option .note2.warn { color: var(--warn); }
.option-icon { display: flex; align-items: center; gap: 14px; min-width: 0; }
.check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--o)); color: #071018; flex: 0 0 auto; }
.conflict { padding: 14px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(var(--warn-rgb), .18), rgba(var(--warn-rgb), .06)); border: 1px solid rgba(var(--warn-rgb), .5); display: grid; gap: 12px; animation: pop .3s ease; }
.conflict span { font-size: 14px; line-height: 1.45; color: var(--warn); font-weight: 600; }

.sheet-wrap.still .sheet, .sheet-wrap.still > .backdrop { animation: none; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.screen.enter > * { animation: rise .35s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Abas, formulários, avisos */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge2); font-size: 13.5px; font-weight: 700; color: var(--dim); }
.tabs button[aria-selected="true"] { background: var(--grad); color: var(--on-accent); border-color: transparent; box-shadow: 0 8px 22px -12px rgba(var(--accent-rgb), .9); }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.month-nav button { width: 44px; height: 44px; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); font-size: 20px; }
.month-nav strong { font-family: var(--display); font-size: 18px; text-transform: capitalize; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--dim); }
.field input, .field select { min-height: 48px; padding: 0 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--edge); color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; }
.field input:focus, .field select:focus { outline: 2px solid rgba(var(--accent-rgb), .7); outline-offset: 1px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks button { min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .2); border: 1px solid var(--edge); font-size: 13px; font-weight: 700; color: var(--dim); }
.checks button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .7); color: var(--fg); }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); z-index: 40; max-width: min(92vw, 440px); padding: 12px 18px; border-radius: 16px; background: rgba(20, 24, 30, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--edge); font-size: 14px; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); animation: pop .25s ease; }
.toast.error { border-color: rgba(255, 143, 134, .6); color: #ffd2cd; }
.center { min-height: 70dvh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px 16px; }
.login { width: min(100%, 400px); display: grid; gap: 12px; text-align: left; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.empty { padding: 18px; text-align: center; color: var(--dim); font-size: 14px; }
.copybox { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--edge); font-size: 13px; word-break: break-all; user-select: all; }
.section-label { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 12px 18px 6px; border-top: 1px solid var(--edge2); }
.conflicts { padding: 12px 18px; background: rgba(var(--warn-rgb), .1); border-top: 1px solid rgba(var(--warn-rgb), .3); color: var(--warn); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.dirty-bar { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 4; padding: 8px; margin: 0 -8px; border-radius: 22px; background: rgba(14, 17, 21, .82); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--edge); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9); }

/* RS Central mais escura: o brilho azul fica discreto (o azul claro aparece muito mais que o dourado e o verde). */
body.theme-nexus { background: radial-gradient(900px 520px at 50% -12%, rgba(0, 120, 210, .16), transparent 62%), radial-gradient(600px 420px at 115% 38%, rgba(0, 120, 210, .05), transparent 60%), var(--bg); background-attachment: fixed; }

/* iPad e Mac: a mesma tela se espalha. Cartões em colunas, janelas no centro, escala com todos os cultos lado a lado. */
@media (min-width: 820px) {
  .wrap { max-width: 1180px; }
  .appbar { padding: 26px 28px 10px; }
  .tabs { padding: 4px 28px 6px; }
  .body { padding: 18px 28px 56px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; align-items: start; }
  .body > :is(.month-nav, .grid3, .days, .dirty-bar, .field, .btn, .note, .checks, .grid2, .empty, .success, .card.pad, .card.hero, .wide) { grid-column: 1 / -1; }
  .body > .card.hero { max-width: none; }
  .month-nav { max-width: 520px; justify-self: center; width: 100%; }
  .sheet-wrap { justify-content: center; align-items: center; }
  .sheet { max-width: 560px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .12); max-height: 86dvh; animation: pop .25s ease; }
  .sheet .grip { display: none; }
  .center { min-height: 80dvh; }
  .login { width: min(100%, 460px); }
  .h1 { font-size: 32px; }
}
@media (min-width: 1100px) {
  .body { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* Nome da mídia (Ready, Play!) escrito em letras, no estilo dos outros nomes. */
.rp-word { display: grid; line-height: 1; gap: 4px; }
.rp-word b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .08em; white-space: nowrap; }
.rp-word small { font-size: 8.5px; font-weight: 700; letter-spacing: .26em; color: #b8ff3d; white-space: nowrap; }

/* ⓘ Como instalar */
.info-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--glass); border: 1px solid var(--edge); color: var(--dim); font-size: 18px; display: grid; place-items: center; padding: 0; }
.install-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.install-steps li::marker { color: var(--accent); font-weight: 800; }

/* Tela de carregamento (RS Central e Ready, Play!): logo, nome, barra real e frases/versículos trocando com fade. */
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; background: radial-gradient(700px 420px at 50% 38%, rgba(var(--accent-rgb), .16), transparent 65%), var(--bg); transition: opacity .55s ease, visibility .55s; }
.splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.splash .brand-icon { animation: splash-glow 1.8s ease-in-out infinite; }
.splash-word { min-height: 34px; display: grid; place-items: center; }
.splash-bar { width: 180px; height: 4px; border-radius: 4px; background: rgba(var(--accent-rgb), .16); overflow: hidden; }
.splash-bar span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--grad); box-shadow: 0 0 12px rgba(var(--accent-rgb), .7); }
.splash-phrase { box-sizing: content-box; width: min(86vw, 420px); height: 5.8em; overflow: hidden; white-space: pre-line; text-align: center; color: var(--dim); font-size: 14.5px; line-height: 1.45; transition: opacity .4s ease; }
.splash-phrase.is-fading { opacity: 0; }
@keyframes splash-glow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); } 50% { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .45)); } }
@media (prefers-reduced-motion: reduce) { .splash .brand-icon { animation: none; } }

/* Janelas: cada parte mantém a própria altura e a janela rola (antes os cartões eram espremidos e cortavam o conteúdo). */
.sheet { grid-auto-rows: max-content; align-content: start; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet .card { overflow: visible; }

/* Lembrete dos avisos (aparece a cada abertura enquanto estiverem desligados). */
.push-banner { margin: 6px 16px 0; padding: 12px 14px; border-radius: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .06)); border: 1px solid rgba(var(--accent-rgb), .45); color: var(--fg); font-size: 14px; font-weight: 600; }
.push-banner svg { color: var(--accent); flex: 0 0 auto; }
.push-banner span { flex: 1 1 180px; min-width: 0; }
@media (min-width: 820px) { .push-banner { margin: 6px 28px 0; } }

/* Sininho com número de avisos novos. */
.info-btn.bell { position: relative; }
.info-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff5b4f; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }

/* Repertório: música e artista (o que a projeção precisa). */
.setlist { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.setlist li::marker { color: var(--accent); font-weight: 800; }
.setlist strong { display: block; font-size: 15.5px; }
.setlist span { color: var(--dim); font-size: 13px; }

/* Abas com ícone. No celular: barra fixa embaixo (como no DOXA). No iPad/Mac: pílulas em cima. */
.tabs button { display: inline-flex; align-items: center; gap: 7px; }
/* Abas em cima também no celular: pílulas de vidro (liquid glass), presas no topo ao rolar. */
.tabs { position: sticky; top: 0; z-index: 12; margin: 0 0 4px; padding: 8px 16px 10px; background: linear-gradient(180deg, rgba(10, 13, 18, .72), rgba(10, 13, 18, .38)); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); }
.tabs button { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -12px rgba(0, 0, 0, .8); color: var(--fg); }
.tabs button[aria-selected="true"] { background: var(--grad); color: var(--on-accent); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -12px rgba(var(--accent-rgb), .95); }
@media (min-width: 820px) { .tabs { padding: 8px 28px 10px; } }

img.avatar { object-fit: cover; padding: 0; }

.checklist button { text-align: left; }
.checklist button[aria-pressed="true"] { background: rgba(var(--ok-rgb), .16); border-color: rgba(var(--ok-rgb), .6); color: var(--fg); }

/* Textos compridos (nome de culto, pessoa, e-mail) quebram a linha em vez de estourar a tela. */
.row-item > *, .stack, .option-icon, .card-head > * { min-width: 0; }
.name, .label, .sub, .card-head span, .card-head strong, .stack span, .chip { overflow-wrap: anywhere; }

/* Checklist: explicação curta por item (ⓘ abre um balão). */
.ck-edit { display: grid; gap: 6px; padding-bottom: 6px; }
.ck-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--edge); color: var(--fg); font: inherit; }
.ck-input.ck-hint { min-height: 36px; font-size: 13px; color: var(--dim); }
.checklist .ck-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.checklist .ck-row > button:first-child { flex: 1 1 auto; }
.ck-info { flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--edge2); background: rgba(255, 255, 255, .05); color: var(--dim); font-size: 16px; }
.ck-info[aria-expanded="true"] { color: rgb(var(--accent-rgb)); border-color: rgba(var(--accent-rgb), .6); }
.ck-tip { flex-basis: 100%; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .3); font-size: 13px; line-height: 1.45; color: var(--fg); }

/* Mural de avisos. */
.notice { gap: 6px; border-color: rgba(var(--accent-rgb), .35); }
.notice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.notice-head strong { font-family: var(--display); font-size: 16px; overflow-wrap: anywhere; }
.notice-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
textarea { width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--edge); color: var(--fg); font: inherit; resize: vertical; }
.notice.is-off { opacity: .72; }

/* Topo com o balão do chat: em celular estreito fica só o ícone da marca (o nome não é coberto pelos botões). */
@media (max-width: 440px) { .appbar .logo-btn .wordmark-img, .appbar .logo-btn .doxa-word { display: none; } .appbar .logo-btn { padding-right: 10px; } }

/* Detalhes do culto: tema, paleta de roupa, observações e link. */
.culto-info { display: grid; gap: 6px; padding: 10px 12px; margin: 4px 0; border-radius: 14px; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .25); }
.info-line { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.info-line b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--accent-rgb)); margin-right: 4px; }
.info-link { color: rgb(var(--accent-rgb)); font-weight: 700; text-decoration: none; }
.swatches { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 4px; }
.swatches i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: inline-block; }
.dress-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.dress-pick button { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .25); }
.dress-pick button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .7); }

/* Menu ☰ em todas as telas (no lugar das abas de vidro). */
.nav-row { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.nav-burger { width: 46px; height: 46px; min-height: 46px; padding: 0; display: grid; place-items: center; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge2); color: var(--fg); }
.nav-current { display: flex; align-items: center; gap: 8px; color: var(--fg); }
.nav-current strong { font-family: var(--display); font-size: 18px; }
.nav-current svg { color: rgb(var(--accent-rgb)); }
.nav-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
.nav-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(82vw, 300px); display: flex; flex-direction: column; gap: 4px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px); overflow-y: auto; background: rgba(14, 18, 24, .97); border-right: 1px solid var(--edge2); border-radius: 0 22px 22px 0; box-shadow: 18px 0 48px -18px #000c; transform: translateX(-106%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.nav-drawer.is-open { transform: none; }
.nav-drawer button { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px; border-radius: 14px; border: 0; background: transparent; color: var(--dim); font: inherit; font-weight: 700; font-size: 16px; text-align: left; }
.nav-drawer button[aria-selected="true"] { color: var(--fg); background: rgba(var(--accent-rgb), .16); box-shadow: inset 3px 0 0 rgb(var(--accent-rgb)); }
@media (prefers-reduced-motion: reduce) { .nav-drawer { transition: none; } }
.nav-row { padding: 0 16px; }
/* iPhone (ilha dinâmica / notch): a barra de cima desce para fora da área do sensor, botões sempre tocáveis. */
.appbar { padding-top: max(18px, calc(env(safe-area-inset-top, 0px) + 10px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 820px) { .appbar { padding: max(26px, calc(env(safe-area-inset-top, 0px) + 10px)) 28px 10px; } }
.access-switch { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }
.access-switch button { min-height: 34px; padding: 4px 10px; font-size: 12.5px; }
@media (max-width: 440px) { .row-item:has(.access-switch) { flex-wrap: wrap; } .access-switch { width: 100%; } .access-switch button { flex: 1; } }
.offline-bar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 45; transform: translate(-50%, 140%); max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 999px; background: #2a2414; border: 1px solid rgba(229, 184, 92, .45); color: #ffe3a0; font-size: 13px; font-weight: 650; text-align: center; transition: transform .25s ease; pointer-events: none; }
.offline-bar.is-on { transform: translate(-50%, 0); }
.offline-bar:not(.is-on) { visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.church-row { display: grid; gap: 4px; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.church-row:hover { border-color: rgba(var(--accent-rgb), .45); }
/* Relatórios */
.report-period { margin-bottom: 4px; }
.report-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.report-tiles .card { display: grid; gap: 2px; }
.report-tiles strong { font-family: var(--display); font-size: 26px; }
.report-card { display: grid; gap: 8px; }
.report-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: r; }
.report-list li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 40px; align-items: center; gap: 10px; counter-increment: r; }
.report-main { display: grid; gap: 1px; min-width: 0; }
.report-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.report-main b::before { content: counter(r) ". "; color: var(--dim); font-weight: 500; }
.report-main small { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.report-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }
.report-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 400px) { .report-list li { grid-template-columns: minmax(0, 1fr) 40px; } .report-bar { display: none; } }
/* Logos nunca achatam (iPhone): mantêm a proporção. */
.wordmark-img { object-fit: contain; object-position: left center; flex-shrink: 0; max-width: 100%; }
.brand-icon { object-fit: contain; }
/* Nome + slogan ao lado do ícone (barra de cima) e slogan nas telas de abertura e entrada. */
.brand-lockup { display: grid; gap: 3px; line-height: 1.05; min-width: 0; text-align: left; }
.brand-lockup b { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; color: var(--fg); }
.brand-lockup small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-slogan { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-align: center; }
.appbar .logo-btn { min-width: 0; max-width: 100%; }
@media (max-width: 440px) { .appbar .logo-btn .brand-lockup b { font-size: 15px; } .appbar .logo-btn .brand-lockup small { font-size: 9px; letter-spacing: .04em; max-width: 34vw; } .appbar .logo-btn .brand-icon { width: 38px; height: 38px; } }
@media (max-width: 360px) { .appbar .logo-btn .brand-lockup small { display: none; } }
.nav-drawer .nav-install { margin-top: auto; opacity: .8; }
@media (max-width: 440px) {
  .appbar .install-btn { display: none; }
  .appbar .logo-btn .brand-lockup small { white-space: normal; max-width: 30vw; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* Abertura: logo, nome e slogan sobem de baixo até o meio, um após o outro. */
@keyframes nx-rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.splash .brand-icon { animation: nx-rise .75s cubic-bezier(.2, .8, .2, 1) both, splash-glow 1.8s ease-in-out .75s infinite; }
.splash .splash-word > * { animation: nx-rise .75s cubic-bezier(.2, .8, .2, 1) .15s both; }
.splash .splash-word > .brand-slogan { animation-delay: .3s; }
.splash .splash-word { display: grid; justify-items: center; gap: 8px; }
.splash > .splash-bar { animation: nx-rise .75s cubic-bezier(.2, .8, .2, 1) .45s both; }
@media (prefers-reduced-motion: reduce) { .splash .brand-icon, .splash .splash-word > *, .splash > * { animation: none; } }
.avail-all { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--edge); }
.avail-all .note { margin: 0; font-size: 12px; }
.code-big { font-family: ui-monospace, Menlo, monospace; font-size: 26px; font-weight: 800; letter-spacing: .3em; text-align: center; padding: 10px; border-radius: 12px; background: rgba(var(--accent-rgb), .1); border: 1px dashed rgba(var(--accent-rgb), .5); }