/* =============================================================================
   Sislogica AI — direção "Vidro"
   Vidro fosco sobre um fundo aurora, na cor da marca (indigo #2E3192).

   DUAS INTERFACES, não uma esticada:
     >= 1280px  desktop cheio  — 3 colunas (conversas · conteúdo · contexto)
     1000-1279  desktop médio  — 2 colunas (sem a coluna de contexto)
      700-999   tablet         — barra lateral vira trilha só de ícones
      < 700     celular        — gaveta + navegação inferior + telas cheias
   Cada faixa tem componentes PRÓPRIOS (.so-desktop / .so-celular), não é só
   o mesmo layout encolhido.

   TEMAS: 7. Os quatro primeiros (Meia-noite, Grafite, Cristal, Papel) são esta
   mesma direção em quatro paletas. Os três últimos (Doca, Console, Manifesto)
   mudam a MATÉRIA, não só a cor: canto, fonte, se existe vidro, que sombra há e
   qual é a paisagem do fundo. Isso só é possível porque a forma também virou
   token (--r-1..5, --f-titulo/corpo/mono, --filtro-vidro, --sombra-painel,
   --fundo-camadas): nenhum componente traz valor fixo, então trocar de tema
   troca o sistema inteiro — inclusive o desenho.
============================================================================= */

/* ---------------- tema padrão: Meia-noite (escuro) ---------------- */
:root {
  --fundo:      #080914;
  --aurora-1:   rgba(59,63,166,.55);
  --aurora-2:   rgba(110,155,255,.18);
  --aurora-3:   rgba(46,49,146,.40);
  --vidro:      rgba(255,255,255,.045);
  --vidro-forte:rgba(255,255,255,.075);
  --borda:      rgba(255,255,255,.085);
  --borda-viva: rgba(110,155,255,.26);
  --txt:        #E7ECFA;
  --txt2:       #8E97C4;
  --txt3:       #5C6491;
  --marca:      #2E3192;
  --acento:     #6E9BFF;
  --acento2:    #4D6BF5;
  --acento-sv:  rgba(110,155,255,.14);
  --sobre-acento:#0B1024;
  --verde:      #7FD4A8;
  --amarelo:    #F0B45E;
  --vermelho:   #FF8A8A;
  /* cubo no ESCURO: branco e cinzas — o topo é o mais claro, a base o mais
     escuro, então mesmo girando ele continua lendo como um volume iluminado */
  --cubo-5:     #FFFFFF;   /* topo    */
  --cubo-1:     #E9EEF7;   /* frente  */
  --cubo-4:     #CFD6E4;   /* esquerda*/
  --cubo-2:     #B2BBCE;   /* direita */
  --cubo-3:     #98A2B8;   /* trás    */
  --cubo-6:     #7E88A0;   /* base    */
  --cubo-vidro: rgba(190,205,255,.10);   /* véu do vão — vidro, não massa */
  --cubo-borda: rgba(190,205,255,.20);
  --veu-tela:   rgba(4,5,12,.18);
  --sombra:     0 18px 48px rgba(0,0,0,.42);
  --vidro-painel: rgba(255,255,255,.045);
  --blur:       26px;
  --blur-painel: 18px;
  --blur-fundo:  26px;   /* desfoque de TUDO que fica fora do modal */
  --raio:       16px;

  /* ---- FORMA, TIPO e MATÉRIA ----------------------------------------
     O que separa um tema do outro não é só a cor: é o canto, a fonte, o
     vidro e a sombra. Estes tokens existem para que um tema chapado e
     quadrado possa nascer sem tocar em nenhum componente. */
  --r-1: 7px;   /* fichas, botõezinhos, barras */
  --r-2: 11px;  /* botões, campos, selos       */
  --r-3: 13px;  /* cartões                      */
  --r-4: 18px;  /* balões, caixa de escrita     */
  --r-5: 26px;  /* painéis e telas cheias       */
  --r-pill: 999px;
  --f-titulo: "Sora", "Segoe UI", sans-serif;
  --f-corpo:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:   "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --corpo-tam: 15px;
  --filtro-vidro: blur(var(--blur)) saturate(140%);
  --filtro-fundo: blur(var(--blur-fundo)) saturate(140%);
  --sombra-painel: 0 32px 90px rgba(0,0,0,.45);
  --sobre-primario: #fff;          /* texto em cima do botão principal */
  --acento3: #8E6EFF;              /* a segunda cor dos degradês (avatar) */
  --fundo-camadas:
    radial-gradient(900px 620px at 14% -12%, var(--aurora-1) 0%, transparent 62%),
    radial-gradient(760px 520px at 96% 8%,   var(--aurora-2) 0%, transparent 58%),
    radial-gradient(700px 500px at 62% 108%, var(--aurora-3) 0%, transparent 60%);

  --seguro-b:   env(safe-area-inset-bottom, 0px);
  --seguro-t:   env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

/* ---------------- Grafite (escuro neutro) ---------------- */
html[data-tema="grafite"] {
  --fundo:      #0E1013;
  --aurora-1:   rgba(76,141,255,.14);
  --aurora-2:   rgba(255,255,255,.03);
  --aurora-3:   rgba(76,141,255,.07);
  --veu-tela:   rgba(6,7,9,.20);
  --vidro-painel: rgba(255,255,255,.038);
  --vidro:      rgba(255,255,255,.04);
  --vidro-forte:rgba(255,255,255,.07);
  --borda:      rgba(255,255,255,.09);
  --borda-viva: rgba(124,174,255,.24);
  --txt:        #EEF1F4;
  --txt2:       #99A2AE;
  --txt3:       #676F7C;
  --marca:      #35507F;
  --acento:     #7CAEFF;
  --acento2:    #4C8DFF;
  --acento-sv:  rgba(124,174,255,.13);
  --sobre-acento:#0B0F16;
  /* cubo no Grafite: mesma ideia, cinzas neutros (sem puxar para o azul) */
  --cubo-5:     #FFFFFF;
  --cubo-1:     #ECEFF2;
  --cubo-4:     #D2D7DD;
  --cubo-2:     #B4BAC3;
  --cubo-3:     #9AA1AC;
  --cubo-6:     #828A96;
  --cubo-vidro: rgba(210,220,235,.09);
  --cubo-borda: rgba(210,220,235,.18);
  color-scheme: dark;
}

/* ---------------- Cristal (claro, lavanda) ---------------- */
html[data-tema="cristal"] {
  --sombra-painel: 0 22px 56px rgba(46,49,146,.14);
  --fundo:      #F4F5FC;
  --aurora-1:   rgba(150,170,255,.42);
  --aurora-2:   rgba(196,178,255,.30);
  --aurora-3:   rgba(160,200,255,.34);
  --veu-tela:   rgba(28,32,72,.15);
  --vidro-painel: rgba(255,255,255,.40);
  --vidro:      rgba(255,255,255,.72);
  --vidro-forte:rgba(255,255,255,.92);
  --borda:      rgba(46,49,146,.10);
  --borda-viva: rgba(77,107,245,.30);
  --txt:        #23264F;
  --txt2:       #6E76A0;
  --txt3:       #969CBC;
  --marca:      #2E3192;
  --acento:     #3B52D9;
  --acento2:    #4D6BF5;
  --acento-sv:  rgba(77,107,245,.11);
  --sobre-acento:#FFFFFF;
  --verde:      #1E8A5A;
  --amarelo:    #C27C09;
  --vermelho:   #C4453B;
  /* UMA face azul — a da esquerda, como na logo — e as outras cinco em branco
     e cinza, escalonadas para o volume não sumir enquanto o cubo gira. */
  --cubo-4:     #3F3D91;   /* esquerda · a única azul, o azul da marca */
  --cubo-5:     #FFFFFF;   /* topo     · o mais claro */
  --cubo-1:     #DFE2E7;   /* frente   */
  --cubo-2:     #B6BAC2;   /* direita  */
  --cubo-3:     #8A8E97;   /* trás     */
  --cubo-6:     #5F636C;   /* base     · o mais escuro */
  --cubo-vidro: rgba(255,255,255,.42);   /* véu do vão — vidro, não massa */
  --cubo-borda: rgba(70,75,120,.14);
  --sombra:     0 16px 40px rgba(46,49,146,.12);
  color-scheme: light;
}

/* ---------------- Papel (claro, neutro quente) ---------------- */
html[data-tema="papel"] {
  --sombra-painel: 0 22px 54px rgba(40,38,34,.13);
  --fundo:      #FAFAF8;
  --aurora-1:   rgba(46,49,146,.10);
  --aurora-2:   rgba(180,170,150,.16);
  --aurora-3:   rgba(46,49,146,.06);
  --veu-tela:   rgba(60,54,40,.14);
  --vidro-painel: rgba(255,255,255,.44);
  --vidro:      rgba(255,255,255,.80);
  --vidro-forte:#FFFFFF;
  --borda:      rgba(40,38,34,.11);
  --borda-viva: rgba(46,49,146,.32);
  --txt:        #26241F;
  --txt2:       #6C685F;
  --txt3:       #9A958A;
  --marca:      #2E3192;
  --acento:     #2E3192;
  --acento2:    #3D42B8;
  --acento-sv:  rgba(46,49,146,.09);
  --sobre-acento:#FFFFFF;
  --verde:      #1E7A50;
  --amarelo:    #B07407;
  --vermelho:   #B33F36;
  /* As mesmas famílias da logo, no cinza morno deste tema. */
  --cubo-4:     #3F3D91;   /* esquerda · a única azul */
  --cubo-5:     #FFFFFF;   /* topo     · o mais claro */
  --cubo-1:     #E2DFD7;   /* frente   */
  --cubo-2:     #BAB7AF;   /* direita  */
  --cubo-3:     #8E8B84;   /* trás     */
  --cubo-6:     #63615B;   /* base     · o mais escuro */
  --cubo-vidro: rgba(255,255,255,.44);
  --cubo-borda: rgba(80,75,60,.14);
  --sombra:     0 16px 38px rgba(40,38,34,.10);
  color-scheme: light;
}

/* =============================================================================
   TRÊS TEMAS DE CARA PRÓPRIA

   Os quatro primeiros são variações do MESMO desenho: vidro fosco sobre aurora,
   mudando só a paleta. Estes três mudam a matéria: canto, fonte, se há vidro,
   que sombra existe e qual é a paisagem do fundo. Nenhum componente foi tocado
   para isso — tudo sai dos tokens de forma declarados no :root.
============================================================================= */

/* ---------------- Doca (escuro · pátio de carga) ----------------
   O tema da casa: transportadora. Asfalto, aço e faixa de segurança. Nada de
   vidro — no galpão a superfície é chapa pintada, com aresta viva e canto
   praticamente reto. O âmbar não é enfeite: é a cor que sinaliza operação, e
   aqui ele carrega foco, botão principal e estado. */
html[data-tema="doca"] {
  --acento3: #7B828A;
  --fundo:      #0E1013;
  --fundo-camadas:
    /* demarcação do piso do pátio */
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 116px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.016) 0 1px, transparent 1px 116px),
    /* refletor da doca, batendo de cima */
    radial-gradient(1200px 480px at 50% -16%, rgba(255,178,28,.10) 0%, transparent 72%),
    linear-gradient(180deg, #15181D 0%, #0E1013 46%);
  --vidro:      #15181D;
  --vidro-forte:#1C2027;
  --vidro-painel:#15181D;
  --borda:      rgba(255,255,255,.10);
  --borda-viva: rgba(255,178,28,.46);
  --txt:        #E9ECEF;
  --txt2:       #98A1AA;
  --txt3:       #6A737C;
  --marca:      #FFB21C;
  --acento:     #FFB21C;
  --acento2:    #E0900A;
  --acento-sv:  rgba(255,178,28,.13);
  --sobre-acento:#17140C;
  --sobre-primario:#17140C;
  --verde:      #56C98B;
  --amarelo:    #FFC53D;
  --vermelho:   #FF6E5C;
  /* chapa: nada de canto redondo, nada de pílula */
  --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-4: 5px; --r-5: 6px; --r-pill: 3px;
  --filtro-vidro: none;
  --filtro-fundo: blur(7px);
  --veu-tela:   rgba(5,6,8,.56);
  --sombra:     0 14px 34px rgba(0,0,0,.5);
  --sombra-painel: 0 26px 68px rgba(0,0,0,.58);
  --f-titulo:   "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  /* uma face âmbar — a mesma ideia da face azul da logo, na cor do pátio */
  --cubo-5:     #FFFFFF;
  --cubo-1:     #D9DDE1;
  --cubo-4:     #FFB21C;
  --cubo-2:     #A7ADB4;
  --cubo-3:     #7B828A;
  --cubo-6:     #555C63;
  --cubo-vidro: rgba(255,255,255,.06);
  --cubo-borda: rgba(255,255,255,.16);
  color-scheme: dark;
}
/* A condensada pede o contrário da grotesca: sem aperto, e com respiro em caixa
   alta. Herdando o -.03em do tema padrão ela fecha e some em corpo pequeno. */
