/* ============================================================= */
/* APPLE LIQUID GLASS — NAYFINIX LIGHT MODE                      */
/* Complete iOS 26 / macOS Tahoe Liquid Glass Design System       */
/* ============================================================= */

/* ---- DESIGN TOKENS (Calibrated to Apple Liquid Glass) ---- */
html.light-mode {
  --lg-glass: rgba(255, 255, 255, 0.55);
  --lg-glass-hover: rgba(255, 255, 255, 0.65);
  --lg-glass-active: rgba(255, 255, 255, 0.75);
  --lg-glass-heavy: rgba(255, 255, 255, 0.85);
  --lg-glass-light: rgba(255, 255, 255, 0.25);
  --lg-glass-input: rgba(255, 255, 255, 0.60);
  --lg-border: rgba(255, 255, 255, 0.50);
  --lg-border-subtle: rgba(255, 255, 255, 0.35);
  --lg-border-strong: rgba(255, 255, 255, 0.85);
  --lg-shadow: 0 16px 64px rgba(0, 0, 0, 0.05), 0 8px 32px rgba(0, 0, 0, 0.03);
  --lg-shadow-hover: 0 24px 80px rgba(0, 0, 0, 0.1);
  --lg-shadow-elevated: 0 40px 100px rgba(0, 0, 0, 0.15);
  --lg-blur: blur(30px) saturate(130%) brightness(1.1) contrast(1.1);
  --lg-blur-light: blur(15px) saturate(120%) brightness(1.05);
  --lg-blur-heavy: blur(60px) saturate(150%) brightness(1.15) contrast(1.2);
  --lg-blur-sidebar: blur(40px) saturate(140%) brightness(1.1) contrast(1.1);
  --lg-text: #1c1c1e;
  --lg-text-secondary: #3a3a3c;
  --lg-text-muted: #636366;
  --lg-text-faint: #8e8e93;
  --lg-accent: #059669;
  --lg-accent-hover: #047857;
  --lg-accent-glow: 0 0 15px rgba(16, 185, 129, 0.3);
  --lg-accent-emerald: #10b981;
  --lg-edge-top: inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  --lg-edge-inner: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
  --lg-inner-glow: inset 0 12px 40px rgba(255, 255, 255, 0.5);
  --lg-specular: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 100%);
  --lg-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.01'/%3E%3C/svg%3E");
  --lg-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --lg-radius: 12px;
  --lg-radius-sm: 8px;
  --lg-radius-lg: 24px;
}

/* ---- APPLE CLEAR BACKGROUND ---- */
html.light-mode body {
  background-color: #f0f7f4 !important;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url("https://images.unsplash.com/photo-1471922694854-ff1b63b20054?auto=format&fit=crop&q=80&w=2000") !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
  color: var(--lg-text) !important;
  min-height: 100vh !important;
}

/* Remove animated liquid orbs to ensure a clear, no-colour Apple look */
html.light-mode body::before,
html.light-mode body::after {
  display: none !important;
}

/* ---- REMOVE OLD BACKDROP-FILTER KILL SWITCH ---- */
/* The old CSS had: html.light-mode * { backdrop-filter: none !important; }
   We are NOT including that — glass needs backdrop-filter! */

/* ---- GLASS MIXIN CLASSES (reusable patterns) ---- */

/* ---- GLOBAL TEXT COLORS ---- */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6,
html.light-mode .settings-title,
html.light-mode .card-title,
html.light-mode .form-label,
html.light-mode label,
html.light-mode strong,
html.light-mode b,
html.light-mode th {
  color: var(--lg-text) !important;
  font-weight: 600 !important;
}

html.light-mode p,
html.light-mode li,
html.light-mode td,
html.light-mode span:not(.badge):not(.provider-badge):not(.material-icons),
html.light-mode div:not(.logo):not(.badge):not(.btn):not(.referral-name):not(.progress-fill),
html.light-mode .settings-description,
html.light-mode .text-muted,
html.light-mode i:not(.material-icons):not(.fas):not(.far):not(.fal) {
  color: var(--lg-text-secondary) !important;
}

/* ---- WATER ICONS ---- */
html.light-mode i.material-icons,
html.light-mode .material-icons,
html.light-mode ion-icon,
html.light-mode i.fas,
html.light-mode i.fab,
html.light-mode i.far,
html.light-mode i.fa {
  color: var(--lg-accent) !important; /* Premium Emerald */
  text-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important; /* Organic green glow */
  transition: all 0.3s ease !important;
}

html.light-mode a:not(.btn):not(.nav-link) {
  color: var(--lg-accent) !important;
  font-weight: 500 !important;
}

html.light-mode a:not(.btn):not(.nav-link):hover {
  color: var(--lg-accent-hover) !important;
  text-decoration: underline !important;
}

/* ---- TOPBAR — LIQUID GLASS ---- */
html.light-mode .topbar,
html.light-mode .amazon-header {
  background: var(--lg-specular), var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-edge-top), var(--lg-shadow) !important;
}

html.light-mode .topbar h2,
html.light-mode .topbar h3 {
  color: var(--lg-text) !important;
}

/* ---- SIDEBAR — LIQUID GLASS ---- */
html.light-mode .topbar,
html.light-mode .amazon-header,
html.light-mode .sidebar,
html.light-mode .amazon-sidebar {
  background: var(--lg-specular), var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-sidebar) !important;
  -webkit-backdrop-filter: var(--lg-blur-sidebar) !important;
  border-right: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow), var(--lg-edge-top) !important;
  color: var(--lg-text) !important;
  overflow-x: hidden !important;
  border-radius: 0 !important; /* Straight edges for topbars and sidebars as requested */
}

html.light-mode .sidebar a {
  color: var(--lg-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  padding: 12px 20px !important;
  margin-bottom: 6px !important;
  border-radius: var(--lg-radius-sm) !important;

  line-height: 1.5 !important;
  letter-spacing: 0.3px !important;
  display: flex;
  align-items: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  transition: var(--lg-transition) !important;
  background: transparent !important;
}

html.light-mode .sidebar a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--lg-accent) !important;
  box-shadow: var(--lg-edge-top) !important;
}

html.light-mode .sidebar a.active {
  background: rgba(255, 255, 255, 0.35) !important;
  color: var(--lg-text) !important;
  box-shadow: var(--lg-edge-top), var(--lg-inner-glow), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html.light-mode .sidebar a span {
  font-size: 16px !important;
}

html.light-mode .sidebar a i.material-icons,
html.light-mode .sidebar a .material-icons,
html.light-mode .sidebar a:hover i.material-icons,
html.light-mode .sidebar a:hover .material-icons,
html.light-mode .sidebar a.active i.material-icons,
html.light-mode .sidebar a.active .material-icons {
  color: var(--lg-accent) !important;
}

html.light-mode .sidebar h1,
html.light-mode .sidebar .logo {
  color: var(--lg-accent) !important;
}

html.light-mode .sidebar .logo {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 25px !important;
  padding-left: 0 !important;
}

/* Sidebar welcome text */
html.light-mode .sidebar h1#welcomeText {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: var(--lg-text) !important;
  box-shadow: var(--lg-edge-top), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .sidebar h1#welcomeText::before {
  color: var(--lg-accent) !important;
}

/* ---- CONTENT AREAS — GLASS BACKGROUNDS ---- */
html.light-mode .content,
html.light-mode .main-content {
  background: transparent !important;
}

/* ---- PANELS, CARDS, MODALS — LIQUID GLASS ---- */
html.light-mode .panel,
html.light-mode .card,
html.light-mode .settings-section,
html.light-mode .modal-content,
html.light-mode .popup-content,
html.light-mode .dashboard-card,
html.light-mode .post-box,
html.light-mode .feed-post,
html.light-mode .welcome-panel,
html.light-mode .summary-card,
html.light-mode .expense-card,
html.light-mode .stat-card,
html.light-mode .chart-card,
html.light-mode .calculator,
html.light-mode .loan-calculator,
html.light-mode .history-panel,
html.light-mode .notification-item,
html.light-mode .job-card,
html.light-mode .book-card,
html.light-mode .product-card,
html.light-mode .cart-items,
html.light-mode .cart-summary,
html.light-mode .checkout-section,
html.light-mode .order-summary,
html.light-mode .hero-banner,
html.light-mode .filter-bar,
html.light-mode .bio-profile-card,
html.light-mode .donation-panel,
html.light-mode .image-panel,
html.light-mode .impact-info,
html.light-mode .contact-card,
html.light-mode .social-card,
html.light-mode .faq-section,
html.light-mode .feature-card,
html.light-mode .step,
html.light-mode .guide-simple,
html.light-mode .security-message,
html.light-mode .filters-section,
html.light-mode .balance-card,
html.light-mode .profile,
html.light-mode .income-source-item,
html.light-mode .document-item,
html.light-mode .application-item,
html.light-mode .list-group-item,
html.light-mode .store-stats .stat-card,
html.light-mode .info-box {
  background: var(--lg-specular), var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius) !important;
  box-shadow: var(--lg-edge-top), var(--lg-inner-glow), var(--lg-shadow) !important;
  transition: var(--lg-transition) !important;
  will-change: backdrop-filter !important;
}

