/* Hydra · folha de estilo (redesign de baixa fricção, 21/09/2026)
   Regras da casa: nada no fluxo se move quando algo temporário abre (popover, gaveta, toast);
   escala fluida em rem (1080p = 15px, 1440p = 20px, 4K = 30px; HiDPI já vem em css px);
   ícones só em SVG (<symbol> + <use>, traço 1.6, currentColor); nenhum controle nativo à vista. */
:root {
  /* metal quente: quase preto + dourado/ambar/bronze. Nada de azul eletrico. */
  --bg:#070605;
  --gold:#c9a44d; --gold-2:#e8b855; --gold-l:#f5d98b; --bronze:#8a6a2a;
  --ink:#e8e0d0; --ink-2:#b0a890; --ink-3:#8a8272; --ink-4:#6e6858;
  --line:#3a3020; --line-2:#2a2418; --line-3:#241d10;
  --warn:#e0a45c; --stop:#e58a8a; --focus:#e8b855; --ok:#9fbf7f;
  --panel: rgba(14,12,9,.965);
  --font-sans:ui-rounded,'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'Cascadia Mono','SF Mono',Consolas,monospace;
  --r:999px;
  --ctl: 3.6rem;          /* botão redondo dos controles */
  --pop-w: 24rem;
  --shadow: 0 1.2rem 3rem rgba(0,0,0,.55), 0 0 0 1px rgba(232,184,85,.05) inset;
  color-scheme: dark;
}
/* escala fluida: a interface "parece nativa" da tela porque tudo é rem e o rem segue o menor lado
   da janela. 1920×1080 = 15px (igual ao desenho antigo), 2560×1440 = 20px, 3840×2160 = 30px.
   Piso 15px cobre celular, notebook com escala e janelas baixas; teto 30px cobre 5K/8K. */
