/* ══════════════════════════════════════════════════════════════
   SHELL — layout global + primitivos UI
   ══════════════════════════════════════════════════════════════
   Lê tokens.css. Os refinos visuais (animações, hover lift,
   scrollbar, drawer aninhado) vivem em fb-ds.css — esse arquivo
   é a base estrutural.
   ══════════════════════════════════════════════════════════════ */

/* ══ Camada de marca · Perito (padrão) e dono custom (ex.: FB) ══
   :root  = ramp Perito EXATO (roxo/teal/ouro) — nada muda pro Perito.
   html[data-brand="custom"] = dono com cor própria (main.js injeta
   --brand-primary/accent/aux); aqui derivamos o ramp e sobrepomos os
   tokens do design system, então a marca toda (botões, KPIs, sidebar,
   login, sinapses) acompanha a cor do dono, mantendo o mesmo visual. */
:root {
  --bx-deep1:#221645; --bx-deep2:#1a1133; --bx-deep3:#130b23;
  --bx-ovl1:#2e1849;  --bx-ovl2:#1b0f30;  --bx-ovl3:#0e0820;
  --bx-violet:#7a4fd0; --bx-violet2:#9a6cf0;
  --bx-violet-deep:#5a35a8; --bx-violet-deep2:#3a1f6e;
  --bx-teal:#58c8dc; --bx-teal2:#34b6cf; --bx-teal-green:#28a296;
  --bx-teal-l:#5fd6ea; --bx-teal-l2:#9fe9f6;
  --bx-glow-violet:#8a54e6; --bx-line-mid:#9a7bff; --bx-gold:#d1a950;
  --bx-card1:#3a265c; --bx-card2:#1a0f2e;
  --bx-breathe1:#5fd6ea; --bx-breathe2:#8a54e6; --bx-breathe3:#7a4ad0;
  --syn-line:#8f78cf; --syn-dot:#c3b2f5;
  --syn-t0:#9fe9f6; --syn-t1:#5fd6ea; --syn-v0:#d7c4ff; --syn-v1:#9a6cf0;
}
html[data-brand="custom"] {
  /* tokens do design system seguem o dono */
  --primary: var(--brand-primary);
  --primary-dark: color-mix(in srgb, var(--brand-primary) 80%, #000);
  --accent: var(--brand-accent);
  --accent-dark: color-mix(in srgb, var(--brand-accent) 78%, #000);
  --accent-soft: color-mix(in srgb, var(--brand-accent) 8%, transparent);
  --gold: var(--brand-aux);
  --sidebar: var(--brand-primary);
  --info: var(--brand-primary);
  /* ramp visual derivado das 3 cores do dono */
  --bx-deep1: color-mix(in srgb, var(--brand-primary) 80%, #02040a);
  --bx-deep2: color-mix(in srgb, var(--brand-primary) 55%, #02040a);
  --bx-deep3: color-mix(in srgb, var(--brand-primary) 34%, #010309);
  --bx-ovl1:  color-mix(in srgb, var(--brand-primary) 84%, #02050c);
  --bx-ovl2:  color-mix(in srgb, var(--brand-primary) 52%, #02050c);
  --bx-ovl3:  color-mix(in srgb, var(--brand-primary) 30%, #010207);
  --bx-violet:  color-mix(in srgb, var(--brand-primary) 52%, white 30%);
  --bx-violet2: color-mix(in srgb, var(--brand-accent) 52%, white 34%);
  --bx-violet-deep:  color-mix(in srgb, var(--brand-primary) 80%, #000);
  --bx-violet-deep2: var(--brand-primary);
  --bx-teal: var(--brand-accent);
  --bx-teal2: color-mix(in srgb, var(--brand-accent) 86%, var(--brand-primary));
  --bx-teal-green: color-mix(in srgb, var(--brand-accent) 70%, #000 18%);
  --bx-teal-l:  color-mix(in srgb, var(--brand-accent) 66%, white 30%);
  --bx-teal-l2: color-mix(in srgb, var(--brand-accent) 44%, white 46%);
  --bx-glow-violet: color-mix(in srgb, var(--brand-primary) 54%, white 24%);
  --bx-line-mid:    color-mix(in srgb, var(--brand-accent) 60%, white 18%);
  --bx-card1: color-mix(in srgb, var(--brand-primary) 66%, #0a0a16);
  --bx-card2: color-mix(in srgb, var(--brand-primary) 34%, #07060f);
  --bx-breathe1: color-mix(in srgb, var(--brand-accent) 60%, white 26%);
  --bx-breathe2: color-mix(in srgb, var(--brand-primary) 54%, white 22%);
  --bx-breathe3: color-mix(in srgb, var(--brand-primary) 62%, white 12%);
  --syn-line: color-mix(in srgb, var(--brand-primary) 50%, white 24%);
  --syn-dot:  color-mix(in srgb, var(--brand-accent) 46%, white 40%);
  --syn-t0: color-mix(in srgb, var(--brand-accent) 40%, white 50%);
  --syn-t1: color-mix(in srgb, var(--brand-accent) 70%, white 24%);
  --syn-v0: color-mix(in srgb, var(--brand-primary) 38%, white 50%);
  --syn-v1: color-mix(in srgb, var(--brand-primary) 56%, white 26%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

button { font-family: inherit; cursor: pointer; border: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; }

/* ──────────────────────────────────────────────────────────────
   APP LAYOUT
   ────────────────────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  width: 100%;
}

#app.with-sidebar .sidebar { display: flex; }
#app.with-sidebar .main    { margin-left: 0; }

#app.no-sidebar .sidebar { display: none; }
#app.no-sidebar .topbar  { display: flex; }

.sidebar {
  width: var(--sidebar-w);
  background:
    radial-gradient(130% 24% at 50% 0%, color-mix(in srgb, var(--bx-violet) 32%, transparent), transparent 62%),
    radial-gradient(115% 26% at 50% 100%, color-mix(in srgb, var(--bx-teal2) 22%, transparent), transparent 62%),
    radial-gradient(100% 46% at 50% 54%, color-mix(in srgb, var(--bx-teal-green) 12%, transparent), transparent 72%),
    linear-gradient(178deg, var(--bx-deep1) 0%, var(--bx-deep2) 52%, var(--bx-deep3) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, .05);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .09); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* ── Header: logo do cliente ── */
.sb-logo {
  padding: 24px 20px 14px;
  text-align: center;
}
.sb-logo img {
  height: 48px;
  display: block;
  max-width: 86%;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .38));
}
.sb-logo .fallback {
  display: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
}

/* ── Nome do módulo · eyebrow dourado, leve e arejado ── */
.sb-slogan {
  margin: 2px 18px 18px;
  padding: 0 2px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 2.6px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  opacity: .92;
}

/* ── Chips de contexto: Cliente ativo / Projeto ── */
.sb-cli {
  padding: 0 16px;
  margin-bottom: 11px;
}
.sb-cli-label {
  font-size: 9.5px;
  color: rgba(255, 255, 255, .42);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 0 0 5px 4px;
  font-weight: 700;
}
.sb-cli-display {
  position: relative;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  padding: 9px 12px 9px 27px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-cli-display::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--bx-teal) 75%, transparent);
}
.sb-cli + .sb-cli .sb-cli-display::before {
  background: var(--bx-violet2);
  box-shadow: 0 0 8px color-mix(in srgb, var(--bx-violet2) 75%, transparent);
}

/* ── Nav (wrapper dos items + grupos) ── */
.sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 8px;
  gap: 2px;
}
.sidebar__divider {
  height: 1px;
  background: rgba(255, 255, 255, .07);
  margin: 8px 14px;
}
/* Caption do grupo (Operacional, Gerencial, …) */
.sidebar__caption,
.sidebar__group {
  padding: 16px 10px 6px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, .40);
}

/* ── Items da nav · pílulas ── */
.sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 9px;
  cursor: pointer;
  transition: background .16s var(--ease-soft), color .16s, transform .16s var(--ease-soft);
}
.sidebar__item:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.sidebar__item:active { transform: scale(.985); }
.sidebar__item.is-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bx-violet) 32%, transparent), color-mix(in srgb, var(--bx-teal) 12%, transparent));
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bx-violet) 30%, transparent);
}
.sidebar__item.is-active::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--bx-violet2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--bx-teal-l) 60%, transparent);
}
.sidebar__item__ico {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  opacity: .92;
}
.sidebar__item.is-active .sidebar__item__ico { opacity: 1; }

