:root {
    --page: #f4f7f4;
    --surface: #ffffff;
    --surface-soft: #f7f8f2;
    --surface-mint: #eaf5ef;
    --ink: #123b36;
    --muted: #667a74;
    --line: #dce8e2;
    --forest-950: #00352f;
    --forest-900: #00483f;
    --forest-800: #07574c;
    --forest-700: #0a715f;
    --forest-600: #17856e;
    --gold: #d7a440;
    --gold-bright: #f2c66d;
    --shadow: 0 13px 28px rgba(5, 62, 51, .10);
    --shadow-soft: 0 4px 14px rgba(5, 62, 51, .07);
    --radius: 10px;
  }

  body[data-theme="dark"] {
    --page: #10241f;
    --surface: #18342d;
    --surface-soft: #203f36;
    --surface-mint: #25483e;
    --ink: #f1f7f3;
    --muted: #b8cbc2;
    --line: rgba(225, 244, 234, .17);
    --forest-950: #eef9f2;
    --forest-900: #07584c;
    --forest-800: #0d6a59;
    --forest-700: #67c3a6;
    --forest-600: #91d8bf;
    --shadow: 0 15px 32px rgba(0, 0, 0, .28);
    --shadow-soft: 0 5px 16px rgba(0, 0, 0, .20);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    min-width: 320px;
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: Inter, Aptos, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    transition: background .2s ease, color .2s ease;
  }

  a { color: inherit; text-decoration: none; }
  button, input { font: inherit; }
  button { cursor: pointer; }
  button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(242, 198, 109, .86); outline-offset: 3px; }
  [hidden] { display: none !important; }

  .page-width { width: min(1216px, calc(100% - 48px)); margin-inline: auto; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; z-index: 150; top: -80px; left: 22px; padding: 10px 14px; border-radius: 7px; background: var(--gold-bright); color: var(--forest-950); font-weight: 800; }
  .skip-link:focus { top: 14px; }

  .site-header { position: sticky; z-index: 100; top: 0; background: rgba(0, 72, 63, .985); color: #fff; box-shadow: 0 2px 10px rgba(0, 39, 32, .14); }
  .nav-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; min-height: 54px; }
  .brand { display: inline-flex; align-items: center; gap: 8px; width: max-content; letter-spacing: .04em; }
  .brand-symbol { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(242, 198, 109, .74); border-radius: 8px; color: var(--gold-bright); font: 1.25rem/1 Georgia, serif; }
  .brand-copy { display: inline-flex; gap: 3px; align-items: baseline; color: #fff; font-size: .8rem; font-weight: 820; letter-spacing: .06em; }
  .brand-copy strong { color: var(--gold-bright); }
  .primary-nav { display: flex; align-items: center; justify-content: center; gap: 17px; }
  .primary-nav a { position: relative; padding: 18px 0 16px; color: rgba(255, 255, 255, .84); font-size: .75rem; font-weight: 750; white-space: nowrap; }
  .primary-nav a::after { position: absolute; right: 0; bottom: 9px; left: 0; height: 2px; border-radius: 3px; background: var(--gold-bright); content: ""; transform: scaleX(0); transition: transform .16s ease; }
  .primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a.is-active { color: #fff; }
  .primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav a.is-active::after { transform: scaleX(1); }
  .header-actions { display: flex; justify-self: end; align-items: center; gap: 7px; }
  .header-action, .theme-toggle, .language-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .9); font-size: .75rem; font-weight: 760; }
  .header-action { gap: 4px; padding: 0 4px; }
  .header-action span:first-child { color: var(--gold-bright); font-size: 1.05rem; line-height: 1; }
  .header-action:hover, .theme-toggle:hover, .language-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
  .theme-toggle { width: 32px; padding: 0; }
  .theme-icon { color: var(--gold-bright); font: 1.06rem/1 Georgia, serif; }
  .language-switcher { position: relative; }
  .language-toggle { gap: 4px; padding: 0 6px; }
  .language-globe { color: var(--gold-bright); font-size: .95rem; }
  .language-options { position: absolute; z-index: 140; top: calc(100% + 7px); right: 0; min-width: 138px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
  .language-options button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: .78rem; font-weight: 720; text-align: left; }
  .language-options button:hover { background: var(--surface-mint); }
  .menu-toggle { display: none; width: 34px; height: 32px; place-content: center; gap: 5px; padding: 0; border: 1px solid rgba(255, 255, 255, .34); border-radius: 7px; background: transparent; color: #fff; }
  .menu-toggle i { display: block; width: 15px; height: 1.5px; background: currentColor; }

  .hero { position: relative; z-index: 3; background: #063e36 url("assets/mosque-distant-hero.jpg") center / cover no-repeat; color: #fff; isolation: isolate; }
  .hero::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(0, 35, 32, .86), rgba(0, 35, 32, .58) 30%, rgba(0, 35, 32, .06) 48%, rgba(0, 35, 32, .06) 65%, rgba(0, 35, 32, .35)); content: ""; }
  .hero-glow { position: absolute; z-index: -1; top: -110px; left: 20%; width: 240px; height: 240px; border-radius: 50%; background: rgba(215, 164, 64, .13); filter: blur(30px); }
  .hero-content { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) 276px; gap: 24px; align-items: center; min-height: clamp(252px, 30.24vw, 390.6px); padding: 20px 0; }
  .hero-copy-block { grid-column: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
  .hero-prayer { grid-column: 3; }
  .hero-copy-block { min-width: 0; max-width: 650px; }
  .eyebrow { margin: 0 0 6px; color: var(--gold-bright); font-size: .75rem; font-weight: 850; letter-spacing: .105em; text-transform: uppercase; }
  .eyebrow-dark { color: var(--forest-700); }
  .hero h1 { max-width: 500px; margin: 0; font-size: clamp(1.8rem, 3.25vw, 2.7rem); font-weight: 790; letter-spacing: -.048em; line-height: 1.08; }
  .hero h1 em { color: var(--gold-bright); font-style: normal; }
  .hero-copy { max-width: 520px; margin: 9px 0 0; color: rgba(255, 255, 255, .86); font-size: .88rem; line-height: 1.55; }
  .hero-search { max-width: 655px; margin-top: 20px; }
  .search-form { display: flex; min-height: 42px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .5); border-radius: 9px; background: rgba(255, 255, 255, .98); box-shadow: 0 8px 16px rgba(0, 37, 31, .15); }
  .search-form:focus-within { box-shadow: 0 0 0 3px rgba(242, 198, 109, .58), 0 8px 16px rgba(0, 37, 31, .15); }
  .search-form svg { width: 17px; flex: 0 0 auto; margin: 0 10px 0 13px; fill: none; stroke: var(--forest-700); stroke-width: 2; }
  .search-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #123b36; font-size: .84rem; }
  .search-form input::placeholder { color: #7a8d86; }
  .search-form button { min-width: 84px; border: 0; background: var(--forest-800); color: #fff; font-size: .77rem; font-weight: 800; }
  .search-form button:hover { background: var(--forest-700); }
  .search-status { min-height: 0; margin: 4px 0 0; color: rgba(255, 255, 255, .86); font-size: .75rem; font-weight: 650; }

  .hero-prayer { min-width: 0; }
  .prayer-card { position: relative; padding: 13px 15px 12px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 11px; background: rgba(255, 255, 255, .96); color: #133d37; box-shadow: 0 13px 28px rgba(0, 37, 31, .22); }
  .prayer-topline { display: flex; align-items: center; justify-content: space-between; color: var(--forest-700); }
  .prayer-topline p { margin: 0; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
  .prayer-topline > span { color: var(--gold); font: 1.18rem/.8 Georgia, serif; }
  .prayer-card h2 { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 5px; font-size: 1rem; font-weight: 820; letter-spacing: -.025em; line-height: 1.1; }
  .prayer-card h2 small { color: #5a746c; font-size: .75rem; font-weight: 650; letter-spacing: 0; }
  .city-select { position: relative; margin-bottom: 5px; }
  .city-select > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px 0; border: 0; border-bottom: 1px solid #dce8e2; background: transparent; color: #25554d; font-size: .75rem; font-weight: 760; text-align: left; }
  .city-select > button span:last-child { color: var(--gold); }
  .city-options { position: absolute; z-index: 130; top: calc(100% + 5px); left: 0; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); width: min(395px, calc(100vw - 30px)); height: min(440px, 58vh); padding: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .city-options-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
  .city-options-header > p { margin: 2px 3px 7px; color: var(--muted); font-size: .75rem; line-height: 1.35; }
  .city-close { display: inline-flex !important; width: auto !important; flex: 0 0 auto; align-items: center; gap: 4px; padding: 5px 7px !important; border: 1px solid var(--line) !important; border-radius: 6px !important; background: var(--surface-soft) !important; color: var(--forest-800) !important; font-size: .75rem !important; font-weight: 820; white-space: nowrap; }
  .city-close > span:first-child { font-size: 1rem; line-height: .8; }
  .city-search-label { margin: 2px 3px 4px; color: var(--forest-800); font-size: .75rem; font-weight: 800; }
  .city-search { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--surface-soft); color: var(--ink); font-size: .82rem; }
  .city-search:focus { border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(10, 113, 95, .13); }
  .city-list-status { min-height: 18px; margin: 7px 3px 4px !important; color: var(--muted); font-size: .75rem; line-height: 1.3; }
  .city-location-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .city-region-heading { margin: 10px 7px 3px; color: var(--forest-700); font-size: .75rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
  .city-region-heading:first-child { margin-top: 4px; }
  .city-options button { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: .78rem; line-height: 1.3; text-align: left; }
  .city-options button:hover { background: var(--surface-mint); }
  .prayer-card dl { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 1px solid #dce8e2; }
  .prayer-card dl div { display: flex; align-items: center; justify-content: space-between; min-height: 20px; padding: 2px 0; border-bottom: 1px solid #e7efeb; }
  .prayer-card dt, .prayer-card dd { margin: 0; }
  .prayer-card dt { color: #42665e; font-size: .75rem; }
  .prayer-card dd { color: #143f38; font-size: .8rem; font-weight: 850; }
  .prayer-card .is-next { margin-inline: -5px; padding-inline: 5px; border-radius: 4px; background: #edf6ef; }
  .prayer-card .is-next dt { color: var(--forest-800); }
  .prayer-card dt span { display: inline; margin-left: 3px; color: #b67d22; font-size: .75rem; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
  .prayer-status { max-height: 1.7em; margin: 5px 0 0; overflow: hidden; color: #6f837d; font-size: .75rem; line-height: 1.35; }
  .prayer-retry { min-height: 30px; margin-top: 6px; padding: 0 9px; border: 1px solid rgba(190, 132, 36, .62); border-radius: 6px; background: transparent; color: #9f6a1d; font-size: .75rem; font-weight: 820; }
  .prayer-retry:hover { background: #fff2d8; }
  body[data-theme="dark"] .prayer-card { border-color: rgba(220, 242, 231, .18); background: #1c3a32; color: var(--ink); }
  body[data-theme="dark"] .prayer-card h2, body[data-theme="dark"] .prayer-card dd { color: var(--ink); }
  body[data-theme="dark"] .prayer-card h2 small, body[data-theme="dark"] .prayer-card dt, body[data-theme="dark"] .prayer-status { color: var(--muted); }
  body[data-theme="dark"] .city-select > button { border-color: rgba(227, 245, 235, .16); color: var(--ink); }
  body[data-theme="dark"] .prayer-card dl { border-color: rgba(227, 245, 235, .16); }
  body[data-theme="dark"] .prayer-card dl div { border-color: rgba(227, 245, 235, .12); }
  body[data-theme="dark"] .prayer-card .is-next { background: rgba(103, 195, 166, .16); }

  .quick-links { position: relative; z-index: 2; margin-top: 10px; }
  .quick-links-inner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
  .quick-link { display: grid; min-height: 90px; justify-items: center; align-content: center; gap: 4px; padding: 10px 6px; border-left: 1px solid var(--line); color: var(--ink); text-align: center; transition: background .16s ease, transform .16s ease; }
  .quick-link:first-child { border-left: 0; }
  .quick-link:hover { background: var(--surface-mint); transform: translateY(-2px); }
  .quick-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: var(--surface-mint); color: var(--forest-800); font-size: .93rem; }
  .quick-link strong { font-size: .75rem; font-weight: 820; line-height: 1.15; }
  .quick-link span:last-child { max-width: 110px; color: var(--muted); font-size: .75rem; line-height: 1.25; }

  .home-dashboard { display: grid; grid-template-columns: minmax(250px, .74fr) minmax(0, 1.26fr); gap: 14px; margin-top: 14px; }
  .daily-verse, .recent-materials { min-height: 176px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
  .daily-verse { position: relative; padding: 18px; overflow: hidden; background: linear-gradient(135deg, #fffdf3, #f7f4e9); }
  .daily-verse::after { position: absolute; right: -25px; bottom: -35px; width: 130px; height: 130px; border: 1px solid rgba(215, 164, 64, .24); border-radius: 50%; content: ""; }
  .daily-verse-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
  .daily-verse-heading > span { color: var(--gold); font-size: 1.15rem; }
  .daily-verse-arabic { position: relative; z-index: 1; margin: 8px 0 0; color: var(--forest-900); font-family: "Noto Naskh Arabic", "Times New Roman", serif; font-size: 1.22rem; line-height: 1.5; }
  .daily-verse-copy { position: relative; z-index: 1; max-width: 275px; margin: 5px 0 0; color: #345b53; font-size: .81rem; line-height: 1.42; }
  .daily-verse-source { position: relative; z-index: 1; margin: 3px 0 0; color: #71877f; font-size: .75rem; }
  .tiny-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 10px; margin-top: 9px; border-radius: 7px; background: var(--forest-800); color: #fff; font-size: .75rem; font-weight: 800; }
  .tiny-button:hover { background: var(--forest-700); }
  .recent-materials { padding: 15px 17px; }
  .compact-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
  .compact-heading .eyebrow { margin-bottom: 3px; }
  .compact-heading h2, .section-heading h2 { margin: 0; font-size: 1rem; font-weight: 820; letter-spacing: -.025em; line-height: 1.2; }
  .text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--forest-800); font-size: .75rem; font-weight: 830; white-space: nowrap; }
  .text-link span:last-child { color: var(--gold); font-size: .95rem; }
  .text-link:hover { color: var(--forest-600); text-decoration: underline; }
  .recent-material-list { display: grid; gap: 5px; margin-top: 9px; }
  .recent-loading { margin: 13px 0; color: var(--muted); font-size: .78rem; }
  .recent-material { display: grid; grid-template-columns: 47px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; min-height: 35px; padding: 4px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
  .recent-material:hover .recent-material-title { color: var(--forest-700); text-decoration: underline; }
  .recent-material-thumb { width: 47px; height: 31px; border-radius: 5px; background: #0b4f43 url("assets/quran-hero.png") center / cover no-repeat; }
  .recent-material:nth-child(2) .recent-material-thumb { background-image: url("assets/nur-zhol-hero.png"); }
  .recent-material:nth-child(3) .recent-material-thumb { background-position: 70% center; filter: saturate(.78); }
  .recent-material-copy { min-width: 0; }
  .recent-material-category { display: block; overflow: hidden; color: var(--forest-700); font-size: .75rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
  .recent-material-title { display: block; overflow: hidden; color: var(--ink); font-size: .78rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
  .recent-material-date { color: var(--muted); font-size: .75rem; white-space: nowrap; }
  body[data-theme="dark"] .daily-verse { background: linear-gradient(135deg, #244139, #203a33); }
  body[data-theme="dark"] .daily-verse-arabic { color: #c7eedc; }
  body[data-theme="dark"] .daily-verse-copy { color: var(--muted); }

  .knowledge-banner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 102px; gap: 22px; padding: 20px 24px; margin-top: 14px; overflow: hidden; border-radius: var(--radius); background: #06483f url("assets/quran-hero.png") center 44% / cover no-repeat; color: #fff; box-shadow: var(--shadow-soft); }
  .knowledge-banner::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 63, 54, .96), rgba(0, 72, 63, .76), rgba(0, 72, 63, .44)); content: ""; }
  .knowledge-copy, .knowledge-action { position: relative; z-index: 1; }
  .knowledge-copy .eyebrow { margin-bottom: 2px; }
  .knowledge-copy h2 { margin: 0; font-size: 1.23rem; font-weight: 820; letter-spacing: -.025em; }
  .knowledge-copy p:last-child { margin: 3px 0 0; color: rgba(255, 255, 255, .76); font-size: .78rem; }
  .knowledge-action { display: inline-flex; align-items: center; gap: 12px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .54); border-radius: 7px; background: rgba(0, 40, 34, .17); font-size: .77rem; font-weight: 800; white-space: nowrap; }
  .knowledge-action > span:last-child { color: var(--gold-bright); font-size: 1rem; }
  .knowledge-action:hover { background: rgba(255, 255, 255, .14); }

  .home-topic-preview { padding: 25px 0 0; }
  .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 11px; }
  .section-heading .eyebrow { margin-bottom: 3px; }
  .section-heading h2 { font-size: 1.17rem; }
  .preview-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .preview-card { display: grid; gap: 5px; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-soft); transition: transform .16s ease, border-color .16s ease; }
  .preview-card:hover { border-color: rgba(10, 113, 95, .52); transform: translateY(-2px); }
  .preview-image { display: block; height: 64px; border-radius: 5px; background: #093f37 url("assets/quran-hero.png") center / cover no-repeat; }
  .preview-card--prayer .preview-image { background-image: url("assets/nur-zhol-hero.png"); background-position: center 56%; }
  .preview-card--dua .preview-image { width: 100%; object-fit: cover; object-position: center 58%; background: #093f37; }
  .preview-card--library .preview-image { background-image: url("assets/quran-hero.png"); filter: sepia(.15) saturate(.82); }
  .preview-card strong { overflow: hidden; color: var(--ink); font-size: .79rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .preview-card small { min-height: 2.45em; overflow: hidden; color: var(--muted); font-size: .75rem; line-height: 1.22; }

  .home-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 17px; }
  .home-actions > a { display: flex; align-items: center; gap: 9px; min-height: 62px; padding: 10px 13px; border-radius: 8px; background: var(--forest-800); color: #fff; box-shadow: var(--shadow-soft); }
  .home-actions > a:nth-child(2) { background: #d99e35; color: #173d36; }
  .home-actions > a:nth-child(3) { background: var(--forest-900); }
  .home-actions > a:hover { filter: brightness(1.07); transform: translateY(-1px); }
  .action-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); color: var(--gold-bright); font-weight: 900; }
  .home-actions > a:nth-child(2) .action-icon { background: rgba(255, 255, 255, .27); color: #17473e; }
  .home-actions span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
  .home-actions strong { font-size: .78rem; line-height: 1.2; }
  .home-actions small { overflow: hidden; color: rgba(255, 255, 255, .75); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
  .home-actions > a:nth-child(2) small { color: rgba(23, 61, 54, .72); }
  .home-actions b { margin-left: auto; color: var(--gold-bright); font-size: 1rem; }
  .home-actions > a:nth-child(2) b { color: #17473e; }

  .content-zone { padding: 27px 0 0; scroll-margin-top: 65px; }
  .reading-list { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
  .reading-list .section-heading { margin-bottom: 13px; }
  .reset-filter { padding: 0; border: 0; background: transparent; color: var(--forest-700); font-size: .76rem; font-weight: 800; }
  .reset-filter:hover { color: var(--forest-950); text-decoration: underline; }
  .topic-directory-copy { margin: 0 0 13px; color: var(--muted); font-size: .82rem; }
  .topic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .topic-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 72px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
  .topic-card:hover { border-color: rgba(10, 113, 95, .55); background: var(--surface-mint); transform: translateY(-1px); }
  .topic-card--foundation { border-color: rgba(215, 164, 64, .48); }
  .topic-folder { position: relative; display: block; width: 26px; height: 18px; border: 1.5px solid var(--forest-700); border-radius: 3px; color: var(--forest-700); }
  .topic-folder::before { position: absolute; top: -5px; left: 2px; width: 10px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; content: ""; }
  .topic-card--foundation .topic-folder { color: #c18426; }
  .topic-card-copy { min-width: 0; }
  .section-filter { display:block; width:100%; margin:16px 0; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; }
  .material-media { padding:20px; border-bottom:1px solid var(--line); background:var(--surface); }
  .material-media h2 { font-size:1.1rem; }
  .media-note { color:var(--muted); font-size:.875rem; }
  .media-item { margin:18px 0; }
  .media-item img { display:block; max-width:100%; width:auto; height:auto; margin:auto; border-radius:4px; }
  .material-media--book .media-item img { max-height:420px; object-fit:contain; }
  .book-cover { display:block; width:100%; height:240px; margin:0 auto 16px; object-fit:contain; }
  .media-item audio { display:block; width:100%; }
  .video-player { display:block; width:100%; aspect-ratio:16 / 9; border:0; border-radius:8px; margin-bottom:12px; background:#000; }
  .media-item strong { display:block; margin-bottom:8px; overflow-wrap:anywhere; }
  .document-link,.page-reading-nav button { display:inline-block; padding:9px 13px; margin:6px 0; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--forest-700); font:inherit; cursor:pointer; }
  .page-reading-nav { display:flex; justify-content:space-between; gap:12px; }
  .media-item .document-link + .document-link { margin-inline-start:8px; }
  .topic-card-title { display: -webkit-box; overflow: hidden; color: var(--forest-700); font-size: .875rem; font-weight: 850; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .topic-card-meta { display: inline-flex; align-items: center; gap: 4px; }
  .topic-card-count { color: var(--muted); font-size: .75rem; font-weight: 720; white-space: nowrap; }
  .topic-card-arrow { color: var(--gold); font-size: .92rem; }
  .load-more-topics, .load-more-materials { display: block; width: min(100%, 250px); min-height: 38px; padding: 0 13px; margin: 14px auto 0; border: 1px solid var(--forest-700); border-radius: 7px; background: transparent; color: var(--forest-800); font-size: .76rem; font-weight: 820; }
  .load-more-topics:hover, .load-more-materials:hover { background: var(--forest-800); color: #fff; }
  .topic-results { padding-top: 2px; }
  .topic-results-heading { padding-bottom: 15px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
  .back-to-topics { padding: 0; margin-bottom: 10px; border: 0; background: transparent; color: var(--forest-700); font-size: .78rem; font-weight: 850; }
  .back-to-topics:hover { color: var(--forest-950); text-decoration: underline; }
  .topic-results-heading .eyebrow { margin-bottom: 4px; }
  .topic-results-heading h3 { margin: 0; font-size: 1.5rem; font-weight: 820; letter-spacing: -.04em; line-height: 1.12; }
  .topic-results-heading > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }
  .material-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .material-card { position: relative; min-height: 184px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
  .material-card::before { position: absolute; top: 0; right: 14px; left: 14px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--gold), transparent); content: ""; }
  .material-category { margin: 0 0 8px; color: var(--forest-700); font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
  .material-card h3 { margin: 0; font-size: .96rem; font-weight: 820; letter-spacing: -.02em; line-height: 1.25; }
  .material-excerpt { margin: 7px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
  .material-card { display: flex; flex-direction: column; }
  .material-read { align-self: flex-start; min-height: 31px; padding: 0; margin-top: auto; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--forest-800); font-size: .75rem; font-weight: 850; }
  .material-read:hover { color: var(--forest-950); text-decoration: underline; }
  .material-text { margin-top: 11px; border-top: 1px solid var(--line); }
  .material-text summary { padding-top: 9px; color: var(--forest-800); cursor: pointer; font-size: .75rem; font-weight: 830; list-style: none; }
  .material-text summary::-webkit-details-marker { display: none; }
  .material-text summary::after { margin-left: 6px; color: var(--gold); content: "↓"; }
  .material-text[open] summary::after { content: "↑"; }
  .material-body { padding-top: 7px; color: var(--ink); font-size: .79rem; line-height: 1.55; }
  .material-body p { margin: 0 0 9px; }
  .article-reader { width: min(850px, 100%); margin: 0 auto; }
  .article-reader-heading { padding: 2px 0 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
  .article-reader-heading .back-to-topics { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; margin: 0 0 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-soft); }
  .article-reader-heading .back-to-topics:hover { background: var(--surface-mint); text-decoration: none; }
  .article-reader-heading h1 { max-width: 780px; margin: 4px 0 7px; color: var(--forest-950); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.85rem, 3.2vw, 2.85rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.12; }
  .article-reader-meta { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 700; }
  .article-reader-body { padding: 25px clamp(18px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.82; }
  .article-reader-body p { margin: 0 0 1.2em; }.article-reader-body p:last-child { margin-bottom: 0; }
  .questions-content { max-width: 850px; margin-inline: auto; overflow-wrap: anywhere; }
  .questions-content h2 { margin: 1.5em 0 .7em; font-size: 1.15rem; line-height: 1.4; }
  .questions-content h2:first-child { margin-top: 0; }
  .questions-content ol { padding-inline-start: 1.5em; }
  .questions-content li { margin-bottom: 1em; padding-inline-start: .25em; }
  .questions-content li::marker { font-weight: 700; }
  .questions-content a { color: var(--forest-700); text-decoration: underline; }
  .links-content { max-width: 850px; margin-inline: auto; overflow-wrap: anywhere; }
  .term-content { max-width: 850px; margin-inline: auto; overflow-wrap: anywhere; }
  .links-content ul { padding-inline-start: 1.25em; margin-bottom: 0; }
  .links-content li { margin-bottom: 1em; }
  .links-content li:last-child { margin-bottom: 0; }
  .links-content a { color: var(--forest-700); text-decoration: underline; }

  body.is-topic-view main > :not(.content-zone), body.is-topic-view .site-footer { display: none; }
  body.is-topic-view .content-zone { min-height: calc(100dvh - 54px); padding: 28px 0 64px; background: var(--page); }
  body.is-topic-view .reading-list { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.is-topic-view .reading-list > .section-heading, body.is-topic-view #topic-directory, body.is-topic-view #empty-state { display: none !important; }
  body.is-topic-view .topic-results { padding: 0; }
  body.is-topic-view .topic-results-heading { position: sticky; z-index: 20; top: 54px; display: grid; gap: 5px; padding: 14px 0 16px; margin: 0 0 19px; border-bottom: 1px solid var(--line); background: var(--page); }
  body.is-topic-view .back-to-topics { display: inline-flex; align-items: center; width: max-content; min-height: 38px; padding: 0 12px; margin: 0 0 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-soft); }
  body.is-topic-view .back-to-topics:hover { background: var(--surface-mint); text-decoration: none; }
  body.is-topic-view .topic-results-heading h3 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
  body.is-topic-view .topic-results-heading > p:last-child { font-size: .86rem; }
  body.is-topic-view .material-list { gap: 13px; }
  body.is-topic-view .material-card { min-height: 220px; padding: 18px; border-radius: 10px; }
  body.is-topic-view .material-list--compact { gap: 10px; align-items: start; }
  body.is-topic-view .material-list--folders { grid-template-columns: 1fr; gap: 6px; }
  .material-list--folders .topic-card { min-height: 0; padding: 12px 14px; }
  body.is-topic-view .material-list--compact .material-card { min-height: 0; padding: 13px 14px; border-radius: 9px; }
  .material-list--compact .material-category { margin-bottom: 5px; font-size: .68rem; }
  .material-list--compact .material-card h3 { font-size: .9rem; line-height: 1.3; }
  .material-list--compact .material-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 5px; font-size: .75rem; }
  .material-list--compact .material-read { margin-top: 10px; min-height: 36px; }
  body.is-topic-view .load-more-materials { margin-top: 20px; }
  body.is-article-view .article-reader { padding-top: 4px; }
  .empty-state { padding: 32px 18px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--muted); text-align: center; }
  .empty-state > span { color: var(--gold); font-size: 1.6rem; }
  .empty-state p { margin: 6px 0 11px; }

  .answers-preview { padding: 27px 0 0; scroll-margin-top: 65px; }
  .answers-copy { max-width: 330px; margin: 0; color: var(--muted); font-size: .8rem; text-align: right; }
  .answers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .answer-card { position: relative; display: grid; min-height: 108px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-soft); transition: transform .16s ease, border-color .16s ease; }
  .answer-card:hover { border-color: rgba(10, 113, 95, .54); transform: translateY(-2px); }
  .answer-card > span { color: var(--gold); font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
  .answer-card strong { max-width: 250px; margin-top: 7px; font-size: .87rem; font-weight: 820; line-height: 1.25; }
  .answer-card small { margin-top: 4px; color: var(--muted); font-size: .75rem; line-height: 1.35; }
  .answer-card b { position: absolute; right: 13px; bottom: 10px; color: var(--forest-700); }

  .site-footer { position: relative; margin-top: 27px; padding: 30px 0; overflow: hidden; background: #003c34; color: rgba(255, 255, 255, .74); }
  .site-footer::after { position: absolute; right: 5%; bottom: -55px; width: 280px; height: 150px; border: 1px solid rgba(242, 198, 109, .12); border-radius: 50% 50% 0 0; content: ""; }
  .footer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(120px, .55fr) minmax(120px, .55fr); gap: 34px; align-items: start; }
  .footer-brand { display: grid; gap: 11px; }
  .brand-footer { color: #fff; }
  .site-footer p { max-width: 430px; margin: 0; font-size: .78rem; line-height: 1.5; }
  .site-footer nav { display: grid; align-content: start; gap: 6px; }
  .site-footer nav strong { color: var(--gold-bright); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
  .site-footer nav a { color: rgba(255, 255, 255, .81); font-size: .77rem; font-weight: 650; }
  .site-footer nav a:hover { color: var(--gold-bright); }

  @media (max-width: 1100px) {
    .primary-nav { gap: 12px; }
    .hero-content { grid-template-columns: minmax(0, 1fr) minmax(0, .65fr) 258px; gap: 18px; }
    .topic-list, .material-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 1080px) {
    .nav-wrap { grid-template-columns: 1fr auto; min-height: 52px; }
    .primary-nav { position: absolute; top: calc(100% + 7px); right: 16px; display: none; min-width: min(280px, calc(100vw - 32px)); padding: 6px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; background: var(--forest-900); box-shadow: var(--shadow); }
    .primary-nav.is-open { display: grid; }
    .primary-nav a { padding: 10px 11px; border-radius: 6px; font-size: .86rem; }
    .primary-nav a::after { display: none; }
    .primary-nav a:hover { background: rgba(255, 255, 255, .12); }
    .menu-toggle { display: grid; }
    .quick-links-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .quick-link:nth-child(5) { border-left: 0; }
    .quick-link:nth-child(n + 5) { border-top: 1px solid var(--line); }
    .preview-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .preview-card:nth-child(4) { grid-column: 1 / span 1; }
    .preview-card:nth-child(5) { grid-column: 2 / span 1; }
  }

  @media (max-width: 700px) {
    .page-width { width: min(100% - 28px, 560px); }
    .header-search { display: none; }
    .hero { background-size: auto 328px; background-position: center 160px; }
    .hero::before { background: linear-gradient(180deg, rgba(0, 35, 32, .85), rgba(0, 35, 32, .3) 280px, rgba(0, 35, 32, .08) 480px, #063e36 720px); }
    .hero-content { grid-template-columns: 1fr; gap: 164px; min-height: 0; padding: 24px 0 15px; }
    .hero-copy-block, .hero-prayer { grid-column: 1; }
    .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .hero-copy { font-size: .83rem; }
    .hero-search { margin-top: 14px; }
    .hero-prayer { margin-top: 0; }
    .prayer-card { padding: 14px; }
    .prayer-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #dce8e2; }
    .prayer-card dl div { padding: 5px 7px 5px 0; }
    .prayer-card dl div:nth-child(2n) { padding-right: 0; padding-left: 7px; border-left: 1px solid #e7efeb; }
    .quick-links { margin-top: 9px; }
    .quick-links-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-link { min-height: 84px; border-top: 1px solid var(--line); }
    .quick-link:nth-child(odd) { border-left: 0; }
    .quick-link:nth-child(even) { border-left: 1px solid var(--line); }
    .quick-link:nth-child(-n + 2) { border-top: 0; }
    .home-dashboard { grid-template-columns: 1fr; }
    .daily-verse, .recent-materials { min-height: 0; }
    .knowledge-banner { align-items: start; flex-direction: column; gap: 10px; }
    .knowledge-action { min-height: 31px; }
    .preview-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preview-card:nth-child(4), .preview-card:nth-child(5) { grid-column: auto; }
    .home-actions, .answers-grid { grid-template-columns: 1fr; }
    .topic-list, .material-list { grid-template-columns: 1fr; }
    body.is-topic-view .content-zone { min-height: calc(100dvh - 52px); padding: 0 0 38px; }
    body.is-topic-view .topic-results-heading { top: 52px; padding: 13px 0 14px; margin-bottom: 14px; }
    body.is-topic-view .back-to-topics { min-height: 42px; padding-inline: 13px; }
    body.is-topic-view .material-card { min-height: 0; padding: 16px; }
    .article-reader-heading { margin-bottom: 16px; }
    .article-reader-heading h1 { font-size: clamp(1.7rem, 8vw, 2.25rem); }
    .article-reader-body { padding: 20px 17px; font-size: 1rem; line-height: 1.75; }
    .answers-copy { text-align: left; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
    .footer-brand { grid-column: 1 / -1; }
  }

  .translation-error { display: block; font-size: .85rem; font-weight: 400; line-height: 1.5; }
  .translation-retry { margin-top: 8px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }
  .translation-retry:hover { opacity: .7; }
  [aria-busy="true"] { opacity: .65; }

  @media (max-width: 520px) {
    .nav-wrap { width: min(100% - 24px, 540px); gap: 6px; }
    .brand-symbol { width: 28px; height: 28px; }
    .brand-copy { font-size: .76rem; }
    .header-actions { gap: 2px; }
    .language-toggle { padding: 0 4px; }
    .language-label { display: none; }
    .hero-content { padding-top: 23px; }
    .hero h1 { font-size: clamp(1.72rem, 9vw, 2.2rem); }
    .hero-copy { max-width: 330px; }
    .search-form { min-height: 40px; }
    .search-form button { min-width: 73px; }
    .prayer-card dl { grid-template-columns: 1fr; }
    .prayer-card dl div, .prayer-card dl div:nth-child(2n) { padding: 5px 0; border-left: 0; }
    .city-options { position: fixed; z-index: 140; top: auto; right: 14px; bottom: 14px; left: 14px; width: auto; height: min(72vh, 560px); }
    .quick-link { min-height: 76px; padding: 8px 4px; }
    .quick-icon { width: 25px; height: 25px; font-size: .82rem; }
    .quick-link span:last-child { display: none; }
    .daily-verse, .recent-materials { padding: 14px; }
    .daily-verse-arabic { font-size: 1.08rem; }
    .recent-material-date { display: none; }
    .preview-image { height: 56px; }
    .section-heading { align-items: start; }
    .section-heading h2 { font-size: 1.08rem; }
    .reading-list { padding: 15px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
  }