/* ══════════════════════════════════════════════════════════════════════
   COCKPIT · PROPOSTA B — "AUTORAL" · rodada 09/08/2026
   Base: montagem_v4.css aprovada e no ar, INTACTA até a marca "RODADA
   COCKPIT · B" lá embaixo. Nenhum id, data-* ou classe renomeada; todo
   estado do esqueleto tem regra. Elementos novos: rnd-* (montador) e
   rnd-hub-* (hub) — acrescentados.
   Hipótese B: comando é LEITURA VIVA, não repertório — módulos com filete
   de acento (linguagem chart-card do app), o copiloto fala primeiro e as
   ações nomeadas vêm depois, mini-HUD fixo no celular (tempo/volume sempre
   à vista), o Hub responde "o que preciso fazer agora?" numa frase.
   Roxo só no copiloto RN IA. Dourado escasso: o agora e a ação primária.
   Fontes pelos stacks (o app embarca). Celular 390 primeiro; Mac ≥900.
   ══════════════════════════════════════════════════════════════════════ */
:root{--bg:#0a0806;--ink:#eee7da;--ink2:#9a9384;--ink3:#6c6558;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.05);--gold:#c9a227;--gold2:#e2c25e;--ia:#9d5cff;--ciano:#22d3ee;--azul:#5b8def;--verde:#3ddc97;--lemon:#fde047;--verm:#f0616b;--vz-baixo:#5b8def;--vz-ideal:#3ddc97;--vz-acima:#e2c25e;--vz-limite:#e8862e;--vz-excesso:#f0616b;--vz-marker:#f0d789;--ease:cubic-bezier(.23,1,.32,1)}

/* ── BASE ── */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 14px/1.5 Jost,'Avenir Next',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold2);text-decoration:none}
a:hover{color:var(--gold)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px 9px 9px 4px;padding:9px 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(201,162,39,.5)}
input[type="checkbox"]{padding:0}
select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9384' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
textarea{resize:vertical;min-height:64px}
[hidden]{display:none!important}
:focus-visible{outline:2px solid rgba(226,194,94,.6);outline-offset:2px}
.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.eb{font-size:9px;font-weight:500;letter-spacing:.17em;color:var(--ink3);text-transform:uppercase}
.tabnum{font-variant-numeric:tabular-nums}
/* realce genérico que o motor aplica (trecho buscado, opção sugerida) */
.hl{background:rgba(201,162,39,.14);border-radius:3px}

/* ── O PALCO: overlays do app (.open é o motor) ── */
/* glow do RN IA desce pra ABAIXO do header (entrega Design 13/08): era at -8% -10%,
   nascia no topo e tingia o cabeçalho; agora at -8% 34%, no corpo do montador. */