/* ── v2.1 · 18/05/2026 — Botão Personalizar menu (entre nav e foot) ── */
.sidebar__personalizar {
  margin: 6px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.sidebar__personalizar-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .5);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 9px;
  transition: background .15s, color .15s;
}
.sidebar__personalizar-btn:hover {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .9);
}
.sidebar__personalizar-ico {
  font-size: 14px;
  flex-shrink: 0;
}
.sidebar__personalizar-lbl em {
  font-style: normal;
  color: rgba(255, 255, 255, .35);
  font-size: 11px;
}

/* Modal de Personalizar menu */
.fb-mp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: fb-mp-fade .15s ease;
}
@keyframes fb-mp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fb-mp-modal {
  background: #fff;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  border-radius: var(--radius, 10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fb-mp-pop .18s ease;
}
@keyframes fb-mp-pop {
  from { transform: translateY(10px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
.fb-mp-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--borda, #e5e7eb);
}
.fb-mp-head h2 {
  margin: 0;
  font-size: 17px;
  font-family: var(--font-display, inherit);
  color: var(--txt, #0f172a);
}
.fb-mp-head p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--sub, #64748b);
  line-height: 1.45;
}
.fb-mp-body {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
}
.fb-mp-grupo {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda, #e5e7eb);
}
.fb-mp-grupo:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.fb-mp-grupo-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--sub, #64748b);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.fb-mp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--txt, #0f172a);
  user-select: none;
  transition: background .12s;
}
.fb-mp-item:hover {
  background: #f8fafc;
}
.fb-mp-item input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #1d7a4f);
  cursor: pointer;
  flex-shrink: 0;
}
.fb-mp-ico {
  font-size: 15px;
  flex-shrink: 0;
}
.fb-mp-lbl {
  flex: 1;
}
.fb-mp-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--borda, #e5e7eb);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.fb-mp-btn {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--borda, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  color: var(--txt, #0f172a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.fb-mp-btn:hover {
  background: #f8fafc;
}
.fb-mp-btn--primary {
  background: var(--primary, #1d7a4f);
  border-color: var(--primary, #1d7a4f);
  color: #fff;
}
.fb-mp-btn--primary:hover {
  filter: brightness(1.08);
}
.fb-mp-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ── Foot: avatar + usuário + sair ── */
.sidebar__foot {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar__foot-ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--bx-violet2), var(--bx-teal-l));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bx-violet) 45%, transparent);
}
.sidebar__foot-user {
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.sidebar__foot-user__nome {
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__foot-user__voltar {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  font-size: 11px;
  transition: color .15s;
}
.sidebar__foot-user__voltar:hover { color: var(--accent); }

.sidebar__foot-logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .8);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all .15s;
  flex-shrink: 0;
}
.sidebar__foot-logout:hover {
  background: rgba(239, 68, 68, .15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, .3);
}

