/* GodWeb - Xianxia Light Mode (Thiên Giới / Chính Đạo)
 * Bright, clean celestial realm with jade, gold and pure white.
 * Applied when body.light-mode is present.
 * ---------------------------------------------------------------- */

/* ================================================================
 * CSS Variables - Bright Celestial palette
 * ================================================================ */
body.light-mode {
    --xianxia-ink: #ffffff;
    --xianxia-ink-deep: #f8f9fc;
    --xianxia-jade: #0ea573;
    --xianxia-jade-dark: #088a5e;
    --xianxia-jade-glow: rgba(14, 165, 115, 0.2);
    --xianxia-gold: #c08b00;
    --xianxia-gold-deep: #a67c00;
    --xianxia-gold-glow: rgba(192, 139, 0, 0.2);
    --xianxia-cinnabar: #dc2626;
    --xianxia-cinnabar-glow: rgba(220, 38, 38, 0.15);
    --xianxia-spirit: #7c3aed;
    --xianxia-spirit-glow: rgba(124, 58, 237, 0.12);
    --xianxia-parchment: #ffffff;
    --xianxia-parchment-light: #f8f9fc;

    --primary-color: #0ea573;
    --secondary-color: #c08b00;
    --dark-color: #1e293b;
    --light-color: #f8f9fc;
    --text-color: #1e293b;
    --text-light: #64748b;
    --border-color: rgba(14, 165, 115, 0.15);
    --surface-color: #ffffff;
    --surface-muted: #f1f5f9;

    --gradient-primary: linear-gradient(135deg, #088a5e 0%, #0ea573 50%, #34d399 100%);
    --gradient-gold: linear-gradient(135deg, #a67c00 0%, #c08b00 60%, #e5a700 100%);
    --gradient-night: linear-gradient(140deg, #ffffff 0%, #f8f9fc 50%, #f1f5f9 100%);
}

/* ================================================================
 * Body & Background - Clean white with subtle jade accents
 * ================================================================ */
body.light-mode {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 50%, #f1f5f9 100%);
    background-attachment: fixed;
    color: #1e293b;
}

/* Subtle cloud pattern (Tường Vân) overlay */
body.light-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 300px 120px at 10% 15%, rgba(14, 165, 115, 0.03), transparent 70%),
        radial-gradient(ellipse 250px 100px at 80% 30%, rgba(192, 139, 0, 0.02), transparent 70%),
        radial-gradient(ellipse 200px 80px at 50% 70%, rgba(124, 58, 237, 0.015), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ================================================================
 * Navbar - Ivory silk with ink accents
 * ================================================================ */
body.light-mode .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px) saturate(130%);
    border-bottom: 1px solid rgba(14, 165, 115, 0.12);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

body.light-mode .navbar a,
body.light-mode .navbar .btn-outline {
    color: #334155 !important;
}

body.light-mode .navbar a:hover {
    color: #0ea573 !important;
    text-shadow: none;
}

body.light-mode .navbar .brand-name {
    color: #1e293b;
}

body.light-mode .navbar .brand-name span {
    color: #0ea573;
}

body.light-mode .navbar-auth .btn-outline {
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

body.light-mode .navbar-auth .btn-outline:hover {
    color: #0ea573 !important;
    border-color: #0ea573 !important;
    background: rgba(14, 165, 115, 0.05);
}

/* ================================================================
 * Typography - Ink brush calligraphy
 * ================================================================ */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #1e293b;
    text-shadow: none;
}

body.light-mode .section-title h2 {
    background: linear-gradient(120deg, #088a5e, #0ea573 40%, #c08b00 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.light-mode .section-title h2::after {
    background: linear-gradient(90deg, transparent, rgba(14, 165, 115, 0.4), rgba(192, 139, 0, 0.4), transparent);
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-mode p,
body.light-mode span,
body.light-mode li {
    color: #475569;
}

/* ================================================================
 * Cards - Rice paper scroll style
 * ================================================================ */
body.light-mode .card,
body.light-mode .feature-card,
body.light-mode .post-card,
body.light-mode .product-card,
body.light-mode .dashboard-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    backdrop-filter: none;
}

body.light-mode .card:hover,
body.light-mode .feature-card:hover,
body.light-mode .post-card:hover,
body.light-mode .product-card:hover {
    border-color: rgba(14, 165, 115, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(14, 165, 115, 0.1);
    transform: translateY(-2px);
}

/* Card corner rune in light mode */
body.light-mode .card::after,
body.light-mode .feature-card::after,
body.light-mode .product-card::after {
    color: rgba(14, 165, 115, 0.1);
}

body.light-mode .card:hover::after,
body.light-mode .feature-card:hover::after,
body.light-mode .product-card:hover::after {
    color: rgba(14, 165, 115, 0.25);
    text-shadow: none;
}

/* ================================================================
 * Stat Cards
 * ================================================================ */
body.light-mode .stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.light-mode .stat-card::before {
    background: linear-gradient(90deg, #0ea573, #c08b00, #7c3aed);
    opacity: 0.5;
}

body.light-mode .stat-card h3,
body.light-mode .stat-card .stat-value {
    color: #1e293b;
}

body.light-mode .stat-card p,
body.light-mode .stat-card .stat-label {
    color: #64748b;
}

/* ================================================================
 * Hero Section - Dawn over ancient mountains
 * ================================================================ */
body.light-mode .hero {
    background:
        radial-gradient(800px 500px at 30% 40%, rgba(14, 165, 115, 0.04), transparent 60%),
        radial-gradient(600px 400px at 70% 60%, rgba(192, 139, 0, 0.03), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

body.light-mode .hero::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(14, 165, 115, 0.15) 20%,
        rgba(192, 139, 0, 0.2) 50%,
        rgba(14, 165, 115, 0.15) 80%,
        transparent);
}

body.light-mode .hero h1,
body.light-mode .hero .hero-title {
    background: linear-gradient(120deg, #088a5e, #0ea573 40%, #c08b00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

body.light-mode .hero p,
body.light-mode .hero .hero-subtitle {
    color: #64748b;
}

/* ================================================================
 * Forms & Inputs - Ink on parchment
 * ================================================================ */
body.light-mode .form-group input,
body.light-mode .form-group textarea,
body.light-mode .form-group select,
body.light-mode .form-control {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus,
body.light-mode .form-group select:focus,
body.light-mode .form-control:focus {
    border-color: #0ea573;
    box-shadow: 0 0 0 3px rgba(14, 165, 115, 0.1);
    background: #ffffff;
}

body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder,
body.light-mode .form-control::placeholder {
    color: #94a3b8;
}

body.light-mode .form-label,
body.light-mode label {
    color: #334155;
}

/* ================================================================
 * Tables - Ancient ledger
 * ================================================================ */
body.light-mode table,
body.light-mode .table {
    background: #ffffff;
    color: #1e293b;
    border-color: #e2e8f0;
}

body.light-mode table th,
body.light-mode .table th {
    background: #f8f9fc;
    color: #1e293b;
    border-color: #e2e8f0;
}

body.light-mode table td,
body.light-mode .table td {
    border-color: #f1f5f9;
    color: #475569;
}

body.light-mode table tr:hover td,
body.light-mode .table tr:hover td {
    background: #f8f9fc;
}

/* ================================================================
 * Footer - Ancient realm border
 * ================================================================ */
body.light-mode .footer {
    background: #f8f9fc;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
}

body.light-mode .footer::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(192, 139, 0, 0.15) 30%,
        rgba(14, 165, 115, 0.15) 70%,
        transparent);
}

body.light-mode .footer h4 {
    color: #0ea573;
    text-shadow: none;
}

body.light-mode .footer a {
    color: #64748b;
}

body.light-mode .footer a:hover {
    color: #0ea573;
}

body.light-mode .footer p {
    color: #64748b;
}

body.light-mode .footer-bottom {
    border-top: 1px solid #e2e8f0;
}

body.light-mode .footer-bottom p {
    color: #94a3b8;
}

/* ================================================================
 * Alerts - Parchment notice scrolls
 * ================================================================ */
body.light-mode .alert {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
}

body.light-mode .alert-success {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

body.light-mode .alert-error,
body.light-mode .alert-danger {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

body.light-mode .alert-warning {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

body.light-mode .alert-info {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.05);
}

/* ================================================================
 * Dropdowns - Silk curtain menus
 * ================================================================ */
body.light-mode .dropdown-menu {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
}

body.light-mode .dropdown-menu a {
    color: #475569;
}

body.light-mode .dropdown-menu a:hover {
    background: #f8f9fc;
    color: #0ea573;
}

body.light-mode .dropdown-divider {
    border-color: #f1f5f9;
}

/* ================================================================
 * Sidebar
 * ================================================================ */
body.light-mode .sidebar,
body.light-mode .admin-sidebar {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}

body.light-mode .sidebar a,
body.light-mode .admin-sidebar a {
    color: #475569;
}

body.light-mode .sidebar a:hover,
body.light-mode .admin-sidebar a:hover,
body.light-mode .sidebar a.active,
body.light-mode .admin-sidebar a.active {
    color: #0ea573;
    background: rgba(14, 165, 115, 0.05);
}

/* ================================================================
 * Blog Content - Ink on paper
 * ================================================================ */
body.light-mode .blog-content,
body.light-mode .post-content {
    color: #475569;
}

body.light-mode .blog-content h2,
body.light-mode .blog-content h3,
body.light-mode .blog-content h4 {
    color: #1e293b;
}

body.light-mode .blog-content p,
body.light-mode .blog-content li {
    color: #475569;
}

body.light-mode .blog-content a {
    color: #0ea573;
}

body.light-mode .blog-content blockquote {
    border-left-color: #0ea573;
    background: #f8f9fc;
    color: #475569;
}

body.light-mode .blog-content code {
    background: #f1f5f9;
    color: #c08b00;
}

body.light-mode .blog-content pre {
    background: #1e293b;
    color: #e2e8f0;
}

/* ================================================================
 * Search Bar
 * ================================================================ */
body.light-mode .search-bar,
body.light-mode .search-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

body.light-mode .search-bar input,
body.light-mode .search-box input {
    background: transparent;
    color: #1e293b;
}

body.light-mode .search-bar input::placeholder,
body.light-mode .search-box input::placeholder {
    color: #94a3b8;
}

body.light-mode .search-bar button,
body.light-mode .search-box button {
    color: #0ea573;
}

/* ================================================================
 * Pagination
 * ================================================================ */
body.light-mode .pagination a,
body.light-mode .pagination span {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}

body.light-mode .pagination a:hover {
    background: #f8f9fc;
    color: #0ea573;
    border-color: #0ea573;
}

body.light-mode .pagination .active,
body.light-mode .pagination .current {
    background: #0ea573;
    color: #ffffff;
    border-color: #0ea573;
}

/* ================================================================
 * Filter Tags
 * ================================================================ */
body.light-mode .filter-tag,
body.light-mode .category-tag {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}

body.light-mode .filter-tag:hover,
body.light-mode .category-tag:hover,
body.light-mode .filter-tag.active,
body.light-mode .category-tag.active {
    background: #0ea573;
    color: #ffffff;
    border-color: #0ea573;
}

/* ================================================================
 * Mobile Menu - Bamboo screen
 * ================================================================ */
body.light-mode .mobile-menu {
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    backdrop-filter: blur(16px);
}

body.light-mode .mobile-menu-header {
    border-bottom: 1px solid #f1f5f9;
}

body.light-mode .mobile-menu-header .brand-name {
    color: #1e293b;
}

body.light-mode .mobile-menu-links a {
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

body.light-mode .mobile-menu-links a:hover {
    color: #0ea573;
    background: #f8f9fc;
}

body.light-mode .mobile-menu-close {
    color: #475569;
}

body.light-mode .mobile-menu-contact a {
    color: #64748b;
}

/* ================================================================
 * Notifications
 * ================================================================ */
body.light-mode .notification-menu {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

body.light-mode .notification-menu-header {
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

body.light-mode .notification-item {
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

body.light-mode .notification-item.unread {
    background: #f8f9fc;
}

body.light-mode .notification-item-time {
    color: #94a3b8;
}

body.light-mode .notification-empty {
    color: #94a3b8;
}

body.light-mode .notification-badge {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.3);
}

/* ================================================================
 * Site Ticker
 * ================================================================ */
body.light-mode .site-ticker {
    background: #f8f9fc;
    border-bottom: 1px solid #e2e8f0;
}

body.light-mode .site-ticker-label {
    color: #c08b00;
}

body.light-mode .site-ticker-item {
    color: #475569;
}

body.light-mode .site-ticker-sep {
    color: #94a3b8;
}

/* ================================================================
 * GodCoin Balance
 * ================================================================ */
body.light-mode .godcoin-balance {
    color: #c08b00;
    background: rgba(192, 139, 0, 0.06);
    border-color: rgba(192, 139, 0, 0.15);
}

body.light-mode .godcoin-balance::before {
    background: linear-gradient(90deg, transparent, rgba(192, 139, 0, 0.08), transparent);
}

body.light-mode .godcoin-balance i {
    color: #c08b00;
}

body.light-mode .card-price {
    color: #c08b00 !important;
}

body.light-mode .card-price i {
    color: #c08b00 !important;
}

/* ================================================================
 * Buttons - Jade seal ink
 * ================================================================ */
body.light-mode .btn-primary,
body.light-mode .btn-secondary {
    background: var(--gradient-primary);
    color: #ffffff !important;
}

body.light-mode .btn-primary:hover,
body.light-mode .btn-secondary:hover {
    background: linear-gradient(135deg, #088a5e 0%, #0ea573 50%, #34d399 100%);
    box-shadow: 0 2px 8px rgba(14, 165, 115, 0.25);
}

body.light-mode .btn-outline {
    border-color: #0ea573;
    color: #0ea573;
}

body.light-mode .btn-outline:hover {
    background: #0ea573;
    color: #ffffff;
}

/* ================================================================
 * FX Effects - Adapted for light mode
 * ================================================================ */
body.light-mode .fx-bg {
    opacity: 0.1;
}

body.light-mode .fx-orb {
    opacity: 0.06;
}

body.light-mode .xx-stars,
body.light-mode .xx-stars-canvas {
    opacity: 0;
}

body.light-mode .xx-parallax-layer {
    opacity: 0.06;
}

body.light-mode .xx-floating-layer {
    opacity: 0.12;
}

body.light-mode #xx-petals-canvas {
    opacity: 0.5;
}

body.light-mode #xx-mist-transition {
    opacity: 0.25;
}

body.light-mode .xx-fog {
    opacity: 0.15;
}

body.light-mode .xx-bloom::after {
    box-shadow:
        0 0 8px rgba(13, 138, 106, 0.25),
        0 0 16px rgba(166, 124, 0, 0.12);
}

/* ================================================================
 * Logo adjustments - Subtle ink seal
 * ================================================================ */
body.light-mode .xx-logo {
    filter:
        drop-shadow(0 0 3px rgba(192, 139, 0, 0.2))
        drop-shadow(0 0 6px rgba(14, 165, 115, 0.1));
}

body.light-mode .xx-logo:hover {
    filter:
        drop-shadow(0 0 6px rgba(192, 139, 0, 0.35))
        drop-shadow(0 0 10px rgba(14, 165, 115, 0.2));
}

/* ================================================================
 * Page Header
 * ================================================================ */
body.light-mode .page-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

body.light-mode .page-header::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(14, 165, 115, 0.12) 30%,
        rgba(192, 139, 0, 0.15) 50%,
        rgba(14, 165, 115, 0.12) 70%,
        transparent);
}

body.light-mode .page-header h1 {
    color: #1e293b;
}

body.light-mode .page-header p {
    color: #64748b;
}

/* ================================================================
 * Comments
 * ================================================================ */
body.light-mode .comment,
body.light-mode .comments-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

body.light-mode .comment {
    border-left-color: rgba(14, 165, 115, 0.2);
}

body.light-mode .comment-author {
    color: #1e293b;
}

body.light-mode .comment p {
    color: #475569;
}

body.light-mode .comment-date {
    color: #94a3b8;
}

/* ================================================================
 * Wallet & Topup
 * ================================================================ */
body.light-mode .wallet-card,
body.light-mode .topup-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

body.light-mode .wallet-balance {
    color: #0ea573;
}

/* ================================================================
 * Admin Page
 * ================================================================ */
body.light-mode.admin-page .dashboard-content {
    background: #ffffff;
}

body.light-mode .admin-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

/* ================================================================
 * Scrollbar - Light mode
 * ================================================================ */
body.light-mode ::-webkit-scrollbar-track {
    background: #f8f9fc;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 115, 0.2);
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 165, 115, 0.35);
}

/* ================================================================
 * Selection - Ink wash
 * ================================================================ */
body.light-mode ::selection {
    background: rgba(14, 165, 115, 0.15);
    color: #1e293b;
}

/* ================================================================
 * Theme Toggle Button
 * ================================================================ */
body.light-mode .theme-toggle-btn {
    color: #334155 !important;
}

body.light-mode .theme-toggle-btn:hover {
    color: #0ea573 !important;
}

/* ================================================================
 * Contact page
 * ================================================================ */
body.light-mode .contact-card {
    background: #ffffff;
}

body.light-mode .contact-card h3 {
    color: #1e293b;
}

body.light-mode .contact-list p {
    color: #475569;
}

body.light-mode .social-link {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ================================================================
 * Profile pages
 * ================================================================ */
body.light-mode .profile-card,
body.light-mode .profile-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

body.light-mode .profile-card h3 {
    color: #1e293b;
}

body.light-mode .profile-card p {
    color: #475569;
}

/* ================================================================
 * Store pages
 * ================================================================ */
body.light-mode .product-detail {
    background: #ffffff;
}

body.light-mode .product-detail h1,
body.light-mode .product-detail h2 {
    color: #1e293b;
}

body.light-mode .product-detail p {
    color: #475569;
}

body.light-mode .product-price {
    color: #c08b00;
}

/* ================================================================
 * Empty state
 * ================================================================ */
body.light-mode .empty-state {
    color: #64748b;
}

body.light-mode .empty-state h3 {
    color: #1e293b;
}

body.light-mode .empty-state p {
    color: #64748b;
}

body.light-mode .empty-state i {
    color: #94a3b8;
}

/* ================================================================
 * Badges & Tags
 * ================================================================ */
body.light-mode .badge {
    color: #ffffff;
}

body.light-mode .tag {
    background: #f1f5f9;
    color: #475569;
}

/* ================================================================
 * Premium badge - Golden talisman seal
 * ================================================================ */
body.light-mode .premium-badge {
    background: linear-gradient(135deg, #a67c00 0%, #c08b00 50%, #e5a700 100%);
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(192, 139, 0, 0.2);
}

/* VIP card in light mode */
body.light-mode .card:has(.premium-badge),
body.light-mode .card.xx-vip-card {
    border-color: rgba(192, 139, 0, 0.2);
}

body.light-mode .card:has(.premium-badge)::before,
body.light-mode .card.xx-vip-card::before {
    background: linear-gradient(135deg, rgba(192, 139, 0, 0.15), rgba(124, 58, 237, 0.08), rgba(192, 139, 0, 0.1));
    animation: xxVipAuraPulseLight 3s ease-in-out infinite;
    opacity: 0;
    inset: 0;
    padding: 0;
    mask: none;
    -webkit-mask: none;
}

@keyframes xxVipAuraPulseLight {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

body.light-mode .card:has(.premium-badge):hover,
body.light-mode .card.xx-vip-card:hover {
    border-color: rgba(192, 139, 0, 0.4);
    box-shadow: 0 4px 16px rgba(192, 139, 0, 0.1), 0 0 0 1px rgba(192, 139, 0, 0.1);
}

body.light-mode .card:has(.premium-badge):hover::before,
body.light-mode .card.xx-vip-card:hover::before {
    opacity: 0.6;
}

body.light-mode .card:has(.premium-badge)::after,
body.light-mode .card.xx-vip-card::after {
    color: rgba(192, 139, 0, 0.2);
}

/* ================================================================
 * Section dividers - Light ink wash
 * ================================================================ */
body.light-mode .section + .section::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(14, 165, 115, 0.1) 20%,
        rgba(192, 139, 0, 0.15) 50%,
        rgba(14, 165, 115, 0.1) 80%,
        transparent);
}

/* ================================================================
 * Border beam effect - Softer in light mode
 * ================================================================ */
body.light-mode .xx-beam::before,
body.light-mode .btn::before,
body.light-mode .card::before,
body.light-mode .product-card::before,
body.light-mode .post-card::before,
body.light-mode .dashboard-card::before {
    filter: blur(0.4px) drop-shadow(0 0 2px rgba(14, 165, 115, 0.15));
}

/* ================================================================
 * Shockwave effect - Warm ink in light mode
 * ================================================================ */
body.light-mode .xx-shockwave {
    background:
        radial-gradient(circle,
            transparent                          0%,
            rgba(14, 165, 115, 0.06)             32%,
            rgba(14, 165, 115, 0.25)             46%,
            rgba(192, 139, 0, 0.20)              52%,
            rgba(192, 139, 0, 0.08)              62%,
            transparent                          75%);
    box-shadow: 0 0 12px rgba(14, 165, 115, 0.15);
}

body.light-mode .xx-shockwave.xx-shockwave-echo {
    background:
        radial-gradient(circle,
            transparent                          0%,
            rgba(192, 139, 0, 0.03)              40%,
            rgba(192, 139, 0, 0.18)              50%,
            rgba(124, 58, 237, 0.08)             58%,
            transparent                          72%);
    box-shadow: 0 0 8px rgba(192, 139, 0, 0.12);
}

/* ================================================================
 * Ink splash effect - Visible ink in light mode
 * ================================================================ */
body.light-mode .xx-ink-splash {
    background: radial-gradient(circle,
        rgba(30, 41, 59, 0.3) 0%,
        rgba(30, 41, 59, 0.1) 40%,
        transparent 70%);
}

/* ================================================================
 * Qi flow lines - Subtle ink trails
 * ================================================================ */
body.light-mode .xx-qi-flow {
    opacity: 0.15;
}

/* ================================================================
 * Reveal animations - keep working in light mode
 * ================================================================ */
body.light-mode .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

body.light-mode .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
 * Brand name - Ink calligraphy in light mode
 * ================================================================ */
body.light-mode .brand-name {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #0ea573 110%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

/* ================================================================
 * Home CTA - Bright celestial call-to-action
 * ================================================================ */
body.light-mode .home-cta {
    background: linear-gradient(180deg, #f8f9fc 0%, #f1f5f9 100%);
    border-top: 1px solid rgba(14, 165, 115, 0.12);
    border-bottom: 1px solid rgba(14, 165, 115, 0.08);
}

body.light-mode .home-cta::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(14, 165, 115, 0.15) 20%,
        rgba(192, 139, 0, 0.2) 50%,
        rgba(14, 165, 115, 0.15) 80%,
        transparent);
}

body.light-mode .home-cta h2 {
    background: linear-gradient(120deg, #088a5e, #0ea573 40%, #c08b00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.light-mode .home-cta p {
    color: #64748b;
}

/* ================================================================
 * Auth Card - Light realm gate
 * ================================================================ */
body.light-mode .auth-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

body.light-mode .auth-card h2 {
    color: #1e293b;
    text-shadow: none;
}

body.light-mode .auth-card .form-group label {
    color: #334155;
}

body.light-mode .auth-card .form-group input {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.light-mode .auth-card .form-group input:focus {
    border-color: #0ea573;
    box-shadow: 0 0 0 3px rgba(14, 165, 115, 0.1);
}

body.light-mode .auth-card a {
    color: #0ea573;
}

/* ================================================================
 * Feature Icons - Jade/gold ink on parchment
 * ================================================================ */
body.light-mode .feature-icon.primary {
    background: linear-gradient(135deg, rgba(14, 165, 115, 0.1), rgba(14, 165, 115, 0.03));
    color: #0ea573;
    border-color: rgba(14, 165, 115, 0.2);
}

body.light-mode .feature-icon.secondary {
    background: linear-gradient(135deg, rgba(192, 139, 0, 0.1), rgba(192, 139, 0, 0.03));
    color: #c08b00;
    border-color: rgba(192, 139, 0, 0.2);
}

body.light-mode .feature-icon.success {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.02));
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.15);
}

body.light-mode .feature-card:hover .feature-icon.primary {
    box-shadow: 0 0 16px rgba(14, 165, 115, 0.15);
}

body.light-mode .feature-card:hover .feature-icon.secondary {
    box-shadow: 0 0 16px rgba(192, 139, 0, 0.15);
}

body.light-mode .feature-card:hover .feature-icon.success {
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.12);
}

/* ================================================================
 * Ticker label - Jade ink on parchment
 * ================================================================ */
body.light-mode .site-ticker-label {
    background: rgba(14, 165, 115, 0.1);
    color: #0ea573;
    border-right-color: rgba(14, 165, 115, 0.15);
}

body.light-mode .site-ticker-label i {
    color: #0ea573;
}

/* ================================================================
 * Hero effects - Softer in light mode
 * ================================================================ */
body.light-mode .hero::after {
    opacity: 0.25;
}

body.light-mode .hero h1 {
    animation: heroTextGlowLight 4s ease-in-out infinite;
}

@keyframes heroTextGlowLight {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(14, 165, 115, 0.1));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(14, 165, 115, 0.2)) drop-shadow(0 0 24px rgba(192, 139, 0, 0.1));
    }
}

/* ================================================================
 * Navbar scroll - Light mode
 * ================================================================ */
body.light-mode .navbar.navbar-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.98);
}

body.light-mode .navbar .btn-outline {
    border-color: #cbd5e1 !important;
}

body.light-mode .navbar .btn-outline:hover {
    border-color: #0ea573 !important;
}

/* ================================================================
 * Section divider - Light mode
 * ================================================================ */
body.light-mode .section + .section::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(14, 165, 115, 0.12) 20%,
        rgba(192, 139, 0, 0.18) 50%,
        rgba(14, 165, 115, 0.12) 80%,
        transparent);
}

@media (prefers-reduced-motion: reduce) {
    body.light-mode .hero h1 { animation: none; }
}