:root{--blue:#1a73e8;--blued:#1557b0;--green:#188038;--greend:#137333;--red:#d93025;--txt:#202124;--sub:#5f6368;--line:#dadce0;--bg:#f8f9fa;--amber:#f9ab00}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Roboto,Arial,sans-serif;color:var(--txt);background:#fff;font-size:14px;overflow:hidden;-webkit-tap-highlight-color:transparent}
html[lang=ur] body{font-family:'Noto Naskh Arabic',Roboto,serif;font-size:14.5px}
bdi,.lang,input[type=time],input[type=date],input[type=email],input[type=tel],input[type=password]{font-family:Roboto,Arial,sans-serif}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.ic{width:18px;height:18px;fill:currentColor;flex:none}
[dir=rtl] .flip{transform:scaleX(-1)}
.ur{font-family:'Noto Naskh Arabic',serif}
.sub{color:var(--sub);font-size:12.5px}
.grn{color:var(--green);font-weight:500;margin-top:4px}

/* layout */
#app{position:fixed;inset:0;display:flex}
#panel{width:100%;display:flex;flex-direction:column;background:#fff;z-index:5;min-width:0;height:100%}
#view{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:env(safe-area-inset-top)}
#mapwrap{position:absolute;inset:0;display:none;background:#e8eaed}
#map{position:absolute;inset:0}
#nav{height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);display:flex;flex:none;background:#fff}
#nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11.5px;color:var(--sub)}
#nav button.on{color:var(--blue);font-weight:500}
#nav svg{width:22px;height:22px;fill:currentColor}
@media (max-width:899px){
  body.m-map #view{display:none}
  body.m-map #panel{position:absolute;left:0;right:0;bottom:0;height:auto;z-index:7}
  body.m-map #mapwrap{display:block;z-index:6;bottom:calc(56px + env(safe-area-inset-bottom))}
}
@media (min-width:900px){
  #panel{width:420px;flex:none;box-shadow:0 1px 6px rgba(60,64,67,.3)}
  #mapwrap{position:relative;display:block;flex:1;inset:auto}
  .nav-map{display:none!important}
}

/* header, search, chips */
.hhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px 6px}
.hhead h1{font-size:19px;font-weight:500;margin:0}
.lang{border:1px solid var(--line);border-radius:14px;padding:5px 9px;font-size:11.5px;color:var(--sub);background:#fff;white-space:nowrap;flex:none;direction:ltr}
.lang b{color:var(--blue);font-weight:500}
.lang .u{font-family:'Noto Naskh Arabic',serif}
.search{margin:8px 12px;height:44px;border-radius:24px;box-shadow:0 1px 6px rgba(32,33,36,.28);display:flex;align-items:center;gap:10px;padding:0 16px;background:#fff;color:var(--sub)}
.search input{border:0;outline:0;flex:1;font-size:15px;min-width:0;background:transparent;color:var(--txt)}
.chips{display:flex;gap:8px;padding:4px 12px 10px;overflow-x:auto;scrollbar-width:none}
.chip{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--line);border-radius:16px;white-space:nowrap;background:#fff;font-size:13px}
.chip .ic{width:15px;height:15px}
.chip.on{background:#e8f0fe;border-color:#d2e3fc;color:var(--blued)}
.notice{margin:8px 12px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.notice.warn{background:#fef7e0;color:#7a5b00}
.notice.demo{background:#f1f3f4;color:var(--sub);display:block}
.notice.info{background:#e8f0fe;color:#174ea6}
.notice.ann{background:#e8f0fe;color:#174ea6}
.notice.ok{background:#e6f4ea;color:#0d652d}
.notice.err{background:#fce8e6;color:#a50e0e}
.empty{padding:28px 16px;text-align:center;color:var(--sub)}
.hint{color:var(--sub);font-size:12.5px;line-height:1.5;margin:12px}

/* home timetable */
.tt{width:100%;border-collapse:collapse;font-size:13px}
.tt th{position:sticky;top:0;background:#fff;color:var(--sub);font-weight:500;font-size:12px;padding:8px 3px;border-bottom:1px solid var(--line);text-align:center;z-index:1}
.tt td{padding:10px 3px;border-bottom:1px solid #eee;text-align:center;white-space:nowrap}
.tt td:first-child,.tt th:first-child{text-align:start;padding-inline-start:12px;white-space:normal}
.tt tbody tr{cursor:pointer}
.tt tbody tr:hover{background:var(--bg)}
.tt .nx{background:#e6f4ea;color:var(--greend);font-weight:700}
.tt th.nx{color:var(--greend)}
.tt th small.tom{display:block;font-size:10px;font-weight:400}
.tn{font-weight:500;font-size:13.5px;line-height:1.3}

/* mosque page */
.mtop{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 0}
.iconbtn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{background:var(--bg)}
.iconbtn .ic{width:22px;height:22px}
.mtitle{padding:4px 16px 8px}
.mtitle h1{font-size:22px;font-weight:400;margin:0 0 2px}
.ver{display:flex;align-items:center;gap:4px;color:var(--green);font-size:12.5px;margin-top:4px;flex-wrap:wrap}
.ver .ic{width:16px;height:16px}
.acts{display:flex;justify-content:space-around;padding:10px 8px;border-bottom:1px solid #eee}
.act{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--blue);min-width:62px}
.act i{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.act.p i{background:var(--blue);color:#fff;border-color:var(--blue)}
.sharebox{padding:12px 16px 6px;border-bottom:1px solid #eee}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;border-radius:20px;padding:9px 16px;font-weight:500;font-size:13.5px;white-space:nowrap}
.btn:hover{background:var(--blued)}
.btn:disabled{opacity:.6}
.btn .ic{width:17px;height:17px}
.btn.o{background:#fff;color:var(--blue);border:1px solid var(--line)}
.btn.o:hover{background:#f1f6fe}
.btn.g{background:var(--green)}
.btn.r{background:#fff;color:var(--red);border:1px solid var(--line)}
.btn.s{padding:6px 12px;font-size:12.5px}
.btn.wa{background:#1e8e3e;width:100%;padding:12px;font-size:14.5px}
.btn.wide{width:100%;padding:12px}
.sharelinks{display:flex;justify-content:center;gap:22px;padding:10px 0 4px}
.sharelinks button{display:flex;align-items:center;gap:5px;color:var(--blue);font-size:13px}
.tabs{display:flex;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:2;overflow-x:auto;scrollbar-width:none}
.tabs button{flex:1;padding:13px 6px;text-align:center;color:var(--sub);font-weight:500;border-bottom:3px solid transparent;font-size:13.5px;white-space:nowrap}
.tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}
.bdg{background:var(--red);color:#fff;border-radius:9px;font-size:10px;padding:1px 6px;margin-inline-start:4px}
.sec{padding:14px 16px}
.sec.tight{padding:8px 16px 0}
.nextbox{background:#e6f4ea;border-radius:10px;padding:12px 14px;margin-bottom:12px;color:#0d652d;display:flex;flex-direction:column;gap:2px}
.nextbox b{font-size:18px;font-weight:500}
.pt{width:100%;border-collapse:collapse}
.pt th{font-size:12px;color:var(--sub);font-weight:500;text-align:start;padding:8px 10px;border-bottom:1px solid var(--line)}
.pt td{padding:12px 10px;border-bottom:1px solid #eee;font-size:15px;vertical-align:top}
.pt td b{font-weight:500}
.pt tr.nx td{background:#e6f4ea}
.facs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.facs span{border:1px solid var(--line);border-radius:14px;padding:4px 10px;font-size:12px;color:var(--sub)}
.addr{margin:12px 0 0}
.link{color:var(--blue);font-size:13px;margin-top:12px;text-decoration:underline}
.ev{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #eee}
.evd{width:48px;text-align:center;flex:none}
.evd b{display:block;font-size:22px;font-weight:400;color:var(--blue)}
.evd span{font-size:11.5px;color:var(--sub)}
.evb{flex:1;min-width:0}
.evb h4{margin:0 0 2px;font-weight:500;font-size:15px}
.evb .btn{margin-top:8px}
.cm{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #eee}
.cm .av{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:500;flex:none;font-family:Roboto,Arial}
.cm b{font-weight:500}
.cm p{margin:3px 0 0;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.h3{font-size:15px;font-weight:500;margin:18px 0 6px}

/* forms */
.f{display:flex;flex-direction:column;gap:12px}
.f label,.fl{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--sub)}
.f input,.f textarea,.f select,.fl input,.tgrid input,.sel{border:1px solid var(--line);border-radius:8px;padding:10px;outline:0;background:#fff;font-size:15px;color:var(--txt);width:100%}
.f input:focus,.f textarea:focus,.tgrid input:focus,.fl input:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.f .btn,.row .btn{align-self:flex-start}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
fieldset{border:1px solid var(--line);border-radius:8px;padding:8px 12px 12px;margin:0}
legend{font-size:12.5px;color:var(--sub);padding:0 4px}
.f label.cb{flex-direction:row;align-items:center;gap:8px;color:var(--txt);font-size:14px;padding:4px 0}
.f label.cb input{width:auto}
.row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pend{background:#fffbea;border-inline-start:3px solid var(--amber);padding:6px 12px 12px;margin-bottom:10px;border-radius:0 8px 8px 0}
.pend .cm{border:0}
.pend p{margin:6px 0 0}
.li{padding:8px 0;border-bottom:1px solid #eee;font-size:14px}
.abtns{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #eee;margin-top:8px}

/* admin */
.ahead{background:var(--blue);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.an{font-size:17px;font-weight:500}
.as{font-size:12px;opacity:.85;word-break:break-all}
.ahead .lang{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.ahead .lang b{color:#fff}
.tgrid{display:grid;grid-template-columns:58px repeat(3,minmax(0,1fr));gap:8px 5px;align-items:center;margin-top:14px}
.tgrid input{padding:8px 2px;text-align:center;font-size:13px;min-width:0}
.tgrid input::-webkit-calendar-picker-indicator{display:none}
.gl{font-weight:500}
.gh{font-size:12px;color:var(--sub);text-align:center}

/* map – styled after the current Google Maps app */
:root{--m3:#0b57d0;--m3t:#d3e3fd;--sheet-h:0px}
.fab{position:absolute;width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:#444;z-index:3;inset-inline-end:14px;bottom:calc(var(--sheet-h) + 16px);transition:bottom .2s}
.fab svg{width:24px;height:24px;fill:currentColor}
.sqbtn{position:absolute;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:#444;z-index:3;inset-inline-end:14px;top:calc(118px + env(safe-area-inset-top))}
.sqbtn svg{width:22px;height:22px;fill:currentColor}
#mtop{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top)) 12px 0;z-index:5;pointer-events:none}
#mtop>*{pointer-events:auto}
#msearch{height:50px;border-radius:25px;background:#fff;box-shadow:0 2px 6px rgba(60,64,67,.3);display:flex;align-items:center;gap:4px;padding:0 6px;margin:0}
#msearch input{flex:1;border:0;outline:0;font-size:16px;min-width:0;background:transparent;padding:0 4px;color:var(--txt)}
#msearch input::-webkit-search-cancel-button{display:none}
.mic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#444;flex:none}
.mic .ic{width:22px;height:22px}
.mic[hidden]{display:none}
.mav{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;font:500 12px Roboto,Arial;flex:none;margin-inline-end:2px;display:flex;align-items:center;justify-content:center}
.mav .u{font:500 12px 'Noto Naskh Arabic',serif}
#mchips{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 6px;scrollbar-width:none}
#mchips::-webkit-scrollbar{display:none}
.mchip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:17px;background:#fff;box-shadow:0 1px 3px rgba(60,64,67,.3);white-space:nowrap;font-size:14px;color:#3c4043;flex:none}
.mchip .ic{width:16px;height:16px}
.mchip.on{background:var(--m3t);color:#041e49;box-shadow:none}
#msug{display:none;background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(60,64,67,.3);margin-top:6px;overflow:hidden;max-height:60vh;overflow-y:auto}
#msug.on{display:block}
#msug.on~#mchips{display:none}
.sg{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;text-align:start;border-bottom:1px solid #f1f3f4}
.sg:hover{background:var(--bg)}
.sg-i{width:32px;height:32px;border-radius:50%;background:#f1f3f4;display:flex;align-items:center;justify-content:center;color:#5f6368;flex:none}
.sg-i.pin{background:#e6f4ea;color:var(--green)}
.sg-b{display:flex;flex-direction:column;min-width:0}
.sg-n{font-size:15px;color:var(--txt)}
.sg-h{padding:10px 16px 4px;font-size:12px;color:var(--sub);font-weight:500}
#marea{position:absolute;left:50%;transform:translateX(-50%);top:calc(122px + env(safe-area-inset-top));z-index:4;background:#fff;border-radius:18px;box-shadow:0 1px 4px rgba(0,0,0,.3);height:36px;padding:0 16px;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--m3);white-space:nowrap}
#marea .ic{width:18px;height:18px}
#marea[hidden]{display:none}
/* bottom sheet */
#mapwrap{overflow:hidden}
#sheet{display:none;position:absolute;left:0;right:0;top:calc(8px + env(safe-area-inset-top));bottom:0;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -1px 8px rgba(60,64,67,.25);z-index:6;overflow:hidden;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform;overscroll-behavior:contain}
#sheet.on{display:block}
#sheet.peek{touch-action:none}
#sheet.peek .sh-acts{touch-action:pan-x}
#sheet.full{overflow-y:auto;border-radius:20px 20px 0 0}
#sheet.full .grab{position:sticky;top:0;background:#fff;z-index:1}
.peekmore{display:none;position:absolute;left:0;right:0;top:calc(var(--peek,300px) - 46px);height:46px;align-items:flex-end;justify-content:center;gap:4px;padding-bottom:8px;font-size:13px;font-weight:500;color:var(--m3);background:linear-gradient(rgba(255,255,255,0),#fff 55%);z-index:1}
.peekmore .ic{width:20px;height:20px}
#sheet.peek .peekmore{display:flex}
.grab{position:sticky;top:0;background:#fff;z-index:1}
.grab,.sh-head{touch-action:none}
.grab{height:26px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.grab span{width:32px;height:4px;border-radius:2px;background:#c4c7c5}
.sh-head{display:flex;gap:8px;align-items:flex-start;padding:0 12px 0 20px;touch-action:none}
[dir=rtl] .sh-head{padding:0 20px 0 12px}
.sh-t{flex:1;min-width:0}
.sh-t h2{font-size:22px;font-weight:400;margin:0;line-height:1.3}
.sh-x{width:36px;height:36px;border-radius:50%;background:#f1f3f4;display:flex;align-items:center;justify-content:center;color:#444;flex:none}
.sh-open{font-size:14px;color:var(--sub);margin:4px 20px 0}
.res .sh-open{margin:3px 0 0}
.sh-open .g{color:var(--green);font-weight:500}
.sh-ver{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--sub);margin:4px 20px 0}
.sh-ver .ic{width:15px;height:15px;color:var(--green)}
.sh-acts{display:flex;gap:8px;overflow-x:auto;padding:14px 20px 16px;scrollbar-width:none}
.sh-acts::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:20px;background:var(--m3t);color:#041e49;font-size:14px;font-weight:500;white-space:nowrap;flex:none}
.pill .ic{width:18px;height:18px}
.pill.pri{background:var(--m3);color:#fff}
.pill.pri.g{background:var(--green)}
.sh-more{padding:0 20px 24px;border-top:1px solid #eee}
.pt.sm td{padding:10px 8px;font-size:14.5px}
.pt.sm th{padding:6px 8px}
.sh-row{display:flex;gap:16px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #f1f3f4;font-size:14px}
.sh-row .ic{color:var(--m3);margin-top:1px}
.link-row{gap:20px;flex-wrap:wrap;border:0}
.link-row .link{margin:0}
.res-list{border-top:1px solid #eee;margin-top:10px}
.res{display:flex;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid #f1f3f4;cursor:pointer}
.res:hover{background:var(--bg)}
.res-b{flex:1;min-width:0}
.res-n{font-size:16px;font-weight:500}
.rdir{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--m3);flex:none}
.rdir .ic{width:22px;height:22px}
body.sheet-full #mtop,body.sheet-full .fab,body.sheet-full .sqbtn{display:none}
/* layers panel */
#layers{display:none;position:absolute;inset-inline-end:12px;top:calc(118px + env(safe-area-inset-top));width:min(320px,calc(100% - 24px));background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:7;padding:12px 14px 14px}
#layers.on{display:block}
.ly-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ly-row{display:flex;gap:10px}
.ly{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;color:var(--sub)}
.ly-i{width:64px;height:64px;border-radius:12px;border:2px solid transparent;display:block}
.ly.on{color:var(--m3);font-weight:500}
.ly.on .ly-i{border-color:var(--m3)}
.ly-i.default{background:linear-gradient(135deg,#f1efe9 40%,#fde29b 40% 50%,#f1efe9 50%),#f1efe9}
.ly-i.satellite{background:linear-gradient(135deg,#4a6b3a,#7a8f5a 50%,#3d5a6b)}
.ly-i.traffic{background:linear-gradient(90deg,#f1efe9 30%,#1e8e3e 30% 40%,#f1efe9 40% 60%,#f29900 60% 70%,#f1efe9 70%)}
#layers .sub{margin:10px 0 0}
.mf-lbl{text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.zoom{position:absolute;inset-inline-end:14px;bottom:90px;display:none;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.3);overflow:hidden;z-index:3}
.zoom button{width:42px;height:42px;font-size:22px;color:#666}
.zoom button+button{border-top:1px solid var(--line)}
.demo-note{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;bottom:calc(var(--sheet-h) + 6px);background:rgba(255,255,255,.9);border-radius:6px;padding:3px 8px;font-size:10.5px;color:var(--sub);z-index:2;font-family:Roboto,Arial}
@media (min-width:900px){
  #mtop,#marea,#sheet{display:none!important}
  .sqbtn{top:14px}
  #layers{top:64px}
  .fab{bottom:24px;width:44px;height:44px}
  .zoom{display:flex}
  .demo-note{top:8px;bottom:auto;left:8px;transform:none}
}

/* modal & toast */
#modal{position:fixed;inset:0;background:rgba(32,33,36,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
#modal.on{display:flex}
#mbox{background:#fff;border-radius:14px;padding:22px;width:100%;max-width:420px;max-height:90vh;overflow:auto}
#mbox h2{font-size:20px;font-weight:400;margin:0 0 4px}
#mbox .sub{margin-bottom:14px}
#toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:#323232;color:#fff;padding:12px 18px;border-radius:8px;z-index:60;max-width:90%;opacity:0;pointer-events:none;transition:opacity .2s;text-align:center}
#toast.on{opacity:1}

/* poster (A4, option D, English on top) */
#poster{position:fixed;inset:0;background:#e8eaed;z-index:40;overflow:auto;display:none;padding:16px}
.ptools{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.sheet{background:#fff;width:100%;max-width:560px;aspect-ratio:210/297;margin:0 auto;padding:7% 8%;text-align:center;color:#000;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.18);direction:ltr}
.pen{font:700 clamp(26px,6.5vw,44px)/1.1 Roboto,Arial,sans-serif}
.pur{font:700 clamp(22px,5.4vw,36px)/1.6 'Noto Naskh Arabic',serif;margin-top:4px}
.prule{height:4px;width:70px;background:#000;margin:14px 0}
.pscan{font:500 clamp(15px,3.6vw,22px) Roboto,Arial,sans-serif;letter-spacing:.5px}
.pscanu{font:700 clamp(15px,3.4vw,21px)/1.7 'Noto Naskh Arabic',serif}
.pqr{width:55%;margin:18px 0 12px}
.pqr svg{width:100%;height:auto;display:block}
.purl{font:500 clamp(12px,2.6vw,15px) Roboto,Arial,sans-serif}
.pfoot{margin-top:auto;font:clamp(10px,2.2vw,13px) Roboto,Arial,sans-serif;color:#444}
@media print{
  @page{size:A4;margin:0}
  body{overflow:visible}
  #app,#modal,#toast,.ptools{display:none!important}
  #poster{position:static;display:block!important;padding:0;background:#fff}
  .sheet{box-shadow:none;max-width:none;width:210mm;height:297mm;aspect-ratio:auto}
}

/* ---------- journey planner ---------- */
.jfab{background:var(--m3);color:#fff;bottom:calc(var(--sheet-h) + 78px)}
body.journey #jbtn,body.journey #mtop,body.journey #marea{display:none!important}
#jtop{position:absolute;left:0;right:0;top:0;z-index:5;padding:calc(8px + env(safe-area-inset-top)) 10px 0;pointer-events:none}
#jtop:empty{display:none}
#jtop .jcard{pointer-events:auto;background:#fff;border-radius:20px;box-shadow:0 2px 8px rgba(60,64,67,.3);padding:6px 6px 8px}
.jl1{display:flex;align-items:center;gap:2px}
.jfields{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.jf{display:flex;align-items:center;gap:10px;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;text-align:start;min-width:0;background:#fff}
.jtx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.jtx .ph{color:var(--sub)}
.jd{width:12px;height:12px;border-radius:50%;flex:none}
.jd.o{border:3px solid #202124;background:#fff}
.jd.d{background:#ea4335}
.jmodes{display:flex;gap:6px;align-items:center;padding:8px 4px 0;overflow-x:auto;scrollbar-width:none}
.jm{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;color:#444;font-size:13px;flex:none}
.jm .ic{width:20px;height:20px}
.jm span{display:none}
.jm.on span{display:inline}
.jm.on{background:var(--m3t);color:#041e49;font-weight:500}
.jleave{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line);font-size:13px;color:#444;flex:none;margin-inline-start:auto;overflow:hidden}
.jleave .ic{width:18px;height:18px}
.jleave input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
#jpick{display:none;position:absolute;inset:0;background:#fff;z-index:9;overflow-y:auto}
#jpick.on{display:block}
.jph{display:flex;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 10px 10px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff}
.jph input{flex:1;border:0;outline:0;font-size:17px;height:44px;min-width:0;background:transparent}
.sg-i.me{background:#e8f0fe;color:var(--m3)}
/* journey sheet */
.jpeek{padding:0 0 10px}
.jload{display:flex;align-items:center;gap:12px;padding:18px 20px;color:var(--sub)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid #d3e3fd;border-top-color:var(--m3);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.jhint{padding:14px 20px;color:var(--sub)}
.jroutes{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;scrollbar-width:none}
.jr{flex:none;min-width:150px;max-width:220px;border:1px solid var(--line);border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;align-items:flex-start;text-align:start;gap:1px}
.jr b{font-size:17px;font-weight:500;color:var(--txt)}
.jr span{font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.jr.on{border:2px solid var(--m3);background:#f4f8fe}
.jr.on b{color:var(--green)}
.jtl{display:flex;height:22px;margin:4px 16px 0;border-radius:11px;overflow:hidden;direction:ltr}
.jtl span{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;min-width:3px}
[dir=rtl] .jtl{direction:rtl}
.jtimes{display:flex;justify-content:space-between;margin:3px 18px 0;font-size:12px;color:var(--sub)}
.jleg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 16px 0;font-size:12px;color:#3c4043}
.jleg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:5px}
.jsum{margin:10px 18px 0;font-size:14px}
.jcta{display:flex;gap:8px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none}
.jstops{margin:8px 18px 0}
.jfull{border-top:1px solid #eee;margin-top:6px;padding-bottom:28px}
.jset{display:flex;flex-wrap:wrap;gap:10px 14px;padding:12px 16px;border-bottom:1px solid #eee;font-size:12.5px;color:var(--sub)}
.jset label{display:flex;flex-direction:column;gap:4px}
.jset select{border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:14px;background:#fff;color:var(--txt)}
.jset label.cb{flex-direction:row;align-items:center;gap:8px;color:var(--txt);font-size:13.5px;width:100%}
.jgh{display:flex;align-items:center;gap:8px;padding:12px 16px 6px;position:sticky;top:26px;background:#fff;z-index:1}
.jgh i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.jgh b{font-weight:500;font-size:15px;color:var(--c)}
.jrow{display:flex;gap:12px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid #f1f3f4}
.jrow.focus{background:#fef7e0}
.jmk{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font:700 13px Roboto,Arial;flex:none;margin-top:2px;border:2.5px solid #fff;box-shadow:0 0 0 1px var(--c)}
.jmk.est{background:#fff;color:var(--c);border-color:var(--c);box-shadow:none}
.jmk.stop{box-shadow:0 0 0 3px #202124}
.jrb{flex:1;min-width:0}
.jrn{font-size:15px;font-weight:500}
.jrt{font-size:13px;margin-top:3px;color:#3c4043}
.jrt b{font-weight:500}
.jri{font-size:12.5px;margin-top:3px;color:var(--sub)}
.jri .ok{color:var(--green);font-weight:500}
.jri .warn{color:#b06000;font-weight:500}
.jest{color:var(--sub);font-style:italic}
.jadd{flex:none;height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--line);color:var(--m3);font-size:13px;font-weight:500;white-space:nowrap;margin-top:2px}
.jadd.on{background:var(--m3);color:#fff;border-color:var(--m3)}
@media (min-width:900px){
  body.journey #sheet.on{display:block!important;left:12px;right:auto;width:400px;top:178px;border-radius:20px 20px 0 0}
  #jtop{width:424px;right:auto}
  .jfab{bottom:84px;width:44px;height:44px}
}

/* journey discoverability */
.jfab{width:auto;border-radius:25px;padding:0 18px 0 14px;gap:8px;font-weight:500;font-size:15px}
.jfab svg{width:22px;height:22px}
.mchip.jchip{background:var(--m3);color:#fff;box-shadow:0 1px 3px rgba(11,87,208,.4)}
.mchip.jchip .ic{width:17px;height:17px}
#jtip{display:none;position:absolute;inset-inline-end:14px;bottom:calc(var(--sheet-h) + 140px);width:min(300px,calc(100% - 28px));background:#202124;color:#fff;border-radius:16px;padding:14px 16px;z-index:7;box-shadow:0 6px 18px rgba(0,0,0,.35)}
#jtip.on{display:block;animation:tipin .35s ease-out}
#jtip::after{content:"";position:absolute;inset-inline-end:44px;bottom:-8px;border:8px solid transparent;border-top-color:#202124;border-bottom:0}
#jtip b{font-size:15px;font-weight:500;display:block}
#jtip p{margin:6px 0 0;font-size:13px;line-height:1.45;color:#e8eaed}
#jtip .row{margin-top:12px}
#jtip .btn.o{background:transparent;color:#8ab4f8;border-color:#5f6368}
.tip-new{display:inline-block;background:#8ab4f8;color:#202124;font:700 10px Roboto,Arial;border-radius:4px;padding:2px 6px;margin-bottom:6px;letter-spacing:.5px}
@keyframes tipin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.journey #jtip{display:none!important}
.jpromo{display:flex;gap:12px;align-items:flex-start;margin:8px 12px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#e8f0fe,#e6f4ea);color:var(--txt)}
.jpromo b{font-weight:500;font-size:15px}
.jpromo .btn{margin-top:8px}
.jpromo .iconbtn{width:32px;height:32px;margin-inline-start:auto;flex:none}
.jpi{width:36px;height:36px;border-radius:50%;background:var(--m3);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
@media (min-width:900px){#jtip{bottom:140px}.jfab{height:44px}}

/* ---------- reviews, photos, freshness, inbox ---------- */
.stars{position:relative;display:inline-block;font-size:14px;letter-spacing:1px;line-height:1;background:linear-gradient(90deg,#fbbc04 var(--p),#dadce0 var(--p));-webkit-background-clip:text;background-clip:text;color:transparent;direction:ltr;font-family:Arial,sans-serif}
.stars.big{font-size:20px}
.rtl{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;color:var(--txt)}
.rtl b{font-weight:500}
.sh-rt{display:flex;align-items:center;gap:6px;margin:4px 20px 0;font-size:14px}
.sh-rt b{font-weight:500}
.frl{margin-top:4px}
.fr{font-size:12.5px;font-weight:500}
.fr.ok{color:var(--green)}
.fr.warn{color:#b06000}
.fr.old{color:var(--red)}
.frs{font-size:11px;font-weight:500;margin-top:2px}
.frs.warn{color:#b06000}
.frs.old{color:var(--red)}
.frb{display:block}
.frb b{display:block;margin-bottom:2px}
.frb .btn{margin-top:8px}
.pstrip{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 12px;scrollbar-width:none}
.pth{flex:none;width:120px;height:96px;border-radius:12px;overflow:hidden;background:#f1f3f4}
.pth img{width:100%;height:100%;object-fit:cover;display:block}
.pth.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--m3);font-size:12.5px;font-weight:500;border:1px dashed #aecbfa;background:#f4f8fe;padding:6px;text-align:center}
.pth.add .ic{width:24px;height:24px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:12px}
.pgrid button{aspect-ratio:1;overflow:hidden;border-radius:6px;background:#f1f3f4}
.pgrid img{width:100%;height:100%;object-fit:cover;display:block}
.rvsum{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.rvbig{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:92px}
.rvbig b{font-size:44px;font-weight:400;line-height:1}
.rvbars{flex:1;display:flex;flex-direction:column;gap:5px}
.rvbars div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub)}
.rvbars i{flex:1;height:8px;border-radius:4px;background:#e8eaed;overflow:hidden;display:block}
.rvbars i b{display:block;height:100%;background:#fbbc04;border-radius:4px}
[dir=rtl] .rvbars i b{margin-inline-start:auto}
.facl{display:flex;flex-direction:column}
.fac{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f1f3f4;font-size:14px}
.fac .fi{width:26px;text-align:center;font-size:17px}
.fac .fn{flex:1}
.fac .fs{font-size:12px;color:var(--sub);text-align:end}
.fac.yes .fs{color:var(--green);font-weight:500}
.fac.no .fs{color:var(--red)}
.fac.unk{opacity:.75}
.rv{padding:12px 0;border-bottom:1px solid #eee}
.rvh{display:flex;gap:10px;align-items:center}
.rvh .av{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font:500 14px Roboto,Arial;flex:none}
.rvh b{font-weight:500}
.rv p{margin:8px 0 0;line-height:1.5;white-space:pre-wrap}
.starpick{display:flex;justify-content:center;gap:6px;margin:6px 0 2px;direction:ltr}
.starpick button{font-size:38px;color:#dadce0;line-height:1;padding:2px}
.starpick button.on{color:#fbbc04}
.center{text-align:center}
.q{display:flex;flex-direction:column;gap:6px;padding:9px 0;border-bottom:1px solid #f1f3f4;font-size:14px}
.qa{display:flex;gap:6px}
.qa button{height:32px;padding:0 14px;border-radius:16px;border:1px solid var(--line);font-size:13px;color:#3c4043}
.qa button.on{background:var(--m3t);border-color:var(--m3t);color:#041e49;font-weight:500}
.pickrow{display:flex;gap:8px;flex-wrap:wrap}
.pickrow label.btn{cursor:pointer}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.thumbs span{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:2px;inset-inline-end:2px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1}
.lb{text-align:center}
.lb img{max-width:100%;max-height:70vh;border-radius:8px}
.lb p{margin:8px 0 12px}
.ocrcta{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px;border-radius:12px;background:#f4f8fe;border:1px solid #d3e3fd}
.ocrcta b{font-weight:500}
.ocrcta .btn{margin-top:8px}
.aiic{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#4285f4,#9b72cb,#d96570);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.aiic .ic{width:20px;height:20px}
.ocrhow{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;margin-bottom:14px}
.ocrimg{width:100%;max-height:260px;object-fit:contain;border-radius:10px;background:#f1f3f4;display:block}
.ocrimg.sm{max-height:150px;margin-bottom:8px;cursor:zoom-in}
#mbox .tgrid{grid-template-columns:62px 1fr 1fr 56px}
.tgrid input.chg,.f input.chg{background:#fef7e0;border-color:#f9ab00}
.now{text-align:center;font-size:11px}
.ib{border:1px solid #e0e0e0;border-radius:14px;padding:12px;margin-bottom:12px}
.ib-h{font-size:14px;margin-bottom:8px}
.ib-img{width:100%;max-height:200px;object-fit:contain;background:#f1f3f4;border-radius:8px;cursor:zoom-in}
.cmp{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.cmp th{text-align:start;font-weight:500;color:var(--sub);font-size:11.5px;padding:4px 6px;border-bottom:1px solid #eee}
.cmp td{padding:6px;border-bottom:1px solid #f4f4f4}
.cmp tr.chg td{background:#fef7e0}
.cmp b{font-weight:500}
.ibph{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ibph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:zoom-in}
.ibph .row{margin-top:4px}
.ibsec{border-top:1px solid #eee}
.h3.sp{padding:0 16px}

.f label.btn{flex-direction:row;color:#fff;font-size:13.5px}
.f label.btn.o{color:var(--blue)}
.notice b{font-weight:500}

/* ---------- accounts, roles ---------- */
.acard{margin:8px 12px;padding:14px;border:1px solid #e0e0e0;border-radius:16px;background:#fff}
.acard.signin{text-align:center}
.acard.signin>b{display:block;font-size:17px;font-weight:500;margin-top:6px}
.acc-hero{width:52px;height:52px;border-radius:50%;background:var(--m3t);color:var(--m3);display:flex;align-items:center;justify-content:center;margin:0 auto}
.acc-hero .ic{width:28px;height:28px}
.gbtn{background:#fff!important;color:#3c4043!important;border:1px solid var(--line);width:100%;padding:12px;margin-top:12px;gap:10px}
.or{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--sub);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:#e0e0e0}
.demoacc{display:flex;flex-direction:column;gap:6px;margin-top:12px;text-align:start}
.aopt{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #e0e0e0;border-radius:12px;text-align:start}
.aopt b{display:block;font-weight:500}
.aopt .sub{display:block}
.av2,.av3{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font:500 15px Roboto,Arial;flex:none}
.av3{width:48px;height:48px;font-size:20px}
.acard.prof{display:flex;gap:14px;align-items:center}
.acard.prof b{font-size:16px;font-weight:500}
.rolec{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.rc{font-size:11px;font-weight:500;border-radius:10px;padding:2px 8px;background:#f1f3f4;color:#3c4043}
.rc.sup{background:#fce8e6;color:#a50e0e}
.rc.com{background:#e6f4ea;color:#0d652d}
.rc.new{background:#e8f0fe;color:#174ea6}
.arow{display:flex;align-items:center;gap:12px;width:calc(100% - 24px);margin:6px 12px;padding:12px;border:1px solid #e0e0e0;border-radius:14px;text-align:start;background:#fff}
.arow>span:nth-child(2){flex:1;min-width:0}
.arow b{display:block;font-weight:500}
.arow .sub{display:block}
.aico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--m3t);color:var(--m3)}
.aico.sup{background:#fce8e6;color:#c5221f}
.aico.com{background:#e6f4ea;color:var(--green)}
.acard.cta{display:flex;gap:12px;align-items:flex-start}
.acard.cta b{font-weight:500}
.acard.cta .btn{margin-top:8px}
.pushrow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding-bottom:8px}
.pushrow b{font-weight:500}
.nrow{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:start;padding:9px 0;border-top:1px solid #f1f3f4}
.nrow b{display:block;font-weight:500;font-size:13.5px}
.nrow .sub{display:block}
.nk{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:var(--m3)}
.nk.times{background:var(--green)}
.nk.event{background:#e8710a}
.frow{display:flex;align-items:center;gap:8px;border-top:1px solid #f1f3f4;padding:6px 0}
.frow:first-child{border-top:0}
.fl2{flex:1;text-align:start;min-width:0}
.fl2 b{display:block;font-weight:500}
.fl2 .sub{display:block}
.reqs{padding:6px 0;border-bottom:1px solid #f1f3f4}
.st{font-size:11px;font-weight:500;border-radius:10px;padding:2px 8px;background:#f1f3f4}
.st.pending{background:#fef7e0;color:#7a5b00}
.st.approved,.st.verified{background:#e6f4ea;color:#0d652d}
.st.rejected,.st.suspended{background:#fce8e6;color:#a50e0e}
.seg2{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg2 label{flex:1;display:block!important;cursor:pointer}
.seg2 input{position:absolute;opacity:0;pointer-events:none}
.seg2 span{display:block;text-align:center;padding:9px 6px;font-size:13px;color:#3c4043}
.seg2 input:checked+span{background:var(--m3t);color:#041e49;font-weight:500}
.prs{display:flex;flex-wrap:wrap;gap:6px}
.chipcb{display:inline-flex!important;flex-direction:row!important;cursor:pointer}
.chipcb input{position:absolute;opacity:0;pointer-events:none}
.chipcb span{border:1px solid var(--line);border-radius:16px;padding:6px 12px;font-size:13px;color:#3c4043}
.chipcb input:checked+span{background:var(--m3t);border-color:var(--m3t);color:#041e49;font-weight:500}
.locbox{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.und{align-items:flex-start!important;background:#fef7e0;border-radius:10px;padding:10px!important;line-height:1.45}
.und input{margin-top:3px}
.ahead.sup{background:#202124}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;font-size:13.5px;margin:6px 0 10px}
.kv span{color:var(--sub)}
.kv b{font-weight:500;word-break:break-word}
.kv b.ok{color:var(--green)}
.kv a{color:var(--blue);font-weight:400;font-size:12.5px}
.rjn{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px}
.sq{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px}
.adms{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.admc{display:inline-flex;align-items:center;gap:4px;background:#e6f4ea;color:#0d652d;border-radius:12px;padding:3px 4px 3px 10px;font-size:12px}
.admc button{width:20px;height:20px;border-radius:50%;color:#0d652d;font-size:15px;line-height:1}
/* live trip */
.tbar{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:0 16px 8px}
.tbar b{font-size:17px;font-weight:500}
.tlate{font-size:13px;font-weight:500;text-align:end}
.tlate .ok{color:var(--green)}
.tlate .warn{color:#b06000}
.tstop{display:flex;gap:12px;padding:10px 16px;border-top:1px solid #f1f3f4}
.tstop.alert{background:#fffbea}
.talert{color:#b06000;font-size:13px;font-weight:500;margin-top:4px}
.talt{margin-top:6px;font-size:13px;background:#e6f4ea;border-radius:10px;padding:8px 10px;color:#0d652d}
.talt .row{margin-top:6px}
.tdemo{margin:10px 16px 0;padding:10px;border:1px dashed #c4c7c5;border-radius:10px}
.tdemo .row{margin-top:6px}
#tripbar{display:none;position:absolute;left:12px;right:12px;top:calc(118px + env(safe-area-inset-top));z-index:5}
#tripbar.on{display:block}
#tripbar button{display:flex;gap:10px;align-items:center;width:100%;max-width:420px;background:#0b57d0;color:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 2px 8px rgba(0,0,0,.3);text-align:start}
#tripbar b{display:block;font-weight:500}
#tripbar .sub{color:#d3e3fd;display:block}
.spin2{width:12px;height:12px;border-radius:50%;background:#8ab4f8;box-shadow:0 0 0 0 rgba(138,180,248,.7);animation:pulse 1.6s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(138,180,248,.7)}70%{box-shadow:0 0 0 10px rgba(138,180,248,0)}100%{box-shadow:0 0 0 0 rgba(138,180,248,0)}}
@media (min-width:900px){#tripbar{top:14px;left:14px;right:auto;width:400px}}
[dir=rtl] .arow>svg:last-child,[dir=rtl] .arow>.ic:last-child{transform:scaleX(-1)}
/* ---------- Eid ---------- */
.eidmoon{width:36px;height:36px;border-radius:50%;background:#0d652d;color:#fde293;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.eidban{display:flex;align-items:center;gap:12px;width:calc(100% - 24px);margin:8px 12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,#e6f4ea,#fef7e0);border:1px solid #ceead6;text-align:start}
.eidban>span:nth-child(2){flex:1;min-width:0}
.eidban b{display:block;font-weight:500;color:#0d652d}
.eidban .sub{display:block}
.eidgo{font-size:13px;font-weight:500;color:#0b57d0;white-space:nowrap}
.eidcard{border:1px solid #ceead6;background:#f6fbf7;border-radius:16px;padding:12px;margin-bottom:12px}
.eidh{display:flex;gap:10px;align-items:center}
.eidh b{font-weight:500;font-size:15px;color:#0d652d}
.ejs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.ej{background:#0d652d;color:#fff;border-radius:10px;padding:5px 10px;font-weight:500;font-size:14px}
.eidp{display:flex;gap:6px;align-items:center;font-size:13px;color:#3c4043;margin-top:6px}
.eidp .ic,.eidp svg{width:16px;height:16px;flex:none}
.eidline{margin:2px 16px 6px;font-size:13px;color:#0d652d;font-weight:500}
.eidlist{padding:0 12px 16px}
.eidrow{display:flex;gap:10px;align-items:center;border:1px solid #e0e0e0;border-radius:14px;padding:10px 12px;margin-bottom:8px;background:#fff}
.eidrb{flex:1;min-width:0;text-align:start;display:flex;flex-direction:column;gap:2px}
.eidrb b{font-weight:500;font-size:15px}
.eidrb .ejs{margin:6px 0 2px}
.eidrb .ej{font-size:13px;padding:3px 8px}
.pill.sm{padding:6px 10px;font-size:12.5px;flex:none}
.eidadm{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #f1f3f4;flex-wrap:wrap}
.eidadm b{font-weight:500}
.eidform{margin-top:10px;padding:12px;border:1px dashed #c4c7c5;border-radius:12px}
.ejgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* ---------- legal, account footer, survey ---------- */
.legal{padding:0 16px 24px;font-size:14px;line-height:1.6;color:#3c4043}
.legal .h3{margin:18px 0 4px;color:#202124}
.legal ul{padding-inline-start:20px;margin:4px 0}
.legal li{margin:4px 0}
.legal a,.legal-note a,.lfoot a{color:#0b57d0}
.legal-note{font-size:12px;color:var(--sub);margin:10px 0 0;line-height:1.5}
.lfoot{text-align:center;font-size:12.5px;color:var(--sub);padding:8px 12px 24px}
.lfoot .link{font-size:12.5px;padding:0}
.link.r{color:#c5221f}
.link.back{display:block;padding:0;margin-bottom:2px;font-size:13px}
.notice.ok{background:#e6f4ea;color:#0d652d}
.survey{margin:8px 12px}
.csvbad{font-size:12.5px;color:#a50e0e;background:#fce8e6;border-radius:8px;padding:8px;margin-bottom:10px;max-height:140px;overflow:auto}
.res .eidline{margin:4px 0 0}
/* ---------- volunteers ---------- */
.rc.vol{background:#fef7e0;color:#7a5b00}
.aico.vol{background:#fef7e0;color:#b06000}
.arow .chev{font-size:22px;color:var(--sub)}
.vbar{display:flex;gap:8px;padding:0 12px 8px;align-items:center}
.vbar .btn{flex:1;gap:6px}
.vbar .sel{width:auto}
.vlist{padding:0 12px 8px}
.vrow{border:1px solid #e0e0e0;border-radius:14px;padding:10px 12px;margin-bottom:8px;background:#fff;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.vrow.mine{border-color:#f9ab00;background:#fffbea}
.vb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vb b{font-weight:500;font-size:15px}
.vacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%}
.st.vmine{background:#fef7e0;color:#7a5b00}
.vstat{display:flex;gap:8px;margin-bottom:10px}
.vstat span{flex:1;background:#f1f3f4;border-radius:12px;padding:8px;text-align:center;font-size:12px;color:var(--sub)}
.vstat b{display:block;font-size:18px;color:#202124;font-weight:500}
.vteam{display:flex;gap:8px;align-items:center;justify-content:space-between}
.gattr{font-size:11px;color:var(--sub);text-align:end;margin:0 16px 8px}

/* =====================================================================
   Google Maps look (Google Material 3): Google Sans, GM3 colours,
   Material Symbols, M3 navigation bar, chips, FABs and bottom sheet.
   ===================================================================== */
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/google-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/google-sans-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/google-sans-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/google-sans-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/google-sans-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/google-sans-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --blue:#0b57d0;--blued:#0842a0;--m3:#0b57d0;--m3t:#d3e3fd;--txt:#1f1f1f;--sub:#444746;--line:#c4c7c5;--bg:#f0f4f9;
  --green:#188038;--greend:#137333;--red:#b3261e;--amber:#f9ab00;
  --sec-c:#c2e7ff;--on-sec-c:#001d35;--on-prim-c:#041e49;--divider:#e1e3e1;--surf2:#e9eef6;
  --navh:72px;
  --e1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --e2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
  --e3:0 1px 3px rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);
}
body,bdi,.lang,input[type=time],input[type=date],input[type=email],input[type=tel],input[type=password],.mav{font-family:'Google Sans',Roboto,Arial,sans-serif}
html[lang=ur] body{font-family:'Noto Naskh Arabic','Google Sans',serif}
body{color:var(--txt);letter-spacing:.1px}
.ic{width:20px;height:20px}
.sub{color:var(--sub);font-size:13px}

/* bottom navigation bar (Material 3) */
#nav{height:calc(var(--navh) + env(safe-area-inset-bottom));border-top:0;background:#fff;box-shadow:0 -1px 0 var(--divider)}
#nav button{gap:4px;font-size:12px;font-weight:500;color:var(--sub);padding-top:4px}
#nav button.on{color:var(--txt);font-weight:700}
.nvi{display:flex;align-items:center;justify-content:center;width:56px;height:32px;border-radius:16px;transition:background .2s}
#nav button.on .nvi{background:var(--sec-c);color:var(--on-sec-c)}
#nav svg{width:24px;height:24px}
@media (max-width:899px){ body.m-map #mapwrap{bottom:calc(var(--navh) + env(safe-area-inset-bottom))} }

/* search bar: white pill, elevation 2, search icon, language, account avatar */
#msearch{height:52px;border-radius:26px;box-shadow:var(--e2);padding:0 6px 0 8px;gap:2px}
#msearch input{font-size:16px;color:var(--txt)}
#msearch input::placeholder{color:var(--sub)}
.mic{color:var(--sub)}
.mic .ic{width:24px;height:24px}
.mlangt{height:36px;padding:0 10px;border-radius:18px;color:var(--sub);font:500 14px 'Google Sans',Roboto,Arial;flex:none}
.mlangt .u{font:500 15px 'Noto Naskh Arabic',serif}
.mlangt:active{background:var(--surf2)}
.mav{width:32px;height:32px;margin:0 4px;background:var(--green);font-size:15px;font-weight:500}
.mav .ic{width:22px;height:22px}

/* chips: white, elevation 1, 32px, icon + label */
#mchips{gap:8px;padding:12px 2px 8px}
.mchip{height:32px;padding:0 14px 0 10px;border-radius:16px;box-shadow:var(--e1);font-size:14px;font-weight:500;color:var(--txt);gap:6px}
.mchip .ic{width:18px;height:18px;color:var(--sub)}
.mchip.on{background:var(--sec-c);color:var(--on-sec-c);box-shadow:var(--e1)}
.mchip.on .ic{color:var(--on-sec-c)}
.mchip.jchip{background:#fff;color:var(--txt);box-shadow:var(--e1)}
.mchip.jchip .ic{color:var(--blue);width:18px;height:18px}
.chip{height:32px;padding:0 14px;border-radius:8px;border-color:var(--line);font-size:14px;font-weight:500;color:var(--sub)}
.chip.on{background:var(--sec-c);border-color:var(--sec-c);color:var(--on-sec-c)}
.chip .ic{width:18px;height:18px}
.search{height:48px;border-radius:24px;box-shadow:var(--e2);color:var(--sub)}
.search input{font-size:16px}

/* map buttons: layers (small round), my location + directions (Material 3 FABs, location above directions) */
.sqbtn{width:40px;height:40px;box-shadow:var(--e2);color:var(--sub);top:calc(124px + env(safe-area-inset-top))}
.sqbtn svg{width:22px;height:22px}
.fab{width:56px;height:56px;border-radius:16px;box-shadow:var(--e3);color:var(--sub)}
.fab svg{width:24px;height:24px}
#locbtn{bottom:calc(var(--sheet-h) + 88px)}
.jfab,#jbtn.jfab{width:56px;height:56px;padding:0;border-radius:16px;background:var(--blue);color:#fff;bottom:calc(var(--sheet-h) + 16px)}
.jfab svg{width:26px;height:26px}
#jbtnl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:900px){ .jfab,#jbtn.jfab{bottom:24px;width:56px;height:56px} #locbtn{bottom:96px} }

/* bottom sheet */
#sheet{border-radius:28px 28px 0 0;box-shadow:var(--e3)}
#sheet.full{border-radius:28px 28px 0 0}
.grab span{width:32px;height:4px;background:#79747e;opacity:.4}
.sh-t h2{font-size:22px;font-weight:400;color:var(--txt);line-height:28px}
.sh-head .sh-rt{margin:2px 0 0;font-size:14px;color:var(--sub);display:flex;align-items:center;gap:4px}
.sh-head .sh-rt>span:first-child{color:var(--txt)}
.sh-cat{font-size:14px;color:var(--sub);margin-top:2px}
.sh-open{font-size:14px;margin:6px 20px 0}
.sh-open .g{color:var(--green);font-weight:500}
.sh-x{width:36px;height:36px;background:var(--surf2);color:var(--sub)}
.sh-x .ic{width:20px;height:20px}
.sh-ver{font-size:14px}

/* buttons: filled primary + tonal pills (place actions) */
.pill{height:40px;padding:0 16px;border-radius:20px;font-size:14px;font-weight:500;gap:8px;background:var(--m3t);color:var(--on-prim-c)}
.pill .ic{width:18px;height:18px}
.pill.pri{background:var(--blue);color:#fff}
.btn{height:40px;padding:0 24px;border-radius:20px;font-size:14px;font-weight:500;background:var(--blue)}
.btn:hover{background:var(--blued);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.btn.o{background:#fff;color:var(--blue);border:1px solid #747775}
.btn.o:hover{background:#f2f6fc;box-shadow:none}
.btn.g{background:var(--green)}
.btn.r{background:#fff;color:var(--red);border:1px solid #747775}
.btn.s{height:32px;padding:0 16px;font-size:13px}
.btn.wide,.btn.wa{height:48px;border-radius:24px;font-size:15px}
.link{color:var(--blue);font-weight:500}

/* mosque page actions: same pill row as Google Maps' place page on phones */
@media (max-width:899px){
  .acts{justify-content:flex-start;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--divider)}
  .acts::-webkit-scrollbar{display:none}
  .acts .act{flex:none;flex-direction:row;height:40px;padding:0 16px;border-radius:20px;gap:8px;background:var(--m3t);color:var(--on-prim-c);font-size:14px;font-weight:500;width:auto;min-width:0}
  .acts .act i{width:auto;height:auto;border:0;background:none;color:inherit;margin:0}
  .acts .act i .ic{width:18px;height:18px}
  .acts .act.p{background:var(--blue);color:#fff}
  .acts .act.p i{background:none}
}

/* tabs, headings, lists */
.tabs{border-bottom:1px solid var(--divider)}
.tabs button{font-size:14px;color:var(--sub);border-bottom:0;position:relative}
.tabs button.on{color:var(--blue)}
.tabs button.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:min(64px,70%);height:3px;border-radius:3px 3px 0 0;background:var(--blue)}
.hhead h1{font-size:22px;font-weight:400;color:var(--txt)}
.mtitle h1{font-weight:400}
.h3{color:var(--txt)}
.tt th{color:var(--sub);font-size:12px}
.tt td,.pt td{border-bottom-color:var(--divider)}
.pt th{border-bottom-color:var(--divider)}
.tt .nx,.pt tr.nx td{background:#e6f4ea}
.notice.info,.notice.ann{background:var(--bg);color:var(--txt)}
.notice.info .ic,.notice.ann .ic{color:var(--blue)}
.lang{border-color:var(--line);height:32px;padding:0 12px;border-radius:16px;font-size:13px;color:var(--sub);display:inline-flex;align-items:center}
.lang b{color:var(--blue)}
.res{border-bottom-color:var(--divider)}
.res-n{font-size:16px;color:var(--txt)}
.rdir{background:var(--m3t);color:var(--on-prim-c)}

/* inputs: Material 3 outlined fields */
.f input:not([type=checkbox]):not([type=radio]):not([type=file]),.f select,.f textarea,.tgrid input,.sel,.sq,.rjn{border:1px solid #747775;border-radius:4px}
.f input:focus,.f select:focus,.f textarea:focus,.tgrid input:focus,.sel:focus,.sq:focus{outline:0;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}

/* snackbar (toast) */
#toast{background:#313033;color:#f4eff4;border-radius:4px;font-size:14px;box-shadow:var(--e3)}
.rdir{border:0}
#toast{bottom:calc(var(--navh) + 16px + env(safe-area-inset-bottom))}
.demo-note{left:12px!important;right:auto!important;transform:none!important;max-width:calc(100% - 100px)}
.lang{gap:4px}
.demo-note{left:auto!important;inset-inline-start:12px!important;inset-inline-end:auto!important}
@media (min-width:900px){ .zoom{bottom:92px;inset-inline-end:22px} #locbtn{bottom:188px} }

/* =====================================================================
   Mosque TV screen (16:9 landscape, also works on portrait screens)
   ===================================================================== */
body.tvmode #nav,body.tvmode #mapwrap{display:none!important}
body.tvmode #panel{width:100%!important;max-width:none;box-shadow:none}
body.tvmode #view{padding:0;overflow:hidden}
body.tvmode{cursor:none}
body.tvmode.tv-ptr{cursor:default}
.tv{position:fixed;inset:0;display:grid;grid-template-rows:auto auto 1fr auto;gap:1.5vw;padding:2vw 2.4vw 1.6vw;font-family:'Google Sans',Roboto,Arial,sans-serif;overflow:hidden;transition:transform 2s;font-variant-numeric:tabular-nums;
  --acc:#f6c453;--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.14);--sub:rgba(255,255,255,.72);--on:#f6c453;--onTxt:#1d1600}
.tv-green{background:radial-gradient(120% 90% at 50% 0%,#15664d 0%,#0a3d2d 55%,#05231a 100%);color:#fff}
.tv-black{background:#000;color:#f1f1f1;--acc:#fbbc04;--card:#121212;--line:#262626;--sub:#a8a8a8;--on:#fbbc04;--onTxt:#141000}
.tv-light{background:#f5f7f5;color:#1f1f1f;--acc:#137333;--card:#fff;--line:#dce2dc;--sub:#5f6368;--on:#188038;--onTxt:#fff}
.tv-msg{margin:auto;font-size:3vw}
.tv .tv-ur,.tv-mnu,.tv-ar{font-family:'Noto Naskh Arabic',serif}
/* header */
.tv-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw}
.tv-mn{font-size:3vw;font-weight:500;line-height:1.15}
.tv-mnu{font-size:2.4vw;color:var(--sub);line-height:1.5}
.tv-area{font-size:1.6vw;color:var(--sub);margin-top:.3vw}
.tv-clock{font-size:8.4vw;font-weight:500;line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;justify-content:center;white-space:nowrap}
.tv-clock small{font-size:2.4vw;color:var(--sub);margin-inline-start:.6vw;letter-spacing:0;font-weight:400}
.tv-dates{text-align:end;font-size:1.7vw;line-height:1.45}
.tv-hij{color:var(--acc);font-weight:500}
.tv-rtl .tv-dates{text-align:start}
/* next jamat strip */
.tv-next{display:flex;align-items:center;gap:1.6vw;background:var(--card);border:.15vw solid var(--line);border-inline-start:.5vw solid var(--acc);border-radius:1.2vw;padding:.9vw 1.8vw;font-size:2.1vw}
.tv-next .tv-nl{color:var(--sub);font-size:1.6vw}
.tv-next b{font-weight:500}
.tv-next .tv-nt{font-weight:700;font-size:2.6vw}
.tv-cd{margin-inline-start:auto;color:var(--acc);font-weight:700;font-size:2.8vw}
.tv-tom{color:var(--sub);font-size:1.5vw}
.tv-next .tv-en,.tv-next .tv-ur,.tv-lab .tv-en,.tv-lab .tv-ur{display:inline}
.tv-next .tv-ur::before,.tv-lab .tv-ur::before{content:" · ";color:var(--sub)}
.tv-next .tv-ur,.tv-lab .tv-ur{font-size:.95em}
/* prayer cards */
.tv-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:1.1vw;min-height:0}
.tv-card{background:var(--card);border:.15vw solid var(--line);border-radius:1.6vw;padding:1.2vw 1vw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5vw;text-align:center;min-width:0;transition:transform .4s,background .4s}
.tv-pn{font-size:2.3vw;font-weight:500;line-height:1.2}
.tv-pn .tv-en,.tv-pn .tv-ur{display:block}
.tv-pn .tv-ur{font-size:.8em;opacity:.85;line-height:1.5}
.tv-ar{font-size:1.9vw;color:var(--sub);line-height:1.4}
.tv-row{display:flex;flex-direction:column;align-items:center;gap:.1vw}
.tv-lab{font-size:1.05vw;color:var(--sub);letter-spacing:.06em;text-transform:uppercase}
.tv-a{font-size:2.3vw;color:var(--sub)}
.tv-j{font-size:3.9vw;font-weight:700;line-height:1.1}
.tv small{font-size:.42em;margin-inline-start:.2em;font-weight:500;letter-spacing:.03em}
.tv-x{font-size:1.2vw;color:var(--sub)}
.tv-sun{opacity:.78}
.tv-sun .tv-j{font-size:3vw;font-weight:500}
.tv-on{background:var(--on);color:var(--onTxt);border-color:var(--on);transform:scale(1.045);box-shadow:0 1vw 3vw rgba(0,0,0,.35)}
.tv-on .tv-lab,.tv-on .tv-a,.tv-on .tv-ar,.tv-on .tv-x,.tv-on .tv-ur::before{color:inherit;opacity:.78}
.tv-live{border-color:var(--acc);animation:tvglow 2s ease-in-out infinite}
@keyframes tvglow{50%{box-shadow:0 0 0 .5vw rgba(246,196,83,.35)}}
/* footer: scrolling line + QR */
.tv-foot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2vw;min-height:7vw}
.tv-tick{overflow:hidden;white-space:nowrap;font-size:1.9vw;background:var(--card);border-radius:1.2vw;padding:1vw 0;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tv-tr{display:inline-flex;animation:tvscroll var(--dur,40s) linear infinite}
.tv-tr>span{padding-inline-end:6vw}
.tv-tr i{font-style:normal;color:var(--acc);margin:0 1.6vw}
.tv-quiet{padding:0 2vw;color:var(--sub)}
@keyframes tvscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tv-qr{display:flex;align-items:center;gap:1vw;font-size:1.1vw;color:var(--sub);max-width:16vw}
.tv-qrc{width:7vw;height:7vw;background:#fff;border-radius:.6vw;padding:.25vw;flex:none}
.tv-qrc svg{width:100%;height:100%;display:block}
/* full-screen countdown, jamat in progress, azan banner */
.tv-over{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vw;z-index:5;background:inherit;text-align:center}
.tv-green .tv-over{background:radial-gradient(120% 90% at 50% 30%,#15664d 0%,#0a3d2d 55%,#05231a 100%)}
.tv-black .tv-over{background:#000}
.tv-light .tv-over{background:#f5f7f5}
.tv-op{font-size:3.8vw;font-weight:500}
.tv-op .tv-en,.tv-op .tv-ur,.tv-pp .tv-en,.tv-pp .tv-ur,.tv-sil .tv-en,.tv-sil .tv-ur{display:block}
.tv-op .tv-ur,.tv-pp .tv-ur{font-size:.85em;opacity:.85}
.tv-big{font-size:17vw;font-weight:700;line-height:1;color:var(--acc);letter-spacing:-.02em}
.tv-big.tv-dim{font-size:11vw;color:inherit;opacity:.45}
.tv-pp{font-size:3vw;color:var(--sub)}
.tv-sil{font-size:2.6vw;background:var(--card);border:.15vw solid var(--line);border-radius:4vw;padding:1.1vw 3vw;line-height:1.5}
.tv-sil .tv-ur{font-size:.9em}
.tv-azan{position:fixed;left:50%;bottom:12vw;transform:translateX(-50%);background:var(--acc);color:var(--onTxt);border-radius:4vw;padding:1.2vw 4vw;font-size:3vw;font-weight:700;z-index:4;box-shadow:0 1vw 3vw rgba(0,0,0,.4);animation:tvpulse 1.6s ease-in-out infinite;text-align:center}
.tv-light .tv-azan{color:#fff}
.tv-azan .tv-en,.tv-azan .tv-ur{display:block}
@keyframes tvpulse{50%{transform:translateX(-50%) scale(1.04)}}
.tv-fs{position:fixed;top:1vw;inset-inline-end:1vw;z-index:9;opacity:0;pointer-events:none;background:rgba(0,0,0,.55);color:#fff;border-radius:2vw;padding:.6vw 1.4vw;font-size:1.2vw;transition:opacity .3s}
body.tv-ptr .tv-fs,.tv-fs:focus{opacity:1;pointer-events:auto}
/* portrait screens */
@media (orientation:portrait){
  .tv{grid-template-rows:auto auto 1fr auto;gap:2.4vw;padding:4vw}
  .tv-head{grid-template-columns:1fr;text-align:center;gap:1vw}
  .tv-dates,.tv-rtl .tv-dates{text-align:center;font-size:3.2vw}
  .tv-mn{font-size:5.4vw}.tv-mnu{font-size:4.4vw}.tv-area{font-size:3vw}
  .tv-clock{font-size:17vw}.tv-clock small{font-size:4.6vw}
  .tv-next{font-size:3.8vw}.tv-next .tv-nl{font-size:3vw}.tv-next .tv-nt{font-size:4.6vw}.tv-cd{font-size:5vw}
  .tv-grid{grid-template-columns:1fr;grid-auto-rows:1fr;gap:1.8vw}
  .tv-card{flex-direction:row;justify-content:space-between;padding:1.6vw 3vw;border-radius:2.4vw;text-align:start}
  .tv-card>.tv-pn{flex:1}
  .tv-pn{font-size:4.6vw}.tv-ar{font-size:3.6vw;flex:none;margin-inline-end:3vw}
  .tv-row{flex-direction:column;min-width:20vw}.tv-lab{font-size:2vw}.tv-a{font-size:4.2vw}.tv-j{font-size:6.8vw}.tv-x{display:none}
  .tv-on{transform:scale(1.02)}
  .tv-foot{grid-template-columns:1fr;gap:2vw}.tv-tick{font-size:3.6vw;padding:2vw 0}
  .tv-qr{max-width:none;justify-content:center;font-size:2.6vw}.tv-qrc{width:14vw;height:14vw}
  .tv-op{font-size:7vw}.tv-big{font-size:30vw}.tv-sil{font-size:4.6vw}.tv-azan{font-size:5.4vw;bottom:24vw}
}
/* committee settings */
.tvlink{font:500 12.5px/1.4 'Google Sans',Roboto,monospace;background:var(--bg);border-radius:8px;padding:10px 12px;word-break:break-all;color:var(--txt);margin:4px 0 8px;direction:ltr}
.tv-next .tv-ur::before,.tv-lab .tv-ur::before{content:none}
.tv-next .tv-en+.tv-ur,.tv-lab .tv-en+.tv-ur{margin-inline-start:.6em}
.tv-next .tv-en:has(+.tv-ur)::after,.tv-lab .tv-en:has(+.tv-ur)::after{content:"·";margin-inline-start:.6em;color:var(--sub)}
.tv-on .tv-en:has(+.tv-ur)::after{color:inherit}

/* =====================================================================
   Mosque TV screen: refined arches (light / dark / automatic)
   ===================================================================== */
.tva{padding:0;gap:0;grid-template-rows:auto auto 1fr auto auto;background:var(--bg);color:var(--ink);transition:background .8s,color .8s}
.tva-light{--bg:#f8f3e8;--ink:#1c2a4a;--sub:#6e6656;--gold:#9c7633;--hair:#e0d1aa;--card:#fffdf8;--on-bg:#1c2a4a;--on-ink:#ffffff;--on-sub:rgba(255,255,255,.7);--on-gold:#e7c983;--shadow:0 1.2vw 2.4vw rgba(28,42,74,.10);--band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 3l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' fill='none' stroke='%23c7ad74' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='0' r='1.3' fill='%23c7ad74'/%3E%3Ccircle cx='28' cy='28' r='1.3' fill='%23c7ad74'/%3E%3C/svg%3E")}
.tva-dark{--bg:#0d1527;--ink:#f2ebdb;--sub:#a39c8b;--gold:#d8b360;--hair:#2a3858;--card:#131e37;--on-bg:#d8b360;--on-ink:#17110a;--on-sub:#4d3f1b;--on-gold:#17110a;--shadow:0 1.2vw 2.4vw rgba(0,0,0,.35);--band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 3l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' fill='none' stroke='%236d5c30' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='0' r='1.3' fill='%236d5c30'/%3E%3Ccircle cx='28' cy='28' r='1.3' fill='%236d5c30'/%3E%3C/svg%3E")}
.tva-band{height:1.6vw;background-image:var(--band);background-size:1.6vw 1.6vw;background-position:center;opacity:.9}
.tva .tv-ur,.tva-mnu,.tva-hu,.ar-ar{font-family:'Noto Naskh Arabic',serif}
/* header */
.tva-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw;padding:1.4vw 3.3vw 1.1vw}
.tva-mn{font-size:2.5vw;font-weight:500;letter-spacing:.01em;line-height:1.15}
.tva-mnu{font-size:2vw;color:var(--sub);line-height:1.5}
.tva-area{font-size:1.35vw;color:var(--sub);margin-top:.2vw}
.tva-clock{display:flex;align-items:center;justify-content:center;gap:.7vw;line-height:1;font-variant-numeric:tabular-nums}
.tva-clock>#tvclk{font-size:8.6vw;font-weight:400;letter-spacing:-.03em}
.tva-ss{display:flex;flex-direction:column;gap:.35vw;color:var(--sub)}
.tva-ss #tvsec{font-size:2.1vw;font-weight:500;color:var(--gold)}
.tva-ss #tvap{font-size:1.4vw;font-weight:500;letter-spacing:.1em}
.tva-dates{text-align:end;line-height:1.5}
.tva-g{font-size:1.45vw}
.tva-h{font-size:1.45vw;color:var(--gold);font-weight:500}
.tva-hu{font-size:1.35vw;color:var(--sub)}
.tv-rtl .tva-dates{text-align:start}
/* arches */
.tva-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1.15vw;padding:.4vw 3.3vw 1.2vw;min-height:0}
.ar{position:relative;background:var(--card);border:.1vw solid var(--hair);border-radius:7.2vw 7.2vw .9vw .9vw;box-shadow:var(--shadow);display:flex;min-width:0;transition:background .6s,transform .6s}
.ar::before{content:"";position:absolute;inset:.55vw;border:.06vw solid var(--hair);border-radius:6.65vw 6.65vw .5vw .5vw;pointer-events:none}
.ar-in{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45vw;padding:3.4vw .8vw 1.6vw;text-align:center}
.ar-tag{font-size:.82vw;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--on-gold);height:1.2vw;margin-bottom:.4vw}
.ar-blank{visibility:hidden}
.ar-tag2{color:var(--gold)}
.ar-n{font-size:2.25vw;font-weight:500;line-height:1.15}
.ar-n .tv-en,.ar-n .tv-ur{display:block}
.ar-n .tv-ur{font-size:.78em;color:var(--sub);font-weight:400;line-height:1.55}
.ar-ar{font-size:1.7vw;color:var(--sub);line-height:1.45}
.ar-rule{display:flex;align-items:center;gap:.5vw;width:6vw;margin:.5vw 0 .6vw}
.ar-rule::before,.ar-rule::after{content:"";flex:1;height:.07vw;background:var(--hair)}
.ar-rule i{width:.45vw;height:.45vw;transform:rotate(45deg);background:var(--gold)}
.ar-a{font-size:1.5vw;color:var(--sub);font-variant-numeric:tabular-nums}
.ar-lab{font-size:.78vw;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ar-a .ar-lab{margin-inline-end:.4vw;vertical-align:.15em}
.ar-jl{margin-top:.5vw}
.ar-j{font-size:3.7vw;font-weight:600;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ar-js{font-size:2.8vw;font-weight:400;color:var(--sub)}
.ar-x{font-size:1vw;color:var(--sub);min-height:1.3vw;line-height:1.35}
.ar-cd{font-size:1.45vw;font-weight:700;color:var(--on-gold);margin-top:.3vw;font-variant-numeric:tabular-nums}
.ar.tom .ar-cd{color:var(--gold)}
.ar.sun{background:transparent;box-shadow:none}
.ar.on{background:var(--on-bg);color:var(--on-ink);border-color:var(--on-bg);transform:translateY(-.6vw)}
.ar.on::before{border-color:rgba(255,255,255,.28)}
.tva-dark .ar.on::before{border-color:rgba(0,0,0,.25)}
.ar.on .ar-n .tv-ur,.ar.on .ar-ar,.ar.on .ar-a,.ar.on .ar-x{color:var(--on-sub)}
.ar.on .ar-lab{color:var(--on-gold)}
.ar.on .ar-rule::before,.ar.on .ar-rule::after{background:var(--on-sub)}
.ar.on .ar-rule i{background:var(--on-gold)}
.ar.live{border-color:var(--gold);animation:arglow 2.2s ease-in-out infinite}
@keyframes arglow{50%{box-shadow:0 0 0 .4vw rgba(216,179,96,.35)}}
/* footer */
.tva-foot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2vw;padding:0 3.3vw 1.1vw}
.tva-tick{overflow:hidden;white-space:nowrap;font-size:1.55vw;background:var(--card);border:.08vw solid var(--hair);border-radius:4vw;padding:.95vw 0;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tva-tick .tv-tr i{font-style:normal;color:var(--gold);margin:0 1.6vw}
.tva-qr{display:flex;align-items:center;gap:.9vw;font-size:1vw;color:var(--sub);max-width:15vw;line-height:1.35}
.tva-qrc{width:5.6vw;height:5.6vw;background:#fff;border-radius:.6vw;padding:.25vw;flex:none;border:.08vw solid var(--hair)}
.tva-qrc svg{width:100%;height:100%;display:block}
/* overlays */
.tva-over{position:fixed;inset:0;z-index:5;background:var(--bg);display:flex;align-items:center;justify-content:center}
.tva-mihrab{position:relative;width:44vw;height:86vh;border:.12vw solid var(--gold);border-radius:22vw 22vw 1vw 1vw;display:flex;align-items:center;justify-content:center;background:var(--card);box-shadow:var(--shadow)}
.tva-mihrab::before{content:"";position:absolute;inset:.9vw;border:.06vw solid var(--hair);border-radius:21vw 21vw .6vw .6vw}
.tva-mi{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4vw;text-align:center;padding-top:6vw}
.tva-op{font-size:2.8vw;font-weight:500;line-height:1.3}
.tva-op .tv-en,.tva-op .tv-ur,.tva-pp .tv-en,.tva-pp .tv-ur,.tva-sil .tv-en,.tva-sil .tv-ur,.tva-azan .tv-en,.tva-azan .tv-ur{display:block}
.tva-op .tv-ur,.tva-pp .tv-ur{font-size:.82em;color:var(--sub)}
.tva-big{font-size:12vw;font-weight:500;line-height:1;color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tva-big.tva-dim{font-size:8vw;color:var(--sub);font-weight:400}
.tva-pp{font-size:2.2vw;color:var(--sub)}
.tva-sil{font-size:1.6vw;color:var(--sub);border-top:.07vw solid var(--hair);padding-top:1.2vw;line-height:1.6}
.tva-azan{position:fixed;left:50%;bottom:9vw;transform:translateX(-50%);z-index:4;background:var(--on-bg);color:var(--on-ink);border-radius:4vw;padding:1vw 3.6vw;font-size:2.2vw;font-weight:600;text-align:center;box-shadow:var(--shadow);animation:tvpulse 1.8s ease-in-out infinite;line-height:1.35}
.tva-azan .tv-ur{font-size:.85em;font-weight:500}
/* portrait screens: two rows of three arches */
@media (orientation:portrait){
  .tva{grid-template-rows:auto auto 1fr auto auto}
  .tva-band{height:3vw;background-size:3vw 3vw}
  .tva-head{grid-template-columns:1fr;text-align:center;gap:1.2vw;padding:3vw 5vw 2vw}
  .tva-mn{font-size:5vw}.tva-mnu{font-size:4vw}.tva-area{font-size:2.8vw}
  .tva-clock>#tvclk{font-size:17vw}.tva-ss #tvsec{font-size:4.4vw}.tva-ss #tvap{font-size:2.8vw}
  .tva-dates,.tv-rtl .tva-dates{text-align:center}.tva-g,.tva-h{font-size:3vw}.tva-hu{font-size:2.8vw}
  .tva-row{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:2.4vw;padding:1vw 5vw 3vw}
  .ar{border-radius:14vw 14vw 1.8vw 1.8vw}.ar::before{inset:1vw;border-radius:13vw 13vw 1vw 1vw}
  .ar-in{padding:6vw 1.2vw 2.6vw;gap:.8vw}
  .ar-tag{font-size:1.6vw;height:2.2vw}.ar-n{font-size:4.4vw}.ar-ar{font-size:3.4vw}.ar-rule{width:11vw}.ar-rule i{width:.9vw;height:.9vw}
  .ar-a{font-size:2.9vw}.ar-lab{font-size:1.5vw}.ar-j{font-size:7vw}.ar-js{font-size:5.4vw}.ar-x{font-size:2vw;min-height:2.4vw}.ar-cd{font-size:2.8vw}
  .tva-foot{grid-template-columns:1fr;gap:3vw;padding:0 5vw 3vw}.tva-tick{font-size:3.2vw;padding:1.8vw 0}
  .tva-qr{max-width:none;justify-content:center;font-size:2.4vw}.tva-qrc{width:12vw;height:12vw}
  .tva-mihrab{width:84vw;height:70vh;border-radius:42vw 42vw 2vw 2vw}.tva-mihrab::before{border-radius:40vw 40vw 1.2vw 1.2vw}
  .tva-op{font-size:5.4vw}.tva-big{font-size:24vw}.tva-sil{font-size:3.4vw}.tva-azan{font-size:4.4vw;bottom:18vw}
}
.tva-name .tva-mnu{text-align:left}
.tva-dates .tva-hu{text-align:right}
.tv-rtl .tva-name .tva-mnu{text-align:right}.tv-rtl .tva-dates .tva-hu{text-align:left}
.ar-in{padding:2.6vw .8vw 2.4vw}
@media (orientation:portrait){
  .tva-head{padding:2.4vw 5vw 1.4vw}
  .tva-clock>#tvclk{font-size:15vw}
  .ar-in{padding:4.6vw 1.2vw 3vw;gap:.6vw}
  .ar-n{font-size:4vw}.ar-j{font-size:6.2vw}.ar-a{font-size:2.6vw}
  .tva-row{padding:1vw 5vw 4vw;gap:2.6vw}
  .tva-name .tva-mnu,.tva-dates .tva-hu{text-align:center}
}
/* ---------- arches + Today panel ---------- */
.tva-light{--veil:rgba(248,243,232,.55);--warn:#a4441f;--warn-bg:#fbe9df}
.tva-dark{--veil:rgba(9,14,27,.6);--warn:#f0a07a;--warn-bg:rgba(240,160,122,.12)}
.tva-main{display:grid;grid-template-columns:minmax(0,1fr) 23vw;gap:1.4vw;padding:.4vw 3.3vw 1.2vw;min-height:0}
.tva-main.tva-nopanel{grid-template-columns:minmax(0,1fr)}
.tva-main .tva-row{padding:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.1vw}
.tva-main .ar{border-radius:6.4vw 6.4vw .9vw .9vw}
.tva-main .ar::before{border-radius:5.85vw 5.85vw .5vw .5vw}
.tva-nopanel .tva-row .ar{border-radius:8.6vw 8.6vw .9vw .9vw}
.tva-nopanel .tva-row .ar::before{border-radius:8vw 8vw .5vw .5vw}
.tva-panel{background:var(--card);border:.1vw solid var(--hair);border-radius:1.4vw;box-shadow:var(--shadow);padding:1.3vw 1.4vw 1.1vw;display:flex;flex-direction:column;gap:.7vw;min-height:0;overflow:hidden}
.tp-head{font-size:.95vw;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;gap:.6vw;align-items:baseline}
.tp-head .tv-ur{font-size:1.15vw;letter-spacing:0;text-transform:none;font-weight:500}
.tp-list{display:flex;flex-direction:column}
.tp-row{display:flex;align-items:center;gap:.8vw;padding:.62vw 0;border-bottom:.07vw solid var(--hair)}
.tp-row:last-child{border-bottom:0}
.tp-ic{width:1.5vw;height:1.5vw;flex:none;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tp-l{flex:1;min-width:0}
.tp-n{font-size:1.25vw;font-weight:500;line-height:1.25}
.tp-n .tv-ur{display:block;font-size:.85em;color:var(--sub);font-weight:400;line-height:1.5}
.tp-s{font-size:.85vw;color:var(--sub);margin-top:.15vw}
.tp-s b{color:var(--gold)}
.tp-t{font-size:1.45vw;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:end}
.tp-pre{font-size:.75em;font-weight:400;color:var(--sub)}
.tp-hi .tp-n{color:var(--gold)}
.tp-mk{margin-top:auto;border:.07vw solid var(--hair);border-radius:.9vw;padding:.8vw .9vw;display:flex;flex-direction:column;gap:.35vw}
.tp-mkh{font-size:.8vw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.tp-mkh .tv-en,.tp-mkh .tv-ur{display:block}
.tp-mkh .tv-ur{font-size:1.1vw;letter-spacing:0;text-transform:none;font-weight:400}
.tp-mkr{display:flex;justify-content:space-between;gap:.6vw;font-size:1.05vw;font-variant-numeric:tabular-nums}
.tp-mkr span:first-child{color:var(--sub)}
.tp-mk.now{border-color:var(--warn);background:var(--warn-bg)}
.tp-mk.now .tp-mkh{color:var(--warn)}
.tp-mkr.on,.tp-mkr.on span:first-child{color:var(--warn);font-weight:700}
.tp-ram{background:var(--on-bg);color:var(--on-ink);border-radius:1vw;padding:.9vw 1vw;display:flex;flex-direction:column;gap:.5vw}
.tp-rt{font-size:.8vw;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--on-gold);display:flex;gap:.6vw}
.tp-rt .tv-ur{font-size:1.1vw;letter-spacing:0;text-transform:none}
.tp-rr{display:grid;grid-template-columns:1fr 1fr;gap:.8vw}
.tp-rr>div{display:flex;flex-direction:column}
.tp-rl{font-size:.85vw;color:var(--on-sub)}
.tp-rr b{font-size:2vw;font-weight:600;font-variant-numeric:tabular-nums}
.tp-rc{font-size:1vw;font-weight:700;color:var(--on-gold);min-height:1.2vw}
/* ---------- popups over a blurred screen ---------- */
.tva-over{background:var(--veil);-webkit-backdrop-filter:blur(1.1vw) saturate(.85);backdrop-filter:blur(1.1vw) saturate(.85);animation:tvfade .5s ease-out}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tva-light .tva-over{background:rgba(248,243,232,.94)}.tva-dark .tva-over{background:rgba(9,14,27,.94)}}
@keyframes tvfade{from{opacity:0}to{opacity:1}}
.tva-pop{position:relative;width:38vw;min-height:62vh;background:var(--card);border:.12vw solid var(--gold);border-radius:19vw 19vw 1.2vw 1.2vw;box-shadow:0 2vw 5vw rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;padding:7vw 2.6vw 2.6vw;animation:tvpop .55s cubic-bezier(.2,.9,.3,1.2)}
.tva-pop::before{content:"";position:absolute;inset:.8vw;border:.06vw solid var(--hair);border-radius:18.2vw 18.2vw .7vw .7vw;pointer-events:none}
@keyframes tvpop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.tva-pop .tva-mi{padding:0;gap:1.1vw}
.tva-kick{font-size:.95vw;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.tva-kick .tv-en,.tva-kick .tv-ur{display:inline}
.tva-kick .tv-ur{margin-inline-start:.6em;letter-spacing:0;font-size:1.2vw}
.tva-opbig{font-size:3.6vw}
.tva-pop .tva-big{font-size:9vw}
.tva-pop .tva-big.tva-dim{font-size:6vw}
.tva-sub{font-size:1.7vw;color:var(--sub);line-height:1.5}
.tva-sub .tv-en,.tva-sub .tv-ur{display:block}
.tva-mid{font-size:3vw;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;min-height:3.6vw}
.tva-rule{margin:.2vw 0}
.tva-pop .tva-sil{font-size:1.4vw}
@media (orientation:portrait){
  .tva-main{grid-template-columns:1fr;gap:2.6vw;padding:1vw 5vw 3vw}
  .tva-main .tva-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:2.4vw}
  .tva-main .tva-row .ar{grid-column:span 2;border-radius:14vw 14vw 1.8vw 1.8vw}
  .tva-main .tva-row .ar:nth-child(4){grid-column:2 / span 2}
  .tva-main .tva-row .ar::before{border-radius:13vw 13vw 1vw 1vw}
  .tva-panel{border-radius:2.6vw;padding:2.4vw 2.8vw;gap:1.4vw}
  .tp-list{display:grid;grid-template-columns:1fr 1fr;column-gap:4vw}
  .tp-head{font-size:1.8vw}.tp-head .tv-ur{font-size:2.2vw}
  .tp-ic{width:3vw;height:3vw}.tp-n{font-size:2.5vw}.tp-s{font-size:1.7vw}.tp-t{font-size:2.8vw}.tp-row{gap:1.4vw;padding:1.2vw 0}
  .tp-mk{border-radius:1.8vw;padding:1.6vw 1.8vw;gap:.7vw}.tp-mkh{font-size:1.6vw}.tp-mkh .tv-ur{font-size:2.1vw}.tp-mkr{font-size:2.1vw}
  .tp-ram{border-radius:2vw;padding:1.8vw 2vw}.tp-rt{font-size:1.6vw}.tp-rl{font-size:1.7vw}.tp-rr b{font-size:4vw}.tp-rc{font-size:2vw}
  .tva-pop{width:80vw;min-height:46vh;border-radius:40vw 40vw 2.4vw 2.4vw;padding:14vw 5vw 5vw}.tva-pop::before{border-radius:38.5vw 38.5vw 1.4vw 1.4vw}
  .tva-kick{font-size:1.9vw}.tva-opbig{font-size:7vw}.tva-pop .tva-big{font-size:18vw}.tva-sub{font-size:3.2vw}.tva-mid{font-size:6vw}
}
/* compact Today panel */
.tva-panel{gap:.55vw;padding:1.1vw 1.3vw 1vw}
.tp-row{padding:.42vw 0;gap:.7vw}
.tp-n{font-size:1.15vw;display:flex;align-items:baseline;gap:.5vw;flex-wrap:wrap}
.tp-n .tv-ur{display:inline;font-size:.95vw;line-height:1.3}
.tp-s{font-size:.8vw;margin-top:.05vw}
.tp-t{font-size:1.35vw}
.tp-ic{width:1.35vw;height:1.35vw}
.tp-mk{padding:.6vw .8vw;gap:.25vw}
.tp-mkh{font-size:.72vw}
.tp-mkr{font-size:.95vw}
.tp-ram{padding:.75vw .9vw;gap:.35vw}
.tp-rr b{font-size:1.8vw}
.tva-main .ar-j{font-size:3.2vw}
.tva-main .ar-n{font-size:2.05vw}
.tva-main .ar-a{font-size:1.35vw}
.tva-nopanel .ar-j{font-size:3.9vw}
@media (orientation:portrait){
  .tva-head{padding:2vw 5vw 1vw;gap:.6vw}
  .tva-mn{font-size:4.4vw}.tva-mnu{font-size:3.4vw}
  .tva-clock>#tvclk{font-size:12.5vw}.tva-ss #tvsec{font-size:3.6vw}.tva-ss #tvap{font-size:2.4vw}
  .tva-g,.tva-h{font-size:2.7vw}.tva-hu{font-size:2.5vw}
  .tva-main{display:flex;flex-direction:column;gap:2.4vw;padding:1vw 5vw 2.4vw}
  .tva-main .tva-row{grid-auto-rows:36vw;flex:none}
  .tva-main .ar-in{padding:4vw 1vw 2vw;gap:.4vw}
  .tva-main .ar-tag{font-size:1.4vw;height:1.8vw;margin-bottom:.2vw}
  .tva-main .ar-n{font-size:3.6vw}.tva-main .ar-rule{margin:.4vw 0}.tva-main .ar-a{font-size:2.4vw}.tva-main .ar-lab{font-size:1.4vw}
  .tva-main .ar-j{font-size:5.6vw}.tva-main .ar-x{font-size:1.8vw;min-height:0}.tva-main .ar-cd{font-size:2.6vw}
  .tva-panel{flex:1;min-height:0;gap:1vw;padding:2vw 2.6vw}
  .tp-n{font-size:2.4vw}.tp-n .tv-ur{font-size:2vw}.tp-s{font-size:1.6vw}.tp-t{font-size:2.6vw}.tp-row{padding:.9vw 0;gap:1.2vw}.tp-ic{width:2.6vw;height:2.6vw}
  .tp-mk{padding:1.2vw 1.6vw;gap:.5vw}.tp-mkh{font-size:1.5vw}.tp-mkr{font-size:2vw}
  .tva-foot{grid-template-columns:1fr auto;gap:3vw;padding:0 5vw 2.4vw}
  .tva-tick{font-size:3vw;padding:1.6vw 0}
  .tva-qr{max-width:24vw;font-size:2vw}.tva-qrc{width:11vw;height:11vw}
}
@media (orientation:portrait){.tva-main .ar-x{display:none}}
/* =====================================================================
   Wider arches: Today panel as a strip below, three arch styles
   (wide = clean, framed = thick frame + finial, niche = recessed mihrab niche)
   ===================================================================== */
.tva-light{--frame:#cdb27a;--niche:#f4ecda}
.tva-dark{--frame:#5f5130;--niche:#0f1930}
.tva-s-wide .tva-main,.tva-s-framed .tva-main,.tva-s-niche .tva-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:1.2vw}
.tva-s-wide .tva-row,.tva-s-framed .tva-row,.tva-s-niche .tva-row{gap:1.6vw;padding:0 .6vw}
/* arch proportions: about 1 : 1.5 */
.tva-main .tva-row .ar{border-radius:9vw 9vw 1vw 1vw}
.tva-main .tva-row .ar::before{border-radius:8.4vw 8.4vw .6vw .6vw}
.tva-main .ar-in{padding:3vw 1vw 1.6vw;gap:.45vw}
.tva-main .ar-n{font-size:2.4vw}
.tva-main .ar-n .tv-ur{font-size:.75em}
.tva-main .ar-a{font-size:1.45vw}
.tva-main .ar-j{font-size:4.1vw}
.tva-main .ar-lab{font-size:.82vw}
.tva-main .ar-x{font-size:1.05vw}
.tva-main .ar-cd{font-size:1.6vw}
/* framed: thick frame, fine inner line, a small finial on top */
.tva-s-framed .ar{border:.32vw solid var(--frame)}
.tva-s-framed .ar::before{inset:.55vw;border-color:var(--frame);opacity:.55}
.tva-s-framed .ar::after{content:"";position:absolute;left:50%;top:-1.25vw;width:.9vw;height:.9vw;background:var(--frame);transform:translateX(-50%) rotate(45deg);border-radius:.12vw}
.tva-s-framed .ar.on{border-color:var(--on-bg)}
.tva-s-framed .ar.on::after{background:var(--on-bg)}
.tva-s-framed .ar.on::before{border-color:var(--on-gold);opacity:.6}
/* niche: an inner recessed arch holds the times */
.tva-s-niche .ar{border:.14vw solid var(--frame);background:var(--card)}
.tva-s-niche .ar::before{display:none}
.tva-s-niche .ar-in{margin:.9vw;border-radius:8.2vw 8.2vw .6vw .6vw;background:var(--niche);box-shadow:inset 0 .5vw 1.2vw rgba(0,0,0,.08);border:.07vw solid var(--hair)}
.tva-s-niche .ar.on .ar-in{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.tva-dark.tva-s-niche .ar.on .ar-in{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.18)}
.tva-s-niche .ar.on{border-color:var(--on-bg)}
/* Today panel as a horizontal strip */
.tva-s-wide .tva-panel,.tva-s-framed .tva-panel,.tva-s-niche .tva-panel{flex-direction:row;align-items:stretch;gap:1.2vw;padding:.9vw 1.3vw;border-radius:1.2vw}
.tva-main .tva-panel .tp-head{writing-mode:vertical-rl;transform:rotate(180deg);justify-content:center;font-size:.8vw;border-inline-start:.07vw solid var(--hair);padding-inline-start:.5vw}
.tva-main .tva-panel .tp-head .tv-ur{display:none}
.tva-main .tva-panel .tp-list{flex-direction:row;flex:1;min-width:0}
.tva-main .tva-panel .tp-row{flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.25vw;padding:0 .6vw;border-bottom:0;border-inline-end:.07vw solid var(--hair)}
.tva-main .tva-panel .tp-row:last-child{border-inline-end:0}
.tva-main .tva-panel .tp-l{flex:none}
.tva-main .tva-panel .tp-n{justify-content:center;font-size:1.05vw}
.tva-main .tva-panel .tp-n .tv-ur{font-size:.9vw}
.tva-main .tva-panel .tp-t{font-size:1.5vw;text-align:center}
.tva-main .tva-panel .tp-s{font-size:.75vw}
.tva-main .tva-panel .tp-mk{margin:0;flex:none;width:17vw;justify-content:center}
.tva-main .tva-panel .tp-ram{flex:none;width:19vw;justify-content:center}
@media (orientation:portrait){
  .tva-main .tva-row .ar{border-radius:14vw 14vw 1.8vw 1.8vw}.tva-main .tva-row .ar::before{border-radius:13vw 13vw 1vw 1vw}
  .tva-s-niche .ar-in{border-radius:12.6vw 12.6vw 1vw 1vw}
  .tva-s-framed .ar::after{top:-2vw;width:1.6vw;height:1.6vw}
  .tva-main .ar-n{font-size:3.6vw}.tva-main .ar-j{font-size:5.6vw}.tva-main .ar-a{font-size:2.4vw}.tva-main .ar-lab{font-size:1.4vw}
  .tva-main .tva-panel{flex-direction:column!important}
  .tva-main .tva-panel .tp-head{writing-mode:horizontal-tb;transform:none;border:0;padding:0}
  .tva-main .tva-panel .tp-list{display:grid;grid-template-columns:1fr 1fr 1fr;row-gap:1.4vw}
  .tva-main .tva-panel .tp-row{border-inline-end:0}
  .tva-main .tva-panel .tp-n{font-size:2.2vw}.tva-main .tva-panel .tp-n .tv-ur{font-size:1.9vw}.tva-main .tva-panel .tp-t{font-size:2.8vw}.tva-main .tva-panel .tp-s{font-size:1.5vw}
  .tva-main .tva-panel .tp-mk,.tva-main .tva-panel .tp-ram{width:auto}
}
/* fit the wider arches above the Today strip */
.tva-s-wide .tva-head,.tva-s-framed .tva-head,.tva-s-niche .tva-head{padding:1vw 3.3vw .5vw}
.tva-s-wide .tva-clock>#tvclk,.tva-s-framed .tva-clock>#tvclk,.tva-s-niche .tva-clock>#tvclk{font-size:7.2vw}
.tva-main .ar-in{padding:2.1vw 1vw 1.1vw;gap:.3vw}
.tva-main .ar-tag{margin-bottom:.15vw}
.tva-main .ar-rule{margin:.25vw 0 .35vw}
.tva-main .ar-jl{margin-top:.25vw}
.tva-main .ar-n{font-size:2.2vw}
.tva-main .ar-j{font-size:3.8vw}
.tva-s-niche .ar-in{margin:.7vw}
.tva-main .tva-row .ar{min-height:0}
.tva-s-wide .tva-panel,.tva-s-framed .tva-panel,.tva-s-niche .tva-panel{padding:.7vw 1.2vw}
.tva-s-niche .ar.on{background:var(--on-bg)}
/* =====================================================================
   Readable from a distance: stronger contrast, deeper arch shadows,
   and a distinct Ramadan block
   ===================================================================== */
.tva-light{--bg:#efe7d6;--ink:#14213d;--sub:#3f3a2e;--gold:#7a5718;--hair:#cbb886;--card:#ffffff;--frame:#b8955a;
  --on-bg:#14213d;--on-ink:#ffffff;--on-sub:#e4e8f2;--on-gold:#f2cf7a;
  --shadow:0 1.8vw 3.2vw -0.6vw rgba(20,33,61,.28),0 .4vw .9vw rgba(20,33,61,.14);}
.tva-dark{--bg:#0a1120;--ink:#fffaf0;--sub:#d6cfbd;--gold:#f0c766;--hair:#33446a;--card:#17254a;--frame:#7a6633;
  --on-bg:#f0c766;--on-ink:#120d03;--on-sub:#3a2c08;--on-gold:#120d03;
  --shadow:0 1.8vw 3.4vw -0.4vw rgba(0,0,0,.7),0 .4vw 1vw rgba(0,0,0,.45)}
.tva .ar{box-shadow:var(--shadow)}
.tva .ar.on{box-shadow:0 2.4vw 4vw -0.6vw rgba(20,33,61,.45),0 .5vw 1.2vw rgba(20,33,61,.25)}
.tva-dark .ar.on{box-shadow:0 2.4vw 4vw -0.4vw rgba(0,0,0,.8),0 0 2.4vw rgba(240,199,102,.28)}
.tva-s-wide .ar{border:.12vw solid var(--hair)}
.tva-s-wide .ar::before{border-color:var(--hair);opacity:.7}
/* text weights and contrast inside the arches */
.tva .ar-n{font-weight:600;color:var(--ink)}
.tva .ar-n .tv-ur{color:var(--sub);font-weight:500}
.tva .ar-lab{color:var(--gold);font-weight:800;font-size:.95vw;letter-spacing:.18em}
.tva .ar-a{color:var(--sub);font-weight:500}
.tva .ar-j{font-weight:700;color:var(--ink)}
.tva .ar-x{color:var(--sub);font-weight:500}
.tva .ar.on .ar-n,.tva .ar.on .ar-j{color:var(--on-ink)}
.tva .ar.on .ar-n .tv-ur,.tva .ar.on .ar-a,.tva .ar.on .ar-x{color:var(--on-sub)}
.tva .ar.on .ar-lab,.tva .ar.on .ar-tag,.tva .ar.on .ar-cd{color:var(--on-gold)}
.tva .ar-cd{font-size:1.8vw}
.tva .ar-rule i{background:var(--gold)}
/* header and strip */
.tva .tva-mn{font-weight:600}
.tva .tva-mnu,.tva .tva-hu,.tva .tva-area{color:var(--sub)}
.tva .tva-g{font-weight:500}
.tva .tva-h{font-weight:600;color:var(--gold)}
.tva .tva-clock>#tvclk{font-weight:500;color:var(--ink)}
.tva .tva-ss #tvap{color:var(--sub)}
.tva .tva-panel{box-shadow:var(--shadow)}
.tva .tp-n{font-weight:600;color:var(--ink)}
.tva .tp-n .tv-ur{color:var(--sub);font-weight:500}
.tva .tp-t{font-weight:700;color:var(--ink)}
.tva .tp-pre,.tva .tp-s{color:var(--sub);font-weight:500}
.tva .tp-mkh{color:var(--sub);font-weight:800}
.tva .tp-mkr span:first-child{color:var(--sub);font-weight:500}
.tva .tp-mkr span:last-child{font-weight:600}
.tva .tva-tick{color:var(--ink);font-weight:500}
.tva .tva-qr span{color:var(--sub)}
/* Ramadan: its own emerald-and-gold block */
.tva-light{--ram-bg:#0d5c45;--ram-ink:#ffffff;--ram-sub:#cfe9df;--ram-gold:#f4d27c}
.tva-dark{--ram-bg:#11785b;--ram-ink:#ffffff;--ram-sub:#d5f0e6;--ram-gold:#ffd97d}
.tva .tp-ram{background:var(--ram-bg);color:var(--ram-ink);border-radius:1.1vw;box-shadow:0 1vw 2vw -0.4vw rgba(13,92,69,.5);position:relative;overflow:hidden}
.tva .tp-ram::after{content:"";position:absolute;right:-2.4vw;top:-2.4vw;width:7vw;height:7vw;border-radius:50%;border:.25vw solid rgba(244,210,124,.22)}
.tva .tp-rt{color:var(--ram-gold);display:flex;align-items:center;gap:.5vw;font-size:.85vw;font-weight:800}
.tp-cres{width:1.3vw;height:1.3vw;fill:var(--ram-gold);flex:none}
.tva .tp-rl{color:var(--ram-sub);font-size:.85vw;font-weight:600}
.tva .tp-rl .tv-en,.tva .tp-rl .tv-ur{display:block}
.tva .tp-rl .tv-ur{font-size:1.05vw;font-weight:500}
.tva .tp-rr b{font-size:2.3vw;font-weight:700;color:var(--ram-ink)}
.tva .tp-if b{color:var(--ram-gold)}
.tva .tp-rc{display:inline-block;align-self:flex-start;background:rgba(0,0,0,.22);color:var(--ram-gold);border-radius:2vw;padding:.25vw .9vw;font-size:1.05vw;font-weight:700}
.tva .tp-rc:empty{display:none}
.tva-main .tva-panel .tp-ram{width:25vw}
@media (orientation:portrait){
  .tva .ar-lab{font-size:1.6vw}.tva .ar-cd{font-size:2.8vw}
  .tva .tp-rt{font-size:1.7vw}.tp-cres{width:2.6vw;height:2.6vw}.tva .tp-rl{font-size:1.7vw}.tva .tp-rl .tv-ur{font-size:2vw}.tva .tp-rr b{font-size:4.6vw}.tva .tp-rc{font-size:2.1vw;padding:.5vw 1.8vw}
}
.tva .tp-ram::after{display:none}
.tva .tp-rl{display:flex;align-items:baseline;gap:.5vw}
.tva .tp-rl .tv-en,.tva .tp-rl .tv-ur{display:inline}
.tva .tp-rr>div{gap:.2vw}
/* portrait: final sizes (kept last so they win) */
@media (orientation:portrait){
  .tva-main .tva-row{grid-auto-rows:33vw}
  .tva-main .ar-in{padding:3.6vw 1vw 1.6vw;gap:.35vw}
  .tva-main .ar-tag{font-size:1.5vw;height:2vw}
  .tva-main .ar-n{font-size:3.9vw}
  .tva-main .ar-n .tv-ur{font-size:.72em}
  .tva-main .ar-rule{margin:.3vw 0 .5vw;width:12vw}
  .tva .ar-lab{font-size:1.65vw}
  .tva-main .ar-a{font-size:2.7vw}
  .tva-main .ar-j{font-size:6.4vw}
  .tva .ar-cd,.tva-main .ar-cd{font-size:2.9vw}
  .tva-main .tva-panel{overflow:visible;gap:1.4vw;padding:2vw 2.6vw}
  .tva-main .tva-panel .tp-head{font-size:1.7vw}
  .tva-main .tva-panel .tp-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.6vw}
  .tva-main .tva-panel .tp-ram{width:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:3vw;padding:1.8vw 2.4vw;border-radius:2vw}
  .tva .tp-ram .tp-rt{flex-direction:column;align-items:flex-start;gap:.6vw;font-size:1.7vw;width:18vw}
  .tva .tp-ram .tp-rr{flex:1;gap:3vw}
  .tva .tp-rl{font-size:1.8vw}.tva .tp-rl .tv-ur{font-size:2.1vw}
  .tva .tp-rr b{font-size:5vw}
  .tva .tp-rc{font-size:2vw;padding:.6vw 1.8vw;align-self:center}
  .tva-main .tva-panel .tp-mk{width:auto}
}
@media (orientation:portrait){
  .tva-head{padding:1.6vw 5vw .6vw}
  .tva-clock>#tvclk{font-size:11vw}
  .tva-main .tva-row{grid-auto-rows:35vw}
  .tva-main .tva-panel .tp-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .tva-main .tva-panel .tp-row{padding:0 .8vw;border-inline-end:.1vw solid var(--hair)}
  .tva-main .tva-panel .tp-row:last-child{border-inline-end:0}
  .tva-main .tva-panel .tp-n{font-size:2vw;flex-direction:column;align-items:center;gap:0}
  .tva-main .tva-panel .tp-n .tv-ur{font-size:1.8vw}
  .tva-main .tva-panel .tp-t{font-size:2.6vw}
  .tva-main .tva-panel .tp-s{display:none}
  .tva-main .tva-panel .tp-mk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.4vw;row-gap:.6vw}
  .tva-main .tva-panel .tp-mkh{grid-column:1 / -1}
  .tva-main .tva-panel .tp-mkr{flex-direction:column;align-items:center;gap:.2vw}
}
@media (orientation:portrait){.tva .tp-rl{flex-direction:column;gap:0}.tva .tp-rl .tv-en,.tva .tp-rl .tv-ur{display:block}}
/* Sehri / Iftar and the day's times on phones */
.fx-cres{width:16px;height:16px;fill:currentColor;flex:none}
.fx-line{display:flex;align-items:center;gap:6px;margin:6px 20px 0;padding:6px 12px;border-radius:12px;background:#e3f2ec;color:#0d5c45;font-size:13.5px;width:max-content;max-width:calc(100% - 40px)}
.fx-line b{font-weight:700}
.fx{margin:14px 0 6px;display:flex;flex-direction:column;gap:10px}
.fx-box{background:#0d5c45;color:#fff;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 16px -6px rgba(13,92,69,.5)}
.fx-h{display:flex;align-items:center;gap:8px;color:#f4d27c;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.fx-h .fx-cres{width:18px;height:18px}
.fx-rr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fx-rr>div{display:flex;flex-direction:column}
.fx-rr span{font-size:12.5px;color:#cfe9df;font-weight:600}
.fx-rr b{font-size:26px;font-weight:700;line-height:1.15}
.fx-if b{color:#f4d27c}
.fx-cd{align-self:flex-start;background:rgba(0,0,0,.22);color:#f4d27c;border-radius:14px;padding:4px 12px;font-size:13px;font-weight:700}
.fx-list,.fx-mk{border:1px solid var(--divider,#e1e3e1);border-radius:14px;padding:4px 14px}
.fx-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--divider,#e1e3e1);font-size:14px}
.fx-row:last-child{border-bottom:0}
.fx-row span{color:var(--sub)}
.fx-row b{font-weight:600}
.fx-mkh{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);padding:10px 0 2px}
.fx-row.on,.fx-row.on span{color:#a4441f;font-weight:700}
.fx-note{font-size:12px;color:var(--sub);margin:2px 2px 0;line-height:1.45}
html[dir=rtl] .fx-line{margin:6px 20px 0}

/* "My masjid" card on the Following tab: the TV screen in a phone-sized card */
.hcs-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 12px 8px;font-size:16px;font-weight:500;color:var(--txt)}
.hcs-h span{font-size:12.5px;color:var(--sub);font-weight:400}
.hcs{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;padding:0 12px}
.hcs.many{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 12px 8px;scroll-padding:0 12px;scrollbar-width:none}
.hcs.many::-webkit-scrollbar{display:none}
.hcs.many .hc{flex:0 0 calc(100% - 24px);scroll-snap-align:start}
.hc{--bg:#f8f3e8;--ink:#1c2a4a;--sub:#6e6656;--gold:#9c7633;--hair:#e0d1aa;--card:#fffdf8;--on-bg:#1c2a4a;--on-ink:#fff;--on-gold:#e7c983;
  position:relative;background:var(--bg);color:var(--ink);border-radius:20px;padding:20px 14px 14px;overflow:hidden;box-shadow:0 8px 22px -10px rgba(28,42,74,.35);font-family:'Google Sans',Roboto,Arial,sans-serif;font-variant-numeric:tabular-nums}
.hc-dark{--bg:#0d1527;--ink:#f2ebdb;--sub:#a39c8b;--gold:#d8b360;--hair:#2a3858;--card:#131e37;--on-bg:#d8b360;--on-ink:#17110a;--on-gold:#17110a}
.hc-band{position:absolute;inset:0 0 auto;height:10px;background:var(--gold);opacity:.22;-webkit-mask:radial-gradient(circle at 5px 5px,#000 2px,transparent 2.5px) 0 0/10px 10px;mask:radial-gradient(circle at 5px 5px,#000 2px,transparent 2.5px) 0 0/10px 10px}
.hc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hc-nm{min-width:0}
.hc-nm b{display:block;font-size:19px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-nm span{display:block;font-size:12.5px;color:var(--gold);margin-top:2px;font-weight:500}
.hc-clk{font-size:30px;font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.hc-clk small{font-size:12px;margin-inline-start:3px;color:var(--gold);font-weight:600}
.hc-next{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;background:var(--on-bg);color:var(--on-ink);border-radius:12px;padding:8px 12px;font-size:14px}
.hc-nl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-gold);font-weight:700}
.hc-next b{font-weight:600}
.hc-in{margin-inline-start:auto;color:var(--on-gold);font-weight:600;font-size:13px}
.hc-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:12px}
.hc-ar{background:var(--card);border:1px solid var(--hair);border-radius:999px 999px 8px 8px;padding:14px 2px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 3px 8px -4px rgba(28,42,74,.25);min-width:0}
.hc-ar .hc-p{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hc-ar i{width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.hc-ar b{font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.hc-ar .hc-az{font-size:10px;color:var(--sub);white-space:nowrap}
.hc-ar.on{background:var(--on-bg);border-color:var(--on-bg);color:var(--on-ink);transform:translateY(-3px)}
.hc-ar.on .hc-az{color:var(--on-gold)}
.hc-ar.on i{background:var(--on-gold)}
.hc-fx{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-top:12px;background:#0d5c45;color:#fff;border-radius:12px;padding:8px 12px;font-size:13.5px}
.hc-fx .fx-cres{color:#f4d27c}
.hc-fx span:last-child b{color:#f4d27c}
.hc-btns{display:flex;gap:8px;margin-top:12px}
.hc-b{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:9px 6px;font:500 13.5px 'Google Sans',Roboto,Arial,sans-serif;background:var(--on-bg);color:var(--on-ink);cursor:pointer;white-space:nowrap}
.hc-b svg{width:18px;height:18px;fill:currentColor;flex:none}
.hc-b.hc-o{flex:0 0 auto;padding-inline:14px;background:transparent;color:var(--ink);border:1px solid var(--hair)}
.hc-link{background:var(--bg);border-radius:10px;padding:10px 12px;margin:10px 0;word-break:break-all;font-size:13px}
.hc-acts{display:flex;gap:8px;margin-bottom:6px}
.hc-steps{padding-inline-start:20px;margin:10px 0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45}
[dir=rtl] .hc-b svg{transform:scaleX(-1)}
/* TV screen opened from a phone (home=1) */
.tv-back{inset-inline-end:auto;inset-inline-start:1vw}
.tva-foot-home{grid-template-columns:1fr!important}
@media (pointer:coarse){.tv-fs{font-size:15px;padding:8px 14px;border-radius:20px;top:10px}.tv-back{inset-inline-start:10px}.tv-fs:not(.tv-back){inset-inline-end:10px}}
@media (orientation:portrait){.tva-main .tva-panel{justify-content:flex-start;flex:0 0 auto;height:auto}.tva-main .tva-panel .tp-list{flex:0 0 auto}.tva-main{justify-content:space-evenly}}

/* one "My masjid" */
.hc-chg{border:0;background:none;color:var(--pri,#0b57d0);font:500 14px 'Google Sans',Roboto,Arial,sans-serif;padding:4px 2px;cursor:pointer}
.hcs-h2{margin-top:4px}
.hc-tg{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:1px solid var(--line,#dadce0);background:none;border-radius:12px;padding:10px 12px;cursor:pointer;color:inherit;font:inherit}
.hc-tg svg{width:24px;height:24px;fill:var(--sub,#5f6368);flex:none}
.hc-tg b{display:block;font-weight:500;font-size:14.5px}.hc-tg small{display:block;color:var(--sub,#5f6368);font-size:12.5px;margin-top:2px}
.hc-tg.on{background:#e8f0fe;border-color:#c2d7fb}.hc-tg.on svg{fill:#0b57d0}.hc-tg.on b{color:#0b57d0}
.hc-pick{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.hc-opt{display:flex;align-items:center;gap:12px;text-align:start;border:1px solid var(--line,#dadce0);background:none;border-radius:12px;padding:10px 12px;cursor:pointer;color:inherit;font:inherit}
.hc-opt i{width:20px;height:20px;border-radius:50%;border:2px solid #747775;flex:none;box-sizing:border-box}
.hc-opt.on{border-color:#0b57d0;background:#e8f0fe}.hc-opt.on i{border:6px solid #0b57d0}
.hc-opt b{display:block;font-weight:500}.hc-opt small{display:block;color:var(--sub,#5f6368);font-size:12.5px}

/* installed app (PWA) on iOS and Android */
html,body{overscroll-behavior-y:none}
body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
@media (pointer:coarse){input,select,textarea{font-size:16px!important}} /* stops iPhone zooming into fields */
#pw-probe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.nofs .tv-fs[data-act=tvfull]{display:none!important}
.pw-ban{display:flex;align-items:flex-start;gap:12px;margin:0 12px 12px;padding:12px;border-radius:16px;background:#f0f4f9;}
.pw-ban img{width:44px;height:44px;border-radius:11px;flex:none}
.pw-ban b{font-weight:500}.pw-ban .sub{font-size:13px;margin-top:2px}
.pw-btns{display:flex;align-items:center;gap:4px;margin-inline-start:auto;flex:none}
.pw-x{border:0;background:none;font-size:22px;line-height:1;color:var(--sub,#5f6368);width:32px;height:32px;border-radius:50%;cursor:pointer}
.pw-acc{display:flex;gap:12px;align-items:flex-start}.pw-acc img{width:44px;height:44px;border-radius:11px;flex:none}
.pw-steps{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:12px;counter-reset:pw}
.pw-steps li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4}
.pw-ic{width:36px;height:36px;padding:7px;border-radius:10px;background:#e8f0fe;fill:#0b57d0;flex:none;box-sizing:border-box}
.pw-app{width:36px;height:36px;border-radius:9px;flex:none}
.pw-tx{flex:1;min-width:0}.pw-tx .btn{margin-top:10px}.pw-x{margin:-4px -4px 0 0;flex:none}

/* Today strip: every item uses the same lines so all times line up */
.tva-main .tva-panel .tp-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center}
.tva-main .tva-panel .tp-ic{height:1.5vw;width:1.5vw;margin-bottom:.35vw;flex:none}
.tva-main .tva-panel .tp-l{height:2.9vw;display:flex;align-items:center;justify-content:center;flex:none}
.tva-main .tva-panel .tp-n{display:flex;flex-direction:column;align-items:center;gap:.15vw;font-size:1.1vw;font-weight:600;line-height:1.1}
.tva-main .tva-panel .tp-n .tv-ur{font-size:.95vw;font-weight:500;line-height:1.2}
.tva-main .tva-panel .tp-t{height:2.1vw;display:flex;align-items:center;justify-content:center;font-size:1.65vw;line-height:1;margin-top:.2vw;flex:none}
.tva-main .tva-panel .tp-s{display:block;height:1.1vw;line-height:1.1vw;font-size:.78vw;color:var(--sub);white-space:nowrap;margin-top:.15vw;flex:none}
.tva-main .tva-panel .tp-hi .tp-s{color:var(--gold)}
@media (orientation:portrait){
  .tva-main .tva-panel .tp-ic{height:2.6vw;width:2.6vw;margin-bottom:.6vw}
  .tva-main .tva-panel .tp-l{height:5.2vw}
  .tva-main .tva-panel .tp-n{font-size:2vw;gap:.3vw}
  .tva-main .tva-panel .tp-n .tv-ur{font-size:1.75vw}
  .tva-main .tva-panel .tp-t{height:3.6vw;font-size:2.8vw;margin-top:.3vw}
  .tva-main .tva-panel .tp-s{display:block;height:2vw;line-height:2vw;font-size:1.35vw;margin-top:.2vw}
}