@charset "UTF-8";
/* ==========================================================================
   4IS Platform — Premium Dark Theme v2 (Lovable-inspired visual direction)
   ========================================================================== */

/* --- Google Fonts import ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- Design tokens ------------------------------------------------------- */
:root {
    /* Brand palette */
    --primary:          #e8872a;
    --primary-dark:     #c5601a;
    --primary-soft:     rgba(232, 135, 42, 0.12);
    --secondary:        #2bbfb4;
    --secondary-soft:   rgba(43, 191, 180, 0.12);

    /* Surfaces */
    --bg:               #0b0f1a;
    --bg-deeper:        #080c15;
    --panel:            rgba(17, 25, 46, 0.82);
    --panel-soft:       rgba(14, 20, 38, 0.62);
    --panel-side:       rgba(10, 15, 28, 0.92);

    /* Typography */
    --fg:               #e2eaf5;
    --muted:            #7e8fa8;
    --muted-dim:        rgba(126, 143, 168, 0.55);

    /* Borders */
    --border:           rgba(50, 72, 130, 0.60);
    --border-soft:      rgba(200, 220, 255, 0.07);

    /* State colours */
    --danger:           #e05a47;
    --danger-bg:        rgba(224, 90, 71, 0.10);
    --danger-border:    rgba(224, 90, 71, 0.32);
    --success:          #2bbfb4;

    /* Layout */
    --sidebar-w:        244px;
    --topbar-h:         64px;

    /* Radii */
    --r-sm:     8px;
    --r-md:     12px;
    --r-lg:     16px;
    --r-xl:     22px;
    --r-2xl:    28px;

    /* Legacy aliases — keep old template classes working */
    --blue:             #e8872a;
    --blue-dark:        #c5601a;
    --green:            #2bbfb4;
    --dark:             #e2eaf5;
    --light:            rgba(12, 18, 44, 0.55);
    --white:            rgba(18, 28, 56, 0.75);
}

/* --- Keyframes ----------------------------------------------------------- */
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}
@keyframes drift-orbit {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes drift-orbit-reverse {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.06); }
}
@keyframes telemetry-blink {
    0%, 65%, 100% { opacity: 0.32; }
    30%           { opacity: 1; box-shadow: 0 0 14px currentColor; }
}
@keyframes scan-sweep {
    0%   { transform: translateY(-110%); opacity: 0; }
    18%  { opacity: 0.45; }
    100% { transform: translateY(110%);  opacity: 0; }
}
@keyframes gene-flow {
    0%   { stroke-dashoffset: 200; opacity: 0; }
    20%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes particle-drift {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-120px) translateX(30px); opacity: 0; }
}
@keyframes fade-in-up {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* --- Reset & Base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; color-scheme: dark; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    color: var(--fg);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 20% 0%,   rgba(43, 191, 180, 0.14) 0%, transparent 36%),
        radial-gradient(circle at 82% 14%,  rgba(232, 135, 42, 0.12) 0%, transparent 30%),
        radial-gradient(circle at 50% 110%, rgba(43, 191, 180, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #090d18, #0b0f1a 30%, #090d18 100%);
    background-attachment: fixed;
    line-height: 1.55;
    min-height: 100vh;
}

/* Subtle background grid */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(43, 191, 180, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(43, 191, 180, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 78%);
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* Selection */
::selection {
    background: rgba(43, 191, 180, 0.28);
    color: var(--fg);
}

/* ==========================================================================
   SURFACE UTILITIES
   ========================================================================== */

.surface-panel {
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(43, 191, 180, 0.04),
        0 24px 70px -42px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(200, 220, 255, 0.05);
}

/* ==========================================================================
   PUBLIC LAYOUT
   ========================================================================== */

/* Navbar */
.public-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.875rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 32px -16px rgba(0, 0, 0, 0.6);
    margin: 0.75rem;
    border-radius: var(--r-2xl);
}

.nav-brand {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-brand span { color: var(--primary); }

/* Brand 4IS mark in nav */
.nav-brand-mark {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: radial-gradient(circle at 45% 45%, rgba(11, 15, 26, 0.5), rgba(0, 0, 0, 0.7));
    border: 1px solid rgba(43, 191, 180, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 14px -4px rgba(43, 191, 180, 0.30);
}
.nav-brand-mark::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    border-top-color: var(--primary);
    border-right-color: var(--primary);
    transform: rotate(10deg);
}
.nav-brand-mark::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    border-bottom-color: var(--secondary);
    border-left-color: var(--secondary);
    transform: rotate(-18deg);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}
.nav-links a {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.18s;
    letter-spacing: 0.01em;
}
.nav-links a:hover { color: var(--fg); }

.btn-entrar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 40px;
    padding: 0 1.25rem;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid rgba(232, 135, 42, 0.45);
    color: var(--primary) !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.btn-entrar:hover {
    background: rgba(232, 135, 42, 0.18) !important;
    border-color: rgba(232, 135, 42, 0.65) !important;
}

/* ── Public page wrapper ─────────────────────────────────────────────────── */
.public-wrapper {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 0.75rem;
}

/* Orbit decorations for public pages */
.public-orbits {
    position: fixed;
    top: 0; right: 0;
    width: 56vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.public-orbits::before {
    content: '';
    position: absolute;
    top: 8%;
    right: 4%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(43, 191, 180, 0.22);
    animation: drift-orbit 36s linear infinite;
}
.public-orbits::after {
    content: '';
    position: absolute;
    top: 16%;
    right: 10%;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    border: 1px solid rgba(232, 135, 42, 0.28);
    animation: drift-orbit 28s linear infinite reverse;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    z-index: 1;
    padding: 6rem 2rem 4.5rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    animation: fade-in-up 0.7s ease both;
}

/* Floating radial glow behind hero */
.hero::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(232, 135, 42, 0.12) 0%,
        rgba(43, 191, 180, 0.07) 50%,
        transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

/* Ecosystem badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(43, 191, 180, 0.30);
    background: rgba(43, 191, 180, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--secondary);
    margin-bottom: 1.5rem;
}
.hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 8px var(--secondary);
    animation: telemetry-blink 2.4s ease-in-out infinite;
}

.hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    color: var(--fg);
    line-height: 1.2;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p {
    font-size: 1.0625rem;
    color: var(--muted);
    max-width: 580px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 52px;
    padding: 0 2.25rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid rgba(232, 135, 42, 0.50);
    border-radius: var(--r-lg);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: background 0.18s, box-shadow 0.18s;
    box-shadow: 0 0 28px -8px rgba(232, 135, 42, 0.70);
}
.btn-hero:hover {
    background: var(--primary-dark);
    color: #fff;
    box-shadow: 0 0 36px -6px rgba(232, 135, 42, 0.90);
}

/* ── Pillars strip ───────────────────────────────────────────────────────── */
.pillars-strip {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--panel-soft), rgba(14, 20, 38, 0.50));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 3rem 2.5rem;
    margin: 0 0.25rem 2rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}
.pillars-strip::before {
    content: '';
    position: absolute;
    inset-x: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.50), transparent);
}

.pillars-strip h2 {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 2rem;
}
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    max-width: 1080px;
    margin: 0 auto;
}
.pillar-item {
    position: relative;
    text-align: center;
    padding: 1.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    overflow: hidden;
}
.pillar-item::before {
    content: '';
    position: absolute;
    inset-x: 20%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 135, 42, 0.55), transparent);
}
.pillar-item:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 135, 42, 0.35);
    box-shadow: 0 12px 40px -20px rgba(232, 135, 42, 0.35);
}
.pillar-item .pillar-num {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.4rem;
}
.pillar-item .pillar-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.4;
}

/* ── Generic public page content ─────────────────────────────────────────── */
.page-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 3.5rem auto;
    padding: 0 2rem;
    animation: fade-in-up 0.6s ease both;
}
.page-content h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--fg);
    letter-spacing: -0.02em;
}
.page-content h2 span { color: var(--primary); }
.page-content p {
    color: var(--muted);
    margin-bottom: 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.75;
}

/* ── Public footer ───────────────────────────────────────────────────────── */
.public-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 1.75rem;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 5rem;
}

/* ==========================================================================
   AUTH — LOGIN
   ========================================================================== */

.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

/* Decorative orbit rings behind login card */
.auth-page::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(43, 191, 180, 0.15);
    animation: drift-orbit 40s linear infinite;
    pointer-events: none;
}
.auth-page::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(232, 135, 42, 0.18);
    animation: drift-orbit 30s linear infinite reverse;
    pointer-events: none;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    padding: 2.75rem 2.5rem;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 32px rgba(43, 191, 180, 0.04),
        0 32px 80px -40px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(43, 191, 180, 0.08);
    animation: fade-in-up 0.6s ease both;
}

/* Top accent line */
.auth-card::before {
    content: '';
    position: absolute;
    inset-x: 15%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.60), rgba(232, 135, 42, 0.40), transparent);
    border-radius: 1px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 2.25rem;
}

/* Brand mark for login */
.auth-brand-mark {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: radial-gradient(circle at 45% 46%, rgba(11, 15, 26, 0.4), rgba(0, 0, 0, 0.65));
    border: 1px solid rgba(43, 191, 180, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(43, 191, 180, 0.08),
        0 16px 44px -20px rgba(43, 191, 180, 0.28);
}
.auth-brand-mark::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 16px;
    border: 2px solid transparent;
    border-top-color: var(--primary);
    border-right-color: var(--primary);
    transform: rotate(10deg);
    opacity: 0.85;
}
.auth-brand-mark::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 12px;
    border: 2px solid transparent;
    border-bottom-color: var(--secondary);
    border-left-color: var(--secondary);
    transform: rotate(-18deg);
    opacity: 0.85;
}
.auth-brand-mark-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, var(--primary), #fff 55%, var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    z-index: 1;
}

.auth-logo .wordmark {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.5px;
}
.auth-logo .wordmark span { color: var(--primary); }
.auth-logo .tagline {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.auth-card h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
    color: var(--fg);
    text-align: center;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   FORMS (shared)
   ========================================================================== */

.form-group { margin-bottom: 1.375rem; }
.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 0.45rem;
    letter-spacing: 0.01em;
}

/* Base input rule (shared for all input types) */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-input {
    width: 100%;
    padding: 0.65rem 0.925rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    color: var(--fg);
    background: rgba(9, 14, 28, 0.88);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
}
.form-group input:focus,
.form-input:focus {
    border-color: rgba(232, 135, 42, 0.65);
    box-shadow: 0 0 0 3px rgba(232, 135, 42, 0.12);
}
.form-group input.is-invalid,
.form-group input.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(224, 90, 71, 0.12);
}
.form-error {
    font-size: 0.8rem;
    color: var(--danger);
    margin-top: 0.35rem;
}

/* Select & textarea */
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.925rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    color: var(--fg);
    background: rgba(9, 14, 28, 0.88);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    font-family: inherit;
}
.form-group select  { cursor: pointer; }
.form-group textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(232, 135, 42, 0.65);
    box-shadow: 0 0 0 3px rgba(232, 135, 42, 0.12);
}

/* Alert - error */
.alert-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--r-md);
    color: #f77a6a;
    font-size: 0.875rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1.25rem;
}

/* Submit button */
.btn-submit {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid rgba(232, 135, 42, 0.50);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: background 0.18s, box-shadow 0.18s;
    margin-top: 0.25rem;
    box-shadow: 0 0 24px -8px rgba(232, 135, 42, 0.60);
}
.btn-submit:hover {
    background: var(--primary-dark);
    box-shadow: 0 0 32px -6px rgba(232, 135, 42, 0.80);
}

/* ==========================================================================
   APP SHELL
   ========================================================================== */

.app-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg,
        rgba(5, 9, 18, 0.96),
        rgba(4, 7, 14, 0.98));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    padding: 1.75rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* Teal right-edge glow */
.sidebar::after {
    content: '';
    position: absolute;
    inset-y: 0;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(43, 191, 180, 0.35) 40%,
        rgba(43, 191, 180, 0.35) 60%,
        transparent 100%);
    pointer-events: none;
}

/* Brand section */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.25rem;
    margin-bottom: 2rem;
}
.sidebar-brand-icon {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}
.sidebar-brand-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(232, 135, 42, 0.26), transparent 70%);
    filter: blur(6px);
}
.sidebar-brand-icon .wordmark {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(9, 13, 24, 0.80);
    border: 1px solid rgba(43, 191, 180, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.5px;
    box-shadow: 0 0 12px -4px rgba(232, 135, 42, 0.40);
}
.sidebar-brand-icon .wordmark span { color: var(--primary); }

.sidebar-brand-text {
    line-height: 1.35;
}
.sidebar-brand-text .brand-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
}
.sidebar-brand-text .brand-sub {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(43, 191, 180, 0.75);
}

/* Nav sections */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nav-section {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.22);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding: 0 0.625rem;
    margin-bottom: 0.25rem;
    display: block;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.675rem;
    padding: 0.475rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(226, 234, 245, 0.55);
    border-radius: var(--r-md);
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    position: relative;
    letter-spacing: 0.005em;
}
.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.035);
    color: var(--fg);
    border-left-color: transparent;
}
.sidebar-nav a.active {
    background: linear-gradient(90deg, rgba(232, 135, 42, 0.10), transparent);
    color: var(--fg);
    font-weight: 600;
    border-left-color: var(--primary);
}
.sidebar-nav a.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 2px 2px 0;
}

/* Nav icon badge */
.nav-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s;
}
.sidebar-nav a.active .nav-icon {
    background: rgba(232, 135, 42, 0.14);
    border-color: rgba(232, 135, 42, 0.40);
    color: var(--primary);
}

/* Sidebar status chip */
.sidebar-status {
    padding: 0.75rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 0.5rem;
}
.sidebar-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar-status-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(43, 191, 180, 0.14);
    color: var(--secondary);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-status-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--fg);
    line-height: 1.3;
}
.sidebar-status-sub {
    font-size: 0.6rem;
    color: var(--muted);
    display: block;
}

/* Logout button */
.btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-logout:hover {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: #f77a6a;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.app-main {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.topbar {
    height: var(--topbar-h);
    background: rgba(9, 13, 24, 0.90);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    gap: 1rem;
}

.topbar-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Ecosystem badge in topbar */
.topbar-eco-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(43, 191, 180, 0.25);
    background: rgba(43, 191, 180, 0.07);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--secondary);
}
.topbar-eco-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 6px var(--secondary);
    animation: telemetry-blink 2.4s ease-in-out infinite;
}

.user-chip {
    font-size: 0.8125rem;
    text-align: right;
    line-height: 1.3;
}
.user-chip .user-name { color: var(--fg); font-weight: 600; }
.user-chip .user-role {
    display: block;
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ── Page body ────────────────────────────────────────────────────────────── */
.page-body {
    flex: 1;
    padding: 2rem 2.5rem;
}
.page-header {
    margin-bottom: 2rem;
    animation: fade-in-up 0.5s ease both;
}
.page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}
.page-header p { font-size: 0.9rem; color: var(--muted); }

/* Section header row */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--secondary);
}

/* ── Stats/KPI grid ───────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 40px -24px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    animation: fade-in-up 0.5s ease both;
}
.stat-card::before {
    content: '';
    position: absolute;
    inset-x: 20%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.60), transparent);
}
.stat-card::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 8px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(43, 191, 180, 0.08);
    filter: blur(20px);
    pointer-events: none;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 191, 180, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 24px 60px -28px rgba(43, 191, 180, 0.30);
}
.stat-card .stat-label {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.6rem;
}
.stat-card .stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1;
    letter-spacing: -0.03em;
}
.stat-card .stat-note {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.35rem;
}

/* ── Placeholder card ─────────────────────────────────────────────────────── */
.placeholder-card {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px dashed var(--border);
    border-radius: var(--r-xl);
    padding: 4rem 2rem;
    text-align: center;
    max-width: 500px;
    margin: 2.5rem auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.placeholder-card::before {
    content: '';
    position: absolute;
    inset-x: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.40), transparent);
}
.placeholder-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 0.6rem;
}
.placeholder-card p {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.65;
}

.badge-em-breve {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid rgba(232, 135, 42, 0.28);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
    padding: 0.875rem 1rem;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.alert-success {
    background: rgba(43, 191, 180, 0.10);
    border: 1px solid rgba(43, 191, 180, 0.28);
    color: #5ee8e0;
}
.alert-info {
    background: rgba(43, 191, 180, 0.08);
    border: 1px solid rgba(43, 191, 180, 0.22);
    color: #5ee8e0;
}
.alert-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: #f77a6a;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.005em;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: rgba(232, 135, 42, 0.55);
    box-shadow: 0 0 22px -8px rgba(232, 135, 42, 0.55);
}
.btn-primary:hover {
    background: var(--primary-dark);
    border-color: rgba(232, 135, 42, 0.70);
    box-shadow: 0 0 28px -6px rgba(232, 135, 42, 0.70);
    color: #fff;
}

.btn-secondary {
    background: var(--secondary-soft);
    color: var(--secondary);
    border-color: rgba(43, 191, 180, 0.35);
}
.btn-secondary:hover {
    background: rgba(43, 191, 180, 0.18);
    border-color: rgba(43, 191, 180, 0.55);
    color: var(--secondary);
}

.btn-danger {
    background: transparent;
    color: #f77a6a;
    border-color: var(--danger-border);
}
.btn-danger:hover {
    background: var(--danger-bg);
    border-color: rgba(224, 90, 71, 0.50);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    border-color: var(--border-soft);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--fg);
    border-color: var(--border);
}

.btn-sm  { padding: 0.325rem 0.75rem; font-size: 0.8rem; }
.btn-lg  { padding: 0.75rem 2.25rem; font-size: 1rem; }

.btn:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.40;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.badge-success  { background: rgba(43, 191, 180, 0.15);  color: #4de8c8; border: 1px solid rgba(43, 191, 180, 0.25); }
.badge-danger   { background: rgba(224, 90, 71, 0.15);   color: #f77a6a; border: 1px solid rgba(224, 90, 71, 0.28); }
.badge-warning  { background: rgba(251, 191, 36, 0.15);  color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.28); }
.badge-info     { background: rgba(43, 191, 180, 0.12);  color: #5ee8e0; border: 1px solid rgba(43, 191, 180, 0.22); }
.badge-orange   { background: rgba(232, 117, 42, 0.15);  color: #f0943a; border: 1px solid rgba(232, 117, 42, 0.28); }
.badge-critical { background: rgba(224, 90, 71, 0.20);   color: #ff8069; border: 1px solid rgba(224, 90, 71, 0.35); }
.badge-em-breve { background: var(--primary-soft); color: var(--primary); border: 1px solid rgba(232, 135, 42, 0.28); }

/* ==========================================================================
   TABLE
   ========================================================================== */

.table-container {
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 40px -24px rgba(0, 0, 0, 0.6);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    background: rgba(7, 11, 22, 0.55);
    padding: 0.75rem 1.125rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table td {
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
    color: var(--fg);
    border-bottom: 1px solid rgba(50, 72, 130, 0.25);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:hover { background: rgba(43, 191, 180, 0.05); }
.data-table .row-inactive td { opacity: 0.38; }
.data-table .row-encerrado td { color: var(--muted); }
.td-actions { white-space: nowrap; }
.td-sub     { font-size: 0.78rem; color: var(--muted); display: block; margin-top: 0.1rem; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 40px -24px rgba(0, 0, 0, 0.6);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.card::before {
    content: '';
    position: absolute;
    inset-x: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.40), transparent);
    pointer-events: none;
}
.card-header {
    padding: 0.925rem 1.375rem;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 11, 22, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.card-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
}
.card-body { padding: 1.375rem; }

/* Details grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.detail-item .detail-label {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.3rem;
}
.detail-item .detail-value {
    font-size: 0.9rem;
    color: var(--fg);
    font-weight: 500;
}
.detail-item .detail-value.empty { color: var(--muted); font-style: italic; font-weight: 400; }

/* Form card */
.form-card {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    margin-bottom: 1.5rem;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 40px -24px rgba(0, 0, 0, 0.6);
}
.form-card::before {
    content: '';
    position: absolute;
    inset-x: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.35), transparent);
    pointer-events: none;
}
.form-card-header {
    padding: 0.925rem 1.375rem;
    background: rgba(7, 11, 22, 0.45);
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
}
.form-card-body  { padding: 1.375rem; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr;     gap: 0 1.375rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1.375rem; }

/* Checkboxes */
.checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.check-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.575rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    background: rgba(9, 14, 28, 0.45);
}
.check-item:hover {
    background: rgba(232, 135, 42, 0.07);
    border-color: rgba(232, 135, 42, 0.28);
}
.check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}
.check-item label { cursor: pointer; font-size: 0.875rem; margin: 0; color: var(--fg); }

/* Actions bar */
.actions-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 1.375rem;
}
.breadcrumb a { color: var(--primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: rgba(50, 72, 130, 0.7); }

/* Info note */
.info-note {
    background: rgba(43, 191, 180, 0.08);
    border: 1px solid rgba(43, 191, 180, 0.22);
    border-radius: var(--r-md);
    padding: 0.8rem 1rem;
    font-size: 0.825rem;
    color: #5ee8e0;
    margin-bottom: 1.375rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4.5rem 2rem;
    color: var(--muted);
}
.empty-state p { margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.7; }
.empty-state-icon {
    font-size: 2.25rem;
    opacity: 0.22;
    margin-bottom: 1rem;
    display: block;
    line-height: 1;
}

/* Text helpers */
.text-muted  { color: var(--muted); }
.text-sm     { font-size: 0.8rem; }
.mt-1        { margin-top: 0.5rem; }

/* Public link box */
.link-publico-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(9, 14, 28, 0.55);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
}
.link-publico-box .link-url {
    flex: 1;
    font-size: 0.875rem;
    color: var(--primary);
    word-break: break-all;
    font-family: monospace;
}
.link-publico-box .btn-copy {
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    padding: 0.325rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    box-shadow: 0 0 16px -6px rgba(232, 135, 42, 0.55);
}
.link-publico-box .btn-copy:hover { background: var(--primary-dark); }

/* QR Code section */
.qr-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.qr-code-wrap {
    background: #ffffff;
    border-radius: var(--r-md);
    padding: 10px;
    border: 2px solid rgba(232, 135, 42, 0.35);
    box-shadow: 0 0 20px -6px rgba(232, 135, 42, 0.18);
    display: inline-block;
    line-height: 0;
}
.qr-code-wrap canvas,
.qr-code-wrap img {
    display: block;
}

/* Participação placeholder */
.participacao-placeholder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}
.participacao-stat {
    text-align: center;
    padding: 1.25rem 1rem;
    background: rgba(9, 14, 28, 0.50);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    transition: transform 0.2s ease;
}
.participacao-stat:hover { transform: translateY(-2px); }
.participacao-stat .stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.03em;
}
.participacao-stat .stat-label {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.3rem;
}

/* Action group */
.action-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.375rem;
}

/* ==========================================================================
   QUESTIONNAIRE
   ========================================================================== */

.q-body {
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 15% 0%,  rgba(232, 135, 42, 0.09) 0%, transparent 38%),
        radial-gradient(circle at 85% 12%, rgba(43, 191, 180, 0.07) 0%, transparent 32%),
        linear-gradient(180deg, #090d18, #0b0f1a);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.q-topbar {
    background: rgba(7, 11, 22, 0.92);
    border-bottom: 1px solid var(--border);
    padding: 0 1.75rem;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.q-topbar .wordmark {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.5px;
}
.q-topbar .wordmark span { color: var(--primary); }
.q-topbar-sub {
    font-size: 0.78rem;
    color: var(--muted);
    border-left: 1px solid var(--border);
    padding-left: 1.125rem;
}

.q-main {
    flex: 1;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: 2.25rem 1.5rem;
}
.q-footer {
    text-align: center;
    padding: 1.375rem;
    font-size: 0.75rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/* Intro card */
.intro-card {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 24px 60px -32px rgba(0, 0, 0, 0.8);
}
.intro-card::before {
    content: '';
    position: absolute;
    inset-x: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.50), rgba(232, 135, 42, 0.35), transparent);
    pointer-events: none;
}
.intro-card-header {
    background: linear-gradient(135deg, rgba(232, 135, 42, 0.22) 0%, rgba(43, 191, 180, 0.12) 100%);
    border-bottom: 1px solid var(--border);
    color: var(--fg);
    padding: 2.25rem 2.25rem 2rem;
}
.intro-empresa {
    font-size: 0.72rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.6rem;
    color: var(--primary);
}
.intro-nome {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.intro-tipo { font-size: 0.82rem; opacity: 0.65; }
.intro-card-body { padding: 2rem 2.25rem; }
.intro-mensagem {
    font-size: 0.9375rem;
    color: var(--fg);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    white-space: pre-line;
}
.consent-box {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.125rem;
    margin-top: 1.375rem;
    background: rgba(9, 14, 28, 0.50);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.consent-box:hover {
    border-color: rgba(232, 135, 42, 0.28);
    background: rgba(232, 135, 42, 0.04);
}
.consent-box input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}
.consent-box label {
    font-size: 0.875rem;
    color: var(--fg);
    line-height: 1.6;
    cursor: pointer;
    margin: 0;
}

/* Questionnaire question header */
.q-header { margin-bottom: 1.75rem; }
.q-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

/* Scale legend */
.escala-legenda {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin-bottom: 0.375rem;
    border-bottom: 1px dashed var(--border);
    font-size: 0.72rem;
    color: var(--muted);
}

/* Question items */
.question-item {
    padding: 1.125rem 0;
    border-bottom: 1px solid rgba(50, 72, 130, 0.28);
    animation: fade-in-up 0.4s ease both;
}
.question-item:last-child { border-bottom: none; }
.question-text {
    font-size: 0.9375rem;
    color: var(--fg);
    margin-bottom: 0.875rem;
    line-height: 1.65;
}
.question-num { font-weight: 700; color: var(--primary); margin-right: 0.4rem; }
.question-error {
    background: var(--danger-bg);
    border-radius: var(--r-md);
    padding: 0.875rem 1rem;
    margin: 0 -0.5rem;
    border: 1px solid var(--danger-border);
}
.question-error .question-text { color: #f77a6a; }

/* Scale 1–5 */
.escala-row { display: flex; gap: 0.5rem; }
.escala-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.375rem;
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-align: center;
    user-select: none;
    background: rgba(9, 14, 28, 0.45);
}
.escala-item:hover {
    border-color: rgba(232, 135, 42, 0.45);
    background: rgba(232, 135, 42, 0.07);
}
.escala-item.selected {
    border-color: var(--primary);
    background: rgba(232, 135, 42, 0.12);
    box-shadow: 0 0 16px -6px rgba(232, 135, 42, 0.40);
}
.escala-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.escala-num { font-size: 1rem; font-weight: 700; color: var(--fg); }
.escala-label { font-size: 0.6rem; color: var(--muted); line-height: 1.2; }
.escala-item.selected .escala-num  { color: var(--primary); }
.escala-item.selected .escala-label { color: rgba(232, 135, 42, 0.8); }

/* Open textarea */
.textarea-open {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.65rem 0.875rem;
    font-size: 0.875rem;
    color: var(--fg);
    background: rgba(9, 14, 28, 0.72);
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    line-height: 1.6;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.textarea-open:focus {
    outline: none;
    border-color: rgba(232, 135, 42, 0.65);
    box-shadow: 0 0 0 3px rgba(232, 135, 42, 0.12);
}

/* Thank-you / Fechado */
.obrigado-card {
    text-align: center;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    padding: 4rem 2.75rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 24px 60px -32px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: fade-in-up 0.6s ease both;
}
.obrigado-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(43, 191, 180, 0.15);
    border: 1px solid rgba(43, 191, 180, 0.30);
    color: var(--secondary);
    font-size: 1.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 24px -8px rgba(43, 191, 180, 0.40);
}
.obrigado-icon-danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
    box-shadow: 0 0 24px -8px rgba(224, 90, 71, 0.35);
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.dash-kpi {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 40px -24px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.dash-kpi::before {
    content: '';
    position: absolute;
    inset-x: 20%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.55), transparent);
}
.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 24px 60px -28px rgba(43, 191, 180, 0.30);
}
.dash-kpi-critico {
    border-color: rgba(224, 90, 71, 0.35);
}
.dash-kpi-critico::before {
    background: linear-gradient(90deg, transparent, rgba(224, 90, 71, 0.55), transparent);
}

.kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-bottom: 0.6rem;
}
.kpi-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--fg);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.04em;
}
.kpi-value-text { font-size: 1rem; line-height: 1.3; font-weight: 700; }
.kpi-sub { font-size: 0.8rem; color: var(--muted); }

/* KPI colour variants by maturidade */
.kpi-consolidado  .kpi-value { color: var(--secondary); }
.kpi-preventivo   .kpi-value { color: #4ade80; }
.kpi-estruturando .kpi-value { color: #fbbf24; }
.kpi-basico       .kpi-value { color: #fb923c; }
.kpi-inicial      .kpi-value { color: var(--danger); }

/* Risk bar */
.risk-bar-outer {
    background: rgba(50, 72, 130, 0.45);
    border-radius: 99px;
    height: 7px;
    overflow: hidden;
    min-width: 80px;
}
.risk-bar-inner {
    height: 7px;
    border-radius: 99px;
    transition: width 0.5s ease;
}
.risk-bar-green    { background: var(--secondary); }
.risk-bar-yellow   { background: #f59e0b; }
.risk-bar-orange   { background: #f97316; }
.risk-bar-red      { background: var(--danger); }
.risk-bar-dark-red { background: #be2b14; }

/* ==========================================================================
   STANDALONE FORM UTILITIES
   ========================================================================== */

.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 0.45rem;
    letter-spacing: 0.01em;
}
.form-select {
    width: 100%;
    padding: 0.65rem 0.925rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    color: var(--fg);
    background: rgba(9, 14, 28, 0.88);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}
.form-select:focus {
    border-color: rgba(232, 135, 42, 0.65);
    box-shadow: 0 0 0 3px rgba(232, 135, 42, 0.12);
}

/* ==========================================================================
   MOBILE / RESPONSIVE
   ========================================================================== */

.topbar-menu-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--fg);
    padding: 0.2rem 0.5rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}
.topbar-menu-btn:hover { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: -260px;
        transition: left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200;
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
    }
    .sidebar.open { left: 0; }
    .app-main { margin-left: 0; }
    .topbar-menu-btn { display: inline-flex; }
    .page-body { padding: 1.25rem 1rem; }
    .form-row,
    .form-row-3 { grid-template-columns: 1fr; }
    .data-table { font-size: 0.8rem; }
    .data-table th,
    .data-table td { padding: 0.6rem 0.75rem; }
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .details-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .public-nav { margin: 0.5rem; border-radius: var(--r-xl); }
    .nav-links { display: none; }
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .dash-kpis  { grid-template-columns: 1fr; }
    .details-grid { grid-template-columns: 1fr; }
    .escala-row { flex-wrap: wrap; }
    .hero { padding: 4rem 1.25rem 3rem; }
}

/* ==========================================================================
   BATCH 14A — VISUAL FOUNDATION ADDITIONS
   ========================================================================== */

/* --- Animated counter ---------------------------------------------------- */
@keyframes count-up {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.counter { animation: count-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-counter] { font-variant-numeric: tabular-nums; }

/* --- Skeleton loading ---------------------------------------------------- */
@keyframes shimmer-scan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%);  }
}
.skeleton {
    background: rgba(50, 72, 130, 0.28);
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(43, 191, 180, 0.09) 50%, transparent 100%);
    animation: shimmer-scan 1.8s ease-in-out infinite;
}

/* --- Glowing progress bar ----------------------------------------------- */
.progress-outer {
    background: rgba(50, 72, 130, 0.35);
    border-radius: 99px;
    height: 8px;
    overflow: visible;
    position: relative;
}
.progress-inner {
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 0 12px rgba(232, 135, 42, 0.55);
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: visible;
}
.progress-inner::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(232, 135, 42, 0.85);
    border: 2px solid rgba(232, 135, 42, 0.60);
}

/* --- Chart / graph locked container ------------------------------------- */
.chart-container {
    position: relative;
    background: rgba(9, 14, 28, 0.45);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.chart-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 2rem;
    text-align: center;
}
.chart-locked-icon {
    font-size: 2rem;
    opacity: 0.30;
    animation: pulse-glow 2.8s ease-in-out infinite;
}
.chart-locked-text {
    font-size: 0.825rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 300px;
}

/* --- KPI icon card ------------------------------------------------------- */
.kpi-icon-card {
    position: relative;
    background: linear-gradient(160deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.25rem 1.375rem;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    animation: fade-in-up 0.5s ease both;
}
.kpi-icon-card::before {
    content: '';
    position: absolute;
    inset-x: 15%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.55), transparent);
}
.kpi-icon-card.accent-orange::before { background: linear-gradient(90deg, transparent, rgba(232, 135, 42, 0.65), transparent); }
.kpi-icon-card.accent-orange { border-color: rgba(232, 135, 42, 0.22); }
.kpi-icon-card.accent-red::before    { background: linear-gradient(90deg, transparent, rgba(224, 90, 71, 0.65), transparent); }
.kpi-icon-card.accent-red    { border-color: rgba(224, 90, 71, 0.22); }
.kpi-icon-card.accent-green::before  { background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.55), transparent); }
.kpi-icon-card.accent-green  { border-color: rgba(74, 222, 128, 0.22); }
.kpi-icon-card:hover {
    transform: translateY(-3px);
    border-color: rgba(43, 191, 180, 0.30);
    box-shadow: 0 20px 50px -22px rgba(43, 191, 180, 0.28);
}
.kpi-icon-card.accent-orange:hover { border-color: rgba(232, 135, 42, 0.38); box-shadow: 0 20px 50px -22px rgba(232, 135, 42, 0.28); }
.kpi-icon-card.accent-red:hover    { border-color: rgba(224, 90, 71, 0.38);  box-shadow: 0 20px 50px -22px rgba(224, 90, 71, 0.25); }
.kpi-icon-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.kpi-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.kpi-icon-badge.teal   { background: rgba(43, 191, 180, 0.12);  border-color: rgba(43, 191, 180, 0.28);  color: var(--secondary); }
.kpi-icon-badge.orange { background: rgba(232, 135, 42, 0.12);  border-color: rgba(232, 135, 42, 0.28);  color: var(--primary);   }
.kpi-icon-badge.red    { background: rgba(224, 90, 71, 0.12);   border-color: rgba(224, 90, 71, 0.28);   color: var(--danger);    }
.kpi-icon-badge.green  { background: rgba(74, 222, 128, 0.12);  border-color: rgba(74, 222, 128, 0.28);  color: #4ade80;          }
.kpi-icon-badge.purple { background: rgba(139, 92, 246, 0.12);  border-color: rgba(139, 92, 246, 0.28);  color: #a78bfa;          }
.kpi-icon-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--fg);
    line-height: 1;
    letter-spacing: -0.04em;
}
.kpi-icon-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
    margin-bottom: 0.3rem;
}
.kpi-icon-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* --- Stats header bar (empresas/setores top) ----------------------------- */
.stats-header {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.stat-header-card {
    position: relative;
    background: linear-gradient(160deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.125rem 1.25rem;
    overflow: hidden;
    animation: fade-in-up 0.45s ease both;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-header-card:hover { transform: translateY(-2px); }
.stat-header-card::before {
    content: '';
    position: absolute;
    inset-x: 15%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.45), transparent);
}
.stat-header-card.accent-orange::before { background: linear-gradient(90deg, transparent, rgba(232, 135, 42, 0.55), transparent); }
.stat-header-card.accent-orange { border-color: rgba(232, 135, 42, 0.18); }
.stat-header-card.accent-red::before { background: linear-gradient(90deg, transparent, rgba(224, 90, 71, 0.55), transparent); }
.stat-header-card.accent-red { border-color: rgba(224, 90, 71, 0.18); }
.stat-header-card.accent-green { border-color: rgba(74, 222, 128, 0.18); }
.stat-header-card.accent-green::before { background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.45), transparent); }
.stat-header-val {
    font-size: 2.125rem;
    font-weight: 800;
    color: var(--fg);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 0.3rem;
}
.stat-header-val.teal   { color: var(--secondary); }
.stat-header-val.orange { color: var(--primary); }
.stat-header-val.red    { color: var(--danger); }
.stat-header-val.green  { color: #4ade80; }
.stat-header-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
}

/* --- Ecosystem module grid (Central page) -------------------------------- */
.eco-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: start;
}
.eco-col-left  { display: flex; flex-direction: column; gap: 1.25rem; }
.eco-col-right { display: flex; flex-direction: column; gap: 1.25rem; }
.eco-module {
    position: relative;
    background: linear-gradient(145deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.375rem 1.5rem;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    animation: fade-in-up 0.5s ease both;
}
.eco-module::before {
    content: '';
    position: absolute;
    inset-x: 15%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.45), transparent);
}
.eco-module.active-phase {
    border-color: rgba(232, 135, 42, 0.30);
    background: linear-gradient(145deg, rgba(17, 25, 46, 0.92), rgba(14, 20, 38, 0.78));
}
.eco-module.active-phase::before {
    background: linear-gradient(90deg, transparent, rgba(232, 135, 42, 0.70), transparent);
}
.eco-module.future-phase {
    opacity: 0.48;
}
.eco-module:not(.future-phase):hover {
    transform: translateY(-3px);
    border-color: rgba(43, 191, 180, 0.30);
    box-shadow: 0 18px 50px -20px rgba(43, 191, 180, 0.28);
}
.eco-module.active-phase:not(.future-phase):hover {
    border-color: rgba(232, 135, 42, 0.45);
    box-shadow: 0 18px 50px -20px rgba(232, 135, 42, 0.32);
}
.eco-module-phase {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--secondary);
    margin-bottom: 0.75rem;
}
.eco-module.active-phase .eco-module-phase { color: var(--primary); }
.eco-module-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgba(43, 191, 180, 0.09);
    border: 1px solid rgba(43, 191, 180, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.875rem;
    transition: box-shadow 0.22s;
}
.eco-module.active-phase .eco-module-icon {
    background: rgba(232, 135, 42, 0.10);
    border-color: rgba(232, 135, 42, 0.28);
    box-shadow: 0 0 16px -6px rgba(232, 135, 42, 0.35);
}
.eco-module-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.eco-module-desc {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 0.875rem;
}
.eco-module-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Center column — orbit logo */
.eco-center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    gap: 1.25rem;
    padding: 0 0.5rem;
}
.eco-center-logo {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}
.eco-orbit-ring {
    position: absolute;
    border-radius: 50%;
}
.eco-orbit-ring:nth-child(1) {
    inset: -22px;
    border: 1px solid rgba(43, 191, 180, 0.18);
    animation: drift-orbit 22s linear infinite;
}
.eco-orbit-ring:nth-child(2) {
    inset: -42px;
    border: 1px solid rgba(232, 135, 42, 0.13);
    animation: drift-orbit 34s linear infinite reverse;
}
.eco-orbit-ring:nth-child(3) {
    inset: -62px;
    border: 1px dashed rgba(43, 191, 180, 0.07);
    animation: drift-orbit 50s linear infinite;
}
.eco-center-mark {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%,
        rgba(232, 135, 42, 0.18) 0%,
        rgba(43, 191, 180, 0.10) 50%,
        transparent 75%);
    border: 1px solid rgba(43, 191, 180, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 28px -10px rgba(232, 135, 42, 0.35);
}
.eco-center-text {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
    line-height: 1;
}
.eco-center-text span { color: var(--primary); }
.eco-center-tagline {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--secondary);
    text-align: center;
}
.eco-center-motto {
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.65;
    font-style: italic;
}
.eco-center-motto em {
    font-style: normal;
    color: rgba(232, 135, 42, 0.75);
}

/* --- Company avatar badge ----------------------------------------------- */
.co-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(232, 135, 42, 0.18), rgba(43, 191, 180, 0.10));
    border: 1px solid rgba(232, 135, 42, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--primary);
    flex-shrink: 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.co-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: var(--r-lg);
    font-size: 1.375rem;
}
.co-avatar-xl {
    width: 80px;
    height: 80px;
    border-radius: var(--r-xl);
    font-size: 1.875rem;
}

/* --- Auth split layout (login page) ------------------------------------- */
.auth-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 500px;
}
.auth-split-left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3.5rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(4, 8, 16, 0.99), rgba(7, 12, 22, 0.96));
}
.auth-split-left::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -80px;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(43, 191, 180, 0.12);
    animation: drift-orbit 38s linear infinite;
    pointer-events: none;
}
.auth-split-left::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(232, 135, 42, 0.13);
    animation: drift-orbit 28s linear infinite reverse;
    pointer-events: none;
}
/* Extra orbit glow on left */
.auth-split-left-glow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(232, 135, 42, 0.09) 0%,
        rgba(43, 191, 180, 0.07) 50%,
        transparent 75%);
    filter: blur(30px);
    pointer-events: none;
}
.auth-left-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}
.auth-left-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(9, 13, 24, 0.85);
    border: 1px solid rgba(43, 191, 180, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.5px;
    box-shadow: 0 0 14px -4px rgba(232, 135, 42, 0.35);
}
.auth-left-brand-mark span { color: var(--primary); }
.auth-left-brand-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.auth-left-brand-sub {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--secondary);
    display: block;
}
.auth-left-content {
    position: relative;
    z-index: 1;
    max-width: 480px;
}
.auth-left-content h1 {
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 800;
    color: var(--fg);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-bottom: 1.125rem;
}
.auth-left-content h1 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-left-content > p {
    font-size: 0.9375rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 400px;
}
.auth-left-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.auth-left-feature {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.875rem;
    color: var(--fg);
}
.auth-feature-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(43, 191, 180, 0.09);
    border: 1px solid rgba(43, 191, 180, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    color: var(--secondary);
}
.auth-left-footer {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: var(--muted-dim);
}
.auth-split-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(5, 8, 16, 0.88);
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
}
.auth-split-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(232, 135, 42, 0.09) 0%, transparent 55%),
        radial-gradient(circle at 50% 80%, rgba(43, 191, 180, 0.07) 0%, transparent 45%);
    pointer-events: none;
}

/* --- Hero feature strip (home page) ------------------------------------- */
.feature-strip {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem;
    margin: 0 0.25rem 2rem;
    background: linear-gradient(180deg, var(--panel-soft), rgba(14, 20, 38, 0.45));
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}
.feature-strip::before {
    content: '';
    position: absolute;
    inset-x: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.45), transparent);
}
.feature-strip-title {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    margin-bottom: 1.75rem;
}
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}
.feature-card {
    position: relative;
    text-align: center;
    padding: 1.375rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--panel);
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.feature-card::before {
    content: '';
    position: absolute;
    inset-x: 20%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 135, 42, 0.55), transparent);
}
.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 135, 42, 0.30);
    box-shadow: 0 12px 36px -18px rgba(232, 135, 42, 0.35);
}
.feature-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: rgba(232, 135, 42, 0.09);
    border: 1px solid rgba(232, 135, 42, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin: 0 auto 0.875rem;
    color: var(--primary);
    transition: background 0.22s, box-shadow 0.22s;
}
.feature-card:hover .feature-card-icon {
    background: rgba(232, 135, 42, 0.14);
    box-shadow: 0 0 20px -6px rgba(232, 135, 42, 0.50);
}
.feature-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}
.feature-card-desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.6;
}

/* --- Hero left/right split layout --------------------------------------- */
.hero-split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3rem;
    align-items: center;
    padding: 5rem 2.5rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    animation: fade-in-up 0.7s ease both;
}
.hero-split-content { max-width: 600px; }
.hero-split-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 340px;
}
/* Orbit rings for hero visual */
.hero-orbit {
    position: relative;
    width: 240px;
    height: 240px;
    flex-shrink: 0;
}
.hero-orbit-ring {
    position: absolute;
    border-radius: 50%;
}
.hero-orbit-ring:nth-child(1) {
    inset: -28px;
    border: 1px solid rgba(43, 191, 180, 0.18);
    animation: drift-orbit 22s linear infinite;
}
.hero-orbit-ring:nth-child(2) {
    inset: -56px;
    border: 1px solid rgba(232, 135, 42, 0.14);
    animation: drift-orbit 34s linear infinite reverse;
}
.hero-orbit-ring:nth-child(3) {
    inset: -84px;
    border: 1px dashed rgba(43, 191, 180, 0.07);
    animation: drift-orbit 48s linear infinite;
}
.hero-orbit-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%,
        rgba(232, 135, 42, 0.22) 0%,
        rgba(43, 191, 180, 0.14) 45%,
        transparent 70%);
    border: 1px solid rgba(43, 191, 180, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 40px rgba(232, 135, 42, 0.10),
        0 0 40px -15px rgba(232, 135, 42, 0.30);
}
.hero-orbit-text {
    font-size: 3rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -2px;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.hero-orbit-text span { color: var(--primary); }
/* Icon nodes on orbit rings */
.hero-orbit-node {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(9, 13, 24, 0.90);
    border: 1px solid rgba(43, 191, 180, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--secondary);
    box-shadow: 0 0 12px -4px rgba(43, 191, 180, 0.35);
}
.hero-orbit-node.orange { border-color: rgba(232, 135, 42, 0.35); color: var(--primary); box-shadow: 0 0 12px -4px rgba(232, 135, 42, 0.35); }

/* --- Pulsing node ------------------------------------------------------- */
.pulse-node {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
    display: inline-block;
    flex-shrink: 0;
    animation: pulse-ring-teal 2.2s ease-out infinite;
}
.pulse-node.orange {
    background: var(--primary);
    animation: pulse-ring-orange 2.2s ease-out infinite;
}
@keyframes pulse-ring-teal {
    0%   { box-shadow: 0 0 0 0 rgba(43, 191, 180, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(43, 191, 180, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 191, 180, 0); }
}
@keyframes pulse-ring-orange {
    0%   { box-shadow: 0 0 0 0 rgba(232, 135, 42, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(232, 135, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 135, 42, 0); }
}

/* --- Hover lift ---------------------------------------------------------- */
.lift-hover {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.lift-hover:hover { transform: translateY(-3px); }

/* --- Locked panel (QR / future feature) ---------------------------------- */
.locked-panel {
    background: rgba(9, 14, 28, 0.55);
    border: 1px dashed rgba(50, 72, 130, 0.42);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.locked-panel::before {
    content: '';
    position: absolute;
    inset-x: 20%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(50, 72, 130, 0.35), transparent);
}
.locked-panel-icon {
    font-size: 1.625rem;
    margin-bottom: 0.5rem;
    opacity: 0.30;
}
.locked-panel-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 0.3rem;
    opacity: 0.55;
}
.locked-panel-desc {
    font-size: 0.775rem;
    color: var(--muted);
    line-height: 1.6;
}

/* --- Section divider glow ----------------------------------------------- */
.section-glow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.section-glow-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(43, 191, 180, 0.35), transparent);
}
.section-glow-text {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--secondary);
    white-space: nowrap;
}

/* --- Page stagger animations via JS class ------------------------------- */
.anim-delay-1 { animation-delay: 0.05s !important; }
.anim-delay-2 { animation-delay: 0.12s !important; }
.anim-delay-3 { animation-delay: 0.19s !important; }
.anim-delay-4 { animation-delay: 0.26s !important; }
.anim-delay-5 { animation-delay: 0.33s !important; }

/* --- Form layout with sidebar (create pages) ---------------------------- */
.form-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}
.form-main-col { min-width: 0; }
.form-side-col { position: sticky; top: calc(var(--topbar-h) + 1.5rem); }

/* --- Form numbered section icon ----------------------------------------- */
.form-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(232, 135, 42, 0.12);
    border: 1px solid rgba(232, 135, 42, 0.30);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* --- Preview card (setor / diagnóstico) --------------------------------- */
.preview-card {
    position: relative;
    background: linear-gradient(160deg, var(--panel), var(--panel-soft));
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 1rem;
}
.preview-card::before {
    content: '';
    position: absolute;
    inset-x: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.45), transparent);
    pointer-events: none;
}
.preview-card-header {
    padding: 0.875rem 1.25rem;
    background: rgba(7, 11, 22, 0.45);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.preview-card-body { padding: 1.25rem; }

/* --- Network / risk map placeholder ------------------------------------ */
.network-map-placeholder {
    position: relative;
    height: 280px;
    background: rgba(9, 14, 28, 0.50);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.network-map-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 60%, rgba(43, 191, 180, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 70% 35%, rgba(232, 135, 42, 0.09) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(43, 191, 180, 0.06) 0%, transparent 60%);
}
/* SVG dot pattern overlay */
.network-map-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(43, 191, 180, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* --- Topbar breadcrumb path (shows page context inline) ----------------- */
.topbar-path {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.topbar-path span { color: var(--fg); font-weight: 500; }
.topbar-path-sep { color: rgba(50, 72, 130, 0.6); }

/* --- Responsive additions ----------------------------------------------- */
@media (max-width: 1100px) {
    .eco-grid { grid-template-columns: 1fr 1fr; }
    .eco-center-col { width: 180px; }
    .hero-split { grid-template-columns: 1fr; }
    .hero-split-visual { display: none; }
    .form-with-sidebar { grid-template-columns: 1fr; }
    .form-side-col { position: static; }
}
@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-split-left { display: none; }
    .auth-split-right {
        min-height: 100vh;
        border-left: none;
    }
    .eco-grid { grid-template-columns: 1fr; }
    .eco-center-col { width: 100%; flex-direction: row; gap: 1.5rem; padding: 1rem; background: linear-gradient(145deg, var(--panel), var(--panel-soft)); border: 1px solid var(--border); border-radius: var(--r-xl); }
    .eco-center-logo { width: 80px; height: 80px; flex-shrink: 0; }
    .eco-orbit-ring:nth-child(1) { inset: -16px; }
    .eco-orbit-ring:nth-child(2) { inset: -30px; }
    .eco-orbit-ring:nth-child(3) { display: none; }
}
@media (max-width: 600px) {
    .stats-header { grid-template-columns: repeat(2, 1fr); }
    .feature-cards { grid-template-columns: repeat(2, 1fr); }
    .hero-split { padding: 3.5rem 1.25rem 2.5rem; }
}

/* ==========================================================================
   BATCH 14B — Logo image, BrandMark compact, Auth genome, Home eco panel,
               Topbar avatar, Auth feature cards
   ========================================================================== */

@keyframes nucleotide-pulse {
    0%, 100% { opacity: 0.32; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.5); }
}
@keyframes helix-drift {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-18px); }
}

/* --- Sidebar logo image -------------------------------------------------- */
.sidebar-logo-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(9, 13, 24, 0.80);
    border: 1px solid rgba(43, 191, 180, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 12px -4px rgba(232, 135, 42, 0.35);
}
.sidebar-logo-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 45% 45%, rgba(232, 135, 42, 0.28), transparent 70%);
    filter: blur(5px);
    pointer-events: none;
}
.sidebar-logo-img {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(232, 135, 42, 0.45));
}

/* --- Brand mark compact (login form right panel + home right panel) ------ */
.brand-mark-compact {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(14, 20, 38, 0.95), rgba(8, 12, 24, 0.92));
    border: 1px solid rgba(43, 191, 180, 0.32);
    box-shadow:
        0 0 0 1px rgba(200, 220, 255, 0.04),
        0 18px 44px -22px rgba(43, 191, 180, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.brand-mark-compact::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 20px;
    border: 1px solid rgba(232, 135, 42, 0.28);
    opacity: 0.80;
    pointer-events: none;
}
.brand-mark-logo {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(43, 191, 180, 0.40));
}

/* --- Auth dividers (orange + teal bars under brand mark) ----------------- */
.auth-dividers {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin: 0.25rem 0 0.5rem;
}
.auth-div-bar {
    height: 4px;
    width: 80px;
    border-radius: 4px;
}
.auth-div-bar.orange { background: var(--primary); }
.auth-div-bar.teal   { background: var(--secondary); }

/* --- Auth genome SVG (left panel right-side decor) ----------------------- */
.auth-genome {
    position: absolute;
    inset-y: 0;
    right: 0;
    width: 42%;
    opacity: 0.48;
    mix-blend-mode: screen;
    pointer-events: none;
    overflow: hidden;
}
.auth-genome svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: helix-drift 14s ease-in-out infinite;
}

