/* ================================================================
   ecbyts - SISTEMA DE DESIGN
   ================================================================

   Este arquivo contem todos os estilos visuais da aplicacao.

   ORGANIZACAO:
   1. Variaveis CSS (cores, sombras, espacamentos)
   2. Reset e estilos base
   3. Layout principal (grid da aplicacao)
   4. Barra de titulo
   5. Menu e Toolbar
   6. Paineis laterais
   7. Area principal (canvas 3D)
   8. Formularios e controles
   9. Modais
   10. Notificacoes (toast)
   11. Utilitarios

   ================================================================ */

/* ================================================================
   1. VARIAVEIS CSS - Design Tokens
   ----------------------------------------------------------------
   Variaveis sao valores reutilizaveis que facilitam mudancas globais.
   Exemplo: mudar --primary-500 altera TODAS as cores primarias.
   ================================================================ */

:root {
    /* ----------------------------------------
       Teal Petroleum Palette — Corporate Innovation
       Paleta de petroleo teal — identidade hidrogeologica.
       Referencia visual: curvas de nivel, mapas topograficos.
       ---------------------------------------- */

    /* Primary: Teal Petroleum — escala original light */
    --primary-50: #e6eff2;
    --primary-100: #ccdfe5;
    --primary-200: #a3c5cf;
    --primary-300: #7aa3ad;
    --primary-400: #5a8692;
    --primary-500: #3d6b7a;   /* Base — teal petroleo */
    --primary-600: #335a68;
    --primary-700: #294a56;
    --primary-800: #1f3a44;
    --primary-900: #162a32;

    /* Accent: Teal quente — destaques funcionais */
    --accent-500: #2d8a7a;
    --accent-600: #246e62;
    --accent-700: #1b544a;

    /* Neutrals: Escala original — 0=claro, 900=escuro */
    --neutral-0: #f9fbfc;
    --neutral-50: #f1f5f6;
    --neutral-100: #e8edf0;
    --neutral-200: #d4dce1;
    --neutral-300: #bdc7cf;
    --neutral-400: #8a96a0;
    --neutral-500: #5d6b76;
    --neutral-600: #414f59;
    --neutral-700: #2c3842;
    --neutral-800: #1b252e;
    --neutral-900: #0d1318;

    /* Scrollbar — tokens tematicos */
    --scrollbar-w: 6px;
    --scrollbar-thumb: var(--neutral-400);       /* #8a96a0 — visivel em fundo claro */
    --scrollbar-thumb-hover: var(--neutral-500); /* #5d6b76 */
    --scrollbar-track: transparent;

    /* Chrome — alturas das barras de UI */
    --chrome-top: 126px;     /* titlebar(40) + menubar(30) + toolbar(56) */
    --chrome-bottom: 26px;   /* statusbar */

    /* ----------------------------------------
       Cores Semanticas — desaturadas
       ---------------------------------------- */
    --success: #3d8a5c;
    --warning: #b8862e;
    --warning-50: #faf6ee;
    --warning-300: #d4a94a;
    --error: #b84444;
    --info: #3d6b7a;

    /* Merge panel — diff card badges & value backgrounds */
    --merge-add-bg: #dff0d8;    --merge-add-fg: #3c763d;
    --merge-remove-bg: #f2dede; --merge-remove-fg: #a94442;
    --merge-modify-bg: #d9edf7; --merge-modify-fg: #31708f;
    --merge-value-a-bg: #eef3ff;
    --merge-value-b-bg: #fff5ee;
    --merge-warning-bg: #fcf8e3; --merge-warning-fg: #8a6d3b;

    /* ----------------------------------------
       Depth Hierarchy — Contour Line Concept
       Sombras topograficas com bordas sutis 1px.
       Sem drop shadows pesados.
       ---------------------------------------- */
    --shadow-sm: 0 1px 0 rgba(0,0,0,0.04);
    --shadow-md: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    --shadow-lg: 0 2px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-xl: 0 4px 8px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);

    /* ----------------------------------------
       Bordas — Precisao Tecnica
       Raios menores para aparencia de ferramenta profissional
       ---------------------------------------- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* ----------------------------------------
       Espacamentos - Sistema de 4px/8px
       ---------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* ----------------------------------------
       Tipografia — Escala consolidada (Y1: 13 → 8 tamanhos)
       ---------------------------------------- */
    --text-xs:   10px;   /* minimo legivel: labels, badges, captions */
    --text-sm:   11px;   /* texto secundario, botoes compactos */
    --text-base: 12px;   /* corpo padrao, inputs, listas */
    --text-md:   13px;   /* subtitulos, cards */
    --text-lg:   14px;   /* titulos de secao, modal headers */
    --text-xl:   16px;   /* titulos maiores */
    --text-2xl:  18px;   /* titulos de modais e paginas */
    --text-3xl:  24px;   /* headings de nivel superior */

    /* ----------------------------------------
       Modal — Tiers de tamanho (Y5)
       ---------------------------------------- */
    --modal-sm:   400px;   /* confirm, prompt, formularios simples */
    --modal-md:   560px;   /* formularios padrao, configuracao */
    --modal-lg:   720px;   /* formularios complexos, editores */
    --modal-xl:   920px;   /* editores completos, grids de dados */
    --modal-full: 95vw;    /* maximizado (pipeline editor, data entry) */

    /* ----------------------------------------
       Z-Index — Camadas canonicas (UI Audit B1)
       Valores locais (1-5) sao permitidos dentro de
       componentes isolados. Valores globais abaixo.
       ---------------------------------------- */
    --z-hud:       15;     /* HUD docked (constellation, compass) */
    --z-hud-resize: 20;   /* HUD resize handles */
    --z-min-tabs:  50;     /* Minimized panel edge tabs */
    --z-floating:  200;    /* Floating panels, toolbars */
    --z-float-resize: 210; /* Floating panel resize handles */
    --z-chat:      250;    /* LLM chat panel */
    --z-context:   300;    /* Panel context menus */
    --z-modal:     3200;   /* All modals (sym-overlay pattern) */
    --z-globe-ctx: 1000;   /* 3D element context menu */
    --z-map:       8500;   /* Map picker overlay */
    --z-dialog:    9000;   /* Async confirm/prompt dialogs */
    --z-auth:      9500;   /* Auth overlay (above modals) */
    --z-toast:     9600;   /* Toast notifications */
    --z-loading:   99999;  /* Initial page load spinner */

    /* ----------------------------------------
       Animacao — Tiers padronizados (Y10)
       ---------------------------------------- */
    --duration-micro:  60ms;
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;
    --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

    /* ----------------------------------------
       Interface — Surface tokens (light mode)
       Nomes herdados do dark mode, semantica = niveIs de superficie
       ---------------------------------------- */
    /* Tokens semanticos de superficie e texto — light mode */
    --surface-1:    #f9fbfc;
    --surface-2:    #f1f5f6;
    --text-primary: #1b252e;
    --text-secondary: #414f59;
    --border-color: rgba(0,0,0,0.12);

    --window-dark: #f9fbfc;
    --window-dark-2: #f1f5f6;
    --window-dark-3: #e8edf0;
    --window-border: rgba(0,0,0,0.08);
    --window-text: #1b252e;
    --window-muted: #5d6b76;
    --ribbon-bg: #f1f5f6;
    --ribbon-panel: #e8edf0;
    --ribbon-hover: rgba(0,0,0,0.04);

    /* ----------------------------------------
       Overlay tints — hover/focus theme-aware
       ---------------------------------------- */
    --overlay-subtle: rgba(0,0,0,0.04);
    --overlay-light: rgba(0,0,0,0.08);
    --overlay-medium: rgba(0,0,0,0.12);
    --overlay-strong: rgba(0,0,0,0.2);

    /* ----------------------------------------
       Primary text — contraste adequado por tema
       ---------------------------------------- */
    --primary-text: var(--primary-600);
    --primary-text-muted: var(--primary-500);

    /* ----------------------------------------
       Accent Colors — estados e badges
       ---------------------------------------- */
    --accent-primary: #3b82f6;
    --accent-blue: #3b82f6;
    --accent-green: #22c55e;
    --accent-yellow: #eab308;
    --accent-orange: #f59e0b;
    --accent-red: #ef4444;

    /* ----------------------------------------
       Bottom Panels — constellation, viz settings
       Paineis inferiores do viewport 3D, theme-aware.
       ---------------------------------------- */
    --bottom-bg: linear-gradient(to top,
        rgba(230, 235, 240, 0.96) 0%,
        rgba(241, 245, 246, 0.92) 70%,
        rgba(248, 250, 252, 0.85) 100%);
    --bottom-bg-solid: rgba(241, 245, 246, 0.96);
    --bottom-text: #2c3842;
    --bottom-text-muted: #5d6b76;
    --bottom-text-faint: #8a96a0;
    --bottom-border: rgba(0, 0, 0, 0.08);
    --bottom-border-subtle: rgba(0, 0, 0, 0.05);
    --bottom-hover: rgba(0, 0, 0, 0.06);
    --bottom-accent: var(--primary-500);

    /* ----------------------------------------
       Topographic Pattern — contour line SVG as bg
       ---------------------------------------- */
    --topo-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%233d6b7a' stroke-width='0.5'%3E%3Cellipse cx='200' cy='200' rx='180' ry='140' opacity='0.04'/%3E%3Cellipse cx='200' cy='200' rx='150' ry='115' opacity='0.05'/%3E%3Cellipse cx='200' cy='200' rx='120' ry='90' opacity='0.04'/%3E%3Cellipse cx='200' cy='200' rx='90' ry='65' opacity='0.05'/%3E%3Cellipse cx='200' cy='200' rx='60' ry='42' opacity='0.04'/%3E%3Cellipse cx='200' cy='200' rx='30' ry='20' opacity='0.06'/%3E%3Cellipse cx='320' cy='80' rx='70' ry='55' opacity='0.03'/%3E%3Cellipse cx='320' cy='80' rx='45' ry='35' opacity='0.04'/%3E%3Cellipse cx='80' cy='320' rx='65' ry='50' opacity='0.03'/%3E%3Cellipse cx='80' cy='320' rx='40' ry='30' opacity='0.04'/%3E%3C/g%3E%3C/svg%3E");

    /* ----------------------------------------
       Typography — Customizable font stacks
       Overridden at runtime by customize/manager.js
       ---------------------------------------- */
    --font-ui: 'Segoe UI', 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;
}

/* ================================================================
   1b. DARK THEME OVERRIDES
   ----------------------------------------------------------------
   Sobrescreve variaveis CSS para tema escuro.
   Ativado via atributo data-theme="dark" no <html>.
   ================================================================ */
[data-theme="dark"] {
    /* Primary: ajustado para fundos escuros */
    --primary-50: rgba(61, 107, 122, 0.12);
    --primary-100: rgba(61, 107, 122, 0.2);
    --primary-200: #7aa3ad;
    --primary-300: #7aa3ad;

    /* Neutrals: invertido — 0=escuro, 900=claro */
    --neutral-0: #0d1318;
    --neutral-50: #121a1e;
    --neutral-100: #1b252e;
    --neutral-200: #2a3540;
    --neutral-300: #3d4a56;
    --neutral-400: #748290;
    --neutral-500: #8a96a0;
    --neutral-600: #8a96a0;
    --neutral-700: #a0acb8;
    --neutral-800: #c5cdd5;
    --neutral-900: #e8edf0;

    /* Scrollbar — dark override */
    --scrollbar-thumb: var(--neutral-500);       /* #8a96a0 — visivel em fundo escuro */
    --scrollbar-thumb-hover: var(--neutral-700); /* #a0acb8 */
    --scrollbar-track: transparent;

    /* Semanticas */
    --warning-50: rgba(184, 134, 46, 0.1);

    /* Merge panel — dark mode */
    --merge-add-bg: rgba(61,138,92,0.15);    --merge-add-fg: #6dbb8a;
    --merge-remove-bg: rgba(184,68,68,0.15); --merge-remove-fg: #e07070;
    --merge-modify-bg: rgba(61,107,122,0.15);--merge-modify-fg: #7db8cc;
    --merge-value-a-bg: rgba(59,107,255,0.08);
    --merge-value-b-bg: rgba(255,140,0,0.08);
    --merge-warning-bg: rgba(184,134,46,0.1); --merge-warning-fg: #d4a94a;

    /* Sombras mais fortes para dark mode */
    --shadow-sm: 0 1px 0 rgba(0,0,0,0.15);
    --shadow-md: 0 1px 2px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-lg: 0 2px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.03);
    --shadow-xl: 0 4px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);

    /* Tokens semanticos de superficie e texto — dark mode */
    --surface-1:    #1b252e;
    --surface-2:    #2a3540;
    --text-primary: #c5cdd5;
    --text-secondary: #a0acb8;
    --border-color: rgba(255,255,255,0.08);

    /* Surface tokens — dark */
    --window-dark: #1a1a1a;
    --window-dark-2: #222222;
    --window-dark-3: #2a2a2a;
    --window-border: rgba(255,255,255,0.06);
    --window-text: #c5cdd5;
    --window-muted: #748290;
    --ribbon-bg: #1e1e1e;
    --ribbon-panel: #252525;
    --ribbon-hover: rgba(255,255,255,0.04);

    /* Overlay tints — invertido para dark */
    --overlay-subtle: rgba(255,255,255,0.04);
    --overlay-light: rgba(255,255,255,0.08);
    --overlay-medium: rgba(255,255,255,0.12);
    --overlay-strong: rgba(255,255,255,0.2);

    /* Primary text — invertido para dark */
    --primary-text: var(--primary-400);
    --primary-text-muted: var(--primary-300);

    /* Bottom Panels — dark (valores originais hardcoded) */
    --bottom-bg: linear-gradient(to top,
        rgba(13, 19, 24, 0.92) 0%,
        rgba(27, 37, 46, 0.85) 70%,
        rgba(44, 56, 66, 0.70) 100%);
    --bottom-bg-solid: rgba(10, 14, 20, 0.92);
    --bottom-text: rgba(255, 255, 255, 0.75);
    --bottom-text-muted: rgba(255, 255, 255, 0.6);  /* R4 fix: 0.5→0.6 for WCAG AA 4.5:1 */
    --bottom-text-faint: rgba(255, 255, 255, 0.25);
    --bottom-border: rgba(255, 255, 255, 0.08);
    --bottom-border-subtle: rgba(255, 255, 255, 0.04);
    --bottom-hover: rgba(255, 255, 255, 0.08);
    --bottom-accent: #4FC3F7;
}

/* ================================================================
   2. RESET E ESTILOS BASE
   ----------------------------------------------------------------
   Remove estilos padrao dos navegadores para consistencia.
   ================================================================ */

/* Scrollbar global — visivel em ambos os temas */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* Remove margens e paddings padrao de todos elementos */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Bordas incluidas no tamanho */
}

/* ----------------------------------------------------------------
   FOCUS-VISIBLE — Accessibility (R2 + Gap #3 HCM-safe)
   Dual outline + box-shadow: outline for High Contrast Mode,
   box-shadow for overflow:hidden containers.
   ---------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--accent-primary, #3b82f6);
}
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
@media (forced-colors: active) {
    :focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Configuracao do corpo da pagina */
body {
    font-family: var(--font-ui, 'Segoe UI', 'Inter', -apple-system, sans-serif);
    font-size: var(--text-base, 12px);
    line-height: 1.5;
    color: var(--neutral-800);
    background: var(--window-dark-3);
    overflow: hidden;  /* Sem barras de rolagem */
    height: 100vh;     /* Altura total da tela */
    width: 100vw;      /* Largura total da tela */
}

/* ================================================================
   2b. STATE PATTERNS — Reusable empty/loading/error/disabled states (Y6)
   ================================================================ */
.state-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    color: var(--text-secondary);
    font-size: var(--text-sm, 11px);
    text-align: center;
    gap: var(--space-2);
}
.state-empty svg { opacity: 0.4; }

.state-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm, 11px);
}
.state-loading::before {
    content: '';
    width: 16px; height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary, #3b82f6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: var(--space-2);
}

.state-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    color: var(--error, #b84444);
    font-size: var(--text-sm, 11px);
}

.state-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================================
   3. LAYOUT PRINCIPAL - Grid da Aplicacao
   ----------------------------------------------------------------
   A aplicacao usa CSS Grid para organizar os elementos:
   - 5 linhas: titulo, menu, toolbar, conteudo, status
   - 3 colunas: painel esquerdo, area principal, painel direito
   ================================================================ */

#app {
    display: grid;
    /* Linhas: titulo(40px) menu(30px) toolbar(56px) conteudo(resto) status(26px)
       Ticker row (0px/28px) é adicionada dinamicamente por rebuildGridRows() */
    grid-template-rows: 40px 30px 56px 0px 1fr 26px;
    /* Colunas: variaveis para permitir resize e colapso */
    --left-panel-width: 300px;
    --right-panel-width: 280px;
    --left-rail-width: clamp(36px, calc(var(--left-panel-width) * 0.12), 44px);
    --right-rail-width: clamp(36px, calc(var(--right-panel-width) * 0.12), 44px);
    grid-template-columns: var(--left-panel-width) 4px 1fr 4px var(--right-panel-width);
    height: 100vh;
    background: var(--window-dark-3);
    /* Topographic contour background */
    background-image: var(--topo-pattern);
    background-size: 400px 400px;
}

/* Contrato explicito de linhas do grid (evita deslocamento quando itens sao ocultos) */
#titlebar { grid-row: 1; }
#menubar { grid-row: 2; }
#toolbar { grid-row: 3; }
#ticker-bar { grid-row: 4; }
#left-panel,
#resize-handle-left,
#main-area,
#resize-handle-right,
#right-panel { grid-row: 5; }
#statusbar { grid-row: 6; }

/* ================================================================
   4. BARRA DE TITULO - Estilo Windows
   ----------------------------------------------------------------
   Contem logo, nome do app, acoes e controles de janela.
   ================================================================ */

#titlebar {
    grid-column: 1 / -1;  /* Ocupa todas as colunas */
    background: var(--window-dark);
    border-bottom: 1px solid var(--window-border);
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: var(--window-text);
    user-select: none;  /* Impede selecao de texto */
}

/* Logo e nome do aplicativo */
#titlebar .logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Icone do logo */
#titlebar .logo-icon {
    height: 24px;
    width: auto;
    object-fit: contain;
}

/* Versao do app */
#titlebar .version {
    font-size: 10px;
    opacity: 0.7;
    margin-left: var(--space-1);
}

/* Container das acoes (direita) */
.titlebar-actions {
    margin-left: auto;  /* Empurra para a direita */
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 11px;
    color: var(--window-muted);
}

/* Botao de compartilhar (chip neutro) */
.titlebar-chip {
    background: var(--overlay-subtle);
    color: var(--window-text);
    border: 1px solid var(--overlay-light);
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* ================================================================
   5. MENU E TOOLBAR
   ----------------------------------------------------------------
   Menu: navegacao entre secoes (Arquivo, Inicio, etc)
   Toolbar: acoes rapidas (Novo, Importar, Exportar, etc)
   ================================================================ */

/* Barra de Menu - Estilo Power BI */
#menubar {
    grid-column: 1 / -1;
    background: var(--window-dark-2);
    border-bottom: 1px solid var(--window-border);
    color: var(--window-text);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 14px;
    font-size: 12px;
}

/* Areas tree - inside tab panel */
.areas-tree {
    flex: 1;
    overflow: auto;
    padding: var(--space-2);
}

#tab-areas {
    background: var(--neutral-50);
}

#tab-areas .areas-tree {
    background: var(--neutral-50);
}

.areas-tree-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    position: relative;
    color: var(--neutral-700);
    user-select: none;
    margin-bottom: 2px;
}

.areas-tree-item:hover {
    background: var(--neutral-200);
}

.areas-tree-item.active {
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
}

.areas-tree-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-500);
    border-radius: 3px 0 0 3px;
}

.areas-tree-chevron {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: transform 0.15s ease;
    color: var(--neutral-500);
}

.areas-tree-chevron.expanded {
    transform: rotate(90deg);
}

.areas-tree-icon {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.areas-tree-label {
    flex: 1;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.areas-tree-badges {
    display: inline-flex;
    gap: 6px;
    font-size: 10px;
}

.areas-tree-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--neutral-200);
    color: var(--neutral-600);
    font-weight: 500;
}

.areas-tree-children {
    margin-left: 18px;
    border-left: 2px solid var(--neutral-300);
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.areas-tree-hidden {
    display: none;
}

/* Label block: nome + subtitulo de registro fiscal */
.areas-tree-label-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden;
}

