/* ══════════════════════════════════════════
   Creator Pay — Dark Theme
   Color Palette:
   Background:  #0d1117 (deep navy black)
   Surface:     #161b22 (card bg)
   Surface2:    #1c2333 (hover/elevated)
   Border:      #30363d
   Text:        #e6edf3 (primary)
   Text muted:  #8b949e
   Accent:      #7c6af7 → #a78bfa (purple gradient)
   Green:       #3fb950
   Red:         #f85149
   ══════════════════════════════════════════ */

/* ── Toggle Button ── */
.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.theme-toggle-btn:hover {
  border-color: #667eea;
  transform: rotate(20deg) scale(1.1);
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
}

body.dark-mode,
html.dark-mode body .theme-toggle-btn {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

/* ── Base ── */
body.dark-mode,
html.dark-mode body,
html.dark-mode body {
  background: #0d1117 !important;
  color: #e6edf3 !important;
  transition: none !important;
}

/* ── Navbar ── */
body.dark-mode .navbar,
html.dark-mode .navbar,
html.dark-mode body .navbar {
  background: rgba(13, 17, 23, 0.98) !important;
  border-bottom: 1px solid #30363d !important;
  box-shadow: 0 1px 0 #30363d !important;
  transition: none !important;
}

body.dark-mode,
html.dark-mode body .nav-links a {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .nav-links a:hover {
  color: #a78bfa !important;
}

/* ── Login / Sign Up buttons (admin-btn) ── */
body.dark-mode,
html.dark-mode body .admin-btn {
  background: linear-gradient(135deg, #7c6af7 0%, #5b4fcf 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(124, 106, 247, 0.35) !important;
  border: none !important;
}

body.dark-mode,
html.dark-mode body .admin-btn:hover {
  background: linear-gradient(135deg, #9580ff 0%, #7c6af7 100%) !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.5) !important;
}

body.dark-mode,
html.dark-mode body .search-box input {
  background: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .search-box input::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .search-box input:focus {
  border-color: #7c6af7 !important;
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.15) !important;
}

/* ── Hero ── */
body.dark-mode .hero-gradient,
html.dark-mode body .hero-gradient {
  background: url('/file/dark.png') center/cover no-repeat !important;
}

body.dark-mode,
html.dark-mode body .hero-left h1 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .hero-left p {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .hero-main-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode,
html.dark-mode body .hero-main-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .float-card {
  background: rgba(22, 27, 34, 0.97) !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode,
html.dark-mode body .float-card p:first-child {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .float-card p:last-child {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .skill-tags .glass-card {
  background: rgba(28, 35, 51, 0.9) !important;
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
}

/* ── Stats Bar — keep gradient, just tweak text ── */
body.dark-mode,
html.dark-mode body .stats-bar {
 linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}

/* ── How It Works ── */
body.dark-mode,
html.dark-mode body .how-section {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .section-header h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .section-header p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .step-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode,
html.dark-mode body .step-card:hover {
  border-color: #7c6af7 !important;
  box-shadow: 0 8px 28px rgba(124, 106, 247, 0.2) !important;
}

body.dark-mode,
html.dark-mode body .step-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .step-card p {
  color: #8b949e !important;
}

/* ── Categories ── */
body.dark-mode,
html.dark-mode body .categories-section {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .cat-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .cat-card:hover {
  background: #1c2333 !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 8px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .cat-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .cat-card p {
  color: #8b949e !important;
}

/* ── Seller CTA ── */
body.dark-mode,
html.dark-mode body .seller-cta {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .cta-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  box-shadow: 0 20px 60px rgba(124, 106, 247, 0.35) !important;
}

/* ── Resources ── */
body.dark-mode,
html.dark-mode body .resources-section {
  background: #0d1117 !important;
  transition: none !important;
}

body.dark-mode,
html.dark-mode body .filter-tabs {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .filter-btn {
  color: white !important;
}

body.dark-mode,
html.dark-mode body .filter-btn:hover {
  background: rgba(124, 106, 247, 0.12) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .filter-btn.active {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(124, 106, 247, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .resource-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode,
html.dark-mode body .resource-card:hover {
  background: #1c2333 !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 6px 20px rgba(124, 106, 247, 0.2) !important;
}

body.dark-mode,
html.dark-mode body .resource-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .resource-card p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .resource-price {
  color: #3fb950 !important;
}

body.dark-mode,
html.dark-mode body .resource-icon {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .skeleton-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .sk {
  background: #1c2333 !important;
  transition: none !important;
}

body.dark-mode,
html.dark-mode body .sk::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%) !important;
  transition: none !important;
}

/* ── Pagination ── */
body.dark-mode,
html.dark-mode body .pagination {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .pag-info {
  color: #8b949e !important
}

body.dark-mode,
html.dark-mode body .pag-arrow,
body.dark-mode,
html.dark-mode body .pag-num {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .pag-arrow:hover:not(:disabled),
body.dark-mode,
html.dark-mode body .pag-num:hover {
  border-color: #7c6af7 !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .pag-num.active {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Blog Section ── */
body.dark-mode,
html.dark-mode body .blog-home-section {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .blog-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .blog-card:hover {
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .blog-card-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .blog-card-excerpt {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .blog-card-date,
body.dark-mode,
html.dark-mode body .blog-card-author {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .blog-shimmer-img,
body.dark-mode,
html.dark-mode body .blog-shimmer-line {
  background: linear-gradient(90deg, #161b22 25%, #1c2333 50%, #161b22 75%) !important;
  background-size: 400% 100% !important;
}

/* ── Trust Strip ── */
body.dark-mode,
html.dark-mode body .trust-section {
  background: #0d1117 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .trust-icon {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .trust-item h4 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .trust-item p {
  color: #8b949e !important;
}

/* ── FAQ ── */


body.dark-mode,
html.dark-mode body .faq-item-home {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-item-home:hover {
  background: #1c2333 !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .faq-q {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .faq-a {
  color: #8b949e !important;
}

/* ── Footer ── */
body.dark-mode,
html.dark-mode body footer {
  background: linear-gradient(135deg, #010409 0%, #0d1117 100%) !important;
  border-top: 1px solid #30363d !important;
}

/* ── User Dropdown ── */
body.dark-mode,
html.dark-mode body .user-dropdown {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a {
  background: #161b22 !important;
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a:hover {
  background: #1c2333 !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .udh-divider {
  background: #30363d !important;
}

body.dark-mode,
html.dark-mode body .udh-logout {
  color: #f85149 !important;
}

body.dark-mode,
html.dark-mode body .udh-logout i {
  color: #f85149 !important;
}

body.dark-mode,
html.dark-mode body .udh-logout:hover {
  background: #1f1315 !important;
}

/* ── Mobile Sidebar ── */
body.dark-mode,
html.dark-mode body .mobile-sidebar {
  background: linear-gradient(180deg, #0d1117, #161b22) !important;
  border-right: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .mobile-sidebar-content a {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .mobile-sidebar-content a:hover {
  color: #a78bfa !important;
  background: rgba(124, 106, 247, 0.08) !important;
  border-left-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .mobile-sidebar-divider {
  background: #30363d !important;
}

body.dark-mode,
html.dark-mode body .mobile-user-info {
  background: linear-gradient(135deg, #161b22, #1c2333) !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .mobile-user-name {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .mobile-user-email {
  color: #8b949e !important;
}

/* ─────────────────────────────────────────
   MOBILE BOTTOM NAV - BASE
   ───────────────────────────────────────── */

.mob-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  border-top: 1px solid #e8edf5;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  z-index: 9999;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.step-card {
  position: relative;
  overflow: visible;
  padding-top: 50px;
}

.step-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Show only on mobile */
@media (max-width: 768px) {
  .mob-nav {
    display: flex;
  }

  body {
    padding-bottom: 90px; /* prevent content overlap */
  }
  .how-section,
  .resources-section,
  .faq-section,
  .trust-section,
  
  footer {
    position: relative;
    z-index: 1;
  }
   .mob-nav {
    z-index: 9999;
  }

  .step-card {
    position: relative;
    overflow: visible;
    padding-top: 50px;
  }

  .step-num {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
}

/* ─────────────────────────────────────────
   NAV ITEMS
   ───────────────────────────────────────── */

.mob-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  text-decoration: none;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;

  padding: 6px 2px;
  position: relative;
  height: 64px;

  transition: all 0.2s ease;
}

.mob-nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  transition: all 0.2s ease;
}

/* Active + Hover */
.mob-nav-item.active,
.mob-nav-item:hover {
  color: #667eea;
}

.mob-nav-item.active svg,
.mob-nav-item:hover svg {
  stroke: #667eea;
}

/* Active dot */
.mob-nav-item.active::after {
  content: '';
  position: absolute;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #667eea;
}

/* ─────────────────────────────────────────
   ADD BUTTON (CENTER)
   ───────────────────────────────────────── */

.mob-nav-add {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  margin: 0 6px;

  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 14px;

  color: #fff;
  box-shadow: 0 4px 14px rgba(102,126,234,0.40);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  transform: translateY(-20px); /* lift effect */
}

.mob-nav-add svg {
  stroke: #fff;
  width: 24px;
  height: 24px;
}

.mob-nav-add span {
  font-size: 10px;
  color: #fff;
}

.mob-nav-add:hover {
  opacity: 0.9;
}

.mob-nav-add.active::after {
  display: none;
}

/* ─────────────────────────────────────────
   DARK MODE 🌙
   ───────────────────────────────────────── */

html.dark-mode .mob-nav,
body.dark-mode .mob-nav {
  background: #0d1117 !important;
  border-top: 1px solid #30363d !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.6) !important;
  transition: none !important;
  will-change: transform !important;
  transform: translate3d(0,0,0) !important;
}
html:not(.dark-mode) .mob-nav,
body:not(.dark-mode) .mob-nav {
  background: #ffffff !important;
  border-top: 1px solid #e8edf5 !important;
  transition: none !important;
}

/* Default text/icon */
html.dark-mode .mob-nav-item,
body.dark-mode .mob-nav-item {
  color: #8b949e !important;
}

html.dark-mode .mob-nav-item svg,
body.dark-mode .mob-nav-item svg {
  stroke: #8b949e !important;
}

/* Active */
html.dark-mode .mob-nav-item.active,
html.dark-mode .mob-nav-item:hover,
html.dark-mode .mob-nav-item.active,
html.dark-mode .mob-nav-item:hover,
body.dark-mode .mob-nav-item.active,
body.dark-mode .mob-nav-item:hover {
  color: #a78bfa !important;
}

html.dark-mode .mob-nav-item.active svg,
html.dark-mode .mob-nav-item:hover svg,
body.dark-mode .mob-nav-item.active svg,
body.dark-mode .mob-nav-item:hover svg {
  stroke: #a78bfa !important;
}

/* Active dot */
html.dark-mode .mob-nav-item.active::after,
body.dark-mode .mob-nav-item.active::after {
  background: #a78bfa !important;
}

/* Add button (dark mode tweak) */
html.dark-mode .mob-nav-add,
body.dark-mode .mob-nav-add {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 4px 16px rgba(124,58,237,0.5);
}

/* ─────────────────────────────────────────
   EXTRA MOBILE FIX (NO JUMP ON SCROLL)
   ───────────────────────────────────────── */

html, body {
  height: auto;
}

/* ── Auth Modal ── */
body.dark-mode,
html.dark-mode body .auth-modal-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

body.dark-mode,
html.dark-mode body .am-right {
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .am-input {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .am-input:focus {
  border-color: #7c6af7 !important;
  background: #21293d !important;
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .am-input::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .am-tabs {
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .am-tab {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-tab.active {
  color: #a78bfa !important;
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .am-header h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .am-header p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-label-row label,
body.dark-mode,
html.dark-mode body .am-input-group label {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-switch {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-security {
  color: #8b949e !important;
}

/* ── Smooth transitions (exclude background on load to prevent flash) ── */
body,
body *:not(.sk):not(.sk::after):not(.blog-shimmer-img):not(.blog-shimmer-line) {
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
body.dark-mode-ready,
body.dark-mode-ready *:not(.sk):not(.blog-shimmer-img):not(.blog-shimmer-line) {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* ══════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════ */

/* Hero */
body.dark-mode,
html.dark-mode body .hero::before {
  background: rgba(13, 17, 23, 0.55) !important;
}

body.dark-mode,
html.dark-mode body .hero-badge {
  background: rgba(124, 106, 247, 0.18) !important;
  border-color: rgba(124, 106, 247, 0.35) !important;
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .hero-badge-dot {
  background: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .hero h1 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .hero p {
  color: #8b949e !important;
}

/* Page background */
html.dark-mode .page-content,
body.dark-mode .page-content {
  background: #161b22 !important;
}

/* Content boxes — all same, no hover */
body.dark-mode .content-box,
html.dark-mode body .content-box,
body.dark-mode .content-box:hover,
html.dark-mode body .content-box:hover,
body.dark-mode .content-box:nth-child(even),
html.dark-mode body .content-box:nth-child(even),
body.dark-mode .content-box:nth-child(even):hover,
html.dark-mode body .content-box:nth-child(even):hover {
  background: #161b22 !important;
  border-bottom-color: #21293d !important;
  transition: none !important;
}

body.dark-mode,
html.dark-mode body .content-box h2 {
  border-bottom-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .content-box>p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .content-box strong {
  color: #e6edf3 !important;
}

/* Feature items (What We Offer) */
body.dark-mode,
html.dark-mode body .feature-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .feature-item:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 10px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .feature-item h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .feature-item p {
  color: #8b949e !important;
}

/* Benefits list (How It Works) */
body.dark-mode,
html.dark-mode body .benefits-list li {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .benefits-list i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li span {
  color: #8b949e !important;
}

/* Values grid */
body.dark-mode,
html.dark-mode body .value-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .value-card:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 10px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .value-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .value-card p {
  color: #8b949e !important;
}

/* Contact strip */
body.dark-mode,
html.dark-mode body .contact-us-strip {
  background: #161b22 !important;
  border-top: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .contact-us-icon {
  background: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .contact-us-left h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .contact-us-left p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .contact-us-btn {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.35) !important;
}

/* Shimmer in dark */
body.dark-mode,
html.dark-mode body .shimmer-title,
body.dark-mode,
html.dark-mode body .shimmer-text,
body.dark-mode,
html.dark-mode body .shimmer-icon,
body.dark-mode,
html.dark-mode body .shimmer-feature-title,
body.dark-mode,
html.dark-mode body .shimmer-list-item,
body.dark-mode,
html.dark-mode body .shimmer-form-field,
body.dark-mode,
html.dark-mode body .shimmer-button {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .shimmer-box::before {
  background: linear-gradient(90deg, transparent, rgba(124, 106, 247, 0.08), transparent) !important;
}

/* ══════════════════════════════════════════
   FAQ PAGE
   ══════════════════════════════════════════ */
html.dark-mode .page-content,
body.dark-mode .page-content {
  background: #161b22 !important;
}

body.dark-mode .content-box,
html.dark-mode body .content-box,
body.dark-mode .content-box:hover,
html.dark-mode body .content-box:hover,
body.dark-mode .content-box:nth-child(even),
html.dark-mode body .content-box:nth-child(even),
body.dark-mode .content-box:nth-child(even):hover,
html.dark-mode body .content-box:nth-child(even):hover {
  background: #161b22 !important;
  border-bottom-color: #21293d !important;
  transition: none !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-item {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-item:hover {
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-q {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-a {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-icon {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .faq-category-title {
  color: #e6edf3 !important;
}

/* ══════════════════════════════════════════
   TERMS & PRIVACY PAGES
   ══════════════════════════════════════════ */


/* TOC Sidebar */
body.dark-mode,
html.dark-mode body .toc-inner {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}



body.dark-mode,
html.dark-mode body .toc-link:hover,
body.dark-mode,
html.dark-mode body .toc-link.active {
  background: rgba(124, 106, 247, 0.12) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .toc-link.active .toc-num {
  color: #a78bfa !important;
}

/* Content boxes */
body.dark-mode,
html.dark-mode body .terms-main .content-box,
body.dark-mode,
html.dark-mode body .privacy-main .content-box {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box:hover,
body.dark-mode,
html.dark-mode body .privacy-main .content-box:hover {
  box-shadow: 0 6px 28px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box h2,
body.dark-mode,
html.dark-mode body .privacy-main .content-box h2 {
  border-bottom-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box p,
body.dark-mode,
html.dark-mode body .privacy-main .content-box p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box strong,
body.dark-mode,
html.dark-mode body .privacy-main .content-box strong {
  color: #e6edf3 !important;
}

/* Section icon */
body.dark-mode,
html.dark-mode body .section-icon-wrap {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .section-icon-wrap i {
  color: #a78bfa !important;
}

/* Info boxes */
body.dark-mode,
html.dark-mode body .info-blue {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

body.dark-mode,
html.dark-mode body .info-blue i {
  color: #60a5fa !important;
}

body.dark-mode,
html.dark-mode body .info-green {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
}

body.dark-mode,
html.dark-mode body .info-green i {
  color: #4ade80 !important;
}

body.dark-mode,
html.dark-mode body .info-warn {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: #fcd34d !important;
}

body.dark-mode,
html.dark-mode body .info-warn i {
  color: #fbbf24 !important;
}

/* Highlight strip */
body.dark-mode,
html.dark-mode body .highlight-strip {
  background: rgba(124, 106, 247, 0.1) !important;
  border-left-color: #7c6af7 !important;
  color: #c9d1d9 !important;
}

/* Rule cards */
body.dark-mode,
html.dark-mode body .rule-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .rule-card:hover {
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .rule-card>i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .rule-card strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .rule-card p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .rule-card--warn {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

body.dark-mode,
html.dark-mode body .rule-card--warn>i {
  color: #f87171 !important;
}

/* Steps list */
body.dark-mode,
html.dark-mode body .step-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .step-item strong {
  color: #e6edf3 !important;
}

/* Benefits list */
body.dark-mode,
html.dark-mode body .benefits-list li {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .benefits-list i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .benefits-list span {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .benefits-list strong {
  color: #e6edf3 !important;
}

/* Contact card */
body.dark-mode,
html.dark-mode body .contact-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .contact-item:hover {
  border-color: #7c6af7 !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .contact-item i {
  color: #a78bfa !important;
}

/* Privacy-specific: data grid, security grid, rights grid, etc. */
body.dark-mode,
html.dark-mode body .data-card,
body.dark-mode,
html.dark-mode body .sec-card,
body.dark-mode,
html.dark-mode body .right-card,
body.dark-mode,
html.dark-mode body .share-card,
body.dark-mode,
html.dark-mode body .cookie-card,
body.dark-mode,
html.dark-mode body .retention-item,
body.dark-mode,
html.dark-mode body .use-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .data-card-head {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .data-card ul li,
body.dark-mode,
html.dark-mode body .sec-card p,
body.dark-mode,
html.dark-mode body .right-card p,
body.dark-mode,
html.dark-mode body .share-card p,
body.dark-mode,
html.dark-mode body .cookie-card p,
body.dark-mode,
html.dark-mode body .use-item p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .sec-card strong,
body.dark-mode,
html.dark-mode body .right-card strong,
body.dark-mode,
html.dark-mode body .share-card strong,
body.dark-mode,
html.dark-mode body .cookie-card strong,
body.dark-mode,
html.dark-mode body .use-item strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .sec-card i,
body.dark-mode,
html.dark-mode body .right-card i,
body.dark-mode,
html.dark-mode body .use-item i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .share-card--warn {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

body.dark-mode,
html.dark-mode body .pstat-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .pstat-card i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .retention-icon {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .retention-icon i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .retention-item strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .retention-item p {
  color: #8b949e !important;
}

/* ══════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .contact-left,
body.dark-mode,
html.dark-mode body .contact-right {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode,
html.dark-mode body .info-head h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .info-head p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .info-icon-wrap {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .info-icon-wrap i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .response-badge {
  background: rgba(124, 106, 247, 0.1) !important;
  border-color: rgba(124, 106, 247, 0.3) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .response-badge i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .info-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body a.info-card:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 14px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .info-card strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .info-card span {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .info-card-arrow {
  color: #484f58 !important;
}



body.dark-mode,
html.dark-mode body .social-btn {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

/* Form */
body.dark-mode,
html.dark-mode body .form-head p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .form-group label {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .form-group label i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .form-group input,
body.dark-mode,
html.dark-mode body .form-group textarea,
body.dark-mode,
html.dark-mode body .select-wrap select {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .form-group input::placeholder,
body.dark-mode,
html.dark-mode body .form-group textarea::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .form-group input:focus,
body.dark-mode,
html.dark-mode body .form-group textarea:focus,
body.dark-mode,
html.dark-mode body .select-wrap select:focus {
  border-color: #7c6af7 !important;
  background: #21293d !important;
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .select-arrow {
  color: #484f58 !important;
}

/* FAQ section */
body.dark-mode,
html.dark-mode body .faq-section {
  border-top-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-head p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .faq-head-icon {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .faq-head-icon i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .faq-item {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-item:hover {
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .faq-item.open {
  border-color: #7c6af7 !important;
  border-left-color: #7c6af7 !important;
  box-shadow: 0 4px 20px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .faq-q {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .faq-icon {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .faq-item.open .faq-icon {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .faq-a {
  color: #8b949e !important;
  border-top-color: #30363d !important;
}

/* Shimmer */
body.dark-mode,
html.dark-mode body .shimmer-card,
body.dark-mode,
html.dark-mode body .shimmer-form-field,
body.dark-mode,
html.dark-mode body .shimmer-button {
  background: #1c2333 !important;
}

/* ══════════════════════════════════════════
   BLOG PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .blog-page {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .gridWrap {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .blog-grid-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .skel-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .skel-card-img,
body.dark-mode,
html.dark-mode body .skel-line,
body.dark-mode,
html.dark-mode body .skel-hero {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .blog-empty {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .read-modal-content {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .read-modal-topbar {
  border-color: #30363d !important;
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .read-modal-close {
  color: #8b949e !important;
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .read-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .read-meta {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .read-content {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .read-content h1,
body.dark-mode,
html.dark-mode body .read-content h2,
body.dark-mode,
html.dark-mode body .read-content h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .read-content a {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .hero-slider {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .hero-slide-overlay {
  background: none !important;
}

body.dark-mode,
html.dark-mode body .hero-arrow {
  background: rgba(22, 27, 34, 0.9) !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

/* ══════════════════════════════════════════
   DASHBOARD PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .dashboard-wrapper {
  background: linear-gradient(160deg, #0d1117 0%, #0d1117 100%) !important;
}

/* Banner — keep purple gradient, just tweak text */
body.dark-mode,
html.dark-mode body .dash-banner-left h1 {
  color: #fff !important;
}

body.dark-mode,
html.dark-mode body .dash-banner-left p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Stat cards */
body.dark-mode,
html.dark-mode body .stat-card {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .stat-card:hover {
  box-shadow: 0 8px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .stat-num {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .stat-label {
  color:
    #c9d1d9 !important;
}

/* Section head */
body.dark-mode,
html.dark-mode body .dash-section-head h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dash-section-head h2 i {
  color: #a78bfa !important;
}

/* Filter tabs */
body.dark-mode,
html.dark-mode body .dash-filters {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

body.dark-mode,
html.dark-mode body .dash-filter-btn {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .dash-filter-btn:hover {
  background: rgba(124, 106, 247, 0.1) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .dash-filter-btn.active {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
}

/* Mobile filter select */

body.dark-mode,
html.dark-mode body .dash-filter-select {
  color: #e6edf3 !important;
  background: transparent !important;
}

/* Purchases table wrapper */
body.dark-mode,
html.dark-mode body .purchases-grid {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .purchases-table tbody tr {
  border-bottom-color: #21293d !important;
}

body.dark-mode,
html.dark-mode body .purchases-table tbody tr:hover {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .purchases-table tbody td {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .td-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .td-price {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .td-date {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .td-id {
  color: #8b949e !important;
}

/* Type badges in dark */
body.dark-mode,
html.dark-mode body .td-badge.pdf {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #fca5a5 !important;
}

body.dark-mode,
html.dark-mode body .td-badge.excel {
  background: rgba(22, 163, 74, 0.15) !important;
  color: #86efac !important;
}

body.dark-mode,
html.dark-mode body .td-badge.exam {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #93c5fd !important;
}

body.dark-mode,
html.dark-mode body .td-badge.freelance {
  background: rgba(124, 58, 237, 0.15) !important;
  color: #c4b5fd !important;
}

body.dark-mode,
html.dark-mode body .td-badge.default {
  background: #1c2333 !important;
  color: #8b949e !important;
}

/* Type icons in dark */
body.dark-mode,
html.dark-mode body .td-icon.pdf {
  background: rgba(245, 158, 11, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.excel {
  background: rgba(22, 163, 74, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.exam {
  background: rgba(59, 130, 246, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.freelance {
  background: rgba(124, 58, 237, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.default {
  background: #1c2333 !important;
}

/* Action buttons */
body.dark-mode,
html.dark-mode body .pc-btn.download,
body.dark-mode,
html.dark-mode body .pc-btn.view {
  background: rgba(124, 106, 247, 0.12) !important;
  border-color: rgba(124, 106, 247, 0.35) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .pc-btn.download:hover,
body.dark-mode,
html.dark-mode body .pc-btn.view:hover {
  background: rgba(124, 106, 247, 0.22) !important;
}

/* Shimmer */
body.dark-mode,
html.dark-mode body .sh {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .shimmer-wrap::before {
  background: linear-gradient(90deg, transparent, rgba(124, 106, 247, 0.06), transparent) !important;
}

/* Empty state */
body.dark-mode,
html.dark-mode body .empty-state {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .empty-state h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .empty-state p {
  color: #8b949e !important;
}


/* Detail modal */
body.dark-mode,
html.dark-mode body .detail-modal-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
}

body.dark-mode,
html.dark-mode body .detail-modal {
  background: #161b22 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode,
html.dark-mode body .detail-modal-close {
  background: #1c2333 !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .detail-modal-close:hover {
  background: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dm-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dm-desc {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .dm-field {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .dm-field-label {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .dm-field-label i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .dm-field-val {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dm-field-val.price {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .dm-field-val.mono {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.pdf {
  background: rgba(220, 38, 38, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.excel {
  background: rgba(22, 163, 74, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.exam {
  background: rgba(37, 99, 235, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.freelance {
  background: rgba(124, 58, 237, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.default {
  background: #1c2333 !important;
}

/* Status badges in dark */
body.dark-mode,
html.dark-mode body .td-status.completed {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #86efac !important;
  border-color: rgba(22, 163, 74, 0.25) !important;
}

body.dark-mode,
html.dark-mode body .td-status.pending {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #fcd34d !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

body.dark-mode,
html.dark-mode body .td-status.failed {
  background: rgba(225, 29, 72, 0.12) !important;
  color: #fca5a5 !important;
  border-color: rgba(225, 29, 72, 0.25) !important;
}

/* Search input */
body.dark-mode,
html.dark-mode body .search-box input {
  background: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .search-box input::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .search-box input:focus {
  border-color: #7c6af7 !important;
}

/* User dropdown (dashboard has its own) */
body.dark-mode,
html.dark-mode body .user-dropdown {
  background: #161b22 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a {
  color: #c9d1d9 !important;
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a:hover {
  background: #1c2333 !important;
  color: #a78bfa !important;
}


/* ══════════════════════════════════════════
   DETAIL PAGE
   ══════════════════════════════════════════ */
/* Detail page dark styles are in Detail/details.css for instant flash-free rendering */

/* ══════════════════════════════════════════
   QUICK LINK PAGES — HERO DARK IMAGE SWAP
   (About, FAQ, Blog, Terms, Privacy, Contact)
   ══════════════════════════════════════════ */

/* Hide the light hero img in dark mode */
body.dark-mode .hero img,
html.dark-mode body .hero img {
  opacity: 0 !important;
}

/* Show dark.png as background instead */
body.dark-mode .hero,
html.dark-mode body .hero {
  background: url('/file/dark.png') center/cover no-repeat !important;
}

/* Darken the overlay for better text contrast */
body.dark-mode .hero::before,
html.dark-mode body .hero::before {
  background: rgba(13, 17, 23, 0.55) !important;
}

/* Fix text colors on dark hero */
body.dark-mode .hero h1,
html.dark-mode body .hero h1 {
  color: #e6edf3 !important;
}

body.dark-mode .hero p,
html.dark-mode body .hero p {
  color: #c9d1d9 !important;
}

body.dark-mode .hero-badge,
html.dark-mode body .hero-badge {
  background: rgba(22, 27, 34, 0.7) !important;
  border-color: rgba(124, 106, 247, 0.4) !important;
  color: #e6edf3 !important;
}

/* ── mob-nav SVG icon fix ── */
.mob-nav-item svg {
  display: block !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
}
.mob-nav-add svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  stroke: #fff !important;
}

/* ── Dark Mode overrides for Empty Resources State ── */
body.dark-mode .empty-resources-state,
html.dark-mode body .empty-resources-state {
  background: rgba(22, 27, 34, 0.7) !important;
  border-color: #30363d !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .empty-resources-icon-wrapper,
html.dark-mode body .empty-resources-icon-wrapper {
  background: linear-gradient(135deg, rgba(124, 106, 247, 0.15), rgba(167, 139, 250, 0.15)) !important;
  color: #a78bfa !important;
}

body.dark-mode .empty-resources-icon-wrapper::after,
html.dark-mode body .empty-resources-icon-wrapper::after {
  border-color: rgba(167, 139, 250, 0.2) !important;
}

body.dark-mode .empty-resources-title,
html.dark-mode body .empty-resources-title {
  color: #e6edf3 !important;
}

body.dark-mode .empty-resources-sub,
html.dark-mode body .empty-resources-sub {
  color: #8b949e !important;
}

body.dark-mode .empty-resources-btn,
html.dark-mode body .empty-resources-btn {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  box-shadow: 0 4px 15px rgba(124, 106, 247, 0.3) !important;
}

body.dark-mode .empty-resources-btn:hover,
html.dark-mode body .empty-resources-btn:hover {
  box-shadow: 0 6px 20px rgba(124, 106, 247, 0.45) !important;
}

/* ── Dark Mode overrides for Empty Blog State ── */
body.dark-mode .empty-blog-state,
html.dark-mode body .empty-blog-state {
  background: rgba(22, 27, 34, 0.7) !important;
  border-color: #30363d !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .empty-blog-icon-wrapper,
html.dark-mode body .empty-blog-icon-wrapper {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(167, 139, 250, 0.15)) !important;
  color: #ec4899 !important;
}

body.dark-mode .empty-blog-icon-wrapper::after,
html.dark-mode body .empty-blog-icon-wrapper::after {
  border-color: rgba(167, 139, 250, 0.2) !important;
}

body.dark-mode .empty-blog-title,
html.dark-mode body .empty-blog-title {
  color: #e6edf3 !important;
}

body.dark-mode .empty-blog-sub,
html.dark-mode body .empty-blog-sub {
  color: #8b949e !important;
}