:root{--blue:#0d5a8e;--teal:#0e8f9a;--green:#47a63a;--green-d:#2f8a2c;--ink:#12293a;--muted:#5d7283;--bg:#f2f6f5;--card:#fff;--line:#dfe8e6;--soft:#e9f3f1;--bad:#c62f3a;--bad-bg:#fdecee;--warn:#b86a00;--warn-bg:#fff4e0;--ok:#237a2d;--ok-bg:#e6f5e8;--info-bg:#e5f1f9;--shadow:0 1px 2px rgba(16,42,58,.06),0 6px 18px rgba(16,42,58,.06);--r:14px;--nav-h:64px}
@media (prefers-color-scheme:dark){:root{--ink:#e7f0f3;--muted:#9bb0bd;--bg:#0c1a22;--card:#122630;--line:#21404d;--soft:#173340;--bad-bg:#3a1a1f;--warn-bg:#3a2a10;--ok-bg:#12331a;--info-bg:#10303f;--shadow:0 1px 2px rgba(0,0,0,.4);--blue:#4aa3dc;--teal:#3cc0cc;--green:#6fcb5f}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh}
body.noscroll{overflow:hidden}
h1,h2,h3{margin:0;line-height:1.25}h1{font-size:1.5rem}h2{font-size:1.2rem}h3{font-size:1.02rem}
a{color:var(--blue);text-decoration:none}p{margin:.35em 0}
.muted{color:var(--muted)}.small{font-size:.85rem}.right{text-align:right}.grow{flex:1}
button{font:inherit;cursor:pointer}
.ico{display:inline-flex;vertical-align:middle}
.spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:sp .8s linear infinite;margin:40px auto}@keyframes sp{to{transform:rotate(360deg)}}
/* shell */
#app{min-height:100vh}
.shell{display:grid;grid-template-columns:1fr;min-height:100vh}
.side{display:none}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.top .brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--blue)}
.top .brand img{width:34px;height:34px;object-fit:contain}
.top h1{font-size:1.05rem;flex:1;margin:0}
.icon-btn{position:relative;border:0;background:transparent;color:var(--ink);width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center}
.icon-btn:hover{background:var(--soft)}
.dot{position:absolute;top:4px;right:4px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 4px;font-weight:700}
main{padding:16px 16px calc(var(--nav-h) + 90px);max-width:1100px;width:100%;margin:0 auto}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);height:var(--nav-h);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a,.tabbar button{border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600}
.tabbar .on{color:var(--blue)}
.fab-panic{position:fixed;right:14px;bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));z-index:25;width:58px;height:58px;border-radius:50%;background:var(--bad);color:#fff;border:0;box-shadow:0 6px 18px rgba(198,47,58,.5);display:grid;place-items:center;font-weight:800;font-size:12px}
.alertbar{background:var(--bad);color:#fff;padding:10px 16px;display:flex;gap:10px;align-items:center;font-weight:600;animation:blink 1s infinite alternate}
@keyframes blink{to{background:#8f1a24}}
.alertbar a{color:#fff;text-decoration:underline}
@media (min-width:900px){
 .shell{grid-template-columns:250px 1fr}
 .side{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow:auto;background:var(--card);border-right:1px solid var(--line);padding:14px 10px}
 .side .logo{display:flex;align-items:center;gap:10px;padding:6px 10px 14px}.side .logo img{width:46px}.side .logo b{display:block;color:var(--blue);font-size:1.15rem}.side .logo small{color:var(--muted)}
 .side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--ink);font-weight:500}
 .side a:hover{background:var(--soft)}.side a.on{background:var(--blue);color:#fff}
 .side h4{margin:12px 12px 4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
 .tabbar{display:none}main{padding:24px 28px 60px}.fab-panic{bottom:24px}.top .brand{display:none}
}
/* kartu & komponen */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px;box-shadow:var(--shadow)}
.card-t{margin-bottom:10px}
.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g4{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.g4{grid-template-columns:repeat(4,1fr)}}
.stat{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;color:var(--ink);box-shadow:var(--shadow)}
.stat-v{font-size:1.7rem;font-weight:800;line-height:1.1}.stat-l{color:var(--muted);font-size:.85rem;margin-top:2px}.stat-h{font-size:.8rem;margin-top:4px;color:var(--muted)}
.stat.warn{border-color:#f0c27a;background:var(--warn-bg)}.stat.bad{border-color:#eba0a6;background:var(--bad-bg)}.stat.bad .stat-v{color:var(--bad)}.stat.ok .stat-v{color:var(--ok)}
.hero{background:linear-gradient(135deg,var(--blue),var(--teal) 60%,var(--green));color:#fff;border-radius:18px;padding:18px;margin-bottom:14px;position:relative;overflow:hidden}
.hero h2{font-size:1.25rem}.hero p{opacity:.92;margin:.2em 0}.hero .chip{display:inline-block;background:rgba(255,255,255,.2);padding:2px 10px;border-radius:99px;font-size:.8rem;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:10px 16px;font-weight:600;min-height:44px}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.green{background:var(--green-d);border-color:var(--green-d);color:#fff}.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}.btn.ghost{background:transparent}.btn.sm{min-height:34px;padding:5px 12px;font-size:.88rem;border-radius:10px}
.btn:disabled{opacity:.55;cursor:not-allowed}.btn.block{width:100%}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.between{justify-content:space-between}.stack>*+*{margin-top:10px}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--soft);color:var(--ink);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.bad{background:var(--bad-bg);color:var(--bad)}.badge.info{background:var(--info-bg);color:var(--blue)}
.list{list-style:none;margin:0;padding:0}.list li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}.list li:last-child{border:0}
.list li.click{cursor:pointer}.list li.click:hover{background:var(--soft)}
.li-main{flex:1;min-width:0}.li-main b{display:block}.li-main small{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:28px 10px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500;word-break:break-word}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}.tab{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:7px 14px;white-space:nowrap;font-weight:600;color:var(--muted)}.tab.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.tbl-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:.9rem}.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:8px;border-bottom:2px solid var(--line);white-space:nowrap}.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.bar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--green));border-radius:99px;transition:width .4s}.bar.bad i{background:var(--bad)}.bar.warn i{background:#e49a22}
.steps{display:flex;gap:4px;margin:10px 0}.steps div{flex:1;text-align:center;font-size:.68rem;color:var(--muted)}.steps i{display:block;height:6px;border-radius:99px;background:var(--line);margin-bottom:4px}.steps .done i{background:var(--green)}.steps .cur i{background:var(--teal)}.steps .done,.steps .cur{color:var(--ink);font-weight:600}
/* form */
.form{display:grid;gap:12px}.fld{display:grid;gap:4px}.fld>span{font-weight:600;font-size:.88rem}.fld small{color:var(--muted)}.req{color:var(--bad)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;min-height:44px}
input:focus,select:focus,textarea:focus,.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 45%,transparent);outline-offset:1px}
.chk{display:flex;gap:10px;align-items:flex-start}.chk input{width:22px;min-height:22px;margin-top:2px}
.err{color:var(--bad);font-weight:600;min-height:1.2em;font-size:.9rem}
.pin-box{text-align:center}.pin-input{font-size:2rem;letter-spacing:.5em;text-align:center;max-width:260px;margin:10px auto}
/* modal & toast */
.modal-back{position:fixed;inset:0;background:rgba(8,24,34,.55);z-index:100;display:flex;align-items:flex-end;justify-content:center}
.modal{background:var(--card);width:100%;max-width:520px;max-height:92vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:up .2s}.modal.wide{max-width:820px}
@keyframes up{from{transform:translateY(30px);opacity:.5}}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 6px}.modal-b{padding:6px 16px 12px;overflow:auto}.modal-f{display:flex;gap:8px;justify-content:flex-end;padding:10px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
@media (min-width:700px){.modal-back{align-items:center}.modal{border-radius:20px}}
#toasts{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:200;display:grid;gap:8px;width:min(92vw,420px)}
.toast{background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);font-weight:600;transition:.4s}.toast.ok{background:var(--green-d);color:#fff}.toast.bad{background:var(--bad);color:#fff}.toast.warn{background:#a35a00;color:#fff}.toast.out{opacity:0;transform:translateY(-8px)}
/* QR */
.qrbox{display:grid;place-items:center;gap:6px;text-align:center}.qrbox svg{width:min(260px,70vw);height:auto;border-radius:14px;border:1px solid var(--line)}.qrcode-txt{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;color:var(--muted);word-break:break-all}
.cam{width:100%;border-radius:12px;background:#000;max-height:50vh}
.photo{width:100%;max-height:260px;object-fit:cover;border-radius:12px;margin-top:8px;border:1px solid var(--line)}
/* panic */
.sos-wrap{display:grid;place-items:center;padding:20px 0}
.sos{position:relative;width:min(240px,64vw);aspect-ratio:1;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ff6b73,var(--bad) 60%,#8f1a24);color:#fff;font-weight:800;font-size:1.5rem;box-shadow:0 12px 36px rgba(198,47,58,.5);touch-action:none;user-select:none;-webkit-user-select:none}
.sos svg{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);transform:rotate(-90deg);pointer-events:none}.sos circle{fill:none;stroke:#fff;stroke-width:6;stroke-dasharray:754;stroke-dashoffset:754;stroke-linecap:round}
.sos.holding{transform:scale(.97)}
/* gate terminal */
.gate-grid{display:grid;gap:14px}@media (min-width:1000px){.gate-grid{grid-template-columns:420px 1fr}}
.verdict{border-radius:18px;padding:22px;text-align:center;color:#fff;font-weight:800;font-size:1.6rem;margin-bottom:12px}.verdict.allow{background:var(--green-d)}.verdict.deny{background:var(--bad)}.verdict small{display:block;font-weight:500;font-size:.95rem;margin-top:6px;opacity:.95}
.verdict.idle{background:var(--soft);color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}.seg button{border:0;background:var(--card);padding:10px 16px;font-weight:700;color:var(--muted)}.seg button.on{background:var(--blue);color:#fff}
.mapbox{position:relative}.mapbox img{width:100%;border-radius:12px;display:block}.mapbox .pt{position:absolute;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--bad);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);font-size:9px;color:#fff;display:grid;place-items:center;font-weight:700}.mapbox .pt.on{background:var(--green-d)}
/* login */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#eaf6f1,#e3f0f8)}
@media (prefers-color-scheme:dark){.auth{background:linear-gradient(160deg,#0c1a22,#10303f)}}
.auth-card{width:min(440px,100%);background:var(--card);border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(13,90,142,.18);border:1px solid var(--line)}
.auth-logo{width:min(250px,72%);margin:0 auto 10px;padding:4px 10px;border-radius:16px}.auth-card .logo{display:block;width:100%;height:auto;margin:0 auto}.logo-fallback{display:grid;justify-items:center;gap:2px;color:var(--blue)}.logo-fallback b{font-size:1.6rem}.logo-fallback small{color:var(--muted)}
.auth-card h2{text-align:center}.auth-card .sub{text-align:center;color:var(--muted);margin-bottom:14px}
.install{background:var(--info-bg);border-radius:12px;padding:10px 12px;margin-top:12px;display:flex;gap:10px;align-items:center;font-size:.88rem}
/* print: surat & berita acara */
.paper{background:#fff;color:#000;max-width:780px;margin:0 auto;padding:36px 44px;font-family:"Times New Roman",serif;line-height:1.6;border:1px solid #ccc}
.paper h2{text-align:center;text-decoration:underline;font-size:1.15rem}.paper .kop{text-align:center;border-bottom:3px double #000;padding-bottom:8px;margin-bottom:16px}.paper .sig{display:flex;justify-content:space-between;margin-top:36px;text-align:center}
@media print{body *{visibility:hidden}.paper,.paper *{visibility:visible}.paper{position:absolute;left:0;top:0;border:0;max-width:none;width:100%}.top,.tabbar,.side,.fab-panic{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.center{text-align:center}
.quick{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}.quick-i{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;background:var(--soft);color:var(--ink);font-weight:600;font-size:.82rem;text-align:center}
.menu li{align-items:center;padding:12px 4px}.menu-h{margin:14px 0 2px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* views:complaints */
.cp-item{align-items:flex-start;min-height:44px}.cp-ico{font-size:1.5rem;line-height:1.2}
.cp-badges{margin:4px 0}.cp-filters{margin-bottom:12px;align-items:flex-end}.cp-filter{flex:1;min-width:140px}
.cp-sla{display:inline-flex}.cp-desc{white-space:pre-wrap;margin:10px 0 0}.cp-actions{gap:8px}
.cp-tl{list-style:none;margin:0;padding:0 0 0 14px;border-left:3px solid var(--line)}.cp-tl li{padding:0 0 14px 12px;position:relative}.cp-tl li::before{content:"";position:absolute;left:-22px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--teal);border:2px solid var(--card)}
.cp-tl .photo{max-height:180px}
.cp-star{border:0;background:transparent;color:var(--line);padding:4px;min-width:44px;min-height:44px}.cp-star.on{color:#e4a11b}

/* views:resident */
.rsd-qrcard{display:grid;gap:12px}.rsd-qr .qrbox{background:#fff;padding:12px;border-radius:16px;border:1px solid var(--line);width:fit-content;margin:0 auto}.rsd-qr .qrcode-txt{text-align:center;margin-top:6px}
.rsd-h{margin:16px 0 4px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rsd-pass .li-main{display:grid;gap:2px;min-width:0}.rsd-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rsd-v .btn.sm{min-height:44px;padding:6px 12px}.rsd-v .tab{min-height:44px}
.rsd-kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}.rsd-kind{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-weight:600;text-align:left}.rsd-kind.on{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.sos{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.rsd-sos-l{font-size:2.2rem;letter-spacing:.06em}.rsd-sos-h{font-size:.82rem;font-weight:600;opacity:.92}
.rsd-track{background:linear-gradient(160deg,#8f1a24,var(--bad));color:#fff;border-radius:18px;padding:20px;text-align:center}.rsd-track-h{display:flex;gap:8px;justify-content:center;align-items:center;font-weight:700}
.rsd-watch{font-size:4rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;margin:8px 0}.rsd-track-s{display:flex;flex-direction:column;gap:6px;align-items:center}
.rsd-done{display:grid;gap:10px;justify-items:start}
.rsd-help{border:1px solid var(--bad);background:var(--bad-bg);border-radius:12px;padding:12px;margin-top:8px}
.rsd-alert{border:2px solid var(--bad);background:var(--card);border-radius:16px;padding:14px;display:grid;gap:10px}.rsd-alert.ditangani{border-color:var(--warn)}
.rsd-ak{display:flex;gap:8px;align-items:center}.rsd-loc{display:grid}.rsd-loc small{color:var(--muted)}
.rsd-sla-row{display:flex;gap:12px;align-items:center}.rsd-clock{font-size:1.8rem;font-weight:800;font-variant-numeric:tabular-nums}.rsd-sla{font-weight:700;font-size:.88rem}.rsd-sla.ok{color:var(--ok)}.rsd-sla.warn{color:var(--warn)}.rsd-sla.bad{color:var(--bad)}
.rsd-sla-row .grow{flex:1;min-width:0}.rsd-actions .btn{flex:1 1 140px}
.rsd-map{max-width:520px}.rsd-pt{width:22px;height:22px;margin:-11px;font-size:13px}
/* views:civic */
.cv-head{margin-bottom:12px}.cv-badges{margin:4px 0;gap:6px}.cv-mini{margin-top:6px}.cv-mini .bar{margin-top:4px}
.cv-poll{align-items:center}
.cv-note{display:flex;gap:10px;align-items:flex-start;background:var(--info-bg);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.cv-desc{white-space:pre-wrap;margin:10px 0}
.cv-opts{display:grid;gap:8px;margin:10px 0}.cv-opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-height:48px;cursor:pointer;font-weight:600}.cv-opt:has(input:checked){border-color:var(--blue);background:var(--info-bg)}.cv-opt input{width:22px;min-height:22px}
.cv-res{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}.cv-res li.win b{color:var(--ok)}.cv-res .bar{margin-top:4px}
.cv-receipt{font:700 1.6rem ui-monospace,Menlo,monospace;letter-spacing:.15em;padding:10px;background:var(--soft);border-radius:12px}
.cv-hash code,.cv-hashp code,.cv-letter code{word-break:break-all;font-size:.75rem}
.cv-letter{flex-wrap:wrap}.cv-letter .li-main{min-width:200px}.cv-acts{display:flex;gap:6px;flex-wrap:wrap}.cv-acts-top{margin-bottom:12px}
.cv-noprint{margin-bottom:12px}.cv-paper{margin-bottom:20px}
.cv-ptbl{border-collapse:collapse;margin:8px 0;width:100%}.cv-ptbl td{padding:2px 6px 2px 0;vertical-align:top}.cv-ptbl td.k{width:9.5em;white-space:nowrap}
.cv-ptbl-b th,.cv-ptbl-b td{border:1px solid #000;padding:4px 8px;text-align:left}
.cv-sigspace{min-height:70px;display:grid;place-items:center;word-break:break-all}.cv-sigspace code{font-size:.65rem}
.cv-verify{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:.8rem}.cv-qr svg{display:block;width:110px;height:110px}
.cv-draft{position:relative}.cv-draft::after{content:"PRATINJAU";position:absolute;inset:0;display:grid;place-items:center;font:800 4rem sans-serif;color:rgba(0,0,0,.07);transform:rotate(-25deg);pointer-events:none}
.cv-body{white-space:pre-wrap}
.cv-amount{font-size:1.8rem;font-weight:800}.cv-va{font:700 1.4rem ui-monospace,Menlo,monospace;letter-spacing:.08em;word-break:break-all}
.cv-sim{display:grid;gap:8px;border:1px dashed var(--line);border-radius:12px;padding:10px}
@media (max-width:520px){.paper.cv-paper{padding:20px 16px}.cv-ptbl td.k{white-space:normal;width:6em}}
@media print{.cv-noprint{display:none!important}.cv-draft::after{display:none}}

/* views:money */
.mn-amount{font-size:1.8rem;font-weight:800}.mn-va{font:700 1.4rem ui-monospace,Menlo,monospace;letter-spacing:.08em;word-break:break-all}
.mn-sim{display:grid;gap:8px;border:1px dashed var(--line);border-radius:12px;padding:12px;text-align:left}
.mn-qr svg{max-width:100%;height:auto}
.mn-big{font-size:1.9rem;font-weight:800;line-height:1.1}
.mn-hero{background:linear-gradient(135deg,#b86a00,var(--bad))}.mn-hero.mn-hero-ok{background:linear-gradient(135deg,var(--blue),var(--teal) 60%,var(--green))}
.mn-note{margin-bottom:12px}
.mn-inv,.mn-kas,.mn-ind,.mn-ren{align-items:center}
.mn-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mn-filters{align-items:flex-end;margin-bottom:12px}.mn-filters .fld{min-width:130px}
.mn-sum{margin-top:12px}.mn-acts{gap:8px;margin-top:6px}.mn-badges{gap:6px;margin-top:4px}
.mn-in{color:var(--ok)}.mn-out{color:var(--bad)}
.mn-claim{display:block;color:var(--ink);margin:0}.mn-claim:hover{border-color:var(--blue)}
.mn-notes{white-space:pre-wrap}.mn-pend{margin-bottom:14px}
.mn-sc{font-size:1.2rem}
.mn-meter{position:relative}.mn-thr{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.6}
.mn-chart{display:flex;gap:6px;align-items:flex-end;height:180px;padding-top:8px}
.mn-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.mn-bars{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.mn-b{flex:1;max-width:22px;border-radius:5px 5px 0 0;min-height:2px}.mn-b.in{background:var(--green)}.mn-b.out{background:var(--bad)}
.mn-lbl{font-size:.72rem;color:var(--muted);margin-top:4px;white-space:nowrap}
.mn-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;margin-bottom:6px}.mn-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}.mn-legend i.in{background:var(--green)}.mn-legend i.out{background:var(--bad)}
.mn-inv .btn.sm,.mn-acts .btn.sm,.mn-ren .btn.sm{min-height:44px}

/* views:staff */
.stf-load{min-height:80px}
.stf-seg-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.stf-seg-row .seg button{min-height:44px}
.stf-cam{min-height:56px;font-size:1.05rem;margin-bottom:12px}
.stf-scan{font-size:1.1rem;border:2px solid var(--teal)}
.row.nowrap{flex-wrap:nowrap}.row.nowrap input{flex:1;min-width:0}
.stf-photo{margin-top:6px}.stf-photo summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--blue);font-weight:600}
.stf-proof{max-height:140px;margin-top:10px}
.verdict.busy{opacity:.6}
.stf-v-t{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.5rem}
.stf-v-n{font-size:1.4rem;margin-top:8px}
.verdict small{color:inherit;opacity:.95}.verdict.idle small{opacity:1}
.stf-v-r{font-size:1.05rem!important;margin-top:6px;font-weight:600!important}
.stf-log{align-items:center;min-height:52px}
.stf-dec{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}.stf-dec.allow{background:var(--green-d)}.stf-dec.deny{background:var(--bad)}
.stf-reason{color:var(--bad)!important}
.stf-gov{display:flex;gap:8px;align-items:center;background:var(--warn-bg);color:var(--warn);padding:10px 12px;border-radius:12px;font-weight:700;margin:8px 0;min-height:44px}
.stf-filters{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:end}.stf-fq{grid-column:1/-1}
@media(min-width:900px){.stf-fq{grid-column:auto}}
.stf-wrap{white-space:normal;min-width:160px;display:inline-block}
.stf-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.stf-gv,.stf-vd,.stf-bk,.stf-sh,.stf-rt{align-items:center;flex-wrap:wrap}.stf-vd.off{opacity:.7}
.stf-big{font-size:2rem;font-weight:800}.stf-big small{font-size:.9rem;color:var(--muted);font-weight:500}
.stf-map{max-width:640px}.stf-pt{width:24px;height:24px;margin:-12px;font-size:11px;cursor:pointer;padding:0}
.stf-pt::after{content:"";position:absolute;inset:-10px}
.stf-leg{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--bad);vertical-align:middle}.stf-leg.on{background:var(--green-d)}
.stf-hours{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:110px;align-items:end;margin-top:6px}
.stf-hr{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:.6rem;color:var(--muted)}
.stf-hr i{display:block;width:100%;background:var(--line);border-radius:3px 3px 0 0}.stf-hr i.mid{background:var(--warn)}.stf-hr i.ok{background:var(--green-d)}.stf-hr.cur{outline:2px solid var(--blue);outline-offset:1px;border-radius:3px}
.stf-hr span{height:12px}
.stf-att{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stf-att-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.stf-att-b .btn{flex:1 1 200px}
.stf-aqr svg{width:min(320px,80vw);height:auto}.stf-vqr svg{width:min(260px,70vw);height:auto}
.stf-date{max-width:240px;margin-bottom:10px}
.stf-pjul{flex:1;min-width:0;align-items:center;min-height:44px}
.stf-pjus li{align-items:center;flex-wrap:wrap}
.stf-audit-f{display:grid;gap:10px;margin-top:12px}
.stf-mt-h{margin-bottom:10px}.stf-mt-f{flex:1;min-width:160px}
.stf-stars{display:block;color:#e4a11b;font-size:1.2rem;letter-spacing:.1em}.stf-stars:not(.on){color:var(--muted);font-size:.9rem;letter-spacing:0}
.stf-fac{grid-template-columns:repeat(2,1fr)!important;margin-bottom:14px}.stf-fac .card{margin:0;padding:12px}.stf-fac .btn{width:100%}
@media(min-width:900px){.stf-fac{grid-template-columns:repeat(4,1fr)!important}}
.shell>div{min-width:0}.stf-v .tbl th,.stf-v .tbl td{vertical-align:top}
.stf-v>h2,.stf-v>.row{margin-bottom:10px}
@media(max-width:600px){.stf-gv,.stf-vd,.stf-bk{flex-direction:column;align-items:stretch;gap:8px}.stf-gv .stf-end,.stf-vd .stf-end,.stf-bk .stf-end{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.stf-sh .li-main{flex:1 1 100%}.stf-sh{gap:8px}}

@media (prefers-color-scheme:dark){.auth-logo{background:#fff}}

/* views:patrol-geofence */
.stf-qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.stf-ptqr{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1px solid var(--line,#dfe8e6);border-radius:12px;padding:12px;break-inside:avoid;background:#fff;color:#12293a}
.stf-ptqr svg{max-width:100%;height:auto}
.stf-qrsheet h3{margin:0 0 10px}

/* views:ver12-password */
.pw-wrap{position:relative;display:block}.pw-wrap>input{width:100%;padding-right:46px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:10px;cursor:pointer}
.pw-eye:hover,.pw-eye:focus-visible{color:var(--primary,#0b5c8e);background:rgba(11,92,142,.08)}.pw-eye[aria-pressed=true]{color:var(--primary,#0b5c8e)}
/* views:ver12-map */
.smap{position:relative;overflow:hidden;border-radius:12px;background:#cfd8dc;touch-action:none;cursor:grab;border:1px solid var(--line,#d6dde3);user-select:none}
.smap:active{cursor:grabbing}.sm-tiles,.sm-over{position:absolute;inset:0}.sm-over{pointer-events:none}
.sm-tile{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;pointer-events:none}.sm-tile.err{opacity:0}
.sm-attr{position:absolute;left:6px;bottom:4px;font-size:10px;background:rgba(255,255,255,.8);padding:1px 5px;border-radius:4px;pointer-events:none}
.sm-ctl{position:absolute;right:8px;top:8px;display:grid;gap:4px}
.sm-btn{width:36px;height:36px;border:0;border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);font-size:20px;line-height:1;cursor:pointer;color:#12303f}
.sm-lay{position:absolute;left:8px;top:8px;width:auto;padding:0 10px;font-size:12px;font-weight:600}
.sm-mk{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);min-width:26px;height:26px;padding:0 6px;border-radius:13px;border:2px solid #fff;background:#0b5c8e;color:#fff;font-size:12px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer}
.sm-mk.ok{background:#1f9d55}.sm-mk.warn{background:#d9822b}.sm-mk.off{background:#7b8794}.sm-mk.sel{background:#c0392b}
.sm-pick{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);border:3px solid #c0392b;border-radius:50%;background:rgba(192,57,43,.25);box-shadow:0 0 0 2px #fff}
.sm-circle{position:absolute;border-radius:50%;border:2px solid #c0392b;background:rgba(192,57,43,.18)}
.gm-frame{width:100%;height:300px;border:0;border-radius:12px}
.pt-tools{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.pt-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(11,92,142,.1);font-size:.82rem}
.pt-sel{display:grid;gap:6px;max-height:260px;overflow:auto;border:1px solid var(--line,#d6dde3);border-radius:10px;padding:8px}
.pt-sel label{display:flex;gap:8px;align-items:center}
.hist-li small{display:block;color:var(--muted)}
/* views:ver12-listfix */
.list li:has(> .pt-tools){flex-wrap:wrap}.list li > .pt-tools{flex-basis:100%;margin-top:6px}
/* views:ver12.1-worker */
.list li.rsd-worker{flex-wrap:wrap}.list li.rsd-worker .li-main{flex:1 1 0;min-width:0}.list li.rsd-worker .qrcode-txt{word-break:break-all;font-size:.72rem}.list li.rsd-worker > .rsd-end{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
/* views:ver12.2-miniclub */
.mc-ev{display:flex;gap:12px;align-items:flex-start}.mc-time{min-width:64px;display:flex;flex-direction:column}.mc-time small{color:var(--muted)}.mc-range{padding:0 6px;min-width:150px;text-align:center}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.mc-hd{text-align:center;font-size:.72rem;color:var(--muted);font-weight:700}
.mc-cell{min-height:46px;border:1px solid var(--line,#d6dde3);border-radius:10px;background:var(--card,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;color:inherit;cursor:pointer}
.mc-cell.off{border:0;background:transparent;cursor:default}.mc-cell.has{background:#e8f3ff}.mc-cell.today{outline:2px solid var(--brand,#0d5a8e)}.mc-cell.sel{background:var(--brand,#0d5a8e);color:#fff}
.mc-dot{font-size:.68rem;background:#0d5a8e;color:#fff;border-radius:99px;padding:0 6px}.mc-cell.sel .mc-dot{background:#fff;color:#0d5a8e}