/* --- Auth feature cards (4 pillars at bottom of login left) -------------- */
.auth-feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
}
.auth-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-xl);
    padding: 0.875rem 0.5rem;
    text-align: center;
}
.auth-feature-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin: 0 auto 0.5rem;
    border: 1px solid transparent;
}
.auth-feature-card-icon.teal {
    background: rgba(43, 191, 180, 0.12);
    border-color: rgba(43, 191, 180, 0.28);
    color: var(--secondary);
}
.auth-feature-card-icon.orange {
    background: rgba(232, 135, 42, 0.12);
    border-color: rgba(232, 135, 42, 0.28);
    color: var(--primary);
}
.auth-feature-card-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.25;
}

/* --- Topbar avatar circle ------------------------------------------------ */
.topbar-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(232, 135, 42, 0.40);
    background: radial-gradient(circle at 35% 35%, rgba(232, 135, 42, 0.25), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}
.topbar-avatar-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary);
    border: 2px solid #03070d;
    box-shadow: 0 0 6px var(--secondary);
}

/* --- Home eco right panel ------------------------------------------------ */
.home-eco-panel {
    height: 100%;
    min-height: 540px;
    border-radius: var(--r-2xl);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.home-eco-brand-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}
.home-eco-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.home-eco-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1.35;
    max-width: 320px;
    margin: 0 auto;
}
.home-orbit-vis {
    position: relative;
    flex: 1;
    min-height: 340px;
    border-radius: var(--r-xl);
    border: 1px solid rgba(50, 72, 130, 0.36);
    background:
        radial-gradient(circle at center, rgba(43, 191, 180, 0.10), transparent 52%),
        linear-gradient(180deg, rgba(10, 15, 28, 0.70), rgba(8, 12, 24, 0.75));
    overflow: hidden;
}
.home-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.home-orbit-ring.r1 { width: 180px; height: 180px; border: 1px solid rgba(43, 191, 180, 0.22); }
.home-orbit-ring.r2 { width: 270px; height: 270px; border: 1px solid rgba(232, 135, 42, 0.16); }
.home-orbit-ring.r3 { width: 360px; height: 360px; border: 1px dashed rgba(43, 191, 180, 0.09); }
.home-orbit-sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid rgba(232, 135, 42, 0.35);
    background: radial-gradient(circle at 32% 32%, rgba(43, 191, 180, 0.22), rgba(9, 13, 24, 0.92));
    box-shadow:
        0 0 50px -10px rgba(43, 191, 180, 0.55),
        inset 0 0 28px rgba(43, 191, 180, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-orbit-sphere-text {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.03em;
}
.home-orbit-sphere-text span { color: var(--primary); }
.home-eco-node {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.home-eco-node-inner {
    min-width: 110px;
    max-width: 130px;
    border-radius: 999px;
    border: 1px solid;
    padding: 0.45rem 0.75rem;
    text-align: center;
    background: rgba(8, 12, 24, 0.90);
    backdrop-filter: blur(8px);
}
.home-eco-node-inner.primary { border-color: rgba(232, 135, 42, 0.40); }
.home-eco-node-inner.teal    { border-color: rgba(43, 191, 180, 0.40); }
.home-eco-node-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2;
}
.home-eco-node-desc {
    font-size: 0.6rem;
    color: var(--muted);
    line-height: 1.3;
    margin-top: 0.1rem;
}

/* ==========================================================================
   REPORT LAYOUT — print-safe: keep light theme for PDF
   ========================================================================== */

/* Screen action bar — upgrade to dark brand style */
.rpt-actionbar {
    background: linear-gradient(180deg, rgba(9, 13, 24, 0.95), rgba(7, 10, 18, 0.98));
    border-bottom: 1px solid var(--border);
    color: var(--fg);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.rpt-actionbar span { font-weight: 600; font-size: 0.9rem; color: var(--fg); }
.rpt-actionbar-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-rpt {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 1rem;
    border-radius: var(--r-md);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.btn-rpt-white {
    background: var(--primary);
    color: #fff;
    border-color: rgba(232, 135, 42, 0.50);
    box-shadow: 0 0 16px -6px rgba(232, 135, 42, 0.50);
}
.btn-rpt-white:hover { background: var(--primary-dark); }
.btn-rpt-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: var(--fg);
    border-color: var(--border-soft);
}

/* ==========================================================================
   BATCH 14C — Public home visual overhaul
   ========================================================================== */

/* Particle canvas */
#hero-particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Nav brand signature */
.nav-brand-sig {
    font-size: 0.52rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--secondary);
    opacity: 0.80;
    white-space: nowrap;
    line-height: 1;
    margin-top: 1px;
}

/* Hero headline with word-level coloring */
.hero-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--fg);
    line-height: 1.18;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}
.hero-headline em { font-style: normal; }
.hero-headline .word-teal  { color: var(--secondary); }
.hero-headline .word-orange { color: var(--primary); }

/* Hero body text */
.hero-body {
    font-size: 1.0625rem;
    color: var(--muted);
    max-width: 520px;
    line-height: 1.75;
    margin-bottom: 2.25rem;
}

/* CTA row */
.hero-cta-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.btn-hero-secondary {
    font-size: 0.9rem;
    color: var(--secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    transition: color 0.18s, opacity 0.18s;
    opacity: 0.85;
}
.btn-hero-secondary:hover { color: var(--fg); opacity: 1; }
.btn-hero-play {
    font-size: 0.6rem;
    display: inline-flex;
    align-items: center;
}

/* Override hero-split proportions */
.hero-split {
    grid-template-columns: 1fr 480px;
    padding: 5rem 2.5rem 3rem;
}
.hero-split-visual {
    height: 540px;
    min-height: 480px;
}

/* ── Orbit scene ─────────────────────────────────────────────────────────── */
.home-orbit-scene {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    overflow: visible;
}

/* Central radial glow */
.home-orbit-scene::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 340px; height: 340px;
    background: radial-gradient(circle,
        rgba(43, 191, 180, 0.18) 0%,
        rgba(232, 135, 42, 0.07) 55%,
        transparent 74%);
    border-radius: 50%;
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}
/* Right-edge light trail */
.home-orbit-scene::after {
    content: '';
    position: absolute;
    top: 5%; right: -30px;
    width: 160px; height: 80%;
    background: linear-gradient(180deg,
        rgba(232, 135, 42, 0.11) 0%,
        rgba(43, 191, 180, 0.08) 55%,
        transparent 100%);
    filter: blur(44px);
    pointer-events: none;
    z-index: 0;
}

/* Orbit rings */
.orb-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}
.orb-ring-1 {
    width: 160px; height: 160px;
    border: 1px solid rgba(43, 191, 180, 0.30);
    animation: drift-orbit 22s linear infinite;
}
.orb-ring-2 {
    width: 310px; height: 310px;
    border: 1.5px solid rgba(232, 135, 42, 0.22);
    animation: drift-orbit 38s linear infinite reverse;
    box-shadow: 0 0 24px -10px rgba(232, 135, 42, 0.12);
}
.orb-ring-3 {
    width: 470px; height: 470px;
    border: 1px dashed rgba(43, 191, 180, 0.09);
    animation: drift-orbit 58s linear infinite;
}

/* Center sphere */
.orb-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 112px; height: 112px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%,
        rgba(43, 191, 180, 0.24),
        rgba(9, 13, 24, 0.96));
    border: 1.5px solid rgba(232, 135, 42, 0.50);
    box-shadow:
        0 0 64px -10px rgba(43, 191, 180, 0.65),
        0 0 32px -14px rgba(232, 135, 42, 0.38),
        inset 0 0 30px rgba(43, 191, 180, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    animation: pulse-glow 3.8s ease-in-out infinite;
}
.orb-center-img {
    width: 82px; height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(43, 191, 180, 0.40));
}

/* Orbit nodes */
.orb-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 5;
}
.orb-node-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 10, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.orb-node-icon.teal {
    border-color: rgba(43, 191, 180, 0.55);
    color: var(--secondary);
    box-shadow: 0 0 16px -4px rgba(43, 191, 180, 0.45);
}
.orb-node-icon.orange {
    border-color: rgba(232, 135, 42, 0.55);
    color: var(--primary);
    box-shadow: 0 0 16px -4px rgba(232, 135, 42, 0.45);
}
.orb-node:hover .orb-node-icon { transform: scale(1.12); }
.orb-node-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fg);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}
.orb-node-sub {
    font-size: 0.57rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    margin-top: -2px;
}

/* Node positions (r2 = 310px diameter = 155px radius from center) */
.orb-n-pessoas   { top: calc(50% - 155px); left: 50%; }
.orb-n-prevencao { top: 50%;               left: calc(50% - 155px); }
.orb-n-dados     { top: 50%;               left: calc(50% + 155px); }
/* bottom-left ~215°: x = -155*0.82 ≈ -127, y = +155*0.57 ≈ +88 */
.orb-n-acao      { top: calc(50% + 88px);  left: calc(50% - 127px); }
/* bottom-right ~325°: x = +155*0.82 ≈ +127, y = +155*0.57 ≈ +88 */
.orb-n-evolucao  { top: calc(50% + 88px);  left: calc(50% + 127px); }

/* ── Feature cards — enhanced premium glass ─────────────────────────────── */
.feature-card {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 28px -16px rgba(0, 0, 0, 0.55);
}
.feature-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 0 1px rgba(232, 135, 42, 0.14),
        0 14px 40px -16px rgba(232, 135, 42, 0.30);
}
.feature-card:nth-child(even):hover {
    border-color: rgba(43, 191, 180, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 0 1px rgba(43, 191, 180, 0.12),
        0 14px 40px -16px rgba(43, 191, 180, 0.28);
}
.feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive: hide orbit on narrow screens */
@media (max-width: 860px) {
    .hero-split { grid-template-columns: 1fr; }
    .hero-split-visual { display: none; }
}
.btn-rpt-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--border); }

/* ==========================================================================
   BATCH 15A — Public content sections + Ajuda help items
   ========================================================================== */

/* ── Public content ──────────────────────────────────────────────────────── */
.pub-section       { margin-bottom: 2.75rem; }
.pub-section-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--primary); margin-bottom: 0.625rem; }
.pub-section-title { font-size: 1.4rem; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.875rem; }
.pub-lead          { color: var(--muted); font-size: 0.9375rem; line-height: 1.8; margin-bottom: 0.875rem; }
.pub-divider       { border: none; border-top: 1px solid var(--border); margin: 2.75rem 0; }
.pub-note          { background: rgba(14,20,38,0.55); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-md); padding: 1rem 1.25rem; font-size: 0.84rem; color: var(--muted); line-height: 1.65; margin-top: 1.25rem; }
.pub-note strong   { color: var(--fg); }
.pub-grid-2        { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.125rem; }
.pub-grid-3        { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-top: 1.125rem; }
.pub-card          { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.375rem; position: relative; overflow: hidden; }
.pub-card::before  { content: ''; position: absolute; inset-x: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,135,42,0.3), transparent); }
.pub-card.teal::before { background: linear-gradient(90deg, transparent, rgba(43,191,180,0.3), transparent); }
.pub-card-num      { font-size: 1.75rem; font-weight: 800; color: var(--primary); opacity: 0.25; line-height: 1; margin-bottom: 0.35rem; }
.pub-card-title    { font-size: 0.9375rem; font-weight: 700; color: var(--fg); margin-bottom: 0.375rem; }
.pub-card-desc     { font-size: 0.84rem; color: var(--muted); line-height: 1.65; }
.pub-list          { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.45rem; }
.pub-list li       { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.pub-list li::before { content: 'â—†'; color: var(--primary); font-size: 0.45rem; margin-top: 0.42em; flex-shrink: 0; }
.pub-list.teal li::before { color: var(--secondary); }
.pub-table         { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 0.875rem; }
.pub-table th      { padding: 0.5rem 0.875rem; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--border); }
.pub-table td      { padding: 0.5rem 0.875rem; color: var(--fg); border-bottom: 1px solid rgba(50,72,130,0.22); vertical-align: middle; }
.pub-table tbody tr:last-child td { border-bottom: none; }
.pub-table td.sub  { color: var(--muted); font-size: 0.81rem; }

/* ── Ajuda help items ─────────────────────────────────────────────────────── */
.help-grid         { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.125rem; }
.help-item         { background: linear-gradient(170deg, var(--panel), var(--panel-soft)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; position: relative; overflow: hidden; transition: border-color 0.22s ease, box-shadow 0.22s ease; }
.help-item::before { content: ''; position: absolute; inset-x: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(43,191,180,0.28), transparent); }
.help-item-label   { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--secondary); margin-bottom: 0.35rem; }
.help-item-title   { font-size: 0.9375rem; font-weight: 700; color: var(--fg); margin-bottom: 0.5rem; }
.help-item-desc    { font-size: 0.83rem; color: var(--muted); line-height: 1.65; }
.help-item.disabled { border-color: rgba(224,90,71,0.2); opacity: 0.62; cursor: default; }
.help-item.disabled::before { background: linear-gradient(90deg, transparent, rgba(224,90,71,0.18), transparent); }
.help-item.disabled .help-item-label { color: var(--danger); }

/* ── Charts (SVG / CSS) ───────────────────────────────────────────────────── */
.chart-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary);
    margin-bottom: 0.6rem;
}
.chart-empty-note {
    font-size: 0.82rem;
    color: var(--muted);
    text-align: center;
    padding: 1.75rem 1rem;
    font-style: italic;
}
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: start;
}
@media (max-width: 600px) { .charts-row { grid-template-columns: 1fr; } }

/* Horizontal bar rows (CSS chart) */
.chart-bar-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
}
.chart-bar-label {
    min-width: 110px;
    max-width: 180px;
    font-size: 0.77rem;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chart-bar-track {
    flex: 1;
    height: 18px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
}
.chart-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.7s ease;
}
.chart-bar-val {
    min-width: 38px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fg);
    text-align: right;
}

/* Donut chart wrapper */
.donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.8rem;
}
.donut-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
}
.donut-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Line chart wrapper */
.line-chart-wrap {
    width: 100%;
    overflow-x: auto;
}
.line-chart-wrap svg {
    min-width: 320px;
    width: 100%;
    height: auto;
    display: block;
}

/* ── Expandable help items ────────────────────────────────────────────────── */
.help-item.expandable {
    cursor: pointer;
    user-select: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.help-item.expandable:hover {
    border-color: rgba(43,191,180,0.45);
    background: linear-gradient(170deg, rgba(19,27,52,0.96), rgba(16,22,42,0.90));
    box-shadow: 0 0 0 1px rgba(43,191,180,0.12), 0 12px 36px -16px rgba(43,191,180,0.20);
    transform: translateY(-1px);
}
.help-item.expandable:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}
.help-item.expandable[aria-expanded="true"] {
    border-color: rgba(232,135,42,0.38);
    background: linear-gradient(170deg, rgba(20,27,50,0.98), rgba(16,22,42,0.94));
    box-shadow: 0 0 0 1px rgba(232,135,42,0.08), 0 12px 36px -16px rgba(232,135,42,0.18);
}
.help-item.expandable[aria-expanded="true"]:hover {
    border-color: rgba(232,135,42,0.55);
    box-shadow: 0 0 0 1px rgba(232,135,42,0.14), 0 12px 36px -16px rgba(232,135,42,0.26);
    transform: translateY(-1px);
}
.help-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.help-item-chevron {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(43,191,180,0.10);
    border: 1px solid rgba(43,191,180,0.26);
    color: var(--secondary);
    transition: transform 0.34s cubic-bezier(0.4,0,0.2,1), background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    margin-top: 0.05rem;
    line-height: 1;
}
.help-item.expandable[aria-expanded="true"] .help-item-chevron {
    transform: rotate(180deg);
    background: rgba(232,135,42,0.12);
    border-color: rgba(232,135,42,0.32);
    color: var(--primary);
}
.help-item-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.32s ease, padding-top 0.28s ease, margin-top 0.28s ease, border-color 0.28s ease;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    font-size: 0.81rem;
    color: var(--muted);
    line-height: 1.65;
    opacity: 0;
}
.help-item-detail.open {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top-color: rgba(50,72,130,0.30);
    opacity: 1;
}
.help-detail-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--secondary);
    margin-top: 0;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(50,72,130,0.22);
}
.help-detail-label:first-child {
    padding-top: 0;
    border-top: none;
}
.help-detail-label::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}
.help-detail-val {
    color: var(--muted);
    margin-bottom: 0;
    line-height: 1.7;
    padding-left: 0.85rem;
}
.help-detail-note {
    margin-top: 0.625rem;
    margin-left: 0.85rem;
    padding: 0.55rem 0.9rem;
    background: rgba(43,191,180,0.07);
    border-left: 2px solid rgba(43,191,180,0.40);
    border-radius: 0 6px 6px 0;
    font-size: 0.78rem;
    color: rgba(94,232,224,0.82);
    line-height: 1.55;
}
.help-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

/* ==========================================================================
   POLISH BATCH — UI/UX REFINEMENTS
   ========================================================================== */

/* Chart card hover (cards inside .charts-row) */
.charts-row .card:hover {
    border-color: rgba(43,191,180,0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 20px 52px -28px rgba(43,191,180,0.15),
        0 16px 40px -24px rgba(0,0,0,0.6);
}

/* Chart section title — improve spacing */
.chart-section-title {
    margin-bottom: 0.75rem;
}

/* chart-empty-note — more prominent */
.chart-empty-note {
    padding: 2.5rem 1.5rem;
    background: rgba(50,72,130,0.08);
    border-radius: var(--r-md);
    border: 1px dashed rgba(50,72,130,0.30);
}

/* Sidebar link hover — smoother transition */
.sidebar-nav a {
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* ==========================================================================
   BATCH 16 — Premium Public Visual Upgrade
   ========================================================================== */

/* ── Atmospheric top glow (cinematic depth behind entire page) ──────────── */
body::after {
    content: '';
    position: fixed;
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 55%;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(43, 191, 180, 0.07) 0%,
        rgba(232, 135, 42, 0.04) 45%,
        transparent 72%);
    pointer-events: none;
    z-index: 0;
    filter: blur(55px);
}

/* ── Enhanced hero headline — more cinematic sizing ─────────────────────── */
.hero-headline {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    text-shadow: 0 0 80px rgba(43, 191, 180, 0.08);
}

/* ── Glowing hero CTA glow ring ──────────────────────────────────────────── */
.hero-split-content::before {
    content: '';
    position: absolute;
    bottom: -60px; left: -40px;
    width: 280px; height: 280px;
    background: radial-gradient(circle,
        rgba(232, 135, 42, 0.08) 0%,
        transparent 68%);
    pointer-events: none;
    z-index: 0;
    filter: blur(30px);
}

/* ── Nav active indicator ────────────────────────────────────────────────── */
.nav-links a.nav-active {
    color: var(--fg);
    position: relative;
}
.nav-links a.nav-active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--secondary), transparent);
    border-radius: 1px;
}

/* ── Enhanced btn-hero — scale + premium glow on hover ──────────────────── */
.btn-hero {
    transform: translateZ(0);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-hero:hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 0 48px -4px rgba(232, 135, 42, 0.90), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.btn-hero:active { transform: translateY(0) scale(0.99); transition-duration: 0.08s; }

/* ── Enhanced btn-entrar ─────────────────────────────────────────────────── */
.btn-entrar {
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-entrar:hover { transform: translateY(-1px); box-shadow: 0 4px 18px -6px rgba(232, 135, 42, 0.40); }

/* ── Gradient divider — more premium than plain border ───────────────────── */
.pub-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(43, 191, 180, 0.42) 35%,
        rgba(232, 135, 42, 0.28) 65%,
        transparent 100%);
    margin: 2.75rem 0;
}

/* ── Larger section titles for stronger visual hierarchy ─────────────────── */
.pub-section-title {
    font-size: 1.65rem;
}

/* ── Enhanced pub-cards — glass depth + hover lift + glow ───────────────── */
.pub-card {
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 28px -16px rgba(0, 0, 0, 0.55);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.pub-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 135, 42, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 20px 52px -20px rgba(232, 135, 42, 0.28),
        0 0 0 1px rgba(232, 135, 42, 0.10);
}
.pub-card.teal:hover {
    border-color: rgba(43, 191, 180, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 20px 52px -20px rgba(43, 191, 180, 0.26),
        0 0 0 1px rgba(43, 191, 180, 0.10);
}

/* Corner bracket detail on cards */
.pub-card::after {
    content: '';
    position: absolute;
    bottom: 10px; right: 10px;
    width: 14px; height: 14px;
    border-bottom: 1.5px solid rgba(43, 191, 180, 0.18);
    border-right: 1.5px solid rgba(43, 191, 180, 0.18);
    border-radius: 0 0 3px 0;
    pointer-events: none;
    transition: border-color 0.28s ease;
}
.pub-card:hover::after        { border-color: rgba(232, 135, 42, 0.35); }
.pub-card.teal::after         { border-color: rgba(43, 191, 180, 0.22); }
.pub-card.teal:hover::after   { border-color: rgba(43, 191, 180, 0.50); }

/* Card number — slightly more visible */
.pub-card-num { opacity: 0.38; }

/* ── Enhanced feature-strip ──────────────────────────────────────────────── */
.feature-strip {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 60px -32px rgba(0, 0, 0, 0.6);
}

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Richer public-footer ────────────────────────────────────────────────── */
.public-footer {
    position: relative;
    background: linear-gradient(180deg, transparent, rgba(6, 9, 18, 0.70));
}
.public-footer::before {
    content: '';
    position: absolute;
    inset-x: 8%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(43, 191, 180, 0.38) 35%,
        rgba(232, 135, 42, 0.26) 65%,
        transparent 100%);
    pointer-events: none;
}
/* Remove the default border-top since ::before replaces it */
.public-footer { border-top: none; }

/* ── Mobile nav ──────────────────────────────────────────────────────────── */
.nav-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--fg);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
    flex-shrink: 0;
}
.nav-menu-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(43, 191, 180, 0.38);
}

@media (max-width: 820px) {
    .nav-menu-btn { display: flex; }

    .public-nav { position: relative; }

    .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: 200;
        background: linear-gradient(160deg, var(--panel), rgba(10, 15, 28, 0.98));
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        padding: 0.875rem;
        flex-direction: column;
        gap: 0.2rem;
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        box-shadow:
            0 20px 50px -20px rgba(0, 0, 0, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        clip-path: inset(0 0 100% 0 round 22px);
        transition: clip-path 0.38s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .nav-links.open {
        clip-path: inset(0 0 -20px 0 round 22px);
        pointer-events: auto;
    }
    .nav-links li { width: 100%; }
    .nav-links a {
        font-size: 0.9375rem;
        padding: 0.675rem 0.875rem;
        border-radius: var(--r-md);
        width: 100%;
        display: block;
    }
    .nav-links a:hover { background: rgba(255, 255, 255, 0.04); }
    .btn-entrar {
        display: flex;
        width: 100%;
        justify-content: center;
        height: 44px;
        margin-top: 0.5rem;
        border-radius: var(--r-md);
    }
}

/* ── Reduced motion — disable all animations/transitions ────────────────── */
@media (prefers-reduced-motion: reduce) {
    .orb-ring,
    .orb-center,
    .hero-badge-dot,
    .topbar-eco-dot,
    .pulse-node,
    .public-orbits::before,
    .public-orbits::after {
        animation: none !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .btn-hero:hover,
    .btn-entrar:hover,
    .pub-card:hover,
    .feature-card:hover {
        transform: none;
    }
}

/* Stat header card — add border-color transition */
.stat-header-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* kpi-icon-card entrance */
.kpi-icon-card {
    animation: fade-in-up 0.45s ease both;
}

/* Breadcrumb separator clarity */
.breadcrumb-sep {
    opacity: 0.45;
    font-size: 0.85em;
}

/* Graph card body — consistent min-height for charts when empty */
.card-body .chart-empty-note {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Focus ring on form controls */
.form-select:focus-visible,
.form-input:focus-visible {
    outline: 2px solid rgba(232,135,42,0.50);
    outline-offset: 1px;
}

/* Smooth link transitions in tables */
.data-table td a {
    transition: color 0.15s ease;
}
.data-table td a:hover {
    opacity: 0.85;
}

/* ==========================================================================
   BATCH 18 — Premium Internal System: Diagnostic Records, Empresa Records,
              Page Depth, Interactive Command-Center UI, Help/Config Layout
   ========================================================================== */

/* --- App body: richer ambient internal depth ----------------------------- */
.app-main {
    position: relative;
    isolation: isolate;
}
.app-main::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 30% at 80% 5%,  rgba(232,135,42,0.055) 0%, transparent 100%),
        radial-gradient(ellipse 40% 50% at 5%  95%, rgba(43,191,180,0.045) 0%, transparent 100%);
}
.page-body {
    position: relative;
    z-index: 1;
}

/* --- Richer page header — left accent bar + larger title ---------------- */
.page-header {
    padding-left: 1.125rem;
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%) 1;
}
.page-header h2 {
    font-size: 1.625rem;
    letter-spacing: -0.025em;
}

/* --- Sidebar: stronger active glow pulse --------------------------------- */
.sidebar-nav a.active {
    background: linear-gradient(90deg,
        rgba(232,135,42,0.16) 0%,
        rgba(232,135,42,0.06) 55%,
        transparent 100%);
}
.sidebar-nav a.active .nav-icon {
    box-shadow: 0 0 14px -5px rgba(232,135,42,0.70);
}
.sidebar-nav a:hover .nav-icon {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

/* --- Topbar: heavier backdrop, stronger separator ----------------------- */
.topbar {
    background: linear-gradient(180deg,
        rgba(5,8,17,0.97) 0%,
        rgba(7,11,21,0.94) 100%);
    box-shadow: 0 1px 0 rgba(43,191,180,0.10), 0 4px 20px -8px rgba(0,0,0,0.55);
}

/* --- Charts row: balanced auto-fit grid --------------------------------- */
.charts-row {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ========================================================================
   DIAGNOSTIC RECORD LIST
   ======================================================================== */

.diag-record-list {
    display: flex;
    flex-direction: column;
}

.diag-record {
    position: relative;
    border-bottom: 1px solid rgba(50,72,130,0.26);
    transition: background 0.16s ease, box-shadow 0.16s ease;
    animation: fade-in-up 0.4s ease both;
    outline: none;
}
.diag-record:last-child {
    border-bottom: none;
}
.diag-record[data-record-href] {
    cursor: pointer;
}
.diag-record[data-record-href]:hover {
    background: rgba(43,191,180,0.05);
    box-shadow: inset 3px 0 0 rgba(43,191,180,0.60);
}
.diag-record[data-record-href]:hover .dr-indicator-dot {
    transform: scale(1.45);
}
.diag-record[data-record-href]:hover .dr-arrow {
    opacity: 0.85;
    transform: translateX(4px);
}
.diag-record[data-record-href]:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(43,191,180,0.55);
    background: rgba(43,191,180,0.06);
}
.diag-record[data-record-href]:active {
    background: rgba(43,191,180,0.09);
}
.diag-record.dr-active {
    border-left: 3px solid rgba(43,191,180,0.55);
}
.diag-record.dr-rascunho .dr-main { opacity: 0.55; }

.diag-record-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.0625rem 1.375rem;
    min-width: 0;
}

