/* Prevent FOUC by hiding translatable content until ready */
        html.i18n-loading [data-i18n],
        html.i18n-loading [data-i18n-html],
        html.i18n-loading [data-i18n-placeholder] {
            visibility: hidden;
        }
        
        html.i18n-ready [data-i18n],
        html.i18n-ready [data-i18n-html],
        html.i18n-ready [data-i18n-placeholder] {
            visibility: visible;
        }
        
        /* Portal Discord Menu Button - Active state when dropdown open */
        #portal_discord_menu_button.dropdown-open,
        #portal_discord_menu_button.dropdown-open:hover {
            background-color: rgba(88, 101, 242, 0.2) !important;
            border-width: 2px !important;
            border-color: rgba(88, 101, 242, 1) !important;
            box-shadow: 0 0 15px rgba(88, 101, 242, 0.4) !important;
        }
        
        /* Hover effect when dropdown is closed */
        #portal_discord_menu_button:not(.dropdown-open):hover {
            background-color: rgba(88, 101, 242, 0.2);
            border-width: 2px;
            border-color: rgba(88, 101, 242, 1);
            box-shadow: 0 0 15px rgba(88, 101, 242, 0.4);
        }

        /* Default state when dropdown is not open */
        #portal_discord_menu_button:not(.dropdown-open):not(:hover) {
            background-color: rgba(88, 101, 242, 0.1);
            border-width: 0;
            border-color: transparent;
            box-shadow: none;
        }
    
        :root {
            color-scheme: dark;
            --theme-bg: #030617;
            --theme-bg-surface: rgba(15, 23, 42, 0.92);
            --theme-bg-card: rgba(15, 23, 42, 0.9);
            --theme-bg-nav: #020617;
            --theme-bg-dropdown: rgba(15, 23, 42, 0.95);
            --theme-text: #ffffff;
            --theme-text-muted: #94a3b8;
            --theme-text-dim: #64748b;
            --theme-border: rgba(148, 163, 184, 0.15);
            --theme-border-strong: rgba(148, 163, 184, 0.35);
            --theme-glass: rgba(15, 23, 42, 0.72);
            --theme-link: #3b82f6;
            --theme-link-hover: #a855f7;
            --theme-shadow: rgba(0, 0, 0, 0.35);
        }

        html.theme-light {
            color-scheme: light;
            --theme-bg: #f1f5f9;
            --theme-bg-surface: rgba(255, 255, 255, 0.92);
            --theme-bg-card: rgba(255, 255, 255, 0.85);
            --theme-bg-nav: #ffffff;
            --theme-bg-dropdown: rgba(255, 255, 255, 0.98);
            --theme-text: #0f172a;
            --theme-text-muted: #475569;
            --theme-text-dim: #64748b;
            --theme-border: rgba(15, 23, 42, 0.08);
            --theme-border-strong: rgba(15, 23, 42, 0.12);
            --theme-glass: rgba(255, 255, 255, 0.8);
            --theme-link: #3b82f6;
            --theme-link-hover: #7c3aed;
            --theme-shadow: rgba(0, 0, 0, 0.06);
        }

        /* Theme toggle is always visible — all pages support light/dark */
        #theme-toggle-wrapper { display: block !important; }

        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-y: auto;
            overflow-x: auto; /* allow horizontal scroll when viewport narrower than min-width */
        }

        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: auto;
            min-width: var(--global-min-width);
            font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            letter-spacing: 0.01em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            color: var(--theme-text);
            position: relative;
            background-color: var(--theme-bg);
            -webkit-overflow-scrolling: touch;
        }

        /* Keep the document scrollbar below the fixed navbar. Without this
           offset Chromium paints the content scrollbar through the header. */
        html::-webkit-scrollbar-track,
        body::-webkit-scrollbar-track {
            margin-top: calc(var(--navbar-height, 5rem) + 1px);
        }
        
        /* Ensure main content areas can scroll vertically when needed */
        main, .responsive-zoom, main.responsive-zoom {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Neural Canvas */
        #neuralCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            display: block;
        }
        
        /* Hide neural animation on mobile devices */
        @media (max-width: 768px) {
            #neuralCanvas {
                display: none !important;
            }
        }
        
        /* Hide neural animation on fullscreen pages */
        html.page--news #neuralCanvas,
        html.board-page #neuralCanvas,
        html.portal-page #neuralCanvas {
            display: none !important;
        }

        /* Firmen-Host: Rechts-/Kontaktseiten im Aionity-Look statt Markets */
        html.firm-plain #neuralCanvas,
        html.firm-plain .glow-ring {
            display: none !important;
        }
        html.firm-plain,
        html.firm-plain body {
            background: #06100c !important;
        }
        /* Navigation als Aionity statt Aionity Markets */
        html.firm-plain #main-navbar {
            background: #081511 !important;
            border-bottom-color: rgba(167,243,208,.12) !important;
        }
        html.firm-plain .nav-main-container { justify-content: space-between !important; }
        html.firm-plain .nav-buttons-group { display: none !important; }
        html.firm-plain .nav-right-group a[href="/login"] { display: none !important; }
        html.firm-plain .nav-brand-ic,
        html.firm-plain .nav-brand-mk,
        html.firm-plain .nav-brand-wordmark { display: none !important; }
        html.firm-plain .nav-brand::after {
            content: "Aionity";
            font: 800 1.32rem/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
            letter-spacing: -.02em;
            color: #e7eaf3;
        }

        body.login-page #neuralCanvas {
            display: block !important;
        }

        /* Ensure content wrapper is above canvas on all pages */
        #page_content_wrapper {
            position: relative;
            z-index: 10;
            flex: 1 0 auto;
            width: 100%;
        }
        body > footer {
            flex-shrink: 0;
        }
        
        /* Layout surfaces */
        section {
            width: 100%;
            position: relative;
        }
        
        main {
            position: relative;
            width: 100%;
        }

        /* Content über Canvas */
        body > main,
        body > section,
        body > footer,
        body > div {
            position: relative;
            z-index: 10;
        }

        /* Ensure page content starts below the fixed navbar.
           Use a CSS variable set at runtime to handle responsive/navbar-size changes
           and include the safe-area inset for iOS notch devices. */
        :root { --navbar-height: 5rem; }
        /* Ensure page content sits below the fixed navbar. The runtime script
           updates --navbar-height to match the actual navbar; include
           safe-area inset for notched devices. */

        #main-navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            z-index: 50 !important;
            background-color: var(--theme-bg-nav);
        }

        /* Light theme: Navbar stays white (override .bg-slate-950 !important) */
        html.theme-light #main-navbar {
            background-color: #ffffff !important;
            border-bottom-color: rgba(15, 23, 42, 0.08) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(15, 23, 42, 0.04) !important;
        }

        .gradient-title {
            background: linear-gradient(to right, #a855f7, #3b82f6);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        html:not(.portal-page) a {
            color: var(--theme-link);
        }

        /* Links in normalen Textabschnitten bekommen lila Hover (nicht Portal) */
        html:not(.portal-page) a:not(.inline-flex):not([class*="bg-"]):hover {
            color: var(--theme-link-hover);
        }

        /* Ensure button-like elements/links keep their text color on hover (nicht Portal) */
        html:not(.portal-page) .inline-flex,
        html:not(.portal-page) .inline-flex *,
        html:not(.portal-page) a.inline-flex,
        html:not(.portal-page) a.inline-flex * {
            color: inherit !important;
        }

        html:not(.portal-page) .inline-flex:hover,
        html:not(.portal-page) .inline-flex:hover *,
        html:not(.portal-page) a.inline-flex:hover,
        html:not(.portal-page) a.inline-flex:hover * {
            color: inherit !important;
            text-decoration: none !important;
        }

        /* Also override Tailwind utility classes like "hover:text-white" (nicht Portal) */
        html:not(.portal-page) *[class*="hover:text"],
        html:not(.portal-page) *[class*="hover:text"] * {
            color: inherit !important;
        }
        .display-font {
            font-family: 'Space Grotesk', 'Manrope', sans-serif;
            letter-spacing: -0.02em;
        }

        /* Verbesserte Lesbarkeit für Fließtext */
        p, li, span, td, th {
            font-weight: 400;
            letter-spacing: 0.01em;
        }

        /* Überschriften etwas kräftiger */
        h1, h2, h3, h4, h5, h6 {
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        /* Kleinere Texte etwas dicker für bessere Lesbarkeit */
        .text-sm, .text-xs {
            font-weight: 450;
        }

        .glass-card {
            background: linear-gradient(160deg, var(--theme-bg-card), var(--theme-glass));
            border: 1px solid var(--theme-border);
            box-shadow: 0 24px 60px var(--theme-shadow);
        }

        .page-surface {
            max-width: 960px;
            margin: 0 auto;
            padding: 2.5rem 1.75rem;
            border-radius: 1.5rem;
            background: var(--theme-bg-surface);
            border: 1px solid var(--theme-border-strong);
            box-shadow: 0 24px 80px var(--theme-shadow);
            backdrop-filter: blur(18px);
        }

        @media (min-width: 768px) {
            .page-surface {
                padding: 3rem 2.5rem;
            }
        }

        .glow-ring {
            background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.32), transparent 55%),
                        radial-gradient(circle at 80% 0%, rgba(168, 85, 247, 0.32), transparent 60%);
            filter: blur(60px);
            opacity: 0.6;
        }
        /* Glow-ring auf Chat- und Chart-Seiten ausblenden */
        html.aion-chat-page .glow-ring,
        html.charts-page .glow-ring {
            display: none !important;
        }

        .pill {
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.18), rgba(147, 51, 234, 0.24));
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        }

        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
        }

        .fade-up {
            animation: fadeUp 0.7s ease forwards;
            opacity: 0;
        }

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

        .floating {
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        /* Footer Link Styles */
        .footer-link {
            color: #9ca3af !important;
            transition: all 0.3s ease;
        }
        .footer-link:hover {
            color: #60a5fa !important;
            filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
        }

        /* News Card Styles */
        .news-card {
            text-decoration: none !important;
        }
        .news-card:hover {
            text-decoration: none !important;
        }
        .news-card * {
            color: inherit;
        }
        /* Responsive UI simplifications */
        @media (max-width: 1600px) {
            /* Hide heavy chart area on narrower large screens to prioritize content */
            [data-chart-root] { display: none !important; }
            /* If there are specific chart panels, hide common ids/classes too */
            #chart-panel, .chart-root, .chart-area { display: none !important; }
        }

        @media (max-width: 768px) {
            /* Hide only the desktop quick-access shell on mobile; mobile sheets still use quick-btn-wrapper. */
            #quick-access-sidebar, #quick-access-overlay { display: none !important; }
            /* Ensure toggle buttons that only make sense on wide screens are hidden. */
            #quick-access-toggle, #quick-btn-toggle-hidden, #quick-btn-add { display: none !important; }
        }
        
        /* Aiory Chat Mobile: Hide global navbar, use compact inline header instead */
        @media (max-width: 759px) {
            html.aion-chat-page #main-navbar {
                display: none !important;
            }
            html.aion-chat-page main {
                height: 100% !important;
                max-height: 100% !important;
                overflow: hidden !important;
                display: flex !important;
                flex-direction: column !important;
                flex: 1 !important;
                min-height: 0 !important;
            }
        }

        /* ===== Global Light Theme Overrides ===== */
        /* Override common Tailwind dark-bg/text classes that are hardcoded */
        html.theme-light body {
            color: var(--theme-text);
        }

        html.theme-light .bg-slate-950:not(#main-navbar),
        html.theme-light .bg-slate-900:not(#main-navbar) {
            background-color: var(--theme-bg) !important;
        }

        html.theme-light .text-white {
            color: var(--theme-text) !important;
        }

        /* Auf farbigen Buttons (Discord, Indigo-Solid, Primary-Fills, Gradient-CTAs)
           bleibt die Schrift/SVG weiß — auch im Light-Mode und auf Hover.
           Wir nutzen Attribut-Selektoren, um ALLE Tailwind-Farbtöne (-500/-600/-700)
           plus Gradient-Buttons abzudecken, ohne jede Klasse einzeln zu listen. */
        html.theme-light a[class*="bg-blue-5"],   html.theme-light button[class*="bg-blue-5"],
        html.theme-light a[class*="bg-blue-6"],   html.theme-light button[class*="bg-blue-6"],
        html.theme-light a[class*="bg-blue-7"],   html.theme-light button[class*="bg-blue-7"],
        html.theme-light a[class*="bg-sky-5"],    html.theme-light button[class*="bg-sky-5"],
        html.theme-light a[class*="bg-sky-6"],    html.theme-light button[class*="bg-sky-6"],
        html.theme-light a[class*="bg-cyan-5"],   html.theme-light button[class*="bg-cyan-5"],
        html.theme-light a[class*="bg-cyan-6"],   html.theme-light button[class*="bg-cyan-6"],
        html.theme-light a[class*="bg-indigo-5"], html.theme-light button[class*="bg-indigo-5"],
        html.theme-light a[class*="bg-indigo-6"], html.theme-light button[class*="bg-indigo-6"],
        html.theme-light a[class*="bg-indigo-7"], html.theme-light button[class*="bg-indigo-7"],
        html.theme-light a[class*="bg-violet-5"], html.theme-light button[class*="bg-violet-5"],
        html.theme-light a[class*="bg-violet-6"], html.theme-light button[class*="bg-violet-6"],
        html.theme-light a[class*="bg-violet-7"], html.theme-light button[class*="bg-violet-7"],
        html.theme-light a[class*="bg-purple-5"], html.theme-light button[class*="bg-purple-5"],
        html.theme-light a[class*="bg-purple-6"], html.theme-light button[class*="bg-purple-6"],
        html.theme-light a[class*="bg-purple-7"], html.theme-light button[class*="bg-purple-7"],
        html.theme-light a[class*="bg-fuchsia-5"],html.theme-light button[class*="bg-fuchsia-5"],
        html.theme-light a[class*="bg-fuchsia-6"],html.theme-light button[class*="bg-fuchsia-6"],
        html.theme-light a[class*="bg-pink-5"],   html.theme-light button[class*="bg-pink-5"],
        html.theme-light a[class*="bg-pink-6"],   html.theme-light button[class*="bg-pink-6"],
        html.theme-light a[class*="bg-rose-5"],   html.theme-light button[class*="bg-rose-5"],
        html.theme-light a[class*="bg-rose-6"],   html.theme-light button[class*="bg-rose-6"],
        html.theme-light a[class*="bg-red-5"],    html.theme-light button[class*="bg-red-5"],
        html.theme-light a[class*="bg-red-6"],    html.theme-light button[class*="bg-red-6"],
        html.theme-light a[class*="bg-red-7"],    html.theme-light button[class*="bg-red-7"],
        html.theme-light a[class*="bg-orange-5"], html.theme-light button[class*="bg-orange-5"],
        html.theme-light a[class*="bg-orange-6"], html.theme-light button[class*="bg-orange-6"],
        html.theme-light a[class*="bg-amber-5"],  html.theme-light button[class*="bg-amber-5"],
        html.theme-light a[class*="bg-amber-6"],  html.theme-light button[class*="bg-amber-6"],
        html.theme-light a[class*="bg-yellow-5"], html.theme-light button[class*="bg-yellow-5"],
        html.theme-light a[class*="bg-emerald-5"],html.theme-light button[class*="bg-emerald-5"],
        html.theme-light a[class*="bg-emerald-6"],html.theme-light button[class*="bg-emerald-6"],
        html.theme-light a[class*="bg-emerald-7"],html.theme-light button[class*="bg-emerald-7"],
        html.theme-light a[class*="bg-green-5"],  html.theme-light button[class*="bg-green-5"],
        html.theme-light a[class*="bg-green-6"],  html.theme-light button[class*="bg-green-6"],
        html.theme-light a[class*="bg-teal-5"],   html.theme-light button[class*="bg-teal-5"],
        html.theme-light a[class*="bg-teal-6"],   html.theme-light button[class*="bg-teal-6"],
        html.theme-light a[class*="bg-gradient-to-"], html.theme-light button[class*="bg-gradient-to-"],
        html.theme-light a.bg-\[\#5865F2\], html.theme-light button.bg-\[\#5865F2\],
        html.theme-light .home-btn-primary, html.theme-light .home-btn-secondary,
        html.theme-light .portal-btn-primary, html.theme-light .portal-btn-success,
        html.theme-light .portal-btn-danger, html.theme-light .portal-btn-warning,
        /* …deren Innentexte/Spans/Icons */
        html.theme-light a[class*="bg-blue-5"] *,    html.theme-light button[class*="bg-blue-5"] *,
        html.theme-light a[class*="bg-blue-6"] *,    html.theme-light button[class*="bg-blue-6"] *,
        html.theme-light a[class*="bg-blue-7"] *,    html.theme-light button[class*="bg-blue-7"] *,
        html.theme-light a[class*="bg-sky-5"] *,     html.theme-light button[class*="bg-sky-5"] *,
        html.theme-light a[class*="bg-sky-6"] *,     html.theme-light button[class*="bg-sky-6"] *,
        html.theme-light a[class*="bg-cyan-5"] *,    html.theme-light button[class*="bg-cyan-5"] *,
        html.theme-light a[class*="bg-cyan-6"] *,    html.theme-light button[class*="bg-cyan-6"] *,
        html.theme-light a[class*="bg-indigo-5"] *,  html.theme-light button[class*="bg-indigo-5"] *,
        html.theme-light a[class*="bg-indigo-6"] *,  html.theme-light button[class*="bg-indigo-6"] *,
        html.theme-light a[class*="bg-indigo-7"] *,  html.theme-light button[class*="bg-indigo-7"] *,
        html.theme-light a[class*="bg-violet-5"] *,  html.theme-light button[class*="bg-violet-5"] *,
        html.theme-light a[class*="bg-violet-6"] *,  html.theme-light button[class*="bg-violet-6"] *,
        html.theme-light a[class*="bg-violet-7"] *,  html.theme-light button[class*="bg-violet-7"] *,
        html.theme-light a[class*="bg-purple-5"] *,  html.theme-light button[class*="bg-purple-5"] *,
        html.theme-light a[class*="bg-purple-6"] *,  html.theme-light button[class*="bg-purple-6"] *,
        html.theme-light a[class*="bg-purple-7"] *,  html.theme-light button[class*="bg-purple-7"] *,
        html.theme-light a[class*="bg-fuchsia-5"] *, html.theme-light button[class*="bg-fuchsia-5"] *,
        html.theme-light a[class*="bg-fuchsia-6"] *, html.theme-light button[class*="bg-fuchsia-6"] *,
        html.theme-light a[class*="bg-pink-5"] *,    html.theme-light button[class*="bg-pink-5"] *,
        html.theme-light a[class*="bg-pink-6"] *,    html.theme-light button[class*="bg-pink-6"] *,
        html.theme-light a[class*="bg-rose-5"] *,    html.theme-light button[class*="bg-rose-5"] *,
        html.theme-light a[class*="bg-rose-6"] *,    html.theme-light button[class*="bg-rose-6"] *,
        html.theme-light a[class*="bg-red-5"] *,     html.theme-light button[class*="bg-red-5"] *,
        html.theme-light a[class*="bg-red-6"] *,     html.theme-light button[class*="bg-red-6"] *,
        html.theme-light a[class*="bg-red-7"] *,     html.theme-light button[class*="bg-red-7"] *,
        html.theme-light a[class*="bg-orange-5"] *,  html.theme-light button[class*="bg-orange-5"] *,
        html.theme-light a[class*="bg-orange-6"] *,  html.theme-light button[class*="bg-orange-6"] *,
        html.theme-light a[class*="bg-amber-5"] *,   html.theme-light button[class*="bg-amber-5"] *,
        html.theme-light a[class*="bg-amber-6"] *,   html.theme-light button[class*="bg-amber-6"] *,
        html.theme-light a[class*="bg-yellow-5"] *,  html.theme-light button[class*="bg-yellow-5"] *,
        html.theme-light a[class*="bg-emerald-5"] *, html.theme-light button[class*="bg-emerald-5"] *,
        html.theme-light a[class*="bg-emerald-6"] *, html.theme-light button[class*="bg-emerald-6"] *,
        html.theme-light a[class*="bg-emerald-7"] *, html.theme-light button[class*="bg-emerald-7"] *,
        html.theme-light a[class*="bg-green-5"] *,   html.theme-light button[class*="bg-green-5"] *,
        html.theme-light a[class*="bg-green-6"] *,   html.theme-light button[class*="bg-green-6"] *,
        html.theme-light a[class*="bg-teal-5"] *,    html.theme-light button[class*="bg-teal-5"] *,
        html.theme-light a[class*="bg-teal-6"] *,    html.theme-light button[class*="bg-teal-6"] *,
        html.theme-light a[class*="bg-gradient-to-"] *, html.theme-light button[class*="bg-gradient-to-"] *,
        html.theme-light a.bg-\[\#5865F2\] *, html.theme-light button.bg-\[\#5865F2\] *,
        html.theme-light .home-btn-primary *, html.theme-light .home-btn-secondary *,
        html.theme-light .portal-btn-primary *, html.theme-light .portal-btn-success *,
        html.theme-light .portal-btn-danger *, html.theme-light .portal-btn-warning * {
            color: #ffffff !important;
        }
        /* Tailwind-Buttons mit transparenter "bg-X/10" o.ä. (also nur Tint-Background)
           sollen NICHT weißen Text bekommen — bei diesen ist die Klasse z.B.
           "bg-blue-500/10". Wir korrigieren das, indem wir das pure-Color-Match
           "/" wieder freistellen. */
        html.theme-light a[class*="/10"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light a[class*="/15"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light a[class*="/20"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light a[class*="/25"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light a[class*="/30"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light button[class*="/10"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light button[class*="/15"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light button[class*="/20"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light button[class*="/25"][class*="bg-"]:not([class*="bg-gradient-to-"]),
        html.theme-light button[class*="/30"][class*="bg-"]:not([class*="bg-gradient-to-"]) {
            color: var(--theme-text) !important;
        }
        /* Auch deren Kinder (Span/SVG) dürfen nicht weiß werden — sonst sind
           Dropdown-Einträge mit hover:bg-…/15 unsichtbar auf weißem BG. */
        html.theme-light a[class*="/10"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light a[class*="/15"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light a[class*="/20"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light a[class*="/25"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light a[class*="/30"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light button[class*="/10"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light button[class*="/15"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light button[class*="/20"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light button[class*="/25"][class*="bg-"]:not([class*="bg-gradient-to-"]) *,
        html.theme-light button[class*="/30"][class*="bg-"]:not([class*="bg-gradient-to-"]) * {
            color: inherit !important;
        }
        /* SVG fill direkt setzen — currentColor wird sonst bei manchen Hover-
           States durch geerbte Farbe überschrieben. */
        html.theme-light a[class*="bg-blue-6"] svg,    html.theme-light a[class*="bg-blue-6"] svg path,
        html.theme-light a[class*="bg-indigo-6"] svg,  html.theme-light a[class*="bg-indigo-6"] svg path,
        html.theme-light a[class*="bg-violet-6"] svg,  html.theme-light a[class*="bg-violet-6"] svg path,
        html.theme-light a[class*="bg-purple-6"] svg,  html.theme-light a[class*="bg-purple-6"] svg path,
        html.theme-light a[class*="bg-emerald-6"] svg, html.theme-light a[class*="bg-emerald-6"] svg path,
        html.theme-light a[class*="bg-green-6"] svg,   html.theme-light a[class*="bg-green-6"] svg path,
        html.theme-light a[class*="bg-rose-6"] svg,    html.theme-light a[class*="bg-rose-6"] svg path,
        html.theme-light a[class*="bg-red-6"] svg,     html.theme-light a[class*="bg-red-6"] svg path,
        html.theme-light a[class*="bg-orange-5"] svg,  html.theme-light a[class*="bg-orange-5"] svg path,
        html.theme-light a[class*="bg-gradient-to-"] svg, html.theme-light a[class*="bg-gradient-to-"] svg path,
        html.theme-light button[class*="bg-gradient-to-"] svg, html.theme-light button[class*="bg-gradient-to-"] svg path,
        html.theme-light .home-btn-primary svg, html.theme-light .home-btn-primary svg path,
        html.theme-light .home-btn-secondary svg, html.theme-light .home-btn-secondary svg path,
        html.theme-light .portal-btn-primary svg, html.theme-light .portal-btn-primary svg path,
        html.theme-light .portal-btn-success svg, html.theme-light .portal-btn-success svg path,
        html.theme-light .portal-btn-danger svg, html.theme-light .portal-btn-danger svg path,
        html.theme-light a.bg-\[\#5865F2\] svg, html.theme-light a.bg-\[\#5865F2\] svg path {
            fill: #ffffff !important;
        }

        html.theme-light .text-slate-300,
        html.theme-light .text-slate-400 {
            color: var(--theme-text-muted) !important;
        }

        html.theme-light .text-slate-500,
        html.theme-light .text-slate-600 {
            color: var(--theme-text-dim) !important;
        }

        html.theme-light .border-white\\/10,
        html.theme-light .border-slate-700,
        html.theme-light .border-slate-700\\/60,
        html.theme-light .border-slate-700\\/80 {
            border-color: var(--theme-border-strong) !important;
        }

        /* Dropdown backgrounds */
        html.theme-light #portal_discord_dropdown {
            background-color: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
        }

        html.theme-light #portal_discord_dropdown a,
        html.theme-light #portal_discord_dropdown button {
            color: #334155 !important;
        }

        html.theme-light #portal_discord_dropdown a:hover,
        html.theme-light #portal_discord_dropdown button:hover {
            color: #0f172a !important;
            background-color: rgba(139, 92, 246, 0.06) !important;
        }

        /* Aktive Sprache im Sub-Flag-List ebenfalls hervorheben */
        html.theme-light #portal_discord_dropdown #notif-lang-flags button:hover {
            color: #0f172a !important;
            background-color: rgba(139, 92, 246, 0.08) !important;
        }

        /* Logout: rot sichtbar im Light-Mode (sonst überschreibt der generische
           Selector oben das text-red-400 des Links) */
        html.theme-light #portal_discord_dropdown a[data-portal-logout-btn],
        html.theme-light #portal_discord_dropdown a[href="/portal/logout"] {
            color: #dc2626 !important;
        }
        html.theme-light #portal_discord_dropdown a[data-portal-logout-btn]:hover,
        html.theme-light #portal_discord_dropdown a[href="/portal/logout"]:hover {
            color: #b91c1c !important;
            background-color: rgba(220, 38, 38, 0.10) !important;
        }
        html.theme-light #portal_discord_dropdown a[data-portal-logout-btn] svg,
        html.theme-light #portal_discord_dropdown a[href="/portal/logout"] svg {
            color: #dc2626 !important;
        }

        /* Dark-Mode: Hover für Theme- und Sprach-Buttons im Avatar-Dropdown
           (Tailwinds hover:bg-* verliert gegen inline style="background:none") */
        #portal_discord_dropdown #theme-toggle-wrapper button:hover,
        #portal_discord_dropdown #lang-toggle-btn:hover,
        #portal_discord_dropdown .notif-lang-btn:hover {
            background-color: rgba(139, 92, 246, 0.15) !important;
            color: #ffffff !important;
        }
        /* Light-Mode-Variante – darf gegenüber dem Dark-Default gewinnen */
        html.theme-light #portal_discord_dropdown #theme-toggle-wrapper button:hover,
        html.theme-light #portal_discord_dropdown #lang-toggle-btn:hover,
        html.theme-light #portal_discord_dropdown .notif-lang-btn:hover {
            background-color: rgba(139, 92, 246, 0.08) !important;
            color: #0f172a !important;
        }

        /* Navbar text in light mode */
        html.theme-light #main-navbar .nav-buttons-group a {
            color: #475569 !important;
        }

        html.theme-light #main-navbar .nav-buttons-group a:hover,
        html.theme-light #main-navbar .nav-buttons-group a[aria-current="page"] {
            color: #0f172a !important;
        }

        /* Portal cards & surfaces in light mode */
        html.theme-light .portal-card,
        html.theme-light .portal-data-field {
            background-color: var(--theme-bg-surface) !important;
            border-color: var(--theme-border) !important;
        }

        /* Footer in light mode */
        html.theme-light .footer-link {
            color: var(--theme-text-dim) !important;
        }

        html.theme-light .footer-link:hover {
            color: var(--theme-link) !important;
        }

        /* Neural canvas: bleibt auch im Light-Theme im Dark-Design.
           Eigener dunkler Hintergrund, keine Blend-Modes, volle Opacity,
           damit das neuronale Netz immer wie im Dark-Mode wirkt. */
        html.theme-light #neuralCanvas {
            opacity: 1 !important;
            mix-blend-mode: normal !important;
            background-color: #05070d !important;
        }

        /* Glow ring hidden in light mode */
        html.theme-light .glow-ring {
            display: none !important;
        }

        /* Pill/badge backgrounds in light mode */
        html.theme-light .pill {
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), rgba(147, 51, 234, 0.12));
            border-color: var(--theme-border);
        }

        /* Divider in light mode */
        html.theme-light .divider {
            background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
        }

        /* Additional Tailwind dark-color class overrides for board/news pages */
        html.theme-light .text-gray-300 {
            color: var(--theme-text-muted) !important;
        }

        html.theme-light .text-gray-400 {
            color: var(--theme-text-dim) !important;
        }

        html.theme-light .text-gray-500 {
            color: #64748b !important;
        }

        html.theme-light .bg-slate-700\/50,
        html.theme-light .bg-slate-800\/60 {
            background-color: rgba(148, 163, 184, 0.15) !important;
        }

        html.theme-light .bg-slate-600 {
            background-color: #64748b !important;
        }

        html.theme-light .hover\:bg-slate-600:hover {
            background-color: #94a3b8 !important;
        }

        html.theme-light .hover\:text-white:hover {
            color: var(--theme-text) !important;
        }

        html.theme-light .border-slate-600\/40 {
            border-color: var(--theme-border) !important;
        }

        html.theme-light .bg-slate-700 {
            background-color: #94a3b8 !important;
        }

        /* ── Home page / generic page light overrides ── */
        html.theme-light .from-slate-900\/95 { --tw-gradient-from: rgba(255,255,255,0.95) !important; }
        html.theme-light .to-slate-950\/95 { --tw-gradient-to: rgba(241,245,249,0.95) !important; }
        html.theme-light .bg-gradient-to-b.from-slate-900\/95 {
            background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(241,245,249,0.95)) !important;
        }
        html.theme-light .border-white\/\[0\.07\],
        html.theme-light .border-white\/10 {
            border-color: rgba(15, 23, 42, 0.08) !important;
        }
        html.theme-light .bg-white\/\[0\.04\] {
            background-color: rgba(15, 23, 42, 0.03) !important;
        }
        html.theme-light .hover\:bg-white\/\[0\.08\]:hover {
            background-color: rgba(15, 23, 42, 0.06) !important;
        }
        html.theme-light .text-blue-300 { color: #2563eb !important; }
        html.theme-light .text-blue-400 { color: #3b82f6 !important; }
        html.theme-light .text-purple-300 { color: #7c3aed !important; }
        html.theme-light .text-purple-400 { color: #8b5cf6 !important; }
        html.theme-light .text-emerald-400 { color: #059669 !important; }
        html.theme-light .text-amber-400 { color: #d97706 !important; }
        html.theme-light .text-cyan-400 { color: #0891b2 !important; }
        html.theme-light .text-indigo-300 { color: #4f46e5 !important; }
        html.theme-light .text-indigo-400 { color: #6366f1 !important; }

        html.theme-light .text-slate-100 { color: #0f172a !important; }
        html.theme-light .text-slate-200 { color: #1e293b !important; }

        html.theme-light .bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.08) !important; }
        html.theme-light .border-blue-400\/20 { border-color: rgba(59, 130, 246, 0.15) !important; }
        html.theme-light .bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.08) !important; }

        html.theme-light .bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.8) !important; }
        html.theme-light .bg-slate-800\/50 { background-color: rgba(241, 245, 249, 0.5) !important; }
        html.theme-light .bg-slate-800\/40 { background-color: rgba(241, 245, 249, 0.4) !important; }
        html.theme-light .bg-slate-800\/90 { background-color: rgba(255, 255, 255, 0.9) !important; }

        html.theme-light .border-slate-800 { border-color: rgba(15, 23, 42, 0.08) !important; }
        html.theme-light .border-slate-800\/60 { border-color: rgba(15, 23, 42, 0.06) !important; }

        /* Footer light overrides */
        html.theme-light footer.bg-slate-950\/80 {
            background-color: rgba(255, 255, 255, 0.9) !important;
            border-top-color: rgba(15, 23, 42, 0.06) !important;
        }
        html.theme-light footer .bg-slate-950 {
            background-color: rgba(248, 250, 252, 0.95) !important;
        }
        html.theme-light footer .border-white\/\[0\.05\],
        html.theme-light footer .border-white\/\[0\.06\] {
            border-color: rgba(15, 23, 42, 0.06) !important;
        }
        html.theme-light footer .bg-white\/\[0\.04\] {
            background-color: rgba(15, 23, 42, 0.04) !important;
        }
        html.theme-light footer .bg-white\/\[0\.04\]:hover {
            background-color: rgba(15, 23, 42, 0.08) !important;
        }
        html.theme-light footer .hover\:border-white\/\[0\.12\]:hover {
            border-color: rgba(15, 23, 42, 0.12) !important;
        }
        html.theme-light footer .hover\:text-white:hover {
            color: #0f172a !important;
        }

        /* Slate-950/80 backgrounds in light mode (non-footer) */
        html.theme-light .bg-slate-950\/80 {
            background-color: rgba(255, 255, 255, 0.85) !important;
        }

        /* More bg overrides for home/generic pages */
        html.theme-light .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.7) !important; }
        html.theme-light .bg-slate-950\/60 { background-color: rgba(248, 250, 252, 0.7) !important; }
        html.theme-light .bg-white\/\[0\.03\],
        html.theme-light .bg-white\/\[0\.05\] { background-color: rgba(15, 23, 42, 0.03) !important; }
        html.theme-light .bg-white\/5 { background-color: rgba(15, 23, 42, 0.05) !important; }
        html.theme-light .border-white\/\[0\.05\],
        html.theme-light .border-white\/\[0\.06\],
        html.theme-light .border-white\/\[0\.08\],
        html.theme-light .border-white\/5 { border-color: rgba(15, 23, 42, 0.08) !important; }

        /* ===== page-surface windows (accept_rules, login, checkout, cooldown, cancel) ===== */
        /* Innere Karten / Panels */
        html.theme-light .page-surface .bg-slate-800\/20,
        html.theme-light .page-surface .bg-slate-800\/30 {
            background-color: rgba(15, 23, 42, 0.03) !important;
        }
        html.theme-light .page-surface .bg-slate-800\/10 {
            background-color: rgba(15, 23, 42, 0.02) !important;
        }
        /* Buttons im page-surface mit slate-bg */
        html.theme-light .page-surface a.bg-slate-800\/30,
        html.theme-light .page-surface button.bg-slate-800\/30 {
            background-color: rgba(15, 23, 42, 0.05) !important;
            color: #475569 !important;
        }
        html.theme-light .page-surface a.bg-slate-800\/30:hover,
        html.theme-light .page-surface button.bg-slate-800\/30:hover {
            background-color: rgba(239, 68, 68, 0.08) !important;
            color: #dc2626 !important;
        }
        /* Borders */
        html.theme-light .page-surface .border-slate-700\/50,
        html.theme-light .page-surface .border-slate-700\/40,
        html.theme-light .page-surface .border-slate-700\/30,
        html.theme-light .page-surface .border-slate-600,
        html.theme-light .page-surface .border-slate-600\/50 {
            border-color: rgba(15, 23, 42, 0.10) !important;
        }
        /* Checkboxes / radios: slate-900 bg */
        html.theme-light .page-surface input[type="checkbox"],
        html.theme-light .page-surface input[type="radio"] {
            background-color: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.25) !important;
        }
        html.theme-light .page-surface input[type="checkbox"]:checked {
            background-color: #6366f1 !important;
            border-color: #6366f1 !important;
        }
        html.theme-light .page-surface input[type="checkbox"].text-amber-500:checked {
            background-color: #d97706 !important;
            border-color: #d97706 !important;
        }
        /* Text innerhalb page-surface */
        html.theme-light .page-surface .text-slate-300 { color: #1e293b !important; }
        html.theme-light .page-surface .text-slate-400 { color: #475569 !important; }
        html.theme-light .page-surface .text-slate-500 { color: #64748b !important; }
        html.theme-light .page-surface .text-indigo-300 { color: #4f46e5 !important; }
        html.theme-light .page-surface .text-indigo-400 { color: #6366f1 !important; }
        html.theme-light .page-surface .text-amber-300 { color: #b45309 !important; }
        html.theme-light .page-surface .text-amber-400 { color: #d97706 !important; }

        /* Primary-Button im page-surface (indigo) — stärkerer Fokus-Ring im Light */
        html.theme-light .page-surface .bg-indigo-600 {
            background-color: #4f46e5 !important;
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25) !important;
        }
        html.theme-light .page-surface .bg-indigo-600:hover {
            background-color: #4338ca !important;
            box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35) !important;
        }
        html.theme-light .page-surface .shadow-indigo-900\/30 {
            --tw-shadow-color: rgba(79, 70, 229, 0.25) !important;
        }

        /* Amber-Warnkarte (Early-Access) soll heller bleiben, aber textuell lesbar */
        html.theme-light .page-surface .bg-amber-500\/5 {
            background-color: rgba(245, 158, 11, 0.06) !important;
        }
        html.theme-light .page-surface .border-amber-500\/30 {
            border-color: rgba(245, 158, 11, 0.35) !important;
        }

        /* Gradient-Title auf Light-Bg fällt blass aus → sattere Purple-Endfarbe */
        html.theme-light .page-surface .gradient-title,
        html.theme-light .page-surface h1.gradient-title {
            background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
        }

        /* Status-Messages in page-surface */
        html.theme-light .page-surface .bg-green-500\/20 {
            background-color: rgba(16, 185, 129, 0.10) !important;
        }
        html.theme-light .page-surface .text-green-300 { color: #047857 !important; }
        html.theme-light .page-surface .bg-red-500\/20 {
            background-color: rgba(239, 68, 68, 0.10) !important;
        }
        html.theme-light .page-surface .text-red-300 { color: #b91c1c !important; }

        /* Links in page-surface */
        html.theme-light .page-surface a.text-indigo-400 { color: #4f46e5 !important; }
        html.theme-light .page-surface a.text-indigo-400:hover { color: #3730a3 !important; }
    


        /* ══ Fusszeile auf schmalen Telefonen (27.07.2026) ══════════════════
           Das Drei-Spalten-Raster brauchte bei 320 px Schirmbreite 288 px in
           einem 272-px-Kasten: die linke Spalte stand 9 px IM Polster, rechts
           blieben nur 8 px zum Rand - die Fusszeile klebte schief an beiden
           Kanten. Unter 480 px stehen deshalb zwei Textspalten nebeneinander
           und "Social" als eigene Zeile darunter (die vier Eintraege laufen
           dort als umbruchfaehige Reihe). Trefferflaechen 24 → 33 px.
           Ab 480 px bleibt alles wie bisher.
           ⚠️ Gilt fuer JEDE Seite mit components/footer.html - also Markets
           UND die Aiory-Portalseiten. Beim Aendern den ?v=-Buster in
           components/layout.html erhoehen, sonst liegt die alte Fassung
           tagelang im Browsercache. */
        @media (max-width: 479.98px) {
            footer .grid.grid-cols-3 { grid-template-columns: 1fr 1fr; gap: 1.1rem .9rem; }
            footer .grid.grid-cols-3 > div { justify-self: start; }
            footer .grid.grid-cols-3 > div:nth-child(3) { grid-column: 1 / -1; }
            footer .grid.grid-cols-3 > div:nth-child(3) > .flex.flex-col {
                flex-direction: row; flex-wrap: wrap; gap: .3rem .85rem;
            }
            footer .footer-link { padding-top: .4rem; padding-bottom: .4rem; }
            footer > div.max-w-2xl { padding-left: 1rem; padding-right: 1rem; }
            footer .max-w-6xl { padding-left: 1rem; padding-right: 1rem; }
        }