/* ==================================================================
   SHELL: the portal as its own app (pairs with shell.js).
   Loaded after theme-hl.css. Four ids (#bpx x4) so it wins over every
   older layer without fighting them rule by rule.

   dark flat sidebar  #232D3B, hover #2F3A4A, active #3A4657
   page               #F2F4F7, white cards, 1px #E4E7EC borders, 8px radius
   controls           32px high, 6px radius, 13px text
   top bar            52px, white; section tabs 42px under it
   ================================================================== */
#bpx#bpx#bpx#bpx{
  --hl-side:#232D3B; --hl-side-h:#2F3A4A; --hl-side-on:#3A4657; --hl-side-line:rgba(255,255,255,.08);
  --hl-side-t:#C5CDD8; --hl-side-i:#98A4B3; --hl-side-mu:#8D99A8;
  --hl-sw:232px;
  --hl-r:8px;
}
#bpx#bpx#bpx#bpx:not(.bpx-dark){ --bg:#F2F4F7; --bg-2:#EAECF0; --soft:#F9FAFB; --line:#E4E7EC; --line-2:#EEF0F3; }
#bpx#bpx#bpx#bpx.bpx-dark{
  --hl-side:#111722; --hl-side-h:#1C2330; --hl-side-on:#252E3D; --hl-side-line:rgba(255,255,255,.07);
  --bg:#0C111D; --card:#161B26; --soft:#1A202C; --line:#262C38; --line-2:#202632;
}

/* ---------- the app fills the window ---------- */
html.bp-appmode body{overflow:hidden}
#bpx#bpx#bpx#bpx .bpx-close,#bpx#bpx#bpx#bpx .bpx-themebtn,#bpx#bpx#bpx#bpx .bpx-user2,#bpx#bpx#bpx#bpx .bpx-side .bpx-brand2,#bpx#bpx#bpx#bpx .bpx-mhdr,#bpx#bpx#bpx#bpx .bpx-mobbar{display:none !important}
.oaw-btn{display:none !important}
.oaw-panel{top:60px !important;bottom:auto !important;right:16px !important;max-height:min(560px,calc(100vh - 80px)) !important;border-radius:10px !important;z-index:2900 !important}
#bpx#bpx#bpx#bpx .bpx-app.on{display:grid !important;grid-template-columns:var(--hl-sw) minmax(0,1fr) !important;grid-template-rows:minmax(0,1fr) !important;
  height:100vh;height:100dvh;overflow:hidden;transition:grid-template-columns 160ms ease}
#bpx#bpx#bpx#bpx .bpx-app.on.hl-min{--hl-sw:60px}

/* ---------- sidebar ---------- */
#bpx#bpx#bpx#bpx .bpx-side{display:flex !important;flex-direction:column;position:relative !important;top:auto;height:100vh;height:100dvh;min-height:0;box-sizing:border-box;
  overflow-y:auto;overflow-x:hidden;padding:10px 8px 8px !important;margin:0 !important;background:var(--hl-side) !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;color:var(--hl-side-t)}
#bpx#bpx#bpx#bpx .bpx-side::before,#bpx#bpx#bpx#bpx .bpx-side::after{display:none !important}
#bpx#bpx#bpx#bpx .bpx-side .hl-i{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bpx#bpx#bpx#bpx .hl-acct{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:7px 8px;border-radius:8px;background:rgba(255,255,255,.05);
  border:1px solid var(--hl-side-line);color:#fff;text-align:left;cursor:pointer;font:inherit;transition:background-color 120ms ease;box-sizing:border-box}
#bpx#bpx#bpx#bpx .hl-acct:hover{background:rgba(255,255,255,.09)}
#bpx#bpx#bpx#bpx .hl-acct-logo{width:30px;height:30px;flex:0 0 30px;border-radius:6px;background:transparent;color:#232D3B;display:grid;place-items:center;overflow:hidden;font-size:12px;font-weight:700}
#bpx#bpx#bpx#bpx .hl-acct-logo img{width:100%;height:100%;object-fit:contain}
#bpx#bpx#bpx#bpx .hl-acct-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
#bpx#bpx#bpx#bpx .hl-acct-t b{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .hl-acct-t small{font-size:11.5px;color:var(--hl-side-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .hl-acct-chev{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:var(--hl-side-mu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bpx#bpx#bpx#bpx .hl-srow{display:flex;gap:6px;margin:10px 0 10px}
#bpx#bpx#bpx#bpx .hl-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:6px;background:rgba(255,255,255,.05);
  border:1px solid var(--hl-side-line);color:var(--hl-side-mu);font:400 13px/1 var(--sans);cursor:pointer;text-align:left;transition:background-color 120ms ease}
