@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{--green:#174d40;--ink:#233d35;--muted:#7a847a;--line:#e4e5db;--paper:#f8f9f3;--gold:#bba166}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c19c51;outline-offset:4px}button{transition:background .2s,transform .2s}button:hover{filter:brightness(.95)}header{height:94px;max-width:1440px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:30px;letter-spacing:-1.5px;font-weight:700;color:var(--green);text-decoration:none;display:flex;align-items:center;gap:10px}.brand-dot{color:var(--gold);margin-left:-10px}.brand-icon{font-size:27px;background:var(--green);color:var(--paper);width:32px;height:38px;border-radius:18px 18px 5px 5px;display:grid;place-items:center;font-weight:400}.header-note{font-size:12px;color:var(--muted)}.head-actions{display:flex;gap:22px;align-items:center}.plain,.help-btn{background:transparent;border:0;color:var(--green)}.help-btn{border:1px solid #c7cfc3;border-radius:50%;width:26px;height:26px}.intro{text-align:center;padding:47px 16px 33px}.eyebrow,.label{font-size:10px;letter-spacing:1.8px;font-weight:600}.eyebrow{color:var(--green)}.eyebrow span{display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;margin-right:8px;vertical-align:middle}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:54px;font-weight:400;letter-spacing:-1.1px;line-height:1.08;margin:19px 0 15px}h1 em{font-weight:400;color:#64816f}p{line-height:1.75;color:var(--muted)}.intro p{font-size:13px}.workspace{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:255px 1fr 230px;gap:35px;align-items:center;padding:0 26px}.location-panel{border:1px solid var(--line);border-radius:18px;background:#fffefa;padding:24px}.label{color:var(--muted);font-size:9px;letter-spacing:1.5px}.location-mark{font-size:27px;color:var(--green);margin:24px 0 14px}.location-panel h2{font-size:19px;font-weight:500;line-height:1.35;margin:0}.location-panel p{font-size:11px;line-height:1.7}.primary{border:0;background:var(--green);color:white;padding:14px 16px;border-radius:8px;font-weight:500;display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%}.primary:disabled{opacity:.6;cursor:wait}.privacy{font-size:9px!important;text-align:center;margin-top:11px}.divider{display:flex;align-items:center;gap:8px;margin:24px 0 19px;font-size:9px;color:var(--muted);white-space:nowrap}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}label{display:block;font-size:10px;margin-bottom:7px;color:var(--muted)}select,input{width:100%;padding:11px 8px;border:1px solid #dce1d6;border-radius:6px;background:#fffefa;color:var(--ink);font-size:11px}select{cursor:pointer}.location-status{margin-top:17px;font-size:10px;color:#788573;line-height:1.6}.location-status:before{content:'●';margin-right:6px;font-size:7px}.coordinate-inputs{display:flex;gap:6px;margin-top:15px}.coordinate-inputs label{width:50%}.compass-panel{text-align:center;min-width:0}.view-tabs{display:inline-flex;padding:4px;background:#ebeee5;border-radius:30px;margin-bottom:8px}.view-tabs button{border:0;background:transparent;padding:9px 15px;font-size:11px;color:var(--muted);border-radius:30px}.view-tabs button.active{background:#fffefa;color:var(--green);box-shadow:0 2px 6px #233d3510}.dial-wrap{position:relative;max-width:395px;width:100%;margin:auto;aspect-ratio:1}.dial{position:absolute;inset:0;transform:rotate(0deg)}.dial-svg{width:100%;height:100%;color:#d7dfcf}.cardinal{position:absolute;font-size:12px;font-weight:500;background:var(--paper);padding:4px}.north{top:2%;left:50%;transform:translateX(-50%);color:var(--green)}.south{bottom:2%;left:50%;transform:translateX(-50%)}.east{right:2%;top:50%;transform:translateY(-50%)}.west{left:2%;top:50%;transform:translateY(-50%)}.needle{position:absolute;inset:0;transform:rotate(0deg)}.needle-line{position:absolute;bottom:50%;left:calc(50% - 1px);width:2px;height:31%;background:linear-gradient(to top,#769c7b44,#174d40)}.kaaba{position:absolute;left:calc(50% - 22px);top:9%;width:44px;height:44px;z-index:2;background:var(--paper);border-radius:9px}.kaaba svg{width:100%}.arrow-tip{position:absolute;left:calc(50% - 6px);top:28%;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid var(--green)}.center-point{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:65px;height:65px;background:#e7ecdf85;border:1px solid #d1dcc5;border-radius:50%;display:grid;place-items:center}.center-point span{width:13px;height:13px;border-radius:50%;background:var(--green);border:4px solid var(--paper);box-sizing:content-box;box-shadow:0 0 0 1px #c6d1bd}.phone-top{position:absolute;top:-1px;left:calc(50% - 4px);font-size:9px;color:var(--gold)}.direction{font-family:'Libre Caslon Display',Georgia,serif;font-size:30px;line-height:1.2}.compass-caption{font-size:11px;margin:9px 0 14px}.secondary{border:1px solid #cbd5c5;background:transparent;color:var(--green);padding:10px 15px;border-radius:7px;font-size:11px}.secondary span{margin-left:15px}.sensor-status{font-size:9px;color:var(--muted);margin-top:10px;min-height:24px;line-height:1.6}.guidance{padding-left:10px}.small-kaaba{font-size:33px;color:var(--gold);margin-bottom:18px}.guidance .label{font-size:8px;letter-spacing:1.2px}.guidance h2{font-family:'Libre Caslon Display',Georgia,serif;font-size:30px;font-weight:400;line-height:1.15;margin:14px 0}.guidance>p{font-size:11px}.guide-line{width:35px;height:1px;background:#cbb784;margin:25px 0}.step{display:flex;gap:13px;margin-bottom:17px}.step>span{color:var(--gold);font-size:10px;padding-top:2px}.step h3{font-size:11px;font-weight:500;margin:0 0 4px}.step p{font-size:10px;line-height:1.6;margin:0}.text-button{background:transparent;border:0;padding:0;color:var(--green);font-size:10px;margin-top:5px}.metrics{max-width:1035px;margin:37px auto 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.metrics>div{display:flex;align-items:center;gap:16px;padding-left:38px}.metrics>div+div{border-left:1px solid var(--line)}.metric-icon{font-size:26px;font-weight:400;color:#7e927a}.metrics strong{display:block;font-size:21px;font-weight:500;margin-top:7px;letter-spacing:-.5px}.metrics small{font-size:9px;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:6px}.bottom-note{text-align:center;font-size:11px;color:#8c9688;padding:25px 10px 35px}.bottom-note span{color:var(--gold);margin-right:8px}footer{max-width:1260px;margin:auto;border-top:1px solid var(--line);padding:21px 3%;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.footer-dot{margin:0 7px;color:var(--gold)}footer button{background:none;border:0;font-size:9px;color:var(--muted)}dialog{max-width:460px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:18px;padding:35px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#102c236e;backdrop-filter:blur(5px)}dialog h2{font-family:Georgia,serif;font-weight:400;font-size:28px}dialog p{font-size:13px}dialog .primary{margin-top:25px}.close{position:absolute;top:12px;right:16px;border:0;background:none;font-size:24px;color:var(--green)}#camera,.camera-shade{display:none;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.camera-shade{z-index:-1;background:#f8f9f3e6}body.camera-on #camera,body.camera-on .camera-shade{display:block}body.camera-on .camera-shade{background:#f8f9f380}body.camera-on .location-panel,body.camera-on .guidance{background:#f8f9f3ed;border-radius:18px;padding:22px}body.camera-on .compass-panel{background:#f8f9f3b8;border-radius:18px;padding:10px}body.camera-on header,body.camera-on footer{background:#f8f9f3d9}.aligned .direction{color:#12845e}html[lang=ur] .intro,html[lang=ur] .guidance,html[lang=ur] .location-panel{direction:rtl}html[lang=ur] h1{font-family:Georgia,serif;font-size:43px;line-height:1.6}@media(min-width:1500px){.intro{padding-top:65px;padding-bottom:45px}.workspace{max-width:1250px;gap:55px}.dial-wrap{max-width:420px}}@media(max-width:1000px){.workspace{grid-template-columns:230px 1fr;max-width:850px;gap:25px}.guidance{display:none}.metrics{margin:30px 30px 0}.metrics>div{padding-left:20px;gap:10px}.metrics strong{font-size:17px}.metrics small{display:block;margin:4px 0 0}}@media(max-width:600px){header{height:72px;padding:0 22px}.brand{font-size:26px}.header-note{display:none}.intro{padding:30px 18px 15px}h1{font-size:39px;line-height:1.12;margin-top:16px}.intro p{font-size:12px}.eyebrow{font-size:8px;letter-spacing:1.5px}.workspace{display:flex;flex-direction:column;padding:0 20px;gap:24px}.location-panel{width:100%;padding:17px 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}.location-panel>.label{grid-column:1/-1}.location-mark{display:none}.location-panel h2{font-size:16px;margin-top:7px;align-self:center}.location-panel #coordinates{grid-column:1;margin:0;font-size:10px}.location-panel .primary{grid-column:2;grid-row:2/4;font-size:11px;align-self:center;padding:13px 9px}.location-panel .privacy{grid-column:1/-1;margin:3px 0 0}.divider{grid-column:1/-1;margin:9px 0 4px}.location-panel>label{grid-column:1/-1;margin:0}.location-panel select{grid-column:1/-1}.location-status{grid-column:1/-1;margin:5px 0 0}#custom{grid-column:1/-1}.compass-panel{width:100%}.dial-wrap{max-width:330px}.direction{font-size:28px}.metrics{margin:24px 20px 0;padding:20px 0;gap:8px}.metrics>div{padding-left:8px;display:block}.metrics .metric-icon{display:none}.metrics .label{font-size:7px;letter-spacing:.7px}.metrics strong{font-size:16px}.metrics small{font-size:8px;line-height:1.5}.bottom-note{font-size:10px;padding-bottom:25px}footer{margin:0 20px;gap:14px;flex-wrap:wrap;line-height:1.6;padding:18px 0}footer>span:nth-child(2){display:none}html[lang=ur] h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}[hidden]{display:none!important}

/* Camera mode: full-screen feed with the compass and a single exit control. */
.exit-camera{display:none}
body.camera-on{overflow:hidden;background:#14241e}
body.camera-on header,body.camera-on footer,body.camera-on .intro,body.camera-on .location-panel,body.camera-on .guidance,body.camera-on .metrics,body.camera-on .bottom-note,body.camera-on .view-tabs,body.camera-on .direction,body.camera-on .compass-caption,body.camera-on #enableCompass,body.camera-on .sensor-status{display:none}
body.camera-on main{position:fixed;inset:0}
body.camera-on .workspace{display:grid;place-items:center;width:100%;height:100%;max-width:none;margin:0;padding:20px;gap:0;grid-template-columns:1fr}
body.camera-on .compass-panel{width:min(86vw,70dvh,420px);padding:0;background:transparent;border:0;border-radius:0}
body.camera-on .dial-wrap{width:100%;max-width:none;margin:0;border-radius:50%;background:#f8f9f3d9;box-shadow:0 8px 48px #0003}
body.camera-on .camera-shade{background:#0000001a}
body.camera-on .exit-camera{display:grid;place-items:center;position:fixed;z-index:10;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:44px;height:44px;padding:0;border:1px solid #ffffff65;border-radius:50%;background:#102c2399;color:white;font-size:30px;line-height:1;backdrop-filter:blur(8px)}

.location-check{display:flex;align-items:center;gap:7px;color:#16744e;font-size:11px;margin-top:15px;font-weight:500;grid-column:1/-1}
.location-check>span{display:grid;place-items:center;background:#16845a;color:white;width:20px;height:20px;border-radius:50%;font-size:13px}
.location-prompt-icon{display:grid;place-items:center;width:58px;height:58px;background:#e6eee3;border-radius:50%;color:var(--green);font-size:34px;margin-bottom:20px}
#locationDialog .text-button{display:block;margin:20px auto 0;padding:8px}
body.camera-on .location-check{display:none}

@media(max-width:600px){.location-panel h2,.location-panel #coordinates{grid-column:1/-1}}
/* Confirm Qibla alignment inside the compass, including camera view. */
body.aligned .center-point{background:#dff3e5e8;border-color:#16845a;box-shadow:0 0 0 8px #16845a14}
body.aligned .center-point span{display:grid;place-items:center;width:42px;height:42px;border:0;background:#16845a;box-shadow:none;color:#fff}
body.aligned .center-point span::after{content:'✓';font-size:30px;font-weight:700;line-height:1}