/* memoryQuran shared look: soft white ground, deep green ink, Nunito for UI, Scheherazade New for Arabic. Light theme by design. */
:root{
  color-scheme:light;
  --bg:#FAFCFB; --card:#FFFFFF; --soft:#EEF5F2; --fg:#2E4A44; --ink:#34544C; --muted:#7D8F8A; --line:#E2EBE8;
  --now:#169B6E; --now-soft:#E2F3EB; --wrong:#E07065; --wrong-soft:#FCEEEC;
  --f-ar:"Scheherazade New","Amiri","Traditional Arabic",serif;
  --f-ui:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-ui);font-size:16px;line-height:1.45;margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
.wrap{max-width:820px;margin:0 auto;padding-inline:16px;padding-block:0 40px}
.ar{font-family:var(--f-ar);direction:rtl}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.01em}
p{margin:0}

/* top bar */
.top{display:flex;align-items:center;gap:10px;height:52px;border-bottom:1px solid var(--line);margin-bottom:18px}
.brand{font-weight:800;font-size:1rem;text-decoration:none;white-space:nowrap}
.brand span{color:var(--now)}
.crumb{color:var(--muted);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb:hover,.brand:hover{color:var(--now)}
.top .sp{flex:1}
.icon-btn{all:unset;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--now)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed="false"]{color:var(--muted)}
.icon-btn:focus-visible{outline:2px solid var(--now)}

/* section heading */
.head{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.head h1{font-size:clamp(1.5rem,5vw,2rem)}
.head p{color:var(--muted);max-width:56ch}

/* buttons */
.btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:22px;border:1px solid var(--line);background:var(--card);font-weight:700}
.btn.go{background:var(--now);border-color:var(--now);color:#fff}
.btn:focus-visible{outline:3px solid var(--now);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* segmented tabs */
.seg{display:inline-flex;background:var(--soft);border-radius:12px;padding:4px;gap:4px;margin-bottom:16px}
.seg button{all:unset;cursor:pointer;padding:8px 14px;border-radius:9px;font-weight:700;font-size:.92rem;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(20,60,50,.12)}
.seg button:focus-visible{outline:2px solid var(--now)}

/* pictures */
.pic svg{width:100%;height:100%;fill:var(--tint,#EAF4F0);stroke:var(--ink-c,#2F6B5A);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--fg);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;font-size:.92rem;max-width:calc(100% - 32px);text-align:center;z-index:20}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}