.wkb-overlay{position:fixed;inset:0;display:none;background:radial-gradient(1100px 760px at 88% -12%,rgba(201,162,39,.09),transparent 60%),radial-gradient(620px 380px at -8% 34%,rgba(157,92,255,.07),transparent 62%),linear-gradient(#0a0806,#070505)}
.wkb-overlay.open{display:block}
#wkBuilderOverlay{z-index:9810}
#wkHubOverlay{z-index:9800}
/* o app trava a rolagem de trás enquanto um overlay vive */
body.rnp-wkb-open{overflow:hidden}
.wkb-panel{height:100dvh;display:flex;flex-direction:column}
#wkHubOverlay .wkb-panel{background:var(--bg);overflow:auto;display:block}

/* ── HUB ── */
.wkh-eyebrow{font-size:9.5px;font-weight:500;letter-spacing:.18em;color:var(--ink3);text-transform:uppercase}
.wkh-body{max-width:640px;margin:0 auto;padding:0 18px 90px}
.wkh-top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 0 10px}
#wkhVoltar{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px 0 10px;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);font-size:12.5px;background:rgba(255,255,255,.02);transition:all .18s var(--ease)}
#wkhVoltar:hover{color:var(--ink);border-color:rgba(255,255,255,.16)}
.wkh-toptitle{flex:1;text-align:center;font-size:9.5px;font-weight:500;letter-spacing:.2em;color:var(--ink3)}
#wkhClose{width:44px;height:44px;display:grid;place-items:center;border:1px solid transparent;border-radius:11px 11px 11px 5px;color:var(--ink2);transition:all .18s var(--ease)}
#wkhClose:hover{color:var(--ink);border-color:var(--line)}
.wkh-h1{margin:18px 0 4px;font:500 34px/1.05 'Playfair Display',Georgia,serif}
.wkh-sub{font-size:13px;color:var(--ink2)}
.wkh-ai{margin-top:22px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;padding:14px 16px}
.wkh-ai .wkh-eyebrow{color:var(--gold)}
.wkh-ai p{margin:6px 0 0;font-size:13px;color:var(--ink2);text-wrap:pretty}
.wkh-hero{display:flex;align-items:center;gap:16px;width:100%;margin-top:14px;padding:20px 18px;background:linear-gradient(135deg,rgba(201,162,39,.13),rgba(201,162,39,.05));border:1px solid rgba(201,162,39,.35);border-radius:16px 16px 16px 7px;transition:border-color .18s var(--ease)}
.wkh-hero:hover{border-color:rgba(226,194,94,.6)}
.wkh-hero-ic{width:46px;height:46px;display:grid;place-items:center;background:var(--gold);color:#0a0806;border-radius:13px 13px 13px 6px;flex:none}
.wkh-hero-t{font:500 20px 'Playfair Display',Georgia,serif;color:var(--ink)}
.wkh-hero-s{font-size:12px;color:var(--ink2);margin-top:3px;text-wrap:pretty}
.wkh-hero .i-arrow{margin-left:auto;color:var(--gold2)}
.wkh-row{display:flex;align-items:center;gap:13px;width:100%;margin-top:10px;padding:14px 16px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;transition:border-color .18s var(--ease)}
.wkh-row:hover{border-color:var(--line)}
.wkh-row-ic{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px 10px 10px 5px;color:var(--gold2);flex:none}
.wkh-row-t{font-weight:500;font-size:14px}
.wkh-row-m{font-size:11.5px;color:var(--ink3);margin-top:2px}
.wkh-row .i-arrow{margin-left:auto;color:var(--ink3)}
.wkh-sec{margin-top:30px}
.wkh-fichas-sec{margin-top:30px}
.wkh-sec-head{display:flex;align-items:baseline;gap:10px}
.wkh-sec-head .n{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.wkh-lib{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.wkh-lib-c{border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;padding:14px 16px;transition:border-color .18s var(--ease)}
.wkh-lib-c:hover{border-color:var(--line)}
.wkh-lib-top{display:flex;align-items:center;gap:11px}
.wkh-lib-ic{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(201,162,39,.3);background:rgba(201,162,39,.06);border-radius:10px 10px 10px 5px;color:var(--gold2);flex:none}
.wkh-lib-t{font:500 16px 'Playfair Display',Georgia,serif}
.wkh-lib-m{font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums}
.wkh-lib-actions{display:flex;gap:8px;margin-top:12px}
.wkh-apply{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;background:var(--gold);color:#0a0806;font-weight:500;font-size:12.5px;border-radius:10px 10px 10px 5px;transition:filter .18s var(--ease)}
.wkh-apply:hover{filter:brightness(1.08)}
.wkh-open{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border:1px solid var(--line);color:var(--ink2);font-size:12.5px;border-radius:10px 10px 10px 5px;transition:all .18s var(--ease)}
.wkh-open:hover{color:var(--ink);border-color:rgba(255,255,255,.16)}
.wkh-fichas{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.wkh-fichas .wkh-ficha{margin-top:0}
.wkh-ficha{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;margin-top:10px;transition:border-color .18s var(--ease)}
.wkh-ficha:hover{border-color:var(--line)}
.wkh-swatch{width:7px;height:26px;border-radius:4px;flex:none}
.wkh-ficha-t{font:500 15px 'Playfair Display',Georgia,serif}
.wkh-ficha-m{font-size:11.5px;color:var(--ink3);margin-top:2px}
.wkh-ficha .i-arrow{margin-left:auto;color:var(--ink3)}
.wkh-empty{display:none;border:1px dashed rgba(238,231,218,.16);background:rgba(0,0,0,.25);border-radius:13px 13px 13px 6px;padding:16px 18px;font-size:12.5px;color:var(--ink3);margin-top:12px;text-wrap:pretty}
body.wkh-vazio .wkh-empty{display:block}
body.wkh-vazio #wkhResumeBtn,body.wkh-vazio .wkh-lib,body.wkh-vazio .wkh-fichas{display:none}
.wkh-note{margin-top:26px;font-size:10.5px;color:var(--ink3)}
.wkh-sheet{position:fixed;inset:0;z-index:9870;display:none;align-items:flex-end;justify-content:center;background:rgba(10,8,6,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wkh-sheet.open{display:flex}
.wkh-sheet-card{width:100%;max-width:560px;background:rgba(24,20,14,.96);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom) + 18px);animation:rise .22s var(--ease) both}
.wkh-sheet-t{margin:2px 0 0;font:500 22px 'Playfair Display',Georgia,serif}
.wkh-sheet-s{font-size:12.5px;color:var(--ink2);margin-top:6px;text-wrap:pretty}
.wkh-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.wkh-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:10px 16px;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);font-size:13px;text-align:left;transition:all .18s var(--ease)}
.wkh-chip b{width:7px;height:22px;border-radius:4px;flex:none}
.wkh-chip.active{border-color:rgba(226,194,94,.6);color:var(--ink);background:rgba(201,162,39,.07)}
.wkh-sheet-actions{display:flex;gap:10px;margin-top:18px}
.wkh-cta{flex:1;display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--gold);color:#0a0806;font-weight:500;border-radius:12px 12px 12px 6px}
.wkh-ghost{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 18px;border:1px solid var(--line);color:var(--ink2);border-radius:12px 12px 12px 6px}
.wkh-toast{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);bottom:calc(env(safe-area-inset-bottom) + 90px);z-index:9880;background:rgba(24,20,14,.96);border:1px solid rgba(201,162,39,.4);color:var(--ink);font-size:12.5px;padding:12px 18px;border-radius:12px 12px 12px 6px;opacity:0;pointer-events:none;transition:all .22s var(--ease)}
.wkh-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.wkh-ai,.wkh-hero,#wkhResumeBtn,.wkh-sec{animation:rise .22s var(--ease) both}
.wkh-hero{animation-delay:.04s}
#wkhResumeBtn{animation-delay:.07s}
.wkh-sec{animation-delay:.1s}

/* ── MONTADOR · topo ── */
/* header OPACO (entrega Design 13/08): o roxo do RN IA não vaza mais por baixo.
   Fundo obsidiano sólido + blur — bloqueia qualquer glow de trás, venha de onde vier. */
.rn2-mobile-top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b0907,#0a0806);backdrop-filter:blur(16px);flex:none}
#wkbMobileBackBtn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2)}
.wkb-toptitle{flex:1;min-width:0;text-align:center}
.wkb-toptitle .eb{color:var(--gold)}
.wkb-topname,#wkbTopName{font:500 15px 'Playfair Display',Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wkbClose{width:44px;height:44px;display:grid;place-items:center;border:1px solid transparent;border-radius:11px 11px 11px 5px;color:var(--ink2)}
#wkbClose:hover{color:var(--ink);border-color:var(--line)}
#wkbCancelBtn,.wkb-head-actions{display:none}

/* ── MONTADOR · corpo ── */
.wkb-body,#wkbBody{flex:1;overflow:auto;padding:16px 16px 40px;-webkit-overflow-scrolling:touch}
/* a barra inferior existe → o corpo respira acima dela (dois ganchos do motor) */
.wkb-body.rn-has-bottom-bar{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
body.rnp-wkb-bottombar-open .wkb-body{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
body.wkb-kb-open #wkbBody{padding-bottom:300px}
/* erro de validação: o motor só escreve o texto — com texto, aparece */
.wkb-error{display:none;border:1px solid rgba(240,97,107,.4);background:rgba(240,97,107,.06);color:var(--verm);font-size:12.5px;border-radius:11px 11px 11px 5px;padding:11px 14px;margin-bottom:12px}
.wkb-error:not(:empty){display:block}

/* ── FAIXA DO ALUNO ── */
.rn-strip{border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:14px 14px 14px 6px;padding:14px 16px}
.rn-strip-row{display:flex;align-items:center;gap:12px}
/* a cor do aluno é dado, não pele: o motor escreve o background inline.
   O default abaixo É o estado "sem aluno" (avatar "?"). */
#rnStripAvatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:500 15px 'Playfair Display',Georgia,serif;color:var(--ink3);background:rgba(255,255,255,.06);box-shadow:0 0 0 2px rgba(255,255,255,.08);flex:none}
#rnStripName{font:500 19px 'Playfair Display',Georgia,serif;line-height:1.1}
#rnStripBio{font-size:11.5px;color:var(--ink3);margin-top:2px}
#rnStripBio:empty{display:none}
#rnEditToggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);font-size:12px;flex:none}
#rnEditToggle:hover{color:var(--ink)}
#rnEditChevron{transition:transform .28s var(--ease)}
body.rn-edit-open #rnEditChevron{transform:rotate(180deg)}
#rnStripSaude{display:inline-flex;align-items:flex-start;gap:7px;margin-top:12px;padding:9px 12px;border:1px solid rgba(253,224,71,.25);background:rgba(253,224,71,.05);border-radius:10px 10px 10px 5px;color:var(--lemon);font-size:12px;text-align:left;min-height:44px}
#rnStripSaude .i{width:14px;height:14px}
#rnStripSaudeDetail{display:none;margin-top:12px;border-top:1px solid var(--line2);padding-top:12px;font-size:12.5px;color:var(--ink2);text-wrap:pretty}
body.rn-saude-open #rnStripSaudeDetail,#rnStripSaudeDetail.open{display:block;animation:rise .22s var(--ease) both}
#rnStripSaudeDetail .sd-row{display:flex;gap:8px;margin-top:6px}
#rnStripSaudeDetail .sd-l{color:var(--ink3);min-width:110px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.sd-escala{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sd-escala span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink3)}
.sd-escala b{width:7px;height:7px;border-radius:50%}
#rnEditFields{display:none;margin-top:14px;border-top:1px solid var(--line2);padding-top:14px}
body.rn-edit-open #rnEditFields,#rnEditFields.open{display:grid;grid-template-columns:1fr 1fr;gap:10px;animation:rise .22s var(--ease) both}
#rnEditFields label{display:flex;flex-direction:column;gap:5px;font-size:10px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;font-weight:500}
#rnEditFields .full{grid-column:1/-1}
.rn-replicar{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink2);text-transform:none;letter-spacing:0}
.rn-replicar input{width:17px;height:17px;accent-color:#c9a227;padding:0}
.rn-replicar em{font-style:normal;color:var(--ink3);font-size:11px}

/* ── ABAS (1 a 6, rótulo do professor — desenhado para texto longo) ── */
.rn-tabs{display:flex;gap:4px;margin-top:14px;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:13px 13px 13px 6px;padding:4px;position:relative;touch-action:pan-y}
.rn-tab{flex:1;min-width:0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;border-radius:9px 9px 9px 4px;color:var(--ink2);font-weight:600;font-size:14px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;transition:background .18s var(--ease);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y;will-change:transform}
.rn-tab i{font-style:normal;font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums}
.rn-tab:hover{background:rgba(255,255,255,.04)}
.rn-tab.active{background:var(--gold);color:#0a0806}
.rn-tab.active i{color:rgba(10,8,6,.7)}
.rn-tab-add{flex:0 0 52px;color:var(--ink3)}

/* ── INSTRUMENTOS ── */
.rn-instruments{margin-top:14px}
.rn-metrics-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rn-metric{position:relative;border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:11px 11px 11px 5px;padding:10px 12px 9px;min-height:64px;display:flex;flex-direction:column-reverse;gap:2px}
.rn-metric .l{font-size:8px;font-weight:500;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.rn-metric .v{font:500 17px 'Playfair Display',Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.rn-metric .v small{font-family:Jost,sans-serif;font-size:11px;color:var(--ink3);font-weight:400}
.rn-metric-info{position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:7px 7px 7px 3px;color:var(--ink3);font-size:10.5px}
.rn-metric-info:hover{color:var(--gold2);border-color:rgba(201,162,39,.4)}
button.rn-metric{cursor:pointer}
button.rn-metric:hover{border-color:var(--line)}
.wkb-volume-toggle{text-align:left}
/* C-278 (24/08): invólucro do botão "?" do Volume — `.rn-metric` (o toggle)
   fica intocado por dentro; isto só dá o encaixe de fora, esticando pra
   preencher a célula do grid exatamente como o botão sozinho já fazia. */
.rn-metric-cell{position:relative}
.rn-metric-cell .rn-metric{width:100%;height:100%}
.rn-metric .modo{position:absolute;top:8px;right:8px;color:var(--ink3)}

/* ── VOLUME POR GRUPO (estrutura do motor: track de 3 zonas com flex
     escrito no JS + marcador posicionado por left:% — nada fixado aqui) ── */
.wkb-vi{margin-top:10px;border:1px solid var(--line2);background:rgba(255,255,255,.025);border-radius:13px 13px 13px 6px;padding:14px 16px 12px}
.wkb-vi-head{display:flex;align-items:center;gap:8px}
.wkb-vi-head .eb{color:var(--gold)}
#wkbVolumeInteligenteInfoBtn{margin-left:auto;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:7px 7px 7px 3px;color:var(--ink3);font-size:11px}
#wkbVolumeInteligenteInfoBtn:hover{color:var(--gold2);border-color:rgba(201,162,39,.4)}
.wkb-vi-row{padding:10px 0 11px;border-top:1px solid var(--line2)}
.wkb-vi-head + .wkb-vi-row{border-top:0;margin-top:6px}
.wkb-vi-row-top{display:flex;align-items:baseline;gap:10px}
.wkb-vi-grupo{flex:1;min-width:0;font-size:12.5px;color:var(--ink2)}
.wkb-vi-valor{font:500 15px 'Playfair Display',Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.wkb-vi-valor small{font-family:Jost,'Avenir Next',system-ui,sans-serif;font-size:10.5px;font-weight:400;color:var(--ink3);letter-spacing:.02em}
.wkb-vi-bar{position:relative;margin-top:7px;height:7px}
.wkb-vi-bar-track{position:absolute;inset:0;display:flex;gap:2px;border-radius:4px;overflow:hidden}
.wkb-vi-bar-seg{height:100%}
.wkb-vi-bar-baixo{background:rgba(91,141,239,.30)}
.wkb-vi-bar-ideal{background:rgba(61,220,151,.32)}
.wkb-vi-bar-acima{background:rgba(226,194,94,.32)}
.wkb-vi-mark{position:absolute;top:-2.5px;bottom:-2.5px;width:3px;border-radius:2px;background:var(--vz-marker);box-shadow:0 0 8px rgba(240,215,137,.75);transform:translateX(-50%)}
/* o rótulo textual carrega o tom (cor nunca sozinha) */
.wkb-vi-baixo .wkb-vi-valor small{color:var(--vz-baixo)}
.wkb-vi-ideal .wkb-vi-valor small{color:var(--vz-ideal)}
.wkb-vi-acima .wkb-vi-valor small{color:var(--vz-acima)}
/* vazio: aparece sozinho quando não há linha entre o cabeçalho e ele */
.wkb-vi-empty{display:none;margin:10px 0 2px;padding:12px 14px;border:1px dashed rgba(238,231,218,.16);background:rgba(0,0,0,.25);border-radius:10px 10px 10px 5px;font-size:12px;color:var(--ink3);text-wrap:pretty}
.wkb-vi-head + .wkb-vi-empty{display:block}
/* leitura antiga do painel de volume (pele aprovada — segue valendo) */
.vi-name{font-size:12.5px;color:var(--ink2)}
.vi-n{font:500 15px 'Playfair Display',Georgia,serif;font-variant-numeric:tabular-nums;justify-self:end}
.vi-selo{font-size:10px;font-weight:500;letter-spacing:.06em;padding:3px 9px;border-radius:7px 7px 7px 3px;border:1px solid}
.tom-baixo{color:var(--vz-baixo);border-color:rgba(91,141,239,.35);background:rgba(91,141,239,.07)}
.tom-ideal{color:var(--vz-ideal);border-color:rgba(61,220,151,.35);background:rgba(61,220,151,.07)}
.tom-acima{color:var(--vz-acima);border-color:rgba(226,194,94,.4);background:rgba(226,194,94,.07)}
.tom-limite{color:var(--vz-limite);border-color:rgba(232,134,46,.4);background:rgba(232,134,46,.08)}
.tom-excesso{color:var(--vz-excesso);border-color:rgba(240,97,107,.4);background:rgba(240,97,107,.08)}
.vi-bar{grid-column:1/-1;position:relative;height:7px;border-radius:4px;overflow:hidden;display:flex}
.vi-bar b{height:100%}
.vi-bar .z1{width:18%;background:rgba(91,141,239,.32)}
.vi-bar .z2{width:39%;background:rgba(61,220,151,.34)}
.vi-bar .z3{width:14%;background:rgba(226,194,94,.36)}
.vi-bar .z4{width:14%;background:rgba(232,134,46,.36)}
.vi-bar .z5{width:15%;background:rgba(240,97,107,.34)}
.vi-mark{position:absolute;top:-2px;bottom:-2px;width:3px;border-radius:2px;background:var(--vz-marker);box-shadow:0 0 8px rgba(240,215,137,.75)}
.wkb-vi-note{margin-top:10px;font-size:10.5px;color:var(--ink3);text-wrap:pretty}

/* ── PAINEL E LISTA ── */
.rn-panel{display:none}
.rn-panel.active{display:block;animation:rise .22s var(--ease) both}
.rn-block-label{display:flex;align-items:center;gap:8px;margin:18px 2px 10px}
#rnBlockLabel{font-size:10px;font-weight:500;letter-spacing:.17em;color:var(--gold);text-transform:uppercase;border:0;background:none;padding:0}
.rn-block-label .i{width:12px;height:12px;color:var(--ink3)}
.rn-list{display:flex;flex-direction:column;gap:12px}

/* ── O CARTÃO ── */
.rn2-ex-card{position:relative;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:14px 14px 14px 6px;padding:12px 14px;transition:border-color .18s var(--ease),transform .18s var(--ease),opacity .18s var(--ease)}
.rn2-ex-card.editing{border-color:rgba(201,162,39,.45)}
.rn-ex-head{display:flex;align-items:center;gap:10px}
.rnd-alca{width:30px;min-height:44px;display:grid;place-items:center;color:var(--ink3);cursor:grab;flex:none;border-radius:8px;touch-action:none}
.rnd-alca:hover{color:var(--ink2)}
.rnd-alca:active{cursor:grabbing;color:var(--gold2)}
.rn-alca{width:30px;height:44px;display:grid;place-items:center;color:var(--ink3);cursor:grab;flex:none;border-radius:8px}
.rn-alca:hover{color:var(--ink2)}
.rn-num{width:20px;font:500 12px 'Playfair Display',Georgia,serif;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none}
.rn-name{flex:1;min-width:0;font:500 17px/1.2 'Playfair Display',Georgia,serif;color:var(--ink);padding:6px 0;cursor:text;position:relative}
.rn-name .empty{color:var(--ink3);font-family:Jost,'Avenir Next',system-ui,sans-serif;font-size:14px;font-weight:400}
.rn-name input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 0;font:500 17px 'Playfair Display',Georgia,serif;color:var(--ink)}
.rn-name input::placeholder{color:var(--ink3);font-family:Jost,sans-serif;font-size:14px;font-weight:400}
.rn-name input:focus{border-color:var(--gold)}
.wkb-exercise-search-wrap{position:relative;cursor:default}
.rn2-ex-remove{width:38px;height:38px;display:grid;place-items:center;color:var(--ink3);border:1px solid transparent;border-radius:10px 10px 10px 5px;flex:none}
.rn2-ex-remove:hover{color:var(--verm);border-color:rgba(240,97,107,.3)}
.rn-par-tag{display:inline-flex;align-items:center;gap:6px;margin:2px 0 0 60px;font-size:10.5px;color:var(--ink3)}
.rn-par-tag b{width:14px;height:2px;border-radius:2px;background:var(--gold);opacity:.6}

/* células de valor — o toque troca o texto por <input> no lugar */
.rn-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.rn-cell{position:relative;border:1px solid var(--line2);background:rgba(255,255,255,.025);border-radius:10px 10px 10px 5px;padding:8px 10px;min-height:54px;display:flex;flex-direction:column-reverse;gap:1px;cursor:pointer;transition:border-color .18s var(--ease)}
.rn-cell:hover{border-color:var(--line)}
.rn-cell.focus,.rn-cell:has(.rn2-tap-input:focus){border-color:rgba(201,162,39,.55);box-shadow:0 0 0 1px rgba(201,162,39,.25)}
.rn-cell .v{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden}
.rn-cell .v.empty{color:var(--ink3);font-weight:400}
.rn-cell .l{font-size:8px;font-weight:500;letter-spacing:.13em;color:var(--ink3);text-transform:uppercase}
.rn-cell input{width:100%;background:none;border:0;padding:0;font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;border-radius:0}
.rn2-tap-input{caret-color:var(--gold2)}
.wkb-num-field{caret-color:var(--gold2);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* cola do porte: data-tap mora no VALOR — a célula inteira vira alvo;
   o ::after some durante a edição para o input receber o caret */
.rn-cell [data-tap]:not(:has(input))::after{content:'';position:absolute;inset:0}
.rn-name [data-tap]:not(:has(input))::after{content:'';position:absolute;inset:0}

/* cadência e RIR */
/* "+ Cadência e RIR" — botão de verdade, em dourado forte (ordem do dono 11/08:
   "cores mais fortes, como um botão mesmo, com o padrão oficial de cores").
   Fundo dourado preenchido + borda sólida #c9a227 (herói) + tinta #e2c25e.

   Duas travas, não uma:
   1) o seletor carrega `[data-more-toggle]` (0,2,1) em vez de ser só
      `.rn-more` (0,1,0). O clientsBundle injeta `.rn-more` no head e estilo
      injetado ganha do <link> por vir depois; a origem foi escopada lá, mas a
      especificidade aqui é a rede. O atributo também impede o caminho
      inverso: o `•••` de Alunos é `.rn-more` e NÃO pode herdar este dourado
      (medido em bancada — com `button.rn-more` ele herdava glow e padding).
   2) hex literal em vez de var(--gold2) — `css/styles.css` define
      --gold2:#B8832A (escuro) no mesmo :root global. Hoje montagem_v5 carrega
      depois e vence, mas a ordem das folhas não é contrato. */
button.rn-more[data-more-toggle]{position:relative;display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 15px;min-height:40px;font-size:12.5px;font-weight:600;color:#e2c25e;background:linear-gradient(180deg,rgba(201,162,39,.26),rgba(201,162,39,.13));border:1px solid #c9a227;border-radius:10px 10px 10px 5px;box-shadow:0 6px 16px -10px rgba(201,162,39,.85)}
button.rn-more[data-more-toggle]:hover{color:#0a0806;background:linear-gradient(180deg,#e2c25e,#c9a227);border-color:#e2c25e}
button.rn-more[data-more-toggle]:active{transform:translateY(1px)}
.rn-more-panel{display:none;margin-top:8px}
.rn-more-panel.open{display:grid;grid-template-columns:1fr 1fr;gap:8px;animation:rise .22s var(--ease) both}
.rn-more-panel .rnd-peso-check{grid-column:1/-1}
/* A instrução que o aluno lê (C-81, 19/08). Ocupa a largura inteira do
   painel: é texto corrido, não célula de número. Rótulo com a mesma voz dos
   outros campos do montador; o textarea herda a regra global do arquivo
   (`input,select,textarea` no topo), então nenhuma pele nova entra aqui. */
.rn-more-panel .rn-txt-full{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;margin-top:4px;font-size:11.5px;color:var(--ink3)}
.rn-more-panel .rn-txt-full textarea{min-height:52px;font-size:12.5px;color:var(--ink2)}
.rnd-peso-check{display:flex;align-items:center;gap:9px;margin-top:2px;min-height:34px;font-size:12.5px;color:var(--ink2);cursor:pointer}
.rnd-peso-check input{width:17px;height:17px;accent-color:#c9a227;padding:0}
.rn-peso{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.rn-peso input{width:17px;height:17px;accent-color:#c9a227;padding:0}
.rn-peso em{font-style:normal;color:var(--ink3);font-size:11.5px;font-variant-numeric:tabular-nums}

/* ── AVISO DE SAÚDE — 5 tons, observacional: informa, não alarma.
     A cor segue o papel: avaliar=limão · adiar=azul(tempo) · evitar=vermelho
     · adaptar=ciano(corpo) · indicado=verde. Sempre com a frase junto. ── */
.wkb-saude-badge{display:flex;align-items:flex-start;gap:9px;margin:10px 0 2px 60px;padding:10px 12px;border-radius:10px 10px 10px 5px;border:1px solid var(--line);background:rgba(255,255,255,.02);--sd:#fde047}
.wkb-saude-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:none;background:var(--sd);box-shadow:0 0 7px color-mix(in oklab,var(--sd) 55%,transparent)}
.wkb-saude-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.wkb-saude-frase{font-size:12.5px;font-weight:500;color:color-mix(in oklab,var(--sd) 78%,var(--ink))}
.wkb-saude-cond{font-size:11.5px;color:var(--ink2);text-wrap:pretty}
.wkb-saude-rel{color:var(--ink3)}
.wkb-saude-avaliar{--sd:#fde047;border-color:rgba(253,224,71,.22);background:rgba(253,224,71,.04)}
.wkb-saude-adiar{--sd:#5b8def;border-color:rgba(91,141,239,.25);background:rgba(91,141,239,.05)}
.wkb-saude-evitar{--sd:#f0616b;border-color:rgba(240,97,107,.26);background:rgba(240,97,107,.05)}
.wkb-saude-adaptar{--sd:#22d3ee;border-color:rgba(34,211,238,.22);background:rgba(34,211,238,.04)}
.wkb-saude-indicado{--sd:#3ddc97;border-color:rgba(61,220,151,.22);background:rgba(61,220,151,.04)}
/* peças da pele aprovada do aviso (seguem valendo) */
.wkb-saude-badge em{font-style:normal;color:var(--ink3)}
.wkb-saude-info{margin-left:auto;color:var(--ink3);font-size:11px;border:1px solid var(--line2);border-radius:6px 6px 6px 3px;width:20px;height:20px;display:grid;place-items:center;flex:none}
.wkb-saude-tip{display:none;margin:6px 0 2px 60px;padding:10px 12px;border:1px dashed rgba(238,231,218,.16);background:rgba(0,0,0,.25);border-radius:10px 10px 10px 5px;font-size:12px;color:var(--ink2);text-wrap:pretty}
.wkb-saude-tip.open{display:block}

/* ── TÉCNICA ── */
.wkb-tec-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;position:relative}
.wkb-tec-chip{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:1px dashed rgba(238,231,218,.22);border-radius:9px 9px 9px 4px;font-size:11.5px;color:var(--ink3);transition:color .18s var(--ease),border-color .18s var(--ease)}
.wkb-tec-chip:hover{color:var(--ink2);border-color:rgba(238,231,218,.34)}
/* com técnica aplicada (há pílulas ao lado), o chip veste dourado */
.wkb-tec-strip:has(.wkb-tec-pill) .wkb-tec-chip{border-style:solid;border-color:rgba(201,162,39,.35);background:rgba(201,162,39,.06);color:var(--gold2)}
.wkb-tec-caret{font-size:8.5px;opacity:.65;line-height:1}
.wkb-tec-pill{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:9px 9px 9px 4px;font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums;transition:all .18s var(--ease)}
.wkb-tec-pill:hover{border-color:rgba(255,255,255,.16);color:var(--ink)}
.wkb-tec-pill.on{border-color:rgba(201,162,39,.4);background:rgba(201,162,39,.07);color:var(--gold2)}
.wkb-tec-pill.add{border-style:dashed;border-color:rgba(238,231,218,.2);background:none;color:var(--ink3)}
.wkb-tec-pill.add:hover{color:var(--ink2)}
.wkb-tec-remove{position:relative;width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px 8px 8px 4px;color:var(--ink3);font-size:15px;line-height:1}
.wkb-tec-remove:hover{color:var(--verm);border-color:rgba(240,97,107,.3)}
.wkb-tec-info{position:relative;margin-left:auto;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:7px 7px 7px 3px;color:var(--ink3);font-size:10.5px}
.wkb-tec-info:hover{color:var(--gold2);border-color:rgba(201,162,39,.4)}
/* alvo de toque 44px sem inflar o visual: área de acerto invisível */
.wkb-tec-chip::before,.wkb-tec-pill::before,.wkb-tec-remove::before,.wkb-tec-info::before,.rn-metric-info::before,#wkbVolumeInteligenteInfoBtn::before,.rn-more::before{content:"";position:absolute;inset:-6px}
.wkb-tec-menu{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:30;min-width:230px;background:rgba(24,20,14,.97);border:1px solid var(--line);border-radius:12px 12px 12px 6px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.wkb-tec-menu.open{display:block;animation:rise .18s var(--ease) both}
.wkb-tec-menu button{display:block;width:100%;padding:10px 12px;border-radius:8px 8px 8px 4px;font-size:13px;color:var(--ink2)}
.wkb-tec-menu button:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.wkb-tec-menu small{display:block;font-size:10.5px;color:var(--ink3)}
.wkb-tec-menu button.wkb-tec-menu-cur{color:var(--gold2);background:rgba(201,162,39,.06)}
.wkb-tec-menu button.wkb-tec-menu-cur small{color:rgba(226,194,94,.55)}
.wkb-tec-menu button.hl{background:rgba(255,255,255,.05);color:var(--ink)}

/* ── BUSCA DENTRO DO CARTÃO (abre em fluxo, empurra o conteúdo) ── */
.wkb-exercise-results{display:none;margin-top:8px;border:1px solid var(--line);background:rgba(24,20,14,.97);border-radius:12px 12px 12px 6px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.wkb-exercise-results.open{display:block;animation:rise .18s var(--ease) both}
.wkb-exercise-result-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:10px 12px;border-radius:8px 8px 8px 4px;min-height:44px;justify-content:center}
.wkb-exercise-result-item:hover,.wkb-exercise-result-item.active{background:rgba(255,255,255,.05)}
.wkb-exercise-result-item .rt{font-weight:500;font-size:13.5px;color:var(--ink)}
.wkb-exercise-result-item .rm{font-size:11px;color:var(--ink3)}
.wkb-exercise-result-item .rs{font-size:10.5px}
.rs.tem{color:var(--verde)}
.rs.similar{color:var(--lemon)}
.rs.nao{color:var(--ink3)}
.wkb-mais-usados-btn{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:8px 12px;min-height:38px;border:1px solid var(--line);border-radius:10px 10px 10px 5px;color:var(--ink2);font-size:12px}
.wkb-mais-usados-btn:hover{color:var(--gold2);border-color:rgba(201,162,39,.35)}
.wkb-mais-usados-btn.active{color:var(--gold2);border-color:rgba(201,162,39,.4)}

/* ── C-357 (27/08): cards recolhíveis — cópia literal da rodada de Design,
   adaptada aos nomes reais de classe/id (o specimen supôs alguns diferentes
   dos que o app usa). Recolhido por padrão; o nome abre/fecha (toque curto)
   e segura apertado pra renomear (a busca de exercício que já existia). ── */
.rn-ex-barra{display:flex;align-items:center;gap:10px;padding:0 2px 10px}
.rn-ex-barra .cont{font-size:11px;color:var(--ink3);letter-spacing:.04em}
.rn-ex-barra .cont b{color:var(--ink2);font-weight:600}
.rn-ex-abrirtudo{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--ink2);font-family:inherit;font-size:11px;letter-spacing:.06em;padding:6px 11px;border-radius:11px;cursor:pointer}
.rn-ex-abrirtudo:hover{color:var(--ink);border-color:var(--line)}

.rn2-ex-card.is-open{border-color:rgba(201,162,39,.34)}
.rn2-ex-card.is-vazio{border-style:dashed;border-color:rgba(255,255,255,.16);background:rgba(0,0,0,.26)}
.rn2-ex-card.is-open .rn-num{color:var(--gold2)}
.rn-name .titulo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rn-name{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.rn-ex-resumo{display:block;font-size:11.5px;color:var(--ink3);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rn-ex-resumo .sep{color:var(--ink3);margin:0 2px}
.rn-ex-resumo .tec{color:var(--ciano);border:1px solid rgba(34,211,238,.28);border-radius:7px;padding:1px 6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-left:4px}
.rn-ex-resumo .falta{color:var(--ink3);border:1px dashed rgba(255,255,255,.16);background:rgba(0,0,0,.26);border-radius:7px;padding:1px 7px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}

.caret{display:inline-block;color:var(--ink3);font-size:11px;line-height:1;flex:none;pointer-events:none;transition:transform .22s var(--ease),color .22s var(--ease)}
.rn2-ex-card.is-open .caret{transform:rotate(180deg);color:var(--gold2)}
.rn2-ex-card.is-vazio .caret{visibility:hidden}

.rn-ex-drop{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
.rn2-ex-card.is-open .rn-ex-drop{grid-template-rows:1fr}
.rn-ex-drop-in{overflow:hidden;min-height:0}
.rn-ex-drop-pad{opacity:0;transform:translateY(-6px);transition:opacity .2s var(--ease) .04s,transform .24s var(--ease) .04s}
.rn2-ex-card.is-open .rn-ex-drop-pad{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rn-ex-drop,.rn-ex-drop-pad,.caret{transition:none!important}
}

/* ── FIM DA LISTA ── */
.rn-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;min-height:52px;border:1px dashed rgba(238,231,218,.2);background:rgba(0,0,0,.22);border-radius:13px 13px 13px 6px;color:var(--ink2);font-size:13.5px}
.rn-add:hover{color:var(--ink);border-color:rgba(238,231,218,.32)}
.rn-model-save{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);font-size:12.5px}
.rn-model-save:hover{color:var(--gold2);border-color:rgba(201,162,39,.4)}
.rn-empty{border:1px dashed rgba(238,231,218,.16);background:rgba(0,0,0,.25);border-radius:13px 13px 13px 6px;padding:18px 20px;margin-top:16px;font-size:12.5px;color:var(--ink3);text-wrap:pretty}
.rn-empty .t{font:500 16px 'Playfair Display',Georgia,serif;color:var(--ink2)}

/* ── BARRA INFERIOR (celular) ── */
#wkbBottomBarMobile{flex:none;display:none;margin:0;flex-direction:row;align-items:stretch;gap:8px;padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);border-top:1px solid var(--line);background:rgba(18,15,10,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#wkbBottomBarMobile.open{display:flex}
#wkbRevisarBtnMobile{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:48px;padding:0 13px;border:1px solid rgba(157,92,255,.4);color:var(--ia);border-radius:12px 12px 12px 6px;font-size:12.5px}
/* A PRÉVIA (13/08) — mesma família do Salvar: secundária, sem peso de gesto.
   Ela, o Salvar e o Modelo dividem o meio da barra; o Enviar continua maior
   (1.2) porque é o ato que tira a ficha da mão dele. Com TRÊS no meio (C-260,
   22/08 — "Modelo" ganhou porta no celular, que não tinha), 13px não cabia
   confortável; 12px é o que sobra em 375px sem quebrar linha. */
#wkbPreviewBtnMobile{flex:1;display:inline-flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--line);color:var(--ink2);border-radius:12px 12px 12px 6px;font-size:12px}
#wkbSaveBtnMobile{flex:1;display:inline-flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--line);color:var(--ink2);border-radius:12px 12px 12px 6px;font-size:12px}
#wkbSalvarModeloBtnMobile{flex:1;display:inline-flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--line);color:var(--ink2);border-radius:12px 12px 12px 6px;font-size:12px}
#wkbSendBtnMobile{flex:1.2;display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--gold);color:#0a0806;font-weight:500;border-radius:12px 12px 12px 6px}

/* ── TECLADO PRÓPRIO (mora no <body>, acima do overlay do montador) ── */
#wkbKeypad{position:fixed;left:0;right:0;bottom:0;z-index:9861;transform:translateY(105%);transition:transform .22s var(--ease);background:rgba(16,13,9,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 14px calc(env(safe-area-inset-bottom) + 12px)}
body.wkb-kb-open #wkbKeypad{transform:none}
/* ── FOLHA MODAL NO AR: NADA DO <body> DISPUTA COM ELA (C-152, 18/08) ──
   O cinto do JS: `hide()` resolve o teclado, mas o defeito e de PINTURA e
   `display:none` e imune a compositing. O overlay do montador e contexto de
   empilhamento proprio (z 9810), entao o z 9870 da `.wkb-sheet` NAO alcanca
   `#wkbKeypad` (9861), `.wkb-reps-suggest` (9862) nem `#rndOrdemPill` (9855)
   — que moram no <body>. Medido: com o teclado no ar, `elementFromPoint` no
   centro do "Enviar agora" devolvia `BUTTON.kb-k`. */
body.rnp-wkb-sheet-open #wkbKeypad,
body.rnp-wkb-sheet-open .wkb-reps-suggest,
body.rnp-wkb-sheet-open #rndOrdemPill{display:none}
/* E A BARRA DE BAIXO (C-152, mecanismo 3 — o print do dono, 18/08 21:12):
   #wkbBottomBarMobile tem backdrop-filter, e o quirk documentado em :432
   (peça com vidro pinta POR CIMA da folha no Safari, apesar do z menor)
   vale para ela também — ela ficou fora do conserto do seletor de aluno.
   No aparelho, os botões da folha (Ainda não / Enviar agora) ficavam ATRÁS
   da barra, e o "Enviar" dourado dela cai NO MESMO LUGAR do "Enviar agora":
   o professor tocava a barra achando que tocava a folha, e a folha só
   reabria. display:none é imune ao quirk — mesmo remédio de :439. */
body.rnp-wkb-sheet-open #wkbBottomBarMobile{display:none}
.kb-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:8px;max-width:430px;margin:0 auto}
.kb-k{height:52px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:11px 11px 11px 5px;font-weight:500;font-size:19px;font-variant-numeric:tabular-nums;color:var(--ink);text-align:center}
.kb-k:active{background:rgba(255,255,255,.09)}
.kb-k.sep{color:var(--gold2)}
.kb-back{grid-column:4;grid-row:1;color:var(--ink2)}
.kb-next{grid-column:4;grid-row:2/span 3;height:auto;background:var(--gold);border-color:var(--gold);color:#0a0806;font-size:14px;font-weight:500}
.kb-next:active{filter:brightness(1.1)}

/* ── FAIXA DE REPS SUGERIDAS (ancorada acima do teclado) ── */
.wkb-reps-suggest{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 270px);z-index:9862;display:none;gap:8px;justify-content:center;flex-wrap:wrap}
.wkb-reps-suggest.up.open{display:flex;animation:rise .18s var(--ease) both}
.wkb-reps-suggest button{min-width:48px;height:44px;display:grid;place-items:center;background:rgba(24,20,14,.97);border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.wkb-reps-suggest button:hover{border-color:rgba(201,162,39,.5);color:var(--gold2)}

/* ── FOLHAS (fundo escurecido + cartão que sobe; .open é o motor).
     Os blocos 11–12 moram no <body>, fora do overlay → z acima de tudo. ── */
.wkb-sheet{position:fixed;inset:0;z-index:9870;display:none;align-items:flex-end;justify-content:center;background:rgba(10,8,6,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wkb-sheet.open{display:flex}
/* O SELETOR DE ALUNO é OPACO (não folha translúcida): o backdrop de 72% deixava
   o header + a faixa Tempo/Volume vazarem por trás (título "De quem é este treino?"
   cortado) e a barra de rolagem do montador aparecia atrás (página fantasma). Fundo
   obsidiano cheio cobre tudo. As folhas enviar/modelo seguem translúcidas, intocadas. */
#wkbAlunoSheet{background:var(--bg)}
/* Com o seletor ABERTO: o header (.rn2-mobile-top) e a faixa Tempo/Volume
   (.rnd-ministrip) têm backdrop-filter e renderizam POR CIMA do seletor —
   apesar do z-index menor (quirk de compositing do backdrop-filter). Deixar o
   seletor opaco não resolve porque eles ficam ACIMA dele. display:none é imune:
   mata o vazamento (o título do seletor era clipado/borrado por eles) e a barra
   fantasma. E trava o rolo do montador atrás (senão a lateral sobe e desce). */
body.rnp-wkb-aluno-open .rn2-mobile-top,
body.rnp-wkb-aluno-open .rnd-ministrip{display:none}
body.rnp-wkb-aluno-open .wkb-body,
body.rnp-wkb-aluno-open #wkbBody{overflow:hidden}
.wkb-sheet-card{position:relative;width:100%;max-width:560px;max-height:86dvh;overflow:auto;background:rgba(24,20,14,.96);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom) + 18px);animation:rise .22s var(--ease) both}
.wkb-sheet-t{margin:2px 0 0;font:500 22px 'Playfair Display',Georgia,serif;text-wrap:pretty}
.wkb-sheet-s{font-size:12.5px;color:var(--ink2);margin-top:6px;text-wrap:pretty}
.wkb-sheet-actions{display:flex;gap:10px;margin-top:18px}
.wkb-cta{flex:1;display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--gold);color:#0a0806;font-weight:500;border-radius:12px 12px 12px 6px}
.wkb-ghost{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 18px;border:1px solid var(--line);color:var(--ink2);border-radius:12px 12px 12px 6px}
.wkb-sheet .eb{color:var(--gold)}

/* ═══ EXCLUIR TREINO (rodada Design 18/08) — 11 regras novas ═══ */
/* ── EXCLUIR TREINO — gatilho no pé do formulário do montador.
     Mesmo DOM nas duas peles; só renderiza com _builderEditingId. ── */
/* margin-bottom generoso de propósito: `#wkbBody{padding:...40px}` (v5:134)
   tem especificidade de ID e VENCE `.wkb-body.rn-has-bottom-bar{padding-
   bottom:28px+env()}` (v5:136, duas classes < um ID) — medido em 18/08,
   a barra mobile (RN IA·Prévia·Salvar·Enviar, ~68-92px com safe-area) cobria
   os últimos ~28px do formulário e nada ali era clicável, sem erro nenhum.
   O `.rnd-excluir` é o primeiro elemento que vive exatamente nesse fim de
   documento, por isso é quem revela o buraco — não é conserto do buraco em
   si (isso é escopo maior, viraria linha na tabela se afetar mais telas). */
.rnd-excluir{margin-top:26px;padding-top:16px;border-top:1px solid var(--line2);margin-bottom:calc(env(safe-area-inset-bottom) + 76px)}
.rnd-excluir button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:1px solid rgba(240,97,107,.22);color:var(--verm);font-size:13px;border-radius:12px 12px 12px 6px}
.rnd-excluir button:hover{border-color:rgba(240,97,107,.45)}
.rnd-excluir .i{width:15px;height:15px}

/* ── o irmão vermelho do .wkb-cta: só existe DENTRO de folha de excluir.
     Tinta #0a0806 sobre #f0616b = 6.3:1 (AA). ── */
.wkb-risco{flex:1;display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--verm);color:#0a0806;font-weight:500;border-radius:12px 12px 12px 6px}

/* ── o degrau destrutivo da folha das duas opções: abaixo do corte,
     texto pequeno, alvo de toque de 44px ── */
.wkb-devez{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);text-align:center}
.wkb-devez button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 12px;font-size:12.5px;color:var(--verm);text-align:center}
.wkb-devez .i{width:14px;height:14px}

/* ── eyebrow vermelho SÓ nas folhas 100% destrutivas; a das duas opções
     mantém o dourado da família ── */
#sheetExcluirRascunho .eb,#sheetExcluirDeVez .eb{color:var(--verm)}

/* ── HUB: excluir modelo — irmão discreto do .wkh-apply dourado ── */
.wkh-del{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border:1px solid rgba(240,97,107,.25);color:var(--verm);font-size:12.5px;border-radius:10px 10px 10px 5px}
.wkh-del:hover{border-color:rgba(240,97,107,.5)}
.wkh-del .i{width:14px;height:14px}
.wkh-risco{flex:1;display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--verm);color:#0a0806;font-weight:500;border-radius:12px 12px 12px 6px}

/* ── PORTAR DENTRO do @media(min-width:900px) do MONTADOR (v5 :545):
     no Mac o gatilho vira largura intrínseca e entra na coluna principal
     da .wkb-cols ── */
@media(min-width:900px){
  /* o respiro extra do mobile (a barra fixa embaixo) não existe no Mac — a
     ação fica na .wkb-head-actions do topo; sem isso, margin-bottom:76px+env()
     sobreviveria e deixaria um vão vazio enorme no fim do formulário Mac */
  .rnd-excluir{grid-column:1;margin-top:30px;margin-bottom:0}
  .rnd-excluir button{width:auto;padding:0 18px;height:44px;font-size:12.5px}
}

.wkb-sheet-card label{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.info-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line2);font-size:13px;color:var(--ink2)}
.info-row:first-of-type{border-top:0;margin-top:10px}
.info-row b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.info-row.total{border-top:1px solid var(--line);color:var(--ink)}
.info-note{margin-top:10px;font-size:11px;color:var(--ink3);text-wrap:pretty}
/* tempo estimado: o motor escreve nestas quatro linhas */
#wkbTempoEx,#wkbTempoTrans,#wkbTempoFatores,#wkbTempoDesc{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line2);font-size:13px;color:var(--ink2)}
#wkbTempoEx{border-top:0;margin-top:10px}
#wkbTempoEx:empty,#wkbTempoTrans:empty,#wkbTempoFatores:empty,#wkbTempoDesc:empty{display:none}
#wkbTempoEx b,#wkbTempoTrans b,#wkbTempoFatores b,#wkbTempoDesc b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* fechar discreto (folha do nível) */
#wkbNivelConfirmClose{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;border:1px solid transparent;border-radius:11px 11px 11px 5px;color:var(--ink3);font-size:18px}
#wkbNivelConfirmClose:hover{color:var(--ink);border-color:var(--line)}
/* folha do aluno: busca + recentes (lista pode ter 60 nomes de 40 caracteres) */
#wkbAlunoBusca{width:100%;margin-top:14px;min-height:46px}
#wkbAlunoRotulo{margin-top:16px}
#wkbAlunoChips{margin-top:10px}
/* estrutura da ficha */
.preset{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:12px 12px 12px 6px;margin-top:8px;transition:border-color .18s var(--ease)}
.preset:hover{border-color:var(--line)}
.preset.sel{border-color:rgba(226,194,94,.55);background:rgba(201,162,39,.06)}
.preset .pl{display:flex;gap:4px;flex-wrap:wrap}
.preset .pl b{min-width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(201,162,39,.35);border-radius:7px 7px 7px 3px;font-size:11px;font-weight:600;color:var(--gold2);padding:0 6px}
.preset .pn{font-size:13px;color:var(--ink2)}
.preset-custom{display:flex;gap:8px;margin-top:12px}
.preset-custom input{flex:1;min-width:0}
.preset-custom button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px 10px 10px 5px;color:var(--ink2);font-size:12.5px}
.preset-custom button:hover{color:var(--gold2);border-color:rgba(201,162,39,.4)}
/* revisão da RN IA — a única área roxa do app */
#wkbRevisaoOverlay .eb{color:var(--ia)}
[data-ai-suggestion]{display:flex;gap:10px;margin-top:12px;padding:12px 14px;border:1px solid rgba(157,92,255,.28);background:rgba(157,92,255,.06);border-radius:11px 11px 11px 5px;font-size:13px;color:var(--ink2);text-wrap:pretty}
[data-ai-suggestion]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ia);box-shadow:0 0 7px rgba(157,92,255,.5);margin-top:6px;flex:none}
.rev-item{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line2);font-size:13px;color:var(--ink2);text-wrap:pretty}
.rev-item:first-of-type{border-top:0;margin-top:8px}
.rev-item .i{color:var(--ia);width:14px;height:14px;margin-top:3px}
.rev-foot{margin-top:14px;font-size:11.5px;color:var(--ink3)}

/* ── TOASTS E PÍLULA DE ORDEM ── */
.wkb-toast{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);bottom:calc(env(safe-area-inset-bottom) + 90px);z-index:9880;background:rgba(24,20,14,.96);border:1px solid rgba(201,162,39,.4);color:var(--ink);font-size:12.5px;padding:12px 18px;border-radius:12px 12px 12px 6px;opacity:0;pointer-events:none;transition:all .22s var(--ease);max-width:86vw;text-align:center}
.wkb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* variante maior que o motor usa em mensagens longas — host a confirmar (memo) */
.wkb-toast.big,.wkh-toast.big{font-size:14px;padding:15px 22px;border-color:rgba(226,194,94,.55)}
#rndOrdemPill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 90px);z-index:9855;display:none;align-items:center;gap:12px;background:rgba(24,20,14,.97);border:1px solid var(--line);border-radius:12px 12px 12px 6px;padding:10px 14px;font-size:12.5px;color:var(--ink2);box-shadow:0 18px 40px rgba(0,0,0,.5)}
#rndOrdemPill.show{display:flex;animation:rise .22s var(--ease) both}
#rndOrdemPill button{color:var(--gold2);font-weight:500;min-height:34px;display:inline-flex;align-items:center}

/* ── ARRASTE — o motor cria os dois no <body> e escreve left/top no
     fantasma durante o gesto: posição NÃO se fixa aqui. ── */
.rnd-reorder-ghost{position:fixed;z-index:9860;display:none;width:min(84vw,420px);border:1px solid rgba(226,194,94,.5);background:rgba(28,23,15,.97);border-radius:14px 14px 14px 6px;padding:14px 16px;transform:rotate(-1.2deg);box-shadow:0 24px 60px rgba(0,0,0,.6);pointer-events:none;will-change:left,top}
.rnd-reorder-ghost .gname{font:500 17px 'Playfair Display',Georgia,serif}
.rnd-reorder-ghost .gmeta{font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums}
/* dedo parado: o fantasma assenta (endireita e acalma a sombra) */
.rnd-reorder-ghost.parado{transform:rotate(0);border-color:rgba(226,194,94,.75);box-shadow:0 14px 36px rgba(0,0,0,.5)}
.rnd-reorder-hud{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 12px);transform:translateX(-50%);z-index:9859;display:none;pointer-events:none}
.rnd-reorder-hud b{display:block;font:500 14px 'Playfair Display',Georgia,serif;color:var(--ink)}
.rnd-reorder-hud em{font-style:normal;color:var(--gold2)}
.rnd-reorder-hud-box{display:flex;align-items:baseline;gap:9px;background:rgba(24,20,14,.97);border:1px solid rgba(226,194,94,.45);border-radius:12px 12px 12px 6px;padding:10px 16px;box-shadow:0 18px 40px rgba(0,0,0,.55);animation:rise .18s var(--ease) both}
.rnd-reorder-hud-eye{font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);white-space:nowrap}
.rnd-reorder-hud-nome{font:500 14px 'Playfair Display',Georgia,serif;color:var(--ink);white-space:nowrap}
.rnd-reorder-hud-val{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* o buraco onde o cartão vai cair, e o lugar de onde ele saiu */
.rnd-reorder-alvo{border-style:dashed!important;border-color:rgba(238,231,218,.25)!important;background:rgba(0,0,0,.25)!important}
.rnd-reorder-alvo>*{opacity:.12}
.rnd-reorder-origem{opacity:.25}

/* ── arrastar a ABA de divisão (C-346-drag, 27/08) — mesmo motor de cima,
   eixo X. O fantasma clona a própria `.rn-tab` (já traz padding/tipografia
   dela); a moldura de `.rnd-reorder-ghost` (padding+cantos de CARTÃO) fica
   grande demais pra uma pílula — zera aqui, mantém só posição/sombra/giro. */
.rnd-reorder-ghost-pill{padding:0;border:none;background:none;box-shadow:0 10px 26px rgba(0,0,0,.5);border-radius:9px 9px 9px 4px}
.rnd-reorder-alvo-pill{border-radius:9px 9px 9px 4px}

/* ── MOVIMENTO ── */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── HUB ≥900 ── */
@media(min-width:900px){
.wkh-body{max-width:1180px;padding:0 48px 80px}
.wkh-top{padding-top:22px}
.wkh-h1{font-size:42px}
.wkh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px 40px;align-items:start;margin-top:8px}
.wkh-colA{min-width:0}.wkh-colB{min-width:0}
.wkh-ai{margin-top:22px}
.wkh-hero{margin-top:22px;padding:26px 24px}
.wkh-hero-t{font-size:24px}
.wkh-sec,.wkh-fichas-sec{margin-top:34px}
.wkh-sheet{align-items:center}
.wkh-sheet-card{border-radius:18px 18px 18px 8px;padding-bottom:20px}
.wkh-toast{bottom:auto;top:86px}
}

/* ── MONTADOR ≥900 (o Mac é a mesma estrutura em duas colunas) ── */
@media(min-width:900px){
.rn2-mobile-top{padding:14px 32px 12px}
#wkbMobileBackBtn{display:none}
#wkbCancelBtn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px 0 10px;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);font-size:12.5px}
#wkbCancelBtn:hover{color:var(--ink)}
.wkb-toptitle{text-align:left;margin-left:14px}
.wkb-topname,#wkbTopName{font-size:18px}
.wkb-head-actions{display:flex;gap:8px;align-items:center}
.wkb-head-actions .hbtn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 15px;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);font-size:12.5px}
.wkb-head-actions .hbtn:hover{color:var(--ink);border-color:rgba(255,255,255,.16)}
#wkbConsultAiBtn{color:var(--ia);border-color:rgba(157,92,255,.4)}
#wkbConsultAiBtn:hover{color:#b78aff;border-color:rgba(157,92,255,.6)}
.hbtn-send{background:var(--gold);border:0;color:#0a0806!important;font-weight:500}
.hbtn-send:hover{filter:brightness(1.08)}
#wkbClose{display:none}
.wkb-body,#wkbBody{padding:22px 32px 60px}
.wkb-body.rn-has-bottom-bar,body.rnp-wkb-bottombar-open .wkb-body{padding-bottom:60px}
.wkb-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0 26px;max-width:1280px;margin:0 auto;align-items:start}
.wkb-colmain{min-width:0;grid-column:1}
.rn-instruments{grid-column:2;grid-row:1/span 9;margin-top:0;position:sticky;top:0}
.rn-strip,.rn-tabs,.rn-block-label,.rn-panel,.wkb-error{grid-column:1}
.rn-tabs{max-width:520px}
.rn-metrics-rail{grid-template-columns:1fr 1fr;gap:10px}
.rn-metric .v{font-size:20px}
.wkb-vi{margin-top:12px}
.rn-cells{grid-template-columns:repeat(4,minmax(0,1fr))}
#wkbBottomBarMobile{display:none}
.wkb-reps-suggest{left:50%;right:auto;bottom:24px;transform:translateX(-50%)}
.wkb-sheet{align-items:center}
.wkb-sheet-card{border-radius:18px 18px 18px 8px;padding-bottom:20px;max-height:82vh}
.wkb-toast{bottom:auto;top:86px}
#rndOrdemPill{bottom:auto;top:86px}
.demo-dock{bottom:14px}
}

/* ══ DEMO — inerte no app: tudo abaixo depende de html.demo ou .demo-dock,
   que só o arquivo de demonstração cria. Pode portar junto sem efeito. ══ */
html.demo .rn-empty{display:none}
html.demo.demo-vazio .rn-empty{display:block}
html.demo.demo-vazio .rn-list,html.demo.demo-vazio .rn-model-save{display:none}
.demo-dock{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:9990;width:238px;max-width:calc(100vw - 24px);background:rgba(16,13,9,.97);border:1px solid rgba(201,162,39,.3);border-radius:14px 14px 14px 7px;box-shadow:0 22px 50px rgba(0,0,0,.65);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dd-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 14px}
.dd-head .eb{color:var(--gold)}
.dd-caret{color:var(--ink3);font-size:10px;transition:transform .18s var(--ease)}
.demo-dock.min .dd-caret{transform:rotate(180deg)}
.demo-dock.min .dd-body{display:none}
.dd-body{padding:0 12px 12px}
.dd-l{font-size:8.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:10px 2px 6px}
.dd-row{display:flex;gap:6px}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dd-b{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px 9px 9px 4px;color:var(--ink2);font-size:11.5px;flex:1;text-align:center;transition:all .15s var(--ease)}
.dd-b:hover{color:var(--ink);border-color:rgba(255,255,255,.16)}
.dd-b.on{background:var(--gold);border-color:var(--gold);color:#0a0806;font-weight:500}
.demo-dock select{width:100%;min-height:36px;padding:6px 30px 6px 10px;font-size:12px;border-radius:9px 9px 9px 4px}

/* ══ COLA DO PORTE — consertos pós-auditoria · 08/08/2026 (bugs liberados
   pelo dono). O motor emite DUAS coisas que o esqueleto não trouxe (erro do
   esqueleto, veio da demo): o marcador chama .wkb-vi-bar-marker (não
   .wkb-vi-mark) e a régua tem 5 zonas (…-limite e …-excesso). Regras abaixo
   usam SÓ valores da própria entrega: o marcador é cópia do .wkb-vi-mark;
   as zonas/rótulos usam os tokens --vz-limite/--vz-excesso e as cores
   z4/z5 da "leitura antiga" declaradas nesta folha. ══ */
.wkb-vi-bar-marker{position:absolute;top:-2.5px;bottom:-2.5px;width:3px;border-radius:2px;background:var(--vz-marker);box-shadow:0 0 8px rgba(240,215,137,.75);transform:translateX(-50%)}
.wkb-vi-bar-limite{background:rgba(232,134,46,.36)}
.wkb-vi-bar-excesso{background:rgba(240,97,107,.34)}
.wkb-vi-limite .wkb-vi-valor small{color:var(--vz-limite)}
.wkb-vi-excesso .wkb-vi-valor small{color:var(--vz-excesso)}

/* ══ COLA DO PORTE 2 — folha do aluno em TELA CHEIA · 09/08/2026 (ordem do
   dono: nomes ocultos até buscar; o quadro sobe até o topo; o último nome
   ficava inalcançável atrás da barra). Escopado a #wkbAlunoSheet — as outras
   folhas seguem com o desenho da entrega, intocado. ══ */
.wkb-aluno-head{display:flex;align-items:center;justify-content:space-between}
#wkbAlunoFechar{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);margin:-6px -6px 0 0;flex:none}
#wkbAlunoFechar:hover{color:var(--ink)}
/* A ‹ de VOLTAR do seletor (o canto esquerdo era uma div inerte — daí "a seta não
   funciona": o seletor cobre o header e o toque no ‹ do montador caía nesta head). */
#wkbAlunoVoltar{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);margin:-6px 0 0 -6px;flex:none}
#wkbAlunoVoltar:hover{color:var(--ink)}
@media(max-width:899px){
#wkbAlunoSheet{align-items:stretch}
#wkbAlunoSheet .wkb-sheet-card{max-width:none;max-height:none;border-radius:0;display:flex;flex-direction:column;padding-top:calc(env(safe-area-inset-top) + 14px)}
#wkbAlunoSheet #wkbAlunoRolo{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;align-content:flex-start;padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
}

/* ══ COLA DO PORTE 3 — o "?" do volume tomava a tela · 09/08/2026 ══
   A regra de alvo-de-toque da entrega dá um ::before{position:absolute;
   inset:-6px} a sete elementos. Seis são position:relative; o
   #wkbVolumeInteligenteInfoBtn ficou sem — então o pseudo se ancorava no
   primeiro pai posicionado (.wkb-panel, 375×812) e virava uma área de toque
   de TELA INTEIRA por cima de tudo que vem antes dele no DOM: abas, cartão
   do aluno e os medidores abriam a explicação do volume.
   Defeito latente na entrega (a regra existia sem host); só ficou alcançável
   quando o motor passou a emitir o botão, no monta11. Uma linha, mesmo
   idioma dos seis irmãos. ══ */
#wkbVolumeInteligenteInfoBtn{position:relative}


/* ══════════════════════════════════════════════════════════════════════
   RODADA COCKPIT · B — daqui pra baixo é o apêndice desta proposta.
   ══════════════════════════════════════════════════════════════════════ */

/* ── módulos do trilho na linguagem chart-card do app:
     filete de acento no topo + fundo tingido. A cor segue o papel:
     dourado = o agora (medidores) · azul = tempo (assessor) · roxo = RN IA.
     A régua de volume segue a peça mais colorida — o módulo dela fica neutro. ── */
.rn-metrics-rail{position:relative;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line2);border-radius:14px 14px 14px 7px;background:linear-gradient(165deg,rgba(201,162,39,.06),rgba(255,255,255,.012) 55%);overflow:hidden}
.rn-metrics-rail::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,var(--gold),var(--gold2) 55%,rgba(201,162,39,.12));z-index:1}
.rn-metric{border:0;background:none;border-radius:0;padding:12px 14px 10px;min-height:66px}
.rn-metric:nth-child(odd){border-right:1px solid var(--line2)}
.rn-metric:nth-child(n+3){border-top:1px solid var(--line2)}
.rn-metric .v{font-size:20px}
.rnd-assessor,.rnd-ia{position:relative;border:1px solid var(--line2);border-radius:14px 14px 14px 7px;padding:14px 16px 12px;overflow:hidden}
.rnd-assessor{background:linear-gradient(165deg,rgba(91,141,239,.06),rgba(255,255,255,.012) 55%)}
.rnd-assessor::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,var(--azul),rgba(91,141,239,.12))}
.rnd-as-head{display:flex;align-items:center;gap:8px}
.rnd-as-head .eb{color:var(--azul)}
/* ── ASSESSOR TÉCNICO — os fios que o motor ainda procura, religados:
     #rndAssessorTempo e #rndTempoEx/Trans/Fatores/Desc voltam a receber
     dado sem lógica nova. Vazio não quebra (linha some por :empty). ── */
.rnd-as-tempo{display:flex;align-items:baseline;gap:9px;margin-top:10px}
#rndAssessorTempo{font:500 30px/1 'Playfair Display',Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.rnd-as-tempo span{font-size:11px;color:var(--ink3)}
.rnd-as-rows{margin-top:6px}
#rndTempoEx,#rndTempoTrans,#rndTempoFatores,#rndTempoDesc{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink2)}
#rndTempoEx{border-top:0}
#rndTempoEx:empty,#rndTempoTrans:empty,#rndTempoFatores:empty,#rndTempoDesc:empty{display:none}
#rndTempoEx b,#rndTempoTrans b,#rndTempoFatores b,#rndTempoDesc b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rnd-as-note{margin-top:9px;font-size:10.5px;color:var(--ink3);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════════════
   PREVIEW DO MONTADOR — 27 regras que o workoutBundle.js injetava como
   <style id="wkPreviewStyle">. Mesmo CSS, uma regra por linha.

   ⚠️ A POSIÇÃO É O MOTIVO, e ela foi medida: `.wkb-preview-panel` (aqui) e
   `.wkb-rev-panel` (bloco RN IA, logo abaixo) têm a MESMA especificidade
   (0,1,0) e caem no MESMO elemento — o painel da proposta carrega as duas
   classes. Enquanto isto era injetado, entrava no head depois da folha e
   vencia: medido no CSSOM real, a borda em degradê da rodada virava
   rgba(255,255,255,.08) e o raio caía de 20px para 16px. A moldura sumia.
   Aqui, ordem de fonte resolve — e por isso este bloco NÃO pode descer
   para depois do RN IA.
   ══════════════════════════════════════════════════════════════════════ */
.wkb-preview-overlay{display:none;position:fixed;inset:0;z-index:10200;background:rgba(0,0,0,.6);align-items:center;justify-content:center;padding:20px;}
.wkb-preview-overlay.open{display:flex;}
.wkb-preview-panel{background:var(--bg3);border:1px solid var(--line);border-radius:16px;max-width:520px;width:100%;max-height:86vh;overflow-y:auto;color:var(--text);}
.wkb-preview-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);}
.wkb-preview-header h3{margin:0;font-size:16px;}
.wkb-preview-body{padding:16px 20px;}
.wkb-preview-label{margin:14px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold3);}
.wkb-preview-label:first-child{margin-top:0;}
.wkb-preview-body > p:not(.wkb-preview-label){margin:0;font-size:14px;color:var(--text);}
.wkb-preview-ex{padding:10px 0;border-bottom:1px solid var(--line);}
.wkb-preview-ex:last-child{border-bottom:0;}
.wkb-preview-ex strong{display:block;font-size:13px;color:var(--text);}
.wkb-preview-ex span{display:block;font-size:12px;color:var(--text3);margin-top:3px;}
.wkb-preview-ex small{display:block;font-size:11px;color:var(--text4);margin-top:3px;font-style:italic;}
.wkb-preview-empty{font-size:13px;color:var(--text4);font-style:italic;}
.wkb-preview-body a{color:var(--gold3);}
.wkb-preview-panel.wkb-preview-ficha{max-width:560px;}
.wkb-preview-ficha .wkb-preview-body{padding:16px 16px 20px;}
.wkb-preview-ficha .hero{padding:26px 22px 24px;margin-bottom:16px;}
.wkb-preview-ficha .hero-name{font-size:42px;}
.wkb-preview-ficha .restr{margin-bottom:18px;}
.wkb-preview-ficha .ex-banner{cursor:default;}
.wkb-preview-ficha .ex-metrics.wkb-metrics-4{grid-template-columns:1fr 1fr 1fr 1fr;}
.wkb-preview-ficha .metric-val{font-size:30px;}
.wkb-preview-ficha .ex-note{padding:9px 14px;font-size:11.5px;color:var(--text3);font-style:italic;background:var(--bg2);border-top:1px solid var(--line);}
.wkb-preview-tec{padding:7px 14px 0;}
.wkb-preview-tec span{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(212,175,55,.12);color:var(--gold3);text-transform:uppercase;letter-spacing:.05em;}