/* Glass hover effect for interactive cards */
html.light-mode .panel:hover,
html.light-mode .card:hover,
html.light-mode .summary-card:hover,
html.light-mode .expense-card:hover,
html.light-mode .stat-card:hover,
html.light-mode .job-card:hover,
html.light-mode .book-card:hover,
html.light-mode .product-card:hover,
html.light-mode .feature-card:hover,
html.light-mode .step:hover,
html.light-mode .balance-card:hover,
html.light-mode .application-item:hover,
html.light-mode .notification-item:hover,
html.light-mode .document-item:hover,
html.light-mode .store-stats .stat-card:hover {
  background: var(--lg-glass-hover) !important;
  box-shadow: var(--lg-edge-top), var(--lg-inner-glow), var(--lg-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

html.light-mode .welcome-panel::before {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ---- MODAL OVERLAY — FROSTED GLASS ---- */
html.light-mode .modal {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-heavy) !important;
  -webkit-backdrop-filter: var(--lg-blur-heavy) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow-elevated) !important;
}

html.light-mode .modal-header,
html.light-mode .boost-modal-header,
html.light-mode .payment-confirmation-header,
html.light-mode .modal-footer,
html.light-mode .boost-modal-footer,
html.light-mode .payment-confirmation-footer {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--lg-border-subtle) !important;
}

html.light-mode .modal-body,
html.light-mode .boost-modal-body,
html.light-mode .payment-confirmation-body {
  background: transparent !important;
}

html.light-mode .modal-footer {
  border-top: 1px solid var(--lg-border-subtle) !important;
}

/* ---- TABS — LIQUID GLASS ---- */
html.light-mode .tabs-container {
  background: var(--lg-glass-light) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .tab-btn {
  color: var(--lg-text-muted) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .tab-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--lg-text) !important;
  border-radius: 8px 8px 0 0 !important;
}

html.light-mode .tab-btn.active {
  color: var(--lg-accent) !important;
  border-bottom-color: var(--lg-accent) !important;
  font-weight: 600 !important;
}

