/* Beam platform UI components (Beam Design System 2.0 look) used for product screens on the site.
   1u = 1 platform pixel. Catalogue: docs/components.md. */
/* Shared with platform-library.html. Edit there and copy across. */
/* ============ Beam platform components · v0.2 ============
   Tokens: Beam Design System 2.0 (Primitive + Semantic collections).
   Layout and components: Manage™ - Desktop in Figma, checked against live platform screenshots.
   calc(var(--u)*1) = 1 platform pixel. Put a .bp inside .bp-fit to scale a whole scene to its container. */
.bp{
  --u:1px;
  /* Primitive colour */
  --bp-neutral-0:#FFFFFF; --bp-neutral-50:#FAFBFD; --bp-neutral-75:#F9FAFC; --bp-neutral-100:#F5F7FB; --bp-neutral-200:#EDEFF4;
  --bp-neutral-300:#E6E8F0; --bp-neutral-400:#D8DAE5; --bp-neutral-500:#C1C4D6; --bp-neutral-600:#8F95B2; --bp-neutral-700:#696F8C;
  --bp-neutral-800:#474D66; --bp-neutral-900:#1B203A; --bp-neutral-950:#161A30;
  --bp-blue-50:#F3F6FF; --bp-blue-100:#E6EDFF; --bp-blue-200:#D6E0FF; --bp-blue-300:#9DB5FF; --bp-blue-400:#1371FE; --bp-blue-500:#2952CC; --bp-blue-600:#1F3D99;
  --bp-green-50:#F5FBF8; --bp-green-100:#EEF8F4; --bp-green-200:#DCF2EA; --bp-green-300:#A3E6CD; --bp-green-400:#52BD94; --bp-green-500:#429777; --bp-green-600:#317159;
  --bp-yellow-50:#FFF6EB; --bp-yellow-100:#FFEFD2; --bp-yellow-200:#FFDFA6; --bp-yellow-300:#FFC979; --bp-yellow-400:#FF9900; --bp-yellow-500:#C07300; --bp-yellow-600:#824701;
  --bp-red-50:#FAEEEE; --bp-red-100:#F9DADA; --bp-red-200:#F4B6B6; --bp-red-300:#EE9191; --bp-red-400:#D14343; --bp-red-500:#A73636; --bp-red-600:#7D2828;
  --bp-violet-50:#F8F7FD; --bp-violet-100:#E7E4F9; --bp-violet-200:#D0CAF4; --bp-violet-300:#B8AFEE; --bp-violet-400:#897AE3; --bp-violet-500:#6E62B6; --bp-violet-600:#524988;
  --bp-teal-100:#D3F5F7; --bp-teal-400:#25CBD6; --bp-teal-500:#10899E; --bp-teal-600:#0F5156;
  --bp-pink-100:#FBDDF3; --bp-pink-400:#ED55C2; --bp-pink-600:#8E3374;
  --bp-orange-100:#F8E3DA; --bp-orange-400:#DE7548; --bp-orange-500:#B25E3A; --bp-orange-600:#85462B;
  /* Semantic colour */
  --bp-brand-manage:var(--bp-blue-400); --bp-brand-insights:var(--bp-yellow-400); --bp-brand-integrate:var(--bp-violet-400);
  --bp-bg-canvas:var(--bp-neutral-50); --bp-bg-muted:var(--bp-neutral-100); --bp-bg-strong:var(--bp-neutral-200);
  --bp-surface:var(--bp-neutral-0); --bp-surface-selected:var(--bp-blue-50);
  --bp-text-heading:var(--bp-neutral-900); --bp-text:var(--bp-neutral-800); --bp-text-subtle:var(--bp-neutral-600); --bp-text-muted:var(--bp-neutral-700);
  --bp-link:var(--bp-blue-400); --bp-icon:var(--bp-neutral-600); --bp-icon-muted:var(--bp-neutral-500);
  --bp-border:var(--bp-neutral-400); --bp-border-subtle:var(--bp-neutral-300);
  --bp-action:var(--bp-blue-400);
  --bp-positive:var(--bp-green-400); --bp-warning:var(--bp-yellow-400); --bp-negative:var(--bp-red-400); --bp-info:var(--bp-blue-400);
  --bp-headbar:linear-gradient(90deg,#1371FE 0%,#00F0FF 100%);
  /* Radius: sm 4, md 6, lg 8 */
  font-family:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:calc(var(--u)*14); line-height:calc(var(--u)*22); font-weight:400; color:var(--bp-text);
  -webkit-font-smoothing:antialiased; text-align:left; letter-spacing:0;
}
.bp-fit{container-type:inline-size; width:100%; overflow:hidden}
.bp-fit>.bp{--u:max(calc(100cqi / var(--bp-w,1366)), var(--bp-min-u,.7px))}
.bp *,.bp *::before,.bp *::after{box-sizing:border-box}
.bp :where(p,figure){margin:0}
.bp :where(b){font-weight:500}
.bp :where(i,em,small,time){font-style:normal}
.bp :where(a){color:inherit; text-decoration:none}
.bp-i{width:calc(var(--u)*16); height:calc(var(--u)*16); flex:none; display:block; color:var(--bp-icon)}
.bp-i.-s10{width:calc(var(--u)*10); height:calc(var(--u)*10)} .bp-i.-s12{width:calc(var(--u)*12); height:calc(var(--u)*12)} .bp-i.-s14{width:calc(var(--u)*14); height:calc(var(--u)*14)} .bp-i.-s20{width:calc(var(--u)*20); height:calc(var(--u)*20)} .bp-i.-s24{width:calc(var(--u)*24); height:calc(var(--u)*24)}
.bp-i.-pos{color:var(--bp-positive)} .bp-i.-warn{color:var(--bp-warning)} .bp-i.-neg{color:var(--bp-negative)} .bp-i.-blue{color:var(--bp-blue-400)}
.bp-i.-dark{color:var(--bp-neutral-950)} .bp-i.-muted{color:var(--bp-icon-muted)} .bp-i.-white{color:#fff}
.bp-empty{font-style:italic; color:var(--bp-neutral-500)}

/* ---------- App frame ---------- */
.bp-app{width:calc(var(--bp-w,1366) * var(--u)); background:var(--bp-surface); overflow:hidden; position:relative}
.bp-headbar{height:calc(var(--u)*6); background:var(--bp-headbar)}
.bp-shell{display:flex}
.bp-rail{width:calc(var(--u)*56); flex:none; background:var(--bp-bg-muted)}
.bp-main{flex:1; min-width:0; padding:calc(var(--u)*36) calc(var(--u)*40) calc(var(--u)*24)}

/* ---------- Page header ---------- */
.bp-pagehead{display:flex; gap:calc(var(--u)*16); align-items:flex-start}
.bp-title{flex:1; min-width:0; height:calc(var(--u)*42); display:flex; align-items:center; gap:calc(var(--u)*8);
  font-size:calc(var(--u)*24); line-height:calc(var(--u)*32); font-weight:600; color:var(--bp-neutral-950); white-space:nowrap}
.bp-beta{font-size:calc(var(--u)*9); line-height:calc(var(--u)*16); font-weight:600; letter-spacing:.04em; color:#fff; padding:0 calc(var(--u)*7); border-radius:calc(var(--u)*8); margin-left:calc(var(--u)*2);
  background:linear-gradient(90deg,#5AA9E8,#2F4EA3)}
.bp-btn-primary{display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--u)*8); height:calc(var(--u)*42); min-width:calc(var(--u)*42);
  padding:calc(var(--u)*10) calc(var(--u)*16); border-radius:calc(var(--u)*6); background:var(--bp-action); color:#fff; font-size:calc(var(--u)*14); line-height:calc(var(--u)*22); font-weight:500; white-space:nowrap}
.bp-btn-primary .bp-i{color:#fff}

/* ---------- View tabs ---------- */
.bp-tabs{display:flex; align-items:flex-start; gap:calc(var(--u)*24); margin-top:calc(var(--u)*24); border-bottom:1px solid var(--bp-border-subtle)}
.bp-tab{display:flex; flex-direction:column; gap:calc(var(--u)*4); color:var(--bp-text-muted); white-space:nowrap; margin-bottom:-1px}
.bp-tab>span{display:flex; align-items:center; gap:calc(var(--u)*10); padding:0 calc(var(--u)*4)}
.bp-tab::after{content:""; height:calc(var(--u)*2); border-radius:calc(var(--u)*1); background:var(--bp-action); opacity:0}
.bp-tab.-on{color:var(--bp-text-heading); font-weight:500}
.bp-tab.-on::after{opacity:1}
.bp-tab.-add>span{gap:calc(var(--u)*6)}
.bp-tab.-all{color:var(--bp-text-heading); font-weight:500}
.bp-tab.-all>span{gap:calc(var(--u)*8)}
.bp-tab .bp-i.-share{margin-left:calc(var(--u)*-4)}
.bp-tab .bp-dot{width:calc(var(--u)*6); height:calc(var(--u)*6); border-radius:50%; background:var(--bp-warning); margin:0 calc(var(--u)*1) 0 calc(var(--u)*-2)}
.bp-tabs .bp-sep{width:1px; height:calc(var(--u)*22); background:var(--bp-border); margin:0 calc(var(--u)*-4)}
.bp-count{display:inline-flex; align-items:center; justify-content:center; min-width:calc(var(--u)*20); height:calc(var(--u)*20); padding:0 calc(var(--u)*6); border-radius:calc(var(--u)*4);
  background:var(--bp-bg-strong); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:var(--bp-text)}

/* ---------- Toolbar ---------- */
.bp-toolbar{display:flex; align-items:center; justify-content:space-between; margin-top:calc(var(--u)*16); height:calc(var(--u)*32)}
.bp-toolbar>div{display:flex; align-items:center; gap:calc(var(--u)*4)}
.bp-btn{display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--u)*6); height:calc(var(--u)*32); min-width:calc(var(--u)*32); padding:0 calc(var(--u)*10);
  background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:calc(var(--u)*4);
  font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:var(--bp-text); white-space:nowrap}
.bp-btn.-icon{padding:0; width:calc(var(--u)*32)}
.bp-notice{display:inline-flex; align-items:center; gap:calc(var(--u)*16); height:calc(var(--u)*32); padding:calc(var(--u)*4) calc(var(--u)*10); border-radius:calc(var(--u)*6); background:var(--bp-bg-muted);
  font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:var(--bp-text-heading); white-space:nowrap}
.bp-notice>span{display:inline-flex; align-items:center; gap:calc(var(--u)*6)}
.bp-notice .bp-i{color:var(--bp-warning)}
.bp-notice b{font-weight:500; color:var(--bp-link)}

/* ---------- Table: pagination, header, rows ---------- */
.bp-table{margin-top:calc(var(--u)*16)}
.bp-pagination{display:flex; align-items:center; justify-content:space-between; height:calc(var(--u)*40); padding:calc(var(--u)*8) 0; border-bottom:1px solid var(--bp-border-subtle);
  font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-subtle); white-space:nowrap}
.bp-pagination>div{display:flex; align-items:center; gap:calc(var(--u)*8); height:calc(var(--u)*24)}
.bp-pagination .bp-vsep{width:1px; height:calc(var(--u)*20); background:var(--bp-border-subtle)}
.bp-input{display:inline-flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*8); height:calc(var(--u)*24); width:calc(var(--u)*58); padding:0 calc(var(--u)*4) 0 calc(var(--u)*8);
  border:1px solid var(--bp-border); border-radius:calc(var(--u)*8); background:var(--bp-surface); color:var(--bp-text-muted)}
