:root {
  --bg: #fbf8f2; --surface: #fffdf8; --surface-soft: #f2f6ed; --ink: #17231f; --muted: #68736f;
  --green: #0e5947; --green-2: #1f765f; --line: #e7ded2; --gold: #c89428; --gold-soft: #fff3d3;
  --shadow: 0 18px 45px rgba(37, 30, 18, .10); --radius: 20px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--ink); background: radial-gradient(circle at top left, rgba(218,230,207,.85), transparent 32rem), linear-gradient(135deg, #fbf8f2, #fffdf9 45%, #f6faf3); min-height: 100vh; }
button, a, input { font: inherit; } button { cursor: pointer; }
.topbar { min-height: 92px; display:flex; justify-content:space-between; align-items:center; padding:18px 32px; border-bottom:1px solid var(--line); background:rgba(255,253,248,.82); backdrop-filter:blur(16px); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:16px; } .brand-icon { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:#eef4e9; border:1px solid #dfe9d8; font-size:28px; }
h1,h2,h3 { font-family:"Cormorant Garamond", Georgia, serif; margin:0; line-height:1.05; } h1 { color:var(--green); font-size:clamp(2rem,3vw,2.7rem); } .brand p { margin:4px 0 0; color:var(--muted); }
.top-actions { display:flex; gap:10px; flex-wrap:wrap; } .ghost-btn,.ghost-outline { border:0; background:transparent; color:var(--ink); padding:10px 14px; border-radius:999px; } .ghost-btn:hover { background:var(--surface-soft); } .ghost-outline { border:1px solid var(--line); background:var(--surface); border-radius:10px; }
.layout { display:grid; grid-template-columns:280px minmax(0, 1fr) 360px; gap:28px; padding:24px 32px 40px; }
.sidebar,.right-panel { display:flex; flex-direction:column; gap:16px; } .sidebar { border-right:1px solid var(--line); padding-right:16px; }
.nav-item { display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; padding:15px 18px; border-radius:12px; color:var(--ink); text-align:left; }
.nav-item.active,.nav-item:hover { background:linear-gradient(90deg,#dfebd8,#f5f8f1); color:var(--green); }
.quote-card,.panel-card,.tip-card,.reading-card,.hero-card,.jump-card,.preview-card,.start-cycle-card,.stat-card,.history-card { background:rgba(255,253,248,.84); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 30px rgba(37,30,18,.055); }
.quote-card { margin-top:18px; padding:24px; text-align:center; font-family:Georgia,serif; } .arabic-small { color:var(--green); font-size:1.15rem; margin-bottom:12px; } .quote-card p { font-style:italic; line-height:1.6; } .quote-card strong { color:var(--green); font-weight:500; }
.content { min-width:0; } .hidden { display:none !important; } .welcome,.section-heading,.current-heading { text-align:center; margin:22px auto 28px; } .welcome h2,.section-heading h2,.current-heading h2 { font-size:clamp(2.35rem,4.5vw,3.8rem); } .flourish { color:#b3b982; margin-top:12px; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; color:var(--green); font-weight:800; font-size:.78rem; margin:0 0 12px; } .subtle { color:var(--muted); } .centered { text-align:center; }
.hero-card { max-width:880px; margin:0 auto 24px; padding:28px; display:grid; grid-template-columns:92px 1fr auto; gap:22px; align-items:center; box-shadow:var(--shadow); }
.hero-icon,.cycle-icon { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:#f2ead8; border:1px solid var(--line); font-size:2.1rem; } .hero-card h3 { font-size:2.4rem; }
.metrics { display:flex; gap:18px; flex-wrap:wrap; margin:14px 0; } .metric { display:inline-flex; align-items:center; gap:8px; color:var(--ink); } .metric small { display:block; color:var(--muted); font-size:.72rem; }
.bar { height:12px; background:#ebe7df; border-radius:999px; overflow:hidden; } .bar span { display:block; height:100%; width:0; background:var(--green); border-radius:inherit; }
.primary-btn,.complete-btn,.gold-btn,.soft-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; border-radius:9px; text-decoration:none; border:0; font-weight:800; white-space:nowrap; }
.primary-btn { background:linear-gradient(135deg,var(--green),var(--green-2)); color:#fff; padding:0 28px; box-shadow:0 8px 20px rgba(14,89,71,.18); } .gold-btn { background:linear-gradient(135deg,var(--gold),#d8a33d); color:#fff; padding:0 26px; }
.jump-card { max-width:880px; margin:0 auto 20px; padding:22px; } .search-line { display:flex; gap:10px; } .search-box { flex:1; display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:#fff; border-radius:11px; padding:0 12px; min-height:48px; color:var(--green); } .search-box input { border:0; outline:0; background:transparent; width:100%; color:var(--ink); }
.examples { margin:12px 0; color:var(--muted); font-size:.9rem; } .examples button { border:1px solid var(--line); background:#faf7ef; border-radius:999px; margin-left:6px; padding:5px 10px; }
.jump-results-wrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; } .jump-results { display:grid; gap:8px; max-height:285px; overflow:auto; padding-right:4px; }

.results-label { margin:0 0 4px; color:var(--muted); font-size:.9rem; font-weight:700; letter-spacing:.02em; }

.jump-row { display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; border:1px solid var(--line); background:#fffdf8; border-radius:12px; padding:10px 12px; text-align:left; }
.jump-row.active,.jump-row:hover { background:#edf4e7; } .jump-row .num { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:#f4f0de; border:1px solid #e4dac2; } .jump-row small { display:block; color:var(--muted); margin-top:2px; }
.preview-card { padding:18px; } .preview-card h3 { font-size:1.65rem; } .preview-card .primary-btn { width:100%; margin-top:14px; }
.gentle-note { color:var(--muted); font-size:.92rem; margin:12px 0 0; }
.start-cycle-card { max-width:880px; margin:0 auto; padding:22px; display:grid; grid-template-columns:76px 1fr auto; gap:18px; align-items:center; background:linear-gradient(90deg,#fffdf8,#fff9e8); } .start-cycle-card p { margin:.25rem 0; color:var(--muted); }
.current-heading { display:flex; align-items:center; justify-content:center; gap:34px; } .circle-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:2rem; color:var(--green); }
.reading-card { max-width:780px; margin:0 auto 28px; padding:28px; text-align:center; box-shadow:var(--shadow); } .book-divider { color:var(--green); font-size:2rem; margin-bottom:12px; } .passage { padding:8px 0 18px; } .passage + .passage { border-top:1px solid var(--line); padding-top:18px; } .passage h3 { font-size:clamp(2.2rem,5vw,3.8rem); } .passage p { color:var(--green); font-size:1.2rem; margin:8px 0 0; } .theme { color:var(--green); font-family:Georgia,serif; font-style:italic; font-size:1.15rem; margin:0 0 18px; } .centered-metrics { justify-content:center; }
.about-reading { max-width:780px; margin:0 auto; text-align:center; } .about-reading > p:not(.eyebrow) { line-height:1.7; text-align:left; } .complete-btn { background:transparent; color:var(--green); border:1.5px solid var(--green); width:min(540px,100%); font-size:1.05rem; margin-top:18px; }
.panel-card { padding:22px; } .progress-card { text-align:center; } .ring { width:140px; height:140px; border-radius:50%; margin:8px auto 16px; display:grid; place-items:center; background:conic-gradient(var(--green) 0deg,#e4e3df 0deg); position:relative; } .ring::before { content:""; position:absolute; width:104px; height:104px; border-radius:50%; background:var(--surface); } .ring span { position:relative; z-index:1; font-family:"Cormorant Garamond"; font-size:2.35rem; font-weight:700; } .mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; color:var(--muted); }
.next-card { width:100%; display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; border:0; background:transparent; text-align:left; } .next-card span:first-child { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; } .next-card small { display:block; color:var(--muted); font-style:italic; margin-top:3px; } .tip-card { padding:22px; background:#fff6dc; border-color:#edd398; }
.readings-list { display:grid; gap:10px; max-width:920px; margin:0 auto; } .reading-row { display:grid; grid-template-columns:48px 1fr auto; gap:16px; align-items:center; padding:15px 18px; border-radius:14px; border:1px solid var(--line); background:rgba(255,253,248,.82); text-align:left; } .reading-row.completed { background:#eef6e9; } .reading-row small { color:var(--muted); display:block; } .check { color:var(--green); font-weight:800; }
.filter-row { display:flex; justify-content:center; gap:10px; margin-bottom:18px; } .pill { border:1px solid var(--line); background:var(--surface); padding:10px 16px; border-radius:999px; } .pill.active { background:var(--green); color:#fff; }
.progress-large { text-align:center; } .stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:28px auto; } .stat-card { text-align:center; padding:24px; } .stat-card strong { display:block; font-family:"Cormorant Garamond"; font-size:3rem; }
.modal-backdrop { position:fixed; inset:0; background:rgba(23,35,31,.36); backdrop-filter:blur(4px); display:grid; place-items:center; z-index:20; padding:20px; } .modal-card { position:relative; width:min(560px,100%); background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.20); padding:32px; text-align:center; } .modal-card p { text-align:left; line-height:1.75; } .modal-card h2 { font-size:2.5rem; } .modal-close { position:absolute; top:14px; right:16px; border:0; background:transparent; font-size:1.8rem; color:var(--muted); } .modal-icon { font-size:2.4rem; } .dua { color:var(--green); font-family:Georgia,serif; font-style:italic; } .soft-btn { background:#e6f0dd; color:var(--green); padding:0 24px; width:100%; margin-top:8px; }
@media (max-width:1180px){ .layout{grid-template-columns:220px 1fr}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr)}.jump-results-wrap{grid-template-columns:1fr}.preview-card{display:none}.hero-card,.start-cycle-card{grid-template-columns:80px 1fr}.hero-card .primary-btn,.start-cycle-card .gold-btn{grid-column:1/-1;width:100%;}}
@media (max-width:760px){ .topbar{align-items:flex-start;gap:10px;flex-direction:column;padding:18px}.layout{display:block;padding:16px}.sidebar{border:0;padding:0;margin-bottom:18px}.quote-card,.right-panel{display:none}.hero-card,.start-cycle-card{grid-template-columns:1fr;text-align:center}.hero-icon,.cycle-icon{margin:auto}.search-line{display:grid}.current-heading{gap:12px}.stat-grid{grid-template-columns:1fr}.metrics{justify-content:center}.jump-results-wrap{display:block} }
.soft-link-btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border-radius:9px; text-decoration:none; border:1px solid var(--line); color:var(--green); background:#f4f8ef; font-weight:800; width:100%; margin-top:10px; }
.soft-link-btn:hover { background:#e8f1df; }

/* v0.4 completion experience */
.bar span { transition: width .55s ease; }
.reading-card, .about-reading, .completion-card { animation: gentleIn .28s ease both; }
.reading-card { transition: opacity .25s ease, transform .25s ease; }
.reading-card.is-exiting { opacity: 0; transform: translateY(-8px); }
.completion-card {
  max-width: 780px;
  margin: 0 auto 28px;
  padding: 34px 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(242,246,237,.92));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.completion-mark {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  background: var(--green);
  color: white;
  font-weight: 900;
  font-size: 1.7rem;
  box-shadow: 0 12px 25px rgba(14,89,71,.2);
}
.completion-card h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--green);
}
.completion-summary {
  margin: 12px auto 4px;
  max-width: 560px;
  line-height: 1.7;
  color: var(--muted);
}
.soft-divider {
  height: 1px;
  background: var(--line);
  margin: 26px auto;
  max-width: 520px;
}
.next-preview {
  max-width: 600px;
  margin: 0 auto 22px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,253,248,.78);
  border: 1px solid var(--line);
}
.next-preview h3 {
  margin: 6px 0 8px;
  font-size: clamp(1.8rem, 4vw, 3rem);
}
.next-preview .subtle { margin: 0 0 14px; }
@keyframes gentleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* v0.5 reading history */
.history-grid { max-width: 960px; margin: 0 auto; display: grid; gap: 20px; }
.history-card { padding: 26px; }
.history-current-main { display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap; margin-bottom:18px; }
.history-current-main strong { font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(2rem,4vw,3rem); color:var(--green); }
.history-current-main span { color:var(--muted); font-weight:600; }
.history-details { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 20px; }
.history-details div { background:#fbfaf5; border:1px solid var(--line); border-radius:16px; padding:16px; }
.history-details dt { color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; margin-bottom:8px; }
.history-details dd { margin:0; color:var(--ink); font-weight:700; line-height:1.45; }
.history-actions { display:flex; gap:10px; flex-wrap:wrap; }
.history-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.history-title-row h3 { font-size:2rem; color:var(--green); }
.history-count { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#eef4e9; border:1px solid #dfe9d8; color:var(--green); font-weight:900; }
.empty-history { text-align:center; padding:20px 12px 8px; }
.empty-icon { width:66px; height:66px; margin:0 auto 14px; display:grid; place-items:center; border-radius:50%; background:#f2ead8; border:1px solid var(--line); font-size:2rem; }
.empty-history h3 { color:var(--green); font-size:2rem; margin-bottom:8px; }
.empty-history p { color:var(--muted); max-width:520px; margin:0 auto 18px; line-height:1.7; }
.centered-actions { justify-content:center; }
.history-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; }
.history-table { width:100%; border-collapse:collapse; background:#fffdf8; min-width:620px; }
.history-table th, .history-table td { padding:15px 16px; text-align:left; border-bottom:1px solid var(--line); }
.history-table th { color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; background:#f4f8ef; }
.history-table tr:last-child td { border-bottom:0; }
.history-table td:first-child { font-weight:800; color:var(--green); }
@media (max-width:760px){ .history-details{grid-template-columns:1fr}.history-current-main{display:block}.history-actions .primary-btn,.history-actions .ghost-outline{width:100%;}.history-card{padding:20px} }

/* v0.7 in-app reader */
.reading-actions { display:flex; justify-content:center; gap:12px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.reading-actions .primary-btn, .reading-actions .inline-link { width:auto; min-width:210px; margin-top:0; }
.preview-read-btn { width:100%; }
.reader-backdrop { position:fixed; inset:0; background:rgba(23,35,31,.42); backdrop-filter:blur(5px); z-index:30; display:grid; place-items:center; padding:22px; }
.reader-shell { width:min(980px,100%); max-height:min(92vh,980px); display:grid; grid-template-rows:auto auto 1fr auto; background:var(--surface); border:1px solid var(--line); border-radius:26px; box-shadow:0 34px 90px rgba(0,0,0,.24); overflow:hidden; }
.reader-header { padding:24px 28px 18px; display:flex; justify-content:space-between; gap:22px; align-items:flex-start; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fffdf8,#f7f8f0); }
.reader-header h2 { font-size:clamp(2rem,4vw,3rem); margin:.1rem 0; }
.reader-toolbar { padding:14px 28px; display:flex; justify-content:space-between; align-items:center; gap:14px; border-bottom:1px solid var(--line); background:#fbfaf5; }
.toggle-group { display:flex; border:1px solid var(--line); border-radius:999px; padding:4px; background:#fffdf8; }
.toggle-btn { min-height:38px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-weight:800; }
.toggle-btn.active { background:var(--green); color:#fff; }
.font-controls { display:flex; gap:8px; }
.small-circle { width:42px; height:42px; font-size:.95rem; font-weight:800; }
.reader-body { --reader-scale:1; overflow:auto; padding:28px; background:linear-gradient(180deg,#fffdf8,#fbfaf5); }
.reader-loading, .reader-error { text-align:center; padding:48px 20px; color:var(--muted); }
.reader-error h3 { color:var(--green); font-size:2rem; }
.reader-surah { max-width:820px; margin:0 auto 28px; }
.reader-surah h3 { text-align:center; color:var(--green); font-size:clamp(2rem,4vw,3rem); margin:0 0 18px; }
.ayah-card { padding:22px 0; border-bottom:1px solid var(--line); }
.ayah-top { display:flex; justify-content:center; margin-bottom:8px; }
.ayah-number { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#eef4e9; color:var(--green); border:1px solid #dfe9d8; font-weight:900; font-size:.9rem; }
.arabic-ayah { font-size:calc(2rem * var(--reader-scale)); line-height:2.25; margin:0; text-align:right; color:#1f302b; font-family:"Traditional Arabic","Amiri","Scheherazade New",serif; }
.english-ayah { font-size:calc(1.02rem * var(--reader-scale)); line-height:1.85; color:var(--muted); max-width:720px; margin:14px 0 0 auto; }
.reader-body.arabic-only .english-ayah { display:none; }
.reader-footer { padding:18px 28px; border-top:1px solid var(--line); background:#fffdf8; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.reader-footer .reader-link, .reader-footer .reader-complete { width:auto; min-width:220px; margin:0; }
@media (max-width:760px){
  .reader-backdrop { padding:0; }
  .reader-shell { width:100%; height:100vh; max-height:none; border-radius:0; border:0; }
  .reader-header { padding:18px 18px 14px; }
  .reader-toolbar { padding:12px 16px; flex-direction:column; align-items:stretch; }
  .toggle-group { width:100%; }
  .toggle-btn { flex:1; padding:0 10px; font-size:.9rem; }
  .font-controls { justify-content:center; }
  .reader-body { padding:20px 18px; }
  .arabic-ayah { font-size:calc(1.65rem * var(--reader-scale)); line-height:2.15; }
  .reader-footer { padding:14px 16px; flex-direction:column; }
  .reader-footer .reader-link, .reader-footer .reader-complete { width:100%; }
  .reading-actions .primary-btn, .reading-actions .inline-link { width:100%; }
}

/* v0.8 reading experience */
body.reading-mode-open { overflow: hidden; }
button, .primary-btn, .complete-btn, .gold-btn, .soft-btn, .ghost-btn, .ghost-outline, .nav-item, .soft-link-btn, .circle-btn, .toggle-btn {
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active, .primary-btn:active, .complete-btn:active, .gold-btn:active, .soft-btn:active, .ghost-btn:active, .ghost-outline:active, .nav-item:active, .soft-link-btn:active, .circle-btn:active, .toggle-btn:active {
  transform: scale(.975);
}
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(200,148,40,.45); outline-offset: 3px; }
.completion-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.compact-soft { width:auto; min-width:160px; margin-top:0; border:0; }

/* Editable reading-cycle rows */
.reading-row { display:flex; align-items:stretch; gap:10px; width:100%; border:1px solid var(--line); background:rgba(255,253,248,.82); border-radius:16px; margin:10px 0; box-shadow:0 8px 20px rgba(37,30,18,.045); overflow:hidden; }
.reading-row.completed { background:linear-gradient(90deg,rgba(232,241,223,.95),rgba(255,253,248,.9)); }
.reading-check-wrap { width:58px; display:grid; place-items:center; border-right:1px solid var(--line); cursor:pointer; background:#fbfaf5; }
.reading-check-input { position:absolute; opacity:0; pointer-events:none; }
.custom-check { width:32px; height:32px; border-radius:999px; display:grid; place-items:center; border:1px solid #dfe9d8; background:#fffdf8; color:var(--green); font-weight:900; }
.reading-row.completed .custom-check { background:var(--green); color:white; border-color:var(--green); }
.reading-row-main { flex:1; display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:center; text-align:left; border:0; background:transparent; padding:15px 16px 15px 0; color:var(--ink); }
.reading-row-main:hover strong { color:var(--green); }
.reading-row-main strong { display:block; font-size:1rem; }
.reading-row-main small { display:block; color:var(--muted); margin-top:4px; line-height:1.45; }
.reading-num { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:#eef4e9; color:var(--green); font-weight:900; }

/* Reading Mode replaces contained modal */
.reader-mode { position:fixed; inset:0; z-index:40; display:grid; grid-template-rows:auto auto 1fr auto; background:linear-gradient(180deg,#fffaf0,#fbf7ec 52%,#f8f4e9); color:#17231f; }
.reader-mode-header { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:20px clamp(16px,4vw,44px); border-bottom:1px solid var(--line); background:rgba(255,250,240,.94); backdrop-filter:blur(14px); }
.exit-reader-btn { border:1px solid var(--line); background:#fffdf8; color:var(--green); border-radius:999px; min-height:46px; padding:0 18px; font-weight:900; box-shadow:0 8px 22px rgba(37,30,18,.055); }
.reader-title-block { text-align:center; }
.reader-title-block h2 { font-size:clamp(2.05rem,4vw,3.6rem); color:var(--green); }
.reader-mode-toolbar { padding:12px clamp(16px,4vw,44px); }
.reader-source-note { color:var(--muted); font-size:.86rem; text-align:center; line-height:1.35; }
.reader-mode-body { --reader-scale:1; overflow:auto; padding:clamp(20px,4vw,46px); background:transparent; scroll-behavior:smooth; }
.reader-mode-body .reader-surah { max-width:860px; }
.reader-mode-body .ayah-card { padding:28px 0; }
.reader-mode-body .arabic-ayah { color:#17231f; }
.reader-mode-footer { padding:16px clamp(16px,4vw,44px); background:rgba(255,250,240,.95); backdrop-filter:blur(14px); }
.reader-mode-footer .compact-soft { min-width:190px; }
.reader-mode-footer .reader-complete { min-width:220px; }
@media (max-width:760px){
  .reader-mode-header { grid-template-columns:1fr; text-align:center; gap:12px; padding:14px 14px 12px; }
  .exit-reader-btn, .reader-mode-header .reader-link { width:100%; }
  .reader-mode-toolbar { padding:12px 14px; }
  .reader-source-note { order:3; }
  .reader-mode-footer { flex-direction:column; padding:12px 14px; }
  .reader-mode-footer .compact-soft, .reader-mode-footer .reader-complete { width:100%; }
  .reading-row-main { grid-template-columns:34px 1fr; padding-right:12px; }
  .reading-check-wrap { width:50px; }
}

/* v0.8.1 Reading Mode visual refresh */
.reader-mode {
  grid-template-rows: auto auto auto 1fr auto;
  background:#ffffff;
  color:#17231f;
}
.reader-mode-header {
  position:relative;
  grid-template-columns: minmax(190px, 260px) 1fr minmax(220px, 340px);
  padding:18px clamp(18px,3vw,46px) 20px;
  min-height:168px;
  border-bottom:1px solid #dfe6db;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.68), rgba(237,246,232,.88) 68%, rgba(224,238,218,.86)),
    linear-gradient(135deg,#eaf4e6,#f8fbf5);
  overflow:hidden;
}
.reader-mode-header::before,
.reader-mode-header::after {
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:190px;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(30deg, transparent 46%, #0e5947 47%, transparent 49%),
    linear-gradient(150deg, transparent 46%, #0e5947 47%, transparent 49%);
  background-size:34px 34px;
}
.reader-mode-header::before { left:0; }
.reader-mode-header::after { right:0; transform:scaleX(-1); }
.reader-title-block { position:relative; z-index:1; text-align:center; align-self:center; }
.reader-eyebrow {
  margin:0 0 4px;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--green);
  font-weight:900;
  font-size:.82rem;
}
.reader-title-block h2 {
  color:var(--green);
  font-size:clamp(3rem,5.5vw,5rem);
  line-height:.9;
  margin:0 0 12px;
  letter-spacing:.01em;
}
.reader-title-block .subtle { font-size:1.05rem; color:#4f5d58; }
.exit-reader-btn {
  position:relative; z-index:1;
  justify-self:start;
  align-self:center;
  border-radius:10px;
  min-height:64px;
  padding:0 24px;
  background:white;
  border:1px solid #cfdacf;
  color:var(--green);
  box-shadow:0 10px 26px rgba(37,30,18,.08);
}
.reader-quran-btn {
  position:relative; z-index:1;
  justify-self:end;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  min-width:280px;
  padding:0 28px;
  border-radius:10px;
  border:0;
  text-decoration:none;
  color:white;
  font-weight:900;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  box-shadow:0 12px 24px rgba(14,89,71,.22);
}
.reader-nav-row {
  min-height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:0 clamp(18px,3vw,46px);
  border-bottom:1px solid #e1e4df;
  background:white;
}
.reader-nav-btn {
  border:0;
  background:transparent;
  color:var(--green);
  font-weight:900;
  font-size:1rem;
  padding:12px 8px;
}
.reader-nav-btn:first-child { justify-self:start; }
.reader-nav-btn:last-child { justify-self:end; }
.reader-nav-btn:disabled { opacity:.35; cursor:not-allowed; }
.reader-position-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 24px;
  border-radius:999px;
  color:var(--green);
  background:linear-gradient(180deg,#fff,#f7f9f5);
  border:1px solid #dfe4dd;
  box-shadow:0 4px 12px rgba(37,30,18,.04);
  font-weight:900;
}
.reader-mode-toolbar {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  min-height:72px;
  padding:10px clamp(18px,3vw,46px);
  border-bottom:1px solid #e1e4df;
  background:#fff;
}
.reader-mode-toolbar .toggle-group {
  justify-self:start;
  background:#fff;
  border-color:#dfe4dd;
}
.reader-mode-toolbar .reader-source-note {
  justify-self:center;
  font-size:1rem;
  color:#4f5d58;
}
.reader-mode-toolbar .font-controls { justify-self:end; }
.reader-mode-toolbar .small-circle {
  background:white;
  color:var(--green);
  border-color:#dfe4dd;
  font-size:1rem;
}
.reader-mode-body {
  background:#fff;
  padding:clamp(24px,4vw,54px) clamp(18px,4vw,64px);
}
.reader-mode-body .reader-surah { max-width:980px; }
.reader-mode-body .reader-surah h3 {
  color:var(--green);
  font-size:clamp(2rem,3.5vw,3.25rem);
  margin-bottom:26px;
}
.reader-mode-body .ayah-card {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px, 430px);
  column-gap:58px;
  row-gap:16px;
  align-items:center;
  padding:32px 0 36px;
  border-bottom:1px solid #dfe4dd;
}
.reader-mode-body .ayah-card::after {
  content:"✦";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  color:#7ca883;
  font-size:.75rem;
  background:#fff;
  padding:0 8px;
}
.reader-mode-body .ayah-top {
  grid-column:1 / -1;
  margin:0 0 2px;
}
.reader-mode-body .ayah-number {
  width:34px;
  height:34px;
  background:#f2f7ee;
  color:var(--green);
  border-color:#d9e6d8;
}
.reader-mode-body .arabic-ayah {
  grid-column:2;
  grid-row:2;
  text-align:right;
  font-size:calc(2.25rem * var(--reader-scale));
  line-height:2.15;
  color:#0d1513;
}
.reader-mode-body .english-ayah {
  grid-column:1;
  grid-row:2;
  max-width:none;
  margin:0;
  color:#44514d;
  font-size:calc(1.08rem * var(--reader-scale));
  line-height:1.7;
}
.reader-mode-body.arabic-only .ayah-card { grid-template-columns:1fr; }
.reader-mode-body.arabic-only .arabic-ayah { grid-column:1; }
.reader-mode-footer {
  display:grid;
  grid-template-columns:auto minmax(280px, 1fr) auto;
  gap:24px;
  align-items:center;
  padding:18px clamp(18px,3vw,46px);
  border-top:1px solid #d8e1d5;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.75), rgba(237,246,232,.88)),
    linear-gradient(135deg,#edf6e9,#f8fbf5);
  box-shadow:0 -8px 28px rgba(37,30,18,.06);
}
.reader-footer-left,
.reader-footer-right { display:flex; align-items:center; gap:16px; }
.reader-white-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:58px;
  min-width:150px;
  padding:0 22px;
  border-radius:10px;
  border:1px solid #d5dfd4;
  color:var(--green);
  background:white;
  font-weight:900;
  box-shadow:0 8px 22px rgba(37,30,18,.045);
}
.reader-progress-wrap {
  display:grid;
  grid-template-columns:auto minmax(100px, 1fr) auto;
  gap:16px;
  align-items:center;
  color:var(--green);
  font-weight:900;
}
.reader-progress-track {
  height:8px;
  background:#fff;
  border:1px solid #d5dfd4;
  border-radius:999px;
  overflow:hidden;
}
.reader-progress-track span {
  display:block;
  width:0%;
  height:100%;
  background:var(--green);
  border-radius:inherit;
  transition:width .15s ease;
}
.reader-mode-footer .reader-complete {
  min-width:220px;
  min-height:58px;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  color:#fff;
  border:0;
  box-shadow:0 10px 26px rgba(14,89,71,.22);
}
.reader-mode-footer .reader-complete span { color:inherit; }
@media (max-width:900px){
  .reader-mode-header { grid-template-columns:1fr; text-align:center; gap:12px; min-height:auto; padding:16px; }
  .exit-reader-btn, .reader-quran-btn { width:100%; justify-self:stretch; min-width:0; }
  .reader-title-block h2 { font-size:clamp(2.7rem,12vw,4rem); }
  .reader-nav-row { grid-template-columns:1fr; justify-items:center; padding:12px 16px; }
  .reader-nav-btn:first-child, .reader-nav-btn:last-child { justify-self:center; }
  .reader-mode-toolbar { grid-template-columns:1fr; justify-items:center; padding:12px 16px; }
  .reader-mode-toolbar .toggle-group, .reader-mode-toolbar .reader-source-note, .reader-mode-toolbar .font-controls { justify-self:center; }
  .reader-mode-body { padding:22px 18px; }
  .reader-mode-body .ayah-card { grid-template-columns:1fr; padding:28px 0 32px; }
  .reader-mode-body .arabic-ayah, .reader-mode-body .english-ayah { grid-column:1; grid-row:auto; }
  .reader-mode-body .arabic-ayah { text-align:right; font-size:calc(1.8rem * var(--reader-scale)); }
  .reader-mode-footer { grid-template-columns:1fr; gap:12px; padding:14px 16px; }
  .reader-footer-left, .reader-footer-right { width:100%; justify-content:center; flex-wrap:wrap; }
  .reader-white-btn, .reader-mode-footer .reader-complete { flex:1; min-width:min(180px,100%); }
  .reader-progress-wrap { width:100%; grid-template-columns:1fr; text-align:center; }
}

/* v0.8.2 Reader appearance refinements */
.reader-nav-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 16px;
  border-radius:999px;
  transition:background .18s ease, transform .18s ease, color .18s ease;
}
.reader-nav-btn:not(:disabled):hover { background:#eef6ea; }
.reader-nav-btn:first-child:not(:disabled):hover { transform:translateX(-3px); }
.reader-nav-btn:last-child:not(:disabled):hover { transform:translateX(3px); }
.reader-nav-btn::first-letter { font-size:1.4rem; }
.reader-mode-toolbar .settings-circle { margin-left:8px; }
.reader-mode-body .reader-surah { max-width:980px; transition:max-width .2s ease; }
.reader-mode-body.reader-wide .reader-surah { max-width:1180px; }
.reader-mode-body .arabic-ayah { font-size:calc(2.25rem * var(--reader-scale) * var(--arabic-scale, .9)); }
.reader-mode-body .english-ayah {
  font-family:"Lora", Georgia, "Times New Roman", serif;
  color:#3f4d49;
  font-size:calc(1.08rem * var(--reader-scale) * var(--english-scale, .92));
  line-height:1.78;
  letter-spacing:.005em;
}
.reader-appearance-panel {
  position:fixed;
  right:clamp(16px,3vw,44px);
  top:128px;
  bottom:92px;
  width:min(390px,calc(100vw - 32px));
  z-index:55;
  overflow:auto;
  background:rgba(255,255,255,.97);
  border:1px solid #dfe4dd;
  border-radius:18px;
  box-shadow:0 28px 70px rgba(18,33,28,.18);
  backdrop-filter:blur(16px);
}
.appearance-panel-head {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid #e1e4df;
  background:rgba(255,255,255,.96);
}
.appearance-panel-head h3 { font-size:1.65rem; color:#17231f; }
.appearance-section { padding:18px 20px; border-bottom:1px solid #edf0ec; }
.appearance-section h4 { margin:0 0 12px; font-size:1rem; color:#17231f; }
.segmented-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.segmented-options.width-options { grid-template-columns:repeat(2,1fr); max-width:210px; }
.segmented-options button {
  min-height:42px;
  border:1px solid #dfe4dd;
  border-radius:11px;
  background:white;
  color:#17231f;
  font-weight:800;
}
.segmented-options button.active {
  background:linear-gradient(135deg,var(--green),var(--green-2));
  color:white;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(14,89,71,.17);
}
.appearance-sample { margin:14px 0 0; padding-top:12px; border-top:1px solid #edf0ec; color:#33413d; }
.arabic-sample { font-family:"Traditional Arabic","Amiri","Scheherazade New",serif; font-size:1.6rem; text-align:right; line-height:1.8; }
.english-sample { font-family:"Lora", Georgia, serif; line-height:1.65; }
.checkline { display:flex; align-items:center; gap:10px; font-weight:750; margin-bottom:10px; }
.checkline input { width:20px; height:20px; accent-color:var(--green); }
.select-like { border:1px solid #dfe4dd; border-radius:10px; padding:10px 12px; color:#17231f; background:#fff; }
.theme-swatches { display:flex; gap:12px; }
.theme-swatch { width:76px; height:52px; border-radius:10px; border:1px solid #dfe4dd; color:white; font-weight:900; }
.theme-swatch.active { outline:3px solid rgba(14,89,71,.22); border-color:var(--green); }
.theme-green { background:linear-gradient(135deg,#edf6e9,#ffffff); color:var(--green); }
.theme-cream { background:linear-gradient(135deg,#f7efe4,#fffaf2); color:var(--green); }
.theme-dark { background:linear-gradient(135deg,#15231f,#24352f); }
.reset-reader-btn { width:calc(100% - 40px); margin:20px; }
@media (max-width:900px){
  .reader-appearance-panel { inset:0; width:auto; border-radius:0; }
  .segmented-options { grid-template-columns:1fr; }
  .reader-mode-toolbar .font-controls { display:flex; flex-wrap:wrap; justify-content:center; }
}

/* v0.8.3 Reader preferences cleanup + theme fixes + crisper Arabic */
.reader-appearance-panel .appearance-sample,
.reader-appearance-panel .select-like { display:none !important; }
.appearance-panel-head h3 { font-family:"Cormorant Garamond", Georgia, serif; font-weight:700; }
.translation-note {
  margin:8px 0 0;
  color:#52615c;
  font-size:.92rem;
  line-height:1.5;
}
.translation-note strong { color:#17231f; }

/* Arabic crispness: prefer Quran-focused web fonts and avoid browser faux rendering */
.reader-mode-body .arabic-ayah,
.arabic-ayah {
  font-family:"Amiri Quran", "Scheherazade New", "Traditional Arabic", "Times New Roman", serif !important;
  font-weight:400 !important;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:0;
  color:#07120f !important;
}
.reader-mode-body .ayah-card { isolation:isolate; }

/* working reader themes */
.reader-mode.reader-theme-green {
  --reader-head-bg: radial-gradient(circle at center, rgba(255,255,255,.76), rgba(237,246,232,.92)), linear-gradient(135deg,#edf6e9,#f8fbf5);
  --reader-body-bg:#ffffff;
  --reader-foot-bg: radial-gradient(circle at center, rgba(255,255,255,.82), rgba(237,246,232,.94)), linear-gradient(135deg,#edf6e9,#f8fbf5);
  --reader-line:#d8e1d5;
  --reader-text:#17231f;
  --reader-muted:#596863;
  --reader-medallion:#f2f7ee;
}
.reader-mode.reader-theme-cream {
  --reader-head-bg: radial-gradient(circle at center, rgba(255,255,255,.78), rgba(248,240,226,.92)), linear-gradient(135deg,#f7efe4,#fffaf2);
  --reader-body-bg:#fffdf8;
  --reader-foot-bg: radial-gradient(circle at center, rgba(255,255,255,.82), rgba(248,240,226,.94)), linear-gradient(135deg,#f7efe4,#fffaf2);
  --reader-line:#e6d9c6;
  --reader-text:#2c241c;
  --reader-muted:#665b51;
  --reader-medallion:#fbf1df;
}
.reader-mode.reader-theme-dark {
  --reader-head-bg: linear-gradient(135deg,#10201b,#1d302a);
  --reader-body-bg:#111b18;
  --reader-foot-bg: linear-gradient(135deg,#10201b,#1d302a);
  --reader-line:#30433d;
  --reader-text:#f3f7f2;
  --reader-muted:#c6d0cb;
  --reader-medallion:#1f352d;
}
.reader-mode.reader-theme-green,
.reader-mode.reader-theme-cream,
.reader-mode.reader-theme-dark { background:var(--reader-body-bg) !important; color:var(--reader-text); }
.reader-mode.reader-theme-green .reader-mode-header,
.reader-mode.reader-theme-cream .reader-mode-header,
.reader-mode.reader-theme-dark .reader-mode-header { background:var(--reader-head-bg) !important; border-bottom-color:var(--reader-line); }
.reader-mode.reader-theme-green .reader-mode-footer,
.reader-mode.reader-theme-cream .reader-mode-footer,
.reader-mode.reader-theme-dark .reader-mode-footer { background:var(--reader-foot-bg) !important; border-top-color:var(--reader-line); }
.reader-mode.reader-theme-green .reader-mode-body,
.reader-mode.reader-theme-cream .reader-mode-body,
.reader-mode.reader-theme-dark .reader-mode-body { background:var(--reader-body-bg) !important; }
.reader-mode.reader-theme-green .reader-nav-row,
.reader-mode.reader-theme-cream .reader-nav-row,
.reader-mode.reader-theme-dark .reader-nav-row,
.reader-mode.reader-theme-green .reader-mode-toolbar,
.reader-mode.reader-theme-cream .reader-mode-toolbar,
.reader-mode.reader-theme-dark .reader-mode-toolbar { background:var(--reader-body-bg) !important; border-color:var(--reader-line); }
.reader-mode.reader-theme-green .reader-title-block h2,
.reader-mode.reader-theme-cream .reader-title-block h2 { color:var(--green); }
.reader-mode.reader-theme-dark .reader-title-block h2,
.reader-mode.reader-theme-dark .reader-eyebrow,
.reader-mode.reader-theme-dark .reader-nav-btn,
.reader-mode.reader-theme-dark .reader-position-pill,
.reader-mode.reader-theme-dark .reader-source-note,
.reader-mode.reader-theme-dark .reader-progress-wrap { color:#e9f2ec; }
.reader-mode.reader-theme-dark .reader-mode-body .arabic-ayah { color:#fbfffb !important; }
.reader-mode.reader-theme-dark .reader-mode-body .english-ayah { color:#d8e0dc; }
.reader-mode.reader-theme-dark .ayah-card { border-bottom-color:var(--reader-line); }
.reader-mode.reader-theme-dark .reader-mode-body .ayah-card::after { background:var(--reader-body-bg); color:#8eb69a; }
.reader-mode.reader-theme-dark .reader-mode-body .ayah-number { background:var(--reader-medallion); border-color:#486257; color:#e9f2ec; }
.reader-mode.reader-theme-dark .reader-white-btn,
.reader-mode.reader-theme-dark .circle-btn,
.reader-mode.reader-theme-dark .toggle-btn,
.reader-mode.reader-theme-dark .reader-position-pill { background:#16251f; border-color:#3a5147; color:#e9f2ec; }
.reader-mode.reader-theme-dark .toggle-btn.active { background:#edf6e9; color:#0e5947; }
.reader-mode.reader-theme-dark .reader-progress-track { background:#16251f; border-color:#3a5147; }
.reader-mode.reader-theme-dark .reader-appearance-panel,
.reader-mode.reader-theme-dark .appearance-panel-head { background:#15231f; border-color:#3a5147; color:#eef5ef; }
.reader-mode.reader-theme-dark .appearance-panel-head h3,
.reader-mode.reader-theme-dark .appearance-section h4,
.reader-mode.reader-theme-dark .translation-note strong { color:#eef5ef; }
.reader-mode.reader-theme-dark .translation-note { color:#cdd8d2; }
.reader-mode.reader-theme-dark .segmented-options button { background:#182923; border-color:#3a5147; color:#eef5ef; }

/* clearer theme swatches now that they work */
.theme-swatch { position:relative; font-size:1.15rem; }
.theme-swatch::after {
  content:attr(title);
  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  color:#66736f;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}
.appearance-section:has(.theme-swatches) { padding-bottom:38px; }

/* v0.8.4 Reading Mode polish: clearer arrows, floral dividers, refined about text */
.about-reading {
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
}
.about-reading #readingDescription {
  font-family: "Lora", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.9;
  color: #394844;
  max-width: 700px;
  margin: 0 auto 24px;
}
.about-reading .eyebrow {
  margin-bottom: 10px;
}
.about-reading .complete-btn {
  max-width: 620px;
}

.reader-nav-row {
  min-height: 82px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.reader-nav-btn {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--green);
  text-align: left;
  font-family: "Lora", Georgia, serif;
}
.reader-nav-next {
  grid-template-columns: 1fr auto;
  text-align: right;
}
.reader-nav-arrow {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f4f8ef, #eef4e9);
  border: 1px solid #d6e1d1;
  box-shadow: 0 8px 18px rgba(37,30,18,.055);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.reader-nav-copy strong {
  display:block;
  font-family: "Lora", Georgia, serif;
  font-size: 1.08rem;
  color: var(--green);
  line-height: 1.25;
}
.reader-nav-copy small {
  display:block;
  max-width: 230px;
  margin-top: 2px;
  color: #53625d;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-nav-btn:not(:disabled):hover { background: #f4f8ef; }
.reader-nav-prev:not(:disabled):hover .reader-nav-arrow { transform: translateX(-4px); }
.reader-nav-next:not(:disabled):hover .reader-nav-arrow { transform: translateX(4px); }
.reader-nav-btn:disabled .reader-nav-arrow,
.reader-nav-btn:disabled .reader-nav-copy { opacity: .45; }
.reader-position-pill {
  background: linear-gradient(180deg, #fffdf8, #f3f7ee);
  border-color: #d7e0d3;
  box-shadow: 0 8px 18px rgba(37,30,18,.05);
}

.reader-quran-btn,
.exit-reader-btn,
.reader-white-btn {
  letter-spacing: .01em;
}

.reader-mode-body .ayah-card {
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, transparent, rgba(124,168,131,.55), transparent) border-box;
  border-bottom-width: 1px;
}
.reader-mode-body .ayah-card::after {
  content: "✽";
  bottom: -15px;
  color: #7ca883;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 14px;
  background: var(--reader-body-bg, #fff);
  text-shadow: 0 0 0 #7ca883;
}
.reader-mode-body .ayah-number {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(37,30,18,.04), inset 0 0 0 2px rgba(255,255,255,.55);
}
.reader-mode-body .english-ayah {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  color: #34423e;
}
.reader-mode.reader-theme-cream .reader-mode-body .ayah-card {
  background:
    linear-gradient(var(--reader-body-bg), var(--reader-body-bg)) padding-box,
    linear-gradient(90deg, transparent, rgba(171,145,98,.45), transparent) border-box;
}
.reader-mode.reader-theme-dark .reader-mode-body .ayah-card {
  background:
    linear-gradient(var(--reader-body-bg), var(--reader-body-bg)) padding-box,
    linear-gradient(90deg, transparent, rgba(142,182,154,.42), transparent) border-box;
}
.reader-mode.reader-theme-dark .reader-nav-copy small { color:#c8d6d0; }
.reader-mode.reader-theme-dark .reader-nav-arrow { background:#172923; border-color:#3a5147; }
.reader-mode.reader-theme-dark .reader-nav-btn:not(:disabled):hover { background:#172923; }

@media (max-width:900px){
  .reader-nav-row { gap: 10px; }
  .reader-nav-btn { width: 100%; max-width: 520px; }
  .reader-nav-copy small { max-width: 340px; }
}

/* v0.8.5 Resume/start-over prompt for saved reading progress */
.resume-reading-card {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:70;
  width:min(560px, calc(100vw - 32px));
  background:rgba(255,255,255,.96);
  border:1px solid #d9e3d7;
  border-radius:20px;
  box-shadow:0 24px 80px rgba(21,44,35,.18);
  padding:24px;
  text-align:center;
  color:#17231f;
  backdrop-filter:blur(14px);
}
.resume-reading-card strong {
  display:block;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:1.65rem;
  color:var(--green);
  margin-bottom:6px;
}
.resume-reading-card p { margin:0; color:#4f5d58; line-height:1.55; }
.resume-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
}
.compact-reader-btn { min-height:48px; min-width:190px; }
.reader-mode.reader-theme-dark .resume-reading-card {
  background:rgba(21,35,31,.96);
  border-color:#3a5147;
  color:#eef5ef;
}
.reader-mode.reader-theme-dark .resume-reading-card p { color:#cdd8d2; }
@media (max-width:560px){
  .resume-actions { flex-direction:column; }
  .compact-reader-btn { width:100%; }
}


/* v0.8.6 reading position polish */
.reader-progress-wrap strong {
  min-width: 150px;
  text-align: right;
  font-size: .82rem;
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ayah-card.resume-highlight {
  background: linear-gradient(180deg, rgba(236,246,231,.85), rgba(255,255,255,.98)) !important;
  border-radius: 18px;
  transition: background 1.2s ease;
}
.reader-mode.reader-theme-cream .ayah-card.resume-highlight {
  background: linear-gradient(180deg, rgba(251,243,225,.95), rgba(255,252,245,.98)) !important;
}
.reader-mode.reader-theme-dark .ayah-card.resume-highlight {
  background: linear-gradient(180deg, rgba(32,58,49,.88), rgba(18,31,27,.98)) !important;
}
.reader-mode-body .ayah-card::after {
  filter: none;
  transform: translateX(-50%);
}
@media (max-width: 720px){
  .reader-progress-wrap strong { text-align:center; max-width: 100%; }
}


/* v0.8.7 clearer reading labels + surah numbers */
.jump-row {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}
.jump-row .num,
.reading-num {
  width: 58px;
  min-height: 48px;
  height: auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 4px;
  line-height: 1;
  text-align: center;
}
.jump-row .num small,
.reading-num small {
  display: block;
  color: var(--green);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}
.jump-row .num strong,
.reading-num strong {
  display: block;
  color: var(--green);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.05;
}
.reading-row-main {
  grid-template-columns: 64px minmax(0, 1fr);
}
.reading-row-main strong,
.jump-row strong,
#homePassageTitle,
#upNextTitle {
  overflow-wrap: anywhere;
}
@media (max-width:760px){
  .jump-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .jump-row > span:last-child {
    grid-column: 2;
    justify-self: start;
    font-size: .88rem;
    color: var(--muted);
  }
  .reading-row-main {
    grid-template-columns: 58px minmax(0, 1fr);
  }
}


/* v0.8.8 Basmalah display fix */
.reader-bismillah {
  margin: -10px auto 26px;
  text-align: center;
  color: var(--green);
  font-family: "Amiri Quran", "Scheherazade New", "Traditional Arabic", "Times New Roman", serif;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.9;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.reader-mode.reader-theme-dark .reader-bismillah {
  color: #fbfffb;
}
@media (max-width: 760px){
  .reader-bismillah {
    margin-top: -4px;
    margin-bottom: 20px;
    font-size: clamp(1.65rem, 8vw, 2.35rem);
  }
}