/* ══════════════════════════════════════════════════════════════════════
   RN IA — A PELE (rodada `rn_ia_visual`, visão C, entregue 20/08 pelo Design,
   portada 21/08). Copiada VERBATIM da seção 2 de
   docs/rodada_rn_ia_visual_2026-08-20_ENTREGA-CSS-visaoC.html — as seções 1 e 3
   daquele arquivo são palco de apresentação e não vêm.

   Substitui, além do bloco "RN IA — o copiloto" que morava aqui, os dois
   <style> que o workoutBundle.js injetava em document.head: #wkbRevisaoStyle
   (inteiro) e a PELE do #wkbMetodologiaStyle. Eles tinham de sair: style
   injetado entra no head DEPOIS da folha e, com a mesma especificidade,
   vencia — a pele nova ficaria invisível. É o mesmo mecanismo que escondeu a
   pele antiga em 08/08, e o memo da entrega pede exatamente esta mudança.
   Nenhum markup mudou; os 5 rótulos do copiloto encurtaram (custo declarado
   da visão C) e o sentido inteiro foi pro title de cada botão.
   ══════════════════════════════════════════════════════════════════════ */

/* ── tokens da identidade (todos já vivem no app hoje — nenhuma cor nova) ── */
:root{
  --rnia:#9d5cff;            /* o roxo do app — não muda */
  --rnia-tinta:#cba7ff;      /* tinta roxa legível (já vivia no wkbRevisaoStyle) */
  --rnia-eyebrow:#c7a6f5;    /* eyebrow roxo claro (idem) */
  --rnia-ouro:#c99652;       /* ouro do degradê (idem) */
  --rnia-luz:#f2d8aa;        /* a ponta de luz — só em degradê (idem) */
  --rnia-creme:#f5e7d1;      /* título (idem) */
  --rnia-areia:#d9ae83;      /* apoio quente (idem) */
  --rnia-papel-a:#151310;    /* papel da janela (idem) */
  --rnia-papel-b:#0b0a08;
}
/* o ângulo único que conduz os três estados da moldura.
   Safari 16.4+ / Chrome 85+; sem suporte, a moldura fica estática no descanso. */