.bp-input.-page{width:calc(var(--u)*24); padding:0; justify-content:center; color:var(--bp-text)}
.bp-input.-wide{width:auto; min-width:calc(var(--u)*72)}
.bp-thead,.bp-row{display:flex; align-items:center}
.bp-thead{height:calc(var(--u)*32); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-subtle); white-space:nowrap; position:relative}
.bp-thead>.bp-i{position:absolute; right:calc(var(--u)*8); top:calc(var(--u)*8)}
.bp-thead .bp-cells{padding-right:calc(var(--u)*32)}
.bp-check{width:calc(var(--u)*24); flex:none; display:flex; align-items:center}
.bp-check::before{content:""; width:calc(var(--u)*16); height:calc(var(--u)*16); border:1px solid var(--bp-border); border-radius:calc(var(--u)*4); background:var(--bp-surface)}
.bp-cells{flex:1; min-width:0; display:grid; grid-template-columns:var(--bp-cols); column-gap:calc(var(--u)*16); align-items:center}
.bp-cells>*{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.bp-thead .bp-cells{padding-left:var(--bp-head-inset,calc(var(--u)*0))}
.bp-row{height:calc(var(--u)*48); margin-top:calc(var(--u)*12)}
.bp-thead+.bp-row{margin-top:0}
.bp-row .bp-cells{background:var(--bp-bg-muted); border-radius:calc(var(--u)*8); padding:calc(var(--u)*8) calc(var(--u)*12); height:100%; position:relative}
.bp-row.-has-more .bp-cells{padding-right:calc(var(--u)*48)}
.bp-row.-fade .bp-cells::after{content:""; position:absolute; right:0; top:0; bottom:0; width:calc(var(--u)*66); border-radius:0 calc(var(--u)*8) calc(var(--u)*8) 0;
  background:linear-gradient(270deg,var(--bp-neutral-100) 66%,rgba(245,247,251,0))}
.bp-more{position:absolute; right:calc(var(--u)*12); top:50%; transform:translateY(-50%); z-index:1; padding:calc(var(--u)*8); border-radius:calc(var(--u)*6)}
.bp-num{color:var(--bp-text-subtle)}
.bp-name{display:flex; align-items:center; gap:calc(var(--u)*6)}
.bp-name>p{overflow:hidden; text-overflow:ellipsis}
.bp-pic{width:calc(var(--u)*28); height:calc(var(--u)*28); flex:none; border:1px solid var(--bp-border); border-radius:calc(var(--u)*4); background:var(--bp-surface);
  display:grid; place-items:center}
.bp-pic .bp-i{color:var(--bp-neutral-800)}
.bp-user{display:flex; align-items:center; gap:calc(var(--u)*8)}
.bp-user.-inset{padding:0 calc(var(--u)*10); gap:calc(var(--u)*6)}
.bp-avatar{width:calc(var(--u)*24); height:calc(var(--u)*24); flex:none; border-radius:50%; border:1px solid var(--bp-border); background:var(--bp-blue-100);
  font-size:calc(var(--u)*10); line-height:calc(var(--u)*22); font-weight:600; text-align:center; color:var(--bp-blue-600)}
.bp-avatar.-sm{width:calc(var(--u)*16); height:calc(var(--u)*16); font-size:calc(var(--u)*7); line-height:calc(var(--u)*14)}
.bp-avatar.-v{background:var(--bp-violet-100); color:var(--bp-violet-600)}
.bp-avatar.-g{background:var(--bp-green-100); color:var(--bp-green-600)}
.bp-avatar.-y{background:var(--bp-yellow-100); color:var(--bp-yellow-600)}
.bp-avatar.-n{background:var(--bp-neutral-200); color:var(--bp-neutral-800); border-color:transparent}
.bp-tags{display:flex; gap:calc(var(--u)*8); position:relative}
.bp-tags.-fade::after{content:""; position:absolute; right:0; top:0; bottom:0; width:calc(var(--u)*47); background:linear-gradient(270deg,var(--bp-neutral-100) 23%,rgba(245,247,251,0))}
.bp-tag{display:inline-flex; align-items:center; padding:calc(var(--u)*5) calc(var(--u)*12); border-radius:calc(var(--u)*15); font-weight:500; white-space:nowrap;
  background:var(--bp-neutral-200); color:var(--bp-neutral-800)}
.bp-tag.-blue{background:var(--bp-blue-100); color:var(--bp-blue-600)}
.bp-tag.-violet{background:var(--bp-violet-100); color:var(--bp-violet-600)}
.bp-tag.-yellow{background:var(--bp-yellow-100); color:var(--bp-yellow-600)}
.bp-status{display:flex; align-items:center; gap:calc(var(--u)*8); font-weight:500}
.bp-status::before{content:""; width:calc(var(--u)*8); height:calc(var(--u)*8); margin:0 calc(var(--u)*3); border-radius:50%; background:var(--bp-positive); flex:none; box-shadow:0 0 0 calc(var(--u)*3) var(--bp-green-200)}
.bp-status.-warn::before{background:var(--bp-warning); box-shadow:0 0 0 calc(var(--u)*3) var(--bp-yellow-200)}
.bp-status.-off::before{background:var(--bp-neutral-600); box-shadow:0 0 0 calc(var(--u)*3) var(--bp-neutral-300)}
.bp-status.-plain::before{box-shadow:none}
.bp-scroll{height:calc(var(--u)*8); width:calc(var(--u)*353); border-radius:calc(var(--u)*4); background:var(--bp-neutral-400); margin-top:calc(var(--u)*16)}

/* Cell chips */
.bp-flag{display:flex; align-items:center; gap:calc(var(--u)*8)}
.bp-co{display:inline-flex; align-items:center; height:calc(var(--u)*32); padding:0 calc(var(--u)*8); border:1px solid var(--bp-border); border-radius:calc(var(--u)*4); background:var(--bp-surface); max-width:100%}
.bp-co>span{display:inline-flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*22); padding:0 calc(var(--u)*6) 0 calc(var(--u)*4); border-radius:calc(var(--u)*4); background:var(--bp-bg-muted);
  font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bp-logo{width:calc(var(--u)*14); height:calc(var(--u)*14); flex:none; border-radius:calc(var(--u)*3); background:var(--bp-blue-500); border:1px solid var(--bp-surface); box-shadow:0 0 0 1px var(--bp-border)}
.bp-logo.-b{background:var(--bp-teal-500)} .bp-logo.-c{background:var(--bp-violet-500)} .bp-logo.-d{background:var(--bp-orange-400)}
.bp-countchip{display:inline-flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*28); padding:0 calc(var(--u)*8); border-radius:calc(var(--u)*4); background:var(--bp-neutral-300); color:var(--bp-text); width:fit-content}
.bp-res{display:inline-flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*24); padding:0 calc(var(--u)*8); border-radius:calc(var(--u)*12); font-weight:500; width:fit-content;
  background:var(--bp-yellow-100); color:var(--bp-yellow-600); box-shadow:inset 0 0 0 1px var(--bp-yellow-200)}
.bp-res::before{content:""; width:calc(var(--u)*8); height:calc(var(--u)*8); border-radius:calc(var(--u)*2); background:currentColor}
.bp-res.-out{background:var(--bp-blue-100); color:var(--bp-blue-600); box-shadow:inset 0 0 0 1px var(--bp-blue-200)}
.bp-res.-out::before{border-radius:50%}
.bp-res.-plain{background:none; box-shadow:none; color:var(--bp-green-600); padding:0}
.bp-res.-plain::before{display:none}
.bp-late{display:inline-flex; align-items:center; gap:calc(var(--u)*4); height:calc(var(--u)*22); padding:0 calc(var(--u)*6); border-radius:calc(var(--u)*4); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); width:fit-content;
  background:var(--bp-red-50); color:var(--bp-red-600); box-shadow:inset 0 0 0 1px var(--bp-red-200)}
.bp-late.-ok{background:var(--bp-green-50); color:var(--bp-green-600); box-shadow:inset 0 0 0 1px var(--bp-green-200)}
.bp-late.-wait{background:var(--bp-yellow-50); color:var(--bp-yellow-600); box-shadow:inset 0 0 0 1px var(--bp-yellow-200)}