#bpx#bpx#bpx#bpx .hl-search:hover{background:rgba(255,255,255,.09);color:var(--hl-side-t)}
#bpx#bpx#bpx#bpx .hl-search svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#bpx#bpx#bpx#bpx .hl-search span{flex:1}
#bpx#bpx#bpx#bpx .hl-search kbd{font:500 10.5px/1 var(--sans);padding:3px 5px;border-radius:4px;background:rgba(255,255,255,.1);color:var(--hl-side-t);white-space:nowrap}
#bpx#bpx#bpx#bpx .hl-quick{width:32px;height:32px;flex:0 0 32px;border-radius:6px;border:0;background:#155EEF;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color 120ms ease}
#bpx#bpx#bpx#bpx .hl-quick:hover{background:#004EEB}
#bpx#bpx#bpx#bpx .hl-quick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#bpx#bpx#bpx#bpx .bpx-side .bpx-nav{display:flex !important;flex-direction:column;gap:1px !important;padding:0 !important;margin:0 !important;flex:0 0 auto}
#bpx#bpx#bpx#bpx .bpx-side .hl-ni{display:flex !important;align-items:center;gap:10px !important;width:100%;height:34px;min-height:34px;padding:0 10px !important;margin:0 !important;box-sizing:border-box;
  border-radius:6px !important;border:0;background:transparent !important;color:var(--hl-side-t) !important;font:500 13.5px/1 var(--sans) !important;letter-spacing:0 !important;
  text-decoration:none;cursor:pointer;box-shadow:none !important;transition:background-color 120ms ease,color 120ms ease !important;text-align:left;white-space:nowrap}
#bpx#bpx#bpx#bpx .bpx-side .hl-ni .hl-i{color:var(--hl-side-i)}
#bpx#bpx#bpx#bpx .bpx-side .hl-ni:hover{background:var(--hl-side-h) !important;color:#fff !important}
#bpx#bpx#bpx#bpx .bpx-side .hl-ni:hover .hl-i{color:#fff}
#bpx#bpx#bpx#bpx .bpx-side .hl-ni.on{background:var(--hl-side-on) !important;color:#fff !important;font-weight:600 !important}
#bpx#bpx#bpx#bpx .bpx-side .hl-ni.on .hl-i{color:#fff}
#bpx#bpx#bpx#bpx .bpx-side .hl-ni:focus-visible,#bpx#bpx#bpx#bpx .hl-acct:focus-visible,#bpx#bpx#bpx#bpx .hl-search:focus-visible,#bpx#bpx#bpx#bpx .hl-quick:focus-visible{outline:2px solid #84ADFF !important;outline-offset:-2px;box-shadow:none !important}
#bpx#bpx#bpx#bpx .bpx-side .hl-nl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .bpx-side .hl-lock{width:13px;height:13px;flex:0 0 13px;opacity:.6}
#bpx#bpx#bpx#bpx .hl-gap{height:1px;margin:10px 6px;background:var(--hl-side-line)}
#bpx#bpx#bpx#bpx .hl-sfoot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:1px}
#bpx#bpx#bpx#bpx .hl-sfoot .hl-collapse{color:var(--hl-side-mu) !important;font-weight:400 !important;font-size:12.5px !important}
#bpx#bpx#bpx#bpx .hl-scrim{display:none}
@media (min-width:821px){
  #bpx#bpx#bpx#bpx .hl-min .hl-nl,#bpx#bpx#bpx#bpx .hl-min .hl-acct-t,#bpx#bpx#bpx#bpx .hl-min .hl-acct-chev,#bpx#bpx#bpx#bpx .hl-min .hl-search span,#bpx#bpx#bpx#bpx .hl-min .hl-search kbd,#bpx#bpx#bpx#bpx .hl-min .bpx-side .hl-lock{display:none !important}
  #bpx#bpx#bpx#bpx .hl-min .bpx-side{padding:10px 8px 8px !important}
  #bpx#bpx#bpx#bpx .hl-min .hl-acct{justify-content:center;padding:7px 0;background:transparent;border-color:transparent}
  #bpx#bpx#bpx#bpx .hl-min .hl-srow{flex-direction:column;align-items:center}
  #bpx#bpx#bpx#bpx .hl-min .hl-search{flex:0 0 32px;width:32px;justify-content:center;padding:0}
  #bpx#bpx#bpx#bpx .hl-min .bpx-side .hl-ni{justify-content:center;padding:0 !important}
  #bpx#bpx#bpx#bpx .hl-min .hl-collapse .hl-i{transform:rotate(180deg)}
}

/* ---------- main column, top bar, tabs ---------- */
#bpx#bpx#bpx#bpx .bpx-main{height:100vh;height:100dvh;min-height:0;overflow-y:auto !important;overflow-x:hidden;padding:0 !important;background:var(--bg) !important;box-sizing:border-box}
#bpx#bpx#bpx#bpx .hl-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 20px;box-sizing:border-box;
  background:var(--card);border-bottom:1px solid var(--line)}
#bpx#bpx#bpx#bpx .hl-ttl{min-width:0;flex:1}
#bpx#bpx#bpx#bpx .hl-ttl h1{margin:0 !important;font:600 16px/22px var(--sans) !important;letter-spacing:-.005em !important;color:var(--ink) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .hl-ttl p{display:none !important}
#bpx#bpx#bpx#bpx .hl-burger{display:none;width:32px;height:32px;margin-left:-6px;border:0;border-radius:6px;background:transparent;color:var(--ink-2);cursor:pointer;place-items:center}
#bpx#bpx#bpx#bpx .hl-burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#bpx#bpx#bpx#bpx .hl-burger:hover{background:var(--hl-hover)}
#bpx#bpx#bpx#bpx .hl-tacts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#bpx#bpx#bpx#bpx .hl-rb{position:relative;width:32px;height:32px;min-height:0 !important;padding:0 !important;border-radius:50% !important;border:0 !important;display:grid;place-items:center;
  color:#fff !important;cursor:pointer;box-shadow:none !important;transition:filter 120ms ease,transform 80ms ease}
