/* ============================================================================
   THEMES #6 TO #10 — 5 COMPLETELY DISTINCT PROFESSIONAL ARCHITECTURES
   6. vercelmono    — Vercel / Geist 1px Hairline Blueprint Grid (No Sidebar)
   7. auroraglass   — Aurora AI App-Store 4-Column Spotlight Grid
   8. nordicminimal — Apple / Craft Ultra-Rounded 26px Soft Minimal (No Sidebar)
   9. cyberquant    — FinTech High-Density Horizontal Terminal Ticker Rows
   10. royalvelvet  — Mercury / Stripe Press Luxury Gold & Asymmetric Grid (No Sidebar)
   ============================================================================ */

/* Shared Top-Nav Rule for Themes 6, 8, 10 (No Left Sidebar on Desktop, Top Ribbon Active) */
@media (min-width: 768px) {
  html[data-site-theme="vercelmono"] .sidebar-wrapper,
  html[data-site-theme="vercelmono"] .nav-drawer,
  html[data-site-theme="nordicminimal"] .sidebar-wrapper,
  html[data-site-theme="nordicminimal"] .nav-drawer,
  html[data-site-theme="royalvelvet"] .sidebar-wrapper,
  html[data-site-theme="royalvelvet"] .nav-drawer {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
  }
}

html[data-site-theme="vercelmono"] .site-header .nav-leading,
html[data-site-theme="vercelmono"] .site-header .wordmark,
html[data-site-theme="nordicminimal"] .site-header .nav-leading,
html[data-site-theme="nordicminimal"] .site-header .wordmark,
html[data-site-theme="royalvelvet"] .site-header .nav-leading,
html[data-site-theme="royalvelvet"] .site-header .wordmark {
  display: inline-flex !important;
  align-items: center !important;
}

html[data-site-theme="vercelmono"] .site-header .site-logo,
html[data-site-theme="nordicminimal"] .site-header .site-logo,
html[data-site-theme="royalvelvet"] .site-header .site-logo {
  height: 36px !important;
  width: 182px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  display: block !important;
}

html.dark[data-site-theme="vercelmono"] .site-header .logo-light,
html.dark[data-site-theme="nordicminimal"] .site-header .logo-light,
html.dark[data-site-theme="royalvelvet"] .site-header .logo-light {
  display: none !important;
}

html:not(.dark)[data-site-theme="vercelmono"] .site-header .logo-dark,
html:not(.dark)[data-site-theme="nordicminimal"] .site-header .logo-dark,
html:not(.dark)[data-site-theme="royalvelvet"] .site-header .logo-dark {
  display: none !important;
}

html[data-site-theme="vercelmono"] .prostudio-taxonomy-ribbon,
html[data-site-theme="nordicminimal"] .prostudio-taxonomy-ribbon,
html[data-site-theme="royalvelvet"] .prostudio-taxonomy-ribbon {
  display: block !important;
  width: 100% !important;
}

/* ============================================================================
   THEME 6: VERCEL / GEIST MONOCHROME BLUEPRINT (data-site-theme="vercelmono")
   Seamless 1px architectural grid, pure #000000 / #ffffff, technical mono tags
   ============================================================================ */