html[data-tema="doca"] :is(.marca-txt, .cab h2, .exec-tit b, .modal-tit, .ed-tit b,
  .vis-tit b, .lei-tit b, .topo-cel .tit b, .roda .num, .doispontos) {
  letter-spacing: .012em; font-weight: 600; }
html[data-tema="doca"] :is(.cab h2, .modal-tit) { text-transform: uppercase; font-size: 17px; }
/* faixa zebrada de doca: a assinatura do tema, no alto da coluna de navegação */
html[data-tema="doca"] .lateral::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1;
  background: repeating-linear-gradient(115deg,
              var(--acento) 0 9px, #23272D 9px 18px); }
/* o selo de estado vira etiqueta de operação, não pílula */
html[data-tema="doca"] .estado { letter-spacing: .10em; text-transform: uppercase; }

/* ---------------- Console (escuro · terminal de operação) ----------------
   Densidade acima de tudo: monoespaçada em tudo, canto zero, zero vidro. É a
   cara de quem passa o dia lendo saída de script — a mesma leitura do terminal
   valendo para o app inteiro. O brilho de fósforo vem do FUNDO, não de sombra:
   sombra colorida em cima de preto vira mancha. */
html[data-tema="console"] {
  --acento3: #1FC466;
  --fundo:      #05080A;
  --fundo-camadas:
    repeating-linear-gradient(0deg, rgba(61,232,130,.028) 0 1px, transparent 1px 3px),
    radial-gradient(1300px 760px at 50% 118%, rgba(61,232,130,.07) 0%, transparent 68%),
    radial-gradient(900px 420px at 8% -10%, rgba(61,232,130,.05) 0%, transparent 70%);
  --vidro:      rgba(19,32,27,.62);
  --vidro-forte:rgba(28,46,38,.80);
  --vidro-painel:rgba(12,22,18,.72);
  --borda:      rgba(61,232,130,.17);
  --borda-viva: rgba(61,232,130,.46);
  --txt:        #CDEFDC;
  --txt2:       #79A98F;
  --txt3:       #4E7461;
  --marca:      #3DE882;
  --acento:     #3DE882;
  --acento2:    #1FC466;
  --acento-sv:  rgba(61,232,130,.12);
  --sobre-acento:#04140B;
  --sobre-primario:#04140B;
  --verde:      #3DE882;
  --amarelo:    #F2C14E;
  --vermelho:   #FF6B6B;
  --r-1: 0; --r-2: 0; --r-3: 0; --r-4: 0; --r-5: 0; --r-pill: 0;
  --f-titulo:   var(--f-mono);
  --f-corpo:    var(--f-mono);
  --corpo-tam:  14px;
  --filtro-vidro: none;
  --filtro-fundo: blur(5px);
  --veu-tela:   rgba(2,6,4,.60);
  --sombra:     0 0 0 1px rgba(61,232,130,.10);
  --sombra-painel: 0 0 0 1px rgba(61,232,130,.12), 0 22px 60px rgba(0,0,0,.66);
  --cubo-5:     #E6FFF1;
  --cubo-1:     #A9F0C6;
  --cubo-4:     #3DE882;
  --cubo-2:     #6ABF90;
  --cubo-3:     #3F8B62;
  --cubo-6:     #2A5D42;
  --cubo-vidro: rgba(61,232,130,.10);
  --cubo-borda: rgba(61,232,130,.26);
  color-scheme: dark;
}
/* monoespaçada não aceita aperto: o -.03em do padrão junta as letras */
html[data-tema="console"] :is(.marca-txt, .cab h2, .exec-tit b, .modal-tit, .ed-tit b,
  .vis-tit b, .lei-tit b, .topo-cel .tit b, .lei-corpo h1, .lei-corpo h2, .lei-corpo h3) {
  letter-spacing: 0; }
html[data-tema="console"] :is(.cab h2, .modal-tit)::before { content: "> "; color: var(--acento); }

/* ---------------- Manifesto (claro · papel e tinta) ----------------
   O oposto de tudo o que veio antes: papel morno, serifa no título, tinta
   terracota, canto largo e nenhuma sombra pesada. Aqui a hierarquia se faz com
   espaço e linha fina — não com camada de vidro. */
html[data-tema="manifesto"] {
  --acento3: #2E3192;
  --fundo:      #F7F4ED;
  --fundo-camadas:
    /* trama de papel: linhas de 1px quase invisíveis, que só dão textura */
    repeating-linear-gradient(0deg, rgba(50,40,28,.020) 0 1px, transparent 1px 4px),
    radial-gradient(1000px 680px at 84% -12%, rgba(178,68,42,.11) 0%, transparent 64%),
    radial-gradient(820px 560px at 4% 106%, rgba(120,104,70,.10) 0%, transparent 62%);
  --vidro:      #FFFDF8;
  --vidro-forte:#FFFFFF;
  --vidro-painel:#FFFDF8;
  --borda:      rgba(40,33,26,.14);
  --borda-viva: rgba(178,68,42,.38);
  --txt:        #221E19;
  --txt2:       #6B6259;
  --txt3:       #9C9287;
  --marca:      #2E3192;
  --acento:     #B2442A;
  --acento2:    #8F3520;
  --acento-sv:  rgba(178,68,42,.09);
  --sobre-acento:#FFF9F2;
  --sobre-primario:#FFF9F2;
  --verde:      #2F7A52;
  --amarelo:    #A0701A;
  --vermelho:   #A63A2C;
  --r-1: 9px; --r-2: 13px; --r-3: 17px; --r-4: 23px; --r-5: 30px; --r-pill: 999px;
  --filtro-vidro: none;
  /* Num tema CHAPADO e claro o véu tem de trabalhar sozinho: o painel é branco,
     a página atrás é branca, e sem vidro nem blur forte o terminal não se
     separava do que estava embaixo. Nos temas de vidro .16 bastava porque o
     desfoque já apagava o fundo. */
  --filtro-fundo: blur(11px) saturate(112%);
  --veu-tela:   rgba(48,38,26,.34);
  --sombra:     0 12px 30px rgba(62,48,32,.10);
  --sombra-painel: 0 24px 60px rgba(62,48,32,.14);
  --f-titulo:   "Newsreader", Georgia, "Times New Roman", serif;
  /* a face azul da logo continua ali: é ela que amarra o tema à marca */
  --cubo-4:     #2E3192;
  --cubo-5:     #FFFFFF;
  --cubo-1:     #E7E1D6;
  --cubo-2:     #BFB8AB;
  --cubo-3:     #938C80;
  --cubo-6:     #666057;
  --cubo-vidro: rgba(255,255,255,.46);
  --cubo-borda: rgba(70,58,44,.15);
  color-scheme: light;
}
/* serifa quer o espaçamento natural dela; o aperto da grotesca a deforma */
html[data-tema="manifesto"] :is(.marca-txt, .cab h2, .exec-tit b, .modal-tit, .ed-tit b,
  .vis-tit b, .lei-tit b, .topo-cel .tit b, .lei-corpo h1, .lei-corpo h2, .lei-corpo h3) {
  letter-spacing: 0; font-weight: 600; }
html[data-tema="manifesto"] :is(.cab h2, .modal-tit) { font-size: 19px; }
/* fio de tinta sob o cabeçalho, no lugar da sombra */
html[data-tema="manifesto"] .cab { box-shadow: inset 0 -1px 0 var(--borda),
                                               inset 0 -3px 0 -2px var(--acento-sv); }

/* ============================ base ============================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior-y: none; height: 100%; }
body {
  /* As camadas do fundo saem do tema: os temas de vidro põem a aurora, os
     chapados põem grade, faixa ou trama — trocar de tema troca a paisagem,
     não só as cores em cima dela. */
  background: var(--fundo-camadas), var(--fundo);
  background-attachment: fixed;
  color: var(--txt);
  font-size: var(--corpo-tam, 15px);
  font-family: var(--f-corpo);
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font-family: inherit; font-size: 15px; color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--borda); border-radius: var(--r-2); }
::-webkit-scrollbar-thumb:hover { background: var(--borda-viva); }
::-webkit-scrollbar-track { background: transparent; }
.display { font-family: var(--f-titulo); letter-spacing: -.025em; }

/* foco visível para quem navega no teclado */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}