/* Outline pills (contract status, renewal status) and category tags */
.bp-pill{display:inline-flex; align-items:center; height:calc(var(--u)*32); padding:0 calc(var(--u)*9); border-radius:calc(var(--u)*16); border:1px solid var(--bp-positive); width:fit-content; max-width:100%;
  background:var(--bp-green-50); color:var(--bp-positive); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bp-pill.-warn{border-color:var(--bp-warning); background:var(--bp-yellow-50); color:var(--bp-warning)}
.bp-pill.-neg{border-color:var(--bp-negative); background:var(--bp-red-50); color:var(--bp-negative)}
.bp-pill.-info{border-color:var(--bp-info); background:var(--bp-blue-50); color:var(--bp-info)}
.bp-pill.-sm{height:calc(var(--u)*24); padding:0 calc(var(--u)*8); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; letter-spacing:.02em; text-transform:uppercase}
.bp-pill.-solid{height:calc(var(--u)*24); padding:0 calc(var(--u)*7); border:0; background:var(--bp-action); color:#fff; font-size:calc(var(--u)*11); line-height:calc(var(--u)*16); font-weight:500}
.bp-cat{display:inline-block; height:calc(var(--u)*32); line-height:calc(var(--u)*32); padding:0 calc(var(--u)*8); border-radius:calc(var(--u)*4); width:calc(var(--u)*120); max-width:100%; color:#fff; background:var(--bp-violet-600);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bp-cat.-teal{background:var(--bp-teal-500)} .bp-cat.-blue{background:var(--bp-blue-500)} .bp-cat.-green{background:var(--bp-green-600)}
.bp-cat.-orange{background:var(--bp-orange-500)} .bp-cat.-grey{background:var(--bp-neutral-700)} .bp-cat.-pink{background:var(--bp-pink-600)}
.bp-cat.-soft{height:calc(var(--u)*24); line-height:calc(var(--u)*24); width:auto; background:var(--bp-neutral-500); color:var(--bp-neutral-950); font-size:calc(var(--u)*13)}

/* Grouped rows (contracts grouped by status) */
.bp-group{display:flex; align-items:center; height:calc(var(--u)*57); border-bottom:1px solid var(--bp-border-subtle); padding-left:calc(var(--u)*8)}
.bp-group .bp-cells{column-gap:calc(var(--u)*16)}
.bp-group .bp-ghead{display:flex; align-items:center; gap:calc(var(--u)*10); overflow:visible}
.bp-group .bp-amt{color:var(--bp-text)}
.bp-grow{display:flex; align-items:center; height:calc(var(--u)*40); border-bottom:1px solid var(--bp-border-subtle); padding-left:calc(var(--u)*8)}
.bp-grow .bp-pill{height:calc(var(--u)*30)}
.bp-grow .bp-cat{height:calc(var(--u)*28); line-height:calc(var(--u)*28)}
.bp-grow .bp-co{height:calc(var(--u)*28)}

/* ---------- Cards, panels, drawer ---------- */
.bp-card{background:var(--bp-surface); border:1px solid var(--bp-border-subtle); border-radius:calc(var(--u)*8); padding:calc(var(--u)*16)}
.bp-cardhead{display:flex; align-items:center; gap:calc(var(--u)*6); font-size:calc(var(--u)*14); line-height:calc(var(--u)*22); color:var(--bp-text-muted); white-space:nowrap}
.bp-cardhead b{font-weight:600; color:var(--bp-text-heading)}
.bp-cardhead i{font-style:normal; color:var(--bp-neutral-500)}
.bp-cardhead .bp-right{margin-left:auto; font-size:calc(var(--u)*12); color:var(--bp-text-muted)}
.bp-kpis{display:grid; grid-template-columns:repeat(4,1fr); margin-top:calc(var(--u)*12)}
.bp-kpi{padding:0 calc(var(--u)*16); border-left:1px solid var(--bp-border-subtle)}
.bp-kpi:first-child{padding-left:0; border-left:0}
.bp-kpi>p:first-child{display:flex; align-items:center; gap:calc(var(--u)*8); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:var(--bp-text-heading)}
.bp-dotc{width:calc(var(--u)*8); height:calc(var(--u)*8); border-radius:50%; flex:none; background:var(--bp-positive)}
.bp-dotc.-o{background:var(--bp-orange-400)} .bp-dotc.-r{background:var(--bp-negative)} .bp-dotc.-n{background:var(--bp-neutral-500)}
.bp-dotc.-b{background:var(--bp-blue-400)} .bp-dotc.-lb{background:var(--bp-blue-300)} .bp-dotc.-y{background:var(--bp-warning)}
.bp-kpi>p:last-child{display:flex; align-items:baseline; gap:calc(var(--u)*8); margin-top:calc(var(--u)*6); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-muted); white-space:nowrap}
.bp-kpi>p:last-child b{font-size:calc(var(--u)*32); line-height:calc(var(--u)*40); font-weight:600; color:var(--bp-text-heading)}
.bp-big{display:flex; align-items:baseline; gap:calc(var(--u)*10); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-muted); white-space:nowrap}
.bp-big b{font-size:calc(var(--u)*32); line-height:calc(var(--u)*40); font-weight:600; color:var(--bp-text-heading)}
.bp-big em{font-style:normal; font-size:calc(var(--u)*14); font-weight:500; color:var(--bp-negative)}
.bp-mini{border:1px solid var(--bp-border-subtle); border-radius:calc(var(--u)*6); padding:calc(var(--u)*12); min-width:0}
.bp-mini.-on{background:var(--bp-bg-muted)}
.bp-mini>p:first-child{font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:var(--bp-text-heading)}
.bp-mini .bp-val{display:flex; align-items:baseline; gap:calc(var(--u)*6); margin-top:calc(var(--u)*4); font-size:calc(var(--u)*12); color:var(--bp-text-muted); white-space:nowrap}
.bp-mini .bp-val b{font-size:calc(var(--u)*20); line-height:calc(var(--u)*24); font-weight:600; color:var(--bp-positive)}
.bp-mini .bp-val b.-o{color:var(--bp-yellow-500)}
.bp-mini .bp-val b.-h{color:var(--bp-text-heading)}
.bp-bar{display:flex; gap:calc(var(--u)*2); height:calc(var(--u)*6); margin:calc(var(--u)*8) 0}
.bp-bar>i{display:block; height:100%; border-radius:calc(var(--u)*3); background:var(--bp-positive)}
.bp-bar>i.-b{background:var(--bp-blue-400)} .bp-bar>i.-lb{background:var(--bp-blue-300)} .bp-bar.-lg{height:calc(var(--u)*8)} .bp-bar.-lg>i{border-radius:calc(var(--u)*4)}
.bp-kv{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*8); font-size:calc(var(--u)*12); line-height:calc(var(--u)*22); color:var(--bp-text-muted)}
.bp-kv>span{display:flex; align-items:center; gap:calc(var(--u)*8); min-width:0; white-space:nowrap}
.bp-kv b{font-weight:600; color:var(--bp-text-heading)}
.bp-mini .bp-kv>span:first-child{display:block; flex:1; overflow:hidden; text-overflow:ellipsis}
.bp-mini .bp-kv .bp-dotc{display:inline-block; margin-right:calc(var(--u)*8); vertical-align:calc(var(--u)*1)}

/* Column chart (Spend over time) */
.bp-chart{position:relative; height:calc(var(--u)*230); margin-top:calc(var(--u)*28); padding-left:calc(var(--u)*44)}
.bp-chart .bp-grid{position:absolute; left:calc(var(--u)*44); right:0; top:0; bottom:calc(var(--u)*24); border-left:1px solid var(--bp-border-subtle); border-bottom:1px solid var(--bp-border);
  background-image:linear-gradient(to bottom,var(--bp-border-subtle) 1px,transparent 1px); background-size:100% 20%}
.bp-chart .bp-yax{position:absolute; left:0; top:0; bottom:calc(var(--u)*24); width:calc(var(--u)*38); display:flex; flex-direction:column; justify-content:space-between; text-align:right;
  font-size:calc(var(--u)*10); line-height:calc(var(--u)*10); color:var(--bp-text-muted); margin:calc(var(--u)*-5) 0}
.bp-chart .bp-cols{position:absolute; left:calc(var(--u)*44); right:0; top:0; bottom:0; display:flex}
.bp-chart .bp-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; border-right:1px solid var(--bp-border-subtle)}
.bp-chart .bp-col:last-child{border-right:0}
.bp-chart .bp-col.-now{border-left:calc(var(--u)*2) solid var(--bp-neutral-700)}
.bp-chart .bp-stack{width:calc(var(--u)*22); display:flex; flex-direction:column}
.bp-chart .bp-stack>i{display:block; background:var(--bp-positive)}
.bp-chart .bp-stack>i:first-child{border-radius:calc(var(--u)*4) calc(var(--u)*4) 0 0}
.bp-chart .bp-stack>i.-b{background:var(--bp-blue-400)} .bp-chart .bp-stack>i.-lb{background:var(--bp-blue-300)}
.bp-chart .bp-lab{font-size:calc(var(--u)*10); line-height:calc(var(--u)*14); font-weight:600; color:var(--bp-text-heading); margin-bottom:calc(var(--u)*2); white-space:nowrap}
.bp-chart .bp-x{height:calc(var(--u)*24); padding-top:calc(var(--u)*6); font-size:calc(var(--u)*10); line-height:calc(var(--u)*14); color:var(--bp-text-muted); white-space:nowrap}
.bp-legend{display:flex; gap:calc(var(--u)*14); margin-top:calc(var(--u)*10); padding-left:calc(var(--u)*44); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-muted)}
.bp-legend>span{display:flex; align-items:center; gap:calc(var(--u)*6)}
.bp-legend i{width:calc(var(--u)*10); height:calc(var(--u)*10); border-radius:calc(var(--u)*3); background:var(--bp-positive)}
.bp-legend i.-b{background:var(--bp-blue-400)} .bp-legend i.-lb{background:var(--bp-blue-300)}

