*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#0b1420;--panel:#101d2a;--panel-soft:#132333;--green:#a9e7bb;--green-bright:#73d797;--text:#eff5f1;--muted:#a5b6bd;--line:rgba(187,220,199,.14)}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#23473b 0%,#12271f 31%,var(--bg) 72%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.finder-shell{width:min(100% - 36px,760px);margin:0 auto;padding:76px 0 30px}
.hero{text-align:center;padding:0 18px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(169,231,187,.2);border-radius:99px;background:rgba(13,35,27,.62);color:#c4e7ce;font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.eyebrow-mark{color:var(--green-bright);font-size:14px}
.hero h1{margin:22px 0 10px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,8vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1.05}
.hero>p{margin:0 auto;color:#bac8c9;font-size:16px;line-height:1.7}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;padding:15px 25px;border:1px solid #b5ebc2;border-radius:12px;background:linear-gradient(135deg,#c3efd0,#8bd9a0);box-shadow:0 8px 28px rgba(105,204,135,.18);color:#0c2416;font-size:16px;font-weight:750;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px rgba(105,204,135,.27)}
.btn:focus-visible,.verse-link:focus-visible{outline:3px solid #fff;outline-offset:4px}
.btn:disabled{opacity:.62;cursor:wait}
.status{min-height:24px;margin:15px auto 0!important;color:#9fb3b8!important;font-size:13px!important}
.stage{margin-top:34px;padding:23px 24px 19px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,rgba(19,37,49,.92),rgba(12,25,36,.94));box-shadow:0 22px 65px rgba(0,0,0,.18)}
.stage-label,.translation-label{color:#9cb9a8;font-size:10px;font-weight:750;letter-spacing:.15em}
.stage-label{text-align:center}
.shuffle{min-height:42px;margin-top:12px;color:#e5f0e8;font-family:Georgia,"Times New Roman",serif;font-size:25px;text-align:center}
.bar{height:5px;margin:12px 0 10px;overflow:hidden;border-radius:99px;background:#263943}
.bar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#66cb8b,#d4ed9d);transition:width .1s linear}
.meta{color:#9db0b6;font-size:12px;font-variant-numeric:tabular-nums;text-align:center}
.meta #count{color:#dcebe1;font-weight:700}
.result{display:none;margin-top:18px;padding:clamp(22px,5vw,38px);border:1px solid rgba(199,231,204,.23);border-radius:18px;background:linear-gradient(145deg,#f8fbf8,#eaf3eb);box-shadow:0 24px 75px rgba(0,0,0,.25);color:#1b3025}
.result.show{display:block;animation:rise-in .35s ease both}
@keyframes rise-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.ref{display:table;margin:0 auto 23px;padding:8px 14px;border:1px solid #d4e6d8;border-radius:99px;background:#eff7f0;color:#356247;font-size:12px;font-weight:700;text-align:center}
.ar{color:#17291e;font-family:"Amiri","Noto Naskh Arabic","Times New Roman",serif;font-size:clamp(30px,6vw,40px);line-height:2;text-align:center}
.translation-label{margin-top:24px;color:#688373;font-size:9px}
.en{margin-top:8px;color:#263a30;font-size:16px;line-height:1.85}
.ur-label{text-align:right}
.ur{margin-top:8px;color:#263a30;font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;font-size:20px;line-height:2.15;text-align:right}
.attribution{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:15px;color:#718477;font-size:11px}
audio{display:block;width:100%;margin-top:21px}
.verse-link{display:table;margin:20px auto 0;color:#286b44;font-size:13px;font-weight:700;text-decoration:none}
.verse-link:hover{text-decoration:underline}
.verse-link span{padding-left:4px}
.footer{margin-top:34px;color:#72878c;font-size:12px;text-align:center}
@media(max-width:520px){.finder-shell{width:min(100% - 24px,760px);padding-top:52px}.hero{padding:0 5px}.hero>p{font-size:14px}.stage{margin-top:25px;padding:20px 16px 17px}.shuffle{font-size:21px}.attribution{display:grid;gap:5px}.footer{margin-top:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}