/* ============================ ícones ============================ */
.ic { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-p { width: 15px; height: 15px; }
.ic-g { width: 22px; height: 22px; }

/* ============================ o cubo da marca ============================ */
.palco { perspective: 900px; flex: none; }
.cubo { position: relative; transform-style: preserve-3d;
        animation: girarCubo 22s linear infinite; width: 100%; height: 100%; }
/* APOIADO NA QUINA, como na logo original.
   rotateZ(45°) + rotateX(-35.264°) alinham a diagonal do cubo (canto inferior
   ao canto superior) com a vertical da tela — é a projeção isométrica clássica,
   com um vértice embaixo e três faces à mostra. O rotateY externo gira em torno
   dessa vertical, então o cubo roda "em pé", pivotando sobre a quina de baixo.
   35,264° = atan(1/raiz(2)), o ângulo que deita a diagonal na vertical. */
@keyframes girarCubo {
  from { transform: rotateY(0deg)   rotateX(-35.264deg) rotateZ(45deg); }
  to   { transform: rotateY(360deg) rotateX(-35.264deg) rotateZ(45deg); }
}
/* O vão entre os quadradinhos é VIDRO, não buraco nem massa. Fundo opaco
   deixava o cubo um bloco liso; vão totalmente transparente deixava as arestas
   vazadas, com as faces de trás aparecendo por dentro. Um véu translúcido com
   um fio de borda resolve os dois: o cubo continua se vendo através, mas as
   arestas ganham corpo. O backdrop-filter borra o que passa por elas — as faces
   de trás aparecem difusas, como através de vidro fosco. Ele sobrevive ao
   preserve-3d (conferido), e a área é pequena: o cubo tem ~100px de lado. */
.cubo .fc { position: absolute; inset: 0; display: grid;
            grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
            gap: var(--g); padding: var(--g); border-radius: 8%;
            background: var(--cubo-vidro);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            box-shadow: inset 0 0 0 1px var(--cubo-borda); }
.cubo .fc i { border-radius: 14%; }
/* LUZ. Sem isto o cubo é só seis retângulos de cores diferentes: falta o
   degradê que diz de onde vem a luz. Cada face ganha um véu próprio — claro
   onde a luz bate, escuro onde ela não chega — por cima dos quadradinhos. */
.cubo .fc::after {
  content: ""; position: absolute; inset: 0; border-radius: 8%;
  pointer-events: none; background: var(--luz-face, none); }
.cubo .f5 { --luz-face: linear-gradient(160deg,
              rgba(255,255,255,.42), rgba(255,255,255,.06) 65%); }   /* topo: bate em cheio */
.cubo .f1 { --luz-face: linear-gradient(150deg,
              rgba(255,255,255,.16), rgba(0,0,0,.10) 80%); }         /* frente */
.cubo .f4 { --luz-face: linear-gradient(120deg,
              rgba(255,255,255,.10), rgba(0,0,0,.16) 85%); }         /* esquerda */
.cubo .f2 { --luz-face: linear-gradient(200deg,
              rgba(0,0,0,.05), rgba(0,0,0,.22)); }                   /* direita: de raspão */
.cubo .f3 { --luz-face: linear-gradient(200deg,
              rgba(0,0,0,.12), rgba(0,0,0,.30)); }                   /* trás */
.cubo .f6 { --luz-face: linear-gradient(20deg,
              rgba(0,0,0,.34), rgba(0,0,0,.16)); }                   /* base: na sombra */
/* Cada face tem COR PRÓPRIA, definida por tema (--cubo-1..6) — e não uma cor só
   com opacidades, que no escuro ficava lavada e no claro, chapada. Como o cubo
   gira apoiado na quina, as seis faces desfilam: o conjunto precisa fazer sentido
   junto, não só a que está na frente. */
.cubo .f1 { transform: translateZ(var(--z)); }
.cubo .f2 { transform: rotateY(90deg)  translateZ(var(--z)); }
.cubo .f3 { transform: rotateY(180deg) translateZ(var(--z)); }
.cubo .f4 { transform: rotateY(-90deg) translateZ(var(--z)); }
.cubo .f5 { transform: rotateX(90deg)  translateZ(var(--z)); }
.cubo .f6 { transform: rotateX(-90deg) translateZ(var(--z)); }
.cubo .f1 i { background: var(--cubo-1); }
.cubo .f2 i { background: var(--cubo-2); }
.cubo .f3 i { background: var(--cubo-3); }
.cubo .f4 i { background: var(--cubo-4); }
.cubo .f5 i { background: var(--cubo-5); }
.cubo .f6 i { background: var(--cubo-6); }

.marca-txt { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.03em;
             line-height: 1; white-space: nowrap; color: var(--txt); }
.marca-txt b { font-weight: 600; color: var(--acento); }
.marca-reflexo { transform: scaleY(-1); opacity: .28; filter: blur(.6px);
  margin-top: 2px; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to top, transparent 8%, rgba(0,0,0,.85) 92%);
          mask-image: linear-gradient(to top, transparent 8%, rgba(0,0,0,.85) 92%); }

/* ============================ vidro ============================ */
.vidro {
  background: var(--vidro);
  backdrop-filter: var(--filtro-vidro);
  -webkit-backdrop-filter: var(--filtro-vidro);
  box-shadow: inset 0 0 0 1px var(--borda);
}

/* ============================ esqueleto ============================ */
.app { display: grid; grid-template-columns: 268px minmax(0,1fr) 300px;
       height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------------- coluna 1: navegação ---------------- */
.lateral { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 20px 15px;
           box-shadow: inset -1px 0 0 var(--borda); min-height: 0; z-index: 40; }
.lat-marca { display: flex; align-items: center; gap: 14px;
             padding: 4px 4px 6px; cursor: pointer; }
.lat-rolagem { flex: 1; min-height: 0; overflow-y: auto; display: flex;
               flex-direction: column; gap: 3px; }
.rot { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
       color: var(--txt3); padding: 0 12px 7px; }
.nav { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 0;
       width: 100%; background: none; cursor: pointer; text-align: left;
       border-radius: var(--r-2); color: var(--txt2); font-size: 13.5px; font-weight: 500;
       transition: background .18s ease, color .18s ease; }
.nav:hover { background: var(--vidro-forte); color: var(--txt); }
.nav.on { background: var(--acento-sv); color: var(--txt);
          box-shadow: inset 0 0 0 1px var(--borda-viva); }
.nav .conta { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--txt3); }

.conv { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0;
        width: 100%; background: none; cursor: pointer; text-align: left;
        border-radius: var(--r-2); font-size: 13px; color: var(--txt2);
        transition: background .18s ease, color .18s ease; }
.conv:hover { background: var(--vidro-forte); color: var(--txt); }
.conv.on { background: var(--vidro-forte); color: var(--txt); font-weight: 600; }
.conv span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .x { opacity: 0; color: var(--txt3); transition: opacity .15s ease; }
.conv:hover .x { opacity: 1; }

.perfil { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 0;
          width: 100%; cursor: pointer; text-align: left; border-radius: var(--r-3);
          background: var(--vidro); box-shadow: inset 0 0 0 1px var(--borda);
          transition: box-shadow .2s ease; }
.perfil:hover { box-shadow: inset 0 0 0 1px var(--borda-viva); }
.avatar { width: 30px; height: 30px; border-radius: var(--r-2); flex: none; display: grid;
          place-items: center; font-size: 12px; font-weight: 700; color: var(--sobre-primario);
          background: linear-gradient(135deg, var(--acento2), var(--acento3)); }

/* ---------------- coluna 2: conteúdo ---------------- */
.centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cab { display: flex; align-items: center; gap: 14px; padding: 16px 30px; flex: none;
       box-shadow: inset 0 -1px 0 var(--borda); }
.cab h2 { font-family: var(--f-titulo); font-size: 15px; font-weight: 600;
          letter-spacing: -.02em; }
.cab .sub { font-size: 11.5px; color: var(--txt2); margin-top: 2px; }
.cab .dir { margin-left: auto; display: flex; gap: 9px; align-items: center; }
.vista { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 30px; display: none; }
.vista.on { display: block; }
.vista.corrido { display: none; }
.vista.corrido.on { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

/* ---------------- coluna 3: contexto (só desktop grande) ---------------- */
.contexto { padding: 20px 16px; overflow-y: auto; display: flex; flex-direction: column;
            gap: 20px; box-shadow: inset 1px 0 0 var(--borda); }

/* ============================ botões ============================ */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center;
       justify-content: center; gap: 8px; border: 0; cursor: pointer; font-weight: 600;
       font-size: 13.5px; padding: 11px 17px; border-radius: var(--r-3); color: var(--txt);
       background: var(--vidro); box-shadow: inset 0 0 0 1px var(--borda);
       transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { box-shadow: inset 0 0 0 1px var(--borda-viva); background: var(--vidro-forte); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { color: var(--sobre-primario); background: linear-gradient(135deg, var(--acento2), var(--acento));
                box-shadow: 0 6px 22px color-mix(in srgb, var(--acento2) 42%, transparent); }
.btn.primario:hover { filter: brightness(1.07); }
.btn.perigo { color: var(--vermelho); }
.btn.perigo:hover { box-shadow: inset 0 0 0 1px var(--vermelho); }
.btn.fantasma { background: transparent; box-shadow: none; color: var(--txt2); }
.btn.fantasma:hover { background: var(--vidro); color: var(--txt); }
.btn.mini { padding: 8px 12px; font-size: 12.5px; border-radius: var(--r-2); }
.btn.icone { padding: 0; width: 38px; height: 38px; border-radius: var(--r-2); }
.btn.bloco { width: 100%; }
.onda { position: absolute; border-radius: 50%; background: currentColor; opacity: .22;
        transform: scale(0); animation: onda .6s ease-out; pointer-events: none; }
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* ============================ chat ============================ */
/* A rolagem é uma coluna flex: assim a tela de entrada CRESCE para ocupar o
   espaço em vez de pedir `min-height:100%` — que somava com o padding daqui e
   criava um vazio rolável acima da marca. */
.chat-rol { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 30px;
            display: flex; flex-direction: column; }
.chat-lista { max-width: 820px; width: 100%; margin: 0 auto; flex: 1;
              display: flex; flex-direction: column; gap: 22px; }

.msg-eu { align-self: flex-end; max-width: 76%; padding: 14px 18px;
          border-radius: var(--r-4) var(--r-4) var(--r-1) var(--r-4); font-size: 14.5px; line-height: 1.6; color: var(--sobre-primario);
          background: linear-gradient(135deg, var(--acento2), var(--acento));
          box-shadow: 0 8px 26px color-mix(in srgb, var(--acento2) 30%, transparent);
          white-space: pre-wrap; word-break: break-word; animation: surge .3s ease; }
@keyframes surge { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.msg-ia { display: flex; gap: 13px; animation: surge .3s ease; }
.msg-ia .selo { width: 32px; height: 32px; border-radius: var(--r-2); flex: none; margin-top: 2px;
                display: grid; place-items: center; color: var(--sobre-primario);
                background: linear-gradient(135deg, var(--marca), var(--acento));
                box-shadow: 0 4px 16px color-mix(in srgb, var(--marca) 45%, transparent); }
.msg-ia .corpo { flex: 1; min-width: 0; }
.balao { padding: 16px 20px; border-radius: var(--r-1) var(--r-4) var(--r-4) var(--r-4); font-size: 14.5px;
         line-height: 1.7; color: var(--txt); white-space: pre-wrap; word-break: break-word; }
.balao code { font-family: var(--f-mono); font-size: 13px;
              background: var(--vidro-forte); padding: 2px 6px; border-radius: var(--r-1); }
.balao b { font-weight: 700; }
.pisca::after { content: "▌"; color: var(--acento); animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* trechos do manual: a imagem da página de onde veio a resposta */
.trechos { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.trecho { width: 168px; border-radius: var(--r-3); overflow: hidden; cursor: zoom-in;
          background: var(--vidro); box-shadow: inset 0 0 0 1px var(--borda);
          transition: transform .15s ease, box-shadow .2s ease; }
.trecho:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--borda-viva), var(--sombra); }
.trecho img { display: block; width: 100%; height: 118px; object-fit: cover;
              object-position: top center; background: #fff; }
.trecho .leg { padding: 7px 9px; font-size: 10.5px; font-weight: 600; color: var(--txt2);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* imagens anexadas à pergunta */
.anexos-eu { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.anexos-eu img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-2);
                 box-shadow: 0 0 0 1px rgba(255,255,255,.28); cursor: zoom-in; }
.previa { display: flex; gap: 8px; flex-wrap: wrap; max-width: 820px; margin: 0 auto 9px; }
.previa .item { position: relative; width: 66px; height: 66px; border-radius: var(--r-2);
                overflow: hidden; box-shadow: inset 0 0 0 1px var(--borda); }
.previa .item img { width: 100%; height: 100%; object-fit: cover; }
.previa .item.enviando { opacity: .5; }
.previa .item button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
                       border: 0; border-radius: var(--r-1); cursor: pointer; display: grid;
                       place-items: center; color: var(--sobre-primario); background: rgba(0,0,0,.62); }

/* visualizador de imagem em tela cheia */
.lupa { position: fixed; inset: 0; z-index: 260; background: rgba(4,5,12,.86);
        backdrop-filter: blur(10px); display: none; align-items: center;
        justify-content: center; padding: 24px; cursor: zoom-out; }
.lupa.on { display: flex; animation: apaga .2s ease; }
.lupa img { max-width: 100%; max-height: 100%; border-radius: var(--r-3);
            box-shadow: var(--sombra-painel); }

.fontes { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.fonte.web { color: var(--amarelo);
             box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amarelo) 40%, transparent); }
.fonte { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
         color: var(--txt2); background: var(--vidro); border-radius: var(--r-pill); padding: 6px 12px;
         box-shadow: inset 0 0 0 1px var(--borda); }
.fonte.script { color: var(--acento); box-shadow: inset 0 0 0 1px var(--borda-viva); }
.fonte.aprendizado { color: var(--verde);
                     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 40%, transparent); }
.acoes-msg { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.acoes-msg .btn.mini { font-size: 12px; padding: 7px 12px; }
.acoes-msg .btn.on { color: var(--verde);
                     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 45%, transparent); }
.acoes-msg .btn.on-nao { color: var(--vermelho);
                     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vermelho) 45%, transparent); }

