:root {
  --bg: #F7F5F0; --surface: #FFFFFF; --surface-2: #F1EEE7;
  --ink: #1B1915; --ink-2: #4A463F; --muted: #8A847A; --line: #E7E2D8;
  --accent: #A0804F; --accent-ink: #7A5F36; --accent-soft: #F3ECDF; --danger: #B4483C;
  --shadow: 0 1px 2px rgba(27,25,21,.04), 0 10px 30px -14px rgba(27,25,21,.14);
  --r: 16px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121110; --surface: #1A1917; --surface-2: #22201D;
    --ink: #F2EEE6; --ink-2: #CFC9BE; --muted: #8F897E; --line: #2C2A26;
    --accent: #C9A56B; --accent-ink: #D9B97F; --accent-soft: #2A241A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.ic { width: 18px; height: 18px; flex: none; }

/* ——— Estrutura ——— */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.nav {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
  padding: 28px 18px; border-right: 1px solid var(--line);
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; }
.marca-selo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); font: 500 17px/1 var(--serif);
}
.marca-nome { font: 500 19px/1 var(--serif); letter-spacing: -.01em; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--ink-2); font-weight: 500; transition: background .15s, color .15s;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.ativo { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.nav a.ativo .ic { color: var(--accent); }
.nav .embreve { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 500; }
.nav-rodape { margin-top: auto; padding: 0 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }

main { min-width: 0; }
.pagina { max-width: 880px; margin: 0 auto; padding: 48px 40px 80px; }

.tabbar { display: none; }

@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; }
  .nav { display: none; }
  .pagina { padding: 24px 16px 110px; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0; font-size: 11px; font-weight: 500; color: var(--muted);
  }
  .tabbar a.ativo { color: var(--ink); }
  .tabbar a.ativo .ic { color: var(--accent); }
  .tabbar .ic { width: 22px; height: 22px; }
}

/* ——— Cabeçalho de página ——— */
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sobre { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 8px; }
h1.titulo { font: 400 40px/1.05 var(--serif); letter-spacing: -.025em; margin: 0; }
.sub { color: var(--muted); margin: 8px 0 0; }
@media (max-width: 899px) { h1.titulo { font-size: 32px; } }

/* ——— Botões ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 500; white-space: nowrap; transition: transform .12s, background .15s, border-color .15s;
}
.btn:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primario:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
.btn-icone { width: 42px; padding: 0; }
.btn-fantasma { background: transparent; border-color: transparent; }
.btn-fantasma:hover { background: var(--surface-2); border-color: transparent; }
.btn-perigo { color: var(--danger); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— Busca ——— */
.busca { position: relative; margin-bottom: 18px; }
.busca .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.busca input {
  width: 100%; height: 48px; padding: 0 16px 0 46px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); outline: none;
}
.busca input:focus { border-color: var(--accent); }

/* ——— Lista de pregações ——— */
.lista { display: grid; gap: 10px; }
.cartao {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); transition: border-color .15s, box-shadow .2s, transform .15s;
}
.cartao:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.cartao h3 { font: 400 21px/1.25 var(--serif); letter-spacing: -.01em; margin: 0 0 6px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.meta .ref { color: var(--accent-ink); font-weight: 500; }
.cartao .seta { color: var(--muted); }
.data-selo {
  display: grid; place-items: center; width: 54px; height: 58px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink); text-align: center; line-height: 1;
}
.data-selo b { font: 400 22px/1 var(--serif); display: block; }
.data-selo small { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.vazio { text-align: center; padding: 64px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); }
.vazio h3 { font: 400 22px var(--serif); color: var(--ink); margin: 0 0 6px; }