.areas-tree-label-block .areas-tree-label {
    flex: unset;
}

.areas-tree-registry {
    font-size: 10px;
    color: var(--neutral-500);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    line-height: 1.2;
}

/* Badge de contagem de elementos vinculados */
.areas-tree-badge--count {
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: var(--text-xs, 10px);
    min-width: 16px;
    text-align: center;
}

/* Painel de detalhe do registro fiscal (abaixo da arvore) */
.areas-tree-detail {
    border-top: 1px solid var(--neutral-200);
    padding: var(--space-3, 12px) var(--space-2, 8px);
}

.area-registry-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.area-registry-node-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-600);
    margin-bottom: var(--space-2, 8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.area-registry-validation {
    display: block;
    font-size: 10px;
    min-height: 14px;
    margin-top: 2px;
}

.area-registry-validation--error {
    color: var(--danger-600, #c0392b);
}

/* LGPD notice — aviso de dado pessoal */
.area-registry-lgpd-notice {
    background: var(--warning-50, #fff8e1);
    border-left: 3px solid var(--warning-500, #f59e0b);
    padding: 6px 8px;
    font-size: 11px;
    color: var(--warning-800, #92400e);
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

/* Toolbar acima da arvore (botao Add root) */
.areas-tree-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-200);
}

/* Nome editavel no painel de detalhe */
.area-detail-name-input {
    font-weight: 600;
    font-size: 12px;
}

/* Select de tipo no painel */
.area-detail-type-select {
    font-size: 11px;
}

/* Input de badges no painel */
.area-detail-badges-input {
    font-size: 11px;
}

/* Acoes CRUD (Add child / Remove) */
.area-detail-actions {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-200);
}

/* Badge de contagem de documentos na arvore */
.areas-tree-badge--docs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs, 10px);
    color: var(--neutral-500);
}

/* Secao de documentos no painel de detalhe */
.area-docs-section {
    border-top: 1px solid var(--neutral-200);
    padding-top: 8px;
}

.area-docs-empty {
    font-size: 11px;
    color: var(--neutral-500);
    margin: 4px 0;
}

/* Item de documento */
.area-doc-item {
    background: var(--neutral-50, #f8f9fa);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    margin-bottom: 4px;
}

.area-doc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.area-doc-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-800);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-doc-badge {
    font-size: var(--text-xs, 10px);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}

.area-doc-badge--expired {
    background: var(--danger-100, #fde8e8);
    color: var(--danger-600, #c0392b);
}

.area-doc-badge--warning {
    background: var(--warning-100, #fef3cd);
    color: var(--warning-700, #b45309);
}

.area-doc-meta {
    font-size: 10px;
    color: var(--neutral-500);
    margin-bottom: 2px;
}

.area-doc-hash {
    font-size: 10px;
    color: var(--neutral-500);
    margin-bottom: 4px;
}

.area-doc-hash code {
    font-family: monospace;
    font-size: 10px;
    background: var(--neutral-100);
    padding: 0 3px;
    border-radius: var(--radius-sm);
}

.area-doc-actions {
    display: flex;
    gap: 4px;
}

/* Formulario de adicao de documento */
.area-doc-form {
    background: var(--neutral-50, #f8f9fa);
    border: 1px solid var(--primary-200, #90caf9);
    border-radius: var(--radius-md);
    padding: 8px;
    margin: 6px 0;
}

.area-doc-hash-preview {
    display: block;
    font-size: 10px;
    font-family: monospace;
    color: var(--neutral-600);
    margin-top: 2px;
    min-height: 14px;
}

/* Botao extra-small */
.btn-xs {
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1.4;
}

/* Cada item do menu */
.menu-item {
    padding: 6px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--window-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* Item ativo (selecionado) */
.menu-item.active {
    color: var(--window-text);
    border-bottom-color: var(--primary-500);
}

/* Hover nos itens */
.menu-item:hover {
    background: var(--window-dark-3);
    color: var(--window-text);
}

/* Ribbon collapse toggle — chevron at far-right of menubar */
.ribbon-toggle-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--window-muted);
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.ribbon-toggle-btn:hover {
    background: var(--window-dark-3);
    color: var(--window-text);
}

.ribbon-toggle-btn.collapsed {
    transform: rotate(180deg);
}

/* Toolbar - Estilo Ribbon (faixa de opcoes) */
#toolbar {
    grid-column: 1 / -1;
    background: var(--ribbon-bg);
    border-bottom: 1px solid var(--window-border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    position: relative;
    transition: max-height 0.2s ease, opacity 0.15s ease, border-color 0.15s ease;
    max-height: 56px;
}

/* Toolbar collapsed state — ribbon hidden */
#toolbar.ribbon-collapsed {
    max-height: 0;
    opacity: 0;
    border-bottom-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Topographic texture on toolbar */
#toolbar::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--topo-pattern);
    background-size: 300px 300px;
    opacity: 0.6;
    pointer-events: none;
}

/* Grupo de botoes no toolbar */
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-right: 1px solid var(--window-border);
    height: 100%;
    flex-shrink: 0;
}

/* Ultimo grupo sem borda */
.toolbar-group:last-child {
    border-right: none;
}

/* Botao do toolbar */
.toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--window-text);
    font-size: 11px;
    min-width: 52px;
    gap: 2px;
    transition: all 0.15s ease;
}

/* Hover no botao */
.toolbar-btn:hover {
    background: var(--ribbon-hover);
    border-color: var(--window-border);
}

/* Botao pressionado */
.toolbar-btn:active {
    background: var(--window-dark-3);
}

/* Toggle ativo — painel visivel/aberto */
.toolbar-btn.active {
    background: rgba(61, 107, 122, 0.15);
    border-color: var(--primary-500);
    color: var(--primary-200);
}

.toolbar-btn.active .icon {
    background: rgba(61, 107, 122, 0.25);
    border-color: var(--primary-500);
}

.toolbar-btn.active:hover {
    background: rgba(61, 107, 122, 0.25);
}

/* Icone dentro do botao */
.toolbar-btn .icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--window-border);
    background: var(--ribbon-panel);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Botao primario (destaque steel blue) */
.toolbar-btn.primary {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-500);
}

.toolbar-btn.primary .icon {
    border-color: var(--overlay-strong);
    background: var(--overlay-light);
}

.toolbar-btn.primary:hover {
    background: var(--primary-500);
}

/* ----------------------------------------------------------------
   RIBBON PANELS — Paineis alternados pelo sistema de abas
   Apenas um painel visivel por vez, controlado por switchRibbonTab()
   ---------------------------------------------------------------- */

/* Container de cada painel do ribbon */
.ribbon-panel {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 8px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ribbon-panel::-webkit-scrollbar {
    display: none;
}

/* Scroll arrows for ribbon overflow */
.ribbon-scroll-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: var(--window-muted);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding: 0;
}

.ribbon-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.ribbon-scroll-arrow:hover {
    color: var(--window-text);
}

.ribbon-scroll-arrow.scroll-left {
    left: 0;
    background: linear-gradient(to right, var(--ribbon-bg) 60%, transparent);
}

.ribbon-scroll-arrow.scroll-right {
    right: 0;
    background: linear-gradient(to left, var(--ribbon-bg) 60%, transparent);
}

/* ================================================================
   TOOLBAR FLAT — DROPDOWNS, DIVIDERS, SPLIT BUTTONS
   ================================================================ */

/* Menubar oculto — mantido no grid flow para não deslocar #toolbar, mas sem altura visual */
/* display:none removeria o elemento do grid e faria #toolbar cair no row errado */
#menubar {
    visibility: hidden;
    overflow: hidden;
    padding: 0;
    min-height: 0;
    pointer-events: none;
}

/* Indicador de overflow no botão "Mais" — badge vermelho quando grupos foram colapsados */
#tg-more-trigger[data-overflow="true"]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color, #4fc3f7);
    pointer-events: none;
}
#tg-more-trigger {
    position: relative;
}

/* Botão de recolher/expandir ribbon no header — sempre visível independente do estado do toolbar */
.titlebar-ribbon-toggle {
    padding: 0 8px;
    min-width: 28px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    line-height: 1;
}
.titlebar-ribbon-toggle:hover {
    opacity: 1;
}
/* Quando collapsed, SVG gira 180° para indicar "expandir" */
.titlebar-ribbon-toggle.collapsed svg {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

/* Divisor vertical entre grupos */
.toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--border-color, #3a3a3a);
    margin: 0 6px;
    flex-shrink: 0;
    align-self: center;
}

/* Split button: ação primária + chevron para dropdown */
.toolbar-split-btn {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}
.toolbar-split-btn > .toolbar-btn:first-child {
    border-radius: 3px 0 0 3px;
}
.toolbar-split-btn > .toolbar-btn.toolbar-dropdown-trigger {
    border-radius: 0 3px 3px 0;
    border-left: 1px solid var(--border-color, #3a3a3a);
    padding: 0 8px;
    min-width: 24px;
    flex-direction: row;
}

/* ----------------------------------------------------------------
   DROPDOWN
   ---------------------------------------------------------------- */
.toolbar-dropdown {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 60ms ease, transform 60ms ease, visibility 0s linear 60ms;
    position: fixed;
    z-index: 400;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--panel-bg, #1e1e1e);
    border: 1px solid var(--border-color, #3a3a3a);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    padding: 4px 0;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #3a3a3a) transparent; /* Chrome 121+, Firefox */
}
.toolbar-dropdown.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 60ms ease, transform 60ms ease, visibility 0s linear 0s;
}

/* Item de dropdown */
.toolbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-color, #e0e0e0);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0;
    font-family: inherit;
}
.toolbar-dropdown-item:hover,
.toolbar-dropdown-item:focus-visible {
    background: var(--hover-bg, #2a2a2a);
    outline: none;
}
.toolbar-dropdown-item.active {
    color: var(--accent-color, #4fc3f7);
}
.toolbar-dropdown-item .icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Separador horizontal dentro do dropdown */
.toolbar-dropdown-divider {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--border-color, #3a3a3a);
}

/* ── Inline search (dd-more "Localizar") ─────────────────────── */
.toolbar-dd-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: 0 0 4px 0;
    background: var(--panel-bg, #1e1e1e);
    border-bottom: 1px solid var(--border-color, #3a3a3a);
}

.toolbar-dd-search .icon {
    flex-shrink: 0;
    opacity: 0.6;
    width: 14px;
    height: 14px;
}

.toolbar-dd-search-input {
    flex: 1;
    min-width: 0;
    background: var(--input-bg, #2a2a2a);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #3a3a3a);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}

.toolbar-dd-search-input:focus {
    border-color: var(--accent, #4a9eff);
}

.toolbar-dd-search-input::placeholder {
    color: var(--text-muted, #666);
}

.toolbar-dd-search-clear {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary, #888);
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 3px;
}

.toolbar-dd-search-clear:hover {
    background: var(--hover-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #e0e0e0);
}

.toolbar-dd-no-results {
    padding: 12px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted, #666);
    font-style: italic;
}

/* Rótulo de seção dentro do dropdown */
.toolbar-dropdown-section-label {
    padding: 6px 12px 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted, #666);
    letter-spacing: 0.5px;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Seção "Outros" (Intangível + Genérico) sempre separada dos demais grupos
   por uma distância proporcional fixa — independente de quantos itens existam acima. */
.toolbar-dropdown-section-outros {
    margin-top: 10px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    padding-top: 8px;
}

/* ── Seções recolhíveis do dropdown ─────────────────────────── */
.toolbar-dd-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #999);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    overflow: visible;
}
.toolbar-dd-section-hdr > span:first-child {
    flex: 1;
    min-width: 0;
}
.toolbar-dd-section-hdr:hover {
    color: var(--text-color, #e0e0e0);
}
.toolbar-dd-section-chevron {
    width: 12px;
    height: 12px;
    transition: transform 150ms ease;
    flex-shrink: 0;
    opacity: 0.6;
    margin-left: 4px;
}
.toolbar-dd-section.collapsed .toolbar-dd-section-chevron {
    transform: rotate(-90deg);
}
.toolbar-dd-section.collapsed .toolbar-dd-section-body {
    display: none;
}

/* Ícone chevron pequeno inline em botões de dropdown trigger */
.toolbar-dropdown-trigger > .icon[data-icon="chevron-down"] {
    width: 10px;
    height: 10px;
    opacity: 0.6;
    margin-left: 2px;
}

/* ================================================================
   LIBRARY GALLERY — grid de ícones estilo ribbon Office
   ================================================================ */

/* Container da galeria — 2 linhas de ícones, scroll horizontal */
.lib-gallery {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    grid-auto-columns: 32px;
    gap: 2px;
    overflow: hidden;         /* ícones que não cabem ficam ocultos, acessíveis via seta */
    max-width: 192px;         /* 6 colunas × 32px = 192px (ajustável) */
    height: 44px;
    align-items: center;
    padding: 0 2px;
}

/* Cada ícone de biblioteca */
.lib-gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 21px;
    border-radius: 3px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: background 0.1s ease;
    overflow: hidden;
}
.lib-gallery-item:hover,
.lib-gallery-item:focus-visible {
    background: var(--hover-bg, #2a2a2a);
    outline: none;
}
.lib-gallery-item img {
    width: 22px;
    height: 16px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
/* Ícone sem thumbnail no mesmo padrão visual da toolbar */
.lib-gallery-item .lib-gallery-item-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid var(--window-border, rgba(255,255,255,0.16));
    background: var(--ribbon-panel, rgba(15, 25, 35, 0.8));
    color: var(--window-text, #e6edf3);
}
.lib-gallery-item:hover .lib-gallery-item-icon,
.lib-gallery-item:focus-visible .lib-gallery-item-icon {
    border-color: var(--primary-500, #4eb7bf);
    background: rgba(78, 183, 191, 0.14);
}

/* Seta de overflow da galeria — estilo ribbon (borda esquerda fina + seta) */
.lib-gallery-more {
    flex-direction: column;
    min-width: 14px;
    padding: 0;
    height: 32px;
    align-self: center;
    border-left: 1px solid var(--border-color, #3a3a3a);
    border-radius: 0 3px 3px 0;
    margin-left: 0;
    gap: 0;
}
.lib-gallery-more svg {
    opacity: 0.6;
}
.lib-gallery-more:hover svg {
    opacity: 1;
}

/* Dropdown da galeria — mais largo para lista de ações */
.lib-gallery-dropdown {
    min-width: 200px;
}

/* ECBT01 E3: Label descritivo de grupo — isolado abaixo dos botoes, sem overlap */
.toolbar-group-label {
    display: block;
    font-size: var(--text-xs, 10px);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--window-muted);
    text-align: center;
    width: 100%;
    opacity: 0.65;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Grupo com label: reserva espaco na base para o label */
.toolbar-group:has(.toolbar-group-label) {
    position: relative;
    padding-bottom: 12px;
}

/* ECBT01 E3: Botoes ficam acima do label (z-index) */
.toolbar-group:has(.toolbar-group-label) .toolbar-btn {
    position: relative;
    z-index: 1;
}

/* Ribbon responsive — compact mode for narrower screens */
@media (max-width: 1400px) {
    .toolbar-btn {
        min-width: 44px;
        font-size: 10px;
        padding: 4px 4px;
    }

    .toolbar-btn .icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .toolbar-group {
        padding: 0 6px;
        gap: 3px;
    }

    .toolbar-group-label {
        font-size: var(--text-xs, 10px);
    }
}

/* ================================================================
   6. PAINEIS LATERAIS
   ----------------------------------------------------------------
   Painel Esquerdo: Lista de familias de elementos
   Painel Direito: Propriedades e configuracoes
   ================================================================ */

/* Painel Esquerdo - Familias de Elementos */
#left-panel {
    grid-column: 1;
    background: var(--neutral-50);
    border-right: 1px solid var(--neutral-200);
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

/* Panel minimized — hidden via display:none by panelManager.js */
.panel-minimized {
    display: none !important;
}

/* Handle de resize — barra arrastavel entre paineis */
.resize-handle {
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s ease;
    z-index: 5;
}

#resize-handle-left {
    grid-column: 2;
}

.resize-handle-right {
    grid-column: 4;
}

.resize-handle:hover {
    background: var(--primary-500);
}

/* Panel chevron toggle — sempre no topo da barra de abas (order: -1) */
.panel-toggle-btn {
    order: -1;              /* aparece ANTES de todos os .tab na coluna */
    align-self: center;     /* centraliza horizontalmente na flex column */
    margin-left: 0;
    margin-top: 4px;
    margin-bottom: 4px;
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--neutral-400);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.panel-toggle-btn::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -8px;
    right: -8px;
    height: 1px;
    background: var(--neutral-200);
}

.panel-toggle-btn:hover {
    background: var(--neutral-200);
    color: var(--neutral-600);
}

#left-panel .panel-toggle-btn,
#right-panel .panel-toggle-btn {
    order: -1;
    align-self: center;
    margin-left: 0;
    margin-bottom: 4px;
    position: relative;
}

#left-panel .panel-toggle-btn::after,
#right-panel .panel-toggle-btn::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--neutral-200);
}

/* Minimized tabs — clickable tabs on main area edges */
.min-tabs {
    position: absolute;
    z-index: 50;
    display: flex;
    gap: 2px;
    pointer-events: auto;
    backdrop-filter: blur(3px);
}

.min-tabs--left {
    top: 130px;
    bottom: 34px;
    left: 0;
    transform: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.min-tabs--right {
    top: 130px;
    bottom: 34px;
    right: 0;
    transform: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 84px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.min-tabs--left::-webkit-scrollbar,
.min-tabs--right::-webkit-scrollbar {
    display: none;
}

.min-tab {
    padding: 0 6px;
    background: color-mix(in srgb, var(--neutral-100) 72%, transparent);
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.1px;
    color: var(--neutral-500);
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    border-radius: 0;
    min-height: 24px;
    height: 24px;
    width: 24px;
    max-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    transition: background 0.15s ease, color 0.15s ease, width 0.15s ease, max-width 0.15s ease;
}

.min-tab:hover {
    width: 150px;
    max-width: 150px;
    z-index: 3;
    justify-content: flex-start;
}

.min-tab-icon {
    width: 12px;
    min-width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex-shrink: 0;
}

.min-tab-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.12s ease;
}

.min-tab:hover .min-tab-text {
    opacity: 1;
    width: auto;
}

.min-tabs--left .min-tab {
    border-left: none;
    border-right: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.min-tabs--right .min-tab {
    border-left: 2px solid transparent;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    margin-left: 0;
}

.min-tab:hover {
    color: var(--primary-500);
    border-color: var(--neutral-300);
    background: color-mix(in srgb, var(--neutral-100) 88%, transparent);
}

/* Grupo de min-tabs (wrapper para multi-aba) */
.min-tab-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Aba ativa no estado minimizado — destaque visual */
.min-tab--active {
    color: var(--primary-500);
    background: var(--neutral-0);
}
.min-tabs--left .min-tab--active {
    border-right-color: var(--primary-500);
}
.min-tabs--right .min-tab--active {
    border-left-color: var(--primary-500);
}

/* Bottom min-tabs — strip horizontal na borda inferior (constellation) */
.min-tabs--bottom {
    bottom: 0;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    flex-direction: row;
}

.min-tab-group--horizontal {
    display: flex;
    flex-direction: row;
    gap: 1px;
}

/* Min-tab horizontal (constellation bottom strip) */
.min-tab--horizontal {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: none;
    border-top: 2px solid transparent;
    padding: 4px 12px;
}

.min-tab--horizontal:hover {
    border-top-color: var(--primary-500);
}

.min-tab--horizontal.min-tab--active {
    border-top: 2px solid var(--primary-500);
    border-left: none;
    border-right: none;
}

/* Floating panel — position: fixed with shadow */
.panel-floating {
    position: fixed !important;
    z-index: 200;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: auto;
    min-width: 200px;
    min-height: 150px;
}

/* ---- Floating resize handles (edge + corner) ---- */
.float-resize {
    position: absolute;
    z-index: 210;
    background: transparent;
}
.float-resize:hover {
    background: var(--primary-500);
    opacity: 0.5;
}
.float-resize--n, .float-resize--s { left: 8px; right: 8px; height: 4px; cursor: ns-resize; }
.float-resize--e, .float-resize--w { top: 8px; bottom: 8px; width: 4px; cursor: ew-resize; }
.float-resize--n { top: 0; }
.float-resize--s { bottom: 0; }
.float-resize--e { right: 0; }
.float-resize--w { left: 0; }
.float-resize--ne, .float-resize--nw, .float-resize--se, .float-resize--sw {
    width: 10px;
    height: 10px;
}
.float-resize--ne { top: 0; right: 0; cursor: nesw-resize; }
.float-resize--nw { top: 0; left: 0; cursor: nwse-resize; }
.float-resize--se { bottom: 0; right: 0; cursor: nwse-resize; }
.float-resize--sw { bottom: 0; left: 0; cursor: nesw-resize; }

.panel-floating .panel-header {
    cursor: grab;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.panel-floating .panel-header:active {
    cursor: grabbing;
}

/* Toolbar floating — override resize/overflow para manter flex layout */
#toolbar.panel-floating {
    cursor: grab;
    resize: none;
    overflow: visible;
    min-height: 0;
    border-radius: var(--radius-md);
}

#toolbar.panel-floating:active {
    cursor: grabbing;
}

/* Constellation floating — override para manter canvas funcional */
#constellation-hud.panel-floating {
    cursor: grab;
    min-height: 120px;
    border-radius: var(--radius-md);
}

#constellation-hud.panel-floating:active {
    cursor: grabbing;
}

/* Toolbar dentro de tab-content (ex: botao settings em Families) */
.tab-actions {
    display: flex;
    justify-content: flex-end;
    padding: 2px 0;
}

/* ----------------------------------------------------------------
   PANEL CONTEXT MENU
   Menu de contexto para mover abas entre paineis.
   Aparece ao clicar com botao direito em uma aba.
   ---------------------------------------------------------------- */
.panel-context-menu {
    position: fixed;
    z-index: 300;
    min-width: 180px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.panel-context-menu.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.panel-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--neutral-700);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}

.panel-context-menu-item:hover {
    background: var(--primary-500);
    color: #fff;
}

.panel-context-menu-item.active {
    color: var(--primary-text-muted);
}

.panel-context-menu-item.active::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-text);
    margin-left: auto;
}

.panel-context-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.panel-context-menu-sep {
    height: 1px;
    background: var(--neutral-200);
    margin: 4px 8px;
}

.panel-context-menu-shortcut {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.45;
    font-family: monospace;
    letter-spacing: 0.3px;
}

.panel-context-menu-item.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Context menu: group label and sub-items (element context menu) */
.panel-context-menu-label {
    padding: 4px 12px 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-context-menu-sub {
    padding-left: 24px;
    font-size: 11px;
}

.panel-context-menu-item.danger {
    color: var(--error, #b84444);
}

.panel-context-menu-item.danger:hover {
    background: var(--error, #b84444);
    color: #fff;
}

/* ----------------------------------------------------------------
   DOCKABLE ELEMENT DETAILS
   Modo fixo no rodape do painel de elementos.
   ---------------------------------------------------------------- */

/* Dock button in section header */
.section-dock-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--neutral-400);
    opacity: 0.6;
    transition: opacity 0.15s;
    margin-left: auto;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
}
.section-dock-btn:hover {
    opacity: 1;
    color: var(--primary-500);
}

/* Docked details mode: tab becomes flex column */
#tab-elements.details-docked {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#tab-elements.details-docked .element-list-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#tab-elements.details-docked .element-list-col .element-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

#tab-elements.details-docked > .section {
    flex-shrink: 0;
    max-height: 45%;
    overflow-y: auto;
    min-height: 32px;
    margin-top: 0;
}

/* Divider arrastavel entre lista e detalhes (modo docked) */
#tab-elements.details-docked .details-resize-handle {
    flex-shrink: 0;
    height: 5px;
    cursor: ns-resize;
    background: var(--neutral-600);
    border-top: 1px solid var(--neutral-700);
    border-bottom: 1px solid var(--neutral-700);
    transition: background 0.15s;
}
#tab-elements.details-docked .details-resize-handle:hover,
#tab-elements.details-docked .details-resize-handle:active {
    background: var(--primary-500);
}

/* Esconder divider fora do modo docked */
#tab-elements:not(.details-docked) .details-resize-handle {
    display: none;
}

/* Highlight dock button when docked */
#tab-elements.details-docked .section-dock-btn {
    opacity: 1;
    color: var(--primary-500);
}