/* cartão do script sugerido dentro da resposta */
.sugestao { margin-top: 12px; display: flex; align-items: center; gap: 14px; padding: 14px 17px;
            border-radius: var(--r-3); color: var(--acento);
            background: linear-gradient(100deg, var(--acento-sv) 0%, transparent 75%);
            box-shadow: inset 0 0 0 1px var(--borda-viva); }
.sugestao .txt { flex: 1; min-width: 0; }
.sugestao .tt { font-size: 12.8px; font-weight: 700; color: var(--txt); }
.sugestao .ds { font-size: 11.8px; color: var(--txt2); margin-top: 2px; }

/* estado inicial (a porta de entrada) */
.entrada-marca { display: flex; flex-direction: column; align-items: center; justify-content: center;
                 gap: 26px; flex: 1; min-height: 0; padding: 10px 0 20px;
                 text-align: center; position: relative; }
.brilho { position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
          width: min(420px, 80%); aspect-ratio: 1; border-radius: 50%;
          background: color-mix(in srgb, var(--acento) 20%, transparent); filter: blur(85px);
          pointer-events: none; }
/* :not(.brilho) é essencial — sem ele esta regra tem a MESMA especificidade da
   de cima e, por vir depois, tornava o brilho `relative`. Aí ele deixava de ser
   decoração e passava a ocupar 420px de altura, empurrando a marca para baixo e
   criando um vazio rolável no topo do chat. */
.entrada-marca > *:not(.brilho) { position: relative; }
/* o cubo gira e o volume avança além da caixa: sem esta folga
   extra ele encosta no nome da marca */
.entrada-marca .palco { margin-bottom: 16px; }
.entrada-marca p { font-size: 14.5px; line-height: 1.65; color: var(--txt2); max-width: 430px; }
.sugestoes { display: grid; gap: 9px; width: 100%; max-width: 560px; }
.sug { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 0; width: 100%;
       cursor: pointer; text-align: left; border-radius: var(--r-3); color: var(--txt);
       background: var(--vidro); box-shadow: inset 0 0 0 1px var(--borda);
       transition: transform .14s ease, box-shadow .2s ease, background .2s ease; }
.sug:hover { box-shadow: inset 0 0 0 1px var(--borda-viva); background: var(--vidro-forte);
             transform: translateY(-1px); }
.sug span { flex: 1; font-size: 13.5px; font-weight: 500; }

/* campo de escrita */
.escrever { flex: none; padding: 0 30px 22px; }
.escrever-caixa { max-width: 820px; margin: 0 auto; border-radius: var(--r-4); padding: 13px 16px;
                  display: flex; align-items: flex-end; gap: 12px;
                  box-shadow: inset 0 0 0 1px var(--borda-viva), var(--sombra);
                  transition: box-shadow .2s ease; }
.escrever-caixa:focus-within { box-shadow: inset 0 0 0 1.6px var(--acento), var(--sombra); }
.escrever textarea { flex: 1; background: none; border: 0; resize: none; outline: none;
                     font-size: 14.5px; line-height: 1.55; max-height: 168px; padding: 5px 0;
                     color: var(--txt); }
.escrever textarea::placeholder { color: var(--txt3); }
.dica-atalho { max-width: 820px; margin: 9px auto 0; display: flex; gap: 14px;
               font-size: 11px; color: var(--txt3); }

/* ============================ cartões e listas ============================ */
.secao { font-size: 10.5px; text-transform: uppercase; letter-spacing: .15em; color: var(--txt3);
         font-weight: 800; margin: 24px 0 12px; display: flex; align-items: center; gap: 10px; }
.secao:first-child { margin-top: 0; }
.secao::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

.card { border-radius: var(--raio); padding: 14px 16px; margin-bottom: 9px; display: flex;
        align-items: center; gap: 13px; background: var(--vidro);
        box-shadow: inset 0 0 0 1px var(--borda);
        transition: transform .14s ease, box-shadow .2s ease; }
.card:hover { box-shadow: inset 0 0 0 1px var(--borda-viva); transform: translateY(-1px); }
.card .info { flex: 1; min-width: 0; cursor: pointer; }
.card .nome { font-weight: 700; font-size: 14px; word-break: break-word; }
.card .sub { color: var(--txt2); font-size: 11.8px; margin-top: 3px; line-height: 1.45;
             word-break: break-word; }
.etiquetas { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.eti { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-1); color: var(--txt2);
       background: var(--vidro-forte); box-shadow: inset 0 0 0 1px var(--borda); }
.eti.azul { color: var(--acento); box-shadow: inset 0 0 0 1px var(--borda-viva); }
.eti.verde { color: var(--verde);
             box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 38%, transparent); }
.eti.amarelo { color: var(--amarelo);
             box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amarelo) 38%, transparent); }
.estrela { background: none; border: 0; cursor: pointer; padding: 4px; color: var(--txt3);
           display: grid; place-items: center; transition: color .2s ease, transform .2s ease; }
.estrela.on { color: var(--amarelo); }
.estrela.on .ic { fill: currentColor; }
.estrela:active { transform: scale(1.25); }

.vazio { color: var(--txt2); text-align: center; padding: 54px 20px; font-size: 14px; line-height: 1.7; }
.vazio .ic { width: 34px; height: 34px; opacity: .45; margin-bottom: 12px; }

.aviso { border-radius: var(--r-3); padding: 13px 16px; margin-bottom: 14px; font-size: 13px;
         line-height: 1.6; color: var(--txt2); background: var(--acento-sv);
         box-shadow: inset 0 0 0 1px var(--borda-viva); display: flex; gap: 11px; align-items: flex-start; }
.aviso b { color: var(--txt); }
.aviso .ic { color: var(--acento); margin-top: 1px; }
.aviso.alerta { background: color-mix(in srgb, var(--amarelo) 10%, transparent);
                box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amarelo) 32%, transparent); }
.aviso.alerta .ic { color: var(--amarelo); }

/* ============================ formulários ============================ */
.form { border-radius: var(--raio); padding: 18px; margin-bottom: 14px; background: var(--vidro);
        box-shadow: inset 0 0 0 1px var(--borda); }
.campo { margin-bottom: 14px; }
.campo:last-child { margin-bottom: 0; }
.campo label { display: block; color: var(--txt2); font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.campo input, .campo select, .campo textarea {
  width: 100%; background: var(--vidro-forte); border: 0; border-radius: var(--r-3); padding: 12px 14px;
  color: var(--txt); box-shadow: inset 0 0 0 1.4px var(--borda); transition: box-shadow .2s ease; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; box-shadow: inset 0 0 0 1.6px var(--acento); }
.campo textarea { min-height: 88px; resize: vertical;
                  font-family: var(--f-mono); font-size: 13px; }
.campo input[type="checkbox"] { width: auto; margin-right: 9px; accent-color: var(--acento2); }
.dica { color: var(--txt2); font-size: 11.5px; margin-top: 7px; line-height: 1.6; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; }
.linha > * { flex: 1; min-width: 140px; }

/* ============================ escolha de tema ============================ */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 11px; }
.tema-op { border: 0; padding: 0; cursor: pointer; border-radius: var(--r-3); overflow: hidden;
           background: var(--vidro); box-shadow: inset 0 0 0 2px var(--borda);
           transition: transform .14s ease, box-shadow .2s ease; }
.tema-op:active { transform: scale(.96); }
.tema-op.on { box-shadow: inset 0 0 0 2px var(--acento); }
.tema-visu { height: 62px; position: relative; }
.tema-visu .pt { position: absolute; top: 9px; left: 9px; width: 20px; height: 20px; border-radius: var(--r-1); }
.tema-visu .br { position: absolute; bottom: 9px; left: 9px; right: 9px; height: 7px;
                 border-radius: var(--r-1); opacity: .85; }
.tema-nome { padding: 9px 10px; font-size: 12px; font-weight: 700; text-align: center; color: var(--txt); }

/* ============================ drive ============================ */
.migalhas { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.migalhas button { background: none; border: 0; color: var(--acento); cursor: pointer;
                   font-weight: 700; font-size: 13px; padding: 5px 8px; border-radius: var(--r-2);
                   font-family: inherit; }
.migalhas button:hover { background: var(--acento-sv); }
.migalhas .sep { color: var(--txt3); }
.pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
          gap: 9px; margin-bottom: 16px; }
.pasta { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 0; width: 100%;
         cursor: pointer; text-align: left; border-radius: var(--r-3); color: var(--txt);
         font-weight: 700; font-size: 13px; background: var(--vidro);
         box-shadow: inset 0 0 0 1px var(--borda); transition: transform .14s ease, box-shadow .2s ease; }
.pasta:hover { box-shadow: inset 0 0 0 1px var(--borda-viva); transform: translateY(-1px); }
.pasta .qt { margin-left: auto; font-size: 11px; color: var(--txt3); font-weight: 600; }
.barra { height: 6px; border-radius: var(--r-1); background: var(--vidro-forte); overflow: hidden; margin-top: 8px; }
.barra i { display: block; height: 100%; border-radius: var(--r-1);
           background: linear-gradient(90deg, var(--acento2), var(--acento)); transition: width .25s ease; }

/* ============================ execução do script ============================
   Não é um terminal: é o acompanhamento de uma tarefa. Painel de vidro, texto
   grande, e cada linha da saída vira um item legível (ver classificarLinha no
   app.js) — em vez de um bloco preto de texto cru.                            */
.tela { position: fixed; inset: 0; z-index: 200; background: var(--veu-tela);
        backdrop-filter: var(--filtro-fundo);
        -webkit-backdrop-filter: var(--filtro-fundo);
        display: none; align-items: stretch; justify-content: center;
        padding: clamp(10px, 1.8vw, 30px); }
/* a tela do terminal hospeda a ÁREA (que pode ter vários painéis);
   as outras telas cheias continuam com o painel centrado */
.tela:not(#tela) { align-items: center; }

/* QUEM DESFOCA É O FUNDO (.tela), não o painel. Só uma camada tem
   backdrop-filter: aninhado, o Chromium larga o de dentro quando ele cobre o de
   fora por inteiro — no celular o app aparecia NÍTIDO por cima do terminal.
   Como o fundo já vem desfocado, o painel só precisa da tinta: ele fica sobre
   uma base borrada e lê como vidro do mesmo jeito, e a área EM VOLTA também
   fica desfocada, que é o que se espera de um modal. */
.exec, .editor, .leitor, .visor, .modal-caixa {
  background: var(--vidro-painel);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.tela.on { display: flex; animation: apaga .22s ease; }
@keyframes apaga { from { opacity: 0; } to { opacity: 1; } }


/* ==================== ÁREA DOS TERMINAIS ====================
   Vários painéis ao mesmo tempo. A grade é só CSS: o JS diz quantos são e qual
   o arranjo, e as regras abaixo fazem o resto. Cada painel continua sendo o
   mesmo `.exec` de sempre — o que mudou é que agora eles convivem. */
.exec-area { width: 100%; height: 100%; display: flex; flex-direction: column;
             gap: 10px; min-height: 0; }

.barra-terminais { flex: none; display: flex; align-items: center; gap: 10px;
                   padding: 0 2px; }
.barra-terminais .conta { font-size: 12px; font-weight: 600; color: var(--txt2);
                          margin-right: auto; }
.arranjos { display: flex; gap: 4px; padding: 3px; border-radius: var(--r-2);
            background: var(--vidro); box-shadow: inset 0 0 0 1px var(--borda); }
.arr-bt { border: 0; cursor: pointer; font-family: inherit; font-size: 11.5px;
          font-weight: 700; color: var(--txt3); background: transparent;
          padding: 6px 11px; border-radius: var(--r-2);
          transition: color .18s ease, background .18s ease; }
.arr-bt:hover { color: var(--txt2); }
.arr-bt.on { color: var(--acento); background: var(--acento-sv); }

/* fichas dos terminais abertos: mostrar/esconder sem parar a execução */
.fichas-term { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto;
               max-width: 55%; overflow: hidden; }
.ficha { display: flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
         font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--txt2);
         background: var(--vidro); padding: 6px 8px 6px 10px; border-radius: var(--r-pill);
         box-shadow: inset 0 0 0 1px var(--borda); max-width: 210px;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         transition: color .18s ease, box-shadow .2s ease, opacity .2s ease; }
.ficha:hover { color: var(--txt); }
.ficha.off { opacity: .45; }
.ficha.pergunta { color: var(--acento); box-shadow: inset 0 0 0 1.4px var(--acento); }
.ficha i { display: grid; place-items: center; width: 17px; height: 17px; flex: none;
           border-radius: 50%; opacity: .5; }
.ficha i:hover { opacity: 1; background: var(--vidro-forte); }
.ficha .ponto { flex: none; }

/* ponto de estado, reaproveitado na lista de execuções e nas fichas */
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--txt3); }
.ponto.rodando { background: var(--amarelo); animation: pisca 1.6s ease-in-out infinite; }
.ponto.pergunta { background: var(--acento); }
.ponto.fim { background: var(--verde); }
.ponto.navegador { background: var(--acento); }

