/* ========= CSS VARIABLES ========= */
            :root {
            /* Core Colors */
            --header-color-primary: #1A7200;
            --header-color-primary-hover: #32E000;
            --header-color-background-light: #F7F7F7;
            --header-color-background-dark: #1E1E1E;
            --header-color-surface-light: #FFFFFF;
            --header-color-surface-dark: #1F1F1F;
            --header-color-text-primary-light: #1F1F1F;
            --header-color-text-primary-dark: #FFFFFF;
            --header-color-text-secondary-light: #1A7200;
            --header-color-text-secondary-dark: #32E000;
            --header-color-text-muted-light: #1F1F1F;
            --header-color-text-muted-dark: #8E8E8E;
            --header-color-border-light: #D8E1D1;
            --header-color-border-dark: #5C5F54;
            --header-color-scrollbar-light: #D8E1D1;
            --header-color-scrollbar-dark: #6A6C6A;
            --header-color-overlay-light: rgba(0, 0, 0, 0.32);
            --header-color-overlay-dark: rgba(0, 0, 0, 0.6);
            /* Transitions */
            --header-transition-base: 0.3s ease;
            --header-transition-quick: 0.2s ease;
            --header-transition-smooth: 0.25s ease;
            /* Shadows */
            --header-shadow-light: 0 6px 12px rgba(0, 0, 0, 0.12);
            --header-shadow-dark: 0 6px 12px rgba(0, 0, 0, 0.4);
            --header-shadow-card-light: 0px 4px 4px rgba(0, 0, 0, 0.25);
            --header-shadow-card-dark: 0px 4px 4px rgba(0, 0, 0, 0.4);
            }
            /* ========= HEADER ========= */
            @media (min-width: 1124px) {
            .ab-box-tosign { margin: 0 40px 0 auto; }
            .header__sign-fiber-cta { margin: 0; }
            }
            /* Keep the site header visible and interactive above menu/overlay */
            .base-section.header-bg,
            .base-section.header-bg .header,
            .base-section.header-bg nav {
            position: relative !important;
            z-index: 10002 !important; /* above #menu-option (9999) and #menu-overlay (9998) */
            }
            /* Ensure the help trigger stays clickable */
            .header__help-menu-trigger { position: relative; z-index: 10003; }
            /* Prevent any blur on the header when the menu opens */
            body.nio-menu-open .base-section.header-bg,
            body.nio-menu-open .base-section.header-bg * {
            filter: none !important;
            -webkit-filter: none !important;
            backdrop-filter: none !important;
            }
            /* ========= MENU LATERAL BASE ========= */
            .extended-menu-contents { position: relative; }
            /* Overlay */
            #menu-overlay {
            position: fixed;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--header-transition-base);
            z-index: 9998;
            }
            body.nio-menu-open #menu-overlay { 
            opacity: 1; 
            pointer-events: auto; 
            }
            /* Container principal do menu */
            #menu-option {
            position: fixed;
            top: 70px;
            right: 0;
            /* Use modern viewport units for mobile address bar dynamics */
            height: 100vh;
            height: 100dvh;
            width: 360px;
            max-width: 100%;
            transform: translateX(100%);
            transition: transform var(--header-transition-base);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 24px 24px 40px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
            overscroll-behavior-y: contain; /* prevent body scroll chaining */
            touch-action: pan-y; /* allow vertical pan */
            scrollbar-width: thin;
            }
            body.nio-menu-open #menu-option { transform: translateX(0); }
            /* Scrollbar base */
            #menu-option::-webkit-scrollbar { width: 8px; }
            #menu-option::-webkit-scrollbar-track { background: transparent; }
            #menu-option::-webkit-scrollbar-thumb { border-radius: 4px; }
            /* Wrapper interior */
            .nio-new-menu__content { 
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
            flex: 1 1 auto; /* grow to fill panel height */
            min-height: 0;   /* allow inner content to shrink and enable scrolling */
            }
            /* Spacer to avoid last items going behind sticky CTA */
            .nio-new-menu__content::after {
            content: "";
            display: block;
            /* Reserve fixed space plus safe area when applicable */
            height: calc(140px + env(safe-area-inset-bottom, 0px));
            flex: 0 0 calc(140px + env(safe-area-inset-bottom, 0px));
            }
            /* ========= COMPONENTES ========= */
            /* Quick Access Cards */
            .nio-quick-access {
            align-self: stretch;
            border-radius: 24px;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 16px;
            display: inline-flex;
            flex-wrap: wrap;
            align-content: flex-start;
            }
            .nio-quick-card {
            flex: 1 1 0;
            padding: 12px;
            border-radius: 16px;
            outline-offset: -1px;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 12px;
            display: inline-flex;
            cursor: pointer;
            transition: all var(--header-transition-quick);
            }
            .nio-quick-card:focus-visible { 
            outline: 2px solid var(--header-color-primary); 
            outline-offset: 2px; 
            }
            .nio-quick-card:hover { 
            transform: translateY(-2px); 
            }
            .nio-quick-card svg path { 
            transition: fill var(--header-transition-smooth); 
            }
            .nio-quick-card span {
            justify-content: center;
            display: flex;
            flex-direction: column;
            font-size: 14px;
            font-weight: 600;
            line-height: 19.60px;
            word-wrap: break-word;
            text-align: justify;
            transition: color var(--header-transition-smooth);
            }
            /* Seções genéricas */
            .nio-section {
            border-radius: 24px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            }
            .nio-section--gap16 { gap: 16px; }
            .nio-section__title {
            font-size: 18px;
            font-weight: 700;
            line-height: 25.2px;
            }
            /* Linhas base */
            .nio-line {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-height: 40px;
            }
            .nio-line__icon {
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            }
            .nio-line__texts {
            display: flex;
            flex-direction: column;
            }
            .nio-line__title {
            font-size: 16px;
            line-height: 22.4px;
            font-weight: 400;
            transition: all var(--header-transition-quick);
            }
            .nio-line__title:hover { font-weight: 700; }
            .nio-line__subtitle {
            font-size: 12px;
            line-height: 18px;
            font-weight: 400;
            }
            /* Canal layout */
            .nio-channel-row {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            }
            .nio-channel-left {
            display: flex;
            align-items: center;
            gap: 12px;
            }
            .nio-chevron {
            width: 33px;
            height: 33px;
            display: flex;
            align-items: center;
            justify-content: center;
            }
            /* Expansíveis */
            .nio-expand-row {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 4px;
            height: 40px;
            }
            .nio-expand-left {
            align-items: center;
            gap: 8px;
            display: flex;
            }
            .nio-expand-label {
            font-size: 16px;
            line-height: 22.4px;
            font-weight: 600;
            }
            .nio-expand-trigger {
            background: none;
            border: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 33px;
            height: 33px;
            transition: transform var(--header-transition-smooth);
            }
            .nio-expand-trigger[aria-expanded="true"] { transform: rotate(180deg); }
            /* Sublistas */
            .nio-sublist {
            list-style: none;
            margin: 0 0 0 12px;
            padding: 4px 0 0 0;
            display: none;
            flex-direction: column;
            gap: 4px;
            }
            .nio-sublist li {
            height: 40px;
            padding: 4px 6px 4px 18px;
            align-items: center;
            gap: 12px;
            }
            .nio-sublist[data-open="true"] { display: flex; }
            .nio-sublist a {
            text-decoration: none;
            font-size: 14px;
            padding: 6px 8px;
            border-radius: 8px;
            font-weight: 500;
            transition: all var(--header-transition-quick);
            }
            .nio-sublist a:focus-visible { outline: none; }
            /* Estados hover unificados */
            .nio-line[role=button]:hover .nio-line__title,
            .nio-channel-row:hover .nio-line__title,
            .nio-expand-row:hover .nio-expand-label,
            .nio-sublist a:hover {
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 140%;
            }
            /* Feedback de cópia */
            .nio-copy-feedback {
            position: fixed;
            top: 12px;
            right: 12px;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 14px;
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: opacity var(--header-transition-smooth), transform var(--header-transition-smooth);
            z-index: 10000;
            }
            .nio-copy-feedback.is-visible {
            opacity: 1;
            transform: translateY(0);
            }
            /* Botão fechar */
            .nio-menu-close {
            position: absolute;
            top: 8px;
            right: 8px;
            background: none;
            border: 0;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background var(--header-transition-quick);
            }
            .nio-visually-hidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0 0 0 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
            }
            /* ========= RESPONSIVIDADE ========= */
            @media (max-width: 600px) {
            #menu-option { width: 100%; }
            }
            /* Tablet breakpoint: make panel full-width for consistency and ensure scrolling */
            @media (max-width: 1024px) {
            #menu-option { width: 100%; }
            }
            @media (max-width: 520px) {
            .nio-quick-access { flex-wrap: wrap; }
            }
            /* Acessibilidade - motion */
            @media (prefers-reduced-motion: reduce) {
            #menu-option, 
            #menu-overlay, 
            .nio-expand-trigger,
            .nio-quick-card,
            .nio-copy-feedback { 
            transition: none !important; 
            }
            }