/* Perito na base da sidebar (powered by) */
.sidebar__powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 18px;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  opacity: .72;
  transition: opacity .25s ease;
}
.sidebar__powered:hover { opacity: .95; }
.sidebar__powered span {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .02em;
}
.sidebar__powered img { height: 26px; width: auto; }
#app.sidebar-collapsed .sidebar__powered span { display: none; }
#app.sidebar-collapsed .sidebar__powered img { height: 24px; }

/* ──────────────────────────────────────────────────────────────
   MAIN
   ────────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px;
  min-width: 0;
}
.content > * {
  animation: fadeUp .25s var(--ease-out);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR (paridade Gestor — limpo, sem logo, sem breadcrumb longo)
   ────────────────────────────────────────────────────────────── */
.topbar {
  height: 56px;
  background: #fff;
  color: var(--txt);
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 14px;
  flex-shrink: 0;
}

.topbar__crumb {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar__crumb b {
  color: var(--primary);
  font-weight: 700;
}
.topbar__crumb .sep {
  color: var(--muted);
  font-weight: 400;
}

.topbar__spacer { flex: 1; }

.topbar__chip {
  font-size: 11px;
  color: var(--sub);
  background: var(--bg);
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--borda);
  font-variant-numeric: tabular-nums;
}
.topbar__chip b { color: var(--primary); font-weight: 700; }