/* Status indicator dot */
.dr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
}
.dr-indicator-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    flex-shrink: 0;
}
.dr-indicator.dr-teal .dr-indicator-dot {
    background: var(--secondary);
    box-shadow: 0 0 7px rgba(43,191,180,0.70);
    animation: pulse-ring-teal 2.4s ease-out infinite;
}
.dr-indicator.dr-orange .dr-indicator-dot {
    background: var(--primary);
    box-shadow: 0 0 7px rgba(232,135,42,0.55);
    animation: pulse-ring-orange 3s ease-out infinite;
}
.dr-indicator.dr-muted .dr-indicator-dot {
    background: var(--muted);
    opacity: 0.40;
}

/* Main text block */
.dr-main {
    flex: 1;
    min-width: 0;
}
.dr-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
    margin-bottom: 0.22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-sub-row {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.dr-empresa {
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 500;
    transition: color 0.15s;
    text-decoration: none;
}
.dr-empresa:hover { text-decoration: underline; }
.dr-sep { font-size: 0.75rem; color: var(--muted); opacity: 0.45; }
.dr-tipo { font-size: 0.78rem; color: var(--muted); }
.dr-dates {
    font-size: 0.73rem;
    color: var(--muted-dim);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.dr-date-arrow { opacity: 0.45; }

/* KPI numbers */
.dr-kpis {
    display: flex;
    gap: 1.625rem;
    flex-shrink: 0;
    align-items: center;
    padding: 0 0.75rem;
    border-right: 1px solid rgba(50,72,130,0.22);
    border-left: 1px solid rgba(50,72,130,0.22);
}
.dr-kpi { text-align: center; min-width: 50px; }
.dr-kpi-val {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--fg);
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}
.dr-kpi-val.dr-kpi-index { color: var(--secondary); }
.dr-kpi-lbl {
    font-size: 0.575rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-top: 0.22rem;
    white-space: nowrap;
}

/* Right: badges + actions */
.dr-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
    min-width: 172px;
}
.dr-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}
.dr-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Chevron arrow hint */
.dr-arrow {
    font-size: 1.375rem;
    color: var(--muted);
    opacity: 0.20;
    transition: opacity 0.16s ease, transform 0.16s ease;
    flex-shrink: 0;
    line-height: 1;
    font-weight: 300;
    margin-left: 0.25rem;
}

/* Stagger delays */
.diag-record:nth-child(1)  { animation-delay: 0.03s; }
.diag-record:nth-child(2)  { animation-delay: 0.07s; }
.diag-record:nth-child(3)  { animation-delay: 0.11s; }
.diag-record:nth-child(4)  { animation-delay: 0.15s; }
.diag-record:nth-child(5)  { animation-delay: 0.19s; }
.diag-record:nth-child(6)  { animation-delay: 0.22s; }
.diag-record:nth-child(7)  { animation-delay: 0.25s; }
.diag-record:nth-child(8)  { animation-delay: 0.28s; }
.diag-record:nth-child(n+9){ animation-delay: 0.30s; }

@media (max-width: 1000px) {
    .dr-kpis { display: none; }
}
@media (max-width: 700px) {
    .diag-record-inner { flex-wrap: wrap; gap: 0.875rem; padding: 0.875rem 1rem; }
    .dr-main { flex: 1 0 calc(100% - 36px); }
    .dr-right { min-width: auto; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
    .dr-arrow { display: none; }
}

/* ========================================================================
   EMPRESA RECORD LIST
   ======================================================================== */

.empresa-record-list {
    display: flex;
    flex-direction: column;
}
.empresa-record {
    position: relative;
    border-bottom: 1px solid rgba(50,72,130,0.26);
    transition: background 0.15s ease;
    animation: fade-in-up 0.4s ease both;
    outline: none;
}
.empresa-record:last-child { border-bottom: none; }
.empresa-record[data-record-href] { cursor: pointer; }
.empresa-record[data-record-href]:hover { background: rgba(43,191,180,0.042); }
.empresa-record[data-record-href]:hover .er-arrow {
    opacity: 0.85;
    transform: translateX(4px);
}
.empresa-record[data-record-href]:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(43,191,180,0.55);
}
.empresa-record[data-record-href]:active { background: rgba(43,191,180,0.08); }
.empresa-record.er-inactive .er-main { opacity: 0.42; }
.empresa-record.er-inactive .er-stats { opacity: 0.42; }

.empresa-record-inner {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 0.9375rem 1.375rem;
    min-width: 0;
}
.er-avatar-col { flex-shrink: 0; }
.er-main { flex: 1; min-width: 0; }
.er-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.er-fantasia { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.18rem; }
.er-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.er-meta-item { font-size: 0.745rem; color: var(--muted-dim); }
.er-meta-sep { font-size: 0.7rem; color: var(--muted); opacity: 0.35; }

.er-stats {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
    padding: 0 0.875rem;
    border-left: 1px solid rgba(50,72,130,0.20);
    border-right: 1px solid rgba(50,72,130,0.20);
}
.er-stat { text-align: center; min-width: 46px; }
.er-stat-val {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.er-stat-val.teal { color: var(--secondary); }
.er-stat-lbl {
    font-size: 0.575rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    margin-top: 0.2rem;
    white-space: nowrap;
}

.er-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.42rem;
    flex-shrink: 0;
    min-width: 130px;
}
.er-actions { display: flex; gap: 0.35rem; }
.er-arrow {
    font-size: 1.375rem;
    color: var(--muted);
    opacity: 0.20;
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
    line-height: 1;
    font-weight: 300;
    margin-left: 0.2rem;
}

.empresa-record:nth-child(1) { animation-delay: 0.03s; }
.empresa-record:nth-child(2) { animation-delay: 0.07s; }
.empresa-record:nth-child(3) { animation-delay: 0.11s; }
.empresa-record:nth-child(4) { animation-delay: 0.15s; }
.empresa-record:nth-child(n+5){ animation-delay: 0.18s; }

@media (max-width: 900px) { .er-stats { display: none; } }
@media (max-width: 640px) {
    .empresa-record-inner { flex-wrap: wrap; padding: 0.875rem 1rem; }
    .er-main { flex: 1 0 calc(100% - 58px); }
    .er-right { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
    .er-arrow { display: none; }
}

/* ========================================================================
   HELP PAGE — Grid + Item improvements
   ======================================================================== */

.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.875rem;
}

/* Add entrance animation to help items */
.help-item {
    animation: fade-in-up 0.4s ease both;
    border-radius: var(--r-xl);
}

/* ========================================================================
   CONFIGURAÇÕES — Full-width panel layout
   ======================================================================== */
.config-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .config-layout { grid-template-columns: 1fr; }
}

/* ========================================================================
   ENHANCED EMPTY STATE
   ======================================================================== */
.empty-state {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: linear-gradient(145deg, var(--panel), var(--panel-soft));
    border: 1px dashed rgba(50,72,130,0.40);
}
.empty-state::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 260px;
    height: 100px;
    background: radial-gradient(ellipse, rgba(43,191,180,0.08), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
}

/* ========================================================================
   ENHANCED TABLE ROWS — stronger hover trail
   ======================================================================== */
.data-table tbody tr[data-row-href]:hover {
    background: rgba(43,191,180,0.065) !important;
    box-shadow: inset 3px 0 0 rgba(43,191,180,0.65) !important;
}

/* ========================================================================
   PREFERS-REDUCED-MOTION — Batch 18 additions
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    .diag-record,
    .empresa-record,
    .help-item  { animation: none !important; }
    .diag-record[data-record-href],
    .empresa-record[data-record-href] { transition: background 0.01s !important; }
    .dr-indicator-dot { animation: none !important; }
    .dr-arrow, .er-arrow { transition: none !important; }
}

/* ==========================================================================
   BATCH 17 — Clickable Rows · Table Polish · Internal Microinteractions
   ========================================================================== */

/* --- Clickable rows ------------------------------------------------------- */
.data-table tbody tr[data-row-href] {
    cursor: pointer;
    transition: background 0.13s ease, box-shadow 0.13s ease;
}
.data-table tbody tr[data-row-href]:hover {
    background: rgba(43, 191, 180, 0.075) !important;
    box-shadow: inset 3px 0 0 rgba(43, 191, 180, 0.65);
}
.data-table tbody tr[data-row-href]:focus-visible {
    outline: 2px solid rgba(43, 191, 180, 0.55);
    outline-offset: -2px;
    background: rgba(43, 191, 180, 0.06) !important;
}
.data-table tbody tr[data-row-href]:active {
    background: rgba(43, 191, 180, 0.11) !important;
    box-shadow: inset 3px 0 0 rgba(43, 191, 180, 0.85);
}
/* Inner interactive elements remain clickable in their own right */
.data-table tbody tr[data-row-href] a,
.data-table tbody tr[data-row-href] button,
.data-table tbody tr[data-row-href] input,
.data-table tbody tr[data-row-href] select,
.data-table tbody tr[data-row-href] form {
    position: relative;
    z-index: 1;
}

/* --- Table container: allow horizontal scroll on overflow ---------------- */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Action cell layout -------------------------------------------------- */
.td-actions {
    white-space: nowrap;
}
.td-actions .btn + .btn {
    margin-left: 0.3rem;
}

/* --- Charts row: auto-fit handles 2-col and 3-col naturally -------------- */
.charts-row {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* --- General card hover lift --------------------------------------------- */
.card {
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.card:hover {
    border-color: rgba(43, 191, 180, 0.20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 22px 56px -28px rgba(43, 191, 180, 0.14),
        0 16px 40px -24px rgba(0, 0, 0, 0.65);
}

/* --- Button transitions + press feedback --------------------------------- */
.btn {
    transition: background 0.18s, border-color 0.18s, color 0.18s,
                box-shadow 0.18s, transform 0.13s ease;
}
.btn:active {
    transform: translateY(1px) scale(0.985);
    transition-duration: 0.07s;
}
.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(232, 135, 42, 0.35), 0 0 22px -8px rgba(232, 135, 42, 0.45);
}
.btn-secondary:focus-visible,
.btn-outline:focus-visible {
    box-shadow: 0 0 0 3px rgba(43, 191, 180, 0.30), 0 0 16px -8px rgba(43, 191, 180, 0.35);
}

/* --- Enhanced form element focus ----------------------------------------- */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(232, 135, 42, 0.12),
                0 0 20px -10px rgba(232, 135, 42, 0.28);
}

/* --- Topbar bottom gradient accent line ----------------------------------- */
.topbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(43, 191, 180, 0.40) 35%,
        rgba(232, 135, 42, 0.28) 65%,
        transparent 100%
    );
    pointer-events: none;
}

/* --- Sidebar active item: stronger left glow ----------------------------- */
.sidebar-nav a.active {
    box-shadow:
        inset 3px 0 0 var(--primary),
        inset 0 0 0 1px rgba(232, 135, 42, 0.06),
        0 2px 14px -7px rgba(232, 135, 42, 0.22);
}

/* --- KPI icon cards: enhanced hover -------------------------------------- */
.kpi-icon-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.kpi-icon-card:hover {
    transform: translateY(-4px);
}

/* --- QR code wrap hover -------------------------------------------------- */
.qr-code-wrap {
    transition: box-shadow 0.28s ease, border-color 0.28s ease;
}
.qr-code-wrap:hover {
    border-color: rgba(43, 191, 180, 0.55);
    box-shadow: 0 0 28px -8px rgba(43, 191, 180, 0.38);
}

/* --- Badge subtle transition --------------------------------------------- */
.badge {
    display: inline-block;
    transition: transform 0.15s ease, filter 0.15s ease;
}

/* --- Placeholder card ambient glow --------------------------------------- */
.placeholder-card {
    position: relative;
    overflow: hidden;
}
.placeholder-card::before {
    content: '';
    position: absolute;
    left: 50%; bottom: 10%;
    transform: translateX(-50%);
    width: 200px; height: 80px;
    background: radial-gradient(ellipse, rgba(43, 191, 180, 0.07) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(14px);
}

/* --- Prefers-reduced-motion additions ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .data-table tbody tr[data-row-href] {
        transition: none !important;
    }
    .data-table tbody tr[data-row-href]:hover,
    .data-table tbody tr[data-row-href]:active {
        box-shadow: none;
    }
    .card {
        transition: border-color 0.22s ease, box-shadow 0.22s ease !important;
    }
    .card:hover { transform: none !important; }
    .btn { transition: background 0.18s, border-color 0.18s, color 0.18s !important; }
    .btn:active { transform: none !important; }
    .kpi-icon-card { transition: none !important; }
    .kpi-icon-card:hover { transform: none !important; }
    .qr-code-wrap { transition: none !important; }
}

/* ==========================================================================
   BATCH 19 — Deeper Command Center · Record Interactions · Design Completion
   ========================================================================== */

/* --- Teal color variant for dr-kpi-val ----------------------------------- */
.dr-kpi-val.teal { color: var(--secondary); }

/* --- section-label: branded dot + uppercase label ----------------------- */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.section-label::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 7px rgba(232, 135, 42, 0.70);
    flex-shrink: 0;
}

/* --- page-header: accent bar after heading ------------------------------ */
.page-header {
    position: relative;
}
.page-header::after {
    content: '';
    display: block;
    margin-top: 1rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(232, 135, 42, 0.60) 0%,
        rgba(43, 191, 180, 0.35) 45%,
        transparent 100%
    );
}

/* --- Record: animated left glow accent on hover/focus ------------------- */
.diag-record[data-record-href],
.empresa-record[data-record-href] {
    position: relative;
}
.diag-record[data-record-href]::before,
.empresa-record[data-record-href]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
    opacity: 0;
    transition: opacity 0.20s ease;
    pointer-events: none;
}
.diag-record[data-record-href]:hover::before,
.empresa-record[data-record-href]:hover::before {
    opacity: 1;
}
.diag-record[data-record-href]:focus-visible::before,
.empresa-record[data-record-href]:focus-visible::before {
    opacity: 0.65;
}

/* --- Active record: subtle teal ambient wash ---------------------------- */
.diag-record.dr-active {
    background: linear-gradient(
        90deg,
        rgba(43, 191, 180, 0.04) 0%,
        transparent 60%
    );
}

/* --- KPI card: bottom ambient glow line --------------------------------- */
.kpi-icon-card {
    position: relative;
}
.kpi-icon-card::after {
    content: '';
    position: absolute;
    inset-x: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.20), transparent);
    pointer-events: none;
}

/* --- Sidebar: right edge glow line (sidebar is already position:fixed) -- */
.sidebar::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(43, 191, 180, 0.30) 25%,
        rgba(43, 191, 180, 0.20) 75%,
        transparent 100%
    );
    pointer-events: none;
}

/* --- Topbar: stronger eco badge + title separator ----------------------- */
.topbar-eco-badge {
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
}
.topbar-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

/* --- Card hover: stronger ambient glow ---------------------------------- */
.card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(43, 191, 180, 0.09),
        0 24px 64px -32px rgba(43, 191, 180, 0.18),
        0 16px 40px -24px rgba(0, 0, 0, 0.72);
}

/* --- Data-table: deeper row hover --------------------------------------- */
.data-table tbody tr:hover {
    background: rgba(43, 191, 180, 0.055);
}
.data-table tbody tr[data-row-href]:hover {
    background: rgba(43, 191, 180, 0.075) !important;
    box-shadow: inset 3px 0 0 rgba(43, 191, 180, 0.65) !important;
}

/* --- Pulse-node: animated recording dot --------------------------------- */
@keyframes pulse-node-ring {
    0%   { box-shadow: 0 0 0 0   rgba(43, 191, 180, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(43, 191, 180, 0); }
    100% { box-shadow: 0 0 0 0   rgba(43, 191, 180, 0); }
}
.pulse-node {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
    animation: pulse-node-ring 2s ease-out infinite;
    flex-shrink: 0;
}

/* --- Filter form: stronger glass feel ----------------------------------- */
.card.filter-card,
form.card {
    background: linear-gradient(180deg,
        rgba(14, 20, 38, 0.72) 0%,
        rgba(10, 15, 28, 0.60) 100%);
    border-color: rgba(50, 72, 130, 0.45);
}

/* --- Stats header cards: better column layout --------------------------- */
.stats-header {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 0.875rem;
}

/* --- Empty state: richer presentation ----------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    text-align: center;
}
.empty-state p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Charts row: full visual separation --------------------------------- */
.charts-row {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* --- Pulse-ring keyframes for record indicators (kept here if missing) -- */
@keyframes pulse-ring-teal {
    0%   { box-shadow: 0 0 0 0   rgba(43, 191, 180, 0.55); }
    65%  { box-shadow: 0 0 0 6px rgba(43, 191, 180, 0); }
    100% { box-shadow: 0 0 0 0   rgba(43, 191, 180, 0); }
}
@keyframes pulse-ring-orange {
    0%   { box-shadow: 0 0 0 0   rgba(232, 135, 42, 0.50); }
    65%  { box-shadow: 0 0 0 6px rgba(232, 135, 42, 0); }
    100% { box-shadow: 0 0 0 0   rgba(232, 135, 42, 0); }
}

/* Prefers-reduced-motion for batch 19 additions */
@media (prefers-reduced-motion: reduce) {
    .diag-record[data-record-href]::before,
    .empresa-record[data-record-href]::before { transition: none !important; }
    .pulse-node { animation: none !important; }
    .page-header::after { display: none !important; }
}

/* ==========================================================================
   BATCH 20 — Premium Realism: Glass Depth, Carbon Surfaces, Microinteractions
   ========================================================================== */

/* ── Design token additions ─────────────────────────────────────────────── */
:root {
    --glass-blur:      blur(22px) saturate(150%);
    --glass-blur-deep: blur(32px) saturate(160%);
    --shadow-card:
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 0 0 1px rgba(43,191,180,0.03),
        0 1px 0 rgba(0,0,0,0.40) inset,
        0 32px 80px -40px rgba(0,0,0,0.85),
        0 0 0 1px rgba(200,220,255,0.04);
    --shadow-card-hover:
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 0 0 1px rgba(43,191,180,0.11),
        0 32px 80px -32px rgba(43,191,180,0.22),
        0 20px 50px -28px rgba(0,0,0,0.80);
    --r-2xs: 4px;
}

/* ── App main: richer ambient scan dot ──────────────────────────────────── */
.app-main::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, black 0%, transparent 100%);
}

/* ── Topbar: cinematic glass depth ──────────────────────────────────────── */
.topbar {
    background: linear-gradient(180deg,
        rgba(4,7,16,0.98) 0%,
        rgba(6,10,20,0.96) 100%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        transparent 0%,
        rgba(43,191,180,0.22) 30%,
        rgba(232,135,42,0.15) 70%,
        transparent 100%) 1;
    backdrop-filter: var(--glass-blur-deep);
    -webkit-backdrop-filter: var(--glass-blur-deep);
    box-shadow:
        0 1px 0 rgba(43,191,180,0.08),
        0 8px 32px -16px rgba(0,0,0,0.70),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Topbar scan-line accent */
.topbar::before {
    content: '';
    position: absolute;
    inset-x: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(43,191,180,0.55) 25%,
        rgba(232,135,42,0.35) 65%,
        transparent 100%);
    pointer-events: none;
}

/* ── Sidebar: carbon surface ──────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg,
        rgba(4,7,14,0.99) 0%,
        rgba(3,5,11,0.99) 60%,
        rgba(4,7,14,0.99) 100%);
    border-right: 1px solid rgba(43,191,180,0.08);
    box-shadow: 4px 0 40px -12px rgba(0,0,0,0.90);
}

/* Sidebar subtle scan line */
.sidebar::before {
    content: '';
    position: absolute;
    inset-y: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(232,135,42,0.25) 40%,
        rgba(232,135,42,0.15) 70%,
        transparent 100%);
    pointer-events: none;
}

/* ── Cards: multi-layer glass carbon panels ──────────────────────────────── */
.card {
    background: linear-gradient(160deg,
        rgba(18,26,50,0.90) 0%,
        rgba(13,19,38,0.85) 55%,
        rgba(10,15,28,0.88) 100%);
    border: 1px solid rgba(50,72,130,0.55);
    border-radius: var(--r-xl);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

/* Top highlight line */
.card::before {
    inset-x: 0;
    background: linear-gradient(90deg,
        rgba(43,191,180,0.18) 0%,
        rgba(255,255,255,0.07) 50%,
        rgba(232,135,42,0.10) 100%);
}

/* Card hover lift + glow */
.card:hover {
    border-color: rgba(43,191,180,0.28);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Stronger card-header separation */
.card-header {
    background: linear-gradient(180deg,
        rgba(5,8,17,0.65) 0%,
        rgba(8,12,24,0.45) 100%);
    border-bottom: 1px solid rgba(50,72,130,0.40);
}

/* Card-header subtle glow on the top edge */
.card-header::before {
    content: '';
    position: absolute;
    inset-x: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(43,191,180,0.30), transparent);
    pointer-events: none;
}

/* ── KPI Icon cards: glass depth ─────────────────────────────────────────── */
.kpi-icon-card {
    background: linear-gradient(155deg,
        rgba(18,26,50,0.92) 0%,
        rgba(12,18,36,0.88) 100%);
    border: 1px solid rgba(50,72,130,0.50);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 20px 50px -28px rgba(0,0,0,0.80);
    border-radius: var(--r-lg);
}
.kpi-icon-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 0 1px rgba(43,191,180,0.12),
        0 28px 60px -28px rgba(43,191,180,0.24),
        0 20px 50px -28px rgba(0,0,0,0.80);
}

/* ── Stat header cards ───────────────────────────────────────────────────── */
.stat-header-card {
    background: linear-gradient(155deg,
        rgba(16,24,46,0.90) 0%,
        rgba(11,16,32,0.86) 100%);
    border: 1px solid rgba(50,72,130,0.48);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 16px 40px -24px rgba(0,0,0,0.70);
}
.stat-header-card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 0 0 1px rgba(43,191,180,0.10),
        0 24px 50px -24px rgba(43,191,180,0.20);
}

/* ── Form inputs: teal focus + better depth ──────────────────────────────── */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="tel"]:focus,
.form-input:focus {
    outline: none;
    border-color: rgba(43,191,180,0.70);
    box-shadow:
        0 0 0 3px rgba(43,191,180,0.13),
        inset 0 1px 3px rgba(0,0,0,0.25);
    background: rgba(10,16,34,0.85);
}
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(43,191,180,0.70);
    box-shadow:
        0 0 0 3px rgba(43,191,180,0.13),
        inset 0 1px 3px rgba(0,0,0,0.25);
    background: rgba(10,16,34,0.85);
}

/* Input transition */
.form-group input,
.form-group select,
.form-group textarea,
.form-input {
    transition: border-color 0.20s ease, box-shadow 0.20s ease, background 0.20s ease;
}

/* ── Badges: status glow ─────────────────────────────────────────────────── */
.badge {
    transition: box-shadow 0.20s ease;
}
.badge-success {
    color: var(--secondary);
    background: rgba(43,191,180,0.11);
    border: 1px solid rgba(43,191,180,0.32);
}
.badge-success:where(:not(:disabled)):hover,
span.badge-success {
    box-shadow: 0 0 10px -3px rgba(43,191,180,0.45);
}
.badge-warning,
.badge-ativo {
    color: var(--primary);
    background: rgba(232,135,42,0.11);
    border: 1px solid rgba(232,135,42,0.30);
}
.badge-danger,
.badge-encerrado {
    color: var(--danger);
    background: rgba(224,90,71,0.11);
    border: 1px solid rgba(224,90,71,0.30);
}
.badge-info {
    color: rgba(180,200,255,0.90);
    background: rgba(100,130,255,0.09);
    border: 1px solid rgba(100,130,255,0.22);
}

/* ── Buttons: premium hover lift ─────────────────────────────────────────── */
.btn {
    transition: background 0.20s ease, border-color 0.20s ease,
                box-shadow 0.20s ease, transform 0.20s ease;
    transform: translateZ(0);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }

.btn-primary:hover {
    box-shadow:
        0 0 28px -6px rgba(232,135,42,0.65),
        0 4px 14px -6px rgba(0,0,0,0.50);
}
.btn-secondary:hover {
    box-shadow:
        0 0 22px -6px rgba(43,191,180,0.50),
        0 4px 14px -6px rgba(0,0,0,0.40);
}

/* ── Page header: stronger title presence ───────────────────────────────── */
.page-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-shadow: 0 0 40px rgba(43,191,180,0.07);
}

