:root{--forest:#0e3934;--forest2:#155047;--gold:#c2a36b;--ivory:#f9f7f0;--text:#173832;--muted:#72837b;--line:#e2e7e0;--soft:#eef5ee;--white:#fff;--radius:23px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--text);font-family:'IBM Plex Sans Arabic','Tahoma',Arial,sans-serif;font-size:16px;line-height:1.65}
button,select,input{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.quran-app{max-width:1120px;padding:30px 20px 40px;margin:auto}
.app-heading{display:flex;gap:28px;align-items:center;justify-content:space-between;min-height:190px;border-radius:29px;background:linear-gradient(120deg,#0b2c29 0%,#124940 65%,#206257 100%);padding:34px 44px;color:var(--white);position:relative;overflow:hidden;isolation:isolate}
.app-heading:before{content:"";position:absolute;inset:-30%;z-index:-1;opacity:.12;background:repeating-radial-gradient(circle at 70% 45%,transparent 0 34px,#c7ab6f 35px 36px,transparent 37px 67px)}
.eyebrow{font-size:13px;color:#e0d2ae;font-weight:600;letter-spacing:.5px}.indicator{display:inline-block;width:8px;height:8px;margin-inline-end:8px;background:#d6b777;border-radius:100%}
.app-heading h1{font-family:'Amiri',Georgia,serif;font-size:clamp(37px,4vw,53px);line-height:1.2;margin:8px 0 10px;font-weight:700}
.app-heading p{margin:0;color:#d6e4db;max-width:590px;font-size:15px}
.heading-symbol{border:1px solid #a5b8a55c;border-radius:50%;width:125px;min-width:125px;height:125px;display:grid;place-items:center;color:#d2b780;font-family:'Amiri',serif;font-size:90px;transform:rotate(0deg)}
.message{background:#fff4d7;border:1px solid #e5c77e;border-radius:12px;margin-top:14px;padding:12px 18px;color:#664f1c;font-weight:500}
.player{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px 24px;box-shadow:0 10px 48px #133d330b;margin-top:22px}
.player-main{display:flex;align-items:center;gap:30px}
.art{width:154px;height:154px;flex:0 0 154px;padding:9px;background:linear-gradient(135deg,#0f4640,#173e38);border-radius:21px;box-shadow:0 10px 29px #103b3426}
.art-inner{width:100%;height:100%;border:1px solid #baa36c80;border-radius:14px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,transparent 0 19px,#ffffff08 20px 21px);font-family:'Amiri',serif;color:#d0b476;font-size:50px}
.surah-copy .subheading{font-size:13px;color:#809188;font-weight:600}.surah-copy h2{font-family:'Amiri',Georgia,serif;font-weight:700;font-size:clamp(36px,4vw,49px);line-height:1.1;margin:6px 0 5px}.surah-copy p{margin:0;color:var(--muted);font-size:15px}
.playing-state{display:inline-flex;border-radius:40px;background:var(--soft);padding:3px 12px;color:#386454;font-size:12px;font-weight:700;margin-top:14px}
.progress-area{margin-top:28px}.progress-area input[type=range]{width:100%;height:7px;accent-color:var(--forest);cursor:pointer}.progress-area input[type=range]:disabled{opacity:.4;cursor:not-allowed}.time-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.primary-controls{display:flex;gap:13px;align-items:center;justify-content:center;margin-top:8px}
.icon-btn{width:45px;height:45px;display:grid;place-items:center;border:0;border-radius:50%;background:#eff4f0;color:var(--forest);font-weight:700}
.icon-btn.small{width:42px;height:42px;font-size:13px}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.play-button{width:76px;height:76px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:var(--white);box-shadow:0 6px 24px #0a403044}
.play-button svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.play-button #playGlyph{fill:currentColor;stroke:none}
.play-button svg[hidden]{display:none}
.secondary-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.inline-control{display:flex;align-items:center;gap:9px;color:#51665c;font-size:13px;font-weight:600}
.inline-control select{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--forest);padding:6px 10px;direction:ltr;font-weight:700}
.inline-control input{accent-color:var(--forest);width:92px}
.pill-button{background:#f0f5f0;color:#3a6658;border:1px solid #dce9dd;border-radius:40px;padding:7px 17px;font-size:13px;font-weight:600;min-height:38px}
.pill-button[aria-pressed=true]{background:#0f4a3f;color:#fff}
.selectors{margin-top:18px;padding:26px 30px 25px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.fields-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.fields-head h2{font-size:18px;font-weight:700;margin:0}.text-button{border:0;background:none;color:#237465;font-size:13px;font-weight:600;white-space:nowrap}
.fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:13px;color:#476158}
.field select,.field input{width:100%;background:#fbfcfa;border:1px solid #d7e1d9;border-radius:12px;padding:13px 14px;color:var(--text);min-height:52px;outline-offset:1px;font-size:14px}
.field input::placeholder{color:#9caea3}
.hint{font-size:12px;color:#789086;margin:14px 0 0}
.continue-card{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:18px;border-radius:18px;padding:20px 28px;background:#edf3e9;border:1px solid #dce7d3}
.continue-card strong{font-size:15px}.continue-card p{font-size:13px;color:#728273;margin:3px 0 0}.resume-btn{background:var(--forest);border:0;color:white;border-radius:12px;padding:13px 20px;font-weight:600;white-space:nowrap;min-height:48px}
footer{font-size:12px;color:#7a8881;line-height:1.8;text-align:center;margin-top:22px}footer a{color:#226959}
button:hover{filter:brightness(.97)}
@media (max-width:700px){.quran-app{padding:12px 11px 28px}.app-heading{border-radius:20px;padding:26px 23px;min-height:164px}.app-heading p{font-size:13px}.heading-symbol{display:none}.app-heading h1{font-size:35px}.player{padding:23px 18px 18px;margin-top:13px;border-radius:19px}.player-main{gap:16px}.art{width:93px;height:93px;flex-basis:93px;padding:5px;border-radius:16px}.art-inner{font-size:28px}.surah-copy h2{font-size:36px}.surah-copy p{font-size:13px}.playing-state{margin-top:8px}.progress-area{margin-top:23px}.primary-controls{gap:8px}.play-button{width:66px;height:66px}.icon-btn{width:42px;height:42px}.secondary-controls{gap:8px}.secondary-controls .volume{width:100%;justify-content:center}.fields-grid{grid-template-columns:1fr;gap:12px}.selectors{padding:21px 17px 20px;margin-top:13px}.continue-card{flex-direction:column;align-items:stretch;padding:20px;gap:13px}.resume-btn{width:100%}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}