/* Side details mode: lista e detalhes lado a lado */
#tab-elements.details-side {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

#tab-elements.details-side .element-list-col {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    min-width: 100px;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--neutral-200);
}

#tab-elements.details-side .element-list-col .element-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

#tab-elements.details-side > .section {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0;
    min-width: 0;
    min-height: 0;
    border-top: none;
    border-bottom: none;
}

/* Destaca botao de dock quando em modo lado (padrao) */
#tab-elements.details-side .section-dock-btn {
    opacity: 1;
    color: var(--primary-500);
}

/* Barra de pesquisa e filtro de familia */
.elements-search-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--neutral-200);
    flex-shrink: 0;
    background: var(--neutral-50, #f9fafb);
}

.elements-search-bar input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 3px 7px;
    font-size: 12px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    background: var(--neutral-0, #fff);
    color: var(--neutral-800);
    outline: none;
}

.elements-search-bar input[type="search"]:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 2px var(--primary-100, #e0f2fe);
}

.elements-search-bar select {
    padding: 3px 4px;
    font-size: 11px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    background: var(--neutral-0, #fff);
    color: var(--neutral-700);
    max-width: 80px;
    flex-shrink: 0;
    cursor: pointer;
    outline: none;
}

.elements-search-bar select:focus {
    border-color: var(--primary-400);
}

/* ----------------------------------------------------------------
   ANALYTICS FULLSCREEN
   Quando ativado, analytics ocupa toda a area de trabalho.
   ---------------------------------------------------------------- */
.analytics-fullscreen {
    position: fixed !important;
    top: var(--chrome-top);
    left: 0;
    right: 0;
    bottom: var(--chrome-bottom);
    z-index: 250;  /* acima de .panel-floating (200) */
    background: var(--window-dark);
    display: block !important;
    overflow-y: auto;
    padding: 16px;
}

/* Cabecalho dos paineis — com textura topografica sutil */
.panel-header {
    padding: 10px 14px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

/* Topographic texture overlay on headers */
.panel-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--topo-pattern);
    background-size: 200px 200px;
    opacity: 0.4;
    pointer-events: none;
}

/* Botao no cabecalho */
.panel-header-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--neutral-400);
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-header-btn:hover {
    background: var(--neutral-200);
    color: var(--neutral-600);
}

/* Area de conteudo dos paineis */
.panel-content {
    flex: 1;
    min-height: 0;     /* Permite encolher dentro do flex parent */
    overflow-y: auto;  /* Rolagem vertical quando necessario */
    overflow-x: hidden; /* Impede overflow horizontal */
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Nota: scrollbar webkit para .panel-content e #left-panel/#right-panel
   agora herdam da regra global * { scrollbar-color/scrollbar-width }
   e ::-webkit-scrollbar { var(--scrollbar-w) } definidas acima. */

/* Override: tabs bar deve esconder scrollbar (especificidade > #panel *) */
#left-panel .tabs {
    flex-direction: column;
    width: var(--left-rail-width);
    min-width: var(--left-rail-width);
    max-width: var(--left-rail-width);
    border-bottom: none;
    border-right: none;
    border-left: 1px solid var(--neutral-200);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: color-mix(in srgb, var(--neutral-100) 68%, transparent);
    backdrop-filter: blur(4px);
    height: 100%;
    padding: 0;
    gap: 0;
}

#left-panel .tabs::-webkit-scrollbar {
    display: none;
}

/* Painel direito: abas verticais no lado esquerdo (padrão VS Code) */
#right-panel {
    flex-direction: row;
}

#right-panel .tabs {
    flex-direction: column;
    width: var(--right-rail-width);
    min-width: var(--right-rail-width);
    max-width: var(--right-rail-width);
    border-bottom: none;
    border-right: 1px solid var(--neutral-200);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: color-mix(in srgb, var(--neutral-100) 68%, transparent);
    backdrop-filter: blur(4px);
    height: 100%;
    padding: 0;
    gap: 0;
}

#right-panel .tabs::-webkit-scrollbar {
    display: none;
}

#left-panel .tabs > .tab[data-tab],
#right-panel .tabs > .tab[data-tab] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* sem rotate — leitura de cima para baixo, igual ao estado minimizado */
    padding: 6px 2px;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    border-bottom: none;
    border-right: 2px solid transparent;
    border-radius: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    flex: 1 1 auto;
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: none;
}

/* Distinct icon-like badges per tab for faster scanning */
#left-panel .tabs > .tab[data-tab]::before,
#right-panel .tabs > .tab[data-tab]::before {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: var(--text-xs, 10px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-700);
    background: color-mix(in srgb, var(--neutral-0) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--neutral-300) 75%, transparent);
}

#right-panel .tabs > .tab[data-tab="areas"]::before { content: "OP"; }
#right-panel .tabs > .tab[data-tab="project"]::before { content: "PR"; }
#right-panel .tabs > .tab[data-tab="elements"]::before { content: "EL"; }
#right-panel .tabs > .tab[data-tab="sensors"]::before { content: "SN"; }
#right-panel .tabs > .tab[data-tab="files"]::before { content: "FI"; }
#right-panel .tabs > .tab[data-tab="campaigns"]::before { content: "CP"; }
#right-panel .tabs > .tab[data-tab="scenes"]::before { content: "SC"; }
#right-panel .tabs > .tab[data-tab="analytics"]::before { content: "AN"; }
#right-panel .tabs > .tab[data-tab="stamps"]::before { content: "CN"; }
#right-panel .tabs > .tab[data-tab="governance"]::before { content: "GV"; }
#right-panel .tabs > .tab[data-tab="cost-analysis"]::before { content: "CT"; }
#right-panel .tabs > .tab[data-tab="automation"]::before { content: "AU"; }
#left-panel .tabs > .tab[data-tab="families"]::before { content: "FA"; }
#left-panel .tabs > .tab[data-tab="elements"]::before { content: "EL"; }

#right-panel .tabs > .tab[data-tab]:hover {
    border-right-color: var(--neutral-300);
    background: var(--overlay-light);
}

#right-panel .tabs > .tab[data-tab].active {
    border-right-color: var(--primary-500);
    background: var(--neutral-0);
    color: var(--primary-500);
}

/* Rail direito fechado: distribui tabs para sempre mostrar a ultima (automation) */
#left-panel .tabs > .tab[data-tab] {
    border-right-color: transparent;
    border-left: 2px solid transparent;
}

#left-panel .tabs > .tab[data-tab]:hover {
    border-left-color: var(--neutral-300);
    background: var(--overlay-light);
}

#left-panel .tabs > .tab[data-tab].active {
    border-left-color: var(--primary-500);
    background: var(--neutral-0);
    color: var(--primary-500);
}

#left-panel .panel-content,
#right-panel .panel-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

#left-panel .tab-content,
#right-panel .tab-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ----------------------------------------
   Itens de Familia (lista de tipos de elementos)
   ---------------------------------------- */
.family-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    margin-bottom: 6px;
    transition: all 0.15s ease;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-0);
}

.family-item:hover {
    background: var(--neutral-100);
    border-color: var(--neutral-300);
}

.family-item.selected {
    background: var(--primary-50);
    border-color: var(--primary-text);
}

/* Icone da familia */
.family-item .icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-right: var(--space-2);
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
}

/* Informacoes da familia */
.family-item .info {
    flex: 1;
}

.family-item .name {
    font-weight: 500;
    color: var(--neutral-800);
    font-size: 11.5px;
}

.family-item .count {
    font-size: 10px;
    color: var(--neutral-500);
}

/* Acoes (botoes) da familia */
.family-item .actions {
    display: none;
    gap: var(--space-1);
}

/* Mostra acoes no hover */
.family-item:hover .actions {
    display: flex;
}

/* Botao de acao da familia */
.family-action-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: var(--neutral-0);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--neutral-500);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.family-action-btn:hover {
    background: var(--primary-500);
    color: white;
}

.family-action-btn.delete:hover {
    background: var(--error);
}

/* Painel Direito - Propriedades */
#right-panel {
    grid-column: 5;
    background: var(--neutral-50);
    border-left: 1px solid var(--neutral-200);
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* ================================================================
   7. AREA PRINCIPAL - Canvas 3D
   ----------------------------------------------------------------
   Onde a visualizacao 3D do Three.js e renderizada.
   ================================================================ */

#main-area {
    grid-column: 3;
    background: var(--window-dark);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    --bottom-panel-height: 120px;
}

#canvas-container {
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
}

#canvas-container canvas {
    display: block;
}

/* ================================================================
   SCENE HUD — controles unificados do viewport (bottom-left)
   Padrao visual consistente com #geo-hud (bottom-right)
   ================================================================ */
#scene-hud {
    position: absolute;
    bottom: var(--space-4);
    left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 14;
    background: rgba(20, 24, 32, 0.88);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md, 6px);
    padding: 6px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.scene-hud-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.scene-hud-sep {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 0;
}

.scene-hud-sep-v {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    margin: 0 2px;
    align-self: center;
}

.scene-hud-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--window-muted, #8b95a5);
    transition: all 0.15s ease;
    padding: 0;
    box-shadow: none;
}

.scene-hud-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--window-text, #e2e8f0);
    border-color: rgba(255,255,255,0.15);
}

.scene-hud-btn.active,
.scene-hud-btn.view-btn-active {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.15);
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

/* Labels badge dentro do scene-hud */
#scene-hud #labels-toggle-badge {
    position: static;
    font: bold 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    padding: 0;
    width: 32px;
    height: 32px;
}
#scene-hud #labels-toggle-badge.inactive {
    color: var(--window-muted, #8b95a5);
    border-color: rgba(255,255,255,0.06);
}

/* Imagery badge dentro do scene-hud */
#scene-hud #imagery-toggle-badge {
    position: static;
    font: bold 10px var(--font-mono, 'JetBrains Mono', monospace);
    padding: 0;
    width: 32px;
    height: 32px;
}
#scene-hud #imagery-toggle-badge.inactive {
    color: var(--window-muted, #8b95a5);
    border-color: rgba(255,255,255,0.06);
}

/* Symbology button no scene-hud */
#scene-hud #symbology-cycle-btn {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    min-width: 36px;
    white-space: nowrap;
}

/* Intangibles toggle */
#intangibles-toggle-btn {
    font-size: 16px;
    color: #BA68C8;
}
#intangibles-toggle-btn.active {
    background: rgba(186, 104, 200, 0.15);
    border-color: #BA68C8;
    color: #BA68C8;
}

/* View mode button */
#scene-hud-view-btn {
    font: bold 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.3px;
    min-width: 32px;
}

#eis-terrain-probe-value {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 16;
    display: none;
    pointer-events: none;
    transform: translate(-50%, -120%);
    background: rgba(10, 18, 28, 0.9);
    border: 1px solid rgba(94, 234, 212, 0.45);
    color: #ccfbf1;
    border-radius: 4px;
    padding: 2px 6px;
    font: 600 10px var(--font-mono, 'JetBrains Mono', monospace);
    letter-spacing: 0.2px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#eis-terrain-probe-value.active {
    display: block;
}

/* Side view button */
#side-view-btn {
    font-size: 16px;
}
#side-view-btn.active {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.15);
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

/* Scene HUD header — drag handle + minimize/close */
.scene-hud-header {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    padding: 1px 2px;
    cursor: grab;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, height 0.2s ease;
}

#scene-hud:hover .scene-hud-header {
    opacity: 1;
    height: 20px;
    padding: 1px 2px;
}

.scene-hud-ctrl {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--window-muted, #8b95a5);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    padding: 0;
}

.scene-hud-ctrl:hover {
    color: var(--window-text, #e2e8f0);
    background: rgba(255,255,255,0.1);
}

/* Scene HUD minimized state */
#scene-hud.scene-hud-minimized .scene-hud-body,
#scene-hud.scene-hud-minimized .scene-hud-sep {
    display: none;
}

#scene-hud.scene-hud-minimized .scene-hud-header {
    opacity: 1;
    height: 20px;
    border-bottom: none;
}

/* ================================================================
   MAGNIFIER OVERLAY — lupa circular no viewport 3D
   ================================================================ */
#magnifier-overlay {
    position: absolute;
    width: 280px;
    height: 280px;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
                0 2px 8px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.02);
    pointer-events: none;
    display: none;
    z-index: 12;
    will-change: transform;
    overflow: hidden;
}

#magnifier-overlay.active {
    display: block;
}

/* Crosshair central "+" dentro da lupa */
#magnifier-overlay::before,
#magnifier-overlay::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    z-index: 1;
}

#magnifier-overlay::before {
    left: 50%;
    top: 50%;
    width: 20px;
    height: 1px;
    transform: translate(-50%, -0.5px);
}

#magnifier-overlay::after {
    left: 50%;
    top: 50%;
    width: 1px;
    height: 20px;
    transform: translate(-0.5px, -50%);
}

/* Labels amplificados clonados dentro da lupa */
#magnifier-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.magnifier-label-clone {
    position: absolute;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-family: var(--font-ui, system-ui, sans-serif);
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Crosshair — marca o ponto inspecionado */
#magnifier-crosshair {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    pointer-events: none;
    display: none;
    z-index: 12;
    will-change: transform;
}

#magnifier-crosshair.active {
    display: block;
}

#magnifier-crosshair::before,
#magnifier-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
}

#magnifier-crosshair::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-0.5px);
}

#magnifier-crosshair::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
}

#canvas-container.magnifier-active canvas {
    cursor: crosshair;
}

/* Legacy — manter para compatibilidade */
#view-controls { display: none; }

.view-controls-sep {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.12);
    margin: 0 2px;
    align-self: center;
}

.view-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--window-muted);
    transition: all 0.15s ease;
}

.view-btn:hover {
    background: rgba(255,255,255,0.12);
    color: var(--window-text);
}

.view-btn.active {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.2);
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

#main-overlay-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 70;
}

#main-overlay-controls #view-mode-badge {
    pointer-events: auto;
}

/* Badge indicador de modo de visualização — movido para #scene-hud */
#view-mode-badge {
    display: none !important;
}
#view-mode-badge-legacy {
    position: absolute;
    bottom: calc(var(--bottom-panel-height, 120px) + var(--space-2, 8px));
    left: var(--space-4, 16px);
    background: rgba(20, 24, 32, 0.85);
    color: var(--window-muted, #8b95a5);
    padding: 8px 12px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font: bold 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
#view-mode-badge.active {
    color: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
}

