/* GERADO por _deploy/gerar-pacotes.py — NAO EDITAR A MAO. */

/* ===== app.css ===== */
/* ATHENA - Estilos globais Pentagon-grade.
   Paleta corporativa preto/laranja, base limpa para que cada tela aplique seu HUD. */

:root {
    --athena-bg: #030303;
    --athena-bg-soft: #08090b;
    --athena-surface: #0c0c0e;
    --athena-line: rgba(255, 102, 0, 0.12);
    --athena-text: #f4f4f4;
    --athena-text-muted: #9aa0a6;
    --athena-orange: #ff681f;
    --athena-orange-2: #ff8a32;
    --athena-orange-3: #ffb178;
    --athena-danger: #ff3b3b;
    --athena-success: #00d27a;
    --athena-info: #16c8ff;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--athena-bg);
    color: var(--athena-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    overscroll-behavior-y: none;
}

a, .btn-link {
    color: var(--athena-orange-2);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--athena-orange-3);
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--athena-orange) 0%, var(--athena-orange-2) 100%);
    border-color: var(--athena-orange);
    transition: filter .2s ease, transform .2s ease;
}

.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.18);
    border-color: var(--athena-orange);
    outline: none;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

::selection {
    background: rgba(255, 102, 0, 0.35);
    color: #fff;
}

/* Scrollbar global discreta no tom Pentagon. */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 102, 0, 0.55), rgba(255, 102, 0, 0.25));
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 138, 50, 0.85), rgba(255, 102, 0, 0.45));
    background-clip: padding-box;
}

/* Validação Bootstrap com paleta ATHENA. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--athena-success);
}

.invalid {
    outline: 1px solid var(--athena-danger);
}

.validation-message {
    color: var(--athena-danger);
}

/* Boundary de erro do Blazor: não vaza stack. */
.blazor-error-boundary {
    background: linear-gradient(135deg, #1a0a02, #0a0a0a);
    color: #ffd1aa;
    padding: 1rem 1rem 1rem 3.7rem;
    border-left: 3px solid var(--athena-orange);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ff681f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 1.6rem;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro. A equipe ATHENA foi notificada.";
}

.darker-border-checkbox.form-check-input {
    border-color: rgba(255, 138, 50, 0.55);
}

/* Reduz movimento para usuários sensíveis. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ===== css/athena-2026.css ===== */
/* ===================================================================
   ATHENA 2026 — DESIGN SYSTEM
   Editorial · Carbon-glass · Ember palette · No-neon · WCAG AAA
   Base global. Cada tela aplica seu HUD em cima desta fundação.
   =================================================================== */

/* ─── 1. TOKENS ──────────────────────────────────────────────────── */
:root {
    /* CARBON — preto multicamada com matiz quente */
    --carbon-0: #050507;
    --carbon-1: #0a0a0e;
    --carbon-2: #101015;
    --carbon-3: #16161d;
    --carbon-4: #1c1c25;
    --carbon-5: #24242e;
    --carbon-6: #2e2e3a;
    --carbon-7: #3a3a47;

    /* EMBER — laranja maduro, sem neon */
    --ember-50:  #fff5ed;
    --ember-100: #ffe5d0;
    --ember-200: #ffc59a;
    --ember-300: #ffa566;
    --ember-400: #ff8a32;
    --ember-500: #ff681f;
    --ember-600: #ed5410;
    --ember-700: #c43e0a;
    --ember-800: #8a2b08;
    --ember-900: #4a1604;

    /* TEXTO (escuro) */
    --t-pure: #ffffff;
    --t-primary: #f4f4f6;
    --t-secondary: #b0b0ba;
    --t-tertiary: #6e6e7a;
    --t-disabled: #44444c;

    /* SEMÂNTICOS — tons maduros, sem flúor */
    --c-green: #00b87a;
    --c-green-soft: rgba(0, 184, 122, 0.12);
    --c-amber: #f5a300;
    --c-amber-soft: rgba(245, 163, 0, 0.12);
    --c-red: #e63946;
    --c-red-soft: rgba(230, 57, 70, 0.12);
    --c-blue: #4ea1ff;
    --c-blue-soft: rgba(78, 161, 255, 0.10);

    /* LINHAS / BORDAS */
    --line-1: rgba(255, 255, 255, 0.04);
    --line-2: rgba(255, 255, 255, 0.08);
    --line-3: rgba(255, 255, 255, 0.14);
    --line-ember: rgba(255, 104, 31, 0.20);
    --line-ember-strong: rgba(255, 104, 31, 0.40);

    /* SUPERFÍCIES (vidro carbon) */
    --surface-glass: rgba(20, 20, 26, 0.62);
    --surface-glass-deep: rgba(12, 12, 16, 0.78);
    --surface-elev: rgba(28, 28, 36, 0.78);

    /* RAIOS */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-pill: 999px;

    /* SOMBRAS — em camadas */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --sh-3: 0 12px 32px rgba(0, 0, 0, 0.55);
    --sh-4: 0 24px 64px rgba(0, 0, 0, 0.65);
    --sh-5: 0 40px 96px rgba(0, 0, 0, 0.72);
    --sh-glow-ember: 0 0 80px -16px rgba(255, 104, 31, 0.28);
    --sh-glow-ember-soft: 0 0 60px -20px rgba(255, 104, 31, 0.16);
    --sh-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --sh-inset-line-strong: inset 0 1px 0 rgba(255, 255, 255, 0.10);

    /* GRADIENTES SIGNATURE */
    --grad-ember:  linear-gradient(135deg, #ff8a32 0%, #ff681f 50%, #ed5410 100%);
    --grad-ember-soft: linear-gradient(135deg, rgba(255, 138, 50, 0.18), rgba(255, 104, 31, 0.10));
    --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    --grad-text-ember: linear-gradient(135deg, #ffd9b5 0%, #ff8a32 60%, #ff681f 100%);
    --grad-text-mono: linear-gradient(180deg, #ffffff 0%, #b0b0ba 100%);
    --grad-divider: linear-gradient(90deg, transparent, rgba(255, 104, 31, 0.5), transparent);

    /* TIMING + EASINGS PREMIUM */
    --t-fast: 140ms;
    --t-base: 260ms;
    --t-slow: 480ms;
    --t-slower: 720ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1.0);

    /* TIPOGRAFIA */
    --font-display: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* ESCALA TIPOGRÁFICA FLUIDA */
    --fs-xs: clamp(10px, 0.7vw, 11px);
    --fs-sm: clamp(11px, 0.8vw, 12.5px);
    --fs-base: clamp(13px, 0.95vw, 14.5px);
    --fs-md: clamp(15px, 1.1vw, 17px);
    --fs-lg: clamp(18px, 1.4vw, 22px);
    --fs-xl: clamp(24px, 2vw, 32px);
    --fs-2xl: clamp(32px, 3vw, 48px);
    --fs-3xl: clamp(44px, 5vw, 76px);
    --fs-display: clamp(56px, 8vw, 128px);

    /* SPACING (4pt grid) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
}

/* ─── 2. MODO CLARO IMPECÁVEL ────────────────────────────────────── */
.light-theme,
[data-theme="light"] {
    --carbon-0: #f7f6f1;
    --carbon-1: #f0eee8;
    --carbon-2: #e8e5dd;
    --carbon-3: #ddd9cf;
    --carbon-4: #c9c5b9;
    --carbon-5: #a39e92;
    --carbon-6: #6b675e;
    --carbon-7: #2a2820;

    --t-pure: #050507;
    --t-primary: #15151a;
    --t-secondary: #50505a;
    --t-tertiary: #82828c;
    --t-disabled: #b8b8c0;

    --line-1: rgba(0, 0, 0, 0.05);
    --line-2: rgba(0, 0, 0, 0.10);
    --line-3: rgba(0, 0, 0, 0.18);
    --line-ember: rgba(255, 104, 31, 0.30);
    --line-ember-strong: rgba(255, 104, 31, 0.50);

    --surface-glass: rgba(255, 255, 255, 0.78);
    --surface-glass-deep: rgba(255, 255, 255, 0.92);
    --surface-elev: rgba(255, 255, 255, 0.96);

    --sh-1: 0 1px 2px rgba(20, 20, 30, 0.06);
    --sh-2: 0 4px 14px rgba(20, 20, 30, 0.08);
    --sh-3: 0 12px 32px rgba(20, 20, 30, 0.10);
    --sh-4: 0 24px 56px rgba(20, 20, 30, 0.12);
    --sh-5: 0 40px 88px rgba(20, 20, 30, 0.14);
    --sh-glow-ember: 0 0 60px -16px rgba(255, 104, 31, 0.22);
    --sh-glow-ember-soft: 0 0 40px -20px rgba(255, 104, 31, 0.14);
    --sh-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --sh-inset-line-strong: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --grad-text-mono: linear-gradient(180deg, #15151a 0%, #50505a 100%);
    --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
}

/* ─── 3. RESET MODERNO + SCROLL SUAVE ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--t-primary);
    background: var(--carbon-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
    font-feature-settings: 'cv11', 'ss01', 'ss02';
}

/* ─── 4. BACKGROUND MESH GLOBAL — sem neon, profundo ─────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 70% 50% at 18% 0%,
            rgba(255, 104, 31, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 30%,
            rgba(237, 84, 16, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 110%,
            rgba(196, 62, 10, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, var(--carbon-0) 0%, var(--carbon-1) 100%);
    pointer-events: none;
}

/* Grain orgânico — adiciona textura premium */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
.light-theme body::after,
[data-theme="light"] body::after { opacity: 0.025; mix-blend-mode: multiply; }

/* ─── 5. TIPOGRAFIA E SELEÇÃO ────────────────────────────────────── */
::selection { background: rgba(255, 104, 31, 0.32); color: #fff; }
.light-theme ::selection,
[data-theme="light"] ::selection { background: rgba(255, 104, 31, 0.22); color: var(--t-primary); }

a, .btn-link {
    color: var(--ember-400);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out-expo);
}
a:hover, .btn-link:hover { color: var(--ember-300); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.05;
    color: var(--t-primary);
}

.text-display {
    font-size: var(--fs-display);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.92;
    background: var(--grad-text-mono);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-ember {
    background: var(--grad-text-ember);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember-300);
}

/* ─── 6. SCROLLBARS ELEGANTES ────────────────────────────────────── */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 104, 31, 0.55), rgba(255, 104, 31, 0.20));
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background var(--t-fast) var(--ease-out-expo);
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 138, 50, 0.95), rgba(255, 104, 31, 0.55));
    background-clip: padding-box;
}
* { scrollbar-color: rgba(255, 104, 31, 0.45) transparent; scrollbar-width: thin; }

/* ─── 7. GLASS PANELS UTILITÁRIOS ────────────────────────────────── */
.athena-glass {
    background: var(--surface-glass);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3), var(--sh-inset-line), var(--sh-glow-ember-soft);
    position: relative;
    overflow: hidden;
}
.athena-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--grad-glass);
    border-radius: inherit;
}
.athena-glass-deep {
    background: var(--surface-glass-deep);
    backdrop-filter: blur(40px) saturate(1.8);
    -webkit-backdrop-filter: blur(40px) saturate(1.8);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-4), var(--sh-inset-line);
}

/* Card 3D — perspective tilt no hover */
.athena-card-3d {
    transform-style: preserve-3d;
    transition: transform var(--t-base) var(--ease-out-expo),
                box-shadow var(--t-base) var(--ease-out-expo);
    will-change: transform;
}
.athena-card-3d:hover {
    transform: perspective(1200px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
    box-shadow: var(--sh-5), var(--sh-inset-line-strong), var(--sh-glow-ember);
}

/* ─── 8. BOTÕES PREMIUM ──────────────────────────────────────────── */
.athena-btn {
    --bg: rgba(255, 255, 255, 0.04);
    --fg: var(--t-primary);
    --bd: var(--line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0 var(--s-5);
    height: 44px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r-pill);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-out-back),
                background var(--t-base) var(--ease-out-expo),
                border-color var(--t-base) var(--ease-out-expo),
                box-shadow var(--t-base) var(--ease-out-expo),
                color var(--t-fast) var(--ease-out-expo);
    isolation: isolate;
}
.athena-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-ember);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out-expo);
    z-index: -1;
}
.athena-btn:hover {
    transform: translateY(-1px);
    border-color: var(--line-ember);
    box-shadow: var(--sh-2), var(--sh-glow-ember-soft);
}
.athena-btn:active { transform: translateY(0) scale(0.98); }

.athena-btn-primary {
    --bg: var(--grad-ember);
    --fg: #fff;
    --bd: transparent;
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.athena-btn-primary:hover {
    --bd: transparent;
    transform: translateY(-2px);
    box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.30), var(--sh-glow-ember);
    filter: brightness(1.06);
}
.athena-btn-ghost { --bg: transparent; }
.athena-btn-ghost:hover { --bg: rgba(255, 104, 31, 0.06); --fg: var(--ember-300); }

.athena-btn-sm { height: 34px; padding: 0 var(--s-4); font-size: 11px; }
.athena-btn-lg { height: 54px; padding: 0 var(--s-8); font-size: 13.5px; }

/* Shimmer sweep no hover de botão primário */
.athena-btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    transition: left var(--t-slower) var(--ease-out-expo);
}
.athena-btn-primary:hover::after { left: 130%; }

/* ─── 9. INPUTS PREMIUM ──────────────────────────────────────────── */
.athena-input {
    width: 100%;
    height: 46px;
    padding: 0 var(--s-4);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    color: var(--t-primary);
    font-family: var(--font-body);
    font-size: 13.5px;
    outline: none;
    transition: all var(--t-base) var(--ease-out-expo);
}
.athena-input::placeholder { color: var(--t-tertiary); }
.athena-input:hover { border-color: var(--line-3); }
.athena-input:focus {
    border-color: var(--ember-500);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 4px rgba(255, 104, 31, 0.14), var(--sh-glow-ember-soft);
}
.light-theme .athena-input,
[data-theme="light"] .athena-input { background: rgba(255, 255, 255, 0.7); }
.light-theme .athena-input:focus,
[data-theme="light"] .athena-input:focus { background: #fff; }

/* ─── 10. BADGES / PILLS ─────────────────────────────────────────── */
.athena-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: var(--surface-elev);
    border: 1px solid var(--line-2);
    color: var(--t-secondary);
    transition: all var(--t-base) var(--ease-out-expo);
}
.athena-pill-ember { background: rgba(255, 104, 31, 0.10); color: var(--ember-300); border-color: var(--line-ember); }
.athena-pill-success { background: var(--c-green-soft); color: var(--c-green); border-color: rgba(0, 184, 122, 0.32); }
.athena-pill-warn { background: var(--c-amber-soft); color: var(--c-amber); border-color: rgba(245, 163, 0, 0.32); }
.athena-pill-danger { background: var(--c-red-soft); color: var(--c-red); border-color: rgba(230, 57, 70, 0.32); }

.athena-pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: athenaPulseDot 2.4s var(--ease-in-out) infinite;
}
@keyframes athenaPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.25); }
}

/* ─── 11. ANIMAÇÕES SIGNATURE ────────────────────────────────────── */
@keyframes athenaFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes athenaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes athenaScaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes athenaSlideRight {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes athenaShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes athenaGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes athenaGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 104, 31, 0.0), var(--sh-2); }
    50% { box-shadow: 0 0 32px -4px rgba(255, 104, 31, 0.35), var(--sh-3); }
}
@keyframes athenaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes athenaRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes athenaScan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.athena-animate-fade-up { animation: athenaFadeUp var(--t-slow) var(--ease-out-expo) both; }
.athena-animate-scale-in { animation: athenaScaleIn var(--t-base) var(--ease-out-back) both; }
.athena-animate-slide { animation: athenaSlideRight var(--t-slow) var(--ease-out-expo) both; }
.athena-animate-pulse { animation: athenaGlowPulse 3.5s var(--ease-in-out) infinite; }
.athena-animate-float { animation: athenaFloat 5s var(--ease-in-out) infinite; }

/* Stagger por classe — até 12 elementos */
.athena-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.athena-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.athena-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.athena-stagger > *:nth-child(4) { animation-delay: 0.22s; }
.athena-stagger > *:nth-child(5) { animation-delay: 0.28s; }
.athena-stagger > *:nth-child(6) { animation-delay: 0.34s; }
.athena-stagger > *:nth-child(7) { animation-delay: 0.40s; }
.athena-stagger > *:nth-child(8) { animation-delay: 0.46s; }
.athena-stagger > *:nth-child(9) { animation-delay: 0.52s; }
.athena-stagger > *:nth-child(10) { animation-delay: 0.58s; }
.athena-stagger > *:nth-child(11) { animation-delay: 0.64s; }
.athena-stagger > *:nth-child(12) { animation-delay: 0.70s; }

/* Linha decorativa scanner */
.athena-scan-line {
    position: absolute;
    top: 0; left: 0;
    width: 30%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember-400), transparent);
    animation: athenaScan 4.5s linear infinite;
    pointer-events: none;
    opacity: 0.7;
}

/* Divisor com brilho */
.athena-divider {
    height: 1px;
    background: var(--grad-divider);
    margin: var(--s-6) 0;
    border: 0;
}

/* ─── 12. UTILITÁRIOS ────────────────────────────────────────────── */
.athena-grain { position: relative; overflow: hidden; }
.athena-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.athena-mono { font-family: var(--font-mono); }
.athena-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember-300);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.athena-eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--ember-500);
}

/* Focus visível — acessibilidade */
:focus-visible {
    outline: 2px solid var(--ember-500);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* ─── 13. BOOTSTRAP COMPATIBILITY (paleta laranja) ───────────────── */
.btn-primary {
    color: #fff;
    background: var(--grad-ember);
    border-color: var(--ember-500);
    transition: filter var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 104, 31, 0.18);
    border-color: var(--ember-500);
    outline: none;
}

/* ─── 14. VALIDAÇÃO E ESTADOS ────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--c-green); }
.invalid { outline: 1px solid var(--c-red); }
.validation-message { color: var(--c-red); font-size: 12px; margin-top: 4px; }

/* ─── 15. BLAZOR ERROR BOUNDARY (custom) ─────────────────────────── */
.blazor-error-boundary {
    background: linear-gradient(135deg, #1a0a02, #0a0a0a);
    color: #ffd1aa;
    padding: 1rem 1rem 1rem 3.7rem;
    border-left: 3px solid var(--ember-500);
    font-family: var(--font-mono);
}
.blazor-error-boundary::after {
    content: "Ocorreu um erro. A equipe ATHENA foi notificada.";
}

/* ─── 16. PREFER REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── 17. BREAKPOINTS DE RESPONSIVIDADE ──────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --r-lg: 16px;
        --r-xl: 22px;
    }
}
@media (max-width: 640px) {
    :root {
        --r-lg: 14px;
        --r-xl: 18px;
    }
    .athena-btn { height: 42px; font-size: 12px; padding: 0 var(--s-4); }
    .athena-btn-lg { height: 50px; font-size: 13px; }
}

/* ─── 18. PRINT (relatórios PDF) ─────────────────────────────────── */
@media print {
    body::before, body::after { display: none; }
    .athena-glass, .athena-glass-deep { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ===== css/athena-ds.css ===== */
/* =========================================================
   ATHENA — DESIGN SYSTEM (TOKENS)
   ---------------------------------------------------------
   Arquivo ADITIVO. Define tokens (variáveis CSS) que podem
   ser usados aos poucos para substituir cores/espaçamentos
   inline. NÃO substitui CSS existente — convive com ele.
   Para usar em produção, adicione no <head>:
       <link rel="stylesheet" href="/css/athena-ds.css" />
   ========================================================= */

:root {
    /* ── BRAND ─────────────────────────────────────── */
    --ds-brand-orange-300:  #ffa050;
    --ds-brand-orange-500:  #ff8c00;
    --ds-brand-orange-600:  #ff6600;
    --ds-brand-orange-700:  #d35500;
    --ds-brand-cyan-300:    #4dd9ff;
    --ds-brand-cyan-500:    #00d2ff;
    --ds-brand-cyan-700:    #0083b0;

    /* Gradiente característico ATHENA (cyan → laranja) — usar em borders/headers */
    --ds-gradient-brand: linear-gradient(90deg, #00d4ff 0%, #00a8e8 30%, #ff8c00 70%, #ff6600 100%);

    /* ── SEMÂNTICAS ──────────────────────────────────── */
    --ds-success-300:       #4cffaa;
    --ds-success-500:       #00e676;
    --ds-success-700:       #00a04f;
    --ds-warning-300:       #ffd166;
    --ds-warning-500:       #ffb300;
    --ds-warning-700:       #b67900;
    --ds-danger-300:        #ff6666;
    --ds-danger-500:        #ff3344;
    --ds-danger-700:        #cc0011;
    --ds-info-300:          #5dade2;
    --ds-info-500:          #2196f3;
    --ds-info-700:          #0d47a1;

    /* ── NEUTROS (dark theme) ────────────────────────── */
    --ds-bg-page:           #0a0a0a;
    --ds-bg-surface:        rgba(255,255,255,0.025);
    --ds-bg-surface-2:      rgba(255,255,255,0.05);
    --ds-bg-elevated:       rgba(20,20,25,0.97);
    --ds-bg-input:          rgba(0,0,0,0.35);
    --ds-bg-input-focus:    rgba(0,0,0,0.50);

    --ds-border-subtle:     rgba(255,255,255,0.06);
    --ds-border-default:    rgba(255,255,255,0.10);
    --ds-border-strong:     rgba(255,255,255,0.18);
    --ds-border-accent:     rgba(255,102,0,0.55);

    --ds-text-primary:      #ffffff;
    --ds-text-secondary:    rgba(255,255,255,0.78);
    --ds-text-muted:        rgba(255,255,255,0.55);
    --ds-text-faint:        rgba(255,255,255,0.35);

    /* ── ESCALA DE ESPAÇAMENTO (8px-based) ───────────── */
    --ds-space-1:    4px;
    --ds-space-2:    8px;
    --ds-space-3:    12px;
    --ds-space-4:    16px;
    --ds-space-5:    20px;
    --ds-space-6:    24px;
    --ds-space-8:    32px;
    --ds-space-10:   40px;

    /* ── TIPOGRAFIA ──────────────────────────────────── */
    --ds-font-display: 'Inter', system-ui, sans-serif;
    --ds-font-mono:    'JetBrains Mono', 'Courier New', monospace;

    --ds-text-xs:    9px;
    --ds-text-sm:    11px;
    --ds-text-base:  13px;
    --ds-text-md:    15px;
    --ds-text-lg:    18px;
    --ds-text-xl:    22px;
    --ds-text-2xl:   28px;
    --ds-text-3xl:   36px;

    /* ── RAIOS ───────────────────────────────────────── */
    --ds-radius-sm:  6px;
    --ds-radius-md:  10px;
    --ds-radius-lg:  14px;
    --ds-radius-xl:  18px;
    --ds-radius-pill: 999px;

    /* ── SOMBRAS ─────────────────────────────────────── */
    --ds-shadow-1: 0 1px 3px rgba(0,0,0,0.06);
    --ds-shadow-2: 0 4px 12px rgba(0,0,0,0.10);
    --ds-shadow-3: 0 12px 28px rgba(0,0,0,0.18);
    --ds-shadow-4: 0 24px 64px rgba(0,0,0,0.32);
    --ds-shadow-5: 0 32px 80px rgba(0,0,0,0.70);
    --ds-glow-accent: 0 0 24px rgba(255,102,0,0.35);
    --ds-glow-cyan:   0 0 24px rgba(0,210,255,0.30);

    /* ── EASING ──────────────────────────────────────── */
    --ds-ease-out:    cubic-bezier(.2,.8,.2,1);
    --ds-ease-in-out: cubic-bezier(.6,.0,.2,1);
    --ds-dur-fast:    0.12s;
    --ds-dur-base:    0.18s;
    --ds-dur-slow:    0.32s;

    /* ── Z-INDEX (escala definida) ───────────────────── */
    --ds-z-base:      1;
    --ds-z-dropdown:  10;
    --ds-z-sticky:    20;
    --ds-z-overlay:   40;
    --ds-z-modal:     50;
    --ds-z-toast:     60;
    --ds-z-tooltip:   70;
}

/* Overrides leves de tema claro (acessibilidade) */
.light-theme {
    --ds-bg-page:           #f4f6fa;
    --ds-bg-surface:        rgba(0,0,0,0.025);
    --ds-bg-surface-2:      rgba(0,0,0,0.05);
    --ds-bg-elevated:       #ffffff;
    --ds-bg-input:          rgba(0,0,0,0.04);
    --ds-bg-input-focus:    rgba(0,0,0,0.06);
    --ds-border-subtle:     rgba(0,0,0,0.05);
    --ds-border-default:    rgba(0,0,0,0.08);
    --ds-border-strong:     rgba(0,0,0,0.15);
    --ds-text-primary:      #111827;
    --ds-text-secondary:    rgba(0,0,0,0.72);
    --ds-text-muted:        rgba(0,0,0,0.55);
    --ds-text-faint:        rgba(0,0,0,0.30);
}

/* =========================================================
   COMPONENTES BASE — OPT-IN
   ---------------------------------------------------------
   Adicione a classe ds-card / ds-btn etc. em novos componentes
   pra usar o sistema. Componentes legados não são afetados.
   ========================================================= */

.ds-card {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-xl);
    padding: var(--ds-space-6);
    box-shadow: var(--ds-shadow-3);
    position: relative;
    overflow: hidden;
}

.ds-card-branded::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ds-gradient-brand);
    pointer-events: none;
}

.ds-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: var(--ds-font-display);
    font-size: var(--ds-text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--ds-space-3) var(--ds-space-5);
    border-radius: var(--ds-radius-md);
    transition: all var(--ds-dur-base) var(--ds-ease-out);
}

.ds-btn-primary {
    background: linear-gradient(135deg, var(--ds-brand-orange-500), var(--ds-brand-orange-600));
    color: #fff;
    box-shadow: 0 4px 14px rgba(255,102,0,0.30);
}
.ds-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255,102,0,0.45);
    filter: brightness(1.08);
}

.ds-btn-ghost {
    background: transparent;
    border: 1px solid var(--ds-border-default);
    color: var(--ds-text-muted);
}
.ds-btn-ghost:hover {
    color: var(--ds-text-primary);
    border-color: var(--ds-border-strong);
    background: var(--ds-bg-surface);
}

.ds-input {
    width: 100%;
    background: var(--ds-bg-input);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-3) var(--ds-space-4);
    color: var(--ds-text-primary);
    font-size: var(--ds-text-base);
    font-family: var(--ds-font-display);
    transition: all var(--ds-dur-base) var(--ds-ease-out);
}
.ds-input:focus {
    outline: none;
    border-color: var(--ds-border-accent);
    background: var(--ds-bg-input-focus);
    box-shadow: 0 0 0 3px rgba(255,102,0,0.10);
}
.ds-input::placeholder { color: var(--ds-text-faint); }

.ds-label {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-2);
}
.ds-label::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ds-brand-orange-600);
    box-shadow: 0 0 6px var(--ds-brand-orange-600);
}

/* Foco visível acessível em todos os elementos com foco */
.ds-focus-ring:focus-visible {
    outline: 2px solid var(--ds-brand-cyan-500);
    outline-offset: 2px;
}

