/* Tecnosys Hub — "Aurora" design system (prototype v2)
   Distinct from Fluxion's datasheet aesthetic: warm twilight canvas, per-app color auras,
   generous rounded shapes, soft layered depth, grain for warmth. Display: Bricolage Grotesque;
   UI: Hanken Grotesk. Signature: the app monogram wrapped in a usage ring. */

:root {
  --canvas: #F1F1FA;
  --canvas-2: #E9E9F5;
  --surface: #FFFFFF;
  --surface-2: #FAFAFE;
  --ink: #16152A;
  --ink-soft: #56546F;
  /* Verde-AA (PO 2026-08-26): escurecido #8B89A6→#6F6D89. O antigo reprovava WCAG AA como TEXTO
     (3.37:1 sobre surface, 2.90:1 sobre canvas). Agora 4.97:1 surface / 4.77:1 surface-2 (texto normal ≥4.5)
     e 4.43:1 sobre canvas, preservando o 3º nível de hierarquia (mais claro que --ink-soft #56546F).
     Regressão: tools/sweep/_verde_aa_tokens_wcag.mjs. */
  --ink-faint: #6F6D89;
  --line: rgba(22, 21, 42, 0.08);
  --line-2: rgba(22, 21, 42, 0.13);

  --hub: #5B5BF5;
  --hub-2: #8B5CF6;
  --hub-soft: rgba(91, 91, 245, 0.10);

  --ok: #0FA968;
  /* Verde de TEXTO escurecido p/ AA ≥4.5:1 em texto pequeno no tema claro (#0FA968 falha ~2.8:1 sobre branco).
     Espelha --warn-text/--danger-ink (achado do Léo · Platform Health §8). O token GRÁFICO --ok segue vívido. */
  --ok-text: #0A7048;
  --warn: #E6920B;
  /* Âmbar GRÁFICO vívido (anéis/ícones/alertas — NÃO-texto), estável nos 2 temas (proto fase 2 · Léo F-02). */
  --warn-2: #EF9D10;
  /* Âmbar de TEXTO escurecido p/ AA ≥4.5:1 em texto pequeno no tema claro (#E6920B falha ~2.5:1 sobre branco). */
  --warn-text: #8A5600;
  --danger: #EF4560;
  /* Vermelho de TEXTO/gradiente escurecido (persist do toast crítico, stop escuro do monograma) — AA sobre branco. */
  --danger-ink: #B4132F;

  /* per-app hues */
  --flyx: #EC4899;   --flyx-2: #FB7185;
  --fluxion: #3B82F6; --fluxion-2: #60A5FA;
  --bi: #0FA968;      --bi-2: #34D399;
  --cpf: #8B5CF6;     --cpf-2: #A78BFA;
  /* Quadros (Kanban nativo): índigo do hub (prototype-v2/quadros-board.html usa --qhue: var(--hub)). */
  --quadros: #5B5BF5; --quadros-2: #8B5CF6;
  --quadros-soft: rgba(91, 91, 245, 0.10);
  /* Whiteboard (quadro branco nativo · Excalidraw): teal — distinto do índigo do Quadros, próprio do desenho livre. */
  --whiteboard: #14B8A6; --whiteboard-2: #2DD4BF;
  --whiteboard-soft: rgba(20, 184, 166, 0.10);
  /* Reuniões (videoconferência nativa · Jitsi Meet): violeta — distinto do índigo do Quadros e do teal do Whiteboard. */
  --reunioes: #8B5CF6; --reunioes-2: #A78BFA;
  --reunioes-soft: rgba(139, 92, 246, 0.10);
  /* Bio (link-in-bio · RP externo :7005): laranja — distinto do verde do BI, do rosa do Flyx e dos violetas. */
  --bio: #F97316; --bio-2: #FB923C;
  --bio-soft: rgba(249, 115, 22, 0.10);
  /* Forms (formulários · RP externo :7007): ciano — distinto do laranja do Bio, do teal do Whiteboard e dos violetas. */
  --forms: #06B6D4; --forms-2: #22D3EE;
  --forms-soft: rgba(6, 182, 212, 0.10);
  /* Sign (assinatura de documentos · RP externo :7009): âmbar/dourado — distinto do ciano do Forms e do laranja do Bio. */
  --sign: #D97706; --sign-2: #F59E0B;
  --sign-soft: rgba(217, 119, 6, 0.10);
  /* Clause (CLM soberano · RP externo :7011): azul-tinta — "a tinta do contrato assinado" — distinto do índigo do Hub/Quadros, do âmbar do Sign e do lime do Elo. */
  --clause: #1D4ED8; --clause-2: #3B82F6;
  --clause-soft: rgba(29, 78, 216, 0.10);
  /* Agenda (booking soberano · RP externo :7010): vermelho — distinto do rosa-magenta do Flyx, do laranja do Bio e do âmbar do Sign. */
  --agenda: #DC2626; --agenda-2: #F87171;
  --agenda-soft: rgba(220, 38, 38, 0.10);
  /* Elo (CRM soberano · RP externo :5197): lima/verde-limão — distinto do verde-esmeralda do BI e do teal do Whiteboard. */
  --elo: #84CC16; --elo-2: #A3E635;
  --elo-soft: rgba(132, 204, 22, 0.10);
  /* Lastro (financeiro soberano com IA · Embed :5199): teal próprio — distinto do lima do Elo, do esmeralda do BI e do teal-claro do Whiteboard/Forms (mais escuro/profundo). */
  --lastro: #0B7C8F; --lastro-2: #0FA3B8;
  --lastro-soft: rgba(11, 124, 143, 0.10);
  /* Cadence (cockpit do dia · id interno `rotina` · RP externo :7012): laranja-alvorada Aurora — cor da CASA (app interno). */
  --rotina: #E8590C; --rotina-2: #F97316;
  --rotina-soft: rgba(232, 89, 12, 0.10);
  /* Avisos (a voz única dos apps · nativo): âmbar-mel/bronze — "chime" calmo (cuidado, não medo). Escuro o bastante
     pro texto branco no monograma (AA); distinto do laranja do Bio/Cadence e do vermelho do Agenda. */
  --avisos: #C77A0A; --avisos-2: #EAA640;
  --avisos-soft: rgba(199, 122, 10, 0.10);
  /* Media Library (DAM nativo · fase-2): teal-armazenamento (cor do backend Local soberano no proto — "onde a mídia
     vive"). Índigo-teal profundo distinto do teal-claro do Whiteboard/Forms e do teal do Coffer (matiz mais azulado). */
  --media-library: #0E7490; --media-library-2: #22B8CF;
  --media-library-soft: rgba(14, 116, 144, 0.11);
  /* Emissor/Fiscal (módulo fiscal nativo · NF-e/NFS-e): verde-ledger — gap fechado 2026-08-13 (rename display Fase 1;
     o app nunca teve hue própria, caía no fallback azul genérico do Hub). Distinto do esmeralda do BI (mais escuro/
     profundo/saturado) e do lima do Elo/Bond; fora da zona quente já lotada por Bio/Sign/Loop/Avisos-Echo. Escuro o
     bastante pro texto branco no monograma (AA ~5:1), mesma régua do Avisos/Echo. */
  --emissor: #15803D; --emissor-2: #22C55E;
  --emissor-soft: rgba(21, 128, 61, 0.10);

  /* copiloto de IA — hue própria do control plane (UX §4). Índigo-violeta, entre o hub e o cpf.
     Texto SEMPRE em --ink (nunca --ai como texto de corpo) → contraste AA garantido nos 2 temas. */
  --ai: #6D5DE8;      --ai-2: #A78BFA;
  --ai-soft: rgba(124, 111, 240, 0.11);
  --ai-line: rgba(124, 111, 240, 0.28);

  /* Chat (colaboração nativa): hue índigo-IA — alias de --ai (prototype-v2/chat-v1.html). */
  --chat: var(--ai); --chat-2: var(--ai-2); --chat-soft: var(--ai-soft);

  --shadow-sm: 0 1px 2px rgba(22,21,42,.06), 0 2px 6px rgba(22,21,42,.05);
  --shadow-md: 0 4px 12px rgba(22,21,42,.07), 0 12px 30px rgba(22,21,42,.08);
  --shadow-lg: 0 8px 24px rgba(22,21,42,.10), 0 24px 60px rgba(22,21,42,.12);

  --r-lg: 22px; --r-md: 15px; --r-sm: 10px; --r-pill: 999px;
  --glass: rgba(255,255,255,0.72);
  --grain: .38;

  /* ===== z-index: --z-popover (Theo · 2026-08-08) — o AuroraSelect (.adrop-panel) flutua ACIMA de tudo,
     inclusive DENTRO de um drawer/modal (ex.: dropdown num .q-dr-field), por isso o valor alto e deliberado.
     Os demais literais de z-index (chrome sticky ~50, menus 60/70, toast 100, modal/drawer 200+) seguem
     hardcoded por ora — a tokenização COMPLETA da escada é 🔵 ROADMAP (exige varrer todos os call-sites e
     reconciliar a ordem real: os drawers do shell vivem em 60/61, ABAIXO do toast). Só o token consumido
     mora aqui — evita custom-properties mortas que sugeririam falsamente que os literais estão amarrados. */
  --z-popover:  1200;  /* AuroraSelect e popovers que flutuam ACIMA de tudo, inclusive dentro de modal/drawer */

  /* ===== AURORA SEAM (Léo · 2026-08-05) — espelho NATIVO do chrome do Hub (fallback quando não há shell).
     O chrome (topbar + sidenav) pega a luz da Aurora na cor do app corrente: 100% dirigido por --hue
     (emitido no <html> por App.razor; fallback p/ --hub = Hub roxo quando não há accent). Mesma receita do Aurora Shell.
     DIAL da mistura da hue no chrome (claro) — Léo 5/6/16; o dark redefine só estes 3 (bloco dark abaixo). */
  --chrome-hue-surface: 5%; --chrome-hue-glass: 6%; --chrome-hue-line: 16%;
  --chrome-surface: color-mix(in srgb, var(--hue, var(--hub)) var(--chrome-hue-surface), var(--surface));
  --chrome-glass:   color-mix(in srgb, var(--hue, var(--hub)) var(--chrome-hue-glass), var(--glass));
  --chrome-line:    color-mix(in srgb, var(--hue, var(--hub)) var(--chrome-hue-line), var(--line-2));
}

[data-theme="dark"] {
  --canvas: #0E0E19;
  --canvas-2: #0A0A13;
  --surface: #191827;
  --surface-2: #201F31;
  --ink: #F3F2FB;
  --ink-soft: #ABA9C6;
  /* Verde-AA (PO 2026-08-26): clareado #6E6C8B→#8987A6 (no dark clarear = mais contraste). O antigo
     reprovava como TEXTO (3.48:1 sobre surface). Agora ≥4.5:1 sobre surface/surface-2, ≥3:1 sobre canvas. */
  --ink-faint: #8987A6;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --hub-soft: rgba(139, 92, 246, 0.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  --glass: rgba(25,24,39,0.66);
  --grain: .08;
  --ai-soft: rgba(139, 121, 250, 0.17);
  --ai-line: rgba(167, 139, 250, 0.34);
  /* No dark o âmbar de TEXTO clareia (o escuro #8A5600 sumiria) — AA ≥4.5:1 sobre a superfície escura. */
  --warn-text: #F3B44E;
  /* No dark o vermelho de TEXTO clareia (o escuro #B4132F sumiria) — AA sobre a superfície escura. */
  --danger-ink: #FF7A90;
  /* No dark o verde de TEXTO clareia (o escuro #0A7048 sumiria) — AA ≥4.5:1 sobre a superfície escura. */
  --ok-text: #34D399;
  /* AURORA SEAM · DIAL do dark — Léo pediu 6–8%; default 8/9/20. Só estes 3 p/ calibrar a intensidade. */
  --chrome-hue-surface: 8%; --chrome-hue-glass: 9%; --chrome-hue-line: 20%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Aurora sky: soft radial light sources bleeding from the top, keyed to app hues */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(680px 420px at 12% -8%, rgba(236,72,153,.16), transparent 60%),
    radial-gradient(720px 460px at 78% -12%, rgba(59,130,246,.15), transparent 62%),
    radial-gradient(600px 500px at 50% -20%, rgba(139,92,246,.14), transparent 60%),
    var(--canvas);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(700px 460px at 12% -6%, rgba(236,72,153,.20), transparent 60%),
    radial-gradient(760px 500px at 80% -10%, rgba(59,130,246,.20), transparent 62%),
    radial-gradient(640px 520px at 50% -16%, rgba(139,92,246,.22), transparent 60%),
    var(--canvas);
}
/* Grain for warmth — kills the flat AI-gradient look */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- topbar (floating glass) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 14px clamp(18px, 5vw, 44px);
  background: var(--chrome-glass); /* SEAM: glass tingido pela hue (era --glass) */
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: none; /* FEATHER (Léo · 2026-08-05): fronteira MACIA no lugar da linha dura — seam vira glow (::after) + feather (::before) */
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--hue, var(--hub)) 55%, transparent); /* FEATHER: glow de profundidade suave sob a topbar */
  /* ANTI-FLASH (PO 2026-08-08): no swap de app/workspace o --hue muda no <html> (morph do enhanced-nav) e o
     glass/glow derivados do accent repintavam SECO (flash). Cross-fade de ~.35s SÓ nas propriedades de COR ambiente
     da topbar — hover/focus/press vivem em .nav a / .btn-* com suas próprias transições, então não vazam aqui. */
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
/* AURORA SEAM · FEATHER — o fio de luz vira GLOW (blur), não linha dura: a assinatura na hue continua, difusa. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--hue, var(--hub)) 55%, transparent) 20%,
    color-mix(in srgb, var(--hue2, var(--hub-2)) 55%, transparent) 80%, transparent);
  filter: blur(2.5px); opacity: .9;
}
/* AURORA SEAM · FEATHER — zona de transição ~18px sob a topbar: o tint do chrome esvai no conteúdo (sem borda). */
.topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(to bottom, var(--chrome-glass), transparent);
}
[data-theme="dark"] .topbar { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hue, var(--hub)) 22%, transparent), 0 10px 22px -14px color-mix(in srgb, var(--hue, var(--hub)) 55%, transparent); }
/* ANTI-FLASH · respeito a prefers-reduced-motion: sem cross-fade do accent, repinta seco (comportamento anterior). */
@media (prefers-reduced-motion: reduce) { .topbar, .sidenav{ transition: none; } }
/* .brand é um <a href="/"> (link pra home · O Mirante) — reseta decoração/cor herdada pra ficar idêntico ao
   antigo <div>; o cursor:pointer e o foco de teclado dão o affordance de link sem mudar a aparência. */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; color: inherit; cursor: pointer; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--hub), var(--hub-2));
  box-shadow: 0 4px 14px rgba(91,91,245,.4);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  font-family: "Bricolage Grotesque", sans-serif;
}
.brand b { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; }
.brand span { color: var(--ink-soft); font-weight: 600; } /* F-02 AA: nome do produto na marca era --ink-faint (3:1) */
/* logo do tenant (white-label) no lugar do monograma — mesma caixa 30px, contain pra qualquer proporção */
.brand-logo { width: 30px; height: 30px; border-radius: 9px; object-fit: contain; flex: none; background: var(--surface-2); }
/* assinatura "Powered by Tecnosys" (R-WL-6) — escondível pelo debrand pago */
.powered-by { text-align: center; padding: 18px 16px 26px; font-size: 11.5px; color: var(--ink-faint); }
.powered-by b { color: var(--ink-soft); font-weight: 700; font-family: "Bricolage Grotesque", sans-serif; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 7px 14px; border-radius: var(--r-pill); text-decoration: none;
  color: var(--ink-soft); font-weight: 600; font-size: 14.5px; transition: all .18s;
}
.nav a:hover { color: var(--ink); background: var(--hue-soft, var(--hub-soft)); }
.nav a.active { color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .nav a.active { color: #fff; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: transparent; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all .18s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.avatar {
  display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer;
  font-weight: 600; font-size: 14px; transition: all .18s;
}
.avatar:hover { border-color: var(--ink-faint); }

/* dropdown do avatar (Sair) — card Aurora ancorado abaixo do avatar */
.avatar-menu { position: relative; }
.avatar-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 216px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 6px; overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  pointer-events: none; transition: opacity .16s, transform .16s;
}
.avatar-dropdown.on { opacity: 1; transform: none; pointer-events: auto; }
.avatar-dropdown .ad-head { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.avatar-dropdown .ad-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.avatar-dropdown .ad-sub { font-size: 12px; color: var(--ink-faint); }
.avatar-dropdown form { margin: 0; }
.avatar-dropdown .ad-item {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: none;
  background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  border-radius: var(--r-sm); cursor: pointer; text-align: left; text-decoration: none;
  transition: background .14s, color .14s;
}
.avatar-dropdown .ad-item:hover { background: var(--line); color: var(--ink); }
.avatar-dropdown .ad-danger:hover { background: rgba(239,69,96,.12); color: var(--danger); }
.avatar-dropdown .ad-ico { font-size: 14px; }

/* Troca de workspace (feat/workspace-switch): grupo entre o cabeçalho da conta e os itens geridos.
   Só renderiza com >1 workspace. O ativo (is-active) fica marcado e desabilitado (cursor-default). */
.avatar-dropdown .ad-wsswitch {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 0 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.avatar-dropdown .ad-wslabel {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); padding: 4px 12px 3px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* dica "onde você entra ao logar" ao lado do rótulo (estrela âmbar de referência · feat/workspace-favorito) */
.avatar-dropdown .ad-wshint {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 4px;
}
.avatar-dropdown .ad-wshint svg { width: 12px; height: 12px; color: var(--warn); }
.avatar-dropdown .ad-ws.is-active { color: var(--ink); cursor: default; }
.avatar-dropdown .ad-ws.is-active:hover { background: transparent; }
.avatar-dropdown .ad-ws.is-active .ad-ico { color: var(--hue, var(--hub)); }
.avatar-dropdown .ad-ws .ad-ico svg { width: 16px; height: 16px; }

/* ---- estrela de FAVORITO por linha (feat/workspace-favorito) ---- */
/* A linha vira um flex-row: o switch (nome/troca) ocupa o corpo; a estrela (form-POST) ancora à direita. */
.avatar-dropdown .ad-ws-row { display: flex; align-items: center; gap: 2px; }
.avatar-dropdown .ad-ws-row .ad-ws { flex: 1; min-width: 0; }
.avatar-dropdown .ad-ws-row .ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-dropdown .ad-ws-row form { flex: none; margin: 0; }
/* chip "ativo" (onde você está AGORA) — distinto do favorito (onde você entra ao logar) */
.avatar-dropdown .active-chip {
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); padding: 2px 7px; border-radius: 999px; flex: none;
}
/* botão-estrela: alvo ≥30px, hover âmbar; .fav = estrela cheia (favorito fixado). Ícone de LINHA (nunca emoji). */
.avatar-dropdown .star-btn {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; color: var(--ink-faint); transition: background .14s, color .14s;
}
.avatar-dropdown .star-btn:hover { background: var(--line); color: var(--warn); }
.avatar-dropdown .star-btn:focus-visible { outline: 2px solid var(--warn); outline-offset: -2px; }
.avatar-dropdown .star-btn svg { width: 18px; height: 18px; }
.avatar-dropdown .star-btn.fav { color: var(--warn); }
.avatar-dropdown .star-btn.fav:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }

.avatar .dot {
  width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center;
  color: #fff; font-weight: 700;
  /* monograma pessoal do canto sup.-direito: chrome do Hub, segue o accent escolhido (fallback Aurora). */
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
}

/* ---------- shell ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: clamp(28px, 6vw, 56px) clamp(18px, 5vw, 44px) 80px; }

.hero { margin-bottom: 40px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 14px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.hero .eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(15,169,104,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(15,169,104,.45);} 70%{box-shadow:0 0 0 8px rgba(15,169,104,0);} 100%{box-shadow:0 0 0 0 rgba(15,169,104,0);} }
/* Eyebrow HONESTO no launcher (follow-up PO 2026-08-11): quando há app indisponível, o eyebrow deixa de afirmar
   "tudo funcionando" — mesma régua/cor da home (Inicio.razor .mirante). Down = âmbar; Checking = neutro (sem pulse). */
.hero .eyebrow--down { color: var(--warn); }
.hero .eyebrow--down .pulse { background: var(--warn); box-shadow: none; animation: none; }
.hero .eyebrow--checking .pulse { background: var(--ink-faint); box-shadow: none; animation: none; }
.hero h1 {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: clamp(30px, 5.5vw, 46px); letter-spacing: -.025em; line-height: 1.05;
}
.hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--hub), var(--hub-2) 60%, var(--flyx)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--ink-soft); font-size: 17px; margin-top: 10px; max-width: 46ch; }

.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 36px 2px 16px; }
.sec-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.sec-head span { color: var(--ink-faint); font-size: 14px; font-weight: 500; }

/* ---------- app grid ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

.card {
  position: relative; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-md); overflow: hidden; isolation: isolate;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.card::before {  /* per-app aura glow, keyed via --hue */
  /* right:0 (não -20%): o glow ancora no canto sup.-direito e floresce PRA DENTRO.
     Com right negativo o pseudo (embora clipado por overflow:hidden) inflava o
     scrollWidth do card e disparava clip-de-container falso; a porção visível do
     gradiente radial (transparente a 66%) fica idêntica. */
  content: ""; position: absolute; z-index: -1; top: -40%; right: 0;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, var(--hue, var(--hub)), transparent 66%);
  opacity: .14; transition: opacity .3s; filter: blur(6px);
}
.card.app:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card.app:hover::before { opacity: .26; }

.card-body { padding: 22px 22px 20px; }
.card-top { display: flex; align-items: flex-start; gap: 16px; }

/* signature: monogram + usage ring */
.appmark { position: relative; width: 66px; height: 66px; flex: none; }
.appmark svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.appmark .ring-track { fill: none; stroke: var(--line-2); stroke-width: 4; }
.appmark .ring-val { fill: none; stroke: var(--hue, var(--hub)); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1); }
.appmark.warn .ring-val { stroke: var(--warn); }
.appmark .glyph {
  position: absolute; inset: 9px; border-radius: 15px; display: grid; place-items: center;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 6px 16px -4px var(--hue, var(--hub));
}
.appmark.locked .glyph { background: var(--surface-2); color: var(--ink-faint); box-shadow: none; border: 1px solid var(--line-2); }
/* Branding v2 DATA-DRIVEN: logo clara/escura por tema. Só existe o par quando o SA subiu a variante dark;
   default (claro) mostra a clara e esconde a dark; [data-theme="dark"] inverte. Cookie tsx-theme → data-theme
   no <html> troca ao vivo (sem reload). Sem par (só clara) a .glyph-logo segue visível em ambos os temas. */
.appmark .glyph-logo-dark { display: none; }
[data-theme="dark"] .appmark .glyph-logo-light { display: none; }
[data-theme="dark"] .appmark .glyph-logo-dark { display: block; }

.card-title { flex: 1; min-width: 0; }
/* flex-wrap: com 2 chips (tier + "indisponível" do status honesto) o h3 estourava no tablet/mobile (matriz DoD
   2026-08-11); os chips quebram pra a 2ª linha em vez de vazar o viewport. Regressão do status-card `cc6be49`. */
.card-title h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; }
.card-title .desc { color: var(--ink-soft); font-size: 14.5px; margin-top: 3px; }

.chip {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill);
  letter-spacing: .02em; text-transform: uppercase; vertical-align: middle;
}
.chip.tier { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .chip.tier { color: var(--hue2, var(--hub-2)); }
.chip.free { background: var(--line); color: var(--ink-soft); }
.chip.lock { background: var(--line); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; text-transform: none; font-weight: 600; }
/* health-check · status honesto por-card · follow-up do PO 2026-08-11: app contratado mas com o probe de reachability
   DOWN — badge âmbar HONESTO, sempre ícone (alert) + texto "indisponível" (nunca só cor · WCAG 1.4.1). Cânone dark+light. */
.chip.down { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn-text); display: inline-flex; align-items: center; gap: 5px; text-transform: none; font-weight: 700; } /* Verde-AA: --warn→--warn-text (era 2.5:1 no claro; agora ≥5:1 · o token já é theme-aware) */
.chip.down .hub-ico { width: 12px; height: 12px; }

/* Ícone SVG inline monocromático (HubIcon) — herda currentColor, alinha ao texto */
.hub-ico { display: inline-block; vertical-align: -0.125em; flex: none; }

.status-line { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--ink-soft); }
.status-line .tick { color: var(--ok-text); font-weight: 700; } /* Verde-AA: --ok→--ok-text (texto/glyph) */
.usage-note { margin-top: 4px; font-size: 13px; color: var(--ink-faint); }
.usage-note b { color: var(--warn-text); font-weight: 700; } /* Verde-AA: --warn→--warn-text (texto) */

.card-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

/* buttons */
.btn {
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; border: none;
  padding: 11px 20px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px;
  transition: transform .16s, box-shadow .16s, background .16s; text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 6px 18px -5px var(--hue, var(--hub)); }
.btn-primary:hover { box-shadow: 0 10px 26px -6px var(--hue, var(--hub)); }
/* ===== F-01 · CONTRASTE DO BOTÃO PRIMÁRIO (proto aprovado PO 2026-08-20 · Opção A) =========
   Texto BRANCO sobre o gradiente do primário FALHAVA WCAG AA (4.5:1) na parada mais clara em
   ~todas as 22 hues de app (Elo 1.51 · Forms 1.81 · BI 1.92 · Hub-2 4.23). Correção FIEL ao
   proto: escurecer o FUNDO do botão o MÍNIMO até ≥4.5:1, PRESERVANDO a matiz. A accent VIVA
   segue intacta pra glow/box-shadow (só o fundo do botão escurece).
   FÓRMULA (não hardcode das 22): em xyz-d65, o canal Y É a luminância relativa WCAG (mesmos
   coeficientes/EOTF sRGB). Escalamos X,Y,Z pelo MESMO fator k = min(1, Ymax/Y) → derruba a
   luminância até o teto Ymax=0.175 (⇒ branco 1.05/(0.175+0.05) ≈ 4.67:1) SOMENTE quando passa
   dele; hue já escura (Hub base, Clause, Agenda…) fica intacta (min → k=1 = mínimo real).
   Escalar os 3 canais pelo mesmo k mantém a cromaticidade (x,y) → matiz e saturação preservadas,
   só a luminância cai. Toda hue de app — e qualquer accent white-label — herda AA por CONSTRUÇÃO.
   Escopado em .btn-primary (não em :root) porque --hue às vezes é setado INLINE no próprio botão
   (ex.: Estudio `style="--hue:var(--flyx)"`) — resolver aqui garante a matiz certa por botão.
   @supports: navegador sem relative-color-syntax mantém o gradiente vívido legado (degrada limpo). */
@supports (color: color(from white xyz-d65 1 1 1)) {
  .btn-primary {
    --hue-btn:   color(from var(--hue, var(--hub))   xyz-d65 calc(x * min(1, .175 / max(y, .0001))) calc(y * min(1, .175 / max(y, .0001))) calc(z * min(1, .175 / max(y, .0001))));
    --hue-btn-2: color(from var(--hue2, var(--hub-2)) xyz-d65 calc(x * min(1, .175 / max(y, .0001))) calc(y * min(1, .175 / max(y, .0001))) calc(z * min(1, .175 / max(y, .0001))));
    background: linear-gradient(135deg, var(--hue-btn), var(--hue-btn-2));
  }
}
/* ===== /F-01 ===== */
.btn-ghost { color: var(--ink-soft); background: transparent; padding: 11px 14px; }
.btn-ghost:hover { color: var(--ink); background: var(--line); }
.btn-soft { color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .btn-soft { color: #fff; }

/* discover / locked / service cards */
.card.locked { background: var(--surface-2); }
.card.locked .card-body { opacity: .96; }
.upsell { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }
.spark { color: var(--hue, var(--hub)); }
.meter-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.meter { flex: 1; height: 7px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.meter.warn i { background: linear-gradient(90deg, var(--warn), #F6B84B); }

/* ---- Três estados de indisponibilidade no "Descubra" (V2 §4 · cada um DISTINTO) ---- */
/* linha do "porquê" — glifo + microcopy, compartilhada pelos três estados */
.whyline { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 14px; }
.whyline .glyph-in { flex: none; margin-top: 1px; }
.whyline .wt { color: var(--ink); font-weight: 600; }
.whyline .wd { color: var(--ink-soft); font-size: 13px; }
/* selo em stamp (chip) na base do card, distinto por eixo */
.stamp { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); }

/* ESTADO A · ⊘ NÃO OFERTADO À SUA EMPRESA (audiência · cinza neutro, sem aura, anel tracejado) */
.card.notoffered { background: var(--surface-2); }
.appmark.notoffered .ring-track { stroke: var(--line-2); stroke-dasharray: 3 4; opacity: .6; }
.appmark.notoffered .glyph { background: var(--surface); color: var(--ink-faint); border: 1px dashed var(--line-2); box-shadow: none; filter: grayscale(1); }
.appmark.notoffered .aud-seal {
  position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; color: var(--ink-soft);
  background: var(--surface-2); border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}
.why-aud .glyph-in { color: var(--ink-faint); }
.stamp.aud { background: var(--line); color: var(--ink-soft); }

/* ESTADO B · ◍ NÃO DISPONÍVEL NA SUA REGIÃO (R22 · azul fluxion, moldura de mapa) */
.card.notregion { background: var(--surface); }
.appmark.notregion .ring-track { stroke: rgba(59,130,246,.35); }
.appmark.notregion .glyph { background: rgba(59,130,246,.10); color: var(--fluxion); border: 1px solid rgba(59,130,246,.35); box-shadow: none; }
[data-theme="dark"] .appmark.notregion .glyph { color: var(--fluxion-2); }
.appmark.notregion .region-seal {
  position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; color: #fff;
  background: linear-gradient(135deg, var(--fluxion), var(--fluxion-2));
  border: 2px solid var(--surface); box-shadow: 0 2px 8px -1px rgba(59,130,246,.5);
}
.why-region .glyph-in { color: var(--fluxion); }
[data-theme="dark"] .why-region .glyph-in { color: var(--fluxion-2); }
.stamp.region { background: rgba(59,130,246,.12); color: var(--fluxion); }
[data-theme="dark"] .stamp.region { color: var(--fluxion-2); }

/* ESTADO C · bloqueado já usa .card.locked / .chip.lock / .upsell acima (o ÚNICO com CTA) */

/* ============================================================================
   MARKETPLACE (vitrine · fase-1) — entrada dupla no launcher + tela /marketplace.
   Reusa o cânone: .card / .chip.lock / .grid / .btn. Só os elementos NOVOS abaixo.
   ============================================================================ */

/* -- entrada dupla no launcher: link com badge no sec-head + card "Explorar apps" tracejado -- */
.mk-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill); text-decoration: none;
  color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); font-weight: 600; font-size: 13.5px;
  transition: all .18s;
}
.mk-link:hover { background: var(--hue, var(--hub)); color: #fff; }
[data-theme="dark"] .mk-link { color: #fff; }
.mk-link .hub-ico { font-size: 15px; }
.mk-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--flyx); color: #fff; font-size: 12px; font-weight: 700;
  font-family: "Bricolage Grotesque", sans-serif;
}
.mk-link:hover .mk-badge { background: #fff; color: var(--hue, var(--hub)); }

/* card "Explorar apps" — tracejado, sem aura, no fim da grade (affordance de descoberta) */
.card.explore {
  border: 1.5px dashed var(--line-2); background: transparent; box-shadow: none;
  text-decoration: none; color: inherit; display: grid; place-items: center; min-height: 150px;
  transition: border-color .18s, background .18s, transform .18s;
}
.card.explore::before { display: none; }
.card.explore:hover { border-color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); transform: translateY(-4px); }
.explore-in { display: flex; align-items: center; gap: 14px; padding: 22px; }
.explore-plus {
  width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-size: 20px;
}
[data-theme="dark"] .explore-plus { color: #fff; }
.explore-txt { display: flex; flex-direction: column; gap: 2px; }
.explore-txt b { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; }
.explore-txt span { color: var(--ink-soft); font-size: 13px; }
.explore-in .mk-badge { align-self: center; }

/* -- estado vazio / convite (launcher sem apps · marketplace sem oferta / sem resultado) -- */
.mk-empty-hero {
  text-align: center; padding: 54px 24px; border-radius: var(--r-lg);
  border: 1.5px dashed var(--line-2); background: var(--surface-2); margin: 8px 0 20px;
}
.mk-empty-ic {
  display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 17px;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-size: 26px; margin-bottom: 14px;
}
[data-theme="dark"] .mk-empty-ic { color: #fff; }
.mk-empty-hero h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 21px; font-weight: 700; }
.mk-empty-hero p { color: var(--ink-soft); font-size: 15px; margin: 8px 0 20px; max-width: 44ch; margin-inline: auto; }

/* -- toolbar do marketplace: busca + chips de categoria com contadores + limpar -- */
.mk-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 2px 22px; }
.mk-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); transition: all .18s;
}
.mk-search:focus-within { border-color: var(--hue, var(--hub)); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); }
.mk-search .ms-ic { color: var(--ink-faint); flex: none; font-size: 15px; }
.mk-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); outline: none; min-width: 0; }
.mk-search input::placeholder { color: var(--ink-faint); }
.mk-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip.cat {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-soft);
  font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: all .18s;
}
.chip.cat:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip.cat.on { border-color: transparent; background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .chip.cat.on { color: #fff; }
.chip.cat .chip-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--line); color: var(--ink-faint); font-size: 11.5px; font-weight: 700;
}
.chip.cat.on .chip-n { background: var(--hue, var(--hub)); color: #fff; }
.mk-clear {
  border: 0; background: transparent; color: var(--hue, var(--hub)); font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer; padding: 8px 6px; text-decoration: underline; text-underline-offset: 3px;
}
[data-theme="dark"] .mk-clear { color: var(--hue2, var(--hub-2)); }
.mk-clear:hover { color: var(--ink); }

/* -- type-tag (App × Serviço) — cor + TEXTO (WCAG: não só cor) -- */
.type-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.type-tag.app { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .type-tag.app { color: var(--hue2, var(--hub-2)); }
.type-tag.svc { background: rgba(139,92,246,.14); color: var(--cpf); }
[data-theme="dark"] .type-tag.svc { color: #b9a3fb; }

/* -- linha de preço (3ª camada: formato divergente app × serviço) -- */
.mk-price { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.mk-price b { font-weight: 700; }
.mk-price .mk-in { color: var(--hue, var(--hub)); font-weight: 700; }
[data-theme="dark"] .mk-price .mk-in { color: var(--hue2, var(--hub-2)); }
/* Pacote (ADR 010 §8): a lista de apps-membro que o bundle inclui, no cânone .desc (secundário, hue-agnóstico). */
.desc.mk-bundle { margin-top: 4px; font-size: 12.5px; color: var(--hue, var(--hub)); font-weight: 600; opacity: .92; }
[data-theme="dark"] .desc.mk-bundle { color: var(--hue2, var(--hub-2)); }

/* plan strip */
.plan {
  margin-top: 34px; border-radius: var(--r-lg); padding: 20px 24px; background: var(--surface);
  box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line);
}
.plan .pi { display: flex; flex-direction: column; gap: 2px; }
.plan .pi .k { font-size: 12px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.plan .pi .v { font-size: 15px; font-weight: 600; }
.plan .sep { width: 1px; align-self: stretch; background: var(--line); }
.plan .grow { margin-left: auto; display: flex; gap: 10px; }

footer.pagefoot { text-align: center; color: var(--ink-faint); font-size: 12.5px; margin-top: 44px; }

/* toast */
.toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--ink); color: var(--canvas); padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
  animation: rise .35s cubic-bezier(.2,.8,.3,1); display: flex; align-items: center; gap: 9px;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px);} to {opacity:1; transform: none;} }

/* ---------- panels + data tables (console / billing) ---------- */
.panel {
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); overflow: hidden; margin-bottom: 18px;
}
.panel-head { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px 14px; }
.panel-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.panel-head span { color: var(--ink-faint); font-size: 13.5px; }
.panel-head .grow { margin-left: auto; display: flex; gap: 8px; }

.dtable { width: 100%; border-collapse: collapse; }
.dtable th {
  text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); padding: 10px 22px; border-top: 1px solid var(--line);
}
.dtable td { padding: 13px 22px; border-top: 1px solid var(--line); font-size: 14.5px; vertical-align: middle; }
/* .tight — densidade horizontal menor pra tabelas largas (ex.: catálogo SA de 8 colunas, que
   estourava o painel e clipava a última coluna "Audiência ↗"). Escopo local: não afeta as
   demais tabelas (Empresas/Saúde/Console/Billing), que continuam com o respiro de 22px. */
@media (min-width: 901px) {
  .dtable.tight th { padding-left: 14px; padding-right: 14px; }
  .dtable.tight td { padding-left: 14px; padding-right: 14px; }
}
.dtable tbody tr { transition: background .15s; }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable .who { display: flex; align-items: center; gap: 11px; }
.dtable .ava {
  width: 32px; height: 32px; border-radius: var(--r-pill); flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
}
.dtable .email { color: var(--ink-faint); font-size: 13px; }
.dtable .muted { color: var(--ink-soft); }

/* ============================================================================
   PADRÃO ÚNICO DE EXIBIÇÃO — componentes DataTable / ActorCell / UsagePanel
   (proto docs/prototypes/console-padrao). Wave 1: AppAdmin + ConsoleAuditoria.
   ============================================================================ */

/* ★ RAIZ DO OVERFLOW (o bug do PO): o .panel usa overflow:hidden (pelo raio), e as tabelas .dtable
   não tinham wrapper de scroll → a última coluna sumia na borda. O <DataTable> embrulha a tabela num
   .dtable-scroll (overflow-x:auto) que vive DENTRO do .panel: o conteúdo largo ROLA no painel, a
   PÁGINA nunca ganha scroll horizontal. Substitui o paliativo local .tight. Serve a TODA tabela. */
.dtable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtable-scroll > .dtable { min-width: var(--dt-min, 640px); }   /* piso via CSS var (DataTable MinWidth) — NUNCA inline no <table>, senão vence o @media do card-mode */
.dtable-scroll::-webkit-scrollbar { height: 9px; }
.dtable-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
.dtable-scroll::-webkit-scrollbar-track { background: transparent; }
/* célula de conteúdo longo: max-width + ellipsis (title mostra o valor inteiro no hover) */
.cell-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-id { font-variant-numeric: tabular-nums; word-break: break-all; }   /* ids/hashes quebram, não clipam */

/* toolbar do DataTable (busca + filtros AuroraSelect + ações) */
.dt-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 22px 14px; flex-wrap: wrap; }
.dt-toolbar .grow { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---- ActorCell (rico, unificado): pessoa · IA (em nome de) · sistema — cor + selo + rótulo (WCAG 1.4.1) ---- */
.actor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.actor .ava { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 12px; position: relative; background: linear-gradient(135deg, #F0468B, #A855F7); }
.actor .ava.user { background: linear-gradient(135deg, #F0468B, #A855F7); }
/* IA = índigo por default (--ai), mas SEGUE o accent escolhido (var(--hue,…) · incidente 2026-07-17:
   toda superfície de IA reage ao accent; a índigo é o fallback == o visual do proto sem accent custom). */
.actor .ava.ai { background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); }
.actor .ava.system { background: linear-gradient(140deg, var(--ink-faint), var(--ink-soft)); }
.actor .ava .kind { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; border: 2px solid var(--surface); color: #fff; }
.actor .ava .kind.ai { background: var(--hue, var(--ai)); }
.actor .ava .kind.system { background: var(--ink-soft); }
.actor .col { min-width: 0; }
.actor .nm { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actor .rl { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actor .rl .obo { color: var(--hue, var(--ai)); }
[data-theme="dark"] .actor .rl .obo { color: var(--hue2, var(--ai-2)); }
.actor .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 6px; border-radius: var(--r-pill); vertical-align: middle; margin-left: 2px; }
.actor .tag.ai { background: var(--hue-soft, var(--ai-soft)); color: var(--hue, var(--ai)); }
[data-theme="dark"] .actor .tag.ai { color: var(--hue2, var(--ai-2)); }
.actor .tag.system { background: var(--line); color: var(--ink-soft); }

/* ---- UsagePanel: execuções vs cota nos últimos 30 dias · barra âmbar perto da cota (régua da Home) ---- */
.usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding: 6px 22px 20px; }
.usage-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 15px 16px; }
.usage-card .uc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.usage-card .uc-mini { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 12px; flex: none;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.usage-card .uc-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.usage-card .uc-sub { font-size: 11.5px; color: var(--ink-faint); }
.usage-card .uc-metric { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 5px; display: flex; justify-content: space-between; gap: 8px; }
.usage-card .uc-metric b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* gauge do card = full-width (o .gauge global é inline-flex/84px pra matriz do Console; aqui escopamos) */
.usage-card .gauge { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.usage-card .gauge .bar { flex: 1; width: auto; height: 7px; }
.usage-card .gauge .n { font-size: 12px; font-weight: 700; flex: none; }
.usage-card .gauge.warn .n { color: var(--warn-text); }
.usage-card .gauge.atlimit .n { color: var(--danger); }
.usage-card .uc-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.usage-card .uc-note.warn { color: var(--warn-text); font-weight: 600; }
.usage-card .uc-note.bad { color: var(--danger); font-weight: 600; }
.usage-empty { padding: 16px 22px 22px; color: var(--ink-faint); font-size: 13.5px; }

/* Custom template sandbox (wave C2-b · §5): iframe isolado que renderiza o HTML/CSS/JS do staff */
.tpl-sandbox { display: block; width: 100%; min-height: 480px; border: 0; border-radius: var(--r-md, 14px); background: var(--surface, #fff); }
.sandbox-note { display: flex; align-items: center; gap: 8px; padding: 12px 22px 18px; color: var(--ink-soft); font-size: 13px; }
.sandbox-note .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #0fa968); flex: none; }

/* ===== Modo STANDALONE full-bleed (feature "modo de exibição" · paginas-modo-standalone.html) =====
   Layout sem chrome do Hub (FullBleedLayout): a página ocupa o viewport inteiro, o iframe cresce até a altura
   natural do conteúdo (auto-height por postMessage, ajustado pelo hub.js) e a página inteira rola de verdade —
   como um site publicado. Sem max-width, sem padding do .wrap, sem borda/raio: full-bleed de verdade. */
.fullbleed-root { display: block; width: 100%; margin: 0; padding: 0; background: #fff; }
/* o iframe começa na altura do viewport (evita "salto" antes do 1º report) e é ajustado por JS pra a altura do
   conteúdo; width:100% + border:0 + display:block dão o efeito full-bleed. NÃO tem overflow interno: quem rola é a
   página-mãe, com o iframe já do tamanho do conteúdo. */
/* height inicial = 100vh (evita "salto" antes do 1º report); o hub.js sobrescreve com a altura do conteúdo assim que
   o postMessage chega. SEM min-height: um piso de 100vh fica brigando com o conteúdo e faz o auto-height oscilar
   (o body reflui contra a caixa esticada) — deixar o JS ser a única autoridade de altura estabiliza a medida. */
.fullbleed-frame { display: block; width: 100%; height: 100vh; border: 0; margin: 0; background: #fff; }
/* estado "não disponível" do standalone (id inexistente / fora de audiência / rascunho) — centralizado, sem chrome */
.fullbleed-empty { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas, #f1f1fa); }
.fb-empty-card { text-align: center; max-width: 420px; background: var(--surface, #fff); border: 1px solid var(--line, rgba(22,21,42,.08));
  border-radius: var(--r-lg, 22px); padding: 40px 32px; box-shadow: var(--shadow-md, 0 4px 12px rgba(22,21,42,.07)); }
.fb-empty-card .fb-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 14px;
  font-size: 22px; font-weight: 800; color: var(--ink-faint, #8b89a6); background: var(--canvas-2, #e9e9f5); }
.fb-empty-card h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.fb-empty-card p { color: var(--ink-soft, #56546f); font-size: 14px; }

/* app tag with mini glyph (console rows) */
.apptag { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.apptag .mini { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px; background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill); }
/* Verde-AA (PO 2026-08-26): texto do selo usa os tokens -text/-ink (AA nos 2 temas). O tint (--ok/--warn/--danger)
   segue GRÁFICO. Antes reprovava no claro (ok 2.65:1 · warn 2.17:1 · bad 3.12:1); agora ≥5:1. */
.pill.ok { background: rgba(15,169,104,.13); color: var(--ok-text); }
.pill.warn { background: rgba(230,146,11,.15); color: var(--warn-text); }
.pill.bad { background: rgba(239,69,96,.13); color: var(--danger-ink); }
.pill.mute { background: var(--line); color: var(--ink-soft); }
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* role chip (billing-admin etc) */
.rolechip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--hue-soft, var(--hub-soft)), rgba(139,92,246,.14)); color: var(--hue, var(--hub)); text-transform: none; letter-spacing: .01em; }
[data-theme="dark"] .rolechip { color: var(--hue2, var(--hub-2)); }

/* inline usage gauge (console matrix) */
.gauge { display: inline-flex; align-items: center; gap: 9px; }
.gauge .bar { width: 84px; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.gauge .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); border-radius: var(--r-pill); }
.gauge.warn .bar i { background: linear-gradient(90deg, var(--warn), #F6B84B); }
.gauge.atlimit .bar i { background: linear-gradient(90deg, var(--warn), var(--danger)); }
.gauge.stale .bar i { background: var(--ink-faint); opacity: .6; }
.gauge.stale .n { color: var(--ink-faint); }
.gauge .n { font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.enf-hint { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.rowline b { color: var(--ink); font-weight: 600; }

.deeplink { color: var(--hue, var(--hub)); font-weight: 600; text-decoration: none; font-size: 13.5px; }
/* .deeplink é agnóstico de elemento: <a> OU <button> devem renderizar idênticos.
   Reseta o chrome nativo do botão (border 2px + bg cinza + Arial + line-height normal)
   pra ele herdar a mesma caixa do âncora. Vertical-align coerente pra alinhar por linha. */
button.deeplink { background: none; border: 0; padding: 0; margin: 0; font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: inherit; letter-spacing: inherit; vertical-align: baseline; cursor: pointer; -webkit-appearance: none; appearance: none; }
[data-theme="dark"] .deeplink { color: var(--hue2, var(--hub-2)); }
.deeplink:hover { text-decoration: underline; }

.rowline { color: var(--ink-faint); font-size: 13px; padding: 12px 22px; border-top: 1px solid var(--line); }
.tabler-foot { padding: 14px 22px; font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); background: var(--surface-2); }
.num { font-variant-numeric: tabular-nums; }

/* page title block */
.pagehead { margin-bottom: 24px; }
.pagehead h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(26px,4vw,34px); letter-spacing: -.02em; }
.pagehead p { color: var(--ink-soft); margin-top: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }

/* Tabelas densas (console/billing) viram cards já a partir de 900px — no tablet (721-900) o
   modo tabela cortava a última coluna (ações Suspender/Tornar admin/Remover). O layout em card
   é o mesmo do mobile, que já valida bem. */
@media (max-width: 900px) {
  .dtable thead { display: none; }
  .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: 100%; }
  .dtable tr { border-top: 1px solid var(--line); padding: 6px 0; }
  .dtable td { border: none; padding: 5px 20px; }
  .panel-head { flex-wrap: wrap; }
  /* No modo card a tabela vira blocos de 100% — o min-width do wrapper de scroll faria os cards
     estourarem 640px (overflow). Zera o piso: no mobile o card manda, não a rolagem horizontal. */
  .dtable-scroll > .dtable { min-width: 0; }
}

/* ---------- SA / platform area ---------- */
.sa-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill); color: #fff; letter-spacing: .01em;
  background: linear-gradient(135deg, #1B1A2E, #4B3F8F); box-shadow: 0 3px 10px rgba(27,26,46,.3);
  /* NUNCA quebrar "plataforma · super admin" em 2-3 linhas: entre ~961–1200px (a condensação tablet
     :has(.sa-badge) só age ≤960) a topbar SA tem 7 links + badge verboso + nome no avatar e o badge
     enrolava (pill de 3 linhas, topbar ~93px). nowrap mantém 1 linha e a .nav (overflow-x:auto) absorve
     a pressão — mesmo espírito do tratamento do tenant. flex:none impede o badge de ser espremido. */
  white-space: nowrap; flex: none;
}
[data-theme="dark"] .sa-badge { background: linear-gradient(135deg, #8B5CF6, #5B5BF5); }
.sa-badge .star { filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }

/* broker panel — the invisible-provider showcase */
.broker { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 720px) { .broker { grid-template-columns: 1fr; } }
/* min-width:0 impede que um filho largo (margin-row/public-face) estoure a coluna 1fr no mobile (overflow). */
.broker .side { padding: 20px 22px; min-width: 0; }
.broker .side + .side { border-left: 1px solid var(--line); }
@media (max-width: 720px) { .broker .side + .side { border-left: none; border-top: 1px solid var(--line); } }
.broker .lab { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 10px; }
.broker .public-face { display: flex; align-items: center; gap: 12px; min-width: 0; }
.broker .public-face > div { min-width: 0; }
.broker .public-face .nm, .broker .public-face .sub { overflow-wrap: anywhere; }
.broker .public-face .mini { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 18px; background: linear-gradient(140deg, var(--cpf), var(--cpf-2)); box-shadow: 0 5px 14px -3px var(--cpf); }
.broker .public-face .nm { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 17px; }
.broker .public-face .sub { color: var(--ink-faint); font-size: 13px; }
.broker .prov { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.broker select {
  font: inherit; font-weight: 600; font-size: 14px; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; flex: 1; min-width: 0;
}
.broker .veil { font-size: 12.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.broker .veil .eye { color: var(--cpf); }
.margin-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 6px; }
.margin-row .m { display: flex; flex-direction: column; }
.margin-row .m .k { font-size: 11px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.margin-row .m .v { font-size: 17px; font-weight: 700; font-family: "Bricolage Grotesque"; font-variant-numeric: tabular-nums; }
.margin-row .m.gain .v { color: var(--ok-text); } /* Verde-AA: --ok→--ok-text (valor textual) */

.dot-health { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.dot-health.up { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot-health.degraded { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.dot-health.down { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.dot-health.unknown { background: var(--ink-faint); box-shadow: none; }

/* Região (R22) — a fronteira comercial do catálogo, NÃO um cadeado de plano. "Global" é neutro;
   um país (BR) é um selo discreto. Não usa a cor de "bloqueado" — é onde se oferta, não o que trava. */
.regbadge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill); letter-spacing: .02em;
}
.regbadge.global { background: var(--line); color: var(--ink-soft); }
.regbadge.regional { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .regbadge.regional { color: var(--hue2, var(--hub-2)); }
.regbadge .globe { font-size: 11px; opacity: .8; }

/* Banda tablet (721–960px): a topbar SA tem itens a mais (sa-badge verboso + nome no avatar) e enrola/estoura.
   Condensa o sa-badge pro star e esconde o nome do avatar — a topbar volta a UMA linha sem overflow. Só a
   área SA tem .sa-badge, então isto não toca a topbar do tenant (mantém Aurora 1:1 no desktop ≥961px). */
@media (min-width: 721px) and (max-width: 960px) {
  .sa-badge { font-size: 0; gap: 0; padding: 6px 9px; }
  .sa-badge .star { font-size: 13px; }
  .topbar:has(.sa-badge) .avatar span:last-child { display: none; }
  .topbar:has(.sa-badge) .avatar { padding: 4px; }
}

/* A nav SA cresceu (Catálogo/Módulos/Páginas/Modelos/Menu/Conexões = 6 itens) e, junto de brand + lado
   direito (badge/tema/avatar), não cabe em telas estreitas → o avatar era empurrado pra fora (overflow).
   Fix BREAKPOINT-INDEPENDENTE: a nav SA ENCOLHE e rola horizontalmente (sem barra visível) quando falta
   espaço — em tela larga não encolhe (sobra espaço, flex-shrink não age), em tela estreita cede espaço ao
   lado direito, que fica sempre visível. Escala pra N itens. Só a topbar SA (:has(.sa-badge)); a do tenant
   e o desktop largo ficam idênticos. */
.topbar:has(.sa-badge) .nav {
  min-width: 0; flex: 0 1 auto; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.topbar:has(.sa-badge) .nav::-webkit-scrollbar { display: none; }
.topbar:has(.sa-badge) .nav a { white-space: nowrap; }

/* Banda tablet (721–960px) na topbar do TENANT (sem .sa-badge): com a nav de 4 links (Meus apps/Menu/Console/
   Cobrança) + idioma + tema + avatar-com-nome, o .topbar-right estoura ~21-66px (o cânone só colapsa ≤720).
   Fix: esconde o nome do avatar e aperta os gaps em TODA a faixa de tablet — o topo alto (900px) também
   estourava ~21px, não só 860. Casa com a banda SA (721–960). Mantém Aurora 1:1 ≥961px. */
@media (min-width: 721px) and (max-width: 960px) {
  .topbar:not(:has(.sa-badge)) { gap: 10px; }
  .topbar:not(:has(.sa-badge)) .avatar span:last-child { display: none; }
  .topbar:not(:has(.sa-badge)) .avatar { padding: 4px; }
  .topbar:not(:has(.sa-badge)) .topbar-right { gap: 6px; }
  .topbar:not(:has(.sa-badge)) .nav { margin-left: 4px; gap: 2px; }
}

/* responsive topbar — collapse nav + label text on small screens */
@media (max-width: 720px) {
  .topbar { gap: 12px; padding: 12px 16px; }
  .nav { display: none; }
  .icon-btn { padding: 0 10px; height: 36px; }
  #theme { font-size: 0; padding: 0; width: 36px; justify-content: center; }
  #theme::before { content: "◐"; font-size: 15px; }
  .avatar span:last-child { display: none; }
  .avatar { padding: 4px; }
  .sa-badge { font-size: 0; gap: 0; padding: 6px 9px; }
  .sa-badge .star { font-size: 13px; }
  .margin-row { gap: 14px; }
  .plan .sep { display: none; }
  .plan .grow { margin-left: 0; width: 100%; }
  .plan .grow .btn { width: 100%; justify-content: center; }
}

/* Telas muito estreitas (≤420px): no iPhone SE/base (375px) E no probe 390px o cluster à direita
   (sino + idioma + tema + avatar) estourava ~6-7px a página (achado QA 2026-07-16 + probe de overflow
   2026-07-18). Este bloco vem DEPOIS do ≤720px de propósito: os dois casam em ≤420px com a mesma
   especificidade, então a ORDEM DE FONTE decide — antes ele perdia o padding/gap pro ≤720px.
   Aperta padding lateral + gap E colapsa o botão de idioma pro glyph (como o #theme) — sem tocar o
   alvo de toque (36px). */
@media (max-width: 420px) {
  .topbar { padding-left: 12px; padding-right: 12px; gap: 10px; }
  .topbar-right { gap: 4px; }
  /* seletor de idioma (LanguageMenu → chip AuroraSelect) vira só o glyph ◍ — o rótulo "PT" some.
     Mantém a caixa quadrada de 36px pro alvo de toque, igual ao toggle de tema. */
  .topbar-right .lang-menu .adrop-trigger.as-chip .at-label { display: none; }
  .topbar-right .lang-menu .adrop-trigger.as-chip { padding: 0; width: 36px; justify-content: center; }
}

:focus-visible { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; scroll-behavior: auto; }
  /* .reveal nasce opacity:0 e só sobe via keyframe; com animation:none o conteúdo ficaria
     invisível. Restaura o estado final (fix canônico — latente em toda página com .reveal). */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* entrance stagger — o estado FINAL mora na regra base (opacity:1, transform:none KEYWORD); a animação usa
   fill `backwards` (segura o offset durante o animation-delay) mas NÃO retém o quadro final. Assim, ao terminar,
   o transform volta ao keyword `none` — e NÃO a um matrix(1,0,0,1,0,0) identidade que estabeleceria containing-block
   e prenderia qualquer position:fixed (kebab/overlays) sob o elemento. Footgun canônico do .reveal (ver l.1965). */
.reveal { animation: reveal .6s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
   AURORA — SYSTEM STATES (fase 2)
   Cada estado é um MODO do mesmo céu, não um alarme colado.
   Contratos: reporte-de-uso · licenca-entitlements · identidade-oidc
   ============================================================ */

/* ---- Estado 1 · SEM REPORTE ("—") — amanhecer, quieto, NÃO é erro ----
   reporte-de-uso §4: "Sem reporte recente → mostra '—' (nunca inventa)". */
.appmark.noreport .ring-track { stroke: var(--ink-faint); stroke-dasharray: 2 5; opacity: .5; }
.appmark.noreport .ring-val { display: none; }        /* sem arco de valor */
.appmark.noreport .glyph {
  /* A (PO 2026-08-01): app SEM uso reportado mantém o monograma VIBRANTE (marca), igual ao Marketplace/proto;
     só o ANEL fica vazio/pontilhado (.noreport .ring-track dotted + .ring-val oculto) sinalizando "sem uso ainda".
     Antes o disco ficava cinza/dessaturado (surface-2 + saturate .4) e destoava do Marketplace — mesmo app, dois
     visuais. O contorno é o medidor de uso; a marca não depende do uso. */
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  color: #fff;
  box-shadow: 0 6px 16px -4px var(--hue, var(--hub));
}
.usage-note.noreport { color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.usage-note.noreport .dash { font-weight: 700; font-family: "Bricolage Grotesque", sans-serif; color: var(--ink-soft); }
.usage-note .info {
  display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink-faint); font-size: 10px; font-weight: 700;
  cursor: help; font-style: normal;
}

/* ---- Estado 2 · PERTO DO TETO (≥80%) — entardecer âmbar ----
   .appmark.warn já existia; aqui aprofundamos com aura âmbar sobre a hue. */
.appmark.warn .glyph { box-shadow: 0 6px 16px -4px var(--warn); }
.appmark.warn::after {                                 /* aura âmbar suave sobrepondo a hue */
  content: ""; position: absolute; inset: -8px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,146,11,.28), transparent 68%);
  opacity: .9;
}

/* ---- Estado 3 · NO TETO — app BLOQUEIA, hub AVISA (upgrade aceso, sem pânico) ----
   reporte-de-uso §0/§4 + licença. Anel cheio âmbar→vermelho + selo no canto. */
.appmark.atlimit .ring-val { stroke: url(#atlimit-grad); }
.appmark.atlimit::after {
  content: ""; position: absolute; inset: -8px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,69,96,.22), transparent 68%);
}
.appmark .seal {                                       /* selo pequeno no canto do monograma */
  position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; color: #fff;
  background: linear-gradient(135deg, var(--warn), var(--danger));
  box-shadow: 0 2px 8px -1px rgba(239,69,96,.6); border: 2px solid var(--surface);
}
/* copy that separates the two roles */
.limit-copy { margin-top: 16px; display: flex; flex-direction: column; gap: 3px; }
.limit-copy .by-app { font-size: 14px; color: var(--ink); font-weight: 600; display: flex; align-items: flex-start; gap: 7px; }
.limit-copy .by-app .lock { color: var(--warn); flex: none; }
.limit-copy .by-hub { font-size: 13.5px; color: var(--ink-soft); }

/* ---- Estado 4 · HUB INACESSÍVEL — CALMO, tranquilizador, NUNCA vermelho ----
   licença §3 (verificação offline) + R15 (offline é feature). */
.appmark.stale .ring-track { stroke: var(--line-2); }
.appmark.stale .ring-val { stroke: var(--ink-faint); opacity: .55; }
.appmark.stale .glyph { filter: grayscale(.5) saturate(.6); box-shadow: none; }
.stale-badge {
  position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: var(--surface-2); color: var(--ink-faint);
  border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}
.usage-note.stale { color: var(--ink-faint); }        /* cinza, calmo — não âmbar, não vermelho */
.usage-note.stale b { color: var(--ink-soft); font-weight: 600; }
.stale-hint { margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }

/* calm banner (topo do launcher, opcional) */
.calm-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; margin-bottom: 24px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); color: var(--ink-soft); font-size: 14px;
}
.calm-banner .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--line); color: var(--ink-faint); font-size: 15px; }
.calm-banner b { color: var(--ink); font-weight: 600; }
.calm-banner .spacer { margin-left: auto; }

/* ---- Estado 5 · OVERLAY DE SSO ("entrar uma vez") ----
   identidade-oidc §5. Sequência real → passos numerados legítimos. */
.sso-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(14,14,25,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.sso-overlay.on { opacity: 1; pointer-events: auto; }
.sso-card {
  position: relative; width: min(400px, calc(100vw - 40px)); padding: 30px 30px 26px;
  border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg); text-align: left; overflow: hidden;
  transform: translateY(14px) scale(.98); transition: transform .32s cubic-bezier(.2,.8,.3,1);
}
.sso-overlay.on .sso-card { transform: none; }
.sso-card::before {                                    /* aura da hue do app-alvo */
  content: ""; position: absolute; z-index: -1; top: -50%; left: -20%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, var(--hue, var(--hub)), transparent 66%); opacity: .3; filter: blur(8px);
}
.sso-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.sso-head .mark {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 6px 18px -4px var(--hue, var(--hub));
}
.sso-head .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.sso-head .s { color: var(--ink-soft); font-size: 13.5px; }
.sso-steps { display: flex; flex-direction: column; gap: 12px; }
.sso-step { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-faint); transition: color .3s; }
.sso-step .marker {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; border: 1.5px solid var(--line-2); color: var(--ink-faint);
  background: var(--surface); transition: all .3s;
}
.sso-step.done { color: var(--ink); font-weight: 600; }
.sso-step.done .marker { background: var(--ok); border-color: var(--ok); color: #fff; }
.sso-step.active { color: var(--ink); }
.sso-step.active .marker { border-color: var(--hue, var(--hub)); color: var(--hue, var(--hub)); }
.sso-nopass { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ok); font-weight: 600; }
.sso-nopass .key { opacity: .8; }
/* passo 2 falhou (acesso negado) — marcador âmbar/vermelho calmo, sem alarme */
.sso-step.fail { color: var(--ink); font-weight: 600; }
.sso-step.fail .marker { background: var(--warn, #d97706); border-color: var(--warn, #d97706); color: #fff; }
/* estado HONESTO (bloqueado / chegando / não-configurado): substitui os passos quando a entrada não procede */
.sso-outcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding-top: 4px; animation: sso-outcome-in .28s cubic-bezier(.2,.8,.3,1); }
.sso-outcome[hidden] { display: none; }
.sso-outcome-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-size: 22px; background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); margin-bottom: 4px; }
.sso-outcome-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.sso-outcome-body { color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: 42ch; }
.sso-outcome-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
@keyframes sso-outcome-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sso-outcome { animation: none; } }

/* ---- Estado 6 · DOWNGRADE = UPGRADE (R14) — mesmo peso, sem dark-pattern ----
   billing.html · licença §4 (exp=estado) + reconciliação do Fluxion. */
.plan-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 22px 20px; }
@media (max-width: 560px) { .plan-switch { grid-template-columns: 1fr; } }
.plan-opt {
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2);
  padding: 18px; cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s;
  display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--ink);
}
.plan-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--hue, var(--hub)); }
.plan-opt .dir { display: flex; align-items: center; gap: 9px; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.plan-opt .arr { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; }
.plan-opt.up .arr { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .plan-opt.up .arr { color: var(--hue2, var(--hub-2)); }
.plan-opt.down .arr { background: rgba(230,146,11,.14); color: var(--warn); }
.plan-opt .to { font-size: 14px; color: var(--ink-soft); }
.plan-opt .to b { color: var(--ink); font-weight: 700; }
.plan-opt .foot { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }

/* honest data panel (revealed on "reduzir") */
.data-panel {
  margin: 0 22px 20px; border-radius: var(--r-md); border: 1px solid var(--warn);
  background: rgba(230,146,11,.06); overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .4s ease, opacity .3s, margin .4s;
}
.data-panel.on { max-height: 720px; opacity: 1; }
[data-theme="dark"] .data-panel { background: rgba(230,146,11,.08); }
.data-panel .dp-head { padding: 16px 18px 10px; display: flex; align-items: center; gap: 10px; }
.data-panel .dp-head .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(230,146,11,.16); color: var(--warn); font-size: 15px; flex: none; }
.data-panel .dp-head h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 700; }
.data-panel .dp-head p { font-size: 13px; color: var(--ink-soft); }
.dp-steps { list-style: none; padding: 4px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.dp-steps li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--ink-soft); }
.dp-steps li .n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-soft); }
.dp-steps li b { color: var(--ink); font-weight: 600; }
.dp-steps li .rev { font-size: 12px; font-weight: 700; color: var(--ok-text); background: rgba(15,169,104,.13); /* Verde-AA: --ok→--ok-text */
  padding: 1px 8px; border-radius: var(--r-pill); margin-left: 4px; white-space: nowrap; }
.dp-actions { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; flex-wrap: wrap; }
.dp-consent { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); flex: 1; min-width: 200px; }
.dp-consent input { width: 17px; height: 17px; accent-color: var(--hue, var(--hub)); cursor: pointer; }
.btn-warn { color: #fff; background: linear-gradient(135deg, var(--warn), #F6B84B); box-shadow: 0 6px 18px -5px var(--warn); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

/* campo de formulário (provisionamento: convite) — coerente com o .broker select */
.field {
  font: inherit; font-weight: 600; font-size: 14px; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.field::placeholder { color: var(--ink-faint); font-weight: 500; }
.field:focus { outline: none; border-color: var(--hue, var(--hub)); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); }
select.field { cursor: pointer; }

/* ações inline na linha de pessoas (suspender/remover/papel) */
.row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.row-actions form { display: inline-flex; }

/* ---- states.html gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr; } }
.state-card {
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column;
}
.state-card .sc-num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px;
  color: var(--ink-faint); letter-spacing: .04em; }
.state-card .sc-demo { display: flex; align-items: flex-start; gap: 16px; margin: 14px 0 16px; min-height: 76px; }
.state-card h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.state-card .sc-body { flex: 1; min-width: 0; }
.state-card .clause {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint);
  display: flex; align-items: center; gap: 7px;
}
.state-card .clause code { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; color: var(--hue, var(--hub));
  background: var(--hue-soft, var(--hub-soft)); padding: 1px 7px; border-radius: 6px; font-size: 12px; }
[data-theme="dark"] .state-card .clause code { color: var(--hue2, var(--hub-2)); }
.state-card.span2 { grid-column: 1 / -1; }

/* ============================================================
   COPILOTO DE IA — PROTÓTIPO fase 2 (motor mockado)
   UX-COPILOTO.md (Léo): uma AURA + o ANEL como cota, a FONTE como herói (.cite-chip),
   hue própria --ai, glifo ✦. Aurora 1:1 — reusa .card / .appmark / .data-panel.
   Texto sempre em --ink; --ai só em acento/borda/glifo (contraste AA nos 2 temas).
   ============================================================ */

/* ---- selo "protótipo · respostas de exemplo" (honestidade — não confundir com IA real) ---- */
.proto-seal {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: .01em;
  /* selo do protótipo de IA — chrome do Hub, segue o accent (fallback --ai · PO 2026-07-17) */
  color: var(--hue, var(--ai)); background: var(--hue-soft, var(--ai-soft)); border: 1px dashed var(--hue, var(--ai-line));
}
[data-theme="dark"] .proto-seal { color: var(--hue2, var(--ai-2)); }
.proto-seal .gly { font-size: 11px; }

/* ---- barra "o que você quer fazer?" (launcher, Carla) — largura total, abaixo da saudação ---- */
.ai-bar { position: relative; margin: 4px 0 8px; }
.ai-bar .ai-field {
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px;
  border-radius: var(--r-pill); background: var(--surface);
  /* barra "o que você quer fazer?" — chrome do Hub, segue o accent (fallback --ai · PO 2026-07-17) */
  border: 1px solid var(--hue, var(--ai-line)); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.ai-bar .ai-field:focus-within { border-color: var(--hue, var(--ai)); box-shadow: 0 0 0 4px var(--hue-soft, var(--ai-soft)), var(--shadow-md); }
.ai-bar .spark {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  /* ✦ da barra do copiloto (dominante da home) — chrome, segue o accent (fallback --ai · PO 2026-07-17) */
  color: #fff; font-size: 15px; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2)));
  box-shadow: 0 5px 14px -4px var(--hue, var(--ai));
}
.ai-bar input {
  flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 16px;
  color: var(--ink); font-weight: 500; padding: 9px 0;
}
.ai-bar input:focus { outline: none; }
.ai-bar input::placeholder { color: var(--ink-faint); font-weight: 500; }
.ai-bar .ai-send {
  flex: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  /* CTA primário "Perguntar" — chrome do Hub, segue o accent (fallback --ai · PO 2026-07-17) */
  background: linear-gradient(135deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 5px 16px -5px var(--hue, var(--ai));
  transition: transform .16s, box-shadow .16s, opacity .16s;
}
.ai-bar .ai-send:hover { box-shadow: 0 9px 22px -6px var(--hue, var(--ai)); }
.ai-bar .ai-send:active { transform: scale(.96); }
.ai-bar .ai-send:disabled { opacity: .5; cursor: not-allowed; }
.ai-teaser { margin: 8px 4px 0; font-size: 12.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-teaser .free { color: var(--hue, var(--ai)); font-weight: 600; }
[data-theme="dark"] .ai-teaser .free { color: var(--hue2, var(--ai-2)); }

/* ---- upsell CALMO (Home · barra "Peça" sem ai.copilot · proto home-copilot-live estado 4) — fail-closed:
   convida ao plano Pro em vez de oferecer o campo que o endpoint recusaria. Lock = hue da IA (--ai); a CTA
   "Ver planos" é ação do hub/billing (--hub). Aurora AA dark+light. ---- */
.ai-upsell {
  margin: 4px 0 8px; padding: 22px 20px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.ai-upsell .lock {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  /* superfície da IA — segue o accent (fallback --ai · incidente 2026-07-17: chrome do copiloto reage ao accent) */
  color: var(--hue, var(--ai)); background: var(--hue-soft, var(--ai-soft)); border: 1px solid var(--hue, var(--ai-line)); margin-bottom: 10px;
}
[data-theme="dark"] .ai-upsell .lock { color: var(--hue2, var(--ai-2)); }
.ai-upsell .lock svg { width: 20px; height: 20px; }
.ai-upsell h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.ai-upsell p { margin: 0 auto 14px; max-width: 48ch; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.ai-upsell .cta {
  display: inline-block; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; color: #fff;
  padding: 9px 18px; border-radius: var(--r-pill);
  /* CTA "Ver planos" — chrome do Hub, segue o accent (fallback --hub · PO 2026-07-17) */
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 5px 16px -5px var(--hue, var(--hub));
  transition: box-shadow .16s, transform .16s;
}
.ai-upsell .cta:hover { box-shadow: 0 9px 22px -6px var(--hue, var(--hub)); }
.ai-upsell .cta:active { transform: scale(.97); }

/* chips de exemplo (reconhecer > lembrar, UX §6) */
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 4px 0; }
.ai-chip {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill);
  cursor: pointer; transition: all .16s; display: inline-flex; align-items: center; gap: 7px;
}
.ai-chip:hover { color: var(--ink); border-color: var(--hue, var(--ai)); background: var(--hue-soft, var(--ai-soft)); }
/* chips de sugestão "Perguntar…" — chrome, seguem o accent (fallback --ai · PO 2026-07-17) */
.ai-chip .q { color: var(--hue, var(--ai)); font-weight: 800; }
[data-theme="dark"] .ai-chip .q { color: var(--hue2, var(--ai-2)); }

/* ---- card de conversa (expande in-place; aura --ai) — Carla ---- */
.ai-convo {
  position: relative; margin: 14px 0 8px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--hue, var(--ai-line)); box-shadow: var(--shadow-md); overflow: hidden; isolation: isolate;
}
.ai-convo::before {  /* aura do accent (fallback hue de IA · PO 2026-07-17) */
  content: ""; position: absolute; z-index: -1; top: -45%; right: -12%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, var(--hue, var(--ai)), transparent 66%); opacity: .13; filter: blur(6px);
}
.ai-turn { padding: 18px 22px; border-top: 1px solid var(--line); }
.ai-turn:first-child { border-top: none; }
.ai-q { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; color: var(--ink); }
/* monograma pessoal "você" na conversa do copiloto — chrome, segue o accent (fallback Aurora · PO 2026-07-17) */
.ai-q .you { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--hue, #F0468B), var(--hue2, #A855F7)); }
.ai-a { margin: 12px 0 0; padding-left: 36px; }
.ai-a .a-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
/* marca da resposta do copiloto — chrome, segue o accent (fallback --ai · PO 2026-07-17) */
.ai-a .a-head .mk { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none;
  color: #fff; font-size: 12px; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 3px 10px -3px var(--hue, var(--ai)); }
.ai-a .a-head .lbl { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.ai-text { font-size: 15.5px; color: var(--ink); line-height: 1.62; }
.ai-text .cursor {  /* cursor de digitação durante o stream */
  display: inline-block; width: 2px; height: 1.05em; vertical-align: text-bottom; margin-left: 1px;
  background: var(--hue, var(--ai)); animation: ai-blink 1s steps(2) infinite; border-radius: 2px;
}
@keyframes ai-blink { 50% { opacity: 0; } }
.ai-thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 14px; }
.ai-thinking .d { width: 6px; height: 6px; border-radius: 50%; background: var(--hue, var(--ai)); animation: ai-pulse 1.2s infinite; }
.ai-thinking .d:nth-child(2) { animation-delay: .18s; } .ai-thinking .d:nth-child(3) { animation-delay: .36s; }
@keyframes ai-pulse { 0%,100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* COSTURA STELA — card "montando a proposta…" enquanto o endpoint executa o rascunho (draft_job) read-only e
   monta o card create_job REAL. Some quando o `proposal`/`done` chega. IA = accent-reativo (var(--hue, var(--ai…)) ·
   incidente 2026-07-17: chrome do copiloto SEGUE o accent, não fixa --ai). */
.ai-proposal-pending { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px 13px;
  border: 1px solid var(--hue, var(--ai-line)); border-radius: var(--r-md, 12px); background: var(--hue-soft, var(--ai-soft)); }
.ai-proposal-pending .app-pending-txt { color: var(--ink-soft); font-size: 13px; font-weight: 600; }

/* nível de confiança (✓/⚠/ⓘ/?) — ícone + texto + cor (WCAG 1.4.1) */
.ai-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill); margin-top: 12px; }
.ai-conf.high { color: var(--ok-text); background: rgba(15,169,104,.13); } /* Verde-AA: --ok→--ok-text */
.ai-conf.medium { color: var(--warn-text); background: rgba(230,146,11,.15); } /* Verde-AA: --warn→--warn-text */
.ai-conf.opinion, .ai-conf.unknown { color: var(--ink-soft); background: var(--line); }

/* moldura "opinião, sem fonte" (UX §2 — sem fonte = cinza, honesto) */
.ai-opinion { margin-top: 12px; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px dashed var(--line-2); background: var(--surface-2); color: var(--ink-soft); font-size: 13.5px;
  display: flex; align-items: flex-start; gap: 9px; }
.ai-opinion .ic { color: var(--ink-faint); flex: none; }

/* "por quê" — proveniência (o que a IA leu / não acessou) */
.ai-why { margin-top: 10px; }
.ai-why summary { cursor: pointer; font-size: 12.5px; color: var(--ink-faint); font-weight: 600; list-style: none;
  display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.ai-why summary::-webkit-details-marker { display: none; }
.ai-why summary .i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line-2); font-size: 10px; font-weight: 700; }
.ai-why summary:hover { color: var(--ink-soft); }
.ai-why .prov { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55;
  padding: 9px 12px; border-left: 2px solid var(--hue, var(--ai-line)); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ---- .cite-chip — a FONTE clicável (o herói) ---- */
.cite-row { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cite-row .cite-lbl { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.cite-chip {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink); background: var(--hue-soft, var(--ai-soft)); border: 1px solid var(--hue, var(--ai-line));
  padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; transition: all .16s; text-decoration: none;
}
.cite-chip:hover { border-color: var(--hue, var(--ai)); box-shadow: 0 4px 14px -5px var(--hue, var(--ai)); transform: translateY(-1px); }
.cite-chip .ki { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  color: #fff; font-size: 11px; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); flex: none; }
.cite-chip .arr { color: var(--hue, var(--ai)); font-weight: 800; }
[data-theme="dark"] .cite-chip .arr { color: var(--hue2, var(--ai-2)); }

/* ============================================================
   CARD DE AÇÃO — Frente 1 · D-IA-6 (a IA PROPÕE, o humano APROVA/RECUSA)
   Fiel a prototype-v2/copiloto-v2-acao.html. O verbo canônico da casa é "Recusar"
   (NÃO "Descartar"). Herda a hue do app-alvo (--fluxion) — "age no app", não "mágica da IA".
   Renderizado por hub.js (renderProposal) → estilos GLOBAIS (não scoped).
   ============================================================ */
.action-card {
  margin-top: 14px; border-radius: var(--r-md); overflow: hidden; position: relative;
  background: var(--surface); border: 1px solid rgba(59,130,246,.30);
  box-shadow: 0 6px 20px -10px rgba(59,130,246,.45);
}
.action-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--fluxion), var(--fluxion-2));
}
.action-card.destr { border-color: rgba(239,69,96,.30); box-shadow: 0 6px 20px -10px rgba(239,69,96,.45); }
.action-card.destr::before { background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 72%, #fff)); }
.action-card .ac-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px 10px 20px; }
.action-card .ac-target {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-pill); color: var(--fluxion); background: rgba(59,130,246,.12);
}
[data-theme="dark"] .action-card .ac-target { color: var(--fluxion-2); }
.action-card.destr .ac-target { color: var(--danger-ink); background: rgba(239,69,96,.12); } /* Verde-AA: --danger→--danger-ink (texto sobre tint) */
.action-card .ac-target .mini {
  width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 10px; background: linear-gradient(140deg, var(--fluxion), var(--fluxion-2));
}
.action-card.destr .ac-target .mini { background: linear-gradient(140deg, var(--danger), color-mix(in srgb, var(--danger) 72%, #fff)); }
.action-card .ac-head .kind { font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .04em; }
.action-card .ac-head .kind.rev { background: rgba(15,169,104,.13); color: var(--ok-text); } /* Verde-AA: --ok→--ok-text */
.action-card .ac-head .kind.destr { background: rgba(239,69,96,.13); color: var(--danger); }
/* P7 · chip de TIER DE RISCO declarativo (compliance-legível). Empurra o par risco+natureza pra a direita
   (margin-left:auto migrou do .kind pra cá). Aditivo — não muda o gate (D-IA-6). */
.action-card .ac-head .risk-tier { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.action-card .ac-head .risk-tier.t-notify { background: rgba(90,120,160,.14); color: var(--muted); }
.action-card .ac-head .risk-tier.t-approve { background: rgba(15,169,104,.13); color: var(--ok-text); } /* Verde-AA: --ok→--ok-text */
.action-card .ac-head .risk-tier.t-approve-consent { background: rgba(239,69,96,.13); color: var(--danger-ink); } /* Verde-AA: --danger→--danger-ink */
.action-card .ac-head .risk-tier.t-prohibit { background: rgba(239,69,96,.20); color: var(--danger); }
.action-card .ac-title { padding: 0 18px 10px 20px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
/* args da ação em termos humanos (chave → valor). Valor ausente = "—" (sem número inventado — D-IA §prov). */
.action-card .ac-args { list-style: none; margin: 0; padding: 0 18px 12px 20px; display: flex; flex-direction: column; gap: 6px; }
.action-card .ac-args li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.action-card .ac-args .k { color: var(--ink-faint); font-weight: 600; min-width: 82px; }
.action-card .ac-args .v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.action-card .ac-args .v.none { color: var(--ink-faint); font-weight: 500; }
/* M2 · effect-preview — o EFEITO EXATO da ação (o que VAI mudar), acima dos args crus. */
.action-card .ac-preview {
  margin: 0 18px 12px 20px; padding: 12px 14px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--fluxion) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--fluxion) 22%, var(--line));
}
[data-theme="dark"] .action-card .ac-preview { background: color-mix(in srgb, var(--fluxion) 12%, var(--surface-2)); }
.action-card .ac-preview .ap-summary { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.action-card .ac-preview .ap-changes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.action-card .ac-preview .apc { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.action-card .ac-preview .apc-k { color: var(--ink-faint); font-weight: 600; min-width: 82px; }
.action-card .ac-preview .apc-v { color: var(--ink); font-weight: 600; }
.action-card .ac-preview .apc-v .v.none { color: var(--ink-faint); font-weight: 500; }
.action-card .ac-preview .apc-arrow { color: var(--fluxion-2); font-weight: 700; }
.action-card .ac-preview .ap-note { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.action-card .ac-preview .ap-unresolved { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.action-card.destr .ac-preview { background: rgba(239,69,96,.06); border-color: rgba(239,69,96,.28); }
.action-card .ac-gate {
  display: flex; align-items: center; gap: 9px; margin: 0 18px 14px 20px; padding: 9px 13px;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line-2);
  font-size: 12.5px; color: var(--ink-soft);
}
.action-card .ac-gate .lk { flex: none; }
.action-card .ac-gate b { color: var(--ink); font-weight: 600; }
.action-card .ac-consent {
  display: flex; align-items: center; gap: 10px; margin: 0 18px 14px 20px; padding: 12px 14px;
  border-radius: var(--r-sm); background: rgba(239,69,96,.06); border: 1px solid rgba(239,69,96,.30);
  font-size: 13.5px; color: var(--ink); cursor: pointer;
}
[data-theme="dark"] .action-card .ac-consent { background: rgba(239,69,96,.10); }
.action-card .ac-consent input { width: 17px; height: 17px; accent-color: var(--danger); cursor: pointer; flex: none; }
.action-card .ac-actions {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px 16px 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.action-card .btn-approve {
  color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: none;
  padding: 10px 18px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--fluxion), var(--fluxion-2));
  box-shadow: 0 6px 18px -5px var(--fluxion); transition: transform .16s, box-shadow .16s, opacity .16s;
}
.action-card.destr .btn-approve { background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 78%, #fff)); box-shadow: 0 6px 18px -5px var(--danger); }
.action-card .btn-approve:hover { box-shadow: 0 10px 26px -6px var(--fluxion); }
.action-card .btn-approve:active { transform: scale(.97); }
.action-card .btn-approve:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.action-card .btn-approve:disabled:active { transform: none; }
.action-card .btn-recusar {
  color: var(--ink-soft); background: transparent; font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; border: none; padding: 10px 16px; border-radius: var(--r-pill); transition: background .16s, color .16s;
}
.action-card .btn-recusar:hover { color: var(--ink); background: var(--line); }
.action-card .btn-recusar:disabled { opacity: .5; cursor: default; }
.action-card .ac-meter { margin-left: auto; font-size: 12px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.action-card .ac-result { margin: 0 18px 14px 20px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.action-card.resolved.ok .ac-result { color: var(--ok-text); } /* Verde-AA: --ok→--ok-text (texto de resultado) */
.action-card.resolved.err .ac-result { color: var(--danger); }
.action-card.resolved { opacity: .96; }
.action-card.resolved .ac-gate, .action-card.resolved .ac-consent { display: none; }
/* M2 · undo — "Desfazer" revelado após a ação vigorar (dentro da janela). */
.action-card .ac-undo { padding: 0 18px 16px 20px; }
.action-card .btn-undo {
  color: var(--ink-soft); background: var(--surface-2); font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; border: 1px solid var(--line-2); padding: 8px 15px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px; transition: background .16s, color .16s, border-color .16s;
}
.action-card .btn-undo:hover { color: var(--ink); background: var(--line); border-color: var(--fluxion); }
.action-card .btn-undo:disabled { opacity: .5; cursor: default; }
.action-card.undone { opacity: .85; }
.action-card.undone .ac-undo { display: none; }
.action-card.undone .ac-result { color: var(--ink-soft); }
@media (max-width: 560px) {
  .action-card .ac-actions { flex-direction: column; align-items: stretch; }
  .action-card .btn-approve, .action-card .btn-recusar { justify-content: center; }
  .action-card .ac-meter { margin-left: 0; justify-content: center; }
}

/* ---- drawer split da cite-chip: resposta FICA + fonte real destacada ---- */
.cite-drawer {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: stretch end;
  grid-template-columns: 1fr; grid-template-rows: 100%; background: rgba(14,14,25,.44);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
  overflow: hidden;  /* clipa o deslize (translateX) do painel fechado — senão vaza overflow no mobile */
}
.cite-drawer.on { opacity: 1; pointer-events: auto; }
.cite-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(560px, 100vw); max-width: 100%; overflow-y: auto;
  box-sizing: border-box;
  background: var(--surface); box-shadow: var(--shadow-lg); border-left: 1px solid var(--hue, var(--ai-line));
  /* Nudge de entrada vem da ESQUERDA (translateX negativo): um translateX positivo empurraria o painel
     ancorado em right:0 PARA FORA do viewport (overflow horizontal geométrico de +24px medido por
     getBoundingClientRect, mesmo com o .cite-drawer clipando visualmente). O nudge negativo desliza o
     painel de dentro pro lugar sem nunca ultrapassar a borda direita. */
  transform: translateX(-24px); transition: transform .32s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column;
}
.cite-drawer.on .cite-panel { transform: none; }
.cite-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.cite-head .mk { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: #fff; font-size: 16px; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 5px 14px -4px var(--hue, var(--ai)); }
.cite-head h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cite-head p { font-size: 12.5px; color: var(--ink-faint); }
.cite-head .x { margin-left: auto; border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; flex: none; transition: all .16s; }
.cite-head .x:hover { color: var(--ink); border-color: var(--ink-faint); }

/* eco da resposta (fica visível — verificação sem perder a afirmação) */
.cite-echo { margin: 16px 22px 0; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--hue-soft, var(--ai-soft)); border: 1px solid var(--hue, var(--ai-line)); font-size: 14px; color: var(--ink); line-height: 1.55; }
.cite-echo .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hue, var(--ai));
  display: block; margin-bottom: 6px; }
[data-theme="dark"] .cite-echo .tag { color: var(--hue2, var(--ai-2)); }

/* o DADO REAL, destacado */
.cite-source { margin: 18px 22px 22px; }
.cite-source .src-lab { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.cite-source .src-lab .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.src-rows { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.src-rows .r { display: flex; gap: 14px; padding: 11px 15px; border-top: 1px solid var(--line); font-size: 13.5px; }
.src-rows .r:first-child { border-top: none; }
.src-rows .r .k { color: var(--ink-faint); min-width: 130px; font-weight: 600; }
.src-rows .r .v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.src-rows .r.hl { background: var(--hue-soft, var(--ai-soft)); }
.src-rows .r.hl .v { color: var(--hue, var(--ai)); font-weight: 800; }
[data-theme="dark"] .src-rows .r.hl .v { color: var(--hue2, var(--ai-2)); }
.cite-source.log .src-rows { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cite-foot { margin: auto 22px 22px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cite-foot .prov { font-size: 12px; color: var(--ink-faint); flex: 1; min-width: 180px; }

/* ---- painel ⌘K do console (drawer à direita, persistente) — Diego ---- */
.ai-launch {  /* botão que abre o painel (além do ⌘K) — chrome do Hub, segue o accent (fallback --ai · PO 2026-07-17) */
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 13.5px;
  color: var(--ink); background: var(--hue-soft, var(--ai-soft)); border: 1px solid var(--hue, var(--ai-line));
  padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; transition: all .16s;
}
.ai-launch:hover { border-color: var(--hue, var(--ai)); box-shadow: 0 4px 14px -5px var(--hue, var(--ai)); }
.ai-launch .spark { color: var(--hue, var(--ai)); } [data-theme="dark"] .ai-launch .spark { color: var(--hue2, var(--ai-2)); }
.ai-launch kbd { font: inherit; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-soft); }

.copilot-drawer {
  position: fixed; inset: 0; z-index: 205; display: grid; grid-template-columns: 1fr; grid-template-rows: 100%; place-items: stretch end;
  background: rgba(14,14,25,.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity .3s, visibility .3s;
  overflow: hidden;  /* clipa o deslize (translateX) do painel fechado — senão vaza overflow no mobile */
  /* FECHADO: visibility:hidden garante que o painel off-canvas (translateX) NÃO conte no scrollWidth em
     NENHUM engine — o overflow:hidden só clipa visualmente, mas alguns navegadores ainda somam ~24px de
     scroll no mobile (390). visibility some do AT também (a11y). Vira visible instantâneo ao abrir. */
  visibility: hidden;
}
.copilot-drawer.on { opacity: 1; pointer-events: auto; visibility: visible; }
.copilot-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow-lg); border-left: 1px solid var(--hue, var(--ai-line));
  transform: translateX(24px); transition: transform .32s cubic-bezier(.2,.8,.3,1); overflow: hidden;
}
.copilot-drawer.on .copilot-panel { transform: none; }
.copilot-panel::before {  /* leve aura do accent no topo (fallback hue de IA · PO 2026-07-17) */
  content: ""; position: absolute; z-index: 0; top: 0; right: 0; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--hue, var(--ai)), transparent 66%); opacity: .1; filter: blur(8px); pointer-events: none; }
.cp-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.cp-head .mk { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: #fff; font-size: 15px; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 5px 14px -4px var(--hue, var(--ai)); }
.cp-head .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; }
.cp-head .s { font-size: 12px; color: var(--ink-faint); }
.cp-head .x { margin-left: auto; border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; flex: none; transition: all .16s; }
.cp-head .x:hover { color: var(--ink); border-color: var(--ink-faint); }
.cp-body { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.cp-empty { color: var(--ink-faint); font-size: 13.5px; text-align: center; padding: 24px 8px; }
.cp-turn { display: flex; flex-direction: column; gap: 8px; }
.cp-turn .cq { align-self: flex-end; max-width: 85%; background: var(--hue-soft, var(--ai-soft)); border: 1px solid var(--hue, var(--ai-line));
  color: var(--ink); font-size: 14px; font-weight: 600; padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.cp-turn .ca { max-width: 92%; }
.cp-turn .ca .ct { font-size: 14px; color: var(--ink); line-height: 1.55; }
.cp-foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.cp-inputrow { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--hue, var(--ai-line)); background: var(--surface-2); transition: border-color .18s, box-shadow .18s; }
.cp-inputrow:focus-within { border-color: var(--hue, var(--ai)); box-shadow: 0 0 0 3px var(--hue-soft, var(--ai-soft)); }
.cp-inputrow input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); padding: 7px 0; }
.cp-inputrow input:focus { outline: none; }
.cp-inputrow .go { flex: none; border: none; cursor: pointer; color: #fff; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; background: linear-gradient(135deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); transition: transform .16s; }
.cp-inputrow .go:active { transform: scale(.94); } .cp-inputrow .go:disabled { opacity: .5; cursor: not-allowed; }
.cp-hint { font-size: 11.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.cp-hint kbd { font: inherit; font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-soft); }
.cp-hint .allow { display: inline-flex; align-items: center; gap: 5px; } .cp-hint .allow b { color: var(--ink-soft); font-weight: 700; }

/* =====================================================================================
   ANEXO do composer da Stela (feat/stela-attachments) — o clipe, o menu de origem (2 fontes),
   o chip do arquivo (enviando/enviado/erro), o selo "seu upload" e a barra de progresso.
   Fiel ao proto docs/prototypes/stela-fluxion-upload/proto-fase2.html; tokens Aurora --ai.
   O menu é position:absolute DENTRO do .copilot-panel → imune ao bug do fixed-sob-transform.
   ===================================================================================== */
/* input row com o clipe: padding-left menor (o clipe ocupa a borda esquerda) */
.cp-inputrow { padding-left: 6px; }
.cp-attach { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-faint); transition: color .16s, background .16s; }
.cp-attach:hover { color: var(--hue, var(--ai)); background: var(--hue-soft, var(--ai-soft)); }
[data-theme="dark"] .cp-attach:hover { color: var(--hue2, var(--ai-2)); }
.cp-attach.has, .cp-attach[aria-expanded="true"] { color: var(--hue, var(--ai)); }
[data-theme="dark"] .cp-attach.has, [data-theme="dark"] .cp-attach[aria-expanded="true"] { color: var(--hue2, var(--ai-2)); }
.cp-attach:disabled { opacity: .5; cursor: not-allowed; }
.cp-attach .ic { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* chip do arquivo anexado */
.cp-attached { display: flex; flex-direction: column; gap: 7px; }
.cp-attached:empty { display: none; }
.cp-filechip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--hue-soft, var(--ai-soft)); border: 1px solid var(--hue, var(--ai-line)); }
.cp-filechip .ft { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff;
  font-weight: 800; font-size: 9.5px; letter-spacing: .02em; }
.cp-filechip .ft.csv { background: linear-gradient(140deg, #0FA968, #34D399); }
.cp-filechip .ft.json { background: linear-gradient(140deg, #E6920B, #F5B841); }
.cp-filechip .ft.xlsx { background: linear-gradient(140deg, #15803D, #22C55E); }
.cp-filechip .ft.bad { background: linear-gradient(140deg, var(--danger), #F98CA0); }
.cp-filechip .fmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-filechip .fname { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-filechip .fsub { font-size: 11.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-filechip .fsub .ok { display: inline-flex; align-items: center; gap: 3px; color: var(--ok-text); font-weight: 700; }
.cp-filechip .fsub .sending { display: inline-flex; align-items: center; gap: 3px; color: #584AC4; font-weight: 700; }
[data-theme="dark"] .cp-filechip .fsub .sending { color: var(--hue2, var(--ai-2)); }
.cp-filechip .fsub .ic, .cp-filechip .fname .ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cp-filechip .frm { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-faint); cursor: pointer; display: grid; place-items: center; font-size: 13px; }
.cp-filechip .frm:hover { color: var(--ink); border-color: var(--ink-faint); }
/* selo "seu upload — não é ação de IA" (o SEAM legível: RBAC do usuário ≠ D-IA-6) */
.up-seal { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--hue, var(--ai));
  background: var(--surface); border: 1px solid var(--hue, var(--ai-line)); padding: 2px 8px; border-radius: var(--r-pill); }
[data-theme="dark"] .up-seal { color: var(--hue2, var(--ai-2)); }
.up-seal .ic { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* barra de progresso (estado enviando) */
.up-bar { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 5px; }
.up-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); transition: width .3s; }
/* chip de erro (borda danger, persiste até resolver) */
.cp-filechip.err { background: var(--danger-soft); border-color: rgba(239,69,96,.34); }
.cp-filechip.err .fsub { color: var(--danger-ink); font-weight: 700; }
.err-help { font-size: 12px; color: var(--ink-soft); padding: 2px 4px 0; line-height: 1.45; } .err-help b { color: var(--ink); }
.err-retry { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #1B54C4; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.32); padding: 6px 13px; border-radius: var(--r-pill); }
[data-theme="dark"] .err-retry { color: var(--fluxion-2); }
.err-retry .ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* menu de escolha da origem (popover ancorado no clipe · absolute dentro do painel) */
.attach-menu { position: absolute; left: 14px; bottom: 84px; z-index: 5; width: min(288px, calc(100% - 28px));
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; }
.attach-menu[hidden] { display: none; }
.attach-menu .am-lab { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
  padding: 9px 10px 4px; display: flex; align-items: center; gap: 6px; }
.attach-menu .am-lab .am-cap { color: var(--ink-faint); font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: auto; }
.attach-menu .am-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer;
  color: var(--ink); font-size: 13.5px; font-weight: 600; min-height: 44px; width: 100%; border: none; background: transparent; text-align: left; }
.attach-menu .am-item:hover { background: var(--surface-2); }
.attach-menu .am-item .am-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; }
.attach-menu .am-ic.local { background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); }
.attach-menu .am-ic .ic { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.attach-menu .am-item .am-tx { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; min-width: 0; }
.attach-menu .am-item .am-sub { font-size: 11px; color: var(--ink-faint); font-weight: 500; }
.attach-menu .am-sep { height: 1px; background: var(--line); margin: 5px 8px; }
.am-recent { padding: 2px 4px 4px; max-height: 168px; overflow-y: auto; }
.am-recent .am-empty { font-size: 12px; color: var(--ink-faint); padding: 8px 8px 10px; }
.am-file { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; min-height: 44px;
  width: 100%; border: none; background: transparent; text-align: left; }
.am-file:hover { background: var(--surface-2); }
.am-file .ft { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff; font-weight: 800; font-size: 8.5px; }
.am-file .ft.csv { background: linear-gradient(140deg, #0FA968, #34D399); }
.am-file .ft.json { background: linear-gradient(140deg, #E6920B, #F5B841); }
.am-file .ft.xlsx { background: linear-gradient(140deg, #15803D, #22C55E); }
.am-file .fm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.am-file .fm .n { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-file .fm .s { font-size: 10.5px; color: var(--ink-soft); font-weight: 500; }

/* chip "seu upload" na bolha de pergunta (a fonte anexada, ecoada no turno) */
.cp-turn .cq .cq-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; font-weight: 700;
  color: var(--hue, var(--ai)); background: var(--surface); border: 1px solid var(--hue, var(--ai-line)); padding: 3px 9px 3px 5px; border-radius: var(--r-pill); }
[data-theme="dark"] .cp-turn .cq .cq-file { color: var(--hue2, var(--ai-2)); }
.cp-turn .cq .cq-file .ftm { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 8px; font-weight: 800; flex: none; }
.cp-turn .cq .cq-file .ftm.csv { background: linear-gradient(140deg, #0FA968, #34D399); }
.cp-turn .cq .cq-file .ftm.json { background: linear-gradient(140deg, #E6920B, #F5B841); }
.cp-turn .cq .cq-file .ftm.xlsx { background: linear-gradient(140deg, #15803D, #22C55E); }

/* =====================================================================================
   CHAT-DRAWER — o app Chat como MODAL slide-over (espelha o .copilot-drawer). Aberto pelo dock/topbar
   sobre QUALQUER tela, sem navegar. Reusa o ChatView dentro (Chrome=false). z acima do copiloto (205),
   abaixo do cite (210). Mais largo que o copiloto (rail+thread+membros), mas ainda um drawer.
   ===================================================================================== */
.chat-drawer {
  position: fixed; inset: 0; z-index: 206; display: grid; grid-template-columns: 1fr; grid-template-rows: 100%; place-items: stretch end;
  background: rgba(14,14,25,.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity .3s, visibility .3s;
  overflow: hidden;              /* clipa o deslize (translateX) do painel fechado — sem vazar overflow no mobile */
  visibility: hidden;            /* off-canvas NÃO conta no scrollWidth em nenhum engine (a11y + overflow) */
}
.chat-drawer.on { opacity: 1; pointer-events: auto; visibility: visible; }
.chat-drawer-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(760px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow-lg); border-left: 1px solid var(--chat, var(--line));
  transform: translateX(24px); transition: transform .32s cubic-bezier(.2,.8,.3,1); overflow: hidden;
}
.chat-drawer.on .chat-drawer-panel { transform: none; }
.cd-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px 13px; border-bottom: 1px solid var(--line); flex: none; }
.cd-head .mk { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: #fff; font-size: 16px; background: linear-gradient(140deg, var(--chat), var(--chat-2)); box-shadow: 0 5px 14px -4px var(--chat); }
.cd-head .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.cd-head .s { font-size: 11.5px; color: var(--ink-faint); }
.cd-head .cd-expand { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-soft); display: grid; place-items: center; text-decoration: none; font-size: 14px; flex: none; transition: all .16s; }
.cd-head .cd-expand:hover { color: var(--chat); border-color: var(--chat); }
[data-theme="dark"] .cd-head .cd-expand:hover { color: var(--chat-2); }
.cd-head .x { border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; flex: none; transition: all .16s; }
.cd-head .x:hover { color: var(--ink); border-color: var(--ink-faint); }
.cd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* O ChatView dentro do drawer: preenche a altura (sem min-height fixo de página), sem borda/sombra próprios
   (o painel já é a moldura). No drawer o rail encolhe pra caber; membros somem sob ~640px. */
.cd-body .chat-app.in-drawer {
  flex: 1; min-height: 0; border: none; border-radius: 0; box-shadow: none;
  grid-template-columns: 210px 1fr 190px; grid-template-rows: minmax(0, 1fr);
}
/* FIX scroll do drawer: o grid do chat não tinha grid-template-rows → a linha implícita 'auto'
   esticava com o conteúdo do thread e o .thread-body nunca disparava overflow-y (scroll morto,
   composer cortado). minmax(0,1fr) trava a linha na altura do painel; min-height:0 nas colunas
   deixa os scrollers internos (thread-body/rail-scroll/members-scroll) rolarem de fato. */
.cd-body .chat-app.in-drawer > .chat-rail,
.cd-body .chat-app.in-drawer > .chat-thread,
.cd-body .chat-app.in-drawer > .members-col { min-height: 0; }
.cd-body .chat-app.in-drawer .thread-body { min-height: 0; }
@media (max-width: 720px) { .cd-body .chat-app.in-drawer { grid-template-columns: 200px 1fr; } .cd-body .chat-app.in-drawer .members-col { display: none; } }
@media (max-width: 560px) { .cd-body .chat-app.in-drawer { grid-template-columns: 1fr; } }
.cd-empty { margin: auto; text-align: center; max-width: 340px; padding: 40px 20px; }
.cd-empty .ce-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: var(--chat); background: var(--chat-soft); }
[data-theme="dark"] .cd-empty .ce-ic { color: var(--chat-2); }
.cd-empty h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.cd-empty p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 620px) { .chat-drawer-panel { width: 100vw; border-left: none; } }
@media (prefers-reduced-motion: reduce) { .chat-drawer-panel { transition: none !important; transform: none !important; } }

/* botão de chat na topbar (espelha .icon-btn.cp-topbar; hue --chat; escondido ≤900 como o do copiloto) */
.icon-btn.chat-topbar { padding: 0 10px; position: relative; }
.icon-btn.chat-topbar .chat-topbar-ico { color: var(--chat); }
[data-theme="dark"] .icon-btn.chat-topbar .chat-topbar-ico { color: var(--chat-2); }
/* badge de NÃO-LIDAS na topbar (v2 · reusa .notif-badge, mas hue de chat e não vermelho: não-lida ≠ alerta) */
.notif-badge.chat-unread-badge { background: var(--chat); color: #fff; }
[data-theme="dark"] .notif-badge.chat-unread-badge { background: var(--chat-2); }
.icon-btn.chat-topbar:hover { border-color: var(--chat); }
@media (max-width: 900px) { .icon-btn.chat-topbar { display: none; } }

/* fonte como bloco monospace no console (Diego) */
.cp-cite { margin-top: 4px; }
.cp-cite .cite-chip { font-size: 12px; }
.cp-src-block { margin-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.cp-src-block .r { display: flex; gap: 10px; padding: 6px 11px; border-top: 1px solid var(--line); }
.cp-src-block .r:first-child { border-top: none; }
.cp-src-block .r .k { color: var(--ink-faint); min-width: 96px; }
.cp-src-block .r .v { color: var(--ink); }
.cp-src-block .r.hl { background: var(--hue-soft, var(--ai-soft)); } .cp-src-block .r.hl .v { color: var(--hue, var(--ai)); font-weight: 700; }
[data-theme="dark"] .cp-src-block .r.hl .v { color: var(--hue2, var(--ai-2)); }

/* ---- anel de cota de IA (reusa .appmark; hue --ai; "N de 300 ações") ---- */
.ai-quota { display: inline-flex; align-items: center; gap: 11px; }
.ai-quota .appmark { width: 40px; height: 40px; }
.ai-quota .appmark svg { transform: rotate(-90deg); }
.ai-quota .appmark .ring-track { stroke: var(--line-2); stroke-width: 5; }
/* anel de cota/uso do avatar (chrome do Hub · PO 2026-07-17): segue o accent escolhido, fallback --ai. */
.ai-quota .appmark .ring-val { stroke: var(--hue, var(--ai)); stroke-width: 5; stroke-linecap: round; }
.ai-quota .appmark.warn .ring-val { stroke: var(--warn); }
.ai-quota .appmark .glyph { inset: 6px; border-radius: 10px; font-size: 15px;
  background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 5px 13px -4px var(--hue, var(--ai)); }
.ai-quota.warn .appmark .glyph { box-shadow: 0 5px 13px -4px var(--warn); }
.ai-quota .q-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ai-quota .q-txt .n { font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ai-quota .q-txt .sub { font-size: 11.5px; color: var(--ink-faint); }
/* Âmbar de TEXTO (--warn-text, AA ≥4.5:1), não o --warn gráfico (falha como texto pequeno no claro). */
.ai-quota.warn .q-txt .sub { color: var(--warn-text); font-weight: 600; }

/* ---- SALDO BAIXO (Onda 2 · §2.4) — "créditos acabando". Âmbar, JAMAIS vermelho (aliado, não medo).
   O anel SEGUE enchendo com o USADO (data-pct inalterado) — só muda de cor pra --warn-2 (gráfico vívido).
   O TEXTO usa --warn-text (medido AA nos 2 temas). Vence o .warn brando (é o estado mais forte). ---- */
.ai-quota.low-credit .appmark .ring-val { stroke: var(--warn-2); }
.ai-quota.low-credit .appmark .glyph { box-shadow: 0 5px 13px -4px var(--warn-2); }
.ai-quota.low-credit .q-txt .n { color: var(--warn-text); }
.ai-quota.low-credit .q-txt .sub { color: var(--warn-text); font-weight: 600; }
.topbar .ai-quota.low-credit { border-color: color-mix(in srgb, var(--warn-2) 55%, var(--line-2));
  background: color-mix(in srgb, var(--warn-2) 10%, var(--surface)); }

/* quota compacta no topbar */
.topbar .ai-quota { padding: 3px 6px 3px 3px; border: 1px solid var(--line-2); border-radius: var(--r-pill); }
/* Tablet/mobile (proto ressalva 4 · Léo F-06): o anel de cota PERMANECE visível — só o ANEL (.appmark),
   sem o texto (.q-txt), com padding compactado. Antes a cota sumia inteira ≤900px (o texto inchava o topbar-right
   e enrolava a barra pra 2 linhas na faixa 721-900px); o modo ring-only (~48px) resolve o inchaço SEM perder o
   medidor de créditos no mobile. Espelha o proto: @media(max-width:900px){ .quota{padding:4px;gap:0} .quota .q-txt{display:none} } */
@media (max-width: 900px) {
  .topbar .ai-quota { padding: 4px; gap: 0; }
  .topbar .ai-quota .q-txt { display: none; }
}

/* mobile: drawers viram full-width; barra do copiloto fica compacta em UMA linha
   (input encolhe via flex:1/min-width:0, botão "Perguntar" ao lado — NÃO empilhar, senão
   o ✦ flutua sozinho e a barra vira 3 linhas). */
@media (max-width: 560px) {
  .cite-panel, .copilot-panel { width: 100vw; border-left: none; }
  .ai-bar .ai-field { padding: 5px 5px 5px 12px; gap: 8px; }
  .ai-bar input { font-size: 15px; }
  .ai-bar .ai-send { padding: 9px 14px; font-size: 13.5px; }
}

/* reduced-motion: sem cursor piscando, sem blur-transições — o stream anexa por blocos (JS respeita) */
@media (prefers-reduced-motion: reduce) {
  .ai-text .cursor, .ai-thinking .d { animation: none !important; }
  .cite-panel, .copilot-panel { transition: none !important; transform: none !important; }
}

/* =====================================================================================
   MÓDULOS DINÂMICOS (wave 3) — porte fiel dos protótipos v2 (modulos-menu / modulo-crud /
   sa-builder). Estende os primitivos Aurora; nada de cor solta — tudo por token/--hue.
   ===================================================================================== */

/* ---- /menu — tiles keyed to app hues (extends the monogram signature) ---- */
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mod-grid { grid-template-columns: 1fr; } }

.mod {
  position: relative; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); padding: 20px;
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 12px;
  overflow: hidden; isolation: isolate;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.mod::before {
  content: ""; position: absolute; z-index: -1; top: -50%; right: -25%;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--hue, var(--hub)), transparent 66%);
  opacity: .12; filter: blur(6px); transition: opacity .3s;
}
.mod:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mod:hover::before { opacity: .22; }
.mod:focus-visible { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 3px; }
.mod-top { display: flex; align-items: center; gap: 13px; }
.mod-mark {
  width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 6px 16px -5px var(--hue, var(--hub));
}
.mod-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.mod-kind { font-size: 12.5px; color: var(--ink-faint); }
.mod-desc { color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.mod-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-faint); }
.mod-foot .go { margin-left: auto; color: var(--hue, var(--hub)); font-weight: 700; }
[data-theme="dark"] .mod-foot .go { color: var(--hue2, var(--hub-2)); }

.mod.new {
  background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none;
  align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 168px;
}
.mod.new::before { display: none; }
.mod.new:hover { border-color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); transform: translateY(-3px); }
.mod.new .plus {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-size: 24px; font-weight: 700;
}
[data-theme="dark"] .mod.new .plus { color: #fff; }
.mod.new .nl { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; }
.mod.new .ns { font-size: 12.5px; color: var(--ink-faint); }

.fam-note { font-size: 13px; color: var(--ink-faint); margin: 2px 2px 14px; max-width: 62ch; }

.mod .made {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); background: var(--line); padding: 2px 8px; border-radius: var(--r-pill);
}
.mod .newmark {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #fff;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 3px 10px -3px var(--hue, var(--hub));
}
.mod .newmark .nd { width: 5px; height: 5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: newpulse 2.2s infinite; }
@keyframes newpulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{box-shadow:0 0 0 6px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }

/* ---- /m/{id} — CRUD do cliente ---- */
.mod-head { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.mod-head .mk {
  width: 54px; height: 54px; border-radius: 15px; flex: none; display: grid; place-items: center;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 24px;
  background: linear-gradient(140deg, var(--hue, var(--flyx)), var(--hue2, var(--flyx-2)));
  box-shadow: 0 7px 18px -5px var(--hue, var(--flyx));
}
.mod-head h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(24px,4vw,30px); letter-spacing: -.02em; }
.mod-head p { color: var(--ink-soft); font-size: 14.5px; margin-top: 1px; }

.field {
  font: inherit; font-size: 14px; padding: 9px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}
.field:focus { outline: none; border-color: var(--hue, var(--hub)); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); }
.field::placeholder { color: var(--ink-faint); }
.field:disabled { opacity: .6; cursor: not-allowed; background: var(--surface-2); }
select.field { cursor: pointer; }
textarea.field { min-height: 74px; resize: vertical; }

.rec-form {
  margin: 0 22px 18px; border-radius: var(--r-md); border: 1px solid var(--hue, var(--flyx));
  background: color-mix(in srgb, var(--hue, var(--flyx)) 5%, transparent); overflow: hidden;
}
[data-theme="dark"] .rec-form { background: color-mix(in srgb, var(--hue, var(--flyx)) 9%, transparent); }
.rf-head { padding: 15px 18px 8px; display: flex; align-items: center; gap: 9px; }
.rf-head .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--hue, var(--flyx)) 16%, transparent); color: var(--hue, var(--flyx)); font-weight: 700; }
.rf-head h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 15.5px; font-weight: 700; }
.rf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px 18px 12px; }
@media (max-width: 640px) { .rf-grid { grid-template-columns: 1fr; } }
.rf-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.rf-grid .req { color: var(--hue, var(--flyx)); }
.rf-grid .field:focus { border-color: var(--hue, var(--flyx)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue, var(--flyx)) 14%, transparent); }
.rf-actions { display: flex; gap: 10px; padding: 0 18px 16px; }
.btn-flyx { color: #fff; background: linear-gradient(135deg, var(--hue, var(--flyx)), var(--hue2, var(--flyx-2))); box-shadow: 0 6px 18px -5px var(--hue, var(--flyx)); }
.rf-grid label.err .field { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,69,96,.14); }
.rf-err { font-size: 11.5px; font-weight: 600; color: var(--danger); align-items: center; gap: 5px; }

.rowact { display: inline-flex; gap: 14px; }
.rowact a, .rowact button { font-weight: 600; text-decoration: none; font-size: 13.5px; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit; }
.rowact .edit { color: var(--hue, var(--hub)); }
[data-theme="dark"] .rowact .edit { color: var(--hue2, var(--hub-2)); }
.rowact .del { color: var(--ink-faint); }
.rowact .del:hover { color: var(--danger); }
.rowact a:hover, .rowact button:hover { text-decoration: underline; }

.cli { display: flex; align-items: center; gap: 11px; }
.cli .av {
  width: 32px; height: 32px; border-radius: var(--r-pill); flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(135deg, var(--hue, var(--flyx)), var(--hue2, var(--flyx-2)));
}
.made-flag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-faint);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.made-flag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--hue, var(--flyx)); }

.dtable th.sortable { cursor: pointer; user-select: none; }
.dtable th.sortable:hover { color: var(--ink-soft); }
.dtable th.sortable .sar { font-size: 10px; opacity: .3; margin-left: 5px; }
.dtable th.sort-asc .sar, .dtable th.sort-desc .sar { opacity: 1; color: var(--hue, var(--flyx)); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 48px 22px 54px; }
.empty .em-mark { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 26px;
  background: linear-gradient(140deg, var(--hue, var(--flyx)), var(--hue2, var(--flyx-2))); box-shadow: 0 8px 20px -6px var(--hue, var(--flyx)); opacity: .9; }
.empty h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 700; }
.empty p { color: var(--ink-soft); font-size: 14px; max-width: 40ch; }
.empty .em-act { margin-top: 6px; }

.pager { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--line);
  background: var(--surface-2); flex-wrap: wrap; }
.pager .pg-count { font-size: 13px; color: var(--ink-soft); }
.pager .pg-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pg-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: all .14s; text-decoration: none; }
.pg-btn:hover:not(:disabled) { border-color: var(--hue, var(--flyx)); color: var(--hue, var(--flyx)); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-page { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; padding: 0 4px; }

/* ---- /sa/modulos/novo — builder 3 passos ---- */
.step-n {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 3px 9px -2px var(--hue, var(--hub));
}
.panel-head.numbered { align-items: center; }

.fields { padding: 4px 22px 8px; }
.fld-row {
  display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.fld-row:first-child { border-top: none; }
.fld-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fld-name .ti { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-size: 14px; }
[data-theme="dark"] .fld-name .ti { color: var(--hue2, var(--hub-2)); }
.fld-type { color: var(--ink-soft); font-size: 13.5px; }
.fld-req { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.fld-req input { width: 16px; height: 16px; accent-color: var(--hue, var(--hub)); cursor: pointer; }
.fld-del { color: var(--ink-faint); background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; font-family: inherit; }
.fld-del:hover { color: var(--danger); }
@media (max-width: 640px) {
  .fld-row { grid-template-columns: 1fr auto; gap: 8px 10px; }
  .fld-type { grid-column: 1; }
}
.add-field { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: center;
  padding: 14px 22px; border-top: 1px dashed var(--line-2); background: var(--surface-2); }
@media (max-width: 640px) { .add-field { grid-template-columns: 1fr; } }

.id-row { display: grid; grid-template-columns: auto 1fr 1fr; gap: 14px; align-items: end; padding: 6px 22px 16px; }
@media (max-width: 640px) { .id-row { grid-template-columns: 1fr; } }
.id-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.id-mark {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px;
  background: linear-gradient(140deg, var(--flyx), var(--flyx-2)); box-shadow: 0 6px 16px -5px var(--flyx);
}

.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 4px 22px 20px; }
@media (max-width: 720px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl {
  border-radius: var(--r-md); border: 1.5px solid var(--line-2); background: var(--surface-2);
  padding: 16px; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  display: flex; flex-direction: column; gap: 9px; transition: border-color .16s, transform .16s, box-shadow .16s;
}
.tpl:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tpl:disabled { cursor: default; opacity: .85; }
.tpl.sel { border-color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
.tpl .tpl-ic { font-size: 22px; }
.tpl .tpl-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15.5px; }
.tpl .tpl-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.tpl .tpl-check { margin-left: auto; }
.tpl .tpl-top { display: flex; align-items: center; gap: 10px; }
.tpl .tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 11px; color: transparent; }
.tpl.sel .tick { background: var(--hue, var(--hub)); border-color: var(--hue, var(--hub)); color: #fff; }

.cols { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 16px; }
.cols .lab-inline { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; width: 100%; }
.colchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; user-select: none; transition: all .14s; font-family: inherit; }
.colchip.on { border-color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .colchip.on { color: var(--hue2, var(--hub-2)); }
.colchip .cx { font-size: 11px; }

.vis-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line); }
.vis-row:first-child { border-top: none; }
.vis-name { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.vis-name .ti { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--line); color: var(--ink-soft); font-size: 13px; }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.toggle input { width: 34px; height: 20px; accent-color: var(--hue, var(--hub)); cursor: pointer; }
.perm-sel { font-size: 13px; min-width: 0; }
.perm-sel .field { max-width: 100%; }
@media (max-width: 480px) {
  .vis-row { grid-template-columns: 1fr auto; gap: 9px 10px; }
  .vis-name { grid-column: 1 / -1; }
}

.gate {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px; margin-bottom: 22px;
  border-radius: var(--r-md); background: linear-gradient(135deg, rgba(27,26,46,.05), rgba(139,92,246,.07));
  border: 1px solid var(--line-2); color: var(--ink-soft); font-size: 13.5px;
}
[data-theme="dark"] .gate { background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(91,91,245,.08)); }
.gate b { color: var(--ink); font-weight: 600; }

.live-row {
  display: flex; align-items: flex-start; gap: 14px; margin: 4px 22px 4px; padding: 15px 16px;
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2);
}
.live-row .lic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-size: 17px; }
[data-theme="dark"] .live-row .lic { color: var(--hue2, var(--hub-2)); }
.live-row .lbody { flex: 1; min-width: 0; }
.live-row .lt { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14.5px; }
.live-row .ld { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }
.switch { position: relative; flex: none; width: 46px; height: 26px; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-2); transition: background .18s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.switch input:checked ~ .track { background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.switch input:checked ~ .knob { transform: translateX(20px); }
.switch input:focus-visible ~ .track { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 2px; }

.draft-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-pill); background: rgba(230,146,11,.14); color: var(--warn);
  text-transform: uppercase; letter-spacing: .03em; margin-left: 10px; vertical-align: middle; }
.draft-flag.pub { background: rgba(15,169,104,.14); color: var(--bi); }
.draft-flag .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.future-note { font-size: 12px; color: var(--ink-faint); padding: 12px 22px 4px; display: flex; align-items: center; gap: 8px; }
.future-note .soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--line); color: var(--ink-soft); }

.save-bar { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.save-bar .note { color: var(--ink-faint); font-size: 13px; flex: 1; min-width: 220px; }

/* tablet 721–860: colapsa rótulos da topbar SA (o cânone só colapsa em ≤720). */
@media (min-width: 721px) and (max-width: 860px) {
  .topbar.sa-topbar { gap: 12px; }
  .sa-topbar .sa-badge { font-size: 0; gap: 0; padding: 6px 9px; }
  .sa-topbar .sa-badge .star { font-size: 13px; }
  .sa-topbar .avatar span:last-child { display: none; }
  .sa-topbar .avatar { padding: 4px; }
}

/* modal de confirmação (exclusão) — position:fixed no viewport. NUNCA colocar sob um .reveal (transform vira
   containing block e prende o fixed dentro do elemento). A página monta este bloco no nível raiz, fora de .reveal. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(20, 18, 38, .42); backdrop-filter: blur(2px); padding: 20px;
  animation: scrimIn .16s ease;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); padding: 22px 24px; max-width: 380px; width: 100%;
}
.modal-card h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 700; }
.modal-card p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-actions form { display: inline; }
.modal-card:focus, .modal-card:focus-visible { outline: none; }

/* variante GRANDE (wave X) — usada para expandir editor/preview em tela cheia; não altera o modal pequeno.
   Estrutura: header (.modal-xl-head) fixo + corpo (.modal-xl-body) que rola/preenche. vw/vh = ok em telas pequenas. */
.modal-card.modal-xl {
  max-width: min(1200px, 94vw); width: 94vw; height: 88vh; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-xl-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; flex: none;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.modal-xl-head .mx-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; }
.modal-xl-head .mx-sub { font-size: 12px; color: var(--ink-faint); }
.modal-xl-head .mx-x {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; transition: all .14s;
}
.modal-xl-head .mx-x:hover { border-color: var(--hue, var(--hub)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .modal-xl-head .mx-x:hover { color: var(--hue2, var(--hub-2)); }
.modal-xl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px; overflow: auto; }

/* botão "⤢ Expandir" discreto — usado nos cabeçalhos do editor e do preview (wave X) */
.expand-btn {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-faint); cursor: pointer; transition: all .14s; line-height: 1.4; text-transform: none; letter-spacing: 0;
}
.expand-btn:hover { border-color: var(--hue, var(--hub)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .expand-btn:hover { color: var(--hue2, var(--hub-2)); }
.expand-btn .xg { font-size: 12px; }

/* ===== Notificações (fase 3 · REQUISITOS-NOTIFICACOES-V2 §4) — sino + badge + painel Aurora ===== */
.notif-menu { position: relative; }
.notif-btn { position: relative; padding: 0 11px; }
.notif-btn .hub-ico { font-size: 17px; }
/* badge de não-lidas: some quando 0 (o markup nem o renderiza) — R-NOT-1 */
.notif-badge {
  position: absolute; top: -5px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800;
  line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
/* o painel reusa a mecânica do avatar-dropdown (hub.js liga .on); só alarga e ancora à direita do sino */
.notif-dropdown { min-width: 340px; max-width: 380px; padding: 6px; }
.notif-dropdown .notif-head { flex-direction: row; align-items: center; justify-content: space-between; }
.notif-markall {
  border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--hue, var(--hub));
  cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); transition: background .14s;
}
.notif-markall:hover { background: var(--line); }
[data-theme="dark"] .notif-markall { color: var(--hue2, var(--hub-2)); }

.notif-empty { padding: 26px 16px 22px; text-align: center; }
.notif-empty-ico { color: var(--ink-faint); font-size: 26px; margin-bottom: 8px; opacity: .7; }
.notif-empty-title { margin: 0; font-weight: 700; font-size: 14px; color: var(--ink); }
.notif-empty-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.notif-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.notif-item { border-radius: var(--r-sm); }
.notif-item-btn {
  width: 100%; display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: none;
  background: transparent; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-sm);
  transition: background .14s;
}
.notif-item-btn:hover { background: var(--line); }
.notif-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: var(--r-pill); background: var(--hue, var(--hub)); }
.notif-item.unread .notif-title { font-weight: 700; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.notif-text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.notif-when { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }

/* ============================================================
   APP AVISOS — BADGE POR PRIORIDADE + PEEK + TOAST (R-AV-1/R-AV-2)
   proto fase-2 APROVADO (docs/prototypes/notificacoes-app/proto-fase2.html). Só tokens Aurora, ZERO emoji.
   ============================================================ */

/* ---- BADGE por PRIORIDADE (R-AV-2): a COR encoda prioridade (calmo→âmbar→vermelho · "âmbar antes de vermelho"). ----
   O número permanece; só a cor + o micro-pulse mudam. AA: texto branco sobre hub/âmbar-2/danger nos 2 temas. */
.notif-badge[data-prio="calm"] { background: var(--hue, var(--hub)); --pulse: var(--hue, var(--hub)); }
[data-theme="dark"] .notif-badge[data-prio="calm"] { background: var(--hue, var(--hub-2)); --pulse: var(--hue, var(--hub-2)); }
.notif-badge[data-prio="action"] { background: var(--warn-2); --pulse: var(--warn-2); animation: notifMicroPulse 2.4s ease-in-out infinite; }
.notif-badge[data-prio="critical"] { background: var(--danger); --pulse: var(--danger); animation: notifMicroPulse 1.8s ease-in-out infinite; }
/* mantém o anel de 2px sobre a superfície (leitura do badge) e adiciona o halo pulsante da severidade */
@keyframes notifMicroPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 6px color-mix(in srgb, var(--pulse) 22%, transparent); }
}

/* ---- PEEK (R-AV-2): prévia no hover/foco do sino (acessível — não só hover). Porta de docs/prototypes .peek. ---- */
.notif-peek {
  position: absolute; z-index: 60; top: calc(100% + 12px); right: 0; width: min(340px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 14px; display: none;
}
.notif-peek::before {
  content: ""; position: absolute; top: -7px; right: 14px; width: 13px; height: 13px; background: var(--surface);
  border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg);
}
/* mostra no HOVER e no FOCO do conjunto do sino; some quando o painel (click) está aberto (hub.js liga .on) */
.notif-menu:hover .notif-peek,
.notif-menu:focus-within .notif-peek { display: block; animation: rise .2s cubic-bezier(.2,.8,.3,1); }
.notif-menu:has(.notif-dropdown.on) .notif-peek { display: none !important; }
.notif-peek-brk { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
.notif-peek-brk .brk {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2);
}
.notif-peek-brk .brk .d { width: 7px; height: 7px; border-radius: 50%; background: var(--hue, var(--hub)); }
.notif-peek-brk .brk.action { border-color: color-mix(in srgb, var(--warn-2) 45%, var(--line)); background: color-mix(in srgb, var(--warn-2) 10%, var(--surface)); }
.notif-peek-brk .brk.action .d { background: var(--warn-2); }
.notif-peek-brk .brk.crit { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.notif-peek-brk .brk.crit .d { background: var(--danger); }
.notif-peek-lead { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-faint); margin-bottom: 7px; }
.notif-peek-item { display: flex; gap: 10px; padding: 9px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 9px; }
.notif-peek-item .pi-ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.notif-peek-item.sev-action .pi-ic { background: linear-gradient(140deg, var(--warn-2), var(--warn)); }
.notif-peek-item.sev-critical .pi-ic { background: linear-gradient(140deg, var(--danger), var(--danger-ink)); }
.notif-peek-item .pi-ic .hub-ico { font-size: 15px; }
.notif-peek-item b { font-size: 13px; letter-spacing: -.01em; display: block; line-height: 1.3; color: var(--ink); }
.notif-peek-item span { font-size: 12px; color: var(--ink-soft); }
.notif-peek-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-peek-foot .pf-link {
  font-size: 12.5px; font-weight: 650; color: var(--hue, var(--hub)); display: inline-flex; align-items: center;
  gap: 5px; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit;
}
[data-theme="dark"] .notif-peek-foot .pf-link { color: var(--hue, var(--hub-2)); }
.notif-peek-foot .pf-link .hub-ico { font-size: 13px; }
.notif-peek-foot .pf-all { font-size: 12px; color: var(--ink-faint); }

/* ---- TOAST-AO-RECEBER (R-AV-1): card no host #toasts (.toast-host). Reusa o host; card próprio (não o pill genérico).
   INFO/ACTION fadeiam (barra de vida ~5s); CRÍTICO persiste (sem barra, com nota "fica até você resolver"). ---- */
.notif-toast {
  pointer-events: auto; display: flex; gap: 12px; padding: 14px 34px 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden; width: min(360px, calc(100vw - 32px)); text-align: left;
  animation: notifToastIn .4s cubic-bezier(.2,.8,.3,1);
}
.notif-toast.out { animation: notifToastOut .35s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes notifToastIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes notifToastOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.notif-toast .nt-ic { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--h, var(--hue, var(--hub))), var(--h2, var(--hue2, var(--hub-2)))); }
.notif-toast.sev-critical .nt-ic { background: linear-gradient(140deg, var(--danger), var(--danger-ink)); }
.notif-toast .nt-body { min-width: 0; }
.notif-toast .nt-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink-faint); }
.notif-toast .nt-title { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-top: 1px; }
.notif-toast .nt-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.notif-toast .nt-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12.5px; font-weight: 650; color: var(--h, var(--hue, var(--hub))); text-decoration: none; }
[data-theme="dark"] .notif-toast .nt-cta { color: var(--h2, var(--hue2, var(--hub-2))); }
.notif-toast.sev-critical .nt-cta { color: var(--danger-ink); }
.notif-toast .nt-persist { font-size: 11px; color: var(--danger-ink); font-weight: 650; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; }
.notif-toast .nt-x { position: absolute; top: 9px; right: 11px; color: var(--ink-faint); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: none; border: none; cursor: pointer; }
.notif-toast .nt-x:hover { color: var(--ink); background: var(--line); }
.notif-toast .nt-life { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--h, var(--hue, var(--hub))), var(--h2, var(--hue2, var(--hub-2)))); }
.notif-toast.fading .nt-life { animation: notifToastLife 5s linear forwards; }
@keyframes notifToastLife { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* reduced-motion (regra da casa): mata pulse do badge, slide do peek/toast e a barra de vida. */
@media (prefers-reduced-motion: reduce) {
  .notif-badge[data-prio] { animation: none !important; }
  .notif-peek, .notif-toast, .notif-toast .nt-life { animation: none !important; }
}

/* ============================================================
   PERMISSÕES — EDITOR DE PAPÉIS (fase 3 · REQUISITOS-PERMISSOES-CUSTOM-V2 §4)
   Portado de prototype-v2/permissoes-editor-v2.html. Só tokens Aurora. ZERO emoji.
   O modal usa .modal-xl BARE (sem .modal-card) — não colide com .modal-card.modal-xl.
   ============================================================ */
.ico-lock { display: inline-block; vertical-align: -0.14em; width: 1em; height: 1em; flex: none; }

/* ---------- lista de papéis ---------- */
.roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .roles-grid { grid-template-columns: 1fr; } }
.role-card {
  position: relative; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--ink);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.role-card.editable { cursor: pointer; }
.role-card.editable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--hue, var(--hub)); }
.role-card.builtin { background: var(--surface-2); }
.role-card .rc-top { display: flex; align-items: center; gap: 11px; }
.role-card .rc-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 17px;
}
.role-card.builtin .rc-mark { background: var(--line); color: var(--ink-soft); }
.role-card.editable .rc-mark { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .role-card.editable .rc-mark { color: var(--hue2, var(--hub-2)); }
.role-card .rc-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.role-card .rc-sub { font-size: 12.5px; color: var(--ink-faint); }
.role-card .rc-desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }
.role-card .rc-meta { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); }
.role-card .rc-meta .grow { margin-left: auto; }
.tag-builtin {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--line); color: var(--ink-soft);
}
.tag-custom {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--hue-soft, var(--hub-soft)), rgba(139,92,246,.14)); color: var(--hue, var(--hub));
}
[data-theme="dark"] .tag-custom { color: var(--hue2, var(--hub-2)); }
.rc-edit-hint { color: var(--hue, var(--hub)); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
[data-theme="dark"] .rc-edit-hint { color: var(--hue2, var(--hub-2)); }
.role-card.create {
  align-items: center; justify-content: center; text-align: center; gap: 8px;
  border-style: dashed; border-color: var(--line-2); background: transparent; cursor: pointer; min-height: 130px;
}
.role-card.create:hover { border-color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
.role-card.create .plus {
  width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-size: 22px; font-weight: 700;
  font-family: "Bricolage Grotesque", sans-serif;
}
[data-theme="dark"] .role-card.create .plus { color: var(--hue2, var(--hub-2)); }
.role-card.create .ct { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.role-card.create .cd { font-size: 12.5px; color: var(--ink-faint); max-width: 26ch; }

/* ---------- MODAL (bare .modal-xl) ---------- */
.modal-scrim.on { opacity: 1; pointer-events: auto; }
.modal-xl {
  position: relative; width: min(880px, 100%); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.modal-xl .modal-head {
  position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 13px;
  padding: 22px 24px 18px; border-bottom: 1px solid var(--line);
}
.modal-head .mh-mark {
  width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 19px;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
}
.modal-head .mh-t { flex: 1; min-width: 0; }
.modal-head .mh-t h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.015em; }
.modal-head .mh-t p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.modal-close {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-soft); font-size: 16px; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: all .16s;
}
.modal-close:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--line); }
.modal-xl form { display: contents; }
.modal-body {
  position: relative; z-index: 1; overflow-y: auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
}
@media (max-width: 760px) { .modal-body { grid-template-columns: 1fr; } }
.modal-body .mcol { padding: 20px 24px; }
.modal-body .mcol + .mcol { border-left: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 760px) { .modal-body .mcol + .mcol { border-left: none; border-top: 1px solid var(--line); } }
.mcol .lab { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 14px; }
.name-field { margin-bottom: 22px; }
.name-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.name-field input {
  width: 100%; font: inherit; font-size: 15.5px; font-weight: 600; padding: 11px 14px;
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.name-field input:focus { outline: none; border-color: var(--hue, var(--hub)); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); }
.name-field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 7px; }
.perm-list { display: flex; flex-direction: column; gap: 2px; }
.perm-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-top: 1px solid var(--line); }
.perm-row:first-of-type { border-top: none; }
.perm-row .pg { width: 20px; text-align: center; flex: none; color: var(--ink-faint); font-size: 15px; }
.perm-row .pt { flex: 1; min-width: 0; }
.perm-row .pn { font-weight: 600; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.perm-row .pn code {
  font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 11.5px; color: var(--ink-faint);
  background: var(--surface-2); border: 1px solid var(--line); padding: 1px 7px; border-radius: 6px;
}
.perm-row .pd { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.sw { position: relative; width: 44px; height: 25px; flex: none; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-2); transition: background .18s; }
.sw .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s;
}
.sw input:checked + .track { background: var(--hue, var(--hub)); }
[data-theme="dark"] .sw input:checked + .track { background: var(--hue2, var(--hub-2)); }
.sw input:checked + .track::after { transform: translateX(19px); }
.sw input:focus-visible + .track { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 2px; }
.perm-row.locked { opacity: .78; }
.perm-row.locked .pn, .perm-row.noescalate .pn { color: var(--ink-soft); }
.locked-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--line); color: var(--ink-soft);
}
.sw.disabled { opacity: .5; }
.sw.disabled input { cursor: not-allowed; }
.perm-row.noescalate { opacity: .62; }
.noesc-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill); background: rgba(230,146,11,.15); color: var(--warn);
}
.noesc-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: var(--r-md);
  background: rgba(230,146,11,.06); border: 1px solid rgba(230,146,11,.28); margin: 14px 0 0;
  font-size: 12.5px; color: var(--ink-soft);
}
[data-theme="dark"] .noesc-note { background: rgba(230,146,11,.10); }
.noesc-note .ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 13px;
  background: rgba(230,146,11,.16); color: var(--warn);
}
.noesc-note b { color: var(--ink); font-weight: 600; }
.preview-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.preview-head .lab { margin-bottom: 0; }
.preview-head .for { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }
.preview-head .for b { color: var(--hue, var(--hub)); }
[data-theme="dark"] .preview-head .for b { color: var(--hue2, var(--hub-2)); }
.preview-card {
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.preview-card .pc-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.preview-card .pc-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 15px; }
[data-theme="dark"] .preview-card .pc-mark { color: var(--hue2, var(--hub-2)); }
.preview-card .pc-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.preview-card .pc-role { font-size: 12px; color: var(--ink-faint); }
.grants { list-style: none; display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; }
.grants li {
  display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink); padding: 7px 2px;
  border-bottom: 1px solid var(--line);
}
.grants li:last-child { border-bottom: none; }
.grants li .gk { font-weight: 800; width: 16px; text-align: center; flex: none; font-size: 14px; }
.grants li.yes .gk { color: var(--ok); }
.grants li.yes .gt { font-weight: 600; }
.grants li.no { color: var(--ink-faint); }
.grants li.no .gk { color: var(--ink-faint); opacity: .5; font-weight: 700; }
.grants li .gt { flex: 1; }
.empty-grants { font-size: 13px; color: var(--ink-faint); padding: 10px 2px; display: flex; align-items: center; gap: 8px; list-style: none; }
.note-box {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); margin-top: 16px;
}
.note-box .ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 15px; }
.note-box.ent .ic { background: rgba(15,169,104,.13); color: var(--ok); }
.note-box.assign .ic { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .note-box.assign .ic { color: var(--hue2, var(--hub-2)); }
.note-box .t { font-size: 12.5px; color: var(--ink-soft); }
.note-box .t b { color: var(--ink); font-weight: 600; }
.modal-foot {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface);
}
.modal-foot .grow { margin-left: auto; display: flex; gap: 10px; }
.assign-link {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.assign-link .ic {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 18px;
  background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
}
[data-theme="dark"] .assign-link .ic { color: var(--hue2, var(--hub-2)); }
.assign-link .t { flex: 1; min-width: 220px; }
.assign-link .t h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.assign-link .t p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.assign-link .t p b { color: var(--ink); font-weight: 600; }

/* ============================================================================
   GERENCIADOR DE MENU · ONDA 3 — RENDER DAS 4 SUPERFÍCIES NO SHELL (runtime)
   Portado 1:1 de prototype-v2/menu-visualizacao.html. Cada superfície é
   renderizada pelo shell (MainLayout) a partir do IMenuResolver — Aurora fiel,
   dark+light por cookie no SSR, foco visível, zero emoji.
   ============================================================================ */

/* ---------- shell com LATERAL: sidebar + conteúdo lado a lado ---------- */
.hub-shell { max-width: 1320px; margin: 0 auto; padding: clamp(20px, 4vw, 34px) clamp(14px, 4vw, 32px) 0;
  display: grid; grid-template-columns: 264px 1fr; gap: 22px; align-items: start; }
.hub-shell-main { min-width: 0; position: relative; }
/* F-06 (a11y) — o landmark #main-content recebe foco POR SCRIPT (skip-link da casca) só p/ levar teclado/leitor ao
   miolo; suprime o ring gigante em volta de TODO o conteúdo (não é um controle interativo). O foco visível segue nos
   elementos interativos DENTRO do miolo. .hub-main-bare é o wrapper do @Body no ramo sem lateral nativa (não-estilo). */
#main-content:focus { outline: none; }
.hub-main-bare { min-width: 0; }
/* o conteúdo interno (.wrap das páginas) já centraliza; dentro do shell removemos o padding lateral duplicado */
.hub-shell-main > .wrap { max-width: none; padding-top: 8px; }
@media (max-width: 980px) { .hub-shell { grid-template-columns: 1fr; } }

.hub-nav-toggle { display: none; align-items: center; gap: 8px; margin-bottom: 12px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-soft);
  font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 15px; border-radius: var(--r-pill); cursor: pointer; }
.hub-nav-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
.hub-nav-toggle:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }

/* ---------- SUPERFÍCIE 1 · LATERAL (sidebar) ---------- */
.sidenav { position: sticky; top: 88px; border-radius: var(--r-lg);
  /* AURORA SEAM · FEATHER DE TOPO (PO 2026-08-05) — replica a zona de transição da topbar (.topbar::before,
     chrome-glass→transparent) na ARESTA SUPERIOR da lateral, porém "um pouco mais suave" (24px vs 18px): o topo do
     menu DERRETE no chrome como o conteúdo faz. A .sidenav já gastou ::before (bloom) e ::after (feather-direita),
     então o feather de topo vem por CAMADA DE BACKGROUND: 1ª camada = gradiente de topo, 2ª = a superfície tingida.
     Fica na BASE (atrás do miolo z-index:1) → contraste AA do switcher/rótulos intacto. */
  background: linear-gradient(to bottom, var(--chrome-glass), transparent 24px) no-repeat, var(--chrome-surface); /* SEAM: superfície tingida (era --surface) + feather de topo */
  box-shadow: var(--shadow-md); border: 1px solid var(--chrome-line); border-top-color: transparent; overflow: hidden; /* SEAM: borda tingida (era --line); border-top MACIA — mata a faixa dura do topo, o feather assume */
  display: flex; flex-direction: column; max-height: calc(100vh - 108px);
  /* ANTI-FLASH (PO 2026-08-08): a lateral tinge a superfície/borda pelo accent (--chrome-surface/--chrome-line); no
     swap de app/workspace o cross-fade de ~.35s acompanha a topbar em vez de repintar seco. */
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1), border-color .35s cubic-bezier(.4, 0, .2, 1); }
/* AURORA SEAM — bloom auroral suave do canto sup-esq da lateral (mesma linguagem do body::before da casa). */
.sidenav::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(150% 55% at 0% 0%, color-mix(in srgb, var(--hue, var(--hub)) 12%, transparent), transparent 58%); }
/* AURORA SEAM · FEATHER da LATERAL (pedido do PO) — a ARESTA INTERNA (direita) do menu esvai num feather horizontal
   chrome-glass→transparent (~16px), sem linha dura (o overflow:hidden do card o contém). pointer-events:none.
   P2/P3 (Theo · 2026-08-05) — z-index:0 (ATRÁS do miolo, junto do bloom ::before), NÃO acima: o sidenav TEM
   conteúdo alinhado à direita nesses 16px (.nav-grp-head .gcount e .nav-link .nl-badge, ambos margin-left:auto).
   Com o feather por cima (z-index:2 antigo) a faixa glass pintava sobre esses rótulos e podia derrubar o contraste
   AA. Atrás do miolo, o feather segue visível na calha vazia da direita, mas contagem/badge renderizam LIMPOS por
   cima. (O shell resolve o mesmo problema pondo .eco-side::after com left:100% — feather FORA do rail; aqui o
   overflow:hidden do card impede sair pra fora, então a técnica equivalente é rebaixar o z-index.) */
.sidenav::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 16px; z-index: 0; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--chrome-glass)); }
.sidenav > * { position: relative; z-index: 1; } /* miolo acima do bloom E do feather */
.sidenav-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 11px; }
.sidenav-head .wmark { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 15px;
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 4px 14px -3px var(--hue, var(--hub)); }
.sidenav-head .wname { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.sidenav-head .wsub { font-size: 11.5px; color: var(--ink-soft); } /* F-02 AA: subtítulo do workspace era --ink-faint */
.sidenav-body { padding: 8px 10px 14px; overflow-y: auto; }

/* ---- Seletor de WORKSPACE como dropdown no topo do sidebar (padrão Slack/Notion · 2026-07-26) ---- */
/* Com >1 workspace o .sidenav-head vira relativo (âncora do popover) e o .wname/.wsub são o TRIGGER. */
.sidenav-head.ws-switch { position: relative; padding: 0; border-bottom: 1px solid var(--line); }
.ws-trigger {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 11px;
  padding: 16px 14px 12px 18px; border: none; background: transparent; font: inherit; cursor: pointer;
  text-align: left; color: inherit; border-radius: var(--r-lg) var(--r-lg) 0 0; transition: background .14s;
}
.ws-trigger:hover { background: var(--line); }
.ws-trigger:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: -2px; }
.ws-trigger .ws-trigger-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ws-trigger .wname { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-trigger .wsub { font-size: 11.5px; color: var(--ink-soft); } /* F-02 AA: subtítulo do workspace era --ink-faint */
.ws-trigger .ws-chev { flex: none; color: var(--ink-faint); display: grid; place-items: center; transition: transform .16s, color .14s; }
.ws-trigger .ws-chev svg { width: 15px; height: 15px; }
.ws-trigger[aria-expanded="true"] .ws-chev { transform: rotate(180deg); color: var(--hue, var(--hub)); }
/* O popover reusa .avatar-dropdown; .ws-dropdown só o REANCORA ao cabeçalho do sidebar (não à topbar). */
.avatar-dropdown.ws-dropdown {
  top: calc(100% + 6px); left: 10px; right: 10px; min-width: 0; transform-origin: top left;
}
.avatar-dropdown.ws-dropdown .ad-head { padding: 6px 12px 8px; }
/* No modo FOCO (rail sliver) o texto some — esconde o trigger de texto e mostra só o wmark centrado. */
.hub-focusable[data-hub-focus="on"] .ws-trigger { padding: 14px 0 12px; justify-content: center; }
.hub-focusable[data-hub-focus="on"] .ws-trigger .ws-trigger-txt,
.hub-focusable[data-hub-focus="on"] .ws-trigger .ws-chev { display: none; }

.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 6px; }
.nav-group-label { display: flex; align-items: center; gap: 8px; padding: 6px 10px 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); } /* F-02 AA: rótulo de seção era --ink-faint (3:1) */
.nav-group-label .gd { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; opacity: .55; }

.nav-tree, .nav-tree ul { list-style: none; margin: 0; padding: 0; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  transition: background .15s, color .15s; position: relative; }
.nav-link:hover { background: var(--line); color: var(--ink); }
.nav-link .ig { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 3px 9px -3px var(--hue, var(--hub)); }
.nav-link .nl-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link .nl-badge { margin-left: auto; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2.5px 8.5px; border-radius: var(--r-pill); color: #fff; flex: none;
  background: linear-gradient(135deg, var(--cpf), var(--cpf-2)); }
.nav-link.active { color: var(--ink); background: var(--hue-soft, var(--hub-soft)); font-weight: 700; }
[data-theme="dark"] .nav-link.active { background: rgba(91,91,245,.16); }
/* AURORA SEAM · BARRA ATIVA — traço de luz ~3px arredondado na hue, com glow suave, no item de nav ativo. */
.nav-link.active::before { content: ""; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 0 9px -1px var(--hue, var(--hub)); }
.nav-link:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 1px; }

/* accordion de grupo */
.nav-grp-head { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border: none; background: transparent; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  color: var(--ink-soft); font: inherit; font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  transition: background .15s, color .15s; position: relative; }
.nav-grp-head:hover { background: var(--line); color: var(--ink); }
.nav-grp-head:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 1px; }
.nav-grp-head .caret { width: 16px; height: 16px; flex: none; display: grid; place-items: center;
  font-size: 10px; color: var(--ink-faint); }
.nav-grp-head .gico { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-size: 13px; background: var(--line); color: var(--ink-faint); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; }
.nav-grp-head .gname { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-grp-head .gcount { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--ink-faint);
  background: var(--line); padding: 1px 7px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; flex: none; }
.nav-grp-head[aria-expanded="true"] { color: var(--ink); }
.nav-grp-head[aria-expanded="true"] .gico { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .nav-grp-head[aria-expanded="true"] .gico { color: var(--hue2, var(--hub-2)); }
.nav-grp-body { display: none; margin: 2px 0 2px; padding-left: 12px; margin-left: 18px; border-left: 1.5px solid var(--line-2); }
.nav-grp-head[aria-expanded="true"] + .nav-grp-body { display: block; }
.nav-grp-body > li { position: relative; }
.nav-grp-body > li > .nav-link::after,
.nav-grp-body > li > .nav-grp-head::after {
  content: ""; position: absolute; left: -12px; top: 50%; width: 8px; height: 1.5px;
  background: var(--line-2); border-radius: var(--r-pill); }
.nav-grp-body > li > .nav-grp-head::after { top: 22px; }
.nav-grp-body .nav-grp-head .gico { width: 24px; height: 24px; }
.nav-grp-body .nav-link .ig { width: 26px; height: 26px; font-size: 12px; }

@media (max-width: 980px) {
  .sidenav { position: static; max-height: none; display: none; }
  .sidenav.open { display: flex; }
  .hub-nav-toggle { display: inline-flex; }
}

/* ============================================================
   CHROME "MODO FOCO" (Aurora · Léo/UX · prototype-v2/hub-chrome-focus-v1.html)
   Estados do chrome ao trabalhar DENTRO de um item (aplica ao .hub-shell real):
     NORMAL     → topbar + rail 264px (nav no comando)
     FOCO       → rail vira SLIVER 72px (só ícones), o @Body cresce   [data-hub-focus="on"]
     MAXIMIZADO → topbar + rail somem, o conteúdo ocupa a tela         [data-hub-max="on"]
   + toggle recolher/expandir (reusa a mecânica do .hub-nav-toggle, aria-expanded),
   + maximizar/restaurar (Esc), + DOCK persistente de notif+chat que NUNCA some no foco.
   ZERO paleta nova · reusa tokens (--hub/--ai/--danger/--glass/--r-*). Additive: não
   toca .appmark/pacote-chip nem regride o overflow-clean da topbar/cite-panel.
   ============================================================ */

/* container que embrulha topbar + shell — recebe os data-attrs de estado */
.hub-focusable { position: relative; }

/* botão de recolher/expandir o rail — mora no rodapé da sidenav, sempre visível no desktop */
.sidenav-foot { margin-top: auto; padding: 8px 10px; border-top: 1px solid var(--line); }
.sidenav-collapse { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: flex-start;
  padding: 9px 10px; border: none; background: transparent; border-radius: var(--r-sm);
  color: var(--ink-faint); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s; }
.sidenav-collapse:hover { background: var(--line); color: var(--ink); }
.sidenav-collapse:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
.sidenav-collapse .chev { width: 20px; height: 20px; flex: none; display: grid; place-items: center; transition: transform .3s; }
.sidenav-collapse .chev svg { width: 18px; height: 18px; }

/* transição suave da coluna do grid + largura do rail */
.hub-shell { transition: grid-template-columns .34s cubic-bezier(.2,.8,.3,1); }
.sidenav { transition: width .34s cubic-bezier(.2,.8,.3,1); }

/* ---- ESTADO FOCO: rail vira SLIVER (72px), só ícones/monogramas ---- */
.hub-focusable[data-hub-focus="on"] .hub-shell { grid-template-columns: 72px 1fr; }
.hub-focusable[data-hub-focus="on"] .sidenav { width: 72px; }
.hub-focusable[data-hub-focus="on"] .sidenav-head > div,
.hub-focusable[data-hub-focus="on"] .nav-group-label,
.hub-focusable[data-hub-focus="on"] .nav-link .nl-body,
.hub-focusable[data-hub-focus="on"] .nav-grp-head .gname,
.hub-focusable[data-hub-focus="on"] .nav-grp-head .gcount,
.hub-focusable[data-hub-focus="on"] .nav-grp-head .caret,
.hub-focusable[data-hub-focus="on"] .nav-grp-body,
.hub-focusable[data-hub-focus="on"] .sidenav-collapse .rt-text { display: none; }
.hub-focusable[data-hub-focus="on"] .sidenav-head { justify-content: center; padding: 14px 0 12px; }
.hub-focusable[data-hub-focus="on"] .sidenav-body { padding: 8px 12px; overflow-x: hidden; }
.hub-focusable[data-hub-focus="on"] .nav-link,
.hub-focusable[data-hub-focus="on"] .nav-grp-head { justify-content: center; padding: 9px 0; }
.hub-focusable[data-hub-focus="on"] .sidenav-collapse { justify-content: center; padding: 9px 0; }
.hub-focusable[data-hub-focus="on"] .sidenav-collapse .chev { transform: rotate(180deg); }
/* no sliver, um item com pendência (nl-badge) vira um dot — a informação não some */
.hub-focusable[data-hub-focus="on"] .nav-link .nl-badge {
  position: absolute; top: 3px; right: 8px; margin: 0; min-width: 8px; width: 8px; height: 8px;
  padding: 0; font-size: 0; background: var(--danger); }

/* ---- ESTADO MAXIMIZADO: topbar + rail somem, conteúdo full-bleed ---- */
.hub-focusable[data-hub-max="on"] > .topbar { display: none; }
.hub-focusable[data-hub-max="on"] .sidenav { display: none; }
.hub-focusable[data-hub-max="on"] .hub-shell { grid-template-columns: 1fr; }

/* MUDANÇA 1 (2026-07-21): o antigo .hub-focus-max (absolute, top:10px right:14px, sobre o @Body) FOI REMOVIDO — colidia
   com a ação primária da tela e sumia @980px. O maximizar agora é o 1º .dock-btn (.dock-max) do .hub-focus-dock, sempre
   no mesmo canto previsível. Estilo do .dock-max logo abaixo, junto do resto do dock. */

/* ============================================================
   INDICADORES PERSISTENTES — notificação + chat na chegada (pulse)
   ============================================================ */
/* pulse de "toque" na chegada de uma notificação (a classe é aplicada pelo hub-focus.js) */
.notif-btn.arrived .hub-ico { animation: hubBellPulse .62s ease; transform-origin: 50% 4px; }
@keyframes hubBellPulse { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }
/* wobble do balão do chat na chegada (espelha o bell; o mesmo .arrived aplicado pelo hub-focus.js) */
.chat-topbar.arrived .chat-topbar-ico,
.dock-btn.chat.arrived .hub-ico { animation: hubBellPulse .62s ease; transform-origin: 50% 60%; }
/* ring-pulse: um anel que expande e some ao redor do badge quando algo chega */
.notif-btn.arrived .notif-badge::after,
.dock-btn.arrived .dock-badge::after {
  content: ""; position: absolute; inset: -3px; border-radius: var(--r-pill);
  border: 2px solid var(--danger); animation: hubRingPulse .7s cubic-bezier(.2,.7,.3,1); }
/* o ring do chat herda a cor do app (--chat), não o vermelho de notificação */
.chat-topbar.arrived .chat-unread-badge::after {
  content: ""; position: absolute; inset: -3px; border-radius: var(--r-pill);
  border: 2px solid var(--chat); animation: hubRingPulse .7s cubic-bezier(.2,.7,.3,1); }
.dock-btn.chat.arrived .dock-badge.chat::after { border-color: var(--chat); }
.notif-badge, .dock-badge { position: absolute; }
@keyframes hubRingPulse { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---- DOCK flutuante persistente — canto inf. direito da área de trabalho.
   MUDANÇA 1 (2026-07-21): o CONTÊINER agora é SEMPRE visível (removido o opacity:0 / gating que só o mostrava em
   [data-hub-max=on] ou [data-hub-focus=on]) — porque o 1º botão (.dock-max, maximizar) tem que estar sempre à mão.
   MUDANÇA 2 (2026-07-21): os botões sino/chat/copiloto (.dock-btn que NÃO são .dock-max) só aparecem no MAXIMIZADO
   (data-hub-max=on), onde a topbar some e o dock é a única presença deles. No estado normal E no foco (topbar segue
   visível) eles ficariam DUPLICANDO o topbar → escondemos. Resultado: normal/foco = só maximizar; maximizado =
   maximizar(restaurar)+sino+chat+copiloto. */
.hub-focus-dock { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex;
  flex-direction: column; gap: 10px; align-items: flex-end;
  opacity: 1; transform: none; pointer-events: auto; }
/* MUDANÇA 2: por default esconde TODO .dock-btn e reexibe só o .dock-max; no maximizado reexibe todos. */
.hub-focus-dock .dock-btn:not(.dock-max) { display: none; }
.hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-btn:not(.dock-max) { display: grid; }
.dock-btn { position: relative; width: 48px; height: 48px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-md); color: var(--ink-soft); display: grid; place-items: center;
  cursor: pointer; transition: color .16s, transform .18s, box-shadow .18s; }
.dock-btn:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.dock-btn:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 3px; }
.dock-btn .hub-ico { font-size: 21px; }
.dock-btn.chat { color: #fff; background: linear-gradient(135deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); border-color: transparent; }
.dock-badge { top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center;
  line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
.dock-badge.chat { background: var(--surface); color: var(--hue, var(--ai)); box-shadow: 0 0 0 2px var(--hue2, var(--ai-2)); }
[data-theme="dark"] .dock-badge.chat { color: var(--hue2, var(--ai-2)); }
/* botão COPILOTO no dock (D-DOCK-3) — glass como o bell, spark do accent (fallback --ai) */
.dock-btn.copilot .cp-spark { font-size: 20px; line-height: 1; color: var(--hue, var(--ai)); }
[data-theme="dark"] .dock-btn.copilot .cp-spark { color: var(--hue2, var(--ai-2)); }
.dock-btn.copilot:hover .cp-spark { color: var(--hue2, var(--ai-2)); }

/* botão MAXIMIZAR/RESTAURAR no dock (MUDANÇA 1 · 2026-07-21) — 1º .dock-btn, SEMPRE visível. Herda a moldura de vidro
   do .dock-btn, mas com glyph em --ink SÓLIDO (contraste AA nos dois temas — corrige o antigo --ink-soft que se
   camuflava no vidro). No hover vai pro accent; no MAXIMIZADO acende no accent (fundo cheio) = "ligado". */
.dock-btn.dock-max { color: var(--ink); }
.dock-btn.dock-max .hfm-ico { width: 20px; height: 20px; }
.dock-btn.dock-max:hover { color: var(--hue, var(--hub)); }
.hub-focusable[data-hub-max="on"] .dock-btn.dock-max {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.hub-focusable[data-hub-max="on"] .dock-btn.dock-max:hover { color: #fff; }
/* rótulo textual (hover/foco) — tira a ambiguidade do glyph. Aparece à ESQUERDA do dock (o dock encosta na direita).
   O texto vem do atributo title (setado/trocado pelo hub-focus.js: "Maximizar (M)"↔"Restaurar (M ou Esc)"). */
.dock-btn.dock-max::after {
  content: attr(title); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity .16s, transform .16s; }
.dock-btn.dock-max:hover::after, .dock-btn.dock-max:focus-visible::after {
  opacity: 1; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) { .dock-btn.dock-max::after { transition: none; } }

/* ============================================================
   F-07 · DOCK ÚNICO EXPANSÍVEL no MOBILE/MAXIMIZADO (proto docs/ux/proto/f07-fabs-mobile.html · Opção A · PO 2026-08-20)
   A coluna de FABs empilhados (que colidia com o FAB do app embed no canto) vira UM FAB primário (.dock-trigger)
   que expande PRA CIMA a .dock-stack recolhível — cada destino com RÓTULO. Easing/tempo = cubic-bezier(.2,.8,.3,1)
   (o mesmo do .hub-shell da casa), ~.28s + stagger 40ms/item. ESCOPO: só @media(max-width:720px) + [data-hub-max="on"].
   Fora disso (desktop, ou não-maximizado) a estrutura é TRANSPARENTE — comportamento atual preservado 1:1.
   ------------------------------------------------------------
   DEFAULT (desktop + não-maximizado): wrappers transparentes → os .dock-btn seguem sendo filhos-flex diretos do dock. */
.dock-stack { display: contents; }
.dock-item { display: contents; }
.dock-label { display: none; }                 /* rótulos só aparecem no menu recolhível mobile */
.dock-trigger, .dock-scrim { display: none; }  /* gatilho/scrim só existem no mobile/maximizado */
/* base do gatilho (NÃO é .dock-btn de propósito — assim as regras de visibilidade por-estado do dock não o revelam
   no desktop-maximizado; ele só aparece via a regra mobile/max abaixo). Herda a pílula + foco do cânone do dock. */
.dock-trigger { position: relative; border-radius: var(--r-pill); cursor: pointer; -webkit-appearance: none; appearance: none; }
.dock-trigger:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 3px; }
/* [hidden] precisa vencer o display:grid explícito do .dock-badge (mesma disciplina do .waffle-grid[hidden]) —
   senão o badge agregado (total 0) continuaria renderizando um ponto vermelho vazio no gatilho. */
.dock-badge.dock-agg[hidden] { display: none; }

/* ---- MOBILE + MAXIMIZADO: a metamorfose pro dock único ---- */
@media (max-width: 720px) {
  .hub-focusable[data-hub-max="on"] .hub-focus-dock {
    /* transição de esconder/revelar no scroll (scroll-aware) com o easing da casa */
    transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .26s cubic-bezier(.2,.8,.3,1); }

  /* a .dock-stack vira o CONTÊINER animado (empilha os itens acima do gatilho, alinhados à direita) */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-stack {
    display: flex; flex-direction: column; gap: 11px; align-items: flex-end; margin-bottom: 2px; pointer-events: none; }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-stack { pointer-events: auto; }

  /* cada item = rótulo + ícone, na horizontal. Recolhido por padrão (sobe com stagger ao abrir). */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-item {
    display: flex; align-items: center; gap: 9px;
    opacity: 0; transform: translateY(14px) scale(.85); transform-origin: bottom right;
    transition: opacity .26s cubic-bezier(.2,.8,.3,1), transform .28s cubic-bezier(.2,.8,.3,1); }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-item { opacity: 1; transform: translateY(0) scale(1); }
  /* stagger: o item mais próximo do gatilho (Restaurar, último) entra primeiro; sino (primeiro) por último */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-item:nth-last-child(1) { transition-delay: .00s; }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-item:nth-last-child(2) { transition-delay: .04s; }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-item:nth-last-child(3) { transition-delay: .08s; }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-item:nth-last-child(4) { transition-delay: .12s; }

  /* rótulos VISÍVEIS no menu (reconhecer > lembrar · Nielsen #6) — pílula na superfície da casa (tema-aware) */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-label {
    display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); background: var(--surface);
    padding: 6px 11px; border-radius: 8px; box-shadow: var(--shadow-md); white-space: nowrap; border: 1px solid var(--line);
    opacity: 0; transform: translateX(8px); transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1); }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-label { opacity: 1; transform: translateX(0); transition-delay: .06s; }

  /* os ícones dos itens: mantêm o vidro/accent do .dock-btn (48px · ≥44px alvo). No maximizado eles já são display:grid. */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-item .dock-btn { flex: none; }

  /* GATILHO primário: 56px, accent do Hub, sempre no canto (zona quente do polegar · Fitts) */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-trigger {
    display: grid; place-items: center; position: relative; width: 56px; height: 56px; border: none;
    background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); color: #fff;
    box-shadow: 0 12px 28px -8px rgba(91,91,245,.65);
    transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .2s; }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-trigger:hover { transform: translateY(-2px); }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-trigger { transform: rotate(90deg); }
  .dock-trigger .dock-trigger-spark { font-size: 24px; line-height: 1; color: #fff; }
  .dock-trigger .dock-trigger-x { width: 22px; height: 22px; position: absolute; opacity: 0; transform: scale(.6) rotate(-90deg); }
  .dock-trigger .dock-trigger-spark, .dock-trigger .dock-trigger-x { transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1); }
  .hub-focus-dock.open .dock-trigger .dock-trigger-spark { opacity: 0; transform: scale(.6); }
  .hub-focus-dock.open .dock-trigger .dock-trigger-x { opacity: 1; transform: scale(1) rotate(0); }
  /* badge AGREGADO (sino+chat) — some quando o menu abre (o ✕ toma o lugar) */
  .dock-trigger .dock-agg { top: -2px; right: -2px; min-width: 20px; height: 20px; box-shadow: 0 0 0 2.5px var(--surface); }
  .hub-focus-dock.open .dock-trigger .dock-agg { opacity: 0; transition: opacity .16s ease; }

  /* SCRIM clicável — cobre a tela sob o dock, foca o menu; toque fecha (Nielsen #3) */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-scrim {
    display: block; position: fixed; inset: 0; z-index: -1; border: none; padding: 0; margin: 0; cursor: default;
    background: rgba(10,10,20,.28); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    opacity: 0; visibility: hidden; transition: opacity .24s cubic-bezier(.2,.8,.3,1), visibility .24s; }
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-scrim { opacity: 1; visibility: visible; }

  /* SCROLL-AWARE: rola-baixo esconde o dock (devolve pixels ao conteúdo); rola-cima/topo revela; menu aberto NUNCA some.
     A classe .dock-scrolled-away é aplicada pelo hub-focus.js (guardado por matchMedia + isMax + !open). */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.dock-scrolled-away {
    transform: translateX(150%); opacity: 0; pointer-events: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .hub-focusable[data-hub-max="on"] .hub-focus-dock,
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-item,
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-label,
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-trigger,
  .dock-trigger .dock-trigger-spark, .dock-trigger .dock-trigger-x,
  .hub-focusable[data-hub-max="on"] .hub-focus-dock .dock-scrim { transition: none !important; }
  /* sem stagger no reduced-motion */
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-item,
  .hub-focusable[data-hub-max="on"] .hub-focus-dock.open .dock-label { transition-delay: 0s !important; }
}

/* HOST fixo do painel de notificação REANCORADO ao dock (D-DOCK-1) — o hub-focus.js move #notif-dd pra cá
   quando aberto pelo dock, pra escapar da topbar (que some no maximizado). Fica no MESMO canto do dock,
   acima dele. Só serve de contexto de posicionamento; o painel em si é .dock-anchored (fixed). */
.dock-notif-host { position: fixed; right: 18px; bottom: 78px; z-index: 46; width: 0; height: 0; }
#notif-dd.dock-anchored {
  position: fixed; right: 18px; bottom: 78px; top: auto; left: auto;
  transform-origin: bottom right; max-height: min(70vh, 520px); overflow-y: auto;
}
#notif-dd.dock-anchored:not(.on) { transform: translateY(6px) scale(.98); }
@media (max-width: 980px) {
  .dock-notif-host, #notif-dd.dock-anchored { right: 14px; bottom: 66px; }
  #notif-dd.dock-anchored { max-width: calc(100vw - 28px); }
}

/* COPILOTO na TOPBAR (D-DOCK-4) — pílula compacta no chrome, spark do accent (fallback --ai) */
.icon-btn.cp-topbar { padding: 0 10px; }
.icon-btn.cp-topbar .cp-spark { font-size: 15px; line-height: 1; color: var(--hue, var(--ai)); }
[data-theme="dark"] .icon-btn.cp-topbar .cp-spark { color: var(--hue2, var(--ai-2)); }
.icon-btn.cp-topbar:hover { border-color: var(--hue, var(--ai)); }
/* mobile: a topbar-right fica apertada (mesmo corte da .ai-quota @900px) — some a entrada de IA da topbar;
   o copiloto continua alcançável pelo DOCK (que persiste no mobile). Evita overflow-x no ≤390. */
@media (max-width: 900px) { .icon-btn.cp-topbar { display: none; } }

/* região viva (aria-live) — invisível, anuncia a chegada pra leitor de tela */
.hub-focus-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* no mobile o rail JÁ é drawer (foco por natureza): esconder o toggle desktop; o dock persiste (e com ele o
   MAXIMIZAR — MUDANÇA 1: não some mais @980px). O foco-sliver não faz sentido no drawer, então cai pro normal. */
@media (max-width: 980px) {
  .sidenav-foot { display: none; }
  /* MUDANÇA 1 (2026-07-21): removido o antigo `.hub-focus-max { display:none }` — o maximizar vive no dock agora e
     PERSISTE no mobile/tablet junto do dock (era um dos 3 problemas: o gesto de expandir sumia). */
  .hub-focusable[data-hub-focus="on"] .hub-shell { grid-template-columns: 1fr; }
  .hub-focusable[data-hub-focus="on"] .sidenav { width: auto; }
  .hub-focus-dock { right: 14px; bottom: 14px; }
  .dock-btn { width: 44px; height: 44px; }
}

/* reduced-motion: mata transições E as animações de pulse/ring (regra da casa) */
@media (prefers-reduced-motion: reduce) {
  .hub-shell, .sidenav, .sidenav-collapse .chev, .hub-focus-dock, .dock-btn { transition: none !important; }
  .notif-btn.arrived .hub-ico,
  .notif-btn.arrived .notif-badge::after,
  .dock-btn.arrived .dock-badge::after,
  .chat-topbar.arrived .chat-topbar-ico,
  .dock-btn.chat.arrived .hub-ico,
  .chat-topbar.arrived .chat-unread-badge::after { animation: none !important; }
}

/* ---------- SUPERFÍCIE 2 · TOPBAR (dentro de .nav do MainLayout) ---------- */
.nav .tn-item { position: relative; display: inline-flex; }
.nav .tn-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--r-pill);
  border: none; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: 13.5px;
  letter-spacing: -.01em; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; }
.nav .tn-link:hover { color: var(--ink); background: var(--line); }
.nav .tn-link:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
/* CHROME DE LAUNCHER (native:launcher-*) na Topbar — pill de TEXTO PURO, 1:1 com os antigos .nav a hard-coded
   (Meus apps/Marketplace/Menu): mesmo padding/tamanho, realce .active em var(--hue, var(--hub))+hub-soft. Sem .tdot. */
.nav .tn-link.tn-chrome { padding: 7px 14px; gap: 0; font-size: 14.5px; letter-spacing: normal; }
.nav .tn-link.tn-chrome:hover { color: var(--ink); background: var(--hue-soft, var(--hub-soft)); }
.nav .tn-link.tn-chrome.active { color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .nav .tn-link.tn-chrome.active { color: #fff; }
.nav .tn-link .tdot { width: 18px; height: 18px; border-radius: 6px; flex: none; display: grid; place-items: center;
  font-size: 11px; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.nav .tn-link .tcaret { font-size: 9px; color: var(--ink-faint); transition: transform .18s; }
.nav .tn-item.open .tn-link .tcaret { transform: rotate(180deg); }
.nav .tn-item.open .tn-link { color: var(--ink); background: var(--line); }
.tn-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 244px;
  padding: 7px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.tn-item.open .tn-menu { display: block; }
.tn-menu .tn-menu-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); padding: 6px 10px 4px; }
.tn-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 13.5px; transition: background .15s, color .15s; }
.tn-row:hover { background: var(--line); color: var(--ink); }
.tn-row:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 1px; }
.tn-row .ig { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center;
  font-size: 11px; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.tn-row .tr-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-nested { margin: 3px 0 3px 14px; padding-left: 10px; border-left: 1.5px solid var(--line-2); }

/* ---------- SUPERFÍCIE 3 · CANTO (waffle) — popover no topbar-right ---------- */
.waffle { position: relative; display: inline-flex; }
.waffle-btn { width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
  border: 1px solid var(--line-2); background: transparent; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, border-color .15s; }
.waffle-btn:hover { background: var(--line); border-color: var(--ink-faint); }
.waffle-btn:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
.waffle-btn.on { background: var(--hue-soft, var(--hub-soft)); border-color: transparent; }
.waffle-dots { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); gap: 3px; }
.waffle-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }
.waffle-btn:hover .waffle-dots i, .waffle-btn.on .waffle-dots i { background: var(--hue, var(--hub)); }
[data-theme="dark"] .waffle-btn.on .waffle-dots i { background: var(--hue2, var(--hub-2)); }

/* Painel BOUNDED ao viewport: coluna flex limitada em altura (topbar ≈ 64px + 10px gap + 16px folga = ~90px do
   topo), overflow:hidden. O campo de busca (.waffle-search) e o pinlabel ficam FIXOS no topo; só a região de
   conteúdo (.waffle-stack) rola. Assim NADA passa da borda do popover em nenhum estado (grade raiz, pasta, busca). */
.waffle-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 90px); display: flex; flex-direction: column; overflow: hidden;
  padding: 14px 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); }
.waffle-panel[hidden] { display: none; }
.waffle-search, .waffle-pinlabel { flex: none; }
.waffle-search { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-2);
  margin: 2px 2px 14px; transition: border-color .15s, background .15s; }
.waffle-search:focus-within { border-color: var(--hue, var(--hub)); background: var(--surface); }
.waffle-search .ws-ic { font-size: 14px; color: var(--ink-faint); flex: none; }
.waffle-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; min-width: 0; }
.waffle-search input::placeholder { color: var(--ink-faint); }
.waffle-pinlabel { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 10px; }
.waffle-pinlabel b { font-family: "Bricolage Grotesque", sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.waffle-pinlabel span { font-size: 12px; color: var(--ink-faint); }

.waffle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px; }
@media (max-width: 400px) { .waffle-grid { grid-template-columns: repeat(3, 1fr); } }
.waffle-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 4px 12px;
  border-radius: var(--r-sm); text-decoration: none; text-align: center; color: var(--ink);
  border: 1px solid transparent; background: transparent; font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s; position: relative; min-height: 116px; justify-content: flex-start; }
.waffle-tile:hover { background: var(--surface-2); border-color: var(--line); }
.waffle-tile:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
.waffle-tile .wtile-mark { width: 84px; height: 84px; border-radius: 21px; flex: none; display: grid; place-items: center;
  color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 34px;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 6px 15px -5px var(--hue, var(--hub)); }
.waffle-tile .wtile-name { font-size: 12px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
  max-width: 100%; padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.waffle-tile.folder .wfold-face { width: 84px; height: 84px; border-radius: 21px; flex: none; padding: 5px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: inset 0 1px 2px rgba(22,21,42,.05); transition: border-color .15s; }
[data-theme="dark"] .waffle-tile.folder .wfold-face { box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.waffle-tile.folder:hover .wfold-face { border-color: var(--hue, var(--hub)); }
.waffle-tile.folder .wfc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 9px; background: var(--surface-2); min-width: 0; overflow: hidden; padding: 2px 2px 1px; }
.waffle-tile.folder .wfc i { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff; font-family: "Bricolage Grotesque", sans-serif;
  background: linear-gradient(140deg, var(--i, var(--hub)), var(--i2, var(--hub-2))); }
.waffle-tile.folder .wfc b { font-size: 10px; font-weight: 600; line-height: 1.05; color: var(--ink-soft); letter-spacing: -.02em;
  width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waffle-tile.folder .wfc.more { justify-content: center; }
.waffle-tile.folder .wfc.more b { font-size: 13px; font-weight: 800; color: var(--ink-faint); }
.waffle-tile.folder:hover .wfc.more b { color: var(--ink-soft); }

/* ---- FASE-2 R2 · TILE-PACOTE rico (Waffle por PACOTES · "Constelações"): a face-2×2 legada + badge/hue de
   identidade + subtítulo. SÓ com .package (IsPackage=true); grupo comum mantém o tile-pasta legado intacto. O par
   --hue/--hue2 vem inline do grupo (PackageHueStyle). */
.waffle-tile.folder.package .wfold-face { position: relative; overflow: visible;
  border-color: var(--hue, var(--hub)); box-shadow: 0 5px 14px -7px var(--hue, var(--hub)), inset 0 1px 2px rgba(22,21,42,.05); }
[data-theme="dark"] .waffle-tile.folder.package .wfold-face { box-shadow: 0 5px 14px -7px var(--hue, var(--hub)), inset 0 1px 2px rgba(0,0,0,.3); }
.waffle-tile.folder.package:hover .wfold-face { border-color: var(--hue, var(--hub)); }
.waffle-tile.folder.package .wpkg-badge { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px;
  border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 3px 8px -3px var(--hue, var(--hub)), 0 0 0 2px var(--surface); }
.waffle-tile .wtile-sub { font-size: 10.5px; font-weight: 500; color: var(--ink-faint); letter-spacing: -.01em;
  line-height: 1.2; max-width: 100%; padding: 0 2px; margin-top: -4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- FASE-2 R3 (waffle §6.1 · proto-fase1 .chip) · CHIP de sinal vivo no tile-pacote (grade raiz + drill). SEMPRE
   ícone+texto (WCAG 1.4.1 · nunca só cor). Compacto p/ caber no tile estreito (4-col): texto trunca com ellipsis. */
.waffle-tile.folder.package .wpkg-signal { display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  margin-top: 1px; padding: 2px 7px; border-radius: var(--r-pill); font-size: 9.5px; font-weight: 650; line-height: 1.2; }
.waffle-tile.folder.package .wpkg-signal .wc-ic { display: inline-flex; flex: none; font-size: 11px; }
.waffle-tile.folder.package .wpkg-signal .wps-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waffle-tile.folder.package .wpkg-signal.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.waffle-tile.folder.package .wpkg-signal.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

/* O stack ancora o overlay (inset:0). O overlay traz um HEADER (breadcrumb) EM CIMA da grade — algo que a grade
   RAIZ não tem — então garantimos altura mínima pra caber header + ≥1 linha de tiles (evita corte no rodapé),
   e um TETO com rolagem INTERNA no overlay pra pastas com muitas linhas nunca estourarem o popover. */
/* O stack é a área de conteúdo do popover: flex:1 dentro do painel bounded, NÃO rola ele mesmo (overflow:hidden) —
   é só o CONTAINING BLOCK do overlay (inset:0 pina o overlay na área VISÍVEL, não na altura do conteúdo). Cada
   região interna (grade raiz, resultados, overlay) é que rola, com max-height:100% do stack. min-height:0 deixa o
   flex-item encolher; a rolagem interna garante que nada passe da borda do painel. */
.waffle-stack { position: relative; flex: 1 1 auto; min-height: min(210px, 40vh); overflow: hidden;
  display: flex; flex-direction: column; }
/* Grade raiz e resultados rolam DENTRO do stack: flex:1 + min-height:0 é o padrão flexbox correto p/ área rolável
   (max-height:% não resolve de forma confiável através de flex-basis:auto). */
.waffle-grid[data-waffle-root] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; align-content: start; padding-right: 2px; }
/* Overlay de pasta: pinado à área VISÍVEL do stack (inset:0), cabeçalho sticky + grade rolando por baixo, dentro do painel. */
.waffle-folderview { position: absolute; inset: 0; display: none; flex-direction: column;
  background: var(--surface); border-radius: var(--r-md); z-index: 3;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.waffle-folderview.on { display: flex; animation: wf-fold .17s cubic-bezier(.3,.8,.3,1); }
@keyframes wf-fold { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .waffle-folderview.on { animation: none; } }
/* Breadcrumb/voltar/fechar SEMPRE visíveis mesmo com a grade rolando por baixo. */
.waffle-foldhead { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; position: sticky; top: 0; z-index: 1;
  background: var(--surface); padding-bottom: 8px; }
.waffle-foldback { width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-soft); font-size: 15px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.waffle-foldback:hover { color: var(--ink); background: var(--line); border-color: var(--ink-faint); }
.waffle-foldback:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
.waffle-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; min-width: 0; overflow: hidden; }
.waffle-crumbs .wf-crumb { border: 0; background: transparent; font: inherit; padding: 2px 4px; border-radius: var(--r-sm);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waffle-crumbs .wf-crumb-link { color: var(--ink-faint); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s; }
.waffle-crumbs .wf-crumb-link:hover { color: var(--ink-soft); background: var(--line); }
.waffle-crumbs .wf-crumb-link:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
.waffle-crumbs .wf-crumb-cur { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.waffle-crumbs .wf-sep { color: var(--ink-faint); font-size: 12px; flex: none; opacity: .7; }
.waffle-foldhead .wf-close { margin-left: auto; border-color: transparent; color: var(--ink-faint); }
.waffle-foldhead .wf-close:hover { color: var(--ink); background: var(--line); border-color: transparent; }
.waffle-screen { display: none; }
.waffle-screen.on { display: block; }

/* ---- FASE-2 R3 (waffle §6.2 · proto-fase1 .ally/.start) · a "alma" do grupo-PACOTE no topo do drill: linha de
   ALIADO (opinião curada) + "COMECE POR AQUI". Só em .waffle-screen.package; o par --hue/--hue2 do pacote é fixado
   inline na tela (accent = --p1/--p2 do proto). Cânone dark+light pelas vars. */
.waffle-screen.package .wr-ally { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
  padding: 11px 12px; border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--hue, var(--hub)) 12%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--hue, var(--hub)) 24%, var(--line-2)); }
.waffle-screen.package .wr-ally-glow { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: #fff; font-size: 14px;
  background: linear-gradient(135deg, var(--ai, var(--hub)), var(--ai-2, var(--hub-2))); }
.waffle-screen.package .wr-ally p { font-size: 12.5px; color: var(--ink); line-height: 1.4; }

.waffle-screen.package .wr-start { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; text-decoration: none;
  padding: 11px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--canvas);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.waffle-screen.package .wr-start:hover { border-color: color-mix(in srgb, var(--hue, var(--hub)) 45%, var(--line-2));
  box-shadow: var(--shadow-sm); background: var(--surface); }
.waffle-screen.package .wr-start:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
.waffle-screen.package .wr-start-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 11px; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 15px;
  background: linear-gradient(135deg, var(--i, var(--hub)), var(--i2, var(--hub-2))); box-shadow: 0 6px 16px -7px var(--i, var(--hub)); }
.waffle-screen.package .wr-start-txt { flex: 1; min-width: 0; }
.waffle-screen.package .wr-start-txt .lab { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hue, var(--hub)); font-weight: 750; }
[data-theme="dark"] .waffle-screen.package .wr-start-txt .lab { color: var(--hue2, var(--hub-2)); }
.waffle-screen.package .wr-start-txt b { display: block; font-size: 13.5px; letter-spacing: -.01em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waffle-screen.package .wr-start-go { flex: none; padding: 7px 14px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
  color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 5px 14px -6px var(--hue, var(--hub)); }

/* Resultados da busca RECURSIVA: grade plana (mesmos tiles) com TETO + rolagem interna pra listas longas nunca
   estourarem o popover; o campo de busca no topo fica sempre visível. Cada tile ganha um caminho (breadcrumb)
   pequeno mostrando ONDE o item vive na árvore. */
/* [hidden] precisa vencer o display:grid/flex explícito da grade e do pinlabel (senão continuam renderizando
   mesmo com o atributo hidden — é o que o hub.js alterna ao entrar/sair da busca). */
.waffle-grid[hidden], .waffle-pinlabel[hidden], .waffle-results[hidden] { display: none; }
/* Colunas FIXAS e iguais (mesmo esquema 4-col da grade raiz), mas com mínimo 0 (minmax(0,1fr)) pra o rótulo de
   caminho LONGO não esticar a coluna por conteúdo (auto) e transbordar o painel. min-width:0 no tile deixa o
   ellipsis do .wtile-path funcionar DENTRO da track do grid. */
.waffle-results { grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 2px; }
@media (max-width: 400px) { .waffle-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.waffle-results .waffle-tile { min-width: 0; }
.waffle-results .wtile-path { display: block; width: 100%; margin-top: 2px; font-size: 10.5px; line-height: 1.2;
  color: var(--ink-faint); letter-spacing: -.01em; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waffle-noresults { margin: 22px 4px; text-align: center; font-size: 13px; color: var(--ink-faint); }
.waffle-noresults[hidden] { display: none; }

/* ============================================================
   ONDA C1 (R-PKG-5 · waffle §4 · proto-fase1 · vitrine catalog-driven) — SEGMENTED de ESCOPO + aba CATÁLOGO.
   Cânone reproduzido do proto-fase1 (§145-149 .seg · §201-243 .chip/.cat-note/.pkg-acq/.btn-acq), mapeado pras
   vars REAIS do hub.css (--ok/--warn/--warn-2/--ink-*/--line/--surface-2/--hub-soft). Dark+light pelas vars.
   ============================================================ */
/* segmented no head do painel: 2 botões (Minhas soluções × Catálogo), aria-pressed pinta o ativo. */
.waffle-scope-seg { display: inline-flex; align-self: flex-start; flex: none; gap: 2px; margin: 0 2px 12px;
  padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-2); }
.waffle-scope-seg .wss-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border: 0; background: transparent; border-radius: var(--r-pill); font: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.waffle-scope-seg .wss-btn .wss-ic { display: inline-flex; font-size: 12px; opacity: .85; }
.waffle-scope-seg .wss-btn:hover { color: var(--ink); }
.waffle-scope-seg .wss-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.waffle-scope-seg .wss-btn:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }

/* cada escopo é um flex-item coluna do painel; só um visível (o outro [hidden]). "mine" hospeda a busca/pasta (a
   .waffle-stack já rola sozinha); "cat" rola ela mesma (lista de cards). */
.waffle-scope { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.waffle-scope[hidden] { display: none; }
.waffle-cat { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 2px; }

/* nota de topo (upsell honesto) + rótulos de seção. */
.waffle-cat-note { display: flex; align-items: center; gap: 9px; flex: none; margin: 2px 2px 12px; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--hue-soft, var(--hub-soft)); font-size: 12.5px; color: var(--ink-soft); }
.waffle-cat-note .wc-ic { display: inline-flex; flex: none; color: var(--hue, var(--hub)); }
[data-theme="dark"] .waffle-cat-note .wc-ic { color: var(--hue2, var(--hub-2)); }
.waffle-cat .wcat-seclabel { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
  font-weight: 700; margin: 14px 2px 10px; }
.waffle-cat-empty { margin: 30px 6px; }

/* grade de nós-PACOTE (2 col · mirror do proto .pkg-grid; o waffle-grid 4-col é compacto demais p/ o card rico). */
.wcat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .wcat-grid { grid-template-columns: 1fr; } }
.wcat-pkg { position: relative; display: flex; flex-direction: column; text-align: left; overflow: hidden;
  padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm); transition: transform .16s, box-shadow .16s, border-color .16s; }
.wcat-pkg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.wcat-pkg:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--hue, var(--hub)) 40%, var(--line-2)); }
.wcat-pkg-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.wcat-badge { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; color: #fff;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 6px 16px -6px var(--hue, var(--hub)); }
.wcat-head { flex: 1; min-width: 0; }
.wcat-head b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 14px; letter-spacing: -.01em; line-height: 1.15; }
.wcat-head .sub { display: block; font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* face 2×2 dos membros (mesmo vocabulário do tile-pasta; membro pendente = traço âmbar). */
.wcat-face { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }
.wcat-face .pfc { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 7px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line); }
.wcat-face .pfc i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 5px;
  color: #fff; font-size: 10px; font-weight: 700; font-style: normal; background: linear-gradient(135deg, var(--i), var(--i2)); }
.wcat-face .pfc b { font-size: 11px; font-weight: 600; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcat-face .pfc.more { justify-content: center; background: transparent; border-style: dashed; color: var(--ink-faint); font-weight: 700; }
.wcat-face .pfc.pend { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.wcat-face .pfc.pend i { background: linear-gradient(135deg, var(--warn), var(--warn-2)); }

/* chip de posse — SEMPRE ícone + texto (WCAG 1.4.1 · nunca só cor). */
.wcat-state { display: flex; margin-bottom: 8px; }
.wcat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 650; }
.wcat-chip .wc-ic { display: inline-flex; font-size: 12px; }
.wcat-chip.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.wcat-chip.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.wcat-chip.neutral { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-faint); }

/* rodapé de aquisição: preço + selo %economia à esquerda · CTA à direita. */
.wcat-acq { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.wcat-acq .wc-price { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--ink-faint); }
.wcat-acq .wc-price b { font-family: "Bricolage Grotesque", sans-serif; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wcat-eco { flex: none; padding: 2px 7px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); white-space: nowrap; }
.wcat-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 5px 14px -6px var(--hue, var(--hub)); }
.wcat-btn:hover { filter: brightness(1.04); }
.wcat-btn.ghost { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line-2); box-shadow: none; }
.wcat-btn.ghost:hover { color: var(--ink); border-color: var(--ink-faint); filter: none; }
.wcat-btn:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }

/* apps avulsos — linha compacta (mark + nome/preço + chip + CTA). */
.wcat-applist { display: flex; flex-direction: column; gap: 8px; }
.wcat-app { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.wcat-app:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.wcat-app .wc-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  color: #fff; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 6px 16px -7px var(--hue, var(--hub)); }
.wcat-app .wc-info { flex: 1; min-width: 0; }
.wcat-app .wc-info b { display: block; font-size: 13.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcat-app .wc-info .wc-price { display: block; font-size: 11.5px; color: var(--ink-faint); }
.wcat-app .wcat-chip { flex: none; }

/* BADGE "novo" (proto waffle-catalogo R-W2) — app recém-disponível no catálogo (LaunchDate ~30d). Verde, SEMPRE com
   TEXTO (nunca só cor · WCAG 1.4.1); o mark ganha um anel verde discreto pra reforçar a novidade. */
.wcat-app.isnew .wc-mark { outline: 2px solid var(--ok); outline-offset: 2px; }
.wcat-newbadge { flex: none; align-self: center; padding: 2px 8px; border-radius: var(--r-pill); color: #fff;
  background: var(--ok); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* BUSCA própria da aba Catálogo (proto waffle-catalogo R-W4) — reusa o componente .waffle-search; só ajusta o espaçamento
   dentro do painel "cat" e o no-results próprio da busca do catálogo. */
.waffle-cat-search { margin: 2px 2px 12px; }
.waffle-cat-noresults { margin: 22px 6px; }

/* ---- FASE-2 R5-B (waffle §7 · proto-fase1 .upsell/#upsellBtn) · upsell HONESTO ---- */
/* FOOTER "Explore mais soluções" no fim da grade de "Minhas soluções" (leva à aba Catálogo · data-waffle-explore).
   Vive DENTRO da grade raiz ⇒ ocupa a linha inteira (grid-column:1/-1) e some sozinho na busca (root hidden) e no
   drill (coberto pelo overlay). Accent = IA (--ai · igual ao proto), borda tracejada. Sem dark-pattern: informativo. */
.waffle-explore { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px;
  padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed var(--ai-line); background: var(--ai-soft);
  font: inherit; text-align: left; cursor: pointer; color: var(--ink); transition: box-shadow .15s, border-color .15s; }
.waffle-explore:hover { box-shadow: 0 0 0 4px var(--ai-soft); border-color: var(--ai); }
.waffle-explore:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
.waffle-explore .wex-spark { width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 10px; color: #fff; font-size: 17px; background: linear-gradient(135deg, var(--ai), var(--ai-2)); }
.waffle-explore .wex-txt { flex: 1; min-width: 0; }
.waffle-explore .wex-txt b { display: block; font-size: 13.5px; letter-spacing: -.01em; color: var(--ink); }
.waffle-explore .wex-txt span { display: block; font-size: 12px; color: var(--ink-faint); }
.waffle-explore .wex-go { flex: none; display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ai); white-space: nowrap; }

/* "Adicione apps a esta solução" no RODAPÉ do drill do pacote (proto-fase1 .px-add) — link que NAVEGA pro /marketplace. */
.waffle-add { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px dashed var(--ai-line); background: var(--ai-soft);
  font-size: 13px; font-weight: 700; color: var(--ai); text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.waffle-add:hover { box-shadow: 0 0 0 4px var(--ai-soft); border-color: var(--ai); }
.waffle-add:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
.waffle-add .wa-ic { flex: none; display: inline-flex; color: var(--ai); font-size: 16px; }

/* ---------- SUPERFÍCIE 4 · FOOTER (colunas) ---------- */
.hub-footer { margin: 40px auto 0; max-width: 1080px; padding: 0 clamp(18px, 5vw, 44px);
  border-top: 1px solid var(--line); }
.hub-shell .hub-footer, .hub-shell-main .hub-footer { max-width: none; padding: 0; }
.footer-mock { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 26px; padding: 22px 0 40px; }
.footer-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.footer-col .fc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); }
.footer-col .fc-title .fcg { font-size: 11px; color: var(--hue, var(--hub)); }
[data-theme="dark"] .footer-col .fc-title .fcg { color: var(--hue2, var(--hub-2)); }
.footer-col a { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 6px 11px;
  margin-left: -11px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-soft);
  font-weight: 600; font-size: 13px; transition: background .15s, color .15s; }
.footer-col a:hover { color: var(--ink); background: var(--line); }
.footer-col a:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }
.footer-col a .fmg { font-size: 12px; color: var(--ink-faint); }
.footer-col a:hover .fmg { color: var(--hue, var(--hub)); }
[data-theme="dark"] .footer-col a:hover .fmg { color: var(--hue2, var(--hub-2)); }

/* ============================================================
   APARÊNCIA (accent · V1) — portado 1:1 de prototype-v2/aparencia-paleta.html.
   A prévia consome os primitivos Aurora reais (.btn.btn-primary/.chip.tier/.appmark/.meter) keyados em
   var(--hue,var(--hue, var(--hub)))/var(--hue2,var(--hue2, var(--hub-2))). O gate AA (claro+escuro) tem 3 vereditos; reprovado
   bloqueia o Save. Accent × tema são ORTOGONAIS.
   ============================================================ */
.settings-grid { display: grid; grid-template-columns: 1fr 400px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }

.ap-form { display: contents; }

.fblock { padding: 20px 22px; border-top: 1px solid var(--line); }
.fblock:first-of-type { border-top: none; }
.fblock .fh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.fblock .fh h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.fblock .desc { color: var(--ink-soft); font-size: 12.8px; margin: 2px 0 14px; line-height: 1.5; max-width: 62ch; }
.fblock .desc b { color: var(--ink); font-weight: 600; }

/* ===== Tela de boas-vindas (WelcomePicker) — slider da DURAÇÃO no look Aurora + largura do seletor de CENA =====
   Proto aprovado: docs/prototypes/login-aurora/proto-welcome-slider.html. O <input type=range> é o range no cânone
   da casa (accent-aware via --hue/--hub) — NÃO é <select> nativo, então não fere a regra do AuroraSelect. */
.welcomerow { max-width: 360px; }   /* mesma régua confortável do .langrow (não estica o painel) */
.dwellslider { padding: 2px 2px 0; max-width: 480px; }
.dwellslider .valrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dwellslider .valemoji { font-size: 22px; line-height: 1; color: var(--hue, var(--hub)); display: inline-flex; }
[data-theme="dark"] .dwellslider .valemoji { color: var(--hue2, var(--hub-2)); }
.dwellslider .valname { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.dwellslider .valtime { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line-2); padding: 4px 11px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dwellslider .dwellrange { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); outline: none; margin: 6px 0 4px; cursor: pointer; }
.dwellslider .dwellrange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--hue2, var(--hub-2)); box-shadow: 0 3px 10px var(--hue-soft, var(--hub-soft)); cursor: pointer; transition: transform .1s; }
.dwellslider .dwellrange::-webkit-slider-thumb:hover { transform: scale(1.12); }
.dwellslider .dwellrange::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--hue2, var(--hub-2)); box-shadow: 0 3px 10px var(--hue-soft, var(--hub-soft)); cursor: pointer; }
.dwellslider .dwellrange:focus-visible { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 4px; }
.dwellslider .ticks { display: flex; justify-content: space-between; margin-top: 8px; gap: 4px; }
.dwellslider .tick { flex: 1; min-width: 0; background: none; border: none; padding: 4px 2px; font: inherit; font-size: 11px; line-height: 1.3; color: var(--ink-faint); text-align: center; cursor: pointer; border-radius: var(--r-sm); transition: color .15s; }
/* Ícone de LINHA (HubIcon, herda currentColor) — cor segue a do tick: apagado quando inativo, acento quando .on. */
.dwellslider .tick .e { display: block; font-size: 16px; line-height: 1; margin-bottom: 3px; color: var(--ink-soft); transition: color .15s; }
.dwellslider .tick.on { color: var(--hue, var(--hub)); font-weight: 700; }
[data-theme="dark"] .dwellslider .tick.on { color: var(--hue2, var(--hub-2)); }
.dwellslider .tick.on .e { color: inherit; }
.dwellslider .tick:hover { color: var(--ink); }
.dwellslider .tick:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 1px; }
@media (max-width: 520px) { .dwellslider .tick { font-size: 10px; } .dwellslider .tick .e { font-size: 14px; } }
/* mobile estreito: 6 rótulos de texto colidiam ("Contemplativo"/"Um chá" grudavam) — esconde o TEXTO da parada
   e mantém só o ícone como âncora; o nome cheio da parada já aparece no rótulo AO VIVO acima do slider. */
@media (max-width: 430px) { .dwellslider .ticks { gap: 2px; } .dwellslider .tick { font-size: 0; padding: 6px 0; } .dwellslider .tick .e { font-size: 18px; margin-bottom: 0; } }

/* Despedida ao sair — badge "Novo" no cabeçalho do bloco (proto proto-despedida-config: gold, contorno fino). */
.fblock .fh .newbadge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold, #8a5804); border: 1px solid currentColor; border-radius: var(--r-sm); padding: 1px 6px; line-height: 1.5; }
[data-theme="dark"] .fblock .fh .newbadge { color: #F6B84B; }

/* Paradas BLOQUEADAS da despedida (idx > teto "só encurta"): visíveis mas apagadas e não-clicáveis — o glifo vira um
   cadeado. O teto sobe se a pessoa alongar a tela de boas-vindas (a entrada libera as paradas maiores da despedida). */
.dwellslider .tick.locked { color: var(--ink-faint); opacity: .5; cursor: not-allowed; }
.dwellslider .tick.locked:hover { color: var(--ink-faint); }
.dwellslider .tick.locked .e { color: var(--ink-faint); }

/* Nota ✦ da despedida ("sempre aparece · mesma cena · só encurtar") — discreta, abaixo das paradas. */
.dwellslider .exitnote { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }

.rtag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: var(--r-pill); }
.rtag.admin { background: rgba(230,146,11,.16); color: #8a5804; }
[data-theme="dark"] .rtag.admin { background: rgba(230,146,11,.16); color: #F6B84B; }
.rtag.user  { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .rtag.user { color: var(--hue2, var(--hub-2)); }

.swatches { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 26px; }
.sw { width: 44px; height: 44px; border-radius: 13px; cursor: pointer; position: relative; border: 2px solid transparent; transition: transform .14s, border-color .14s; box-shadow: var(--shadow-sm); padding: 0; }
.sw:hover { transform: translateY(-2px); }
.sw.on { border-color: var(--ink); }
[data-theme="dark"] .sw.on { border-color: #fff; }
.sw:focus-visible { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 3px; }
.sw.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.sw .nm { position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 600; color: var(--ink-faint); opacity: 0; transition: opacity .14s; pointer-events: none; }
.sw:hover .nm, .sw.on .nm, .sw:focus-visible .nm { opacity: 1; }

.hexrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* seletor de idioma (AuroraSelect Field) — largura confortável, não estica o painel inteiro */
.langrow { max-width: 320px; }
.colorpick { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; padding: 3px; flex: none; }
.colorpick:focus-visible { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 2px; }
.hexrow .fld { font: inherit; font-size: 14.5px; padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); transition: border-color .16s, box-shadow .16s; width: 132px; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.hexrow .fld:focus { outline: none; border-color: var(--hue, var(--hub)); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); background: var(--surface); }

.aa-detail { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.aa-cell { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; padding: 9px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); flex: 1 1 220px; min-width: 0; }
.aa-cell .swi { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.aa-cell .txt { min-width: 0; }
.aa-cell .txt .lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.aa-cell .txt .ver { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.aa-cell .txt .ver .ratio { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.aa-cell .txt .ver .v { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.aa-cell .txt .ver .v .ic { font-size: 11px; }
.aa-cell .txt .ver .v.ok  { color: #0b7a4b; }
[data-theme="dark"] .aa-cell .txt .ver .v.ok  { color: var(--ok); }
.aa-cell .txt .ver .v.adj { color: #8a5804; }
[data-theme="dark"] .aa-cell .txt .ver .v.adj { color: #F6B84B; }
.aa-cell .txt .ver .v.bad { color: var(--danger); }
.aa-cell .adjnote { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
.aa-cell .adjnote b { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 700; }

.aa-summary { display: inline-flex; align-items: center; gap: 8px; font-size: 12.8px; font-weight: 700; padding: 7px 13px; border-radius: var(--r-pill); }
.aa-summary .ic { font-size: 13px; line-height: 1; }
.aa-summary.ok  { background: rgba(15,169,104,.14); color: #0b7a4b; }
[data-theme="dark"] .aa-summary.ok  { color: var(--ok); }
.aa-summary.adj { background: rgba(230,146,11,.16); color: #8a5804; }
[data-theme="dark"] .aa-summary.adj { color: #F6B84B; }
.aa-summary.bad { background: rgba(239,69,96,.14); color: var(--danger); }

.demo3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
@media (max-width: 620px) { .demo3 { grid-template-columns: 1fr; } }
.demo-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: var(--surface-2); cursor: pointer; transition: border-color .14s, transform .14s; text-align: left; font: inherit; color: var(--ink); display: block; width: 100%; }
.demo-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.demo-card:focus-visible { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 2px; }
.demo-card .top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.demo-card .chip-sw { width: 26px; height: 26px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.demo-card .hx { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 600; }
.demo-card .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.demo-card .st .ic { font-size: 12px; }
.demo-card .st.ok  { color: #0b7a4b; }
[data-theme="dark"] .demo-card .st.ok  { color: var(--ok); }
.demo-card .st.adj { color: #8a5804; }
[data-theme="dark"] .demo-card .st.adj { color: #F6B84B; }
.demo-card .st.bad { color: var(--danger); }
.demo-card .exp { font-size: 11.5px; color: var(--ink-faint); margin-top: 7px; line-height: 1.45; }

.switchrow { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.switchrow .txt { flex: 1; min-width: 0; }
.switchrow .txt b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14px; }
.switchrow .txt p { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.switch { width: 46px; height: 27px; border-radius: var(--r-pill); background: var(--line-2); position: relative; cursor: pointer; transition: background .18s; flex: none; border: none; }
.switch:focus-visible { outline: 2.5px solid var(--hue, var(--hub)); outline-offset: 3px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s; }
.switch.on { background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); }
.switch.on::after { transform: translateX(19px); }

.locknote { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-soft); }
.locknote .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: var(--line); color: var(--ink-faint); }
.locknote b { color: var(--ink); font-weight: 600; }

.ap-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-actions .note { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.ap-actions .note.blocked { color: var(--danger); font-weight: 600; }
.ap-actions .btn.is-disabled { pointer-events: none; background: var(--line-2); color: var(--ink-faint); box-shadow: none; }

.preview { position: sticky; top: 26px; }
.prev-card { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); border: 1px solid var(--line); overflow: hidden; }
.prev-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.prev-head .swatch-dot { width: 14px; height: 14px; border-radius: 5px; background: linear-gradient(135deg,var(--hue,var(--hue, var(--hub))),var(--hue2,var(--hue2, var(--hub-2)))); }
.prev-head .grow { margin-left: auto; }
.prev-head .themetag { font-size: 10px; letter-spacing: .04em; color: var(--ink-faint); background: var(--surface-2); padding: 3px 9px; border-radius: var(--r-pill); text-transform: none; font-weight: 600; }
.prev-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.prev-block .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 9px; }
.p-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prev-appmark { position: relative; width: 54px; height: 54px; flex: none; }
.prev-appmark svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.prev-appmark .ring-track { fill: none; stroke: var(--line-2); stroke-width: 4; }
.prev-appmark .ring-val { fill: none; stroke: var(--hue, var(--hub)); stroke-width: 4; stroke-linecap: round; transition: stroke .2s; }
.prev-appmark .glyph { position: absolute; inset: 7px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; background: linear-gradient(140deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 6px 16px -4px var(--hue, var(--hub)); }
.prev-ring-txt b { font-family: "Bricolage Grotesque", sans-serif; font-size: 14.5px; font-weight: 800; }
.prev-ring-txt span { display: block; color: var(--ink-faint); font-size: 12px; }
.p-link { font-size: 13.5px; font-weight: 600; color: var(--hue, var(--hub)); text-decoration: none; border-bottom: 1.5px solid var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .p-link { color: var(--hue2, var(--hub-2)); }
.p-nav { display: flex; gap: 5px; }
.p-nav a { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); color: var(--ink-soft); text-decoration: none; }
.p-nav a.on { color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .p-nav a.on { color: var(--hue2, var(--hub-2)); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================
   QUADROS — app Kanban NATIVO do hub (O2: lista + board, sem drag)
   Composição sobre tokens Aurora; hue = índigo do hub (--quadros).
   Portado de prototype-v2/quadros-board.html com prefixo .q-.
   ============================================================ */

/* ---- TELA 1 · LISTA DE QUADROS ---- */
.q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 900px) { .q-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .q-grid { grid-template-columns: 1fr; } }

.q-board-card {
  position: relative; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column; text-align: left;
  font: inherit; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.q-board-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.q-board-card .q-strip { height: 7px; background: linear-gradient(90deg, var(--quadros), var(--quadros-2)); }
.q-board-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.q-board-body h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.q-board-desc { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; flex: 1; }
.q-board-meta { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--ink-faint); }
.q-board-meta .m { display: inline-flex; align-items: center; gap: 6px; }
.q-board-meta .g { color: var(--ink-faint); flex: none; }
/* stack de avatares de membros no card da lista (fiel a quadros-list-v2.html .stack/.fa/.more) */
.q-stack { display: flex; margin-top: 14px; }
.q-stack .q-fa { width: 26px; height: 26px; border-radius: var(--r-pill); margin-left: -8px;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px;
  border: 2px solid var(--surface); background: linear-gradient(135deg, var(--quadros), var(--quadros-2)); }
.q-stack .q-fa:first-child { margin-left: 0; }
.q-stack .q-fa.more { background: var(--line); color: var(--ink-soft); }

.q-board-new { border-style: dashed; border-color: var(--line-2); background: var(--surface-2);
  align-items: center; justify-content: center; text-align: center; min-height: 168px;
  display: flex; flex-direction: column; gap: 8px; }
.q-board-new:hover { border-color: var(--quadros); color: var(--quadros); }
[data-theme="dark"] .q-board-new:hover { color: var(--quadros-2); }
.q-board-new .plus { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--quadros-soft); color: var(--quadros); font-size: 22px; font-weight: 700; }
[data-theme="dark"] .q-board-new .plus { color: var(--quadros-2); }
.q-board-new .lab { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; }
.q-board-new .sub { font-size: 12.5px; color: var(--ink-faint); }

.q-empty { text-align: center; padding: 60px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px dashed var(--line-2); margin-top: 20px; }
.q-empty-ic { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--quadros-soft); color: var(--quadros); font-size: 28px; }
[data-theme="dark"] .q-empty-ic { color: var(--quadros-2); }
.q-empty h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 21px; font-weight: 700; }
.q-empty p { color: var(--ink-soft); font-size: 14.5px; margin: 6px auto 20px; max-width: 42ch; }

/* ---- TELA 2 · O BOARD ---- */
.q-board-bar { position: relative; z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(16px,4vw,32px); background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line); min-width: 0; max-width: 100%; }
/* filhos flex (.q-back, .q-bt, .bb-right) podem encolher abaixo do min-content quando falta largura (≤820px) */
.q-board-bar > * { min-width: 0; }
/* Cluster de ações da barra: quebra em linhas (alinhado à direita) em vez de furar o body na horizontal.
   Em desktop há largura → tudo cabe em 1 linha (comportamento atual preservado). Fix responsivo board ≤820px. */
.bb-right { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.q-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft);
  text-decoration: none; font-weight: 600; font-size: 13.5px; padding: 6px 10px; border-radius: var(--r-pill); }
.q-back:hover { background: var(--line); color: var(--ink); }
.q-bt { min-width: 0; }
.q-bt h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.q-dot { width: 12px; height: 12px; border-radius: 4px; flex: none;
  background: linear-gradient(135deg, var(--bc, var(--quadros)), var(--bc2, var(--quadros-2))); }
.q-sub { font-size: 12.5px; color: var(--ink-faint); }

.q-board-scroll { overflow-x: auto; overflow-y: hidden; padding: 20px clamp(16px,4vw,32px) 32px;
  scroll-snap-type: x proximity; }
.q-columns { display: flex; gap: 16px; align-items: flex-start; min-height: 55vh; }

/* ---- Swimlanes (agrupar o board por campo) — região de LAYOUT ---- */
/* Quando agrupado, o scroller empilha raias na VERTICAL; cada raia tem seu próprio strip horizontal de colunas. */
.q-board-scroll.grouped { display: flex; flex-direction: column; gap: 18px; overflow-x: hidden; }
.q-board-scroll.grouped .q-columns { min-height: 0; }
.q-lane { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  overflow: hidden; }
.q-lane-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 16px; background: transparent; border: 0; cursor: pointer; font: inherit;
  border-bottom: 1px solid var(--line); transition: background .12s; }
.q-lane-head:hover { background: var(--line); }
.q-lane.collapsed .q-lane-head { border-bottom: 0; }
.q-lane-caret { color: var(--ink-faint); font-size: 12px; width: 14px; flex: none; }
.q-lane-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14.5px;
  letter-spacing: -.005em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-lane-count { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--line);
  padding: 1px 9px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; margin-left: auto; flex: none; }
.q-lane .q-columns { padding: 14px 16px; overflow-x: auto; }
.q-lane .q-column { max-height: none; }
.q-lane-head:focus-visible { outline: 2.5px solid var(--quadros); outline-offset: -2px; }

.q-column { flex: 0 0 300px; width: 300px; scroll-snap-align: start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.q-col-head { display: flex; align-items: center; gap: 9px; padding: 13px 14px 11px; }
.q-cname { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14.5px;
  letter-spacing: -.005em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: text; }
.q-cname:hover { color: var(--quadros); }
[data-theme="dark"] .q-cname:hover { color: var(--quadros-2); }
.q-col-rename { flex: 1; min-width: 0; font-size: 14px; padding: 4px 8px; }
.q-count { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--line);
  padding: 1px 9px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }

.q-col-body { overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 9px;
  flex: 1; min-height: 40px; }

/* touch-action:none = em TOUCH o gesto vira drag (pointer events) e NÃO rolagem da página. cursor:grab =
   affordance de que o card é arrastável (grabbing enquanto arrasta). Ver wwwroot/hub-board-dnd.js. */
.q-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px 10px; box-shadow: var(--shadow-sm); cursor: grab; touch-action: none;
  transition: transform .14s, box-shadow .14s, border-color .14s; }
.q-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.q-card:active { cursor: grabbing; }
.q-card:focus-visible { outline: 2.5px solid var(--quadros); outline-offset: 2px; }
/* estado DRAG (mesmo idioma do menu-editor: esmaecido + tracejado) — o original fica no lugar, esmaecido. */
.q-card.dragging { opacity: .4; border-style: dashed; border-color: var(--quadros); box-shadow: none;
  cursor: grabbing; }
/* CLONE flutuante que segue o ponteiro (pointer events não têm ghost nativo). Levemente inclinado + sombra. */
.q-card-ghost { opacity: .95; box-shadow: var(--shadow-lg); border-color: var(--quadros);
  transform: rotate(1.5deg) scale(1.02); cursor: grabbing; }
/* zona de DROP na coluna alvo + a linha de inserção */
.q-col-body.drop-hot { outline: 2px dashed var(--quadros); outline-offset: -6px; border-radius: var(--r-sm);
  background: var(--quadros-soft); }
.q-drop-line { height: 3px; border-radius: 3px; background: var(--quadros); margin: -2px 2px;
  box-shadow: 0 0 0 3px var(--quadros-soft); }
@media (prefers-reduced-motion: reduce) { .q-card-ghost { transform: none; } }

.q-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
/* etiqueta = COR + TEXTO (nunca só cor · WCAG 1.4.1) */
.q-lbl { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  letter-spacing: .01em; display: inline-flex; align-items: center; gap: 4px; }
.q-lbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.q-lbl.l-blue { background: rgba(59,130,246,.16); color: #2563EB; }
.q-lbl.l-green { background: rgba(15,169,104,.16); color: #0B7A4B; }
.q-lbl.l-amber { background: rgba(230,146,11,.18); color: #B4700A; }
.q-lbl.l-pink { background: rgba(236,72,153,.16); color: #BE2E7E; }
.q-lbl.l-purple { background: rgba(139,92,246,.16); color: #7C4DDB; }
/* Chip de vínculo cross-app (referência a artefato de outro app). Clicável (âncora data-sso) → abre o app-dono
   pelo overlay SSO. Sem o ::before-dot do label; ganha o glyph do tipo + a seta de "abrir". Herda a superfície neutra
   do chip pra distinguir de etiqueta colorida. */
.q-ref-chip { background: var(--surface-2, rgba(120,120,140,.10)); color: var(--ink); text-decoration: none;
  border: 1px solid var(--hairline); max-width: 100%; }
.q-ref-chip::before { display: none; }
.q-ref-chip .q-ref-ic { opacity: .8; font-size: 11px; flex: none; }
.q-ref-chip .q-ref-open { opacity: .55; font-size: 10px; margin-left: 2px; flex: none; }
a.q-ref-chip { cursor: pointer; transition: border-color .12s, background .12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.q-ref-chip:hover { border-color: var(--quadros, #6b8cff); background: var(--surface-3, rgba(120,120,140,.16)); }
a.q-ref-chip:hover .q-ref-open { opacity: 1; }
a.q-ref-chip:focus-visible { outline: 2px solid var(--quadros, #6b8cff); outline-offset: 2px; }
[data-theme="dark"] .q-lbl.l-blue { color: #7DB0FF; } [data-theme="dark"] .q-lbl.l-green { color: #34D399; }
[data-theme="dark"] .q-lbl.l-amber { color: #F6B84B; } [data-theme="dark"] .q-lbl.l-pink { color: #F784C0; }
[data-theme="dark"] .q-lbl.l-purple { color: #B99BF7; }

.q-title { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink); }
.q-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.q-foot .grow { margin-left: auto; }
/* prazo — ícone + texto + cor (não só vermelho · 1.4.1) */
.q-due { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-faint); padding: 2px 8px 2px 6px; border-radius: var(--r-pill); background: var(--line); }
.q-due .ic { font-size: 11px; }
.q-due.overdue { color: var(--danger); background: rgba(239,69,96,.15); font-weight: 700; }
.q-assignee { width: 24px; height: 24px; border-radius: var(--r-pill); flex: none; display: grid;
  place-items: center; color: #fff; font-weight: 700; font-size: 10.5px;
  background: linear-gradient(135deg, var(--quadros), var(--quadros-2)); }
/* placeholder "sem responsável" — reserva o slot no rodapé do card (fiel a .qc-assignee.none) */
.q-assignee.none { background: var(--surface); border: 1.5px dashed var(--line-2); color: var(--ink-faint);
  font-weight: 500; font-size: 13px; }

/* Presença AO VIVO por-board (F2 · v2 · "+N" + "movendo…") — avatares de quem tem o quadro aberto num circuito vivo,
   distinto do q-member-stack (membros estáticos). Molde do .chat-presence. */
.q-presence { display: inline-flex; align-items: center; gap: 8px; }
.q-presence .q-pr-avatars { display: inline-flex; align-items: center; }
.q-pr-ava { width: 24px; height: 24px; border-radius: var(--r-pill); flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 10.5px; margin-left: -8px; border: 2px solid var(--surface);
  background: linear-gradient(135deg, var(--quadros), var(--quadros-2)); }
.q-pr-ava:first-child { margin-left: 0; }
.q-pr-ava.more { background: var(--surface-2); color: var(--ink-soft); }
.q-pr-ava.idle { opacity: .5; filter: grayscale(55%); }
.q-pr-moving { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-faint); font-style: italic; }
.q-pr-moving .q-pr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--quadros);
  animation: q-pr-pulse 1.1s ease-in-out infinite; }
@keyframes q-pr-pulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.q-add-card { margin: 4px 10px 10px; border: none; background: transparent; color: var(--ink-soft);
  font: inherit; font-weight: 600; font-size: 13px; padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; text-align: left; display: flex; align-items: center; gap: 7px; transition: all .14s; }
.q-add-card:hover { background: var(--line); color: var(--ink); }
.q-add-card .p { font-size: 16px; line-height: 1; color: var(--ink-faint); }
.q-add-card-form { margin: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.q-add-card-actions { display: flex; gap: 8px; }

.q-add-col { flex: 0 0 300px; width: 300px; align-self: flex-start; scroll-snap-align: start;
  border: 1px dashed var(--line-2); border-radius: var(--r-md); background: transparent;
  color: var(--ink-soft); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  padding: 16px; display: flex; align-items: center; gap: 9px; transition: all .16s; }
.q-add-col:hover { border-color: var(--quadros); color: var(--quadros); background: var(--quadros-soft); }
[data-theme="dark"] .q-add-col:hover { color: var(--quadros-2); }
.q-add-col .p { font-size: 18px; }
.q-add-col-form { flex: 0 0 300px; width: 300px; align-self: flex-start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; }

/* ---- TELA 3 · DETALHE DO CARD (drawer lateral direito · O4) ---- */
.q-drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(14,14,25,.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.q-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(460px, 100vw);
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: q-drawer-in .28s cubic-bezier(.2,.8,.3,1); }
@keyframes q-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .q-drawer { animation: none; } }
.q-dr-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line); }
.q-dr-col-in { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }
.q-dr-col-in .d { width: 8px; height: 8px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--quadros), var(--quadros-2)); }
.q-dr-close { margin-left: auto; border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft);
  width: 34px; height: 34px; border-radius: var(--r-pill); font-size: 16px; cursor: pointer; flex: none;
  display: grid; place-items: center; transition: all .16s; }
.q-dr-close:hover { color: var(--ink); border-color: var(--ink-faint); }
.q-dr-body { overflow-y: auto; padding: 20px 22px 30px; display: flex; flex-direction: column; gap: 22px; }
.q-dr-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 21px;
  letter-spacing: -.01em; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 8px 11px; width: 100%; }
.q-dr-title:focus { outline: none; border-color: var(--quadros); box-shadow: 0 0 0 3px var(--quadros-soft); }
.q-dr-field .q-flab { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.q-dr-labels { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.q-dr-labels .q-lbl { font-size: 12px; padding: 4px 11px; }
.q-lbl .x { margin-left: 2px; opacity: .7; cursor: pointer; font-weight: 700; background: none; border: none;
  color: inherit; font-size: 11px; padding: 0; line-height: 1; }
.q-lbl .x:hover { opacity: 1; }
.q-add-lbl { border: 1px dashed var(--line-2); background: transparent; color: var(--ink-soft);
  font: inherit; font-weight: 600; font-size: 12px; padding: 4px 11px; border-radius: var(--r-pill);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.q-add-lbl:hover { border-color: var(--quadros); color: var(--quadros); }
[data-theme="dark"] .q-add-lbl:hover { color: var(--quadros-2); }
.q-lbl-add-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.q-dr-desc { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 14px; padding: 11px 13px; resize: vertical; min-height: 90px;
  line-height: 1.55; }
.q-dr-desc:focus { outline: none; border-color: var(--quadros); box-shadow: 0 0 0 3px var(--quadros-soft); }
.q-dr-desc::placeholder { color: var(--ink-faint); }
.q-dr-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.q-dr-sel { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; padding: 9px 12px; cursor: pointer; }
.q-dr-sel:focus { outline: none; border-color: var(--quadros); box-shadow: 0 0 0 3px var(--quadros-soft); }
.q-date-flag { margin-top: 8px; }
.q-dr-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); }
.q-dr-foot .q-del { margin-left: auto; color: var(--danger); background: transparent; border: none; font: inherit;
  font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 8px 12px; border-radius: var(--r-pill); }
.q-dr-foot .q-del:hover { background: rgba(239,69,96,.12); }

/* MOBILE (≤560px): colunas viram scroll-x com snap; cards full-width; drawer full-screen */
@media (max-width: 560px) {
  .q-column, .q-add-col, .q-add-col-form { flex: 0 0 84vw; width: 84vw; scroll-snap-align: center; }
  .q-columns { scroll-snap-type: x mandatory; }
  .q-board-scroll { scroll-snap-type: x mandatory; padding-bottom: 24px; }
  /* Full-screen ancorando os DOIS lados (left:0 + right:0) em vez de width:100vw. 100vw inclui a
     gutter da barra de rolagem (o .q-dr-body abre overflow-y:auto) → em plataformas que reservam
     scrollbar o drawer fixed estouraria à direita no mobile. left:0/right:0 dá exatamente o viewport
     de layout, sem depender do 100vw. */
  .q-drawer { left: 0; right: 0; width: auto; }
  .q-dr-2col { grid-template-columns: 1fr; }
}

/* ============================================================
   QUADROS · ONDA 1 — filtros/busca, WIP, capa/checklist do card,
   drawer (checklists + timeline + @menção), template picker.
   Composição sobre Aurora; hue = --quadros. Portado de
   prototype-v2/quadros-{board,card-drawer,list}-v2.html com prefixo .q-.
   ============================================================ */

/* ---- BARRA DE FILTROS + BUSCA ---- */
.q-filter-bar { position: sticky; top: 0; z-index: 29; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 11px clamp(16px,4vw,32px); background: var(--surface); border-bottom: 1px solid var(--line); }
.q-fsearch { position: relative; flex: 0 1 260px; min-width: 170px; }
.q-fsearch .field { width: 100%; padding-left: 34px; padding-right: 30px; border-radius: var(--r-pill); }
.q-fsearch .mag { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint);
  font-size: 13px; pointer-events: none; }
.q-fsearch .clr { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: none;
  background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 12px; width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center; }
.q-fsearch .clr:hover { color: var(--ink); background: var(--line); }

.q-fdrop { position: relative; }
.q-fchip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: 13px;
  padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--ink-soft); cursor: pointer; transition: all .14s; }
.q-fchip:hover { color: var(--ink); border-color: var(--ink-faint); }
.q-fchip .ic { color: var(--ink-faint); font-size: 12px; }
.q-fchip.active { border-color: var(--quadros); background: var(--quadros-soft); color: var(--quadros); }
[data-theme="dark"] .q-fchip.active { color: var(--quadros-2); }
.q-fchip.active .ic { color: inherit; }
.q-fchip .cnt { font-size: 11px; font-weight: 800; background: var(--quadros); color: #fff;
  border-radius: var(--r-pill); padding: 0 6px; min-width: 17px; text-align: center; }

.q-fmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 6px; }
.q-fm-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13.5px; color: var(--ink); background: none; border: none; width: 100%;
  text-align: left; font-family: inherit; transition: background .12s; }
.q-fm-item:hover { background: var(--surface-2); }
.q-fm-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); flex: none;
  display: grid; place-items: center; color: #fff; font-size: 11px; }
.q-fm-item.sel .q-fm-check { background: var(--quadros); border-color: var(--quadros); }
.q-fm-swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.q-fm-sep { height: 1px; background: var(--line); margin: 4px 2px; }

.q-fclear { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 13px;
  color: var(--danger); background: transparent; border: none; cursor: pointer; padding: 8px 10px; border-radius: var(--r-pill); }
.q-fclear:hover { background: rgba(239,69,96,.1); }
.q-fresult { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }

/* Visões salvas (app.saved-views · Pro) — botão + painel dropdown ancorado no toolbar. Hue --quadros. */
.q-savedviews { position: relative; z-index: 65; }
.q-savedviews .btn.is-locked { opacity: .82; cursor: pointer; }
.q-savedviews .q-sv-cnt { font-size: 11px; font-weight: 800; color: #fff; background: var(--quadros); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.q-savedviews .q-sv-pill { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(140deg, var(--quadros), var(--quadros-2)); padding: 1px 6px; border-radius: 999px; margin-left: 5px; }
.q-sv-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: 320px; max-width: 84vw; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.q-sv-head { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.q-sv-empty { font-size: 13px; color: var(--ink-soft); padding: 6px 2px; }
.q-sv-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.q-sv-item { display: flex; align-items: center; gap: 6px; }
.q-sv-apply { flex: 1; min-width: 0; text-align: left; border: 1px solid var(--line-2); background: transparent; border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; transition: all .14s; }
.q-sv-apply:hover { border-color: var(--quadros); background: var(--quadros-soft, rgba(0,0,0,.02)); }
.q-sv-apply .q-sv-nm { font-size: 13px; font-weight: 700; color: var(--ink); }
.q-sv-apply .q-sv-meta { font-size: 11px; color: var(--ink-soft); }
.q-sv-del { flex: none; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 12px; padding: 6px 8px; border-radius: 8px; }
.q-sv-del:hover { color: var(--danger); background: rgba(239,69,96,.1); }
.q-sv-save { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.q-sv-save .field { flex: 1; min-width: 0; }
.q-sv-hint { font-size: 11px; color: var(--ink-faint); }
.q-fresult b { color: var(--ink); font-weight: 700; }

/* ---- WIP badge + aviso ---- */
.q-column.wip-over { border-color: rgba(230,146,11,.5); box-shadow: 0 0 0 1px rgba(230,146,11,.4), var(--shadow-sm); }
.q-count.wip .lim { opacity: .6; }
.q-count.wip.over { background: rgba(230,146,11,.18); color: #B4700A; }
.q-count.wip.near { background: rgba(230,146,11,.1); color: #B4700A; }
[data-theme="dark"] .q-count.wip.over, [data-theme="dark"] .q-count.wip.near { color: #F6B84B; }
.q-wip-note { margin: 0 12px 6px; font-size: 11.5px; font-weight: 600; color: #B4700A;
  background: rgba(230,146,11,.1); border-radius: var(--r-sm); padding: 6px 9px; display: flex; align-items: center; gap: 6px; }
[data-theme="dark"] .q-wip-note { color: #F6B84B; }
.q-col-menu { border: none; background: transparent; color: var(--ink-faint); cursor: pointer; width: 26px;
  height: 26px; border-radius: 7px; font-size: 15px; display: grid; place-items: center; flex: none; }
.q-col-menu:hover { background: var(--line); color: var(--ink); }
.q-col-head .grow { margin-left: auto; }
.q-wip-form { margin: 0 12px 8px; display: flex; align-items: center; gap: 8px; }
.q-wip-form .field { width: 90px; }
.q-wip-form .hint { font-size: 11.5px; color: var(--ink-faint); }

/* ---- estados vazios (coluna / filtro / board) ---- */
.q-col-empty { text-align: center; color: var(--ink-faint); font-size: 12.5px; padding: 18px 12px;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm); margin: 4px 2px; }
.q-board-empty { margin: 40px auto; max-width: 460px; text-align: center; padding: 48px 28px;
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.q-board-empty .be-ic { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 16px; display: grid;
  place-items: center; background: var(--quadros-soft); color: var(--quadros); font-size: 28px; }
[data-theme="dark"] .q-board-empty .be-ic { color: var(--quadros-2); }
.q-board-empty h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 700; }
.q-board-empty p { color: var(--ink-soft); font-size: 14px; margin: 6px auto 4px; max-width: 40ch; }
.q-no-match { margin: 30px auto; max-width: 420px; text-align: center; padding: 36px 24px; color: var(--ink-soft); }
.q-no-match .nm-ic { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 14px; display: grid;
  place-items: center; background: var(--line); color: var(--ink-faint); font-size: 24px; }
.q-no-match h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 700; color: var(--ink); }
.q-no-match p { font-size: 13.5px; margin: 6px 0 16px; }

/* ---- capa de etiqueta + mini-barra de checklist NO CARD ---- */
.q-card { overflow: hidden; padding: 0; }   /* onda 1: capa encosta na borda; corpo ganha padding próprio */
.q-cover { height: 6px; display: flex; }
.q-cover span { flex: 1; }
.q-cv-blue{background:#3B82F6}.q-cv-green{background:#0FA968}.q-cv-amber{background:#E6920B}
.q-cv-pink{background:#EC4899}.q-cv-purple{background:#8B5CF6}
.q-cbody { padding: 11px 12px 10px; }
.q-check { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.q-check .ck-ic { font-size: 12px; color: var(--ink-faint); flex: none; }
.q-check .ck-bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.q-check .ck-bar i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--quadros), var(--quadros-2)); transition: width .4s; }
.q-check .ck-num { font-size: 11px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }
.q-check.done .ck-bar i { background: linear-gradient(90deg, var(--ok), #34D399); }
.q-check.done .ck-num, .q-check.done .ck-ic { color: var(--ok); }
.q-due.soon { color: #B4700A; background: rgba(230,146,11,.16); }
[data-theme="dark"] .q-due.soon { color: #F6B84B; }

/* ---- DRAWER · checklists ---- */
.q-dr-progress { display: flex; align-items: center; gap: 10px; }
.q-dr-progress .p-bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.q-dr-progress .p-bar i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--quadros), var(--quadros-2)); transition: width .4s; }
.q-dr-progress.done .p-bar i { background: linear-gradient(90deg, var(--ok), #34D399); }
.q-dr-progress .p-num { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }
.q-dr-progress.done .p-num { color: var(--ok); }
.q-flab .grow { margin-left: auto; }
.q-checklist { margin-top: 14px; }
.q-cl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.q-cl-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.q-cl-pct { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.q-cl-del { margin-left: auto; border: none; background: transparent; color: var(--ink-faint); cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 6px; }
.q-cl-del:hover { color: var(--danger); background: rgba(239,69,96,.1); }
.q-cl-mini { height: 5px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin-bottom: 8px; }
.q-cl-mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--quadros), var(--quadros-2)); transition: width .3s; }
.q-cl-items { display: flex; flex-direction: column; gap: 2px; }
.q-cl-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px; border-radius: var(--r-sm);
  cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit; transition: background .12s; }
.q-cl-item:hover { background: var(--surface-2); }
.q-cl-box { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line-2); flex: none;
  margin-top: 1px; display: grid; place-items: center; color: #fff; font-size: 12px; transition: all .14s; }
.q-cl-item.checked .q-cl-box { background: var(--ok); border-color: var(--ok); }
.q-cl-txt { font-size: 14px; color: var(--ink); line-height: 1.4; }
.q-cl-item.checked .q-cl-txt { color: var(--ink-faint); text-decoration: line-through; }
.q-cl-empty { font-size: 12.5px; color: var(--ink-faint); padding: 4px 2px 8px; }
.q-cl-add { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.q-cl-add .field { flex: 1; border-style: dashed; }
.q-add-checklist { border: 1px dashed var(--line-2); background: transparent; color: var(--ink-soft); font: inherit;
  font-weight: 600; font-size: 12.5px; padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.q-add-checklist:hover { border-color: var(--quadros); color: var(--quadros); }
[data-theme="dark"] .q-add-checklist:hover { color: var(--quadros-2); }

/* ---- DRAWER · atividade / timeline / @menção ---- */
.q-tl-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.q-tl-tab { font: inherit; font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: transparent; color: var(--ink-faint); cursor: pointer; transition: all .14s; }
.q-tl-tab:hover { color: var(--ink); background: var(--surface-2); }
.q-tl-tab.on { color: var(--quadros); background: var(--quadros-soft); }
[data-theme="dark"] .q-tl-tab.on { color: var(--quadros-2); }
.q-timeline { display: flex; flex-direction: column; gap: 2px; }
.q-tl-row { display: flex; gap: 11px; padding: 8px 0; }
.q-tl-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 12px; background: linear-gradient(135deg, var(--quadros), var(--quadros-2)); }
.q-tl-row.event .q-tl-ava { background: var(--line); color: var(--ink-faint); font-size: 13px; }
.q-tl-main { flex: 1; min-width: 0; }
.q-tl-line { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.q-tl-line b { color: var(--ink); font-weight: 700; }
.q-tl-when { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.q-tl-row.comment .q-tl-main { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 12px; }
.q-tl-who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.q-tl-who b { font-size: 13.5px; color: var(--ink); font-weight: 700; }
.q-tl-who .q-tl-when { margin: 0; }
.q-tl-text { font-size: 14px; color: var(--ink); line-height: 1.5; }
.q-mention { color: var(--quadros); font-weight: 700; background: var(--quadros-soft); padding: 0 5px; border-radius: 5px; }
[data-theme="dark"] .q-mention { color: var(--quadros-2); }
.q-tl-empty { text-align: center; color: var(--ink-faint); font-size: 12.5px; padding: 18px; }

.q-comment-box { display: flex; gap: 11px; margin-top: 14px; position: relative; }
.q-cb-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 12px; background: linear-gradient(135deg, var(--quadros), var(--quadros-2)); }
.q-cb-input { flex: 1; }
.q-cb-input textarea { width: 100%; min-height: 44px; }
.q-cb-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.q-cb-hint { font-size: 11.5px; color: var(--ink-faint); }
.q-mention-pop { position: absolute; z-index: 20; bottom: 100%; left: 41px; margin-bottom: 6px; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; }
.q-mp-head { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); padding: 4px 8px 6px; }
.q-mp-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13.5px; color: var(--ink); background: none; border: none; width: 100%;
  text-align: left; font-family: inherit; }
.q-mp-item:hover, .q-mp-item.active { background: var(--quadros-soft); }
.q-mp-ava { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 10px; background: linear-gradient(135deg, var(--quadros), var(--quadros-2)); }

/* ---- TEMPLATE PICKER (modal) ---- */
.q-modal-scrim { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px;
  background: rgba(14,14,25,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.q-modal { position: relative; width: min(720px, 100%); max-height: calc(100vh - 36px); overflow-y: auto;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
  animation: q-drawer-in .28s cubic-bezier(.2,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .q-modal { animation: none; } }
.q-modal-head { display: flex; align-items: flex-start; gap: 13px; padding: 22px 22px 14px; }
.q-mh-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff;
  font-size: 19px; background: linear-gradient(140deg, var(--quadros), var(--quadros-2)); box-shadow: 0 5px 14px -4px var(--quadros); }
.q-modal-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.q-modal-head p { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.q-mh-close { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; font-size: 16px; flex: none; }
.q-mh-close:hover { color: var(--ink); border-color: var(--ink-faint); }
.q-modal-body { padding: 0 22px 22px; }
.q-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .q-tpl-grid { grid-template-columns: 1fr; } }
.q-tpl { text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--surface-2); padding: 14px; display: flex; gap: 12px; align-items: flex-start;
  transition: all .16s; width: 100%; }
.q-tpl:hover { border-color: var(--quadros); background: var(--quadros-soft); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.q-tpl.sel { border-color: var(--quadros); background: var(--quadros-soft); box-shadow: 0 0 0 1px var(--quadros); }
.q-tpl-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff;
  font-size: 18px; background: linear-gradient(140deg, var(--quadros), var(--quadros-2)); }
.q-tpl.scratch .q-tpl-ic { background: var(--line); color: var(--ink-faint); }
.q-tpl-nm { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.q-tpl-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; display: block; }
.q-tpl-cols { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.q-tpl-col { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  padding: 2px 8px; border-radius: var(--r-pill); }
.q-preview-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.q-ph-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff;
  font-size: 18px; background: linear-gradient(140deg, var(--quadros), var(--quadros-2)); }
.q-ph-nm { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; }
.q-ph-sub { font-size: 12.5px; color: var(--ink-faint); }
.q-name-field { margin-bottom: 18px; }
.q-name-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.q-prev-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 10px; }
.q-prev-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.q-prev-col { flex: 0 0 130px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px; }
.q-pc-name { font-weight: 700; font-size: 12px; color: var(--ink); margin-bottom: 7px; display: flex; align-items: center; gap: 5px; }
.q-pc-name .wip { font-size: 9.5px; font-weight: 800; color: var(--ink-faint); background: var(--line); padding: 0 5px; border-radius: var(--r-pill); }
.q-pc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; height: 22px; margin-bottom: 6px; }
/* nota de contexto do template no preview (passo 2) — fiel a .prev-note do protótipo */
.q-prev-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 12px; display: flex; align-items: center; gap: 7px; }
.q-modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.q-modal-foot .grow { margin-left: auto; }
.q-new-paths { display: flex; gap: 8px; margin-top: 6px; }

/* ---- Painel de automações "quando→então" (modal) — mesmo cânone do picker de templates ---- */
.q-auto { width: min(640px, 100%); }
.q-auto-banner { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--error, #b42318);
  background: color-mix(in srgb, var(--error, #b42318) 8%, transparent); border: 1px solid color-mix(in srgb, var(--error, #b42318) 22%, transparent);
  border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 14px; }
/* upsell (free) */
.q-auto-upsell { text-align: center; padding: 22px 12px 8px; }
.q-auto-upsell .q-au-ic { font-size: 30px; line-height: 1; margin-bottom: 10px; color: var(--quadros); }
.q-auto-upsell h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.q-auto-upsell p { color: var(--ink-soft); font-size: 13.5px; max-width: 44ch; margin: 0 auto 16px; line-height: 1.5; }
/* barra + lista */
.q-auto-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.q-auto-toolbar .grow { margin-left: auto; }
.q-auto-count { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.q-auto-empty { text-align: center; padding: 26px 12px; color: var(--ink-soft); }
.q-auto-empty .q-ae-ic { font-size: 26px; color: var(--quadros); margin-bottom: 8px; }
.q-auto-empty p { font-size: 13.5px; margin-bottom: 12px; }
.q-auto-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.q-auto-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.q-auto-row.off { opacity: .6; }
.q-auto-row .q-ar-main { min-width: 0; flex: 1; }
.q-ar-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.q-ar-summary { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.q-ar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.q-ar-del { color: #fff; background: var(--error, #b42318); border-color: var(--error, #b42318); }
/* toggle liga/desliga (switch) */
.q-ar-toggle { width: 38px; height: 22px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: var(--line); position: relative; cursor: pointer; transition: background .15s, border-color .15s; padding: 0; }
.q-ar-toggle .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.q-ar-toggle.on { background: var(--quadros); border-color: var(--quadros); }
.q-ar-toggle.on .knob { transform: translateX(16px); }
/* reordenar (ordem de execução) — botões ▲▼ à esquerda da regra */
.q-auto-hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; }
.q-ar-order { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.q-ar-move { width: 22px; height: 16px; display: flex; align-items: center; justify-content: center;
  padding: 0; font-size: 9px; line-height: 1; color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 5px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.q-ar-move:hover:not(:disabled) { color: var(--quadros); border-color: var(--quadros); background: var(--surface-2); }
.q-ar-move:disabled { opacity: .35; cursor: default; }
/* log de execução visível */
.q-auto-log { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.q-al-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; background: none;
  border: none; cursor: pointer; color: var(--ink); font-weight: 700; font-size: 13px; border-radius: var(--r-sm); }
.q-al-head:hover { background: var(--surface-2); }
.q-al-head .grow { margin-left: auto; }
.q-al-ic { font-size: 14px; }
.q-al-chev { color: var(--ink-faint); font-size: 11px; }
.q-al-body { margin-top: 8px; }
.q-al-empty { font-size: 12.5px; color: var(--ink-soft); padding: 6px 4px; line-height: 1.4; }
.q-al-list { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.q-al-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.q-al-when { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-faint); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em; min-width: 56px; }
.q-al-what { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; min-width: 0; }
/* formulário */
.q-auto-form { display: flex; flex-direction: column; gap: 16px; }
.q-auto-step { display: flex; flex-direction: column; gap: 8px; }
.q-as-label { font-size: 12px; }
.q-as-kw { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--quadros); }
.q-as-kw.soft { color: var(--ink-faint); }
.q-as-opt { color: var(--ink-faint); font-size: 11px; }

/* ---- Gerar cards com IA (GenerateCardsPanel · aposta #2 v2) ---- */
.q-gen-input { display: flex; flex-direction: column; gap: 8px; }
.q-gen-input label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.q-gen-textarea { width: 100%; resize: vertical; min-height: 108px; line-height: 1.5; font: inherit; font-size: 14px; }
.q-gen-actions { display: flex; align-items: center; gap: 10px; }
.q-gen-actions .grow { margin-left: auto; }
.q-gen-hint { font-size: 12px; color: var(--ink-faint); line-height: 1.4; }
.q-gen-hint-block { margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-md, 12px);
  border: 1px solid var(--line); }
.q-gen-hint-block p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.q-gen-result { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.q-gen-rhead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.q-gen-count { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.q-gen-remaining { color: var(--ink-faint); font-weight: 600; }
.q-gen-empty { padding: 14px; text-align: center; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.q-gen-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.q-gen-card { display: flex; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md, 12px); align-items: flex-start; transition: opacity .15s, border-color .15s; }
.q-gen-card.q-gen-approved { border-color: var(--quadros); background: var(--quadros-soft, var(--surface-2)); }
.q-gen-card.q-gen-rejected, .q-gen-card.q-gen-failed { opacity: .58; }
.q-gc-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.q-gc-title { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.35; }
.q-gc-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.q-gc-label { font-size: 11px; font-weight: 700; color: var(--quadros); background: var(--quadros-soft, var(--surface));
  border: 1px solid var(--line-2); padding: 1px 8px; border-radius: 999px; }
.q-gc-checklist { list-style: none; display: flex; flex-direction: column; gap: 3px; padding-left: 2px; }
.q-gc-checklist li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; position: relative; padding-left: 16px; }
.q-gc-checklist li::before { content: "☐"; position: absolute; left: 0; color: var(--ink-faint); }
.q-gc-assignee { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.q-gc-assignee .q-assignee { width: 20px; height: 20px; font-size: 10px; }
.q-gc-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.q-gc-badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.q-gc-badge.ok { color: var(--quadros); background: var(--quadros-soft, var(--surface)); border: 1px solid var(--quadros); }
.q-gc-badge.no { color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line-2); }

@media (max-width: 560px) {
  .q-filter-bar { overflow-x: auto; flex-wrap: nowrap; }
  .q-fresult { display: none; }
  .q-gen-card { flex-direction: column; }
}

/* ============================================================
   AURORA SELECT — dropdown canônico da casa (Components/Common/AuroraSelect.razor)
   Porte FIEL de prototype-v2/quadros-dropdown-v1.html (classe AuroraDropdown), sobre tokens Aurora reais.
   Um componente, dois modos: single (rádio) e multi (checkmarks + rodapé). Variantes de gatilho: as-chip
   (pílula de filtro) e as-field (controle largo do drawer). Aparência clara/escura via os tokens do tema.
   --hue local = --hub por padrão; contextos coloridos (Quadros) fazem override p/ --quadros.
   ============================================================ */
.adrop { position: relative; display: inline-block; --hue: var(--hue, var(--hub)); --hue2: var(--hue2, var(--hub-2)); }
.adrop.block { display: block; }

/* --- gatilho (base) --- */
.adrop-trigger { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; transition: border-color .14s, background .14s, color .14s, box-shadow .14s; }
.adrop-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)), 0 0 0 1.5px var(--hue); }
.adrop-trigger .at-chev { color: var(--ink-faint); flex: none; font-size: 12px;
  transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.adrop[data-open="true"] .at-chev { transform: rotate(180deg); }
.adrop-trigger[disabled] { opacity: .5; cursor: not-allowed; }

/* gatilho CHIP (barra de filtros) */
.adrop-trigger.as-chip { font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-soft); }
.adrop-trigger.as-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.adrop-trigger.as-chip .ic { color: var(--ink-faint); font-size: 12px; }
.adrop-trigger.as-chip.has-value { border-color: var(--hue); background: var(--hue-soft, var(--hub-soft)); color: var(--hue); }
[data-theme="dark"] .adrop-trigger.as-chip.has-value { color: var(--hue2); }
.adrop-trigger.as-chip.has-value .ic, .adrop-trigger.as-chip.has-value .at-chev { color: inherit; }
.adrop-trigger.as-chip .at-count { font-size: 11px; font-weight: 800; background: var(--hue); color: #fff;
  border-radius: var(--r-pill); padding: 0 6px; min-width: 17px; text-align: center; line-height: 17px; }

/* Seletor de idioma da TOPBAR (LanguageMenu): o chip é do cânone AuroraSelect, mas no chrome ele deve LER
   como um .icon-btn neutro (não accent) e ter a MESMA altura dos vizinhos (tema/sino). O idioma está sempre
   selecionado, então neutralizamos o estado has-value (senão o chip ficaria sempre pintado no accent). */
.topbar-right .lang-menu { display: inline-flex; }
.topbar-right .lang-menu .adrop-trigger.as-chip {
  height: 38px; padding: 0 12px; font-size: 13.5px; background: transparent;
  border-color: var(--line-2); color: var(--ink-soft);
}
.topbar-right .lang-menu .adrop-trigger.as-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.topbar-right .lang-menu .adrop-trigger.as-chip .ic,
.topbar-right .lang-menu .adrop-trigger.as-chip .at-chev { color: var(--ink-faint); }

/* gatilho FIELD (drawer) — largura total, avatar + nome + chevron */
.adrop-trigger.as-field { width: 100%; justify-content: flex-start; font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.adrop-trigger.as-field:hover { border-color: var(--ink-faint); }
.adrop-trigger.as-field .at-chev { margin-left: auto; }
.adrop-trigger.as-field .at-label.placeholder { color: var(--ink-faint); font-weight: 500; }

/* avatar / swatch no gatilho + nos itens */
.adrop .av { width: 22px; height: 22px; border-radius: var(--r-pill); flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 10px; background: linear-gradient(135deg, var(--av,#5B5BF5), var(--av2,#8B5CF6)); }
.adrop .as-field .av { width: 26px; height: 26px; font-size: 12px; }
.adrop .av.none { background: var(--line); color: var(--ink-faint); }
.adrop .swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* --- painel (listbox) --- */
/* position:FIXED (não absolute) — o painel escapa do overflow:hidden do card `.panel` (border-radius) que o
   clipava dependendo do Y da tela (bug PO 2026-08-08). O JS (hub-aurora-select.js) posiciona em coords de
   viewport e reposiciona no scroll/resize; z-index alto pra ficar acima do chrome. */
.adrop-panel { position: fixed; z-index: var(--z-popover); width: max-content; min-width: 220px;
  max-width: min(340px, calc(100vw - 20px));
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; flex-direction: column; max-height: 60vh;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center; pointer-events: none;
  /* fechado = display:none (não só opacity:0;visibility:hidden) — o painel fechado não fica mais como um
     retângulo `position:fixed` fantasma fora do viewport poluindo auditorias de overflow (higiene gate
     2026-08-13). `transition-behavior:allow-discrete` + @starting-style abaixo preservam a MESMA animação de
     entrada (fade+scale) mesmo saindo de display:none — validado headed Chromium+WebKit antes de entrar. */
  display: none;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.3,1), display .18s allow-discrete; }
.adrop[data-flip="up"] .adrop-panel { transform-origin: bottom center; transform: translateY(6px) scale(.98); }
.adrop[data-open="true"] .adrop-panel { display: flex; opacity: 1; transform: none; pointer-events: auto; }
@starting-style {
  .adrop[data-open="true"] .adrop-panel { opacity: 0; transform: translateY(-6px) scale(.98); }
  .adrop[data-open="true"][data-flip="up"] .adrop-panel { transform: translateY(6px) scale(.98); }
}

/* linha de busca (dentro do painel) */
.adrop .ap-search { position: relative; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); flex: none; }
.adrop .ap-search input { width: 100%; font: inherit; font-size: 13.5px; padding: 8px 12px 8px 32px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); }
.adrop .ap-search input:focus { outline: none; border-color: var(--hue); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); }
.adrop .ap-search input::placeholder { color: var(--ink-faint); }
.adrop .ap-search .mag { position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); font-size: 13px; pointer-events: none; }

/* região de scroll + scrollbar custom */
.adrop .ap-list { padding: 6px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.adrop .ap-list::-webkit-scrollbar { width: 9px; }
.adrop .ap-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--surface); }

/* opção */
.adrop .ap-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13.5px; color: var(--ink); min-height: 44px; scroll-margin: 8px; }
.adrop .ap-opt:hover { background: var(--surface-2); }
.adrop .ap-opt.active { background: var(--hue-soft, var(--hub-soft)); }
.adrop .ap-opt .lab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adrop .ap-opt .sub { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; }
.adrop .ap-opt .mark { width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 6px; border: 1.5px solid var(--line-2); color: #fff; font-size: 11px; transition: all .12s; }
.adrop[data-mode="single"] .ap-opt .mark { border-radius: 50%; color: transparent; }
.adrop .ap-opt[aria-selected="true"] .mark { background: var(--hue); border-color: var(--hue); }
.adrop[data-mode="single"] .ap-opt[aria-selected="true"] .mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* grupo / separador */
.adrop .ap-group { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); padding: 8px 10px 4px; }

/* vazio / sem resultados */
.adrop .ap-empty { padding: 22px 16px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.adrop .ap-empty .big { font-size: 22px; display: block; margin-bottom: 6px; opacity: .7; }

/* rodapé (multi): contagem + Limpar */
.adrop .ap-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-top: 1px solid var(--line); flex: none; background: var(--surface); }
.adrop .ap-foot .fc-count { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.adrop .ap-foot .fc-count b { color: var(--ink); }
.adrop .ap-foot .fc-clear { font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; border: none;
  background: transparent; color: var(--hue); padding: 5px 10px; border-radius: var(--r-pill); }
[data-theme="dark"] .adrop .ap-foot .fc-clear { color: var(--hue2); }
.adrop .ap-foot .fc-clear:hover { background: var(--hue-soft, var(--hub-soft)); }
.adrop .ap-foot .fc-clear:disabled { color: var(--ink-faint); cursor: default; background: transparent; }

/* Contexto Quadros: hue = --quadros (barra de filtros E drawer) */
.q-filter-bar .adrop, .q-dr-field .adrop { --hue: var(--quadros); --hue2: var(--quadros-2); }

/* Placeholder do CodeField enquanto o Monaco carrega sob demanda (lazy · ADR 007 achado #2).
   Preenche a altura reservada pelo wrapper .code-field pra não haver salto de layout. */
.code-field .code-field-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 40px;
  font-size: 13px;
  color: var(--ink-faint);
  font-family: var(--font, inherit);
}

/* ============================================================
   CHAT — app de colaboração NATIVO do hub (MVP: canais + mensagens)
   Fiel a prototype-v2/chat-v1.html (modo "App próprio", standalone).
   hue = --chat (alias de --ai · índigo). Só o MVP: rail de canais +
   thread + composer + col de membros. Realtime/DMs/copiloto = F2.
   ============================================================ */
.chat-page { max-width: 1320px; margin: 0 auto; padding: clamp(14px,3vw,22px) clamp(12px,3.5vw,28px) 54px; }
.chat-page .mode-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.chat-page .mode-head .mh-title h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(21px,2.6vw,28px); letter-spacing: -.02em; line-height: 1.1; }
.chat-page .mode-head .mh-title .sub { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; max-width: 640px; }

.chat-app {
  display: grid; grid-template-columns: 264px 1fr 220px; gap: 0;
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md);
  border: 1px solid var(--line); overflow: hidden; min-height: 600px;
}
@media (max-width: 1080px) { .chat-app { grid-template-columns: 232px 1fr; } .chat-app .members-col { display: none; } }
@media (max-width: 720px)  { .chat-app { grid-template-columns: 1fr; min-height: 0; } }

/* ---- RAIL ---- */
.chat-rail { border-right: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 720px) { .chat-rail { border-right: none; border-bottom: 1px solid var(--line); } .mobile-hide-rail .chat-rail { display: none; } }
.chat-rail .rail-head { padding: 15px 16px 12px; border-bottom: 1px solid var(--line); }
.chat-rail .rail-head .app { display: flex; align-items: center; gap: 10px; }
.chat-rail .rail-head .mk { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 16px; background: linear-gradient(140deg, var(--chat), var(--chat-2)); box-shadow: 0 5px 14px -4px var(--chat); flex: none; }
.chat-rail .rail-head .nm { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.chat-rail .rail-head .ws { font-size: 11.5px; color: var(--ink-faint); }
.chat-rail .rail-head .scope-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--chat); background: var(--chat-soft); padding: 4px 10px; border-radius: var(--r-pill); }
[data-theme="dark"] .chat-rail .rail-head .scope-chip { color: var(--chat-2); }

.chat-rail .rail-scroll { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.chat-rail .rail-group { margin-top: 8px; }

/* Busca no histórico (hub.chat.search) — campo no topo do rail + estado bloqueado (upsell). Hue --chat. */
.chat-search { padding: 2px 6px 4px; }
.chat-search .cs-field { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2, transparent); transition: border-color .16s; }
.chat-search .cs-field:focus-within { border-color: var(--chat); }
.chat-search .cs-ic { color: var(--ink-soft); font-size: 15px; flex: none; }
.chat-search .cs-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); outline: none; }
.chat-search .cs-clear { flex: none; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.chat-search .cs-clear:hover { color: var(--chat); background: var(--chat-soft); }
.chat-search.locked .cs-locked { width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: var(--r-md); background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; cursor: not-allowed; }
.chat-search.locked .cs-lbl { flex: 1; text-align: left; }
.chat-search.locked .cs-pill { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(140deg, var(--chat), var(--chat-2)); padding: 2px 7px; border-radius: 999px; }

/* Painel de resultados da busca — sobrepõe a thread enquanto há busca em curso. */
.chat-thread .search-results { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 8px; }
.search-results .sr-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.search-results .sr-count { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.search-results .sr-back { border: 0; background: transparent; color: var(--chat); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.search-results .sr-back:hover { background: var(--chat-soft); }
.search-results .sr-empty { text-align: center; color: var(--ink-soft); padding: 32px 12px; }
.search-results .sr-empty .sr-ic { font-size: 26px; opacity: .6; margin-bottom: 8px; }
.search-results .sr-hit { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 9px 10px; border-radius: var(--r-md); transition: background .14s; }
.search-results .sr-hit:hover { background: var(--chat-soft); }
.search-results .srh-who { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.search-results .srh-body { min-width: 0; flex: 1; }
.search-results .srh-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.search-results .srh-chan { font-size: 12px; font-weight: 700; color: var(--chat); }
.search-results .srh-nm { font-size: 12px; font-weight: 700; color: var(--ink); }
.search-results .srh-tm { font-size: 11px; color: var(--ink-soft); }
.search-results .srh-txt { font-size: 13px; color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-results .sr-more { text-align: center; font-size: 12px; color: var(--ink-soft); padding: 8px 0 2px; }
.chat-rail .rail-group .gl { display: flex; align-items: center; gap: 6px; padding: 4px 10px 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.chat-rail .rail-group .gl .cnt { margin-left: auto; font-weight: 700; }
.chat-rail .rail-group .gl .soon { margin-left: auto; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line); padding: 1px 8px; border-radius: var(--r-pill); }
.chat-rail .rail-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; transition: all .14s; position: relative; }
.chat-rail .rail-item:hover { background: var(--surface); color: var(--ink); }
.chat-rail .rail-item.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.chat-rail .rail-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--chat), var(--chat-2)); }
.chat-rail .rail-item .hash { color: var(--ink-faint); font-weight: 700; flex: none; width: 15px; text-align: center; }
.chat-rail .rail-item.active .hash { color: var(--chat); }
[data-theme="dark"] .chat-rail .rail-item.active .hash { color: var(--chat-2); }
.chat-rail .rail-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* badge de NÃO-LIDAS por canal (v2) — pílula no fim do rail-item, hue de chat. Canal não-lido ganha nome em
   negrito (destaque discreto, mesmo cânone de "inbox" sem virar alarme). Some quando 0 (não renderiza). */
.chat-rail .rail-item .chan-unread { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--chat); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; }
[data-theme="dark"] .chat-rail .rail-item .chan-unread { background: var(--chat-2); color: #0b0f14; }
.chat-rail .rail-item.has-unread:not(.active) .lbl { font-weight: 700; color: var(--ink); }
.chat-rail .rail-item.active .chan-unread { display: none; } /* canal ativo é sempre "visto" (0) */
.chat-rail .rail-empty { padding: 6px 12px 4px; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.chat-rail .rail-soon { padding: 4px 12px 6px; font-size: 12px; color: var(--ink-faint); }
.chat-rail .rail-newbtn { margin: 6px 8px 0; }
.chat-rail .btn-newchan { width: 100%; justify-content: center; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px dashed var(--line-2); background: transparent; color: var(--ink-soft); padding: 9px 12px; border-radius: var(--r-md); display: inline-flex; align-items: center; gap: 7px; transition: all .16s; }
.chat-rail .btn-newchan:hover { color: var(--chat); border-color: var(--chat); }
.chat-rail .new-chan-form { display: flex; flex-direction: column; gap: 7px; }
.chat-rail .new-chan-form .field { width: 100%; }
.chat-rail .new-chan-form .ncf-actions { display: flex; gap: 6px; }

/* ---- THREAD ---- */
.chat-thread { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.chat-thread .thread-head { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.chat-thread .thread-head .back { display: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft); cursor: pointer; place-items: center; flex: none; font-size: 16px; }
@media (max-width: 720px) { .chat-thread .thread-head .back { display: grid; } }
.chat-thread .th-title { min-width: 0; }
.chat-thread .th-title .t { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 16px; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.chat-thread .th-title .t .hash { color: var(--ink-faint); }
.chat-thread .th-title .s { font-size: 11.5px; color: var(--ink-faint); }

.chat-thread .thread-body { flex: 1; overflow-y: auto; padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 4px; min-height: 260px; }
.chat-thread .thread-empty { margin: auto; text-align: center; max-width: 340px; padding: 26px 12px; }
.chat-thread .thread-empty .te-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: var(--chat); background: var(--chat-soft); }
[data-theme="dark"] .chat-thread .thread-empty .te-ic { color: var(--chat-2); }
.chat-thread .thread-empty h2 { font-family: "Bricolage Grotesque"; font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.chat-thread .thread-empty p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.chat-thread .cm { display: flex; gap: 11px; padding: 6px 4px; border-radius: var(--r-sm); transition: background .12s; }
.chat-thread .cm:hover { background: var(--surface-2); }
.chat-thread .cm .who { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.chat-thread .cm .body { min-width: 0; flex: 1; }
.chat-thread .cm .line1 { display: flex; align-items: baseline; gap: 8px; }
.chat-thread .cm .line1 .nm { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.chat-thread .cm .line1 .tm { font-size: 11px; color: var(--ink-faint); }
.chat-thread .cm .txt { font-size: 13.5px; color: var(--ink); line-height: 1.5; margin-top: 1px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-thread .cm.grouped .who { visibility: hidden; height: 0; }
.chat-thread .cm.grouped { padding-top: 0; padding-bottom: 2px; }

/* ---- DEEP-LINK ATÉ A MENSAGEM (Onda 1 · item 1) — realce transitório da msg linkada (hue --chat), dark+light ---- */
.chat-thread .cm.cm-highlight {
  border-radius: 12px;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  background: color-mix(in srgb, var(--chat) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--chat);
  animation: cm-highlight-in .28s ease;
}
[data-theme="dark"] .chat-thread .cm.cm-highlight {
  background: color-mix(in srgb, var(--chat) 20%, transparent);
}
@keyframes cm-highlight-in {
  from { background: color-mix(in srgb, var(--chat) 34%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-thread .cm.cm-highlight { animation: none; }
}

/* ---- PRESENÇA do canal (Onda 1 · item 3) — avatares de quem está no canal, no thread-head (hue --chat) ---- */
.chat-thread .chat-presence { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.chat-thread .chat-presence .cp-avatars { display: inline-flex; align-items: center; }
.chat-thread .chat-presence .pa {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  margin-left: -6px; border: 2px solid var(--surface); color: #fff; font-weight: 700; font-size: 11px; line-height: 1; flex: 0 0 auto;
}
.chat-thread .chat-presence .pa:first-child { margin-left: 0; }
.chat-thread .chat-presence .pa.more { background: var(--surface-2); color: var(--ink-soft); }
.chat-thread .chat-presence .pa.idle { opacity: .5; filter: grayscale(55%); }
.chat-thread .chat-presence .cp-label { font-size: 11.5px; color: var(--ink-faint); }

/* ---- "DIGITANDO…" (Onda 1 · item 3) — indicador efêmero acima do composer, 3 pontos animados, hue --chat ---- */
.chat-thread .chat-typing { display: flex; align-items: center; gap: 8px; padding: 4px 18px 2px; font-size: 12px; color: var(--ink-faint); }
.chat-thread .chat-typing .ct-dots { display: inline-flex; gap: 3px; }
.chat-thread .chat-typing .ct-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--chat); display: inline-block; animation: ct-bounce 1.1s infinite ease-in-out;
}
.chat-thread .chat-typing .ct-dots span:nth-child(2) { animation-delay: .16s; }
.chat-thread .chat-typing .ct-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes ct-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-thread .chat-typing .ct-dots span { animation: none; } }

/* ---- DIVISOR "novas desde aqui" (v3 · new-since-here) — linha com rótulo centralizado, hue --chat ---- */
.chat-thread .new-divider { display: flex; align-items: center; gap: 10px; margin: 6px 4px 2px; }
.chat-thread .new-divider::before, .chat-thread .new-divider::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--chat), transparent); opacity: .55; }
.chat-thread .new-divider .lbl {
  flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--chat); background: var(--chat-soft); padding: 3px 10px; border-radius: var(--r-pill); }
[data-theme="dark"] .chat-thread .new-divider .lbl { color: var(--chat-2); }
[data-theme="dark"] .chat-thread .new-divider::before, [data-theme="dark"] .chat-thread .new-divider::after {
  background: linear-gradient(90deg, transparent, var(--chat-2), transparent); }

/* ==== ONDA A (chat v2 fase-2) — superfície base + estados de mensagem (sem seam novo) ==== */

/* DENSIDADE v1 — botão de LINHA no thread-head (HubIcon gauge) + classe .dense na .chat-app compacta a timeline. */
.chat-thread .thread-head .th-dense {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; flex: none; font-size: 15px; }
.chat-thread .thread-head .chat-presence + .th-dense { margin-left: 6px; }   /* já há presença (margin-left:auto): só um respiro */
.chat-thread .thread-head .th-dense:hover { color: var(--ink); border-color: var(--ink-faint); }
.chat-thread .thread-head .th-dense.on { color: var(--chat); border-color: var(--chat); background: var(--chat-soft); }
[data-theme="dark"] .chat-thread .thread-head .th-dense.on { color: var(--chat-2); }

/* ---- COMMAND PALETTE + SHARE triggers (Onda B/C) — botões redondos de linha, mesmo molde do th-dense ---- */
.chat-thread .thread-head .th-cmd {
  margin-left: 6px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; flex: none; font-size: 15px; }
.chat-thread .thread-head .th-share, .chat-thread .thread-head .th-cmd-first { margin-left: auto; }   /* LÍDER do cluster: empurra o grupo à direita */
.chat-thread .thread-head .chat-presence + .th-share,
.chat-thread .thread-head .chat-presence + .th-cmd-first { margin-left: 6px; }   /* presença já empurrou: só respiro */
.chat-thread .thread-head .th-cmd + .th-dense { margin-left: 6px; }   /* cancela o margin-auto do th-dense: fica junto ao cluster */
.chat-thread .thread-head .th-cmd:hover { color: var(--chat); border-color: var(--chat); }
[data-theme="dark"] .chat-thread .thread-head .th-cmd:hover { color: var(--chat-2); }

/* ---- COMMAND PALETTE overlay (Onda B · escopo-chat · gancho pro palette global do shell v-next) ---- */
.chat-app .cmd-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(14, 14, 25, .5); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
[data-theme="light"] .chat-app .cmd-overlay { background: rgba(22, 21, 42, .32); }
.chat-app .cmd-overlay.on { display: flex; }
.chat-app .palette { width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: cmd-pop .16s ease; }
@keyframes cmd-pop { from { transform: translateY(-8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-app .palette { animation: none; } }
.chat-app .palette .pal-in { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.chat-app .palette .pal-in .i { font-size: 17px; color: var(--ink-faint); display: inline-flex; }
.chat-app .palette .pal-in .q { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.chat-app .palette .pal-in .esc { font-size: 10.5px; border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; color: var(--ink-faint); }
.chat-app .palette .pal-scroll { max-height: 52vh; overflow-y: auto; padding: 8px; }
.chat-app .palette .pal-sec { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: 9px 12px 5px; }
.chat-app .palette .pal-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 26px 12px; }
.chat-app .palette .pal-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: transparent;
  font: inherit; padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; }
.chat-app .palette .pal-item.sel { background: var(--chat-soft); }
.chat-app .palette .pal-item .pi-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; font-size: 12px; font-weight: 700; }
.chat-app .palette .pal-item .pi-ic .hub-ico { font-size: 15px; }
.chat-app .palette .pal-item .pi-t { flex: 1; min-width: 0; }
.chat-app .palette .pal-item .pi-t .a { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app .palette .pal-item .pi-t .b { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app .palette .pal-item .pi-k { font-size: 10px; color: var(--ink-faint); flex: none; }
.chat-app .palette .pal-item .pi-k kbd { border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; }
.chat-app .palette .pal-foot { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-faint); }
.chat-app .palette .pal-foot .g { display: flex; align-items: center; gap: 5px; }
.chat-app .palette .pal-foot kbd { border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; font-size: 10px; }

/* ==== APP-CARD inline (Onda C · chat.unfurl · 4 estados) ==== */
.chat-thread .appcard { margin-top: 7px; max-width: 420px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.chat-thread .appcard .ac-top { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.chat-thread .appcard .ac-mk { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; font-size: 14px; }
.chat-thread .appcard.quadros .ac-mk { background: linear-gradient(140deg, var(--quadros), var(--quadros-2)); }
.chat-thread .appcard.bi .ac-mk { background: linear-gradient(140deg, var(--bi), var(--bi-2)); }
.chat-thread .appcard.fluxion .ac-mk { background: linear-gradient(140deg, var(--fluxion), var(--fluxion-2)); }
.chat-thread .appcard.flyx .ac-mk { background: linear-gradient(140deg, var(--flyx), var(--flyx-2)); }
.chat-thread .appcard .ac-t { min-width: 0; flex: 1; }
.chat-thread .appcard .ac-t .app { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.chat-thread .appcard .ac-t .ttl { font-weight: 700; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread .appcard .ac-live { font-size: 10px; font-weight: 700; color: var(--ok); display: inline-flex; align-items: center; gap: 5px; flex: none; }
.chat-thread .appcard .ac-live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
.chat-thread .appcard .ac-mid { padding: 11px 13px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.chat-thread .appcard .ac-kpis { display: flex; gap: 16px; }
.chat-thread .appcard .ac-kpi .k { font-size: 10px; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.chat-thread .appcard .ac-kpi .v { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chat-thread .appcard .ac-kpi .v.down { color: var(--danger); }
.chat-thread .appcard .ac-cols { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.chat-thread .appcard .ac-cols .row { display: flex; align-items: center; gap: 8px; }
.chat-thread .appcard .ac-cols .st { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chat-thread .appcard .ac-bot { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.chat-thread .appcard .ac-btn { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.chat-thread .appcard .ac-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.chat-thread .appcard .ac-btn.pri { color: #fff; border: none; background: linear-gradient(135deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 4px 11px -5px var(--hue, var(--ai)); }
/* loading (skeleton shimmer) */
.chat-thread .appcard.loading .ac-mk { background: var(--line-2) !important; color: transparent; }
.chat-thread .appcard .sk { background: linear-gradient(90deg, var(--line) 25%, var(--line-2) 37%, var(--line) 63%); background-size: 400% 100%; animation: ac-shimmer 1.4s ease infinite; border-radius: 6px; display: inline-block; }
.chat-thread .appcard.loading .ac-t .app { width: 74px; height: 9px; }
.chat-thread .appcard.loading .ac-t .ttl { width: 170px; height: 13px; margin-top: 4px; }
.chat-thread .appcard .unfurling { font-size: 10.5px; color: var(--ink-faint); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.chat-thread .appcard .unfurling .spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--hue, var(--ai)); animation: chat-spin .7s linear infinite; }
@keyframes ac-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .chat-thread .appcard .sk, .chat-thread .appcard .unfurling .spin, .chat-thread .appcard .ac-live .d { animation: none; } }
/* erro / sem-acesso (fallback) */
.chat-thread .appcard.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.chat-thread .appcard.err { border-color: color-mix(in srgb, var(--danger) 38%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.chat-thread .appcard .ac-fallback { padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; }
.chat-thread .appcard .ac-fallback .fi { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; font-size: 13px; }
.chat-thread .appcard.warn .ac-fallback .fi { background: var(--warn); }
.chat-thread .appcard.err .ac-fallback .fi { background: var(--danger); }
.chat-thread .appcard .ac-fallback .ft { min-width: 0; }
.chat-thread .appcard .ac-fallback .ft .a { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.chat-thread .appcard .ac-fallback .ft .b { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }

/* ==== REAÇÕES (Onda E · D5 · set curado) — pills de contagem + picker de LINHA ==== */
.chat-thread .reacts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; position: relative; }
.chat-thread .react { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; cursor: pointer; transition: border-color .14s, background .14s; }
.chat-thread .react:hover { border-color: var(--line-2); }
.chat-thread .react.mine { background: color-mix(in srgb, var(--hue, var(--ai)) 12%, var(--surface)); border-color: color-mix(in srgb, var(--hue, var(--ai)) 32%, transparent); color: var(--hue, var(--ai)); }
.chat-thread .react .em { font-size: 13px; line-height: 1; }
.chat-thread .react.add { color: var(--ink-faint); padding: 3px 8px; }
.chat-thread .react.add:hover { color: var(--chat); border-color: var(--chat); }
[data-theme="dark"] .chat-thread .react.add:hover { color: var(--chat-2); }
.chat-thread .react.add .hub-ico { font-size: 13px; }
.chat-thread .react-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; display: flex; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); box-shadow: var(--shadow-md); }
.chat-thread .react-pop .rp-em { border: none; background: transparent; font: inherit; font-size: 18px; line-height: 1; padding: 3px 5px; border-radius: var(--r-sm); cursor: pointer; transition: transform .1s, background .1s; }
.chat-thread .react-pop .rp-em:hover { background: var(--surface-2); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .chat-thread .react-pop .rp-em:hover { transform: none; } }

/* ==== SHARE PICKER sheet (Onda C · §5) ==== */
.chat-app .sheet { width: min(500px, 92vw); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: cmd-pop .16s ease; }
@media (prefers-reduced-motion: reduce) { .chat-app .sheet { animation: none; } }
.chat-app .sheet .sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-app .sheet .sheet-head .i { font-size: 17px; color: var(--hue, var(--ai)); display: inline-flex; }
.chat-app .sheet .sheet-head .t { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 16px; }
.chat-app .sheet .sheet-head .x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.chat-app .sheet .sheet-scroll { max-height: 46vh; overflow-y: auto; padding: 12px 14px; }
.chat-app .sheet .share-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; margin-bottom: 8px; font: inherit; }
.chat-app .sheet .share-item:hover:not(:disabled) { border-color: var(--hue, var(--ai)); }
.chat-app .sheet .share-item.locked { cursor: default; opacity: .85; }
.chat-app .sheet .share-item .si-mk { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; font-size: 16px; }
.chat-app .sheet .share-item.quadros .si-mk { background: linear-gradient(140deg, var(--quadros), var(--quadros-2)); }
.chat-app .sheet .share-item.bi .si-mk { background: linear-gradient(140deg, var(--bi), var(--bi-2)); }
.chat-app .sheet .share-item.fluxion .si-mk { background: linear-gradient(140deg, var(--fluxion), var(--fluxion-2)); }
.chat-app .sheet .share-item.flyx .si-mk { background: linear-gradient(140deg, var(--flyx), var(--flyx-2)); }
.chat-app .sheet .share-item .si-t { flex: 1; min-width: 0; }
.chat-app .sheet .share-item .si-t .a { font-weight: 700; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app .sheet .share-item .si-t .b { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app .sheet .share-item .go { color: var(--ink-faint); display: inline-flex; }
.chat-app .sheet .share-item .lockpill { font-size: 9.5px; font-weight: 800; color: var(--warn); text-transform: uppercase; background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 2px 7px; border-radius: var(--r-pill); flex: none; }
.chat-app .sheet .sheet-foot { padding: 11px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-faint); display: flex; align-items: center; gap: 7px; }
.chat-app .sheet .sheet-foot span { color: var(--hue, var(--ai)); display: inline-flex; }
.chat-app.dense .chat-thread .thread-body { padding-top: 8px; gap: 1px; }
.chat-app.dense .chat-thread .cm { padding-top: 3px; padding-bottom: 3px; }
.chat-app.dense .chat-thread .cm .who { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.chat-app.dense .chat-thread .cm .txt { font-size: 13px; line-height: 1.4; }

/* REALTIME DEGRADADO — banner "ao vivo pausado" (entitled mas data-realtime-live=0). Âmbar (--warn), ícone de LINHA. */
.chat-thread .rt-banner {
  display: flex; align-items: center; gap: 9px; margin: 8px 18px 0; padding: 8px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--warn); font-size: 12px; font-weight: 600; }
.chat-thread .rt-banner .rt-txt { min-width: 0; }
.chat-thread .rt-banner span[aria-hidden] { flex: none; display: inline-flex; font-size: 15px; }
.chat-thread .rt-banner .rt-sp { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); }
@media (max-width: 560px) { .chat-thread .rt-banner .rt-sp { display: none; } }

/* APAGAR a PRÓPRIA msg — ação hover-revelada (HubIcon trash), canto superior-direito da linha. */
.chat-thread .cm { position: relative; }
.chat-thread .cm .cm-actions {
  position: absolute; top: 2px; right: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.chat-thread .cm:hover .cm-actions, .chat-thread .cm:focus-within .cm-actions { opacity: 1; }
.chat-thread .cm .cm-act {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-faint); cursor: pointer; display: grid; place-items: center; font-size: 13px; }
.chat-thread .cm .cm-act:hover { color: var(--chat); border-color: color-mix(in srgb, var(--chat) 45%, transparent); }
.chat-thread .cm .cm-act.cm-act-danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
@media (hover: none) { .chat-thread .cm .cm-actions { opacity: 1; } }   /* touch: sem hover ⇒ sempre visível */

/* ENVIO OTIMISTA (enviando…) + FALHO (ChatWriteResult.Fail → não enviada · tentar de novo). */
.chat-thread .cm.sending { opacity: .62; }
.chat-thread .cm .sendstate {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin-top: 3px; }
.chat-thread .cm .sendstate .spin {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--chat);
  animation: chat-spin .7s linear infinite; flex: none; }
.chat-thread .cm .sendstate.failed { color: var(--danger); }
.chat-thread .cm .sendstate .hub-ico { flex: none; }
.chat-thread .cm .sendstate .retry {
  margin-left: 4px; font: inherit; font-size: 10.5px; font-weight: 800; color: var(--danger);
  background: none; border: none; cursor: pointer; text-decoration: underline; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-thread .cm .sendstate .spin { animation: none; } }

/* TOMBSTONE (msg apagada) + Desfazer (RestoreMessage/snapshot) — placeholder discreto tracejado na posição. */
.chat-thread .cm.tomb:hover { background: transparent; }
.chat-thread .cm.tomb .body {
  display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 12.5px; font-style: italic;
  padding: 7px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); }
.chat-thread .cm.tomb .tomb-txt { display: inline-flex; align-items: center; gap: 7px; }
.chat-thread .cm.tomb .undo {
  margin-left: auto; font: inherit; font-style: normal; font-weight: 800; color: var(--chat); background: none; border: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
[data-theme="dark"] .chat-thread .cm.tomb .undo { color: var(--chat-2); }

/* ---- COMPOSER ---- */
.chat-thread .composer { padding: 10px 16px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-thread .composer .realtime-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 9px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.chat-thread .composer .realtime-note span[aria-hidden] { color: var(--chat); flex: none; }
[data-theme="dark"] .chat-thread .composer .realtime-note span[aria-hidden] { color: var(--chat-2); }
.chat-thread .composer .box { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; transition: border-color .16s; }
.chat-thread .composer .box:focus-within { border-color: var(--chat); }
.chat-thread .composer .box.disabled { opacity: .6; }
.chat-thread .composer .input { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; }
.chat-thread .composer .input .msg { flex: 1; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; outline: none; }
.chat-thread .composer .input .msg::placeholder { color: var(--ink-faint); }
.chat-thread .composer .send { width: 36px; height: 36px; border-radius: 11px; border: none; cursor: pointer; color: #fff; font-size: 15px; background: linear-gradient(135deg, var(--chat), var(--chat-2)); box-shadow: 0 5px 13px -5px var(--chat); display: grid; place-items: center; flex: none; transition: transform .14s; }
.chat-thread .composer .send:not(:disabled):active { transform: scale(.94); }
.chat-thread .composer .send:disabled { opacity: .5; cursor: default; box-shadow: none; }
.chat-thread .composer .hint { margin-top: 7px; font-size: 11px; color: var(--ink-faint); }

/* ---- TOOLBAR do composer (fidelidade fase-2 · proto: link · anexo · menção · emoji · comandos) — ícones de LINHA,
   hue --chat, dentro da .box acima do campo. tb-row é âncora do popover de emoji (position:relative). ---- */
.chat-thread .composer .tb-row { display: flex; align-items: center; gap: 1px; padding: 6px 8px; border-bottom: 1px solid var(--line); position: relative; }
.chat-thread .composer .box.disabled .tb-row { opacity: .55; }
.chat-thread .composer .tb { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--ink-faint); cursor: pointer; display: grid; place-items: center; font-size: 16px; transition: color .14s, background .14s; }
.chat-thread .composer .tb:hover:not(:disabled) { color: var(--ink); background: var(--line); }
.chat-thread .composer .tb.accent:hover:not(:disabled) { color: var(--chat); background: var(--chat-soft); }
[data-theme="dark"] .chat-thread .composer .tb.accent:hover:not(:disabled) { color: var(--chat-2); }
.chat-thread .composer .tb.accent { color: var(--chat); }
[data-theme="dark"] .chat-thread .composer .tb.accent { color: var(--chat-2); }
.chat-thread .composer .tb:disabled { cursor: default; opacity: .5; }
.chat-thread .composer .tb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; flex: none; }
/* popover de emoji do compositor (set curado · insere no rascunho) — sobe acima da toolbar */
.chat-thread .composer .tb-emoji-pop { position: absolute; bottom: calc(100% + 6px); left: 8px; z-index: 5; display: flex; gap: 2px; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-md); }
.chat-thread .composer .tb-emoji { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.chat-thread .composer .tb-emoji:hover { background: var(--chat-soft); }

/* ---- COPILOTO DO CHAT (hub.chat.copilot) — barra gated ancorada no canal ativo. Espelha o visual da barra do
   launcher (.ai-bar/.ai-field/.ai-chip), hue --chat, compacto (1 linha + chips). Reusa o card Aprovar/Recusar
   (.action-card) e os turns (.ai-turn) sem estilo próprio. Dark E light, sem overflow horizontal. ---- */
.chat-thread .chat-cop { padding: 10px 16px 0; }
.chat-cop .chat-cop-hint { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.chat-cop .chat-cop-hint .mk { color: var(--chat); flex: none; font-weight: 800; }
[data-theme="dark"] .chat-cop .chat-cop-hint .mk { color: var(--chat-2); }
.chat-cop .chat-cop-row { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 13px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); transition: border-color .16s, box-shadow .16s; }
.chat-cop .chat-cop-row:focus-within { border-color: var(--chat); box-shadow: 0 0 0 4px var(--chat-soft); }
.chat-cop .chat-cop-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; outline: none; }
.chat-cop .chat-cop-input::placeholder { color: var(--ink-faint); font-weight: 500; }
.chat-cop .chat-cop-send { flex: none; border: none; cursor: pointer; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 13px; border-radius: 10px; background: linear-gradient(135deg, var(--chat), var(--chat-2)); box-shadow: 0 5px 13px -5px var(--chat); transition: transform .14s, box-shadow .16s; white-space: nowrap; }
.chat-cop .chat-cop-send:hover { box-shadow: 0 9px 20px -6px var(--chat); }
.chat-cop .chat-cop-send:active { transform: scale(.96); }
.chat-cop .chat-cop-send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.chat-cop .chat-cop-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 0; }
.chat-cop .chat-cop-chip { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.chat-cop .chat-cop-chip:hover { color: var(--ink); border-color: var(--chat); background: var(--chat-soft); }
.chat-cop .chat-cop-convo { margin: 12px 0 2px; }
.chat-cop .chat-cop-convo[hidden] { display: none; }
@media (max-width: 560px) {
  .chat-cop .chat-cop-send { padding: 8px 10px; font-size: 0; width: 38px; height: 34px; display: grid; place-items: center; }
  .chat-cop .chat-cop-send::before { content: "✦"; font-size: 15px; }
}

/* ---- MEMBERS col (presença ao vivo = F2; aqui só a lista real de membros) ---- */
.chat-app .members-col { border-left: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; min-width: 0; }
.chat-app .members-head { padding: 15px 16px 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* MEU STATUS trigger (Onda D · opt-out) — botãozinho de linha à direita do cabeçalho de membros */
.chat-app .members-status { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; flex: none; font-size: 13px; }
.chat-app .members-status:hover { color: var(--chat); border-color: var(--chat); }
[data-theme="dark"] .chat-app .members-status:hover { color: var(--chat-2); }
.chat-app .members-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
/* RÓTULO de grupo de presença (fidelidade fase-2 · proto: "Neste canal agora / Online no Hub / Offline" + contagem) */
.chat-app .members-scroll .mgl { padding: 10px 10px 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); display: flex; align-items: baseline; gap: 6px; }
.chat-app .members-scroll .mgl .cnt { color: var(--ink-faint); font-weight: 800; }
.chat-app .members-scroll .mgl .cnt::before { content: "· "; }
/* sub-linha "aqui, neste canal" (grupo here) e "atividade oculta" (opt-out) */
.chat-app .mem .info .pres.here { color: var(--ok-text); font-weight: 600; }
.chat-app .mem .info .pres.hidden-act { font-style: italic; }
.chat-app .mem { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-sm); }
/* PRESENÇA RICA (Onda D) — avatar com dot de status + sub-linha "onde está" */
.chat-app .mem .ava-wrap { position: relative; flex: none; }
.chat-app .mem .ava { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; }
.chat-app .mem .ava-wrap .pdot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface-2); }
.chat-app .mem .ava-wrap .pdot.idle { background: var(--warn); }
.chat-app .mem .info { min-width: 0; }
.chat-app .mem .info .n { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app .mem .info .pres { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-app .mem.online .info .pres { color: var(--ok); }
.chat-app .mem.online:not(.mem-dm) .info .pres, .chat-app .mem-dm.online .info .pres { color: var(--ink-soft); }
/* MEU STATUS overlay — linha de toggle (switch) do opt-out */
.chat-app .sheet .status-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font: inherit; }
.chat-app .sheet .status-row .si-mk { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; font-size: 16px; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); }
.chat-app .sheet .status-row .si-t { flex: 1; min-width: 0; }
.chat-app .sheet .status-row .si-t .a { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.chat-app .sheet .status-row .si-t .b { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; }
.chat-app .sheet .status-row .switch { width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--line-2); flex: none; position: relative; transition: background .16s; }
.chat-app .sheet .status-row .switch.on { background: var(--ok); }
.chat-app .sheet .status-row .switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .16s; }
.chat-app .sheet .status-row .switch.on .knob { transform: translateX(16px); }
.chat-app .sheet .status-note { font-size: 11.5px; color: var(--ink-soft); padding: 10px 12px 4px; }

/* ============================================================
   THREADS (hub.chat.threads · proto fase-2) — afordância "N respostas · última há X" na msg-pai +
   painel de thread que REUSA a coluna de contexto (raiz + respostas + compositor). Ícones de LINHA
   (HubIcon message-square), hue do Chat (--chat). Fiel ao proto (.tp-origin/.tp-count/.tpm/.tp-input).
   ============================================================ */
/* AFORDÂNCIA na msg-pai — link discreto sob a mensagem (proto: "3 respostas · última há 4 min"). */
.chat-thread .thread-affordance {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; padding: 3px 4px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--chat); border-radius: var(--r-sm); }
.chat-thread .thread-affordance:hover { text-decoration: underline; }
.chat-thread .thread-affordance.on { color: var(--chat); background: var(--chat-soft, rgba(124,111,240,.10)); text-decoration: none; }
.chat-thread .thread-affordance .hub-ico { font-size: 13px; flex: none; }
.chat-thread .thread-affordance .ta-last { color: var(--ink-faint); font-weight: 600; }
.chat-thread .thread-affordance .ta-fp { display: inline-flex; margin-left: 1px; }
.chat-thread .thread-affordance .ta-fp span {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--surface); margin-left: -5px;
  display: grid; place-items: center; color: #fff; font-size: 8.5px; font-weight: 700; }
.chat-thread .thread-affordance .ta-fp span:first-child { margin-left: 0; }

/* PAINEL DE THREAD na coluna de contexto (members-col reusada · .ctx-thread). */
.chat-app .members-col.ctx-thread { padding: 0; }
.chat-app .ctx-thread .ctx-head {
  padding: 13px 15px 8px; display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.chat-app .ctx-thread .ctx-head .hub-ico { font-size: 13px; color: var(--chat); }
.chat-app .ctx-thread .ctx-head .ch-t { flex: 1; }
.chat-app .ctx-thread .ctx-head .x {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; flex: none; font-size: 13px; }
.chat-app .ctx-thread .ctx-head .x:hover { color: var(--chat); border-color: var(--chat); }
.chat-app .ctx-thread .ctx-scroll { flex: 1; overflow-y: auto; }
.chat-app .ctx-thread .tp-root { padding: 6px 12px 14px; display: flex; flex-direction: column; }
/* Mensagem-RAIZ (origem da thread). */
.chat-app .ctx-thread .tp-origin {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 10px 12px; margin-bottom: 4px; }
.chat-app .ctx-thread .tp-origin .l1 { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.chat-app .ctx-thread .tp-origin .l1 .who,
.chat-app .ctx-thread .tpm .who {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 10px; }
.chat-app .ctx-thread .tp-origin .l1 .nm { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.chat-app .ctx-thread .tp-origin .l1 .tm { font-size: 10.5px; color: var(--ink-faint); margin-left: auto; }
.chat-app .ctx-thread .tp-origin .txt { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* Contador "N respostas" com régua. */
.chat-app .ctx-thread .tp-count {
  font-size: 11px; color: var(--ink-faint); font-weight: 700; margin: 8px 2px; display: flex; align-items: center; gap: 8px; }
.chat-app .ctx-thread .tp-count::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Cada resposta. */
.chat-app .ctx-thread .tpm { display: flex; gap: 8px; padding: 5px 2px; }
.chat-app .ctx-thread .tpm .body { min-width: 0; }
.chat-app .ctx-thread .tpm .l1 { display: flex; align-items: baseline; gap: 6px; }
.chat-app .ctx-thread .tpm .l1 .nm { font-weight: 700; font-size: 12px; color: var(--ink); }
.chat-app .ctx-thread .tpm .l1 .tm { font-size: 10px; color: var(--ink-faint); }
.chat-app .ctx-thread .tpm .txt { font-size: 12.5px; line-height: 1.45; margin-top: 1px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
/* Compositor da thread. */
.chat-app .ctx-thread .tp-input {
  margin: 10px 2px 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); }
.chat-app .ctx-thread .tp-input.disabled { opacity: .55; pointer-events: none; }
.chat-app .ctx-thread .tp-input .i { color: var(--ink-faint); font-size: 14px; flex: none; display: grid; place-items: center; }
.chat-app .ctx-thread .tp-input .tp-msg {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 12.5px; color: var(--ink); }
.chat-app .ctx-thread .tp-input .send {
  width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--chat); color: #fff; cursor: pointer;
  display: grid; place-items: center; flex: none; font-size: 14px; }
.chat-app .ctx-thread .tp-input .send:hover { filter: brightness(1.06); }
/* Mobile: a coluna de contexto some no grid estreito; a thread vira full-width sobre a conversa. */
@media (max-width: 1080px) { .chat-app .members-col.ctx-thread { display: flex; } }

/* ============================================================
   APP ASK (chat-com-dados soberano · RAG) — FATIA 1
   Superfície NATIVA /ask: pergunta → resposta fundamentada (streaming) + cite-chip + drawer de procedência.
   Fiel ao protótipo aprovado (ask/examples/prototipo.html). Hue própria da IA (--ai) no chrome; hue de
   "fonte" (--asrc) na cite-chip ("veio do SEU dado"). TUDO escopado sob .ask-page / [data-ask-drawer] pra
   não colidir com o drawer do copiloto do Hub (que hub.js dirige com .on/.tag). ZERO paleta nova (--asrc
   = o azul-fonte do protótipo). ZERO emoji nos assets do produto — glifos ✦/◈/▤/↗ herdam currentColor.
   ============================================================ */
.ask-page { --asrc: #3B82F6; --asrc-2: #60A5FA; --asrc-soft: rgba(59,130,246,.10); }
[data-theme="dark"] .ask-page { --asrc-soft: rgba(96,165,250,.14); }

.ask-page .sa-badge.ai { color: var(--hue, var(--ai)); background: var(--hue, var(--ai-soft, rgba(109,93,232,.12))); }
[data-theme="dark"] .ask-page .sa-badge.ai { color: var(--hue2, var(--ai-2)); }

/* console de pergunta */
.ask-page .ask { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md);
  border: 1px solid var(--line); overflow: hidden; position: relative; isolation: isolate; margin-top: 6px; }
.ask-page .ask-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ask-page .ask-mark { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 5px 15px -4px var(--hue, var(--ai)); }
.ask-page .ask-head .t { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.ask-page .ask-head .s { color: var(--ink-faint); font-size: 13px; }
.ask-page .ask-head .grow { margin-left: auto; }
.ask-page .sovereign { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--r-pill); color: var(--ok, #0FA968); background: rgba(15,169,104,.12); }

.ask-page .thread { padding: 20px; display: flex; flex-direction: column; gap: 22px; min-height: 40px; }
.ask-page .thread:empty { display: none; }

.ask-page .turn-user { display: flex; gap: 12px; align-items: flex-start; justify-content: flex-end; }
.ask-page .turn-user .q { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px 4px 14px 14px; padding: 10px 14px; font-size: 14.5px; color: var(--ink); max-width: 78%; }
.ask-page .turn-user .ava, .ask-page .turn-ai .mk { width: 30px; height: 30px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }
.ask-page .turn-user .ava { background: linear-gradient(135deg, #F0468B, #A855F7); }
.ask-page .turn-ai { display: flex; gap: 12px; align-items: flex-start; }
.ask-page .turn-ai .mk { border-radius: 10px; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 4px 12px -4px var(--hue, var(--ai)); }
.ask-page .turn-ai .body { flex: 1; min-width: 0; }
.ask-page .answer { font-size: 14.5px; color: var(--ink); line-height: 1.62; }

/* caret de streaming */
.ask-page .caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.16em; margin-left: 2px;
  background: var(--hue, var(--ai)); border-radius: 2px; animation: ask-blink 1.05s steps(2) infinite; }
[data-theme="dark"] .ask-page .caret { background: var(--hue2, var(--ai-2)); }
@keyframes ask-blink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@media (prefers-reduced-motion: reduce) { .ask-page .caret { animation: none; } }

/* nível de confiança (WCAG 1.4.1 — ícone+texto+cor, nunca só cor) */
.ask-page .confidence { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill); margin-top: 12px; }
.ask-page .confidence.high { background: rgba(15,169,104,.13); color: var(--ok, #0FA968); }
.ask-page .confidence.medium { background: rgba(230,160,30,.15); color: #B4791A; }
[data-theme="dark"] .ask-page .confidence.medium { color: #E6A81E; }
.ask-page .confidence.opinion, .ask-page .confidence.unknown { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line-2); }

/* cite-row + cite-chip do Ask (hue de fonte) */
.ask-page .cite-row { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); }
.ask-page .cite-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: var(--r-pill); text-decoration: none; font-family: inherit;
  color: var(--asrc); background: var(--asrc-soft); border: 1px solid rgba(59,130,246,.24); transition: background .16s, border-color .16s; }
[data-theme="dark"] .ask-page .cite-chip { color: var(--asrc-2); }
.ask-page .cite-chip:hover, .ask-page .cite-chip:focus-visible { background: rgba(59,130,246,.18); border-color: var(--asrc); outline: none; }

/* estado "sem fonte → —" (a casa não inventa dado) */
.ask-page .no-source { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--ink-faint); padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px dashed var(--line-2); }
.ask-page .no-source .dash { font-weight: 800; color: var(--ink-soft); }

/* por-quê (procedência) */
.ask-page .ask-why { margin-top: 10px; font-size: 12.5px; }
.ask-page .ask-why summary { cursor: pointer; color: var(--ink-faint); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.ask-page .ask-why summary .i { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 800; color: var(--hue, var(--ai)); background: var(--hue, var(--ai-soft, rgba(109,93,232,.12))); }
.ask-page .ask-why .prov { margin-top: 6px; color: var(--ink-soft); line-height: 1.55; }

/* chips de sugestão */
.ask-page .ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
.ask-page .ask-suggest button { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--hue, var(--ai));
  background: var(--hue, var(--ai-soft, rgba(109,93,232,.12))); border: 1px solid rgba(109,93,232,.24); border-radius: var(--r-pill); padding: 6px 12px; }
[data-theme="dark"] .ask-page .ask-suggest button { color: var(--hue2, var(--ai-2)); }

/* barra de entrada */
.ask-page .ask-input { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.ask-page .ask-input .field { flex: 1; display: flex; align-items: center; gap: 9px; padding: 2px 14px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-2); }
.ask-page .ask-input .field .g { color: var(--hue, var(--ai)); flex: none; }
[data-theme="dark"] .ask-page .ask-input .field .g { color: var(--hue2, var(--ai-2)); }
.ask-page .ask-input .field input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; padding: 10px 0; }
.ask-page .ask-input .field input::placeholder { color: var(--ink-faint); }
.ask-page .ask-input .send { width: 40px; height: 40px; border-radius: var(--r-pill); flex: none; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 5px 14px -5px var(--hue, var(--ai)); }
.ask-page .ask-input .send:disabled { opacity: .55; cursor: default; }

/* estado OFF (gate honesto) */
.ask-page .ask-off { display: flex; gap: 16px; align-items: flex-start; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 22px; margin-top: 6px; }
.ask-page .ask-off-mark { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  color: var(--hue, var(--ai)); background: var(--hue, var(--ai-soft, rgba(109,93,232,.12))); font-size: 20px; }
[data-theme="dark"] .ask-page .ask-off-mark { color: var(--hue2, var(--ai-2)); }
.ask-page .ask-off-body h2 { font-size: 17px; margin: 0 0 6px; }
.ask-page .ask-off-body p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }

/* ---- DRAWER DE PROCEDÊNCIA do Ask (split resposta↔fonte) — escopado por [data-ask-drawer] ---- */
.cite-drawer[data-ask-drawer] { position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(12,11,26,.42); backdrop-filter: blur(2px); justify-content: flex-end; }
.cite-drawer[data-ask-drawer].open { display: flex; }
.cite-drawer[data-ask-drawer] .cite-panel { width: min(480px, 94vw); height: 100%; background: var(--surface);
  box-shadow: var(--shadow-lg); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden;
  transform: none; opacity: 1; animation: ask-slidein .22s cubic-bezier(.2,.8,.2,1); }
@keyframes ask-slidein { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.cite-drawer[data-ask-drawer] .cite-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cite-drawer[data-ask-drawer] .cite-head .mk { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  color: var(--asrc, #3B82F6); background: rgba(59,130,246,.10); }
.cite-drawer[data-ask-drawer] .cite-head h3 { font-weight: 700; font-size: 15px; margin: 0; }
.cite-drawer[data-ask-drawer] .cite-head p { color: var(--ink-faint); font-size: 12.5px; margin: 2px 0 0; }
.cite-drawer[data-ask-drawer] .cite-head .x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.cite-drawer[data-ask-drawer] .cite-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.cite-drawer[data-ask-drawer] .cite-echo { font-size: 13px; color: var(--ink-soft); line-height: 1.55; padding: 12px 14px;
  border-radius: var(--r-sm); background: var(--hue, var(--ai-soft, rgba(109,93,232,.12))); border: 1px solid rgba(109,93,232,.2); }
.cite-drawer[data-ask-drawer] .cite-echo .lab { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--hue, var(--ai)); margin-bottom: 6px; }
[data-theme="dark"] .cite-drawer[data-ask-drawer] .cite-echo .lab { color: var(--hue2, var(--ai-2)); }
.cite-drawer[data-ask-drawer] .src-lab { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  color: var(--asrc, #3B82F6); text-transform: uppercase; letter-spacing: .04em; }
.cite-drawer[data-ask-drawer] .src-lab .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #0FA968); box-shadow: 0 0 0 3px rgba(15,169,104,.2); }
.cite-drawer[data-ask-drawer] .src-doc { border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.cite-drawer[data-ask-drawer] .doc-top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.cite-drawer[data-ask-drawer] .doc-top .g { color: var(--asrc, #3B82F6); }
.cite-drawer[data-ask-drawer] .doc-top .nm { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.cite-drawer[data-ask-drawer] .src-rows { padding: 4px 0; }
.cite-drawer[data-ask-drawer] .src-rows .r { display: flex; gap: 12px; padding: 8px 15px; font-size: 12.5px; }
.cite-drawer[data-ask-drawer] .src-rows .r .k { color: var(--ink-faint); min-width: 120px; }
.cite-drawer[data-ask-drawer] .src-rows .r .v { color: var(--ink-soft); font-weight: 600; }
.cite-drawer[data-ask-drawer] .src-rows .r.hl .v { color: var(--ink); background: rgba(59,130,246,.14); border-radius: 4px; padding: 0 4px; }
.cite-drawer[data-ask-drawer] .provenance { display: flex; flex-direction: column; gap: 8px; }
.cite-drawer[data-ask-drawer] .prov-row { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink-soft); }
.cite-drawer[data-ask-drawer] .prov-row .k { color: var(--ink-faint); min-width: 96px; }
.cite-drawer[data-ask-drawer] .prov-row .v { font-weight: 600; color: var(--ink); }
.cite-drawer[data-ask-drawer] .cite-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.cite-drawer[data-ask-drawer] .cite-foot .open { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--r-pill); text-decoration: none; color: var(--asrc, #3B82F6); background: var(--asrc-soft, rgba(59,130,246,.10));
  border: 1px solid rgba(59,130,246,.24); }
.cite-drawer[data-ask-drawer] .cite-foot .scope { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.cite-drawer[data-ask-drawer] .cite-foot .scope .g { color: var(--ok, #0FA968); }

@media (max-width: 560px) {
  .cite-drawer[data-ask-drawer] .cite-panel { width: 100vw; }
}

/* ============================================================================================
   EMISSOR — módulo fiscal nativo (Onda 2b · 3 telas: Emitente / Emitir / Notas). Fiel ao proto
   REV-2 (docs/proto-ux/emissor). Design system do Hub (indigo→violeta), dark/light AA, ZERO emoji
   (glifos SVG currentColor). TUDO escopado sob .emissor-page. Reusa .btn/.panel/.pagehead da casa.
   ============================================================================================ */
.emissor-page .gsvg { display: inline-block; vertical-align: -0.14em; flex: none; }
.emissor-page .sa-badge.emi { color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .emissor-page .sa-badge.emi { color: var(--hue2, var(--hub-2)); }
.emissor-page .pagehead h1 em { font-style: normal; background: linear-gradient(120deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- gate off --- */
.emissor-page .emi-off { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 26px; }
.emissor-page .emi-off-mark { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .emissor-page .emi-off-mark { color: var(--hue2, var(--hub-2)); }
.emissor-page .emi-off-mark .gsvg { width: 24px; height: 24px; }
.emissor-page .emi-off-body h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; margin: 0 0 6px; }
.emissor-page .emi-off-body p { color: var(--ink-soft); margin: 0; font-size: 14px; }

/* --- tabs (segmented) --- */
.emissor-page .emi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.emissor-page .emi-tab { border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 12px 14px 11px; cursor: pointer; white-space: nowrap; border-bottom: 2.5px solid transparent; display: inline-flex; align-items: center; gap: 8px; }
.emissor-page .emi-tab .num { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--surface-2, var(--line)); color: var(--ink-faint); }
.emissor-page .emi-tab:hover { color: var(--ink); }
.emissor-page .emi-tab.active { color: var(--hue, var(--hub)); border-bottom-color: var(--hue, var(--hub)); }
.emissor-page .emi-tab.active .num { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .emissor-page .emi-tab.active { color: var(--hue2, var(--hub-2)); border-bottom-color: var(--hue2, var(--hub-2)); }
[data-theme="dark"] .emissor-page .emi-tab.active .num { color: var(--hue2, var(--hub-2)); }

/* --- screen head --- */
.emissor-page .emi-screen-head { margin-bottom: 18px; }
.emissor-page .emi-screen-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; letter-spacing: -.01em; }
.emissor-page .emi-screen-head p { color: var(--ink-soft); margin: 6px 0 0; max-width: 720px; }
.emissor-page .emi-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: 16px 0 10px; }

/* --- panels + grids --- */
.emissor-page .emi-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 16px; }
.emissor-page .emi-panel > h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; margin: 0 0 3px; }
.emissor-page .emi-panel-sub { color: var(--ink-faint); font-size: 13px; margin: 0 0 15px; }
.emissor-page .emi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.emissor-page .emi-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .emissor-page .emi-grid-2, .emissor-page .emi-grid-3 { grid-template-columns: 1fr; } }

/* --- fields --- */
.emissor-page .emi-field { margin-bottom: 12px; }
.emissor-page .emi-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.emissor-page .emi-ctl { width: 100%; padding: 10px 13px; border-radius: var(--r-sm); border: 1px solid var(--line-2, var(--line)); background: var(--surface-2, var(--surface)); color: var(--ink); font: inherit; font-size: 14px; }
.emissor-page .emi-ctl:focus { outline: none; border-color: var(--hue, var(--hub)); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); }
.emissor-page .emi-ctl.sm { padding: 7px 9px; font-size: 13px; }
.emissor-page .emi-ctl.tn { font-variant-numeric: tabular-nums; }
.emissor-page textarea.emi-ctl { resize: vertical; min-height: 62px; }
.emissor-page .emi-hint { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }
.emissor-page .tn { font-variant-numeric: tabular-nums; }
.emissor-page .tr { text-align: right; }

/* --- callouts --- */
.emissor-page .emi-callout { display: flex; gap: 11px; padding: 12px 15px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; border: 1px solid transparent; align-items: flex-start; }
.emissor-page .emi-callout .gsvg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.emissor-page .emi-callout b { color: var(--ink); }
.emissor-page .emi-callout.info { background: var(--info-soft, rgba(59,130,246,.12)); border-color: rgba(59,130,246,.28); } .emissor-page .emi-callout.info .gsvg { color: var(--info); }
.emissor-page .emi-callout.warn { background: var(--warn-soft, rgba(230,146,11,.13)); border-color: rgba(230,146,11,.3); } .emissor-page .emi-callout.warn .gsvg { color: var(--warn); }
.emissor-page .emi-callout.danger { background: var(--danger-soft, rgba(239,69,96,.11)); border-color: rgba(239,69,96,.3); } .emissor-page .emi-callout.danger .gsvg { color: var(--danger); }
.emissor-page .emi-callout.ok { background: var(--ok-soft, rgba(15,169,104,.12)); border-color: rgba(15,169,104,.3); } .emissor-page .emi-callout.ok .gsvg { color: var(--ok); }

/* --- provider option cards --- */
.emissor-page .emi-opt-row { display: flex; gap: 12px; flex-wrap: wrap; }
.emissor-page .emi-opt { flex: 1; min-width: 210px; border: 1.5px solid var(--line-2, var(--line)); border-radius: var(--r-md); padding: 15px; background: var(--surface-2, var(--surface)); position: relative; }
.emissor-page .emi-opt.sel { border-color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
.emissor-page .emi-opt .opt-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.emissor-page .emi-opt .logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px; background: linear-gradient(140deg, #0EA5A5, #0F766E); }
.emissor-page .emi-opt .logo.soon { background: linear-gradient(140deg, var(--ink-faint), var(--line-2, var(--line))); }
.emissor-page .emi-opt h4 { font-size: 15px; margin: 0; }
.emissor-page .emi-opt p { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.emissor-page .emi-opt .tag { position: absolute; top: 13px; right: 13px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill, 999px); }
.emissor-page .emi-opt .tag.on { background: var(--ok-soft, rgba(15,169,104,.12)); color: var(--ok); }
.emissor-page .emi-opt .tag.soon { background: var(--surface); color: var(--ink-faint); border: 1px solid var(--line-2, var(--line)); }

/* --- dropzone (cert) --- */
.emissor-page .emi-dropzone { display: block; border: 1.5px dashed var(--line-2, var(--line)); border-radius: var(--r-md); padding: 20px; text-align: center; background: var(--surface-2, var(--surface)); cursor: pointer; }
.emissor-page .emi-dropzone:hover { border-color: var(--hue, var(--hub)); }
.emissor-page .emi-dropzone .dz-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 10px; color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft)); }
[data-theme="dark"] .emissor-page .emi-dropzone .dz-ic { color: var(--hue2, var(--hub-2)); }
.emissor-page .emi-dropzone .dz-ic .gsvg { width: 22px; height: 22px; }
.emissor-page .emi-dropzone b { display: block; font-size: 14px; }
.emissor-page .emi-dropzone span { font-size: 12.5px; color: var(--ink-faint); }
.emissor-page .emi-file { display: block; margin: 8px auto; max-width: 260px; font-size: 12px; }

/* --- buttons row --- */
.emissor-page .emi-btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.emissor-page .emi-btn-row .btn .gsvg { width: 16px; height: 16px; }

/* --- type toggle NF-e/NFS-e --- */
.emissor-page .emi-emit-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.emissor-page .emi-type-toggle { display: inline-flex; background: var(--surface-2, var(--line)); border: 1px solid var(--line-2, var(--line)); border-radius: var(--r-pill, 999px); padding: 4px; gap: 4px; }
.emissor-page .emi-type-toggle button { border: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); padding: 8px 18px; border-radius: var(--r-pill, 999px); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.emissor-page .emi-type-toggle button .gsvg { width: 15px; height: 15px; }
.emissor-page .emi-type-toggle button.on { color: #fff; background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); box-shadow: 0 4px 12px -4px var(--hue, var(--hub)); }

/* --- items table --- */
/* min-width:0 + max-width:100% pra o container encolher no grid/flex e o overflow-x:auto scrollar
   a tabela de itens INTERNAMENTE no mobile, em vez de esticar a página (bug do gate headed 390px). */
.emissor-page .emi-items { overflow-x: auto; min-width: 0; max-width: 100%; }
.emissor-page .emi-mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.emissor-page .emi-mini-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: 8px 8px; border-bottom: 1px solid var(--line); }
.emissor-page .emi-mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.emissor-page .emi-add-item { border: none; background: transparent; color: var(--hue, var(--hub)); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
[data-theme="dark"] .emissor-page .emi-add-item { color: var(--hue2, var(--hub-2)); }
.emissor-page .emi-add-item .gsvg { width: 14px; height: 14px; }
.emissor-page .emi-icon-x { border: 1px solid var(--line-2, var(--line)); background: var(--surface); color: var(--ink-faint); border-radius: 8px; width: 28px; height: 28px; display: inline-grid; place-items: center; cursor: pointer; }
.emissor-page .emi-icon-x:hover { color: var(--danger); border-color: var(--danger); }
.emissor-page .emi-icon-x .gsvg { width: 14px; height: 14px; }
.emissor-page .emi-total-row { display: flex; justify-content: flex-end; align-items: baseline; gap: 22px; margin-top: 14px; font-size: 14px; }
.emissor-page .emi-total-row .big { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; font-weight: 800; }

/* --- success / processing banners --- */
.emissor-page .emi-success { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: var(--r-md); background: var(--ok-soft, rgba(15,169,104,.12)); border: 1px solid rgba(15,169,104,.34); margin-bottom: 16px; }
.emissor-page .emi-success .sb-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--ok), #34c98a); }
.emissor-page .emi-success .sb-ic .gsvg { width: 20px; height: 20px; }
.emissor-page .emi-success b { color: var(--ink); }
.emissor-page .emi-success .sb-sub { font-size: 12.5px; color: var(--ink-soft); }
.emissor-page .emi-processing { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: var(--r-md); background: var(--warn-soft, rgba(230,146,11,.13)); border: 1px solid rgba(230,146,11,.32); margin-bottom: 16px; }
.emissor-page .emi-processing b { color: var(--ink); }
.emissor-page .emi-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--warn-soft, rgba(230,146,11,.2)); border-top-color: var(--warn); animation: emi-spin .8s linear infinite; flex: none; }
@keyframes emi-spin { to { transform: rotate(360deg); } }

/* --- empty / skeleton --- */
.emissor-page .emi-empty { text-align: center; padding: 40px 20px; }
.emissor-page .emi-empty .es-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin: 0 auto 14px; color: var(--ink-faint); background: var(--surface-2, var(--line)); }
.emissor-page .emi-empty .es-ic .gsvg { width: 26px; height: 26px; }
.emissor-page .emi-empty h4 { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; margin-bottom: 6px; }
.emissor-page .emi-empty p { color: var(--ink-faint); font-size: 13.5px; max-width: 360px; margin: 0 auto 16px; }
.emissor-page .emi-skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2, var(--line)) 25%, var(--line) 37%, var(--surface-2, var(--line)) 63%); background-size: 400% 100%; animation: emi-shimmer 1.4s ease infinite; }
.emissor-page .emi-skel.row { height: 44px; margin-bottom: 8px; }
.emissor-page .emi-skel.row:last-child { margin-bottom: 0; }
@keyframes emi-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- notes table --- */
.emissor-page .emi-notes-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.emissor-page .emi-notes-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: 11px 12px; border-bottom: 1px solid var(--line); }
.emissor-page .emi-notes-table td { padding: 12px; border-bottom: 1px solid var(--line); }
.emissor-page .emi-notes-table tr.rejected td { background: var(--danger-soft, rgba(239,69,96,.11)); }
.emissor-page .emi-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill, 999px); }
.emissor-page .emi-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.emissor-page .emi-status.ok { background: var(--ok-soft, rgba(15,169,104,.12)); color: var(--ok); } .emissor-page .emi-status.ok .dot { background: var(--ok); }
.emissor-page .emi-status.rej { background: var(--danger-soft, rgba(239,69,96,.11)); color: var(--danger); } .emissor-page .emi-status.rej .dot { background: var(--danger); }
.emissor-page .emi-status.proc { background: var(--warn-soft, rgba(230,146,11,.13)); color: var(--warn); } .emissor-page .emi-status.proc .dot { background: var(--warn); }
.emissor-page .emi-status.canc { background: var(--surface-2, var(--line)); color: var(--ink-faint); } .emissor-page .emi-status.canc .dot { background: var(--ink-faint); }
.emissor-page .emi-type-chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
[data-theme="dark"] .emissor-page .emi-type-chip { color: var(--hue2, var(--hub-2)); }
.emissor-page .emi-type-chip.serv { background: var(--info-soft, rgba(59,130,246,.12)); color: var(--info); }

/* ============ TELA 4 · INCIDENTE (herói) — a face do loop de IA (ADR 016 · I1/I4/I6) ============
   Portado do proto (docs/proto-ux/emissor · seção .ai-diag/.decisions), tudo escopado sob .emissor-page.
   Reusa os vars de IA (--ai/--ai-2/--ai-soft), sucesso (--ok), info (--info) e o design system do Hub. */
/* linha rejeitada clicável → incidente (o CTA que a Onda 2b deixou pendente) */
.emissor-page .emi-notes-table tr.clickable { cursor: pointer; transition: background .14s; }
.emissor-page .emi-notes-table tr.clickable:hover td { background: var(--danger-soft, rgba(239,69,96,.16)); }
.emissor-page .emi-notes-table tr.clickable:focus-visible { outline: 2px solid var(--danger); outline-offset: -2px; }
.emissor-page .emi-row-cta { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 12px; font-weight: 800; color: var(--danger); }
.emissor-page .emi-row-cta .gsvg { width: 13px; height: 13px; }
/* voltar */
.emissor-page .emi-back { border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; margin-bottom: 10px; }
.emissor-page .emi-back:hover { color: var(--hue, var(--hub)); }
.emissor-page .emi-back .gsvg { width: 15px; height: 15px; }
.emissor-page .emi-incident-panel { padding: 22px; }
/* cabeçalho do incidente */
.emissor-page .incident-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.emissor-page .incident-head .fail-mark { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft, rgba(239,69,96,.11)); }
.emissor-page .incident-head .fail-mark .gsvg { width: 23px; height: 23px; }
.emissor-page .incident-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; margin: 0; }
.emissor-page .incident-head .who { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; }
.emissor-page .incident-head .grow { margin-left: auto; }
/* resumo da nota */
.emissor-page .note-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 14px 0; }
.emissor-page .note-summary .cell { padding: 12px 15px; border-right: 1px solid var(--line); }
.emissor-page .note-summary .cell:last-child { border-right: none; }
.emissor-page .note-summary .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; }
.emissor-page .note-summary .v { font-size: 14.5px; font-weight: 700; margin-top: 3px; }
@media (max-width: 640px) { .emissor-page .note-summary { grid-template-columns: 1fr 1fr; } .emissor-page .note-summary .cell:nth-child(2n) { border-right: none; } }
/* erro cru recolhível — detalhe técnico (procedência I4) */
.emissor-page .raw-error { border: 1px solid var(--line); border-radius: var(--r-sm); margin: 16px 0; overflow: hidden; }
.emissor-page .raw-error summary { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); list-style: none; background: var(--surface-2, var(--line)); }
.emissor-page .raw-error summary::-webkit-details-marker { display: none; }
.emissor-page .raw-error summary .gsvg { width: 15px; height: 15px; color: var(--ink-faint); }
.emissor-page .raw-error summary .chev { margin-left: auto; transition: transform .2s; }
.emissor-page .raw-error[open] summary .chev { transform: rotate(90deg); }
.emissor-page .raw-error .raw-body { padding: 13px 16px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.7; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; background: var(--surface); }
.emissor-page .raw-error .raw-body .code { color: var(--danger); font-weight: 700; }
/* card do diagnóstico da IA (HERÓI) */
.emissor-page .ai-diag { border-radius: var(--r-lg); position: relative; overflow: hidden; isolation: isolate; background: var(--surface); border: 1px solid rgba(124,111,240,.32); box-shadow: 0 10px 34px -14px var(--hue, var(--ai)); margin: 18px 0 4px; }
.emissor-page .ai-diag::before { content: ""; position: absolute; z-index: -1; top: -40%; right: -12%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--hue, var(--ai)), transparent 66%); opacity: .14; filter: blur(8px); }
.emissor-page .ai-diag::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); }
.emissor-page .ai-diag .diag-head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 12px 22px; flex-wrap: wrap; }
.emissor-page .ai-diag .diag-mark { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--hue, var(--ai)), var(--hue2, var(--ai-2))); box-shadow: 0 5px 15px -4px var(--hue, var(--ai)); }
.emissor-page .ai-diag .diag-mark .gsvg { width: 19px; height: 19px; }
.emissor-page .ai-diag .diag-head .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; }
.emissor-page .ai-diag .diag-head .s { font-size: 12.5px; color: var(--ink-faint); }
.emissor-page .ai-diag .diag-head .grow { margin-left: auto; }
/* selo de procedência / auditoria (ADR 016 · I4/I6) */
.emissor-page .provenance { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); color: var(--hue, var(--ai)); background: var(--hue-soft, var(--ai-soft)); }
[data-theme="dark"] .emissor-page .provenance { color: var(--hue2, var(--ai-2)); }
.emissor-page .provenance .gsvg { width: 13px; height: 13px; }
.emissor-page .diag-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hue, var(--ai)); padding: 0 20px 0 22px; margin-top: 6px; }
[data-theme="dark"] .emissor-page .diag-label { color: var(--hue2, var(--ai-2)); }
.emissor-page .diag-cause { padding: 5px 20px 6px 22px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); }
.emissor-page .diag-body { padding: 0 20px 4px 22px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.emissor-page .diag-body b { color: var(--ink); }
.emissor-page .diag-reco { margin: 14px 20px 6px 22px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ok-soft, rgba(15,169,104,.12)); border: 1px solid rgba(15,169,104,.3); }
.emissor-page .diag-reco .reco-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ok); display: inline-flex; align-items: center; gap: 7px; }
.emissor-page .diag-reco .reco-label .gsvg { width: 14px; height: 14px; }
.emissor-page .diag-reco .reco-text { font-size: 14.5px; color: var(--ink); margin-top: 6px; line-height: 1.55; }
/* a linha do gate: a IA sugere, você autoriza */
.emissor-page .decision-gate { display: flex; align-items: center; gap: 10px; margin: 14px 20px 14px 22px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-soft); }
.emissor-page .decision-gate .gsvg { width: 16px; height: 16px; color: var(--hue, var(--ai)); flex: none; }
[data-theme="dark"] .emissor-page .decision-gate .gsvg { color: var(--hue2, var(--ai-2)); }
.emissor-page .decision-gate b { color: var(--ink); }
/* as 3 decisões do cliente */
.emissor-page .decisions { padding: 4px 20px 20px 22px; }
.emissor-page .decisions .dz-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 11px; }
.emissor-page .decision-actions { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 11px; }
@media (max-width: 720px) { .emissor-page .decision-actions { grid-template-columns: 1fr; } }
.emissor-page .dec-btn { border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-md); padding: 14px; text-align: left; cursor: pointer; font: inherit; transition: border-color .16s, box-shadow .16s, transform .16s; display: flex; flex-direction: column; gap: 5px; }
.emissor-page .dec-btn:hover:not(:disabled) { transform: translateY(-1px); }
.emissor-page .dec-btn:disabled { opacity: .55; cursor: default; }
.emissor-page .dec-btn .db-head { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; font-family: "Bricolage Grotesque", sans-serif; }
.emissor-page .dec-btn .db-head .gsvg { width: 17px; height: 17px; }
.emissor-page .dec-btn .db-sub { font-size: 12.5px; color: var(--ink-soft); }
.emissor-page .dec-btn.accept { border-color: rgba(15,169,104,.45); }
.emissor-page .dec-btn.accept .db-head { color: var(--ok); }
.emissor-page .dec-btn.accept:hover:not(:disabled) { box-shadow: 0 8px 22px -10px var(--ok); border-color: var(--ok); }
.emissor-page .dec-btn.switch { border-color: rgba(59,130,246,.4); }
.emissor-page .dec-btn.switch .db-head { color: var(--info); }
.emissor-page .dec-btn.switch:hover:not(:disabled) { box-shadow: 0 8px 22px -10px var(--info); border-color: var(--info); }
.emissor-page .dec-btn.defer .db-head { color: var(--ink-soft); }
.emissor-page .dec-btn.defer:hover:not(:disabled) { box-shadow: var(--shadow-md); }
/* a ação recomendada pela IA vem realçada (default) — as demais ficam disponíveis mas honestas */
.emissor-page .dec-btn.reco { box-shadow: 0 0 0 2px var(--hue-soft, var(--ai-soft)); border-color: var(--hue, var(--ai)); }
[data-theme="dark"] .emissor-page .dec-btn.reco { border-color: var(--hue2, var(--ai-2)); }

/* ============ TELA 5 · CONFIG DE PROVEDORES ============ */
/* Credencial mascarada (mostra que HÁ uma credencial, nunca revela o valor · C2/I3). */
.emissor-page .emi-masked { width: 100%; padding: 10px 13px; border-radius: var(--r-sm); border: 1px dashed var(--line-2, var(--line)); background: var(--surface-2, var(--surface)); color: var(--ink-soft); font: inherit; font-size: 14px; letter-spacing: .06em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.emissor-page .emi-masked .gsvg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.emissor-page .emi-provider-head { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.emissor-page .emi-provider-head .logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 13px; background: linear-gradient(140deg, #0EA5A5, #0F766E); }
/* roteamento documento → provedor (tabela) */
.emissor-page .emi-route-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.emissor-page .emi-route-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: 10px 10px; border-bottom: 1px solid var(--line); }
.emissor-page .emi-route-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.emissor-page .emi-route-table .rt-arrow { color: var(--ink-faint); width: 22px; }
.emissor-page .emi-route-table .rt-arrow .gsvg { width: 15px; height: 15px; }
.emissor-page .emi-route-select { min-width: 210px; }
.emissor-page .emi-route-prio { width: 76px; }
/* placeholder "adicionar provedor" (a interface IFiscalProvider aceita novos adaptadores) */
.emissor-page .emi-add-provider { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 14px 16px; border: 1.5px dashed var(--line-2, var(--line)); border-radius: var(--r-md); background: var(--surface-2, var(--surface)); font-size: 13px; color: var(--ink-soft); }
.emissor-page .emi-add-provider .gsvg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--ink-faint); }
.emissor-page .emi-add-provider b { color: var(--ink); }

/* ============================================================
   TELA SISTÊMICA "SEM ACESSO A ESTE APP" (Components/Pages/SemAcesso.razor · proto sem-acesso/proto-fase1).
   Interstício Hub-owned servido no /connect/authorize interativo quando o gate nega a entrada num app.
   Cânone Aurora (mesmos tokens do hub.css); DNA visual do "Descubra" (monograma+anel+selo, aura na hue do app).
   Prefixo `sa-` pra ficar autocontido (não colide com .btn/.appmark/.eyebrow globais). --hue/--hue2/--hue-soft
   vêm inline na .sa-stage (hue efetiva por eixo, resolvida no server). Dark/light AA; responsivo; acessível.
   ============================================================ */
.sa-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); }
.sa-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 8px;
  padding: 12px clamp(16px, 5vw, 40px); background: var(--glass, var(--surface)); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.sa-topbar .brand { color: var(--ink); }
.sa-topback { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 7px 14px; transition: all .16s; }
.sa-topback:hover { color: var(--ink); border-color: var(--ink-faint); }
.sa-topback:focus-visible { outline: 2px solid var(--hue, var(--hub)); outline-offset: 2px; }

/* palco centrado com a aura na cor do app (a luz da tela é a hue do app que o usuário tentou abrir) */
.sa-stage { flex: 1; display: grid; place-items: center; position: relative; padding: clamp(28px, 6vw, 68px) 20px; }
.sa-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 18% -10%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 60%),
    radial-gradient(680px 460px at 82% -12%, color-mix(in srgb, var(--hue2) 18%, transparent), transparent 62%); }

.sa-card { position: relative; z-index: 1; width: 100%; max-width: 560px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: clamp(30px, 5vw, 48px) clamp(24px, 5vw, 52px); overflow: hidden;
  animation: sa-card-in .4s cubic-bezier(.2,.8,.3,1); }
.sa-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--hue) 20%, var(--hue2) 80%, transparent); opacity: .9; }
@keyframes sa-card-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sa-card { animation: none; } }

/* monograma + anel (assinatura do Descubra, escala herói) */
.sa-appmark { position: relative; width: 88px; height: 88px; margin: 0 auto 22px; }
.sa-appmark svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sa-ring-track { fill: none; stroke: var(--line-2); stroke-width: 5; }
.sa-ring-val { fill: none; stroke: var(--hue); stroke-width: 5; stroke-linecap: round; }
.sa-glyph { position: absolute; inset: 12px; border-radius: 19px; display: grid; place-items: center; color: #fff;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 30px;
  background: linear-gradient(140deg, var(--hue), var(--hue2)); box-shadow: 0 8px 22px -6px var(--hue); }
.sa-seal { position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; color: #fff; border: 3px solid var(--surface); box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--hue), var(--hue2)); }

/* variação por MOTIVO no monograma (espelha o Descubra) */
.sa-card[data-kind="coming"] .sa-seal { background: linear-gradient(135deg, var(--avisos), var(--avisos-2)); }
.sa-card[data-kind="offered"] .sa-ring-track { stroke: var(--line-2); stroke-dasharray: 4 5; opacity: .7; }
.sa-card[data-kind="offered"] .sa-ring-val { stroke: transparent; }
.sa-card[data-kind="offered"] .sa-glyph { background: var(--surface-2); color: var(--ink-faint); box-shadow: none; border: 1px dashed var(--line-2); filter: grayscale(1); }
.sa-card[data-kind="offered"] .sa-seal { background: var(--surface-2); color: var(--ink-soft); border-color: var(--surface); }
.sa-card[data-kind="region"] .sa-ring-track { stroke: rgba(59,130,246,.35); }
.sa-card[data-kind="region"] .sa-ring-val { stroke: transparent; }
.sa-card[data-kind="region"] .sa-glyph { background: rgba(59,130,246,.10); color: var(--fluxion); box-shadow: none; border: 1px solid rgba(59,130,246,.35); }
[data-theme="dark"] .sa-card[data-kind="region"] .sa-glyph { color: var(--fluxion-2); }
.sa-card[data-kind="region"] .sa-seal { background: linear-gradient(135deg, var(--fluxion), var(--fluxion-2)); }
.sa-card[data-kind="unconf"] .sa-ring-val { stroke: transparent; }
.sa-card[data-kind="unconf"] .sa-glyph { background: var(--surface-2); color: var(--ink-faint); box-shadow: none; border: 1px solid var(--line-2); filter: grayscale(.8); }
.sa-card[data-kind="unconf"] .sa-seal { background: var(--surface-2); color: var(--ink-soft); border-color: var(--surface); }

.sa-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--hue); background: var(--hue-soft); padding: 5px 13px; border-radius: var(--r-pill); margin-bottom: 14px; }
[data-theme="dark"] .sa-eyebrow { color: var(--hue2); }
.sa-card[data-kind="offered"] .sa-eyebrow, .sa-card[data-kind="unconf"] .sa-eyebrow { color: var(--ink-soft); background: var(--line); }
.sa-card[data-kind="region"] .sa-eyebrow { color: var(--fluxion); background: rgba(59,130,246,.12); }
[data-theme="dark"] .sa-card[data-kind="region"] .sa-eyebrow { color: var(--fluxion-2); }

.sa-title { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(23px, 3.4vw, 29px); letter-spacing: -.02em; line-height: 1.18; }
.sa-title em { font-style: normal; color: var(--hue); }
[data-theme="dark"] .sa-title em { color: var(--hue2); }
.sa-card[data-kind="offered"] .sa-title em, .sa-card[data-kind="unconf"] .sa-title em { color: var(--ink); }
.sa-lede { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; max-width: 44ch; margin: 12px auto 0; }

/* "o que o app faz" — herói do upsell (só no NoSubscription · data-driven do catálogo) */
.sa-whatis { margin: 20px auto 0; max-width: 46ch; padding: 14px 18px; text-align: left; border-radius: var(--r-md);
  background: var(--hue-soft); border: 1px solid color-mix(in srgb, var(--hue) 22%, var(--line)); }
.sa-whatis-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--hue); margin-bottom: 5px; }
[data-theme="dark"] .sa-whatis-t { color: var(--hue2); }
.sa-whatis-d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

.sa-actions { display: flex; gap: 11px; margin-top: 26px; justify-content: center; flex-wrap: wrap; }
.sa-btn { font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; border: none; padding: 12px 22px;
  border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px;
  transition: transform .16s, box-shadow .16s, background .16s; }
.sa-btn:active { transform: scale(.97); }
.sa-btn:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }
.sa-btn-primary { color: #fff; background: linear-gradient(135deg, var(--hue), var(--hue2)); box-shadow: 0 6px 18px -5px var(--hue); }
.sa-btn-primary:hover { box-shadow: 0 11px 26px -6px var(--hue); }
.sa-btn-soft { color: var(--hue); background: var(--hue-soft); }
[data-theme="dark"] .sa-btn-soft { color: #fff; }
.sa-btn-ghost { color: var(--ink-soft); background: transparent; border: 1px solid var(--line-2); }
.sa-btn-ghost:hover { color: var(--ink); background: var(--line); border-color: var(--ink-faint); }
.sa-card[data-kind="region"] .sa-btn-primary { background: linear-gradient(135deg, var(--fluxion), var(--fluxion-2)); box-shadow: 0 6px 18px -5px var(--fluxion); }

/* estado confirmado (após "avise-me"/"pedir"/"reportar") — nunca beco sem saída */
.sa-confirm { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 24px; font-size: 14.5px;
  font-weight: 600; color: var(--ok); background: rgba(15,169,104,.12); padding: 12px 18px; border-radius: var(--r-pill); }

.sa-tertiary { margin-top: 14px; font-size: 13px; }
.sa-tertiary a { color: var(--ink-soft); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sa-tertiary a:hover { color: var(--ink); }
.sa-tertiary a:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; border-radius: 4px; }

.sa-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint); }
.sa-foot a { color: var(--hue); font-weight: 600; text-decoration: none; }
[data-theme="dark"] .sa-foot a { color: var(--hue2); }
.sa-foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .sa-actions { flex-direction: column; }
  .sa-btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   SA PAGE KIT — Onda 0 (biblioteca-fundação da área SA · Components/Sa/*)
   Padroniza header/estado/segmentado + estende o DataTable, e conserta a CLASSE
   de defeito da auditoria do Léo. Zero cor hardcoded — só tokens da casa.
     F-01  ação cortada na borda      → .dtable-scroll.dt-sticky (coluna sticky)
     F-02/F-09  valor órfão no mobile → .dtable-scroll.dt-cards (card rótulo:valor)
     F-06/F-07  segmentado vira oval  → .sa-seg (grade de retângulos, ativo roxo)
     F-08  menu de linha clipado      → SaRowActions reusa AuroraSelect (popover fixed)
   ============================================================================ */

/* ---------- Overlay de modal da área SA (.cover/.dialog) — CANÔNICO, viaja com o SA Page Kit ----------
   Antes vivia só no <style> de páginas específicas (ex.: o drill de licenças), então um modal COMPARTILHADO
   (SaLicenseModal) aberto de uma página SEM essas regras (a LISTA /sa/licencas) ficava position:static — sem
   scrim, empurrado pro fim do fluxo. Aqui é global (sempre carregado) → o overlay funciona onde quer que o
   modal seja usado, sem duplicar por página. */
.cover { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
/* Scrim (tint + blur) num ::before z-index:-1 — NÃO no .cover — DE PROPÓSITO (seleção morta em modal · 2026-08-16).
   `backdrop-filter` no PRÓPRIO .cover o tornava CONTAINING BLOCK de descendentes position:fixed (regra CSS: filter/
   backdrop-filter criam CB pra fixed, IGUAL a transform — confirmado empírico Chromium+WebKit: painel preso à caixa
   do .cover). Isso PRENDIA o .adrop-panel do AuroraSelect (fixed, z:var(--z-popover)=1200) DENTRO do .cover; no
   WebKit/Safari a camada do backdrop-filter ainda COMPOSITA por cima do fixed preso → o scrim (.cover) vencia o
   elementFromPoint e o @onclick da opção nunca disparava (Chromium/PW mascaram — o painel escapa lá). Movendo o
   filtro pro ::before, o .cover deixa de ter backdrop-filter → não é mais CB → o painel escapa pro VIEWPORT e flutua
   acima via z:1200 em TODOS os engines. Visual idêntico: mesmo tint+blur atrás do dialog (o ::before z:-1 pinta na
   base do stacking context do .cover, sob o .dialog em fluxo normal). Fix GLOBAL — vale pra todo .cover/.dialog da casa. */
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15,16,32,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dialog { width: min(460px, 100%); background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(0,0,0,.5)); border: 1px solid var(--line-2); padding: 26px 26px 22px; }

/* ---------- SaPage: header único da tela SA (substitui o pagehead artesanal) ---------- */
.sa-page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sa-page-head .sph-main { flex: 1 1 320px; min-width: 0; }
.sa-page-head .sph-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sa-page-head h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(26px,4vw,34px); letter-spacing: -.02em; }
.sa-page-head .sph-sub { color: var(--ink-soft); margin-top: 6px; max-width: 70ch; }
.sa-page-head .sph-cta { flex: none; display: flex; align-items: center; gap: 8px; }
.sa-page-banner { margin-bottom: 18px; }

/* selo do header (BadgeKind) — cada kind mapeia um token da casa (nada hardcoded) */
.sa-page-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--r-pill); letter-spacing: .01em; flex: none; white-space: nowrap; }
.sa-page-badge.k-platform { color: #fff; background: linear-gradient(135deg, var(--hub), var(--hub-2)); }
.sa-page-badge.k-neutral  { color: var(--ink-soft); background: var(--line); }
.sa-page-badge.k-ok       { color: var(--ok); background: rgba(15,169,104,.13); }
.sa-page-badge.k-warn     { color: var(--warn-text); background: rgba(230,146,11,.15); }
.sa-page-badge.k-danger   { color: var(--danger); background: rgba(239,69,96,.13); }

/* estados da SaPage (Loading / Error / Empty) — respiro do .empty-state */
.sa-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 48px 22px; color: var(--ink-soft); }
.sa-state .sa-state-ico { font-size: 30px; line-height: 1; color: var(--ink-faint); }
.sa-state h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; color: var(--ink); }
.sa-state.is-error .sa-state-ico { color: var(--danger); }
.sa-state .spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-2);
  border-top-color: var(--hub); animation: sa-spin .8s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-state .spin { animation: none; } }

/* ---------- SaSegmented (F-06/F-07): grade de RETÂNGULOS, nunca cápsula oval ----------
   auto-fit + minmax(--seg-min) → cada segmento tem largura mínima; faltou largura, a grade
   quebra em LINHAS de retângulos (radius --r-sm). Ativo = roxo Aurora (--hub → --hub-2). */
.sa-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--seg-min, 116px), 1fr));
  gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.sa-seg.seg-wrap { grid-template-columns: repeat(auto-fill, minmax(var(--seg-min, 116px), 1fr)); }
.sa-seg .sa-seg-opt { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; border: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); border-radius: var(--r-sm); cursor: pointer; transition: all .16s;
  /* rótulo NUNCA cortado: quebra em 2 linhas (ex.: "Enterprise", "Expira breve") em vez de estourar/clipar o segmento.
     min-width:0 deixa o item de grid encolher; text-align:center mantém o rótulo de 2 linhas centrado (F-06/F-07). */
  min-width: 0; text-align: center; line-height: 1.2; white-space: normal; overflow-wrap: break-word; }
.sa-seg .sa-seg-opt .seg-lbl { min-width: 0; }
.sa-seg .sa-seg-opt:hover { color: var(--ink); background: var(--hub-soft); }
.sa-seg .sa-seg-opt[aria-pressed="true"] { color: #fff;
  background: linear-gradient(135deg, var(--hub), var(--hub-2)); box-shadow: var(--shadow-sm); }
.sa-seg .sa-seg-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hub-soft), 0 0 0 1.5px var(--hub); }
.sa-seg .sa-seg-opt .seg-ico { font-size: 14px; flex: none; }

/* ---------- DataTable F-01: coluna de AÇÃO sticky à direita ----------
   Opt-in via StickyActions → .dtable-scroll.dt-sticky. A última coluna (th/td) gruda na borda
   direita do wrapper e ganha sombra-de-borda: a ação NÃO corta quando a tabela rola. */
.dtable-scroll.dt-sticky > .dtable th:last-child,
.dtable-scroll.dt-sticky > .dtable td:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--surface);
  box-shadow: -12px 0 12px -12px rgba(22,21,42,.28);
}
.dtable-scroll.dt-sticky > .dtable tbody tr:hover td:last-child { background: var(--surface-2); }
[data-theme="dark"] .dtable-scroll.dt-sticky > .dtable th:last-child,
[data-theme="dark"] .dtable-scroll.dt-sticky > .dtable td:last-child { box-shadow: -12px 0 14px -12px rgba(0,0,0,.55); }
/* Célula sticky (z-index:1) = stacking context próprio. Se ela HOSPEDA um popover aberto (kebab .lkb-menu ou
   overlay .cover — caso do License Manager), precisa VENCER as células sticky IRMÃS (mesmo z-index:1, pintadas
   DEPOIS no DOM) e o backdrop .cover (z-index 120); senão o ⋮ das linhas de baixo vaza por cima do menu/dialog.
   Eleva SÓ a linha ativa. Endurece o padrão sticky pra qualquer popover-em-célula futuro (Léo P0-01). */
.dtable-scroll.dt-sticky > .dtable td:last-child:has(.lkb-menu),
.dtable-scroll.dt-sticky > .dtable td:last-child:has(.cover) { z-index: 140; }

/* ---------- DataTable F-02/F-09: card-stack rótulo:valor (opt-in via CardStack) ----------
   Cada <td data-label="Rótulo"> vira uma linha "RÓTULO ....... valor". <td> sem data-label (a
   célula de ação) ocupa a largura toda. StackBelow escolhe o ponto de quebra (560/720/900):
   ACIMA dele a tabela segue tabela real (rola/sticky); ABAIXO vira cards. A regra de card-mode
   global (@media ≤900) é NEUTRALIZADA na banda acima do StackBelow pra não empilhar sem rótulo. */

/* --- StackBelow=720 (default): tabela real 721+, cards ≤720 --- */
@media (min-width: 721px) and (max-width: 900px) {
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable { display: table; min-width: var(--dt-min, 640px); }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable thead { display: table-header-group; }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable tbody { display: table-row-group; }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable tr { display: table-row; }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable td { display: table-cell; padding: 13px 22px; border-top: 1px solid var(--line); }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable td::before { content: none; }
}
@media (max-width: 720px) {
  .dtable-scroll.dt-cards[data-dt-stack="720"] { overflow-x: visible; }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable,
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable tbody { display: block; width: 100%; min-width: 0; }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable thead { display: none; }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable tr { display: block; margin: 12px 14px; padding: 4px 2px;
    border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable td { display: flex; align-items: baseline;
    justify-content: space-between; gap: 16px; border: none; padding: 8px 14px; text-align: right; }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable td[data-label]::before { content: attr(data-label);
    flex: none; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-faint); }
  .dtable-scroll.dt-cards[data-dt-stack="720"] > .dtable td:not([data-label]) { justify-content: flex-start; text-align: left; padding-top: 10px; }
  .dtable-scroll.dt-cards.dt-sticky[data-dt-stack="720"] > .dtable td:last-child,
  .dtable-scroll.dt-cards.dt-sticky[data-dt-stack="720"] > .dtable th:last-child { position: static; box-shadow: none; }
}

/* --- StackBelow=560: tabela real 561+, cards ≤560 --- */
@media (min-width: 561px) and (max-width: 900px) {
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable { display: table; min-width: var(--dt-min, 640px); }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable thead { display: table-header-group; }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable tbody { display: table-row-group; }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable tr { display: table-row; }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable td { display: table-cell; padding: 13px 22px; border-top: 1px solid var(--line); }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable td::before { content: none; }
}
@media (max-width: 560px) {
  .dtable-scroll.dt-cards[data-dt-stack="560"] { overflow-x: visible; }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable,
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable tbody { display: block; width: 100%; min-width: 0; }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable thead { display: none; }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable tr { display: block; margin: 12px 14px; padding: 4px 2px;
    border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable td { display: flex; align-items: baseline;
    justify-content: space-between; gap: 16px; border: none; padding: 8px 14px; text-align: right; }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable td[data-label]::before { content: attr(data-label);
    flex: none; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-faint); }
  .dtable-scroll.dt-cards[data-dt-stack="560"] > .dtable td:not([data-label]) { justify-content: flex-start; text-align: left; padding-top: 10px; }
  .dtable-scroll.dt-cards.dt-sticky[data-dt-stack="560"] > .dtable td:last-child,
  .dtable-scroll.dt-cards.dt-sticky[data-dt-stack="560"] > .dtable th:last-child { position: static; box-shadow: none; }
}

/* --- StackBelow=900: cards ≤900 (alinha ao card-mode global; só acrescenta os rótulos) --- */
@media (max-width: 900px) {
  .dtable-scroll.dt-cards[data-dt-stack="900"] { overflow-x: visible; }
  .dtable-scroll.dt-cards[data-dt-stack="900"] > .dtable tr { display: block; margin: 12px 14px; padding: 4px 2px;
    border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
  .dtable-scroll.dt-cards[data-dt-stack="900"] > .dtable td { display: flex; align-items: baseline;
    justify-content: space-between; gap: 16px; border: none; padding: 8px 14px; text-align: right; }
  .dtable-scroll.dt-cards[data-dt-stack="900"] > .dtable td[data-label]::before { content: attr(data-label);
    flex: none; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-faint); }
  .dtable-scroll.dt-cards[data-dt-stack="900"] > .dtable td:not([data-label]) { justify-content: flex-start; text-align: left; padding-top: 10px; }
  .dtable-scroll.dt-cards.dt-sticky[data-dt-stack="900"] > .dtable td:last-child,
  .dtable-scroll.dt-cards.dt-sticky[data-dt-stack="900"] > .dtable th:last-child { position: static; box-shadow: none; }
}

/* ============================================================================
   SA NAV — chrome redesenhado (Onda B · finding F-04, proto sa-nav/proto-fase1.html)
   A fileira de 16-17 NavLinks chapados virou nav AGRUPADA (5 grupos + dropdown) +
   ⌘K command palette + rastro "Você está em…" + drawer mobile. Portado VERBATIM do
   proto (tokens da casa), com classes prefixadas (sanav-*/cmdk-*/drawer-*) pra NÃO
   colidir com a chrome de tenant nem com os CORPOS das telas (SA Page Kit, outra onda).
   Escopo = SÓ chrome/nav. Ícones de LINHA; dark+light AA; 0 overflow em 4 larguras.
   ============================================================================ */
.sanav-shell { min-height: 100vh; }
.sanav-ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.sanav-ico.sm { width: 14px; height: 14px; }
.sanav-ico.lg { width: 20px; height: 20px; }

/* ---------- topbar ---------- */
.sanav-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px;
  padding: 11px clamp(14px, 3vw, 30px); background: var(--chrome-glass, var(--glass, var(--surface)));
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.sanav-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hue, var(--hub)) 55%, transparent) 20%,
  color-mix(in srgb, var(--hue2, var(--hub-2)) 55%, transparent) 80%, transparent); filter: blur(2.5px); opacity: .9; }
.sanav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; color: var(--ink); flex: none; }
.sanav-brandmark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2)));
  box-shadow: 0 4px 14px rgba(91,91,245,.4); display: grid; place-items: center; color: #fff; }
.sanav-brandmark .sanav-ico { width: 17px; height: 17px; stroke: #fff; stroke-width: 2.2; }
.sanav-brand b { font-size: 17px; font-family: "Bricolage Grotesque", sans-serif; }
.sanav-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  border-radius: var(--r-pill); background: #1c1b2e; color: #fff; margin-left: 2px; text-transform: none; letter-spacing: 0; }
[data-theme="dark"] .sanav-chip { background: #000; }
.sanav-chip.sm { padding: 3px 9px; font-size: 11px; }
.sanav-spacer { flex: 1; }

/* ---------- SaNav agrupada ---------- */
.sanav { display: flex; gap: 3px; margin-left: 6px; position: relative; }
.sanav-group { position: relative; }
.sanav-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid transparent; background: transparent;
  color: var(--ink-soft); transition: color .16s, background .16s, border-color .16s; white-space: nowrap; }
.sanav-btn:hover { color: var(--ink); background: var(--line); }
.sanav-btn .chev { transition: transform .2s cubic-bezier(.4,0,.2,1); color: var(--ink-faint); }
.sanav-btn .sanav-ico { color: var(--ink-faint); transition: color .16s; }
.sanav-group.has-active .sanav-btn { color: var(--hue, var(--hub)); background: var(--hue-soft, var(--hub-soft));
  border-color: color-mix(in srgb, var(--hue, var(--hub)) 22%, transparent); }
.sanav-group.has-active .sanav-btn .sanav-ico, .sanav-group.has-active .sanav-btn .chev { color: var(--hue, var(--hub)); }
[data-theme="dark"] .sanav-group.has-active .sanav-btn,
[data-theme="dark"] .sanav-group.has-active .sanav-btn .sanav-ico,
[data-theme="dark"] .sanav-group.has-active .sanav-btn .chev { color: #fff; }
.sanav-group.open .sanav-btn { color: var(--ink); background: var(--line); }
.sanav-group.open .sanav-btn .chev { transform: rotate(180deg); }
.sanav-group.pulse .sanav-btn { animation: sanav-litpulse .7s cubic-bezier(.4,0,.2,1); }
@keyframes sanav-litpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hue, var(--hub)) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sanav-menu { position: absolute; top: calc(100% + 9px); left: 0; min-width: 236px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 7px;
  z-index: var(--z-popover); display: none; flex-direction: column; gap: 1px; }
.sanav-group.open .sanav-menu { display: flex; animation: sanav-pop .17s cubic-bezier(.4,0,.2,1); }
@keyframes sanav-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sanav-mh { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
  padding: 5px 10px 7px; display: flex; align-items: center; gap: 7px; }
.sanav-mh .sanav-ico { color: var(--hue, var(--hub)); }
[data-theme="dark"] .sanav-mh .sanav-ico { color: var(--hue2, var(--hub-2)); }
.sanav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink-soft); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .13s, color .13s;
  border: none; background: transparent; width: 100%; text-align: left; }
.sanav-item:hover { background: var(--line); color: var(--ink); }
.sanav-item .sanav-ico { color: var(--ink-faint); transition: color .13s; }
.sanav-item:hover .sanav-ico { color: var(--ink); }
.sanav-item .path { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink-faint); opacity: .7; }
.sanav-item.active { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
.sanav-item.active .sanav-ico { color: var(--hue, var(--hub)); }
[data-theme="dark"] .sanav-item.active, [data-theme="dark"] .sanav-item.active .sanav-ico { color: #fff; }
.sanav-item.active .tick { margin-left: auto; color: var(--hue, var(--hub)); }
[data-theme="dark"] .sanav-item.active .tick { color: var(--hue2, var(--hub-2)); }

/* ---------- ⌘K trigger + icon buttons ---------- */
.cmdk-trig { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 8px 12px 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-soft); transition: all .16s; flex: none; }
.cmdk-trig:hover { color: var(--ink); border-color: var(--hue, var(--hub)); box-shadow: 0 0 0 3px var(--hue-soft, var(--hub-soft)); }
.cmdk-trig .sanav-ico { color: var(--ink-faint); }
.cmdk-trig .ph-t { color: var(--ink-faint); }
.cmdk-trig kbd, .dsearch kbd { display: inline-flex; gap: 1px; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  font-weight: 700; background: var(--line); color: var(--ink-soft); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 2px 6px; line-height: 1; }
.sanav-iconbtn { width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; display: none; place-items: center; transition: all .16s; flex: none; }
.sanav-iconbtn:hover { color: var(--ink); border-color: var(--hue, var(--hub)); }
.sanav-bell { width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; transition: all .16s; position: relative; flex: none; }
.sanav-bell:hover { color: var(--ink); border-color: var(--hue, var(--hub)); }
.sanav-bell .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--surface); }
.sanav-theme { flex: none; white-space: nowrap; }
.sanav-avatarmenu { flex: none; }

/* ---------- rastro "Você está em" ---------- */
.sanav-ctx { padding: 12px clamp(14px, 3vw, 30px) 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sanav-ctx .lead { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.sanav-ctx .crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.sanav-ctx .crumb .g { display: inline-flex; align-items: center; gap: 6px; color: var(--hue, var(--hub)); }
[data-theme="dark"] .sanav-ctx .crumb .g { color: var(--hue2, var(--hub-2)); }
.sanav-ctx .crumb .g .sanav-ico { color: currentColor; }
.sanav-ctx .crumb .sep { color: var(--ink-faint); }
.sanav-ctx .crumb .r { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.sanav-ctx .crumb .r .sanav-ico { color: var(--ink-faint); }

/* ---------- ⌘K COMMAND PALETTE ---------- */
.cmdk-overlay { position: fixed; inset: 0; z-index: 2000; display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px; background: rgba(12,11,25,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cmdk-overlay.on { display: flex; animation: sanav-fade .16s ease; }
@keyframes sanav-fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk { width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: sanav-rise .2s cubic-bezier(.4,0,.2,1); }
@keyframes sanav-rise { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmdk-in .sanav-ico { color: var(--ink-faint); width: 19px; height: 19px; }
.cmdk-in input { flex: 1; border: none; background: transparent; font: inherit; font-size: 17px; font-weight: 500;
  color: var(--ink); outline: none; }
.cmdk-in input::placeholder { color: var(--ink-faint); }
.cmdk-in .esc { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; background: var(--line);
  color: var(--ink-soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; line-height: 1; }
.cmdk-results { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.cmdk-gh { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
  padding: 11px 12px 6px; display: flex; align-items: center; gap: 7px; }
.cmdk-opt { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer; }
.cmdk-opt .oi { width: 32px; height: 32px; border-radius: 9px; background: var(--line); display: grid; place-items: center;
  color: var(--ink-soft); flex: none; }
.cmdk-opt .otx { flex: 1; min-width: 0; }
.cmdk-opt .otx .ol { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cmdk-opt .otx .og { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.cmdk-opt .opath { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink-faint); opacity: .75; }
.cmdk-opt .enter { opacity: 0; color: var(--hue, var(--hub)); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cmdk-opt.cur { background: var(--hue-soft, var(--hub-soft)); }
.cmdk-opt.cur .oi { background: linear-gradient(135deg, var(--hue, var(--hub)), var(--hue2, var(--hub-2))); color: #fff; box-shadow: 0 4px 12px -4px var(--hue, var(--hub)); }
.cmdk-opt.cur .otx .ol { color: var(--hue, var(--hub)); }
[data-theme="dark"] .cmdk-opt.cur .otx .ol { color: #fff; }
.cmdk-opt.cur .opath { display: none; }
.cmdk-opt.cur .enter { opacity: 1; }
.cmdk-opt .hl { color: var(--hue, var(--hub)); font-weight: 800; }
[data-theme="dark"] .cmdk-opt .hl { color: var(--hue2, var(--hub-2)); }
.cmdk-empty { padding: 44px 24px; text-align: center; }
.cmdk-empty .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--line); color: var(--ink-faint);
  display: grid; place-items: center; margin: 0 auto 12px; }
.cmdk-empty h4 { font-size: 15px; }
.cmdk-empty p { font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.cmdk-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 11.5px; color: var(--ink-faint); flex-wrap: wrap; }
.cmdk-foot .k { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-foot kbd { font-family: ui-monospace, Menlo, monospace; font-weight: 700; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; color: var(--ink-soft); line-height: 1; }
.cmdk-foot .brandmini { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-faint); }

/* ---------- MOBILE DRAWER ---------- */
.drawer-overlay { position: fixed; inset: 0; z-index: 1900; display: none; background: rgba(12,11,25,.5); backdrop-filter: blur(4px); }
.drawer-overlay.on { display: block; animation: sanav-fade .16s ease; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); background: var(--surface);
  box-shadow: var(--shadow-lg); padding: 18px; overflow-y: auto; transform: translateX(100%);
  animation: sanav-slidein .24s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sanav-slidein { to { transform: none; } }
.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.drawer-head b { font-size: 16px; font-family: "Bricolage Grotesque", sans-serif; }
.drawer-head .x { margin-left: auto; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.drawer .dsearch { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-faint); cursor: pointer; margin: 12px 0 16px;
  font-size: 13.5px; font-weight: 600; width: 100%; }
.drawer .dsearch kbd { margin-left: auto; }
.dgroup { border-top: 1px solid var(--line); padding: 4px 0; }
.dgroup:first-of-type { border-top: none; }
.dgroup-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 6px; border: none; background: transparent;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left; }
.dgroup-h .sanav-ico { color: var(--hue, var(--hub)); }
[data-theme="dark"] .dgroup-h .sanav-ico { color: var(--hue2, var(--hub-2)); }
.dgroup-h .chev { margin-left: auto; color: var(--ink-faint); transition: transform .2s; }
.dgroup.has-active .dgroup-h { color: var(--hue, var(--hub)); }
[data-theme="dark"] .dgroup.has-active .dgroup-h { color: #fff; }
.dgroup.open .dgroup-h .chev { transform: rotate(180deg); }
.dgroup-items { display: none; flex-direction: column; gap: 1px; padding: 2px 0 8px; }
.dgroup.open .dgroup-items { display: flex; }
.ditem { display: flex; align-items: center; gap: 11px; padding: 10px 12px 10px 16px; border-radius: var(--r-sm); border: none;
  background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  text-align: left; width: 100%; text-decoration: none; }
.ditem:hover { background: var(--line); color: var(--ink); }
.ditem .sanav-ico { color: var(--ink-faint); }
.ditem.active { background: var(--hue-soft, var(--hub-soft)); color: var(--hue, var(--hub)); }
.ditem.active .sanav-ico { color: var(--hue, var(--hub)); }
[data-theme="dark"] .ditem.active, [data-theme="dark"] .ditem.active .sanav-ico { color: #fff; }
.ditem .tick { margin-left: auto; }

/* ---------- responsivo (grupos icon-only estilo Linear a partir de 1360 pra caber o
   cluster direito completo · drawer @940 · avatar/chip compactam antes) ---------- */
.sanav-theme { padding: 8px 10px; }
@media (max-width: 1360px) {
  .sanav-btn .lbl { display: none; }
  .sanav-btn { padding: 9px 11px; }
  .cmdk-trig .ph-t { display: none; }
}
@media (max-width: 1200px) {
  .sanav-av-name { display: none; }
  .avatar { padding: 4px; }
}
@media (max-width: 940px) {
  .sanav { display: none; }
  .cmdk-trig { display: none; }
  .sanav-iconbtn { display: grid; }
  .sanav-bell { display: none; }
  .sanav-ctx .lead { display: none; }
}
@media (max-width: 560px) {
  .sanav-chip { display: none; }
  .sanav-avatarmenu { display: none; }
}

/* ============================================================================================
   LICENSE CONFIG (ADR 027 · D5) — tela /sa/licenciamento. Superfície read-only por-app: matriz
   tier→feature FIEL ao app + detector de drift (Hub governa × app declara) + add-ons + limites.
   Só tokens Aurora (dark/light herdados). Namespace .lcfg-* pra não colidir. Fiel ao proto-fase2.
   ============================================================================================ */
.lcfg-apphead { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
/* SA-neutral: monograma/tag/coluna-app usam o accent Aurora do Hub (--hub), NÃO --fluxion — a tela renderiza
   QUALQUER app (flyx, etc.), então nada aqui pode ser pintado com a hue de um app específico. */
.lcfg-mono { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none;
  color:#fff; font-weight:800; font-size:22px; background:linear-gradient(140deg, var(--hub), var(--hub-2)); box-shadow:0 8px 22px -6px var(--hub); }
.lcfg-apphead .lcfg-h { min-width:200px; flex:1; }
.lcfg-apphead h2 { font-size:20px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lcfg-tag { font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill);
  color:var(--hub); background:color-mix(in srgb, var(--hub) 12%, transparent); border:1px solid color-mix(in srgb, var(--hub) 28%, transparent); }
.lcfg-apphead .lcfg-sub { color:var(--ink-soft); font-size:13.5px; margin-top:3px; }
.lcfg-appsel { flex:none; min-width:210px; }

/* diagnóstico de reconciliação (Bloco 0) — read-only, baseline reconciliado */
.lcfg-diag { border:1px solid color-mix(in srgb, var(--ok) 34%, transparent); background:var(--ok-soft);
  border-radius:var(--r-lg); padding:18px 20px; margin-bottom:20px; }
.lcfg-diag.is-drift { border-color:color-mix(in srgb, var(--warn) 40%, transparent); background:var(--warn-soft); }
.lcfg-diag-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.lcfg-diag-ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; font-size:17px;
  background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok-text); }
.lcfg-diag.is-drift .lcfg-diag-ic { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn-text); }
.lcfg-diag-head h3 { font-size:16px; font-weight:800; letter-spacing:-.01em; }
.lcfg-diag-head p { color:var(--ink-soft); font-size:12.5px; margin-top:2px; }
.lcfg-diag-live { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ok-text); font-weight:700; margin-bottom:12px; }
.lcfg-diag-live .dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); }
.lcfg-checks { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:900px){ .lcfg-checks { grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .lcfg-checks { grid-template-columns:1fr;} }
.lcfg-check { display:flex; flex-direction:column; gap:7px; padding:12px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); }
.lcfg-check-top { display:flex; align-items:center; gap:8px; }
.lcfg-check-mark { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:none; font-size:14px;
  background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok-text); }
.lcfg-check.no .lcfg-check-mark { background:var(--danger-soft); color:var(--danger); }
.lcfg-check-name { font-size:12.5px; font-weight:800; }
.lcfg-check-desc { font-size:11.5px; color:var(--ink-soft); line-height:1.45; }
/* Eyebrow honesto do grupo: separa capabilities ENTREGUES (fato de release) da verificação VIVA (drift). */
.lcfg-checks-cap { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink-soft); line-height:1.5; margin-bottom:11px; }
.lcfg-checks-cap svg { flex:none; margin-top:2px; opacity:.75; }
.lcfg-checks-cap > span { min-width:0; }
/* Micro-tag por check: "entregue" (capability da Onda 1) × "viva" (derivada agora). */
.lcfg-check-kind { margin-left:auto; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:var(--r-pill); }
.lcfg-check-kind.cap { color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); }
.lcfg-check-kind.live { color:var(--hub); background:color-mix(in srgb, var(--hub) 12%, transparent); border:1px solid color-mix(in srgb, var(--hub) 26%, transparent); }

/* card genérico da tela (reusa panel, mas com header rico) */
.lcfg-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); margin-bottom:18px; overflow:hidden; min-width:0; }
.lcfg-card-head { display:flex; align-items:flex-start; gap:12px; padding:18px 20px 14px; }
.lcfg-card-ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; font-size:18px; background:var(--hub-soft); color:var(--hub); }
.lcfg-card-n { font-size:11px; font-weight:800; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }
.lcfg-card-head h3 { font-size:16.5px; font-weight:800; letter-spacing:-.01em; margin-top:1px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lcfg-card-head p { color:var(--ink-soft); font-size:13px; margin-top:4px; line-height:1.5; max-width:76ch; }
.lcfg-status { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:var(--r-pill); }
.lcfg-status.ok { color:var(--ok-text); background:var(--ok-soft); }
.lcfg-status.warn { color:var(--warn-text); background:var(--warn-soft); }
.lcfg-card-body { padding:2px 20px 20px; min-width:0; }

/* matriz tier × feature */
.lcfg-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-bottom:12px; }
.lcfg-legend .lg { display:inline-flex; align-items:center; gap:6px; }
.lcfg-sw { width:15px; height:15px; border-radius:5px; display:grid; place-items:center; font-size:10px; color:#fff; }
.lcfg-sw.on { background:linear-gradient(135deg, var(--hub), var(--hub-2)); }
.lcfg-sw.off { background:var(--line); color:var(--ink-faint); }
.lcfg-tbl-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--line); border-radius:var(--r-md); }
table.lcfg-matrix { width:100%; border-collapse:collapse; min-width:680px; }
table.lcfg-matrix th, table.lcfg-matrix td { padding:9px 12px; text-align:center; border-bottom:1px solid var(--line); font-size:13px; }
table.lcfg-matrix thead th { background:var(--surface-2); font-weight:800; color:var(--ink-soft); font-size:12px; letter-spacing:.02em; }
table.lcfg-matrix thead th.feat, table.lcfg-matrix tbody th { text-align:left; }
table.lcfg-matrix tbody th { font-weight:700; color:var(--ink); background:var(--surface); white-space:nowrap; }
table.lcfg-matrix tbody th .fk { display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--ink-faint); font-weight:500; margin-top:1px; }
table.lcfg-matrix .grouphdr td { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:800; padding:8px 12px; background:var(--surface-2); }
table.lcfg-matrix tfoot th, table.lcfg-matrix tfoot td { border-top:2px solid var(--line-2); font-size:12.5px; }
table.lcfg-matrix tfoot th { text-align:left; color:var(--ink-soft); font-weight:800; background:var(--surface-2); }
table.lcfg-matrix tfoot td { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; color:var(--ink); background:var(--surface-2); }
table.lcfg-matrix tfoot tr.cap td { color:var(--warn-text); }
.lcfg-tf-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:800; padding:9px 12px; }
.lcfg-cell { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; font-size:12px; }
.lcfg-cell.on { background:linear-gradient(135deg, var(--hub), var(--hub-2)); color:#fff; }
.lcfg-cell.off { background:var(--line); color:var(--ink-faint); }
.lcfg-untiered { margin-top:12px; display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-soft);
  padding:10px 13px; border-radius:var(--r-md); background:var(--surface-2); border:1px dashed var(--line-2); }
.lcfg-untiered code, .lcfg-mono-i { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink); }

/* drift detector */
.lcfg-drift { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; }
@media (max-width:720px){ .lcfg-drift { grid-template-columns:1fr; } }
.lcfg-drift-col { border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface-2); padding:13px 15px; }
.lcfg-drift-col .h { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-bottom:9px; }
.lcfg-drift-col.hub .h { color:var(--hub); }
.lcfg-drift-col.app .h { color:var(--hub-2); }
.lcfg-drift-col ul { list-style:none; display:flex; flex-direction:column; gap:6px; margin:0; padding:0; }
.lcfg-drift-col li { display:flex; align-items:center; gap:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--ink); }
.lcfg-drift-col li.warn { color:var(--warn-text); }
.lcfg-drift-eq { display:grid; place-items:center; }
.lcfg-drift-badge { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--ok-text);
  background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.lcfg-drift-badge.warn { color:var(--warn-text); background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
@media (max-width:720px){ .lcfg-drift-badge { transform:rotate(90deg); } }
.lcfg-note { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; padding:10px 13px;
  border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line); margin-top:14px; }
.lcfg-note.warn { background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.lcfg-note b { color:var(--ink); font-weight:700; }

/* add-ons */
.lcfg-addons { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .lcfg-addons { grid-template-columns:1fr; } }
.lcfg-addon { border:1px solid var(--line-2); border-radius:var(--r-md); padding:15px; background:var(--surface-2); }
.lcfg-addon-top { display:flex; align-items:center; gap:10px; }
.lcfg-addon-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none; font-size:16px; background:var(--surface); border:1px solid var(--line-2); color:var(--ink-soft); }
.lcfg-addon-name { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; font-weight:800; }
.lcfg-grants { margin-top:11px; display:flex; flex-wrap:wrap; gap:7px; }
.lcfg-chip { display:inline-flex; align-items:center; gap:5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink-soft); }
.lcfg-chip .ok { color:var(--ok-text); }

/* endpoint chip (real da Onda 1) */
.lcfg-endpoint { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--ink); overflow-x:auto; }
.lcfg-endpoint .verb { font-weight:800; color:var(--hub); flex:none; }
.lcfg-endpoint .tag { margin-left:auto; flex:none; font-family:inherit; font-size:11px; font-weight:800; color:var(--ok-text); background:var(--ok-soft); padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.lcfg-defer { margin-top:10px; font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:7px; }

/* ===== ADR 028 · Onda 3 — banner de desfecho + card de estado do import ao vivo + ações ===== */
.lcfg-actionbanner { display:flex; align-items:flex-start; gap:10px; padding:12px 15px; border-radius:var(--r-md);
  font-size:13px; line-height:1.5; margin-bottom:16px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-soft); }
.lcfg-actionbanner.ok { border-color:color-mix(in srgb, var(--ok) 34%, transparent); background:var(--ok-soft); color:var(--ok-text); }
.lcfg-actionbanner.warn { border-color:color-mix(in srgb, var(--warn) 36%, transparent); background:var(--warn-soft); color:var(--warn-text); }
.lcfg-actionbanner b { color:var(--ink); }

.lcfg-import { border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm);
  margin-bottom:18px; padding:18px 20px; min-width:0; }
.lcfg-import.state-ok { border-color:color-mix(in srgb, var(--ok) 30%, transparent); }
.lcfg-import.state-warn { border-color:color-mix(in srgb, var(--warn) 34%, transparent); }
.lcfg-import-head { display:flex; align-items:flex-start; gap:12px; }
.lcfg-import-ic { width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--hub-soft); color:var(--hub); }
.lcfg-import.state-ok .lcfg-import-ic { background:var(--ok-soft); color:var(--ok-text); }
.lcfg-import.state-warn .lcfg-import-ic { background:var(--warn-soft); color:var(--warn-text); }
.lcfg-import-n { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.lcfg-import-h h3 { font-size:16.5px; font-weight:800; letter-spacing:-.01em; margin-top:2px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lcfg-import-h p { color:var(--ink-soft); font-size:13px; margin-top:5px; line-height:1.5; max-width:80ch; }
.lcfg-state { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:var(--r-pill); }
.lcfg-state.ok { color:var(--ok-text); background:var(--ok-soft); }
.lcfg-state.warn { color:var(--warn-text); background:var(--warn-soft); }
.lcfg-state.muted { color:var(--ink-faint); background:var(--line); }

.lcfg-import-meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin:16px 0 4px; }
.lcfg-import-meta .mi { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line); min-width:0; }
.lcfg-import-meta .k { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.lcfg-import-meta .v { font-size:12.5px; color:var(--ink); overflow-wrap:anywhere; }
.lcfg-import-meta .v.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.lcfg-import-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
.lcfg-actform { margin:0; display:inline-flex; }
.lcfg-btn { font:inherit; font-weight:700; font-size:13px; border-radius:var(--r-pill); padding:9px 16px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-2); background:transparent; color:var(--ink-soft);
  transition:box-shadow .15s, transform .1s, background .15s, color .15s; }
.lcfg-btn:active { transform:scale(.97); }
.lcfg-btn svg { width:15px; height:15px; }
.lcfg-btn.primary { color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--hub), var(--hub-2));
  box-shadow:0 6px 16px -6px var(--hub); }
.lcfg-btn.primary:hover { box-shadow:0 10px 24px -7px var(--hub); }
.lcfg-btn.ghost:hover { color:var(--ink); background:var(--line); }
.lcfg-btn.danger { color:#fff; border-color:transparent; background:var(--warn); }
.lcfg-btn.danger:hover { filter:brightness(1.05); }
.lcfg-confirm { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 13px; border-radius:var(--r-md);
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size:12.5px; color:var(--warn-text); }
.lcfg-confirm b { color:var(--ink); }
.lcfg-confirm svg { width:15px; height:15px; vertical-align:-2px; }