/* ============================================================
   MÓDULOS ESPECIAIS — página do módulo, lições e Laboratório de circuitos
   (js/app/telas/modulo.js, js/app/telas/lab.js, js/app/lab/*)
   ============================================================ */

/* ---------- página do módulo ---------- */
.mod-tela { max-width: 900px; }
.mod-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mod-cab small { display: block; font: 13px 'Lilita One'; letter-spacing: 1px; color: var(--c); }
.mod-cab .title-l { margin: 0; line-height: 1.05; }
.mod-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 16px; background: #170c3a; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 3px var(--c); }
.mod-ic .ico { font-size: 36px; }
.mod-prog { margin: 12px 0 6px; }
.mod-prog .bar { position: relative; height: 26px; border-radius: 13px; background: #170c3a; border: 3px solid var(--ink); overflow: hidden; }
.mod-prog .bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)), var(--c); }
.mod-prog .bar span { position: relative; display: block; text-align: center; font: 14px 'Lilita One'; line-height: 20px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.mod-convite { margin-top: 18px; }
.mod-convite .big { font-size: 90px; }
.mod-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; }
.mod-atalho { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--txt); padding: 14px; box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c); }
.mod-atalho .ico { font-size: 40px; flex: none; }
.mod-atalho small { display: block; color: var(--muted); font-weight: 800; }
.mod-atalho b { font: 19px 'Lilita One'; }

.mod-trilha { display: grid; gap: 10px; }
.mod-licao { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--txt); }
.mod-licao > .ico { font-size: 30px; margin-left: auto; flex: none; opacity: .8; }
.mod-licao b { display: block; font: 18px 'Lilita One'; }
.mod-licao small { color: var(--muted); font-weight: 700; }
.mod-num { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #170c3a; border: 3px solid var(--ink); font: 18px 'Lilita One'; color: #fff; }
.mod-num .ico { font-size: 28px; }
.mod-licao.feita { opacity: .82; }
.mod-licao.feita .mod-num { background: var(--green); }
.mod-licao.agora { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c); }
.mod-licao.agora .mod-num { background: var(--c); color: var(--ink); animation: modPulso 1.6s infinite; }
@keyframes modPulso { 50% { transform: scale(1.12); } }

.mod-desafios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mod-desafio { text-decoration: none; color: var(--txt); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.mod-desafio h3 { margin: 4px 0 0; font: 20px 'Lilita One'; }
.mod-desafio p { margin: 0; color: var(--muted); font-weight: 700; font-size: 14px; }
.mod-desafio.feito { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--green); }
.mod-des-topo { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.mod-desafio .rewards { margin-top: auto; padding-top: 6px; }

.mod-missoes, .mod-projetos, .mod-ficha { display: grid; gap: 10px; }
.mod-missao { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--txt); }
.mod-missao > .ico { font-size: 34px; flex: none; }
.mod-missao b { display: block; font: 17px 'Lilita One'; }
.mod-missao small { color: var(--muted); font-weight: 700; }
.mod-mis-pr { margin-left: auto; font: 16px 'Lilita One'; white-space: nowrap; }
.mod-prof { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c); }
.mod-prof > .ico { font-size: 56px; flex: none; }
.mod-prof > div { flex: 1 1 200px; }
.mod-prof b { font: 21px 'Lilita One'; }
.mod-prof p { margin: 4px 0; font-style: italic; }
.mod-prof small { color: var(--green); font-weight: 800; }
.mod-projeto { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mod-projeto a { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: var(--txt); min-width: 0; }
.mod-projeto a .ico { font-size: 30px; flex: none; }
.mod-projeto b { font: 17px 'Lilita One'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-projeto small { color: var(--muted); font-weight: 700; margin-left: auto; }
.mod-ficha-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; }
.mod-ficha-item > div { flex: 1 1 140px; }
.mod-ficha-item b { display: block; font: 18px 'Lilita One'; }
.mod-ficha-item small { color: var(--muted); font-weight: 800; }
.mod-ficha-item.ativo { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c); }
.mod-ficha-item.ativo small { color: var(--green); }