html { font-size: clamp(15px, 1.39vmin, 30px); -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; height: 100dvh; min-height: 100dvh; overflow: hidden; color: var(--ink); font-family: var(--font-sans);
  background: radial-gradient(80rem 53rem at 50% -10%, #1a1408 0%, #0b0a08 55%, #060606 100%);
  display: flex; flex-direction: column; align-items: center;
  padding: max(.65rem, env(safe-area-inset-top)) .8rem max(.65rem, env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: .2rem; border-radius: .4rem; }
.orb:focus-visible { outline-offset: .5rem; border-radius: 50%; }
button { font-family: var(--font-sans); font-weight: 500; font-size: .95rem; cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
kbd { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink-2); background: #1c1710;
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: .35rem; padding: .08rem .38rem; white-space: nowrap; }

/* ---------- ícones (sprite <symbol>) ---------- */
.ic { width: 1.5rem; height: 1.5rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ic-s { width: 1.1rem; height: 1.1rem; }

/* ---------- tooltips instantâneas (só com ponteiro fino; no toque não existem) ---------- */
[data-tip] { position: relative; }
@media (hover: hover) and (pointer: fine) {
  [data-tip]::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + .55rem); transform: translate(-50%, .2rem);
    background: rgba(20,16,10,.97); color: var(--ink); border: 1px solid var(--line-2); border-radius: .5rem;
    padding: .32rem .6rem; font: 500 .74rem/1.2 var(--font-sans); letter-spacing: .01em; white-space: nowrap;
    box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.45); opacity: 0; pointer-events: none; z-index: 90;
    transition: opacity .12s ease .08s, transform .12s ease .08s;
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
  [data-tip-pos="baixo"]::after { bottom: auto; top: calc(100% + .55rem); transform: translate(-50%, -.2rem); }
  [data-tip-pos="baixo"]:hover::after, [data-tip-pos="baixo"]:focus-visible::after { transform: translate(-50%, 0); }
  [data-tip-pos="baixo-esq"]::after { bottom: auto; top: calc(100% + .55rem); left: auto; right: 0; transform: translate(0, -.2rem); }
  [data-tip-pos="baixo-esq"]:hover::after, [data-tip-pos="baixo-esq"]:focus-visible::after { transform: none; }
  /* botão de ligar: texto muda com o estado */
  body.on #btn[data-tip-on]::after { content: attr(data-tip-on); }
  .pop-open [data-tip]::after, .drawer [data-tip]::after { z-index: 95; }
}

/* ---------- header mínimo: marca à esquerda, coisas raras à direita ---------- */
header { width: min(48rem, 100%); display: flex; align-items: center; gap: .6rem; padding: 0 .3rem; flex: 0 0 auto; min-height: 2.5rem; }
header h1 { font-size: .95rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0; }
#modolbl { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
header .hsp { flex: 1 1 auto; }
#hytag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); opacity: .85; white-space: nowrap; }
#hytag::before { content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--warn); margin-right: .45rem; vertical-align: .05rem; animation: corepulse 1.4s ease-in-out infinite; }
.hbtn { background: transparent; border: 1px solid var(--line); color: var(--ink-3); border-radius: var(--r); height: 2.15rem; min-width: 2.15rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 .55rem; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.hbtn .ic { width: 1.1rem; height: 1.1rem; }
.hbtn:hover { color: var(--gold-2); border-color: var(--bronze); }
.hbtn.on { color: var(--gold-2); border-color: var(--bronze); background: rgba(201,164,77,.1); }
/* chip dos cérebros: só existe enquanto algum trabalha */
#workchip { background: transparent; border: 1px solid var(--bronze); color: var(--gold-2); font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r); padding: 0 .7rem; height: 2.15rem; white-space: nowrap; display: inline-flex; align-items: center; }
#workchip::before { content: ""; display: inline-block; flex: 0 0 auto; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold-l); margin-right: .5rem; animation: corepulse 1.4s ease-in-out infinite; }
/* chip = agente (mono, caixa alta) + fase atual em prosa (21/09): a fase é o que tira do vácuo.
   Um chip só, no cabeçalho (o duplicado junto dos controles saiu em 21/09: cobria mic e parar).
   No celular ele toma a largura que sobra entre a marca e o botão de registros. */
#workchip { max-width: calc(100vw - 9.6rem); }
#workchip .chip-ag { flex: 0 0 auto; }
#workchip .chip-fase { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-sans); font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
#workchip .chip-fase::before { content: "·"; color: var(--bronze); margin: 0 .45rem; }

/* ---------- orb ---------- */
.orb-wrap { position: relative; width: 13.3rem; height: 13.3rem; margin: 2.5vh 0 2vh; --os: 1;
  display: grid; place-items: center; z-index: 2; flex: 0 0 auto;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.orb-wrap.live { transform: scale(1.04); }
.orb-glow { position: absolute; width: calc(10.67rem * var(--os)); height: calc(10.67rem * var(--os)); border-radius: 50%;
  background:
    radial-gradient(28% 28% at 50% 48%, rgba(245,217,139,.55), transparent 60%),
    radial-gradient(44% 44% at 50% 50%, rgba(232,184,85,.45), transparent 72%),
    radial-gradient(62% 62% at 50% 52%, rgba(184,134,46,.22), transparent 80%);
  filter: blur(calc(1.87rem * var(--os))); opacity: .5; transition: opacity .12s linear; }
#viz { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 4;
  width: calc(13.33rem * var(--os)) !important; height: calc(13.33rem * var(--os)) !important; }
#orbgpu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
body.gpuorb #orbgpu { display: block; }
body.gpuorb .orb { background: transparent; box-shadow: none; animation: none; }
body.gpuorb .orb-liquid, body.gpuorb .orb-core { display: none; }
body.gpuorb .orb-glow { opacity: .22 !important; }
body.gpuorb #viz { display: none; }
.orb { position: relative; width: calc(4.4rem * var(--os)); height: calc(4.4rem * var(--os)); cursor: pointer; z-index: 3;
  border-radius: 46% 54% 57% 43% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 50% 42%, rgba(245,217,139,.9), rgba(184,134,46,.55) 58%, rgba(70,48,14,.3) 85%);
  box-shadow: 0 0 2.3rem .4rem rgba(201,164,77,.45), 0 0 0 1px rgba(232,184,85,.5), inset 0 2px 1.2rem rgba(245,217,139,.45);
  animation: blob 9s ease-in-out infinite, float 7.5s ease-in-out infinite; animation-play-state: paused;
  transition: box-shadow .4s ease, transform .4s ease; }
body.viva .orb, body.viva .orb-core { animation-play-state: running; }
.orb:active { transform: scale(.97); }
.orb-liquid { position: absolute; inset: -8%; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 42% 38%, rgba(245,217,139,.92), rgba(232,184,85,.5) 46%, rgba(184,134,46,.22) 72%, transparent 84%);
  filter: url(#liquid) blur(calc(2px * var(--os))); mix-blend-mode: screen; opacity: .85; z-index: 3; }
.orb-core { position: absolute; inset: 22%; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle, rgba(255,248,230,.95), rgba(245,217,139,.55) 42%, rgba(201,164,77,.18) 70%, transparent 82%);
  filter: blur(calc(4px * var(--os))); mix-blend-mode: screen; animation: corepulse 4s ease-in-out infinite; animation-play-state: paused; }
.orb.speaking { box-shadow: 0 0 3.7rem .95rem rgba(232,184,85,.7), 0 0 0 1px rgba(245,217,139,.72), inset 0 2px 1.3rem rgba(255,248,230,.6); }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-.4rem) rotate(3deg); } }
@keyframes blob {
  0%,100% { border-radius: 46% 54% 57% 43% / 52% 44% 56% 48%; }
  25% { border-radius: 58% 42% 48% 52% / 44% 56% 44% 56%; }
  50% { border-radius: 43% 57% 53% 47% / 56% 47% 53% 44%; }
  75% { border-radius: 53% 47% 42% 58% / 47% 53% 57% 43%; } }
