@import url("../vendor/modern-normalize.css");

@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jbmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibmmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("../fonts/sharetech-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root{
  --carbono:    oklch(0.975 0.004 250);
  --carbono-2:  oklch(0.945 0.006 250);
  --painel:     oklch(1 0 0);
  --painel-2:   oklch(0.955 0.006 250);
  --leitura:    oklch(0.968 0.005 250);
  --borda:      oklch(0.800 0.014 250);
  --borda-forte:oklch(0.580 0.022 250);
  --tinta:      oklch(0.235 0.018 250);
  --tinta-2:    oklch(0.435 0.018 250);
  --tinta-3:    oklch(0.515 0.016 250);
  --frio:        oklch(0.475 0.105 218);
  --frio-fundo:  oklch(0.475 0.105 218 / 0.10);
  --frio-fundo-suave:oklch(0.475 0.105 218 / 0.07);
  --frio-fundo-forte:oklch(0.475 0.105 218 / 0.18);
  --frio-fade:   oklch(0.475 0.105 218 / 0.30);
  --quente:      oklch(0.470 0.105 74);
  --quente-fundo:oklch(0.470 0.105 74 / 0.12);
  --quente-fade: oklch(0.470 0.105 74 / 0.30);
  --certo:       oklch(0.455 0.115 152);
  --certo-fundo: oklch(0.455 0.115 152 / 0.11);
  --errado:      oklch(0.475 0.160 27);
  --errado-fundo:oklch(0.475 0.160 27 / 0.10);
  --textura:     oklch(0.450 0.030 250 / 0.05);
  --halo:        oklch(0.700 0.040 240 / 0.20);
  --mapa-fundo:  oklch(0.945 0.006 250 / 0.94);
  --hover-suave: oklch(0.480 0.030 240 / 0.06);
  --neutro-fundo:oklch(0.450 0.018 250 / 0.08);
  --campo-fundo: oklch(0.962 0.005 250);
  --anel-foco: inset 0 0 0 1px var(--frio), 0 0 0 1px var(--frio);
  --btn-forte-fundo: var(--frio);
  --btn-forte-tinta: oklch(0.99 0 0);
  --btn-forte-hover: oklch(0.370 0.090 218);
  --btn-forte-w: 2px;
  --btn-forte-pad: 9px 16px;
  --sel-w: 2px;
  --sel-pad: 11px 14px;
  --sel-fundo: var(--frio-fundo);
  --vf-sel-fundo: var(--frio);
  --vf-sel-tinta: oklch(0.99 0 0);
  --preenche: linear-gradient(90deg,oklch(0.660 0.090 218),var(--frio));
  --varredura: oklch(0.200 0.050 218 / 0.45);
  --display:"Rajdhani","Segoe UI Semibold",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code","Consolas",monospace;
  --prosa:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --e0: 2px; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --t-rotulo: 11px; --t-mini: 13px; --t-corpo: 16px; --t-medio: 20px; --t-titulo: 25px; --t-display: 40px; --t-instrumento: 64px;
  --r-0: 0; --r-1: 2px;
  --dur-rapida: 120ms; --dur: 200ms; --dur-lenta: 320ms;
}