/* Labels quick-access badge */
#labels-toggle-badge {
    position: absolute;
    bottom: 60px;
    left: 60px;
    background: rgba(20, 24, 32, 0.85);
    color: var(--accent, #3b82f6);
    padding: 8px 12px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--accent, #3b82f6);
    font: bold 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#labels-toggle-badge.inactive {
    color: var(--window-muted, #8b95a5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Labels quick popup — posicionado acima do scene-hud */
#labels-quick-popup {
    position: absolute;
    bottom: 100px;
    left: var(--space-4, 16px);
    background: rgba(20, 24, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 6px);
    padding: 8px 12px;
    z-index: 300;
    pointer-events: auto;
    min-width: 140px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
#labels-quick-popup.hidden {
    display: none;
}
.lqp-section {
    margin-bottom: 8px;
}
.lqp-label {
    display: block;
    font: 600 9px var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--window-muted, #8b95a5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.lqp-btn-group {
    display: flex;
    gap: 4px;
}
.lqp-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--window-muted, #8b95a5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 4px);
    padding: 3px 10px;
    font: bold 10px 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    text-align: center;
}
.lqp-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.lqp-btn.active {
    background: var(--accent, #3b82f6);
    color: #fff;
    border-color: var(--accent, #3b82f6);
}
.lqp-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0;
}

/* Geology quick popup — same base as labels popup */
#geology-quick-popup {
    position: fixed;
    background: rgba(20, 24, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 6px);
    padding: 10px 14px;
    z-index: 300;
    pointer-events: auto;
    min-width: 200px;
    max-width: 260px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
#geology-quick-popup.hidden { display: none; }
.geo-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font: 11px var(--font-ui, -apple-system, sans-serif);
    color: var(--window-muted, #8b95a5);
    cursor: pointer;
}
.geo-toggle-row input[type="checkbox"] {
    accent-color: var(--accent, #3b82f6);
    width: 14px;
    height: 14px;
}
.geo-toggle-row:hover { color: #fff; }
.lqp-toggle {
    width: 100%;
}
.lqp-priority-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 150px;
    overflow-y: auto;
}
.lqp-priority-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 10px 'JetBrains Mono', monospace;
    color: var(--window-muted, #8b95a5);
    padding: 2px 0;
}
.lqp-priority-arrows {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}
.lqp-priority-arrow {
    cursor: pointer;
    color: var(--accent, #3b82f6);
    font-size: 10px;
    min-width: 24px;
    min-height: 16px;
    padding: 2px 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
    background: none;
    border: none;
    line-height: 1;
    text-align: center;
}
.lqp-priority-arrow:hover {
    opacity: 1;
    color: #fff;
}
.lqp-priority-rank {
    color: var(--accent, #3b82f6);
    font-weight: bold;
    min-width: 14px;
    text-align: right;
}
.lqp-priority-name {
    flex: 1;
    text-transform: capitalize;
}
.lqp-priority-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--window-muted, #8b95a5);
    padding: 2px 4px;
    min-width: 20px;
    min-height: 16px;
    transition: color 0.15s;
    line-height: 1;
}
.lqp-priority-toggle.active {
    color: var(--accent, #3b82f6);
}
.lqp-priority-toggle:hover {
    color: #fff;
}
.lqp-family-off .lqp-priority-name,
.lqp-family-off .lqp-priority-rank {
    opacity: 0.35;
    text-decoration: line-through;
}

/* Imagery provider badge (troca de imagem aerea/satelite) */
#imagery-toggle-badge {
    position: absolute;
    bottom: 60px;
    left: 120px;
    background: rgba(20, 24, 32, 0.85);
    color: var(--accent, #3b82f6);
    padding: 6px 8px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--accent, #3b82f6);
    font: bold 10px var(--font-mono, 'JetBrains Mono', monospace);
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#imagery-toggle-badge:hover {
    background: rgba(30, 36, 48, 0.95);
}
#imagery-toggle-badge.inactive {
    color: var(--window-muted, #8b95a5);
    border-color: rgba(255, 255, 255, 0.1);
}
#imagery-toggle-badge.iqp-loading {
    animation: iqp-pulse 1s ease-in-out infinite;
}
@keyframes iqp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Imagery quick popup — posicionado acima do scene-hud */
#imagery-quick-popup {
    position: absolute;
    bottom: 100px;
    left: 52px;
    background: rgba(20, 24, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 6px);
    padding: 8px 0;
    z-index: 300;
    pointer-events: auto;
    min-width: 180px;
    max-height: min(400px, 60vh);
    overflow-y: auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
#imagery-quick-popup.hidden {
    display: none;
}
.iqp-section {
    padding: 0 12px;
    margin-bottom: 4px;
}
.iqp-label {
    display: block;
    font: 600 9px var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--window-muted, #8b95a5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.iqp-provider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    font: 400 11px var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--window-fg, #e0e0e0);
    transition: background 0.15s;
}
.iqp-provider:hover {
    background: rgba(255, 255, 255, 0.06);
}
.iqp-provider.active {
    color: var(--accent, #3b82f6);
}
.iqp-provider-name {
    flex: 1;
}
.iqp-refresh-btn {
    background: none;
    border: none;
    color: var(--window-muted, #8b95a5);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}
.iqp-refresh-btn:hover {
    color: var(--accent, #3b82f6);
}
.iqp-radio {
    font-size: 10px;
    line-height: 1;
}
.iqp-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}
.iqp-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font: 400 11px var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--window-fg, #e0e0e0);
    transition: background 0.15s;
}
.iqp-upload-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Imagery popup: terrain row */
.iqp-terrain-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 8px;
}
.iqp-terrain-grid {
    flex: 1;
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    color: var(--text-primary, #e0e0e0);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
}
.iqp-terrain-btn {
    white-space: nowrap;
    background: var(--accent-color, #4a9eff);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
}
.iqp-terrain-btn:hover { opacity: 0.85; }

/* Fonte Web/Manual */
.iqp-terrain-source {
    display: flex;
    gap: 4px;
    padding: 0 10px 6px;
}
.iqp-tsrc {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-color, #444);
    color: var(--text-secondary, #aaa);
    border-radius: 4px;
    padding: 3px 0;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.iqp-tsrc.active {
    background: var(--accent-color, #4a9eff);
    color: #fff;
    border-color: transparent;
}

/* Status do terreno */
.iqp-terrain-status {
    padding: 2px 10px 4px;
    font-size: 10px;
    color: var(--text-secondary, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Controles rápidos (vis, curvas, densidade, rótulos) */
.iqp-terrain-ctrl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 10px 4px;
}
.iqp-tctl {
    background: transparent;
    border: 1px solid var(--border-color, #444);
    color: var(--text-secondary, #aaa);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.iqp-tctl.on {
    background: rgba(74, 158, 255, 0.2);
    color: var(--text-primary, #e0e0e0);
    border-color: var(--accent-color, #4a9eff);
}
.iqp-opacity-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-secondary, #aaa);
    margin-left: auto;
}
.iqp-opacity-slider {
    width: 70px;
    height: 4px;
    vertical-align: middle;
    accent-color: var(--accent-color, #4a9eff);
    cursor: pointer;
}
.iqp-terrain-density {
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    color: var(--text-primary, #e0e0e0);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 10px;
    cursor: pointer;
}

/* Footer: Config. + Remover */
.iqp-terrain-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px 6px;
    gap: 4px;
}
.iqp-terrain-link {
    background: none;
    border: none;
    color: var(--accent-color, #4a9eff);
    font-size: 10px;
    cursor: pointer;
    padding: 2px 0;
}
.iqp-terrain-link:hover { text-decoration: underline; }
.iqp-terrain-remove {
    background: none;
    border: none;
    color: var(--error-color, #e05252);
    font-size: 10px;
    cursor: pointer;
    padding: 2px 0;
}
.iqp-terrain-remove:hover { text-decoration: underline; }

/* Imagery popup: vector layers section */
.iqp-vl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    font: 400 11px var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--window-text, #c5cdd8);
    transition: background 0.15s;
}
.iqp-vl-row:hover { background: var(--window-hover, rgba(255,255,255,0.06)); }
.iqp-vl-row.on .iqp-vl-check { color: var(--accent-color, #4a9eff); }
.iqp-vl-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}
.iqp-vl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iqp-vl-check { font-size: 10px; flex-shrink: 0; color: var(--window-muted, #8b95a5); }
.iqp-vl-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--accent-color, #4a9eff);
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

/* Imagery popup: disclosure + custom provider section */
.iqp-disclosure {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font: 600 10px var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--window-muted, #8b95a5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.15s;
}
.iqp-disclosure:hover {
    color: var(--window-fg, #e0e0e0);
}
.iqp-disclosure-arrow {
    font-size: 8px;
    line-height: 1;
}
.iqp-custom-section {
    padding: 4px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.iqp-custom-section.collapsed {
    display: none;
}
.iqp-provider-select,
.iqp-key-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm, 4px);
    background: rgba(0, 0, 0, 0.3);
    color: var(--window-fg, #e0e0e0);
    font: 400 11px var(--font-mono, 'JetBrains Mono', monospace);
    outline: none;
    box-sizing: border-box;
}
.iqp-key-input::placeholder {
    color: var(--window-muted, #8b95a5);
    opacity: 0.6;
}
.iqp-key-input:focus {
    border-color: var(--accent, #3b82f6);
}
.iqp-apply-btn {
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: var(--accent, #3b82f6);
    color: #fff;
    font: 600 10px var(--font-mono, 'JetBrains Mono', monospace);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.15s;
}
.iqp-apply-btn:hover {
    opacity: 0.85;
}

/* Imagery popup: badges de licença e resolução inline */
.iqp-license-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    text-decoration: none;
    cursor: default;
    line-height: 1.6;
    white-space: nowrap;
}
.iqp-badge-green {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.iqp-badge-yellow {
    background: rgba(234, 179, 8, 0.18);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.3);
}
.iqp-badge-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--window-muted, #8b95a5);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.iqp-res-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 4px;
    margin-left: 3px;
    color: var(--window-muted, #8b95a5);
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
}

/* Imagery popup: rodapé com botão Configurar */
.iqp-footer {
    padding: 6px 12px 8px;
    display: flex;
    justify-content: flex-end;
}
.iqp-settings-btn {
    background: none;
    border: none;
    color: var(--accent, #3b82f6);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.iqp-settings-btn:hover { opacity: 1; text-decoration: underline; }

/* ── Viz Quick Popup (.vqp-*) ── acesso rapido a VE, presets, toggles */
#viz-quick-popup {
    position: absolute;
    bottom: 100px;
    left: 90px;
    background: rgba(20, 24, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 6px);
    padding: 10px 12px;
    min-width: 200px;
    z-index: 200;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#viz-quick-popup.hidden { display: none; }
.vqp-section { margin-bottom: 8px; }
.vqp-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-400);
    margin-bottom: 4px;
}
.vqp-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vqp-slider {
    flex: 1;
    accent-color: var(--primary-500);
    height: 4px;
}
.vqp-slider-value {
    font-size: 12px;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    color: var(--neutral-200);
}
.vqp-btn-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.vqp-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--neutral-300);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s;
}
.vqp-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--neutral-100);
}
.vqp-btn.active {
    background: var(--primary-600);
    border-color: var(--primary-500);
    color: #fff;
}
.vqp-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}
.vqp-toggles {
    display: flex;
    gap: 4px;
}
.vqp-full-settings {
    width: 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 11px;
    padding: 4px;
}

/* Imagery Settings Modal */
.imagery-settings-box {
    width: 540px;
    max-width: 96vw;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ims-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.ims-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--window-muted, #8b95a5);
    margin-bottom: 8px;
    margin-top: 4px;
}
.ims-divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    margin: 14px 0;
}

/* Tabela de providers */
.ims-provider-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 8px;
}
.ims-provider-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--window-muted, #8b95a5);
    padding: 0 6px 6px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.ims-provider-row td {
    padding: 6px 6px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
}
.ims-provider-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}
.ims-provider-row.active td {
    background: rgba(59, 130, 246, 0.08);
}
.ims-radio {
    width: 18px;
    text-align: center;
    color: var(--accent, #3b82f6);
}
.ims-name { font-weight: 500; }
.ims-resolution {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--window-muted, #8b95a5);
}
.ims-coverage {
    font-size: 11px;
    color: var(--window-muted, #8b95a5);
}

/* Badges de licença no modal */
.ims-license-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
}
.ims-badge-green {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.ims-badge-yellow {
    background: rgba(234, 179, 8, 0.18);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Aviso ESRI */
.ims-warn-note {
    font-size: 11px;
    color: var(--window-muted, #8b95a5);
    background: rgba(234, 179, 8, 0.07);
    border-left: 3px solid rgba(234, 179, 8, 0.4);
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    margin: 6px 0 0;
    line-height: 1.5;
}
.ims-warn-note a { color: #facc15; }

/* Seção API key no modal */
.ims-key-select,
.ims-key-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--input-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: var(--radius-sm, 4px);
    color: var(--text, #e2e8f0);
    font-size: 12px;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.ims-key-input::placeholder { color: var(--window-muted, #8b95a5); opacity: 0.6; }
.ims-key-input:focus { border-color: var(--accent, #3b82f6); outline: none; }
.ims-license-note {
    font-size: 11px;
    color: var(--window-muted, #8b95a5);
    line-height: 1.5;
    margin: 0 0 10px;
}
.ims-license-note a { color: var(--accent, #3b82f6); }
.ims-apply-btn {
    padding: 6px 14px;
    background: var(--accent, #3b82f6);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 4px);
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ims-apply-btn:hover { opacity: 0.85; }

/* Qualidade de saída */
.ims-quality-options {
    display: flex;
    gap: 20px;
    margin-bottom: 6px;
}
.ims-quality-opt {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
}
.ims-quality-hint {
    font-size: 11px;
    color: var(--window-muted, #8b95a5);
    margin: 0;
}

/* Globe context menu (right-click no mini globo) */
#globe-context-menu {
    position: fixed;
    z-index: 1000;
    background: var(--panel-bg, #1a1d23);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px);
    padding: 4px 0;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.5));
    min-width: 140px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
}

.globe-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text-secondary, rgba(255,255,255,0.7));
    transition: background 0.1s;
}

.globe-menu-item:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #fff);
}

.globe-menu-item-active {
    color: var(--accent, #3b82f6);
}

.globe-menu-radio {
    font-size: 10px;
    width: 12px;
    text-align: center;
}

.globe-menu-separator {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 8px;
}

/* Exibicao de coordenadas — visivel apenas com hover no canvas */
/* Coord display: conteudo visivel no hover do canvas, header visivel no hover do widget */
#coord-display {
    position: absolute;
    bottom: var(--space-4);
    right: 80px;
    z-index: 14;
    background: rgba(20,24,32,0.9);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.06);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--neutral-600);
    box-shadow: var(--shadow-md);
    -webkit-user-select: none;
    user-select: none;
    min-width: 200px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Conteudo (coordenadas) aparece quando mouse sobre o canvas/terreno */
#canvas-container:hover #coord-display {
    opacity: 1;
    pointer-events: auto;
}

/* Header (botao minimize) escondido por default, aparece no hover do widget */
#coord-display-header {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    height: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid transparent;
    transition: height 0.2s ease, padding 0.2s ease;
}

#coord-display:hover #coord-display-header {
    height: 22px;
    padding: 2px 4px;
    border-bottom-color: rgba(255,255,255,0.04);
    cursor: grab;
}

/* Botão minimize da barra de coordenadas */
.coord-display-btn {
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: var(--neutral-500);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.coord-display-btn:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary);
}

/* Conteúdo da barra de coordenadas */
#coord-display-content {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

/* Estado minimizado */
#coord-display.coord-display-minimized #coord-display-content {
    display: none;
}

#coord-display.coord-display-minimized {
    min-width: auto;
    width: auto;
}

#coord-display.coord-display-minimized #coord-display-header {
    border-bottom: none;
    padding: 4px;
}

/* HUD de georreferencia (rosa dos ventos + mini globo) */
#geo-hud {
    position: absolute;
    top: var(--space-4);
    right: 44px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 230;
    border-radius: var(--radius-md);
    overflow: visible;
    pointer-events: auto;
}

/* --- constellation.css (extracted) --- */
/* ================================================================
   8. FORMULARIOS E CONTROLES
   ----------------------------------------------------------------
   Abas, inputs, selects, secoes expansiveis.
   ================================================================ */

/* Sistema de Abas */
.tabs {
    display: flex;
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;        /* Firefox: oculta scrollbar */
    -ms-overflow-style: none;     /* IE/Edge: oculta scrollbar */
}

.tabs::-webkit-scrollbar {
    display: none;                /* Chrome/Safari: oculta scrollbar */
}

/* Tabs wrapper — ancora setas de scroll fora do container scrollavel */
.tabs-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* Scroll arrows para tabs com overflow — mesmo pattern do ribbon */
.tabs-scroll-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 3;
    color: var(--neutral-400);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding: 0;
    font-size: 10px;
}

.tabs-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.tabs-scroll-arrow:hover {
    color: var(--neutral-700);
}

.tabs-scroll-arrow.scroll-left {
    left: 0;
    background: linear-gradient(to right, var(--neutral-100) 60%, transparent);
}

.tabs-scroll-arrow.scroll-right {
    right: 0;
    background: linear-gradient(to left, var(--neutral-100) 60%, transparent);
}

/* Dark theme: gradiente com fundo escuro */
[data-theme="dark"] .tabs-scroll-arrow.scroll-left {
    background: linear-gradient(to right, var(--neutral-100) 60%, transparent);
}

[data-theme="dark"] .tabs-scroll-arrow.scroll-right {
    background: linear-gradient(to left, var(--neutral-100) 60%, transparent);
}

.tab {
    flex: 0 0 auto;
    padding: 10px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    color: var(--neutral-500);
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tab:hover {
    color: var(--neutral-800);
    background: var(--overlay-light);
}

.tab.active {
    color: var(--primary-500);
    border-bottom-color: var(--primary-500);
    background: var(--neutral-0);
}

/* Grupos de formulario */
.form-group {
    margin-bottom: var(--space-3);
}

/* Labels dos campos */
.form-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-500);
    margin-bottom: var(--space-1);
}

.form-label.with-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.form-label.with-badge .badge {
    margin-left: 0;
}

/* Campos de entrada (input, select) */
.form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--neutral-800);
    background: var(--neutral-0);
    transition: all 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 1px rgba(61,107,122,0.15);
}

.form-input:disabled {
    background: var(--neutral-100);
    color: var(--neutral-500);
}

/* Linha de formulario (2 campos lado a lado) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

/* Controles de transformacao 3D */
.transform-controls {
    margin-top: 10px;
    padding: 10px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
}
.transform-section {
    margin-bottom: 8px;
}
.transform-section:last-child {
    margin-bottom: 0;
}
.transform-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.transform-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.axis-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--neutral-400);
    min-width: 12px;
    text-align: center;
}
.transform-input {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    font-size: 11px;
    background: var(--neutral-0);
    color: var(--neutral-800);
}
.transform-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(59, 107, 255, 0.15);
}
.transform-color {
    width: 32px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--neutral-0);
}
.transform-color-hex {
    flex: 1;
}

/* Lista de areas e subareas */

/* Secoes expansiveis (acordeon) */
.section {
    border-bottom: 1px solid var(--neutral-200);
}

.section-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
    background: var(--neutral-100);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    position: relative;
    overflow: hidden;
}

/* Topographic texture on section headers */
.section-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--topo-pattern);
    background-size: 200px 200px;
    opacity: 0.3;
    pointer-events: none;
}

.section-header:hover {
    background: var(--neutral-200);
}

/* Seta indicadora de expansao */
.section-header .chevron {
    transition: transform 0.2s ease;
}

/* Rotaciona seta quando colapsado */
.section.collapsed .section-header .chevron {
    transform: rotate(-90deg);
}

/* Conteudo da secao */
.section-content {
    padding: 12px 14px;
}

/* Esconde conteudo quando colapsado */
.section.collapsed .section-content {
    display: none;
}

/* ----------------------------------------
   Lista de Elementos
   ---------------------------------------- */
.element-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ----------------------------------------
   Element & Family Groups
   Secoes colapsaveis para agrupar elementos e familias
   ---------------------------------------- */

.element-group {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.element-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 8px;
    background: var(--neutral-100);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    user-select: none;
}

.element-group-header:hover {
    background: var(--neutral-200);
}

.element-group-chevron {
    font-size: var(--text-xs, 10px);
    color: var(--neutral-400);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

.element-group-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.element-group-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--neutral-700);
}

.element-group-count {
    font-size: 10px;
    color: var(--neutral-400);
    font-weight: 400;
    flex-shrink: 0;
}

.element-group-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--neutral-400);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
}

.element-group-header:hover .element-group-btn {
    opacity: 1;
}

.element-group-btn:hover {
    color: var(--neutral-700);
}

.element-group-content {
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 24px;
}

.element-group.collapsed .element-group-content {
    display: none;
}

.element-group-ungrouped {
    border-style: dashed;
    border-color: var(--neutral-200);
}

.element-group-ungrouped > .element-group-content {
    /* Se nao tem header (sem grupos), remove padding extra */
}

.element-group-empty {
    font-size: 10px;
    color: var(--neutral-400);
    text-align: center;
    padding: 8px 4px;
    font-style: italic;
}

/* Drag-and-drop visual feedback */
.element-group.drag-over {
    border-color: var(--primary-text);
    background: rgba(59, 130, 246, 0.04);
}

.element-group.drag-over > .element-group-header {
    background: rgba(59, 130, 246, 0.08);
}

.element-card.dragging,
.family-item.dragging {
    opacity: 0.4;
}

.element-card[draggable],
.family-item[draggable] {
    cursor: grab;
}

.element-card[draggable]:active,
.family-item[draggable]:active {
    cursor: grabbing;
}

/* Card de elemento */
.element-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    transition: all 0.15s ease;
}

.element-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-sm);
}

.element-card.selected {
    border-color: var(--primary-500);
    background: var(--primary-50);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Inline details section when placed right after selected card */
.element-card.selected + .section {
    border: 1px solid var(--primary-500);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin-top: -1px;
    background: var(--neutral-50);
}

/* Cabecalho do card */
.element-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.element-card-icon {
    font-size: 18px;
}

.element-card-icon[class*="icon-"] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-lg);
    background: var(--overlay-subtle);
    border: 1px solid var(--neutral-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === SVG Icon System === */
.eco-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}
.eco-icon svg {
    width: 100%;
    height: 100%;
}

