/* ============================================================================
   UI KIT — componentes padrao da Central (todos os produtos: AION2, CS2, ...)

   REGRA: nao escreva CSS/HTML de componente solto numa pagina. Use os macros de
   templates/_ui.html (ou as classes .ui-* daqui) e as cores de tokens.css.
   Catalogo vivo: /ui-kit   |   Guia: DESIGN-SYSTEM.md

   Camadas:  tokens.css (cores)  ->  cyber-design-system.css (base dos controles)
             ->  ui.css (ESTE arquivo: unifica visual + componentes novos)
   ============================================================================ */
@import url('cyber-design-system.css');

:root {
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-font: 'JetBrains Mono', 'Inter', monospace;
  --ui-h: 34px;                 /* altura padrao de botao/campo */
}

/* ============================================================================
   1. BOTOES   .ui-btn  +  --primary | --secondary | --ghost | --danger  +  --sm | --lg | --block
   ============================================================================ */
body .ui-btn, body .btn-cyber-primary, body .btn-cyber-ghost, body .a2-btn, body .a2-btn-nav, body .cs2-btn-ctrl-3d {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ui-h); padding: 0 16px; margin: 0;
  border-radius: var(--ui-radius); border: 1px solid var(--ui-line-strong);
  background: var(--ui-field); color: var(--ui-text);
  font: 700 11px/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
body .ui-btn:hover, body .btn-cyber-ghost:hover, body .a2-btn:hover, body .a2-btn-nav:hover, body .cs2-btn-ctrl-3d:hover {
  border-color: var(--ui-brand-soft); background: var(--ui-brand-wash); color: #fff; transform: translateY(-1px);
}
body .ui-btn:active { transform: translateY(0); }
body .ui-btn:disabled, body .ui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
body .ui-btn:focus-visible { outline: 2px solid var(--ui-brand-soft); outline-offset: 2px; }

/* primario: acao principal (verde) */
body .ui-btn--primary, body .btn-cyber-primary {
  background: var(--ui-ok); border-color: var(--ui-ok); color: #03170a;
  box-shadow: 0 0 14px rgba(0, 255, 136, .25);
}
body .ui-btn--primary:hover, body .btn-cyber-primary:hover { background: var(--ui-ok); color: #03170a; filter: brightness(1.1); box-shadow: 0 0 20px rgba(0, 255, 136, .4); }
/* secundario: roxo da marca */
body .ui-btn--secondary { background: var(--ui-brand); border-color: var(--ui-brand); color: #fff; }
body .ui-btn--secondary:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand-soft); }
/* ghost: discreto */
body .ui-btn--ghost, body .btn-cyber-ghost { background: transparent; border-color: var(--ui-line); color: var(--ui-muted); }
/* perigo */
body .ui-btn--danger { background: var(--ui-bad-wash); border-color: rgba(255, 77, 109, .5); color: var(--ui-bad); }
body .ui-btn--danger:hover { background: var(--ui-bad); border-color: var(--ui-bad); color: #fff; }
/* tamanhos */
body .ui-btn--sm, body .a2-btn, body .a2-btn-nav, body .cs2-btn-ctrl-3d { --ui-h: 28px; padding: 0 12px; font-size: 10px; }
body .ui-btn--lg { --ui-h: 44px; padding: 0 24px; font-size: 13px; }
body .ui-btn--block { width: 100%; }
body .ui-btn--icon { width: var(--ui-h); padding: 0; }

/* ============================================================================
   2. CHECKBOX / SWITCH — um visual so (aliases dos nomes antigos)
   canonico: <label class="ui-check"><input type="checkbox"><i></i></label>  (veja macro ui.check)
   ============================================================================ */
.ui-check, .cyber-checkbox, .a2-custom-checkbox {
  position: relative; width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-field); border: 1.5px solid var(--ui-line-strong); border-radius: 5px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ui-check input, .cyber-checkbox input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.ui-check svg, .cyber-checkbox svg, .a2-custom-checkbox svg {
  width: 12px; height: 12px; fill: none; stroke: #03170a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s;
}
.ui-check.checked, .cyber-checkbox.checked, .a2-custom-checkbox.checked, .a2-detect-tile.active .a2-custom-checkbox {
  background: var(--ui-ok); border-color: var(--ui-ok); box-shadow: none;
}
.ui-check.checked svg, .cyber-checkbox.checked svg, .a2-custom-checkbox.checked svg, .a2-detect-tile.active .a2-custom-checkbox svg { opacity: 1; transform: scale(1); }

.ui-switch, .a2-switch { position: relative; display: inline-block; width: 42px; height: 22px; flex: none; }
.ui-switch input, .a2-switch input { opacity: 0; width: 0; height: 0; }
.ui-switch .ui-switch__track, .a2-slider-switch {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: var(--ui-field); border: 1px solid var(--ui-line-strong); transition: .2s;
}
.ui-switch .ui-switch__track::before, .a2-slider-switch::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%;
  background: var(--ui-text); transition: .2s;
}
.ui-switch input:checked + .ui-switch__track, input:checked + .a2-slider-switch { background: var(--ui-ok); border-color: var(--ui-ok); box-shadow: none; }
.ui-switch input:checked + .ui-switch__track::before, input:checked + .a2-slider-switch::before { transform: translateX(20px); background: #03170a; }

/* ============================================================================
   3. CAMPOS: slider, input, tecla
   ============================================================================ */
.ui-range, .cyber-range, .a2-range-input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; outline: none; cursor: pointer;
  background: var(--ui-line); border: none;
}
.ui-range::-webkit-slider-thumb, .cyber-range::-webkit-slider-thumb, .a2-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ui-brand-soft); border: 2px solid var(--ui-bg); box-shadow: none; transition: transform .1s;
}
.ui-range::-webkit-slider-thumb:hover, .cyber-range::-webkit-slider-thumb:hover, .a2-range-input::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ui-range::-moz-range-thumb, .cyber-range::-moz-range-thumb, .a2-range-input::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--ui-brand-soft); border: 2px solid var(--ui-bg);
}