@property --rnia-giro{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ── A MOLDURA — as duas janelas do RN IA (revisão/proposta e metodologia).
     Anel cônico com UM ponto de luz: creme no canto inferior-direito, roxo
     dominando o superior-esquerdo (a leitura de hoje, 125deg, preservada).
     Parado o ângulo ondula 22°; ao abrir dá uma volta e assenta; pensando
     orbita contínuo. Escopo por classe (.wkb-rev-panel) e por id de overlay
     (#wkbMetodologiaOverlay) — as janelinhas de info continuam como são. ── */
.wkb-rev-panel,
#wkbMetodologiaOverlay .wkb-preview-panel{
  position:relative;overflow:hidden;border-radius:20px;
  border:1.5px solid transparent;
  background:
    radial-gradient(90% 130% at 0% 0%,rgba(157,92,255,.15),transparent 46%) padding-box,
    radial-gradient(90% 130% at 100% 100%,rgba(217,174,131,.11),transparent 48%) padding-box,
    linear-gradient(180deg,var(--rnia-papel-a),var(--rnia-papel-b)) padding-box,
    conic-gradient(from var(--rnia-giro) at 50% 50%,
      rgba(157,92,255,.55) 0deg,
      var(--rnia-ouro) 96deg,
      var(--rnia-luz) 138deg,
      var(--rnia-ouro) 184deg,
      rgba(157,92,255,.62) 262deg,
      var(--rnia) 318deg,
      rgba(157,92,255,.55) 360deg) border-box;
  box-shadow:0 0 26px rgba(157,92,255,.20),0 20px 55px rgba(0,0,0,.6);
  animation:
    rniaEntra .34s var(--ease) both,
    rniaAcende 1.05s cubic-bezier(.22,.61,.36,1) both,
    rniaRespira 7.5s ease-in-out 1.05s infinite,
    rniaOndula 11s ease-in-out 1.05s infinite;
}
/* a luz interna deriva devagar — aurora atrás do conteúdo, nunca sobre texto claro */
.wkb-rev-panel::before,
#wkbMetodologiaOverlay .wkb-preview-panel::before{
  content:'';position:absolute;inset:-40% -20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 38% at 22% 18%,rgba(157,92,255,.13),transparent 70%),
    radial-gradient(40% 34% at 82% 86%,rgba(217,174,131,.10),transparent 70%);
  animation:rniaDeriva 13s ease-in-out infinite alternate;
}
/* pensando: o ponto de luz orbita a moldura; a respiração acelera junto */
.wkb-rev-panel:has(.wkb-revisao-loading),
#wkbMetodologiaOverlay .wkb-preview-panel:has(.wkb-revisao-loading){
  animation:
    rniaEntra .34s var(--ease) both,
    rniaPensa 2.4s linear infinite,
    rniaRespira 2.4s ease-in-out infinite;
}
@keyframes rniaEntra{from{opacity:0;transform:scale(.965) translateY(10px)}to{opacity:1;transform:none}}
@keyframes rniaAcende{from{--rnia-giro:-300deg}to{--rnia-giro:0deg}}
@keyframes rniaOndula{0%,100%{--rnia-giro:0deg}50%{--rnia-giro:22deg}}
@keyframes rniaPensa{from{--rnia-giro:0deg}to{--rnia-giro:360deg}}
@keyframes rniaDeriva{from{transform:translate3d(-2.5%,-2%,0)}to{transform:translate3d(2.5%,2.5%,0)}}
@keyframes rniaRespira{
  0%,100%{box-shadow:0 0 26px rgba(157,92,255,.20),0 20px 55px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 44px rgba(157,92,255,.32),0 0 80px rgba(201,162,39,.10),0 20px 55px rgba(0,0,0,.6)}}

