/* Self-hosted fonts (SIL Open Font License), from Google Fonts: Amiri, Amiri Quran, Manrope, Newsreader */
@font-face { font-family: 'Amiri Quran'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/amiri-quran-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/amiri-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/newsreader-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/newsreader-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #FBF8F1; --surface: #FFFFFF; --surface-2: #F5EFE2; --line: #E6DCC6; --line-soft: #EFE7D6;
  --ink: #1E2A25; --muted: #5D6A63; --brand: #0F3D33; --brand-ink: #F5EFE2; --gold: #D9B86A; --gold-deep: #B8892D;
  --link: #0F5A47; --own-soft: #F1E2B8; --own-ink: #6E5520; --syn: #1F5E57; --syn-soft: #D6EAE6; --selected: #E3EFE7;
  --matched: #FCF5E3; --map-a: #EDE6D5; --map-b: #E4DBC6; --map-hit: #9DBFA9; --map-selected: #0F5A47;
  --around: #FBF8F1; --around-head: #0F3D33; --around-line: #EFE7D6; --around-ink: #5D6A63; --scrim: rgba(15, 30, 25, .45);
  --font-arabic: 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif; --font-arabic-ui: 'Amiri', 'Traditional Arabic', serif;
  --arabic-scale: 1;
  --font-read: 'Newsreader', Georgia, 'Times New Roman', serif; --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1815; --surface: #16211D; --surface-2: #1B2823; --line: #2A3832; --line-soft: #223029;
    --ink: #E7ECE8; --muted: #9BAAA3; --brand: #0B2A23; --brand-ink: #F0E9D8; --gold-deep: #D9B86A;
    --link: #8FD0B5; --own-soft: rgba(217, 184, 106, .28); --own-ink: #E3C27A; --syn: #9FD6CC; --syn-soft: rgba(120, 190, 180, .22); --selected: #1F3A30;
    --matched: #1E2A22; --map-a: #24302B; --map-b: #1E2925; --map-hit: #3F7A62; --map-selected: #8FD0B5;
    --around: #0F1815; --around-head: #0B2A23; --around-line: #223029; --around-ink: #9BAAA3; --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
a { color: var(--link); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { position: relative; overflow: hidden; background: var(--brand); color: var(--brand-ink); }
.top .pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.top .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--brand-ink); text-decoration: none; font-family: var(--font-read); font-size: 24px; font-weight: 500; }
.search { flex: 1 1 360px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 5px 0 18px; background: var(--bg); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-read); font-size: 21px; }
.search button { height: 40px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--gold); color: #0F3D33; font-weight: 700; font-size: 15px; }
.nav { display: flex; gap: 24px; font-weight: 600; }
.nav a { color: var(--brand-ink); text-decoration: none; }