.ui-input {
  height: var(--ui-h); padding: 0 12px; width: 100%; border-radius: var(--ui-radius);
  background: var(--ui-field); border: 1px solid var(--ui-line-strong); color: var(--ui-text);
  font: 600 12px/1 var(--ui-font); outline: none; transition: border-color .15s, box-shadow .15s;
}
.ui-input::placeholder { color: var(--ui-dim); }
.ui-input:focus { border-color: var(--ui-brand-soft); box-shadow: 0 0 0 3px var(--ui-brand-wash); }

.ui-key, .cyber-key-badge {
  min-width: 56px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--ui-field); border: 1px solid var(--ui-line-strong); color: var(--ui-text);
  font: 800 10px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.ui-key:hover, .cyber-key-badge:hover { border-color: var(--ui-brand-soft); }
.ui-key.waiting, .cyber-key-badge.waiting, .ui-key.recording { border-color: var(--ui-ok); color: var(--ui-ok); animation: uiBlink 1s infinite; }
@keyframes uiBlink { 50% { opacity: .5; } }

/* ============================================================================
   4. DROPDOWN — um so (.cyber-dropdown + CyberDropdown em cyber-components.js; macro ui.select)
   ============================================================================ */
.cyber-dropdown { position: relative; min-width: 160px; }
.cyber-dropdown-trigger {
  width: 100%; height: var(--ui-h); padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-radius: var(--ui-radius); background: var(--ui-field); border: 1px solid var(--ui-line-strong); color: var(--ui-text);
  font: 700 11px/1 var(--ui-font); letter-spacing: .04em; cursor: pointer; text-align: left;
}
.cyber-dropdown-trigger:hover, .cyber-dropdown.open .cyber-dropdown-trigger { border-color: var(--ui-brand-soft); box-shadow: 0 0 0 3px var(--ui-brand-wash); }
.cyber-dropdown-chevron { display: inline-flex; color: var(--ui-brand-soft); transition: transform .15s; }
.cyber-dropdown.open .cyber-dropdown-chevron { transform: rotate(180deg); }
.cyber-dropdown-menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; padding: 4px; max-height: 260px; overflow: auto;
  background: #0d0719; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7);
}
.cyber-dropdown-item { padding: 8px 10px; border-radius: 6px; font: 600 11px/1.2 var(--ui-font); color: var(--ui-muted); cursor: pointer; }
.cyber-dropdown-item:hover { background: var(--ui-brand-wash); color: var(--ui-text); }
.cyber-dropdown-item.selected { color: var(--ui-ok); background: var(--ui-ok-wash); }