.element-card-name {
    flex: 1;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.element-card-desc {
    display: block;
    padding: 0 4px 4px 22px;
    font-size: 10px;
    color: var(--neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Botoes do card */
.element-card-toggle {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.element-card-modules {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--accent-blue, #60a5fa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.element-card-modules:hover {
    color: var(--accent-blue-bright, #93c5fd);
    background: rgba(96, 165, 250, 0.12);
}

.element-card-delete {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--neutral-400);
}

.element-card-delete:hover {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

/* ================================================================
   HIERARQUIA ESPACIAL PDPL-U — Arvore de elementos
   ================================================================ */

.hierarchy-add-bar {
    display: flex;
    gap: 4px;
    padding: 4px 4px 6px;
    flex-wrap: wrap;
}

.hierarchy-add-btn {
    font-size: 11px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Container node (site_project, site_area, site_zone) */
.hierarchy-container-node {
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    border: 1px solid transparent;
    transition: border-color 0.1s;
}

.hierarchy-container-node.hierarchy-drag-over {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 59,130,246), 0.06);
}

.hierarchy-container-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 6px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-height: 28px;
}

.hierarchy-container-header:hover {
    background: var(--neutral-100);
}

.hierarchy-container-node.selected > .hierarchy-container-header {
    background: var(--primary-50, rgba(59,130,246,0.08));
    border-radius: var(--radius-sm);
}

.hierarchy-chevron {
    cursor: pointer;
    font-size: var(--text-xs, 10px);
    color: var(--neutral-400);
    min-width: 12px;
    text-align: center;
    padding: 2px;
    border-radius: var(--radius-sm);
    -webkit-user-select: none;
    user-select: none;
}

.hierarchy-chevron:hover {
    background: var(--neutral-200);
    color: var(--neutral-700);
}

.hierarchy-container-icon {
    color: var(--neutral-500);
    display: flex;
    align-items: center;
}

.hierarchy-container-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.hierarchy-child-count {
    font-size: 10px;
    color: var(--neutral-400);
    margin-right: 2px;
}

.hierarchy-children {
    overflow: hidden;
}

/* Zona de drop vazia dentro de container */
.hierarchy-empty-drop {
    padding: 4px 8px;
    font-size: 11px;
    color: var(--neutral-400);
    border: 1px dashed var(--neutral-300);
    border-radius: var(--radius-sm);
    margin: 2px 4px;
    text-align: center;
    transition: border-color 0.1s, background 0.1s;
}

.hierarchy-empty-drop.hierarchy-drag-over {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 59,130,246), 0.06);
    color: var(--primary);
}

/* Zona de drop na raiz (fora de containers) */
.hierarchy-root-drop {
    min-height: 8px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
    transition: background 0.1s, border-color 0.1s;
}

.hierarchy-root-drop.hierarchy-drag-over {
    min-height: 24px;
    border: 1px dashed var(--primary);
    background: rgba(var(--primary-rgb, 59,130,246), 0.04);
}

/* Card sendo arrastado */
.hierarchy-dragging {
    opacity: 0.4;
}

/* Cards-folha dentro da hierarquia — modo ultra-compacto */
.hierarchy-children .element-card {
    padding: 5px 8px;
}
.hierarchy-children .element-card .element-card-header {
    margin-bottom: 0;
}

/* Textarea para chaves/codigo */
.form-textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--neutral-800);
    background: var(--neutral-50);
    resize: vertical;
    min-height: 120px;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 1px rgba(74,103,133,0.15);
}

/* ----------------------------------------
   Tabelas e grids
   ---------------------------------------- */
.table-grid {
    display: grid;
    gap: var(--space-2);
}

.table-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: end;
    padding: var(--space-2);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.table-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 70px;
    flex: 0 0 auto;
}

.table-cell-qual {
    background: var(--primary-50);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    border: 1px solid var(--primary-200);
}

.table-cell-qual.qual-out-of-standard {
    background: var(--warning-50);
    border-color: var(--warning-300);
}

.qual-cell-content {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.qual-cell-content .form-input-sm {
    padding: 4px 6px;
    font-size: 10px;
    min-width: 50px;
    max-width: 80px;
}

.qual-cell-content select.form-input-sm {
    max-width: 100px;
}

.table-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-left: auto;
}

/* ----------------------------------------
   Observation Cards
   ---------------------------------------- */
.obs-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.obs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.obs-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--neutral-700);
}

/* Seções da observação */
.obs-section {
    padding: var(--space-3);
    border-bottom: 1px solid var(--neutral-100);
}

.obs-section:last-child {
    border-bottom: none;
}

.obs-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--neutral-500);
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.add-field-btn {
    margin-top: 12px;
}

/* Grid de posição (X, Y, Z) */
.obs-position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

/* Grid de tempo (Data, Campanha) */
.obs-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

/* ---- Binding indicators ---- */
.obs-bind-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 1;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.35;
    padding: 0;
    vertical-align: middle;
    border-radius: var(--radius-sm);
    transition: opacity 0.15s, color 0.15s;
}
.obs-bind-icon:hover {
    opacity: 0.7;
    background: var(--neutral-100);
}
.obs-bind-icon.obs-bind-active {
    opacity: 1;
    color: var(--accent-blue, #3b82f6);
}
.obs-bind-icon.obs-bind-broken {
    opacity: 1;
    color: var(--accent-red, #ef4444);
}
.form-input.obs-bound {
    background: var(--neutral-100);
    color: var(--neutral-600);
    border-color: var(--accent-blue, #3b82f6);
    border-style: dashed;
    cursor: default;
}
.form-input.obs-bound-broken {
    background: var(--neutral-100);
    color: var(--accent-red, #ef4444);
    border-color: var(--accent-red, #ef4444);
    border-style: dashed;
}

/* ---- Binding picker overlay ---- */
.binding-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.binding-picker-dialog {
    background: var(--neutral-0, #fff);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    min-width: 320px;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.binding-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--neutral-200);
    font-weight: 600;
    font-size: 13px;
}
.binding-picker-body {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    overflow-y: auto;
    flex: 1;
}
.binding-picker-select {
    width: 100%;
    font-size: 12px;
}
.binding-picker-select option {
    padding: 6px 8px;
}
.binding-picker-footer {
    display: flex;
    gap: var(--space-2, 8px);
    justify-content: flex-end;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-top: 1px solid var(--neutral-200);
}

/* Grid de leitura */
.reading-row {
    margin-bottom: var(--space-2);
}

.reading-row-additional {
    background: var(--neutral-50);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--neutral-200);
}

.reading-grid {
    display: grid;
    grid-template-columns: 2fr minmax(140px, 1.2fr) minmax(90px, 110px) minmax(90px, 110px) auto;
    gap: var(--space-2);
    align-items: end;
}

/* Uncertainty — shown below reading grid when present */
.reading-uncertainty { grid-column: 1 / -1; }
.uncertainty-input-wrapper { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.uncertainty-input { max-width: 80px; }
.uncertainty-type-select { max-width: 72px; font-size: 0.85em; }
.uncertainty-k-input { max-width: 40px; text-align: center; font-size: 0.85em; }

/* Accessibility: focus-visible for uncertainty inputs */
.uncertainty-input:focus-visible,
.uncertainty-type-select:focus-visible,
.uncertainty-k-input:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }

#left-panel .reading-grid,
#right-panel .reading-grid {
    grid-template-columns: 1fr;
}

#left-panel .reading-grid .form-group,
#right-panel .reading-grid .form-group {
    width: 100%;
}

#left-panel .reading-grid .reading-convert .checkbox-label,
#right-panel .reading-grid .reading-convert .checkbox-label {
    padding-top: 0;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .reading-grid {
        grid-template-columns: 1fr;
    }

    .reading-grid .form-group {
        width: 100%;
    }

    .reading-grid .reading-convert .checkbox-label {
        padding-top: 0;
        justify-content: flex-start;
    }
}

.reading-param {
    min-width: 0;
}

.reading-value {
    min-width: 80px;
}

.reading-unit {
    min-width: 70px;
}

.reading-convert {
    min-width: 90px;
}

.value-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.value-status {
    position: absolute;
    left: 8px;
    display: inline-flex;
    align-items: center;
}

.value-status .badge {
    margin-left: 0;
}

.value-input-wrapper .form-input {
    padding-left: 56px;
}

.reading-remove {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    padding-top: 18px; /* Align with inputs */
}

.checkbox-label-inline {
    padding-top: 0;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.checkbox-text {
    font-size: 10px;
    color: var(--neutral-600);
    white-space: nowrap;
}

/* Leituras adicionais */
.obs-additional-readings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.obs-empty-msg {
    font-size: 11px;
    color: var(--neutral-500);
    font-style: italic;
    margin: 0;
}

/* Variables section — campos nome = valor editaveis */
.obs-variables-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.obs-var-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.obs-var-name {
    flex: 1;
    min-width: 0;
    font-family: 'JetBrains Mono', Consolas, monospace;
}

.obs-var-eq {
    font-size: 12px;
    color: var(--neutral-400);
    flex-shrink: 0;
}

.obs-var-value {
    width: 70px;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', Consolas, monospace;
}

.obs-var-unit {
    width: 90px;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--neutral-500);
}

.form-input-sm {
    padding: 2px 6px;
    font-size: 11px;
    height: 24px;
}

.btn-xs {
    padding: 2px;
    min-width: 20px;
    min-height: 20px;
}

/* Animação de conversão */
@keyframes valueConverted {
    0% { background-color: var(--accent-500); color: white; }
    100% { background-color: var(--neutral-0); color: var(--neutral-800); }
}

.value-converted {
    animation: valueConverted 0.6s ease-out;
}

.value-input {
    transition: background-color 0.2s, color 0.2s;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: var(--text-xs, 10px);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    margin-left: var(--space-1);
    vertical-align: middle;
}

.badge-si {
    background: var(--accent-500);
    color: white;
}

.badge-custom {
    background: var(--warning);
    color: white;
}

/* Credential badges — nivel academico do autor da observacao */
.badge-credential {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: default;
    border: 1px solid;
    letter-spacing: 0.3px;
}
.badge-credential-professional {
    background: rgba(59, 130, 246, 0.25);
    color: #a5c8ff;
    border-color: rgba(59, 130, 246, 0.5);
}
.badge-credential-pos_graduado {
    background: rgba(139, 92, 246, 0.25);
    color: #d4bfff;
    border-color: rgba(139, 92, 246, 0.5);
}
.badge-credential-mestre {
    background: rgba(234, 179, 8, 0.25);
    color: #fde68a;
    border-color: rgba(234, 179, 8, 0.5);
}
.badge-credential-doutor {
    background: rgba(234, 179, 8, 0.40);
    color: #fcd34d;
    border-color: rgba(234, 179, 8, 0.7);
}

/* Readonly input style */
.form-input-readonly {
    background: var(--neutral-100);
    color: var(--neutral-600);
    cursor: not-allowed;
}

/* Button danger */
.btn-danger {
    color: var(--error);
}

.btn-danger:hover {
    background: var(--error);
    color: white;
}

/* Button variants */
.btn-icon {
    background: transparent;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--neutral-500);
    font-size: 14px;
    line-height: 1;
    border-radius: var(--radius-sm);
}

.btn-icon:hover {
    background: var(--neutral-200);
    color: var(--error);
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--primary-500);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    margin-left: var(--space-2);
}

.btn-link:hover {
    text-decoration: underline;
}

/* ----------------------------------------
   Filtros de cena
   ---------------------------------------- */
.filters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    color: var(--neutral-700);
}

/* ================================================================
   9. MODAIS
   ----------------------------------------------------------------
   Janelas sobrepostas para acoes especificas (exportar, importar).
   ================================================================ */

/* ================================================================
   PROGRESS OVERLAY — Overlay de progresso para operacoes longas
   Exibe progress bar, fase atual e log de warnings/erros.
   z-index 9000 = mesmo nivel de async-dialog-overlay.
   ================================================================ */

.legacy-progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.legacy-progress-overlay-content {
    background: var(--neutral-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 24px;
    width: 90%;
    max-width: 480px;
    animation: modalSlideIn 0.2s ease;
}

.legacy-progress-overlay-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-900);
}

.legacy-progress-overlay-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    appearance: none;
    border: none;
    background: var(--neutral-200);
}
.legacy-progress-overlay-bar::-webkit-progress-bar { background: var(--neutral-200); border-radius: 4px; }
.legacy-progress-overlay-bar::-webkit-progress-value { background: var(--primary-500); border-radius: 4px; transition: width 0.2s; }
.legacy-progress-overlay-bar::-moz-progress-bar { background: var(--primary-500); border-radius: 4px; }

.legacy-progress-overlay-phase {
    margin-top: 8px;
    font-size: 13px;
    color: var(--neutral-600);
}

.legacy-progress-overlay-log {
    margin-top: 12px;
    max-height: 180px;
    overflow-y: auto;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    background: var(--neutral-50);
}
.legacy-progress-overlay-log:empty { display: none; }

.legacy-progress-log-line { padding: 2px 0; }
.progress-log-warning { color: var(--warning-600, #b45309); }
.progress-log-error { color: var(--error-600, #dc2626); font-weight: 500; }
.progress-log-info { color: var(--neutral-500); }

.legacy-progress-overlay-footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.legacy-progress-overlay-summary {
    font-size: 13px;
    color: var(--neutral-700);
    flex: 1;
}

/* Overlay escuro de fundo */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;  /* top, right, bottom, left = 0 */
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);  /* Desfoque do fundo */
}

/* Modal visivel */
.modal-overlay.active {
    display: flex;
}

/* Caixa do modal */
.modal {
    background: var(--neutral-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease;
}

/* Modal redimensionavel — sobrescreve tamanhos fixos */
.modal.modal-resizable {
    max-width: 90vw;
    min-width: 350px;
    min-height: 250px;
    max-height: 90vh;
    position: relative;
    overflow: auto;
}

/* Animacao de entrada */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Cabecalho do modal */
.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-800);
}

/* Botao de fechar */
.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--neutral-500);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--neutral-100);
    color: var(--neutral-700);
}

/* Corpo do modal */
.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
    max-height: clamp(200px, 60vh, 520px);
}
/* Modais resizable (merge, etc.) precisam de mais espaco para listas longas */
.modal.modal-resizable .modal-body {
    max-height: clamp(200px, 70vh, 800px);
}

/* Rodape do modal */
.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--neutral-200);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    background: var(--neutral-50);
}

/* ----------------------------------------
   Checkbox Grid (para modais)
   ---------------------------------------- */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    max-height: 150px;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    color: var(--neutral-700);
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin: 0;
}

/* ----------------------------------------
   Botoes Gerais
   ---------------------------------------- */
.btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Botao primario (azul) */
.btn-primary {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-700);
}

.btn-primary:hover {
    background: var(--primary-700);
}

/* Botao secundario (branco/cinza) */
.btn-secondary {
    background: var(--neutral-0);
    color: var(--neutral-700);
    border-color: var(--neutral-300);
}

.btn-secondary:hover {
    background: var(--neutral-100);
    border-color: var(--neutral-400);
}

/* Botao de sucesso (verde) */
.btn-success {
    background: var(--accent-600);
    color: white;
    border-color: var(--accent-700);
}

.btn-success:hover {
    background: var(--accent-700);
}

/* ================================================================
   9b. CAMPAIGN COMPLETENESS & PLANNED READINGS
   ----------------------------------------------------------------
   Barra de completude e secoes planejado/executado nos cards de campanha.
   ================================================================ */

/* Card de campanha compacto */
.campaign-card { padding: var(--space-2) !important; }

.camp-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-1);
}

.camp-color-dot {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    background: none;
}
.camp-color-dot::-webkit-color-swatch-wrapper { padding: 0; }
.camp-color-dot::-webkit-color-swatch { border: none; border-radius: 50%; }
.camp-color-dot::-moz-color-swatch { border: none; border-radius: 50%; }