@keyframes corepulse { 0%,100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---------- feed da conversa ---------- */
#chat { width: min(48rem, 100%); flex: 1 1 auto; min-height: 6rem; overflow-y: auto; z-index: 2;
  display: flex; flex-direction: column; gap: .65rem; padding: .55rem .95rem .55rem .55rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.2rem, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 1.2rem, #000 100%); }
#chat::-webkit-scrollbar, #evlist::-webkit-scrollbar, #worklist::-webkit-scrollbar, .pop::-webkit-scrollbar { width: .33rem; }
#chat::-webkit-scrollbar-thumb, #evlist::-webkit-scrollbar-thumb, #worklist::-webkit-scrollbar-thumb, .pop::-webkit-scrollbar-thumb { background: var(--line); border-radius: .2rem; }
.msg { display: flex; gap: .8rem; align-items: baseline; font-size: .97rem; line-height: 1.5; animation: rise .34s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.msg .who { flex: 0 0 4rem; text-align: right; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; color: var(--ink-3); }
.msg .txt { flex: 1 1 auto; word-break: break-word; }
.msg.u .txt { color: var(--gold-l); } .msg.u .who { color: var(--bronze); }
.msg.a .txt { color: var(--ink); } .msg.a .who { color: var(--gold); }
.msg.t .txt { color: var(--ink-2); font-family: var(--font-mono); font-size: .85rem; } .msg.t .who { color: var(--bronze); }
.msg.s { opacity: .65; }
.msg.s .txt { color: var(--ink-3); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; }
.msg.r { background: #14100acc; border: 1px solid #2e2717; border-radius: .7rem; padding: .55rem .7rem; }
.msg.r .txt { color: var(--ink); font-size: .9rem; line-height: 1.55; white-space: pre-wrap; }
.msg.r .who { color: var(--ok); }
.msg code { background: #1c1710; border-radius: .3rem; padding: 0 .3rem; font-family: var(--font-mono); font-size: .92em; }

/* ---------- caixa de texto ---------- */
#sayform { flex: 0 0 auto; display: flex; gap: .55rem; width: min(48rem, 100%); padding: 0 .15rem; margin: .4rem 0 .7rem; }
#say { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: .8rem; padding: .75rem .95rem;
  color: var(--ink); font-family: inherit; font-size: max(16px, 1rem); /* 16px: abaixo disso o Safari do iPhone dá zoom sozinho */
  outline: none; min-height: 3.05rem; transition: border-color .18s ease, background .18s ease; }
#say::placeholder { color: var(--ink-3); }
#say:focus { border-color: var(--gold); background: rgba(255,255,255,.07); }
#say:disabled { opacity: .45; }
#saybtn { flex: 0 0 auto; width: 3.05rem; min-height: 3.05rem; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: .8rem; color: var(--gold-2); transition: border-color .18s ease, color .18s ease; }
#saybtn .ic { width: 1.2rem; height: 1.2rem; }
#saybtn:hover { border-color: var(--bronze); }
#saybtn:disabled { opacity: .45; cursor: default; }

/* ---------- controles: 5 vagas FIXAS (nada se move ao ligar) + estado embaixo do botão ---------- */
.controls { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; z-index: 2; flex: 0 0 auto; padding-bottom: .1rem; width: min(48rem, 100%); }
.ctl-row { display: flex; gap: 1.05rem; align-items: center; justify-content: center; }
.ctl-row > button { width: var(--ctl); height: var(--ctl); border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: rgba(40,30,12,.5); border: 1px solid var(--line); color: var(--gold-2);
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease, transform .16s ease, box-shadow .16s ease; }
.ctl-row > button .ic { width: 1.55rem; height: 1.55rem; }
.ctl-row > button:hover:not(:disabled) { border-color: var(--bronze); background: rgba(60,45,18,.55); }
.ctl-row > button:active:not(:disabled) { transform: scale(.95); }
/* desabilitado (voz desligada): fica no lugar, apagado; não desaparece nem empurra ninguém */
.ctl-row > button:disabled { opacity: .28; }
#btn { background: linear-gradient(180deg, var(--gold-2), var(--bronze)); color: #241a06; border-color: transparent; box-shadow: 0 .4rem 1.5rem rgba(201,164,77,.3); }
#btn:hover:not(:disabled) { background: linear-gradient(180deg, var(--gold-l), var(--gold)); }
#btn.on { background: rgba(224,110,110,.14); color: var(--stop); border: 1px solid #6b3030; box-shadow: none; }
#btn.on:hover:not(:disabled) { background: rgba(224,110,110,.22); border-color: #8a3a3a; }
#mic.muted { color: var(--warn); border-color: #6b4a1f; position: relative; }
#mic.muted::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.75rem; height: .17rem; border-radius: .1rem; background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); }
#gear.on, #view.on { color: var(--gold-l); border-color: var(--bronze); background: rgba(201,164,77,.12); }
.status { height: 1.25rem; line-height: 1.25rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: color .3s ease; }
body.on .status { color: var(--gold-2); }
.aviso { display: none; }

/* ---------- popover ancorado (desktop) / folha inferior (celular) ---------- */
.pop { position: fixed; z-index: 70; width: min(var(--pop-w), calc(100vw - 1.6rem)); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 1rem; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 1rem; color: var(--ink); }
.pop.pop-open { animation: popin .16s cubic-bezier(.2,.7,.2,1) both; }
.pop[data-side="bottom"] { --dy: -.4rem; }
@keyframes popin { from { opacity: 0; transform: translateY(var(--dy, .4rem)) scale(.985); } to { opacity: 1; transform: none; } }
.popback { position: fixed; inset: 0; z-index: 69; background: rgba(4,3,2,.55); }
.popback.gaveta { z-index: 64; } /* fundo da gaveta fica ABAIXO dela (gaveta é z65); o da folha de ajustes segue z69 abaixo do .pop z70 */
.pop .pop-h { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: -.1rem 0 .8rem; display: none; }
.sec { display: flex; flex-direction: column; gap: .55rem; padding: .7rem 0; border-top: 1px solid var(--line-3); }
.sec:first-child, .pop-h + .sec { border-top: 0; padding-top: 0; }
.sec-t { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.sec-n { font-size: .8rem; color: var(--ink-2); line-height: 1.4; }
.sec-n b { color: var(--gold-l); font-weight: 600; }
.row2 { display: flex; align-items: center; gap: .75rem; }
.row2 .desc { flex: 1 1 auto; font-size: .8rem; color: var(--ink-3); line-height: 1.35; }
.row2 label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); flex: 0 0 5.6rem; }
.pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill { background: #171310; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: .42rem .85rem; font-size: .88rem; font-weight: 500;
  min-height: 2.15rem; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.pill:hover { border-color: var(--bronze); color: var(--ink); }
.pill[aria-checked="true"], .pill.ativo { border-color: var(--gold); color: var(--gold-l); background: rgba(201,164,77,.1); }
.act { background: #171310; color: #d8cfb8; border: 1px solid var(--line); border-radius: .7rem; padding: .5rem .9rem; font-size: .88rem; font-family: var(--font-sans); min-height: 2.5rem; white-space: nowrap;
  transition: border-color .14s ease, color .14s ease, background .14s ease; flex: 0 0 auto; }
.act:hover { border-color: var(--bronze); color: var(--gold-l); }
.act.arm { border-color: #8a3a3a; color: var(--stop); background: rgba(224,110,110,.1); }
#model { font-family: var(--font-mono); letter-spacing: .06em; }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 9rem; height: .2rem; border-radius: .2rem;
  background: linear-gradient(90deg, var(--bronze), var(--gold-2)); outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 .65rem rgba(232,184,85,.7); cursor: pointer; border: none; }
input[type="range"]::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 .65rem rgba(232,184,85,.7); cursor: pointer; border: none; }
input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: .4rem; }
.val { color: var(--gold-2); font-family: var(--font-mono); font-size: .78rem; min-width: 3rem; text-align: right; }
.mais > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .75rem 0 .35rem; border-top: 1px solid var(--line-3);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.mais > summary::-webkit-details-marker { display: none; }
.mais > summary .ic { width: .95rem; height: .95rem; transition: transform .18s ease; margin-left: auto; }
.mais[open] > summary .ic { transform: rotate(180deg); }
.mais > summary:hover { color: var(--ink-2); }
.mais > summary + .sec { border-top: 0; padding-top: .6rem; }
.mais > summary + .sec:not([hidden]) ~ .sec:first-of-type { border-top: 1px solid var(--line-3); }
.keys { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: center; font-size: .8rem; color: var(--ink-2); }
.keys dt { text-align: right; } .keys dd { margin: 0; }
.diag { display: flex; gap: .8rem; align-items: baseline; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--ink-3); }
.diag > span:first-child { flex: 0 0 5.6rem; letter-spacing: .12em; text-transform: uppercase; }
.diag > span:last-child { color: var(--ink-2); word-break: break-word; }
/* menu do modo de visão */
.pop-menu { padding: .45rem; --pop-w: 19rem; }
.pop-menu > button { display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: center; column-gap: .55rem; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: .7rem; padding: .6rem .7rem; color: var(--ink); }
.pop-menu > button:hover { background: rgba(201,164,77,.08); }
.pop-menu > button b { font-weight: 600; font-size: .95rem; color: var(--ink); }
.pop-menu > button small { grid-column: 2; font-size: .78rem; color: var(--ink-3); line-height: 1.3; }
.pop-menu > button .ic { width: 1rem; height: 1rem; color: var(--gold-l); opacity: 0; }
.pop-menu > button[aria-checked="true"] .ic { opacity: 1; }
.pop-menu > button[aria-checked="true"] b { color: var(--gold-l); }
.pop-menu > button kbd { grid-row: 1; grid-column: 3; }

