/* ============================================================
   MAIN.CSS — Latian.chatanddecide Design System
   Pure CSS component classes + CSS custom properties
   Used alongside Tailwind CSS utilities
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (CSS Custom Properties)
───────────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --clr-primary       : #C75100;
  --clr-primary-dark  : #A34200;
  --clr-primary-light : #E8703A;
  --clr-olive         : #6B8E23;
  --clr-olive-dark    : #4F6A18;
  --clr-brand-dark    : #3E2723;
  --clr-brand-darker  : #2C1B17;
  --clr-muted         : #8B7567;
  --clr-surface-base  : #FAF7F2;
  --clr-surface-warm  : #F4EDE4;

  /* Typography */
  --font-sans         : 'Inter', sans-serif;
  --font-display      : 'Montserrat', sans-serif;

  /* Spacing (section rhythm) */
  --section-py        : 5rem;       /* 80px desktop */
  --section-py-md     : 4rem;       /* 64px tablet  */
  --section-py-sm     : 3rem;       /* 48px mobile  */
  --container-max     : 1200px;
  --container-px      : 2rem;       /* 32px */
  --container-px-sm   : 1.25rem;    /* 20px */

  /* Borders */
  --radius-sm    : 0.75rem;   /* 12px  */
  --radius-md    : 1rem;      /* 16px  */
  --radius-lg    : 1.5rem;    /* 24px  */
  --radius-xl    : 2rem;      /* 32px  */
  --radius-full  : 9999px;

  /* Shadows */
  --shadow-card  : 0 2px 8px rgba(0,0,0,0.07);
  --shadow-hover : 0 8px 30px rgba(0,0,0,0.12);
  --shadow-float : 0 4px 14px rgba(0,0,0,0.12);
}


/* ─────────────────────────────────────────────────────────────
   2. BASE RESET
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html   { scroll-behavior: smooth; overflow-x: hidden; }
body   { font-family: var(--font-sans); background-color: var(--clr-surface-base); color: var(--clr-brand-dark); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img    { display: block; max-width: 100%; }
a      { text-decoration: none; }


/* ─────────────────────────────────────────────────────────────
   3. LAYOUT
───────────────────────────────────────────────────────────── */
.site-container {
  max-width    : var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

@media (max-width: 640px) {
  .site-container { padding-inline: var(--container-px-sm); }
}

.header-container {
  max-width    : none;
  margin-inline: 0;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

@media (min-width: 768px) {
  /* Tighten nav spacing so items still fit in one line with bigger side margins */
  .header-container .nav-link--pill { padding: 0.4rem 0.5rem; }
  .header-container nav > div.hidden.md\:flex { gap: 0.125rem; }
  .header-container nav .flex.items-center.gap-1.sm\:gap-2 { gap: 0.25rem; }
}

@media (max-width: 640px) {
  .header-container { padding-inline: var(--container-px-sm); }
}

.section {
  padding-block: var(--section-py);
}

@media (max-width: 1024px) {
  .section { padding-block: var(--section-py-md); }
}

@media (max-width: 640px) {
  .section { padding-block: var(--section-py-sm); }
}


/* ─────────────────────────────────────────────────────────────
   4. SECTION HEADER
───────────────────────────────────────────────────────────── */
.s-head {
  text-align    : left;
  margin-bottom : 3.5rem;
}
/* Centered variant when needed */
.s-head--center { text-align: center; }

.s-title {
  font-family  : var(--font-display);
  font-size    : clamp(2rem, 4vw, 3rem);
  font-weight  : 800;
  line-height  : 1.1;
  letter-spacing: -0.02em;
  color        : var(--clr-brand-dark);
  margin       : 0 0 1rem;
}

.s-title--left { text-align: left; }

.s-desc {
  font-size  : 1.0625rem;
  line-height: 1.7;
  color      : var(--clr-muted);
  max-width  : 560px;
  margin     : 0;
}

.s-desc--left { margin-inline: 0; }


/* ─────────────────────────────────────────────────────────────
   5. BUTTONS
───────────────────────────────────────────────────────────── */
.btn {
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  gap           : 0.5rem;
  font-family   : var(--font-sans);
  font-weight   : 600;
  border-radius : var(--radius-full);
  border        : 2px solid transparent;
  cursor        : pointer;
  white-space   : nowrap;
  transition    : background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
  text-decoration: none;
  line-height   : 1;
}

.btn:active { transform: scale(0.98); }

/* Sizes */
.btn--sm  { font-size: 0.8125rem; padding: 0.5rem  1.25rem; }
.btn--md  { font-size: 0.9375rem; padding: 0.75rem 1.5rem;  }
.btn--lg  { font-size: 1rem;      padding: 0.875rem 1.75rem; }

/* Variants */
.btn--primary {
  background-color: var(--clr-primary);
  color           : #fff;
}
.btn--primary:hover { background-color: var(--clr-primary-dark); }

.btn--olive {
  background-color: var(--clr-olive);
  color           : #fff;
}
.btn--olive:hover { background-color: var(--clr-olive-dark); }

.btn--white {
  background-color: #fff;
  color           : var(--clr-brand-dark);
  border-color    : #e5e7eb;
}
.btn--white:hover {
  border-color: var(--clr-primary);
  color        : var(--clr-primary);
}

.btn--ghost {
  background-color: transparent;
  color           : var(--clr-muted);
  border-color    : transparent;
}
.btn--ghost:hover {
  background-color: rgba(199,81,0,0.06);
  color           : var(--clr-primary);
}

.btn--icon {
  width            : 2.5rem;
  height           : 2.5rem;
  padding          : 0;
  border-radius    : var(--radius-md);
}

.btn--outline-primary {
  background-color: transparent;
  color           : var(--clr-primary);
  border-color    : var(--clr-primary);
}
.btn--outline-primary:hover {
  background-color: rgba(199,81,0,0.06);
}


/* ─────────────────────────────────────────────────────────────
   6. CARDS
───────────────────────────────────────────────────────────── */
.card {
  background   : #fff;
  border-radius: var(--radius-xl);
  overflow     : hidden;
}

.card--shadow {
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s;
}
.card--shadow:hover { box-shadow: var(--shadow-hover); }

.card--border {
  border: 1px solid #f0f0f0;
  transition: border-color 0.2s;
}
.card--border:hover { border-color: #e0e0e0; }

/* Feature Card */
.feat-card {
  padding        : 2rem;
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
  border         : 1px solid #f0f0f0;
  border-radius  : var(--radius-xl);
  background     : #fff;
  transition     : border-color 0.2s;
}
.feat-card:hover { border-color: rgba(199,81,0,0.2); }

.feat-icon {
  width           : 4rem;
  height          : 4rem;
  border-radius   : 1rem;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : linear-gradient(135deg, #E8703A 0%, #C75100 100%);
  flex-shrink     : 0;
}
/* Comfort icon: warm olive-brown gradient */
.feat-icon--comfort { background: linear-gradient(135deg, #9E7D28 0%, #6B8E23 100%); }
/* Privacy icon: dark olive gradient */
.feat-icon--privacy { background: linear-gradient(135deg, #7BA030 0%, #4F6A18 100%); }

.feat-title {
  font-family : var(--font-display);
  font-size   : 1.25rem;
  font-weight : 700;
  color       : var(--clr-brand-dark);
  margin      : 0;
}

.feat-desc {
  font-size  : 1.0625rem;
  line-height: 1.65;
  color      : var(--clr-muted);
  margin     : 0;
}

/* Topic Card (Explore Knowledge) */
.topic-card {
  position       : relative;
  border-radius  : var(--radius-xl);
  overflow       : hidden;
  display        : block;
  aspect-ratio   : 256 / 188;
  background     : #d1d5db;
  cursor         : pointer;
}

.topic-card__img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.topic-card:hover .topic-card__img { transform: scale(1.06); }

.topic-card__overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(to top, rgba(199,81,0,0.85) 0%, rgba(0,0,0,0) 55%);
}

.topic-card__body {
  position: absolute;
  bottom  : 0;
  left    : 0;
  right   : 0;
  padding : 1rem;
}

.topic-card__sub {
  font-size  : 0.75rem;
  color      : rgba(255,255,255,0.8);
  margin     : 0 0 0.2rem;
  font-weight: 400;
}

.topic-card__title {
  font-size  : 1.0625rem;
  font-weight: 700;
  color      : #fff;
  margin     : 0;
  line-height: 1.3;
}

/* Media Card (Stories) */
.media-card {
  display       : flex;
  flex-direction: column;
}

.media-card__thumb {
  position     : relative;
  overflow     : hidden;
  aspect-ratio : 16 / 9;
  background   : #d1d5db;
}

.media-card__thumb img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.media-card:hover .media-card__thumb img { transform: scale(1.05); }

/* Audio-only card thumb (no photo, dark gradient bg) */
.media-card__thumb--audio {
  background: linear-gradient(135deg, #5D2E0E 0%, #3E2723 100%);
}
.media-card__thumb--audio img { display: none; }

.media-card__overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(0,0,0,0.2);
  transition: background 0.3s;
}
.media-card:hover .media-card__overlay { background: rgba(0,0,0,0.3); }

.media-card__play {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.play-btn {
  width           : 2.75rem;
  height          : 2.75rem;
  border-radius   : var(--radius-full);
  background      : rgba(255,255,255,0.9);
  display         : flex;
  align-items     : center;
  justify-content : center;
  box-shadow      : 0 2px 10px rgba(0,0,0,0.2);
  transition      : transform 0.2s;
}
/* .media-card:hover .play-btn { transform: scale(1.1); } — removed per user request */

.media-card__body {
  padding        : 1.25rem;
  display        : flex;
  flex-direction : column;
  gap            : 0.5rem;
  flex           : 1;
}

.media-card__meta {
  font-size  : 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color      : var(--clr-muted);
}

.media-card__title {
  font-family: var(--font-display);
  font-size  : 1.0625rem;
  font-weight: 700;
  color      : var(--clr-brand-dark);
  margin     : 0;
  line-height: 1.4;
  transition : color 0.2s;
}
.media-card:hover .media-card__title { color: var(--clr-primary); }

.media-card__desc {
  font-size  : 0.875rem;
  line-height: 1.6;
  color      : var(--clr-muted);
  margin     : 0;
  flex       : 1;
}


/* ─────────────────────────────────────────────────────────────
   7. FORM INPUTS
───────────────────────────────────────────────────────────── */
.input {
  width           : 100%;
  font-family     : var(--font-sans);
  font-size       : 0.9375rem;
  color           : var(--clr-brand-dark);
  background      : #fff;
  border          : 1px solid #e5e7eb;
  border-radius   : var(--radius-lg);
  padding-inline  : 1rem;
  outline         : none;
  transition      : border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: rgba(139,117,103,0.55); }
.input:focus {
  border-color: var(--clr-primary);
  box-shadow  : 0 0 0 3px rgba(199,81,0,0.12);
}

.input--md { height: 3rem;   font-size: 0.875rem; }
.input--lg { height: 3.5rem; font-size: 1rem; }

.input--dark {
  background  : rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.12);
  color       : #fff;
}
.input--dark::placeholder { color: rgba(255,255,255,0.3); }
.input--dark:focus {
  border-color: rgba(199,81,0,0.5);
  box-shadow  : 0 0 0 3px rgba(199,81,0,0.2);
}


/* ─────────────────────────────────────────────────────────────
   8. BADGES
───────────────────────────────────────────────────────────── */
.badge {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.35rem;
  font-size      : 0.75rem;
  font-weight    : 700;
  border-radius  : var(--radius-full);
  padding        : 0.25rem 0.625rem;
  white-space    : nowrap;
}

.badge--new     { background: var(--clr-primary); color: #fff; }
.badge--primary { background: rgba(199,81,0,0.1); color: var(--clr-primary); }
.badge--white   { background: rgba(255,255,255,0.92); color: var(--clr-brand-dark); box-shadow: var(--shadow-float); }


/* ─────────────────────────────────────────────────────────────
   9. FLOATING BADGES (Hero overlays)
───────────────────────────────────────────────────────────── */
.float-badge {
  position   : absolute;
  background : #fff;
  border-radius: var(--radius-lg);
  box-shadow : var(--shadow-float);
  display    : flex;
  align-items: center;
  gap        : 0.625rem;
  padding    : 0.875rem 1rem;
  white-space: nowrap;
}

.float-badge--orange {
  background: var(--clr-primary);
}


/* ─────────────────────────────────────────────────────────────
   10. NAV
───────────────────────────────────────────────────────────── */
.nav-link {
  font-size  : 0.9375rem;
  font-weight: 500;
  color      : var(--clr-brand-dark);
  transition : color 0.15s;
  display    : inline-flex;
  align-items: center;
  gap        : 0.25rem;
}
.nav-link:hover       { color: var(--clr-primary); }
.nav-link--active     { color: var(--clr-primary); font-weight: 700; }


/* ─────────────────────────────────────────────────────────────
   11. STEP NUMBER
───────────────────────────────────────────────────────────── */
.step-num {
  width           : 2rem;
  height          : 2rem;
  border-radius   : var(--radius-full);
  background      : var(--clr-primary);
  color           : #fff;
  font-size       : 0.875rem;
  font-weight     : 700;
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
}


/* ─────────────────────────────────────────────────────────────
   12. SECTION BACKGROUNDS
───────────────────────────────────────────────────────────── */
.bg-explore   { background: linear-gradient(159deg, #F4EDE4 0%, #fff 100%); }
.bg-stories   { background: linear-gradient(180deg, #FAF7F2 0%, #fff 100%); }
.bg-listen    { background: linear-gradient(180deg, #FAF7F2 0%, #F0E9E0 100%); }


/* ─────────────────────────────────────────────────────────────
   13. QURAN CARD
───────────────────────────────────────────────────────────── */
.quran-card {
  background   : linear-gradient(135deg, #C75100 0%, #6B8E23 100%);
  border-radius: var(--radius-xl);
  padding      : 2.5rem;
  display      : flex;
  flex-direction: column;
  justify-content: space-between;
  min-height   : 280px;
}

.quran-card__icon {
  width           : 3rem;
  height          : 3rem;
  border-radius   : 0.875rem;
  background      : rgba(255,255,255,0.15);
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin-bottom   : 1.5rem;
}

.quran-card__quote {
  font-family : var(--font-display);
  font-size   : clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight : 700;
  color       : #fff;
  line-height : 1.5;
  font-style  : italic;
  margin      : 0 0 1.25rem;
  max-width   : 360px;
}

.quran-card__cite {
  font-size   : 0.875rem;
  color       : rgba(255,255,255,0.65);
  font-style  : normal;
  display     : block;
  margin-bottom: 1.5rem;
}

.quran-card__progress {
  display       : flex;
  align-items   : center;
  gap           : 0.75rem;
  background    : rgba(255,255,255,0.1);
  border-radius : var(--radius-md);
  padding       : 0.625rem 0.875rem;
}

.progress-bar {
  flex        : 1;
  height      : 0.25rem;
  background  : rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  overflow    : hidden;
}

.progress-bar__fill {
  height     : 100%;
  background : #fff;
  border-radius: var(--radius-full);
}


/* ─────────────────────────────────────────────────────────────
   14. WAVEFORM VISUALIZER
───────────────────────────────────────────────────────────── */
.waveform {
  display    : flex;
  align-items: flex-end;
  gap        : 3px;
  height     : 2.5rem;
}

.waveform__bar {
  flex         : 1;
  border-radius: var(--radius-full);
  background   : var(--clr-primary);
  opacity      : 0.6;
  min-height   : 4px;
}


/* ─────────────────────────────────────────────────────────────
   15. ANIMATIONS
───────────────────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.pulse { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.fade-up { animation: fade-up 0.5s ease both; }


/* ─────────────────────────────────────────────────────────────
   16. NAVBAR
───────────────────────────────────────────────────────────── */

/* Nav link base */
.nav-link {
  font-size  : 0.9375rem;
  font-weight: 500;
  color      : var(--clr-brand-dark);
  transition : color 0.15s;
}
.nav-link:hover { color: var(--clr-primary); }
.nav-link--active { color: var(--clr-primary); font-weight: 700; }

/* Pill style (desktop) */
.nav-link--pill {
  padding      : 0.4rem 0.875rem;
  border-radius: var(--radius-full);
  transition   : background-color 0.15s, color 0.15s;
  white-space  : nowrap;
}
.nav-link--pill:hover        { background-color: rgba(199,81,0,0.07); }
.nav-link--active.nav-link--pill           { background-color: transparent; }
.nav-link--active.nav-link--pill:hover     { background-color: transparent; }

/* Dropdown trigger arrow button */
.nav-link--dropdown {
  display    : inline-flex;
  align-items: center;
  gap        : 0.3rem;
  background : transparent;
  border     : none;
  cursor     : pointer;
}

/* Nav Chat button (icon + text) */
.nav-chat-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 7px 18px;
  border-radius  : var(--radius-full);
  background     : var(--clr-primary);
  color          : #fff;
  font-family    : 'Montserrat', sans-serif;
  font-weight    : 600;
  font-size      : 14px;
  text-decoration: none;
  box-shadow     : 0 1px 2px rgba(0,0,0,0.12);
  transition     : background 0.15s, box-shadow 0.15s;
  white-space    : nowrap;
}
.nav-chat-btn:hover { background: var(--clr-primary-dark); }

/* Language switcher buttons */
.lang-btn {
  cursor     : pointer;
  background : transparent;
  border     : none;
  font-family: 'Inter', sans-serif;
  font-size  : 13.5px;
  color      : var(--clr-brand-dark);
  transition : background 0.13s, color 0.13s;
  border-radius: 8px;
}
.lang-btn--active {
  background  : rgba(199,81,0,0.09);
  color       : var(--clr-primary);
  font-weight : 700;
}

/* Nav Login button (outlined pill) */
.nav-login-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  padding        : 8px 20px;
  border-radius  : var(--radius-full);
  border         : 1px solid rgba(62,39,35,0.22);
  color          : var(--clr-brand-dark);
  font-family    : 'Montserrat', sans-serif;
  font-weight    : 600;
  font-size      : 13px;
  text-decoration: none;
  background     : transparent;
  transition     : border-color 0.15s, background 0.15s;
}
.nav-login-btn:hover {
  border-color: rgba(62,39,35,0.42);
  background  : rgba(62,39,35,0.04);
}

/* Nav Avatar (logged-in state) */
.nav-avatar-btn {
  display       : inline-flex;
  align-items   : center;
  border-radius : var(--radius-full);
  text-decoration: none;
  transition    : opacity 0.15s;
}
.nav-avatar-btn:hover { opacity: 0.85; }
.nav-avatar-btn img {
  width        : 34px;
  height       : 34px;
  border-radius: 50%;
  border       : 2px solid rgba(199,81,0,0.35);
  object-fit   : cover;
  box-shadow   : 0 2px 6px rgba(0,0,0,0.12);
  display      : block;
}

/* Nav action icon buttons (search, language) */
.nav-action-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 2.25rem;
  height          : 2.25rem;
  border-radius   : var(--radius-full);
  color           : var(--clr-muted);
  background      : transparent;
  border          : none;
  cursor          : pointer;
  transition      : background-color 0.15s, color 0.15s;
}
.nav-action-btn:hover {
  background-color: rgba(199,81,0,0.08);
  color           : var(--clr-primary);
}

/* Mobile navbar: only logo + hamburger + theme toggle visible */
@media (max-width: 767px) {
  .nav-chat-btn,
  .nav-login-btn,
  .nav-avatar-btn { display: none !important; }
  .nav-action-btn:not(#menu-btn) { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────
   DARK MODE TOGGLE BUTTON
───────────────────────────────────────────────────────────── */
.theme-toggle-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 2.25rem;
  height          : 2.25rem;
  border-radius   : var(--radius-full);
  color           : var(--clr-muted);
  background      : transparent;
  border          : none;
  cursor          : pointer;
  flex-shrink     : 0;
  transition      : background-color 0.15s, color 0.15s;
}
/* Mobile theme btn hidden on desktop — desktop version is in the actions section */
#theme-btn { display: none !important; }
@media (max-width: 767px) {
  #theme-btn { display: flex !important; }
  #theme-btn-desktop { display: none !important; }
}
.theme-toggle-btn:hover {
  background: rgba(199,81,0,0.08);
  color     : var(--clr-primary);
}
/* Show moon (default = light mode), hide sun */
.theme-toggle-btn .icon-sun  { display: none;  }
.theme-toggle-btn .icon-moon { display: block; }
/* In dark mode: show sun, hide moon */
html.dark .theme-toggle-btn .icon-sun  { display: block; }
html.dark .theme-toggle-btn .icon-moon { display: none;  }
html.dark .theme-toggle-btn { color: #C8A98A; }
html.dark .theme-toggle-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* Mobile menu theme toggle row */
.mobile-theme-btn .icon-sun  { display: none;  }
.mobile-theme-btn .icon-moon { display: block; }
html.dark .mobile-theme-btn .icon-sun  { display: block; }
html.dark .mobile-theme-btn .icon-moon { display: none;  }


/* ─────────────────────────────────────────────────────────────
   MOBILE NAV — FULL-SCREEN OVERLAY
───────────────────────────────────────────────────────────── */

/* Override Tailwind's hidden + make it a fixed overlay */
#mobile-nav {
  display           : flex !important;
  position          : fixed;
  inset             : 0;
  z-index           : 9998;
  background        : var(--clr-surface-base);
  flex-direction    : column;
  overflow-y        : auto;
  overflow-x        : hidden;
  padding           : 0 !important;
  gap               : 0 !important;
  border-top        : none !important;
  /* off-screen (right) by default */
  transform         : translateX(100%);
  visibility        : hidden;
  transition        : transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                      visibility 0s linear 0.32s;
}
#mobile-nav.is-open {
  transform  : translateX(0);
  visibility : visible;
  transition : transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
               visibility 0s linear 0s;
}

/* Backdrop overlay */
.mob-backdrop {
  position           : fixed;
  inset              : 0;
  z-index            : 9997;
  background         : rgba(0,0,0,0.45);
  backdrop-filter    : blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity            : 0;
  visibility         : hidden;
  transition         : opacity 0.3s ease, visibility 0s linear 0.3s;
}
.mob-backdrop.is-open {
  opacity    : 1;
  visibility : visible;
  transition : opacity 0.3s ease;
}

/* Top bar injected inside overlay */
.mob-nav-topbar {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0.9rem 1.25rem;
  border-bottom   : 1px solid rgba(62,39,35,0.08);
  flex-shrink     : 0;
  position        : sticky;
  top             : 0;
  background      : var(--clr-surface-base);
  z-index         : 2;
}

/* Close (×) button */
.mob-nav-close {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 40px;
  height          : 40px;
  border-radius   : 50%;
  background      : rgba(62,39,35,0.07);
  border          : none;
  cursor          : pointer;
  color           : var(--clr-brand-dark);
  transition      : background 0.15s, color 0.15s;
}
.mob-nav-close:hover {
  background: rgba(199,81,0,0.12);
  color     : var(--clr-primary);
}

/* Nav links inside overlay: bump up spacing */
#mobile-nav > a,
#mobile-nav > div > button[data-mobile-accordion] {
  font-size   : 1rem !important;
  font-weight : 500 !important;
  padding-top    : 0.7rem !important;
  padding-bottom : 0.7rem !important;
}
/* Wrap area */
#mobile-nav > a,
#mobile-nav > div,
#mobile-nav > .pt-2,
#mobile-nav > .pt-3 {
  margin-inline: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
   DARK MODE — FULL REDESIGN
   Rule: no pure white, dark text → light, glass surfaces
───────────────────────────────────────────────────────────── */

/* ── CSS variable overrides ── */
html.dark {
  --clr-surface-base : #1A0F0A;
  --clr-surface-warm : #231508;
  --clr-brand-dark   : #F0E6DC;   /* dark text → light cream */
  --clr-brand-darker : #E8D8CC;
  --clr-muted        : #A89080;
}

/* ── Base ── */
html.dark body {
  background : #1A0F0A !important;
  color      : #F0E6DC;
}

/* Propagate light color to all generic text */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 { color: #F0E6DC !important; }
html.dark p   { color: #D4C5B8 !important; }
html.dark li  { color: #D4C5B8 !important; }
html.dark span:not([class*="badge"]):not([class*="tag"]):not([class*="btn"]):not([class*="type-"]) { color: inherit; }
html.dark label { color: #D4C5B8; }

/* Common Tailwind text utilities for dark text → override to light */
html.dark .text-brand-dark,
html.dark [class*="text-brand"] { color: #F0E6DC !important; }
html.dark .text-muted,
html.dark [class*="text-muted"] { color: #A89080 !important; }

/* ── Inline-style dark text → light in dark mode ── */
html.dark [style*="color:#3e2723"],
html.dark [style*="color:#3E2723"] { color: #F0E6DC !important; }
html.dark [style*="color:#8b7567"],
html.dark [style*="color:#8B7567"] { color: #A89080 !important; }
html.dark [style*="color:#6d4c41"],
html.dark [style*="color:#6D4C41"] { color: #A89080 !important; }
html.dark [style*="color:#364153"] { color: #C8A898 !important; }
html.dark [style*="color:#4a5565"],
html.dark [style*="color:#4A5565"] { color: #A89080 !important; }
html.dark [style*="color:#0a0a0a"],
html.dark [style*="color:#0A0A0A"] { color: #F0E6DC !important; }
html.dark .s-title               { color: #F0E6DC !important; }
html.dark .s-desc                { color: #A89080 !important; }

/* ── Navbar ── */
html.dark #site-header {
  background   : rgba(26,15,10,0.97) !important;
  border-color : rgba(255,255,255,0.07) !important;
}
html.dark .nav-link             { color: #E8D5C4 !important; }
html.dark .nav-link:hover       { color: #fff !important; }
html.dark .nav-link--pill:hover { background: rgba(255,255,255,0.07) !important; }
html.dark .nav-login-btn {
  color        : #E8D5C4 !important;
  border-color : rgba(232,213,196,0.22) !important;
  background   : transparent !important;
}
html.dark .nav-login-btn:hover {
  background  : rgba(255,255,255,0.08) !important;
  border-color: rgba(232,213,196,0.40) !important;
}

/* ── Dropdowns ── */
html.dark .dropdown-menu,
html.dark .lib-type-dropdown {
  background   : rgba(26,12,6,0.97) !important;
  border       : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow   : 0 8px 32px rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.dark .dropdown-item       { color: #D4C0B0 !important; }
html.dark .dropdown-item:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
/* Library type dropdown items */
html.dark .lib-type-dropdown a,
html.dark .lib-type-dropdown .dropdown-item { color: #D4C0B0 !important; }
html.dark .lib-type-dropdown a:hover        { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

/* ── Site logo wordmark ── */
.logo-accent { color: var(--clr-primary); }
html.dark .site-logo-word__main,
html.dark .site-logo-word__sub { color: #F0E6DC !important; }
html.dark .site-logo-word .logo-accent { color: #E8703A !important; }

/* ── White / beige sections → same as body background ── */
html.dark .bg-white,
html.dark .bg-surface-base,
html.dark .bg-surface-warm,
html.dark .bg-gray-50,
html.dark .bg-gray-100        { background: #1A0F0A !important; }

/* ── Custom gradient sections → dark override ── */
html.dark .bg-explore,
html.dark .bg-stories,
html.dark .bg-listen          { background: #1A0F0A !important; }

/* ── Gray image placeholders ── */
html.dark .bg-gray-200,
html.dark .bg-gray-300        { background: rgba(255,255,255,0.06) !important; }

/* ── Cards → frosted glass warm brown (visible but translucent) ── */
html.dark .card {
  background         : rgba(72,42,30,0.68) !important;
  border             : 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter    : blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .content-card__body {
  background    : rgba(72,42,30,0.76) !important;
  border-top    : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .content-card__title            { color: #FFFFFF !important; font-weight: 600 !important; }
html.dark .content-card__desc            { color: #C8A898 !important; }
html.dark .content-card__body .text-muted,
html.dark .content-card__body [class*="text-sm"] { color: #C8A898 !important; }
html.dark .content-card__body p,
html.dark .content-card__body span:not(.cat-tag):not([class*="badge"]) { color: #F5EDE2 !important; }

/* ── Cat-tags in dark mode — orange accent glass pill ── */
html.dark .cat-tag {
  background : rgba(199,81,0,0.18) !important;
  color      : #E8703A !important;
  border     : 1px solid rgba(199,81,0,0.35) !important;
}
html.dark .cat-tag--olive  { background: rgba(107,142,35,0.18) !important; color: #8ab83a !important; border-color: rgba(107,142,35,0.35) !important; }
html.dark .cat-tag--blue   { background: rgba(55,48,163,0.18)  !important; color: #818cf8 !important; border-color: rgba(55,48,163,0.35) !important; }
html.dark .cat-tag--teal   { background: rgba(15,118,110,0.18) !important; color: #2dd4bf !important; border-color: rgba(15,118,110,0.35) !important; }
html.dark .cat-tag--yellow { background: rgba(146,64,14,0.18)  !important; color: #f59e0b !important; border-color: rgba(146,64,14,0.35) !important; }
html.dark .content-card {
  background    : rgba(72,42,30,0.68) !important;
  border        : 1px solid rgba(255,255,255,0.10) !important;
  overflow      : hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .float-badge {
  background    : rgba(72,42,30,0.55) !important;
  border        : 1px solid rgba(255,255,255,0.14) !important;
}

/* ── Filter bar ── */
html.dark .filter-bar { background: #1A0F0A !important; border-color: rgba(255,255,255,0.07) !important; }
html.dark .filter-btn {
  background   : rgba(62,39,35,0.30) !important;
  color        : #D4C0B0 !important;
  border-color : rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px);
}
html.dark .filter-btn--active {
  background   : var(--clr-primary) !important;
  color        : #fff !important;
  border-color : var(--clr-primary) !important;
}
html.dark .filter-btn:hover:not(.filter-btn--active) {
  background  : rgba(62,39,35,0.50) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color       : #fff !important;
}

/* ── Borders ── */
html.dark [class*="border-black"]   { border-color: rgba(255,255,255,0.07) !important; }
html.dark [class*="divide-black"]   > * + * { border-color: rgba(255,255,255,0.07) !important; }

/* ── Inputs ── */
html.dark input:not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select,
html.dark .input {
  background   : transparent !important;
  border-color : rgba(255,255,255,0.15) !important;
  color        : #F0E6DC !important;
}
html.dark select {
  color-scheme: dark;
}
html.dark select option {
  background: #2c1b17;
  color: #F0E6DC;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: rgba(240,230,220,0.35) !important; }

/* ── Media card thumbnail placeholder ── */
html.dark .media-card__thumb  { background: #2D1810 !important; }

/* ── Topic card placeholder (when no image) ── */
html.dark .topic-card         { background: rgba(72,42,30,0.55) !important; }
html.dark .topic-card__overlay {
  background: linear-gradient(to top, rgba(30,10,5,0.92) 0%, rgba(0,0,0,0.15) 55%) !important;
}
html.dark .topic-card__title { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.8) !important; }
html.dark .topic-card__sub   { color: rgba(255,255,255,0.85) !important; }

/* ── Feature cards & other white-bg components ── */
html.dark .feat-card {
  background   : rgba(72,42,30,0.68) !important;
  border-color : rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .feat-card .feat-title { color: #FFFFFF !important; }
html.dark .feat-card .feat-desc  { color: #C8A898 !important; }

/* ── Type badge (video / article / podcast) ── */
html.dark .type-badge {
  background : rgba(62,39,35,0.75) !important;
  color      : #F0E6DC !important;
  border     : 1px solid rgba(255,255,255,0.15) !important;
}

/* ── Save / heart button on card thumb ── */
html.dark .save-btn {
  background : rgba(26,15,10,0.70) !important;
  color      : #C8A898 !important;
  border     : 1px solid rgba(255,255,255,0.12) !important;
}
html.dark .save-btn:hover { background: rgba(199,81,0,0.85) !important; color: #fff !important; border-color: transparent !important; }
html.dark .save-btn.is-saved { color: var(--clr-primary) !important; }

/* ── Unified content-page scroll arrow button ── */
.nav-scroll-btn {
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  background     : #fff;
  border         : none;
  box-shadow     : 0 4px 6px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #3e2723;
  transition     : box-shadow .2s;
  flex-shrink    : 0;
}
.nav-scroll-btn:hover    { box-shadow: 0 6px 12px rgba(0,0,0,.15); }
.nav-scroll-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
html.dark .nav-scroll-btn {
  background : rgba(72,42,30,.68) !important;
  color      : #F0E6DC !important;
  box-shadow : none !important;
  border     : 1px solid rgba(255,255,255,.10) !important;
}
html.dark .nav-scroll-btn:hover    { background: rgba(72,42,30,.90) !important; }
html.dark .nav-scroll-btn:disabled { opacity: .35 !important; }

/* ── Row nav arrows (carousel left/right) ── */
html.dark .row-nav-btn {
  background   : rgba(62,39,35,0.60) !important;
  border-color : rgba(255,255,255,0.12) !important;
  color        : #C8A898 !important;
  backdrop-filter: blur(8px);
}
html.dark .row-nav-btn:hover {
  background   : rgba(199,81,0,0.80) !important;
  border-color : transparent !important;
  color        : #fff !important;
}

/* ── Buttons (all non-primary variants) → frosted brown glass ── */
html.dark .btn:not(.btn--primary) {
  background   : rgba(62,39,35,0.35) !important;
  border-color : rgba(255,255,255,0.12) !important;
  color        : #D4C0B0 !important;
  backdrop-filter: blur(8px);
}
html.dark .btn:not(.btn--primary):hover {
  background  : rgba(62,39,35,0.55) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color       : #fff !important;
}
html.dark .btn--white,
html.dark .btn--ghost,
html.dark .action-btn:not(.action-btn--ai):not(.action-btn--save) {
  background   : rgba(62,39,35,0.30) !important;
  border-color : rgba(255,255,255,0.12) !important;
  color        : #D4C0B0 !important;
  backdrop-filter: blur(8px);
}
html.dark .btn--white:hover,
html.dark .btn--ghost:hover,
html.dark .action-btn:not(.action-btn--ai):hover {
  background  : rgba(62,39,35,0.50) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color       : #fff !important;
}

/* ── Quran page ── */
html.dark .verse-card {
  background   : rgba(72,42,30,0.68) !important;
  border       : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow   : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .verse-card .verse-arabic  { color: #F5EDE2 !important; }
html.dark .verse-card .verse-trans   { color: #C8A898 !important; }
html.dark .verse-card .verse-num     { background: rgba(107,142,35,0.25) !important; color: #8ab83a !important; }

html.dark .surah-sidebar {
  background   : rgba(26,15,10,0.97) !important;
  border-color : rgba(255,255,255,0.08) !important;
}
html.dark .surah-item__name  { color: #D4C5B8 !important; }
html.dark .surah-item__meta  { color: #A89080 !important; }
html.dark .surah-item:hover  { background: rgba(72,42,30,0.50) !important; }
html.dark .surah-item.is-active { background: rgba(199,81,0,0.15) !important; border-color: var(--clr-primary) !important; }

html.dark .quran-toolbar {
  background   : rgba(26,15,10,0.97) !important;
  border-color : rgba(255,255,255,0.08) !important;
}

/* ── Reflection sidebar dark mode ── */
html.dark .reflection-sidebar {
  background   : rgba(26,15,10,0.97) !important;
  border-color : rgba(255,255,255,0.08) !important;
}
html.dark .reflection-sidebar__heading { color: #F0E6DC !important; }
html.dark .tafsir-card {
  background   : rgba(72,42,30,0.68) !important;
  border-color : rgba(255,255,255,0.08) !important;
}
html.dark .tafsir-card__title { color: #F0E6DC !important; }
html.dark .tafsir-card__text  { color: #C8A898 !important; }
html.dark .notes-card {
  background   : rgba(72,42,30,0.68) !important;
  border-color : rgba(255,255,255,0.08) !important;
}
html.dark .notes-card__title  { color: #F0E6DC !important; }
html.dark .ask-ai-card {
  background   : rgba(72,42,30,0.68) !important;
  border-color : rgba(255,255,255,0.08) !important;
}
html.dark .ask-ai-card__title { color: #F0E6DC !important; }

/* ── Quran toolbar buttons dark mode ── */
html.dark .quran-icon-btn {
  background : rgba(255,255,255,0.07) !important;
  color      : #D4C5B8 !important;
}
html.dark .quran-icon-btn:hover {
  background : rgba(255,255,255,0.13) !important;
}
html.dark .quran-tool-btn {
  background : rgba(255,255,255,0.07) !important;
  color      : #D4C5B8 !important;
}
html.dark .quran-tool-btn:hover {
  background : rgba(255,255,255,0.13) !important;
}
html.dark .quran-toolbar {
  background  : rgba(26,15,10,0.97) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── Quran audio player dark mode ── */
html.dark #quran-audio-player {
  background  : #1A0F0A !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── Verse cards dark mode ── */
html.dark .verse-card {
  background   : rgba(42,22,12,0.95) !important;
  border-color : rgba(255,255,255,0.08) !important;
  box-shadow   : none !important;
}
html.dark .verse-arabic   { color: #F0E6DC !important; }
html.dark .verse-translation { color: #C8A898 !important; }
html.dark .verse-action-btn {
  background   : rgba(255,255,255,0.08) !important;
  color        : #D4C5B8 !important;
}
html.dark .verse-action-btn:hover { background: rgba(255,255,255,0.14) !important; }

/* ── Listen page cards ── */
html.dark .schedule-card {
  background   : rgba(72,42,30,0.68) !important;
  border       : 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .schedule-card * { color: #F0E6DC !important; }
html.dark .schedule-card .text-muted,
html.dark .schedule-card [class*="text-sm"] { color: #A89080 !important; }

html.dark .continue-card {
  background   : rgba(72,42,30,0.68) !important;
  border       : 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .continue-card * { color: #F0E6DC !important; }

/* ── Sections with inline var(--clr-brand-darker) bg → keep dark ── */
html.dark section[style*="clr-brand-darker"] { background: #2C1B17 !important; }
html.dark section[style*="clr-brand-dark"]   { background: #3E2723 !important; }

/* ── Footer logo size ── */
footer img[src*="logo"] {
  height    : 56px !important;
  width     : auto !important;
}

/* ── Footer & fixed player & explore-hero — keep original dark brown ── */
html.dark footer               { background-color: #3E2723 !important; }
html.dark .fixed-player        { background: #3E2723 !important; }
html.dark .explore-hero        { background: #2C1B17 !important; }


/* ── Mobile overlay ── */
html.dark #mobile-nav           { background: #1A0F0A !important; }
html.dark .mob-nav-topbar       { background: #1A0F0A !important; border-color: rgba(255,255,255,0.07) !important; }
html.dark .mob-nav-close        { background: rgba(255,255,255,0.08) !important; color: #E8D5C4 !important; }
html.dark .mob-backdrop         { background: rgba(0,0,0,0.65) !important; }
html.dark .mob-nav-close:hover  { background: rgba(199,81,0,0.2) !important; color: #fff !important; }

/* Desktop dropdown panel */
.dropdown-menu {
  position      : absolute;
  top           : calc(100% + 0.5rem);
  left          : 50%;
  transform     : translateX(-50%) translateY(-6px);
  min-width     : 180px;
  background    : #fff;
  border-radius : var(--radius-lg);
  box-shadow    : 0 8px 32px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
  padding       : 0.5rem;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity 0.18s ease, transform 0.18s ease;
  z-index       : 100;
}

.dropdown-menu.is-open {
  opacity       : 1;
  pointer-events: auto;
  transform     : translateX(-50%) translateY(0);
}

/* Dropdown items */
.dropdown-item {
  display     : block;
  padding     : 0.625rem 0.875rem;
  border-radius: 0.625rem;
  font-size   : 0.9375rem;
  font-weight : 500;
  color       : var(--clr-brand-dark);
  transition  : background-color 0.12s, color 0.12s;
  white-space : nowrap;
}
.dropdown-item:hover {
  background-color: rgba(199,81,0,0.07);
  color           : var(--clr-primary);
}

/* Chevron rotation when dropdown is open */
[data-dropdown].is-open .dropdown-chevron {
  transform: rotate(180deg);
}


/* ─────────────────────────────────────────────────────────────
   17. SEARCH BOX
───────────────────────────────────────────────────────────── */
.search-box {
  position  : relative;
  width     : 100%;
  max-width : 768px;
  margin    : 0 auto;
}

.search-box__input {
  width          : 100%;
  height         : 60px;
  background     : #fff;
  border-radius  : var(--radius-full);
  border         : none;
  padding        : 0 56px;
  font-family    : var(--font-sans);
  font-size      : 1.125rem;
  color          : var(--clr-brand-dark);
  box-shadow     : 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  outline        : none;
  transition     : box-shadow 0.2s;
}

.search-box__input:focus {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15),
              0 8px 10px -6px rgba(0,0,0,0.1),
              0 0 0 3px rgba(199,81,0,0.25);
}

.search-box__input::placeholder { color: rgba(62,39,35,0.45); }

.search-box__icon {
  position       : absolute;
  left           : 16px;
  top            : 50%;
  transform      : translateY(-50%);
  width          : 24px;
  height         : 24px;
  color          : var(--clr-muted);
  pointer-events : none;
}

.search-box__mic {
  position        : absolute;
  right           : 10px;
  top             : 50%;
  transform       : translateY(-50%);
  width           : 40px;
  height          : 40px;
  border-radius   : var(--radius-full);
  background      : #ffedd4;
  border          : none;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--clr-primary);
  transition      : background-color 0.15s;
}

.search-box__mic:hover { background: rgba(199,81,0,0.2); }

.search-box--with-btn {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  background     : #fff;
  border-radius  : var(--radius-full);
  padding        : 6px;
  box-shadow     : 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

.search-box--with-btn .search-box__icon {
  position : static;
  transform: none;
  margin-left: 10px;
  flex-shrink: 0;
}

.search-box--with-btn .search-box__input {
  position   : static;
  flex       : 1;
  min-width  : 0;
  height     : auto;
  padding    : 0 8px;
  box-shadow : none;
  background : transparent;
}

.search-box--with-btn .search-box__input:focus { box-shadow: none; }

.search-box__btn { flex-shrink: 0; }

html.dark .search-box--with-btn {
  background     : rgba(26,15,10,.88) !important;
  border         : 1px solid rgba(255,255,255,.14) !important;
  box-shadow     : 0 20px 25px -5px rgba(0,0,0,.3), 0 8px 10px -6px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .search-box--with-btn .search-box__input { color: #F0E6DC !important; }
html.dark .search-box--with-btn .search-box__input::placeholder { color: rgba(240,230,220,.35) !important; }
html.dark .search-box--with-btn .search-box__icon { color: rgba(240,230,220,.55) !important; }

@media (max-width: 640px) {
  .search-box--with-btn { padding: 6px; }
  .search-box--with-btn .search-box__icon { margin-left: 6px; }
  .search-box--with-btn .search-box__input { padding: 0 6px; font-size: 13.5px; }
  .search-box__btn { padding: 10px 16px !important; font-size: 13px !important; white-space: nowrap; }
}


/* ─────────────────────────────────────────────────────────────
   18. QUICK TAGS  (hero search suggestion pills)
───────────────────────────────────────────────────────────── */
.quick-tag {
  display         : inline-flex;
  align-items     : center;
  height          : 36px;
  padding         : 0 16px;
  border-radius   : var(--radius-full);
  background      : rgba(255,255,255,0.2);
  font-family     : var(--font-display);
  font-size       : 0.875rem;
  font-weight     : 600;
  color           : #fff;
  cursor          : pointer;
  text-decoration : none;
  white-space     : nowrap;
  transition      : background-color 0.15s;
}

.quick-tag:hover { background: rgba(255,255,255,0.32); }


/* ─────────────────────────────────────────────────────────────
   19. FILTER BAR
───────────────────────────────────────────────────────────── */
.filter-bar {
  background      : rgba(255,255,255,0.96);
  backdrop-filter : blur(8px);
  border-bottom   : 0.8px solid #e5e7eb;
  position        : sticky;
  top             : 4rem;     /* sit just under navbar */
  z-index         : 40;
}

.filter-bar__scroll {
  display          : flex;
  align-items      : center;
  gap              : 8px;
  padding-block    : 12px;
  overflow-x       : auto;
  scrollbar-width  : none;
  -ms-overflow-style: none;
}

.filter-bar__scroll::-webkit-scrollbar { display: none; }

.filter-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  padding        : 0.5rem 1rem;
  border-radius  : 200px;
  border         : 0.8px solid #e5e7eb;
  background     : #fff;
  font-family    : var(--font-sans);
  font-size      : 0.875rem;
  font-weight    : 500;
  color          : var(--clr-brand-dark);
  cursor         : pointer;
  white-space    : nowrap;
  flex-shrink    : 0;
  line-height    : 1.25;
  transition     : background-color 0.15s, border-color 0.15s, color 0.15s;
}

.filter-btn:hover {
  border-color: var(--clr-primary);
  color       : var(--clr-primary);
}

.filter-btn--active {
  background  : var(--clr-primary);
  border-color: var(--clr-primary);
  color       : #fff;
}

.filter-btn--active:hover {
  background  : var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
}


/* ─────────────────────────────────────────────────────────────
   20. CONTENT CARD
───────────────────────────────────────────────────────────── */
.content-card {
  background   : #fff;
  border-radius: 1.75rem;   /* 28px */
  box-shadow   : 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  overflow     : hidden;
  width        : 100%;
  transition   : box-shadow 0.2s ease, transform 0.2s ease;
}

.content-card:hover {
  box-shadow: var(--shadow-hover);
  transform : translateY(-3px);
}

/* ── Thumbnail ── */
.content-card__thumb {
  position : relative;
  height   : 160px;
  overflow : hidden;
}

.content-card__thumb img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  transition : transform 0.35s ease;
}

.content-card:hover .content-card__thumb img {
  transform: scale(1.05);
}

/* Badge row (top-left of thumb) */
.content-card__badges {
  position   : absolute;
  top        : 12px;
  left       : 12px;
  display    : flex;
  gap        : 6px;
  align-items: center;
}

/* Content type badge: video | article | podcast */
.type-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  height       : 24px;
  padding      : 0 8px;
  border-radius: var(--radius-full);
  background   : rgba(255,255,255,0.92);
  font-family  : var(--font-display);
  font-size    : 0.75rem;
  font-weight  : 600;
  color        : var(--clr-brand-dark);
  white-space  : nowrap;
  line-height  : 1;
}

/* AI Pick badge */
.ai-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 4px;
  height       : 24px;
  padding      : 0 8px;
  border-radius: var(--radius-full);
  background   : var(--clr-primary);
  font-family  : var(--font-display);
  font-size    : 0.75rem;
  font-weight  : 600;
  color        : #fff;
  white-space  : nowrap;
  line-height  : 1;
}

/* Save / bookmark button (bottom-right of thumb) */
.save-btn {
  position        : absolute;
  bottom          : 10px;
  right           : 10px;
  width           : 36px;
  height          : 36px;
  border-radius   : var(--radius-full);
  background      : rgba(255,255,255,0.92);
  border          : none;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--clr-muted);
  transition      : background-color 0.15s, color 0.15s;
}

.save-btn:hover         { background: #fff; color: var(--clr-primary); }
.save-btn.is-saved      { color: var(--clr-primary); }

/* Card body */
.content-card__body {
  padding       : 14px 16px 16px;
  display       : flex;
  flex-direction: column;
  gap           : 6px;
  flex          : 1;             /* fill the stretched card … */
}

/* … and keep the date/footer row pinned to the bottom, so cards in a row end
   level even when one has no category tag or a shorter title. */
.content-card__body .content-card__footer { margin-top: auto; }

/* Grid items stretch by default; make the card itself take that full height. */
[data-card-item] { height: 100%; }
.content-card     { height: 100%; display: flex; flex-direction: column; }

/* Meta row  (category tag + duration) — reserves its height so a card without
   a category tag does not sit shorter than its neighbours. */
.content-card__meta {
  display    : flex;
  align-items: center;
  justify-content: space-between;
  gap        : 8px;
  min-height : 22px;              /* = .cat-tag height */
}

/* Category tag */
.cat-tag {
  display      : inline-flex;
  align-items  : center;
  height       : 22px;
  padding      : 0 8px;
  border-radius: var(--radius-full);
  background   : #ffedd4;
  font-family  : var(--font-display);
  font-size    : 0.6875rem;
  font-weight  : 400;
  color        : #9f2d00;
  white-space  : nowrap;
  line-height  : 1;
}

.cat-tag--olive  { background: #ecfccb; color: #3a5c10; }
.cat-tag--blue   { background: #e0e7ff; color: #3730a3; }
.cat-tag--teal   { background: #ccfbf1; color: #0f766e; }
.cat-tag--yellow { background: #fef3c7; color: #92400e; }

/* Duration  (clock icon + time) */
.content-card__duration {
  display    : inline-flex;
  align-items: center;
  gap        : 3px;
  font-family: var(--font-display);
  font-size  : 0.6875rem;
  color      : #6a7282;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Title — always reserves its 2 clamped lines so cards in a row line up
   whether the title wraps or not. */
.content-card__title {
  font-family       : var(--font-display);
  font-size         : 1rem;
  font-weight       : 600;
  color             : var(--clr-brand-dark);
  line-height       : 1.45;
  display           : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow          : hidden;
  min-height        : 2.9em;   /* 2 × line-height */
}

/* Description — same deal: 2 reserved lines, so the footer row sits at the
   same height on every card even when an item has no description at all. */
.content-card__desc {
  font-family       : var(--font-sans);
  font-size         : 0.8125rem;
  color             : var(--clr-muted);
  line-height       : 1.6;
  display           : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow          : hidden;
  min-height        : 3.2em;   /* 2 × line-height */
}

/* Footer row  (level + optional views) */
.content-card__footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-top     : 2px;
}

.content-card__level { display: none !important; }
.content-card__views { font-family: var(--font-display); font-size: 0.6875rem; color: var(--clr-muted); }

/* Hide "level" (Advanced/Beginner/etc) labels across all content view types */
.rec-card__level,
.ep-tag--olive,
.cover-badge--green,
.hero-pill--level {
  display: none !important;
}


/* ─────────────────────────────────────────────────────────────
   21. CARD ROW  (horizontal scrollable section)
───────────────────────────────────────────────────────────── */
.row-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 1.5rem;
}

.row-header__title {
  font-family  : var(--font-display);
  font-size    : clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight  : 700;
  color        : var(--clr-brand-dark);
  line-height  : 1.2;
}

.row-nav-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 36px;
  height          : 36px;
  border-radius   : var(--radius-full);
  border          : 1px solid #e5e7eb;
  background      : #fff;
  color           : var(--clr-brand-dark);
  cursor          : pointer;
  transition      : background-color 0.15s, border-color 0.15s, color 0.15s;
}

.row-nav-btn:hover {
  border-color: var(--clr-primary);
  color       : var(--clr-primary);
}

/* Horizontal scroll grid */
.cards-scroll {
  display             : grid;
  grid-auto-flow      : column;
  grid-auto-columns   : calc(25% - 15px);
  gap                 : 1.25rem;
  overflow-x          : auto;
  scroll-snap-type    : x mandatory;
  scrollbar-width     : none;
  -ms-overflow-style  : none;
  padding-bottom      : 4px;
}

.cards-scroll::-webkit-scrollbar { display: none; }

.cards-scroll > * { scroll-snap-align: start; }

@media (max-width: 1024px) {
  .cards-scroll { grid-auto-columns: calc(50% - 10px); }
}

@media (max-width: 640px) {
  .cards-scroll { grid-auto-columns: 82%; }
}


/* ─────────────────────────────────────────────────────────────
   21b. MOBILE HORIZONTAL SCROLL UTILITIES
        .m-scroll  — card grids → horizontal swipe on mobile
        .m-tabs    — tab bars  → horizontal swipe on mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Card grid → horizontal scroll */
  .m-scroll {
    display              : flex !important;
    flex-wrap            : nowrap !important;
    overflow-x           : auto !important;
    overflow-y           : visible;
    scroll-snap-type     : x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width      : none;
    -ms-overflow-style   : none;
    gap                  : 1rem !important;
    padding-bottom       : 8px;
    /* bleed to screen edges for a native feel */
    margin-left          : calc(-1 * var(--container-px-sm));
    margin-right         : calc(-1 * var(--container-px-sm));
    padding-left         : var(--container-px-sm);
    padding-right        : var(--container-px-sm);
  }
  .m-scroll::-webkit-scrollbar { display: none; }

  /* Default card width inside scroll row */
  .m-scroll > * {
    flex             : 0 0 78vw;
    max-width        : 300px;
    scroll-snap-align: start;
  }

  /* Narrower cards (e.g. topic-card tiles) */
  .m-scroll--narrow > * {
    flex     : 0 0 60vw;
    max-width: 240px;
  }

  /* Wider cards (e.g. hero story card) */
  .m-scroll--wide > * {
    flex     : 0 0 88vw;
    max-width: 340px;
  }

  /* Tab/filter bars → horizontal scroll (single line) */
  .m-tabs {
    display              : flex !important;
    flex-wrap            : nowrap !important;
    overflow-x           : auto !important;
    overflow-y           : visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width      : none;
    -ms-overflow-style   : none;
    gap                  : 8px !important;
    padding-bottom       : 4px;
    margin-left          : calc(-1 * var(--container-px-sm));
    margin-right         : calc(-1 * var(--container-px-sm));
    padding-left         : var(--container-px-sm);
    padding-right        : var(--container-px-sm);
  }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tabs > * { flex-shrink: 0 !important; }
}


/* ─────────────────────────────────────────────────────────────
   22. EXPLORE HERO
───────────────────────────────────────────────────────────── */
.explore-hero {
  position  : relative;
  min-height: 380px;
  display   : flex;
  align-items: center;
  overflow  : hidden;
  background: var(--clr-brand-darker);
}

.explore-hero__bg {
  position           : absolute;
  inset              : 0;
  background-size    : cover;
  background-position: center;
  opacity            : 0.45;
}

.explore-hero__overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    to bottom,
    rgba(44,27,23,0.5) 0%,
    rgba(44,27,23,0.75) 100%
  );
}

.explore-hero__content {
  position       : relative;
  z-index        : 1;
  text-align     : center;
  padding-block  : 4rem;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 1.5rem;
  width          : 100%;
}

.explore-hero__title {
  font-family  : var(--font-display);
  font-size    : clamp(1.75rem, 4vw, 3.25rem);
  font-weight  : 700;
  color        : #fff;
  line-height  : 1.2;
  max-width    : 820px;
}

.explore-hero__tags {
  display        : flex;
  flex-wrap      : wrap;
  gap            : 8px;
  justify-content: center;
}


/* Explore hero — mobile size reduction */
@media (max-width: 640px) {
  .explore-hero { min-height: 300px; }
  .explore-hero__content { padding-block: 2.5rem; gap: 1rem; }
  .explore-hero__title { font-size: 1.5rem !important; }
  .search-box__input { height: 48px; font-size: 0.9375rem; padding: 0 44px; }
  .search-box__icon { width: 20px; height: 20px; left: 13px; }
  .search-box__mic { width: 34px; height: 34px; right: 7px; }
}

/* ─────────────────────────────────────────────────────────────
   23. AI DISCOVERY SECTION
───────────────────────────────────────────────────────────── */
.ai-discovery {
  background    : linear-gradient(166.61deg, #FFEDD4 0%, #FFF7ED 100%);
  text-align    : center;
  padding-block : var(--section-py);
  overflow-x    : hidden;
}
.ai-discovery .s-desc { margin-left: auto; margin-right: auto; }
html.dark .ai-discovery { background: linear-gradient(166.61deg, #2C1B17 0%, #1A0F0A 100%) !important; }
html.dark .ai-discovery .s-desc { color: #C8A898 !important; }

/* ── SweetAlert2 toast/popup — dark mode ── */
html.dark .swal2-popup {
  background : #2C1B17 !important;
  color      : #F0E6DC !important;
  box-shadow : 0 8px 30px rgba(0,0,0,.45) !important;
  border     : 1px solid rgba(255,255,255,.10);
}
html.dark .swal2-title,
html.dark .swal2-html-container { color: #F0E6DC !important; }
html.dark .swal2-close { color: rgba(240,230,220,.6) !important; }
html.dark .swal2-close:hover { color: #F0E6DC !important; }
html.dark .swal2-timer-progress-bar { background: rgba(255,255,255,.25) !important; }
/* Prevent long button text from overflowing on mobile */
@media (max-width: 640px) {
  .ai-discovery .btn {
    white-space: normal !important;
    max-width  : 100%;
    width      : calc(100% - 48px);
    line-height: 1.4;
  }
}

.ai-discovery__icon {
  width           : 48px;
  height          : 48px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin          : 0 auto 1.25rem;
  color           : var(--clr-primary);
}


/* ─────────────────────────────────────────────────────────────
   24. CHAT PAGE
   Full-viewport layout: sidebar + chat panel, no footer.
   body on chat.html gets class="chat-page" which locks scroll.
───────────────────────────────────────────────────────────── */

/* Lock scroll on chat page */
body.chat-page {
  overflow   : hidden;
  height     : 100dvh;
  display    : flex;
  flex-direction: column;
}

/* ── Chat layout wrapper ──────────────────────────────────── */
.chat-layout {
  display   : flex;
  flex      : 1;
  overflow  : hidden;
  min-height: 0;
}

/* ── Left sidebar ─────────────────────────────────────────── */
.chat-sidebar {
  width          : 284px;
  flex-shrink    : 0;
  background     : #fff;
  border-right   : 1px solid rgba(62,39,35,0.1);
  display        : flex;
  flex-direction : column;
  overflow       : hidden;
  transition     : transform 0.25s ease, width 0.25s ease;
}

/* Sidebar scrollable body */
.chat-sidebar__body {
  flex       : 1;
  overflow-y : auto;
  padding    : 20px;
  display    : flex;
  flex-direction: column;
  gap        : 24px;
  scrollbar-width: none;
}
.chat-sidebar__body::-webkit-scrollbar { display: none; }

/* Sidebar bottom profile strip */
.chat-sidebar__footer {
  padding       : 0 20px 20px;
  border-top    : 1px solid rgba(62,39,35,0.1);
  padding-top   : 16px;
  flex-shrink   : 0;
}

/* New Chat button */
.btn--new-chat {
  width           : 100%;
  background      : var(--clr-primary);
  color           : #fff;
  border          : none;
  border-radius   : var(--radius-full);
  height          : 44px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  font-family     : var(--font-display);
  font-size       : 0.875rem;
  font-weight     : 600;
  cursor          : pointer;
  transition      : background-color 0.15s;
  text-decoration : none;
}
.btn--new-chat:hover { background: var(--clr-primary-dark); }

/* Sidebar section heading */
.sidebar-heading {
  font-family : var(--font-display);
  font-size   : 0.75rem;
  font-weight : 700;
  color       : var(--clr-brand-dark);
  margin-bottom: 6px;
}

/* Conversation / topic list item */
.sidebar-item {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 10px;
  border-radius : 14px;
  cursor        : pointer;
  transition    : background-color 0.15s;
  text-decoration: none;
}
.sidebar-item:hover       { background: rgba(199,81,0,0.06); }
.sidebar-item.is-active   { background: rgba(199,81,0,0.1);  }

.sidebar-item__icon {
  width           : 18px;
  height          : 18px;
  flex-shrink     : 0;
  color           : var(--clr-muted);
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.sidebar-item__info { flex: 1; min-width: 0; }

.sidebar-item__title {
  font-family   : var(--font-display);
  font-size     : 0.78rem;
  font-weight   : 500;
  color         : var(--clr-brand-dark);
  line-height   : 1.4;
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.sidebar-item__meta {
  font-family : var(--font-display);
  font-size   : 0.65rem;
  font-weight : 500;
  color       : #6b5b52;
  margin-top  : 1px;
}

/* Profile row */
.sidebar-profile {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 10px;
  border-radius : 14px;
  cursor        : pointer;
  transition    : background-color 0.15s;
}
.sidebar-profile:hover { background: rgba(199,81,0,0.06); }

.sidebar-profile__avatar {
  width           : 36px;
  height          : 36px;
  border-radius   : var(--radius-full);
  background      : var(--clr-primary);
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
  color           : #fff;
}

.sidebar-profile__name {
  font-family : var(--font-display);
  font-size   : 0.78rem;
  font-weight : 600;
  color       : var(--clr-brand-dark);
  line-height : 1.3;
}

.sidebar-profile__sub {
  font-family : var(--font-display);
  font-size   : 0.65rem;
  font-weight : 500;
  color       : #6b5b52;
}


/* ── Right chat panel ─────────────────────────────────────── */
.chat-panel {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  overflow       : hidden;
  background     : #fff;
  min-width      : 0;
}

/* Chat header bar */
.chat-header {
  background      : rgba(255,255,255,0.9);
  backdrop-filter : blur(8px);
  border-bottom   : 0.8px solid rgba(62,39,35,0.1);
  height          : 48px;
  padding         : 0 28px;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-shrink     : 0;
  gap             : 12px;
}

.chat-header__status {
  display     : flex;
  align-items : center;
  gap         : 8px;
}

.chat-header__dot {
  width        : 10px;
  height       : 10px;
  border-radius: var(--radius-full);
  background   : #6b8e23;
  flex-shrink  : 0;
}

.chat-header__label {
  font-family : var(--font-display);
  font-size   : 0.78rem;
  font-weight : 600;
  color       : var(--clr-brand-dark);
}

.chat-header__actions {
  display     : flex;
  align-items : center;
  gap         : 14px;
}

.chat-header__action-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 5px;
  font-family     : var(--font-display);
  font-size       : 0.75rem;
  font-weight     : 500;
  color           : #6b5b52;
  background      : none;
  border          : none;
  cursor          : pointer;
  padding         : 4px 8px;
  border-radius   : var(--radius-full);
  transition      : background-color 0.15s, color 0.15s;
}
.chat-header__action-btn:hover {
  background : rgba(199,81,0,0.07);
  color      : var(--clr-primary);
}

/* Sidebar toggle (mobile only) */
.chat-header__sidebar-toggle {
  display         : none;
  align-items     : center;
  justify-content : center;
  width           : 36px;
  height          : 36px;
  border-radius   : var(--radius-full);
  border          : none;
  background      : transparent;
  color           : var(--clr-muted);
  cursor          : pointer;
  transition      : background-color 0.15s;
}
.chat-header__sidebar-toggle:hover { background: rgba(199,81,0,0.07); }


/* ── Background selector (shown at chat start) ────────────── */
.chat-bg-selector {
  padding         : 24px 28px 20px;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : 14px;
  border-bottom   : 0.8px solid rgba(62,39,35,0.06);
  flex-shrink     : 0;
}

.chat-bg-selector__title {
  font-family : var(--font-sans);
  font-size   : 1rem;
  font-weight : 500;
  color       : var(--clr-brand-dark);
}

.chat-bg-pills {
  display         : flex;
  flex-wrap       : wrap;
  gap             : 8px;
  justify-content : center;
}

@media (max-width: 640px) {
  .chat-bg-pills {
    flex-wrap       : nowrap;
    overflow-x      : auto;
    justify-content : flex-start;
    scrollbar-width : none;
    -ms-overflow-style: none;
    padding-bottom  : 4px;
    align-self      : stretch;
    width           : 100%;
  }
  .chat-bg-pills::-webkit-scrollbar { display: none; }
  .chat-bg-pills .bg-pill { flex-shrink: 0; }

  /* Mobile chat — reduce padding so content fits */
  .chat-messages {
    padding-left : 16px !important;
    padding-right: 16px !important;
  }
  .chat-input-wrap {
    padding-left : 12px !important;
    padding-right: 12px !important;
  }
  .chat-header {
    padding: 0 16px !important;
  }
  .chat-bg-selector {
    padding-left : 16px !important;
    padding-right: 16px !important;
  }
}

.bg-pill {
  display         : inline-flex;
  align-items     : center;
  height          : 44px;
  padding         : 0 20px;
  border-radius   : var(--radius-full);
  background      : var(--clr-surface-warm);
  font-family     : var(--font-sans);
  font-size       : 0.875rem;
  font-weight     : 500;
  color           : var(--clr-brand-dark);
  cursor          : pointer;
  border          : 2px solid transparent;
  transition      : border-color 0.15s, background-color 0.15s;
  user-select     : none;
}
.bg-pill:hover         { border-color: rgba(199,81,0,0.4); }
.bg-pill.is-active     { border-color: var(--clr-primary); background: rgba(199,81,0,0.08); color: var(--clr-primary); font-weight: 600; }


/* ── Messages area ────────────────────────────────────────── */
.chat-messages {
  flex           : 1;
  overflow-y     : auto;
  padding        : 24px 28px;
  display        : flex;
  flex-direction : column;
  gap            : 18px;
  scroll-behavior: smooth;
}

/* Message row */
.chat-msg {
  display     : flex;
  gap         : 10px;
  align-items : flex-start;
  max-width   : 100%;
}

/* AI avatar circle */
.chat-msg__avatar {
  width           : 36px;
  height          : 36px;
  border-radius   : var(--radius-full);
  flex-shrink     : 0;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : linear-gradient(135deg, #C75100 0%, #C96C3B 100%);
  color           : #fff;
}

/* Bubble */
.chat-msg__bubble {
  padding     : 10px 16px;
  line-height : 1.6;
  font-family : var(--font-sans);
  font-size   : 0.875rem;
  max-width   : min(520px, 68%);
  word-wrap   : break-word;
}

/* AI bubble — orange gradient, left-anchored */
.chat-msg--ai .chat-msg__bubble {
  background    : linear-gradient(90deg, #C75100 0%, #C96C3B 100%);
  color         : #fff;
  border-radius : 4px 18px 18px 18px;
}

/* User bubble — warm bg, right-anchored */
.chat-msg--user {
  flex-direction  : row-reverse;
  align-self      : flex-end;
  justify-content : flex-start;
}
.chat-msg--user .chat-msg__bubble {
  background    : var(--clr-surface-warm);
  color         : var(--clr-brand-dark);
  border-radius : 18px 4px 18px 18px;
}

/* Typing indicator */
.chat-typing {
  display     : flex;
  gap         : 10px;
  align-items : flex-end;
}

.typing-dots {
  display         : flex;
  align-items     : center;
  gap             : 5px;
  padding         : 12px 16px;
  background      : var(--clr-surface-warm);
  border-radius   : 4px 18px 18px 18px;
}

.typing-dots span {
  width           : 7px;
  height          : 7px;
  border-radius   : var(--radius-full);
  background      : var(--clr-primary);
  opacity         : 0.5;
  animation       : typing-bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}


/* ── Input area ───────────────────────────────────────────── */
.chat-input-wrap {
  padding     : 12px 16px 16px;
  flex-shrink : 0;
}

.chat-input-box {
  background    : #fff;
  border        : 0.8px solid rgba(62,39,35,0.2);
  border-radius : 14px;
  padding       : 12px 14px 10px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  transition    : border-color 0.2s, box-shadow 0.2s;
}

.chat-input-box:focus-within {
  border-color : var(--clr-primary);
  box-shadow   : 0 0 0 3px rgba(199,81,0,0.12);
}

.chat-textarea {
  border          : none;
  outline         : none;
  resize          : none;
  font-family     : var(--font-sans);
  font-size       : 0.9rem;
  color           : var(--clr-brand-dark);
  background      : transparent;
  line-height     : 1.55;
  width           : 100%;
  min-height      : 52px;
  max-height      : 180px;
  overflow-y      : auto;
  scrollbar-width : none;
}
.chat-textarea::-webkit-scrollbar { display: none; }
.chat-textarea::placeholder        { color: rgba(62,39,35,0.42); }

.chat-input-toolbar {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
}

.chat-tool-btn {
  width           : 34px;
  height          : 34px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  border          : none;
  background      : transparent;
  color           : var(--clr-muted);
  cursor          : pointer;
  border-radius   : 8px;
  transition      : background-color 0.15s, color 0.15s;
}
.chat-tool-btn:hover {
  background : rgba(199,81,0,0.08);
  color      : var(--clr-primary);
}

.chat-send-btn {
  width           : 44px;
  height          : 44px;
  border-radius   : var(--radius-full);
  background      : var(--clr-primary);
  border          : none;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  cursor          : pointer;
  box-shadow      : 0 4px 6px rgba(199,81,0,0.3);
  transition      : background-color 0.15s, transform 0.1s, box-shadow 0.15s;
  flex-shrink     : 0;
}
.chat-send-btn:hover  { background: var(--clr-primary-dark); box-shadow: 0 6px 10px rgba(199,81,0,0.35); }
.chat-send-btn:active { transform: scale(0.93); }
.chat-send-btn:disabled { background: #ddd; box-shadow: none; cursor: not-allowed; }


/* ── Mobile responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-sidebar {
    position   : fixed;
    inset      : 0 auto 0 0;
    z-index    : 60;
    transform  : translateX(-100%);
    width      : 280px;
    box-shadow : 4px 0 20px rgba(0,0,0,0.12);
  }

  .chat-sidebar.is-open { transform: translateX(0); }

  .chat-sidebar-overlay {
    display    : none;
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,0.35);
    z-index    : 55;
  }
  .chat-sidebar-overlay.is-open { display: block; }

  .chat-header__sidebar-toggle { display: flex; }

  .chat-header { padding: 0 16px; }
  .chat-messages { padding: 16px; }
  .chat-input-wrap { padding: 8px 10px 12px; }
  .chat-bg-selector { padding: 16px; }
}


/* ============================================================
   25. ABOUT PAGE
   ============================================================ */

/* ── Stats row ──────────────────────────────────────────── */
.stat-card {
  background    : #fff;
  border-radius : 1rem;
  box-shadow    : 0 4px 11px rgba(0,0,0,0.12);
  padding       : 2rem;
  text-align    : center;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 0.5rem;
}

.stat-card__num {
  font-family  : var(--font-display);
  font-size    : 3rem;
  font-weight  : 700;
  line-height  : 1;
  color        : var(--clr-primary);
}

.stat-card__label {
  font-family  : var(--font-sans);
  font-size    : 1rem;
  color        : var(--clr-muted);
  font-weight  : 400;
}

/* ── What We Offer cards ────────────────────────────────── */
.offer-card {
  background    : #fff;
  border-radius : 1rem;
  box-shadow    : 0 10px 8px rgba(0,0,0,0.1);
  padding       : 2rem;
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
  gap           : 1rem;
}

.offer-icon {
  width          : 64px;
  height         : 64px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  color          : #fff;
}

.offer-icon--orange {
  background: linear-gradient(135deg, #C75100 0%, #E8703A 100%);
}

.offer-icon--orange-olive {
  background: linear-gradient(135deg, #C96C3B 0%, #6B8E23 100%);
}

.offer-icon--olive {
  background: linear-gradient(135deg, #6B8E23 0%, #4F6A18 100%);
}

.offer-card__title {
  font-family : var(--font-sans);
  font-size   : 1.25rem;
  font-weight : 500;
  color       : var(--clr-brand-dark);
  line-height : 1.3;
}

.offer-card__desc {
  font-family : var(--font-sans);
  font-size   : 1rem;
  font-weight : 400;
  color       : var(--clr-muted);
  line-height : 1.6;
}

/* ── Our Values band ────────────────────────────────────── */
.values-band {
  background    : linear-gradient(90deg, #C75100 0%, #6B8E23 100%);
  border-radius : 1rem;
  padding       : 3rem;
}

.value-col {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  gap            : 0.75rem;
}

.value-col__icon {
  width          : 48px;
  height         : 48px;
  border-radius  : 50%;
  background     : rgba(255,255,255,0.15);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  flex-shrink    : 0;
}

.value-col__title {
  font-family : var(--font-sans);
  font-size   : 1.125rem;
  font-weight : 500;
  color       : #fff;
}

.value-col__desc {
  font-family : var(--font-sans);
  font-size   : 1rem;
  font-weight : 400;
  color       : rgba(255,255,255,0.9);
  line-height : 1.6;
}

/* ── Rect CTA button (non-pill shape) ───────────────────── */
.btn--rect {
  height        : 56px;
  padding-left  : 2rem;
  padding-right : 2rem;
  font-size     : 1rem;
}

/* ── About hero (extends explore-hero) ─────────────────── */
.about-hero {
  min-height   : 360px;
  position     : relative;
  overflow     : hidden;
  display      : flex;
  align-items  : center;
  background   : var(--clr-brand-darker);
}

.about-hero__bg {
  position   : absolute;
  inset      : 0;
  object-fit : cover;
  width      : 100%;
  height     : 100%;
  opacity    : 0.35;
}

.about-hero__overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(to bottom, rgba(44,27,23,0.55), rgba(44,27,23,0.8));
}

.about-hero__content {
  position   : relative;
  z-index    : 2;
  text-align : center;
  width      : 100%;
}

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 768px) {
  .values-band { padding: 2rem 1.5rem; }
  .stat-card__num { font-size: 2.25rem; }
  .offer-card { padding: 1.5rem; }
}

@media (max-width: 640px) {
  /* Keep stat grid as 2x2 on mobile — don't horizontal-scroll */
  .stat-grid {
    display               : grid !important;
    grid-template-columns : 1fr 1fr !important;
    flex-wrap             : unset !important;
    overflow-x            : visible !important;
    scroll-snap-type      : none !important;
    gap                   : 0.75rem !important;
    margin-left           : 0 !important;
    margin-right          : 0 !important;
    padding-left          : 0 !important;
    padding-right         : 0 !important;
    padding-bottom        : 0 !important;
  }
  .stat-grid > * {
    flex      : unset !important;
    max-width : unset !important;
  }
  .stat-card {
    padding : 1rem 0.75rem;
    gap     : 0.2rem;
  }
  .stat-card__num   { font-size: 1.75rem; }
  .stat-card__label { font-size: 0.8rem; }
}


/* ============================================================
   26. QURAN PAGE
   ============================================================ */

/* ── Hero banner (olive gradient) ──────────────────────── */
.quran-hero {
  background    : linear-gradient(170deg, #6b8e23 0%, #8bae3e 100%);
  padding       : 3rem 0;
  text-align    : center;
  color         : #fff;
}

.quran-hero__title {
  font-family  : var(--font-display);
  font-weight  : 700;
  font-size    : clamp(2.25rem, 5vw, 3.5rem);
  line-height  : 1.27;
  margin-bottom: 0.5rem;
}

.quran-hero__subtitle {
  font-family  : var(--font-display);
  font-weight  : 400;
  font-size    : clamp(1rem, 2vw, 1.5rem);
  opacity      : 0.9;
  margin-bottom: 0.75rem;
}

.quran-hero__meta {
  display     : flex;
  align-items : center;
  justify-content: center;
  gap         : 0.5rem;
  font-family : var(--font-display);
  font-size   : 0.875rem;
  opacity     : 0.9;
}

/* ── 3-column reader layout ─────────────────────────────── */
.quran-layout {
  display               : grid;
  grid-template-columns : 300px 1fr 300px;
  align-items           : start;
  min-height            : calc(100vh - 4.5rem);
}

/* ── Left sidebar — Surah list ──────────────────────────── */
.surah-sidebar {
  background  : #fff;
  border-right: 0.8px solid rgba(62,39,35,0.1);
  padding     : 24px 16px 24px 24px;
  height      : calc(100vh - 4.5rem);
  overflow-y  : auto;
  display     : flex;
  flex-direction: column;
  gap         : 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(107,142,35,0.3) transparent;
}

.surah-sidebar::-webkit-scrollbar { width: 4px; }
.surah-sidebar::-webkit-scrollbar-thumb { background: rgba(107,142,35,0.3); border-radius: 4px; }

.surah-sidebar__heading {
  font-family  : var(--font-display);
  font-weight  : 700;
  font-size    : 1.25rem;
  color        : var(--clr-brand-dark);
  line-height  : 1;
  flex-shrink  : 0;
}

.surah-search {
  display     : flex;
  align-items : center;
  gap         : 8px;
  background  : var(--clr-surface-warm);
  border-radius: 26px;
  padding     : 8px 12px;
  flex-shrink : 0;
}

.surah-search input {
  border      : none;
  background  : transparent;
  outline     : none;
  font-family : var(--font-display);
  font-size   : 1rem;
  color       : #836762;
  width       : 100%;
}

.surah-search input::placeholder { color: #836762; }

.surah-list {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  flex          : 1;
}

.surah-item {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  padding        : 14px 16px;
  border-radius  : 1rem;
  cursor         : pointer;
  transition     : background 0.15s;
  text-decoration: none;
}

.surah-item:hover:not(.is-active) { background: rgba(107,142,35,0.07); }

.surah-item.is-active { background: #6b8e23; }

.surah-item__num {
  width          : 40px;
  height         : 40px;
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--font-display);
  font-weight    : 700;
  font-size      : 1rem;
  flex-shrink    : 0;
  transition     : background 0.15s;
}

.surah-item.is-active  .surah-item__num { background: rgba(255,255,255,0.2); color: #fff; }
.surah-item:not(.is-active) .surah-item__num { background: var(--clr-surface-warm); color: #6b8e23; }

.surah-item__info { min-width: 0; }

.surah-item__name {
  font-family   : var(--font-display);
  font-weight   : 600;
  font-size     : 1rem;
  line-height   : 1.5;
  display       : block;
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.surah-item.is-active  .surah-item__name { color: #fff; }
.surah-item:not(.is-active) .surah-item__name { color: var(--clr-brand-dark); }

.surah-item__sub {
  font-family : var(--font-display);
  font-weight : 500;
  font-size   : 0.75rem;
  display     : block;
  line-height : 1.4;
}

.surah-item.is-active  .surah-item__sub { color: rgba(255,255,255,0.8); }
.surah-item:not(.is-active) .surah-item__sub { color: #6b5b52; }

.surah-item__meta {
  font-family : var(--font-display);
  font-weight : 500;
  font-size   : 0.75rem;
  display     : block;
}

.surah-item.is-active  .surah-item__meta { color: rgba(255,255,255,0.7); }
.surah-item:not(.is-active) .surah-item__meta { color: #6b5b52; }

/* ── Center panel ───────────────────────────────────────── */
.quran-panel {
  background    : var(--clr-surface-warm);
  display       : flex;
  flex-direction: column;
  height        : calc(100vh - 4.5rem);
  overflow      : hidden;
}

/* Toolbar — fixed at top of the quran-panel (panel is already fixed-height) */
.quran-toolbar {
  background  : #fff;
  display     : flex;
  align-items : center;
  justify-content: space-between;
  padding     : 12px 16px;
  border-bottom: 0.8px solid rgba(62,39,35,0.06);
  flex-shrink : 0;
  z-index     : 10;
  gap         : 8px;
}

.quran-tool-btn {
  display     : flex;
  align-items : center;
  gap         : 8px;
  background  : var(--clr-surface-warm);
  border      : none;
  border-radius: 100px;
  padding     : 8px 12px;
  font-family : var(--font-display);
  font-weight : 600;
  font-size   : 1rem;
  color       : var(--clr-brand-dark);
  cursor      : pointer;
  white-space : nowrap;
  height      : 44px;
}

.quran-tool-btn:hover { background: #e8ddd4; }

.quran-icon-btn {
  width          : 40px;
  height         : 40px;
  background     : var(--clr-surface-warm);
  border         : none;
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  color          : var(--clr-brand-dark);
}

.quran-icon-btn:hover { background: #e8ddd4; }

.lang-selector {
  display     : flex;
  align-items : center;
  gap         : 8px;
  background  : var(--clr-surface-warm);
  border-radius: 14px;
  padding     : 8px 16px;
  height      : 44px;
}

.lang-selector__label {
  font-family : var(--font-display);
  font-weight : 600;
  font-size   : 0.875rem;
  color       : var(--clr-brand-dark);
  white-space : nowrap;
}

.lang-btn {
  height        : 28px;
  padding       : 0 12px;
  border-radius : 10px;
  font-family   : var(--font-display);
  font-weight   : 600;
  font-size     : 0.875rem;
  border        : none;
  cursor        : pointer;
  transition    : background 0.15s, color 0.15s;
}

.lang-btn--active   { background: var(--clr-primary); color: #fff; }
.lang-btn--inactive { background: transparent; color: #6b5b52; }

/* Bismillah opener */
.quran-opener {
  padding        : 1rem 2rem;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 0.875rem;
  text-align     : center;
  max-width      : 600px;
  margin         : 0 auto;
  width          : 100%;
}

.quran-opener__arabic {
  font-size    : clamp(1.25rem, 2.5vw, 1.625rem);
  line-height  : 1.6;
  color        : var(--clr-brand-dark);
  font-family  : 'Noto Naskh Arabic', 'Scheherazade New', serif;
  direction    : rtl;
}

.quran-opener__trans {
  font-family : var(--font-sans);
  font-size   : 1.125rem;
  line-height : 1.5;
  color       : #6b5b52;
  font-style  : italic;
  max-width   : 420px;
}

/* Verse feed — scrollable inside the fixed-height panel */
.verse-feed {
  padding        : 0 2rem 2rem;
  display        : flex;
  flex-direction : column;
  gap            : 1.5rem;
  max-width      : 600px;
  margin         : 0 auto;
  width          : 100%;
  box-sizing     : border-box;
  flex           : 1;
  overflow-y     : auto;
  min-height     : 0;
}

.verse-card {
  background    : #fff;
  border-radius : 24px;
  box-shadow    : 0 1px 1.5px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1);
  padding       : 2rem;
  display       : flex;
  flex-direction: column;
  gap           : 1.5rem;
}

.verse-card__header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.verse-num {
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  background     : #6b8e23;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--font-display);
  font-weight    : 700;
  font-size      : 0.875rem;
  color          : #fff;
  flex-shrink    : 0;
}

.verse-actions {
  display : flex;
  gap     : 8px;
}

.verse-action-btn {
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  background     : var(--clr-surface-warm);
  border         : none;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  color          : var(--clr-brand-dark);
  transition     : background 0.15s;
}
.verse-action-btn:hover { background: #e8ddd4; }
/* Play/Pause toggle via CSS only — !important overrides inline styles */
.verse-action-btn .v-pause-icon { display: none !important; }
.verse-action-btn .v-play-icon  { display: block !important; }
.verse-action-btn.qap-active .v-play-icon  { display: none !important; }
.verse-action-btn.qap-active .v-pause-icon { display: block !important; }

.verse-arabic {
  font-size   : 1.875rem;
  line-height : 1.7;
  color       : var(--clr-brand-dark);
  text-align  : right;
  direction   : rtl;
  font-family : 'Noto Naskh Arabic', 'Scheherazade New', serif;
  width       : 100%;
}

.verse-translation-wrap {
  border-top : 0.8px solid rgba(62,39,35,0.1);
  padding-top: 1.5rem;
}

.verse-translation {
  font-family : var(--font-sans);
  font-size   : 1.125rem;
  line-height : 1.625;
  color       : var(--clr-brand-dark);
}

/* Quran panel CTA */
.quran-panel-cta {
  padding        : 1.5rem 2rem 2.5rem;
  display        : flex;
  justify-content: center;
  max-width      : 600px;
  margin         : 0 auto;
  width          : 100%;
  box-sizing     : border-box;
}

/* ── Right sidebar — Reflections ────────────────────────── */
.reflection-sidebar {
  background     : #fff;
  border-left    : 0.8px solid rgba(62,39,35,0.1);
  padding        : 24px 24px 24px 16px;
  height         : calc(100vh - 4.5rem);
  overflow-y     : auto;
  display        : flex;
  flex-direction : column;
  gap            : 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(107,142,35,0.3) transparent;
}

.reflection-sidebar::-webkit-scrollbar { width: 4px; }
.reflection-sidebar::-webkit-scrollbar-thumb { background: rgba(107,142,35,0.3); border-radius: 4px; }

.reflection-sidebar__heading {
  font-family   : var(--font-display);
  font-weight   : 700;
  font-size     : 1.25rem;
  color         : var(--clr-brand-dark);
  line-height   : 1;
  flex-shrink   : 0;
}

.tafsir-card {
  background    : var(--clr-surface-warm);
  border-radius : 1rem;
  padding       : 16px;
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.tafsir-card__title {
  font-family : var(--font-display);
  font-weight : 600;
  font-size   : 1rem;
  color       : var(--clr-brand-dark);
  line-height : 1.5;
}

.tafsir-card__text {
  font-family : var(--font-display);
  font-weight : 400;
  font-size   : 0.875rem;
  color       : #6b5b52;
  line-height : 1.625;
}

/* Quran page insight card — scoped to avoid conflict with book.html's .insight-card */
body[data-page="quran"] .insight-card {
  background    : linear-gradient(145deg, #6b8e23 0%, #8bae3e 100%);
  border-radius : 1rem;
  padding       : 16px;
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

body[data-page="quran"] .insight-card__title {
  font-family : var(--font-display);
  font-weight : 600;
  font-size   : 1rem;
  color       : #fff;
}

body[data-page="quran"] .insight-card__text {
  font-family : var(--font-display);
  font-weight : 400;
  font-size   : 0.875rem;
  color       : rgba(255,255,255,0.9);
  line-height : 1.625;
}

.notes-card {
  background    : #fff;
  border-radius : 20px;
  box-shadow    : 0 1px 1.5px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1);
  padding       : 16px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

.notes-card__title {
  font-family : var(--font-display);
  font-weight : 500;
  font-size   : 1.125rem;
  color       : var(--clr-brand-dark);
}

.notes-textarea {
  background    : var(--clr-surface-warm);
  border        : none;
  border-radius : 14px;
  padding       : 12px;
  font-family   : var(--font-display);
  font-size     : 1rem;
  color         : #a7918d;
  width         : 100%;
  min-height    : 96px;
  resize        : none;
  outline       : none;
}

.notes-textarea::placeholder { color: #a7918d; }

.ask-ai-card {
  border        : 0.8px solid rgba(62,39,35,0.1);
  border-radius : 1rem;
  padding       : 16px;
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.ask-ai-card__title {
  font-family : var(--font-display);
  font-weight : 600;
  font-size   : 1rem;
  color       : var(--clr-brand-dark);
}

/* ── Quran floating panels (settings / notes) ─────────── */
.quran-float-panel {
  position     : fixed;
  top          : calc(4.5rem + 56px); /* below sticky toolbar */
  right        : 16px;
  width        : 300px;
  background   : #fff;
  border-radius: 20px;
  box-shadow   : 0 8px 40px rgba(62,39,35,.18), 0 2px 8px rgba(62,39,35,.08);
  border       : 1px solid rgba(62,39,35,.08);
  z-index      : 200;
  overflow     : hidden;
}
.quran-float-panel__header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 16px 20px 14px;
  border-bottom   : 1px solid rgba(62,39,35,.07);
}
.quran-float-panel__title {
  font-family : var(--font-display);
  font-weight : 700;
  font-size   : 0.9375rem;
  color       : var(--clr-brand-dark);
}
.quran-float-panel__close {
  width : 28px; height: 28px; border-radius: 8px;
  background: var(--clr-surface-warm); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-brand-dark);
}
.quran-float-panel__close:hover { background: #e8ddd4; }
.quran-float-panel__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }

.qfp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qfp-label { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--clr-brand-dark); }

.qfp-font-btns { display: flex; gap: 6px; }
.qfp-font-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--clr-surface-warm); border: 1.5px solid transparent; cursor: pointer; color: var(--clr-brand-dark);
  transition: all .15s;
}
.qfp-font-btn.is-active { background: rgba(199,81,0,.10); border-color: rgba(199,81,0,.30); color: #c75100; }

.qfp-size-ctrl { display: flex; align-items: center; gap: 10px; }
.qfp-size-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(62,39,35,.14);
  background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; color: #3e2723;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.qfp-size-btn:hover { border-color: #c75100; color: #c75100; }
.qfp-size-val { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--clr-brand-dark); min-width: 24px; text-align: center; }

.qfp-toggle {
  width: 44px; height: 24px; border-radius: 12px; border: none; cursor: pointer;
  background: rgba(62,39,35,.15); position: relative; transition: background .2s; padding: 0;
}
.qfp-toggle[aria-pressed="true"] { background: #6b8e23; }
.qfp-toggle__knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.qfp-toggle[aria-pressed="true"] .qfp-toggle__knob { left: 23px; }

.qfp-textarea {
  width: 100%; border: 1.5px solid rgba(62,39,35,.12); border-radius: 14px;
  padding: 12px 14px; font-family: var(--font-sans); font-size: 0.875rem;
  line-height: 1.65; color: var(--clr-brand-dark); background: var(--clr-surface-warm);
  resize: vertical; outline: none; min-height: 160px;
}
.qfp-textarea:focus { border-color: rgba(107,142,35,.50); background: #fff; }

/* Dark mode */
html.dark .quran-float-panel {
  background: rgba(42,22,12,.97) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.40) !important;
}
html.dark .quran-float-panel__title { color: #F0E6DC !important; }
html.dark .quran-float-panel__close { background: rgba(255,255,255,.08) !important; color: #F0E6DC !important; }
html.dark .qfp-label { color: #F0E6DC !important; }
html.dark .qfp-font-btn { background: rgba(255,255,255,.07) !important; color: #D4C5B8 !important; }
html.dark .qfp-font-btn.is-active { background: rgba(199,81,0,.18) !important; color: #E8703A !important; border-color: rgba(199,81,0,.40) !important; }
html.dark .qfp-size-btn { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.15) !important; color: #D4C5B8 !important; }
html.dark .qfp-size-val { color: #F0E6DC !important; }
html.dark .qfp-textarea { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #F0E6DC !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .quran-layout { grid-template-columns: 260px 1fr 260px; }
}

@media (max-width: 1024px) {
  .quran-layout { grid-template-columns: 260px 1fr; }
  .reflection-sidebar { display: none; }
}

@media (max-width: 768px) {
  /* Single column layout — force all children to fit viewport */
  .quran-layout {
    grid-template-columns : 1fr;
    width                 : 100%;
    overflow-x            : hidden;
  }
  .surah-sidebar,
  .quran-panel { min-width: 0; width: 100%; }

  /* ── Hero: compact on mobile ── */
  .quran-hero { padding: 1.5rem 0; }

  /* ── Surah sidebar → horizontal scroll strip ── */
  .surah-sidebar {
    position        : static;
    height          : auto;
    max-height      : none;
    border-right    : none;
    border-bottom   : 1px solid rgba(62,39,35,0.1);
    padding         : 10px 0 8px;
    gap             : 6px;
    overflow        : hidden;
    background      : #fff;
  }

  .surah-sidebar__heading {
    padding    : 0 var(--container-px-sm);
    font-size  : 0.85rem;
    margin-bottom: 2px;
  }

  /* Hide search on mobile — saves vertical space */
  .surah-search { display: none; }

  /* Horizontal scroll list */
  .surah-list {
    flex-direction             : row !important;
    flex-wrap                  : nowrap !important;
    overflow-x                 : auto !important;
    overflow-y                 : visible;
    -webkit-overflow-scrolling : touch;
    scrollbar-width            : none;
    gap                        : 6px;
    padding                    : 2px var(--container-px-sm) 6px;
    flex                       : none;
  }
  .surah-list::-webkit-scrollbar { display: none; }

  /* Compact vertical pill: number above, name below */
  .surah-item {
    flex-direction : column !important;
    align-items    : center !important;
    flex           : 0 0 auto !important;
    padding        : 8px 10px !important;
    gap            : 3px !important;
    min-width      : 64px;
    border-radius  : 12px;
  }

  .surah-item__num {
    width         : 30px !important;
    height        : 30px !important;
    font-size     : 0.78rem !important;
    border-radius : 8px !important;
  }

  .surah-item__info { text-align: center; }
  .surah-item__name { font-size: 0.68rem !important; white-space: nowrap !important; }

  /* Hide secondary meta on mobile pills */
  .surah-item__sub,
  .surah-item__meta { display: none !important; }

  /* ── Panel: on mobile, body scrolls — no fixed height ── */
  .quran-panel {
    height    : auto !important;
    overflow  : visible !important;
    min-height: 70vh;
  }
  .verse-feed {
    overflow-y : visible !important;
    flex       : 1 1 auto !important;
    min-height : auto !important;
  }

  /* ── Toolbar: sticky below navbar, single row ── */
  .quran-toolbar {
    position        : sticky !important;
    top             : 64px !important;
    z-index         : 8;
    flex-wrap       : nowrap;
    padding         : 8px var(--container-px-sm);
    gap             : 6px;
    box-shadow      : 0 2px 8px rgba(0,0,0,0.06);
    justify-content : flex-start;
  }
  /* Hide "Translation:" text label — ES/PT are self-explanatory */
  .lang-selector__label { display: none; }
  .lang-selector { gap: 4px; padding: 6px 10px; height: auto; }
  /* Force inner groups to single row */
  .quran-toolbar > div { flex-wrap: nowrap !important; }
  /* Push icon buttons to the right */
  .quran-toolbar > div:last-child { margin-left: auto; flex-shrink: 0; }

  /* ── Panel content padding ── */
  .quran-opener,
  .verse-feed,
  .quran-panel-cta { padding-left: var(--container-px-sm); padding-right: var(--container-px-sm); }

  /* Bismillah opener */
  .quran-opener__arabic { font-size: 1.8rem; }

  /* ── Verse cards ── */
  .verse-arabic { font-size: 1.6rem !important; line-height: 2.1 !important; }

  /* Verse actions: comfortable touch targets */
  .verse-action-btn { width: 36px; height: 36px; }
}


/* ═══════════════════════════════════════════════════════════════
   § 27  LISTEN PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────── */
.listen-hero {
  position   : relative;
  min-height : 460px;
  display    : flex;
  align-items: center;
  overflow   : hidden;
}

.listen-hero__bg {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  z-index   : 0;
}

.listen-hero__overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(20, 8, 4, 0.83);
  z-index   : 1;
}

.listen-hero__inner {
  position       : relative;
  z-index        : 2;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  padding        : 3.5rem 1rem 4rem;
  width          : 100%;
}

.live-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : #c75100;
  animation    : pulse-live 1.5s ease-in-out infinite;
  flex-shrink  : 0;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.75); }
}

/* Glassmorphism player card */
.hero-player {
  background         : rgba(255,255,255,0.1);
  backdrop-filter    : blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border             : 1px solid rgba(255,255,255,0.18);
  border-radius      : 24px;
  padding            : 1.75rem 2rem;
  display            : flex;
  flex-direction     : column;
  gap                : 1.25rem;
  max-width          : 540px;
  width              : 100%;
}

.hero-player__header {
  display    : flex;
  align-items: center;
  gap        : 14px;
}

.hero-player__icon {
  width          : 48px;
  height         : 48px;
  border-radius  : 12px;
  background     : #c75100;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  flex-shrink    : 0;
}

.hero-player__header-info {
  display        : flex;
  flex-direction : column;
  gap            : 4px;
  min-width      : 0;
}

.hero-player__live-badge {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  background     : #c75100;
  color          : #fff;
  font-family    : var(--font-display);
  font-weight    : 700;
  font-size      : 0.6875rem;
  letter-spacing : 0.1em;
  padding        : 3px 8px;
  border-radius  : 5px;
  text-transform : uppercase;
}

.hero-player__time {
  font-family : var(--font-display);
  font-size   : 0.8125rem;
  font-weight : 500;
  color       : rgba(255,255,255,0.55);
}

.hero-player__title {
  font-family : var(--font-display);
  font-weight : 700;
  font-size   : 1.25rem;
  color       : #fff;
  line-height : 1.2;
}

.hero-player__host {
  font-family : var(--font-sans);
  font-size   : 0.875rem;
  color       : rgba(255,255,255,0.55);
}

/* Waveform */
.waveform {
  display    : flex;
  align-items: center;
  gap        : 3px;
  height     : 36px;
}

.waveform__bar {
  width        : 4px;
  border-radius: 2px;
  background   : #c75100;
  transform-origin: bottom;
  animation    : waveform-anim var(--dur, 0.8s) ease-in-out infinite alternate;
  height       : calc(var(--h, 50) * 1%);
}

@keyframes waveform-anim {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* Progress */
.audio-progress { display: flex; flex-direction: column; gap: 8px; }

.audio-progress__track {
  width        : 100%;
  height       : 4px;
  border-radius: 2px;
  background   : rgba(199,81,0,0.25);
}

.audio-progress__fill {
  height       : 100%;
  border-radius: 2px;
  background   : #c75100;
}

.audio-progress__times {
  display        : flex;
  justify-content: space-between;
  font-family    : var(--font-display);
  font-size      : 0.75rem;
  color          : rgba(255,255,255,0.45);
}

/* Controls */
.player-controls {
  display    : flex;
  align-items: center;
  justify-content: center;
  gap        : 1rem;
}

.player-btn {
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  border         : none;
  background     : rgba(255,255,255,0.1);
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  transition     : background 0.15s;
}

.player-btn:hover     { background: rgba(255,255,255,0.2); }

.player-btn--play {
  width     : 52px;
  height    : 52px;
  background: #c75100;
}

.player-btn--play:hover { background: #a34200; }

/* ── Today's Schedule ──────────────────────────────────────── */
.schedule-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 1rem;
}

.schedule-card {
  background     : #fff;
  border-radius  : 28px;
  padding        : 1.5rem;
  display        : flex;
  flex-direction : column;
  gap            : 0.625rem;
  box-shadow     : 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  position       : relative;
}

.schedule-card__time {
  font-family : var(--font-display);
  font-weight : 700;
  font-size   : 0.875rem;
  color       : #c75100;
}

.schedule-card__live-badge {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  background     : #c75100;
  color          : #fff;
  font-family    : var(--font-display);
  font-weight    : 700;
  font-size      : 0.6875rem;
  letter-spacing : 0.06em;
  padding        : 3px 8px;
  border-radius  : 6px;
  text-transform : uppercase;
  align-self     : flex-start;
}

.schedule-card__title {
  font-family : var(--font-display);
  font-weight : 700;
  font-size   : 1rem;
  color       : var(--clr-brand-dark);
  line-height : 1.35;
}

.schedule-card__host {
  font-family : var(--font-sans);
  font-size   : 0.8125rem;
  color       : var(--clr-muted);
  display     : flex;
  align-items : center;
  gap         : 6px;
  margin-top  : 0.25rem;
}

/* ── Continue Listening ────────────────────────────────────── */
.continue-card {
  background     : #fff;
  border-radius  : 16px;
  padding        : 14px;
  display        : flex;
  flex-direction : column;
  gap            : 12px;
  box-shadow     : 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
}

.continue-card__top {
  display    : flex;
  align-items: flex-start;
  gap        : 12px;
}

.continue-card__thumb {
  width        : 72px;
  height       : 72px;
  border-radius: 12px;
  object-fit   : cover;
  flex-shrink  : 0;
  display      : block;
}

.continue-card__info {
  flex           : 1;
  min-width      : 0;
  display        : flex;
  flex-direction : column;
  gap            : 4px;
}

.continue-card__title {
  font-family : var(--font-display);
  font-weight : 700;
  font-size   : 0.9375rem;
  color       : var(--clr-brand-dark);
  line-height : 1.3;
}

.continue-card__meta {
  font-family : var(--font-sans);
  font-size   : 0.8125rem;
  color       : var(--clr-muted);
}

.continue-card__remaining {
  font-family : var(--font-sans);
  font-size   : 0.8125rem;
  color       : #c75100;
  font-weight : 500;
}

.continue-card__progress-wrap {
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.continue-card__progress-track {
  flex         : 1;
  height       : 3px;
  border-radius: 2px;
  background   : rgba(199,81,0,0.18);
}

.continue-card__progress-fill {
  height       : 100%;
  border-radius: 2px;
  background   : #c75100;
}

.continue-card__play {
  width          : 32px;
  height         : 32px;
  border-radius  : 50%;
  border         : none;
  background     : #c75100;
  color          : #fff;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  flex-shrink    : 0;
  transition     : background 0.15s;
}

.continue-card__play:hover { background: #a34200; }

/* ── Fixed bottom player ─────────────────────────────────────── */
.fixed-player {
  position   : fixed;
  bottom     : 0;
  left       : 0;
  right      : 0;
  z-index    : 100;
  background : var(--clr-brand-dark);
  border-top : 1px solid rgba(255,255,255,0.08);
  display    : flex;
  align-items: center;
  padding    : 0 1.5rem;
  height     : 68px;
  gap        : 1.25rem;
}

.fixed-player__track {
  display    : flex;
  align-items: center;
  gap        : 12px;
  flex       : 1;
  min-width  : 0;
}

.fixed-player__thumb {
  width        : 44px;
  height       : 44px;
  border-radius: 10px;
  object-fit   : cover;
  flex-shrink  : 0;
}

.fixed-player__info { min-width: 0; }

.fixed-player__title {
  font-family   : var(--font-display);
  font-weight   : 600;
  font-size     : 0.875rem;
  color         : #fff;
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.fixed-player__host {
  font-family: var(--font-sans);
  font-size  : 0.75rem;
  color      : rgba(255,255,255,0.45);
}

.fixed-player__wave {
  display    : flex;
  align-items: center;
  gap        : 2px;
  height     : 28px;
}

.fixed-player__wave .waveform__bar { width: 3px; }

.fixed-player__play {
  width          : 44px;
  height         : 44px;
  border-radius  : 50%;
  background     : #c75100;
  border         : none;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  cursor         : pointer;
  flex-shrink    : 0;
  transition     : background 0.15s;
}

.fixed-player__play:hover { background: #a34200; }

/* push footer clear of fixed player */
body.has-fixed-player { padding-bottom: 68px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .schedule-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .schedule-grid { grid-template-columns: 1fr; }
  .fixed-player__wave { display: none; }
  .hero-player { padding: 1.25rem; gap: 1rem; }
}


/* ─────────────────────────────────────────────────────────────
   28. START HERE PAGE
───────────────────────────────────────────────────────────── */

/* ── Journey Dashboard Cards ────────────────────────────────── */
.journey-card {
  background    : #fff;
  border        : 1px solid rgba(199,81,0,0.1);
  border-radius : 24px;
  padding       : 28px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  box-shadow    : 0 8px 32px rgba(62,39,35,0.06);
}

.journey-card__icon {
  width           : 50px;
  height          : 50px;
  border-radius   : 50%;
  background      : linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  flex-shrink     : 0;
  font-size       : 1.25rem;
  margin-bottom   : 4px;
}

.journey-card__icon--orange { background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%); }
.journey-card__icon--olive  { background: linear-gradient(135deg, #6b8e23 0%, #4f6a18 100%); }

.journey-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size  : 1rem;
  color      : var(--clr-brand-dark);
}

.journey-card__desc {
  font-size  : 0.8125rem;
  line-height: 1.5;
  color      : rgba(62,39,35,0.6);
  flex       : 1;
}

.journey-card__progress-track {
  height       : 4px;
  border-radius: 2px;
  background   : rgba(199,81,0,0.1);
  overflow     : hidden;
}

.journey-card__progress-fill {
  height       : 100%;
  border-radius: 2px;
  background   : linear-gradient(to right, #c75100, #c96c3b);
}

.journey-card__footer {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding-top     : 6px;
}

.journey-card__badge {
  display      : inline-flex;
  align-items  : center;
  padding      : 3px 12px;
  border-radius: 50px;
  font-size    : 0.6875rem;
  font-weight  : 600;
}
.journey-card__badge--orange { background: rgba(199,81,0,0.08); color: #c75100; }
.journey-card__badge--olive  { background: rgba(107,142,35,0.1); color: #6b8e23; }

.journey-card__action {
  font-size      : 0.75rem;
  font-weight    : 500;
  color          : #6b8e23;
  text-decoration: none;
}


/* ── Q&A Items ───────────────────────────────────────────────── */
.qa-item {
  background      : #fff;
  border          : 1px solid rgba(199,81,0,0.1);
  border-radius   : 20px;
  padding         : 22px 24px;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 12px;
  box-shadow      : 0 4px 24px rgba(62,39,35,0.06);
  cursor          : pointer;
  transition      : border-color 0.2s;
}
.qa-item:hover { border-color: rgba(199,81,0,0.25); }

.qa-item__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size  : 0.9375rem;
  color      : var(--clr-brand-dark);
  flex       : 1;
}

.qa-item__tag {
  display      : inline-flex;
  align-items  : center;
  padding      : 3px 10px;
  border-radius: 50px;
  font-size    : 0.6875rem;
  font-weight  : 600;
  margin-left  : 10px;
  white-space  : nowrap;
}
.qa-item__tag--orange { background: rgba(199,81,0,0.08); color: #c75100; }
.qa-item__tag--olive  { background: rgba(107,142,35,0.1); color: #6b8e23; }

.qa-item__toggle {
  width           : 32px;
  height          : 32px;
  border-radius   : 16px;
  background      : rgba(199,81,0,0.08);
  border          : none;
  color           : #c75100;
  font-size       : 1.25rem;
  display         : flex;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
  flex-shrink     : 0;
  line-height     : 1;
}

/* ── AI Ask Card ────────────────────────────────────────────── */
.qa-ask {
  background    : linear-gradient(145deg, #3E2723 0%, #5D4037 100%);
  border-radius : 28px;
  padding       : 32px;
  display       : flex;
  flex-direction: column;
  gap           : 14px;
  box-shadow    : 0 24px 32px rgba(62,39,35,0.3);
  height        : 100%;
}

.qa-ask__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size  : 1.1rem;
  color      : #fff;
}

.qa-ask__desc {
  font-size  : 0.8125rem;
  line-height: 1.6;
  color      : rgba(255,255,255,0.7);
}

.qa-ask__input {
  background   : rgba(255,255,255,0.08);
  border       : 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding      : 16px;
  color        : rgba(255,255,255,0.4);
  font-size    : 0.85rem;
  font-family  : var(--font-sans);
  width        : 100%;
}

.qa-ask__label {
  font-size     : 0.7rem;
  font-weight   : 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.5);
  margin-bottom : 8px;
}

.qa-ask__pill {
  background   : rgba(255,255,255,0.08);
  border-radius: 10px;
  padding      : 8px 12px;
  font-size    : 0.78rem;
  color        : #fff;
  cursor       : pointer;
  transition   : background 0.15s;
}
.qa-ask__pill:hover { background: rgba(255,255,255,0.13); }


/* ── Story Cards ─────────────────────────────────────────────── */
.story-hero-card {
  position            : relative;
  border-radius       : 28px;
  overflow            : hidden;
  min-height          : 480px;
  display             : flex;
  flex-direction      : column;
  justify-content     : flex-end;
  background-size     : cover !important;
  background-position : center !important;
  background-repeat   : no-repeat !important;
}

.story-hero-card__overlay {
  position  : absolute;
  inset     : 0;
  /* Gradient overlay — dark at bottom, transparent at top */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.50) 40%,
    rgba(0,0,0,0.15) 70%,
    transparent      100%
  );
  z-index   : 1;
}

.story-hero-card__body {
  position: relative;
  z-index : 2;
  padding : 40px;
  display : flex;
  flex-direction: column;
  gap     : 12px;
  /* No solid background — the gradient overlay handles it */
}

.story-tile {
  background   : rgba(255,255,255,0.06);
  border       : 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding      : 20px 24px;
  display      : flex;
  gap          : 12px;
  align-items  : flex-start;
  transition   : background 0.2s;
}
.story-tile:hover { background: rgba(255,255,255,0.09); }

.story-tile__icon {
  width      : 40px;
  height     : 40px;
  font-size  : 1.5rem;
  flex-shrink: 0;
  line-height: 40px;
  text-align : center;
}

.story-tile__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size  : 0.875rem;
  color      : #fff;
}

.story-tile__quote {
  font-size  : 0.78rem;
  line-height: 1.5;
  color      : rgba(255,255,255,0.75);
  margin-top : 3px;
}


/* ── Mentor Cards ────────────────────────────────────────────── */
.mentor-card {
  background    : linear-gradient(131deg, #fff7ed 0%, #fff 100%);
  border-radius : 16px;
  padding       : 24px;
  display       : flex;
  flex-direction: column;
  gap           : 14px;
  box-shadow    : 0 1px 3px rgba(0,0,0,0.1);
}

.mentor-card__header {
  display    : flex;
  align-items: center;
  gap        : 16px;
}

.mentor-card__avatar {
  width        : 64px;
  height       : 64px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}

.mentor-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size  : 1rem;
  color      : #0a0a0a;
}

.mentor-card__rating {
  font-size  : 0.875rem;
  color      : #4a5565;
  display    : flex;
  align-items: center;
  gap        : 4px;
  margin-top : 2px;
}

.mentor-card__langs {
  display  : flex;
  flex-wrap: wrap;
  gap      : 5px;
}

.mentor-card__lang {
  background   : rgba(199,81,0,0.08);
  color        : #c75100;
  border-radius: 50px;
  padding      : 4px 11px;
  font-size    : 0.75rem;
  font-weight  : 500;
}

.mentor-card__specialty { font-size: 0.875rem; color: #364153; }
.mentor-card__specialty strong { font-weight: 600; }
.mentor-card__response  { font-size: 0.875rem; color: #008236; }
.mentor-card__response  strong { font-weight: 600; }

.mentor-card__bio {
  font-size  : 0.8375rem;
  line-height: 1.6;
  color      : #6d4c41;
  flex       : 1;
}


/* ── Event Items ─────────────────────────────────────────────── */
.event-item {
  background   : #fff;
  border       : 1px solid rgba(199,81,0,0.1);
  border-radius: 24px;
  padding      : 24px;
  display      : flex;
  align-items  : center;
  gap          : 20px;
  box-shadow   : 0 8px 16px rgba(62,39,35,0.06);
}

.event-item__date {
  background   : linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
  border-radius: 16px;
  padding      : 12px 16px;
  text-align   : center;
  flex-shrink  : 0;
  min-width    : 60px;
}

.event-item__day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size  : 1.75rem;
  color      : #fff;
  line-height: 1;
}

.event-item__month {
  font-size     : 0.65rem;
  font-weight   : 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.85);
  margin-top    : 2px;
}

.event-item__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size  : 1rem;
  color      : var(--clr-brand-dark);
}

.event-item__time {
  font-size : 0.8rem;
  color     : rgba(62,39,35,0.6);
  margin-top: 4px;
}

.event-item__tags {
  display   : flex;
  flex-wrap : wrap;
  gap       : 5px;
  margin-top: 8px;
}

.event-item__tag {
  background   : rgba(107,142,35,0.1);
  color        : #6b8e23;
  border-radius: 50px;
  padding      : 3px 12px;
  font-size    : 0.6875rem;
  font-weight  : 600;
}


/* ── Daily Peace / Reflection Card ──────────────────────────── */
.reflection-card {
  background     : rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border         : 1px solid rgba(255,255,255,0.15);
  border-radius  : 32px;
  padding        : 48px;
  max-width      : 720px;
  width          : 100%;
  margin-inline  : auto;
  display        : flex;
  flex-direction : column;
  gap            : 16px;
  align-items    : center;
  text-align     : center;
}

.reflection-card__arabic {
  font-size  : 2rem;
  line-height: 1.8;
  color      : #fff;
  direction  : rtl;
  opacity    : 0.9;
}

.reflection-card__translation {
  font-style : italic;
  font-size  : 1.05rem;
  line-height: 1.7;
  color      : rgba(255,255,255,0.8);
}

.reflection-card__ref {
  font-size     : 0.8rem;
  font-weight   : 600;
  letter-spacing: 0.03em;
  color         : rgba(255,255,255,0.5);
  padding-bottom: 16px;
}

.reflection-card__player {
  background   : rgba(255,255,255,0.1);
  border-radius: 16px;
  padding      : 16px 24px;
  display      : flex;
  align-items  : center;
  gap          : 16px;
  width        : 100%;
  text-align   : left;
}

.reflection-card__play-btn {
  width           : 56px;
  height          : 56px;
  border-radius   : 50%;
  background      : #c75100;
  border          : none;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  cursor          : pointer;
  flex-shrink     : 0;
}


/* ── Radio Tracks ────────────────────────────────────────────── */
.radio-track {
  border       : 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding      : 18px 20px;
  display      : flex;
  align-items  : center;
  gap          : 16px;
  transition   : background 0.2s;
}
.radio-track--live    { background: rgba(199,81,0,0.15); border-color: rgba(199,81,0,0.3); }
.radio-track--regular { background: rgba(255,255,255,0.06); }
.radio-track--regular:hover { background: rgba(255,255,255,0.09); }

.radio-track__icon {
  width           : 56px;
  height          : 56px;
  border-radius   : 12px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  flex-shrink     : 0;
  font-size       : 1.25rem;
}

.radio-track__info {
  flex    : 1;
  min-width: 0;
}

.radio-track__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size  : 0.9rem;
  color      : #fff;
}

.radio-track__desc {
  font-size  : 0.75rem;
  color      : rgba(255,255,255,0.6);
  margin-top : 3px;
}

.radio-track__duration {
  font-size  : 0.75rem;
  color      : rgba(255,255,255,0.5);
  white-space: nowrap;
}

.radio-track__play {
  width           : 36px;
  height          : 36px;
  border-radius   : 18px;
  background      : #c75100;
  border          : none;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  cursor          : pointer;
  flex-shrink     : 0;
  transition      : background 0.15s;
}
.radio-track__play:hover { background: #a34200; }

/* ── Live Now Player ─────────────────────────────────────────── */
.radio-now {
  background    : linear-gradient(137deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border        : 1px solid rgba(255,255,255,0.12);
  border-radius : 28px;
  padding       : 32px;
  display       : flex;
  flex-direction: column;
  justify-content: space-between;
  gap           : 20px;
  height        : 100%;
}

.radio-now__waveform {
  display         : flex;
  align-items     : flex-end;
  gap             : 3px;
  height          : 60px;
  justify-content : center;
}

.radio-now__bar {
  width        : 4px;
  border-radius: 2px;
  background   : linear-gradient(to top, #c75100, #c96c3b);
  animation    : waveform-anim 1.2s ease-in-out infinite alternate;
}

.radio-now__controls {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 20px;
}

.radio-now__btn {
  width           : 44px;
  height          : 44px;
  border-radius   : 50%;
  background      : rgba(255,255,255,0.1);
  border          : none;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #fff;
  cursor          : pointer;
  transition      : background 0.15s;
}
.radio-now__btn:hover { background: rgba(255,255,255,0.18); }

.radio-now__btn--play {
  width    : 56px;
  height   : 56px;
  background: #c75100;
}
.radio-now__btn--play:hover { background: #a34200; }


/* ── Responsive ─ Start Here ──────────────────────────────────── */
@media (max-width: 1024px) {
  .reflection-card { padding: 2.5rem 2rem; }
}
@media (max-width: 640px) {
  .journey-card { padding: 20px; }
  .story-hero-card { min-height: 320px; }
  .story-hero-card__body { padding: 24px; }
  .reflection-card { padding: 2rem 1.5rem; }
  .reflection-card__arabic { font-size: 1.5rem; }
}


/* ============================================================
   29. START HERE — ADDITIONAL LAYOUT CLASSES
   ============================================================ */

/* ── Ghost-white button (for dark backgrounds) ────────────── */
.btn--ghost-white {
  background-color: transparent;
  color           : #fff;
  border-color    : rgba(255,255,255,0.5);
}
.btn--ghost-white:hover {
  background-color: rgba(255,255,255,0.12);
  border-color    : rgba(255,255,255,0.8);
}

/* ── Outline button ───────────────────────────────────────── */
.btn--outline {
  background-color: transparent;
  color           : var(--clr-primary);
  border-color    : var(--clr-primary);
}
.btn--outline:hover {
  background-color: rgba(199,81,0,0.06);
}

/* ── Hero: Start Here ─────────────────────────────────────── */
.start-hero {
  position        : relative;
  overflow        : hidden;
  padding         : 100px 0 80px;
  text-align      : center;
}

.start-hero__bg {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(138deg, #1a0e0a 0%, #3e2723 40%, #c75100 100%);
  z-index    : 0;
}

.start-hero__content {
  position        : relative;
  z-index         : 1;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : 1.5rem;
}

.start-hero__badges {
  display         : flex;
  flex-wrap       : wrap;
  gap             : 10px;
  justify-content : center;
}

.start-hero__badge {
  display         : inline-flex;
  align-items     : center;
  gap             : 7px;
  padding         : 8px 18px;
  border-radius   : var(--radius-full);
  background      : rgba(255,255,255,0.1);
  backdrop-filter : blur(8px);
  border          : 1px solid rgba(255,255,255,0.15);
  color           : rgba(255,255,255,0.85);
  font-size       : 0.82rem;
  font-weight     : 500;
}

.start-hero__title {
  font-family  : var(--font-display);
  font-size    : clamp(2rem, 5vw, 3.5rem);
  font-weight  : 800;
  line-height  : 1.1;
  letter-spacing: -0.02em;
  color        : #fff;
  max-width    : 700px;
}

.start-hero__desc {
  font-size   : 1.05rem;
  line-height : 1.7;
  color       : rgba(255,255,255,0.65);
  max-width   : 520px;
}

.start-hero__actions {
  display         : flex;
  flex-wrap       : wrap;
  gap             : 12px;
  justify-content : center;
  margin-top      : 0.5rem;
}

/* ── Journey grid ─────────────────────────────────────────── */
.journey-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 20px;
}
@media (max-width: 1024px) { .journey-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .journey-grid { grid-template-columns: 1fr; } }

/* ── Q&A layout ───────────────────────────────────────────── */
.qa-layout {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 40px;
  align-items           : start;
}
@media (max-width: 768px) { .qa-layout { grid-template-columns: 1fr; } }

.qa-list {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
}

.qa-ask__input-wrap {
  display : flex;
  gap     : 8px;
  margin  : 1rem 0;
}

/* ── Stories layout ───────────────────────────────────────── */
.stories-layout {
  display               : grid;
  grid-template-columns : 1.4fr 1fr;
  gap                   : 28px;
  align-items           : stretch;
}
@media (max-width: 900px) { .stories-layout { grid-template-columns: 1fr; } }

.story-hero-card__title {
  font-family  : var(--font-display);
  font-size    : 1.5rem;
  font-weight  : 700;
  color        : #fff;
  margin-bottom: 0.6rem;
  line-height  : 1.25;
}

.story-hero-card__excerpt {
  font-size  : 0.9rem;
  color      : rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-style : italic;
}

.story-hero-card__author {
  display    : flex;
  align-items: center;
  gap        : 12px;
}

.story-hero-card__avatar {
  width        : 42px;
  height       : 42px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 2px solid rgba(255,255,255,0.3);
}

.story-hero-card__name {
  font-weight : 600;
  font-size   : 0.9rem;
  color       : #fff;
}

.story-hero-card__location {
  font-size : 0.78rem;
  color     : rgba(255,255,255,0.55);
}

.story-tiles {
  display        : flex;
  flex-direction : column;
  gap            : 14px;
  justify-content: space-between;
}

/* ── Mentors grid ─────────────────────────────────────────── */
.mentors-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 24px;
  margin-bottom         : 40px;
}
@media (max-width: 900px)  { .mentors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  {
  .mentors-grid {
    display               : flex;
    flex-direction        : row;
    overflow-x            : auto;
    scroll-snap-type      : x mandatory;
    -webkit-overflow-scrolling: touch;
    grid-template-columns : unset;
    gap                   : 16px;
    padding-bottom        : 12px;
  }
  .mentors-grid > * {
    flex               : 0 0 82vw;
    max-width          : 320px;
    scroll-snap-align  : start;
  }
  /* hide scrollbar visually */
  .mentors-grid::-webkit-scrollbar { display: none; }
  .mentors-grid { scrollbar-width: none; }
}

/* ── Events list ──────────────────────────────────────────── */
.events-list {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
}

.event-item__info {
  flex   : 1;
  display: flex;
  flex-direction: column;
  gap    : 6px;
}

/* ── Reflection: actions row ──────────────────────────────── */
.reflection-card__actions {
  display         : flex;
  justify-content : center;
  gap             : 12px;
  margin-top      : 0.5rem;
}

/* ── Radio layout ─────────────────────────────────────────── */
.radio-layout {
  display               : grid;
  grid-template-columns : 1fr 340px;
  gap                   : 32px;
  align-items           : start;
}
@media (max-width: 900px) { .radio-layout { grid-template-columns: 1fr; } }

.radio-tracks {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
}

.radio-track__live-badge {
  display         : inline-flex;
  align-items     : center;
  font-size       : 0.62rem;
  font-weight     : 700;
  letter-spacing  : 0.08em;
  color           : #fff;
  background      : #c75100;
  padding         : 2px 7px;
  border-radius   : 4px;
  vertical-align  : middle;
  margin-left     : 6px;
}

/* ── Footer — mobile layout ───────────────────────────────── */
@media (max-width: 767px) {
  /* Remove any accidental scroll on footer grid */
  footer .grid {
    overflow-x: visible !important;
    flex-wrap : wrap !important;
  }

  /* Stack: Brand full-width → Explore + Resources side-by-side → Social full-width */
  footer .grid.md\:grid-cols-2,
  footer [class*="lg:grid-cols-[1.8fr"] {
    display               : grid !important;
    grid-template-columns : 1fr 1fr !important;
    gap                   : 2rem 1.5rem !important;
  }

  /* Brand column (first child) — full width */
  footer .grid > div:first-child {
    grid-column : 1 / -1;
  }

  /* Social / Follow Us column (last child) — full width */
  footer .grid > div:last-child {
    grid-column : 1 / -1;
  }

  /* Email input row inside brand: stack on very small screens */
  footer .flex.gap-2 {
    flex-wrap : wrap;
  }
  footer .flex.gap-2 input {
    min-width : 0;
    flex      : 1 1 140px;
  }

  /* Bottom bar: center everything */
  footer .pt-5.flex {
    flex-direction : column !important;
    align-items    : center !important;
    text-align     : center;
    gap            : 0.5rem;
  }
  footer .pt-5 p {
    white-space : normal;
    text-align  : center;
  }
}


/* ─────────────────────────────────────────────────────────────
   INTERACTIVE FEATURES
   1. Quran Play Button — playing state
   2. Bookmark / Heart toggle — orange saved state
   3. Share Modal / Lightbox
───────────────────────────────────────────────────────────── */

/* ── 1. Quran Play Button — Playing State ───────────────────── */
.quran-tool-btn.is-playing {
  background    : var(--clr-primary);
  color         : #fff;
  border-color  : transparent;
}
.quran-tool-btn.is-playing svg {
  stroke : #fff;
}

/* Equalizer bars animation (shown when playing) */
.play-eq {
  display     : inline-flex;
  align-items : flex-end;
  gap         : 2px;
  height      : 18px;
  flex-shrink : 0;
}
.play-eq span {
  display       : block;
  width         : 3px;
  background    : #fff;
  border-radius : 2px;
  animation     : eqBounce 0.7s ease-in-out infinite alternate;
}
.play-eq span:nth-child(1) { animation-delay: 0s;    height: 8px; }
.play-eq span:nth-child(2) { animation-delay: 0.18s; height: 14px; }
.play-eq span:nth-child(3) { animation-delay: 0.35s; height: 10px; }
@keyframes eqBounce {
  0%   { transform: scaleY(0.4); }
  100% { transform: scaleY(1.0); }
}


/* ── 2. Bookmark / Heart / Save — Saved (Orange) State ──────── */
/* Works for verse-action-btn, [data-save], and any generic save button */
.verse-action-btn.is-saved,
[data-save].is-saved,
.save-btn.is-saved,
.heart-btn.is-saved {
  color : var(--clr-primary) !important;
}
/* SVG icons that use fill="none" + stroke get filled orange */
.verse-action-btn.is-saved svg path,
[data-save].is-saved svg path,
.save-btn.is-saved svg path,
.heart-btn.is-saved svg path {
  fill   : var(--clr-primary) !important;
  stroke : var(--clr-primary) !important;
}


/* ── 3. Share Modal / Lightbox ───────────────────────────────── */
#share-modal-overlay {
  position        : fixed;
  inset           : 0;
  z-index         : 10000;
  background      : rgba(0, 0, 0, 0.52);
  display         : flex;
  align-items     : flex-end;
  justify-content : center;
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity 0.25s ease;
}
#share-modal-overlay.is-open {
  opacity        : 1;
  pointer-events : all;
}

#share-modal {
  background    : #fff;
  border-radius : 22px 22px 0 0;
  width         : 100%;
  max-width     : 500px;
  padding       : 12px 24px 36px;
  transform     : translateY(100%);
  transition    : transform 0.32s cubic-bezier(0.34, 1.1, 0.64, 1);
}
#share-modal-overlay.is-open #share-modal {
  transform : translateY(0);
}

/* On larger screens: centered card instead of bottom sheet */
@media (min-width: 600px) {
  #share-modal-overlay {
    align-items : center;
  }
  #share-modal {
    border-radius : 22px;
    max-width     : 420px;
    transform     : scale(0.88) translateY(24px);
    padding-top   : 28px;
  }
  #share-modal-overlay.is-open #share-modal {
    transform : scale(1) translateY(0);
  }
}

/* Drag handle (mobile only) */
.share-modal__handle {
  width         : 42px;
  height        : 4px;
  border-radius : 2px;
  background    : #E0D9D0;
  margin        : 0 auto 20px;
}
@media (min-width: 600px) {
  .share-modal__handle { display: none; }
}

.share-modal__title {
  font-size   : 1.05rem;
  font-weight : 700;
  color       : var(--clr-brand-dark);
  text-align  : center;
  margin-bottom : 18px;
}

/* Copy-link row */
.share-modal__copy {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  background    : var(--clr-surface-base);
  border-radius : 12px;
  padding       : 10px 14px;
  margin-bottom : 20px;
  border        : 1px solid rgba(62, 39, 35, 0.08);
}
.share-modal__url {
  flex          : 1;
  font-size     : 0.78rem;
  color         : var(--clr-muted);
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
  min-width     : 0;
}
.share-modal__copy-btn {
  flex-shrink   : 0;
  font-size     : 0.75rem;
  font-weight   : 700;
  color         : var(--clr-primary);
  background    : none;
  border        : none;
  cursor        : pointer;
  padding       : 4px 10px;
  border-radius : 8px;
  transition    : background 0.15s;
  letter-spacing: 0.02em;
}
.share-modal__copy-btn:hover { background: rgba(199, 81, 0, 0.1); }
.share-modal__copy-btn.copied {
  color : var(--clr-olive);
}

/* Platform grid */
.share-modal__platforms {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  gap                   : 10px;
  margin-bottom         : 4px;
}

.share-platform-btn {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : 7px;
  background      : var(--clr-surface-base);
  border          : none;
  border-radius   : 16px;
  padding         : 14px 6px 12px;
  cursor          : pointer;
  text-decoration : none;
  color           : var(--clr-brand-dark);
  font-size       : 0.68rem;
  font-weight     : 600;
  letter-spacing  : 0.01em;
  transition      : background 0.15s, transform 0.18s;
}
.share-platform-btn:hover {
  background : var(--clr-surface-warm);
  transform  : translateY(-3px);
}
.share-platform-btn svg {
  flex-shrink : 0;
}

/* Cancel button */
.share-modal__close {
  display       : block;
  width         : 100%;
  margin-top    : 16px;
  background    : none;
  border        : 1.5px solid rgba(62, 39, 35, 0.15);
  border-radius : 12px;
  padding       : 11px;
  font-size     : 0.85rem;
  font-weight   : 600;
  color         : var(--clr-muted);
  cursor        : pointer;
  transition    : background 0.15s;
}
.share-modal__close:hover { background: var(--clr-surface-base); }

/* ── Stories page — dark mode ── */
html.dark .story-card {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .story-card__body { background: transparent !important; }
html.dark .story-card__title { color: #FFFFFF !important; }
html.dark .story-card__desc  { color: #C8A898 !important; }
html.dark .story-card__time  { color: #A89080 !important; }
html.dark .story-card__footer { border-color: rgba(255,255,255,0.08) !important; }
html.dark .story-card__arrow  { color: #C8A898 !important; }
html.dark .story-card__format-badge {
  background : rgba(42,22,12,0.85) !important;
  color      : #F0E6DC !important;
  border     : 1px solid rgba(255,255,255,0.15) !important;
}
html.dark .story-card__dur-badge {
  background : rgba(26,15,10,0.72) !important;
  color      : #D4C5B8 !important;
}
html.dark .story-card__thumb-icon {
  background : rgba(26,15,10,0.70) !important;
}

/* Story filter tabs */
html.dark .story-filter {
  background   : rgba(255,255,255,0.10) !important;
  color        : #D4C5B8 !important;
  border-color : rgba(255,255,255,0.20) !important;
}
html.dark .story-filter--active {
  background   : #c75100 !important;
  border-color : #c75100 !important;
  color        : #ffffff !important;
}
html.dark .story-filter:hover:not(.story-filter--active) {
  background   : rgba(255,255,255,0.18) !important;
  border-color : rgba(199,81,0,0.55) !important;
  color        : #E8703A !important;
}

/* Submit / share your story card */
html.dark .submit-card {
  background : rgba(72,42,30,0.68) !important;
  border     : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .submit-card h2,
html.dark .submit-card h3,
html.dark .submit-card p,
html.dark .submit-card label { color: #F0E6DC !important; }

html.dark .format-btn {
  background   : rgba(62,39,35,0.45) !important;
  border-color : rgba(255,255,255,0.12) !important;
}
html.dark .format-btn__icon  { color: #E8703A !important; }
html.dark .format-btn__label { color: #D4C0B0 !important; }
html.dark .format-btn:hover  { background: rgba(62,39,35,0.65) !important; border-color: rgba(199,81,0,0.40) !important; }
html.dark .format-btn.is-active { background: rgba(199,81,0,0.20) !important; border-color: rgba(199,81,0,0.50) !important; }

html.dark .story-input,
html.dark .story-textarea {
  background   : rgba(255,255,255,0.07) !important;
  border-color : rgba(255,255,255,0.12) !important;
  color        : #F0E6DC !important;
}
html.dark .story-input::placeholder,
html.dark .story-textarea::placeholder { color: rgba(240,230,220,0.35) !important; }

/* "Your Story Matters" section — warm beige bg → dark body */
html.dark .stories-our-story,
html.dark section.section.bg-surface-warm,
html.dark section[style*="surface-warm"],
html.dark section[style*="244, 237, 228"],
html.dark section[style*="#f4ede4"],
html.dark section[style*="#F4EDE4"],
html.dark section[style*="#faf6f1"],
html.dark section[style*="#FAF6F1"],
html.dark section[style*="#faf7f2"],
html.dark section[style*="#FAF7F2"],
html.dark section[style*="background:#fff"],
html.dark section[style*="background: #fff"],
html.dark section[style*="background-color:#fff"],
html.dark section[style*="background-color: #fff"],
html.dark section[style*="background:linear-gradient"][style*="faf6f1"],
html.dark section[style*="background:linear-gradient"][style*="f4ede4"] {
  background: #1A0F0A !important;
  background-color: #1A0F0A !important;
}
/* Text inside that section has inline color styles — override with !important */
html.dark section[style*="#f4ede4"] h1,
html.dark section[style*="#f4ede4"] h2,
html.dark section[style*="#f4ede4"] h3,
html.dark section[style*="#F4EDE4"] h1,
html.dark section[style*="#F4EDE4"] h2,
html.dark section[style*="#F4EDE4"] h3 { color: #F0E6DC !important; }
html.dark section[style*="#f4ede4"] p,
html.dark section[style*="#F4EDE4"] p  { color: #C8A898 !important; }

/* Stories hero — already dark, ensure it stays */
html.dark .stories-hero { background: #2C1B17 !important; }

/* ── Learn Basics page ── */
html.dark .progress-card {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .progress-card__title   { color: #F0E6DC !important; }
html.dark .progress-card__sub     { color: #C8A898 !important; }
html.dark .progress-card__meta    { color: #A89080 !important; }
html.dark .progress-card__pct-label { color: #A89080 !important; }
html.dark .progress-card__bar-track { background: rgba(255,255,255,0.12) !important; }

html.dark .lesson-row {
  background  : rgba(62,39,35,0.50) !important;
}
html.dark .lesson-row--next {
  background  : rgba(62,39,35,0.35) !important;
}
html.dark .lesson-row__name        { color: #F0E6DC !important; }
html.dark .lesson-row__name--next  { color: #C8A898 !important; }

html.dark .path-card {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .path-card__body         { background: transparent !important; }
html.dark .path-card__title        { color: #F0E6DC !important; }
html.dark .path-card__desc         { color: #C8A898 !important; }
html.dark .path-card__meta         { color: #A89080 !important; }
html.dark .path-card__badge        {
  background : rgba(199,81,0,.22) !important;
  color      : #E8703A !important;
  border     : none !important;
}

html.dark .lesson-step__title      { color: #F0E6DC !important; }
html.dark .lesson-step__title--locked { color: #6B5545 !important; }
html.dark .lesson-step__meta       { color: #A89080 !important; }
html.dark .lesson-step-circle--locked {
  border-color: rgba(255,255,255,0.20) !important;
  color       : #6B5545 !important;
}
html.dark .lesson-step-row         { border-color: rgba(255,255,255,0.07) !important; }
html.dark .lesson-step-row--active { background: rgba(199,81,0,0.08) !important; }

/* Inline white card (Your Learning Path) */
html.dark div[style*="background:#fff;border-radius"] {
  background  : rgba(72,42,30,0.68) !important;
  box-shadow  : none !important;
  border      : 1px solid rgba(255,255,255,0.10) !important;
}

/* ── Profile page ── */
html.dark .profile-hero-banner::after {
  background: linear-gradient(to top, #1A0F0A, transparent) !important;
}
html.dark .profile-card {
  background     : rgba(72,42,30,0.72) !important;
  border-color   : rgba(255,255,255,0.12) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .dash-card {
  background     : rgba(72,42,30,0.68) !important;
  border-color   : rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .dash-card__title  { color: #F0E6DC !important; }

html.dark .learn-item {
  background  : rgba(62,39,35,0.45) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark .learn-item__title { color: #F0E6DC !important; }
html.dark .learn-item__meta  { color: #A89080 !important; }

html.dark .saved-tab {
  color       : #D4C0B0 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark .saved-item {
  background  : rgba(62,39,35,0.45) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark .saved-item__title { color: #F0E6DC !important; }

html.dark .chat-hist-item {
  background  : rgba(62,39,35,0.40) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark .chat-hist-item__title { color: #F0E6DC !important; }
html.dark .chat-hist-item__meta  { color: #A89080 !important; }

html.dark .sidebar-card {
  background  : rgba(72,42,30,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .sidebar-card__title { color: #F0E6DC !important; }

html.dark .pick-card {
  background  : rgba(62,39,35,0.55) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark .pick-card__title { color: #F0E6DC !important; }
html.dark .pick-card__meta  { color: #A89080 !important; }

html.dark .quick-link {
  background  : rgba(62,39,35,0.45) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color       : #D4C0B0 !important;
}
html.dark .quick-link:hover {
  background  : rgba(62,39,35,0.65) !important;
  color       : #fff !important;
}
html.dark .quick-link__icon { background: rgba(255,255,255,0.06) !important; }

/* ── Start Here / New Muslim page ── */
html.dark .journey-card {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .journey-card__title { color: #FFFFFF !important; }
html.dark .journey-card__desc  { color: #C8A898 !important; }
html.dark .journey-card__badge { opacity: 0.9; }
html.dark .journey-card__action { color: #E8703A !important; }
html.dark .journey-card__progress-track { background: rgba(255,255,255,0.10) !important; }

html.dark .qa-row {
  background  : rgba(72,42,30,0.68) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow  : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .qa-row__q    { color: #F0E6DC !important; }
html.dark .qa-row__tag--gray   { background: rgba(255,255,255,0.08) !important; color: #A89080 !important; }
html.dark .qa-row__tag--orange { background: rgba(199,81,0,0.18) !important; color: #E8703A !important; }
html.dark .qa-row__tag--olive  { background: rgba(107,142,35,0.18) !important; color: #8ab83a !important; }

html.dark .event-row {
  background  : rgba(72,42,30,0.68) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow  : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .event-row__title { color: #F0E6DC !important; }
html.dark .event-row__time  { color: #A89080 !important; }

html.dark .reflection-btn-save {
  background  : rgba(62,39,35,0.50) !important;
  color       : #E8703A !important;
  border      : 1px solid rgba(255,255,255,0.12) !important;
}
html.dark .reflection-btn-save:hover {
  background  : rgba(62,39,35,0.70) !important;
}

/* Explore & Learn — nav arrows */
html.dark .learn-nav-btn {
  background  : rgba(62,39,35,0.55) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow  : none !important;
  color       : #D4C0B0 !important;
  backdrop-filter: blur(8px);
}
html.dark .learn-nav-btn:hover {
  background  : rgba(199,81,0,0.75) !important;
  border-color: transparent !important;
  color       : #fff !important;
}

/* Explore & Learn — filter tabs */
html.dark .learn-filter--active {
  background  : #c75100 !important;
  border-color: #c75100 !important;
  color       : #ffffff !important;
}
html.dark .learn-filter--inactive {
  background  : rgba(255,255,255,0.10) !important;
  color       : #D4C5B8 !important;
  border-color: rgba(255,255,255,0.20) !important;
}
html.dark .learn-filter--inactive:hover {
  background  : rgba(255,255,255,0.18) !important;
  border-color: rgba(199,81,0,0.55) !important;
  color       : #E8703A !important;
}

/* Mentor cards */
html.dark .mentor-card-v2 {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .mentor-card-v2__name    { color: #FFFFFF !important; }
html.dark .mentor-card-v2__rating  { color: #A89080 !important; }
html.dark .mentor-card-v2__specialty { color: #C8A898 !important; }
html.dark .mentor-card-v2__bio     { color: #A89080 !important; }

/* ── Stories grid — mobile horizontal scroll ─────────────── */
@media (max-width: 640px) {
  .stories-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding-bottom: 12px !important;
  }
  .stories-grid > .story-card {
    flex: 0 0 82vw !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
  }
  .stories-grid::-webkit-scrollbar { display: none; }
  .stories-grid { scrollbar-width: none; }
}
html.dark .mentor-card-v2__response { color: #A89080 !important; }
html.dark .mentor-card-v2__response strong { color: #8ab83a !important; }

/* ── Questions page ───────────────────────────────────────── */
/* Ask bar */
html.dark .ask-bar {
  background  : rgba(44,27,23,0.90) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow  : 0 22px 32px rgba(0,0,0,0.30) !important;
}
html.dark .ask-bar__input {
  color: #F0E6DC !important;
}
html.dark .ask-bar__input::placeholder {
  color: rgba(240,230,220,0.35) !important;
}
html.dark .ask-bar__icon {
  color: rgba(240,230,220,0.55) !important;
}

/* Filter tabs */
html.dark .q-filter {
  background  : rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color       : #D4C5B8 !important;
}
html.dark .q-filter:hover:not(.q-filter--active) {
  background  : rgba(255,255,255,0.18) !important;
  border-color: rgba(199,81,0,0.55) !important;
  color       : #E8703A !important;
}
html.dark .q-filter--active {
  background  : #c75100 !important;
  border-color: #c75100 !important;
  color       : #fff !important;
}

/* Accordion Q items */
html.dark .q-item {
  background  : rgba(72,42,30,0.68) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow  : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .q-item__title {
  color: #F0E6DC !important;
}
html.dark .q-item__body {
  color      : #C8A898 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark .q-item__icon {
  background: rgba(199,81,0,0.18) !important;
  color     : #E8703A !important;
}
html.dark .q-item--open .q-item__icon {
  background: #c75100 !important;
  color     : #fff !important;
}
html.dark .q-badge--frequent {
  background: rgba(199,81,0,0.18) !important;
  color     : #E8703A !important;
}
html.dark .q-badge--ai {
  background: rgba(107,142,35,0.18) !important;
  color     : #8ab83a !important;
}

/* No-judgment cards */
html.dark .nj-card {
  background  : rgba(72,42,30,0.68) !important;
  border      : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow  : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .nj-card__quote {
  color: #F0E6DC !important;
}
html.dark .nj-card__desc {
  color: #C8A898 !important;
}

/* ══════════════════════════════════════════════════════════════
   CHAT PAGE — Dark mode + centered layout
══════════════════════════════════════════════════════════════ */

/* ── Centered content (like Claude) ────────────────────────── */
.chat-panel {
  align-items: center;
}
.chat-header,
.chat-bg-selector {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}
.chat-messages {
  width: 100%;
  max-width: 780px;
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}
.chat-input-wrap {
  width: 100%;
  max-width: 780px;
  box-sizing: border-box;
}

/* ── Dark mode — sidebar ────────────────────────────────────── */
html.dark .chat-sidebar {
  background  : #1C1008 !important;
  border-color: rgba(255,255,255,0.07) !important;
}
html.dark .chat-sidebar__footer {
  border-color: rgba(255,255,255,0.07) !important;
}
html.dark .sidebar-heading {
  color: #A89080 !important;
}
html.dark .sidebar-item__title {
  color: #D4C5B8 !important;
}
html.dark .sidebar-item__meta {
  color: #7A6A60 !important;
}
html.dark .sidebar-item:hover {
  background: rgba(255,255,255,0.05) !important;
}
html.dark .sidebar-item.is-active {
  background: rgba(199,81,0,0.16) !important;
}
html.dark .sidebar-item__icon {
  color: #A89080 !important;
}
html.dark .sidebar-profile__name {
  color: #D4C5B8 !important;
}
html.dark .sidebar-profile__sub {
  color: #7A6A60 !important;
}
html.dark .sidebar-profile:hover {
  background: rgba(255,255,255,0.05) !important;
}

/* ── Dark mode — chat panel ─────────────────────────────────── */
html.dark .chat-panel {
  background: #1A0F0A !important;
}
html.dark .chat-header {
  background  : rgba(26,15,10,0.95) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
html.dark .chat-header__label {
  color: #D4C5B8 !important;
}
html.dark .chat-header__action-btn {
  color: #A89080 !important;
}
html.dark .chat-header__action-btn:hover {
  background: rgba(255,255,255,0.07) !important;
  color     : #E8703A !important;
}
html.dark .chat-header__sidebar-toggle {
  color: #A89080 !important;
}
html.dark .chat-header__sidebar-toggle:hover {
  background: rgba(255,255,255,0.07) !important;
}

/* ── Dark mode — background selector ───────────────────────── */
html.dark .chat-bg-selector {
  border-color: rgba(255,255,255,0.07) !important;
}
html.dark .chat-bg-selector__title {
  color: #D4C5B8 !important;
}
html.dark .bg-pill {
  background  : rgba(255,255,255,0.07) !important;
  color       : #D4C5B8 !important;
}
html.dark .bg-pill:hover {
  border-color: rgba(199,81,0,0.50) !important;
}
html.dark .bg-pill.is-active {
  border-color: #c75100 !important;
  background  : rgba(199,81,0,0.14) !important;
  color       : #E8703A !important;
}

/* ── Dark mode — messages ───────────────────────────────────── */
html.dark .chat-messages {
  background: #1A0F0A !important;
}
html.dark .chat-msg--user .chat-msg__bubble {
  background: rgba(62,39,35,0.65) !important;
  color     : #F0E6DC !important;
}
html.dark .typing-dots {
  background: rgba(62,39,35,0.55) !important;
}

/* ── Dark mode — input area ─────────────────────────────────── */
html.dark .chat-input-wrap {
  background: #1A0F0A !important;
}
html.dark .chat-input-box {
  background  : rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark .chat-input-box:focus-within {
  border-color: rgba(199,81,0,0.55) !important;
  box-shadow  : 0 0 0 3px rgba(199,81,0,0.14) !important;
}
html.dark .chat-textarea {
  color: #F0E6DC !important;
}
html.dark .chat-textarea::placeholder {
  color: rgba(240,230,220,0.35) !important;
}
html.dark .chat-tool-btn {
  color: #A89080 !important;
}
html.dark .chat-tool-btn:hover {
  background: rgba(255,255,255,0.07) !important;
  color     : #E8703A !important;
}
html.dark .chat-send-btn:disabled {
  background: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

/* ── Dark mode — kbd hints ──────────────────────────────────── */
html.dark kbd {
  background: rgba(255,255,255,0.10) !important;
  color     : #A89080 !important;
}
html.dark .chat-sidebar-overlay {
  background: rgba(0,0,0,0.60) !important;
}

/* ── Questions page — chat section mobile fix ─────────────── */
@media (max-width: 1024px) {
  /* Hide prompt cards, show only chat window */
  .chat-layout__prompts {
    display: none !important;
  }
  /* Stack layout vertically */
  .chat-layout {
    flex-direction: column !important;
  }
  /* Chat window full width */
  .chat-window {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 640px) {
  /* Tighten chat bubbles on small screens */
  .chat-bubble-ai,
  .chat-bubble-user {
    max-width: 85% !important;
    font-size: 13px !important;
  }
  .chat-window__messages {
    padding: 18px !important;
  }
  .chat-window__header {
    padding: 16px 18px !important;
  }
  .chat-window__footer {
    padding: 12px 16px !important;
  }
}

/* ── About page — dark mode ──────────────────────────────── */

/* Stat cards */
html.dark .stat-card {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .stat-card__label { color: #A89080 !important; }

/* Offer cards */
html.dark .offer-card {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .offer-card__title { color: #F0E6DC !important; }
html.dark .offer-card__desc  { color: #C8A898 !important; }

/* Join the journey CTA card */
html.dark .about-cta-card {
  background     : rgba(72,42,30,0.68) !important;
  border         : 1px solid rgba(255,255,255,0.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .about-cta-card .about-section-heading { color: #F0E6DC !important; }
html.dark .about-cta-card .about-section-sub     { color: #C8A898 !important; }

/* ── Support page — Share Your Story card — dark mode ─────── */
html.dark .sp-story-card {
  background     : rgba(72,42,30,0.68) !important;
  border-color   : rgba(255,255,255,.10) !important;
  box-shadow     : none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.dark .sp-story-sub    { color: #C8A898 !important; }
html.dark .sp-form-label   { color: #F0E6DC !important; }
html.dark .sp-form-input   { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.14) !important; color: #fff !important; }
html.dark .sp-form-input::placeholder { color: rgba(255,255,255,.35) !important; }
html.dark .sp-form-input:focus { border-color: #e8703a !important; }
html.dark .sp-form-select  {
  background-color   : rgba(255,255,255,.05) !important;
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat  : no-repeat !important;
  background-position: right 12px center !important;
}
html.dark .sp-form-select option { background: #2c1b17; color: #fff; }
html.dark .sp-form-file    { color: rgba(255,255,255,.7) !important; }
html.dark .sp-form-file::file-selector-button { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-family: 'Inter', sans-serif; }
html.dark .sp-form-file::file-selector-button:hover { background: rgba(255,255,255,.14); }

/* ═══════════════════════════════════════════════════
   PAGE: book.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── Read progress bar ─────────────────────────────────── */
    #read-progress {
      position: fixed; top: 0; left: 0;
      height: 3px;
      background: linear-gradient(to right, #c75100, #c96c3b);
      width: 0%; z-index: 9999;
      transition: width .1s linear;
    }

    /* ─── HERO ──────────────────────────────────────────────── */
    .book-hero {
      position: relative; overflow: hidden;
      background: linear-gradient(158deg, #faf7f2 0%, #f4ede4 100%);
      padding: 56px 24px 72px;
    }
    .book-hero__glow-1 {
      position: absolute; top: -120px; right: -100px;
      width: 560px; height: 560px; border-radius: 50%;
      background: radial-gradient(circle, rgba(199,81,0,.09) 0%, transparent 65%);
      pointer-events: none;
    }
    .book-hero__glow-2 {
      position: absolute; bottom: -100px; left: -80px;
      width: 480px; height: 480px; border-radius: 50%;
      background: radial-gradient(circle, rgba(107,142,35,.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .book-hero__inner {
      max-width: 1140px; margin: 0 auto; position: relative; z-index: 1;
      display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start;
    }
    @media (max-width: 900px) {
      .book-hero__inner { grid-template-columns: 1fr; gap: 40px; }
    }

    /* ─── Book cover ────────────────────────────────────────── */
    .book-cover {
      width: 260px; height: 360px; border-radius: 18px;
      background: linear-gradient(145deg, #c75100 0%, #3e2723 55%, #4a6820 100%);
      box-shadow: 0 32px 80px rgba(62,39,35,.32), -8px 0 0 rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.10);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; position: relative; overflow: hidden; flex-shrink: 0;
    }
    .book-cover__spine {
      position: absolute; left: 0; top: 0; bottom: 0; width: 16px;
      background: rgba(0,0,0,.22);
    }
    .book-cover__glow {
      position: absolute; top: -50px; right: -50px; width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.13) 0%, transparent 70%);
    }
    .book-cover__icon { font-size: 70px; line-height: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,.30)); }
    .book-cover__title {
      font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px;
      text-align: center; line-height: 1.35; padding: 0 28px;
      color: rgba(255,255,255,.95);
    }
    .book-cover__author { font-size: 11.5px; color: rgba(255,255,255,.60); }
    .book-cover__stripe {
      position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, #c75100, #e8703a, #6b8e23);
    }

    /* Cover action buttons */
    .cover-actions {
      display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap;
    }
    .cover-action-btn {
      width: 38px; height: 38px; border-radius: 50%;
      background: rgba(255,255,255,.88); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; box-shadow: 0 2px 10px rgba(62,39,35,.12);
      transition: transform .2s, background .15s;
    }
    .cover-action-btn:hover { transform: scale(1.10); background: #fff; }
    .cover-action-btn.is-saved { background: #fff5ef; }

    /* Cover badges */
    .cover-badges { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
    .cover-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 13px; border-radius: 20px; font-size: 11px; font-weight: 600;
      background: rgba(255,255,255,.78); border: 1px solid rgba(62,39,35,.08);
      box-shadow: 0 1px 4px rgba(62,39,35,.05); color: #3e2723;
      width: fit-content;
    }
    .cover-badge--ai   { background: rgba(199,81,0,.08); border-color: rgba(199,81,0,.16); color: #c75100; }
    .cover-badge--green { background: rgba(107,142,35,.08); border-color: rgba(107,142,35,.16); color: #5a7a1a; }

    /* ─── Hero right info ───────────────────────────────────── */
    .book-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
    .book-tag {
      padding: 5px 13px; border-radius: 20px; font-size: 11px;
      font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    }
    .book-tag--green  { background: rgba(107,142,35,.12); color: #5a7a1a; border: 1px solid rgba(107,142,35,.20); }
    .book-tag--orange { background: rgba(199,81,0,.10);   color: #c75100; border: 1px solid rgba(199,81,0,.18); }
    .book-tag--brown  { background: rgba(62,39,35,.07);   color: #3e2723; border: 1px solid rgba(62,39,35,.12); }

    .book-title {
      font-family: 'Montserrat', sans-serif; font-weight: 800;
      font-size: 52px; line-height: 1.05; color: #3e2723; margin-bottom: 8px;
    }
    @media (max-width: 768px) { .book-title { font-size: 36px; } }

    .book-author { font-size: 16px; color: #8b7567; margin-bottom: 18px; }

    .book-desc {
      font-size: 16.5px; line-height: 1.75; color: rgba(62,39,35,.68);
      margin-bottom: 32px; max-width: 600px;
    }

    /* Stats */
    .book-stats { display: flex; gap: 0; margin-bottom: 20px; }
    .book-stat { flex: 1; }
    .book-stat__value {
      font-family: 'Montserrat', sans-serif; font-weight: 800;
      font-size: 24px; color: #3e2723; line-height: 1;
    }
    .book-stat__label {
      font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
      color: #8b7567; margin-top: 4px;
    }
    .book-stat-divider { width: 1px; background: rgba(62,39,35,.10); margin: 0 24px; }

    /* Rating row */
    .book-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
    .book-rating__stars { color: #f59e0b; font-size: 18px; letter-spacing: 2px; }
    .book-rating__text { font-size: 13px; color: #8b7567; }

    /* CTA Buttons */
    .book-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
    .btn-start {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 28px; border-radius: 100px;
      background: linear-gradient(135deg, #c75100 0%, #e8703a 100%);
      color: white; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px;
      border: none; cursor: pointer;
      box-shadow: 0 6px 24px rgba(199,81,0,.28); transition: transform .2s, box-shadow .2s;
    }
    .btn-start:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(199,81,0,.38); }
    .btn-audio {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 24px; border-radius: 100px;
      background: white; color: #3e2723;
      border: 1.5px solid rgba(62,39,35,.15); cursor: pointer;
      font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px;
      box-shadow: 0 2px 8px rgba(62,39,35,.06); transition: border-color .2s;
    }
    .btn-audio:hover { border-color: #c75100; }
    .btn-save-hero {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 20px; border-radius: 100px;
      background: rgba(107,142,35,.10); color: #5a7a1a;
      border: 1.5px solid rgba(107,142,35,.20); cursor: pointer;
      font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px;
      transition: background .2s;
    }
    .btn-save-hero:hover  { background: rgba(107,142,35,.18); }
    .btn-save-hero.is-saved { background: rgba(107,142,35,.20); color: #4a6820; }

    /* Language pills */
    .lang-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .lang-pill {
      padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500;
      background: rgba(255,255,255,.80); border: 1px solid rgba(62,39,35,.10);
      color: #3e2723; cursor: pointer; transition: background .15s;
    }
    .lang-pill:hover   { background: white; }
    .lang-pill--active { background: white; border-color: rgba(62,39,35,.22); font-weight: 600; }

    /* ─── READER ────────────────────────────────────────────── */
    .reader-section { background: #faf7f2; padding: 48px 24px 64px; }
    .reader-section__inner { max-width: 1200px; margin: 0 auto; }
    .reader-card {
      background: white; border-radius: 24px; overflow: hidden;
      box-shadow: 0 4px 32px rgba(62,39,35,.08); border: 1px solid rgba(62,39,35,.06);
    }
    /* Top bar */
    .reader-topbar {
      background: white; border-bottom: 1px solid rgba(62,39,35,.08);
      padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .reader-topbar__info {}
    .reader-topbar__book  { font-weight: 600; font-size: 13.5px; color: #3e2723; }
    .reader-topbar__ch    { font-size: 11.5px; color: #8b7567; margin-top: 1px; }
    .reader-topbar__badge {
      padding: 3px 11px; border-radius: 10px; background: #c75100; color: white;
      font-size: 11px; font-weight: 700;
    }
    .reader-topbar__spacer { flex: 1; }
    .reader-font-ctrl {
      display: flex; align-items: center; gap: 4px;
      border: 1px solid rgba(62,39,35,.10); border-radius: 10px;
      padding: 4px 10px; background: #faf7f2;
    }
    .reader-font-btn {
      width: 28px; height: 28px; border-radius: 7px; border: none;
      background: none; cursor: pointer; font-size: 12px; font-weight: 700;
      color: #3e2723; display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    .reader-font-btn:hover { background: rgba(62,39,35,.08); }
    .reader-font-val { font-size: 12px; color: #8b7567; padding: 0 6px; min-width: 22px; text-align: center; }
    .reader-icon-btn {
      width: 34px; height: 34px; border-radius: 9px;
      border: 1px solid rgba(62,39,35,.10); background: white;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 15px; transition: background .15s;
    }
    .reader-icon-btn:hover { background: #faf7f2; }

    /* 3-col grid */
    .reader-body { display: grid; grid-template-columns: 256px 1fr 276px; min-height: 600px; }
    @media (max-width: 1100px) {
      .reader-body { grid-template-columns: 1fr; }
      .reader-chaps-panel, .reader-notes-panel { display: none; }
    }

    /* LEFT panel */
    .reader-chaps-panel { border-right: 1px solid rgba(62,39,35,.07); background: white; overflow-y: auto; }
    .reader-panel-head {
      padding: 14px 16px; border-bottom: 1px solid rgba(62,39,35,.06);
      font-size: 10px; font-weight: 700; letter-spacing: .10em;
      text-transform: uppercase; color: #8b7567;
    }
    .reader-panel-sub { font-size: 10px; color: #8b7567; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 3px; }
    .chap-item {
      display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
      cursor: pointer; border-bottom: 1px solid rgba(62,39,35,.05);
      transition: background .15s;
    }
    .chap-item:hover:not(.chap-item--locked) { background: #faf7f2; }
    .chap-item--active { background: rgba(199,81,0,.05) !important; }
    .chap-item--locked { opacity: .48; cursor: default; }
    .chap-num {
      width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; background: rgba(62,39,35,.08); color: #3e2723;
    }
    .chap-num--done   { background: rgba(107,142,35,.16); color: #5a7a1a; }
    .chap-num--active {
      background: linear-gradient(135deg, #c75100, #e8703a); color: white;
      box-shadow: 0 2px 10px rgba(199,81,0,.32);
    }
    .chap-item__title  { font-size: 12.5px; font-weight: 500; color: #3e2723; line-height: 1.3; }
    .chap-item--active .chap-item__title { color: #c75100; font-weight: 600; }
    .chap-item__meta   { font-size: 10px; color: #8b7567; margin-top: 2px; }
    .chap-done-tag {
      margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 600;
      color: #5a7a1a; background: rgba(107,142,35,.10); padding: 2px 8px;
      border-radius: 8px; white-space: nowrap;
    }

    /* CENTER */
    .reader-text-panel {
      padding: 40px 48px; background: #faf7f2; overflow-y: auto;
    }
    @media (max-width: 768px) { .reader-text-panel { padding: 28px 20px; } }
    .reader-ch-label {
      font-size: 11px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: #c75100; margin-bottom: 10px;
    }
    .reader-ch-title {
      font-family: 'Montserrat', sans-serif; font-weight: 700;
      font-size: 28px; color: #3e2723; line-height: 1.2; margin-bottom: 8px;
    }
    .reader-ch-desc { font-size: 14px; color: #8b7567; margin-bottom: 32px; line-height: 1.55; }
    .reader-prose {
      font-size: 17px; line-height: 1.88; color: #5d4037;
    }
    .reader-prose p { margin-bottom: 22px; }
    .reader-prose strong { color: #3e2723; font-weight: 600; }

    /* Hadith quote */
    .hadith-block {
      background: white; border-left: 4px solid #c75100;
      border-radius: 0 18px 18px 0; padding: 26px 28px;
      margin: 32px 0; box-shadow: 0 2px 16px rgba(62,39,35,.06);
      position: relative;
    }
    .hadith-block__quote {
      position: absolute; top: -8px; left: 18px;
      font-family: 'Montserrat', sans-serif; font-size: 72px;
      color: #c75100; opacity: .20; line-height: 1;
    }
    .hadith-block__text {
      font-size: 17px; line-height: 1.72; color: #3e2723; font-style: italic;
    }
    .hadith-block__source { font-size: 12px; color: #8b7567; margin-top: 12px; }
    .hadith-save-btn {
      margin-top: 10px; font-size: 11px; color: #8b7567; background: none; border: none;
      cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 5px;
      transition: color .15s;
    }
    .hadith-save-btn:hover { color: #c75100; }
    .reader-divider { text-align: center; color: #c75100; opacity: .35; margin: 28px 0; font-size: 20px; letter-spacing: 8px; }

    /* Quran / Hadith frames inserted from the admin editor */
    .article-content .quran,
    .article-content .hadith {
      background      : rgba(199,81,0,.05);
      border-left     : 3px solid #c75100;
      border-radius   : 0 16px 16px 0;
      padding         : 20px 24px;
      margin          : 28px 0;
    }
    .article-content .quran {
      background      : rgba(107,142,35,.06);
      border-left-color: #4f6a18;
    }
    .article-content .quran .intro p,
    .article-content .hadith .intro p {
      font-family    : 'Montserrat', sans-serif;
      font-size      : 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing : .04em; color: #8b7567; margin: 0 0 10px;
    }
    .article-content .quran .content p,
    .article-content .hadith .content p {
      font-family : 'Scheherazade New', 'Inter', serif;
      font-size   : 19px; line-height: 1.9; font-style: italic;
      color       : #3e2723; margin: 0;
    }
    .article-content .quran .reference p,
    .article-content .hadith .reference p {
      font-family : 'Inter', sans-serif;
      font-size   : 13px; font-style: normal; font-weight: 600;
      color       : #8b7567; margin: 14px 0 0;
    }
    html.dark .article-content .quran,
    html.dark .article-content .hadith {
      background : rgba(255,255,255,.05) !important;
    }
    html.dark .article-content .quran      { border-left-color: #7a9c3a !important; }
    html.dark .article-content .hadith     { border-left-color: #e8703a !important; }
    html.dark .article-content .quran .content p,
    html.dark .article-content .hadith .content p { color: #F0E6DC !important; }
    html.dark .article-content .quran .intro p,
    html.dark .article-content .hadith .intro p,
    html.dark .article-content .quran .reference p,
    html.dark .article-content .hadith .reference p { color: #C8A898 !important; }

    /* Chapter nav */
    .chapter-nav { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(62,39,35,.10); }
    .chap-nav-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 11px 22px; border-radius: 100px;
      border: 1.5px solid rgba(62,39,35,.14); background: white;
      font-size: 13px; font-weight: 600; color: #3e2723; cursor: pointer;
      transition: border-color .15s, color .15s;
    }
    .chap-nav-btn:hover { border-color: #c75100; color: #c75100; }
    .chap-nav-btn--next {
      background: #c75100; color: white; border-color: #c75100;
    }
    .chap-nav-btn--next:hover { background: #a34200; border-color: #a34200; color: white; }

    /* RIGHT panel */
    .reader-notes-panel {
      border-left: 1px solid rgba(62,39,35,.07); background: white;
      display: flex; flex-direction: column;
    }
    .reader-tabs { display: flex; border-bottom: 1px solid rgba(62,39,35,.07); }
    .reader-tab {
      flex: 1; padding: 14px 8px; text-align: center;
      font-size: 12px; font-weight: 600; color: #8b7567; cursor: pointer;
      border-bottom: 2px solid transparent; transition: all .15s;
    }
    .reader-tab.is-active { color: #c75100; border-bottom-color: #c75100; }
    .reader-tab:hover:not(.is-active) { color: #3e2723; }
    .notes-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 11px; }
    .note-card {
      background: #faf7f2; border-radius: 12px; padding: 14px;
      border: 1px solid rgba(62,39,35,.06);
    }
    .note-card__page { font-size: 10px; color: #c75100; font-weight: 600; margin-bottom: 6px; }
    .note-card--ai .note-card__page { color: #5a7a1a; }
    .note-card__text { font-size: 12.5px; line-height: 1.55; color: #5d4037; }
    .add-note-btn {
      margin: 12px 14px 14px; padding: 12px; border-radius: 100px;
      border: 1.5px dashed rgba(62,39,35,.14); background: none; cursor: pointer;
      font-size: 13px; color: #8b7567;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: all .15s;
    }
    .add-note-btn:hover { border-color: #c75100; color: #c75100; background: rgba(199,81,0,.03); }

    /* ─── SECTION SHARED ────────────────────────────────────── */
    .section-wrap { padding: 80px 24px; }
    .section-inner { max-width: 1140px; margin: 0 auto; }
    .sec-heading {
      font-family: 'Montserrat', sans-serif; font-weight: 800;
      font-size: 40px; color: #3e2723; margin-bottom: 48px;
    }
    @media (max-width: 768px) { .sec-heading { font-size: 30px; margin-bottom: 32px; } }

    /* ─── ABOUT ─────────────────────────────────────────────── */
    .about-section { background: white; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
    @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
    .about-text p {
      font-size: 17px; line-height: 1.80; color: rgba(62,39,35,.78);
      margin-bottom: 20px;
    }
    .about-cards { display: flex; flex-direction: column; gap: 16px; }
    .about-card {
      background: #faf7f2; border-radius: 20px; padding: 22px 24px;
      border: 1px solid rgba(62,39,35,.06);
    }
    .about-card__icon { font-size: 26px; margin-bottom: 10px; }
    .about-card__title { font-size: 14px; font-weight: 700; color: #3e2723; margin-bottom: 8px; }
    .about-card__body  { font-size: 12.5px; line-height: 1.62; color: #8b7567; }
    .topic-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
    .topic-tag {
      padding: 4px 11px; border-radius: 10px; font-size: 11px; font-weight: 600;
      background: rgba(199,81,0,.08); color: #c75100;
      border: 1px solid rgba(199,81,0,.14);
    }

    /* ─── AI SUMMARY ────────────────────────────────────────── */
    .ai-section { background: #f4ede4; }
    .ai-grid { display: grid; grid-template-columns: 460px 1fr; gap: 48px; align-items: start; }
    @media (max-width: 1000px) { .ai-grid { grid-template-columns: 1fr; } }

    /* ─── AI Assistant card (unified) ──────────────────────── */
    .ai-assistant-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(159deg, rgba(62,39,35,.95) 0%, rgba(90,40,20,.90) 100%);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 28px;
      padding: 28px;
      margin-bottom: 20px;
    }
    .ai-assistant-card__glow {
      position: absolute;
      top: -60px; right: -60px;
      width: 250px; height: 250px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(199,81,0,.25) 0%, rgba(199,81,0,0) 70%);
      pointer-events: none;
    }
    .ai-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      position: relative;
    }
    .ai-card-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ai-card-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      line-height: 1.3;
    }
    .ai-card-sub {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: rgba(255,255,255,.45);
    }
    .ai-action-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 12px 16px;
      border-radius: 100px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: rgba(255,255,255,.75);
      cursor: pointer;
      transition: background .2s;
      text-align: left;
      margin-bottom: 8px;
    }
    .ai-action-btn:hover { background: rgba(255,255,255,.12); }
    .ai-action-btn:last-child { margin-bottom: 0; }

    /* Dark AI panel — kept for legacy reference but now replaced in HTML */
    .ai-dark-panel {
      background: linear-gradient(159deg, rgba(62,39,35,.97) 0%, rgba(90,40,20,.93) 100%);
      border-radius: 24px; padding: 28px; position: relative; overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 24px 64px rgba(62,39,35,.28);
    }
    .ai-dark-panel__glow {
      position: absolute; top: -60px; right: -60px;
      width: 220px; height: 220px; border-radius: 50%;
      background: radial-gradient(circle, rgba(199,81,0,.28) 0%, transparent 70%);
      pointer-events: none;
    }
    .ai-dp__header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; position: relative; }
    .ai-dp__avatar {
      width: 42px; height: 42px; border-radius: 50%;
      background: linear-gradient(135deg, #c75100, #e8703a); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 22px rgba(199,81,0,.42);
    }
    .ai-dp__avatar svg { width: 22px; height: 22px; fill: white; }
    .ai-dp__name { font-size: 14px; font-weight: 600; color: white; }
    .ai-dp__status { font-size: 11px; color: rgba(199,81,0,.90); margin-top: 2px; }
    .ai-dp__msg {
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07);
      border-radius: 16px; padding: 18px; margin-bottom: 20px;
      font-size: 13.5px; line-height: 1.72; color: rgba(255,255,255,.78); font-style: italic;
    }
    .ai-dp__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .ai-dp__pill {
      padding: 7px 14px; border-radius: 20px; font-size: 11px; font-weight: 600;
      background: rgba(255,255,255,.08); color: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.10); cursor: pointer; transition: all .15s;
    }
    .ai-dp__pill:hover { background: rgba(199,81,0,.25); color: white; border-color: rgba(199,81,0,.30); }
    .ai-dp__input-row {
      display: flex; gap: 10px; align-items: center;
      background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px; padding: 12px 16px;
    }
    .ai-dp__input {
      flex: 1; background: none; border: none; outline: none;
      font-size: 13px; color: rgba(255,255,255,.80);
    }
    .ai-dp__input::placeholder { color: rgba(255,255,255,.35); }
    .ai-dp__send {
      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
      background: #c75100; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .ai-dp__send svg { width: 16px; height: 16px; fill: white; }

    /* Insight cards */
    .insight-stack { display: flex; flex-direction: column; gap: 16px; }
    .insight-card {
      background: white; border-radius: 20px; padding: 22px 24px;
      box-shadow: 0 4px 20px rgba(62,39,35,.06); border: 1px solid rgba(62,39,35,.06);
    }
    .insight-card__tag {
      font-size: 10.5px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: #c75100; margin-bottom: 8px;
    }
    .insight-card__title { font-size: 14px; font-weight: 700; color: #3e2723; margin-bottom: 8px; }
    .insight-card__body  { font-size: 13px; line-height: 1.65; color: #8b7567; }

    /* ─── CHAPTERS ──────────────────────────────────────────── */
    .chapters-section { background: #faf7f2; }
    .chapters-subtitle { font-size: 16px; color: #8b7567; margin-top: -36px; margin-bottom: 40px; }
    .chapters-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    @media (max-width: 700px) { .chapters-grid { grid-template-columns: 1fr; } }
    .ch-card {
      background: white; border-radius: 20px; padding: 20px 22px;
      box-shadow: 0 2px 12px rgba(62,39,35,.05); border: 1px solid rgba(62,39,35,.07);
      display: flex; gap: 16px; align-items: flex-start; cursor: pointer;
      transition: box-shadow .2s, transform .2s;
    }
    .ch-card:hover:not(.ch-card--locked) { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(62,39,35,.10); }
    .ch-card--done    { border-color: rgba(107,142,35,.16); background: rgba(107,142,35,.02); }
    .ch-card--active  { border-color: rgba(199,81,0,.25); background: rgba(199,81,0,.03); }
    .ch-card--locked  { opacity: .52; cursor: default; }
    .ch-icon {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700;
    }
    .ch-icon--done     { background: rgba(107,142,35,.15); color: #5a7a1a; }
    .ch-icon--active   { background: linear-gradient(135deg, #c75100, #e8703a); color: white; box-shadow: 0 4px 16px rgba(199,81,0,.35); }
    .ch-icon--upcoming { background: rgba(199,81,0,.09); color: #c75100; }
    .ch-icon--locked   { background: rgba(62,39,35,.07); color: #8b7567; }
    .ch-card__info { flex: 1; min-width: 0; }
    .ch-card__title { font-size: 14.5px; font-weight: 600; color: #3e2723; line-height: 1.3; }
    .ch-card--active .ch-card__title { color: #c75100; }
    .ch-card__meta { font-size: 11.5px; color: #8b7567; margin-top: 4px; }
    .ch-card__tag {
      margin-left: auto; flex-shrink: 0; align-self: center;
      font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
    }
    .ch-card__tag--done     { background: rgba(107,142,35,.12); color: #5a7a1a; }
    .ch-card__tag--progress { background: rgba(199,81,0,.10);   color: #c75100; }
    .ch-progress-bar {
      height: 4px; background: rgba(199,81,0,.14); border-radius: 2px;
      margin-top: 10px; overflow: hidden;
    }
    .ch-progress-bar__fill { height: 100%; background: #c75100; border-radius: 2px; }

    /* ─── RELATED BOOKS ─────────────────────────────────────── */
    .related-section { background: #f4ede4; }
    .related-header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px;
    }
    .rec-arrows { display: flex; gap: 8px; }
    .rec-arrow {
      width: 40px; height: 40px; border-radius: 50%;
      border: 1.5px solid rgba(62,39,35,.20); background: white; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: #3e2723; transition: all .2s;
    }
    .rec-arrow:hover:not(:disabled) { background: #c75100; color: white; border-color: #c75100; }
    .rec-arrow:disabled { opacity: .32; cursor: default; }
    .rec-scroll {
      display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px;
    }
    .rec-scroll::-webkit-scrollbar { display: none; }

    /* Book rec card */
    .book-rec {
      flex-shrink: 0; width: 256px; background: white; border-radius: 20px;
      overflow: hidden; border: 1px solid rgba(62,39,35,.07);
      box-shadow: 0 4px 20px rgba(62,39,35,.07);
      transition: transform .2s, box-shadow .2s;
    }
    .book-rec:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(62,39,35,.14); }
    .book-rec__cover {
      height: 156px; position: relative; display: flex;
      align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    }
    .book-rec__cover-emoji {
      font-size: 48px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)); z-index: 1;
    }
    .book-rec__cover-ttl {
      font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px;
      color: rgba(255,255,255,.88); text-align: center; padding: 0 14px;
      line-height: 1.35; z-index: 1;
    }
    .book-rec__cover-save {
      position: absolute; top: 10px; right: 10px;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,.88); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; transition: transform .15s, background .15s;
    }
    .book-rec__cover-save:hover { transform: scale(1.12); background: white; }
    .book-rec__body { padding: 16px 18px; }
    .book-rec__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
    .book-rec__tag {
      padding: 3px 9px; border-radius: 8px; font-size: 10px;
      font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    }
    .book-rec__tag--type { background: rgba(62,39,35,.07); color: #3e2723; }
    .book-rec__tag--ai   { background: rgba(199,81,0,.10); color: #c75100; }
    .book-rec__tag--cat  { background: rgba(107,142,35,.10); color: #5a7a1a; }
    .book-rec__title { font-size: 15px; font-weight: 700; color: #3e2723; margin-bottom: 6px; line-height: 1.3; }
    .book-rec__desc { font-size: 12px; color: #8b7567; line-height: 1.52; margin-bottom: 12px; }
    .book-rec__foot { display: flex; align-items: center; justify-content: space-between; }
    .book-rec__author { font-size: 11px; color: #8b7567; }
    .book-rec__level {
      font-size: 11px; font-weight: 600; color: #8b7567;
      padding: 3px 9px; border-radius: 7px; background: rgba(62,39,35,.05);
    }

    [id] { scroll-margin-top: 80px; }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark .book-hero { background: linear-gradient(158deg, #1A0F0A 0%, #251409 100%) !important; }
    html.dark .book-title { color: #F0E6DC !important; }
    html.dark .book-author { color: #A89080 !important; }
    html.dark .book-desc { color: rgba(240,230,220,.60) !important; }
    html.dark .book-stat__value { color: #F0E6DC !important; }
    html.dark .book-stat__label { color: #A89080 !important; }
    html.dark .book-stat-divider { background: rgba(255,255,255,.12) !important; }
    html.dark .book-rating__text { color: #A89080 !important; }
    html.dark .cover-badge {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.12) !important;
      color: #F0E6DC !important;
    }
    html.dark .lang-pill {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.12) !important;
      color: #D4C5B8 !important;
    }
    html.dark .lang-pill--active {
      background: rgba(72,42,30,.90) !important;
      border-color: rgba(255,255,255,.22) !important;
    }
    html.dark .btn-audio {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.15) !important;
      color: #F0E6DC !important;
    }
    html.dark .reader-section { background: #1A0F0A !important; }
    html.dark .reader-card {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.08) !important;
    }
    html.dark .reader-topbar {
      background: rgba(72,42,30,.90) !important;
      border-color: rgba(255,255,255,.08) !important;
    }
    html.dark .reader-topbar__book { color: #F0E6DC !important; }
    html.dark .reader-topbar__ch   { color: #A89080 !important; }
    html.dark .reader-font-ctrl {
      background: rgba(255,255,255,.06) !important;
      border-color: rgba(255,255,255,.10) !important;
    }
    html.dark .reader-font-btn { color: #F0E6DC !important; }
    html.dark .reader-font-val { color: #A89080 !important; }
    html.dark .reader-icon-btn {
      background: rgba(255,255,255,.06) !important;
      border-color: rgba(255,255,255,.10) !important;
    }
    html.dark .reader-chaps-panel {
      background: rgba(62,30,20,.80) !important;
      border-color: rgba(255,255,255,.07) !important;
    }
    html.dark .reader-panel-head { color: #A89080 !important; }
    html.dark .chap-item:hover:not(.chap-item--locked) { background: rgba(255,255,255,.05) !important; }
    html.dark .chap-item__title { color: #D4C5B8 !important; }
    html.dark .chap-item__meta  { color: #A89080 !important; }
    html.dark .chap-num { background: rgba(255,255,255,.10) !important; color: #D4C5B8 !important; }
    html.dark .reader-text-panel { background: #1A0F0A !important; }
    html.dark .reader-ch-title { color: #F0E6DC !important; }
    html.dark .reader-ch-desc  { color: #A89080 !important; }
    html.dark .reader-prose { color: #C8A898 !important; }
    html.dark .reader-prose strong { color: #F0E6DC !important; }
    html.dark .hadith-block {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .hadith-block__text   { color: #F0E6DC !important; }
    html.dark .hadith-block__source { color: #A89080 !important; }
    html.dark .chap-nav-btn {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.14) !important;
      color: #F0E6DC !important;
    }
    html.dark .reader-notes-panel {
      background: rgba(62,30,20,.80) !important;
      border-color: rgba(255,255,255,.07) !important;
    }
    html.dark .reader-tab { color: #A89080 !important; }
    html.dark .note-card {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.06) !important;
    }
    html.dark .note-card__text { color: #C8A898 !important; }
    html.dark .about-section { background: rgba(72,42,30,.40) !important; }
    html.dark .about-text p { color: rgba(240,230,220,.70) !important; }
    html.dark .about-card {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.06) !important;
    }
    html.dark .about-card__title { color: #F0E6DC !important; }
    html.dark .about-card__body  { color: #A89080 !important; }
    html.dark .sec-heading { color: #F0E6DC !important; }
    html.dark .ai-section { background: #1A0F0A !important; }
    html.dark .insight-card {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.06) !important;
      box-shadow: none !important;
    }
    html.dark .insight-card__title { color: #F0E6DC !important; }
    html.dark .insight-card__body  { color: #A89080 !important; }
    html.dark .chapters-section { background: #1A0F0A !important; }
    html.dark .chapters-subtitle { color: #A89080 !important; }
    html.dark .ch-card {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.07) !important;
      box-shadow: none !important;
    }
    html.dark .ch-card__title { color: #F0E6DC !important; }
    html.dark .ch-card__meta  { color: #A89080 !important; }
    html.dark .related-section { background: #251409 !important; }
    /* ─── Standard btn dark mode overrides ─────────────────── */
    html.dark .btn--white {
      background: rgba(72,42,30,.68) !important;
      color: #F0E6DC !important;
      border-color: rgba(255,255,255,.15) !important;
    }
    html.dark .btn--white:hover {
      background: rgba(72,42,30,.90) !important;
      border-color: rgba(255,255,255,.25) !important;
      color: #F0E6DC !important;
    }
    html.dark .btn--outline-primary {
      border-color: rgba(199,81,0,.55) !important;
      color: #E8703A !important;
    }
    html.dark .btn--outline-primary:hover {
      background: rgba(199,81,0,.12) !important;
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: article.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── Hero ───────────────────────────────────────────────── */
    .article-hero {
      position: relative;
      overflow: hidden;
      padding: 36px 24px 0;
      background: #f4ede4;
    }
    .article-hero__glow {
      position: absolute;
      top: -100px; left: 50%;
      transform: translateX(-50%);
      width: 800px; height: 600px;
      background: radial-gradient(circle at center, rgba(199,81,0,.10) 0%, rgba(199,81,0,0) 70%);
      pointer-events: none;
    }
    .article-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* ─── Breadcrumb ─────────────────────────────────────────── */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .breadcrumb a, .breadcrumb span {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: rgba(62,39,35,.5);
      text-decoration: none;
      transition: color .15s;
    }
    .breadcrumb a:hover { color: #c75100; }
    .breadcrumb__sep { color: rgba(62,39,35,.3); font-size: 12px; }

    /* ─── Article badge ──────────────────────────────────────── */
    .article-badge {
      display: inline-flex;
      align-items: center;
      padding: 7px 15px;
      border-radius: 50px;
      background: rgba(199,81,0,.12);
      border: 1px solid rgba(199,81,0,.25);
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 11px;
      color: #c75100;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* ─── Hero image ─────────────────────────────────────────── */
    .hero-img-wrap {
      position: relative;
      height: 500px;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    }
    .hero-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 70%);
    }
    .hero-img-pills {
      position: absolute;
      bottom: 164px;
      left: 40px;
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }
    .hero-pill {
      display: inline-flex;
      align-items: center;
      padding: 8px 18px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #fff;
      white-space: nowrap;
    }
    .hero-pill--date    { background: rgba(255,255,255,.37); border: 1px solid rgba(255,255,255,.25); }
    .hero-pill--reads   { background: rgba(199,81,0,.35);    border: 1px solid rgba(199,81,0,.45); }
    .hero-pill--level   { background: rgba(107,142,35,.25);  border: 1px solid rgba(107,142,35,.75); }
    .hero-img-title {
      position: absolute;
      bottom: 36px;
      left: 40px;
      right: 40px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: clamp(1.5rem, 3.5vw, 3rem);
      color: #fff;
      line-height: 1.25;
      margin: 0;
    }

    /* ─── Author row ─────────────────────────────────────────── */
    .author-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding: 4px 0 20px;
    }
    .author-info__name {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #3e2723;
    }
    .author-info__role {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: #6d4c41;
      margin-top: 1px;
    }
    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 11px 20px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      transition: background .2s, opacity .2s;
      white-space: nowrap;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(62,39,35,.15);
      color: #6d4c41;
      backdrop-filter: blur(4px);
    }
    .action-btn:hover { background: #fff; }
    .action-btn--ai {
      background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%);
      border: none;
      color: #fff;
      box-shadow: 0 2px 8px rgba(199,81,0,.25);
    }
    .action-btn--ai:hover { opacity: .88; background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%); }

    /* ─── Body layout ────────────────────────────────────────── */
    .article-body {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 80px;
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 48px;
    }
    @media (max-width: 1100px) {
      .article-body { grid-template-columns: 1fr; }
      .article-sidebar .ai-assistant-card { position: static; top: auto; }
    }

    /* ─── AI Summary box ─────────────────────────────────────── */
    .ai-summary {
      background: linear-gradient(124deg, rgba(199,81,0,.06) 0%, rgba(201,108,59,.04) 100%);
      border: 1px solid rgba(199,81,0,.15);
      border-radius: 20px;
      padding: 24px;
      margin-bottom: 28px;
    }
    .ai-summary__head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .ai-summary__icon {
      width: 32px; height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
      color: #fff;
    }
    .ai-summary__label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 17px;
      color: #c75100;
      letter-spacing: .02em;
    }
    .ai-summary__text {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #6d4c41;
      line-height: 1.75;
      margin: 0;
    }

    /* ─── Article typography ─────────────────────────────────── */
    .article-content {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .article-p {
      font-family: 'Inter', sans-serif;
      font-size: 18px;
      color: #3e2723;
      line-height: 1.85;
      margin: 0;
    }
    .article-p em { font-style: italic; }
    .article-h2 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 28px;
      color: #3e2723;
      line-height: 1.3;
      margin: 12px 0 0;
    }
    .article-blockquote {
      background: rgba(199,81,0,.04);
      border-left: 2.5px solid #c75100;
      border-radius: 0 16px 16px 0;
      padding: 20px 24px 20px 26px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .article-blockquote__text {
      font-family: 'Inter', sans-serif;
      font-style: italic;
      font-size: 17px;
      color: #6d4c41;
      line-height: 1.7;
      margin: 0;
    }
    .article-blockquote__cite {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: rgba(62,39,35,.5);
      margin: 0;
    }

    /* ─── Sidebar ────────────────────────────────────────────── */
    .ai-assistant-card {
      position: sticky;
      top: 88px;
      overflow: hidden;
      background: linear-gradient(159deg, rgba(62,39,35,.95) 0%, rgba(90,40,20,.90) 100%);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 28px;
      padding: 28px;
      margin-bottom: 28px;
    }
    .ai-assistant-card__glow {
      position: absolute;
      top: -60px; right: -60px;
      width: 250px; height: 250px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(199,81,0,.25) 0%, rgba(199,81,0,0) 70%);
      pointer-events: none;
    }
    .ai-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      position: relative;
    }
    .ai-card-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ai-card-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      line-height: 1.3;
    }
    .ai-card-sub {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: rgba(255,255,255,.45);
    }
    .ai-action-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 12px 16px;
      border-radius: 10px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: rgba(255,255,255,.75);
      cursor: pointer;
      transition: background .2s;
      text-align: left;
      margin-bottom: 8px;
    }
    .ai-action-btn:hover { background: rgba(255,255,255,.12); }
    .ai-action-btn:last-child { margin-bottom: 0; }

    /* ─── Related content ────────────────────────────────────── */
    .related-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 15px;
      color: #3e2723;
      margin: 0 0 12px;
    }
    .related-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 16px;
      padding: 17px;
      cursor: pointer;
      transition: background .2s, box-shadow .2s;
      text-decoration: none;
    }
    .related-item + .related-item { margin-top: 10px; }
    .related-item:hover { background: #fff; box-shadow: 0 4px 16px rgba(62,39,35,.07); }
    .related-item__icon {
      width: 64px; height: 64px;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .related-item__icon img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .related-item__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 13px;
      color: #3e2723;
      line-height: 1.4;
      margin-bottom: 3px;
    }
    .related-item__meta {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: #6d4c41;
    }

    /* ─── Recommended section ────────────────────────────────── */
    .recommended-section {
      background: linear-gradient(157deg, #f4ede4 0%, #fdfcfb 100%);
      padding: 80px 24px;
    }
    .recommended-inner {
      max-width: 1140px;
      margin: 0 auto;
    }
    .rec-card {
      background: #fff;
      border-radius: 28px;
      box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
      overflow: hidden;
      flex-shrink: 0;
      width: 300px;
    }
    .rec-card__img {
      height: 160px;
      background: linear-gradient(135deg, rgba(199,81,0,.15), rgba(107,142,35,.1));
      position: relative;
      overflow: hidden;
    }
    .rec-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
    .rec-card__body { padding: 16px; }
    .rec-card__cat {
      display: inline-flex;
      padding: 4px 8px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      color: #9f2d00;
      background: #ffedd4;
      margin-bottom: 6px;
    }
    .rec-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: #3e2723;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .rec-card__excerpt {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: #8b7567;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ─── Reading progress bar ───────────────────────────────── */
    #read-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      background: linear-gradient(to right, #c75100, #c96c3b);
      width: 0%;
      z-index: 9999;
      transition: width .1s linear;
    }

    @media (max-width: 768px) {
      /* Taller image so pills + title don't collide */
      .hero-img-wrap { height: 360px; }

      /* Move pills to the TOP of the image */
      .hero-img-pills {
        bottom : auto;
        top    : 20px;
        left   : 20px;
        gap    : 8px;
      }
      .hero-pill { font-size: 11px; padding: 6px 12px; }

      /* Title stays at bottom with proper spacing */
      .hero-img-title {
        font-size : 1.2rem;
        bottom    : 20px;
        left      : 20px;
        right     : 20px;
      }

      .article-body { padding: 0 16px 60px; }
    }
    [id] { scroll-margin-top: 80px; }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark .article-hero { background: #1A0F0A !important; }
    html.dark .breadcrumb a,
    html.dark .breadcrumb span { color: rgba(240,230,220,.5) !important; }
    html.dark .breadcrumb a:hover { color: #E8703A !important; }
    html.dark .breadcrumb__sep { color: rgba(240,230,220,.3) !important; }
    html.dark .author-info__name { color: #F0E6DC !important; }
    html.dark .author-info__role { color: #A89080 !important; }
    html.dark .action-btn {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.15) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .action-btn:hover { background: rgba(255,255,255,.14) !important; }
    html.dark .ai-summary {
      background  : rgba(199,81,0,.10) !important;
      border-color: rgba(199,81,0,.25) !important;
    }
    html.dark .ai-summary__text { color: #C8A898 !important; }
    html.dark .article-p { color: #D4C5B8 !important; }
    html.dark .article-h2 { color: #F0E6DC !important; }
    html.dark .article-blockquote {
      background  : rgba(199,81,0,.08) !important;
      border-color: rgba(199,81,0,.50) !important;
    }
    html.dark .article-blockquote__text { color: #C8A898 !important; }
    html.dark .article-blockquote__cite { color: rgba(240,230,220,.45) !important; }
    html.dark .related-title { color: #F0E6DC !important; }
    html.dark .related-item {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
    }
    html.dark .related-item:hover { background: rgba(72,42,30,.85) !important; box-shadow: none !important; }
    html.dark .related-item__title { color: #F0E6DC !important; }
    html.dark .related-item__meta  { color: #A89080 !important; }
    html.dark .recommended-section { background: #1A0F0A !important; }

    /* ─── Rec scroll arrow buttons ──────────────────────────── */
    .rec-arr-btn {
      width        : 40px; height: 40px;
      border-radius: 50%;
      background   : #fff;
      border       : none;
      box-shadow   : 0 4px 6px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
      cursor       : pointer;
      display      : flex;
      align-items  : center;
      justify-content: center;
      color        : #3e2723;
      transition   : box-shadow .2s;
      flex-shrink  : 0;
    }
    .rec-arr-btn:hover { box-shadow: 0 6px 12px rgba(0,0,0,.15); }
    html.dark .rec-arr-btn {
      background: rgba(72,42,30,.68) !important;
      color     : #F0E6DC !important;
      box-shadow: none !important;
      border    : 1px solid rgba(255,255,255,.10) !important;
    }
    html.dark .rec-arr-btn:hover { background: rgba(72,42,30,.90) !important; }
    html.dark .rec-card {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .rec-card__title   { color: #F0E6DC !important; }
    html.dark .rec-card__excerpt { color: #A89080 !important; }
    html.dark .rec-card__cat {
      background: rgba(199,81,0,.18) !important;
      color     : #E8703A !important;
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: podcast.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── Watch/Listen progress bar ──────────────────────────── */
    #read-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      background: linear-gradient(to right, #c75100, #c96c3b);
      width: 0%;
      z-index: 9999;
      transition: width .1s linear;
    }

    /* ─── Episode Hero ───────────────────────────────────────── */
    .episode-hero {
      position: relative;
      overflow: hidden;
      padding: 36px 24px 0;
      background: #f4ede4;
    }
    .episode-hero__glow {
      position: absolute;
      top: -100px; right: -80px;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(199,81,0,.20) 0%, rgba(199,81,0,0) 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .episode-hero__glow2 {
      position: absolute;
      bottom: 50px; left: -60px;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(107,142,35,.12) 0%, rgba(107,142,35,0) 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .episode-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* ─── Breadcrumb ─────────────────────────────────────────── */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .breadcrumb a, .breadcrumb span {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: rgba(62,39,35,.5);
      text-decoration: none;
      transition: color .15s;
    }
    .breadcrumb a:hover { color: #c75100; }
    .breadcrumb__sep { color: rgba(62,39,35,.3); font-size: 12px; }

    /* ─── Heading ────────────────────────────────────────────── */
    .episode-heading {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 56px;
      line-height: 1.1;
      color: #1a1a1a;
      white-space: nowrap;
    }
    @media (max-width:900px) { .episode-heading { font-size: 32px; white-space: normal; } }

    /* ─── Hero image ─────────────────────────────────────────── */
    .hero-img-wrap {
      position: relative;
      height: 500px;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    }
    .hero-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,0) 70%);
    }
    /* Play button */
    .play-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
      border-radius: 50%;
      background: rgba(255,255,255,.90);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .2s, background .2s;
      border: none;
      box-shadow: 0 8px 32px rgba(0,0,0,.25);
    }
    .play-btn:hover { transform: translate(-50%,-50%) scale(1.08); background: #fff; }
    .play-btn svg { margin-left: 4px; }
    /* Title on image */
    .hero-img-bottom {
      position  : absolute;
      bottom    : 40px;
      left      : 40px;
      right     : 40px;
      text-align: left;
    }
    .hero-img-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size  : clamp(1.75rem, 4vw, 2.75rem);
      line-height: 1.15;
      color      : #fff;
      margin     : 0 0 10px;
      text-align : left;
    }
    .hero-img-desc {
      font-family: 'Inter', sans-serif;
      font-size  : clamp(0.875rem, 1.5vw, 1.0625rem);
      line-height: 1.6;
      color      : rgba(255,255,255,.85);
      max-width  : 560px;
      margin     : 0;
      text-align : left;
    }
    @media (max-width:768px) {
      .hero-img-wrap { height: 280px; }
      .hero-img-bottom { bottom: 20px; left: 20px; right: 20px; }
    }

    /* ─── Episode meta row ───────────────────────────────────── */
    .episode-meta-row {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .episode-meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: rgba(0,0,0,.55);
    }
    .episode-meta-item svg { opacity: .65; }

    /* ─── Tags row ───────────────────────────────────────────── */
    .ep-tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 13px;
      border-radius: 50px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: .8px;
      text-transform: uppercase;
    }
    .ep-tag--orange { background: rgba(199,81,0,.10); border: 1px solid rgba(199,81,0,.18); color: #c75100; }
    .ep-tag--olive  { background: rgba(107,142,35,.10); border: 1px solid rgba(107,142,35,.20); color: #6b8e23; }
    .ep-tag--dark   { background: rgba(62,39,35,.08); border: 1px solid rgba(62,39,35,.10); color: #3e2723; }

    /* ─── Action buttons ─────────────────────────────────────── */
    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 11px 20px;
      border-radius: 50px;
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(62,39,35,.15);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #6d4c41;
      cursor: pointer;
      transition: background .2s, box-shadow .2s;
    }
    .action-btn:hover { background: #fff; box-shadow: 0 2px 8px rgba(62,39,35,.12); }
    .action-btn--ai {
      background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%);
      color: #fff;
      border-color: transparent;
    }
    .action-btn--ai:hover { opacity: .92; background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%); }

    /* ─── Episode body ───────────────────────────────────────── */
    .episode-body {
      background: #f4ede4;
      padding: 80px 24px;
    }
    .episode-body__grid {
      max-width: 1140px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 48px;
      align-items: start;
    }
    @media (max-width:900px) {
      .episode-body__grid { grid-template-columns: 1fr; }
    }

    /* ─── Episode notes heading ──────────────────────────────── */
    .episode-notes-heading {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 48px;
      color: #3e2723;
      line-height: 1.2;
      margin: 0 0 8px;
    }
    .episode-notes-desc {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      color: rgba(62,39,35,.60);
      line-height: 1.6;
      margin: 0 0 24px;
    }

    /* ─── Expandable accordion ───────────────────────────────── */
    .ep-accordion {
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(62,39,35,.08);
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 9px;
    }
    .ep-accordion__trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }
    .ep-accordion__label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #3e2723;
    }
    .ep-accordion__chevron {
      font-size: 12px;
      color: rgba(62,39,35,.30);
      transition: transform .25s;
      line-height: 1;
    }
    .ep-accordion.is-open .ep-accordion__chevron { transform: rotate(180deg); }
    .ep-accordion__body {
      display: none;
      padding: 0 22px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: rgba(62,39,35,.65);
      line-height: 1.65;
    }
    .ep-accordion.is-open .ep-accordion__body { display: block; }

    /* ─── AI Episode Assistant card ──────────────────────────── */
    .ai-assistant-card {
      position: sticky;
      top: 88px;
      background: linear-gradient(159deg, rgba(62,39,35,.95) 0%, rgba(90,40,20,.90) 100%);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 28px;
      padding: 28px;
      overflow: hidden;
      margin-bottom: 20px;
    }
    .ai-assistant-card__glow {
      position: absolute;
      top: -60px; right: -60px;
      width: 250px; height: 250px;
      background: radial-gradient(circle, rgba(199,81,0,.25) 0%, rgba(199,81,0,0) 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .ai-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      position: relative;
    }
    .ai-card-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ai-card-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      line-height: 1.3;
    }
    .ai-card-sub {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: rgba(255,255,255,.45);
    }
    .ai-action-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 12px 16px;
      border-radius: 100px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: rgba(255,255,255,.75);
      cursor: pointer;
      transition: background .2s;
      text-align: left;
      margin-bottom: 8px;
    }
    .ai-action-btn:hover { background: rgba(255,255,255,.12); }
    .ai-action-btn:last-child { margin-bottom: 0; }

    /* ─── Related Topics ─────────────────────────────────────── */
    .related-topics {
      position: sticky;
      top: calc(88px + var(--ai-card-h, 320px) + 20px);
    }
    .related-topics__label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: rgba(62,39,35,.30);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .topics-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .topic-tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 13px;
      border-radius: 50px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: .8px;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity .15s;
    }
    .topic-tag:hover { opacity: .75; }
    .topic-tag--orange { background: rgba(199,81,0,.10); border: 1px solid rgba(199,81,0,.18); color: #c75100; }
    .topic-tag--dark   { background: rgba(62,39,35,.08); border: 1px solid rgba(62,39,35,.10); color: #3e2723; }
    .topic-tag--olive  { background: rgba(107,142,35,.10); border: 1px solid rgba(107,142,35,.20); color: #6b8e23; }

    /* ─── Recommended section ────────────────────────────────── */
    .recommended-section {
      background: linear-gradient(157deg, #f4ede4 0%, #fdfcfb 100%);
      padding: 80px 24px;
    }
    .recommended-inner {
      max-width: 1140px;
      margin: 0 auto;
    }
    .rec-row-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
    }
    .rec-row-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 48px;
      color: #3e2723;
      line-height: 1.2;
    }
    .rec-arrow-group { display: flex; gap: 8px; }
    .rec-arrow-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
      transition: box-shadow .2s;
      flex-shrink: 0;
    }
    .rec-arrow-btn:hover { box-shadow: 0 6px 12px rgba(0,0,0,.15); }
    .rec-arrow-btn:disabled { opacity: .4; cursor: default; }
    .rec-scroll {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding-bottom: 8px;
      scrollbar-width: none;
    }
    .rec-scroll::-webkit-scrollbar { display: none; }
    .rec-card {
      background: #fff;
      border-radius: 28px;
      box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
      overflow: hidden;
      flex-shrink: 0;
      width: 300px;
    }
    .rec-card__img {
      height: 160px;
      background: linear-gradient(135deg, rgba(199,81,0,.15), rgba(107,142,35,.10));
      position: relative;
      overflow: hidden;
    }
    .rec-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
    .rec-card__badge-row {
      position: absolute;
      top: 12px; left: 12px;
      display: flex;
      gap: 6px;
    }
    .rc-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 12px;
      height: 24px;
    }
    .rc-badge--white { background: rgba(255,255,255,.90); color: #3e2723; }
    .rc-badge--ai    { background: #f54900; color: #fff; }
    .rec-save-btn {
      position: absolute;
      bottom: 12px; right: 12px;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,.90);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s;
    }
    .rec-save-btn:hover { background: #fff; }
    .rec-card__body { padding: 16px; }
    .rec-card__meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .rec-card__cat {
      display: inline-flex;
      padding: 4px 8px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      color: #9f2d00;
      background: #ffedd4;
    }
    .rec-card__dur {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      color: #6a7282;
    }
    .rec-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: #3e2723;
      line-height: 1.45;
      margin-bottom: 6px;
    }
    .rec-card__excerpt {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: #8b7567;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 6px;
    }
    .rec-card__level {
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      color: #4a5565;
    }

    [id] { scroll-margin-top: 80px; }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark .episode-hero { background: #1A0F0A !important; }
    html.dark .breadcrumb a,
    html.dark .breadcrumb span { color: rgba(240,230,220,.5) !important; }
    html.dark .breadcrumb a:hover { color: #E8703A !important; }
    html.dark .breadcrumb__sep { color: rgba(240,230,220,.3) !important; }
    html.dark .episode-heading { color: #F0E6DC !important; }
    html.dark .episode-meta-item { color: rgba(240,230,220,.55) !important; }
    html.dark .action-btn {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.15) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .action-btn:hover { background: rgba(255,255,255,.14) !important; }
    html.dark .episode-body { background: #1A0F0A !important; }
    html.dark .episode-notes-heading { color: #F0E6DC !important; }
    html.dark .episode-notes-desc { color: rgba(240,230,220,.55) !important; }
    html.dark .ep-accordion {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.08) !important;
    }
    html.dark .ep-accordion__label { color: #F0E6DC !important; }
    html.dark .ep-accordion__body { color: rgba(240,230,220,.65) !important; }
    html.dark .related-topics__label { color: rgba(240,230,220,.30) !important; }
    html.dark .topic-tag--dark {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.10) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .recommended-section { background: #1A0F0A !important; }
    html.dark .rec-row-title { color: #F0E6DC !important; }
    html.dark .rec-arrow-btn {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .rec-card {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .rec-card__title   { color: #F0E6DC !important; }
    html.dark .rec-card__excerpt { color: #A89080 !important; }
    html.dark .rec-card__cat {
      background: rgba(199,81,0,.18) !important;
      color     : #E8703A !important;
    }
    html.dark .rec-card__dur   { color: #A89080 !important; }
    html.dark .rec-card__level { color: #A89080 !important; }
  

/* ═══════════════════════════════════════════════════
   PAGE: audio.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── Progress bar ───────────────────────────────────────── */
    #read-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      background: linear-gradient(to right, #c75100, #c96c3b);
      width: 0%;
      z-index: 9999;
      transition: width .1s linear;
    }

    /* ─── Hero ───────────────────────────────────────────────── */
    .audio-hero {
      position: relative;
      overflow: hidden;
      background: #f4ede4;
      padding: 80px 24px;
      min-height: 674px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .audio-hero__glow1 {
      position: absolute;
      top: -100px; right: -80px;
      width: 400px; height: 400px;
      background: rgba(199,81,0,.20);
      filter: blur(40px);
      border-radius: 200px;
      opacity: .6;
      pointer-events: none;
    }
    .audio-hero__glow2 {
      position: absolute;
      bottom: 50px; left: -60px;
      width: 300px; height: 300px;
      background: rgba(107,142,35,.12);
      filter: blur(40px);
      border-radius: 150px;
      opacity: .6;
      pointer-events: none;
    }
    .audio-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 1140px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px;
    }

    /* ─── Page title ─────────────────────────────────────────── */
    .audio-page-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 56px;
      line-height: 1.27;
      color: #1a1a1a;
      text-align: center;
      white-space: nowrap;
    }
    @media (max-width:768px) { .audio-page-title { font-size: 28px; white-space: normal; text-align: center; } }

    /* ─── Artwork + waveform block ───────────────────────────── */
    .artwork-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      width: 100%;
    }

    /* Album art */
    .album-art {
      width: 320px; height: 320px;
      border-radius: 36px;
      position: relative;
      box-shadow:
        0 32px 80px 0 rgba(62,39,35,.30),
        0 0 0 8px rgba(255,255,255,.40);
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .album-art__bg {
      position: absolute;
      inset: 0;
      border-radius: 36px;
      background: linear-gradient(135deg, #c75100 0%, #3e2723 60%, #6b8e23 100%);
    }
    .album-art__sheen {
      position: absolute;
      inset: 0;
      border-radius: 36px;
      background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%);
    }
    .album-art__emoji {
      position: relative;
      z-index: 1;
      font-size: 100px;
      line-height: 160px;
      text-align: center;
    }

    /* Waveform */
    .waveform {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      height: 80px;
      width: 100%;
      max-width: 600px;
      cursor: pointer;
    }
    .waveform__bar {
      flex: 1;
      min-width: 3px;
      border-radius: 100px;
      transition: opacity .2s;
    }
    .waveform__bar--played   { background: #c75100; }
    .waveform__bar--unplayed { background: rgba(199,81,0,.25); }

    /* ─── Audio player controls ──────────────────────────────── */
    .audio-player {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 0 28px;
      height: 66px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(177deg, rgba(62,39,35,.95) 0%, rgba(90,40,20,.90) 100%);
      width: 100%;
      max-width: 700px;
    }
    .audio-player__thumb {
      width: 40px; height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      flex-shrink: 0;
    }
    .audio-player__info {
      flex: 1;
      min-width: 0;
    }
    .audio-player__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: #fff;
      line-height: 1.6;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .audio-player__sub {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      color: rgba(255,255,255,.45);
      line-height: 1.6;
    }
    .audio-player__controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .ctrl-btn {
      width: 16px; height: 16px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,.70);
      transition: color .15s;
      padding: 0;
    }
    .ctrl-btn:hover { color: #fff; }
    .ctrl-btn--play {
      width: 38px; height: 38px;
      border-radius: 19px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      box-shadow: 0 3px 5px rgba(199,81,0,.40);
      color: #fff;
    }
    .ctrl-btn--play:hover { opacity: .9; }

    /* Progress bar in player */
    .player-progress {
      width: 100px; height: 4px;
      background: rgba(255,255,255,.14);
      border-radius: 100px;
      position: relative;
      cursor: pointer;
      flex-shrink: 0;
    }
    .player-progress__fill {
      height: 100%;
      width: 28%;
      background: linear-gradient(to right, #c75100, #c96c3b);
      border-radius: 100px;
      position: relative;
    }
    .player-progress__dot {
      position: absolute;
      right: -5px; top: 50%;
      transform: translateY(-50%);
      width: 10px; height: 10px;
      background: #c75100;
      border: 1px solid #fff;
      border-radius: 5px;
      box-shadow: 0 2px 6px rgba(199,81,0,.40);
    }

    /* ─── Meta row ───────────────────────────────────────────── */
    .audio-meta-row {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      width: 100%;
    }
    .audio-meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: rgba(0,0,0,.55);
    }

    /* ─── Tags ───────────────────────────────────────────────── */
    .ep-tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 13px;
      border-radius: 50px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: .8px;
      text-transform: uppercase;
    }
    .ep-tag--orange { background: rgba(199,81,0,.10); border: 1px solid rgba(199,81,0,.18); color: #c75100; }
    .ep-tag--olive  { background: rgba(107,142,35,.10); border: 1px solid rgba(107,142,35,.20); color: #6b8e23; }
    .ep-tag--dark   { background: rgba(62,39,35,.08); border: 1px solid rgba(62,39,35,.10); color: #3e2723; }

    /* ─── Action buttons ─────────────────────────────────────── */
    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 11px 20px;
      border-radius: 50px;
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(62,39,35,.15);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #6d4c41;
      cursor: pointer;
      transition: background .2s, box-shadow .2s;
    }
    .action-btn:hover { background: #fff; box-shadow: 0 2px 8px rgba(62,39,35,.12); }
    .action-btn--ai {
      background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%);
      color: #fff;
      border-color: transparent;
    }
    .action-btn--ai:hover { opacity: .92; background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%); }
    .action-btn--ai:hover { opacity: .92; background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%); }

    /* ─── AI mini panel (inline in hero) ────────────────────── */
    .ai-mini-panel {
      width: 100%;
      border: 1px solid rgba(199,81,0,.10);
      border-radius: 20px;
      background: linear-gradient(154deg, rgba(62,39,35,.06) 0%, rgba(199,81,0,.05) 100%);
      padding: 20px 21px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .ai-mini-panel__label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: #c75100;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .ai-mini-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ai-mini-btn {
      display: inline-flex;
      align-items: center;
      padding: 8px 15px;
      border-radius: 50px;
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(62,39,35,.10);
      font-family: 'Arial', sans-serif;
      font-size: 12px;
      color: #3e2723;
      cursor: pointer;
      transition: background .15s, box-shadow .15s;
    }
    .ai-mini-btn:hover { background: #fff; box-shadow: 0 2px 8px rgba(62,39,35,.08); }

    /* ─── Episode body ───────────────────────────────────────── */
    .episode-body {
      background: #f4ede4;
      padding: 80px 24px;
    }
    .episode-body__grid {
      max-width: 1140px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 48px;
      align-items: start;
    }
    @media (max-width:900px) { .episode-body__grid { grid-template-columns: 1fr; } }

    .episode-notes-heading {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 48px;
      color: #3e2723;
      line-height: 1.2;
      margin: 0 0 8px;
    }
    .episode-notes-desc {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      color: rgba(62,39,35,.60);
      line-height: 1.6;
      margin: 0 0 24px;
    }

    /* ─── Accordions ─────────────────────────────────────────── */
    .ep-accordion {
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(62,39,35,.08);
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 9px;
    }
    .ep-accordion__trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }
    .ep-accordion__label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #3e2723;
    }
    .ep-accordion__chevron {
      font-size: 12px;
      color: rgba(62,39,35,.30);
      transition: transform .25s;
    }
    .ep-accordion.is-open .ep-accordion__chevron { transform: rotate(180deg); }
    .ep-accordion__body {
      display: none;
      padding: 0 22px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: rgba(62,39,35,.65);
      line-height: 1.65;
    }
    .ep-accordion.is-open .ep-accordion__body { display: block; }

    /* ─── AI Assistant sidebar card ──────────────────────────── */
    .ai-assistant-card {
      position: sticky;
      top: 88px;
      background: linear-gradient(159deg, rgba(62,39,35,.95) 0%, rgba(90,40,20,.90) 100%);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 28px;
      padding: 28px;
      overflow: hidden;
      margin-bottom: 20px;
    }
    .ai-assistant-card__glow {
      position: absolute;
      top: -60px; right: -60px;
      width: 250px; height: 250px;
      background: radial-gradient(circle, rgba(199,81,0,.25) 0%, rgba(199,81,0,0) 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .ai-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      position: relative;
    }
    .ai-card-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #c75100, #c96c3b);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ai-card-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; color:#fff; line-height:1.3; }
    .ai-card-sub   { font-family:'Inter',sans-serif; font-size:11px; color:rgba(255,255,255,.45); }
    .ai-action-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 12px 16px;
      border-radius: 100px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: rgba(255,255,255,.75);
      cursor: pointer;
      transition: background .2s;
      text-align: left;
      margin-bottom: 8px;
    }
    .ai-action-btn:hover { background: rgba(255,255,255,.12); }
    .ai-action-btn:last-child { margin-bottom: 0; }

    /* ─── Related Topics ─────────────────────────────────────── */
    .related-topics__label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: rgba(62,39,35,.30);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .topics-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
    .topic-tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 13px;
      border-radius: 50px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: .8px;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity .15s;
    }
    .topic-tag:hover { opacity: .75; }
    .topic-tag--orange { background: rgba(199,81,0,.10); border: 1px solid rgba(199,81,0,.18); color: #c75100; }
    .topic-tag--dark   { background: rgba(62,39,35,.08); border: 1px solid rgba(62,39,35,.10); color: #3e2723; }
    .topic-tag--olive  { background: rgba(107,142,35,.10); border: 1px solid rgba(107,142,35,.20); color: #6b8e23; }

    /* ─── Explore by Mood section ────────────────────────────── */
    .mood-section {
      padding: 80px 24px;
      background: linear-gradient(152deg, #f4ede4 0%, #f6f0e8 14%, #f7f2ec 29%, #f9f5f0 43%, #faf7f3 57%, #fcfaf7 71%, #fdfcfb 86%, #ffffff 100%);
    }
    .mood-section__inner {
      max-width: 1140px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .mood-row-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .mood-row-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 48px;
      color: #3e2723;
      line-height: 1.2;
    }
    .mood-arrow-group { display: flex; gap: 8px; }
    .mood-arrow-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
      transition: box-shadow .2s;
      flex-shrink: 0;
    }
    .mood-arrow-btn:hover { box-shadow: 0 6px 12px rgba(0,0,0,.15); }
    .mood-arrow-btn:disabled { opacity: .4; cursor: default; }

    /* Mood filter pills */
    .mood-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .mood-pill {
      display: inline-flex;
      align-items: center;
      padding: 15px 27px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s;
      border: 1px solid rgba(62,39,35,.10);
    }
    .mood-pill--active {
      background: #c75100;
      border-color: #c75100;
      color: #fff;
    }
    .mood-pill--inactive {
      background: rgba(255,255,255,.80);
      color: #3e2723;
    }
    .mood-pill--inactive:hover { background: #fff; }

    /* Rec cards scroll */
    .mood-scroll {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding-bottom: 8px;
      scrollbar-width: none;
    }
    .mood-scroll::-webkit-scrollbar { display: none; }

    /* ─── Rec card ───────────────────────────────────────────── */
    .rec-card {
      background: #fff;
      border-radius: 28px;
      box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
      overflow: hidden;
      flex-shrink: 0;
      width: 300px;
    }
    .rec-card__img {
      height: 160px;
      background: linear-gradient(135deg, rgba(199,81,0,.15), rgba(107,142,35,.10));
      position: relative;
      overflow: hidden;
    }
    .rec-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
    .rec-card__badge-row {
      position: absolute;
      top: 12px; left: 12px;
      display: flex;
      gap: 6px;
    }
    .rc-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 12px;
      height: 24px;
    }
    .rc-badge--white { background: rgba(255,255,255,.90); color: #3e2723; }
    .rc-badge--ai    { background: #f54900; color: #fff; }
    .rec-save-btn {
      position: absolute;
      bottom: 12px; right: 12px;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,.90);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s;
    }
    .rec-save-btn:hover { background: #fff; }
    .rec-card__body { padding: 16px; }
    .rec-card__meta-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
    .rec-card__cat { display:inline-flex; padding:4px 8px; border-radius:50px; font-family:'Montserrat',sans-serif; font-size:12px; color:#9f2d00; background:#ffedd4; }
    .rec-card__dur { display:flex; align-items:center; gap:4px; font-family:'Montserrat',sans-serif; font-size:12px; color:#6a7282; }
    .rec-card__title { font-family:'Montserrat',sans-serif; font-weight:600; font-size:16px; color:#3e2723; line-height:1.45; margin-bottom:6px; }
    .rec-card__excerpt { font-family:'Inter',sans-serif; font-size:14px; color:#8b7567; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
    .rec-card__level { font-family:'Montserrat',sans-serif; font-size:12px; color:#4a5565; }

    [id] { scroll-margin-top: 80px; }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark .audio-hero { background: #1A0F0A !important; }
    html.dark .audio-page-title { color: #F0E6DC !important; }
    html.dark .audio-meta-item { color: rgba(240,230,220,.55) !important; }
    html.dark .action-btn {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.15) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .action-btn:hover { background: rgba(255,255,255,.14) !important; }
    html.dark .ai-mini-panel {
      background  : rgba(199,81,0,.08) !important;
      border-color: rgba(199,81,0,.18) !important;
    }
    html.dark .ai-mini-btn {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .ai-mini-btn:hover { background: rgba(72,42,30,.90) !important; box-shadow: none !important; }
    html.dark .episode-body { background: #1A0F0A !important; }
    html.dark .episode-notes-heading { color: #F0E6DC !important; }
    html.dark .episode-notes-desc { color: rgba(240,230,220,.55) !important; }
    html.dark .ep-accordion {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.08) !important;
    }
    html.dark .ep-accordion__label { color: #F0E6DC !important; }
    html.dark .ep-accordion__body  { color: rgba(240,230,220,.65) !important; }
    html.dark .related-topics__label { color: rgba(240,230,220,.30) !important; }
    html.dark .topic-tag--dark {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.10) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .mood-section { background: #1A0F0A !important; }
    html.dark .mood-row-title { color: #F0E6DC !important; }
    html.dark .mood-arrow-btn {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .mood-pill--inactive {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .mood-pill--inactive:hover { background: rgba(72,42,30,.90) !important; }
    html.dark .rec-card {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .rec-card__title   { color: #F0E6DC !important; }
    html.dark .rec-card__excerpt { color: #A89080 !important; }
    html.dark .rec-card__cat {
      background: rgba(199,81,0,.18) !important;
      color     : #E8703A !important;
    }
    html.dark .rec-card__dur   { color: #A89080 !important; }
    html.dark .rec-card__level { color: #A89080 !important; }
  

/* ═══════════════════════════════════════════════════
   PAGE: design-single.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── Reading progress bar ──────────────────────── */
    #read-progress {
      position: fixed; top: 0; left: 0;
      height: 3px; width: 0%;
      background: linear-gradient(to right, #c75100, #c96c3b);
      z-index: 9999; transition: width .1s linear;
    }

    /* ─── Hero ──────────────────────────────────────── */
    .ds-hero {
      background : #f4ede4;
      padding    : 36px 24px 0;
      overflow   : hidden; position: relative;
    }
    .ds-hero__glow {
      position   : absolute; top: -80px; right: -60px;
      width: 380px; height: 380px; border-radius: 50%;
      background : radial-gradient(circle, rgba(199,81,0,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .ds-hero__inner {
      position   : relative; z-index: 1;
      max-width  : 1140px; margin: 0 auto;
      display    : flex; flex-direction: column; gap: 20px;
    }

    /* ─── Breadcrumb ────────────────────────────────── */
    .breadcrumb {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .breadcrumb a, .breadcrumb span {
      font-family: 'Montserrat', sans-serif; font-weight: 500;
      font-size: 13px; color: rgba(62,39,35,.5);
      text-decoration: none; transition: color .15s;
    }
    .breadcrumb a:hover { color: #c75100; }
    .breadcrumb__sep { color: rgba(62,39,35,.3); font-size: 12px; }

    /* ─── Hero image card ───────────────────────────── */
    .ds-hero-img-wrap {
      position      : relative;
      border-radius : 24px;
      overflow      : hidden;
      aspect-ratio  : 4 / 3;
      max-height    : 540px;
      background    : transparent;
      cursor        : pointer;
    }
    .ds-hero-img-wrap img {
      width: 100%; height: 100%;
      object-fit: contain; display: block;
      transition: transform .4s ease;
    }
    .ds-hero-img-wrap:hover img { transform: scale(1.03); }
    .ds-hero__overlay {
      position   : absolute; inset: 0;
      background : linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, transparent 72%);
      pointer-events: none;
    }

    /* Zoom hint badge */
    .ds-zoom-hint {
      position       : absolute; top: 16px; right: 16px;
      background     : rgba(255,255,255,.88);
      backdrop-filter: blur(8px);
      border-radius  : 50px; padding: 6px 14px;
      display        : flex; align-items: center; gap: 6px;
      font-family    : 'Montserrat', sans-serif; font-weight: 600;
      font-size      : 11px; color: var(--clr-brand-dark);
      opacity        : 0; transition: opacity .2s;
      pointer-events : none;
    }
    .ds-hero-img-wrap:hover .ds-zoom-hint { opacity: 1; }
    @media (max-width: 640px) { .ds-zoom-hint { opacity: 1; } }

    /* Arabic text overlay */
    .ds-hero__text {
      position : absolute; bottom: 0; left: 0; right: 0;
      padding  : 32px 32px 28px;
    }
    .ds-hero__arabic {
      font-family : 'Scheherazade New', serif; font-weight: 700;
      font-size   : clamp(1.8rem, 3.5vw, 2.8rem);
      color       : #fff; direction: rtl; text-align: right;
      line-height : 1.6; margin-bottom: 8px;
      text-shadow : 0 2px 10px rgba(0,0,0,.5);
    }
    .ds-hero__trans {
      font-size  : 0.88rem; font-weight: 500;
      color      : rgba(255,255,255,.8); text-align: right;
    }
    @media (max-width: 640px) {
      .ds-hero-img-wrap { aspect-ratio: 1; max-height: none; }
      .ds-hero__text { padding: 20px 18px 16px; }
      .ds-hero__arabic { font-size: 1.4rem; }
    }

    /* ─── Heading row ───────────────────────────────── */
    .ds-heading {
      font-family : 'Montserrat', sans-serif; font-weight: 700;
      font-size   : clamp(1.5rem, 3.5vw, 2.6rem);
      color       : #1a1a1a; line-height: 1.2;
    }

    /* ─── Meta row ──────────────────────────────────── */
    .ds-meta-row {
      display     : flex; align-items: center;
      gap         : 18px; flex-wrap: wrap;
    }
    .ds-meta-item {
      display     : flex; align-items: center; gap: 5px;
      font-family : 'Inter', sans-serif; font-size: 13px;
      color       : rgba(0,0,0,.55);
    }
    .ds-meta-item svg { opacity: .65; }

    /* ─── Tags ──────────────────────────────────────── */
    .ds-tag {
      display      : inline-flex; align-items: center;
      padding      : 6px 13px; border-radius: 50px;
      font-family  : 'Inter', sans-serif; font-weight: 600;
      font-size    : 11px; letter-spacing: .8px; text-transform: uppercase;
    }
    .ds-tag--orange { background: rgba(199,81,0,.10); border: 1px solid rgba(199,81,0,.18); color: #c75100; }
    .ds-tag--olive  { background: rgba(107,142,35,.10); border: 1px solid rgba(107,142,35,.20); color: #6b8e23; }
    .ds-tag--dark   { background: rgba(62,39,35,.08); border: 1px solid rgba(62,39,35,.10); color: #3e2723; }

    /* ─── Action buttons row ────────────────────────── */
    .ds-action-btn {
      display      : inline-flex; align-items: center; gap: 6px;
      padding      : 11px 20px; border-radius: 50px;
      font-family  : 'Montserrat', sans-serif; font-weight: 600;
      font-size    : 13px; cursor: pointer;
      background   : rgba(255,255,255,.8);
      border       : 1px solid rgba(62,39,35,.15);
      backdrop-filter: blur(4px);
      color        : #6d4c41; transition: background .2s, color .2s, border-color .2s;
      text-decoration: none;
    }
    .ds-action-btn:hover { background: #fff; box-shadow: 0 2px 8px rgba(62,39,35,.12); }
    .ds-action-btn--primary {
      background   : linear-gradient(130deg, #c75100 0%, #c96c3b 100%);
      color        : #fff; border-color: transparent;
    }
    .ds-action-btn--primary:hover { opacity: .9; background: linear-gradient(130deg, #c75100 0%, #c96c3b 100%); }
    /* saved / liked state */
    .ds-action-btn.is-saved {
      background   : var(--clr-primary);
      border-color : var(--clr-primary);
      color        : #fff !important;
    }
    .ds-action-btn.is-saved svg path { fill: #fff !important; stroke: #fff !important; }

    /* ─── Body layout ───────────────────────────────── */
    .ds-body {
      background : #f4ede4;
      padding    : 64px 24px 80px;
    }
    .ds-body__grid {
      max-width  : 1140px; margin: 0 auto;
      display    : grid;
      grid-template-columns: 1fr 340px;
      gap        : 48px; align-items: start;
    }
    @media (max-width: 920px) {
      .ds-body__grid { grid-template-columns: 1fr; }
    }

    /* ─── Quote block ───────────────────────────────── */
    .ds-quote-block {
      background   : #fff; border-radius: 20px;
      padding      : 32px 36px; margin-bottom: 32px;
      border-left  : 4px solid var(--clr-primary);
    }
    .ds-quote-arabic {
      font-family  : 'Scheherazade New', serif; font-weight: 700;
      font-size    : clamp(1.8rem, 4vw, 2.6rem);
      color        : var(--clr-brand-dark); direction: rtl; text-align: right;
      line-height  : 1.7; margin-bottom: 16px;
    }
    .ds-quote-trans {
      font-family  : 'Inter', sans-serif; font-size: 1.05rem;
      line-height  : 1.7; color: rgba(62,39,35,.75); font-style: italic;
      margin-bottom: 16px;
    }
    .ds-quote-source {
      display      : inline-flex; align-items: center; gap: 8px;
      font-family  : 'Montserrat', sans-serif; font-weight: 700;
      font-size    : 0.78rem; letter-spacing: .08em; text-transform: uppercase;
      color        : var(--clr-primary);
    }

    /* ─── Body text section ─────────────────────────── */
    .ds-body-heading {
      font-family  : 'Montserrat', sans-serif; font-weight: 700;
      font-size    : clamp(1.5rem, 3vw, 2rem);
      color        : var(--clr-brand-dark); margin-bottom: 20px;
    }
    .ds-prose p {
      font-family  : 'Inter', sans-serif; font-size: 1rem;
      line-height  : 1.8; color: rgba(62,39,35,.75); margin-bottom: 16px;
    }

    /* ─── Sidebar ───────────────────────────────────── */
    .ds-sidebar { display: flex; flex-direction: column; gap: 20px; }

    /* ─── AI Assistant card (unified) ──────────────── */
    .ai-assistant-card {
      position     : sticky; top: 96px;
      overflow     : hidden;
      background   : linear-gradient(159deg, rgba(62,39,35,.95) 0%, rgba(90,40,20,.90) 100%);
      border       : 1px solid rgba(255,255,255,.08);
      border-radius: 28px; padding: 28px;
    }
    .ai-assistant-card__glow {
      position     : absolute; top: -60px; right: -60px;
      width: 250px; height: 250px; border-radius: 50%;
      background   : radial-gradient(circle, rgba(199,81,0,.25) 0%, rgba(199,81,0,0) 70%);
      pointer-events: none;
    }
    .ai-card-header {
      display      : flex; align-items: center; gap: 10px;
      margin-bottom: 20px; position: relative;
    }
    .ai-card-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background   : linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display      : flex; align-items: center; justify-content: center;
      flex-shrink  : 0;
    }
    .ai-card-title {
      font-family  : 'Montserrat', sans-serif; font-weight: 700;
      font-size    : 14px; color: #fff; line-height: 1.3;
    }
    .ai-card-sub {
      font-family  : 'Inter', sans-serif; font-size: 11px;
      color        : rgba(255,255,255,.45);
    }
    .ai-action-btn {
      display      : flex; align-items: center; gap: 8px;
      width        : 100%; padding: 12px 16px; border-radius: 10px;
      background   : rgba(255,255,255,.07);
      border       : 1px solid rgba(255,255,255,.10);
      font-family  : 'Inter', sans-serif; font-weight: 500;
      font-size    : 13px; color: rgba(255,255,255,.75);
      cursor       : pointer; transition: background .2s;
      text-align   : left; margin-bottom: 8px; text-decoration: none;
    }
    .ai-action-btn:hover { background: rgba(255,255,255,.12); }
    .ai-action-btn:last-child { margin-bottom: 0; }

    /* Share box */
    .ds-share-box {
      background   : #fff; border-radius: 16px; padding: 20px;
    }
    .ds-share-title {
      font-family  : 'Montserrat', sans-serif; font-weight: 700;
      font-size    : 0.88rem; color: var(--clr-brand-dark); margin-bottom: 14px;
    }
    .ds-share-grid {
      display               : grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    }
    .ds-share-btn {
      display      : flex; flex-direction: column; align-items: center; gap: 5px;
      background   : var(--clr-surface-base); border: none; border-radius: 12px;
      padding      : 12px 6px; cursor: pointer; text-decoration: none;
      font-size    : 0.62rem; font-weight: 600; color: var(--clr-brand-dark);
      transition   : background .15s, transform .15s;
    }
    .ds-share-btn:hover { background: var(--clr-surface-warm); transform: translateY(-2px); }

    /* ─── Related designs ───────────────────────────── */
    .ds-related {
      background   : linear-gradient(157deg, #f4ede4 0%, #fdfcfb 100%);
      padding      : 64px 24px 80px;
    }
    .ds-related__inner { max-width: 1140px; margin: 0 auto; }
    .ds-related__header {
      display      : flex; align-items: center;
      justify-content: space-between; margin-bottom: 28px; gap: 16px;
    }
    .ds-related__title {
      font-family  : 'Montserrat', sans-serif; font-weight: 700;
      font-size    : clamp(1.4rem, 3vw, 2rem); color: var(--clr-brand-dark);
    }
    /* cards in related use the same .design-card classes from designs.html */
    .ds-rec-scroll {
      display      : flex; gap: 16px;
      overflow-x   : auto; scroll-behavior: smooth;
      padding-bottom: 8px; scrollbar-width: none;
    }
    .ds-rec-scroll::-webkit-scrollbar { display: none; }
    .ds-rec-card {
      flex-shrink  : 0; width: 260px;
      background   : #fff; border-radius: 16px; overflow: hidden;
      box-shadow   : 0 2px 12px rgba(62,39,35,.08);
      cursor       : pointer; text-decoration: none;
      transition   : box-shadow .2s, transform .2s;
    }
    .ds-rec-card:hover { box-shadow: 0 10px 32px rgba(62,39,35,.16); transform: translateY(-4px); }
    .ds-rec-img-wrap {
      position     : relative; aspect-ratio: 4/3; overflow: hidden;
    }
    .ds-rec-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ds-rec-overlay {
      position     : absolute; inset: 0;
      background   : linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
    }
    .ds-rec-text {
      position     : absolute; bottom: 0; padding: 10px 12px;
    }
    .ds-rec-arabic {
      font-family  : 'Scheherazade New', serif; font-weight: 700;
      font-size    : 1rem; color: #fff; direction: rtl;
      text-align   : right; display: block; margin-bottom: 2px;
      text-shadow  : 0 1px 4px rgba(0,0,0,.5);
    }
    .ds-rec-trans {
      font-size    : 0.62rem; color: rgba(255,255,255,.7); display: block;
    }
    .ds-rec-footer {
      padding      : 10px 12px;
      display      : flex; align-items: center; justify-content: space-between;
    }
    .ds-rec-source { font-size: 0.68rem; font-weight: 700; color: var(--clr-primary); }
    .ds-rec-cat {
      font-size    : 0.58rem; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--clr-muted);
    }

    /* ─── Fullscreen Zoom Lightbox ──────────────────── */
    #zoom-lb {
      position     : fixed; inset: 0; z-index: 20000;
      background   : rgba(0,0,0,.97);
      display      : flex; align-items: center; justify-content: center;
      opacity      : 0; pointer-events: none;
      transition   : opacity .25s;
    }
    #zoom-lb.is-open { opacity: 1; pointer-events: all; }

    /* Top bar */
    .zlb-topbar {
      position     : fixed; top: 0; left: 0; right: 0;
      display      : flex; align-items: center; justify-content: space-between;
      padding      : 14px 20px; z-index: 2;
      background   : linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
    }
    .zlb-topbar-title {
      font-family  : 'Scheherazade New', serif; font-size: 1.1rem;
      color        : rgba(255,255,255,.7); direction: rtl;
    }
    .zlb-controls {
      display      : flex; align-items: center; gap: 8px;
    }
    .zlb-ctrl-btn {
      width: 38px; height: 38px; border-radius: 50%;
      background   : rgba(255,255,255,.12); border: none;
      color        : #fff; cursor: pointer; font-size: 16px;
      display      : flex; align-items: center; justify-content: center;
      transition   : background .15s;
    }
    .zlb-ctrl-btn:hover { background: rgba(255,255,255,.25); }
    .zlb-zoom-pct {
      font-family  : 'Montserrat', sans-serif; font-weight: 600;
      font-size    : 13px; color: rgba(255,255,255,.6);
      min-width    : 42px; text-align: center;
    }

    /* Image container */
    .zlb-img-container {
      width: 90vw; height: 90vh;
      display      : flex; align-items: center; justify-content: center;
      overflow     : hidden; cursor: zoom-in;
    }
    .zlb-img-container.zoomed { cursor: grab; }
    .zlb-img-container.zoomed:active { cursor: grabbing; }
    #zlb-img {
      max-width    : 100%; max-height: 100%;
      object-fit   : contain; display: block;
      transform-origin: center center;
      border-radius: 8px;
      user-select  : none; pointer-events: none;
      will-change  : transform;
    }

    /* Bottom bar */
    .zlb-bottombar {
      position     : fixed; bottom: 0; left: 0; right: 0;
      padding      : 20px 24px 24px;
      background   : linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
      display      : flex; align-items: center; justify-content: space-between;
      flex-wrap    : wrap; gap: 12px; z-index: 2;
    }
    .zlb-text { text-align: right; }
    .zlb-arabic {
      font-family  : 'Scheherazade New', serif; font-weight: 700;
      font-size    : clamp(1.3rem, 2.5vw, 1.8rem);
      color        : #fff; direction: rtl; margin-bottom: 4px;
      text-shadow  : 0 2px 8px rgba(0,0,0,.5);
    }
    .zlb-trans {
      font-size    : 0.8rem; color: rgba(255,255,255,.68);
    }
    .zlb-actions { display: flex; align-items: center; gap: 8px; }
    .zlb-action-btn {
      display      : inline-flex; align-items: center; gap: 6px;
      padding      : 9px 18px; border-radius: 50px;
      font-family  : 'Montserrat', sans-serif; font-weight: 600;
      font-size    : 12px; cursor: pointer;
      background   : rgba(255,255,255,.1);
      border       : 1px solid rgba(255,255,255,.18);
      color        : #fff; text-decoration: none;
      transition   : background .15s;
    }
    .zlb-action-btn:hover { background: rgba(255,255,255,.2); }
    .zlb-action-btn.is-saved { background: var(--clr-primary); border-color: var(--clr-primary); }

    @media (max-width: 580px) {
      .zlb-bottombar { flex-direction: column; align-items: flex-end; }
    }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark .ds-hero          { background: #1A0F0A !important; }
    html.dark .breadcrumb a,
    html.dark .breadcrumb span  { color: rgba(240,230,220,.5) !important; }
    html.dark .breadcrumb a:hover { color: #E8703A !important; }
    html.dark .breadcrumb__sep  { color: rgba(240,230,220,.3) !important; }
    html.dark .ds-heading       { color: #F0E6DC !important; }
    html.dark .ds-meta-item     { color: rgba(240,230,220,.55) !important; }
    html.dark .ds-tag--dark {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.10) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .ds-action-btn {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.15) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .ds-action-btn:hover { background: rgba(255,255,255,.14) !important; }
    html.dark .ds-action-btn--primary {
      background  : linear-gradient(130deg, #c75100 0%, #c96c3b 100%) !important;
      color       : #fff !important;
      border-color: transparent !important;
    }
    html.dark .ds-action-btn--primary:hover {
      background  : linear-gradient(130deg, #c75100 0%, #c96c3b 100%) !important;
      opacity     : .9;
    }

    html.dark .ds-body          { background: #1A0F0A !important; }
    html.dark .ds-quote-block {
      background  : rgba(72,42,30,.68) !important;
      border-color: var(--clr-primary) !important;
    }
    html.dark .ds-quote-arabic  { color: #F0E6DC !important; }
    html.dark .ds-quote-trans   { color: rgba(240,230,220,.75) !important; }
    html.dark .ds-body-heading  { color: #F0E6DC !important; }
    html.dark .ds-prose p       { color: rgba(240,230,220,.75) !important; }

    html.dark .ds-share-box {
      background  : rgba(72,42,30,.68) !important;
      border      : 1px solid rgba(255,255,255,.10) !important;
    }
    html.dark .ds-share-title   { color: #F0E6DC !important; }
    html.dark .ds-share-btn {
      background  : rgba(255,255,255,.07) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .ds-share-btn:hover { background: rgba(255,255,255,.12) !important; }

    html.dark .ds-related {
      background  : #1A0F0A !important;
    }
    html.dark .ds-related__title { color: #F0E6DC !important; }
    html.dark .ds-rec-card {
      background  : rgba(72,42,30,.68) !important;
      box-shadow  : none !important;
    }
    html.dark .ds-rec-footer    { background: rgba(72,42,30,.68) !important; }
    html.dark .ds-rec-source    { color: #E8703A !important; }
    html.dark .ds-rec-cat       { color: #A89080 !important; }

    html.dark .ds-zoom-hint {
      background  : rgba(72,42,30,.85) !important;
      color       : #F0E6DC !important;
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: designs.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ═══════════════════════════════════════════════════════
       DESIGNS PAGE — Custom Styles
    ═══════════════════════════════════════════════════════ */

    /* ─── Hero ──────────────────────────────────────────── */
    .designs-hero {
      position   : relative;
      background : linear-gradient(150deg, #2C1B17 0%, #3E2723 45%, #1a0d0a 100%);
      padding    : 36px 0 40px;
      overflow   : hidden;
    }
    .designs-hero__pattern {
      position         : absolute; inset : 0;
      background-image : url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V66l28 16 28-16v18L28 100z' fill='%23C75100' fill-opacity='0.04'/%3E%3C/svg%3E");
      pointer-events   : none;
    }
    .designs-hero__glow-r {
      position       : absolute; top: -160px; right: -80px;
      width: 520px; height: 520px;
      background     : radial-gradient(circle, rgba(199,81,0,.18) 0%, transparent 70%);
      pointer-events : none;
    }
    .designs-hero__glow-l {
      position       : absolute; bottom: -100px; left: -80px;
      width: 380px; height: 380px;
      background     : radial-gradient(circle, rgba(107,142,35,.12) 0%, transparent 70%);
      pointer-events : none;
    }
    .designs-hero__inner {
      position   : relative; z-index: 1;
      max-width  : 780px; margin: 0 auto;
      text-align : center;
    }
    .designs-hero__eyebrow {
      display        : inline-flex; align-items: center; gap: 8px;
      background     : rgba(199,81,0,.18);
      border         : 1px solid rgba(199,81,0,.32);
      border-radius  : 50px; padding: 6px 16px;
      font-family    : 'Montserrat', sans-serif; font-weight: 700;
      font-size      : 11px; letter-spacing: 1.5px; text-transform: uppercase;
      color          : #e8703a; margin-bottom: 14px;
    }
    .designs-hero__title {
      font-family    : 'Montserrat', sans-serif; font-weight: 800;
      font-size      : clamp(1.6rem, 4vw, 2.5rem);
      color          : #fff; line-height: 1.15; margin-bottom: 8px;
    }
    .designs-hero__subtitle-ar {
      font-family    : 'Scheherazade New', serif;
      font-size      : clamp(1.4rem, 3vw, 2rem);
      color          : rgba(255,255,255,.42);
      direction      : rtl; margin-bottom: 12px;
    }
    .designs-hero__desc {
      font-size      : 0.9rem; line-height: 1.6;
      color          : rgba(255,255,255,.58);
      max-width      : 500px; margin: 0 auto 20px;
    }
    .designs-hero__stats {
      display         : flex; align-items: center; justify-content: center;
      gap             : 40px; flex-wrap: wrap;
    }
    .designs-hero__stat-num {
      display         : block;
      font-family     : 'Montserrat', sans-serif; font-weight: 800;
      font-size       : 1.75rem; color: #e8703a; line-height: 1;
      margin-bottom   : 4px;
    }
    .designs-hero__stat-label {
      font-size       : 0.72rem; text-transform: uppercase;
      letter-spacing  : 0.1em; color: rgba(255,255,255,.4);
    }

    /* filter-bar styles are in main.css — no overrides needed here */

    /* ─── Grid Section ──────────────────────────────────── */
    .designs-section {
      max-width : 1200px; margin: 0 auto;
      padding   : 36px 24px 80px;
    }
    .designs-section__header {
      display         : flex; align-items: center;
      justify-content : space-between; gap: 12px;
      margin-bottom   : 24px; flex-wrap: wrap;
    }
    .designs-section__title {
      font-family : 'Montserrat', sans-serif; font-weight: 700;
      font-size   : 1.15rem; color: var(--clr-brand-dark);
    }
    .sort-select {
      appearance    : none;
      background    : var(--clr-surface-base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238B7567' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 12px center;
      border        : 1px solid rgba(62,39,35,.12);
      border-radius : 10px; padding: 8px 32px 8px 14px;
      font-family   : 'Montserrat', sans-serif; font-weight: 600;
      font-size     : 12px; color: var(--clr-brand-dark); cursor: pointer;
    }
    .sort-select:focus { outline: none; border-color: var(--clr-primary); }

    /* ─── Design Grid ───────────────────────────────────── */
    .designs-grid {
      display               : grid;
      grid-template-columns : repeat(3, 1fr);
      gap                   : 20px;
    }
    @media (max-width: 1024px) {
      .designs-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 580px) {
      .designs-grid { grid-template-columns: 1fr; gap: 14px; }
      .designs-section { padding: 24px 16px 64px; }
    }

    /* ─── Design Card ───────────────────────────────────── */
    .design-card {
      border-radius : 18px;
      overflow      : hidden;
      background    : #fff;
      box-shadow    : 0 2px 12px rgba(62,39,35,.08);
      transition    : box-shadow .25s, transform .25s;
    }
    .design-card:hover {
      box-shadow : 0 14px 44px rgba(62,39,35,.18);
      transform  : translateY(-5px);
    }
    /* ── img-wrap: 4:3 ratio ── */
    .design-card__media {
      position     : relative;
      aspect-ratio : 4 / 3;
      overflow     : hidden;
    }
    .design-card__img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform .45s ease;
    }
    .design-card:hover .design-card__img { transform: scale(1.07); }
    /* always-on gradient overlay */
    .design-card__overlay {
      position : absolute; inset: 0;
      background : linear-gradient(
        to top,
        rgba(0,0,0,.85)  0%,
        rgba(0,0,0,.50) 42%,
        rgba(0,0,0,.10) 72%,
        transparent     100%
      );
      pointer-events : none;
    }
    /* category badge — top left */
    .design-card__cat {
      position       : absolute; top: 12px; left: 12px; z-index: 3;
      background     : rgba(255,255,255,.88);
      backdrop-filter: blur(8px);
      border-radius  : 50px; padding: 4px 12px;
      font-family    : 'Montserrat', sans-serif; font-weight: 700;
      font-size      : 9.5px; letter-spacing: .09em; text-transform: uppercase;
      color          : var(--clr-brand-dark);
      box-shadow     : 0 2px 8px rgba(0,0,0,.14);
    }
    /* Arabic text — always visible at bottom */
    .design-card__text {
      position : absolute; bottom: 0; left: 0; right: 0;
      padding  : 14px 14px 12px; z-index: 2;
      pointer-events : none;
    }
    .design-card__arabic {
      font-family : 'Scheherazade New', serif; font-weight: 700;
      font-size   : 1.25rem; color: #fff;
      direction   : rtl; text-align: right;
      line-height : 1.65; display: block; margin-bottom: 3px;
      text-shadow : 0 1px 6px rgba(0,0,0,.6);
    }
    .design-card__title {
      font-family : 'Montserrat', sans-serif; font-weight: 700;
      font-size   : 1rem; color: #fff;
      direction   : ltr; text-align: left;
      line-height : 1.4; display: block; margin-bottom: 3px;
      text-shadow : 0 1px 6px rgba(0,0,0,.6);
    }
    .design-card__trans {
      font-size   : 0.7rem; font-weight: 500;
      color       : rgba(255,255,255,.7); display: block;
      text-shadow : 0 1px 4px rgba(0,0,0,.5);
    }
    /* Action buttons — always visible */
    .design-card__btns {
      position   : absolute; top: 12px; right: 12px; z-index: 4;
      display    : flex; flex-direction: column; gap: 6px;
      pointer-events : all;
    }
    .dc-btn {
      width          : 36px; height: 36px; border-radius: 50%;
      background     : rgba(255,255,255,.9);
      backdrop-filter: blur(8px);
      border         : none; cursor: pointer;
      display        : flex; align-items: center; justify-content: center;
      color          : var(--clr-brand-dark);
      box-shadow     : 0 2px 8px rgba(0,0,0,.22);
      transition     : background .15s, color .15s, transform .15s;
    }
    .dc-btn:hover { background: #fff; transform: scale(1.12); }
    /* heart saved state */
    .dc-btn.is-saved { background: var(--clr-primary); color: #fff; }
    .dc-btn.is-saved svg path { fill: #fff !important; stroke: #fff !important; }
    /* card footer */
    .design-card__footer {
      padding : 11px 14px;
      display : flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .design-card__source {
      font-size   : 0.7rem; font-weight: 700;
      color       : var(--clr-primary); letter-spacing: .01em;
      white-space : nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .design-card__stats {
      display : flex; align-items: center; gap: 10px; flex-shrink: 0;
    }
    .dc-stat {
      display     : flex; align-items: center; gap: 4px;
      font-size   : 0.68rem; color: var(--clr-muted); font-weight: 500;
    }

    /* ─── Mobile responsive tweaks ─────────────────────── */
    @media (max-width: 580px) {
      .designs-hero { padding: 28px 0 32px; }
      .designs-hero__stats { gap: 24px; }
    }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark body.bg-surface-base { background: #1A0F0A !important; }
    html.dark .designs-section { background: #1A0F0A !important; }
    html.dark .designs-section__title { color: #F0E6DC !important; }
    html.dark .sort-select {
      background-color : rgba(72,42,30,.68) !important;
      border-color     : rgba(255,255,255,.12) !important;
      color            : #D4C5B8 !important;
    }
    html.dark .design-card {
      background : rgba(72,42,30,.68) !important;
      box-shadow : 0 2px 12px rgba(0,0,0,.30) !important;
    }
    html.dark .design-card:hover {
      box-shadow : 0 14px 44px rgba(0,0,0,.45) !important;
    }
    html.dark .design-card__footer {
      background : rgba(62,36,26,.80) !important;
      border-top : 1px solid rgba(255,255,255,.06) !important;
    }
    html.dark .dc-btn {
      background  : rgba(26,15,10,.72) !important;
      color       : #F0E6DC !important;
      box-shadow  : 0 2px 8px rgba(0,0,0,.40) !important;
    }
    html.dark .dc-btn:hover { background: rgba(26,15,10,.88) !important; }
    html.dark .design-card__cat {
      background  : rgba(26,15,10,.85) !important;
      color       : #D4C5B8 !important;
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: lesson.html
═══════════════════════════════════════════════════ */

    /* ─── Breadcrumb ──────────────────────────────────────────── */
    .breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .breadcrumb__link {
      font-size:14px; color:#8b7567; text-decoration:none;
      transition:color .15s;
    }
    .breadcrumb__link:hover { color:#c75100; }
    .breadcrumb__sep { color:rgba(62,39,35,.3); font-size:12px; }
    .breadcrumb__current { font-size:14px; color:#3e2723; font-weight:600; }

    /* ─── Progress pill ───────────────────────────────────────── */
    .progress-pill {
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 12px; border-radius:100px;
      background:rgba(199,81,0,.08); color:#c75100;
      font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px;
    }

    /* ─── Floating lesson badges (on video) ───────────────────── */
    .lesson-badge {
      display:inline-flex; align-items:center; gap:5px;
      padding:6px 14px; border-radius:100px;
      background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,.2);
      color:#fff; font-size:12px; font-weight:600;
    }
    .lesson-badge--orange { background:rgba(199,81,0,.85); border-color:transparent; }
    .lesson-badge--olive  { background:rgba(107,142,35,.85); border-color:transparent; }

    /* ─── Video player placeholder ────────────────────────────── */
    .video-player {
      width:100%; border-radius:20px; overflow:hidden; position:relative;
      background:linear-gradient(138deg,#1a0e0a 0%,#3e2723 60%,#2f1d19 100%);
      aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
    }
    .video-player__play {
      width:72px; height:72px; border-radius:50%;
      background:#c75100; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 8px 24px rgba(199,81,0,.5);
      transition:transform .15s, box-shadow .15s;
    }
    .video-player__play:hover { transform:scale(1.08); box-shadow:0 12px 32px rgba(199,81,0,.6); }
    .video-player__overlay {
      position:absolute; inset:0; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:16px;
    }
    .video-player__title {
      font-family:'Montserrat',sans-serif; font-weight:700;
      font-size:1.1rem; color:rgba(255,255,255,.8); text-align:center;
      padding:0 32px; max-width:480px;
    }
    /* Progress bar inside player */
    .video-progress {
      position:absolute; bottom:0; left:0; right:0; padding:0 24px 18px;
    }
    .video-progress__track {
      width:100%; height:4px; background:rgba(255,255,255,.2); border-radius:2px;
    }
    .video-progress__fill {
      height:100%; width:35%; background:linear-gradient(to right,#c75100,#c96c3b);
      border-radius:2px;
    }
    .video-progress__time {
      display:flex; justify-content:space-between; margin-top:6px;
      font-size:11px; color:rgba(255,255,255,.5);
    }

    /* ─── Sidebar: Learning Path ──────────────────────────────── */
    .roadmap { display:flex; flex-direction:column; }
    .roadmap__item {
      display:flex; align-items:flex-start; gap:14px;
      padding:10px 0; position:relative; cursor:pointer;
    }
    .roadmap__item:not(:last-child)::after {
      content:''; position:absolute; left:15px; top:42px;
      width:2px; height:calc(100% - 12px);
      background:rgba(62,39,35,.1);
    }
    .roadmap__dot {
      width:32px; height:32px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700; position:relative; z-index:1;
    }
    .roadmap__dot--done   { background:#6b8e23; color:#fff; }
    .roadmap__dot--active {
      background:linear-gradient(135deg,#c75100,#c96c3b); color:#fff;
      box-shadow:0 0 0 4px rgba(199,81,0,.15);
    }
    .roadmap__dot--lock   { background:#fff; border:2px solid rgba(62,39,35,.15); color:#8b7567; }
    .roadmap__info { flex:1; min-width:0; padding-top:4px; }
    .roadmap__name {
      font-family:'Montserrat',sans-serif; font-weight:600;
      font-size:13.5px; color:#3e2723; line-height:1.3;
    }
    .roadmap__name--active { color:#c75100; }
    .roadmap__name--lock   { color:#8b7567; }
    .roadmap__dur { font-size:12px; color:#8b7567; margin-top:2px; }

    /* ─── Section icon circle ─────────────────────────────────── */
    .section-icon {
      width:52px; height:52px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
    }
    .section-icon--orange { background:rgba(199,81,0,.1); color:#c75100; }
    .section-icon--olive  { background:rgba(107,142,35,.1); color:#6b8e23; }
    .section-icon--dark   {
      background:linear-gradient(135deg,#c75100,#c96c3b); color:#fff;
    }

    /* ─── Concept tiles ───────────────────────────────────────── */
    .concept-tile {
      display:flex; align-items:center; gap:10px;
      padding:12px 14px; border-radius:12px;
      background:#fff; border:1px solid rgba(199,81,0,.08);
      font-size:13.5px; color:#3e2723; font-weight:500;
    }

    /* ─── Highlight / note card ───────────────────────────────── */
    .highlight-card {
      padding:18px 20px; border-radius:16px;
      background:#fff; border:1px solid rgba(199,81,0,.1);
      box-shadow:0 4px 16px rgba(62,39,35,.05);
    }
    .highlight-card__ts {
      display:inline-flex; align-items:center; gap:5px;
      font-size:11.5px; font-weight:700; color:#c75100;
      background:rgba(199,81,0,.08); padding:3px 10px;
      border-radius:100px; margin-bottom:10px; cursor:pointer;
      border:none;
    }
    .highlight-card__quote {
      font-size:14px; color:#3e2723; line-height:1.65;
      font-style:italic;
    }

    /* ─── AI Study Assistant (reuses qa-ask-card pattern) ────── */
    /* Uses .qa-ask-card from start-here inline block — redefined here */
    .ai-assist-card {
      background:linear-gradient(145deg,#3e2723 0%,#5d4037 100%);
      border-radius:24px; padding:28px;
      box-shadow:0 16px 48px rgba(62,39,35,.25);
    }
    .ai-assist-card__title {
      font-family:'Montserrat',sans-serif; font-weight:800;
      font-size:1.1rem; color:#fff; margin-bottom:6px;
    }
    .ai-assist-card__sub { font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:20px; }
    .ai-quick-btn {
      display:flex; align-items:center; gap:12px;
      padding:14px 16px; border-radius:100px;
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.85); font-size:.875rem; cursor:pointer;
      transition:background .15s; width:100%; text-align:left; margin-bottom:8px;
    }
    .ai-quick-btn:last-of-type { margin-bottom:0; }
    .ai-quick-btn:hover { background:rgba(255,255,255,.12); }
    .ai-quick-btn__icon {
      width:34px; height:34px; border-radius:10px; flex-shrink:0;
      background:rgba(199,81,0,.25); display:flex; align-items:center;
      justify-content:center; color:#e8956d;
    }
    .ai-input-wrap { display:flex; gap:8px; margin-top:16px; }
    .ai-input {
      flex:1; background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12); border-radius:12px;
      padding:12px 16px; color:#fff; font-size:.875rem; outline:none;
    }
    .ai-input::placeholder { color:rgba(255,255,255,.3); }
    .ai-send-btn {
      width:44px; height:44px; border-radius:50%; background:#c75100;
      border:none; display:flex; align-items:center; justify-content:center;
      color:#fff; cursor:pointer; flex-shrink:0; transition:background .15s;
    }
    .ai-send-btn:hover { background:#a34200; }

    /* ─── Quiz option ─────────────────────────────────────────── */
    .quiz-option {
      display:flex; align-items:center; gap:14px;
      padding:16px 20px; border-radius:16px;
      background:#fff; border:1.5px solid rgba(62,39,35,.1);
      cursor:pointer; transition:border-color .15s, background .15s;
      font-size:15px; color:#3e2723; font-weight:500; width:100%;
      text-align:left;
    }
    .quiz-option:hover { border-color:rgba(199,81,0,.3); background:rgba(199,81,0,.03); }
    .quiz-option.selected { border-color:#c75100; background:rgba(199,81,0,.05); }
    .quiz-option__radio {
      width:20px; height:20px; border-radius:50%;
      border:2px solid rgba(62,39,35,.2); flex-shrink:0;
      transition:border-color .15s;
    }
    .quiz-option:hover .quiz-option__radio { border-color:#c75100; }
    .quiz-option.selected .quiz-option__radio {
      border-color:#c75100; background:#c75100;
      box-shadow:inset 0 0 0 3px #fff;
    }
    .voice-btn {
      display:flex; align-items:center; justify-content:center; gap:8px;
      padding:13px 20px; border-radius:100px; width:100%;
      background:rgba(62,39,35,.05); border:1.5px solid rgba(62,39,35,.1);
      color:#8b7567; font-size:.875rem; font-weight:600; cursor:pointer;
      font-family:'Montserrat',sans-serif; transition:background .15s;
    }
    .voice-btn:hover { background:rgba(62,39,35,.08); }

    /* ─── Action card (Try it in real life) ───────────────────── */
    .action-card {
      background:#fff; border-radius:20px;
      border:1px solid rgba(199,81,0,.1);
      box-shadow:0 4px 20px rgba(62,39,35,.06);
      padding:28px 24px; display:flex; flex-direction:column; gap:14px;
    }
    .action-card__icon {
      width:56px; height:56px; border-radius:16px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
    }
    .action-card__icon--orange { background:rgba(199,81,0,.1); color:#c75100; }
    .action-card__icon--olive  { background:rgba(107,142,35,.1); color:#6b8e23; }
    .action-card__icon--dark   { background:rgba(62,39,35,.08); color:#3e2723; }
    .action-card__title {
      font-family:'Montserrat',sans-serif; font-weight:700;
      font-size:16px; color:#3e2723;
    }
    .action-card__desc { font-size:14px; color:#8b7567; line-height:1.6; flex:1; }
    .action-card__tag {
      display:inline-flex; align-items:center; gap:5px;
      font-size:12px; font-weight:600; color:#6b8e23;
      background:rgba(107,142,35,.1); padding:4px 12px; border-radius:100px;
      width:fit-content;
    }

    /* ─── Support card ────────────────────────────────────────── */
    .support-card {
      background:linear-gradient(131deg,#fff7ed 0%,#fff 100%);
      border-radius:20px; padding:28px 24px;
      box-shadow:0 4px 20px rgba(62,39,35,.07);
      display:flex; flex-direction:column; align-items:center;
      text-align:center; gap:14px;
    }
    .support-card__icon {
      width:56px; height:56px; border-radius:50%;
      background:rgba(199,81,0,.1); color:#c75100;
      display:flex; align-items:center; justify-content:center;
    }
    .support-card__title {
      font-family:'Montserrat',sans-serif; font-weight:700;
      font-size:16px; color:#3e2723;
    }
    .support-card__desc { font-size:14px; color:#8b7567; line-height:1.6; flex:1; }

    /* ─── Achievement stat ────────────────────────────────────── */
    .achieve-stat {
      display:flex; flex-direction:column; align-items:center;
      gap:6px; text-align:center;
    }
    .achieve-stat__num {
      font-family:'Montserrat',sans-serif; font-weight:700;
      font-size:2.5rem; color:#fff; line-height:1;
    }
    .achieve-stat__label { font-size:13px; color:rgba(255,255,255,.55); }

    /* ─── Path cards (Continue Your Learning) ───────────────── */
    .path-card {
      background:#fffcf8;
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
      display:flex;
      flex-direction:column;
      transition:box-shadow .2s,transform .2s;
    }
    .path-card:hover {
      box-shadow:0 8px 24px rgba(62,39,35,.12);
      transform:translateY(-2px);
    }
    .path-card__thumb {
      width:100%; height:160px; position:relative;
      overflow:hidden; flex-shrink:0;
    }
    .path-card__thumb img {
      width:100%; height:100%; object-fit:cover; display:block;
    }
    .path-card__thumb-overlay { position:absolute; inset:0; }
    .path-card__body {
      padding:20px 22px 22px;
      display:flex; flex-direction:column; gap:6px; flex:1;
    }
    .path-card__badge {
      display:inline-flex; align-items:center;
      padding:4px 10px; border-radius:100px;
      background:#fbecdf; color:#c75100;
      font-family:'Montserrat',sans-serif; font-weight:500;
      font-size:11.5px; width:fit-content;
    }
    .path-card__title {
      font-family:'Montserrat',sans-serif; font-weight:700;
      font-size:16px; color:#3e2723; line-height:1.4; margin-top:2px;
    }
    .path-card__desc {
      font-size:13.3px; color:#6d4c41; line-height:1.6; flex:1;
    }
    .path-card__meta {
      display:flex; flex-wrap:wrap; gap:14px;
      font-size:12.5px; color:#6d4c41; padding:8px 0 6px;
    }
    .path-card__meta-item { display:flex; align-items:center; gap:4px; }
    .path-card__progress-track {
      width:100%; height:6px; background:#e5e7eb;
      border-radius:100px; overflow:hidden;
    }
    .path-card__progress-fill {
      height:100%;
      background:linear-gradient(to right,#c75100,#c96c3b);
      border-radius:100px; transition:width .4s ease;
    }

    /* ─── Responsive helpers ──────────────────────────────────── */
    .lesson-grid { display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; }
    .two-col      { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
    .three-col    { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    @media (max-width:1024px) { .lesson-grid { grid-template-columns:1fr; } }
    @media (max-width:900px)  { .two-col { grid-template-columns:1fr; } }
    @media (max-width:768px)  { .three-col { grid-template-columns:1fr; } }
    @media (max-width:640px)  {
      /* horizontal scroll for card grids on mobile */
      .three-col {
        display             : grid !important;
        grid-auto-flow      : column !important;
        grid-auto-columns   : 82vw !important;
        grid-template-columns: none !important;
        overflow-x          : auto !important;
        scroll-snap-type    : x mandatory;
        scrollbar-width     : none;
        gap                 : 16px !important;
        padding-bottom      : 4px;
      }
      .three-col::-webkit-scrollbar { display:none; }
      .three-col > * { scroll-snap-align: start; }
      /* Amazing Progress stats: tight row on mobile */
      .achieve-stats-row {
        gap: 24px !important;
        justify-content: space-around !important;
      }
      .achieve-stats-row > [style*="width:1px"] { display: none; }
    }
    [id] { scroll-margin-top:80px; }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark body { background: #1A0F0A !important; }
    html.dark .breadcrumb__link    { color: rgba(240,230,220,.5) !important; }
    html.dark .breadcrumb__link:hover { color: #E8703A !important; }
    html.dark .breadcrumb__sep     { color: rgba(240,230,220,.3) !important; }
    html.dark .breadcrumb__current { color: #F0E6DC !important; }
    html.dark .concept-tile {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.08) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .highlight-card {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
      box-shadow  : none !important;
    }
    html.dark .highlight-card__quote { color: #D4C5B8 !important; }
    html.dark .quiz-option {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
      color       : #F0E6DC !important;
    }
    html.dark .quiz-option:hover { border-color: rgba(199,81,0,.4) !important; background: rgba(72,42,30,.85) !important; }
    html.dark .voice-btn {
      background  : rgba(255,255,255,.05) !important;
      border-color: rgba(255,255,255,.10) !important;
      color       : #A89080 !important;
    }
    html.dark .action-card {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
      box-shadow  : none !important;
    }
    html.dark .action-card__title { color: #F0E6DC !important; }
    html.dark .action-card__desc  { color: #A89080 !important; }
    html.dark .support-card {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .support-card__title { color: #F0E6DC !important; }
    html.dark .support-card__desc  { color: #A89080 !important; }
    html.dark .path-card {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .path-card__title { color: #F0E6DC !important; }
    html.dark .path-card__desc  { color: #C8A898 !important; }
    html.dark .path-card__meta  { color: #A89080 !important; }
    html.dark .roadmap__name { color: #D4C5B8 !important; }
    html.dark .roadmap__dur  { color: #A89080 !important; }
    html.dark .roadmap__dot--lock {
      background  : rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.12) !important;
      color       : #A89080 !important;
    }

    /* ─── DARK MODE · Learning Path sidebar card ─────────────── */
    html.dark .lesson-sidebar-card {
      background  : rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
    }
    html.dark .lesson-sidebar-card h3 { color: #F0E6DC !important; }
    html.dark .lesson-sidebar-card > p { color: rgba(240,230,220,.55) !important; }
    html.dark .lesson-sidebar-card .sidebar-progress-section {
      border-top-color: rgba(255,255,255,.10) !important;
    }
    html.dark .lesson-sidebar-card .sidebar-progress-label { color: rgba(240,230,220,.55) !important; }
    html.dark .roadmap__item:not(:last-child)::after {
      background: rgba(255,255,255,.10) !important;
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: learn-basics.html
═══════════════════════════════════════════════════ */

    /* ── Shared with start-here.html ──────────────────────────── */
    .hero-eyebrow {
      font-family: 'Montserrat', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: rgba(255,255,255,0.5);
    }
    .hero-btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 52px;
      padding: 0 28px;
      border-radius: 100px;
      background: #c75100;
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.9375rem;
      text-decoration: none;
      box-shadow: 0 8px 16px rgba(199,81,0,0.3);
      transition: background 0.2s, box-shadow 0.2s;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }
    .hero-btn-primary:hover { background: #a34200; }
    .hero-btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 52px;
      padding: 0 28px;
      border-radius: 100px;
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.9375rem;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.25);
      transition: background 0.2s;
      white-space: nowrap;
    }
    .hero-btn-ghost:hover { background: rgba(255,255,255,0.2); }
    @media (max-width: 540px) {
      .hero-cta-row { flex-wrap: nowrap; }
      .hero-btn-primary, .hero-btn-ghost {
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 0 16px;
      }
    }

    /* ── Filter tabs (reused from start-here) ─────────────────── */
    .learn-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 32px;
    }
    .learn-filter {
      height: 48px;
      padding: 0 22px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .learn-filter--active {
      background: #c75100;
      color: #fff;
      border: 1px solid #c75100;
    }
    .learn-filter--inactive {
      background: transparent;
      color: #6d4c41;
      border: 1px solid rgba(62,39,35,0.14);
    }
    .learn-filter--inactive:hover { background: rgba(62,39,35,0.04); }

    /* ── View More button ─────────────────────────────────────── */
    .view-more-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 32px;
      border-radius: 100px;
      background: transparent;
      color: #c75100;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      border: 1.5px solid rgba(199,81,0,0.4);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s;
    }
    .view-more-btn:hover { background: rgba(199,81,0,0.06); border-color: #c75100; }

    /* ── Learning path card ───────────────────────────────────── */
    .path-card {
      background: #fffcf8;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .path-card:hover {
      box-shadow: 0 8px 24px rgba(62,39,35,0.12);
      transform: translateY(-2px);
    }
    .path-card__thumb {
      width: 100%;
      height: 140px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .path-card__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .path-card__thumb-overlay {
      position: absolute;
      inset: 0;
    }
    .path-card__body {
      padding: 20px 22px 22px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }
    .path-card__badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 100px;
      background: #fbecdf;
      color: #c75100;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 11.5px;
      width: fit-content;
    }
    .path-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #3e2723;
      line-height: 1.4;
      margin-top: 2px;
    }
    .path-card__desc {
      font-size: 13.3px;
      color: #6d4c41;
      line-height: 1.6;
      flex: 1;
    }
    .path-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12.5px;
      color: #6d4c41;
      padding: 8px 0 6px;
    }
    .path-card__meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .path-card__progress-track {
      width: 100%;
      height: 6px;
      background: #e5e7eb;
      border-radius: 100px;
      overflow: hidden;
    }
    .path-card__progress-fill {
      height: 100%;
      background: linear-gradient(to right, #ff6900, #f54900);
      border-radius: 100px;
      transition: width 0.4s ease;
    }

    /* ── Progress card (hero right side) ─────────────────────── */
    .progress-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
      padding: 24px 24px 0;
    }
    .progress-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 22px;
      color: #3e2723;
      line-height: 1.25;
    }
    .progress-card__sub {
      font-family: 'Montserrat', sans-serif;
      font-size: 15px;
      color: #4a5565;
      line-height: 1.5;
      margin-top: 4px;
    }
    .progress-card__meta {
      font-size: 13px;
      color: #6a7282;
      margin-top: 4px;
    }
    .progress-card__pct {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 28px;
      color: #c75100;
      line-height: 1;
    }
    .progress-card__pct-label {
      font-size: 11px;
      color: #6a7282;
      margin-top: 2px;
    }
    .progress-card__bar-track {
      width: 100%;
      height: 10px;
      background: #e5e7eb;
      border-radius: 100px;
      overflow: hidden;
      margin: 14px 0;
    }
    .progress-card__bar-fill {
      height: 100%;
      background: linear-gradient(to right, #ff6900, #f54900);
      border-radius: 100px;
    }
    /* Lesson rows inside progress card */
    .lesson-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: #f4f4f4;
      border-radius: 24px;
      margin-bottom: 8px;
    }
    .lesson-row--next {
      background: #f9fafb;
      padding: 12px;
      border-radius: 24px;
      margin-bottom: 0;
    }
    .lesson-row__icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }
    .lesson-row__name {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14.5px;
      color: #252726;
      flex: 1;
    }
    .lesson-row__name--next { color: #364153; }
    .lesson-row__action {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #c85a1d;
      text-decoration: none;
      cursor: pointer;
      background: none;
      border: none;
      flex-shrink: 0;
    }
    .lesson-row__start-btn {
      background: #c75100;
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      padding: 7px 18px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .lesson-row__start-btn:hover { background: #a34200; }

    /* ── "Your Learning Path" lesson list (section 3) ─────────── */
    .lesson-step-row {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(62,39,35,0.06);
    }
    .lesson-step-row:last-child { border-bottom: none; }
    .lesson-step-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
    }
    .lesson-step-circle--done     { background: #6b8e23; color: #fff; }
    .lesson-step-circle--active   { background: linear-gradient(135deg, #c75100, #c96c3b); color: #fff; }
    .lesson-step-circle--locked   { background: transparent; border: 2px solid #d1d5dc; color: #6a7282; }
    .lesson-step__info { flex: 1; min-width: 0; }
    .lesson-step__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #3e2723;
      line-height: 1.3;
    }
    .lesson-step__title--locked { color: #6a7282; }
    .lesson-step__meta {
      font-size: 13px;
      color: #8b7567;
      margin-top: 3px;
    }
    .lesson-step__action {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    @media (max-width: 540px) {
      .lesson-step-row {
        flex-wrap: wrap;
        gap: 10px;
      }
      .lesson-step__info {
        min-width: calc(100% - 60px);
      }
      .lesson-step__action {
        margin-left: 60px; /* align with info text, indent past circle */
        width: 100%;
      }
    }
    /* Stats row in hero */
    .hero-stats-row { gap: 32px; }
    @media (max-width: 480px) {
      .hero-stats-row { gap: 12px; }
      .hero-stats-row [style*="font-size:2rem"] { font-size: 1.4rem !important; }
    }
    .hero-stat-divider {
      width: 1px;
      height: 40px;
      background: rgba(255,255,255,0.15);
    }

    /* ── Path cards grid: responsive ────────────────────────── */
    .paths-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 1023px) {
      .paths-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── Hero two-col: stack on mobile ───────────────────────── */
    .hero-two-col {
      display: flex;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;
    }
    .hero-two-col__text {
      flex: 1;
      min-width: 300px;
      max-width: 560px;
      text-align: left;
    }
    .hero-two-col__card {
      flex: 0 0 auto;
      width: min(520px, 100%);
    }
    @media (max-width: 900px) {
      .hero-two-col__card { width: 100%; }
      .hero-stat-divider { display: none; }
    }
    @media (max-width: 767px) {
      .start-hero { padding: 60px 0 50px !important; }
      .hero-two-col { gap: 28px; }
      .hero-two-col__text { min-width: unset; max-width: 100%; }
    }
    @media (max-width: 479px) {
      .start-hero { padding: 44px 0 36px !important; }
    }

    /* ── Lesson step row active highlight ────────────────────── */
    .lesson-step-row--active {
      background: rgba(199,81,0,0.04);
      border-radius: 16px;
      padding: 16px;
      margin: 4px -16px;
    }

    /* ── Smooth scroll offset for anchors ────────────────────── */
    [id] { scroll-margin-top: 80px; }
  

/* ═══════════════════════════════════════════════════
   PAGE: start-here.html
═══════════════════════════════════════════════════ */

    /* ── Waveform animation ── */
    @keyframes waveform-anim {
      0%   { transform: scaleY(0.4); }
      100% { transform: scaleY(1); }
    }
    .radio-now__bar { transform-origin: bottom; }
    .radio-now__bar:nth-child(1)  { height:20px; animation-delay:0.0s; animation-duration:1.0s; }
    .radio-now__bar:nth-child(2)  { height:40px; animation-delay:0.1s; animation-duration:0.9s; }
    .radio-now__bar:nth-child(3)  { height:55px; animation-delay:0.2s; animation-duration:1.1s; }
    .radio-now__bar:nth-child(4)  { height:30px; animation-delay:0.3s; animation-duration:0.8s; }
    .radio-now__bar:nth-child(5)  { height:50px; animation-delay:0.4s; animation-duration:1.2s; }
    .radio-now__bar:nth-child(6)  { height:35px; animation-delay:0.5s; animation-duration:1.0s; }
    .radio-now__bar:nth-child(7)  { height:45px; animation-delay:0.6s; animation-duration:0.9s; }
    .radio-now__bar:nth-child(8)  { height:25px; animation-delay:0.7s; animation-duration:1.3s; }
    .radio-now__bar:nth-child(9)  { height:55px; animation-delay:0.8s; animation-duration:0.8s; }
    .radio-now__bar:nth-child(10) { height:15px; animation-delay:0.9s; animation-duration:1.1s; }
    .radio-now__bar:nth-child(11) { height:45px; animation-delay:0.0s; animation-duration:1.0s; }
    .radio-now__bar:nth-child(12) { height:25px; animation-delay:0.1s; animation-duration:0.9s; }
    .radio-now__bar:nth-child(13) { height:55px; animation-delay:0.2s; animation-duration:1.2s; }
    .radio-now__bar:nth-child(14) { height:15px; animation-delay:0.3s; animation-duration:0.8s; }
    .radio-now__bar:nth-child(15) { height:40px; animation-delay:0.4s; animation-duration:1.1s; }
    .radio-now__bar:nth-child(16) { height:55px; animation-delay:0.5s; animation-duration:0.9s; }
    .radio-now__bar:nth-child(17) { height:30px; animation-delay:0.6s; animation-duration:1.0s; }
    .radio-now__bar:nth-child(18) { height:20px; animation-delay:0.7s; animation-duration:0.8s; }

    /* ── Hero absolute badges ── */
    .hero-badge-abs {
      position: absolute;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.15);
      z-index: 2;
      max-width: 180px;
    }
    .hero-badge-abs__emoji {
      font-size: 1.4rem;
      line-height: 1;
      flex-shrink: 0;
    }
    .hero-badge-abs__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 12.8px;
      color: #fff;
      line-height: 1.2;
    }
    .hero-badge-abs__sub {
      font-size: 11.2px;
      color: rgba(255,255,255,0.55);
      line-height: 1.3;
    }
    @media (max-width: 767px) {
      .hero-badge-abs { display: none; }
    }

    /* ── Hero blur circles ── */
    .hero-blur-1 {
      position: absolute;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: rgba(199,81,0,0.2);
      filter: blur(80px);
      top: -100px; left: -100px;
      pointer-events: none;
      z-index: 1;
    }
    .hero-blur-2 {
      position: absolute;
      width: 350px; height: 350px;
      border-radius: 50%;
      background: rgba(201,108,59,0.15);
      filter: blur(60px);
      bottom: -80px; right: -80px;
      pointer-events: none;
      z-index: 1;
    }

    /* ── "ARE YOU READY?" label ── */
    .hero-eyebrow {
      font-family: 'Montserrat', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: rgba(255,255,255,0.5);
    }

    /* ── CTA buttons precise sizing ── */
    .hero-btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 56px;
      padding: 0 32px;
      border-radius: 100px;
      background: #c75100;
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      text-decoration: none;
      box-shadow: 0 12px 20px rgba(199,81,0,0.4);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .hero-btn-primary:hover { background: #a34200; box-shadow: 0 12px 24px rgba(199,81,0,0.55); }

    .hero-btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 56px;
      padding: 0 32px;
      border-radius: 100px;
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.25);
      transition: background 0.2s;
    }
    .hero-btn-ghost:hover { background: rgba(255,255,255,0.2); }

    /* ── Q&A question row ── */
    .qa-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 24px;
      background: #fff;
      border: 1px solid rgba(199,81,0,0.1);
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(62,39,35,0.04);
      cursor: pointer;
      transition: box-shadow 0.2s;
    }
    .qa-row:hover { box-shadow: 0 6px 20px rgba(62,39,35,0.08); }
    .qa-row__left { display: flex; align-items: center; gap: 12px; flex: 1; }
    .qa-row__q {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 15.2px;
      color: #3e2723;
      flex: 1;
    }
    .qa-row__tag {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 50px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .qa-row__tag--gray { background: rgba(62,39,35,0.07); color: #8b7567; }
    .qa-row__tag--orange { background: rgba(199,81,0,0.08); color: #c75100; }
    .qa-row__tag--olive { background: rgba(107,142,35,0.1); color: #6b8e23; }
    .qa-row__expand {
      width: 32px; height: 32px;
      border-radius: 16px;
      background: rgba(199,81,0,0.08);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c75100;
      font-size: 1.2rem;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .qa-row__expand:hover { background: rgba(199,81,0,0.16); }

    /* ── Q&A Ask card ── */
    .qa-ask-card {
      background: linear-gradient(145deg, #3e2723 0%, #5d4037 100%);
      border-radius: 28px;
      padding: 32px;
      box-shadow: 0 16px 48px rgba(62,39,35,0.25);
    }
    .qa-ask-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 1.25rem;
      color: #fff;
      margin-bottom: 8px;
    }
    .qa-ask-card__desc {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.65);
      line-height: 1.6;
      margin-bottom: 20px;
    }
    .qa-ask-card__input {
      width: 100%;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      padding: 16px 17px;
      color: #fff;
      font-size: 0.9rem;
      outline: none;
      margin-bottom: 12px;
      box-sizing: border-box;
    }
    .qa-ask-card__input::placeholder { color: rgba(255,255,255,0.35); }
    .qa-ask-card__input:focus { border-color: rgba(255,255,255,0.3); }
    .qa-ask-card__submit {
      display: block;
      width: 100%;
      height: 48px;
      border-radius: 100px;
      background: #c75100;
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      border: none;
      cursor: pointer;
      margin-bottom: 10px;
      transition: background 0.2s;
    }
    .qa-ask-card__submit:hover { background: #a34200; }
    .qa-ask-card__voice {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      height: 48px;
      border-radius: 100px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      color: rgba(255,255,255,0.85);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      margin-bottom: 20px;
      transition: background 0.2s;
    }
    .qa-ask-card__voice:hover { background: rgba(255,255,255,0.18); }
    .qa-ask-card__divider {
      height: 1px;
      background: rgba(255,255,255,0.1);
      margin-bottom: 16px;
    }
    .qa-ask-card__qlabel {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.4);
      margin-bottom: 10px;
    }
    .qa-ask-card__qrow {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.08);
      border-radius: 10px;
      color: rgba(255,255,255,0.75);
      font-size: 0.825rem;
      cursor: pointer;
      margin-bottom: 6px;
      transition: background 0.15s;
    }
    .qa-ask-card__qrow:last-child { margin-bottom: 0; }
    .qa-ask-card__qrow:hover { background: rgba(255,255,255,0.14); }

    /* ── Learning: section header row ── */
    .learn-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .learn-header__nav {
      display: flex;
      gap: 8px;
    }
    .learn-nav-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(62,39,35,0.1);
      box-shadow: 0 2px 8px rgba(62,39,35,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3e2723;
      cursor: pointer;
      transition: background 0.15s;
    }
    .learn-nav-btn:hover { background: #f9f6f2; }
    .learn-nav-btn:disabled { opacity: 0.35; cursor: default; }

    /* ── Filter tabs ── */
    .learn-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }
    .learn-filter {
      height: 48px;
      padding: 0 20px;
      border-radius: 39px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .learn-filter--active {
      background: #c75100;
      color: #fff;
      border: none;
    }
    .learn-filter--inactive {
      background: transparent;
      color: #3e2723;
      border: 1px solid rgba(62,39,35,0.12);
    }
    .learn-filter--inactive:hover { background: rgba(62,39,35,0.04); }

    /* ── Content card AI badge ── */
    .ai-pick-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #c75100;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    /* ── Stories: hero card quote section ── */
    .story-hero-quote {
      border-left: 2.4px solid #c75100;
      padding-left: 14px;
      margin-bottom: 16px;
    }
    .story-hero-quote__text {
      font-style: italic;
      font-size: 0.875rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.6;
    }

    /* ── Stories: action buttons ── */
    .story-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9.6px 20.8px 9.6px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.8rem;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s;
    }
    .story-btn--see {
      background: rgba(255,255,255,0.15);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.55);
    }
    .story-btn--see:hover { background: rgba(255,255,255,0.25); }
    .story-btn--glass {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.85);
      border: 1px solid rgba(255,255,255,0.2);
    }
    .story-btn--glass:hover { background: rgba(255,255,255,0.14); }

    /* ── Story tile ── */
    .story-tile-v2 {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 20px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      transition: background 0.2s;
    }
    .story-tile-v2:hover { background: rgba(255,255,255,0.09); }
    .story-tile-v2__top { display: flex; align-items: center; gap: 12px; }
    .story-tile-v2__avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    .story-tile-v2__name {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14.4px;
      color: #fff;
    }
    .story-tile-v2__quote {
      font-style: italic;
      font-size: 12.5px;
      color: rgba(255,255,255,0.65);
      line-height: 1.5;
    }
    .story-tile-v2__tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .story-tile-v2__tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      background: rgba(255,255,255,0.1);
      border-radius: 50px;
      font-size: 11px;
      color: rgba(255,255,255,0.65);
    }

    /* ── Mentor card ── */
    .mentor-card-v2 {
      background: linear-gradient(131deg, #fff7ed 0%, #fff 100%);
      border-radius: 16.785px;
      padding: 24px;
      box-shadow: 0 8px 32px rgba(62,39,35,0.08);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .mentor-card-v2__header { display: flex; align-items: center; gap: 14px; }
    .mentor-card-v2__avatar {
      width: 67px; height: 67px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    .mentor-card-v2__name {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 18.883px;
      color: #0a0a0a;
      line-height: 1.2;
    }
    .mentor-card-v2__rating {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14.687px;
      color: #4a5565;
      margin-top: 4px;
    }
    .mentor-card-v2__langs { display: flex; flex-wrap: wrap; gap: 6px; }
    .mentor-card-v2__lang {
      padding: 4px 10px;
      border-radius: 50px;
      background: rgba(199,81,0,0.08);
      color: #c75100;
      font-size: 12px;
      font-weight: 600;
    }
    .mentor-card-v2__specialty {
      font-size: 14.687px;
      color: #364153;
    }
    .mentor-card-v2__specialty strong {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
    }
    .mentor-card-v2__bio {
      font-size: 13.6px;
      color: #6d4c41;
      line-height: 1.55;
    }
    .mentor-card-v2__response {
      font-size: 13.6px;
    }
    .mentor-card-v2__response strong {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      color: #008236;
    }
    .mentor-card-v2__response span { color: #3e2723; }
    .mentor-card-v2__book {
      display: block;
      width: 100%;
      height: 44px;
      border-radius: 100px;
      background: #c75100;
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.875rem;
      border: none;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      line-height: 44px;
      transition: background 0.2s;
    }
    .mentor-card-v2__book:hover { background: #a34200; }

    /* ── Event item ── */
    .event-row {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px 24px;
      background: #fff;
      border-radius: 20px;
      border: 1px solid rgba(199,81,0,0.08);
      box-shadow: 0 4px 16px rgba(62,39,35,0.05);
    }
    .event-row__date {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      border-radius: 16px;
      padding: 16px 20px;
      min-width: 68px;
      flex-shrink: 0;
    }
    .event-row__day {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 32px;
      color: #fff;
      line-height: 1;
    }
    .event-row__month {
      font-size: 11.2px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.85);
      margin-top: 2px;
    }
    .event-row__info { flex: 1; }
    .event-row__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: #3e2723;
      margin-bottom: 5px;
    }
    .event-row__time {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.8rem;
      color: rgba(62,39,35,0.6);
      margin-bottom: 8px;
    }
    .event-row__tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .event-row__tag {
      padding: 3px 12px;
      background: rgba(107,142,35,0.1);
      color: #6b8e23;
      border-radius: 50px;
      font-size: 0.6875rem;
      font-weight: 600;
    }
    .event-row__register {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 22px;
      border-radius: 100px;
      background: #6b8e23;
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.875rem;
      border: none;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .event-row__register:hover { background: #4f6a18; }

    /* ── Reflection: save/share buttons ── */
    .reflection-btn-save {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 50px;
      background: #fff;
      color: #c75100;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.875rem;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }
    .reflection-btn-save:hover { background: #faf6f2; }
    .reflection-btn-share {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 50px;
      background: rgba(255,255,255,0.15);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.875rem;
      border: 1px solid rgba(255,255,255,0.3);
      cursor: pointer;
      transition: background 0.2s;
    }
    .reflection-btn-share:hover { background: rgba(255,255,255,0.22); }

    /* ── View More button ── */
    .view-more-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 32px;
      border-radius: 100px;
      background: transparent;
      color: #c75100;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      border: 1.5px solid rgba(199,81,0,0.4);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s;
    }
    .view-more-btn:hover { background: rgba(199,81,0,0.06); border-color: #c75100; }
    .view-more-btn--white {
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.3);
    }
    .view-more-btn--white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

    /* ── Radio track icon colors ── */
    .track-icon--orange { background: linear-gradient(135deg, #c75100, #c96c3b); }
    .track-icon--brown  { background: #3e2723; }
    .track-icon--olive  { background: #6b8e23; }
    .track-icon--mid    { background: #8b4513; }

    /* ── Live badge (green) ── */
    .live-badge-green {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #4caf50;
    }
    .live-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #4caf50;
      flex-shrink: 0;
    }

    /* ── Country pill on hero story card ── */
    .country-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 50px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.9);
      font-size: 12px;
      font-weight: 600;
    }

    /* ── Big quote on hero story card ── */
    .story-big-quote {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 25.6px;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 14px;
    }
    /* ── Mobile responsive fixes ─────────────────────────────── */
    @media (max-width: 767px) {
      .start-hero { padding: 60px 0 50px !important; }
      .story-hero-card { min-height: 320px !important; }
      h2[style*="font-size:3rem"] { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
    }
    @media (max-width: 479px) {
      .start-hero { padding: 44px 0 36px !important; }
      .story-hero-card { min-height: 260px !important; }
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: stories.html
═══════════════════════════════════════════════════ */

    /* ─── Story card ──────────────────────────────────────────── */
    .story-card {
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
      display: flex;
      flex-direction: column;
      transition: transform .2s, box-shadow .2s;
    }
    .story-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 32px -4px rgba(0,0,0,.14);
    }
    .story-card__thumb {
      width: 100%;
      height: 220px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .story-card__thumb img.thumb-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* gradient overlay for video cards */
    .story-card__thumb--gradient {
      background: linear-gradient(145deg, #6b8e23 0%, #c75100 100%);
    }
    /* dark fade-up overlay */
    .story-card__thumb-fade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
    }
    /* center icon */
    .story-card__thumb-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(255,255,255,.9);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .story-card__thumb-icon--plain {
      background: transparent;
    }
    /* top badges row */
    .story-card__thumb-badges {
      position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .story-card__format-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 100px;
      background: rgba(255,255,255,.9);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 12px;
      color: #c75100;
    }
    .story-card__dur-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 100px;
      background: rgba(255,255,255,.9);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 12px;
      color: #3e2723;
    }
    /* card body */
    .story-card__body {
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }
    .story-card__title {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 19px;
      color: #3e2723;
      line-height: 1.45;
    }
    .story-card__desc {
      font-size: 15px;
      color: #8b7567;
      line-height: 1.6;
      flex: 1;
    }
    .story-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(62,39,35,.06);
    }
    .story-card__time {
      font-size: 13.5px;
      color: #8b7567;
    }
    .story-card__arrow {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(199,81,0,.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c75100;
      flex-shrink: 0;
      transition: background .15s;
    }
    .story-card:hover .story-card__arrow {
      background: #c75100;
      color: #fff;
    }

    /* ─── Stories grid — 3-col on desktop, scroll on mobile ──── */
    .stories-grid {
      display               : grid;
      grid-template-columns : repeat(3, 1fr);
      gap                   : 28px;
    }
    @media (max-width: 1024px) {
      .stories-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .stories-grid {
        grid-auto-flow      : column !important;
        grid-auto-columns   : 85vw !important;
        grid-template-columns: none !important;
        overflow-x          : auto !important;
        scroll-snap-type    : x mandatory;
        scrollbar-width     : none;
        gap                 : 16px !important;
        padding-bottom      : 4px;
      }
      .stories-grid::-webkit-scrollbar { display: none; }
      .stories-grid > * { scroll-snap-align: start; }
    }

    /* ─── Filter tabs ─────────────────────────────────────────── */
    .story-filter {
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      border-radius: 100px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 15px;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
      border: 1.5px solid rgba(62,39,35,.12);
      background: #fff;
      color: #3e2723;
      white-space: nowrap;
    }
    .story-filter--active {
      background: #c75100;
      border-color: #c75100;
      color: #fff;
      box-shadow: 0 4px 6px rgba(0,0,0,.1);
    }
    .story-filter:hover:not(.story-filter--active) {
      border-color: rgba(199,81,0,.35);
      color: #c75100;
    }

    /* ─── Submit form card ────────────────────────────────────── */
    .submit-card {
      background: #fefaf6;
      border-radius: 28px;
      padding: 40px;
      box-shadow: 0 8px 16px rgba(62,39,35,.11);
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }
    .format-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 18px 16px;
      border-radius: 16px;
      cursor: pointer;
      transition: background .15s, border-color .15s;
      border: 1.5px solid transparent;
      flex: 1;
      background: #f4ede4;
    }
    .format-btn--active {
      background: rgba(199,81,0,.08);
      border-color: rgba(199,81,0,.3);
    }
    .format-btn__label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #3e2723;
      text-align: center;
    }
    .story-input {
      flex: 1;
      background: #f4ede4;
      border: 1.5px solid rgba(62,39,35,.14);
      border-radius: 12px;
      padding: 13px 17px;
      font-size: 14px;
      color: #3e2723;
      outline: none;
      transition: border-color .15s;
      font-family: 'Inter', sans-serif;
      min-width: 0;
    }
    .story-input::placeholder { color: #757575; }
    .story-input:focus { border-color: rgba(199,81,0,.45); }
    .story-textarea {
      width: 100%;
      background: #f4ede4;
      border: 1.5px solid rgba(62,39,35,.14);
      border-radius: 12px;
      padding: 13px 17px;
      font-size: 14px;
      color: #3e2723;
      outline: none;
      resize: vertical;
      min-height: 120px;
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      transition: border-color .15s;
    }
    .story-textarea::placeholder { color: #757575; }
    .story-textarea:focus { border-color: rgba(199,81,0,.45); }
    .story-row { display: flex; gap: 14px; margin-bottom: 14px; }
    @media (max-width: 540px) {
      .submit-card { padding: 24px 18px; }
      .story-row { flex-direction: column; gap: 10px; }
      #format-selector { gap: 8px; }
      .format-btn { padding: 14px 10px; }
      .format-btn__label { font-size: 11px; }
    }

    /* ─── Hero (reuse pattern) ────────────────────────────────── */
    .stories-hero {
      position: relative;
      width: 100%;
      padding: 120px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      min-height: 360px;
    }
    .stories-hero__bg {
      position: absolute;
      inset: 0;
      background-image: url('https://www.figma.com/api/mcp/asset/e0178460-a481-4e6d-b14e-9dee371bdbb0');
      background-size: cover;
      background-position: center;
    }
    .stories-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(126.82deg, rgba(62,39,35,.92) 0%, rgba(45,27,23,.92) 55%, rgba(199,81,0,.88) 100%);
    }
    .stories-hero__content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 700px;
      padding: 0 24px;
    }
    @media (max-width:640px) { .stories-hero { padding: 80px 0; } }
    [id] { scroll-margin-top: 80px; }
  

/* ═══════════════════════════════════════════════════
   PAGE: support.html
═══════════════════════════════════════════════════ */

    /* ─── Support Hero ────────────────────────────────────────── */
    .support-hero {
      position: relative;
      width: 100%;
      padding: 120px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      min-height: 420px;
    }
    .support-hero__bg {
      position: absolute;
      inset: 0;
      background-image: url('https://www.figma.com/api/mcp/asset/79f55651-ff14-4e29-8945-9e21d1f3d457');
      background-size: cover;
      background-position: center;
    }
    .support-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(121.94deg, rgba(62,39,35,0.92) 0%, rgba(45,27,23,0.92) 55%, rgba(199,81,0,0.88) 100%);
    }
    .support-hero__content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 720px;
      padding: 0 24px;
    }
    .support-hero__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: clamp(2rem, 4vw, 3.5rem);
      color: #fff;
      line-height: 1.15;
      margin-bottom: 20px;
    }
    .support-hero__sub {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1rem, 1.5vw, 1.35rem);
      color: rgba(255,255,255,0.8);
      line-height: 1.65;
      max-width: 580px;
      margin: 0 auto;
    }

    /* ─── Filter tabs (reuse learn-filter pattern) ────────────── */
    .learn-filter {
      display: inline-flex;
      align-items: center;
      padding: 6px 16px;
      border-radius: 100px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
      border: 1.5px solid rgba(62,39,35,.18);
      background: transparent;
      color: #6d4c41;
      white-space: nowrap;
    }
    .learn-filter--active {
      background: #c75100;
      border-color: #c75100;
      color: #fff;
    }
    .learn-filter:hover:not(.learn-filter--active) {
      border-color: rgba(199,81,0,.4);
      color: #c75100;
    }

    /* ─── Map placeholder ─────────────────────────────────────── */
    .map-placeholder {
      width: 100%;
      border-radius: 16px;
      padding: 48px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      background: linear-gradient(167deg, #ffedd4 0%, #fff7ed 100%);
      min-height: 200px;
    }
    .map-placeholder__icon {
      width: 48px;
      height: 48px;
      background: rgba(199,81,0,.12);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c75100;
    }
    .map-placeholder__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: #364153;
    }
    .map-placeholder__sub {
      font-size: 14px;
      color: #4a5565;
    }

    /* ─── Center card (Islamic centers) ─────────────────────────── */
    .center-card {
      background: #fff;
      border-radius: 17px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
      display: flex;
      flex-direction: column;
      transition: box-shadow .2s, transform .2s;
    }
    .center-card:hover {
      box-shadow: 0 8px 28px rgba(62,39,35,.12);
      transform: translateY(-2px);
    }
    .center-card__img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      display: block;
      flex-shrink: 0;
    }
    .center-card__body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }
    .center-card__badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 100px;
      background: #f4ede4;
      color: #3e2723;
      font-size: 12px;
      font-weight: 500;
      width: fit-content;
    }
    .center-card__badge--outline {
      background: transparent;
      border: 1px solid rgba(0,0,0,.11);
    }
    .center-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 17px;
      color: #0a0a0a;
      line-height: 1.4;
    }
    .center-card__dist {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #4a5565;
    }
    .center-card__langs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .center-card__lang {
      background: #f3f4f6;
      padding: 3px 9px;
      border-radius: 4px;
      font-size: 12px;
      color: #0a0a0a;
    }
    .center-card__actions {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .center-card__btn-contact {
      flex: 1;
      padding: 9px 16px;
      background: #c75100;
      color: #fff;
      border: none;
      border-radius: 100px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background .15s;
    }
    .center-card__btn-contact:hover { background: #a34200; }
    .center-card__btn-save {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid #d1d5dc;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color .15s;
      color: #6d4c41;
    }
    .center-card__btn-save:hover { border-color: #c75100; color: #c75100; }
    html.dark .center-card__btn-save {
      border-color: rgba(255,255,255,0.15) !important;
      color       : #A89080 !important;
    }
    html.dark .center-card__btn-save:hover {
      border-color: rgba(199,81,0,0.50) !important;
      color       : #E8703A !important;
    }

    /* ─── Mentor card v2 (reused from start-here) ──────────────── */
    .mentor-card-v2 {
      background: linear-gradient(131deg, #fff7ed 0%, #fff 100%);
      border-radius: 17px;
      padding: 24px;
      box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .mentor-card-v2__head {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .mentor-card-v2__avatar {
      width: 67px;
      height: 67px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    .mentor-card-v2__name {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 17px;
      color: #0a0a0a;
    }
    .mentor-card-v2__rating {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #4a5565;
      margin-top: 4px;
    }
    .mentor-card-v2__langs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .mentor-card-v2__lang {
      display: inline-flex;
      align-items: center;
      padding: 4px 11px;
      border-radius: 100px;
      background: rgba(199,81,0,.08);
      color: #c75100;
      font-size: 12px;
      font-weight: 500;
    }
    .mentor-card-v2__info {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .mentor-card-v2__specialty {
      font-size: 14px;
      color: #364153;
    }
    .mentor-card-v2__specialty span { font-weight: 600; }
    .mentor-card-v2__response {
      font-size: 14px;
      color: #008236;
    }
    .mentor-card-v2__response span { font-weight: 600; }
    .mentor-card-v2__bio {
      font-size: 13.5px;
      color: #6d4c41;
      line-height: 1.65;
    }
    .mentor-card-v2__btn {
      width: 100%;
      padding: 10px 16px;
      background: #c75100;
      color: #fff;
      border: none;
      border-radius: 100px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: background .15s;
    }
    .mentor-card-v2__btn:hover { background: #a34200; }

    /* ─── Event card ──────────────────────────────────────────── */
    .event-card {
      background: #fff;
      border-radius: 17px;
      padding: 24px;
      box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
    }
    .event-card__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    .event-card__icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, #c75100, #c96c3b);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .event-card__type {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 100px;
      font-size: 12.5px;
      font-weight: 500;
    }
    .event-card__type--green {
      background: #dcfce7;
      color: #016630;
    }
    .event-card__type--blue {
      background: #dbeafe;
      color: #1e40af;
    }
    html.dark .event-card__type--green {
      background: rgba(1,102,48,0.25) !important;
      color     : #86efac !important;
      border    : 1px solid rgba(134,239,172,0.20) !important;
    }
    html.dark .event-card__type--blue {
      background: rgba(30,64,175,0.25) !important;
      color     : #93c5fd !important;
      border    : 1px solid rgba(147,197,253,0.20) !important;
    }
    .event-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: #0a0a0a;
      line-height: 1.4;
    }
    .event-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 14px;
      color: #6d4c41;
    }
    .event-card__attendees {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .event-card__avatars {
      display: flex;
    }
    .event-card__avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #eeecec;
      border: 2px solid #fff;
      margin-right: -8px;
      flex-shrink: 0;
    }
    .event-card__attending {
      font-size: 14px;
      color: #6d4c41;
      margin-left: 10px;
    }
    .event-card__spots {
      font-size: 14px;
      color: #4a5565;
    }
    .event-card__btn {
      width: 100%;
      padding: 10px 16px;
      background: #c75100;
      color: #fff;
      border: none;
      border-radius: 100px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: background .15s;
    }
    .event-card__btn:hover { background: #a34200; }

    /* ─── 3-col responsive grid ──────────────────────────────── */
    .support-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 1024px) {
      .support-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .support-grid {
        grid-auto-flow    : column !important;
        grid-auto-columns : 85vw !important;
        grid-template-columns: none !important;
        overflow-x        : auto !important;
        scroll-snap-type  : x mandatory;
        scrollbar-width   : none;
        padding-bottom    : 4px;
      }
      .support-grid::-webkit-scrollbar { display: none; }
      .support-grid > * { scroll-snap-align: start; }
      .support-hero { padding: 80px 0; }
    }
    [id] { scroll-margin-top: 80px; }

    /* ─── DARK MODE — support.html ─────────────────────────── */
    html.dark .support-hero__bg { opacity: 0.5 !important; }
    html.dark .support-hero__title { color: #F0E6DC !important; }
    html.dark .support-hero__sub   { color: rgba(240,230,220,.6) !important; }

    /* Section backgrounds */
    html.dark #find-center,
    html.dark #mentors,
    html.dark #community,
    html.dark #events {
      background: #1A0F0A !important;
    }
    html.dark .support-section-title,
    html.dark .section h2 { color: #F0E6DC !important; }
    html.dark .section p   { color: #A89080 !important; }

    /* Map placeholder */
    html.dark .map-placeholder {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
    }
    html.dark .map-placeholder__title { color: #F0E6DC !important; }
    html.dark .map-placeholder__sub   { color: #A89080 !important; }
    html.dark .map-placeholder__icon  {
      background: rgba(199,81,0,.15) !important;
      color: #E8703A !important;
    }

    /* Center cards */
    html.dark .center-card {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .center-card__title  { color: #F0E6DC !important; }
    html.dark .center-card__dist   { color: #A89080 !important; }
    html.dark .center-card__lang   {
      background: rgba(255,255,255,.08) !important;
      color: #D4C5B8 !important;
    }
    html.dark .center-card__badge  {
      background: rgba(199,81,0,.15) !important;
      color: #E8703A !important;
    }

    /* Event cards */
    html.dark .event-card {
      background: rgba(72,42,30,.68) !important;
      box-shadow: none !important;
    }
    html.dark .event-card h3 { color: #F0E6DC !important; }
    html.dark .event-card__meta     { color: #A89080 !important; }
    html.dark .event-card__attending { color: #A89080 !important; }
    html.dark .event-card__spots    { color: #7A6A60 !important; }
    html.dark .event-card__avatar   { border-color: rgba(72,42,30,.68) !important; }


/* ═══════════════════════════════════════════════════
   PAGE: contact.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── HERO (dark) ───────────────────────────────────────── */
    .contact-hero {
      position: relative; overflow: hidden;
      background: linear-gradient(138deg, #1a0e0a 0%, #3e2723 45%, #6b2d0e 80%, #c75100 100%);
      padding: 96px 24px 88px; text-align: center;
    }
    /* Glow blobs */
    .contact-hero__glow-1 {
      position: absolute; top: -80px; right: -60px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, rgba(199,81,0,.28) 0%, transparent 65%);
      pointer-events: none;
    }
    .contact-hero__glow-2 {
      position: absolute; bottom: -100px; left: -80px;
      width: 420px; height: 420px; border-radius: 50%;
      background: radial-gradient(circle, rgba(107,142,35,.14) 0%, transparent 65%);
      pointer-events: none;
    }
    /* Subtle dot pattern overlay */
    .contact-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
    }
    .contact-hero__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
    .contact-hero__badge {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 7px 18px; border-radius: 20px; margin-bottom: 24px;
      background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
      font-size: 12px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: rgba(255,255,255,.90);
      backdrop-filter: blur(4px);
    }
    .contact-hero__title {
      font-family: 'Montserrat', sans-serif; font-weight: 800;
      font-size: 56px; line-height: 1.08; color: #ffffff; margin-bottom: 18px;
    }
    @media (max-width: 640px) { .contact-hero__title { font-size: 38px; } }
    .contact-hero__sub {
      font-size: 18px; line-height: 1.72; color: rgba(255,255,255,.68);
      max-width: 520px; margin: 0 auto;
    }
    /* Orange accent underline on title */
    .contact-hero__title span {
      position: relative; display: inline-block;
    }
    .contact-hero__title span::after {
      content: '';
      position: absolute; left: 0; bottom: -4px;
      width: 100%; height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, #c75100, #e8703a);
    }

    /* ─── MAIN LAYOUT ───────────────────────────────────────── */
    .contact-body { background: #faf7f2; padding: 48px 24px 80px; }
    .contact-body__inner {
      max-width: 1060px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start;
    }
    @media (max-width: 900px) { .contact-body__inner { grid-template-columns: 1fr; } }

    /* ─── FORM CARD ─────────────────────────────────────────── */
    .form-card {
      background: white; border-radius: 28px; padding: 44px 40px;
      box-shadow: 0 4px 32px rgba(62,39,35,.07); border: 1px solid rgba(62,39,35,.06);
    }
    @media (max-width: 640px) { .form-card { padding: 28px 22px; } }
    .form-card__heading {
      font-family: 'Montserrat', sans-serif; font-weight: 800;
      font-size: 26px; color: #3e2723; margin-bottom: 6px;
    }
    .form-card__sub { font-size: 14px; color: #8b7567; margin-bottom: 32px; line-height: 1.5; }

    /* Form row: 2 cols */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

    /* Field */
    .form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
    .form-label {
      font-size: 13px; font-weight: 600; color: #3e2723; letter-spacing: .01em;
    }
    .form-label span { color: #c75100; margin-left: 2px; }
    .form-input {
      width: 100%; padding: 13px 16px; border-radius: 14px;
      border: 1.5px solid rgba(62,39,35,.14); background: #faf7f2;
      font-family: 'Inter', sans-serif; font-size: 14.5px; color: #3e2723;
      outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
    }
    .form-input::placeholder { color: rgba(62,39,35,.35); }
    .form-input:focus {
      border-color: #c75100; background: white;
      box-shadow: 0 0 0 4px rgba(199,81,0,.08);
    }
    textarea.form-input { resize: vertical; min-height: 130px; line-height: 1.6; }

    /* Topic selector */
    .topic-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .topic-pill {
      padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 500;
      background: #faf7f2; border: 1.5px solid rgba(62,39,35,.12); color: #8b7567;
      cursor: pointer; transition: all .18s; user-select: none;
    }
    .topic-pill:hover { border-color: rgba(199,81,0,.30); color: #c75100; }
    .topic-pill.is-active {
      background: rgba(199,81,0,.09); border-color: rgba(199,81,0,.30);
      color: #c75100; font-weight: 600;
    }

    /* Submit button */
    .form-submit {
      width: 100%; padding: 16px 28px; border-radius: 100px; margin-top: 8px;
      background: linear-gradient(135deg, #c75100 0%, #e8703a 100%);
      color: white; font-family: 'Montserrat', sans-serif;
      font-weight: 700; font-size: 16px; border: none; cursor: pointer;
      box-shadow: 0 6px 24px rgba(199,81,0,.26);
      transition: transform .2s, box-shadow .2s, opacity .2s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .form-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(199,81,0,.36); }
    .form-submit:active { transform: translateY(0); }
    .form-submit:disabled { opacity: .55; cursor: default; transform: none; }

    /* Success state */
    .form-success {
      display: none; text-align: center; padding: 40px 20px;
    }
    .form-success__icon { font-size: 56px; margin-bottom: 16px; }
    .form-success__title {
      font-family: 'Montserrat', sans-serif; font-weight: 800;
      font-size: 22px; color: #3e2723; margin-bottom: 8px;
    }
    .form-success__text { font-size: 15px; color: #8b7567; line-height: 1.65; }

    /* ─── SIDEBAR ───────────────────────────────────────────── */
    .contact-sidebar { display: flex; flex-direction: column; gap: 16px; }

    /* Info card */
    .info-card {
      background: white; border-radius: 22px; padding: 24px;
      border: 1px solid rgba(62,39,35,.06);
      box-shadow: 0 2px 16px rgba(62,39,35,.05);
      display: flex; gap: 18px; align-items: flex-start;
    }
    .info-card__icon {
      width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 22px;
    }
    .info-card__icon--orange { background: rgba(199,81,0,.10); }
    .info-card__icon--green  { background: rgba(107,142,35,.10); }
    .info-card__icon--brown  { background: rgba(62,39,35,.07); }
    .info-card__title { font-size: 13px; font-weight: 700; color: #3e2723; margin-bottom: 4px; }
    .info-card__val   { font-size: 14px; font-weight: 500; color: #8b7567; line-height: 1.5; }
    .info-card__link  { color: #c75100; text-decoration: none; font-weight: 600; transition: opacity .15s; }
    .info-card__link:hover { opacity: .78; }

    /* AI banner */
    .ai-banner {
      background: linear-gradient(159deg, rgba(62,39,35,.96) 0%, rgba(90,40,20,.92) 100%);
      border-radius: 22px; padding: 26px; position: relative; overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 8px 40px rgba(62,39,35,.20);
    }
    .ai-banner__glow {
      position: absolute; top: -50px; right: -50px;
      width: 180px; height: 180px; border-radius: 50%;
      background: radial-gradient(circle, rgba(199,81,0,.28) 0%, transparent 70%);
      pointer-events: none;
    }
    .ai-banner__icon {
      width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px;
      background: linear-gradient(135deg, #c75100, #e8703a);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 20px rgba(199,81,0,.40); position: relative;
    }
    .ai-banner__icon svg { width: 22px; height: 22px; fill: white; }
    .ai-banner__title { font-size: 15px; font-weight: 700; color: white; margin-bottom: 8px; line-height: 1.3; position: relative; }
    .ai-banner__sub   { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.6; margin-bottom: 18px; position: relative; }
    .ai-banner__btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 11px 22px; border-radius: 100px; text-decoration: none;
      background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
      color: white; font-size: 13.5px; font-weight: 600;
      transition: background .18s; position: relative;
    }
    .ai-banner__btn:hover { background: rgba(255,255,255,.18); }

    /* Social row */
    .social-card {
      background: white; border-radius: 22px; padding: 22px 24px;
      border: 1px solid rgba(62,39,35,.06); box-shadow: 0 2px 16px rgba(62,39,35,.05);
    }
    .social-card__title { font-size: 13px; font-weight: 700; color: #3e2723; margin-bottom: 14px; }
    .social-row { display: flex; gap: 8px; justify-content: space-between; }
    .social-btn {
      flex: 1;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      cursor: pointer; text-decoration: none;
      background: none; border: none; padding: 4px 0;
    }
    .social-btn__icon {
      width: 52px; height: 52px; border-radius: 50%;
      border: 1.5px solid rgba(62,39,35,.12); background: #faf7f2;
      display: flex; align-items: center; justify-content: center;
      transition: border-color .18s, background .18s;
      flex-shrink: 0;
    }
    .social-btn:hover .social-btn__icon {
      border-color: rgba(199,81,0,.30);
      background: rgba(199,81,0,.04);
    }
    .social-btn__lbl  { font-size: 10px; font-weight: 600; color: #8b7567; }

    /* FAQ */
    .faq-card {
      background: #f4ede4; border-radius: 22px; padding: 24px;
      border: 1px solid rgba(62,39,35,.06);
    }
    .faq-card__title { font-size: 13px; font-weight: 700; color: #3e2723; margin-bottom: 14px; }
    .faq-item { padding: 12px 0; border-bottom: 1px solid rgba(62,39,35,.08); }
    .faq-item:last-child { border-bottom: none; padding-bottom: 0; }
    .faq-item__q { font-size: 13px; font-weight: 600; color: #3e2723; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .faq-item__q::after { content: '▾'; color: #c75100; font-size: 12px; flex-shrink: 0; transition: transform .2s; }
    .faq-item.is-open .faq-item__q::after { transform: rotate(180deg); }
    .faq-item__a { display: none; font-size: 12.5px; color: #8b7567; line-height: 1.6; margin-top: 8px; }
    .faq-item.is-open .faq-item__a { display: block; }

    /* ─── MOBILE FIXES ─────────────────────────────────────── */
    .contact-body { overflow-x: hidden; }
    @media (max-width: 375px) {
      .contact-hero { padding: 72px 16px 64px; }
      .topic-pills { gap: 6px; }
      .topic-pill { padding: 7px 12px; font-size: 12px; }
      .social-row { flex-wrap: wrap; }
      .social-btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
    }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark .contact-body { background: #1A0F0A !important; }

    html.dark .form-card {
      background     : rgba(72,42,30,0.68) !important;
      border-color   : rgba(255,255,255,0.10) !important;
      box-shadow     : none !important;
      backdrop-filter: blur(14px);
    }
    html.dark .form-card__heading { color: #F0E6DC !important; }
    html.dark .form-card__sub     { color: #A89080 !important; }

    html.dark .form-label { color: #D4C5B8 !important; }

    html.dark .form-input {
      background  : rgba(255,255,255,0.07) !important;
      border-color: rgba(255,255,255,0.12) !important;
      color       : #F0E6DC !important;
    }
    html.dark .form-input::placeholder { color: rgba(240,230,220,0.35) !important; }
    html.dark .form-input:focus {
      background  : rgba(255,255,255,0.10) !important;
      border-color: rgba(199,81,0,0.55) !important;
      box-shadow  : 0 0 0 4px rgba(199,81,0,0.12) !important;
    }

    html.dark .topic-pill {
      background  : rgba(255,255,255,0.08) !important;
      border-color: rgba(255,255,255,0.15) !important;
      color       : #D4C5B8 !important;
    }
    html.dark .topic-pill:hover {
      border-color: rgba(199,81,0,0.40) !important;
      color       : #E8703A !important;
    }
    html.dark .topic-pill.is-active {
      background  : rgba(199,81,0,0.18) !important;
      border-color: rgba(199,81,0,0.40) !important;
      color       : #E8703A !important;
      font-weight : 600;
    }

    html.dark .info-card {
      background  : rgba(72,42,30,0.68) !important;
      border-color: rgba(255,255,255,0.10) !important;
      box-shadow  : none !important;
    }
    html.dark .info-card__title { color: #F0E6DC !important; }
    html.dark .info-card__val   { color: #A89080 !important; }
    html.dark .info-card__val span { color: #7A6A60 !important; }
    html.dark .info-card__icon {
      background: rgba(255,255,255,0.08) !important;
    }
    html.dark .info-card__icon svg path,
    html.dark .info-card__icon svg rect,
    html.dark .info-card__icon svg circle {
      stroke: rgba(240,230,220,0.75) !important;
    }

    html.dark .social-card {
      background  : rgba(72,42,30,0.68) !important;
      border-color: rgba(255,255,255,0.10) !important;
      box-shadow  : none !important;
    }
    html.dark .social-card__title { color: #F0E6DC !important; }
    body[data-page="contact"] html.dark .social-btn__icon,
    html.dark .social-btn__icon {
      background  : rgba(255,255,255,0.07) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }
    html.dark .social-btn:hover .social-btn__icon {
      border-color: rgba(199,81,0,0.35) !important;
      background  : rgba(199,81,0,0.08) !important;
    }
    html.dark .social-btn__lbl { color: #A89080 !important; }
    /* Fix dark SVG icons inside social buttons in dark mode */
    html.dark .social-btn svg path[fill="black"],
    html.dark .social-btn svg path[fill="#000"],
    html.dark .social-btn svg path[fill="currentColor"] {
      fill: #F0E6DC !important;
    }

    html.dark .faq-card {
      background  : rgba(62,39,35,0.60) !important;
      border-color: rgba(255,255,255,0.10) !important;
    }
    html.dark .faq-card__title { color: #F0E6DC !important; }
    html.dark .faq-item        { border-color: rgba(255,255,255,0.08) !important; }
    html.dark .faq-item__q     { color: #F0E6DC !important; }
    html.dark .faq-item__a     { color: #A89080 !important; }

    html.dark .form-success__title { color: #F0E6DC !important; }
    html.dark .form-success__text  { color: #A89080 !important; }
    html.dark .form-reset-btn {
      background  : rgba(72,42,30,0.68) !important;
      border-color: rgba(255,255,255,0.15) !important;
      color       : #F0E6DC !important;
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: search.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── HERO ───────────────────────────────────────────────── */
    .search-hero {
      position: relative;
      overflow: hidden;
      padding: 80px 24px 64px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
      background: #f4ede4;
    }
    .search-hero__glow {
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 600px;
      background: radial-gradient(circle at center, rgba(199,81,0,.10) 0%, rgba(199,81,0,0) 70%);
      pointer-events: none;
    }

    /* ─── Trending pills ─────────────────────────────────────── */
    .trending-pill {
      display: inline-flex;
      align-items: center;
      padding: 9px 19px;
      border-radius: 50px;
      background: rgba(199,81,0,.06);
      border: 1px solid rgba(199,81,0,.2);
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #c75100;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
    }
    .trending-pill:hover { background: rgba(199,81,0,.12); }

    /* ─── Filter tabs ────────────────────────────────────────── */
    .sf-tab {
      display: inline-flex;
      align-items: center;
      padding: 10px 19px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
      border: 1px solid rgba(62,39,35,.15);
      background: rgba(255,255,255,.7);
      color: #6d4c41;
      white-space: nowrap;
    }
    .sf-tab--active {
      background: #c75100;
      border-color: #c75100;
      color: #fff;
    }
    .sf-tab:hover:not(.sf-tab--active) { background: #fff; }

    /* ─── Result type badges ─────────────────────────────────── */
    .res-badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 12px;
      border-radius: 50px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 13px;
      white-space: nowrap;
    }
    .res-badge--olive  { background: rgba(107,142,35,.12); color: #6b8e23; }
    .res-badge--orange { background: rgba(199,81,0,.1);    color: #c75100; }
    .res-badge--dark   { background: rgba(62,39,35,.08);   color: #6d4c41; }
    .res-badge--warm   { background: rgba(201,108,59,.12); color: #c96c3b; }

    /* ─── Result cards ───────────────────────────────────────── */
    .res-card {
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 20px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: box-shadow .2s;
    }
    .res-card:hover { box-shadow: 0 6px 30px rgba(62,39,35,.09); }
    .res-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 17px;
      color: #3e2723;
      line-height: 1.5;
      margin: 0;
    }
    .res-card__excerpt {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: #6d4c41;
      line-height: 1.6;
      margin: 0;
    }
    .res-card__meta {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .res-card__meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 12px;
      color: rgba(62,39,35,.5);
      cursor: pointer;
      transition: color .15s;
      white-space: nowrap;
    }
    .res-card__meta-item:hover { color: #c75100; }

    /* ─── AI Panel sidebar ───────────────────────────────────── */
    .ai-panel {
      background: linear-gradient(161deg, rgba(255,255,255,.95) 0%, rgba(244,237,228,.9) 100%);
      border: 1px solid rgba(199,81,0,.15);
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 8px 40px rgba(62,39,35,.08);
      position: sticky;
      top: 90px;
    }
    .ai-panel__header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .ai-panel__icon {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      box-shadow: 0 4px 8px rgba(199,81,0,.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 18px;
      color: #fff;
    }
    .ai-panel__title {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 19px;
      color: #3e2723;
      line-height: 1;
      margin-bottom: 2px;
    }
    .ai-panel__sub {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: #6d4c41;
    }
    .ai-suggestion {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      background: rgba(199,81,0,.05);
      border: 1px solid rgba(199,81,0,.15);
      border-radius: 14px;
      padding: 13px 17px;
      cursor: pointer;
      transition: background .2s;
    }
    .ai-suggestion + .ai-suggestion { margin-top: 10px; }
    .ai-suggestion:hover { background: rgba(199,81,0,.1); }
    .ai-suggestion__star {
      font-size: 13px;
      color: #c75100;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .ai-suggestion__text {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #6d4c41;
      line-height: 1.5;
    }
    .ai-panel__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 15px 14px;
      border-radius: 34px;
      border: none;
      background: #c75100;
      box-shadow: 0 4px 8px rgba(199,81,0,.25);
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      transition: opacity .2s;
      margin-top: 16px;
    }
    .ai-panel__cta:hover { opacity: .88; }
    .ai-panel__powered {
      text-align: center;
      font-family: 'Montserrat', sans-serif;
      font-size: 11px;
      color: rgba(62,39,35,.4);
      margin-top: 10px;
    }

    /* ─── Trending discoveries ───────────────────────────────── */
    .trend-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 18px;
      padding: 21px;
      width: 256px;
      cursor: pointer;
      transition: box-shadow .2s, background .2s;
      flex-shrink: 0;
    }
    .trend-card:hover { background: #fff; box-shadow: 0 4px 20px rgba(62,39,35,.08); }
    .trend-card__num {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 28px;
      color: rgba(199,81,0,.15);
      line-height: 1;
      width: 36px;
      flex-shrink: 0;
    }
    .trend-card__title {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #3e2723;
      line-height: 1.5;
      margin-bottom: 3px;
    }
    .trend-card__count {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: #6d4c41;
    }

    /* ─── Layout ─────────────────────────────────────────────── */
    .results-layout {
      display: grid;
      grid-template-columns: 1fr 358px;
      gap: 24px;
      width: 100%;
      max-width: 1140px;
      margin: 0 auto;
    }
    @media (max-width: 1100px) {
      .results-layout { grid-template-columns: 1fr; }
      .ai-panel { position: static; }
    }
    @media (max-width: 768px) {
      .search-hero { padding: 60px 16px 48px; }
      .search-bar { max-width: 100%; }
      .search-bar__btn { padding: 11px 18px; font-size: 14px; }
    }
    /* Duo cards row: stack to single column on mobile */
    @media (max-width: 640px) {
      .duo-cards-row { grid-template-columns: 1fr !important; }
      .trend-card { width: auto; min-width: 0; flex: 1 1 calc(50% - 8px); }
    }
    @media (max-width: 420px) {
      .trend-card { flex: 1 1 100%; }
    }
    [id] { scroll-margin-top: 80px; }

    /* ─── DARK MODE ─────────────────────────────────────────── */
    html.dark body { background: #1A0F0A !important; }
    html.dark .search-hero {
      background: linear-gradient(160deg, #1A0F0A 0%, #2C1B17 100%) !important;
    }
    html.dark .search-hero h1 { color: #F0E6DC !important; }
    html.dark .search-hero h1 span[style*="#c75100"] { color: #E8703A !important; }
    html.dark .search-hero p { color: rgba(240,230,220,.65) !important; }
    /* Search bar */
    html.dark .search-box .search-box__input,
    html.dark .search-box__input {
      background: rgba(255,255,255,.06) !important;
      border    : none !important;
      color     : #F0E6DC !important;
      box-shadow: 0 20px 25px -5px rgba(0,0,0,.3), 0 8px 10px -6px rgba(0,0,0,.2) !important;
    }
    html.dark .search-box__input::placeholder { color: rgba(240,230,220,.35) !important; }
    /* Filter background sections */
    html.dark section[style*="background:#f4ede4"],
    html.dark section[style*="background: #f4ede4"] {
      background: #1A0F0A !important;
    }
    /* Filter tabs */
    html.dark .sf-tab {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
      color: rgba(240,230,220,.75) !important;
    }
    html.dark .sf-tab--active {
      background: #c75100 !important;
      border-color: #c75100 !important;
      color: #fff !important;
    }
    html.dark .sf-tab:hover:not(.sf-tab--active) {
      background: rgba(72,42,30,.90) !important;
    }
    /* Result cards */
    html.dark .res-card {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
    }
    html.dark .res-card:hover { box-shadow: 0 6px 30px rgba(0,0,0,.3) !important; }
    html.dark .res-card__title { color: #F0E6DC !important; }
    html.dark .res-card__excerpt { color: rgba(240,230,220,.75) !important; }
    html.dark .res-card__meta-item { color: rgba(240,230,220,.45) !important; }
    html.dark .res-card__meta-item:hover { color: #E8703A !important; }
    /* Result type badges */
    html.dark .res-badge--olive  { background: rgba(107,142,35,.18) !important; color: #a5c95a !important; }
    html.dark .res-badge--orange { background: rgba(199,81,0,.18) !important;    color: #E8703A !important; }
    html.dark .res-badge--dark   { background: rgba(255,255,255,.08) !important; color: rgba(240,230,220,.65) !important; }
    html.dark .res-badge--warm   { background: rgba(201,108,59,.18) !important;  color: #e8956d !important; }
    /* Trending pills */
    html.dark .trending-pill {
      background: rgba(199,81,0,.12) !important;
      border-color: rgba(199,81,0,.25) !important;
      color: #E8703A !important;
    }
    html.dark .trending-pill:hover { background: rgba(199,81,0,.2) !important; }
    /* AI Panel */
    html.dark .ai-panel {
      background: linear-gradient(161deg, rgba(72,42,30,.90) 0%, rgba(44,27,23,.95) 100%) !important;
      border-color: rgba(255,255,255,.10) !important;
      box-shadow: 0 8px 40px rgba(0,0,0,.3) !important;
    }
    html.dark .ai-panel__title { color: #F0E6DC !important; }
    html.dark .ai-panel__sub   { color: rgba(240,230,220,.55) !important; }
    html.dark .ai-suggestion {
      background: rgba(199,81,0,.08) !important;
      border-color: rgba(199,81,0,.2) !important;
    }
    html.dark .ai-suggestion:hover { background: rgba(199,81,0,.15) !important; }
    html.dark .ai-suggestion__text { color: rgba(240,230,220,.80) !important; }
    html.dark .ai-panel__powered { color: rgba(240,230,220,.3) !important; }
    /* Trending section heading */
    html.dark .trend-card {
      background: rgba(72,42,30,.68) !important;
      border-color: rgba(255,255,255,.10) !important;
    }
    html.dark .trend-card:hover { background: rgba(72,42,30,.90) !important; box-shadow: 0 4px 20px rgba(0,0,0,.25) !important; }
    html.dark .trend-card__title  { color: #F0E6DC !important; }
    html.dark .trend-card__count  { color: rgba(240,230,220,.55) !important; }
    html.dark .trend-card__num    { color: rgba(199,81,0,.25) !important; }
    /* Section headings */
    html.dark h2[style*="color:#3e2723"] { color: #F0E6DC !important; }
    html.dark p[style*="color:#6d4c41"]  { color: rgba(240,230,220,.65) !important; }
    /* Load more button */
    html.dark [onclick="loadMore()"] {
      border-color: rgba(199,81,0,.3) !important;
      color: #E8703A !important;
    }
  

/* ═══════════════════════════════════════════════════
   PAGE: login.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; padding: 0; }

    /* ─── Layout ─────────────────────────────────────────────── */
    .login-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
    }
    /* Mobile: single column, no dark panel */
    @media (max-width: 860px) {
      .login-wrap { grid-template-columns: 1fr; }
      .login-left  { display: none !important; }
      body { background: #f4ede4; }
    }

    /* ─── Left panel (dark — desktop only) ───────────────────── */
    .login-left {
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, #3e2723 0%, #5d3b2c 30%, #8b4513 60%, #c75100 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px;
    }
    .login-left::before {
      content: '';
      position: absolute;
      top: -20%; left: 36%;
      width: 55%; height: 50%;
      background: radial-gradient(circle, rgba(199,81,0,.4) 0%, transparent 70%);
      pointer-events: none;
    }
    .login-left::after {
      content: '';
      position: absolute;
      bottom: -30%; left: -10%;
      width: 50%; height: 50%;
      background: radial-gradient(circle, rgba(201,108,59,.25) 0%, transparent 70%);
      pointer-events: none;
    }
    .deco-card {
      position: absolute;
      display: flex; align-items: flex-start; flex-direction: column;
      gap: 4px; padding: 14px 18px; border-radius: 16px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      backdrop-filter: blur(8px);
    }
    .deco-card__label { font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; color:rgba(255,255,255,.9); white-space:nowrap; }
    .deco-card--tl { top:9%;  left:19%; }
    .deco-card--tr { top:15%; right:8%; }
    .deco-card--bl { bottom:18%; right:12%; }
    .login-left__content { position:relative; z-index:1; display:flex; flex-direction:column; gap:24px; max-width:420px; width:100%; }
    .login-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:50px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; color:rgba(255,255,255,.8); letter-spacing:1px; text-transform:uppercase; width:fit-content; }
    .login-badge__dot { width:6px; height:6px; border-radius:3px; background:#c96c3b; flex-shrink:0; }
    .login-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(2.2rem,3.5vw,3.15rem); line-height:1.1; color:#fff; letter-spacing:-1.5px; margin:0; }
    .login-title span { color:rgba(201,108,59,.9); }
    .login-quote { border-left:1.6px solid rgba(199,81,0,.5); padding-left:18px; display:flex; flex-direction:column; gap:6px; }
    .login-quote__text { font-family:'Lora',Georgia,serif; font-style:italic; font-size:17px; color:rgba(255,255,255,.7); line-height:1.7; margin:0; }
    .login-quote__cite { font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; color:rgba(255,255,255,.45); }
    .login-trust { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
    .login-trust__item { display:flex; align-items:center; gap:7px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; color:rgba(255,255,255,.65); white-space:nowrap; }

    /* ─── Right panel ─────────────────────────────────────────── */
    .login-right {
      background: #f4ede4;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      overflow-y: auto;
    }
    .login-form-wrap {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* top logo — shown on both desktop and mobile */
    .login-form-logo { display: block; margin-bottom: 28px; }

    /* heading */
    .login-form-wrap h1 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 30px;
      color: #3e2723;
      letter-spacing: -.5px;
      margin: 0 0 6px;
    }
    .login-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: #6d4c41;
      margin: 0 0 24px;
    }
    .login-subtitle a {
      color: #c75100;
      font-weight: 600;
      text-decoration: none;
    }
    .login-subtitle a:hover { text-decoration: underline; }

    /* social buttons */
    /* Login page social login buttons — scoped to avoid conflict with contact page */
    body[data-page="login"] .social-btn {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      border-radius: 100px;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(62,39,35,.18);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #3e2723;
      cursor: pointer;
      transition: background .2s, border-color .2s;
      text-decoration: none;
    }
    body[data-page="login"] .social-btn:hover { background: #fff; border-color: rgba(62,39,35,.3); }
    body[data-page="login"] .social-btn + .social-btn { margin-top: 10px; }

    /* divider */
    .login-divider {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 20px 0;
    }
    .login-divider__line {
      flex: 1;
      height: 1px;
      background: rgba(62,39,35,.12);
    }
    .login-divider__text {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 12px;
      color: rgba(62,39,35,.4);
      white-space: nowrap;
    }

    /* input fields */
    .input-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 10px;
    }
    .input-group label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 13px;
      color: #6d4c41;
      letter-spacing: .5px;
      text-transform: uppercase;
    }
    .input-wrapper {
      position: relative;
    }
    .input-wrapper .input-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      pointer-events: none;
      opacity: .55;
    }
    .input-wrapper .input-eye {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      cursor: pointer;
      opacity: .45;
      transition: opacity .15s;
    }
    .input-wrapper .input-eye:hover { opacity: .75; }
    .login-input {
      width: 100%;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(62,39,35,.15);
      border-radius: 14px;
      padding: 14px 16px 14px 46px;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #3e2723;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .login-input::placeholder { color: rgba(62,39,35,.35); }
    .login-input:focus {
      border-color: rgba(199,81,0,.45);
      box-shadow: 0 0 0 3px rgba(199,81,0,.08);
    }
    .login-input--pw { padding-right: 44px; }

    /* options row */
    .login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 12px 0 20px;
    }
    .login-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }
    .login-checkbox input {
      width: 18px;
      height: 18px;
      border: 1px solid #b7b5b5;
      border-radius: 3px;
      accent-color: #c75100;
      cursor: pointer;
    }
    .login-checkbox span {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #6d4c41;
    }
    .login-forgot {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #c75100;
      text-decoration: none;
    }
    .login-forgot:hover { text-decoration: underline; }

    /* CTA + Guest — use standard btn classes, just ensure full width */
    .login-cta, .login-guest { width: 100%; justify-content: center; }

    /* legal */
    .login-legal {
      margin-top: 20px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 12px;
      color: rgba(62,39,35,.45);
      text-align: center;
      line-height: 1.6;
    }
    .login-legal a { color: #c75100; text-decoration: none; }
    .login-legal a:hover { text-decoration: underline; }
  

/* ═══════════════════════════════════════════════════
   PAGE: profile.html
═══════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; }

    /* ─── Hero banner ──────────────────────────────────────── */
    .profile-hero-banner {
      position: relative;
      height: 229px;
      background: #c75100;
      overflow: hidden;
      margin-bottom: -80px;
    }
    .profile-hero-banner::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 160px;
      background: linear-gradient(to top, #f4ede4, rgba(244,237,228,0));
    }
    .profile-hero-banner__pattern {
      position: absolute;
      inset: 0;
      opacity: .06;
      background-image:
        radial-gradient(circle at 20% 40%, rgba(255,255,255,.6) 0%, transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.4) 0%, transparent 50%);
    }

    /* ─── Profile card (glassmorphism) ────────────────────── */
    .profile-card {
      position: relative;
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 28px;
      box-shadow: 0 16px 60px rgba(62,39,35,.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 28px 32px 24px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    /* ─── Avatar ───────────────────────────────────────────── */
    .profile-avatar {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 28px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      box-shadow: 0 8px 16px rgba(199,81,0,.35);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .profile-avatar__initials {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 36px;
      color: #fff;
      line-height: 1;
    }
    .profile-avatar__dot {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 14px;
      height: 14px;
      border-radius: 7px;
      background: #6b8e23;
      border: 2px solid #fff;
    }

    /* ─── Tags ─────────────────────────────────────────────── */
    .profile-tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 15px;
      border-radius: 50px;
      background: rgba(199,81,0,.08);
      border: 1px solid rgba(199,81,0,.18);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #c75100;
      white-space: nowrap;
    }

    /* ─── Stats row ────────────────────────────────────────── */
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .stat-item__val {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 26px;
      color: #3e2723;
      line-height: 1;
    }
    .stat-item__lbl {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 11.5px;
      color: #6d4c41;
      white-space: nowrap;
    }

    /* ─── Action buttons ───────────────────────────────────── */
    .btn-edit {
      display: inline-flex;
      align-items: center;
      padding: 10px 22px;
      border-radius: 50px;
      border: 1px solid rgba(62,39,35,.2);
      background: transparent;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #6d4c41;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      white-space: nowrap;
    }
    .btn-edit:hover { background: rgba(62,39,35,.04); border-color: rgba(62,39,35,.35); }

    .btn-ai-chat {
      display: inline-flex;
      align-items: center;
      padding: 10px 22px;
      border-radius: 50px;
      border: none;
      background: linear-gradient(132deg, #c75100 0%, #c96c3b 100%);
      box-shadow: 0 4px 8px rgba(199,81,0,.25);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #fff;
      cursor: pointer;
      transition: opacity .2s;
      white-space: nowrap;
    }
    .btn-ai-chat:hover { opacity: .88; }

    /* ─── Streak banner ────────────────────────────────────── */
    .streak-bar {
      background: linear-gradient(138deg, rgba(199,81,0,.08) 0%, rgba(107,142,35,.06) 100%);
      border: 1px solid rgba(199,81,0,.15);
      border-radius: 20px;
      padding: 20px 28px;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .streak-bar__text { flex: 1; min-width: 200px; }
    .streak-bar__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 20px;
      color: #3e2723;
      line-height: 1.2;
    }
    .streak-bar__sub {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: #6d4c41;
      margin-top: 3px;
    }
    .day-bubble {
      width: 36px;
      height: 36px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 11px;
    }
    .day-bubble--done {
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      color: #fff;
    }
    .day-bubble--today {
      background: rgba(199,81,0,.15);
      border: 1px solid #c75100;
      color: #c75100;
    }
    .day-bubble--future {
      background: rgba(62,39,35,.05);
      border: 1px solid rgba(62,39,35,.12);
      color: rgba(62,39,35,.3);
    }

    /* ─── Dashboard layout ─────────────────────────────────── */
    .dashboard {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 32px;
      padding: 40px 0 80px;
    }
    @media (max-width: 1100px) {
      .dashboard { grid-template-columns: 1fr; }
      .dashboard-sidebar { order: -1; }
    }

    /* ─── Dashboard cards ──────────────────────────────────── */
    .dash-card {
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 24px;
      padding: 28px;
      width: 100%;
    }
    .dash-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: #3e2723;
      margin: 0 0 20px;
    }

    /* ─── Continue Learning items ──────────────────────────── */
    .learn-item {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(244,237,228,.5);
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 16px;
      padding: 17px;
    }
    .learn-item + .learn-item { margin-top: 12px; }
    .learn-item__icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 22px;
    }
    .learn-item__icon--orange { background: linear-gradient(135deg, rgba(199,81,0,.15) 0%, rgba(201,108,59,.1) 100%); }
    .learn-item__icon--olive  { background: linear-gradient(135deg, rgba(107,142,35,.15) 0%, rgba(107,142,35,.08) 100%); }
    .learn-item__icon--dark   { background: linear-gradient(135deg, rgba(62,39,35,.1) 0%, rgba(62,39,35,.06) 100%); }
    .learn-item__info { flex: 1; min-width: 0; }
    .learn-item__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 15px;
      color: #3e2723;
      line-height: 1.45;
      margin-bottom: 3px;
    }
    .learn-item__meta {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: #6d4c41;
    }
    .learn-item__progress { width: 80px; flex-shrink: 0; }
    .learn-item__pct {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 11px;
      color: #c75100;
      text-align: right;
      margin-bottom: 4px;
    }
    .progress-track {
      height: 4px;
      background: rgba(199,81,0,.12);
      border-radius: 2px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      border-radius: 2px;
      background: linear-gradient(to right, #c75100, #c96c3b);
    }
    .btn-resume {
      display: inline-flex;
      align-items: center;
      padding: 8px 18px;
      border-radius: 50px;
      border: none;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .2s;
      flex-shrink: 0;
    }
    .btn-resume:hover { opacity: .88; }

    /* ─── Saved Content ────────────────────────────────────── */
    .saved-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }
    .saved-tab {
      display: inline-flex;
      align-items: center;
      padding: 9px 19px;
      border-radius: 50px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s;
      border: 1px solid rgba(62,39,35,.15);
      background: transparent;
      color: #6d4c41;
      white-space: nowrap;
    }
    .saved-tab--active {
      background: #c75100;
      border-color: #c75100;
      color: #fff;
    }
    .saved-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    @media (max-width: 680px) { .saved-grid { grid-template-columns: 1fr; } }
    .saved-item {
      background: rgba(244,237,228,.5);
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 14px;
      padding: 15px;
    }
    .saved-item__type {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 11px;
      color: #c75100;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }
    .saved-item__title {
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      color: #3e2723;
      line-height: 1.5;
    }

    /* ─── AI Chat History ──────────────────────────────────── */
    .chat-hist-item {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(244,237,228,.4);
      border: 1px solid rgba(199,81,0,.08);
      border-radius: 14px;
      padding: 15px 17px;
    }
    .chat-hist-item + .chat-hist-item { margin-top: 10px; }
    .chat-hist-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .chat-hist-item__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #3e2723;
      line-height: 1.45;
      margin-bottom: 2px;
    }
    .chat-hist-item__meta {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: #6d4c41;
    }

    /* ─── Sidebar ──────────────────────────────────────────── */
    .sidebar-card {
      background: linear-gradient(160deg, rgba(199,81,0,.05) 0%, rgba(107,142,35,.04) 100%);
      border: 1px solid rgba(199,81,0,.15);
      border-radius: 24px;
      padding: 24px;
    }
    .sidebar-card + .sidebar-card { margin-top: 28px; }
    .sidebar-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 17px;
      color: #3e2723;
      margin: 0 0 16px;
    }

    /* AI picks cards */
    .pick-card {
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 14px;
      padding: 14px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .pick-card + .pick-card { margin-top: 10px; }
    .pick-card__img {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(199,81,0,.15), rgba(201,108,59,.1));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .pick-card__type {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 10px;
      color: #c75100;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 3px;
    }
    .pick-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: #3e2723;
      line-height: 1.45;
    }
    .pick-card__meta {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: #8b7567;
      margin-top: 2px;
    }

    /* Quick links card */
    .quick-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(199,81,0,.08);
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #3e2723;
      cursor: pointer;
      text-decoration: none;
      transition: background .2s, box-shadow .2s;
    }
    .quick-link + .quick-link { margin-top: 8px; }
    .quick-link:hover { background: rgba(255,255,255,.95); box-shadow: 0 2px 12px rgba(62,39,35,.06); }
    .quick-link__icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .quick-link__icon--orange { background: rgba(199,81,0,.1); }
    .quick-link__icon--olive  { background: rgba(107,142,35,.1); }
    .quick-link__icon--dark   { background: rgba(62,39,35,.08); }
    .quick-link__arrow {
      margin-left: auto;
      color: rgba(62,39,35,.25);
      font-size: 14px;
    }

    @media (max-width: 768px) {
      .profile-card { padding: 20px; }
      .streak-bar { padding: 16px 20px; }
      .dash-card { padding: 20px; }
    }

    /* ─── TASK 1: Mobile layout fixes (375px) ──────────────── */
    @media (max-width: 600px) {
      /* Profile card: stack avatar+name block above stats+buttons */
      .profile-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }
      /* Left side: avatar + name — let them wrap naturally */
      .profile-card > div:first-child {
        flex-wrap: wrap;
      }
      /* Right side: stats + buttons — full width, reverse order so buttons go on top */
      .profile-card > div:last-child {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 12px;
      }
      /* Buttons row: allow wrapping so they don't overflow */
      .profile-card > div:last-child > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
      }
      .btn-edit, .btn-ai-chat {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        font-size: 12px;
        padding: 9px 14px;
      }
      /* Stats row: keep on one line, reduce gap */
      .profile-card > div:last-child > div:last-child {
        display: flex;
        gap: 16px;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      .stat-item__val { font-size: 20px; }
      .stat-item__lbl { font-size: 10px; }

      /* Avatar shrink slightly */
      .profile-avatar { width: 80px; height: 80px; border-radius: 20px; }
      .profile-avatar__initials { font-size: 28px; }

      /* Name & meta */
      .profile-card h1 { font-size: 22px !important; }

      /* Streak bar: stack fire + text + bubbles */
      .streak-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
      .streak-bar__text { min-width: 0; width: 100%; }
      .streak-bar__title { font-size: 16px; }

      /* Hero banner shorter on mobile */
      .profile-hero-banner { height: 160px; margin-bottom: -60px; }

      /* Learn items: make progress+resume stack on very small screens */
      .learn-item { flex-wrap: wrap; }
      .learn-item__progress { order: 3; width: 100%; }
      .btn-resume { order: 4; }

      /* Saved tabs: horizontal scroll */
      .saved-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
      .saved-tab { flex-shrink: 0; }
    }

    /* ─── TASK 2: Dark mode for profile-specific elements ───── */
    html.dark body { background: #1A0F0A !important; }

    html.dark .profile-hero-banner::after {
      background: linear-gradient(to top, #1A0F0A, rgba(26,15,10,0)) !important;
    }

    html.dark .profile-card {
      background: rgba(72,42,30,0.68) !important;
      border-color: rgba(255,255,255,0.10) !important;
      box-shadow: 0 16px 60px rgba(0,0,0,.4) !important;
    }

    html.dark .profile-avatar__dot { border-color: #1A0F0A !important; }

    html.dark .profile-tag {
      background: rgba(199,81,0,0.15) !important;
      border-color: rgba(199,81,0,0.30) !important;
      color: #E8703A !important;
    }

    html.dark .stat-item__val { color: #F0E6DC !important; }
    html.dark .stat-item__lbl { color: #A89080 !important; }

    html.dark .btn-edit {
      border-color: rgba(255,255,255,0.15) !important;
      color: #C8A98A !important;
    }
    html.dark .btn-edit:hover {
      background: rgba(255,255,255,0.06) !important;
      border-color: rgba(255,255,255,0.28) !important;
    }

    html.dark .streak-bar {
      background: linear-gradient(138deg, rgba(199,81,0,0.12) 0%, rgba(107,142,35,0.09) 100%) !important;
      border-color: rgba(199,81,0,0.22) !important;
    }
    html.dark .streak-bar__title { color: #F0E6DC !important; }
    html.dark .streak-bar__sub   { color: #A89080 !important; }

    html.dark .day-bubble--future {
      background: rgba(255,255,255,0.05) !important;
      border-color: rgba(255,255,255,0.12) !important;
      color: rgba(240,230,220,0.25) !important;
    }
    html.dark .day-bubble--today {
      background: rgba(199,81,0,0.20) !important;
      border-color: #c75100 !important;
      color: #E8703A !important;
    }

    html.dark .dash-card {
      background: rgba(72,42,30,0.68) !important;
      border-color: rgba(255,255,255,0.10) !important;
    }
    html.dark .dash-card__title { color: #F0E6DC !important; }

    html.dark .learn-item {
      background: rgba(42,25,18,0.7) !important;
      border-color: rgba(255,255,255,0.08) !important;
    }
    html.dark .learn-item__title { color: #F0E6DC !important; }
    html.dark .learn-item__meta  { color: #A89080 !important; }
    html.dark .learn-item__pct   { color: #E8703A !important; }
    html.dark .progress-track    { background: rgba(199,81,0,0.18) !important; }

    html.dark .saved-tab {
      border-color: rgba(255,255,255,0.12) !important;
      color: #C8A98A !important;
    }
    html.dark .saved-tab:hover { background: rgba(255,255,255,0.06) !important; }
    html.dark .saved-tab--active {
      background: #c75100 !important;
      border-color: #c75100 !important;
      color: #fff !important;
    }

    html.dark .saved-item {
      background: rgba(42,25,18,0.7) !important;
      border-color: rgba(255,255,255,0.08) !important;
    }
    html.dark .saved-item__title { color: #F0E6DC !important; }

    html.dark .chat-hist-item {
      background: rgba(42,25,18,0.6) !important;
      border-color: rgba(255,255,255,0.07) !important;
    }
    html.dark .chat-hist-item__title { color: #F0E6DC !important; }
    html.dark .chat-hist-item__meta  { color: #A89080 !important; }
    html.dark .chat-hist-item svg     { stroke: rgba(240,230,220,0.20) !important; }

    html.dark .sidebar-card {
      background: rgba(72,42,30,0.55) !important;
      border-color: rgba(255,255,255,0.10) !important;
    }
    html.dark .sidebar-card__title { color: #F0E6DC !important; }

    html.dark .pick-card {
      background: rgba(42,25,18,0.75) !important;
      border-color: rgba(255,255,255,0.08) !important;
    }
    html.dark .pick-card__title { color: #F0E6DC !important; }
    html.dark .pick-card__meta  { color: #A89080 !important; }

    html.dark .quick-link {
      background: rgba(42,25,18,0.6) !important;
      border-color: rgba(255,255,255,0.07) !important;
      color: #E8D5C4 !important;
    }
    html.dark .quick-link:hover {
      background: rgba(72,42,30,0.90) !important;
    }
    html.dark .quick-link__arrow { color: rgba(240,230,220,0.25) !important; }

    /* Settings card rows */
    html.dark .sidebar-card--settings {
      background: rgba(42,25,18,0.75) !important;
    }
    html.dark .sidebar-card--settings [style*="color:#3e2723"],
    html.dark .sidebar-card--settings [style*="color:#3E2723"] { color: #F0E6DC !important; }
    html.dark .sidebar-card--settings [style*="color:#8b7567"],
    html.dark .sidebar-card--settings [style*="color:#8B7567"] { color: #A89080 !important; }
    html.dark .sidebar-card--settings [style*="border-bottom"] { border-color: rgba(255,255,255,0.08) !important; }

    /* Avatar cursor hint */
    .profile-avatar { cursor: pointer; }
    .profile-avatar::after {
      content: '📷';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.42);
      border-radius: inherit;
      font-size: 26px;
      opacity: 0;
      transition: opacity 0.18s;
      pointer-events: none;
    }
    .profile-avatar:hover::after { opacity: 1; }

    [id] { scroll-margin-top: 80px; }
  

/* ═══════════════════════════════════════════════════
   PAGE: questions.html
═══════════════════════════════════════════════════ */

    /* ─── Hero ──────────────────────────────────────────────── */
    .questions-hero {
      position: relative;
      overflow: hidden;
      padding: 100px 0 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 520px;
    }
    .questions-hero__bg {
      position: absolute;
      inset: 0;
      background-image: url('https://www.figma.com/api/mcp/asset/1d2d9fbc-4269-4ba3-9e7e-cbc8ea59b16d');
      background-size: cover;
      background-position: center;
    }
    .questions-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(116.7deg, rgba(62,39,35,.92) 0%, rgba(45,27,23,.92) 55%, rgba(199,81,0,.88) 100%);
    }
    .questions-hero__content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* ─── Ask bar ────────────────────────────────────────────── */
    .ask-bar {
      display: flex;
      align-items: center;
      background: #fff;
      border: 1px solid rgba(199,81,0,.18);
      border-radius: 49px;
      box-shadow: 0 22px 32px rgba(199,81,0,.11);
      padding: 8px 8px 8px 20px;
      width: 100%;
      max-width: 720px;
      gap: 10px;
    }
    .ask-bar__input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: #3e2723;
    }
    .ask-bar__input::placeholder {
      color: rgba(62,39,35,.38);
    }
    .ask-bar__btn {
      flex-shrink: 0;
      background: #c75100;
      color: #fff;
      border: none;
      border-radius: 36px;
      padding: 13px 22px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 13.5px;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
    }
    .ask-bar__btn:hover { background: #a34200; }
    .ask-bar__icon { flex-shrink: 0; color: #8b7567; }

    /* ─── Suggestion pills ───────────────────────────────────── */
    .suggest-pill {
      display: inline-flex;
      align-items: center;
      padding: 8px 18px;
      border-radius: 50px;
      background: rgba(255,255,255,.28);
      border: 1px solid rgba(255,255,255,.24);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 12.5px;
      color: #fff;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
    }
    .suggest-pill:hover { background: rgba(255,255,255,.4); }

    /* ─── Q filter ───────────────────────────────────────────── */
    .q-filter {
      display: inline-flex;
      align-items: center;
      padding: 9px 20px;
      border-radius: 50px;
      border: 1.5px solid rgba(62,39,35,.14);
      background: #fff;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: #6d4c41;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
      white-space: nowrap;
    }
    .q-filter--active {
      background: #c75100;
      border-color: #c75100;
      color: #fff;
    }

    /* ─── Question accordion item ────────────────────────────── */
    .q-item {
      background: #fff;
      border: 1px solid rgba(199,81,0,.1);
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(62,39,35,.06);
      overflow: hidden;
      transition: box-shadow .2s;
    }
    .q-item:hover { box-shadow: 0 6px 28px rgba(62,39,35,.1); }
    .q-item__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      cursor: pointer;
      user-select: none;
    }
    .q-item__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 15px;
      color: #3e2723;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .q-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 10.5px;
      white-space: nowrap;
    }
    .q-badge--frequent {
      background: rgba(199,81,0,.08);
      color: #c75100;
    }
    .q-badge--ai {
      background: rgba(107,142,35,.1);
      color: #6b8e23;
    }
    .q-item__icon {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: rgba(199,81,0,.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c75100;
      font-size: 18px;
      font-weight: 300;
      flex-shrink: 0;
      transition: background .2s, transform .25s;
    }
    .q-item--open .q-item__icon {
      background: #c75100;
      color: #fff;
      transform: rotate(45deg);
    }
    .q-item__body {
      display: none;
      padding: 0 24px 22px;
      font-size: 14.5px;
      line-height: 1.7;
      color: #6d4c41;
      border-top: 1px solid rgba(199,81,0,.08);
    }
    .q-item--open .q-item__body { display: block; }

    /* ─── Prompt cards (dark bg section) ────────────────────── */
    .prompt-card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 22px;
      padding: 24px 26px;
      cursor: pointer;
      transition: background .2s;
    }
    .prompt-card:hover { background: rgba(255,255,255,.1); }
    .prompt-card__title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      margin-bottom: 4px;
    }
    .prompt-card__sub {
      font-size: 12px;
      color: rgba(255,255,255,.55);
      line-height: 1.5;
    }

    /* ─── Chat preview window ────────────────────────────────── */
    .chat-window {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 32px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .chat-window__header {
      border-bottom: 0.8px solid rgba(255,255,255,.08);
      padding: 22px 28px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .chat-window__avatar {
      width: 44px;
      height: 44px;
      border-radius: 22px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .chat-window__messages {
      flex: 1;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 300px;
    }
    .chat-msg-ai {
      display: flex;
      align-items: flex-end;
      gap: 12px;
    }
    .chat-msg-ai__avatar {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: linear-gradient(135deg, #c75100 0%, #c96c3b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .chat-bubble-ai {
      background: rgba(255,255,255,.09);
      border-radius: 4px 18px 18px 18px;
      padding: 13px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: rgba(255,255,255,.9);
      line-height: 1.6;
      max-width: 400px;
    }
    .chat-msg-user {
      display: flex;
      justify-content: flex-end;
    }
    .chat-bubble-user {
      background: linear-gradient(131deg, #c75100 0%, #c96c3b 100%);
      border-radius: 18px 18px 4px 18px;
      padding: 14px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #fff;
      line-height: 1.6;
      max-width: 360px;
    }
    .chat-msg-time {
      font-family: 'Inter', sans-serif;
      font-size: 9.5px;
      color: rgba(255,255,255,.3);
      margin-top: 4px;
    }
    .chat-window__footer {
      border-top: 0.8px solid rgba(255,255,255,.08);
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .chat-window__input {
      flex: 1;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      padding: 14px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: rgba(255,255,255,.35);
      outline: none;
    }
    .chat-window__mic-btn, .chat-window__send-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
    }
    .chat-window__mic-btn {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
    }
    .chat-window__send-btn {
      background: #c75100;
    }

    /* ─── No-judgment quote cards ────────────────────────────── */
    .nj-card {
      background: #fff;
      border-radius: 18px;
      padding: 28px 26px 22px;
      box-shadow: 0 2px 12px rgba(62,39,35,.07);
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: box-shadow .2s, transform .2s;
    }
    .nj-card:hover {
      box-shadow: 0 8px 24px rgba(62,39,35,.12);
      transform: translateY(-2px);
    }
    .nj-card__quote {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 15.5px;
      color: #3e2723;
      line-height: 1.4;
    }
    .nj-card__desc {
      font-size: 13.5px;
      color: #6d4c41;
      line-height: 1.65;
      flex: 1;
    }
    .nj-card__cta {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 11.5px;
      letter-spacing: .07em;
      text-transform: uppercase;
      text-decoration: none;
      margin-top: 6px;
    }
    .nj-card__cta--orange { color: #c75100; }
    .nj-card__cta--green  { color: #6b8e23; }
    /* real-person banner */
    .real-person-bar {
      background: #3e2723;
      border-radius: 20px;
      padding: 28px 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      margin-top: 32px;
    }
    @media (max-width: 640px) {
      .real-person-bar { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 900px) {
      .nj-grid { grid-template-columns: repeat(2,1fr) !important; }
    }
    @media (max-width: 640px) {
      .nj-grid {
        display              : grid !important;
        grid-auto-flow       : column !important;
        grid-auto-columns    : 82vw !important;
        grid-template-columns: none !important;
        overflow-x           : auto !important;
        scroll-snap-type     : x mandatory;
        scrollbar-width      : none;
        gap                  : 16px !important;
        padding-bottom       : 4px;
      }
      .nj-grid::-webkit-scrollbar { display: none; }
      .nj-grid > * { scroll-snap-align: start; }
    }

    @media (max-width: 1024px) {
      .chat-layout { flex-direction: column; }
      .chat-layout__prompts { display: none; }
    }
    @media (max-width: 768px) {
      .questions-hero { padding: 70px 0 60px; min-height: auto; }
      .ask-bar { max-width: 100%; padding: 6px 6px 6px 12px; gap: 6px; border: none; }
      .ask-bar__icon { width: 20px; height: 20px; }
      .ask-bar__input { font-size: 13.5px; }
      .ask-bar__btn { padding: 10px 16px; font-size: 13px; }
    }
    [id] { scroll-margin-top: 80px; }
  


/* designs.html — additional style block */

  #design-lb.is-open { opacity:1 !important; pointer-events:all !important; }
  #dlb-close:hover { background:rgba(255,255,255,.22) !important; }


/* ═══════════════════════════════════════════════════
   UNIFIED HERO HEADING — all main section pages
   (not homepage, not content display pages, not lesson)
═══════════════════════════════════════════════════ */
.page-hero-title {
  font-family   : var(--font-display);
  font-weight   : 800;
  font-size     : clamp(2rem, 4vw, 3rem);
  line-height   : 1.1;
  letter-spacing: -0.02em;
  margin        : 0 0 1rem;
}


/* ═══════════════════════════════════════════════════
   PROFILE PAGE — dark mode icon fixes
   (SVG strokes that are invisible on dark bg)
═══════════════════════════════════════════════════ */

/* learn-item icons: stroke="#3E2723" / stroke="#323232" */
html.dark .learn-item__icon svg path,
html.dark .learn-item__icon svg rect {
  stroke: rgba(240,230,220,0.75) !important;
}

/* pick-card (AI Picks) icons: stroke="#323232" */
html.dark .pick-card__img svg path,
html.dark .pick-card__img svg rect {
  stroke: rgba(240,230,220,0.75) !important;
}

/* quick-link icons: stroke="#323232" */
html.dark .quick-link__icon svg path,
html.dark .quick-link__icon svg rect {
  stroke: rgba(240,230,220,0.75) !important;
}

/* profile card h1 name (inline color:#3e2723) */
html.dark .profile-card h1 { color: #F0E6DC !important; }
html.dark .profile-card p  { color: #A89080 !important; }

.design-card__btns {
  opacity: 1;
  pointer-events: auto;
}
/* ─────────────────────────────────────────────────────────────
   PAGINATION  (vendor/pagination/latin.blade.php)
   ───────────────────────────────────────────────────────────── */
.pager {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 14px;
  margin-block   : 8px;
}

.pager__summary {
  margin     : 0;
  font-family: var(--font-sans);
  font-size  : 0.8125rem;
  color      : var(--clr-muted);
}
.pager__summary span { color: var(--clr-brand-dark); font-weight: 600; }

.pager__list {
  display    : flex;
  align-items: center;
  gap        : 6px;
  list-style : none;
  margin     : 0;
  padding    : 0;
  flex-wrap  : wrap;
  justify-content: center;
}

.pager__btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  min-width      : 40px;
  height         : 40px;
  padding        : 0 12px;
  border-radius  : var(--radius-full);
  border         : 1px solid rgba(62,39,35,.10);
  background     : #fff;
  font-family    : var(--font-display);
  font-size      : 0.875rem;
  font-weight    : 600;
  color          : var(--clr-brand-dark);
  text-decoration: none;
  transition     : background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.pager__btn:hover:not(.is-active):not(.is-disabled) {
  background  : var(--clr-surface-warm);
  border-color: rgba(199,81,0,.35);
  color       : var(--clr-primary);
  transform   : translateY(-1px);
}

.pager__btn.is-active {
  background  : var(--clr-primary);
  border-color: var(--clr-primary);
  color       : #fff;
  box-shadow  : 0 4px 12px rgba(199,81,0,.28);
}

.pager__btn.is-disabled { opacity: .4; cursor: default; }

.pager__gap {
  display    : inline-flex;
  align-items: flex-end;
  height     : 40px;
  padding    : 0 4px;
  color      : var(--clr-muted);
}

.pager__icon { width: 18px; height: 18px; }
/* Arrows point the other way in RTL. */
[dir="rtl"] .pager__icon { transform: scaleX(-1); }

@media (max-width: 480px) {
  .pager__btn  { min-width: 36px; height: 36px; padding: 0 10px; font-size: 0.8125rem; }
  .pager__gap  { height: 36px; }
}

/* ─── Article details hero: isolate from the podcast/episode style block ───
   The article page and the podcast/episode page reuse the same .hero-img-wrap
   and .hero-img-title class names. The episode block is defined later in this
   stylesheet, so it was overriding the article hero: the title rendered at
   ~28px / weight 800 with no mobile shrink, so long titles overflowed the
   (also-shrunk 280px) cover image and collided with the pills. These
   .article-hero-scoped rules restore the article hero's intended sizing and,
   being more specific, win regardless of source order. Scoped so the
   episode/video page keeps its own styling. */
.article-hero .hero-img-wrap { height: 500px; }
.article-hero .hero-img-title {
  position: absolute;
  bottom: 36px; left: 40px; right: 40px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  line-height: 1.25;
  margin: 0;
  text-align: left;
}
@media (max-width: 768px) {
  .article-hero .hero-img-wrap  { height: 360px; }
  .article-hero .hero-img-title { font-size: 1.35rem; bottom: 20px; left: 20px; right: 20px; }
}