:root{
  --page:#ECEAE4;--white:#FFF;--s2:#F5F3EE;--bdr:#E1DED7;
  --t1:#111112;--t2:#64625E;--t3:#AEACA8;
  --pu:#4F4DE8;--pu2:#EEEDFD;
  --gr:#15A066;--gr2:#E0F5EB;
  --am:#D97500;--am2:#FEF2C0;
  --re:#D42B20;--re2:#FDEBE9;
  --dk:#111112;--r:14px;
  --nhg:'Neue Haas Grotesk Pro','NeueHaasGrotesk','Neue Haas Grotesk Text','Helvetica Neue','Arial Nova',Arial,sans-serif;
}
[data-theme="dark"]{
  --page:#0C0D10;--white:#141518;--s2:#1C1D22;--bdr:#272930;
  --t1:#ECECF0;--t2:#8B8C98;--t3:#4E5060;
  --pu:#7875FF;--pu2:#1A1A38;
  --gr:#34D399;--gr2:#0A2018;
  --am:#FBBF24;--am2:#201800;
  --re:#FB7185;--re2:#250A10;
  --dk:#ECECF0;
}
/* ── Dark mode overrides ── */
[data-theme="dark"] body{background:var(--page)}
[data-theme="dark"] .sb{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .header{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .an-ctrl,[data-theme="dark"] .an-ctrl-row1,[data-theme="dark"] .an-ctrl-row2{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .an-edit-bar{background:#1C1D22;border-color:var(--bdr)}
[data-theme="dark"] .wgt{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .wgt-hd{border-color:var(--bdr)}
[data-theme="dark"] .card,[data-theme="dark"] .fc,[data-theme="dark"] .kpi-card{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .modal,[data-theme="dark"] .snap-modal,[data-theme="dark"] .awgt-modal,[data-theme="dark"] .merge-modal{background:var(--white)}
[data-theme="dark"] .snap-overlay,[data-theme="dark"] .awgt-overlay,[data-theme="dark"] .merge-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:920;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
[data-theme="dark"] .um-table th{background:var(--s2);color:var(--t2)}
[data-theme="dark"] .um-table td{border-color:var(--bdr)}
[data-theme="dark"] .um-table tr:hover td{background:var(--s2)}
[data-theme="dark"] .ni{color:var(--t2)}
[data-theme="dark"] .ni:hover{background:var(--s2)}
[data-theme="dark"] .ni.on{background:var(--pu2);color:var(--pu)}
[data-theme="dark"] .an-tab{color:var(--t2)}
[data-theme="dark"] .an-tab.on{color:var(--pu)}
[data-theme="dark"] .lf-tab{color:var(--t2)}
[data-theme="dark"] .lf-tab.on{color:var(--pu)}
[data-theme="dark"] .cam-card{background:#1C1D22;border-color:var(--bdr)}
[data-theme="dark"] .cam-info-bar{background:rgba(20,21,24,.85)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--s2);border-color:var(--bdr);color:var(--t1)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--t3)}
[data-theme="dark"] .an-tab-menu{background:var(--white);border-color:var(--bdr);box-shadow:0 8px 24px rgba(0,0,0,.4)}
[data-theme="dark"] .profile-drop{background:var(--white);border-color:var(--bdr);box-shadow:0 14px 36px rgba(0,0,0,.5)}
[data-theme="dark"] .cal-drop,[data-theme="dark"] .lf-filter-drop{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .tcm-card,[data-theme="dark"] .tcm-progress-card{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .rp-panel{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .snap-card{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .snap-actions-bar{background:var(--s2);border-color:var(--bdr)}
[data-theme="dark"] .awgt-sidebar{border-color:var(--bdr)}
[data-theme="dark"] .awgt-tile{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .awgt-ft{background:var(--s2)}
[data-theme="dark"] .grid-btn{color:var(--t2)}
[data-theme="dark"] .grid-btn.on{background:var(--white);color:var(--pu)}
[data-theme="dark"] .dwmy-btn{color:var(--t2)}
[data-theme="dark"] .dwmy-btn.on{background:var(--pu);color:#fff}
[data-theme="dark"] .view-snaps-btn{background:var(--pu)}
[data-theme="dark"] .an-edit-db-btn{background:var(--s2);border-color:var(--bdr);color:var(--t2)}
[data-theme="dark"] .cam-act{background:rgba(255,255,255,.08)}
[data-theme="dark"] .sb-user{background:var(--s2);border-color:var(--bdr)}
[data-theme="dark"] .profile-drop-div{background:var(--bdr)}
[data-theme="dark"] .profile-drop-item:hover{background:var(--s2)}
[data-theme="dark"] .tcm-hist-table th{background:var(--s2)}
[data-theme="dark"] .tcm-hist-table td{border-color:var(--bdr)}
[data-theme="dark"] .an-date-btn{background:var(--s2);border-color:var(--bdr);color:var(--t1)}
[data-theme="dark"] .snap-filter-bar{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .snap-footer{background:var(--s2);border-color:var(--bdr)}
[data-theme="dark"] .merge-modal-inner{background:var(--white)}
[data-theme="dark"] .merge-panel{background:var(--s2);border-color:var(--bdr)}
[data-theme="dark"] .kpi-color-glow{opacity:.06}

[data-theme="dark"] .wgt-split-left{background:var(--s2)}
[data-theme="dark"] .wgt-title,[data-theme="dark"] .wgt-eyebrow{color:var(--t1)}
[data-theme="dark"] .wgt-hd{border-color:var(--bdr)}
[data-theme="dark"] .top-title{color:var(--t1)}
[data-theme="dark"] .fc-num,[data-theme="dark"] .kpi-num{color:var(--t1)}
[data-theme="dark"] .sb-user-name{color:var(--t1)}
[data-theme="dark"] .sb-user-role{color:var(--t3)}
[data-theme="dark"] .ni{color:var(--t2)}
[data-theme="dark"] .view-snaps-btn,[data-theme="dark"] .tcm-create-btn{background:var(--pu);color:#fff}
[data-theme="dark"] .an-tab-more{color:var(--t3)}
[data-theme="dark"] .awgt-cat-btn{color:var(--t2)}
[data-theme="dark"] .awgt-cat-btn.on{background:var(--pu2);color:var(--pu)}
[data-theme="dark"] .profile-drop-name{color:var(--t1)}
[data-theme="dark"] .profile-drop-email,[data-theme="dark"] .profile-drop-item{color:var(--t2)}
[data-theme="dark"] .tcm-title,.tcm-card-title{color:var(--t1)}
[data-theme="dark"] .snap-vis-id{color:var(--t1)}
[data-theme="dark"] .snap-meta-item{color:var(--t3)}
[data-theme="dark"] .snap-info-top{color:var(--t1)}
[data-theme="dark"] .w7-tp-store,[data-theme="dark"] .w7-tp-rank{color:var(--t1)}
[data-theme="dark"] [style*="color:#111"],[data-theme="dark"] [style*="color: #111"]{color:var(--t1)!important}
[data-theme="dark"] [style*="color:#333"],[data-theme="dark"] [style*="color: #333"]{color:var(--t1)!important}
[data-theme="dark"] [style*="color:#444"],[data-theme="dark"] [style*="color: #444"]{color:var(--t2)!important}
[data-theme="dark"] [style*="color:#555"],[data-theme="dark"] [style*="color: #555"]{color:var(--t2)!important}
[data-theme="dark"] [style*="background:#FAFA"],[data-theme="dark"] [style*="background: #FAFA"]{background:var(--s2)!important}
[data-theme="dark"] [style*="background:#fff"],[data-theme="dark"] [style*="background:white"],[data-theme="dark"] [style*="background: #fff"]{background:var(--white)!important}
[data-theme="dark"] [style*="color:#111112"]{color:var(--t1)!important}
[data-theme="dark"] [style*="color:#64625E"],[data-theme="dark"] [style*="color:#AEACA8"]{color:var(--t3)!important}
[data-theme="dark"] .tcm-hist-table,[data-theme="dark"] .um-table{color:var(--t1)}
[data-theme="dark"] .ca-alert-cam{color:var(--t1)}
[data-theme="dark"] .ca-q-num{color:var(--t1)}
[data-theme="dark"] .lf-tab,[data-theme="dark"] .an-tab{color:var(--t2)}
[data-theme="dark"] .lf-tab.on,[data-theme="dark"] .an-tab.on{color:var(--pu)}

[data-theme="dark"] .cam-status-wrap{background:var(--s2);border-color:var(--bdr)}
[data-theme="dark"] .cam-status-ico{background:var(--s2)}
[data-theme="dark"] .header,[data-theme="dark"] .hdr{background:var(--white);border-color:var(--bdr)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--nhg);background:var(--page);display:flex;min-height:100vh;font-size:14px;color:var(--t1);-webkit-font-smoothing:antialiased}

/* ── SIDEBAR ── */
.sb{width:218px;min-width:218px;background:linear-gradient(180deg,var(--white) 0%,var(--s2) 100%);border-right:1px solid var(--bdr);display:flex;flex-direction:column;height:100vh;position:sticky;top:0}
.sb-logo{height:60px;padding:0 18px;display:flex;align-items:center;border-bottom:1px solid var(--bdr);flex-shrink:0;transition:opacity .15s}
.sb-logo:hover{opacity:.78}
.sb-logo svg{display:block;height:34px;width:auto}
.sb-nav-gap{height:10px;flex-shrink:0}
.sb-grp{padding:14px 18px 6px;font-size:9.5px;font-weight:700;color:var(--t3);letter-spacing:1.3px;text-transform:uppercase}
.ni{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;margin:1px 10px;border-radius:10px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:color .18s,background .18s,transform .18s}
.sb-divider{height:1px;background:var(--bdr);margin:6px 12px;}
.ni i{font-size:18px;flex-shrink:0;transition:transform .18s,color .18s}
.ni::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:20px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#4F4DE8,#7C5CFC 60%,#3FCF5E);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.ni:hover{background:var(--s2);color:var(--t1);transform:translateX(2px)}
.ni:hover i{transform:scale(1.08)}
.ni.on{background:linear-gradient(90deg,var(--pu2),transparent 130%);color:var(--pu);font-weight:600}
.ni.on::before{transform:translateY(-50%) scaleY(1)}
.ni.on i{color:var(--pu)}
.ni .bj{margin-left:auto;font-size:9.5px;font-weight:700;background:var(--re2);color:var(--re);padding:2px 7px;border-radius:20px}
.sb-sp{flex:1}
.sb-ft-wrap{position:relative;margin:10px}
.sb-ft{padding:10px 11px;border-radius:13px;background:var(--white);border:1px solid var(--bdr);display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.sb-ft:hover{border-color:var(--pu);box-shadow:0 4px 14px -6px rgba(79,77,232,.3)}
.sb-ft-info{min-width:0;flex:1}
.sb-ft-chev{font-size:15px;color:var(--t3);flex-shrink:0}
.ava{position:relative;width:32px;height:32px;border-radius:50%;background:var(--pu);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
/* gradient + sizing for chrome avatars only — leaves content avatars untouched */
.sb-ft .ava,.acct-hd .ava,.top-ava{background:linear-gradient(135deg,#4F4DE8,#7C5CFC)}
.sb-ft .ava{width:34px;height:34px}
.ava-stat{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#3FCF5E;border:2px solid var(--white)}
.avn{font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avr{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow-x:hidden;overflow-y:hidden}

/* ── TOPBAR ── */
.top{height:60px;background:color-mix(in srgb,var(--white) 72%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 22px;gap:10px;position:sticky;top:0;z-index:50;transition:box-shadow .2s}
.top.scrolled{box-shadow:0 6px 22px -12px rgba(17,17,18,.22)}
.top-title{font-weight:800;font-size:15px;color:var(--t1);letter-spacing:-0.3px}
.top-sep{color:var(--bdr);font-size:18px;margin:0 2px}
.top-crumb{font-size:12px;color:var(--t3)}
.tsp{flex:1}
/* ── Unified utility cluster ── */
.top-cluster{display:flex;align-items:center;gap:6px;padding:5px;border-radius:13px;background:var(--s2);border:1px solid var(--bdr)}
.top-cluster .cam-status-wrap,.top-cluster .theme-hd-btn,.top-cluster .notif-btn{background:var(--white);border-color:var(--bdr)}
.top-cluster .theme-hd-btn{width:34px;height:34px;border-radius:9px}
.top-cluster .cam-status-ico i,.top-cluster .notif-btn i{color:var(--t2)}
.top-ava{width:36px;height:36px;font-size:12px;cursor:pointer}
/* ── Shared account dropdown (sidebar footer + topbar avatar) ── */
.acct-drop{position:absolute;background:var(--white);border:1px solid var(--bdr);border-radius:13px;box-shadow:0 16px 40px -12px rgba(17,17,18,.28);min-width:228px;padding:7px;z-index:300;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.acct-drop.open{opacity:1;visibility:visible;transform:translateY(0)}
.profile-wrap .acct-drop{top:calc(100% + 9px);right:0}
.sb-ft-wrap .acct-drop{bottom:calc(100% + 9px);left:0;right:0;min-width:0}
.acct-hd{display:flex;align-items:center;gap:10px;padding:10px 11px 12px;border-bottom:1px solid var(--bdr);margin-bottom:6px}
.acct-hd .ava{width:38px;height:38px;font-size:13px}
.acct-nm{font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-em{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:background .12s,color .12s}
.acct-item i{font-size:17px;flex-shrink:0}
.acct-item:hover{background:var(--s2);color:var(--t1)}
.acct-div{height:1px;background:var(--bdr);margin:6px 8px}
.acct-item.danger{color:var(--re)}
.acct-item.danger:hover{background:var(--re2)}
.top-date{font-size:11.5px;color:var(--t3);white-space:nowrap}
.tbtn{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t2);background:var(--white);border:1px solid var(--bdr);border-radius:8px;padding:6px 12px;cursor:pointer;transition:.12s;white-space:nowrap}
.tbtn:hover{background:var(--s2)}
.tbtn i{font-size:14px}
.cam-wrap{position:relative}
/* Camera status pill button */
.cam-status-wrap{display:inline-flex;align-items:center;gap:0;cursor:pointer;border:1px solid transparent;border-radius:9px;overflow:hidden;background:var(--white);transition:box-shadow .15s,border-color .15s;user-select:none;padding:0;height:34px}
.cam-status-wrap:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);border-color:var(--bdr)}
.cam-status-ico{width:32px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--white);flex-shrink:0}
.cam-status-ico i{font-size:14px;color:var(--t1)}
.cam-status-pill{display:flex;align-items:center;gap:5px;padding:0 12px;height:34px;font-size:12px;font-weight:700;line-height:1;transition:background .2s;border-left:1px solid var(--bdr)}
.cam-status-pill i{font-size:12px}
.cam-status-down{background:var(--re2);color:var(--re)}
.cam-status-good{background:#E0F5EB;color:#15A066}
.cam-btn{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--t1);background:var(--white);border:1px solid var(--bdr);border-radius:8px;padding:6px 12px;cursor:pointer;transition:.12s;white-space:nowrap;user-select:none}
.cam-btn:hover{background:var(--s2)}
.cam-btn i{font-size:14px;color:var(--t2)}
.cam-badges{display:flex;align-items:center;gap:4px;margin-left:2px}
.cbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px 3px 6px;border-radius:20px;line-height:1;white-space:nowrap}
.cbadge-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cbadge-blue{background:#DBEAFE;color:#1D4ED8}
.cbadge-green{background:#DCFCE7;color:#166534}
.cbadge-red{background:#FEE2E2;color:#991B1B}
.cbadge-blue .cbadge-dot{background:#3B82F6}
.cbadge-green .cbadge-dot{background:#15A066}
.cbadge-red .cbadge-dot{background:#EF4444}
/* cam-cnt removed */
.cam-chev{font-size:12px;color:var(--t3);transition:transform .2s}
.cam-drop{position:absolute;top:calc(100% + 7px);right:0;background:var(--white);border:1px solid var(--bdr);border-radius:11px;box-shadow:0 10px 28px rgba(0,0,0,.11);min-width:220px;padding:7px;z-index:200;display:none}
.cam-drop.open{display:block;animation:fdrop .15s ease}
.cam-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--t2);transition:.1s}
.cam-opt:hover{background:var(--s2);color:var(--t1)}
.cam-opt.sel{background:var(--pu2);color:var(--pu);font-weight:600}
.cam-opt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cam-opt-cnt{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--t3)}
.cam-div{height:1px;background:var(--bdr);margin:5px 8px}
.notif-wrap{position:relative}
.notif-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid transparent;border-radius:9px;cursor:pointer;position:relative;transition:.12s}
.notif-btn:hover{border-color:var(--bdr);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.notif-btn i{font-size:18px;color:var(--t2)}
.notif-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--re);border:2px solid var(--white)}
.notif-panel{position:absolute;top:calc(100% + 9px);right:0;width:310px;background:var(--white);border:1px solid var(--bdr);border-radius:13px;box-shadow:0 14px 36px rgba(0,0,0,.13);z-index:200;display:none;overflow:hidden}
.notif-panel.open{display:block;animation:fdrop .15s ease}
.np-head{padding:14px 18px 11px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.np-title{font-size:13.5px;font-weight:700;color:var(--t1)}
.np-badge{font-size:10.5px;font-weight:700;background:var(--re2);color:var(--re);padding:2px 8px;border-radius:20px}
.np-item{display:flex;align-items:flex-start;gap:11px;padding:11px 18px;border-bottom:1px solid var(--s2);cursor:pointer;transition:.1s}
.np-item:hover{background:var(--s2)}
.np-item:last-child{border-bottom:none}
.np-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.np-ico i{font-size:15px}
.np-body{flex:1}
.np-body p{font-size:12.5px;font-weight:500;color:var(--t1);line-height:1.35}
.np-body span{font-size:11px;color:var(--t3)}
.np-unread{width:7px;height:7px;border-radius:50%;background:var(--pu);margin-top:5px;flex-shrink:0}

/* ── CONTENT ── */
.cnt{padding:18px 22px;display:flex;flex-direction:column;gap:14px}

/* ── HOME GREETING ── */
.home-greet{padding:4px 2px 2px;animation:fu .5s ease both}
.greet-title{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-0.6px;display:flex;align-items:center;gap:8px;margin-bottom:5px;line-height:1.2}
.wave-hand{display:inline-block;font-size:24px;transform-origin:70% 80%;animation:none}
.wave-hand.waving{animation:wave .7s ease forwards}
@keyframes wave{0%{transform:rotate(0deg)}20%{transform:rotate(20deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(16deg)}80%{transform:rotate(-6deg)}100%{transform:rotate(0deg)}}
.greet-sub{font-size:13px;color:var(--t3);line-height:1.5}
.greet-sub b{color:var(--t2);font-weight:600}

/* ── SUMMARY CAROUSEL ── */
.car-wrap{border-radius:var(--r);background:var(--white);border:1px solid var(--bdr);position:relative;overflow:hidden}
.car-viewport{overflow:hidden}
.car-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.car-slide{min-width:100%;padding:18px 22px 20px;display:flex;align-items:center;gap:16px}
.cs-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.cs-ico i{font-size:20px}
.cs-body{flex:1}
.cs-tag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.cs-title{font-size:15px;font-weight:700;color:var(--t1);letter-spacing:-0.3px;margin-bottom:3px;line-height:1.3}
.cs-desc{font-size:12.5px;color:var(--t2);line-height:1.5}
.cs-meta{display:flex;align-items:center;gap:9px;margin-top:8px}
.cs-badge{font-size:11px;font-weight:600;padding:3px 11px;border-radius:20px}
.cs-time{font-size:11px;color:var(--t3)}
/* controls sit at bottom-right, overlaid on card — no divider */
.cs-ctrl{position:absolute;bottom:14px;right:16px;display:flex;align-items:center;gap:5px}
.cs-nav{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:.12s;backdrop-filter:blur(4px)}
.cs-nav:hover{background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.cs-nav i{font-size:12px}
.cs-dots{display:flex;gap:5px;align-items:center;margin:0 4px}
.csd{width:6px;height:6px;border-radius:50%;background:var(--bdr);transition:all .3s;cursor:pointer}
.csd.on{background:var(--pu);width:16px;border-radius:3px}

/* ── KPI ROW — 4 equal columns ── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.kpi-color{border-radius:16px;padding:20px 22px 18px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;cursor:default;transition:transform .15s,box-shadow .15s}
.kpi-color:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.kpi-color-glow{position:absolute;right:-24px;bottom:-24px;width:100px;height:100px;border-radius:50%;opacity:.12;pointer-events:none}
.kpi-color-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.kpi-color-ico{width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi-color-ico i{font-size:16px;color:#fff}
.kpi-color-lbl{font-size:12px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.01em;line-height:1.3}
.kpi-color-num{font-size:28px;font-weight:800;color:#fff;letter-spacing:-0.5px;line-height:1}
.kpi-color-delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.8);background:rgba(255,255,255,.15);padding:3px 8px;border-radius:20px;width:fit-content;margin-top:2px}
.kpi-color-delta i{font-size:11px}

/* Today's Footfall — white card */
.fc{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;min-height:148px;transition:transform .15s,box-shadow .15s;animation:fu .4s ease both}
.fc:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.fc-lbl{font-size:10.5px;font-weight:600;color:var(--t3);letter-spacing:1.2px;text-transform:uppercase}
.fc-num{display:flex;align-items:baseline;margin:10px 0 10px}
.fc-num .blk{font-size:44px;font-weight:800;letter-spacing:-1.5px;color:var(--t1);line-height:1}
.fc-num .pur{font-size:44px;font-weight:800;letter-spacing:-1.5px;color:var(--pu);line-height:1}
.fc-stores{font-size:12.5px;color:var(--t2);margin-bottom:4px}
.fc-stores b{font-weight:700;color:var(--t1)}
.fc-delta{font-size:12.5px;font-weight:600;color:var(--gr)}
.fc-delta span{font-size:11.5px;color:var(--t3);font-weight:400}

/* KPI white card — reference: icon+title top, big number bottom-left, sparkline bottom-right */
.kpi{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;min-height:148px;transition:transform .15s,box-shadow .15s;cursor:default;animation:fu .4s ease both}
.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.kpi-top{display:flex;align-items:center;gap:9px}
.kpi-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.kpi-ico i{font-size:17px}
.kpi-label{font-size:12.5px;font-weight:500;color:var(--t2);letter-spacing:-0.1px}
.kpi-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.kpi-left{}
.kpi-num{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--t1);line-height:1;margin-bottom:5px}
.kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600}
.kpi-delta .pct{font-weight:700}
.kpi-delta .from{font-size:10.5px;font-weight:400;color:var(--t3);margin-left:2px}
.kpi-spark{width:80px;height:50px;flex-shrink:0}
.kpi-spark svg{width:100%;height:100%;overflow:visible;display:block}

/* ── CONV + FOOTFALL ── */
.hero2{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:stretch}
.conv-card{background:var(--pu);border-radius:var(--r);padding:22px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;animation:fu .45s ease both}
.conv-card::after{content:'';position:absolute;bottom:-50px;right:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.cc-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:14px;line-height:1.35;letter-spacing:-0.1px}
.cc-n{font-size:52px;font-weight:800;letter-spacing:-2px;color:#fff;line-height:1;margin-bottom:4px}
.cc-unit{font-size:18px;font-weight:400;color:rgba(255,255,255,.5);vertical-align:super;margin-left:3px}
.cc-d{font-size:12.5px;color:#A5F3C0;font-weight:600;margin-bottom:14px}
.cc-spk{width:100%;height:40px;overflow:visible}
.cc-foot{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.3);margin-top:4px}
.ff-dark{background:linear-gradient(145deg,#1E1B6B 0%,#2D2A9E 50%,#1A1860 100%);border-radius:var(--r);padding:22px 24px;position:relative;overflow:hidden;animation:fu .45s ease .05s both}
.ff-dark::before{content:'';position:absolute;top:-70px;right:-70px;width:210px;height:210px;border-radius:50%;background:rgba(165,163,255,.15);pointer-events:none}
.ff-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.ff-left{display:flex;flex-direction:column;justify-content:center}
.ff-ey{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:6px}
.ff-n{font-size:42px;font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1}
.ff-u{font-size:13px;color:rgba(255,255,255,.85);margin-left:5px;font-weight:500}
.ff-d{font-size:12.5px;color:#86EFAC;margin-top:6px;font-weight:600}
.ff-d span{color:var(--t2);font-weight:400}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:10px;font-weight:500;padding:4px 10px;border-radius:20px}
.ff-bars-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding-left:10px}
.ff-bars{display:flex;align-items:flex-end;gap:7px;height:94px;width:100%}
.fbc{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
.fbar{width:100%;border-radius:5px 5px 0 0;background:rgba(165,163,255,.2);transform-origin:bottom;animation:gb .8s cubic-bezier(.4,0,.2,1) both}
.fbar.hi{background:#7C5CFC}
.fbar:hover{background:#7C79F0;cursor:pointer}
.fbl{font-size:9.5px;color:var(--t2)}
.fbl.hi{color:#9998FF}

/* ── TASKS + QA + WN ── */
.tqw{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch}

/* TASKS */
/* ── Checklist & Tasks (redesigned) ── */
.tasks-card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;animation:fu .45s ease both}
.tasks-hdr{padding:16px 20px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);flex-shrink:0}
.tasks-hdr-left{display:flex;align-items:center;gap:9px}
.tasks-hdr-left i{font-size:18px;color:var(--pu)}
.tasks-hdr-title{font-size:15px;font-weight:800;color:var(--t1);letter-spacing:-0.3px}
.tasks-see-all{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--pu);cursor:pointer;transition:.12s;border:none;background:none;padding:0}
.tasks-see-all:hover{color:#3e3cd4}
.tasks-see-all i{font-size:12px}
/* Progress section */
.tasks-prog{padding:16px 20px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.tasks-count-row{display:flex;align-items:baseline;gap:7px;margin-bottom:12px}
.tasks-count-num{font-size:36px;font-weight:900;letter-spacing:-2px;color:var(--t1);line-height:1}
.tasks-count-txt{font-size:13.5px;color:var(--t3);font-weight:500}
.tp-track{width:100%;height:10px;background:var(--s2);border-radius:20px;overflow:hidden;margin-bottom:8px}
.tp-fill{height:100%;background:linear-gradient(90deg,#6366F1,#A78BFA);border-radius:20px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.tp-lbl{font-size:12.5px;color:var(--t3)}
.tp-lbl b{color:var(--pu)}
/* Tasks section label */
.tasks-section-lbl{padding:12px 20px 6px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3)}
.tasks-body{flex:1;padding:4px 0 8px}
/* Task item redesign */
.t-item{display:flex;align-items:flex-start;gap:12px;padding:10px 20px;cursor:pointer;transition:background .12s;border-radius:0}
.t-item:hover{background:var(--s2)}
.t-ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--bdr);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s;margin-top:1px}
.t-ck i{font-size:12px}
.t-ck.done{background:var(--gr);border-color:var(--gr);color:#fff}
.t-ck.urgent{border-color:var(--am);border-width:2.5px}
.t-ck.ok{border-color:var(--pu);border-width:2px}
.t-info{flex:1;min-width:0}
.t-title-row{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.t-name{font-size:13.5px;font-weight:700;color:var(--t1);line-height:1.25;margin-bottom:2px}
.t-name.dk{text-decoration:line-through;color:var(--t3);font-weight:500}
.t-sub{font-size:12px;color:var(--t3)}
/* See All Tasks modal */
.alltasks-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:850;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.alltasks-ov.open{display:flex;animation:coverin .18s ease}
.alltasks-modal{background:var(--white);border-radius:18px;width:520px;max-width:95vw;max-height:85vh;box-shadow:0 24px 64px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.alltasks-hd{padding:20px 22px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
.alltasks-title{font-size:16px;font-weight:800;color:var(--t1);margin-bottom:3px}
.alltasks-sub{font-size:12px;color:var(--t3)}
.alltasks-close{width:30px;height:30px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);flex-shrink:0}
.alltasks-close i{font-size:14px}
.alltasks-prog{padding:16px 22px;border-bottom:1px solid var(--bdr);background:var(--s2)}
.at-count-row{display:flex;align-items:baseline;gap:7px;margin-bottom:10px}
.at-count-num{font-size:28px;font-weight:900;letter-spacing:-1.5px;color:var(--t1)}
.at-count-txt{font-size:13px;color:var(--t3)}
.at-prog-bar{height:8px;background:var(--bdr);border-radius:20px;overflow:hidden;margin-bottom:6px}
.at-prog-fill{height:100%;background:linear-gradient(90deg,#6366F1,#A78BFA);border-radius:20px;transition:width .6s ease}
.at-prog-pct{font-size:12px;color:var(--t3)}
.at-prog-pct b{color:var(--pu)}
.alltasks-filters{display:flex;gap:6px;padding:12px 22px;border-bottom:1px solid var(--bdr)}
.atf-btn{font-size:12px;font-weight:600;padding:5px 13px;border-radius:20px;border:1.5px solid var(--bdr);background:none;color:var(--t2);cursor:pointer;transition:.12s}
.atf-btn.on{background:var(--pu2);color:var(--pu);border-color:var(--pu)}
.atf-btn:hover:not(.on){background:var(--s2)}
.alltasks-list{flex:1;overflow-y:auto;padding:8px 0}
.at-item{display:flex;align-items:center;gap:12px;padding:11px 22px;cursor:pointer;transition:background .12s}
.at-upload-btn{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--pu);background:var(--pu2);border:none;border-radius:8px;padding:5px 11px;cursor:pointer;flex-shrink:0;transition:.12s;white-space:nowrap}
.at-upload-btn:hover{background:#DDDCFA}
.at-upload-btn i{font-size:13px}
.at-item:hover{background:var(--s2)}
.at-ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--bdr);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s;margin-top:1px;cursor:pointer}
.at-ck i{font-size:12px}
.at-ck.done{background:var(--gr);border-color:var(--gr);color:#fff}
.at-ck.urgent{border-color:var(--am);border-width:2.5px}
.at-ck.ok{border-color:var(--pu);border-width:2px}
.at-body{flex:1;min-width:0}
.at-name{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:3px;line-height:1.25}
.at-name.done-txt{text-decoration:line-through;color:var(--t3);font-weight:500}
.at-meta{display:flex;align-items:center;gap:8px}
.at-store{font-size:12px;color:var(--t3)}
.at-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px}
.at-badge.done-b{background:var(--gr2);color:var(--gr)}
.at-badge.urgent-b{background:var(--am2);color:var(--am)}
.at-badge.ok-b{background:var(--pu2);color:var(--pu)}
.alltasks-ft{padding:14px 22px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.at-ft-txt{font-size:12px;color:var(--t3)}
.at-add-btn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 16px;cursor:pointer;transition:.12s}
.at-add-btn:hover{background:#3e3cd4}
.at-add-btn i{font-size:14px}
.t-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.t-pill i{font-size:10px}
.tp-urgent{background:#FEF2C0;color:#92400E}
.tp-ok{background:var(--gr2);color:#0B5E3C}
.tp-done{background:var(--s2);color:var(--t3)}
.t-sub{font-size:11px;color:var(--t3);margin-top:2px}
.t-up{font-size:10.5px;background:var(--pu2);border:none;border-radius:6px;color:var(--pu);padding:5px 10px;cursor:pointer;white-space:nowrap;font-weight:500;flex-shrink:0}
.t-div{height:1px;background:var(--s2);margin:0 20px}

/* QUICK ACTIONS */
.qa-card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;animation:fu .45s ease .05s both}
.qa-hdr{padding:16px 20px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);flex-shrink:0}
.qa-title{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:-0.2px}
.qa-cust-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--pu);background:var(--pu2);border:none;border-radius:8px;padding:5px 11px;cursor:pointer;transition:.12s}
.qa-cust-btn:hover{background:#DDDCFA}
.qa-cust-btn i{font-size:12px}
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:12px 14px 14px;flex:1;align-content:start}
.qa-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:16px 8px;border-radius:12px;cursor:pointer;transition:all .15s;text-align:center}
.qa-item:hover{background:var(--s2)}
.qa-item:hover .qa-ico{transform:scale(1.08) translateY(-2px)}
.qa-ico{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .15s;flex-shrink:0}
.qa-ico i{font-size:24px}
.qa-lbl{font-size:12px;font-weight:600;color:var(--t1);line-height:1.25}

/* ── CUSTOMISE MODAL ── */
.cust-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:800;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.cust-overlay.open{display:flex;animation:coverin .18s ease}
@keyframes coverin{from{opacity:0}to{opacity:1}}
.cust-modal{background:var(--white);border-radius:18px;width:540px;max-width:95vw;box-shadow:0 24px 64px rgba(0,0,0,.18);display:flex;flex-direction:column;max-height:90vh;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
@keyframes modalin{from{opacity:0;transform:scale(.93) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
.cust-mhd{padding:22px 24px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.cust-mhd-left{}
.cust-m-title{font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-0.4px;margin-bottom:3px}
.cust-m-sub{font-size:12px;color:var(--t3)}
.cust-close{width:32px;height:32px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:.12s;flex-shrink:0}
.cust-close:hover{background:var(--bdr)}
.cust-close i{font-size:15px}
.cust-search{padding:14px 20px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.cust-search-inp{width:100%;background:var(--s2);border:1px solid var(--bdr);border-radius:10px;padding:8px 12px 8px 34px;font-size:13px;color:var(--t1);outline:none;font-family:inherit;position:relative}
.cust-search-inp:focus{border-color:var(--pu);background:var(--white)}
.cust-search-wrap{position:relative}
.cust-search-wrap i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3);pointer-events:none}
.cust-body{padding:16px 20px;overflow-y:auto;flex:1}
.cust-cat-lbl{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin:0 0 10px}
.cust-cat-lbl:not(:first-child){margin-top:18px}
.cust-items-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.cust-tile{border:1.5px solid var(--bdr);border-radius:13px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .15s;position:relative;text-align:center;background:var(--white)}
.cust-tile:hover{border-color:#C4C2F8;background:var(--pu2)}
.cust-tile.sel{border-color:var(--pu);background:var(--pu2)}
.cust-tile-ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .15s}
.cust-tile-ico i{font-size:20px}
.cust-tile:hover .cust-tile-ico{transform:scale(1.07) translateY(-1px)}
.cust-tile-lbl{font-size:11.5px;font-weight:600;color:var(--t1);line-height:1.25}
.cust-tile-tick{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--pu);display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s}
.cust-tile-tick i{font-size:10px;color:#fff}
.cust-tile.sel .cust-tile-tick{opacity:1}
.cust-mft{padding:16px 24px 20px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cust-sel-count{font-size:12px;color:var(--t3)}
.cust-sel-count b{color:var(--pu);font-weight:700}
.cust-mft-btns{display:flex;gap:9px}
.cust-btn-cancel{font-size:12.5px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:8px 18px;cursor:pointer;transition:.12s}
.cust-btn-cancel:hover{background:var(--bdr)}
.cust-btn-save{font-size:12.5px;font-weight:600;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 20px;cursor:pointer;transition:.12s}
.cust-btn-save:hover{background:#3e3cd4}

/* WHAT'S NEW */
.wn-card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;animation:fu .45s ease .1s both}
.wn-hdr{padding:16px 20px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);flex-shrink:0}
.wn-hdr-title{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:-0.2px}
.wn-viewall{font-size:12px;color:var(--pu);cursor:pointer;font-weight:600}
.wn-outer{overflow:hidden;flex:1;padding:14px 14px 0}
.wn-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);height:100%}
.wn-slide{min-width:100%;height:100%}
.wn-banner{border-radius:12px;padding:18px 20px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:160px}
.wn-banner::before{content:'';position:absolute;bottom:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.wn-b-tag{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:5px}
.wn-b-title{font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.2px;margin-bottom:4px;line-height:1.3}
.wn-b-sub{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:12px}
.wn-b-stat{display:flex;align-items:baseline;gap:5px}
.wn-b-num{font-size:32px;font-weight:900;letter-spacing:-1px;color:#fff;line-height:1}
.wn-b-unit{font-size:12px;font-weight:400;color:rgba(255,255,255,.5)}
.wn-ctrl{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 14px;flex-shrink:0}
.wn-dots{display:flex;gap:4px;align-items:center}
.wnd{width:5px;height:5px;border-radius:50%;background:var(--bdr);cursor:pointer;transition:all .3s}
.wnd.on{background:var(--pu);width:14px;border-radius:3px}
.wn-navs{display:flex;gap:5px}
.wn-nav{width:26px;height:26px;border-radius:50%;background:var(--s2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:var(--t2);transition:.13s}
.wn-nav:hover{background:var(--bdr)}
.wn-nav i{font-size:11px}

/* ── ACTIVITY + REPORTS ── */
.ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wcard{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:18px 20px;animation:fu .45s ease both}
.wch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wct{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:-0.2px}
.wca{font-size:11.5px;color:var(--pu);cursor:pointer;font-weight:500}
.aitem{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--s2)}
.aitem:last-child{border-bottom:none}
.aico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.aico i{font-size:16px}
.abody{flex:1;min-width:0}
.abody p{font-size:12.5px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abody span{font-size:11px;color:var(--t3)}
.atm{font-size:10.5px;color:var(--t3);white-space:nowrap}
.dl-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--pu);background:var(--pu2);border:none;border-radius:7px;padding:5px 10px;cursor:pointer;transition:.12s;white-space:nowrap;flex-shrink:0}
.dl-btn:hover{background:#DDDCFA}
.dl-btn i{font-size:13px}

@keyframes fu{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}

/* ══ USER MANAGEMENT ════════════════════════════════════ */
.um-wrap{flex:1;overflow-y:auto;padding:20px 24px 24px;display:flex;flex-direction:column;gap:20px;background:var(--page)}
.um-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.um-stat{background:var(--white);border:1px solid var(--bdr);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:14px;transition:.15s;cursor:default}
.um-stat:hover{box-shadow:0 4px 16px rgba(0,0,0,.07);transform:translateY(-1px)}
.um-stat-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.um-stat-ico i{font-size:19px}
.um-stat-num{font-size:24px;font-weight:900;letter-spacing:-1px;color:var(--t1);line-height:1}
.um-stat-lbl{font-size:11px;color:var(--t3);margin-top:2px;font-weight:600;letter-spacing:.3px}
.um-bar{background:var(--white);border:1px solid var(--bdr);border-radius:12px 12px 0 0;border-bottom:none;padding:10px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.um-search-wrap{position:relative;flex:1;min-width:200px;max-width:300px}
.um-search-wrap i.si{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3);pointer-events:none}
.um-search{width:100%;background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;padding:7px 12px 7px 32px;font-size:13px;color:var(--t1);outline:none;font-family:inherit;transition:.15s}
.um-search:focus{border-color:var(--pu);background:var(--white)}
.um-filter{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--t2);background:var(--s2);border:1.5px solid var(--bdr);border-radius:8px;padding:5px 12px;cursor:pointer;transition:.12s;white-space:nowrap}
.um-filter:hover,.um-filter.on{background:var(--pu2);color:var(--pu);border-color:var(--pu)}
.um-filter i{font-size:12px}
.um-add{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 18px;cursor:pointer;transition:.12s;white-space:nowrap;margin-left:auto}
.um-add:hover{background:#3e3cd4}
.um-add i{font-size:14px}
/* Role cards */
.um-roles-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.um-rc{background:var(--white);border:1px solid var(--bdr);border-radius:13px;padding:16px 18px}
.um-rc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.um-rc-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.um-rc-ico i{font-size:17px}
.um-rc-name{font-size:13px;font-weight:800;color:var(--t1);margin-bottom:1px}
.um-rc-count{font-size:11px;color:var(--t3)}
.um-rc-perms{display:flex;flex-direction:column;gap:5px}
.um-rcp{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t2)}
.um-rcp i{font-size:13px;flex-shrink:0;width:16px}
.um-rcp.yes i{color:var(--gr)}.um-rcp.partial i{color:var(--am)}.um-rcp.no i{color:var(--re)}
/* Table */
.um-table-wrap{background:var(--white);border:1px solid var(--bdr);border-radius:0 0 12px 12px;overflow:hidden}
.um-table{width:100%;border-collapse:collapse}
.um-table th{padding:11px 16px;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);text-align:left;background:var(--s2);border-bottom:1px solid var(--bdr);white-space:nowrap}
.um-table td{padding:10px 16px;border-bottom:1px solid var(--s2);vertical-align:middle}
.um-table tr:last-child td{border-bottom:none}
.um-table tr:hover td{background:var(--s2)}
.um-user{display:flex;align-items:center;gap:11px}
.um-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.um-uname{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap}
.um-uemail{font-size:11.5px;color:var(--t3)}
.um-role-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.um-role-badge.super{background:#EEEDFD;color:#4F4DE8}
.um-role-badge.regional{background:var(--gr2);color:var(--gr)}
.um-role-badge.store{background:var(--am2);color:var(--am)}
.um-role-badge i{font-size:11px}
.um-perm{position:relative;display:inline-flex;align-items:center;gap:4px}
.um-perm-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#1E1E1E;color:rgba(255,255,255,.88);border-radius:10px;padding:10px 14px;font-size:12px;line-height:1.75;white-space:nowrap;display:none;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;min-width:140px}
.um-perm-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1E1E1E}
.um-perm:hover .um-perm-tip{display:block}
.um-pc{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.um-pc.full{background:#EEEDFD;color:#4F4DE8;border-color:#C7C6F8}
.um-pc.reg{background:var(--gr2);color:var(--gr);border-color:#A7E8C6}
.um-pc.st{background:var(--am2);color:var(--am);border-color:#F5D88A}
.um-pc.more{background:var(--s2);color:var(--t3);border-color:var(--bdr)}
.um-pc i{font-size:10px}
.um-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.um-sdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.um-status.on .um-sdot{background:#22C55E;box-shadow:0 0 5px #22C55E}
.um-status.on{color:#166534}
.um-status.off .um-sdot{background:#94A3B8}
.um-status.off{color:var(--t3)}
.um-acts{display:flex;align-items:center;gap:5px}
.um-ab{width:30px;height:30px;border-radius:8px;border:none;background:var(--s2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:.12s}
.um-ab:hover{background:var(--bdr);color:var(--t1)}
.um-ab.del:hover{background:var(--re2);color:var(--re)}
.um-ab i{font-size:14px}
/* Add User Modal */
.adduser-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:850;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.adduser-ov.open{display:flex;animation:coverin .18s ease}
.adduser-modal{background:var(--white);border-radius:18px;width:520px;max-width:95vw;max-height:90vh;box-shadow:0 24px 64px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.au-hd{padding:20px 24px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
.au-title{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:2px}
.au-sub{font-size:12px;color:var(--t3)}
.au-close{width:30px;height:30px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2)}
.au-close i{font-size:14px}
.au-body{padding:20px 24px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:16px}
.au-field{display:flex;flex-direction:column;gap:6px}
.au-lbl{font-size:11.5px;font-weight:700;color:var(--t1)}
.au-inp{width:100%;background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;padding:9px 13px;font-size:13.5px;color:var(--t1);outline:none;font-family:inherit;transition:.15s}
.au-inp:focus{border-color:var(--pu);background:var(--white)}
.au-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.au-role-opt{border:2px solid var(--bdr);border-radius:11px;padding:12px 10px;cursor:pointer;transition:.15s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.au-role-opt:hover{border-color:var(--pu)}
.au-role-opt.on{border-color:var(--pu);background:var(--pu2)}
.au-role-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.au-role-name{font-size:12px;font-weight:700;color:var(--t1)}
.au-role-desc{font-size:10px;color:var(--t3);line-height:1.4}
/* au-scope-chips replaced by multisel */
/* au-sc unused */
.au-sc:hover,.au-sc.on{background:var(--pu2);color:var(--pu);border-color:var(--pu);font-weight:600}
/* ─── Multi-select (Assign Regions / Stores) ─── */
.au-multisel{position:relative}
/* Clean button trigger */
.au-ms-trigger{width:100%;display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--t2);transition:.15s;text-align:left}
.au-ms-trigger:hover{border-color:var(--t3)}
.au-ms-trigger.open{border-color:var(--pu);background:var(--white);box-shadow:0 0 0 3px rgba(79,77,232,.08)}
.au-ms-trigger i.lead{font-size:14px;color:var(--t3);flex-shrink:0}
.au-ms-trigger span{flex:1;color:var(--t2)}
.au-ms-trigger span.has-sel{color:var(--t1);font-weight:600}
.au-ms-badge{font-size:11px;font-weight:700;background:var(--pu);color:#fff;border-radius:20px;padding:1px 7px;flex-shrink:0}
.au-ms-chev{font-size:12px;color:var(--t3);transition:transform .2s;flex-shrink:0}
.au-ms-trigger.open .au-ms-chev{transform:rotate(180deg)}
/* Selected chips — separate row below trigger */
.au-ms-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.au-ms-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;background:var(--white);border:1.5px solid var(--bdr);color:var(--t1);transition:.12s}
.au-ms-chip:hover{border-color:var(--re);background:var(--re2)}
.au-ms-chip:hover .au-ms-chip-rm{color:var(--re)}
.au-ms-chip-ico{font-size:12px;color:var(--t3)}
.au-ms-chip-rm{background:none;border:none;cursor:pointer;color:var(--t3);padding:0;line-height:1;font-size:14px;display:flex;align-items:center;margin-left:1px}
/* Dropdown */
.au-ms-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1px solid var(--bdr);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.12);z-index:450;display:none;overflow:hidden;animation:fdrop .15s ease}
.au-ms-drop.open{display:block}
.au-ms-sw{padding:10px 12px;border-bottom:1px solid var(--bdr);position:relative;background:var(--s2)}
.au-ms-sw i{position:absolute;left:24px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--t3);pointer-events:none}
.au-ms-sinp{width:100%;background:var(--white);border:1.5px solid var(--bdr);border-radius:8px;padding:7px 12px 7px 32px;font-size:13px;color:var(--t1);outline:none;font-family:inherit;transition:.15s}
.au-ms-sinp:focus{border-color:var(--pu)}
.au-ms-list{max-height:210px;overflow-y:auto;padding:6px 0}
.au-ms-opt{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:.1s;border-radius:0}
.au-ms-opt:hover{background:var(--s2)}
.au-ms-opt.sel{background:var(--pu2)}
.au-ms-opt-ico{font-size:14px;color:var(--t3);flex-shrink:0;width:20px}
.au-ms-opt.sel .au-ms-opt-ico{color:var(--pu)}
.au-ms-olbl{font-size:13px;flex:1;color:var(--t1);font-weight:500}
.au-ms-opt.sel .au-ms-olbl{font-weight:700;color:var(--pu)}
.au-ms-chk{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--bdr);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;margin-left:auto}
.au-ms-opt.sel .au-ms-chk{background:var(--pu);border-color:var(--pu)}
.au-ms-opt.sel .au-ms-chk::after{content:'';width:4px;height:8px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);display:block}
.au-ms-foot{padding:9px 14px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:var(--s2)}
.au-ms-cnt{font-size:12px;color:var(--t3);font-weight:500}
.au-ms-done{font-size:12px;font-weight:700;color:var(--pu);background:var(--pu2);border:none;cursor:pointer;padding:5px 12px;border-radius:7px;transition:.12s}
.au-ms-done:hover{background:#DDDCFA}

.au-ft{padding:14px 24px 18px;border-top:1px solid var(--bdr);display:flex;gap:9px;justify-content:flex-end}
.au-cancel{font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:8px 18px;cursor:pointer}
.au-save{font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 22px;cursor:pointer}
.au-save:hover{background:#3e3cd4}

/* ══ LIVE FEED ═══════════════════════════════════════════ */
.lf-bar{background:var(--white);border-bottom:1px solid var(--bdr);display:flex;align-items:stretch;height:50px;flex-shrink:0}
.lf-tabs-wrap{display:flex;align-items:stretch;flex:1;min-width:0;overflow:visible;padding-left:16px}
.lf-tabs-wrap::-webkit-scrollbar{display:none}
.lf-tabs{display:flex;align-items:stretch;gap:0;overflow:visible}
.lf-tab{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;transition:.15s;user-select:none;position:relative}
.lf-tab:hover{color:var(--t1)}
.lf-tab.on{color:var(--pu);font-weight:700;border-bottom-color:var(--pu)}
.lf-tab-count{font-size:10px;font-weight:700;background:var(--s2);color:var(--t3);padding:2px 6px;border-radius:20px}
.lf-tab.on .lf-tab-count{background:var(--pu2);color:var(--pu)}
.lf-tab-edit{opacity:0;display:flex;align-items:center;gap:1px;margin-left:2px}
.lf-tab:hover .lf-tab-edit{opacity:1}
.lf-tab-edit button{background:none;border:none;width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:.1s}
.lf-tab-edit button:hover{background:var(--s2);color:var(--t1)}
.lf-tab-edit i{font-size:10px}
.lf-add-tab{background:none;border:none;width:36px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:18px;cursor:pointer;transition:.12s;flex-shrink:0;border-right:1px solid var(--bdr)}
.lf-add-tab:hover{background:var(--s2);color:var(--t1)}
.lf-right{display:flex;align-items:center;gap:8px;padding:0 14px;flex-shrink:0}
.lf-sep{width:1px;height:22px;background:var(--bdr);flex-shrink:0}
.grid-btns{display:flex;background:var(--s2);border-radius:8px;padding:3px;gap:1px}
.grid-btn{width:32px;height:26px;border:none;background:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t2);transition:.12s}
.grid-btn.on{background:var(--white);color:var(--pu);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.lf-carousel-btn{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:5px 11px;cursor:pointer;transition:.12s;white-space:nowrap}
.lf-carousel-btn.on{background:var(--pu2);color:var(--pu);border-color:var(--pu)}
.lf-carousel-btn i{font-size:13px}
.lf-interval-wrap{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t2);display:none}
.lf-interval-wrap.show{display:flex}
.lf-interval-sel{border:1.5px solid var(--bdr);border-radius:7px;background:var(--s2);font-size:11.5px;color:var(--t2);padding:4px 8px;outline:none;cursor:pointer;font-family:inherit}
.lf-filter-btn{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:5px 11px;cursor:pointer;transition:.12s;white-space:nowrap}
.lf-filter-btn:hover{background:var(--bdr)}
.lf-filter-btn i{font-size:13px}

/* Camera grid */
.lf-content{flex:1;overflow-y:auto;padding:12px 14px;background:var(--page)}
.cam-grid{display:grid;gap:10px}
/* Reuse analytics tab style for live feed */
.lf-tabs{display:flex;align-items:stretch;gap:0}
.lf-tab{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s;user-select:none;position:relative}
.lf-tab:hover{color:var(--t1)}
.lf-tab.on{color:var(--pu);font-weight:700;border-bottom-color:var(--pu)}
.lf-tab-count{font-size:10px;font-weight:700;background:var(--s2);color:var(--t3);padding:2px 6px;border-radius:20px}
.lf-tab.on .lf-tab-count{background:var(--pu2);color:var(--pu)}
.lf-tab-edit{opacity:0;display:flex;align-items:center;gap:1px;margin-left:2px}
.lf-tab:hover .lf-tab-edit{opacity:1}
.lf-tab-edit button{background:none;border:none;width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:.1s}
.lf-tab-edit button:hover{background:var(--s2);color:var(--t1)}
.lf-tab-edit i{font-size:10px}
/* Empty state */
.lf-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--page);min-height:420px;width:100%}
.lf-empty-ico{width:64px;height:64px;border-radius:18px;background:var(--white);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center}
.lf-empty-ico i{font-size:28px;color:var(--t3)}
.lf-empty-title{font-size:15px;font-weight:700;color:var(--t1)}
.lf-empty-sub{font-size:13px;color:var(--t3)}
.lf-empty-btn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:9px 20px;cursor:pointer;transition:.12s}
.lf-empty-btn:hover{background:#3e3cd4}
.lf-empty-btn i{font-size:15px}
.cam-grid.g2{grid-template-columns:repeat(2,1fr)}
.cam-grid.g3{grid-template-columns:repeat(3,1fr)}
.cam-grid.g4{grid-template-columns:repeat(4,1fr)}

/* Camera card */
.cam-card{background:var(--white);border:1px solid var(--bdr);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s;cursor:default}
.cam-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.1)}
.cam-feed{position:relative;aspect-ratio:16/9;background:#242424;overflow:hidden}
.cam-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.cam-placeholder i{font-size:36px;color:var(--t2)}
/* Live camera placeholder */
.cam-live-ph{width:100%;height:100%;background:linear-gradient(160deg,#1B2B1B 0%,#0E1A14 55%,#1A2820 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cam-live-ph::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px);pointer-events:none}
.cam-live-ph::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,255,255,.04) 0%,transparent 70%);pointer-events:none}
.cam-live-ph-ico{font-size:28px;color:rgba(255,255,255,.08)}
.cam-live-badge{position:absolute;top:8px;right:10px;display:flex;align-items:center;gap:5px;background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.5);border-radius:20px;padding:3px 9px;font-size:10px;font-weight:800;color:#FCA5A5;letter-spacing:.5px}
.cam-live-dot{width:6px;height:6px;border-radius:50%;background:#EF4444;animation:livepulse 1.4s ease-in-out infinite}
@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.cam-top{position:absolute;top:0;left:0;right:0;padding:8px 10px;background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,transparent 100%);display:flex;align-items:flex-start;justify-content:space-between}
.cam-info-wrap{display:flex;align-items:center;gap:7px}
.cam-sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cam-sdot.on{background:#22C55E;box-shadow:0 0 6px #22C55E}
.cam-sdot.off{background:#EF4444;box-shadow:0 0 6px #EF4444}
.cam-nm{font-size:12px;font-weight:700;color:#fff;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cam-lc{font-size:10.5px;color:rgba(255,255,255,.72);line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.6);max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-acts{display:flex;gap:4px;align-items:center}
.cam-act{width:26px;height:26px;border-radius:7px;border:none;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:.12s;font-size:11px;font-weight:800}
.cam-act:hover{background:rgba(0,0,0,.55)}
.cam-act i{font-size:13px}
.cam-act.xray{padding:0 10px;width:auto;font-size:9px;font-weight:900;letter-spacing:.9px;background:#4F4DE8;color:#fff;border:none;border-radius:7px !important;text-transform:uppercase}
@keyframes xraypulse{0%,100%{box-shadow:0 0 0 0 rgba(165,163,255,.0)}60%{box-shadow:0 0 0 4px rgba(165,163,255,.18)}}
.cam-ts{position:absolute;bottom:8px;left:10px;font-size:10px;color:rgba(255,255,255,.55);font-weight:700;font-family:'Courier New',monospace}
.cam-offline-ov{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.cam-offline-tag{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.5);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:700;color:#FCA5A5;display:flex;align-items:center;gap:6px}
.cam-offline-tag i{font-size:14px}
.cam-roi-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.cam-roi-svg.show{display:block}

/* Metric pills */
.cam-pills{display:flex;gap:6px;padding:8px 10px}
.cpill{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 6px;border-radius:20px;border:none;font-size:12.5px;font-weight:700;cursor:default;letter-spacing:-.2px;transition:.12s}
.cpill i{font-size:13px}
.cpill.blue{background:#EEF2FF;color:#4338CA}
.cpill.grn{background:#DCFCE7;color:#166534}
.cpill.red{background:#FFF1F2;color:#BE123C}
.cpill.dim{opacity:.4}

/* Carousel */
.cam-carousel-view{flex:1;display:flex;flex-direction:column;background:#141414;overflow:hidden}
.cc-slide-wrap{flex:1;position:relative;overflow:hidden}
.cc-slide{position:absolute;inset:0;display:none;flex-direction:column}
.cc-slide.on{display:flex}
.cc-slide-feed{flex:1;background:#1E1E1E;position:relative;display:flex;align-items:center;justify-content:center}
.cc-slide-feed i{font-size:80px;color:#2A2A2A}
.cc-slide-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border-radius:20px;padding:5px 18px;font-size:12.5px;color:rgba(255,255,255,.8);font-weight:600;white-space:nowrap}
.cc-pills{display:flex;gap:12px;padding:14px 20px;background:#1A1A1A;justify-content:center}
.cc-pills .cpill{flex:none;padding:9px 28px;font-size:14px;border-radius:24px}
.cc-nav{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 20px 14px;background:#111;flex-shrink:0}
.cc-dot{width:8px;height:8px;border-radius:50%;background:#333;cursor:pointer;transition:.2s}
.cc-dot.on{background:var(--pu);width:22px;border-radius:4px}
.cc-prev,.cc-next{width:36px;height:36px;border-radius:50%;background:#2A2A2A;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s;flex-shrink:0}
.cc-prev:hover,.cc-next:hover{background:#3A3A3A}
.cc-prev i,.cc-next i{font-size:17px}

/* ROI Modal */
.roi-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.roi-overlay.open{display:flex;animation:coverin .18s ease}
.roi-modal{background:var(--white);border-radius:18px;width:640px;max-width:95vw;box-shadow:0 28px 70px rgba(0,0,0,.22);display:flex;flex-direction:column;max-height:90vh;overflow:hidden;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.roi-mhd{padding:18px 22px 14px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
.roi-title{font-size:15px;font-weight:800;color:var(--t1);letter-spacing:-.3px;margin-bottom:2px}
.roi-sub{font-size:12px;color:var(--t3)}
.roi-close{width:30px;height:30px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);flex-shrink:0}
.roi-close i{font-size:14px}
.roi-mbody{padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.roi-preview{border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#1E1E1E;position:relative}
.roi-prev-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.roi-prev-ph i{font-size:52px;color:var(--t1)}
.roi-prev-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.roi-ctrl{display:flex;align-items:center;justify-content:space-between;background:var(--s2);border-radius:12px;padding:14px 18px}
.roi-ctrl-lbl{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:3px}
.roi-ctrl-sub{font-size:11.5px;color:var(--t3)}
.roi-tgl{position:relative;width:44px;height:24px;cursor:pointer}
.roi-tgl input{opacity:0;width:0;height:0;position:absolute}
.roi-tgl-track{position:absolute;inset:0;background:#CBD5E1;border-radius:12px;transition:.2s}
.roi-tgl input:checked+.roi-tgl-track{background:var(--pu)}
.roi-tgl-knob{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.roi-tgl input:checked~.roi-tgl-knob{left:23px}
.roi-infobox{background:#EEF2FF;border-radius:10px;padding:12px 16px;display:flex;gap:10px}
.roi-infobox i{font-size:16px;color:#4338CA;flex-shrink:0;margin-top:1px}
.roi-infobox p{font-size:12px;color:#3730A3;line-height:1.55}
.roi-mft{padding:14px 22px 18px;border-top:1px solid var(--bdr);display:flex;gap:9px;justify-content:flex-end}
.roi-cancel{font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:8px 18px;cursor:pointer}
.roi-save{font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 20px;cursor:pointer}
.roi-save:hover{background:#3e3cd4}

/* Fullscreen */
.fs-overlay{position:fixed;inset:0;background:#000;z-index:960;display:none;flex-direction:column}
.fs-overlay.open{display:flex;animation:coverin .18s ease}
.fs-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(0,0,0,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:10;transition:opacity .4s ease,transform .4s ease}
.fs-hd.fs-hidden{opacity:0;transform:translateY(-110%);pointer-events:none}
.fs-cam-info{display:flex;align-items:center;gap:8px}
.fs-dot{width:9px;height:9px;border-radius:50%}
.fs-nm{font-size:15px;font-weight:700;color:#fff}
.fs-lc{font-size:12px;color:rgba(255,255,255,.5)}
.fs-hd-actions{display:flex;align-items:center;gap:8px}
.fs-lock-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex-shrink:0}
.fs-lock-btn:hover{background:rgba(255,255,255,.22)}
.fs-lock-btn.on{background:rgba(79,77,232,.55);border-color:rgba(99,97,255,.7);color:#fff}
.fs-lock-btn i{font-size:14px}
.fs-close{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.fs-close:hover{background:rgba(255,255,255,.22)}
.fs-close i{font-size:15px}
.fs-feed{flex:1;display:flex;align-items:center;justify-content:center;background:#111;position:relative;cursor:none}
.fs-feed i{font-size:100px;color:var(--t2)}
.fs-roi-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.fs-roi-svg.show{display:block}
.fs-pills{display:flex;gap:12px;padding:14px 24px;background:rgba(0,0,0,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.08);justify-content:center;position:relative;z-index:10;transition:opacity .4s ease,transform .4s ease}
.fs-pills.fs-hidden{opacity:0;transform:translateY(110%);pointer-events:none}
.fs-pills .cpill{flex:none;padding:9px 28px;font-size:14px;border-radius:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(8px)}
.fs-pills .cpill.blue{background:rgba(99,102,241,.3);border-color:rgba(99,102,241,.5)}
.fs-pills .cpill.grn{background:rgba(22,160,102,.3);border-color:rgba(22,160,102,.5)}
.fs-pills .cpill.red{background:rgba(212,43,32,.3);border-color:rgba(212,43,32,.5)}
/* Cursor hides after inactivity */
.fs-overlay.cursor-hidden{cursor:none}
.fs-overlay.cursor-hidden .fs-feed{cursor:none}

/* Add Camera modal */
.addcam-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:850;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.addcam-overlay.open{display:flex;animation:coverin .18s ease}
.addcam-modal{background:var(--white);border-radius:18px;width:480px;max-width:95vw;max-height:82vh;box-shadow:0 24px 64px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.addcam-hd{padding:20px 22px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
.addcam-title{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:2px}
.addcam-sub{font-size:12px;color:var(--t3)}
.addcam-close{width:30px;height:30px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2)}
.addcam-close i{font-size:14px}
.addcam-search-wrap{padding:12px 18px;border-bottom:1px solid var(--bdr);position:relative}
.addcam-search-wrap i.si{position:absolute;left:30px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3)}
.addcam-inp{width:100%;background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;padding:8px 12px 8px 36px;font-size:13px;color:var(--t1);outline:none;font-family:inherit}
.addcam-inp:focus{border-color:var(--pu);background:var(--white)}
.addcam-list{flex:1;overflow-y:auto;padding:8px 12px}
.addcam-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;transition:.1s}
.addcam-item:hover{background:var(--s2)}
.addcam-item.sel{background:var(--pu2)}
.addcam-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.addcam-info{flex:1;min-width:0}
.addcam-nm{font-size:13px;font-weight:600;color:var(--t1)}
.addcam-lc{font-size:11.5px;color:var(--t3)}
.addcam-chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--bdr);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.addcam-item.sel .addcam-chk{background:var(--pu);border-color:var(--pu)}
.addcam-item.sel .addcam-chk::after{content:'';width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);display:block}
.addcam-ft{padding:14px 18px 18px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.addcam-cnt{font-size:12px;color:var(--t3)}
.addcam-cnt b{color:var(--pu);font-weight:700}
.addcam-btns{display:flex;gap:9px}
.addcam-cancel{font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:8px 16px;cursor:pointer}
.addcam-ok{font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 18px;cursor:pointer}
.addcam-ok:hover{background:#3e3cd4}

/* New Tab modal */
.newtab-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:860;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.newtab-overlay.open{display:flex;animation:coverin .18s ease}
.newtab-modal{background:var(--white);border-radius:18px;width:480px;max-width:95vw;max-height:82vh;box-shadow:0 24px 64px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.newtab-hd{padding:20px 22px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
.newtab-title{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:2px}
.newtab-sub{font-size:12px;color:var(--t3)}
.newtab-close{width:30px;height:30px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2)}
.newtab-close i{font-size:14px}
.newtab-name-wrap{padding:16px 22px;border-bottom:1px solid var(--bdr)}
.newtab-name-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:7px}
.newtab-name-inp{width:100%;background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--t1);outline:none;font-family:inherit;transition:.15s}
.newtab-name-inp:focus{border-color:var(--pu);background:var(--white)}
.newtab-cam-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);padding:12px 22px 8px;flex-shrink:0}
.newtab-cam-list{flex:1;overflow-y:auto;padding:4px 12px 8px}
.newtab-ft{padding:14px 18px 18px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.newtab-cnt{font-size:12px;color:var(--t3)}
.newtab-cnt b{color:var(--pu);font-weight:700}
.newtab-btns{display:flex;gap:9px}
.newtab-cancel{font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:8px 16px;cursor:pointer}
.newtab-ok{font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 20px;cursor:pointer}
.newtab-ok:hover{background:#3e3cd4}

/* Live filter dropdown */
.lf-filter-drop{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--bdr);border-radius:13px;box-shadow:0 14px 36px rgba(0,0,0,.13);width:260px;padding:10px;z-index:300;display:none;animation:fdrop .15s ease}
.lf-filter-drop.open{display:block}
.lff-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding:6px 8px 4px}
.lff-chip{display:flex;flex-wrap:wrap;gap:5px;padding:4px 8px 8px}
.lff-c{font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:20px;border:1.5px solid var(--bdr);color:var(--t2);cursor:pointer;transition:.12s}
.lff-c:hover,.lff-c.on{border-color:var(--pu);background:var(--pu2);color:var(--pu);font-weight:600}
/* ═══════════════════════════════════════════════════════ */
@keyframes gb{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gw{from{width:0}}
@keyframes fdrop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}

/* ── VIEW ROUTING ── */
.view{display:none;flex-direction:column;flex:1;min-width:0;overflow-x:hidden}
#reportsView{overflow:hidden;min-height:0}
.view.active#reportsView{flex-direction:column}
.view.active{display:flex;width:100%}

/* ── ANALYTICS CONTROL BAR ── */
.an-ctrl{background:var(--white);border-bottom:1px solid var(--bdr);padding:0;display:flex;flex-direction:column;flex-shrink:0;position:relative;z-index:40}
.an-ctrl-row1{display:flex;align-items:stretch;height:44px;border-bottom:1px solid var(--bdr);position:relative;z-index:50;overflow:visible}
.an-ctrl-row2{display:flex;align-items:center;height:42px;padding:0 16px;gap:8px;flex-wrap:nowrap}
.an-tabs-wrap{display:flex;align-items:stretch;flex:1;min-width:0;overflow:visible;padding-left:16px;gap:0}
.an-tabs-wrap::-webkit-scrollbar{display:none}
.an-tabs{display:flex;align-items:stretch;gap:0;overflow:visible}
.an-tab{display:flex;align-items:center;gap:6px;padding:0 16px;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s;position:relative;user-select:none}
.an-tab:hover{color:var(--t1)}
.an-tab.on{color:var(--pu);font-weight:700;border-bottom-color:var(--pu)}
.an-tab-more{opacity:0.35;width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:.1s;margin-left:3px;background:none;border:none;flex-shrink:0}
.an-tab:hover .an-tab-more{opacity:1}.lf-tab:hover .an-tab-more{opacity:1}.an-tab.on .an-tab-more{opacity:0.6}
.an-tab-more:hover{background:var(--s2);color:var(--t1)!important}
.an-tab-more i{font-size:13px}
.an-tab-menu{position:fixed;top:0;left:0;background:var(--white);border:1px solid var(--bdr);border-radius:10px;padding:4px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:9999;display:none}
.an-tab-menu.open{display:block}
.an-tab-menu-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--t1);cursor:pointer;transition:.1s;white-space:nowrap}
.an-tab-menu-item:hover{background:var(--s2)}
.an-tab-menu-item.del{color:#dc2626}
.an-tab-menu-item.del:hover{background:#fef2f2}
.an-tab-menu-item i{font-size:13px;color:var(--t3)}
.an-tab-menu-item.del i{color:#dc2626}
.an-add-tab{background:none;border:none;width:36px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:18px;cursor:pointer;transition:.12s;flex-shrink:0;border-right:1px solid var(--bdr)}
.an-add-tab:hover{background:var(--s2);color:var(--t1)}
.an-ctrl-right{display:none}.an-ctrl-row2{display:flex;align-items:center;gap:8px;padding:0 16px;flex-wrap:nowrap;border-top:0}
.an-sep{width:1px;height:20px;background:var(--bdr);flex-shrink:0}
.dwmy{display:flex;background:var(--s2);border-radius:7px;padding:3px;gap:1px;flex-shrink:0}
.dwmy-btn{padding:3px 10px;border-radius:5px;border:none;background:none;font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;transition:.12s}
.dwmy-btn.on{background:var(--white);color:var(--pu);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.an-date-wrap{position:relative;flex-shrink:0}
.an-date-btn{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:5px 12px;cursor:pointer;transition:.12s;white-space:nowrap}
.an-date-btn:hover{background:var(--bdr)}
.an-date-btn i{font-size:13px;color:var(--t3)}
.an-filter-btn{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:5px 12px;cursor:pointer;transition:.12s;white-space:nowrap;flex-shrink:0}
.an-filter-btn:hover{background:var(--bdr)}
.an-filter-btn i{font-size:13px}
.tsp2{display:none}

/* Calendar Dropdown */
.cal-drop{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--bdr);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.14);z-index:300;display:none;padding:16px;width:300px;animation:fdrop .15s ease}
.cal-drop.open{display:block}
.cal-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.cal-preset{font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px;background:var(--s2);border:1px solid var(--bdr);color:var(--t2);cursor:pointer;transition:.12s}
.cal-preset:hover,.cal-preset.on{background:var(--pu2);color:var(--pu);border-color:var(--pu)}
.cal-months{display:flex;gap:12px}
.cal-month{flex:1}
.cal-mhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-mnav{background:none;border:none;cursor:pointer;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.1s}
.cal-mnav:hover{background:var(--s2)}
.cal-mnav i{font-size:13px}
.cal-mlbl{font-size:12px;font-weight:700;color:var(--t1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dh{font-size:9.5px;font-weight:700;color:var(--t3);text-align:center;padding:3px 0}
.cal-d{font-size:11.5px;color:var(--t2);text-align:center;padding:5px 2px;border-radius:6px;cursor:pointer;transition:.1s}
.cal-d:hover{background:var(--s2)}
.cal-d.today{font-weight:700;color:var(--pu)}
.cal-d.sel{background:var(--pu);color:#fff;font-weight:700}
.cal-d.range{background:var(--pu2);color:var(--pu)}
.cal-d.other{color:var(--t3)}
.cal-d.empty{cursor:default}
.cal-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--bdr)}
.cal-range-lbl{font-size:11.5px;color:var(--t2)}
.cal-range-lbl b{color:var(--t1);font-weight:700}
.cal-apply{font-size:12px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:8px;padding:7px 18px;cursor:pointer}
.cal-apply:hover{background:#3e3cd4}

/* Filter panel */
.an-filter-panel{position:fixed;top:0;right:-340px;width:320px;height:100vh;background:var(--white);border-left:1px solid var(--bdr);z-index:500;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 32px rgba(0,0,0,.1)}
.an-filter-panel.open{right:0}
.afp-hd{padding:18px 20px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.afp-title{font-size:15px;font-weight:800;color:var(--t1)}
.afp-close{background:none;border:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:.12s}
.afp-close:hover{background:var(--s2)}
.afp-close i{font-size:15px}
.afp-body{flex:1;overflow-y:auto;padding:16px 20px}
.afp-grp{margin-bottom:20px}
.afp-grp-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.afp-chips{display:flex;flex-wrap:wrap;gap:7px}
.afp-chip{font-size:12px;font-weight:500;padding:6px 13px;border-radius:20px;border:1.5px solid var(--bdr);color:var(--t2);cursor:pointer;transition:.12s}
.afp-chip:hover{border-color:var(--pu);color:var(--pu)}
.afp-chip.on{border-color:var(--pu);background:var(--pu2);color:var(--pu);font-weight:600}
.afp-ft{padding:16px 20px;border-top:1px solid var(--bdr);display:flex;gap:9px;flex-shrink:0}
.afp-reset{flex:1;font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:9px;cursor:pointer}
.afp-apply{flex:1;font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:9px;cursor:pointer}

/* ── ANALYTICS BODY ── */
.an-body{padding:20px 22px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto}
.wgt-row{display:grid;gap:16px}
.wgt-row-1{grid-template-columns:1fr}
.wgt-row-2{grid-template-columns:1fr 1fr}

/* ─── WIDGET SHELL ─── */
.wgt{background:var(--white);border:1px solid var(--bdr);border-radius:16px;overflow:hidden}
.wgt-hd{padding:14px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wgt-hd-left{display:flex;flex-direction:column;gap:2px}
.wgt-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3)}
.wgt-title{font-size:13.5px;font-weight:700;color:var(--t1);letter-spacing:-0.25px}
.wgt-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
.wgt-icon-btn{width:28px;height:28px;border-radius:8px;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:.12s}
.wgt-icon-btn:hover{background:var(--bdr);color:var(--t1)}
.wgt-icon-btn i{font-size:13px}

/* ─── CHART CONTAINER ─── */
.chart-wrap{position:relative}
.chart-wrap canvas{display:block}
.wgt-chart-body{padding:14px 20px 20px}

/* ─── FOOTFALL WIDGET ─── */
.wgt-ff-body{padding:10px 20px 16px;display:flex;flex-direction:column;gap:0}
.ff-section-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.ff-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ff-num{font-size:26px;font-weight:900;letter-spacing:-1px;color:var(--t1);line-height:1}
.ff-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}
.ff-badge-up{background:var(--gr2);color:var(--gr)}
.ff-badge-dn{background:var(--re2);color:var(--re)}
.ff-badge i{font-size:10px}
.gbar{height:8px;border-radius:20px;display:flex;gap:2px;margin-bottom:7px}
.gbar-m{background:#4F4DE8;border-radius:20px}
.gbar-f{background:#F472B6;flex:1;border-radius:20px}
.gcounts{display:flex;justify-content:space-between}
.gcnt-m{font-size:11.5px;font-weight:700;color:#4F4DE8;display:flex;align-items:center;gap:3px}
.gcnt-f{font-size:11.5px;font-weight:700;color:#F472B6;display:flex;align-items:center;gap:3px}
.gcnt-m i,.gcnt-f i{font-size:12px}

/* ─── SPLIT PANEL ─── */
.wgt-split{display:flex}
.wgt-split-left{width:210px;flex-shrink:0;border-right:1px solid var(--bdr);background:var(--s2);display:flex;flex-direction:column;align-items:center;padding:18px 16px 20px}
.wgt-split-right{flex:1;min-width:0;overflow:hidden;padding:14px 16px 16px;display:flex;flex-direction:column}
.donut-wrap{position:relative;width:150px;height:150px;flex-shrink:0}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center-lbl{font-size:9.5px;font-weight:600;color:var(--t3);text-align:center;letter-spacing:.3px;line-height:1.4}
.donut-center-val{font-size:17px;font-weight:900;color:var(--t1);letter-spacing:-0.5px;text-align:center}
.donut-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:14px;width:100%}
.dl-item{display:flex;flex-direction:column;gap:4px;padding:8px 10px;background:var(--s2);border-radius:9px;cursor:default;transition:.12s}
.dl-item:hover{background:var(--bdr)}
.dl-dot{width:24px;height:3px;border-radius:2px;flex-shrink:0}
.dl-name{font-size:11px;font-weight:500;color:var(--t2);line-height:1.2}
.dl-pct{font-size:15px;font-weight:800;color:var(--t1);letter-spacing:-0.5px;line-height:1}

/* ─── W1 LEGEND ─── */
.ff-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 20px 14px;border-top:1px solid var(--bdr)}
.ff-leg-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--t2)}
.ff-leg-dots{display:flex;gap:2px}
.ff-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* ─── CONNECTED M+F BAR ─── */
.connect-bar{display:flex;height:12px;border-radius:20px;overflow:hidden;gap:2px;margin:10px 0 0}
.cb-seg{height:100%;min-width:2px;transition:filter .15s}
.connect-bar:hover .cb-seg{filter:brightness(.95)}
.connect-bar:hover .cb-seg:hover{filter:brightness(1.12) saturate(1.2)}

/* ─── W1 AGE × GENDER TABLE ─── */
.ff-section{cursor:default;transition:background .15s;border-radius:8px;padding:8px 4px}
.ff-section+.ff-section{margin-top:2px;padding-top:10px;border-top:1px dashed var(--bdr)}
.ff-section:hover{background:var(--s2)}
.agdt{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.agdt-hd{display:flex;align-items:center;gap:6px;padding-bottom:4px;margin-bottom:0;border-bottom:none}
.agdt-spacer{width:52px;flex-shrink:0}
.agdt-col-hd{flex:1;font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:3px}
.agdt-col-hd.m{color:#4F4DE8}.agdt-col-hd.f{color:#F472B6}
.agdt-col-hd i{font-size:11px}
.agdt-row{display:flex;align-items:center;gap:6px;border-radius:6px;padding:2px 0;transition:background .12s}
.agdt-row:hover{background:rgba(0,0,0,.03)}
.agdt-lbl{width:52px;flex-shrink:0;display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--t1);white-space:nowrap}
.agdt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.agdt-cell{flex:1;display:flex;align-items:center;gap:5px}
.agdt-bar-wrap{flex:1;height:5px;background:var(--s2);border-radius:20px;overflow:hidden}
.agdt-bar{height:100%;border-radius:20px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.agdt-bar.m{background:#4F4DE8;opacity:.85}
.agdt-bar.f{background:#F472B6;opacity:.85}
.agdt-count{font-size:10px;font-weight:600;color:var(--t2);min-width:34px;text-align:right;flex-shrink:0}

/* ─── W3 THEMED TABS ─── */
.w3-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--bdr);margin-bottom:14px;flex-shrink:0}
.w3-tab{padding:7px 18px;border:none;background:none;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap}
.w3-tab.on{color:var(--pu);border-bottom-color:var(--pu)}
.w3-tab:hover:not(.on){color:var(--t1)}

/* ─── COMPACT AGE LEGEND ─── */
.age-legend-compact{display:flex;flex-wrap:nowrap;gap:0;margin-bottom:12px;padding:0;background:none;border-radius:0;flex-shrink:0;overflow:hidden}
.alc-item{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--t2);padding:5px 10px;background:var(--s2);border-radius:8px;white-space:nowrap;flex-shrink:0}
.alc-item+.alc-item{margin-left:5px}
.alc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.alc-range{font-size:9.5px;color:var(--t3);margin-left:1px}

/* ─── W7 ROW HOVER ─── */
.store-row{transition:background .12s;border-radius:8px;padding:4px 6px;margin:0 -6px;cursor:default}
.store-row:hover{background:var(--s2)}
.store-row:hover .store-bar{filter:brightness(1.08)}
.store-row:hover .vsbar-seg{filter:brightness(1.08)}

/* ─── W7 AGE GROUP PROGRESS ─── */
.w7-store-scroll{overflow-y:auto;overflow-x:hidden;max-height:240px;padding-right:4px;min-width:0;scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}
.w7-store-scroll::-webkit-scrollbar{width:4px}
.w7-store-scroll::-webkit-scrollbar-track{background:transparent}
.w7-store-scroll::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:4px}
.w7-age-bars{display:flex;flex-direction:column;gap:3px;margin-top:7px}
.w7-ab-row{display:flex;align-items:center;gap:6px}
.w7-ab-lbl{font-size:10px;color:var(--t3);width:44px;text-align:right;flex-shrink:0;white-space:nowrap}
.w7-ab-track{flex:1;height:5px;background:var(--s2);border-radius:20px;overflow:hidden}
.w7-ab-fill{height:100%;border-radius:20px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.w7-ab-val{font-size:10px;font-weight:700;color:var(--t2);width:26px;text-align:right;flex-shrink:0}

/* ─── INFO POPOVER ─── */
.info-pop{position:fixed;background:var(--white);border:1px solid var(--bdr);border-radius:12px;padding:12px 16px;box-shadow:0 8px 28px rgba(0,0,0,.14);z-index:600;max-width:260px;display:none;animation:fdrop .15s ease}
.info-pop.show{display:block}
.info-pop-title{font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:5px}
.info-pop-body{font-size:11.5px;color:var(--t2);line-height:1.55}

/* ─── W7 TWO-LINE ROW ─── */
.w7-store-row{display:flex;flex-direction:column;gap:5px;padding:8px 0;border-bottom:1px solid var(--s2);cursor:default;transition:background .12s}
.w7-store-row:hover{background:var(--s2);padding-left:8px;padding-right:8px;margin:0 -8px}
.w7-row-top{display:flex;align-items:center;gap:8px}
.w7-rank{font-size:11px;font-weight:700;color:var(--t3);width:14px;text-align:right;flex-shrink:0}
.w7-name{font-size:13px;font-weight:500;color:var(--t1);flex:1}
.w7-val{font-size:13px;font-weight:700;color:var(--t1);flex-shrink:0}
.vsbar-wrap{display:flex;gap:2px;height:11px;border-radius:20px;overflow:hidden;width:100%;min-width:0}
.vsbar-seg{border-radius:20px;height:100%;transition:filter .15s}

/* ─── AGE GROUP LEGEND ─── */
.age-legend{background:var(--s2);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;margin-bottom:14px}
.age-legend-hd{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;cursor:pointer;user-select:none}
.age-legend-hd-title{font-size:12px;font-weight:700;color:var(--t1)}
.age-legend-hd-icon{font-size:13px;color:var(--t3);transition:transform .2s}
.age-legend-hd-icon.collapsed{transform:rotate(180deg)}
.age-legend-body{display:flex;align-items:stretch;border-top:1px solid var(--bdr);overflow:hidden;transition:max-height .25s ease}
.age-legend-body.hidden{display:none}
.age-grp{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px 14px}
.age-grp+.age-grp{border-left:1px solid var(--bdr)}
.age-grp-lbl{font-size:11.5px;color:var(--t1);line-height:1.3}
.age-grp-lbl b{font-weight:700}
.age-grp-lbl span{font-weight:400;color:var(--t3)}
.age-grp-gender{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.agi{display:flex;align-items:center;gap:3px;font-size:12px}
.agi-m{color:#4F4DE8}
.agi-f{color:#F472B6}
.agi i{font-size:12px}
.age-sq{width:14px;height:14px;border-radius:3px;flex-shrink:0}

/* ─── GENDER LEGEND ─── */
.gender-legend{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.gl-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--t2)}
.gl-line{width:24px;height:2.5px;border-radius:2px}

/* ─── SEG TABS (Gender/Age) ─── */
.seg-tabs{display:flex;background:var(--s2);border-radius:8px;padding:3px;gap:2px;margin-bottom:14px;align-self:flex-start;flex-shrink:0}
.seg-tab{padding:5px 16px;border-radius:6px;border:none;background:none;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:.12s;white-space:nowrap}
.seg-tab.on{background:var(--white);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* ─── TREND LEGEND ─── */
.wgt-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}
.wl-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t2)}
.wl-line{height:3px;width:18px;border-radius:2px}
.wl-box{width:10px;height:10px;border-radius:3px}

/* ─── STORE RANKING ─── */
.store-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.store-hd-left{font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:5px}
.store-hd-left i{font-size:13px;color:var(--t3)}
.store-hd-right{font-size:11px;color:var(--t3)}
.store-list{display:flex;flex-direction:column;gap:11px}
.store-row{display:flex;align-items:center;gap:10px}
.store-rank{font-size:11px;font-weight:700;color:var(--t3);width:14px;text-align:right;flex-shrink:0}
.store-name{font-size:12.5px;font-weight:500;color:var(--t1);width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.store-bar-wrap{flex:1;height:7px;background:var(--s2);border-radius:20px;overflow:hidden}
.store-bar{height:100%;border-radius:20px;background:var(--pu)}
.store-val{font-size:12px;font-weight:700;color:var(--t1);min-width:38px;text-align:right;flex-shrink:0}

/* ─── TROPHY PANEL ─── */
.trophy-panel{width:270px;flex-shrink:0;border-right:1px solid var(--bdr);padding:20px;background:var(--s2)}
.trophy-card{background:linear-gradient(135deg,#181830 0%,#1e1b4b 60%,#312e81 100%);border-radius:14px;padding:20px;height:100%;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.trophy-card::before{content:'';position:absolute;top:-50px;right:-50px;width:150px;height:150px;border-radius:50%;background:rgba(99,102,241,.18);pointer-events:none}
.trophy-card::after{content:'';position:absolute;bottom:-40px;left:-30px;width:110px;height:110px;border-radius:50%;background:rgba(244,114,182,.1);pointer-events:none}
.trophy-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:8px}
.trophy-store-name{font-size:16px;font-weight:800;color:#fff;letter-spacing:-0.3px;line-height:1.2;margin-bottom:10px}
.trophy-store-name em{color:#A5A3FF;font-style:normal}
.trophy-sub-lbl{font-size:10px;color:rgba(255,255,255,.35);margin-bottom:4px}
.trophy-main-num{font-size:36px;font-weight:900;letter-spacing:-2px;color:#fff;line-height:1}
.trophy-ico-badge{position:absolute;top:16px;right:16px;width:34px;height:34px;background:rgba(217,117,0,.25);border-radius:10px;display:flex;align-items:center;justify-content:center}
.trophy-ico-badge i{font-size:18px;color:#FCD34D}
.trophy-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px;position:relative;z-index:1}
.trophy-mini{background:rgba(255,255,255,.07);border-radius:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.06)}
.trophy-mini-lbl{font-size:9px;color:rgba(255,255,255,.35);margin-bottom:3px;letter-spacing:.3px}
.trophy-mini-val{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.5px}

/* ─── MULTI-SEGMENT BAR (W1, W7) ─── */
.multibar{height:10px;border-radius:20px;display:flex;gap:2px;overflow:hidden;margin-bottom:8px}
.mbs{border-radius:20px;min-width:2px}
.store-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.sl-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t2)}
.sl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ─── W3 DARK TOGGLE TABS ─── */
.dark-tabs{display:flex;background:#111112;border-radius:9px;padding:3px;gap:0;align-self:flex-start;flex-shrink:0}
.dark-tab{padding:6px 20px;border-radius:7px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;background:transparent;color:rgba(255,255,255,.45)}
.dark-tab.on{background:var(--white);color:var(--t1)}

/* ─── W7 TROPHY PANEL ─── */
.w7-tp{background:var(--s2);border-radius:14px;padding:18px;display:flex;flex-direction:column;height:100%;min-height:220px}
.w7-tp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.w7-tp-badge{width:46px;height:46px;border-radius:13px;background:#FEF3C7;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.w7-tp-badge i{font-size:22px;color:#D97500}
.w7-tp-store{font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-0.4px;line-height:1.25}
.w7-tp-lbl{font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.w7-tp-num{font-size:40px;font-weight:900;letter-spacing:-2px;color:var(--t1);line-height:1;margin-bottom:16px}
.w7-tp-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.w7-tp-stat{background:var(--white);border-radius:10px;padding:10px 12px}
.w7-tp-stat-lbl{font-size:10px;color:var(--t3);font-weight:500;margin-bottom:4px;white-space:nowrap}
.w7-tp-stat-val{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-0.5px}

/* ─── W7 VISITOR SEGMENT BARS ─── */
/* vsbar-wrap defined above */
.vsbar-seg{border-radius:20px;height:100%}

/* ─── EDIT DASHBOARD MODE ─── */
.an-edit-bar{background:linear-gradient(90deg,#FFFBEB,#FEF3C7);border:1px solid #F59E0B;border-radius:12px;padding:11px 18px;display:none;align-items:center;gap:12px;margin-bottom:0}
.an-edit-bar.show{display:flex;animation:fu .3s ease}
.an-edit-bar-text{font-size:12.5px;color:#78350F;flex:1}
.an-edit-bar-text b{font-weight:700}
.an-edit-btns{display:flex;gap:8px}
.an-edit-done{font-size:12px;font-weight:700;color:#fff;background:#4F4DE8;border:none;border-radius:8px;padding:7px 18px;cursor:pointer;transition:.12s}
.an-edit-done:hover{background:#3e3cd4}
.an-edit-cancel{font-size:12px;font-weight:600;color:#92400E;background:transparent;border:1.5px solid #F59E0B;border-radius:8px;padding:6px 14px;cursor:pointer;transition:.12s}
.an-edit-cancel:hover{background:#FEF3C7}

/* EDIT MODE — widget overlays */
.edit-mode .wgt{outline:2px dashed rgba(79,77,232,.35);outline-offset:2px;overflow:visible !important}
.wgt-del{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:#D42B20;border:2px solid #fff;color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:30;box-shadow:0 2px 8px rgba(212,43,32,.4);transition:.15s}
.wgt-del i{font-size:11px}
.wgt-del:hover{transform:scale(1.15)}
.edit-mode .wgt{position:relative}
.edit-mode .wgt-del{display:flex}
.edit-mode .wgt-row{position:relative}

/* ADD WIDGET CARD */
.add-wgt-card{border:2px dashed var(--bdr);border-radius:16px;padding:36px 20px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:.2s;background:var(--white)}
.add-wgt-card:hover{border-color:var(--pu);background:var(--pu2)}
.edit-mode .add-wgt-card{display:flex;animation:fu .3s ease}
.awc-ico{width:52px;height:52px;border-radius:16px;background:var(--pu2);display:flex;align-items:center;justify-content:center}
.awc-ico i{font-size:24px;color:var(--pu)}
.awc-lbl{font-size:13.5px;font-weight:700;color:var(--t1)}
.awc-sub{font-size:12px;color:var(--t3)}

/* ─── ADD WIDGET MODAL ─── */
.awgt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:850;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.awgt-overlay.open{display:flex;animation:coverin .18s ease}
.awgt-modal{background:var(--white);border-radius:20px;width:820px;max-width:96vw;height:82vh;max-height:640px;box-shadow:0 32px 80px rgba(0,0,0,.22);display:flex;flex-direction:column;animation:modalin .2s cubic-bezier(.34,1.4,.64,1);overflow:hidden}
.awgt-hd{padding:20px 24px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.awgt-title{font-size:16px;font-weight:800;color:var(--t1)}
.awgt-sub{font-size:12px;color:var(--t3);margin-top:2px}
.awgt-close{background:none;border:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);font-size:16px;transition:.1s;flex-shrink:0}
.awgt-close:hover{background:var(--s2)}
.awgt-layout{display:flex;flex:1;overflow:hidden}
.awgt-sidebar{width:168px;flex-shrink:0;border-right:1px solid var(--bdr);padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.awgt-cat-btn{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;border:none;background:none;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;text-align:left;width:100%;transition:.12s;font-family:inherit}
.awgt-cat-btn i{font-size:15px;flex-shrink:0}
.awgt-cat-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.awgt-cat-btn:hover{background:var(--s2);color:var(--t1)}
.awgt-cat-btn.on{background:var(--pu2);color:var(--pu);font-weight:700}
.awgt-body{flex:1;overflow-y:auto;padding:16px}
.awgt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.awgt-tile{background:var(--white);border:1.5px solid var(--bdr);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s;position:relative}
.awgt-tile:hover{border-color:#c4b5fd;box-shadow:0 2px 12px rgba(79,77,232,.1)}
.awgt-tile.awgt-added{border-color:#4F4DE8;background:#FAFAFF}
.awgt-tile.awgt-pending{border-color:#4F4DE8;box-shadow:0 0 0 3px rgba(79,77,232,.12)}
.awgt-preview{height:76px;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 14px;flex-shrink:0}
.awgt-prev-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.awgt-prev-bars{flex:1;display:flex;flex-direction:column;gap:4px}
.awgt-tile-body{padding:10px 13px 4px}
.awgt-tile-name{font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:2px;line-height:1.3}
.awgt-tile-desc{font-size:11px;color:var(--t3);line-height:1.4}
.awgt-tog{margin:8px 13px 12px;padding:6px 0;border-radius:8px;border:1.5px solid var(--bdr);background:var(--white);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;width:calc(100% - 26px)}
.awgt-tog i{font-size:12px}
.awgt-tog:hover{border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.awgt-tog.added{background:var(--pu);color:#fff;border-color:var(--pu)}
.awgt-tog.added:hover{background:#3d3bc4}
.awgt-tog.pending{background:#EEF2FF;color:var(--pu);border-color:var(--pu)}
.awgt-ft{padding:14px 20px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--s2)}
.awgt-ft-info{font-size:12.5px;color:var(--t3)}
.awgt-ft-info b{color:var(--pu);font-weight:800}
.awgt-ft-btns{display:flex;gap:8px}
.awgt-cancel{padding:8px 18px;border-radius:9px;border:1.5px solid var(--bdr);background:var(--white);font-size:13px;font-weight:600;cursor:pointer;color:var(--t2);font-family:inherit;transition:.1s}
.awgt-cancel:hover{border-color:var(--t2)}
.awgt-apply{padding:8px 20px;border-radius:9px;border:none;background:var(--pu);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.awgt-apply:hover{background:#3d3bc4}
.awgt-sec-lbl{display:none}50%{transform:scale(.96)}100%{transform:scale(1)}}
/* ══ NEW ANALYTICS WIDGETS ══════════════════════════════ */

/* Filter dropdown in header */
.wgt-filter-sel{display:flex;align-items:center;gap:4px;background:var(--s2);border:1px solid var(--bdr);border-radius:7px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.wgt-filter-sel span{font-size:11px;font-weight:500;color:var(--t3);flex-shrink:0}
.wgt-filter-sel select{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;outline:none;font-family:inherit;-webkit-appearance:none;max-width:72px}
.wgt-filter-sel i{font-size:10px;color:var(--t3)}

/* Footfall stats notification bar */
.ft-stats-bar{display:flex;align-items:center;gap:0;border-radius:9px;overflow:hidden;margin-bottom:16px;flex-shrink:0}
.ft-stats-main{display:flex;align-items:center;gap:8px;background:#0D9488;color:#fff;padding:10px 18px;flex:1;font-size:12.5px;font-weight:600}
.ft-stats-val{font-size:16px;font-weight:900;letter-spacing:-0.5px}
.ft-stats-chip{display:flex;align-items:center;gap:8px;background:#D97500;color:#fff;padding:10px 14px;font-size:11.5px;font-weight:600;flex-shrink:0}
.ft-stats-x{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:0;font-size:13px;display:flex;align-items:center;margin-left:4px}
.ft-stats-x i{font-size:13px}

/* Gender stats bar (two halves) */
.gender-stats-bar{display:flex;border-radius:9px;overflow:hidden;margin-bottom:16px}
.gsb-m{background:#3B82F6;color:#fff;flex:1;padding:10px 16px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.gsb-f{background:#F97316;color:#fff;flex:1;padding:10px 16px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.gsb-val{font-size:15px;font-weight:900;letter-spacing:-0.5px}
.gsb-pct{font-size:11px;opacity:.8;font-weight:500}

/* Two-column chart grid */
.chart2-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart2-panel{display:flex;flex-direction:column}
.chart2-title{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:10px;text-align:center}
.chart2-legend{display:flex;justify-content:center;gap:16px;margin-top:10px}

/* Store performance two-column table */
.store-perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sp-col-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:4px;padding-bottom:10px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center}
.sp-col-hd-val{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3)}
.sp-item{padding:8px 0;border-bottom:1px solid var(--s2)}
.sp-item:last-child{border-bottom:none}
.sp-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.sp-item-name{font-size:12.5px;font-weight:500;color:var(--t1)}
.sp-item-val{font-size:12px;font-weight:700;color:var(--t1)}
.sp-item-bars{display:flex;flex-direction:column;gap:3px}
.sp-bar{height:5px;border-radius:20px;transition:width .7s ease}

/* Zone heatmap */
.zone-heatmap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 20px 20px;border-top:1px solid var(--bdr)}
.zone-cell{min-height:100px}
.zone-cell{border-radius:13px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;cursor:default;transition:filter .15s}
.zone-cell:hover{filter:brightness(1.06)}
.zone-cell::after{content:'';position:absolute;top:-25px;right:-25px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.zone-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);line-height:1.2;margin-bottom:6px}
.zone-pct{font-size:22px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1;margin-bottom:8px}
.zone-counts{display:flex;gap:10px}
.zone-cnt{display:flex;align-items:center;gap:3px;font-size:11px;color:rgba(255,255,255,.85);font-weight:600}
.zone-cnt i{font-size:12px}

/* Walk-in type tabs */
.wta-tabs{display:flex;background:var(--s2);border-radius:8px;padding:3px;gap:1px;align-self:flex-start;flex-shrink:0}
.wta-tab{padding:5px 14px;border-radius:6px;border:none;background:none;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:.12s;white-space:nowrap}
.wta-tab.on{background:var(--white);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* Walk-in type layout */
.wta-body{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 0;flex:1}
.wta-pie-wrap{flex-shrink:0}
.wta-legend-list{display:flex;flex-direction:column;gap:10px}
.wta-leg-item{display:flex;align-items:flex-start;gap:8px}
.wta-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:2px}
.wta-leg-info{}
.wta-leg-name{font-size:12px;font-weight:600;color:var(--t1);margin-bottom:1px}
.wta-leg-val{font-size:11px;color:var(--t3)}

/* ─── chart2 panel separator ─── */
.chart2-panel+.chart2-panel{border-left:1px solid var(--bdr);padding-left:16px}
.chart2-row{align-items:stretch}
.chart2-title{font-size:12px;font-weight:700;color:var(--t1);letter-spacing:-0.1px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--s2)}
.ft-stats-bar{border-radius:10px;margin-bottom:14px}
.gender-stats-bar{border-radius:10px;margin-bottom:14px}
/* Store perf column */
.store-perf-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 16px}
.sp-col-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--t1);margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px solid var(--bdr)}
.sp-badge-top{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--gr2);color:var(--gr)}
.sp-badge-bot{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--re2);color:var(--re)}
/* Demographics side panels */
.demo-side{flex:1;padding:16px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.demo-side+.demo-side{border-left:1px solid var(--bdr)}
.demo-side-title{font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--t3);margin-bottom:14px;align-self:flex-start}
.demo-donut-row{display:flex;align-items:center;gap:18px}
.demo-legend-list{display:flex;flex-direction:column;gap:7px;flex:1}
.dll-row{display:flex;align-items:center;gap:7px}
.dll-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dll-name{font-size:11.5px;color:var(--t2);flex:1}
.dll-val{font-size:11.5px;font-weight:700;color:var(--t1)}
/* Treemap */
.tm-toolbar{display:flex;align-items:center;justify-content:space-between;padding:9px 20px;background:var(--s2);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.tm-breadcrumb{display:flex;align-items:center;gap:5px;flex:1;overflow:hidden}
.tmbc-item{font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;white-space:nowrap;transition:.12s}
.tmbc-item:hover:not(.active){color:var(--pu)}
.tmbc-item.active{font-weight:700;color:var(--t1);cursor:default}
.tmbc-sep{color:var(--t3);font-size:10px;flex-shrink:0}
.tm-level-badge{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:var(--white);border:1px solid var(--bdr);border-radius:20px;padding:3px 10px;color:var(--t2);flex-shrink:0}
.tm-canvas-wrap{padding:12px 16px 16px}
.tm-canvas{width:100%;height:280px;display:block;cursor:pointer}
.tm-kpi-wrap{padding:16px 20px 20px;border-top:1px solid var(--bdr);animation:fu .3s ease}
.tm-kpi-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.tm-kpi-city{font-size:14px;font-weight:800;color:var(--t1);letter-spacing:-0.3px}
.tm-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tm-kpi-card{background:var(--s2);border-radius:12px;padding:13px 15px;border:1px solid var(--bdr);transition:.15s;cursor:default}
.tm-kpi-card:hover{background:var(--pu2);border-color:var(--pu)}
.tm-kpi-card:hover .tm-kpi-val{color:var(--pu)}
.tm-kpi-lbl{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px;line-height:1.3}
.tm-kpi-val{font-size:20px;font-weight:900;letter-spacing:-0.8px;color:var(--t1);line-height:1;transition:.15s}
.tm-kpi-sub{font-size:10px;color:var(--t3);margin-top:3px}

/* ═══════════════════════════════════════════════════════ */

/* ─── ADD NEW TASK MODAL ─── */
.newtask-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:920;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.newtask-ov.open{display:flex;animation:coverin .18s ease}
.newtask-modal{background:var(--white);border-radius:22px;width:540px;max-width:95vw;max-height:92vh;overflow-y:auto;box-shadow:0 28px 70px rgba(0,0,0,.22);padding:28px 28px 24px;animation:modalin .2s cubic-bezier(.34,1.4,.64,1);display:flex;flex-direction:column;gap:20px}
.nt-title{font-size:22px;font-weight:900;color:var(--t1);letter-spacing:-0.5px}
.nt-field{display:flex;flex-direction:column;gap:7px}
.nt-lbl{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--t1)}
.nt-lbl span{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--t3)}
.nt-inp{width:100%;background:var(--white);border:1.5px solid var(--bdr);border-radius:12px;padding:13px 16px;font-size:14px;color:var(--t1);outline:none;font-family:inherit;transition:.15s}
.nt-inp:focus{border-color:var(--pu);box-shadow:0 0 0 3px rgba(79,77,232,.1)}
.nt-inp::placeholder{color:var(--t3)}
.nt-sel{width:100%;background:var(--white);border:1.5px solid var(--bdr);border-radius:12px;padding:13px 16px;font-size:14px;color:var(--t1);outline:none;font-family:inherit;cursor:pointer;transition:.15s;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23AEACA8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.nt-sel:focus{border-color:var(--pu);box-shadow:0 0 0 3px rgba(79,77,232,.1)}
.nt-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nt-date-wrap{display:flex;gap:8px}
.nt-date-wrap .nt-inp{flex:1}
.nt-cal-btn{width:50px;height:50px;border:1.5px solid var(--bdr);border-radius:12px;background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:.15s}
.nt-cal-btn i{font-size:20px;color:var(--t2)}
.nt-cal-btn:hover{border-color:var(--pu);background:var(--pu2)}
.nt-cal-btn:hover i{color:var(--pu)}
/* Inline mini date picker */
.nt-cal-drop{position:absolute;top:calc(100% + 6px);right:0;background:var(--white);border:1.5px solid var(--bdr);border-radius:13px;box-shadow:0 12px 32px rgba(0,0,0,.13);z-index:500;display:none;padding:12px;width:260px;animation:fdrop .15s ease}
.nt-cal-drop.open{display:block}
.nt-cal-presets{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--bdr)}
.nt-cal-preset{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--s2);border:1px solid var(--bdr);color:var(--t2);cursor:pointer;transition:.12s}
.nt-cal-preset:hover,.nt-cal-preset.on{background:var(--pu2);color:var(--pu);border-color:var(--pu)}
.nt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.nt-cal-dh{font-size:9.5px;font-weight:700;color:var(--t3);text-align:center;padding:3px 0}
.nt-cal-d{font-size:12px;color:var(--t2);text-align:center;padding:5px 2px;border-radius:6px;cursor:pointer;transition:.1s}
.nt-cal-d:hover{background:var(--s2)}
.nt-cal-d.today{font-weight:700;color:var(--pu)}
.nt-cal-d.sel{background:var(--pu);color:#fff;font-weight:700}
.nt-cal-d.empty{cursor:default}
.nt-cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.nt-cal-nav{background:none;border:none;cursor:pointer;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.1s}
.nt-cal-nav:hover{background:var(--s2)}
.nt-cal-nav i{font-size:13px}
.nt-cal-month-lbl{font-size:12.5px;font-weight:700;color:var(--t1)}
.nt-cal-apply{width:100%;margin-top:10px;padding:8px;border:none;border-radius:8px;background:var(--pu);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:.12s}
.nt-cal-apply:hover{background:#3e3cd4}

/* ── Profile dropdown ── */
.profile-wrap{position:relative}
.profile-drop{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--bdr);border-radius:13px;box-shadow:0 14px 36px rgba(0,0,0,.13);width:230px;z-index:400;display:none;overflow:hidden}
.theme-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--bdr)}
.theme-toggle-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--t2)}
.theme-toggle-label i{font-size:15px}
.theme-sw{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.theme-sw input{opacity:0;width:0;height:0;position:absolute}
.theme-sw-track{position:absolute;inset:0;background:var(--s2);border:1.5px solid var(--bdr);border-radius:100px;transition:.2s}
.theme-sw input:checked~.theme-sw-track{background:var(--pu);border-color:var(--pu)}
.theme-sw-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s;pointer-events:none}
.theme-sw input:checked~.theme-sw-thumb{left:23px}
.profile-drop.open{display:block;animation:fdrop .15s ease}
.profile-drop-hd{padding:14px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:10px;background:var(--s2)}
.profile-drop-name{font-size:13px;font-weight:700;color:var(--t1)}
.profile-drop-email{font-size:11px;color:var(--t3);margin-top:1px}
.profile-drop-item{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:13px;color:var(--t2);cursor:pointer;transition:.1s}
.profile-drop-item:hover{background:var(--s2);color:var(--t1)}
.profile-drop-item i{font-size:15px;flex-shrink:0;width:18px}
.profile-drop-item.logout{color:var(--re)}
.profile-drop-item.logout:hover{background:var(--re2);color:var(--re)}
.profile-drop-div{height:1px;background:var(--bdr);margin:3px 0}

/* ══ REPORTS PAGE ═══════════════════════════════════════ */
.rp-layout{display:flex;overflow:hidden;min-height:0;flex:1}
.rp-left{width:40%;flex-shrink:0;overflow-y:auto;background:var(--page);padding:20px 18px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--bdr)}
.rp-left::-webkit-scrollbar{width:0}
.rp-title{font-size:20px;font-weight:900;color:var(--t1);letter-spacing:-0.5px}
.rp-sec{background:var(--white);border:1px solid var(--bdr);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.rp-sec-lbl{font-size:13px;font-weight:800;color:var(--t1)}
.rp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rp-metric-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 8px;border:2px solid var(--bdr);border-radius:11px;cursor:pointer;transition:.15s;background:var(--s2);text-align:center}
.rp-metric-opt:hover{border-color:var(--pu)}
.rp-metric-opt.on{border-color:var(--pu);background:var(--pu2)} .rp-metric-opt:hover{border-color:var(--pu)}
.rp-metric-opt i{font-size:17px;color:var(--t3);flex-shrink:0}
.rp-metric-opt.on i{color:var(--pu)}
.rp-metric-opt span{font-size:11.5px;font-weight:700;color:var(--t1);line-height:1.3}
.rp-radios{display:flex;gap:20px}
.rp-radio{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);user-select:none}
.rp-radio-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--bdr);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s}
.rp-radio-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--pu);opacity:0;transition:.15s}
.rp-radio.on .rp-radio-dot{border-color:var(--pu)}
.rp-radio.on .rp-radio-dot::after{opacity:1}
.rp-radio.on{color:var(--t1);font-weight:600}
.rp-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp-date-box{background:var(--white);border:1.5px solid var(--bdr);border-radius:10px;padding:10px 13px;cursor:pointer;transition:.15s}
.rp-date-box:hover{border-color:var(--pu)}
.rp-date-box-lbl{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.5px;margin-bottom:3px}
.rp-date-box-val{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--t1)}
.rp-date-box-val i{font-size:14px;color:var(--t3)}
.rp-filters-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.rp-fw{grid-column:1 / -1}
.rp-sw{display:flex;flex-direction:column;gap:4px}
.rp-sw-lbl{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.5px}
.rp-sel{width:100%;background:var(--white);border:1.5px solid var(--bdr);border-radius:9px;padding:8px 28px 8px 11px;font-size:12.5px;color:var(--t1);outline:none;font-family:inherit;cursor:pointer;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23AEACA8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:.15s}
.rp-sel:focus{border-color:var(--pu)}
.rp-cust-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rp-actions{display:grid;grid-template-columns:auto 1fr;gap:10px}
.rp-clear-btn{padding:11px 18px;border:1.5px solid var(--bdr);border-radius:11px;background:var(--white);font-size:13px;font-weight:700;color:var(--t1);cursor:pointer;transition:.15s}
.rp-clear-btn:hover{background:var(--s2)}
.rp-gen-btn{padding:11px;border:none;border-radius:11px;background:#5048E5;font-size:14px;font-weight:800;color:#fff;cursor:pointer;transition:.15s;letter-spacing:-0.2px}
.rp-gen-btn:hover{background:#4338CA}
/* Preview right */
.rp-right{flex:0 0 60%;display:flex;flex-direction:column;padding:12px 16px;gap:10px;overflow:hidden;min-height:0}
.rp-preview-hd{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.rp-preview-title{font-size:18px;font-weight:900;color:var(--t1)}
.rp-export-btns{display:flex;gap:8px}
.rp-export-btn{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--t2);background:var(--white);border:1.5px solid var(--bdr);border-radius:9px;padding:7px 13px;cursor:pointer;transition:.15s}
.rp-export-btn:hover{border-color:var(--pu);color:var(--pu)}
.rp-export-btn i{font-size:14px}
.rp-preview-panel{flex:1;background:var(--white);border:1px solid var(--bdr);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;position:relative;min-height:0}
.rp-empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px}
.rp-empty-ico{width:60px;height:60px;border-radius:18px;background:var(--s2);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.rp-empty-ico i{font-size:26px;color:var(--t3)}
.rp-empty-title{font-size:15px;font-weight:700;color:var(--t1)}
.rp-empty-sub{font-size:13px;color:var(--t3);max-width:260px;line-height:1.55}
/* Loader */
.rp-loader{display:none;flex-direction:column;align-items:center;gap:16px;padding:40px}
.rp-loader.show{display:flex;animation:fu .3s ease}
.rp-spinner{width:48px;height:48px;border:4px solid var(--bdr);border-top-color:#5048E5;border-radius:50%;animation:rpspin 1s linear infinite}
@keyframes rpspin{to{transform:rotate(360deg)}}
.rp-loader-steps{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.rp-loader-step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t3)}
.rp-loader-step.done{color:var(--gr)}
.rp-loader-step i{font-size:14px}
/* Report content */
.rp-report{display:none;width:100%;overflow-y:auto;padding:8px 10px;flex:1;min-height:0}
.rp-report.show{display:flex;flex-direction:column;animation:fu .4s ease;overflow-y:auto;max-height:100%}
.rp-report-inner{padding:22px}
.rp-rbrand{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--bdr)}
.rp-rbrand-logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#5048E5,#7C5CFC);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff}
.rp-rbrand-name{font-size:16px;font-weight:800;color:var(--t1)}
.rp-rsec{margin-bottom:22px}
.rp-rsec-title{font-size:13.5px;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:7px;margin-bottom:3px}
.rp-rsec-title i{font-size:14px;color:var(--pu)}
.rp-rsec-sub{font-size:11.5px;color:var(--t3);margin-bottom:12px}
.rp-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.rp-chart-box{background:var(--s2);border-radius:12px;padding:14px;display:flex;align-items:center;justify-content:center;min-height:140px}
.rp-insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-ins-card{border-radius:11px;padding:12px 14px;border:1.5px solid transparent}
.rp-ins-card.c1{background:var(--pu2);border-color:#C7C6F8}
.rp-ins-card.c2{background:var(--gr2);border-color:#A7E8C6}
.rp-ins-card.c3{background:var(--am2);border-color:#F5D88A}
.rp-ins-card.c4{background:#EFF6FF;border-color:#BFDBFE}
.rp-ins-title{font-size:12px;font-weight:800;color:var(--t1);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.rp-ins-title i{font-size:12px}
.rp-ins-text{font-size:11.5px;color:var(--t2);line-height:1.55}
.rp-table{width:100%;border-collapse:collapse;font-size:12px}
.rp-table th{padding:9px 10px;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);text-align:left;background:var(--s2);border-bottom:1px solid var(--bdr)}
.rp-table td{padding:9px 10px;color:var(--t1);border-bottom:1px solid var(--s2)}
.rp-table tr:hover td{background:var(--s2)}
/* ═══════════════════════════════════════════════════════ */
.nt-checkbox-row{display:flex;align-items:center;gap:10px;cursor:pointer;padding:2px 0}
.nt-checkbox{width:20px;height:20px;border:1.5px solid var(--bdr);border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s}
.nt-checkbox.checked{background:var(--pu);border-color:var(--pu)}
.nt-checkbox.checked::after{content:'';width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);display:block}
.nt-checkbox-lbl{font-size:14px;color:var(--t2);font-weight:500}
.nt-btns{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:4px}
.nt-cancel-btn{padding:14px;border:1.5px solid var(--bdr);border-radius:13px;background:var(--white);font-size:15px;font-weight:700;color:var(--t1);cursor:pointer;transition:.15s}
.nt-cancel-btn:hover{background:var(--s2)}
.nt-create-btn{padding:14px;border:none;border-radius:13px;background:#5048E5;font-size:15px;font-weight:700;color:#fff;cursor:pointer;transition:.15s}
.nt-create-btn:hover{background:#4338CA}

/* Task done confirmation */
.task-confirm{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:910;display:none;align-items:flex-end;justify-content:center;padding-bottom:40px;backdrop-filter:blur(2px)}
.task-confirm.open{display:flex;animation:coverin .15s ease}
.task-confirm-box{background:var(--white);border-radius:16px;padding:20px 24px;box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:14px;min-width:320px;animation:fu .2s ease}
.tc-task-name{font-size:14px;font-weight:700;color:var(--t1)}
.tc-q{font-size:13px;color:var(--t2)}
.tc-btns{display:flex;gap:8px}
.tc-yes{flex:1;padding:10px;border:none;border-radius:10px;background:#5048E5;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer}
.tc-no{flex:1;padding:10px;border:1.5px solid var(--bdr);border-radius:10px;background:var(--white);color:var(--t1);font-size:13.5px;font-weight:600;cursor:pointer}


/* ══ CHECKOUT ANALYTICS ═════════════════════════════════ */
.ca-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:0}
.ca-tab-seg{display:flex;background:var(--s2);border-radius:9px;padding:3px;gap:2px;margin-bottom:14px;flex-shrink:0}
.ca-seg{flex:1;padding:8px;border-radius:7px;border:none;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:.12s;background:none;font-family:inherit;white-space:nowrap}
.ca-seg.on{background:var(--pu);color:#fff;box-shadow:0 2px 8px rgba(79,77,232,.3)}
.ca-seg:hover:not(.on){background:var(--bdr);color:var(--t1)}
.ca-alert-list{display:flex;flex-direction:column;gap:11px}
.ca-alert-row{display:flex;align-items:center;gap:12px}
.ca-alert-cam{font-size:13px;font-weight:700;color:var(--t1);width:64px;flex-shrink:0}
.ca-alert-track{flex:1;height:8px;background:var(--s2);border-radius:20px;overflow:hidden}
.ca-alert-fill{height:100%;background:var(--pu);border-radius:20px;transition:width .8s ease}
.ca-alert-cnt{font-size:13px;font-weight:700;color:var(--t1);min-width:18px;text-align:right;flex-shrink:0}
.ca-queue-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.ca-q-num{font-size:22px;font-weight:900;color:var(--t1);letter-spacing:-.8px;margin-bottom:2px}
.ca-q-sub{font-size:12px;color:var(--t3);margin-bottom:12px;display:flex;align-items:center;gap:5px}
.ca-q-bar{display:flex;height:8px;border-radius:20px;overflow:hidden;gap:2px;margin-bottom:8px}
.ca-q-seg{border-radius:20px}
.ca-q-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.ca-q-leg{}.ca-q-leg-val{font-size:12.5px;font-weight:700;color:var(--t1)}.ca-q-leg-lbl{font-size:11px;color:var(--t3)}
.ca-donuts-row{display:flex;gap:12px}.ca-donut-box{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}.ca-donut-lbl{font-size:11px;color:var(--t3);font-weight:600}
.ca-config-btn{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--pu);background:var(--pu2);border:1.5px solid #C7C6F8;border-radius:9px;padding:7px 16px;cursor:pointer;transition:.12s}
.ca-config-btn:hover{background:#DDDCFA}.ca-config-btn i{font-size:14px}
/* View Snapshots btn */
.view-snaps-btn{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:7px 14px;cursor:pointer;transition:.12s}
.an-edit-db-btn{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t1);background:var(--white);border:1.5px solid var(--bdr);border-radius:9px;padding:7px 14px;cursor:pointer;transition:.12s;font-family:inherit}
.an-edit-db-btn:hover{border-color:var(--pu);color:var(--pu)}
.an-edit-db-btn.active{background:var(--pu);color:#fff;border-color:var(--pu)}
.view-snaps-btn:hover{background:#3e3cd4}.view-snaps-btn i{font-size:13px}


/* ══ TASK CHECKLIST PAGE ═══════════════════════════════ */
.tcm-progress-card{background:var(--white);border:1px solid var(--bdr);border-radius:16px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:0}
.tcm-progress-left{flex:1}
.tcm-progress-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.tcm-progress-counts{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.5px;margin-bottom:10px}
.tcm-progress-counts span{color:var(--pu)}
.tcm-progress-bar-wrap{height:8px;background:var(--s2);border-radius:20px;overflow:hidden;margin-bottom:8px}
.tcm-progress-bar{height:100%;background:linear-gradient(90deg,var(--pu),#7C5CFC);border-radius:20px;transition:width .8s ease;width:0%}
.tcm-progress-sub{font-size:12px;color:var(--t3)}
.tcm-progress-right{flex-shrink:0}
.tcm-progress-ring-wrap{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center}
.tcm-ring-pct{position:absolute;font-size:16px;font-weight:800;color:var(--pu);letter-spacing:-.5px}
.tcm-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--page)}
.tcm-top{background:var(--white);border-bottom:1px solid var(--bdr);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.tcm-title{font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.4px}
.tcm-create-btn{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:10px;padding:9px 20px;cursor:pointer;transition:.12s}
.tcm-create-btn:hover{background:#3e3cd4}
.tcm-create-btn i{font-size:15px}
.tcm-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}
/* Active tasks card */
.tcm-card{background:var(--white);border:1px solid var(--bdr);border-radius:14px;overflow:hidden}
.tcm-card-hd{padding:14px 20px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.tcm-card-title{font-size:14px;font-weight:700;color:var(--t1)}
.tcm-filter-tabs{display:flex;gap:6px}
.tcm-ftab{padding:5px 14px;border-radius:20px;border:1.5px solid var(--bdr);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;transition:.12s;background:var(--white)}
.tcm-ftab:hover{border-color:var(--pu);color:var(--pu)}
.tcm-ftab.on{background:var(--pu);color:#fff;border-color:var(--pu)}
/* Task rows */
.tcm-task-list{display:flex;flex-direction:column}
.tcm-task-row{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--s2);transition:background .12s}
.tcm-task-row:last-child{border-bottom:none}
.tcm-task-row:hover{background:var(--s2)}
.tcm-task-ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--bdr);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:.15s}
.tcm-task-ck.done{background:var(--gr);border-color:var(--gr);color:#fff}
.tcm-task-ck.done i{font-size:12px}
.tcm-task-ck.urgent{border-color:var(--am);border-width:2.5px}
.tcm-task-ck.ok{border-color:var(--pu);border-width:2px}
.tcm-task-body{flex:1;min-width:0}
.tcm-task-name{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:3px}
.tcm-task-name.done-txt{text-decoration:line-through;color:var(--t3);font-weight:400}
.tcm-task-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tcm-task-store{font-size:12px;color:var(--t3)}
.tcm-task-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.tcm-task-badge.done-b{background:var(--gr2);color:var(--gr)}
.tcm-task-badge.urgent-b{background:var(--am2);color:var(--am)}
.tcm-task-badge.ok-b{background:var(--pu2);color:var(--pu)}
.tcm-task-proof{font-size:11px;color:var(--gr);display:flex;align-items:center;gap:3px}
.tcm-task-proof i{font-size:12px}
.tcm-upload-btn{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--pu);background:var(--pu2);border:1.5px solid #C7C6F8;border-radius:8px;padding:6px 12px;cursor:pointer;transition:.12s;white-space:nowrap;flex-shrink:0}
.tcm-upload-btn:hover{background:#DDDCFA}
.tcm-upload-btn i{font-size:13px}
/* History section */
.tcm-hist-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tcm-date-inp{background:var(--s2);border:1.5px solid var(--bdr);border-radius:8px;padding:6px 12px;font-size:12.5px;font-family:inherit;color:var(--t1);outline:none;transition:.15s}
.tcm-date-inp:focus{border-color:var(--pu)}
.tcm-hist-table{width:100%;border-collapse:collapse}
.tcm-hist-table th{padding:10px 16px;font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);text-align:left;background:var(--s2);border-bottom:1px solid var(--bdr)}
.tcm-hist-table td{padding:12px 16px;font-size:13px;color:var(--t1);border-bottom:1px solid var(--s2)}
.tcm-hist-table tr:hover td{background:var(--s2)}
.tcm-hist-table tr:last-child td{border-bottom:none}
.tcm-proof-thumb{width:40px;height:30px;border-radius:6px;object-fit:cover;border:1px solid var(--bdr);cursor:pointer}
.tcm-proof-none{font-size:12px;color:var(--t3)}
/* Upload proof modal */
.upload-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:880;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.upload-ov.open{display:flex;animation:coverin .18s ease}
.upload-modal{background:var(--white);border-radius:16px;width:460px;max-width:95vw;box-shadow:0 24px 64px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.upload-hd{padding:18px 22px 14px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
.upload-title{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:2px}
.upload-sub{font-size:12px;color:var(--t3)}
.upload-close{width:30px;height:30px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2)}
.upload-close i{font-size:14px}
.upload-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.upload-field{display:flex;flex-direction:column;gap:6px}
.upload-lbl{font-size:12px;font-weight:700;color:var(--t1)}
.upload-textarea{width:100%;background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;padding:10px 13px;font-size:13.5px;color:var(--t1);outline:none;font-family:inherit;resize:vertical;min-height:80px;transition:.15s}
.upload-textarea:focus{border-color:var(--pu);background:var(--white)}
.upload-dropzone{border:2px dashed var(--bdr);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:.15s;background:var(--s2)}
.upload-dropzone:hover{border-color:var(--pu);background:var(--pu2)}
.upload-dropzone i{font-size:28px;color:var(--t3);margin-bottom:8px;display:block}
.upload-dropzone-txt{font-size:13px;font-weight:600;color:var(--t2)}
.upload-dropzone-sub{font-size:11.5px;color:var(--t3);margin-top:3px}
.upload-preview{display:none;align-items:center;gap:10px;padding:10px 12px;background:var(--gr2);border-radius:9px;border:1px solid #A7E8C6}
.upload-preview.show{display:flex}
.upload-preview i{font-size:16px;color:var(--gr);flex-shrink:0}
.upload-preview-name{font-size:13px;font-weight:600;color:var(--gr);flex:1}
.upload-preview-rm{background:none;border:none;cursor:pointer;color:var(--t3);font-size:16px;padding:0}
.upload-ft{padding:14px 22px 18px;border-top:1px solid var(--bdr);display:flex;gap:9px;justify-content:flex-end}
.upload-cancel{font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:8px 18px;cursor:pointer}
.upload-submit{font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:8px 20px;cursor:pointer}
.upload-submit:hover{background:#3e3cd4}
/* ═══════════════════════════════════════════════════════ */

/* ══ SNAPSHOTS ADVANCED ══════════════════════════════════ */
/* Action menu on snap card */
.snap-actions-bar{display:flex;gap:5px;padding:8px 13px;border-top:1px solid var(--s2);flex-wrap:wrap}
.snap-act{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:20px;border:1.5px solid var(--bdr);cursor:pointer;transition:.12s;background:var(--white);color:var(--t2);white-space:nowrap}
.snap-act:hover{border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.snap-act.on{background:var(--pu2);color:var(--pu);border-color:var(--pu)}
.snap-act.staff-on{background:#FEF3C7;color:#92400E;border-color:#FDE68A}
.snap-act.watch-on{background:var(--re2);color:var(--re);border-color:#FECACA}
.snap-act.merge-sel{background:#EEF2FF;color:#4F4DE8;border-color:#C7D2FE}
.snap-act.merge-with{background:#F0FDF4;color:#16A34A;border-color:#BBF7D0}
.snap-act.dup-act{background:#FEF3C7;color:#92400E;border-color:#FDE68A}
.snap-act i{font-size:11px}
/* Snap card selected state redesign */
.snap-card.snap-selected .snap-info{background:linear-gradient(180deg,var(--pu2) 0%,var(--white) 60%)}
/* Staff badge overlay */
.snap-staff-badge{position:absolute;top:7px;left:7px;background:rgba(245,158,11,.9);border-radius:5px;padding:2px 7px;font-size:9px;font-weight:800;color:#fff;letter-spacing:.5px;display:none}
.snap-card.is-staff .snap-staff-badge{display:block}
/* Merge Duplicate Modal */
.merge-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:920;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.merge-overlay.open{display:flex;animation:coverin .18s ease}
.merge-modal{background:var(--white);border-radius:20px;width:800px;max-width:96vw;max-height:90vh;box-shadow:0 28px 70px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.merge-hd{padding:18px 24px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.merge-hd-left{display:flex;flex-direction:column;gap:2px}
.merge-title{font-size:16px;font-weight:800;color:var(--t1)}
.merge-sub{font-size:12px;color:var(--t3)}
.merge-close{width:30px;height:30px;border-radius:50%;background:var(--s2);border:none;cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center}
.merge-close i{font-size:14px}
.merge-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:18px}
/* Similarity banner */







/* Side by side photos */
.merge-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.merge-panel{border:1.5px solid var(--bdr);border-radius:14px;overflow:hidden}
.merge-panel-photo{aspect-ratio:16/9;background:#111;position:relative;overflow:hidden}
.merge-panel-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.75)}
.merge-panel-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.65);border-radius:6px;padding:3px 8px;font-size:10.5px;font-weight:700;color:#fff}
.merge-panel-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.merge-panel-id{font-size:14px;font-weight:800;color:var(--t1)}
.merge-panel-section{display:flex;flex-direction:column;gap:5px}
.merge-panel-lbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3)}
/* Inline selectors */
.merge-sel-row{display:flex;gap:5px;flex-wrap:wrap}
.merge-sel-chip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--bdr);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:.12s;background:var(--white)}
.merge-sel-chip:hover{border-color:var(--pu);color:var(--pu)}
.merge-sel-chip.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.merge-sel-chip.staff-chip.on{background:#F59E0B;color:#fff;border-color:#F59E0B}
.merge-sel-chip.watch-chip.on{background:var(--re);color:#fff;border-color:var(--re)}
/* Merge footer actions */
.merge-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 24px;border-top:1px solid var(--bdr);flex-shrink:0}
.merge-btn-sep{font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1.5px solid var(--bdr);border-radius:11px;padding:12px;cursor:pointer;transition:.15s;text-align:center}
.merge-btn-sep:hover{background:var(--bdr)}
.merge-btn-confirm{font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:11px;padding:12px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px}
.merge-btn-confirm:hover{background:#3e3cd4}
.merge-btn-confirm i{font-size:15px}
/* Edit Visitor panel */
.merge-edit-section{background:var(--s2);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.merge-edit-title{font-size:12px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px}
.merge-edit-title i{font-size:13px;color:var(--pu)}
.merge-notes{width:100%;background:var(--white);border:1.5px solid var(--bdr);border-radius:8px;padding:8px 11px;font-size:13px;font-family:inherit;color:var(--t1);outline:none;resize:none;min-height:60px}
.merge-notes:focus{border-color:var(--pu)}


/* ══ VISITOR SNAPSHOTS MODAL ══════════════════════════ */
.snap-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.snap-overlay.open{display:flex;animation:coverin .18s ease}
.snap-modal{background:var(--white);border-radius:20px;width:92vw;max-width:1200px;height:88vh;box-shadow:0 28px 70px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.snap-hd{padding:18px 24px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.snap-hd-left{display:flex;align-items:center;gap:12px}
.snap-title{font-size:16px;font-weight:800;color:var(--t1)}
.snap-live{display:inline-flex;align-items:center;gap:5px;background:var(--re2);color:var(--re);font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.snap-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--re);animation:livepulse 1.4s ease infinite}
.snap-close{width:32px;height:32px;border-radius:50%;background:var(--s2);border:none;cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center}
.snap-close:hover{background:var(--bdr)}
.snap-close i{font-size:14px}
.snap-refresh-btn{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--t2);background:var(--s2);border:1.5px solid var(--bdr);border-radius:8px;padding:6px 13px;cursor:pointer;transition:.12s}
.snap-refresh-btn:hover{border-color:var(--pu);color:var(--pu)}
.snap-refresh-btn i{font-size:14px}
.snap-filters{padding:13px 24px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.snap-ftabs{display:flex;gap:7px}
.snap-ftab{padding:6px 18px;border-radius:24px;border:1.5px solid var(--bdr);font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;transition:.15s;background:var(--white)}
.snap-ftab:hover{border-color:var(--pu);color:var(--pu)}
.snap-ftab.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.snap-count-txt{font-size:13px;color:var(--t3)}.snap-count-txt b{color:var(--t1);font-weight:700}
.snap-body{flex:1;overflow-y:auto;padding:20px 24px}
.snap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.snap-card{border:1.5px solid var(--bdr);border-radius:13px;overflow:hidden;cursor:pointer;transition:.18s;background:var(--white)}
.snap-card:hover{border-color:#A5A3FF;box-shadow:0 4px 18px rgba(79,77,232,.1)}
.snap-card.snap-selected{border-color:var(--pu);box-shadow:0 0 0 3px rgba(79,77,232,.18)}
.snap-card.snap-dup{border-color:var(--am)}
.snap-thumb{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.snap-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.7) contrast(1.1)}
.snap-cam-id{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);border-radius:5px;padding:2px 7px;font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.3px}

.snap-rec::before{content:'';width:5px;height:5px;border-radius:50%;background:#EF4444;animation:livepulse 1.4s ease infinite}
.snap-dup-badge{position:absolute;top:7px;right:55px;background:rgba(217,117,0,.9);border-radius:5px;padding:2px 7px;font-size:9px;font-weight:800;color:#fff;letter-spacing:.5px}
.snap-event-lbl{position:absolute;bottom:7px;left:7px;border-radius:5px;padding:2px 8px;font-size:9.5px;font-weight:800;letter-spacing:.6px}
.snap-event-lbl.entry{background:rgba(21,160,102,.9);color:#fff}
.snap-event-lbl.exit{background:rgba(212,43,32,.9);color:#fff}
.snap-event-lbl.passerby{background:rgba(79,77,232,.9);color:#fff}
.snap-info{padding:12px 13px}
.snap-info-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.snap-vis-id{font-size:13.5px;font-weight:800;color:var(--t1)}
.snap-dem{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.snap-dem.f{background:#FFF1F2;color:#BE123C}
.snap-dem.m{background:#EFF6FF;color:#1D4ED8}
.snap-meta{display:flex;flex-direction:column;gap:3px;margin-bottom:7px}
.snap-meta-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t3)}
.snap-meta-item i{font-size:12px;flex-shrink:0}



.snap-action-btn{width:100%;margin-top:9px;padding:8px;border:none;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:.15s}
.snap-action-btn.select-btn{background:var(--pu);color:#fff}
.snap-action-btn.select-btn:hover{background:#3e3cd4}
.snap-action-btn.merge-btn{background:var(--am2);color:var(--am);border:1.5px solid #F5D88A}
.snap-action-btn.merge-btn:hover{background:#FDE68A}
.snap-action-btn i{font-size:13px}
.snap-footer{padding:13px 24px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--s2)}
.snap-footer-txt{font-size:13px;color:var(--t3)}.snap-footer-txt b{color:var(--t1);font-weight:700}
.snap-pager{display:flex;gap:8px}
.snap-pg-btn{width:34px;height:34px;border-radius:9px;background:var(--white);border:1.5px solid var(--bdr);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:.12s}
.snap-pg-btn:hover{border-color:var(--pu);color:var(--pu)}
.snap-pg-btn i{font-size:14px}

/* ─── TAB RENAME MODAL ─── */
.tab-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:700;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.tab-modal-overlay.open{display:flex;animation:coverin .15s ease}
.tab-modal{background:var(--white);border-radius:14px;width:340px;padding:22px 24px;box-shadow:0 20px 56px rgba(0,0,0,.18);animation:modalin .18s cubic-bezier(.34,1.4,.64,1)}
.tab-modal-title{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:14px}
.tab-modal-inp{width:100%;background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;padding:9px 14px;font-size:13.5px;color:var(--t1);outline:none;font-family:inherit}
.tab-modal-inp:focus{border-color:var(--pu);background:var(--white)}
.tab-modal-btns{display:flex;gap:9px;margin-top:16px}
.tab-modal-cancel{flex:1;font-size:13px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:9px;cursor:pointer}
.tab-modal-ok{flex:1;font-size:13px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:9px;cursor:pointer}

.snap-action-btn.selected{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.snap-action-btn.selected:hover{background:#fee2e2}
.snap-action-btn.merge-with-btn{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}
.snap-action-btn.merge-with-btn:hover{background:#dcfce7}

.au-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.au-mod-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid var(--bdr);border-radius:10px;cursor:pointer;transition:.12s;font-size:12.5px;font-weight:500;color:var(--t2);background:var(--white);user-select:none}
.au-mod-item:hover{border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.au-mod-item:has(.au-mod-cb:checked){border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.au-mod-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.au-mod-ico{width:26px;height:26px;border-radius:7px;background:var(--s2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.au-mod-item:has(.au-mod-cb:checked) .au-mod-ico{background:rgba(79,77,232,.15);color:var(--pu)}

.um-mods{display:flex;flex-wrap:wrap;gap:4px}
.um-mod-chip{font-size:10.5px;font-weight:600;color:var(--pu);background:var(--pu2);border-radius:6px;padding:2px 7px}

.um-perm-count-wrap{position:relative;display:inline-flex;cursor:default}
.um-perm-count{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--pu);background:var(--pu2);padding:4px 10px;border-radius:20px}
.um-perm-count i{font-size:12px}
.um-perm-hover-tip{position:absolute;top:calc(100% + 6px);left:0;display:none;background:#1A1B2E;color:#fff;border-radius:10px;padding:10px 14px;font-size:12px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:9999;pointer-events:none;white-space:nowrap}
.um-perm-count-wrap:hover .um-perm-hover-tip{display:block}
.um-perm-tip-row{display:flex;align-items:center;gap:7px;padding:3px 0;font-weight:500}
.um-perm-tip-row i{font-size:11px;color:#7875FF}

/* ── USER MANAGEMENT TABS ── */
.um-tab-row{display:flex;gap:4px;padding:0 0 16px;border-bottom:1px solid var(--bdr);margin-bottom:20px}
.um-tab{display:flex;align-items:center;gap:7px;padding:8px 18px;border-radius:9px;border:1.5px solid var(--bdr);background:var(--white);font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.15s}
.um-tab:hover{border-color:var(--pu);color:var(--pu)}
.um-tab.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.um-tab i{font-size:15px}

/* ── GROUPS ── */
.um-grp-hd{display:none}
.um-grp-title{font-size:16px;font-weight:800;color:var(--t1);margin-bottom:3px}
.um-grp-sub{font-size:12.5px;color:var(--t3)}
.um-grp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:0}
.um-grp-card{background:var(--white);border:1.5px solid var(--bdr);border-radius:16px;padding:20px;cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative}
.um-grp-card:hover{border-color:var(--pu);box-shadow:0 4px 16px rgba(79,77,232,.1)}
.um-grp-card-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.um-grp-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.um-grp-card-menu{background:none;border:none;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:16px;transition:.1s}
.um-grp-card-menu:hover{background:var(--s2);color:var(--t1)}
.um-grp-card-name{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:4px}
.um-grp-card-desc{font-size:12px;color:var(--t3);margin-bottom:14px;line-height:1.4}
.um-grp-avatars{display:flex;align-items:center;margin-bottom:12px}
.um-grp-av{width:28px;height:28px;border-radius:50%;background:var(--pu);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--white);margin-left:-8px;flex-shrink:0}
.um-grp-av:first-child{margin-left:0}
.um-grp-av-more{background:var(--s2);color:var(--t2);font-size:10px}
.um-grp-card-ft{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--bdr)}
.um-grp-count-badge{font-size:11.5px;font-weight:600;color:var(--t3)}
.um-grp-role-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--s2);color:var(--t2)}

/* ── GROUP MODAL ── */
.grp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:800;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.grp-overlay.open{display:flex;animation:coverin .15s ease}
.grp-modal{background:var(--white);border-radius:18px;width:520px;max-width:95vw;max-height:85vh;box-shadow:0 24px 60px rgba(0,0,0,.18);display:flex;flex-direction:column;animation:modalin .2s ease;overflow:hidden}
.grp-view-modal{width:560px}
.grp-modal-hd{padding:20px 22px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.grp-modal-title{font-size:16px;font-weight:800;color:var(--t1)}
.grp-modal-sub{font-size:12.5px;color:var(--t3);margin-top:2px}
.grp-modal-body{padding:18px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.grp-user-search-wrap{border:1.5px solid var(--bdr);border-radius:11px;overflow:hidden;max-height:200px;display:flex;flex-direction:column}
.grp-user-search{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.grp-user-search i{color:var(--t3);font-size:15px}
.grp-user-search input{border:none;outline:none;font-size:13px;color:var(--t1);background:transparent;width:100%;font-family:inherit}
.grp-user-list{overflow-y:auto;flex:1}
.grp-user-row{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer;transition:.1s}
.grp-user-row:hover{background:var(--s2)}
.grp-user-row.selected{background:var(--pu2)}
.grp-user-row-info{flex:1}
.grp-user-row-name{font-size:13px;font-weight:600;color:var(--t1)}
.grp-user-row-role{font-size:11px;color:var(--t3)}
.grp-user-row-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--bdr);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.1s}
.grp-user-row.selected .grp-user-row-check{background:var(--pu);border-color:var(--pu);color:#fff}
.grp-selected-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.grp-mem-chip{display:flex;align-items:center;gap:5px;background:var(--pu2);color:var(--pu);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600}
.grp-mem-chip button{background:none;border:none;cursor:pointer;color:var(--pu);font-size:12px;padding:0;display:flex;align-items:center}
.grp-view-body{padding:18px 22px;overflow-y:auto;flex:1}
.grp-view-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.grp-view-meta-item{font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:5px}
.grp-view-members-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.grp-add-mem-btn{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--pu);background:var(--pu2);border:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit}
.grp-view-member-list{display:flex;flex-direction:column;gap:6px}
.grp-view-mem-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--s2);border-radius:10px}
.grp-view-mem-row-info{flex:1}
.grp-view-mem-remove{background:none;border:none;cursor:pointer;color:var(--t3);font-size:13px;padding:4px;border-radius:6px;transition:.1s}
.grp-view-mem-remove:hover{background:var(--re2);color:var(--re)}

.um-topbar{display:flex;align-items:center;justify-content:space-between;background:var(--white);border-bottom:1px solid var(--bdr);padding:12px 24px;flex-shrink:0;gap:12px}
.um-topbar-left{display:flex;align-items:center;gap:16px}
.um-topbar-title{font-size:18px;font-weight:800;color:var(--t1)}
.um-topbar-tabs{display:flex;align-items:center;gap:2px;background:var(--s2);border-radius:10px;padding:3px}
.um-topbar-tab{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;border:none;background:none;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.um-topbar-tab:hover{color:var(--t1);background:rgba(0,0,0,.04)}
.um-topbar-tab.on{background:var(--white);color:var(--t1);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.um-topbar-tab i{font-size:14px}
.um-topbar-action{display:flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;border:none;background:var(--pu);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.um-topbar-action:hover{background:#3d3bc4}
.um-topbar-action i{font-size:14px}



/* ══ PREFERENCES ══════════════════════════════════════════ */
.pref-layout{display:flex;flex:1;width:100%;overflow:hidden;min-height:0}
.pref-sidebar{width:180px;flex-shrink:0;background:var(--white);border-right:1px solid var(--bdr);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.pref-tab{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:9px;border:none;background:none;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;font-family:inherit;text-align:left;width:100%;transition:.12s}
.pref-tab i{font-size:15px;flex-shrink:0}
.pref-tab:hover{background:var(--s2);color:var(--t1)}
.pref-tab.on{background:var(--pu2);color:var(--pu);font-weight:700}
.pref-content{flex:1;overflow-y:auto;padding:24px;background:var(--page)}
.pref-panel{display:flex;flex-direction:column}
.pref-card{background:var(--white);border:1px solid var(--bdr);border-radius:16px;padding:22px 24px}
.pref-avatar-row{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.pref-ava{width:72px;height:72px;font-size:22px;flex-shrink:0;border-radius:50%}
.pref-name{font-size:18px;font-weight:800;color:var(--t1);margin-bottom:3px}
.pref-role{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:5px;margin-bottom:10px}
.pref-change-ava-btn{padding:7px 14px;border-radius:9px;border:1.5px solid var(--bdr);background:var(--white);font-size:12.5px;font-weight:600;color:var(--t1);cursor:pointer;font-family:inherit;transition:.12s}
.pref-change-ava-btn:hover{border-color:var(--pu);color:var(--pu)}
.pref-divider{height:1px;background:var(--bdr);margin:18px 0}
.pref-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pref-field{display:flex;flex-direction:column;gap:6px}
.pref-lbl{font-size:12.5px;font-weight:700;color:var(--t1)}
.pref-lbl-note{font-size:11.5px;font-weight:400;color:var(--t3)}
.pref-inp{border:1.5px solid var(--bdr);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--t1);background:var(--white);font-family:inherit;outline:none;width:100%;transition:.12s}
.pref-inp:focus{border-color:var(--pu)}
.pref-inp-ico-wrap{position:relative;display:flex;align-items:center}
.pref-inp-ico-wrap>i{position:absolute;left:12px;color:var(--t3);font-size:15px;z-index:1}
.pref-inp-ico{padding-left:36px}
.pref-eye-btn{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:var(--t3);font-size:15px;padding:4px}
.pref-save-btn{padding:10px 22px;border-radius:10px;border:none;background:var(--pu);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.pref-save-btn:hover{background:#3d3bc4}
.pref-sec-hd{display:flex;align-items:center;gap:10px}
.pref-sec-hd i{font-size:18px;color:var(--pu);flex-shrink:0}
.pref-sec-title{font-size:15px;font-weight:700;color:var(--t1)}
.pref-sec-sub{font-size:12px;color:var(--t3);margin-top:1px}
.pref-sec-label{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--t3);text-transform:uppercase}
.pref-2fa-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.pref-session-hd{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:.7px;color:var(--t3);padding:8px 0;border-bottom:1px solid var(--bdr);margin-bottom:4px}
.pref-session-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px}
.pref-session-cur{background:var(--pu2);border-left:3px solid var(--pu);padding-left:10px}
.pref-this-dev{font-size:11px;font-weight:600;color:var(--pu)}
.pref-badge{background:var(--pu2);color:var(--pu);border-radius:20px;padding:2px 8px;font-size:11px;font-weight:700}
.pref-danger-btn{padding:6px 14px;border-radius:8px;border:1.5px solid var(--re2);background:var(--re2);color:var(--re);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.pref-signout-btn{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--re2);background:var(--re2);color:var(--re);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px}
.pref-alert-row{display:flex;align-items:center;gap:10px;background:var(--s2);border-radius:12px;padding:12px 14px}
.pref-alert-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.pref-alert-info{flex:1}
.pref-alert-name{font-size:13px;font-weight:700;color:var(--t1)}
.pref-alert-sub{font-size:11.5px;color:var(--t3);margin-top:1px}
.pref-channel-card{display:flex;align-items:center;gap:10px;background:var(--s2);border-radius:12px;padding:14px}
.pref-channel-card>div{flex:1}
.pref-sw{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0;display:inline-flex}
.pref-sw input{opacity:0;width:0;height:0;position:absolute}
.pref-sw-track{position:absolute;inset:0;background:var(--bdr);border-radius:100px;transition:.2s}
.pref-sw input:checked~.pref-sw-track{background:var(--pu)}
.pref-sw-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s;pointer-events:none}
.pref-sw input:checked~.pref-sw-thumb{left:23px}
.pref-sel{padding:7px 10px;border-radius:9px;border:1.5px solid var(--bdr);background:var(--white);font-size:12.5px;color:var(--t1);font-family:inherit;cursor:pointer;outline:none}
.pref-store-chip{padding:5px 13px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--white);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:.12s}
.pref-store-chip.on{border-color:var(--pu);background:var(--pu2);color:var(--pu)}
.pref-layout-opt{background:var(--s2);border:2px solid var(--bdr);border-radius:14px;padding:16px;cursor:pointer;position:relative;transition:.15s}
.pref-layout-opt.on{border-color:var(--pu);background:var(--pu2)}
.pref-layout-preview{height:60px;background:var(--white);border-radius:8px;padding:12px;margin-bottom:4px;display:flex;flex-direction:column;justify-content:center}
.pref-layout-dot{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bdr);background:var(--white);transition:.15s}
.pref-layout-opt.on .pref-layout-dot{background:var(--pu);border-color:var(--pu)}
.pref-layout-name{font-size:13.5px;font-weight:700;color:var(--t1)}
.pref-layout-opt.on .pref-layout-name{color:var(--pu)}
.pref-layout-desc{font-size:11.5px;color:var(--t3);margin-top:4px;line-height:1.4}
.pref-device-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px}
.pref-status-badge{padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.pref-ticket{background:var(--white);border:1px solid var(--bdr);border-radius:12px;padding:16px 18px}
.pref-tkt-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pref-tkt-tag{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.pref-tkt-status{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.pref-tkt-meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t3);background:var(--s2);padding:4px 10px;border-radius:20px}
.pref-tkt-msg{background:var(--s2);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--t1);line-height:1.5}
.pref-tkt-await{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--am);background:var(--am2);border-radius:8px;padding:9px 12px}
.pref-tkt-filter{padding:6px 14px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--white);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;transition:.12s}
.pref-tkt-filter.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.pref-pw-req{background:var(--s2);border-radius:10px;padding:12px 14px}
.pref-pw-req-lbl{font-size:10px;font-weight:700;letter-spacing:.7px;color:var(--t3);margin-bottom:8px}
.pref-pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pref-pw-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
.pref-pw-item i{font-size:11px;color:var(--t3)}

.pref-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.pref-modal-overlay.open{display:flex;animation:coverin .15s ease}
.pref-modal{background:var(--white);border-radius:20px;width:560px;max-width:95vw;max-height:90vh;box-shadow:0 28px 70px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:modalin .2s ease;overflow:hidden}
.pref-modal-hd{padding:20px 22px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0}
.pref-modal-close{width:32px;height:32px;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:17px;transition:.1s}
.pref-modal-close:hover{background:var(--s2);color:var(--t1)}
.pref-modal-body{padding:20px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.pref-modal-ft{padding:16px 22px;border-top:1px solid var(--bdr);display:flex;gap:10px;flex-shrink:0}
.pref-modal-cancel{padding:11px 22px;border-radius:10px;border:1.5px solid var(--bdr);background:var(--white);font-size:13.5px;font-weight:600;color:var(--t1);cursor:pointer;font-family:inherit;transition:.12s}
.pref-modal-cancel:hover{border-color:var(--t2)}

.pref-ticket{cursor:pointer}.pref-tkt-body{display:none}.pref-ticket.tkt-open .pref-tkt-body{display:block}.pref-tkt-row{user-select:none}
/* ── APP LOADER ── */
#appLoader{position:fixed;inset:0;background:#fff;z-index:99999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .36s ease;pointer-events:none}
#appLoader.hide{opacity:0;pointer-events:none}
#appLoader.gone{display:none}
[data-theme="dark"] #appLoader{background:#0f0f10}
#appLoader .sp-logo{display:flex;align-items:center;gap:4px;animation:spPop .5s cubic-bezier(.34,1.4,.64,1) both}
#appLoader .sp-logo svg{display:block;overflow:visible}
#appLoader .sp-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:9px}
#appLoader .sp-track{width:170px;height:3px;background:#EFEDE7;border-radius:20px;overflow:hidden;position:relative}
[data-theme="dark"] #appLoader .sp-track{background:rgba(255,255,255,.14)}
#appLoader .sp-fill{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:20px;background:linear-gradient(90deg,#4F4DE8,#7C5CFC 45%,#5FA8E8 70%,#3FCF5E);transition:width .25s ease}
#appLoader .sp-pct{font-size:12px;font-weight:700;color:#64625E;letter-spacing:.3px;font-variant-numeric:tabular-nums}
[data-theme="dark"] #appLoader .sp-pct{color:#EDEBE7}
#appLoader .wm{fill:#111112}
[data-theme="dark"] #appLoader .wm{fill:#FFFFFF}
@keyframes spPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes loaderPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

.sb-logo-light{display:flex;align-items:center}
.sb-logo-dark{display:none;align-items:center}
[data-theme="dark"] .sb-logo-light{display:none}
[data-theme="dark"] .sb-logo-dark{display:flex}



.snap-edit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:960;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.snap-edit-overlay.open{display:flex;animation:coverin .15s ease}
.snap-edit-modal{background:var(--white);border-radius:16px;padding:20px;width:300px;box-shadow:0 16px 48px rgba(0,0,0,.18);animation:modalin .2s ease}
.snap-edit-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.snap-edit-title{font-size:15px;font-weight:700;color:var(--t1)}
.snap-edit-close{background:none;border:none;cursor:pointer;color:var(--t2);font-size:16px;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.snap-edit-close:hover{background:var(--s2)}
.snap-edit-opts{display:flex;flex-direction:column;gap:8px}
.snap-edit-opt{padding:11px 14px;border-radius:10px;border:1.5px solid var(--bdr);background:var(--white);font-size:13.5px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;gap:9px;transition:.12s}
.snap-edit-opt i{font-size:16px}
.snap-edit-opt:hover{border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.snap-edit-opt.on{background:var(--pu);color:#fff;border-color:var(--pu)}


.mchip{padding:5px 10px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--s2);font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.12s;display:flex;align-items:center;gap:4px}
.mchip.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.mchip:hover:not(.on){border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.mtag{padding:5px 12px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--s2);font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.12s;display:flex;align-items:center;gap:5px}
.mtag.on{background:var(--am2);color:var(--am);border-color:var(--am)}
.mtag i{font-size:13px}

/* ── ROUTINES ── */
.rtn-filter{padding:6px 14px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--white);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.12s}
.rtn-filter.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.rtn-card{background:var(--white);border:1px solid var(--bdr);border-radius:14px;overflow:hidden;transition:box-shadow .15s}
.rtn-card-hd{padding:20px 22px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer}
.rtn-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.rtn-card-hd{padding:16px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer}
.rtn-card-body{border-top:1px solid var(--bdr);padding:16px 18px}
.rtn-status{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;flex-shrink:0}
.rtn-status.active{background:#DCFCE7;color:#166534}
.rtn-status.upcoming{background:var(--pu2);color:var(--pu)}
.rtn-status.overdue{background:var(--re2);color:var(--re)}
.rtn-status.completed{background:#F0FDF4;color:#15803D}
.rtn-status.missed{background:#F3F4F6;color:#6B7280}
.rtn-task-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--s2)}
.rtn-task-row:last-child{border-bottom:none}
.rtn-task-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--bdr);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.1s}
.rtn-task-check.done{background:var(--pu);border-color:var(--pu)}
.rtn-priority{padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700}
.rtn-priority.high{background:#FEF2F2;color:#DC2626}
.rtn-priority.medium{background:#FEF3C7;color:#D97706}
.rtn-priority.low{background:#F0FDF4;color:#16A34A}

/* ── ROUTINES ── */
.rtn-filter{padding:6px 14px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--white);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.12s}
.rtn-filter.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.rtn-card{background:var(--white);border:1px solid var(--bdr);border-radius:14px;overflow:hidden;transition:box-shadow .15s}
.rtn-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.rtn-card-hd{padding:16px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer}
.rtn-card-body{border-top:1px solid var(--bdr);padding:16px 18px}
.rtn-status{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;flex-shrink:0}
.rtn-status.active{background:#DCFCE7;color:#166534}
.rtn-status.upcoming{background:var(--pu2);color:var(--pu)}
.rtn-status.overdue{background:var(--re2);color:var(--re)}
.rtn-status.completed{background:#F0FDF4;color:#15803D}
.rtn-status.missed{background:#F3F4F6;color:#6B7280}
.rtn-task-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--s2)}
.rtn-task-row:last-child{border-bottom:none}
.rtn-task-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--bdr);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.1s}
.rtn-task-check.done{background:var(--pu);border-color:var(--pu)}
.rtn-priority{padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700}
.rtn-priority.high{background:#FEF2F2;color:#DC2626}
.rtn-priority.medium{background:#FEF3C7;color:#D97706}
.rtn-priority.low{background:#F0FDF4;color:#16A34A}

/* Routine task input row */
.rtn-task-input-row{display:flex;align-items:center;gap:8px}
.rtn-task-input-row .au-inp{height:36px}


/* ── LOGIN SCREEN OVERLAY ── */
/* ═══════════════ LOGIN SCREEN (redesigned) ═══════════════ */
#loginScreen{
  --ink:#0E1015;--ink-soft:#3A3F4C;--muted:#7A8194;--line:rgba(20,22,30,.10);
  --field-brd:rgba(20,22,30,.13);--indigo:#4F4DE8;--green:#3FCF5E;
  --grad:linear-gradient(108deg,#4F4DE8 0%,#6D5BF5 42%,#5FA8E8 72%,#3FCF5E 120%);
  --radius-sm:13px;
  position:fixed;inset:0;z-index:9999;display:none;flex-direction:row;overflow:hidden;
  background:#0B0A1F;color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
#loginScreen.visible{display:flex}
#loginLoader{position:fixed;inset:0;background:#fff;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#loginLoader.hide{opacity:0;transition:opacity .4s;pointer-events:none}
@keyframes lgn_spin{to{transform:rotate(360deg)}}

/* ── LEFT (dark animated mesh) ── */
#loginScreen .left{width:46%;flex-shrink:0;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:56px;background:#0B0A1F}
#loginScreen .mesh{position:absolute;inset:-25%;z-index:0;filter:blur(70px) saturate(125%);will-change:transform}
#loginScreen .mesh span{position:absolute;border-radius:50%;mix-blend-mode:screen}
#loginScreen .m1{width:60%;height:60%;top:-8%;left:-6%;background:radial-gradient(circle at 40% 40%,#5B57FF,transparent 66%);animation:lg_drift1 22s ease-in-out infinite alternate}
#loginScreen .m2{width:55%;height:55%;top:6%;right:-12%;background:radial-gradient(circle at 60% 50%,#9A6BFF,transparent 64%);animation:lg_drift2 26s ease-in-out infinite alternate}
#loginScreen .m3{width:55%;height:55%;bottom:-12%;left:10%;background:radial-gradient(circle at 50% 50%,#3E6FE0,transparent 66%);animation:lg_drift3 24s ease-in-out infinite alternate}
#loginScreen .m4{width:42%;height:42%;bottom:-4%;right:-6%;background:radial-gradient(circle at 50% 50%,#2FB36A,transparent 68%);opacity:.65;animation:lg_drift4 28s ease-in-out infinite alternate}
@keyframes lg_drift1{to{transform:translate(8%,10%) scale(1.12)}}
@keyframes lg_drift2{to{transform:translate(-9%,7%) scale(1.08)}}
@keyframes lg_drift3{to{transform:translate(6%,-9%) scale(1.1)}}
@keyframes lg_drift4{to{transform:translate(-7%,-6%) scale(1.15)}}
#loginScreen .grain{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:3px 3px;opacity:.5;-webkit-mask:radial-gradient(circle at 50% 50%,#000,transparent 92%);mask:radial-gradient(circle at 50% 50%,#000,transparent 92%)}
#loginScreen .lc{position:relative;z-index:2;display:flex;flex-direction:column}
#loginScreen .lh{font-size:54px;font-weight:800;line-height:1.04;letter-spacing:-2.2px;color:#fff;max-width:540px}
#loginScreen .lh em{font-style:normal;background:linear-gradient(92deg,#C7D2FE,#A5B4FC 35%,#86EFAC 60%,#A5B4FC 85%,#C7D2FE);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lg_shimmer 7s ease-in-out infinite}
@keyframes lg_shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#loginScreen .ls{font-size:17px;color:rgba(255,255,255,.72);line-height:1.55;max-width:420px;margin-top:22px;font-weight:500}
#loginScreen .stats{display:flex;gap:16px;margin-top:auto;padding-top:64px}
#loginScreen .stat{flex:1;position:relative;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .25s cubic-bezier(.22,.61,.36,1),background .25s,border-color .25s;animation:lg_cardfloat 6s ease-in-out infinite}
#loginScreen .stat:nth-child(2){animation-delay:-3s}
@keyframes lg_cardfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#loginScreen .stat:hover{transform:translateY(-9px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);animation-play-state:paused}
#loginScreen .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#loginScreen .stat-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(124,92,252,.35),rgba(63,207,94,.25));border:1px solid rgba(255,255,255,.16);color:#E9E7FF}
#loginScreen .stat-ic svg{width:16px;height:16px}
#loginScreen .stat-trend{font-size:10.5px;font-weight:600;letter-spacing:.3px;color:#86EFAC;background:rgba(63,207,94,.14);border:1px solid rgba(63,207,94,.25);padding:3px 8px;border-radius:20px;white-space:nowrap}
#loginScreen .sn{font-size:30px;font-weight:800;letter-spacing:-1px;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
#loginScreen .sl{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:5px}

/* ── RIGHT (light form) ── */
#loginScreen .right{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 40px;background:#FBFBFE;position:relative;overflow-y:auto}
#loginScreen .right::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0%,rgba(124,92,252,.06),transparent 55%),radial-gradient(100% 70% at 0% 100%,rgba(63,207,94,.05),transparent 55%);pointer-events:none}
#loginScreen .form-wrap{width:100%;max-width:380px;position:relative;z-index:1}
#loginScreen .brand-right{display:inline-flex;align-items:center;gap:11px;margin-bottom:18px}
#loginScreen .brand-right .sym{filter:drop-shadow(0 3px 10px rgba(124,92,252,.4));flex-shrink:0}
#loginScreen .brand-lockup{display:flex;flex-direction:column;line-height:1}
#loginScreen .brand-right .wm{font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
#loginScreen h1{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.1;color:var(--ink)}
#loginScreen .sub{font-size:14px;color:var(--ink-soft);margin-top:7px;margin-bottom:28px}
#loginScreen .field{margin-bottom:15px}
#loginScreen .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
#loginScreen .fw{position:relative}
#loginScreen .fw .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none}
#loginScreen .inp{width:100%;border:1.5px solid var(--field-brd);border-radius:var(--radius-sm);background:#fff;padding:13px 14px 13px 42px;font-size:14px;font-family:inherit;color:var(--ink);outline:none;transition:.18s ease}
#loginScreen .inp::placeholder{color:#9AA0B0}
#loginScreen .inp:hover{border-color:rgba(20,22,30,.24)}
#loginScreen .inp:focus{border-color:transparent;background-image:linear-gradient(#fff,#fff),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 0 4px rgba(79,77,232,.12)}
#loginScreen .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;display:flex;transition:color .15s}
#loginScreen .eye:hover{color:var(--indigo)}
#loginScreen .eye svg{width:18px;height:18px}
#loginScreen .opts{display:flex;align-items:center;justify-content:space-between;margin:18px 0 22px}
#loginScreen .rem{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-soft);cursor:pointer;user-select:none}
#loginScreen .rem input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--field-brd);border-radius:6px;background:#fff;cursor:pointer;position:relative;transition:.15s;flex-shrink:0}
#loginScreen .rem input:checked{background:var(--grad);border-color:transparent}
#loginScreen .rem input:checked::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#loginScreen .fp{font-size:12.5px;font-weight:600;color:var(--indigo);text-decoration:none;position:relative}
#loginScreen .fp::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--indigo);transform:scaleX(0);transform-origin:left;transition:transform .2s}
#loginScreen .fp:hover::after{transform:scaleX(1)}
#loginScreen .btn{width:100%;border:none;border-radius:var(--radius-sm);padding:14px;font-size:15px;font-weight:700;font-family:inherit;color:#fff;cursor:pointer;background:var(--grad);background-size:160% 160%;background-position:0% 50%;box-shadow:0 10px 26px -8px rgba(79,77,232,.55);transition:transform .15s,box-shadow .2s,background-position .5s}
#loginScreen .btn:hover{transform:translateY(-1px);background-position:100% 50%;box-shadow:0 16px 34px -8px rgba(79,77,232,.65)}
#loginScreen .btn:active{transform:translateY(0)}
#loginScreen .legal{text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5}
#loginScreen .legal a{color:var(--ink-soft);text-decoration:none;font-weight:600}
#loginScreen .legal a:hover{color:var(--indigo)}
#loginScreen .divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:11.5px;font-weight:500}
#loginScreen .divider::before,#loginScreen .divider::after{content:'';flex:1;height:1px;background:var(--line)}
#loginScreen .oauth-err{font-size:12px;color:#D42B20;background:#FDEBE9;border-radius:8px;padding:9px 13px;margin-bottom:12px;display:none;text-align:center}
#loginScreen .sso-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#loginScreen .sso{width:100%;border:1.5px solid var(--field-brd);border-radius:var(--radius-sm);background:#fff;padding:12px;font-size:13.5px;font-weight:600;color:var(--ink-soft);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:.16s}
#loginScreen .sso:hover{border-color:rgba(20,22,30,.22);transform:translateY(-1px);box-shadow:0 4px 14px -4px rgba(31,28,90,.15)}
#loginScreen .sso:disabled{opacity:.55;cursor:not-allowed}
#loginScreen .sso svg{width:18px;height:18px}
#loginScreen .sso-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:lgn_spin .7s linear infinite;flex-shrink:0}
#loginScreen .reveal{opacity:0;transform:translateY(16px);animation:lg_reveal .6s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--d,0) * 70ms + 150ms)}
@keyframes lg_reveal{to{opacity:1;transform:translateY(0)}}
#loginScreen .lc>*{opacity:0;transform:translateY(18px);animation:lg_reveal .65s cubic-bezier(.22,.61,.36,1) forwards}
#loginScreen .lc>:nth-child(1){animation-delay:.05s}
#loginScreen .lc>:nth-child(2){animation-delay:.14s}
#loginScreen .lc>:nth-child(3){animation-delay:.22s}
@media (max-width:880px){
  #loginScreen{flex-direction:column}
  #loginScreen .left{width:100%;min-height:300px;padding:40px}
  #loginScreen .stats{padding-top:36px}
  #loginScreen .lh{font-size:32px}
  #loginScreen .right{padding:40px 28px}
}
@media (prefers-reduced-motion:reduce){
  #loginScreen .mesh span,#loginScreen .eyebrow .dot,#loginScreen .stat,#loginScreen .lh em{animation:none}
  #loginScreen .reveal,#loginScreen .lc>*{animation:none;opacity:1;transform:none}
}

/* ═══════════════ X-RAY MODAL STYLES ═══════════════ */
.xray-cta-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:9px;padding:6px 15px;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap;letter-spacing:.15px;box-shadow:0 2px 8px rgba(79,77,232,.25)}
.xray-cta-btn:hover{background:#3e3cd4;box-shadow:0 4px 14px rgba(79,77,232,.35);transform:translateY(-1px)}
.xray-cta-btn:active{transform:translateY(0)}
.xray-cta-btn i{font-size:13px}
/* Underline tabs */
.xray-tabs{display:flex;border-bottom:2px solid var(--bdr);padding:0 24px;flex-shrink:0;background:var(--white)}
.xray-tab{font-size:13px;font-weight:600;color:var(--t2);background:none;border:none;border-bottom:2.5px solid transparent;margin-bottom:-2px;padding:11px 16px;cursor:pointer;transition:.15s;font-family:inherit}
.xray-tab:hover{color:var(--t1)}
.xray-tab.on{color:var(--pu);border-bottom-color:var(--pu)}
/* Summary pills */
.xray-pills{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 24px;border-bottom:1px solid var(--bdr);flex-shrink:0;background:var(--s2)}
.xray-pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 11px;border-radius:20px;white-space:nowrap;transition:all .3s}
.xray-pill-m{background:#DBEAFE;color:#1D4ED8}
.xray-pill-f{background:#FCE7F3;color:#9D174D}
.xray-pill-age{background:var(--white);border:1.5px solid var(--bdr);color:var(--t2)}
.xray-pill-sep{width:1px;height:16px;background:var(--bdr)}
/* Floating action bar inside snap-body */
.xray-action-bar{display:none;align-items:center;gap:8px;padding:9px 14px;background:var(--white);border:1.5px solid var(--pu);border-radius:11px;box-shadow:0 4px 20px rgba(79,77,232,.15);position:sticky;top:0;z-index:10;margin-bottom:14px;flex-wrap:wrap}
.xray-action-bar.visible{display:flex;animation:fu .2s ease}
.xray-ab-sel{font-size:12.5px;font-weight:700;color:var(--pu);flex-shrink:0}
.xray-ab-div{width:1px;height:20px;background:var(--bdr)}
.xray-ab-btn{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:6px 13px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--white);color:var(--t1);cursor:pointer;transition:.12s;font-family:inherit;flex-shrink:0}
.xray-ab-btn:hover{border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.xray-ab-btn i{font-size:13px}
.xray-ab-close{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:.12s;flex-shrink:0}
.xray-ab-close:hover{background:var(--bdr)}
/* Check overlay on selected snap card */
.xray-check{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;background:var(--pu);display:flex;align-items:center;justify-content:center;z-index:4;box-shadow:0 2px 8px rgba(79,77,232,.4)}
.xray-check i{font-size:11px;color:#fff}
/* Secondary popup (gender / age) */
.xray-pop{position:fixed;z-index:1100;background:var(--white);border:1px solid var(--bdr);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:14px;display:none;flex-direction:column;gap:7px;min-width:165px;animation:fdrop .15s ease}
.xray-pop.open{display:flex}
.xray-pop-ttl{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
.xray-pop-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--t1);transition:.1s}
.xray-pop-opt:hover{background:var(--s2)}
.xray-pop-opt.sel{background:var(--pu2);color:var(--pu);font-weight:600}
.xray-pop-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.xray-pop-confirm{margin-top:4px;width:100%;padding:8px;border-radius:9px;border:none;background:var(--pu);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s}
.xray-pop-confirm:hover{background:#3e3cd4}
/* False incident */
.xray-fi-row{display:flex;align-items:center;justify-content:center;padding:18px 0 6px}
.xray-fi-btn{font-size:12px;font-weight:600;color:var(--re);background:none;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;opacity:.75;transition:.12s}
.xray-fi-btn:hover{opacity:1;text-decoration:underline}
.xray-fi-ov{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.xray-fi-ov.open{display:flex;animation:coverin .15s ease}
.xray-fi-card{background:var(--white);border-radius:18px;padding:26px 28px;max-width:360px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.xray-fi-ico{width:44px;height:44px;border-radius:14px;background:var(--re2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.xray-fi-ico i{font-size:22px;color:var(--re)}
.xray-fi-ttl{font-size:17px;font-weight:800;color:var(--t1);margin-bottom:6px;letter-spacing:-.3px}
.xray-fi-sub{font-size:13px;color:var(--t3);line-height:1.55;margin-bottom:22px}
.xray-fi-btns{display:flex;gap:10px}
.xray-fi-cancel{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--bdr);background:none;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.12s}
.xray-fi-cancel:hover{background:var(--s2)}
.xray-fi-ok{flex:1;padding:10px;border-radius:10px;border:none;background:var(--re);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s}
.xray-fi-ok:hover{background:#b92219}
[data-theme="dark"] .xray-pop,[data-theme="dark"] .xray-fi-card{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .xray-action-bar{background:var(--white)}
[data-theme="dark"] .xray-pills{background:var(--s2)}

/* ── X-ray filter bar ── */
.xray-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xray-filter-pill{display:flex;align-items:center;gap:6px;background:var(--white);border:1.5px solid var(--bdr);border-radius:9px;padding:6px 12px;transition:.12s}
.xray-filter-pill:focus-within{border-color:var(--pu);box-shadow:0 0 0 3px rgba(79,77,232,.07)}
.xray-filter-pill-icon{font-size:13px;color:var(--pu);flex-shrink:0}
.xray-filter-sep{width:1px;height:16px;background:var(--bdr);flex-shrink:0;margin:0 2px}
.xray-date-inp{border:none;background:transparent;font-size:12.5px;font-weight:500;color:var(--t1);font-family:inherit;outline:none;cursor:pointer;width:112px}
.xray-date-inp::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;font-size:12px}
.xray-date-inp::-webkit-datetime-edit-fields-wrapper{padding:0}
.xray-date-inp::-webkit-inner-spin-button{display:none}
.xray-time-sel{-webkit-appearance:none;appearance:none;border:none;background:transparent;font-size:12.5px;font-weight:600;color:var(--t1);font-family:inherit;cursor:pointer;outline:none;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5.5L10 0' fill='none' stroke='%23AEACA8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;min-width:82px}
.xray-time-sel:focus{outline:none}
.xray-clear-flt{font-size:12px;font-weight:700;color:var(--pu);background:var(--pu2);border:1.5px solid transparent;border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit;transition:.12s;flex-shrink:0}
.xray-clear-flt:hover{border-color:var(--pu);background:var(--pu)}
.xray-clear-flt:hover{color:#fff}
[data-theme="dark"] .xray-filter-pill{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .xray-date-inp,[data-theme="dark"] .xray-time-sel{color:var(--t1)}

/* ── X-ray Custom Date Picker ── */
.xray-dp-wrap{position:relative}
.xray-dp-trigger{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:var(--t2);background:none;border:none;cursor:pointer;font-family:inherit;padding:3px 7px;border-radius:7px;transition:.12s;white-space:nowrap}
.xray-dp-trigger:hover{background:var(--s2);color:var(--t1)}
.xray-dp-trigger.has-val{color:var(--pu);font-weight:700}
.xray-dp-pop{position:absolute;top:calc(100% + 8px);left:0;background:var(--white);border:1.5px solid var(--bdr);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.14);padding:16px;width:268px;z-index:1200;display:none;animation:fdrop .15s ease}
.xray-dp-pop.open{display:block}
.xray-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.xray-dp-nav-btn{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--bdr);background:var(--white);cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:.12s;font-size:13px}
.xray-dp-nav-btn:hover{background:var(--s2);border-color:var(--t3)}
.xray-dp-month-lbl{font-size:13.5px;font-weight:800;color:var(--t1);letter-spacing:-.2px}
.xray-dp-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.xray-dp-dow span{text-align:center;font-size:10.5px;font-weight:700;color:var(--t3);padding:3px 0}
.xray-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.xray-dp-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--t1);cursor:pointer;transition:.12s;border:none;background:none;font-family:inherit;line-height:1}
.xray-dp-day:hover{background:var(--s2)}
.xray-dp-day.today{font-weight:800;color:var(--pu)}
.xray-dp-day.sel{background:var(--pu)!important;color:#fff!important;font-weight:700}
.xray-dp-day.empty{pointer-events:none;visibility:hidden}
.xray-dp-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--bdr)}
.xray-dp-clear{font-size:12px;font-weight:600;color:var(--t3);background:none;border:none;cursor:pointer;font-family:inherit;padding:0;transition:.12s}
.xray-dp-clear:hover{color:var(--re)}
.xray-dp-today-btn{font-size:12px;font-weight:700;color:var(--pu);background:var(--pu2);border:none;border-radius:7px;padding:5px 12px;cursor:pointer;font-family:inherit;transition:.12s}
.xray-dp-today-btn:hover{background:var(--pu);color:#fff}
/* ── X-ray Custom Time Select ── */
.xray-ts-wrap{position:relative}
.xray-ts-trigger{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--t2);background:none;border:none;cursor:pointer;font-family:inherit;padding:3px 7px;border-radius:7px;transition:.12s;white-space:nowrap;min-width:80px}
.xray-ts-trigger:hover{background:var(--s2);color:var(--t1)}
.xray-ts-trigger .xts-caret{font-size:10px;color:var(--t3);transition:transform .15s;flex-shrink:0}
.xray-ts-trigger.open .xts-caret{transform:rotate(180deg)}
.xray-ts-trigger.has-val{color:var(--pu)}
.xray-ts-drop{position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border:1.5px solid var(--bdr);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.13);padding:5px;z-index:1200;min-width:145px;display:none;animation:fdrop .15s ease;max-height:240px;overflow-y:auto}
.xray-ts-drop.open{display:block}
.xray-ts-opt{padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--t1);cursor:pointer;transition:.1s}
.xray-ts-opt:hover{background:var(--s2)}
.xray-ts-opt.on{background:var(--pu2);color:var(--pu);font-weight:700}
[data-theme="dark"] .xray-dp-pop,[data-theme="dark"] .xray-ts-drop,[data-theme="dark"] .xray-dp-nav-btn{background:var(--white);border-color:var(--bdr)}

/* ══════════════════════════════════════════
   X-RAY · REFINED CONFIRMATION ANIMATIONS
══════════════════════════════════════════ */

/* ── Card peel (compress Y, lift slightly) ── */
@keyframes xrPeel{
  0%  {transform:scaleY(1) translateY(0);filter:brightness(1) saturate(1)}
  100%{transform:scaleY(.84) translateY(-5px);filter:brightness(.78) saturate(.6)}
}
/* ── Card snap-back with elastic overshoot ── */
@keyframes xrSnap{
  0%  {transform:scaleY(.84) translateY(-5px);filter:brightness(.78) saturate(.6)}
  52% {transform:scaleY(1.055) translateY(-1px);filter:brightness(1.06) saturate(1.1)}
  76% {transform:scaleY(.985) translateY(0);filter:brightness(1)}
  100%{transform:scaleY(1) translateY(0);filter:brightness(1) saturate(1)}
}
/* ── Colour wash overlay (action branding) ── */
@keyframes xrWash{
  0%  {opacity:0}
  25% {opacity:.28}
  100%{opacity:0}
}
/* ── Staff badge stamp ── */
@keyframes xrStamp{
  0%  {transform:scale(3.2) rotate(-15deg);opacity:0;letter-spacing:4px}
  50% {transform:scale(.82) rotate(2.5deg);opacity:1;letter-spacing:.5px}
  72% {transform:scale(1.08) rotate(-.5deg)}
  100%{transform:scale(1) rotate(0);opacity:1;letter-spacing:.5px}
}
/* ── Action bar success flash ── */
@keyframes xrBarFlash{
  0%  {background:var(--white);border-color:var(--pu)}
  35% {background:#DCFCE7;border-color:#16A34A}
  100%{background:var(--white);border-color:var(--pu)}
}
/* ── Pill pop on number change ── */
@keyframes xrPillPop{
  0%  {transform:scale(1)}
  35% {transform:scale(1.22)}
  65% {transform:scale(.94)}
  100%{transform:scale(1)}
}
/* ── Spinner ── */
@keyframes xrSpin{to{transform:rotate(360deg)}}
/* ── Checkmark draw on button ── */
@keyframes xrBtnSuccess{
  0%  {background:var(--pu);transform:scale(1)}
  20% {background:#16A34A;transform:scale(.94)}
  60% {transform:scale(1.06)}
  100%{background:#16A34A;transform:scale(1)}
}

/* ── Button states ── */
.xpb-loading{
  pointer-events:none!important;
  position:relative;
  color:transparent!important;
}
.xpb-loading::after{
  content:'';
  position:absolute;inset:0;margin:auto;
  width:14px;height:14px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:xrSpin .5s linear infinite;
}
.xpb-done{
  animation:xrBtnSuccess .5s cubic-bezier(.34,1.4,.64,1) forwards;
  pointer-events:none!important;
}

/* ── Card states ── */
.xrc-peeling{
  animation:xrPeel .22s cubic-bezier(.4,0,.6,1) forwards!important;
  transform-origin:center bottom;
  position:relative;z-index:0;
}
.xrc-snapping{
  animation:xrSnap .48s cubic-bezier(.34,1.56,.64,1) forwards!important;
  transform-origin:center bottom;
}
/* Colour wash overlay — appended via JS */
.xrc-wash-overlay{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:5;
  animation:xrWash .6s ease forwards;
}
/* Staff badge refined */
.xrc-staff-badge-anim{
  animation:xrStamp .52s cubic-bezier(.34,1.56,.64,1) forwards!important;
  transform-origin:center center;
}

/* ══════════════════════════════════════════════════════════
   WIDGET X-RAY · Distinct animation system
   Horizontal slide-batch pattern (≠ Footfall peel/snap)
══════════════════════════════════════════════════════════ */
@keyframes wxSlideOut{
  0%  {transform:translateX(0);opacity:1}
  100%{transform:translateX(52px);opacity:0}
}
@keyframes wxSlideIn{
  0%  {transform:translateX(-28px);opacity:0}
  60% {transform:translateX(4px);opacity:1}
  100%{transform:translateX(0);opacity:1}
}
@keyframes wxBadgePop{
  0%  {transform:scale(0) rotate(-12deg);opacity:0}
  55% {transform:scale(1.15) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes wxProcessPulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
@keyframes wxPillSlotOut{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-10px);opacity:0}
}
@keyframes wxPillSlotIn{
  0%{transform:translateY(10px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes wxProgressFill{
  from{width:0%}
  to{width:100%}
}
@keyframes wxSuccessStamp{
  0%  {transform:scale(0);opacity:0}
  50% {transform:scale(1.22);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* Processing batch badge on each card */
.wx-processing-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  border-radius:10px;padding:8px 14px;
  font-size:12px;font-weight:800;color:#fff;
  letter-spacing:.3px;z-index:10;white-space:nowrap;
  animation:wxBadgePop .25s cubic-bezier(.34,1.56,.64,1);
}
.wx-success-overlay{
  position:absolute;inset:0;
  background:rgba(21,160,102,.18);
  display:flex;align-items:center;justify-content:center;
  z-index:9;border-radius:inherit;
}
.wx-success-ico{
  width:38px;height:38px;border-radius:50%;
  background:#15A066;display:flex;align-items:center;justify-content:center;
  animation:wxSuccessStamp .4s cubic-bezier(.34,1.56,.64,1);
}
.wx-success-ico i{font-size:20px;color:#fff}
/* Progress bar in action bar */
.wx-progress-wrap{
  flex:1;height:4px;background:var(--bdr);border-radius:10px;overflow:hidden;
  display:none;align-self:center;margin:0 8px;
}
.wx-progress-wrap.visible{display:block}
.wx-progress-bar{
  height:100%;background:var(--pu);border-radius:10px;
  animation:wxProgressFill var(--wx-dur,1s) cubic-bezier(.4,0,.2,1) forwards;
}
.wx-ab-status{font-size:11.5px;font-weight:600;color:var(--pu);flex-shrink:0;white-space:nowrap;display:none}
.wx-ab-status.visible{display:block}
/* Sliding card states */
.wxc-slide-out{animation:wxSlideOut .2s ease forwards!important}
.wxc-slide-in{animation:wxSlideIn .3s cubic-bezier(.4,0,.2,1) forwards!important}
/* Pill count update (slot machine) */
.wx-pill-num{display:inline-block;overflow:hidden;vertical-align:middle;height:1.15em;position:relative}
.wx-pill-old{animation:wxPillSlotOut .18s ease forwards}
.wx-pill-new{animation:wxPillSlotIn .22s ease forwards}

/* ══════════════════════════════════════════════════════════
   WIDGET X-RAY · Per-widget distinct confirmation animations
   W2 = fade+scale (existing, not changed)
   W3 = rotate-sort  (demographic classification feel)
   W4 = flow-up      (passerby flow through entrance feel)
   W5 = tier-shift   (horizontal compression = tier change)
══════════════════════════════════════════════════════════ */

/* ── W3: Rotate-sort ── */
@keyframes wxW3Out{
  0%  {transform:rotate(0deg) scale(1);opacity:1}
  100%{transform:rotate(-4deg) scale(.88);opacity:.18}
}
@keyframes wxW3In{
  0%  {transform:rotate(-4deg) scale(.88);opacity:.18}
  58% {transform:rotate(1.8deg) scale(1.04);opacity:1}
  100%{transform:rotate(0deg) scale(1);opacity:1}
}
.wxc-w3-out{animation:wxW3Out .26s cubic-bezier(.4,0,.6,1) forwards!important;transform-origin:bottom center}
.wxc-w3-in {animation:wxW3In  .42s cubic-bezier(.34,1.4,.64,1) forwards!important;transform-origin:bottom center}

/* ── W4: Flow-up ── */
@keyframes wxW4Out{
  0%  {transform:translateY(0);opacity:1}
  100%{transform:translateY(-26px);opacity:.12}
}
@keyframes wxW4In{
  0%  {transform:translateY(26px);opacity:.12}
  60% {transform:translateY(-4px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
.wxc-w4-out{animation:wxW4Out .22s ease-in forwards!important}
.wxc-w4-in {animation:wxW4In  .38s cubic-bezier(.34,1.2,.64,1) forwards!important}

/* ── W5: Tier-shift (horizontal compress + brightness) ── */
@keyframes wxW5Out{
  0%  {transform:scaleX(1) scaleY(1);opacity:1;filter:brightness(1)}
  100%{transform:scaleX(.82) scaleY(.94);opacity:.2;filter:brightness(1.6)}
}
@keyframes wxW5In{
  0%  {transform:scaleX(.82) scaleY(.94);opacity:.2;filter:brightness(1.6)}
  52% {transform:scaleX(1.06) scaleY(1.03);opacity:1;filter:brightness(1.1)}
  100%{transform:scaleX(1) scaleY(1);opacity:1;filter:brightness(1)}
}
.wxc-w5-out{animation:wxW5Out .28s cubic-bezier(.4,0,.6,1) forwards!important}
.wxc-w5-in {animation:wxW5In  .44s cubic-bezier(.34,1.1,.64,1) forwards!important}

/* ── Mark-as-Staff widget variants ── */
/* W3: flip-stamp */
@keyframes wxW3StaffOut{
  0%  {transform:rotateY(0deg);opacity:1}
  100%{transform:rotateY(90deg);opacity:.1}
}
@keyframes wxW3StaffIn{
  0%  {transform:rotateY(-90deg);opacity:.1}
  100%{transform:rotateY(0deg);opacity:1}
}
.wxc-w3-staff-out{animation:wxW3StaffOut .2s ease-in forwards!important;perspective:600px}
.wxc-w3-staff-in {animation:wxW3StaffIn  .3s ease-out forwards!important;perspective:600px}
/* W4: drop-in */
@keyframes wxW4StaffOut{
  0%  {transform:translateY(0) scaleY(1);opacity:1}
  100%{transform:translateY(20px) scaleY(.7);opacity:0}
}
@keyframes wxW4StaffIn{
  0%  {transform:translateY(-20px) scaleY(.7);opacity:0}
  100%{transform:translateY(0) scaleY(1);opacity:1}
}
.wxc-w4-staff-out{animation:wxW4StaffOut .2s ease-in forwards!important;transform-origin:bottom}
.wxc-w4-staff-in {animation:wxW4StaffIn  .32s cubic-bezier(.34,1.3,.64,1) forwards!important;transform-origin:bottom}
/* W5: flash-amber */
@keyframes wxW5StaffOut{
  0%  {opacity:1;filter:brightness(1) saturate(1)}
  50% {opacity:.5;filter:brightness(1.8) saturate(0)}
  100%{opacity:.1;filter:brightness(1) saturate(0)}
}
@keyframes wxW5StaffIn{
  0%  {opacity:.1;filter:brightness(1.8) saturate(0)}
  100%{opacity:1;filter:brightness(1) saturate(1)}
}
.wxc-w5-staff-out{animation:wxW5StaffOut .28s ease-in forwards!important}
.wxc-w5-staff-in {animation:wxW5StaffIn  .35s ease-out forwards!important}

/* ── Active Incidents Widget ── */
.inc-sev-btn{font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--white);cursor:pointer;font-family:inherit;transition:.12s;color:var(--t2)}
.inc-sev-btn.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.inc-sev-btn:hover:not(.on){background:var(--s2)}
.inc-row{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;background:var(--white);border:1.5px solid var(--bdr);border-radius:11px;transition:.15s}
.inc-row:hover{border-color:var(--t3)}
.inc-row.inc-high{border-left:3.5px solid var(--re)}
.inc-row.inc-medium{border-left:3.5px solid var(--am)}
.inc-row.inc-low{border-left:3.5px solid #3B82F6}
.inc-sev-chip{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:20px;flex-shrink:0;margin-top:2px}
.inc-sev-chip.high{background:var(--re2);color:var(--re)}
.inc-sev-chip.medium{background:var(--am2);color:var(--am)}
.inc-sev-chip.low{background:#DBEAFE;color:#1D4ED8}
.inc-body{flex:1;min-width:0}
.inc-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:3px;line-height:1.3}
.inc-meta{font-size:11.5px;color:var(--t3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inc-meta i{font-size:12px}
.inc-false-btn{font-size:11px;font-weight:700;color:var(--t2);background:var(--s2);border:1.5px solid var(--bdr);border-radius:8px;padding:5px 11px;cursor:pointer;font-family:inherit;transition:.12s;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:4px}
.inc-false-btn:hover{border-color:var(--re);color:var(--re);background:var(--re2)}
.inc-false-btn i{font-size:12px}
.inc-empty{padding:32px;text-align:center;color:var(--t3);font-size:13px}
/* False Incident confirm overlay */
.inc-fi-ov{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.38);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.inc-fi-ov.open{display:flex;animation:coverin .15s ease}
.inc-fi-card{background:var(--white);border-radius:18px;padding:26px 28px;max-width:380px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:modalin .2s cubic-bezier(.34,1.4,.64,1)}
.inc-fi-ico{width:44px;height:44px;border-radius:14px;background:var(--am2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.inc-fi-ico i{font-size:22px;color:var(--am)}
.inc-fi-ttl{font-size:17px;font-weight:800;color:var(--t1);margin-bottom:6px}
.inc-fi-sub{font-size:13px;color:var(--t3);line-height:1.55;margin-bottom:8px}
.inc-fi-detail{font-size:12px;font-weight:600;color:var(--t2);background:var(--s2);border-radius:8px;padding:8px 12px;margin-bottom:18px;line-height:1.5}
.inc-fi-btns{display:flex;gap:10px}
.inc-fi-cancel{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--bdr);background:none;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.12s}
.inc-fi-cancel:hover{background:var(--s2)}
.inc-fi-ok{flex:1;padding:10px;border-radius:10px;border:none;background:var(--am);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s}
.inc-fi-ok:hover{background:#b95e00}
[data-theme="dark"] .inc-row{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .inc-fi-card{background:var(--white)}

/* ═══════════════════════════════════════════════════
   SNAPSHOT ACTIVITY & VIOLATIONS WIDGET  (wSnap)
═══════════════════════════════════════════════════ */
/* Widget tabs toolbar */
#snapActivityWgt .snap-act-toolbar{display:flex;align-items:center;gap:10px;padding:8px 12px 0;border-top:1px solid var(--bdr);flex-shrink:0}
#snapActivityWgt .snap-act-tabs{display:inline-flex;align-items:center;gap:2px;background:var(--s2);border-radius:8px;padding:3px;flex:0 0 auto}
#snapActivityWgt .snap-act-tab{border:none;background:transparent;font-size:10px;font-weight:700;letter-spacing:.45px;text-transform:uppercase;color:var(--t3);padding:6px 12px;border-radius:6px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s,color .12s}
#snapActivityWgt .snap-act-tab.on{background:var(--white);color:var(--pu);box-shadow:0 1px 3px rgba(0,0,0,.06)}
#snapActivityWgt .snap-act-tab-count{margin-left:5px;font-size:9px;font-weight:700;color:inherit;opacity:.85}
/* Widget body */
#snapActivityWgt .snap-act-body{padding:10px 12px 12px;min-height:180px}
#snapActivityWgt .snap-act-pane{display:none}
#snapActivityWgt .snap-act-pane.on{display:block}
/* See-all link */
.snap-wgt-see-all{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--pu);background:none;border:none;padding:0;cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap}
.snap-wgt-see-all:hover{opacity:.75}
#snapActivityWgt .snap-wgt-see-all{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--pu);background:none;border:none;padding:0;cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap}
#snapActivityWgt .snap-wgt-see-all:hover{opacity:.75}
/* Card grid */
#snapActivityWgt .snap-viol-stack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#snapActivityWgt .snap-viol-stack-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .12s,box-shadow .12s}
#snapActivityWgt .snap-viol-stack-card:hover{border-color:#C7C6F8;box-shadow:0 3px 12px rgba(79,77,232,.1)}
#snapActivityWgt .snap-viol-stack-card--high{border-color:rgba(212,43,32,.4);background:linear-gradient(180deg,rgba(253,235,233,.35) 0%,var(--white) 42%)}
#snapActivityWgt .snap-viol-stack-card--medium{border-color:rgba(217,117,0,.35)}
#snapActivityWgt .snap-viol-stack-thumb{aspect-ratio:5/4;background:#1a1a1a;position:relative;overflow:hidden;flex-shrink:0}
#snapActivityWgt .snap-viol-stack-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(85%) brightness(.72) saturate(.9)}
#snapActivityWgt .snap-viol-stack-card--high .snap-viol-stack-thumb img{filter:grayscale(60%) brightness(.68) sepia(.15)}
#snapActivityWgt .snap-viol-stack-body{padding:8px 9px 9px;display:flex;flex-direction:column;gap:4px;min-width:0}
#snapActivityWgt .snap-viol-stack-title{font-size:10.5px;font-weight:800;color:var(--t1);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#snapActivityWgt .snap-viol-stack-row{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9px;color:var(--t3);line-height:1.25}
#snapActivityWgt .snap-viol-stack-sev{font-size:7.5px;font-weight:800;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.35px;flex-shrink:0}
#snapActivityWgt .snap-viol-stack-card--high .snap-viol-stack-sev{background:var(--re);color:#fff}
#snapActivityWgt .snap-viol-stack-card--medium .snap-viol-stack-sev{background:var(--am);color:#fff}
#snapActivityWgt .snap-viol-stack-card--low .snap-viol-stack-sev{background:var(--s2);color:var(--t2)}
#snapActivityWgt .snap-viol-stack-loc{font-size:9px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#snapActivityWgt .snap-viol-stack-sum{font-size:9px;color:var(--t2);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#snapActivityWgt .snap-viol-stack-card--snap{border-color:rgba(79,77,232,.22)}
#snapActivityWgt .snap-stack-badge{font-size:7.5px;font-weight:800;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.35px;flex-shrink:0}
#snapActivityWgt .snap-stack-badge--entry{background:var(--pu2);color:var(--pu)}
#snapActivityWgt .snap-stack-badge--exit{background:var(--s2);color:var(--t2)}
#snapActivityWgt .snap-stack-badge--passerby{background:#FEF3C7;color:#92400E}
#snapActivityWgt .snap-stack-badge--sop{position:absolute;top:6px;right:6px;background:var(--am);color:#fff;z-index:1}
/* Hub modal (full See-All overlay) */
.snap-hub-overlay{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:32px 16px;backdrop-filter:blur(3px)}
.snap-hub-page{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background:var(--page)}
#snaphubView.view.active{display:flex;flex-direction:column;width:100%;flex:1;min-width:0}
.snap-hub-overlay.open{display:flex;animation:coverin .18s ease}
.snap-hub-modal{background:var(--page);width:100%;max-width:960px;border-radius:18px;overflow:hidden;box-shadow:0 28px 72px rgba(0,0,0,.22);animation:modalin .2s cubic-bezier(.34,1.4,.64,1);display:flex;flex-direction:column;max-height:90vh}
.snap-hub-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;background:var(--white);border-bottom:1px solid var(--bdr);flex-shrink:0}
.snap-hub-search{flex:1;min-width:180px;height:36px;border:1.5px solid var(--bdr);border-radius:9px;background:var(--s2);padding:0 12px 0 34px;font-size:13px;color:var(--t1);outline:none;font-family:inherit}
.snap-hub-search:focus{border-color:var(--pu);background:var(--white)}
.snap-hub-search-wrap{position:relative;flex:1;min-width:200px}
.snap-hub-search-wrap i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3);pointer-events:none}
.snap-hub-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.snap-hub-chip{height:32px;padding:0 12px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--white);font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:.12s}
.snap-hub-chip.on{background:var(--pu2);border-color:var(--pu);color:var(--pu)}
.snap-hub-body{overflow-y:auto;padding:16px 20px 24px;background:var(--page);flex:1;min-height:0}
.snap-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.snap-hub-card{background:var(--white);border:1px solid var(--bdr);border-radius:13px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.snap-hub-card:hover{border-color:#A5A3FF;box-shadow:0 4px 18px rgba(79,77,232,.1)}
.snap-hub-card-feed{aspect-ratio:16/9;background:#111;position:relative;overflow:hidden}
.snap-hub-card-feed img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.75)}
.snap-hub-card-acts{position:absolute;top:7px;right:7px;display:flex;gap:4px;z-index:2}
.snap-hub-act{height:26px;padding:0 9px;border-radius:7px;border:none;background:rgba(0,0,0,.7);color:#fff;font-size:9.5px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;backdrop-filter:blur(4px);transition:.12s}
.snap-hub-act:hover{background:rgba(0,0,0,.9)}
.snap-hub-act.xray{background:rgba(79,77,232,.88)}
.snap-hub-act.xray:hover{background:var(--pu)}
.snap-hub-card-bd{padding:11px 13px}
.snap-hub-card-title{font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:3px}
.snap-hub-card-meta{font-size:10.5px;color:var(--t3);line-height:1.4}
.snap-hub-card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.snap-hub-tag{font-size:9px;font-weight:800;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.35px}
.snap-hub-tag--sop{background:var(--am2);color:var(--am)}
.snap-hub-tag--high{background:var(--re2);color:var(--re)}
.snap-hub-tag--med{background:var(--am2);color:var(--am)}
.snap-hub-tag--low{background:var(--s2);color:var(--t2)}
.snap-hub-viol-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.snap-hub-viol-card{background:var(--white);border:1px solid var(--bdr);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.snap-hub-viol-card:hover{border-color:#A5A3FF;box-shadow:0 4px 18px rgba(79,77,232,.1)}
.snap-hub-viol-card--high{border-color:rgba(212,43,32,.4)}
.snap-hub-viol-card--medium{border-color:rgba(217,117,0,.35)}
.snap-hub-viol-thumb{aspect-ratio:16/10;background:#111;position:relative;overflow:hidden}
.snap-hub-viol-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(85%) brightness(.72)}
.snap-hub-viol-bd{padding:12px 14px 14px;min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.snap-hub-viol-title{font-size:13.5px;font-weight:800;color:var(--t1);line-height:1.3}
.snap-hub-viol-meta{font-size:11px;color:var(--t3);line-height:1.4}
.snap-hub-viol-tags{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
[data-theme="dark"] #snapActivityWgt .snap-act-tabs,[data-theme="dark"] #snapActivityWgt .snap-viol-stack-card,[data-theme="dark"] .snap-hub-card,[data-theme="dark"] .snap-hub-viol-card{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .snap-hub-modal{background:var(--page)}
[data-theme="dark"] .snap-hub-toolbar{background:var(--white);border-color:var(--bdr)}
[data-theme="dark"] .snap-hub-act.xray{background:rgba(124,92,252,.85)}

/* ══ Routines — new feature styles ══ */
.rtn-day-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.rtn-day-chip{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--bdr);background:var(--white);font-size:11px;font-weight:700;color:var(--t2);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:.12s;flex-shrink:0}
.rtn-day-chip.on{background:var(--pu);border-color:var(--pu);color:#fff}
.rtn-day-chip:hover:not(.on){background:var(--s2);border-color:var(--t3)}
.rtn-weekday-row{display:none;flex-direction:column;gap:4px}
.rtn-weekday-row.visible{display:flex}
/* Team / store multi-select pills */
.rtn-multiselect{border:1.5px solid var(--bdr);border-radius:9px;background:var(--white);padding:5px 8px;display:flex;flex-wrap:wrap;gap:5px;min-height:38px;cursor:text;transition:.12s}
.rtn-multiselect:focus-within{border-color:var(--pu)}
.rtn-ms-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;background:var(--pu2);color:var(--pu);border-radius:6px;padding:2px 7px}
.rtn-ms-chip button{background:none;border:none;cursor:pointer;color:var(--pu);font-size:12px;padding:0;line-height:1;display:flex}
.rtn-ms-input{border:none;outline:none;font-size:12.5px;font-family:inherit;background:transparent;color:var(--t1);flex:1;min-width:80px}
.rtn-ms-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1.5px solid var(--bdr);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:100;padding:5px;display:none;max-height:180px;overflow-y:auto}
.rtn-ms-drop.open{display:block}
.rtn-ms-opt{padding:7px 10px;border-radius:7px;font-size:12.5px;cursor:pointer;transition:.1s;display:flex;align-items:center;gap:7px}
.rtn-ms-opt:hover{background:var(--s2)}
.rtn-ms-opt.sel{background:var(--pu2);color:var(--pu);font-weight:600}
.rtn-ms-opt input[type="checkbox"]{accent-color:var(--pu)}
/* Time window row */
.rtn-time-row{display:flex;align-items:center;gap:8px}
.rtn-time-inp{flex:1;border:1.5px solid var(--bdr);border-radius:9px;background:var(--white);padding:8px 11px;font-size:12.5px;font-family:inherit;outline:none;color:var(--t1);transition:.12s}
.rtn-time-inp:focus{border-color:var(--pu)}
.rtn-time-dur{font-size:11.5px;font-weight:600;color:var(--t3);white-space:nowrap;flex-shrink:0}
/* Template panel */
.rtn-tmpl-panel{background:var(--white);border:1.5px solid var(--bdr);border-radius:14px;padding:0;overflow:hidden;display:none;margin-bottom:14px}
.rtn-tmpl-panel.open{display:block}
.rtn-tmpl-hd{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr)}
.rtn-tmpl-hd-title{font-size:13px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:7px}
.rtn-tmpl-grid{display:flex;flex-direction:column;gap:0}
.rtn-tmpl-row{padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--s2);cursor:default;transition:.12s}
.rtn-tmpl-row:last-child{border-bottom:none}
.rtn-tmpl-row:hover{background:var(--s2)}
.rtn-tmpl-ico{width:34px;height:34px;border-radius:9px;background:var(--pu2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rtn-tmpl-ico i{font-size:16px;color:var(--pu)}
.rtn-tmpl-name{font-size:13px;font-weight:700;color:var(--t1);flex:1}
.rtn-tmpl-meta{font-size:11px;color:var(--t3)}
.rtn-tmpl-use{font-size:11.5px;font-weight:700;color:var(--pu);background:var(--pu2);border:none;border-radius:7px;padding:5px 12px;cursor:pointer;font-family:inherit;transition:.12s}
.rtn-tmpl-use:hover{background:var(--pu);color:#fff}
.rtn-tmpl-empty{padding:24px;text-align:center;color:var(--t3);font-size:13px}
/* Duplicate button on routine cards */
.rtn-dup-btn{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--t2);background:var(--s2);border:1.5px solid var(--bdr);border-radius:7px;padding:4px 9px;cursor:pointer;font-family:inherit;transition:.12s;white-space:nowrap}
.rtn-dup-btn:hover{border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.rtn-dup-btn i{font-size:12px}
/* Save-as-template btn */
.rtn-save-tmpl-btn{font-size:12px;font-weight:600;color:var(--t2);background:var(--s2);border:1.5px solid var(--bdr);border-radius:9px;padding:8px 14px;cursor:pointer;font-family:inherit;transition:.12s;display:flex;align-items:center;gap:5px}
.rtn-save-tmpl-btn:hover{border-color:var(--pu);color:var(--pu)}

@keyframes spin{to{transform:rotate(360deg)}}
/* ══════════════════════════════════════════════════════════
   X-RAY BUCKET VIEW  (Demographics · Queue · Footfall)
══════════════════════════════════════════════════════════ */
/* Each bucket spans full modal width inside the snap-grid */
.xray-bucket{margin-bottom:28px;grid-column:1/-1;min-width:0}
.xray-bucket-hd{display:flex;align-items:center;gap:8px;padding:10px 0 11px;border-bottom:1.5px solid var(--bdr);margin-bottom:14px}
.xray-bucket-icon{font-size:14px;flex-shrink:0}
.xray-bucket-title{font-size:13px;font-weight:800;color:var(--t1);letter-spacing:.1px}
.xray-bucket-count{font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;background:var(--s2);color:var(--t2);border:1px solid var(--bdr);flex-shrink:0}
.xray-bucket-selall{margin-left:auto;font-size:11px;font-weight:700;color:var(--pu);background:var(--pu2);border:1.5px solid transparent;border-radius:7px;padding:3px 11px;cursor:pointer;font-family:inherit;transition:.12s;white-space:nowrap;flex-shrink:0}
.xray-bucket-selall:hover{border-color:var(--pu);background:var(--pu);color:#fff}
.xray-bucket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:12px}

/* ── Confidence badge on snap card thumbnail ── */
.snap-conf-badge{position:absolute;bottom:7px;left:7px;font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;letter-spacing:.4px;z-index:3;pointer-events:none}
.snap-conf-badge.conf-high{background:rgba(21,160,102,.9);color:#fff}
.snap-conf-badge.conf-med{background:rgba(245,158,11,.9);color:#fff}
.snap-conf-badge.conf-low{background:rgba(212,43,32,.9);color:#fff}
.snap-card.low-conf{border-color:#F97316!important;box-shadow:0 0 0 2px rgba(249,115,22,.12)}
.xray-lowconf-flag{position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:#F97316;z-index:6;pointer-events:none;animation:lowConfPulse 1.8s ease infinite}
@keyframes lowConfPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.55)}}

/* ── Prominent X-Ray promo widget ── */
.xray-promo-widget{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#4F4DE8 0%,#7C5CFC 100%);border-radius:14px;padding:16px 22px;color:#fff;overflow:hidden;position:relative;margin-bottom:0;flex-shrink:0}
.xray-promo-widget::before{content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.xray-promo-widget::after{content:'';position:absolute;right:120px;bottom:-60px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.xray-promo-ico{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.xray-promo-ico i{font-size:23px;color:#fff}
.xray-promo-text{flex:1;min-width:0}
.xray-promo-title{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px;line-height:1.2}
.xray-promo-sub{font-size:11.5px;color:rgba(255,255,255,.75);margin-top:3px}
.xray-promo-stats{display:flex;gap:18px;flex-shrink:0;margin:0 8px}
.xray-promo-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
.xray-promo-stat-val{font-size:18px;font-weight:900;color:#fff;letter-spacing:-.5px;line-height:1}
.xray-promo-stat-lbl{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.65);white-space:nowrap;letter-spacing:.2px}
.xray-promo-divider{width:1px;height:36px;background:rgba(255,255,255,.2);flex-shrink:0}
.xray-promo-btn{background:#fff;color:var(--pu);border:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap;flex-shrink:0;letter-spacing:.1px}
.xray-promo-btn:hover{background:rgba(255,255,255,.9);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.xray-promo-btn:active{transform:translateY(0)}
@media(max-width:700px){.xray-promo-stats,.xray-promo-divider{display:none}}

/* ── Low-conf pill in X-Ray header ── */
.xray-pill-warn{background:#FFF7ED;border:1.5px solid #FDBA74;color:#C2410C;font-weight:700}

/* ── Queue X-Ray wait-time colour pills ── */
.xray-pill-critical{background:#FEF2F2;border:1.5px solid #FCA5A5;color:#991B1B}
.xray-pill-high{background:#FFF7ED;border:1.5px solid #FED7AA;color:#9A3412}
.xray-pill-normal{background:#ECFDF5;border:1.5px solid #6EE7B7;color:#065F46}
.xray-pill-fast{background:#EFF6FF;border:1.5px solid #93C5FD;color:#1E3A8A}
.xray-bucket-hd-critical .xray-bucket-count{background:#FEF2F2;color:#991B1B;border-color:#FCA5A5}
.xray-bucket-hd-high .xray-bucket-count{background:#FFF7ED;color:#9A3412;border-color:#FED7AA}
.xray-bucket-hd-normal .xray-bucket-count{background:#ECFDF5;color:#065F46;border-color:#6EE7B7}
.xray-bucket-hd-fast .xray-bucket-count{background:#EFF6FF;color:#1E3A8A;border-color:#93C5FD}

/* ── Queue X-Ray action bar reassign button ── */
#qxrayWaitPop .xray-pop-opt:nth-child(2){color:#991B1B}
#qxrayWaitPop .xray-pop-opt:nth-child(3){color:#9A3412}
#qxrayWaitPop .xray-pop-opt:nth-child(4){color:#065F46}
#qxrayWaitPop .xray-pop-opt:nth-child(5){color:#1E3A8A}

/* ══════════════════════════════════════════════════════════
   X-RAY RIGHT-SIDE DRAWER (replaces centred modal for xray)
══════════════════════════════════════════════════════════ */
@keyframes xraySlideIn{from{transform:translateX(100%);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes xraySlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}

#xrayOverlay,#wxrayOverlay,#queueXrayOverlay{justify-content:flex-end;align-items:flex-start;padding:0}
#xrayOverlay .snap-modal,
#wxrayOverlay .snap-modal,
#queueXrayOverlay .snap-modal{
  width:900px;max-width:100vw;height:100vh;max-height:100vh;
  border-radius:20px 0 0 20px;margin:0;flex-shrink:0;
  animation:xraySlideIn .28s cubic-bezier(.34,1.08,.64,1);
  box-shadow:-12px 0 60px rgba(0,0,0,.22)
}

/* ══════════════════════════════════════════════════════════
   X-RAY SNAP CARD — reference design
══════════════════════════════════════════════════════════ */
.xrc-card{border:1.5px solid var(--bdr);border-radius:14px;overflow:hidden;cursor:pointer;transition:.18s;background:var(--white);position:relative}
.xrc-card:hover{border-color:#A5A3FF;box-shadow:0 4px 18px rgba(79,77,232,.1);transform:translateY(-1px)}
.xrc-card.snap-selected{border-color:var(--pu);box-shadow:0 0 0 3px rgba(79,77,232,.18)}
.xrc-card.low-conf{border-color:#F97316!important;box-shadow:0 0 0 2px rgba(249,115,22,.12)}
.xrc-thumb{position:relative;aspect-ratio:4/3;background:#0f0f0f;overflow:hidden}
.xrc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.xrc-thumb-grad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;color:rgba(255,255,255,.12)}
.xrc-cam-id{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);border-radius:5px;padding:2px 7px;font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.3px;z-index:3}
.xrc-check{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:7px;background:var(--pu);display:flex;align-items:center;justify-content:center;z-index:4;box-shadow:0 2px 8px rgba(79,77,232,.5);animation:fu .18s ease}
.xrc-check i{font-size:11px;color:#fff}
.xrc-conf{position:absolute;top:7px;right:7px;font-size:9px;font-weight:800;padding:2px 7px;border-radius:5px;z-index:3;letter-spacing:.3px}
.xrc-conf.xrc-conf-conf-high{background:rgba(21,160,102,.9);color:#fff}
.xrc-conf.xrc-conf-conf-med{background:rgba(245,158,11,.9);color:#fff}
.xrc-conf.xrc-conf-conf-low{background:rgba(212,43,32,.9);color:#fff}
.xrc-label{position:absolute;bottom:7px;left:7px;border-radius:6px;padding:3px 9px;font-size:9.5px;font-weight:800;letter-spacing:.5px;color:#fff;z-index:3}
.xrc-time{position:absolute;bottom:8px;right:8px;font-size:9px;font-weight:600;color:rgba(255,255,255,.6);z-index:3;letter-spacing:.1px}
.xrc-staff-stamp{position:absolute;top:7px;left:7px;background:rgba(217,117,0,.92);border-radius:5px;padding:2px 7px;font-size:9px;font-weight:800;color:#fff;letter-spacing:.5px;z-index:4}
.xrc-lowconf-dot{position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:#F97316;z-index:6;animation:lowConfPulse 1.8s ease infinite}
.xrc-info{padding:9px 11px;display:flex;flex-direction:column;gap:3px;min-height:0}
.xrc-dem{font-size:12.5px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:5px;line-height:1.2}
.xrc-dem i{font-size:13px;flex-shrink:0}
.xrc-dem-sep{color:var(--t3);font-weight:400;margin:0 1px}
.xrc-dem-age{color:var(--pu);font-weight:700}
.xrc-id{font-size:10.5px;color:var(--t3);font-weight:500;letter-spacing:.1px}
/* Store/zone sub-line in card */
.xrc-store{font-size:11px;color:var(--t2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* ══ HEADER THEME TOGGLE BUTTON ══════════════════════════ */
.theme-hd-btn{
  width:36px;height:36px;border-radius:10px;
  border:1.5px solid var(--bdr);background:var(--white);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--t2);transition:background .15s,border-color .15s,color .15s;
  position:relative;overflow:hidden;flex-shrink:0
}
.theme-hd-btn:hover{background:var(--s2);border-color:var(--t3);color:var(--t1)}
.theme-hd-icon{position:relative;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
/* Sun and Moon sit on top of each other; one is visible at a time */
#themeIconSun,#themeIconMoon{
  position:absolute;font-size:16px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;
  line-height:1
}
/* Light mode: sun visible, moon hidden below */
[data-theme="light"] #themeIconSun {transform:rotate(0deg) scale(1);opacity:1}
[data-theme="light"] #themeIconMoon{transform:rotate(-90deg) scale(0);opacity:0}
/* Dark mode: moon visible, sun spun away */
[data-theme="dark"]  #themeIconSun {transform:rotate(90deg) scale(0);opacity:0}
[data-theme="dark"]  #themeIconMoon{transform:rotate(0deg) scale(1);opacity:1}
/* Spin burst on click */
@keyframes themeClickBurst{
  0%  {transform:rotate(0deg) scale(1)}
  30% {transform:rotate(25deg) scale(1.25)}
  60% {transform:rotate(-8deg) scale(.95)}
  100%{transform:rotate(0deg) scale(1)}
}
.theme-hd-btn.clicked .theme-hd-icon{animation:themeClickBurst .38s cubic-bezier(.34,1.56,.64,1)}
/* Glow ring in dark mode */
[data-theme="dark"] .theme-hd-btn{border-color:rgba(165,163,255,.35);background:var(--white);color:#A5A3FF}
[data-theme="dark"] .theme-hd-btn:hover{background:var(--s2);border-color:rgba(165,163,255,.6)}

/* ══════════════════════════════════════════════════════════════
   REPLAY (Phase 2) — widgets, dedicated pages, detail, toasts
══════════════════════════════════════════════════════════════ */
.replay-wgt{position:relative;overflow:hidden;display:flex;flex-direction:column}
.replay-wgt .replay-strip{flex:1}
.replay-wgt::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#4F4DE8,#7C5CFC 50%,#3FCF5E);z-index:1}
.replay-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,rgba(79,77,232,.16),rgba(63,207,94,.14));border:1px solid rgba(79,77,232,.2);color:var(--pu);margin-right:2px;vertical-align:middle}
.replay-ico i{font-size:15px}
.replay-wgt .wgt-title{display:flex;align-items:center;gap:9px}
.replay-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--am);background:var(--am2);border:1px solid rgba(217,117,0,.25);padding:3px 9px;border-radius:20px;white-space:nowrap}
.replay-badge .bd{width:6px;height:6px;border-radius:50%;background:var(--am)}
.replay-sub{font-size:12px;color:var(--t3);padding:0 20px 12px}
.replay-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 20px 16px}
.rp-snap{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;background:var(--s2);border:1px solid var(--bdr);cursor:pointer;transition:transform .16s,box-shadow .16s}
.rp-snap:hover{transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(17,17,18,.25)}
.rp-snap-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--t3)}
.rp-snap-conf{position:absolute;top:6px;right:6px;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:20px;color:#fff;z-index:2}
.rp-conf-hi{background:rgba(21,160,102,.9)}
.rp-conf-lo{background:rgba(217,117,0,.92)}
.rp-snap-tag{position:absolute;left:0;right:0;bottom:0;padding:5px 7px;font-size:9.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.62));display:flex;align-items:center;gap:4px;z-index:2}
.replay-ft{padding:10px 20px 14px;border-top:1px solid var(--bdr)}
.replay-impact{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t2)}
.replay-impact i{color:var(--gr);font-size:14px}

/* dedicated page */
.rp-head{background:var(--white);border-bottom:1px solid var(--bdr);padding:0 22px;display:flex;align-items:center;height:54px;gap:13px;flex-shrink:0}
.rp-back{display:flex;align-items:center;gap:6px;border:none;background:none;font-size:13px;font-weight:600;color:var(--pu);cursor:pointer;font-family:inherit}
.rp-back i{font-size:15px}
.rp-head-div{width:1px;height:20px;background:var(--bdr)}
.rp-head .rp-ico{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,rgba(79,77,232,.16),rgba(63,207,94,.14));border:1px solid rgba(79,77,232,.2);color:var(--pu);display:flex;align-items:center;justify-content:center}
.rp-head .rp-ico i{font-size:17px}
.rp-title{font-size:15px;font-weight:700;color:var(--t1)}
.rp-count{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--t3)}
.rp-count b{color:var(--pu)}
.rp-toolbar{background:var(--white);border-bottom:1px solid var(--bdr);padding:11px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0}
.rp-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rp-fpill{font-size:12px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:20px;padding:6px 13px;cursor:pointer;transition:.14s;font-family:inherit}
.rp-fpill.on{background:var(--pu2);color:var(--pu);border-color:rgba(79,77,232,.3)}
.rp-fpill:hover{border-color:var(--pu)}
.rp-kbd{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t3);margin-right:4px}
.rp-kbd .k{font-family:ui-monospace,monospace;font-size:10.5px;background:var(--s2);border:1px solid var(--bdr);border-radius:5px;padding:2px 6px;color:var(--t2)}
.rp-bulkbar{display:none;align-items:center;gap:10px;padding:10px 22px;background:var(--pu2);border-bottom:1px solid var(--bdr);flex-shrink:0;font-size:12.5px;color:var(--t1)}
.rp-bulkbar.on{display:flex}
.rp-bulk-btn{font-size:12px;font-weight:600;color:var(--t1);background:var(--white);border:1px solid var(--bdr);border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px}
.rp-bulk-btn:hover{border-color:var(--pu);color:var(--pu)}
.rp-body{flex:1;overflow-y:auto;padding:16px 22px 28px;background:var(--page);min-height:0}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.rp-card{background:var(--white);border:1px solid var(--bdr);border-radius:13px;overflow:hidden;transition:border-color .15s,box-shadow .15s,opacity .25s}
.rp-card:hover{border-color:#A5A3FF;box-shadow:0 4px 18px rgba(79,77,232,.1)}
.rp-card.reviewed{opacity:.55}
.rp-card.sel{border-color:var(--pu);box-shadow:0 0 0 2px rgba(79,77,232,.25)}
.rp-card.kbfocus{outline:2px solid var(--pu);outline-offset:1px}
.rp-media{position:relative;aspect-ratio:4/3;background:var(--s2);display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:38px;cursor:pointer}
.rp-media .gif{position:absolute;top:8px;left:8px;font-size:9.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px;display:flex;align-items:center;gap:4px}
.rp-card-conf{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;color:#fff}
.rp-selbox{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:6px;border:2px solid #fff;background:rgba(0,0,0,.32);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.rp-card.sel .rp-selbox{background:var(--pu);border-color:var(--pu)}
.rp-meta{padding:10px 12px}
.rp-meta-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--t3);margin-bottom:8px}
.rp-curtag{font-size:11.5px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:5px;margin-bottom:9px}
.rp-curtag i{font-size:14px;color:var(--t2)}
.rp-actions{display:flex;gap:6px}
.rp-act-sm{flex:1;min-width:0;font-size:11px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:7px 8px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:5px;transition:.13s;white-space:nowrap;overflow:hidden}
.rp-act-sm i{font-size:13px;flex-shrink:0}
.rp-act-sm:hover{border-color:var(--pu);color:var(--pu)}
.rp-act-sm.done{background:var(--gr2);color:var(--gr);border-color:rgba(21,160,102,.3)}
.rp-act-sm.done-re{background:var(--re2);color:var(--re);border-color:rgba(212,43,32,.3)}
.rp-resel{width:100%;font-size:11.5px;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:7px 28px 7px 9px;font-family:inherit;cursor:pointer;margin-bottom:6px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364625E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
#replayView.view.active{display:flex;flex-direction:column;width:100%;flex:1;min-width:0}

/* detail overlay */
.rp-detail-overlay{position:fixed;inset:0;z-index:960;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.rp-detail-overlay.open{display:flex;animation:fdrop .16s ease}
.rp-detail{background:var(--white);border-radius:16px;width:100%;max-width:480px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.rp-detail-hd{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--bdr);font-size:14px;font-weight:700;color:var(--t1)}
.rp-detail-x{width:30px;height:30px;border-radius:50%;border:none;background:var(--s2);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rp-detail-clip{aspect-ratio:16/10;background:#111;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:13px}
.rp-detail-clip i{font-size:42px;opacity:.85}
.rp-detail-meta{padding:14px 18px;font-size:12.5px;color:var(--t2);line-height:1.7}
.rp-detail-actions{display:flex;gap:10px;padding:0 18px 16px}
.rp-act{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:700;padding:11px;border-radius:10px;cursor:pointer;font-family:inherit;border:1px solid var(--bdr)}
.rp-act-valid{background:var(--gr2);color:var(--gr);border-color:rgba(21,160,102,.3)}
.rp-act-invalid{background:var(--re2);color:var(--re);border-color:rgba(212,43,32,.3)}
.rp-reason{padding:0 18px 18px}
.rp-reason-lbl{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:9px}
.rp-reason-opts{display:flex;flex-direction:column;gap:7px}
.rp-reason-opt{text-align:left;font-size:12.5px;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit}
.rp-reason-opt:hover{border-color:var(--re);color:var(--re)}

/* toast */
.rp-toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:980;display:flex;flex-direction:column;gap:8px;align-items:center}
.rp-toast{display:flex;align-items:center;gap:12px;background:var(--t1);color:var(--white);font-size:13px;font-weight:500;padding:11px 16px;border-radius:11px;box-shadow:0 12px 32px -8px rgba(0,0,0,.4);animation:toastin .24s ease}
.rp-toast .undo{font-size:12.5px;font-weight:700;color:#8B87FF;background:none;border:none;cursor:pointer;font-family:inherit}
@keyframes toastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
[data-theme="dark"] .rp-toast{background:var(--s2);border:1px solid var(--bdr)}

/* Replay images (match app snapshot style) */
.rp-snap-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.78)}
.rp-media-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.78)}
.rp-media-clip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111;color:#fff;font-size:34px;opacity:.85}
.rp-gif{position:absolute;top:8px;left:8px;font-size:9.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px;display:flex;align-items:center;gap:4px;z-index:2}
.replay-impact span{font-weight:700;color:var(--t1)}
/* Replay page sort + pagination */
.rp-sort{display:flex;align-items:center;gap:7px}
.rp-sort-sel{font-size:12px;font-weight:600;color:var(--t2);background:var(--white);border:1px solid var(--bdr);border-radius:9px;padding:7px 30px 7px 11px;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364625E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.rp-sort-sel:hover{border-color:var(--pu)}
.rp-datebtn{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t2);background:var(--white);border:1px solid var(--bdr);border-radius:9px;padding:7px 12px;cursor:pointer}
.rp-datebtn i{font-size:14px}
.rp-pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px 0 4px}
.rp-pg-btn{min-width:32px;height:32px;border-radius:8px;border:1px solid var(--bdr);background:var(--white);color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center}
.rp-pg-btn:hover:not(:disabled){border-color:var(--pu);color:var(--pu)}
.rp-pg-btn.on{background:var(--pu);color:#fff;border-color:var(--pu)}
.rp-pg-btn:disabled{opacity:.4;cursor:default}
.rp-pg-info{font-size:12px;color:var(--t3);margin:0 8px}

/* Replay queue clip hover-autoplay mock */
.rp-media-clip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111;color:#fff;overflow:hidden}
.rp-clip-play{font-size:34px;opacity:.85;transition:opacity .2s,transform .2s;z-index:2}
.rp-media-clip.playing .rp-clip-play{opacity:0;transform:scale(.6)}
.rp-clip-scan{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 45%,rgba(79,77,232,.12) 50%,rgba(255,255,255,.06) 55%,rgba(255,255,255,0) 100%);background-size:100% 220%;transition:opacity .2s}
.rp-media-clip.playing .rp-clip-scan{opacity:1;animation:rpscan 1.6s linear infinite}
@keyframes rpscan{0%{background-position:0 -110%}100%{background-position:0 110%}}
.rp-clip-live{position:absolute;bottom:8px;right:8px;display:none;align-items:center;gap:4px;font-size:9px;font-weight:700;color:#fff;background:rgba(212,43,32,.85);padding:2px 7px;border-radius:5px;z-index:3;letter-spacing:.4px}
.rp-media-clip.playing .rp-clip-live{display:flex}
.rp-clip-dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:rppulse 1s infinite}
@keyframes rppulse{0%,100%{opacity:1}50%{opacity:.3}}
.rp-media-clip.playing{box-shadow:inset 0 0 0 2px rgba(79,77,232,.5)}

/* bulk bar demo controls */
.rp-bulk-lbl{font-size:11.5px;font-weight:600;color:var(--t2)}
.rp-bulk-sel{font-size:12px;font-weight:600;color:var(--t1);background:var(--white);border:1px solid var(--bdr);border-radius:8px;padding:6px 26px 6px 9px;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364625E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.rp-bulk-clear{margin-left:auto}
.done-re{background:var(--re2)!important;color:var(--re)!important;border-color:rgba(212,43,32,.3)!important}

/* shared invalid-reason menu */
.rp-reason-menu{position:fixed;z-index:990;background:var(--white);border:1px solid var(--bdr);border-radius:11px;box-shadow:0 16px 40px -12px rgba(17,17,18,.28);padding:6px;min-width:190px;display:flex;flex-direction:column;gap:2px;animation:fdrop .14s ease}
.rp-reason-mi{text-align:left;font-size:12.5px;color:var(--t2);background:none;border:none;border-radius:7px;padding:9px 11px;cursor:pointer;font-family:inherit}
.rp-reason-mi:hover{background:var(--re2);color:var(--re)}

/* Replay summary band (fills space below tab content) */
.rp-summary{background:linear-gradient(135deg,rgba(79,77,232,.05),rgba(63,207,94,.04));border:1px solid var(--bdr);border-radius:16px;padding:18px 20px;margin-top:4px}
.rp-sum-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.rp-sum-title{font-size:13.5px;font-weight:700;color:var(--t1);letter-spacing:-.25px}
.rp-sum-sub{font-size:11.5px;color:var(--t3);margin-top:2px}
.rp-sum-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--pu);background:var(--pu2);border:1px solid rgba(79,77,232,.2);padding:4px 10px;border-radius:20px;white-space:nowrap}
.rp-sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rp-sum-cell{display:flex;align-items:flex-start;gap:11px;background:var(--white);border:1px solid var(--bdr);border-radius:12px;padding:13px 14px}
.rp-sum-ico{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,rgba(79,77,232,.14),rgba(63,207,94,.12));color:var(--pu);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rp-sum-ico i{font-size:17px}
.rp-sum-meta{flex:1;min-width:0}
.rp-sum-val{font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.5px}
.rp-sum-lbl{font-size:11px;color:var(--t2);margin-top:1px}
.rp-sum-bar{height:5px;border-radius:3px;background:var(--s2);margin-top:8px;overflow:hidden}
.rp-sum-bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#4F4DE8,#3FCF5E);transition:width .5s ease}
@media(max-width:1100px){.rp-sum-grid{grid-template-columns:1fr}}

/* Last updated + Refresh (control bar) */
.an-updated{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3);font-weight:500}
.an-updated-dot{width:7px;height:7px;border-radius:50%;background:var(--gr);box-shadow:0 0 0 3px var(--gr2)}
.an-refresh{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--t2);background:var(--white);border:1px solid var(--bdr);border-radius:8px;padding:5px 10px;cursor:pointer;font-family:inherit;margin-left:2px;transition:.14s}
.an-refresh:hover{border-color:var(--pu);color:var(--pu)}
.an-refresh i{font-size:14px;transition:transform .6s ease}
.an-refresh.spinning i{transform:rotate(360deg)}

/* Replay: select-all, date range, empty state */
.rp-selall{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t2);background:var(--white);border:1px solid var(--bdr);border-radius:9px;padding:7px 12px;cursor:pointer;font-family:inherit;white-space:nowrap}
.rp-selall:hover{border-color:var(--pu);color:var(--pu)}
.rp-selall.on{background:var(--pu2);color:var(--pu);border-color:rgba(79,77,232,.3)}
.rp-selall i{font-size:15px}
.rp-daterange{position:fixed;z-index:990;background:var(--white);border:1px solid var(--bdr);border-radius:13px;box-shadow:0 16px 40px -12px rgba(17,17,18,.28);padding:14px;width:262px;animation:fdrop .14s ease}
.rp-dr-title{font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:11px}
.rp-dr-title span{font-weight:500;color:var(--t3);font-size:11px}
.rp-dr-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.rp-dr-row label{font-size:12px;color:var(--t2);width:40px;font-weight:600}
.rp-dr-row input[type=date]{flex:1;font-size:12.5px;font-family:inherit;color:var(--t1);background:var(--s2);border:1px solid var(--bdr);border-radius:8px;padding:7px 9px}
.rp-dr-presets{display:flex;gap:6px;margin:11px 0}
.rp-dr-presets button{flex:1;font-size:11.5px;font-weight:600;color:var(--t2);background:var(--s2);border:1px solid var(--bdr);border-radius:7px;padding:6px 4px;cursor:pointer;font-family:inherit}
.rp-dr-presets button:hover{border-color:var(--pu);color:var(--pu)}
.rp-dr-actions{display:flex;justify-content:flex-end}
.rp-dr-apply{font-size:12.5px;font-weight:700;color:#fff;background:var(--pu);border:none;border-radius:8px;padding:8px 18px;cursor:pointer;font-family:inherit}
.rp-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;gap:6px}
.rp-empty-ico{width:60px;height:60px;border-radius:16px;background:var(--white);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.rp-empty-ico i{font-size:26px;color:var(--t3)}
.rp-empty-title{font-size:15px;font-weight:700;color:var(--t1)}
.rp-empty-sub{font-size:12.5px;color:var(--t3);max-width:280px}
.rp-empty-btn{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--pu);background:var(--pu2);border:1px solid rgba(79,77,232,.25);border-radius:9px;padding:8px 18px;cursor:pointer;font-family:inherit}
.rp-empty-btn:hover{background:var(--white)}

/* Filter signifiers */
.an-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--pu);color:#fff;font-size:10.5px;font-weight:700}
.an-filter-btn.active{border-color:var(--pu);color:var(--pu);background:var(--pu2)}
.an-active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 22px;background:var(--white);border-bottom:1px solid var(--bdr)}
.aaf-lbl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--t2)}
.aaf-lbl i{font-size:14px;color:var(--pu)}
.aaf-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--pu);background:var(--pu2);border:1px solid rgba(79,77,232,.22);border-radius:20px;padding:4px 6px 4px 11px}
.aaf-chip button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:rgba(79,77,232,.16);border-radius:50%;cursor:pointer;color:var(--pu);padding:0}
.aaf-chip button i{font-size:11px}
.aaf-clear{font-size:11.5px;font-weight:600;color:var(--t2);background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:underline;margin-left:2px}
.aaf-clear:hover{color:var(--re)}