/* User + logout — visíveis no topbar SÓ quando não há sidebar
   (Hub e Admin). Quando há sidebar, esses controles vão pro
   sidebar__foot. */
.topbar__user {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--sub);
  flex-shrink: 0;
}
#app.no-sidebar .topbar__user { display: inline-flex; }

.topbar__user-nome {
  color: var(--txt);
  font-weight: 600;
}
.topbar__user-logout {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--sub);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  font-size: 14px;
}
.topbar__user-logout:hover {
  background: var(--crit-bg);
  color: var(--crit);
  border-color: rgba(220, 38, 38, .3);
}

/* ──────────────────────────────────────────────────────────────
   BOTÕES / CARDS / BADGES (primitivos)
   ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--card);
  color: var(--txt);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  /* transitions vão em fb-ds.css */
}
.btn:hover { background: var(--bg); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; }
.btn--danger { color: var(--err); border-color: var(--err); }
.btn--danger:hover { background: var(--err-bg); }
.btn--sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; }

.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  color: var(--sub);
}
.badge--ok   { background: var(--ok-bg);   color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--err  { background: var(--err-bg);  color: var(--err); }
.badge--info { background: var(--info-bg); color: var(--info); }

/* ──────────────────────────────────────────────────────────────
   LOADING / VAZIO
   ────────────────────────────────────────────────────────────── */
.ui-loader {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 40px;
  color: var(--sub);
  font-size: 13px;
}
.ui-loader__spin {
  width: 18px; height: 18px;
  border: 2px solid var(--borda);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ui-vazio {
  text-align: center;
  padding: 48px 20px;
  color: var(--sub);
}
.ui-vazio__ico { font-size: 32px; margin-bottom: 10px; }
.ui-vazio h3   { font-size: 16px; color: var(--txt); margin-bottom: 4px; }
.ui-vazio p    { font-size: 13px; }
.ui-vazio--erro { color: var(--err); }
.ui-vazio--erro h3 { color: var(--err); }

/* ──────────────────────────────────────────────────────────────
   TOAST
   ────────────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  min-width: 240px;
  max-width: 360px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast--ok   { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
.toast--erro { border-left-color: var(--err); }
.toast--info { border-left-color: var(--info); }

/* ──────────────────────────────────────────────────────────────
   MODAL · convenção .show
   ────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center; justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
}
.modal-overlay.show { display: flex; }

.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal--wide { max-width: 720px; }
.modal__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between;
}
.modal__head h3 { font-size: 16px; }
.modal__close {
  background: transparent; border: none;
  width: 28px; height: 28px;
  font-size: 20px; color: var(--sub);
  border-radius: var(--radius-sm);
}
.modal__close:hover { background: var(--bg); color: var(--txt); }
.modal__body { padding: 20px; overflow: auto; }
.modal__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ──────────────────────────────────────────────────────────────
   FORM FIELDS
   ────────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sub);
  margin-bottom: 4px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 14px;
  color: var(--txt);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 88px; resize: vertical; }
.field__hint { font-size: 11px; color: var(--muted); margin-top: 4px; }

.field--check label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  transition: border-color .12s, background .12s;
}
.field--check label:hover { border-color: var(--accent); }
.field--check input[type="checkbox"],
.field--check input[type="radio"] {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.field--check label:has(input:checked) {
  border-color: var(--accent);
  background: var(--ok-bg);
}

/* ──────────────────────────────────────────────────────────────
   LOGIN · v2.0.2
   ──────────────────────────────────────────────────────────────
   Overlay full-screen com gradient + pattern chevron SVG inline
   (zero dependência de PNG). Card centralizado com slot fixo pro
   logo (impede layout shift) e skeleton enquanto a imagem carrega.
   ────────────────────────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  z-index: var(--z-toast);
  padding: 20px;
  overflow: hidden;
  background: radial-gradient(135% 110% at 50% -12%, var(--bx-ovl1) 0%, var(--bx-ovl2) 50%, var(--bx-ovl3) 100%);
}
.login-overlay.show {
  display: flex;
  animation: loginOverlayFade .4s var(--ease-out) both;
}
@keyframes loginOverlayFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Aurora atmosférica (luz teal/violeta/ouro derivando) ──── */
.login-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-glow { position: absolute; border-radius: 50%; filter: blur(95px); mix-blend-mode: screen; will-change: transform; }
.login-glow--teal   { width: 640px; height: 640px; top: -12%; left: -6%;   background: radial-gradient(circle, var(--bx-teal) 0%, transparent 66%); opacity: .42; animation: loginGlowA 26s var(--ease-in-out) infinite alternate; }
.login-glow--violet { width: 760px; height: 760px; bottom: -22%; right: -12%; background: radial-gradient(circle, var(--bx-glow-violet) 0%, transparent 66%); opacity: .40; animation: loginGlowB 32s var(--ease-in-out) infinite alternate; }
.login-glow--ouro   { width: 420px; height: 420px; top: 34%; left: 62%;     background: radial-gradient(circle, var(--bx-gold) 0%, transparent 70%); opacity: .20; animation: loginGlowC 30s var(--ease-in-out) infinite alternate; }
@keyframes loginGlowA { from { transform: translate(0,0) scale(1); } to { transform: translate(70px,46px) scale(1.14); } }
@keyframes loginGlowB { from { transform: translate(0,0) scale(1); } to { transform: translate(-80px,-34px) scale(1.16); } }
@keyframes loginGlowC { from { transform: translate(0,0) scale(1); } to { transform: translate(-46px,34px) scale(1.22); } }
.login-tex { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='1.1' fill='%23ffffff' fill-opacity='0.05'/></svg>"); background-size: 30px 30px; }
.login-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 50% 44%, transparent 52%, rgba(6,2,14,.6) 100%); }

/* ── Fundo neural (plexus + sinapses + respiração) · Fase 2B ── */
.login-bg .neural { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .62; pointer-events: none; }
.login-bg .neural .mesh-drift { transform-origin: center; animation: loginNeuralDrift 38s var(--ease-in-out) infinite alternate; }
@keyframes loginNeuralDrift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px,-28px) scale(1.07); } }
.login-bg .breathe {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(42% 42% at 28% 26%, color-mix(in srgb, var(--bx-breathe1) 32%, transparent), transparent 64%),
    radial-gradient(54% 54% at 76% 72%, color-mix(in srgb, var(--bx-breathe2) 60%, transparent), transparent 64%),
    radial-gradient(40% 40% at 60% 50%, color-mix(in srgb, var(--bx-breathe3) 40%, transparent), transparent 70%);
  background-repeat: no-repeat;
  background-size: 170% 170%, 190% 190%, 150% 150%;
  background-position: 6% 8%, 92% 88%, 50% 50%;
  animation: loginBreathe 15s var(--ease-in-out) infinite alternate;
  will-change: background-position, opacity;
}
@keyframes loginBreathe {
  0%   { background-position: 6% 8%, 92% 88%, 50% 50%;   opacity: .42; }
  50%  { background-position: 34% 30%, 64% 62%, 58% 44%; opacity: .85; }
  100% { background-position: 18% 22%, 80% 74%, 44% 56%; opacity: .55; }
}