/* ---------- gavetas: registros e cérebros. Desktop = lateral direita; celular = folha inferior ---------- */
.drawer { position: fixed; top: .8rem; right: .8rem; bottom: .8rem; width: min(30rem, calc(100vw - 1.6rem)); z-index: 65;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 1rem; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: flex; flex-direction: column; animation: drawin .22s cubic-bezier(.2,.7,.2,1) both; }
@keyframes drawin { from { opacity: 0; transform: translateX(1.2rem); } to { opacity: 1; transform: none; } }
.sheetbar { display: flex; align-items: center; justify-content: space-between; padding: .8rem .8rem .7rem 1.1rem; border-bottom: 1px solid var(--line-3); flex: 0 0 auto; }
.sheetbar span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sheetx { background: transparent; border: 1px solid var(--line); color: var(--ink-2); border-radius: 50%; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; padding: 0; }
.sheetx:hover { border-color: var(--bronze); color: var(--gold-2); }
.sheetx .ic { width: 1rem; height: 1rem; }
#evlist, #worklist { flex: 1 1 auto; overflow-y: auto; padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .6rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#evlist .msg { font-size: .85rem; } #evlist .msg .who { flex-basis: 3.4rem; }
#evlist:empty::before { content: "nenhum registro ainda: aqui entra o que a Hydra faz por baixo (conexão, sessão, cérebros)"; color: var(--ink-3); font-size: .82rem; line-height: 1.45; text-align: center; margin: 30% 1rem 0; }
#worklist { font-family: var(--font-mono); font-size: .8rem; line-height: 1.6; color: var(--ink); }
#worklist .row { padding: .75rem .95rem .7rem; border: 1px solid var(--line-3); border-radius: .8rem; background: rgba(26,20,10,.6); word-break: break-word; }
#worklist .row.fim { opacity: .55; }
#worklist .t { color: var(--gold-l); display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .45rem; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
#worklist .t .tt { color: var(--ink-3); letter-spacing: .04em; font-variant-numeric: tabular-nums; text-transform: none; }
/* diário de fases: instante (mono, tabular) + frase em prosa; a última fase é a viva, em dourado */
#worklist .passos { display: flex; flex-direction: column; gap: .18rem; }
#worklist .st { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .55rem; align-items: baseline; color: var(--ink-3); }
#worklist .st .tm { font-size: .7rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; opacity: .85; }
#worklist .st .tx { font-family: var(--font-sans); font-size: .84rem; line-height: 1.4; letter-spacing: 0; }
#worklist .st.agora { color: var(--gold-2); }
#worklist .st.agora .tm { opacity: 1; color: var(--gold); }
#worklist .st.agora .tx { position: relative; padding-left: .95rem; }
#worklist .st.agora .tx::before { content: ""; position: absolute; left: 0; top: .5em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold-l); animation: corepulse 1.4s ease-in-out infinite; }
#worklist .row.fim .st.agora { color: var(--ink-3); }
#worklist .vazio { color: var(--ink-3); text-align: center; margin: 30% 1rem 0; font-family: var(--font-sans); font-size: .82rem; line-height: 1.45; letter-spacing: 0; text-transform: none; }