/* uma seção com um botão no canto */
.secao-acao { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* O espaço é uma ÁRVORE de divisões, desenhada como caixotes flex aninhados:
   cada nó divide o seu retângulo em dois e cada folha é um terminal. Por
   construção não existe sobreposição — dois painéis nunca disputam a mesma
   área, porque cada um ocupa um retângulo que ninguém mais usa.
   A grade 2x2 de antes não dava conta: quatro lado a lado não cabiam nela. */
.grade-exec { flex: 1; min-height: 0; display: flex; position: relative; }
.grade-exec > .no-exec, .grade-exec > .exec { flex: 1; min-width: 0; min-height: 0; }

.no-exec { display: flex; flex: 1; min-width: 0; min-height: 0; }
.no-exec.em-linha  { flex-direction: row; }
.no-exec.em-coluna { flex-direction: column; }
/* o primeiro filho fica com a fração --fr; o segundo pega o resto */
.no-exec > :first-child { flex: 0 0 calc(var(--fr, .5) * 100% - 5px); min-width: 0; min-height: 0; }
.no-exec > :last-child  { flex: 1 1 0; min-width: 0; min-height: 0; }

/* barra entre dois vizinhos: arrasta para mudar a proporção da divisão */
.divisor-no { flex: 0 0 10px; position: relative; z-index: 3; }
.divisor-no.vert  { cursor: col-resize; }
.divisor-no.horiz { cursor: row-resize; }
.divisor-no::after { content: ""; position: absolute; inset: 0; margin: auto;
                     border-radius: var(--r-1); background: var(--borda);
                     transition: background .15s ease; }
.divisor-no.vert::after  { width: 3px; height: 46px; }
.divisor-no.horiz::after { width: 46px; height: 3px; }
.divisor-no:hover::after { background: var(--acento); }
body.redimensionando { cursor: col-resize; user-select: none; }

.grade-exec .exec.oculto { display: none; }
/* um painel sozinho fica na medida de leitura */
.grade-exec.solo { justify-content: center; }
.grade-exec.solo > .exec { max-width: 1000px; }

/* o alvo do encaixe: um retângulo posicionado por JS sobre o painel de destino */
.alvo-encaixe { display: none; position: absolute; pointer-events: none; z-index: 9;
                border-radius: var(--r-4); place-items: center;
                background: var(--acento-sv);
                box-shadow: inset 0 0 0 2px var(--acento);
                font-family: var(--f-titulo); font-size: 13px; font-weight: 600;
                color: var(--acento); transition: all .09s ease-out; }
.grade-exec.arrastando .exec { transition: none; }
.grade-exec .exec.pegando { opacity: .5; }
.exec-topo { cursor: grab; }
.exec-topo:active { cursor: grabbing; }

/* Com vários painéis, o tamanho quem manda é a grade — o max-width de painel
   único faria cada um encolher para 880px no meio da sua célula. */
.grade-exec .exec { width: auto; max-width: none; height: auto; min-width: 0; min-height: 0; }

/* qual painel está em foco, e qual está pedindo resposta */
.grade-exec .exec.focado { box-shadow: inset 0 0 0 1.5px var(--borda-viva),
                                       var(--sombra-painel); }
.grade-exec .exec.pedindo { box-shadow: inset 0 0 0 2px var(--acento),
                                        var(--sombra-painel); }

/* Com mais de um painel a área usa a tela inteira: manter a moldura do véu em
   volta de quatro terminais só rouba espaço de quem tem monitor grande.
   Quem responde é a classe .solo, posta pelo JS: um seletor de irmãos casaria
   também com painel escondido (que segue no DOM) e a altura do terminal
   mudava alguns pixels ao esconder a janela do navegador. */
.tela:has(.grade-exec:not(.solo)) { padding: 10px; }

@media (max-width: 999px) {
  /* espaço não dá para lado a lado: empilha sempre */
  /* espaço estreito: as divisões horizontais viram verticais */
  .no-exec.em-linha { flex-direction: column; }
  .barra-terminais .conta { display: none; }
  .arr-bt { padding: 6px 9px; }
}
@media (max-width: 699px) {
  /* no celular só cabe um de cada vez; a barra vira o seletor */
  /* no celular só cabe um de cada vez: a árvore vira pilha e vale o foco */
  .no-exec { flex-direction: column !important; }
  .no-exec > :first-child { flex: 1 1 0 !important; }
  .divisor-no { display: none; }
  .grade-exec .exec { display: none !important; }
  .grade-exec .exec.focado:not(.oculto) { display: flex !important; }
  .grade-exec.solo > .exec { max-width: none; }
  .alvo-encaixe { display: none !important; }
  .exec-area { gap: 6px; }
  .barra-terminais { padding: calc(4px + var(--seguro-t)) 4px 0; }
}

.exec { width: 100%; max-width: 880px; height: min(88vh, 900px); display: flex;
        flex-direction: column; overflow: hidden; border-radius: var(--r-5);
        box-shadow: inset 0 0 0 1px var(--borda), var(--sombra-painel);
        animation: sobe .34s cubic-bezier(.2,.9,.3,1); }
@keyframes sobe { from { transform: translateY(26px) scale(.98); opacity: 0; }
                  to   { transform: none; opacity: 1; } }

.exec-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; flex: none;
             box-shadow: inset 0 -1px 0 var(--borda); }
.exec-selo { width: 38px; height: 38px; border-radius: var(--r-3); flex: none; display: grid;
             place-items: center; color: var(--sobre-primario);
             background: linear-gradient(135deg, var(--acento2), var(--acento));
             box-shadow: 0 6px 20px color-mix(in srgb, var(--acento2) 40%, transparent); }
.exec-tit { flex: 1; min-width: 0; }
.exec-tit b { display: block; font-family: var(--f-titulo); font-weight: 600;
              font-size: 15px; letter-spacing: -.02em;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-tit small { display: block; font-size: 11.5px; color: var(--txt2); margin-top: 2px; }

.estado { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill);
          white-space: nowrap; color: var(--txt2); background: var(--vidro-forte); }
.estado.rodando { color: var(--amarelo);
                  background: color-mix(in srgb, var(--amarelo) 13%, transparent); }
.estado.pergunta { color: var(--acento); background: var(--acento-sv); animation: respira 1.7s infinite; }
@keyframes respira { 50% { box-shadow: 0 0 0 4px var(--acento-sv); } }
.estado.ok { color: var(--verde); background: color-mix(in srgb, var(--verde) 13%, transparent); }
.estado.erro { color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 13%, transparent); }

/* barra de progresso — só aparece quando o script imprime [n/total] */
.exec-progresso { height: 3px; flex: none; background: var(--borda); display: none; }
.exec-progresso.on { display: block; }
.exec-progresso i { display: block; height: 100%; width: 0;
                    background: linear-gradient(90deg, var(--acento2), var(--acento));
                    transition: width .35s ease; }

/* O CORPO É UM TERMINAL de verdade: texto corrido em largura fixa, com
   quebra de linha preservada. O que mudou em relação a um console comum é só
   o fundo — transparente, deixando passar o blur do painel — e a cor por tipo
   de linha, que é o que um terminal bom já faz com ANSI. */
.exec-corpo { flex: 1; overflow: auto; min-height: 0; padding: 18px 20px;
              background: transparent; color: var(--txt);
              font-family: var(--f-mono);
              font-size: 12.8px; line-height: 1.62; letter-spacing: -.01em;
              white-space: pre-wrap; word-break: break-word;
              font-variant-ligatures: none; }
.exec-corpo .l-ok      { color: color-mix(in srgb, var(--verde) 78%, var(--txt)); }
.exec-corpo .l-erro    { color: color-mix(in srgb, var(--vermelho) 84%, var(--txt)); }
.exec-corpo .l-aviso   { color: color-mix(in srgb, var(--amarelo) 62%, var(--txt)); }
.exec-corpo .l-passo   { color: var(--acento); }
.exec-corpo .l-titulo  { color: var(--txt); font-weight: 500; }
.exec-corpo .l-sep     { color: var(--txt3); }
.exec-corpo .l-esperando { color: var(--acento); font-weight: 500; }
.exec-corpo .cursor { display: inline-block; width: 7px; height: 1.05em;
                      background: var(--acento); vertical-align: -3px;
                      margin-left: 3px; animation: pisca 1.05s steps(2) infinite; }

.exec-pe { flex: none; padding: 14px 16px calc(14px + var(--seguro-b));
           box-shadow: inset 0 1px 0 var(--borda); }
/* a pergunta do script, escrita como pergunta — não como prompt de console */
.rotulo-perg { font-size: 14px; color: var(--txt); font-weight: 600; margin-bottom: 11px;
               display: flex; align-items: flex-start; gap: 9px; line-height: 1.5;
               font-family: var(--f-corpo); }
.rotulo-perg .ic { color: var(--acento); margin-top: 2px; flex: none; }
.opcoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.opcao { border: 0; cursor: pointer; padding: 11px 16px; border-radius: var(--r-3); font-weight: 700;
         font-size: 14px; color: var(--txt); background: var(--vidro-forte);
         box-shadow: inset 0 0 0 1.5px var(--borda); font-family: inherit;
         transition: transform .12s ease, box-shadow .2s ease; }
.opcao:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }
.opcao:active { transform: scale(.95); }
.opcao.sim { color: var(--verde);
             box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--verde) 50%, transparent); }
.opcao.nao { color: var(--vermelho);
             box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vermelho) 50%, transparent); }
.opcao.num { min-width: 48px; }
.opcao.escolhida { color: var(--acento); background: var(--acento-sv);
                   box-shadow: inset 0 0 0 1.5px var(--acento); }
.opcao .peq { display: block; font-size: 10px; font-weight: 500; color: var(--txt3); margin-top: 3px; }
.entrada-linha { display: flex; gap: 9px; }
.entrada-linha input, .entrada-linha textarea {
  flex: 1; background: var(--vidro-forte); border: 0; border-radius: var(--r-3); padding: 13px 15px;
  color: var(--txt); box-shadow: inset 0 0 0 1.4px var(--borda);
  font-family: var(--f-corpo); font-size: 15px; }
