/* Client cabinet enterprise system.
   Loaded after shared themes so the legal-entity workspace keeps one predictable,
   restrained visual language across desktop, tablet and mobile. */

body[data-mode="client"]{
  --client-navy:#142C52;
  --client-navy-strong:#0F2342;
  --client-red:#C91D25;
  --client-ink:#182230;
  --client-copy:#344054;
  --client-muted:#667085;
  --client-line:#DDE3EA;
  --client-line-soft:#EAECF0;
  --client-surface:#FFFFFF;
  --client-canvas:#F5F6F8;
  --client-soft:#F8FAFC;
  margin:0;
  background:var(--client-canvas);
  color:var(--client-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:14.5px;
  line-height:1.5;
  letter-spacing:0;
}
body[data-mode="client"] *,
body[data-mode="client"] *::before,
body[data-mode="client"] *::after{box-sizing:border-box}
body[data-mode="client"] button,
body[data-mode="client"] input,
body[data-mode="client"] select,
body[data-mode="client"] textarea{font-family:inherit!important}
body[data-mode="client"] small{font-size:12.5px;line-height:1.45}
body[data-mode="client"] .muted,
body[data-mode="client"] .hint,
body[data-mode="client"] .sub{color:var(--client-muted)!important}
body[data-mode="client"] .hint{font-size:13px;line-height:1.5}
body[data-mode="client"] .shell{background:var(--client-canvas)}
body[data-mode="client"] .main{min-width:0;width:calc(100% - 248px)}
body[data-mode="client"] .side{
  width:248px!important;
  border-right:1px solid var(--client-line)!important;
  background:#FBFCFD!important;
  color:var(--client-copy)!important;
}
body[data-mode="client"] .brand{
  min-height:64px!important;
  padding:16px 18px!important;
  border-bottom:1px solid var(--client-line-soft)!important;
  color:var(--client-navy-strong)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:17px!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
}
body[data-mode="client"] .brand .dot{width:8px;height:8px;background:var(--client-red)}
body[data-mode="client"] .nav{padding:10px 10px 24px!important}
body[data-mode="client"] .nav-grp.platform-main{
  display:flex;
  padding:15px 10px 6px!important;
  color:#7A8495!important;
  font-size:11.5px!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  line-height:1.25;
  text-transform:uppercase!important;
}
body[data-mode="client"] .nav a{
  min-height:42px!important;
  margin:1px 0!important;
  padding:9px 11px!important;
  gap:11px!important;
  border:0!important;
  border-radius:6px!important;
  color:#3A4657!important;
  font-size:14px!important;
  font-weight:550!important;
  line-height:1.25;
}
body[data-mode="client"] .nav a:hover{background:#F0F3F7!important;color:var(--client-navy-strong)!important}
body[data-mode="client"] .nav a.active{
  background:#E9EEF5!important;
  color:var(--client-navy-strong)!important;
  font-weight:700!important;
  box-shadow:inset 3px 0 0 var(--client-red);
}
body[data-mode="client"] .pnav-ico,
body[data-mode="client"] .pnav-ico svg{width:18px;height:18px}
body[data-mode="client"] .topbar{
  min-height:64px!important;
  height:64px;
  padding:0 24px!important;
  gap:14px!important;
  border-bottom:1px solid var(--client-line)!important;
  background:#fff!important;
  box-shadow:none!important;
}
body[data-mode="client"] .search{max-width:560px}
body[data-mode="client"] .search input{
  min-height:40px!important;
  height:40px!important;
  padding:0 13px!important;
  border:1px solid #CFD6DF!important;
  border-radius:7px!important;
  background:#F8FAFC!important;
  color:var(--client-ink)!important;
  font-size:14px!important;
}
body[data-mode="client"] .client-company-context{max-width:300px}
body[data-mode="client"] .client-company-context b{font-size:13px;color:var(--client-ink)}
body[data-mode="client"] .client-company-context span{font-size:12.5px!important;color:var(--client-muted)}
body[data-mode="client"] .content{
  width:100%;
  max-width:none;
  min-width:0;
  padding:28px 30px 44px!important;
  overflow-x:hidden;
}
body[data-mode="client"] h1,
body[data-mode="client"] h2,
body[data-mode="client"] h3,
body[data-mode="client"] h4,
body[data-mode="client"] h2.page,
body[data-mode="client"] .page{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
body[data-mode="client"] h2.page,
body[data-mode="client"] .page{
  color:var(--client-ink)!important;
  font-size:27px!important;
  font-weight:700!important;
  line-height:1.22!important;
  letter-spacing:-.025em!important;
}
body[data-mode="client"] h1.page,
body[data-mode="client"] h2.page{margin:0!important}
body[data-mode="client"] .sub{
  max-width:820px;
  font-size:14.5px!important;
  line-height:1.5!important;
}
body[data-mode="client"] .toolbar{align-items:flex-start;margin-bottom:20px;gap:14px}
body[data-mode="client"] .toolbar>div:last-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body[data-mode="client"] .sec{
  color:var(--client-navy)!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.35;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Controls */
body[data-mode="client"] label,
body[data-mode="client"] .field label,
body[data-mode="client"] .field-label{
  color:var(--client-copy);
  font-size:14px!important;
  font-weight:600;
}
body[data-mode="client"] input,
body[data-mode="client"] select,
body[data-mode="client"] textarea,
body[data-mode="client"] .field input,
body[data-mode="client"] .field select,
body[data-mode="client"] .field textarea{
  min-height:42px;
  border:1px solid #C9D1DC;
  border-radius:7px!important;
  background:#fff;
  color:var(--client-ink);
  font-size:15px!important;
}
body[data-mode="client"] textarea{padding:10px 12px;line-height:1.5}
body[data-mode="client"] input::placeholder,
body[data-mode="client"] textarea::placeholder{color:#98A2B3}
body[data-mode="client"] input:focus,
body[data-mode="client"] select:focus,
body[data-mode="client"] textarea:focus{
  border-color:#6481AC!important;
  box-shadow:0 0 0 3px rgba(45,87,145,.12)!important;
  outline:none!important;
}
body[data-mode="client"] .btn-primary,
body[data-mode="client"] .btn-ghost,
body[data-mode="client"] .btn-sm{
  min-height:40px!important;
  padding:9px 14px!important;
  border-radius:7px!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1.2;
}
body[data-mode="client"] .btn-primary{
  border:1px solid var(--client-navy)!important;
  background:var(--client-navy)!important;
  color:#fff!important;
  box-shadow:none!important;
}
body[data-mode="client"] .btn-primary:hover{border-color:var(--client-navy-strong)!important;background:var(--client-navy-strong)!important}
body[data-mode="client"] .btn-ghost{
  border:1px solid #C9D1DC!important;
  background:#fff!important;
  color:var(--client-navy)!important;
  box-shadow:none!important;
}
body[data-mode="client"] .btn-ghost:hover{border-color:#8F9CAD!important;background:#F7F9FC!important}
body[data-mode="client"] button:focus-visible,
body[data-mode="client"] a:focus-visible,
body[data-mode="client"] input:focus-visible,
body[data-mode="client"] select:focus-visible,
body[data-mode="client"] textarea:focus-visible{
  outline:3px solid rgba(45,87,145,.28)!important;
  outline-offset:2px!important;
}
body[data-mode="client"] button:disabled,
body[data-mode="client"] button[aria-disabled="true"]{transform:none!important;filter:none!important}
body[data-mode="client"] .field{margin-bottom:14px}
body[data-mode="client"] .row2{gap:14px}

/* Surfaces, metrics and data */
body[data-mode="client"] .tile,
body[data-mode="client"] .panel,
body[data-mode="client"] .form-card,
body[data-mode="client"] .process-card,
body[data-mode="client"] .ov-card,
body[data-mode="client"] .p-card,
body[data-mode="client"] .help-card,
body[data-mode="client"] .su-card,
body[data-mode="client"] .tr-col,
body[data-mode="client"] .client-command-center,
body[data-mode="client"] .help-support,
body[data-mode="client"] .help-quick-card{
  border:1px solid var(--client-line)!important;
  border-radius:8px!important;
  background:var(--client-surface)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.035)!important;
}
body[data-mode="client"] .tile{padding:16px 17px}
body[data-mode="client"] .tile .lbl{margin-bottom:5px;color:var(--client-muted);font-size:13px;font-weight:600}
body[data-mode="client"] .tile .num{color:var(--client-ink);font-size:26px!important;font-weight:700;letter-spacing:-.025em}
body[data-mode="client"] .tile .foot{margin-top:9px;color:var(--client-muted);font-size:12.5px}
body[data-mode="client"] .client-kpi-grid{gap:10px}
body[data-mode="client"] .client-kpi-grid .tile .num{font-size:clamp(21px,1.8vw,27px)!important;overflow-wrap:anywhere}
body[data-mode="client"] .content table{
  border:1px solid var(--client-line)!important;
  border-radius:8px!important;
  background:#fff;
  box-shadow:none!important;
}
body[data-mode="client"] .content th,
body[data-mode="client"] table thead th{
  padding:11px 13px!important;
  border-bottom:1px solid var(--client-line)!important;
  background:#F7F9FB!important;
  color:#596579!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.35;
  letter-spacing:.025em!important;
  text-transform:none;
}
body[data-mode="client"] .content td,
body[data-mode="client"] table td{
  padding:12px 13px!important;
  color:var(--client-copy);
  font-size:14px!important;
  line-height:1.45!important;
}
body[data-mode="client"] .content tbody tr:hover td{background:#F8FAFC}
body[data-mode="client"] .badge,
body[data-mode="client"] .tr-badge,
body[data-mode="client"] .clo-status{
  border-radius:5px!important;
  font-size:12.5px!important;
  font-weight:650;
}
body[data-mode="client"] .placeholder,
body[data-mode="client"] .et-empty,
body[data-mode="client"] .docs-empty{
  padding:28px 22px!important;
  border:1px dashed #C9D1DC!important;
  border-radius:8px!important;
  background:#FAFBFC!important;
  color:var(--client-muted)!important;
  font-size:14px!important;
  line-height:1.5;
  text-align:center;
}

/* Overview: operational dashboard, not a marketing card wall. */
body[data-mode="client"] .clo-head{margin-bottom:16px}
body[data-mode="client"] .clo-status{
  gap:8px;
  margin-top:9px;
  padding:7px 10px;
  border:1px solid #D7DEE8;
  background:#F8FAFC!important;
  color:var(--client-copy)!important;
}
body[data-mode="client"] .clo-status.ok{border-color:#B7DFC9;background:#F3FAF6!important;color:#176B43!important}
body[data-mode="client"] .clo-status.warn{border-color:#E2C2C4;background:#FFF8F8!important;color:#8D2026!important}
body[data-mode="client"] .clo-cta{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px;
  margin-bottom:18px;
}
body[data-mode="client"] .clo-cta-btn{
  min-height:72px;
  padding:13px 14px!important;
  gap:11px;
  border:1px solid var(--client-line)!important;
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:none!important;
  transform:none!important;
}
body[data-mode="client"] .clo-cta-btn:hover{border-color:#9AA8BA!important;background:#F8FAFC!important}
body[data-mode="client"] .clo-cta-btn.primary{border-color:var(--client-navy)!important;background:var(--client-navy)!important}
body[data-mode="client"] .clo-cta-ic{
  width:36px;
  height:36px;
  border-radius:6px;
  background:#EEF2F6;
}
body[data-mode="client"] .clo-cta-ic svg{width:19px;height:19px}
body[data-mode="client"] .clo-cta-tx b{font-size:14px}
body[data-mode="client"] .clo-cta-tx small{margin-top:2px;font-size:12.5px}
body[data-mode="client"] .onb-welcome{
  margin-bottom:14px;
  padding:14px 16px;
  border:1px solid var(--client-line);
  border-left:3px solid var(--client-navy);
  border-radius:7px!important;
  background:#F8FAFC!important;
  color:var(--client-copy)!important;
}
body[data-mode="client"] .onb-welcome b{margin-bottom:3px;color:var(--client-ink);font-size:15px}
body[data-mode="client"] .onb-welcome p{color:var(--client-copy);font-size:13.5px;opacity:1}
body[data-mode="client"] .onb{
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:8px!important;
  background:#fff!important;
}
body[data-mode="client"] .onb-h{margin-bottom:10px;color:var(--client-ink);font-size:15px}
body[data-mode="client"] .onb-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
body[data-mode="client"] .onb-step{
  min-width:0;
  padding:8px 14px;
  border:0!important;
  border-left:1px solid var(--client-line-soft)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-mode="client"] .onb-step:first-child{border-left:0!important;padding-left:0}
body[data-mode="client"] .onb-step:last-child{padding-right:0}
body[data-mode="client"] .onb-step.wait,
body[data-mode="client"] .onb-step.done{opacity:1}
body[data-mode="client"] .onb-n{
  width:25px;
  height:25px;
  border-radius:5px;
  background:#DFE6EF;
  color:var(--client-navy);
}
body[data-mode="client"] .onb-step.done .onb-n{background:#DCEFE5;color:#176B43}
body[data-mode="client"] .onb-tx b{font-size:13.5px}
body[data-mode="client"] .onb-tx small{font-size:12.5px}
body[data-mode="client"] .client-command-center{
  margin:16px 0 22px;
  padding:17px 18px;
}
body[data-mode="client"] .client-command-head{margin-bottom:12px}
body[data-mode="client"] .client-command-head h3{font-size:15px}
body[data-mode="client"] .client-readiness-link{min-height:36px;color:#245B9F;font-size:13px}
body[data-mode="client"] .client-summary-strip{border-radius:7px;background:#F8FAFC}
body[data-mode="client"] .client-summary-kpi{
  min-height:76px;
  padding:12px 14px;
}
body[data-mode="client"] .client-summary-kpi b{font-size:23px;font-weight:700}
body[data-mode="client"] .client-summary-kpi span{font-size:12.5px}
body[data-mode="client"] .client-deadlines{margin-top:15px;padding-top:15px}
body[data-mode="client"] .rb-f{
  min-height:36px;
  padding:7px 11px;
  border-radius:6px;
  font-size:13px;
}
body[data-mode="client"] .rb-f.active{background:var(--client-navy);border-color:var(--client-navy)}
body[data-mode="client"] .at-card{
  min-height:52px;
  border-radius:6px!important;
}
body[data-mode="client"] .at-main b{font-size:14px}
body[data-mode="client"] .at-main small,
body[data-mode="client"] .at-note{font-size:12.5px}

/* Occupational safety is one module with four explicit work areas. */
body[data-mode="client"] .suot-regulatory-note{
  margin:0 0 14px;
  border:1px solid #E6D4A4;
  border-left:3px solid #B7791F;
  border-radius:7px;
  background:#FFFCF4;
}
body[data-mode="client"] .suot-regulatory-note summary{
  position:relative;
  padding:11px 38px 11px 13px;
  color:#6E4B12;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
body[data-mode="client"] .suot-regulatory-note summary::-webkit-details-marker{display:none}
body[data-mode="client"] .suot-regulatory-note summary::after{
  content:"⌄";
  position:absolute;
  right:14px;
  top:9px;
  font-size:18px;
  font-weight:500;
}
body[data-mode="client"] .suot-regulatory-note[open] summary::after{transform:rotate(180deg)}
body[data-mode="client"] .suot-regulatory-note p{
  margin:0;
  padding:0 13px 12px;
  color:#604817;
  font-size:13px;
  line-height:1.5;
}
body[data-mode="client"] .suot-section-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:0 0 18px;
  border:1px solid var(--client-line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}
body[data-mode="client"] .suot-section-nav [role="tab"]{
  position:relative;
  min-width:0;
  min-height:62px;
  padding:11px 13px;
  border:0;
  border-right:1px solid var(--client-line-soft);
  border-radius:0!important;
  background:#fff;
  color:var(--client-copy);
  text-align:left;
}
body[data-mode="client"] .suot-section-nav [role="tab"]:last-child{border-right:0}
body[data-mode="client"] .suot-section-nav [role="tab"]::after{
  content:"";
  position:absolute;
  right:12px;
  bottom:0;
  left:12px;
  height:2px;
  background:transparent;
}
body[data-mode="client"] .suot-section-nav [role="tab"].active{background:#F8FAFC;color:var(--client-navy)}
body[data-mode="client"] .suot-section-nav [role="tab"].active::after{background:var(--client-red)}
body[data-mode="client"] .suot-tab-title{display:block;font-size:14px;font-weight:700;line-height:1.25}
body[data-mode="client"] .suot-section-nav small{display:block;margin-top:3px;color:var(--client-muted);font-size:12px}
body[data-mode="client"] #su-body{min-width:0}
body[data-mode="client"] .su-grid{grid-template-columns:320px minmax(0,1fr);gap:12px}
body[data-mode="client"] .su-card{padding:16px 18px}
body[data-mode="client"] .su-card-h{
  margin-bottom:13px;
  color:var(--client-ink);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
body[data-mode="client"] .su-legend div,
body[data-mode="client"] .su-kind-t,
body[data-mode="client"] .su-prob-t{font-size:13.5px}
body[data-mode="client"] .su-prob{
  padding:10px 11px;
  border-radius:7px;
}
body[data-mode="client"] .su-prob-n{width:32px;height:32px;border-radius:6px}
body[data-mode="client"] .su-actions{margin-bottom:12px}
body[data-mode="client"] #su-brief-entry-form{
  width:100%;
  max-width:980px!important;
  padding:0!important;
  overflow:hidden;
}
body[data-mode="client"] .su-form-head{
  padding:16px 18px;
  border-bottom:1px solid var(--client-line);
  background:#F8FAFC;
}
body[data-mode="client"] .su-form-head b{display:block;color:var(--client-ink);font-size:16px}
body[data-mode="client"] .su-form-head span{display:block;margin-top:3px;color:var(--client-muted);font-size:13px}
body[data-mode="client"] .su-form-section{padding:17px 18px;border-bottom:1px solid var(--client-line-soft)}
body[data-mode="client"] .su-form-section:last-of-type{border-bottom:0}
body[data-mode="client"] .su-form-section-title{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:13px;
}
body[data-mode="client"] .su-form-section-title>span{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:none;
  border-radius:5px;
  background:#E8EDF4;
  color:var(--client-navy);
  font-size:12px;
  font-weight:800;
}
body[data-mode="client"] .su-form-section-title b{display:block;color:var(--client-ink);font-size:14px}
body[data-mode="client"] .su-form-section-title small{display:block;margin-top:1px;color:var(--client-muted)}
body[data-mode="client"] .su-kinds-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body[data-mode="client"] .su-kpick{
  min-height:66px;
  padding:10px 11px;
  border-radius:7px;
  background:#fff;
}
body[data-mode="client"] .su-kpick:has(input:checked){border-color:#6881A5;background:#F5F8FC}
body[data-mode="client"] .su-kpick b{font-size:13.5px}
body[data-mode="client"] .su-kpick small{font-size:12.5px;color:var(--client-muted)}
body[data-mode="client"] [hidden]{display:none!important}
body[data-mode="client"] .su-emps{max-height:300px;border-radius:7px;padding:6px}
body[data-mode="client"] .su-emp,
body[data-mode="client"] .su-emp-all{min-height:40px;padding:8px 9px;border-radius:5px;font-size:13.5px}
body[data-mode="client"] .su-emp small{font-size:12.5px;color:var(--client-muted)}
body[data-mode="client"] .su-confirm{
  margin:0;
  padding:12px 13px;
  border-radius:7px;
  background:#F8FAFC;
}
body[data-mode="client"] .su-confirm b{font-size:13.5px}
body[data-mode="client"] .su-confirm small{font-size:12.5px}
body[data-mode="client"] .su-form-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:14px 18px 16px;
  border-top:1px solid var(--client-line);
  background:#fff;
}
body[data-mode="client"] .su-form-actions [role="status"]{min-height:20px;margin-left:4px;font-size:13px}
body[data-mode="client"] .cmp-name{border-bottom:1px dotted #7C8CA3}
body[data-mode="client"] .cmp-det>td{background:#F8FAFC}

/* Training and other high-frequency workspaces */
body[data-mode="client"] .tr-smart{
  padding:10px 12px;
  border-radius:8px;
  background:#F7F9FB;
}
body[data-mode="client"] .tr-modes{padding:2px;border-radius:7px;background:#E8EDF3}
body[data-mode="client"] .tr-mode{min-height:36px;padding:7px 12px;border-radius:5px;font-size:13px}
body[data-mode="client"] .tr-mode.on{box-shadow:none;border:1px solid #CFD6DF}
body[data-mode="client"] .tr-grid{
  grid-template-columns:minmax(250px,.86fr) minmax(330px,1.14fr) minmax(290px,.9fr)!important;
  gap:12px!important;
}
body[data-mode="client"] .tr-col{padding:12px!important}
body[data-mode="client"] .tr-col-h{
  padding:2px 3px 10px;
  margin-bottom:8px;
  border-bottom:1px solid var(--client-line-soft);
  color:#596579;
  font-size:12px;
  letter-spacing:.035em;
}
body[data-mode="client"] .tr-search{height:40px;border-radius:7px;font-size:14px}
body[data-mode="client"] .tr-row,
body[data-mode="client"] .tr-person{min-height:44px;padding:8px 9px;border-radius:6px}
body[data-mode="client"] .tr-row-t b{font-size:14px}
body[data-mode="client"] .tr-row-t small,
body[data-mode="client"] .tr-row-t em,
body[data-mode="client"] .tr-citem-t small,
body[data-mode="client"] .tr-citem-t em{font-size:12.5px}
body[data-mode="client"] .tr-person.on{background:var(--client-navy);border-color:var(--client-navy)}
body[data-mode="client"] .tr-cemp{border-radius:7px}
body[data-mode="client"] .tr-citem{border-radius:5px}
body[data-mode="client"] .tr-total-v{font-size:18px}
body[data-mode="client"] .emp-mass,
body[data-mode="client"] .et-controls,
body[data-mode="client"] .et-selection{border-radius:7px}

/* Help and support */
body[data-mode="client"] .help-support{
  margin-top:16px;
  padding:18px 20px;
  gap:20px;
  background:#fff!important;
}
body[data-mode="client"] .help-support h3{margin:3px 0 5px;color:var(--client-ink);font-size:17px}
body[data-mode="client"] .help-support p{font-size:13.5px}
body[data-mode="client"] .help-eyebrow{color:var(--client-red);font-size:11.5px;letter-spacing:.08em}
body[data-mode="client"] .help-quick{gap:10px;margin-top:14px}
body[data-mode="client"] .help-quick-card{
  min-height:88px;
  padding:13px 14px;
  transform:none!important;
}
body[data-mode="client"] .help-quick-card:hover{border-color:#98A6B8!important;box-shadow:none!important}
body[data-mode="client"] .help-quick-card b{font-size:13.5px}
body[data-mode="client"] .help-quick-card span{margin-top:5px;font-size:12.5px}
body[data-mode="client"] .help-faq-title{margin-top:24px}
body[data-mode="client"] .help-faq summary{padding:15px 38px 15px 0;color:var(--client-ink);font-size:14px}
body[data-mode="client"] .help-faq p{font-size:13.5px}

/* Responsive shell and content */
@media (max-width:1450px) and (min-width:1101px){
  body[data-mode="client"] .content{padding:24px 24px 40px!important}
  body[data-mode="client"] .tr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  body[data-mode="client"] .tr-cart{grid-column:1/-1;position:static}
  body[data-mode="client"] .client-summary-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-mode="client"] .client-summary-kpi:nth-child(3n){border-right:0}
  body[data-mode="client"] .client-summary-kpi:nth-child(n+4){border-top:1px solid var(--client-line-soft)}
}
@media (min-width:1101px){
  body[data-mode="client"] .nav-burger{display:none!important}
}
@media (max-width:1100px){
  body[data-mode="client"] .main{width:100%;min-width:0}
  body[data-mode="client"] .side{
    position:fixed!important;
    top:0!important;
    left:0!important;
    z-index:70!important;
    width:min(86vw,304px)!important;
    height:100dvh!important;
    overflow-y:auto!important;
    transform:translateX(-100%)!important;
    transition:transform .2s ease!important;
    box-shadow:none!important;
  }
  body[data-mode="client"].nav-open .side{transform:translateX(0)!important;box-shadow:18px 0 44px rgba(16,24,40,.2)!important}
  body[data-mode="client"] .side .brand-full{display:inline!important}
  body[data-mode="client"] .side .brand-mini{display:none!important}
  body[data-mode="client"] .nav-grp{display:flex!important}
  body[data-mode="client"] .nav a{justify-content:flex-start!important;min-height:44px!important}
  body[data-mode="client"] .navlbl{display:inline!important}
  body[data-mode="client"] .nav-close{
    display:flex!important;
    position:absolute;
    top:12px;
    right:12px;
    width:44px;
    height:44px;
    min-height:44px!important;
    align-items:center;
    justify-content:center;
    border:1px solid var(--client-line)!important;
    border-radius:7px!important;
    background:#F3F5F8!important;
    color:var(--client-navy)!important;
  }
  body[data-mode="client"] .nav-burger{
    display:inline-flex!important;
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid var(--client-line)!important;
    border-radius:7px!important;
    background:#fff!important;
    color:var(--client-navy)!important;
  }
  body[data-mode="client"] .nav-backdrop{display:none!important}
  body[data-mode="client"].nav-open .nav-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:65!important;
    background:rgba(15,28,48,.46)!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  body[data-mode="client"] .topbar{padding:0 18px!important}
  body[data-mode="client"] .content{padding:24px 20px 38px!important}
  body[data-mode="client"] .client-company-context{max-width:220px}
  body[data-mode="client"] .su-grid{grid-template-columns:1fr}
  body[data-mode="client"] .client-summary-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-mode="client"] .client-summary-kpi:nth-child(3n){border-right:0}
  body[data-mode="client"] .client-summary-kpi:nth-child(n+4){border-top:1px solid var(--client-line-soft)}
  body[data-mode="client"] .help-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-mode="client"] .tr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  body[data-mode="client"] .tr-cart{grid-column:1/-1;position:static}
}
@media (max-width:820px){
  body[data-mode="client"] input,
  body[data-mode="client"] select,
  body[data-mode="client"] textarea,
  body[data-mode="client"] .field input,
  body[data-mode="client"] .field select,
  body[data-mode="client"] .field textarea{font-size:16px!important}
  body[data-mode="client"] .search input{
    min-height:44px!important;
    height:44px!important;
    font-size:16px!important;
  }
  body[data-mode="client"] .btn-primary,
  body[data-mode="client"] .btn-ghost,
  body[data-mode="client"] .btn-sm{min-height:44px!important}
  body[data-mode="client"] .client-company-context{display:none}
  body[data-mode="client"] h2.page,
  body[data-mode="client"] .page{font-size:25px!important}
  body[data-mode="client"] .content{padding:21px 16px 36px!important}
  body[data-mode="client"] .clo-cta{grid-template-columns:1fr!important}
  body[data-mode="client"] .tr-grid{grid-template-columns:1fr!important}
  body[data-mode="client"] .tr-cart{grid-column:auto}
  body[data-mode="client"] .onb-steps{grid-template-columns:1fr}
  body[data-mode="client"] .onb-step,
  body[data-mode="client"] .onb-step:first-child,
  body[data-mode="client"] .onb-step:last-child{
    padding:10px 0;
    border:0!important;
    border-top:1px solid var(--client-line-soft)!important;
  }
  body[data-mode="client"] .onb-step:first-child{border-top:0!important}
  body[data-mode="client"] .suot-section-nav [role="tab"]{padding:10px;min-height:60px}
}
@media (max-width:720px){
  body[data-mode="client"]{font-size:15px}
  body[data-mode="client"] .topbar{
    height:auto!important;
    min-height:60px!important;
    padding:8px 12px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:8px!important;
  }
  body[data-mode="client"] .topbar .search{
    display:flex!important;
    order:5!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    min-width:100%!important;
  }
  body[data-mode="client"] .client-company-context{display:none}
  body[data-mode="client"] .userbox{margin-left:auto}
  body[data-mode="client"] .content{padding:18px 14px 34px!important}
  body[data-mode="client"] h2.page,
  body[data-mode="client"] .page{font-size:24px!important;line-height:1.25!important}
  body[data-mode="client"] .sub{font-size:14px!important}
  body[data-mode="client"] .toolbar{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:16px}
  body[data-mode="client"] .toolbar>div:last-child{width:100%;align-items:stretch}
  body[data-mode="client"] .toolbar>div:last-child>.btn-sm,
  body[data-mode="client"] .toolbar>div:last-child>a.btn-sm{flex:1 1 160px;text-align:center}
  body[data-mode="client"] .row2{grid-template-columns:1fr!important}
  body[data-mode="client"] .content table{
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  body[data-mode="client"] .content table tr{
    border-radius:7px!important;
    box-shadow:none!important;
  }
  body[data-mode="client"] .content table td{padding:4px 0!important}
  body[data-mode="client"] .client-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-mode="client"] .client-summary-kpi,
  body[data-mode="client"] .client-summary-kpi:nth-child(3n){border-right:1px solid var(--client-line-soft)}
  body[data-mode="client"] .client-summary-kpi:nth-child(2n){border-right:0}
  body[data-mode="client"] .client-summary-kpi:nth-child(n+3){border-top:1px solid var(--client-line-soft)}
  body[data-mode="client"] .client-summary-kpi b{font-size:21px;overflow-wrap:anywhere}
  body[data-mode="client"] .client-deadlines{grid-template-columns:1fr;gap:9px}
  body[data-mode="client"] .rb-head{align-items:flex-start}
  body[data-mode="client"] .rb-filters{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
    scrollbar-width:thin;
  }
  body[data-mode="client"] .rb-f{flex:none}
  body[data-mode="client"] .suot-section-nav{
    display:flex;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }
  body[data-mode="client"] .suot-section-nav [role="tab"]{
    flex:0 0 166px;
    min-width:166px;
    border-right:1px solid var(--client-line-soft);
  }
  body[data-mode="client"] .su-form-section,
  body[data-mode="client"] .su-form-head{padding:14px}
  body[data-mode="client"] .su-kinds-pick{grid-template-columns:1fr}
  body[data-mode="client"] .su-form-actions{align-items:stretch;padding:12px 14px 14px}
  body[data-mode="client"] .su-form-actions button{flex:1 1 150px}
  body[data-mode="client"] .su-form-actions [role="status"]{width:100%;margin-left:0}
  body[data-mode="client"] .su-actions{align-items:stretch}
  body[data-mode="client"] .su-actions .btn-primary,
  body[data-mode="client"] .su-actions .btn-ghost{flex:1 1 180px;width:auto}
  body[data-mode="client"] .help-support{align-items:flex-start;flex-direction:column;padding:16px}
  body[data-mode="client"] .help-support>a{width:100%;text-align:center}
  body[data-mode="client"] .help-quick{grid-template-columns:1fr}
  body[data-mode="client"] .help-quick-card{min-height:76px}
  body[data-mode="client"] .form-card{padding:14px}
  body[data-mode="client"] .drawer{width:100vw;max-width:100vw}
  body[data-mode="client"] .drawer-head,
  body[data-mode="client"] .drawer-body{padding-left:15px;padding-right:15px}
}
@media (max-width:520px){
  body[data-mode="client"] .client-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-mode="client"] .client-kpi-grid>.tile:last-child:nth-child(odd){grid-column:1/-1}
  body[data-mode="client"] .client-kpi-grid .tile{padding:13px}
  body[data-mode="client"] .client-kpi-grid .tile .num{font-size:20px!important}
  body[data-mode="client"] .client-kpi-grid .tile .foot{font-size:12px}
  body[data-mode="client"] .nbell-dd{right:8px;left:8px;width:auto}
  body[data-mode="client"] .toasts{right:10px;bottom:10px;left:10px}
  body[data-mode="client"] .toast{width:100%;max-width:none;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  body[data-mode="client"] *,
  body[data-mode="client"] *::before,
  body[data-mode="client"] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}