/* ==========================================================================
   VNCOD Theme & Multi-Language System
   High-Contrast Light / Dark Mode & Vietnamese / English System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR PALETTES & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root[data-theme="light"],
html.theme-light {
    color-scheme: light;
    --bg: #f8fafc;
    --surface: #ffffff;
    --panel: #ffffff;
    --raised: #f1f5f9;
    --line: rgba(15, 23, 42, 0.12);
    --line-strong: rgba(15, 23, 42, 0.24);
    --muted: #475569;        /* Slate 600: strong readable secondary text */
    --subtle: #64748b;       /* Slate 500: readable labels & metadata */
    --text: #0f172a;         /* Slate 900: high-contrast dark text */
    --accent: #059669;       /* Deep Emerald 600 */
    --accent-hover: #047857;
    --danger: #dc2626;
    --success-bg: rgba(5, 150, 105, 0.08);
    --danger-bg: rgba(220, 38, 38, 0.08);
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY & CONTRAST FIXES IN LIGHT MODE
   -------------------------------------------------------------------------- */
html.theme-light,
html.theme-light body,
:root[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Headings: Deep Slate 900 for razor-sharp readability */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4 {
    color: #0f172a !important;
}

/* Paragraphs & General text */
html.theme-light p,
:root[data-theme="light"] p {
    color: #334155;
}

html.theme-light strong,
html.theme-light b {
    color: inherit;
}

/* Muted & Secondary text */
html.theme-light .muted,
:root[data-theme="light"] .muted,
html.theme-light p.muted,
html.theme-light small.muted,
html.theme-light span.muted,
html.theme-light div.muted {
    color: #475569 !important;
}

html.theme-light .subtle,
:root[data-theme="light"] .subtle {
    color: #64748b !important;
}

/* Universal override for hardcoded inline white colors (excluding dark buttons & badges) */
html.theme-light [style*="color:#fff"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color: #fff"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color:#ffffff"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color: #ffffff"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color:white"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color: white"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color:rgba(255, 255, 255"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color: rgba(255, 255, 255"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *),
html.theme-light [style*="color:rgba(255,255,255"]:not(.vncod-theme-btn *):not(.badge-dark *):not(.btn):not(.btn *):not(.btn-primary):not(.btn-primary *):not(.topbar-btn-primary):not(.topbar-btn-primary *):not(.btn-submit):not(.btn-submit *):not(.btn-purchase-submit):not(.btn-purchase-submit *):not(.vncod-demo-btn-primary):not(.vncod-demo-btn-primary *):not(.zalo-btn):not(.zalo-btn *) {
    color: #0f172a !important;
}

html.theme-light p[style*="color:#fff"]:not(.btn *),
html.theme-light p[style*="color: #fff"]:not(.btn *),
html.theme-light p[style*="color:rgba(255"]:not(.btn *),
html.theme-light p[style*="color: rgba(255"]:not(.btn *) {
    color: #334155 !important;
}

/* Guarantee crisp white text on all dark-background buttons */
html.theme-light .btn,
html.theme-light .btn *,
html.theme-light .btn-submit,
html.theme-light .btn-submit *,
html.theme-light .btn-purchase-submit,
html.theme-light .btn-purchase-submit *,
html.theme-light .topbar-btn-primary,
html.theme-light .topbar-btn-primary *,
html.theme-light .vncod-demo-btn-primary,
html.theme-light .vncod-demo-btn-primary *,
html.theme-light .zalo-btn,
html.theme-light .zalo-btn * {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3. TAILWIND & HOMEPAGE (index.html) CONTRAST OVERRIDES
   -------------------------------------------------------------------------- */
/* Tailwind text-white classes */
html.theme-light .text-white,
:root[data-theme="light"] .text-white {
    color: #0f172a !important;
}
html.theme-light .text-white\/90,
:root[data-theme="light"] .text-white\/90 {
    color: #0f172a !important;
}
html.theme-light .text-white\/80,
:root[data-theme="light"] .text-white\/80 {
    color: #1e293b !important;
}
html.theme-light .text-white\/70,
:root[data-theme="light"] .text-white\/70 {
    color: #334155 !important;
}
html.theme-light .text-white\/60,
:root[data-theme="light"] .text-white\/60 {
    color: #475569 !important;
}
html.theme-light .text-white\/50,
:root[data-theme="light"] .text-white\/50 {
    color: #475569 !important;
}
html.theme-light .text-white\/40,
:root[data-theme="light"] .text-white\/40 {
    color: #64748b !important;
}
html.theme-light .text-white\/30,
:root[data-theme="light"] .text-white\/30 {
    color: #64748b !important;
}
html.theme-light .text-white\/20,
:root[data-theme="light"] .text-white\/20 {
    color: #94a3b8 !important;
}
html.theme-light .hover\:text-white:hover {
    color: #0f172a !important;
}
html.theme-light .hover\:text-white\/90:hover {
    color: #0f172a !important;
}
html.theme-light .hover\:text-white\/80:hover {
    color: #1e293b !important;
}
html.theme-light .hover\:text-white\/60:hover {
    color: #334155 !important;
}
html.theme-light .hover\:text-white\/40:hover {
    color: #475569 !important;
}

/* Gradient text with bg-clip-text on hero and titles */
html.theme-light .bg-clip-text,
:root[data-theme="light"] .bg-clip-text {
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    background: none !important;
}
html.theme-light p.bg-clip-text,
:root[data-theme="light"] p.bg-clip-text {
    -webkit-text-fill-color: #334155 !important;
    color: #334155 !important;
    background: none !important;
}

/* SVG Logo text and gradients */
html.theme-light #paint_vncod_nav stop,
html.theme-light #paint_vietcod_nav stop {
    stop-color: #0f172a !important;
    stop-opacity: 1 !important;
}
html.theme-light svg text[fill*="paint_vncod"],
html.theme-light svg text[fill*="paint_vietcod"] {
    fill: #0f172a !important;
}

/* Tailwind border and background overrides */
html.theme-light .border-white\/20,
html.theme-light .border-white\/15,
html.theme-light .border-white\/10,
html.theme-light .border-white\/5,
html.theme-light .border-white\/\[0\.05\],
html.theme-light .md\:border-white\/10,
html.theme-light .md\:border-white\/5 {
    border-color: rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .bg-black,
html.theme-light .bg-\[\#000000\],
html.theme-light .bg-\[\#080808\],
html.theme-light .bg-\[\#111111\] {
    background-color: #ffffff !important;
}

html.theme-light .from-\[\#111111\],
html.theme-light .to-black {
    --tw-gradient-from: #ffffff !important;
    --tw-gradient-to: #f8fafc !important;
}

html.theme-light .bg-white\/5,
html.theme-light .bg-white\/10,
html.theme-light .bg-white\/\[0\.01\],
html.theme-light .bg-white\/\[0\.02\] {
    background-color: rgba(15, 23, 42, 0.03) !important;
}

/* --------------------------------------------------------------------------
   HERO CIRCUIT BOARD & MOTHERBOARD ANIMATION IN LIGHT MODE
   -------------------------------------------------------------------------- */
/* Establish stacking context so circuit elements stay in front of the page background */
html.theme-light .relative.w-full.pt-6.overflow-hidden,
html.theme-light .relative.w-full.flex.flex-col.items-center.justify-between {
    isolation: isolate;
}

/* Ensure hero text content and buttons stay sharply on top of the circuit board */
html.theme-light .relative.w-full.flex.flex-col.items-center.justify-between > div:first-child,
html.theme-light .container.relative.flex.flex-col.mx-auto.space-y-16,
html.theme-light .container.relative.flex.flex-col.mx-auto.space-y-16 h1,
html.theme-light .container.relative.flex.flex-col.mx-auto.space-y-16 p,
html.theme-light .container.relative.flex.flex-col.mx-auto.space-y-16 .flex.items-center.gap-6 {
    position: relative;
    z-index: 10 !important;
}

/* Light Mode high-definition circuit board SVG (Vncod processor chip, security chip, cyan & neon green pulses) */
html.theme-light img[src*="mainboard"],
html.theme-light #vncod-mainboard-hero,
html.theme-light #vncod-mainboard-mobile {
    z-index: 1 !important;
    content: url('/_next/static/media/mainboard-light.svg') !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Secondary bottom circuit SVG (bus tracks, component outlines) */
html.theme-light svg[viewBox="0 0 908 357"],
html.theme-light svg.absolute.-bottom-\[224px\] {
    z-index: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

html.theme-light svg[viewBox="0 0 908 357"] path,
html.theme-light svg.absolute.-bottom-\[224px\] path {
    stroke: #0284c7 !important;
    stroke-opacity: 0.55 !important;
    stroke-width: 0.85 !important;
}

html.theme-light svg[viewBox="0 0 908 357"] rect,
html.theme-light svg.absolute.-bottom-\[224px\] rect {
    fill: #0ea5e9 !important;
    fill-opacity: 0.35 !important;
}

/* Top ambient tech grid & glow SVGs */
html.theme-light svg[viewBox="0 0 579 511"] {
    z-index: 1 !important;
    opacity: 0.45 !important;
    filter: invert(1) hue-rotate(180deg) !important;
    mix-blend-mode: multiply !important;
    pointer-events: none !important;
}

/* Landing Page Nav */
html.theme-light nav[style*="background-color: rgba(10, 15, 26"],
:root[data-theme="light"] nav[style*="background-color: rgba(10, 15, 26"],
html.theme-light nav {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
    backdrop-filter: blur(16px) !important;
}

html.theme-light nav a.text-white\/80,
html.theme-light nav .text-white\/80 {
    color: #334155 !important;
}
html.theme-light nav a.text-white\/80:hover,
html.theme-light nav .text-white\/80:hover {
    color: #0f172a !important;
}
html.theme-light nav a.text-white\/50,
html.theme-light nav .text-white\/50 {
    color: #475569 !important;
}
html.theme-light nav a.text-white\/50:hover,
html.theme-light nav .text-white\/50:hover {
    color: #0f172a !important;
}
html.theme-light nav a[href*="login"] div {
    color: #334155 !important;
}
html.theme-light nav a[href*="login"]:hover div {
    color: #0f172a !important;
}
html.theme-light nav a[href*="register"] div {
    background: #0f172a !important;
    color: #ffffff !important;
}

/* Landing Page Mobile Menu */
html.theme-light #mobile-nav-menu div {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top-color: rgba(15, 23, 42, 0.1) !important;
}
html.theme-light #mobile-nav-menu a {
    color: #1e293b !important;
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

/* --------------------------------------------------------------------------
   3.1. INTERACTIVE SERVICES SHOWCASE (TABS & IDE MOCKUP)
   -------------------------------------------------------------------------- */
/* Main outer showcase container */
html.theme-light div[class*="rounded-4xl"][class*="from-[#111111]"],
html.theme-light .from-\[\#111111\].to-black {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.08) !important;
}

/* Header of tab bar / editor top */
html.theme-light .editor-top-gradient {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
}

/* Large tabs across the top (Kinh doanh, Quản trị, Hạ tầng) */
html.theme-light .tab-large-btn {
    background: #e2e8f0 !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    border-bottom: none !important;
    color: #475569 !important;
    font-weight: 550 !important;
}

html.theme-light .tab-large-btn[data-state="active"],
html.theme-light .tab-large-btn[aria-selected="true"] {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
    border-bottom-color: #ffffff !important;
    color: #0f172a !important;
    font-weight: 650 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light .tab-large-btn svg path {
    fill: currentColor !important;
}

/* Sub-tabs vertical sidebar (Web Doanh Nghiệp, Web Bán Hàng, etc.) */
html.theme-light #tab-large-0 > div:first-child,
html.theme-light #tab-large-1 > div:first-child,
html.theme-light #tab-large-2 > div:first-child,
html.theme-light #tab-large-3 > div:first-child,
html.theme-light div[class*="sm:w-[216px]"] {
    background: #f8fafc !important;
    border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .tab-btn {
    color: #475569 !important;
    font-weight: 550 !important;
}

html.theme-light .tab-btn:hover {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

html.theme-light .tab-btn.bg-white\/10 {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
    font-weight: 650 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Tab content cards (All [id^="tab-small-"]) */
html.theme-light [id^="tab-small-"] {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.06) !important;
    color: #1e293b !important;
}

html.theme-light [id^="tab-small-"] pre {
    color: #1e293b !important;
}

html.theme-light [id^="tab-small-"] h2 {
    color: #0284c7 !important;
    font-weight: 700 !important;
}

html.theme-light [id^="tab-small-"] .desc {
    color: #334155 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

html.theme-light [id^="tab-small-"] h3 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.theme-light [id^="tab-small-"] li {
    color: #334155 !important;
    line-height: 1.65 !important;
}

html.theme-light [id^="tab-small-"] p {
    color: #334155 !important;
}

html.theme-light [id^="tab-small-"] strong,
html.theme-light [id^="tab-small-"] b {
    color: #0f172a !important;
}

html.theme-light [id^="tab-small-"] .zalo-btn {
    background: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
}

html.theme-light [id^="tab-small-"] .zalo-btn:hover {
    background: #047857 !important;
    color: #ffffff !important;
}

html.theme-light [id^="tab-small-"]::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   3.2. DEMO SHOWCASE CARDS (.vncod-demo-card)
   -------------------------------------------------------------------------- */
html.theme-light .vncod-demo-wrap {
    color: #0f172a !important;
}

html.theme-light .vncod-demo-title {
    color: #0f172a !important;
}

html.theme-light .vncod-demo-desc {
    color: #475569 !important;
}

html.theme-light .vncod-demo-kicker {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .vncod-demo-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

html.theme-light .vncod-demo-card:hover {
    background: #ffffff !important;
    border-color: rgba(5, 150, 105, 0.4) !important;
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .vncod-demo-name {
    color: #0f172a !important;
}

html.theme-light .vncod-demo-note {
    color: #475569 !important;
}

html.theme-light .vncod-demo-status {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}

html.theme-light .vncod-demo-btn-primary {
    background: #0f172a !important;
    color: #ffffff !important;
}

html.theme-light .vncod-demo-btn-primary:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

html.theme-light .vncod-demo-btn-secondary {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
}

html.theme-light .vncod-demo-btn-secondary:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

html.theme-light .vncod-demo-foot {
    color: #64748b !important;
}

/* --------------------------------------------------------------------------
   3.3. AUDIT LOGS & CMS DASHBOARD MOCKUPS
   -------------------------------------------------------------------------- */
/* Security Cards (Mã hóa bảo mật & Nhật ký vận hành) */
html.theme-light #vncod-crypto-card,
html.theme-light #vncod-audit-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.08) !important;
}

html.theme-light #vncod-crypto-card h3,
html.theme-light #vncod-audit-card h3 {
    color: #0f172a !important;
}

html.theme-light #vncod-crypto-card p,
html.theme-light #vncod-audit-card p {
    color: #475569 !important;
}

html.theme-light #vncod-crypto-card div[class*="bg-white/5"] {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

html.theme-light #vncod-crypto-card .text-white\/60 {
    color: #475569 !important;
}

html.theme-light #vncod-audit-card select {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
}

html.theme-light #vncod-audit-card table th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
}

html.theme-light #vncod-audit-card table td {
    color: #1e293b !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.theme-light #vncod-audit-card table tr:hover td {
    background: #f8fafc !important;
}

html.theme-light #vncod-audit-card .text-white,
html.theme-light #vncod-audit-card .text-white\/90 {
    color: #0f172a !important;
}

html.theme-light #vncod-audit-card .text-white\/40,
html.theme-light #vncod-audit-card .text-white\/50,
html.theme-light #vncod-audit-card .text-white\/60,
html.theme-light #vncod-audit-card .text-white\/70 {
    color: #64748b !important;
}

html.theme-light #vncod-audit-card td pre,
html.theme-light #vncod-audit-card td span {
    color: #1e293b !important;
}

/* CMS Dashboard Analytics Mockup */
html.theme-light .analytics-background-gradient {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

html.theme-light .analytics-background-gradient .text-white,
html.theme-light .analytics-background-gradient .text-white\/80 {
    color: #0f172a !important;
}

html.theme-light .analytics-background-gradient .text-white\/60 {
    color: #475569 !important;
}

html.theme-light .analytics-background-gradient .text-white\/40,
html.theme-light .analytics-background-gradient .text-white\/30,
html.theme-light .analytics-background-gradient .text-white\/20 {
    color: #64748b !important;
}

html.theme-light .analytics-background-gradient div[class*="border-white"],
html.theme-light .analytics-background-gradient div[class*="border-r"] {
    border-color: rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .analytics-background-gradient .bg-white\/10 {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html.theme-light .analytics-background-gradient .bg-white\/5,
html.theme-light .analytics-background-gradient .bg-white\/\[0\.02\],
html.theme-light .analytics-background-gradient .bg-white\/\[0\.01\] {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .analytics-background-gradient svg[fill="white"] {
    fill: #0f172a !important;
}

html.theme-light .analytics-background-gradient svg[stroke="white"] {
    stroke: #64748b !important;
}

html.theme-light .analytics-background-gradient .text-black.bg-white {
    background: #0f172a !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3.4. FOOTER & SITE BASELINE
   -------------------------------------------------------------------------- */
html.theme-light .blog-footer-radial-gradient,
html.theme-light footer {
    background: #ffffff !important;
    border-top-color: rgba(15, 23, 42, 0.12) !important;
}

html.theme-light footer .text-white {
    color: #0f172a !important;
}

html.theme-light footer .text-white\/70,
html.theme-light footer a.text-white\/70 {
    color: #475569 !important;
}

html.theme-light footer a.text-white\/70:hover {
    color: #0f172a !important;
}

html.theme-light footer .text-white\/60,
html.theme-light footer .text-white\/40 {
    color: #64748b !important;
}

html.theme-light .vncod-footer-bottom {
    background: #f8fafc !important;
    border-top: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #64748b !important;
}

html.theme-light .vncod-footer-wordmark {
    color: #0f172a !important;
}

html.theme-light .vncod-footer-links a {
    color: #475569 !important;
}

html.theme-light .vncod-footer-links a:hover {
    color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   4. CLIENT TOPBAR & NAVIGATION (account/_header.php)
   -------------------------------------------------------------------------- */
html.theme-light .topbar,
:root[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}

html.theme-light .brand,
:root[data-theme="light"] .brand {
    color: #0f172a !important;
}

html.theme-light .topbar-link,
:root[data-theme="light"] .topbar-link {
    color: #334155 !important;
    font-weight: 550 !important;
}

html.theme-light .topbar-link:hover,
:root[data-theme="light"] .topbar-link:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.06) !important;
}

html.theme-light .topbar-btn-primary,
:root[data-theme="light"] .topbar-btn-primary {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    font-weight: 600 !important;
}
html.theme-light .topbar-btn-primary:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

html.theme-light .topbar-user-badge,
:root[data-theme="light"] .topbar-user-badge {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}

/* Ambient Layer adjustments in Light Mode */
html.theme-light .bg-ambient-layer,
:root[data-theme="light"] .bg-ambient-layer {
    opacity: 0.35;
}

html.theme-light .bg-grid-mesh,
:root[data-theme="light"] .bg-grid-mesh {
    background-image: 
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
}

html.theme-light .glow-orb-top,
html.theme-light .glow-orb-left,
html.theme-light .glow-orb-right,
html.theme-light .glow-orb {
    opacity: 0.35 !important;
}

/* --------------------------------------------------------------------------
   5. CARDS, PANELS, FORMS & INPUTS
   -------------------------------------------------------------------------- */
html.theme-light .auth-card,
:root[data-theme="light"] .auth-card,
html.theme-light .panel,
:root[data-theme="light"] .panel,
html.theme-light .card,
:root[data-theme="light"] .card,
html.theme-light .recharge-hero,
:root[data-theme="light"] .recharge-hero,
html.theme-light .profile-hero,
:root[data-theme="light"] .profile-hero,
html.theme-light .source-info-section,
:root[data-theme="light"] .source-info-section,
html.theme-light .source-sidebar,
:root[data-theme="light"] .source-sidebar,
html.theme-light .vncod-source-card,
:root[data-theme="light"] .vncod-source-card,
html.theme-light .license-card,
:root[data-theme="light"] .license-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .auth-header h1,
html.theme-light .section-title,
html.theme-light .form h1,
html.theme-light .license-hero h1,
html.theme-light .source-sidebar h1,
html.theme-light .vncod-catalog-head h1,
html.theme-light .vncod-source-title,
html.theme-light .profile-section-head h2,
html.theme-light .recharge-section-head h2 {
    color: #0f172a !important;
}

html.theme-light .auth-header p,
html.theme-light .profile-section-head p,
html.theme-light .recharge-hero p,
html.theme-light .profile-hero p {
    color: #475569 !important;
}

html.theme-light .auth-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
}

html.theme-light .perk-item {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
html.theme-light .perk-item span {
    color: #475569 !important;
}

/* Inputs & Form Controls */
html.theme-light input,
html.theme-light select,
html.theme-light textarea,
html.theme-light .input-field,
:root[data-theme="light"] .input-field,
html.theme-light .field input,
:root[data-theme="light"] .field input,
html.theme-light .field textarea,
:root[data-theme="light"] .field textarea,
html.theme-light .field select,
:root[data-theme="light"] .field select,
html.theme-light .vncod-control,
:root[data-theme="light"] .vncod-control,
html.theme-light .actions select,
:root[data-theme="light"] .actions select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder,
html.theme-light .input-field::placeholder,
html.theme-light .vncod-control::placeholder {
    color: #94a3b8 !important;
}

html.theme-light .input-field:focus,
:root[data-theme="light"] .input-field:focus,
html.theme-light .field input:focus,
:root[data-theme="light"] .field input:focus,
html.theme-light .vncod-control:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
}

html.theme-light .form-label,
:root[data-theme="light"] .form-label,
html.theme-light .field label,
:root[data-theme="light"] .field label,
html.theme-light label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

html.theme-light .input-icon,
html.theme-light .toggle-pass {
    color: #64748b !important;
}
html.theme-light .toggle-pass:hover {
    color: #0f172a !important;
}

/* Action Buttons */
html.theme-light .btn,
html.theme-light .btn-submit,
:root[data-theme="light"] .btn-submit,
html.theme-light .btn-purchase-submit,
:root[data-theme="light"] .btn-purchase-submit {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    font-weight: 600 !important;
}

html.theme-light .btn:hover,
html.theme-light .btn-submit:hover,
:root[data-theme="light"] .btn-submit:hover,
html.theme-light .btn-purchase-submit:hover,
:root[data-theme="light"] .btn-purchase-submit:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}

html.theme-light .btn.secondary,
:root[data-theme="light"] .btn.secondary,
html.theme-light .copy-link-btn,
html.theme-light .btn-demo-action,
html.theme-light .btn-zalo-support {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
    font-weight: 550 !important;
}

html.theme-light .btn.secondary:hover,
:root[data-theme="light"] .btn.secondary:hover,
html.theme-light .copy-link-btn:hover,
html.theme-light .btn-demo-action:hover,
html.theme-light .btn-zalo-support:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   6. CATALOG & DETAIL PAGES (templates/index.php & source.php)
   -------------------------------------------------------------------------- */
html.theme-light .vncod-catalog {
    color: #0f172a !important;
}
html.theme-light .vncod-count-badge {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
html.theme-light .vncod-tools {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
html.theme-light .vncod-search-icon {
    color: #64748b !important;
}
html.theme-light .vncod-source-card:hover .vncod-source-title {
    color: #059669 !important;
}
html.theme-light .vncod-source-desc {
    color: #475569 !important;
}
html.theme-light .vncod-source-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}
html.theme-light .vncod-source-btn {
    color: #059669 !important;
    font-weight: 650 !important;
}
html.theme-light .vncod-source-placeholder {
    background: #f1f5f9 !important;
    color: #64748b !important;
}
html.theme-light .vncod-source-tag {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
    color: #059669 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Detail page (templates/source.php) */
html.theme-light .breadcrumb-nav,
html.theme-light .breadcrumb-nav a {
    color: #64748b !important;
}
html.theme-light .breadcrumb-nav a:hover {
    color: #0f172a !important;
}
html.theme-light .source-description-text {
    color: #334155 !important;
    line-height: 1.7 !important;
}
html.theme-light .spec-name,
html.theme-light .price-label {
    color: #64748b !important;
}
html.theme-light .spec-val {
    color: #0f172a !important;
    font-weight: 600 !important;
}
html.theme-light .source-price-box {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

/* --------------------------------------------------------------------------
   7. SERVICES (TestFlight, Licenses, SMM, Topup)
   -------------------------------------------------------------------------- */
/* TestFlight */
html.theme-light .pkg-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
html.theme-light .pkg-card div {
    color: #0f172a !important;
}
html.theme-light .pkg-card .muted {
    color: #64748b !important;
}
html.theme-light .pkg-card:hover,
html.theme-light .pkg-card.selected {
    background: rgba(2, 132, 199, 0.08) !important;
    border-color: #0284c7 !important;
}
html.theme-light .pkg-card strong {
    color: #0284c7 !important;
}

/* AI & Licenses */
html.theme-light .license-title {
    color: #0f172a !important;
}
html.theme-light .license-desc {
    color: #475569 !important;
}
html.theme-light .license-cat {
    background: rgba(5, 150, 105, 0.08) !important;
    border: 1px solid rgba(5, 150, 105, 0.25) !important;
    color: #059669 !important;
}
html.theme-light .license-stock {
    color: #059669 !important;
}
html.theme-light .license-price {
    color: #059669 !important;
}
html.theme-light .btn-buy-license {
    background: #059669 !important;
    color: #ffffff !important;
}
html.theme-light .btn-buy-license:hover {
    background: #047857 !important;
    color: #ffffff !important;
}
html.theme-light .btn-buy-license.disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
}
html.theme-light .key-modal-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}
html.theme-light .key-modal-card h2 {
    color: #0f172a !important;
}
html.theme-light .key-modal-card p {
    color: #475569 !important;
}
html.theme-light .key-display-box {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: #047857 !important;
}

/* Recharge & Topup */
html.theme-light .bank-item {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
html.theme-light .bank-item strong {
    color: #0f172a !important;
}
html.theme-light .bank-item span,
html.theme-light .transfer-code span,
html.theme-light .transfer-amount span {
    color: #64748b !important;
}
html.theme-light .transfer-amount {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
html.theme-light .transfer-amount strong {
    color: #0f172a !important;
}
html.theme-light .amount-grid button {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
}
html.theme-light .amount-grid button:hover,
html.theme-light .amount-grid button.active {
    background: rgba(5, 150, 105, 0.1) !important;
    border-color: #059669 !important;
    color: #059669 !important;
}
html.theme-light .custom-amount {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
html.theme-light .recharge-notice {
    background: rgba(5, 150, 105, 0.06) !important;
    border: 1px solid rgba(5, 150, 105, 0.22) !important;
    color: #065f46 !important;
}
html.theme-light .recharge-notice b {
    color: #0f172a !important;
}
html.theme-light .recharge-notice ul {
    color: #065f46 !important;
}
html.theme-light .btn-confirm-transfer {
    background: #059669 !important;
    color: #ffffff !important;
}
html.theme-light .btn-confirm-transfer:hover {
    background: #047857 !important;
    color: #ffffff !important;
}
html.theme-light .status-checking-box {
    background: rgba(5, 150, 105, 0.08) !important;
    border: 1px solid rgba(5, 150, 105, 0.28) !important;
    color: #065f46 !important;
}

/* Affiliate & SMM Services */
html.theme-light .copy-ref-box {
    background: #f8fafc !important;
    border: 1px solid rgba(5, 150, 105, 0.3) !important;
}
html.theme-light .copy-ref-input {
    color: #047857 !important;
}
html.theme-light #service-desc-box {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #334155 !important;
}

/* Alerts */
html.theme-light .alert {
    background: rgba(5, 150, 105, 0.08) !important;
    border: 1px solid rgba(5, 150, 105, 0.28) !important;
    color: #065f46 !important;
    font-weight: 550 !important;
}
html.theme-light .alert.error {
    background: rgba(220, 38, 38, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.28) !important;
    color: #991b1b !important;
    font-weight: 550 !important;
}

/* Tables */
html.theme-light .table th,
:root[data-theme="light"] .table th {
    color: #475569 !important;
    background: #f1f5f9 !important;
    font-weight: 650 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .table td,
:root[data-theme="light"] .table td {
    color: #1e293b !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .table tbody tr:hover,
:root[data-theme="light"] .table tbody tr:hover {
    background: #f8fafc !important;
}

html.theme-light .badge {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #334155 !important;
}

/* --------------------------------------------------------------------------
   8. ADMIN DASHBOARD (admin/_layout.php & admin/login.php)
   -------------------------------------------------------------------------- */
html.theme-light .admin-sidebar,
:root[data-theme="light"] .admin-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .admin-body,
:root[data-theme="light"] .admin-body {
    background: #f8fafc !important;
    color: #0f172a !important;
}

html.theme-light .admin-brand strong,
:root[data-theme="light"] .admin-brand strong {
    color: #0f172a !important;
}

html.theme-light .admin-brand small {
    color: #64748b !important;
}

html.theme-light .admin-nav-label {
    color: #64748b !important;
    font-weight: 700 !important;
}

html.theme-light .admin-nav a,
:root[data-theme="light"] .admin-nav a {
    color: #334155 !important;
}

html.theme-light .admin-nav a:hover,
:root[data-theme="light"] .admin-nav a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html.theme-light .admin-nav a.active,
:root[data-theme="light"] .admin-nav a.active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    font-weight: 650 !important;
}

html.theme-light .admin-nav-code {
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #64748b !important;
}

html.theme-light .admin-nav a.active .admin-nav-code {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

html.theme-light .admin-user {
    border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .admin-user strong,
:root[data-theme="light"] .admin-user strong {
    color: #0f172a !important;
}

html.theme-light .admin-user span {
    color: #64748b !important;
}

html.theme-light .admin-user-avatar {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html.theme-light .admin-stat,
:root[data-theme="light"] .admin-stat {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

html.theme-light .admin-stat strong,
:root[data-theme="light"] .admin-stat strong {
    color: #0f172a !important;
}

html.theme-light .admin-stat span,
html.theme-light .admin-stat small {
    color: #64748b !important;
}

html.theme-light .admin-panel-head {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .admin-panel-head h2 {
    color: #0f172a !important;
}

html.theme-light .admin-login-box .admin-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .admin-login-box h1 {
    color: #0f172a !important;
}

html.theme-light .admin-login-box p {
    color: #475569 !important;
}

/* --------------------------------------------------------------------------
   9. TOGGLE CONTROLS (THEME & LANGUAGE)
   -------------------------------------------------------------------------- */
.vncod-switchers-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

/* Theme Toggle Button */
.vncod-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text, #f5f5f5);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

html.theme-light .vncod-theme-btn {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.vncod-theme-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

html.theme-light .vncod-theme-btn:hover {
    background: rgba(15, 23, 42, 0.09);
}

.vncod-theme-btn svg {
    width: 17px;
    height: 17px;
    transition: transform 0.3s ease;
}

.vncod-theme-btn:active svg {
    transform: rotate(45deg);
}

/* Hide sun in dark mode, hide moon in light mode */
:root[data-theme="dark"] .icon-sun,
html:not(.theme-light) .icon-sun {
    display: block;
}
:root[data-theme="dark"] .icon-moon,
html:not(.theme-light) .icon-moon {
    display: none;
}

html.theme-light .icon-sun {
    display: none;
}
html.theme-light .icon-moon {
    display: block;
}

/* Language Selector Dropdown */
.vncod-lang-dropdown {
    position: relative;
    display: inline-block;
}

.vncod-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text, #f5f5f5);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

html.theme-light .vncod-lang-trigger {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.vncod-lang-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

html.theme-light .vncod-lang-trigger:hover {
    background: rgba(15, 23, 42, 0.09);
}

.vncod-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 135px;
    background: #0d0e12;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 1000;
    backdrop-filter: blur(16px);
}

html.theme-light .vncod-lang-menu {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.vncod-lang-menu.show {
    display: block;
    animation: vncodFadeIn 0.15s ease-out;
}

@keyframes vncodFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vncod-lang-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    font-weight: 550;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

html.theme-light .vncod-lang-opt {
    color: #334155;
}

.vncod-lang-opt:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

html.theme-light .vncod-lang-opt:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.vncod-lang-opt.active {
    color: var(--accent, #3ceaae);
    font-weight: 700;
}
html.theme-light .vncod-lang-opt.active {
    color: #059669;
}

/* Flag & Icons */
.vncod-flag-icon {
    font-size: 14px;
    line-height: 1;
}

/* ===== SECURE BOXES (TỐI ƯU HÓA DOANH THU) LIGHT MODE ===== */
html.theme-light .secure-box {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light .secure-box .text-white {
    color: #0f172a !important;
}

html.theme-light .secure-box .text-white\/60,
html.theme-light .secure-box .text-white\/40,
html.theme-light .secure-box .text-white\/30 {
    color: #64748b !important;
}

html.theme-light .secure-box:hover {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1) !important;
}


/* ===== REVENUE BENTO CARD & 5 VERIFY BOXES FIX ===== */
.revenue-bento-card {
    position: relative !important;
    height: 576px !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 32px !important;
}

.revenue-boxes-wrap {
    position: relative !important;
    width: 100% !important;
    margin-top: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 2 !important;
}

.revenue-box-item {
    width: 460px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
}

.revenue-box-card {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    border-radius: 12px !important;
    border: 0.75px solid rgba(255, 255, 255, 0.18) !important;
    padding: 11px 16px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
    backdrop-filter: blur(12px) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.revenue-box-text {
    display: flex !important;
    align-items: center !important;
    margin-left: 14px !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

.revenue-card-footer {
    position: absolute !important;
    left: 40px !important;
    bottom: 40px !important;
    max-width: 380px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
}

@media (max-width: 640px) {
    .revenue-card-footer {
        left: 20px !important;
        bottom: 24px !important;
    }
    .revenue-box-text {
        font-size: 12px !important;
        margin-left: 10px !important;
    }
}


/* ==========================================================================
   Hero & CTA Action Buttons (.hero-cta-group & .hero-btn) - Minimalist Monochrome
   ========================================================================== */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
    z-index: 10;
    position: relative;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

/* 1. Primary White Button: Server Game */
.hero-btn-primary {
    background: #ffffff;
    color: #09090b !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.9);
}
.hero-btn-primary:hover {
    transform: translateY(-2px);
    background: #f4f4f5;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
    color: #000000 !important;
}

/* 2. Minimalist Glass Button: Shop Nick */
.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-weight: 500;
}
.hero-btn-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.hero-btn-secondary .badge-subtle {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
}

/* 3. Minimalist Glass Button: VPS Giá Rẻ */
.hero-btn-glass {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    font-weight: 500;
}
.hero-btn-glass:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 4. Minimalist Ghost / Subtle Glass: Liên hệ tư vấn */
.hero-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 500;
}
.hero-btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

/* Light Theme Adaptations */
html.theme-light .hero-btn-primary,
:root[data-theme="light"] .hero-btn-primary {
    background: #0f172a;
    color: #ffffff !important;
    border-color: #0f172a;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}
html.theme-light .hero-btn-primary:hover,
:root[data-theme="light"] .hero-btn-primary:hover {
    background: #1e293b;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
}

html.theme-light .hero-btn-secondary,
:root[data-theme="light"] .hero-btn-secondary {
    background: #ffffff;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.16);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}
html.theme-light .hero-btn-secondary:hover,
:root[data-theme="light"] .hero-btn-secondary:hover {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.3);
}

html.theme-light .hero-btn-glass,
:root[data-theme="light"] .hero-btn-glass {
    background: #f1f5f9;
    color: #334155 !important;
    border: 1px solid rgba(15, 23, 42, 0.1);
}
html.theme-light .hero-btn-glass:hover,
:root[data-theme="light"] .hero-btn-glass:hover {
    background: #e2e8f0;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.2);
}

html.theme-light .hero-btn-ghost,
:root[data-theme="light"] .hero-btn-ghost {
    background: transparent;
    color: #475569 !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
html.theme-light .hero-btn-ghost:hover,
:root[data-theme="light"] .hero-btn-ghost:hover {
    background: #f1f5f9;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.18);
}


/* ==========================================================================
   Showcase Tabs Clean Sans-Serif Typography (Fix Monospace Issue)
   ========================================================================== */
.showcase-tab-content,
[id^="tab-small-"],
[id^="tab-small-"] *,
#tab-large-0,
#tab-large-1,
#tab-large-2,
#tab-large-3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Sidebar sub-tab buttons typography */
.tab-btn,
.tab-btn * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13.5px !important;
    letter-spacing: -0.01em !important;
    font-weight: 550 !important;
}

/* Top large tab buttons */
.tab-large-btn,
.tab-large-btn * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: -0.01em !important;
    font-size: 13.5px !important;
}

/* Tab content typography */
[id^="tab-small-"] {
    letter-spacing: -0.01em !important;
    font-size: 14.5px !important;
    line-height: 1.68 !important;
}

[id^="tab-small-"] h2 {
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
}

[id^="tab-small-"] .desc {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    letter-spacing: normal !important;
    margin-bottom: 16px !important;
}

[id^="tab-small-"] h3 {
    font-size: 14.5px !important;
    font-weight: 650 !important;
    letter-spacing: normal !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
}

[id^="tab-small-"] ul {
    margin-top: 6px !important;
    margin-bottom: 14px !important;
}

[id^="tab-small-"] li {
    font-size: 14px !important;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
    margin-bottom: 6px !important;
}

[id^="tab-small-"] b,
[id^="tab-small-"] strong {
    font-weight: 650 !important;
}

/* Only small file paths and system tags retain technical code monospace */
[id^="tab-small-"] span[class*="text-xxs"],
[id^="tab-small-"] span[class*="text-xs"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    letter-spacing: 0.02em !important;
}

/* Light Theme High Contrast & Razor Sharp Typography */
html.theme-light [id^="tab-small-"] h2 {
    color: #0f172a !important;
}

html.theme-light [id^="tab-small-"] .desc,
html.theme-light [id^="tab-small-"] p {
    color: #334155 !important;
}

html.theme-light [id^="tab-small-"] li {
    color: #334155 !important;
}

html.theme-light [id^="tab-small-"] b,
html.theme-light [id^="tab-small-"] strong {
    color: #0f172a !important;
}

html.theme-light [id^="tab-small-"] h3 {
    color: #0f172a !important;
}



/* ==========================================================================
   ULTRA-COMPREHENSIVE LIGHT THEME ENGINE (FIX WASHED-OUT, GLARE & UNREADABLE TEXT)
   Applies to: Home, Templates, Shop Acc, Key/AI, SMM, TestFlight, Affiliate,
               Topup, Profile, Login, Register, Forgot Password
   ========================================================================== */

/* 1. Global Core in Light Mode */
html.theme-light,
html.theme-light body,
:root[data-theme="light"],
:root[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Eliminate blinding glowing orbs & washes */
html.theme-light .glow-orb-top,
html.theme-light .glow-orb-left,
html.theme-light .glow-orb-right,
:root[data-theme="light"] .glow-orb-top,
:root[data-theme="light"] .glow-orb-left,
:root[data-theme="light"] .glow-orb-right {
    display: none !important;
}

/* Crisp delicate mesh grid on light background */
html.theme-light .bg-grid-mesh,
:root[data-theme="light"] .bg-grid-mesh {
    background-image: 
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
    opacity: 0.8 !important;
}

/* 2. Form Inputs, Textareas & Selects across ALL pages */
html.theme-light input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.theme-light textarea,
html.theme-light select,
html.theme-light .field input,
html.theme-light .field textarea,
html.theme-light .field select,
html.theme-light .form-input,
html.theme-light .input-box,
html.theme-light .filter-search-wrap input,
html.theme-light .filter-select,
html.theme-light .custom-amount input,
:root[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
:root[data-theme="light"] textarea,
:root[data-theme="light"] select,
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .input-box {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder,
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus,
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
    background-color: #ffffff !important;
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
    outline: none !important;
}

/* 3. Button Contrasts in Light Mode */
html.theme-light .btn,
:root[data-theme="light"] .btn {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}
html.theme-light .btn:hover,
:root[data-theme="light"] .btn:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
}

html.theme-light .btn.secondary,
html.theme-light .btn-secondary,
html.theme-light .btn-view-detail,
:root[data-theme="light"] .btn.secondary,
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .btn-view-detail {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html.theme-light .btn.secondary:hover,
html.theme-light .btn-view-detail:hover,
:root[data-theme="light"] .btn.secondary:hover,
:root[data-theme="light"] .btn-view-detail:hover {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.28) !important;
    color: #0f172a !important;
}

html.theme-light .btn.danger,
:root[data-theme="light"] .btn.danger {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
}

/* Primary Action Buttons */
html.theme-light .btn-buy-acc,
html.theme-light .btn-buy-license,
html.theme-light .btn-submit,
:root[data-theme="light"] .btn-buy-acc,
:root[data-theme="light"] .btn-buy-license,
:root[data-theme="light"] .btn-submit {
    background: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #059669 !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}
html.theme-light .btn-buy-acc:hover,
html.theme-light .btn-buy-license:hover,
html.theme-light .btn-submit:hover,
:root[data-theme="light"] .btn-buy-acc:hover,
:root[data-theme="light"] .btn-buy-license:hover,
:root[data-theme="light"] .btn-submit:hover {
    background: #047857 !important;
}

/* 4. Cards & Containers across ALL pages */
html.theme-light .card,
html.theme-light .panel,
html.theme-light .stat,
html.theme-light .box,
html.theme-light .game-card,
html.theme-light .license-card,
html.theme-light .order-card,
html.theme-light .pkg-card,
html.theme-light .auth-card,
html.theme-light .filter-box,
html.theme-light .my-acc-panel,
html.theme-light .recharge-hero,
html.theme-light .profile-hero,
html.theme-light .profile-sidebar,
html.theme-light .profile-stat,
html.theme-light .admin-stat,
html.theme-light .admin-data-panel,
html.theme-light .qr-panel,
html.theme-light .transfer-panel,
html.theme-light .qr-card,
html.theme-light .user-wallet-banner,
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .box,
:root[data-theme="light"] .game-card,
:root[data-theme="light"] .license-card,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .pkg-card,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .filter-box,
:root[data-theme="light"] .my-acc-panel,
:root[data-theme="light"] .user-wallet-banner {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    color: #0f172a !important;
}

html.theme-light .game-card:hover,
html.theme-light .license-card:hover,
:root[data-theme="light"] .game-card:hover,
:root[data-theme="light"] .license-card:hover {
    border-color: #059669 !important;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12) !important;
}

/* 5. Typography on Cards & Headers */
html.theme-light .card-title,
html.theme-light .license-title,
html.theme-light .card-body h3,
html.theme-light .license-card h2,
html.theme-light .panel h1,
html.theme-light .panel h2,
html.theme-light .panel h3,
html.theme-light .auth-card h1,
html.theme-light .auth-card h2,
html.theme-light .game-hero h1,
html.theme-light .license-hero h1,
html.theme-light .payment-heading h1,
html.theme-light .recharge-hero h1,
html.theme-light .profile-hero h1,
:root[data-theme="light"] .card-title,
:root[data-theme="light"] .license-title,
:root[data-theme="light"] .game-hero h1,
:root[data-theme="light"] .license-hero h1 {
    color: #0f172a !important;
    font-weight: 750 !important;
}

html.theme-light .card-highlights li,
html.theme-light .card-desc,
html.theme-light .license-desc,
html.theme-light .game-hero p,
html.theme-light .license-hero p,
html.theme-light .card-login-type,
html.theme-light .auth-header p,
html.theme-light .payment-heading p,
html.theme-light .muted,
:root[data-theme="light"] .card-highlights li,
:root[data-theme="light"] .license-desc,
:root[data-theme="light"] .game-hero p,
:root[data-theme="light"] .license-hero p {
    color: #475569 !important;
}

html.theme-light strong,
html.theme-light b,
:root[data-theme="light"] strong,
:root[data-theme="light"] b {
    color: #0f172a !important;
}

/* 6. Filter Pills, Stat Pills & Badges */
html.theme-light .stat-pill,
html.theme-light .cat-tab-btn,
html.theme-light .filter-pill,
html.theme-light .server-pill,
html.theme-light .feature-tag,
html.theme-light .badge,
html.theme-light .quick-amounts button,
html.theme-light .amount-grid button,
html.theme-light .bank-item,
:root[data-theme="light"] .stat-pill,
:root[data-theme="light"] .cat-tab-btn,
:root[data-theme="light"] .filter-pill,
:root[data-theme="light"] .server-pill,
:root[data-theme="light"] .feature-tag {
    background-color: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    color: #334155 !important;
}

html.theme-light .cat-tab-btn.active,
html.theme-light .filter-pill.active,
html.theme-light .amount-grid button.active,
:root[data-theme="light"] .cat-tab-btn.active,
:root[data-theme="light"] .filter-pill.active {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
}

/* 7. Shop Acc Thumbnail Media Overlays in Light Mode */
html.theme-light .card-media-overlay,
:root[data-theme="light"] .card-media-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, transparent 60%) !important;
}

html.theme-light .media-code-badge,
:root[data-theme="light"] .media-code-badge {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}

html.theme-light .media-photos-count,
:root[data-theme="light"] .media-photos-count {
    background-color: rgba(15, 23, 42, 0.75) !important;
    color: #ffffff !important;
}

html.theme-light .card-login-type,
:root[data-theme="light"] .card-login-type {
    background-color: #f8fafc !important;
    border-left: 2px solid #059669 !important;
    color: #334155 !important;
}

html.theme-light .card-footer,
:root[data-theme="light"] .card-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .price-original,
:root[data-theme="light"] .price-original {
    color: #94a3b8 !important;
}

html.theme-light .price-current,
:root[data-theme="light"] .price-current {
    color: #059669 !important;
}

/* 8. Tables across ALL pages (Affiliate, My Accounts, History) */
html.theme-light .table th,
html.theme-light .my-acc-panel th,
html.theme-light th,
:root[data-theme="light"] .table th,
:root[data-theme="light"] th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .table td,
html.theme-light .my-acc-panel td,
html.theme-light td,
:root[data-theme="light"] .table td,
:root[data-theme="light"] td {
    color: #0f172a !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .table tbody tr:hover,
:root[data-theme="light"] .table tbody tr:hover {
    background-color: rgba(15, 23, 42, 0.02) !important;
}

/* 9. Affiliate Link Box in Light Mode */
html.theme-light .copy-ref-box,
:root[data-theme="light"] .copy-ref-box {
    background-color: #f1f5f9 !important;
    border: 1px solid rgba(5, 150, 105, 0.35) !important;
}
html.theme-light .copy-ref-input,
:root[data-theme="light"] .copy-ref-input {
    color: #047857 !important;
    background: transparent !important;
}

/* 10. Modals in Light Mode (Credentials & Keys) */
html.theme-light .modal-window,
html.theme-light .key-modal-card,
:root[data-theme="light"] .modal-window,
:root[data-theme="light"] .key-modal-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}

html.theme-light .modal-credentials,
html.theme-light .key-display-box,
:root[data-theme="light"] .modal-credentials,
:root[data-theme="light"] .key-display-box {
    background-color: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #047857 !important;
}

/* ==========================================================================
   11. TEMPLATES CATALOG PAGE (/templates/index.html) - LIGHT MODE OVERRIDES
   ========================================================================== */

/* 11.1. Anti-Glare & Hero Background */
html.theme-light .relative.-z-100,
:root[data-theme="light"] .relative.-z-100 {
    display: none !important;
}

html.theme-light span.animate-meteorAngle,
:root[data-theme="light"] span.animate-meteorAngle {
    display: none !important;
}

/* 11.2. Hero Top Pill ("✨ Gửi yêu cầu của bạn tới chúng tôi →") */
html.theme-light .hero-hiring-gradient,
:root[data-theme="light"] .hero-hiring-gradient {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light .hero-hiring-gradient > div,
:root[data-theme="light"] .hero-hiring-gradient > div {
    background: #ffffff !important;
    color: #0f172a !important;
}

html.theme-light .hero-hiring-gradient:hover > div,
:root[data-theme="light"] .hero-hiring-gradient:hover > div {
    background: #f8fafc !important;
}

html.theme-light .hero-hiring-gradient svg,
:root[data-theme="light"] .hero-hiring-gradient svg {
    stroke: #0f172a !important;
    color: #0f172a !important;
}

html.theme-light .hero-hiring-gradient svg path {
    stroke: #0f172a !important;
}

html.theme-light .hero-hiring-gradient svg rect {
    fill: #0f172a !important;
}

/* 11.3. Hero Typography (Title & Subtitle) */
html.theme-light .blog-heading-gradient,
html.theme-light .templates-hero-title,
:root[data-theme="light"] .blog-heading-gradient,
:root[data-theme="light"] .templates-hero-title {
    color: #0f172a !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 800 !important;
}

html.theme-light .about-founders-text-gradient,
html.theme-light .templates-hero-sub,
:root[data-theme="light"] .about-founders-text-gradient,
:root[data-theme="light"] .templates-hero-sub {
    color: #475569 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #475569 !important;
}

/* 11.4. Sidebar Filter & Search */
html.theme-light div:has(> #searchInput),
:root[data-theme="light"] div:has(> #searchInput) {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light input#searchInput,
:root[data-theme="light"] input#searchInput {
    color: #0f172a !important;
}

html.theme-light input#searchInput::placeholder,
:root[data-theme="light"] input#searchInput::placeholder {
    color: #94a3b8 !important;
}

html.theme-light .lucide-search,
:root[data-theme="light"] .lucide-search {
    color: #64748b !important;
}

html.theme-light [data-radix-collection-item],
:root[data-theme="light"] [data-radix-collection-item] {
    color: #0f172a !important;
}

html.theme-light [data-radix-collection-item] span.bg-white\/10,
:root[data-theme="light"] [data-radix-collection-item] span.bg-white\/10 {
    background-color: #e2e8f0 !important;
}

html.theme-light [data-radix-collection-item] svg,
:root[data-theme="light"] [data-radix-collection-item] svg {
    color: #0f172a !important;
    stroke: #0f172a !important;
}

html.theme-light [data-radix-collection-item] svg rect {
    fill: #cbd5e1 !important;
    fill-opacity: 0.5 !important;
}

html.theme-light [data-radix-collection-item] svg path {
    stroke: #0f172a !important;
}

html.theme-light label[class*="bg-[rgba(255,255,255,0.05)]"],
:root[data-theme="light"] label[class*="bg-[rgba(255,255,255,0.05)]"],
html.theme-light label.flex.flex-row.items-center,
:root[data-theme="light"] label.flex.flex-row.items-center {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.theme-light label[class*="bg-[rgba(255,255,255,0.05)]"]:hover,
:root[data-theme="light"] label[class*="bg-[rgba(255,255,255,0.05)]"]:hover,
html.theme-light label.flex.flex-row.items-center:hover,
:root[data-theme="light"] label.flex.flex-row.items-center:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.theme-light label .text-white\/50,
:root[data-theme="light"] label .text-white\/50 {
    color: #64748b !important;
}

/* 11.5. Template Game Cards Grid */
html.theme-light .container.mx-auto.mt-24,
:root[data-theme="light"] .container.mx-auto.mt-24 {
    color: #0f172a !important;
}

html.theme-light a.group.bg-black\/50,
:root[data-theme="light"] a.group.bg-black\/50,
html.theme-light .grid a[href*="/templates/"],
:root[data-theme="light"] .grid a[href*="/templates/"] {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.06) !important;
}

html.theme-light a.group.bg-black\/50:hover,
:root[data-theme="light"] a.group.bg-black\/50:hover,
html.theme-light .grid a[href*="/templates/"]:hover,
:root[data-theme="light"] .grid a[href*="/templates/"]:hover {
    border-color: rgba(5, 150, 105, 0.4) !important;
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .grid a[href*="/templates/"] h3,
:root[data-theme="light"] .grid a[href*="/templates/"] h3 {
    color: #0f172a !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #0f172a !important;
}

html.theme-light .grid a[href*="/templates/"] p,
:root[data-theme="light"] .grid a[href*="/templates/"] p {
    color: #475569 !important;
}

html.theme-light .grid a[href*="/templates/"] span.bg-white\/5,
:root[data-theme="light"] .grid a[href*="/templates/"] span.bg-white\/5 {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .grid a[href*="/templates/"] .border-t,
:root[data-theme="light"] .grid a[href*="/templates/"] .border-t {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .grid a[href*="/templates/"] span.text-white\/90,
:root[data-theme="light"] .grid a[href*="/templates/"] span.text-white\/90 {
    color: #059669 !important;
    font-weight: 700 !important;
}

html.theme-light .grid a[href*="/templates/"] span.text-white\/20,
:root[data-theme="light"] .grid a[href*="/templates/"] span.text-white\/20 {
    color: #94a3b8 !important;
}

html.theme-light .grid a[href*="/templates/"] div.rounded-full.border-white\/10,
:root[data-theme="light"] .grid a[href*="/templates/"] div.rounded-full.border-white\/10 {
    border-color: rgba(15, 23, 42, 0.15) !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

html.theme-light .grid a[href*="/templates/"] div.rounded-full.border-white\/10 svg,
:root[data-theme="light"] .grid a[href*="/templates/"] div.rounded-full.border-white\/10 svg {
    color: #0f172a !important;
}

html.theme-light .grid a[href*="/templates/"]:hover div.rounded-full.border-white\/10,
:root[data-theme="light"] .grid a[href*="/templates/"]:hover div.rounded-full.border-white\/10 {
    background: #0f172a !important;
    border-color: #0f172a !important;
}

html.theme-light .grid a[href*="/templates/"]:hover div.rounded-full.border-white\/10 svg,
:root[data-theme="light"] .grid a[href*="/templates/"]:hover div.rounded-full.border-white\/10 svg {
    color: #ffffff !important;
}