/* Design Global / Tema Escuro Default */
            :root,
            [data-bs-theme="dark"],
            .theme-dark {
                color-scheme: dark;

                /* Core App Palette */
                --app-bg: #05080d;
                --app-bg-soft: #080d14;
                --app-bg-muted: #0b111b;

                --app-surface: #0e141f;
                --app-surface-soft: #111a27;
                --app-surface-hover: #162235;

                --app-border: rgba(93, 236, 255, 0.14);
                --app-border-strong: rgba(93, 236, 255, 0.32);

                --app-primary: #5decff;
                --app-primary-rgb: 93, 236, 255;
                --app-primary-dark: #14b8d4;
                --app-primary-deep: #087c95;
                --app-primary-soft: rgba(93, 236, 255, 0.14);
                --app-primary-glow: rgba(93, 236, 255, 0.45);

                --app-secondary: #223149;
                --app-accent: #8cf7ff;

                --app-success: #3ef0b0;
                --app-success-rgb: 62, 240, 176;

                --app-warning: #ffd166;
                --app-warning-rgb: 255, 209, 102;

                --app-danger: #ff5c7a;
                --app-danger-rgb: 255, 92, 122;

                --app-info: #5decff;
                --app-info-rgb: 93, 236, 255;

                --app-text: #f4f8fb;
                --app-text-muted: #a9b4c4;
                --app-text-soft: #7f8da3;
                --app-text-disabled: #566276;

                --app-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
                --app-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.28);

                --app-glow:
                0 0 0 1px rgba(93, 236, 255, 0.18),
                0 0 28px rgba(93, 236, 255, 0.14);

                --app-radial-gradient: radial-gradient(circle at 50% 0%, rgba(93, 236, 255, 0.34) 0%, rgba(93, 236, 255, 0.14) 55%, rgba(93, 236, 255, 0.03) 100%);

                --app-radius-sm: 0.5rem;
                --app-radius: 0.875rem;
                --app-radius-lg: 1.25rem;
                --app-radius-xl: 1.5rem;

                /* Variáveis legadas apontando para as novas */

                --maincolor: var(--app-primary);
                --maincolor2: var(--app-text);
                --maincolor3: var(--app-surface);
                --maincolor4: var(--app-text-muted);
                --maincolor5: var(--app-bg);

                --text: var(--app-text);
                --icons: var(--app-text-muted);

                --background: var(--app-bg);
                --cardbackground: var(--app-surface);

                /* Tabler variable overrides */

                --tblr-primary: var(--app-primary);
                --tblr-primary-rgb: var(--app-primary-rgb);
                --tblr-primary-fg: #021014;
                --tblr-primary-lt: var(--app-primary-soft);

                --tblr-secondary: var(--app-secondary);
                --tblr-secondary-rgb: 34, 49, 73;

                --tblr-success: var(--app-success);
                --tblr-success-rgb: var(--app-success-rgb);

                --tblr-info: var(--app-info);
                --tblr-info-rgb: var(--app-info-rgb);

                --tblr-warning: var(--app-warning);
                --tblr-warning-rgb: var(--app-warning-rgb);

                --tblr-danger: var(--app-danger);
                --tblr-danger-rgb: var(--app-danger-rgb);

                --tblr-light: var(--app-surface-soft);
                --tblr-dark: var(--app-bg);

                --tblr-body-bg: var(--app-bg);
                --tblr-body-bg-rgb: 5, 8, 13;
                --tblr-body-color: var(--app-text);
                --tblr-body-color-rgb: 244, 248, 251;

                --tblr-muted: var(--app-text-muted);
                --tblr-muted-rgb: 169, 180, 196;

                --tblr-border-color: var(--app-border);
                --tblr-border-color-translucent: var(--app-border);

                --tblr-bg-surface: var(--app-surface);
                --tblr-bg-surface-secondary: var(--app-bg-soft);
                --tblr-bg-surface-tertiary: var(--app-surface-soft);

                --tblr-card-bg: var(--app-surface);
                --tblr-card-border-color: var(--app-border);
                --tblr-card-cap-bg: rgba(255, 255, 255, 0.02);

                --tblr-link-color: var(--app-primary);
                --tblr-link-hover-color: var(--app-accent);

                --tblr-code-color: var(--app-accent);
                --tblr-highlight-bg: rgba(93, 236, 255, 0.16);

                --tblr-box-shadow: var(--app-shadow);
                --tblr-box-shadow-sm: var(--app-shadow-soft);

                --tblr-border-radius: var(--app-radius);
                --tblr-border-radius-sm: var(--app-radius-sm);
                --tblr-border-radius-lg: var(--app-radius-lg);
                --tblr-border-radius-xl: var(--app-radius-xl);

                /* Bootstrap variable overrides */

                --bs-primary: var(--app-primary);
                --bs-primary-rgb: var(--app-primary-rgb);
                --bs-primary-bg-subtle: rgba(93, 236, 255, 0.12);
                --bs-primary-border-subtle: rgba(93, 236, 255, 0.34);
                --bs-primary-text-emphasis: var(--app-accent);

                --bs-secondary: var(--app-secondary);
                --bs-secondary-rgb: 34, 49, 73;

                --bs-success: var(--app-success);
                --bs-success-rgb: var(--app-success-rgb);

                --bs-info: var(--app-info);
                --bs-info-rgb: var(--app-info-rgb);

                --bs-warning: var(--app-warning);
                --bs-warning-rgb: var(--app-warning-rgb);

                --bs-danger: var(--app-danger);
                --bs-danger-rgb: var(--app-danger-rgb);

                --bs-body-bg: var(--app-bg);
                --bs-body-bg-rgb: 5, 8, 13;
                --bs-body-color: var(--app-text);
                --bs-body-color-rgb: 244, 248, 251;

                --bs-border-color: var(--app-border);
                --bs-border-color-translucent: var(--app-border);

                --bs-link-color: var(--app-primary);
                --bs-link-hover-color: var(--app-accent);
            }


            /* Tema Claro via data-bs-theme="light" */

            [data-bs-theme="light"],
            .theme-light {
                color-scheme: light;

                --app-bg: #f3f8fb;
                --app-bg-soft: #ffffff;
                --app-bg-muted: #e8f0f5;

                --app-surface: #ffffff;
                --app-surface-soft: #edf6fa;
                --app-surface-hover: #dff4fa;

                --app-border: rgba(8, 124, 149, 0.18);
                --app-border-strong: rgba(8, 124, 149, 0.34);

                --app-primary: #087c95;
                --app-primary-rgb: 8, 124, 149;
                --app-primary-dark: #066073;
                --app-primary-deep: #044858;
                --app-primary-soft: rgba(8, 124, 149, 0.12);
                --app-primary-glow: rgba(8, 124, 149, 0.28);

                --app-secondary: #dceaf0;
                --app-accent: #14b8d4;

                --app-success: #0f9f72;
                --app-success-rgb: 15, 159, 114;

                --app-warning: #b98100;
                --app-warning-rgb: 185, 129, 0;

                --app-danger: #d9365a;
                --app-danger-rgb: 217, 54, 90;

                --app-info: #087c95;
                --app-info-rgb: 8, 124, 149;

                --app-text: #101923;
                --app-text-muted: #5f6f7e;
                --app-text-soft: #81909d;
                --app-text-disabled: #a7b3bd;

                --app-shadow: 0 18px 45px rgba(8, 32, 44, 0.12);
                --app-shadow-soft: 0 12px 30px rgba(8, 32, 44, 0.08);

                --app-glow:
                0 0 0 1px rgba(8, 124, 149, 0.14),
                0 0 28px rgba(8, 124, 149, 0.1);

                --tblr-primary-fg: #ffffff;
                --tblr-primary-lt: var(--app-primary-soft);

                --tblr-light: #ffffff;
                --tblr-dark: #101923;

                --tblr-body-bg: var(--app-bg);
                --tblr-body-bg-rgb: 243, 248, 251;
                --tblr-body-color: var(--app-text);
                --tblr-body-color-rgb: 16, 25, 35;

                --tblr-muted: var(--app-text-muted);
                --tblr-muted-rgb: 95, 111, 126;

                --tblr-card-cap-bg: rgba(8, 124, 149, 0.035);

                --tblr-highlight-bg: rgba(8, 124, 149, 0.12);

                --bs-primary-bg-subtle: rgba(8, 124, 149, 0.12);
                --bs-primary-border-subtle: rgba(8, 124, 149, 0.28);
                --bs-primary-text-emphasis: var(--app-primary-dark);

                --bs-body-bg: var(--app-bg);
                --bs-body-bg-rgb: 243, 248, 251;
                --bs-body-color: var(--app-text);
                --bs-body-color-rgb: 16, 25, 35;
            }


            /* Base Layout */

            html,
            body {
                background:
                radial-gradient(circle at top right, var(--app-primary-soft), transparent 28rem),
                radial-gradient(circle at bottom left, rgba(var(--app-primary-rgb), 0.12), transparent 32rem),
                var(--app-bg) !important;
                color: var(--app-text) !important;
            }

            body {
                scrollbar-color: rgba(var(--app-primary-rgb), 0.45) var(--app-bg-soft);
            }

            ::selection {
                background: rgba(var(--app-primary-rgb), 0.28);
                color: #ffffff;
            }

            a {
                color: var(--app-primary);
            }

            a:hover {
                color: var(--app-accent);
            }


            /* Page, App Shell, Navbar, Sidebar */

            .page,
            .page-wrapper,
            .page-body {
                background: transparent !important;
                color: var(--app-text);
            }

            .navbar,
            .navbar-vertical,
            .navbar-expand-md,
            .navbar-light,
            .navbar-dark {
                background:
                linear-gradient(
                    180deg,
                    color-mix(in srgb, var(--app-surface) 96%, transparent),
                    color-mix(in srgb, var(--app-bg-soft) 96%, transparent)
                ) !important;
                border-color: var(--app-border) !important;
                color: var(--app-text) !important;
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
                backdrop-filter: blur(16px);
            }

            .navbar-brand,
            .navbar-brand:hover {
                color: var(--app-text) !important;
            }

            .navbar-brand .text-primary,
            .navbar-brand span.text-primary {
                color: var(--app-primary) !important;
            }

            .navbar .nav-link,
            .navbar-nav .nav-link,
            .navbar-vertical .nav-link {
                color: var(--app-text-muted) !important;
                border-radius: var(--app-radius);
            }

            .navbar .nav-link:hover,
            .navbar-nav .nav-link:hover,
            .navbar-vertical .nav-link:hover {
                color: var(--app-primary) !important;
                background: var(--app-primary-soft) !important;
            }

            .navbar .nav-link.active,
            .navbar-nav .nav-link.active,
            .navbar-vertical .nav-link.active,
            .navbar .nav-item.active > .nav-link,
            .navbar-vertical .nav-item.active > .nav-link {
                color: var(--app-primary) !important;
                background:
                linear-gradient(
                    135deg,
                    rgba(var(--app-primary-rgb), 0.18),
                    rgba(var(--app-primary-rgb), 0.06)
                ) !important;
                box-shadow: inset 0 0 0 1px rgba(var(--app-primary-rgb), 0.18);
            }

            .navbar .dropdown-menu {
                margin-top: 0.5rem;
            }