:root{
  /* layout: one 46rem column. Signature: a transit line. Each subject is a line
     with its own color, each lesson a station, each day a four-stop trip. */
  --bg:#F2F4F7;
  --surface:#FFFFFF;
  --ink:#0E1B2C;
  --muted:#566376;
  --line:#C9D2DC;
  --sinal:#FFC928;
  --sinal-ink:#0E1B2C;
  --ok:#14734A;
  --erro:#B3361F;
  --c-mat:#1D63D8; --c-bio:#17824A; --c-fis:#B85408; --c-qui:#7B3FC4;
  --c-geo:#0B7A87; --c-his:#B4322B; --c-lp:#BF2A62; --c-art:#876700; --c-ing:#4A4FC4; --c-met:#3D4C5E;
  --linha:var(--c-met);
  --font-display:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif;
  --font-body:'Atkinson Hyperlegible',Verdana,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A131E; --surface:#13202F; --ink:#E9EEF4; --muted:#95A3B5; --line:#2B3B4F;
    --sinal:#FFC928; --sinal-ink:#0E1B2C; --ok:#58C48E; --erro:#F28C78;
    --c-mat:#5C97F5; --c-bio:#4CB97E; --c-fis:#E98A3C; --c-qui:#AD7FE8;
    --c-geo:#3FB3C0; --c-his:#E9736B; --c-lp:#EC6C9C; --c-art:#CDA72B; --c-ing:#9196F2; --c-met:#8FA0B5;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A131E; --surface:#13202F; --ink:#E9EEF4; --muted:#95A3B5; --line:#2B3B4F;
  --sinal:#FFC928; --sinal-ink:#0E1B2C; --ok:#58C48E; --erro:#F28C78;
  --c-mat:#5C97F5; --c-bio:#4CB97E; --c-fis:#E98A3C; --c-qui:#AD7FE8;
  --c-geo:#3FB3C0; --c-his:#E9736B; --c-lp:#EC6C9C; --c-art:#CDA72B; --c-ing:#9196F2; --c-met:#8FA0B5;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:1.0625rem; line-height:1.6; -webkit-text-size-adjust:100%}
#app{max-width:46rem; margin:0 auto; padding:1rem 1.1rem 4rem; display:flex; flex-direction:column; gap:1.5rem}
.carregando{color:var(--muted)}
h1,h2,h3{font-family:var(--font-display); margin:0; line-height:1.1; text-wrap:balance; letter-spacing:.005em}
h1{font-size:clamp(2.1rem,7vw,3rem); font-weight:700; text-transform:uppercase}
h2{font-size:1.6rem; font-weight:700}
h3{font-size:1.15rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:.9rem}
.stack{display:flex; flex-direction:column; gap:1rem}
.row{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.spread{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between}
:focus-visible{outline:3px solid var(--sinal); outline-offset:2px}
button{font:inherit; cursor:pointer; color:inherit}
a{color:inherit}

/* top bar */
.topo{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem}
.marca{font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:.55rem}
.marca i{width:1.5rem; height:1.5rem; border-radius:50%; border:.34rem solid var(--ink); background:var(--sinal); display:block}
.abas{display:flex; gap:.2rem; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:.2rem}
.abas a{text-decoration:none; padding:.3rem .9rem; border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--muted)}
.abas a[aria-current="page"]{background:var(--ink); color:var(--bg)}

/* buttons */
.btn{border:2px solid var(--ink); background:var(--ink); color:var(--bg); padding:.75rem 1.4rem; border-radius:12px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:.02em; text-decoration:none; display:inline-block}
.btn:hover{filter:brightness(1.2)}
.btn[disabled]{opacity:.4; cursor:not-allowed; filter:none}
.btn.sec{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.sec:hover{border-color:var(--ink); filter:none}
.btn.peq{font-size:1rem; padding:.4rem .9rem; border-radius:10px}
.btn.sinal{background:var(--sinal); color:var(--sinal-ink); border-color:var(--sinal)}
.chip{display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.05rem .7rem; font-family:var(--font-display); font-weight:600; font-size:.95rem; background:var(--linha); color:#fff; line-height:1.6}
:root[data-theme="dark"] .chip{color:#0A131E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip{color:#0A131E}}
.chip.neutro{background:transparent; color:var(--muted); border:1.5px solid var(--line)}
.chip.aqui{background:var(--sinal); color:var(--sinal-ink)}

/* mission card on home */
.missao{background:var(--surface); border:1.5px solid var(--line); border-radius:18px; overflow:hidden}
.missao .cab{background:var(--linha); color:#fff; padding:1.1rem 1.4rem; display:flex; flex-direction:column; gap:.2rem}
:root[data-theme="dark"] .missao .cab{color:#0A131E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .missao .cab{color:#0A131E}}
.missao .cab .sobre{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.92rem; opacity:.9}
.missao .corpo{padding:1.3rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:1.3rem}

/* stations (vertical) */
.paradas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.paradas li{position:relative; padding:0 0 1.15rem 2.3rem; display:flex; flex-wrap:wrap; gap:.1rem .8rem; align-items:baseline; justify-content:space-between}
.paradas li:last-child{padding-bottom:0}
.paradas li::before{content:""; position:absolute; left:.58rem; top:.5rem; bottom:-.5rem; width:.34rem; background:var(--linha); border-radius:2px}
.paradas li:last-child::before{display:none}
.paradas li::after{content:""; position:absolute; left:0; top:.2rem; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--surface); border:.34rem solid var(--linha)}
.paradas li.feita::after{background:var(--linha)}
.paradas li.atual::after{background:var(--sinal); border-color:var(--ink)}
.paradas li.vazia::after{border-color:var(--line)}
.paradas li.vazia .nome,.paradas li.vazia .det{color:var(--muted)}
.paradas .nome{font-family:var(--font-display); font-weight:700; font-size:1.25rem; text-transform:uppercase; letter-spacing:.03em}
.paradas .det{flex-basis:100%; color:var(--muted); font-size:.98rem}
.paradas .tempo{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.9rem}

/* mission header (horizontal line) */
.trilho{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:relative}
.trilho::before{content:""; position:absolute; left:12.5%; right:12.5%; top:.6rem; height:.3rem; background:var(--line); border-radius:2px}
.trilho li{position:relative; display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center; font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; line-height:1.15}
.trilho li i{width:1.5rem; height:1.5rem; border-radius:50%; background:var(--bg); border:.3rem solid var(--line); display:block; position:relative}
.trilho li.feita i{background:var(--linha); border-color:var(--linha)}
.trilho li.atual i{background:var(--sinal); border-color:var(--ink)}
.trilho li.atual{color:var(--ink)}
.trilho li span{font-weight:500; text-transform:none; letter-spacing:0; font-size:.82rem; font-variant-numeric:tabular-nums}
.barra-missao{display:flex; flex-direction:column; gap:.9rem}

/* study panel */
.painel{background:var(--surface); border:1.5px solid var(--line); border-top:.5rem solid var(--linha); border-radius:16px; padding:1.4rem; display:flex; flex-direction:column; gap:1.15rem}
.pergunta{font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,4.4vw,1.8rem); line-height:1.2}
.texto p + p{margin-top:.7rem}
.texto{max-width:36rem}
.caixa{border-left:.3rem solid var(--line); padding:.1rem 0 .1rem .9rem; display:flex; flex-direction:column; gap:.15rem}
.caixa .k{font-family:var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.caixa.exemplo{border-left-color:var(--linha)}
.caixa.resposta{border-left-color:var(--ink)}
.caixa.resposta .v{font-size:1.15rem; font-weight:700}
.caixa.macete{border-left-color:var(--sinal)}
.caixa.certo{border-left-color:var(--ok)} .caixa.certo .k{color:var(--ok)}
.caixa.errado{border-left-color:var(--erro)} .caixa.errado .k{color:var(--erro)}
.v{white-space:pre-wrap; overflow-wrap:anywhere}
.enunciado{background:var(--bg); border-radius:12px; padding:1rem 1.1rem; max-width:none}
textarea{font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:.75rem .9rem; width:100%; min-height:5.5rem; resize:vertical; line-height:1.5}
textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--sinal)}
label{font-weight:700}
.campo{display:flex; flex-direction:column; gap:.35rem}

.opcoes{display:flex; flex-direction:column; gap:.55rem}
.opcao{display:flex; gap:.5rem; align-items:stretch}
.opcao > button.esc{flex:1; text-align:left; background:var(--surface); border:2px solid var(--line); border-radius:12px; padding:.7rem .95rem; display:flex; gap:.7rem; align-items:baseline}
.opcao > button.esc:hover:not([disabled]){border-color:var(--ink)}
.opcao > button.esc b{font-family:var(--font-display); font-weight:700; color:var(--muted)}
.opcao > button.esc[disabled]{cursor:default}
.opcao.certa > button.esc{border-color:var(--ok); box-shadow:inset .35rem 0 0 var(--ok)}
.opcao.errada > button.esc{border-color:var(--erro); box-shadow:inset .35rem 0 0 var(--erro); color:var(--muted)}
.opcao.fora > button.esc{opacity:.55}
.opcao > button.aj{width:2.6rem; border:2px solid var(--line); border-radius:12px; background:transparent; font-family:var(--font-display); font-weight:700; color:var(--muted)}
.opcao > button.aj:hover,.opcao > button.aj[aria-pressed="true"]{border-color:var(--ink); color:var(--ink)}
.simples{margin:-.2rem 0 .2rem 1rem; padding-left:.8rem; border-left:.25rem solid var(--sinal); color:var(--muted); font-size:.95rem}
.passo-feito{display:flex; gap:.6rem; align-items:baseline; color:var(--muted); font-size:.95rem; padding-left:.9rem; border-left:.3rem solid var(--line)}
.passo-feito b{color:var(--ink); font-weight:700}
.passo-feito.ok{border-left-color:var(--ok)} .passo-feito.no{border-left-color:var(--erro)}
.rotulo{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; color:var(--muted)}
.surge{animation:surge .25s ease both}
@keyframes surge{from{opacity:.2; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.surge{animation:none}}
.aviso{border:1.5px dashed var(--line); border-radius:12px; padding:.75rem 1rem; color:var(--muted)}

/* numbers */
.fatos{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem}
.fato{display:flex; flex-direction:column}
.fato b{font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1; font-variant-numeric:tabular-nums}
.fato span{font-size:.85rem; color:var(--muted)}

/* map */
.linha-mapa{display:flex; flex-direction:column; gap:.7rem; padding:1rem 0; border-top:1px solid var(--line)}
.estacoes{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.9rem 0}
.estacoes li{position:relative; flex:0 0 8.4rem; padding-top:1.9rem}
.estacoes li::before{content:""; position:absolute; left:0; right:0; top:.6rem; height:.3rem; background:var(--linha)}
.estacoes li:first-child::before{left:.7rem; border-radius:2px 0 0 2px}
.estacoes li:last-child::before{right:calc(100% - 1.4rem)}
.estacoes button{all:unset; cursor:pointer; display:block; font-size:.92rem; line-height:1.25; padding-right:.6rem; color:var(--ink)}
.estacoes button::before{content:""; position:absolute; left:0; top:0; width:1.5rem; height:1.5rem; border-radius:50%; box-sizing:border-box; background:var(--bg); border:.3rem solid var(--linha)}
.estacoes li.feita button::before{background:linear-gradient(90deg,var(--linha) 50%,var(--bg) 50%)}
.estacoes li.dominada button::before{background:var(--linha)}
.estacoes li.hoje button::before{background:var(--sinal); border-color:var(--ink)}
.estacoes li.breve button{color:var(--muted); cursor:default}
.estacoes li.breve button::before{border-color:var(--line); border-style:dashed}
.estacoes button:focus-visible::before{outline:3px solid var(--sinal); outline-offset:2px}
.legenda{display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; font-size:.85rem; color:var(--muted)}
.legenda i{display:inline-block; width:.9rem; height:.9rem; border-radius:50%; border:.2rem solid var(--muted); margin-right:.35rem; vertical-align:-2px}

/* report */
.dias{display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:4px}
.dia{aspect-ratio:1; border:1.5px solid var(--line); border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
.dia.parcial{border-color:var(--ink); color:var(--ink)}
.dia.cheio{background:var(--ink); border-color:var(--ink); color:var(--bg); font-weight:700}
.dia.hoje{box-shadow:0 0 0 2px var(--sinal)}
.materia{display:grid; grid-template-columns:minmax(6rem,10rem) 1fr auto; gap:.7rem; align-items:center; padding:.5rem 0; border-top:1px solid var(--line)}
.medidor{height:.7rem; border-radius:.35rem; background:var(--line); overflow:hidden}
.medidor i{display:block; height:100%; background:var(--linha)}
.num{font-variant-numeric:tabular-nums; font-size:.88rem; color:var(--muted); white-space:nowrap}
.item{padding:.7rem 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.3rem 1rem; justify-content:space-between; align-items:baseline}
.item .q{font-weight:700; flex:1 1 16rem; overflow-wrap:anywhere}
/* nova aula */
.passo-nova{display:flex; flex-direction:column; gap:.8rem}
.passo-nova h2{display:flex; align-items:center; gap:.6rem}
.num-passo{flex:none; width:2rem; height:2rem; border-radius:50%; background:var(--sinal); color:var(--sinal-ink); border:.2rem solid var(--ink); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem}
#resposta-ia{min-height:9rem; font-size:.9rem}
.conferir summary{cursor:pointer; font-weight:700; width:fit-content}
.pedido{margin:.6rem 0 0; padding:1rem; background:var(--surface); border:1.5px solid var(--line); border-radius:12px; max-height:22rem; overflow:auto; font-family:inherit}
.oculto{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
label.arquivo{font-weight:700; cursor:pointer}
label.arquivo:focus-within{outline:3px solid var(--sinal); outline-offset:2px}
.erros{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.3rem; color:var(--erro)}
.erros li{overflow-wrap:anywhere}
.escolha{border:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.escolha legend{font-weight:700; padding:0; margin-bottom:.3rem}
.escolha label{font-weight:400; cursor:pointer; display:flex; align-items:center; gap:.3rem}
.escolha input{accent-color:var(--ink); width:1.1rem; height:1.1rem}

@media (max-width:520px){
  .trilho li{font-size:.72rem}
  .estacoes li{flex-basis:50%}
  .painel{padding:1.1rem}
}