/* ============================================================
   Lúmen — sistema visual "missal moderno"
   Pedra de catedral · bordô litúrgico · ouro de iluminura
   ============================================================ */
:root{
  /* cor — dia */
  --paper:#F6F3EC;         /* pedra clara de catedral */
  --raised:#FCFAF5;        /* superfície de cartão */
  --ink:#221C17;           /* tinta */
  --ink-soft:#6E6456;      /* tinta suave */
  --line:#E7E0D1;          /* fio de régua */
  --wine:#732233;          /* bordô litúrgico */
  --wine-deep:#4E1522;
  --gold:#B4894A;          /* ouro de iluminura */
  --gold-bright:#CBA34E;
  --flame:#F2A93C;
  --sombra:0 1px 2px rgba(34,28,23,.05), 0 10px 30px rgba(34,28,23,.06);
  --sombra-sutil:0 1px 2px rgba(34,28,23,.05);
  --r:18px; --r-sm:12px;
  --tab-h:66px;
  --maxw:640px;
}
body.noite,.noite{
  --paper:#141009; --raised:#1E1810; --ink:#ECE3D0; --ink-soft:#9C907A;
  --line:#2D2619; --wine:#B24C60; --wine-deep:#2a0f16; --gold:#D8B463; --gold-bright:#E4C57E;
  --sombra:0 10px 34px rgba(0,0,0,.45); --sombra-sutil:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Spectral",Georgia,serif;font-size:18px;line-height:1.6;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
  transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Marcellus",serif;font-weight:400;letter-spacing:.005em;line-height:1.16}
button{font-family:inherit;cursor:pointer;color:inherit}
.app{max-width:var(--maxw);margin:0 auto;padding:22px 18px 10px}
.carregando{color:var(--ink-soft);text-align:center;padding:90px 0;font-style:italic;letter-spacing:.02em}
.mono{font-family:"IBM Plex Mono",monospace}

/* animação de entrada (sutil) */
@keyframes surge{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.card,.titulo-tela,.reader,.entrada,.stats-grid,.temas-grid,.saudacao{animation:surge .32s cubic-bezier(.2,.7,.3,1) both}
.card:nth-child(2){animation-delay:.04s}.card:nth-child(3){animation-delay:.08s}
.card:nth-child(4){animation-delay:.12s}.card:nth-child(5){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* rótulos e títulos de tela */
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0 0 6px;font-weight:500}
.titulo-tela{font-size:31px;margin:0 0 20px;color:var(--ink)}
.subto{color:var(--ink-soft);margin:0 0 20px}

/* cartões */
.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sombra);margin-bottom:15px}
.card-vinho{position:relative;overflow:hidden;border:none;color:#F5E7DC;
  background:radial-gradient(120% 140% at 12% 0%,#8a2c40 0%,var(--wine) 42%,var(--wine-deep) 100%)}
.card-vinho::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);opacity:.7}
.card-vinho .eyebrow{color:var(--gold-bright)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;
  border-radius:999px;padding:14px 22px;font-size:16px;font-weight:600;letter-spacing:.01em;
  background:var(--wine);color:#fff;width:100%;box-shadow:var(--sombra-sutil);
  transition:transform .12s,filter .15s}
.btn:active{transform:translateY(1px)}
.btn:hover{filter:brightness(1.05)}
.btn.ouro{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#2b2109}
.btn.vazado{background:transparent;border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.btn.mini{width:auto;padding:10px 15px;font-size:14px}
.btn svg{width:19px;height:19px;stroke-width:1.7}

/* ===== INÍCIO ===== */
.saudacao{font-size:27px;margin:0 0 3px;font-family:"Marcellus",serif}
.versiculo-dia{font-size:21px;line-height:1.5;font-style:italic;font-weight:400}
.ref{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.1em;
  color:var(--gold);margin-top:12px;display:block;font-weight:500}
.card-vinho .ref{color:var(--gold-bright)}

/* vela votiva do streak */
.vela-wrap{display:flex;align-items:center;gap:18px}
.vela{position:relative;width:52px;height:72px;flex:none;display:flex;justify-content:center}
.vela .halo{position:absolute;bottom:40px;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,169,60,.5),transparent 62%);
  filter:blur(3px);animation:respira 2.6s ease-in-out infinite}
