/* Hub Asia Supply · Clock In/Out — shared styles for the staff app, admin panel and installer.
   Purple from the logo carries the brand; gold marks the main action. */
:root{
  --bg:#F5F3F8; --surface:#FFFFFF; --surface-2:#F8F6FB; --ink:#1A1028; --ink-2:#3A2F4C; --muted:#655C78; --line:#E6E1EE; --line-2:#F0EDF5;
  --deep:#3D1470; --on-deep-muted:#D3C3EE;
  --brand:linear-gradient(125deg,#1F0838 0%,#3D1470 50%,#5B2192 100%); --brand-v:linear-gradient(180deg,#1F0838 0%,#34105F 60%,#44177A 100%);
  --gold:#F5B51B; --grad-go:linear-gradient(125deg,#F7C52B 0%,#EE8E0A 100%); --on-go:#2A0E4A;
  --accent:#5B2192; --accent-ink:#4E1C80; --accent-soft:#F1EAFA; --accent-mid:#C9B3E6;
  --ok:#11805B; --ok-soft:#E4F3EC; --warn:#985700; --warn-soft:#FCF0DC; --bad:#B42318; --bad-soft:#FCEBE9;
  --scrim:rgba(20,8,38,.55);
  --c-ok:#6B3FC4; --c-late:#E0901A; --c-off:#1A9BBF; --c-absent:#C9413A;
  --shadow-sm:0 1px 2px rgba(26,16,40,.06);
  --shadow:0 1px 3px rgba(26,16,40,.07),0 10px 28px -14px rgba(40,14,74,.25);
  --f:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-brand:"Montserrat","IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0D0915; --surface:#18122A; --surface-2:#130E21; --ink:#EEE9F6; --ink-2:#CFC6DF; --muted:#A397B8; --line:#2A2240; --line-2:#201A33;
  --deep:#2A0E4E; --on-deep-muted:#C4B2E4;
  --brand:linear-gradient(125deg,#14051F 0%,#2A0E4E 50%,#43188A 100%); --brand-v:linear-gradient(180deg,#14051F 0%,#230B42 60%,#2E1058 100%);
  --gold:#F7C33A; --grad-go:linear-gradient(125deg,#F5BE2E 0%,#E88A0C 100%); --on-go:#24093F;
  --accent:#8A5AD6; --accent-ink:#C9AEF5; --accent-soft:#2A1A48; --accent-mid:#5A3E8A;
  --ok:#4CC793; --ok-soft:#0F2C20; --warn:#F0B354; --warn-soft:#30240F; --bad:#FF8A80; --bad-soft:#3A1816;
  --c-ok:#9B74E8; --c-late:#B8791A; --c-off:#239AC0; --c-absent:#DE554D;
  --scrim:rgba(0,0,0,.65); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 3px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6);
  color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent-ink)}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:.92em}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:9px;line-height:1}
