.practice-root{position:fixed;inset:0;z-index:320;display:none;place-items:center;padding:16px;background:rgba(2,8,6,.78);backdrop-filter:blur(10px)}
.practice-root.open{display:grid}
.practice-sheet{width:min(920px,100%);max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:26px;background:var(--bg-soft);padding:22px;box-shadow:var(--shadow);animation:practice-in .32s cubic-bezier(.22,1,.36,1)}
@keyframes practice-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.practice-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.practice-head h2{margin:6px 0 0}
.circuit{position:relative;aspect-ratio:1;max-width:340px;margin:10px auto 18px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--gold) 35%,transparent);background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 46%)}
.circuit .kaaba{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:2px solid var(--gold);background:linear-gradient(160deg,#1a1410,#0b0a08);box-shadow:inset 0 10px 0 #d7b46a22;border-radius:4px}
.circuit .walker{position:absolute;left:50%;top:8px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px var(--mint);transform-origin:7px 162px}
.circuit[data-spin="1"] .walker{animation:tawaf-spin 8s linear infinite}
@keyframes tawaf-spin{to{transform:rotate(-360deg)}}
.practice-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.practice-metrics div{padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.practice-metrics strong{display:block;font-size:1.35rem}
.practice-metrics span{color:var(--muted);font-size:.72rem}
.composure{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 16px}
.composure>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--primary));transition:width .35s ease}
.crowd-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.crowd-row button{min-height:40px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:6px 12px;font-weight:700}
.crowd-row button[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--surface))}
.prayer-lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prayer-clock{font-size:clamp(2rem,6vw,3.2rem);letter-spacing:-.04em;font-weight:800}
.scenario-btn{width:100%;text-align:start;min-height:56px;margin-bottom:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text);padding:12px}
.scenario-btn[aria-pressed="true"],.quiz-pick.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.quiz-pick.bad{border-color:var(--danger)}
@media(max-width:720px){.practice-metrics,.prayer-lab-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.circuit[data-spin="1"] .walker,.practice-sheet{animation:none}}