/* Valores escuros se repetem nos dois blocos; altere ambos para preservar a cascata. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --carbono:    oklch(0.145 0.008 250);
    --carbono-2:  oklch(0.115 0.008 250);
    --painel:     oklch(0.205 0.011 250);
    --painel-2:   oklch(0.245 0.012 250);
    --leitura:    oklch(0.235 0.010 250);
    --borda:      oklch(0.36 0.014 250);
    --borda-forte:oklch(0.48 0.020 250);
    --tinta:      oklch(0.955 0.004 250);
    --tinta-2:    oklch(0.795 0.010 250);
    --tinta-3:    oklch(0.700 0.012 250);
    --frio:        oklch(0.840 0.125 218);
    --frio-fundo:  oklch(0.840 0.125 218 / 0.13);
    --frio-fundo-suave:oklch(0.840 0.125 218 / 0.10);
    --frio-fundo-forte:oklch(0.840 0.125 218 / 0.24);
    --frio-fade:   oklch(0.840 0.125 218 / 0.25);
    --quente:      oklch(0.845 0.140 74);
    --quente-fundo:oklch(0.845 0.140 74 / 0.13);
    --quente-fade: oklch(0.845 0.140 74 / 0.25);
    --certo:       oklch(0.820 0.160 152);
    --certo-fundo: oklch(0.820 0.160 152 / 0.13);
    --errado:      oklch(0.735 0.165 25);
    --errado-fundo:oklch(0.735 0.165 25 / 0.08);
    --textura:     oklch(0.62 0.03 240 / 0.035);
    --halo:        oklch(0.24 0.02 240 / 0.55);
    --mapa-fundo:  oklch(0.115 0.008 250 / 0.94);
    --hover-suave: oklch(0.62 0.03 240 / 0.07);
    --neutro-fundo:oklch(0.70 0.012 250 / 0.10);
    --campo-fundo: oklch(0.115 0.008 250);
    --anel-foco: 0 0 0 1px var(--frio), 0 0 14px oklch(0.840 0.125 218 / 0.35);
    --btn-forte-fundo: var(--frio-fundo);
    --btn-forte-tinta: var(--frio);
    --btn-forte-hover: var(--frio-fundo-forte);
    --btn-forte-w: 1px;
    --btn-forte-pad: 10px 17px;
    --sel-w: 1px;
    --sel-pad: 12px 15px;
    --sel-fundo: var(--frio-fundo-suave);
    --vf-sel-fundo: var(--frio-fundo);
    --vf-sel-tinta: var(--frio);
    --preenche: linear-gradient(90deg,oklch(0.840 0.125 218 / 0.55),var(--frio));
    --varredura: oklch(0.98 0.02 218 / 0.55);
  }
}

:root[data-tema="escuro"]{
  --carbono:    oklch(0.145 0.008 250);
  --carbono-2:  oklch(0.115 0.008 250);
  --painel:     oklch(0.205 0.011 250);
  --painel-2:   oklch(0.245 0.012 250);
  --leitura:    oklch(0.235 0.010 250);
  --borda:      oklch(0.36 0.014 250);
  --borda-forte:oklch(0.48 0.020 250);
  --tinta:      oklch(0.955 0.004 250);
  --tinta-2:    oklch(0.795 0.010 250);
  --tinta-3:    oklch(0.700 0.012 250);
  --frio:        oklch(0.840 0.125 218);
  --frio-fundo:  oklch(0.840 0.125 218 / 0.13);
  --frio-fundo-suave:oklch(0.840 0.125 218 / 0.10);
  --frio-fundo-forte:oklch(0.840 0.125 218 / 0.24);
  --frio-fade:   oklch(0.840 0.125 218 / 0.25);
  --quente:      oklch(0.845 0.140 74);
  --quente-fundo:oklch(0.845 0.140 74 / 0.13);
  --quente-fade: oklch(0.845 0.140 74 / 0.25);
  --certo:       oklch(0.820 0.160 152);
  --certo-fundo: oklch(0.820 0.160 152 / 0.13);
  --errado:      oklch(0.735 0.165 25);
  --errado-fundo:oklch(0.735 0.165 25 / 0.08);
  --textura:     oklch(0.62 0.03 240 / 0.035);
  --halo:        oklch(0.24 0.02 240 / 0.55);
  --mapa-fundo:  oklch(0.115 0.008 250 / 0.94);
  --hover-suave: oklch(0.62 0.03 240 / 0.07);
  --neutro-fundo:oklch(0.70 0.012 250 / 0.10);
  --campo-fundo: oklch(0.115 0.008 250);
  --anel-foco: 0 0 0 1px var(--frio), 0 0 14px oklch(0.840 0.125 218 / 0.35);
  --btn-forte-fundo: var(--frio-fundo);
  --btn-forte-tinta: var(--frio);
  --btn-forte-hover: var(--frio-fundo-forte);
  --btn-forte-w: 1px;
  --btn-forte-pad: 10px 17px;
  --sel-w: 1px;
  --sel-pad: 12px 15px;
  --sel-fundo: var(--frio-fundo-suave);
  --vf-sel-fundo: var(--frio-fundo);
  --vf-sel-tinta: var(--frio);
  --preenche: linear-gradient(90deg,oklch(0.840 0.125 218 / 0.55),var(--frio));
  --varredura: oklch(0.98 0.02 218 / 0.55);
}

* { min-width: 0; }
html { color-scheme: light dark; background: var(--carbono); }
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }
body { min-height: 100vh; overflow-x: hidden; color: var(--tinta); background: repeating-linear-gradient(135deg, transparent 0 9px, var(--textura) 9px 10px), radial-gradient(120% 90% at 50% 0%, var(--halo), transparent 70%), var(--carbono); font-family: var(--prosa); font-size: var(--t-corpo); line-height: 1.7; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; }
a { color: var(--frio); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--frio); outline-offset: 3px; box-shadow: var(--anel-foco); }
.pular-conteudo { position: fixed; z-index: 2; top: var(--e2); left: var(--e2); padding: var(--e2) var(--e3); color: var(--btn-forte-tinta); background: var(--btn-forte-fundo); transform: translateY(-200%); transition: transform var(--dur-rapida); }
.pular-conteudo:focus { transform: translateY(0); }
.topo { position: sticky; z-index: 1; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--e3); min-height: 64px; padding: var(--e2) clamp(var(--e3), 4vw, var(--e5)); background: var(--mapa-fundo); border-top: 2px solid var(--frio); border-bottom: 1px solid var(--borda); backdrop-filter: blur(6px); }
.topo__marca { justify-self: start; color: var(--frio); font-family: var(--display); font-size: var(--t-medio); font-weight: 600; letter-spacing: 0.16em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.topo__marca-icone { display: none; }
.topo__centro { justify-self: center; overflow: hidden; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.topo__acoes { display: flex; justify-self: end; align-items: center; justify-content: end; gap: var(--e3); }
.topo__usuario { overflow: hidden; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); text-overflow: ellipsis; white-space: nowrap; }
.topo__acoes form { margin: 0; }
.tema { display: flex; align-items: center; gap: var(--e2); }
.tema__rotulo { color: var(--tinta-2); font-family: var(--display); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.tema__opcoes { display: flex; border: 1px solid var(--borda-forte); }
.tema label { position: relative; display: block; padding: var(--e1) var(--e3); color: var(--tinta-2); cursor: pointer; font-family: var(--mono); font-size: var(--t-rotulo); letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--dur), background-color var(--dur); }
.tema label + label { border-left: 1px solid var(--borda); }
.tema input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tema label:hover { color: var(--frio); }
.tema label:has(input:checked) { color: var(--vf-sel-tinta); background: var(--vf-sel-fundo); }
.tema label:has(input:focus-visible) { outline: 2px solid var(--frio); outline-offset: 2px; box-shadow: var(--anel-foco); }
.tema__aplicar { min-height: 32px; padding: var(--e1) var(--e2); color: var(--tinta); background: transparent; border: 1px solid var(--borda-forte); border-radius: var(--r-0); cursor: pointer; font-family: var(--display); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.tema__aplicar:hover { color: var(--frio); background: var(--frio-fundo); border-color: var(--frio); }
.topo__sair { min-height: 36px; padding: var(--e1) var(--e3); color: var(--tinta); background: transparent; border: 1px solid var(--borda-forte); border-radius: var(--r-0); cursor: pointer; font-family: var(--display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: background-color var(--dur), border-color var(--dur), color var(--dur); }
.topo__sair:hover { color: var(--frio); background: var(--frio-fundo); border-color: var(--frio); }
.topo__sair-icone { display: none; }
main { width: min(100% - (2 * var(--e4)), 1180px); margin: 0 auto; padding-block: var(--e5); }
@media (max-width: 480px) {
  :root { --t-instrumento: 48px; }
  .topo { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e2); padding-inline: var(--e3); }
  .topo__usuario { display: none; }
  .topo__marca { font-family: var(--mono); letter-spacing: 0; }
  .topo__marca-texto { display: none; }
  .topo__marca-icone { display: inline; }
  .tema__rotulo, html.tema-com-js .tema__aplicar { display: none; }
  .tema label { padding-inline: var(--e2); }
  .topo__sair-texto { display: none; }
  .topo__sair-icone { display: inline; }
  .topo__sair { width: 36px; padding: var(--e1); }
  .topo__centro { justify-self: stretch; }
  .abas-turma__lista { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e0); }
  .abas-turma__link { border: 1px solid var(--borda); text-align: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .barra-progresso__segmento::after { display: none; } }

/* ─── componentes compartilhados — templates/_partials/ (issue #307) ─── */
.icone { width: 24px; height: 24px; flex: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.badge .icone, .card-tarefa__prazo .icone, .card-material__tipo .icone, .cartao-turma__resumo .icone, .anexo .icone, .estado-vazio .icone { width: 18px; height: 18px; }

.painel { position: relative; background-color: var(--painel); background-image: linear-gradient(90deg, var(--frio) 0%, var(--frio-fade) 28%, transparent 62%); background-size: 100% 2px; background-repeat: no-repeat; background-position: left top; border: 1px solid var(--borda); padding: var(--e4) var(--e5) var(--e5); }
.painel--quente { background-image: linear-gradient(90deg, var(--quente) 0%, var(--quente-fade) 28%, transparent 62%); }
.painel__titulo { font-size: var(--t-medio); letter-spacing: 0.04em; margin: 0; }
.painel__rotulo { margin: var(--e1) 0 0; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.painel__conteudo { margin-top: var(--e3); }
.painel__nota { margin: var(--e2) 0 0; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); }

.abas-turma__lista { list-style: none; display: flex; gap: var(--e0); margin: 0; padding: 0; border-bottom: 1px solid var(--borda); }
.abas-turma__link { display: block; padding: var(--e3) var(--e4); text-decoration: none; font-family: var(--display); font-size: var(--t-corpo); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); border-bottom: 2px solid transparent; transition: color var(--dur), background-color var(--dur), border-color var(--dur); }
.abas-turma__link:hover { color: var(--frio); background: var(--hover-suave); }
.abas-turma__link--ativa, .abas-turma__link--ativa:hover { color: var(--btn-forte-tinta); background: var(--btn-forte-fundo); border-bottom-color: var(--btn-forte-fundo); }

