/* ============================================================
   THEME OVERRIDE — Light Mode for Ritik Jindal & Associates
   NUCLEAR APPROACH: Forces light colors on ALL elements 
   using universal selectors + !important to beat inline styles.
   ============================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  --bg-primary: #050505;
  --bg-secondary: #080810;
  --text-primary: rgba(229,231,235,0.9);
  --text-secondary: rgba(229,231,235,0.55);
  --accent-purple: #7B61E8;
  --accent-gold: #C9A84C;
}

html.light {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F5F3FF;
  --text-primary: #1A1A2E;
  --text-secondary: #4A4A6A;
  --accent-purple: #5D3FD3;
  --accent-gold: #B8941F;
  color-scheme: light;
}

/* ── Smooth Transitions ──────────────────────────────────── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  transition-delay: 0s !important;
}

/* ============================================================
   NUCLEAR LIGHT MODE OVERRIDES
   ============================================================ */

/* ── Body & Base Background ─────────────────────────────── */
html.light,
html.light body {
  background: #FAFAFA !important;
  color: #1A1A2E !important;
}

/* ── ALL SECTIONS: Kill dark backgrounds ────────────────── */
html.light section,
html.light main,
html.light div.min-h-screen,
html.light .bg-obsidian {
  background-color: #FAFAFA !important;
}

/* Kill ALL inline dark background colors on any element */
html.light [style*="background:#050505"],
html.light [style*="background: #050505"],
html.light [style*="background:#080810"],
html.light [style*="background: #080810"],
html.light [style*="background:#0a0812"],
html.light [style*="background: #0a0812"],
html.light [style*="background:#0F0E18"],
html.light [style*="background: #0F0E18"] {
  background: #FAFAFA !important;
}

/* Kill inline dark section backgrounds */
html.light section[style],
html.light div[style*="min-height"] {
  background-color: transparent !important;
}

/* Specifically override section background inline styles */
html.light section[style*="background"] {
  background: #FAFAFA !important;
}