/* colar lista (remessas, volumes) pede largura fixa para conferir na hora */
.entrada-linha textarea { font-family: var(--f-mono); font-size: 13.5px; }
.entrada-linha input:focus, .entrada-linha textarea:focus {
  outline: none; box-shadow: inset 0 0 0 1.6px var(--acento); }
.entrada-linha textarea { min-height: 80px; resize: vertical; }
.entrada-linha input:disabled, .entrada-linha textarea:disabled { opacity: .4; }

/* perguntas do script (montar respostas) */
.pergunta { border-radius: var(--r-3); padding: 13px; margin-bottom: 9px; background: var(--vidro-forte);
            box-shadow: inset 0 0 0 1px var(--borda); transition: opacity .2s ease; }
.pergunta.pulada { opacity: .42; }
.pergunta.pulada .p-corpo { display: none; }
/* o menu que o script imprimiu antes do prompt — é o que dá sentido a uma
   pergunta como "Opção (ENTER = 1):" fora do terminal */
.p-menu { margin: 0 0 9px; padding: 9px 11px; border-radius: var(--r-2);
          background: color-mix(in srgb, var(--txt) 5%, transparent);
          font-family: var(--f-mono);
          font-size: 11.5px; line-height: 1.55; color: var(--txt2);
          white-space: pre-wrap; overflow-x: auto; }
/* link dentro de um aviso (trocar a fonte das perguntas) */
.aviso a.lnk { color: var(--acento); cursor: pointer; font-weight: 600;
               white-space: nowrap; }
.p-topo { display: flex; align-items: flex-start; gap: 10px; }
.p-num { flex: none; width: 22px; height: 22px; border-radius: var(--r-1); background: var(--acento2);
         color: var(--sobre-primario); font-size: 11px; font-weight: 800; display: grid; place-items: center;
         margin-top: 1px; }
.pergunta.pulada .p-num { background: var(--borda); color: var(--txt3); }
.p-txt { flex: 1; font-size: 13px; line-height: 1.5; word-break: break-word; }
.p-pular { flex: none; width: 28px; height: 28px; border-radius: var(--r-2); cursor: pointer; border: 0;
           background: var(--vidro); color: var(--verde); display: grid; place-items: center;
           box-shadow: inset 0 0 0 1px var(--borda); transition: transform .12s ease; }
.p-pular:active { transform: scale(.9); }
.pergunta.pulada .p-pular { color: var(--txt3); }
.p-corpo { margin-top: 11px; }
.p-valor { width: 100%; background: var(--vidro); border: 0; border-radius: var(--r-2); padding: 10px 12px;
           color: var(--txt); box-shadow: inset 0 0 0 1.4px var(--borda); font-size: 14px; }
.p-valor:focus { outline: none; box-shadow: inset 0 0 0 1.6px var(--acento); }
textarea.p-valor { min-height: 66px; resize: vertical;
                   font-family: var(--f-mono); font-size: 13px; }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }

/* ============================ relógio (agenda) ============================ */
.relogio { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px;
           border-radius: var(--raio); background: var(--vidro-forte);
           box-shadow: inset 0 0 0 1px var(--borda); }
.roda { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.roda .num { font-family: var(--f-titulo); font-size: 38px; font-weight: 700;
             font-variant-numeric: tabular-nums; min-width: 68px; text-align: center; }
.roda button { width: 48px; height: 34px; border-radius: var(--r-2); border: 0; cursor: pointer;
               background: var(--vidro); color: var(--txt2); display: grid; place-items: center;
               box-shadow: inset 0 0 0 1px var(--borda); transition: transform .12s ease, color .2s ease; }
.roda button:hover { color: var(--acento); box-shadow: inset 0 0 0 1px var(--borda-viva); }
.roda button:active { transform: scale(.9); }
.doispontos { font-family: var(--f-titulo); font-size: 32px; font-weight: 700; color: var(--txt3);
              margin-bottom: 6px; }
/* as 24 horas do dia em grade: marcar 7, 12 e 18 tem de ser um gesto só */
.grade-horas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.hora-bt { border: 0; cursor: pointer; font-family: inherit; font-size: 12px;
           font-weight: 600; padding: 8px 0; border-radius: var(--r-2); color: var(--txt2);
           background: var(--vidro-forte); box-shadow: inset 0 0 0 1px var(--borda);
           transition: transform .12s ease, background .18s ease, color .18s ease; }
.hora-bt:hover { color: var(--txt); }
.hora-bt:active { transform: scale(.94); }
.hora-bt.on { color: var(--sobre-acento); background: var(--acento);
              box-shadow: inset 0 0 0 1px var(--acento); }
@media (max-width: 699px) { .grade-horas { grid-template-columns: repeat(6, 1fr); } }

.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 11px; }
.dia { padding: 12px 2px; border-radius: var(--r-2); cursor: pointer; border: 0; font-family: inherit;
       background: var(--vidro-forte); color: var(--txt2); font-weight: 700; font-size: 11.5px;
       text-align: center; text-transform: capitalize; box-shadow: inset 0 0 0 1.4px var(--borda);
       transition: transform .12s ease, color .2s ease, box-shadow .2s ease; }
