:root{
  --bg:#f2f6fb; --surface:#ffffff; --surface2:#e8f0f8; --ink:#0b2545; --ink2:#36506f; --muted:#62788f;
  --border:#d3e0ec; --navy:#0b2545; --navy2:#13315c; --ocean:#1d6fb8; --ocean-ink:#ffffff; --accent:#f2c230; --accent-ink:#0b2545;
  --ok:#1b7f45; --ok-bg:#e3f5ea; --err:#b8322a; --err-bg:#fbe6e4; --warn:#9a6b00; --warn-bg:#fff4d1;
  --sombra:0 1px 2px rgba(11,37,69,.06),0 4px 14px rgba(11,37,69,.06); --raio:14px;
  --grid:#d9e4ef; --serie:#1d6fb8; --serie2:#f2c230;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#06142a; --surface:#0d2140; --surface2:#132d54; --ink:#e7eef8; --ink2:#b5c7dc; --muted:#8aa1bd;
    --border:#22416b; --navy:#04101f; --navy2:#0b2545; --ocean:#4d9de3; --ocean-ink:#04101f; --accent:#f2c230; --accent-ink:#0b2545;
    --ok:#5fd08f; --ok-bg:#0f3a26; --err:#ff8a80; --err-bg:#45191a; --warn:#f2c230; --warn-bg:#3a2e08;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); --grid:#1f3a60; --serie:#5aa8ec; --serie2:#f2c230;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#06142a; --surface:#0d2140; --surface2:#132d54; --ink:#e7eef8; --ink2:#b5c7dc; --muted:#8aa1bd;
  --border:#22416b; --navy:#04101f; --navy2:#0b2545; --ocean:#4d9de3; --ocean-ink:#04101f; --accent:#f2c230; --accent-ink:#0b2545;
  --ok:#5fd08f; --ok-bg:#0f3a26; --err:#ff8a80; --err-bg:#45191a; --warn:#f2c230; --warn-bg:#3a2e08;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25); --grid:#1f3a60; --serie:#5aa8ec; --serie2:#f2c230;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--ocean)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.55rem} h2{font-size:1.25rem} h3{font-size:1.08rem} h4{font-size:1rem;margin-top:1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pular{position:absolute;left:-999px}.pular:focus{left:8px;top:8px;z-index:99;background:var(--accent);color:var(--accent-ink);padding:6px 10px;border-radius:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* topo */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--navy);color:#fff;border-bottom:3px solid var(--accent)}
.marca{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:1.05rem;white-space:nowrap}
.marca b{color:var(--accent)}
.ancora{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--navy);font-size:18px}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.sel-perfil{max-width:46vw;background:#ffffff14;color:#fff;border:1px solid #ffffff40;border-radius:10px;padding:7px 10px;font:inherit}
.sel-perfil option{color:#0b2545;background:#fff}
.btn-icone,.btn-menu{background:#ffffff14;border:1px solid #ffffff40;color:#fff;border-radius:10px;width:38px;height:38px;font-size:18px;cursor:pointer}
.btn-menu{display:none}

/* layout */
.layout{display:flex;min-height:calc(100vh - 61px)}
.menu{flex:0 0 238px;background:var(--surface);border-right:1px solid var(--border);padding:12px 8px;position:sticky;top:61px;height:calc(100vh - 61px);overflow:auto}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500}
.menu a i{font-style:normal;width:22px;text-align:center}
.menu a:hover{background:var(--surface2)}
.menu a.ativo{background:var(--navy2);color:#fff}
:root[data-theme="dark"] .menu a.ativo{background:var(--ocean);color:var(--ocean-ink)}
main{flex:1;min-width:0;padding:22px 24px 60px;max-width:1180px}
@media (max-width:860px){
  .btn-menu{display:inline-block}
  .menu{position:fixed;left:0;top:61px;bottom:0;z-index:40;transform:translateX(-105%);transition:transform .2s;box-shadow:var(--sombra);height:auto}
  .menu.aberto{transform:none}
  main{padding:16px 16px 70px}
  .marca span:last-child{font-size:.95rem}
}

/* componentes */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra);margin-bottom:16px;min-width:0}
.card h2{margin-bottom:.6em}
.sub{color:var(--muted);font-size:.92rem}
.grade{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px}
.kpi .v{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .r{color:var(--muted);font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;min-height:42px}
.btn:hover{background:var(--surface2)}
.btn.pri{background:var(--ocean);border-color:var(--ocean);color:var(--ocean-ink)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.am{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.perigo{color:var(--err);border-color:var(--err)}
.btn.peq{padding:6px 10px;min-height:34px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--surface2);color:var(--ink2);font-size:.82rem;font-weight:600}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.err{background:var(--err-bg);color:var(--err)}.chip.warn{background:var(--warn-bg);color:var(--warn)}
.alerta{padding:12px 14px;border-radius:10px;background:var(--warn-bg);color:var(--ink);border-left:4px solid var(--accent);margin:10px 0}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.campo label,.rot-campo{font-weight:600;font-size:.92rem}
input[type=text],input[type=number],select,textarea{font:inherit;padding:9px 11px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);max-width:100%}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;font-size:.92rem}
.checks input{accent-color:var(--ocean)}
.tab{width:100%;border-collapse:collapse;font-size:.93rem}
.tab th,.tab td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.tab th{background:var(--surface2);font-weight:700}
.tabela-rola{overflow-x:auto;-webkit-overflow-scrolling:touch}
.abas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.abas button{border:1px solid var(--border);background:var(--surface);color:var(--ink);padding:8px 12px;border-radius:999px;font:inherit;font-size:.9rem;cursor:pointer}
.abas button.ativo{background:var(--navy2);color:#fff;border-color:var(--navy2)}
:root[data-theme="dark"] .abas button.ativo{background:var(--ocean);color:var(--ocean-ink);border-color:var(--ocean)}

/* questão */
.q-topo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;margin-bottom:10px}
.q-enun{font-size:1.1rem;font-weight:600;margin:6px 0 14px}
.q-fig{display:flex;justify-content:center;margin:6px 0 14px}
.q-fig .ilus{max-width:360px;width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.q-fig .fig-boia .ilus{max-width:170px}
.opcoes{display:flex;flex-direction:column;gap:10px}
.opcao{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.opcao:hover:not(:disabled){border-color:var(--ocean)}
.opcao .letra{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);font-weight:700}
.opcao.sel{border-color:var(--ocean);background:var(--surface2)}
.opcao.sel .letra{background:var(--ocean);color:var(--ocean-ink)}
.opcao.certa{border-color:var(--ok);background:var(--ok-bg)}
.opcao.certa .letra{background:var(--ok);color:#fff}
.opcao.errada{border-color:var(--err);background:var(--err-bg)}
.opcao.errada .letra{background:var(--err);color:#fff}
.opcao:disabled{cursor:default}
.feedback{margin-top:14px;border-radius:12px;padding:14px;border:1px solid var(--border);background:var(--surface2)}
.feedback.ok{border-color:var(--ok)}.feedback.err{border-color:var(--err)}
.feedback h3{margin-bottom:.4em}
.exp-lista{list-style:none;padding:0;margin:8px 0}
.exp-lista li{padding:8px 10px;border-radius:8px;margin-bottom:6px;background:var(--surface)}
.exp-lista li b{margin-right:4px}
.ref{font-size:.88rem;color:var(--ink2)}
.dica{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--warn-bg);border-left:4px solid var(--accent)}
.navq{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.navq button{width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.navq button.resp{background:var(--surface2);border-color:var(--ocean)}
.navq button.atual{outline:3px solid var(--accent)}
.navq button.marc{box-shadow:inset 0 -4px 0 var(--accent)}
.navq button.ok{background:var(--ok-bg);border-color:var(--ok)}.navq button.err{background:var(--err-bg);border-color:var(--err)}
.cron{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.15rem;padding:4px 12px;border-radius:10px;background:var(--navy2);color:#fff}
.cron.baixo{background:var(--err);color:#fff}
.barra{height:8px;background:var(--surface2);border-radius:999px;overflow:hidden}
.barra>span{display:block;height:100%;background:var(--ocean);border-radius:999px}
.player{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px;padding:12px;border-radius:12px;background:var(--surface2)}
.player .tl{flex:1;min-width:180px;height:26px;position:relative;background:var(--surface);border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.player .tl i{position:absolute;top:5px;bottom:5px;background:var(--ocean);border-radius:4px;opacity:.35}
.player .tl i.on{opacity:1}
.player .tl b{position:absolute;top:0;bottom:0;width:2px;background:var(--accent)}
.res-cabeca{text-align:center;padding:10px}
.res-cabeca .nota{font-size:3rem;font-weight:800;font-variant-numeric:tabular-nums}
.aprovado{color:var(--ok)}.reprovado{color:var(--err)}
details.corr{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:var(--surface)}
details.corr summary{padding:10px 12px;cursor:pointer;display:flex;gap:8px;align-items:flex-start}
details.corr .dentro{padding:0 12px 12px}

/* biblioteca */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.cat-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.cat-item .ilus{width:100%;height:auto;border-radius:10px}
.cat-item .fig-boia{display:flex;justify-content:center}.cat-item .fig-boia .ilus{max-width:140px}
.cat-item dl{margin:0;font-size:.87rem}.cat-item dt{font-weight:700;color:var(--ink2)}.cat-item dd{margin:0 0 4px}
.apostila p,.apostila li{max-width:75ch}
.ilus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ilus-grid figure{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px}
.ilus-grid figcaption{font-size:.88rem;color:var(--ink2);margin-top:6px}
.ilus-grid .ilus{width:100%;height:auto;border-radius:8px}
.ritmo-legenda{font-size:.75rem;color:var(--muted);text-align:center;margin-top:2px}
svg .rot{fill:#fff;font:600 10px system-ui,sans-serif;text-anchor:middle;paint-order:stroke;stroke:#0b2545;stroke-width:3px}
svg .rot2{fill:#0b2545;font:600 10px system-ui,sans-serif;text-anchor:middle}
svg .leg{fill:#fff;font:700 9.5px system-ui,sans-serif;text-anchor:middle}

/* flashcards */
.flash{perspective:1200px;max-width:560px;margin:0 auto}
.flash-in{position:relative;min-height:280px;transition:transform .5s;transform-style:preserve-3d;cursor:pointer}
.flash.virado .flash-in{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--border);box-shadow:var(--sombra);gap:10px;overflow:auto}
.flash-frente{background:var(--navy2);color:#fff}
.flash-verso{background:var(--surface);transform:rotateY(180deg)}
.flash-face .ilus{max-width:200px;width:100%;height:auto;border-radius:10px}
.flash-face .fig-boia .ilus{max-width:120px}
@media (prefers-reduced-motion: reduce){.flash-in{transition:none}}

/* gráficos */
.graf{width:100%;height:auto;display:block}
.graf text{fill:var(--muted);font:11px system-ui,sans-serif}
.graf .eixo{stroke:var(--grid)}
.tt{position:fixed;z-index:60;pointer-events:none;background:var(--navy);color:#fff;padding:6px 9px;border-radius:8px;font-size:.82rem;box-shadow:var(--sombra);display:none}
.gauge{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.gauge svg{width:150px;height:auto}
.lista-simples{list-style:none;padding:0;margin:0}
.lista-simples li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}

/* modal/toast */
.modal{position:fixed;inset:0;z-index:80;background:#04101fb3;display:grid;place-items:center;padding:16px}
.modal-caixa{background:var(--surface);color:var(--ink);border-radius:16px;padding:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--sombra)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--sombra);opacity:0;transition:opacity .2s;z-index:90;pointer-events:none;max-width:90vw}
.toast.on{opacity:1}
.vazio{text-align:center;color:var(--muted);padding:24px}
.boas-vindas{max-width:560px;margin:30px auto;text-align:center}
.mini{font-size:.85rem}
.fl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.esp{flex:1}
@media (max-width:560px){
  .topo{padding:8px 12px;gap:8px}
  .m-esconde{display:none}
  .marca{min-width:0}
  .sel-perfil{max-width:42vw;padding:6px 8px}
  .btn-icone,.btn-menu{width:36px;height:36px;flex:0 0 auto}
}
.modal[hidden]{display:none}
svg text[text-anchor="start"]{text-anchor:start}
svg text[text-anchor="end"]{text-anchor:end}