#bpx#bpx#bpx#bpx .hl-rb:hover{filter:brightness(1.08)}
#bpx#bpx#bpx#bpx .hl-rb .hl-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bpx#bpx#bpx#bpx .hl-rb.g{background:#12B76A !important} #bpx#bpx#bpx#bpx .hl-rb.p{background:#7A5AF8 !important} #bpx#bpx#bpx#bpx .hl-rb.o{background:#F79009 !important} #bpx#bpx#bpx#bpx .hl-rb.b{background:#2E90FA !important}
#bpx#bpx#bpx#bpx .hl-badge{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:#F04438;color:#fff;
  font:600 10px/16px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--card)}
#bpx#bpx#bpx#bpx .hl-badge[hidden]{display:none}
#bpx#bpx#bpx#bpx .hl-av{width:32px;height:32px;min-height:0 !important;padding:0 !important;margin-left:4px;border-radius:50% !important;border:0 !important;background:#475467 !important;color:#fff !important;
  font:600 12px/32px var(--sans) !important;text-align:center;cursor:pointer;flex:0 0 32px;box-shadow:none !important}
#bpx#bpx#bpx#bpx .hl-av.sm{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;font-size:12px !important;line-height:1 !important;margin:0}
#bpx#bpx#bpx#bpx.bpx-dark .hl-av{background:#344054 !important}
#bpx#bpx#bpx#bpx .hl-tabs{position:sticky;top:52px;z-index:19;display:flex;align-items:stretch;gap:2px;height:42px;padding:0 14px;box-sizing:border-box;
  background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#bpx#bpx#bpx#bpx .hl-tabs::-webkit-scrollbar{display:none}
#bpx#bpx#bpx#bpx .hl-tabs[hidden]{display:none}
#bpx#bpx#bpx#bpx .hl-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:0 10px !important;min-height:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;
  border-bottom:2px solid transparent !important;background:transparent !important;box-shadow:none !important;color:var(--grey) !important;
  font:500 13px/1 var(--sans) !important;white-space:nowrap;cursor:pointer;transition:color 120ms ease,border-color 120ms ease !important;transform:none !important}
#bpx#bpx#bpx#bpx .hl-tab:hover{color:var(--ink) !important}
#bpx#bpx#bpx#bpx .hl-tab.on{color:var(--blue) !important;border-bottom-color:var(--blue) !important;font-weight:600 !important}
#bpx#bpx#bpx#bpx .hl-tab .hl-i{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
#bpx#bpx#bpx#bpx.bpx-dark .hl-tab.on{color:#84ADFF !important;border-bottom-color:#528BFF !important}
#bpx#bpx#bpx#bpx #bpxViewArea{padding:16px 20px 40px;box-sizing:border-box;max-width:1600px}

/* ---------- menus ---------- */
#bpx#bpx#bpx#bpx .hl-menu{position:fixed;z-index:3000;min-width:220px;max-width:min(360px,calc(100vw - 16px));max-height:min(70vh,560px);overflow:auto;box-sizing:border-box;
  padding:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 12px 16px -4px rgba(16,24,40,.10),0 4px 6px -2px rgba(16,24,40,.05);animation:hlMenu 120ms ease-out both;color:var(--ink)}
@keyframes hlMenu{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#bpx#bpx#bpx#bpx .hl-mhead{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin:0 -4px 4px;border-bottom:1px solid var(--line)}
#bpx#bpx#bpx#bpx .hl-mhead > span:last-child,#bpx#bpx#bpx#bpx .hl-mhead{min-width:0}
#bpx#bpx#bpx#bpx .hl-mhead b{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .hl-mhead small{display:block;font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .hl-notes .hl-mhead,#bpx#bpx#bpx#bpx .hl-mhead:has(> b){justify-content:space-between}
#bpx#bpx#bpx#bpx .hl-mi{display:flex !important;align-items:center;gap:10px;width:100%;min-height:32px !important;padding:6px 10px !important;margin:0 !important;box-sizing:border-box;
  border:0 !important;border-radius:6px !important;background:transparent !important;box-shadow:none !important;color:var(--ink-2) !important;
  font:500 13px/18px var(--sans) !important;text-align:left;cursor:pointer;transform:none !important}