.dia:active { transform: scale(.93); }
.dia.on { color: var(--sobre-primario); background: linear-gradient(135deg, var(--acento2), var(--acento));
          box-shadow: none; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.chip { background: var(--vidro-forte); color: var(--txt2); border: 0; cursor: pointer;
        padding: 7px 14px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
        font-family: inherit; box-shadow: inset 0 0 0 1px var(--borda);
        transition: color .2s ease, box-shadow .2s ease; }
.chip:hover { color: var(--acento); box-shadow: inset 0 0 0 1px var(--borda-viva); }

/* ============================ histórico ============================ */
.item { border-radius: var(--r-3); padding: 13px 15px; margin-bottom: 8px; display: flex;
        align-items: center; gap: 12px; cursor: pointer; background: var(--vidro);
        box-shadow: inset 0 0 0 1px var(--borda); transition: transform .14s ease, box-shadow .2s ease; }
.item:hover { box-shadow: inset 0 0 0 1px var(--borda-viva); }
.item:active { transform: scale(.995); }
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ponto.rodando { background: var(--amarelo); animation: pulsa 1.4s infinite; }
.ponto.concluido { background: var(--verde); }
.ponto.erro { background: var(--vermelho); }
.ponto.cancelado { background: var(--txt3); }
@keyframes pulsa { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* ============================ modal / toast ============================ */
/* O fundo do modal desfoca o app, com o mesmo véu por tema das telas cheias —
   véu escuro fixo fazia o vidro branco dos temas claros virar um cinza chapado,
   e um blur fraco só escurecia sem parecer vidro. */
.modal { position: fixed; inset: 0; z-index: 250; background: var(--veu-tela);
         backdrop-filter: var(--filtro-fundo);
         -webkit-backdrop-filter: var(--filtro-fundo);
         display: none; align-items: center; justify-content: center; padding: 16px; }
.modal.on { display: flex; animation: apaga .2s ease; }
.modal-caixa { width: 100%; max-width: 480px; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
               border-radius: var(--r-4); padding: 22px;
               box-shadow: inset 0 0 0 1px var(--borda), var(--sombra);
               animation: sobe2 .3s cubic-bezier(.2,.9,.3,1); }
@keyframes sobe2 { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-tit { font-family: var(--f-titulo); font-size: 17px; font-weight: 600; margin-bottom: 16px;
             display: flex; align-items: center; gap: 10px; }
.paleta { display: flex; gap: 9px; flex-wrap: wrap; }
.cor { width: 38px; height: 38px; border-radius: var(--r-2); cursor: pointer; border: 2.5px solid transparent;
       transition: transform .14s ease; }
.cor:active { transform: scale(.9); }
.cor.on { border-color: var(--txt); transform: scale(1.08); }
.icones-op { display: flex; gap: 7px; flex-wrap: wrap; }
.ico-op { width: 44px; height: 44px; border-radius: var(--r-2); cursor: pointer; border: 0;
          background: var(--vidro-forte); color: var(--txt2); display: grid; place-items: center;
          box-shadow: inset 0 0 0 1.4px var(--borda); transition: transform .14s ease; }
.ico-op:active { transform: scale(.9); }
.ico-op.on { color: var(--acento); box-shadow: inset 0 0 0 1.6px var(--acento); }

.toast { position: fixed; left: 50%; bottom: calc(30px + var(--seguro-b)); z-index: 300;
         transform: translateX(-50%) translateY(18px); opacity: 0; pointer-events: none;
         padding: 13px 20px; border-radius: var(--r-3); max-width: 90vw; font-weight: 600; font-size: 14px;
         display: flex; align-items: center; gap: 10px;
         background: var(--vidro-forte); backdrop-filter: blur(20px);
         box-shadow: inset 0 0 0 1px var(--borda), var(--sombra);
         transition: opacity .25s ease, transform .25s ease; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.erro { color: var(--vermelho);
              box-shadow: inset 0 0 0 1px var(--vermelho), var(--sombra); }

/* ============================ contexto (coluna 3) ============================ */
.ctx-card { padding: 13px 14px; border-radius: var(--r-3); background: var(--vidro);
            box-shadow: inset 0 0 0 1px var(--borda); }
.ctx-card .tt { display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
                font-size: 12px; font-weight: 700; color: var(--txt); }
.ctx-card .tx { font-size: 11.5px; line-height: 1.55; color: var(--txt2); }
.ctx-card .pe { font-size: 10px; color: var(--txt3); margin-top: 7px; }

/* =============================================================================
   CELULAR e TABLET — componentes próprios
============================================================================= */
.so-celular { display: none; }

/* topo do celular */
.topo-cel { display: none; align-items: center; gap: 11px; flex: none;
            padding: calc(10px + var(--seguro-t)) 14px 10px;
            box-shadow: inset 0 -1px 0 var(--borda); z-index: 30; }
.topo-cel .tit { flex: 1; min-width: 0; }
.topo-cel .tit b { display: block; font-family: var(--f-titulo); font-size: 14.5px;
                   font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-cel .tit small { display: block; font-size: 10.5px; color: var(--txt2); margin-top: 1px; }

/* navegação inferior */
.abas { display: none; align-items: center; flex: none; padding: 9px 6px calc(9px + var(--seguro-b));
        box-shadow: inset 0 1px 0 var(--borda); z-index: 30; }
.aba-bt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
          border: 0; background: none; cursor: pointer; padding: 6px 2px; border-radius: var(--r-3);
          color: var(--txt3); font-size: 9.5px; font-weight: 700; font-family: inherit;
          transition: color .2s ease; min-height: 48px; }
.aba-bt.on { color: var(--acento); }
.aba-bt.on .ic { transform: translateY(-1px); }

/* fundo escuro da gaveta */
.veu { position: fixed; inset: 0; z-index: 39; background: rgba(4,5,12,.55);
       backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.veu.on { opacity: 1; pointer-events: auto; }


/* ======================= EDITOR DE SCRIPT =======================
   Realce de sintaxe sem biblioteca: um <pre> pintado ATRÁS de um <textarea>
   transparente. Os dois precisam ter exatamente a mesma métrica de texto
   (fonte, tamanho, entrelinha, padding, tab-size, white-space) — qualquer
   diferença e o cursor desalinha do código. Por isso as regras dos dois
   ficam juntas, na mesma declaração: é a única forma de não desencontrarem
   com o tempo.                                                             */
.editor { width: 100%; max-width: min(1800px, 97vw); height: min(94vh, 1200px); display: flex;
          flex-direction: column; overflow: hidden; border-radius: var(--r-5);
          box-shadow: inset 0 0 0 1px var(--borda), var(--sombra-painel);
          animation: sobe .34s cubic-bezier(.2,.9,.3,1); }

.ed-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; flex: none;
           box-shadow: inset 0 -1px 0 var(--borda); }
.ed-selo { flex: none; width: 34px; height: 34px; border-radius: var(--r-2); display: grid;
           place-items: center; background: var(--acento-sv); color: var(--acento); }
.ed-tit { flex: 1; min-width: 0; }
.ed-tit b { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: 15px;
            letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-tit small { display: block; font-size: 11.5px; color: var(--txt2); margin-top: 2px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-marca { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill);
            white-space: nowrap; color: var(--txt3); background: var(--vidro-forte); }
.ed-marca.sujo { color: var(--amarelo);
                 background: color-mix(in srgb, var(--amarelo) 13%, transparent); }

/* a barra de erro de sintaxe: avisa, não impede — às vezes se salva no meio */
.ed-aviso { display: none; flex: none; align-items: center; gap: 9px; font-size: 12.5px;
            font-weight: 600; padding: 10px 18px; color: var(--amarelo);
            background: color-mix(in srgb, var(--amarelo) 11%, transparent);
            box-shadow: inset 0 -1px 0 var(--borda); }
.ed-aviso.on { display: flex; }
.ed-aviso .ic { flex: none; }

.ed-area { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* a coluna dos números: fica fora da rolagem e é empurrada por JS, senão
   ela rolaria junto na horizontal e sairia da tela */
.ed-num { position: absolute; left: 0; top: 0; bottom: 0; width: 58px; z-index: 3;
          overflow: hidden; text-align: right; pointer-events: none;
          background: color-mix(in srgb, var(--txt) 4%, transparent);
          box-shadow: inset -1px 0 0 var(--borda); }
.ed-num i { display: block; padding: 16px 11px 16px 0; font-style: normal;
            font-family: var(--f-mono);
            font-size: 13px; line-height: 1.62; letter-spacing: 0;
            color: color-mix(in srgb, var(--txt) 40%, transparent);
            white-space: pre; will-change: transform; }

.ed-cor, .ed-txt {
  position: absolute; inset: 0; margin: 0; border: 0; z-index: 1;
  padding: 16px 20px 16px 70px;
  font-family: var(--f-mono);
  font-size: 13px; line-height: 1.62; letter-spacing: 0; font-weight: 400;
  white-space: pre; word-break: normal; overflow-wrap: normal;
  tab-size: 4; -moz-tab-size: 4; font-variant-ligatures: none;
  background: transparent;
}
.ed-cor { pointer-events: none; overflow: hidden; color: var(--txt); }
.ed-txt { z-index: 2; overflow: auto; resize: none; outline: none;
          color: transparent; caret-color: var(--acento);
          -webkit-text-fill-color: transparent; }
.ed-txt::selection { background: color-mix(in srgb, var(--acento) 34%, transparent); }
.ed-txt[readonly] { caret-color: transparent; }

/* as cores dos símbolos saem das mesmas variáveis dos temas — o editor
   acompanha o tema claro/escuro sem paleta própria */
.ed-cor .t-com { color: color-mix(in srgb, var(--txt) 52%, transparent);
                 font-style: italic; }
.ed-cor .t-txt { color: color-mix(in srgb, var(--verde) 78%, var(--txt)); }
.ed-cor .t-pal { color: var(--acento); font-weight: 500; }
.ed-cor .t-fun { color: var(--txt); font-weight: 600; }
.ed-cor .t-num { color: color-mix(in srgb, var(--amarelo) 62%, var(--txt)); }
.ed-cor .t-emb { color: var(--acento2); }
.ed-cor .t-dec { color: color-mix(in srgb, var(--amarelo) 62%, var(--txt)); font-weight: 500; }

.ed-pe { flex: none; display: flex; align-items: center; gap: 9px;
         padding: 12px 16px calc(12px + var(--seguro-b));
         box-shadow: inset 0 1px 0 var(--borda); }
.ed-pe .dica { font-size: 11.5px; color: var(--txt3); margin-right: auto;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* uma versão guardada, na janela de histórico */
.ed-versao { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
             border-radius: var(--r-3); background: var(--vidro-forte); margin-bottom: 7px;
             box-shadow: inset 0 0 0 1px var(--borda); }
.ed-versao .info { flex: 1; min-width: 0; }
.ed-versao .nome { font-size: 13.5px; font-weight: 600; }
.ed-versao .sub { font-size: 11.5px; color: var(--txt3); margin-top: 2px; }


/* ================= NAVEGADOR DO SCRIPT (espelho por CDP) =================
   O Chromium que o script abriu aparece aqui dentro: o servidor recebe os
   quadros JPEG do screencast e manda por WebSocket. Como é imagem, o clique
   precisa ser convertido de volta para pixel CSS da página — a conta está no
   app.js, e depende da largura que vem junto de cada quadro.               */
.exec-abas { flex: none; display: flex; gap: 4px; padding: 0 16px 10px; }
.ex-aba { border: 0; cursor: pointer; font-family: inherit; font-size: 12.5px;
          font-weight: 700; color: var(--txt3); background: transparent;
          padding: 7px 13px; border-radius: var(--r-2); display: flex; align-items: center;
          gap: 7px; transition: color .18s ease, background .18s ease; }
.ex-aba:hover { color: var(--txt2); }
.ex-aba.on { color: var(--acento); background: var(--acento-sv); }
.ex-aba .ic { flex: none; }

/* O miolo do painel. Em coluna mostra um de cada vez (as abas escolhem); em
   tela grande vira linha e os dois aparecem juntos. */
.exec-meio { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.exec-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* A JANELA do navegador: um painel como qualquer outro da árvore, só que o
   corpo dele é o espelho em vez da saída. Antes o espelho era uma coluna
   DENTRO do terminal, e os dois brigavam pela mesma largura; separado, cada um
   tem a sua janela e o divisor entre elas é o mesmo dos outros painéis. */
/* Quem reparte o espaço entre o terminal e o navegador é a árvore de divisões
   (o --fr do nó pai, calculado em ajustarFrNavegador): o quadro pede a largura
   que a altura lhe permite e o terminal fica com o resto, até a largura de
   leitura de sempre. Antes era um max-width no painel do terminal, porque o
   espelho morava dentro dele e os dois disputavam a mesma largura. */
.janela-nav .exec-topo { cursor: grab; }
.janela-nav .exec-selo { color: var(--acento); }

.nav-barra { flex: none; display: flex; align-items: center; gap: 7px;
             padding: 0 14px 11px; }
.nav-barra input { flex: 1; min-width: 0; background: var(--vidro-forte); border: 0;
                   border-radius: var(--r-2); padding: 9px 13px; color: var(--txt);
                   box-shadow: inset 0 0 0 1.3px var(--borda);
                   font-family: var(--f-mono);
                   font-size: 12px; }
.nav-barra input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--acento); }
.nav-barra select { flex: none; max-width: 200px; background: var(--vidro-forte);
                    border: 0; border-radius: var(--r-2); padding: 9px 11px; color: var(--txt2);
                    box-shadow: inset 0 0 0 1.3px var(--borda);
                    font-family: inherit; font-size: 12px; display: none; }
.nav-barra select.on { display: block; }

/* fundo xadrez discreto: deixa claro onde acaba a página e começa o painel */
.nav-tela { flex: 1; min-height: 0; overflow: hidden; position: relative;
            background-color: color-mix(in srgb, var(--txt) 5%, transparent);
            background-image:
              linear-gradient(45deg, color-mix(in srgb, var(--txt) 4%, transparent) 25%, transparent 25%),
              linear-gradient(-45deg, color-mix(in srgb, var(--txt) 4%, transparent) 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--txt) 4%, transparent) 75%),
              linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--txt) 4%, transparent) 75%);
            background-size: 18px 18px;
            background-position: 0 0, 0 9px, 9px -9px, -9px 0;
            /* a faixa PRECISA ser limitada: com faixa automática o max-height
               do quadro fica circular (a faixa mede pela imagem, a imagem pela
               faixa) e o Chromium ignora — aí a página saía cortada embaixo */
            display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
            place-items: center; cursor: default; }
.nav-tela:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acento-sv); }
.nav-tela.vivo { cursor: crosshair; }
/* O quadro cabe INTEIRO, como em qualquer visualizador de tela remota: a roda
   do mouse rola a página espelhada, não a caixa, então o que ficasse fora do
   enquadramento seria inalcançável. */
/* max-*: 100% com width/height auto mantém a CAIXA do elemento igual à imagem
   renderizada — é disso que depende a conta do clique (pixel de imagem para
   pixel CSS da página). object-fit faria a caixa ser a do container e o clique
   cairia torto. */
.navQuadro { display: block; max-width: 100%; max-height: 100%;
             width: auto; height: auto; user-select: none;
             -webkit-user-drag: none; }
.navQuadro[src=""] { display: none; }

.nav-recado { position: absolute; inset: 0; display: grid; place-items: center;
              text-align: center; padding: 30px; gap: 10px; color: var(--txt3);
              font-size: 13px; line-height: 1.55; }
.nav-recado .ic { width: 34px; height: 34px; opacity: .5; }
.nav-recado.off { display: none; }

.nav-pe { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 14px 0;
          font-size: 11.5px; color: var(--txt3); }
.nav-pe b { color: var(--txt2); font-weight: 600; }


/* ======================= VISOR DE ARQUIVOS =======================
   Mesma família do leitor e do terminal: tela cheia de vidro por cima do app.
   PDF e texto entram em <iframe> porque são servidos pelo NOSSO endpoint —
   mesma origem, então aqui não há o X-Frame-Options que barra site de fora. */
.visor { width: 100%; max-width: min(1280px, 96vw); height: min(94vh, 1200px);
         display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-5);
         box-shadow: inset 0 0 0 1px var(--borda), var(--sombra-painel);
         animation: sobe .34s cubic-bezier(.2,.9,.3,1); }
.vis-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px;
            box-shadow: inset 0 -1px 0 var(--borda); }
.vis-selo { flex: none; width: 34px; height: 34px; border-radius: var(--r-2); display: grid;
            place-items: center; background: var(--acento-sv); color: var(--acento); }
