/* HUBMAT Visual — 8º ano · Números e Álgebra */
.g8-controls{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.g8-controls .btn{flex:1 1 92px}
.g8-readout{text-align:center;font-size:clamp(21px,4vw,34px);font-weight:850;margin:10px 0}
.g8-sci{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;max-width:640px;margin:auto}.g8-sci>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}.g8-sci strong{display:block;font-size:28px}
.g8-table{width:100%;max-width:640px;margin:auto;border-collapse:collapse;background:#fff}.g8-table th,.g8-table td{padding:8px;border:1px solid var(--line);text-align:center}
.g8-tree{display:grid;gap:8px;max-width:620px;margin:auto}.g8-tree-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.g8-chip{padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:700}
.g8-percent{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;max-width:390px;margin:10px auto}.g8-percent i{aspect-ratio:1;border:1px solid #a5b5a8;background:#fff}.g8-percent i.on{background:var(--gold)}
.g8-frac{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;max-width:620px;margin:auto}.g8-frac>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}.g8-frac strong{display:block;font-size:26px}
.g8-plane svg{width:100%;height:auto;display:block;max-width:640px;margin:auto}.g8-grid{stroke:#d5dfd8;stroke-width:1}.g8-axis{stroke:#607584;stroke-width:2}.g8-line{stroke:#235f9b;stroke-width:4}.g8-point{fill:#f2c257;stroke:#805c13;stroke-width:2}
.g8-square{width:min(260px,70vw);aspect-ratio:1;border:3px solid #235f9b;background:#d8e9f755;margin:14px auto;display:grid;place-items:center;font-size:34px;font-weight:850}
.g8-seq{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.g8-seq span{min-width:48px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff;text-align:center;font-weight:800}.g8-seq .current{background:var(--gold);border-color:#936b18}
.g8-rel{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:620px;margin:auto}.g8-rel>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}.g8-rel strong{display:block;font-size:28px}
@media(max-width:560px){.g8-sci,.g8-frac,.g8-rel{grid-template-columns:1fr}.g8-controls .btn{flex-basis:42%}}
.g8-variation-plot{max-width:720px;margin:10px auto;background:#fff;border:1px solid var(--line);border-radius:13px;padding:8px}.g8-variation-plot svg{width:100%;height:auto;display:block}.g8-variation-curve{fill:none;stroke:#235f9b;stroke-width:4}.g8-variation-curve.inverse{stroke:#a4481a}.g8-variation-curve.other{stroke:#146348}.g8-target-point{fill:#fff;stroke:#a4481a;stroke-width:3}.g8-current-point{fill:#f2c257;stroke:#7b5a13;stroke-width:3}.g8-current-point.good{fill:#dcebd6;stroke:#146348}.g8-svg-label{font-size:14px;fill:#50665b;font-weight:800}