/* ——— Editor ——— */
.barra {
  display: flex; align-items: center; gap: 8px; margin-bottom: 28px;
}
.barra .espaco { flex: 1; }
.salvo { font-size: 12px; color: var(--muted); margin-right: 6px; transition: opacity .3s; }
.campo-titulo {
  width: 100%; border: 0; background: transparent; outline: none; padding: 0;
  font: 400 40px/1.1 var(--serif); letter-spacing: -.025em;
}
.campo-titulo::placeholder { color: var(--muted); opacity: .6; }
.metas { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin: 22px 0 26px; }
@media (max-width: 640px) { .metas { grid-template-columns: 1fr 1fr; } .metas .m-ref { grid-column: 1 / -1; } .campo-titulo { font-size: 32px; } }
.m { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.m:focus-within { border-color: var(--accent); }
.m label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m input { border: 0; outline: none; background: transparent; padding: 0; min-width: 0; }
.ferramentas { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink-2);
}
.chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, var(--line)); }
.chip code { font: 600 12px var(--sans); color: var(--accent-ink); }
.dica { margin-left: auto; font-size: 12px; color: var(--muted); }
.corpo {
  width: 100%; min-height: 56vh; resize: none; overflow: hidden; padding: 22px 24px;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
  font: 400 16px/1.8 var(--sans); outline: none; tab-size: 2;
}
.corpo:focus { border-color: var(--accent); }
.rodape-editor { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ——— Modo púlpito ——— */
body.modo-foco .nav, body.modo-foco .tabbar { display: none; }
body.modo-foco .app { grid-template-columns: 1fr; }
.pulpito { --fs: 24px; min-height: 100vh; background: #0F0E0C; color: #ECE6DB; }
.pulpito.claro { background: #FBFAF6; color: #1B1915; }
.pulpito-topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px;
  padding: 12px 16px; background: inherit; border-bottom: 1px solid rgba(128,120,105,.18);
}
.pulpito .btn { background: transparent; border-color: rgba(128,120,105,.3); color: inherit; }
.pulpito .btn:hover { background: rgba(128,120,105,.12); }
.cronometro {
  font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  padding: 0 16px; min-width: 96px;
}
.pulpito .btn.rodando, .cronometro.rodando { color: #C9A56B; border-color: rgba(201,165,107,.5) !important; }
.pulpito-texto { max-width: 760px; margin: 0 auto; padding: 48px 24px 30vh; font-size: var(--fs); line-height: 1.55; }
.pulpito-texto .p-ref { font: 500 .6em/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #C9A56B; }
.pulpito-texto h1 { font: 400 1.9em/1.1 var(--serif); letter-spacing: -.02em; margin: .4em 0 1.2em; }
.pulpito-texto h2 { font: 400 1.35em/1.2 var(--serif); margin: 1.8em 0 .6em; display: flex; gap: .6em; align-items: baseline; }
.pulpito-texto h2 span { color: #C9A56B; font-size: .7em; }
.pulpito-texto .p-ponto { position: relative; padding-left: 1.2em; margin: .35em 0; }
.pulpito-texto .p-ponto::before { content: ""; position: absolute; left: .1em; top: .62em; width: .32em; height: .32em; transform: rotate(45deg); border: 2px solid #C9A56B; }
.pulpito-texto blockquote { margin: .9em 0; padding: .1em 0 .1em 1em; border-left: 3px solid #C9A56B; font: 400 1.05em/1.5 var(--serif); }
.pulpito-texto blockquote cite { display: block; margin-top: .4em; font: 500 .55em/1 var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #C9A56B; }
.pulpito-texto .p-nota { opacity: .62; margin: .5em 0; font-size: .86em; }

/* ——— Slides ——— */
.grade-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.miniatura { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.miniatura .slide { border-radius: 10px; box-shadow: var(--shadow); outline: 1px solid var(--line); transition: transform .15s; }
.miniatura:hover .slide { transform: translateY(-2px); }
.miniatura small { font-size: 12px; color: var(--muted); font-weight: 500; }
.aviso {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 20px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px;
}

.temas { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 24px; }
.tema {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.tema i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128,120,105,.35); }
.tema.ativo { border-color: var(--ink); color: var(--ink); }

/* ——— Editor: IA e versículo ——— */
.busca-vs {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin-left: auto;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.busca-vs:focus-within { border-color: var(--accent); color: var(--ink); }
.busca-vs .ic { width: 15px; height: 15px; }
.busca-vs input { border: 0; outline: none; background: transparent; width: 150px; font-size: 13px; }
.chip-ia { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip-ia:hover { color: var(--bg); border-color: var(--ink); background: color-mix(in srgb, var(--ink) 85%, var(--accent)); }
.chip-ia .ic { width: 15px; height: 15px; color: #E3C58F; }
.chip-ia.pensando .ic { animation: girar 1.4s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chip-ia.pensando .ic { animation: none; opacity: .5; } }
.dica-linha { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
@media (max-width: 640px) { .busca-vs { margin-left: 0; flex: 1; } .busca-vs input { width: 100%; } }

/* ——— Conta ——— */
.pagina-estreita { max-width: 680px; }
.cartao-conta {
  display: flex; flex-direction: column; gap: 12px; padding: 22px; margin-bottom: 18px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
}
.cartao-conta h2 { font: 400 22px/1.25 var(--serif); letter-spacing: -.01em; margin: 0; }
.cartao-conta .sub { margin: 0; }
.pequeno { font-size: 13px; }
.linha-form { display: flex; gap: 8px; }
.linha-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); outline: none; font-size: 15px;
}
.linha-form input:focus { border-color: var(--accent); }
#codigo, #sala { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.cartao-conta label.m span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.selo-plano { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.selo-plano.pago { background: var(--accent-soft); color: var(--accent-ink); }
.recursos { display: grid; gap: 2px; margin: 0 0 22px; }
.recurso { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.recurso i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.recurso small { margin-left: auto; color: var(--muted); font-size: 12px; }
.recurso.fora { color: var(--muted); }
.recurso.fora i { background: var(--surface-2); color: var(--muted); }
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
@media (max-width: 560px) { .planos { grid-template-columns: 1fr; } }
.plano {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
}
.plano.destaque { border-color: var(--ink); box-shadow: var(--shadow); }
.plano h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.plano .preco { font: 400 34px/1 var(--serif); letter-spacing: -.02em; }
.plano .preco small { font: 500 13px var(--sans); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.plano .sub { margin: 0 0 8px; font-size: 13px; }
.plano .btn { margin-top: auto; }
.fita { position: absolute; top: -10px; right: 16px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.aviso-ok { background: color-mix(in srgb, #3F9D6A 14%, var(--surface)); color: color-mix(in srgb, #3F9D6A 70%, var(--ink)); }

/* ——— Bíblia ——— */
.seletor {
  height: 40px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A847A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  appearance: none; -webkit-appearance: none; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; max-width: 100%;
}
.biblia-nav { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; margin-bottom: 24px; }
.biblia-nav #cap { min-width: 76px; }
.biblia-nav #prox { order: 4; }
.leitura { font: 400 19px/1.75 var(--serif); }
.leitura h2 { font: 400 30px/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 18px; }
.leitura .vs { margin: 0 0 .35em; padding: 2px 6px; margin-inline: -6px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.leitura .vs:hover { background: var(--surface-2); }
.leitura .vs.sel { background: var(--accent-soft); }
.leitura sup { font: 600 11px var(--sans); color: var(--accent-ink); margin-inline-end: 6px; vertical-align: .5em; }
.atribuicao { margin: 36px 0 0; font-size: 12px; color: var(--muted); }
.barra-selecao {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow); max-width: calc(100vw - 24px);
}
.barra-selecao[hidden] { display: none; }
.barra-selecao b { font-weight: 500; white-space: nowrap; font-size: 14px; }
.barra-selecao .btn, .barra-selecao .seletor { height: 36px; background-color: color-mix(in srgb, var(--bg) 14%, var(--ink)); border-color: transparent; color: var(--bg); }
.barra-selecao .seletor { max-width: 170px; }
@media (max-width: 899px) { .barra-selecao { bottom: 88px; } }

/* ——— Aviso rápido ——— */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 50; transform: translate(-50%, 16px);
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--danger); color: #fff; }
@media (max-width: 899px) { .toast { bottom: 96px; } }

/* ——— Controle da projeção ——— */
.controle { display: grid; grid-template-columns: 1fr 260px; gap: 22px; }
@media (max-width: 899px) { .controle { grid-template-columns: 1fr; } }
.controle .atual .slide { border-radius: 14px; box-shadow: var(--shadow); }
.proximo .slide { border-radius: 10px; opacity: .9; }
.rotulo { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.navega { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.navega .btn { height: 64px; border-radius: 16px; font-size: 16px; }
.painel { display: flex; flex-direction: column; gap: 18px; }
.grupo { padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.estado.on { color: var(--ink); }
.estado.on i { background: #3F9D6A; box-shadow: 0 0 0 4px color-mix(in srgb, #3F9D6A 20%, transparent); }
.btn.ligado { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.faixa { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin-top: 22px; scroll-snap-type: x proximity; }
.faixa .miniatura { flex: 0 0 150px; scroll-snap-align: start; }
.faixa .miniatura.atual .slide { outline: 2px solid var(--accent); outline-offset: 2px; }
.contador { font: 400 15px var(--serif); color: var(--muted); }

/* ——— Agenda ——— */
.secao-agenda { margin-top: 30px; }
.secao-agenda h2 { font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

/* ——— Impressão dos slides (Exportar PDF) ——— */
.imprimir { display: none; }
@media print {
  @page { size: 16in 9in; margin: 0; }
  body { background: #fff; }
  .app, .tabbar { display: none !important; }
  .imprimir { display: block; }
  .imprimir .slide { width: 16in; height: 9in; aspect-ratio: auto; page-break-after: always; break-after: page; }
}