.grade-turmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e4); list-style: none; margin: 0; padding: 0; }

.grade-desempenho { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e4); margin-top: var(--e4); }
.cartao-turma__link { display: block; color: inherit; text-decoration: none; }
.cartao-turma__codigo { display: block; color: var(--frio); }
.cartao-turma__nome { font-size: var(--t-medio); letter-spacing: 0.04em; margin: var(--e1) 0 var(--e0); }
.cartao-turma__professor { margin: 0; color: var(--tinta-2); font-size: var(--t-mini); }
.cartao-turma__resumo { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e4); font-family: var(--mono); font-size: var(--t-mini); }
.cartao-turma__resumo--pend { color: var(--quente); }
.cartao-turma__resumo--ok { color: var(--certo); }

.badge { display: inline-flex; align-items: center; gap: var(--e1); padding: var(--e1) var(--e3); font-family: var(--mono); font-size: var(--t-mini); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; }
.badge--nao-entregue { color: var(--tinta-2); background: var(--neutro-fundo); border-style: dashed; }
.badge--aguardando { color: var(--frio); background: var(--frio-fundo); border-style: dotted; }
.badge--corrigida { color: var(--certo); background: var(--certo-fundo); border-style: solid; }
.badge--atrasada { color: var(--quente); background: var(--quente-fundo); border-style: solid; box-shadow: inset 3px 0 0 var(--quente); }
.badge--encerrada { color: var(--tinta-2); background: var(--painel-2); border-style: double; border-width: 3px; }