/* ============================================================================
   5. LINHA DE OPCAO (.ui-row = .cyber-item-box) e TILE de alternancia (.a2-detect-tile)
   ============================================================================ */
.ui-row, .cyber-item-box, .a2-detect-tile {
  background: var(--ui-field); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
}
.ui-row:hover, .cyber-item-box:hover, .a2-detect-tile:hover { border-color: var(--ui-line-strong); background: var(--ui-brand-wash); }
.a2-detect-tile.active { border-color: rgba(0, 255, 136, .4); }

/* ============================================================================
   6. LAUNCHER (card de destaque do produto)  —  macro ui.launcher(...)  +  ui.js (UI.Launcher)
   O estado vem de data-mode: checking | offline | opening | install | ready | launching | running | stopping
   ============================================================================ */
.ui-launcher {
  --ui-accent: var(--ui-brand-soft);
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 22px; align-items: center;
  padding: 16px 18px 14px; border-radius: var(--ui-radius-lg);
  background:
    radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--ui-accent) 20%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20, 10, 38, .96), rgba(10, 5, 20, .96));
  border: 1px solid color-mix(in srgb, var(--ui-accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 12%, transparent), 0 10px 32px rgba(0, 0, 0, .55), 0 0 36px color-mix(in srgb, var(--ui-accent) 14%, transparent);
  transition: border-color .3s, box-shadow .3s;
}
.ui-launcher[data-mode="ready"], .ui-launcher[data-mode="running"], .ui-launcher[data-mode="launching"] { --ui-accent: var(--ui-ok); }
.ui-launcher[data-mode="offline"], .ui-launcher[data-mode="opening"], .ui-launcher[data-mode="checking"] { --ui-accent: var(--ui-brand-soft); }
.ui-launcher[data-mode="install"] { --ui-accent: var(--ui-warn); }
.ui-launcher[data-mode="stopping"] { --ui-accent: var(--ui-bad); }

.ui-launcher__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ui-launcher__status {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font: 800 10.5px/1 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-accent);
}
.ui-launcher__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); animation: uiPulse 2s infinite ease-in-out; }
.ui-launcher[data-mode="offline"] .ui-launcher__status, .ui-launcher[data-mode="stopping"] .ui-launcher__status { color: var(--ui-bad); }
.ui-launcher[data-mode="offline"] .ui-launcher__dot { background: var(--ui-bad); animation: none; }
.ui-launcher__title { margin: 0; font: 800 22px/1.1 var(--ui-font); color: #fff; letter-spacing: -.01em; }
.ui-launcher__sub { margin: 0; font: 500 11px/1.4 var(--ui-font); color: var(--ui-muted); }
.ui-launcher__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ui-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--ui-line);
  font: 600 10px/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted);
}
.ui-chip b { color: var(--ui-text); font-weight: 800; }
.ui-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-dim); }
.ui-chip[data-state="ok"] i { background: var(--ui-ok); }
.ui-chip[data-state="ok"] b { color: var(--ui-ok); }
.ui-chip[data-state="warn"] i { background: var(--ui-warn); }
.ui-chip[data-state="warn"] b { color: var(--ui-warn); }