.logo svg{display:block;flex:none}
.wm{display:flex;flex-direction:column;gap:3px;font-family:var(--f-brand)}
.wm b{font-weight:800;font-size:16px;letter-spacing:.01em;color:#2E1250;white-space:nowrap}
.wm b em{font-style:normal;color:#EDAA14}
.wm small{font-weight:600;font-size:8.5px;letter-spacing:.32em;color:#5B2192;white-space:nowrap}
.wm.light b{color:#fff}.wm.light b em{color:var(--gold)}.wm.light small{color:var(--on-deep-muted)}
@media (prefers-color-scheme: dark){.wm b{color:#fff}.wm small{color:#C9AEF5}}

/* Controls */
.btn{border:0;border-radius:10px;padding:12px 18px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--grad-go);color:var(--on-go)}
.btn.dark{background:var(--brand);color:#fff}
.btn.primary:hover,.btn.dark:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.okb{background:var(--ok);color:#fff}
.btn.del{background:var(--surface);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad)}
.btn.del:hover{background:var(--bad-soft)}
.btn.sm{padding:8px 12px;font-size:13.5px;border-radius:8px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.link{border:0;background:none;color:var(--accent-ink);font-weight:600;padding:4px;text-decoration:underline;text-underline-offset:3px}
.input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px;min-width:0}
.input:focus{outline:2px solid var(--accent-mid);border-color:var(--accent)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.lbl{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.hint{font-size:12.5px;color:var(--muted)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formgrid .full{grid-column:1/-1}
@media (max-width:560px){.formgrid{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.blue{background:var(--accent-soft);color:var(--accent-ink)}
.pill.neutral{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.note{display:flex;gap:8px;align-items:flex-start;border-radius:10px;padding:10px 12px;font-size:13.5px}
.note svg{flex:none;margin-top:1px}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.note.blue{background:var(--accent-soft);color:var(--accent-ink)}
.empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:14px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:80;background:#2A0E4A;color:#fff;border-radius:10px;padding:12px 14px;font-size:14px;font-weight:500;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow);width:max-content;max-width:calc(100% - 32px)}
.toast .undo{border:0;background:var(--gold);color:var(--on-go);font-weight:700;font-size:13px;border-radius:7px;padding:6px 10px;flex:none}

/* Modal (both apps) */
.modal{position:fixed;inset:0;z-index:70;background:var(--scrim);display:grid;place-items:center;padding:16px}
.modal .box{background:var(--surface);border-radius:16px;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -10px rgba(0,0,0,.4)}
.sh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.x{border:1px solid var(--line);background:var(--surface);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--muted);flex:none}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts.end{justify-content:flex-end}

/* ================= Staff app ================= */
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.view{flex:1;display:flex;flex-direction:column;gap:16px;padding:0 16px calc(96px + env(safe-area-inset-bottom,0px))}
.center{flex:1;display:grid;place-items:center;min-height:60dvh}

.login{padding:48px 20px 32px;gap:22px}
.login .lhead{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.login form{display:flex;flex-direction:column;gap:14px}
.login .foot{font-size:12.5px;color:var(--muted);text-align:center}

.band{margin:0 -16px;padding:calc(18px + env(safe-area-inset-top,0px)) 20px 64px;background:var(--brand);color:#fff;border-radius:0 0 22px 22px}
.band .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.band .hello{margin-top:18px}
.band .hello small{color:var(--on-deep-muted);font-size:13.5px}
.band .hello h1{font-size:24px;font-weight:700;margin-top:2px}
.band .hello p{color:var(--on-deep-muted);font-size:13.5px;margin-top:2px}
.band .hello p b{color:var(--gold);font-family:var(--f-mono);font-weight:500}
.lchip{background:#fff;border-radius:8px;padding:4px 5px;display:grid;place-items:center}
.org{display:flex;align-items:center;gap:9px}
.av{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;display:grid;place-items:center;font-size:13.5px}

.shift{margin-top:-46px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.shift-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.shift-top small{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
.shift-top b{font-size:15px}
.clock{font-size:44px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.clock span{font-size:20px;color:var(--muted);font-weight:500}
.today{color:var(--muted);font-size:14px}
.sloc{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.punches{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.punch{border:0;border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-weight:700;font-size:16px;text-align:left;min-height:112px}
.punch small{font-weight:500;font-size:12.5px;opacity:.85}
.punch .pi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.25)}
.punch.in{background:var(--grad-go);color:var(--on-go)}
.punch.out{background:var(--brand);color:#fff}
.punch.done{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);cursor:default}
.punch.done .pi{background:var(--line)}
.punch:disabled{opacity:1}
.timeline{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.timeline div{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.timeline div+div{border-left:1px solid var(--line)}
.timeline small{color:var(--muted);font-size:12px}
.timeline b{font-size:16px;font-variant-numeric:tabular-nums}

.bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.bnav div{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.bnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;font-size:12px;font-weight:600;color:var(--muted);position:relative}
.bnav button[aria-current="true"]{color:var(--accent-ink)}
.bnav button[aria-current="true"]::before{content:"";position:absolute;top:-7px;left:30%;right:30%;height:2px;border-radius:2px;background:var(--gold)}

.ph{padding:calc(20px + env(safe-area-inset-top,0px)) 0 0}
.ph h1{font-size:24px}
.ph p{color:var(--muted);font-size:14px;margin-top:2px}
.hrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hdate{width:46px;flex:none;text-align:center;background:var(--brand);color:#fff;border-radius:10px;padding:6px 0;line-height:1.15}
.hdate b{display:block;font-size:17px}.hdate small{font-size:11px;color:var(--on-deep-muted)}
.hmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hmain .t{font-weight:600;font-variant-numeric:tabular-nums}
.hmain .s{display:flex;gap:6px;flex-wrap:wrap}
.menu{display:flex;flex-direction:column}
.menu dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px}
.menu dt{color:var(--muted)}.menu dd{margin:0;font-weight:500;text-align:right;overflow-wrap:anywhere}

/* Leave */
textarea.input{resize:vertical;min-height:64px}
.lhd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ch{font-size:15px;margin-bottom:4px}
.bhero{position:relative;overflow:hidden;border-radius:20px;padding:18px 18px 18px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--brand);box-shadow:0 16px 30px -18px rgba(61,20,112,.9)}
.bhero small{color:var(--on-deep-muted);font-size:13px;font-weight:500}
.bhero b{display:block;font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:2px}
.bhero b span{font-size:15px;font-weight:500;color:var(--on-deep-muted);letter-spacing:0}
.bhero p{color:var(--on-deep-muted);font-size:13px;margin-top:4px}
.bring{position:relative;width:86px;height:86px;flex:none;display:grid;place-items:center}
.bring svg{position:absolute;inset:0}
.bring span{font-weight:700;font-size:15px}
.ring .rt{stroke:var(--line)}
.ring .rf{stroke:var(--accent)}
.ring.gold .rt{stroke:rgba(255,255,255,.16)}.ring.gold .rf{stroke:var(--gold)}
.bminis{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.bmini{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;box-shadow:var(--shadow-sm)}
.bmini b{font-size:18px;font-variant-numeric:tabular-nums}.bmini b span{font-size:12px;color:var(--muted);font-weight:500}
.bmini small{font-size:12.5px;color:var(--muted);font-weight:500}
.lreq{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.lreq:last-child{border-bottom:0}
.lreq .btn{flex:none;align-self:center}
a.pill{text-decoration:none}
.hol{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.hol:last-child{border-bottom:0}.hol span{color:var(--muted);text-align:right}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:380px){.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:2px}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile b{font-size:14px}.tile small{font-size:12px;color:var(--muted)}
.tile:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.tile:has(input:checked) b{color:var(--accent-ink)}
.tile:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.apsum{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.apsum div{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.apsum div+div{border-left:1px solid var(--line);background:var(--surface-2)}
.apsum small{font-size:12px;color:var(--muted)}.apsum b{font-size:18px}.apsum span{font-size:12.5px;color:var(--muted)}
.apsum.bad div+div b{color:var(--bad)}

/* Install banner, privacy line */
.installb{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:12px 12px 12px 14px;box-shadow:var(--shadow-sm)}
.installb .lchip{border:1px solid var(--line)}
.installb div:not(.acts){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.installb b{font-size:14px}.installb small{font-size:12.5px;color:var(--muted)}
.installb .acts{flex-wrap:nowrap;align-items:center}
.privacy{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--muted)}
.privacy svg{flex:none;margin-top:1px}
.steps-i{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14.5px}

/* Clock In sheet */
.sheet{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto}
.sheet .inner{max-width:480px;width:100%;margin:0 auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.cam{position:relative;border-radius:16px;overflow:hidden;background:#05070A;aspect-ratio:3/4;width:100%;max-height:58dvh}
.cam video,.cam img{width:100%;height:100%;object-fit:cover;display:block}
.cam video{transform:scaleX(-1)}
.oval{position:absolute;left:50%;top:46%;width:60%;height:64%;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.32);pointer-events:none}
.camloc{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:7px;background:rgba(20,8,38,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:600;border-left:3px solid #C9B3E6}
.camloc.ok{border-left-color:#4CC793}.camloc.bad{border-left-color:#FF8A80}
.camloc .spin{width:14px;height:14px;border-width:2px;border-color:rgba(255,255,255,.3);border-top-color:#fff}
.camerr{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:#fff;font-size:14px}
.shutter{width:72px;height:72px;border-radius:50%;border:3px solid var(--accent);background:var(--surface);display:grid;place-items:center;margin:0 auto;padding:0}
.shutter span{width:56px;height:56px;border-radius:50%;background:var(--grad-go)}
.shutter:disabled{opacity:.35;cursor:not-allowed}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.done-big{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:40px 8px 12px}
.done-big .tick{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.done-big h2{font-size:22px}

/* ================= Admin panel ================= */
.admin{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh}
.side{background:var(--brand-v);color:#fff;padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100dvh}
.side .brand{padding:4px 8px 18px}
.side .sl{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--on-deep-muted);padding:12px 10px 6px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav button{border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-weight:500;font-size:14px;color:var(--on-deep-muted);text-align:left;position:relative;white-space:nowrap}
.side nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav button[aria-current="true"]{background:rgba(255,255,255,.12);color:#fff}
.side nav button[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--gold)}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px;border-top:1px solid rgba(255,255,255,.12)}
.side .me b{display:block;font-size:13.5px}.side .me small{color:var(--on-deep-muted);font-size:12px}
.side .me .link{color:var(--on-deep-muted);font-size:12.5px;padding:0}
.amain{padding:28px 32px 48px;display:flex;flex-direction:column;gap:18px;min-width:0}
.ahead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ahead h1{font-size:26px}
.ahead p{color:var(--muted);font-size:14px;margin-top:4px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters .input{width:auto;padding:8px 12px;font-size:14px}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:7px;font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--deep);color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.stat{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.stat+.stat{border-left:1px solid var(--line)}
.stat small{color:var(--muted);font-size:13px;font-weight:500}
.stat b{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.stat b span{font-size:15px;color:var(--muted);font-weight:500}
.stat:first-child{background:var(--brand);color:#fff}.stat:first-child small,.stat:first-child b span{color:var(--on-deep-muted)}
.panelc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--shadow-sm)}
.panelc h2{font-size:16px}
.panelc h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--gold);margin-right:8px;vertical-align:middle;transform:translateY(-1px)}
.tbl-wrap{overflow-x:auto;margin:0 -18px;padding:0 18px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.who{display:flex;align-items:center;gap:10px;min-width:180px}
.who .ini{width:34px;height:34px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.who b{display:block;font-weight:600}.who small{color:var(--muted);font-size:12.5px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}

.plist{gap:0;padding-top:6px;padding-bottom:6px}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.pav{width:46px;height:46px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent)}
.pmain{display:flex;flex-direction:column;gap:5px;min-width:0}
.pname{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.pname b{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.ptag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.pid{font-size:12px;color:var(--muted)}
.pmain small{color:var(--muted);font-size:13.5px}
.pacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:240px}
.pacts .btn{flex:1 1 auto}
.pent{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.pent label{font-weight:700;font-size:14px}
.pent .input{width:96px;padding:8px 12px;font-size:16px}
.psum{font-size:13.5px;color:var(--muted)}
.psum b{color:var(--ink);font-weight:700}.psum b.okt{color:var(--ok)}.psum b.badt{color:var(--bad)}
.lline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;margin-top:2px}
.lline b{font-weight:700}.lline span:last-child{color:var(--muted)}
.ltype{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.holadd{display:grid;grid-template-columns:180px 1fr auto;gap:8px}
.holadd .input{padding:8px 12px;font-size:14px}
.hollist .hol{align-items:center}
.hollist .hol b{min-width:200px;font-weight:600}.hollist .hol span{flex:1;text-align:left;color:var(--ink)}
@media (max-width:600px){.holadd{grid-template-columns:1fr}.hollist .hol b{min-width:0}}
/* Charts and reports */
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line-2);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:12px;font-family:var(--f)}
.chart rect.hol{fill:var(--surface-2);stroke:var(--line);stroke-dasharray:4 4}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.stat .dl{font-size:12px;color:var(--muted)}
.stat .dl.up{color:var(--ok)}.stat .dl.down{color:var(--bad)}
.stat:first-child .dl{color:var(--on-deep-muted)}
.dks{display:inline-flex;gap:3px}
.dk{width:14px;height:14px;border-radius:4px;background:var(--line-2);border:1px solid var(--line);display:inline-block}
.dk.present{background:var(--c-ok);border-color:transparent}.dk.late{background:var(--c-late);border-color:transparent}
.dk.leave{background:var(--c-off);border-color:transparent}.dk.absent{background:var(--c-absent);border-color:transparent}
.dk.extra{background:var(--accent-mid);border-color:transparent}
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rcard{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface);box-shadow:var(--shadow-sm)}
.rcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rcard .ri{width:38px;height:38px;border-radius:9px;background:var(--grad-go);color:var(--on-go);display:grid;place-items:center}
.rcard .input{padding:8px 10px;font-size:14px}
.rcard .acts{margin-top:auto}
tr.tot td{font-weight:700;border-top:2px solid var(--line)}
@media (max-width:1100px){.rcards{grid-template-columns:1fr}}
@media (max-width:1300px){.grid2.charts{grid-template-columns:1fr}.grid2.charts .chart{max-height:300px}}
.prow.gone .pav{background:var(--muted);box-shadow:none}
.prow.gone .pname b{color:var(--muted)}
.tempbox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px dashed var(--accent-mid);border-radius:12px;padding:14px 16px}
.tempbox b{font-family:var(--f-mono);font-size:22px;letter-spacing:.06em}
.rec{display:grid;grid-template-columns:200px 1fr;gap:18px}
.rec img{width:100%;border-radius:12px;aspect-ratio:3/4;object-fit:cover;background:var(--surface-2)}
.rec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;align-content:start}
.rec dt{color:var(--muted)}.rec dd{margin:0;font-weight:500;overflow-wrap:anywhere}
@media (max-width:600px){.rec{grid-template-columns:1fr}.rec img{max-width:240px}}

.mapbox{height:300px;border-radius:12px;position:relative;z-index:0;isolation:isolate;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);cursor:crosshair}
.maptools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.geosearch{position:relative;display:flex;gap:8px;z-index:5}
.geoin{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.geoin svg{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.geoin .input{padding-left:38px}
.georesults{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
.georesults button{display:flex;gap:10px;align-items:flex-start;text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 10px;color:var(--ink);width:100%}
.georesults button:hover{background:var(--surface-2)}
.georesults b{display:block;font-weight:600;font-size:14px}
.georesults small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.geomsg{padding:10px;color:var(--muted);font-size:13.5px}
.range{width:100%;accent-color:var(--accent)}
.opin{background:none;border:0}
.opin span{width:34px;height:34px;border-radius:10px 10px 10px 2px;transform:rotate(-45deg);background:var(--deep);border:2px solid var(--gold);display:grid;place-items:center;box-shadow:0 6px 14px -4px rgba(0,0,0,.45)}
.opin span svg{transform:rotate(45deg);color:#fff}
.leaflet-control-attribution{font-size:10.5px}

@media (max-width:900px){
  .admin{grid-template-columns:1fr}
  .side{position:static;height:auto;padding:12px 14px;flex-direction:row;align-items:center;gap:10px;overflow-x:auto}
  .side .brand{padding:0 6px 0 0}.side .sl,.side .me small{display:none}
  .side nav{flex-direction:row}
  .side .me{margin:0 0 0 auto;border:0;padding:0}
  .amain{padding:20px 16px 40px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}
  .grid2{grid-template-columns:1fr}
  .prow{grid-template-columns:auto minmax(0,1fr)}.pacts{grid-column:1/-1;justify-content:flex-start;max-width:none}.pacts .btn{flex:0 0 auto}
}

/* Installer */
.install{display:grid;place-items:start center;padding:40px 16px}
.install-box{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:16px;padding:26px;width:min(520px,100%);display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.install-box h1{font-size:22px}
.install-box .form{display:flex;flex-direction:column;gap:12px}
.install-box label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}
.install-box ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* ===== Operation Leave - Purple & Orange 2026 ===== */
.bhero {
  background: linear-gradient(125deg, #43217e 0%, #7042b6 65%, #8a59d0 100%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 18px 38px -22px rgba(76,35,132,.65);
  min-height: 175px;
}
.bhero::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -90px;
  top: -135px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.bhero small {
  color: #f0e7ff;
  font-size: 14px;
}
.bhero b {
  font-size: clamp(35px, 5vw, 47px);
  margin-top: 10px;
}
.bhero b span,
.bhero p {
  color: #e9dcff;
}
.bring {
  width: 86px;
  height: 86px;
}
.bring span {
  color: white;
  font-size: 17px;
}
.bring .rt {
  stroke: rgba(255,255,255,.2);
}
.bring .rf {
  stroke: #ffb238;
}
.bminis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.bmini {
  min-height: 125px;
  padding: 22px 16px;
  border: 1px solid #e9e1f5;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 25px -18px rgba(65,31,110,.35);
}
.bmini .rt {
  stroke: #eee8f7;
}
.bmini .rf {
  stroke: #8251c3;
}
.bmini b {
  font-size: 22px;
  color: var(--text);
}
.bmini small {
  font-size: 13px;
  font-weight: 600;
}
.lhd .btn.primary {
  background: #f5a623;
  color: #271744;
  border-color: #f5a623;
  font-weight: 700;
}
.lhd .btn.primary:hover {
  background: #ffbb4d;
  border-color: #ffbb4d;
}
@media (max-width: 480px) {
  .bhero {
    padding: 23px 20px;
    min-height: 155px;
  }
  .bhero b {
    font-size: 34px;
  }
  .bminis {
    gap: 10px;
  }
  .bmini {
    padding: 17px 8px;
  }
}