/* rolagem interna das janelas RN IA: barra fina e quente, nunca a clara do
   sistema (mesmo vocabulário do .wkb-lista-rolo do app) */
.wkb-rev-body,#wkbMetodologiaOverlay .wkb-preview-body{scrollbar-width:thin;scrollbar-color:rgba(157,92,255,.28) transparent}
.wkb-rev-body::-webkit-scrollbar,#wkbMetodologiaOverlay .wkb-preview-body::-webkit-scrollbar{width:7px}
.wkb-rev-body::-webkit-scrollbar-track,#wkbMetodologiaOverlay .wkb-preview-body::-webkit-scrollbar-track{background:transparent}
.wkb-rev-body::-webkit-scrollbar-thumb,#wkbMetodologiaOverlay .wkb-preview-body::-webkit-scrollbar-thumb{background:rgba(157,92,255,.25);border-radius:4px}
.wkb-rev-body::-webkit-scrollbar-thumb:hover,#wkbMetodologiaOverlay .wkb-preview-body::-webkit-scrollbar-thumb:hover{background:rgba(157,92,255,.45)}

/* backdrop das duas janelas: obsidiana + blur (família das folhas do app).
   Se o quirk de compositing do Safari (C-152) aparecer, cair pra fundo opaco. */
#wkbRevisaoOverlay,#wkbMetodologiaOverlay{background:rgba(10,8,6,.7);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}

/* ── O SELO — hexágono "RN" com aro em degradê roxo→ouro. Assina as três
     superfícies. Construção em pseudos: nada de markup novo. ── */
.wkb-rev-head{display:flex;align-items:center;gap:11px;padding:16px 18px 12px;position:relative;z-index:1}
.wkb-rev-mark{position:relative;z-index:0;width:36px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--rnia-luz);font:600 13px 'Playfair Display',Georgia,serif;letter-spacing:-.04em;
  filter:drop-shadow(0 0 9px rgba(157,92,255,.35))}
.wkb-rev-mark::after{content:'';position:absolute;inset:0;z-index:-2;
  clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
  background:linear-gradient(140deg,var(--rnia) 6%,var(--rnia-ouro) 58%,var(--rnia-luz) 94%)}