/* ── Alert banners: better glass ─────────────────────────────────────────── */
.alert {
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.alert-success {
    background: rgba(43,191,180,0.10);
    border: 1px solid rgba(43,191,180,0.32);
    box-shadow: 0 0 24px -12px rgba(43,191,180,0.30);
}
.alert-error {
    background: rgba(224,90,71,0.10);
    border: 1px solid rgba(224,90,71,0.32);
    box-shadow: 0 0 24px -12px rgba(224,90,71,0.30);
}
.alert-info {
    background: rgba(100,130,255,0.09);
    border: 1px solid rgba(100,130,255,0.24);
}

/* ── Page body: subtle scanline on blank areas ──────────────────────────── */
.page-body {
    padding: 2rem 2.5rem 3rem;
}

/* ── Topbar avatar: status ring ─────────────────────────────────────────── */
.topbar-avatar {
    box-shadow:
        0 0 0 2px rgba(43,191,180,0.35),
        0 0 16px -6px rgba(43,191,180,0.50);
    transition: box-shadow 0.22s ease;
}
.topbar-avatar:hover {
    box-shadow:
        0 0 0 2px rgba(43,191,180,0.65),
        0 0 24px -6px rgba(43,191,180,0.65);
}

/* ── Sidebar nav: wider active accent bar ────────────────────────────────── */
.sidebar-nav a.active::before {
    width: 3px;
    box-shadow: 0 0 8px rgba(232,135,42,0.60);
}

/* ── Placeholder / empty state: more premium ─────────────────────────────── */
.placeholder-card {
    background: linear-gradient(160deg,
        rgba(16,24,46,0.88) 0%,
        rgba(10,15,28,0.82) 100%);
    border: 1px dashed rgba(50,72,130,0.40);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 24px 60px -32px rgba(0,0,0,0.70);
}

/* ── Diag record list container: glass wrap ──────────────────────────────── */
.diag-record-list {
    background: transparent;
}
.diag-record-inner {
    padding: 1.125rem 1.5rem;
}

/* ── Form card: deeper glass ─────────────────────────────────────────────── */
.form-card {
    background: linear-gradient(160deg,
        rgba(16,24,48,0.92) 0%,
        rgba(11,16,34,0.88) 100%);
    border: 1px solid rgba(50,72,130,0.50);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
}

/* ── Chart containers: embedded system panel ─────────────────────────────── */
.charts-row .card {
    background: linear-gradient(160deg,
        rgba(13,20,40,0.95) 0%,
        rgba(9,14,28,0.92) 100%);
}
.chart-container,
.chart-section {
    background: rgba(5,8,18,0.55);
    border-radius: var(--r-md);
    border: 1px solid rgba(50,72,130,0.30);
}

/* ── Stat card: premium counter typography ──────────────────────────────── */
.stat-card {
    background: linear-gradient(155deg,
        rgba(18,26,50,0.94) 0%,
        rgba(12,18,36,0.90) 100%);
    border: 1px solid rgba(50,72,130,0.52);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 24px 60px -32px rgba(0,0,0,0.80);
}
.stat-card .stat-value {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
}

/* ── Record arrow: spring animation ─────────────────────────────────────── */
.dr-arrow {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}
.diag-record[data-record-href]:hover .dr-arrow,
.empresa-record[data-record-href]:hover .dr-arrow {
    transform: translateX(5px);
    opacity: 1;
}

/* ── Reduced-motion overrides ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .card, .kpi-icon-card, .stat-header-card, .stat-card { transition: none !important; }
    .card:hover, .kpi-icon-card:hover,
    .stat-header-card:hover, .stat-card:hover { transform: none !important; }
    .btn:hover, .btn:active { transform: none !important; }
    .dr-arrow { transition: none !important; }
    .app-main::after { display: none !important; }
    .topbar::before { display: none !important; }
    .topbar-avatar { transition: none !important; }
    .badge { transition: none !important; }
    .form-group input, .form-group select,
    .form-group textarea, .form-input { transition: none !important; }
}

/* ==========================================================================
   BATCH 21 — Central Command Center Visual System
   ========================================================================== */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.central-command {
    position: relative;
    overflow: hidden;
    margin: -0.5rem -0.5rem 0;
    padding: 0 0.5rem 1.5rem;
}

/* Radial atmosphere glow behind the center globe */
.cc-aura {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(43, 191, 180, 0.10) 0%,
        rgba(232, 135, 42, 0.05) 45%,
        transparent 72%);
    filter: blur(48px);
    pointer-events: none;
    z-index: 0;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.cc-header {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 1.5rem 1rem 0.5rem;
    animation: fade-in-up 0.45s ease both;
}
.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.875rem;
    border-radius: 999px;
    border: 1px solid rgba(43, 191, 180, 0.28);
    background: rgba(43, 191, 180, 0.07);
    font-size: 0.595rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--secondary);
    margin-bottom: 0.875rem;
}
.cc-badge-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 7px var(--secondary);
    animation: telemetry-blink 2.4s ease-in-out infinite;
}
.cc-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
    line-height: 1.2;
    text-shadow: 0 0 40px rgba(43, 191, 180, 0.08);
}
.cc-subtitle { font-size: 0.875rem; color: var(--muted); }

/* ── 3-column layout ─────────────────────────────────────────────────────── */
.cc-layout {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    gap: 1.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
    margin: 1rem 0;
}
.cc-col-left, .cc-col-right {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

/* ── Globe center column ─────────────────────────────────────────────────── */
.cc-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: visible;
}
.cc-globe-wrap {
    position: relative;
    width: 168px;
    height: 168px;
    flex-shrink: 0;
    margin: 90px auto;
}

/* Orbit rings — extend well beyond globe-wrap */
.cc-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cc-orbit-1 {
    inset: -24px;
    border: 1px solid rgba(43, 191, 180, 0.28);
    animation: drift-orbit 24s linear infinite;
}
.cc-orbit-1::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
}
.cc-orbit-2 {
    inset: -56px;
    border: 1.5px solid rgba(232, 135, 42, 0.18);
    animation: drift-orbit 42s linear infinite reverse;
}
.cc-orbit-2::after {
    content: '';
    position: absolute;
    bottom: 14%; right: 0;
    transform: translate(50%, 50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 9px var(--primary);
}
.cc-orbit-3 {
    inset: -90px;
    border: 1px dashed rgba(43, 191, 180, 0.08);
    animation: drift-orbit 66s linear infinite;
}

/* Sphere */
.cc-sphere {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 34%,
        rgba(43, 191, 180, 0.32),
        rgba(9, 13, 24, 0.97));
    border: 2px solid rgba(232, 135, 42, 0.50);
    box-shadow:
        0 0 72px -12px rgba(43, 191, 180, 0.70),
        0 0 36px -20px rgba(232, 135, 42, 0.42),
        inset 0 0 44px rgba(43, 191, 180, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: pulse-glow 4.2s ease-in-out infinite;
}
/* Scan line sweep */
.cc-sphere::before {
    content: '';
    position: absolute;
    inset-x: 0;
    height: 1px;
    background: rgba(43, 191, 180, 0.22);
    top: 50%;
    animation: scan-sweep 6s ease-in-out infinite 1.5s;
}
/* Grid mesh overlay */
.cc-sphere::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        linear-gradient(0deg,   rgba(43, 191, 180, 0.07) 1px, transparent 1px),
        linear-gradient(90deg,  rgba(43, 191, 180, 0.07) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.60;
}
.cc-sphere-logo {
    position: relative;
    z-index: 1;
    width: 92px; height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(43, 191, 180, 0.55));
}
.cc-sphere-text {
    position: relative;
    z-index: 1;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -1.5px;
    line-height: 1;
}
.cc-sphere-text span { color: var(--primary); }

.cc-tagline {
    font-size: 0.565rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    color: var(--secondary);
    text-align: center;
    opacity: 0.80;
}
.cc-quote {
    font-size: 0.745rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.65;
    font-style: italic;
    max-width: 220px;
    opacity: 0.75;
}

/* ── Module cards ─────────────────────────────────────────────────────────── */
.cc-module {
    position: relative;
    background: linear-gradient(145deg,
        rgba(15, 22, 42, 0.92) 0%,
        rgba(11, 16, 32, 0.88) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.375rem 1.5rem;
    overflow: hidden;
    transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
    animation: fade-in-up 0.5s ease both;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 44px -28px rgba(0, 0, 0, 0.75);
}
/* Top accent line */
.cc-module::before {
    content: '';
    position: absolute;
    inset-x: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 191, 180, 0.38), transparent);
    pointer-events: none;
}
/* Active phase — orange emphasis */
.cc-active {
    border-color: rgba(232, 135, 42, 0.30);
    background: linear-gradient(145deg,
        rgba(18, 26, 50, 0.95) 0%,
        rgba(14, 20, 38, 0.92) 100%);
}
.cc-active::before {
    background: linear-gradient(90deg, transparent, rgba(232, 135, 42, 0.68), transparent);
}
/* Active corner bloom */
.cc-active::after {
    content: '';
    position: absolute;
    top: -28px; right: -28px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: rgba(232, 135, 42, 0.07);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}
.cc-active:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 135, 42, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(232, 135, 42, 0.10),
        0 22px 56px -22px rgba(232, 135, 42, 0.40);
}
/* Future phase — subdued */
.cc-future {
    opacity: 0.42;
    filter: grayscale(30%);
    cursor: default;
}
.cc-future:hover {
    opacity: 0.56;
    filter: grayscale(18%);
}

/* Module sub-elements */
.cc-mod-phase {
    font-size: 0.565rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
}
.cc-active .cc-mod-phase { color: var(--primary); }
.cc-mod-phase-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: telemetry-blink 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
.cc-future .cc-mod-phase-dot { animation: none; opacity: 0.50; }

.cc-mod-icon-wrap {
    width: 46px; height: 46px;
    border-radius: var(--r-md);
    background: rgba(43, 191, 180, 0.09);
    border: 1px solid rgba(43, 191, 180, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.875rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.24s ease;
}
.cc-active .cc-mod-icon-wrap {
    background: rgba(232, 135, 42, 0.10);
    border-color: rgba(232, 135, 42, 0.30);
    box-shadow: 0 0 18px -6px rgba(232, 135, 42, 0.38);
}
.cc-active:hover .cc-mod-icon-wrap {
    box-shadow: 0 0 28px -5px rgba(232, 135, 42, 0.55);
}
.cc-mod-svg {
    width: 21px; height: 21px;
    stroke: var(--secondary);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cc-active .cc-mod-svg { stroke: var(--primary); }

.cc-mod-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.38rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}
.cc-mod-desc {
    font-size: 0.79rem;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 0.875rem;
    position: relative;
    z-index: 1;
}
.cc-mod-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* ── Status divider ──────────────────────────────────────────────────────── */
.cc-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1.125rem;
    position: relative;
    z-index: 2;
}
.cc-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(43, 191, 180, 0.28), transparent);
}
.cc-divider-text {
    font-size: 0.595rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--secondary);
    white-space: nowrap;
}