#bpx#bpx#bpx#bpx .hl-mi:hover,#bpx#bpx#bpx#bpx .hl-mi:focus-visible{background:var(--hl-hover) !important;color:var(--ink) !important;outline:none;box-shadow:none !important}
#bpx#bpx#bpx#bpx .hl-mi > span{flex:1;min-width:0}
#bpx#bpx#bpx#bpx .hl-mi .hl-i{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:var(--mu);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bpx#bpx#bpx#bpx .hl-mi small{font-size:11.5px;color:var(--mu);white-space:nowrap}
#bpx#bpx#bpx#bpx .hl-mi kbd,#bpx#bpx#bpx#bpx .hl-pal kbd{font:500 11px/1 var(--sans);padding:3px 5px;border-radius:4px;border:1px solid var(--line);background:var(--soft);color:var(--grey)}
#bpx#bpx#bpx#bpx .hl-mi.danger{color:var(--err-t) !important}
#bpx#bpx#bpx#bpx .hl-mi.danger .hl-i{stroke:var(--err-t)}
#bpx#bpx#bpx#bpx .hl-mlab{padding:8px 10px 4px;font:600 11.5px/1.2 var(--sans);color:var(--mu)}
#bpx#bpx#bpx#bpx .hl-msep{height:1px;margin:4px -4px;background:var(--line)}
#bpx#bpx#bpx#bpx .hl-notes{width:380px}
#bpx#bpx#bpx#bpx .hl-notes .hl-mi{align-items:flex-start}
#bpx#bpx#bpx#bpx .hl-notes .hl-mi > span{white-space:normal}
#bpx#bpx#bpx#bpx .hl-notes .hl-mi .hl-i{margin-top:1px}
#bpx#bpx#bpx#bpx .hl-dot{width:8px;height:8px;flex:0 0 8px;margin-top:5px;border-radius:50%;background:var(--blue)}
#bpx#bpx#bpx#bpx .hl-dot.bad{background:#F04438} #bpx#bpx#bpx#bpx .hl-dot.warn{background:#F79009}
#bpx#bpx#bpx#bpx .hl-mempty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 10px;color:var(--mu);font-size:13px}
#bpx#bpx#bpx#bpx .hl-mempty .hl-i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
#bpx#bpx#bpx#bpx .hl-sw{position:relative;width:28px;height:16px;flex:0 0 28px;border-radius:8px;background:var(--line-in);transition:background-color 120ms ease}
#bpx#bpx#bpx#bpx .hl-sw i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.2);transition:left 120ms ease}
#bpx#bpx#bpx#bpx .hl-sw.on{background:var(--blue)} #bpx#bpx#bpx#bpx .hl-sw.on i{left:14px}

/* ---------- command palette ---------- */
#bpx#bpx#bpx#bpx .hl-pal-ov{position:fixed;inset:0;z-index:3000;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;box-sizing:border-box;
  background:rgba(16,24,40,.45);animation:hlFade 120ms ease-out both}
#bpx#bpx#bpx#bpx .hl-pal{width:min(620px,100%);max-height:72vh;display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 24px 48px -12px rgba(16,24,40,.25);animation:hlPop 160ms cubic-bezier(.2,0,0,1) both}
#bpx#bpx#bpx#bpx .hl-pal-in{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
#bpx#bpx#bpx#bpx .hl-pal-in .hl-i{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round}
#bpx#bpx#bpx#bpx .hl-pal-in input{flex:1;min-width:0;height:48px;min-height:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;font-size:15px !important;color:var(--ink) !important}
#bpx#bpx#bpx#bpx .hl-pal-l{overflow-y:auto;padding:4px 6px 8px;flex:1}
#bpx#bpx#bpx#bpx .hl-pal-k{padding:10px 8px 4px;font:600 11.5px/1 var(--sans);color:var(--mu)}
#bpx#bpx#bpx#bpx .hl-pal-r{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;cursor:pointer;font-size:13.5px;color:var(--ink)}
#bpx#bpx#bpx#bpx .hl-pal-r .hl-i{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:var(--mu);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bpx#bpx#bpx#bpx .hl-pal-r .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#bpx#bpx#bpx#bpx .hl-pal-r .s{margin-left:auto;padding-left:12px;font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
#bpx#bpx#bpx#bpx .hl-pal-r.on{background:var(--blue-l);color:var(--blue-t)}
#bpx#bpx#bpx#bpx .hl-pal-r.on .hl-i{stroke:var(--blue)}
#bpx#bpx#bpx#bpx .hl-pal-none{padding:28px 12px;text-align:center;color:var(--mu);font-size:13px}
#bpx#bpx#bpx#bpx .hl-pal-f{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--mu);flex:0 0 auto}
#bpx#bpx#bpx#bpx .hl-pal-f kbd{margin-right:3px}

/* ---------- density: 32px controls, 6px corners, 8px cards ---------- */
#bpx#bpx#bpx#bpx .bpx-btn,#bpx#bpx#bpx#bpx .bpx-addbtn,#bpx#bpx#bpx#bpx .bpx-donebtn,#bpx#bpx#bpx#bpx .bpx-savebtn,#bpx#bpx#bpx#bpx .bpx-ghostbtn,#bpx#bpx#bpx#bpx .hero-cta,#bpx#bpx#bpx#bpx .bpx-mtab,#bpx#bpx#bpx#bpx .bpx-rowbtn,#bpx#bpx#bpx#bpx .bpx-delbtn,#bpx#bpx#bpx#bpx .pm-btn,#bpx#bpx#bpx#bpx .pjs-act{
  min-height:32px !important;height:auto;padding:0 12px !important;border-radius:6px !important;font-size:13px !important;font-weight:500 !important;line-height:18px !important;width:auto}
#bpx#bpx#bpx#bpx .bpx-btn:not(.ghost),#bpx#bpx#bpx#bpx .bpx-addbtn,#bpx#bpx#bpx#bpx .bpx-donebtn,#bpx#bpx#bpx#bpx .bpx-savebtn{font-weight:600 !important}
#bpx#bpx#bpx#bpx .bpx-rowbtn,#bpx#bpx#bpx#bpx .bpx-delbtn{min-height:28px !important;padding:0 10px !important;font-size:12.5px !important}
#bpx#bpx#bpx#bpx .bpx-iconbtn{min-width:30px !important;min-height:30px !important;border-radius:6px !important}
#bpx#bpx#bpx#bpx input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),#bpx#bpx#bpx#bpx select{min-height:32px !important;border-radius:6px !important;font-size:13px !important}
#bpx#bpx#bpx#bpx textarea{border-radius:6px !important;font-size:13px !important}
#bpx#bpx#bpx#bpx .bpx-panel,#bpx#bpx#bpx#bpx .bpx-stat,#bpx#bpx#bpx#bpx .bpx-card,#bpx#bpx#bpx#bpx .bpx-cd-card,#bpx#bpx#bpx#bpx .bpx-auto-card,#bpx#bpx#bpx#bpx .bg-sheet,#bpx#bpx#bpx#bpx .pj-card,#bpx#bpx#bpx#bpx .dash-hero,#bpx#bpx#bpx#bpx .dash-tile,#bpx#bpx#bpx#bpx .arc-card,#bpx#bpx#bpx#bpx .sp-card,#bpx#bpx#bpx#bpx .sp-pk-card,#bpx#bpx#bpx#bpx .bpx-cwrap,#bpx#bpx#bpx#bpx .hl-skel-card{
  border-radius:var(--hl-r) !important;box-shadow:none !important;border-color:var(--line) !important}
