:root { --bg:#0f1012; --card:#1a1c20; --tx:#ecebe6; --mut:#9a9a9a; --ok:#3bb273; --ed:#e0a526; --no:#e05252; --ac:#6ee7b7; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--tx); }
header { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.6rem 1rem; background:#111214ee; border-bottom:1px solid #2a2c31; }
nav { display:flex; gap:.25rem; overflow-x:auto; flex:1; }
nav a { color:var(--mut); text-decoration:none; padding:.35rem .7rem; border-radius:99px; white-space:nowrap; }
nav a.ativo { background:var(--ac); color:#0b0b0b; }
nav small { background:#e0a52633; color:var(--ed); border-radius:99px; padding:0 .4rem; }
main { padding:1rem; max-width:1500px; margin:auto; }
h2 { font-size:1.05rem; color:var(--mut); margin:1.2rem 0 .6rem; }
.grade { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); }
.card { background:var(--card); border-radius:12px; padding:.8rem; display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.topo { display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; }
.topo small { color:var(--mut); width:100%; }
.st { font-style:normal; font-size:.8rem; padding:.05rem .5rem; border-radius:99px; background:#333; }
.st.aprovado { background:#3bb27333; color:var(--ok); } .st.editar { background:#e0a52633; color:var(--ed); }
.st.reprovado { background:#e0525233; color:var(--no); } .st.respondida { background:#3bb27333; color:var(--ok); }
img, video { width:100%; display:block; border-radius:8px; background:#000; }
video { max-height:75vh; object-fit:contain; }
.slides { display:flex; gap:.5rem; overflow-x:auto; scroll-snap-type:x mandatory; }
.slides figure { margin:0; flex:0 0 85%; scroll-snap-align:start; }
.slides figcaption { color:var(--mut); font-size:.8rem; text-align:center; }
textarea { width:100%; min-height:3.2rem; background:#111; color:var(--tx); border:1px solid #2a2c31; border-radius:8px; padding:.5rem; font:inherit; }
.btns { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
button { font:inherit; border:0; border-radius:8px; padding:.45rem .9rem; cursor:pointer; background:#2a2c31; color:var(--tx); }
button.ok { background:var(--ok); color:#06150d; } button.ed { background:var(--ed); color:#1a1200; } button.no { background:var(--no); color:#1c0505; }
button.link { background:none; color:var(--mut); text-decoration:underline; }
details summary { cursor:pointer; color:var(--mut); font-size:.9rem; }
.hist { padding-left:1rem; font-size:.85rem; color:var(--mut); } .hist b { color:var(--tx); }
.antiga { margin:.5rem 0; opacity:.85; }
.det { white-space:pre-line; color:var(--mut); font-size:.88rem; margin:0; max-height:12rem; overflow:auto; }
select { background:#1a1c20; color:var(--tx); border:1px solid #2a2c31; border-radius:8px; padding:.35rem; }
body.login { display:grid; place-items:center; min-height:100vh; }
.login form { width:min(340px, 92vw); } .login label { display:flex; flex-direction:column; gap:.2rem; color:var(--mut); }
.login input { background:#111; color:var(--tx); border:1px solid #2a2c31; border-radius:8px; padding:.55rem; font:inherit; }
.erro { color:var(--no); min-height:1.2em; margin:0; }
.st.pendente { color:var(--mut); } .st.nova { background:#6ee7b733; color:var(--ac); font-weight:600; }
.card.s-aprovado { box-shadow:inset 4px 0 0 var(--ok); } .card.s-editar { box-shadow:inset 4px 0 0 var(--ed); } .card.s-reprovado { box-shadow:inset 4px 0 0 var(--no); }
.faixa { display:flex; flex-direction:column; gap:.15rem; border-radius:8px; padding:.5rem .7rem; font-size:.92rem; }
.faixa small { color:var(--mut); font-size:.78rem; }
.faixa.aprovado { background:#3bb27322; color:var(--ok); } .faixa.editar { background:#e0a52622; color:var(--ed); } .faixa.reprovado { background:#e0525222; color:var(--no); }
.faixa span { color:var(--tx); white-space:pre-line; }
.anterior { border:1px dashed #e0a52688; border-radius:8px; padding:.45rem .7rem; font-size:.88rem; color:var(--mut); white-space:pre-line; } .anterior b { color:var(--ed); }
button.apagado { background:transparent; box-shadow:inset 0 0 0 1px #3a3d44; color:var(--mut); }
button.ativo { font-weight:700; box-shadow:0 0 0 2px var(--tx); }
#aviso { position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%, 200%); background:#ecebe6; color:#111; padding:.55rem 1rem; border-radius:99px; font-weight:600; transition:transform .2s; z-index:9; }
#aviso.on { transform:translate(-50%, 0); }
@media (max-width:600px) { .grade { grid-template-columns:1fr; } main { padding:.6rem; }
  header > strong { margin-right:auto; } nav { order:3; flex:1 0 100%; } }