/* ═══════════════════════════════════════════════════════════
   03-UTILITIES.CSS — Glass Surfaces, Glows, Overlays & Utilities
   ══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   PITCH BLACK TEXT ENFORCEMENT ON ALL BRIGHT CTA BUTTONS
══════════════════════════════════════════════════════════ */
body:not(.light-mode) .item-app div[style*="background"] span,
body:not(.light-mode) .item-app div[style*="background"] i,
body:not(.light-mode) .app-card-premium div[style*="background"] span,
body:not(.light-mode) .app-card-premium div[style*="background"] i,
body:not(.light-mode) .item-app span.text-black,
body:not(.light-mode) .item-app i.text-black,
body:not(.light-mode) span.text-black,
div[style*="background:#00FF66"] span,
div[style*="background:#00FF66"] i,
div[style*="background:#F59E0B"] span,
div[style*="background:#F59E0B"] i,
div[style*="background:#06B6D4"] span,
div[style*="background:#06B6D4"] i,
a[style*="background:#00FF66"],
a[style*="background:#F59E0B"],
a[style*="background:#06B6D4"] {
    color: #000000 !important;
}

/* ═══════════════════════════════════════════════════════════
   GLASS UTILITY CLASSES
══════════════════════════════════════════════════════════ */
.glass-level-1 {
    background: var(--glass-1) !important;
    border: 1px solid var(--c-border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-level-2 {
    background: var(--glass-2) !important;
    border: 1px solid var(--c-border) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.glass-level-3 {
    background: var(--glass-3) !important;
    border: 1px solid var(--c-border) !important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

.emerald-glow {
    box-shadow: 0 0 24px rgba(78,222,163,0.15), 0 4px 16px rgba(0,0,0,0.4) !important;
}

.glass-header {
    background: rgba(11,19,38,0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid var(--c-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR — Custom dark scrollbar
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: rgba(78,222,163,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(78,222,163,0.5); }

.custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(78,222,163,0.3) transparent; }
html.light .custom-scrollbar,
body.light-mode .custom-scrollbar {
    scrollbar-color: rgba(16, 185, 129, 0.4) transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   ULTRA-SPEED RENDERING & FUTURISTIC GRAPHICS ENGINE
══════════════════════════════════════════════════════════ */

/* Hardware Accelerated Smooth Rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Below-the-fold content visibility optimization */
.related-apps-section,
.category-showcase-block,
footer#site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}

/* Futuristic Cyber Text Gradient */
.cyber-title-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Futuristic Custom Cyber Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0b1326;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #10b981, #0d9488);
    border-radius: 4px;
    border: 2px solid #0b1326;
}

::-webkit-scrollbar-thumb:hover {
    background: #34d399;
}

html.light #site-footer,
body.light-mode #site-footer {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

html.light #site-footer h4,
body.light-mode #site-footer h4 {
    color: #ffffff !important;
}

html.light #mobile-bottom-nav,
body.light-mode #mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

html.light #drawer-panel,
body.light-mode #drawer-panel {
    background: rgba(255, 255, 255, 0.98) !important;
    border-right-color: rgba(0, 0, 0, 0.08) !important;
}

html.light #drawer-panel a,
body.light-mode #drawer-panel a {
    color: #334155 !important;
}

html.light #drawer-panel a:hover,
body.light-mode #drawer-panel a:hover {
    color: #10b981 !important;
}

html.light #searchModal,
body.light-mode #searchModal {
    background: rgba(15, 23, 42, 0.92) !important;
}

/* ═══════════════════════════════════════════════════════════
   5. BRAND ACCENTS (VIVID EMERALD & CYAN ONLY)
   ══════════════════════════════════════════════════════════ */
.text-brand-primary,
.accent-brand {
    color: #10b981 !important;
}

/* ── Overlays & Header Glass ── */
.theme-bg-overlay {
    background: #000000;
    transition: background 0.2s ease;
}
html.dark .theme-bg-overlay,
body:not(.light-mode) .theme-bg-overlay {
    background: #000000 !important;
}
html.light .theme-bg-overlay,
html:not(.dark) .theme-bg-overlay,
body.light-mode .theme-bg-overlay {
    background: #ffffff !important;
}

.site-header-glass {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
html.dark .site-header-glass,
body:not(.light-mode) .site-header-glass {
    background: rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
html.light .site-header-glass,
html:not(.dark) .site-header-glass,
body.light-mode .site-header-glass {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

html.light .site-header-glass a,
html:not(.dark) .site-header-glass a,
body.light-mode .site-header-glass a {
    color: #000000 !important;
}
html.light .site-header-glass a:hover,
html:not(.dark) .site-header-glass a:hover,
body.light-mode .site-header-glass a:hover {
    color: #059669 !important;
}