/* GovHub Batangas mobile app (m/). Mobile-first, full screen, max 480px centred on larger screens.
   Layout follows the Balagtas citizen portal; colours follow the Province of Batangas brand. */
:root{--navy:#0b2a63;--navy2:#0a1a3d;--blue:#1446a0;--sky:#e8efff;--red:#d92d3a;--redl:#fdecee;--gold:#f4c430;--goldd:#a16207;--goldl:#fff7db;
--ok:#0f9d58;--okl:#e7f7ef;--bg:#f4f6fb;--card:#fff;--ink:#0f172a;--ink2:#1e293b;--mut:#64748b;--line:#e6eaf2;
--sh:0 10px 24px -12px rgba(15,23,42,.18);--sh2:0 18px 40px -18px rgba(11,42,99,.35);
--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
--hero:radial-gradient(circle at 92% 100%,rgba(217,45,58,.38),transparent 46%),radial-gradient(circle at 0% 0%,rgba(244,196,48,.18),transparent 42%),linear-gradient(160deg,#123a86 0%,#0b2a63 45%,#0a1a3d 100%)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:#e3e8f1;font-size:15px}
body.m{margin:0;font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);line-height:1.5;background:#e3e8f1;min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
.i{width:22px;height:22px;flex:none}.i.sm{width:16px;height:16px}.i.lg{width:28px;height:28px}
.hd{font-family:Outfit,Inter,system-ui,sans-serif;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mut{color:var(--mut)}

/* App column */
.app{position:relative;width:100%;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--bg);overflow-x:clip;padding-bottom:calc(104px + var(--sab))}
body.noNav .app{padding-bottom:calc(28px + var(--sab))}
@media (min-width:520px){.app{box-shadow:0 0 0 1px rgba(15,23,42,.05),0 30px 80px -40px rgba(15,23,42,.35)}}

/* Brand mark */
.mlogo{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 6px 16px -6px rgba(0,0,0,.45)}
.mlogo img,.mlogo svg{width:100%;height:100%;display:block;border-radius:50%}

/* ---------- Landing hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;background:var(--hero);border-radius:0 0 40px 40px;padding:calc(var(--sat) + 2.2rem) 1.5rem 2.6rem}
.hero:before{content:"";position:absolute;width:300px;height:300px;right:-120px;top:-120px;border-radius:50%;border:44px solid rgba(255,255,255,.04)}
.hero__in{position:relative;z-index:1}
.hero .mlogo{margin:0 auto 1.2rem}
.hero__tag{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(244,196,48,.12);border:1px solid rgba(244,196,48,.28);padding:5px 12px;border-radius:99px;margin-bottom:.9rem}
.hero h1{font-family:Outfit,Inter,sans-serif;font-size:1.85rem;font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-bottom:.55rem}
.hero p{font-size:.95rem;opacity:.86;max-width:32ch;margin:0 auto 1.8rem}
.hero__btns{display:flex;flex-direction:column;gap:12px;max-width:320px;margin:0 auto}
.btn-w{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--navy);padding:1rem;border-radius:16px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.22);border:0;cursor:pointer}
.btn-o{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.32);color:#fff;padding:1rem;border-radius:16px;font-weight:600;background:rgba(255,255,255,.04)}
.hero .hero__demo{margin-top:1.1rem;font-size:.76rem;opacity:.75;max-width:none}.hero__demo b{white-space:nowrap;color:var(--gold);font-weight:700}

/* ---------- Sections ---------- */
.sec{padding:1.5rem 1rem 0}
.sec__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.9rem}
.sec__h h2,.sec__h h3{font-family:Outfit,Inter,sans-serif;font-weight:800;font-size:1.06rem;letter-spacing:-.02em;color:var(--ink)}
.sec__h a,.lnk{font-size:.82rem;font-weight:700;color:var(--blue)}
.shorts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:1.1rem 1rem 0}
.shorts a{text-align:center;min-width:0}
.shorts .t{width:100%;aspect-ratio:1/1;border-radius:14px;display:grid;place-items:center;background:#fff;border:1px solid #edf0f6;color:var(--blue);margin-bottom:6px;box-shadow:0 4px 10px -8px rgba(15,23,42,.25)}
.shorts span{display:block;font-size:.72rem;font-weight:650;color:#475569;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner{margin:1.4rem 1rem 0;border-radius:18px;padding:1.3rem 1.4rem;color:#fff;background:linear-gradient(135deg,#1e293b,#0f172a);position:relative;overflow:hidden;display:flex;align-items:center;gap:14px}
.banner b{display:block;font-size:1.02rem}.banner small{opacity:.78;font-size:.8rem}
.banner .i{position:absolute;right:-8px;top:-8px;width:84px;height:84px;opacity:.12}

/* Horizontal news */
.hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 1rem 1rem;margin:0 -1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{display:none}
.ncard{flex:0 0 240px;scroll-snap-align:start;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 15px -3px rgba(0,0,0,.05);border:1px solid #eef1f6;display:block}
.ncard img{width:100%;height:120px;object-fit:cover;background:#dbe3f1}
.ncard__b{padding:10px 12px 12px}.ncard__b h4{font-size:.9rem;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ncard__b small{display:block;margin-top:4px;font-size:.72rem;color:var(--mut);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:6px;background:var(--sky);color:var(--blue)}

/* Hotlines */
.hot{display:flex;align-items:center;gap:12px;background:#fef2f2;padding:1.1rem 1.15rem;border-radius:18px;border:1px solid #fee2e2;margin-bottom:10px}
.hot__ic{width:44px;height:44px;border-radius:50%;background:#ef4444;color:#fff;display:grid;place-items:center;flex:none}
.hot__ic .i{width:20px;height:20px}
.hot strong{display:block;color:#b91c1c;font-size:.95rem}.hot div>span{display:block;font-size:.82rem;color:#ef4444}
.hot__num{margin-left:auto;font-weight:800;color:#991b1b;font-size:.95rem;white-space:nowrap}
.hot.sm{background:#fff;border-color:#f1f5f9;padding:.85rem 1rem}.hot.sm .hot__ic{background:var(--redl);color:var(--red);width:40px;height:40px}.hot.sm strong{color:var(--ink);font-size:.88rem}.hot.sm div>span{color:var(--mut)}
.foot{padding:1.6rem 1.25rem .5rem;text-align:center;font-size:.72rem;color:#7b8798;line-height:1.5}.foot b{color:#475569}.foot a{color:var(--blue);font-weight:600}

/* ---------- Dashboard ---------- */
.dhead{position:relative;overflow:hidden;color:#fff;background:var(--hero);border-radius:0 0 36px 36px;padding:calc(var(--sat) + 1rem) 1.25rem 4.6rem}
.dhead:after{content:"";position:absolute;width:260px;height:260px;right:-110px;bottom:-140px;border-radius:50%;border:40px solid rgba(255,255,255,.04)}
.dhead__top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:1.3rem}
.brand{display:flex;align-items:center;gap:.8rem;min-width:0}
.brand b{display:block;font-family:Outfit,Inter,sans-serif;font-weight:800;font-size:1rem;line-height:1.1;letter-spacing:-.01em}
.brand b span{color:var(--gold)}
.brand small{display:block;font-size:.6rem;color:rgba(255,255,255,.82);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.bell{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.bell .i{width:21px;height:21px}
.bell__n{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;border:2px solid #0b2a63}
.hello{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hello__t{min-width:0}
.hello p{font-size:.98rem;font-weight:500;color:rgba(255,255,255,.9)}
.hello h1{font-family:Outfit,Inter,sans-serif;font-size:1.7rem;font-weight:900;line-height:1.1;letter-spacing:-.02em;text-shadow:0 4px 12px rgba(0,0,0,.35);overflow-wrap:anywhere}
.walw{position:relative;z-index:5;margin:-3.5rem 1.25rem 0}
.wal{position:relative;overflow:hidden;color:#fff;border-radius:22px;padding:1.4rem;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 32px -10px rgba(15,23,42,.45)}
.wal:before{content:"";position:absolute;right:-24px;top:-24px;width:110px;height:110px;border-radius:50%;background:rgba(244,196,48,.1)}
.wal__top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:1.4rem}
.wal__lbl{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#cbd5e1;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:.3rem}
.badge-act{background:rgba(15,157,88,.22);color:#4ade80;font-size:.62rem;padding:2px 7px;border-radius:5px;letter-spacing:.06em}
.wal__bal{font-family:Outfit,Inter,sans-serif;font-size:2.1rem;font-weight:800;line-height:1.1;display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.wal__bal span{font-size:1.35rem;color:var(--gold)}
.wal__hist{margin-top:.55rem;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);padding:4px 11px;border-radius:12px;font-size:.64rem;font-weight:700;color:#cbd5e1;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.wal__hist .i{width:14px;height:14px}
.wal__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(244,196,48,.15);color:var(--gold);flex:none}
.wal__acts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.wal__acts a,.wal__acts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.7rem .3rem;border-radius:13px;font-weight:700;font-size:.8rem;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer}
.wal__acts .i{width:20px;height:20px}
.wal__acts .pri{background:linear-gradient(135deg,#f4c430,#e0a800);color:#2b1f00;border:0;box-shadow:0 6px 14px -4px rgba(244,196,48,.45)}
.sheet{position:relative;z-index:4;background:#fff;border-radius:2rem 2rem 0 0;margin-top:1.6rem;padding:2rem 1.25rem 1rem;box-shadow:0 -10px 40px rgba(0,0,0,.06);min-height:40vh}
.sheet>.sec{padding-left:0;padding-right:0}
.sheet__h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:1.2rem}
.sheet__h h2{font-family:Outfit,Inter,sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:-.03em;color:#1a202c;line-height:1.2}
.sheet__h a{font-size:.85rem;font-weight:700;color:var(--blue);white-space:nowrap}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem .4rem}
.sgrid a{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;min-width:0}
.sgrid .t{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;transition:transform .15s}
.sgrid a:active .t{transform:scale(.94)}
.sgrid .t .i{width:24px;height:24px}
.sgrid a>span:last-child{font-size:12px;font-weight:600;color:#4a5568;line-height:1.25}
.t-blue{background:#eef3ff;color:#1446a0;box-shadow:0 4px 12px rgba(20,70,160,.1)}
.t-gold{background:#fff7e0;color:#a16207;box-shadow:0 4px 12px rgba(161,98,7,.1)}
.t-red{background:#fff1f2;color:#be123c;box-shadow:0 4px 12px rgba(190,18,60,.1)}
.t-green{background:#ecfdf3;color:#0f8a4f;box-shadow:0 4px 12px rgba(15,138,79,.1)}
.t-violet{background:#f3f0ff;color:#5b3fd1;box-shadow:0 4px 12px rgba(91,63,209,.1)}
.t-orange{background:#fff4ec;color:#c2410c;box-shadow:0 4px 12px rgba(194,65,12,.1)}
.t-cyan{background:#ecfeff;color:#0e7490;box-shadow:0 4px 12px rgba(14,116,144,.1)}
.t-pink{background:#fdf2f8;color:#9d174d;box-shadow:0 4px 12px rgba(157,23,77,.1)}
.t-navy{background:#e8eef9;color:#0b2a63;box-shadow:0 4px 12px rgba(11,42,99,.1)}

/* ---------- Inner page header ---------- */
.phead{position:relative;overflow:hidden;color:#fff;background:var(--hero);border-radius:0 0 30px 30px;padding:calc(var(--sat) + .9rem) 1.25rem 3.6rem}
.phead.flat{padding-bottom:1.4rem}
.phead:after{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-110px;border-radius:50%;border:36px solid rgba(255,255,255,.05)}
.phead__bar{position:relative;z-index:1;display:flex;align-items:center;gap:.85rem;min-height:44px}
.phead__bk{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16)}
.phead__t{flex:1;min-width:0}
.phead__t h1{font-family:Outfit,Inter,sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phead__t p{font-size:.78rem;opacity:.78;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phead__x{position:relative;z-index:1;margin-top:1rem}
.body{position:relative;z-index:3;margin-top:-2.4rem;padding:0 1rem}
.phead.flat+.body{margin-top:1rem}

/* ---------- Cards & lists ---------- */
.card{background:#fff;border-radius:20px;padding:1.15rem;box-shadow:0 10px 24px -14px rgba(15,23,42,.18);border:1px solid #eef1f6;margin-bottom:12px}
.card h2,.card h3{font-family:Outfit,Inter,sans-serif;letter-spacing:-.02em}
.card h2{font-size:1.1rem;margin-bottom:.35rem}.card h3{font-size:1rem;margin-bottom:.5rem}
.card>p{font-size:.88rem;color:var(--mut)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:.8rem 0;border-bottom:1px solid #f1f4f9;min-width:0}
.li:last-child{border-bottom:0}
.li>div{flex:1;min-width:0}.li b{display:block;font-size:.9rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li small{display:block;font-size:.76rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .wrap{white-space:normal}
.tile{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--sky);color:var(--blue)}
.tile .i{width:20px;height:20px}
.tile.ok{background:var(--okl);color:var(--ok)}.tile.red{background:var(--redl);color:var(--red)}.tile.gold{background:var(--goldl);color:var(--goldd)}
.chev{color:#a0aec0;flex:none}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:99px;background:#eef2f7;color:#475569;white-space:nowrap;flex:none}
.tag.ok{background:var(--okl);color:#0b7a45}.tag.gold{background:var(--goldl);color:var(--goldd)}.tag.red{background:var(--redl);color:#b4232f}.tag.blue{background:var(--sky);color:var(--blue)}
.tag .i{width:12px;height:12px}
.empty{text-align:center;padding:1.6rem .5rem;color:var(--mut);font-size:.9rem}
.empty .tile{margin:0 auto 10px;width:52px;height:52px;border-radius:16px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.kv div{background:#f6f8fc;border-radius:12px;padding:8px 10px;min-width:0}.kv small{display:block;font-size:.66rem;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kv b{display:block;font-size:.84rem;line-height:1.3;overflow-wrap:anywhere}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0;font-size:.86rem}.dl dt{color:var(--mut)}.dl dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.sum{background:#f6f8fc;border-radius:14px;padding:12px 14px;font-size:.86rem}
.sum>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0}.sum>div span{color:var(--mut)}
.sum .tot{border-top:1px dashed #cdd6e4;margin-top:6px;padding-top:9px;font-weight:800;font-size:.98rem}.sum .tot span{color:var(--ink)}
.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:14px;font-size:.82rem;margin:10px 0;background:var(--sky);color:#1e3a8a}
.alert .i{width:18px;height:18px;margin-top:1px}
.alert.warn{background:var(--goldl);color:#713f12}.alert.ok{background:var(--okl);color:#065f3a}.alert.err{background:var(--redl);color:#9f1239}
.sbx{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fff;border:1px solid currentColor;border-radius:6px;padding:0 5px;margin-right:4px}

/* ---------- Forms & buttons ---------- */
label{display:block;font-size:.8rem;font-weight:700;color:var(--ink2);margin:14px 0 6px}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;border:1.5px solid #e2e8f0;border-radius:14px;padding:.85rem 1rem;font-size:16px;background:#f8fafc;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,70,160,.12);background:#fff}
input[readonly]{color:var(--mut)}
input[aria-invalid=true]{border-color:var(--red)}
textarea{resize:vertical;min-height:96px}
.ifield{position:relative}.ifield .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mut);pointer-events:none}
.ifield input{padding-left:2.8rem!important}
.hint{font-size:.74rem;color:var(--mut);margin-top:5px}
.err{color:#c81e2c;font-size:.82rem;font-weight:600;min-height:0;margin:8px 0 0}.err:empty{display:none}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:.84rem;color:#334155}.chk input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:.9rem 1.2rem;font-weight:700;font-size:.92rem;cursor:pointer;transition:transform .12s,opacity .15s;text-align:center;line-height:1.2}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.6;cursor:default}
.btn .i{width:18px;height:18px}
.btn-p{background:linear-gradient(135deg,#1446a0,#0b2a63);color:#fff;box-shadow:0 8px 20px -8px rgba(11,42,99,.55)}
.btn-g{background:linear-gradient(135deg,#f4c430,#e0a800);color:#2b1f00;box-shadow:0 8px 18px -8px rgba(224,168,0,.6)}
.btn-l{background:#fff;color:var(--navy);border:1.5px solid #dfe5ef}
.btn-r{background:var(--red);color:#fff}
.btn-gh{background:transparent;color:var(--blue);padding:.6rem .4rem}
.btn-pill{border-radius:50px}
.btn-b{width:100%}.btn-sm{padding:.6rem .9rem;font-size:.82rem;border-radius:12px}
.btns{display:grid;gap:10px;margin-top:14px}.btns.two{grid-template-columns:1fr 1fr}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.lcard{position:relative;z-index:3;margin:-3rem 1.25rem 0;background:#fff;border-radius:24px;padding:1.6rem 1.3rem;box-shadow:0 10px 40px rgba(15,23,42,.1)}
.ahead{position:relative;overflow:hidden;text-align:center;color:#fff;background:var(--hero);border-radius:0 0 30px 30px;padding:calc(var(--sat) + 3.2rem) 1.5rem 4.6rem}
.ahead__bk{position:absolute;left:1.1rem;top:calc(var(--sat) + 1rem);display:flex;align-items:center;gap:4px;font-size:.85rem;font-weight:600;opacity:.92}
.ahead__bk .i{width:18px;height:18px}
.ahead .mlogo{margin:0 auto 1rem}
.ahead h1{font-family:Outfit,Inter,sans-serif;font-size:1.5rem;font-weight:800;margin-bottom:.35rem}
.ahead p{font-size:.86rem;opacity:.86}
.or{display:flex;align-items:center;gap:10px;margin:18px 0 6px;font-size:.7rem;font-weight:800;letter-spacing:.1em;color:#94a3b8}.or:before,.or:after{content:"";flex:1;height:1px;background:#e5e9f0}
.steps{display:flex;gap:6px;justify-content:center;margin-top:1rem}.steps i{width:28px;height:5px;border-radius:9px;background:rgba(255,255,255,.25)}.steps i.on{background:var(--gold)}
.pwm{height:5px;border-radius:9px;background:#e8edf4;margin-top:8px;overflow:hidden}.pwm i{display:block;height:100%;width:0;transition:width .2s,background .2s}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:16px 0 4px}
.otp input{text-align:center;font-size:1.35rem!important;font-weight:800;padding:.75rem 0!important}
.otpcode{font-family:ui-monospace,Menlo,monospace;letter-spacing:.18em;font-size:1rem}
.face{width:170px;height:170px;margin:18px auto 14px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:radial-gradient(circle,#fff 55%,var(--sky) 56%);border:3px dashed #a9bde6;animation:sp 6s linear infinite}
.face .i{width:70px;height:70px;animation:sp 6s linear infinite reverse}
.face.done{animation:none;border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--okl)}.face.done .i{animation:none}
.linkbtn{background:none;border:0;color:var(--blue);font-weight:700;cursor:pointer;padding:0}

/* search + chips */
.search{position:relative}.search .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mut)}
.search input{padding-left:2.8rem!important;background:#fff!important;border-color:#fff!important;box-shadow:0 10px 24px -12px rgba(15,23,42,.3)}
.cats{display:flex;gap:8px;overflow-x:auto;padding:12px 1rem 4px;margin:0 -1rem;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid #e3e8f1;background:#fff;border-radius:99px;padding:8px 13px;font-size:.8rem;font-weight:650;color:#475569;cursor:pointer}
.cats button .i{width:16px;height:16px}
.cats button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.svc{display:flex;gap:12px;align-items:flex-start}
.svc>div{flex:1;min-width:0}.svc .ag{font-size:.68rem;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.05em}
.svc h3{font-size:.95rem;margin:1px 0 2px;font-family:Inter,sans-serif;font-weight:700;letter-spacing:-.01em}
.svc p{font-size:.8rem;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svc .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.req{list-style:none;padding:0;margin:6px 0 0}.req li{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;padding:5px 0}.req li .i{width:18px;height:18px;color:var(--ok);margin-top:1px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:0;background:#fff;border-radius:99px;padding:8px 13px;font-size:.78rem;font-weight:700;color:#475569;box-shadow:0 4px 12px -8px rgba(15,23,42,.3);cursor:pointer}
.tabs button.on{background:var(--gold);color:#2b1f00}

/* wizard */
.stepper{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.stepper li{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.22)}.stepper li.done{background:rgba(244,196,48,.6)}.stepper li.on{background:var(--gold)}
.steplbl{display:flex;justify-content:space-between;font-size:.72rem;margin-top:7px;opacity:.85;font-weight:600}
.upl{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px dashed #cdd6e4;border-radius:16px;margin-top:10px;background:#fafbfe;position:relative}
.upl.has{border-style:solid;border-color:#bfe6d1;background:#f6fcf9}.upl.drag{border-color:var(--blue);background:var(--sky)}
.upl>div{flex:1;min-width:0}.upl b{display:block;font-size:.86rem}.upl small{display:block;font-size:.74rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.upl .acts{display:flex;gap:6px;flex:none}
.ib{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1px solid #e3e8f1;background:#fff;color:var(--navy);cursor:pointer;flex:none}.ib .i{width:18px;height:18px}
.prog{height:5px;border-radius:9px;background:#e3e8f1;margin-top:6px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--blue);transition:width .2s}
.pm{display:grid;gap:8px;margin-top:10px}
.pm label{display:flex;align-items:center;gap:12px;margin:0;padding:12px;border:1.5px solid #e3e8f1;border-radius:16px;cursor:pointer;font-weight:600;font-size:.88rem;background:#fff}
.pm label:has(input:checked){border-color:var(--blue);background:#f5f8ff}
.pm input{accent-color:var(--blue);width:18px;height:18px;flex:none}
.pm small{display:block;font-weight:500;color:var(--mut);font-size:.74rem}
.pml{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:900;color:#fff;flex:none}
.pml .i{width:20px;height:20px}.pml.wallet{background:var(--navy);color:var(--gold)}.pml.gcash{background:#0a6cff}.pml.maya{background:#0f9d58}.pml.card{background:#334155}
.done-hero{text-align:center}.done-hero .tile{width:60px;height:60px;border-radius:50%;margin:0 auto 10px}.done-hero .tile .i{width:30px;height:30px}
.qrbox{width:160px;margin:14px auto 8px;padding:8px;background:#fff;border-radius:14px;border:1px solid #e3e8f1}
.refbig{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:1.1rem;letter-spacing:.06em;color:var(--navy)}

/* timeline */
.tl{list-style:none;margin:6px 0 4px;padding:0}
.tl li{position:relative;padding:0 0 18px 30px}
.tl li:before{content:"";position:absolute;left:8px;top:18px;bottom:0;width:2px;background:#e3e8f1}
.tl li:last-child:before{display:none}
.tl li i{position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #cbd5e1}
.tl li.done i{background:var(--ok);border-color:var(--ok);box-shadow:inset 0 0 0 3px #fff}
.tl li.done:before{background:var(--ok)}
.tl li.cur i{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(244,196,48,.25)}
.tl li.rej i{background:var(--red);border-color:var(--red)}
.tl b{display:block;font-size:.9rem}.tl small{display:block;font-size:.76rem;color:var(--mut)}

/* calendar + slots */
.calh{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal small{font-size:.68rem;font-weight:700;color:var(--mut);padding:4px 0}
.cal button{aspect-ratio:1/1;border:0;border-radius:11px;background:#f1f5fb;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--ink);min-width:0;padding:0}
.cal button:disabled{background:transparent;color:#c3cad6;cursor:default}
.cal button.on{background:var(--navy);color:#fff}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slots button{border:1.5px solid #e3e8f1;background:#fff;border-radius:12px;padding:8px 4px;font-weight:700;font-size:.8rem;cursor:pointer;min-width:0}
.slots button:disabled{opacity:.45;cursor:default}.slots button.on{border-color:var(--navy);background:var(--navy);color:#fff}

/* digital ID */
/* 2D flip only: no perspective, preserve-3d or backface tricks, which rasterise the card and make text blurry */
.idw{position:relative}
.idc{position:relative;height:236px;cursor:pointer;outline:none;border-radius:20px}
.idc:focus-visible{box-shadow:0 0 0 3px rgba(20,70,160,.35)}
.idf{position:absolute;inset:0;border-radius:20px;overflow:hidden;box-shadow:0 18px 36px -18px rgba(11,42,99,.5);transition:opacity .28s ease,visibility .28s}
.idc.flip .idf--front,.idc:not(.flip) .idf--back{opacity:0;visibility:hidden}
.idc.flipping{animation:idflip .5s ease}
@keyframes idflip{0%{transform:scaleX(1)}50%{transform:scaleX(.04)}100%{transform:none}}
.idf__h .seal{width:40px;height:40px;flex:none;border-radius:50%;background:#fff;box-shadow:0 2px 8px -2px rgba(11,42,99,.35)}
.idf--front{background:linear-gradient(135deg,#ffffff 0%,#eef3ff 60%,#fdeef0 100%);padding:16px 16px 14px;color:var(--ink)}
.idf--front:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--blue) 0 40%,var(--red) 40% 70%,var(--gold) 70%)}
.idf__h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.idf__h small{display:block;font-size:.58rem;letter-spacing:.08em;color:var(--mut);font-weight:700}
.idf__h b{display:block;font-size:.95rem;color:var(--navy);letter-spacing:.03em;font-weight:900}
.idf__b{display:flex;gap:12px;margin-top:10px}
.idph{width:78px;height:96px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;font-weight:800;color:#fff;background:linear-gradient(160deg,#9db4e6,#5b7fcc);flex:none}
.idk{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;min-width:0;flex:1}
.idk div{min-width:0}.idk .w{grid-column:1/-1}
.idk small{display:block;font-size:.56rem;letter-spacing:.06em;color:var(--mut);text-transform:uppercase;font-weight:700}
.idk b{display:block;font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idpin{position:absolute;left:16px;bottom:14px;font-family:ui-monospace,Menlo,monospace;font-weight:800;letter-spacing:.08em;color:var(--navy);font-size:.88rem}
.idhint{position:absolute;right:14px;bottom:13px;display:flex;align-items:center;gap:4px;font-size:.66rem;color:var(--mut);font-weight:600}.idhint .i{width:13px;height:13px}
.idf--back{background:linear-gradient(150deg,#0b2a63,#0a1a3d);color:#fff;display:flex;align-items:center;gap:14px;padding:18px}
.idf--back .qrw{width:140px;flex:none;background:#fff;border-radius:12px;padding:6px}
.idf--back b{font-size:1rem}.idf--back p{font-size:.74rem;opacity:.82;margin-top:6px}
.vb{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(15,157,88,.18);color:#4ade80}.vb .i{width:14px;height:14px}

/* chat, receipts, misc */
.chat{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.msg{max-width:85%;padding:10px 12px;border-radius:16px 16px 16px 4px;background:#f1f5fb;font-size:.88rem;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--navy);color:#fff;border-radius:16px 16px 4px 16px}
.msg small{display:block;font-size:.68rem;opacity:.7;margin-top:4px}
.stars{display:flex;gap:6px}.stars button{width:40px;height:40px;border-radius:12px;border:1px solid #e3e8f1;background:#fff;display:grid;place-items:center;cursor:pointer;color:#94a3b8}.stars button.on{background:var(--goldl);color:var(--goldd);border-color:#f6dd8b}
details{border-bottom:1px solid #eef1f6;padding:11px 0}details:last-child{border-bottom:0}summary{cursor:pointer;font-weight:650;font-size:.88rem}details p{font-size:.84rem;color:var(--mut);margin-top:6px}
.sw{position:relative;width:46px;height:28px;flex:none}.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:99px;background:#cbd5e1;transition:.2s}.sw span:after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked+span{background:var(--ok)}.sw input:checked+span:after{left:21px}
.prof{display:flex;align-items:center;gap:14px}
.av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:var(--navy);background:linear-gradient(135deg,#fff7db,#f4c430);flex:none;border:3px solid #fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.3)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.stat3 div{background:#f6f8fc;border-radius:14px;padding:10px;text-align:center}.stat3 b{display:block;font-size:1.15rem;font-family:Outfit,Inter,sans-serif}.stat3 small{font-size:.7rem;color:var(--mut);font-weight:600}
.grp{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:18px 4px 8px}
.amt{font-weight:800;font-size:.9rem;white-space:nowrap}.amt.in{color:var(--ok)}.amt.out{color:var(--ink)}
.scan{position:relative;aspect-ratio:1/1;max-width:340px;margin:0 auto;border-radius:24px;overflow:hidden;background:#0f172a}
.scan__f{position:absolute;inset:18%;border:3px solid rgba(255,255,255,.85);border-radius:20px;box-shadow:0 0 0 999px rgba(15,23,42,.45)}
.scan__l{position:absolute;left:8%;right:8%;height:2px;background:var(--gold);top:10%;animation:scl 2.2s ease-in-out infinite alternate}
@keyframes scl{to{top:88%}}
.co__h{border-radius:20px;padding:20px;color:#fff;text-align:center;margin-bottom:12px}.co__h.gcash{background:linear-gradient(135deg,#0a6cff,#0047c2)}.co__h.maya{background:linear-gradient(135deg,#0f9d58,#065f3a)}.co__h.card{background:#334155}
.co__h b{display:block;font-size:2rem;font-family:Outfit,Inter,sans-serif;margin:4px 0}
.skel{height:64px;border-radius:16px;background:linear-gradient(90deg,#edf1f7 25%,#f7f9fc 50%,#edf1f7 75%);background-size:200% 100%;animation:sk 1.2s infinite;margin-bottom:10px}
@keyframes sk{to{background-position:-200% 0}}
.fade{animation:fd .25s ease}@keyframes fd{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.next{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff7db,#fff);border:1px solid #f6e3a6;border-radius:18px;padding:12px 14px;margin-top:12px}
.next>div{flex:1;min-width:0}.next b{display:block;font-size:.88rem}.next small{display:block;font-size:.76rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* bottom nav: floating rounded dock */
.bnav{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:max(14px,calc(var(--sab) + 8px));width:calc(100% - 24px);max-width:456px;height:68px;border-radius:34px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;justify-content:space-evenly;align-items:center;box-shadow:0 8px 32px rgba(15,23,42,.16);border:1px solid rgba(15,23,42,.04)}
.bnav a{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#64748b;font-size:.64rem;font-weight:700;transition:color .2s}
.bnav a .i{width:22px;height:22px;transition:transform .2s}
.bnav a.on{color:var(--navy)}.bnav a.on .i{transform:translateY(-2px);stroke-width:2.4}
.bnav a.on span{position:relative}.bnav a.on span:after{content:"";position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--red)}

/* toast + bottom sheet modal */
.toast{position:fixed;z-index:100;left:50%;bottom:calc(96px + var(--sab));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#0f172a;color:#fff;padding:11px 16px;border-radius:14px;font-size:.86rem;font-weight:600;max-width:min(420px,calc(100% - 32px));transition:.25s;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}.toast.ok{background:#065f3a}.toast.err{background:#9f1239}
.modal{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fd .2s}
.modal>div{width:100%;max-width:480px;max-height:88vh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:1.3rem 1.25rem calc(1.4rem + var(--sab));animation:up .25s cubic-bezier(.2,.7,.2,1)}
@keyframes up{from{transform:translateY(40px)}to{transform:none}}
.mh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.mh h2{font-family:Outfit,Inter,sans-serif;font-size:1.2rem}
.rcpt{background:#f6f8fc;border-radius:16px;padding:12px 14px;margin-top:10px;font-size:.86rem}.rcpt>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed #dde3ee}.rcpt>div:last-child{border:0}.rcpt span{color:var(--mut)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.bnav,.phead,.toast,.noprint{display:none!important}.modal{position:static;background:none}.modal>div{max-height:none}}
@media (max-width:360px){.hero h1,.hello h1{font-size:1.6rem}.sgrid .t{width:48px;height:48px}.wal__bal{font-size:1.8rem}.kv{grid-template-columns:1fr 1fr}}

/* ===== GovHub Batangas additions ===== */
.lnkb{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font-size:.82rem;font-weight:700;color:var(--blue);cursor:pointer}
/* weather + context */
.wx{flex:none;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;text-align:left;min-width:0}
.wx__ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#ffd866}.wx__ic .i{width:24px;height:24px}
.wx__t b{display:block;font-family:Outfit,Inter,sans-serif;font-size:1.35rem;font-weight:800;line-height:1}.wx__t small{display:block;font-size:.68rem;opacity:.85;margin-top:2px;max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx--load .wx__ic{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.wx--rain,.wx--storm{color:#8fc5ff}.wx--cloud,.wx--fog{color:#dbe6f6}.wx--moon{color:#e6ecff}
.ctx{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:.9rem}
.ctx__i{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.1);font-size:.72rem;font-weight:600;color:rgba(255,255,255,.92);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx__i .i{width:13px;height:13px;flex:none;opacity:.9}.ctx__i.live .i{color:#4ade80}
.ctx__f .i{color:#ffd866}
.wxnow{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:var(--sky);margin-top:4px}.wxnow>span{color:var(--blue)}
.wxnow b{display:block;font-family:Outfit,Inter,sans-serif;font-size:1.7rem;line-height:1}.wxnow small{font-size:.76rem;color:var(--mut)}
.wxnow dl{margin:0 0 0 auto;display:grid;grid-template-columns:auto auto;gap:2px 8px;font-size:.72rem}.wxnow dt{color:var(--mut)}.wxnow dd{margin:0;font-weight:700}
.wxdays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.wxd{text-align:center;border:1px solid var(--line);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.wxd b{font-size:.76rem}.wxd small{font-size:.64rem;color:var(--mut);line-height:1.2;min-height:2.4em}.wxd em{font-style:normal;font-size:.74rem;font-weight:700}.wxd i{font-style:normal;font-size:.64rem;color:var(--blue);display:inline-flex;align-items:center;gap:2px}.wxd i .i{width:11px;height:11px}
.wxd .wx--sun,.wxd .wx--cloudsun{color:#e0a100}.wxd .wx--rain,.wxd .wx--storm{color:#1d6fd8}.wxd .wx--cloud,.wxd .wx--fog{color:#64748b}
/* carousel */
.car{position:relative;margin:1.5rem 0 0}
.car__t{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px;-webkit-overflow-scrolling:touch;box-shadow:0 14px 28px -16px rgba(11,42,99,.5)}
.car__t::-webkit-scrollbar{display:none}
.car__s{position:relative;flex:0 0 100%;scroll-snap-align:start;aspect-ratio:16/8;min-height:150px;overflow:hidden;background:#123a86;color:#fff}
.car__s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.car__o{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px 16px;background:linear-gradient(90deg,rgba(10,26,61,.88) 0%,rgba(10,26,61,.55) 55%,rgba(10,26,61,.05) 100%)}
.car__o b{font-family:Outfit,Inter,sans-serif;font-size:1.2rem;font-weight:800;line-height:1.15;max-width:72%;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.car__o small{font-size:.76rem;opacity:.92;max-width:70%;margin-top:3px;line-height:1.35}
.car__cta{align-self:flex-start;margin-top:10px;display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:800;padding:6px 12px;border-radius:99px;background:var(--gold);color:#3b2a00}
.car__cta .i{width:13px;height:13px}
.car__dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.car__dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:#cbd5e1;cursor:pointer;transition:width .25s,background .25s}
.car__dots button.on{width:22px;background:var(--blue)}
/* cards row (wallet cards) */
.wcards{gap:10px}
.wcard{flex:0 0 200px;scroll-snap-align:start;position:relative;height:122px;border-radius:16px;padding:12px 14px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(135deg,#334155,#0f172a);box-shadow:0 10px 20px -14px rgba(15,23,42,.6);border:0;text-align:left;font:inherit;cursor:pointer}
.wcard:after{content:"";position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.07)}
.wcard__h{display:flex;align-items:center;gap:7px;font-size:.62rem;font-weight:800;letter-spacing:.06em;position:relative;z-index:1}
.wcard__h img{border-radius:50%;background:#fff}
.wcard__h span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.wcard__n{font-size:.8rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.wcard__no{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;letter-spacing:.08em;opacity:.9;display:flex;justify-content:space-between;gap:8px;position:relative;z-index:1}
.wcard__no em{font-style:normal;opacity:.8}
.wcard--id{background:linear-gradient(135deg,#1446a0,#0b2a63 60%,#0a1a3d)}
.wcard--id:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--blue) 0 40%,var(--red) 40% 70%,var(--gold) 70%)}
.wcard--philhealth{background:linear-gradient(135deg,#16a34a,#065f46)}
.wcard--sss,.wcard--gsis{background:linear-gradient(135deg,#2563eb,#1e3a8a)}
.wcard--pagibig{background:linear-gradient(135deg,#0ea5e9,#075985)}
.wcard--drivers{background:linear-gradient(135deg,#475569,#1e293b)}
.wcard--passport{background:linear-gradient(135deg,#7f1d1d,#450a0a)}
.wcard--postal,.wcard--senior{background:linear-gradient(135deg,#9333ea,#4c1d95)}
.wcard--bank{background:linear-gradient(135deg,#b45309,#78350f)}
.wcard--add{background:#f8fafc;color:var(--ink);border:1.5px dashed #c7d2e3;box-shadow:none;align-items:flex-start;justify-content:center;gap:2px}
.wcard--add:after{display:none}
.wcard--add b{font-size:.88rem}.wcard--add small{font-size:.7rem;color:var(--mut);line-height:1.3}
.wcard__plus{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--sky);color:var(--blue);margin-bottom:4px}.wcard__plus .i{width:18px;height:18px}
.wcard__del{border:0;background:rgba(255,255,255,.16);color:#fff;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:none}
.wlist{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.wlist .wcard{flex:none;width:100%;height:132px}
/* section cards */
.xsec .hscroll{gap:10px}
.xcard{flex:0 0 212px;scroll-snap-align:start;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #eef1f6;box-shadow:0 8px 16px -12px rgba(15,23,42,.25);display:flex;flex-direction:column}
.xcard__img{position:relative;display:block;height:118px;background:#dbe3f1}
.xcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.xcard__b{padding:9px 11px 11px;display:flex;flex-direction:column;gap:4px;flex:1}
.xcard__b b{font-size:.84rem;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xcard__b small,.lcard2__m span{display:flex;align-items:center;gap:4px;font-size:.7rem;color:var(--mut);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xcard__b small .i,.lcard2__m .i{width:12px;height:12px;flex:none}
.xcard--road{flex-basis:236px}
.xtag{position:absolute;left:8px;top:8px;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.94);color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.xtag.red{background:#d92d3a;color:#fff}.xtag.gold{background:#f4c430;color:#3b2a00}.xtag.blue{background:#1446a0;color:#fff}.xtag.navy{background:#0b2a63;color:#fff}
.xsample{position:absolute;right:8px;top:8px;font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:7px;background:#fff7db;color:#8a5a00;border:1px solid #f6dd8b}
.xtag.static,.xsample.static{position:static;display:inline-block;box-shadow:none}
.xtag.static:not(.red):not(.gold):not(.blue):not(.navy){background:var(--sky)}
/* bottom promo banners */
.pbanner{position:relative;display:block;width:100%;margin-top:1.6rem;border-radius:20px;overflow:hidden;color:#fff;border:0;padding:0;text-align:left;font:inherit;cursor:pointer;min-height:150px;background:#0b2a63}
.pbanner--appt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pbanner__o{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px 18px;min-height:150px;justify-content:flex-end}
.pbanner--appt .pbanner__o{background:linear-gradient(90deg,rgba(11,42,99,.94) 0%,rgba(11,42,99,.75) 55%,rgba(11,42,99,.2) 100%)}
.pbanner__brand{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.95}
.pbanner b{font-family:Outfit,Inter,sans-serif;font-size:1.15rem;font-weight:800;line-height:1.2;max-width:78%}
.pbanner__btn{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:8px 14px;border-radius:99px;background:#fff;color:var(--navy);font-size:.8rem;font-weight:800}
.pbanner--rate{background:linear-gradient(120deg,#fff7db 0%,#ffe8a3 60%,#fdd36b 100%);color:#3b2a00;margin-top:12px;min-height:118px}
.pbanner--rate .pbanner__o{min-height:118px;justify-content:center;gap:3px;padding-right:44%}
.pbanner--rate b{font-size:1.15rem;color:#3b2a00}.pbanner--rate small{font-size:.74rem;color:#6b5310;line-height:1.35}
.pbanner__lnk{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:.8rem;font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.pbanner__art{position:absolute;right:10px;top:0;bottom:0;width:40%}
.pbanner__art span{position:absolute;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 8px 16px -8px rgba(120,80,0,.5)}
.pbanner__art .s1{width:58px;height:58px;right:30%;top:22%;color:#e0a100}.pbanner__art .s1 .i{width:30px;height:30px;fill:currentColor}
.pbanner__art .s2{width:38px;height:38px;right:4%;top:14%;color:#d92d3a}.pbanner__art .s2 .i{width:20px;height:20px;fill:currentColor}
.pbanner__art .s3{width:42px;height:42px;right:8%;bottom:14%;color:#1446a0}.pbanner__art .s3 .i{width:21px;height:21px}
.pbanner__art .s4{width:26px;height:26px;right:62%;bottom:16%;color:#e0a100}.pbanner__art .s4 .i{width:14px;height:14px;fill:currentColor}
.stars--lg{justify-content:center;gap:8px;margin:10px 0 4px}.stars--lg button{width:48px;height:48px;border-radius:14px}.stars--lg button .i{width:26px;height:26px}.stars--lg button.on .i{fill:currentColor}
.rate__l{text-align:center;font-size:.82rem;font-weight:700;color:var(--mut);min-height:1.3em}
/* content list + detail */
.ktabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:1rem -1.25rem 0;padding:0 1.25rem}.ktabs::-webkit-scrollbar{display:none}
.ktabs a{flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-size:.76rem;font-weight:700;color:#fff}
.ktabs a.on{background:#fff;color:var(--navy)}
.lcard2{display:block;background:#fff;border-radius:18px;overflow:hidden;margin-bottom:12px;border:1px solid #eef1f6;box-shadow:var(--sh)}
.lcard2__img{position:relative;display:block;aspect-ratio:16/8;background:#dbe3f1}.lcard2__img img{width:100%;height:100%;object-fit:cover;display:block}
.lcard2__b{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px}
.lcard2__b b{font-size:.98rem;line-height:1.3}.lcard2__b>small{font-size:.8rem;color:#475569;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lcard2__m{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:2px}
.lcard2--row{display:flex;align-items:stretch}.lcard2--row .lcard2__img{flex:0 0 32%;aspect-ratio:auto;min-height:118px}.lcard2--row .lcard2__b{flex:1;min-width:0}
.lcard2--row .xtag.static{align-self:flex-start}
.dhero{position:relative;height:300px;background:#123a86;overflow:hidden}
.dhero img{width:100%;height:100%;object-fit:cover;display:block}
.dhero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,61,.55) 0%,rgba(10,26,61,0) 35%,rgba(10,26,61,0) 70%,rgba(10,26,61,.35) 100%)}
.dhero__bk{position:absolute;z-index:2;left:1rem;top:calc(var(--sat) + .9rem);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--navy);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.dhero__k{position:absolute;z-index:2;right:1rem;top:calc(var(--sat) + 1.15rem);display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;padding:5px 11px;border-radius:99px;background:rgba(10,26,61,.6);color:#fff;backdrop-filter:blur(6px)}
.dbody{position:relative;z-index:3;margin-top:-2rem;padding:0 1rem}
.dcard{padding:1.2rem 1.15rem 1.1rem;border-radius:22px}
.dcard__tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.dcard h1{font-family:Outfit,Inter,sans-serif;font-size:1.4rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.dmeta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:.78rem;color:var(--mut);font-weight:600}.dmeta span{display:inline-flex;align-items:center;gap:5px}
.dlead{margin-top:12px;font-size:.95rem;font-weight:600;color:var(--ink2);line-height:1.5}
.dp{margin-top:10px;font-size:.9rem;color:#334155;line-height:1.6}
.dacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dsrc{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.76rem}
.dsrc dt{color:var(--mut);font-weight:700}.dsrc dd{margin:0;color:#334155;overflow-wrap:anywhere}
.cthumb{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;background:#dbe3f1}
.li .wrap{white-space:normal;overflow-wrap:anywhere}
/* landing */
.hero--photo{background:#0a1a3d}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.hero--photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,61,.55) 0%,rgba(11,42,99,.72) 55%,rgba(10,26,61,.95) 100%)}
.hero--photo:before{z-index:1}
.hero--photo .hero__in{z-index:2}
.lockup{display:inline-block;background:#fff;border-radius:18px;padding:8px 14px;margin-bottom:1.1rem;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.lockup img{display:block;width:226px;height:auto}
@media (max-width:380px){.wx__t small{max-width:70px}.wcard{flex-basis:184px}.xcard{flex-basis:196px}.car__o b{font-size:1.08rem}}
.ctx__i[hidden]{display:none}
.sheet .hscroll{margin:0 -1.25rem;padding:2px 1.25rem 1rem;scroll-padding:0 1.25rem}
.pbanner__brand .mlogo{width:28px;height:28px}

/* ===================== v4 ===================== */
/* transparent logo / lockup (no white container) */
.mlogo{background:none;padding:0;box-shadow:none;border-radius:0}
.mlogo img{border-radius:0;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.lockup{background:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
.lockup img{filter:drop-shadow(0 3px 10px rgba(0,0,0,.4))}
/* bottom nav: active tab = blue filled circle, white icon, coloured label */
.bnav a .bnav__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:background .2s,box-shadow .2s,transform .2s}
.bnav a .bnav__l{line-height:1}
.bnav a.on span:after{content:none}
.bnav a.on .i{transform:none;stroke-width:2.2}
.bnav a.on .bnav__ic{background:var(--blue);color:#fff;box-shadow:0 6px 14px -4px rgba(20,70,160,.55);transform:translateY(-2px)}
.bnav a.on .bnav__l{color:var(--blue);font-weight:800}
.bnav a{gap:2px}
/* "Rate this app" row = same look as the Photo credits row */
button.li,.li--btn{width:100%;background:none;border:0;border-bottom:1px solid #f1f4f9;border-radius:0;margin:0;padding:.8rem 0;font:inherit;color:inherit;text-align:start;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;outline-offset:2px}
button.li:last-child,.li--btn:last-child{border-bottom:0}
button.li:active{background:none}
/* horizontal rows: side padding and snap aligned with section titles */
.hscroll{scroll-padding-inline:1rem;padding-left:1rem;padding-right:1rem}
.hscroll>*{scroll-snap-align:start}
.hscroll:after{content:"";flex:0 0 1px}
.sheet .hscroll{scroll-padding-inline:1.25rem}
/* merged weather chip (temperature + H/L/rain), opens the forecast */
.ctx__wx{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;gap:6px;padding:3px 10px 3px 4px}
.ctx__wx .wx__ic{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#ffd866}
.ctx__wx .wx__ic .i{width:16px;height:16px;opacity:1}
.ctx__wx b{font-family:Outfit,Inter,sans-serif;font-size:.9rem;font-weight:800}
.ctx__wx .wx__fc{display:inline-flex;align-items:center;gap:3px;opacity:.9;padding-left:6px;border-left:1px solid rgba(255,255,255,.25)}
.ctx__wx .wx__fc[hidden]{display:none}
.ctx__wx .wx__fc .i{width:11px;height:11px;color:#8fc5ff}
.ctx__wx .wx__chev{width:12px!important;height:12px!important;opacity:.7}
.ctx__wx.wx--load .wx__ic{animation:pulse 1.2s ease-in-out infinite}
.ctx__wx .wx__ic.wx--rain,.ctx__wx .wx__ic.wx--storm{color:#8fc5ff}.ctx__wx .wx__ic.wx--cloud,.ctx__wx .wx__ic.wx--fog{color:#dbe6f6}.ctx__wx .wx__ic.wx--moon{color:#e6ecff}
.ctx{gap:6px}
/* uploaded service icons */
.svcimg{width:24px;height:24px;object-fit:contain;display:block}
.shorts .t .svcimg,.tile .svcimg{width:26px;height:26px}
/* banner images set in the console */
.banner--img{background:linear-gradient(90deg,rgba(11,25,56,.9) 0%,rgba(11,25,56,.62) 55%,rgba(11,25,56,.22) 100%),var(--bimg) center/cover;min-height:84px}.banner--img b,.banner--img small{text-shadow:0 1px 3px rgba(0,0,0,.45)}.banner--img>.i{opacity:.0}
.pbanner--rate.pbanner--img{background:linear-gradient(90deg,rgba(255,247,219,.97) 0%,rgba(255,232,163,.85) 55%,rgba(253,211,107,.2) 100%),var(--bimg) center/cover}
.hotnote{display:flex;gap:6px;align-items:flex-start;margin:14px 2px 0;font-size:.76rem}.hotnote .i{flex:none;width:14px;height:14px;margin-top:1px}
.biobtn .i{width:20px;height:20px}
/* Report Now */
.seg2{display:flex;gap:4px;background:#eef2f9;border-radius:99px;padding:4px;margin-bottom:12px}
.seg2 a{flex:1;text-align:center;padding:8px 10px;border-radius:99px;font-size:.82rem;font-weight:700;color:#475569}
.seg2 a.on{background:#fff;color:var(--blue);box-shadow:0 2px 6px rgba(15,23,42,.08)}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rcat{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border:1px solid #e7ecf5;border-radius:16px;background:#fff;font:inherit;font-size:.72rem;font-weight:650;color:#334155;line-height:1.2;text-align:center;cursor:pointer;transition:border-color .15s,transform .1s}
.rcat:active{transform:scale(.97)}.rcat:hover{border-color:var(--blue)}
.rcat__ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff4ec;color:#c2410c;flex:none}
.rcat__ic .i{width:22px;height:22px}
.rsel{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:#f7f9fd;border:1px solid #edf0f6}
.rsel>div{flex:1;min-width:0}.rsel small{display:block;font-size:.7rem;color:var(--mut)}.rsel b{font-size:.95rem}
.rphoto-in{display:block;border:1.5px dashed #cdd6e6;border-radius:16px;padding:14px;text-align:center;cursor:pointer;background:#fbfcff;margin:0}
.rphoto-in span{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--blue)}
.rphoto-in b{font-size:.86rem}.rphoto-in small{color:var(--mut);font-size:.72rem;font-weight:500}
.rphoto-in img{width:100%;max-height:200px;object-fit:cover;border-radius:12px}
.rphoto{width:100%;max-height:240px;object-fit:cover;border-radius:14px;margin-top:12px;display:block;background:#eef2f9}
.rhead{display:flex;align-items:center;gap:12px}.rhead>div{flex:1;min-width:0}.rhead b{display:block}.rhead small{font-size:.74rem;color:var(--mut)}
.rdesc{white-space:pre-wrap;font-size:.9rem;margin:12px 0}
.kv2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#rgps.on{border-color:var(--ok);color:var(--ok)}
.tag.blue{background:var(--sky);color:var(--blue)}
.addr select[disabled]{opacity:.6}

/* ---------- v5: avatars, crop, ID sync, gateways ---------- */
.avimg{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.cropm{max-width:400px}.crop{position:relative;width:100%;max-width:320px;margin:10px auto 4px;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#eef2f8;touch-action:none}
.crop canvas{width:100%;height:100%;display:block;cursor:grab}.crop canvas:active{cursor:grabbing}
.cropring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(11,42,99,.35);pointer-events:none;border:2px solid #fff}
.idsm{max-width:560px}.isprog{display:grid;gap:12px;justify-items:center;text-align:center;padding:26px 6px}
.bar{width:100%;height:8px;border-radius:9px;background:#e7ecf5;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#1446a0,#d4a514);transition:width .3s}
.isres{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#eef3ff;margin-bottom:6px}.isres .i{flex:none;width:22px;height:22px;color:#1446a0}
.isres.ok{background:#e8f7ef}.isres.ok .i{color:#0f8a4b}.isres.warn{background:#fff6e0}.isres.warn .i{color:#a76b00}.isres small{display:block;color:#5b6b84;font-size:.78rem}
.chk{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;margin-top:12px}.chk input{width:18px!important;height:18px;margin:2px 0 0!important;flex:none;accent-color:#1446a0}
.tag.idv{display:inline-flex;align-items:center;gap:4px}.tag.idv .i{width:13px;height:13px}
.pmimg{background:#fff!important;border:1px solid #e3e8f1;overflow:hidden;padding:0}.pmimg img{width:100%;height:100%;object-fit:contain;display:block}
.pmbox{margin-top:12px;padding:14px;border:1px dashed #c9d5ea;border-radius:16px;background:#f8faff}
.payto{display:flex;gap:14px;align-items:center;margin-bottom:6px}.payto b{display:block;font-size:.98rem}.payto small{display:block}
.payno{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.05rem;letter-spacing:.02em}.payqr{width:110px;height:110px;border-radius:12px;background:#fff;border:1px solid #e3e8f1;object-fit:contain;flex:none}
.lnk{background:none;border:0;color:#1446a0;font-weight:700;cursor:pointer;padding:0;font-size:.8rem;text-decoration:underline}
.pmnote{font-size:.78rem;display:flex;gap:6px;align-items:flex-start;margin:.6rem 0 0}.pmnote .i{width:15px;height:15px;flex:none;margin-top:1px}
.av{overflow:hidden}.avbtn{position:relative;cursor:pointer;padding:0;overflow:visible}.avbtn .avimg{border-radius:50%}
.avcam{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;border:2px solid #fff}.avcam .i{width:13px;height:13px}
.idph{overflow:hidden}.idph .avimg{border-radius:inherit}
.avrow{display:flex;flex-wrap:wrap;gap:8px;padding:.7rem 1rem}
.amt.pend{color:var(--mut);opacity:.8}.walpend{display:inline-flex;gap:6px;align-items:center;margin-top:6px;padding:3px 10px;border-radius:99px;background:rgba(244,196,48,.16);color:#f4c430;font-size:.72rem;font-weight:700}.walpend .i{width:13px;height:13px}
.prof .tag.idv{margin-top:4px}
/* v5 welcome: compact pill, official agency logos in the grid */
.hero__tag{font-size:.6rem;letter-spacing:.08em;padding:3px 10px;gap:5px;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}.hero__tag .i{width:12px;height:12px;flex:none}
.shorts .t.t--img .svcimg{width:62%;height:62%;object-fit:contain}

/* v6: Fingerprint / Face ID unavailable on this device */
#biorow.is-off{opacity:.6}
.biobtn:disabled{opacity:.5}
/* ===== v7: verification badge, action pills, permission sheet, alerts, ID card ===== */
.kycline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.kyctag{display:inline-flex;align-items:center;gap:5px}.kyctag .i{width:14px;height:14px}
.kycnote{display:block;color:var(--red);font-size:.76rem;margin-top:4px}
.linkbtn{background:none;border:0;padding:0;color:var(--blue);font-weight:700;font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.avrow2{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 14px}
.avrow2 .pill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:.76rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.avrow2 .pill:hover{background:var(--sky);border-color:#c9d6f3}.avrow2 .pill .i{width:14px;height:14px}
.avrow2 .pill--p{background:var(--sky);border-color:#c9d6f3;color:var(--blue)}
.avrow2 .pill--danger{border:0;background:none;color:var(--red);padding:0 6px;margin-left:auto;font-weight:600}
.avrow2 .pill--danger:hover{background:none;text-decoration:underline}
/* identity verification modal */
.kycm{max-width:480px}.kyc__lead{font-size:.86rem;margin:.4rem 0 0}
.kslots{display:grid;gap:8px;margin-top:12px}
.kslot{display:flex;align-items:center;gap:12px;padding:10px;border:1.5px dashed #c9d3e6;border-radius:14px;cursor:pointer;margin:0;font-weight:500;background:#fafcff}
.kslot.has{border-style:solid;border-color:var(--ok);background:var(--okl)}
.kslot__pv{width:64px;height:44px;border-radius:8px;background:var(--sky);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--blue)}
.kslot__pv img{width:100%;height:100%;object-fit:cover}
.kslot__t{flex:1;min-width:0}.kslot__t b{display:block;font-size:.86rem}.kslot__t small{display:block;color:var(--mut);font-size:.74rem}
.kslot__go{color:var(--blue)}
/* permission sheet + settings rows */
.pmodal{max-width:440px}.psheet{text-align:center}.psheet h2{margin:10px 0 4px;font-size:1.2rem}.psheet>.mut{font-size:.86rem}
.psheet__ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--sky);color:var(--blue)}
.prow{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 0;border-top:1px solid var(--line)}
.prow>div{flex:1;min-width:0}.prow b{display:block;font-size:.9rem}.prow small{display:block;color:var(--mut);font-size:.76rem}
.prow .pst{color:var(--blue);font-weight:600;margin-top:2px}.prow .btn{flex:none}
.permbox .prow:first-child{border-top:0}
/* alerts */
.alertm{max-width:440px;border-top:6px solid var(--red)}
.almodal{text-align:center}.almodal__ic{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--redl);color:var(--red);animation:alpulse 1.6s ease-in-out infinite}
.almodal__k{display:block;margin-top:10px;font-size:.66rem;letter-spacing:.1em;color:var(--red);font-weight:800}.almodal h2{margin:6px 0 8px;font-size:1.2rem}.almodal p{text-align:left;white-space:pre-line}
.alimg{width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin:6px 0}
@keyframes alpulse{50%{box-shadow:0 0 0 10px rgba(217,45,58,.12)}}
.albanner{display:flex;gap:10px;align-items:flex-start;padding:12px 12px 12px 14px;border-radius:14px;margin:0 0 12px;background:var(--sky);border:1px solid #c9d6f3;color:var(--ink)}
.albanner.announcement{background:var(--goldl);border-color:#f1dc9a}
.albanner__ic{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--blue)}
.albanner>div{flex:1;min-width:0}.albanner small{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--blue)}
.albanner b{display:block;font-size:.9rem}.albanner p{margin:2px 0 0;font-size:.8rem;color:var(--ink2,#334155)}.albanner a{font-size:.78rem;font-weight:700;color:var(--blue)}
.albanner .ib{background:none;border:0;cursor:pointer;color:var(--mut);padding:2px}
/* Digital Batangas ID v7 */
.idv7 .idf--front{background:linear-gradient(135deg,#fffdf6 0%,#f3f6ff 55%,#fdf0f2 100%);padding:14px 16px 12px}
.idv7 .idguil{position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%231446a0' stroke-opacity='.09' stroke-width='.7'%3E%3Cpath d='M0 30 Q15 10 30 30 T60 30 T90 30 T120 30'/%3E%3Cpath d='M0 36 Q15 16 30 36 T60 36 T90 36 T120 36'/%3E%3Cpath d='M0 24 Q15 4 30 24 T60 24 T90 24 T120 24'/%3E%3Cpath d='M0 42 Q15 22 30 42 T60 42 T90 42 T120 42'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(circle at 78% 60%,rgba(20,70,160,.07) 0 22%,transparent 23%),radial-gradient(circle at 78% 60%,transparent 0 30%,rgba(217,45,58,.05) 31% 32%,transparent 33%)}
.idv7 .idguil.dark{opacity:.35;filter:invert(1)}
.idv7 .idf--front:before{height:5px;z-index:1}
.idv7 .idf__h{position:relative;align-items:center;justify-content:flex-start;gap:10px}
.idv7 .idf__h .seal{width:38px;height:38px}
.idv7 .idf__t{flex:1;min-width:0;line-height:1.15}.idv7 .idf__t small{font-size:.5rem;letter-spacing:.14em;color:var(--mut);font-weight:700;display:block}
.idv7 .idf__t b{display:block;font-size:.82rem;letter-spacing:.06em;color:var(--navy);font-weight:900}
.idv7 .idf__t span{display:block;font-size:.66rem;color:var(--red);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.idkyc{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:#eef1f6;color:var(--mut)}
.idkyc .i{width:12px;height:12px}.idkyc.ok{background:var(--okl);color:var(--ok)}.idkyc.gold{background:var(--goldl);color:var(--goldd)}.idkyc.red{background:var(--redl);color:var(--red)}
.idv7 .idf__b{position:relative;display:flex;gap:12px;margin-top:10px}
.idv7 .idph{box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(11,42,99,.4)}
.idv7 .idk small{font-size:.52rem;letter-spacing:.1em;color:#7a869a}
.idv7 .idk b{font-size:.78rem;color:var(--ink);font-weight:700;letter-spacing:.01em}
.idno{position:absolute;left:16px;right:16px;bottom:10px;display:flex;align-items:center;gap:6px}
.idno small{font-size:.5rem;letter-spacing:.12em;color:#7a869a;font-weight:800;text-transform:uppercase}
.idv7 .idpin{position:static;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;font-weight:800;letter-spacing:.08em;color:#0b2a63;-webkit-text-fill-color:#0b2a63;background:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.idbtn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1px solid #d5ddeb;background:rgba(255,255,255,.85);color:var(--navy);cursor:pointer;padding:0;flex:none}
.idbtn:hover{background:#fff;border-color:#9fb3da}.idbtn .i{width:15px;height:15px}
.idv7 .idhint{display:none}
.vb.off{background:rgba(255,255,255,.12);color:#fff}
.idv7 .idc{height:auto;aspect-ratio:1.586;min-height:220px}

/* v10 header: city + date/clock on the first row, weather chip below */
.ctx{flex-direction:column;align-items:flex-start;gap:7px}
.ctx__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%}
.ctx__dt{font-variant-numeric:tabular-nums}
.ctx__dt time{min-width:6.6em;display:inline-block}
.ctx__sep{width:1px;height:12px;background:rgba(255,255,255,.3);margin:0 3px}
/* v10 loading screen: logo + rotating blue/red/yellow ring. Fades in only if loading takes over 150 ms (no flash on fast loads). */
.ghload{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:16px;background:rgba(243,246,251,.94);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}
.ghload.on{visibility:visible;pointer-events:auto;animation:ghl-in .2s ease .15s forwards}
.ghload.out{opacity:0!important;visibility:hidden;animation:none;transition:opacity .16s ease,visibility 0s linear .16s}
.ghload__ring{position:relative;width:96px;height:96px;display:grid;place-items:center}
.ghload__ring:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#1446a0 0 33%,#d92d3a 33% 66%,#f4c430 66% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));animation:ghl-spin .9s linear infinite}
.ghload__ring img{width:62px;height:62px;object-fit:contain;border-radius:50%}
.ghload__t{font:600 .86rem/1 Inter,system-ui,sans-serif;color:#0b2a63;letter-spacing:.02em}
@keyframes ghl-spin{to{transform:rotate(1turn)}}@keyframes ghl-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ghload__ring:before{animation-duration:2.4s}}
[data-theme=dark] .ghload{background:rgba(11,18,32,.92)}[data-theme=dark] .ghload__t{color:#dbe6f6}
/* v10: Digital Batangas ID tri-colour stripe on content cards and banners */
.xcard,.lcard2,.car__s,.banner,.pbanner,.lphero{position:relative}
.xcard:before,.lcard2:before,.car__s:before,.banner:before,.pbanner:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--blue,#1446a0) 0 40%,var(--red,#d92d3a) 40% 70%,var(--gold,#f4c430) 70%)}
/* v10 button polish: consistent states and icon alignment */
.btn,.btn-w,.btn-o,.ib,.pill{-webkit-tap-highlight-color:transparent;transition:transform .1s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease}
.btn .i,.btn-w .i,.btn-o .i{flex:none;display:block}
.btn-sm .i{width:16px;height:16px}
.btn:focus-visible,.btn-w:focus-visible,.btn-o:focus-visible,.ib:focus-visible,.pill:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(20,70,160,.35)}
@media (hover:hover){.btn-p:hover{filter:brightness(1.08);box-shadow:0 10px 22px -8px rgba(11,42,99,.6)}.btn-g:hover{filter:brightness(1.04)}.btn-l:hover,.ib:hover{border-color:#c7d2e4;background:#f7f9fd}.btn-r:hover{filter:brightness(1.06)}.btn-gh:hover{text-decoration:underline}.btn-w:hover{transform:translateY(-1px)}.btn-o:hover{background:rgba(255,255,255,.1)}}
.btn-w:active,.btn-o:active,.ib:active,.pill:active{transform:scale(.97)}
.btn[disabled],.btn:disabled{filter:none;box-shadow:none;transform:none}
/* clean verified badge */
.i.vfy{color:var(--ok,#0f9d58)}
/* v10 Report Now: place filled from GPS and locked */
.geolock{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:10px 12px;border-radius:14px;background:#eaf6ef;border:1px solid #bfe5cc;color:#0f5132;font-size:.8rem;line-height:1.3}
.geolock>.i{flex:none;width:16px;height:16px}
.geolock>span:not(.spin){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.geolock b{font-weight:700}.geolock small{opacity:.8;font-size:.72rem}
.geolock.warn{background:#fff8e6;border-color:#f3dca0;color:#7a5600}
.geolock .spin{width:16px;height:16px;flex:none}
.geolock__x{flex:none;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:999px;border:1px solid #9fd3b2;background:#fff;color:#0f5132;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap}
.geolock__x .i{width:13px;height:13px}.geolock__x:hover{background:#f3fbf6}
select.geolocked{background-color:#f3f6fb!important;color:#334155!important;opacity:1!important;cursor:not-allowed;border-style:dashed!important}
#rgpsm .i{display:inline-block;vertical-align:-3px;width:14px;height:14px;margin-right:2px}
/* v10 payments card shown instead of the e-wallet when the wallet is turned off */
.wal--pay .wal__paytx{font-size:1.05rem;font-weight:800;color:#fff;margin:6px 0 2px;line-height:1.25}
.wal--pay .wal__paysub{color:#94a3b8;font-size:.74rem}

/* Native feel (v12b): no long-press callout, tap flash or text selection on app chrome; typing fields stay fully selectable */
body.m{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.m a,body.m img{-webkit-touch-callout:none;-webkit-user-drag:none;user-drag:none}
body.m input,body.m textarea,body.m select,body.m [contenteditable]:not([contenteditable="false"]),body.m [contenteditable]:not([contenteditable="false"]) *,body.m .selectable{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}
/* v14d: guest home agency tiles in the compact quick-action style; decorative Philippine swoosh centered behind the grid (no panel) */
.shorts{position:relative;isolation:isolate;margin:.9rem 1rem 0;padding:.9rem .4rem .6rem;gap:.9rem .3rem}
.shorts::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(118%,640px);aspect-ratio:802/249;transform:translate(-50%,-50%);background:url(../img/ph-swoosh.png?v=v14d) center/contain no-repeat;background-image:image-set(url(../img/ph-swoosh.webp?v=v14d) type("image/webp"),url(../img/ph-swoosh.png?v=v14d) type("image/png"));opacity:.2;filter:blur(1.5px);pointer-events:none}
.shorts a{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none}
.shorts .t{width:58px;height:58px;aspect-ratio:auto;margin:0;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid #e6ebf4;box-shadow:0 4px 12px -8px rgba(15,23,42,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .15s}
.shorts a:active .t{transform:scale(.94)}
.shorts .t.t--img .svcimg{width:60%;height:60%}
.shorts .t .svcimg{width:26px;height:26px}
.shorts span:last-child{font-size:11.5px;font-weight:600;color:#4a5568;max-width:100%}
@media(min-width:720px){.shorts{max-width:560px;margin-left:auto;margin-right:auto}.shorts::before{width:110%}}

/* v18 Home header animation (Settings > Appearance). Transforms + opacity only; the colours come from inline CSS variables. */
.dhead--fx{background:radial-gradient(circle at 0% 0%,rgba(244,196,48,.18),transparent 42%),linear-gradient(160deg,#123a86 0%,#0b2a63 45%,#0a1a3d 100%)}
.dhead--fx:after{display:none}
.hfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.hfx i,.hfx span{position:absolute;display:block;border-radius:50%}
.hfx__ring{right:-110px;bottom:-140px;width:260px;height:260px;border:40px solid rgba(255,255,255,.035);border-top-color:rgba(255,255,255,.085);border-left-color:rgba(255,255,255,.06);animation:hfxSpin var(--hfx-spin,60s) linear infinite;will-change:transform}
.hfx__ring--2{right:-175px;bottom:-205px;width:390px;height:390px;border:1.5px dashed rgba(255,255,255,.13);animation-direction:reverse;animation-duration:calc(var(--hfx-spin,60s) * 1.5)}
.hfx__orb{right:-120px;top:calc(var(--sat,0px) + 30px);width:300px;height:300px;animation:hfxSpin var(--hfx-spin,60s) linear infinite;will-change:transform}
.hfx__glow{left:-30px;top:-30px;width:240px;height:240px;background:radial-gradient(circle,var(--hfx-a,rgba(232,87,46,.5)),transparent 68%)}
.hfx__glow--b{background:radial-gradient(circle,var(--hfx-b,rgba(244,196,48,.45)),transparent 68%);opacity:0;animation:hfxFade var(--hfx-cycle,12s) ease-in-out infinite alternate;will-change:opacity}
.hfx__glow--a{animation:hfxFadeOut var(--hfx-cycle,12s) ease-in-out infinite alternate;will-change:opacity}
@keyframes hfxSpin{to{transform:rotate(360deg)}}
@keyframes hfxFade{0%,10%{opacity:0}90%,100%{opacity:1}}
@keyframes hfxFadeOut{0%,10%{opacity:1}90%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.hfx i,.hfx span{animation:none!important}.hfx__glow--b{opacity:.35}}
.dhead--fx>.dhead__top,.dhead--fx>.hello,.dhead--fx>.ctx{position:relative;z-index:1}