.camp-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--neutral-100);
    padding: 2px 0;
    min-width: 0;
}
.camp-name:focus { border-bottom-color: var(--accent-400, #818cf8); outline: none; }

.camp-vis {
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.camp-vis input { width: 13px; height: 13px; cursor: pointer; }

.camp-delete {
    flex-shrink: 0;
    font-size: 11px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--neutral-600);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    transition: color 0.1s;
}
.camp-delete:hover { color: var(--accent-red, #ef4444); }

.camp-dates {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--space-1);
}

.camp-dates input[type="date"] {
    flex: 1;
    font-size: 10px;
    padding: 2px 4px;
    background: var(--neutral-800);
    color: var(--neutral-300);
    border: 1px solid var(--neutral-700);
    border-radius: var(--radius-sm);
    min-width: 0;
}

.camp-date-sep {
    font-size: 10px;
    color: var(--neutral-600);
    flex-shrink: 0;
}

/* Barra de completude */
.campaign-completeness {
    padding: 2px 0;
    margin-bottom: var(--space-1);
}

.campaign-completeness-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--neutral-500);
    margin-bottom: var(--space-1);
}

.campaign-completeness-bar {
    width: 100%;
    height: 6px;
    background: var(--neutral-200);
    border-radius: 3px;
    overflow: hidden;
}

.campaign-completeness-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.campaign-completeness-fill.green  { background: var(--accent-green, #22c55e); }
.campaign-completeness-fill.yellow { background: var(--accent-yellow, #eab308); }
.campaign-completeness-fill.red    { background: var(--accent-red, #ef4444); }

/* Sub-secoes dentro do card de campanha */
.campaign-section {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--neutral-700);
}

.campaign-section.collapsed .pr-body { display: none; }
.campaign-section.collapsed .pr-chevron { transform: rotate(-90deg); }

.campaign-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
    margin-bottom: var(--space-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campaign-section-title.pr-toggle { cursor: pointer; -webkit-user-select: none; user-select: none; }
.campaign-section-title.pr-toggle:hover { color: var(--neutral-300); }

.pr-chevron {
    display: inline-block;
    transition: transform 0.15s;
    margin-right: 2px;
    font-size: var(--text-xs, 10px);
}

.pr-count-badge {
    font-size: var(--text-xs, 10px);
    background: var(--neutral-700);
    color: var(--neutral-300);
    padding: 1px 5px;
    border-radius: var(--radius-xl);
    margin-left: 4px;
    font-weight: 500;
}

/* Corpo scrollavel das leituras planejadas */
.pr-body {
    max-height: clamp(150px, 30vh, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Grupo de leituras (agrupado por elemento) */
.pr-group {
    margin-bottom: var(--space-1);
}

.pr-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--neutral-400);
    margin-bottom: 3px;
    padding: 1px 0;
}

.pr-group-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75%;
}

.pr-group-stats {
    font-size: var(--text-xs, 10px);
    color: var(--neutral-500);
    flex-shrink: 0;
}

/* Tags compactas de parametros */
.pr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.pr-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.4;
}

.pr-tag.done {
    background: rgba(34, 197, 94, 0.12);
    color: var(--accent-green, #22c55e);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.pr-tag.pending {
    background: var(--neutral-800);
    color: var(--neutral-400);
    border: 1px solid var(--neutral-700);
}

.pr-tag-x {
    font-size: 10px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 1px;
    opacity: 0;
    transition: opacity 0.1s;
    line-height: 1;
}

.pr-tag:hover .pr-tag-x { opacity: 0.7; }
.pr-tag-x:hover { opacity: 1 !important; color: var(--accent-red, #ef4444); }

/* Empty state das leituras planejadas */
.planned-readings-empty {
    font-size: 11px;
    color: var(--neutral-500);
    text-align: center;
    padding: var(--space-1);
    font-style: italic;
}

/* Botao de adicionar leitura planejada */
.btn-add-reading {
    font-size: 11px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--accent-400, #818cf8);
    border: 1px dashed var(--accent-400, #818cf8);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
    line-height: 1;
}

.btn-add-reading:hover {
    background: rgba(99, 102, 241, 0.1);
}

/* Badge AUTO no slider Cp do EIS */
.eis-cp-auto-badge {
    font-size: var(--text-xs, 10px);
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-400, #818cf8);
    padding: 1px 6px;
    border-radius: var(--radius-xl);
    margin-left: 4px;
    font-weight: 600;
    display: inline-block;
}

/* ── EIS: AUTO/MANUAL toggle + Custom Mode ────────────────────── */

.eis-auto-badge {
    font-size: var(--text-xs, 10px);
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-400, #818cf8);
    padding: 1px 6px;
    border-radius: var(--radius-xl);
    margin-left: 4px;
    font-weight: 600;
    display: inline-block;
    cursor: default;
}

/* Slider row com header + toggle */
.eis-slider-row[data-axis] {
    margin-bottom: 6px;
}

.eis-slider-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.eis-slider-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-200, #e2e8f0);
    flex: 1;
}

/* .eis-slider-weight — canonical definition in eis.css */

.eis-slider-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.eis-slider-control .eis-slider {
    flex: 1;
}

/* .eis-slider-value — canonical definition in eis.css */

/* AUTO/MANUAL toggle button */
.eis-auto-toggle {
    font-size: var(--text-xs, 10px);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--neutral-400, #94a3b8);
    cursor: pointer;
    transition: all 0.2s;
}

.eis-auto-toggle.active {
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-400, #818cf8);
    border-color: rgba(99, 102, 241, 0.3);
}

.eis-auto-toggle.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.eis-auto-toggle:hover:not(.disabled) {
    background: rgba(99, 102, 241, 0.15);
}

/* ── Custom Mode ────────────────────────────────────────────────── */

.eis-custom-profile-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.eis-custom-profile-bar select {
    flex: 1;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--neutral-200, #e2e8f0);
}

.eis-custom-btn {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--neutral-300, #cbd5e1);
    cursor: pointer;
    transition: background 0.2s;
}

.eis-custom-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.eis-custom-btn.danger {
    color: rgb(239, 68, 68);
}

.eis-custom-btn.danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.eis-custom-btn.save {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-400, #818cf8);
    border-color: rgba(99, 102, 241, 0.3);
    margin-top: 8px;
    width: 100%;
}

.eis-custom-btn.save:hover {
    background: rgba(99, 102, 241, 0.25);
}

.eis-custom-btn.add-axis {
    width: 100%;
    margin-top: 6px;
    border-style: dashed;
}

.eis-custom-btn.small {
    padding: 1px 5px;
    font-size: 10px;
}

.eis-custom-name-row {
    margin-bottom: 8px;
}

.eis-custom-name-row input {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--neutral-100, #f1f5f9);
}

.eis-custom-axes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eis-custom-axis-row {
    padding: 6px 8px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.eis-custom-axis-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.eis-custom-axis-name {
    flex: 1;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--neutral-200, #e2e8f0);
}

.eis-custom-weight-label {
    font-size: var(--text-xs, 10px);
    color: var(--neutral-500, #64748b);
    display: flex;
    align-items: center;
    gap: 2px;
}

.eis-custom-axis-weight {
    width: 30px;
    font-size: 11px;
    padding: 1px 4px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--neutral-200, #e2e8f0);
    text-align: center;
}

.eis-custom-axis-desc {
    font-size: var(--text-xs, 10px);
    color: var(--neutral-500, #64748b);
    margin-bottom: 2px;
}

.eis-custom-axis-benchmark {
    font-size: var(--text-xs, 10px);
    color: var(--accent-400, #818cf8);
    margin-bottom: 3px;
}

.eis-custom-empty {
    text-align: center;
    color: var(--neutral-500, #64748b);
    font-size: 11px;
    padding: 16px 0;
}

/* ── Cost Analysis: Benchmark Cards ──────────────────────────── */

.ca-benchmark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.ca-benchmark-card {
    padding: 8px 10px;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ca-benchmark-label {
    font-size: 10px;
    color: var(--neutral-400, #94a3b8);
    margin-bottom: 2px;
}

.ca-benchmark-actual {
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-100, #f1f5f9);
}

.ca-benchmark-ref {
    font-size: var(--text-xs, 10px);
    color: var(--neutral-500, #64748b);
    margin-top: 1px;
}

.ca-benchmark-indicator {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    margin-top: 4px;
}

.ca-benchmark-arrow {
    font-size: 12px;
}

.benchmark-excellent .ca-benchmark-indicator { color: rgb(34, 197, 94); }
.benchmark-good .ca-benchmark-indicator { color: rgb(99, 102, 241); }
.benchmark-warn .ca-benchmark-indicator { color: rgb(234, 179, 8); }
.benchmark-over .ca-benchmark-indicator { color: rgb(239, 68, 68); }

.benchmark-excellent { border-color: rgba(34, 197, 94, 0.2); }
.benchmark-good { border-color: rgba(99, 102, 241, 0.2); }
.benchmark-warn { border-color: rgba(234, 179, 8, 0.2); }
.benchmark-over { border-color: rgba(239, 68, 68, 0.2); }

/* ── Observation: Planned vs Actual ────────────────────────────── */

/* Label "Planejado" / "Executado" acima dos campos de posicao */
.obs-planned-label {
    font-size: var(--text-xs, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
    margin: var(--space-1) 0 2px 0;
}

/* Inputs planned — estilo mais sutil que os inputs normais */
.form-input-planned {
    border-style: dashed;
    opacity: 0.75;
}

.form-input-planned:focus {
    opacity: 1;
    border-style: solid;
}

/* Label planned para campos de leitura */
.form-label-planned {
    color: var(--neutral-500);
    font-style: italic;
}

/* Expected value row na secao de leitura */
.obs-expected-row {
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-1);
    border-bottom: 1px dashed var(--neutral-700);
}

.obs-expected-row .form-input {
    max-width: 150px;
}

/* ── Planning Toggle ──────────────────────────────────────────── */

/* Toggle switch compacto no header da observacao */
.planning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 4px;
}

.planning-toggle input {
    display: none;
}

.planning-toggle-slider {
    position: relative;
    width: 28px;
    height: 14px;
    background: var(--neutral-700);
    border-radius: 7px;
    transition: background 0.2s;
}

.planning-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: var(--neutral-400);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.planning-toggle input:checked + .planning-toggle-slider {
    background: var(--accent-blue, #3b6bff);
}

.planning-toggle input:checked + .planning-toggle-slider::after {
    transform: translateX(14px);
    background: #fff;
}

.planning-toggle-label {
    font-size: var(--text-xs, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--neutral-500);
    transition: color 0.2s;
}

.planning-toggle input:checked ~ .planning-toggle-label {
    color: var(--accent-blue, #3b6bff);
}

/* Card com planejamento ativo — borda sutil de destaque */
.obs-card.obs-planning-active {
    border-left: 2px solid var(--accent-blue, #3b6bff);
}

/* Grid para campos planned de leitura (parametro + valor + unidade) */
.obs-planned-reading-grid {
    display: grid;
    grid-template-columns: 1fr 100px 80px;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-1);
    border-bottom: 1px dashed var(--neutral-700);
}

/* Campaign planned reading block (wrapper com detalhes expandidos) */
.planned-reading-block {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--neutral-800);
}

.planned-reading-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Detalhes opcionais: posicao planejada + valor esperado */
.planned-reading-details {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: 4px;
    margin-top: 4px;
}

/* Input mini para campos compactos (X, Y, Z, Expected) */
.form-input-mini {
    font-size: 10px;
    padding: 2px 4px;
    height: 22px;
}

/* ================================================================
   10. NOTIFICACOES (TOAST)
   ----------------------------------------------------------------
   Mensagens temporarias que aparecem no canto da tela.
   ================================================================ */

/* Container das notificacoes - canto inferior direito */
#toast-container {
    position: fixed;
    bottom: 80px;
    right: var(--space-4);
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
}

/* Notificacao individual */
.toast {
    background: var(--neutral-0);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 280px;
    animation: toastSlideIn 0.3s ease;
    border-left: 4px solid var(--info);
}

/* Cores por tipo */
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--error); }
.toast.warning { border-left-color: var(--warning); }

/* Animacao de entrada */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-icon {
    font-size: 18px;
}

.toast-message {
    flex: 1;
    font-size: 12px;
    color: var(--neutral-700);
}

.toast-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-400);
    padding: var(--space-1);
}

/* Botao de acao (CTA) dentro do toast — ex: "Reportar" no toast de erro */
.toast-action {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    margin: 0 6px 0 2px;
    padding: 2px 8px;
    opacity: 0.85;
    white-space: nowrap;
    flex-shrink: 0;
}
.toast-action:hover { opacity: 1; }

/* ================================================================
   11. UTILITARIOS
   ----------------------------------------------------------------
   Classes auxiliares reutilizaveis.
   ================================================================ */

/* Truncacao de texto — usar em vez de repetir trio whitespace/overflow/ellipsis */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Seletor de idioma (dropdown) */
.language-selector {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.lang-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--window-muted);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.lang-dropdown-trigger:hover {
    background: var(--window-dark-3);
    color: var(--window-text);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--window-dark-2);
    border: 1px solid var(--window-border);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 180px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 300;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.lang-dropdown.open {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--window-text);
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: background 0.1s;
}
.lang-option:hover {
    background: var(--window-dark-3);
}
.lang-option.active {
    background: var(--primary-600);
    color: white;
}
.lang-option-code {
    font-weight: 600;
    min-width: 24px;
    font-size: 11px;
    opacity: 0.7;
}
.lang-option-name {
    flex: 1;
}

/* Mobile language grid (2 columns) */
.mobile-lang-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0;
}
.lang-mobile-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--window-dark-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--window-text);
    cursor: pointer;
    font-size: 12px;
    text-align: left;
}
.lang-mobile-btn:hover {
    background: var(--window-dark-2);
}
.lang-mobile-btn.active {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-700);
}

/* --- ticker.css (extracted) --- */
/* ================================================================
   12. GERENCIADOR DE CAMPOS
   ----------------------------------------------------------------
   Modal para gerenciar parâmetros e unidades customizados.
   ================================================================ */

.field-manager-modal {
    max-width: 700px;
    max-height: 85vh;
}

.field-manager-tabs {
    display: flex;
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
}

.field-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-500);
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.field-tab:hover {
    color: var(--neutral-700);
    background: var(--neutral-50);
}

.field-tab.active {
    color: var(--primary-text);
    border-bottom-color: var(--primary-600);
    background: var(--neutral-0);
}

.field-manager-body {
    max-height: 500px;
    overflow-y: auto;
}

.field-manager-actions {
    padding: var(--space-3);
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}

.field-list {
    padding: var(--space-2);
}

.field-category {
    margin-bottom: var(--space-3);
}

.field-category-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
    padding: var(--space-2) var(--space-2);
    background: var(--neutral-100);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

.field-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    transition: background 0.15s ease;
}

.field-item:hover {
    background: var(--neutral-100);
}

.field-item-custom {
    background: var(--warning-50);
    border-left: 3px solid var(--warning);
}

.field-item-custom:hover {
    background: rgba(250, 204, 21, 0.15);
}

.field-item-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.field-item-symbol {
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: var(--primary-text-muted);
    background: var(--primary-50);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    min-width: 50px;
    text-align: center;
}

.field-item-name {
    font-size: 12px;
    color: var(--neutral-800);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 10px;
    color: var(--neutral-500);
}

.field-item-actions {
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.field-item:hover .field-item-actions {
    opacity: 1;
}

.badge-base {
    background: var(--info);
    color: white;
}

/* Formulário de campo */
.field-form {
    padding: var(--space-4);
    background: var(--neutral-50);
    border-top: 1px solid var(--neutral-200);
    margin-top: var(--space-3);
}

.field-form h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-800);
    margin-bottom: var(--space-3);
}

.form-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.form-hint {
    display: block;
    font-size: 10px;
    color: var(--neutral-500);
    margin-top: var(--space-1);
}

/* ================================================================
   13. DROPDOWN CUSTOMIZADO DE PARÂMETROS
   ----------------------------------------------------------------
   Substitui o select nativo por um componente com busca e grupos.
   ================================================================ */

.custom-select-wrapper {
    position: relative;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--neutral-800);
    background: var(--neutral-0);
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-select-trigger:hover {
    border-color: var(--primary-text);
}

.custom-select-trigger.open {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(59, 107, 255, 0.15);
}

.custom-select-trigger .selected-value {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-trigger .trigger-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.custom-select-trigger .arrow {
    font-size: 10px;
    color: var(--neutral-400);
    transition: transform 0.15s ease;
}

.custom-select-trigger.open .arrow {
    transform: rotate(180deg);
}

.custom-select-trigger .config-btn {
    padding: 2px 6px;
    background: var(--neutral-200);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 10px;
    color: var(--neutral-600);
    transition: all 0.15s ease;
}

.custom-select-trigger .config-btn:hover {
    background: var(--primary-500);
    color: white;
}

.custom-select-dropdown {
    position: fixed;
    z-index: 1000;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow: hidden;
    display: none;
}

.custom-select-dropdown.open {
    display: block;
}

.custom-select-search {
    padding: var(--space-2);
    border-bottom: 1px solid var(--neutral-200);
}

.custom-select-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    font-size: 11px;
    outline: none;
}

.custom-select-search input:focus {
    border-color: var(--primary-text);
}

.custom-select-options {
    max-height: 240px;
    overflow-y: auto;
}

.custom-select-group {
    padding: var(--space-1) 0;
}

.custom-select-group-label {
    font-size: var(--text-xs, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
    padding: var(--space-1) var(--space-3);
    background: var(--neutral-100);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    -webkit-user-select: none;
    user-select: none;
}
.custom-select-group-label:hover {
    background: var(--neutral-200, #e0e0e0);
}

/* Collapsible groups */
.group-arrow {
    font-size: var(--text-xs, 10px);
    width: 10px;
    flex-shrink: 0;
    text-align: center;
}
.group-count {
    font-weight: 400;
    color: var(--neutral-400, #999);
    margin-left: auto;
    font-size: var(--text-xs, 10px);
}
.custom-select-group.collapsed .legacy-group-content {
    display: none;
}
/* When searching, force all content visible */
.custom-select-options.searching .legacy-group-content,
.custom-select-options.searching .sao-matrix-content,
.custom-select-options.searching .sao-subcat-content {
    display: block !important;
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.custom-select-option:hover {
    background: var(--primary-50);
}

.custom-select-option.selected {
    background: var(--primary-100);
    color: var(--primary-text-muted);
}

.custom-select-option.hidden {
    display: none;
}

.custom-select-option .option-name {
    flex: 1;
    font-size: 12px;
}

.custom-select-option .option-badges {
    display: flex;
    gap: 4px;
}

.custom-select-option .option-unit {
    font-size: 10px;
    color: var(--neutral-500);
    font-family: 'Consolas', monospace;
}

.custom-select-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--neutral-500);
    font-size: 11px;
}

/* Botão de gerenciar no dropdown */
.custom-select-footer {
    padding: var(--space-2);
    border-top: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}

.custom-select-footer button {
    width: 100%;
    padding: 6px 12px;
    background: var(--neutral-0);
    border: 1px dashed var(--neutral-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 11px;
    color: var(--neutral-600);
    transition: all 0.15s ease;
}

.custom-select-footer button:hover {
    background: var(--primary-50);
    border-color: var(--primary-text);
    color: var(--primary-text);
}

/* Placeholder para campo vazio */
.placeholder-text {
    color: var(--neutral-400);
}

/* ================================================================
   14. PAINEL DE CHAT LLM — all styles in llm-chat.css (canonical)
   Legacy block removed to eliminate selector duplication.
   ================================================================ */

/* (legacy LLM selectors removed — see llm-chat.css) */

/* Hint de formulario */
.form-hint {
    display: block;
    font-size: 10px;
    color: var(--neutral-500);
    margin-top: var(--space-1);
}

/* ================================================================
   TOPOGRAPHIC IDENTITY — JetBrains Mono for data fields
   ================================================================ */

/* Monospace for numeric inputs, dates, coordinates, badges, values */
input[type="number"],
input[type="date"],
input[type="datetime-local"],
#coord-display,
.value-input-wrapper .form-input,
.status-item,
.badge,
.option-unit,
.reading-value,
.coord-value {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Contour-line border — double border effect on panels */
#left-panel,
#right-panel {
    position: relative;
}

#left-panel::after,
#right-panel::after {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 1px;
    background: var(--neutral-200);
    opacity: 0.3;
    pointer-events: none;
}

#left-panel::after {
    right: -3px;
}

#right-panel::after {
    left: -3px;
}

/* Section contour borders */
.section {
    border-bottom-color: var(--neutral-200);
    position: relative;
}

.section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--neutral-200);
    opacity: 0.2;
    pointer-events: none;
}

/* ================================================================
   MODULE 5: API GATEWAY — Provider config styles
   ================================================================ */

/* .api-key-link rules moved to css/api-key.css */

.test-status {
    font-size: 11px;
    margin-left: var(--space-2);
    vertical-align: middle;
}

.test-success {
    color: var(--success, #22c55e);
}

.test-error {
    color: var(--error, #ef4444);
}

/* ================================================================
   MODULE 4: AGENTS — Agent library styles
   ================================================================ */

.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
    max-height: 400px;
    overflow-y: auto;
}

.agent-card {
    background: var(--window-dark-2, var(--neutral-50));
    border: 1px solid var(--window-border, var(--neutral-200));
    border-radius: var(--radius-md, 4px);
    padding: var(--space-3);
    cursor: pointer;
    transition: border-color 0.15s;
}

.agent-card:hover {
    border-color: var(--accent-500);
}

.agent-card.active {
    border-color: var(--primary-500);
    background: rgba(61, 107, 122, 0.08);
}

.agent-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.agent-card-header strong {
    flex: 1;
    font-size: 13px;
}

.agent-badge {
    display: inline-block;
    font-size: var(--text-xs, 10px);
    padding: 1px 6px;
    border-radius: var(--radius-sm, 2px);
    background: var(--neutral-300, #d1d5db);
    color: var(--neutral-700, #374151);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agent-badge.system {
    background: var(--primary-500);
    color: #fff;
}

.agent-card p {
    font-size: 11px;
    color: var(--window-muted, var(--neutral-500));
    margin: 0 0 var(--space-2) 0;
    line-height: 1.4;
}

.agent-card-actions {
    display: flex;
    gap: var(--space-1);
}

.agent-card-actions .btn {
    font-size: 10px;
    padding: 2px 8px;
}

/* .agent-active-badge — canonical definition in llm-chat.css */

/* Agent editor form inside modal */
.agent-editor {
    display: none;
}

.agent-editor.visible {
    display: block;
}

.agent-editor textarea {
    min-height: 120px;
    resize: vertical;
}

/* ================================================================
   MODULE 1: SMART IMPORT — Mapping table styles
   ================================================================ */

.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: var(--space-2) 0;
    overflow-x: auto;
    display: block;
}

.preview-table th,
.preview-table td {
    border: 1px solid var(--window-border, var(--neutral-200));
    padding: var(--space-1) var(--space-2);
    text-align: left;
    white-space: nowrap;
}

.preview-table th {
    background: var(--window-dark-3, var(--neutral-100));
    font-weight: 600;
}

.mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: var(--space-2) 0;
}

.mapping-table th,
.mapping-table td {
    border: 1px solid var(--window-border, var(--neutral-200));
    padding: var(--space-2);
    text-align: left;
}

.mapping-table th {
    background: var(--window-dark-3, var(--neutral-100));
    font-weight: 600;
}

.mapping-table select {
    width: 100%;
    font-size: 11px;
    padding: 2px 4px;
}

.confidence-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 2px);
    font-weight: 600;
}

.confidence-badge.high {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.confidence-badge.medium {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

.confidence-badge.low {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.smart-import-analyzing {
    text-align: center;
    padding: var(--space-4);
    color: var(--window-muted, var(--neutral-500));
}

/* ================================================================
   MODULE 3: PREDICTION — Trend analysis styles
   ================================================================ */

.prediction-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: var(--space-2) 0;
}

.prediction-table th,
.prediction-table td {
    border: 1px solid var(--window-border, var(--neutral-200));
    padding: var(--space-1) var(--space-2);
    text-align: left;
}

.prediction-table th {
    background: var(--window-dark-3, var(--neutral-100));
    font-weight: 600;
    font-size: 10px;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 2px);
}

.trend-badge.increasing {
    color: #dc2626;
}

.trend-badge.decreasing {
    color: #16a34a;
}

.trend-badge.stable {
    color: var(--neutral-500);
}

.trend-badge.significant {
    font-weight: 700;
}

/* ================================================================
   MODULE 2: AUDIT — Greenwashing audit styles
   ================================================================ */

.reliability-index {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--neutral-300);
    margin: var(--space-3) auto;
}

.reliability-index .score {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.reliability-index .label {
    font-size: var(--text-xs, 10px);
    text-transform: uppercase;
    color: var(--window-muted, var(--neutral-500));
}

.reliability-index.high {
    border-color: #16a34a;
    color: #16a34a;
}

.reliability-index.medium {
    border-color: #ca8a04;
    color: #ca8a04;
}

.reliability-index.low {
    border-color: #dc2626;
    color: #dc2626;
}

.audit-findings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: var(--space-2) 0;
}

.audit-findings-table th,
.audit-findings-table td {
    border: 1px solid var(--window-border, var(--neutral-200));
    padding: var(--space-1) var(--space-2);
    text-align: left;
}

.audit-findings-table th {
    background: var(--window-dark-3, var(--neutral-100));
    font-weight: 600;
    font-size: 10px;
}

