/* CI Platform — the product's screens, rebuilt.
   Shared by the scroll deck (index.html) and the keynote (keynote/index.html):
   the device frames, the mobile app (mobile-app/src/theme/tokens.ts) and the
   admin panel (admin-panel/src/styles/kit.css, chrome.css, pages/*.css). */
.browser{width:1280px;height:800px;zoom:var(--bz,.6);border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 40px 90px rgba(8,16,60,.45),0 0 0 1px rgba(255,255,255,.2)}
.browser__bar{height:40px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#E9EBF0;
  border-bottom:1px solid #D9DCE3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.browser__dots{display:flex;gap:8px}
.browser__dots i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.browser__dots i:nth-child(2){background:#FEBC2E}.browser__dots i:nth-child(3){background:#28C840}
.browser__url{flex:1;max-width:520px;margin:0 auto;height:26px;border-radius:7px;background:#fff;display:flex;
  align-items:center;justify-content:center;gap:6px;font-size:13px;color:#3E4149;letter-spacing:0;text-transform:none}
.browser__url b{font-weight:400;color:#9AA0AB}
.browser__view{position:relative;height:760px;overflow:hidden}
/* The phone is laid out at its real 393×852 points and zoomed to fit, so every
   size below is the app's own number, not a guess scaled by eye. */
.phone{position:relative;width:393px;height:852px;zoom:var(--pz,.6);border-radius:58px;background:#0B0C10;
  padding:12px;box-shadow:0 40px 80px rgba(8,16,60,.45),inset 0 0 0 2px #2a2d36}
.phone__island{position:absolute;top:23px;left:50%;width:122px;height:35px;margin-left:-61px;
  border-radius:20px;background:#0B0C10;z-index:4}

/* ---- the app, rebuilt: mobile-app/src/theme/tokens.ts ---- */
.phone__screen{--ground:#F5F6FB;--sheet:#FFFFFF;--inset:#F1F2F5;--line:#EDEEF4;--line2:#E3E5EE;
  --ink:#141414;--ink2:#3E4149;--muted:#71757F;--faint:#9AA0AB;
  --brand:#00569F;--brandSoft:#E9F5FF;
  --ok:#1E8E5A;--okBg:#E7F6EE;--okInk:#215F42;--brk:#B0740E;--brkBg:#FDF3E2;
  --out:#C7443C;--outBg:#FDECEA;--away:#654991;--awayBg:#F5F1FF;--off:#6B7280;--offBg:#F1F2F5;
  --doubt:#5B6472;
  position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:var(--sheet);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Noto Sans Georgian','Segoe UI',Roboto,sans-serif;
  color:var(--ink);letter-spacing:0;line-height:1.35;text-transform:none;-webkit-font-smoothing:antialiased}
.phone__screen .m{font-family:Menlo,ui-monospace,'Google Sans Code',monospace;font-variant-numeric:tabular-nums}
.sb{position:relative;z-index:3;height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px 30px 0 44px;
  font-size:16px;font-weight:600;background:var(--sheet)}
.sb__i{display:flex;align-items:center;gap:6px}
.sb__sig{display:flex;align-items:flex-end;gap:1.5px;height:11px}
.sb__sig i{width:3px;background:var(--ink);border-radius:1px}
.sb__sig i:nth-child(1){height:4px}.sb__sig i:nth-child(2){height:6px}.sb__sig i:nth-child(3){height:8.5px}.sb__sig i:nth-child(4){height:11px}
.sb__wifi{width:15px;height:11px;position:relative;overflow:hidden}
.sb__wifi::before{content:'';position:absolute;left:50%;top:0;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--ink) 0 2.5px,transparent 2.6px 5px,var(--ink) 5.1px 7.5px,transparent 7.6px 10px)}
.sb__bat{width:25px;height:12px;border:1.3px solid rgba(20,20,20,.4);border-radius:3.5px;padding:1.4px;position:relative}
.sb__bat i{display:block;height:100%;width:78%;background:var(--ink);border-radius:1.6px}
.hd{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--sheet)}
.hd b{font-size:18px;font-weight:600}
.hd i{width:32px;height:32px;border-radius:10px;background:var(--inset);display:grid;place-items:center;
  font-style:normal;color:var(--muted);font-size:17px}
.bd{background:var(--ground);min-height:100%;padding:14px 16px 24px;display:flex;flex-direction:column;gap:12px;
  transition:transform .9s var(--ease)}
.fn{margin:-4px 0 0;padding:0 4px;font-size:11.5px;line-height:18px;color:var(--faint)}
.idn{padding:0 4px;display:grid;gap:2px}
.idn b{font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.34px}
.idn span{font-size:12.5px;line-height:17px;color:var(--muted)}
.cd{background:var(--sheet);border-radius:18px;padding:15px 16px;box-shadow:0 6px 16px rgba(20,26,40,.1)}
.cd--on{background:var(--okBg)}
.cd h4{margin:0;font-size:15px;line-height:21px;font-weight:600;letter-spacing:0}
.cd__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lbl{margin-top:12px;font-size:12px;line-height:18px;color:var(--faint)}
.ch{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;font-size:13px;
  line-height:18px;font-weight:600;margin-top:8px}
.cd__head .ch{margin-top:0}
.ch i{width:8px;height:8px;border-radius:50%;background:currentColor}
.ch--ok{background:var(--okBg);color:var(--ok)}.ch--brk{background:var(--brkBg);color:var(--brk)}
.ch--out{background:var(--outBg);color:var(--out)}.ch--away{background:var(--awayBg);color:var(--away)}
.ch--off{background:var(--offBg);color:var(--off)}
.big{display:flex;align-items:baseline;gap:9px;margin-top:10px}
.big b{font-size:44px;line-height:44px;font-weight:700;letter-spacing:-1.76px}
.big span{font-size:14px;color:var(--muted)}
.rws{margin-top:14px;border-top:1px solid var(--line);padding-top:4px}
.rw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.rw:last-child{border-bottom:0}
.rw span{font-size:13px;color:var(--muted)}
.rw b{font-size:14px;font-weight:600}
.rw b.nil{color:var(--faint);font-weight:600}
.rw b.brk{color:var(--brk)}.rw b.out{color:var(--out)}
.bt{min-height:44px;border-radius:999px;display:grid;place-items:center;padding:12px 16px;margin-top:13px;
  font-size:15px;font-weight:600}
.bt--ghost{background:var(--ground);color:var(--ink2)}
.bt--primary{background:var(--brand);color:#fff}
.bt--sos{background:var(--out);color:#fff;min-height:60px;font-size:17px;letter-spacing:1.02px}
.nt{margin-top:10px;font-size:12px;line-height:18px;color:var(--muted)}
.cn{display:flex;align-items:center;gap:9px;background:var(--sheet);border-radius:999px;padding:10px 15px;
  font-size:12.5px;line-height:18px;color:var(--ink2)}
.cn i{width:8px;height:8px;border-radius:50%;flex:none}
.cn--relaxed{border-radius:14px;align-items:flex-start}
.cn--relaxed i{margin-top:5px}
/* a value that just changed flashes once, so the eye finds it */
.is-new{animation:flash 1.6s var(--ease)}
@keyframes flash{0%,35%{background:#FFF1B8;box-shadow:0 0 0 6px #FFF1B8}100%{background:transparent;box-shadow:0 0 0 6px transparent}}

/* the one element on a screen the audience should look at */
.is-focus{position:relative;z-index:4;outline:4px solid var(--focus)!important;outline-offset:4px;
  box-shadow:0 0 0 10px var(--focus-halo),0 0 0 100vmax rgba(20,26,40,.2)!important;animation:focusIn .8s var(--expo) both}
@keyframes focusIn{from{outline-color:transparent;box-shadow:0 0 0 40px transparent,0 0 0 100vmax transparent}}

/* scrolling: a screen that scrolls to the thing that changed */
[data-scroll]{position:relative;transition:transform .9s var(--ease)}
.scr{position:relative;height:calc(100% - 111px);overflow:hidden;background:var(--ground)}
.sb--dark{background:transparent;color:#fff;position:absolute;inset:0 0 auto;z-index:5}
.sb--dark .sb__sig i,.sb--dark .sb__bat i{background:#fff}
.sb--dark .sb__bat{border-color:rgba(255,255,255,.5)}
.sb--dark .sb__wifi::before{background:radial-gradient(circle at 50% 50%,#fff 0 2.5px,transparent 2.6px 5px,#fff 5.1px 7.5px,transparent 7.6px 10px)}

/* WorkerHomeScreen: the armed watch */
.el{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.el b{font-size:30px;line-height:34px;font-weight:700;letter-spacing:-.9px;color:var(--ok)}
.el span{font-size:12.5px;line-height:18px;color:var(--okInk)}
.nt--ok{color:var(--okInk)}
.nt--faint{color:var(--faint);font-size:11.5px;margin-top:8px}
.bt--stop{background:var(--okBg);color:var(--ok)}
.bt--safe{background:var(--ok);color:#fff}
/* a bottom sheet (SheetBody) */
.scrim{position:absolute;inset:0;z-index:6;background:rgba(11,15,22,.55);display:flex;align-items:flex-end}
.sheet{width:100%;background:var(--sheet);border-radius:24px 24px 0 0;padding:22px 20px 40px;box-shadow:0 -4px 22px rgba(20,26,40,.14)}
.sheet h3{margin:0;font-size:19px;line-height:24px;font-weight:700;letter-spacing:-.38px}
.sheet>p{margin-top:9px;font-size:13px;line-height:21px;color:var(--muted)}
.wb{display:flex;gap:10px;border-radius:14px;padding:12px 13px;margin-top:12px}
.wb b{font-size:12.5px;line-height:18px;font-weight:600;color:var(--ink)}
.wb--ok{background:var(--okBg)}
.wb__chk{flex:none;width:14px;height:8px;margin:4px 2px 0;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

/* LoginScreen */
.auth{padding:44px 24px 24px;display:flex;flex-direction:column;height:calc(100% - 54px - 291px)}
.brand{width:52px;height:52px;border-radius:16px;background:var(--brand);display:grid;place-items:center;margin-bottom:26px}
.brand i{width:26px;height:26px;border:5.5px solid #fff;border-right:0;border-radius:4px 0 0 4px}
.auth h3,.cns h3{margin:0;font-size:25px;line-height:30px;font-weight:700;letter-spacing:-.75px}
.auth__sub{margin-top:8px;font-size:13.5px;line-height:21px;color:var(--muted)}
.fld{display:block;margin-top:18px}
.fld span{display:block;font-size:12px;line-height:18px;color:var(--muted);margin-bottom:6px}
.fld__in{display:block;font-size:16px;line-height:22px;font-weight:400;letter-spacing:1.9px;background:var(--ground);border-radius:14px;
  border:2px solid var(--brand);padding:12px 14px}
.auth__go{margin-top:auto}
.kb{position:absolute;inset:auto 0 0;height:291px;background:#D1D4DA;padding:8px 6px 40px;display:grid;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:7px}
.kb__k{display:grid;place-content:center;justify-items:center;background:#fff;border-radius:6px;font-style:normal;
  box-shadow:0 1px 0 rgba(0,0,0,.3)}
.kb__k b{font-size:25px;font-weight:400;line-height:26px}
.kb__k small{font-size:9.5px;letter-spacing:2px;font-weight:600}
.kb__k--nil{background:transparent;box-shadow:none}
.kb__k--del b{font-size:22px}

/* ConsentScreen */
.cns{padding:24px 20px}
.cns h4{margin:20px 0 0;font-size:15px;line-height:21px;font-weight:600}
.cns ul{margin-top:10px;display:grid;gap:8px}
.cns li{display:flex;gap:11px;background:var(--ground);border-radius:14px;padding:12px 13px;font-size:14px;line-height:21px;color:var(--ink2)}
.cns li i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-top:7px}

/* the man-down alarm */
.al{position:absolute;inset:0;background:#0B0F16;color:#fff;display:flex;flex-direction:column;align-items:center;
  padding:118px 24px 40px;text-align:center}
.al h3{margin:0;font-size:26px;line-height:31px;font-weight:700;letter-spacing:-.78px}
.al p{margin-top:12px;max-width:300px;font-size:14px;line-height:22px;color:#AEB6C2}
.al__grow{flex:1}
.ring{position:relative;width:186px;height:186px;margin:16px 0 10px;border-radius:50%;
  background:conic-gradient(#C7443C calc(var(--f) * 360deg),#1B2431 0);display:grid;place-items:center}
.ring::before{content:'';position:absolute;inset:10px;border-radius:50%;background:#0B0F16}
.ring b{position:relative;font-size:62px;line-height:66px;font-weight:700;letter-spacing:-2.48px}
.al__bt{align-self:stretch;background:#fff;color:#0B0F16}
.al__bt--2{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #767B87}
.al__badge{width:62px;height:62px;border-radius:50%;background:rgba(30,142,90,.18);display:grid;place-items:center;margin:40px 0 18px}
.al__badge i{width:22px;height:12px;border-left:3px solid #57C68C;border-bottom:3px solid #57C68C;transform:rotate(-45deg);margin-top:-6px}

/* an iOS lock screen */
.lk{position:absolute;inset:0;background:radial-gradient(120% 70% at 30% 10%,#34466f 0,#141a2c 55%,#07090f 100%);
  color:#fff;padding:80px 12px 0;text-align:center}
.lk__date{font-size:20px;font-weight:600;opacity:.92}
.lk__time{font-size:92px;line-height:1;font-weight:700;letter-spacing:-2px;margin-top:2px}
.nf{margin-top:230px;display:flex;gap:10px;text-align:left;background:rgba(245,245,247,.82);color:#141414;border-radius:22px;padding:12px 14px}
.nf__ic{flex:none;width:38px;height:38px;border-radius:9px;background:#fff url(../brand/app-icon.png) center/cover}
.nf__ic i{display:none}
.nf__tx{flex:1;min-width:0}
.nf__app{display:flex;justify-content:space-between;font-size:13px;color:#6b6b70;margin-bottom:1px}
.nf__tx b{display:block;font-size:15px;line-height:20px;font-weight:600}
.nf__tx p{font-size:15px;line-height:20px}

/* SettingsScreen + a native alert */
.st{background:#0B0C10;height:calc(100% - 54px);padding-top:10px}
.st__hd,.st__bd{background:var(--ground)}
.st__hd{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--sheet);border-bottom:1px solid var(--line);
  border-radius:12px 12px 0 0}
.st__hd b{font-size:19px;line-height:24px;font-weight:700;letter-spacing:-.38px}
.st__hd span{padding:8px 16px;background:var(--ground);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink2)}
.st__bd{height:100%;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.st__row{display:flex;align-items:center;justify-content:space-between;background:var(--sheet);border-radius:14px;padding:14px 15px;
  box-shadow:0 6px 16px rgba(20,26,40,.1)}
.st__row b{font-size:14px;font-weight:500}
.seg{display:inline-flex;gap:3px;padding:3px;background:var(--ground);border-radius:999px}
.seg i{font-style:normal;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--muted)}
.seg i.on{background:var(--brand);color:#fff;font-weight:600}
.st__out{margin-top:12px;text-align:center;font-size:15px;font-weight:600;color:var(--out);padding:14px 0}
.ios-scrim{position:absolute;inset:0;z-index:7;background:rgba(0,0,0,.22);display:grid;place-items:center}
.ios-alert{width:270px;border-radius:14px;overflow:hidden;background:rgba(242,242,247,.94);text-align:center}
.ios-alert__tx{padding:19px 16px 18px}
.ios-alert__tx b{display:block;font-size:17px;line-height:22px;font-weight:600}
.ios-alert__tx p{margin-top:3px;font-size:13px;line-height:17px}
.ios-alert__bts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(60,60,67,.29)}
.ios-alert__bts span{padding:11px 4px;font-size:17px;line-height:22px;color:#007AFF}
.ios-alert__bts span+span{border-left:1px solid rgba(60,60,67,.29)}
.ios-alert__bts .del{color:#FF3B30;font-weight:600;font-size:15.5px}

/* SupervisorScreen › Team (LiveTableGrid) and the worker detail sheet */
.tg{background:var(--ground);padding:14px 16px 24px;display:flex;flex-direction:column;gap:9px;min-height:100%}
.tg__stat{display:flex;gap:12px}
.tg__stat div{flex:1}
.tg__stat span{display:block;font-size:12px;line-height:18px;color:var(--faint)}
.tg__stat b{display:block;margin-top:2px;font-size:30px;line-height:34px;font-weight:700;letter-spacing:-.9px}
.tg__stat b.ok{color:var(--ok)}.tg__stat b.brk{color:var(--brk)}
.tg__grp{display:flex;align-items:center;justify-content:space-between;padding:0 2px;margin-top:4px}
.tg__grp .ch{margin-top:0}
.tg__grp em{font-style:normal;font-size:11.5px;color:var(--muted)}
.tr{display:flex;align-items:center;gap:11px;background:var(--sheet);border-radius:14px;padding:11px 13px;min-height:58px}
.tr--me{background:var(--brandSoft)}
.av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ground);display:grid;place-items:center;font-style:normal;
  font-size:12px;font-weight:600;color:var(--ink2)}
.av--40{width:40px;height:40px;font-size:13px}
.tr__m{flex:1;min-width:0}
.tr__m p{display:flex;align-items:center;gap:6px}
.tr__m b{font-size:13.5px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr__m small{display:block;margin-top:2px;font-size:11.5px;line-height:16px;color:var(--faint)}
.dc{display:inline-block;margin-top:5px;padding:3px 9px;border-radius:999px;background:var(--inset);color:var(--doubt);
  font-style:normal;font-size:10.5px;line-height:14px;font-weight:600}
.tr__v{text-align:right;max-width:96px}
.tr__v b{display:block;font-size:13px;line-height:18px;font-weight:600}
.tr__v small{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--faint)}
.scrim--sheet{z-index:6}
.sheet--detail{padding:12px 20px 34px;max-height:82%}
.grip{display:block;width:38px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 16px}
.dt__hd{display:flex;gap:11px;align-items:center}
.dt__hd b{display:block;font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.38px}
.dt__hd small{display:block;margin-top:2px;font-size:12px;line-height:17px;color:var(--muted)}
.dt__st{display:flex;align-items:center;gap:10px;margin-top:16px}
.dt__st .sw{width:16px;height:16px}
.dt__st .ch{margin-top:0}
.dt__tx{margin-top:9px;font-size:13px;line-height:20px;color:var(--muted)}
.sheet--detail .rws{margin-top:16px}
.sheet--detail .rw{padding:9px 0}
.sheet--detail .rw b{font-size:14px}
.rw b.mut{color:var(--muted)}
.wc--pm{border:1px dashed var(--line2)}

/* supervisor: SupervisorScreen + SupervisorFilter + VerticalSchematic */
.sh{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--sheet);
  border-bottom:1px solid var(--line)}
.sh b{font-size:19px;line-height:24px;font-weight:700;letter-spacing:-.38px}
.cp{display:flex;align-items:center;gap:9px;border-radius:999px;padding:10px 15px;background:var(--ground);
  font-size:12.5px;line-height:17px;color:var(--ink2)}
.cp i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.fl{position:relative;z-index:3;padding:10px 16px 8px;background:var(--ground)}
.fl__t{display:inline-flex;gap:3px;padding:3px;background:var(--inset);border-radius:999px;white-space:nowrap}
.sg{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;font-size:12.5px;
  line-height:17px;color:var(--muted)}
.sg i{width:8px;height:8px;border-radius:50%}
.sg em{font-style:normal;font-size:11px;font-weight:600;color:var(--ink2)}
.sg--on{background:var(--brand);color:#fff;font-weight:600}.sg--on em{color:#fff}
.sc{background:var(--ground);height:100%;padding:14px 16px 24px;display:flex;flex-direction:column;gap:10px}
.bl{background:var(--sheet);border-radius:18px;padding:13px 13px 11px;box-shadow:0 6px 16px rgba(20,26,40,.1)}
.bl__roof{height:4px;border-radius:4px;background:var(--line2);margin:0 8px 7px 26px}
.bn{display:flex;align-items:stretch;gap:8px;margin-bottom:5px}
.bn__n{width:20px;text-align:right;align-self:center;font-size:10.5px;line-height:14px;color:var(--faint);flex:none}
.bn__n.on{color:var(--ink);font-weight:700}
.bn__d{flex:1;min-width:0;min-height:30px;border-radius:999px;background:var(--ground);display:flex;flex-wrap:wrap;
  align-items:center;gap:5px;padding:4px 8px;transition:background .4s}
.bn__d.on{background:var(--brandSoft)}
.wc{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 8px;border-radius:999px;background:var(--sheet);
  border:1px solid transparent;box-shadow:0 1px 2px rgba(20,26,40,.07);font-size:11px;line-height:16px;font-weight:600}
.wc--me{background:var(--brandSoft)}
.wc--dim{color:var(--muted)}
.gd{display:flex;align-items:center;gap:9px;margin:8px 0 0 26px}
.gd i{flex:1;border-top:1px dashed var(--line2)}
.gd span{font-size:9.5px;letter-spacing:.38px;color:var(--faint)}
.os__l{font-size:11px;color:var(--muted);margin:1px 0 7px 2px}
.os{background:var(--sheet);border-radius:18px;padding:11px 12px;box-shadow:0 6px 16px rgba(20,26,40,.1);
  display:flex;flex-wrap:wrap;gap:5px;min-height:44px;align-items:center}
.os__all{width:100%;text-align:center;font-size:11.5px;line-height:18px;color:var(--ok)}
.lg{background:var(--sheet);border-radius:18px;padding:12px 13px;box-shadow:0 6px 16px rgba(20,26,40,.1);
  display:flex;flex-wrap:wrap;gap:8px 14px}
.lg span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}

/* PresenceSwatch.tsx: presence is the base, doubt is a second tone, and every
   state also has a shape so colour never carries a meaning alone */
.sw{position:relative;width:10px;height:10px;border-radius:50%;flex:none;overflow:hidden}
.lg .sw{width:11px;height:11px}
.sw--ok{background:var(--ok)}
.sw--brk{background:var(--brk)}
.sw--brk::before,.sw--brk::after{content:'';position:absolute;top:28%;width:1.6px;height:44%;background:#fff}
.sw--brk::before{left:33%}.sw--brk::after{right:33%}
.sw--out{background:var(--out)}
.sw--out::after{content:'';position:absolute;left:30%;top:32%;width:30%;height:30%;border-top:1.6px solid #fff;
  border-right:1.6px solid #fff;transform:rotate(45deg)}
.sw--away{background:transparent;box-shadow:inset 0 0 0 3px var(--away)}
.sw--net{background:linear-gradient(90deg,var(--ok) 50%,var(--doubt) 50%)}
.sw--net::after{content:'';position:absolute;left:50%;top:0;right:0;bottom:0;
  background:repeating-linear-gradient(45deg,transparent 0 1.6px,rgba(255,255,255,.75) 1.6px 2.6px)}
.sw--silent{background:linear-gradient(90deg,var(--ok) 50%,var(--doubt) 50%)}


/* ---- the admin panel, rebuilt: admin-panel/src/styles/kit.css, chrome.css ---- */
.ad{--page:#E7E9EF;--sheet:#FFFFFF;--ground:#F5F6FB;--line:#EDEEF4;--line2:#E3E5EE;--ink:#141414;--ink2:#3E4149;--muted:#71757F;--faint:#6E727C;
  --brand:#00569F;--brandSoft:#E9F5FF;--brandMid:#B4D5F8;
  --ok:#1B7E50;--okBg:#E7F6EE;--brk:#97640C;--brkBg:#FDF3E2;--out:#C7443C;--outBg:#FDECEA;--away:#654991;--awayBg:#F5F1FF;--off:#6B7280;--offBg:#F1F2F5;
  --lift:0 1px 2px rgba(20,22,30,.04),0 8px 22px -12px rgba(20,22,30,.18);
  position:relative;display:grid;grid-template-columns:250px 1fr;height:100%;background:var(--sheet);color:var(--ink);
  font-family:'Google Sans','Noto Sans Georgian',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.5;
  letter-spacing:0;text-transform:none;text-align:left}
.ad .m{font-family:'Google Sans Code',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ad h1,.ad h2,.ad h3{letter-spacing:-.015em;line-height:1.25;text-wrap:initial}
.ad-side{padding:24px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.ad-brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;font-size:18px;font-weight:700;letter-spacing:-.03em}
.ad-brand i{width:32px;height:32px;border-radius:10px;background:var(--brand);display:grid;place-items:center}
.ad-brand img{width:19px;height:19px;filter:brightness(0) invert(1)}
.ad-grp{padding:14px 10px 6px;font-size:10.5px;font-weight:500;color:var(--faint);letter-spacing:.06em}
.ad-nav{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:12px;font-size:13.5px;color:var(--ink2)}
.ad-nav svg{width:20px;height:20px;fill:none;stroke:var(--faint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ad-nav.on{color:var(--ink);font-weight:600}
.ad-nav.on svg{stroke:var(--brand)}
.ad-nav--out{color:var(--out)}
.ad-foot{margin-top:auto}
.ad-main{position:relative;background:var(--ground);overflow:hidden;display:flex;flex-direction:column}
.ad-top{position:relative;z-index:3;display:flex;align-items:center;gap:14px;padding:22px 26px 22px;background:var(--ground)}
.ad-top h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.025em;margin-right:6px}
.ad-scope{display:inline-flex;align-items:center;gap:8px;background:var(--sheet);border-radius:999px;padding:8px 14px 8px 16px}
.ad-scope em{font-style:normal;font-size:11px;color:var(--faint)}
.ad-scope b{font-size:13px;font-weight:600}
.car{width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);margin:-3px 2px 0 4px}
.ad-gap{flex:1}
.ad-lang{display:inline-flex;gap:2px;padding:4px;background:var(--sheet);border-radius:999px}
.ad-lang i{font-style:normal;padding:5px 11px;border-radius:999px;font-size:12.5px;color:var(--muted)}
.ad-lang i.on{background:var(--ink);color:#fff}
.ad-ico{width:42px;height:42px;border-radius:50%;background:var(--sheet);display:grid;place-items:center;color:var(--ink2);font-size:17px}
.ad-user{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line2)}
.ad-user>i{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600}
.ad-user b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.ad-user small{display:block;font-size:11.5px;color:var(--faint)}
.ad-body{padding:0 26px 30px}
.phd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.a-btn{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:500;background:var(--sheet);color:var(--ink2);white-space:nowrap}
.a-btn--pri{background:var(--brand);color:#fff}
.a-btn--out{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}
.a-btn--soft{background:var(--brandSoft);color:var(--brand);font-weight:600}
.a-btn--danger{background:var(--outBg);color:var(--out)}
.a-btn--sm{padding:7px 13px;font-size:12.5px}
.a-btn--r{margin-left:auto}
.a-btn--foot{background:var(--ground);padding:8px 15px;font-size:12.5px}
.a-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;white-space:nowrap}
.a-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.a-chip--s{padding:4px 10px;font-size:11px}
.a-chip--brand{background:var(--brandSoft);color:var(--brand)}.a-chip--brand i{display:none}
.a-chip--off{background:var(--offBg);color:var(--off);padding:4px 9px;font-size:11px}.a-chip--off i{display:none}
.c-ok{background:var(--okBg);color:var(--ok)}.c-brk{background:var(--brkBg);color:var(--brk)}.c-out{background:var(--outBg);color:var(--out)}
.c-away{background:var(--awayBg);color:var(--away)}.c-off{background:var(--offBg);color:var(--off)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stats--3{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--sheet);border-radius:20px;padding:16px 18px}
.stat .k{display:block;font-size:11.5px;color:var(--faint)}
.stat .n{display:block;font-size:23px;font-weight:700;letter-spacing:-.03em}
.stat .n small{font-size:.6em;color:var(--muted);font-weight:500}
.stat .n.ok{color:var(--ok)}.stat .n.out{color:var(--out)}
.tile{display:block;width:36px;height:36px;border-radius:11px;background:var(--brandSoft);margin-bottom:11px}
.tile--ok{background:var(--okBg)}.tile--out{background:var(--outBg)}
.panel{background:var(--sheet);border-radius:20px;margin-top:16px;overflow:hidden}
.panel:first-child{margin-top:0}
.phead{display:flex;align-items:center;gap:14px;padding:18px 20px 14px}
.phead h2{margin:0;font-size:17px;font-weight:600}
.phead .meta,.phead .a-sub{font-size:11.5px;color:var(--faint)}
.phead .a-sub{font-size:12px;color:var(--muted);margin-top:2px}
.phead p.meta{font-size:11.5px;margin-top:2px}
.phead .seg{margin-left:auto}
.ad .seg{display:inline-flex;gap:3px;padding:4px;background:var(--ground);border-radius:999px}
.ad .seg i{font-style:normal;padding:7px 16px;border-radius:999px;font-size:13px;color:var(--muted)}
.ad .seg i.on{background:var(--ink);color:#fff;font-weight:500}
.filters{display:flex;flex-wrap:wrap;gap:7px;padding:0 20px 14px}
.fchip{display:inline-flex;gap:6px;align-items:center;background:var(--ground);border-radius:999px;padding:7px 13px;font-size:12.5px;color:var(--muted)}
.fchip b{color:var(--ink);font-weight:600}
.fchip em{font-style:normal;font-size:11px;opacity:.75}
.fchip.on{background:var(--brandSoft);color:var(--brand);font-weight:600}
.fnote{padding:0 20px 14px;font-size:11.5px;color:var(--faint)}
.fnote b{color:var(--ink2)}
table.t{width:100%;border-collapse:collapse}
.t th{text-align:left;font-size:10.5px;font-weight:500;color:var(--faint);letter-spacing:.05em;padding:10px 14px;border-bottom:1px solid var(--line)}
.t th:first-child,.t td:first-child{padding-left:20px}.t th:last-child,.t td:last-child{padding-right:20px}
.t td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}
.t .num{text-align:right;font-family:'Google Sans Code',ui-monospace,monospace;font-size:13px}
.t td.brk{color:var(--brk)}.t td.out{color:var(--out)}
.t tr.me td{background:#FFF8D6}
.t--rep td:first-child{white-space:nowrap}
.fl-n{font-size:14.5px;font-weight:600;color:var(--ink);margin-right:8px}
.act{text-align:right;white-space:nowrap}
.tbtn{display:inline-block;font-style:normal;background:var(--ground);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink2);margin-left:6px}
.tbtn--del{color:var(--out)}
.who{display:flex;align-items:center;gap:11px}
.who .av{width:36px;height:36px}
.nm{font-size:13.5px;font-weight:600;color:var(--ink)}
.mt{display:block;font-size:11.5px;color:var(--faint)}
.pn{font-size:12.5px;letter-spacing:.04em}
.tfoot{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:12px;color:var(--faint)}
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.sdot--ok{background:var(--ok)}.sdot--brk{background:var(--brk)}.sdot--out{background:var(--out)}
.useat{display:grid;gap:2px;background:var(--sheet);border-radius:20px;padding:11px 16px 13px;min-width:180px}
.useat em{font-style:normal;font-size:11px;color:var(--faint)}
.useat b{font-size:13px;font-weight:600}
.useat>i{display:block;height:8px;border-radius:8px;background:var(--ground);overflow:hidden}
.useat>i i{display:block;height:100%;background:var(--brand)}
/* modal */
.a-scrim{position:absolute;inset:0;z-index:5;background:rgba(16,18,26,.42);display:grid;place-items:center}
.a-modal{position:relative;width:560px;max-height:86%;background:var(--sheet);border-radius:26px;overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(16,18,26,.5);display:flex;flex-direction:column}
.a-modal--wide{width:900px}
.a-modal--user{width:680px}
.a-mh{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 14px;border-bottom:1px solid var(--line);background:var(--sheet)}
.a-mh h2{margin:0;font-size:17px;font-weight:600}
.a-mh .a-sub{font-size:12px;color:var(--faint);margin-top:2px}
.a-x{font-size:22px;line-height:1;color:var(--muted)}
.a-mb{flex:1;min-height:0;overflow:hidden;padding:14px 24px 4px}
.a-mb[data-scroll]{overflow:visible}
.a-modal .a-mb{max-height:100%}
.a-mf{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:18px 24px 22px;border-top:1px solid var(--line);background:var(--sheet);position:relative;z-index:2}
.a-mf .a-sub{font-size:11.5px;color:var(--faint)}
.field{margin-bottom:15px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field label small{font-size:11.5px;color:var(--faint)}
.in{display:block;font-size:13.5px;font-weight:400;padding:11px 15px;border-radius:14px;background:var(--ground);color:var(--ink)}
.in--sel{position:relative}
.in--sel::after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg)}
.in--focus{box-shadow:inset 0 0 0 2px var(--brand)}
.in--ph{color:var(--faint)}
.field .a-chip{margin-top:8px}
.hint{font-size:11.5px;color:var(--faint);margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chkempty{display:block;border:1px dashed var(--line2);border-radius:14px;padding:11px 14px;font-size:12px;font-weight:400;color:var(--muted)}
.ugrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--ground);border-radius:14px;padding:8px}
.ug{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px}
.cb{flex:none;width:17px;height:17px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--line2);background:#fff;position:relative}
.cb.on{background:var(--brand);box-shadow:none}
.cb.on::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.wk{background:var(--ground);border-radius:14px;padding:14px 16px;margin-bottom:15px}
.wk__h{display:flex;justify-content:space-between;align-items:center}
.wk__h b{font-size:13px;font-weight:600}
.wk__r{display:grid;grid-template-columns:6.6rem 7rem 236px 236px;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;color:var(--ink2)}
.wk__r--h{font-size:10px;color:var(--faint);margin-top:8px}
.wk__c{display:flex;align-items:center;gap:7px}
.tin{display:inline-block;font-style:normal;background:#fff;border-radius:9px;padding:6px 10px;font-size:12px;width:80px;text-align:center}
.geo__l{display:flex!important;justify-content:space-between}
.geo__s{display:flex;gap:8px;margin-bottom:8px}
.geo__s .in{flex:1}
.mapbox{position:relative;height:300px;border-radius:14px;overflow:hidden;background:var(--ground);font-family:Helvetica,Arial,sans-serif}
.sat{position:absolute;inset:0;width:100%;height:100%}
.lf-layers{position:absolute;top:10px;left:10px;display:flex;gap:2px;padding:3px;background:#fff;border-radius:999px;box-shadow:var(--lift);font-size:12px}
.lf-layers i{font-style:normal;padding:4px 10px;border-radius:999px;color:var(--muted)}
.lf-layers i.on{background:var(--ink);color:#fff}
.lf-zoom{position:absolute;top:46px;left:10px;display:grid;background:#fff;border:2px solid rgba(0,0,0,.2);border-radius:4px}
.lf-zoom i{font-style:normal;width:30px;height:30px;display:grid;place-items:center;font-size:18px;font-weight:700;color:#222}
.lf-zoom i+i{border-top:1px solid #ccc}
.lf-draw{position:absolute;top:10px;right:10px;display:grid;background:#fff;border:1px solid var(--line)}
.lf-draw i{width:30px;height:30px;display:block;position:relative}
.lf-draw i+i{border-top:1px solid var(--line)}
.lf-draw i.on::after{content:'';position:absolute;inset:8px;border:2px solid #444;clip-path:polygon(50% 0,100% 40%,80% 100%,20% 100%,0 40%)}
.lf-draw i:nth-child(2)::after{content:'';position:absolute;inset:9px;border-bottom:2px solid #444;transform:rotate(-45deg)}
.lf-draw i:nth-child(3)::after{content:'';position:absolute;left:10px;top:9px;width:10px;height:12px;border:2px solid #444;border-top-width:3px}
.lf-acts{position:absolute;top:10px;right:42px;display:flex;background:#919187;color:#fff;font-size:12px;height:30px}
.lf-acts i{font-style:normal;padding:0 10px;display:grid;place-items:center}
.lf-acts i+i{border-left:1px solid #aaa}
.lf-tip{position:absolute;left:52%;top:188px;background:rgba(0,0,0,.5);color:#fff;font-size:12px;padding:4px 8px;border-radius:4px}
.lf-attr{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.8);color:var(--muted);font-size:10.5px;padding:1px 6px}
.a-notice{margin-top:10px;background:var(--brkBg);border-radius:14px;padding:12px 16px;font-size:13px;color:var(--ink2)}
.a-notice b{color:var(--brk)}
.a-empty{padding:30px 20px 34px;text-align:center;font-size:13.5px;color:var(--muted)}
.a-info{margin:0 20px 14px;background:var(--brandSoft);border-radius:14px;padding:11px 15px;font-size:13px;color:var(--brand)}
.aic{background:var(--sheet);margin:0 -26px -30px;display:flex;flex-direction:column;height:calc(760px - 86px)}
.aic-h{display:flex;align-items:center;gap:14px;padding:15px 24px;border-bottom:1px solid var(--line);flex:none}
.aic-back{width:34px;height:34px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;
  font-style:normal;font-size:20px;color:var(--muted);flex:none}
.aic-t{flex:1;min-width:0}
.aic-t b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aic-t small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.aic-model{background:var(--ground);border-radius:999px;padding:6px 12px;font-size:11px;color:var(--muted);flex:none}
.aic-scroll{flex:1;min-height:0;overflow:hidden;padding:24px}
.aic-col{max-width:900px;margin:0 auto}
.aic-col--empty{padding-top:40px}
.aic-turn{margin-bottom:26px}
.aic-spk{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11.5px;font-weight:600;color:var(--muted)}
.aic-turn--me .aic-spk{justify-content:flex-end}
.aic-a,.aic-me{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;flex:none;font-size:9px}
.aic-a{background:var(--brandSoft);color:var(--brand)}
.aic-a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.aic-me{background:var(--ground);color:var(--ink2)}
.aic-bub{margin-left:auto;max-width:76%;width:fit-content;background:#F5F6FB;border-radius:18px 18px 5px 18px;padding:11px 16px;font-size:13.5px}
.aic-ans{background:#F5F6FB;border-left:2px solid var(--brandMid);border-radius:0 14px 14px 0;padding:15px 18px;font-size:13.5px;line-height:1.7;color:var(--ink2)}
.aic-ansh{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
.aic-list{list-style:disc;padding-left:20px;margin:6px 0 10px}
.aic-list li{padding:1px 0}
.aic-mdt{background:#fff;border-radius:14px;margin-top:12px;overflow:hidden}
.aic-mdt-h{display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line)}
.aic-mdt-h i{font-style:normal;color:var(--muted);margin-right:auto}
.aic-mdt-h span{font-size:12px;font-weight:600;color:var(--brand);padding:4px 10px;border-radius:999px;background:var(--brandSoft)}
.aic-mdt table{width:100%;border-collapse:collapse}
.aic-mdt th{text-align:left;font-size:10.5px;font-weight:500;color:var(--faint);letter-spacing:.05em;padding:8px 14px;border-bottom:1px solid var(--line)}
.aic-mdt td{font-size:12.5px;padding:7px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.aic-mdt td.n{font-family:'Google Sans Code',monospace}
.aic-gn{font-size:11px;color:var(--muted);padding:8px 14px}
.aic-cite{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.aic-cite i{font-style:normal;background:var(--brandSoft);color:var(--brand);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}
.aic-act{display:flex;gap:10px;margin-top:10px}
.aic-copy{font-size:11.5px;color:var(--muted)}
.aic-stepbtn{font-size:11.5px;font-weight:600;background:var(--ground);border-radius:999px;padding:4px 12px;color:var(--ink2)}
.aic-steps{margin:10px 0 0;padding-left:14px;border-left:2px solid var(--line2);display:grid;gap:6px;font-size:12px;color:var(--ink2)}
.aic-steps b{font-family:'Google Sans Code',monospace;font-weight:500;color:var(--muted);margin-right:8px}
.aic-empty{font-size:13.5px;color:var(--muted);max-width:72ch}
.aic-sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.aic-sugg span{padding:7px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:12.5px;color:var(--ink2)}
.aic-disc{margin-top:22px;font-size:12px;color:var(--faint);max-width:80ch}
.aic-f{flex:none;border-top:1px solid var(--line);padding:14px 24px}
.aic-comp{max-width:900px;margin:0 auto;display:flex;align-items:flex-end;gap:10px}
.aic-comp .in{flex:1;min-height:46px;padding:12px 16px}

/* SafetyScreen */
.sf-alert{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:15px 20px 15px 16px;border-top:1px solid var(--line);
  border-left:4px solid var(--out);background:var(--outBg)}
.sf-l1{display:flex;gap:7px;align-items:center}
.sf-l2{grid-column:1;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sf-l2>b{font-size:15.5px;font-weight:600}
.sf-d{display:grid;grid-template-columns:170px 80px 300px;gap:10px;font-size:12px;color:var(--muted)}
.sf-d b{color:var(--ink2);font-weight:500}
.sf-act{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:8px;min-width:120px;justify-content:flex-end}
.sf-roll{padding:2px 20px 20px}
.sf-obj{background:var(--ground);border-radius:14px;padding:14px 14px 8px}
.sf-oh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sf-oh b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.sf-oh .m{font-size:12px;color:var(--muted)}
.sf-band>p{display:flex;gap:8px;align-items:baseline;margin:10px 2px 6px}
.sf-band>p b{font-size:12.5px;font-weight:600;color:var(--ink2)}
.sf-band>p span{font-size:11.5px;color:var(--faint)}
.sf-p{display:flex;align-items:center;gap:12px;background:var(--sheet);border-radius:12px;padding:9px 14px 9px 12px;margin-bottom:6px;border-left:4px solid var(--ok)}
.sf-p.is-out{border-left-color:var(--out)}
.sf-p>span{flex:1}
.sf-p b{display:block;font-size:15.5px;font-weight:600}
.sf-p small{display:block;font-size:11.5px;color:var(--faint)}