/* Reduce motion para usuários com preferência */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== css/home.css ===== */
/* ---------------------------------------------------------------------
   ATHENA — Dashboard CSS
   Extraido de Components/Pages/Home.razor (linhas 35-3588) para reduzir
   o tamanho do componente. Referenciado em App.razor via <link>.
   --------------------------------------------------------------------- */

    .top-row, .sidebar { display: none !important; }
    main { padding: 0 !important; margin: 0 !important; }
    article { padding: 0 !important; }

    /* VARIÁVEIS DE TEMA (DARK PADRÃO) */
    :root {
        --bg-sidebar: #080808;
        --bg-workspace: #030303;
        --bg-card: #0a0a0a;
        --text-main: #ffffff;
        --text-muted: #888888;
        --border-color: rgba(255, 255, 255, 0.05);
        --input-bg: #111111;
        --accent: #ff6600;
        --danger: #ff3333;
        --success: #00ff66;
        
        --info: #00d2ff;
        --info-border: rgba(0, 210, 255, 0.3);
        --info-bg: rgba(0, 210, 255, 0.1);
    }

    .light-theme {
        --bg-sidebar: #f8f9fa;
        --bg-workspace: #f1f3f5;
        --bg-card: #ffffff;
        --text-main: #212529; 
        --text-muted: #6c757d;
        --border-color: rgba(0, 0, 0, 0.05);
        --input-bg: #ffffff;
        
        --success: #008f39; 
        --danger: #d32f2f;
        
        --info: #005b9f;
        --info-border: rgba(0, 91, 159, 0.4);
        --info-bg: rgba(0, 91, 159, 0.08);
    }

    *, *::before, *::after { box-sizing: border-box; }

    .nexus-system-root { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-workspace); color: var(--text-main); font-family: 'Inter', sans-serif; display: flex; overflow: hidden; z-index: 9999; transition: background 0.3s, color 0.3s; }
    
    .mobile-header { display: none; }
    .mobile-overlay-menu { display: none; }

    .side-panel { width: 320px; height: 100%; background: var(--bg-sidebar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; box-shadow: 2px 0 10px rgba(0,0,0,0.02); z-index: 20; transition: background 0.3s, left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);}
    .brand-header { padding: 30px 24px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; cursor: pointer; }
    
    .brand-logo { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(255,102,0,0.22); }
    .brand-logo img { width: 46px; height: 46px; object-fit: contain; display:block; }
    .brand-title-group { display: flex; flex-direction: column; }
    .brand-title { font-size: 20px; font-weight: 900; letter-spacing: 5px; line-height: 1; color: var(--text-main); }
    .brand-subtitle { font-size: 8px; color: var(--text-muted); letter-spacing: 1px; font-weight: 700; margin-top: 4px; text-transform: uppercase; }

    .search-container { padding: 15px 24px; border-bottom: 1px solid var(--border-color); background: var(--bg-card); }
    .search-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px 15px; color: var(--text-main); font-family: 'JetBrains Mono'; font-size: 11px; outline: none; transition: 0.3s; }
    .search-input:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(255,102,0,0.1); }

    .vehicle-list-container { flex: 1; overflow-y: auto; padding: 15px 0; scrollbar-width: thin; }
    .node-item { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 11px; letter-spacing: 0.5px; transition: background 0.2s; user-select: none; }
    .node-item:hover { background: rgba(128,128,128,0.05); }
    .node-client { font-weight: 700; color: var(--text-main); text-transform: uppercase; background: rgba(128,128,128,0.02); margin-bottom: 1px; }
    .node-usina { padding-left: 35px; color: var(--text-muted); }
    .node-frente { padding-left: 50px; color: var(--text-muted); font-weight: 600; }

    .vehicle-btn { width: 100%; background: transparent; border: none; cursor: pointer; padding: 8px 20px 8px 70px; font-size: 13px; color: var(--text-muted); font-family: 'JetBrains Mono'; display: flex; align-items: center; justify-content: space-between; outline: none; }
    .vehicle-btn:hover { color: var(--text-main); background: rgba(128,128,128,0.1); }
    .vehicle-btn.active { color: var(--accent); background: rgba(255,102,0,0.1); border-right: 3px solid var(--accent); font-weight: 700; }

    @keyframes alertBlink { 0% { text-shadow: none; } 50% { color: var(--danger); text-shadow: 0 0 12px var(--danger); } 100% { text-shadow: none; } }
    .text-fault { animation: alertBlink 1s infinite; font-weight: 900; }
    .btn-fault { animation: alertBlink 1s infinite; }

    .system-actions { padding: 20px; border-top: 1px solid var(--border-color); background: rgba(128,128,128,0.02); display: flex; flex-direction: column; gap: 8px; }
    .sys-btn { width: 100%; background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 12px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
    .sys-btn:hover { border-color: var(--text-muted); color: var(--text-main); background: rgba(128,128,128,0.05); }
    .sys-btn-add { border-color: rgba(0, 255, 102, 0.3); color: var(--success); }
    .sys-btn-user { border-color: var(--info-border); color: var(--info); }

    /* Edge-to-edge 2026 — estilo Tesla/cockpit, sem moldura externa desperdiçada.
       Antes: padding 30px 40px → 80px laterais perdidos em telas grandes.
       Agora: 0 horizontal (cards fazem padding interno), padding-top 0
       (topbar já cobre), bottom enxuto. */
    .main-workspace { flex: 1; padding: 0 0 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; position: relative; }

    /* FULL-BLEED — todos os filhos diretos colam na borda direita da viewport
       e na borda direita da sidebar. ZERO margem lateral. O respiro interno
       fica nos paddings de cada card. */
    .main-workspace > .athena-topbar { margin: 0 !important; border-radius: 0; }
    .main-workspace > section,
    .main-workspace > div:not(.athena-topbar):not(.mapa-frota-overlay) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .main-workspace > .map-container {
        width: 100% !important;
        margin: 0 !important;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    .main-workspace > .asset-header-bar {
        margin: 0 !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .main-workspace > .nexus-hero-shell { margin: 0 !important; }
    
    .mqtt-status-bar { position: absolute; top: 0; left: 0; right: 0; padding: 5px; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: 2px; z-index: 10; transition: 0.3s; }
    .mqtt-online { background: rgba(0, 255, 102, 0.1); color: var(--success); border-bottom: 1px solid rgba(0, 255, 102, 0.3); }
    .mqtt-offline { background: rgba(255, 51, 51, 0.2); color: var(--danger); border-bottom: 1px solid var(--danger); animation: alertBlink 1s infinite; }

    .asset-header-bar { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); padding: 15px 25px; border-radius: 8px; border: 1px solid var(--border-color); border-left: 3px solid var(--accent); flex-shrink: 0; margin: 10px 12px 0; flex-wrap: wrap; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.01); }
    .asset-title-group { display: flex; flex-direction: column; }
    .asset-tag { font-family: 'JetBrains Mono'; font-size: 9px; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
    .asset-id { font-family: 'JetBrains Mono'; font-weight: 800; font-size: 22px; color: var(--text-main); margin: 2px 0; }
    .asset-meta { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
    
    .status-container { display: flex; gap: 12px; margin-top: 8px; }
    .status-badge { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 4px; background: rgba(128,128,128,0.1); border: 1px solid var(--border-color); }
    .led { width: 7px; height: 7px; border-radius: 50%; }
    .led-on { background: var(--success); box-shadow: 0 0 10px var(--success); }
    .led-off { background: var(--danger); box-shadow: 0 0 10px var(--danger); }

    .btn-edit-stealth { background: transparent; border: 1px solid rgba(255, 102, 0, 0.3); color: var(--accent); padding: 6px 12px; border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
    .btn-edit-stealth:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

    .btn-delete-stealth { background: transparent; border: 1px solid rgba(255, 51, 51, 0.3); color: var(--danger); padding: 6px 12px; border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
    .btn-delete-stealth:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

    /* ESTILOS DO RELATÓRIO PDF */
    .btn-report-stealth { background: rgba(0, 210, 255, 0.05); border: 1px solid rgba(0, 210, 255, 0.3); color: #00d2ff; padding: 6px 12px; border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
    .btn-report-stealth:hover { background: #00d2ff; color: #000; border-color: #00d2ff; }
    .light-theme .btn-report-stealth { color: var(--info); border-color: var(--info-border); background: var(--info-bg); }
    .light-theme .btn-report-stealth:hover { background: var(--info); color: #fff; }

    .pdf-modal-card { width: 900px; max-width: 95vw; background: #eaedf0; border-radius: 12px; padding: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.8); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 15px;}
    .pdf-document { background: #ffffff; color: #1a1a1a; padding: 40px; font-family: 'Inter', sans-serif; width: 100%; max-width: 800px; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    .pdf-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ff6600; padding-bottom: 20px; margin-bottom: 20px; }
    .pdf-logo { width: 45px; height: 45px; background: #ff6600; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #000; font-weight: 900; font-size: 24px; }
    .pdf-title-box { text-align: right; }
    .pdf-title { font-size: 22px; font-weight: 900; letter-spacing: 2px; margin: 0; color: #111; }
    .pdf-subtitle { font-size: 10px; color: #666; font-family: 'JetBrains Mono'; text-transform: uppercase; letter-spacing: 1px; }
    .pdf-section-title { font-size: 11px; font-weight: 900; color: white; text-transform: uppercase; letter-spacing: 2px; margin: 18px 0 8px 0; background: linear-gradient(90deg, #ff6600 0%, #ff8800 60%, #ffa330 100%); border-radius: 6px; padding: 8px 14px; box-shadow: 0 2px 8px rgba(255,102,0,0.18); }
    .pdf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
    .pdf-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
    .pdf-kpi-box { background: #ffffff; border: 1px solid #e3e8ee; border-radius: 7px; padding: 12px 10px 10px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.03); position: relative; overflow: hidden; min-height: 78px; display:flex; flex-direction:column; justify-content:center; }
    .pdf-kpi-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, #ff6600, #ff8800); opacity: .85; border-radius: 7px 7px 0 0; }
    .pdf-kpi-val { font-size: 22px; font-weight: 900; color: #111; font-family: 'JetBrains Mono'; line-height: 1.1; margin-top: 2px; }
    .pdf-kpi-lbl { font-size: 8.5px; color: #666; text-transform: uppercase; font-weight: 800; letter-spacing: 1.2px; margin-top: 5px; }
    .pdf-ai-box { background: linear-gradient(180deg, #fff7f0 0%, #fff 100%); border-left: 4px solid #ff6600; padding: 16px 22px; font-size: 12px; color: #2a2a2a; line-height: 1.65; border-radius: 0 8px 8px 0; font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
    .pdf-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 10px; font-family: 'JetBrains Mono'; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border-radius: 6px; overflow: hidden; }
    .pdf-table th { background: linear-gradient(180deg, #1a1a1a, #0a0a0a); color: #fff; text-align: left; padding: 11px 12px; font-weight: 800; letter-spacing: 0.8px; font-size: 9.5px; }
    .pdf-table td { border-bottom: 1px solid #eef1f4; padding: 11px 12px; color: #333; vertical-align: top; }
    .pdf-table tr:nth-child(even) td { background: #fafbfc; }
    .pdf-table tr:last-child td { border-bottom: none; }

    .map-container { width: calc(100% - 24px); height: 360px; margin: 0 12px; border-radius: 10px; border: 1px solid var(--border-color); overflow: hidden; background: #000; flex-shrink: 0; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

    /* =========================================================
       ANIMAÇÕES DA TELA INICIAL VAZIA (HERO)
       ========================================================= */
    @keyframes heroGridFade { 0% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes titleEntrance { 0% { opacity: 0; transform: translateY(-40px); letter-spacing: 5px; } 100% { opacity: 1; transform: translateY(0); letter-spacing: 25px; } }
    @keyframes subtitleEntrance { 0% { opacity: 0; transform: scale(0.9); letter-spacing: 0px; } 100% { opacity: 1; transform: scale(1); letter-spacing: 2px; } }
    @keyframes cardPop { 0% { opacity: 0; transform: translateY(40px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes kpiPulse { 0% { text-shadow: 0 0 5px transparent; } 50% { text-shadow: 0 0 25px currentColor; } 100% { text-shadow: 0 0 5px transparent; } }

    .nexus-empty-bg {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background-image: linear-gradient(rgba(255, 102, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 102, 0, 0.05) 1px, transparent 1px);
        background-size: 50px 50px; background-position: center center; z-index: 0; opacity: 0;
        animation: heroGridFade 2s forwards; pointer-events: none;
    }
    .light-theme .nexus-empty-bg { background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); }

    /* ESTILIZAÇÃO PREMIUM DO TÍTULO ATHENA (HERO) */
    .nexus-hero-title { 
        font-family: 'Inter', sans-serif;
        font-weight: 900; 
        font-size: 75px; 
        margin: 0; 
        background: linear-gradient(to right, #ffffff, #ff6600);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 30px rgba(255, 102, 0, 0.2);
        animation: titleEntrance 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; 
        position: relative; z-index: 1; 
    }
    .light-theme .nexus-hero-title {
        background: linear-gradient(to right, #111111, #ff6600);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 30px rgba(255, 102, 0, 0.1);
    }
    .nexus-hero-subtitle { animation: subtitleEntrance 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; position: relative; z-index: 1; font-family:'JetBrains Mono'; font-size: 12px; color: var(--accent); }

    .global-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; padding: 20px; position: relative; z-index: 1; width: 100%; max-width: 900px;}
    .global-kpi-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 35px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 3px solid var(--accent); opacity: 0; animation: cardPop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
    
    .card-1 { animation-delay: 0.1s; } .card-2 { animation-delay: 0.3s; } .card-3 { animation-delay: 0.5s; }

    .global-kpi-value { font-family: 'JetBrains Mono'; font-size: 55px; font-weight: 800; color: var(--text-main); margin: 10px 0; animation: kpiPulse 3s infinite ease-in-out; }
    .global-kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; text-align: center; }

    /* MODAL BASE */
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 100000; }
    /* SEM border-top sólida: o acento do topo é a faixa em degradê do ::before
       (regra 2026 mais abaixo). A borda de 4px + radius 12px desenhava um ARCO
       laranja grosso nos cantos, duplicado com a faixa — artefato visual. */
    .modal-card { width: 500px; max-height: 90vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.6); }
    
    /* MODAL DE USUÁRIOS */
    .modal-card-users { width: 900px; max-width: 95vw; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .modal-users-form { border-right: 1px solid var(--border-color); padding-right: 40px; }
    .modal-users-list-container { display: flex; flex-direction: column; height: 100%; }
    
    .modal-header-nexus { margin-bottom: 25px; }
    .modal-title-nexus { font-family: 'JetBrains Mono'; font-size: 18px; font-weight: 800; color: var(--text-main); letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
    .modal-subtitle-nexus { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 8px; font-weight: 700; border-left: 2px solid var(--accent); padding-left: 10px; }
    
    .nexus-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .nexus-input-group { margin-bottom: 15px; }
    .nexus-label { font-size: 9px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; display: block; }
    .nexus-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 12px; color: var(--text-main); font-family: 'JetBrains Mono'; font-size: 12px; transition: 0.3s; outline: none; }
    .nexus-input:focus { border-color: var(--accent); }
    .nexus-input:disabled { opacity: 0.5; cursor: not-allowed; }
    
    .nexus-checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .nexus-checkbox { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

    /* ── Seletor de ESCOPO (Cliente/Usina/Frente) — checklist limpo ── */
    .escopo-box { padding: 18px; border-radius: 14px; border: 1px solid var(--border-color);
        background: radial-gradient(130% 120% at 0% 0%, rgba(255,102,0,.05), transparent 50%), var(--bg-card); }
    .escopo-head { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800;
        letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; line-height: 1.4; }
    .escopo-head svg { width: 16px; height: 16px; flex-shrink: 0; }
    .escopo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
    .escopo-col-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
    .escopo-col-head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
        box-shadow: 0 0 7px var(--accent); flex-shrink: 0; }
    .escopo-col-head .lbl { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
    .escopo-col-head .cnt { margin-left: auto; font-size: 9px; font-weight: 900; color: #fff; background: var(--accent);
        border-radius: 999px; padding: 2px 8px; min-width: 18px; text-align: center; box-shadow: 0 2px 8px rgba(255,102,0,.35); }
    .escopo-search { width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px;
        padding: 8px 11px; color: var(--text-main); font-family: 'Inter', system-ui, sans-serif; font-size: 11px;
        margin-bottom: 8px; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
    .escopo-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,102,0,.12); }
    .escopo-search::placeholder { color: var(--text-muted); opacity: .6; }
    .escopo-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; display: flex; flex-direction: column; gap: 2px; }
    .escopo-list::-webkit-scrollbar { width: 8px; }
    .escopo-list::-webkit-scrollbar-thumb { background: rgba(255,102,0,.30); border-radius: 999px; }
    .escopo-list::-webkit-scrollbar-track { background: transparent; }
    .escopo-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px;
        background: transparent; color: var(--text-muted); font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px;
        font-weight: 600; text-align: left; cursor: pointer; transition: background .14s ease, color .14s ease; }
    .escopo-row:hover { background: rgba(128,128,128,.14); color: var(--text-main); }
    .escopo-row:disabled { opacity: .5; cursor: not-allowed; }
    .escopo-check { width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px; border: 1.5px solid rgba(128,128,128,.5);
        display: grid; place-items: center; transition: all .14s ease; }
    .escopo-row-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .escopo-row.sel { background: rgba(255,102,0,.13); color: var(--accent); font-weight: 700; }
    .escopo-row.sel .escopo-check { background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 8px rgba(255,102,0,.4); }
    .escopo-row.sel .escopo-check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; }
    .escopo-empty { font-size: 10px; color: var(--text-muted); font-style: italic; padding: 10px 6px; opacity: .75; text-align: center; }
    .escopo-more { font-size: 10px; color: var(--accent); font-weight: 700; padding: 8px 6px; text-align: center; opacity: .9; }
    /* Dropdown por nível: 3 botões + ÁREA FIXA abaixo (layout estático; a lista rola). */
    .escopo-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    .escopo-dd-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px; border-radius: 10px;
        border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main);
        font-family: 'Inter', system-ui, sans-serif; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
    .escopo-dd-btn:hover { border-color: var(--accent); }
    .escopo-dd-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,102,0,.12); background: rgba(255,102,0,.06); }
    .escopo-dd-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); flex-shrink: 0; }
    .escopo-dd-btn .lbl { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
    .escopo-dd-sum { margin-left: auto; min-width: 0; font-size: 11px; font-weight: 700; color: var(--accent);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .escopo-dd-sum.vazio { color: var(--text-muted); font-weight: 600; }
    .escopo-dd-caret { color: var(--text-muted); font-size: 9px; flex-shrink: 0; transition: transform .18s ease; }
    .escopo-dd-btn.open .escopo-dd-caret { transform: rotate(180deg); color: var(--accent); }
    /* Painel FLUTUANTE (absolute): abre por cima sem empurrar o layout (estático) e
       sem espaço vazio quando fechado. O modal-users tem overflow:visible p/ não cortar. */
    .escopo-dd { position: relative; min-width: 0; }   /* deixa o botão encolher no grid (não vaza da caixa) */
    .escopo-dd-panel { position: absolute; top: calc(100% + 6px); left: 0; width: 240px; max-width: 86vw; z-index: 60;
        display: flex; flex-direction: column; max-height: 280px; border: 1px solid var(--accent); border-radius: 10px;
        background: var(--bg-card-solid, #0e0e1a); padding: 9px; box-shadow: 0 18px 44px rgba(0,0,0,.6);
        animation: escopoDrop .16s cubic-bezier(.16,1,.3,1); }
    .light-theme .escopo-dd-panel { background: var(--bg-card-solid, #ffffff); }
    .escopo-dd:last-child .escopo-dd-panel { left: auto; right: 0; }   /* Frentes abre para a esquerda */
    .escopo-dd-panel .escopo-search { flex-shrink: 0; }
    @keyframes escopoDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    /* modal de usuários: overflow visível p/ o painel flutuante não ser cortado,
       mas as colunas contidas (min-width:0) p/ a lista de usuários não vazar. */
    .modal-card-users { overflow: visible; }
    .modal-card-users > * { min-width: 0; }
    .modal-users-list-container { min-width: 0; overflow: hidden; }
    .user-item-info { min-width: 0; flex: 1 1 auto; }
    .user-item-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    
    .nexus-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
    .btn-nexus-save { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 15px; font-weight: 900; font-size: 11px; text-transform: uppercase; cursor: pointer; transition: 0.3s; letter-spacing: 1px; }
    .btn-nexus-save:hover { filter: brightness(1.1); transform: translateY(-2px); }
    .btn-nexus-cancel { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 6px; padding: 15px; font-weight: 700; font-size: 11px; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
    .btn-nexus-cancel:hover { color: var(--text-main); background: rgba(128,128,128,0.1); }

    .user-list-box { max-height: 400px; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; }
    .user-item-row { background: var(--bg-workspace); border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
    .user-item-name { font-size: 13px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
    .user-item-role { font-size: 8px; background: var(--info-bg); color: var(--info); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--info-border); }
    .user-item-email { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono'; }
    .btn-delete-user { background: rgba(255,51,51,0.05); color: var(--danger); border: 1px solid rgba(255,51,51,0.2); padding: 8px 12px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer; transition: 0.3s; }
    .btn-delete-user:hover { background: var(--danger); color: #fff; }

    /* =========================================================
       RESPONSIVIDADE MOBILE TÁTICA E DEFINITIVA
       ========================================================= */
    @media (max-width: 900px) {
        .nexus-system-root { display: block; overflow-y: auto; }
        
        .mobile-header {
            display: flex; justify-content: space-between; align-items: center;
            background: var(--bg-sidebar); border-bottom: 1px solid var(--border-color);
            padding: 10px 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            height: 60px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        .mobile-logo-group { display: flex; align-items: center; gap: 10px; }
        .mobile-logo-icon { width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; border-radius: 8px; }
        .mobile-logo-icon img { width: 34px; height: 34px; object-fit: contain; display:block; }
        .mobile-logo-text { font-family: 'JetBrains Mono'; font-weight: 800; font-size: 16px; color: var(--text-main); letter-spacing: 2px;}
        .mobile-menu-btn { background: transparent; border: none; color: var(--text-main); font-size: 26px; cursor: pointer; padding: 5px; outline: none; }

        .side-panel {
            position: fixed; top: 0; left: -100%; height: 100vh; width: 280px;
            z-index: 10000; transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); border-right: 1px solid var(--border-color);
        }
        .side-panel.open { left: 0; box-shadow: 5px 0 30px rgba(0,0,0,0.8); }
        .brand-header { display: none; } /* Oculta a logo gigante no menu lateral do celular */
        .search-container { padding-top: 30px; } /* Dá um respiro extra já que tiramos o header do menu */

        .mobile-overlay-menu { display: none; }
        .mobile-overlay-menu.open {
            display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7); z-index: 9999; backdrop-filter: blur(3px);
        }

        .main-workspace {
            padding: 85px 15px 25px 15px; /* Espaço pro header + status bar */
            display: flex; flex-direction: column; min-height: 100vh; overflow-y: visible;
        }
        .mqtt-status-bar { top: 60px; position: fixed; z-index: 90; }

        .global-dashboard { grid-template-columns: 1fr; margin-top: 20px; padding: 0; }
        .nexus-hero-title { font-size: 38px !important; letter-spacing: 10px !important; }
        
        .modal-card { width: 95%; padding: 20px; }
        .modal-card-users { grid-template-columns: 1fr; padding: 20px; max-height: 95vh; }
        .modal-users-form { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; margin-bottom: 20px; }
        .asset-header-bar { flex-direction: column; align-items: flex-start; }
    }


    /* Configurações: limpa a tela principal e centraliza funções administrativas */
    .sys-config-btn { border-color: rgba(255,102,0,0.35) !important; color: var(--accent) !important; background: rgba(255,102,0,0.08) !important; }
    .sys-compare-btn { border-color: rgba(0,210,255,0.35) !important; color: #00d2ff !important; background: rgba(0,210,255,0.08) !important; }
    .sys-compare-btn:hover { background: rgba(0,210,255,0.18) !important; box-shadow: 0 0 16px rgba(0,210,255,0.16) !important; }
    .sys-map-btn { border-color: rgba(46,204,113,0.35) !important; color: #2ecc71 !important; background: rgba(46,204,113,0.08) !important; }
    .sys-map-btn:hover { background: rgba(46,204,113,0.18) !important; box-shadow: 0 0 16px rgba(46,204,113,0.16) !important; }
    .sys-back-btn { border-color: rgba(255,255,255,0.20) !important; color: rgba(255,255,255,0.85) !important; background: rgba(255,255,255,0.04) !important; }
    .sys-back-btn:hover { background: rgba(255,255,255,0.10) !important; }

    /* ── MAPA DE FROTA AO VIVO ───────────────────────────────────────── */
    /* z-index 100001 (acima de .nexus-system-root=9999 e dos modais=100000) */
    .mapa-frota-overlay {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100vh !important;
        z-index: 100001 !important;
        background: #0a0a0f !important;
        display: flex !important; flex-direction: column !important;
        animation: mapaFrotaFadeIn .25s ease-out;
    }
    @keyframes mapaFrotaFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .mapa-frota-header {
        flex: 0 0 auto;
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 22px;
        background: linear-gradient(180deg, rgba(20,20,26,0.96), rgba(12,12,18,0.96));
        border-bottom: 1px solid rgba(255,255,255,0.07);
        box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    }
    .mapa-frota-title {
        display: flex; align-items: center; gap: 12px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px; font-weight: 800; letter-spacing: 2px;
        color: #fff; text-transform: uppercase;
    }
    .mapa-frota-dot {
        color: #2ecc71;
        animation: mapaFrotaPulse 1.6s ease-in-out infinite;
    }
    @keyframes mapaFrotaPulse {
        0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(46,204,113,.65); }
        50%      { opacity: .45; text-shadow: 0 0 4px rgba(46,204,113,.25); }
    }
    .mapa-frota-sub {
        font-size: 10px; font-weight: 600; letter-spacing: 1.4px;
        color: rgba(255,255,255,.45); margin-left: 8px;
    }
    .mapa-frota-close {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.85);
        width: 36px; height: 36px; border-radius: 8px;
        cursor: pointer; font-size: 16px;
        transition: background .2s, border-color .2s;
        margin-left: 12px;
    }

    /* Seletor de tipo de mapa — pill no header do overlay.
       3 modos: Ruas / Satélite / Híbrido. Padrão = Satélite. */
    .athena-map-mode-selector {
        display: inline-flex; gap: 4px; padding: 4px;
        background: rgba(15, 18, 26, 0.85);
        backdrop-filter: blur(10px) saturate(160%);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
        margin-left: auto;
    }
    /* ── ATHENA Topbar 2026 — substitui o ticker matrix legacy ──
       Layout: brand (esquerda) + chips (centro/direita).
       Glassmorphism dark + gradient accent laranja na borda inferior. */
    .athena-topbar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 10px 22px;
        background: linear-gradient(180deg, rgba(15, 18, 26, 0.94) 0%, rgba(10, 12, 18, 0.88) 100%);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        z-index: 100;
    }
    .athena-topbar::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 104, 31, 0.55) 35%, rgba(255, 104, 31, 0.85) 50%, rgba(255, 104, 31, 0.55) 65%, transparent 100%);
        opacity: .8;
    }
    .atb-brand {
        display: flex; align-items: center; gap: 12px;
        flex: 0 0 auto;
    }
    .atb-mark {
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #ff681f, #ff8c4d);
        color: #fff;
        border-radius: 10px;
        font-family: var(--font-display, system-ui), system-ui, sans-serif;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 14px rgba(255, 104, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    .atb-titles { display: flex; flex-direction: column; line-height: 1.1; }
    .atb-title {
        font-family: var(--font-display, system-ui), system-ui, sans-serif;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: 0.04em;
        color: #fff;
    }
    .atb-sub {
        font-family: var(--font-mono, 'JetBrains Mono', monospace);
        font-size: 9.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
    }
    .atb-sub em { font-style: normal; color: rgba(255, 104, 31, 0.85); }

    .atb-chips {
        display: flex; align-items: center; gap: 8px;
        margin-left: auto;
        flex-wrap: wrap;
    }
    .atb-chip {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 12px;
        font-family: var(--font-display, system-ui), system-ui, sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.78);
        transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .atb-chip:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
    .atb-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
        flex: 0 0 auto;
    }
    .atb-chip-ok {
        color: #4ade80;
        background: rgba(34, 197, 94, 0.10);
        border-color: rgba(34, 197, 94, 0.30);
    }
    .atb-chip-ok .atb-dot { animation: atb-pulse 2.2s ease-in-out infinite; }
    .atb-chip-warn {
        color: #fbbf24;
        background: rgba(245, 158, 11, 0.10);
        border-color: rgba(245, 158, 11, 0.32);
    }
    .atb-chip-warn .atb-dot { animation: atb-pulse 1.1s ease-in-out infinite; }
    .atb-chip-danger {
        color: #f87171;
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.38);
    }
    .atb-chip-danger .atb-dot { animation: atb-pulse 0.9s ease-in-out infinite; }
    .atb-chip-info {
        color: #93c5fd;
        background: rgba(59, 130, 246, 0.10);
        border-color: rgba(59, 130, 246, 0.28);
    }
    .atb-chip-neutral {
        color: rgba(255, 255, 255, 0.55);
        background: rgba(255, 255, 255, 0.04);
    }
    @keyframes atb-pulse {
        0%, 100% { box-shadow: 0 0 6px currentColor; opacity: 0.95; }
        50%      { box-shadow: 0 0 14px currentColor; opacity: 1; }
    }

    /* Variante SLIM — quando sidebar já tem o brand. Sem brand no topbar,
       só uma barra fina com chips à direita. Altura reduzida pra ~36px.
       Evita ocupar espaço vertical sem motivo. */
    .athena-topbar--slim {
        padding: 6px 18px;
        gap: 8px;
        justify-content: flex-end;
    }
    .athena-topbar--slim .atb-chips { margin-left: 0; }
    .athena-topbar--slim::after { opacity: .55; } /* gradiente inferior mais discreto */

    /* Mobile: chips compactos, brand reduzido */
    @media (max-width: 720px) {
        .athena-topbar { padding: 8px 14px; gap: 10px; }
        .athena-topbar--slim { padding: 6px 12px; }
        .atb-mark { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
        .atb-title { font-size: 14px; }
        .atb-sub { font-size: 8.5px; letter-spacing: 0.14em; }
        .atb-chip { padding: 4px 9px; font-size: 10px; }
        .atb-chips { gap: 6px; }
    }
    @media (max-width: 480px) {
        /* Em telas muito pequenas: esconde o chip "BMB Mode Center" pra não quebrar linha */
        .atb-chip-info { display: none; }
        .atb-sub { display: none; }
    }

    /* Esconde o ticker matrix antigo se algum CSS legado ainda renderizar.
       Defesa contra resíduos cacheados. */
    .mqtt-status-bar { display: none !important; }

    /* Variante FLUTUANTE — usada sobre o mapa do dashboard (#tactical-map).
       Posicionada absoluta no canto superior direito. z-index alto pra ficar
       acima dos tiles Leaflet (default z-index 200-400). */
    .athena-map-mode-selector--floating {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1000;
        margin-left: 0;
    }
    /* Garante âncora pro filho absoluto. */
    .map-container { position: relative; }

    /* ── ZOOM +/− DO MAPA DO TELEMETRY — 2026-08-06 ──────────────────────────
       Este mapa trava arrastar/scroll de propósito (scroll acidental tirava o
       caminhão da tela), o que deixava o operador sem forma de aproximar para ler
       a trilha dentro do talhão. Os botões devolvem o zoom sem trazer o scroll
       acidental de volta.

       Escopado em .map-container: não mexe no /mapa, no Modo TV nem no mobile,
       que têm controles próprios.

       Visual copiado de .amms-btn (os botões Ruas/Satélite/Híbrido ao lado):
       pílula clara, borda discreta, IBM Plex Mono 700. */
    .map-container .leaflet-control-zoom {
        border: none !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
        margin: 0 12px 26px 0 !important;   /* 26px embaixo: livra a atribuição */
        overflow: hidden;
        border-radius: 999px !important;
    }
    .map-container .leaflet-control-zoom a {
        width: 32px; height: 32px; line-height: 30px;
        background: #f4f2ee;
        border: 1px solid rgba(0,0,0,.14);
        color: #111;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 17px; font-weight: 700;
        text-align: center; text-decoration: none;
        display: block;
        transition: background .12s ease, color .12s ease;
    }
    .map-container .leaflet-control-zoom a:first-child {
        border-radius: 999px 999px 0 0; border-bottom: none;
    }
    .map-container .leaflet-control-zoom a:last-child {
        border-radius: 0 0 999px 999px;
    }
    .map-container .leaflet-control-zoom a:hover {
        background: #fff; border-color: rgba(0,0,0,.28); color: #111;
    }
    .map-container .leaflet-control-zoom a:active {
        background: #ff5a1f; border-color: #ff5a1f;   /* laranja ATHENA, igual ao ativo dos botões de camada */
    }
    /* Zoom no limite: o Leaflet marca com esta classe. Sem isto o botão parece
       clicável e não faz nada. */
    .map-container .leaflet-control-zoom a.leaflet-disabled {
        background: rgba(244,242,238,.45);
        color: rgba(0,0,0,.3);
        cursor: default;
    }
    .amms-btn {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 6px 12px;
        font-family: var(--font-display, system-ui), system-ui, sans-serif;
        font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.7);
        background: transparent; border: none; border-radius: 999px;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, box-shadow 0.18s;
        white-space: nowrap;
    }
    .amms-btn:hover {
        background: rgba(255, 255, 255, 0.06); color: #fff;
    }
    .amms-btn.amms-btn-active {
        background: linear-gradient(135deg, #ff681f, #ff8c4d);
        color: #fff;
        box-shadow: 0 2px 8px rgba(255, 104, 31, 0.4);
    }
    @media (max-width: 768px) {
        .athena-map-mode-selector { padding: 3px; gap: 3px; }
        .amms-btn { padding: 5px 9px; font-size: 10px; }
    }
    @media (max-width: 480px) {
        /* Em telas muito pequenas: esconde label, mostra só emoji */
        .amms-btn { font-size: 0; padding: 6px 8px; }
        .amms-btn::first-letter { font-size: 14px; }
    }
    .mapa-frota-close:hover {
        background: rgba(255,90,90,0.18);
        border-color: rgba(255,90,90,0.45);
        color: #ff8888;
    }
    .mapa-frota-canvas { flex: 1 1 auto; width: 100% !important; min-height: 0; background: #f1f3f6; }

    /* Marker base + container do radar */
    .mapa-frota-icon {
        background: transparent !important;
        border: none !important;
        position: relative;
    }
    .mapa-frota-icon svg {
        position: relative; z-index: 3;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
        cursor: pointer;
        transition: transform .15s ease-out;
    }
    .mapa-frota-icon:hover svg { transform: scale(1.12); }

    /* Aneis RADAR — so aparecem quando o marker tem .has-falha */
    .mapa-frota-radar,
    .mapa-frota-radar-2 {
        position: absolute;
        top: 50%; left: 50%;
        width: 36px; height: 36px;
        margin: -18px 0 0 -18px;
        border-radius: 50%;
        border: 2px solid #e63946;
        background: rgba(230,57,70,.18);
        opacity: 0;
        pointer-events: none;
        z-index: 1;
        animation: mapaFrotaRadar 1.7s cubic-bezier(.16,1,.3,1) infinite;
    }
    .mapa-frota-radar-2 { animation-delay: .85s; }
    @keyframes mapaFrotaRadar {
        0%   { transform: scale(0.55); opacity: 0.85; }
        80%  { transform: scale(2.6);  opacity: 0;    }
        100% { transform: scale(2.6);  opacity: 0;    }
    }

    /* Tooltip rica: Nome + Velocidade + Cliente (+ aviso de falha se houver) */
    .mapa-frota-tooltip {
        background: rgba(12,14,20,.97) !important;
        border: 1px solid rgba(255,102,0,.55) !important;
        color: #fff !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .4px;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.55) !important;
        line-height: 1.55 !important;
        min-width: 180px !important;
    }
    .mapa-frota-tooltip::before {
        border-top-color: rgba(255,102,0,.55) !important;
    }
    .mapa-frota-tooltip .mff-nome {
        font-size: 12.5px;
        font-weight: 800;
        color: #ffb567;
        text-transform: uppercase;
        letter-spacing: .8px;
    }
    .mapa-frota-tooltip .mff-meta {
        color: rgba(255,255,255,.62);
        font-size: 10px;
        letter-spacing: .6px;
        text-transform: uppercase;
    }
    .mapa-frota-tooltip .mff-meta b {
        color: #fff;
        font-weight: 800;
        letter-spacing: .3px;
    }
    .mapa-frota-tooltip .mff-falha {
        display: inline-block;
        background: rgba(230,57,70,.18);
        color: #ff6b78;
        border: 1px solid rgba(230,57,70,.55);
        padding: 2px 7px;
        border-radius: 4px;
        font-size: 9.5px;
        letter-spacing: 1px;
        font-weight: 800;
        animation: mapaFrotaFalhaBlink 1.1s ease-in-out infinite;
    }
    @keyframes mapaFrotaFalhaBlink {
        0%, 100% { opacity: 1; }
        50%      { opacity: .45; }
    }

    /* Override Leaflet attribution control (caso volte a aparecer) */
    .mapa-frota-canvas .leaflet-control-attribution { font-size: 9px !important; opacity: .7; }
    /* ─────── MODAL DE CONFIGURAÇÕES — DESIGN VERTICAL "LISTA" ─────── */
    .cfg-modal {
        padding: 26px 26px 22px 26px !important;
    }
    .cfg-header {
        text-align: left;
        margin-bottom: 22px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .cfg-eyebrow {
        font-family: 'JetBrains Mono', monospace;
        font-size: 9.5px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.42);
        margin-top: 6px;
    }
    .cfg-title {
        font-family: 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: -0.01em;
        color: var(--text-main, #f7f7f4);
        line-height: 1;
    }
    .cfg-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cfg-row {
        display: grid;
        grid-template-columns: 42px 1fr 18px;
        gap: 14px;
        align-items: center;
        padding: 13px 14px;
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 12px;
        cursor: pointer;
        transition: transform .22s cubic-bezier(.16,1,.3,1),
                    border-color .22s ease,
                    background .22s ease,
                    box-shadow .22s ease;
        width: 100%;
        text-align: left;
        color: var(--text-main, #f7f7f4);
        font-family: inherit;
    }
    .cfg-row:hover {
        transform: translateX(3px);
        border-color: rgba(255,104,31,0.45);
        background: linear-gradient(90deg, rgba(255,104,31,0.08), rgba(255,255,255,0.015) 60%);
        box-shadow: 0 6px 16px -6px rgba(255,102,0,0.22);
    }
    .cfg-row-glyph {
        width: 42px; height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
        font-family: 'JetBrains Mono', monospace;
        color: var(--accent, #ff681f);
        background: rgba(255,104,31,0.08);
        border: 1px solid rgba(255,104,31,0.22);
        border-radius: 10px;
        line-height: 1;
        transition: background .22s ease, border-color .22s ease, transform .22s ease;
    }
    .cfg-row:hover .cfg-row-glyph {
        background: rgba(255,104,31,0.18);
        border-color: rgba(255,104,31,0.5);
        transform: scale(1.04);
    }
    .cfg-row-body {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }
    .cfg-row-title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--text-main, #f7f7f4);
        line-height: 1.2;
    }
    .cfg-row-sub {
        font-size: 11px;
        color: rgba(255,255,255,0.45);
        line-height: 1.4;
    }
    .cfg-row-arrow {
        font-size: 22px;
        font-weight: 300;
        color: rgba(255,255,255,0.25);
        line-height: 1;
        text-align: center;
        transition: color .22s ease, transform .22s ease;
    }
    .cfg-row:hover .cfg-row-arrow {
        color: var(--accent, #ff681f);
        transform: translateX(2px);
    }
    .cfg-close {
        width: 100%;
        margin-top: 18px;
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.015);
        color: rgba(255,255,255,0.65);
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .22s, color .22s, border-color .22s;
    }
    .cfg-close:hover {
        background: rgba(255,255,255,0.04);
        color: var(--text-main, #f7f7f4);
        border-color: rgba(255,255,255,0.16);
    }
    /* Light theme do modal de configurações */
    .light-theme .cfg-eyebrow { color: rgba(0,0,0,0.45); }
    .light-theme .cfg-title { color: #0d1117; }
    .light-theme .cfg-header { border-bottom-color: rgba(0,0,0,0.08); }
    .light-theme .cfg-row { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); color: #0d1117; }
    .light-theme .cfg-row:hover { background: linear-gradient(90deg, rgba(255,104,31,0.07), rgba(0,0,0,0.01) 60%); border-color: rgba(255,104,31,0.35); }
    .light-theme .cfg-row-title { color: #0d1117; }
    .light-theme .cfg-row-sub { color: rgba(0,0,0,0.55); }
    .light-theme .cfg-row-arrow { color: rgba(0,0,0,0.30); }
    .light-theme .cfg-close { color: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.02); }
    .light-theme .cfg-close:hover { background: rgba(0,0,0,0.04); color: #0d1117; border-color: rgba(0,0,0,0.20); }

    .config-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
        margin-top: 18px;
    }
    .config-action {
        min-height: 92px;
        border-radius: 14px;
        border: 1px solid var(--border-color);
        background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
        color: var(--text-main);
        cursor: pointer;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
        text-align: left;
        position: relative;
        overflow: hidden;
    }
    .config-action::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: var(--accent);
        opacity: 0;
        transition: opacity .22s ease;
    }
    .config-action:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 104, 31, 0.45);
        box-shadow: 0 12px 28px -8px rgba(255,102,0,0.20), 0 0 0 1px rgba(255,104,31,0.06) inset;
        background: linear-gradient(160deg, rgba(255,104,31,0.07), rgba(255,255,255,0.015));
    }
    .config-action:hover::before { opacity: 1; }
    .config-action b {
        font-size: 12px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        line-height: 1.2;
    }
    .config-action span {
        font-size: 10.5px;
        color: var(--text-muted);
        line-height: 1.45;
    }
    .vehicle-list-container .vehicle-btn { justify-content: space-between; padding: 13px 14px; border-radius: 10px; }
    .vehicle-list-container .vehicle-btn.active { background: linear-gradient(90deg, rgba(255,102,0,.22), rgba(255,102,0,.06)) !important; box-shadow: inset 3px 0 0 var(--accent), 0 0 18px rgba(255,102,0,.08); }
    .node-item { border-radius: 8px; }
    #tactical-map { isolation: isolate; }
    .gps-only-map-notice { position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,0.82); padding:8px 12px; border-radius:6px; font-size:9px; color:#fff; z-index:2000; border:1px solid rgba(255,255,255,0.18); max-width: 270px; pointer-events:none; }


    /* =========================================================
       SIDEBAR FROTA V73 - HIERARQUIA VISUAL PROFISSIONAL
       ========================================================= */
    .search-container {
        padding: 16px 20px 14px;
        background:
            radial-gradient(circle at 0% 0%, rgba(255,102,0,0.10), transparent 34%),
            var(--bg-card);
    }

    .search-input {
        border-radius: 14px;
        min-height: 44px;
        background: rgba(255,255,255,0.035);
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    }

    .vehicle-list-container {
        padding: 16px 10px 18px;
    }
    .fleet-section-title {
        padding: 0 10px 12px;
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 2px;
        text-transform: uppercase;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .node-item {
        margin: 5px 0;
        border-radius: 14px;
        border: 1px solid transparent;
        min-height: 42px;
        padding: 10px 12px;
        background: rgba(255,255,255,0.015);
    }
    .node-item:hover {
        background: rgba(255,102,0,0.06);
        border-color: rgba(255,102,0,0.13);
    }
    .node-client {
        color: var(--text-main);
        background:
            linear-gradient(90deg, rgba(255,102,0,0.08), rgba(255,255,255,0.015));
        border-color: rgba(255,102,0,0.08);
        font-size: 12px;
    }
    .node-usina {
        padding-left: 22px;
        background: rgba(255,255,255,0.018);
    }
    .node-frente {
        padding-left: 34px;
        background: rgba(255,255,255,0.012);
    }
    .node-main {
        display:flex;
        flex-direction:column;
        min-width:0;
        flex:1;
        gap:3px;
    }
    .node-title {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-weight:900;
        text-transform:uppercase;
    }
    .node-sub {
        font-size:8px;
        color: var(--text-muted);
        letter-spacing:1px;
        text-transform:uppercase;
        font-weight:800;
    }
    .node-count-pill {
        min-width:52px;
        text-align:center;
        border-radius:999px;
        padding:4px 7px;
        font-family:'JetBrains Mono';
        font-size:9px;
        font-weight:900;
        color: var(--text-muted);
        border:1px solid rgba(255,255,255,0.08);
        background:rgba(0,0,0,0.24);
    }
    .node-count-pill.ok {
        color: var(--success);
        border-color: rgba(0,255,102,0.18);
        background:rgba(0,255,102,0.04);
    }
    .node-count-pill.fault {
        color: var(--danger);
        border-color: rgba(255,51,51,0.24);
        background:rgba(255,51,51,0.06);
    }
    .vehicle-btn {
        margin: 7px 0 7px 48px;
        width: calc(100% - 52px);
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.06);
        background:
            linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
        padding: 11px 12px;
        min-height: 50px;
    }

    .vehicle-btn:hover {
        background: rgba(255,102,0,0.07);
        border-color: rgba(255,102,0,0.16);
        transform: translateX(2px);
    }

    .vehicle-btn.active {
        border: 1px solid rgba(255,102,0,0.55);
        border-left: 4px solid var(--accent);
        border-right: 1px solid rgba(255,102,0,0.55);
        background:
            radial-gradient(circle at 100% 50%, rgba(255,102,0,0.22), transparent 38%),
            rgba(255,102,0,0.11);
        box-shadow: 0 0 22px rgba(255,102,0,0.12);
    }

    .vehicle-info {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        min-width:0;
        gap:4px;
    }

    .vehicle-name {
        font-weight:950;
        color:inherit;
        letter-spacing:.7px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:180px;
    }

    .vehicle-mini {
        display:flex;
        gap:8px;
        font-size:8px;
        color: var(--text-muted);
        text-transform:uppercase;
        letter-spacing:.7px;
        font-weight:800;
    }

    .vehicle-status-pack {
        display:flex;
        align-items:center;
        gap:7px;
    }

    .vehicle-status-text {
        font-size:8px;
        font-weight:900;
        color:var(--text-muted);
        letter-spacing:.8px;
        text-transform:uppercase;
    }

    .chevron {
        transition:.2s ease;
        color: var(--text-muted);
    }

    .chevron.open {
        transform: rotate(90deg);
        color: var(--accent);
    }


    /* =========================================================
       V74 - SIDEBAR OPERACIONAL REFINADA
       ========================================================= */
    .fleet-summary-v74 { margin: 0 10px 14px; padding: 13px; border-radius: 16px; border: 1px solid rgba(255,102,0,.16); background: radial-gradient(circle at 0 0, rgba(255,102,0,.18), transparent 35%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
    .fleet-summary-top-v74 { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
    .fleet-summary-title-v74 { color:#fff; font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:950; letter-spacing:1.8px; text-transform:uppercase; }
    .fleet-summary-total-v74 { color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:950; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,102,0,.22); background:rgba(255,102,0,.06); }
    .fleet-summary-grid-v74 { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
    .fleet-summary-kpi-v74 { border-radius:12px; padding:9px 7px; border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.24); text-align:center; }
    .fleet-summary-kpi-v74 strong { display:block; font-family:'JetBrains Mono', monospace; color:#fff; font-size:16px; line-height:1; font-weight:950; }
    .fleet-summary-kpi-v74 span { display:block; margin-top:5px; color:#777; font-size:7px; font-weight:950; letter-spacing:.8px; text-transform:uppercase; }
    .fleet-summary-kpi-v74.online strong { color:var(--success); }
    .fleet-summary-kpi-v74.fault strong { color:var(--danger); }
    /* nowrap evita quebrar "HIERARQUIA OPERACIONAL" em 2 linhas quando a sidebar
       encolhe ao selecionar um caminhão (painel lateral cresce, sidebar perde
       largura). letter-spacing/font-size escalam via clamp pra caber sempre. */
    .fleet-section-title.v74 { margin: 0 10px 8px; padding:0; color:#777; font-size:clamp(7px, 0.62vw, 8px); font-weight:950; letter-spacing:clamp(0.6px, 0.14vw, 1.8px); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .node-item { position:relative; overflow:hidden; min-height:46px; border-radius:15px; border:1px solid rgba(255,255,255,.055); background:linear-gradient(90deg, rgba(255,255,255,.028), rgba(255,255,255,.012)); }
    .node-item:before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:transparent; transition:.2s ease; }
    .node-item:hover:before { background:var(--accent); }
    .node-client { border-color:rgba(255,102,0,.14); background:linear-gradient(90deg, rgba(255,102,0,.105), rgba(255,255,255,.018)); }
    .node-usina { margin-left:10px; width:calc(100% - 10px); padding-left:14px; }
    .node-frente { margin-left:22px; width:calc(100% - 22px); padding-left:14px; }
    .node-title { font-size:11px; letter-spacing:.9px; }
    .node-sub { font-size:7px; opacity:.9; }
    .node-count-pill { min-width:46px; padding:5px 7px; border-radius:10px; font-size:8px; }
    .vehicle-btn { margin:7px 0 7px 34px; width:calc(100% - 38px); border-radius:17px; min-height:58px; padding:12px 12px 12px 14px; background: radial-gradient(circle at 100% 50%, rgba(255,255,255,.035), transparent 40%), linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.014)); }
    .vehicle-btn.active { transform:translateX(2px); border-color:rgba(255,102,0,.52); box-shadow:0 0 24px rgba(255,102,0,.16), inset 0 1px 0 rgba(255,255,255,.04); background: radial-gradient(circle at 100% 50%, rgba(255,102,0,.28), transparent 44%), linear-gradient(90deg, rgba(255,102,0,.16), rgba(255,255,255,.02)); }
    .vehicle-name { font-size:12px; letter-spacing:.8px; }
    .vehicle-mini span { padding:3px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.20); }
    .vehicle-status-text { letter-spacing:1px; }
    .system-actions { padding:18px 20px 20px; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.22)); }
    .sys-config-btn { min-height:42px; border-radius:14px !important; border-color:rgba(255,102,0,.32) !important; color:var(--accent) !important; background:rgba(255,102,0,.055) !important; letter-spacing:.8px; }
    .sys-btn:not(.sys-config-btn) { border-radius:14px; min-height:42px; }


    /* =========================================================
       V78 - MOBILE RESPONSIVO SEM ALTERAR O DESIGNER DESKTOP
       ========================================================= */

    html, body { max-width:100%; overflow-x:hidden; }

    .light-theme .side-panel,
    .light-theme .mobile-header,
    .light-theme .modal-card,
    .light-theme .modal-card-users,
    .light-theme .config-action {
        background:#ffffff !important;
        color:#111827 !important;
        border-color:rgba(15,23,42,.12) !important;
    }

    .light-theme .main-workspace {
        background:
            radial-gradient(circle at 20% 0%, rgba(255,102,0,.07), transparent 28%),
            linear-gradient(180deg, #f7f8fb 0%, #eef2f7 100%) !important;
        color:#111827 !important;
    }

    .light-theme .brand-title,
    .light-theme .brand-subtitle,
    .light-theme .node-title,
    .light-theme .vehicle-name,
    .light-theme .asset-id,
    .light-theme .asset-title,
    .light-theme .modal-title-nexus,
    .light-theme .config-action b,
    .light-theme .mobile-logo-text {
        color:#111827 !important;
        text-shadow:none !important;
    }

    .light-theme .node-sub,
    .light-theme .vehicle-mini,
    .light-theme .asset-meta,
    .light-theme .asset-tag,
    .light-theme .modal-subtitle-nexus,
    .light-theme .config-action span,
    .light-theme .fleet-section-title,
    .light-theme small {
        color:#5f6b7a !important;
    }

    .light-theme .node-item,
    .light-theme .vehicle-btn,
    .light-theme .search-input,
    .light-theme .nexus-input {
        background:#ffffff !important;
        color:#111827 !important;
        border-color:rgba(15,23,42,.14) !important;
    }

    .light-theme .vehicle-btn.active {
        background:linear-gradient(135deg, rgba(255,102,0,.13), #ffffff) !important;
        border-color:rgba(255,102,0,.42) !important;
        box-shadow:0 12px 28px rgba(255,102,0,.12) !important;
    }

    .light-theme .mqtt-status-bar {
        background:#ffffff !important;
        color:#111827 !important;
        border:1px solid rgba(15,23,42,.12) !important;
        box-shadow:0 12px 26px rgba(15,23,42,.08) !important;
    }

    .light-theme input,
    .light-theme select,
    .light-theme textarea {
        background:#ffffff !important;
        color:#111827 !important;
        border-color:rgba(15,23,42,.16) !important;
    }

    .light-theme input::placeholder,
    .light-theme textarea::placeholder {
        color:#94a3b8 !important;
    }

    @media (max-width: 1180px) {
        .side-panel { width:300px; flex:0 0 300px; }
        /* FIX 2026-06: era padding:18px (igual desktop antigo 30/40px) — gastava
           ~36px laterais em laptops 1366px. Edge-to-edge mantém só 12px de respiro
           nos cards (já aplicado em .main-workspace > seletor no topo do arquivo). */
        .main-workspace { padding: 0 0 12px !important; }
        .asset-header-bar {
            flex-direction:column !important;
            align-items:flex-start !important;
            gap:14px !important;
        }
        .asset-actions,
        .header-actions {
            display:flex !important;
            flex-wrap:wrap !important;
            gap:8px !important;
            width:100%;
        }
        .asset-actions button,
        .header-actions button {
            flex:1 1 150px;
        }
    }

    @media (max-width: 900px) {
        .nexus-system-root {
            position:fixed;
            display:block;
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;
        }

        .mobile-header {
            height:62px !important;
            padding:10px 14px !important;
        }

        .side-panel {
            width:min(88vw, 340px) !important;
            max-width:340px;
            left:-105%;
            overflow-y:auto;
            padding-bottom:24px;
        }

        .side-panel.open { left:0; }

        .main-workspace {
            padding:88px 14px 28px 14px !important;
            width:100% !important;
            min-height:100vh;
            overflow:visible !important;
        }

        .mqtt-status-bar {
            top:62px !important;
            left:10px !important;
            right:10px !important;
            width:auto !important;
            min-height:34px !important;
            border-radius:12px !important;
            font-size:10px !important;
            line-height:1.25 !important;
            white-space:normal !important;
        }

        .global-dashboard {
            grid-template-columns:1fr !important;
            gap:12px !important;
            padding:0 !important;
        }

        .global-kpi-card {
            min-height:auto !important;
            padding:18px !important;
        }

        .nexus-hero-title {
            font-size:34px !important;
            letter-spacing:7px !important;
        }

        .asset-header-bar {
            padding:18px !important;
            border-radius:18px !important;
        }

        .asset-id {
            font-size:28px !important;
            line-height:1.1 !important;
            word-break:break-word;
        }

        .map-container {
            min-height:320px !important;
            border-radius:18px !important;
        }

        .modal-card,
        .modal-card-users,
        .pdf-modal-card {
            width:calc(100vw - 24px) !important;
            max-width:calc(100vw - 24px) !important;
            max-height:calc(100vh - 24px) !important;
            overflow:auto !important;
            padding:18px !important;
            border-radius:18px !important;
        }

        .modal-card-users {
            grid-template-columns:1fr !important;
        }

        .config-grid {
            grid-template-columns:1fr !important;
        }
    }

    @media (max-width: 520px) {
        .mobile-logo-text {
            font-size:14px !important;
            letter-spacing:1.5px !important;
        }

        .main-workspace {
            padding-left:10px !important;
            padding-right:10px !important;
        }

        .nexus-hero-title {
            font-size:28px !important;
            letter-spacing:5px !important;
        }

        .vehicle-btn,
        .node-usina,
        .node-frente {
            margin-left:0 !important;
            width:100% !important;
        }

        .sys-btn,
        .btn-nexus-save,
        .btn-nexus-cancel,
        .btn-report-stealth,
        .btn-edit-stealth,
        .btn-delete-stealth {
            width:100% !important;
        }
    }

    :root {
        --bg-sidebar:     #09090f;
        --bg-workspace:   #06060e;
        --bg-card:        rgba(255,255,255,0.028);
        --bg-card-2:      rgba(255,255,255,0.048);
        --bg-card-solid:  #0e0e1a;
        --text-main:      #eeeef4;
        --text-muted:     #55607a;
        --border-color:   rgba(255,255,255,0.07);
        --input-bg:       rgba(255,255,255,0.04);
        --accent:         #ff6600;
        --accent-dim:     rgba(255,102,0,0.12);
        --accent-glow:    rgba(255,102,0,0.32);
        --accent-border:  rgba(255,102,0,0.28);
        --danger:         #ff1744;
        --danger-dim:     rgba(255,23,68,0.12);
        --danger-border:  rgba(255,23,68,0.28);
        --success:        #00e676;
        --success-dim:    rgba(0,230,118,0.1);
        --success-border: rgba(0,230,118,0.25);
        --info:           #00b4d8;
        --info-border:    rgba(0,180,216,0.28);
        --info-bg:        rgba(0,180,216,0.08);
    }

    .light-theme {
        --bg-sidebar:     #ffffff;
        --bg-workspace:   #f1f3f8;
        --bg-card:        rgba(255,255,255,0.85);
        --bg-card-solid:  #ffffff;
        --text-main:      #111827;
        --text-muted:     #6b7280;
        --border-color:   rgba(0,0,0,0.08);
        --input-bg:       rgba(0,0,0,0.04);
        --success:        #059669;
        --success-dim:    rgba(5,150,105,0.1);
        --success-border: rgba(5,150,105,0.25);
        --danger:         #dc2626;
        --danger-dim:     rgba(220,38,38,0.1);
        --danger-border:  rgba(220,38,38,0.25);
        --info:           #0284c7;
        --info-border:    rgba(2,132,199,0.3);
        --info-bg:        rgba(2,132,199,0.07);
    }

    /* ── RAIZ ───────────────────────────────────────────── */
    .nexus-system-root {
        background: var(--bg-workspace) !important;
    }

    .nexus-system-root::before {
        content: '';
        position: fixed;
        bottom: -25%; left: -10%;
        width: 55vw; height: 55vw;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,102,0,0.045) 0%, transparent 68%);
        pointer-events: none;
        z-index: 0;
    }

    @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

    /* ── SIDEBAR ────────────────────────────────────────── */
    .side-panel {
        background: var(--bg-sidebar) !important;
        border-right: 1px solid var(--border-color) !important;
        width: 295px !important;
        position: relative !important;
    }

    .side-panel::after {
        content: '';
        position: absolute;
        top: 18%; right: -1px;
        width: 1px; height: 38%;
        background: linear-gradient(180deg, transparent, var(--accent-glow), transparent);
        pointer-events: none;
    }

    /* Brand */
    .brand-header {
        padding: 22px 18px 18px !important;
        border-bottom: 1px solid var(--border-color) !important;
        position: relative; overflow: hidden;
    }

    .brand-header::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(circle at 0% 50%, var(--accent-dim), transparent 60%);
        opacity: 0; transition: opacity 0.3s ease;
    }

    .brand-header:hover::before { opacity: 1; }

    .brand-logo {
        background: linear-gradient(135deg, rgba(255,102,0,0.2), rgba(255,102,0,0.05)) !important;
        border: 1px solid var(--accent-border) !important;
        box-shadow: 0 0 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.08) !important;
        border-radius: 13px !important;
        width: 44px !important; height: 44px !important;
    }

    .brand-title { font-size: 17px !important; letter-spacing: 5px !important; color: var(--text-main) !important; }
    .brand-subtitle { color: var(--text-muted) !important; letter-spacing: 2px !important; }

    /* Search */
    .search-container {
        padding: 12px 14px !important;
        background: var(--bg-sidebar) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .search-input {
        background: var(--input-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        min-height: 40px !important;
        color: var(--text-main) !important;
        box-shadow: none !important;
    }

    .search-input:focus {
        border-color: var(--accent-border) !important;
        background: var(--accent-dim) !important;
        box-shadow: 0 0 0 3px rgba(255,102,0,0.08) !important;
    }

    /* Fleet List */
    .vehicle-list-container { padding: 12px 8px 16px !important; }

    /* Hierarchy Nodes */
    .node-item {
        border-radius: 14px !important;
        border: 1px solid transparent !important;
        background: rgba(255,255,255,0.018) !important;
        margin: 4px 0 !important;
        min-height: 46px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .node-item::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 auto 0 0 !important;
        width: 3px !important;
        background: transparent !important;
        border-radius: 0 3px 3px 0 !important;
        transition: background 0.2s ease !important;
    }

    .node-item:hover { background: rgba(255,102,0,0.07) !important; border-color: var(--accent-border) !important; }
    .node-item:hover::before { background: var(--accent) !important; }

    .node-client {
        background: linear-gradient(90deg, rgba(255,102,0,0.1), rgba(255,255,255,0.015)) !important;
        border-color: rgba(255,102,0,0.12) !important;
    }

    .node-usina { margin-left: 10px !important; width: calc(100% - 10px) !important; }
    .node-frente { margin-left: 22px !important; width: calc(100% - 22px) !important; }

    .node-title { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.80) !important; }
    .node-sub { font-family: 'JetBrains Mono', monospace !important; font-size: 8px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.42) !important; }

    .node-count-pill {
        border-radius: 10px !important; font-size: 8px !important;
        border: 1px solid var(--border-color) !important;
        background: rgba(0,0,0,0.2) !important; color: var(--text-muted) !important;
    }

    .node-count-pill.ok { color: var(--success) !important; border-color: var(--success-border) !important; background: var(--success-dim) !important; }
    .node-count-pill.fault { color: var(--danger) !important; border-color: var(--danger-border) !important; background: var(--danger-dim) !important; }

    /* Vehicle Buttons */
    .vehicle-btn {
        margin: 5px 0 5px 32px !important;
        width: calc(100% - 36px) !important;
        border-radius: 16px !important;
        border: 1px solid var(--border-color) !important;
        background: rgba(255,255,255,0.025) !important;
        min-height: 56px !important;
        padding: 11px 12px 11px 14px !important;
        color: var(--text-muted) !important;
        transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
    }

    .vehicle-btn:hover {
        background: rgba(255,102,0,0.08) !important;
        border-color: var(--accent-border) !important;
        color: var(--text-main) !important;
        transform: translateX(2px) !important;
    }

    .vehicle-btn.active {
        border: 1.5px solid rgba(255,102,0,0.55) !important;
        background: rgba(255,102,0,0.12) !important;
        box-shadow: 0 0 20px rgba(255,102,0,0.16) !important;
        color: var(--accent) !important;
        transform: translateX(2px) !important;
    }

    .vehicle-name { color: inherit !important; }

    .vehicle-mini span {
        padding: 2px 6px !important; border-radius: 999px !important;
        border: 1px solid var(--border-color) !important; background: rgba(0,0,0,0.15) !important;
    }

    /* LEDs */
    .led-on { background: var(--success) !important; box-shadow: 0 0 0 2px var(--success-dim), 0 0 10px var(--success) !important; }
    .led-off { background: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-dim), 0 0 8px var(--danger) !important; }

    /* System Actions */
    .system-actions {
        padding: 14px 14px 20px !important;
        border-top: 1px solid var(--border-color) !important;
        background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18)) !important;
        gap: 8px !important;
    }

    .sys-btn {
        background: var(--bg-card) !important; border: 1px solid var(--border-color) !important;
        color: var(--text-muted) !important; border-radius: 13px !important;
        min-height: 40px !important; padding: 10px 14px !important;
        font-size: 10px !important; letter-spacing: 0.8px !important; text-align: left !important;
        transition: all 0.22s ease !important;
    }

    .sys-btn:hover { color: var(--text-main) !important; background: var(--bg-card-2) !important; border-color: rgba(255,255,255,0.12) !important; }
    .sys-config-btn { border-color: var(--accent-border) !important; color: var(--accent) !important; background: var(--accent-dim) !important; }
    .sys-config-btn:hover { background: rgba(255,102,0,0.2) !important; box-shadow: 0 0 16px rgba(255,102,0,0.1) !important; }

    /* ── WORKSPACE ──────────────────────────────────────── */
    .main-workspace {
        padding: 0 36px 28px !important;
        background: var(--bg-workspace) !important;
        scrollbar-width: thin;
        scrollbar-color: var(--border-color) transparent;
    }

    .mqtt-status-bar {
        position: fixed !important;
        top: 0 !important;
        left: 320px !important; /* alinha com a borda direita do side-panel (320px no desktop) */
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
        backdrop-filter: blur(14px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
        overflow: hidden;
        height: 30px;
        display: flex;
        align-items: center;
        text-align: left !important;
        flex-shrink: 0;
    }
    /* FIX 2026-06: removido `padding-top: 52px` legacy.
       Era pra compensar o ticker MQTT fixo no topo. Esse ticker foi
       substituído por .athena-topbar inline (parte do fluxo normal),
       então não precisa mais reservar espaço vertical extra. */

    .mqtt-bar-track {
        display: flex;
        width: max-content;
        animation: athenaMarquee 38s linear infinite;
        will-change: transform;
    }

    .mqtt-bar-content {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding-right: 14px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 3px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mqtt-bar-dot {
        font-size: 8px;
        line-height: 1;
        animation: athenaPulseDot 2.2s ease-in-out infinite;
    }

    .mqtt-bar-sep {
        opacity: 0.45;
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0;
    }
    .mqtt-status-bar:hover .mqtt-bar-track { animation-play-state: paused; }

    @keyframes athenaMarquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
    @keyframes athenaPulseDot {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.25); }
    }

    .mqtt-online {
        background: linear-gradient(90deg, rgba(0,230,118,0.05), rgba(0,230,118,0.10), rgba(0,230,118,0.05)) !important;
        color: #00e676 !important;
        border-bottom: 1px solid rgba(0,230,118,0.22) !important;
        text-shadow: 0 0 12px rgba(0,230,118,0.25);
    }
    .mqtt-online .mqtt-bar-sep { color: rgba(0,230,118,0.5); }

    .mqtt-offline {
        background: linear-gradient(90deg, rgba(255,23,68,0.08), rgba(255,23,68,0.18), rgba(255,23,68,0.08)) !important;
        color: #ff5577 !important;
        border-bottom: 1px solid rgba(255,23,68,0.35) !important;
        text-shadow: 0 0 12px rgba(255,23,68,0.30);
    }
    .mqtt-offline .mqtt-bar-sep { color: rgba(255,23,68,0.55); }
    .mqtt-offline .mqtt-bar-dot { animation: athenaPulseDot 0.9s ease-in-out infinite; }

    /* ── HERO ───────────────────────────────────────────── */
    .nexus-hero-title {
        font-size: 82px !important; letter-spacing: 22px !important;
        background: linear-gradient(135deg, var(--text-main) 20%, var(--accent) 100%) !important;
        -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
        background-clip: text !important; text-shadow: none !important;
    }
    .light-theme .nexus-hero-title {
        background: linear-gradient(135deg, #111827 20%, var(--accent) 100%) !important;
        -webkit-background-clip: text !important; background-clip: text !important;
    }
    .nexus-hero-subtitle {
        letter-spacing: 5px !important; color: var(--accent) !important;
        font-size: 10px !important; margin-top: 10px !important; font-weight: 700 !important;
    }

    .nexus-empty-bg {
        background-image: linear-gradient(rgba(255,102,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,102,0,0.04) 1px, transparent 1px) !important;
        background-size: 48px 48px !important;
    }

    .light-theme .nexus-empty-bg {
        background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
    }

    /* KPI Cards */
    .global-dashboard { gap: 18px !important; margin-top: 50px !important; }

    .global-kpi-card {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 22px !important;
        padding: 36px 26px !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
        position: relative !important; overflow: hidden !important;
    }

    .global-kpi-card::before {
        content: '' !important; position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important;
        background: linear-gradient(90deg, transparent, var(--accent-glow), transparent) !important;
    }

    .global-kpi-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 30px rgba(255,102,0,0.1) !important;
    }

    .card-1 { border-bottom: 2px solid var(--accent) !important; }
    .card-2 { border-bottom: 2px solid var(--success) !important; }
    .card-3 { border-bottom: 2px solid var(--danger) !important; }

    .global-kpi-value { font-size: 56px !important; font-weight: 900 !important; line-height: 1 !important; }
    .global-kpi-label { font-size: 9px !important; letter-spacing: 2.5px !important; color: var(--text-muted) !important; }

    /* ── ASSET HEADER ───────────────────────────────────── */
    .asset-header-bar {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        border-left: 3px solid var(--accent) !important;
        border-radius: 22px !important;
        padding: 22px 28px !important;
        backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
        margin-top: 0 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
        position: relative !important; overflow: hidden !important;
    }
    .asset-header-bar::before {
        content: '' !important; position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important;
        background: linear-gradient(90deg, var(--accent-glow), transparent 55%) !important;
    }

    .asset-header-bar::after {
        content: '' !important; position: absolute !important;
        top: -40% !important; left: -5% !important; width: 35% !important; height: 180% !important;
        background: radial-gradient(ellipse, rgba(255,102,0,0.07) 0%, transparent 70%) !important;
        pointer-events: none !important;
    }

    .asset-tag { font-size: 8px !important; letter-spacing: 3px !important; color: var(--accent) !important; font-weight: 800 !important; text-transform: uppercase !important; }
    .asset-id { font-size: 26px !important; font-weight: 900 !important; letter-spacing: 1px !important; color: var(--text-main) !important; }
    .asset-meta { color: var(--text-muted) !important; font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
    .status-badge { border-radius: 999px !important; border: 1px solid var(--border-color) !important; background: var(--bg-card-2) !important; font-size: 9px !important; padding: 4px 10px !important; }

    /* Botões de ação */
    .btn-report-stealth {
        background: var(--info-bg) !important; border: 1px solid var(--info-border) !important;
        color: var(--info) !important; border-radius: 12px !important; padding: 8px 14px !important;
        font-size: 9.5px !important; letter-spacing: 0.8px !important; transition: all 0.22s ease !important;
    }
    .btn-report-stealth:hover { background: var(--info) !important; color: #000 !important; box-shadow: 0 0 20px rgba(0,180,216,0.3) !important; transform: translateY(-1px) !important; }

    .btn-edit-stealth {
        background: transparent !important; border: 1px solid var(--accent-border) !important;
        color: var(--accent) !important; border-radius: 12px !important; padding: 8px 14px !important;
        font-size: 9.5px !important; letter-spacing: 0.8px !important; transition: all 0.22s ease !important;
    }
    .btn-edit-stealth:hover { background: var(--accent) !important; color: #fff !important; box-shadow: 0 0 20px var(--accent-glow) !important; transform: translateY(-1px) !important; }

    .btn-delete-stealth {
        background: transparent !important; border: 1px solid var(--danger-border) !important;
        color: var(--danger) !important; border-radius: 12px !important; padding: 8px 14px !important;
        font-size: 9.5px !important; letter-spacing: 0.8px !important; transition: all 0.22s ease !important;
    }
    .btn-delete-stealth:hover { background: var(--danger) !important; color: #fff !important; box-shadow: 0 0 20px rgba(255,23,68,0.3) !important; transform: translateY(-1px) !important; }

    /* Mapa */
    .map-container { border-radius: 22px !important; border: 1px solid var(--border-color) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important; }

    .gps-only-map-notice {
        background: rgba(6,6,14,0.88) !important;
        backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.12) !important;
    }

    /* ── MODAIS ─────────────────────────────────────────── */
    .modal-overlay {
        background: rgba(4,4,10,0.88) !important;
        backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    }

    .modal-card {
        background: linear-gradient(180deg, rgba(20,20,25,0.97), rgba(12,12,16,0.99)) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-top: none !important;
        border-radius: 18px !important; padding: 30px !important;
        box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03) !important;
        position: relative !important;
        /* overflow: hidden auto = X clipa (mantem a barra colorida do ::before
           cortada nas bordas) + Y permite scroll quando conteudo cresce.
           max-height/min-height garante que o card NUNCA estoura a viewport. */
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 92vh !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 102, 0, .55) transparent !important;
    }
    .modal-card::-webkit-scrollbar { width: 8px; }
    .modal-card::-webkit-scrollbar-track { background: transparent; }
    .modal-card::-webkit-scrollbar-thumb {
        background: rgba(255, 102, 0, .45);
        border-radius: 8px;
    }
    .modal-card::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 102, 0, .70);
    }
    /* ═══════════════════════════════════════════════════════════════════
       MODAL DE CADASTRO DE CAMINHÃO — design novo (2026-05)
       Layout em 3 zonas: head fixo · body scroll · footer fixo.
       Largura 760px (96vw em mobile), 2 colunas onde cabe.
       ═══════════════════════════════════════════════════════════════════ */
    .cadastro-truck-card {
        width: 760px !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(22,22,28,0.985), rgba(13,13,18,0.99)) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-top: none !important;
        box-shadow: 0 40px 100px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,102,0,0.06) !important;
    }
    /* Barra superior gradiente fina (identidade ATHENA) */
    .cadastro-truck-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
        background: linear-gradient(90deg, #00d4ff 0%, #00a8e8 30%, #ff8c00 70%, #ff6600 100%) !important;
        border-radius: 18px 18px 0 0 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    .cadastro-truck-head {
        flex: 0 0 auto;
        padding: 26px 32px 18px 32px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: linear-gradient(180deg, rgba(28,28,36,0.55), rgba(20,20,26,0.20));
        position: relative;
    }
    .cadastro-truck-eyebrow {
        font-size: 9.5px; letter-spacing: 3px; font-weight: 800;
        color: rgba(255,102,0,0.78); text-transform: uppercase;
    }
    .cadastro-truck-title {
        font-size: 22px; font-weight: 900; letter-spacing: .5px;
        color: #fff; margin-top: 6px;
        display: flex; align-items: center; gap: 12px;
    }
    .cadastro-truck-ico {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        background: linear-gradient(135deg, rgba(255,140,0,0.25), rgba(255,102,0,0.10));
        border: 1px solid rgba(255,102,0,0.35);
        border-radius: 8px;
        font-size: 16px; color: #ffb567;
    }
    .cadastro-truck-sub {
        font-size: 11px; color: rgba(255,255,255,0.45);
        margin-top: 4px; letter-spacing: .3px;
    }

    .cadastro-truck-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 22px 32px 22px 32px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,102,0,0.45) transparent;
    }
    .cadastro-truck-body::-webkit-scrollbar { width: 8px; }
    .cadastro-truck-body::-webkit-scrollbar-track { background: transparent; }
    .cadastro-truck-body::-webkit-scrollbar-thumb { background: rgba(255,102,0,0.45); border-radius: 8px; }
    .cadastro-truck-body::-webkit-scrollbar-thumb:hover { background: rgba(255,102,0,0.70); }

    .cadastro-truck-section { margin-bottom: 18px; }
    .cadastro-truck-section:last-child { margin-bottom: 4px; }
    .cadastro-truck-section-title {
        font-size: 10px; letter-spacing: 2.5px; font-weight: 800;
        color: rgba(255,102,0,0.85); text-transform: uppercase;
        margin-bottom: 10px;
    }

    .cadastro-truck-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .cadastro-truck-card .nexus-input-group { margin-bottom: 12px; }
    .cadastro-truck-card .nexus-input-group:last-child { margin-bottom: 0; }
    .cadastro-truck-card .nexus-input { padding: 11px 14px; font-size: 12px; }
    .cadastro-truck-card .nexus-input.mono { font-family: 'JetBrains Mono', monospace; }
    .cadastro-truck-hint {
        margin-top: 5px;
        font-size: 9.5px;
        color: rgba(255,255,255,0.42);
        line-height: 1.45;
    }
    .cadastro-truck-hint code {
        background: rgba(255,102,0,0.10);
        color: #ffb567;
        padding: 1px 5px;
        border-radius: 3px;
        font-size: 9px;
    }

    /* Radios estilo card (ao invés de radio default minúsculo) */
    .cadastro-truck-radio-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 4px;
    }
    .cadastro-truck-radio {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.02);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.18s ease;
    }
    .cadastro-truck-radio:hover {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.18);
    }
    .cadastro-truck-radio.active {
        border-color: rgba(255,102,0,0.55);
        background: rgba(255,102,0,0.08);
        box-shadow: 0 0 0 1px rgba(255,102,0,0.18);
    }
    .cadastro-truck-radio input[type="radio"] { accent-color: #ff6600; }
    .cadastro-truck-radio-title {
        font-size: 12px; font-weight: 700; color: #fff;
    }
    .cadastro-truck-radio-sub {
        font-size: 10px; color: rgba(255,255,255,0.45);
        margin-top: 1px;
    }

    .cadastro-truck-footer {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 32px 22px 32px;
        border-top: 1px solid rgba(255,255,255,0.08);
        background: linear-gradient(180deg, rgba(15,15,20,0.20), rgba(10,10,14,0.55));
    }
    .cadastro-truck-footer .btn-nexus-save {
        flex: 0 0 auto !important;
        min-width: 220px !important;
    }
    .cadastro-truck-footer .btn-nexus-cancel {
        flex: 0 0 auto !important;
        min-width: 140px !important;
    }

    @media (max-width: 720px) {
        .cadastro-truck-grid-2,
        .cadastro-truck-radio-row { grid-template-columns: 1fr !important; }
        .cadastro-truck-head { padding: 22px 22px 14px 22px; }
        .cadastro-truck-body { padding: 18px 22px; }
        .cadastro-truck-footer { padding: 14px 22px 18px 22px; }
        .cadastro-truck-footer .btn-nexus-save,
        .cadastro-truck-footer .btn-nexus-cancel { min-width: 0 !important; flex: 1 1 auto !important; }
    }
    .modal-card::before {
        content: '' !important; position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important;
        background: linear-gradient(90deg, #00d4ff 0%, #00a8e8 25%, #ff8c00 75%, #ff6600 100%) !important;
        border-radius: 18px 18px 0 0 !important; pointer-events: none !important;
    }
    .modal-card::after {
        content: '' !important; position: absolute !important;
        top: 4px !important; left: 0 !important; right: 0 !important; height: 90px !important;
        background: radial-gradient(ellipse at 30% 0%, rgba(0,212,255,0.05), transparent 60%),
                    radial-gradient(ellipse at 70% 0%, rgba(255,102,0,0.06), transparent 60%) !important;
        pointer-events: none !important;
    }

    .modal-header-nexus { position: relative !important; margin-bottom: 22px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
    .modal-title-nexus { font-family: 'JetBrains Mono','Courier New',monospace !important; font-size: 11.5px !important; font-weight: 700 !important; color: rgba(255,255,255,0.55) !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; gap: 10px !important; }
    .modal-title-nexus > span:first-child { color: var(--accent) !important; font-size: 14px !important; opacity: 0.9 !important; }
    .modal-subtitle-nexus { font-size: 10.5px !important; color: rgba(255,255,255,0.78) !important; letter-spacing: 2px !important; margin-top: 8px !important; font-weight: 600 !important; border-left: 2px solid var(--accent) !important; padding: 4px 0 4px 10px !important; font-family: 'JetBrains Mono',monospace !important; text-transform: uppercase !important; }

    /* Inputs — visual mais limpo, com indicador laranja sutil ao lado do label */
    .nexus-input-group { position: relative !important; }
    .nexus-input { background: rgba(0,0,0,0.35) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; color: var(--text-main) !important; transition: all 0.18s cubic-bezier(.2,.8,.2,1) !important; padding: 13px 14px !important; font-size: 12px !important; }
    .nexus-input:hover { border-color: rgba(255,255,255,0.14) !important; background: rgba(0,0,0,0.45) !important; }
    .nexus-input:focus { border-color: rgba(255,102,0,0.55) !important; background: rgba(0,0,0,0.5) !important; box-shadow: 0 0 0 3px rgba(255,102,0,0.10) !important; }
    .nexus-input::placeholder { color: rgba(255,255,255,0.28) !important; }
    .nexus-label { color: rgba(255,255,255,0.55) !important; font-size: 9.5px !important; letter-spacing: 1.6px !important; font-weight: 700 !important; text-transform: uppercase !important; margin-bottom: 7px !important; display: flex !important; align-items: center !important; gap: 6px !important; font-family: 'JetBrains Mono',monospace !important; }
    .nexus-label::before { content: '' !important; display: inline-block !important; width: 4px !important; height: 4px !important; border-radius: 50% !important; background: var(--accent) !important; box-shadow: 0 0 6px var(--accent) !important; }

    /* Botões de modal — mais polidos */
    .btn-nexus-save { background: linear-gradient(135deg, #ff8c00, #ff6600) !important; border: none !important; border-radius: 10px !important; padding: 13px 22px !important; letter-spacing: 1.4px !important; transition: all 0.18s cubic-bezier(.2,.8,.2,1) !important; font-weight: 800 !important; font-size: 11px !important; box-shadow: 0 4px 16px rgba(255,102,0,0.28) !important; color: #fff !important; }
    .btn-nexus-save:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 24px rgba(255,102,0,0.45) !important; filter: brightness(1.08) !important; }
    .btn-nexus-save:active { transform: translateY(0) !important; }
    .btn-nexus-cancel { border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 10px !important; padding: 13px 22px !important; background: transparent !important; color: rgba(255,255,255,0.55) !important; transition: all 0.18s cubic-bezier(.2,.8,.2,1) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1.4px !important; }
    .btn-nexus-cancel:hover { color: #fff !important; background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.20) !important; }
    .nexus-footer-actions { display: flex !important; gap: 10px !important; margin-top: 22px !important; }
    .nexus-footer-actions .btn-nexus-save { flex: 2 !important; }
    .nexus-footer-actions .btn-nexus-cancel { flex: 1 !important; }

    /* Lista de usuários */
    .user-item-row { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: 14px !important; transition: border-color 0.2s ease !important; }
    .user-item-row:hover { border-color: rgba(255,255,255,0.12) !important; }
    .user-item-name { color: var(--text-main) !important; }
    .user-item-email { color: var(--text-muted) !important; }
    .user-item-role { background: var(--info-bg) !important; color: var(--info) !important; border: 1px solid var(--info-border) !important; border-radius: 999px !important; }
    .btn-delete-user { background: var(--danger-dim) !important; border: 1px solid var(--danger-border) !important; color: var(--danger) !important; border-radius: 8px !important; transition: all 0.22s ease !important; }
    .btn-delete-user:hover { background: var(--danger) !important; color: #fff !important; box-shadow: 0 0 14px rgba(255,23,68,0.3) !important; }

    /* Config actions */
    .config-action { border-radius: 18px !important; border: 1px solid var(--border-color) !important; background: var(--bg-card) !important; transition: all 0.25s ease !important; }
    .config-action b { color: var(--text-main) !important; }
    .config-action span { color: var(--text-muted) !important; }
    .config-action:hover { transform: translateY(-3px) !important; border-color: var(--accent-border) !important; box-shadow: 0 8px 24px rgba(255,102,0,0.1) !important; background: rgba(255,102,0,0.06) !important; }

    /* Fleet summary */
    .fleet-summary-v74 { border-radius: 16px !important; margin: 0 4px 12px !important; }
    .fleet-summary-kpi-v74 { border-radius: 10px !important; }

    /* ── LIGHT THEME OVERRIDES ──────────────────────────── */
    .light-theme .side-panel { box-shadow: 4px 0 20px rgba(0,0,0,0.06) !important; }
    .light-theme .node-item { background: rgba(0,0,0,0.025) !important; }
    .light-theme .node-item:hover { background: rgba(255,102,0,0.06) !important; }
    .light-theme .node-client { background: linear-gradient(90deg, rgba(255,102,0,0.08), rgba(0,0,0,0.02)) !important; }
    .light-theme .vehicle-btn { background: rgba(0,0,0,0.025) !important; color: #4b5563 !important; }
    .light-theme .vehicle-btn:hover { background: rgba(255,102,0,0.07) !important; color: #111 !important; }
    .light-theme .vehicle-btn.active { background: linear-gradient(135deg, rgba(255,102,0,0.12), #fff) !important; }
    .light-theme .main-workspace { background: radial-gradient(circle at 20% 0%, rgba(255,102,0,0.06), transparent 25%), linear-gradient(180deg, #f1f3f8, #e8ecf4) !important; }
    .light-theme .asset-header-bar { background: rgba(255,255,255,0.92) !important; }
    .light-theme .global-kpi-card { background: rgba(255,255,255,0.88) !important; }
    .light-theme .modal-card { background: #fff !important; box-shadow: 0 24px 64px rgba(0,0,0,0.14) !important; }
    .light-theme .node-title,
    .light-theme .brand-title,
    .light-theme .asset-id,
    .light-theme .modal-title-nexus,
    .light-theme .config-action b,
    .light-theme .mobile-logo-text { color: #111827 !important; text-shadow: none !important; }
    .light-theme .nexus-input { background: rgba(0,0,0,0.04) !important; color: #111827 !important; border-color: rgba(0,0,0,0.1) !important; }
    .light-theme .mqtt-status-bar { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(12px) !important; }
    .light-theme .sys-btn { background: #fff !important; color: #374151 !important; border-color: rgba(0,0,0,0.1) !important; }
    .light-theme .user-item-row { background: rgba(0,0,0,0.025) !important; }

    /* ── MOBILE — Preservação dos estilos responsivos ───── */
    @media (max-width: 900px) {
        .mqtt-status-bar {
            position: fixed !important; top: 62px !important;
            left: 10px !important; right: 10px !important; width: auto !important;
            margin: 0 !important; border-radius: 12px !important;
        }

        /* Mobile: padding-top compensa mobile-header fixo (~62px). Sem lateral. */
        .main-workspace { padding: 62px 0 20px !important; }

        .asset-header-bar {
            border-radius: 18px !important; padding: 18px !important;
        }

        .map-container { border-radius: 18px !important; }

        .modal-card, .modal-card-users, .pdf-modal-card {
            border-radius: 18px !important; padding: 18px !important;
        }
    }

    /* ── HERO SHELL ─────────────────────────────────────── */
    .nexus-hero-shell {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .nexus-empty-bg {
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    .nexus-hero-inner {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* ── ASSET ACTIONS ──────────────────────────────────── */
    .asset-actions {
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    @keyframes ambientOrb {
        0%, 100% { opacity: 0.5;  transform: translate(-50%,-50%) scale(1); }
        50%       { opacity: 0.78; transform: translate(-50%,-50%) scale(1.1); }
    }

    @keyframes radarRing {
        0%   { transform: translate(-50%,-50%) scale(0.28); opacity: 0.65; }
        100% { transform: translate(-50%,-50%) scale(2.9);  opacity: 0; }
    }

    @keyframes borderGlow {
        0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
        50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.2), -5px 0 22px rgba(255,102,0,0.2); }
    }

    @keyframes hmLed {
        0%, 100% { box-shadow: 0 0 0 2px rgba(0,230,118,0.15), 0 0 6px rgba(0,230,118,0.55); }
        50%       { box-shadow: 0 0 0 4px rgba(0,230,118,0.06), 0 0 18px rgba(0,230,118,0.85); }
    }

    @keyframes hmShimmer {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(500%); }
    }

    @keyframes heroTitleGlow {
        0%, 100% { filter: none; }
        50%       { filter: drop-shadow(0 0 22px rgba(255,102,0,0.22)); }
    }

    /* Hero Shell — floating ambient orb */
    .nexus-hero-shell {
        overflow: hidden !important;
    }

    .nexus-hero-shell::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important; left: 50% !important;
        width: min(740px, 92vw) !important;
        height: min(740px, 92vw) !important;
        background: radial-gradient(circle, rgba(255,102,0,0.054) 0%, transparent 66%) !important;
        border-radius: 50% !important;
        animation: ambientOrb 7s ease-in-out infinite !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Hero Inner — dual radar rings */
    .nexus-hero-inner {
        position: relative !important;
    }

    .nexus-hero-inner::before {
        content: '' !important;
        position: absolute !important;
        top: 38px !important; left: 50% !important;
        width: 170px !important; height: 170px !important;
        border: 1px solid rgba(255,102,0,0.16) !important;
        border-radius: 50% !important;
        animation: radarRing 4.2s ease-out infinite !important;
        pointer-events: none !important;
    }

    .nexus-hero-inner::after {
        content: '' !important;
        position: absolute !important;
        top: 38px !important; left: 50% !important;
        width: 170px !important; height: 170px !important;
        border: 1px solid rgba(255,102,0,0.10) !important;
        border-radius: 50% !important;
        animation: radarRing 4.2s ease-out infinite 2.1s !important;
        pointer-events: none !important;
    }

    /* Hero title — entrance + subtle breath glow */
    .nexus-hero-title {
        animation: titleEntrance 1.5s cubic-bezier(0.2,0.8,0.2,1) forwards,
                   heroTitleGlow 5s ease-in-out infinite 2s !important;
    }

    /* KPI Cards — shimmer sweep */
    .global-kpi-card {
        overflow: hidden !important;
    }

    .global-kpi-card::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 20% !important;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.036), transparent) !important;
        animation: hmShimmer 6s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .global-kpi-card.card-1::after { animation-delay: 0s !important; }
    .global-kpi-card.card-2::after { animation-delay: 1.8s !important; }
    .global-kpi-card.card-3::after { animation-delay: 3.6s !important; }

    /* KPI Values — pulsing glow */
    .global-kpi-value {
        animation: kpiPulse 4s ease-in-out infinite !important;
    }

    /* Asset Header — pulsing left border shadow */
    .asset-header-bar {
        animation: borderGlow 4.5s ease-in-out infinite !important;
    }

    /* Status bar — live dot indicator */
    .mqtt-online::before {
        content: '' !important;
        display: inline-block !important;
        width: 5px !important; height: 5px !important;
        background: var(--success) !important;
        border-radius: 50% !important;
        margin-right: 8px !important;
        animation: hmLed 2s ease-in-out infinite !important;
        vertical-align: middle !important;
        position: relative !important;
        top: -1px !important;
    }

    /* Vehicle buttons — active name glow */
    .vehicle-btn.active .vehicle-name {
        text-shadow: 0 0 14px rgba(255,102,0,0.42) !important;
    }

    /* System action config button — hover lift */
    .sys-config-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 0 26px rgba(255,102,0,0.2) !important;
    }

    /* Light theme — disable all glow animations */
    .light-theme .nexus-hero-shell::after           { animation: none !important; opacity: 0.18 !important; }
    .light-theme .nexus-hero-inner::before,
    .light-theme .nexus-hero-inner::after           { display: none !important; }
    .light-theme .nexus-hero-title                  { animation: titleEntrance 1.5s cubic-bezier(0.2,0.8,0.2,1) forwards !important; }
    .light-theme .asset-header-bar                  { animation: none !important; }
    .light-theme .global-kpi-card::after            { display: none !important; }
    .light-theme .global-kpi-value                  { animation: none !important; }
    .light-theme .mqtt-online::before               { animation: none !important; box-shadow: none !important; }
    .light-theme .vehicle-btn.active .vehicle-name  { text-shadow: none !important; }
    .light-theme .sys-config-btn:hover              { transform: translateY(-1px) !important; box-shadow: none !important; }

    /* ══════════════════════════════════════════════════════
       HOME — MISSION CONTROL SHELL V100
    ══════════════════════════════════════════════════════ */
    @keyframes hmScan    { 0%{top:-2px;opacity:0}5%{opacity:.85}95%{opacity:.85}100%{top:100%;opacity:0} }
    @keyframes hmOrb     { 0%,100%{opacity:.38;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.12)} }
    @keyframes hmRing    { from{transform:translate(-50%,-50%) scale(.18);opacity:.7}to{transform:translate(-50%,-50%) scale(3);opacity:0} }
    @keyframes hmFadeUp  { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} }
    @keyframes hmPulse   { 0%,100%{opacity:1}50%{opacity:.5} }
    @keyframes hmShine   { from{transform:translateX(-120%)}to{transform:translateX(500%)} }
    @keyframes hmLedGrn  { 0%,100%{box-shadow:0 0 3px 1px rgba(0,230,118,.6)}50%{box-shadow:0 0 9px 3px rgba(0,230,118,.9)} }
    @keyframes hmGlow    { 0%,100%{filter:none}50%{filter:drop-shadow(0 0 18px rgba(255,102,0,.28))} }
    @keyframes hmBorderP { 0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.22)}50%{box-shadow:0 8px 32px rgba(0,0,0,.22),-5px 0 28px rgba(255,102,0,.18)} }

    /* SIDEBAR REDESIGN */
    .nexus-sidebar {
        background: linear-gradient(180deg,rgba(10,10,22,.99) 0%,rgba(6,6,16,1) 100%) !important;
        border-right: 1px solid rgba(255,255,255,.055) !important;
        box-shadow: 4px 0 40px rgba(0,0,0,.45) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .nexus-sidebar::before {
        content:''; position:absolute; top:0; right:0; width:1px; height:100%;
        background: linear-gradient(180deg,var(--accent),rgba(0,210,255,.5),transparent);
        pointer-events:none;
    }
    .nexus-sidebar::after {
        content:''; position:absolute; top:0; left:0; right:0; bottom:0;
        background: radial-gradient(ellipse at 50% 0%, rgba(255,102,0,.06) 0%, transparent 65%);
        pointer-events:none;
    }
    .nexus-brand-area {
        position: relative; overflow: hidden;
        background: linear-gradient(135deg,rgba(255,102,0,.12),rgba(0,0,0,0)) !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        padding-bottom: 16px !important;
    }
    .nexus-brand-area::after {
        content:''; position:absolute; top:0; left:0; right:0; height:1px;
        background: linear-gradient(90deg,transparent,var(--accent),transparent);
    }

    /* VEHICLE BUTTONS */
    .vehicle-btn {
        position: relative; overflow: hidden;
        border-radius: 12px !important;
        transition: all .25s cubic-bezier(.16,1,.3,1) !important;
        border: 1px solid transparent !important;
    }
    .vehicle-btn:hover {
        background: rgba(255,102,0,.08) !important;
        border-color: rgba(255,102,0,.25) !important;
        transform: translateX(4px) !important;
    }
    .vehicle-btn.active {
        background: linear-gradient(135deg,rgba(255,102,0,.15),rgba(0,210,255,.05)) !important;
        border-color: rgba(255,102,0,.4) !important;
        box-shadow: 0 4px 20px rgba(255,102,0,.15), inset 0 1px 0 rgba(255,255,255,.06) !important;
    }
    .vehicle-btn.active::after { content: none !important; }

    /* HERO SHELL REDESIGN */
    .nexus-hero-shell {
        position: relative !important; overflow: hidden !important;
        background: linear-gradient(160deg,rgba(12,12,24,.97) 0%,rgba(6,6,14,.99) 100%) !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255,255,255,.06) !important;
        box-shadow: 0 24px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
        animation: hmFadeUp .5s cubic-bezier(.16,1,.3,1) both, hmBorderP 5s ease-in-out infinite !important;
    }
    .nexus-hero-shell::before {
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background: linear-gradient(90deg,transparent,var(--accent) 30%,rgba(0,210,255,.6) 70%,transparent);
    }
    .nexus-hero-shell::after {
        content:''; position:absolute; top:-100%; left:-50%; width:200%; height:300%;
        background: radial-gradient(ellipse at 50% 0%,rgba(255,102,0,.07) 0%,transparent 60%);
        pointer-events:none; animation: hmOrb 6s ease-in-out infinite;
    }

    /* HERO INNER: radar rings */
    .nexus-hero-inner {
        position: relative !important;
        padding: 32px !important;
    }
    .nexus-hero-inner::before,
    .nexus-hero-inner::after {
        content:''; position:absolute; left:50%; top:50%;
        width:560px; height:560px; border-radius:50%;
        border:1px solid rgba(255,102,0,.07);
        pointer-events:none;
        animation: hmRing 5s linear infinite;
    }
    .nexus-hero-inner::after { animation-delay: 2.5s; }

    /* HERO TITLE */
    .nexus-hero-title {
        animation: hmGlow 5s ease-in-out infinite !important;
    }

    /* KPI CARDS */
    .global-kpi-card {
        position: relative !important; overflow: hidden !important;
        border-radius: 16px !important;
        background: linear-gradient(160deg,rgba(18,18,32,.97),rgba(10,10,22,.99)) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        box-shadow: 0 12px 36px rgba(0,0,0,.35) !important;
        transition: transform .25s, box-shadow .25s !important;
    }
    .global-kpi-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 20px 48px rgba(0,0,0,.45) !important;
    }
    .global-kpi-card::before {
        content:''; position:absolute; top:0; left:0; right:0; height:1px;
        background:linear-gradient(90deg,transparent,var(--accent),transparent);
    }
    .global-kpi-card::after {
        content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
        animation: hmShine 4s ease-in-out infinite;
    }
    .global-kpi-card:nth-child(2)::after { animation-delay: .8s; }
    .global-kpi-card:nth-child(3)::after { animation-delay: 1.6s; }
    .global-kpi-card:nth-child(4)::after { animation-delay: 2.4s; }

    /* ASSET HEADER BAR */
    .asset-header-bar {
        border-radius: 16px !important;
        background: linear-gradient(135deg,rgba(18,18,32,.97),rgba(10,10,22,.99)) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        box-shadow: 0 12px 36px rgba(0,0,0,.35) !important;
        animation: hmBorderP 4.5s ease-in-out infinite !important;
    }

    /* MQTT LED */
    .mqtt-online::before {
        content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
        background:var(--success); margin-right:6px; vertical-align:middle;
        animation: hmLedGrn 2s infinite !important;
    }

    /* SEARCH BOX */
    .nexus-search-input {
        background: rgba(255,255,255,.04) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 10px !important;
        transition: border-color .2s, box-shadow .2s !important;
    }
    .nexus-search-input:focus {
        border-color: rgba(255,102,0,.5) !important;
        box-shadow: 0 0 0 3px rgba(255,102,0,.1) !important;
    }

    /* STATUS BAR */
    .nexus-status-bar {
        border-radius: 12px !important;
        background: rgba(10,10,20,.92) !important;
        border: 1px solid rgba(255,255,255,.06) !important;
        backdrop-filter: blur(12px) !important;
    }

    /* SCAN LINE on hero */
    .nexus-hero-shell .nexus-hero-inner > .mc-scan-line {
        position:absolute; top:0; left:0; right:0; height:2px;
        background: linear-gradient(90deg,transparent,rgba(255,102,0,.5),transparent);
        animation: hmScan 6s linear infinite; pointer-events:none;
    }

    /* LIGHT THEME */
    .light-theme .nexus-sidebar           { background: rgba(248,248,252,.98) !important; border-color:rgba(0,0,0,.08) !important; box-shadow:none !important; }
    .light-theme .nexus-sidebar::before   { display:none !important; }
    .light-theme .nexus-sidebar::after    { display:none !important; }
    .light-theme .nexus-hero-shell        { background:rgba(248,248,252,.97) !important; border-color:rgba(0,0,0,.08) !important; box-shadow:0 8px 24px rgba(0,0,0,.08) !important; animation:none !important; }
    .light-theme .nexus-hero-shell::before,.light-theme .nexus-hero-shell::after { display:none !important; }
    .light-theme .nexus-hero-inner::before,.light-theme .nexus-hero-inner::after { display:none !important; }
    .light-theme .global-kpi-card         { background:rgba(248,248,252,.97) !important; border-color:rgba(0,0,0,.08) !important; box-shadow:0 4px 16px rgba(0,0,0,.06) !important; }
    .light-theme .global-kpi-card::before,.light-theme .global-kpi-card::after { display:none !important; }
    .light-theme .asset-header-bar        { background:rgba(248,248,252,.97) !important; border-color:rgba(0,0,0,.08) !important; animation:none !important; }
    .light-theme .vehicle-btn:hover       { transform:none !important; }

    /* ══════════════════════════════════════════════════════
       V101 — MODAIS PREMIUM + LIGHT THEME IMPECÁVEL
    ══════════════════════════════════════════════════════ */
    @keyframes modalIn   { from{opacity:0;transform:scale(.95) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
    @keyframes modalGlow { 0%,100%{box-shadow:0 28px 72px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04)} 50%{box-shadow:0 28px 72px rgba(0,0,0,.65),0 0 0 1px rgba(255,102,0,.18),0 0 60px rgba(255,102,0,.08)} }
    @keyframes overlayIn { from{opacity:0;backdrop-filter:blur(0)} to{opacity:1;backdrop-filter:blur(20px)} }
    @keyframes inputFlow { 0%,100%{box-shadow:0 0 0 3px rgba(255,102,0,.08)} 50%{box-shadow:0 0 0 5px rgba(255,102,0,.15)} }
    @keyframes saveBtn   { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.08)} }

    /* MODAL OVERLAY UPGRADE */
    .modal-overlay {
        background: linear-gradient(135deg,rgba(4,4,12,.85),rgba(8,8,20,.92)) !important;
        backdrop-filter: blur(24px) saturate(140%) !important;
        animation: overlayIn .3s ease-out !important;
    }

    /* MODAL CARD PREMIUM */
    .modal-card {
        background: linear-gradient(160deg,rgba(20,20,38,.99),rgba(8,8,20,.99)) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-top: none !important;
        border-radius: 24px !important;
        padding: 36px !important;
        box-shadow: 0 32px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,102,0,.06) !important;
        position: relative !important; overflow: hidden !important;
        animation: modalIn .35s cubic-bezier(.16,1,.3,1) both, modalGlow 4s ease-in-out infinite !important;
    }
    .modal-card::before {
        content:'' !important; position:absolute !important;
        top:0 !important; left:0 !important; right:0 !important; height:3px !important;
        background: linear-gradient(90deg,transparent,var(--accent) 20%,#00d2ff 50%,var(--accent) 80%,transparent) !important;
        border-radius: 0 !important;
        pointer-events: none !important;
    }
    .modal-card::after {
        content:''; position:absolute; top:-30%; right:-20%;
        width:520px; height:520px; border-radius:50%;
        background: radial-gradient(circle,rgba(255,102,0,.08) 0%,transparent 60%);
        pointer-events: none;
    }
    .modal-card > * { position: relative; z-index: 2; }

    .modal-title-nexus {
        /* Ciano → laranja: legível em qualquer fundo escuro e nunca some */
        background: linear-gradient(135deg,#00d2ff 0%,var(--accent) 100%) !important;
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important;
        font-size: 18px !important; letter-spacing: 1.5px !important;
    }
    .modal-subtitle-nexus {
        background: rgba(255,102,0,.06) !important;
        border-left: 3px solid var(--accent) !important;
        border-radius: 0 8px 8px 0 !important;
        padding: 6px 12px !important;
        color: rgba(255,255,255,.7) !important;
    }

    /* INPUTS PREMIUM */
    .nexus-input {
        background: rgba(255,255,255,.04) !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        font-family: 'Inter',sans-serif !important;
        transition: all .25s cubic-bezier(.16,1,.3,1) !important;
    }
    .nexus-input:hover {
        border-color: rgba(255,255,255,.18) !important;
        background: rgba(255,255,255,.05) !important;
    }
    .nexus-input:focus {
        border-color: var(--accent) !important;
        background: rgba(255,102,0,.04) !important;
        box-shadow: 0 0 0 4px rgba(255,102,0,.12) !important;
        animation: inputFlow 2.5s ease-in-out infinite;
    }
    .nexus-label {
        display: flex; align-items: center; gap: 6px;
        margin-bottom: 8px !important;
    }
    .nexus-label::before {
        content: ''; display: inline-block; width: 4px; height: 4px;
        border-radius: 50%; background: var(--accent);
        box-shadow: 0 0 6px var(--accent);
    }

    /* BOTÕES PREMIUM */
    .btn-nexus-save {
        position: relative; overflow: hidden;
        background: linear-gradient(135deg,#ff6600,#ff8800) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 13px 24px !important;
        font-weight: 900 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase;
        font-size: 11px !important;
        /* Texto escuro em fundo laranja = contraste 12:1 */
        color: #1a0500 !important;
        text-shadow: none !important;
        box-shadow: 0 8px 24px rgba(255,102,0,.3), inset 0 1px 0 rgba(255,255,255,.3) !important;
        transition: all .25s cubic-bezier(.16,1,.3,1) !important;
        animation: saveBtn 3s ease-in-out infinite;
    }
    .btn-nexus-save::before {
        content:''; position:absolute; top:0; left:-110%;
        width:60%; height:100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
        transition: left .6s ease;
    }
    .btn-nexus-save:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 36px rgba(255,102,0,.45) !important; filter: brightness(1.08) !important; }
    .btn-nexus-save:hover::before { left: 110%; }

    .btn-nexus-cancel {
        background: rgba(255,255,255,.04) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 12px !important;
        padding: 13px 24px !important;
        color: rgba(255,255,255,.6) !important;
        font-weight: 800 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase;
        font-size: 11px !important;
        transition: all .22s cubic-bezier(.16,1,.3,1) !important;
    }
    .btn-nexus-cancel:hover {
        background: rgba(255,255,255,.08) !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.2) !important;
    }

    /* CONFIG ACTIONS */
    .config-action {
        position: relative; overflow: hidden;
        background: linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01)) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 18px !important;
        padding: 22px !important;
        transition: all .3s cubic-bezier(.16,1,.3,1) !important;
    }
    .config-action::before {
        content:''; position:absolute; top:0; left:-110%;
        width:50%; height:100%;
        background: linear-gradient(90deg,transparent,rgba(255,102,0,.06),transparent);
        transition: left .8s ease;
    }
    .config-action:hover::before { left: 120%; }
    .config-action:hover {
        transform: translateY(-4px) !important;
        border-color: rgba(255,102,0,.4) !important;
        background: linear-gradient(160deg,rgba(255,102,0,.08),rgba(0,210,255,.03)) !important;
        box-shadow: 0 14px 36px rgba(255,102,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }
    .config-action b {
        font-size: 13px !important; font-weight: 900 !important;
        letter-spacing: .3px !important;
    }
    .config-action span {
        font-size: 10px !important; line-height: 1.5 !important;
        color: rgba(255,255,255,.5) !important;
    }

    /* USER ITEM ROW */
    .user-item-row {
        background: linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01)) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
        transition: all .25s cubic-bezier(.16,1,.3,1) !important;
    }
    .user-item-row:hover {
        background: linear-gradient(160deg,rgba(255,102,0,.06),rgba(255,255,255,.02)) !important;
        border-color: rgba(255,102,0,.3) !important;
        transform: translateX(4px);
    }
    .user-item-name { font-weight: 800 !important; letter-spacing: .3px !important; }
    .user-item-role {
        font-size: 9px !important; font-weight: 900 !important;
        letter-spacing: 1.2px !important; padding: 4px 10px !important;
        text-transform: uppercase;
    }
    .btn-delete-user {
        background: rgba(255,51,51,.08) !important;
        border: 1px solid rgba(255,51,51,.25) !important;
        border-radius: 10px !important;
        padding: 8px 14px !important;
        color: var(--danger) !important;
        font-weight: 800 !important;
        font-size: 10px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase;
        transition: all .22s ease !important;
    }
    .btn-delete-user:hover {
        background: var(--danger) !important;
        color: #fff !important;
        box-shadow: 0 6px 18px rgba(255,51,51,.4) !important;
        transform: translateY(-1px);
    }
    .btn-edit-user {
        background: rgba(0,131,176,.08) !important;
        border: 1px solid rgba(0,131,176,.30) !important;
        border-radius: 10px !important;
        padding: 8px 14px !important;
        color: var(--info, #0083b0) !important;
        font-weight: 800 !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        cursor: pointer;
        transition: all .22s ease !important;
    }
    .btn-edit-user:hover {
        background: var(--info, #0083b0) !important;
        color: #fff !important;
        box-shadow: 0 6px 18px rgba(0,131,176,.4) !important;
        transform: translateY(-1px);
    }

    .light-theme {
        --light-bg-1: #f7f9fc;
        --light-bg-2: #eef2f8;
        --light-card: #ffffff;
        --light-border: rgba(13,27,42,.08);
        --light-text-1: #0d1b2a;
        --light-text-2: rgba(13,27,42,.65);
        --light-text-3: rgba(13,27,42,.45);
    }
    .light-theme .nexus-system-root {
        background: linear-gradient(135deg,var(--light-bg-1),var(--light-bg-2)) !important;
    }

    /* SIDEBAR LIGHT */
    .light-theme .nexus-sidebar {
        background: linear-gradient(180deg,#ffffff,#f7f9fc) !important;
        border-right: 1px solid var(--light-border) !important;
        box-shadow: 4px 0 32px rgba(13,27,42,.05) !important;
    }
    .light-theme .nexus-brand-area {
        background: linear-gradient(135deg,rgba(255,102,0,.08),rgba(255,255,255,0)) !important;
        border-bottom: 1px solid var(--light-border) !important;
    }

    /* WORKSPACE LIGHT */
    .light-theme .main-workspace {
        background:
            radial-gradient(ellipse at 20% 0%,rgba(255,102,0,.07) 0%,transparent 35%),
            radial-gradient(ellipse at 80% 100%,rgba(0,131,176,.06) 0%,transparent 40%),
            linear-gradient(135deg,#f7f9fc 0%,#eef2f8 100%) !important;
    }

    /* HERO LIGHT */
    .light-theme .nexus-hero-shell {
        background: linear-gradient(160deg,#ffffff 0%,#f7f9fc 100%) !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 16px 48px rgba(13,27,42,.06), 0 2px 8px rgba(13,27,42,.04) !important;
    }
    .light-theme .nexus-hero-title {
        background: linear-gradient(135deg,#0d1b2a 0%,#ff6600 100%) !important;
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important;
    }

    /* KPI CARDS LIGHT */
    .light-theme .global-kpi-card {
        background: linear-gradient(160deg,#ffffff,#f7f9fc) !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 8px 24px rgba(13,27,42,.05) !important;
    }
    .light-theme .global-kpi-card:hover {
        box-shadow: 0 14px 36px rgba(255,102,0,.12) !important;
    }
    .light-theme .global-kpi-value { color: #0d1b2a !important; }

    /* ASSET HEADER LIGHT */
    .light-theme .asset-header-bar {
        background: linear-gradient(135deg,#ffffff,#f7f9fc) !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 4px 14px rgba(13,27,42,.05) !important;
    }

    /* STATUS BAR LIGHT */
    .light-theme .nexus-status-bar,
    .light-theme .mqtt-status-bar {
        background: rgba(255,255,255,.92) !important;
        border: 1px solid var(--light-border) !important;
        backdrop-filter: blur(14px) saturate(160%) !important;
        box-shadow: 0 4px 12px rgba(13,27,42,.04) !important;
    }
    .light-theme .mqtt-online::before {
        background: #10b981 !important;
        box-shadow: 0 0 8px rgba(16,185,129,.5) !important;
    }

    /* VEHICLE BUTTONS LIGHT */
    .light-theme .vehicle-btn {
        background: rgba(13,27,42,.025) !important;
        color: #4b5563 !important;
        border: 1px solid transparent !important;
    }
    .light-theme .vehicle-btn:hover {
        background: rgba(255,102,0,.08) !important;
        border-color: rgba(255,102,0,.25) !important;
        color: #1f2937 !important;
    }
    .light-theme .vehicle-btn.active {
        background: linear-gradient(135deg,rgba(255,102,0,.12),#fff) !important;
        border-color: rgba(255,102,0,.4) !important;
        box-shadow: 0 4px 14px rgba(255,102,0,.15) !important;
    }
    .light-theme .vehicle-btn.active::after { content: none !important; }
    .light-theme .vehicle-btn.active::before { content: none !important; }

    /* SEARCH LIGHT */
    .light-theme .nexus-search-input {
        background: #fff !important;
        border: 1px solid var(--light-border) !important;
        color: #0d1b2a !important;
        box-shadow: 0 1px 2px rgba(13,27,42,.03) !important;
    }
    .light-theme .nexus-search-input:focus {
        border-color: rgba(255,102,0,.5) !important;
        box-shadow: 0 0 0 4px rgba(255,102,0,.1) !important;
    }

    /* MODAIS LIGHT — ULTRA REFINADO */
    .light-theme .modal-overlay {
        background: linear-gradient(135deg,rgba(50,50,80,.45),rgba(13,27,42,.55)) !important;
        backdrop-filter: blur(20px) saturate(140%) !important;
    }
    .light-theme .modal-card {
        background: linear-gradient(160deg,#ffffff,#f7f9fc) !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 32px 80px rgba(13,27,42,.18), 0 0 0 1px rgba(255,102,0,.06) !important;
        animation: modalIn .35s cubic-bezier(.16,1,.3,1) both !important;
    }
    .light-theme .modal-card::before {
        background: linear-gradient(90deg,transparent,#ff6600 20%,#0083b0 50%,#ff6600 80%,transparent) !important;
    }
    .light-theme .modal-card::after {
        background: radial-gradient(circle,rgba(255,102,0,.05) 0%,transparent 60%) !important;
    }
    .light-theme .modal-title-nexus {
        background: linear-gradient(135deg,#0d1b2a 0%,#ff6600 100%) !important;
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important;
    }
    .light-theme .modal-subtitle-nexus {
        background: rgba(255,102,0,.06) !important;
        color: var(--light-text-2) !important;
    }
    .light-theme .nexus-input {
        background: #fff !important;
        border: 1px solid var(--light-border) !important;
        color: #0d1b2a !important;
        box-shadow: 0 1px 3px rgba(13,27,42,.04) !important;
    }
    .light-theme .nexus-input:hover { border-color: rgba(13,27,42,.18) !important; }
    .light-theme .nexus-input:focus {
        border-color: #ff6600 !important;
        background: #fff !important;
        box-shadow: 0 0 0 4px rgba(255,102,0,.12) !important;
    }
    .light-theme .nexus-label { color: var(--light-text-2) !important; }
    .light-theme .btn-nexus-cancel {
        background: #fff !important;
        border-color: var(--light-border) !important;
        color: var(--light-text-2) !important;
    }
    .light-theme .btn-nexus-cancel:hover {
        background: #f7f9fc !important;
        color: #0d1b2a !important;
        border-color: rgba(13,27,42,.18) !important;
    }

    /* CONFIG ACTIONS LIGHT */
    .light-theme .config-action {
        background: linear-gradient(160deg,#ffffff,#f7f9fc) !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 4px 14px rgba(13,27,42,.05) !important;
    }
    .light-theme .config-action:hover {
        background: linear-gradient(160deg,rgba(255,102,0,.08),#fff) !important;
        border-color: rgba(255,102,0,.4) !important;
        box-shadow: 0 12px 32px rgba(255,102,0,.18) !important;
    }
    .light-theme .config-action b { color: #0d1b2a !important; }
    .light-theme .config-action span { color: var(--light-text-2) !important; }

    /* USER ITEMS LIGHT */
    .light-theme .user-item-row {
        background: linear-gradient(160deg,#ffffff,#f7f9fc) !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 2px 8px rgba(13,27,42,.04) !important;
    }
    .light-theme .user-item-row:hover {
        background: linear-gradient(160deg,rgba(255,102,0,.06),#fff) !important;
        border-color: rgba(255,102,0,.3) !important;
    }
    .light-theme .user-item-name { color: #0d1b2a !important; }
    .light-theme .user-item-email { color: var(--light-text-2) !important; }
    .light-theme .user-item-role {
        background: rgba(0,131,176,.08) !important;
        color: #0083b0 !important;
        border: 1px solid rgba(0,131,176,.25) !important;
    }
    .light-theme .btn-delete-user {
        background: rgba(220,38,38,.06) !important;
        border-color: rgba(220,38,38,.25) !important;
        color: #dc2626 !important;
    }
    .light-theme .btn-delete-user:hover {
        background: #dc2626 !important;
        color: #fff !important;
        box-shadow: 0 6px 18px rgba(220,38,38,.35) !important;
    }

    /* SYSTEM BUTTONS LIGHT */
    .light-theme .sys-btn,
    .light-theme .sys-config-btn {
        background: #fff !important;
        color: #374151 !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 1px 3px rgba(13,27,42,.04) !important;
    }
    .light-theme .sys-btn:hover,
    .light-theme .sys-config-btn:hover {
        background: rgba(255,102,0,.06) !important;
        color: #ff6600 !important;
        border-color: rgba(255,102,0,.3) !important;
    }

    /* NODE TREE LIGHT */
    .light-theme .node-item {
        background: rgba(13,27,42,.025) !important;
        color: #4b5563 !important;
    }
    .light-theme .node-item:hover {
        background: rgba(255,102,0,.08) !important;
        color: #1f2937 !important;
    }
    .light-theme .node-client {
        background: linear-gradient(90deg,rgba(255,102,0,.08),rgba(13,27,42,.02)) !important;
    }
    .light-theme .node-title {
        color: #0d1b2a !important;
        text-shadow: none !important;
    }

    /* MOBILE HEADER LIGHT */
    .light-theme .mobile-header {
        background: rgba(255,255,255,.95) !important;
        border-bottom: 1px solid var(--light-border) !important;
        box-shadow: 0 2px 8px rgba(13,27,42,.04) !important;
        backdrop-filter: blur(12px);
    }
    .light-theme .mobile-logo-text { color: #0d1b2a !important; }

    /* FLEET SUMMARY LIGHT */
    .light-theme .fleet-summary-v74 {
        background: linear-gradient(160deg,#ffffff,#f7f9fc) !important;
        border: 1px solid var(--light-border) !important;
        box-shadow: 0 4px 14px rgba(13,27,42,.05) !important;
    }
    .light-theme .fleet-summary-kpi-v74 {
        background: rgba(13,27,42,.025) !important;
        border: 1px solid rgba(13,27,42,.04) !important;
    }

    /* SCROLLBARS — tema laranja/preto em toda a UI */
    * { scrollbar-width: thin; scrollbar-color: rgba(255,102,0,0.28) transparent; }
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,102,0,0.30); border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,102,0,0.58); }
    .light-theme * { scrollbar-color: rgba(255,102,0,0.22) transparent; }
    .light-theme ::-webkit-scrollbar-thumb { background: rgba(255,102,0,0.22); }
    .light-theme ::-webkit-scrollbar-thumb:hover { background: rgba(255,102,0,0.45); }

    /* BRAND LOGO — pulso laranja vivo */
    @keyframes logoPulse {
        0%,100% { box-shadow: 0 0 18px rgba(255,102,0,.28), inset 0 1px 0 rgba(255,255,255,.08); }
        50%      { box-shadow: 0 0 38px rgba(255,102,0,.55), 0 0 60px rgba(255,102,0,.14), inset 0 1px 0 rgba(255,255,255,.12); }
    }
    .brand-logo { animation: logoPulse 3.5s ease-in-out infinite !important; }
    .light-theme .brand-logo { animation: none !important; box-shadow: 0 0 14px rgba(255,102,0,.18) !important; }

    /* SIDEBAR — brilho laranja sutil no rodapé */
    .side-panel::before {
        content: '' !important;
        position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        height: 160px !important;
        background: radial-gradient(ellipse at 50% 100%, rgba(255,102,0,.09) 0%, transparent 70%) !important;
        pointer-events: none !important; z-index: 0 !important;
    }

    /* VEHICLE ATIVO — nome em laranja nítido, borda esquerda com glow */
    .vehicle-btn.active .vehicle-name {
        color: var(--accent) !important;
        text-shadow: 0 0 18px rgba(255,102,0,.55) !important;
    }
    .vehicle-btn.active {
        border-left-color: var(--accent) !important;
        box-shadow: 0 4px 24px rgba(255,102,0,.18), inset 0 1px 0 rgba(255,255,255,.05),
                    -2px 0 0 var(--accent) inset !important;
    }

    /* NODE HOVER — accent strip com glow */
    .node-item:hover::before { box-shadow: 0 0 8px var(--accent) !important; }

    /* TEXT MUTED — contraste levemente melhorado para leitura */
    :root { --text-muted: #6e7e98; }

    /* FLEET SUMMARY TOTAL PILL — glow laranja */
    .fleet-summary-total-v74 {
        box-shadow: 0 0 12px rgba(255,102,0,.2), inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    /* SYS CONFIG BTN — glow mais presente */
    .sys-config-btn { box-shadow: 0 0 14px rgba(255,102,0,.12) !important; }
    .sys-config-btn:hover { box-shadow: 0 0 28px rgba(255,102,0,.28) !important; }

    /* MQTT ONLINE — pulsação laranja no dot */
    @keyframes mqttDotPulse {
        0%,100% { box-shadow: 0 0 4px 1px rgba(0,230,118,.5); }
        50%      { box-shadow: 0 0 10px 3px rgba(0,230,118,.85); }
    }
    .mqtt-online::before { animation: mqttDotPulse 2s ease-in-out infinite !important; }

    /* SEARCH INPUT — ring laranja no foco mais vivo */
    .search-input:focus {
        border-color: rgba(255,102,0,.6) !important;
        box-shadow: 0 0 0 3px rgba(255,102,0,.12), 0 0 14px rgba(255,102,0,.08) !important;
    }

    /* MAP CONTAINER — borda laranja sutil */
    .map-container {
        border: 1px solid rgba(255,102,0,.14) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,102,0,.06) !important;
    }

    /* ASSET HEADER — accent line top mais laranja */
    .asset-header-bar::before {
        background: linear-gradient(90deg, var(--accent) 0%, rgba(0,210,255,.5) 55%, transparent 100%) !important;
        opacity: 0.55 !important;
    }

    /* ── CHART TOOLTIP ── */
    #chart-tip {
        position: fixed;
        background: rgba(8,8,18,0.97);
        border: 1px solid rgba(255,102,0,0.45);
        border-radius: 10px;
        padding: 9px 14px;
        font-family: 'JetBrains Mono', monospace;
        pointer-events: none;
        z-index: 999999;
        display: none;
        backdrop-filter: blur(18px);
        min-width: 155px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 18px rgba(255,102,0,0.12);
    }
    .chart-tip-date { color: rgba(255,255,255,0.48); font-size: 10px; letter-spacing: 0.3px; }
    .chart-tip-value { color: #ff6600; font-weight: 700; font-size: 15px; margin-top: 4px; }

    /* ── OVERVIEW MAP (hero — todos os caminhões) ── */
    #overview-map {
        pointer-events: none !important;
        background: #060606 !important;
        background-image: none !important;
        opacity: 1 !important;
        animation: none !important;
    }
    #overview-map::after {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(3,3,6,0.62) 100%);
        z-index: 1;
        pointer-events: none;
    }


    .nexus-system-root {
        --bg-workspace:
            radial-gradient(ellipse 65% 50% at 18% 0%, rgba(255, 104, 31, 0.10), transparent 55%),
            radial-gradient(ellipse 55% 45% at 100% 30%, rgba(237, 84, 16, 0.06), transparent 60%),
            radial-gradient(ellipse 75% 60% at 50% 110%, rgba(196, 62, 10, 0.05), transparent 55%),
            linear-gradient(180deg, #0a0a0e 0%, #050507 100%);
        --bg-sidebar: rgba(10, 10, 14, 0.68);
        --bg-main: #0a0a0e;
        --bg-card: rgba(20, 20, 26, 0.62);
        --text-main: #f4f4f6;
        --text-muted: #8a8a96;
        --border-color: rgba(255, 255, 255, 0.06);
        --input-bg: rgba(0, 0, 0, 0.42);
        --accent: #ff681f;
        --accent-2: #ff8a32;
        --accent-3: #ffa566;
        --danger: #e63946;
        --success: #00b87a;
    }
    .nexus-system-root.light-theme {
        --bg-workspace:
            radial-gradient(ellipse 65% 50% at 18% 0%, rgba(255, 104, 31, 0.07), transparent 55%),
            radial-gradient(ellipse 55% 45% at 100% 30%, rgba(237, 84, 16, 0.04), transparent 60%),
            linear-gradient(180deg, #faf9f6 0%, #f5f4ef 100%);
        --bg-sidebar: rgba(255, 255, 255, 0.78);
        --bg-main: #faf9f6;
        --bg-card: rgba(255, 255, 255, 0.92);
        --text-main: #15151a;
        --text-muted: #5b5b66;
        --border-color: rgba(0, 0, 0, 0.08);
        --input-bg: rgba(255, 255, 255, 0.7);
        --danger: #c12d39;
        --success: #008f5a;
    }

    /* —— 2026.2 · Tipografia editorial e font-feature-settings —— */
    .nexus-system-root,
    .nexus-system-root * {
        font-feature-settings: 'cv11', 'ss01', 'ss02';
    }

    /* —— 2026.3 · Workspace e sidebar com glassmorphism profundo —— */
    .nexus-system-root {
        background: var(--bg-workspace) !important;
        background-attachment: fixed !important;
    }
    .nexus-system-root::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.035;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        mix-blend-mode: overlay;
    }

    .side-panel {
        backdrop-filter: blur(40px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(40px) saturate(1.6) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow:
            8px 0 32px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        position: relative;
    }
    .side-panel::after {
        content: '';
        position: absolute;
        right: -1px; top: 12%;
        width: 1px; height: 76%;
        background: linear-gradient(180deg, transparent, rgba(255, 104, 31, 0.32), transparent);
        pointer-events: none;
    }

    /* —— 2026.4 · Brand header — escultural —— */
    .brand-header {
        padding: 32px 24px 22px !important;
        position: relative;
        overflow: hidden;
    }
    .brand-header::after {
        content: '';
        position: absolute;
        bottom: 0; left: 24px; right: 24px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 104, 31, 0.32), transparent);
    }
    .brand-logo img {
        filter: drop-shadow(0 0 24px rgba(255, 104, 31, 0.35));
        transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .brand-header:hover .brand-logo img {
        filter: drop-shadow(0 0 32px rgba(255, 104, 31, 0.55));
        transform: scale(1.04);
    }
    .brand-title {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: 0.18em !important;
        background: linear-gradient(135deg, #fff 0%, #ffb178 80%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }
    .brand-subtitle {
        font-family: 'JetBrains Mono', monospace !important;
        letter-spacing: 0.24em !important;
    }

    /* —— 2026.5 · Search input premium —— */
    .search-input {
        height: 42px !important;
        border-radius: 12px !important;
        background: rgba(0, 0, 0, 0.32) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        font-size: 12px !important;
        transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .light-theme .search-input { background: rgba(255, 255, 255, 0.7) !important; }
    .search-input:focus {
        border-color: var(--accent) !important;
        background: rgba(0, 0, 0, 0.55) !important;
        box-shadow: 0 0 0 4px rgba(255, 104, 31, 0.14), 0 0 40px -12px rgba(255, 104, 31, 0.32) !important;
    }
    .light-theme .search-input:focus { background: #fff !important; }

    /* —— 2026.6 · Vehicle list — tactile + 3D —— */
    .vehicle-btn {
        position: relative;
        transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        border-radius: 12px !important;
        margin: 4px 8px 4px 32px !important;
        width: calc(100% - 40px) !important;
        padding: 8px 12px 8px 14px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    .vehicle-btn:hover {
        transform: translateX(3px);
        background: rgba(255, 104, 31, 0.06) !important;
        color: var(--text-main) !important;
    }
    .vehicle-btn.active {
        background: rgba(255,102,0,0.12) !important;
        border: 1.5px solid rgba(255,102,0,0.55) !important;
        box-shadow: 0 0 18px rgba(255,102,0,0.14) !important;
    }
    .vehicle-btn.active::before { content: none !important; }

    .vehicle-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .vehicle-name {
        font-family: 'JetBrains Mono', monospace !important;
        font-weight: 900 !important;
        font-size: 11px !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .vehicle-mini {
        display: flex !important;
        gap: 6px !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 9px !important;
        letter-spacing: 0.05em !important;
        line-height: 1 !important;
    }
    .vehicle-mini span {
        white-space: nowrap !important;
        padding: 3px 7px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        background: rgba(0,0,0,0.22) !important;
        line-height: 1.2 !important;
    }
    .vehicle-status-pack {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .vehicle-status-text {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    /* —— 2026.7 · Node items (hierarquia) —— */
    .node-item {
        transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        border-radius: 6px;
        margin: 1px 8px;
    }
    .node-item:hover {
        background: rgba(255, 104, 31, 0.04) !important;
    }
    .node-count-pill {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
    }
    .node-count-pill.ok {
        background: rgba(0, 184, 122, 0.12) !important;
        color: var(--success) !important;
        border-color: rgba(0, 184, 122, 0.30);
    }
    .node-count-pill.fault {
        background: rgba(230, 57, 70, 0.12) !important;
        color: var(--danger) !important;
        border-color: rgba(230, 57, 70, 0.32);
        animation: athenaPulseDot 2.4s ease-in-out infinite;
    }

    /* —— 2026.8 · LED com pulse refinado —— */
    .led {
        width: 9px !important;
        height: 9px !important;
        border-radius: 50% !important;
        position: relative;
    }
    .led-on {
        background: var(--success) !important;
        box-shadow: 0 0 10px var(--success), inset 0 0 4px rgba(255, 255, 255, 0.4);
        animation: ledPulse 2.4s ease-in-out infinite;
    }
    .led-off {
        background: rgba(255, 255, 255, 0.18) !important;
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
    }
    @keyframes ledPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.65; transform: scale(1.18); }
    }

    /* —— 2026.9 · MQTT status bar —— */
    .mqtt-status-bar {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11px !important;
        letter-spacing: 0.16em !important;
        font-weight: 700 !important;
        padding: 12px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        backdrop-filter: blur(20px);
        position: relative;
        overflow: hidden;
    }
    .mqtt-status-bar.mqtt-online {
        background: linear-gradient(90deg, rgba(0, 184, 122, 0.12), rgba(0, 184, 122, 0.04) 70%, transparent) !important;
        color: var(--success) !important;
    }
    .mqtt-status-bar.mqtt-offline {
        background: linear-gradient(90deg, rgba(230, 57, 70, 0.14), rgba(230, 57, 70, 0.04) 70%, transparent) !important;
        color: var(--danger) !important;
    }
    .mqtt-status-bar::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        height: 1px;
        width: 30%;
        background: linear-gradient(90deg, transparent, currentColor, transparent);
        animation: athenaScan 5s linear infinite;
        opacity: 0.5;
    }

    /* —— 2026.10 · Hero shell — dramático e cinematográfico —— */
    .nexus-hero-shell {
        position: relative;
        overflow: hidden;
    }
    .nexus-hero-title {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        font-size: clamp(64px, 11vw, 168px) !important;
        line-height: 0.88 !important;
        letter-spacing: -0.06em !important;
        background: linear-gradient(180deg,
            #ffffff 0%,
            #ffd9b5 38%,
            #ff8a32 68%,
            #ff681f 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        text-shadow: none !important;
        animation: athenaFadeUp 720ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        filter: drop-shadow(0 8px 48px rgba(255, 104, 31, 0.25));
    }
    .nexus-hero-subtitle {
        font-family: 'JetBrains Mono', monospace !important;
        letter-spacing: 0.4em !important;
        font-size: clamp(10px, 0.9vw, 13px) !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        animation: athenaFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 120ms !important;
    }
    .light-theme .nexus-hero-subtitle { color: rgba(0, 0, 0, 0.55) !important; }

    /* —— 2026.11 · Global dashboard cards — 3D parallax sutil —— */
    .global-dashboard {
        animation: athenaFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 240ms !important;
    }
    .global-kpi-card {
        position: relative;
        backdrop-filter: blur(28px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        background: rgba(20, 20, 26, 0.55) !important;
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 60px -20px rgba(255, 104, 31, 0.10) !important;
        transform-style: preserve-3d;
        transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform;
        overflow: hidden !important;
    }
    .global-kpi-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 104, 31, 0.55), transparent);
        opacity: 0.6;
    }
    .global-kpi-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 35%);
        pointer-events: none;
        border-radius: inherit;
    }
    .global-kpi-card:hover {
        transform: perspective(1200px) rotateX(2deg) rotateY(-1.5deg) translateY(-6px) !important;
        box-shadow:
            0 32px 64px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 0 100px -16px rgba(255, 104, 31, 0.28) !important;
    }
    .light-theme .global-kpi-card {
        background: rgba(255, 255, 255, 0.82) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow:
            0 12px 32px rgba(20, 20, 30, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }

    /* —— 2026.12 · Asset header bar (cabeçalho do veículo) —— */
    .asset-header-bar {
        backdrop-filter: blur(24px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
        background: rgba(20, 20, 26, 0.62) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-left: 3px solid var(--accent) !important;
        border-radius: 16px !important;
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 60px -24px rgba(255, 104, 31, 0.18) !important;
        animation: athenaFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        position: relative;
        overflow: hidden;
    }
    .asset-header-bar::after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 30%; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 104, 31, 0.55), transparent);
        animation: athenaScan 5s linear infinite;
    }
    .light-theme .asset-header-bar {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
    }
    .asset-id {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
        background: linear-gradient(135deg, #fff 0%, #ffb178 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }
    .light-theme .asset-id {
        background: linear-gradient(135deg, #15151a 0%, #ed5410 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }
    .asset-tag {
        font-family: 'JetBrains Mono', monospace !important;
        text-transform: uppercase !important;
        letter-spacing: 0.24em !important;
        color: var(--accent-2) !important;
        position: relative;
        padding-left: 18px !important;
    }
    .asset-tag::before {
        content: '';
        position: absolute;
        left: 0; top: 50%;
        width: 12px; height: 1px;
        background: var(--accent);
        transform: translateY(-50%);
    }
    .asset-meta {
        font-family: 'JetBrains Mono', monospace !important;
        letter-spacing: 0.06em !important;
        color: var(--text-muted) !important;
    }
    .status-badge {
        backdrop-filter: blur(12px);
        background: rgba(0, 0, 0, 0.42) !important;
        border-radius: 999px !important;
        padding: 6px 14px !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10.5px !important;
        letter-spacing: 0.14em !important;
        font-weight: 700 !important;
    }
    .light-theme .status-badge { background: rgba(255, 255, 255, 0.7) !important; }

    /* —— 2026.13 · Botões do header do ativo —— */
    .btn-report-stealth, .btn-edit-stealth, .btn-delete-stealth {
        font-family: 'Inter', sans-serif !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        font-size: 11.5px !important;
        padding: 10px 18px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(0, 0, 0, 0.32) !important;
        color: var(--text-main) !important;
        cursor: pointer !important;
        transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        backdrop-filter: blur(12px);
    }
    .light-theme .btn-report-stealth,
    .light-theme .btn-edit-stealth,
    .light-theme .btn-delete-stealth {
        background: rgba(255, 255, 255, 0.7) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }
    .btn-report-stealth:hover, .btn-edit-stealth:hover {
        border-color: rgba(255, 104, 31, 0.40) !important;
        background: rgba(255, 104, 31, 0.08) !important;
        color: var(--accent-3) !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px -8px rgba(255, 104, 31, 0.32);
    }
    .btn-delete-stealth:hover {
        background: var(--danger) !important;
        color: #fff !important;
        border-color: var(--danger) !important;
    }

    /* —— 2026.14 · System actions (sidebar bottom) —— */
    .sys-btn {
        font-family: 'Inter', sans-serif !important;
        font-weight: 700 !important;
        letter-spacing: 0.10em !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        background: rgba(0, 0, 0, 0.32) !important;
        color: var(--text-muted) !important;
        cursor: pointer !important;
        transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .light-theme .sys-btn {
        background: rgba(255, 255, 255, 0.7) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }
    .sys-btn:hover {
        background: rgba(255, 104, 31, 0.08) !important;
        border-color: rgba(255, 104, 31, 0.28) !important;
        color: var(--text-main) !important;
        transform: translateY(-1px);
    }
    .sys-config-btn {
        background: linear-gradient(135deg, rgba(255, 138, 50, 0.12), rgba(255, 104, 31, 0.06)) !important;
        color: var(--accent-3) !important;
        border-color: rgba(255, 104, 31, 0.24) !important;
    }
    .sys-config-btn:hover {
        background: var(--grad-ember) !important;
        color: #fff !important;
        box-shadow: 0 12px 28px -8px rgba(255, 104, 31, 0.45);
    }

    /* —— 2026.15 · Modais — backdrop deep + card escultural —— */
    .modal-overlay {
        backdrop-filter: blur(16px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
        background: rgba(5, 5, 7, 0.62) !important;
        animation: athenaFadeIn 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .light-theme .modal-overlay { background: rgba(247, 246, 241, 0.55) !important; }

    .modal-card {
        background: rgba(20, 20, 26, 0.92) !important;
        backdrop-filter: blur(40px) saturate(1.6);
        -webkit-backdrop-filter: blur(40px) saturate(1.6);
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: 3px solid var(--accent) !important;
        border-radius: 24px !important;
        box-shadow:
            0 40px 96px rgba(0, 0, 0, 0.65),
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 80px -20px rgba(255, 104, 31, 0.22) !important;
        animation: athenaScaleIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        position: relative;
        overflow: hidden;
    }
    .modal-card::before {
        content: '';
        position: absolute;
        top: 3px; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    }
    .light-theme .modal-card {
        background: rgba(255, 255, 255, 0.97) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        box-shadow:
            0 40px 96px rgba(20, 20, 30, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 0 80px -20px rgba(255, 104, 31, 0.18) !important;
    }

    .modal-title-nexus {
        font-family: 'Inter', sans-serif !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
    }
    .modal-subtitle-nexus {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10.5px !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        opacity: 0.7;
    }

    /* —— 2026.16 · Botões dos modais e formulários —— */
    .btn-nexus-save, .btn-nexus-cancel {
        font-family: 'Inter', sans-serif !important;
        font-weight: 800 !important;
        letter-spacing: 0.10em !important;
        text-transform: uppercase !important;
        font-size: 12px !important;
        padding: 12px 24px !important;
        border-radius: 999px !important;
        cursor: pointer !important;
        transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        position: relative;
        overflow: hidden;
    }
    .btn-nexus-save {
        background: var(--grad-ember) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 8px 24px -8px rgba(255, 104, 31, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    .btn-nexus-save:hover {
        transform: translateY(-2px);
        filter: brightness(1.08);
        box-shadow: 0 16px 40px -8px rgba(255, 104, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    .btn-nexus-cancel {
        background: transparent !important;
        color: var(--text-muted) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    .btn-nexus-cancel:hover {
        color: var(--text-main) !important;
        border-color: rgba(255, 255, 255, 0.24) !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }
    .light-theme .btn-nexus-cancel { border-color: rgba(0, 0, 0, 0.10) !important; }
    .light-theme .btn-nexus-cancel:hover { background: rgba(0, 0, 0, 0.04) !important; }

    /* —— 2026.17 · Inputs nexus —— */
    .nexus-input, .nexus-select, .nexus-textarea {
        background: rgba(0, 0, 0, 0.42) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        padding: 11px 16px !important;
        color: var(--text-main) !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        outline: none !important;
    }
    .light-theme .nexus-input,
    .light-theme .nexus-select,
    .light-theme .nexus-textarea {
        background: rgba(255, 255, 255, 0.7) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }
    .nexus-input:focus, .nexus-select:focus, .nexus-textarea:focus {
        border-color: var(--accent) !important;
        background: rgba(0, 0, 0, 0.62) !important;
        box-shadow: 0 0 0 4px rgba(255, 104, 31, 0.14), 0 0 32px -12px rgba(255, 104, 31, 0.32) !important;
    }
    .light-theme .nexus-input:focus,
    .light-theme .nexus-select:focus,
    .light-theme .nexus-textarea:focus { background: #fff !important; }

    .nexus-label {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        margin-bottom: 8px !important;
        display: block;
    }

    /* —— 2026.18 · Map container —— */
    .map-container {
        border-radius: 20px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow:
            0 24px 56px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 80px -32px rgba(255, 104, 31, 0.18) !important;
        animation: athenaFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 80ms !important;
    }
    .light-theme .map-container { border-color: rgba(0, 0, 0, 0.08) !important; }

    .gps-only-map-notice {
        background: rgba(20, 20, 26, 0.78) !important;
        backdrop-filter: blur(20px) saturate(1.5);
        -webkit-backdrop-filter: blur(20px) saturate(1.5);
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11px !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
    }
    .light-theme .gps-only-map-notice {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        color: #15151a !important;
    }

    /* —— 2026.19 · Fleet section title (sidebar) —— */
    .fleet-section-title {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.28em !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.80) !important;
        padding: 14px 24px 10px !important;
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .fleet-section-title::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 104, 31, 0.32), transparent);
    }

    /* —— 2026.20 · Mobile header (visível em telas pequenas) —— */
    .mobile-header {
        backdrop-filter: blur(24px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
        background: rgba(10, 10, 14, 0.78) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .light-theme .mobile-header {
        background: rgba(255, 255, 255, 0.85) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

    /* —— 2026.21 · Animações compartilhadas —— */
    @keyframes athenaFadeUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes athenaFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @keyframes athenaScaleIn {
        from { opacity: 0; transform: scale(0.94); }
        to   { opacity: 1; transform: scale(1); }
    }
    @keyframes athenaScan {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(330%); }
    }
    @keyframes athenaPulseDot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.18); }
    }

    /* —— 2026.22 · Scroll behavior —— */
    .vehicle-list-container {
        scrollbar-color: rgba(255, 104, 31, 0.45) transparent;
        scrollbar-width: thin;
    }
    .vehicle-list-container::-webkit-scrollbar { width: 6px; }
    .vehicle-list-container::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(255, 104, 31, 0.55), rgba(255, 104, 31, 0.20));
        border-radius: 999px;
    }

    /* —— 2026.23 · Responsividade fluida —— */
    @media (max-width: 1280px) {
        .side-panel { width: 296px !important; }
        .vehicle-btn { padding-left: 60px !important; }
    }
    @media (max-width: 980px) {
        .nexus-hero-title { font-size: clamp(48px, 12vw, 96px) !important; }
        .global-dashboard {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 14px !important;
        }
    }
    @media (max-width: 640px) {
        .nexus-hero-title { font-size: clamp(40px, 14vw, 72px) !important; }
        .nexus-hero-subtitle { font-size: 10px !important; letter-spacing: 0.32em !important; }
        .global-dashboard {
            grid-template-columns: 1fr !important;
        }
        .asset-header-bar {
            border-radius: 14px !important;
            padding: 16px 20px !important;
        }
        .modal-card {
            border-radius: 18px !important;
            margin: 16px !important;
            max-width: calc(100vw - 32px) !important;
        }
    }

    /* —— 2026.24 · MODO CLARO IMPECÁVEL — overrides finais —— */
    .light-theme .side-panel {
        background: rgba(255, 255, 255, 0.78) !important;
        border-right-color: rgba(0, 0, 0, 0.06) !important;
        box-shadow:
            8px 0 32px rgba(20, 20, 30, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    .light-theme .brand-title {
        background: linear-gradient(135deg, #15151a 0%, #ed5410 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }
    .light-theme .vehicle-btn:hover { background: rgba(255, 104, 31, 0.06) !important; }
    .light-theme .vehicle-btn.active {
        background: linear-gradient(90deg, rgba(255, 104, 31, 0.14), rgba(255, 104, 31, 0.04) 60%, transparent) !important;
        color: var(--accent) !important;
    }
    .light-theme .led-off { background: rgba(0, 0, 0, 0.18) !important; }
    .light-theme .nexus-hero-title {
        background: linear-gradient(180deg,
            #15151a 0%,
            #ed5410 60%,
            #c43e0a 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        filter: drop-shadow(0 4px 16px rgba(255, 104, 31, 0.18));
    }
    .light-theme .asset-id {
        background: linear-gradient(135deg, #15151a 0%, #ed5410 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }

    /* ───────────────────────────────────────────────────────────────────
       MODO CLARO 2026-06 — HERO SHELL + MAPA OVERVIEW (fix definitivo).
       Havia ~5 definicoes conflitantes de .nexus-hero-shell espalhadas no
       arquivo + o #overview-map (Leaflet decorativo) pintando preto quando
       tiles nao carregam. Resultado: o splash gigante "ATHENA" ficava com
       fundo preto mesmo no modo claro.
       Prefixo .nexus-system-root.light-theme (0,3,0) vence as regras
       .light-theme .nexus-hero-shell (0,2,0) anteriores. O fundo do mapa
       eh forcado claro pra cobrir o caso de tiles falhando. */
    .nexus-system-root.light-theme .nexus-hero-shell {
        background: linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 16px 48px rgba(13, 27, 42, 0.08), 0 2px 8px rgba(13, 27, 42, 0.04) !important;
    }
    .nexus-system-root.light-theme .nexus-hero-inner { background: transparent !important; }
    .nexus-system-root.light-theme #overview-map,
    .nexus-system-root.light-theme .nexus-hero-shell .leaflet-container {
        background: #f4f7fb !important;   /* base clara — tiles pintam por cima quando carregam */
    }
    /* O mapa overview eh DECORATIVO. No modo claro, tiles satelite/dark deixavam
       o splash cinza-muddy. Reduz opacidade pra o shell branco dominar e o
       logo ATHENA laranja se destacar — visual limpo. */
    .nexus-system-root.light-theme #overview-map {
        opacity: 0.22 !important;
    }

    /* Print friendly — relatórios PDF preservam visual original */
    @media print {
        .side-panel, .mqtt-status-bar, .asset-actions, .system-actions { display: none !important; }
        .global-kpi-card, .asset-header-bar, .modal-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
        body::before, body::after { display: none !important; }
    }

/* ───────────────────────────────────────────────────────────────────
   CHAT LATERAL ATHENA — Gemma 2 2B local no navegador (WebGPU).
   Posição fixa canto inferior direito. Não interfere no resto do layout.
   ─────────────────────────────────────────────────────────────────── */
.athena-chat-toggle {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 2147483001 !important;  /* acima do painel */
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%);
    color: #fff;
    border-radius: 50px;
    padding: 12px 18px;
    box-shadow: 0 8px 24px rgba(255,102,0,0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 11px;
    transition: transform .2s ease, box-shadow .2s ease;
    user-select: none;
}
.athena-chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,102,0,0.55); }
.athena-chat-toggle.open { padding: 10px 14px; background: rgba(255,255,255,0.1); color: #fff; box-shadow: none; }
.athena-chat-toggle-lbl { font-family: 'Inter', sans-serif; }

.athena-chat-panel {
    /* IMPORTANT: usar !important nos posicionamentos pra ganhar de qualquer
       herança/scoped style (ex.: algum ancestor com transform/filter que
       transformaria position:fixed em relativo). Background sólido (sem
       backdrop-filter) elimina classes de bugs em certos drivers GPU. */
    position: fixed !important;
    right: 20px !important;
    bottom: 78px !important;
    width: 380px;
    height: 540px;
    z-index: 2147483000 !important;  /* top da pilha de inteiros 32-bit */
    background: #15171c;
    border: 1px solid rgba(255,102,0,0.35);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #e8e8e8;
}

/* ═══════════════════════════════════════════════════════════════════
   MODO CLARO 2026-06 — gaps finais (auditoria exaustiva via workflow).
   Topbar de status, tooltip do grafico, painel de chat, pills da sidebar.
   ═══════════════════════════════════════════════════════════════════ */
.light-theme .athena-topbar {
    background: linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
.light-theme .atb-title { color: #15151a !important; }
.light-theme .atb-sub   { color: rgba(0,0,0,0.50) !important; }
.light-theme .atb-chip,
.light-theme .atb-chip-neutral {
    color: rgba(0,0,0,0.70) !important;
    background: rgba(0,0,0,0.04) !important;
}
.light-theme .atb-chip:hover { color: #15151a !important; background: rgba(0,0,0,0.07) !important; }

.light-theme #chart-tip {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(0,0,0,0.10) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15) !important;
    color: #15151a !important;
}
.light-theme .chart-tip-date { color: rgba(0,0,0,0.50) !important; }

.light-theme .athena-chat-input  { background: rgba(0,0,0,0.04) !important; }
.light-theme .athena-chat-footer { background: rgba(0,0,0,0.03) !important; color: rgba(0,0,0,0.55) !important; }
.light-theme .athena-chat-empty  { color: rgba(0,0,0,0.50) !important; }

.light-theme .node-count-pill   { background: rgba(0,0,0,0.05) !important; }
.light-theme .vehicle-mini span { background: rgba(0,0,0,0.05) !important; }
.light-theme .athena-chat-panel { background: #ffffff; border-color: rgba(255,102,0,0.3); color: #111; }

.athena-chat-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,102,0,0.08), transparent);
}
.athena-chat-title { font-size: 13px; font-weight: 900; letter-spacing: 1.5px; color: #ff8833; text-transform: uppercase; }
.athena-chat-sub { font-size: 9px; font-weight: 700; letter-spacing: 1px; margin-top: 4px; color: #888; text-transform: uppercase; }

.athena-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.athena-chat-body::-webkit-scrollbar { width: 6px; }
.athena-chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.athena-chat-empty {
    color: #aaa;
    font-size: 12px;
    line-height: 1.6;
    padding: 20px 8px;
    text-align: left;
}

.athena-chat-msg { display: flex; flex-direction: column; gap: 4px; }
.athena-chat-msg.user { align-items: flex-end; }
.athena-chat-msg.ia   { align-items: flex-start; }
.athena-chat-bubble {
    max-width: 86%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.55;
    word-wrap: break-word;
}
.athena-chat-msg.user .athena-chat-bubble {
    background: linear-gradient(135deg, #ff6600, #ff8833);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.athena-chat-msg.ia .athena-chat-bubble {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #e8e8e8;
    border-bottom-left-radius: 3px;
}
.light-theme .athena-chat-msg.ia .athena-chat-bubble { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #222; }

.athena-chat-feedback { display: flex; gap: 6px; margin-top: 2px; }
.athena-chat-feedback button {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #888;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
}
.athena-chat-feedback button:hover { background: rgba(255,102,0,0.15); color: #ff8833; border-color: rgba(255,102,0,0.3); }
.athena-chat-feedback-ok { font-size: 9px; color: #00aa44; margin-top: 2px; font-weight: 700; }

.athena-chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.athena-chat-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: #888;
    animation: athenaTyping 1.2s infinite ease-in-out;
}
.athena-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.athena-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes athenaTyping { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.athena-chat-input {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.3);
}
.athena-chat-input input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.athena-chat-input input:focus { border-color: rgba(255,102,0,0.5); background: rgba(255,255,255,0.08); }
.athena-chat-input input:disabled { opacity: 0.5; }
.athena-chat-input button {
    background: linear-gradient(135deg, #ff6600, #ff8833);
    border: none;
    color: #fff;
    width: 44px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 900;
    font-size: 14px;
    transition: transform .12s ease;
}
.athena-chat-input button:hover:not(:disabled) { transform: scale(1.05); }
.athena-chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }
.light-theme .athena-chat-input input { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #111; }

.athena-chat-footer {
    padding: 6px 12px 10px;
    font-size: 9px;
    color: #888;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}

/* ── ABAS do painel Athena IA: "Conversar com a IA" | "Chat ao vivo" ── */
.athena-chat-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px 0;
}
.athena-chat-tab {
    flex: 1;
    padding: 7px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #aaa;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.athena-chat-tab:hover { background: rgba(255,255,255,0.08); color: #ddd; }
.athena-chat-tab.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255,102,0,0.28), rgba(255,102,0,0.10));
    border-color: rgba(255,102,0,0.5);
}
.light-theme .athena-chat-tab { color: #666; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
.light-theme .athena-chat-tab.active { color: #7a2b00; background: rgba(255,102,0,0.14); border-color: rgba(255,102,0,0.45); }

/* ── Cabeçalho de cada mensagem da comunidade (autor + badges + hora) ── */
.athena-chat-autor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10px;
    margin-bottom: 3px;
    color: #bbb;
}
.athena-chat-autor b { color: #ff9a4d; font-weight: 800; }
.light-theme .athena-chat-autor { color: #555; }
.light-theme .athena-chat-autor b { color: #b8540a; }
.athena-chat-badge-admin {
    font-size: 8px; font-weight: 900; letter-spacing: .5px;
    padding: 1px 5px; border-radius: 6px;
    background: rgba(255,102,0,0.25); color: #ffb877;
    border: 1px solid rgba(255,102,0,0.4);
}
.athena-chat-badge-adminmsg {
    font-size: 8px; font-weight: 800; letter-spacing: .3px;
    padding: 1px 5px; border-radius: 6px;
    background: rgba(80,140,255,0.2); color: #9cc0ff;
    border: 1px solid rgba(80,140,255,0.4);
}
.athena-chat-badge-tenant {
    font-size: 8px; font-weight: 800; letter-spacing: .3px;
    padding: 1px 5px; border-radius: 6px;
    background: rgba(0,200,120,0.15); color: #6fdcae;
    border: 1px solid rgba(0,200,120,0.35);
    text-transform: uppercase;
}
.athena-chat-hora { margin-left: auto; font-size: 9px; color: #777; }
.athena-chat-admintoggle { font-size: 10px; color: #bbb; }
.light-theme .athena-chat-admintoggle { color: #555; }

/* ──────────────────────────────────────────────────────────────────
   ALERTAS PROATIVOS — toasts hiper modernos no canto superior direito.
   2 níveis: WARN (âmbar) e CRITICAL (vermelho). Glow, gradiente, pulse
   na borda esquerda, animação slide-in vinda da direita.
   ────────────────────────────────────────────────────────────────── */
/* 2026-06: card compacto + modo rotativo (1 ativo por vez, 2s TTL). */
.athena-alert-stack {
    position: fixed !important;
    top: 80px;
    right: 20px;
    width: 280px;
    max-width: calc(100vw - 40px);
    z-index: 2147483600 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.athena-alert {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr 18px;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #f4f4f6;
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow:
        0 12px 30px -8px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.08) inset;
    animation: athenaAlertSlideIn 0.30s cubic-bezier(0.2, 0.9, 0.25, 1.05);
    transform-origin: right center;
}
@keyframes athenaAlertSlideIn {
    from { opacity: 0; transform: translateX(40px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}
.athena-alert-warn {
    background: linear-gradient(135deg, rgba(60,40,15,0.94) 0%, rgba(30,18,8,0.96) 100%);
    border: 1px solid rgba(255,176,67,0.45);
    box-shadow:
        0 20px 50px -10px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,176,67,0.18) inset,
        0 0 32px -4px rgba(255,176,67,0.25);
}
.athena-alert-critical {
    background: linear-gradient(135deg, rgba(72,18,18,0.95) 0%, rgba(36,8,8,0.97) 100%);
    border: 1px solid rgba(255,71,87,0.55);
    box-shadow:
        0 20px 50px -10px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,71,87,0.22) inset,
        0 0 38px -4px rgba(255,71,87,0.4);
    animation: athenaAlertSlideIn 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.05),
               athenaAlertShake 0.45s 0.35s ease-in-out;
}
@keyframes athenaAlertShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}

/* Pulse na borda esquerda — barra vertical animada */
.athena-alert-pulse {
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    animation: athenaAlertPulse 2.2s ease-in-out infinite;
}
.athena-alert-warn .athena-alert-pulse {
    background: linear-gradient(180deg, #ffb043 0%, #ff8c1a 100%);
    box-shadow: 0 0 18px rgba(255,176,67,0.7);
}
.athena-alert-critical .athena-alert-pulse {
    background: linear-gradient(180deg, #ff4757 0%, #c41e3a 100%);
    box-shadow: 0 0 22px rgba(255,71,87,0.85);
}
@keyframes athenaAlertPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.athena-alert-icon {
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 5px currentColor);
}
.athena-alert-warn .athena-alert-icon { color: #ffb043; }
.athena-alert-critical .athena-alert-icon { color: #ff4757; }

.athena-alert-body { min-width: 0; }
.athena-alert-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.athena-alert-badge {
    font-size: 7.5px; font-weight: 900; letter-spacing: 1px;
    padding: 1px 5px; border-radius: 3px;
    text-transform: uppercase;
}
.athena-alert-warn .athena-alert-badge {
    background: rgba(255,176,67,0.18); color: #ffd089;
    border: 1px solid rgba(255,176,67,0.35);
}
.athena-alert-critical .athena-alert-badge {
    background: rgba(255,71,87,0.22); color: #ffb0b7;
    border: 1px solid rgba(255,71,87,0.45);
}
.athena-alert-truck {
    font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,0.9);
    text-transform: uppercase; letter-spacing: 0.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.athena-alert-title {
    font-size: 10.5px; font-weight: 700; color: #fff;
    margin-bottom: 2px;
}
.athena-alert-numbers {
    display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    margin-bottom: 2px;
}
.athena-alert-now {
    font-size: 13px; font-weight: 900;
}
.athena-alert-warn .athena-alert-now { color: #ffd089; }
.athena-alert-critical .athena-alert-now { color: #ffb0b7; }
.athena-alert-arrow {
    font-size: 11px; opacity: 0.75;
}
.athena-alert-base {
    font-size: 9px; color: rgba(255,255,255,0.55);
}
.athena-alert-foot {
    font-size: 8.5px; color: rgba(255,255,255,0.5);
    letter-spacing: 0.2px;
}

.athena-alert-close {
    background: transparent; border: none; color: rgba(255,255,255,0.4);
    width: 18px; height: 18px; border-radius: 50%;
    cursor: pointer; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    align-self: start;
    padding: 0;
}
.athena-alert-close:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.95);
    transform: scale(1.1);
}

/* Tema claro — ajustes */
.light-theme .athena-alert-warn {
    background: linear-gradient(135deg, #fff8ec 0%, #fff1d6 100%);
    color: #4a2a06;
}
.light-theme .athena-alert-critical {
    background: linear-gradient(135deg, #fff0f1 0%, #ffd9dd 100%);
    color: #4a0612;
}
.light-theme .athena-alert-warn .athena-alert-now    { color: #b35a00; }
.light-theme .athena-alert-critical .athena-alert-now { color: #b3001b; }
.light-theme .athena-alert-truck    { color: rgba(0,0,0,0.85); }
.light-theme .athena-alert-title    { color: #0d0d0f; }
.light-theme .athena-alert-base,
.light-theme .athena-alert-foot     { color: rgba(0,0,0,0.55); }
.light-theme .athena-alert-close    { color: rgba(0,0,0,0.45); }
.light-theme .athena-alert-close:hover { background: rgba(0,0,0,0.06); color: #000; }

/* Mobile: alerta full-width no topo */
@media (max-width: 640px) {
    .athena-alert-stack {
        top: 10px; right: 10px; left: 10px;
        width: auto;
    }
}

/* ===== css/athena-2026-premium.css ===== */
/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  ATHENA — UX PREMIUM 2026                                              ║
   ║  Tudo o que separa um "app antigo" de um "Tesla/Apple/Linear" :         ║
   ║   • Motion system com curvas reais (não linear)                         ║
   ║   • Microinterações em hover/focus/active                               ║
   ║   • Skeletons de loading polidos                                         ║
   ║   • Toasts com queue + a11y                                              ║
   ║   • Empty states ilustrados                                              ║
   ║   • View Transitions API pra tema fluido                                 ║
   ║   • Tipografia fluida + focus rings refinados                            ║
   ║  Carregado em App.razor APÓS home.css pra ter precedência via cascade.  ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* ── 1) DESIGN TOKENS ─────────────────────────────────────────────────────
   Centraliza valores que regulam a "sensação" do app. Mudar UM token aqui
   recalibra TUDO de uma vez. Tokens nomeados pelo USO (não pelo valor). */
:root {
    /* Easing — curvas Apple/Linear-style. NUNCA usar linear em UI real. */
    --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);       /* emphasized — entradas */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);              /* out-expo */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);          /* swap suave */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);       /* overshoot sutil */
    --ease-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25);     /* spring real */

    /* Durations — escala de 60Hz pensada em frames (16/24/36/56). */
    --dur-instant: 60ms;       /* feedback imediato (click) */
    --dur-fast: 140ms;          /* hover, micro-shift */
    --dur-base: 240ms;          /* transição padrão */
    --dur-slow: 420ms;          /* entrada de elementos grandes */
    --dur-stagger: 60ms;        /* delay entre itens de lista */

    /* Elevações — sombras que comunicam hierarquia.
       Baseado em Material 3 + camadas dark-mode polidas. */
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.12);
    --elev-2: 0 4px 8px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.14);
    --elev-3: 0 10px 20px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.18);
    --elev-4: 0 20px 40px rgba(0, 0, 0, 0.34), 0 8px 16px rgba(0, 0, 0, 0.22);
    --elev-glow-ember: 0 0 32px rgba(255, 104, 31, 0.30), 0 0 8px rgba(255, 104, 31, 0.18);

    /* Focus ring — acessibilidade WCAG 2.5.5 + estética Tesla. */
    --focus-ring: 0 0 0 2px rgba(15, 18, 26, 1), 0 0 0 4px rgba(255, 104, 31, 0.55);

    /* Tipografia fluida — escala com viewport sem media queries.
       clamp(min, preferred, max). Min legibilidade preservada em mobile. */
    --fz-xs: clamp(0.68rem, 0.65rem + 0.15vw, 0.78rem);
    --fz-sm: clamp(0.78rem, 0.74rem + 0.20vw, 0.90rem);
    --fz-base: clamp(0.90rem, 0.84rem + 0.30vw, 1.05rem);
    --fz-md: clamp(1.05rem, 0.95rem + 0.45vw, 1.30rem);
    --fz-lg: clamp(1.30rem, 1.10rem + 1.00vw, 1.85rem);
    --fz-xl: clamp(1.80rem, 1.40rem + 2.00vw, 2.90rem);
}

/* Modo reduzir movimento (a11y) — respeitar prefs do SO. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 2) FOCUS RINGS REFINADOS ──────────────────────────────────────────────
   Substitui o "outline azul feio" do browser por ring laranja com gap.
   `:focus-visible` só ativa quando usuário navegou via teclado — não polui
   click do mouse. */
*:focus { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    transition: box-shadow var(--dur-fast) var(--ease-out);
}

/* ── 3) MICROINTERAÇÕES ────────────────────────────────────────────────────
   Botões, cards e elementos clicáveis ganham resposta tátil sutil.
   Princípio: hover muda Y -1px + brilho; active pressiona +1px; tudo curto. */
button, .btn, .athena-btn, .sys-btn, [role="button"], .nexus-btn,
.atb-chip, .amms-btn, .tn-btn, .sla-btn {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                filter var(--dur-fast) var(--ease-out);
    will-change: transform;
}
button:hover:not(:disabled), .btn:hover:not(:disabled),
.athena-btn:hover:not(:disabled), .sys-btn:hover:not(:disabled),
[role="button"]:hover:not(:disabled), .nexus-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
button:active:not(:disabled), .btn:active:not(:disabled),
.athena-btn:active:not(:disabled), .sys-btn:active:not(:disabled),
[role="button"]:active:not(:disabled), .nexus-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
    filter: brightness(0.96);
    transition-duration: var(--dur-instant);
}

/* Cards que NÃO são clicáveis ainda ganham lift sutil em hover (afeta foco visual). */
.athena-card-hoverable {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.athena-card-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-3);
}

/* ── 4) ENTRADA DE PÁGINA / ELEMENTOS — FADE-UP STAGGER ────────────────────
   Aplica em containers com [data-athena-enter]. JS adiciona automaticamente. */
@keyframes athena-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-athena-enter] {
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) both;
}
[data-athena-enter] > * {
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) both;
}
[data-athena-enter] > *:nth-child(1) { animation-delay: calc(var(--dur-stagger) * 0); }
[data-athena-enter] > *:nth-child(2) { animation-delay: calc(var(--dur-stagger) * 1); }
[data-athena-enter] > *:nth-child(3) { animation-delay: calc(var(--dur-stagger) * 2); }
[data-athena-enter] > *:nth-child(4) { animation-delay: calc(var(--dur-stagger) * 3); }
[data-athena-enter] > *:nth-child(5) { animation-delay: calc(var(--dur-stagger) * 4); }
[data-athena-enter] > *:nth-child(6) { animation-delay: calc(var(--dur-stagger) * 5); }
[data-athena-enter] > *:nth-child(n+7) { animation-delay: calc(var(--dur-stagger) * 6); }

/* ── 5) SKELETONS — LOADING STATES POLIDOS ─────────────────────────────────
   Substitui spinners. Shimmer diagonal. Use .athena-sk em qualquer div. */
.athena-sk, .athena-sk-text, .athena-sk-circle, .athena-sk-bar {
    position: relative;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.04) 80%
    );
    background-size: 200% 100%;
    animation: athena-sk-shimmer 1.4s linear infinite;
    border-radius: 6px;
    overflow: hidden;
}
.athena-sk-text {
    height: 12px;
    margin: 4px 0;
}
.athena-sk-text--lg { height: 18px; }
.athena-sk-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
}
.athena-sk-bar { height: 8px; }
@keyframes athena-sk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 6) TOAST SYSTEM 2026 ──────────────────────────────────────────────────
   Stack vertical no canto inferior direito (desktop) ou full-width no top
   em mobile. Auto-dismiss controlado por JS, mas a animação fica aqui. */
.athena-toast-stack {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 40px));
}
.athena-toast {
    pointer-events: auto;
    background: rgba(15, 18, 26, 0.95);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 3px solid var(--toast-accent, #ff681f);
    color: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: var(--elev-3);
    font-family: var(--font-display, system-ui), sans-serif;
    font-size: 13px;
    line-height: 1.45;
    animation: athena-toast-in var(--dur-base) var(--ease-emphasis) both;
    display: flex; align-items: flex-start; gap: 10px;
}
.athena-toast--ok    { --toast-accent: #4ade80; }
.athena-toast--warn  { --toast-accent: #fbbf24; }
.athena-toast--err   { --toast-accent: #f87171; }
.athena-toast--info  { --toast-accent: #60a5fa; }
.athena-toast-icon { font-size: 16px; line-height: 1; margin-top: 1px; }
.athena-toast-msg { flex: 1; }
.athena-toast-title { font-weight: 700; margin-bottom: 2px; }
.athena-toast-close {
    background: transparent; border: none; color: rgba(255,255,255,.45);
    cursor: pointer; font-size: 16px; padding: 0; line-height: 1;
}
.athena-toast-close:hover { color: #fff; }
.athena-toast.leaving {
    animation: athena-toast-out var(--dur-base) var(--ease-in-out) both;
}
@keyframes athena-toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes athena-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px) scale(0.95); }
}
@media (max-width: 640px) {
    .athena-toast-stack {
        top: calc(8px + env(safe-area-inset-top, 0px));
        bottom: auto;
        left: 8px; right: 8px;
        max-width: none;
    }
    .athena-toast {
        animation-name: athena-toast-in-mobile;
    }
}
/* keyframes movido para fora do @media (NUglify 1.21 nao parseia @keyframes
   aninhado em @media). Funcionalmente identico: keyframes sao globais; o
   animation-name continua dentro do @media (so aplica no mobile). */
@keyframes athena-toast-in-mobile {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 7) EMPTY STATES ───────────────────────────────────────────────────────
   Quando lista/grid vazia, mostra ilustração + microcopy + CTA.
   Use: <div class="athena-empty">…</div> */
.athena-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}
.athena-empty-icon {
    font-size: 56px;
    line-height: 1;
    opacity: 0.45;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 24px rgba(255, 104, 31, 0.25));
}
.athena-empty-title {
    font-family: var(--font-display, system-ui), sans-serif;
    font-weight: 800;
    font-size: var(--fz-md);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
}
.athena-empty-desc {
    font-size: var(--fz-sm);
    max-width: 38ch;
    line-height: 1.5;
    margin-bottom: 18px;
}
.athena-empty-cta {
    padding: 8px 18px;
    background: linear-gradient(135deg, #ff681f, #ff8c4d);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: var(--fz-sm);
}

/* ── 8) ATALHOS DE TECLADO — KBD STYLE ─────────────────────────────────────
   Tecla aparecendo em tooltips, help modal, microcopy. */
.athena-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) inset;
}

/* Help modal (atalhos) */
.athena-help-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 99998;
    animation: athena-fade-up var(--dur-base) var(--ease-emphasis) both;
}
.athena-help-modal {
    background: rgba(15, 18, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 28px;
    width: min(560px, 90vw);
    box-shadow: var(--elev-4);
}
.athena-help-title {
    font-family: var(--font-display, system-ui), sans-serif;
    font-weight: 800;
    font-size: var(--fz-md);
    color: #fff;
    margin-bottom: 16px;
}
.athena-help-list { display: flex; flex-direction: column; gap: 8px; }
.athena-help-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fz-sm);
}
.athena-help-keys { display: flex; gap: 4px; }

/* ── 9) TIPOGRAFIA FLUIDA ──────────────────────────────────────────────────
   Aplica em headings sem precisar de @media. */
h1.athena-h1 { font-size: var(--fz-xl); line-height: 1.05; letter-spacing: -0.02em; font-weight: 900; }
h2.athena-h2 { font-size: var(--fz-lg); line-height: 1.15; letter-spacing: -0.015em; font-weight: 800; }
h3.athena-h3 { font-size: var(--fz-md); line-height: 1.25; font-weight: 700; }
.athena-text-base { font-size: var(--fz-base); line-height: 1.55; }
.athena-text-sm   { font-size: var(--fz-sm);  line-height: 1.5; }

/* ── 10) VIEW TRANSITIONS API — modo escuro ↔ claro fluido ────────────────
   Quando suportado, anima a troca de tema com cross-fade radial. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--dur-slow);
    animation-timing-function: var(--ease-emphasis);
    mix-blend-mode: normal;
}

/* ── 11) SCROLLBARS TEMATIZADAS ────────────────────────────────────────────
   Sutil, não invasiva, combina com a paleta. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 104, 31, 0.35) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255, 104, 31, 0.30);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 104, 31, 0.55);
    background-clip: padding-box;
}

/* ── 12) SELECTION COLOR ──────────────────────────────────────────────────
   Cor do texto selecionado combina com brand. */
::selection {
    background: rgba(255, 104, 31, 0.40);
    color: #fff;
}

/* ── 13) RIPPLE EFFECT (sutil) — botões grandes ───────────────────────────
   Use .athena-ripple. JS dispara a animação. */
.athena-ripple {
    position: relative;
    overflow: hidden;
}
.athena-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: athena-ripple-anim var(--dur-slow) var(--ease-out) forwards;
    pointer-events: none;
}
@keyframes athena-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* ── 14) ONBOARDING SPOTLIGHT (mini-tour) ─────────────────────────────────
   Highlight de elemento com máscara escura ao redor. */
.athena-spotlight-mask {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 99000;
    pointer-events: auto;
    transition: opacity var(--dur-slow) var(--ease-out);
}
.athena-spotlight-tip {
    position: fixed;
    z-index: 99001;
    background: rgba(15, 18, 26, 0.98);
    border: 1px solid rgba(255, 104, 31, 0.40);
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 340px;
    box-shadow: var(--elev-glow-ember), var(--elev-3);
    color: #fff;
    font-size: var(--fz-sm);
    animation: athena-fade-up var(--dur-base) var(--ease-emphasis) both;
}
.athena-spotlight-step { font-size: 10px; color: rgba(255, 104, 31, 0.85); font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
.athena-spotlight-title { font-family: var(--font-display, system-ui), sans-serif; font-weight: 800; font-size: var(--fz-base); margin-bottom: 6px; }
.athena-spotlight-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.athena-spotlight-btn {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.athena-spotlight-btn--primary {
    background: linear-gradient(135deg, #ff681f, #ff8c4d);
    border-color: transparent;
}

/* ── 15) BACK-TO-TOP FLOAT ─────────────────────────────────────────────────
   Aparece quando scroll > 400px. Pequeno detalhe que polish. */
.athena-back-top {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 9996;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(15, 18, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: opacity var(--dur-base) var(--ease-out),
                visibility var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.athena-back-top.visible {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.athena-back-top:hover { box-shadow: var(--elev-glow-ember); }

/* ── 16) INPUT STATES MELHORADOS ──────────────────────────────────────────
   Inputs com label flutuante (Material 3 style), animação suave. */
.athena-field { position: relative; }
.athena-field input,
.athena-field select,
.athena-field textarea {
    width: 100%;
    padding: 18px 12px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #fff;
    font-size: var(--fz-sm);
    transition: border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}
.athena-field input:focus,
.athena-field select:focus,
.athena-field textarea:focus {
    border-color: rgba(255, 104, 31, 0.55);
    background: rgba(255, 255, 255, 0.06);
}
.athena-field label {
    position: absolute;
    left: 12px; top: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--fz-sm);
    pointer-events: none;
    transition: top var(--dur-base) var(--ease-out),
                font-size var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.athena-field input:focus + label,
.athena-field input:not(:placeholder-shown) + label,
.athena-field select:focus + label,
.athena-field textarea:focus + label,
.athena-field textarea:not(:placeholder-shown) + label {
    top: 4px;
    font-size: 10px;
    color: rgba(255, 104, 31, 0.85);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  OVERRIDES VISÍVEIS — aplicam o design system nos elementos REAIS do   ║
   ║  ATHENA sem precisar mudar HTML. Mira nos seletores reais do app.      ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* Background do app — gradient profundo com luz ambiente sutil
   no canto superior esquerdo (foco visual onde está o brand). */
.nexus-system-root {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255, 104, 31, 0.10) 0%, transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(96, 165, 250, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #0a0c12 0%, #0e1118 50%, #0a0c12 100%) !important;
}

/* Sidebar — glassmorphism mais polido + border sutil ember */
.side-panel {
    background: rgba(13, 16, 22, 0.92) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-right: 1px solid rgba(255, 104, 31, 0.08) !important;
    box-shadow:
        4px 0 24px rgba(0, 0, 0, 0.35),
        inset -1px 0 0 rgba(255, 255, 255, 0.03) !important;
}

/* Brand header da sidebar — entrada com fade */
.brand-header {
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) both;
}

/* Hierarquia — itens com microhover refinado */
.hierarchy-toggle {
    transition: background-color var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out) !important;
}
.hierarchy-toggle:hover {
    background-color: rgba(255, 104, 31, 0.06) !important;
}

/* System actions buttons (MAPA / COMPARAR / CONFIGURAÇÕES / SAIR) */
.sys-btn {
    transition: all var(--dur-base) var(--ease-out) !important;
}
.sys-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 104, 31, 0.40) !important;
    transform: translateX(2px) !important;
}

/* Asset header (card "2202 / Telemetry link active") — elevação premium */
.asset-header-bar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%),
        rgba(15, 18, 26, 0.85) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: 3px solid #ff681f !important;
    box-shadow:
        var(--elev-2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) both;
}

/* Map container — borda glow ember + animação de entrada */
.map-container {
    box-shadow:
        var(--elev-3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 40px rgba(255, 104, 31, 0.04) !important;
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) 80ms both;
}

/* Cards de KPIs do dashboard (VELOCIDADE / RPM / FUEL / TEMP) */
.pdf-kpi-box,
.mc-signal,
.athena-card,
.nexus-card,
[class*="kpi-box"],
[class*="signal-card"] {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out) !important;
}
.pdf-kpi-box:hover,
.mc-signal:hover,
.athena-card:hover,
.nexus-card:hover,
[class*="kpi-box"]:hover,
[class*="signal-card"]:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        var(--elev-3),
        0 0 0 1px rgba(255, 104, 31, 0.20) !important;
}

/* Animação cascateada de entrada pros KPIs */
.mc-signals-grid > *,
.pdf-grid-4 > * {
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) both;
}
.mc-signals-grid > *:nth-child(1),
.pdf-grid-4 > *:nth-child(1) { animation-delay: 0ms; }
.mc-signals-grid > *:nth-child(2),
.pdf-grid-4 > *:nth-child(2) { animation-delay: 50ms; }
.mc-signals-grid > *:nth-child(3),
.pdf-grid-4 > *:nth-child(3) { animation-delay: 100ms; }
.mc-signals-grid > *:nth-child(4),
.pdf-grid-4 > *:nth-child(4) { animation-delay: 150ms; }
.mc-signals-grid > *:nth-child(5),
.pdf-grid-4 > *:nth-child(5) { animation-delay: 200ms; }
.mc-signals-grid > *:nth-child(n+6),
.pdf-grid-4 > *:nth-child(n+6) { animation-delay: 250ms; }

/* Hero empty state — refinado */
.nexus-hero-shell {
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) both;
}

/* Topbar — refinamento adicional do gradient inferior */
.athena-topbar::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 104, 31, 0.30) 20%,
        rgba(255, 104, 31, 0.90) 50%,
        rgba(255, 104, 31, 0.30) 80%,
        transparent 100%) !important;
    height: 1px !important;
    filter: blur(0.3px);
}

/* Botões de ação no header do ativo (Gerar PDF / Editar / Excluir) */
.btn-report-stealth,
.btn-edit-stealth,
.btn-delete-stealth {
    transition: all var(--dur-base) var(--ease-out) !important;
    position: relative;
    overflow: hidden;
}
.btn-report-stealth:hover,
.btn-edit-stealth:hover,
.btn-delete-stealth:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 104, 31, 0.25) !important;
}

/* Mission control / signals grid */
.mc-signals-band,
.mc-arcs-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%),
        rgba(15, 18, 26, 0.85) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    animation: athena-fade-up var(--dur-slow) var(--ease-emphasis) 120ms both;
}

/* Tabelas — hover em rows */
table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}
table tbody tr:hover {
    background-color: rgba(255, 104, 31, 0.04);
}

/* Chat IA flutuante — refinamento */
.ia-chat-button,
[class*="athena-chat-bubble"],
.athena-ia-fab {
    transition: all var(--dur-base) var(--ease-out) !important;
    box-shadow:
        var(--elev-3),
        0 0 32px rgba(255, 104, 31, 0.35) !important;
}
.ia-chat-button:hover,
[class*="athena-chat-bubble"]:hover,
.athena-ia-fab:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow:
        var(--elev-4),
        0 0 48px rgba(255, 104, 31, 0.55) !important;
}

/* Mobile menu / search input glow ao focar */
.search-container input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: rgba(255, 104, 31, 0.50) !important;
    box-shadow:
        0 0 0 3px rgba(255, 104, 31, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out) !important;
}

/* Modais — glassmorphism mais elegante */
.modal-overlay,
.modal-overlay-2026,
.athena-help-overlay,
[class*="modal-bg"] {
    animation: athena-fade-up var(--dur-base) var(--ease-out) both !important;
}
.modal-card,
.modal-content,
.cadastro-truck-card,
[class*="modal-dialog"] > div {
    animation: athena-modal-scale-in var(--dur-base) var(--ease-emphasis) both !important;
}
@keyframes athena-modal-scale-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Loading dots no chat IA */
.thinking-dots span {
    animation-timing-function: var(--ease-in-out) !important;
}

/* Ícones de status (online/offline dot) — pulso mais elegante */
.mapa-frota-dot {
    animation: athena-pulse-dot 1.8s var(--ease-in-out) infinite !important;
}
@keyframes athena-pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(0, 255, 102, 0.7), 0 0 4px rgba(0, 255, 102, 0.5); }
    50%      { opacity: 0.65; box-shadow: 0 0 4px rgba(0, 255, 102, 0.3); }
}

/* ── 17) LOADER PRINCIPAL DA APP — substitui spinner padrão ──────────────── */
.athena-app-loader {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
    background: radial-gradient(circle at center, #14171f 0%, #0a0c12 100%);
    z-index: 99997;
}
.athena-app-loader-ring {
    width: 56px; height: 56px;
    border: 3px solid rgba(255, 255, 255, 0.10);
    border-top-color: #ff681f;
    border-radius: 50%;
    animation: athena-spin 0.9s linear infinite;
}
.athena-app-loader-msg {
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
@keyframes athena-spin {
    to { transform: rotate(360deg); }
}

/* ===== css/athena-visual-impact.css ===== */
/* =========================================================================
   ATHENA — Visual Impact Pack 2026
   ---------------------------------------------------------------------
   Adições visuais cinematográficas:
     1) Pulse halo no caminhão (mapa) — tiers warning/critical/ok
     2) Sparkline inline em métricas
     3) Confetti containers
     4) Driver Score Gauge F1 (cinematográfico)
     5) TV Mode layout
     6) Trip animation (polyline glow)
     7) Streak system (badges + flame)
     8) Skeleton shimmer premium
   ========================================================================= */


/* ─── 1) Pulse halo no caminhão — TIERS ──────────────────────────────────── */
/*    .has-falha (já existente) = critical (vermelho rápido)                  */
/*    .has-warning              = warning  (amarelo médio)                    */
/*    .has-info                 = info     (azul lento) — opcional            */
.mapa-frota-icon.has-warning::before,
.mapa-frota-icon.has-warning::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 2px solid #ffb800;
    background: rgba(255,184,0,.14);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: mapaFrotaPulseWarning 2.2s cubic-bezier(.16,1,.3,1) infinite;
}
.mapa-frota-icon.has-warning::after { animation-delay: 1.1s; }

@keyframes mapaFrotaPulseWarning {
    0%   { transform: scale(0.55); opacity: 0.7; }
    80%  { transform: scale(2.2);  opacity: 0; }
    100% { transform: scale(2.2);  opacity: 0; }
}

/* Tier critical = mantém o existente mas com filter glow extra pra impacto */
.mapa-frota-icon.has-falha svg {
    filter: drop-shadow(0 0 4px rgba(230,57,70,.55))
            drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* Pulse INFO (azul, lento) — uso opcional pra "fora de rota", "sem comunicação" */
.mapa-frota-icon.has-info::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 2px solid #00aaff;
    background: rgba(0,170,255,.10);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: mapaFrotaPulseInfo 3s ease-out infinite;
}
@keyframes mapaFrotaPulseInfo {
    0%   { transform: scale(0.55); opacity: 0.55; }
    100% { transform: scale(2.5);  opacity: 0; }
}

/* Overview map markers (versão menor pra mapa do hero) */
.leaflet-marker-icon.has-falha-overview {
    filter: drop-shadow(0 0 3px rgba(230,57,70,.6));
    animation: overviewIconPulse 1.5s ease-in-out infinite;
}
@keyframes overviewIconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}


/* ─── 2) Sparkline inline — SVG renderizado via JS ───────────────────────── */
/* Inserido como ULTIMO filho do val. O val vira inline-flex pra agrupar
   [numero][unidade][sparkline] num bloco unico que vai pra direita do row. */
.athena-sparkline {
    display: inline-block;
    vertical-align: middle;
    width: 56px;
    height: 18px;
    margin-left: 10px;
    overflow: visible;
    flex-shrink: 0;
}

/* Quando o val (span num-smooth) tem sparkline filho, vira inline-flex.
   Assim numero/unidade/sparkline ficam grudados num bloco unico. */
.num-smooth:has(> .athena-sparkline),
.mc-row-val:has(> .athena-sparkline),
.mc-vital-value:has(> .athena-sparkline),
.mc-banner-kpi-val:has(> .athena-sparkline) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

/* Unidades dos indicadores (kPa, %, V, H, KM, kg, L/h) — o inline style
   default em 9px + opacity 0.3 ficava praticamente invisivel. Aumenta pra
   11px com 55% opacidade pra legibilidade real. */
.mc-row-val > small,
.mc-vital-value > small,
.mc-banner-kpi-val > small {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .55) !important;
    margin-left: 3px;
    font-weight: 500;
    letter-spacing: .2px;
}

/* FIX desalinhamento: small VAZIO (caminhao offline, "—") ocupava 3px de
   margin-left empurrando o "—" 3px pra esquerda em relacao a rows sem <small>.
   :empty seleciona elementos sem filhos nem texto. */
.mc-row-val > small:empty,
.mc-vital-value > small:empty,
.mc-banner-kpi-val > small:empty {
    display: none;
}
.athena-sparkline-path {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px currentColor);
}
.athena-sparkline-area {
    opacity: 0.18;
}
.athena-sparkline-dot {
    fill: currentColor;
    filter: drop-shadow(0 0 3px currentColor);
}
/* Trend indicators */
.athena-sparkline.trend-up    { color: #00ff88; }
.athena-sparkline.trend-down  { color: #ff4d4d; }
.athena-sparkline.trend-flat  { color: #888; }


/* ─── 3) Confetti container (canvas overlay) ─────────────────────────────── */
.athena-confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 99999;
}


/* ─── 4) Driver Score Gauge F1 cinematográfico ───────────────────────────── */
/* Tamanho compacto pra caber no row de 168px de altura (banner-matched). */
.athena-ds-f1 {
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.athena-ds-f1-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.athena-ds-f1-track {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 10;
}
.athena-ds-f1-progress {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(.16,1,.3,1),
                stroke 0.6s ease;
    filter: drop-shadow(0 0 3px currentColor);
}
.athena-ds-f1-glow {
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
    opacity: 0.3;
    transition: stroke-dashoffset 0.8s cubic-bezier(.16,1,.3,1);
    filter: blur(3px);
}
.athena-ds-f1-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}
.athena-ds-f1-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.athena-ds-f1-label {
    font-size: 7px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}
.athena-ds-f1-band {
    font-size: 9px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: 1px;
}
/* Tier colors */
.athena-ds-f1.tier-eco       .athena-ds-f1-progress,
.athena-ds-f1.tier-eco       .athena-ds-f1-glow      { stroke: #00ff88; }
.athena-ds-f1.tier-eco       .athena-ds-f1-band      { color: #00ff88; }
.athena-ds-f1.tier-bom       .athena-ds-f1-progress,
.athena-ds-f1.tier-bom       .athena-ds-f1-glow      { stroke: #88ff00; }
.athena-ds-f1.tier-bom       .athena-ds-f1-band      { color: #88ff00; }
.athena-ds-f1.tier-medio     .athena-ds-f1-progress,
.athena-ds-f1.tier-medio     .athena-ds-f1-glow      { stroke: #ffb800; }
.athena-ds-f1.tier-medio     .athena-ds-f1-band      { color: #ffb800; }
.athena-ds-f1.tier-ruim      .athena-ds-f1-progress,
.athena-ds-f1.tier-ruim      .athena-ds-f1-glow      { stroke: #ff681f; }
.athena-ds-f1.tier-ruim      .athena-ds-f1-band      { color: #ff681f; }
.athena-ds-f1.tier-critico   .athena-ds-f1-progress,
.athena-ds-f1.tier-critico   .athena-ds-f1-glow      { stroke: #ff4444; }
.athena-ds-f1.tier-critico   .athena-ds-f1-band      { color: #ff4444; animation: dsCriticoPulse 1.2s ease-in-out infinite; }
@keyframes dsCriticoPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}


/* ─── 5) TV Mode layout (rota /tv, fullscreen) ───────────────────────────── */
.tv-mode {
    background: radial-gradient(ellipse at top, #0a0e1a 0%, #050608 100%);
    color: #fff;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    padding: 24px 32px;
}

/* ── TV MODE v2 — cinematografico + mapa + sidebar + back btn ───────────── */
.tv-mode-v2 {
    position: relative;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100vh;
    overflow: hidden;
    background: #04050a;
    box-sizing: border-box;
}
/* Backgrounds — position absolute (forcado com !important pra n‹o herdar
   o `position: relative` do `.tv-mode-v2 > *` que empurraria tudo no flow). */
.tv-bg-grid {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    background-image:
        linear-gradient(rgba(255,102,0,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,102,0,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 100%);
}
.tv-bg-glow {
    position: absolute !important;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    opacity: .3;
    z-index: 0 !important;
}
.tv-bg-glow-1 { background: #ff681f; width: 600px; height: 600px; top: -200px; right: -150px; animation: tvGlow1 14s ease-in-out infinite; }
.tv-bg-glow-2 { background: #00aaff; width: 500px; height: 500px; bottom: -150px; left: -100px; animation: tvGlow2 18s ease-in-out infinite; }
@keyframes tvGlow1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px, 30px); } }
@keyframes tvGlow2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -30px); } }

/* Conteudo principal (header/kpis/main/footer) — z-index acima dos bgs.
   Excluimos os backgrounds via :not() pra nao sobrescrever o position absolute. */
.tv-mode-v2 > .tv-mode-header,
.tv-mode-v2 > .tv-mode-bignums,
.tv-mode-v2 > .tv-mode-main,
.tv-mode-v2 > .tv-mode-footer {
    position: relative;
    z-index: 2;
}

.tv-mode-v2 .tv-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,102,0,.18);
}
.tv-mode-v2 .tv-mode-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #ff681f 0%, #ffaa00 50%, #ff681f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: tvTitleShimmer 6s ease-in-out infinite;
}
@keyframes tvTitleShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.tv-mode-logo {
    width: 36px; height: 36px;
    filter: drop-shadow(0 0 5px rgba(255,102,0,.5));
}
.tv-mode-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.tv-mode-v2 .tv-mode-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    padding: 6px 14px;
    border-radius: 8px;
}
.tv-mode-back-btn {
    background: rgba(255,102,0,.12);
    border: 1px solid rgba(255,102,0,.45);
    color: #ff681f;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all .2s;
    text-transform: uppercase;
}
.tv-mode-back-btn:hover {
    background: rgba(255,102,0,.25);
    transform: translateX(-2px);
    box-shadow: 0 4px 16px rgba(255,102,0,.3);
}

/* KPIs v2 — mais cinematográficos + MOVIMENTO AMBIENTE. A TV não tem mouse,
   então o hover era inútil: trocamos por animação de entrada em cascata e
   "respiração" sutil do acento, que dão vida sem exigir interação. */
.tv-mode-v2 .tv-mode-bignums {
    margin-top: 0;
    gap: 18px;
}
.tv-mode-v2 .tv-mode-bignum {
    padding: 22px 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
    animation: tvKpiIn .7s cubic-bezier(.16,1,.3,1) both;
}
/* Entrada em cascata dos 4 cards. */
.tv-mode-v2 .tv-mode-bignum:nth-child(1) { animation-delay: .04s; }
.tv-mode-v2 .tv-mode-bignum:nth-child(2) { animation-delay: .12s; }
.tv-mode-v2 .tv-mode-bignum:nth-child(3) { animation-delay: .20s; }
.tv-mode-v2 .tv-mode-bignum:nth-child(4) { animation-delay: .28s; }
@keyframes tvKpiIn {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Barra de acento no topo respira de leve (a base já define o gradiente). */
.tv-mode-v2 .tv-mode-bignum::before {
    height: 3px;
    animation: tvKpiBar 4.5s ease-in-out infinite;
}
@keyframes tvKpiBar { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
/* Halo de acento (usa a cor do próprio KPI) no topo do card, pulsando suave. */
.tv-mode-v2 .tv-mode-bignum::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 72px;
    background: radial-gradient(ellipse at top, var(--tv-accent, #ff681f), transparent 72%);
    opacity: .08;
    pointer-events: none;
    animation: tvKpiGlow 4.5s ease-in-out infinite;
}
@keyframes tvKpiGlow { 0%,100% { opacity: .05; } 50% { opacity: .16; } }
.tv-mode-v2 .tv-mode-bignum-value {
    font-size: 72px;
    line-height: 1;
}

/* Entradas suaves das seções (movimento sem hover). O container do mapa recebe
   só FADE — transform em ancestral do Leaflet pode bagunçar o sizing dos tiles. */
.tv-mode-v2 .tv-mode-header { animation: tvHeaderIn .6s ease both; }
@keyframes tvHeaderIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.tv-mode-v2 .tv-mode-main { animation: tvFadeInSoft .9s .1s ease both; }
@keyframes tvFadeInSoft { from { opacity: 0; } to { opacity: 1; } }
.tv-mode-v2 .tv-mode-sidebar > .tv-mode-panel {
    animation: tvSideIn .7s cubic-bezier(.16,1,.3,1) both;
}
.tv-mode-v2 .tv-mode-sidebar > .tv-mode-panel:nth-child(1) { animation-delay: .30s; }
.tv-mode-v2 .tv-mode-sidebar > .tv-mode-panel:nth-child(2) { animation-delay: .40s; }
@keyframes tvSideIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

/* Acessibilidade: respeita prefers-reduced-motion (desliga o movimento ambiente). */
@media (prefers-reduced-motion: reduce) {
    .tv-mode-v2 .tv-mode-bignum,
    .tv-mode-v2 .tv-mode-bignum::before,
    .tv-mode-v2 .tv-mode-bignum::after,
    .tv-mode-v2 .tv-mode-header,
    .tv-mode-v2 .tv-mode-main,
    .tv-mode-v2 .tv-mode-sidebar > .tv-mode-panel,
    .tv-mode-v2 .tv-mode-title,
    .tv-bg-glow-1, .tv-bg-glow-2 {
        animation: none !important;
    }
}

/* Layout principal: mapa + sidebar */
.tv-mode-main {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
    flex: 1 1 0;
    min-height: 0;       /* permite grid items encolherem dentro do flex */
    height: 100%;
}
.tv-mode-map-wrap {
    position: relative;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    min-height: 0;
}
.tv-mode-map {
    position: absolute;
    inset: 0;
    background: #0a0e1a;
    z-index: 1;
}
/* Satellite ArcGIS ja' tem cores naturais — leve dessaturacao + contraste
   pra combinar com o tema dark do dashboard sem virar negativo. */
.tv-mode-map .leaflet-tile-pane {
    filter: brightness(.85) saturate(.9) contrast(1.05);
}
.tv-mode-map .leaflet-control-attribution {
    background: rgba(0,0,0,.6);
    color: rgba(255,255,255,.4);
    font-size: 9px;
}
.tv-mode-map-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 14px;
    background: rgba(5,6,14,.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 14px;
    z-index: 500;
}
.tv-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255,255,255,.75);
    letter-spacing: 1px;
}
.tv-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 3px currentColor;
}
.tv-marker {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.8);
    box-shadow: 0 0 5px currentColor, 0 0 4px rgba(0,0,0,.5);
}

/* Wrap vertical: label sempre visivel em cima do dot (estilo "etiqueta do
   carro" no mapa). Layout em coluna com gap pequeno + drop-shadow do label. */
.tv-marker-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}
.tv-marker-label {
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: rgba(10, 12, 18, .94);
    border: 1px solid var(--label-color, #ff681f);
    border-radius: 6px;
    padding: 3px 9px;
    line-height: 1.3;
    margin-bottom: 6px;
    white-space: nowrap;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Setinha apontando do label pro dot — usa borders pra criar triangulo. */
.tv-marker-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--label-color, #ff681f);
}

/* Painéis comuns */
.tv-mode-panel {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 16px 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tv-mode-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(255,170,0,.85);
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.tv-mode-map-wrap > .tv-mode-panel-title {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 500;
    background: linear-gradient(180deg, rgba(5,6,14,.95), rgba(5,6,14,.7) 80%, transparent);
    padding: 14px 18px;
    border-bottom: 0;
    margin-bottom: 0;
}
.tv-mode-pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 4px #00ff88;
    animation: tvPulseDot 1.5s ease-in-out infinite;
}
.tv-mode-pulse-dot.crit { background: #ff4444; box-shadow: 0 0 4px #ff4444; }
@keyframes tvPulseDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Sidebar */
.tv-mode-sidebar {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    min-height: 0;
    height: 100%;
}

/* Status sistemas */
.tv-status-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tv-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,.02);
    border-radius: 8px;
    border-left: 3px solid transparent;
}
.tv-status-row.ok    { border-left-color: #00ff88; }
.tv-status-row.warn  { border-left-color: #ffaa00; }
.tv-status-row.fail  { border-left-color: #ff4444; animation: tvBlinkFail 1.5s ease-in-out infinite; }
@keyframes tvBlinkFail { 0%,100% { background: rgba(255,68,68,.05); } 50% { background: rgba(255,68,68,.15); } }
.tv-status-name { font-size: 13px; color: #fff; font-weight: 600; }
.tv-status-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,255,255,.7);
}
.tv-status-row.ok   .tv-status-badge { color: #00ff88; }
.tv-status-row.warn .tv-status-badge { color: #ffaa00; }
.tv-status-row.fail .tv-status-badge { color: #ff4444; }

/* Alertas live — modo carrossel (1 por vez, sem scroll, fade entre eles).
   TV nunca rola — operador ve' tudo sem interacao. */
.tv-alerts-panel {
    overflow: hidden;
    justify-content: flex-start;
}
.tv-alert-cycle {
    animation: tvAlertFadeIn .55s cubic-bezier(.16,1,.3,1);
}
@keyframes tvAlertFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Dots de progresso (mostra qual alerta esta visivel agora) */
.tv-alert-dots {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.04);
}
.tv-alert-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    transition: background .3s, transform .3s;
}
.tv-alert-dot.active {
    background: #ff681f;
    transform: scale(1.4);
    box-shadow: 0 0 3px rgba(255,102,0,.6);
}
.tv-alerts-empty {
    text-align: center;
    padding: 32px 8px;
    color: rgba(255,255,255,.45);
    font-size: 13px;
}
.tv-alerts-empty > span { font-size: 32px; display: block; margin-bottom: 8px; }
.tv-alert-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.02);
    border-left: 3px solid #ff681f;
}
.tv-alert-row.crit {
    background: linear-gradient(90deg, rgba(255,68,68,.12) 0%, rgba(255,68,68,.02) 100%);
    border-left-color: #ff4444;
}
.tv-alert-icon { font-size: 16px; line-height: 1; padding-top: 2px; }
.tv-alert-content { flex: 1; min-width: 0; }
.tv-alert-truck { font-size: 13px; font-weight: 700; color: #fff; }
.tv-alert-msg { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }

/* Footer — flex-shrink: 0 garante que nao colapsa nem corta texto.
   gap + flex-wrap permite quebrar em telas estreitas sem overflow. */
.tv-mode-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(255,255,255,.4);
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* Responsivo TV — fica em coluna em telas pequenas */
@media (max-width: 1200px) {
    .tv-mode-main { grid-template-columns: 1fr; }
    .tv-mode-sidebar { grid-template-rows: auto auto; }
    .tv-mode-v2 .tv-mode-bignums { grid-template-columns: repeat(2, 1fr); }
}
.tv-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,102,0,.25);
}
.tv-mode-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    background: linear-gradient(90deg, #ff681f 0%, #ffaa00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tv-mode-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    color: rgba(255,255,255,.85);
    letter-spacing: 2px;
}
.tv-mode-bignums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.tv-mode-bignum {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.tv-mode-bignum::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tv-accent, #ff681f), transparent);
}
.tv-mode-bignum-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    color: var(--tv-accent, #fff);
    text-shadow: 0 0 30px var(--tv-accent, rgba(255,102,0,.4));
}
.tv-mode-bignum-label {
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-top: 12px;
}
.tv-mode-bignum-sub {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    margin-top: 8px;
}
.tv-mode-alert {
    margin-top: 24px;
    background: linear-gradient(90deg, rgba(255,68,68,.18) 0%, rgba(255,68,68,.04) 100%);
    border: 1px solid rgba(255,68,68,.4);
    border-radius: 12px;
    padding: 20px 28px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    animation: tvAlertPulse 1.5s ease-in-out infinite;
}
@keyframes tvAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,.6); }
    50%      { box-shadow: 0 0 30px 4px rgba(255,68,68,.45); }
}
.tv-mode-leaderboard {
    margin-top: 24px;
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    padding: 20px 28px;
}
.tv-mode-leaderboard-title {
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,170,0,.85);
    margin-bottom: 14px;
}
.tv-mode-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,.06);
    font-size: 18px;
}
.tv-mode-leaderboard-pos {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    width: 40px;
    color: rgba(255,170,0,.7);
}
.tv-mode-leaderboard-pos.gold   { color: #ffd700; }
.tv-mode-leaderboard-pos.silver { color: #c0c0c0; }
.tv-mode-leaderboard-pos.bronze { color: #cd7f32; }
.tv-mode-leaderboard-name {
    flex: 1;
    font-weight: 600;
}
.tv-mode-leaderboard-score {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #00ff88;
}


/* ─── 6) Trip animation — polyline glow + carrinho ───────────────────────── */
.athena-trip-trail {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px currentColor);
}
.athena-trip-marker {
    border-radius: 50%;
    box-shadow: 0 0 3px #ff681f, 0 0 24px rgba(255,102,0,.5);
}
.athena-trip-controls {
    position: absolute;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    background: rgba(10,12,18,.92);
    border: 1px solid rgba(255,102,0,.4);
    border-radius: 24px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    backdrop-filter: blur(10px);
}
.athena-trip-controls button {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    transition: all .2s;
}
.athena-trip-controls button:hover {
    border-color: #ff681f;
    color: #ff681f;
}
.athena-trip-controls input[type=range] {
    width: 280px;
    accent-color: #ff681f;
}
.athena-trip-controls-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: rgba(255,255,255,.75);
    min-width: 70px;
}


/* ─── 7) Streak system (badges + flame) ──────────────────────────────────── */
.athena-streak {
    display: inline-flex;
    /* o pai .athena-streak-card-info é coluna flex (align-items:stretch),
       o que esticava esta caixa na largura toda. flex-start faz ela abraçar
       o conteúdo ("🔥 18 DIAS CONSECUTIVOS"), fiel ao mockup. */
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, rgba(255,102,0,.18) 0%, rgba(255,184,0,.08) 100%);
    border: 1px solid rgba(255,184,0,.35);
    border-radius: 24px;
    padding: 6px 14px 6px 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}
.athena-streak-flame {
    font-size: 18px;
    animation: streakFlameFlicker 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #ff6800);
}
@keyframes streakFlameFlicker {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    33%      { transform: scale(1.08) rotate(2deg); }
    66%      { transform: scale(.96) rotate(-1deg); }
}
.athena-streak-days {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 800;
    color: #ffb800;
}
.athena-streak-label {
    font-size: 11px;
    opacity: .7;
    letter-spacing: 1px;
}

.athena-streak-bar {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}
.athena-streak-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6800 0%, #ffd700 100%);
    transition: width 0.8s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 0 4px rgba(255,184,0,.45);
}

.athena-streak-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    /* 2026-06: removido grid-column/row absoluto — agora segue o fluxo
       natural da grid 2-colunas do .athena-streak-card. */
}
.athena-streak-badge {
    width: 56px;
    height: 88px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 22px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.3);
    transition: all .3s;
    position: relative;
}
.athena-streak-badge::after {
    content: attr(data-label);
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    margin-top: 2px;
}
.athena-streak-badge.earned {
    background: linear-gradient(135deg, rgba(0,0,0,.2), var(--badge-color, #ffd700) 200%);
    border-color: var(--badge-color, #ffd700);
    color: #fff;
    text-shadow: 0 0 4px var(--badge-color, #ffd700);
    box-shadow: 0 0 3px rgba(255,215,0,.18), inset 0 0 7px rgba(255,255,255,.05);
}
.athena-streak-badge.earned::after { color: var(--badge-color, #ffd700); }
.athena-streak-badge[data-tier="bronze"].earned   { --badge-color: #cd7f32; }
.athena-streak-badge[data-tier="prata"].earned    { --badge-color: #c0c0c0; }
.athena-streak-badge[data-tier="ouro"].earned     { --badge-color: #ffd700; }
.athena-streak-badge[data-tier="diamante"].earned { --badge-color: #00e5ff; }

/* ─── MODO CLARO: card de streak + hero score (2026-06) ──────────────────── */
/* Esses elementos ficavam escuros no modo claro porque so tinham fundo/texto
   dark hardcoded. Overrides abaixo clareiam fundo e escurecem texto.
   Badges "earned" mantem o gradient colorido (legivel em ambos os temas). */
.light-theme .athena-hero-score-row {
    background: linear-gradient(135deg, #ffffff 0%, #f3f5f9 100%);
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 10px 28px -8px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.6);
}
.light-theme .athena-streak {
    color: #2a2a2a;
    background: linear-gradient(90deg, rgba(255,102,0,.14) 0%, rgba(255,184,0,.08) 100%);
    border-color: rgba(255,140,0,.40);
}
.light-theme .athena-streak-days     { color: #b35a00; }
.light-theme .athena-streak-label    { color: rgba(0,0,0,.55); }
.light-theme .athena-streak-next     { color: rgba(0,0,0,.55); }
.light-theme .athena-streak-card-empty { color: rgba(0,0,0,.55); }
.light-theme .athena-streak-card-title { color: #b35a00; }
.light-theme .athena-streak-bar      { background: rgba(0,0,0,.08); }
.light-theme .athena-streak-badge {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
    color: rgba(0,0,0,.35);
}
.light-theme .athena-streak-badge::after { color: rgba(0,0,0,.45); }


/* ─── 8) Skeleton shimmer premium ────────────────────────────────────────── */
.athena-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.04) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    display: inline-block;
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.athena-skeleton-text  { height: 14px; width: 80%; }
.athena-skeleton-num   { height: 24px; width: 60px; }
.athena-skeleton-card  { height: 80px; width: 100%; }


/* ─── Hero Score Row (Driver Score F1 + Streak) ──────────────────────────── */
/* Mesmo padrao visual do banner .mc-banner que fica acima:
   full-width, height 168px, padding/radius/background/border identicos. */
.athena-hero-score-row {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 24px;
    margin-top: 12px;
    padding: 18px 24px;
    height: 168px;
    min-height: 168px;
    background: linear-gradient(135deg, rgba(14,14,26,.98) 0%, rgba(6,6,16,.99) 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    align-items: center;
}
.athena-hero-score-row::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #00ff88 0%, rgba(0,210,255,.5) 50%, transparent 100%);
}
.athena-streak-card {
    padding: 0;
    background: transparent;
    /* 2026-06: redesign — 2 colunas (info empilhada vertical + badges).
       Antes era grid 2x2 com 5 elementos planos => layout caotico. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    height: 100%;
}
.athena-streak-card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;   /* permite que children encolham se faltar espaco */
}
.athena-streak-next {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    line-height: 1.2;
}
.athena-streak-card-title {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,170,0,.8);
    font-weight: 800;
}
.athena-streak-card-empty {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    line-height: 1.3;
    max-width: 240px;
}

.athena-trip-replay-btn {
    margin-top: 12px;
    background: linear-gradient(90deg, #ff681f 0%, #ffaa00 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    width: 100%;
    box-shadow: 0 4px 12px rgba(255,102,0,.25);
}
.athena-trip-replay-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255,102,0,.4);
}

@media (max-width: 880px) {
    .athena-hero-score-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
}


/* Reduced motion — respeitar usuários com sensibilidade vestibular */
@media (prefers-reduced-motion: reduce) {
    .mapa-frota-radar,
    .mapa-frota-radar-2,
    .mapa-frota-icon.has-warning::before,
    .mapa-frota-icon.has-warning::after,
    .mapa-frota-icon.has-info::before,
    .athena-streak-flame,
    .tv-mode-alert,
    .athena-skeleton,
    .athena-ds-f1.tier-critico .athena-ds-f1-band {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MODO CLARO 2026-06 — medidor F1 de eficiencia (driver score gauge).
   Numero/label/band eram brancos e sumiam no fundo claro do card.
   ═══════════════════════════════════════════════════════════════════ */
.light-theme .athena-ds-f1-value {
    background: linear-gradient(180deg, #15151a 0%, #44464d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.light-theme .athena-ds-f1-label { color: rgba(0,0,0,.55); }
.light-theme .athena-ds-f1-band  { color: rgba(0,0,0,.62); }

/* ===== css/athena-ui-pro.css ===== */
/* =========================================================================
   ATHENA — UI PRO Pack 2026
   ----------------------------------------------------------------------
   Features:
     1) Command Palette (Cmd+K)
     2) Briefing IA matinal (card visual)
     3) Anomaly highlight (badge à esquerda)
     4) Voice alerts toggle
     5) Sticky Comparison Bar
     6) Picture-in-Picture
     7) Live Cursors (multi-operator)
   ========================================================================= */


/* ─── 1) Command Palette ─────────────────────────────────────────────────── */
.athena-cmd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 14, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: cmdOverlayIn .15s ease-out;
}
.athena-cmd-overlay.open { display: flex; }
@keyframes cmdOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.athena-cmd-panel {
    width: min(640px, 92vw);
    background: linear-gradient(180deg, #0e0e16 0%, #06060d 100%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
    animation: cmdPanelIn .2s cubic-bezier(.16,1,.3,1);
}
@keyframes cmdPanelIn { from { transform: translateY(-10px); opacity: 0; } }

.athena-cmd-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.athena-cmd-input-wrap::before {
    content: '⌕';
    font-size: 18px;
    color: rgba(255,255,255,.5);
}
.athena-cmd-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
}
.athena-cmd-input::placeholder { color: rgba(255,255,255,.35); }

.athena-cmd-kbd-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    padding: 3px 6px;
    border-radius: 4px;
}

.athena-cmd-list {
    max-height: 52vh;
    overflow-y: auto;
    padding: 8px 0;
}
.athena-cmd-section {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255,170,0,.7);
    font-weight: 700;
    padding: 8px 18px 4px;
    text-transform: uppercase;
}
.athena-cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background .12s;
    color: #fff;
    font-size: 14px;
}
.athena-cmd-item.active,
.athena-cmd-item:hover {
    background: rgba(255,102,0,.08);
}
.athena-cmd-item.active {
    box-shadow: inset 3px 0 0 #ff681f;
}
.athena-cmd-item-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.athena-cmd-item-label { flex: 1; }
.athena-cmd-item-shortcut {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,.4);
}
.athena-cmd-empty {
    padding: 24px 18px;
    text-align: center;
    color: rgba(255,255,255,.4);
    font-size: 13px;
}


/* ─── 2) Briefing IA matinal — card visual ───────────────────────────────── */
.athena-briefing {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 22px;
    margin: 16px 0;
    background: linear-gradient(135deg, rgba(255,170,0,.08) 0%, rgba(255,102,0,.04) 100%);
    border: 1px solid rgba(255,170,0,.18);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.athena-briefing::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #ffaa00 0%, transparent 100%);
}
.athena-briefing-icon {
    font-size: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,170,0,.4));
}
.athena-briefing-content { flex: 1; }
.athena-briefing-greeting {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.athena-briefing-time {
    font-size: 11px;
    color: rgba(255,170,0,.7);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.athena-briefing-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.athena-briefing-bullets li {
    font-size: 13px;
    color: rgba(255,255,255,.85);
    line-height: 1.4;
    padding-left: 22px;
    position: relative;
}
.athena-briefing-bullets li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
}
.athena-briefing-bullets li.bullet-warn::before  { content: '⚠'; color: #ffaa00; }
.athena-briefing-bullets li.bullet-crit::before  { content: '🔴'; }
.athena-briefing-bullets li.bullet-tip::before   { content: '💡'; }
.athena-briefing-bullets li.bullet-ok::before    { content: '✅'; }
.athena-briefing-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.athena-briefing-btn {
    background: rgba(255,170,0,.15);
    border: 1px solid rgba(255,170,0,.3);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.athena-briefing-btn:hover {
    background: rgba(255,170,0,.25);
    border-color: rgba(255,170,0,.5);
}
.athena-briefing-btn.dismiss {
    background: transparent;
    border-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
}


/* ─── 3) Anomaly highlight (badge à ESQUERDA do val) ─────────────────────── */
/* O badge fica FORA do flow normal — position absolute relativo ao val.
   right: 100% + margin-right empurra ele pra ESQUERDA do val sem ocupar
   espaco. Numeros continuam alinhados na coluna da direita. */
.mc-row-val,
.mc-vital-value {
    position: relative;
}
.athena-anomaly-badge {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
    pointer-events: none;
}
.athena-anomaly-badge.up   { background: rgba(255,68,68,.2);  color: #ff7a7a; border: 1px solid rgba(255,68,68,.4); }
.athena-anomaly-badge.down { background: rgba(0,170,255,.2);  color: #6ad6ff; border: 1px solid rgba(0,170,255,.4); }


/* ─── 4) Voice Alerts toggle ─────────────────────────────────────────────── */
/* 2026-06: movido de bottom-left → bottom-right pra nao sobrepor a sidebar
   esquerda (botoes MAPA / COMPARAR / CONFIGURAÇÕES / SAIR DO SISTEMA).
   A tooltip ("Voz ATHENA: ligada/desligada") tambem migrou: agora aparece
   no lado esquerdo do botao (right: 52px) com slide-in da direita. */
.athena-voice-toggle {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10,12,18,.85);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 9999;
    transition: all .2s;
    backdrop-filter: blur(8px);
}
.athena-voice-toggle:hover {
    background: rgba(20,24,36,.9);
    transform: scale(1.08);
}
.athena-voice-toggle.on {
    background: linear-gradient(135deg, #00ff88, #00aaff);
    color: #000;
    border-color: transparent;
    box-shadow: 0 0 16px rgba(0,255,136,.4);
}
.athena-voice-toggle-label {
    position: absolute;
    right: 52px;
    background: rgba(10,12,18,.95);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: all .15s;
}
.athena-voice-toggle:hover .athena-voice-toggle-label {
    opacity: 1;
    transform: translateX(0);
}


/* ─── 5) Sticky Comparison Bar ───────────────────────────────────────────── */
.athena-cmp-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    display: none;
    z-index: 9990;
    background: linear-gradient(180deg, rgba(14,14,26,.98), rgba(6,6,16,.99));
    border: 1px solid rgba(255,102,0,.3);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 24px rgba(255,102,0,.15);
    padding: 14px 20px;
    backdrop-filter: blur(10px);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    max-width: calc(100vw - 32px);
}
.athena-cmp-bar.visible {
    display: flex;
    transform: translateX(-50%) translateY(0);
}
.athena-cmp-bar-trucks {
    display: flex;
    gap: 14px;
    align-items: center;
}
.athena-cmp-truck {
    min-width: 130px;
    padding: 8px 12px;
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.athena-cmp-truck-id {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,170,0,.85);
    margin-bottom: 4px;
}
.athena-cmp-truck-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: rgba(255,255,255,.7);
    font-family: 'JetBrains Mono', monospace;
}
.athena-cmp-truck-row b { color: #fff; font-weight: 700; }
.athena-cmp-truck-remove {
    position: absolute;
    top: 2px;
    right: 4px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
}
.athena-cmp-truck-remove:hover { color: #ff6666; }
.athena-cmp-bar-close {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    margin-left: 14px;
}
.athena-cmp-add-btn {
    background: rgba(255,102,0,.1);
    border: 1px dashed rgba(255,102,0,.4);
    color: #ff681f;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}


/* ─── 6) Picture-in-Picture ──────────────────────────────────────────────── */
/* Estilos aplicados DENTRO da janela PiP secundaria */
.athena-pip-doc body {
    margin: 0;
    background: #060810;
    color: #fff;
    font-family: 'Inter', sans-serif;
    padding: 12px;
    overflow: hidden;
}
.athena-pip-card {
    background: linear-gradient(180deg, #0e0e16 0%, #06060d 100%);
    border: 1px solid rgba(255,102,0,.3);
    border-radius: 10px;
    padding: 14px;
    height: calc(100vh - 24px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.athena-pip-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ff681f;
    margin-bottom: 6px;
}
.athena-pip-truck {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
}
.athena-pip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.athena-pip-kpi {
    background: rgba(255,255,255,.04);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}
.athena-pip-kpi-val {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
}
.athena-pip-kpi-lbl {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
}
.athena-pip-status {
    margin-top: auto;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}
.athena-pip-status.ok    { background: rgba(0,255,136,.15); color: #00ff88; }
.athena-pip-status.warn  { background: rgba(255,170,0,.15); color: #ffaa00; }
.athena-pip-status.crit  { background: rgba(255,68,68,.18); color: #ff6666; }

/* Botão na página principal pra abrir PiP */
.athena-pip-open-btn {
    background: rgba(0,170,255,.1);
    border: 1px solid rgba(0,170,255,.3);
    color: #4ccfff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.athena-pip-open-btn:hover {
    background: rgba(0,170,255,.18);
}


/* ─── 7) Live Cursors (multi-operator) ───────────────────────────────────── */
.athena-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 99990;
    transform: translate(-2px, -2px);
    transition: transform .08s linear;
}
.athena-cursor-pointer {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.athena-cursor-name {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--cursor-color, #ff681f);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 14px;
    margin-top: -4px;
    white-space: nowrap;
    letter-spacing: .5px;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════
   MODO CLARO 2026-06 — Command Palette + Comparison Bar.
   Injetados em document.body (fora do wrapper). Com light-theme no <body>
   (athenaApplyBodyTheme), estes overrides passam a alcanca-los.
   ═══════════════════════════════════════════════════════════════════ */
.light-theme .athena-cmd-overlay { background: rgba(20,24,34,.45); }
.light-theme .athena-cmd-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 32px 80px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
.light-theme .athena-cmd-input-wrap { border-bottom-color: rgba(0,0,0,.08); }
.light-theme .athena-cmd-input-wrap::before { color: rgba(0,0,0,.45); }
.light-theme .athena-cmd-input { color: #15151a; }
.light-theme .athena-cmd-input::placeholder { color: rgba(0,0,0,.4); }
.light-theme .athena-cmd-kbd-hint {
    background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.5);
}
.light-theme .athena-cmd-item { color: #15151a; }
.light-theme .athena-cmd-item-shortcut { color: rgba(0,0,0,.45); }
.light-theme .athena-cmd-empty { color: rgba(0,0,0,.45); }

.light-theme .athena-cmp-bar {
    background: linear-gradient(180deg, #ffffff, #f4f6fa);
    border-color: rgba(255,102,0,.45);
    box-shadow: 0 24px 60px rgba(0,0,0,.20), 0 0 24px rgba(255,102,0,.10);
}
.light-theme .athena-cmp-truck { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); }
.light-theme .athena-cmp-truck-row { color: rgba(0,0,0,.65); }
.light-theme .athena-cmp-truck-row b { color: #15151a; }
.light-theme .athena-cmp-truck-remove { color: rgba(0,0,0,.4); }
.light-theme .athena-cmp-bar-close {
    background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.65);
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .athena-cmd-overlay, .athena-cmd-panel,
    .athena-cmp-bar, .athena-cursor {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== css/athena-splash.css ===== */
/* =========================================================================
   athena-splash.css
   ATHENA RADAR SWEEP - Splash full-screen de boot do dashboard (CSS-only).
   Proposito: overlay de aquisicao de sinal de telemetria entre login e
   dashboard. Radar gira 360 graus, blips de frota "sao detectados", logo
   real /athena_mark.png no nucleo. Some no sinal real de "pronto" do Home.
   Performance: anima SOMENTE transform/opacity/box-shadow (GPU-friendly).
   Tokens de marca: ember #ff681f / #ff8a32 / #ed5410 sobre carbon #050507.
   Acessibilidade: respeita prefers-reduced-motion.
   Namespacing: prefixos ath-/athSplash*/athRadar*/athBlip*/athSweep* nao
   colidem com keyframes existentes (athenaRotate, athenaGlowPulse,
   athenaSpinAuth, etc).
   ========================================================================= */

.ath-splash {
  position: fixed;
  inset: 0;
  /* z-index máximo: cobre TUDO — guard de auth, dashboard, sidebar, cards.
     É a única tela visível enquanto o app carrega (8s pós-login). */
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 40px);
  background:
    radial-gradient(120% 120% at 50% 38%, #0a0a0e 0%, #050507 55%, #020304 100%);
  font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  color: #f6f8fb;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  opacity: 1;
  /* entrada do overlay inteiro */
  animation: athSplashIn .5s ease-out both;
  /* transicao usada no fade-out (classe is-leaving) */
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
              visibility .55s cubic-bezier(.4, 0, .2, 1),
              filter .55s cubic-bezier(.4, 0, .2, 1),
              transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform, filter;
  contain: layout style paint;
}

/* ---- FADE-OUT: aplicado quando o app sinaliza pronto (is-leaving) -------- */
.ath-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  filter: blur(6px);
  pointer-events: none;
}

/* ---- Aura ember de fundo (respira) --------------------------------------- */
.ath-splash__aura {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 40% at 50% 46%, rgba(255, 104, 31, .16), transparent 70%),
    radial-gradient(60% 60% at 70% 70%, rgba(255, 138, 50, .07), transparent 75%);
  animation: athSplashAura 6s ease-in-out infinite;
  will-change: opacity, transform;
}

/* ---- Console de radar ----------------------------------------------------- */
.ath-radar {
  position: relative;
  width: clamp(220px, 60vmin, 440px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  animation: athRadarIn .8s cubic-bezier(.22, 1, .36, 1) both;
}

/* Grade: aneis concentricos + cruz cardinal */
.ath-radar__grid { position: absolute; inset: 0; }

.ath-radar__grid .ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 104, 31, .14);
  transform: translate(-50%, -50%);
}
.ring--1 { width: 25%;  height: 25%; }
.ring--2 { width: 50%;  height: 50%; }
.ring--3 { width: 75%;  height: 75%; }
.ring--4 {
  width: 100%; height: 100%;
  border-color: rgba(255, 104, 31, .30);
  box-shadow: inset 0 0 60px -24px rgba(255, 104, 31, .45);
}
.ath-radar__grid .cross {
  position: absolute;
  top: 50%; left: 50%;
  background: rgba(255, 104, 31, .10);
}
.cross--x { width: 100%; height: 1px; transform: translate(-50%, -50%); }
.cross--y { width: 1px; height: 100%; transform: translate(-50%, -50%); }

/* Feixe conico que varre 360 graus */
.ath-radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 104, 31, 0) 0deg,
    rgba(255, 104, 31, 0) 295deg,
    rgba(255, 138, 50, .06) 320deg,
    rgba(255, 138, 50, .22) 350deg,
    rgba(255, 170, 90, .55) 360deg
  );
  -webkit-mask: radial-gradient(circle, #000 0 99%, transparent 100%);
          mask: radial-gradient(circle, #000 0 99%, transparent 100%);
  animation: athSweep 3.2s linear infinite;
  will-change: transform;
}
/* Lamina de borda do feixe */
.ath-radar__sweep::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 1.5px;
  transform-origin: left center;
  transform: rotate(-2deg);
  background: linear-gradient(90deg, rgba(255, 170, 90, .9), rgba(255, 104, 31, 0));
  box-shadow: 0 0 10px rgba(255, 138, 50, .7);
}

/* Blips de caminhoes "detectados" (posicionados via --x/--y, atraso via --d) */
.blip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #ffaa5a;
  box-shadow: 0 0 0 0 rgba(255, 138, 50, .6), 0 0 10px rgba(255, 138, 50, .9);
  opacity: 0;
  transform: scale(.2);
  animation:
    athBlipIn .5s ease-out var(--d) forwards,
    athBlipHalo 2.4s ease-out calc(var(--d) + .2s) infinite;
  will-change: transform, opacity;
}
.blip--lg { width: 12px; height: 12px; margin: -6px 0 0 -6px; }

/* Nucleo central com a logo real */
.ath-radar__core {
  position: absolute;
  top: 50%; left: 50%;
  width: 34%; height: 34%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22%;
  background: radial-gradient(circle, rgba(255, 104, 31, .18), rgba(255, 104, 31, .02) 70%);
  animation: athCoreFloat 6s ease-in-out infinite;
  will-change: transform;
}
.ath-core__pulse {
  position: absolute;
  inset: 0;
  border-radius: 22%;
  border: 1px solid rgba(255, 104, 31, .5);
  animation: athCorePulse 2.4s ease-out infinite;
  will-change: transform, opacity;
}
.ath-core__logo {
  width: 70%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 104, 31, .55));
  pointer-events: none;
}

/* ---- Wordmark ------------------------------------------------------------- */
.ath-splash__brand { text-align: center; animation: athFadeUp .8s ease .25s both; }
.ath-splash__title {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: .42em;
  padding-left: .42em; /* compensa o tracking a direita p/ centralizar */
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 178, 120, .85) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ath-splash__sub {
  margin-top: 10px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: clamp(10px, 1.4vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, .62);
}

/* ---- Status / microcopy rotativa ----------------------------------------- */
.ath-splash__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: athFadeUp .8s ease .45s both;
}
.ath-status__bar {
  position: relative;
  width: clamp(140px, 28vw, 220px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 104, 31, .14);
  overflow: hidden;
}
.ath-status__bar i {
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff8a32, #ff681f, transparent);
  animation: athScan 1.7s ease-in-out infinite;
  will-change: transform;
}
/* Lista rotativa: cada item aparece em sua janela (ciclo 8s, ~2s on-screen) */
.ath-status__lines {
  position: relative;
  height: 1.2em;
  margin: 0; padding: 0;
  list-style: none;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: clamp(10px, 1.5vw, 12.5px);
  letter-spacing: .12em;
  color: rgba(255, 170, 90, .92);
  text-transform: uppercase;
}
.ath-status__lines li {
  position: absolute;
  inset: 0;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  animation: athLineCycle 8s linear infinite;
}
.ath-status__lines li:nth-child(1) { animation-delay: 0s; }
.ath-status__lines li:nth-child(2) { animation-delay: 2s; }
.ath-status__lines li:nth-child(3) { animation-delay: 4s; }
.ath-status__lines li:nth-child(4) { animation-delay: 6s; }

/* =========================== KEYFRAMES ==================================== */
@keyframes athSplashIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes athSweep { to { transform: rotate(360deg); } }

@keyframes athSplashAura {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.05); }
}
@keyframes athRadarIn {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes athBlipIn {
  0%   { opacity: 0; transform: scale(.2); }
  55%  { opacity: 1; transform: scale(1.6); }   /* flash de deteccao */
  100% { opacity: .9; transform: scale(1); }
}
@keyframes athBlipHalo {
  0%   { box-shadow: 0 0 0 0 rgba(255, 138, 50, .55), 0 0 10px rgba(255, 138, 50, .9); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 138, 50, 0),  0 0 10px rgba(255, 138, 50, .4); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 50, 0),     0 0 10px rgba(255, 138, 50, .9); }
}
@keyframes athCoreFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-4px); }
}
@keyframes athCorePulse {
  0%   { opacity: .8; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.45); }
  100% { opacity: 0;  transform: scale(1.45); }
}
@keyframes athFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes athScan {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
/* Cada linha visivel ~25% do ciclo de 8s (~2s on-screen) */
@keyframes athLineCycle {
  0%   { opacity: 0; transform: translateY(6px); }
  4%   { opacity: 1; transform: translateY(0); }
  21%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* =========================== RESPONSIVO ================================== */
@media (max-width: 560px) {
  .ath-splash { gap: 22px; }
  .ath-radar  { width: 70vmin; }
  .ath-splash__title { letter-spacing: .32em; padding-left: .32em; }
}
@media (max-height: 560px) {
  .ath-splash { gap: 14px; }
  .ath-radar  { width: clamp(160px, 40vmin, 240px); }
}

/* ===================== ACESSIBILIDADE: REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  .ath-splash,
  .ath-radar__sweep,
  .ath-splash__aura,
  .ath-core__pulse,
  .ath-core__logo,
  .ath-radar,
  .ath-radar__core,
  .ath-status__bar i,
  .ath-splash__brand,
  .ath-splash__status,
  .blip { animation: none !important; }

  /* Sem varredura: revela todos os blips estaticos, quadro legivel */
  .blip { opacity: .85; transform: scale(1); }
  .ath-radar__sweep { opacity: .25; }

  /* Microcopy: mostra so a 1a frase, sem rotacao */
  .ath-status__lines li:not(:first-child) { display: none; }
  .ath-status__lines li:first-child { opacity: 1; transform: none; }

  /* Fade-out simples por opacidade, sem blur/scale */
  .ath-splash { transition: opacity .25s linear, visibility .25s linear; }
  .ath-splash.is-leaving { transform: none; filter: none; }
}