.vela .corpo{position:absolute;bottom:0;width:30px;height:48px;border-radius:6px 6px 4px 4px;
  background:linear-gradient(180deg,#fff8ec 0%,#efe0bd 60%,#e2cfa2 100%);
  box-shadow:inset 0 -7px 12px rgba(180,137,74,.3),inset 2px 0 4px rgba(255,255,255,.6)}
.vela .pavio{position:absolute;bottom:48px;width:2px;height:7px;background:#4a3a1e}
.vela .chama{position:absolute;bottom:52px;width:15px;height:26px;transform-origin:50% 90%;
  background:radial-gradient(ellipse at 50% 72%,#fff6c4 0%,#f8b83f 52%,#e0561f 92%);
  border-radius:50% 50% 48% 48%/62% 62% 40% 40%;
  animation:tremula 1.5s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(242,169,60,.75))}
.vela.apagada .chama,.vela.apagada .halo,.vela.apagada .pavio{display:none}
.vela.apagada .corpo{filter:grayscale(.55) brightness(.92)}
@keyframes tremula{0%,100%{transform:rotate(-3deg) scaleY(1)}50%{transform:rotate(3deg) scaleY(1.07)}}
@keyframes respira{0%,100%{opacity:.55}50%{opacity:.85}}
.streak-num{font-family:"Marcellus";font-size:34px;line-height:1;color:var(--ink)}
.streak-lbl{color:var(--ink-soft);font-size:14px}

/* barra de nível/progresso */
.nivel-linha{display:flex;justify-content:space-between;align-items:baseline;margin:2px 0 8px}
.barra{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.barra > i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(90deg,var(--gold),var(--gold-bright))}

/* ===== LEITURA ===== */
.nav-leitura{display:flex;gap:9px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.select{appearance:none;background:var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23B4894A' stroke-width='2'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 34px 12px 15px;
  font-family:"Marcellus",serif;font-size:16px;color:var(--ink);flex:1;min-width:130px;box-shadow:var(--sombra-sutil)}
.cap-btn{width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--raised);font-size:22px;color:var(--wine);flex:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-sutil)}
.cap-btn:disabled{opacity:.35}
.reader{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px 26px;box-shadow:var(--sombra)}
.reader h2{font-size:29px;margin:0 0 3px;color:var(--wine)}
.reader .grupo{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
/* corpo de leitura */
.reader{font-size:19px;line-height:1.78}
.v{display:inline;padding:2px 4px;border-radius:6px;transition:background .15s;cursor:pointer}
.v .n{font-family:"IBM Plex Mono",monospace;font-size:.62em;color:var(--gold);
  vertical-align:.35em;margin-right:5px;font-weight:600;letter-spacing:.02em}
.v.sel{background:rgba(180,137,74,.16);box-shadow:0 0 0 1px rgba(180,137,74,.3)}
.v.g-ouro{background:rgba(203,163,78,.30)}
.v.g-vinho{background:rgba(115,34,51,.15)}
.v.g-verde{background:rgba(90,120,70,.20)}
.v .fav{color:var(--wine);margin-left:5px;font-size:.85em}
.pendente{color:var(--ink-soft);font-style:italic;text-align:center;padding:34px 12px;line-height:1.6}
.pendente b{color:var(--wine);font-style:normal}
.marcar-lido{margin-top:22px}
.lido-selo{display:inline-flex;gap:7px;align-items:center;color:var(--gold);
  font-family:"IBM Plex Mono";font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}

/* barra de ações sobre versículo */
.acoes-v{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));z-index:40;
  background:var(--raised);border-top:1px solid var(--line);padding:13px 16px calc(13px + env(safe-area-inset-bottom));
  display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap;
  box-shadow:0 -10px 30px rgba(0,0,0,.14);animation:surge .22s ease both}
.acoes-v[hidden]{display:none}
.cor-dot{width:34px;height:34px;border-radius:50%;border:2px solid rgba(0,0,0,.06);box-shadow:var(--sombra-sutil)}
.cor-dot.ouro{background:#CBA34E}.cor-dot.vinho{background:#8f2233}.cor-dot.verde{background:#5a7846}

/* ===== TEMAS ===== */
.temas-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tema-card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);
  padding:17px;text-align:left;box-shadow:var(--sombra-sutil);transition:transform .12s,box-shadow .15s}
.tema-card:active{transform:translateY(1px)}
.tema-card:hover{box-shadow:var(--sombra)}
.tema-card .emoji{font-size:25px;display:block;margin-bottom:8px}
.tema-card .nome{font-family:"Marcellus";font-size:18px;color:var(--ink)}
.tema-card .desc{color:var(--ink-soft);font-size:13px;line-height:1.4}

/* ===== QUIZ ===== */
.quiz-item{display:flex;justify-content:space-between;align-items:center;gap:12px}
.quiz-item .xp{font-family:"IBM Plex Mono";font-size:12px;color:var(--gold);white-space:nowrap;font-weight:500}
.pergunta{margin:0 0 12px;font-family:"Marcellus";font-size:20px;line-height:1.3}
.alt{display:block;width:100%;text-align:left;background:var(--raised);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;margin-bottom:10px;font-size:16px;color:var(--ink);transition:.14s}
.alt.sel{border-color:var(--wine);background:rgba(115,34,51,.06)}
.alt.certa{border-color:#4f7a3a;background:rgba(90,120,70,.15)}
.alt.errada{border-color:var(--wine);background:rgba(115,34,51,.12)}
.resultado{text-align:center;padding:14px 0}
.resultado .n{font-family:"Marcellus";font-size:56px;color:var(--wine);line-height:1}

/* ===== PERFIL ===== */
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;margin-bottom:16px}
.stat{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 10px;text-align:center;box-shadow:var(--sombra-sutil)}
.stat .v{font-family:"Marcellus";font-size:26px;color:var(--wine);cursor:default;line-height:1}
.stat .l{font-size:11px;color:var(--ink-soft);letter-spacing:.03em;margin-top:5px}
.lista-item{padding:13px 0;border-bottom:1px solid var(--line)}
.lista-item:last-child{border-bottom:none}
.lista-item .ref{margin-top:5px}