.card-tarefa { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); padding: var(--e3) var(--e4); background: var(--painel-2); border: 1px solid var(--borda-forte); box-shadow: inset 2px 0 0 var(--quente); }
.card-tarefa__titulo { flex: 1 1 200px; font-family: var(--display); font-size: var(--t-medio); letter-spacing: 0.03em; }
.card-tarefa__prazo { display: inline-flex; align-items: center; gap: var(--e1); color: var(--quente); font-family: var(--mono); font-size: var(--t-mini); }

.card-material { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); padding: var(--e3) var(--e4); background: var(--painel-2); border: 1px solid var(--borda-forte); box-shadow: inset 2px 0 0 var(--frio); }
.card-material__titulo { flex: 1 1 200px; font-family: var(--display); font-size: var(--t-medio); letter-spacing: 0.03em; }
.card-material__tipo { display: inline-flex; align-items: center; gap: var(--e1); color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); text-transform: uppercase; }

.item-lista { display: flex; border-left: 2px solid transparent; background: var(--painel); }
.item-lista:hover { border-left-color: var(--frio); }
.item-lista__link { display: flex; align-items: center; gap: var(--e4); flex: 1 1 auto; padding: var(--e3) var(--e4); color: inherit; text-decoration: none; }
.item-lista__titulo { font-family: var(--display); font-size: var(--t-corpo); letter-spacing: 0.02em; flex: 1 1 auto; }
.item-lista__subtitulo { color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); }
.item-lista-grupo { list-style: none; display: flex; flex-direction: column; gap: var(--e1); margin: var(--e3) 0 0; padding: 0; }