.wkb-rev-mark::before{content:'';position:absolute;inset:1.4px;z-index:-1;
  clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
  background:linear-gradient(155deg,#221c13,#0d0b09 70%)}

/* ── A VOZ — eyebrow roxo ACIMA, título na serifa do app em itálico.
     O HTML segue título→sub; o column-reverse inverte só no visual. ── */
.wkb-rev-titles{flex:1;min-width:0;display:flex;flex-direction:column-reverse;gap:3px}
.wkb-rev-title{color:var(--rnia-creme);font:italic 600 21px/1.08 'Playfair Display',Georgia,serif;letter-spacing:.005em}
.wkb-rev-sub{color:var(--rnia-eyebrow);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}

.wkb-rev-close{position:relative;width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(157,92,255,.30);border-radius:10px 10px 10px 5px;background:rgba(157,92,255,.07);
  color:var(--rnia-tinta);font-size:13px;cursor:pointer;transition:all .18s var(--ease)}
.wkb-rev-close:hover{color:var(--rnia-creme);border-color:rgba(157,92,255,.55);background:rgba(157,92,255,.13)}
.wkb-rev-close::before{content:'';position:absolute;inset:-7px}

/* ── corpo das janelas ── */
.wkb-rev-body{position:relative;z-index:1;padding:2px 18px 18px;max-height:64vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wkb-rev-section{display:flex;align-items:center;gap:8px;color:var(--rnia-eyebrow);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;margin:16px 0 7px}
.wkb-rev-section::before{content:'';width:14px;height:1.5px;border-radius:1px;flex:none;
  background:linear-gradient(90deg,var(--rnia),rgba(157,92,255,0))}
.wkb-rev-section:first-child{margin-top:8px}
.wkb-rev-list{margin:0;padding:0;list-style:none}
.wkb-rev-list li{position:relative;font-size:13px;line-height:1.55;color:#ede3d3;margin:7px 0;padding-left:19px}
.wkb-rev-list li::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--rnia);box-shadow:0 0 7px rgba(157,92,255,.8)}
.wkb-rev-p{font-size:13px;line-height:1.55;color:#ede3d3;margin:7px 0}
.wkb-rev-b{color:#fff;font-weight:600}

/* a nota de rascunho — itálico + fio TRACEJADO: o vocabulário de "não é
   definitivo" que o app já fala. Vale pras três superfícies. */
.wkb-revisao-note,.wkb-metod-note{margin:16px 0 0;padding:11px 0 0;border-top:1px dashed rgba(238,231,218,.17);
  font-size:11px;font-style:italic;color:var(--ink2);line-height:1.5;text-wrap:pretty}

/* pensando: shimmer honesto no texto (espera, nunca barra falsa) */
.wkb-revisao-loading{padding:34px 6px 30px;text-align:center;font:italic 500 14px 'Playfair Display',Georgia,serif;
  color:transparent;background:linear-gradient(95deg,rgba(203,167,255,.45) 22%,var(--rnia-luz) 40%,var(--rnia-tinta) 52%,rgba(203,167,255,.45) 68%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  animation:rniaVarre 1.9s linear infinite}
@keyframes rniaVarre{from{background-position:220% 0}to{background-position:-120% 0}}
.wkb-revisao-err{font-size:12.5px;color:var(--verm);padding:12px 2px}

/* ── PROPOSTA — fichas e exercícios. Decisão continua dourada. ── */
.wkb-prop-topo{display:flex;justify-content:flex-end;margin:12px 0}
.wkb-prop-usar-todas{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;
  border:1px solid rgba(201,162,39,.45);border-radius:10px 10px 10px 5px;background:rgba(201,162,39,.07);
  color:var(--gold2);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .18s var(--ease)}
.wkb-prop-usar-todas:hover{border-color:var(--gold2);background:rgba(201,162,39,.12)}
.wkb-prop-usar-todas:disabled{border-color:var(--line);color:var(--ink3);background:none;cursor:default}
.wkb-prop-ficha{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018);
  border-radius:13px 13px 13px 6px;padding:12px 14px;margin:12px 0}
.wkb-prop-ficha-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.wkb-prop-ficha-head b{font:500 15.5px 'Playfair Display',Georgia,serif;color:var(--rnia-creme);letter-spacing:.01em}
/* O tempo estimado da divisão contra o alvo (rodada tempo_alvo_seletor,
   23/08) — dourado quando bate a faixa, âmbar-atenção quando não bate
   (o app nunca finge que bateu quando não bateu). */
.wkb-prop-tempo{font-size:12px;font-weight:500;color:var(--gold2);white-space:nowrap;font-variant-numeric:tabular-nums}
.wkb-prop-tempo .rm{font-size:11px;font-weight:400;color:var(--ink3)}
.wkb-prop-tempo-fora{color:var(--lemon)}
.wkb-prop-tempo-fora .rm{color:var(--ink2)}
.wkb-prop-usar{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;
  background:var(--gold);border:0;border-radius:9px 9px 9px 4px;color:#0a0806;font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:filter .18s var(--ease)}
.wkb-prop-usar:hover{filter:brightness(1.1)}
.wkb-prop-usar::before{content:'';position:absolute;inset:-6px}
.wkb-prop-usar:disabled{background:rgba(255,255,255,.06);color:var(--ink3);filter:none;cursor:default}
.wkb-prop-ex{padding:9px 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px;color:#ede3d3}
.wkb-prop-ficha-head + .wkb-prop-ex{border-top:0}
.wkb-prop-ex b{font-weight:500;color:var(--ink)}
.wkb-prop-ex .rm{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums}
/* a observação da IA (o segundo .rm) fala em itálico — voz de rascunho */
.wkb-prop-ex .rm + .rm{font-style:italic;color:var(--ink2);font-variant-numeric:normal}
.wkb-preview-empty{font-size:12.5px;color:var(--ink3);margin:8px 0}

/* avisos de CATÁLOGO e SAÚDE — cores de status byte a byte, nunca roxo.
   Só ganharam o canto do app e o ponto luminoso (ícone+rótulo). */
.wkb-prop-aviso{display:inline-flex;align-items:center;gap:6px;margin:7px 6px 0 0;font-size:10.5px;font-weight:500;
  letter-spacing:.03em;padding:3px 9px 3px 8px;border-radius:8px 8px 8px 4px;border:1px solid;font-style:normal}
.wkb-prop-aviso::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;flex:none}
.wkb-prop-aviso-catalogo{color:#F0A25A;background:rgba(230,125,45,.10);border-color:rgba(230,125,45,.35)}
.wkb-prop-aviso-saude{color:#F6C65B;background:rgba(246,198,91,.08);border-color:rgba(246,198,91,.32)}

/* ── MINHA METODOLOGIA — a mesma moldura; dentro, o professor no comando:
     seleção ativa e Salvar continuam dourados. Foco de campo acende roxo
     (dentro das janelas RN IA, quem está ouvindo é a IA). ── */
#wkbMetodologiaOverlay .wkb-preview-panel{display:flex;flex-direction:column;max-height:86vh}
#wkbMetodologiaOverlay .wkb-preview-header{display:flex;align-items:center;gap:11px;padding:16px 18px 12px;border-bottom:0;position:relative;z-index:1}
#wkbMetodologiaOverlay .wkb-preview-header h3{position:relative;flex:1;margin:0;padding:1px 0 0 47px;min-height:36px;
  display:flex;flex-direction:column;justify-content:center;
  color:var(--rnia-creme);font:italic 600 20px/1.1 'Playfair Display',Georgia,serif}
#wkbMetodologiaOverlay .wkb-preview-header h3::before{content:'';position:absolute;left:0;top:calc(50% - 17px);width:36px;height:34px;
  clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
  background:linear-gradient(140deg,var(--rnia) 6%,var(--rnia-ouro) 58%,var(--rnia-luz) 94%);
  filter:drop-shadow(0 0 8px rgba(157,92,255,.3))}
#wkbMetodologiaOverlay .wkb-preview-header h3::after{content:'RN';position:absolute;left:1.4px;top:calc(50% - 15.6px);width:33.2px;height:31.2px;
  clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
  background:linear-gradient(155deg,#221c13,#0d0b09 70%);
  display:flex;align-items:center;justify-content:center;
  color:var(--rnia-luz);font:600 12.5px 'Playfair Display',Georgia,serif;letter-spacing:-.04em;font-style:normal}
#wkbMetodologiaOverlay .wkb-close{position:relative;width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(157,92,255,.30);border-radius:10px 10px 10px 5px;background:rgba(157,92,255,.07);
  color:var(--rnia-tinta);font-size:13px;cursor:pointer;transition:all .18s var(--ease)}
#wkbMetodologiaOverlay .wkb-close:hover{color:var(--rnia-creme);border-color:rgba(157,92,255,.55);background:rgba(157,92,255,.13)}
#wkbMetodologiaOverlay .wkb-close::before{content:'';position:absolute;inset:-7px}
#wkbMetodologiaOverlay .wkb-preview-body{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:4px 18px 18px}
#wkbMetodologiaOverlay .wkb-field{margin-top:15px}
#wkbMetodologiaOverlay .wkb-field>label{display:block;font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:7px}
#wkbMetodologiaOverlay select,
#wkbMetodologiaOverlay input[type="search"],
#wkbMetodologiaOverlay textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
  border-radius:10px 10px 10px 5px;color:var(--ink);font-size:13.5px;padding:10px 12px;min-height:44px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
#wkbMetodologiaOverlay select:focus,
#wkbMetodologiaOverlay input[type="search"]:focus,
#wkbMetodologiaOverlay textarea:focus{outline:none;border-color:rgba(157,92,255,.55);
  box-shadow:0 0 0 1px rgba(157,92,255,.25),0 0 16px rgba(157,92,255,.12)}
#wkbMetodologiaOverlay .wkb-student-chips{display:flex;flex-wrap:wrap;gap:7px}
#wkbMetodologiaOverlay .wkb-student-chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 13px;
  border:1px solid rgba(255,255,255,.10);border-radius:10px 10px 10px 5px;background:rgba(255,255,255,.02);
  color:var(--ink2);font:inherit;font-size:12.5px;cursor:pointer;transition:all .18s var(--ease)}
#wkbMetodologiaOverlay .wkb-student-chip:hover{color:var(--ink);border-color:rgba(255,255,255,.18)}
#wkbMetodologiaOverlay .wkb-student-chip.active{border-color:rgba(201,162,39,.55);background:rgba(201,162,39,.08);color:var(--gold2)}
#wkbMetodologiaOverlay .wkb-student-chip button{border:0;background:transparent;color:inherit;cursor:pointer;
  font-size:13px;line-height:1;padding:2px;opacity:.7}
#wkbMetodologiaOverlay .wkb-student-chip button:hover{opacity:1}
.wkb-metod-busca{position:relative;margin-top:0}
.wkb-metod-resultados{position:absolute;left:0;right:0;top:100%;margin-top:5px;z-index:5;display:none;
  background:rgba(24,20,14,.97);border:1px solid rgba(157,92,255,.25);border-radius:12px 12px 12px 6px;
  max-height:220px;overflow-y:auto;padding:5px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.wkb-metod-resultados.open{display:block;animation:rise .18s var(--ease) both}
.wkb-metod-resultados button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px 8px 8px 4px;
  background:transparent;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer}
.wkb-metod-resultados button:hover{background:rgba(157,92,255,.10);color:var(--ink)}
.wkb-metod-selecionados{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
#wkbMetodologiaOverlay .wkb-metod-actions{display:flex;justify-content:flex-end;margin-top:18px}
#wkbMetodologiaOverlay .wkb-metod-save{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;
  background:var(--gold);color:#0a0806;border:0;border-radius:12px 12px 12px 6px;font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:filter .18s var(--ease)}
#wkbMetodologiaOverlay .wkb-metod-save:hover{filter:brightness(1.08)}

/* ── O COPILOTO NA FICHA — módulo do trilho: mais quieto que as janelas.
     A vida dele é o filete (a luz viaja devagar) e o ponto da leitura. ── */
.rnd-ia{position:relative;border:1px solid rgba(157,92,255,.20);border-radius:14px 14px 14px 7px;
  padding:14px 16px 12px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(157,92,255,.10),transparent 55%),
    radial-gradient(90% 70% at 100% 100%,rgba(201,150,82,.05),transparent 60%),
    linear-gradient(165deg,rgba(255,255,255,.015),rgba(255,255,255,.008))}
.rnd-ia::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(157,92,255,.15),var(--rnia) 22%,var(--rnia-ouro) 55%,var(--rnia-luz) 72%,rgba(201,150,82,.15));
  background-size:190% 100%;animation:rniaFilete 8.5s ease-in-out infinite}
@keyframes rniaFilete{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.rnd-ia:has(.rnd-ia-note:not(:empty)){border-color:rgba(157,92,255,.30)}
.rnd-ia-head{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.rnd-ia-head .eb{display:inline-flex;align-items:center;gap:7px;color:var(--rnia-eyebrow);font-size:9px;letter-spacing:.17em}
.rnd-ia-head .eb::before{content:'';width:9px;height:9px;flex:none;
  clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
  background:linear-gradient(140deg,var(--rnia),var(--gold2))}
/* ⚙ e 📚 entram no fluxo do cabeçalho (position:static mata o right:32px
   inline) e são amansados com grayscale. O certo: trocar as duas strings
   por SVG de traço do app — uma linha de JS; fica pedido no memo. */
.rnd-ia-head .rn-metric-info{position:static;width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(157,92,255,.22);border-radius:9px 9px 9px 4px;background:rgba(10,8,6,.3);
  color:var(--ink3);font-size:12px;filter:grayscale(1);opacity:.72;transition:all .18s var(--ease)}
.rnd-ia-head .rn-metric-info:hover{opacity:1;color:var(--rnia-tinta);border-color:rgba(157,92,255,.45)}
.rnd-ia-head button.rn-metric-info:first-of-type{margin-left:auto}
.rnd-ia-note{position:relative;z-index:1;display:flex;gap:10px;margin-top:11px;font-size:12.5px;color:var(--ink2);text-wrap:pretty}
.rnd-ia-note:empty{display:none}
.rnd-ia-note::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rnia);margin-top:6px;flex:none;
  animation:rniaPulso 3s var(--ease) infinite}
@keyframes rniaPulso{0%,100%{box-shadow:0 0 6px rgba(157,92,255,.45)}50%{box-shadow:0 0 13px rgba(157,92,255,.9)}}
.rnd-ia-note b{color:var(--ink);font-weight:500}
.rnd-ia-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px;position:relative;z-index:1}
/* grade 2×2 de larguras iguais, composta em largura cheia — família do wkb-student-chip: compacto, raio assimétrico; borda em degradê direcional */
.rnd-ia-actions button{display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px;padding:8px 12px;
  border:1px solid transparent;border-radius:10px 10px 10px 5px;color:var(--ink2);font:inherit;font-size:12.5px;
  cursor:pointer;transition:color .18s var(--ease),filter .18s var(--ease);
  background:linear-gradient(180deg,rgba(12,10,8,.55),rgba(12,10,8,.35)) padding-box,
             linear-gradient(120deg,rgba(157,92,255,.34),rgba(157,92,255,.10) 55%,rgba(201,150,82,.16)) border-box}
.rnd-ia-actions button:hover{color:var(--ink);
  background:linear-gradient(180deg,rgba(14,11,9,.6),rgba(14,11,9,.4)) padding-box,
             linear-gradient(120deg,rgba(157,92,255,.75),rgba(201,150,82,.45) 60%,rgba(242,216,170,.55)) border-box}
.rnd-ia-actions button:active{filter:brightness(1.2)}
/* a ação composta (gera a ficha inteira) fala meio tom acima — mesmo roxo, nunca ouro */
.rnd-ia-actions button[data-rnd-ia="gerar-metodologia"]{grid-column:1/-1;color:var(--rnia-tinta);
  background:linear-gradient(180deg,rgba(157,92,255,.12),rgba(157,92,255,.05)) padding-box,
             linear-gradient(120deg,rgba(157,92,255,.55),rgba(157,92,255,.22) 55%,rgba(201,150,82,.3)) border-box}
