:root{--g:#0f5b46;--gold:#c9a24b;--bg:#f5f1e6;--card:#fff;--tx:#1b2a25;--mut:#6a7a72;--bd:#e4ddc8;--r:20px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 4l7 15 15-7-7 15 15 7-15 7 7 15-15-7-7 15-7-15-15 7 7-15-15-7 15-7-7-15 15 7z' fill='none' stroke='%23c9a24b' stroke-opacity='.22'/%3E%3C/svg%3E")}
[data-theme=dark]{--bg:#0a1411;--card:#12201b;--tx:#e8efe9;--mut:#8fa69b;--bd:#233830}
*{box-sizing:border-box;margin:0}body{font:16px/1.55 Inter,system-ui,sans-serif;background:var(--bg) var(--pat);color:var(--tx);min-height:100vh}
.ar{font-family:Amiri,'Noto Naskh Arabic',serif;direction:rtl}.big{font-size:1.7rem;line-height:2.1;text-align:right}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.logo{color:var(--g);font-size:1.25rem}[data-theme=dark] .logo{color:var(--gold)}#clock{color:var(--mut);font-variant-numeric:tabular-nums}
#theme{background:none;border:1px solid var(--bd);color:var(--tx);border-radius:50%;width:38px;height:38px;font-size:1.1rem;cursor:pointer}
main{max-width:720px;margin:auto;padding:4px 14px 120px;animation:in .3s}@keyframes in{from{opacity:0;transform:translateY(6px)}}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:0 4px 18px #0000000a}.c{text-align:center}
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:24px 18px;margin:8px 0;border-radius:30px 30px 20px 20px;border:1px solid var(--gold);background:linear-gradient(160deg,#127055,#09382c)}
.dome{position:absolute;left:0;bottom:0;width:100%;height:55%;color:#fff;pointer-events:none}.hero>*{position:relative}.hero h1{font-size:1.15rem;margin-top:6px}.sub{opacity:.75;font-size:.9rem}.hero .ar{font-size:1.3rem}
.loc{color:var(--gold);text-decoration:none;font-weight:600}.cdw{margin-top:14px}.cd{font:700 2.8rem/1.2 Inter;font-variant-numeric:tabular-nums;letter-spacing:.02em}.cd.s{font-size:1.7rem;color:var(--g)}[data-theme=dark] .cd.s{color:var(--gold)}
.row{display:flex;justify-content:space-between;padding:12px 10px;border-radius:12px;transition:background .3s}.row.on{background:color-mix(in srgb,var(--gold) 22%,transparent);font-weight:600}
.btn{display:inline-block;margin:8px 4px 0;padding:11px 18px;border:0;border-radius:14px;background:var(--g);color:#fff;font:600 .95rem Inter;cursor:pointer;text-decoration:none}.btn.alt{background:none;color:var(--g);border:1px solid var(--g)}[data-theme=dark] .btn.alt{color:var(--gold);border-color:var(--gold)}
input,select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font:inherit;margin-top:6px}.grp{display:flex;gap:8px}.grp>*{flex:1}.form label{display:block;margin-bottom:12px;color:var(--mut);font-size:.85rem}
.scroll{overflow-x:auto;padding:6px}table{width:100%;border-collapse:collapse;font-size:.85rem;white-space:nowrap}th,td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--bd)}tr.on{background:color-mix(in srgb,var(--gold) 25%,transparent);font-weight:600}
.item{display:flex;align-items:center;gap:12px}.item a{flex:1;color:inherit;text-decoration:none}.item small,small{display:block;color:var(--mut)}.hero small{color:#fff9}.num{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--g) 14%,transparent);font-size:.8rem}
.fav{background:none;border:0;font-size:1.4rem;color:var(--gold);cursor:pointer}.ay p+p{color:var(--mut);margin-top:4px}audio{width:100%;margin-top:10px}.out{margin-top:10px;font-weight:600;color:var(--g)}[data-theme=dark] .out{color:var(--gold)}
.tap{width:200px;height:200px;border-radius:50%;margin:10px auto;display:block;border:6px double var(--gold);background:var(--g);color:#fff;font:700 3.4rem Inter;cursor:pointer;transition:transform .08s}.tap:active{transform:scale(.95)}.tap small{color:#fffa;font-size:1rem}
.compass{position:relative;width:240px;height:240px;margin:6px auto;border-radius:50%;border:4px double var(--gold);background:radial-gradient(var(--card),var(--bg))}.compass i{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-style:normal;font-weight:700}
.needle{position:absolute;inset:0;transform:rotate(var(--a));transition:transform .2s}.needle:before{content:"🕋";position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:2rem}.needle:after{content:"";position:absolute;top:70px;left:calc(50% - 3px);width:6px;height:50%;background:linear-gradient(var(--g),transparent);border-radius:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tile{display:block;color:inherit;text-decoration:none;font-weight:600}.tile span{display:block;font-size:2rem}.res{display:block;width:100%;text-align:start;margin-top:8px;padding:11px;border:1px solid var(--bd);border-radius:12px;background:var(--bg);color:var(--tx);font:inherit;cursor:pointer}
.sk{height:120px;background:linear-gradient(90deg,var(--card),var(--bd),var(--card));background-size:200%;animation:sh 1.2s infinite}.mini{height:40px;margin-top:8px;border-radius:12px}@keyframes sh{to{background-position:-200%}}
.tabs{position:fixed;z-index:9;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:min(94vw,520px);display:flex;background:var(--card);border:1px solid var(--bd);border-radius:26px;box-shadow:0 8px 30px #0003;padding:6px}
.tabs a{flex:1;text-align:center;text-decoration:none;color:var(--mut);font-size:.7rem;padding:6px 0;border-radius:20px}.tabs i{display:block;font-style:normal;font-size:1.3rem}.tabs a.on{background:var(--g);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}