/* ---------- toast: confirmação passageira, sem tocar no layout ---------- */
.toast { position: fixed; left: 50%; bottom: calc(max(.65rem, env(safe-area-inset-bottom)) + 7.6rem); transform: translateX(-50%); z-index: 80;
  background: rgba(20,16,10,.97); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); padding: .55rem 1.05rem; font-size: .85rem; line-height: 1.3;
  box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.5); max-width: min(34rem, calc(100vw - 2rem)); text-align: center; pointer-events: none; animation: rise .25s ease both; }
.toast.out { animation: toastout .25s ease both; }
@keyframes toastout { to { opacity: 0; transform: translate(-50%, .4rem); } }

/* ---------- modos de visão: normal / limpo (sem texto, orb maior) / foco (só o orb) ---------- */
body.v-limpo #chat, body.v-limpo #sayform { display: none !important; }
body.v-limpo .orb-wrap { --os: 1.9; width: min(62vmin, 26.7rem); height: min(62vmin, 26.7rem); flex: 0 0 auto; margin: auto 0; max-height: 60dvh; }
body.v-foco header, body.v-foco .controls { display: none !important; }
body.v-foco .orb-wrap { --os: 2.6; width: min(84vmin, 37.3rem); height: min(84vmin, 37.3rem); max-height: none; }
body.v-limpo #focoexit { display: grid; place-items: center; }
body.v-limpo:not(.v-foco) #focoexit { top: auto; bottom: max(.9rem, env(safe-area-inset-bottom)); }
#focoexit { position: fixed; top: max(.65rem, env(safe-area-inset-top)); right: .8rem; z-index: 40; display: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; cursor: pointer;
  background: rgba(40,30,12,.35); border: 1px solid var(--line-2); color: var(--ink-3); opacity: .35; transition: opacity .25s ease, color .2s ease; }
#focoexit .ic { width: 1.05rem; height: 1.05rem; }
#focoexit:hover, #focoexit:focus-visible { opacity: 1; color: var(--gold-2); }
body.v-foco #focoexit { display: grid; place-items: center; }

/* ---------- DESKTOP (>= 1100px): dois palcos ----------
   Coluna da conversa (--col) centralizada; quando há visual, a coluna vai pra esquerda e o palco da
   direita recebe o visual (decisão do Hibra 12/09/2026). Tudo em rem: escala com a tela. */
@media (min-width: 1100px) {
  body { --col: 40rem; --esq: max(3vw, calc(50% - 42.7rem)); }
  header { width: min(85.3rem, 100%); }
  #workchip { max-width: min(26rem, 42vw); }
  #chat, #sayform, .controls { width: var(--col); }
  body .orb-wrap { --os: 2; width: min(27rem, 38vmin); height: min(27rem, 38vmin); margin: 1vh 0 0; }
  body.v-limpo.v-limpo .orb-wrap { --os: 3.2; width: min(70vmin, 43rem); height: min(70vmin, 43rem); max-height: 70dvh; }
  body.v-foco.v-foco .orb-wrap { --os: 4; width: min(90vmin, 54rem); height: min(90vmin, 54rem); }
  body.hy-up:not(.v-foco):not(.hy-full) > .orb-wrap,
  body.hy-up:not(.v-foco):not(.hy-full) > #chat,
  body.hy-up:not(.v-foco):not(.hy-full) > #sayform,
  body.hy-up:not(.v-foco):not(.hy-full) > .controls { align-self: flex-start; margin-left: var(--esq); width: var(--col); }
  body.hy-up:not(.v-foco):not(.hy-full) > .orb-wrap { width: var(--col); }
  body.hy-up:not(.v-foco):not(.hy-full) #hyover {
    left: calc(var(--esq) + var(--col) + 3vw) !important; right: 3vw !important; top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important; width: auto !important; max-width: none !important; }
  body.hy-up:not(.hy-full).v-limpo .orb-wrap { transform: none !important; }
  body.hy-up.hy-full .orb-wrap, body.hy-up.hy-full.v-limpo .orb-wrap { transform: translate(-38vw, 36vh) scale(.28) !important; opacity: .7; }
  .hy { max-height: 86dvh; }
  .toast { bottom: calc(max(.65rem, env(safe-area-inset-bottom)) + 6.4rem); }
}

