/* =====================================================================
   KSI ONE 4 — Design system
   Mobile-first app shell · light & dark themes · warm ivory / deep teal / gold
   ===================================================================== */
:root{
  --teal:#0F4C5C;--gold:#C9A227;
  --teal-2:color-mix(in srgb,var(--teal) 82%,#000);
  --teal-soft:color-mix(in srgb,var(--teal) 10%,transparent);
  --gold-soft:color-mix(in srgb,var(--gold) 16%,transparent);
  --bg:#F6F3EB;--surface:#FFFFFF;--surface-2:#FBF9F4;--surface-3:#F1ECE1;--elev:#FFFFFF;
  --text:#13232A;--text-2:#3E5158;--muted:#6B7B80;--border:#E6E0D2;--border-2:#EFEAE0;
  --link:var(--teal);--on-brand:#FFFFFF;--input:#FFFFFF;--input-border:#D9D2C1;
  --ok:#1A7A4C;--ok-bg:#E5F4EC;--warn:#946200;--warn-bg:#FFF3D3;--bad:#B42318;--bad-bg:#FDECEA;--info:#175C8C;--info-bg:#E5F0F8;
  --r:18px;--r-md:14px;--r-sm:10px;
  --sh-1:0 1px 2px rgba(19,35,42,.05);
  --sh:0 1px 2px rgba(19,35,42,.05),0 8px 24px -6px rgba(19,35,42,.10);
  --sh-lg:0 24px 60px -12px rgba(9,30,36,.35);
  --f-head:"Fraunces",Georgia,serif;
  --f-body:"Plus Jakarta Sans","Noto Sans Gujarati","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;
  --appbar-h:60px;--tabbar-h:66px;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0A1316;--surface:#101C20;--surface-2:#13232A;--surface-3:#1A2D34;--elev:#152429;
  --text:#E7EEF0;--text-2:#B6C5CA;--muted:#83969B;--border:#22363D;--border-2:#1B2C32;
  --link:#6FC0D2;--input:#0E191D;--input-border:#2A4048;
  --ok:#5BD49A;--ok-bg:#10301F;--warn:#F2C35B;--warn-bg:#33270A;--bad:#FF8A80;--bad-bg:#3A1513;--info:#7DC0F0;--info-bg:#10283A;
  --teal-soft:color-mix(in srgb,var(--teal) 35%,transparent);
  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -6px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme=auto]{
    --bg:#0A1316;--surface:#101C20;--surface-2:#13232A;--surface-3:#1A2D34;--elev:#152429;
    --text:#E7EEF0;--text-2:#B6C5CA;--muted:#83969B;--border:#22363D;--border-2:#1B2C32;
    --link:#6FC0D2;--input:#0E191D;--input-border:#2A4048;
    --ok:#5BD49A;--ok-bg:#10301F;--warn:#F2C35B;--warn-bg:#33270A;--bad:#FF8A80;--bad-bg:#3A1513;--info:#7DC0F0;--info-bg:#10283A;
    --teal-soft:color-mix(in srgb,var(--teal) 35%,transparent);
    --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -6px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .16s ease both}
::view-transition-new(root){animation:vt-in .2s ease both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:15.5px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;color:var(--text);letter-spacing:-.01em}
h1{font:700 clamp(1.6rem,3.2vw,2.4rem)/1.15 var(--f-head)}
h2{font:650 1.3rem/1.25 var(--f-head)}
h3{font:700 1.04rem/1.3 var(--f-body);letter-spacing:0}
h4{font:700 .92rem/1.3 var(--f-body)}
p{margin:0 0 .8em}
code{background:var(--surface-3);padding:.1em .4em;border-radius:6px;font-size:.86em;word-break:break-all}
hr{border:0;border-top:1px solid var(--border);margin:1rem 0}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px;z-index:999}
:focus-visible{outline:3px solid color-mix(in srgb,var(--gold) 70%,transparent);outline-offset:2px;border-radius:6px}
::selection{background:var(--gold-soft)}

