/* ===== VIGISAFE web (appvg.jsx) ===== */
.avg{--bg:#FFFFFF;--card:#FAFAFC;--card2:#F1F1F5;--ln:#EEEEF2;--tx:#1D1D1F;--mu:#6E6E73;--sk:#16181D;--sko:1;position:relative;width:var(--aw,1200px);height:var(--ah,623px);display:flex;gap:14px;padding:14px;box-sizing:border-box;background:var(--bg);color:var(--tx);font-family:var(--font-body);text-align:left;overflow:hidden}
.avg.dark{--bg:#0E0F11;--card:#17181B;--card2:#202226;--ln:rgba(255,255,255,.06);--tx:#F2F3F5;--mu:#9A9DA5;--sk:#F2F3F5}
.avg .ico{flex:none}
.avg-sk{display:block;flex:none;height:7px;border-radius:4px;background:var(--sk);opacity:.2}
.avg-side{flex:none;width:208px;display:flex;flex-direction:column;padding:16px 10px 12px;border-radius:26px;background:#0C0C0D;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#FEFEFE}
.avg-brand{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 10px;margin-bottom:10px;color:#A1A1A6}.avg-brand img{height:15px;width:auto}
.avg-side nav{flex:1;min-height:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.avg-nav{position:relative;display:flex;align-items:center;gap:11px;height:34px;padding:0 12px;border-radius:12px;color:#C9C9CE;font-size:12.5px;font-weight:600;white-space:nowrap}
.avg-nav>span{flex:1}.avg-nav em{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#F0736A;color:#2A0B08;font-style:normal;font-size:10.5px;font-weight:700}
.avg-nav.on{background:#18181A;color:#FEFEFE}.avg-nav.on .ico{color:#64EC77}
.avg-nav.on::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-10px;width:3px;height:20px;border-radius:0 3px 3px 0;background:#64EC77;box-shadow:0 0 8px rgba(100,236,119,.45)}
.avg-me{display:flex;align-items:center;gap:10px;margin-top:8px;padding:11px 8px 0;border-top:1px solid rgba(255,255,255,.1)}
.avg-me .av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#204A3B;color:#64EC77;font-size:11px;font-weight:700}
.avg-me .tx{display:flex;flex-direction:column;min-width:0}.avg-me b{font-size:12px}.avg-me small{font-size:10.5px;color:#A1A1A6}
.avg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.avg-top{display:flex;align-items:center;gap:10px;height:40px;margin-bottom:8px;color:var(--mu)}.avg-top .sp{flex:1}
.avg-top .bell{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--card)}
.avg-top .usr{display:flex;align-items:center;gap:9px;height:36px;padding:0 12px 0 6px;border-radius:999px;background:var(--card)}
.avg-av{display:block;flex:none;width:22px;height:22px;border-radius:50%}
.avg-body{flex:1;min-height:0;animation:avIn .5s cubic-bezier(.2,0,0,1) both}
.avg-col{height:100%;display:flex;flex-direction:column;gap:12px}
.avg-r4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:none}
.avg-tile{display:flex;flex-direction:column;justify-content:space-between;height:92px;padding:14px 16px 12px;border-radius:24px;background:var(--bg);color:var(--fg);box-sizing:border-box;animation:avIn .5s cubic-bezier(.2,0,0,1) both;animation-delay:calc(var(--k) * .06s)}
.avg-tile .t{display:flex;align-items:center;justify-content:space-between}
.avg-tile b{font-family:var(--font-identity);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.avg-tile .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.65)}
.avg-tile .avg-sk{background:var(--fg)}
.avg.dark .avg-tile{background:color-mix(in oklab,var(--fg) 20%,#17181B)}.avg.dark .avg-tile{color:color-mix(in oklab,var(--fg) 40%,#fff)}.avg.dark .avg-tile .ic{background:rgba(255,255,255,.1)}.avg.dark .avg-tile .avg-sk{background:currentColor}
.avg-card{border-radius:24px;background:var(--card);padding:14px 18px;box-sizing:border-box;min-width:0}
.avg-pill{display:inline-flex;align-items:center;gap:6px;flex:none;height:22px;padding:0 10px;border-radius:999px;background:var(--bg);color:var(--fg)}
.avg-pill>i{width:6px;height:6px;border-radius:50%;background:var(--fg)}.avg-pill .avg-sk{background:var(--fg)}
.avg.dark .avg-pill{background:color-mix(in oklab,var(--fg) 22%,#17181B);color:color-mix(in oklab,var(--fg) 40%,#fff)}
.avg-flt{display:flex;gap:10px;flex:none;padding:10px 12px;border-radius:20px}
.avg-flt .f{display:flex;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:12px;background:var(--bg);color:var(--mu)}.avg-flt .f:last-child{flex:1}
.avg-tbl{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 6px 6px;overflow:hidden}
.avg-tbl .hd,.avg-tbl .rw{display:grid;grid-template-columns:22px 1.1fr 1fr 1.5fr 1.5fr 1.2fr 64px;gap:14px;align-items:center;padding:0 16px}
.avg-tbl .hd{height:40px;margin:6px 0 2px;border-radius:14px;background:var(--card2)}
.avg-tbl .rw{flex:1;min-height:0;border-top:1px solid var(--ln);color:var(--mu);animation:avIn .5s cubic-bezier(.2,0,0,1) both;animation-delay:calc(.1s + var(--k) * .06s)}.avg-tbl .rw:first-of-type{border-top:0}
.avg-tbl .cb{width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--sk);opacity:.28;display:block}
.avg-tbl .o,.avg-tbl .ag{display:flex;align-items:center;gap:9px}
.avg-tbl .pr{display:flex;gap:3px;justify-self:end}.avg-tbl .pr i{width:5px;height:15px;border-radius:2px;background:var(--sk);opacity:.14}.avg-tbl .pr i.on{background:var(--acc);opacity:1}
.avg-split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
.avg-lst{display:flex;flex-direction:column;padding:4px 18px}
.avg-lst .li{flex:1;min-height:0;max-height:84px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--ln);color:var(--mu);animation:avIn .5s cubic-bezier(.2,0,0,1) both;animation-delay:calc(.08s + var(--k) * .07s)}.avg-lst .li:first-child{border-top:0}
.avg-lst .cl{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.avg-lst .ring{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--c);background:conic-gradient(var(--c) calc(var(--v) * 360deg),color-mix(in oklab,var(--c) 14%,transparent) 0)}
.avg-lst .ring::before{content:"";position:absolute}.avg-lst .ring{position:relative}.avg-lst .ring .ico{position:relative;z-index:1}
.avg-lst .ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}.avg-lst .ring .ico{z-index:2}
.avg-bar{display:block;position:relative;height:6px;border-radius:3px;background:var(--card2);overflow:hidden;width:100%}.avg-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);border-radius:inherit;animation:avFill 1s cubic-bezier(.2,0,0,1) both}
.avg-chart{display:flex;flex-direction:column}.avg-chart .h{display:flex;align-items:center;justify-content:space-between;height:22px;margin-bottom:10px}
.avg-chart .bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:12px;padding-top:6px}
.avg-chart .bars span{flex:1;height:calc(var(--h) * 100%);display:flex}.avg-chart .bars i{flex:1;border-radius:10px;animation:avGrow .9s cubic-bezier(.2,0,0,1) both;animation-delay:calc(.15s + var(--k) * .06s);transform-origin:bottom}
.avg.dark .avg-chart .bars i{opacity:.85}
.avg-chart .x{display:flex;gap:12px;margin-top:10px}.avg-chart .x span{flex:1;display:flex;justify-content:center}
@keyframes avGrow{from{transform:scaleY(0)}}
.avg-alert{display:flex;align-items:center;gap:16px;flex:none;height:64px;padding:0 18px;border-radius:24px;background:#F9DEDB;color:#B3261E}
.avg-alert .ib{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#C9302C;color:#fff}
.avg-alert .cl{display:flex;flex-direction:column;gap:7px;flex:1}.avg-alert .avg-sk{background:#7A1C17}
.avg-alert .bt{display:flex;align-items:center;height:34px;padding:0 18px;border-radius:17px;background:#C9302C}.avg-alert .bt .avg-sk{background:#fff}
.avg-pulse{width:9px;height:9px;border-radius:50%;background:#C9302C;animation:avPulse 1.6s ease-out infinite;--c:#C9302C}
.avg.dark .avg-alert{background:#3A1C1B;color:#FF8A82}
.avg-map{padding:10px}.avg-map .mp{position:relative;height:100%;border-radius:16px;background:linear-gradient(var(--ln) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,var(--ln) 1px,transparent 1px) 0 0/30px 30px,var(--bg);overflow:hidden}
.avg-map .mp::before{content:"";position:absolute;left:10%;right:18%;top:40%;height:12px;border-radius:6px;background:var(--card2);transform:rotate(-8deg)}
.avg-map .mp::after{content:"";position:absolute;left:50%;top:6%;bottom:8%;width:12px;border-radius:6px;background:var(--card2);transform:rotate(14deg)}
.avg-map .pin{position:absolute;z-index:1;width:11px;height:11px;margin:-5px;border-radius:50%;background:#1E6B4C;box-shadow:0 0 0 4px rgba(30,107,76,.22)}
.avg-map .pin.big{width:16px;height:16px;margin:-8px;background:#C9302C;--c:#C9302C;animation:avPulse 1.6s ease-out infinite}
.avg-r4.s .avg-tile{height:80px}
@media (prefers-reduced-motion:reduce){.avg-body,.avg-tile,.avg-tbl .rw,.avg-lst .li,.avg-bar i,.avg-chart .bars i,.avg-pulse,.avg-map .pin{animation:none}}
html.static .avg-body,html.static .avg-tile,html.static .avg-tbl .rw,html.static .avg-lst .li,html.static .avg-bar i,html.static .avg-chart .bars i,html.static .avg-pulse,html.static .avg-map .pin{animation:none}

/* ===== VIGISAFE mobile (vgm) ===== */
.mb-scr{--vbg:#FFFFFF;--vcard:#F1F1F5;--vln:rgba(22,24,29,.08);--vtx:#16181D;--vmu:#6E727B;--vsk:#16181D}
.mb-scr.dk{--vbg:#0F1013;--vcard:#1A1B20;--vln:rgba(255,255,255,.08);--vtx:#F1F2F4;--vmu:#9A9DA6;--vsk:#F1F2F4}
.mb-scr:has(.vgm){background:var(--vbg)}
.vgm{padding:2px 16px 0!important;gap:12px!important;position:relative}
.vgm .vsk{display:block;flex:none;border-radius:5px;background:var(--vsk);opacity:.16}
.vgm .vh{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 2px}
.vgm .vh .tt{display:flex;flex-direction:column;gap:9px}
.vgm .vav{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,#7FB2E5,#2B5FB4 70%);box-shadow:0 4px 12px rgba(20,24,34,.22)}
.vgm .vcard{border-radius:24px;background:var(--vcard);box-shadow:inset 0 0 0 1px var(--vln)}
.vgm .svc{padding:15px 16px 13px;display:flex;flex-direction:column;gap:13px}
.vgm .svc .r{display:flex;align-items:center;gap:9px}.vgm .svc .dot{width:9px;height:9px;border-radius:50%;background:#1E8A4C;box-shadow:0 0 0 3px rgba(30,138,76,.2)}
.vgm .cv{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(22,24,29,.1);color:var(--vtx);margin-left:auto}
.vgm .btns{display:flex;gap:10px}.vgm .btns span{flex:1;height:42px;border-radius:21px;display:grid;place-items:center;border:1.5px solid}
.vgm .btns .a{color:#C0652B;border-color:#F0C8AE;flex:.8}.vgm .btns .b{color:#C9302C;border-color:#EBB1AC}.vgm .btns .vsk{background:currentColor;opacity:.55}
.vgm .svc hr{border:0;height:1px;background:var(--vln);margin:0}
.vgm .svc .pb{height:7px;border-radius:4px;background:rgba(22,24,29,.1);overflow:hidden}.vgm .svc .pb i{display:block;height:100%;width:76%;border-radius:inherit;background:#1E8A4C;transform-origin:left;animation:mbFill 1.1s cubic-bezier(.16,1,.3,1) .4s both}
.vgm .g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vgm .vt{display:flex;flex-direction:column;gap:9px;padding:13px 14px;border-radius:22px;background:var(--bg);color:var(--fg);height:138px;box-sizing:border-box}
.vgm .vt .t{display:flex;align-items:center;justify-content:space-between}
.vgm .vt .vsk{background:var(--fg);opacity:.3}
.vgm .vt .n{font-family:var(--font-identity);font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em}.vgm .vt .n small{font-size:20px;opacity:.7}
.vgm .vt .sg{display:flex;gap:4px;margin-top:auto}.vgm .vt .sg i{flex:1;height:5px;border-radius:3px;background:var(--fg);opacity:.2}.vgm .vt .sg i.on{opacity:1}
.vgm .vt .ch{display:flex;gap:4px;margin-top:auto}.vgm .vt .ch i{width:19px;height:19px;border-radius:50%;background:var(--fg);opacity:.22}
.vgm .vt .cv{width:24px;height:24px;background:rgba(22,24,29,.1);margin:0}
.vgm .vsr{display:flex;align-items:center;gap:9px;height:44px;padding:0 15px;border-radius:22px;background:var(--vcard);color:var(--vmu);box-shadow:inset 0 0 0 1px var(--vln)}
.vgm .act{display:flex;align-items:center;gap:12px;height:70px;padding:0 12px 0 16px;border-radius:22px;background:var(--bg);color:var(--fg);flex:none}
.vgm .act .cl{display:flex;flex-direction:column;gap:8px;flex:1}.vgm .act .vsk{background:var(--fg);opacity:.32}.vgm .act .cl .vsk:first-child{opacity:.75}
.vgm .act .go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fg);color:#fff}
.vgm .chp{display:flex;gap:8px}.vgm .chp span{display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:17px;background:var(--vcard);color:var(--vmu);box-shadow:inset 0 0 0 1px var(--vln)}.vgm .chp span:first-child{width:36px;padding:0;justify-content:center}
.vgm .jl{display:flex;flex-direction:column;padding:4px 16px;border-radius:24px;background:var(--vcard);box-shadow:inset 0 0 0 1px var(--vln);flex:1;min-height:0;overflow:hidden}
.vgm .je{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--vln)}.vgm .je:first-child{border-top:0}
.vgm .je .cl{display:flex;flex-direction:column;gap:8px;flex:1;padding-top:3px}
.vgm .je .tm{width:34px;padding-top:2px}
.vgm .je .vp{align-self:flex-start;display:flex;align-items:center;height:22px;padding:0 10px;border-radius:11px;background:#FADCDA}.vgm .je .vp .vsk{background:#C9302C;opacity:.7}
.vgm .je .pc{color:var(--vmu);align-self:flex-start}
.vfab{position:absolute;right:16px;bottom:104px;display:flex;gap:8px;z-index:2}
.vfab span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--vbg);color:var(--vtx);box-shadow:0 4px 16px rgba(20,24,34,.22),inset 0 0 0 1px var(--vln);position:relative}
.vfab span.s{background:#111;color:#fff}.vfab span.p{background:#1E8A4C;color:#fff}
.vfab em{position:absolute;right:-2px;top:-3px;width:17px;height:17px;border-radius:50%;background:#C9302C;box-shadow:0 0 0 2px var(--vbg)}
.vgn{flex:none;height:96px;display:flex;align-items:flex-start;justify-content:center;padding:0 22px;box-sizing:border-box;background:linear-gradient(180deg,transparent,var(--vbg) 55%)}
.vgn .pl{width:100%;height:62px;display:flex;align-items:center;justify-content:space-around;padding:0 8px;border-radius:31px;background:var(--vcard);box-shadow:0 8px 24px rgba(20,24,34,.16),inset 0 0 0 1px var(--vln);backdrop-filter:blur(12px)}
.vgn .tb{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:68px;height:50px;justify-content:center;border-radius:25px;color:var(--vtx);font-size:10.5px;font-weight:700}
.vgn .tb.on{background:rgba(22,24,29,.1);color:#1E8A4C}.mb-scr.dk .vgn .tb.on{background:rgba(255,255,255,.1);color:#5FE39A}

.avg-hero{position:relative;width:100%;aspect-ratio:1105/638;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(46,46,46,.05)}.avg-hero>div{position:absolute;left:0;top:0;transform-origin:0 0}
.ph-win.vg figcaption{display:none}

/* ===== VIGISAFE showcase: live screens + text-free visuals ===== */
.vgs{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.vgs .mb-scr{position:absolute;inset:auto;left:0;top:0;transform-origin:0 0;border-radius:0;display:flex;flex-direction:column}
.sc-scr.vgs-host{padding:0;gap:0;background:#fff}
.vgov{position:absolute;z-index:1;left:calc(var(--u) * 252);top:calc(var(--u) * 27);width:calc(var(--u) * 208);height:calc(var(--u) * 399);border-radius:calc(var(--u) * 30);overflow:hidden;background:#fff}
.sc.vg .sc-sk>span:not(.sc-bar):not(.r):not(.tx),.sc.vg .sc-sk b,.sc.vg .sc-sk .tx>span:not(.sc-bar):not(.r),.sc.vg .sc-pill,.sc.vg .sc-fl .tx small,.sc.vg .sc-fl .tx b,.sc.vg .sc-lg .h b,.sc.vg .sc-lg .e time,.sc.vg .sc-lg .e>span,.sc.vg .sc-toast b,.sc.vg .sc-toast small,.sc.vg .sc-tl li button>span,.sc.vg .sc-nr>span:not(.ck),.sc.vg .sc-row .tx b,.sc.vg .sc-row .tx em,.sc.vg .sc-row .tx small,.sc.vg .sc-hub>span,.sc.vg .sc-net .pill,.sc.vg .sc-fst .col b,.sc.vg .sc-fst .col>span,.sc.vg .sc-chip{display:block;height:.62em;min-width:3em;overflow:hidden;border-radius:.4em;background:color-mix(in oklab,currentColor 26%,transparent);-webkit-text-fill-color:transparent;width:fit-content;align-self:flex-start;box-shadow:none}
.sc.vg .sc-row .tx i{display:none}.sc.vg .sc-row .tx>span{display:flex;gap:.5em}
.sc.vg .sc-pill i,.sc.vg .sc-chip .ci{display:none}
.sc.vg .sc-hub>span,.sc.vg .sc-net .pill{margin:0 .4em}
.sc.vg .sc-chip{height:2.6em;min-width:9em}