/* ---------- lição ---------- */
.mod-licao-cab { margin: 14px 0 10px; }
.mod-licao-cab .title-l { margin: 6px 0 0; }
.mod-texto, .mod-dica, .mod-atencao, .mod-pratica, .mod-quiz { margin-bottom: 12px; font-weight: 700; line-height: 1.5; font-size: 17px; }
.mod-texto p, .mod-texto ul { margin: 0 0 10px; }
.mod-texto p:last-child, .mod-texto ul:last-child { margin-bottom: 0; }
.mod-texto li { margin-bottom: 6px; }
.mod-texto code, .mod-dica code, .mod-atencao code { background: #170c3a; border-radius: 6px; padding: 1px 6px; font-family: ui-monospace, Consolas, monospace; font-size: .92em; color: #9ff4ff; }
.mod-texto .formula { text-align: center; font: 22px 'Lilita One'; color: var(--gold); background: #170c3a; border-radius: 12px; padding: 10px; }
.mod-dica, .mod-atencao { display: flex; gap: 12px; align-items: flex-start; }
.mod-dica > .ico, .mod-atencao > .ico { font-size: 34px; flex: none; }
.mod-dica { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--gold); }
.mod-atencao { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--pink); }
.mod-pratica { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c); }
.mod-pr-tit { display: flex; align-items: center; gap: 8px; font: 19px 'Lilita One'; }
.mod-pr-tit .ico { font-size: 30px; }
.mod-quiz b { display: flex; gap: 8px; align-items: center; }
.mod-quiz-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mod-quiz .btn.certa { --c1: #a6ffc8; --c2: #22c46a; }
.mod-quiz .btn.errada { --c1: #ff9fb2; --c2: #ff3d63; --tc: #fff; }
.mod-quiz .ok { color: var(--green); margin: 8px 0 0; }
.mod-quiz .ruim { color: #ff9fb2; margin: 8px 0 0; }
.mod-licao-rodape { display: grid; gap: 10px; margin-top: 16px; }

/* ---------- Treino: convite dos módulos ---------- */
.am-modulo-convite { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--cyan); }

/* ---------- Laboratório ---------- */
.lab-screen { max-width: 1200px; padding-bottom: 150px; }
.lab { --c: var(--cyan); }
.lab-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lab-tit { flex: 1; min-width: 0; }
.lab-tit small { display: block; font: 13px 'Lilita One'; color: var(--c); letter-spacing: .5px; }
.lab-tit b { display: block; font: 20px 'Lilita One'; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-obj { padding: 12px 14px; margin-bottom: 12px; font-weight: 700; }
.lab-obj summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 18px 'Lilita One'; list-style: none; }
.lab-obj summary::-webkit-details-marker { display: none; }
.lab-obj summary .ico { font-size: 26px; }
.lab-obj > div { margin: 8px 0; line-height: 1.45; }
.lab-dica { margin: 6px 0; display: flex; gap: 8px; align-items: flex-start; color: #ffe8a3; }
.lab-dica .ico { font-size: 22px; flex: none; }
.lab-abas { margin-bottom: 10px; flex-wrap: nowrap; }
.lab-abas .tab, .lab-modo .tab { font-size: 15px; padding: 6px 10px; gap: 4px; }
.lab-abas .tab .ico, .lab-modo .tab .ico { font-size: 20px; }
.lab-abas .tab.on, .lab-modo .tab.on { background: var(--c); color: var(--ink); }
.lab-pane { display: none; }
.lab-pane.on { display: block; }
.lab-pecas { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.lab-peca-btn { flex: none; font: 15px 'Lilita One'; color: #fff; padding: 8px 12px; border-radius: 12px; background: #2a1a60; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; white-space: nowrap; }
.lab-peca-btn::before { content: '+ '; color: var(--c); }
.lab-peca-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.lab-tela { background: #fbfaf6; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px #e4dfd2; overflow: hidden; touch-action: none; }
/* botão Simular dentro da área do laboratório: canto de baixo à direita (o topo fica sob o HUD fixo ao rolar) */
.lab-tela { position: relative; }
.lab-botoes { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: flex; gap: 10px; align-items: center; }
.lab-tela .lab-ico { width: 54px; height: 54px; min-height: 0; padding: 0; border-radius: 50%; }
.lab-tela .lab-ico .ico { font-size: 32px; }
/* editor rápido de valores: cartão no topo da área do laboratório */
.lab-rapido { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; background: rgba(35,20,80,.96); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); padding: 6px 10px 8px; display: grid; gap: 4px; max-height: 40%; overflow: auto; }
.lab-rapido[hidden] { display: none; }
.lab-rapido.embaixo { top: auto; bottom: 74px; }
.lr-topo { display: flex; align-items: center; justify-content: space-between; font: 16px 'Lilita One'; color: #fff; }
.lr-x { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: #2a1a60; color: #fff; cursor: pointer; }
.lr-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-linha .lab-chips { flex-wrap: nowrap; overflow-x: auto; margin-top: 0; padding-bottom: 2px; scrollbar-width: none; }
.lr-linha .lab-chip { flex: none; }
.lr-rot { font: 13px 'Lilita One'; color: var(--muted); flex: none; }
.lr-linha .lab-valor { flex: none; }
.lr-linha .lab-valor input { width: 86px; font-size: 16px; padding: 5px 8px; }
.lr-linha input[type=range] { width: 100%; }
.lr-cores { display: flex; gap: 10px; }
.lr-cor { width: 32px; height: 32px; border-radius: 50%; background: var(--lc); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.lr-cor.on { outline: 3px solid #fff; outline-offset: 2px; }
.lab-botoes [hidden] { display: none; }
.lab-svg { display: block; width: 100%; height: auto; max-height: 72vh; user-select: none; -webkit-user-select: none; }
.lab-ajuda { color: var(--muted); font-weight: 700; font-size: 13px; margin: 8px 2px; }
.lab-props { margin-top: 8px; }
.lab-dica-sel { font-weight: 700; font-size: 14px; }
.lab-prop { padding: 12px 14px; display: grid; gap: 8px; }
.lab-prop b { font: 18px 'Lilita One'; }
.lab-prop small { color: var(--muted); font-weight: 700; line-height: 1.4; }
.lab-campos { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-campo { display: grid; gap: 4px; font: 14px 'Lilita One'; color: var(--muted); flex: 1 1 140px; }
.lab-campo select, .lab-campo input[type=range] { width: 100%; }
.lab-campo select { font: 16px Nunito, sans-serif; font-weight: 800; padding: 8px; border-radius: 10px; border: 3px solid var(--ink); background: #170c3a; color: #fff; }
.lab-prop-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-campo-num { flex: 1 1 100%; }
.lab-valor { display: flex; align-items: center; gap: 6px; }
.lab-valor input { width: 140px; font: 800 18px Nunito, sans-serif; padding: 8px 10px; border-radius: 10px; border: 3px solid var(--ink); background: #170c3a; color: #fff; }
.lab-valor span { font: 18px 'Lilita One'; color: #fff; }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lab-chip { font: 800 13px Nunito, sans-serif; color: #fff; background: #2a1a60; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.lab-chip.on { background: var(--c); color: var(--ink); }
.lab-leituras { margin-top: 4px; }
.lab-medidas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #0f2a1c; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; }
.lab-medidas > .ico { font-size: 28px; }
.lab-medidas span { display: grid; background: #071a10; border-radius: 8px; padding: 4px 10px; min-width: 76px; }
.lab-medidas small { color: #8fe3b0; font: 700 11px Nunito, sans-serif; }
.lab-medidas b { color: #7dff9e; font: 16px ui-monospace, Consolas, monospace; }

/* SVG das peças */
.lab-peca { cursor: grab; }
.lab-peca.sel .lab-sel { fill: rgba(31,163,200,.08); stroke: #1f8fd0; stroke-width: 2.5; stroke-dasharray: 6 5; }
.lab-term { cursor: crosshair; }
.lab-term-alvo { fill: transparent; }
.lab-term-ponto { fill: #9aa3ad; stroke: #2a2a2a; stroke-width: 2; }
.lab-term:hover .lab-term-ponto { fill: var(--gold); }
.lab-term.pendente .lab-term-ponto { fill: var(--gold); stroke: #fff; animation: labPisca .8s infinite; }
@keyframes labPisca { 50% { r: 8px; } }
.lab-fio { cursor: pointer; }
.lab-fio-alvo { fill: none; stroke: transparent; stroke-width: 16; }
.lab-fio.sel path:last-child { filter: drop-shadow(0 0 4px #fff); }
.lab-fio-novo { stroke: #e08a00; stroke-width: 4; stroke-dasharray: 7 5; pointer-events: none; }
.lab-pino-txt { font: 10px 'Lilita One'; fill: #e9fbff; pointer-events: none; }
.lab-pino-txt.gnd { fill: #b9c4d0; }
.lab-pino-txt.vcc { fill: #ff9f9f; }
.lab-placa-txt { font: 18px 'Lilita One'; fill: #e9fbff; letter-spacing: 2px; pointer-events: none; }
.lab-placa-sub { font: 13px 'Lilita One'; fill: rgba(255,255,255,.75); letter-spacing: 3px; pointer-events: none; }
.lab-rotulo { font: 12px 'Lilita One'; fill: #3a2a10; paint-order: stroke; stroke: #fbfaf6; stroke-width: 3px; pointer-events: none; }
.lab-perna-txt { font: 11px 'Lilita One'; fill: #3a3a3a; pointer-events: none; }
.lab-proto-txt { font: 9px 'Lilita One'; fill: #8c8676; pointer-events: none; }
.lab-val { font: 14px 'Lilita One'; fill: #111; pointer-events: none; }
.lab-val.claro { fill: #fff; }
.lab-val.mini { font-size: 10px; }
.lab-som { animation: labSom .3s infinite alternate; }
@keyframes labSom { to { opacity: .3; } }

/* programa */
.lab-prog-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lab-modo { display: flex; gap: 8px; }
.lab-aviso { display: flex; gap: 10px; align-items: center; padding: 10px 14px; font-weight: 800; margin-bottom: 10px; }
.lab-aviso .ico { font-size: 28px; flex: none; }
.lab-codigo-box { padding: 0; overflow: hidden; }
.lab-codigo { display: block; width: 100%; min-height: 320px; resize: vertical; border: 0; outline: 0; padding: 14px; background: #0f0a24; color: #e8f9ff; font: 15px/1.5 ui-monospace, Consolas, 'Courier New', monospace; tab-size: 2; white-space: pre; overflow: auto; }
.lab-erro { margin: 10px 2px; font-weight: 800; }
.lab-erro .ico { font-size: 22px; margin-right: 6px; }
.lab-erro .ok { color: var(--green); }
.lab-erro .ruim, .lab-status .ruim { color: #ff9fb2; }
.lab-vercodigo { margin-top: 10px; padding: 10px 14px; }
.lab-vercodigo summary { cursor: pointer; font: 16px 'Lilita One'; }
.lab-vercodigo pre { margin: 10px 0 0; background: #0f0a24; border-radius: 10px; padding: 10px; color: #e8f9ff; font: 13px/1.45 ui-monospace, Consolas, monospace; overflow-x: auto; }

/* monitor serial */
.lab-monitor { padding: 12px; }
.lab-mon-tit { display: flex; align-items: center; gap: 8px; font: 17px 'Lilita One'; margin-bottom: 8px; }
.lab-mon-tit .btn { margin-left: auto; }
.lab-serial { margin: 0; min-height: 160px; max-height: 300px; overflow: auto; background: #050310; color: #7dff9e; border-radius: 12px; padding: 12px; font: 14px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; }

/* status e rodapé */
.lab-status { display: grid; gap: 6px; margin: 10px 0; }
.lab-tempo { font-weight: 800; color: var(--green); display: flex; align-items: center; gap: 6px; }
.lab-av { display: flex; gap: 8px; align-items: flex-start; background: #3a0f24; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; font-weight: 800; color: #ffd6df; }
.lab-av .ico { font-size: 22px; flex: none; }
.lab-rodape { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-rodape .btn.block { flex: 1 1 100%; }
.lab-r-lista { text-align: left; padding: 0; list-style: none; display: grid; gap: 8px; font-weight: 800; }
.lab-r-lista li { display: flex; gap: 8px; align-items: flex-start; }
.lab-r-lista .ico { font-size: 22px; flex: none; }
.lab-r-aviso { color: #ffb3c1; }
.lab-r-premio { font: 22px 'Lilita One'; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ---------- blocos ---------- */
.lab-blocos { padding: 12px; }
.bl-prog { display: grid; gap: 14px; }
.bl-evento { border: 3px solid var(--ink); border-radius: 16px; background: #170c3a; box-shadow: inset 0 0 0 2px var(--bc); padding: 10px; }
.bl-ev-tit { display: flex; align-items: center; gap: 6px; font: 17px 'Lilita One'; color: var(--bc); margin-bottom: 8px; }
.bl-ev-tit .ico { font-size: 24px; }
.bl-ev-tit small { color: var(--muted); font: 700 12px Nunito, sans-serif; }
.bl-lista { display: grid; gap: 6px; }
.bl { border: 3px solid var(--ink); border-left: 10px solid var(--bc); border-radius: 12px; background: #2a1a60; box-shadow: 0 3px 0 var(--ink); }
.bl-linha { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; }
.bl-txt { flex: 1; font-weight: 800; font-size: 15px; line-height: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bl-cond { display: contents; }
.bl-campo { font: 800 15px Nunito, sans-serif; color: #fff; background: #120a2b; border: 2px solid var(--ink); border-radius: 8px; padding: 3px 6px; max-width: 100%; }
.bl-campo.num { width: 82px; }
.bl-campo.txt { width: 140px; }
.bl-ctl { display: flex; gap: 2px; flex: none; }
.bl-b { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ink); background: #2a1a60; color: #fff; cursor: pointer; font-size: 13px; }
.bl-b.x { background: #5a1830; }
.bl-filhos { padding: 0 8px 8px 16px; display: grid; gap: 6px; }
.bl-entao, .bl-senao { font: 14px 'Lilita One'; color: var(--bc); }
.bl-add { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font: 14px 'Lilita One'; color: #fff; background: transparent; border: 2px dashed rgba(255,255,255,.4); border-radius: 10px; padding: 5px 10px; cursor: pointer; }
.bl-add .ico { font-size: 18px; }
.lab-paleta-fundo { position: fixed; inset: 0; background: rgba(10,4,30,.6); z-index: 60; }
.lab-paleta { position: fixed; left: 12px; right: 12px; bottom: 12px; max-height: 70vh; overflow: auto; z-index: 61; padding: 12px; }
.lab-paleta-tit { display: flex; align-items: center; justify-content: space-between; font: 19px 'Lilita One'; margin-bottom: 6px; }
.bl-paleta { display: grid; gap: 10px; }
.bl-cat b { font: 15px 'Lilita One'; color: var(--muted); }
.bl-cat-itens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bl-opcao { font: 800 14px Nunito, sans-serif; color: #fff; text-align: left; border: 3px solid var(--ink); border-left: 8px solid var(--bc); border-radius: 10px; background: #2a1a60; padding: 7px 10px; cursor: pointer; }

/* tela larga: circuito e programa lado a lado */
@media (min-width: 980px) {
  .lab-abas [data-k="programa"] { display: none; }
  .lab-corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .lab.lab-largo-prog .lab-pane-programa { display: block; }
  .lab-pane-monitor.on { grid-column: 1 / -1; }
  .lab-paleta { left: auto; width: 420px; }
  .lab-testar { display: none; } /* tela larga: o circuito já está do lado */
}

/* ---------- peças novas: barra de componentes com imagens, ferramentas de ambiente, zoom, avisos ---------- */
.lab-peca-btn.img { width: 64px; height: 64px; padding: 4px; display: grid; place-items: center; background: #fbfaf6; }
.lab-peca-btn.img::before { content: none; }
.lab-peca-btn.img svg { width: 100%; height: 100%; display: block; }
.lab-ferr { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.lab-ferr-btn { flex: none; width: 44px; height: 44px; font-size: 24px; line-height: 1; border-radius: 12px; background: #2a1a60; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.lab-ferr-btn.on { background: linear-gradient(180deg, #ffe07a, #ffb000); }
.lab-ferr-dica { flex: none; color: var(--muted); font-weight: 700; font-size: 12px; max-width: 170px; line-height: 1.2; }
.lab-tela.com-ferr .lab-svg { cursor: none; }
.lab-cursor { position: absolute; left: 0; top: 0; z-index: 4; font-size: 40px; line-height: 1; pointer-events: none; margin: -20px 0 0 -20px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.lab-cursor[hidden] { display: none; }
.lab-zoom { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.lab-zoom-b { width: 40px; height: 40px; border-radius: 50%; font: 22px 'Lilita One'; color: #fff; background: #2a1a60; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; line-height: 1; padding: 0; }
.lab-zoom-b:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lr-amb { flex: none; font: 14px 'Lilita One'; color: #fff; min-width: 54px; text-align: right; }
.modal { position: relative; }
.modal-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--ink); background: #2a1a60; color: #fff; font-size: 16px; cursor: pointer; z-index: 2; }
.lab-avisos-lista { list-style: none; padding: 0; margin: 8px 0 0; text-align: left; display: grid; gap: 8px; }
.lab-avisos-lista li { display: flex; gap: 8px; align-items: flex-start; font-weight: 800; background: rgba(0,0,0,.18); border-radius: 12px; padding: 8px 10px; }
.lab-avisos-lista .ico { font-size: 22px; flex: none; }
.lab-zona { fill: rgba(255, 176, 0, .07); stroke: #ffb000; stroke-width: 2; stroke-dasharray: 8 6; pointer-events: none; }
.lab-zona.forte { fill: rgba(255, 176, 0, .1); stroke-width: 1.5; }

/* Celular/tablet: faixa livre dos dois lados da área do circuito, para o dedo rolar a página
   (dentro da .lab-tela o toque é do circuito: touch-action none) */
@media (pointer: coarse) { .lab-tela { margin-left: 15px; margin-right: 15px; } }