/* ── Stats row ───────────────────────────────────────────────────────────── */
.cc-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    position: relative;
    z-index: 2;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .cc-layout { grid-template-columns: 1fr 240px 1fr; gap: 1.125rem; }
    .cc-globe-wrap { width: 140px; height: 140px; margin: 76px auto; }
    .cc-sphere-logo { width: 76px; height: 76px; }
    .cc-orbit-1 { inset: -20px; }
    .cc-orbit-2 { inset: -46px; }
    .cc-orbit-3 { inset: -74px; }
}
@media (max-width: 860px) {
    .cc-layout { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .cc-center  { display: none; }
}
@media (max-width: 580px) {
    .cc-layout     { grid-template-columns: 1fr; }
    .cc-stats-row  { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cc-orbit-1, .cc-orbit-2, .cc-orbit-3 { animation: none !important; }
    .cc-sphere { animation: none !important; }
    .cc-sphere::before { animation: none !important; }
    .cc-badge-dot { animation: none !important; }
    .cc-mod-phase-dot { animation: none !important; }
    .cc-module { animation: none !important; }
    .cc-active:hover, .cc-future:hover { transform: none !important; }
}

/* ==========================================================================
   BATCH 22 — Command-Center DNA: internal pages visual upgrade
   Applies the cinematic, teal/orange, glass/carbon language from central
   to all internal pages via shared layout classes.
   ========================================================================== */

/* ── Body: deeper black foundation ──────────────────────────────────────── */
body {
    background-color: #060a14;
    background-image:
        radial-gradient(circle at 18% 0%,   rgba(43, 191, 180, 0.11) 0%, transparent 34%),
        radial-gradient(circle at 84% 12%,  rgba(232, 135, 42, 0.09) 0%, transparent 28%),
        radial-gradient(circle at 52% 100%, rgba(43, 191, 180, 0.06) 0%, transparent 38%),
        linear-gradient(180deg, #040810, #060a14 35%, #040810 100%);
}

/* Tighter, slightly more visible grid on body */
body::before {
    background-image:
        linear-gradient(to right, rgba(43, 191, 180, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(43, 191, 180, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.70;
}

/* ── Sidebar: deeper atmosphere + stronger right glow ────────────────────── */
.sidebar {
    background:
        linear-gradient(180deg, rgba(3, 6, 12, 0.98), rgba(2, 4, 9, 0.99));
    border-right: 1px solid rgba(43, 191, 180, 0.08);
    box-shadow:
        4px 0 32px -8px rgba(0, 0, 0, 0.70),
        inset -1px 0 0 rgba(43, 191, 180, 0.06);
}
.sidebar::after {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(43, 191, 180, 0.42) 35%,
        rgba(43, 191, 180, 0.42) 65%,
        transparent 100%);
}

/* Sidebar nav links: stronger hover + active glow */
.sidebar-nav a:hover {
    background: rgba(43, 191, 180, 0.055);
    color: rgba(226, 234, 245, 0.90);
    border-left-color: rgba(43, 191, 180, 0.30);
}
.sidebar-nav a.active {
    background: linear-gradient(90deg,
        rgba(232, 135, 42, 0.14) 0%,
        rgba(232, 135, 42, 0.04) 100%);
    color: #f0f4fa;
    font-weight: 600;
    border-left-color: var(--primary);
    box-shadow: inset 0 0 20px -8px rgba(232, 135, 42, 0.12);
}
.sidebar-nav a.active .nav-icon {
    background: rgba(232, 135, 42, 0.16);
    border-color: rgba(232, 135, 42, 0.45);
    color: var(--primary);
    box-shadow: 0 0 10px -2px rgba(232, 135, 42, 0.30);
}

/* ── Topbar: deeper glass, stronger atmosphere ───────────────────────────── */
.topbar {
    background:
        linear-gradient(180deg, rgba(4, 8, 16, 0.96), rgba(3, 6, 12, 0.98));
    border-bottom: 1px solid rgba(43, 191, 180, 0.10);
    box-shadow: 0 1px 24px -8px rgba(0, 0, 0, 0.70);
}
.topbar::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(232, 135, 42, 0.55) 35%,
        rgba(43, 191, 180, 0.55) 65%,
        transparent 100%);
}

/* ── App main: ambient background atmosphere ─────────────────────────────── */
.app-main {
    background:
        radial-gradient(circle at 65% 20%, rgba(43, 191, 180, 0.045) 0%, transparent 42%),
        radial-gradient(circle at 30% 75%, rgba(232, 135, 42, 0.030) 0%, transparent 38%);
}

/* ── Cards: more vivid borders, premium glass ────────────────────────────── */
.card {
    background: linear-gradient(155deg,
        rgba(10, 16, 30, 0.96) 0%,
        rgba(7, 11, 22, 0.93) 100%);
    border: 1px solid rgba(43, 191, 180, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(43, 191, 180, 0.03),
        0 24px 64px -32px rgba(0, 0, 0, 0.85);
}
.card:hover {
    border-color: rgba(43, 191, 180, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(43, 191, 180, 0.06),
        0 24px 64px -28px rgba(43, 191, 180, 0.18);
}
.card::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(43, 191, 180, 0.45) 50%,
        transparent 100%);
}

/* ── Stat cards: more vivid top accents ─────────────────────────────────── */
.stat-card {
    background: linear-gradient(155deg,
        rgba(10, 16, 32, 0.96) 0%,
        rgba(7, 11, 22, 0.93) 100%);
    border: 1px solid rgba(43, 191, 180, 0.16);
}
.stat-card:hover {
    border-color: rgba(43, 191, 180, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 1px rgba(43, 191, 180, 0.08),
        0 28px 60px -24px rgba(43, 191, 180, 0.28);
}
.stat-card.accent-orange { border-color: rgba(232, 135, 42, 0.28); }
.stat-card.accent-orange:hover {
    border-color: rgba(232, 135, 42, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(232, 135, 42, 0.08),
        0 24px 56px -24px rgba(232, 135, 42, 0.30);
}

/* ── KPI icon cards: crisper glow ────────────────────────────────────────── */
.kpi-icon-card {
    background: linear-gradient(150deg,
        rgba(10, 16, 30, 0.97) 0%,
        rgba(7, 11, 22, 0.94) 100%);
    border: 1px solid rgba(43, 191, 180, 0.14);
}
.kpi-icon-card:hover {
    border-color: rgba(43, 191, 180, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 20px 52px -24px rgba(43, 191, 180, 0.24);
}

/* ── Stat-header cards ──────────────────────────────────────────────────── */
.stat-header-card {
    background: linear-gradient(155deg,
        rgba(10, 16, 30, 0.97) 0%,
        rgba(7, 11, 22, 0.94) 100%);
    border: 1px solid rgba(43, 191, 180, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 48px -24px rgba(0, 0, 0, 0.80);
}
.stat-header-card.accent-orange { border-color: rgba(232, 135, 42, 0.28); }

/* ── Tables: deeper background, stronger hover glow ──────────────────────── */
.table-wrap {
    background: linear-gradient(155deg,
        rgba(8, 13, 26, 0.97) 0%,
        rgba(6, 9, 18, 0.95) 100%);
    border: 1px solid rgba(43, 191, 180, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 64px -32px rgba(0, 0, 0, 0.85);
}
.data-table th {
    background: rgba(4, 8, 16, 0.85);
    border-bottom: 1px solid rgba(43, 191, 180, 0.18);
    color: rgba(226, 234, 245, 0.65);
    letter-spacing: 0.06em;
}
.data-table td { border-bottom: 1px solid rgba(43, 191, 180, 0.07); }
.data-table tbody tr:hover td {
    background: rgba(43, 191, 180, 0.04);
}

/* ── Diagnostic record cards ──────────────────────────────────────────────── */
.diag-record {
    background: linear-gradient(145deg,
        rgba(9, 14, 28, 0.97) 0%,
        rgba(6, 10, 20, 0.95) 100%);
    border: 1px solid rgba(43, 191, 180, 0.13);
    transition: border-color 0.20s ease, box-shadow 0.20s ease, background 0.20s ease;
}
.diag-record:hover,
.diag-record[data-record-href]:hover {
    border-color: rgba(43, 191, 180, 0.28);
    background: linear-gradient(145deg,
        rgba(11, 18, 34, 0.98) 0%,
        rgba(8, 13, 26, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(43, 191, 180, 0.06),
        0 20px 52px -24px rgba(43, 191, 180, 0.22);
}

/* ── Empresa record cards ─────────────────────────────────────────────────── */
.empresa-record {
    background: linear-gradient(145deg,
        rgba(9, 14, 28, 0.97) 0%,
        rgba(6, 10, 20, 0.95) 100%);
    border: 1px solid rgba(43, 191, 180, 0.13);
    transition: border-color 0.20s ease, box-shadow 0.20s ease;
}
.empresa-record:hover,
.empresa-record[data-record-href]:hover {
    border-color: rgba(43, 191, 180, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(43, 191, 180, 0.06),
        0 20px 52px -24px rgba(43, 191, 180, 0.22);
}

/* ── Form cards ──────────────────────────────────────────────────────────── */
.form-card {
    background: linear-gradient(155deg,
        rgba(9, 14, 28, 0.98) 0%,
        rgba(6, 10, 20, 0.96) 100%);
    border: 1px solid rgba(43, 191, 180, 0.15);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
    box-shadow: 0 4px 20px -8px rgba(232, 135, 42, 0.45);
}
.btn-primary:hover {
    box-shadow:
        0 6px 26px -6px rgba(232, 135, 42, 0.65),
        0 0 0 1px rgba(232, 135, 42, 0.20);
}
.btn-secondary {
    border-color: rgba(43, 191, 180, 0.36);
    color: var(--secondary);
}
.btn-secondary:hover {
    background: rgba(43, 191, 180, 0.10);
    border-color: rgba(43, 191, 180, 0.55);
    box-shadow: 0 4px 20px -8px rgba(43, 191, 180, 0.35);
}

/* ── Form inputs: sharper focus state ────────────────────────────────────── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus {
    border-color: rgba(43, 191, 180, 0.55);
    background: rgba(4, 8, 16, 0.92);
    box-shadow:
        0 0 0 3px rgba(43, 191, 180, 0.10),
        0 0 20px -8px rgba(43, 191, 180, 0.25);
    outline: none;
}

/* ── Badge em-breve ──────────────────────────────────────────────────────── */
.badge-em-breve {
    background: rgba(43, 191, 180, 0.10);
    border: 1px solid rgba(43, 191, 180, 0.30);
    color: var(--secondary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    text-transform: uppercase;
}

/* ── Pulse node: stronger glow ──────────────────────────────────────────── */
.pulse-node {
    box-shadow: 0 0 0 0 rgba(43, 191, 180, 0.50);
    animation: pulse-node-ring 2.8s ease-in-out infinite;
}
@keyframes pulse-node-ring {
    0%   { box-shadow: 0 0 0 0 rgba(43, 191, 180, 0.50); }
    60%  { box-shadow: 0 0 0 7px rgba(43, 191, 180, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 191, 180, 0); }
}

/* ── Page-header title ───────────────────────────────────────────────────── */
.page-header h2 {
    text-shadow: 0 0 48px rgba(43, 191, 180, 0.10);
    letter-spacing: -0.03em;
}

/* ── Section labels ──────────────────────────────────────────────────────── */
.section-label {
    color: rgba(43, 191, 180, 0.90);
    letter-spacing: 0.22em;
}

/* ── Alert banners ───────────────────────────────────────────────────────── */
.alert-success {
    background: rgba(43, 191, 180, 0.08);
    border: 1px solid rgba(43, 191, 180, 0.30);
    box-shadow: 0 0 28px -12px rgba(43, 191, 180, 0.28);
}
.alert-error {
    background: rgba(224, 90, 71, 0.08);
    border: 1px solid rgba(224, 90, 71, 0.28);
    box-shadow: 0 0 28px -12px rgba(224, 90, 71, 0.28);
}

/* ── Chart containers ────────────────────────────────────────────────────── */
.chart-container,
.chart-section {
    background: rgba(3, 6, 14, 0.70);
    border: 1px solid rgba(43, 191, 180, 0.12);
    border-radius: var(--r-md);
}
.charts-row .card {
    background: linear-gradient(155deg,
        rgba(8, 13, 26, 0.98) 0%,
        rgba(5, 9, 18, 0.96) 100%);
}

/* ── Placeholder empty state ─────────────────────────────────────────────── */
.placeholder-card {
    background: linear-gradient(155deg,
        rgba(9, 14, 28, 0.95) 0%,
        rgba(6, 10, 20, 0.90) 100%);
    border: 1px dashed rgba(43, 191, 180, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Topbar avatar ───────────────────────────────────────────────────────── */
.topbar-avatar {
    background: linear-gradient(135deg, rgba(232, 135, 42, 0.22), rgba(43, 191, 180, 0.14));
    border: 1.5px solid rgba(43, 191, 180, 0.48);
    box-shadow:
        0 0 0 1px rgba(43, 191, 180, 0.12),
        0 0 20px -6px rgba(43, 191, 180, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.topbar-avatar:hover {
    box-shadow:
        0 0 0 2px rgba(43, 191, 180, 0.55),
        0 0 28px -4px rgba(43, 191, 180, 0.60);
}

/* ── Eco badge ───────────────────────────────────────────────────────────── */
.topbar-eco-badge {
    border-color: rgba(43, 191, 180, 0.34);
    background: rgba(43, 191, 180, 0.07);
}
.topbar-eco-dot {
    box-shadow: 0 0 8px rgba(43, 191, 180, 0.75);
}

/* ── Dash cards ──────────────────────────────────────────────────────────── */
.dash-card {
    background: linear-gradient(155deg,
        rgba(9, 14, 28, 0.97) 0%,
        rgba(6, 10, 20, 0.95) 100%);
    border: 1px solid rgba(43, 191, 180, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 20px 56px -28px rgba(0, 0, 0, 0.85);
}
.dash-card:hover {
    border-color: rgba(43, 191, 180, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(43, 191, 180, 0.06),
        0 24px 56px -22px rgba(43, 191, 180, 0.20);
}

/* ── Sidebar logo ────────────────────────────────────────────────────────── */
.sidebar-logo-glow {
    background: radial-gradient(circle,
        rgba(232, 135, 42, 0.32) 0%,
        rgba(43, 191, 180, 0.16) 50%,
        transparent 72%);
}
.sidebar-logo-img {
    filter:
        drop-shadow(0 0 14px rgba(232, 135, 42, 0.32))
        drop-shadow(0 0 28px rgba(0, 0, 0, 0.60));
}

/* ── User chip ────────────────────────────────────────────────────────────── */
.user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(226, 234, 245, 0.94);
    display: block;
}
.user-role {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(43, 191, 180, 0.80);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-inner {
    background: linear-gradient(90deg, var(--secondary), rgba(232, 135, 42, 0.70));
    box-shadow: 0 0 10px -2px rgba(43, 191, 180, 0.40);
    transition: width 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Plan action items ───────────────────────────────────────────────────── */
.plan-item {
    background: linear-gradient(145deg,
        rgba(9, 14, 28, 0.97) 0%,
        rgba(6, 10, 20, 0.95) 100%);
    border: 1px solid rgba(43, 191, 180, 0.12);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.plan-item:hover {
    border-color: rgba(43, 191, 180, 0.25);
    box-shadow: 0 8px 28px -14px rgba(43, 191, 180, 0.22);
}

/* ── Sidebar status ──────────────────────────────────────────────────────── */
.sidebar-status {
    border: 1px solid rgba(43, 191, 180, 0.12);
    background: rgba(43, 191, 180, 0.04);
}
.sidebar-status-label { color: rgba(226, 234, 245, 0.88); }

/* ── Topbar menu btn ─────────────────────────────────────────────────────── */
.topbar-menu-btn:hover {
    background: rgba(43, 191, 180, 0.08);
    color: var(--secondary);
}

/* ── Reduced-motion overrides for Batch 22 ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pulse-node { animation: none !important; box-shadow: 0 0 0 1px rgba(43,191,180,0.50) !important; }
    .progress-inner { transition: none !important; }
    .diag-record,
    .empresa-record,
    .plan-item { transition: none !important; }
}
/* BATCH 22 END */

/* ==========================================================================
   4IS VISUAL DNA — AMBIENT MOTION v3 (Batch 23)
   Breathing animations, glow hover states, premium micro-interactions.
   All motion guarded by prefers-reduced-motion.
   ========================================================================== */

/* ── Topbar accent line — breathing shimmer ──────────────────────────────── */
@keyframes topbar-accent-shimmer {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1.00; }
}
.topbar::after {
    animation: topbar-accent-shimmer 7s ease-in-out infinite;
}

/* ── Sidebar active item — breathing glow ────────────────────────────────── */
@keyframes nav-active-breathe {
    0%, 100% {
        box-shadow:
            inset 3px 0 0 var(--primary),
            inset 0 0 0 1px rgba(232, 135, 42, 0.06),
            0 2px 14px -7px rgba(232, 135, 42, 0.22);
    }
    50% {
        box-shadow:
            inset 3px 0 0 var(--primary),
            inset 0 0 20px -4px rgba(232, 135, 42, 0.14),
            0 2px 28px -5px rgba(232, 135, 42, 0.42);
    }
}
.sidebar-nav a.active {
    animation: nav-active-breathe 5.5s ease-in-out infinite;
}

/* ── Sidebar status dot — gentle ripple ─────────────────────────────────── */
@keyframes status-dot-ripple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(43, 191, 180, 0); }
    50%       { box-shadow: 0 0 0 4px rgba(43, 191, 180, 0.10); }
}
.sidebar-status-dot {
    animation: status-dot-ripple 4s ease-in-out infinite;
}

/* ── Buttons — lift + stronger glow on hover ─────────────────────────────── */
.btn {
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.20s ease,
        transform 0.14s ease;
}
.btn:hover:not(:disabled):not([disabled]) {
    transform: translateY(-1px);
}
.btn:active:not(:disabled):not([disabled]) {
    transform: translateY(0);
}
.btn-primary:hover {
    box-shadow:
        0 0 36px -6px rgba(232, 135, 42, 0.72),
        0 4px 16px -6px rgba(0, 0, 0, 0.50);
}
.btn-secondary:hover {
    box-shadow:
        0 0 28px -8px rgba(43, 191, 180, 0.52),
        0 4px 14px -6px rgba(0, 0, 0, 0.40);
}

/* ── Cards — teal depth glow + lift on hover ─────────────────────────────── */
.card:hover {
    transform: translateY(-1px);
    border-color: rgba(43, 191, 180, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 0 1px rgba(43, 191, 180, 0.06),
        0 0 32px -8px rgba(43, 191, 180, 0.20),
        0 24px 60px -28px rgba(0, 0, 0, 0.70);
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 28px -6px rgba(43, 191, 180, 0.26),
        0 24px 60px -28px rgba(43, 191, 180, 0.24);
}

/* ── Data table rows — teal left-border reveal on hover ─────────────────── */
.data-table tbody tr:hover {
    background: rgba(43, 191, 180, 0.05);
    box-shadow: inset 2px 0 0 rgba(43, 191, 180, 0.44);
}

/* ── Diag records — stronger teal glow + left accent ────────────────────── */
.diag-record[data-record-href]:hover {
    border-color: rgba(43, 191, 180, 0.30);
    box-shadow:
        inset 2px 0 0 rgba(43, 191, 180, 0.56),
        0 8px 32px -14px rgba(43, 191, 180, 0.22),
        0 0 0 1px rgba(43, 191, 180, 0.05);
}

/* ── KPI icon cards — lift + color-matched glow ─────────────────────────── */
.kpi-icon-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 28px -6px rgba(43, 191, 180, 0.20),
        0 20px 50px -28px rgba(0, 0, 0, 0.70);
}
.kpi-icon-card.accent-orange:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 28px -6px rgba(232, 135, 42, 0.28),
        0 20px 50px -28px rgba(0, 0, 0, 0.70);
}

/* ── KPI number — entrance pop-in animation ─────────────────────────────── */
@keyframes kpi-count-in {
    0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0)   scale(1.00); }
}
.kpi-icon-num {
    animation: kpi-count-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Badge "Em breve" — subtle pulse glow ───────────────────────────────── */
@keyframes badge-em-breve-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 135, 42, 0.00); }
    50%       { box-shadow: 0 0 10px -2px rgba(232, 135, 42, 0.42); }
}
.badge-em-breve {
    animation: badge-em-breve-pulse 4.5s ease-in-out infinite;
}

/* ── Form focus — enhanced teal glow ────────────────────────────────────── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow:
        0 0 0 3px rgba(43, 191, 180, 0.16),
        0 0 20px -6px rgba(43, 191, 180, 0.28) !important;
}

/* ── Placeholder card — hover glow ──────────────────────────────────────── */
.placeholder-card {
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
}
.placeholder-card:hover {
    border-color: rgba(43, 191, 180, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 28px -8px rgba(43, 191, 180, 0.20);
}

/* ── Topbar eco-badge hover ──────────────────────────────────────────────── */
.topbar-eco-badge {
    transition: border-color 0.22s ease, background 0.22s ease;
}
.topbar-eco-badge:hover {
    border-color: rgba(43, 191, 180, 0.50);
    background: rgba(43, 191, 180, 0.12);
}

/* ── Form-card hover ─────────────────────────────────────────────────────── */
.form-card {
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
}
.form-card:hover {
    border-color: rgba(43, 191, 180, 0.20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 24px -8px rgba(43, 191, 180, 0.16),
        0 16px 40px -24px rgba(0, 0, 0, 0.60);
}

/* ── Table container hover ───────────────────────────────────────────────── */
.table-container {
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
}
.table-container:hover {
    border-color: rgba(43, 191, 180, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 24px -8px rgba(43, 191, 180, 0.14),
        0 16px 40px -24px rgba(0, 0, 0, 0.60);
}

/* ── Prefers-reduced-motion: disable all new ambient animations ─────────── */
@media (prefers-reduced-motion: reduce) {
    .topbar::after { animation: none !important; }
    .sidebar-nav a.active { animation: none !important; }
    .sidebar-status-dot { animation: none !important; }
    .badge-em-breve { animation: none !important; }
    .kpi-icon-num { animation: none !important; }
    .btn:hover:not(:disabled):not([disabled]) { transform: none !important; }
    .btn:active:not(:disabled):not([disabled]) { transform: none !important; }
    .card:hover { transform: none !important; }
    .stat-card:hover { transform: none !important; }
    .kpi-icon-card:hover { transform: none !important; }
}

/* ==========================================================================
   BATCH 16 — Command Center Visual DNA Propagation
   Intensifies dark cinematic 4IS aesthetic on all page types
   ========================================================================== */

/* ── New keyframes ───────────────────────────────────────────────────────── */
@keyframes particlesCore {
    0%   { background-position: 0 0, 37px 37px; }
    100% { background-position: 74px 74px, -74px 112px; }
}
@keyframes breathe {
    0%, 100% { opacity: .72; transform: translate(-50%, -50%) scale(.985); }
    50%       { opacity: .96; transform: translate(-50%, -50%) scale(1.015); }
}
@keyframes scanMove {
    0%        { transform: translateY(-100%); opacity: 0; }
    10%       { opacity: .22; }
    90%       { opacity: .22; }
    100%      { transform: translateY(200vh);  opacity: 0; }
}
@keyframes nodeGlow {
    0%, 100% { opacity: .36; box-shadow: 0 0 8px currentColor; }
    50%       { opacity: .84; box-shadow: 0 0 20px currentColor, 0 0 36px currentColor; }
}
@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(43, 191, 180, .20);
        box-shadow: 0 0 22px -8px rgba(43, 191, 180, .15),
                    0 28px 70px -32px rgba(0,0,0,.80);
    }
    50% {
        border-color: rgba(43, 191, 180, .38);
        box-shadow: 0 0 36px -8px rgba(43, 191, 180, .28),
                    0 28px 70px -32px rgba(0,0,0,.80);
    }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* ── Darker global body base ─────────────────────────────────────────────── */
:root {
    --bg:        #060a10;
    --bg-deeper: #030610;
}
body {
    background-color: #060a10;
    background-image:
        radial-gradient(circle at 18% 0%,   rgba(43, 191, 180, .20) 0%, transparent 34%),
        radial-gradient(circle at 84% 12%,  rgba(232, 135, 42, .16) 0%, transparent 28%),
        radial-gradient(circle at 50% 115%, rgba(43, 191, 180, .11) 0%, transparent 38%),
        linear-gradient(180deg, #040710, #060a10 30%, #040710 100%);
}
body::before {
    background-image:
        linear-gradient(to right,  rgba(43, 191, 180, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(43, 191, 180, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 1;
    mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 74%);
}

/* ── Universal animated background layers ───────────────────────────────── */
/* Star field — teal + orange micro dots drifting */
.vis-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .15;
    background:
        radial-gradient(circle, rgba(43,191,180,.68) 0 1px, transparent 2px) 0 0 / 74px 74px,
        radial-gradient(circle, rgba(232,135,42,.40) 0 1px, transparent 2px) 37px 37px / 112px 112px;
    mask-image: radial-gradient(ellipse at 50% 40%, black 0 28%, rgba(0,0,0,.32) 55%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0 28%, rgba(0,0,0,.32) 55%, transparent 82%);
    animation: particlesCore 44s linear infinite;
}
/* Rotating conic orbit rings */
.vis-orbit-bg {
    position: fixed;
    inset: -14%;
    z-index: 0;
    pointer-events: none;
    opacity: .18;
    background:
        radial-gradient(circle at 50% 48%, transparent 0 23%, rgba(43,191,180,.07) 24%, transparent 25% 36%, rgba(232,135,42,.044) 37%, transparent 38% 50%, rgba(43,191,180,.044) 51%, transparent 52%),
        repeating-conic-gradient(from 20deg at 50% 48%, transparent 0deg 21deg, rgba(43,191,180,.030) 22deg 22.4deg, transparent 23deg 43deg);
    filter: blur(.3px);
    animation: orbitSpin 130s linear infinite;
}
/* Perspective ground grid */
.vis-grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .068;
    background:
        linear-gradient(rgba(43,191,180,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,191,180,.12) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(ellipse at 50% 56%, black 0 36%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 56%, black 0 36%, transparent 70%);
    transform: perspective(900px) rotateX(56deg) translateY(16%);
    transform-origin: center bottom;
}
/* Central radial aura glow */
.vis-aura {
    position: fixed;
    z-index: 0;
    left: 50%; top: 50%;
    width: 860px; height: 560px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 44%, rgba(43,191,180,.09), transparent 26%),
        radial-gradient(circle at 42% 46%, rgba(232,135,42,.042), transparent 24%),
        radial-gradient(ellipse at center, rgba(43,191,180,.034), transparent 70%);
    mix-blend-mode: screen;
    animation: breathe 14s ease-in-out infinite;
}
/* Horizontal light sweep */
.vis-scan {
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(43,191,180,.32), rgba(43,191,180,.60), rgba(43,191,180,.32), transparent);
    filter: blur(.6px);
    animation: scanMove 14s ease-in-out infinite 7s;
}

/* ── Internal app pages animated background ──────────────────────────────── */
.app-bg-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .10;
    background:
        radial-gradient(circle, rgba(43,191,180,.60) 0 1px, transparent 2px) 0 0 / 64px 64px,
        radial-gradient(circle, rgba(232,135,42,.34) 0 1px, transparent 2px) 32px 32px / 96px 96px;
    mask-image: radial-gradient(ellipse at 62% 28%, black 0 26%, rgba(0,0,0,.26) 52%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 62% 28%, black 0 26%, rgba(0,0,0,.26) 52%, transparent 80%);
    animation: particlesCore 50s linear infinite;
}
.app-bg-orbit {
    position: fixed;
    inset: -16%;
    z-index: 0;
    pointer-events: none;
    opacity: .13;
    background:
        radial-gradient(circle at 52% 46%, transparent 0 22%, rgba(43,191,180,.065) 23%, transparent 24% 36%, rgba(232,135,42,.038) 37%, transparent 38%),
        repeating-conic-gradient(from 14deg at 52% 46%, transparent 0deg 19deg, rgba(43,191,180,.028) 20deg 20.4deg, transparent 21deg 39deg);
    filter: blur(.4px);
    animation: orbitSpin 165s linear infinite reverse;
}
.app-bg-scan {
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 1.5px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(43,191,180,.22), rgba(43,191,180,.44), rgba(43,191,180,.22), transparent);
    filter: blur(.5px);
    animation: scanMove 20s ease-in-out infinite 10s;
}

/* ── Sidebar deeper glow ─────────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg, rgba(3, 6, 14, 0.97), rgba(2, 5, 11, 0.99));
    border-right-color: rgba(43, 191, 180, 0.07);
    box-shadow:
        2px 0 40px -10px rgba(43, 191, 180, .12),
        2px 0 80px -20px rgba(0, 0, 0, .65),
        inset -1px 0 0 rgba(43, 191, 180, .07);
}
.sidebar::after {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(43, 191, 180, .45) 38%,
        rgba(43, 191, 180, .45) 62%,
        transparent 100%);
}

/* ── Topbar darker + glow ────────────────────────────────────────────────── */
.topbar {
    background: linear-gradient(180deg,
        rgba(4, 8, 16, 0.97) 0%,
        rgba(6, 10, 18, 0.94) 100%);
    border-bottom-color: rgba(43, 191, 180, .09);
    box-shadow:
        0 1px 0 rgba(43, 191, 180, .08),
        0 4px 28px -8px rgba(0, 0, 0, .70);
}

/* ── Auth split left — richer cinematic dark panel ───────────────────────── */
.auth-split-left {
    background: linear-gradient(145deg, rgba(2, 4, 12, 0.99), rgba(3, 7, 16, 0.98));
}
.auth-split-left::before {
    border-color: rgba(43, 191, 180, .20);
    box-shadow: inset 0 0 60px -20px rgba(43, 191, 180, .12);
}
.auth-split-left::after {
    border-color: rgba(232, 135, 42, .18);
}

/* Star field inside auth left */
.auth-bg-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .13;
    background:
        radial-gradient(circle, rgba(43,191,180,.64) 0 1px, transparent 2px) 0 0 / 54px 54px,
        radial-gradient(circle, rgba(232,135,42,.36) 0 1px, transparent 2px) 27px 27px / 82px 82px;
    animation: particlesCore 36s linear infinite;
}
/* Grid on auth left */
.auth-bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .055;
    background:
        linear-gradient(rgba(43,191,180,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,191,180,.14) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 0 42%, transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0 42%, transparent 74%);
}
/* Extra orbital arcs on auth left panel */
.auth-bg-arc-a {
    position: absolute;
    top: 28%;
    left: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 1px solid rgba(43, 191, 180, .16);
    animation: drift-orbit 55s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.auth-bg-arc-b {
    position: absolute;
    top: 14%;
    left: -120px;
    width: 660px;
    height: 660px;
    border-radius: 50%;
    border: 1px dashed rgba(232, 135, 42, .09);
    animation: drift-orbit 82s linear infinite reverse;
    pointer-events: none;
    z-index: 0;
}
.auth-bg-arc-c {
    position: absolute;
    bottom: 8%;
    right: -70px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(43, 191, 180, .13);
    animation: drift-orbit 38s linear infinite;
    pointer-events: none;
    z-index: 0;
}
/* Pulsing ambient nodes inside auth left */
.auth-bg-node {
    position: absolute;
    border-radius: 50%;
    animation: nodeGlow 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.auth-bg-node.teal {
    background: var(--secondary);
    color: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
}
.auth-bg-node.orange {
    background: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 10px var(--primary);
}

/* Auth card animated border glow */
.auth-card {
    animation: borderGlow 5.5s ease-in-out infinite;
}

/* ── Homepage orbit scene — intensified ─────────────────────────────────── */
.orb-ring-1 {
    border-color: rgba(43, 191, 180, .40);
    box-shadow: 0 0 32px -8px rgba(43, 191, 180, .22) inset, 0 0 32px -16px rgba(43, 191, 180, .18);
    animation-duration: 18s;
}
.orb-ring-2 {
    border-color: rgba(232, 135, 42, .30);
    box-shadow: 0 0 48px -14px rgba(232, 135, 42, .18), 0 0 24px -12px rgba(232, 135, 42, .12) inset;
    animation-duration: 32s;
}
.orb-ring-3 {
    border-color: rgba(43, 191, 180, .14);
    animation-duration: 52s;
}
.orb-center {
    box-shadow:
        0 0 90px -10px rgba(43, 191, 180, .85),
        0 0 50px -14px rgba(232, 135, 42, .52),
        inset 0 0 44px rgba(43, 191, 180, .20);
    border-color: rgba(232, 135, 42, .64);
}
.orb-node-icon.teal {
    box-shadow:
        0 0 22px -4px rgba(43, 191, 180, .58),
        0 0 44px -14px rgba(43, 191, 180, .30);
}
.orb-node-icon.orange {
    box-shadow:
        0 0 22px -4px rgba(232, 135, 42, .58),
        0 0 44px -14px rgba(232, 135, 42, .30);
}

/* ── Feature strip — darker glass ────────────────────────────────────────── */
.feature-strip {
    background: linear-gradient(180deg, rgba(4, 7, 14, .88), rgba(5, 9, 18, .72));
    border-color: rgba(43, 191, 180, .13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 40px -20px rgba(0,0,0,.70);
}
/* ── Feature cards — deeper dark hover ───────────────────────────────────── */
.feature-card {
    background: rgba(5, 9, 18, .90) !important;
    border-color: rgba(43, 191, 180, .10) !important;
    transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease !important;
}
.feature-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(232, 135, 42, .22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        0 0 0 1px rgba(232, 135, 42, .14),
        0 18px 48px -16px rgba(232, 135, 42, .38),
        0 0 60px -22px rgba(232, 135, 42, .16) !important;
}
.feature-card:nth-child(even):hover {
    border-color: rgba(43, 191, 180, .22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        0 0 0 1px rgba(43, 191, 180, .12),
        0 18px 48px -16px rgba(43, 191, 180, .32),
        0 0 60px -22px rgba(43, 191, 180, .14) !important;
}

/* ── Internal card + record hover lift ───────────────────────────────────── */
.card {
    transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.card:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 191, 180, .14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(43, 191, 180, .08),
        0 14px 44px -18px rgba(43, 191, 180, .24),
        0 28px 64px -32px rgba(0, 0, 0, .75);
}
.stat-card {
    transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(43, 191, 180, .16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(43, 191, 180, .10),
        0 14px 44px -18px rgba(43, 191, 180, .26),
        0 28px 64px -32px rgba(0, 0, 0, .75);
}
.record-card {
    transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.record-card:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 191, 180, .14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(43, 191, 180, .08),
        0 12px 40px -18px rgba(43, 191, 180, .22),
        0 24px 60px -32px rgba(0, 0, 0, .70);
}

/* ── Btn primary glow on hover ───────────────────────────────────────────── */
.btn:hover:not(:disabled):not([disabled]) {
    box-shadow:
        0 0 0 1px rgba(232, 135, 42, .28),
        0 8px 30px -10px rgba(232, 135, 42, .32);
}
.btn.secondary:hover:not(:disabled):not([disabled]) {
    box-shadow:
        0 0 0 1px rgba(43, 191, 180, .24),
        0 8px 30px -10px rgba(43, 191, 180, .26);
}

/* ── prefers-reduced-motion additions ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vis-stars,
    .vis-orbit-bg,
    .vis-aura,
    .vis-scan,
    .app-bg-stars,
    .app-bg-orbit,
    .app-bg-scan,
    .auth-bg-stars,
    .auth-bg-arc-a,
    .auth-bg-arc-b,
    .auth-bg-arc-c,
    .auth-bg-node,
    .auth-card { animation: none !important; }
    .orb-ring-1,
    .orb-ring-2,
    .orb-ring-3,
    .orb-center { animation: none !important; }
    .feature-card:hover,
    .card:hover,
    .stat-card:hover,
    .record-card:hover { transform: none !important; }
}
/* BATCH 23 — 4IS AMBIENT MOTION END */

/* ==========================================================================
   BATCH 24 — Orbit Travelers · Animated Underlines · Login Polish · Details
   Tasks 2, 3, 4, 6, 7, 8
   ========================================================================== */

/* ── TASK 2: Orbit traveler keyframes ───────────────────────────────────── */
@keyframes orb-travel-cw  { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(360deg);  } }
@keyframes orb-travel-ccw { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(-360deg); } }

/* Wrapper positioned at orbit center; size = ring diameter */
.orb-traveler-wrap {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}
.orb-traveler-wrap.r2 {
    width: 310px; height: 310px;
    animation: orb-travel-cw 14s linear infinite;
}
.orb-traveler-wrap.r2.d1 { animation-delay: -4.67s; }
.orb-traveler-wrap.r2.d2 { animation-delay: -9.33s; }
.orb-traveler-wrap.r3 {
    width: 470px; height: 470px;
    animation: orb-travel-ccw 26s linear infinite;
}
.orb-traveler-wrap.r3.d1 { animation-delay: -13s; }

/* Dot at 12-o'clock of the rotating wrapper — orbits as wrapper rotates */
.orb-traveler-dot {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
}
.orb-traveler-dot.teal {
    width: 7px; height: 7px;
    background: var(--secondary);
    box-shadow: 0 0 14px 2px rgba(43,191,180,0.60), 0 0 30px rgba(43,191,180,0.25);
}
.orb-traveler-dot.orange {
    width: 6px; height: 6px;
    background: var(--primary);
    box-shadow: 0 0 12px 2px rgba(232,135,42,0.60), 0 0 26px rgba(232,135,42,0.25);
}

/* ── TASK 8: Animated gradient underlines ───────────────────────────────── */
@keyframes gradient-slide {
    0%   { background-position: 0%   center; }
    100% { background-position: 200% center; }
}

/* Public section titles — teal-to-orange animated underline */
.pub-section-title {
    position: relative;
}
.pub-section-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 56px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--secondary) 0%,
        var(--primary)   50%,
        var(--secondary) 100%);
    background-size: 200% 100%;
    animation: gradient-slide 3.2s linear infinite;
}

/* Internal page-header divider line — animated teal-orange shimmer */
.page-header::after {
    background: linear-gradient(90deg,
        rgba(43,191,180,0.70) 0%,
        rgba(232,135,42,0.55) 25%,
        rgba(43,191,180,0.70) 50%,
        rgba(232,135,42,0.55) 75%,
        rgba(43,191,180,0.70) 100%);
    background-size: 200% 100%;
    animation: gradient-slide 4.5s linear infinite;
}

/* Public nav active link animated underline */
.nav-links a.nav-active::after {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--secondary) 30%,
        var(--primary)   70%,
        transparent 100%);
    background-size: 200% 100%;
    animation: gradient-slide 3s linear infinite;
    width: 100%;
    opacity: 1;
}

/* ── TASK 4: Login page enhancements ───────────────────────────────────── */

/* Submit button — continuous glow pulse */
@keyframes cta-glow-pulse {
    0%, 100% { box-shadow: 0 0 22px -6px rgba(232,135,42,0.52); }
    50%       { box-shadow: 0 0 44px -4px rgba(232,135,42,0.82), 0 0 60px -16px rgba(43,191,180,0.22); }
}
.btn-submit {
    animation: cta-glow-pulse 3.5s ease-in-out infinite;
}

/* Auth card::after — animated scan sweep behind form */
.auth-card::after {
    content: '';
    position: absolute;
    inset-x: 0;
    height: 1px;
    top: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(43,191,180,0.55) 35%,
        rgba(232,135,42,0.38) 65%,
        transparent 100%);
    background-size: 200% 100%;
    animation: gradient-slide 6s linear infinite;
    pointer-events: none;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}

/* Auth right panel: top accent glow */
.auth-split-right::after {
    content: '';
    position: absolute;
    inset-x: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(43,191,180,0.26), transparent);
    pointer-events: none;
}

/* LGPD teal pulse node */
@keyframes lgpd-dot-pulse {
    0%, 100% { opacity: 0.60; box-shadow: 0 0 6px var(--secondary); }
    50%       { opacity: 1.00; box-shadow: 0 0 14px var(--secondary), 0 0 24px rgba(43,191,180,0.4); }
}
.auth-card [style*="--secondary"][style*="border-radius:50%"] {
    animation: lgpd-dot-pulse 2.8s ease-in-out infinite;
}

/* Auth input: teal glow on focus */
.auth-card .form-group input:focus {
    border-color: rgba(43,191,180,0.65);
    box-shadow: 0 0 0 3px rgba(43,191,180,0.14),
                0 0 22px -6px rgba(43,191,180,0.30);
}

/* ── TASK 6: Card animated top accent line ──────────────────────────────── */
@keyframes card-glide {
    0%   { background-position: -80px center; }
    100% { background-position: calc(100% + 80px) center; }
}
/* Use card::after for the gliding shimmer (::before is the static teal line) */
.card {
    position: relative;
}
.card::after {
    content: '';
    position: absolute;
    inset-x: 0; top: 0;
    height: 1px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(232,135,42,0.45) 40%,
        rgba(43,191,180,0.35) 60%,
        transparent 100%);
    background-size: 80px 100%;
    background-repeat: no-repeat;
    animation: card-glide 9s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* ── TASK 6: Table header shimmer sweep ─────────────────────────────────── */
.data-table th {
    position: relative;
    overflow: hidden;
}
.data-table th::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -80px; width: 80px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(43,191,180,0.13) 50%,
        transparent 100%);
    animation: shimmer-scan 7s ease-in-out infinite;
    pointer-events: none;
}
.data-table th:nth-child(2)::after { animation-delay: -1.4s; }
.data-table th:nth-child(3)::after { animation-delay: -2.8s; }
.data-table th:nth-child(4)::after { animation-delay: -4.2s; }
.data-table th:nth-child(5)::after { animation-delay: -5.6s; }

/* ── TASK 6: Sidebar active nav icon subtle pulse ───────────────────────── */
@keyframes nav-icon-pulse {
    0%, 100% { transform: scale(1.00); }
    50%       { transform: scale(1.10); }
}
.sidebar-nav a.active .nav-icon {
    animation: nav-icon-pulse 4.5s ease-in-out infinite;
}

/* ── TASK 6: Public feature cards breathing border ──────────────────────── */
@keyframes feature-card-breathe {
    0%, 100% { border-color: rgba(43,191,180,0.10); }
    50%       { border-color: rgba(43,191,180,0.22); }
}
.feature-card {
    animation: feature-card-breathe 5.5s ease-in-out infinite;
}
.feature-card:nth-child(even) { animation-delay: -2.75s; }

/* ── TASK 7: Internal page deeper corner atmosphere ─────────────────────── */
.app-main::before {
    background:
        radial-gradient(circle at 94% 5%,  rgba(43,191,180,0.09) 0%, transparent 22%),
        radial-gradient(circle at 6%  95%, rgba(232,135,42,0.07) 0%, transparent 20%),
        radial-gradient(ellipse 50% 30% at 80% 5%,  rgba(232,135,42,0.06) 0%, transparent 100%),
        radial-gradient(ellipse 40% 50% at 5%  95%, rgba(43,191,180,0.05) 0%, transparent 100%);
}

/* ── TASK 6: Diag/empresa record hover left accent animation ────────────── */
.diag-record[data-record-href]:hover::before,
.empresa-record[data-record-href]:hover::before {
    background: linear-gradient(180deg,
        var(--secondary) 0%,
        var(--primary)   100%);
    background-size: 100% 200%;
    animation: gradient-slide 2s linear infinite;
}

/* ── TASK 8: Public nav hover underline on regular links ───────────────── */
.nav-links a:not(.btn-entrar):hover {
    color: var(--fg);
}
.nav-links a:not(.btn-entrar)::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1.5px;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    transition: width 0.25s ease;
}
.nav-links a:not(.btn-entrar):hover::after {
    width: 100%;
}
.nav-links a:not(.btn-entrar) {
    position: relative;
}

/* ── TASK 6: Section title underline for internal pages ─────────────────── */
.card-header h3 {
    position: relative;
    display: inline-block;
}

/* ── TASK 3: Ensure public pages always show background layers ───────────── */
.public-wrapper { position: relative; z-index: 1; }

/* ── prefers-reduced-motion guard ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .orb-traveler-wrap            { animation: none !important; }
    .pub-section-title::after     { animation: none !important; }
    .page-header::after           { animation: none !important; }
    .nav-links a.nav-active::after { animation: none !important; }
    .btn-submit                   { animation: none !important; }
    .auth-card::after             { animation: none !important; }
    .card::after                  { animation: none !important; }
    .data-table th::after         { animation: none !important; }
    .sidebar-nav a.active .nav-icon { animation: none !important; }
    .feature-card                 { animation: none !important; }
    .diag-record[data-record-href]:hover::before,
    .empresa-record[data-record-href]:hover::before { animation: none !important; }
}
/* BATCH 24 END */

/* ==========================================================================
   BATCH 25 — Square Orbit · Shared BG Canvas · Login Canvas · Header Sweep
   Tasks 2, 3, 4, 5, 6, 7, 8 — visual rebuild
   ========================================================================== */

/* ── Shared canvas positioning ────────────────────────────────────────────── */
/* Public background canvas: fixed, sits below public-wrapper (z-index 1) */
#pub-bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
/* Login canvas: absolute inside auth-split-left, clipped by overflow:hidden */
#login-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Strengthen shared public background layers ───────────────────────────── */
.vis-stars    { opacity: 0.30; }
.vis-orbit-bg { opacity: 0.28; }
.vis-scan     { animation-duration: 9s; }

/* ── Extra public orbit arcs (new elements in public layout) ──────────────── */
.pub-orbit-arc-a {
    position: fixed;
    top: -100px; right: -100px;
    width: 540px; height: 540px;
    border-radius: 50%;
    border: 1px solid rgba(43,191,180,0.13);
    animation: drift-orbit 46s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.pub-orbit-arc-b {
    position: fixed;
    bottom: -140px; left: -80px;
    width: 440px; height: 440px;
    border-radius: 50%;
    border: 1px dashed rgba(232,135,42,0.10);
    animation: drift-orbit 64s linear infinite reverse;
    pointer-events: none;
    z-index: 0;
}
.pub-orbit-arc-c {
    position: fixed;
    bottom: 8%; right: 18%;
    width: 240px; height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(43,191,180,0.08);
    animation: drift-orbit 36s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Floating ambient nodes for all public pages */
.pub-float-node {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.pub-float-node-1 {
    width: 5px; height: 5px;
    top: 14%; left: 74%;
    background: var(--secondary);
    box-shadow: 0 0 14px var(--secondary);
    animation: nodeGlow 4.2s ease-in-out infinite;
}
.pub-float-node-2 {
    width: 4px; height: 4px;
    top: 66%; left: 16%;
    background: var(--primary);
    box-shadow: 0 0 12px var(--primary);
    animation: nodeGlow 3.1s ease-in-out infinite 1.5s;
}
.pub-float-node-3 {
    width: 6px; height: 6px;
    top: 84%; right: 22%;
    background: var(--secondary);
    box-shadow: 0 0 16px var(--secondary);
    animation: nodeGlow 5.0s ease-in-out infinite 2.8s;
}

/* ── TASK 2: Homepage orbit — true square scene ───────────────────────────── */

/* Hero visual column: flex-centered so orbit is never clipped or distorted */
.hero-split-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 480px;
    min-height: 480px;
}

/* Orbit scene: explicit 460×460 square — rings ARE true circles, not ellipses */
.home-orbit-scene {
    position: relative;
    width: 460px;
    height: 460px;
    min-height: 460px;
    margin: 0;
    overflow: visible;
}

/* Ring sizes tuned for 460px square container */
.orb-ring-1 { width: 140px;  height: 140px;  }
.orb-ring-2 { width: 240px;  height: 240px;  }
.orb-ring-3 { width: 360px;  height: 360px;  }

/* 4th outermost decorative ring */
.orb-ring-4 {
    position: absolute;
    top: 50%; left: 50%;
    width: 440px; height: 440px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 1px dashed rgba(43,191,180,0.06);
    animation: drift-orbit 80s linear infinite reverse;
    pointer-events: none;
    z-index: 1;
}

/* Node positions — ring-2 = 240px → radius 120px from center */
.orb-n-pessoas   { top: calc(50% - 120px); left: 50%; }
.orb-n-prevencao { top: 50%;               left: calc(50% - 120px); }
.orb-n-dados     { top: 50%;               left: calc(50% + 120px); }
/* bottom-left ~215°, scaled from 155px to 120px: y≈+68px, x≈-98px */
.orb-n-acao      { top: calc(50% + 68px);  left: calc(50% - 98px);  }
/* bottom-right ~325°, scaled from 155px to 120px: y≈+68px, x≈+98px */
.orb-n-evolucao  { top: calc(50% + 68px);  left: calc(50% + 98px);  }

/* Traveler wrapper sizes — must match updated ring diameters */
.orb-traveler-wrap.r2 { width: 240px; height: 240px; }
.orb-traveler-wrap.r3 { width: 360px; height: 360px; }

/* New r4 traveler for outermost ring */
.orb-traveler-wrap.r4 {
    position: absolute;
    top: 50%; left: 50%;
    width: 440px; height: 440px;
    border-radius: 50%;
    animation: orb-travel-cw 36s linear infinite;
    pointer-events: none;
    z-index: 3;
}
.orb-traveler-wrap.r4.d1 { animation-delay: -18s; }

/* ── TASK 5: Table header — replace small shimmer line with full-surface sweep */
/* Disable the old per-cell line from Batch 24 */
.data-table th::after { display: none !important; }

/* Slow color wash across the entire header row surface */
@keyframes th-surface-sweep {
    0%   { background-position: 0%   50%; }
    100% { background-position: 200% 50%; }
}
.data-table thead tr {
    background: linear-gradient(90deg,
        rgba(4,8,16,0.90)    0%,
        rgba(43,191,180,0.06) 22%,
        rgba(4,8,16,0.88)    50%,
        rgba(232,135,42,0.04) 78%,
        rgba(4,8,16,0.90)    100%
    );
    background-size: 200% 100%;
    animation: th-surface-sweep 14s linear infinite;
}

/* ── TASK 4: Login — remove broken artifact, strengthen rings + card ──────── */
/* Remove the broken 1px scan line that was added in Batch 24 */
.auth-card::after { display: none !important; }

/* Make right panel fully opaque — hides body grid artifact behind form */
.auth-split-right { background: rgba(4,8,16,0.97); }

/* Strengthen existing left-panel orbit ring sizes */
.auth-split-left::before {
    width: 520px; height: 520px;
    border: 1.5px solid rgba(43,191,180,0.22);
}
.auth-split-left::after {
    width: 700px; height: 700px;
    border: 1.5px dashed rgba(232,135,42,0.14);
}

/* Extra login arc rings centered on the left panel */
.auth-bg-arc-d {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 340px; height: 340px;
    border-radius: 50%;
    border: 1px solid rgba(232,135,42,0.16);
    animation: drift-orbit 42s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.auth-bg-arc-e {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 500px; height: 500px;
    border-radius: 50%;
    border: 1px dashed rgba(43,191,180,0.10);
    animation: drift-orbit 68s linear infinite reverse;
    pointer-events: none;
    z-index: 0;
}

/* Refine auth card glow */
.auth-card {
    animation: borderGlow 5s ease-in-out infinite;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 0 40px rgba(43,191,180,0.05),
        0 0 0 1px rgba(43,191,180,0.12),
        0 32px 80px -40px rgba(0,0,0,0.85);
}

/* Input focus: orange accent (more visible than teal on dark bg) */
.auth-card .form-group input:focus {
    border-color: rgba(232,135,42,0.65) !important;
    box-shadow:
        0 0 0 3px rgba(232,135,42,0.14),
        0 0 22px -6px rgba(232,135,42,0.30) !important;
    background: rgba(4,8,16,0.92);
}

/* ── TASK 6: Internal pages — corner orbit arcs for depth ─────────────────── */
.app-bg-corner-a {
    position: fixed;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(43,191,180,0.11);
    animation: drift-orbit 56s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.app-bg-corner-b {
    position: fixed;
    bottom: -100px; left: 220px;
    width: 340px; height: 340px;
    border-radius: 50%;
    border: 1px dashed rgba(232,135,42,0.09);
    animation: drift-orbit 74s linear infinite reverse;
    pointer-events: none;
    z-index: 0;
}

/* Increase app background layer visibility */
.app-bg-stars { opacity: 0.18; }
.app-bg-orbit { opacity: 0.20; }

/* ── TASK 7: Nav hover underline — smooth center-out reveal ───────────────── */
/* Override Batch 24 version: reveal from left edge, not center */
.nav-links a:not(.btn-entrar) {
    position: relative;
}
.nav-links a:not(.btn-entrar)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    transition: width 0.28s ease;
    border-radius: 1px;
}
.nav-links a:not(.btn-entrar):hover::after,
.nav-links a.nav-active::after {
    width: 100%;
}
/* Active state: gradient shimmer on the underline */
.nav-links a.nav-active::after {
    background: linear-gradient(90deg,
        var(--secondary) 0%,
        var(--primary)   50%,
        var(--secondary) 100%);
    background-size: 200% 100%;
    animation: gradient-slide 3s linear infinite;
}

/* ── prefers-reduced-motion additions for Batch 25 ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #pub-bg-canvas,
    #login-bg-canvas                     { display: none; }
    .pub-orbit-arc-a,
    .pub-orbit-arc-b,
    .pub-orbit-arc-c                     { animation: none !important; }
    .pub-float-node-1,
    .pub-float-node-2,
    .pub-float-node-3                    { animation: none !important; }
    .orb-ring-4                          { animation: none !important; }
    .orb-traveler-wrap.r4                { animation: none !important; }
    .data-table thead tr                 { animation: none !important; }
    .auth-bg-arc-d,
    .auth-bg-arc-e                       { animation: none !important; }
    .app-bg-corner-a,
    .app-bg-corner-b                     { animation: none !important; }
    .nav-links a:not(.btn-entrar)::after { transition: none !important; }
    .nav-links a.nav-active::after       { animation: none !important; }
}
/* BATCH 25 END */

/* ══════════════════════════════════════════════════════════════════════════════
   BATCH 26 — Login full-viewport animated background + Homepage orbit rebuild
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── LOGIN: canvas covers the full login viewport ──────────────────────────── */
#login-bg-canvas {
    position: fixed;
    inset: 0;
    width:  100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Auth background layers — fixed so they span both split panels */
.auth-bg-stars,
.auth-bg-grid,
.auth-bg-arc-a,
.auth-bg-arc-b,
.auth-bg-arc-c,
.auth-bg-arc-d,
.auth-bg-arc-e,
.auth-bg-node {
    position: fixed !important;
}

/* Arc-d/e: centered on the full viewport (they used top:50%;left:50% already) */
.auth-bg-arc-d { transform: translate(-50%, -50%); }
.auth-bg-arc-e { transform: translate(-50%, -50%); }

/* Auth split: stack above the fixed canvas */
.auth-split {
    position: relative;
    z-index: 1;
}

/* Left panel: dark enough to keep text readable, canvas glows through */
.auth-split-left {
    background: linear-gradient(155deg,
        rgba(4, 8, 16, 0.72) 0%,
        rgba(7, 12, 22, 0.62) 100%) !important;
}

/* Right panel: lighter glass — animation visible behind the form card */
.auth-split-right {
    background: rgba(4, 8, 16, 0.22) !important;
    border-left: 1px solid rgba(43, 191, 180, 0.10);
}

/* ── HOMEPAGE ORBIT REBUILD ─────────────────────────────────────────────────── */

/* Orbit scene: strict square, no height clamping that distorts circles */
.home-orbit-scene {
    position: relative;
    width:      100%;
    max-width:  460px;
    aspect-ratio: 1 / 1;
    height:     auto !important;
    min-height: unset !important;
    margin: 0 auto;
    overflow: visible;
}

/* Keep hero-split-visual tall enough for the scene */
.hero-split-visual {
    height:     auto !important;
    min-height: 480px;
    align-items: center;
}

/* ── Rings (four concentric circles) ──────────────────────────────────────── */
.orb-ring-1 {
    width: 175px; height: 175px;
    border: 1.5px solid rgba(43, 191, 180, 0.40);
    box-shadow: 0 0 30px -10px rgba(43, 191, 180, 0.22);
}
.orb-ring-2 {
    width: 270px; height: 270px;
    border: 1.5px solid rgba(232, 135, 42, 0.22);
}
.orb-ring-3 {
    width: 330px; height: 330px;
    border: 1.5px solid rgba(43, 191, 180, 0.16);
}
.orb-ring-4 {
    width: 420px; height: 420px;
    border-style: dashed;
    border-width: 1px;
    border-color: rgba(232, 135, 42, 0.08);
}

/* ── Center sphere — larger and more imposing ─────────────────────────────── */
.orb-center {
    width:  140px !important;
    height: 140px !important;
    background: radial-gradient(circle at 32% 32%,
        rgba(43, 191, 180, 0.28),
        rgba(232, 135, 42, 0.10) 40%,
        rgba(9, 13, 24, 0.98)) !important;
    border: 2px solid rgba(232, 135, 42, 0.65) !important;
    box-shadow:
        0 0 90px -10px rgba(43, 191, 180, 0.80),
        0 0 45px -18px rgba(232, 135, 42, 0.50),
        inset 0 0 40px  rgba(43, 191, 180, 0.20),
        inset 0 1px 0   rgba(255, 255, 255, 0.15) !important;
}
.orb-center-img {
    width:  104px !important;
    height: 104px !important;
    filter: drop-shadow(0 0 14px rgba(43, 191, 180, 0.55)) !important;
}

/* ── Arc glow highlights ──────────────────────────────────────────────────── */
.orb-arc-orange,
.orb-arc-teal {
    position: absolute;
    top: 50%; left: 50%;
    width:  330px;
    height: 330px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    border: 2.5px solid transparent;
}
.orb-arc-orange {
    border-top-color:   rgba(232, 135, 42, 0.82);
    border-right-color: rgba(232, 135, 42, 0.48);
    box-shadow:
        3px -3px 32px -6px rgba(232, 135, 42, 0.58),
        0 0 80px -28px rgba(232, 135, 42, 0.24);
}
.orb-arc-teal {
    border-bottom-color: rgba(43, 191, 180, 0.72);
    border-left-color:   rgba(43, 191, 180, 0.45);
    box-shadow:
        -3px 3px 32px -6px rgba(43, 191, 180, 0.52),
        0 0 80px -28px rgba(43, 191, 180, 0.20);
}

/* ── Static ring-path dots ────────────────────────────────────────────────── */
.orb-path-dot {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    width: 5px; height: 5px;
    animation: telemetry-blink 2.8s ease-in-out infinite;
}
.orb-path-dot.teal {
    background: var(--secondary);
    box-shadow: 0 0 9px 2px rgba(43, 191, 180, 0.65);
}
.orb-path-dot.orange {
    background: var(--primary);
    box-shadow: 0 0 9px 2px rgba(232, 135, 42, 0.65);
}

/* ── Module node icons — larger circular glass discs ─────────────────────── */
.orb-node-icon {
    width:  60px !important;
    height: 60px !important;
    border-width: 2px !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}
.orb-node-icon.teal {
    box-shadow:
        0 0 24px -4px rgba(43, 191, 180, 0.62),
        inset 0 1px 0   rgba(255, 255, 255, 0.10) !important;
}
.orb-node-icon.orange {
    box-shadow:
        0 0 24px -4px rgba(232, 135, 42, 0.62),
        inset 0 1px 0   rgba(255, 255, 255, 0.10) !important;
}
.orb-node:hover .orb-node-icon.teal {
    box-shadow:
        0 0 36px -4px rgba(43, 191, 180, 0.85),
        inset 0 1px 0   rgba(255, 255, 255, 0.14) !important;
}
.orb-node:hover .orb-node-icon.orange {
    box-shadow:
        0 0 36px -4px rgba(232, 135, 42, 0.85),
        inset 0 1px 0   rgba(255, 255, 255, 0.14) !important;
}
.orb-node-name {
    font-size:      0.73rem !important;
    font-weight:    800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* ── Node positions (clock-math, ring-3 radius = 165px) ──────────────────── */
/* 12 o'clock (0°):   x=0,     y=−165   */
.orb-n-pessoas   { top: calc(50% - 165px) !important; left: 50% !important; }
/* 9 o'clock  (270°): x=−165,  y=0      */
.orb-n-prevencao { top: 50% !important;               left: calc(50% - 165px) !important; }
/* 3 o'clock  (90°):  x=+165,  y=0      */
.orb-n-dados     { top: 50% !important;               left: calc(50% + 165px) !important; }
/* 7 o'clock  (210°): x=−82,   y=+143   */
.orb-n-acao      { top: calc(50% + 143px) !important; left: calc(50% - 82px) !important; }
/* 5 o'clock  (150°): x=+82,   y=+143   */
.orb-n-evolucao  { top: calc(50% + 143px) !important; left: calc(50% + 82px) !important; }

/* ── Orbit travelers — match new ring diameters ───────────────────────────── */
.orb-traveler-wrap.r2 { width: 270px !important; height: 270px !important; }
.orb-traveler-wrap.r3 { width: 330px !important; height: 330px !important; }
.orb-traveler-wrap.r4 { width: 420px !important; height: 420px !important; }

/* ── Reduced-motion overrides ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .orb-arc-orange,
    .orb-arc-teal  { display: none; }
    .orb-path-dot  { animation: none !important; }
    #login-bg-canvas { display: none; }
}
/* BATCH 26 END */

/* ══════════════════════════════════════════════════════════════════════════════
   BATCH 27 — Login transparent panels (boost animation) + Full orbit rebuild
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── NEW KEYFRAMES for centered-ring rotation (keeps translate + rotate) ─── */
@keyframes ois-spin-cw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ois-spin-ccw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
/* Traveler spin: wrapper centered at scene center, dot at 12 o'clock traces orbit */
@keyframes ois-travel-cw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ois-travel-ccw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* ── LOGIN: both panels fully transparent — canvas shows behind everything ─ */
.auth-split-left {
    background: transparent !important;
    overflow: visible !important;
}
.auth-split-right {
    background: transparent !important;
    border-left: none !important;
}
/* Remove the ::before radial that adds a subtle color wash inside the right panel */
.auth-split-right::before { display: none !important; }

/* Auth card — the ONLY solid dark glass element on the login page */
.auth-card {
    background: rgba(5, 8, 22, 0.76) !important;
    backdrop-filter: blur(44px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(44px) saturate(165%) !important;
    border: 1px solid rgba(43, 191, 180, 0.28) !important;
    box-shadow:
        0 0 0 1px rgba(43, 191, 180, 0.14),
        0 0 70px -18px rgba(43, 191, 180, 0.50),
        0 0 50px -22px rgba(232, 135, 42, 0.25),
        inset 0 1px 0   rgba(255, 255, 255, 0.12),
        0 50px 90px -40px rgba(0, 0, 0, 0.92) !important;
}

/* ── HERO LAYOUT: wider right column for the orbit ─────────────────────────── */
.hero-split {
    grid-template-columns: 1fr clamp(480px, 44vw, 680px) !important;
    max-width: 1500px !important;
    gap: 3rem !important;
}
.hero-split-visual {
    height: auto !important;
    min-height: 600px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* ══ .ois-system — 4IS orbital ecosystem ════════════════════════════════════ */

.ois-system {
    --disc: clamp(96px, 8.8vw, 132px);  /* module disc diameter */
    position: relative;
    width: 100%;
    max-width: 660px;
    aspect-ratio: 1 / 1;
    overflow: visible;
    flex-shrink: 0;
}

/* ── Ambient glow zones ────────────────────────────────────────────────────── */
.ois-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(70px);
}
.ois-glow-orange {
    width: 58%; height: 58%;
    top: -6%; right: 4%;
    background: radial-gradient(circle, rgba(232, 135, 42, 0.28) 0%, transparent 70%);
}
.ois-glow-teal {
    width: 64%; height: 64%;
    bottom: 2%; left: -6%;
    background: radial-gradient(circle, rgba(43, 191, 180, 0.25) 0%, transparent 70%);
}

/* ── 5 concentric rings ────────────────────────────────────────────────────── */
.ois-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Ring 1 — innermost, close to core, teal */
.ois-r1 {
    width:  28%; height: 28%;
    border: 1.5px solid rgba(43, 191, 180, 0.52);
    box-shadow: 0 0 22px -6px rgba(43, 191, 180, 0.36);
    animation: ois-spin-cw 22s linear infinite;
}
/* Ring 2 — thin gray-white technical ring */
.ois-r2 {
    width:  47%; height: 47%;
    border: 1px solid rgba(200, 220, 255, 0.14);
    animation: ois-spin-ccw 34s linear infinite;
}
/* Ring 3 — medium orange highlight ring */
.ois-r3 {
    width:  61%; height: 61%;
    border: 2px solid rgba(232, 135, 42, 0.40);
    box-shadow:
        0 0 35px -10px rgba(232, 135, 42, 0.22),
        inset 0 0 35px -10px rgba(232, 135, 42, 0.08);
    animation: ois-spin-cw 46s linear infinite;
}
/* Ring 4 — module orbit ring, larger teal */
.ois-r4 {
    width:  78%; height: 78%;
    border: 2px solid rgba(43, 191, 180, 0.32);
    box-shadow:
        0 0 42px -14px rgba(43, 191, 180, 0.20),
        inset 0 0 42px -14px rgba(43, 191, 180, 0.08);
    animation: ois-spin-ccw 62s linear infinite;
}
/* Ring 5 — outermost dashed ring */
.ois-r5 {
    width:  95%; height: 95%;
    border: 1px dashed rgba(232, 135, 42, 0.14);
    animation: ois-spin-cw 88s linear infinite;
}

/* ── Arc glow overlays (bright partial arcs) ──────────────────────────────── */
.ois-arc {
    position: absolute;
    top: 50%; left: 50%;
    width:  78%; height: 78%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    border: 3px solid transparent;
}
/* Orange: upper-right arc */
.ois-arc-orange {
    border-top-color:   rgba(232, 135, 42, 0.95);
    border-right-color: rgba(232, 135, 42, 0.58);
    box-shadow:
        5px -5px 44px -6px rgba(232, 135, 42, 0.75),
        0 0 110px -28px rgba(232, 135, 42, 0.34);
}
/* Teal: lower-left arc */
.ois-arc-teal {
    border-bottom-color: rgba(43, 191, 180, 0.88);
    border-left-color:   rgba(43, 191, 180, 0.56);
    box-shadow:
        -5px 5px 44px -6px rgba(43, 191, 180, 0.72),
        0 0 110px -28px rgba(43, 191, 180, 0.30);
}

/* ── Traveler dots ─────────────────────────────────────────────────────────── */
.ois-traveler {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}
/* Match ring-2 (47%), ring-3 (61%), ring-4 (78%) */
.ois-tv1 { width: 47%; height: 47%; animation: ois-travel-cw   18s linear infinite; }
.ois-tv2 { width: 78%; height: 78%; animation: ois-travel-ccw  30s linear infinite; }
.ois-tv3 { width: 61%; height: 61%; animation: ois-travel-cw   24s linear infinite; animation-delay: -11s; }
.ois-tv4 { width: 78%; height: 78%; animation: ois-travel-cw   30s linear infinite; animation-delay: -15s; }

.ois-tv-dot {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width:  9px; height: 9px;
    border-radius: 50%;
    margin-top: -4.5px;
}
.ois-tv-dot.teal {
    background: var(--secondary);
    box-shadow: 0 0 16px 5px rgba(43, 191, 180, 0.85);
}
.ois-tv-dot.orange {
    background: var(--primary);
    box-shadow: 0 0 16px 5px rgba(232, 135, 42, 0.85);
}

/* ── Static blinking nodes ─────────────────────────────────────────────────── */
.ois-snode {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: telemetry-blink 2.8s ease-in-out infinite;
}
.ois-snode.teal {
    background: var(--secondary);
    box-shadow: 0 0 12px 3px rgba(43, 191, 180, 0.75);
}
.ois-snode.orange {
    background: var(--primary);
    box-shadow: 0 0 12px 3px rgba(232, 135, 42, 0.75);
}

/* ── Central core ──────────────────────────────────────────────────────────── */
.ois-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:  26%; height: 26%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%,
        rgba(43, 191, 180, 0.34) 0%,
        rgba(232, 135, 42, 0.14) 40%,
        rgba(6, 9, 22, 0.99) 68%);
    border: 3px solid rgba(232, 135, 42, 0.75);
    box-shadow:
        0 0 110px -8px  rgba(43, 191, 180, 0.90),
        0 0  55px -18px rgba(232, 135, 42, 0.60),
        inset 0 0  55px rgba(43, 191, 180, 0.24),
        inset 0 1px 0   rgba(255, 255, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    animation: pulse-glow 3.8s ease-in-out infinite;
}
/* Outer halo ring around core */
.ois-core-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid rgba(43, 191, 180, 0.35);
    animation: ois-spin-cw 11s linear infinite;
    pointer-events: none;
}
.ois-core-img {
    width:  64%;
    height: 64%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(43, 191, 180, 0.75));
    position: relative;
    z-index: 1;
}

/* ── Module nodes — large circular glass discs ─────────────────────────────── */
.ois-mod {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    z-index: 5;
    cursor: default;
}
.ois-mod-disc {
    width:  var(--disc);
    height: var(--disc);
    border-radius: 50%;
    border: 3px solid;
    background: rgba(4, 7, 20, 0.90);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ois-mod-disc.teal {
    border-color: rgba(43, 191, 180, 0.72);
    color: var(--secondary);
    box-shadow:
        0 0 32px -6px rgba(43, 191, 180, 0.68),
        inset 0 0 22px  rgba(43, 191, 180, 0.08),
        inset 0 1px 0   rgba(255, 255, 255, 0.10);
}
.ois-mod-disc.orange {
    border-color: rgba(232, 135, 42, 0.72);
    color: var(--primary);
    box-shadow:
        0 0 32px -6px rgba(232, 135, 42, 0.68),
        inset 0 0 22px  rgba(232, 135, 42, 0.08),
        inset 0 1px 0   rgba(255, 255, 255, 0.10);
}
.ois-mod:hover .ois-mod-disc { transform: scale(1.12); }
.ois-mod:hover .ois-mod-disc.teal {
    box-shadow:
        0 0 52px -4px rgba(43, 191, 180, 0.95),
        inset 0 0 30px  rgba(43, 191, 180, 0.14),
        inset 0 1px 0   rgba(255, 255, 255, 0.14);
}
.ois-mod:hover .ois-mod-disc.orange {
    box-shadow:
        0 0 52px -4px rgba(232, 135, 42, 0.95),
        inset 0 0 30px  rgba(232, 135, 42, 0.14),
        inset 0 1px 0   rgba(255, 255, 255, 0.14);
}

.ois-mod-label { text-align: center; max-width: 120px; }
.ois-mod-name {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--fg);
    display: block;
    white-space: nowrap;
}
.ois-mod-desc {
    font-size: 0.60rem;
    font-weight: 500;
    color: var(--muted);
    display: block;
    line-height: 1.35;
    margin-top: 3px;
}

/* ── Module positions (orbit radius = 39% of scene from center) ─────────────
   All positions: disc center placed at the orbit ring-4 (78% ring, r=39%)
   Clock-math: x_offset = r·sin(θ), y_offset = -r·cos(θ)
   ─────────────────────────────────────────────────────────────────────────── */
/* Pessoas  — 12 o'clock (0°):   x=0,       y=-39%  */
.ois-m-pessoas   { top: 11%;    left: 50%; }
/* Prevenção — 9 o'clock (270°): x=-39%,    y=0     */
.ois-m-prevencao { top: 50%;    left: 11%; }
/* Dados     — 3 o'clock (90°):  x=+39%,    y=0     */
.ois-m-dados     { top: 50%;    left: 89%; }
/* Ação      — 7:30 (225°): sin=-0.707, cos=-0.707 → x=-27.6%, y=+27.6% */
.ois-m-acao      { top: 77.6%;  left: 22.4%; }
/* Evolução  — 4:30 (135°): sin=+0.707, cos=-0.707 → x=+27.6%, y=+27.6% */
.ois-m-evolucao  { top: 77.6%;  left: 77.6%; }

/* ── Responsive: hide orbit on mobile (same as existing .hero-split-visual) ─ */
@media (max-width: 900px) {
    .ois-system { display: none; }
}

/* ── Reduced-motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ois-ring,
    .ois-traveler,
    .ois-core,
    .ois-core-ring { animation: none !important; }
    .ois-snode     { animation: none !important; opacity: 0.5; }
    .ois-arc-orange,
    .ois-arc-teal  { display: none; }
    .ois-glow      { display: none; }
    #login-bg-canvas { display: none; }
}
/* BATCH 27 END */

/* ══════════════════════════════════════════════════════════════════════════════
   BATCH 28 — Fix: orbit core animation bug + login canvas full-viewport
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── ROOT CAUSE FIX 1: pulse-glow overwrites translate(-50%,-50%) on ois-core.
   Redefine the animation to always carry the translate so the core stays
   centered when the keyframe replaces the transform property.              ── */
@keyframes ois-core-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow:
        0 0 110px -8px  rgba(43, 191, 180, 0.90),
        0 0  55px -18px rgba(232, 135, 42, 0.60),
        inset 0 0  55px rgba(43, 191, 180, 0.24),
        inset 0 1px 0   rgba(255, 255, 255, 0.20); }
    50%       { transform: translate(-50%, -50%) scale(1.05); box-shadow:
        0 0 130px -6px  rgba(43, 191, 180, 1.00),
        0 0  70px -14px rgba(232, 135, 42, 0.80),
        inset 0 0  70px rgba(43, 191, 180, 0.32),
        inset 0 1px 0   rgba(255, 255, 255, 0.28); }
}

/* ── ROOT CAUSE FIX 2: ois-core-ring uses inset:-10px positioning; the
   ois-spin-cw animation's translate(-50%,-50%) doubles the offset.
   Use a plain-rotation animation instead.                                  ── */
@keyframes ois-ring-rotate-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Apply corrected animations */
.ois-core {
    animation: ois-core-pulse 3.8s ease-in-out infinite !important;
}
.ois-core-ring {
    animation: ois-ring-rotate-cw 11s linear infinite !important;
    transform-origin: center center !important;
}

/* ── CONTAINMENT: explicit absolute size + overflow:hidden on core ──────────── */
.ois-core {
    width:         clamp(150px, 12vw, 190px) !important;
    height:        clamp(150px, 12vw, 190px) !important;
    overflow:      hidden !important;
    border-radius: 50% !important;
}

/* Image inside core: always fill the circle, never spill out */
.ois-core img,
.ois-core-img {
    width:       100% !important;
    height:      100% !important;
    object-fit:  contain !important;
    display:     block !important;
    position:    relative !important;
    z-index:     1 !important;
    flex-shrink: 0 !important;
}

/* ── ORBIT SYSTEM: explicit clamp width so it never expands to 100vw ────────── */
.ois-system {
    width:      clamp(560px, 42vw, 720px) !important;
    max-width:  none !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    align-self:  center !important;
}

/* Hero visual column: tall enough, properly centered */
.hero-split-visual {
    min-height: 580px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* ── RING SIZES (spec: 30 / 44 / 58 / 76 / 92 %) ───────────────────────────── */
.ois-r1 { width: 30% !important; height: 30% !important; }
.ois-r2 { width: 44% !important; height: 44% !important; }
.ois-r3 { width: 58% !important; height: 58% !important; }
.ois-r4 { width: 76% !important; height: 76% !important; }
.ois-r5 { width: 92% !important; height: 92% !important; }

/* Arc overlay on ring-4 (76%) */
.ois-arc { width: 76% !important; height: 76% !important; }

/* Traveler wrappers: match updated ring sizes */
.ois-tv1 { width: 44% !important; height: 44% !important; }
.ois-tv2 { width: 76% !important; height: 76% !important; }
.ois-tv3 { width: 58% !important; height: 58% !important; }
.ois-tv4 { width: 76% !important; height: 76% !important; }

/* ── MODULE DISC SIZE: 130–150px ────────────────────────────────────────────── */
.ois-mod-disc {
    width:  clamp(130px, 11vw, 150px) !important;
    height: clamp(130px, 11vw, 150px) !important;
}

/* ── MODULE POSITIONS: ring-4 orbit (76% diam → radius = 38% from center)
   Clock-math: x_off = r·sin(θ_clock), y_off = -r·cos(θ_clock), r = 38%
   Positions below put the disc CENTER on ring-4; transform(-50%,-50%) centers it. */
/* Pessoas  — 12 o'clock (θ=0°):   x=0, y=-38% → top=12%, left=50%        */
.ois-m-pessoas   { top: 12%   !important; left: 50%   !important; }
/* Prevenção — 9 o'clock (θ=270°): x=-38%, y=0 → top=50%, left=12%        */
.ois-m-prevencao { top: 50%   !important; left: 12%   !important; }
/* Dados     — 3 o'clock (θ=90°):  x=+38%, y=0 → top=50%, left=88%        */
.ois-m-dados     { top: 50%   !important; left: 88%   !important; }
/* Ação      — 7:30 (θ=225°): x=-26.9%, y=+26.9% → top=76.9%, left=23.1% */
.ois-m-acao      { top: 76.9% !important; left: 23.1% !important; }
/* Evolução  — 4:30 (θ=135°): x=+26.9%, y=+26.9% → top=76.9%, left=76.9% */
.ois-m-evolucao  { top: 76.9% !important; left: 76.9% !important; }

/* ── LOGIN CANVAS: fixed full-viewport, no clipping ─────────────────────────── */
#login-bg-canvas {
    position: fixed   !important;
    top:      0       !important;
    left:     0       !important;
    width:    100vw   !important;
    height:   100vh   !important;
    z-index:  0       !important;
    pointer-events: none !important;
}

/* Auth background layers: all fixed so they span both panels */
.auth-bg-stars,
.auth-bg-grid,
.auth-bg-arc-a,
.auth-bg-arc-b,
.auth-bg-arc-c,
.auth-bg-arc-d,
.auth-bg-arc-e,
.auth-bg-node {
    position: fixed   !important;
    z-index:  0       !important;
}

/* Auth split: above canvas */
.auth-split {
    position: relative !important;
    z-index:  1        !important;
}

/* Left panel: dark semi-transparent — canvas glows through */
.auth-split-left {
    background: rgba(4, 8, 16, 0.62) !important;
    overflow:   hidden !important;
}

/* Right panel: very light overlay so animation shows behind card */
.auth-split-right {
    background:  rgba(4, 8, 16, 0.18)              !important;
    border-left: 1px solid rgba(43, 191, 180, 0.08) !important;
}

/* Remove inner overlays that block canvas */
.auth-split-right::before { display: none !important; }
.auth-split-right::after  { display: none !important; }

/* Auth card: translucent glass — canvas particles visible behind it */
.auth-card {
    background:          rgba(5, 10, 24, 0.68)                  !important;
    backdrop-filter:     blur(36px) saturate(160%)               !important;
    -webkit-backdrop-filter: blur(36px) saturate(160%)           !important;
    border:              1px solid rgba(43, 191, 180, 0.30)      !important;
    box-shadow:
        0 0 0  1px rgba(43, 191, 180, 0.12),
        0 0 60px -16px rgba(43, 191, 180, 0.45),
        0 0 40px -20px rgba(232, 135, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 40px 80px -36px rgba(0, 0, 0, 0.88) !important;
}

/* ── Reduced-motion overrides for Batch 28 ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ois-core      { animation: none !important; }
    .ois-core-ring { animation: none !important; }
    #login-bg-canvas { display: none; }
}
/* BATCH 28 END */


/* === FINAL HOME LOGIN 4IS FIX START === */

/* Home: componente orbital final isolado */
.hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 660px) !important;
    max-width: 1480px !important;
    gap: clamp(2.5rem, 4vw, 4.75rem) !important;
    align-items: center !important;
}

.hero-split-visual {
    min-height: clamp(560px, 42vw, 680px) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    position: relative !important;
}

.home-orbit-panel {
    width: min(100%, clamp(560px, 42vw, 660px));
    aspect-ratio: 1 / 1;
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: 50%;
}

.home-orbit-panel::before {
    content: '';
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(43, 191, 180, 0.12), transparent 56%),
        radial-gradient(circle at 68% 24%, rgba(232, 135, 42, 0.12), transparent 42%),
        radial-gradient(circle at 28% 76%, rgba(43, 191, 180, 0.10), transparent 44%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

.home-orbit-system {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: translateZ(0);
    z-index: 1;
}

.home-orbit-system::before {
    content: '';
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background:
        linear-gradient(rgba(43, 191, 180, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 191, 180, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle, black 0 56%, transparent 76%);
    -webkit-mask-image: radial-gradient(circle, black 0 56%, transparent 76%);
    pointer-events: none;
    opacity: 0.65;
}

.home-orbit-aura {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
}

.home-orbit-aura-orange {
    width: 48%;
    height: 48%;
    top: 2%;
    right: 6%;
    background: radial-gradient(circle, rgba(232, 135, 42, 0.32), transparent 72%);
}

.home-orbit-aura-teal {
    width: 56%;
    height: 56%;
    left: 0;
    bottom: 2%;
    background: radial-gradient(circle, rgba(43, 191, 180, 0.28), transparent 74%);
}

@keyframes home-orbit-spin-cw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes home-orbit-spin-ccw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes home-orbit-core-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 86px -12px rgba(43, 191, 180, 0.82),
            0 0 52px -18px rgba(232, 135, 42, 0.55),
            inset 0 0 48px rgba(43, 191, 180, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.035);
        box-shadow:
            0 0 110px -10px rgba(43, 191, 180, 0.96),
            0 0 70px -18px rgba(232, 135, 42, 0.72),
            inset 0 0 56px rgba(43, 191, 180, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
}

@keyframes home-orbit-node-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.38); }
}

.home-orbit-ring,
.home-orbit-traveler {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
}

.home-orbit-ring {
    z-index: 1;
}

.home-orbit-ring-1 {
    width: 26%;
    height: 26%;
    border: 1px solid rgba(43, 191, 180, 0.52);
    box-shadow: 0 0 24px -8px rgba(43, 191, 180, 0.38);
    animation: home-orbit-spin-cw 22s linear infinite;
}

.home-orbit-ring-2 {
    width: 40%;
    height: 40%;
    border: 1px solid rgba(220, 235, 255, 0.16);
    animation: home-orbit-spin-ccw 34s linear infinite;
}

.home-orbit-ring-3 {
    width: 56%;
    height: 56%;
    border: 1.5px solid rgba(232, 135, 42, 0.40);
    box-shadow: 0 0 38px -12px rgba(232, 135, 42, 0.32);
    animation: home-orbit-spin-cw 48s linear infinite;
}

.home-orbit-ring-4 {
    width: 72%;
    height: 72%;
    border: 2px solid rgba(43, 191, 180, 0.32);
    box-shadow: 0 0 48px -18px rgba(43, 191, 180, 0.26);
    animation: home-orbit-spin-ccw 64s linear infinite;
}

.home-orbit-ring-5 {
    width: 84%;
    height: 84%;
    border: 1px dashed rgba(232, 135, 42, 0.16);
    animation: home-orbit-spin-cw 92s linear infinite;
}

.home-orbit-arc {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid transparent;
    pointer-events: none;
    z-index: 2;
}

.home-orbit-arc-orange {
    border-top-color: rgba(232, 135, 42, 0.94);
    border-right-color: rgba(232, 135, 42, 0.62);
    filter: drop-shadow(0 0 20px rgba(232, 135, 42, 0.72));
}

.home-orbit-arc-teal {
    border-bottom-color: rgba(43, 191, 180, 0.88);
    border-left-color: rgba(43, 191, 180, 0.58);
    filter: drop-shadow(0 0 20px rgba(43, 191, 180, 0.70));
}

.home-orbit-traveler {
    z-index: 3;
}

.home-orbit-traveler i {
    position: absolute;
    top: 0;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    transform: translateX(-50%);
    border-radius: 50%;
    display: block;
}

.home-orbit-traveler-1 {
    width: 40%;
    height: 40%;
    animation: home-orbit-spin-cw 18s linear infinite;
}
.home-orbit-traveler-1 i {
    background: var(--secondary);
    box-shadow: 0 0 16px 5px rgba(43, 191, 180, 0.78);
}

.home-orbit-traveler-2 {
    width: 72%;
    height: 72%;
    animation: home-orbit-spin-ccw 30s linear infinite;
}
.home-orbit-traveler-2 i {
    background: var(--primary);
    box-shadow: 0 0 16px 5px rgba(232, 135, 42, 0.80);
}

.home-orbit-traveler-3 {
    width: 56%;
    height: 56%;
    animation: home-orbit-spin-cw 26s linear infinite;
    animation-delay: -12s;
}
.home-orbit-traveler-3 i {
    background: var(--secondary);
    box-shadow: 0 0 14px 4px rgba(43, 191, 180, 0.68);
}

.home-orbit-traveler-4 {
    width: 84%;
    height: 84%;
    animation: home-orbit-spin-cw 42s linear infinite;
    animation-delay: -20s;
}
.home-orbit-traveler-4 i {
    background: var(--primary);
    box-shadow: 0 0 14px 4px rgba(232, 135, 42, 0.68);
}

.home-orbit-node {
    position: absolute;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    animation: home-orbit-node-pulse 3s ease-in-out infinite;
}

.home-orbit-node.teal {
    background: var(--secondary);
    box-shadow: 0 0 12px 3px rgba(43, 191, 180, 0.72);
}

.home-orbit-node.orange {
    background: var(--primary);
    box-shadow: 0 0 12px 3px rgba(232, 135, 42, 0.72);
}

.home-orbit-node.node-1 { top: 16%; left: 50%; animation-delay: -0.2s; }
.home-orbit-node.node-2 { top: 25%; left: 74%; animation-delay: -1.1s; }
.home-orbit-node.node-3 { top: 50%; left: 84%; animation-delay: -2.1s; }
.home-orbit-node.node-4 { top: 74%; left: 74%; animation-delay: -0.7s; }
.home-orbit-node.node-5 { top: 84%; left: 50%; animation-delay: -1.8s; }
.home-orbit-node.node-6 { top: 74%; left: 26%; animation-delay: -2.7s; }
.home-orbit-node.node-7 { top: 50%; left: 16%; animation-delay: -1.4s; }
.home-orbit-node.node-8 { top: 25%; left: 26%; animation-delay: -2.4s; }
.home-orbit-node.node-9 { top: 35%; left: 63%; animation-delay: -0.9s; }
.home-orbit-node.node-10 { top: 65%; left: 37%; animation-delay: -1.9s; }

.home-orbit-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(150px, 11.5vw, 184px);
    height: clamp(150px, 11.5vw, 184px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 35% 28%, rgba(43, 191, 180, 0.34), transparent 34%),
        radial-gradient(circle at 66% 64%, rgba(232, 135, 42, 0.18), transparent 42%),
        rgba(4, 8, 20, 0.96);
    border: 2px solid rgba(232, 135, 42, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 6;
    animation: home-orbit-core-pulse 4s ease-in-out infinite;
}

.home-orbit-core-halo {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(43, 191, 180, 0.35);
    pointer-events: none;
}

.home-orbit-core-logo {
    position: relative;
    z-index: 1;
    width: 74%;
    height: 74%;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(43, 191, 180, 0.72));
}