.red-flag-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 2px);
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    font-weight: 600;
    margin: 2px;
}

.severity-high { color: #dc2626; font-weight: 600; }
.severity-medium { color: #ca8a04; }
.severity-low { color: var(--neutral-500); }

.layer-section {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 1px solid var(--window-border, var(--neutral-200));
    border-radius: var(--radius-md, 4px);
}

.layer-section h4 {
    margin: 0 0 var(--space-2) 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-500);
}

.benford-chart {
    max-width: 400px;
    margin: var(--space-2) auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    padding: var(--space-2) 0;
}

.benford-digit-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.benford-bars {
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

.benford-bar.observed {
    width: 14px;
    background: var(--primary-500);
    border-radius: var(--radius-sm) 2px 0 0;
}

.benford-bar.expected {
    width: 14px;
    background: var(--neutral-400);
    border-radius: var(--radius-sm) 2px 0 0;
    opacity: 0.6;
}

.benford-label {
    font-size: 11px;
    color: var(--neutral-500);
    margin-top: 2px;
}

.benford-legend {
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: var(--neutral-500);
    margin-top: var(--space-2);
}

.audit-progress {
    text-align: center;
    padding: var(--space-4);
}

.audit-progress .progress-bar,
.audit-progress .audit-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--neutral-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.audit-progress .progress-bar::after,
.audit-progress .audit-progress-bar::after {
    content: '';
    display: block;
    width: 30%;
    height: 100%;
    background: var(--primary-500);
    border-radius: var(--radius-sm);
    animation: audit-progress 1.5s ease-in-out infinite;
}

@keyframes audit-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ----------------------------------------------------------------
   SENSOR SUMMARY + SENSORS CENTER TAB
   ---------------------------------------------------------------- */

.sensor-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.sensor-summary-label {
    display: block;
    font-size: 10px;
    color: var(--neutral-500);
    margin-bottom: 2px;
}

.sensor-summary-value {
    display: block;
    font-size: 11px;
    color: var(--neutral-800);
    font-weight: 600;
}

/* --- Sensor Center styles moved to sensor-center.css --- */

/* Large modal variant for agents, smart import, audit */
.modal-large {
    max-width: 700px;
    width: 90%;
}

/* --- sao.css (extracted) --- */
/* --- auth.css (extracted) --- */
/* --- libraries.css (extracted) --- */
/* ================================================================
   SHAPE EDITOR — Edit toolbar and handle cursor states
   ================================================================ */

.edit-toolbar {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--neutral-100);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 100;
    font-size: 11px;
    color: var(--neutral-800);
    -webkit-user-select: none;
    user-select: none;
}

.edit-toolbar-label {
    font-weight: 600;
    color: var(--accent-green, #22c55e);
    white-space: nowrap;
}

.edit-toolbar-count {
    color: var(--neutral-400);
    font-size: 10px;
    white-space: nowrap;
}

.edit-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--neutral-700, #3b3f47);
}

.edit-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--neutral-600, #4b5563);
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--neutral-800);
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.edit-toolbar-btn:hover {
    background: var(--neutral-700, #3b3f47);
    border-color: var(--neutral-500);
}

.edit-toolbar-btn.active {
    background: var(--accent-green, #22c55e);
    color: #000;
    border-color: var(--accent-green, #22c55e);
}

.edit-done-btn {
    border-color: var(--accent-green, #22c55e);
    color: var(--accent-green, #22c55e);
}

.edit-done-btn:hover {
    background: var(--accent-green, #22c55e);
    color: #000;
}

.edit-delete-btn:hover {
    border-color: var(--accent-red, #ef4444);
    color: var(--accent-red, #ef4444);
}

/* Coordinate tooltip — shown during vertex drag */
.edit-coord-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 210;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font: 11px / 1.4 'Consolas', 'Monaco', monospace;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid rgba(0, 221, 255, 0.3);
}

/* Ribbon Edit tab — vertex count badge */
.edit-ribbon-vertex-count {
    font-size: 10px;
    color: var(--neutral-400);
    padding: 2px 6px;
    background: var(--neutral-800, #1e2128);
    border-radius: var(--radius-sm, 4px);
}

/* Ribbon Edit tab — Done button highlight */
.edit-ribbon-done-btn {
    border: 1px solid var(--accent-green, #22c55e) !important;
    color: var(--accent-green, #22c55e) !important;
}

.edit-ribbon-done-btn:hover {
    background: var(--accent-green, #22c55e) !important;
    color: #000 !important;
}

.toolbar-btn-danger {
    border: 1px solid var(--danger-500, #ef4444) !important;
    color: var(--danger-500, #ef4444) !important;
}

.toolbar-btn-danger:hover {
    background: var(--danger-500, #ef4444) !important;
    color: #fff !important;
}

/* Ribbon Edit tab — Draw button active */
#ribbon-edit .toolbar-btn.active {
    background: var(--accent-green, #22c55e);
    color: #000;
    border-color: var(--accent-green, #22c55e);
}

/* Menu Edit tab styling */
#menu-edit-tab {
    color: var(--accent-green, #22c55e) !important;
    font-weight: 600;
}

/* --- hudCards.css (extracted) --- */
/* --- vizSettings.css (extracted) --- */
/* --- inspector.css (extracted) --- */
/* --- aerial.css (extracted) --- */
/* --- nn.css (extracted) --- */
/* ================================================================
   ZEN MODE (F11) — Oculta toda a UI, exibe apenas o canvas 3D
   ================================================================ */
body.zen-mode .ribbon,
body.zen-mode .left-panel,
body.zen-mode .right-panel,
body.zen-mode .status-bar,
body.zen-mode .resize-handle,
body.zen-mode #ticker-bar,
body.zen-mode .hud-cards-panel,
body.zen-mode .viz-settings-bar,
body.zen-mode .llm-chat-panel,
body.zen-mode .inspector-panel {
    display: none !important;
}

body.zen-mode .main-layout {
    grid-template-columns: 0 0 1fr 0 0 !important;
    grid-template-rows: 0 1fr 0 !important;
}

/* ================================================================
   FOCUS MODE (Ctrl+Shift+F) — Oculta chrome da janela, mantém painéis
   Esconde titlebar, menubar, toolbar, statusbar e ticker.
   Painéis laterais, constellation, inspector e HUD cards continuam.
   ================================================================ */
body.focus-mode #titlebar,
body.focus-mode #menubar,
body.focus-mode #toolbar,
body.focus-mode #statusbar,
body.focus-mode #ticker-bar {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.focus-mode #app {
    grid-template-rows: 0 0 0 1fr 0 !important;
}

/* Tour styles: see tour.css */

/* ================================================================
   DEMO MODE — Interactive scenario UI styles
   Estilos do sistema de demonstracao por cenarios
   ================================================================ */

.demo-panel {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 1030;  /* abaixo de modais (1000+overlay) mas acima de chat (900) */
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 0;
    animation: demoPanelIn 0.25s ease-out;
}

@keyframes demoPanelIn {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.demo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border, #333);
}

.demo-panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #e0e0e0);
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-panel-close {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
}

.demo-panel-close:hover {
    background: var(--overlay-light, rgba(255,255,255,0.08));
    color: var(--text, #e0e0e0);
}

.demo-section { padding: 12px 16px; }
.demo-section + .demo-section { border-top: 1px solid var(--border, #333); }

.demo-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #888);
    margin-bottom: 8px;
}

.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.demo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: var(--radius-xl);
    border: 1.5px solid transparent;
    background: var(--overlay-subtle, rgba(255,255,255,0.04));
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text, #e0e0e0);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

.demo-card:hover {
    background: var(--overlay-light, rgba(255,255,255,0.08));
    border-color: var(--card-color, var(--accent, #3b82f6));
}

.demo-card.selected {
    background: color-mix(in srgb, var(--card-color, #3b82f6) 15%, transparent);
    border-color: var(--card-color, var(--accent, #3b82f6));
}

.demo-card-icon { font-size: 20px; color: var(--card-color, var(--accent, #3b82f6)); display: flex; align-items: center; }
.demo-card-label { line-height: 1.2; }

.demo-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 16px; }

.demo-start-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-xl);
    background: var(--accent, #3b82f6);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
}

.demo-start-btn:hover { background: var(--accent-hover, #2563eb); }
.demo-hint { font-size: 10px; color: var(--text-muted, #888); font-style: italic; }

.demo-overlay { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1031; pointer-events: none; }

.demo-overlay-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(20, 20, 30, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: auto;
}

.demo-overlay-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; }

.demo-case-title {
    font-size: 12px; font-weight: 600; color: #e0e0e0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

.demo-risk-badge { font-size: var(--text-xs, 10px); font-weight: 700; padding: 2px 6px; border-radius: var(--radius-md); letter-spacing: 0.05em; white-space: nowrap; }

.demo-overlay-center { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; min-width: 0; }

.demo-nav-btn {
    width: 32px; height: 32px; border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #e0e0e0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}

.demo-nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
.demo-nav-btn:disabled { cursor: default; }

.demo-step-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.demo-step-title { font-size: 12px; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

.demo-progress-bar { width: 80px; height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.demo-progress-fill { height: 100%; background: var(--accent, #3b82f6); border-radius: var(--radius-sm); transition: width 0.3s ease; }
.demo-step-counter { font-size: 11px; color: #888; white-space: nowrap; font-variant-numeric: tabular-nums; }

.demo-overlay-right { flex-shrink: 0; }

.demo-exit-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: var(--radius-lg);
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}

.demo-exit-btn:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); }

@media (max-width: 600px) {
    .demo-panel { width: calc(100vw - 32px); right: 16px; bottom: 72px; }
    .demo-case-title { max-width: 100px; }
    .demo-step-title { max-width: 80px; }
    .demo-overlay-bar { padding: 6px 10px; gap: 6px; }
}

/* ==== STORYBOARD — Action Bar + Timeline (constellation tab) ==== */

/* --- Statusbar base --- */

#statusbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-size: 11px;
    color: var(--text-secondary, #aaa);
    background: var(--window-dark-3, #111);
    border-top: 1px solid var(--border, #333);
    overflow: hidden;
}
#statusbar .status-separator {
    flex: 1;
}
.status-action {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.55);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(8, 13, 23, 0.92));
    color: #cbd5e1;
}
.status-action:hover {
    border-color: rgba(56, 189, 248, 0.68);
    color: #e2e8f0;
}

/* --- Storyboard container (dentro do constellation view) --- */

.storyboard {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 12px;
    width: 100%;
    background: var(--bottom-bg, transparent);
}
.storyboard.visible {
    display: flex;
}

/* --- Empty state --- */

.sb-empty-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    color: var(--text-muted, #888);
    font-size: 12px;
}

.sb-empty-msg {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Action Bar --- */

.sb-action-bar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
}
.sb-action-bar::-webkit-scrollbar { display: none; }

.sb-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    min-width: 80px;
    border-radius: var(--radius-xl);
    background: var(--bg-primary, #12121f);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-user-select: none;
    user-select: none;
}
.sb-card:hover {
    background: var(--bg-hover, #222244);
    transform: translateY(-1px);
}
.sb-card.active {
    border-color: currentColor;
    background: var(--bg-active, #1e1e3a);
}

/* --- Card thumbnail --- */

.sb-card-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.sb-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border, #444);
}

.sb-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sb-card-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary, #e0e0e0);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-badge {
    font-size: var(--text-xs, 10px);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    background: var(--bg-tertiary, #333);
    color: var(--text-secondary, #aaa);
    width: fit-content;
}

/* --- Timeline --- */

.sb-timeline {
    padding: 4px 0;
}

.sb-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--bg-primary, #12121f);
    color: var(--text-primary, #e0e0e0);
    cursor: pointer;
    transition: background 0.15s;
}
.sb-btn:hover {
    background: var(--bg-hover, #222244);
}
.sb-btn.active {
    color: var(--accent, #3b82f6);
}

.sb-speed {
    width: auto;
    padding: 0 8px;
    font-size: var(--text-sm, 12px);
    font-weight: 600;
    font-family: inherit;
}

.sb-time {
    font-size: var(--text-sm, 12px);
    color: var(--text-secondary, #aaa);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 70px;
}

/* --- Scrubber --- */

.sb-scrubber-wrap {
    flex: 1;
    min-width: 120px;
    height: 28px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 4px;
}
.sb-scrubber-track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary, #333);
}

.sb-scrubber-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--accent, #3b82f6);
    pointer-events: none;
}

.sb-scrubber-thumb {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent, #3b82f6);
    border: 2px solid var(--bg-secondary, #1a1a2e);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.1s;
}
.sb-scrubber-thumb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.sb-scrubber-wrap:hover .sb-scrubber-thumb {
    transform: translate(-50%, -50%) scale(1.3);
}

/* --- Lanes (raias) --- */

.sb-tracks-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
}

.sb-cursor-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent, #3b82f6);
    opacity: 0.7;
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 4;
}

.sb-lane-row {
    display: flex;
    align-items: center;
    height: 26px;
    gap: 0;
}

.sb-lane-label {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    width: 78px;
    min-width: 78px;
    padding: 0 4px 0 6px;
    font-size: 10px;
    color: #8a8a9a;
    overflow: hidden;
}

.sb-lane-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.sb-lane-name:hover {
    color: #c8c8d8;
}

.sb-lane-del-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    padding: 0 1px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.sb-lane-row:hover .sb-lane-del-btn {
    opacity: 1;
}

.sb-lane-del-btn:hover {
    color: #ef4444;
}

.sb-lane-track {
    position: relative;
    flex: 1;
    height: 100%;
    background: var(--bg-tertiary, #1e1e2e);
    border-radius: 3px;
    overflow: visible;
}

.sb-lane-track .sb-scrubber-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(59, 130, 246, 0.15);
    pointer-events: none;
    border-radius: 3px 0 0 3px;
}

.sb-lane-add-row {
    display: flex;
    justify-content: flex-start;
    padding: 2px 0 0 78px;
}

.sb-lane-add-btn {
    background: none;
    border: 1px dashed #444;
    color: #666;
    cursor: pointer;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 3px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.sb-lane-add-btn:hover {
    color: #aaa;
    border-color: #666;
}

.sb-lane-rename-input {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--accent, #3b82f6);
    color: var(--text-primary, #e0e0e0);
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    width: 62px;
    outline: none;
}

.sb-scrubber-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* --- Keyframe markers --- */

.sb-kf-marker {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-sm);
    transform: translate(-50%, -50%) rotate(45deg);
    cursor: pointer;
    transition: transform 0.15s;
    z-index: 1;
}
.sb-kf-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.sb-kf-marker:hover {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
    z-index: 2;
}
.sb-kf-marker.active {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
    box-shadow: 0 0 6px currentColor;
}

/* --- Card "+" add-to-timeline button --- */

.sb-card-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
}
.sb-card:hover .sb-card-add { opacity: 1; }
.sb-card-add:hover {
    background: var(--accent, #3b82f6);
    color: #fff;
}

/* --- Keyframe delete button --- */

.sb-kf-delete {
    position: absolute;
    top: -22px;
    right: -22px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--error, #b84444);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    transform: rotate(-45deg);
    z-index: 3;
    padding: 0;
}
.sb-kf-marker:hover .sb-kf-delete,
.sb-kf-marker:focus-visible .sb-kf-delete {
    opacity: 1;
    pointer-events: auto;
}

/* --- Keyframe edit popover --- */

.sb-kf-popover {
    position: fixed;
    z-index: 300;
    min-width: 200px;
    background: var(--bg-primary, #12121f);
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 10px;
    font-size: var(--text-sm, 12px);
    color: var(--text-primary, #e0e0e0);
}
.sb-kf-popover-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: var(--text-sm, 12px);
}
.sb-kf-popover-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    color: var(--text-secondary, #aaa);
    font-size: var(--text-xs, 11px);
}
.sb-kf-popover-field input,
.sb-kf-popover-field select {
    padding: 3px 6px;
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-md);
    background: var(--bg-hover, #222244);
    color: var(--text-primary, #e0e0e0);
    font-size: var(--text-sm, 12px);
}
.sb-kf-popover-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* --- Video bot inline (dentro do storyboard) --- */

.sb-videobot {
    padding: 6px 8px;
}
.sb-videobot-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-videobot-prompt {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-md);
    background: var(--bg-hover, #222244);
    color: var(--text-primary, #e0e0e0);
    font-size: var(--text-sm, 12px);
    font-family: inherit;
    resize: none;
    line-height: 1.3;
}
.sb-videobot-prompt::placeholder {
    color: var(--text-secondary, #aaa);
    font-size: var(--text-xs, 11px);
}
.sb-videobot-select {
    padding: 4px 6px;
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-md);
    background: var(--bg-hover, #222244);
    color: var(--text-primary, #e0e0e0);
    font-size: var(--text-xs, 11px);
    cursor: pointer;
    flex-shrink: 0;
}
.sb-videobot-gen {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px !important;
    background: #2563eb !important;
    color: #fff !important;
    border-radius: var(--radius-md);
    font-size: var(--text-sm, 12px);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
}
.sb-videobot-gen:hover {
    filter: brightness(1.15);
}
.sb-videobot-meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-secondary, #aaa);
    padding: 2px 8px 0 28px;
}
.sb-videobot-msg {
    font-size: var(--text-sm, 12px);
    color: var(--text-secondary, #aaa);
    font-style: italic;
}
.sb-videobot-progress-wrap {
    flex: 1;
    min-width: 0;
}
.sb-videobot-status {
    font-size: var(--text-xs, 11px);
    color: var(--text-secondary, #aaa);
    margin-top: 2px;
}
.sb-video-progress {
    height: 4px;
    background: var(--bg-hover, #222244);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.sb-video-progress-fill {
    height: 100%;
    background: var(--accent, #3b82f6);
    border-radius: var(--radius-sm);
    transition: width 0.3s;
    width: 0;
}
.sb-video-btn.active {
    color: var(--accent, #3b82f6);
}

/* --- Responsive --- */

@media (max-width: 600px) {
    .storyboard {
        max-width: 100vw;
        border-radius: 0;
        padding: 6px 8px;
    }
    .sb-card {
        min-width: 60px;
        padding: 4px 8px;
    }
    .sb-card-name { font-size: 10px; max-width: 60px; }
    .sb-card-thumb { width: 28px; height: 28px; }
    .sb-time { display: none; }
    .sb-card-add { opacity: 1; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
}

/* ================================================================
   FAMILY MODULE PICKER — Popover de selecao de sub-modulos
   ================================================================ */

.fm-picker {
    position: fixed;
    z-index: 310;
    min-width: 200px;
    max-width: 280px;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.fm-picker.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.fm-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--neutral-700);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}
.fm-picker__item:hover {
    background: var(--overlay-subtle);
    color: var(--neutral-900);
}
.fm-picker__item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ================================================================
   FAMILY MODULE MODAL — Container para sub-modulo montado
   ================================================================ */

.fm-modal__container {
    background: var(--neutral-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 900px;
    width: 94%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease;
    display: flex;
    flex-direction: column;
}
.fm-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-200);
    flex-shrink: 0;
}
.fm-modal__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-modal__close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--neutral-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fm-modal__close:hover {
    background: var(--overlay-subtle);
    color: var(--neutral-800);
}
.fm-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 200px;
}

/* ================================================================
   PIPELINE AUTOMATION — Estilos do módulo de pipelines
   ================================================================ */

/* Modal extra-large para o editor */
.modal-xlarge {
    max-width: 900px;
    width: 95vw;
    max-height: 90vh;
}

/* Botao fechar (X) — classe generica usada por multiplos modais */
.modal-close-btn {
    background: none;
    border: none;
    color: var(--neutral-400, #888);
    font-size: 1.3rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color 0.15s, background 0.15s;
}
.modal-close-btn:hover {
    color: var(--text-primary, #e0e0e0);
    background: var(--neutral-700, rgba(255,255,255,0.07));
}

/* --- Constants styles moved to constants-modal.css --- */

/* ================================================================
   CALCULATOR POST-PROCESSING SECTION
   ================================================================ */

.calculator-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-400, #888);
    margin: 10px 0 6px;
}

.calculator-postprocessing {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.07));
}

.calculator-pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

/* Botao "+ Aplicar constante" */
.calculator-pp-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(79, 195, 247, 0.1);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: var(--radius-md);
    color: var(--accent, #4fc3f7);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.calculator-pp-add-btn:hover {
    background: rgba(79, 195, 247, 0.18);
    border-color: rgba(79, 195, 247, 0.5);
}

/* Linha de pós-processamento */
.calculator-pp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 5px;
    padding: 5px 8px;
}

/* Selector de operação (×, ÷, +, −) */
.calculator-pp-op {
    flex-shrink: 0;
    width: 110px;
    padding: 4px 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary, #e0e0e0);
    font-size: 0.8rem;
    cursor: pointer;
}
.calculator-pp-op:focus { outline: none; border-color: var(--accent, #4fc3f7); }

/* Selector de constante */
.calculator-pp-const {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary, #e0e0e0);
    font-size: 0.8rem;
    cursor: pointer;
}
.calculator-pp-const:focus { outline: none; border-color: var(--accent, #4fc3f7); }

/* Label do símbolo da constante selecionada */
.calculator-pp-const-label {
    flex-shrink: 0;
    padding: 2px 7px;
    background: rgba(79, 195, 247, 0.12);
    color: #c8e6f5;
    border: 1px solid rgba(79, 195, 247, 0.25);
    border-radius: 3px;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
}

/* Botão remover linha */
.calculator-pp-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--neutral-400, #888);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.calculator-pp-remove:hover {
    color: var(--danger, #ef5350);
    border-color: var(--danger, #ef5350);
}

/* Badge de resultado pós-processado no valor da métrica */
.calculator-pp-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.7rem;
    background: rgba(129, 199, 132, 0.15);
    color: var(--success, #81c784);
    border-radius: 3px;
    font-family: var(--font-mono, monospace);
    margin-left: 5px;
    vertical-align: middle;
}

/* Hint quando não há constantes */
.calculator-pp-hint {
    font-size: 0.75rem;
    color: var(--neutral-400, #888);
    padding: 4px 0 6px;
}
.calculator-pp-hint a {
    color: var(--accent, #4fc3f7);
    text-decoration: none;
}
.calculator-pp-hint a:hover { text-decoration: underline; }

/* Manager — lista vazia */
.pipeline-empty {
    padding: 32px;
    text-align: center;
    color: var(--neutral-400);
    font-style: italic;
}

/* Pipeline tab action bar */
.pipeline-tab-actions {
    display: flex;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

/* Pipeline card */
.pipeline-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 10px;
    background: var(--surface-1);
    transition: box-shadow 0.15s;
}
.pipeline-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.pipeline-card-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.pipeline-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pipeline-card-meta {
    font-size: 0.75rem;
    color: var(--neutral-400);
    flex-shrink: 0;
}
.pipeline-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.pipeline-card-actions button {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background 0.12s;
}
.pipeline-card-actions button:hover { background: var(--overlay-subtle); }
.pipeline-card-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-pipeline-delete:hover { background: var(--danger-subtle) !important; color: var(--danger) !important; }

/* Run progress */
.pipeline-run-progress { margin: 4px 0; }
.pipeline-run-status {
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.8rem;
    background: var(--surface-2);
}
.status-running  { border-left: 3px solid var(--accent-primary); }
.status-completed { border-left: 3px solid var(--success); }
.status-failed   { border-left: 3px solid var(--danger); }
.status-aborted  { border-left: 3px solid var(--neutral-400); }
.pipeline-log-scroll {
    max-height: 100px;
    overflow-y: auto;
    margin-top: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
}
.pipeline-log-entry { padding: 1px 0; }
.log-ok      { color: var(--success); }
.log-fail    { color: var(--danger); }
.log-running { color: var(--accent-primary); }
.btn-pipeline-abort {
    float: right;
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--danger-subtle);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Canvas bpmn-js */
#bpmn-canvas {
    position: relative;
    overflow: hidden;
}
.pipeline-canvas-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--neutral-400);
    font-style: italic;
}
.pipeline-bpmn-license-note {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.58rem;
    color: var(--text-secondary, #414f59);
    opacity: 0.4;
    pointer-events: none;
    z-index: 5;
    line-height: 1;
}

/* Editor linear */
.pipeline-linear-notice {
    background: var(--warning-subtle);
    color: var(--warning);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.78rem;
    margin-bottom: 8px;
}
.pipeline-node-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--neutral-400);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    background: var(--surface-1);
}
/* Indicadores visuais por tipo de nó — borda esquerda colorida */
.pipeline-node-card--trigger  { border-left-color: #22c55e; }
.pipeline-node-card--action   { border-left-color: #3b82f6; }
.pipeline-node-card--condition { border-left-color: #f59e0b; }
.pipeline-node-card--delay    { border-left-color: #a855f7; }
.pipeline-node-card--api_call { border-left-color: #06b6d4; }
.pipeline-node-card--end      { border-left-color: var(--neutral-300); opacity: 0.7; }
/* Badge read-only para nó End */
.pipeline-node-type-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    white-space: nowrap;
}
.pipeline-node-badge--end {
    background: var(--surface-1);
    color: var(--text-muted, var(--neutral-400));
}
.pipeline-node-label-readonly {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 3px 8px;
    font-style: italic;
}
.pipeline-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
.pipeline-node-type-select {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    color: var(--text-primary);
}
.pipeline-node-label {
    flex: 1;
    font-size: 0.85rem;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-primary);
}
.pipeline-node-btns {
    display: flex;
    gap: 4px;
}
.pipeline-node-btns button {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-primary);
}
.pipeline-node-config-wrap {
    padding: 0 12px 8px;
    font-size: 0.8rem;
}
.pipeline-node-config-wrap summary {
    cursor: pointer;
    color: var(--neutral-400);
    font-size: 0.75rem;
    user-select: none;
}
.pipeline-node-config-wrap label {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
}
.pipeline-node-config-wrap input,
.pipeline-node-config-wrap select,
.pipeline-node-config-wrap textarea {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.8rem;
    box-sizing: border-box;
}
.pipeline-add-between {
    text-align: center;
    color: var(--neutral-300);
    font-size: 1rem;
    line-height: 1;
    cursor: default;
}
.btn-add-node {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.85rem;
    text-align: center;
}
.btn-add-node:hover { background: var(--overlay-subtle); }

/* Modal header name input */
.pipeline-editor-name-input {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* Modal header actions */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================================================================
   PIPELINE PROPERTIES PANEL — painel lateral de propriedades BPMN
   ================================================================ */
/* Editor body dinâmico — ocupa toda a altura disponível no modal */
.pipeline-editor-body {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    height: calc(90vh - 130px);
    min-height: 340px;
}
.pipeline-bpmn-canvas {
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* Sempre fundo claro — canvas BPMN é equivalente a papel branco */
    background: #f8f9fa;
    overflow: hidden;
    position: relative;
}
/* Garantir fundo claro dentro do bpmn-js independente do tema */
.pipeline-bpmn-canvas .bjs-container,
.pipeline-bpmn-canvas .djs-container svg {
    background: #f8f9fa;
}
.pipeline-props-panel {
    width: 270px;
    min-width: 240px;
    flex-direction: column;
    border-left: 1px solid var(--border-color, rgba(0,0,0,0.12));
    background: var(--surface-1, #f9fbfc);
    height: 100%;
    overflow-y: auto;
    font-size: 0.82rem;
}
.pipeline-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.12));
    background: var(--surface-2, #f1f5f6);
}
.pipeline-props-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary, #1b252e);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pipeline-props-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #414f59);
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 2px);
}
.pipeline-props-close:hover { background: var(--overlay-light, rgba(0,0,0,0.08)); }
.pipeline-props-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.props-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.props-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary, #414f59);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.props-input {
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--border-color, rgba(0,0,0,0.15));
    border-radius: var(--radius-sm, 2px);
    background: var(--surface-2, #f9fbfc);
    color: var(--text-primary, #1b252e);
    width: 100%;
    box-sizing: border-box;
}
.props-input:focus {
    outline: none;
    border-color: var(--primary-500, #3d6b7a);
    box-shadow: 0 0 0 2px rgba(61,107,122,0.15);
}
.props-textarea {
    resize: vertical;
    font-family: monospace;
    min-height: 60px;
}
.props-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
}
/* Cores claras (Tailwind *-300) — legibilidade em fundo escuro do painel */
.props-type-trigger   { background: rgba(34,197,94,0.20);   color: #86efac; }
.props-type-action    { background: rgba(96,165,250,0.20);  color: #93c5fd; }
.props-type-condition { background: rgba(251,191,36,0.20);  color: #fcd34d; }
.props-type-delay     { background: rgba(196,181,253,0.20); color: #c4b5fd; }
.props-type-api_call  { background: rgba(34,211,238,0.20);  color: #67e8f9; }
.props-type-end       { background: rgba(148,163,184,0.20); color: #cbd5e1; }
.props-note {
    font-size: 0.78rem;
    color: var(--text-secondary, #414f59);
    font-style: italic;
    margin: 0;
}
/* KV Editor — editor visual de pares chave-valor */
.kv-editor {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kv-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.kv-key, .kv-value {
    flex: 1;
    padding: 3px 6px;
    font-size: 0.78rem;
    background: var(--surface-2, #f1f5f6);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: var(--radius-sm, 2px);
    color: var(--text-primary, #1b252e);
    min-width: 0;
}
.kv-key { flex: 0 0 38%; }
.kv-remove {
    background: transparent;
    border: none;
    color: var(--text-secondary, #414f59);
    cursor: pointer;
    padding: 1px 5px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.kv-remove:hover { background: var(--overlay-light, rgba(0,0,0,0.08)); color: #c0392b; }
.kv-add {
    align-self: flex-start;
    font-size: 0.72rem;
    padding: 2px 8px;
    background: var(--surface-2, #f1f5f6);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: var(--radius-sm, 2px);
    cursor: pointer;
    color: var(--text-secondary, #414f59);
    margin-top: 2px;
}
.kv-add:hover { background: var(--overlay-light, rgba(0,0,0,0.06)); }
/* Hint de parâmetros da ação */
.props-action-hint {
    font-size: 0.72rem;
    color: var(--text-secondary, #414f59);
    padding: 3px 6px;
    background: var(--surface-2, #f1f5f6);
    border-radius: var(--radius-sm, 2px);
    margin-top: 2px;
    font-style: italic;
}
/* Filtro de busca de ações */
.props-action-search {
    font-size: 0.78rem;
    padding: 3px 8px;
    border: 1px solid var(--border-color, rgba(0,0,0,0.15));
    border-radius: var(--radius-sm, 2px);
    background: var(--surface-2, #f1f5f6);
    color: var(--text-primary, #1b252e);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
}
.props-action-search::placeholder { color: var(--text-secondary, #414f59); opacity: 0.7; }

/* ─── Custom Action Picker ─── */
.action-picker {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color, rgba(0,0,0,0.15));
    border-radius: 3px;
    background: var(--bg-panel, #263340);
    font-size: 0.8rem;
}
.action-cat-group[hidden] { display: none; }
.action-cat-header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 3px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cat-color);
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 1;
}
.action-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cat-color);
    flex-shrink: 0;
}
.action-option {
    padding: 4px 10px 4px 18px;
    cursor: pointer;
    color: var(--text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.action-option[hidden]  { display: none; }
.action-option:hover    { background: rgba(255,255,255,0.06); }
.action-option.selected {
    background: rgba(61,107,122,0.25);
    color: #67e8f9;
    font-weight: 600;
}
/* ─── Guided Params ─── */
.kv-row-guided {
    background: rgba(61,107,122,0.08);
    border-radius: var(--radius-sm);
    padding: 0 4px;
}
.kv-key-label {
    flex: 0 0 38%;
    font-size: 0.74rem;
    font-weight: 600;
    color: #67e8f9;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
}

/* ================================================================
   SYMBOLOGY PROFILES MODAL
   Estilos escopados em .sym-*
   ================================================================ */

.sym-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sym-dialog {
    background: var(--panel-bg, #1a1d24);
    border: 1px solid var(--border-color, #2d3144);
    border-radius: var(--radius-xl);
    width: min(880px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    color: var(--text-color, #c9d1d9);
    font-size: 13px;
    overflow: hidden;
}

.sym-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #2d3144);
    flex-shrink: 0;
}

.sym-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, #c9d1d9);
}

.sym-close-btn {
    background: none;
    border: none;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    line-height: 1;
}
.sym-close-btn:hover { background: var(--hover-bg, #30363d); color: var(--text-color, #c9d1d9); }

.sym-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.sym-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color, #2d3144);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sym-profile-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}

.sym-profile-empty {
    padding: 12px;
    color: var(--text-muted, #8b949e);
    font-size: 12px;
}

.sym-profile-item {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: var(--radius-md);
    margin: 1px 4px;
    gap: 4px;
}
.sym-profile-item:hover { background: var(--hover-bg, #21262d); }
.sym-profile-item--selected { background: var(--selected-bg, #1f3a5f) !important; }
.sym-profile-item--active .sym-profile-name::after {
    content: " \25C6";
    color: #4fc3f7;
    font-size: var(--text-xs, 10px);
}

.sym-profile-name {
    background: none;
    border: none;
    color: var(--text-color, #c9d1d9);
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    flex: 1;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-profile-actions { display: flex; gap: 2px; flex-shrink: 0; }

.sym-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}
.sym-icon-btn:hover { background: var(--hover-bg, #30363d); color: var(--text-color, #c9d1d9); }

.sym-new-profile-btn {
    margin: 6px;
    padding: 6px;
    background: var(--accent-bg, #1f3a5f);
    border: 1px solid var(--accent-border, #2d5a8e);
    border-radius: var(--radius-md);
    color: #4fc3f7;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    flex-shrink: 0;
}
.sym-new-profile-btn:hover { background: #1a4a7a; }

.sym-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    min-width: 0;
}

.sym-empty-state {
    color: var(--text-muted, #8b949e);
    padding: 24px;
    text-align: center;
}

.sym-editor { display: flex; flex-direction: column; gap: 8px; }
.sym-editor-namerow { margin-bottom: 4px; }

.sym-name-input {
    width: 100%;
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border-color, #30363d);
    border-radius: var(--radius-md);
    color: var(--text-color, #c9d1d9);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 10px;
    box-sizing: border-box;
}
.sym-name-input:focus { outline: none; border-color: #4fc3f7; }

.sym-tab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border-color, #2d3144);
    flex-shrink: 0;
}

.sym-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    font-size: 12px;
    padding: 6px 10px;
    margin-bottom: -1px;
}
.sym-tab:hover { color: var(--text-color, #c9d1d9); }
.sym-tab--active { border-bottom-color: #4fc3f7; color: #4fc3f7; font-weight: 600; }

.sym-tab-content { padding-top: 8px; overflow-y: auto; }

.sym-section { display: flex; flex-direction: column; gap: 6px; }

.sym-help {
    color: var(--text-muted, #8b949e);
    font-size: 11px;
    margin: 0 0 4px;
}

.sym-section-heading {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #8b949e);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 8px 0 2px;
    border-bottom: 1px solid var(--border-color, #2d3144);
    padding-bottom: 2px;
}

.sym-style-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(44,52,68,0.5);
}

.sym-row-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-color, #c9d1d9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-row-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.sym-inline-label { display: flex; align-items: center; gap: 3px; font-size: 11px; cursor: pointer; }

.sym-scale-input {
    width: 64px;
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 3px;
    color: var(--text-color, #c9d1d9);
    font-size: 11px;
    padding: 2px 4px;
}

.sym-form-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }

.sym-form-label { width: 150px; flex-shrink: 0; font-size: 12px; color: var(--text-color, #c9d1d9); }

.sym-number-input {
    width: 72px;
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 3px;
    color: var(--text-color, #c9d1d9);
    font-size: 12px;
    padding: 3px 6px;
}

.sym-range-wrap { display: flex; align-items: center; gap: 8px; }
.sym-range-val { font-size: 11px; color: var(--text-muted, #8b949e); min-width: 30px; }

.sym-rule-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 0;
    border-bottom: 1px solid rgba(44,52,68,0.5);
}

.sym-rule-name { width: 110px; }
.sym-rule-family { width: 90px; }
.sym-rule-param { width: 100px; }
.sym-rule-op { width: 50px; }
.sym-rule-val { width: 70px; }

.sym-rule-name, .sym-rule-family, .sym-rule-param, .sym-rule-val, .sym-rule-op {
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 3px;
    color: var(--text-color, #c9d1d9);
    font-size: 11px;
    padding: 2px 5px;
}

.sym-add-rule-btn {
    margin-top: 8px;
    padding: 5px 10px;
    background: transparent;
    border: 1px dashed var(--border-color, #30363d);
    border-radius: var(--radius-md);
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    font-size: 12px;
    align-self: flex-start;
}
.sym-add-rule-btn:hover { border-color: #4fc3f7; color: #4fc3f7; }

.sym-surface-group, .sym-label-group {
    background: var(--panel-section-bg, #161b22);
    border: 1px solid var(--border-color, #2d3144);
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.sym-bands { margin-top: 4px; }
.sym-bands-list { display: flex; flex-direction: column; gap: 3px; }

.sym-band-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }

.sym-band-max {
    width: 80px;
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 3px;
    color: var(--text-color, #c9d1d9);
    font-size: 11px;
    padding: 2px 5px;
}

.sym-band-label {
    flex: 1;
    background: var(--input-bg, #0d1117);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 3px;
    color: var(--text-color, #c9d1d9);
    font-size: 11px;
    padding: 2px 5px;
}

.sym-add-band-btn {
    margin-top: 4px;
    padding: 3px 8px;
    background: transparent;
    border: 1px dashed var(--border-color, #30363d);
    border-radius: 3px;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    font-size: 11px;
}
.sym-add-band-btn:hover { border-color: #4fc3f7; color: #4fc3f7; }

.sym-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color, #2d3144);
    flex-shrink: 0;
}

.sym-btn {
    padding: 6px 16px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}
.sym-btn--primary { background: #1a6fa8; color: #fff; border-color: #1a6fa8; }
.sym-btn--primary:hover { background: #1e87cc; }
.sym-btn--secondary { background: transparent; color: #4fc3f7; border-color: #4fc3f7; }
.sym-btn--secondary:hover { background: rgba(79,195,247,0.08); }
.sym-btn--ghost { background: transparent; color: var(--text-muted, #8b949e); border-color: var(--border-color, #30363d); }
.sym-btn--ghost:hover { color: var(--text-color, #c9d1d9); }



/* ================================================================
   COMMAND PALETTE — Pesquisa Global de Comandos
   ================================================================ */

.command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: none;
}

.command-palette-overlay.open {
    opacity: 1;
    display: block !important;
}

.command-palette-modal {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    width: 560px;
    max-width: 90vw;
    max-height: 60vh;
    background: var(--neutral-900, #1a1d23);
    border: 1px solid var(--neutral-700, #3d4149);
    border-radius: var(--radius-lg, 10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.command-palette-modal.open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    display: flex !important;
}

.command-palette-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-800, #2d3144);
    background: var(--neutral-900, #1a1d23);
}

.command-palette-search-icon {
    color: var(--neutral-500, #6e7681);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--neutral-100, #f0f6fc);
    font-size: 14px;
    outline: none;
    padding: 4px 0;
}

.command-palette-input::placeholder {
    color: var(--neutral-600, #8b949e);
}

.command-palette-shortcut-hint {
    font-size: 11px;
    color: var(--neutral-600, #8b949e);
    background: var(--neutral-800, #2d3144);
    padding: 2px 6px;
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-mono, monospace);
    flex-shrink: 0;
}

.command-palette-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    max-height: 320px;
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background-color 0.1s ease;
    color: var(--neutral-200, #c9d1d9);
}

.command-palette-item:hover,
.command-palette-item.selected {
    background: var(--neutral-800, #2d3144);
}

.command-palette-item-icon {
    color: var(--neutral-500, #6e7681);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.command-palette-item-label {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item-category {
    font-size: 11px;
    color: var(--neutral-600, #8b949e);
    background: var(--neutral-800, #2d3144);
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    flex-shrink: 0;
}

.command-palette-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--neutral-600, #8b949e);
    font-size: 13px;
}

.command-palette-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--neutral-800, #2d3144);
    background: var(--neutral-900, #1a1d23);
    font-size: 11px;
    color: var(--neutral-600, #8b949e);
    text-align: center;
}

/* Scrollbar personalizada */
.command-palette-list::-webkit-scrollbar {
    width: 8px;
}

.command-palette-list::-webkit-scrollbar-track {
    background: transparent;
}

.command-palette-list::-webkit-scrollbar-thumb {
    background: var(--neutral-700, #3d4149);
    border-radius: 4px;
}

.command-palette-list::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-600, #6e7681);
}

/* Responsividade mobile */
@media (max-width: 640px) {
    .command-palette-modal {
        top: 10%;
        width: 95vw;
        max-height: 70vh;
    }
    
    .command-palette-footer {
        display: none;
    }
}