:root{
  --bg:#0e1824; --painel:#142130; --painel2:#1a2a3d; --borda:#22354a;
  --txt:#c8d2dc; --tit:#f0f4f8; --apag:#8494a3;
  --acento:#e88c2c; --acento2:#78bed2; --ok:#4caf7d; --erro:#d9534f;
  --raio:12px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--txt);
     font:16px/1.6 "Segoe UI",system-ui,Roboto,-apple-system,sans-serif;
     padding-bottom:24px; overflow-wrap:break-word}
body.com-player{padding-bottom:210px}
a{color:var(--acento2)}
h1,h2,h3,h4{color:var(--tit); line-height:1.3}

/* ---------- cabecalho ---------- */
header{position:sticky; top:0; z-index:6; background:var(--painel);
       padding:12px 16px; border-bottom:2px solid var(--acento)}
header .linha{display:flex; align-items:center; gap:10px;
              max-width:820px; margin:0 auto}
#voltar{background:var(--painel2); color:var(--tit); border:1px solid var(--borda);
        border-radius:8px; width:36px; height:36px; font-size:18px; cursor:pointer;
        flex:0 0 auto; display:none}
header.interno #voltar{display:block}
header h1{margin:0; font-size:16px; letter-spacing:.3px; flex:1;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
header .sub{font-size:12px; color:var(--apag); margin:2px 0 0}
#instalar{background:var(--acento); color:#0e1824; border:0; border-radius:8px;
          padding:7px 12px; font-weight:700; font-size:12px; cursor:pointer;
          display:none; flex:0 0 auto}

main{max-width:820px; margin:0 auto; padding:14px}

/* ---------- cartoes de curso ---------- */
.cartao{display:block; width:100%; text-align:left; background:var(--painel);
        border:1px solid var(--borda); border-left:4px solid var(--acento);
        border-radius:var(--raio); padding:16px; margin-bottom:14px;
        cursor:pointer; color:inherit; font:inherit}
.cartao:active{background:var(--painel2)}
.cartao.pago{border-left-color:var(--apag); opacity:.75}
.cartao h2{margin:0 0 4px; font-size:18px}
.cartao .meta{font-size:13px; color:var(--apag)}
.cartao .nota{display:inline-block; margin-top:8px; font-size:11px;
              background:var(--painel2); color:var(--acento2);
              border:1px solid var(--borda); border-radius:20px; padding:3px 10px;
              letter-spacing:.4px; text-transform:uppercase}
.cartao .cad{float:right; font-size:18px}

.barra-prog{height:7px; background:var(--painel2); border-radius:6px;
            overflow:hidden; margin:12px 0 6px}
.barra-prog i{display:block; height:100%; background:var(--acento);
              border-radius:6px; transition:width .3s}
.prog-txt{font-size:12px; color:var(--apag)}

/* ---------- blocos ---------- */
.bloco{background:var(--painel); border:1px solid var(--borda);
       border-radius:var(--raio); padding:14px 16px; margin-bottom:14px}
.bloco h3{margin:0 0 8px; font-size:14px; letter-spacing:.5px;
          text-transform:uppercase; color:var(--acento)}
.btn{background:var(--painel2); color:var(--tit); border:1px solid var(--borda);
     border-radius:9px; padding:11px 16px; font:600 14px/1 inherit;
     cursor:pointer; margin:4px 6px 4px 0}