.map { margin-top: 14px; padding: 10px 16px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
.map-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.map-head h2 { margin: 0; font-family: var(--font-read); font-size: 20px; font-weight: 500; }
.map-head p { margin: 0; font-size: 14px; color: var(--muted); }
.strip { position: relative; min-width: 0; height: 32px; cursor: pointer; }
.bands { position: absolute; left: 0; right: 0; top: 7px; height: 18px; display: flex; border-radius: 5px; overflow: hidden; }
.bands span { min-width: 1px; height: 18px; }
.tick { position: absolute; top: 2px; width: 2px; height: 28px; background: var(--gold-deep); border-radius: 1px; pointer-events: none; }
.hover-label { position: absolute; top: -30px; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; pointer-events: none; }

.columns { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; padding-block: 12px 64px; align-items: start; }
.columns.single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.toolbar .count { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.toolbar .chips { flex-wrap: nowrap; flex: none; gap: 6px; }
.toolbar .chip { height: 30px; font-size: 12.5px; }
.toolbar .ghost-button { height: 30px; padding: 0 10px; font-size: 12.5px; }
.toolbar .size-button { min-width: 34px; padding: 0 8px; }
.count { margin: 0; font-size: 15px; color: var(--muted); }
.count strong { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: 17px; font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.chip button { width: 26px; height: 26px; border: 0; background: transparent; color: inherit; border-radius: 13px; font-size: 16px; line-height: 1; }
.ghost-button { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 18px; background: transparent; color: var(--link); font-size: 13px; font-weight: 600; }
.refine-button { display: none; }

.did-you-mean { margin: 0 0 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; font-size: 15px; }
.did-you-mean a { font-family: var(--font-read); font-size: 19px; font-weight: 500; }

.list { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 2px; content-visibility: auto; contain-intrinsic-size: auto 150px; }
.card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.badge { position: relative; width: 28px; height: 28px; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--ink); }
.badge svg { position: absolute; inset: 0; }
.badge b { position: relative; font-variant-numeric: tabular-nums; }
.reference { font-family: var(--font-read); font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reference span { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--link); margin-left: 6px; }
.arabic-name { font-family: var(--font-arabic-ui); font-size: 16px; color: var(--muted); white-space: nowrap; }
.arabic { margin: 0; font-family: var(--font-arabic); font-size: calc(26px * var(--arabic-scale)); line-height: 1.85; text-align: right; direction: rtl; }
.card-body { display: flex; flex-direction: column; gap: 2px; }
.card-body > .arabic { font-size: calc(23px * var(--arabic-scale)); line-height: 2.05; padding-bottom: .2em; word-spacing: .08em; }
.card .english { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; }
.card .reference { font-size: 15px; }
.card .badge { width: 24px; height: 24px; font-size: 9.5px; }
.card .card-head { gap: 8px; }
.card .actions button { width: 28px; height: 28px; border-radius: 8px; }
.card .actions svg { width: 16px; height: 16px; }
.no-arabic .card-body > .arabic { display: none; }
.arabic .verse-end { color: var(--gold-deep); margin-inline-end: .3em; }
.english { margin: 0; font-family: var(--font-read); font-size: 17.5px; line-height: 1.5; }
.english .verse-number { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--gold-deep); margin-inline: 4px; }
mark { background: var(--own-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
mark.synonym { background: var(--syn-soft); text-decoration: underline dotted var(--syn) 2px; text-underline-offset: 4px; }
.actions { display: flex; gap: 2px; margin-left: auto; flex: none; }
.actions button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--link); }
.actions button:hover { background: var(--surface-2); }
.actions svg { width: 18px; height: 18px; }
.actions button[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.more-button { width: 100%; margin-top: 10px; height: 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--link); font-size: 15px; font-weight: 600; }
.empty { padding: 32px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); }
.loading { opacity: .55; transition: opacity .15s; }