/* login / primeira impressão */
.entrada{max-width:430px;margin:7vh auto;text-align:center}
.entrada .selo-vela{width:56px;height:76px;margin:0 auto 6px;position:relative;display:flex;justify-content:center}
.logo-lumen{font-family:"Marcellus";font-size:46px;color:var(--wine);margin:6px 0 0;letter-spacing:.02em}
.logo-sub{color:var(--ink-soft);margin:4px 0 28px;font-style:italic}
.campo{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--raised);font-family:inherit;font-size:16px;color:var(--ink);margin-bottom:12px;box-shadow:var(--sombra-sutil)}
.campo:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(180,137,74,.15)}
.troca{background:none;border:none;color:var(--wine);text-decoration:underline;margin-top:16px;font-size:15px}
.erro-msg{color:var(--wine);font-size:14px;min-height:20px;margin:4px 0}

/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:var(--raised);border-top:1px solid var(--line);
  display:flex;z-index:50;box-shadow:0 -2px 16px rgba(34,28,23,.05)}
.tab{flex:1;border:none;background:none;color:var(--ink-soft);font-size:10.5px;letter-spacing:.02em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;position:relative}
.tab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.is-ativa{color:var(--wine)}
.tab.is-ativa::before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright))}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 26px);transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:13px 22px;border-radius:999px;font-size:15px;z-index:60;
  box-shadow:var(--sombra);animation:sobe .3s ease;max-width:88%;text-align:center}
@keyframes sobe{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

.topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.link-voltar{background:none;border:none;color:var(--wine);font-size:15px;padding:6px 0;margin-bottom:8px}
.noite-toggle{background:var(--raised);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13px;color:var(--ink-soft);box-shadow:var(--sombra-sutil)}

/* busca */
.busca-wrap{margin-bottom:6px}
mark{background:rgba(203,163,78,.38);color:inherit;border-radius:3px;padding:0 2px}

/* referências cruzadas — painel */
.overlay{position:fixed;inset:0;background:rgba(20,16,9,.55);z-index:70;display:flex;align-items:flex-end;justify-content:center;animation:surge .2s ease}
.overlay-card{background:var(--paper);width:100%;max-width:var(--maxw);max-height:82vh;overflow:auto;
  border-radius:22px 22px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.3)}
.tag-atnt{background:var(--gold);color:#2b2109;border-radius:99px;padding:1px 8px;
  font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.05em;margin-left:4px;vertical-align:middle}
.creditos{color:var(--ink-soft);font-size:11px;margin-top:16px;font-style:italic}

/* card compartilhável */
.card-preview{width:100%;max-width:340px;aspect-ratio:1/1;display:block;margin:4px auto 0;border-radius:14px;border:1px solid var(--line);box-shadow:var(--sombra)}
.card-acoes{display:flex;gap:8px;margin-top:14px}
.card-acoes .btn{flex:1}

/* toggle Feed/Story do card */
.seg{display:flex;gap:6px;background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:4px;margin:12px 0}
.seg button{flex:1;border:0;background:transparent;color:var(--ink-soft);font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.04em;padding:8px;border-radius:9px;cursor:pointer}
.seg button.on{background:var(--wine);color:#fff}
.card-preview.story{max-width:230px;aspect-ratio:9/16}

/* Estudo — trilhas */
.grade-trilhas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.trilha-card{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;box-shadow:var(--sombra)}
.trilha-card:active{transform:scale(.98)}
.tr-emoji{font-size:22px}
.tr-tit{font-family:Marcellus,serif;font-size:16px;color:var(--ink);line-height:1.15}
.tr-busca{font-size:11.5px;color:var(--ink-soft);line-height:1.3}
.passo-n{display:inline-block;min-width:20px;height:20px;line-height:20px;text-align:center;background:var(--wine);color:#fff;border-radius:50%;font-family:"IBM Plex Mono";font-size:11px;margin-right:4px}

/* Estudo — ligações AT<->NT */
.lig-bloco{background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:12px 14px;margin:4px 0 2px}
.lig-ref{font-family:"IBM Plex Mono";font-size:12px;color:var(--gold-bright,#B4894A);margin:0 0 6px;letter-spacing:.04em}
.lig-texto{font-family:Spectral,Georgia,serif;font-size:16px;line-height:1.6;margin:0;color:var(--ink)}
.lig-texto sup{color:var(--gold);font-size:10px;margin-right:1px}
.lig-seta{display:flex;justify-content:center;margin:8px 0}
.lig-seta span{background:var(--wine);color:#fff;font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.05em;padding:4px 14px;border-radius:99px;position:relative}
.lig-nota{background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--ink)}

/* tabbar com 6 abas */
.tabbar .tab{font-size:9.5px}
.tabbar .tab svg{width:22px;height:22px}