/* ── Card de vidro escuro ──────────────────────────────────── */
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 396px;
  padding: 44px 44px 28px;
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bx-card1) 62%, transparent), color-mix(in srgb, var(--bx-card2) 52%, transparent));
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 40px 90px -30px rgba(4,2,12,.85),
    0 0 0 1px color-mix(in srgb, var(--bx-teal) 10%, transparent),
    0 0 70px -20px color-mix(in srgb, var(--bx-violet) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.16);
  animation: loginCardEnter .8s var(--ease-out) .05s both;
}
.login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bx-teal) 22%, var(--bx-line-mid) 55%, var(--bx-gold) 82%, transparent);
  opacity: .85;
}
@keyframes loginCardEnter {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* entrada em cascata dos elementos internos */
.login-card__logo, .login-card .field, .login-card button[type="submit"], .login-card__foot {
  animation: loginItemIn .55s var(--ease-out) both;
}
.login-card__logo { animation-delay: .22s; }
.login-card .field:not(.field--pwd) { animation-delay: .32s; }
.login-card .field--pwd { animation-delay: .42s; }
.login-card button[type="submit"] { animation-delay: .52s; }
.login-card__foot { animation-delay: .60s; }
@keyframes loginItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── LOGO (arte clara sobre o vidro escuro) ────────────────── */
.login-card__logo {
  position: relative;
  width: 260px; height: 104px;
  margin: 0 auto 28px;
  display: flex; align-items: center; justify-content: center;
}
.login-card__logo img {
  max-width: 100%; max-height: 104px; width: auto; height: auto;
  object-fit: contain; opacity: 0;
  filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--bx-teal) 25%, transparent));
  transition: opacity .3s var(--ease-out);
}
.login-card__logo img.is-loaded { opacity: 1; animation: loginLogoFloat 6s var(--ease-in-out) infinite; }
.login-card__logo::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: loginLogoSkel 1.4s var(--ease-in-out) infinite;
  opacity: .6;
}
.login-card__logo.is-resolved::before { display: none; }
@keyframes loginLogoSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes loginLogoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.login-card__logo-fallback {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 2px;
  font-size: 30px; color: #fff; display: none; line-height: 1;
}
.login-card__logo.is-fallback .login-card__logo-fallback { display: block; }
.login-card__logo.is-fallback img { display: none; }