.ui-launcher__cta { display: flex; flex-direction: column; gap: 8px; width: 270px; }
.ui-launch-btn {
  position: relative; height: 58px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 900 14px/1 var(--ui-font); letter-spacing: .14em; text-transform: uppercase;
  background: var(--ui-ok); color: #03170a; box-shadow: 0 0 22px rgba(0, 255, 136, .35);
  transition: transform .15s, filter .15s, box-shadow .2s, background .2s;
}
.ui-launch-btn::after {      /* anel de pulso */
  content: ""; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid currentColor; opacity: 0; pointer-events: none;
}
.ui-launch-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ui-launch-btn:active { transform: translateY(0); }
.ui-launcher[data-mode="ready"] .ui-launch-btn::after, .ui-launcher[data-mode="offline"] .ui-launch-btn::after { animation: uiRing 2.2s infinite ease-out; }
.ui-launcher[data-mode="offline"] .ui-launch-btn {      /* ABRIR AGENTE: roxo profundo com brilho que varre o botao */
  color: var(--ui-text); border-color: var(--ui-line-strong);
  background: linear-gradient(105deg, var(--ui-brand-night) 0%, var(--ui-brand-deep) 38%, var(--ui-brand-mid) 50%, var(--ui-brand-deep) 62%, var(--ui-brand-night) 100%) 0 0 / 260% 100%;
  box-shadow: 0 0 22px var(--ui-brand-glow), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: uiSheen 3.6s linear infinite;
}
.ui-launcher[data-mode="offline"] .ui-launch-btn:hover { border-color: var(--ui-brand-soft); box-shadow: 0 0 30px var(--ui-brand-glow), 0 0 0 3px var(--ui-brand-wash), inset 0 1px 0 rgba(255, 255, 255, .12); animation-duration: 1.6s; filter: none; }
.ui-launcher[data-mode="install"] .ui-launch-btn { background: var(--ui-warn); color: #1c1203; box-shadow: 0 0 22px rgba(251, 191, 36, .35); }
.ui-launcher[data-mode="running"] .ui-launch-btn, .ui-launcher[data-mode="stopping"] .ui-launch-btn { background: var(--ui-bad); color: #fff; box-shadow: 0 0 22px rgba(255, 77, 109, .35); }
.ui-launcher[data-mode="checking"] .ui-launch-btn, .ui-launcher[data-mode="opening"] .ui-launch-btn,
.ui-launcher[data-mode="launching"] .ui-launch-btn, .ui-launcher[data-mode="stopping"] .ui-launch-btn { cursor: progress; filter: saturate(.7); }
.ui-launcher[data-mode="checking"] .ui-launch-btn::before, .ui-launcher[data-mode="opening"] .ui-launch-btn::before,
.ui-launcher[data-mode="launching"] .ui-launch-btn::before, .ui-launcher[data-mode="stopping"] .ui-launch-btn::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: uiSpin .8s linear infinite;
}

.ui-launcher__hint {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 6px 0 10px; border-radius: 8px;
  border: 1px dashed var(--ui-line); font: 600 10px/1 var(--ui-font); color: var(--ui-muted);
}
/* BAIXAR O AGENTE: botao contornado, escuro, com seta; no hover enche de roxo profundo e a seta desce */
.ui-dl-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px; border-radius: 6px; text-decoration: none; white-space: nowrap; flex: none;
  background: var(--ui-brand-night); border: 1px solid var(--ui-line-strong); color: var(--ui-brand-soft);
  font: 800 9.5px/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.ui-launcher__hint > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-dl-btn svg { transition: transform .2s; }
.ui-dl-btn:hover { background: var(--ui-brand-deep); border-color: var(--ui-brand-soft); color: var(--ui-text); box-shadow: 0 0 14px var(--ui-brand-glow); }
.ui-dl-btn:hover svg { transform: translateY(2px); }
.ui-dl-btn:active { transform: translateY(1px); }
.ui-dl-btn:focus-visible { outline: 2px solid var(--ui-brand-soft); outline-offset: 2px; }

/* trilha de passos: 1 instalar -> 2 abrir -> 3 iniciar */
.ui-launcher__steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-step {
  display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 7px;
  background: rgba(255, 255, 255, .02); border: 1px solid var(--ui-line);
  font: 700 9.5px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-dim);
}
.ui-step span { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-line); color: var(--ui-text); font-size: 9px; }
.ui-step.is-active { color: var(--ui-text); border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 10%, transparent); }
.ui-step.is-active span { background: var(--ui-accent); color: #04120a; }
.ui-step.is-done { color: var(--ui-muted); }
.ui-step.is-done span { background: var(--ui-ok); color: #04120a; }

@keyframes uiPulse { 50% { opacity: .45; transform: scale(.85); } }
@keyframes uiRing { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08, 1.25); } }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@keyframes uiSheen { to { background-position: -260% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-launcher[data-mode="offline"] .ui-launch-btn { animation: none; } }

/* telas baixas: hero mais enxuto */
@media (min-width: 1000px) and (max-height: 860px) {
  .ui-launcher { padding: 10px 14px 10px; gap: 8px 16px; }
  .ui-launcher__title { font-size: 18px; }
  .ui-launch-btn { height: 46px; font-size: 12px; }
  .ui-launcher__cta { width: 240px; gap: 6px; }
  .ui-launcher__sub { display: none; }
  .ui-step { height: 22px; }
}
@media (max-width: 999px) {
  .ui-launcher { grid-template-columns: 1fr; }
  .ui-launcher__cta { width: 100%; }
}

/* ============================================================================
   7. SECAO / CARD PADRAO  (macro ui.card)  — herda .a2-card / .a2-card-header-row (ja na paleta)
   ============================================================================ */
.ui-card-body { display: flex; flex-direction: column; gap: 8px; }
.ui-label { font: 700 10px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-muted); }
.ui-hint { font: 500 10.5px/1.4 var(--ui-font); color: var(--ui-dim); }

