
:root{--c:#0F6CBD;--c2:#115EA3;--bg:#f5f5f5;--card:#fff;--tx:#201f1e;--mu:#616161;--bd:#e1dfdd;--ok:#107c10;--bad:#a4262c;--warn:#8a6100}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
button,input,select,textarea{font:inherit}
.top{position:sticky;top:0;z-index:5;background:var(--c);color:#fff;display:flex;align-items:center;gap:8px;padding:10px 14px}
.top b{flex:1;font-size:16px}
.top button{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:4px;padding:6px 10px}
.wrap{max-width:560px;margin:0 auto;padding:12px 12px 10px}
.wide .wrap{max-width:1100px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:12px;margin:10px 0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
h2{font-size:16px;margin:4px 0 8px}
label{display:block;font-size:12px;color:var(--mu);margin:10px 0 3px}
input,select,textarea{width:100%;padding:10px;border:1px solid #bdbdbd;border-radius:4px;background:#fff;color:var(--tx)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--c);border-color:var(--c)}
.btn{background:var(--c);color:#fff;border:0;border-radius:4px;padding:10px 16px;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5}
.btn.alt{background:#fff;color:var(--c);border:1px solid var(--c)}
.btn.bad{background:var(--bad)}
.btn.sm{padding:6px 10px;font-size:12px}
.row{display:flex;gap:8px;align-items:center}
.row>*{flex:1}
.row>.fit{flex:none}
.item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd)}
.item:last-child{border:0}
.av{width:42px;height:52px;border-radius:6px;background:#dcdcdc center/cover;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.g{color:var(--mu);font-size:12px}
.tg{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600}
.tg.ok{background:#dff6dd;color:var(--ok)}.tg.warn{background:#fff4ce;color:var(--warn)}.tg.bad{background:#fde7e9;color:var(--bad)}.tg.info{background:#deecf9;color:var(--c)}
.tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--bd);display:flex;z-index:6}
.tabs button{flex:1;border:0;background:none;padding:10px 4px;color:var(--mu);font-size:12px}
.tabs button.on{color:var(--c);font-weight:700;border-top:2px solid var(--c)}
.toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:#323130;color:#fff;padding:10px 16px;border-radius:6px;opacity:0;pointer-events:none;transition:.2s;max-width:90%;z-index:20}
.toast.show{opacity:1}.toast.err{background:var(--bad)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal .box{background:#fff;width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:12px 12px 0 0;padding:14px}
.msg{white-space:pre-wrap;background:#f3f2f1;padding:10px;border-radius:6px;font-size:12px}
.sw{display:flex;gap:6px;flex-wrap:wrap}
.sw i{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #bbb;cursor:pointer}
.sw i.on{box-shadow:0 0 0 3px var(--tx)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.dgrid .dn{text-align:center;font-size:11px;color:var(--mu)}
.dgrid .pick{cursor:pointer;padding:4px;border:2px solid transparent;border-radius:8px}
.dgrid .pick.on{border-color:var(--c)}
.cv{max-width:100%;touch-action:none;background:#222;border-radius:6px}
.fld{display:flex;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--bd)}
.fld span{flex:1}
.fld button{border:1px solid var(--bd);background:#fff;border-radius:4px;padding:4px 8px}
.login{max-width:380px;margin:8vh auto;padding:0 14px}
.login h1{color:var(--c);font-size:22px;margin:0 0 4px}
.hide{display:none}
.av{position:relative}
.av.miss{background:#eef3f8;border:2px dashed var(--c);color:var(--c);cursor:pointer}
.av .plus{font-size:24px;font-weight:700;line-height:1}
.chk{display:flex;align-items:center;gap:8px;margin-top:10px}.chk input{width:auto}
pre.msg{white-space:pre-wrap;word-break:break-word;background:#f3f2f1;border-radius:6px;padding:10px;font:13px/1.45 ui-monospace,Consolas,monospace;max-height:240px;overflow:auto}
body{padding-bottom:64px}
.item .btn.sm{margin-left:4px}
.top .tl{width:26px;height:22px;object-fit:contain;background:#fff;border-radius:5px;padding:2px;flex:none}
.top .sp{padding:6px 9px}
.login .lg{display:block;width:min(70vw,280px);height:auto;margin:18px auto 4px}
.login h1{text-align:center}.login>.g{text-align:center}
#foot{text-align:center;color:var(--mu);font-size:11px;line-height:1.7;padding:6px 12px 18px}
#foot a{color:var(--mu);text-decoration:none}
#foot b{color:var(--tx);font-weight:600}
.updb{position:fixed;left:8px;right:8px;top:8px;z-index:30;background:#0F6CBD;color:#fff;border-radius:8px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25);font-size:13px}
.updb button{background:#fff;color:#0F6CBD;border:0;border-radius:4px;padding:6px 10px;font-weight:600;flex:none}
.sr{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--bd);font-size:13px}
.sr:last-child{border:0}.sr .k{flex:1}.sr .v{text-align:right;font-weight:600}
.sr .dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:#bbb}
.sr .dot.ok{background:var(--ok)}.sr .dot.warn{background:#d29200}.sr .dot.bad{background:var(--bad)}
.verd{padding:10px;border-radius:8px;font-weight:600;margin:8px 0}
.verd.ok{background:#dff6dd;color:var(--ok)}.verd.warn{background:#fff4ce;color:var(--warn)}.verd.bad{background:#fde7e9;color:var(--bad)}
#foot a,.login a{color:var(--c)}
.pw{position:relative}.pw input{padding-right:62px}.pw .eye{position:absolute;right:4px;top:4px;bottom:4px;border:0;background:#eef3f8;color:var(--c);border-radius:4px;padding:0 10px;font-size:12px;font-weight:600;cursor:pointer}
.rec{font:700 22px/1.3 ui-monospace,Consolas,monospace;letter-spacing:2px;text-align:center;background:#f3f2f1;border:2px dashed var(--c);border-radius:8px;padding:14px 8px;margin:10px 0;user-select:all;word-break:break-all}
.top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Visit Log, Messages, Bell ===== */
.bb{font-style:normal;background:#c50f1f;color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px;min-width:16px;text-align:center;display:inline-block;line-height:1.3}
.bb.hide{display:none}
.bellb{position:relative}.bellb .bb{position:absolute;top:-5px;right:-5px}
.tabs button{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px 1px;font-size:10.5px}.tabs button .bb{position:absolute;top:3px;left:55%}
.bellp{position:fixed;top:52px;right:8px;width:min(340px,calc(100vw - 16px));max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--bd);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.28);z-index:14}
.bellp h4{margin:0;padding:10px 12px;font-size:13px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;position:sticky;top:0;background:#fff}
.bellp h4 a{color:var(--c);font-weight:400;font-size:12px;cursor:pointer}
.bellp .n{padding:10px 12px;border-bottom:1px solid #edebe9;display:flex;gap:10px;cursor:pointer}.bellp .n.u{background:#eff6fc}
.av2{width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:none;font-size:12px}.av2.ok{background:#107c10;font-size:18px}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb2{background:var(--c);color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px;display:inline-block;margin-top:3px}
.seg{display:flex;border:1px solid var(--c);border-radius:6px;overflow:hidden;margin-bottom:10px}.seg button{flex:1;border:0;background:#fff;color:var(--c);padding:9px;font-weight:600}.seg button.on{background:var(--c);color:#fff}
.auto{background:#eff6fc;border:1px solid #c7e0f4;border-radius:6px;padding:8px;font-size:12px;color:#0f548c;margin-top:10px;line-height:1.6}
.cards4{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}.cards4 .k{background:#f3f2f1;border-radius:6px;padding:10px}.cards4 .k b{display:block;font-size:20px}.cards4 .k span{font-size:11px;color:var(--mu)}.cards4 .k.warn b,.bad{color:#c50f1f}
.pbar{background:#dff6dd;height:6px;border-radius:3px}.pbar i{display:block;height:6px;background:#107c10;border-radius:3px}
.tw{overflow-x:auto}.gt{border-collapse:collapse;width:100%;font-size:12px}.gt th{background:#f3f2f1;text-align:left;padding:7px;border-bottom:2px solid var(--c);white-space:nowrap}.gt th.srt{cursor:pointer;user-select:none}.gt th.srt .so{color:var(--mu);font-size:10px}
.gt tr.fr th{background:#fff;padding:3px;border-bottom:1px solid var(--bd)}.gt tr.fr input,.gt tr.fr select{padding:4px 6px;font-size:12px;min-width:70px}
.gt td{padding:7px;border-bottom:1px solid var(--bd);vertical-align:top}.gt td.n,.gt th.n{text-align:right}.gt tr.xr{cursor:pointer}.gt tr.ex td{background:#faf9f8}.gt tr.hide{display:none}
.chatv{position:fixed;inset:0;height:100dvh;background:#faf9f8;z-index:12;display:flex;flex-direction:column}
.chatv .ch{background:var(--c);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px}.chatv .ch b{flex:1;font-size:16px}.chatv .ch button{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:4px;padding:6px 10px}
.cms{flex:1;overflow-y:auto;padding:12px;max-width:720px;width:100%;margin:0 auto}
.m{max-width:82%;padding:8px 10px;border-radius:10px;margin:6px 0;font-size:14px;line-height:1.4;word-wrap:break-word}.m.me{background:var(--c);color:#fff;margin-left:auto;border-bottom-right-radius:2px}.m.th2{background:#fff;border:1px solid var(--bd);border-bottom-left-radius:2px}
.m small{display:block;font-size:10px;opacity:.75;margin-top:3px}.m .mn{font-size:11px;font-weight:600;color:var(--c);margin-bottom:2px}.m.me .g{color:#dbeafe}
.ai{display:block;width:180px;max-width:100%;height:110px;object-fit:cover;border-radius:6px;margin-bottom:4px;cursor:pointer;background:#9ac7ea;color:#fff;text-align:center;line-height:110px}
.ai.vd{background:#242424 center/cover no-repeat;position:relative}.ai.vd span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;text-shadow:0 0 6px #000}
.cbar{display:flex;gap:6px;padding:8px;border-top:1px solid var(--bd);background:#fff;align-items:flex-end;max-width:720px;width:100%;margin:0 auto}.cbar textarea{flex:1;border-radius:18px;padding:8px 12px;resize:none;max-height:110px}.cbar .btn{border-radius:50%;width:38px;height:38px;padding:0}.ca{background:none;border:0;font-size:20px;padding:6px;cursor:pointer}
#cpe{max-width:720px;width:100%;margin:0 auto;padding:0 8px}.chip{display:flex;align-items:center;gap:8px;background:#e6f2fb;color:#0f548c;border-radius:10px;padding:5px 10px;margin:6px 0;font-size:12px;justify-content:space-between}.chip .cx{background:none;border:0;font-size:18px;color:#0f548c;cursor:pointer}

/* ===== Team access, helpdesk, search, expenses, location ===== */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;min-width:64px;padding:10px 12px;font-size:12px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}@media(max-width:420px){.pgrid{grid-template-columns:1fr}}
.sw{display:flex;align-items:center;gap:8px;background:#f3f2f1;border-radius:6px;padding:8px;font-size:13px;margin:0}.sw input{width:auto;margin:0}
.sgh{margin:0;padding:10px 0 4px;font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:.5px}
.tst{background:#fff;border-bottom:1px solid var(--bd);padding:8px 14px}
.locc{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.18);border-radius:8px;padding:8px;margin-bottom:4px;color:inherit;text-decoration:none}.locc>span{font-size:26px}
.m.th2 .locc{background:#f3f2f1}
#srch .ch input{background:#fff;color:#201f1e}

/* ===== Menu drawer, bottom tabs, collection, bill ===== */
.tabs.t5{overflow:visible}.tabs.t5 button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 8px;font-size:11.5px;font-weight:500;overflow:visible}
.tabs.t5 .ti{font-size:22px;line-height:1}.tabs.t5 button.on{font-weight:700}.tabs.t5 .bb{top:2px;left:calc(50% + 6px)}
.top #mn{font-size:20px;padding:4px 10px}
.drw{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30}.dp{position:absolute;left:0;top:0;bottom:0;width:min(310px,86vw);background:#fff;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.3);animation:dsl .18s ease-out}
@keyframes dsl{from{transform:translateX(-100%)}to{transform:none}}
.dh{display:flex;gap:10px;align-items:center;padding:16px 14px;background:var(--c);color:#fff}.dh .g{color:#dbeafe}.dh .av2{background:rgba(255,255,255,.22)}.dx{border:0;background:none;color:#fff;font-size:28px;line-height:1}
.di{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;padding:15px 18px;font-size:16px;text-align:left;color:#201f1e;border-bottom:1px solid #f0efee}.di .ti{font-size:22px;width:28px;text-align:center}.di.on{background:#eff6fc;color:var(--c);font-weight:700}.dsep{height:8px;background:#f3f2f1}
.btn.wa{background:#25D366;border-color:#25D366;color:#fff}
.bit{border:1px solid var(--bd);border-radius:8px;padding:8px;margin-top:8px}.bit input{margin:2px 0}
.imgp{width:90px;height:60px;border:1px dashed #aaa;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#fafafa}.imgp img{max-width:100%;max-height:100%}
.bill{background:#e9eef4}.bill .paper{position:relative;background:#fff;border-radius:6px;padding:18px;box-shadow:0 2px 14px rgba(0,0,0,.15);border-top:5px solid #0F6CBD;color:#1b1b1b}
.bill .hd{display:flex;gap:10px;align-items:flex-start}.bill .vn{flex:1;font-size:11px;color:#444;line-height:1.45}.bill .vn b{font-size:15px;color:#111}
.bill .inv{text-align:right;font-size:11px;color:#444}.bill .inv b{display:block;font-size:15px;color:#0F6CBD}
.bill .bt{margin:14px 0 10px;background:#f3f7fb;border-radius:6px;padding:9px 11px;font-size:11px;line-height:1.5}.bill .bt span{font-size:10px;color:#0F6CBD;font-weight:700}.bill .bt b{display:block;font-size:14px}
.bill table{width:100%;border-collapse:collapse;font-size:11.5px}.bill th{background:#0F6CBD;color:#fff;text-align:left;padding:6px}.bill td{padding:6px;border-bottom:1px solid #e5e5e5;vertical-align:top}.bill .r{text-align:right}.bill .l{text-align:right;color:#555}.bill td small{display:block;color:#888;font-size:9.5px}
.bill tr.tt td{font-weight:700;font-size:14px;border-top:2px solid #0F6CBD}.bill .w{font-size:10.5px;color:#555;margin:6px 0 10px;font-style:italic}
.bill .bx{display:flex;gap:8px}.bill .bx>div{flex:1;border-radius:6px;padding:8px 10px;background:#f3f2f1}.bill .bx span{font-size:10px;color:#666;display:block}.bill .bx b{font-size:18px}.bill .ok{color:#107c10}.bill .bd{color:#c50f1f}
.bill .pay{display:flex;gap:14px;align-items:center;margin-top:12px;border:1px dashed #0F6CBD;border-radius:6px;padding:10px}.bill .pay small{display:block;text-align:center;font-size:10px;color:#555}.bill .pd{font-size:11.5px;line-height:1.6}
.bill .ft{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px}.bill .tn{font-size:10px;color:#666;flex:1}.bill .sg{text-align:center;width:120px;border-top:0}.bill .sg small{display:block;border-top:1px solid #999;font-size:9.5px;color:#666;padding-top:2px}
.bill .stamp{position:absolute;top:40%;left:12%;font-size:48px;font-weight:800;color:rgba(197,15,31,.35);transform:rotate(-18deg);border:4px solid rgba(197,15,31,.35);padding:4px 14px;border-radius:8px}
.bill .acts{display:flex;gap:6px;margin-top:10px;max-width:720px;margin-left:auto;margin-right:auto}.bill .acts .btn{flex:1;text-align:center;padding:10px 4px}
.bill .paper{max-width:720px;margin:0 auto}

a.btn{text-decoration:none;display:inline-block;text-align:center}
.k2h{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.t6{background:#fff;border:1px solid #e1dfdd;border-radius:8px;padding:10px;cursor:pointer}.t6 span{display:block;font-size:11px;color:var(--mu)}.t6 b{display:block;font-size:22px}.t6 i{font-style:normal;font-size:11px;color:#107c10}
.chart6{display:flex;align-items:flex-end;gap:4px;height:96px;margin:8px 0 20px}.cb6{flex:1;height:100%;position:relative;display:flex;align-items:flex-end}.bar6{width:100%;background:#9ac7ea;border-radius:3px 3px 0 0;min-height:0}.bar6.n{background:var(--c)}.cb6 small{position:absolute;left:-4px;right:-4px;bottom:-16px;text-align:center;font-size:9px;color:var(--mu)}
.seg button{padding:9px 2px;font-size:12.5px}
.bill tr.tt td{font-size:12px}
.dh7{font-weight:700;color:var(--c);margin:12px 2px 6px;font-size:13px}.tk7{padding:10px 12px;margin-bottom:8px}.tk7.od{border-left:4px solid #c50f1f}.ti7{font-size:20px;margin-right:8px}
.btn.bad{background:#c50f1f;color:#fff}.row>.ti7{flex:0 0 30px;margin-right:0}.tk7 .row>.tg{flex:0 0 auto}
.bl7{display:flex;gap:10px;align-items:center;cursor:pointer;padding:9px 0}.bl7 input{width:20px;height:20px;flex:0 0 auto}
.stp7{display:flex;margin:10px 0 4px}.stp7>div{flex:1;text-align:center;position:relative}.stp7 i{display:block;width:14px;height:14px;border-radius:50%;background:#d2d0ce;margin:0 auto 3px;position:relative;z-index:1}.stp7 .dn i{background:#107c10}.stp7 .cu i{background:var(--c);box-shadow:0 0 0 3px #cfe4f6}.stp7>div:not(:first-child):before{content:"";position:absolute;top:6px;left:-50%;right:50%;height:2px;background:#d2d0ce}.stp7 .dn:not(:first-child):before,.stp7 .cu:not(:first-child):before{background:#107c10}.stp7 small{font-size:10px;color:var(--mu)}.stp7 .cu small{color:var(--c);font-weight:700}
.chk9{display:flex;gap:8px;align-items:center;margin-top:8px;font-weight:400}.chk9 input{width:18px;height:18px}.acts9{display:flex;gap:8px;margin-top:10px}.acts9 .btn{flex:1}
.pg9{position:relative;overflow:hidden;background:#fff;color:#201f1e;font-family:Inter,Segoe UI,Arial,sans-serif;padding:30px;box-sizing:border-box}.pg9 .pf9{position:absolute;left:30px;right:30px;bottom:14px;font-size:10px;color:#777;text-align:center}.pc9{position:relative;overflow:hidden}
.wm9{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4;background:repeating-linear-gradient(-35deg,transparent 0 13px,rgba(197,15,31,.10) 13px 14px)}.wm9 b{font:800 34px Arial,sans-serif;color:rgba(197,15,31,.28);transform:rotate(-35deg);letter-spacing:3px}
.wp9{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}.wp9>div{position:absolute;left:-400px;top:-300px;width:1800px;transform:rotate(-30deg);font:600 13px Arial,sans-serif;color:rgba(120,120,120,.22);white-space:nowrap;line-height:34px}
label.ck{display:flex;align-items:center;gap:8px;margin:6px 0;font-weight:500}label.ck input{width:auto;margin:0;flex:none}.row .tg{width:auto;flex:none}
.login .lg{width:min(48vw,190px)}
.lo3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px}.lo3 .btn{width:100%;height:44px;padding:4px 6px;font-size:12px;line-height:1.15;display:flex;align-items:center;justify-content:center;text-align:center}
.neg{color:#c50f1f;font-weight:600}
.cli #bwa,.cli #bem{display:none}