.feed { list-style: none; display: flex; flex-direction: column; gap: var(--e4); margin: var(--e4) 0 0; padding: 0; }
.feed .painel { padding: var(--e4); }

.video { position: relative; margin-top: var(--e4); aspect-ratio: 16 / 9; background: var(--carbono-2); border: 1px solid var(--borda); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__link { display: inline-block; margin-top: var(--e4); word-break: break-all; }

.prosa { font-family: var(--prosa); font-size: var(--t-corpo); line-height: 1.7; letter-spacing: 0; max-width: 68ch; color: var(--tinta); background: var(--leitura); border: 1px solid var(--borda); border-left: 2px solid var(--borda-forte); padding: var(--e3) var(--e4); }

.campo { display: flex; flex-direction: column; gap: var(--e1); margin-top: var(--e4); }
.campo__rotulo { font-family: var(--display); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea, .campo__input { padding: var(--e2) var(--e3); background: var(--campo-fundo); border: 1px solid var(--borda-forte); color: var(--tinta); font: inherit; display: block; width: 100%; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible, .campo__input:focus-visible { outline: 2px solid var(--frio); outline-offset: 2px; box-shadow: var(--anel-foco); }
.campo--erro .campo__rotulo { color: var(--errado); }
.campo--erro input, .campo--erro select, .campo--erro textarea, .campo--erro .campo__input { border-color: var(--errado); }
.campo__erro { margin: 0; color: var(--errado); font-family: var(--mono); font-size: var(--t-mini); }
.campo__dica { margin: 0; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); }

.numero-instrumento { display: flex; align-items: baseline; gap: var(--e2); }
.numero-instrumento__valor { font-family: var(--display); font-weight: 600; font-size: var(--t-instrumento); line-height: 0.9; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--tinta); }
.numero-instrumento__valor--frio { color: var(--frio); }
.numero-instrumento__valor--certo { color: var(--certo); }
.numero-instrumento__unidade { font-family: var(--mono); font-size: var(--t-rotulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); }

.barra-progresso { position: relative; display: flex; height: 14px; margin-top: var(--e4); background: var(--carbono-2); border: 1px solid var(--borda); overflow: hidden; }
.barra-progresso__segmento { position: relative; display: block; height: 100%; }
.barra-progresso__segmento--frio { background: var(--preenche); }
.barra-progresso__segmento--certo { background: var(--certo); }
.barra-progresso__segmento--quente { background: var(--quente); }
.barra-progresso__segmento--errado { background: var(--errado); }
.barra-progresso__segmento:first-child::after { content: ""; position: absolute; inset: 0; width: 70px; background: linear-gradient(90deg, transparent, var(--varredura), transparent); animation: barra-progresso-varredura 3.2s linear infinite; }
@keyframes barra-progresso-varredura { from { transform: translateX(-70px); } to { transform: translateX(560px); } }
.barra-progresso__rotulo { margin: var(--e2) 0 0; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); }

