*{box-sizing:border-box;margin:0;padding:0}
        body{font-family:-apple-system,'Segoe UI',Tahoma,sans-serif;background:#0b1d32;color:#fff;min-height:100vh}

        /* ── Hero ── */
        /* ── Compact header ── */
        .page-header{background-color:#0b1d32;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Crect x='8' y='8' width='36' height='36' fill='none' stroke='white' stroke-width='.8' opacity='.06'/%3E%3Crect x='8' y='8' width='36' height='36' fill='none' stroke='white' stroke-width='.8' opacity='.04' transform='rotate(45 26 26)'/%3E%3C/svg%3E")}
        .topbar-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 8px}
        .breadcrumb{display:flex;align-items:center;font-size:13px}
        .breadcrumb-home{color:rgba(255,255,255,.45);text-decoration:none;font-weight:500;transition:color .15s}
        .breadcrumb-home:hover{color:#1CD6BE}
        .breadcrumb-sep{color:rgba(255,255,255,.18);margin:0 6px}
        .breadcrumb-country{color:rgba(255,255,255,.45);text-decoration:none;font-weight:500;transition:color .15s;white-space:nowrap}
        .breadcrumb-country:hover{color:#1CD6BE}
        .topbar-right{display:flex;align-items:center;gap:6px}
        .lang-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
        .lb{font-size:13px;font-weight:700;padding:5px 10px;cursor:pointer;background:transparent;color:rgba(255,255,255,.38);letter-spacing:.4px;text-decoration:none;display:block;white-space:nowrap;border-radius:20px;border:1px solid rgba(255,255,255,.15)}
        .lb.on{background:#1CD6BE;color:#0b1d32;border-color:#1CD6BE}
        .city-bar{display:flex;align-items:center;gap:14px;padding:4px 16px 16px}
        .city-dome{width:58px;height:58px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(28,214,190,.4))}
        .city-name{font-size:22px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.3px}
        .city-date{font-size:13px;color:rgba(255,255,255,.4);margin-top:3px}
        /* ── Mosque bar ── */
        .mosque-bar{margin:6px 14px 4px;background:rgba(196,168,85,.07);border:1px solid rgba(196,168,85,.2);border-radius:10px;padding:9px 12px;display:grid;grid-template-columns:auto repeat(5,1fr);align-items:center;gap:4px}
        .mosque-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:rgba(196,168,85,.7);font-weight:700;padding-right:10px;border-right:1px solid rgba(196,168,85,.2);white-space:nowrap}
        .mosque-time{text-align:center;font-size:14px;font-weight:600;color:rgba(196,168,85,.9);font-variant-numeric:tabular-nums}

        /* ── Tabs ── */
        .tabs{display:flex;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.07)}
        .tab-link{flex:1;text-align:center;padding:12px 4px;font-size:13px;font-weight:600;color:rgba(255,255,255,.38);text-decoration:none;letter-spacing:.3px;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap}
        .tab-link.on{color:#1CD6BE;border-bottom-color:#1CD6BE}

        /* ── Divider ── */
        .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(28,214,190,.22),transparent);margin:0 20px}

        /* ── Prayer grid ── */
        .prayers{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:16px 14px 10px}
        .pc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 4px 12px;text-align:center;cursor:pointer;transition:.2s}
        .pc:hover{background:rgba(255,255,255,.08)}
        .pc.act{background:rgba(0,201,181,.11);border-color:rgba(0,201,181,.5)}
        .pn{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.38);margin-bottom:6px;font-weight:600;line-height:1.2}
        .pc.act .pn{color:#1CD6BE}
        .pt{font-size:24px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.3px}
        .pc.act .pt{color:#1CD6BE}
        .pm{font-size:11px;font-weight:600;margin-top:4px;color:rgba(196,168,85,.75);letter-spacing:.3px}
        .pc-cd{font-size:12px;font-weight:500;color:rgba(28,214,190,.0);margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:.3px;line-height:1}
        .pc.act .pc-cd{color:rgba(255,255,255,.55)}
        .pc-cd-lbl{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:rgba(28,214,190,.0);margin-top:3px;line-height:1}
        .pc.act .pc-cd-lbl{color:rgba(255,255,255,.25)}

        /* ── Sunrise row ── */
        .sunrise-bar{text-align:center;padding:2px 14px 4px;font-size:12px;color:rgba(255,255,255,.28);letter-spacing:.3px}
        .sunrise-bar span{color:rgba(255,255,255,.5);font-weight:600}

        /* countdown now embedded inside active prayer card (.pc-cd) */

        /* ── Week/Month table ── */
        .multi-wrap{padding:16px 14px}
        .multi-table{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
        .multi-table table{width:100%;border-collapse:collapse;font-size:13px}
        .multi-table thead th{background:rgba(0,201,181,.15);color:#1CD6BE;padding:10px 4px;text-align:center;font-weight:700;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
        .multi-table thead th:first-child{text-align:left;padding-left:12px}
        .multi-table tbody tr{border-bottom:1px solid rgba(255,255,255,.06)}
        .multi-table tbody tr:last-child{border-bottom:none}
        .multi-table tbody tr.today-row{background:rgba(0,201,181,.08)}
        .multi-table tbody td{padding:9px 4px;text-align:center;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
        .multi-table tbody td:first-child{text-align:left;padding-left:12px;font-weight:600;color:rgba(255,255,255,.9);min-width:60px}
        .multi-table tbody td.sunrise-col{color:rgba(255,255,255,.25);font-size:10px}
        .multi-table tbody tr.today-row td{color:#1CD6BE}
        .multi-table tbody tr.today-row td.sunrise-col{color:rgba(0,201,181,.35)}

        /* ── Unavailable ── */
        .unavailable{text-align:center;color:rgba(255,255,255,.35);padding:36px 20px;font-size:14px}

        /* ── Source ── */
        .source{margin:18px 14px 32px;font-size:11px;color:rgba(255,255,255,.2);text-align:center}
        .source-calculated{display:inline-block;margin-top:6px;font-size:10px;color:#c4a855;background:rgba(196,168,85,.1);border:1px solid rgba(196,168,85,.3);border-radius:6px;padding:3px 8px}

        /* ── Qibla ── */
        .src-line{text-align:center;font-size:11px;color:rgba(255,255,255,.22);padding:2px 14px 8px;letter-spacing:.2px;line-height:1.6}
        .src-calc{display:inline-block;margin-top:3px;font-size:9px;color:#c4a855;background:rgba(196,168,85,.08);border:1px solid rgba(196,168,85,.22);border-radius:5px;padding:2px 7px}
        .qibla{margin:0 14px 16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:14px 12px}
        .qibla-row{display:flex;flex-direction:row;align-items:center;max-width:420px;margin:0 auto}
        .qibla-hint{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
        .qibla-hint-txt{font-size:10px;color:rgba(255,255,255,.45);text-align:center;line-height:1.3}
        .qibla-dial{width:130px;flex-shrink:0;aspect-ratio:1;border-radius:50%;position:relative;border:1.5px solid rgba(28,214,190,.3);background:radial-gradient(circle,#123657 0 36%,#0b1d32 37% 100%);box-shadow:inset 0 0 0 8px rgba(255,255,255,.03),0 0 22px rgba(28,214,190,.13)}
        .qibla-dial:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#1CD6BE;border:2px solid #0b1d32;transform:translate(-50%,-50%);z-index:3}
        .qibla-mark{position:absolute;font-size:8px;color:rgba(255,255,255,.5);font-weight:800}
        .qibla-mark.n{top:4px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.9)}
        .qibla-mark.e{right:6px;top:50%;transform:translateY(-50%)}
        .qibla-mark.s{bottom:4px;left:50%;transform:translateX(-50%)}
        .qibla-mark.w{left:6px;top:50%;transform:translateY(-50%)}
        .qibla-tick{position:absolute;left:calc(50% - 1px);top:3px;width:2px;height:5px;background:rgba(255,255,255,.18);transform-origin:1px 62px;border-radius:1px}
        .qibla-tick.major{height:7px;width:2.5px;background:rgba(255,255,255,.32);left:calc(50% - 1.25px)}
        /* needle wrapper — zero-size div at dial center, children extend up/down */
        .qibla-needle-wrap{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(0deg);transition:transform .2s ease;z-index:2}
        .qibla-needle-up{position:absolute;left:-2px;bottom:0;width:4px;height:48px;background:linear-gradient(180deg,#f5d06a 0%,#c89b10 100%);border-radius:2px 2px 0 0}
        .qibla-needle-up:before{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:9px solid #f5d06a}
        .qibla-needle-down{position:absolute;left:-2px;top:0;width:4px;height:31px;background:linear-gradient(180deg,#e74c3c 0%,#922b21 100%);border-radius:0 0 2px 2px}
        .qibla-btn-col{flex:1;display:flex;align-items:center;justify-content:center}
        .qibla-t{font-size:14px;color:#fff;font-weight:800;margin-bottom:4px}
        .qibla-p{font-size:11px;line-height:1.45;color:rgba(255,255,255,.52)}
        .qibla-hd{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.45);text-align:center;margin-bottom:12px}
        .qibla-sub{font-size:12px;line-height:1.5;color:rgba(255,255,255,.42);text-align:center;margin-top:10px;padding:0 2px;min-height:15px}
        .qibla-btn{border:1px solid rgba(28,214,190,.45);background:rgba(28,214,190,.13);color:#1CD6BE;border-radius:10px;padding:9px 10px;font-size:13px;font-weight:700;cursor:pointer;text-align:center;line-height:1.35;white-space:normal;word-break:keep-all;width:100%;max-width:78px}
        .qibla-btn:hover{background:rgba(28,214,190,.2)}
        .qibla-btn:disabled{cursor:not-allowed;color:rgba(255,255,255,.35);border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06)}

        /* ── Desktop center header ── */
        .city-bar-center{display:none;align-items:center;gap:10px;flex:1;justify-content:center}
        .city-bar-center .city-dome{width:40px;height:40px}
        .city-bar-center .city-name{font-size:18px}
        .city-bar-center .city-date{font-size:11px;margin-top:1px}
        @media(min-width:768px){
            html{background:#060f1a}
            body{max-width:540px;margin:0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 8px 60px rgba(0,0,0,.6)}
            .city-bar-center{display:flex}
            .city-bar{display:none}
            .lang-bar{justify-content:flex-end;padding-bottom:6px}
        }
        @media(max-width:360px){
            .prayers{gap:4px;padding:12px 8px 8px}
            .pt{font-size:20px}
            .pn{font-size:10px}
            .multi-table table{font-size:10px}
            .multi-table tbody td{padding:7px 3px}

        }

        /* ── Push bell ── */
        #vn-bell{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:.2s;color:rgba(255,255,255,.5);flex-shrink:0}
        #vn-bell:hover{background:rgba(28,214,190,.15);border-color:rgba(28,214,190,.4);color:#1CD6BE}
        #vn-bell.on{background:rgba(28,214,190,.18);border-color:#1CD6BE;color:#1CD6BE}
        /* ── Push modal ── */
        #vn-push-modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.65);align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
        #vn-push-modal.open{display:flex}
        .vn-modal-box{background:#0f2541;border:1px solid rgba(255,255,255,.1);border-radius:20px 20px 0 0;padding:24px 20px 32px;width:100%;max-width:480px;position:relative}
        .vn-modal-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
        .vn-modal-sub{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:20px}
        #vn-modal-close{position:absolute;top:16px;right:18px;background:none;border:none;color:rgba(255,255,255,.4);font-size:20px;cursor:pointer;line-height:1;padding:4px}
        #vn-modal-close:hover{color:#fff}
        .vn-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.35);margin-bottom:8px}
        .vn-select{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;padding:10px 12px;font-size:14px;margin-bottom:16px;appearance:none}
        .vn-select:focus{outline:none;border-color:#1CD6BE}
        .vn-checks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
        .vn-chk-label{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:pointer;font-size:13px;color:rgba(255,255,255,.7);transition:.15s;user-select:none}
        .vn-chk-label:has(input:checked){background:rgba(28,214,190,.15);border-color:#1CD6BE;color:#fff}
        .vn-chk-label input{display:none}
        .vn-radios{display:flex;gap:8px;margin-bottom:20px}
        .vn-rad-label{flex:1;text-align:center;padding:8px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:pointer;font-size:13px;color:rgba(255,255,255,.6);transition:.15s;user-select:none}
        .vn-rad-label:has(input:checked){background:rgba(28,214,190,.15);border-color:#1CD6BE;color:#fff;font-weight:600}
        .vn-rad-label input{display:none}
        .vn-btn{width:100%;padding:14px;border-radius:12px;border:none;font-size:15px;font-weight:700;cursor:pointer;transition:.2s}
        .vn-btn-primary{background:#1CD6BE;color:#0b1d32}
        .vn-btn-primary:hover{background:#1fc9b2}
        .vn-btn-primary:disabled{opacity:.5;cursor:default}
        .vn-btn-danger{background:rgba(255,80,80,.15);color:#ff6060;border:1px solid rgba(255,80,80,.3);margin-top:10px}
        .vn-btn-danger:hover{background:rgba(255,80,80,.25)}
        .vn-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#0f2541;border:1px solid rgba(28,214,190,.4);color:#fff;padding:11px 20px;border-radius:12px;font-size:14px;opacity:0;transition:.3s;z-index:2000;pointer-events:none;white-space:nowrap}
        .vn-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

        /* ── Bell tip ── */
        #vn-bell-tip{position:absolute;z-index:100;display:flex;align-items:center;gap:6px;background:#0f2541;border:1px solid rgba(28,214,190,.4);border-radius:10px;padding:9px 10px 9px 14px;font-size:13px;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(-4px);transition:.25s;pointer-events:none;white-space:nowrap}
        #vn-bell-tip.show{opacity:1;transform:translateY(0);pointer-events:auto}
        .vn-tip-text{cursor:pointer;color:#1CD6BE;font-weight:500}
        .vn-tip-text:hover{text-decoration:underline}
        .vn-tip-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:16px;cursor:pointer;line-height:1;padding:0 0 0 6px}
        .vn-tip-close:hover{color:#fff}

        /* ── Swipe hint ── */
        .vn-sh-l,.vn-sh-r{position:fixed;top:50%;transform:translateY(-50%);pointer-events:none;z-index:600;opacity:0;transition:opacity .5s;font-size:22px;color:rgba(255,255,255,.55);line-height:1}
        .vn-sh-l{left:10px;animation:vnHL 1.4s ease-in-out infinite}
        .vn-sh-r{right:10px;animation:vnHR 1.4s ease-in-out infinite}
        .vn-sh-l.show,.vn-sh-r.show{opacity:1}
        @keyframes vnHL{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-5px)}}
        @keyframes vnHR{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(5px)}}

        /* ── Share ── */
        .share-row{padding:0 14px 8px}
        .vn-share-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:8px 14px;background:rgba(28,214,190,.08);border:1px solid rgba(28,214,190,.22);border-radius:10px;color:#1CD6BE;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit}
        .vn-share-btn:hover{background:rgba(28,214,190,.16);border-color:rgba(28,214,190,.45)}
        .vn-share-btn:disabled{opacity:.55;cursor:default}
        /* ── Sticky ad ── */
        .vn-sticky-ad{position:fixed;bottom:0;left:0;right:0;z-index:900;display:flex;justify-content:center;align-items:center;background:#0b1d32;border-top:1px solid rgba(255,255,255,.08);min-height:100px}
        @media(min-width:768px){.vn-sticky-ad{min-height:90px}}
        .faq-teaser{margin:20px 14px 4px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;text-align:center}
        .faq-teaser-text{font-size:13px;line-height:1.6;color:rgba(255,255,255,.45);margin-bottom:10px}
        .faq-teaser-btn{display:inline-block;padding:8px 18px;background:rgba(28,214,190,.1);border:1px solid rgba(28,214,190,.25);border-radius:20px;color:#1CD6BE;text-decoration:none;font-size:13px;font-weight:700;transition:background .15s}
        .faq-teaser-btn:hover{background:rgba(28,214,190,.18)}