.around { margin-top: 4px; background: var(--around); border: 1px solid var(--around-head); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.around-head { padding: 6px 14px; background: var(--around-head); border-bottom: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.around-button { height: 36px; border: 0; background: transparent; color: var(--link); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.around-button + .verse-row, .verse-row + .verse-row, .verse-row + .around-button { border-top: 1px solid var(--around-line); }
.verse-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 18px; }
.verse-row .number { padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.verse-row .text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.verse-row .arabic { font-size: calc(24px * var(--arabic-scale)); color: var(--around-ink); padding-bottom: .3em; }
.verse-row .english { font-size: 17px; color: var(--around-ink); }
.card .verse-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px 14px; }
.card .verse-row .number { padding-top: 6px; font-size: 12px; }
.card .verse-row .arabic, .card .verse-row.matched .arabic { font-size: calc(22px * var(--arabic-scale)); line-height: 1.95; padding-bottom: .15em; word-spacing: .08em; }
.card .verse-row .english, .card .verse-row.matched .english { font-size: 14px; line-height: 1.5; }
.card .verse-row.matched { background: var(--surface); }
.verse-row.matched { background: var(--matched); box-shadow: inset 4px 0 0 var(--gold); }
.verse-row.matched .number { color: var(--link); }
.verse-row.matched .arabic, .verse-row.matched .english { color: var(--ink); }
.verse-row.matched .arabic { font-size: calc(30px * var(--arabic-scale)); }
.verse-row.matched .english { font-size: 19px; }

.rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.panel h2, .panel h3 { margin: 0; font-family: var(--font-read); font-size: 21px; font-weight: 500; }
.panel .hint { margin: 0; font-size: 13px; color: var(--muted); }
.panel ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.term { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.term input { width: 18px; height: 18px; accent-color: var(--link); margin: 0; }
.term.locked { cursor: not-allowed; }
.panel .word-group { margin: 8px 0 0; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.term .label { font-weight: 700; }
.term .verse-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.term .forms { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }
.pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: 1px; }
.pill.own { background: var(--own-soft); color: var(--own-ink); }
.pill.synonym { background: var(--syn-soft); color: var(--syn); }
.surah-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px 24px; gap: 8px; align-items: center; min-height: 38px; padding: 0 6px; border: 0; background: transparent; color: var(--ink); font-size: 14px; text-align: left; border-radius: 8px; width: 100%; }
.surah-row[aria-pressed="true"] { background: var(--selected); }
.surah-row .surah-number { font-size: 12px; font-weight: 700; color: var(--own-ink); font-variant-numeric: tabular-nums; }
.surah-row .surah-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surah-row .bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.surah-row .bar i { display: block; height: 100%; background: var(--link); border-radius: 4px; }
.surah-row .hits { text-align: right; font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; }
.link-button { border: 0; background: transparent; color: var(--link); font-weight: 700; font-size: 14px; padding: 6px 0; text-align: left; }

.no-results { display: flex; flex-direction: column; gap: 24px; }
.no-results h1 { margin: 0; font-family: var(--font-read); font-size: 34px; font-weight: 400; }
.suggestion { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 28px; background: var(--surface); border: 2px solid var(--gold); border-radius: 20px; text-decoration: none; color: var(--ink); }
.suggestion small { display: block; font-size: 15px; color: var(--muted); }
.suggestion strong { font-family: var(--font-read); font-size: 36px; font-weight: 400; }
.suggestion .go { height: 52px; padding: 0 22px; display: flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--brand-ink); background: var(--brand); border-radius: 14px; }

.sheet { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; background: var(--scrim); }
.sheet-body { max-height: 85%; overflow: auto; background: var(--bg); border-radius: 22px 22px 0 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; }
.sheet-top h2 { margin: 0; font-family: var(--font-read); font-size: 22px; font-weight: 500; }
.sheet-panels { display: flex; flex-direction: column; gap: 14px; }
.close-button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 22px; }
.apply-button { height: 52px; border: 0; border-radius: 14px; background: var(--gold); color: #0F3D33; font-size: 16px; font-weight: 700; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }

@media (max-width: 900px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .refine-button { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--link); font-weight: 700; font-size: 13px; }
  .nav { display: none; }
}

@media (max-width: 560px) {

  .surahs-page .filter-box, .surahs-page .filter-box input { width: 100%; }
  .top .wrap { padding-block: 14px; }
  .brand { font-size: 20px; }
  .search { height: 50px; flex-basis: 100%; }
  .search button { padding: 0 14px; }
  .arabic { font-size: calc(22px * var(--arabic-scale)); }
  .card-body > .arabic { font-size: calc(21px * var(--arabic-scale)); }
  .toolbar { flex-wrap: wrap; }
  .card { padding: 6px 10px 8px; }
  #copy-view-link { display: none; }
  .english { font-size: 16px; }
  .verse-row { grid-template-columns: 40px minmax(0, 1fr); padding: 10px 12px; }
  .verse-row .arabic, .verse-row.matched .arabic { font-size: calc(22px * var(--arabic-scale)); }
  .verse-row .english, .verse-row.matched .english { font-size: 16px; }
  .map { padding: 10px 12px 6px; }
  .arabic-name { display: none; }
  .no-results h1 { font-size: 26px; }
  .suggestion strong { font-size: 28px; }
}