.home-orbit-module {
    position: absolute;
    z-index: 7;
    width: clamp(118px, 9.2vw, 142px);
    height: clamp(118px, 9.2vw, 142px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 35% 24%, rgba(255,255,255,0.10), transparent 34%),
        rgba(3, 8, 20, 0.88);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    text-align: center;
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.home-orbit-module strong {
    font-size: clamp(0.68rem, 0.86vw, 0.84rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg);
    line-height: 1.1;
}

.home-orbit-module-icon {
    font-size: clamp(1.25rem, 1.5vw, 1.65rem);
    line-height: 1;
}

.home-orbit-module.teal {
    border: 2px solid rgba(43, 191, 180, 0.72);
    color: var(--secondary);
    box-shadow:
        0 0 34px -8px rgba(43, 191, 180, 0.74),
        inset 0 0 24px rgba(43, 191, 180, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.home-orbit-module.orange {
    border: 2px solid rgba(232, 135, 42, 0.72);
    color: var(--primary);
    box-shadow:
        0 0 34px -8px rgba(232, 135, 42, 0.74),
        inset 0 0 24px rgba(232, 135, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.home-orbit-module:hover {
    transform: translate(-50%, -50%) scale(1.06);
}

.home-orbit-module-pessoas { top: 11.5%; left: 50%; }
.home-orbit-module-prevencao { top: 50%; left: 11.5%; }
.home-orbit-module-dados { top: 50%; left: 88.5%; }
.home-orbit-module-acao { top: 76.8%; left: 23.2%; }
.home-orbit-module-evolucao { top: 76.8%; left: 76.8%; }

/* Login: fundo cinematográfico contínuo */
body.auth-live-page {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(43, 191, 180, 0.12), transparent 35%),
        radial-gradient(circle at 80% 30%, rgba(232, 135, 42, 0.10), transparent 34%),
        radial-gradient(circle at 62% 86%, rgba(43, 191, 180, 0.08), transparent 38%),
        #02050c !important;
}

.auth-live-page #login-bg-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.auth-live-page .auth-bg-stars,
.auth-live-page .auth-bg-grid,
.auth-live-page .auth-bg-arc-a,
.auth-live-page .auth-bg-arc-b,
.auth-live-page .auth-bg-arc-c,
.auth-live-page .auth-bg-arc-d,
.auth-live-page .auth-bg-arc-e,
.auth-live-page .auth-bg-node {
    position: fixed !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.auth-live-page .auth-bg-stars {
    opacity: 0.24 !important;
}

.auth-live-page .auth-bg-grid {
    opacity: 0.12 !important;
    mask-image: radial-gradient(ellipse at center, black 0 58%, transparent 82%) !important;
    -webkit-mask-image: radial-gradient(ellipse at center, black 0 58%, transparent 82%) !important;
}

.auth-live-page .auth-bg-arc-a {
    top: 12% !important;
    left: 8% !important;
    width: 520px !important;
    height: 520px !important;
    border-color: rgba(43, 191, 180, 0.22) !important;
}

.auth-live-page .auth-bg-arc-b {
    top: 5% !important;
    left: 36% !important;
    width: 720px !important;
    height: 720px !important;
    border-color: rgba(232, 135, 42, 0.14) !important;
}

.auth-live-page .auth-bg-arc-c {
    right: 8% !important;
    bottom: 7% !important;
    width: 380px !important;
    height: 380px !important;
    border-color: rgba(43, 191, 180, 0.18) !important;
}

.auth-live-page .auth-split {
    position: relative !important;
    z-index: 3 !important;
    min-height: 100vh !important;
    isolation: isolate;
    background: transparent !important;
}

.auth-live-page .auth-split::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(1, 5, 12, 0.56) 0%, rgba(1, 5, 12, 0.18) 48%, rgba(1, 5, 12, 0.30) 100%),
        radial-gradient(circle at 74% 48%, rgba(43, 191, 180, 0.08), transparent 42%),
        radial-gradient(circle at 36% 38%, rgba(232, 135, 42, 0.07), transparent 36%);
}

.auth-live-page .auth-split-left,
.auth-live-page .auth-split-right {
    position: relative !important;
    z-index: 2 !important;
}

.auth-live-page .auth-split-left {
    background: linear-gradient(90deg, rgba(2, 6, 15, 0.42), rgba(2, 6, 15, 0.12)) !important;
    overflow: hidden !important;
}

.auth-live-page .auth-split-left::before,
.auth-live-page .auth-split-left::after {
    opacity: 0.55 !important;
}

.auth-live-page .auth-split-right {
    background: transparent !important;
    border-left: none !important;
}

.auth-live-page .auth-split-right::before,
.auth-live-page .auth-split-right::after {
    display: none !important;
}

.auth-live-page .auth-card {
    position: relative !important;
    z-index: 5 !important;
    background:
        linear-gradient(180deg, rgba(8, 14, 30, 0.66), rgba(4, 8, 20, 0.54)) !important;
    border: 1px solid rgba(43, 191, 180, 0.34) !important;
    backdrop-filter: blur(34px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(170%) !important;
    box-shadow:
        0 0 0 1px rgba(43, 191, 180, 0.12),
        0 0 70px -18px rgba(43, 191, 180, 0.58),
        0 0 48px -22px rgba(232, 135, 42, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 42px 88px -36px rgba(0, 0, 0, 0.92) !important;
}

.auth-live-page .auth-card .form-group input {
    background: rgba(3, 8, 18, 0.54) !important;
    border-color: rgba(128, 170, 210, 0.20) !important;
}

.auth-live-page .auth-card .form-group input:focus {
    background: rgba(3, 8, 18, 0.66) !important;
    border-color: rgba(43, 191, 180, 0.66) !important;
    box-shadow:
        0 0 0 3px rgba(43, 191, 180, 0.14),
        0 0 24px -8px rgba(43, 191, 180, 0.44) !important;
}

@media (max-width: 1100px) {
    .hero-split {
        grid-template-columns: 1fr !important;
    }

    .hero-split-visual {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .auth-live-page .auth-split {
        grid-template-columns: 1fr !important;
    }

    .auth-live-page .auth-split-left {
        display: none !important;
    }

    .auth-live-page .auth-split-right {
        min-height: 100vh !important;
        padding: 1.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-orbit-ring,
    .home-orbit-traveler,
    .home-orbit-core,
    .home-orbit-node,
    .auth-live-page .auth-bg-stars,
    .auth-live-page .auth-bg-arc-a,
    .auth-live-page .auth-bg-arc-b,
    .auth-live-page .auth-bg-arc-c,
    .auth-live-page .auth-bg-arc-d,
    .auth-live-page .auth-bg-arc-e,
    .auth-live-page .auth-bg-node,
    .auth-live-page .auth-card,
    .auth-live-page .btn-submit {
        animation: none !important;
    }

    .auth-live-page #login-bg-canvas {
        display: none !important;
    }
}

/* === FINAL HOME LOGIN 4IS FIX END === */