.btn:active{background:var(--borda)}
.btn.forte{background:var(--acento); color:#0e1824; border-color:var(--acento)}
.btn.ok{background:var(--ok); color:#07130d; border-color:var(--ok)}
.btn:disabled{opacity:.45; cursor:default}
.btn.largo{display:block; width:100%; margin:8px 0; text-align:center}
.lista-mat a{display:block; padding:9px 0; border-bottom:1px solid var(--borda);
             text-decoration:none}
.lista-mat a:last-child{border-bottom:0}

/* ---------- modulos e aulas ---------- */
.modulo{margin-bottom:10px; border:1px solid var(--borda); border-radius:var(--raio);
        overflow:hidden; background:var(--painel)}
.modcab{display:flex; align-items:center; gap:12px; padding:13px 14px;
        cursor:pointer; user-select:none}
.modcab .n{background:var(--painel2); color:var(--acento); font-weight:700;
           border-radius:8px; min-width:42px; text-align:center; padding:6px 4px;
           font-size:13px; flex:0 0 auto}
.modcab .t{flex:1; color:var(--tit); font-weight:600; font-size:15px}
.modcab .p{font-size:12px; color:var(--apag); flex:0 0 auto}
.aulas{display:none; border-top:1px solid var(--borda)}
.modulo.aberto .aulas{display:block}
.aula{display:flex; align-items:center; gap:11px; padding:12px 14px;
      cursor:pointer; border-bottom:1px solid #1b2c3f}
.aula:last-child{border-bottom:0}
.aula:active{background:var(--painel2)}
.aula .num{color:var(--apag); font-size:13px; min-width:24px}
.aula .tit{flex:1; font-size:15px}
.aula .dur{color:var(--apag); font-size:12px; flex:0 0 auto}
.aula .st{width:18px; text-align:center; font-size:14px; flex:0 0 auto}
.aula.tocando .tit{color:var(--acento); font-weight:600}
.aula.feita .st{color:var(--ok)}
.aula .mq{color:var(--acento2); font-size:11px}

/* ---------- aula ---------- */
.cab-aula{margin-bottom:12px}
.cab-aula .onde{font-size:12px; color:var(--acento); letter-spacing:.5px;
                text-transform:uppercase}
.cab-aula h2{margin:4px 0 6px; font-size:21px}
.cab-aula .meta{font-size:13px; color:var(--apag)}
ul.topicos{margin:6px 0 0; padding-left:20px; font-size:15px}
ul.topicos li{margin-bottom:4px}

/* indice de secoes */
.indice ol{margin:0; padding-left:20px; font-size:14px}
.indice li{margin:3px 0}
.indice a{text-decoration:none}
.indice .n4{padding-left:14px; font-size:13px; color:var(--apag)}

/* texto da aula de leitura */
.texto{font-size:17px; line-height:1.72}
.texto h2{font-size:20px; margin:26px 0 8px; padding-bottom:5px;
          border-bottom:1px solid var(--borda)}
.texto h3{font-size:18px; margin:24px 0 7px; color:var(--acento)}
.texto h4{font-size:16px; margin:20px 0 6px; color:var(--acento2)}
.texto p{margin:0 0 14px}
.texto ul,.texto ol{margin:0 0 14px; padding-left:22px}
.texto li{margin-bottom:6px}
.texto strong{color:var(--tit)}
.texto code{background:var(--painel2); padding:1px 5px; border-radius:4px;
            font-size:.92em}
.texto pre{background:var(--painel2); padding:12px; border-radius:8px;
           overflow-x:auto}
.texto blockquote{margin:0 0 14px; padding:8px 14px; border-left:3px solid var(--acento);
                  background:var(--painel); color:var(--txt)}
.rolagem-tab{overflow-x:auto; margin:0 0 16px}
.texto table{border-collapse:collapse; width:100%; font-size:14px; min-width:420px}
.texto th,.texto td{border:1px solid var(--borda); padding:8px 10px;
                    text-align:left; vertical-align:top}
.texto th{background:var(--painel2); color:var(--tit)}

/* ---------- player ---------- */
#player{position:fixed; left:0; right:0; bottom:0; z-index:10; display:none;
        background:var(--painel); border-top:2px solid var(--acento);
        padding:8px 14px calc(10px + env(safe-area-inset-bottom))}
body.com-player #player{display:block}
#player .faixa{max-width:820px; margin:0 auto}
#midia{display:none; width:100%; max-height:40vh; background:#000;
       border-radius:8px; margin-bottom:8px}
body.video #midia{display:block}
#cheia{display:none}
body.video #cheia{display:inline-flex}
/* legenda em texto no player quando nao ha video na tela (audio) */
#leg-linha{display:none; font-size:15px; line-height:1.4; color:var(--tit);
           background:var(--painel2); border-radius:8px; padding:6px 10px;
           margin-bottom:6px; min-height:calc(2 * 1.4em + 12px);
           max-height:calc(4 * 1.4em + 12px); overflow:hidden; text-align:center}
body.com-leg:not(.video) #leg-linha{display:block}
body.so-audio #modo{display:none}
.botoes-ouvir{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
#ptit{font-size:13px; color:var(--tit); white-space:nowrap; overflow:hidden;
      text-overflow:ellipsis; margin-bottom:5px}
#barra{width:100%; accent-color:var(--acento); height:22px; margin:0}
.tempos{display:flex; justify-content:space-between; font-size:11px;
        color:var(--apag); margin-top:-5px}
.controles{display:flex; align-items:center; justify-content:center; gap:10px;
           margin-top:3px; flex-wrap:wrap}
.controles button{background:var(--painel2); color:var(--tit);
      border:1px solid var(--borda); border-radius:50%; width:42px; height:42px;
      font-size:14px; cursor:pointer; display:flex; align-items:center;
      justify-content:center; flex:0 0 auto; padding:0}
.controles #play{width:54px; height:54px; font-size:20px;
                 background:var(--acento); color:#0e1824; border:0; font-weight:700}
.controles .mini{width:auto; height:34px; border-radius:8px; font-size:12px;
                 padding:0 11px; font-weight:600}

/* ---------- camadas ---------- */
.camada{position:fixed; inset:0; z-index:20; background:var(--bg);
        display:none; flex-direction:column}
.camada.aberta{display:flex}
.camada .cab{display:flex; gap:10px; align-items:center; padding:12px 16px;
             background:var(--painel); border-bottom:2px solid var(--acento)}