.rnd-ia-actions button[data-rnd-ia="gerar-metodologia"]:hover{color:var(--rnia-creme)}
/* piso de toque do app no mobile */
@media(max-width:640px){.rnd-ia-actions button{min-height:44px}}
.rnd-ia-foot{position:relative;z-index:1;margin-top:10px;font-size:10.5px;font-style:italic;color:var(--ink3)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ── MINI-HUD do celular — tempo e volume sempre à vista enquanto monta.
     Fios religados: #rndMiniTempo e #rndMiniVolume. ── */
.rnd-ministrip{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:8px 16px 9px;background:rgba(16,13,9,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.rnd-ministrip .seg{display:flex;align-items:baseline;gap:7px}
.rnd-ministrip .l{font-size:8px;font-weight:500;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.rnd-ministrip b{font:500 15px 'Playfair Display',Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.rnd-ministrip .sep{width:1px;height:16px;background:var(--line2)}
.rnd-ministrip .tick{margin-left:auto;width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(201,162,39,.2),#e2c25e);box-shadow:0 0 8px rgba(226,194,94,.5)}
@media(min-width:900px){.rnd-ministrip{display:none}}

/* ── HUB — a pergunta respondida numa frase; silêncio é um estado desenhado ── */
.rnd-hub-pulse{position:relative;margin-top:16px;border:1px solid var(--line2);background:linear-gradient(165deg,rgba(201,162,39,.05),rgba(255,255,255,.012) 55%);border-radius:14px 14px 14px 7px;padding:13px 16px 12px;overflow:hidden}
.rnd-hub-pulse::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,var(--gold),rgba(201,162,39,.1))}
.rnd-hub-pulse .eb{color:var(--gold);display:flex;align-items:center;gap:8px}
.rnd-hub-pulse .eb::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px rgba(226,194,94,.7)}
#rndHubPulse{margin:7px 0 0;font:500 16px/1.4 'Playfair Display',Georgia,serif;color:var(--ink);text-wrap:pretty}
#rndHubPulse b{color:var(--gold2);font-weight:500}
.rnd-hub-pulse .quieto{color:var(--ink2)}
/* ── ORDEM DAS PEÇAS — celular: a lista de exercícios sobe;
     os instrumentos empilham DEPOIS dela (o celular não regride:
     nada some, muda de andar). display:contents solta as peças do
     aside para a coluna, sem tocar no DOM. ── */
@media(max-width:899px){
.wkb-cols{display:flex;flex-direction:column}
.rn-instruments{display:contents}
.wkb-error{order:0}
.rn-strip{order:1}
.rn-tabs{order:2}
.rn-panel{order:3}
.rn-metrics-rail{order:4}
.wkb-vi{order:5}
.rnd-assessor{order:6}
.rnd-ia{order:7}
.rnd-excluir{order:8} /* último — depois do copiloto, pé de verdade do formulário */
#wkbSummaryCount,#wkbSummaryStudent{order:98}
.rn-metrics-rail,.wkb-vi,.rnd-assessor,.rnd-ia,.rnd-pico{margin-top:14px}
}

/* ── MAC ≥900 — trilho direito vira PAINEL (400px), preso na rolagem ── */
@media(min-width:900px){
.wkb-cols{grid-template-columns:minmax(0,1fr) 400px;gap:0 28px}
#wkbBottomBarMobile.open{display:none}   /* no Mac as ações moram no topo */
.wkb-error{grid-column:1;grid-row:1}
.rn-strip{grid-column:1;grid-row:2}
.rn-tabs{grid-column:1;grid-row:3}
.rn-panel{grid-column:1;grid-row:4}
.rn-instruments{grid-row:2/span 3}
.rn-instruments{grid-column:2;position:sticky;top:12px;align-self:start;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.rn-instruments>*{margin-top:0}
.wkb-vi{margin-top:0}
}
/* ── DEMO (inerte no app: depende de html.demo) ── */
html.demo.demo-vazio .wkb-vi-row{display:none}
html.demo.demo-vazio .wkb-vi-empty{display:block}
html.demo.demo-vazio .rnd-ia-note{display:none}


/* ══════════════════════════════════════════════════════════════════════
   COLA DO PORTE — 09/08/2026. Tudo acima é a proposta B, byte a byte.
   Aqui vão só as DUAS peças que o dono pediu da proposta A, cada uma na
   mesma posição em que estava lá.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 · A RÉGUA DE MEDIDORES DA A, NO CELULAR — pedido do dono.
   As quatro regras abaixo são CÓPIA LITERAL de cockpit_A_heranca.css
   (base + o par de ordem do @media dela). Na A a régua vem ANTES da lista
   (order 4 contra 5 do painel) e são quatro cartões soltos; na B ela desceu
   pra depois da lista e virou um bloco 2x2 único. Volta o layout e a posição
   da A. No Mac nada muda: lá a B já mostra o cluster com o filete, e o
   trilho é fixo — o partido dela continua valendo. */
@media(max-width:899px){
.rn-metrics-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rn-metric{position:relative;border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:11px 11px 11px 5px;padding:10px 12px 9px;min-height:64px;display:flex;flex-direction:column-reverse;gap:2px}
.rn-metric .l{font-size:8px;font-weight:500;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.rn-metric .v{font:500 17px 'Playfair Display',Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
/* Estes DOIS números são os únicos que não pude copiar literal: na A a
   sequência é 4/5, mas na B a caixa de volume já ocupa o 5 — copiar os
   números da A criava EMPATE e jogava o volume por grupo pra cima da lista
   (defeito real, visto no teste do dono em 09/08). Os valores mudam; o
   resultado é o mesmo que na A: medidores ANTES da lista. */
.rn-metrics-rail{order:3}
.rn-panel{order:4}
  /* O ASSESSOR ANDA COM O PROFESSOR — ideia do dono (09/08):
     "abaixo de cada exercício a ser inserido por último… a cada novo
     exercício o assessor já vai pra baixo dele, assim o professor sempre
     tem uma visão geral do treino que está montando".
     Exercício novo entra no FIM da lista, então logo depois da lista é
     logo abaixo do que ele está preenchendo. Sobe na frente do volume
     por grupo, que passa a vir depois. */
  .rnd-assessor{order:5}
  .wkb-vi{order:6}
  /* as três abaixo são MINHAS, e só desfazem o que a B fez no mesmo alvo —
     sem elas o cluster da B (borda única + filete + divisórias internas)
     continuaria por cima da cópia acima. */
  .rn-metrics-rail{position:static;border:0;background:none;padding:0;border-radius:0}
  .rn-metrics-rail::before{display:none}
  .rn-metric:nth-child(odd),.rn-metric:nth-child(n+3){border:1px solid var(--line2)}
}

/* 2 · AS TRÊS PLACAS DE STATUS DO HUB, DA A — pedido do dono.
   Mesma posição da A: logo abaixo do subtítulo, antes da grade.
   Regras copiadas verbatim de cockpit_A_heranca.css. */
/* Os três tokens abaixo são da proposta A (fios dourados + papel quente).
   Ficam ESCOPADOS ao quadro para não vazarem na linguagem da B. */
.rnd-hub-board{--hair:rgba(201,162,39,.24);--hair2:rgba(201,162,39,.13);--paper:#0f0c08;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
/* ── PEÇA 1 da rodada 13/08 (Design): os 3 stats lado a lado no celular ──
   Verbatim do painel <pre> da entrega montagem-stats-e-busca-standalone.
   Antes o celular empilhava (grid 1fr); agora três botões lado a lado,
   menores, com caret dourado via ::after (HTML intocado). Desktop não
   regride — tudo vive dentro deste media query. */
@media(max-width:899px){
  .rnd-hub-board{grid-template-columns:repeat(3,1fr);gap:7px}
  .rnd-hub-plate{min-height:72px;padding:9px 9px 8px;gap:6px;
    flex-direction:column-reverse;
    border-color:rgba(201,162,39,.18);
    background:linear-gradient(180deg,#131009,#0d0b08)}
  .rnd-hub-plate b{font-size:23px}
  .rnd-hub-plate .l{font-size:8px;letter-spacing:.1em;
    line-height:1.32;text-wrap:balance;min-height:21px}
  .rnd-hub-plate::after{content:'›';position:absolute;
    right:8px;bottom:6px;font:400 13px/1 Georgia,serif;
    color:rgba(201,162,39,.5)}
  .rnd-hub-plate:active{background:rgba(201,162,39,.10);
    border-color:rgba(201,162,39,.46)}
}
.rnd-hub-plate{position:relative;border:1px solid var(--hair2);background:var(--paper);border-radius:12px 12px 12px 6px;padding:11px 13px 10px;display:flex;flex-direction:column-reverse;gap:2px;min-height:64px;transition:border-color .18s var(--ease);cursor:pointer}
.rnd-hub-plate:hover{border-color:var(--hair)}
.rnd-hub-plate b{font:500 22px/1 'Playfair Display',Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.rnd-hub-plate .l{font-size:8.5px;font-weight:500;letter-spacing:.13em;color:var(--ink3);text-transform:uppercase}
.rnd-hub-plate.atencao b{color:var(--gold2)}
.rnd-hub-plate .tag{position:absolute;top:9px;right:11px;font-size:9px;letter-spacing:.1em;color:var(--gold2);text-transform:uppercase}

/* ── PEÇA 2 da rodada 13/08 (Design): "Buscar aluno" vira lista seletora ──
   Bloco .wkb-lista verbatim do painel <pre> da entrega; as peças internas
   (pastilha, nome, meta, pé) reinterpretadas do seletor da agenda que o
   Design referenciou. Traduções necessárias (a var não existe na Montagem):
   --gold-soft → --gold2 · --font-ui → inherit. */
.wkb-aluno-dica{font-size:12px;color:var(--ink2);margin:6px 0 0}
.wkb-lista{border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:rgba(255,255,255,.014);margin-top:12px}
.wkb-lista-topo{display:flex;align-items:center;gap:9px;
  padding:11px 12px;border-bottom:1px solid var(--line)}
.wkb-lista-topo .lupa{width:16px;height:16px;flex:none}
.wkb-busca{flex:1;min-width:0;border:0;background:transparent;outline:none;
  color:var(--ink);font:inherit;font-size:14px;padding:2px 0}
.wkb-busca::placeholder{color:var(--ink3)}
.wkb-lista-cont{flex:none;font-size:10px;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.wkb-lista-rolo{max-height:236px;overflow-y:auto;padding:5px}
.wkb-lista-rolo::-webkit-scrollbar{width:0}
.wkb-aluno{display:flex;align-items:center;gap:11px;
  width:100%;padding:11px 10px;border:1px solid transparent;
  background:transparent;border-radius:11px;text-align:left;cursor:pointer}
.wkb-aluno .p{width:9px;height:9px;border-radius:50%;flex:none}
.wkb-aluno .n{flex:1;min-width:0;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkb-aluno .meta{flex:none;font-size:11.5px;color:var(--ink3)}
.wkb-aluno.on{background:rgba(201,162,39,.10);border-color:rgba(201,162,39,.34)}
.wkb-aluno.on .n{color:var(--gold2)}
.wkb-lista-vazio{padding:16px 10px;font-size:13px;color:var(--ink3)}
.wkb-lista-pe{padding:6px 5px 8px;border-top:1px solid var(--line)}
.wkb-aluno-novo{display:flex;align-items:center;gap:11px;width:100%;padding:11px 10px;
  border:0;background:transparent;border-radius:11px;text-align:left;cursor:pointer;color:var(--ink2)}
.wkb-aluno-novo .ic{width:16px;height:16px;flex:none}
.wkb-aluno-novo small{color:var(--ink3);font-size:11px;margin-left:4px}

/* ══════════════════════════════════════════════════════════════════════
   ORGANIZAÇÃO DO MONTADOR (rodada `organizacao_montador`, entregue e portada
   em 21/08). CSS copiado VERBATIM da seção 2 de
   docs/rodada_organizacao_montador_2026-08-21_ENTREGA-CSS.html — as seções 1
   e 3 daquele arquivo são palco e não vêm.

   Puramente ADITIVO: prefixo `rno-`, e nenhuma classe do app é renomeada ou
   alterada. Conferido antes de colar: zero ocorrências de `rno-` no projeto.
   ⚠️ Sozinho este bloco não pinta nada — o markup que o usa é construído pelo
   motor (workoutBundle.js) e vem no porte seguinte. CSS aqui sem markup lá é
   fio solto conhecido; está declarado no commit, não esquecido.
   ══════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   2 · CSS COLÁVEL — rodada organizacao_montador (21/08/2026). PORTAR ESTE
       BLOCO. Só acrescenta: nenhuma classe do app é renomeada ou alterada.
       Prefixo rno-. Reusa do app: .wkb-sheet-card, .wkb-aluno-head,
       .wkb-sheet-t, .wkb-aluno-dica, .wkb-lista*, .wkh-swatch, .eb, tokens.
       Pares dashed reusados como estão: rn-add (clicável) e wkh-empty
       (informativo) — nenhum valor quase-igual novo.
   ════════════════════════════════════════════════════════════════════════ */

/* ── A PORTA · passo 2 — "de onde parte?" (vive dentro do #wkbAlunoSheet,
     mesma folha do passo 1; o motor troca o miolo) ── */
.rno-op{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;margin-top:8px;text-align:left;transition:border-color .18s var(--ease),background .18s var(--ease)}
.rno-op:hover{border-color:var(--line)}
.rno-op:active{border-color:rgba(226,194,94,.55);background:rgba(201,162,39,.05)}
.rno-ic{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px 10px 10px 5px;color:var(--gold2);flex:none}
.rno-tx{flex:1;min-width:0}
.rno-t{display:block;font:500 15px 'Playfair Display',Georgia,serif;color:var(--ink)}
.rno-m{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;text-wrap:pretty;font-variant-numeric:tabular-nums}
.rno-op .i-arrow{color:var(--ink3);flex:none}
/* rascunho é clicável e "não definitivo": o par dashed do .rn-add, como está */
.rno-op-rasc{border-style:dashed;border-color:rgba(238,231,218,.2);background:rgba(0,0,0,.22)}
.rno-op-rasc:hover{border-color:rgba(238,231,218,.32)}
/* a etiqueta "no ar" — dourado é o agora; nunca cor de status */
.rno-tag{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 8px;border:1px solid rgba(201,162,39,.4);border-radius:7px 7px 7px 3px;font:500 9px Jost,'Avenir Next',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);vertical-align:3px;white-space:nowrap}
.rno-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold2);box-shadow:0 0 6px rgba(226,194,94,.8)}
.rno-sec{display:flex;align-items:center;gap:10px;margin:18px 2px 2px}
.rno-sec span{font-size:9.5px;font-weight:500;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;white-space:nowrap}
.rno-sec::after{content:'';flex:1;height:1px;background:var(--line2)}
/* informativo (não clicável): o par do .wkh-empty, como está */
.rno-vazio{margin-top:8px;padding:12px 14px;border:1px dashed rgba(238,231,218,.16);background:rgba(0,0,0,.25);border-radius:10px 10px 10px 5px;font-size:12px;color:var(--ink3);text-wrap:pretty}
.rno-foot{margin-top:18px;padding-top:12px;border-top:1px dashed rgba(238,231,218,.17);font-size:11px;font-style:italic;color:var(--ink3);text-wrap:pretty}
/* letras da ficha de outro aluno (família do .preset .pl b) */
.rno-letras{display:flex;gap:5px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.rno-letras b{min-width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(201,162,39,.35);border-radius:7px 7px 7px 3px;font-size:10.5px;font-weight:600;color:var(--gold2);padding:0 5px}
.rno-letras b.off{border-color:var(--line);color:var(--ink3)}

/* ── A CASA · cartão da pessoa — ficha no ar E rascunho juntos ── */
.rno-pessoa{border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;margin-top:10px;overflow:hidden;transition:border-color .18s var(--ease)}
.rno-pessoa:hover{border-color:var(--line)}
.rno-pessoa-ficha{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:13px 16px;text-align:left}
.rno-pessoa-ficha .i-arrow{margin-left:auto;color:var(--ink3)}
.rno-pessoa-rasc{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:10px 16px 11px;border-top:1px dashed rgba(238,231,218,.17);color:var(--ink3);font-size:11.5px;font-style:italic;text-align:left;transition:color .18s var(--ease)}
.rno-pessoa-rasc:hover{color:var(--ink2)}
.rno-pessoa-rasc b{font-style:normal;font-weight:500;color:var(--ink2)}
.rno-pessoa-rasc .i{width:13px;height:13px}
.rno-pessoa-rasc .i-arrow{margin-left:auto}
/* meta de toda peça guardada: o que o app já sabe, mostrado (nunca cobrado) */
.rno-meta{display:block;font-size:11px;color:var(--ink3);margin-top:3px;font-variant-numeric:tabular-nums}

/* ── A FOLHA DOS RASCUNHOS — a plaquinha passa a dizer a verdade (C-206) ── */
.rno-rasc-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;border:1px dashed rgba(238,231,218,.2);background:rgba(0,0,0,.22);border-radius:12px 12px 12px 6px;margin-top:8px;text-align:left;transition:border-color .18s var(--ease)}
.rno-rasc-row:hover{border-color:rgba(238,231,218,.32)}
.rno-rasc-row .i-arrow{margin-left:auto;color:var(--ink3)}
/* rascunho sem dono: pastilha vazada — "ainda sem dono", sem alarme */
.rno-swatch-vago{width:7px;height:26px;border-radius:4px;border:1px dashed rgba(238,231,218,.35);flex:none}

/* ── DENTRO DO MONTADOR · a linha de estado (acrescenta ao fim do .rn-strip;
     resolve "não dá pra saber o que estou editando") ── */
.rno-status{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding-top:11px;border-top:1px dashed rgba(238,231,218,.17);font-size:12px;color:var(--ink2);text-wrap:pretty}
.rno-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink3);margin-top:6px;flex:none}
.rno-status em{font-style:italic;color:var(--ink3)}
.rno-status b{font-weight:500;color:var(--ink)}
.rno-status-noar{border-top-style:solid;border-top-color:rgba(201,162,39,.28)}
.rno-status-noar::before{background:var(--gold2);box-shadow:0 0 7px rgba(226,194,94,.7)}
.rno-status-noar b{color:var(--gold2)}

/* ── A CAPA DA FICHA (rodada a_ficha_como_coisa + complemento os_nomes,
     22/08) — envolve o #rnoStatus que já existia; o divisor dele agora mora
     aqui, um nível acima ── */
.fic-capa{margin-top:12px;padding-top:11px;border-top:1px dashed rgba(238,231,218,.17)}
.fic-capa .rno-status{margin-top:7px;padding-top:0;border-top:0}
.fic-capa-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fic-capa-top .eb{letter-spacing:.16em}
.fic-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;min-height:20px;border:1px dashed rgba(238,231,218,.25);border-radius:7px 7px 7px 3px;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.fic-capa.noar{border-top-style:solid;border-top-color:rgba(201,162,39,.28)}
.fic-capa.noar .fic-tag{border:1px solid rgba(201,162,39,.4);color:var(--gold2)}
.fic-capa.noar .fic-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold2);box-shadow:0 0 6px rgba(226,194,94,.8)}
.fic-nome-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.fic-nome{display:flex;align-items:center;gap:8px;min-height:32px}
.fic-nome b{font:500 18px 'Playfair Display',Georgia,serif;color:var(--ink);letter-spacing:.005em}
.fic-nome .i{width:13px;height:13px;color:var(--ink3)}
.fic-nome .vago{color:var(--ink3)}
.fic-met{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border:1px solid var(--line);border-radius:7px 7px 7px 3px;font-size:10.5px;letter-spacing:.04em;color:var(--ink2);flex:none}
.fic-met.vago{border-style:dashed;color:var(--ink3)}
/* o toque no nome vira input ali mesmo — #wkbNome já é o campo; isto só
   estiliza o estado dormente (título) e o ativo (edição) do MESMO input. */
#wkbNome.fic-nome-input{background:none;border:0;padding:0;font:500 18px 'Playfair Display',Georgia,serif;color:var(--ink);letter-spacing:.005em;min-height:32px;width:100%}
#wkbNome.fic-nome-input::placeholder{color:var(--ink3);font-weight:500}
#wkbNome.fic-nome-input:focus{outline:0;background:rgba(0,0,0,.25);border:1px solid rgba(201,162,39,.4);border-radius:11px 11px 11px 5px;padding:0 12px;min-height:40px}

/* ── NOME DA DIVISÃO (novo campo — o #wkbNome de ontem, descido para o
     painel da letra, com o rótulo certo) ── */
.fic-divnome{margin-top:14px}
.fic-divnome .eb{display:block;margin:0 2px 6px}
.fic-divnome-row{display:flex;gap:8px}
.fic-divnome-row input{flex:1;min-width:0;min-height:44px;padding:0 13px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink);font-size:14px}
.fic-divnome-row input::placeholder{color:var(--ink3)}
.fic-grupo{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);font-size:12.5px;flex:none}
/* `#rnBlockLabel` já tinha estilo próprio (eyebrow dourado, maiúsculo) de
   quando era uma linha sozinha acima da lista; aqui vira o texto do chip —
   precisa vencer a especificidade do id, senão o texto sai gritando. */
.fic-grupo #rnBlockLabel{font-size:12.5px;font-weight:400;letter-spacing:0;color:inherit;text-transform:none}

/* ── O SELETOR DE METODOLOGIA (folha leve, mesmo padrão de .wkb-sheet-*) ── */
.fic-met-op{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:11px 14px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;margin-top:8px}
.fic-met-op .t{flex:1;min-width:0;font-size:13.5px;color:var(--ink)}
.fic-met-op.sel{border-color:rgba(226,194,94,.55);background:rgba(201,162,39,.05);color:var(--gold2)}

/* ── O RESTANTE DA RODADA a_ficha_como_coisa (22/08) — a estante, a leitura,
     modo limpar, confirmação em lote, tamanho do modelo. Fonte:
     ENTREGA-CSS-a_ficha_como_coisa.html (16:05), telas 04-09 e 12. Valores
     copiados, não interpretados; classes novas com o prefixo fic-. ── */

/* a linha "anteriores" no cartão da pessoa — irmã de .rno-pessoa-rasc */
.rno-pessoa-sub{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 16px;border-top:1px dashed rgba(238,231,218,.14);font-size:12px;color:var(--ink2);text-align:left}
.rno-pessoa-sub .i{width:14px;height:14px;color:var(--ink3)}
.rno-pessoa-sub b{font-weight:500;color:var(--ink)}
.rno-pessoa-sub .i-arrow{margin-left:auto;color:var(--ink3)}

/* ── A ESTANTE — linha do tempo das fichas de uma pessoa ── */
.fic-tl{position:relative;padding-left:20px;margin-top:12px}
.fic-tl::before{content:'';position:absolute;left:6px;top:18px;bottom:16px;width:1px;background:var(--line2)}
.fic-hist{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:58px;padding:11px 13px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;margin-top:8px;text-align:left}
.fic-hist::before{content:'';position:absolute;left:-17.5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink3)}
.fic-hist .tx{flex:1;min-width:0}
.fic-hist .t{display:block;font:500 14.5px 'Playfair Display',Georgia,serif;color:var(--ink2)}
.fic-hist .t.vago{color:var(--ink3)}
.fic-hist .m{display:block;font-size:11px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums;text-wrap:pretty}
.fic-hist.noar .t{color:var(--ink)}
.fic-hist.noar{border-color:rgba(201,162,39,.28);background:linear-gradient(165deg,rgba(201,162,39,.05),rgba(255,255,255,.012) 60%)}
.fic-hist.noar::before{background:var(--gold2);box-shadow:0 0 7px rgba(226,194,94,.7)}
.fic-limpar{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px 9px 9px 4px;color:var(--ink3);font-size:11.5px}
/* modo limpar: seleção em ouro; o perigo mora só no botão */
.fic-check{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px 7px 7px 3px;color:transparent;flex:none}
.fic-hist.sel{border-color:rgba(226,194,94,.55);background:rgba(201,162,39,.05)}
.fic-hist.sel .fic-check{border-color:var(--gold2);color:var(--gold2)}
.fic-hist.fora{opacity:.42}
.fic-hist .nota{font-size:9.5px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;flex:none}

/* ── A LEITURA — ficha antiga, só leitura; tela própria (não folha) ── */
/* ⚠️ GOTCHA medido: `.wkb-overlay` fica SEMPRE `display:flex` (o CSS inline
   de `_injectBuilderCSS` vence o `display:none` deste arquivo por ordem de
   fonte) — quem esconde o Hub/Builder fechados é o `.wkb-panel` deslocado
   com `translateY(100%)` a partir da BORDA DE BAIXO (bottom-sheet). A
   leitura tem layout próprio (tela cheia no celular, painel CENTRALIZADO no
   Mac) — `translateY` a partir do centro não sai da tela por igual nos dois
   layouts, então esconder aqui é por `display:none`, com o seletor por ID
   (mais específico que a classe) vencendo o `display:flex` genérico. */
#wkFichaLeituraOverlay{z-index:9890;display:none}
#wkFichaLeituraOverlay.open{display:flex}
.fic-le-stage{min-height:100%}
.fic-le-top{display:flex;align-items:center;gap:12px;padding:14px 16px 0}
.fic-le-top .volta{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px 11px 11px 5px;color:var(--ink2);flex:none}
.fic-le-head{padding:12px 16px 0}
.fic-le-head h2{margin:2px 0 0;font:500 24px 'Playfair Display',Georgia,serif}
.fic-le-head .m{font-size:12px;color:var(--ink2);margin-top:4px;font-variant-numeric:tabular-nums;text-wrap:pretty}
.fic-le-aviso{display:flex;align-items:center;gap:9px;margin:14px 16px 0;padding:10px 13px;border:1px dashed rgba(238,231,218,.16);background:rgba(0,0,0,.26);border-radius:10px 10px 10px 5px;font-size:12px;color:var(--ink2)}
.fic-le-aviso::before{content:'';width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink3);flex:none}
.fic-le-tabs{display:flex;gap:6px;margin:16px 16px 0;flex-wrap:wrap}
.fic-le-tabs b{min-width:40px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px 9px 9px 4px;font-size:12.5px;font-weight:600;color:var(--ink3);cursor:pointer}
.fic-le-tabs b.on{border-color:rgba(201,162,39,.5);color:var(--gold2);background:rgba(201,162,39,.07)}
.fic-le-div{margin:16px 16px 0;font-size:12.5px;color:var(--ink2)}
.fic-le-div b{font:500 15px 'Playfair Display',Georgia,serif;color:var(--ink)}
.fic-lex{margin:10px 16px 0;border:1px solid var(--line2);border-radius:13px 13px 13px 6px;overflow:hidden}
.fic-lex-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line2);font-size:13px}
.fic-lex-row:first-child{border-top:0}
.fic-lex-row .e{min-width:0;color:var(--ink)}
.fic-lex-row .v{color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}
.fic-le-acoes{margin:18px 16px 0}
/* ⚠️ ADAPTAÇÃO ESTRUTURAL, não de design: a entrega desenhou a leitura no Mac
   como demo estático (.mac-le-stage/.mac-le-card, sem media query — o palco
   da entrega não tem breakpoint de verdade). Aqui ela entra no MESMO
   mecanismo responsivo que .wkh-sheet/.wkb-sheet já usam (@media min-width:
   900px), com os valores da entrega copiados para dentro dele — mesmo
   resultado visual, sem inventar um segundo sistema de breakpoint. */