/* ---------- celular: popover e gaveta viram folha inferior ---------- */
@media (max-width: 1099px) {
  .pop { left: .5rem !important; right: .5rem !important; top: auto !important; bottom: 0 !important; width: auto; max-height: 82dvh !important;
    border-radius: 1.2rem 1.2rem 0 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); --dy: 1.2rem; }
  .pop .pop-h { display: block; }
  .pop-menu { padding: .7rem .6rem; }
  .drawer { left: .5rem; right: .5rem; top: auto; bottom: 0; width: auto; max-height: 85dvh; border-radius: 1.2rem 1.2rem 0 0; padding-bottom: max(.6rem, env(safe-area-inset-bottom)); animation-name: sheetin; }
  @keyframes sheetin { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
  #evlist:empty::before, #worklist .vazio { margin-top: 12%; }
}

/* ---------- /hyper: camada de visuais ao vivo ----------
   Palco com VAGAS (place: baixo | centro | esquerda | direita) e TAMANHOS (size: s | m | l | full).
   A tipografia usa unidades de contêiner (cqi): cresce junto com a vaga, sem pixel fixo. */
#hyover { position: fixed; z-index: 30; pointer-events: none; display: grid; place-items: center;
  container-type: inline-size; transition: width .45s cubic-bezier(.2,.8,.2,1), left .45s, right .45s, top .45s, bottom .45s, transform .45s; }