html.dark[data-site-theme="vercelmono"],
html.dark[data-site-theme="vercelmono"] body {
  --md-sys-color-background: #000000 !important;
  --md-sys-color-surface: #09090b !important;
  --md-sys-color-surface-container-low: #09090b !important;
  --md-sys-color-surface-container-high: #18181b !important;
  --md-sys-color-primary: #fafafa !important;
  --bg: #000000 !important;
  background-color: #000000 !important;
  background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

html:not(.dark)[data-site-theme="vercelmono"],
html:not(.dark)[data-site-theme="vercelmono"] body {
  --md-sys-color-background: #ffffff !important;
  --md-sys-color-surface: #fafafa !important;
  --md-sys-color-surface-container-low: #f4f4f5 !important;
  --md-sys-color-surface-container-high: #e4e4e7 !important;
  --md-sys-color-primary: #09090b !important;
  --bg: #ffffff !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

html[data-site-theme="vercelmono"] .site-header {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid #27272a !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .site-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid #e4e4e7 !important;
}

html[data-site-theme="vercelmono"] .prostudio-taxonomy-ribbon {
  background: #09090b !important;
  border-top: 1px solid #27272a !important;
  padding: 8px 0 !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .prostudio-taxonomy-ribbon {
  background: #fafafa !important;
  border-top: 1px solid #e4e4e7 !important;
}

html[data-site-theme="vercelmono"] .prostudio-tax-pill {
  border-radius: 0px !important;
  border: 1px solid #27272a !important;
  background: #000000 !important;
  color: #a1a1aa !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11.5px !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .prostudio-tax-pill {
  background: #ffffff !important;
  color: #52525b !important;
  border-color: #d4d4d8 !important;
}

html[data-site-theme="vercelmono"] .layout-main .container-fluid {
  max-width: 1460px !important;
  margin: 0 auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Seamless 1px Hairline Blueprint Matrix */
html[data-site-theme="vercelmono"] .resource-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  background: #27272a !important;
  border: 1px solid #27272a !important;
  border-radius: 0px !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .resource-list {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
}
@media (max-width: 1180px) {
  html[data-site-theme="vercelmono"] .resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html[data-site-theme="vercelmono"] .resource-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html[data-site-theme="vercelmono"] .list-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 24px !important;
  border-radius: 0px !important;
  border: none !important;
  background: #050505 !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .list-item {
  background: #ffffff !important;
}
html[data-site-theme="vercelmono"] .list-item:hover {
  background: #121215 !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .list-item:hover {
  background: #f4f4f5 !important;
}

html[data-site-theme="vercelmono"] .credits-amount,
html[data-site-theme="vercelmono"] .credits-badge,
html[data-site-theme="vercelmono"] .credit-badge {
  background: #fafafa !important;
  color: #09090b !important;
  border-radius: 2px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 700 !important;
  border: 1px solid #fafafa !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .credits-amount,
html:not(.dark)[data-site-theme="vercelmono"] .credits-badge {
  background: #09090b !important;
  color: #ffffff !important;
  border-color: #09090b !important;
}

html[data-site-theme="vercelmono"] .startup-founder-card,
html[data-site-theme="vercelmono"] .offer-panel,
html[data-site-theme="vercelmono"] .resource-header,
html[data-site-theme="vercelmono"] .new-card,
html[data-site-theme="vercelmono"] .trending-card {
  border-radius: 0px !important;
  border: 1px solid #27272a !important;
  box-shadow: none !important;
}
html:not(.dark)[data-site-theme="vercelmono"] .startup-founder-card,
html:not(.dark)[data-site-theme="vercelmono"] .offer-panel,
html:not(.dark)[data-site-theme="vercelmono"] .resource-header {
  border-color: #d4d4d8 !important;
}

/* ============================================================================
   THEME 7: AURORA AI STUDIO — 4-COLUMN COMPACT APP STORE (data-site-theme="auroraglass")
   4-Column compact vertical spotlight cards + Violet-Pink-Cyan Aurora Glow
   ============================================================================ */
html.dark[data-site-theme="auroraglass"],
html.dark[data-site-theme="auroraglass"] body {
  --md-sys-color-background: #080514 !important;
  --md-sys-color-surface: #120c26 !important;
  --md-sys-color-surface-container-low: #0e091f !important;
  --md-sys-color-surface-container-high: #1d143b !important;
  --md-sys-color-primary: #e879f9 !important;
  --bg: #080514 !important;
  background-color: #080514 !important;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(232, 121, 249, 0.16), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(56, 189, 248, 0.14), transparent 45%) !important;
}

html:not(.dark)[data-site-theme="auroraglass"],
html:not(.dark)[data-site-theme="auroraglass"] body {
  --md-sys-color-background: #faf5ff !important;
  --md-sys-color-surface: #ffffff !important;
  --md-sys-color-primary: #a21caf !important;
  --bg: #faf5ff !important;
  background-color: #faf5ff !important;
}

/* 4-Column Compact App-Store Grid */
html[data-site-theme="auroraglass"] .resource-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 1400px) {
  html[data-site-theme="auroraglass"] .resource-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 980px) {
  html[data-site-theme="auroraglass"] .resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  html[data-site-theme="auroraglass"] .resource-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html[data-site-theme="auroraglass"] .list-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 18px !important;
  border-radius: 20px !important;
  background: linear-gradient(165deg, rgba(29, 20, 59, 0.88), rgba(14, 9, 31, 0.94)) !important;
  border: 1px solid rgba(232, 121, 249, 0.28) !important;
  box-shadow: 0 12px 30px -10px rgba(168, 85, 247, 0.25) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}
html:not(.dark)[data-site-theme="auroraglass"] .list-item {
  background: #ffffff !important;
  border: 1.5px solid #e9d5ff !important;
  box-shadow: 0 10px 25px -8px rgba(168, 85, 247, 0.12) !important;
}

html[data-site-theme="auroraglass"] .list-item:hover {
  transform: translateY(-5px) !important;
  border-color: #e879f9 !important;
}

html[data-site-theme="auroraglass"] .credits-amount,
html[data-site-theme="auroraglass"] .credits-badge,
html[data-site-theme="auroraglass"] .btn-primary {
  background: linear-gradient(90deg, #c026d3, #7c3aed) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ============================================================================
   THEME 8: NORDIC SOFT MINIMAL (data-site-theme="nordicminimal")
   Apple / Craft.do Airy 26px Rounded Cards, Soft Elevation, Royal Cobalt Accent
   ============================================================================ */
html.dark[data-site-theme="nordicminimal"],
html.dark[data-site-theme="nordicminimal"] body {
  --md-sys-color-background: #101216 !important;
  --md-sys-color-surface: #181b20 !important;
  --md-sys-color-surface-container-low: #14171c !important;
  --md-sys-color-surface-container-high: #22262e !important;
  --md-sys-color-primary: #38bdf8 !important;
  --bg: #101216 !important;
  background-color: #101216 !important;
}

html:not(.dark)[data-site-theme="nordicminimal"],
html:not(.dark)[data-site-theme="nordicminimal"] body {
  --md-sys-color-background: #f2f4f8 !important;
  --md-sys-color-surface: #ffffff !important;
  --md-sys-color-primary: #0066cc !important;
  --bg: #f2f4f8 !important;
  background-color: #f2f4f8 !important;
}

html[data-site-theme="nordicminimal"] .site-header {
  background: rgba(24, 27, 32, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
html:not(.dark)[data-site-theme="nordicminimal"] .site-header {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

html[data-site-theme="nordicminimal"] .prostudio-taxonomy-ribbon {
  background: transparent !important;
  padding: 12px 0 !important;
}

html[data-site-theme="nordicminimal"] .prostudio-tax-pill {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

html[data-site-theme="nordicminimal"] .layout-main .container-fluid {
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

html[data-site-theme="nordicminimal"] .resource-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media (max-width: 1180px) {
  html[data-site-theme="nordicminimal"] .resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html[data-site-theme="nordicminimal"] .resource-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html[data-site-theme="nordicminimal"] .list-item,
html[data-site-theme="nordicminimal"] .new-card,
html[data-site-theme="nordicminimal"] .trending-card,
html[data-site-theme="nordicminimal"] .startup-founder-card,
html[data-site-theme="nordicminimal"] .offer-panel {
  border-radius: 26px !important;
  padding: 24px 26px !important;
  background: #181b20 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.45) !important;
}
html:not(.dark)[data-site-theme="nordicminimal"] .list-item,
html:not(.dark)[data-site-theme="nordicminimal"] .new-card,
html:not(.dark)[data-site-theme="nordicminimal"] .trending-card,
html:not(.dark)[data-site-theme="nordicminimal"] .startup-founder-card,
html:not(.dark)[data-site-theme="nordicminimal"] .offer-panel {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.08) !important;
}

html[data-site-theme="nordicminimal"] .list-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* ============================================================================
   THEME 9: CYBERQUANT FINTECH TERMINAL (data-site-theme="cyberquant")
   Bloomberg / Kraken Pro Ultra-Dense 1-Column Financial Ticker Strips
   ============================================================================ */
html.dark[data-site-theme="cyberquant"],
html.dark[data-site-theme="cyberquant"] body {
  --md-sys-color-background: #06090e !important;
  --md-sys-color-surface: #0b1018 !important;
  --md-sys-color-surface-container-low: #090d14 !important;
  --md-sys-color-surface-container-high: #131c29 !important;
  --md-sys-color-primary: #eab308 !important;
  --bg: #06090e !important;
  background-color: #06090e !important;
}

html:not(.dark)[data-site-theme="cyberquant"],
html:not(.dark)[data-site-theme="cyberquant"] body {
  --md-sys-color-background: #f1f5f9 !important;
  --md-sys-color-surface: #ffffff !important;
  --md-sys-color-primary: #ca8a04 !important;
  --bg: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
}

html[data-site-theme="cyberquant"] .resource-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html[data-site-theme="cyberquant"] .list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 13px 18px !important;
  border-radius: 4px !important;
  background: #0b1018 !important;
  border: 1px solid #1e293b !important;
  border-left: 4px solid #eab308 !important;
  box-shadow: none !important;
}
html:not(.dark)[data-site-theme="cyberquant"] .list-item {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 4px solid #ca8a04 !important;
}

html[data-site-theme="cyberquant"] .list-item:hover {
  border-color: #eab308 !important;
  background: #111827 !important;
}
html:not(.dark)[data-site-theme="cyberquant"] .list-item:hover {
  background: #fefce8 !important;
}

html[data-site-theme="cyberquant"] .credits-amount,
html[data-site-theme="cyberquant"] .credits-badge,
html[data-site-theme="cyberquant"] .credit-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  background: rgba(234, 179, 8, 0.16) !important;
  color: #facc15 !important;
  border: 1px solid rgba(234, 179, 8, 0.45) !important;
  border-radius: 3px !important;
  font-weight: 800 !important;
}
html:not(.dark)[data-site-theme="cyberquant"] .credits-amount,
html:not(.dark)[data-site-theme="cyberquant"] .credits-badge {
  background: #fef9c3 !important;
  color: #854d0e !important;
  border-color: #eab308 !important;
}

/* ============================================================================
   THEME 10: ROYAL VELVET & CHAMPAGNE LUXE (data-site-theme="royalvelvet")
   Mercury Banking / Stripe Press Asymmetric Luxury Grid + Champagne Gold Borders
   ============================================================================ */
html.dark[data-site-theme="royalvelvet"],
html.dark[data-site-theme="royalvelvet"] body {
  --md-sys-color-background: #090714 !important;
  --md-sys-color-surface: #131024 !important;
  --md-sys-color-surface-container-low: #0e0b1c !important;
  --md-sys-color-surface-container-high: #1d1836 !important;
  --md-sys-color-primary: #f59e0b !important;
  --bg: #090714 !important;
  background-color: #090714 !important;
  background-image: radial-gradient(ellipse 75% 380px at 50% 0%, rgba(245, 158, 11, 0.11), transparent 75%) !important;
}

html:not(.dark)[data-site-theme="royalvelvet"],
html:not(.dark)[data-site-theme="royalvelvet"] body {
  --md-sys-color-background: #f9f8f4 !important;
  --md-sys-color-surface: #ffffff !important;
  --md-sys-color-primary: #b45309 !important;
  --bg: #f9f8f4 !important;
  background-color: #f9f8f4 !important;
}

html[data-site-theme="royalvelvet"] .site-header {
  background: rgba(9, 7, 20, 0.92) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
}
html:not(.dark)[data-site-theme="royalvelvet"] .site-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e7e5e4 !important;
}

html[data-site-theme="royalvelvet"] .prostudio-taxonomy-ribbon {
  background: #131024 !important;
  border-top: 1px solid rgba(245, 158, 11, 0.2) !important;
  padding: 9px 0 !important;
}
html:not(.dark)[data-site-theme="royalvelvet"] .prostudio-taxonomy-ribbon {
  background: #f5f3ec !important;
  border-top: 1px solid #d6d3d1 !important;
}

html[data-site-theme="royalvelvet"] .layout-main .container-fluid {
  max-width: 1460px !important;
  margin: 0 auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Asymmetric Magazine Grid: Every 4th card spans 2 columns on desktop! */
html[data-site-theme="royalvelvet"] .resource-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
@media (min-width: 1180px) {
  html[data-site-theme="royalvelvet"] .resource-list > .list-item:nth-child(4n + 1) {
    grid-column: span 2 !important;
  }
}
@media (max-width: 1179px) {
  html[data-site-theme="royalvelvet"] .resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html[data-site-theme="royalvelvet"] .resource-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html[data-site-theme="royalvelvet"] .list-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #16122b 0%, #0f0c1f 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-top: 3px solid #f59e0b !important;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6) !important;
}
html:not(.dark)[data-site-theme="royalvelvet"] .list-item {
  background: #ffffff !important;
  border: 1px solid #d6d3d1 !important;
  border-top: 3px solid #d97706 !important;
  box-shadow: 0 10px 26px -10px rgba(28, 25, 23, 0.08) !important;
}

html[data-site-theme="royalvelvet"] .credits-amount,
html[data-site-theme="royalvelvet"] .credits-badge,
html[data-site-theme="royalvelvet"] .credit-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.14)) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
html:not(.dark)[data-site-theme="royalvelvet"] .credits-amount,
html:not(.dark)[data-site-theme="royalvelvet"] .credits-badge {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

/* ============================================================================
   THEME #11: CODEHELPER STUDIO (MODERN LIGHT-FIRST DIRECTORY + HORIZONTAL CARDS)
   Default: Crisp Modern Light Mode (#f8fafc / #ffffff / #4f46e5 Indigo Pill)
   Toggleable: Deep Slate Navy Dark Mode (#0b0f19 / #131b2e / #6366f1)
   3-Column Horizontal Media-Card Grid (Logo Left + Title/Subtitle/Desc + Bottom Pills)
   ============================================================================ */

/* --- 1. LIGHT MODE PALETTE (DEFAULT) --- */
html:not(.dark)[data-site-theme="codehelper"] {
  --bg: #f8fafc !important;
  --text: #334155 !important;
  --text-heading: #0f172a !important;
  --text-muted: #64748b !important;
  --md-sys-color-background: #f8fafc !important;
  --md-sys-color-surface: #ffffff !important;
  --md-sys-color-surface-container: #f1f5f9 !important;
  --md-sys-color-outline-variant: #e2e8f0 !important;
  --md-sys-color-primary: #4f46e5 !important;
}

html:not(.dark)[data-site-theme="codehelper"] body {
  background: #f8fafc !important;
  color: #334155 !important;
}

/* --- 2. DARK MODE PALETTE (WHEN TOGGLED) --- */
html.dark[data-site-theme="codehelper"] {
  --bg: #0b0f19 !important;
  --text: #cbd5e1 !important;
  --text-heading: #f8fafc !important;
  --text-muted: #94a3b8 !important;
  --md-sys-color-background: #0b0f19 !important;
  --md-sys-color-surface: #131b2e !important;
  --md-sys-color-surface-container: #192338 !important;
  --md-sys-color-outline-variant: #233047 !important;
  --md-sys-color-primary: #6366f1 !important;
}

html.dark[data-site-theme="codehelper"] body {
  background: #0b0f19 !important;
  color: #cbd5e1 !important;
}

/* --- 3. APP SIDEBAR & TOP HEADER (CODEHELPER STYLE) --- */
html:not(.dark)[data-site-theme="codehelper"] .sidebar,
html:not(.dark)[data-site-theme="codehelper"] .sidebar-wrapper {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
}

html.dark[data-site-theme="codehelper"] .sidebar,
html.dark[data-site-theme="codehelper"] .sidebar-wrapper {
  background: #0d1322 !important;
  border-right: 1px solid #1e293b !important;
}

html[data-site-theme="codehelper"] .sidebar-link,
html[data-site-theme="codehelper"] .nav-item {
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.16s ease !important;
}

html:not(.dark)[data-site-theme="codehelper"] .sidebar-link.active,
html:not(.dark)[data-site-theme="codehelper"] .nav-item.active {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1px solid #c7d2fe !important;
  font-weight: 700 !important;
}

html.dark[data-site-theme="codehelper"] .sidebar-link.active,
html.dark[data-site-theme="codehelper"] .nav-item.active {
  background: rgba(79, 70, 229, 0.22) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.42) !important;
  font-weight: 700 !important;
}

html:not(.dark)[data-site-theme="codehelper"] .site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.dark[data-site-theme="codehelper"] .site-header {
  background: rgba(13, 19, 34, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #1e293b !important;
}

/* Hide extra prostudio top ribbon when sidebar is visible on codehelper */
html[data-site-theme="codehelper"] .prostudio-taxonomy-ribbon {
  display: none !important;
}

html[data-site-theme="codehelper"] .layout-main .container-fluid {
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* --- 4. TOP PILL FILTER BAR & CHIPS (EXACT CODEHELPER PILL LOOK) --- */
html[data-site-theme="codehelper"] .chip,
html[data-site-theme="codehelper"] .featured-brand-chip,
html[data-site-theme="codehelper"] .sort-btn {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

html:not(.dark)[data-site-theme="codehelper"] .chip,
html:not(.dark)[data-site-theme="codehelper"] .featured-brand-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

html:not(.dark)[data-site-theme="codehelper"] .chip:hover,
html:not(.dark)[data-site-theme="codehelper"] .featured-brand-chip:hover {
  border-color: #4f46e5 !important;
  color: #4f46e5 !important;
  background: #eef2ff !important;
}

html[data-site-theme="codehelper"] .chip.active,
html[data-site-theme="codehelper"] .nav-pill.active {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.28) !important;
}

/* --- 5. 3-COLUMN HORIZONTAL MEDIA-CARD GRID (EXACT CODEHELPER CARD UI) --- */
html[data-site-theme="codehelper"] .resource-list,
html[data-site-theme="codehelper"] .new-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

@media (max-width: 1180px) {
  html[data-site-theme="codehelper"] .resource-list,
  html[data-site-theme="codehelper"] .new-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  html[data-site-theme="codehelper"] .resource-list,
  html[data-site-theme="codehelper"] .new-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Card Surface & Hover */
html:not(.dark)[data-site-theme="codehelper"] .list-item,
html:not(.dark)[data-site-theme="codehelper"] .new-card,
html:not(.dark)[data-site-theme="codehelper"] .trending-card,
html:not(.dark)[data-site-theme="codehelper"] .startup-founder-card,
html:not(.dark)[data-site-theme="codehelper"] .offer-panel,
html:not(.dark)[data-site-theme="codehelper"] .home-pseo-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}

html:not(.dark)[data-site-theme="codehelper"] .list-item:hover,
html:not(.dark)[data-site-theme="codehelper"] .new-card:hover,
html:not(.dark)[data-site-theme="codehelper"] .trending-card:hover,
html:not(.dark)[data-site-theme="codehelper"] .home-pseo-card:hover {
  border-color: #6366f1 !important;
  box-shadow: 0 10px 24px -6px rgba(79, 70, 229, 0.12) !important;
  transform: translateY(-2px) !important;
}

html.dark[data-site-theme="codehelper"] .list-item,
html.dark[data-site-theme="codehelper"] .new-card,
html.dark[data-site-theme="codehelper"] .trending-card,
html.dark[data-site-theme="codehelper"] .startup-founder-card,
html.dark[data-site-theme="codehelper"] .offer-panel,
html.dark[data-site-theme="codehelper"] .home-pseo-card {
  background: #131b2e !important;
  border: 1px solid #233047 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}

html.dark[data-site-theme="codehelper"] .list-item:hover,
html.dark[data-site-theme="codehelper"] .new-card:hover,
html.dark[data-site-theme="codehelper"] .trending-card:hover,
html.dark[data-site-theme="codehelper"] .home-pseo-card:hover {
  border-color: #6366f1 !important;
  background: #172136 !important;
  transform: translateY(-2px) !important;
}

/* Horizontal Media Card Internal Structure:
   Square Logo on Left (56x56) + Title, Provider, 2-Line Desc & Bottom Pill Row on Right */
html[data-site-theme="codehelper"] .list-item {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: start !important;
  padding: 16px 18px !important;
}

html[data-site-theme="codehelper"] .list-item .item-leading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: 56px !important;
}

html[data-site-theme="codehelper"] .list-item .item-logo {
  width: 54px !important;
  height: 54px !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 4px !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-site-theme="codehelper"] .list-item .deal-count-badge {
  font-size: 10px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

html[data-site-theme="codehelper"] .list-item .item-content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* Put Title + Provider above Description, and Pill Tags cleanly at the bottom */
html[data-site-theme="codehelper"] .list-item .item-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  order: 1 !important;
}

html[data-site-theme="codehelper"] .list-item .item-title-row {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

html[data-site-theme="codehelper"] .list-item .item-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html[data-site-theme="codehelper"] .list-item .item-desc {
  order: 2 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--text-muted) !important;
  margin: 6px 0 10px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html[data-site-theme="codehelper"] .list-item .item-header-meta {
  order: 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Hide verbose view/time icons inside compact 3-col cards so only clean pills show like CodeHelper */
html[data-site-theme="codehelper"] .list-item .item-views {
  display: none !important;
}

/* Compact Rounded Bottom Pills inside Cards */
html:not(.dark)[data-site-theme="codehelper"] .credits-amount,
html:not(.dark)[data-site-theme="codehelper"] .credits-badge,
html:not(.dark)[data-site-theme="codehelper"] .credit-badge {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
}

html.dark[data-site-theme="codehelper"] .credits-amount,
html.dark[data-site-theme="codehelper"] .credits-badge,
html.dark[data-site-theme="codehelper"] .credit-badge {
  background: rgba(79, 70, 229, 0.2) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
}

html:not(.dark)[data-site-theme="codehelper"] .tag {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  padding: 2px 9px !important;
}

html.dark[data-site-theme="codehelper"] .tag {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border: 1px solid #334155 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  padding: 2px 9px !important;
}