/* ---------- layout primitives ---------- */
.container{width:min(1200px,100% - 32px);margin-inline:auto}
.narrow{width:min(760px,100% - 32px)}
.center{text-align:center}.right{text-align:right}.pad-xl{padding:4rem 0}
.row{display:flex;align-items:center;gap:.5rem}.between{justify-content:space-between}.gap{gap:.6rem}.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:.85rem}
.muted{color:var(--muted)}.small{font-size:.86rem}.lead{font-size:1.05rem;color:var(--text-2)}.bad{color:var(--bad)}
.kicker,.eyebrow{display:block;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--gold) 85%,var(--text))}
.section{padding:1.6rem 0}
.grid2,.grid3,.grid4{display:grid;gap:1rem}
.grid2{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.grid3{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.grid4{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.1rem;align-items:start}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.1rem;align-items:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem;box-shadow:var(--sh-1);margin-bottom:1rem}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
details.card>summary{cursor:pointer;list-style:none}details.card>summary::-webkit-details-marker{display:none}
@media(min-width:901px){.m-only{display:none!important}}
@media(max-width:900px){.split,.detail{grid-template-columns:1fr}.d-only{display:none!important}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--teal);background:var(--teal);color:var(--on-brand);padding:.66rem 1.15rem;min-height:44px;border-radius:999px;font:700 .9rem var(--f-body);cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:transform .12s,background .15s,box-shadow .15s;box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.btn:hover{background:var(--teal-2)}.btn:active{transform:scale(.97)}
.btn .i{width:18px;height:18px}
.btn.ghost{background:transparent;color:var(--link);border-color:var(--border);box-shadow:none}.btn.ghost:hover{border-color:var(--teal);background:var(--surface)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1d1600}.btn.gold:hover{filter:brightness(.96)}
.btn.danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}.btn.danger:hover{background:var(--bad-bg)}
.btn.ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn.soft{background:var(--teal-soft);color:var(--link);border-color:transparent}
.btn.sm{padding:.42rem .85rem;font-size:.83rem;min-height:36px}.btn.xs{padding:.26rem .62rem;font-size:.76rem;min-height:30px}
.btn.block{display:flex;width:100%}.btn.lg{padding:.9rem 1.5rem;font-size:1rem;min-height:52px}
.btn[disabled]{opacity:.6;pointer-events:none}
.danger-text{color:var(--bad)!important}
.iconbtn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;border:0;background:transparent;color:inherit;cursor:pointer;text-decoration:none!important}
.iconbtn:hover{background:rgba(127,127,127,.12)}.iconbtn .i{width:22px;height:22px}
.dot{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#E5484D;color:#fff;font:800 .64rem/18px var(--f-body);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--teal)}
.only-dark{display:none}
:root[data-theme=dark] .only-dark{display:inline}:root[data-theme=dark] .only-light{display:none}
@media (prefers-color-scheme:dark){:root[data-theme=auto] .only-dark{display:inline}:root[data-theme=auto] .only-light{display:none}}
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.14rem .58rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.01em;vertical-align:middle;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-warn{background:var(--warn-bg);color:var(--warn)}.b-bad{background:var(--bad-bg);color:var(--bad)}.b-info{background:var(--info-bg);color:var(--info)}.b-mute{background:var(--surface-3);color:var(--text-2)}
.pill{font-style:normal;font-size:.7rem;font-weight:800;background:var(--gold-soft);color:color-mix(in srgb,var(--gold) 70%,var(--text));padding:.1rem .5rem;border-radius:999px;margin-left:auto}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.32rem;font-size:.86rem;font-weight:700;color:var(--text-2)}
.field small{font-weight:500;color:var(--muted)}.req{color:var(--bad)}
input,select,textarea{font:inherit;font-weight:500;color:var(--text);background:var(--input);border:1.5px solid var(--input-border);border-radius:var(--r-sm);padding:.68rem .8rem;width:100%;min-width:0;min-height:46px;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 4px var(--teal-soft)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--teal);flex:none}
input[type=color]{padding:.2rem;height:46px}
input[type=file]{padding:.5rem;background:var(--surface-2)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7B80' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;font-weight:500;cursor:pointer;color:var(--text)}.check input{margin-top:.15rem}
.ro{padding:.6rem 0;font-weight:500;color:var(--text)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.span2{grid-column:1/-1}
@media(max-width:640px){.formgrid{grid-template-columns:1fr}}
.formactions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.note{background:var(--gold-soft);border-left:3px solid var(--gold);padding:.75rem 1rem;border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text-2)}
.hp{position:absolute;left:-9999px}
.flash{position:relative;padding:.8rem 1rem;border-radius:var(--r-sm);margin-bottom:.8rem;border:1px solid}
.flash ul{margin:.3rem 0 0;padding-left:1.2rem}
.f-success{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 25%,transparent);color:var(--ok)}
.f-error{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 25%,transparent);color:var(--bad)}
.f-warning{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 25%,transparent);color:var(--warn)}
.f-info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 25%,transparent);color:var(--info)}
.seg{display:inline-flex;background:var(--surface-3);border-radius:999px;padding:3px;gap:2px}
.seg a,.seg button,.seg label{padding:.38rem .8rem;border-radius:999px;font-size:.84rem;font-weight:700;color:var(--text-2);text-decoration:none;border:0;background:none;cursor:pointer}
.seg .on,.seg input:checked+span{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.seg input{position:absolute;opacity:0}

/* ---------- toasts ---------- */
.toasts{position:fixed;top:calc(var(--safe-t) + 70px);left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:.5rem;width:min(520px,calc(100% - 24px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;padding:.8rem .7rem .8rem 1rem;border-radius:14px;background:var(--elev);color:var(--text);box-shadow:var(--sh-lg);border:1px solid var(--border);font-size:.92rem;font-weight:600;animation:toast-in .35s cubic-bezier(.2,.9,.3,1.2) both}
.toast>.i{margin-top:1px}.toast span{flex:1}
.toast button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 .2rem}.toast button .i{width:18px;height:18px}
.t-success>.i{color:var(--ok)}.t-error>.i{color:var(--bad)}.t-warning>.i{color:var(--warn)}.t-info>.i{color:var(--info)}
.t-error{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.toast.out{animation:toast-out .3s ease both}
@keyframes toast-in{from{opacity:0;transform:translateY(-14px) scale(.96)}}@keyframes toast-out{to{opacity:0;transform:translateY(-10px)}}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),#ffe07a);z-index:400;transition:width .3s,opacity .3s;opacity:0}
#progress.go{opacity:1;width:75%;transition:width 8s cubic-bezier(.1,.6,.2,1)}

/* ---------- app bar ---------- */
.alertbar{padding:.55rem 0;font-size:.88rem;color:#fff;background:var(--info)}
.alertbar .container{display:flex;gap:.55rem;align-items:flex-start}.alertbar .i{width:18px;height:18px;margin-top:2px}
.alertbar.sev-warning{background:#A65F00}.alertbar.sev-critical{background:#B42318}.alertbar .ext{opacity:.9}
.appbar{background:var(--teal);color:#fff;position:sticky;top:0;z-index:60;padding-top:var(--safe-t);box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 20px -10px rgba(0,0,0,.5)}
.appbar-row{display:flex;align-items:center;gap:.8rem;min-height:var(--appbar-h)}
.brand{display:flex;align-items:center;gap:.65rem;color:inherit;text-decoration:none!important;min-width:0}
.brand img{width:38px;height:38px;border-radius:11px;object-fit:cover;background:#fff;flex:none}
.brand .mark{width:38px;height:38px;border-radius:11px;background:var(--gold);color:var(--teal);display:grid;place-items:center;font:700 1.25rem var(--f-head);flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.brand b{display:block;font:700 1.08rem/1.1 var(--f-head);white-space:nowrap}
.brand small{display:block;font-size:.7rem;opacity:.75;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand.static{color:var(--text);margin-bottom:1rem}
.appbar-title{font:700 1.08rem/1.2 var(--f-body);color:#fff;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backbtn{margin-left:-8px}
.mainnav{display:flex;gap:.1rem;margin-left:auto}
.mainnav a{white-space:nowrap;color:rgba(255,255,255,.82);padding:.45rem .62rem;border-radius:10px;font-size:.88rem;font-weight:600;text-decoration:none}
.mainnav a:hover,.mainnav a.on{background:rgba(255,255,255,.1);color:#fff}
.mainnav a.on{box-shadow:inset 0 -2px 0 var(--gold)}
.tools{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.mainnav+.tools{margin-left:.4rem}
.appbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}.appbar .btn.ghost:hover{background:rgba(255,255,255,.1)}
.citysel{position:relative;display:flex;align-items:center}
.citysel .i{position:absolute;left:.55rem;width:16px;height:16px;opacity:.8;pointer-events:none}
.citysel select{background-color:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);padding:.3rem 1.9rem .3rem 1.9rem;font-size:.82rem;width:auto;min-height:36px;border-radius:999px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.citysel option{color:#13232A;background:#fff}
.langs{display:flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
.langs a{color:rgba(255,255,255,.8);padding:.3rem .55rem;font-size:.78rem;font-weight:700;text-decoration:none}.langs a.on{background:var(--gold);color:var(--teal)}
.acct{display:block;border-radius:50%;text-decoration:none!important;list-style:none;cursor:pointer}.acct::-webkit-details-marker{display:none}
@media(max-width:1400px){.mainnav{display:none}.appbar .tools{margin-left:auto}}
@media(max-width:1620px){.appbar .langs{display:none}}
@media(max-width:900px){
  .appbar-row{gap:.35rem;min-height:56px}
  .brand small{display:none}.brand b{font-size:1.05rem}
}

/* avatars */
.av{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--gold) 60%,#8a5c00));color:#1d1600;font:800 .95rem var(--f-body)}
.av.sm{width:34px;height:34px;font-size:.78rem;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.av.md{width:48px;height:48px}.av.lg{width:76px;height:76px;font-size:1.5rem}

/* ---------- bottom tab bar (mobile) ---------- */
.tabbar{display:none}
@media(max-width:900px){
  body.app,body.admin{padding-bottom:calc(var(--tabbar-h) + var(--safe-b))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--border);box-shadow:0 -6px 24px -12px rgba(0,0,0,.18)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font:700 .66rem var(--f-body);letter-spacing:.01em;text-decoration:none;border:0;background:none;cursor:pointer;padding:0}
  .tabbar .i{width:24px;height:24px;transition:transform .15s}
  .tabbar a.on,.tabbar button.on{color:var(--link)}
  .tabbar a.on:not(.fab)::before{content:"";position:absolute;top:6px;width:44px;height:30px;border-radius:999px;background:var(--teal-soft);z-index:-1}
  .tabbar a:active .i{transform:scale(.88)}
  .tabbar .dot{top:5px;right:calc(50% - 22px);box-shadow:0 0 0 2px var(--surface)}
  .tabbar .fab{margin-top:-22px}
  .fabbtn{display:grid;place-items:center;width:56px;height:56px;border-radius:20px;background:linear-gradient(145deg,var(--teal),var(--teal-2));color:#fff;box-shadow:0 10px 22px -6px color-mix(in srgb,var(--teal) 70%,transparent),0 0 0 4px var(--bg);transition:transform .15s}
  .fabbtn .i{width:26px;height:26px}
  .fab.on .fabbtn{background:linear-gradient(145deg,var(--gold),#a8861a);color:#1d1600}
  .fab:active .fabbtn{transform:scale(.92)}
  .foot{display:none}
}

/* ---------- sheets ---------- */
.sheet{position:fixed;inset:0;z-index:200;background:rgba(5,20,24,.48);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease both}
.sheet[hidden]{display:none}
.sheet-panel{background:var(--surface);width:min(560px,100%);max-height:92vh;overflow-y:auto;overscroll-behavior:contain;border-radius:26px 26px 0 0;padding:.6rem 1rem calc(1.2rem + var(--safe-b));box-shadow:var(--sh-lg);animation:sheet-up .32s cubic-bezier(.2,.9,.25,1) both}
.sheet.top{align-items:flex-start}
.sheet.top .sheet-panel{border-radius:0 0 22px 22px;padding-top:calc(.8rem + var(--safe-t));animation:sheet-down .28s cubic-bezier(.2,.9,.25,1) both;max-height:85vh}
.sheet.closing{animation:fade-out .2s ease both}.sheet.closing .sheet-panel{animation:sheet-out .22s ease both}
@media(min-width:901px){.sheet{align-items:center}.sheet-panel{border-radius:24px;max-height:86vh}.sheet.top{align-items:flex-start;padding-top:70px}.sheet.top .sheet-panel{border-radius:20px}}
@keyframes fade{from{opacity:0}}@keyframes fade-out{to{opacity:0}}
@keyframes sheet-up{from{transform:translateY(100%)}}@keyframes sheet-down{from{transform:translateY(-100%)}}@keyframes sheet-out{to{transform:translateY(40%);opacity:0}}
.grabber{width:42px;height:5px;border-radius:9px;background:var(--border);margin:0 auto .8rem}
.sheet-user{display:flex;align-items:center;gap:.8rem;padding:.7rem;border-radius:16px;background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);text-decoration:none!important;margin-bottom:1rem}
.sheet-user b{display:block}.sheet-user small{color:var(--muted)}.sheet-user .chev{margin-left:auto;color:var(--muted)}
.sheet-auth{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem .3rem;margin-bottom:1rem}
.mtile{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.55rem .2rem;border-radius:14px;color:var(--text);font-size:.74rem;font-weight:700;text-align:center;text-decoration:none!important;line-height:1.2}
.mtile:active{background:var(--surface-3)}
.mtile>span{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--teal-soft);color:var(--link)}
.mtile .i{width:24px;height:24px}
.t2>span{background:#E7F0FB;color:#2563A8}.t3>span{background:#F5ECFB;color:#7A3EA8}.t4>span{background:#FDECEF;color:#C2374F}.t5>span{background:#E6F6EF;color:#1B8256}
.t6>span{background:#FFF4D6;color:#A8770A}.t7>span{background:#FFEDE3;color:#C2561F}.t8>span{background:#EAF0F3;color:#3D5966}.t9>span{background:#EDEBFB;color:#4C45B5}
:root[data-theme=dark] .mtile>span{background:var(--surface-3)!important;filter:saturate(1.2) brightness(1.3)}
@media (prefers-color-scheme:dark){:root[data-theme=auto] .mtile>span{background:var(--surface-3)!important;filter:saturate(1.2) brightness(1.3)}}
.lgroup{background:var(--surface-2);border:1px solid var(--border-2);border-radius:16px;overflow:hidden;margin-bottom:1rem}
.sheet-prefs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.sheet-prefs label{position:relative;flex:1 1 160px;display:flex;align-items:center}.sheet-prefs label .i{position:absolute;left:.7rem;color:var(--muted)}
.sheet-prefs select{padding-left:2.3rem;min-height:42px;border-radius:999px}
.sheet-prefs .iconbtn{background:var(--surface-3)}
.sheet-foot{text-align:center;color:var(--muted);font-size:.75rem;margin:.8rem 0 0}

/* list rows */
.lrow{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;color:var(--text);text-decoration:none!important;border-bottom:1px solid var(--border-2);font-weight:600;min-height:54px;transition:background .12s}
.lrow:last-child{border-bottom:0}.lrow:hover,.lrow:active{background:var(--surface-3)}
.lrow>.i:first-child{color:var(--link)}
.lrow>span:not(.lic):not(.lbody):not(.lright){flex:1}
.lrow .chev{margin-left:auto;color:var(--muted);width:18px;height:18px}
.lrow .lbody{flex:1;min-width:0}.lrow .lbody b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lrow .lbody small{display:block;color:var(--muted);font-weight:500;font-size:.82rem}
.lrow .lright{text-align:right;font-size:.82rem;color:var(--muted)}
.lic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--link);flex:none}
.lic.gold{background:var(--gold-soft);color:color-mix(in srgb,var(--gold) 70%,var(--text))}.lic.red{background:var(--bad-bg);color:var(--bad)}.lic.green{background:var(--ok-bg);color:var(--ok)}.lic.blue{background:var(--info-bg);color:var(--info)}
.list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:1rem}
.list-title{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1.2rem .3rem .5rem}

/* search */
.searchbox{display:flex;align-items:center;gap:.4rem;background:var(--surface-2);border:1.5px solid var(--border);border-radius:16px;padding:0 .3rem 0 .9rem;margin-bottom:.8rem}
.searchbox>.i{color:var(--muted)}
.searchbox input{border:0;background:transparent;box-shadow:none!important;padding-left:.3rem;font-size:1rem}
.liveresults{min-height:60px}
.liveresults .lgroup{margin-bottom:.6rem}
.sgroup{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:.8rem .2rem .4rem}

/* ---------- install banner ---------- */
.installbar{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px);z-index:80;display:flex;align-items:center;gap:.7rem;background:var(--elev);border:1px solid var(--border);border-radius:18px;padding:.7rem .6rem .7rem .7rem;box-shadow:var(--sh-lg);animation:sheet-up .4s cubic-bezier(.2,.9,.25,1) both;max-width:520px;margin:0 auto}
.installbar[hidden]{display:none}
.installicon img{width:44px;height:44px;border-radius:12px}
.installbar>span:nth-child(2){flex:1;min-width:0}.installbar b{display:block;font-size:.92rem}.installbar small{color:var(--muted);font-size:.78rem}
@media(min-width:901px){.installbar{bottom:20px;left:auto;right:20px}}

/* ---------- hero & home ---------- */
.hero{background:radial-gradient(900px 380px at 90% -20%,color-mix(in srgb,var(--gold) 35%,transparent),transparent 60%),linear-gradient(160deg,var(--teal) 0%,color-mix(in srgb,var(--teal) 70%,#000) 100%);color:#fff;padding:2.6rem 0 4.2rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06'%3E%3Cpath d='M40 0l11.7 28.3L80 40 51.7 51.7 40 80 28.3 51.7 0 40l28.3-11.7z'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3C/g%3E%3C/svg%3E");opacity:.9}
.hero::after{content:"";position:absolute;inset:auto -10% -1px -10%;height:44px;background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0}
.hero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);max-width:16ch;margin-bottom:.4rem}
.hero .lead{color:rgba(255,255,255,.82);max-width:56ch}
.hero .eyebrow{color:color-mix(in srgb,var(--gold) 70%,#fff)}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:2.4rem;align-items:center;position:relative;z-index:1}
.herosearch{display:flex;gap:.4rem;background:#fff;padding:.35rem;border-radius:999px;max-width:560px;margin:1.3rem 0;box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.herosearch input{border:0;background:transparent;padding-left:1rem;color:#13232A;box-shadow:none!important}
.herocta{display:flex;gap:.6rem;flex-wrap:wrap}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}.hero .btn:not(.ghost):not(.gold){background:#fff;color:var(--teal);border-color:#fff}
.herostats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.herostats div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:1rem 1.1rem;backdrop-filter:blur(6px)}
.herostats b{display:block;font:700 1.9rem var(--f-head);color:var(--gold)}.herostats span{font-size:.84rem;color:rgba(255,255,255,.8)}
@media(max-width:900px){.hero{padding:1.4rem 0 3.4rem}.hero-grid{grid-template-columns:1fr;gap:1.2rem}.herostats{grid-template-columns:repeat(4,1fr);gap:.45rem}.herostats div{padding:.6rem .4rem;text-align:center;border-radius:14px}.herostats b{font-size:1.35rem}.herostats span{font-size:.66rem;line-height:1.2;display:block}.hero .lead{font-size:.95rem}.herosearch{margin:1rem 0}}
.greet{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.greet .av{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.greet b{display:block;font:700 1.25rem/1.2 var(--f-head);color:#fff}.greet small{color:rgba(255,255,255,.75)}
.hijri{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.88);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);padding:.25rem .7rem;border-radius:999px;margin-bottom:.8rem}
.hijri .i{width:15px;height:15px}
.quick{display:grid;grid-template-columns:repeat(8,1fr);gap:.7rem;margin-top:-2.3rem;position:relative;z-index:2}
.quick a{display:flex;flex-direction:column;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.95rem .4rem;text-align:center;font-weight:700;font-size:.8rem;color:var(--text);box-shadow:var(--sh);text-decoration:none!important;transition:transform .15s,border-color .15s;line-height:1.2}
.quick a:hover{transform:translateY(-2px);border-color:var(--gold)}
.quick a>span{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--teal-soft);color:var(--link)}
.quick .i{width:23px;height:23px}
@media(max-width:1000px){.quick{grid-template-columns:repeat(4,1fr);gap:.5rem}.quick a{padding:.75rem .2rem;font-size:.72rem;border-radius:16px}.quick a>span{width:42px;height:42px;border-radius:14px}}
.sechead{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.85rem}.sechead h2{margin:0}.sechead a{font-size:.86rem;font-weight:700;display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap}.sechead a .i{width:16px;height:16px}
.callout{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;background:linear-gradient(120deg,var(--surface) 0%,var(--gold-soft) 100%);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:var(--r);padding:1.4rem}
.callout h2{margin-bottom:.3rem}.callout p{margin:0;color:var(--text-2)}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,330px);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}.hscroll>*{scroll-snap-align:start}
@media(max-width:900px){.hscroll{grid-auto-columns:82%;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}.section{padding:1.2rem 0}}

/* banners / slider */
.slides{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.slides-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.slides-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:180px;display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--teal),#1a6b7e);color:#fff;text-decoration:none!important}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .sl-body{position:relative;padding:1.2rem 1.3rem;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);width:100%}
.slide h3{color:#fff;font:700 1.3rem var(--f-head);margin:0 0 .2rem}.slide p{margin:0;color:rgba(255,255,255,.85);font-size:.9rem}
.slide-dots{position:absolute;bottom:.6rem;right:.9rem;display:flex;gap:5px}.slide-dots i{width:7px;height:7px;border-radius:9px;background:rgba(255,255,255,.5);transition:.2s}.slide-dots i.on{width:18px;background:#fff}

/* prayer */
.prayercard{background:linear-gradient(150deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh-1)}
.prayer-next{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.prayer-next b{display:block;font:700 1.6rem/1.1 var(--f-head)}.prayer-next small{color:var(--muted);font-weight:600}
.prayer-next .countdown{font:800 1.05rem var(--f-body);color:var(--link);font-variant-numeric:tabular-nums;text-align:right}
.ptimes{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem}
.ptimes div{text-align:center;padding:.55rem .1rem;border-radius:12px;background:var(--surface-3)}
.ptimes div.on{background:var(--teal);color:#fff}.ptimes div.on small{color:rgba(255,255,255,.8)}
.ptimes small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ptimes b{font-size:.92rem;font-variant-numeric:tabular-nums}
.ptable{width:100%;border-collapse:collapse}.ptable td{padding:.85rem .4rem;border-bottom:1px solid var(--border-2);font-size:1rem}.ptable td:last-child{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.ptable tr.on td{color:var(--link)}.ptable tr.on td:first-child::before{content:"● ";color:var(--gold)}
.qibla{position:relative;width:220px;height:220px;margin:1rem auto;border-radius:50%;background:radial-gradient(circle,var(--surface) 55%,var(--surface-3) 56%);border:2px solid var(--border);box-shadow:var(--sh)}
.qibla .rose{position:absolute;inset:0;transition:transform .2s ease}
.qibla .rose span{position:absolute;left:50%;transform:translateX(-50%);font-weight:800;font-size:.8rem;color:var(--muted)}
.qibla .rose .n{top:8px;color:var(--bad)}.qibla .rose .s{bottom:8px}
.qibla .rose .e,.qibla .rose .w{top:50%;transform:translateY(-50%)}.qibla .rose .e{right:10px;left:auto}.qibla .rose .w{left:10px}
.qibla .needle{position:absolute;left:50%;top:50%;width:6px;height:92px;margin-left:-3px;margin-top:-92px;background:linear-gradient(var(--gold),color-mix(in srgb,var(--gold) 60%,#000));border-radius:6px 6px 2px 2px;transform-origin:50% 100%;transition:transform .2s ease}
.qibla .needle::before{content:"🕋";position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:1.1rem}
.qibla .hub{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--teal);border:3px solid var(--surface)}

/* ---------- cards ---------- */
.newscard,.faccard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;color:var(--text);text-decoration:none!important;box-shadow:var(--sh-1);transition:transform .15s,box-shadow .15s,border-color .15s;height:100%}
.newscard:hover,.faccard:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--gold) 45%,var(--border))}
.newscard .media,.faccard .media{aspect-ratio:16/9;background:var(--surface-3);position:relative;overflow:hidden}
.newscard .media img,.faccard .media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.newscard:hover .media img,.faccard:hover .media img{transform:scale(1.03)}
.ph{width:100%;height:100%;display:grid;place-items:center;color:var(--link);background:radial-gradient(circle at 30% 20%,var(--gold-soft),transparent 60%),linear-gradient(135deg,var(--surface-3),var(--surface-2))}
.ph .i{width:42px;height:42px;stroke-width:1.4;opacity:.7}
.ph.letter{font:700 2.4rem var(--f-head)}
.newscard .body,.faccard .body{padding:.95rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.newscard h3,.faccard h3{margin:.15rem 0;font-size:1.02rem;line-height:1.35}
.newscard p{color:var(--text-2);font-size:.88rem;margin:0}
.meta{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.closed{position:absolute;left:.6rem;top:.6rem;background:var(--warn-bg);color:var(--warn);font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:999px}
.typechip{position:absolute;right:.6rem;top:.6rem;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;backdrop-filter:blur(6px)}
.local{font-family:"Noto Sans Gujarati",var(--f-body);color:var(--text-2);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}.chips span{display:inline-flex;align-items:center;gap:.25rem;font-size:.73rem;font-weight:600;background:var(--surface-3);color:var(--text-2);padding:.18rem .6rem;border-radius:999px}.chips .i{width:13px;height:13px}
.dist{color:var(--link);font-weight:700;font-size:.82rem}
.eventcard{display:flex;gap:.9rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:.8rem .9rem;color:var(--text);text-decoration:none!important;transition:border-color .15s}
.eventcard:hover{border-color:var(--gold)}.eventcard h3{margin:0;font-size:.98rem}.eventcard p{margin:0}
.eventcard .date{flex:none;width:54px;text-align:center;background:linear-gradient(160deg,var(--teal),var(--teal-2));color:#fff;border-radius:14px;padding:.4rem 0}
.eventcard .date b{display:block;font:700 1.3rem var(--f-head);line-height:1}.eventcard .date span{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
.schemecard{display:block;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--r-md);padding:.9rem 1rem;color:var(--text);text-decoration:none!important;transition:border-color .15s,transform .15s}
.schemecard h3{margin:.15rem 0}.schemecard:hover{transform:translateY(-1px)}
.leader{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.3rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.leader img,.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:.4rem;box-shadow:0 0 0 4px var(--gold-soft)}
.avatar{display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),#1a6b7e);color:#fff;font:700 1.8rem var(--f-head)}.avatar.sm{width:48px;height:48px;font-size:1.2rem;margin:0}
.leader h3{margin:0}.leader p{margin:0;color:var(--link);font-weight:700;font-size:.88rem}
.helpcard h3{margin:.2rem 0 .4rem}
.bizcard h3{margin:0}.bizcard .logo{width:48px;height:48px;border-radius:12px;object-fit:cover}
.offer{background:var(--gold-soft);border:1px dashed color-mix(in srgb,var(--gold) 60%,transparent);border-radius:var(--r-sm);padding:.5rem .7rem;margin:.6rem 0;font-size:.88rem}.offer b{color:color-mix(in srgb,var(--gold) 65%,var(--text))}
.statcard{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;color:var(--text);text-decoration:none!important}
.statcard b{display:block;font:800 1.4rem var(--f-body);line-height:1.1}.statcard small{color:var(--muted);font-weight:600}

/* ---------- pages ---------- */
.pagehead{background:linear-gradient(180deg,var(--surface-3),var(--bg));border-bottom:1px solid var(--border-2);padding:1.8rem 0 1.4rem}
.ph-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.pagehead h1{margin:.1rem 0 .25rem}.pagehead .lead{margin:0}
.ph-actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media(max-width:900px){.pagehead{padding:.9rem 0 .8rem;background:var(--bg);border:0}.pagehead h1{display:none}.pagehead .lead{font-size:.9rem;color:var(--muted)}.pagehead .ph-text:not(:has(.lead)){display:none}.ph-actions{width:100%}.ph-actions .btn{flex:1}}
.filterbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.1rem}
.filterbar input[type=search]{flex:1 1 220px}.filterbar select{width:auto;flex:0 1 auto}
@media(max-width:640px){.filterbar{display:grid;grid-template-columns:1fr 1fr}.filterbar input[type=search]{grid-column:1/-1}.filterbar select,.filterbar .btn,.filterbar details{width:100%}}
.amen{position:relative}.amen summary{list-style:none;cursor:pointer;border:1.5px solid var(--input-border);background:var(--input);border-radius:var(--r-sm);padding:.62rem .8rem;font-weight:600;min-height:46px}
.amen[open]{background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--sh);position:relative;z-index:5;padding-bottom:.5rem}.amen[open] .check{padding:.3rem .7rem}
.pills{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1.1rem;scrollbar-width:none;padding-bottom:2px}.pills::-webkit-scrollbar{display:none}
.pills a{flex:none;padding:.42rem .9rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.84rem;font-weight:600;color:var(--text-2);text-decoration:none}.pills a.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.tabs{display:flex;gap:.15rem;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:1.3rem;scrollbar-width:thin}
.tabs a{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem .85rem;white-space:nowrap;color:var(--text-2);font-weight:700;font-size:.86rem;border-bottom:3px solid transparent;text-decoration:none}
.tabs a .i{width:17px;height:17px}.tabs a.on{color:var(--link);border-color:var(--gold)}
.empty{text-align:center;padding:2.4rem 1rem;color:var(--muted);background:var(--surface);border:1px dashed var(--border);border-radius:var(--r)}
.empty-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--surface-3);color:var(--muted);margin-bottom:.6rem}.empty-ic .i{width:30px;height:30px}
.cathead{margin:1.6rem 0 .8rem;padding-bottom:.4rem;border-bottom:2px solid var(--border-2)}
.map{height:420px;border-radius:var(--r);border:1px solid var(--border);margin-bottom:1rem;z-index:1;background:var(--surface-3)}.map.sm{height:220px}
@media(max-width:900px){.map{height:300px}}
.leaflet-popup-content a{font-weight:700}
.leaflet-container{font-family:var(--f-body)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;margin-bottom:1rem}
.gallery>img:first-child{grid-column:1/-1;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r)}
.gallery figure{margin:0}.gallery figure img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}.gallery figcaption{font-size:.78rem;color:var(--muted)}
.hallrow{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--border-2)}.hallrow:last-child{border:0}.hallrow h3{margin:0}
@media(max-width:560px){.hallrow{flex-direction:column}.hallrow .btn{width:100%}}
.emergency{background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 25%,transparent);border-radius:var(--r);padding:1.1rem 1.3rem;margin-bottom:1.4rem;display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center}
.emergency h2{color:var(--bad);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}.emergency p{margin:0;color:var(--text-2)}.emergency.sm{display:block;padding:.8rem 1rem;font-size:.9rem}
.emerg-grid{display:flex;gap:.5rem;flex-wrap:wrap}.emerg-grid a{background:var(--surface);border:1px solid color-mix(in srgb,var(--bad) 25%,transparent);border-radius:var(--r-sm);padding:.45rem .85rem;text-align:center;color:var(--bad);text-decoration:none;min-width:76px}
.emerg-grid b{display:block;font-size:1.25rem}.emerg-grid span{font-size:.72rem;color:var(--text-2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;margin-bottom:1.2rem}
.tiles a{display:flex;flex-direction:column;gap:.15rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;color:var(--text);text-decoration:none!important;box-shadow:var(--sh-1);transition:border-color .15s,transform .15s}
.tiles a:hover{border-color:var(--gold);transform:translateY(-1px)}
.tiles a>.lic{margin-bottom:.4rem}.tiles b{display:block}.tiles small{color:var(--muted)}
.line{padding:.65rem 0;border-bottom:1px solid var(--border-2);color:var(--text);text-decoration:none!important}.line:last-child{border-bottom:0}
.notif{display:flex;gap:.8rem;padding:.9rem 1rem;border-bottom:1px solid var(--border-2);color:var(--text);text-decoration:none!important;align-items:flex-start}
.notif:last-child{border-bottom:0}.notif a{color:var(--text);text-decoration:none}
.notif.unread{background:color-mix(in srgb,var(--gold) 8%,var(--surface));box-shadow:inset 3px 0 0 var(--gold)}
.notif .nbody{flex:1;min-width:0}.notif .nbody b{display:block}.notif .nbody p{margin:.15rem 0 0;font-size:.88rem;color:var(--text-2)}.notif time{font-size:.75rem;color:var(--muted);white-space:nowrap}
.timeline{list-style:none;padding:0 0 0 1.1rem;margin:0 0 1rem;border-left:2px solid var(--border)}
.timeline li{position:relative;padding:.35rem 0 .8rem}
.timeline li::before{content:"";position:absolute;left:-1.52rem;top:.7rem;width:12px;height:12px;border-radius:50%;background:var(--teal);border:3px solid var(--surface)}
.timeline li.internal{background:var(--gold-soft);padding-left:.6rem;border-radius:8px}.timeline li.internal::before{background:var(--gold)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:.5rem 1rem;margin:0}.kv dt{color:var(--muted);font-size:.86rem;font-weight:600}.kv dd{margin:0}
@media(max-width:640px){.kv{grid-template-columns:1fr;gap:.1rem}.kv dt{margin-top:.55rem}}
.prose{font-size:1rem}.prose img{border-radius:var(--r-sm);margin:1rem 0}.prose h2,.prose h3{margin-top:1.3em}.prose a{text-decoration:underline}
.article h1{font-size:clamp(1.7rem,3.5vw,2.5rem)}
.hero-img{width:100%;border-radius:var(--r);margin:1rem 0;max-height:440px;object-fit:cover}
.auth{max-width:440px;margin:0 auto}.auth.wide{max-width:780px}
.auth .card{padding:1.6rem}
.authhead{text-align:center;margin-bottom:1.2rem}.authhead .mark{width:60px;height:60px;border-radius:18px;background:var(--gold);color:var(--teal);display:grid;place-items:center;font:700 1.8rem var(--f-head);margin:0 auto .8rem}
.slotlist{list-style:none;padding:0;margin:0;max-height:360px;overflow:auto}.slotlist li{padding:.45rem 0;border-bottom:1px solid var(--border-2);font-size:.86rem}.slotlist li.tentative{opacity:.7}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:.6rem 0}
.cal .h{font-size:.7rem;font-weight:800;text-transform:uppercase;color:var(--muted);text-align:center;padding:.2rem 0}
.cal button{position:relative;aspect-ratio:1;border:1px solid var(--border-2);background:var(--surface-2);border-radius:10px;font:700 .86rem var(--f-body);color:var(--text);cursor:pointer;padding:0}
.cal button:disabled{opacity:.3;cursor:not-allowed}
.cal button.busy::after{content:"";position:absolute;bottom:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--warn)}
.cal button.full{background:var(--bad-bg);color:var(--bad)}
.cal button.sel{background:var(--teal);color:#fff;border-color:var(--teal)}
.cal button.today{box-shadow:inset 0 0 0 2px var(--gold)}
.calnav{display:flex;align-items:center;justify-content:space-between}
.daybusy{font-size:.84rem;margin:.3rem 0 .6rem}

/* digital ID card */
.idcard{max-width:600px;margin:0 auto 1rem;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,var(--teal),color-mix(in srgb,var(--teal) 60%,#000));color:#fff;box-shadow:0 26px 60px -18px color-mix(in srgb,var(--teal) 75%,transparent);position:relative;isolation:isolate}
.idcard::before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 45%,transparent),transparent 70%);z-index:-1}
.idcard::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 80 80'%3E%3Cpath d='M40 0l11.7 28.3L80 40 51.7 51.7 40 80 28.3 51.7 0 40l28.3-11.7z' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");z-index:-1}
.idtop{display:flex;align-items:center;gap:.8rem;padding:1rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.12)}
.idtop .mark{width:40px;height:40px;border-radius:12px;background:var(--gold);color:var(--teal);display:grid;place-items:center;font:700 1.25rem var(--f-head)}
.idtop b{display:block;font-family:var(--f-head)}.idtop small{color:rgba(255,255,255,.7)}
.idtop .chipgold{margin-left:auto;width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#f6e27a,#c9a227 50%,#9b7a12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.idbody{display:grid;grid-template-columns:96px 1fr auto;gap:1.1rem;padding:1.3rem;align-items:center}
.idphoto{width:96px;height:118px;border-radius:14px;object-fit:cover;border:3px solid rgba(255,255,255,.25)}
.idphoto.ph{display:grid;place-items:center;background:rgba(255,255,255,.1);font:700 2.5rem var(--f-head);color:#fff}
.idinfo h2{color:#fff;margin:0 0 .5rem;font-size:1.3rem}
.idinfo dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;margin:0;font-size:.86rem}.idinfo dt{color:rgba(255,255,255,.6)}.idinfo dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.idqr{background:#fff;border-radius:16px;padding:10px;text-align:center;cursor:zoom-in}
.idqr small{display:block;color:#5b6b70;font-size:.68rem;margin-top:5px;font-weight:600}
.idqr #qr{display:grid;place-items:center;min-height:164px}.idqr #qr img,.idqr #qr canvas{width:164px!important;height:164px!important}
.stale{filter:blur(3px) grayscale(1);opacity:.5}
.idfoot{display:flex;justify-content:space-between;background:rgba(0,0,0,.2);padding:.6rem 1.3rem;font-size:.78rem;color:var(--gold);font-weight:700}
.qrbar{height:4px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden;margin-top:6px}.qrbar i{display:block;height:100%;background:var(--teal);transition:width 1s linear}
@media(max-width:600px){.idbody{grid-template-columns:78px 1fr;gap:.9rem}.idqr{grid-column:1/-1;justify-self:center;width:100%;max-width:260px}.idqr #qr img,.idqr #qr canvas{width:200px!important;height:200px!important;margin:0 auto}.idphoto{width:78px;height:96px}}
.qrfull{position:fixed;inset:0;z-index:500;background:#fff;display:grid;place-items:center;padding:24px}
.qrfull canvas,.qrfull img{width:min(80vw,420px)!important;height:auto!important;image-rendering:pixelated}
.qrfull p{color:#13232A;text-align:center;font-weight:700}
.verify{text-align:center;border-radius:var(--r);padding:2rem 1rem;margin-bottom:1rem}
.verify .icon{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;margin:0 auto 1rem;color:#fff}.verify .icon .i{width:44px;height:44px;stroke-width:2.6}
.verify.ok{background:var(--ok-bg);border:2px solid color-mix(in srgb,var(--ok) 40%,transparent)}.verify.ok .icon{background:var(--ok)}
.verify.bad{background:var(--bad-bg);border:2px solid color-mix(in srgb,var(--bad) 40%,transparent)}.verify.bad .icon{background:var(--bad)}
.vphoto{width:110px;height:130px;object-fit:cover;border-radius:14px;margin:0 auto .8rem}.vname{font:700 1.5rem var(--f-head);margin:0}
.reader{max-width:340px;margin:0 auto 1rem;border-radius:16px;overflow:hidden}

/* member hub */
.hubhead{background:linear-gradient(160deg,var(--teal),color-mix(in srgb,var(--teal) 65%,#000));color:#fff;padding:1.4rem 0 2.6rem;position:relative;overflow:hidden}
.hubhead::after{content:"";position:absolute;inset:auto -10% -1px -10%;height:30px;background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0}
.hubhead .container{position:relative;z-index:1}
.hubuser{display:flex;align-items:center;gap:1rem}
.hubuser h1{color:#fff;font-size:1.45rem;margin:0}.hubuser p{margin:.1rem 0 0;color:rgba(255,255,255,.78);font-size:.88rem}
.hubuser .av{box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.hubstats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:-1.6rem;position:relative;z-index:2}
.hubstats a{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.75rem .4rem;text-align:center;color:var(--text);text-decoration:none!important;box-shadow:var(--sh)}
.hubstats b{display:block;font:800 1.25rem var(--f-body)}.hubstats small{color:var(--muted);font-size:.7rem;font-weight:700;line-height:1.2;display:block}
.minicard{display:flex;align-items:center;gap:.9rem;background:linear-gradient(135deg,var(--teal),color-mix(in srgb,var(--teal) 60%,#000));color:#fff;border-radius:var(--r);padding:1rem 1.1rem;text-decoration:none!important;box-shadow:var(--sh);margin-bottom:1rem}
.minicard .qrico{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#fff;color:var(--teal)}
.minicard b{display:block;font-size:1rem}.minicard small{color:rgba(255,255,255,.75)}.minicard .chev{margin-left:auto}

/* ---------- footer ---------- */
.foot{background:#0A2C35;color:#C3D6DA;margin-top:3rem;padding:2.4rem 0 1rem}
:root[data-theme=dark] .foot{background:#071418}
.foot .brand{color:#fff;margin-bottom:.6rem}.foot h4{color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.foot a{display:block;color:#C3D6DA;font-size:.88rem;padding:.16rem 0}.foot .muted{color:#88A3A9}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:2rem;padding-top:1rem}
@media (display-mode:standalone){.foot{display:none}}

/* ---------- tables (become cards on phones) ---------- */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:1rem}
.card .tablewrap{border:0;border-radius:0;margin:0}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--muted);background:var(--surface-2);padding:.7rem .8rem;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:.72rem .8rem;border-bottom:1px solid var(--border-2);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--surface-2)}.table.compact td,.table.compact th{padding:.42rem .6rem}
.table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.table tr.overdue td{background:var(--bad-bg)}
.actions{white-space:nowrap}.actions form{display:inline-flex;gap:.25rem;margin:0 .1rem}
@media(max-width:760px){
  .tablewrap.cards{background:transparent;border:0;overflow:visible}
  .cards .table,.cards .table tbody,.cards .table tr,.cards .table td{display:block;width:100%}
  .cards .table thead{display:none}
  .cards .table tr{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:.65rem;padding:.55rem .85rem;box-shadow:var(--sh-1)}
  .cards .table tr.overdue{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
  .cards .table tr.overdue td{background:transparent}
  .cards .table td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border:0;padding:.32rem 0;text-align:right}
  .cards .table td::before{content:attr(data-label);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;flex:none}
  .cards .table td:first-child{font-size:1rem;text-align:left;justify-content:flex-start;border-bottom:1px solid var(--border-2);padding-bottom:.5rem;margin-bottom:.2rem}
  .cards .table td:first-child::before{display:none}
  .cards .table td[data-label=""]::before{display:none}
  .cards .table td.actions{justify-content:flex-start;flex-wrap:wrap;gap:.35rem;white-space:normal;border-top:1px solid var(--border-2);margin-top:.3rem;padding-top:.55rem}
  .cards .table tbody tr:hover td{background:transparent}
  .cards .table.compact td{padding:.25rem 0}
}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:10px}.thumb.lg{width:96px;height:96px;margin-bottom:.4rem}
.pager{display:flex;gap:.3rem;align-items:center;margin:1rem 0;flex-wrap:wrap}
.pager a,.pager .cur{min-width:38px;min-height:38px;display:grid;place-items:center;padding:.3rem .6rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-size:.86rem;font-weight:700}
.pager .cur{background:var(--teal);color:#fff;border-color:var(--teal)}.pager .muted{margin-left:.6rem}

/* ---------- admin console ---------- */
body.admin{display:flex;min-height:100vh;background:var(--bg)}
.sidebar{width:268px;flex:none;background:#0A2C35;color:#C3D6DA;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
:root[data-theme=dark] .sidebar{background:#071418;border-right:1px solid var(--border)}
.sb-head{padding:1rem 1.1rem .8rem;border-bottom:1px solid rgba(255,255,255,.08)}.sb-head .brand{color:#fff}
.sb-tag{display:inline-block;margin-top:.5rem;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(201,162,39,.12);padding:.15rem .55rem;border-radius:999px}
.sidebar nav{padding:.5rem .55rem 1rem;flex:1}
.sb-group{margin-top:.15rem}
.sb-group summary{display:flex;align-items:center;gap:.6rem;list-style:none;cursor:pointer;padding:.55rem .65rem;border-radius:10px;color:#E3EEF0;font-size:.86rem;font-weight:700}
.sb-group summary::-webkit-details-marker{display:none}
.sb-group summary:hover{background:rgba(255,255,255,.05)}
.sb-group summary .i{width:18px;height:18px;opacity:.85}.sb-group summary .caret{margin-left:auto;width:15px;height:15px;opacity:.5;transition:transform .2s}
.sb-group[open] summary .caret{transform:rotate(180deg)}
.sb-group a{display:flex;align-items:center;justify-content:space-between;color:#B6CACE;padding:.42rem .7rem .42rem 2.35rem;border-radius:9px;font-size:.85rem;text-decoration:none;margin:1px 0}
.sb-group a:hover{background:rgba(255,255,255,.05);color:#fff}
.sb-group a.on{background:rgba(201,162,39,.15);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.sb-foot{padding:.7rem;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:.4rem}
.sb-foot a{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;color:#C3D6DA;font-size:.78rem;font-weight:700;padding:.5rem;border-radius:9px;background:rgba(255,255,255,.05);text-decoration:none}.sb-foot .i{width:16px;height:16px}
.adminmain{flex:1;min-width:0;display:flex;flex-direction:column}
.adminbar{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.4rem;padding-top:calc(.6rem + var(--safe-t));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;min-height:62px}
.adminbar h1{font:700 1.2rem/1.2 var(--f-body);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminbar .dot{box-shadow:0 0 0 2px var(--surface)}
.sbtoggle{display:none}
.adminbody{padding:1.4rem;max-width:1440px;width:100%}
.adminbody .split{margin-bottom:0}
.adminbody .toasts{top:calc(var(--safe-t) + 74px)}
.scrim{display:none}
.dropdown{position:relative}.dropdown summary{list-style:none}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);width:250px;background:var(--elev);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-lg);padding:.4rem;z-index:90}
.menu-pop .mp-head{padding:.6rem .7rem;border-bottom:1px solid var(--border-2);margin-bottom:.3rem}.menu-pop .mp-head small{display:block;color:var(--muted);font-size:.75rem}
.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .7rem;border-radius:10px;color:var(--text);font:600 .88rem var(--f-body);background:none;border:0;cursor:pointer;text-decoration:none}
.menu-pop a:hover,.menu-pop button:hover{background:var(--surface-3)}
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:120;transform:translateX(-105%);transition:transform .25s cubic-bezier(.2,.9,.25,1);width:min(300px,86vw);padding-top:var(--safe-t)}
  body.sbopen .sidebar{transform:none;box-shadow:var(--sh-lg)}
  body.sbopen .scrim{display:block;position:fixed;inset:0;background:rgba(5,20,24,.5);z-index:110;animation:fade .2s}
  .sbtoggle{display:inline-grid}.adminbar{padding:.5rem .7rem;padding-top:calc(.5rem + var(--safe-t))}.adminbar h1{font-size:1.05rem}
  .adminbody{padding:1rem .85rem}
}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.toolbar>div{display:flex;gap:.5rem;flex-wrap:wrap}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filters input,.filters select{width:auto;padding:.5rem .7rem;font-size:.86rem;min-height:40px}
.filters input[type=search]{min-width:220px}.filters .field{flex-direction:row;align-items:center}
@media(max-width:640px){.toolbar{flex-direction:column;align-items:stretch}.toolbar>div{display:grid;grid-template-columns:1fr 1fr}.filters{display:grid;grid-template-columns:1fr 1fr}.filters input[type=search]{grid-column:1/-1;min-width:0}.filters select,.filters input{width:100%}}
.form-card{max-width:1000px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem;margin-bottom:1.1rem}
.kpis div{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--sh-1);overflow:hidden}
.kpis div::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:var(--teal-soft)}
.kpis b{display:block;font:800 1.6rem var(--f-body);color:var(--text);font-variant-numeric:tabular-nums;position:relative;z-index:1}.kpis span{font-size:.8rem;font-weight:600;color:var(--muted)}
.kpis.small3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.kpis{grid-template-columns:1fr 1fr;gap:.55rem}.kpis b{font-size:1.3rem}.kpis div{padding:.8rem .9rem}}
.count{display:inline-block;min-width:26px;text-align:center;padding:.1rem .5rem;border-radius:999px;background:var(--surface-3);font-weight:800;font-size:.78rem;font-style:normal;color:var(--text-2)}
.count.hot{background:var(--gold);color:#1d1600}
.bars{display:flex;gap:.6rem;align-items:flex-end;height:160px;margin:1rem 0}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.2rem}
.bars span{width:100%;max-width:44px;background:linear-gradient(180deg,var(--gold),#a8861a);border-radius:8px 8px 3px 3px;min-height:3px}.bars b{font-size:.78rem}.bars small{font-size:.72rem;color:var(--muted)}
.chartbox{position:relative;height:280px}
.modal{border:0;border-radius:22px;padding:1.4rem;width:min(520px,94vw);box-shadow:var(--sh-lg);background:var(--surface);color:var(--text)}.modal.wide{width:min(860px,96vw)}.modal::backdrop{background:rgba(5,20,24,.55);backdrop-filter:blur(2px)}
.grantrow{display:grid;grid-template-columns:1fr 200px 150px auto;gap:.5rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border-2)}
@media(max-width:800px){.grantrow{grid-template-columns:1fr}}
.alertrow{display:flex;justify-content:space-between;gap:1rem;padding:.85rem;border-left:4px solid var(--info);background:var(--surface-2);border-radius:0 12px 12px 0;margin-bottom:.6rem;flex-wrap:wrap}
.alertrow.sev-warning{border-color:#C27A00}.alertrow.sev-critical{border-color:var(--bad)}
.jentry .table{margin:.6rem 0}
.checks{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.3rem;font-size:.9rem}.checks .ok{color:var(--ok)}.checks .bad{color:var(--bad)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.1rem 2.8rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.85rem}
.steps li::after{content:"";position:absolute;left:14px;top:30px;bottom:4px;width:2px;background:var(--border)}
.steps li:last-child::after{display:none}
body.install{padding-top:1rem}

/* skeleton */
.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:skel 1.2s infinite;border-radius:10px;min-height:14px}
@keyframes skel{to{background-position:-200% 0}}

/* pull to refresh */
.ptr{position:fixed;top:calc(var(--safe-t) + 64px);left:50%;transform:translate(-50%,-80px);z-index:90;width:40px;height:40px;border-radius:50%;background:var(--elev);box-shadow:var(--sh);display:grid;place-items:center;color:var(--link);transition:transform .2s}
.ptr .i{transition:transform .1s}.ptr.spin .i{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.offline-pill{position:fixed;left:50%;top:calc(var(--safe-t) + 66px);transform:translateX(-50%);z-index:250;background:#13232A;color:#fff;font-size:.8rem;font-weight:700;padding:.4rem .9rem;border-radius:999px;box-shadow:var(--sh-lg)}

/* receipt / print */
body.receipt{background:#eee;color:#13232A}.paper{background:#fff;max-width:760px;margin:2rem auto;padding:2.5rem;border-radius:12px}
body.receipt .table th{background:#f7f4ee;color:#556}body.receipt .table td{border-color:#eee}
@media print{.noprint,.appbar,.foot,.sidebar,.adminbar,.alertbar,.tabbar,.installbar,.toasts{display:none!important}body{padding:0!important;background:#fff!important}body.receipt{background:#fff}.paper{margin:0;padding:0}}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}@view-transition{navigation:none}}
.small .i,p.small .i{width:15px;height:15px}
.faq summary{list-style:none;cursor:pointer}.faq summary::-webkit-details-marker{display:none}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq-a{padding:0 1rem 1rem 4.2rem;color:var(--text-2);font-size:.94rem}
.faq{border-bottom:1px solid var(--border-2)}.faq:last-child{border-bottom:0}.faq summary.lrow{border-bottom:0}
label.lrow input{margin:0}
.seg label{padding:0}.seg label span{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .9rem;border-radius:999px}.seg label .i{width:16px;height:16px}
@media(max-width:900px){.pagehead.keep{background:linear-gradient(180deg,var(--surface-3),var(--bg));padding:1rem 0}.pagehead.keep h1{display:block;font-size:1.5rem}}
.actionrow{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
@media(max-width:600px){.actionrow{display:grid;grid-template-columns:1fr 1fr}.actionrow .btn{padding-inline:.6rem}}
.split>*,.detail>*,.hero-grid>*{min-width:0}
.lrow .lright{flex:none}

.mapnote{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:1rem}
@media(max-width:900px){.p-me-book .detail>aside{order:-1}}
/* SVG charts */
.svgchart{width:100%;height:auto;display:block;overflow:visible}
.svgchart .grid{stroke:var(--border-2);stroke-width:1}
.svgchart .ax{fill:var(--muted);font:600 11px var(--f-body)}
.svgchart .bar{fill:var(--teal)}.svgchart .bar:hover{fill:var(--gold)}
.svgchart .line{fill:none;stroke:var(--gold);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.svgchart .area{fill:var(--gold-soft)}
.svgchart .pt{fill:var(--surface);stroke:var(--gold);stroke-width:2.5;vector-effect:non-scaling-stroke}
.donutwrap{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.svgchart.donut{width:200px;height:200px;flex:none}
.svgchart .big{font:800 22px var(--f-body);fill:var(--text)}.svgchart .lbl{font:600 11px var(--f-body);fill:var(--muted)}
.legend{display:flex;flex-direction:column;gap:.35rem;font-size:.84rem}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.45rem}.legend b{margin-left:.3rem}
.hbars{display:flex;flex-direction:column;gap:.55rem}
.hbar{display:grid;grid-template-columns:110px 1fr 56px;gap:.6rem;align-items:center;font-size:.85rem}
.hbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.hbar div{height:12px;background:var(--surface-3);border-radius:9px;overflow:hidden}.hbar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 60%,var(--gold)));border-radius:9px}
.hbar b{text-align:right;font-variant-numeric:tabular-nums}
.chart-empty{display:grid;place-items:center;height:160px;color:var(--muted);background:var(--surface-2);border-radius:12px}
@media(max-width:1520px){.mainnav{display:none}.appbar .tools{margin-left:auto}}

/* =====================================================================
   v4.0.1 — mobile polish pass (audited at 360px on every screen)
   ===================================================================== */
[hidden]{display:none!important}
@media(min-width:641px){.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field,.field>*{min-width:0}
select{max-width:100%;text-overflow:ellipsis}
.table td{overflow-wrap:anywhere}
.row.gap{flex-wrap:wrap}
.sechead a{padding:.45rem 0;min-height:36px}
.kpis div>*{position:relative;z-index:1}
.kpis div::after{z-index:0;opacity:.7}
.lrow .lbody b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card form+form,.card form+h3,.card .stack+form{margin-top:1.2rem}
.tablewrap.card.cards{padding:0}
.card>table.table,.jentry .table,.card .table.compact{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card>table.table td,.jentry .table td,.card .table.compact td{overflow-wrap:normal;word-break:normal}
.card>table.table td:first-child,.jentry .table td:first-child{min-width:9rem}
.filters>.btn,.toolbar>.btn{align-self:end}
.ptimes b{white-space:nowrap}
.newscard .media:has(.ph),.faccard .media:has(.ph){aspect-ratio:auto;height:96px}
.newscard .media:has(.ph) .ph .i,.faccard .media:has(.ph) .ph .i{width:34px;height:34px}
.alertbar{cursor:pointer}
.alertbar .x{margin-left:auto;background:none;border:0;color:#fff;opacity:.85;padding:0 0 0 .4rem;cursor:pointer}
.alertbar .x .i{width:18px;height:18px}

@media(max-width:900px){
  .tabbar a,.tabbar button{font-size:.7rem}
  /* alerts: two lines, tap to expand */
  .alertbar{padding:.5rem 0;font-size:.84rem}
  .alertbar span.txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .alertbar.open span.txt{-webkit-line-clamp:unset;display:block}
  /* home */
  .herostats{display:none}
  body.authed .hero h1{display:none}
  .hero{padding:1.1rem 0 3.2rem}
  .greet{margin-bottom:.4rem}
  /* filters: link-buttons and checkboxes on their own rows */
  .filterbar a.btn,.filterbar .btn.full{grid-column:1/-1}
  .filters label.check{grid-column:1/-1;align-items:center;padding:.3rem 0}
  .filters input[type=checkbox]{width:20px!important;min-height:0}
  .filters .field{flex-direction:column!important;align-items:stretch!important}
  .filters .btn{width:100%}
  /* primary form buttons full width */
  form.card>.btn:not(.xs):not(.sm),form.stack>.btn:not(.xs):not(.sm):not(.ghost),.formgrid>.span2>.btn,.formactions .btn{width:100%}
  .formactions{flex-direction:column}
  /* notifications: meta under text */
  .notif{flex-wrap:wrap}
  .notif .nbody{flex:1 1 calc(100% - 56px)}
  .notif>.stack{flex-direction:row!important;align-items:center!important;justify-content:space-between;width:100%;padding-left:52px}
  /* digital card details stacked */
  .idinfo dl{grid-template-columns:1fr;gap:0}
  .idinfo dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.35rem}
  .idinfo dd{font-size:.95rem}
  .idinfo h2{font-size:1.15rem}
  /* prayer month table */
  #monthtable th:nth-child(3),#monthtable td:nth-child(3){display:none}
  #monthtable td,#monthtable th{padding:.4rem .3rem;font-size:.82rem}
  /* admin */
  .adminbody>p.muted:first-child{font-size:.85rem}
  details.rolesref>summary{cursor:pointer}
}
@media(max-width:380px){
  .quick a{font-size:.68rem}
  .ptimes{gap:.25rem}.ptimes small{font-size:.58rem}.ptimes b{font-size:.84rem}
  .appbar-title{font-size:1rem}
  .hubstats small{font-size:.64rem}
}
.field>span,.field label{overflow-wrap:anywhere}