/* Dashboard: summary figures and forecast charts (Dashboard, Asset Forecast tab) */
.bp-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(var(--u)*12); margin-top:calc(var(--u)*12)}
.bp-stats.-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bp-statc{border:1px solid var(--bp-border-subtle); border-radius:calc(var(--u)*8); padding:calc(var(--u)*16) calc(var(--u)*6) calc(var(--u)*18); text-align:center; min-width:0}
.bp-statc>span{display:block; font-size:calc(var(--u)*10); line-height:calc(var(--u)*16); font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--bp-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bp-statc>b{display:block; margin:calc(var(--u)*6) 0 calc(var(--u)*4); font-size:calc(var(--u)*24); line-height:calc(var(--u)*32); font-weight:600; color:var(--bp-teal-500)}
.bp-statc>small{display:block; font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-muted)}
.bp-statc.-neg>b{color:var(--bp-negative)} .bp-statc.-blue>b{color:var(--bp-blue-500)} .bp-statc.-warn>b{color:var(--bp-yellow-500)}
.bp-ctitle{font-size:calc(var(--u)*16); line-height:calc(var(--u)*24); font-weight:600; color:var(--bp-text-heading)}
.bp-chart.-blocks{padding-left:calc(var(--u)*58); margin-top:calc(var(--u)*20)}
.bp-chart.-blocks .bp-yax{left:calc(var(--u)*14)}
.bp-chart.-blocks .bp-grid,.bp-chart.-blocks .bp-cols{left:calc(var(--u)*58)}
.bp-chart.-blocks .bp-grid{border-left:0; background-size:100% var(--bp-gl,20%)}
.bp-chart.-blocks .bp-col{border-right:0}
.bp-chart.-blocks .bp-stack{width:72%}
.bp-chart.-blocks .bp-stack>i:first-child{border-radius:0}
.bp-chart .bp-ylab{position:absolute; left:calc(var(--u)*6); top:calc(50% - calc(var(--u)*12)); transform:translate(-50%,-50%) rotate(-90deg); font-size:calc(var(--u)*10); line-height:calc(var(--u)*14); color:var(--bp-text-subtle)}
.bp-chart .bp-overlay{position:absolute; left:calc(var(--u)*58); right:0; top:0; bottom:calc(var(--u)*24); pointer-events:none}
.bp-chart .bp-overlay svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; max-width:none}
.bp-chart .bp-overlay polyline{fill:none; stroke:var(--bp-green-500); stroke-width:calc(var(--u)*2); vector-effect:non-scaling-stroke}
.bp-chart .bp-mark{position:absolute; width:calc(var(--u)*10); height:calc(var(--u)*10); margin:calc(var(--u)*-5) 0 0 calc(var(--u)*-5); border-radius:50%; background:#fff; border:calc(var(--u)*2) solid var(--bp-green-500)}
.bp-chart .bp-stack>i.-act,.bp-legend i.-act,.bp-chart .bp-stack>i.-a2,.bp-legend i.-a2{background:var(--bp-green-500)}
.bp-chart .bp-stack>i.-exp,.bp-legend i.-exp,.bp-chart .bp-stack>i.-a7,.bp-legend i.-a7{background:var(--bp-red-400)}
.bp-chart .bp-stack>i.-unk,.bp-legend i.-unk,.bp-chart .bp-stack>i.-a8,.bp-legend i.-a8{background:var(--bp-neutral-600)}
.bp-chart .bp-stack>i.-a1,.bp-legend i.-a1{background:var(--bp-green-600)}
.bp-chart .bp-stack>i.-a3,.bp-legend i.-a3{background:var(--bp-green-400)}
.bp-chart .bp-stack>i.-a4,.bp-legend i.-a4{background:var(--bp-yellow-300)}
.bp-chart .bp-stack>i.-a5,.bp-legend i.-a5{background:var(--bp-yellow-400)}
.bp-chart .bp-stack>i.-a6,.bp-legend i.-a6{background:var(--bp-orange-400)}
.bp-legend.-center{justify-content:center; flex-wrap:wrap; padding-left:0; gap:calc(var(--u)*6) calc(var(--u)*16)}
.bp-legend.-center i{border-radius:50%}

/* Donut (By status) */
.bp-donut{width:calc(var(--u)*132); height:calc(var(--u)*132); border-radius:50%; flex:none; position:relative}
.bp-donut::after{content:""; position:absolute; inset:calc(var(--u)*22); border-radius:50%; background:var(--bp-surface)}
.bp-donut>div{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:calc(var(--u)*10); line-height:calc(var(--u)*14); color:var(--bp-text-muted)}
.bp-donut>div b{font-size:calc(var(--u)*18); line-height:calc(var(--u)*24); font-weight:600; color:var(--bp-text-heading)}
.bp-seg{display:inline-flex; border:1px solid var(--bp-border); border-radius:calc(var(--u)*4); overflow:hidden; font-size:calc(var(--u)*11); line-height:calc(var(--u)*22); font-weight:500; margin-left:auto}
.bp-seg>span{padding:0 calc(var(--u)*8); color:var(--bp-text)} .bp-seg>span.-on{background:var(--bp-action); color:#fff}

/* Underline tabs with counts (History, drawer tabs) */
.bp-utabs{display:flex; gap:calc(var(--u)*28); border-bottom:calc(var(--u)*2) solid var(--bp-border-subtle)}
.bp-utabs>span{display:flex; align-items:center; gap:calc(var(--u)*8); padding:0 calc(var(--u)*4) calc(var(--u)*6); margin-bottom:calc(var(--u)*-2); border-bottom:calc(var(--u)*2) solid transparent; color:var(--bp-text-muted); white-space:nowrap}
.bp-utabs>span.-on{color:var(--bp-text-heading); font-weight:500; border-color:var(--bp-action)}

/* Drawer (contract detail) */
.bp-drawer{width:calc(var(--bp-w,774) * var(--u)); background:var(--bp-surface); padding:calc(var(--u)*24) calc(var(--u)*24) calc(var(--u)*28); box-shadow:calc(var(--u)*-12) 0 calc(var(--u)*40) rgba(22,26,48,.12)}
.bp-dhead{display:flex; align-items:center; gap:calc(var(--u)*8)}
.bp-dhead .bp-id{font-size:calc(var(--u)*12); color:var(--bp-neutral-500)}
.bp-dhead .bp-h{flex:1; min-width:0; font-size:calc(var(--u)*18); line-height:calc(var(--u)*24); font-weight:600; color:var(--bp-text-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bp-dhead .bp-i{margin-left:calc(var(--u)*14)}
.bp-dmeta{display:flex; align-items:center; gap:calc(var(--u)*10); margin:calc(var(--u)*20) 0 calc(var(--u)*14); color:var(--bp-text-heading); font-size:calc(var(--u)*15)}
.bp-dmeta>i{width:calc(var(--u)*2); height:calc(var(--u)*2); border-radius:50%; background:var(--bp-neutral-500)}
.bp-dmeta>span{display:flex; align-items:center; gap:calc(var(--u)*8)}
.bp-banner{display:flex; gap:calc(var(--u)*10); margin-top:calc(var(--u)*16); padding:calc(var(--u)*16); border-radius:calc(var(--u)*8); background:var(--bp-green-50); border:1px solid var(--bp-green-200); color:var(--bp-green-500)}
.bp-banner .bp-i{margin-top:calc(var(--u)*3); color:var(--bp-green-500)}
.bp-banner b{display:block; font-weight:600}
.bp-terms{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u)*16); margin-top:calc(var(--u)*16)}
.bp-term{border:1px solid var(--bp-border); border-radius:calc(var(--u)*8); padding:calc(var(--u)*16) calc(var(--u)*20) calc(var(--u)*20); background:var(--bp-surface)}
.bp-term.-next{background:var(--bp-blue-50); border-color:var(--bp-blue-100)}
.bp-term>p:first-child{display:flex; align-items:center; justify-content:space-between; height:calc(var(--u)*24)}
.bp-label{font-size:calc(var(--u)*10); line-height:calc(var(--u)*16); font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--bp-text-muted)}
.bp-term .bp-amt{display:flex; align-items:baseline; gap:calc(var(--u)*8); margin:calc(var(--u)*14) 0 calc(var(--u)*12); font-size:calc(var(--u)*12); color:var(--bp-text-subtle)}
.bp-term .bp-amt b{font-size:calc(var(--u)*24); line-height:calc(var(--u)*32); font-weight:600; color:var(--bp-text-heading)}
.bp-term .bp-range{display:flex; align-items:center; gap:calc(var(--u)*10); font-size:calc(var(--u)*13); line-height:calc(var(--u)*18); color:var(--bp-text)}
.bp-rule{height:1px; background:var(--bp-border); margin:calc(var(--u)*16) 0}
.bp-cost{display:flex; align-items:baseline; gap:calc(var(--u)*12); margin-top:calc(var(--u)*8); font-size:calc(var(--u)*13); color:var(--bp-text-subtle)}
.bp-cost b{font-size:calc(var(--u)*20); line-height:calc(var(--u)*24); font-weight:600; color:var(--bp-text-heading)}
.bp-leg4{display:grid; grid-template-columns:repeat(4,calc(var(--u)*140)); margin-top:calc(var(--u)*10)}
.bp-leg4>div{display:grid; grid-template-columns:calc(var(--u)*18) 1fr; align-items:center}
.bp-leg4 .bp-dotc{width:calc(var(--u)*10); height:calc(var(--u)*10)}
.bp-leg4 b{grid-column:2; font-size:calc(var(--u)*14); line-height:calc(var(--u)*20); font-weight:600; color:var(--bp-text-heading)}
.bp-leg4 small{grid-column:2; font-size:calc(var(--u)*11); line-height:calc(var(--u)*16); color:var(--bp-neutral-500)}
.bp-sechead{display:flex; align-items:center; justify-content:space-between; margin:calc(var(--u)*6) 0 calc(var(--u)*14)}
.bp-linkbtn{display:inline-flex; align-items:center; gap:calc(var(--u)*6); font-size:calc(var(--u)*13); font-weight:500; color:var(--bp-link)}
.bp-linkbtn .bp-i{color:var(--bp-link)}
.bp-trow{display:flex; align-items:center; gap:calc(var(--u)*12); height:calc(var(--u)*48); padding:0 calc(var(--u)*20); margin-top:calc(var(--u)*12); border-radius:calc(var(--u)*8); background:var(--bp-neutral-75); white-space:nowrap}
.bp-trow b{font-size:calc(var(--u)*13); font-weight:600; color:var(--bp-text-heading)}
.bp-trow .bp-cur{font-size:calc(var(--u)*11); line-height:calc(var(--u)*16); font-weight:500; padding:0 calc(var(--u)*4); border-radius:calc(var(--u)*4); background:var(--bp-blue-100); color:var(--bp-blue-600)}
.bp-trow .bp-dates{margin-left:auto; font-size:calc(var(--u)*13); color:var(--bp-text-subtle)}
.bp-trow .bp-amt{font-size:calc(var(--u)*14); font-weight:600; color:var(--bp-text-heading)}

/* ---------- Asset record ---------- */
.bp-record{display:flex; width:calc(var(--bp-w,1366) * var(--u)); background:var(--bp-bg-muted); position:relative; overflow:hidden}
.bp-side{width:calc(var(--u)*366); flex:none; background:var(--bp-surface); padding:calc(var(--u)*16) calc(var(--u)*16) calc(var(--u)*24); border-right:calc(var(--u)*8) solid var(--bp-border-subtle)}
.bp-back{display:flex; align-items:center; justify-content:space-between; height:calc(var(--u)*32); font-size:calc(var(--u)*13); font-weight:500; color:var(--bp-text-muted)}
.bp-back>span{display:flex; align-items:center; gap:calc(var(--u)*6)}
.bp-partof{display:flex; align-items:center; gap:calc(var(--u)*8); margin-top:calc(var(--u)*8); color:var(--bp-text-muted)}
.bp-partof>span{display:inline-flex; align-items:center; gap:calc(var(--u)*8); height:calc(var(--u)*32); padding:0 calc(var(--u)*8); border-radius:calc(var(--u)*4); background:var(--bp-bg-strong); color:var(--bp-text); text-decoration:underline; text-decoration-color:var(--bp-link); text-underline-offset:calc(var(--u)*3)}
.bp-codes{display:flex; gap:calc(var(--u)*6); margin-top:calc(var(--u)*12)}
.bp-codes>span{height:calc(var(--u)*24); padding:0 calc(var(--u)*8); border-radius:calc(var(--u)*4); background:var(--bp-bg-strong); font:italic 500 calc(var(--u)*12)/calc(var(--u)*24) "Roboto Mono","JetBrains Mono",ui-monospace,monospace; color:var(--bp-text)}
.bp-prod{display:flex; margin-top:calc(var(--u)*12); border:1px solid var(--bp-border); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted); overflow:hidden}
.bp-prod .bp-shot{width:calc(var(--u)*82); flex:none; background:var(--bp-surface); display:grid; place-items:center}
.bp-prod .bp-shot .bp-i{width:calc(var(--u)*36); height:calc(var(--u)*36); color:var(--bp-neutral-800)}
.bp-prod>div:last-child{padding:calc(var(--u)*12); min-width:0}
.bp-prod .bp-h{font-size:calc(var(--u)*16); line-height:calc(var(--u)*24); font-weight:600; color:var(--bp-text-heading)}
.bp-prod p{display:flex; align-items:center; gap:calc(var(--u)*8); margin-top:calc(var(--u)*4); color:var(--bp-text-muted)}
.bp-field{display:flex; align-items:center; justify-content:space-between; height:calc(var(--u)*42); padding:0 calc(var(--u)*16); margin-top:calc(var(--u)*16); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted);
  font-weight:500; color:var(--bp-text-heading)}
.bp-field>span{display:flex; align-items:center; gap:calc(var(--u)*10); color:var(--bp-text)}
.bp-field>span.-strong{color:var(--bp-text-heading)}
.bp-sidehead{display:flex; align-items:center; justify-content:space-between; margin-top:calc(var(--u)*16); padding-top:calc(var(--u)*16); border-top:1px solid var(--bp-border); font-weight:500; color:var(--bp-text)}
.bp-pin{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*12); margin-top:calc(var(--u)*14); white-space:nowrap}
.bp-pin>span{display:flex; align-items:center; gap:calc(var(--u)*8)}
.bp-pin a{color:var(--bp-link); text-decoration:underline}
.bp-pin .bp-avatar{margin-right:calc(var(--u)*-2)}
.bp-body{flex:1; min-width:0; padding:calc(var(--u)*20) calc(var(--u)*12) calc(var(--u)*20) calc(var(--u)*20)}
.bp-panel{background:var(--bp-surface); border:1px solid var(--bp-border-subtle); border-radius:calc(var(--u)*8); padding:calc(var(--u)*22) calc(var(--u)*24) calc(var(--u)*24)}
.bp-panel+.bp-panel{margin-top:calc(var(--u)*16)}
.bp-panel>.bp-h{display:flex; align-items:center; gap:calc(var(--u)*10); margin:0 0 calc(var(--u)*12); font-size:calc(var(--u)*16); line-height:calc(var(--u)*24); font-weight:600; color:var(--bp-text-heading)}
.bp-day{display:flex; align-items:center; justify-content:center; margin-top:calc(var(--u)*10); padding-bottom:calc(var(--u)*6); border-bottom:1px solid var(--bp-border-subtle); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-neutral-500)}
.bp-ev{margin-top:calc(var(--u)*14)}
.bp-ev>p{display:flex; align-items:baseline; gap:calc(var(--u)*6); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-muted)}
.bp-ev>p b{font-weight:500; color:var(--bp-text)}
.bp-ev>p time{margin-left:auto; font-size:calc(var(--u)*10); color:var(--bp-text-muted)}
.bp-change{display:flex; align-items:center; gap:calc(var(--u)*8); margin-top:calc(var(--u)*8); padding-left:calc(var(--u)*16); font-size:calc(var(--u)*13)}
.bp-change>span{display:inline-flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*28); padding:0 calc(var(--u)*8); border-radius:calc(var(--u)*4); background:var(--bp-bg-strong); color:var(--bp-text-heading); font-weight:500}
.bp-change>span.-old{background:var(--bp-neutral-300); color:var(--bp-text-subtle); text-decoration:line-through; font-weight:400}
.bp-change>span.-bare{background:none; padding:0}
.bp-change>span.-box{box-shadow:inset 0 0 0 1px var(--bp-border); background:var(--bp-surface)}
.bp-change>.bp-i{width:calc(var(--u)*10); height:calc(var(--u)*10)}
.bp-tix{display:flex; align-items:center; gap:calc(var(--u)*10); height:calc(var(--u)*46); padding:0 calc(var(--u)*20); margin-top:calc(var(--u)*16); border:1px solid var(--bp-border-subtle); border-radius:calc(var(--u)*4); color:var(--bp-text-heading); font-weight:500}
.bp-tix .bp-num{font-weight:400}
.bp-tix .bp-linkbtn{margin-left:auto}
.bp-comment{display:flex; align-items:center; justify-content:space-between; height:calc(var(--u)*48); padding:0 calc(var(--u)*16) 0 calc(var(--u)*12); margin-top:calc(var(--u)*12); border:1px solid var(--bp-border); border-radius:calc(var(--u)*4); color:var(--bp-text-muted)}
.bp-dock{position:absolute; left:calc(var(--u)*374); right:0; bottom:calc(var(--u)*10); display:flex; gap:calc(var(--u)*6); justify-content:center}
.bp-dock>span{display:inline-flex; align-items:center; gap:calc(var(--u)*7); height:calc(var(--u)*32); padding:0 calc(var(--u)*9); border-radius:calc(var(--u)*6); background:var(--bp-surface); box-shadow:0 calc(var(--u)*2) calc(var(--u)*10) rgba(22,26,48,.14);
  font-size:calc(var(--u)*13); font-weight:500; color:var(--bp-link); white-space:nowrap}
.bp-dock .bp-i{color:var(--bp-link)}
.bp-sched{display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--bp-border-subtle); border-left:1px solid var(--bp-border-subtle); width:calc(var(--u)*322); flex:none}
.bp-sched>span{height:calc(var(--u)*44); border-right:1px solid var(--bp-border-subtle); border-bottom:1px solid var(--bp-border-subtle); font-size:calc(var(--u)*9); line-height:calc(var(--u)*14); text-align:center; color:var(--bp-text-muted)}
.bp-sched>span.-h{height:calc(var(--u)*22); font-size:calc(var(--u)*9); line-height:calc(var(--u)*22); font-weight:500; letter-spacing:.04em; border-right-color:transparent}
.bp-sched>span b{font-weight:400}
.bp-sched>span.-dim{color:var(--bp-neutral-500)}
.bp-sched>span.-today b{display:inline-block; padding:0 calc(var(--u)*4); border-radius:calc(var(--u)*6); background:var(--bp-action); color:#fff; font-weight:500}

/* ---------- Combined-element pieces (used where no single platform screen exists) ---------- */
.bp-switch{width:calc(var(--u)*28); height:calc(var(--u)*16); border-radius:calc(var(--u)*8); background:var(--bp-neutral-400); position:relative; flex:none; display:inline-block}
.bp-switch::after{content:""; position:absolute; top:calc(var(--u)*2); left:calc(var(--u)*2); width:calc(var(--u)*12); height:calc(var(--u)*12); border-radius:50%; background:#fff; box-shadow:0 calc(var(--u)*1) calc(var(--u)*2) rgba(22,26,48,.2)}
.bp-switch.-on{background:var(--bp-action)}
.bp-switch.-on::after{left:calc(var(--u)*14)}
.bp-pill.-mute{border-color:var(--bp-neutral-500); background:var(--bp-neutral-75); color:var(--bp-text-muted)}
.bp-stat{display:inline-flex; align-items:center; justify-content:center; height:calc(var(--u)*28); min-width:calc(var(--u)*96); padding:0 calc(var(--u)*10); border-radius:calc(var(--u)*4); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:#fff; background:var(--bp-neutral-700); white-space:nowrap}
.bp-stat.-work{background:var(--bp-action)} .bp-stat.-hold{background:var(--bp-negative)} .bp-stat.-wait{background:var(--bp-warning)} .bp-stat.-plan{background:var(--bp-orange-500)}
.bp-canvas{width:calc(var(--bp-w,740) * var(--u)); background:var(--bp-bg-muted); padding:calc(var(--u)*16); display:grid; gap:calc(var(--u)*16)}
.bp-canvas.-cols{grid-template-columns:var(--bp-split,calc(var(--u)*330)) minmax(0,1fr); align-items:start}
.bp-canvas .bp-panel{padding:calc(var(--u)*18) calc(var(--u)*20) calc(var(--u)*20); min-width:0}
.bp-canvas .bp-panel+.bp-panel{margin-top:0}
.bp-rec{width:calc(var(--bp-w,720) * var(--u)); background:var(--bp-surface); padding:calc(var(--u)*20)}
.bp-rec .bp-prod{margin-top:0}
.bp-prod .bp-shot .bp-i.-s24{width:calc(var(--u)*24); height:calc(var(--u)*24)}
.bp-prod.-sm .bp-shot{width:calc(var(--u)*56)}
.bp-prod.-sm .bp-h{font-size:calc(var(--u)*14); line-height:calc(var(--u)*22)}
.bp-prod.-sm>div:last-child{padding:calc(var(--u)*8) calc(var(--u)*12)}
.bp-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--u)*8); margin-top:calc(var(--u)*12)}
.bp-tile{padding:calc(var(--u)*9) calc(var(--u)*14) calc(var(--u)*10); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted); min-width:0}
.bp-tile>span{display:block; font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-subtle)}
.bp-tile>p{display:flex; align-items:center; gap:calc(var(--u)*8); margin-top:calc(var(--u)*2); font-weight:500; color:var(--bp-text-heading); white-space:nowrap}
.bp-sub{font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:var(--bp-text-subtle); margin-top:calc(var(--u)*18)}
.bp-field.-tight{margin-top:calc(var(--u)*8)}
.bp-field small{font-size:calc(var(--u)*12); font-weight:400; color:var(--bp-text-subtle); margin-left:calc(var(--u)*8)}
.bp-field>span:first-child{color:var(--bp-text-heading); gap:0}
.bp-chips{display:flex; flex-wrap:wrap; gap:calc(var(--u)*8); margin-top:calc(var(--u)*16)}
.bp-chips>span{display:inline-flex; align-items:center; gap:calc(var(--u)*7); height:calc(var(--u)*32); padding:0 calc(var(--u)*10); border-radius:calc(var(--u)*6); border:1px solid var(--bp-border-subtle); background:var(--bp-surface);
  font-size:calc(var(--u)*13); font-weight:500; color:var(--bp-link); white-space:nowrap}
.bp-chips .bp-i{color:var(--bp-link)}
.bp-file{display:flex; align-items:center; gap:calc(var(--u)*10); height:calc(var(--u)*44); padding:0 calc(var(--u)*12); margin-top:calc(var(--u)*8); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted); white-space:nowrap}
.bp-file>p{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.bp-file small{font-size:calc(var(--u)*12); color:var(--bp-text-subtle)}
.bp-ftype{width:calc(var(--u)*24); height:calc(var(--u)*24); flex:none; border-radius:calc(var(--u)*4); display:grid; place-items:center; background:var(--bp-red-50); color:var(--bp-negative); font-size:calc(var(--u)*8); line-height:1; font-weight:600}
.bp-res2{padding:calc(var(--u)*10) calc(var(--u)*12); margin-top:calc(var(--u)*8); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted)}
.bp-res2>p{display:flex; align-items:center; gap:calc(var(--u)*8); white-space:nowrap}
.bp-res2>p:first-child{color:var(--bp-text-heading); font-weight:500}
.bp-res2>p:first-child .bp-stat{margin-left:auto; min-width:0; height:calc(var(--u)*24)}
.bp-res2>p+p{margin-top:calc(var(--u)*8)}
.bp-kpis.-c3{grid-template-columns:repeat(3,1fr)}
.bp-kpis.-sm .bp-kpi>p:last-child b{font-size:calc(var(--u)*26); line-height:calc(var(--u)*34)}
.bp-brandbar{display:flex; align-items:center; gap:calc(var(--u)*10); height:calc(var(--u)*48); padding:0 calc(var(--u)*24); border-bottom:1px solid var(--bp-border-subtle); font-weight:500; color:var(--bp-text-heading); white-space:nowrap}
.bp-brandbar .bp-logo{width:calc(var(--u)*22); height:calc(var(--u)*22); border-radius:calc(var(--u)*6); border:0; box-shadow:none}
.bp-brandbar small{font-size:calc(var(--u)*12); font-weight:400; color:var(--bp-text-subtle)}
.bp-brandbar .bp-avatar{margin-left:auto}

.bp-path{display:flex; align-items:center; gap:calc(var(--u)*5); margin-top:calc(var(--u)*6); padding:0 calc(var(--u)*16); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-subtle); white-space:nowrap}
.bp-path b{font-weight:500; color:var(--bp-text)}
.bp-tl{position:relative; margin-top:calc(var(--u)*16); padding-bottom:calc(var(--u)*26)}
.bp-tl-head,.bp-tl-row{display:grid; grid-template-columns:calc(var(--u)*270) minmax(0,1fr); column-gap:calc(var(--u)*16); align-items:center; padding:0 calc(var(--u)*12)}
.bp-tl-head{height:calc(var(--u)*32); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-subtle); border-bottom:1px solid var(--bp-border-subtle)}
.bp-tl-months{display:grid; grid-template-columns:repeat(12,1fr)}
.bp-tl-row{height:calc(var(--u)*48); margin-top:calc(var(--u)*12); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted)}
.bp-tl-head+.bp-tl-row{margin-top:calc(var(--u)*8)}
.bp-tl-row>p{display:flex; align-items:baseline; gap:calc(var(--u)*8); white-space:nowrap; overflow:hidden}
.bp-tl-row>p small{font-size:calc(var(--u)*12); color:var(--bp-text-subtle)}
.bp-tl-track{position:relative; height:calc(var(--u)*12); border-radius:calc(var(--u)*6); background:var(--bp-neutral-300)}
.bp-tl-track>i{position:absolute; top:0; bottom:0; border-radius:calc(var(--u)*6); background:var(--bp-action)}
.bp-tl-track>i.-ext{background:var(--bp-blue-300); border-radius:0 calc(var(--u)*6) calc(var(--u)*6) 0}
.bp-tl-lines{position:absolute; left:calc(var(--u)*298); right:calc(var(--u)*12); top:calc(var(--u)*32); bottom:0; pointer-events:none}
.bp-tl-lines>span{position:absolute; top:0; bottom:calc(var(--u)*24); width:0; border-left:1px dashed var(--bp-neutral-700)}
.bp-tl-lines>span.-co{border-left-color:var(--bp-action)}
.bp-tl-lines em{position:absolute; bottom:calc(var(--u)*-22); left:0; transform:translateX(-50%); font-size:calc(var(--u)*11); line-height:calc(var(--u)*16); font-weight:500; white-space:nowrap; color:var(--bp-text-muted)}
.bp-tl-lines>span.-co em{color:var(--bp-blue-500)}
.bp-tl-lines>span.-now em{transform:none; left:calc(var(--u)*-4)}

/* ---------- Website scenes ---------- */
/* Cards and panels reflow to their slot. App frames and tables keep their shape and crop from the right when small. */
.bp-fit>.bp-rec,.bp-fit>.bp-canvas,.bp-fit>.bp-drawer{width:100%}
.bp-rec.-flush{padding:calc(var(--u)*6) 0 0}
.bp-utabs{overflow-x:clip}
@container (max-width:520px){
  .bp-field small,.bp-file small,.bp-trow .bp-dates,.bp-tl-row small{display:none}
  .bp-canvas.-cols{grid-template-columns:minmax(0,1fr)}
  .bp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-tiles>:nth-child(3):last-child{grid-column:span 2}
  .bp-leg4{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:calc(var(--u)*10)}
  .bp-trow .bp-amt{margin-left:auto}
  .bp-drawer{padding:calc(var(--u)*20) calc(var(--u)*16) calc(var(--u)*24)}
  .bp-term{padding:calc(var(--u)*12) calc(var(--u)*14) calc(var(--u)*16)}
  .bp-term .bp-amt b{font-size:calc(var(--u)*20); line-height:calc(var(--u)*28)}
}
.bp-scene.-tight .bp-main{padding:calc(var(--u)*22) calc(var(--u)*24) calc(var(--u)*24)}
.bp-scene.-tight .bp-tabs{margin-top:calc(var(--u)*16)}
.bp-scene .bp-rail{display:none}
.bp-scene .bp-main{padding:calc(var(--u)*28) calc(var(--u)*32) calc(var(--u)*28)}

/* ===== platform extension: combined visuals (connected cards, popovers, scenes) ===== */
/* ---------- Alternative Asset Intelligence design: combined pieces ---------- */
.bp-sat{background:var(--bp-surface); padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*16); width:100%}
.bp-sat-h{display:flex; align-items:center; gap:calc(var(--u)*8); margin-bottom:calc(var(--u)*10); font-size:calc(var(--u)*14); line-height:calc(var(--u)*22); font-weight:600; color:var(--bp-text-heading); white-space:nowrap}
.bp-sat-h>.bp-i{color:var(--bp-link)}
.bp-sat-h small{margin-left:auto; font-size:calc(var(--u)*12); font-weight:400; color:var(--bp-text-subtle)}
.bp-ln{display:flex; align-items:center; gap:calc(var(--u)*8); min-height:calc(var(--u)*28); white-space:nowrap; color:var(--bp-text)}
.bp-ln+.bp-ln{margin-top:calc(var(--u)*6)}
.bp-ln>b{font-weight:500; color:var(--bp-text-heading); overflow:hidden; text-overflow:ellipsis}
.bp-ln>small{font-size:calc(var(--u)*12); color:var(--bp-text-subtle)}
.bp-ln>.-end{margin-left:auto}
.bp-sat .bp-path{padding:0; margin:0 0 calc(var(--u)*8); flex-wrap:wrap; font-size:calc(var(--u)*13); row-gap:calc(var(--u)*2)}
.bp-sat .bp-res2{margin-top:0}
.bp-sat .bp-pin{margin-top:calc(var(--u)*6)}
.bp-sat .bp-pin:first-of-type{margin-top:0}
.bp-sat .bp-change{margin-top:calc(var(--u)*6); padding-left:0}
.bp-tk{border:1px solid var(--bp-border-subtle); border-radius:calc(var(--u)*8); background:var(--bp-surface); overflow:hidden}
.bp-tk+.bp-tk{margin-top:calc(var(--u)*12)}
.bp-tk-top{padding:calc(var(--u)*10) calc(var(--u)*14) calc(var(--u)*12)}
.bp-tk-top>p:first-child{display:flex; align-items:center; gap:calc(var(--u)*6); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); color:var(--bp-text-subtle)}
.bp-tk-top>p:first-child b{font-weight:500; color:var(--bp-text)}
.bp-tk-top>p:first-child .bp-linkbtn{margin-left:auto; font-size:calc(var(--u)*12)}
.bp-tk-top>p+p{margin-top:calc(var(--u)*4); font-size:calc(var(--u)*15); line-height:calc(var(--u)*22); font-weight:600; color:var(--bp-text-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bp-tk-meta{display:flex; gap:calc(var(--u)*14); padding:calc(var(--u)*10) calc(var(--u)*14) calc(var(--u)*12); border-top:1px solid var(--bp-border-subtle); background:var(--bp-neutral-75)}
.bp-tk-meta>div>span:first-child{display:block; margin-bottom:calc(var(--u)*4); font-size:calc(var(--u)*9); line-height:calc(var(--u)*14); font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--bp-text-subtle)}
.bp-tk.-slim .bp-tk-top{padding:calc(var(--u)*8) calc(var(--u)*12) calc(var(--u)*10)}
.bp-tk.-slim .bp-tk-meta{padding:calc(var(--u)*8) calc(var(--u)*12) calc(var(--u)*10); gap:calc(var(--u)*8)}
.bp-chipb{display:inline-flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*28); padding:0 calc(var(--u)*8); border:1px solid var(--bp-border); border-radius:calc(var(--u)*4); background:var(--bp-surface); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); white-space:nowrap; color:var(--bp-text)}
.bp-tk .bp-stat{min-width:0}
.bp-task{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; column-gap:calc(var(--u)*14); padding:calc(var(--u)*12) calc(var(--u)*14); margin-top:calc(var(--u)*8); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted)}
.bp-task>div:first-child>p{display:flex; align-items:center; gap:calc(var(--u)*8); font-weight:500; color:var(--bp-text-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bp-task small{font-size:calc(var(--u)*12); color:var(--bp-text-subtle)}
.bp-task.-two{grid-template-columns:minmax(0,1fr) auto; padding:calc(var(--u)*10) calc(var(--u)*12); margin-top:0}
.bp-chk{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--u)*6) calc(var(--u)*16); margin-top:calc(var(--u)*4)}
.bp-chk>p{display:flex; align-items:center; gap:calc(var(--u)*8); height:calc(var(--u)*30); padding:0 calc(var(--u)*10); border-radius:calc(var(--u)*6); background:var(--bp-bg-muted); color:var(--bp-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bp-chk>p>i{flex:none; width:calc(var(--u)*14); height:calc(var(--u)*14); border-radius:calc(var(--u)*3); border:1px solid var(--bp-neutral-400); background:var(--bp-surface); display:grid; place-items:center}
.bp-chk>p.-done{color:var(--bp-text-subtle)}
.bp-chk>p.-done>i{background:var(--bp-action); border-color:var(--bp-action)}
.bp-chk>p.-done>i::after{content:""; width:calc(var(--u)*7); height:calc(var(--u)*4); border-left:calc(var(--u)*1.6) solid #fff; border-bottom:calc(var(--u)*1.6) solid #fff; transform:translateY(calc(var(--u)*-1)) rotate(-45deg)}
.bp-prog{display:flex; align-items:center; gap:calc(var(--u)*8); font-size:calc(var(--u)*12); color:var(--bp-text-muted); white-space:nowrap}
.bp-prog>i{width:calc(var(--u)*56); height:calc(var(--u)*6); border-radius:calc(var(--u)*3); background:var(--bp-neutral-300); position:relative; overflow:hidden; display:block}
.bp-prog>i::after{content:""; position:absolute; left:0; top:0; bottom:0; width:var(--v,50%); background:var(--bp-positive); border-radius:calc(var(--u)*3)}
.bp-tree{display:grid; gap:calc(var(--u)*6)}
.bp-tree>p{display:flex; align-items:center; gap:calc(var(--u)*8); height:calc(var(--u)*36); padding:0 calc(var(--u)*12); margin-left:calc(var(--d,0) * calc(var(--u)*22)); border-radius:calc(var(--u)*8); background:var(--bp-bg-muted); color:var(--bp-text); white-space:nowrap}
.bp-tree>p small{margin-left:auto; font-size:calc(var(--u)*12); color:var(--bp-text-subtle)}
.bp-tree>p.-on{background:var(--bp-surface-selected); box-shadow:inset 0 0 0 1px var(--bp-blue-300); font-weight:500; color:var(--bp-text-heading)}
.bp-side.-sm{width:calc(var(--u)*276); padding:calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*20)}
.bp-side.-sm .bp-field{height:calc(var(--u)*38); padding:0 calc(var(--u)*12); margin-top:calc(var(--u)*10); font-size:calc(var(--u)*13); white-space:nowrap}
.bp-side.-sm .bp-pin{margin:calc(var(--u)*8) calc(var(--u)*-6) 0; padding:calc(var(--u)*3) calc(var(--u)*6); border-radius:calc(var(--u)*6); font-size:calc(var(--u)*13)}
.bp-side.-sm .bp-prod .bp-h{font-size:calc(var(--u)*14); line-height:calc(var(--u)*20)}
.bp-side.-sm .bp-back,.bp-side.-sm .bp-partof{font-size:calc(var(--u)*12)}
.bp-side.-sm .bp-partof>span{height:calc(var(--u)*28)}
.bp-side.-sm .bp-sidehead{margin-top:calc(var(--u)*14); padding-top:calc(var(--u)*12)}
.bp-stack{display:grid}
.bp-stack>div{grid-area:1/1; min-width:0}
.bp-dock2{display:flex; gap:calc(var(--u)*6); justify-content:center; margin-top:calc(var(--u)*14)}
.bp-dock2>span{display:inline-flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*30); padding:0 calc(var(--u)*8); border-radius:calc(var(--u)*6); background:var(--bp-surface); box-shadow:0 calc(var(--u)*2) calc(var(--u)*8) rgba(22,26,48,.12); font-size:calc(var(--u)*12); font-weight:500; color:var(--bp-link); white-space:nowrap}
.bp-dock2 .bp-i{color:var(--bp-link)}
.bp-dock2.-bar{margin:0; padding:calc(var(--u)*10) calc(var(--u)*10); background:var(--bp-surface); border-top:1px solid var(--bp-border-subtle); gap:calc(var(--u)*6); flex-wrap:nowrap}
.bp-dock2.-bar>span{box-shadow:none; border:1px solid var(--bp-border-subtle); height:calc(var(--u)*30); padding:0 calc(var(--u)*8); gap:calc(var(--u)*5); font-size:calc(var(--u)*12); flex:none}
.bp-recx{width:calc(var(--bp-w,880) * var(--u)); background:var(--bp-surface)}
.bp-sched.-wide{width:100%}
.bp-sched>span{position:relative}
.bp-sched>span.-bk::after,.bp-sched>span.-pl::after{content:""; position:absolute; left:0; right:0; bottom:calc(var(--u)*7); height:calc(var(--u)*13); background:var(--bp-action)}
.bp-sched>span.-s::after{left:calc(var(--u)*6); border-radius:calc(var(--u)*4) 0 0 calc(var(--u)*4)}
.bp-sched>span.-e::after{right:calc(var(--u)*6); border-radius:0 calc(var(--u)*4) calc(var(--u)*4) 0}
.bp-sched>span.-pl::after{left:calc(var(--u)*6); right:calc(var(--u)*6); border-radius:calc(var(--u)*4); background:var(--bp-orange-500)}
.bp-core{background:var(--bp-surface); padding:calc(var(--u)*18); width:100%}
.bp-core .bp-partof{margin-top:0}
.bp-core .bp-field{margin-top:calc(var(--u)*10)}
.bp-core .bp-pin{margin-top:calc(var(--u)*12); padding:0 calc(var(--u)*4)}
.bp-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--u)*8)}
.bp-two .bp-res2{margin-top:0}
@container (max-width:520px){
  .bp-two{grid-template-columns:minmax(0,1fr)}
  .bp-task{grid-template-columns:minmax(0,1fr) auto auto; row-gap:calc(var(--u)*8)}
  .bp-task>div:first-child{grid-column:1/-1}
  .bp-chk{grid-template-columns:minmax(0,1fr)}
  .bp-tk-meta{flex-wrap:wrap; row-gap:calc(var(--u)*8)}
  .bp-tix{height:auto; min-height:calc(var(--u)*46); padding:calc(var(--u)*8) calc(var(--u)*14)}
  .bp-utabs{gap:calc(var(--u)*16)}
}
/* ---------- Asset Intelligence: combined feature visuals ---------- */
.bp-xcard{background:var(--bp-surface); padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*16); width:100%}
.bp-xcard>.bp-prod{margin-top:0}
.bp-xcard .bp-file:first-of-type{margin-top:0}
.bp-foot{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*10); margin-top:calc(var(--u)*12); padding-top:calc(var(--u)*12); border-top:1px solid var(--bp-border-subtle); font-size:calc(var(--u)*12); color:var(--bp-text-subtle); white-space:nowrap}
.bp-foot>span{display:inline-flex; align-items:center; gap:calc(var(--u)*6)}
.bp-btn.-blue{background:var(--bp-action); border-color:var(--bp-action); color:#fff; font-weight:500}
.bp-btn.-blue .bp-i{color:#fff}
.bp-btn.-on{border-color:var(--bp-blue-300); background:var(--bp-surface-selected); color:var(--bp-link)}
.bp-btn.-on .bp-i{color:var(--bp-link)}
.bp-row.-sel .bp-cells{background:var(--bp-surface-selected); box-shadow:inset 0 0 0 1px var(--bp-blue-200)}
.bp-row.-sel .bp-check::before{background:var(--bp-action); border-color:var(--bp-action)}
.bp-row.-sel .bp-check{position:relative}
.bp-row.-sel .bp-check::after{content:""; position:absolute; left:calc(var(--u)*4.5); top:50%; width:calc(var(--u)*7); height:calc(var(--u)*4); margin-top:calc(var(--u)*-3.5); border-left:calc(var(--u)*1.6) solid #fff; border-bottom:calc(var(--u)*1.6) solid #fff; transform:rotate(-45deg)}
.bp-frule{display:grid; grid-template-columns:minmax(0,1.15fr) auto minmax(0,1fr); align-items:center; gap:calc(var(--u)*6); margin-top:calc(var(--u)*8)}
.bp-frule>span{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*6); height:calc(var(--u)*30); padding:0 calc(var(--u)*6) 0 calc(var(--u)*8); border:1px solid var(--bp-border); border-radius:calc(var(--u)*4); background:var(--bp-surface); font-size:calc(var(--u)*12); color:var(--bp-text); white-space:nowrap; overflow:hidden}
.bp-frule>span.-op{border:0; padding:0 calc(var(--u)*2); background:none; color:var(--bp-text-subtle)}
.bp-vseg{display:inline-flex; gap:calc(var(--u)*2); padding:calc(var(--u)*3); border-radius:calc(var(--u)*6); background:var(--bp-neutral-200)}
.bp-vseg>span{display:flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*26); padding:0 calc(var(--u)*10); border-radius:calc(var(--u)*4); font-size:calc(var(--u)*12); color:var(--bp-text-muted); white-space:nowrap}
.bp-vseg>span.-on{background:var(--bp-surface); color:var(--bp-text-heading); font-weight:500; box-shadow:0 calc(var(--u)*1) calc(var(--u)*2) rgba(22,26,48,.16)}
.bp-vhead{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*10); font-size:calc(var(--u)*12); color:var(--bp-text-subtle); white-space:nowrap}
.bp-kan{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--u)*8); margin-top:calc(var(--u)*12)}
.bp-kan>div{background:var(--bp-bg-muted); border-radius:calc(var(--u)*8); padding:calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*10); min-width:0}
.bp-kan>div>p:first-child{display:flex; align-items:center; gap:calc(var(--u)*6); font-size:calc(var(--u)*12); line-height:calc(var(--u)*18); font-weight:500; color:var(--bp-text-heading); white-space:nowrap}
.bp-kan>div>p:first-child small{margin-left:auto; font-weight:400; color:var(--bp-text-subtle)}
.bp-kan .-k{display:flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*34); padding:0 calc(var(--u)*8); margin-top:calc(var(--u)*6); border-radius:calc(var(--u)*6); background:var(--bp-surface); border:1px solid var(--bp-border-subtle); font-size:calc(var(--u)*12); color:var(--bp-text); white-space:nowrap; overflow:hidden}
.bp-kan .-k>span{overflow:hidden; text-overflow:ellipsis}
.bp-kan .-k.-more{border-style:dashed; background:none; color:var(--bp-text-subtle); justify-content:center}
.bp-colstack{display:grid; gap:calc(var(--u)*16); align-content:start; min-width:0}
.bp-who{display:inline-flex; align-items:center}
.bp-who .bp-avatar+.bp-avatar{margin-left:calc(var(--u)*-6)}
.bp-kind{display:inline-flex; align-items:center; height:calc(var(--u)*20); padding:0 calc(var(--u)*6); border-radius:calc(var(--u)*4); background:var(--bp-neutral-200); font-size:calc(var(--u)*11); color:var(--bp-text-muted)}
/* phone */
.bp-phone{width:100%; background:#10142B; border-radius:calc(var(--u)*30); padding:calc(var(--u)*7); box-shadow:inset 0 0 0 calc(var(--u)*1) rgba(255,255,255,.14)}
.bp-phone>div{background:var(--bp-surface); border-radius:calc(var(--u)*24); overflow:hidden; padding-bottom:calc(var(--u)*12)}
.bp-ph-bar{display:flex; align-items:center; justify-content:space-between; padding:calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*10); font-size:calc(var(--u)*14); line-height:calc(var(--u)*20); font-weight:600; color:var(--bp-text-heading)}
.bp-ph-bar small{font-size:calc(var(--u)*11); font-weight:400; color:var(--bp-text-subtle)}
.bp-ph-scan{position:relative; margin:0 calc(var(--u)*12); height:calc(var(--u)*88); border-radius:calc(var(--u)*10); background:#10142B; display:grid; place-items:center; overflow:hidden}
.bp-ph-scan>i{width:calc(var(--u)*120); height:calc(var(--u)*44); background:repeating-linear-gradient(90deg,#fff 0 calc(var(--u)*2),transparent calc(var(--u)*2) calc(var(--u)*5),#fff calc(var(--u)*5) calc(var(--u)*6),transparent calc(var(--u)*6) calc(var(--u)*8),#fff calc(var(--u)*8) calc(var(--u)*11),transparent calc(var(--u)*11) calc(var(--u)*13)); opacity:.92; display:block}
.bp-ph-scan::before{content:""; position:absolute; inset:calc(var(--u)*14) calc(var(--u)*30); border:calc(var(--u)*2) solid var(--bp-blue-400); border-radius:calc(var(--u)*8); opacity:.9;
  -webkit-mask:conic-gradient(from 0deg at calc(var(--u)*18) calc(var(--u)*18),#000 0 25%,transparent 0) 0 0/calc(100% - calc(var(--u)*18)) calc(100% - calc(var(--u)*18)); mask:conic-gradient(from 0deg at calc(var(--u)*18) calc(var(--u)*18),#000 0 25%,transparent 0) 0 0/calc(100% - calc(var(--u)*18)) calc(100% - calc(var(--u)*18))}
.bp-ph-scan::after{content:""; position:absolute; left:calc(var(--u)*26); right:calc(var(--u)*26); top:50%; height:calc(var(--u)*2); background:var(--bp-blue-400); box-shadow:0 0 calc(var(--u)*10) calc(var(--u)*1) rgba(77,148,255,.8)}
.bp-ph-ok{display:flex; align-items:center; gap:calc(var(--u)*6); margin:calc(var(--u)*10) calc(var(--u)*12) 0; font-size:calc(var(--u)*11); line-height:calc(var(--u)*16); color:var(--bp-green-600); font-weight:500}
.bp-ph-card{margin:calc(var(--u)*8) calc(var(--u)*12) 0; border:1px solid var(--bp-border-subtle); border-radius:calc(var(--u)*10); padding:calc(var(--u)*10)}
.bp-ph-card>p:first-child{display:flex; align-items:center; gap:calc(var(--u)*8); font-size:calc(var(--u)*13); line-height:calc(var(--u)*18); font-weight:600; color:var(--bp-text-heading)}
.bp-ph-card>p:first-child small{display:block; font-size:calc(var(--u)*11); font-weight:400; color:var(--bp-text-subtle)}
.bp-ph-card .bp-pin{margin-top:calc(var(--u)*8); font-size:calc(var(--u)*12)}
.bp-ph-card .bp-pin:first-of-type{margin-top:calc(var(--u)*10); padding-top:calc(var(--u)*10); border-top:1px solid var(--bp-border-subtle)}
.bp-ph-cta{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u)*8); margin:calc(var(--u)*12) calc(var(--u)*12) 0}
.bp-ph-cta>span{display:grid; place-items:center; height:calc(var(--u)*36); border-radius:calc(var(--u)*8); font-size:calc(var(--u)*13); font-weight:500; border:1px solid var(--bp-border); color:var(--bp-text-heading)}
.bp-ph-cta>span.-go{background:var(--bp-action); border-color:var(--bp-action); color:#fff}