/* color picker sem opacidade (ex.: cores de texto/entidades do AION2) */
.neon-picker--noalpha .neon-alpha-slider, .neon-picker--noalpha .neon-alpha-val { display: none; }
.ui-dim { color: var(--ui-dim); }
.ui-slider__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
/* launcher dentro da grade fixa do AION2 (que forca padding compacto) */
#pane-esp .a2-grid-2x2 > .a2-card.ui-launcher { padding: 14px 16px 12px !important; }

.ui-launcher { align-content: center; }

/* ============================================================================
   TOGGLE DA BUILD (macro admin_menu) + launcher bloqueado (PATCHED)
   ============================================================================ */
body .a2-topbar, body .ui-topbar { position: relative; z-index: 300; }   /* menus abrem POR CIMA dos cards */
.ui-seg { display: inline-flex; align-items: center; gap: 3px; height: 34px; padding: 3px 3px 3px 12px; border-radius: 999px; background: var(--ui-field); }
.ui-seg__label { margin-right: 6px; font: 800 9px/1 var(--ui-font); letter-spacing: .14em; color: var(--ui-dim); }
.ui-seg__opt {
  height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-muted); cursor: pointer;
  font: 800 10px/1 var(--ui-font); letter-spacing: .08em; transition: background .15s, color .15s;
}
.ui-seg__opt:hover { color: var(--ui-text); background: var(--ui-brand-wash); }
.ui-seg__opt.is-current[data-state="ok"] { background: var(--ui-ok); color: #03170a; }
.ui-seg__opt.is-current[data-state="bad"] { background: var(--ui-bad); color: #fff; }
.ui-seg.is-busy { opacity: .6; pointer-events: none; }
@media (max-width: 700px) { .ui-seg__label { display: none; } .ui-seg { padding-left: 3px; } .ui-seg__opt { padding: 0 8px; font-size: 9px; } }

.ui-chip[data-state="bad"] i { background: var(--ui-bad); }
.ui-chip[data-state="bad"] b { color: var(--ui-bad); }
.ui-launcher[data-mode="patched"] { --ui-accent: var(--ui-bad); }
.ui-launcher[data-mode="patched"] .ui-launch-btn { background: var(--ui-bad-wash); color: var(--ui-bad); box-shadow: none; cursor: not-allowed; filter: none; }
.ui-launcher[data-mode="patched"] .ui-launch-btn::after { display: none; }
.ui-launcher[data-mode="patched"] .ui-launcher__status { color: var(--ui-bad); }
.ui-launcher[data-mode="patched"] .ui-launcher__dot { background: var(--ui-bad); animation: none; }

/* ============================================================================
   TOPBAR dos produtos (macro topbar) + menu generico .ui-pop
   ============================================================================ */
.ui-topbar {
  position: relative; z-index: 300; flex: none; display: flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 18px;
  background: linear-gradient(180deg, rgba(20, 10, 38, .92), rgba(10, 5, 20, .78)); backdrop-filter: blur(14px);
}
.ui-topbar__sep { width: 1px; height: 26px; background: var(--ui-line); }
.ui-topbar__brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ui-topbar__logo {
  height: 28px; width: auto; max-width: 60px; object-fit: contain; flex: none;
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, .45));
  transition: transform .2s ease, filter .2s ease;
}
.ui-topbar__logo:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(255, 77, 109, .75));
}
.ui-topbar__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-topbar__title { font: 800 17px/1 var(--ui-font); letter-spacing: .02em; color: #fff; }
.ui-topbar__tag { font: 500 10.5px/1 var(--ui-font); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-topbar__spacer { flex: 1; }
/* abas na topbar: centro REAL da barra em telas largas (nao some entre marca e menus); em telas menores seguem o fluxo */
.ui-topbar__nav { flex: none; }
@media (min-width: 1280px) { .ui-topbar--nav .ui-topbar__nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } }
@media (max-width: 1279px) { .ui-topbar--nav .ui-topbar__nav { flex-wrap: nowrap !important; max-width: none; } .ui-topbar--nav .a2-tab-btn { padding-inline: 12px !important; } }
@media (max-width: 960px) { .ui-topbar--nav { height: auto; min-height: 54px; flex-wrap: wrap; padding-block: 6px; } .ui-topbar--nav .ui-topbar__nav { order: 9; flex: 1 1 100%; justify-content: center; } .ui-topbar--nav .ui-topbar__nav + .ui-topbar__spacer { display: none; } }

.ui-pop { position: relative; }
.ui-user {
  display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px 0 5px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ui-field); color: var(--ui-text); font-family: var(--ui-font); transition: background .15s;
}
.ui-user:hover, .ui-user[aria-expanded="true"] { background: var(--ui-brand-wash); }
.ui-user__avatar {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ui-brand-soft), var(--ui-brand)); color: #fff; font: 800 12px/1 var(--ui-font);
}
.ui-user__name { font: 700 12px/1 var(--ui-font); }
.ui-user__role { padding: 3px 6px; border-radius: 4px; background: var(--ui-line); color: var(--ui-muted); font: 800 8.5px/1 var(--ui-font); letter-spacing: .08em; }
.ui-user__role.is-admin { background: var(--ui-brand); color: #fff; }
.ui-user__chev { color: var(--ui-muted); transition: transform .15s; }
.ui-user[aria-expanded="true"] .ui-user__chev { transform: rotate(180deg); }

.ui-pop__menu {
  position: absolute; z-index: 400; top: calc(100% + 8px); right: 0; width: 250px; padding: 6px;
  background: #0d0719; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, .75);
}
.ui-pop__menu[hidden] { display: none; }
.ui-pop__item { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: var(--ui-radius); text-decoration: none; color: var(--ui-text); font-family: var(--ui-font); }
.ui-pop__item b { font: 800 11px/1 var(--ui-font); letter-spacing: .06em; }
.ui-pop__item em { font: 500 10px/1.2 var(--ui-font); font-style: normal; color: var(--ui-muted); }
.ui-pop__item:hover { background: var(--ui-brand-wash); }
.ui-pop__item.is-danger b { color: var(--ui-bad); }
.ui-pop__item.is-danger:hover { background: var(--ui-bad-wash); }

@media (min-width: 1000px) and (max-height: 860px) { .ui-topbar { height: 46px; padding: 0 14px; } .ui-topbar__tag { display: none; } .ui-topbar__logo { width: 26px; height: 26px; } }
@media (max-width: 700px) { .ui-topbar__tag, .ui-user__name, .ui-user__role { display: none; } .ui-topbar { padding: 0 10px; gap: 8px; } }

/* ============================================================================
   BOARD: cada filho direto e um BLOCO (.a2-card, .ui-launcher, qualquer coisa). Os blocos se encaixam sozinhos:
   quebram de linha conforme a largura, crescem para preencher a linha (sem buraco na ultima), ficam centralizados
   e a pagina rola quando passa da tela. Novo card/funcao = so adicionar um filho; nada de grid/nth-child na pagina.
     <div class="ui-board"> ...blocos... </div>
   Modificadores no bloco: .ui-board__full (linha inteira) | .ui-board__narrow (cabe 3+ por linha) | .ui-board__wide (pede mais largura).
   Ajuste fino: --ui-board-min (largura minima do bloco, padrao 520px) e --ui-board-gap no proprio .ui-board.
   ============================================================================ */
.ui-board {
  --ui-board-min: 520px; --ui-board-gap: 14px;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: stretch;
  gap: var(--ui-board-gap); width: 100%; margin-inline: auto; flex: 1 1 auto; min-width: 0;
}
.ui-board > * { flex: 1 1 min(var(--ui-board-min), 100%); min-width: 0; }
.ui-board > .a2-card { height: auto; }
.ui-board > .ui-launcher, .ui-board > .ui-board__full { flex-basis: 100%; }
.ui-board > .ui-board__narrow { flex-basis: min(340px, 100%); }
.ui-board > .ui-board__wide { flex-basis: min(760px, 100%); }
/* com JS (UI.initBoards) vira masonry: colunas auto-fit, blocos em linhas de 1px, o proximo bloco vai para a coluna mais vazia */
.ui-board.is-masonry {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-board-min), 100%), 1fr));
  grid-auto-rows: 1px; grid-auto-flow: dense; column-gap: var(--ui-board-gap); row-gap: 0; align-items: start;
}
.ui-board.is-masonry > * { flex: none; align-self: start; }
.ui-board.is-masonry > .ui-launcher, .ui-board.is-masonry > .ui-board__full { grid-column: 1 / -1; }
.ui-board.is-masonry > .ui-board__narrow { grid-column: span 1; }
/* desktop: a pagina NAO rola. O JS escolhe escala x colunas para caber; o zoom fixo do wrap sai (o board escala sozinho).
   mobile (<1000px): fluxo normal, 1 coluna, a pagina rola com o dedo */