.reader { max-width: 920px; margin: 0 auto; padding-block: 20px 64px; display: flex; flex-direction: column; gap: 14px; }
.surah-bar { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.surah-bar-top { display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.surah-step { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--link); text-decoration: none; }
.surah-step.next { justify-content: flex-end; }
.surah-title { text-align: center; }
.surah-title h1 { margin: 0; font-family: var(--font-read); font-size: 22px; font-weight: 500; line-height: 1.3; }
.surah-arabic-name { margin-left: 8px; font-family: var(--font-arabic-ui); font-size: 22px; color: var(--brand); }
.surah-meaning { margin: 0; font-size: 13px; color: var(--muted); }
.surah-bar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 10px 16px; }
.passage-label { margin: 0; font-size: 14px; }
.solid-button { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--brand-ink); background: var(--brand); border-radius: 18px; text-decoration: none; }
.verse-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.verse-list .verse-row + .verse-row { border-top: 1px solid var(--line-soft); }
.verse-list .verse-row { padding: 14px 24px; content-visibility: auto; contain-intrinsic-size: auto 160px; }
.verse-list .number { padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--own-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.verse-list .arabic { font-size: calc(30px * var(--arabic-scale)); line-height: 1.9; padding-bottom: .3em; }
.verse-list .english { font-size: 19px; }
.no-arabic .verse-list .arabic { display: none; }
.reader-single_verse .verse-row:not(.matched) .arabic, .reader-single_verse .verse-row:not(.matched) .english { color: var(--muted); }
.reader-single_verse .verse-row:not(.matched) .arabic { font-size: calc(24px * var(--arabic-scale)); }
.reader-single_verse .verse-row:not(.matched) .english { font-size: 17px; }
.reader-more { height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--link); font-size: 15px; font-weight: 600; text-decoration: none; }