/* Logo de cliente: versão para fundo escuro (logo_sidebar_url), centrada no vidro */
.login-card__logo--cli {
  width: auto; height: auto; max-width: 82%;
  margin: 0 auto 26px;
}
.login-card__logo--cli img { object-fit: contain; }
.login-card__logo--nosub { margin-bottom: 28px; }

.login-card__sub {
  font-size: 11px; color: rgba(238,240,246,.62);
  text-align: center; text-transform: uppercase; letter-spacing: 1.6px;
  margin-bottom: 26px; font-weight: 500;
}
.login-card h1, .login-card > small { display: none; }

/* ── CAMPOS ────────────────────────────────────────────────── */
.login-card .field { margin-bottom: 15px; }
.login-card .field label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(238,240,246,.62); margin: 0 0 7px 2px;
}
.login-inp { position: relative; display: flex; align-items: center; }
.login-inp .login-ico {
  position: absolute; left: 14px; width: 17px; height: 17px;
  color: rgba(238,240,246,.45); pointer-events: none;
  transition: color .22s var(--ease-out);
}
.login-card .field input {
  width: 100%; height: 48px; padding: 0 14px 0 40px;
  font-family: inherit; font-size: 15px; color: #eef0f6;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px; outline: none;
  transition: border-color .22s var(--ease-out), box-shadow .22s var(--ease-out), background .22s var(--ease-out);
}
.login-card .field input::placeholder { color: #6f7488; }
.login-card .field input:focus {
  background: rgba(255,255,255,.08); border-color: #58c8dc;
  box-shadow: 0 0 0 4px rgba(88,200,220,.16);
}
.login-inp:focus-within .login-ico { color: #58c8dc; }
.login-card .field--pwd .login-inp input { padding-right: 44px; }

/* Toggle mostrar/ocultar senha */
.login-pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 9px; cursor: pointer;
  color: rgba(238,240,246,.45); transition: color .2s, background .2s;
}
.login-pwd-toggle:hover { color: #58c8dc; background: rgba(255,255,255,.06); }
.login-pwd-toggle svg { width: 18px; height: 18px; }
.login-pwd-toggle .icon-off { display: none; }
.login-pwd-toggle.is-on .icon-on  { display: none; }
.login-pwd-toggle.is-on .icon-off { display: block; }

/* Caps Lock */
.login-caps {
  margin-top: 7px; font-size: 11px; color: #e6c074;
  display: none; align-items: center; gap: 6px;
}
.login-caps.show { display: flex; }
.login-caps::before { content: '⇧'; font-weight: 700; font-size: 13px; line-height: 1; }

/* ── ERRO ──────────────────────────────────────────────────── */
.login-card .login__err {
  background: rgba(226,75,74,.14); color: #ff9d9d;
  padding: 10px 14px; border-radius: 10px; font-size: 12px; margin: 8px 0 4px;
  display: none; border-left: 3px solid #e24b4a;
}
.login-card .login__err.show {
  display: block;
  animation: loginErrSlide .25s var(--ease-out) both, loginErrShake .35s var(--ease-out) .25s;
}
@keyframes loginErrSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes loginErrShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* ── BOTÃO ENTRAR ──────────────────────────────────────────── */
.login-card button[type="submit"] {
  position: relative; overflow: hidden;
  width: 100%; min-height: 52px; padding: 14px 16px; margin-top: 24px;
  background: linear-gradient(135deg, var(--bx-violet) 0%, var(--bx-violet-deep) 48%, var(--bx-violet-deep2) 100%);
  color: #fff; border: none; border-radius: 14px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(88,200,220,.35), 0 0 26px -8px rgba(123,75,214,.6);
  transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out);
}
.login-card button[type="submit"]::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.24), transparent);
  transform: skewX(-18deg);
}
.login-card button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(88,200,220,.7), 0 0 32px -6px rgba(88,200,220,.5);
}
.login-card button[type="submit"]:hover:not(:disabled)::after { animation: loginSheen 1.15s var(--ease-out); }
.login-card button[type="submit"]:active:not(:disabled) { transform: translateY(0) scale(.99); }
.login-card button[type="submit"]:disabled { opacity: .8; cursor: wait; }
.login-card button[type="submit"] .login-spin {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; display: none; animation: loginSpin .8s linear infinite;
}
.login-card button[type="submit"].is-loading .login-spin { display: inline-block; }
@keyframes loginSpin { to { transform: rotate(360deg); } }
@keyframes loginSheen { from { left: -130%; } to { left: 130%; } }