#bpx#bpx#bpx#bpx .bpx-panel{padding:16px !important}
#bpx#bpx#bpx#bpx .bpx-ptitle{font-size:14px !important;line-height:20px}
#bpx#bpx#bpx#bpx .bpx-ctable,#bpx#bpx#bpx#bpx .bpx-table{font-size:13px !important}
#bpx#bpx#bpx#bpx .bpx-ctable thead th,#bpx#bpx#bpx#bpx .bpx-table th{height:36px !important;font-size:12px !important;font-weight:500 !important;background:var(--soft) !important;color:var(--mu) !important}
#bpx#bpx#bpx#bpx .bpx-ctable td,#bpx#bpx#bpx#bpx .bpx-table td{height:40px !important;padding-top:6px !important;padding-bottom:6px !important;font-size:13px !important}
#bpx#bpx#bpx#bpx .bpx-jobtabs,#bpx#bpx#bpx#bpx .bpx-tabs,#bpx#bpx#bpx#bpx .bpx-bulk-tabs,#bpx#bpx#bpx#bpx .bpx-mailtabs{gap:16px !important}
#bpx#bpx#bpx#bpx .bpx-jt{font-size:13px !important;font-weight:500 !important;padding:8px 2px !important}
#bpx#bpx#bpx#bpx .bpx-jt.on,#bpx#bpx#bpx#bpx .bpx-jt.active{font-weight:600 !important}
#bpx#bpx#bpx#bpx .bpx-modalcard{border-radius:10px !important}
#bpx#bpx#bpx#bpx h2{font-size:18px}

/* ---------- table toolbar and pager ---------- */
#bpx#bpx#bpx#bpx .hl-tbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
#bpx#bpx#bpx#bpx .bpx-panel > .hl-tbar:first-child,#bpx#bpx#bpx#bpx .bpx-cwrap > .hl-tbar:first-child{margin:-4px 0 12px}
#bpx#bpx#bpx#bpx .hl-tsearch{display:flex;align-items:center;gap:6px;height:32px;width:260px;max-width:100%;padding:0 10px;box-sizing:border-box;border:1px solid var(--line-in);border-radius:6px;background:var(--card);cursor:text}
#bpx#bpx#bpx#bpx .hl-tsearch:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--hl-ring-c)}
#bpx#bpx#bpx#bpx .hl-tsearch .hl-i{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round}
#bpx#bpx#bpx#bpx .hl-tsearch input{flex:1;min-width:0;height:30px;min-height:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;font-size:13px !important}
#bpx#bpx#bpx#bpx .hl-tsearch input::-webkit-search-cancel-button{cursor:pointer}
#bpx#bpx#bpx#bpx .hl-tfilt:empty{display:none}
#bpx#bpx#bpx#bpx .hl-tfilt select{height:32px;padding:0 28px 0 10px !important;font-size:13px !important;width:auto}
#bpx#bpx#bpx#bpx .hl-tcount{margin-left:auto;font-size:12.5px;color:var(--mu);white-space:nowrap}
#bpx#bpx#bpx#bpx .hl-pgfoot{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:10px 4px 0;font-size:12.5px;color:var(--mu)}
#bpx#bpx#bpx#bpx .hl-pgfoot:empty{display:none}
#bpx#bpx#bpx#bpx .hl-pgfoot span{margin-right:6px}
#bpx#bpx#bpx#bpx .hl-pgb{width:28px;height:28px;min-height:0 !important;padding:0 !important;display:grid;place-items:center;border:1px solid var(--line-in) !important;border-radius:6px !important;background:var(--card) !important;color:var(--ink-2) !important;font-size:16px;line-height:1;cursor:pointer;box-shadow:none !important}
#bpx#bpx#bpx#bpx .hl-pgb:hover:not(:disabled){background:var(--hl-hover) !important}
#bpx#bpx#bpx#bpx .hl-pgb:disabled{opacity:.4 !important}
#bpx#bpx#bpx#bpx tr[hidden]{display:none !important}
#bpx#bpx#bpx#bpx tr.hl-nomatch td{padding:28px 12px !important;text-align:center;color:var(--mu) !important}
#bpx#bpx#bpx#bpx .hl-inmenu{display:none !important}
#bpx#bpx#bpx#bpx .hl-actcell{white-space:nowrap;text-align:right}
#bpx#bpx#bpx#bpx .hl-rowkeb{width:28px;height:28px;min-height:0 !important;padding:0 !important;display:inline-grid;place-items:center;vertical-align:middle;border:0 !important;border-radius:6px !important;
  background:transparent !important;color:var(--mu) !important;cursor:pointer;box-shadow:none !important;opacity:.35;transition:opacity 120ms ease,background-color 120ms ease !important}