.vis-tit { flex: 1; min-width: 0; }
.vis-tit b { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: 15px;
             letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-tit small { display: block; font-size: 11.5px; color: var(--txt2); margin-top: 2px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vis-corpo { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto;
             padding: 16px; background: color-mix(in srgb, var(--txt) 4%, transparent); }
.vis-img { max-width: 100%; max-height: 100%; border-radius: var(--r-3); display: block; }
.vis-media { max-width: 100%; max-height: 100%; border-radius: var(--r-3); }
/* o quadro precisa de altura PRÓPRIA: dentro de um grid place-items:center o
   height:100% fica circular e o PDF nasce com 0 de altura */
.vis-corpo:has(.vis-quadro) { display: block; padding: 0; }
.vis-quadro { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.vis-texto { background: var(--fundo); }
.vis-audio { display: grid; place-items: center; gap: 16px; color: var(--txt3); }
.vis-audio .ic { width: 44px; height: 44px; opacity: .5; }
.vis-nada { display: grid; place-items: center; gap: 14px; text-align: center;
            color: var(--txt3); font-size: 13.5px; line-height: 1.6; padding: 40px; }
.vis-nada .ic { width: 38px; height: 38px; opacity: .5; }

@media (max-width: 699px) {
  .visor { height: 100vh; height: 100dvh; border-radius: 0; max-width: none; }
  .vis-topo { padding: calc(12px + var(--seguro-t)) 12px 12px; gap: 7px; }
  .vis-tit small { display: none; }
  .vis-corpo { padding: 0; }
}

/* ======================= LEITOR DE PÁGINAS =======================
   Link de fora aberto aqui dentro. Não é iframe: os portais de SEFAZ e Receita
   proíbem enquadramento, então o servidor traz o texto limpo e a gente pinta
   com a tipografia do painel — vira modo leitura.                          */
.leitor { width: 100%; max-width: min(1080px, 94vw); height: min(93vh, 1120px); display: flex;
          flex-direction: column; overflow: hidden; border-radius: var(--r-5);
          box-shadow: inset 0 0 0 1px var(--borda), var(--sombra-painel);
          animation: sobe .34s cubic-bezier(.2,.9,.3,1); }
.lei-topo { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px;
            box-shadow: inset 0 -1px 0 var(--borda); }
.lei-selo { flex: none; width: 34px; height: 34px; border-radius: var(--r-2); display: grid;
            place-items: center; background: var(--acento-sv); color: var(--acento); }
.lei-tit { flex: 1; min-width: 0; }
.lei-tit b { display: block; font-family: var(--f-titulo); font-weight: 600;
             font-size: 15px; letter-spacing: -.02em;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lei-tit small { display: block; font-size: 11.5px; color: var(--txt2); margin-top: 2px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lei-corpo { flex: 1; min-height: 0; overflow: auto;
             padding: 26px 32px calc(30px + var(--seguro-b));
             font-size: 15.5px; line-height: 1.72; color: var(--txt2); }
.lei-corpo > * { max-width: 740px; margin-left: auto; margin-right: auto; }
.lei-corpo > table, .lei-corpo > pre, .lei-corpo > figure { max-width: 100%; }
.lei-corpo > *:first-child { margin-top: 0; }
.lei-corpo h1, .lei-corpo h2, .lei-corpo h3, .lei-corpo h4 {
  font-family: var(--f-titulo); color: var(--txt); letter-spacing: -.02em;
  line-height: 1.3; margin: 28px 0 12px; }
.lei-corpo h1 { font-size: 24px; } .lei-corpo h2 { font-size: 20px; }
.lei-corpo h3 { font-size: 17px; } .lei-corpo h4 { font-size: 15.5px; }
.lei-corpo p { margin: 0 0 15px; }
.lei-corpo ul, .lei-corpo ol { margin: 0 0 15px; padding-left: 22px; }
.lei-corpo li { margin-bottom: 7px; }
.lei-corpo a { color: var(--acento); text-decoration: none;
               box-shadow: inset 0 -1px 0 var(--acento-sv); cursor: pointer; }
.lei-corpo a:hover { box-shadow: inset 0 -1.5px 0 var(--acento); }
.lei-corpo img { max-width: 100%; height: auto; border-radius: var(--r-3); margin: 8px 0; }
.lei-corpo blockquote { margin: 0 0 15px; padding: 2px 0 2px 16px; color: var(--txt3);
                        box-shadow: inset 3px 0 0 var(--borda-viva); }
.lei-corpo pre { background: var(--vidro-forte); border-radius: var(--r-3); padding: 13px 15px;
                 overflow-x: auto; font-size: 12.5px; margin: 0 0 15px;
                 font-family: var(--f-mono); }
.lei-corpo code { font-family: var(--f-mono);
                  font-size: .88em; background: var(--vidro-forte);
                  padding: 1px 5px; border-radius: var(--r-1); }
.lei-corpo pre code { background: none; padding: 0; }
.lei-corpo hr { border: 0; height: 1px; background: var(--borda); margin: 24px 0; }
/* tabela larga rola sozinha, sem empurrar a página para o lado */
.lei-corpo table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse;
                   margin: 0 0 15px; font-size: 13.5px; }
.lei-corpo th, .lei-corpo td { padding: 8px 12px; text-align: left;
                               box-shadow: inset 0 -1px 0 var(--borda); }
.lei-corpo th { color: var(--txt); font-weight: 600; white-space: nowrap; }
.lei-corpo .lei-erro { display: grid; place-items: center; gap: 12px; text-align: center;
                       padding: 50px 20px; color: var(--txt3); }
.lei-corpo .lei-erro .ic { width: 34px; height: 34px; opacity: .5; }

/* link do assistente que abre aqui dentro */
.balao a.lnk { color: var(--acento); text-decoration: none; cursor: pointer;
               word-break: break-all;
               box-shadow: inset 0 -1px 0 var(--acento-sv); }
.balao a.lnk:hover { box-shadow: inset 0 -1.5px 0 var(--acento); }

/* ===== telas grandes (ultrawide) =====
   Aqui cabe acompanhar a saída e o navegador ao mesmo tempo, que é o que se
   quer quando o script está mexendo no TMS: a linha do log ao lado da tela que
   a produziu. Abaixo disso o painel fica no tamanho de sempre — esticar um
   terminal de 880 px numa tela de notebook só afasta o texto do olho. */
@media (max-width: 1279px) {
  .app { grid-template-columns: 268px minmax(0,1fr); }
  .contexto { display: none; }
}

@media (max-width: 999px) {
  /* barra lateral vira trilha só de ícones */
  .app { grid-template-columns: 68px minmax(0,1fr); }
  .lateral { padding: 16px 10px; align-items: center; gap: 12px; }
  .lateral .rot, .lateral .so-largo { display: none; }
  .nav { justify-content: center; padding: 11px; width: 44px; }
  .nav span, .nav .conta { display: none; }
  .perfil { justify-content: center; padding: 8px; }
  .perfil .quem { display: none; }
  .lat-marca .marca-txt { display: none; }
  .cab, .vista, .chat-rol, .escrever { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 699px) {
  body { font-size: 15px; }
  .so-celular { display: initial; }
  .so-desktop { display: none !important; }
  /* DUAS linhas, não três: no celular só há dois filhos no FLUXO da grade —
     .centro (que já traz o topo e o conteúdo dentro) e .abas. A .lateral vira
     gaveta (position: fixed) e o .contexto some (display: none), então nenhum
     dos dois ocupa linha. Com três linhas declaradas, o .centro caía na 1ª
     (auto = altura do conteúdo), a .abas caía na 2ª (1fr) e engordava até
     ocupar a tela toda — barra de baixo gigante, conteúdo espremido no topo e,
     em telas mais cheias, a barra empurrada para fora. */
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .topo-cel { display: flex; }
  .abas { display: flex; }

  /* a barra lateral vira gaveta */
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; width: 292px; padding: 20px 15px;
             align-items: stretch; gap: 18px; background: var(--fundo);
             box-shadow: inset -1px 0 0 var(--borda), var(--sombra);
             transform: translateX(-102%); transition: transform .3s cubic-bezier(.2,.9,.3,1); }
  .lateral.aberta { transform: none; }
  .lateral .rot, .lateral .so-largo { display: initial; }
  .lateral .lat-marca .marca-txt { display: initial; }
  .nav { justify-content: flex-start; padding: 12px 13px; width: 100%; min-height: 46px; }
  .nav span { display: initial; }
  .nav .conta { display: initial; }
  .perfil { justify-content: flex-start; padding: 10px 11px; }
  .perfil .quem { display: block; }
  /* no celular a navegação principal é a de baixo */
  .lateral .nav-principal { display: none; }

  .cab { display: none; }
  .vista { padding: 18px 16px calc(18px + var(--seguro-b)); }
  .chat-rol { padding: 18px 14px; }
  .chat-lista { gap: 18px; }
  .msg-eu { max-width: 86%; font-size: 14px; }
  .balao { font-size: 14px; padding: 14px 16px; }
  .escrever { padding: 0 12px 10px; }
  .escrever-caixa { border-radius: var(--r-4); padding: 8px 8px 8px 16px; align-items: center; }
  .escrever textarea { font-size: 15px; }
  .escrever .btn.icone { width: 46px; height: 46px; border-radius: var(--r-3); }
  .dica-atalho { display: none; }
  .entrada-marca { gap: 22px; }
  .sugestoes { max-width: none; }

  .tela { align-items: stretch; padding: 0; }
  .exec { height: 100vh; height: 100dvh; border-radius: 0; max-width: none; }
  .exec-corpo { padding: 14px 12px; font-size: 12.2px; }

  /* o editor no celular: tela cheia, régua estreita e fonte menor — cabe
     mais coluna antes de precisar rolar para o lado */
  .editor { height: 100vh; height: 100dvh; border-radius: 0; max-width: none; }
  .ed-topo { padding: calc(12px + var(--seguro-t)) 14px 12px; }
  .ed-num { width: 42px; }
  .ed-num i { padding: 14px 8px 14px 0; font-size: 12px; }
  .ed-cor, .ed-txt { padding: 14px 14px 14px 50px; font-size: 12px; }
  .ed-pe { padding: 10px 12px calc(10px + var(--seguro-b)); }
  .ed-pe .dica { display: none; }

  .leitor { height: 100vh; height: 100dvh; border-radius: 0; max-width: none; }
  .lei-topo { padding: calc(12px + var(--seguro-t)) 14px 12px; }
  .lei-corpo { padding: 20px 18px calc(24px + var(--seguro-b)); font-size: 16px; }
  .lei-corpo h1 { font-size: 21px; } .lei-corpo h2 { font-size: 18px; }

  .exec-abas { padding: 0 12px 8px; }
  .nav-barra { padding: 0 10px 9px; }
  .nav-barra select { max-width: 110px; }
  .nav-pe { display: none; }          /* no celular a dica só rouba altura */
  .modal { align-items: flex-end; padding: 0; }
  .modal-caixa { max-width: none; border-radius: var(--r-4) var(--r-4) 0 0;
                 max-height: 92dvh; padding: 20px 18px calc(20px + var(--seguro-b)); }
  .btn { min-height: 44px; }
  .opcao { min-height: 46px; }
  .toast { bottom: calc(86px + var(--seguro-b)); }
  .temas { grid-template-columns: repeat(2, 1fr); }
  .pastas { grid-template-columns: repeat(2, 1fr); }
}

/* O deslocamento da gaveta vive SÓ na faixa do celular (acima), então aqui não
   é preciso desfazê-lo — um `transform: none !important` neste ponto atropelaria
   a cascata e deixava a gaveta aberta por cima da tela no celular. */
@media (min-width: 700px) {
  .veu { display: none; }
}

/* ===================== ABAS DOS AJUSTES =====================
   A tela de Ajustes cresceu para seis grupos e virava um rolo único de vários
   metros — achar "pasta dos scripts" exigia rolar por toda a configuração da
   IA. Cada grupo virou uma aba; o conteúdo continua no MESMO formulário, só
   escondido, então o botão Salvar continua enxergando todos os campos mesmo os
   de aba fechada (o navegador lê value de elemento escondido normalmente). */
.abas-aj {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 16px; padding-bottom: 2px;
}
.abas-aj::-webkit-scrollbar { display: none; }
.abas-aj button {
  flex: 0 0 auto; padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--txt2); font: 600 13px/1 var(--f-corpo); white-space: nowrap;
  display: flex; align-items: center; gap: 7px; transition: background .15s, color .15s;
}
.abas-aj button:hover { background: var(--vidro-painel); color: var(--txt); }
.abas-aj button.on {
  background: var(--primario); color: var(--sobre-primario);
  border-color: transparent;
}
.abas-aj button.on svg { stroke: var(--sobre-primario); }
.pag-aj { display: none; }
.pag-aj.on { display: block; }

/* placas de número da aba Servidor */
.placas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.placa {
  background: var(--vidro-painel); border: 1px solid var(--borda);
  border-radius: var(--r-2); padding: 12px 14px;
}
.placa .rot { color: var(--txt2); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; }
.placa .val { font: 700 20px/1.25 var(--f-titulo); margin-top: 5px; }
.placa .sub { color: var(--txt2); font-size: 12px; margin-top: 3px;
  /* caminho de pasta e nome de modelo não têm espaço para quebrar, e
     escapavam da placa no celular */
  overflow-wrap: anywhere; }
.barra-uso { height: 6px; border-radius: 3px; background: var(--borda);
  overflow: hidden; margin-top: 8px; }
.barra-uso i { display: block; height: 100%; background: var(--primario); }
.barra-uso i.alerta { background: #d98324; }
.barra-uso i.cheio  { background: #c0392b; }