/* Página de estudo: usa os tokens de style.css. Layout de manual: índice fixo à esquerda, capítulos à direita. */
.study-top{background:radial-gradient(900px 400px at 20% 0%,#14244F,var(--night) 70%);border-bottom:1px solid var(--line)}
.study-hero{padding-block:8px 40px}
.study-hero .plate{max-width:820px}
.study-hero h1{font-weight:900;font-size:clamp(30px,6vw,52px);letter-spacing:-.01em}
.read-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.rp-bar{flex:1;min-width:160px;height:10px;border-radius:5px;background:rgba(0,0,0,.25);overflow:hidden}
.rp-bar i{display:block;height:100%;width:0;background:var(--yellow);border-radius:5px;transition:width .4s}
.read-progress span{font-family:var(--f-mono);font-size:13px}

.study{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;padding-block:40px 64px}
.toc{min-width:0;position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);align-self:start;display:flex;flex-direction:column;gap:10px}
.toc-t{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.toc nav{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.toc a{color:var(--muted);text-decoration:none;font-size:14px;padding:7px 12px;margin-left:-2px;border-left:2px solid transparent;display:flex;justify-content:space-between;gap:8px;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--yellow);font-weight:700}
.toc a.done::after{content:"✓";color:var(--ok);font-weight:700}

.chapters{display:flex;flex-direction:column;gap:28px;min-width:0}
.chap{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,36px);display:flex;flex-direction:column;gap:16px;scroll-margin-top:16px}
.chap-h{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.chap-h h2{font-size:clamp(26px,4.4vw,38px);font-weight:900}
.chap-h p{margin:0;color:var(--muted);font-size:17px;max-width:65ch}
.chap h3{font-size:20px;font-weight:800;margin-top:12px}
.chap p{margin:0;max-width:70ch}
.list{margin:0;padding-left:20px;display:grid;gap:8px;max-width:72ch}
.list li::marker{color:var(--yellow)}
.fine{font-size:13px;color:var(--muted)}
.c-red{color:var(--bad)}.c-yel{color:var(--yellow)}.c-grn{color:var(--ok)}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tbl th{text-align:left;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--night-2);padding:10px 14px;font-weight:700}
.tbl td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl td:last-child{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}

.tip{border:1.5px solid var(--yellow);background:rgba(245,197,24,.08);border-radius:12px;padding:14px 16px;max-width:78ch}
.tip>b:first-child{display:block;margin-bottom:4px;font-family:var(--f-display);font-weight:900;color:var(--yellow);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

.chap-f{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;margin-top:8px}
.read{background:none;border:1.5px solid var(--line);border-radius:12px;padding:11px 16px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.read::before{content:"";width:18px;height:18px;border-radius:5px;border:2px solid var(--muted)}
.read:hover{border-color:var(--ink)}
.read.on{border-color:var(--ok);color:var(--ok)}
.read.on::before{background:var(--ok);border-color:var(--ok);box-shadow:inset 0 0 0 3px var(--panel)}

/* Placas */
.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shapes div{background:var(--night-2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.shapes b{font-family:var(--f-display);font-weight:800}
.shapes span{color:var(--muted);font-size:14px}
.sign-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1.5px solid var(--line);background:var(--night-2);border-radius:99px;padding:8px 14px;font-weight:700;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--night);border-color:var(--ink)}
.tabs button span{font-family:var(--f-mono);font-size:12px;opacity:.7;margin-left:4px}
.search{flex:1;min-width:220px;max-width:340px}
.search input{width:100%;background:var(--night-2);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);font:inherit;font-size:15px}
.search input:focus{outline:none;border-color:var(--yellow)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.group-resumo{color:var(--muted)}
.sign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.scard{background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,border-color .2s}
.scard:hover{transform:translateY(-3px);border-color:var(--muted)}
.scard .art{display:flex;justify-content:center;align-items:center;height:116px;margin-bottom:4px}
.scard .art svg{width:104px;height:104px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));transition:transform .25s}
.scard:hover .art svg{transform:scale(1.07)}
.scard code{font-family:var(--f-mono);font-size:12px;color:var(--yellow)}
.scard b{font-family:var(--f-display);font-weight:800;font-size:17px;line-height:1.15}
.scard p{font-size:14px;color:var(--muted)}
.scard .grp{font-family:var(--f-mono);font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.others{margin-top:6px}
.others summary{cursor:pointer;font-weight:700;padding:8px 0}
.others ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 16px}
.others li{font-size:14px;color:var(--muted);display:flex;gap:10px}
.others li code{font-family:var(--f-mono);color:var(--yellow);font-size:12px;min-width:92px}
.empty{color:var(--muted);padding:20px;text-align:center;border:1.5px dashed var(--line);border-radius:12px}

/* Marcas, semáforo */
.colors{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.colors li{display:flex;gap:14px;align-items:flex-start}
.colors i{flex:none;width:36px;height:12px;border-radius:3px;margin-top:6px}
.colors b{display:block;font-family:var(--f-display);font-weight:800}
.colors div{color:var(--muted);font-size:15px}
.colors div b{color:var(--ink)}
.lines,.lights,.speed{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.lcard{background:var(--night-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.lcard svg{width:100%;height:auto;display:block;background:#1E2433}
.lcard div{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.lcard b{font-family:var(--f-display);font-weight:800;font-size:16px}
.lcard span{font-size:14px;color:var(--muted)}
.lights .lcard svg{background:var(--night-2);height:150px;padding-top:12px}
.speed .sp{background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;align-items:center;gap:14px}
.speed .sp svg{width:64px;height:64px;flex:none}
.speed .sp b{font-family:var(--f-display);font-weight:800;display:block}
.speed .sp span{font-size:13px;color:var(--muted)}

.nature{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.nature div{border-top:4px solid var(--c);background:var(--night-2);border-radius:4px 4px 12px 12px;padding:14px;display:flex;flex-direction:column;gap:2px}
.nature b{font-family:var(--f-display);font-weight:900;font-size:20px;color:var(--c)}
.nature span{font-weight:700}
.nature em{font-style:normal;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.box{background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.box>b{font-family:var(--f-display);font-weight:900;font-size:18px}
.box>span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.box.hot{border-color:rgba(255,107,129,.5)}
.box.hot>b{color:var(--bad)}
.box.ok{border-color:rgba(61,220,145,.45)}.box.ok>b{color:var(--ok)}
.box.no{border-color:rgba(255,107,129,.45)}.box.no>b{color:var(--bad)}
.steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.steps>div,.steps>li{background:var(--night-2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.steps b{font-family:var(--f-display);font-weight:800;font-size:17px}
.steps span{font-size:14px;color:var(--muted)}
.steps.num{counter-reset:s;grid-template-columns:1fr}
.steps.num li{counter-increment:s;position:relative;padding-left:58px}
.steps.num li::before{content:counter(s);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:8px;background:var(--yellow);color:#1D1700;font-family:var(--f-display);font-weight:900;display:grid;place-items:center}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.checks div{background:var(--night-2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.checks b{font-family:var(--f-display);font-weight:800}
.checks span{font-size:14px;color:var(--muted)}

.final{text-align:center;padding:48px 20px;border-radius:18px;background:linear-gradient(135deg,#0A6B3B,#0C5A33);display:flex;flex-direction:column;gap:10px;align-items:center}
.final h2{font-size:clamp(28px,5vw,42px);font-weight:900}
.final p{margin:0;opacity:.9}

@media (max-width:900px){
  .study{grid-template-columns:minmax(0,1fr);gap:20px;padding-block:20px 48px}
  .toc{position:static}
  .toc nav{flex-direction:row;overflow-x:auto;border-left:0;gap:6px;padding-bottom:6px}
  .toc a{border:1.5px solid var(--line);border-radius:99px;white-space:nowrap;margin:0;padding:6px 12px}
  .toc a.on{border-color:var(--yellow)}
  .shapes{grid-template-columns:1fr 1fr}
  .nature{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
}
@media (max-width:520px){.shapes{grid-template-columns:1fr}.search{max-width:none}}