/* PE90D — visual no padrão dos apps do portal (fundo #161616, laranja, DM Sans) */
:root { --fundo: #161616; --painel: #1f1f1f; --painel2: #262626; --linha: rgba(255, 255, 255, .1); --texto: #eeeeee; --muted: #a3a3a3; --laranja: #ff9800; --verde: #3fbf6f; --vermelho: #e5484d; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/1.55 "DM Sans", system-ui, sans-serif; }
body { background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 22px 22px; min-height: 100vh; }
body.com-modal { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--laranja); }
[hidden] { display: none !important; }

/* topo */
.topo { position: sticky; top: 0; z-index: 40; background: rgba(22, 22, 22, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-dentro { max-width: 1500px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.marca span { display: flex; flex-direction: column; line-height: 1.15; }
.marca b { font-size: 19px; font-weight: 800; letter-spacing: .02em; }
.marca small { font-size: 12px; color: var(--muted); }
.topo-dir { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; }
.chip:hover { border-color: var(--laranja); color: var(--laranja); }
.chip i { font-size: 11px; }
.chip.prof.ativo { background: var(--laranja); border-color: var(--laranja); color: #171717; }
.mini-icone { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: var(--laranja); }
.mini-icone svg { width: 20px; height: 20px; }
.quem { color: var(--muted); font-size: 14px; }

main { padding: 26px 20px 120px; }
.largura { max-width: 1500px; margin: 0 auto; }
.centro-tela { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.girando { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--linha); border-top-color: var(--laranja); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.sobre { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--laranja); }
.titulo { margin: 4px 0 8px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; font-weight: 800; }
.sub { color: var(--muted); margin: 0 0 22px; max-width: 760px; }
.pequeno { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--laranja); background: var(--laranja); color: #171717; font-weight: 800; cursor: pointer; text-decoration: none; transition: .15s; }
.botao:hover { filter: brightness(1.08); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.grande { min-height: 52px; padding: 0 24px; font-size: 17px; }
.botao.pequeno { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.botao.fantasma { background: transparent; color: var(--texto); border-color: var(--linha); }
.botao.fantasma:hover { border-color: var(--laranja); color: var(--laranja); }
.botao.perigo:hover { border-color: var(--vermelho); color: var(--vermelho); }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* entrar / sem acesso */
.cartao-meio { max-width: 620px; margin: 8vh auto 0; text-align: center; padding: 34px 26px; border: 1px solid var(--linha); border-radius: 22px; background: var(--painel); }
.cartao-meio h1 { margin: 12px 0 6px; font-size: 32px; }
.cartao-meio .sub { margin: 0 auto 22px; }
.icone-grande { font-size: 42px; color: var(--laranja); }

/* instrumentos */
.instrumentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.instrumento { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 22px; border-radius: 20px; border: 1px solid var(--linha); background: var(--painel); cursor: pointer; text-align: left; transition: .15s; }
.instrumento:hover:not(:disabled) { border-color: var(--laranja); transform: translateY(-2px); }
.instrumento b { font-size: 22px; }
.instrumento small { color: var(--muted); }
.inst-icone { width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 146, 0, .12); color: var(--laranja); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.inst-icone svg { width: 38px; height: 38px; }
.instrumento.breve { opacity: .5; cursor: default; }

/* plano */
.barra-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; margin-bottom: 18px; border: 1px dashed var(--laranja); border-radius: 14px; background: rgba(255, 152, 0, .06); font-size: 14px; }
.barra-prof > span { font-weight: 800; color: var(--laranja); }
.interruptor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.interruptor input { accent-color: var(--laranja); width: 18px; height: 18px; }
.plano-topo { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: flex-end; justify-content: space-between; }
.aviso-rascunho { color: var(--laranja); font-size: 14px; margin: 0; }
.numeros { display: flex; gap: 12px; }
.numeros > div { min-width: 120px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--linha); background: var(--painel); }
.numeros b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.numeros b small { font-size: 15px; color: var(--muted); font-weight: 700; }
.numeros span { font-size: 12px; color: var(--muted); }
.barra { height: 10px; border-radius: 99px; background: var(--painel2); margin: 18px 0; overflow: hidden; }
.barra span { display: block; height: 100%; background: linear-gradient(90deg, #ff7a00, var(--laranja)); border-radius: 99px; }
.continuar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(255, 152, 0, .45); background: linear-gradient(135deg, rgba(255, 152, 0, .12), rgba(255, 152, 0, .03)); }
.continuar small { display: block; color: var(--muted); font-size: 13px; }
.continuar b { font-size: 20px; }
.orientacoes { margin: 18px 0 8px; border: 1px solid var(--linha); border-radius: 14px; background: var(--painel); }
.orientacoes summary { cursor: pointer; padding: 14px 18px; font-weight: 800; }
.orientacoes summary i { color: var(--laranja); margin-right: 6px; }
.orientacoes > div { padding: 0 18px 8px; color: #d6d6d6; }
.mes h2 { font-size: 18px; margin: 28px 0 12px; color: var(--laranja); }
.dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dia-cartao { display: grid; grid-template-columns: 38px 1fr 22px; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--linha); background: var(--painel); text-align: left; cursor: pointer; min-height: 64px; }
.dia-cartao:hover { border-color: var(--laranja); }
.dia-num { width: 38px; height: 38px; border-radius: 10px; background: var(--painel2); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.dia-tit { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dia-st { color: var(--muted); text-align: center; }
.dia-cartao.feito .dia-num { background: rgba(63, 191, 111, .18); color: var(--verde); }
.dia-cartao.feito .dia-st { color: var(--verde); }
.dia-cartao.livre .dia-st { color: var(--laranja); }
.dia-cartao.proximo { border-color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja) inset; }
.dia-cartao.proximo .dia-num { background: var(--laranja); color: #171717; }
.dia-cartao.trancado, .dia-cartao.amanha { opacity: .5; cursor: default; }

/* dia */
.dia-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 14px; }
.dia-nav-dir { display: flex; gap: 6px; }
.objetivo { margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--laranja); background: rgba(255, 152, 0, .07); border-radius: 0 12px 12px 0; max-width: 980px; }
.objetivo i { color: var(--laranja); margin-right: 6px; }
.dia-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.dia-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--linha); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.vazio { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; color: var(--muted); background: var(--painel); aspect-ratio: auto; padding: 18px; }
.video.vazio i { font-size: 28px; color: #ff4e45; opacity: .7; }
.video-tit { margin: -8px 0 0; color: var(--muted); font-size: 14px; }
.texto { padding: 4px 4px 0; color: #dcdcdc; }
.dia-lado { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; }
.cartao { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--linha); background: var(--painel); }
.cartao h3 { margin: 0 0 10px; font-size: 16px; }
.cartao h3 i { color: var(--laranja); margin-right: 6px; }
.tarefas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tarefas label { display: grid; grid-template-columns: 22px 1fr; gap: 8px; cursor: pointer; font-size: 14.5px; line-height: 1.45; }
.tarefas input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--verde); }
.tarefas input:checked + span { color: var(--muted); text-decoration: line-through; }
.material { display: flex; gap: 8px; align-items: center; padding: 8px 0; text-decoration: none; font-weight: 600; }
.cronometro b { display: block; font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cronometro.rodando b { color: var(--laranja); }
.crono-barra { height: 8px; border-radius: 99px; background: var(--painel2); overflow: hidden; margin: 6px 0; }
.crono-barra span { display: block; height: 100%; width: 0; background: var(--verde); }
.cronometro small, .concluir small { display: block; color: var(--muted); font-size: 12.5px; margin: 4px 0 10px; }
.cronometro .botao, .concluir .botao { width: 100%; }
.concluir .feito { color: var(--verde); font-weight: 800; margin: 0 0 10px; }

/* modal amplo */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .65); display: flex; align-items: flex-start; justify-content: center; padding: 2vh 2vw; overflow-y: auto; }
.modal-caixa { width: 100%; max-width: 760px; background: var(--painel); border: 1px solid var(--linha); border-radius: 20px; padding: 18px 22px; }
.modal-caixa.largo { max-width: 1500px; min-height: 96vh; display: flex; flex-direction: column; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-topo h2 { margin: 0; font-size: 22px; }
.editor { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 20px; flex: 1; }
.editor .col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); }
.campo small { font-weight: 500; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); font-size: 15px; font-weight: 500; }
.campo textarea { resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--laranja); }
.campos-ferr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-pe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); }
.modal-pe .esq, .modal-pe .dir { display: flex; flex-wrap: wrap; gap: 8px; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px); opacity: 0; z-index: 99; background: #2b2b2b; border: 1px solid var(--laranja); padding: 12px 18px; border-radius: 12px; font-weight: 600; transition: .25s; pointer-events: none; max-width: 92vw; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------- ferramenta do dia */
.ferramenta { padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 152, 0, .35); background: var(--painel); display: flex; flex-direction: column; gap: 14px; }
.ferramenta.previa { padding: 12px; }
.fe-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.fe-titulo { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja); }
.fe-dica { font-size: 13px; color: var(--muted); }
.fe-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fe-linha.centro { justify-content: center; }
.fe-abas { display: inline-flex; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.fe-abas button { border: 0; background: transparent; padding: 8px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.fe-abas button.ativo { background: var(--laranja); color: #171717; }
.fe-bpm { display: inline-flex; align-items: center; gap: 8px; }
.fe-bpm b { font-size: 22px; min-width: 40px; text-align: center; }
.fe-bpm small { color: var(--muted); font-size: 11px; font-weight: 800; margin-left: -4px; }
.fe-redondo { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; font-size: 18px; cursor: pointer; }
.fe-redondo:hover { border-color: var(--laranja); color: var(--laranja); }
.fe-play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--laranja); color: #171717; font-weight: 800; cursor: pointer; }
.fe-play svg { width: 18px; height: 18px; }
.fe-play.tocando { background: #fff; }
.fe-botao { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--linha); background: transparent; font-weight: 700; cursor: pointer; }
.fe-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.fe-check input { accent-color: var(--laranja); width: 17px; height: 17px; }
.fe-seq { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-seq span { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 9px; background: var(--painel2); display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-weight: 800; transition: .08s; }
.fe-seq span small { font-size: 10px; color: var(--muted); }
.fe-seq span.agora { background: var(--laranja); color: #171717; transform: scale(1.12); }
.fe-seq span.agora small { color: #171717; }
.fe-nota-pe { margin: 0; font-size: 12.5px; color: var(--muted); }
.fe-grande { margin: 0; text-align: center; font-size: 20px; }
.fe-grande b { color: var(--laranja); }
.fe-rolar { overflow-x: auto; padding-bottom: 4px; }
.fe-jogo { text-align: center; }
.fe-pedido { margin: 0; font-size: 26px; }
.fe-pedido b { color: var(--laranja); font-size: 34px; }
.fe-pedido small { color: var(--muted); font-size: 18px; }
.fe-placar { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.fe-placar .ok { color: var(--verde); }
.fe-placar .erro { color: var(--vermelho); }
.fe-pulsos { display: flex; justify-content: center; gap: 12px; }
.fe-pulsos span { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--linha); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; transition: .06s; }
.fe-pulsos span:first-child { border-color: rgba(255, 152, 0, .5); }
.fe-pulsos span.agora { background: var(--laranja); border-color: var(--laranja); color: #171717; transform: scale(1.1); }
.fe-acordes { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-acordes button { min-width: 50px; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linha); background: transparent; font-weight: 800; cursor: pointer; }
.fe-acordes button.ativo { background: var(--laranja); border-color: var(--laranja); color: #171717; }
.fe-acorde-grande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.fe-acorde-grande b { font-size: 40px; line-height: 1; color: var(--laranja); }
.fe-acorde-grande span { font-weight: 700; }
.fe-acorde-grande small { color: var(--muted); }
.fe-batidas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.fe-batidas span { height: 26px; border-radius: 6px; background: var(--painel2); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.fe-batidas span.toca { background: rgba(255, 152, 0, .35); color: #fff; }
.fe-batidas span.agora { outline: 2px solid var(--verde); }
.fe-batidas span.toca.agora { background: var(--laranja); color: #171717; }

/* teclado da tela (de som.js; mesmo desenho das Ferramentas Musicais) */
.piano { position: relative; height: 150px; min-width: 620px; user-select: none; touch-action: manipulation; }
.piano .tecla { position: absolute; top: 0; border: 0; padding: 0; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; font: 800 12px "DM Sans", sans-serif; transition: background .1s; }
.piano .branca { height: 100%; background: linear-gradient(#f4f4f4, #ffffff); border: 1px solid #bdbdbd; border-radius: 0 0 8px 8px; color: #171717; z-index: 1; padding-bottom: 10px; }
.piano .preta { height: 60%; background: linear-gradient(#3a3a3a, #111); border-radius: 0 0 6px 6px; color: #fff; z-index: 2; padding-bottom: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, .4); }
.piano .tecla span { pointer-events: none; }
.piano .branca.marcada { background: linear-gradient(#ffd08a, #ffb84d); }
.piano .preta.marcada { background: linear-gradient(#ffb347, #e07b00); color: #171717; }
.piano .tecla.raiz { background: linear-gradient(#ff9800, #ec8800) !important; color: #171717; }
.piano .tecla.apertada, .piano .tecla.soando { background: #3fbf6f !important; color: #fff; }
.piano .tecla.segurada { background: linear-gradient(#4fd17f, #3fbf6f) !important; color: #fff; }
.piano .tecla.segurada.fora { background: linear-gradient(#f26b67, #e04844) !important; color: #fff; }

@media (max-width: 1100px) {
  .dia-grade { grid-template-columns: 1fr; }
  .dia-lado { position: static; }
  .editor { grid-template-columns: 1fr 1fr; }
  .editor .col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  main { padding: 18px 14px 120px; }
  .topo-dentro { padding: 8px 12px; }
  .marca small, .quem { display: none; }
  .chip.prof span { display: none; }
  .numeros { width: 100%; }
  .numeros > div { flex: 1; min-width: 0; padding: 10px; }
  .numeros b { font-size: 21px; }
  .editor, .campos-ferr, .duas { grid-template-columns: 1fr; }
  .modal { padding: 0; }
  .modal-caixa, .modal-caixa.largo { border-radius: 0; min-height: 100vh; }
  .piano { height: 130px; }
  .fe-pulsos span { width: 46px; height: 46px; }
}

/* ===================== 31/10/2026 (2ª rodada) ===================== */
/* + e − : o conteúdo cresce ou diminui (o topo fica igual) */
main { zoom: var(--zoom, 1); }
.chip.redondo { width: 38px; padding: 0; justify-content: center; font-size: 18px; }
.tam { display: inline-flex; gap: 4px; }
.chip.redondo i { font-size: 15px; }

/* tema claro */
html[data-tema="claro"] { --fundo: #f6f4f0; --painel: #ffffff; --painel2: #ece8e1; --linha: rgba(0, 0, 0, .12); --texto: #1d1b18; --muted: #6b655c; --laranja: #e07b00; --verde: #1f9d55; --vermelho: #d33a3f; }
html[data-tema="claro"] body { background-image: radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px); }
html[data-tema="claro"] .topo { background: rgba(246, 244, 240, .94); }
html[data-tema="claro"] .texto, html[data-tema="claro"] .orientacoes > div { color: #3a362f; }
html[data-tema="claro"] .toast { background: #fff; }
html[data-tema="claro"] .fe-play.tocando { background: #1d1b18; color: #fff; }
html[data-tema="claro"] .fe-batidas span.toca { color: #1d1b18; }
html[data-tema="claro"] .modal { background: rgba(0, 0, 0, .4); }

/* números do topo do plano viram botão para o painel */
button.numeros { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
button.numeros > div:hover { border-color: var(--laranja); }

/* grade, lista ou cartões */
.vistas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; }
.vistas button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha); background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; }
.vistas button.ativo { background: var(--laranja); border-color: var(--laranja); color: #171717; }
.mes h2 small { font-size: 13px; color: var(--muted); font-weight: 700; margin-left: 6px; }
.aulas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.grade-aula { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel); font-weight: 800; font-size: 16px; cursor: pointer; }
.grade-aula:hover { border-color: var(--laranja); }
.grade-aula.feito { background: rgba(63, 191, 111, .2); color: var(--verde); border-color: rgba(63, 191, 111, .4); }
.grade-aula.proximo { background: var(--laranja); color: #171717; border-color: var(--laranja); }
.grade-aula.trancado, .grade-aula.amanha { opacity: .45; cursor: default; font-size: 13px; }
.aulas-lista { display: flex; flex-direction: column; gap: 6px; }
.lista-aula { display: grid; grid-template-columns: 38px 1fr auto 22px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel); text-align: left; cursor: pointer; }
.lista-aula:hover { border-color: var(--laranja); }
.lista-info { font-size: 12.5px; color: var(--muted); }
.lista-aula.feito .dia-num { background: rgba(63, 191, 111, .18); color: var(--verde); }
.lista-aula.feito .dia-st { color: var(--verde); }
.lista-aula.livre .dia-st { color: var(--laranja); }
.lista-aula.proximo { border-color: var(--laranja); }
.lista-aula.proximo .dia-num { background: var(--laranja); color: #171717; }
.lista-aula.trancado, .lista-aula.amanha { opacity: .5; cursor: default; }

/* painel do aluno */
.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.painel-grade + .cartao, .painel-grade ~ .cartao { margin-bottom: 14px; }
.painel-anel { display: flex; align-items: center; gap: 16px; }
.painel-anel b, .painel-num b { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; }
.painel-anel span, .painel-num span { display: block; font-weight: 700; }
.painel-anel small, .painel-num small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.painel-num i { color: var(--laranja); font-size: 22px; margin-bottom: 6px; }
.anel { width: 96px; height: 96px; transform: rotate(-90deg); flex: none; }
.anel-fundo { fill: none; stroke: var(--painel2); stroke-width: 12; }
.anel-valor { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .6s; }
.ok { color: var(--verde); }
.erro { color: var(--vermelho); }
.mod-linha { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 52px; gap: 12px; align-items: center; margin: 8px 0; font-size: 14px; }
.barra.fina { height: 8px; margin: 0; }
.tabela-aval { display: flex; flex-direction: column; }
.tabela-aval > * { display: grid; grid-template-columns: 1fr 90px 80px 70px 30px; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--linha); text-align: left; font-size: 14px; }
.tabela-aval .cab { color: var(--muted); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tabela-aval button { background: none; border: 0; border-bottom: 1px solid var(--linha); cursor: pointer; color: inherit; font: inherit; }
.tabela-aval button:hover { background: var(--painel2); }

/* avaliação da aula */
.avaliacao h3 small { font-weight: 600; margin-left: 6px; }
.pergunta { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px 12px; margin: 0 0 10px; }
.pergunta legend { padding: 0 6px; font-weight: 800; }
.opcao { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.opcao:hover { background: var(--painel2); }
.opcao input { accent-color: var(--laranja); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.pergunta.certa { border-color: var(--verde); background: rgba(63, 191, 111, .08); }
.pergunta.errada { border-color: var(--vermelho); background: rgba(229, 72, 77, .08); }
.pergunta.errada legend::after { content: "  ✗ errada"; color: var(--vermelho); font-size: 13px; }
.pergunta.certa legend::after { content: "  ✓ certa"; color: var(--verde); font-size: 13px; }
.aval-pe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { background: none; border: 0; color: var(--laranja); font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }
.duvida h3 img { vertical-align: -3px; margin-right: 4px; }
.duvida .botao { width: 100%; }

/* vídeo: faixa de cima, tampa do título e vídeo pequeno que se arrasta */
.video-caixa { display: flex; flex-direction: column; gap: 6px; }
.video-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); }
.video-pegar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.video-pegar i { display: none; }
.video-botoes button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--linha); background: var(--painel); font-weight: 700; font-size: 13px; cursor: pointer; }
.video-botoes button:hover { border-color: var(--laranja); color: var(--laranja); }
.video-tampa { position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 2; }
.video-lugar { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--linha); border-radius: 16px; color: var(--muted); font-size: 14px; cursor: pointer; }
.video-caixa.flutuante { position: fixed; z-index: 70; right: 16px; bottom: 90px; width: min(380px, 70vw); padding: 6px; border-radius: 14px; background: var(--painel); border: 1px solid var(--laranja); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); zoom: calc(1 / var(--zoom, 1)); }
.video-caixa.flutuante .video-barra { cursor: grab; touch-action: none; user-select: none; padding: 2px 4px; }
.video-caixa.flutuante .video-pegar i { display: inline; }
.video-caixa.flutuante .video { border-radius: 10px; }

/* régua do compasso |1 2 3 4|1 2 3 4| */
.fe-regua { display: flex; flex-direction: column; gap: 4px; }
.fe-regua small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fe-compassos { display: flex; flex-wrap: wrap; gap: 0; }
.fe-compasso { display: inline-flex; gap: 4px; padding: 4px 8px; border-left: 3px solid var(--texto); }
.fe-compasso:last-child { border-right: 3px solid var(--texto); }
.fe-compasso.atual { background: rgba(255, 152, 0, .08); }
.fe-compasso.conta { border-color: var(--muted); }
.fe-compasso i { font-style: normal; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--painel2); color: var(--muted); transition: .06s; }
.fe-compasso i.um { color: var(--texto); }
.fe-compasso i.passou { background: rgba(255, 152, 0, .22); color: var(--texto); }
.fe-compasso i.agora { background: var(--laranja); color: #171717; transform: scale(1.12); }
.fe-compasso.conta i.agora { background: var(--texto); color: var(--fundo); }

@media (max-width: 700px) {
  .so-largo { display: none; }
  .topo-dir { gap: 4px; }
  .chip { min-height: 34px; padding: 0 10px; }
  .chip.redondo { width: 34px; }
  .lista-aula { grid-template-columns: 32px 1fr 20px; }
  .lista-info { display: none; }
  .mod-linha { grid-template-columns: 1fr 44px; }
  .mod-linha .barra { grid-column: 1 / -1; grid-row: 2; }
  .tabela-aval > * { grid-template-columns: 1fr 44px 44px 44px 24px; font-size: 13px; }
  .fe-compasso { padding: 3px 4px; gap: 3px; }
  .fe-compasso i { width: 24px; height: 26px; font-size: 13px; }
  .video-caixa.flutuante { width: 62vw; right: 8px; bottom: 80px; }
}
@media (max-width: 420px) { .marca span b { font-size: 16px; } .quem { display: none; } }
.painel-anel small span { display: inline; font-weight: 700; }