@media(min-width:900px){
  .fic-le-stage{display:flex;align-items:center;justify-content:center;min-height:100vh;background:rgba(10,8,6,.78);padding:40px 0}
  .fic-le-card{width:640px;background:rgba(24,20,14,.96);border:1px solid var(--line);border-radius:18px 18px 18px 8px;padding:6px 4px 20px;box-shadow:0 24px 54px -28px rgba(0,0,0,.8);max-height:86vh;overflow-y:auto}
}

/* ── escolha do tamanho do modelo (duas linhas-rádio) ── */
.fic-op{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;border:1px solid var(--line2);background:rgba(255,255,255,.02);border-radius:13px 13px 13px 6px;margin-top:8px;text-align:left}
.fic-op .rad{width:20px;height:20px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:none}
.fic-op .rad i{width:9px;height:9px;border-radius:50%;background:transparent}
.fic-op.sel{border-color:rgba(226,194,94,.55);background:rgba(201,162,39,.05)}
.fic-op.sel .rad{border-color:var(--gold2)}
.fic-op.sel .rad i{background:var(--gold2);box-shadow:0 0 6px rgba(226,194,94,.7)}
.fic-op .tx{flex:1;min-width:0}
.fic-op .t{display:block;font:500 14.5px 'Playfair Display',Georgia,serif}
.fic-op .m{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums}


/* ════════════════════════════════════════════════════════════════════
   A METODOLOGIA VIRA OPÇÃO — `.rnm-*` (rodada 24/08, porte literal)
   Entrega: ~/Downloads/entrega_metodologia_do_professor_2026-08-24.html

   Cópia VERBATIM do bloco da entrega, com uma única subtração declarada:
   os três `@keyframes` (rniaOndula/rniaDeriva/rniaRespira) NÃO vieram —
   eles já existem neste arquivo, no bloco "RN IA — A PELE", e duas cópias
   da mesma animação são duas versões dela esperando divergir.

   A gramática é: `.rnm-q` = tema (`rnm-q-eb`) · pergunta (`rnm-q-ask`) ·
   opções (`rnm-opts`/`rnm-opt`) · o que muda (`rnm-muda`). Pergunta nova é
   MAIS UM `.rnm-q` — nada além disso. O `.rnm-opt.def` (tracejado) é o
   padrão que a IA usa enquanto o professor não respondeu: é por isso que
   nenhuma pergunta bloqueia e a tela nunca fica "pendente".
   ════════════════════════════════════════════════════════════════════ */
.rnm-panel{position:relative;overflow:hidden;width:100%;max-width:640px;border-radius:20px;border:1.5px solid transparent;
  background:
    radial-gradient(90% 130% at 0% 0%,rgba(157,92,255,.15),transparent 46%) padding-box,
    radial-gradient(90% 130% at 100% 100%,rgba(217,174,131,.11),transparent 48%) padding-box,
    linear-gradient(180deg,var(--rnia-papel-a),var(--rnia-papel-b)) padding-box,
    conic-gradient(from var(--rnia-giro) at 50% 50%,rgba(157,92,255,.55) 0deg,var(--rnia-ouro) 96deg,var(--rnia-luz) 138deg,var(--rnia-ouro) 184deg,rgba(157,92,255,.62) 262deg,var(--rnia) 318deg,rgba(157,92,255,.55) 360deg) border-box;
  box-shadow:0 0 26px rgba(157,92,255,.20),0 20px 55px rgba(0,0,0,.6);
  animation:rniaRespira 7.5s ease-in-out infinite,rniaOndula 11s ease-in-out infinite}
.rnm-panel::before{content:'';position:absolute;inset:-40% -20%;z-index:0;pointer-events:none;
  background:radial-gradient(46% 38% at 22% 18%,rgba(157,92,255,.13),transparent 70%),radial-gradient(40% 34% at 82% 86%,rgba(217,174,131,.10),transparent 70%);
  animation:rniaDeriva 13s ease-in-out infinite alternate}

/* cabeçalho: selo + eyebrow ACIMA do título (column-reverse, como na pele) */
.rnm-head{display:flex;align-items:center;gap:11px;padding:16px 18px 10px;position:relative;z-index:1}
.rnm-mark{position:relative;z-index:0;width:36px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--rnia-luz);font:600 13px 'Playfair Display',Georgia,serif;letter-spacing:-.04em;filter:drop-shadow(0 0 9px rgba(157,92,255,.35))}
.rnm-mark::after{content:'';position:absolute;inset:0;z-index:-2;clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);background:linear-gradient(140deg,var(--rnia) 6%,var(--rnia-ouro) 58%,var(--rnia-luz) 94%)}
.rnm-mark::before{content:'';position:absolute;inset:1.4px;z-index:-1;clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);background:linear-gradient(155deg,#221c13,#0d0b09 70%)}
.rnm-titles{flex:1;min-width:0;display:flex;flex-direction:column-reverse;gap:3px}
.rnm-title{margin:0;color:var(--rnia-creme);font:italic 600 20px/1.1 'Playfair Display',Georgia,serif;letter-spacing:.005em}
.rnm-sub{color:var(--rnia-eyebrow);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.rnm-close{position:relative;width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid rgba(157,92,255,.30);border-radius:10px 10px 10px 5px;background:rgba(157,92,255,.07);color:var(--rnia-tinta);font-size:13px;transition:all .18s var(--ease)}
.rnm-close:hover{color:var(--rnia-creme);border-color:rgba(157,92,255,.55);background:rgba(157,92,255,.13)}
.rnm-close::before{content:'';position:absolute;inset:-7px}

/* o placar — é ele que faz a tela "terminável" e recebe as novas */
.rnm-placar{position:relative;z-index:1;padding:0 18px 2px;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;line-height:1.5;text-wrap:pretty}
.rnm-placar b{color:var(--gold2);font-weight:500}
.rnm-placar .nv{color:var(--rnia-eyebrow);font-style:normal}

.rnm-body{position:relative;z-index:1;padding:2px 18px 18px}
.rnm-section{display:flex;align-items:center;gap:8px;color:var(--rnia-eyebrow);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:16px 0 3px}
.rnm-section::before{content:'';width:14px;height:1.5px;border-radius:1px;flex:none;background:linear-gradient(90deg,var(--rnia),rgba(157,92,255,0))}
.rnm-section:first-child{margin-top:8px}

/* ── A GRAMÁTICA: tema · pergunta · opções · o que muda ──
   Pergunta nova = mais um .rnm-q. Nada além disso. */
.rnm-q{padding:12px 0 13px;border-bottom:1px solid var(--line2)}
.rnm-q:last-of-type{border-bottom:0}
.rnm-q-eb{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.rnm-nova{color:var(--rnia-eyebrow);border:1px solid rgba(157,92,255,.32);border-radius:5px 5px 5px 3px;padding:1px 6px;font-size:8.5px;letter-spacing:.14em;background:rgba(157,92,255,.07)}
.rnm-q-ask{margin:4px 0 9px;font-size:14px;font-weight:500;color:#ede3d3;text-wrap:pretty}
.rnm-opts{display:flex;flex-wrap:wrap;gap:7px}
.rnm-opt{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 13px;border:1px solid rgba(255,255,255,.10);border-radius:10px 10px 10px 5px;background:rgba(255,255,255,.02);color:var(--ink2);font-size:12.5px;transition:all .18s var(--ease)}
.rnm-opt:hover{color:var(--ink);border-color:rgba(255,255,255,.18)}
.rnm-opt.on{border-color:rgba(201,162,39,.55);background:rgba(201,162,39,.08);color:var(--gold2)}
/* o padrão da IA enquanto não há resposta: o vazio clicável canônico */
.rnm-opt.def{border:1px dashed rgba(255,255,255,.16);background:rgba(0,0,0,.26)}
.rnm-opt.def small{font-size:8.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.rnm-opt .x{font-style:normal;font-size:11px;opacity:.7}
.rnm-opt .x:hover{opacity:1}
/* a linha do efeito — voz da IA: itálico, 11px, nunca decide nada */
.rnm-muda{margin-top:8px;font-size:11px;font-style:italic;color:var(--ink3);line-height:1.5;text-wrap:pretty;max-width:64ch}

/* campos que continuam campo (busca e resíduo) — valores do app */
.rnm-input,.rnm-body textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:10px 10px 10px 5px;color:var(--ink);font:inherit;font-size:13.5px;padding:10px 12px;min-height:44px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.rnm-input:focus,.rnm-body textarea:focus{outline:none;border-color:rgba(157,92,255,.55);box-shadow:0 0 0 1px rgba(157,92,255,.25),0 0 16px rgba(157,92,255,.12)}
.rnm-input::placeholder,.rnm-body textarea::placeholder{color:var(--ink3)}
.rnm-body textarea{resize:vertical;min-height:74px;line-height:1.55;display:block}
.rnm-sel{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.rnm-hint{font-size:11px;color:var(--ink3);margin-top:7px;line-height:1.5;text-wrap:pretty}

/* rodapé: a nota-lei (itálico + fio tracejado) e o Salvar do professor */
.rnm-note{margin:16px 0 0;padding:11px 0 0;border-top:1px dashed rgba(238,231,218,.17);font-size:11px;font-style:italic;color:var(--ink2);line-height:1.5;text-wrap:pretty}
.rnm-actions{display:flex;justify-content:flex-end;margin-top:14px}
.rnm-save{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;background:var(--gold);color:#0a0806;border-radius:12px 12px 12px 6px;font-size:13.5px;font-weight:600;transition:filter .18s var(--ease)}
.rnm-save:hover{filter:brightness(1.08)}

/* celular (o app roda em iframe 375–430): mesma coluna, corpo rola por dentro */
.rnm-cel{max-width:390px}
.rnm-cel .rnm-body{max-height:560px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(157,92,255,.28) transparent}
.rnm-cel .rnm-body::-webkit-scrollbar{width:7px}
.rnm-cel .rnm-body::-webkit-scrollbar-track{background:transparent}
.rnm-cel .rnm-body::-webkit-scrollbar-thumb{background:rgba(157,92,255,.25);border-radius:4px}

@media (prefers-reduced-motion:reduce){.rnm-panel,.rnm-panel::before{animation:none}}
@media (max-width:480px){body{padding:14px}.peca{padding:12px}.rnm-head{padding:14px 16px 10px}.rnm-placar{padding:0 16px 2px}.rnm-body{padding:2px 16px 16px}}