.camada .cab b{flex:1; color:var(--tit); font-size:15px; white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis}
.camada .cab button,.camada .cab select{background:var(--painel2); color:var(--tit);
      border:1px solid var(--borda); border-radius:8px; padding:7px 10px;
      cursor:pointer; font-size:13px; font-family:inherit}
.camada .corpo{flex:1; overflow-y:auto; padding:16px; max-width:820px;
               margin:0 auto; width:100%}
#cues{padding-bottom:230px}
.cue{padding:7px 11px; border-radius:8px; margin-bottom:2px; cursor:pointer;
     color:var(--apag); font-size:16px; line-height:1.55}
.cue.ativa{background:var(--painel2); color:var(--tit);
           border-left:3px solid var(--acento)}
#cues[dir="rtl"] .cue{text-align:right; border-left:0; border-right:3px solid transparent}
#cues[dir="rtl"] .cue.ativa{border-right-color:var(--acento)}

/* ---------- questionario ---------- */
.questao{background:var(--painel); border:1px solid var(--borda);
         border-radius:var(--raio); padding:14px; margin-bottom:14px}
.questao .p{color:var(--tit); font-weight:600; margin-bottom:10px}
.alt{display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
     border:1px solid var(--borda); border-radius:9px; margin-bottom:7px;
     cursor:pointer; background:var(--bg)}
.alt input{margin:4px 0 0; accent-color:var(--acento); flex:0 0 auto}
.alt.certa{border-color:var(--ok); background:#12271d}
.alt.errada{border-color:var(--erro); background:#2a1414}
.expl{font-size:14px; color:var(--txt); background:var(--painel2);
      border-left:3px solid var(--acento2); border-radius:0 8px 8px 0;
      padding:9px 12px; margin-top:8px; display:none}
.questao.respondida .expl{display:block}
.placar{text-align:center; padding:14px; border-radius:var(--raio);
        margin-bottom:14px; font-weight:600}
.placar.aprovado{background:#12271d; color:#9ae0b8; border:1px solid var(--ok)}
.placar.reprovado{background:#2a1414; color:#f0b3b1; border:1px solid var(--erro)}

/* ---------- formularios ---------- */
label.campo{display:block; font-size:13px; color:var(--apag); margin:12px 0 5px}
input[type=text],textarea{width:100%; background:var(--bg); color:var(--tit);
      border:1px solid var(--borda); border-radius:9px; padding:11px 12px;
      font:16px/1.4 inherit}
textarea{min-height:120px; font-family:ui-monospace,Consolas,monospace; font-size:12px}
.aviso{font-size:12px; color:var(--apag); margin-top:10px}
.rodape{color:var(--apag); font-size:12px; text-align:center; margin:26px 0 10px;
        line-height:1.7}
#gate{align-items:center; justify-content:center; text-align:center; padding:30px;
      background:var(--bg)}
.vazio{color:var(--apag); text-align:center; padding:30px 10px}
.texto h2,.texto h3,.texto h4{scroll-margin-top:76px}

/* ---------- acesso por compra ("acesso": "api") ---------- */
#conta{display:none; background:var(--painel2); color:var(--tit);
       border:1px solid var(--borda); border-radius:8px; padding:7px 12px;
       font-weight:600; font-size:12px; cursor:pointer; flex:0 0 auto}
#conta-email{display:none; font-size:12px; color:var(--apag); max-width:30vw;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
             flex:0 1 auto}
#conta-caixa{display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0}
@media (max-width:560px){
  #conta-caixa{flex-direction:column-reverse; align-items:flex-end; gap:3px}
  #conta-email{max-width:34vw; font-size:11px}
}
.bt-comprar{font-weight:700; font-size:15px}
.aula.trancada .tit{color:var(--apag)}
.aula.trancada .st{width:auto; font-size:13px; opacity:.8}
.bloco.compra{border-left:4px solid var(--acento)}
.bloco.compra p{margin:0 0 8px}
.bloco.compra ul.topicos{margin:0 0 6px}
.lista-mat .mat-pago{display:block; padding:9px 0; border-bottom:1px solid var(--borda);
                     color:var(--apag)}
.lista-mat .mat-pago:last-child{border-bottom:0}
.bloco.login p{margin:0 0 8px}
input[type=email]{width:100%; background:var(--bg); color:var(--tit);
      border:1px solid var(--borda); border-radius:9px; padding:11px 12px;
      font:16px/1.4 inherit}
input.codigo{font-size:24px; letter-spacing:8px; text-align:center;
             font-variant-numeric:tabular-nums; max-width:260px; display:block}
.erro-login{color:#f0b3b1; min-height:1.2em; font-size:13px}
.erro-login a{color:var(--acento2)}
.dev-code{background:var(--painel2); border-radius:8px; padding:8px 10px; color:var(--tit)}
.rodape.priv{margin-top:-4px}