:root {
  --bg:#f8f6ef; --ink:#233b32; --muted:#52665c; --purple:#305c49; --line:#e5e6d9;
  --lavender:#e7eee4; --mint:#e1f0e4; --peach:#faead8; --yellow:#f6edcf; --pink:#f3e8e8; --blue:#e6eeeb;
}
:focus-visible{outline-color:#a37732}
.header{background:#fefdf8}.header-inner{min-height:81px}
.header nav a[aria-current=page],.location[aria-current=page]{background:#e9efe5}
.hero{background:#eee7d7;border:1px solid #e5dfd1;min-height:405px}
.hero::before{inset:0 0 0 28%;background-position:center 58%}
.hero::after{background:linear-gradient(90deg,#eee7d7 29%,#eee7d7 36%,#eee7d738 56%,#eee7d700 69%)}
.hero h1,.page-head h1{font-family:Georgia,serif;font-weight:600;letter-spacing:-.055em}
.hero h1{font-size:clamp(45px,6vw,72px);line-height:.99}
.hero p{color:#40574b}
.hero .hero-kicker{display:flex;align-items:center;gap:6px;color:#345b49;margin:0 0 14px;font-size:13px;font-weight:900}
.hero-kicker svg{width:19px;height:19px}
.primary{box-shadow:0 4px 12px #23473522}.primary:hover{background:#204633}
.secondary,.secondary:hover:not(:disabled){background:#eaf0e7}
.panel,.feature,.surah{box-shadow:0 4px 15px #273d2907}
.feature:hover{border-color:#b9cdbf;box-shadow:0 6px 19px #273d2911}
.time-cell,.rakat-list div{background:#f4f5ee}
.time-cell[data-active=true]{border-color:#bfd4bd;background:#e7f1e5}
progress,progress::-webkit-progress-bar{background:#e7eee4}
.step-speech,.arabic,.counter select{background:#f0f3e9;color:#315845}
.lesson{grid-template-columns:1.2fr 1fr;gap:28px}
.drawing{margin:0;background:#eee9df;display:block}
.drawing img{display:block;width:100%;height:auto;aspect-ratio:1.47;object-fit:cover}
.drawing figcaption{min-height:31px;padding:7px 12px;font-size:12px;color:#45564f;background:#f3efe5}
.drawing figcaption a{text-decoration:underline;text-underline-offset:2px}
.guide-index{margin-top:16px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.guide-index summary{min-height:28px;cursor:pointer;font-weight:900;color:var(--purple)}
.guide-index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px;margin:6px 0 2px;padding-left:24px}
.guide-index button{background:transparent;border:0;text-align:left;padding:6px;min-height:37px;border-radius:7px;font-weight:700}
.guide-index button:hover,.guide-index button[aria-current=step]{background:var(--lavender);color:var(--purple)}
.footer nav{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:14px;font-weight:800}.footer nav a:hover{text-decoration:underline}
@media(max-width:850px){.hero{min-height:360px}}
@media(max-width:570px){
  .hero{min-height:448px}.hero::before{inset:37% 0 0;background-position:73% 63%}
  .hero::after{background:linear-gradient(180deg,#eee7d7 32%,#eee7d7 43%,#eee7d700 71%)}
  .hero h1{font-size:43px}.hero .hero-kicker{margin-bottom:8px}
  .lesson{grid-template-columns:1fr;gap:12px}.guide-index ol{grid-template-columns:1fr}
  .footer{align-items:flex-start;padding-block:12px}.footer nav{gap:5px;font-size:12px;flex-direction:column}
}
.drawing img{aspect-ratio:1.23;max-height:500px;object-fit:contain}
.drawing img[src="prayer-photo.webp"]{object-fit:cover}
.guide-options{margin-bottom:16px}
.guide-selectors{display:grid;grid-template-columns:1fr 1.6fr;gap:12px}
.guide-selectors label{display:grid;gap:4px;font-weight:900}
.guide-selectors select{width:100%;min-height:47px;border:1px solid var(--line);border-radius:11px;background:#f4f5ef;padding:6px 9px}
.guide-options fieldset{display:flex;flex-wrap:wrap;gap:6px 16px;border:0;margin:13px 0 0;padding:0}
.guide-options legend{font-weight:900;margin-bottom:4px}
.guide-options fieldset label{display:flex;align-items:center;gap:6px;min-height:36px;font-weight:700;cursor:pointer}
.guide-options input{accent-color:var(--purple);width:17px;height:17px}
#prayer-summary,.audio-status{color:var(--muted);font-size:13px}
#figure-tip{margin-top:8px;font-weight:800}
.narration{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.call-card audio{max-width:100%;vertical-align:middle}
.call-card summary{font-weight:900;cursor:pointer;padding:9px 0}
.call-player{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0}
.call-player small,.call-lines small{color:var(--muted);font-weight:800}
.call-lines{padding-left:24px;margin-top:0}
.call-lines li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:10px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
.call-lines span[lang=ar]{font-size:26px}
.call-lines p{margin:0}
#prayer-duas{margin-top:10px}
@media(max-width:570px){.header nav a{font-size:clamp(9px,2.9vw,12px)}.call-lines li{grid-template-columns:1fr auto}.call-lines span[lang=ar]{grid-column:1/-1}.narration button{font-size:13px}}
.memory-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.memory-controls label{display:grid;font-weight:900;gap:4px;min-width:130px}
.memory-controls input,.memory-controls select,.memory-row select{font:inherit;max-width:100%;min-height:42px;border:1px solid var(--line);background:#f4f5ef;border-radius:9px;padding:5px 9px;color:var(--ink)}
.memory-row>span{flex:1;min-width:0}.memory-row strong{display:block}.memory-row small{font-size:12px;color:var(--muted)}
.study-card audio{display:block;max-width:100%;margin:11px 0 4px}
.study-card .muted+.plain{margin-left:10px}
.muezzin-items{margin-top:12px}
@media(max-width:570px){.memory-row select{font-size:12px}.memory-row{gap:5px}.memory-row .plain{font-size:12px}}
.header-actions{display:flex;align-items:center;gap:7px}
.header-actions button{min-height:42px;white-space:nowrap;font-size:13px;padding-inline:10px}
#install-help{width:min(460px,calc(100% - 32px));padding:22px;color:var(--ink)}
#install-help::backdrop{background:#1628208a}
#install-help p{margin-top:12px;line-height:1.6}
.close-install{float:right;min-height:37px}
.recordings audio{display:block;max-width:100%;margin-top:9px}
.recordings small{display:block;color:var(--muted)}
@media(max-width:570px){.header-actions{gap:4px}.header-actions button{font-size:10px;min-height:37px;padding-inline:5px}.header-actions .location{font-size:10px;padding-inline:5px}.header-actions .location svg{display:none}}
.recording-video{display:block;width:min(100%,580px);aspect-ratio:16/9;border:0;border-radius:12px;margin:12px 0}