
.payout-role{ font-weight:700; color:var(--text-heading); }
.payout-num{ text-align:center; font-variant-numeric:tabular-nums; }
.payout-reps{ min-width:90px; }
.payout-rep-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-right:6px;
  font-size:11px;
  color:var(--text-muted);
  cursor:pointer;
}
.payout-table input[type="checkbox"]{
  display:inline-block;
  vertical-align:middle;
}
.payout-count-btn{
  min-width:2.2em;
  padding:4px 8px !important;
  font-variant-numeric:tabular-nums;
}
.payout-breakdown-summary{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-card-2);
  border:1px solid var(--border);
  font-size:13px;
  color:var(--text-body);
}
.payout-breakdown-block{ margin-top:16px; }
.payout-breakdown-block h4{
  margin:0 0 8px;
  font-size:13px;
  color:var(--text-heading);
}
.payout-muted{ color:var(--text-faint); }
.payout-row-off{ opacity:.45; }
.payout-table tbody tr.payout-tint-chief td{ background:rgba(40,90,180,.14); }
.payout-table tbody tr.payout-tint-dep td{ background:rgba(130,70,190,.14); }
.payout-table tbody tr.payout-tint-senior td{ background:rgba(190,150,40,.14); }
.payout-table tbody tr.payout-tint-helper td{ background:rgba(190,70,90,.12); }
.payout-table tbody tr.payout-tint-mini td{ background:rgba(50,150,90,.14); }
.payout-table tbody tr.payout-tint-default td{ background:transparent; }
.payout-table tbody tr:hover td{ filter:brightness(1.08); }

@media (max-width:640px){
  .devent-card-actions{ width:100%; }
  .devent-card-actions .ui-select{ flex:1 1 auto; max-width:none; }
  .site-header-inner{ justify-content:center; text-align:center; }
  .site-nav{ gap:16px; }
  .site-hero{ padding:52px 18px 40px; }
  .site-hero-home{ min-height:min(70vh, 640px); padding:72px 18px 48px; align-items:center; }
  .site-hero h1, .site-hero-brand{ font-size:34px; }
  .site-home{ padding:4px 18px 40px; gap:34px; }
  .site-offer-list li{ grid-template-columns:40px minmax(0,1fr); gap:10px; padding:14px 0; }
  .site-section{ padding:30px 18px 10px; }
  .qform{ padding:18px 16px 48px; }
  .qform-card{ padding:18px 18px; }
}
