/* Self-hosted faces — same files the main site serves from /assets/fonts. */@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/marcellus-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/amiri-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/amiri-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/amiri-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Scheherazade New"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/scheherazade-new.woff") format("woff"); }

  :root {
    --bg: #FAF8F2; --surface: #FFFFFF; --ink: #2C2C2C; --ink-soft: #5A5A50; --ink-faint: #8A8A7A;
    --green: #1A3A2A; --green-soft: #2D6A4F; --green-deep: #0C2C1D; --green-wash: #EEF7F1;
    --green-line: #B7DFC8; --gold: #C9A84C; --gold-soft: #E8CE8C; --band-a: #EEF7F1;
    --band-b: #F8F2E1; --rule: #E8E0D0; --radius: 18px;
    --display: "Marcellus", Georgia, serif; --display-ar: "Amiri", "SF Arabic", "Noto Naskh Arabic", serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #14171A; --surface: #1C2024; --ink: #E8E6E1; --ink-soft: #B3B0A8; --ink-faint: #8A8880;
      --green: #9FD9B8; --green-soft: #7FC79F; --green-deep: #0C2C1D; --green-wash: #16241C;
      --green-line: #2C4A38; --gold: #D9BC68; --gold-soft: #E8CE8C; --band-a: #16241C;
      --band-b: #1E2620; --rule: #2A2F34;
    }
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--ink); line-height: 1.7; font-size: 16px; padding-bottom: 4rem; }
  [lang="ar"] { font-family: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Amiri", serif; line-height: 1.95; }
  ::selection { background: var(--gold); color: #0A2417; }
  .wrap { max-width: 62rem; margin: 0 auto; padding-inline: 1.25rem; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; flex-wrap: wrap; }
  .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
  .brand img { width: 28px; height: 28px; border-radius: 26%; display: block; }
  .brand-name { font-family: var(--display); font-size: 1.2rem; color: var(--green); letter-spacing: .04em; }
  .topbar-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .top-nav-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 500;
    color: var(--green-soft); text-decoration: none; background: var(--green-wash); border: 1px solid var(--green-line);
    border-radius: 999px; padding: .3rem .85rem; transition: all .15s ease; }
  .top-nav-btn:hover { border-color: var(--gold); }
  .top-nav-btn.active { background: var(--green); color: #F2EEDF; border-color: var(--green); }
  .hero { position: relative; overflow: hidden; text-align: center; color: #F2EEDF;
    background: radial-gradient(130% 110% at 50% -8%, #1E5A3C 0%, #123B27 44%, #0A2517 80%, #081F13 100%);
    padding: clamp(4.5rem, 9vw, 6.5rem) 1.25rem clamp(3rem, 6vw, 4rem); border-radius: 0 0 28px 28px; }
  .hero-star { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(130vw, 920px); height: auto; color: var(--gold); opacity: .07; pointer-events: none; }
  .hero-inner { position: relative; max-width: 52rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
  .kicker { font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1rem; }
  .hero h1 { font-family: var(--display-ar); font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 2.7rem); line-height: 1.35; margin-bottom: .9rem; }
  .hero p.sub { max-width: 42rem; color: #CDE3D3; font-size: 1.02rem; margin-bottom: 1.6rem; }
  .hero-stats { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
  .hero-stat b { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 400; color: #F2EEDF; }
  .hero-stat span { font-size: .8rem; color: #9DBFA8; letter-spacing: .05em; }
  section { padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
  .eyebrow { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green-soft); margin-bottom: .4rem; }
  h2 { font-family: var(--display-ar); font-weight: 700; font-size: clamp(1.35rem, 3vw, 1.7rem); color: var(--green); margin-bottom: .5rem; }
  .lede { color: var(--ink-soft); max-width: 44rem; margin-bottom: 1.8rem; font-size: .98rem; }
  .band-a { background: var(--band-a); border-block: 1px solid var(--rule); }
  .band-b { background: var(--band-b); border-block: 1px solid var(--rule); }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
  .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 1.2rem 1.25rem 1.05rem; display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: var(--ink);
    transition: transform .15s ease, box-shadow .15s ease; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(12,44,29,.10); border-color: var(--gold); }
  .card .chip { align-self: flex-start; font-size: .72rem; letter-spacing: .06em; color: var(--green);
    background: var(--green-wash); border: 1px solid var(--green-line); border-radius: 999px; padding: .1rem .6rem; }
  .card .bt { font-family: var(--display-ar); font-weight: 700; font-size: 1.35rem; line-height: 1.6; }
  .card .en { font-family: var(--display); font-size: .92rem; color: var(--green-soft); direction: ltr; text-align: left; }
  .card .by { font-size: .85rem; color: var(--ink-soft); }
  .card .go { margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--rule);
    font-size: .84rem; color: var(--gold); font-weight: 600; }
  .sources p { font-size: .95rem; color: var(--ink-soft); max-width: 46rem; margin-bottom: .9rem; }
  .sources a { color: var(--green-soft); }
  footer { border-top: 1px solid var(--rule); margin-top: 2rem; padding: 1.6rem 1.5rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-faint); }
  footer a { color: var(--green-soft); text-decoration: none; margin-inline-end: 1rem; }
  footer a:hover { text-decoration: underline; }
  .reader-head { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: .9rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
  .reader-head .bt { font-family: var(--display-ar); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
  .reader-head .by { font-size: .78rem; color: var(--ink-faint); }
  .controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
  select, .navbtn { font: inherit; font-size: .85rem; color: var(--green); background: var(--green-wash);
    border: 1px solid var(--green-line); border-radius: 999px; padding: .32rem .8rem; }
  .navbtn { cursor: pointer; }
  .navbtn:hover, select:hover { border-color: var(--gold); }
  .status { font-size: .85rem; color: var(--ink-faint); padding: .6rem .2rem; }
  .ayah-block { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 1.1rem 1.3rem; margin-bottom: .8rem; }
  .ayah-block.target { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
  .ayah-num { display: inline-block; font-size: .75rem; color: var(--green); background: var(--green-wash);
    border: 1px solid var(--green-line); border-radius: 999px; padding: .1rem .7rem; margin-bottom: .5rem; }
  .ayah-text { font-family: var(--display-ar); font-size: 1.28rem; line-height: 2.15; }
  .search-panel[hidden] { display: none; }
  .search-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
  .searchbox { display: flex; gap: .6rem; margin-top: .8rem; }
  .searchbox input { flex: 1; font: inherit; font-family: var(--display-ar); font-size: 1.1rem;
    background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; padding: .6rem 1.2rem; outline: none; }
  .searchbox input:focus { border-color: var(--gold); }
  .indexbar { font-size: .82rem; color: var(--ink-soft); background: var(--band-b); border: 1px solid var(--rule);
    border-radius: 12px; padding: .55rem .9rem; }
  .indexbar b { color: var(--green); }
  .hit { background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; padding: .7rem 1rem; margin-top: .6rem; cursor: pointer; }
  .hit:hover { border-color: var(--gold); }
  .hit .ref { font-size: .78rem; color: var(--green-soft); font-weight: 600; margin-bottom: .2rem; }
  .hit .snip { font-family: var(--display-ar); font-size: 1rem; line-height: 1.9; }
  .hit mark { background: var(--gold-soft); color: #4A3A10; border-radius: 4px; padding: 0 .15em; }
  .empty { color: var(--ink-faint); font-size: .9rem; padding: .8rem .2rem; }
  .ayah-text, .cmp-entry .ct { white-space: pre-wrap; }
  .cmp-toggle { margin-top: .6rem; font: inherit; font-size: .8rem; color: var(--green-soft);
    background: var(--green-wash); border: 1px solid var(--green-line); border-radius: 999px;
    padding: .18rem .75rem; cursor: pointer; }
  .cmp-toggle:hover { border-color: var(--gold); }
  .cmp-panel { margin-top: .7rem; border-top: 1px dashed var(--rule); padding-top: .7rem; display: none; }
  .cmp-panel.open { display: block; }
  .cmp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
  .cmp-chip { font: inherit; font-size: .78rem; font-family: var(--display-ar); color: var(--green);
    background: var(--surface); border: 1px solid var(--green-line); border-radius: 999px; padding: .14rem .65rem; cursor: pointer; }
  .cmp-chip:hover { border-color: var(--gold); }
  .cmp-chip.on { background: var(--green); color: #F2EEDF; border-color: var(--green); }
  .cmp-entry { background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; padding: .7rem .9rem; margin-top: .5rem; }
  .cmp-entry .cb { font-size: .8rem; color: var(--green-soft); font-weight: 700; margin-bottom: .25rem;
    display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
  .cmp-entry .cb a { font-weight: 400; font-size: .74rem; color: var(--gold); text-decoration: none; }
  .cmp-entry .cb a:hover { text-decoration: underline; }
  .cmp-entry .ct { font-family: var(--display-ar); font-size: 1.02rem; line-height: 1.95; }
  .cmp-status { font-size: .8rem; color: var(--ink-faint); padding: .2rem 0; }
  .continue { margin-bottom: 1.4rem; }
  .continue[hidden] { display: none; }
  .c-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
  .c-item { font: inherit; font-family: var(--display-ar); font-size: .95rem; color: var(--ink);
    text-align: start; background: var(--surface); border: 1px solid var(--gold-soft);
    border-radius: 999px; padding: .42rem 1.05rem; cursor: pointer; }
  .c-item b { color: var(--green-soft); font-weight: 700; }
  .c-item:hover { border-color: var(--gold); }
  /* ── extended shelf (turath) ── */
  .t-banner { text-align: center; }
  .t-banner .big { font-family: var(--display-ar); font-weight: 700; font-size: 1.5rem; color: var(--green); margin-bottom: .4rem; }
  .t-banner p { color: var(--ink-soft); max-width: 40rem; margin: 0 auto 1.2rem; font-size: .95rem; }
  .t-cta { display: inline-block; font-family: var(--display-ar); font-weight: 700; font-size: 1.05rem;
    color: #F2EEDF; background: var(--green); border: 1px solid var(--green); border-radius: 999px;
    padding: .65rem 1.8rem; text-decoration: none; }
  .t-cta:hover { border-color: var(--gold); }
  .t-search { display: flex; gap: .6rem; margin-bottom: .9rem; }
  .t-search input { flex: 1; font: inherit; font-family: var(--display-ar); font-size: 1.05rem;
    background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px;
    padding: .6rem 1.2rem; outline: none; }
  .t-search input:focus { border-color: var(--gold); }
  .t-count { font-size: .82rem; color: var(--ink-soft); background: var(--band-b); border: 1px solid var(--rule);
    border-radius: 12px; padding: .5rem .9rem; margin-bottom: 1rem; }
  .t-count b { color: var(--green); }
  .t-book { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
    padding: .85rem 1.05rem; text-decoration: none; color: var(--ink); display: block; margin-bottom: .55rem;
    transition: border-color .12s ease; }
  .t-book:hover { border-color: var(--gold); }
  .t-book .nm { font-family: var(--display-ar); font-weight: 700; font-size: 1.05rem; }
  .t-book .au { font-size: .8rem; color: var(--ink-soft); }
  .t-book .ct { float: left; font-size: .72rem; color: var(--green-soft); background: var(--green-wash);
    border: 1px solid var(--green-line); border-radius: 999px; padding: .06rem .55rem; margin-top: .2rem; }
  [dir="ltr"] .t-book .ct { float: right; }
  .t-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .35rem; margin-top: .7rem; }
  .t-toc button { font: inherit; font-family: var(--display-ar); font-size: .84rem; color: var(--ink);
    text-align: start; background: var(--bg); border: 1px solid var(--rule); border-radius: 10px;
    padding: .4rem .6rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-toc button:hover { border-color: var(--gold); }
  .t-info { background: var(--band-b); border: 1px solid var(--rule); border-radius: 12px;
    padding: .8rem 1rem; font-size: .88rem; color: var(--ink-soft); white-space: pre-wrap; margin-bottom: 1rem; }
  .t-pagenum { font-size: .8rem; color: var(--ink-faint); margin: 1.6rem 0 .5rem; text-align: center; }
  .era-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
  .era { font: inherit; font-size: .84rem; color: var(--green-soft); background: var(--surface);
    border: 1px solid var(--rule); border-radius: 999px; padding: .28rem .95rem; cursor: pointer; }
  .era:hover { border-color: var(--gold); }
  .era.on { background: var(--green); color: #F2EEDF; border-color: var(--green); font-weight: 600; }
  .surah-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .45rem; margin-top: .8rem; }
  .s-chip { font: inherit; font-size: .82rem; font-family: var(--display-ar); color: var(--ink);
    background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; padding: .4rem .5rem; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .s-chip:hover { border-color: var(--gold); }
  .s-chip.on { background: var(--green); color: #F2EEDF; border-color: var(--green); }
  .next-surah { display: block; margin: 1.4rem auto .4rem; font: inherit; font-family: var(--display-ar);
    font-size: 1rem; font-weight: 700; color: var(--green); background: var(--green-wash);
    border: 1px solid var(--green-line); border-radius: 999px; padding: .6rem 1.6rem; cursor: pointer; }
  .next-surah:hover { border-color: var(--gold); }
  @media (max-width: 720px) { .topbar-nav { display: none; } }