body { --hys: 1; --hysv: 1; }
body.hy-s #hyover { width: var(--hy-w, min(320px, 80vw)); }
body.hy-m #hyover { width: var(--hy-w, min(560px, 92vw)); }
body.hy-l #hyover { width: var(--hy-w, min(820px, 96vw)); }
body.hy-full #hyover { width: 96vw; }
body.hy-full .hy-prose, body.hy-full .hy-html { font-size: calc(clamp(15px, 3cqi, 40px) * var(--hys)); }
body.hy-full .hy-card .hy-title { font-size: calc(min(34vh, 28cqi) * var(--hys)); }
body.hy-full .hy-stat .hy-value { font-size: calc(min(36vh, 26cqi) * var(--hys)); }
body.hy-esquerda #hyover, body.hy-direita #hyover { max-width: 46vw; }
body.hy-baixo #hyover { left: 50%; bottom: var(--hy-bottom, max(14vh, 96px)); transform: translateX(-50%); }
body.hy-baixo.v-limpo #hyover { bottom: var(--hy-bottom, max(40vh, 320px)); }
body.hy-baixo.v-foco #hyover { bottom: max(12vh, 80px); }
body.hy-centro #hyover { left: 50%; top: 50%; transform: translate(-50%, -50%); }
body.hy-esquerda #hyover { left: 4vw; top: 50%; transform: translateY(-50%); }
body.hy-direita #hyover { right: 4vw; top: 50%; transform: translateY(-50%); }
body.hy-full #hyover { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; height: min(88dvh, 100%); }
body.hy-full .hy-wrap, body.hy-full .hy { height: 100%; }
body.hy-full .hy { display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, rgba(20,16,9,.985), rgba(10,8,6,.99)); }
body.hy-up.hy-full header, body.hy-up.hy-full .controls { opacity: 0; pointer-events: none; transition: opacity .3s; }
body.hy-full .hy-card .hy-title { font-size: min(34vh, 28cqi); line-height: 1.05; }
body.hy-full .hy-card .hy-body { font-size: min(6vh, 3.6cqi); margin-top: 3vh; }
body.hy-full .hy-stat .hy-value { font-size: min(36vh, 26cqi); }
body.hy-full .hy-stat .hy-label { font-size: min(5vh, 3cqi); }
body.hy-full .hy-list li { font-size: min(6vh, 4.4cqi); }
body.hy-up.hy-baixo.v-limpo .orb-wrap { transform: translateY(-6vh) scale(.82); }
@media (max-width: 720px) { body.hy-up.hy-baixo.hy-l.v-limpo .orb-wrap { transform: translateY(-16vh) scale(.55); } }
.hy { max-height: 82dvh; overflow: auto; scrollbar-width: thin; }
body.hy-baixo #hyover { max-height: calc(100dvh - 120px); }
.hy-card .hy-title.hy-longo { font-size: clamp(18px, 4.2cqi, 64px); line-height: 1.25; }
@media (max-width: 520px) { #modolbl { display: none; } }
body.hy-up.hy-centro.v-limpo .orb-wrap { transform: translateY(-30vh) scale(.45); }
body.hy-up.hy-esquerda.v-limpo .orb-wrap { transform: translateX(24vw) scale(.9); }
body.hy-up.hy-direita.v-limpo .orb-wrap { transform: translateX(-24vw) scale(.9); }
body.hy-up.hy-full .orb-wrap { transform: translate(-38vw, 36vh) scale(.28); opacity: .7; z-index: 31; }

.hy-wrap { grid-area: 1 / 1; width: 100%; display: grid; place-items: center; animation: hyin .42s cubic-bezier(.2,.8,.2,1) both; }
.hy-wrap.hy-out { animation: hyout .3s ease both; pointer-events: none; }
@keyframes hyin { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hyout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(.98); } }
.hy { pointer-events: auto; background: linear-gradient(180deg, rgba(26,20,10,.965), rgba(12,10,7,.975));
  border: 1px solid rgba(201,164,77,.35); border-radius: clamp(14px, 3cqi, 28px); padding: clamp(14px, 3.6cqi, 48px) clamp(18px, 4.4cqi, 56px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(232,184,85,.08) inset, 0 0 40px rgba(201,164,77,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); max-width: 100%; width: 100%; }
/* barra do visual: anterior · próximo · ampliar · menor · maior · fechar. Aparece junto do painel
   (hover no desktop; sempre visível no toque). Substitui o slider que morava nos ajustes. */
.hyctl { position: absolute; right: 0; top: 0; transform: translateY(calc(-100% - .45rem)); display: none; gap: .15rem; pointer-events: auto; z-index: 2;
  background: rgba(14,12,9,.92); border: 1px solid var(--line-2); border-radius: var(--r); padding: .2rem; opacity: .4; transition: opacity .18s ease; }
body.hy-up .hyctl { display: flex; }
#hyover:hover .hyctl, .hyctl:focus-within { opacity: 1; }
@media (hover: none) { .hyctl { opacity: .88; } }
.hyctl button { width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; padding: 0; }
.hyctl button .ic { width: 1.05rem; height: 1.05rem; }
.hyctl button:hover:not(:disabled) { background: rgba(201,164,77,.14); color: var(--gold-l); }
.hyctl button:disabled { opacity: .3; }
.hyctl .sep { width: 1px; background: var(--line-2); margin: .35rem .15rem; }
.hyctl [data-op="restore"] { display: none; }
.hyctl[data-cheio="1"] [data-op="full"] { display: none; }
.hyctl[data-cheio="1"] [data-op="restore"] { display: grid; }
body.hy-full .hyctl { top: .6rem; right: .6rem; transform: none; }
.hy-tag { font-family: var(--font-mono); font-size: clamp(10px, 1.9cqi, 22px); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: clamp(6px, 1.4cqi, 16px); }
.hy-card .hy-title { font-size: clamp(22px, 9cqi, 200px); font-weight: 600; letter-spacing: -.01em; color: var(--gold-l); line-height: 1.12; word-break: break-word; }
.hy-card .hy-body { margin-top: clamp(8px, 1.6cqi, 20px); font-size: clamp(14px, 3.2cqi, 44px); color: var(--ink-2); line-height: 1.45; }
.hy-list ol { margin: 0; padding: 0 0 0 1.2em; display: flex; flex-direction: column; gap: clamp(6px, 1.2cqi, 16px); }
.hy-list li { font-size: clamp(15px, 4cqi, 48px); line-height: 1.35; color: var(--ink); animation: hyin .36s ease both; }
.hy-list li::marker { color: var(--gold); font-family: var(--font-mono); font-size: .7em; }
.hy-stat { text-align: center; }
.hy-stat .hy-value { font-size: clamp(40px, 22cqi, 340px); font-weight: 700; letter-spacing: -.03em; color: var(--gold-l); line-height: 1; text-shadow: 0 0 30px rgba(232,184,85,.35); }
.hy-stat .hy-label { margin-top: clamp(8px, 1.6cqi, 20px); font-size: clamp(14px, 3cqi, 40px); letter-spacing: .06em; color: var(--ink-2); }
.hy-stat .hy-hint { margin-top: 4px; font-family: var(--font-mono); font-size: clamp(11px, 2cqi, 24px); color: var(--ink-3); }
.hy-timer .hy-value { font-variant-numeric: tabular-nums; }
.hy-bar { margin: clamp(12px, 2.4cqi, 28px) auto 0; width: 70%; height: clamp(3px, .5cqi, 6px); border-radius: 3px; background: rgba(201,164,77,.18); overflow: hidden; }
.hy-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--gold-l)); transition: width .25s linear; }
.hy-timer.hy-done .hy-value { color: var(--ok); text-shadow: 0 0 30px rgba(159,191,127,.45); }
.hy-prose { line-height: 1.45; color: var(--ink); font-size: clamp(15px, 3cqi, 40px); }
.hy-prose > :first-child { margin-top: 0; } .hy-prose > :last-child { margin-bottom: 0; }
.hy-prose h1 { font-size: clamp(30px, 9cqi, 180px); line-height: 1.08; margin: 0 0 .25em; color: var(--gold-l); font-weight: 600; letter-spacing: -.01em; }
.hy-prose h2 { font-size: clamp(24px, 6cqi, 110px); line-height: 1.12; margin: .3em 0 .2em; color: var(--gold-2); font-weight: 600; }
.hy-prose h3 { font-size: clamp(18px, 4cqi, 70px); line-height: 1.2; margin: .4em 0 .2em; color: var(--gold); font-weight: 600; }
.hy-prose h4, .hy-prose h5, .hy-prose h6 { font-size: clamp(14px, 2.6cqi, 40px); margin: .5em 0 .2em; color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono); font-weight: 500; }
.hy-prose p { margin: .35em 0; } .hy-prose strong { color: var(--gold-l); } .hy-prose em { color: var(--ink-2); }
.hy-prose ul, .hy-prose ol { margin: .3em 0; padding-left: 1.3em; } .hy-prose li { margin: .18em 0; } .hy-prose li::marker { color: var(--gold); }
.hy-prose code { background: #1c1710; border-radius: 6px; padding: .05em .35em; font-family: var(--font-mono); font-size: .9em; color: var(--gold-l); }
.hy-prose pre { background: #100d08; border: 1px solid #2a2418; border-radius: 12px; padding: .8em 1em; overflow-x: auto; font-size: .85em; }
.hy-prose pre code { background: none; padding: 0; color: var(--ink); }
.hy-prose blockquote { margin: .4em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--bronze); color: var(--ink-2); }
.hy-prose hr { border: 0; border-top: 1px solid var(--line); margin: .6em 0; }
.hy-prose table, .hy-table table { border-collapse: collapse; width: 100%; font-size: clamp(14px, 2.8cqi, 36px); }
.hy-prose th, .hy-table th { text-align: left; font-family: var(--font-mono); font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding: .4em .7em; border-bottom: 1px solid var(--bronze); }
.hy-prose td, .hy-table td { padding: .45em .7em; border-bottom: 1px solid #241d10; color: var(--ink); }
.hy-table tr:last-child td { border-bottom: 0; } .hy-table tbody tr { animation: hyin .36s ease both; }
.hy-table td:not(:first-child), .hy-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.hy-prose .katex-display { margin: .5em 0; } .hy-prose .katex { font-size: 1.15em; color: var(--gold-l); }
.hy-math { text-align: center; } .hy-math .hy-formula .katex-display { margin: 0; } .hy-math .katex { font-size: clamp(26px, 6.5cqi, 120px); color: var(--gold-l); }
.hy-math .hy-label { margin-top: clamp(8px, 1.6cqi, 20px); font-size: clamp(14px, 3cqi, 40px); color: var(--ink-2); }
.hy-code pre { margin: 0; font-family: var(--font-mono); font-size: clamp(12px, 2.4cqi, 30px); line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.hy-image { text-align: center; } .hy-image img { max-width: 100%; max-height: 70dvh; border-radius: 12px; display: block; margin: 0 auto; }
.hy-image .hy-label { margin-top: 8px; font-size: clamp(13px, 2.6cqi, 32px); color: var(--ink-2); }
.hy-chart svg { display: block; width: 100%; height: auto; max-height: 72dvh; }
.hy-bar-anim { animation: hybar .7s cubic-bezier(.2,.8,.2,1) both; }
rect.hy-bar-anim { transform-box: fill-box; }
@keyframes hybar { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.hy-line-anim { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: hyline 1.2s ease-out forwards; }
@keyframes hyline { to { stroke-dashoffset: 0; } }
.hy-html { font-size: clamp(15px, 3cqi, 40px); line-height: 1.4; }
.hy-html * { max-width: 100%; }
.hy-html, .hy-md { contain: paint; position: relative; overflow: auto; max-height: 82dvh; }

/* ---------- responsivo (celular) ---------- */
@media (max-width: 520px) {
  .orb-wrap { width: 11.7rem; height: 11.7rem; margin: 1vh 0; }
  .ctl-row { gap: .8rem; }
  header { width: 100%; }
}
@media (max-height: 620px) {
  .orb-wrap { margin: .6vh 0; width: 10.7rem; height: 10.7rem; }
  #chat { min-height: 5rem; }
}
/* paisagem de celular / janela muito baixa (≤460px): tudo encolhe pra caber SEM rolar; a regra "a página nunca rola" vale aqui também */
@media (max-height: 460px) {
  header { min-height: 2rem; }
  .orb-wrap { width: 7.4rem; height: 7.4rem; margin: 0; }
  #chat { min-height: 3rem; padding-top: .3rem; padding-bottom: .3rem; }
  #sayform { margin: .2rem 0 .4rem; }
  #say { padding: .55rem .9rem; }
  .controls { --ctl: 3.1rem; gap: .25rem; }
  .ctl-row { gap: .8rem; }
  .status { height: 1.1rem; line-height: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .orb-glow, .orb-core { animation: none !important; }
  .orb-liquid { display: none; }
  .orb-wrap, .orb, .msg, .pop, .drawer, .toast, .hy-wrap, .hy-bar-anim, .hy-line-anim, .hy-table tbody tr { transition: none !important; animation: none !important; stroke-dashoffset: 0; }
}

/* ---------- portão de senha ---------- */
#gate { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1.6rem;
  background: radial-gradient(50% 40% at 50% 42%, rgba(201,164,77,.12), transparent 70%), var(--bg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#gate.show { display: flex; }
.gate-card { width: min(24rem, 92vw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.05rem; }
.gate-mark { font-family: var(--font-mono); font-size: .9rem; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 0 1.2rem rgba(201,164,77,.6); }
.gate-sub { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); margin-top: -.5rem; }
#gate form { display: flex; flex-direction: column; gap: .8rem; width: 100%; margin-top: .4rem; }
#gatepass { font-family: var(--font-sans); font-size: max(16px, 1rem); text-align: center; color: var(--ink); background: rgba(30,22,10,.6); border: 1px solid var(--line); border-radius: var(--r);
  padding: .95rem 1.3rem; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
#gatepass::placeholder { color: var(--ink-3); letter-spacing: .04em; }
#gatepass:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201,164,77,.16); }
#gatebtn { background: linear-gradient(180deg, var(--gold-2), var(--bronze)); color: #241a06; box-shadow: 0 .4rem 1.5rem rgba(201,164,77,.3); font-size: 1rem; padding: .85rem 1.7rem; border-radius: var(--r); border: none; min-height: 3.2rem; }
#gatebtn:disabled { opacity: .5; cursor: default; }
#gateerr { min-height: 1.1rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--stop); }