#bpx#bpx#bpx#bpx .hl-rowkeb .hl-i{width:16px;height:16px;fill:currentColor;stroke:none}
#bpx#bpx#bpx#bpx tr:hover .hl-rowkeb,#bpx#bpx#bpx#bpx .hl-rowkeb:focus-visible,#bpx#bpx#bpx#bpx .hl-rowkeb[aria-expanded="true"]{opacity:1}
#bpx#bpx#bpx#bpx .hl-rowkeb:hover{background:var(--bg-2) !important;color:var(--ink) !important}
@media (hover:none){#bpx#bpx#bpx#bpx .hl-rowkeb{opacity:1}}

/* ---------- empty states: centred icon, one line ---------- */
#bpx#bpx#bpx#bpx .bpx-emptyhero,#bpx#bpx#bpx#bpx .bpx-empty2,#bpx#bpx#bpx#bpx .bpx-cempty,#bpx#bpx#bpx#bpx .dash-empty,#bpx#bpx#bpx#bpx .bpc-empty{text-align:center}
#bpx#bpx#bpx#bpx .bpx-emptyhero{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 16px !important;background:transparent !important;border:0 !important}
#bpx#bpx#bpx#bpx .bpx-emptyhero::before,#bpx#bpx#bpx#bpx td.bpx-empty2::before,#bpx#bpx#bpx#bpx td.bpx-cempty::before{content:'';display:block;width:40px;height:40px;margin:0 auto 10px;border-radius:50%;
  background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E") center/20px no-repeat}
#bpx#bpx#bpx#bpx td.bpx-empty2,#bpx#bpx#bpx#bpx td.bpx-cempty{padding:32px 12px !important;color:var(--mu) !important}

/* ---------- dashboard: widget board ---------- */
#bpx#bpx#bpx#bpx .db-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px !important}
#bpx#bpx#bpx#bpx .db-greet{font-size:15px !important;line-height:20px !important;font-weight:600 !important;letter-spacing:0 !important}
#bpx#bpx#bpx#bpx .db-date{font-size:12.5px;color:var(--mu)}
#bpx#bpx#bpx#bpx .db-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#bpx#bpx#bpx#bpx .db-acts .bpx-btn{padding:0 12px !important}
#bpx#bpx#bpx#bpx .db-acts .db-per{margin:0 4px 0 0 !important}
#bpx#bpx#bpx#bpx .db-per{border-radius:6px !important;padding:2px !important;background:var(--bg-2) !important;border:1px solid var(--line) !important}
#bpx#bpx#bpx#bpx .db-per button{border-radius:4px !important;padding:0 10px !important;height:26px;font-size:12.5px !important;font-weight:500 !important}
#bpx#bpx#bpx#bpx .dash-setup,#bpx#bpx#bpx#bpx .dash-mini{margin-bottom:12px !important}
#bpx#bpx#bpx#bpx .hl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:stretch}
#bpx#bpx#bpx#bpx .hl-c3{grid-column:span 3} #bpx#bpx#bpx#bpx .hl-c4{grid-column:span 4} #bpx#bpx#bpx#bpx .hl-c5{grid-column:span 5} #bpx#bpx#bpx#bpx .hl-c8{grid-column:span 8} #bpx#bpx#bpx#bpx .hl-c12{grid-column:span 12}
#bpx#bpx#bpx#bpx .hl-w.hl-spk > .db-st{padding:12px 14px 0 !important;gap:4px}
#bpx#bpx#bpx#bpx .hl-spk .db-st-h{padding-right:26px;gap:6px}
#bpx#bpx#bpx#bpx .hl-spk .db-kl{font-size:13.5px;font-weight:600;text-transform:none;color:var(--ink)}
#bpx#bpx#bpx#bpx .hl-spk .db-kv{font-size:28px}
#bpx#bpx#bpx#bpx .hl-spk .bpc-sparkwrap{margin:6px -14px 0}
#bpx#bpx#bpx#bpx .hl-spk .bpc-spark{height:44px}
#bpx#bpx#bpx#bpx .hl-grid > div{min-width:0}
#bpx#bpx#bpx#bpx .hl-w{position:relative;height:100%}
#bpx#bpx#bpx#bpx .hl-w > .bpx-panel{height:100%;margin:0 !important;box-sizing:border-box;padding:12px 14px 14px !important}
#bpx#bpx#bpx#bpx .hl-stack{display:grid;grid-template-rows:1fr 1fr;gap:12px;height:100%}
#bpx#bpx#bpx#bpx .hl-keb{position:absolute;top:8px;right:6px;z-index:2;width:26px;height:26px;min-height:0 !important;padding:0 !important;display:grid;place-items:center;border:0 !important;border-radius:6px !important;
  background:transparent !important;color:var(--mu) !important;cursor:pointer;box-shadow:none !important}