.estado-vazio { display: flex; align-items: center; gap: var(--e3); padding: var(--e5); border: 1px dashed var(--borda-forte); color: var(--tinta-2); background: var(--hover-suave); }

.anexo { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e4); padding: var(--e2) var(--e3); border: 1px solid var(--borda-forte); color: var(--tinta); text-decoration: none; font-family: var(--mono); font-size: var(--t-mini); transition: border-color var(--dur), color var(--dur); }
.anexo:hover { border-color: var(--frio); color: var(--frio); }
.anexo__tamanho { color: var(--tinta-3); }

.selo-ia { display: inline-flex; align-items: center; padding: var(--e1) var(--e3); color: var(--frio); background: var(--frio-fundo); border: 1px solid currentColor; font-family: var(--mono); font-size: var(--t-mini); letter-spacing: 0.08em; text-transform: uppercase; }

.htmx-indicator, .indicador-carregando { display: inline-flex; align-items: center; gap: var(--e2); color: var(--tinta-3); font-family: var(--mono); font-size: var(--t-mini); }
.htmx-indicator[hidden] { display: none; }
.htmx-indicator::before, .indicador-carregando::before { content: ""; width: 14px; height: 14px; flex: none; border: 2px solid var(--borda-forte); border-top-color: var(--frio); border-radius: 50%; animation: girar var(--dur-lenta) linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
#enviar-respostas.htmx-request { cursor: wait; opacity: 0.75; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 44px; padding: var(--e2) var(--e4); color: var(--tinta); background: transparent; border: 1px solid var(--borda-forte); border-radius: var(--r-0); cursor: pointer; font-family: var(--display); font-size: var(--t-corpo); font-weight: 600; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; transition: background-color var(--dur), border-color var(--dur), color var(--dur); }
.botao:hover { color: var(--frio); background: var(--frio-fundo); border-color: var(--frio); }
.botao:disabled { cursor: not-allowed; opacity: 0.6; }
.botao--principal { color: var(--btn-forte-tinta); background: var(--btn-forte-fundo); border-color: var(--btn-forte-fundo); border-width: var(--btn-forte-w); padding: var(--btn-forte-pad); }
.botao--principal:hover { background: var(--btn-forte-hover); border-color: var(--btn-forte-hover); color: var(--btn-forte-tinta); }

.erros { display: flex; flex-direction: column; gap: var(--e1); margin: 0 0 var(--e4); padding: var(--e3) var(--e4); list-style: none; color: var(--errado); background: var(--errado-fundo); border: 1px solid var(--errado); border-left: 3px solid var(--errado); font-family: var(--prosa); }
.erros li::before { content: "⚠ "; }

.rascunho-status { display: inline-flex; align-items: center; gap: var(--e2); margin-top: var(--e3); padding: var(--e2) var(--e3); font-family: var(--mono); font-size: var(--t-mini); }
.rascunho-status--ok { color: var(--certo); background: var(--certo-fundo); border: 1px solid var(--certo); }
.rascunho-status--ok::before { content: "✓"; }
.rascunho-status--erro { color: var(--errado); background: var(--errado-fundo); border: 1px solid var(--errado); }
.rascunho-status--erro::before { content: "⚠"; }
.rascunho-status__lista { margin: 0; padding: 0; list-style: none; }

.tentativa-form__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }

.questao { margin-top: var(--e5); padding: var(--e4) var(--e5); background: var(--painel); border: 1px solid var(--borda); border-left: 2px solid var(--borda-forte); }
.questao legend { padding: 0 var(--e2); color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.opcoes { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
.opcao { display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: var(--e2) var(--e3); background: var(--painel-2); border: 1px solid var(--borda); cursor: pointer; transition: border-color var(--dur), background-color var(--dur); }
.opcao:hover { border-color: var(--frio); }
.opcao:has(.opcao__input:checked) { background: var(--sel-fundo); border-color: var(--frio); box-shadow: inset 2px 0 0 var(--frio); }
.opcao:has(.opcao__input:focus-visible) { outline: 2px solid var(--frio); outline-offset: 2px; }
.opcao__input { width: 22px; height: 22px; flex: none; accent-color: var(--frio); }
.opcao__texto { font-size: var(--t-corpo); }

.lacuna { display: inline-block; min-width: 96px; min-height: 44px; margin: 0 var(--e1); padding: var(--e1) var(--e2); background: var(--campo-fundo); border: 1px solid var(--borda-forte); border-bottom: 2px solid var(--frio); color: var(--tinta); font: inherit; vertical-align: middle; }
.lacuna:focus-visible { outline: 2px solid var(--frio); outline-offset: 2px; box-shadow: var(--anel-foco); }

.campo textarea { max-width: 68ch; font-size: var(--t-corpo); line-height: 1.7; }

.avaliacao { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); padding: var(--e3) var(--e4); background: var(--painel); border: 1px solid var(--borda); }
.avaliacao__nota { margin: 0; }
.avaliacao__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); margin-top: var(--e3); }
.avaliacao__outras { margin-top: var(--e2); }
.avaliacao__outras summary { cursor: pointer; color: var(--frio); font-family: var(--display); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

.resultado-alerta { padding: var(--e2) var(--e3); color: var(--quente); background: var(--quente-fundo); border: 1px solid var(--quente); border-left: 3px solid var(--quente); }

.resultado-item { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e4); padding: var(--e3) var(--e4); background: var(--painel-2); border: 1px solid var(--borda); }
.resultado-item__cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.resultado-item__marca { display: inline-flex; align-items: center; gap: var(--e1); padding: var(--e1) var(--e2); font-family: var(--mono); font-size: var(--t-mini); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; }
.resultado-item__marca--certo { color: var(--certo); background: var(--certo-fundo); border-style: solid; }
.resultado-item__marca--errado { color: var(--errado); background: var(--errado-fundo); border-style: dashed; }
.resultado-item__marca--neutro { color: var(--frio); background: var(--frio-fundo); border-style: dotted; }
.resultado-item__pontuacao { color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); }
.resultado-item__gabarito { margin: 0; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); }

.autenticacao { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.autenticacao__conteudo { display: flex; flex-direction: column; align-items: center; gap: var(--e5); width: min(100% - (2 * var(--e4)), 420px); }
.autenticacao__marca { display: block; color: var(--frio); font-family: var(--display); font-size: var(--t-titulo); font-weight: 600; letter-spacing: 0.16em; text-decoration: none; text-transform: uppercase; text-align: center; }
.autenticacao__formulario { width: 100%; }
.autenticacao__titulo { font-family: var(--display); font-size: var(--t-titulo); letter-spacing: 0.04em; margin: 0 0 var(--e4); }
.autenticacao__descricao { margin: var(--e4) 0 0; color: var(--tinta); font-family: var(--prosa); font-size: var(--t-corpo); line-height: 1.7; }
.autenticacao__botoes { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e5); }
.autenticacao__botoes .botao { width: 100%; }
.capa { display: flex; flex-direction: column; align-items: center; gap: var(--e4); padding-block: clamp(var(--e6), 9vh, var(--e8)); text-align: center; }
.capa__marca { margin: 0; color: var(--frio); font-family: var(--display); font-size: var(--t-medio); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.capa__titulo { max-width: 20ch; margin: 0; font-size: clamp(var(--t-titulo), 6vw, var(--t-display)); letter-spacing: 0.01em; }
.capa__linha { max-width: 58ch; margin: 0; color: var(--tinta-2); font-size: var(--t-medio); }
.capa__nota { margin: 0; color: var(--tinta-2); font-family: var(--mono); font-size: var(--t-mini); }
.capa-secoes { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0; padding: 0 0 var(--e7); list-style: none; }
.capa-secoes .painel__conteudo { color: var(--tinta-2); }