html.light-mode .tabs button {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--lg-text-muted) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .tabs button.active,
html.light-mode .mobile-tabs button.active {
  background: rgba(255, 255, 255, 0.45) !important;
  color: var(--lg-text) !important;
  border-color: var(--lg-border-strong) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ---- INPUTS & FORMS — FROSTED INPUT FIELDS ---- */
html.light-mode input,
html.light-mode textarea,
html.light-mode select,
html.light-mode .form-input,
html.light-mode .referral-input,
html.light-mode .confirmation-input,
html.light-mode .search-box {
  background: var(--lg-glass-input) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: var(--lg-radius-sm) !important;
  color: var(--lg-text) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .search-box input {
  background: transparent !important;
  border: none !important;
  color: var(--lg-text) !important;
}

/* ============================================================= */
/* PROJECT-SPECIFIC OVERRIDES FOR NAYFINIX PAGES (header, hero, nav)
   Ensures Landing, Features, How It Works, Donations, Contact and About
   pages are readable and look good in light mode.                   */
/* ============================================================= */

html.light-mode header {
  background: var(--lg-specular), rgba(255,255,255,0.95) !important;
  color: var(--lg-text) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
}

html.light-mode .logo {
  color: var(--lg-accent) !important;
}

html.light-mode .nav-links a {
  color: var(--lg-text-secondary) !important;
  font-weight: 600 !important;
}

html.light-mode .nav-links a:hover {
  color: var(--lg-accent) !important;
}

html.light-mode .nav-links a.btn-primary {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
  box-shadow: var(--lg-accent-glow) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
}

html.light-mode .mobile-nav {
  background: var(--lg-specular), var(--lg-glass-heavy) !important;
  color: var(--lg-text) !important;
}

html.light-mode .mobile-nav a {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .mobile-nav a:hover {
  color: var(--lg-accent) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* Hero and CTA readability */
html.light-mode .hero {
  background: transparent !important;
}

html.light-mode .hero-text h1 {
  color: var(--lg-text) !important;
}

html.light-mode .hero-text p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .hero-image img {
  filter: none !important;
}

/* Feature cards, insight cards and stat items inherit glass style above,
   ensure text contrast inside them */
html.light-mode .feature-card,
html.light-mode .insight-card,
html.light-mode .stat-item,
html.light-mode .donation-panel,
html.light-mode .contact-card,
html.light-mode .guide-simple {
  color: var(--lg-text) !important;
}

/* Buttons in main areas */
html.light-mode .btn-primary,
html.light-mode .submit-btn,
html.light-mode .back-btn {
  background: var(--lg-accent) !important;
  color: #fff !important;
  box-shadow: var(--lg-accent-glow) !important;
}

/* Footer links */
html.light-mode footer {
  background: transparent !important;
  color: var(--lg-text-secondary) !important;
}

html.light-mode .footer-links a {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .footer-links a:hover {
  color: var(--lg-accent) !important;
}

/* Small accessibility tweak for headings inside cards */
html.light-mode .section-header h2,
html.light-mode .section-title {
  color: var(--lg-text) !important;
}

/* End project-specific overrides */

html.light-mode input:focus,
html.light-mode textarea:focus,
html.light-mode select:focus,
html.light-mode .form-input:focus {
  border-color: var(--lg-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15), var(--lg-edge-top) !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
  color: var(--lg-text-faint) !important;
  opacity: 1 !important;
}

html.light-mode select option {
  background: #e8eef5 !important;
  color: var(--lg-text) !important;
}

/* ---- PRIMARY BUTTONS — GLASS ACCENT ---- */
html.light-mode .btn-primary,
html.light-mode .submit-btn,
html.light-mode .primary-btn {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
  border-radius: var(--lg-radius) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .btn-primary:hover,
html.light-mode .submit-btn:hover,
html.light-mode .primary-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px) !important;
}

html.light-mode .btn-primary *,
html.light-mode .submit-btn *,
html.light-mode .primary-btn * {
  color: #ffffff !important;
}

/* Danger buttons */
html.light-mode .btn-danger,
html.light-mode .delete-btn {
  background: rgba(239, 68, 68, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15) !important;
}

html.light-mode .btn-danger *,
html.light-mode .delete-btn * {
  color: #ffffff !important;
}

/* Secondary/utility buttons — glass */
html.light-mode .btn-secondary,
html.light-mode .social-btn,
html.light-mode .back-btn,
html.light-mode .mobile-nav-btn,
html.light-mode .cancel-btn,
html.light-mode .share-btn {
  background: var(--lg-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
  font-weight: 500 !important;
  box-shadow: var(--lg-edge-top) !important;
  border-radius: var(--lg-radius) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .btn-secondary:hover,
html.light-mode .social-btn:hover,
html.light-mode .back-btn:hover,
html.light-mode .mobile-nav-btn:hover,
html.light-mode .cancel-btn:hover,
html.light-mode .share-btn:hover {
  background: var(--lg-glass-hover) !important;
  border-color: var(--lg-border-strong) !important;
  box-shadow: var(--lg-edge-top), var(--lg-shadow) !important;
}

html.light-mode .btn-secondary *,
html.light-mode .social-btn *,
html.light-mode .back-btn *,
html.light-mode .cancel-btn *,
html.light-mode .share-btn * {
  color: var(--lg-text) !important;
}

html.light-mode .mobile-nav-btn.active {
  background: rgba(255, 255, 255, 0.35) !important;
  color: var(--lg-text) !important;
  border-color: var(--lg-border-strong) !important;
}

/* ---- CLOSE BUTTONS ---- */
html.light-mode .close-btn,
html.light-mode .close-modal,
html.light-mode .close-popup {
  color: var(--lg-text-muted) !important;
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 50% !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .close-btn:hover,
html.light-mode .close-modal:hover,
html.light-mode .close-popup:hover {
  color: var(--lg-text) !important;
  background: var(--lg-glass-hover) !important;
}

/* ---- PROGRESS BARS ---- */
html.light-mode .progress-bar {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 999px !important;
}

/* ---- SEARCH ICONS ---- */
html.light-mode .search-icon i {
  color: var(--lg-text-muted) !important;
}

/* ---- CHART.JS — GLASS INVERT ---- */
html.light-mode canvas:not([style*="display: none"]) {
  filter: invert(1) hue-rotate(180deg) brightness(1.05) saturate(1.2) !important;
}

/* ---- SPECIFIC COMPONENT BORDERS ---- */
html.light-mode .settings-item,
html.light-mode .expense-card {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .referral-name {
  color: var(--lg-text) !important;
}

html.light-mode .referral-notification {
  background: rgba(88, 86, 214, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(88, 86, 214, 0.2) !important;
}

html.light-mode .verification-notice {
  background: rgba(255, 193, 7, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 152, 0, 0.25) !important;
}

/* ---- FEED & INTERACTION BUTTONS ---- */
html.light-mode .post-follow-btn {
  color: #ffffff !important;
}

html.light-mode .post-follow-btn.following {
  background: var(--lg-glass) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .follow-plus-icon.following {
  background-color: #34c759 !important;
  color: #ffffff !important;
}

html.light-mode .actions button {
  color: var(--lg-text-muted) !important;
  background: var(--lg-glass-light) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  text-shadow: none !important;
  border-radius: 30px !important;
  padding: 10px 22px !important;
  border: 1px solid var(--lg-border-subtle) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .actions button:hover {
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--lg-accent) !important;
}

html.light-mode .actions button.liked {
  color: #ff3b30 !important;
  background: rgba(255, 59, 48, 0.1) !important;
}

html.light-mode .actions button.saved {
  color: #ff9500 !important;
  background: rgba(255, 149, 0, 0.1) !important;
}

html.light-mode .actions button img.icon-img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(12%) saturate(20%) hue-rotate(185deg) brightness(95%) contrast(92%) !important;
}

@media (max-width: 768px) {
  html.light-mode .actions button {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.light-mode .actions button img.icon-img {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) !important;
  }

  html.light-mode .actions button span {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  }
}

/* ---- HAMBURGER MENU ---- */
html.light-mode .mobile-menu-btn,
html.light-mode .hamburger {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border-strong) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* ---- ALERT STATES ---- */
html.light-mode .alert-success {
  background: rgba(52, 199, 89, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(52, 199, 89, 0.25) !important;
  color: #065f46 !important;
}

html.light-mode .alert-danger {
  background: rgba(255, 59, 48, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 59, 48, 0.2) !important;
  color: #991b1b !important;
}

html.light-mode .alert-warning {
  background: rgba(255, 204, 0, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 204, 0, 0.25) !important;
  color: #92400e !important;
}

/* ---- SCROLLBAR STYLING ---- */
html.light-mode .main-content::-webkit-scrollbar {
  width: 10px !important;
}

html.light-mode .main-content::-webkit-scrollbar-track {
  background: transparent !important;
}

html.light-mode .main-content::-webkit-scrollbar-thumb {
  background: rgba(0, 122, 255, 0.25) !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}

html.light-mode .main-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 122, 255, 0.45) !important;
  background-clip: content-box !important;
}

/* Firefox sidebar scrollbar */
html.light-mode .sidebar {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 122, 255, 0.4) transparent !important;
}

/* Firefox main-content scrollbar */
html.light-mode .main-content {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 122, 255, 0.3) transparent !important;
}

/* WebKit sidebar scrollbar thumb (existing + updated) */
html.light-mode .sidebar::-webkit-scrollbar {
  width: 6px !important;
}

html.light-mode .sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

html.light-mode .sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 122, 255, 0.35) !important;
  border-radius: 10px !important;
}

/* ============================================================= */
/* LIQUID GLASS — PAGE-SPECIFIC COMPONENT OVERRIDES              */
/* Part 2 of the Apple Liquid Glass Design System                */
/* ============================================================= */

/* ========================================================= */
/* STORE / MARKETPLACE                                       */
/* ========================================================= */
html.light-mode .amazon-header {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-edge-top), var(--lg-shadow) !important;
}

html.light-mode .header-top {
  background: transparent !important;
}

html.light-mode .header-nav {
  background: rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html.light-mode .logo {
  color: var(--lg-accent) !important;
}

html.light-mode .search-category,
html.light-mode .search-input {
  background: var(--lg-glass-input) !important;
  color: var(--lg-text) !important;
  border-color: var(--lg-border) !important;
}

html.light-mode .search-category option {
  background: #ffffff !important;
  color: var(--lg-text) !important;
}

html.light-mode .search-input::placeholder {
  color: var(--lg-text-faint) !important;
}

html.light-mode .header-action {
  color: var(--lg-text-muted) !important;
}

html.light-mode .header-action:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

html.light-mode .user-profile {
  background: var(--lg-glass-light) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .user-profile .user-name {
  color: var(--lg-text) !important;
}

html.light-mode .nav-link {
  color: var(--lg-text-muted) !important;
}

html.light-mode .nav-link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--lg-text) !important;
}

html.light-mode .nav-link.active {
  background: rgba(255, 255, 255, 0.30) !important;
  color: var(--lg-text) !important;
}

html.light-mode .amazon-sidebar {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-sidebar) !important;
  -webkit-backdrop-filter: var(--lg-blur-sidebar) !important;
  border-right: 1px solid var(--lg-border) !important;
}

html.light-mode .sidebar-section h3 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .sidebar-link {
  color: var(--lg-text-muted) !important;
}

html.light-mode .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

html.light-mode .sidebar-link.active {
  background: rgba(255, 255, 255, 0.30) !important;
  color: var(--lg-text) !important;
}

html.light-mode .sidebar-main-category-select,
html.light-mode .sidebar-main-category-select option {
  background: var(--lg-glass-input) !important;
  color: var(--lg-text) !important;
  border-color: var(--lg-border) !important;
}

html.light-mode .sidebar-subcategory-option {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  color: var(--lg-text-muted) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html.light-mode .sidebar-subcategory-option:hover {
  background: var(--lg-glass) !important;
}

html.light-mode .sidebar-subcategory-option.active {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: var(--lg-border-strong) !important;
  color: var(--lg-text) !important;
}

html.light-mode .stat-label {
  color: var(--lg-text-faint) !important;
}

html.light-mode .stat-value {
  color: var(--lg-accent) !important;
}

html.light-mode .currency-selector {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .search-container-main {
  background: var(--lg-glass) !important;
  border: 1px solid var(--lg-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html.light-mode .search-input-main {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .search-input-main::placeholder {
  color: var(--lg-text-faint) !important;
}

html.light-mode .clear-search-btn-main {
  color: var(--lg-text-muted) !important;
  border-color: var(--lg-border) !important;
  background: var(--lg-glass-light) !important;
}

html.light-mode .active-filter-tag {
  background: rgba(0, 122, 255, 0.1) !important;
  border-color: rgba(0, 122, 255, 0.2) !important;
  color: var(--lg-accent) !important;
}

html.light-mode .section-title {
  color: var(--lg-text) !important;
}

html.light-mode .product-info {
  background: transparent !important;
}

html.light-mode .product-name {
  color: var(--lg-text) !important;
}

html.light-mode .product-price {
  color: var(--lg-accent) !important;
}

html.light-mode .product-price::before,
html.light-mode .product-meta {
  color: var(--lg-text-faint) !important;
}

html.light-mode .empty-state {
  background: var(--lg-glass-light) !important;
  border-color: var(--lg-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.light-mode .empty-state h3 {
  color: var(--lg-text) !important;
}

html.light-mode .empty-state p {
  color: var(--lg-text-muted) !important;
}

html.light-mode .mobile-tabs {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .mobile-tab {
  color: var(--lg-text-muted) !important;
}

html.light-mode .mobile-tab:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

html.light-mode .mobile-tab.active {
  background: rgba(255, 255, 255, 0.25) !important;
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-accent) !important;
}

/* Store modals */
html.light-mode .boost-modal-content,
html.light-mode .payment-confirmation-content {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-heavy) !important;
  -webkit-backdrop-filter: var(--lg-blur-heavy) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow-elevated) !important;
}

html.light-mode .modal-header h2,
html.light-mode .boost-modal-header h2,
html.light-mode .payment-confirmation-header h2 {
  color: var(--lg-text) !important;
}

html.light-mode .close-modal,
html.light-mode .close-popup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.light-mode .image-section {
  background: var(--lg-glass-light) !important;
  border-right-color: var(--lg-border-subtle) !important;
}

html.light-mode .image-upload p,
html.light-mode .store-profile-header,
html.light-mode .hero-banner h1,
html.light-mode .boosted-title,
html.light-mode .section-title {
  color: var(--lg-text) !important;
}

html.light-mode .hero-banner p,
html.light-mode .boosted-info {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .image-upload .upload-hint,
html.light-mode .payment-message {
  color: var(--lg-text-faint) !important;
}

html.light-mode .form-group input,
html.light-mode .form-group textarea,
html.light-mode .form-group select,
html.light-mode .payment-account-input input,
html.light-mode .payment-account-input select,
html.light-mode .bank-search-input {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html.light-mode .form-group select option {
  background: #ffffff !important;
  color: var(--lg-text) !important;
}

html.light-mode .form-group input:focus,
html.light-mode .form-group textarea:focus,
html.light-mode .form-group select:focus,
html.light-mode .payment-account-input input:focus,
html.light-mode .payment-account-input select:focus,
html.light-mode .bank-search-input:focus {
  border-color: var(--lg-accent) !important;
  background: rgba(255, 255, 255, 0.55) !important;
}

html.light-mode .form-section-header {
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .form-section {
  background: transparent !important;
}

html.light-mode .payment-method-option,
html.light-mode .country-option,
html.light-mode .network-option {
  background: var(--lg-glass-light) !important;
  border-color: var(--lg-border-subtle) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html.light-mode .payment-method-option label,
html.light-mode .country-option label,
html.light-mode .network-option label {
  color: var(--lg-text) !important;
}

html.light-mode .bank-selection-container,
html.light-mode .bank-list {
  background: var(--lg-glass-light) !important;
  border-color: var(--lg-border-subtle) !important;
}

html.light-mode .bank-option {
  border-bottom-color: var(--lg-border-subtle) !important;
  color: var(--lg-text) !important;
}

html.light-mode .bank-option:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

html.light-mode .bank-country-group {
  background: rgba(0, 122, 255, 0.1) !important;
  color: var(--lg-accent) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .location-section {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html.light-mode .location-header h3 {
  color: var(--lg-text) !important;
}

html.light-mode .location-details {
  background: var(--lg-glass) !important;
  border-color: var(--lg-border) !important;
  color: var(--lg-text-muted) !important;
}

html.light-mode .location-loading {
  background: rgba(0, 122, 255, 0.06) !important;
  border-color: rgba(0, 122, 255, 0.15) !important;
  color: var(--lg-text) !important;
}

html.light-mode .location-blocked-overlay {
  background: rgba(255, 59, 48, 0.05) !important;
}

html.light-mode .location-blocked-overlay p,
html.light-mode .location-blocked-overlay .browser-steps {
  color: var(--lg-text-muted) !important;
  background: transparent !important;
}

html.light-mode .boost-info,
html.light-mode .payment-details {
  background: var(--lg-glass-light) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html.light-mode .boost-info p,
html.light-mode .payment-details p {
  color: var(--lg-text-muted) !important;
}

html.light-mode .payment-details p strong {
  color: var(--lg-text) !important;
}

html.light-mode .location-lock-hint {
  background: rgba(255, 59, 48, 0.06) !important;
  border-color: rgba(255, 59, 48, 0.15) !important;
}

html.light-mode .submit-btn.locked {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--lg-text-faint) !important;
}

/* ========================================================= */
/* LANDING PAGE & HOW IT WORKS                               */
/* ========================================================= */
html.light-mode .landing-page .topbar {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom: 1px solid var(--lg-border) !important;
}

html.light-mode .topbar h1 {
  color: var(--lg-text) !important;
}

html.light-mode .nav-menu a {
  color: var(--lg-text-muted) !important;
}

html.light-mode .nav-menu a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--lg-accent) !important;
}

html.light-mode .mobile-menu-btn {
  color: #ffffff !important;
}

html.light-mode .text-content h1 {
  color: var(--lg-text) !important;
}

html.light-mode .text-content p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .panel h2 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .panel p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .info-text h3 {
  color: var(--lg-text) !important;
}

html.light-mode .info-text p {
  color: var(--lg-text-muted) !important;
}

html.light-mode .feature-card h3 {
  color: var(--lg-accent) !important;
}

html.light-mode .feature-card p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .hero-img {
  filter: none !important;
}

html.light-mode .section-description {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .step h2 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .step p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .step-icon {
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--lg-accent) !important;
  backdrop-filter: blur(6px) !important;
}

html.light-mode .step-number {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
}

html.light-mode .guide-simple h3 {
  color: var(--lg-text) !important;
}

html.light-mode .guide-simple p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .security-message h2 {
  color: var(--lg-text) !important;
}

html.light-mode .security-message p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .safety-badge {
  background: rgba(0, 122, 255, 0.06) !important;
  border-color: var(--lg-accent) !important;
  color: var(--lg-accent) !important;
}

/* ========================================================= */
/* CONTACT & ABOUT US                                        */
/* ========================================================= */
html.light-mode .left-section,
html.light-mode .right-section,
html.light-mode .mobile-left-section,
html.light-mode .mobile-right-section {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-color: var(--lg-border) !important;
}

html.light-mode .left-section h1,
html.light-mode .mobile-left-section h1 {
  color: var(--lg-text) !important;
}

html.light-mode .left-section p,
html.light-mode .mobile-left-section p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .contact-card h3,
html.light-mode .social-card h3,
html.light-mode .faq-question {
  color: var(--lg-text) !important;
}

html.light-mode .contact-card p,
html.light-mode .social-card p,
html.light-mode .faq-answer {
  color: var(--lg-text-secondary) !important;
}

/* About page */
html.light-mode nav {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom-color: var(--lg-border) !important;
}

html.light-mode .nav-links a {
  color: var(--lg-text-muted) !important;
}

html.light-mode .nav-links a:hover {
  color: var(--lg-accent) !important;
}

html.light-mode section {
  background: transparent !important;
}

html.light-mode .about-hero h1 {
  color: var(--lg-text) !important;
}

html.light-mode .about-hero p {
  color: var(--lg-text-secondary) !important;
}

/* Donation page */
html.light-mode .donation-panel h2,
html.light-mode .image-content h3,
html.light-mode .impact-info h3 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .donation-panel p,
html.light-mode .image-content p,
html.light-mode .impact-list li {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .stat-item {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(8px) !important;
}

html.light-mode .impact-list li i {
  color: var(--lg-accent) !important;
}

html.light-mode .form-group label {
  color: var(--lg-text) !important;
}

/* ========================================================= */
/* JOB SEEKER DASHBOARD                                      */
/* ========================================================= */
html.light-mode .description-content,
html.light-mode .application-section,
html.light-mode .job-details-section,
html.light-mode .modal-container,
html.light-mode .modal-header,
html.light-mode .location-permission-content {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .job-info h4,
html.light-mode .application-section h3,
html.light-mode .job-details-section h3,
html.light-mode .modal-header h2,
html.light-mode .location-permission-text h2,
html.light-mode .job-detail-value {
  color: var(--lg-text) !important;
}

html.light-mode .job-info small,
html.light-mode .job-meta small,
html.light-mode .job-detail-label,
html.light-mode .location-permission-text p,
html.light-mode .form-hint {
  color: var(--lg-text-muted) !important;
}

html.light-mode .file-input-label,
html.light-mode .file-item {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  color: var(--lg-text) !important;
}

html.light-mode .search-box input,
html.light-mode .mobile-search-box input {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

/* ========================================================= */
/* VIEW EXPENSES                                             */
/* ========================================================= */
html.light-mode .content-nav {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .content-nav-btn {
  border-radius: var(--lg-radius-sm) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html.light-mode .content-nav-btn.active {
  border-radius: var(--lg-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25) !important;
}

html.light-mode .search-container {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .search-box input {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .search-box input:focus {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: var(--lg-accent) !important;
}

html.light-mode .search-icon {
  color: var(--lg-text-muted) !important;
}

html.light-mode .search-section button {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
}

html.light-mode .summary-card p {
  color: var(--lg-text-faint) !important;
}

html.light-mode .summary-card h3 {
  color: var(--lg-accent) !important;
}

html.light-mode .summary-card span {
  color: var(--lg-text-faint) !important;
}

html.light-mode .filters-section h3 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .filter-group label {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .filter-group select {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .expenses-container h3 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .expense-description {
  color: var(--lg-text) !important;
}

html.light-mode .category-pill {
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--lg-accent) !important;
  border: 1px solid rgba(0, 122, 255, 0.15) !important;
}

html.light-mode .expense-meta {
  color: var(--lg-text-faint) !important;
}

html.light-mode .expense-amount {
  color: var(--lg-text) !important;
}

html.light-mode .expense-actions button {
  color: var(--lg-text-muted) !important;
}

html.light-mode .expense-actions button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--lg-text) !important;
}

html.light-mode .no-results {
  background: var(--lg-glass-light) !important;
  color: var(--lg-text-faint) !important;
  border: 1px dashed var(--lg-border) !important;
}

/* ========================================================= */
/* BUSINESS DASHBOARD                                        */
/* ========================================================= */
html.light-mode .card h5 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .user-actions button {
  color: var(--lg-text-muted) !important;
  background: transparent !important;
}

html.light-mode .user-actions button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--lg-text) !important;
}

html.light-mode .input-group input {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .input-group input:focus {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: var(--lg-accent) !important;
}

html.light-mode .input-group button {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
}

html.light-mode .stat-card h6 {
  color: var(--lg-text-faint) !important;
}

html.light-mode .stat-value {
  color: var(--lg-text) !important;
}

html.light-mode .profit {
  color: #34c759 !important;
}

html.light-mode .loss {
  color: #ff3b30 !important;
}

html.light-mode .normal {
  color: var(--lg-text-muted) !important;
}

html.light-mode .chart-card h5 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .action-btn {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
}

html.light-mode .action-btn:hover {
  background: var(--lg-accent-hover) !important;
}

html.light-mode .item-row {
  background: transparent !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .item-row input,
html.light-mode .item-type,
html.light-mode .other-type-input {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .remove-btn,
html.light-mode .delete-source-btn,
html.light-mode .delete-history-btn {
  background: rgba(255, 59, 48, 0.8) !important;
  color: #ffffff !important;
}

html.light-mode .add-btn {
  background: rgba(52, 199, 89, 0.8) !important;
  color: #ffffff !important;
}

html.light-mode .summary-row {
  border-top-color: var(--lg-border-subtle) !important;
  color: var(--lg-text) !important;
}

html.light-mode .negative-warning {
  background: rgba(255, 59, 48, 0.08) !important;
  border-color: rgba(255, 59, 48, 0.2) !important;
  color: #991b1b !important;
}

html.light-mode .positive-message {
  background: rgba(52, 199, 89, 0.08) !important;
  border-color: rgba(52, 199, 89, 0.2) !important;
  color: #065f46 !important;
}

html.light-mode .income-source-item span {
  color: var(--lg-text) !important;
}

html.light-mode .topbar h3 {
  color: var(--lg-text) !important;
}

/* ========================================================= */
/* EBOOK EMPIRE                                              */
/* ========================================================= */
html.light-mode .books-container h3,
html.light-mode .youtube-courses-container h3 {
  color: var(--lg-text) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .book-cover {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .book-title {
  color: var(--lg-text) !important;
}

html.light-mode .read-btn {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
}

html.light-mode .youtube-video-card {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
}

html.light-mode .youtube-video-title {
  color: var(--lg-text) !important;
}

html.light-mode .youtube-video-channel {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .youtube-video-views,
html.light-mode .youtube-video-date {
  color: var(--lg-text-faint) !important;
}

html.light-mode .youtube-watch-btn {
  background: rgba(255, 59, 48, 0.85) !important;
  color: #ffffff !important;
}

html.light-mode .reader-header {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-bottom: 1px solid var(--lg-border) !important;
}

html.light-mode .reader-title {
  color: var(--lg-text) !important;
}

/* ========================================================= */
/* JOB HUB PROMO                                             */
/* ========================================================= */
html.light-mode .badge {
  background: rgba(0, 122, 255, 0.1) !important;
  color: var(--lg-accent) !important;
  border: 1px solid rgba(0, 122, 255, 0.2) !important;
  backdrop-filter: blur(6px) !important;
}

html.light-mode .users {
  color: var(--lg-text-faint) !important;
}

html.light-mode .image-card {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow-elevated) !important;
}

html.light-mode .image-content::before {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.light-mode .floating-badge {
  background: rgba(255, 255, 255, 0.45) !important;
  color: var(--lg-text) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .image-corner-accent {
  border-color: rgba(0, 122, 255, 0.25) !important;
}

html.light-mode .image-content::after {
  border-color: rgba(0, 122, 255, 0.25) !important;
}

html.light-mode .highlight {
  color: var(--lg-accent) !important;
}

/* ========================================================= */
/* MESSAGE HUD                                               */
/* ========================================================= */
html.light-mode .app-container {
  background: transparent !important;
}

html.light-mode .left-sidebar,
html.light-mode .center-section,
html.light-mode .right-section,
html.light-mode .chat-area {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-color: var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .sidebar-header,
html.light-mode .chat-header,
html.light-mode .chat-partner-bar,
html.light-mode .search-bar {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
  color: var(--lg-text) !important;
}

html.light-mode .chat-partner-bar span,
html.light-mode .chat-header a {
  color: var(--lg-text) !important;
}

html.light-mode .chat-partner-bar:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

html.light-mode .search-bar input {
  background: var(--lg-glass-input) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .left-sidebar a {
  background: var(--lg-glass-light) !important;
  color: var(--lg-text-muted) !important;
  border: 1px solid transparent !important;
}

html.light-mode .left-sidebar a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--lg-text) !important;
}

html.light-mode .left-sidebar a.active {
  background: rgba(255, 255, 255, 0.35) !important;
  color: var(--lg-text) !important;
}

html.light-mode .left-sidebar h3 {
  color: var(--lg-accent) !important;
}

html.light-mode .user-row {
  background: transparent !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .user-row:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

html.light-mode .user-row-name {
  color: var(--lg-text) !important;
}

html.light-mode .user-row-description,
html.light-mode .user-row-text {
  color: var(--lg-text-faint) !important;
}

html.light-mode .chat-input-container {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-top: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .chat-input {
  background: var(--lg-glass-input) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .emoji-picker,
html.light-mode .context-menu,
html.light-mode .touch-context-menu {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-heavy) !important;
  -webkit-backdrop-filter: var(--lg-blur-heavy) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow-elevated) !important;
  color: var(--lg-text) !important;
}

html.light-mode .context-menu button,
html.light-mode .touch-context-menu button {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .context-menu button:hover,
html.light-mode .touch-context-menu button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--lg-text) !important;
}

html.light-mode .message-group.received .message-item {
  background: var(--lg-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-edge-top), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .message-group.sent .message-item {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border-strong) !important;
  box-shadow: var(--lg-edge-top), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .message-meta {
  color: var(--lg-text-faint) !important;
}

html.light-mode .message-status.sent {
  color: var(--lg-text-faint) !important;
}

html.light-mode .message-status.delivered,
html.light-mode .message-status.read {
  color: var(--lg-accent) !important;
}

html.light-mode .no-chats,
html.light-mode .loading {
  color: var(--lg-text-faint) !important;
}

html.light-mode .mobile-nav-buttons .mobile-nav-btn {
  background: rgba(0, 122, 255, 0.8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================================= */
/* NOTIFICATIONS PAGE                                        */
/* ========================================================= */
html.light-mode .header,
html.light-mode .toolbar,
html.light-mode .notifications-list,
html.light-mode .settings-panel,
html.light-mode .recycle-bin-container {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-color: var(--lg-border) !important;
  box-shadow: var(--lg-edge-top), var(--lg-shadow) !important;
}

html.light-mode .header h1,
html.light-mode .search-header h3,
html.light-mode .notifications-header,
html.light-mode .settings-panel h2,
html.light-mode .recycle-bin-header h2,
html.light-mode .notification-title,
html.light-mode .setting p {
  color: var(--lg-text) !important;
}

html.light-mode .notification-message,
html.light-mode .notification-meta,
html.light-mode .notification-date,
html.light-mode .filter-label,
html.light-mode .search-stats,
html.light-mode .setting span {
  color: var(--lg-text-muted) !important;
}

html.light-mode .notification-item {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
  background: transparent !important;
}

html.light-mode .notification-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

html.light-mode .notification-item.unread {
  background: rgba(255, 255, 255, 0.25) !important;
}

html.light-mode .notifications-header {
  background: rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .search-input,
html.light-mode .filter-select {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .clear-search-btn,
html.light-mode .refresh-btn,
html.light-mode .restore-btn,
html.light-mode .status-filter-btn {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html.light-mode .status-filter-btn.active {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html.light-mode .toolbar-btn,
html.light-mode .notification-action-btn {
  color: var(--lg-text-muted) !important;
}

html.light-mode .toolbar-btn:hover,
html.light-mode .notification-action-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--lg-text) !important;
}

html.light-mode .job-info,
html.light-mode .purchase-info,
html.light-mode .sale-info,
html.light-mode .message-info,
html.light-mode .bill-info {
  background: var(--lg-glass-light) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html.light-mode .job-info p,
html.light-mode .purchase-info p,
html.light-mode .sale-info p,
html.light-mode .message-info p,
html.light-mode .bill-info p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .payment-proof-section {
  background: var(--lg-glass-light) !important;
  border-left: 3px solid var(--lg-accent) !important;
}

/* ============================================================= */
/* LIQUID GLASS — REMAINING PAGES, DASHBOARD & RESPONSIVE        */
/* Part 3 of the Apple Liquid Glass Design System                */
/* ============================================================= */

/* ========================================================= */
/* BUSINESS CALCULATOR                                       */
/* ========================================================= */
html.light-mode .calculator-section h3,
html.light-mode .history-section h3,
html.light-mode .loan-results h4,
html.light-mode .history-expression,
html.light-mode .loan-history-title,
html.light-mode .result-value {
  color: var(--lg-text) !important;
}

html.light-mode .display {
  background: var(--lg-glass-input) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .calc-btn {
  background: var(--lg-glass) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
  box-shadow: var(--lg-edge-top) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .calc-btn:hover {
  background: var(--lg-glass-hover) !important;
  transform: translateY(-1px) !important;
}

html.light-mode .calc-btn.operator {
  background: rgba(255, 255, 255, 0.35) !important;
  color: var(--lg-text) !important;
  border-color: var(--lg-border-strong) !important;
}

html.light-mode .history-item,
html.light-mode .loan-history-item {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html.light-mode .history-item:hover,
html.light-mode .loan-history-item:hover {
  background: var(--lg-glass) !important;
}

html.light-mode .history-result,
html.light-mode .loan-history-details {
  color: var(--lg-accent) !important;
}

html.light-mode .history-meta,
html.light-mode .loan-history-meta,
html.light-mode .result-label {
  color: var(--lg-text-faint) !important;
}

html.light-mode .history-type-btn {
  background: var(--lg-glass-light) !important;
  color: var(--lg-text-muted) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(6px) !important;
}

html.light-mode .history-type-btn.active {
  background: rgba(255, 255, 255, 0.45) !important;
  color: var(--lg-text) !important;
  border-color: var(--lg-border-strong) !important;
}

html.light-mode .loan-results {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html.light-mode .result-row {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .no-history {
  color: var(--lg-text-faint) !important;
}

html.light-mode .calculator-section h3,
html.light-mode .history-section h3 {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

/* ========================================================= */
/* CART PAGE                                                  */
/* ========================================================= */
html.light-mode .cart-header {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .cart-header h1,
html.light-mode .cart-item-name,
html.light-mode .item-total,
html.light-mode .empty-cart h2,
html.light-mode .summary-title {
  color: var(--lg-text) !important;
}

html.light-mode .cart-header p,
html.light-mode .cart-item-meta,
html.light-mode .empty-cart p,
html.light-mode .seller-name {
  color: var(--lg-text-faint) !important;
}

html.light-mode .cart-item-name:hover {
  color: var(--lg-accent) !important;
}

html.light-mode .cart-item-price {
  color: var(--lg-accent) !important;
}

html.light-mode .cart-item {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .cart-item-image {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .quantity-controls {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border) !important;
  backdrop-filter: blur(6px) !important;
}

html.light-mode .quantity-btn {
  background: var(--lg-glass) !important;
  color: var(--lg-text-muted) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .quantity-btn:hover:not(:disabled) {
  background: var(--lg-glass-hover) !important;
}

html.light-mode .quantity-input {
  background: var(--lg-glass-input) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .remove-item-btn {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text-muted) !important;
}

html.light-mode .remove-item-btn:hover {
  background: rgba(255, 59, 48, 0.1) !important;
  border-color: #ff3b30 !important;
  color: #ff3b30 !important;
}

html.light-mode .empty-cart i {
  color: var(--lg-text-faint) !important;
}

html.light-mode .continue-shopping-btn {
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text-muted) !important;
  background: var(--lg-glass-light) !important;
}

html.light-mode .continue-shopping-btn:hover {
  background: var(--lg-glass) !important;
  color: var(--lg-text) !important;
}

html.light-mode .cart-toast {
  box-shadow: var(--lg-shadow-elevated) !important;
}

html.light-mode .summary-title {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .summary-title i {
  color: var(--lg-accent) !important;
}

/* ========================================================= */
/* CHECKOUT PAGE                                             */
/* ========================================================= */
html.light-mode .checkout-header {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .checkout-header h1 {
  color: var(--lg-text) !important;
}

html.light-mode .checkout-step {
  color: var(--lg-text-faint) !important;
}

html.light-mode .checkout-step.active {
  color: var(--lg-accent) !important;
}

html.light-mode .checkout-step.completed {
  color: #34c759 !important;
}

html.light-mode .step-number {
  background: var(--lg-glass) !important;
  color: var(--lg-text-muted) !important;
  backdrop-filter: blur(6px) !important;
}

html.light-mode .checkout-step.active .step-number {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
}

html.light-mode .checkout-step.completed .step-number {
  background: #34c759 !important;
  color: #ffffff !important;
}

html.light-mode .section-title,
html.light-mode .order-summary .summary-title {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
  color: var(--lg-text) !important;
}

html.light-mode .payment-method {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: var(--lg-transition) !important;
}

html.light-mode .payment-method:hover {
  background: var(--lg-glass) !important;
  border-color: var(--lg-border-strong) !important;
}

html.light-mode .payment-method.selected {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: var(--lg-border-strong) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important;
}

html.light-mode .payment-method-info h4 {
  color: var(--lg-text) !important;
}

html.light-mode .payment-method-info p {
  color: var(--lg-text-faint) !important;
}

html.light-mode .payment-details {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(8px) !important;
}

html.light-mode .account-info {
  background: rgba(0, 122, 255, 0.08) !important;
  border: 1px solid rgba(0, 122, 255, 0.15) !important;
  color: var(--lg-accent) !important;
}

html.light-mode .screenshot-upload {
  background: var(--lg-glass-light) !important;
  border: 2px dashed var(--lg-border) !important;
}

html.light-mode .screenshot-upload:hover {
  border-color: var(--lg-accent) !important;
  background: var(--lg-glass) !important;
}

html.light-mode .screenshot-upload p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .order-item {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .order-item-image {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .order-item-name {
  color: var(--lg-text) !important;
}

html.light-mode .order-item-seller,
html.light-mode .order-item-quantity {
  color: var(--lg-text-faint) !important;
}

html.light-mode .summary-row {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .summary-row.total {
  border-top: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .thank-you-content {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .thank-you-title {
  color: var(--lg-text) !important;
}

html.light-mode .thank-you-message {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .thank-you-details {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .detail-row {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .detail-label {
  color: var(--lg-text-faint) !important;
}

html.light-mode .detail-value {
  color: var(--lg-text) !important;
}

html.light-mode .form-progress {
  background: rgba(0, 122, 255, 0.08) !important;
}

/* ========================================================= */
/* EMPLOYER DASHBOARD                                        */
/* ========================================================= */
html.light-mode .tabs {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .tab {
  color: var(--lg-text-faint) !important;
}

html.light-mode .tab:hover {
  color: var(--lg-text) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html.light-mode .tab.active {
  color: var(--lg-accent) !important;
  border-bottom-color: var(--lg-accent) !important;
  font-weight: 600 !important;
}

html.light-mode .applications-list {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-right: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .application-item {
  background: transparent !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .application-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

html.light-mode .application-item.selected {
  background: rgba(255, 255, 255, 0.3) !important;
  border-left: 3px solid #1c1c1e !important;
}

html.light-mode .application-sender,
html.light-mode .application-subject {
  color: var(--lg-text) !important;
}

html.light-mode .application-preview {
  color: var(--lg-text-faint) !important;
}

html.light-mode .application-date {
  color: var(--lg-text-faint) !important;
}

html.light-mode .action-btn {
  color: var(--lg-text-muted) !important;
}

html.light-mode .action-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: var(--lg-text) !important;
}

/* Status badges — glass */
html.light-mode .status-pending {
  background: rgba(255, 204, 0, 0.12) !important;
  color: #92400e !important;
  border: 1px solid rgba(255, 204, 0, 0.3) !important;
}

html.light-mode .status-reviewed {
  background: rgba(52, 199, 89, 0.1) !important;
  color: #065f46 !important;
  border: 1px solid rgba(52, 199, 89, 0.25) !important;
}

html.light-mode .status-accepted {
  background: rgba(52, 199, 89, 0.12) !important;
  color: #166534 !important;
  border: 1px solid rgba(52, 199, 89, 0.3) !important;
}

html.light-mode .status-rejected {
  background: rgba(255, 59, 48, 0.1) !important;
  color: #991b1b !important;
  border: 1px solid rgba(255, 59, 48, 0.2) !important;
}

html.light-mode .application-detail {
  background: var(--lg-glass-light) !important;
  backdrop-filter: var(--lg-blur) !important;
}

html.light-mode .detail-header {
  background: rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .detail-title {
  color: var(--lg-text) !important;
}

html.light-mode .detail-subtitle {
  color: var(--lg-text-faint) !important;
}

html.light-mode .back-button {
  color: var(--lg-accent) !important;
}

html.light-mode .action-btn-top {
  color: var(--lg-text-muted) !important;
}

html.light-mode .action-btn-top:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

html.light-mode .detail-main {
  background: transparent !important;
}

html.light-mode .message-header {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .sender-name {
  color: var(--lg-text) !important;
}

html.light-mode .sender-details {
  color: var(--lg-text-faint) !important;
}

html.light-mode .message-date {
  color: var(--lg-text-faint) !important;
}

html.light-mode .message-body {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .info-label {
  color: var(--lg-text-faint) !important;
}

html.light-mode .info-value {
  color: var(--lg-text) !important;
}

html.light-mode .document-name {
  color: var(--lg-text) !important;
}

html.light-mode .document-icon {
  color: var(--lg-accent) !important;
}

html.light-mode .document-download {
  color: var(--lg-accent-purple) !important;
  background: rgba(88, 86, 214, 0.08) !important;
  border: 1px solid rgba(88, 86, 214, 0.2) !important;
}

html.light-mode .document-download:hover {
  background: var(--lg-accent-purple) !important;
  color: #ffffff !important;
}

html.light-mode .detail-sidebar {
  background: var(--lg-glass-light) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-left: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .sidebar-title {
  color: var(--lg-text) !important;
}

html.light-mode .sidebar-info {
  color: var(--lg-text-faint) !important;
}

html.light-mode .btn-review {
  background: rgba(245, 158, 11, 0.85) !important;
  color: #fff !important;
}

html.light-mode .btn-accept {
  background: rgba(52, 199, 89, 0.85) !important;
  color: #fff !important;
}

html.light-mode .btn-reject {
  background: rgba(255, 59, 48, 0.85) !important;
  color: #fff !important;
}

html.light-mode .btn-delete {
  background: rgba(107, 114, 128, 0.85) !important;
  color: #fff !important;
}

html.light-mode .search-panel {
  background: var(--lg-glass) !important;
  border-bottom: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: var(--lg-blur-light) !important;
}

html.light-mode .filter-label {
  color: var(--lg-text-faint) !important;
}

html.light-mode .filter-select {
  background: var(--lg-glass-input) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .filter-select:focus {
  border-color: var(--lg-accent) !important;
}

html.light-mode .filter-select option {
  background: #ffffff !important;
  color: var(--lg-text) !important;
}

html.light-mode .search-stats {
  color: var(--lg-text-faint) !important;
  border-top: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .empty-state svg {
  color: var(--lg-text-faint) !important;
}

html.light-mode .no-applications {
  background: var(--lg-glass-light) !important;
  color: var(--lg-text-faint) !important;
  border: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .applicant-link {
  color: var(--lg-accent) !important;
  border-bottom: 1px dotted var(--lg-accent) !important;
}

html.light-mode .search-highlight {
  background: rgba(255, 204, 0, 0.2) !important;
  color: var(--lg-text) !important;
}

html.light-mode .index-help {
  background: rgba(52, 199, 89, 0.08) !important;
  color: #065f46 !important;
  border: 1px solid rgba(52, 199, 89, 0.2) !important;
}

html.light-mode .error-notification {
  background: rgba(255, 59, 48, 0.08) !important;
  color: #991b1b !important;
  border: 1px solid rgba(255, 59, 48, 0.2) !important;
}

/* ========================================================= */
/* BILLING / MEMBERSHIP PLANS                                */
/* ========================================================= */
html.light-mode .membership-section h1 {
  color: var(--lg-text) !important;
}

html.light-mode .membership-section p {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .card.trial-card {
  border-color: rgba(0, 122, 255, 0.4) !important;
}

html.light-mode .card.discount-card {
  border-color: rgba(255, 59, 48, 0.4) !important;
}

html.light-mode .card.access-card {
  border-color: rgba(52, 199, 89, 0.4) !important;
}

html.light-mode .card h3 {
  color: var(--lg-text) !important;
}

html.light-mode .card ul li {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .card button {
  background: var(--lg-glass) !important;
  color: var(--lg-text) !important;
  border-color: var(--lg-border) !important;
  backdrop-filter: blur(8px) !important;
}

html.light-mode .card.trial-card button {
  border-color: rgba(0, 122, 255, 0.3) !important;
}

html.light-mode .card.trial-card button:hover {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
}

html.light-mode .card.access-card button:hover {
  background: #34c759 !important;
  color: #ffffff !important;
}

html.light-mode .discount-info {
  color: var(--lg-text-muted) !important;
}

html.light-mode .price-container .original-price {
  color: var(--lg-text-faint) !important;
}

html.light-mode .price-container .discount-price {
  color: #ff3b30 !important;
}

html.light-mode .expiry-info {
  background: rgba(255, 204, 0, 0.1) !important;
  border-color: #d69e2e !important;
  color: #d69e2e !important;
}

html.light-mode .payment-notice {
  background: rgba(255, 204, 0, 0.08) !important;
  border-color: #d69e2e !important;
}

html.light-mode .payment-notice p {
  color: #744210 !important;
}

html.light-mode .footer {
  color: var(--lg-text-muted) !important;
}

html.light-mode .footer a {
  color: var(--lg-accent) !important;
}

html.light-mode .prompt-content {
  background: var(--lg-glass-heavy) !important;
  backdrop-filter: var(--lg-blur-heavy) !important;
  color: var(--lg-text) !important;
  box-shadow: var(--lg-shadow-elevated) !important;
}

html.light-mode .prompt-content h2 {
  color: #34c759 !important;
}

html.light-mode .prompt-content p {
  color: var(--lg-text-secondary) !important;
}

/* ========================================================= */
/* BIO / VIEW PROFILE                                        */
/* ========================================================= */
html.light-mode .profile-header {
  background: var(--lg-glass-light) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .profile-info h2 {
  color: var(--lg-text) !important;
}

html.light-mode .profile-subtitle {
  color: var(--lg-text-faint) !important;
}

html.light-mode .contact-item {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .contact-item i {
  color: var(--lg-accent) !important;
}

html.light-mode .bio-content {
  background: transparent !important;
}

html.light-mode .bio-section {
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .section-header h3 {
  color: var(--lg-accent) !important;
}

html.light-mode .section-header i {
  color: var(--lg-accent) !important;
}

html.light-mode .section-content {
  background: var(--lg-glass-light) !important;
  border: 1px solid var(--lg-border-subtle) !important;
  backdrop-filter: blur(8px) !important;
}

html.light-mode .info-item {
  background: var(--lg-glass-light) !important;
  border-left-color: var(--lg-accent) !important;
}

html.light-mode .skill-tag {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .right-sidebar {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border-color: var(--lg-border) !important;
  box-shadow: var(--lg-shadow) !important;
}

html.light-mode .sidebar-section {
  border-bottom-color: var(--lg-border-subtle) !important;
}

html.light-mode .sidebar-section h4 {
  color: var(--lg-accent) !important;
}

html.light-mode .stat-label {
  color: var(--lg-text-faint) !important;
}

html.light-mode .stat-value {
  color: var(--lg-text) !important;
}

html.light-mode .action-btn {
  border-color: var(--lg-border) !important;
  color: var(--lg-text-muted) !important;
  background: var(--lg-glass-light) !important;
  backdrop-filter: blur(6px) !important;
}

html.light-mode .action-btn:hover {
  background: var(--lg-glass) !important;
  border-color: var(--lg-accent) !important;
  color: var(--lg-accent) !important;
}

html.light-mode .top-navbar {
  border-bottom-color: var(--lg-border) !important;
}

html.light-mode .nav-title h1 {
  color: var(--lg-text) !important;
}

html.light-mode .nav-title p {
  color: var(--lg-text-faint) !important;
}

html.light-mode .nav-btn {
  background: var(--lg-glass-light) !important;
  color: var(--lg-text-muted) !important;
  border: 1px solid var(--lg-border) !important;
  backdrop-filter: blur(6px) !important;
}

html.light-mode .nav-btn:hover {
  background: var(--lg-glass) !important;
}

html.light-mode .nav-btn.primary {
  background: var(--lg-accent) !important;
  color: #ffffff !important;
  border-color: var(--lg-accent) !important;
}

/* ========================================================= */
/* DASHBOARD SPECIFIC                                        */
/* ========================================================= */
html.light-mode .balance-card h3,
html.light-mode .summary-card p {
  color: var(--lg-text-faint) !important;
}

html.light-mode .balance-card span,
html.light-mode .summary-card h3,
html.light-mode .breakdown-item strong {
  color: var(--lg-text) !important;
}

html.light-mode .breakdown-item span {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .breakdown-item {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

/* ========================================================= */
/* PWA INSTALL SECTION                                       */
/* ========================================================= */
html.light-mode .pwa-install-section {
  background: var(--lg-glass) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .pwa-install-title {
  color: var(--lg-text) !important;
}

html.light-mode .pwa-install-desc {
  color: var(--lg-text-secondary) !important;
}

/* ========================================================= */
/* FEED INTERACTION FIXES                                    */
/* ========================================================= */
html.light-mode .post .actions button span {
  color: var(--lg-text-secondary) !important;
}

/* ========================================================= */
/* SIDEBAR WELCOME TEXT (both modes use this)                 */
/* ========================================================= */
.sidebar h1#welcomeText {
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
  margin: 15px 15px 25px 15px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
  width: calc(100% - 30px) !important;
}

.sidebar h1#welcomeText::before {
  content: "account_circle";
  font-family: "Material Icons" !important;
  font-size: 24px !important;
  margin-right: 10px !important;
  color: #00d4ff !important;
  flex-shrink: 0 !important;
}

/* ========================================================= */
/* UNIVERSAL MOBILE RESPONSIVENESS PATCH                     */
/* ========================================================= */
@media screen and (max-width: 768px) {

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .content,
  .main-content,
  #mainContent {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .summary-cards,
  .grid-container,
  .features-grid,
  .settings-item,
  .expense-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 15px !important;
  }

  .panel,
  .card,
  .dashboard-card,
  .settings-section,
  .post-box,
  .feed-post,
  .modal-content,
  .welcome-panel {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 18px !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .form-input {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
  }

  .submit-btn,
  .btn-primary,
  .social-btn {
    width: 100% !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    justify-content: center !important;
  }

  html.light-mode .settings-action,
  html.light-mode .expense-actions {
    width: 100% !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  html.light-mode .settings-action .btn,
  html.light-mode .expense-actions .btn {
    width: 100% !important;
  }

  img,
  video,
  iframe,
  canvas {
    max-width: 100% !important;
    object-fit: contain !important;
    height: auto !important;
  }

  html.light-mode .modal {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 10px auto !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }

  html.light-mode .topbar {
    padding: 12px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  html.light-mode .topbar h2 {
    font-size: 18px !important;
    margin: 0 !important;
  }

  /* Employer dashboard mobile */
  html.light-mode body {
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  html.light-mode .content {
    height: auto !important;
    min-height: 100vh !important;
  }

  html.light-mode .content-nav {
    padding: 12px 14px !important;
  }

  html.light-mode .content-nav-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  html.light-mode .content-nav-btn {
    flex: 1 !important;
    font-size: 13px !important;
    padding: 10px 6px !important;
    border-radius: 12px !important;
    text-align: center !important;
    font-weight: 600 !important;
  }

  html.light-mode .applications-list {
    height: auto !important;
    min-height: 60vh !important;
    max-height: calc(100dvh - 280px) !important;
    border-right: none !important;
  }

  html.light-mode .application-item {
    padding: 14px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html.light-mode .application-sender {
    width: auto !important;
    max-width: 55% !important;
    font-size: 14px !important;
  }

  html.light-mode .application-actions {
    margin-left: auto !important;
  }

  .application-detail {
    height: auto !important;
    min-height: 70vh !important;
  }

  .detail-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .detail-title {
    font-size: 18px !important;
  }

  .detail-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .btn {
    min-width: 100% !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
  }

  .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .search-bar {
    max-width: 100% !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 8px !important;
  }

  .tab {
    padding: 12px 14px !important;
    font-size: 13px !important;
    display: inline-block !important;
  }

  .search-filters {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media screen and (max-width: 480px) {

  html.light-mode .content,
  html.light-mode .main-content,
  html.light-mode #mainContent {
    padding: 8px !important;
  }

  html.light-mode .panel,
  html.light-mode .card,
  html.light-mode .welcome-panel {
    padding: 12px !important;
  }

  .application-sender {
    max-width: 45% !important;
    font-size: 13px !important;
  }

  .status-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    margin-left: 6px !important;
  }

  .detail-title {
    font-size: 16px !important;
  }

  html.light-mode .content-nav-btn {
    font-size: 12px !important;
    padding: 9px 4px !important;
  }
}

/* ============================================================= */
/* REALISTIC CURVED WATER GLASS (visionOS look)                  */
/* ============================================================= */

/* Step 1 — Page background (the "water" behind the glass) */
html.light-mode body {
  background: 
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url('https://images.unsplash.com/photo-1548263594-a71ea65a8598?q=80&w=2070&auto=format&fit=crop') center center !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html.light-mode body::before,
html.light-mode body::after { 
  display: none !important; 
}

/* Step 2 — Glass card surface */
html.light-mode .panel,
html.light-mode .card,
html.light-mode .sidebar,
html.light-mode .topbar,
html.light-mode .modal-content,
html.light-mode .donation-panel,
html.light-mode .image-panel,
html.light-mode .mobile-content-section,
html.light-mode .impact-info,
html.light-mode .product-card,
html.light-mode .stat-card,
html.light-mode .search-container-main,
html.light-mode .hero-banner,
html.light-mode .boost-modal-content,
html.light-mode .payment-confirmation-content,
html.light-mode .overview-card,
html.light-mode .budget-alerts-container,
html.light-mode .setup-card,
html.light-mode .categories-card,
html.light-mode .chart-card,
html.light-mode .category-item,
html.light-mode .summary-card,
html.light-mode .filters-section,
html.light-mode .book-card,
html.light-mode .youtube-video-card,
html.light-mode .reader-header,
html.light-mode .search-container,
html.light-mode .hud-pill,
html.light-mode .scope-toggle,
html.light-mode .radius-panel,
html.light-mode .stat-badge,
html.light-mode .pop-inner,
html.light-mode .perm-card,
html.light-mode .pm-card,
html.light-mode .search-drawer,
html.light-mode .marker-name,
html.light-mode .my-label,
html.light-mode .post,
html.light-mode .rightbar,
html.light-mode .user-result,
html.light-mode .share-content,
html.light-mode .modal-content,
html.light-mode .comment-input,
html.light-mode .audio-preview,
html.light-mode .modal-right,
html.light-mode .notifications-list,
html.light-mode .notification-item,
html.light-mode .settings-panel,
html.light-mode .recycle-bin-container,
html.light-mode .toolbar,
html.light-mode .status-filter-container,
html.light-mode .search-container,
html.light-mode .profile-header,
html.light-mode .grid,
html.light-mode .popup-content,
html.light-mode #modal-inner {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.52) 0%,
      rgba(224,243,252,0.22) 25%,
      rgba(196,232,248,0.14) 55%,
      rgba(170,216,240,0.20) 100%) !important;
  backdrop-filter: blur(40px) saturate(180%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 1px 0 0 rgba(255,255,255,0.60),
    inset 0 0 0 1px rgba(184,223,242,0.30),
    0 0 0 0.5px rgba(144,196,224,0.25),
    0 20px 60px rgba(130,190,225,0.18),
    0 8px 24px rgba(150,200,235,0.12) !important;
}

/* Ensure People Map is crystal clear in Light Mode */
html.light-mode .leaflet-tile-pane {
  filter: none !important;
}

html.light-mode .leaflet-container {
  background: #f0f9ff !important;
}

/* Map Components Typography Overrides */
html.light-mode .pop-name,
html.light-mode .dr-name,
html.light-mode .radius-val,
html.light-mode .marker-name,
html.light-mode .my-label,
html.light-mode .hud-pill,
html.light-mode .stat-badge strong {
  color: #1a202c !important;
  font-weight: 700 !important;
}

html.light-mode .pop-loc,
html.light-mode .dr-loc,
html.light-mode .radius-label,
html.light-mode .stat-badge,
html.light-mode .pop-hint {
  color: #4a5568 !important;
}

html.light-mode .hud-pill .material-icons,
html.light-mode .stat-badge .material-icons,
html.light-mode .marker-tail,
html.light-mode .my-tail {
  filter: saturate(1.5) brightness(0.8);
}

/* Social & Saved Posts Typography Overrides */
html.light-mode .user-result-name,
html.light-mode .post-header strong,
html.light-mode .post-body .caption,
html.light-mode .comment-username,
html.light-mode .reply-username,
html.light-mode .comment-text,
html.light-mode .reply-text,
html.light-mode .modal-header,
html.light-mode .modal-caption,
html.light-mode .share-header h3,
html.light-mode .share-user-name,
html.light-mode .share-section-title {
  color: #1a202c !important;
}

html.light-mode .post-header span,
html.light-mode .post-stats,
html.light-mode .comment-time,
html.light-mode .reply-time,
html.light-mode .share-user-handle,
html.light-mode .platform-name {
  color: #4a5568 !important;
}

html.light-mode .post,
html.light-mode .modal-right,
html.light-mode .share-content,
html.light-mode .rightbar {
  color: #000 !important;
}

/* Mobile Overrides for Social/Saved Feeds */
@media (max-width: 768px) {
  html.light-mode body,
  html.light-mode .content,
  html.light-mode .post,
  html.light-mode .modal-content,
  html.light-mode .bottom-nav {
    background: transparent !important;
    background-color: transparent !important;
  }
  
  html.light-mode .post-body,
  html.light-mode .user-info-div a,
  html.light-mode .caption {
    text-shadow: none !important;
  }
}

/* Step 3 — Caustic light effect inside each card */
html.light-mode .panel::before,
html.light-mode .card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 55% 40% at 28% 35%, rgba(255,255,255,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 75% 70%, rgba(200,232,250,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 30% 25% at 55% 15%, rgba(255,255,255,0.20) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}

/* Step 4 — Top wet-edge specular highlight */
html.light-mode .panel::after,
html.light-mode .card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 6% !important;
  width: 88% !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.90) 20%,
    rgba(255,255,255,0.98) 50%,
    rgba(255,255,255,0.90) 80%,
    transparent 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ---- SOCIAL BUTTONS FIX ---- */
html.light-mode .social-btn {
  background: rgba(255, 255, 255, 0.45) !important;
  color: var(--lg-text) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

html.light-mode .social-btn:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
}

html.light-mode .social-btn img {
  filter: brightness(0) !important; /* Makes white logos black in light mode for clarity */
  opacity: 0.85 !important;
  width: 20px !important;
  height: 20px !important;
}
/* ---- PRODUCT REVIEWS LIGHT MODE ---- */
html.light-mode .review-modal {
  background: rgba(0, 0, 0, 0.2) !important;
}

html.light-mode .review-modal-content {
  background: var(--lg-glass-heavy) !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow-elevated) !important;
}

html.light-mode .review-modal-header {
  border-bottom: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .review-hub-header h3 {
  color: var(--lg-text) !important;
}

html.light-mode .write-review-btn {
  background: var(--lg-glass) !important;
  border: 1px solid var(--lg-border) !important;
  color: var(--lg-text) !important;
}

html.light-mode .write-review-btn:hover {
  background: var(--lg-glass-hover) !important;
  box-shadow: var(--lg-shadow) !important;
}

html.light-mode .review-form-container {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid var(--lg-border-subtle) !important;
}

html.light-mode .review-textarea {
  background: #ffffff !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border) !important;
}

html.light-mode .star-rating-input i {
  color: rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .star-rating-input i.active {
  color: #ffca28 !important;
  text-shadow: 0 0 10px rgba(255, 202, 40, 0.3) !important;
}

html.light-mode .review-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html.light-mode .reviewer-name {
  color: var(--lg-text) !important;
}

html.light-mode .review-comment {
  color: var(--lg-text-secondary) !important;
}

html.light-mode .review-date {
  color: var(--lg-text-faint) !important;
}

html.light-mode .review-action-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--lg-text-muted) !important;
}

@media (max-width: 768px) {
  html.light-mode .review-modal-content {
    background: #ffffff !important;
  }
  
  html.light-mode .review-modal-header {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
  }
  
  html.light-mode .review-modal-body {
    background: #ffffff !important;
  }
}


/* Star Ratings in Light Mode */
html.light-mode .stars i.material-icons {
  color: #ffca28 !important;
  text-shadow: none !important;
}

html.light-mode .rating-count {
  color: var(--lg-text-secondary) !important;
}