/* ── RODAPÉ ────────────────────────────────────────────────── */
.login-card__foot {
  margin-top: 22px; text-align: center; font-size: 11px; color: #6b7186;
  font-family: var(--font-mono); letter-spacing: .04em;
}
.login-powered {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px;
}
.login-powered span { font-family: var(--font-ui); font-style: italic; font-size: 12px; color: #8a82a0; }
.login-powered img { height: 22px; width: auto; opacity: .9; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .login-card { padding: 36px 26px 22px; max-width: 100%; }
  .login-card__logo { width: 100%; height: 90px; margin-bottom: 22px; }
  .login-card__logo img { max-height: 90px; }
}

/* ── Reduce-motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .login-overlay.show, .login-card, .login-card .login__err.show,
  .login-glow, .login-card__logo img.is-loaded,
  .login-card__logo, .login-card .field, .login-card button[type="submit"], .login-card__foot,
  .login-bg .neural .mesh-drift, .login-bg .breathe {
    animation: none !important;
  }
  .login-bg .neural { display: none; }
  .login-card__logo img.is-loaded { opacity: 1; }
  .login-card__logo::before { animation: none; }
  .login-card button[type="submit"]:hover:not(:disabled)::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   v26.3 · MODO EMBED
   ══════════════════════════════════════════════════════════════ */
#app.embed-mode .topbar,
#app.embed-mode .sidebar { display: none !important; }
#app.embed-mode .main { margin-left: 0 !important; width: 100% !important; }
#app.embed-mode .content { padding: 12px 18px !important; max-width: 100% !important; }
#app.embed-mode .fontes,
#app.embed-mode .hub { max-width: 100% !important; padding: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE · DRAWER DA SIDEBAR + AJUSTES TOPBAR
   ══════════════════════════════════════════════════════════════ */

/* Botão hamburguer/seta no topbar — escondido em desktop */
.topbar__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--txt);
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
  transition: background .12s;
}
.topbar__menu:hover { background: var(--bg-soft); }
.topbar__menu:active { transform: scale(0.95); }
.topbar__menu svg {
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
/* Desktop: aberta = ‹ (padrão), colapsada = › */
@media (min-width: 769px) {
  #app.sidebar-collapsed .topbar__menu svg { transform: rotate(180deg); }
}
/* Mobile: começa com sidebar fechada (drawer), seta aponta › ; aberta = ‹ */
@media (max-width: 768px) {
  .topbar__menu svg { transform: rotate(180deg); }
  #app.sidebar-open .topbar__menu svg { transform: rotate(0); }
}

/* ═══════ Telas <= 768px ═══════ */
@media (max-width: 768px) {
  /* Sidebar vira drawer off-canvas */
  #app.with-sidebar .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: min(280px, 85vw);
    z-index: 90;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .2);
  }
  #app.with-sidebar.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Overlay quando drawer aberto */
  #app.with-sidebar.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 85;
    animation: drawer-fade-in .2s ease-out;
  }
  @keyframes drawer-fade-in {
    from { opacity: 0; } to { opacity: 1; }
  }

  /* Main ocupa toda a largura no mobile */
  #app.with-sidebar .main {
    margin-left: 0;
    width: 100%;
  }

  /* Mostra hamburguer */
  #app.with-sidebar .topbar__menu { display: inline-flex; }

  /* User no topbar: esconde nome, mantém botão logout */
  #app.with-sidebar .topbar__user-nome { display: none; }
  #app.with-sidebar .topbar__user-logout { display: inline-flex; }
  #app.with-sidebar .topbar__user { display: inline-flex; }

  /* Topbar mais compacto */
  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .topbar__crumb {
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Conteúdo principal: padding lateral menor */
  .content {
    padding: 16px 14px;
  }

  /* Personalizar menu fica no fim do drawer, padding maior pra touch */
  .sidebar__item, .sidebar__nav a, .sidebar__nav button {
    padding: 12px 16px;
  }
}

/* ═══════ Telas <= 420px (smartphone pequeno) ═══════ */
@media (max-width: 420px) {
  .content { padding: 12px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP · SIDEBAR COLAPSÁVEL
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  /* Hamburguer aparece no desktop também */
  #app.with-sidebar .topbar__menu {
    display: inline-flex;
  }
  /* Transition na largura — flex recalcula o .main automaticamente */
  #app.with-sidebar .sidebar {
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
  }
  #app.with-sidebar.sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
    border-right: 0;
  }
}

/* ── Sinapses do fundo neural seguem a marca do dono ── */
.neural .syn-lines { stroke: var(--syn-line); }
.neural .syn-dots  { fill: var(--syn-dot); }
.neural .syn-g-t0 { stop-color: var(--syn-t0); }
.neural .syn-g-t1 { stop-color: var(--syn-t1); }
.neural .syn-g-v0 { stop-color: var(--syn-v0); }
.neural .syn-g-v1 { stop-color: var(--syn-v1); }

/* ── Marca-chrome: realces de marca em superfícies CLARAS (carteira/cards)
   e ramp do hero do hub. Default = Perito exato; custom = derivado da cor. */
:root {
  --bxc-brand:#381d54; --bxc-brand-2:#5a3686;
  --bxc-accent:#5fd6ea; --bxc-violet:#9a6cf0; --bxc-gold:#d1a950;
  --bx-hero1:#2c1746; --bx-hero2:#221238; --bx-hero3:#170c28;
}
html[data-brand="custom"] {
  --bxc-brand: var(--brand-primary);
  --bxc-brand-2: color-mix(in srgb, var(--brand-primary) 74%, white 14%);
  --bxc-accent: var(--brand-accent);
  --bxc-violet: color-mix(in srgb, var(--brand-primary) 54%, white 24%);
  --bxc-gold: var(--brand-aux);
  --bx-hero1: color-mix(in srgb, var(--brand-primary) 86%, #02050c);
  --bx-hero2: color-mix(in srgb, var(--brand-primary) 62%, #02050c);
  --bx-hero3: color-mix(in srgb, var(--brand-primary) 40%, #010207);
}