/* ── ALL TEXT: Force dark text ───────────────────────────── */
html.light .text-white { color: #1A1A2E !important; }
html.light .text-gray-100 { color: #1A1A2E !important; }
html.light .text-gray-200 { color: #2A2A4E !important; }
html.light .text-gray-300 { color: #4A4A6A !important; }
html.light .text-gray-400 { color: #6A6A8A !important; }
html.light .text-gray-500 { color: #8888AA !important; }
html.light .text-silver { color: #1A1A2E !important; }
html.light .heading-lg { color: #1A1A2E !important; }

/* Force ALL inline color overrides via attribute selectors */
html.light [style*="color:#e5e7eb"],
html.light [style*="color: #e5e7eb"],
html.light [style*="color:#E5E7EB"],
html.light [style*="color:white"],
html.light [style*="color: white"],
html.light [style*="color:#fff"],
html.light [style*="color: #fff"],
html.light [style*="color:#ffffff"],
html.light [style*="color: #ffffff"] {
  color: #1A1A2E !important;
}

html.light [style*="color:rgba(229,231,235,0.9)"],
html.light [style*="color:rgba(229,231,235,0.8)"],
html.light [style*="color:rgba(229,231,235,0.7)"] {
  color: #1A1A2E !important;
}

html.light [style*="color:rgba(229,231,235,0.55)"],
html.light [style*="color:rgba(229,231,235,0.5)"],
html.light [style*="color:rgba(229,231,235,0.6)"] {
  color: #4A4A6A !important;
}

html.light [style*="color:rgba(229,231,235,0.4)"],
html.light [style*="color:rgba(229,231,235,0.45)"],
html.light [style*="color:rgba(229,231,235,0.35)"] {
  color: #6A6A8A !important;
}

html.light [style*="color:rgba(229,231,235,0.3)"],
html.light [style*="color:rgba(229,231,235,0.25)"],
html.light [style*="color:rgba(229,231,235,0.2)"] {
  color: #AAAACC !important;
}

/* Gold accent text — darken for light bg */
html.light [style*="color:#C9A84C"],
html.light [style*="color: #C9A84C"],
html.light [style*="color:rgba(201,168,76"] {
  color: #9A7A10 !important;
}

/* ── HEADINGS — all must be dark ────────────────────────── */
html.light h1, html.light h2, html.light h3,
html.light h4, html.light h5, html.light h6 {
  color: #1A1A2E !important;
}

/* Gold gradient headings — use deeper gold on light */
html.light h1[style*="background-clip:text"],
html.light h2[style*="background-clip:text"],
html.light span[style*="background-clip:text"],
html.light h1[style*="-webkit-background-clip:text"],
html.light h2[style*="-webkit-background-clip:text"],
html.light span[style*="-webkit-background-clip:text"],
html.light [style*="-webkit-text-fill-color:transparent"] {
  background: linear-gradient(135deg, #5D3FD3, #7B61E8, #5D3FD3) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── PARAGRAPHS — readable body text ────────────────────── */
html.light p {
  color: #3A3A5A !important;
}

html.light p[style*="color"] {
  color: #4A4A6A !important;
}

/* Muted descriptive text */
html.light span[style*="color:rgba(229,231,235"] {
  color: #6A6A8A !important;
}

/* ── NAVIGATION ─────────────────────────────────────────── */
html.light header,
html.light header[style],
html.light nav[style*="background"] {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04) !important;
}

html.light header.scrolled {
  background: rgba(255,255,255,0.97) !important;
}

html.light header span,
html.light header a:not(.btn-primary):not([style*="background:linear-gradient"]) {
  color: #4A4A6A !important;
}

html.light header a:hover {
  color: #1A1A2E !important;
}

/* Nav brand text */
html.light header [style*="font-family:var(--font-noto-serif)"],
html.light header h1 {
  color: #1A1A2E !important;
}

/* Firm name gold gradient in nav */
html.light header [style*="-webkit-text-fill-color:transparent"] {
  background: linear-gradient(135deg, #5D3FD3, #7B61E8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Phone link */
html.light header a[href*="tel:"] {
  color: #4A4A6A !important;
}

/* Mobile menu button */
html.light header button {
  color: #1A1A2E !important;
}

html.light header button svg {
  stroke: #1A1A2E !important;
}

/* ── CARDS — White elevated cards ───────────────────────── */
html.light [style*="background:rgba(255,255,255,0.04)"],
html.light [style*="background:rgba(255,255,255,0.03)"],
html.light [style*="background:rgba(255,255,255,0.02)"],
html.light [style*="background:linear-gradient(135deg, rgba(255,255,255,0.04)"],
html.light [style*="background:linear-gradient(135deg,rgba(255,255,255,0.04)"] {
  background: #FFFFFF !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}

/* Service/feature cards */
html.light .relative.h-full,
html.light div[class*="rounded-2xl"][style*="background"] {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}

/* Stat chips */
html.light .stat-chip,
html.light div[class*="stat-chip"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* ── BORDERS — all light ────────────────────────────────── */
html.light [style*="border:1px solid rgba(255,255,255,0.0"],
html.light [style*="border:1px solid rgba(255,255,255,0.1"],
html.light [style*="border-top:1px solid rgba(255,255,255"],
html.light [style*="border-bottom:1px solid rgba(255,255,255"] {
  border-color: rgba(0,0,0,0.06) !important;
}

/* Dashed circle around orb */
html.light [style*="border:1px dashed"] {
  border-color: rgba(93,63,211,0.15) !important;
}

/* ── ORB/SPHERE — Light purple version ──────────────────── */
html.light [style*="background:radial-gradient(circle at 35% 30%, #1a1240"] {
  background: radial-gradient(circle at 35% 30%, #e8e0ff 0%, #d4c8f8 50%, #c0b0e8 100%) !important;
  border: 1px solid rgba(93,63,211,0.2) !important;
  box-shadow: 0 0 80px rgba(93,63,211,0.15), inset 0 0 60px rgba(93,63,211,0.08) !important;
}

/* Orb inner text */
html.light [style*="background:radial-gradient(circle at 35% 30%"] span,
html.light [style*="background:radial-gradient(circle at 35% 30%"] p,
html.light [style*="background:radial-gradient(circle at 35% 30%"] div {
  color: #4A3A8A !important;
}

/* Orb floating labels */
html.light [style*="background:rgba(10,8,20,0.85)"],
html.light [style*="background:rgba(10,8,20,0.9)"] {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(93,63,211,0.2) !important;
  color: #5D3FD3 !important;
  box-shadow: 0 4px 16px rgba(93,63,211,0.1) !important;
}

/* Conic gradient spinner */
html.light [style*="background:conic-gradient"] {
  opacity: 0.3 !important;
}

/* ── DECORATIVE BLOBS/GRADIENTS — reduce opacity ────────── */
html.light [style*="background:radial-gradient(circle, rgba(93,63,211"] {
  opacity: 0.2 !important;
}
html.light [style*="background:radial-gradient(circle, rgba(201,168,76"] {
  opacity: 0.15 !important;
}
html.light [style*="background:radial-gradient(ellipse"] {
  opacity: 0.25 !important;
}

/* Bottom gradient fade */
html.light [style*="background:linear-gradient(to top, #050505"],
html.light [style*="background:linear-gradient(to top,#050505"] {
  background: linear-gradient(to top, #FAFAFA, transparent) !important;
}

/* Dot pattern */
html.light [style*="background-image:radial-gradient(circle, #E5E7EB"] {
  opacity: 0.04 !important;
  background-image: radial-gradient(circle, #4A4A6A 1px, transparent 1px) !important;
}

/* ── SECTION LABELS ─────────────────────────────────────── */
html.light .section-label {
  color: #5D3FD3 !important;
  background: rgba(93,63,211,0.06) !important;
  border-color: rgba(93,63,211,0.2) !important;
}

/* Section label inline styles */
html.light [style*="background:rgba(93,63,211,0.1)"],
html.light [style*="background:rgba(93,63,211,0.12)"],
html.light [style*="background:rgba(93,63,211,0.08)"] {
  background: rgba(93,63,211,0.06) !important;
  border-color: rgba(93,63,211,0.2) !important;
}

/* Purple icon boxes */
html.light [style*="background:rgba(93,63,211,0.12)"] svg {
  color: #5D3FD3 !important;
}

/* ── BUTTONS ────────────────────────────────────────────── */
html.light .btn-primary,
html.light a[style*="background:linear-gradient(135deg,#5D3FD3"],
html.light a[style*="background:linear-gradient(135deg, #5D3FD3"],
html.light button[style*="background:linear-gradient(135deg,#5D3FD3"],
html.light button[style*="background:linear-gradient(135deg, #5D3FD3"] {
  background: linear-gradient(135deg, #5D3FD3 0%, #7B61E8 100%) !important;
  color: #fff !important;
  border: none !important;
}

html.light .btn-secondary,
html.light a[style*="border:1px solid rgba(255,255,255,0.15)"],
html.light a[style*="border:1px solid rgba(255,255,255,0.12)"] {
  background: rgba(93,63,211,0.06) !important;
  border: 1px solid rgba(93,63,211,0.25) !important;
  color: #5D3FD3 !important;
}

/* ── FORM INPUTS ────────────────────────────────────────── */
html.light input[style*="background"],
html.light textarea[style*="background"],
html.light select[style*="background"],
html.light input[style*="border"],
html.light textarea[style*="border"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #1A1A2E !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #8888AA !important;
}

html.light select {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #1A1A2E !important;
}

/* ── COMPLIANCE PULSE CARDS ─────────────────────────────── */
html.light [style*="background:linear-gradient(135deg, rgba(93,63,211,0.06)"],
html.light [style*="background:linear-gradient(135deg,rgba(93,63,211,0.06)"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(93,63,211,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}

html.light [style*="color:#C9A84C"] {
  color: #9A7A10 !important;
}

html.light [style*="background:rgba(201,168,76,0.1)"] {
  background: rgba(184,148,31,0.08) !important;
  border-color: rgba(184,148,31,0.2) !important;
  color: #9A7A10 !important;
}

/* Toggle buttons */
html.light [style*="border:1px solid rgba(123,97,232,0.4)"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(93,63,211,0.15) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

html.light button[style*="background:rgba(255,255,255,0.03)"] {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  color: #4A4A6A !important;
}

/* ── BLOG CARDS ─────────────────────────────────────────── */
html.light a[style*="background:rgba(255,255,255,0.02)"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}

html.light a[style*="background:rgba(255,255,255,0.02)"]:hover {
  border-color: rgba(93,63,211,0.2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
}

/* ── LINE GRADIENTS ─────────────────────────────────────── */
html.light [style*="background:linear-gradient(90deg, transparent, rgba(93,63,211"] {
  background: linear-gradient(90deg, transparent, rgba(93,63,211,0.2), transparent) !important;
}

html.light [style*="background:linear-gradient(90deg, transparent, rgba(201,168,76"] {
  background: linear-gradient(90deg, transparent, rgba(93,63,211,0.15), transparent) !important;
}

/* ── MOBILE MENU ────────────────────────────────────────── */
html.light [style*="position:fixed"][style*="background:rgba(5,5,5"] {
  background: rgba(255,255,255,0.98) !important;
}

html.light [style*="position:fixed"] a.text-gray-300,
html.light [style*="position:fixed"] a[class*="text-gray"] {
  color: #4A4A6A !important;
}

/* ── FOOTER — Keep dark for premium look ────────────────── */
html.light footer[style*="background:#050505"],
html.light footer[style*="background: #050505"],
html.light footer {
  /* Footer stays dark intentionally for contrast */
}

/* Disclaimer bar */
html.light [style*="background:#0a0812"] {
  background: #F0EDF8 !important;
  border-top: 1px solid rgba(93,63,211,0.08) !important;
}

html.light [style*="background:#0a0812"] p,
html.light [style*="background:#0a0812"] a {
  color: #6A6A8A !important;
}

html.light [style*="background:#0a0812"] a {
  color: #5D3FD3 !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
html.light::-webkit-scrollbar { width: 8px; }
html.light::-webkit-scrollbar-track { background: #F5F3FF; }
html.light::-webkit-scrollbar-thumb { background: rgba(93,63,211,0.2); border-radius: 4px; }
html.light::-webkit-scrollbar-thumb:hover { background: rgba(93,63,211,0.35); }

/* ── SELECTION ──────────────────────────────────────────── */
html.light ::selection {
  background: rgba(93,63,211,0.15);
  color: #1A1A2E;
}

/* ============================================================
   BLOG PHP PAGES — Light Mode
   ============================================================ */
html.light .nav {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

html.light .nav-brand h1 {
  background: linear-gradient(135deg,#5D3FD3,#7B61E8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.light .nav-brand span { color: #6A6A8A !important; }
html.light .nav-links a { color: #4A4A6A !important; }
html.light .nav-links a:hover { color: #5D3FD3 !important; text-decoration: none !important; }

html.light .post-title {
  background: linear-gradient(135deg,#5D3FD3,#7B61E8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.light .meta-text { color: #6A6A8A !important; }
html.light .content { color: #2A2A4E !important; }
html.light .content h1, html.light .content h2, html.light .content h3 { color: #1A1A2E !important; }
html.light .content strong { color: #1A1A2E !important; }
html.light .content h2 { border-bottom-color: rgba(0,0,0,0.08) !important; }
html.light .content blockquote { background: rgba(93,63,211,0.04) !important; border-left-color: #5D3FD3 !important; }
html.light .content pre { background: #F5F3FF !important; border-color: rgba(0,0,0,0.08) !important; }
html.light .content code { background: rgba(93,63,211,0.08) !important; color: #5D3FD3 !important; }

html.light .author-row { border-bottom-color: rgba(0,0,0,0.08) !important; }
html.light .author-info p { color: #1A1A2E !important; }
html.light .author-info span { color: #6A6A8A !important; }
html.light .featured-img { border-color: rgba(0,0,0,0.08) !important; }

/* Blog list page */
html.light .hero-section { background: transparent !important; }
html.light .hero-title {
  background: linear-gradient(135deg,#5D3FD3,#7B61E8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html.light .hero-desc { color: #4A4A6A !important; }
html.light .hero-label { color: #5D3FD3 !important; }

html.light .blog-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}
html.light .blog-card:hover {
  border-color: rgba(93,63,211,0.2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
}
html.light .card-title { color: #1A1A2E !important; }
html.light .card-excerpt { color: #4A4A6A !important; }
html.light .card-footer { border-top-color: rgba(0,0,0,0.06) !important; }
html.light .author-name { color: #1A1A2E !important; }
html.light .author-date, html.light .read-time { color: #8888AA !important; }

html.light .newsletter h2 { color: #1A1A2E !important; }
html.light .newsletter p { color: #6A6A8A !important; }
html.light .nl-note { color: #AAAACC !important; }
html.light .empty-state { color: #8888AA !important; }

html.light .footer {
  background: #1A1A2E !important;
  color: rgba(255,255,255,0.5) !important;
}
html.light .footer a { color: rgba(255,255,255,0.3) !important; }

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Theme Toggle Button */
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  cursor: pointer; transition: all 0.3s ease;
  padding: 0; outline: none; flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: rgba(93,63,211,0.15);
  border-color: rgba(93,63,211,0.4);
  transform: scale(1.05);
}
.theme-toggle-btn svg {
  width: 18px; height: 18px;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.theme-toggle-btn:active svg { transform: rotate(30deg) scale(0.85); }

html.light .theme-toggle-btn {
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.04);
}
html.light .theme-toggle-btn:hover {
  background: rgba(93,63,211,0.08);
  border-color: rgba(93,63,211,0.3);
}

/* Share Buttons */
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(229,231,235,0.6);
  cursor: pointer; transition: all 0.2s;
}
.share-btn:hover { background: rgba(93,63,211,0.15); border-color: rgba(93,63,211,0.3); color: #7B61E8; }
html.light .share-btn { border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.02); color: #6A6A8A; }
html.light .share-btn:hover { background: rgba(93,63,211,0.06); border-color: rgba(93,63,211,0.2); color: #5D3FD3; }

/* TOC */
.toc-container {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 20px 24px; margin-bottom: 32px;
}
html.light .toc-container { background: #F5F3FF; border: 1px solid rgba(93,63,211,0.1); }
.toc-container a { color: rgba(229,231,235,0.6) !important; transition: color 0.2s; }
.toc-container a:hover { color: #7B61E8 !important; }
html.light .toc-container a { color: #4A4A6A !important; }
html.light .toc-container a:hover { color: #5D3FD3 !important; }

/* Related Posts */
.related-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px; transition: all 0.3s; }
.related-card:hover { border-color: rgba(93,63,211,0.3); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
html.light .related-card { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
html.light .related-card:hover { border-color: rgba(93,63,211,0.2); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }

/* Author Bio Card */
.author-bio-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 28px; }
html.light .author-bio-card { background: #F5F3FF; border: 1px solid rgba(93,63,211,0.1); }

/* Breadcrumbs */
.breadcrumb a { color: rgba(229,231,235,0.4); transition: color 0.2s; }
.breadcrumb a:hover { color: #7B61E8; }
html.light .breadcrumb a { color: #8888AA; }
html.light .breadcrumb a:hover { color: #5D3FD3; }
.breadcrumb span { color: rgba(229,231,235,0.25); }
html.light .breadcrumb span { color: #AAAACC; }

/* Search Bar */
.search-input { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 16px 12px 44px; color: #e5e7eb; font-size: 14px; width: 100%; outline: none; transition: all 0.3s; }
.search-input:focus { border-color: rgba(93,63,211,0.5); box-shadow: 0 0 0 3px rgba(93,63,211,0.1); }
html.light .search-input { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.1); color: #1A1A2E; }
html.light .search-input:focus { border-color: rgba(93,63,211,0.4); box-shadow: 0 0 0 3px rgba(93,63,211,0.08); }

/* Category Pills */
.category-pill { padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: rgba(229,231,235,0.55); text-decoration: none; }
.category-pill:hover { border-color: rgba(93,63,211,0.3); color: #7B61E8; }
.category-pill.active { background: linear-gradient(135deg, #5D3FD3 0%, #7B61E8 100%); border-color: transparent; color: #fff; }
html.light .category-pill { border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.02); color: #4A4A6A; }
html.light .category-pill:hover { border-color: rgba(93,63,211,0.2); color: #5D3FD3; }
html.light .category-pill.active { background: linear-gradient(135deg, #5D3FD3 0%, #7B61E8 100%); color: #fff; border-color: transparent; }

/* Pagination */
.page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: rgba(229,231,235,0.55); cursor: pointer; transition: all 0.2s; text-decoration: none; }
.page-btn:hover { border-color: rgba(93,63,211,0.3); color: #7B61E8; }
.page-btn.active { background: linear-gradient(135deg, #5D3FD3 0%, #7B61E8 100%); border-color: transparent; color: #fff; }
.page-btn.disabled { opacity: 0.3; cursor: not-allowed; }
html.light .page-btn { border: 1px solid rgba(0,0,0,0.08); background: #FFFFFF; color: #4A4A6A; }
html.light .page-btn:hover { border-color: rgba(93,63,211,0.2); color: #5D3FD3; }
html.light .page-btn.active { background: linear-gradient(135deg, #5D3FD3 0%, #7B61E8 100%); color: #fff; }

/* Skeleton Loader */
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.12; } }
.skeleton { background: rgba(255,255,255,0.06); border-radius: 8px; animation: skeleton-pulse 1.5s ease-in-out infinite; }
html.light .skeleton { background: rgba(0,0,0,0.06); }

/* Copy Tooltip */
.copy-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; background: #5D3FD3; color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.copy-tooltip.show { opacity: 1; }

/* Reading Progress Bar */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #5D3FD3, #7B61E8); z-index: 9999; transition: width 0.1s linear; }

/* ============================================================
   WCAG AA CONTRAST FIX — Enhanced Dark Mode Readability
   ============================================================ */
html.dark [style*="color:rgba(229,231,235,0.55)"],
html.dark [style*="color: rgba(229,231,235,0.55)"] { color: rgba(229,231,235,0.72) !important; }
html.dark [style*="color:rgba(229,231,235,0.45)"],
html.dark [style*="color: rgba(229,231,235,0.45)"] { color: rgba(229,231,235,0.65) !important; }
html.dark [style*="color:rgba(229,231,235,0.4)"],
html.dark [style*="color: rgba(229,231,235,0.4)"] { color: rgba(229,231,235,0.6) !important; }
html.dark [style*="color:rgba(229,231,235,0.35)"],
html.dark [style*="color: rgba(229,231,235,0.35)"] { color: rgba(229,231,235,0.55) !important; }
html.dark .text-gray-400 { color: rgba(229,231,235,0.72) !important; }
html.dark .text-gray-500 { color: rgba(229,231,235,0.65) !important; }

/* Focus visible states */
*:focus-visible { outline: 2px solid #7B61E8 !important; outline-offset: 2px !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #7B61E8 !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(123,97,232,0.15) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(93,63,211,0.5) !important;
  box-shadow: 0 0 0 3px rgba(93,63,211,0.1) !important;
}