/* App do Neko: casca, abas e telas proprias. Base vem de base.css (mesmo visual do quiz). */
.escuro { min-height: 100vh; background: radial-gradient(ellipse at top, #33307a 0%, var(--noite) 65%); color: #fff; }
.centro { display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 400px; text-align: center; }
.login h1 { font-size: 30px; margin-top: 10px; }
.login p { color: #c9c6ec; line-height: 1.45; }
.login label, .bv-txt label { display: block; text-align: left; font-weight: 800; margin: 16px 0 6px; }
.login .campo, .bv-txt .campo { color: var(--tinta); }
.login a { color: var(--sol); font-weight: 800; }
.erro { color: #ff9aa8; min-height: 20px; font-weight: 700; margin: 8px 0 0; }
.bemvindo { max-width: 520px; margin: 0 auto; }
.bv-cena { position: relative; height: 260px; overflow: hidden; }
.bv-cena .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.bv-gato { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); animation: respira 3s ease-in-out infinite; }
.bv-txt { padding: 18px 16px 40px; }
.bv-txt h1 { font-size: 30px; }
.bv-txt h1 em { font-style: normal; color: var(--sol); }
.bv-txt p { color: #c9c6ec; line-height: 1.5; }

/* casca */
.casa { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.lado { display: none; }
.conteudo { max-width: 620px; width: 100%; margin: 0 auto; padding: 0 16px 100px; }
.topo-app { position: sticky; top: 0; z-index: 10; background: var(--creme); display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.marca-m { display: flex; align-items: center; gap: 6px; font-family: 'Baloo 2'; font-size: 22px; color: var(--torii); margin-right: auto; }
.chip-seq { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--torii); background: #ffe6ec; padding: 4px 10px; border-radius: 99px; font-size: 13px; }
.baixo { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 2px solid var(--borda); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.baixo button { display: grid; justify-items: center; gap: 2px; color: var(--tinta2); padding: 4px; border-radius: 12px; }
.baixo button small { font-weight: 800; font-size: 11px; }
.baixo button.on { color: var(--torii); background: #fff1f3; }
@media (min-width: 900px) {
  .casa { grid-template-columns: 230px 1fr; }
  .lado { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; padding: 20px 14px; border-right: 2px solid var(--borda); background: #fff; }
  .lado .marca { font-family: 'Baloo 2'; font-size: 26px; color: var(--torii); margin: -4px 0 14px; }
  .lado button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 800; color: var(--tinta2); text-align: left; }
  .lado button.on { background: #ffe6ec; color: var(--torii2); }
  .baixo, .marca-m { display: none; }
  .topo-app { justify-content: flex-end; }
  .conteudo { padding-bottom: 40px; }
}
.ola { font-size: 28px; margin: 6px 0 14px; }
.sec { font-size: 22px; margin: 24px 0 10px; }

/* episodios */
.continua { border-radius: 22px; overflow: hidden; background: var(--noite); color: #fff; box-shadow: 0 12px 30px rgba(43, 33, 64, .18); }
.cont-arte { position: relative; height: 170px; }
.cont-arte .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.cont-txt { padding: 14px 16px 16px; }
.cont-txt small { color: var(--sol); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.cont-txt h2 { font-size: 24px; margin: 4px 0; }
.cont-txt p { color: #c9c6ec; margin: 0; line-height: 1.4; }
.card-linha { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 2px solid var(--borda); border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.card-linha .ic { color: var(--torii); }
.card-linha b { display: block; }
.card-linha small { color: var(--tinta2); }
.card-linha:disabled { opacity: .55; }
.frase-dia { display: flex; align-items: center; gap: 10px; background: var(--sol); border-radius: 18px; padding: 14px 16px; margin-top: 12px; cursor: pointer; }
.frase-dia > div { flex: 1; display: grid; }
.frase-dia small { font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.frase-dia strong { font-size: 26px; }
.frase-dia span { font-size: 13px; font-weight: 700; }
.frase-dia .play { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--torii); }
.lista-eps { display: grid; gap: 10px; }
.ep-linha { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: #fff; border: 2px solid var(--borda); border-radius: 16px; padding: 8px; }
.ep-linha.tranca { opacity: .6; }
.ep-mini { position: relative; flex: none; width: 92px; height: 64px; border-radius: 12px; overflow: hidden; }
.ep-mini .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.ep-mini i { position: absolute; left: 6px; bottom: 4px; font-style: normal; font-weight: 800; font-size: 11px; color: #fff; background: rgba(0,0,0,.5); padding: 1px 6px; border-radius: 99px; }
.ep-mini em { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 10, 40, .5); color: #fff; }
.ep-info b { display: block; }
.ep-info small { color: var(--tinta2); font-size: 13px; line-height: 1.3; display: block; }
.feito { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 800; font-size: 12px; margin-top: 2px; }

/* licao */
.licao { max-width: 520px; margin: 0 auto; min-height: 100vh; padding: 0 16px 40px; }
.licao.cartela-t { padding: 0; max-width: none; }
.top-licao { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 0; background: var(--creme); }
.vidas { font-weight: 800; color: var(--torii); }
.nova-fala { background: #fff; border: 2px solid var(--borda); border-radius: 22px; padding: 22px 16px; display: grid; justify-items: center; gap: 4px; text-align: center; cursor: pointer; margin-top: 6px; }
.nova-fala small { color: var(--torii); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.nova-fala strong { font-size: 40px; line-height: 1.2; }
.nova-fala span { font-weight: 800; color: var(--tinta2); }
.nova-fala em { font-style: normal; color: var(--tinta2); font-size: 14px; }
.nova-fala b { font-family: 'Baloo 2'; font-size: 26px; margin-top: 6px; }
.botoes-fala { display: flex; gap: 8px; margin-top: 8px; }
.mini-btn { display: inline-flex; align-items: center; gap: 4px; background: #ffe6ec; color: var(--torii2); font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 99px; }
.bastidores { background: #fff6dd; border: 2px solid #ffe7a3; border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.bastidores small { font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: #b5841a; }
.bastidores p { margin: 4px 0 0; line-height: 1.45; }
.cena .palco .pers { position: absolute; bottom: -6px; transition: opacity .3s; }
.cena .palco .p0 { right: 8%; } .cena .palco .p1 { left: 8%; } .cena .palco .p2 { left: 40%; }
.cena .palco .pers.apagado { opacity: .55; }
.centro-t { text-align: center; padding-top: 60px; }
.centro-t .btn { margin-top: 10px; }
.win .btn.sec { margin-top: 10px; }
.grande-ja { margin-bottom: 14px; }

/* leitura */
.lista-lic { display: grid; gap: 8px; }
.lic { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: #fff; border: 2px solid var(--borda); border-radius: 16px; padding: 10px 12px; }
.lic.tranca { opacity: .55; }
.lic-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #ffe6ec; color: var(--torii); display: grid; place-items: center; font-size: 22px; }
.lic.feita .lic-ic { background: #e6f9f1; color: var(--ok); }
.lic b { display: block; }
.lic small { color: var(--tinta2); font-size: 13px; }
.kana-grande { width: 100%; display: grid; justify-items: center; gap: 4px; background: linear-gradient(160deg, var(--noite2), var(--noite)); color: #fff; border-radius: 22px; padding: 26px 12px; margin: 6px 0 12px; }
.kana-grande strong { font-size: 76px; line-height: 1.1; }
.kana-grande span { color: var(--sol); font-weight: 800; font-size: 18px; }
.kana-feitos { font-size: 28px; line-height: 1.6; margin: 10px 0 18px; color: var(--sol); }
.lab { background: linear-gradient(170deg, var(--noite2), var(--noite)); color: #fff; border-radius: 22px; padding: 14px; }
.lab-topo { display: flex; gap: 6px; margin-bottom: 10px; }
.lab-topo button { flex: 1; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.08); font-weight: 800; color: #c9c6ec; }
.lab-topo button.on { background: var(--sol); color: var(--tinta); }
.lab-grande { width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 12px; color: #fff; }
.lab-grande strong { font-size: 70px; line-height: 1; }
.lab-grande span { font-weight: 800; font-size: 22px; color: var(--sol); }
.lab small { display: block; font-weight: 800; color: #c9c6ec; margin: 8px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.lab-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.lab-grade button { padding: 8px 0; border-radius: 10px; background: rgba(255,255,255,.1); font-weight: 800; color: #fff; }
.lab-grade button.on { background: var(--sol); color: var(--tinta); }
.lab-n { width: 100%; margin-top: 12px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }

/* frases */
.busca { font-size: 16px; padding: 12px 14px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; }
.chips button { flex: none; padding: 7px 14px; border-radius: 99px; background: #fff; border: 2px solid var(--borda); font-weight: 800; font-size: 13px; }
.chips button.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.frase { position: relative; }
.estrela-fav { position: absolute; right: 10px; top: 10px; color: var(--borda); }
.estrela-fav.on { color: var(--sol); }
.frase > div { padding-right: 28px; }
.vazio { text-align: center; color: var(--tinta2); padding: 30px 10px; }

/* perfil */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { background: #fff; border: 2px solid var(--borda); border-radius: 16px; padding: 12px 6px; text-align: center; }
.stats b { display: block; font-family: 'Baloo 2'; font-size: 28px; color: var(--torii); }
.stats small { color: var(--tinta2); font-weight: 700; font-size: 12px; }
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.semana span { display: grid; justify-items: center; align-content: center; height: 54px; border-radius: 14px; background: #fff; border: 2px solid var(--borda); color: var(--torii); }
.semana span.on { background: #ffe6ec; border-color: var(--sakura); }
.semana small { font-weight: 800; color: var(--tinta2); font-size: 11px; }
.medalhas-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.med { background: #fff; border: 2px solid var(--borda); border-radius: 16px; padding: 12px 6px; text-align: center; display: grid; justify-items: center; gap: 2px; color: var(--tinta2); opacity: .6; }
.med.on { opacity: 1; color: var(--tinta); border-color: var(--sol); }
.med.on .ic { color: var(--sol); }
.med b { font-size: 13px; }
.med small { font-size: 11px; color: var(--tinta2); line-height: 1.25; }
.ajustes { display: grid; gap: 8px; }
.aj { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--borda); border-radius: 16px; padding: 12px 14px; cursor: pointer; }
.aj span { flex: 1; }
.aj b { display: block; }
.aj small { color: var(--tinta2); font-size: 13px; }
.aj input { display: none; }
.aj i { flex: none; width: 46px; height: 26px; border-radius: 99px; background: var(--borda); position: relative; transition: background .2s; }
.aj i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.aj input:checked + i { background: var(--ok); }
.aj input:checked + i::after { transform: translateX(20px); }
.toast { position: fixed; z-index: 99; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 800; max-width: 90vw; text-align: center; }