.a2-content-wrap:has(.ui-board) { zoom: 1 !important; }
@media (min-width: 1000px) { .a2-content-wrap:has(.ui-board) { overflow: hidden; min-height: 0; } }
.a2-tab-pane.active:has(> .ui-board) { flex: none; align-items: flex-start; }

/* launcher compacto (AION2 e CS2): coluna estreita -> versao compacta, 1 coluna, so o essencial */
:is(#pane-esp, .cs2-stack) .ui-launcher { grid-template-columns: 1fr; gap: 10px; }
:is(#pane-esp, .cs2-stack) .ui-launcher__main { gap: 6px; }
:is(#pane-esp, .cs2-stack) .ui-launcher__sub, :is(#pane-esp, .cs2-stack) .ui-launcher__hint, :is(#pane-esp, .cs2-stack) .ui-launcher__chips .ui-chip:nth-child(n+3) { display: none; }
:is(#pane-esp, .cs2-stack) .ui-launcher__title { font-size: 19px; }
:is(#pane-esp, .cs2-stack) .ui-launcher__cta { width: 100%; gap: 6px; }
:is(#pane-esp, .cs2-stack) .ui-launch-btn { height: 48px; font-size: 13px; letter-spacing: .1em; }
:is(#pane-esp, .cs2-stack) .ui-launcher .ui-step { height: 26px; padding: 0 6px; font-size: 9px; gap: 5px; white-space: nowrap; }

.ui-admin__title { padding: 6px 10px 8px; font: 800 9.5px/1 var(--ui-font); letter-spacing: .12em; color: var(--ui-dim); }