#bpx#bpx#bpx#bpx .hl-keb svg{width:16px;height:16px;fill:currentColor}
#bpx#bpx#bpx#bpx .hl-keb:hover,#bpx#bpx#bpx#bpx .hl-keb[aria-expanded="true"]{background:var(--bg-2) !important;color:var(--ink) !important}
#bpx#bpx#bpx#bpx .hl-w .bpx-ptitle,#bpx#bpx#bpx#bpx .hl-w .bpc-t,#bpx#bpx#bpx#bpx .hl-wh{font-size:13.5px !important;font-weight:600 !important;line-height:20px !important;color:var(--ink) !important;padding-right:26px}
#bpx#bpx#bpx#bpx .hl-w .bpc-cap{margin-bottom:8px !important;padding-right:26px}
#bpx#bpx#bpx#bpx .hl-w .bpc-lead,#bpx#bpx#bpx#bpx .hl-w .bpx-ptitle .lg2{font-size:12px !important}
#bpx#bpx#bpx#bpx .hl-w .bpc-tbl{display:none}
#bpx#bpx#bpx#bpx .hl-kpi{display:flex;flex-direction:column;min-height:128px;cursor:pointer}
#bpx#bpx#bpx#bpx .hl-kv{margin:auto 0 0;padding-top:8px;font:600 38px/1.1 var(--sans) !important;letter-spacing:-.02em;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .hl-stack .hl-kpi{min-height:0}
#bpx#bpx#bpx#bpx .hl-stack .hl-kv{font-size:30px !important}
#bpx#bpx#bpx#bpx .hl-kv.blue{color:var(--blue)} #bpx#bpx#bpx#bpx .hl-kv.neg{color:var(--err-t)}
#bpx#bpx#bpx#bpx .hl-ks{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:6px 0 auto;font-size:12px;color:var(--mu);text-align:center}
#bpx#bpx#bpx#bpx .hl-w .bpc-ring,#bpx#bpx#bpx#bpx .hl-w .bpc-ring svg{width:136px !important;height:136px !important}
#bpx#bpx#bpx#bpx .hl-w .bpc-hub{padding:0 22px}
#bpx#bpx#bpx#bpx .hl-w .bpc-hub b{font-size:20px !important;font-weight:600 !important}
#bpx#bpx#bpx#bpx .hl-w .bpc-donut{gap:16px !important;flex-wrap:nowrap}
#bpx#bpx#bpx#bpx .hl-w .bpc-dlist{min-width:0}
#bpx#bpx#bpx#bpx .hl-w .bpc-drow2{padding:4px 6px;font-size:12px}
#bpx#bpx#bpx#bpx .hl-w .dash-projs{margin:0}
#bpx#bpx#bpx#bpx .hl-c12 > .dash-projs{background:var(--card);border:1px solid var(--line);border-radius:var(--hl-r);padding:12px 14px 14px}
#bpx#bpx#bpx#bpx .hl-grid .pj-row{gap:12px}
@media (max-width:1280px){
  #bpx#bpx#bpx#bpx .hl-c3{grid-column:span 6} #bpx#bpx#bpx#bpx .hl-c5{grid-column:span 6}
}
@media (max-width:1000px){ #bpx#bpx#bpx#bpx .hl-c4,#bpx#bpx#bpx#bpx .hl-c8{grid-column:span 12} }
@media (max-width:760px){
  #bpx#bpx#bpx#bpx .hl-c3,#bpx#bpx#bpx#bpx .hl-c4,#bpx#bpx#bpx#bpx .hl-c5,#bpx#bpx#bpx#bpx .hl-c8{grid-column:span 12}
  #bpx#bpx#bpx#bpx .hl-w .bpc-donut{flex-wrap:wrap;justify-content:center}
}

/* ---------- sign in: an app screen, not the website ---------- */
#bpx#bpx#bpx#bpx .bpx-auth{min-height:100vh;min-height:100dvh;background:var(--bg) !important;box-sizing:border-box}
#bpx#bpx#bpx#bpx .bpx-auth .bpx-wrap{width:100%;max-width:400px}
#bpx#bpx#bpx#bpx .bpx-auth .bpx-brand2{justify-content:center;margin-bottom:20px !important;font-size:20px !important}
#bpx#bpx#bpx#bpx .bpx-auth .bpx-brand2 .bpmark{width:34px;height:34px}
#bpx#bpx#bpx#bpx .bpx-auth .bpx-card{border-radius:10px !important;border:1px solid var(--line) !important;box-shadow:0 1px 3px rgba(16,24,40,.08) !important;padding:28px !important;background:var(--card) !important}
#bpx#bpx#bpx#bpx .bpx-auth h1{font-size:20px !important;font-weight:600 !important;letter-spacing:-.01em !important;margin:0 0 4px !important}
#bpx#bpx#bpx#bpx .bpx-auth .bpx-sub2{font-size:13px !important;color:var(--mu) !important;margin-bottom:18px !important}
#bpx#bpx#bpx#bpx .bpx-auth label{font-size:13px !important;font-weight:500 !important}
#bpx#bpx#bpx#bpx .bpx-auth input{width:100%;box-sizing:border-box;min-height:38px !important}
#bpx#bpx#bpx#bpx .bpx-auth .bpx-btn{width:100% !important;min-height:38px !important;margin-top:14px}
#bpx#bpx#bpx#bpx .bpx-auth .bpx-hint,#bpx#bpx#bpx#bpx .bpx-auth .bpx-foot2{font-size:12px !important;color:var(--mu) !important}

/* ---------- phones: the sidebar is a drawer ---------- */
@media (max-width:820px){
  #bpx#bpx#bpx#bpx .bpx-app.on{grid-template-columns:minmax(0,1fr) !important}
  #bpx#bpx#bpx#bpx .bpx-side{position:fixed !important;left:0;top:0;bottom:0;z-index:40;width:min(280px,86vw);transform:translateX(-102%);transition:transform 200ms cubic-bezier(.2,0,0,1);height:100%}
  #bpx#bpx#bpx#bpx .hl-drawer .bpx-side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35) !important}
  #bpx#bpx#bpx#bpx .hl-drawer .hl-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(16,24,40,.5);animation:hlFade 150ms ease-out both}
  #bpx#bpx#bpx#bpx .hl-collapse{display:none !important}
  #bpx#bpx#bpx#bpx .hl-burger{display:grid}
  #bpx#bpx#bpx#bpx .hl-top{padding:0 10px 0 12px;gap:6px}
  #bpx#bpx#bpx#bpx .hl-tacts{gap:6px}
  #bpx#bpx#bpx#bpx .hl-rb.g{display:none}
  #bpx#bpx#bpx#bpx .hl-tabs{padding:0 6px}
  #bpx#bpx#bpx#bpx #bpxViewArea{padding:12px 12px 32px}
  #bpx#bpx#bpx#bpx .hl-tcount{margin-left:0}
  #bpx#bpx#bpx#bpx .hl-tsearch{width:100%}
  #bpx#bpx#bpx#bpx .hl-notes{width:auto}
}
@media (max-width:380px){ #bpx#bpx#bpx#bpx .hl-rb.p{display:none} }
#bpx#bpx#bpx#bpx tr:has(> td > .hl-pgfoot:empty){display:none}
#bpx#bpx#bpx#bpx td > .hl-pgfoot{padding-top:0}
#bpx#bpx#bpx#bpx .hl-tbar-list{margin:0 0 8px}
#bpx#bpx#bpx#bpx .hl-mi > .hl-sw{flex:0 0 28px}
/* the assistant, docked under the top bar and themed with the app */
#bpx#bpx#bpx#bpx .oaw-panel{background:var(--card);border:1px solid var(--line);box-shadow:0 12px 24px -6px rgba(16,24,40,.18);color:var(--ink);font-family:var(--sans) !important}
#bpx#bpx#bpx#bpx .oaw-head{background:var(--soft);color:var(--ink);border-bottom:1px solid var(--line);font-size:14px}
#bpx#bpx#bpx#bpx .oaw-head span{color:var(--mu)}
#bpx#bpx#bpx#bpx .oaw-m.b{background:var(--soft);border-color:var(--line);color:var(--ink)}
#bpx#bpx#bpx#bpx .oaw-m.u{background:var(--blue)}
#bpx#bpx#bpx#bpx .oaw-in{border-top-color:var(--line)}
#bpx#bpx#bpx#bpx .oaw-in input{background:var(--bg) !important;border-color:var(--line) !important;color:var(--ink) !important}
#bpx#bpx#bpx#bpx .oaw-in button{background:var(--blue);border-radius:6px}
#bpx#bpx#bpx#bpx .hl-oaw-x{margin-left:auto;width:26px;height:26px;min-height:0 !important;padding:0 !important;border:0 !important;border-radius:6px !important;background:transparent !important;color:var(--mu) !important;font-size:18px;line-height:1;cursor:pointer;box-shadow:none !important}
#bpx#bpx#bpx#bpx .hl-oaw-x:hover{background:var(--bg-2) !important;color:var(--ink) !important}
@media (max-width:820px){
  #bpx#bpx#bpx#bpx .bpx-side .hl-collapse{display:none !important}
  #bpx#bpx#bpx#bpx .db-acts{width:100%}
  #bpx#bpx#bpx#bpx .db-acts .db-per{width:100%;display:flex;margin:0 !important}
  #bpx#bpx#bpx#bpx .db-acts .db-per button{flex:1}
  #bpx#bpx#bpx#bpx .oaw-panel{left:12px !important;right:12px !important;width:auto !important}
}
/* compact stat cards: title, figure, a note, an optional small chart */
#bpx#bpx#bpx#bpx .hl-mini{display:flex;flex-direction:column;min-height:128px;cursor:pointer;overflow:hidden}
#bpx#bpx#bpx#bpx .hl-mv{margin-top:8px;font:600 26px/1.15 var(--sans) !important;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx#bpx#bpx#bpx .hl-mv small{font-size:14px;font-weight:500;color:var(--mu);margin-left:2px}
#bpx#bpx#bpx#bpx .hl-mv.warn{color:var(--warn-t,#b45309)} #bpx#bpx#bpx#bpx .hl-mv.neg{color:var(--err-t)}
#bpx#bpx#bpx#bpx .hl-ms{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:12px;color:var(--mu)}
#bpx#bpx#bpx#bpx .hl-mini .bpc-sparkwrap{margin:auto -14px -14px;padding-top:8px}
#bpx#bpx#bpx#bpx .hl-mini .bpc-spark{height:40px}
#bpx#bpx#bpx#bpx .hl-mini .bpc{margin-top:10px}
#bpx#bpx#bpx#bpx .hl-mini .bpc-row{font-size:12px}
#bpx#bpx#bpx#bpx .hl-gauge .bpc-gauge{gap:12px;flex-wrap:nowrap}
#bpx#bpx#bpx#bpx .hl-gauge .bpc-gsvg{width:150px !important}
#bpx#bpx#bpx#bpx .hl-gauge .bpc-gside{min-width:0}
#bpx#bpx#bpx#bpx .hl-gauge .bpc-gnum{font-size:15px}
#bpx#bpx#bpx#bpx .hl-gauge .bpc-gnote{font-size:12px;color:var(--mu)}