*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font-family:Inter,system-ui,sans-serif}
body{min-height:100vh;display:flex;flex-direction:column}
header{background:var(--navy);color:#fff}
header .in{max-width:1200px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
header a{color:#fff;text-decoration:none;font-weight:600;font-size:15px}
header a:hover{text-decoration:underline}
header span{color:#b9cde0;font-size:14px}
a:focus-visible,button:focus-visible{outline:2px solid var(--cort,#003060);outline-offset:2px}
header a:focus-visible{outline-color:#fff}
main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:24px 16px 40px}

/* identificação do sistema */
.ident{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.logo{height:48px;width:auto;flex:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px}
.ident-tx{min-width:0}
h1{font-size:26px;margin:0;font-weight:700;line-height:1.2}
.meta{margin:3px 0 0;color:var(--muted);font-size:14px;font-weight:500}
.sub{color:var(--muted);margin:8px 0 18px;font-size:15px;line-height:1.55;max-width:860px}

/* esqueleto de texto enquanto busca os dados */
.pg-esq{color:transparent!important;background:#EDF0F3;border-radius:6px;animation:pg-pulso 1.4s ease-in-out infinite}
h1.pg-esq{width:240px}
.meta.pg-esq{width:320px;max-width:80%}
.sub.pg-esq{width:640px;max-width:100%;min-height:44px}
.esq-li{height:62px;background:#F1F4F7;border-radius:8px;animation:pg-pulso 1.4s ease-in-out infinite}
@keyframes pg-pulso{50%{opacity:.55}}

.dica{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.9}

/* abaixo do player: capítulos e materiais */
.abaixo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;margin-top:26px;align-items:start}
.abaixo h2{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.caps button{position:relative;width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);overflow:hidden}
.caps button:hover{border-color:var(--cort)}
.caps .n{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;width:22px;flex:none}
.caps .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.caps .tx b{font-size:15px;font-weight:600}
.caps .tx small{font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.6px}
.caps .ini{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.caps .ok{width:22px;height:22px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:transparent;border:1px solid var(--line)}
.caps .ok svg{width:14px;height:14px}
.caps .visto .ok{background:#E8F3EC;border-color:#BFDCC8;color:#1E7B3A}
.caps .fill{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.caps .fill i{display:block;height:100%;width:0;background:var(--cort)}
.caps .atual button{border-color:var(--cort);box-shadow:inset 4px 0 0 var(--cort)}
.caps .atual .n,.caps .atual .tx b{color:var(--cort)}

.links{display:flex;flex-direction:column;gap:10px}
.cartao-link{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;width:100%;box-shadow:0 2px 6px rgba(20,32,42,.04)}
.cartao-link:hover{border-color:var(--cort)}
.cartao-link svg{width:24px;height:24px;flex:none;color:var(--cort)}
.cartao-link span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cartao-link b{font-size:15px;font-weight:600;color:var(--cort)}
.cartao-link small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* erro (sistema não informado ou não encontrado) */
.erro{padding:28px;margin:0;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:8px;font-size:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.erro a.bt{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:10px 16px;border-radius:8px}
.erro a.bt svg{width:16px;height:16px}

footer{background:var(--navy-d);color:#b9cde0;font-size:14px}
footer .in{max-width:1200px;margin:0 auto;padding:18px 16px}

@media (max-width:860px){.abaixo{grid-template-columns:1fr;gap:22px}.links-box{order:-1}}
@media (max-width:600px){
  main{padding:16px 16px 32px}
  h1{font-size:21px}
  .logo{height:40px}
  .sub{font-size:14px}
  .caps button{padding:10px 12px;gap:10px}
  .caps .tx small{display:none}
}
@media (prefers-reduced-motion: reduce){.pg-esq,.esq-li{animation:none}}