@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Amiri:wght@400;700&display=swap');
:root{--bg:#f4f7fb;--fg:#0f172a;--mut:#64748b;--card:#fff;--pan:#fff;--bd:#e3e8f1;--ac:#0f766e;--ac2:#14b8a6;--gold:#b45309;--cy:#0369a1;--em:#047857;--r:16px;--sh:0 1px 2px #0f172a0f,0 10px 28px -12px #0f172a26;--ring:0 0 0 4px #14b8a62e}
:root.tv{--bg:#0A0D12;--fg:#fff;--gold:#F5C451;--cy:#38BDF8;--em:#10B981;--mut:#94A3B8;--pan:#141a24}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);font:16px/1.65 Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(900px 420px at 8% -8%,#ccfbf1aa,transparent 60%),radial-gradient(800px 420px at 100% 0,#fde68a66,transparent 55%),var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased}
body.hc{--bg:#000;--fg:#fff;--card:#000;--pan:#000;--mut:#fff;--bd:#fff;--gold:#ffd54a;--cy:#67e8f9;--em:#34d399;background:#000}
h1,h2,h3{letter-spacing:-.02em;margin:.3em 0}h1{font-size:1.9rem;font-weight:800}a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}::selection{background:#99f6e4}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.btn{display:inline-flex;align-items:center;gap:.45em;padding:.6em 1.1em;border:1px solid var(--bd);border-radius:12px;background:#fff;color:var(--fg);font:600 .95rem Inter,sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 1px 2px #0f172a0d;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s,filter .2s}
.btn:hover{transform:translateY(-1px);border-color:#5eead4;color:var(--ac);box-shadow:0 8px 18px -8px #0f766e66;text-decoration:none}
.btn:active{transform:translateY(0) scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.on,.btn.p{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px #0f766ecc}.btn.on:hover,.btn.p:hover{color:#fff;filter:brightness(1.07)}
input,select,textarea{width:100%;padding:.62em .85em;border:1px solid #d3dae8;border-radius:12px;background:#fff;color:var(--fg);font:inherit;transition:border-color .2s,box-shadow .2s}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--ac)}input[type=color]{padding:.2em;height:2.6em}input[type=range]{padding:0;accent-color:var(--ac)}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:none;border-color:var(--ac2);box-shadow:var(--ring)}textarea{resize:vertical}label{font-weight:600;font-size:.9rem;color:#334155}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1.25rem;margin:1rem 0;box-shadow:var(--sh);transition:box-shadow .25s,transform .25s}.card:hover{box-shadow:0 18px 40px -16px #0f172a33}
details.card summary{cursor:pointer;list-style:none}details.card summary::-webkit-details-marker{display:none}details.card p,details.card li{color:#334155}
table{width:100%;border-collapse:separate;border-spacing:0}th{background:#f8fafc;color:#475569;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0;z-index:1}td,th{padding:.7em .8em;border-bottom:1px solid var(--bd);text-align:start;vertical-align:middle}tr:hover td{background:#f8fafc}
.logo{font:800 1.3rem Inter,sans-serif;color:var(--fg);text-decoration:none;display:flex;align-items:center;gap:.5rem}.lg{height:2.6em}
.shell{height:100vh;overflow:hidden;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:1rem;padding:.6rem 1.4rem;background:#ffffffcc;backdrop-filter:blur(14px);border-bottom:1px solid var(--bd);flex-wrap:wrap;position:relative;z-index:5}
.menu{display:flex;gap:.4rem;flex:1;flex-wrap:wrap}.menu .btn{border:0;background:transparent;box-shadow:none;color:#334155}.menu .btn:hover{background:#f1f5f9;transform:none;box-shadow:none}.menu .btn.on{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff}
.body{flex:1;display:flex;min-height:0}.body main{flex:1;min-width:0}
.view{display:none;height:100%;overflow:auto;padding:1.75rem 2.25rem}.view.on{display:block;animation:in .35s ease}@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rail{width:180px;padding:1rem .6rem;display:grid;gap:.7rem;align-content:start}
.bar{padding:.5rem 1.4rem;background:#ffffffcc;backdrop-filter:blur(14px);border-top:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--mut)}
.hero2{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center;min-height:100%}.big{font-size:6rem;line-height:1.1;color:var(--gold)}
#h1{background:linear-gradient(90deg,#0f766e,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:2.8rem;line-height:1.15}
.screen{background:#05070b;color:#fff;border:10px solid #1c2432;border-radius:22px;box-shadow:0 0 0 2px #2c3850,0 40px 90px -20px #000a;padding:1.6rem;min-height:320px;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:.5rem;position:relative}
.screen .live{position:absolute;top:.8rem;inset-inline-start:1rem;font-size:.8rem;color:#ef4444}.screen b,.screen .ar{color:#F5C451}.screen b{font:700 1.8rem Amiri,serif}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}.feat{text-align:center;font-weight:600}.feat i{font-style:normal;font-size:3rem;display:block}.feat:hover{transform:translateY(-4px)}
.ad{border:1px dashed #94a3b8;background:#f8fafc;color:#475569;text-align:center;padding:1rem;font-size:.8rem;border-radius:12px}.wrap{max-width:1000px;margin:auto;padding:1rem}
.portal{display:flex;height:100vh;overflow:hidden}
.side{width:262px;background:#ffffffd9;backdrop-filter:blur(14px);border-inline-end:1px solid var(--bd);padding:1.1rem;display:flex;flex-direction:column;gap:.35rem;overflow:auto}
.side small{color:var(--mut);margin-bottom:.4rem}.side .btn{width:100%;justify-content:flex-start;border:0;background:transparent;box-shadow:none;font-size:1rem;padding:.7em .9em;color:#334155}
.side .btn:hover{background:#f1f5f9;transform:none;box-shadow:none}.side .btn.on{background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;box-shadow:0 10px 20px -10px #0f766ecc}.pmain{flex:1;min-width:0}
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:1.5rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stat{font-size:2.3rem;font-weight:800;color:var(--ac)}.stat small{display:block;font-size:.8rem;color:var(--mut);font-weight:500}
.pill{padding:.2em .8em;border-radius:99px;background:#eef2f7;color:#334155;font-size:.8rem;font-weight:700}.pill.live{background:#dc2626;color:#fff}
.bar2{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.6rem}.bar4{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:.6rem}.pager{display:flex;gap:.8rem;align-items:center;justify-content:center;margin-top:1rem}
.verse{background:#ecfdf5;color:#064e3b;border:2px solid #10b981;border-radius:14px;padding:1em}:root.tv .verse{background:#022C22e6;color:#fff;border-color:#10B981}
.term{color:var(--cy);font-weight:600;text-decoration:underline}.badge{color:var(--em);font-weight:700}.ar{font-family:Amiri,'Scheherazade New',serif;color:var(--gold);font-weight:700;direction:rtl}
.clock{font:800 5.5vw/1.15 Inter,sans-serif;text-align:center;padding:.15em;background:linear-gradient(135deg,var(--ac2),var(--ac));color:#fff;letter-spacing:.04em}
.note-sm{font-size:.85rem;color:var(--mut)}
@media(max-width:800px){.hero2,.two,.bar2,.bar4{grid-template-columns:1fr}.rail{display:none}.big{font-size:4rem}#h1{font-size:2rem}.portal{flex-direction:column;height:auto;overflow:auto}.side{width:auto;flex-direction:row;flex-wrap:wrap}.stats{grid-template-columns:1fr}.view{padding:1rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* long labels (German, Arabic, Urdu...) wrap instead of clipping */
.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.3;overflow-wrap:anywhere}.side .btn,.menu .btn{text-align:start}
.bar2>*,.bar4>*,.two>*,.stats>*,.grid4>*{min-width:0}td,th,.pill,label,summary{overflow-wrap:anywhere}th{white-space:normal}
dialog{border:0;padding:0;background:transparent;width:min(640px,94vw);max-height:92vh;overflow:auto}dialog::backdrop{background:#0f172a88;backdrop-filter:blur(3px)}
.lrow{display:flex;gap:.5rem;margin:.5rem 0;align-items:center;flex-wrap:wrap}.lrow input:not([type=checkbox]){flex:1;min-width:130px}.lrow select{width:auto;min-width:9em}
[hidden]{display:none!important}

/* ---- mobile friendly ---- */
html{-webkit-text-size-adjust:100%}.btn,input,select,textarea{touch-action:manipulation}button,.btn{-webkit-tap-highlight-color:transparent}
.navtoggle{display:none}
@supports(padding:max(0px)){.shell>.top:first-child,.portal .side{padding-top:max(.55rem,env(safe-area-inset-top))}}
@media(max-width:800px){
 .btn{min-height:44px}input,select,textarea{min-height:44px}input[type=checkbox],input[type=radio]{min-height:0;transform:scale(1.25)}
 .portal{flex-direction:column;height:100vh;overflow:hidden}
 .side{width:100%;flex-direction:column;flex-wrap:nowrap;max-height:3.9rem;overflow:hidden;padding:.55rem .9rem;gap:.3rem;border-inline-end:0;border-bottom:1px solid var(--bd);position:relative;z-index:20;transition:max-height .25s}
 .side.open{max-height:86vh;overflow:auto}
 .navtoggle{display:inline-flex;position:absolute;top:.45rem;inset-inline-end:.7rem;justify-content:center;min-width:48px;z-index:21}
 .pmain{flex:1;min-height:0;overflow:auto}.view{padding:1rem .8rem}.stats{grid-template-columns:1fr 1fr}
 .menu{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.menu .btn{white-space:nowrap}.top{padding:.5rem .8rem;gap:.5rem}
 .hero2{gap:1.5rem}.big{font-size:3.5rem}.clock{font-size:9vw}dialog{width:96vw}.card{padding:1rem}h1{font-size:1.5rem}
 table{font-size:.9rem}td input,td select,td textarea{min-width:120px}
}
@media(max-width:700px){
 .appnav{position:fixed;left:0;right:0;bottom:0;z-index:40;flex-wrap:wrap;border:0;border-top:1px solid var(--bd);background:#fffffff5;backdrop-filter:blur(10px);padding:.25rem .4rem calc(.25rem + env(safe-area-inset-bottom))}
 .appnav #st{order:-1;width:100%;text-align:center;font-size:.8rem}
 .appnav .menu{width:100%;justify-content:space-around;overflow:visible}
 .appnav .menu .btn{flex:1;flex-direction:column;justify-content:center;font-size:.78rem;padding:.35rem .1rem;gap:.1rem;min-height:48px}
 .shell .body{padding-bottom:6.4rem}
}

.mseason{background:linear-gradient(135deg,#fef3c7,#fff);border:1px solid #f59e0b;border-radius:16px;padding:1rem;text-align:center;font-size:1.15rem;margin:.6rem 0}
.mq{overflow:hidden;white-space:nowrap}.mq span{display:inline-block;padding-inline-start:100%;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}[dir=rtl] .mq span{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.mq span{animation:none;padding:0;white-space:normal}}

.goal{height:12px;border-radius:99px;background:#e5e7eb;overflow:hidden;margin:.4rem 0}.goal i{display:block;height:100%;background:linear-gradient(90deg,#10b981,#f59e0b);border-radius:99px}

/* Mobile audit fixes (MB-2 code side) */
@media(max-width:900px){
 .side .navtoggle{width:auto;min-width:48px;justify-content:center;padding:.4em .7em;border:1px solid var(--bd);background:#fff}
 .side .logo{padding-inline-end:64px}
 table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 details.card>summary{min-height:44px;display:flex;align-items:center}
 .menu .btn{min-width:44px}
}

/* Scripts that need their own typefaces: Urdu/Persian (Nastaliq/Naskh) and Bengali, with system fallbacks */
:lang(ur) .ar,:lang(ur) body,html[lang=ur]{font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Noto Naskh Arabic',serif;line-height:2.2}
html[lang=fa],html[lang=ps]{font-family:'Noto Naskh Arabic','Vazirmatn',serif}
html[lang=bn]{font-family:'Noto Sans Bengali','Kalpurush',sans-serif}