.bismillah { margin: 0; padding: 0; font-family: var(--font-arabic); font-size: calc(21px * var(--arabic-scale)); line-height: 1.8; text-align: center; color: var(--muted); }
.no-arabic .bismillah { display: none; }
.verse-list .number { align-self: start; padding: 6px 8px; margin: 4px 0 0 -8px; border-radius: 8px; }
.verse-list .number:hover, .verse-list .number:focus-visible { background: var(--surface-2); }
.icon-button { display: inline-flex; align-items: center; gap: 6px; }
.icon-button svg { width: 16px; height: 16px; }
.label-short { display: none; }
#arabic-toggle[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
#arabic-toggle[aria-pressed="true"] { background: var(--selected); }
.size-buttons { display: inline-flex; }
.size-button { min-width: 40px; padding: 0 10px; }
.size-buttons .size-button:first-child { border-radius: 18px 0 0 18px; }
.size-buttons .size-button:last-child { border-radius: 0 18px 18px 0; margin-left: -1px; }
.size-button:disabled { opacity: .4; cursor: default; }
.mini-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 15; background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.mini-bar-inner { max-width: 920px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 48px; }
.mini-bar .surah-step { color: var(--brand-ink); font-size: 22px; justify-content: center; }
.mini-title { text-align: center; color: var(--brand-ink); text-decoration: none; font-family: var(--font-read); font-size: 17px; }
.verse-menu { position: absolute; z-index: 25; display: flex; flex-direction: column; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.verse-menu button, .verse-menu a { display: block; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; text-align: left; text-decoration: none; }
.verse-menu button:hover, .verse-menu a:hover { background: var(--surface-2); }

.hero { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-block: 40px 32px; text-align: center; }
.hero h1 { margin: 0; font-family: var(--font-read); font-size: 40px; font-weight: 500; }
.tagline { margin: 0; font-size: 17px; color: var(--muted); }
.hero-search { width: min(720px, 100%); flex: none; margin-top: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); border: 1px solid var(--line); }
.examples { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 860px; }
.examples li { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; font-size: 13px; color: var(--muted); }
.examples a { font-family: var(--font-read); font-size: 16px; font-weight: 500; text-decoration: none; }
.home { max-width: 1000px; display: flex; flex-direction: column; gap: 28px; padding-block: 28px 56px; }
.daily-verse .daily-verse-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.daily-verse .daily-verse-footer a { text-decoration: none; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h1, .section-head h2 { margin: 0; font-family: var(--font-read); font-weight: 500; }
.section-head h1 { font-size: 32px; }
.section-head h2 { font-size: 22px; }
.section-head a { font-weight: 600; text-decoration: none; }
.surah-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.surah-card a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; }
.surah-card a:hover { border-color: var(--gold); }
.surah-card-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--own-ink); font-variant-numeric: tabular-nums; }
.surah-card-names { display: flex; flex-direction: column; min-width: 0; }
.surah-card-names strong { font-family: var(--font-read); font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surah-card-names small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surah-card-arabic { font-family: var(--font-arabic-ui); font-size: 18px; color: var(--brand); white-space: nowrap; }
.surahs-page { padding-block: 28px 56px; }
.filter-box input { height: 44px; width: min(320px, 100%); padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.search-help ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.search-help p { margin: 0; }
.site-footer { border-top: 1px solid var(--line); margin-top: 24px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 18px 28px; font-size: 13px; color: var(--muted); }
.site-footer p { margin: 0; }
.consent-banner { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; width: min(640px, calc(100% - 24px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: 14px; }
.consent-banner p { margin: 0; flex: 1 1 280px; }
.consent-buttons { display: flex; gap: 8px; }
.consent-button { height: 38px; padding: 0 18px; border: 1px solid var(--brand); border-radius: 10px; background: var(--surface); color: var(--brand); font-size: 14px; font-weight: 700; }
.consent-button[data-consent="granted"] { background: var(--brand); color: var(--brand-ink); }
.privacy .panel h2 { margin: 0; font-family: var(--font-read); font-size: 20px; font-weight: 500; }
.guide { max-width: 960px; display: flex; flex-direction: column; gap: 12px; padding-block: 24px 40px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 4px; }
.guide-grid .panel { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.guide-grid h2 { margin: 0; font-family: var(--font-read); font-size: 19px; font-weight: 500; }
.guide-grid .panel .guide-examples { margin-top: auto; }
.guide h1 { margin: 0; font-family: var(--font-read); font-size: 32px; font-weight: 500; }
.guide .lead { margin: 0; font-size: 17px; color: var(--muted); }
.guide .panel p { margin: 0; }
.guide-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-examples a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); text-decoration: none; font-weight: 600; font-size: 14px; }

@media (max-width: 560px) {
  .reader { padding-block: 16px 40px; }
  .surah-step-name { display: none; }
  .hero-inner { padding-block: 24px 20px; }
  .hero h1 { font-size: 28px; }
  .examples li span { display: none; }
  .surah-grid { grid-template-columns: minmax(0, 1fr); }
  .verse-row, .verse-list .verse-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .verse-row .number, .verse-list .number { padding-top: 0; }
  .button-label, .label-long { display: none; }
  .bismillah { font-size: calc(18px * var(--arabic-scale)); }
  .label-short { display: inline; }
  .passage-label { display: none; }
  .surah-bar-actions { padding: 8px 10px; }
  .surah-bar-actions .chips { flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
  .surah-bar-actions .ghost-button, .surah-bar-actions .solid-button { flex: none; padding: 0 9px; font-size: 12px; white-space: nowrap; }
  .surah-step { font-size: 22px; }
  .surah-title h1 { font-size: 19px; }
  .verse-list .verse-row { padding: 10px 12px; }
  .verse-list .arabic, .verse-row.matched .arabic { font-size: calc(22px * var(--arabic-scale)); }
  .verse-list .english, .verse-row.matched .english { font-size: 16px; }
  }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }