.wb-team-app{--wb-blue:#174d85;--wb-ink:#172b45;--wb-line:#d9e2ec;--wb-orange:#f07816;font-family:Arial, sans-serif;color:var(--wb-ink);max-width:1600px;margin:0 auto;background:#f6f8fb;border:1px solid #e3e8ef;border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(24,45,72,.10)}
.wb-team-app *{box-sizing:border-box}.wb-team-hero{height:clamp(190px,29vw,360px);min-height:190px;position:relative;background-image:var(--wb-office);background-size:cover;background-position:center 56%;overflow:hidden;border-bottom:5px solid #b77b3e}.wb-team-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.03),transparent 45%,rgba(255,255,255,.04));pointer-events:none}.wb-team-brand{position:absolute;z-index:2;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:5px 15px;border-radius:0 0 12px 12px;background:rgba(255,255,255,.90);color:#74401f;font-size:clamp(17px,2vw,27px);font-weight:800;line-height:.95;text-align:center;box-shadow:0 3px 10px #0002}.wb-brand-globe{font-size:1.55em}.wb-office-people{position:absolute;inset:0;z-index:1}.wb-person{position:absolute;bottom:3%;width:9.8%;height:64%;min-height:115px;display:flex;align-items:flex-end;justify-content:center;transition:opacity .22s,transform .22s;filter:drop-shadow(0 4px 3px #0003);animation:wb-pop .32s ease-out both}.wb-person svg{width:100%;height:100%;overflow:visible}.wb-person-name{position:absolute;left:2%;right:2%;bottom:0;z-index:3;padding:3px 2px;border:2px solid #fff;border-radius:7px;background:var(--wb-name-bg,#174d85);color:#fff;text-align:center;font-size:clamp(8px,.85vw,13px);font-weight:800;line-height:1.15;text-shadow:0 1px 2px #0005;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 5px #0004}.wb-person.wb-hidden{display:none}@keyframes wb-pop{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.wb-team-toolbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px 16px;background:#fff;border-bottom:1px solid var(--wb-line)}.wb-count-label{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800}.wb-people-icon{font-size:26px;color:var(--wb-blue)}.wb-count-control{display:flex;align-items:center;gap:5px}.wb-count-control button{width:38px;height:38px;border:0;border-radius:9px;background:var(--wb-blue);color:white;font-size:25px;cursor:pointer}.wb-count-control input{width:58px;height:38px;border:1px solid #cbd5e1;border-radius:8px;text-align:center;font-size:18px;font-weight:800;color:var(--wb-ink)}.wb-action{border:0;border-radius:9px;padding:11px 15px;font-size:13px;font-weight:700;color:#fff;background:#52677f;cursor:pointer;transition:.18s}.wb-action:hover{filter:brightness(1.1);transform:translateY(-1px)}.wb-add{background:#ed790e}.wb-save{background:#174d85}.wb-print{background:#16834a}.wb-reset{background:#718096}
.wb-team-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:14px;background:#f7f9fc}.wb-employee{--accent:#1764a5;--tint:#eaf3fb;background:linear-gradient(180deg,var(--tint),#fff 22%);border:1px solid color-mix(in srgb,var(--accent),white 50%);border-radius:12px;padding:9px;min-width:0;position:relative;box-shadow:0 3px 9px #17314a0a}.wb-employee-head{text-align:center;margin:-2px 0 10px}.wb-employee-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-size:19px;font-weight:800;box-shadow:0 3px 7px #0002}.wb-employee-name{display:block;width:100%;margin-top:5px;padding:7px 5px;border:1px solid #d8e0e8;border-radius:7px;background:#fff;text-align:center;font-size:14px;font-weight:700;color:#172b45}.wb-field{margin:8px 0}.wb-field-label{display:block;padding:6px 7px;border-radius:6px;background:var(--accent);color:white;font-size:12px;font-weight:800;margin-bottom:5px}.wb-field select{width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:7px;padding:8px 6px;background:#fff;color:#1f2937;font-size:12px}.wb-extras{margin-top:9px;padding:8px;border-radius:8px;background:var(--tint);border:1px solid color-mix(in srgb,var(--accent),white 70%)}.wb-extras-title{font-size:12px;font-weight:800;color:var(--accent);margin-bottom:6px}.wb-extra{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.5;margin:4px 0;color:#26364a}.wb-extra input{accent-color:var(--accent);margin:0}.wb-remove-person{position:absolute;right:7px;top:7px;border:0;background:#fff;color:#b42318;border-radius:50%;width:24px;height:24px;font-size:17px;cursor:pointer;box-shadow:0 1px 4px #0002}.wb-team-summary{display:flex;align-items:stretch;justify-content:space-around;gap:5px;flex-wrap:wrap;margin:0 14px 14px;padding:12px;background:#fff;border:1px solid #b8d3ee;border-radius:12px;box-shadow:0 3px 10px #17314a0a}.wb-summary-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--wb-blue);padding:5px 12px}.wb-summary-item{min-width:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 10px;border-left:1px solid #dce5ef}.wb-summary-item strong{font-size:21px;color:#102f58}.wb-summary-item span{font-size:10px;text-align:center;color:#53657b}.wb-team-notice{min-height:0;text-align:center;font-size:12px;color:#167044}.wb-team-notice:not(:empty){padding:0 12px 12px}.wb-empty{grid-column:1/-1;text-align:center;padding:35px 15px;color:#64748b;background:white;border:1px dashed #cbd5e1;border-radius:10px}
@media(max-width:1050px){.wb-team-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.wb-person{width:9.8%;height:56%}.wb-team-hero{background-position:center 60%}}
@media(max-width:650px){.wb-team-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}.wb-team-toolbar{gap:7px;padding:10px}.wb-count-label{width:100%;justify-content:center}.wb-action{flex:1 1 42%;padding:10px 7px}.wb-person{width:9.8%;height:48%;min-height:70px}.wb-team-hero{height:190px}.wb-summary-item{min-width:72px}.wb-summary-title{width:100%;justify-content:center}.wb-employee{padding:7px}.wb-employee-name{font-size:12px}}
@media print{body *{visibility:hidden!important}.wb-team-app,.wb-team-app *{visibility:visible!important}.wb-team-app{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none;border:0}.wb-team-toolbar .wb-action,.wb-count-control,.wb-remove-person,.wb-team-notice{display:none!important}.wb-team-cards{grid-template-columns:repeat(5,1fr)}.wb-team-hero{height:210px}.wb-employee{break-inside:avoid}}
/* Version 1.3: distinctive illustrated employee portraits */
.wb-person-portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border:2px solid rgba(255,255,255,.95);border-radius:12px 12px 4px 4px;background:#f3f7fb;box-shadow:0 3px 9px rgba(0,0,0,.22)}
.wb-card-portrait{display:block;width:100%;height:88px;object-fit:contain;object-position:center center;margin:5px auto 8px;border-radius:9px;background:var(--tint);border:1px solid color-mix(in srgb,var(--accent),white 72%)}
.wb-employee-head{padding-top:0}
.wb-employee-head .wb-employee-name{margin-top:4px}
@media(max-width:650px){.wb-card-portrait{height:76px}.wb-person-portrait{border-width:1px;border-radius:8px 8px 3px 3px}}

/* v1.3.1 — desk phone and mobile hover product previews */
.wb-product-picker{position:relative;width:100%;z-index:5}
.wb-product-picker.is-open{z-index:30}
.wb-picker-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;padding:8px 9px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#1f2937;font:inherit;font-size:12px;text-align:left;cursor:pointer}
.wb-picker-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-picker-chevron{flex:0 0 auto;color:#52677f;font-size:14px}
.wb-picker-trigger:focus-visible,.wb-picker-option:focus-visible{outline:2px solid #1764a5;outline-offset:2px}
.wb-picker-menu{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;max-height:220px;overflow-y:auto;padding:4px;background:#fff;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 8px 22px rgba(20,40,65,.18);z-index:40}
.wb-product-picker.is-open .wb-picker-menu{display:block}
.wb-picker-option{display:block;width:100%;padding:8px 9px;border:0;border-radius:5px;background:#fff;color:#1f2937;font:inherit;font-size:12px;text-align:left;cursor:pointer}
.wb-picker-option:hover,.wb-picker-option:focus{background:#eaf3fb;color:#174d85}
.wb-picker-option[aria-selected="true"]{font-weight:800;background:#f1f5f9}
.wb-product-preview{display:none;position:absolute;left:calc(100% + 10px);top:0;width:210px;padding:10px;background:#fff;border:1px solid #cbd5e1;border-radius:11px;box-shadow:0 12px 28px rgba(16,35,58,.24);z-index:60;pointer-events:none;text-align:center}
.wb-product-preview.is-visible{display:block}
.wb-product-preview img{display:block;width:100%;height:118px;object-fit:contain;background:#f7f9fc;border-radius:7px}
.wb-product-preview-name{margin-top:7px;color:#172b45;font-size:13px;font-weight:800;line-height:1.25}
.wb-product-preview-type{margin-top:2px;color:#64748b;font-size:10px}
@media(max-width:650px){.wb-product-preview{left:auto;right:0;top:calc(100% + 6px);width:min(190px,78vw)}.wb-product-picker.is-open{z-index:60}}
@media(hover:none){.wb-product-preview{left:auto;right:0;top:calc(100% + 6px);width:min(190px,78vw)}}

/* v1.3.6 — approved empty Telecoms UK office scene and realistic first seated employee */
.wb-team-hero{height:clamp(190px,24.7vw,420px);background-position:center center!important;background-size:cover!important}
.wb-team-brand{display:none!important}
.wb-office-people{z-index:1}
.wb-person{width:9.5%;height:38%;bottom:20%;overflow:visible}
.wb-person-portrait{object-fit:contain;object-position:center bottom;border:0;border-radius:0;background:transparent;box-shadow:none}
.wb-person-real{left:2.6%!important;bottom:22%!important;width:12%!important;height:auto!important;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.wb-person-real .wb-seated-photo{display:block;width:100%;height:auto;object-fit:contain;object-position:center bottom;border:0;border-radius:0;background:transparent;box-shadow:none}
.wb-person-real .wb-person-name{left:9%;right:9%;bottom:-70px;z-index:5}
@media(max-width:650px){
 .wb-team-hero{height:190px}
 .wb-person{width:9.5%;height:38%;bottom:20%}
 .wb-person-real{width:16%!important;left:1.5%!important;bottom:22%!important}
 .wb-person-real .wb-person-name{bottom:-44px;font-size:9px}
}

/* v1.3.7 — show the complete ten-chair master image instead of cropping/zooming it */
.wb-team-hero{
  height:clamp(190px,24.24vw,420px)!important;
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
@media(max-width:650px){
  .wb-team-hero{
    height:190px!important;
    background-size:auto 100%!important;
    background-position:center center!important;
  }
}

/* v1.3.8 — isolated employee cutout fitted to the first chair */
.wb-person-real{
  left:3.8%!important;
  bottom:25%!important;
  width:8.5%!important;
  height:auto!important;
  min-height:0!important;
  display:block;
  overflow:visible!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));
}
.wb-person-real .wb-seated-photo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center bottom;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.wb-person-real .wb-person-name{
  left:5%;
  right:5%;
  bottom:-8px;
  z-index:4;
}
@media(max-width:650px){
  .wb-person-real{left:3.8%!important;width:10.5%!important;bottom:25%!important}
  .wb-person-real .wb-person-name{bottom:-7px;font-size:9px}
}