/* Team Spartain ? recruitment + app chrome */

:root {
  --accent: #f4845f;
  --accent-soft: rgba(244, 132, 95, 0.16);
  --accent-deep: #e06a42;
  --charcoal: #343a40;
  --muted: #8a9096;
  --off: #f9f9f9;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(52, 58, 64, 0.08);
  --radius: 32px;
  --radius-sm: 18px;
  --font: "DM Sans", system-ui, sans-serif;
  --navy: #1e3a6e;
  --navy-2: #2f5aa0;
  --gold: #ffd24d;
  --earn: #0f766e;
  --sales: #4338ca;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--off);
  min-height: 100vh;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

/* Turning Point brand logo ? full on desktop, TP mark on mobile */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}
.brand-logo img {
  width: auto;
  max-width: none;
  object-fit: contain;
}
.brand-logo picture {
  display: contents;
}
.brand-logo__full {
  height: clamp(48px, 7vw, 64px);
  display: block;
}
.brand-logo__mark {
  display: none;
  height: clamp(44px, 10vw, 52px);
}
.brand-logo--dash .brand-logo__full {
  height: clamp(40px, 5.5vw, 52px);
}
.brand-logo--dash .brand-logo__mark {
  height: clamp(38px, 9vw, 46px);
}
.brand-logo--foot .brand-logo__full {
  height: clamp(44px, 6vw, 56px);
}
.brand-logo--foot .brand-logo__mark {
  height: clamp(40px, 9vw, 48px);
}
.brand-logo--login {
  display: flex;
  justify-content: center;
  margin: 0 auto 18px;
}
.brand-logo--login .brand-logo__full {
  height: clamp(44px, 9vw, 56px);
}
.brand-logo--login .brand-logo__mark {
  height: clamp(42px, 11vw, 50px);
}
@media (max-width: 640px) {
  .brand-logo__full { display: none !important; }
  .brand-logo__mark { display: block !important; }
}

/* Chrome */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(145deg, var(--navy), var(--navy-2));
  flex-shrink: 0;
}

.btn, .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid #e6e8eb;
  background: var(--off);
  color: var(--charcoal);
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.btn[hidden],
.pill[hidden],
.nav-pills[hidden],
.nav-pills a[hidden],
.nav-pills span[hidden],
.dash-menu a[hidden],
.dash-menu span[hidden],
details[hidden],
.cfm-tool-group [hidden] {
  display: none !important;
}

.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(244, 132, 95, 0.28);
}
.btn.primary:hover { background: var(--accent-deep); }
.btn.ghost { background: transparent; }
.btn.navy {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn.block { width: 100%; }
.btn.lg { padding: 14px 26px; font-size: 1.02rem; }

.lang-select {
  border: 1px solid #e1e4e8;
  border-radius: 999px;
  padding: 8px 36px 8px 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234b5563' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  min-width: 132px;
  max-width: 100%;
}
.lang-dd { display: inline-flex; flex-shrink: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.muted { color: var(--muted); }
.hidden { display: none !important; }
.text-center { text-align: center; }

/* Landing ? WORK. EARN. GROW. */
body.lp {
  --green: #22c55e;
  --green-d: #16a34a;
  --blue: #2563eb;
  --blue-d: #1d4ed8;
  --purple: #7c3aed;
  --pink: #ec4899;
  --gold: #f59e0b;
  --ink: #111827;
  --navy-bar: #1b3358;
  background: #fff;
  color: var(--ink);
  font-family: "Poppins", "Noto Sans Malayalam", var(--font);
}

html[lang="ml"] body.lp,
html[lang="ml"] body.lp button,
html[lang="ml"] body.lp input,
html[lang="ml"] body.lp select {
  font-family: "Noto Sans Malayalam", "Poppins", var(--font);
}

.c-purple { color: var(--purple); }
.c-blue { color: var(--blue); }

.lp-top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-mark { width: 52px; height: 44px; flex-shrink: 0; }
.logo strong {
  display: block;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  font-weight: 800;
}
.logo small {
  display: block;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 500;
}
.logo.mini .logo-mark { width: 40px; height: 34px; }

.lp-top .brand-logo {
  flex: 0 0 auto;
}
.lp-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lp-login-btn {
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 700;
}

.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe566 0%, #ffd24d 45%, #f5b800 100%);
  border: 1px solid #e6a800;
  color: #111827;
  font-size: clamp(0.82rem, 2.2vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  max-width: calc(100% - 24px);
  box-shadow: 0 4px 18px rgba(245, 184, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.lp-wfh-band {
  display: flex;
  justify-content: center;
  padding: 4px 24px 14px;
}

.lp-hero-art {
  align-self: center;
}

.lp-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px 28px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 20px;
  align-items: center;
}
.lp-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.lp-hero h1 span { display: block; }
.lp-lead {
  margin: 0 0 22px;
  color: #4b5563;
  font-size: 1.05rem;
  max-width: 36ch;
}

.perk-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  --perk-icon: clamp(44px, 2.8vw + 36px, 56px);
}
.perk-row li {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
}
.perk-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.perk-amt {
  font-weight: 800;
  font-size: calc(var(--perk-icon) * 0.44);
  line-height: 1.1;
  color: #111827;
}
.perk-lbl {
  font-weight: 600;
  font-size: calc(var(--perk-icon) * 0.24);
  line-height: 1.25;
  color: #4b5563;
}
.perk-ico {
  width: var(--perk-icon);
  height: var(--perk-icon);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
}
.perk-ico svg { width: 46%; height: 46%; }
.perk-ico.green { background: var(--green); }
.perk-ico.blue { background: var(--blue); }
.perk-ico.gold { background: var(--gold); }
.perk-ico.pink { background: var(--pink); }

.lp-hero-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.earn-strip {
  margin: 8px 0 8px;
  padding: 18px 28px;
  background: linear-gradient(90deg, #6d28d9 0%, #c026d3 42%, #f97316 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: clamp(0.85rem, 2vw, 1.15rem);
}
.earn-strip p { margin: 0; }
.earn-strip strong { font-size: 1.15em; }
.strip-orb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--pink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.strip-orb svg { width: 26px; height: 26px; }

.lp-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 42px 24px;
}
.lp-h2 {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 28px;
}

/* Landing: approximate earnings calculator */
.earn-calc-section {
  padding-top: 28px;
  padding-bottom: 36px;
}
.earn-calc-title {
  margin-bottom: 22px;
}
.earn-calc-wrap {
  max-width: 1120px;
  margin: 0 auto;
}
.earn-calc-role {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.earn-calc-role button {
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.earn-calc-role button.active,
.earn-calc-role button[aria-selected="true"] {
  border-color: var(--green);
  background: #ecfdf5;
  color: var(--green-d);
}
.earn-calc-wrap.calc-sales .earn-calc-role button.active,
.earn-calc-wrap.calc-sales .earn-calc-role button[aria-selected="true"] {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #6d28d9;
}
.earn-calc-slider {
  margin-bottom: 20px;
}
.earn-calc-wrap .wallet-slider-head label {
  color: var(--green-d);
}
.earn-calc-wrap.calc-sales .wallet-slider-head label,
.earn-calc-wrap.calc-sales .wallet-slider-value {
  color: #7c3aed;
}
.earn-calc-wrap.calc-sales .wallet-range {
  background: linear-gradient(90deg, #7c3aed 0 var(--fill), #f3e8ff var(--fill) 100%);
}
.earn-calc-wrap.calc-sales .wallet-range::-webkit-slider-thumb {
  border-color: #7c3aed;
}
.earn-calc-wrap.calc-sales .wallet-range::-moz-range-thumb {
  border-color: #7c3aed;
}
.earn-calc-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.earn-calc-block {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
  padding: 16px 16px 14px;
  text-align: left;
  min-width: 0;
}
.earn-calc-block h3 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
}
.earn-calc-caption--sub {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.earn-calc-sales-only { display: none; }
.earn-calc-wrap.calc-sales .earn-calc-tele-only { display: none; }
.earn-calc-wrap.calc-sales .earn-calc-sales-only { display: block; }
.earn-calc-summary li.total .earn-calc-val {
  color: #7c3aed;
}
.earn-calc-own-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 2px solid #e5e7eb;
  font-weight: 800;
  font-size: 0.92rem;
  color: #374151;
  text-align: center;
}
.earn-calc-sales-only .earn-calc-earn-list {
  margin-top: 10px;
  margin-bottom: 0;
}
.earn-calc-own-total strong {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
}
.earn-calc-caption {
  margin: 0 0 12px;
  color: #6b7280;
  font-size: 0.88rem;
}
.earn-calc-caption strong {
  color: var(--green-d);
  font-weight: 800;
}
.earn-calc-wrap.calc-sales .earn-calc-caption strong {
  color: #7c3aed;
}
.earn-calc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.earn-calc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.82rem;
}
.earn-calc-list li.total {
  border-bottom: none;
  padding-top: 12px;
  font-weight: 800;
}
.earn-calc-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #374151;
  font-weight: 600;
}
.earn-calc-val {
  font-weight: 800;
  color: #111827;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.earn-calc-val .pct {
  font-weight: 600;
  font-size: 0.82em;
  color: #94a3b8;
}
.earn-calc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.earn-calc-dot.green { background: #16a34a; }
.earn-calc-dot.yellow { background: #eab308; }
.earn-calc-dot.orange { background: #f97316; }
.earn-calc-dot.red { background: #ef4444; }
.earn-calc-qual {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.earn-calc-qual.hot { background: linear-gradient(135deg, #ef4444, #f97316); }
.earn-calc-qual.warm { background: #f97316; }
.earn-calc-qual.cold { background: #3b82f6; }
.earn-calc-earn-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.earn-calc-earn-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}
.earn-calc-earn-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.earn-calc-earn-label {
  font-weight: 800;
  color: #111827;
  font-size: 0.86rem;
}
.earn-calc-earn-detail {
  font-size: 0.76rem;
  color: #6b7280;
  font-weight: 600;
}
.earn-calc-earn-amt {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--green-d);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.earn-calc-wrap.calc-sales .earn-calc-earn-amt,
.earn-calc-wrap.calc-sales .earn-calc-total-row strong {
  color: #7c3aed;
}
.earn-calc-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0 8px;
  border-top: 2px solid #e5e7eb;
  font-weight: 800;
  font-size: 0.92rem;
}
.earn-calc-total-row strong {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--green-d);
  font-variant-numeric: tabular-nums;
}
.earn-calc-note {
  margin-top: 16px;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  text-align: left;
}
.earn-calc-note-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.earn-calc-note-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #64748b;
  font-style: italic;
}
@media (min-width: 900px) {
  .earn-calc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
@media (max-width: 899px) and (min-width: 560px) {
  .earn-calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .earn-calc-earnings {
    grid-column: 1 / -1;
  }
}

.opp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.opp-card {
  background: #fff;
  border-radius: 28px;
  padding: 26px 24px 22px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
}
.opp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.opp-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.opp-ico svg { width: 22px; height: 22px; }
.opp-card.tele {
  border: 1px solid rgba(0, 122, 61, 0.14);
  background: linear-gradient(180deg, #ffffff 70%, #fffbeb 100%);
}
.opp-card.tele .opp-ico {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.35);
}
.opp-card.sales {
  border: 1px solid rgba(124, 58, 237, 0.14);
  background: linear-gradient(180deg, #ffffff 70%, #fdf4ff 100%);
}
.opp-card.sales .opp-ico {
  background: linear-gradient(145deg, #7c3aed, #d946ef);
  box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.22);
}
.opp-card h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.opp-card.tele h3 { color: var(--green-d); }
.opp-card.sales h3 { color: #7c3aed; }
.opp-card > p {
  margin: 0 0 14px;
  color: #6b7280;
  font-size: 0.95rem;
}
.earn-with {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.opp-card.tele .earn-with { color: var(--green-d); }
.opp-card.sales .earn-with { color: #7c3aed; }
.opp-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.opp-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
}
.opp-list li::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.opp-card.tele .opp-list li::before { background-color: var(--green); }
.opp-card.tele .opp-list li:nth-child(even)::before {
  background-color: #ffcc00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.opp-card.sales .opp-list li::before { background-color: #7c3aed; }
.opp-card.sales .opp-list li:nth-child(even)::before { background-color: #d946ef; }
.opp-illu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: clamp(150px, 26vw, 190px);
  margin: 8px 0 18px;
  overflow: hidden;
}
.opp-illu-wrap picture {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
  z-index: 1;
}
.opp-card.tele .illu-yellow {
  position: absolute;
  z-index: 0;
  width: min(72%, 168px);
  height: min(72%, 168px);
  border-radius: 50%;
  background: #ffcc00;
  box-shadow: 0 6px 18px rgba(255, 204, 0, 0.28);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.opp-illu {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 68%;
  max-height: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}
.opp-card.sales .opp-illu-wrap {
  height: clamp(150px, 26vw, 190px);
}
.opp-card.sales .illu-soft {
  position: absolute;
  z-index: 0;
  width: min(72%, 168px);
  height: min(72%, 168px);
  border-radius: 50%;
  background: linear-gradient(145deg, #ede9fe, #fae8ff);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.12);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.opp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.86rem;
}
.opp-card.tele .opp-btn {
  background: linear-gradient(90deg, #006b3f 0%, #0a8f4d 36%, #c4d82e 72%, #ffcc00 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 107, 63, 0.2);
}
.opp-card.sales .opp-btn,
.opp-btn.sales {
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #d946ef 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
}
.opp-btn .arr {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: inherit;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 800;
}
.opp-card.tele .opp-btn .arr { color: #006b3f; background: #fff; }
.opp-card.sales .opp-btn .arr,
.opp-btn.sales .arr { color: #7c3aed; }
.opp-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.how-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  counter-reset: none;
}
.how-row li {
  text-align: center;
  position: relative;
  padding: 0 10px;
}
.how-row li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 58px;
  right: -12%;
  width: 24%;
  border-top: 2px dotted #cbd5e1;
}
.how-num {
  display: block;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.how-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.how-ico svg { width: 26px; height: 26px; }
.how-ico.person { background: var(--blue); }
.how-ico.doc { background: var(--green); }
.how-ico.gold { background: var(--gold); color: #fff; }
.how-ico.pink { background: var(--pink); }
.how-row strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.how-row p {
  margin: 0;
  color: #6b7280;
  font-size: 0.88rem;
}

.journey-bar {
  background:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0 1px, transparent 2px),
    var(--navy-bar);
  color: #fff;
  padding: 36px 24px;
}
.journey-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.journey-bar h2 {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 800;
}
.journey-bar h2 em {
  font-style: normal;
  color: #93c5fd;
}
.journey-bar p { margin: 0; color: rgba(255,255,255,0.8); }
.journey-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}
.journey-btns .opp-btn { min-width: 240px; }
.journey-btns .opp-btn:first-child {
  background: linear-gradient(90deg, #006b3f 0%, #0a8f4d 40%, #ffcc00 100%);
  color: #fff;
}
.journey-btns .opp-btn:first-child .arr {
  background: #fff;
  color: #006b3f;
}

.site-foot {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 36px;
}
.foot-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 500;
}
.copy {
  text-align: center;
  color: #94a3b8;
  font-size: 0.82rem;
  margin: 18px 0 0;
}
.copy-sub {
  margin-top: 6px;
  font-size: 0.78rem;
  opacity: 0.9;
}

/* Job opportunity pages (Telecaller / Sales) */
body.opp {
  background: #fff;
  color: #1f2937;
  font-family: "Poppins", "Noto Sans Malayalam", var(--font);
  --opp-radius: 18px;
  --opp-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
body.opp.theme-tele {
  --opp: #007a3d;
  --opp-dark: #006b3f;
  --opp-soft: #e8f8ef;
  --opp-tint: #f3fbf6;
  --opp-accent: #ffcc00;
  --opp-accent-text: #1a1a1a;
  --opp-cta: #006b3f;
  --opp-yellow: #ffcc00;
  --opp-lime: #b8e6c4;
}
body.opp.theme-sales {
  --opp: #7c3aed;
  --opp-dark: #6d28d9;
  --opp-soft: #f3e8ff;
  --opp-tint: #faf5ff;
  --opp-accent: #d946ef;
  --opp-accent-text: #fff;
  --opp-cta: #7c3aed;
  --opp-ring: #e9d5ff;
  --opp-ring-2: #f0abfc;
  --opp-magenta: #d946ef;
}

/* Shared opportunity hero: title | art, bonus cards in bottom row */
.opp-hero-block {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 28px;
}
.theme-tele .opp-hero.tele-layout,
.theme-sales .opp-hero.sales-layout {
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "copy art"
    "hl hl";
  gap: 12px 28px;
  align-items: start;
  max-width: none;
  margin: 0;
  padding: 8px 0 4px;
}
.theme-tele .opp-hero.tele-layout .opp-hero-copy,
.theme-sales .opp-hero.sales-layout .opp-hero-copy { grid-area: copy; }
.theme-tele .opp-hero.tele-layout .opp-hero-art,
.theme-sales .opp-hero.sales-layout .opp-hero-art { grid-area: art; align-self: center; }
.theme-tele .opp-hero.tele-layout .hl-row--hero,
.theme-sales .opp-hero.sales-layout .hl-row--hero {
  grid-area: hl;
  width: 100%;
  margin-top: 4px;
}
.hl-row--hero {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.theme-tele .opp-hero-copy .hero-deco {
  display: none;
}
.opp-top .lang-select {
  border-color: #d1d5db;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.opp-top .brand-logo {
  flex: 0 0 auto;
}

/* Sales hero art + rings (layout rules shared above) */
.theme-sales .opp-hero-art.sales-scene {
  min-height: 0;
  overflow: visible;
}
.theme-sales .opp-rings {
  width: min(92%, 480px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 48%, transparent 50%, #e9d5ff 51% 60%, transparent 61%),
    radial-gradient(circle at 50% 48%, #f3e8ff 0 46%, transparent 47%),
    radial-gradient(circle at 72% 28%, #f0abfc 0 16%, transparent 17%),
    radial-gradient(circle at 22% 70%, #c4b5fd 0 10%, transparent 11%);
}
.theme-sales .opp-hero-art.sales-scene img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 12px 20px rgba(124, 58, 237, 0.18));
}
.theme-sales .float-ico {
  background: linear-gradient(145deg, #7c3aed, #d946ef);
  box-shadow: 0 10px 22px rgba(217, 70, 239, 0.28);
}
.theme-sales .float-ico.c {
  display: grid;
  bottom: 22%;
  right: 8%;
  top: auto;
}
.theme-sales .float-ico.a { top: 14%; left: 4%; }
.theme-sales .float-ico.b { top: 12%; right: 2%; }
.theme-sales .earn-flow article:nth-child(odd) .ico {
  background: var(--opp);
  color: #fff;
}
.theme-sales .earn-flow article:nth-child(even) .ico {
  background: var(--opp-magenta);
  color: #fff;
}
.theme-sales .opp-h2 {
  color: var(--opp);
}
.theme-sales .opp-h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #d946ef);
}
.theme-sales .opp-section.tint {
  background: transparent;
}
.theme-sales .opp-section.tint .opp-inner {
  background: linear-gradient(180deg, #faf5ff 0%, #fdf4ff 100%);
  border-radius: 28px;
  padding: 28px 24px 22px;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08);
}
.theme-sales .wallet-card {
  background: linear-gradient(160deg, #7c3aed 0%, #a855f7 55%, #d946ef 100%);
}
.theme-sales .wallet-card .bal-ico {
  width: 28px;
  height: 28px;
  opacity: 0.95;
  flex-shrink: 0;
}
.theme-sales .pay-flow .ico {
  border-color: var(--opp);
  color: var(--opp);
  background: #fff;
}
.theme-sales .salary-card .btn-opp {
  background: linear-gradient(90deg, #7c3aed, #d946ef);
}

.opp-top {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.opp-top .lang-pills button.active {
  background: var(--opp);
  color: #fff;
}

.opp-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px 20px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 12px 28px;
  align-items: center;
}
.opp-hero-copy {
  position: relative;
  z-index: 1;
}
.theme-tele .opp-hero-copy .hero-deco {
  position: absolute;
  inset: -20px -10px auto auto;
  width: 220px;
  height: 220px;
  border-radius: 40px;
  border: 28px solid rgba(0, 122, 61, 0.06);
  pointer-events: none;
  z-index: -1;
}
.opp-hero-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--opp);
  text-transform: uppercase;
}
.opp-hero-copy h1 span { display: block; }
.theme-tele .opp-hero-copy h1 .line-green { color: var(--opp); }
.theme-tele .opp-hero-copy h1 .line-dark { color: #111827; }
.opp-hero-copy .lead {
  margin: 0 0 18px;
  color: #4b5563;
  font-size: 1.02rem;
  max-width: 34ch;
  line-height: 1.45;
}
.hl-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hl-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 14px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.hl-card > div {
  min-width: 0;
}
.hl-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--opp-soft);
  color: var(--opp);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hl-ico svg { width: 20px; height: 20px; }
.hl-card small {
  display: block;
  color: #374151;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hl-card strong {
  display: block;
  color: var(--opp);
  font-size: 1.2rem;
  font-weight: 800;
}
.hl-card .sub {
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 600;
}

.opp-hero-art {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}
/* Full composed scene: yellow circle + person + icons already in the image */
.theme-tele .opp-hero-art.scene {
  min-height: 0;
}
.theme-tele .opp-hero-art.scene img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: none;
  filter: none;
}
.opp-rings {
  position: absolute;
  width: min(92%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 52%, var(--opp-ring, #c4b5fd) 53% 62%, transparent 63%),
    radial-gradient(circle at 50% 50%, var(--opp-soft) 0 48%, transparent 49%),
    radial-gradient(circle at 70% 30%, var(--opp-ring-2, #93c5fd) 0 18%, transparent 19%);
  z-index: 0;
}

.theme-tele .opp-rings,
.theme-tele .opp-bg-yellow,
.theme-tele .opp-bg-wave,
.theme-tele .float-ico { display: none; }

.opp-hero-art img {
  position: relative;
  z-index: 1;
  width: min(88%, 340px);
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.float-ico {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--opp);
  color: #fff;
  box-shadow: var(--opp-shadow);
  display: grid;
  place-items: center;
}
.float-ico svg { width: 22px; height: 22px; }
.float-ico.a { top: 18%; left: 6%; }
.float-ico.b { top: 22%; right: 4%; }
.float-ico.c { display: none; }

/* Alternating green / yellow earn icons on Telecaller */
.theme-tele .earn-flow article:nth-child(even) .ico {
  background: var(--opp-yellow);
  color: #1a1a1a;
}
.theme-tele .earn-flow article:nth-child(odd) .ico {
  background: var(--opp);
  color: #fff;
}

.opp-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px;
}
.opp-section.tint { background: var(--opp-tint); max-width: none; }
.opp-section.tint .opp-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.opp-h2 {
  margin: 0 0 18px;
  display: block;
  width: 100%;
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 800;
  color: var(--opp-dark);
  letter-spacing: 0.02em;
}
.theme-tele .opp-h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--opp), var(--opp-yellow));
}
.opp-section { text-align: center; }
.opp-section .earn-flow,
.opp-section .wallet-grid,
.opp-section .pay-flow { text-align: left; }
.opp-section .opp-inner { text-align: left; }
.opp-section .opp-inner > .opp-h2 { text-align: center; }

.earn-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.earn-flow article {
  background: #fff;
  border-radius: var(--opp-radius);
  box-shadow: var(--opp-shadow);
  padding: 18px 14px;
  text-align: center;
  position: relative;
}
.earn-flow article:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -12px;
  top: 42%;
  color: #cbd5e1;
  font-size: 1.4rem;
  font-weight: 700;
  z-index: 1;
}
.earn-flow .ico {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--opp-soft);
  color: var(--opp);
  display: grid;
  place-items: center;
}
.earn-flow .ico svg { width: 22px; height: 22px; }
.earn-flow h3 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--opp-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.earn-flow p {
  margin: 0;
  color: #6b7280;
  font-size: 0.84rem;
  line-height: 1.4;
}

.wallet-preview { width: 100%; }
.wallet-slider {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--opp-shadow);
  padding: 16px 18px 14px;
  margin: 0 0 16px;
  text-align: left;
}
.wallet-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.wallet-slider-head label {
  margin: 0;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--opp-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wallet-slider-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--opp);
  font-variant-numeric: tabular-nums;
}
.wallet-slider-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
}
.wallet-range {
  --fill: 11.11%;
  width: 100%;
  height: 8px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #007a3d 0 var(--fill), #e8f5e9 var(--fill) 100%);
  outline: none;
  cursor: pointer;
}
.theme-sales .wallet-range {
  background: linear-gradient(90deg, #7c3aed 0 var(--fill), #f3e8ff var(--fill) 100%);
}
.theme-sales .wallet-slider-value { color: #7c3aed; }
.wallet-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--opp);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  cursor: pointer;
}
.theme-sales .wallet-range::-webkit-slider-thumb { border-color: #7c3aed; }
.wallet-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--opp);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  cursor: pointer;
}
.theme-sales .wallet-range::-moz-range-thumb { border-color: #7c3aed; }

.wallet-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.9fr;
  gap: 16px;
  align-items: stretch;
}
.wallet-card {
  background: var(--opp);
  color: #fff;
  border-radius: 22px;
  padding: 22px 20px;
  box-shadow: var(--opp-shadow);
}
.wallet-card .hello {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: 1.05rem;
}
.wallet-card .label {
  opacity: 0.85;
  font-size: 0.82rem;
  font-weight: 500;
}
.wallet-card .bal {
  margin: 4px 0 14px;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wallet-card .avail {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
}
.wallet-card .avail span { opacity: 0.85; font-weight: 500; font-size: 0.85rem; display: block; }
.btn-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  text-decoration: none;
  background: var(--opp-accent);
  color: var(--opp-accent-text);
}
.preview-only {
  cursor: default;
  pointer-events: none;
  user-select: none;
}
body.theme-sales .btn-yellow {
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.18);
}
.break-card, .salary-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--opp-shadow);
  padding: 18px 16px;
}
.break-card h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--opp-dark);
  font-weight: 800;
}
.salary-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
}
.salary-card h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--opp);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.wallet-ico {
  width: 72px;
  margin: 0 0 12px;
}
.wallet-ico svg { width: 100%; height: auto; display: block; }
.salary-copy {
  margin: 0 0 16px;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.45;
}
.salary-copy strong { color: #111827; }
.salary-card .btn-opp {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--opp);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.salary-foot {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #6b7280;
  font-size: 0.82rem;
}
.salary-foot .tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--opp);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.break-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.break-rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.9rem;
  color: #4b5563;
}
.break-rows li strong { color: #111827; }
.break-rows li.total {
  border-bottom: 0;
  margin-top: 4px;
  padding-top: 12px;
  font-weight: 800;
  color: var(--opp);
}
.elig-note {
  margin-top: 14px;
  text-align: center;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
}

.pay-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pay-flow li {
  text-align: center;
  position: relative;
  padding: 0 6px;
}
.pay-flow li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -6px;
  top: 22px;
  color: #cbd5e1;
  font-weight: 700;
}
.pay-flow .ico {
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 2px solid var(--opp);
  color: var(--opp);
  background: #fff;
  display: grid;
  place-items: center;
}
.pay-flow .ico svg { width: 20px; height: 20px; }
.pay-flow strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--opp-dark);
  text-transform: uppercase;
}

.opp-cta {
  background: var(--opp-cta);
  color: #fff;
  padding: 28px 24px;
}
/* Telecaller footer: green ? yellow merge */
body.theme-tele .opp-cta {
  background: linear-gradient(90deg, #006b3f 0%, #0a8f4d 38%, #c4d82e 72%, #ffcc00 100%);
}
/* Sales footer: purple ? magenta (rounded banner) */
body.theme-sales .opp-cta {
  background: transparent;
  padding: 20px 24px 36px;
}
body.theme-sales .opp-cta-inner {
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 48%, #d946ef 100%);
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 14px 36px rgba(124, 58, 237, 0.28);
  color: #fff;
}
body.theme-sales .opp-cta .apply {
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 6px 16px rgba(76, 29, 149, 0.15);
}
body.theme-sales .opp-cta .apply .arr {
  background: #7c3aed;
  color: #fff;
}
body.theme-sales .opp-cta .apply-tele {
  background: rgba(255, 255, 255, 0.92);
  color: #006b3f;
}
body.theme-sales .opp-cta .apply-tele .arr {
  background: #006b3f;
  color: #fff;
}
body.theme-tele .opp-cta .apply-tele {
  background: #ffcc00;
  color: #14532d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
body.theme-tele .opp-cta .apply-tele .arr {
  background: #006b3f;
  color: #fff;
}
body.theme-tele .opp-cta .apply-sales {
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
body.theme-tele .opp-cta .apply-sales .arr {
  background: #7c3aed;
  color: #fff;
}
.opp-cta-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.opp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.opp-cta h2 {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 800;
}
.opp-cta p { margin: 0; opacity: 0.9; font-size: 0.95rem; }
.opp-cta .apply {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--opp-accent);
  color: var(--opp-accent-text);
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.88rem;
}
.opp-cta .apply .arr {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--opp);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .opp-hero, .earn-flow, .wallet-grid, .pay-flow { grid-template-columns: 1fr 1fr; }
  .hl-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .hl-card strong {
    font-size: clamp(0.95rem, 2.8vw, 1.15rem);
  }
  .hl-card small {
    font-size: 0.65rem;
  }
  .theme-tele .opp-hero.tele-layout,
  .theme-sales .opp-hero.sales-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "copy art"
      "hl hl";
  }
  .opp-hero-block { padding-left: 16px; padding-right: 16px; }
  .earn-flow article:not(:last-child)::after,
  .pay-flow li:not(:last-child)::after { display: none; }
  .opp-cta-inner { flex-direction: column; text-align: center; }
  .opp-cta-actions { justify-content: center; }
  .wallet-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .opp-hero, .hl-row, .earn-flow, .pay-flow { grid-template-columns: 1fr; }
  .theme-tele .opp-hero.tele-layout,
  .theme-sales .opp-hero.sales-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "art"
      "hl";
  }
  .hl-row--hero {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hl-row--hero .hl-card {
    flex-direction: row;
    align-items: center;
  }
  .opp-hero-art { min-height: 260px; }
  .theme-tele .opp-hero-art.scene,
  .theme-sales .opp-hero-art.sales-scene { min-height: 0; max-height: 280px; order: unset; }
  .opp-top {
    padding: 12px 16px;
    gap: 10px;
  }
  .opp-top .lang-select {
    min-width: 118px;
    padding: 8px 32px 8px 12px;
    font-size: 0.82rem;
  }
  .hl-row { gap: 10px; }
  .hl-card { padding: 12px 10px; }
  .opp-hero, .opp-section { padding-left: 16px; padding-right: 16px; }
  .theme-sales .opp-section.tint .opp-inner { border-radius: 20px; padding: 20px 14px; }

  /* Center all section / page headings on mobile */
  .lp-h2,
  .opp-h2,
  .opp-cta h2,
  .journey-bar h2,
  .page-title,
  .lp-hero h1,
  .opp-hero-copy h1,
  .auth-box h1,
  .auth-box h2,
  .shell h1.page-title {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-hero,
  .opp-hero-copy,
  .opp-cta-inner,
  .journey-inner,
  .page-sub,
  .auth-box .page-sub {
    text-align: center;
  }
  .opp-hero-copy .lead,
  .lp-hero .lead,
  .page-sub {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Auth / forms */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 8px;
}

.shell {
  max-width: 1180px;
  margin: 8px auto 40px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px 32px;
}

.auth-box { max-width: 480px; margin: 32px auto; }

.page-title { margin: 0 0 6px; font-size: 1.55rem; }
.page-sub { margin: 0 0 20px; color: var(--muted); }

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  width: 100%;
  border: 1px solid #e1e4e8;
  border-radius: 16px;
  padding: 12px 14px;
  background: #fff;
  margin-bottom: 14px;
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.success-panel {
  text-align: center;
  padding: 28px 12px;
}

.success-panel .check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.12);
  color: var(--earn);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  margin: 0 auto 14px;
  font-weight: 700;
}

.notice {
  background: var(--accent-soft);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.92rem;
}

.app-toast-host {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  background: #1f2937;
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.app-toast.is-in {
  opacity: 1;
  transform: translateY(0);
}
.app-toast.is-out {
  opacity: 0;
  transform: translateY(-6px);
}
.app-toast--ok { background: #047857; }
.app-toast--error { background: #b91c1c; }
.app-toast--info { background: #1f2937; }

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

table.data th, table.data td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid #eceef1;
}

table.data th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.82rem;
}

.badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(255, 193, 7, 0.2);
  color: #9a6b00;
}

.badge.ok {
  background: rgba(15, 118, 110, 0.14);
  color: var(--earn);
}

.badge.bad {
  background: rgba(229, 57, 53, 0.12);
  color: #c62828;
}

/* Dashboards */
body.app-body {
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(244, 132, 95, 0.18), transparent 55%),
    radial-gradient(800px 480px at 95% 5%, rgba(143, 155, 168, 0.16), transparent 50%),
    #f3f4f6;
}

/* Horizontal menus sit at the start of the white page section (.shell) */
.shell.dash-shell > .nav-pills,
.shell.dash-shell > #adminNav {
  margin-bottom: 18px;
}
.shell.dash-shell > #adminNav .nav-pills {
  margin-bottom: 0;
}

.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.nav-pills a, .nav-pills span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #e6e8eb;
  background: var(--off);
  padding: 10px 14px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--muted);
}

.nav-pills a.active, .nav-pills span.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.nav-pills a.is-nav-denied,
.nav-pills span.is-nav-denied,
.dash-menu a.is-nav-denied {
  display: none !important;
}

.nav-pills span.soon {
  opacity: 0.7;
  cursor: default;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.module-card {
  background: var(--off);
  border-radius: 16px;
  padding: 16px;
}

.module-card h4 { margin: 0 0 4px; }
.module-card p { margin: 0; color: var(--muted); font-size: 0.88rem; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

/* Responsive */
@media (max-width: 900px) {
  .lp-hero, .opp-grid, .how-row, .info-grid, .module-grid { grid-template-columns: 1fr; }
  .lp-wfh-band { padding: 0 16px 12px; }
  .lp-hero-badge {
    font-size: clamp(0.76rem, 3.2vw, 0.92rem);
    padding: 10px 18px;
  }
  .how-row li:not(:last-child)::after { display: none; }
  .earn-strip { flex-direction: column; gap: 12px; padding: 20px 16px; }
  .journey-inner { flex-direction: column; text-align: center; }
  .journey-btns { justify-content: center; }
  .lp-h2,
  .opp-h2,
  .opp-cta h2,
  .journey-bar h2,
  .page-title,
  .lp-hero h1,
  .opp-hero-copy h1 {
    text-align: center;
  }
  .lp-hero,
  .opp-hero-copy { text-align: center; }
  .lp-hero .lead,
  .opp-hero-copy .lead {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 560px) {
  .perk-row { grid-template-columns: 1fr; }
  .shell { margin: 4px 10px 28px; padding: 16px 14px 24px; border-radius: 24px; }
  .lp-top { padding: 14px 16px; gap: 10px; }
  .lp-top .lang-select {
    min-width: 118px;
    padding: 8px 32px 8px 12px;
    font-size: 0.82rem;
  }
  .lp-hero { padding: 8px 16px 20px; }
  .journey-btns .opp-btn { min-width: 0; width: 100%; }
  .page-title,
  .page-sub,
  .auth-box h1,
  .auth-box h2,
  .shell > h1,
  .shell > h2 {
    text-align: center;
  }
  .page-sub { margin-left: auto; margin-right: auto; }
}

/* ===== Dashboard chrome (admin + team) ===== */
.dash-body {
  min-height: 100vh;
}
.dash-top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dash-app-title {
  margin: 0;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: var(--charcoal);
}
.dash-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}
.btn-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.btn-logout {
  color: #7f1d1d;
  border-color: rgba(127, 29, 29, 0.18);
  background: #fff;
}
.btn-logout:hover {
  background: #fef2f2;
  color: #991b1b;
  border-color: rgba(153, 27, 27, 0.28);
}
.dash-shell { margin-top: 8px; }
.dash-hello {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 500;
  margin: 8px 0 18px;
  color: var(--charcoal);
}
.dash-hello strong { font-weight: 800; }

.profile-dd { position: relative; }
.profile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e1e4e8;
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
  max-width: 180px;
}
.profile-toggle span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(52, 58, 64, 0.14);
  border: 1px solid #eee;
  padding: 6px;
  z-index: 40;
}
.profile-menu.open { display: grid; }
.profile-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  color: var(--charcoal);
}
.profile-menu button:hover { background: var(--accent-soft); color: var(--accent); }

.date-bar {
  margin: 0 0 16px;
  text-align: left;
}
.date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.date-presets button {
  border: 1px solid #e6e8eb;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  color: var(--charcoal);
}
.date-presets button.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.date-range-label {
  margin: 10px 0 0;
  text-align: right;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}
.date-custom {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  align-items: center;
}
.date-custom.open { display: flex; }
.date-custom input[type="date"] {
  width: auto;
  min-width: 140px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
}

.dash-menu { margin: 0 0 18px; overflow-x: auto; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi-row--2x2 {
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
}

.role-perm-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 16px;
  align-items: start;
}
.role-perm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-perm-item {
  text-align: left;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: inherit;
}
.role-perm-item.active {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}
.role-perm-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 20px;
}
.role-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.role-perm-group h4 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.role-perm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.92rem;
  cursor: pointer;
}
@media (max-width: 800px) {
  .role-perm-layout { grid-template-columns: 1fr; }
}
.kpi-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 20px rgba(52, 58, 64, 0.04);
}
a.kpi-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.kpi-card:hover,
.kpi-card[role="link"]:hover {
  box-shadow: 0 12px 28px rgba(52, 58, 64, 0.1);
  transform: translateY(-1px);
}
a.kpi-card:focus-visible,
.kpi-card[role="link"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.kpi-card[role="link"] {
  cursor: pointer;
}
.kpi-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.kpi-card small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.kpi-card strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--charcoal);
}
.kpi-card.kpi-wallet {
  background: #343a40;
  border-color: #343a40;
  color: #fff;
}
.kpi-card.kpi-wallet .kpi-ico {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.kpi-card.kpi-wallet small { color: rgba(255,255,255,0.7); }
.kpi-card.kpi-wallet strong { color: #fff; }
.kpi-card.kpi-eligible {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.kpi-card.kpi-eligible .kpi-ico {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.kpi-card.kpi-eligible small { color: rgba(255,255,255,0.85); }
.kpi-card.kpi-eligible strong { color: #fff; }

.dash-grid-2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
}
.dash-panel, .follow-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(52, 58, 64, 0.04);
}
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dash-panel h2, .follow-box h3, .wallet-box h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.dash-side { display: grid; gap: 12px; }
.wallet-box {
  background: #343a40;
  color: #fff;
  border-radius: 20px;
  padding: 18px;
}
.wallet-box-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.92rem;
}
.wallet-box-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

.wa-draft {
  margin: 12px 0;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8eaed;
}
.wa-draft pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.88rem;
  margin: 0 0 10px;
  color: var(--charcoal);
}

.dash-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dash-modal.open { display: flex; }
#modalLeadInfo,
#modalStatus,
#modalWa,
#modalEmail,
#modalAssess,
#modalHistory,
#modalReport,
#modalCert { z-index: 90; }
#modalCert { padding: 8px; align-items: stretch; }
.dash-modal-card-cert {
  width: min(900px, 100%);
  height: min(96vh, 100%);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 18px 12px;
  margin: auto;
}
.al-cert-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding-right: 4px;
}
.al-cert-page {
  margin: 0 0 20px;
  padding: 12px 0 4px;
  border-top: 1px solid #e2e8f0;
}
.al-cert-page h4 { margin: 0 0 6px; }
.al-cert-meta { margin: -8px 0 8px; }
.al-cert-foot {
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  margin-top: 8px;
}
.al-cert-hint { font-size: 0.8rem; margin: 0 0 10px; }
.al-cert-status { margin: 0 0 10px; font-size: 0.9rem; }
.al-cert-status.is-paid { color: #15803d; font-weight: 600; }
.al-score-field select { width: 100%; }
.al-from-url, .al-ask {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
}
.al-from-url { background: #e0f2fe; color: #0369a1; }
.al-ask { background: #ffedd5; color: #c2410c; }
.al-score-field.from-url select { border-color: #7dd3fc; }
.al-scan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 8px 0 12px;
}
.al-scan-notes {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.85rem;
  margin: 0 0 12px;
}
.al-scan-notes ul { margin: 6px 0 0; padding-left: 18px; }
.al-scan-section {
  margin: 14px 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e3a6e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.dash-modal-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 22px;
  padding: 22px 20px;
  width: min(440px, 100%);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}
.dash-modal-card h3 { margin: 0 0 14px; }
.dash-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 900px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .date-presets { justify-content: flex-start; }
  .date-range-label { text-align: left; }
  .date-custom { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .dash-top { padding: 12px 14px; flex-wrap: wrap; }
  .kpi-row { grid-template-columns: 1fr; }
  .profile-toggle { max-width: 140px; }
  .lp-top-actions { gap: 6px; }
  .lp-login-btn { padding: 7px 12px; font-size: 0.8rem; }
}

/* Admin approvals nav + cards — mobile-style collapsible menu */
.admin-nav-shell {
  position: relative;
  margin-bottom: 18px;
}
.admin-nav-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  border: 1px solid #e6e8eb;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--charcoal);
  box-shadow: 0 4px 14px rgba(52, 58, 64, 0.06);
  text-align: left;
}
.admin-nav-toggle:hover {
  border-color: #d7dbe0;
}
.admin-nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 22px;
  flex-shrink: 0;
}
.admin-nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.18s, opacity 0.18s;
}
.admin-nav-shell.is-open .admin-nav-burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.admin-nav-shell.is-open .admin-nav-burger span:nth-child(2) {
  opacity: 0;
}
.admin-nav-shell.is-open .admin-nav-burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.admin-nav-toggle-current {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.admin-nav-shell .admin-nav.nav-pills {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(52, 58, 64, 0.12);
  max-height: min(70vh, 520px);
  overflow: auto;
  z-index: 40;
  position: relative;
}
.admin-nav-shell.is-open .admin-nav.nav-pills {
  display: flex;
}
.admin-nav-shell .admin-nav.nav-pills > a,
.admin-nav-shell .admin-nav.nav-pills .nav-dd-toggle,
.admin-nav-shell .admin-nav.nav-pills > span.soon {
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
}
/* Team dash-menu: same collapsible shell as Admin (no horizontal pill scroll) */
.admin-nav-shell.team-nav-shell {
  margin-bottom: 18px;
}
.admin-nav-shell .dash-menu {
  overflow: auto;
  margin: 10px 0 0;
}
.admin-nav-shell .nav-dd {
  display: block;
  width: 100%;
}
.admin-nav-shell .nav-dd-toggle {
  width: 100%;
}
.admin-nav-shell .nav-dd-menu {
  position: static;
  display: none;
  min-width: 0;
  width: 100%;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 4px 0 4px 8px;
  margin-top: 4px;
}
.admin-nav-shell .nav-dd.open .nav-dd-menu {
  display: grid;
  gap: 2px;
}
.admin-nav { position: relative; }
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #e6e8eb;
  background: var(--off);
  padding: 10px 14px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}
.nav-dd-toggle.active,
.nav-dd.open .nav-dd-toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.nav-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(52, 58, 64, 0.14);
  padding: 6px;
  z-index: 50;
}
.nav-dd.open .nav-dd-menu { display: grid; }
.nav-dd-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.9rem;
  border: 0;
  background: transparent;
}
.nav-dd-menu a:hover,
.nav-dd-menu a.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.approval-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.approval-card {
  display: block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(52, 58, 64, 0.04);
  color: inherit;
  position: relative;
  min-height: 120px;
}
.approval-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.approval-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--charcoal);
}
.approval-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 85%;
}
.approval-count {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
}
.btn-sm {
  padding: 7px 12px;
  font-size: 0.82rem;
}
.actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ml-actions {
  gap: 8px;
  justify-content: flex-start;
}
.ml-act {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.ml-act svg {
  width: 18px;
  height: 18px;
  display: block;
}
.ml-act:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.ml-act-status {
  background: #e0e7ff;
  color: #3730a3;
}
.ml-act-followup {
  background: #fef3c7;
  color: #b45309;
}
.ml-act-wa {
  background: #dcfce7;
  color: #15803d;
}
.ml-follow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .ml-follow-grid { grid-template-columns: 1fr; }
}
.list-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 14px 0 4px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.list-pager-info {
  font-size: 0.84rem;
  color: #64748b;
}
.list-pager-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1e3a6e;
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.list-pager-btn:hover:not(:disabled) {
  background: #f1f5f9;
}
.wa-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.wa-approval-actions .btn-wa {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.wa-approval-actions .btn-wa:hover:not(:disabled) {
  background: #1ebe57;
  border-color: #1ebe57;
}
@media (max-width: 900px) {
  .approval-cards { grid-template-columns: 1fr; }
}

/* ===== Login page ? mock-matched split + cutout people over waves ===== */
body.login-page {
  --login-teal: #00a896;
  --login-blue: #1a73e8;
  --login-navy: #1e3a8a;
  --login-orange: #ff8c00;
  --login-ink: #1f2937;
  min-height: 100vh;
  margin: 0;
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--login-ink);
  background-color: #eef2f7;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(26, 115, 232, 0.08) 0 130px, transparent 131px),
    radial-gradient(circle at 92% 86%, rgba(0, 168, 150, 0.08) 0 120px, transparent 121px),
    radial-gradient(rgba(100, 116, 139, 0.14) 1.1px, transparent 1.2px);
  background-size: auto, auto, 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.5vw, 32px);
}

.login-shell {
  position: relative;
  width: min(1120px, 100%);
  min-height: min(700px, calc(100vh - 2 * clamp(14px, 2.5vw, 32px)));
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.14);
}

/* LEFT ? promo */
.login-promo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, #f5f9ff 0%, #eef6fb 48%, #ffffff 100%);
  overflow: hidden;
  padding: 34px 34px 0;
  isolation: isolate;
}
.login-promo-blob {
  position: absolute;
  width: min(260px, 52%);
  height: min(260px, 52%);
  right: 2%;
  bottom: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 115, 232, 0.22) 0%, rgba(26, 115, 232, 0.07) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.login-promo-top {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.login-promo-logo {
  display: inline-flex;
  margin-bottom: 20px;
}
.login-promo-logo img {
  height: 54px;
  width: auto;
  display: block;
}
.login-promo-title {
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.login-promo-title .line { display: block; }
.login-promo-title .line-voice { color: #111827; }
.login-promo-title .line-time { color: var(--login-teal); }

/* From "Your Earnings." down to the wave ? copy left, people right */
.login-promo-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(150px, 0.95fr);
  gap: 8px 12px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 2px;
}
.login-promo-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.login-promo-earn {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--login-blue);
}
.login-promo-lead {
  margin: 0 0 22px;
  max-width: 34ch;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #6b7280;
}
.login-promo-lead strong {
  color: var(--login-orange);
  font-weight: 700;
}

.login-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.login-features li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-feat-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  line-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}
.login-feat-ico svg {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 24px;
  margin: 0;
  overflow: visible;
}
.login-feat-ico svg * {
  vector-effect: non-scaling-stroke;
}
.login-feat-ico svg [fill],
.login-feat-ico svg rect,
.login-feat-ico svg circle,
.login-feat-ico svg path {
  fill: #fff;
}
.login-feat-ico svg path[fill="none"] {
  fill: none;
}
.login-feat-ico--green { background: var(--login-teal); }
.login-feat-ico--blue { background: var(--login-blue); }
.login-feat-ico--orange { background: var(--login-orange); }
.login-features strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: #111827;
}
.login-features li > div span {
  display: block;
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.35;
}

.login-promo-art {
  position: relative;
  z-index: 3;
  height: 100px;
  margin: 0 -34px;
  flex-shrink: 0;
  pointer-events: none;
  /* allow people to grow upward from the wave */
  overflow: visible;
}
.login-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
  pointer-events: none;
}
.login-waves .lw-teal { fill: #00a896; }
.login-waves .lw-blue { fill: #1d4ed8; }
.login-waves .lw-orange { fill: #ff8c00; }

/* Spacer keeps right column for copy layout */
.login-people-slot {
  min-width: 0;
}

/* Same size; anchored so feet sit on teal crest */
.login-people {
  position: absolute;
  right: 34px;
  /* teal crest; nudged 10px lower */
  bottom: 52px;
  z-index: 2;
  width: min(46%, 280px);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.login-people img {
  display: block;
  width: 100%;
  height: auto;
  /* lock footprint ? no scale transform */
  max-height: min(360px, 52vh);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.14));
}
.login-plane-wrap {
  position: absolute;
  top: 6%;
  right: 2%;
  z-index: 3;
  width: 100px;
  height: 40px;
  color: var(--login-orange);
  pointer-events: none;
}
.login-dash { width: 100%; height: 40px; opacity: 0.9; }
.login-plane {
  position: absolute;
  top: -2px;
  right: 0;
  width: 22px;
  height: 22px;
  color: var(--login-orange);
  filter: drop-shadow(0 4px 6px rgba(255, 140, 0, 0.35));
}
.login-plane svg { width: 100%; height: 100%; display: block; }

/* RIGHT ? form */
.login-card {
  position: relative;
  z-index: 5;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 28px;
  overflow: auto;
  isolation: isolate;
}
.login-card-inner {
  width: min(380px, 100%);
  position: relative;
  z-index: 2;
}
.login-tabs {
  display: flex;
  gap: 28px;
  margin: 0 0 22px;
  border-bottom: 1px solid #e5e7eb;
}
.login-tab {
  border: 0;
  background: none;
  padding: 0 0 12px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: #9ca3af;
  cursor: pointer;
  position: relative;
}
.login-tab.is-active { color: var(--login-blue); }
.login-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--login-blue);
}
.login-heading {
  margin: 0 0 6px;
  font-size: 1.85rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}
.login-heading span { color: var(--login-blue); }
.login-lead {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 0.92rem;
  line-height: 1.45;
}
.login-notice {
  margin: -8px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 168, 150, 0.08);
  color: #0f766e;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 600;
}
.login-form label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 7px;
}
.login-field {
  position: relative;
  margin: 0 0 14px;
  z-index: 1;
  cursor: text;
}
.login-field-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #9ca3af;
  pointer-events: none;
  z-index: 1;
}
.login-field-ico svg { width: 100%; height: 100%; display: block; }
.login-form input,
.login-form select {
  position: relative;
  z-index: 0;
  width: 100%;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  background: #fff;
  color: var(--login-ink);
  -webkit-user-select: text;
  user-select: text;
  pointer-events: auto;
}
.login-field .login-field-ico + input { padding-left: 40px; }
.login-field #password { padding-right: 44px; letter-spacing: 0.2em; font-weight: 600; }
.login-pass-hint { margin: -6px 0 12px; font-size: 0.78rem; }
.login-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 8px;
  z-index: 2;
  pointer-events: auto;
}
.login-eye svg {
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
}
.login-eye .eye-off { display: none; }
.login-eye.is-shown .eye-on { display: none; }
.login-eye.is-shown .eye-off { display: block; }
.login-eye:hover { color: #4b5563; background: #f3f4f6; }
.login-form input:focus,
.login-form select:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 16px;
  font-size: 0.84rem;
}
.login-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
}
.login-check input { width: auto; margin: 0; accent-color: var(--login-blue); }
.login-forgot {
  color: var(--login-orange);
  font-weight: 600;
  font-size: 0.84rem;
}
.login-submit {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, #00a896 0%, #14b8a6 40%, #1a73e8 100%);
  box-shadow: 0 10px 20px rgba(0, 168, 150, 0.22);
}
.login-submit:hover { filter: brightness(1.04); }
.login-submit:disabled,
.login-submit.is-loading {
  opacity: 0.75;
  cursor: wait;
  pointer-events: none;
}
.login-submit-arr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.login-submit-arr svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.login-err {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #dc2626;
  font-size: 0.92rem;
  font-weight: 600;
}
.login-switch {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: #6b7280;
}
.login-switch-link {
  border: 0;
  background: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 700;
  color: var(--login-orange);
  cursor: pointer;
}
.login-success { text-align: center; padding: 4px 0; }
.login-success-check {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 168, 150, 0.12);
  color: #00a896;
  font-size: 1.35rem;
  font-weight: 800;
}
.login-success .login-submit { margin-top: 14px; }
.login-foot {
  margin: 8px 0 0;
  color: #9ca3af;
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  body.login-page { padding: 0; align-items: stretch; }
  .login-shell {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    grid-template-columns: 1fr;
    box-shadow: none;
  }
  .login-promo {
    padding: 24px 22px 0;
    min-height: auto;
  }
  .login-promo-main {
    grid-template-columns: minmax(0, 1.05fr) minmax(130px, 0.9fr);
  }
  .login-promo-art {
    height: 88px;
    margin: 0 -22px;
  }
  .login-waves { height: 88px; }
  .login-people {
    right: 22px;
    bottom: 44px;
    width: min(42%, 240px);
  }
  .login-people img {
    max-height: min(300px, 46vh);
  }
  .login-card {
    padding: 28px 18px 36px;
  }
  .login-heading { font-size: 1.55rem; }
}
@media (max-width: 480px) {
  .login-features li:nth-child(3) { display: none; }
  .login-promo-main {
    grid-template-columns: minmax(0, 1.15fr) minmax(110px, 0.85fr);
    gap: 6px 8px;
  }
  .login-promo-art { height: 76px; }
  .login-waves { height: 76px; }
  .login-people {
    right: 16px;
    bottom: 36px;
    width: min(44%, 200px);
  }
  .login-people img {
    max-height: min(260px, 40vh);
  }
}

/* My Leads ? widgets + follow-up / assigned boards */
.lead-widgets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.lead-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 14px 14px 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.lead-widget:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
.lead-widget.is-active {
  border-color: var(--lw-accent, var(--accent));
  box-shadow: 0 0 0 2px rgba(244, 132, 95, 0.25);
}
.lead-widget.is-active[data-tone="orange"] { box-shadow: 0 0 0 2px rgba(244, 132, 95, 0.3); }
.lead-widget.is-active[data-tone="red"] { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28); }
.lead-widget.is-active[data-tone="purple"] { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.28); }
.lead-widget.is-active[data-tone="rose"] { box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.28); }
.lead-widget.is-active[data-tone="teal"] { box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.28); }
.lead-widget.is-active[data-tone="blue"] { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28); }
.lead-widget.is-active[data-tone="amber"] { box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.28); }
.lead-widget.is-active[data-tone="green"] { box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.28); }
.lead-widget::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--lw-accent, #f4845f);
}
.lead-widget-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--lw-accent, #f4845f);
  flex-shrink: 0;
}
.lead-widget-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lead-widget-body small {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lead-widget-body strong {
  font-size: 1.35rem;
  line-height: 1.1;
  color: #0f172a;
}
.lead-widget[data-tone="orange"] { --lw-accent: #f4845f; }
.lead-widget[data-tone="red"] { --lw-accent: #ef4444; }
.lead-widget[data-tone="purple"] { --lw-accent: #8b5cf6; }
.lead-widget[data-tone="rose"] { --lw-accent: #e11d48; }
.lead-widget[data-tone="teal"] { --lw-accent: #0d9488; }
.lead-widget[data-tone="blue"] { --lw-accent: #3b82f6; }
.lead-widget[data-tone="amber"] { --lw-accent: #d97706; }
.lead-widget[data-tone="green"] { --lw-accent: #16a34a; }

.lead-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}
.lead-boards--single {
  grid-template-columns: 1fr;
}
.lead-board-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}
.lead-table-wrap {
  margin: 0;
}
.lead-table-wrap .lead-status-pill {
  display: inline-block;
}
.lead-phone-link {
  color: var(--navy);
  text-decoration: none;
}
.lead-phone-link:hover {
  text-decoration: underline;
}
.lead-board {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.lead-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.lead-board-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.lead-board-tools .crud-toolbar-tools {
  display: inline-flex;
  gap: 4px;
}
.lead-board-add {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.lead-board-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.lead-board-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff7ed;
  color: #c2410c;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.lead-board .lead-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.lead-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px 20px;
  gap: 8px;
}
.lead-empty[hidden] { display: none !important; }
.lead-empty-ico {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff7ed;
  color: #f4845f;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.lead-empty-ico svg {
  width: 34px;
  height: 34px;
}
.lead-empty-title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a;
}
.lead-empty-sub {
  margin: 0;
  font-size: 0.88rem;
  color: #6b7280;
  max-width: 26ch;
  line-height: 1.4;
}

.lead-section { margin: 28px 0 12px; }
.lead-section h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.lead-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.lead-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 16px 14px 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.lead-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.lead-card-name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.lead-status-pill {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0f766e;
  background: #ecfdf5;
  border-radius: 999px;
  padding: 4px 8px;
}
.lead-status-pill.st-new { color: #0f766e; background: #ecfdf5; }
.lead-status-pill.st-warm { color: #b45309; background: #fef3c7; }
.lead-status-pill.st-hot { color: #b91c1c; background: #fee2e2; }
.lead-status-pill.st-cold { color: #1d4ed8; background: #dbeafe; }
.lead-status-pill.st-sold { color: #15803d; background: #dcfce7; }
.lead-status-pill.st-lost { color: #475569; background: #e2e8f0; }
.lead-status-pill.st-follow_up { color: #0369a1; background: #e0f2fe; }
.lead-status-pill.st-not_interested { color: #9f1239; background: #ffe4e6; }
.lead-card-meta {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #6b7280;
}
.lead-contact-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 12px;
}
.lead-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: inherit;
}
.lead-phone .phone-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lead-phone .phone-ico svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}
.lead-phone-primary .phone-ico { background: #16a34a; }
.lead-phone-primary { color: #166534; }
.lead-phone-alt .phone-ico { background: #2563eb; }
.lead-phone-alt { color: #1e40af; }
.lead-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.lead-card-actions .btn {
  flex: 1 1 auto;
  min-width: 120px;
  font-size: 0.84rem;
  padding: 8px 10px;
}
.btn-wa {
  background: #25d366 !important;
  color: #fff !important;
  border-color: #25d366 !important;
}
.lead-fu-note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: #b45309;
}
.dash-modal-card-wide { width: min(520px, 100%); }
.wa-preview {
  margin: 10px 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f3f4f6;
  white-space: pre-wrap;
  font-size: 0.88rem;
  line-height: 1.45;
  max-height: 180px;
  overflow: auto;
}
.assess-form .field { margin-bottom: 10px; }
.field {
  display: block;
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: #374151;
}
.field[hidden] { display: none !important; }
.field span {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}
.form-err {
  min-height: 1.2em;
  margin: 0 0 10px;
  color: #c62828;
  font-size: 0.88rem;
}
.assess-report {
  margin-top: 14px;
  padding: 12px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  white-space: pre-wrap;
  font-size: 0.82rem;
  line-height: 1.45;
  max-height: 240px;
  overflow: auto;
}
@media (max-width: 900px) {
  .lead-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lead-boards {
    grid-template-columns: 1fr;
  }
  .lead-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lead-widgets {
    grid-template-columns: 1fr;
  }
}


/* Wallet page + clickable dashboard wallet */
.kpi-wallet {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-wallet:hover,
.kpi-wallet:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  outline: none;
}
a.wallet-box-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.wallet-box-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.wallet-hero {
  margin: 8px 0 20px;
  padding: 22px 20px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(34, 197, 94, 0.18), transparent 55%),
    linear-gradient(145deg, #0f172a 0%, #134e4a 100%);
  color: #f8fafc;
}
.wallet-hero-label {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.wallet-hero-amount {
  margin: 6px 0 4px;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wallet-hero-note {
  margin: 0;
  font-size: 0.86rem;
  opacity: 0.75;
}
.wallet-summary-row { margin-bottom: 8px; }
.wallet-ledger {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wallet-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
}
.wallet-ledger-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wallet-ledger-row .muted {
  font-size: 0.78rem;
}
.wallet-amt { white-space: nowrap; }
.wallet-ledger-row.credit .wallet-amt { color: #15803d; }
.wallet-ledger-row.debit .wallet-amt { color: #b91c1c; }
.wallet-ledger-row.eligible {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.wallet-ledger-row.eligible .muted { color: rgba(255,255,255,0.8); }
.wallet-ledger-row.eligible .wallet-amt { color: #fff; }
.wallet-eligible-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  color: #fff;
  vertical-align: middle;
}
.admin-wallet-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  padding-top: 8px;
}
.admin-wallet-summary span { color: #64748b; font-size: 0.9rem; }
.admin-wallet-summary strong { color: #0f172a; }
.admin-wallet-amt {
  width: 110px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
}
.admin-wallet-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}
tr.admin-wallet-row-eligible td {
  background: rgba(21, 128, 61, 0.08);
}

/* Admin CRUD: List (full) ? Entry (col-6) views */
.crud-page { margin-top: 8px; }
.crud-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.crud-toolbar-title {
  flex: 1 1 220px;
  min-width: 0;
}
.crud-toolbar .page-title { margin: 0 0 4px; }
.crud-toolbar .page-sub { margin: 0; max-width: 42rem; }
.crud-toolbar-tools,
.crud-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}
.crud-list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 20px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}
/* Shared list toolbar controls (filters + search) ? DataTables / Bootstrap style */
.list-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.list-ctrl-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: #212529;
  white-space: nowrap;
}
.list-ctrl-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.list-ctrl-ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #94a3b8;
  pointer-events: none;
}
.list-ctrl-input {
  width: 100%;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #212529;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}
.list-ctrl-input--select {
  min-width: 148px;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.list-ctrl-input--search {
  padding: 0 34px 0 36px;
}
.list-ctrl-input::placeholder {
  color: #adb5bd;
}
.list-ctrl-input:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.list-ctrl-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.list-ctrl-clear:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.list-ctrl-clear[hidden] {
  display: none !important;
}
.list-ctrl-filter {
  flex: 0 0 auto;
}
.list-ctrl-search {
  flex: 1 1 260px;
  max-width: 440px;
  margin-left: auto;
}
.crud-list-controls:has(.list-ctrl-search:only-child) .list-ctrl-search {
  margin-left: auto;
}
/* Legacy aliases */
.list-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 440px; margin-left: auto; }
.list-search-label { margin: 0; font-size: 0.875rem; font-weight: 400; color: #212529; white-space: nowrap; }
.list-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.list-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #94a3b8; pointer-events: none; }
.list-search-input { width: 100%; margin: 0; padding: 9px 34px 9px 36px; border: 1px solid #ced4da; border-radius: 8px; font-size: 0.875rem; line-height: 1.4; color: #212529; background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); }
.list-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: #64748b; font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.list-search-clear[hidden] { display: none !important; }
.crud-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
}
.crud-control > span {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: #212529;
  letter-spacing: normal;
  white-space: nowrap;
}
.crud-control > span::after {
  content: ":";
}
.crud-control select,
.crud-control input[type="text"] {
  margin-bottom: 0;
  min-width: 148px;
  height: 38px;
  padding: 0 32px 0 12px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 0.875rem;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.crud-control select:focus,
.crud-control input[type="text"]:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.crud-list-controls select.list-ctrl-input,
.crud-list-controls .list-ctrl-input {
  margin-bottom: 0;
}
.crud-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.crud-icon-btn:hover {
  transform: translateY(-1px);
  background: #fff7ed;
  color: #c2410c;
  border-color: rgba(194, 65, 12, 0.25);
}
.crud-icon-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.crud-icon-btn.primary {
  background: linear-gradient(135deg, #f4845f, #e85d3a);
  color: #fff;
  border-color: transparent;
}
.crud-icon-btn.primary:hover {
  background: linear-gradient(135deg, #e85d3a, #d94a28);
  color: #fff;
}
.crud-view[hidden] { display: none !important; }
.crud-view-list .table-wrap {
  width: 100%;
}
/* ~ Bootstrap col-md-6: half width entry form */
.crud-entry-col {
  width: 100%;
  max-width: 50%;
  flex: 0 0 50%;
}
.crud-view-entry {
  display: block;
}
.crud-view-entry .dash-panel {
  margin-bottom: 0;
}
.crud-entry-col--wide {
  max-width: 100%;
  flex: 1 1 100%;
}
.crud-entry-col .assign-form label,
.crud-entry-col .field {
  display: block;
  margin: 0 0 10px;
}
.crud-entry-col .assign-form select,
.crud-entry-col .assign-form input,
.crud-entry-col .assign-form textarea,
.crud-entry-col .field input,
.crud-entry-col .field select,
.crud-entry-col .field textarea {
  width: 100%;
  box-sizing: border-box;
}
.crud-entry-col .btn.block,
.crud-entry-col .btn.primary {
  width: 100%;
}
@media (max-width: 900px) {
  .crud-entry-col {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

button.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--navy-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
button.linkish:hover { text-decoration: underline; }
#importFile { max-width: 100%; }
.import-preview { margin-top: 12px; max-height: 280px; overflow: auto; }
#pkgLeadsWrap { margin-top: 22px; }
.assign-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.assign-select-all { font-weight: 600; font-size: 0.9rem; }
.assign-lead-list {
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 6px 0 14px;
  background: #fff;
}
.assign-lead-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 4px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.assign-lead-item:last-child { border-bottom: 0; }
.assign-lead-item input { margin-top: 3px; }
.al-facts {
  display: grid;
  gap: 6px 16px;
  font-size: 0.92rem;
}
.al-facts a { color: var(--navy-2); font-weight: 600; }
.al-facts .al-fact-k { color: #64748b; margin-right: 6px; }

/* List-only pages: table ? cards */
.crud-icon-btn.is-active {
  background: #fff7ed;
  color: #c2410c;
  border-color: rgba(194, 65, 12, 0.35);
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.12);
}
[data-list-display] [data-display-panel][hidden] {
  display: none !important;
}
.data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.data-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.data-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.data-card-head strong {
  font-size: 1.02rem;
  line-height: 1.25;
}
.data-card-rows {
  display: grid;
  gap: 6px;
  margin: 0;
}
.data-card-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
}
.data-card-row span:first-child {
  color: #6b7280;
  flex-shrink: 0;
}
.data-card-row span:last-child {
  text-align: right;
  word-break: break-word;
}
.data-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.data-card-actions .btn {
  flex: 1 1 auto;
  min-width: 110px;
}
.data-cards-empty {
  grid-column: 1 / -1;
  color: #6b7280;
  padding: 18px 8px;
  text-align: center;
}

/* Floating Contact Us FAB ? closed = icon + label; open = radial children on click */
.contact-fab {
  position: fixed;
  right: 72px;
  bottom: 28px;
  z-index: 90;
  width: 58px;
  height: 58px;
}
.contact-fab-main {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #1f2937;
}
.contact-fab-bubble {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #0f766e, #b45309);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-fab-bubble svg {
  width: 28px;
  height: 28px;
}
.contact-fab-main:hover .contact-fab-bubble,
.contact-fab.open .contact-fab-bubble {
  transform: scale(1.06);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.34);
}
.contact-fab-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
  color: #1f2937;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
.contact-fab-orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 58px;
  pointer-events: none;
}
.contact-fab-child {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0) scale(0.35);
  transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0.28s;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
  pointer-events: none;
}
.contact-fab-child svg { width: 20px; height: 20px; }
.contact-fab.open .contact-fab-child {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0s;
}
/* Arc opens up/left so nothing clips off the right edge */
.contact-fab.open .c-call { transform: translate(-96px, 6px) scale(1); transition-delay: 0.02s; }
.contact-fab.open .c-wa { transform: translate(-90px, -52px) scale(1); transition-delay: 0.05s; }
.contact-fab.open .c-mail { transform: translate(-58px, -96px) scale(1); transition-delay: 0.08s; }
.contact-fab.open .c-web { transform: translate(-12px, -114px) scale(1); transition-delay: 0.11s; }
.contact-fab.open .c-map { transform: translate(32px, -98px) scale(1); transition-delay: 0.14s; }
.c-call { background: #16a34a; }
.c-wa { background: #25d366; }
.c-mail { background: #2563eb; }
.c-web { background: #0f766e; }
.c-map { background: #dc2626; }

.contact-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.contact-modal.open { display: flex; }
.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.contact-modal-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  padding: 22px 18px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}
.contact-modal-card h3 { margin: 0 0 8px; }
.contact-modal-x {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
}
.contact-modal-map { width: min(560px, 100%); }
.contact-map-frame {
  margin: 12px 0 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  aspect-ratio: 16 / 11;
  background: #f3f4f6;
}
.contact-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 560px) {
  .contact-fab { right: 56px; bottom: 76px; }
  .contact-fab.open .c-call { transform: translate(-84px, 4px) scale(1); }
  .contact-fab.open .c-wa { transform: translate(-78px, -46px) scale(1); }
  .contact-fab.open .c-mail { transform: translate(-48px, -86px) scale(1); }
  .contact-fab.open .c-web { transform: translate(-8px, -102px) scale(1); }
  .contact-fab.open .c-map { transform: translate(28px, -88px) scale(1); }
}

/* Staff bonus banner on dashboards */
.bonus-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ecfdf5, #fff7ed);
  border: 1px solid rgba(15, 118, 110, 0.18);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.bonus-banner strong { display: block; font-size: 1.05rem; }
.bonus-banner .bonus-amt {
  flex-shrink: 0;
  font-weight: 700;
  color: #15803d;
  font-size: 1.1rem;
}
.bonus-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

/* Assigned Leads workspace */
.al-row { cursor: pointer; }
.al-row:hover { background: rgba(15, 23, 42, 0.03); }
.al-compact-card { cursor: pointer; }
.al-compact-card .lead-card-name {
  min-width: 0;
  font-size: 0.98rem;
}
.al-compact-card .lead-card-actions {
  margin-top: 12px;
}
.al-compact-card .al-view-more {
  width: 100%;
  background: #f4f5f6;
  border-color: var(--accent);
  color: #3d4450;
  font-weight: 600;
  box-shadow: none;
}
.al-compact-card .al-view-more:hover {
  background: #eceef2;
  border-color: var(--accent-deep);
  color: #2c3338;
}
.al-assess-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 8px;
}
.al-detail-card { width: min(560px, 100%); padding: 20px 18px 16px; }
.al-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 28px;
}
.al-sheet-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #dbeafe;
  color: #2563eb;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.al-sheet-avatar svg { width: 26px; height: 26px; }
.al-sheet-copy h3 { margin: 0 0 2px; font-size: 1.12rem; }
.al-sheet-copy .muted { margin: 0; }
.al-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.al-pill-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 5px;
  vertical-align: 1px;
}
.al-contact-actions {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
.al-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 8px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  transition: transform 0.15s, filter 0.15s;
}
.al-tile svg { width: 20px; height: 20px; display: block; }
.al-tile-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  line-height: 1.15;
}
.al-tile:hover { transform: translateY(-1px); }
.al-tile-call { background: #dcfce7; color: #16a34a; }
.al-tile-alt { background: #dbeafe; color: #2563eb; }
.al-tile-mail { background: #f3e8ff; color: #7c3aed; }
.al-tile-wa { background: #d1fae5; color: #15803d; }
.al-tile-site { background: #dbeafe; color: #1d4ed8; }
.al-tile.is-off,
.al-tile:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.al-tile.is-off .al-tile-lbl,
.al-tile:disabled .al-tile-lbl { color: #94a3b8; }
.al-tile.is-off:hover,
.al-tile:disabled:hover { transform: none; }
.al-sheet-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.al-panel {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: #fff;
}
.al-panel h4,
.al-quick-block h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2563eb;
}
.al-quick-block h4 { color: #334155; }
.al-h-ico {
  width: 18px;
  height: 18px;
  display: inline-flex;
  color: #2563eb;
}
.al-h-ico svg { width: 16px; height: 16px; }
.al-h-ico-bolt { color: var(--accent); }
.al-fact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.al-fact-row strong { display: block; font-size: 0.92rem; }
.al-fact-row a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}
.al-fact-row a svg { width: 12px; height: 12px; }
.al-fact-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.al-fact-ico svg { width: 16px; height: 16px; }
.al-fact-ico-phone { background: #dbeafe; color: #2563eb; }
.al-fact-ico-alt { background: #dbeafe; color: #2563eb; }
.al-fact-ico-g { background: #fff; border: 1px solid #e5e7eb; }
.al-facts .al-fact-k {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  margin: 0;
}
.al-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.al-ico-btn {
  position: relative;
  min-width: 52px;
  flex: 1 1 0;
  padding: 8px 4px 6px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s, transform 0.15s;
}
.al-ico-tick {
  position: absolute;
  top: -5px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px #fff;
  z-index: 1;
}
.al-ico-tick svg { width: 10px; height: 10px; }
.al-ico-btn svg { width: 16px; height: 16px; display: block; }
.al-ico-btn .al-tile-lbl { color: rgba(255,255,255,0.92); }
.al-ico-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.al-ico-online { background: #0ea5e9; }
.al-ico-web { background: #1e3a6e; }
.al-ico-report { background: #d97706; }
.al-ico-cert { background: #ca8a04; }
.al-ico-cert.is-paid { background: #15803d; }
.al-ico-cert.is-unpaid { background: #d97706; }
.al-pay-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
}
.al-pay-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.al-pay-paid { color: #15803d; }
.al-pay-unpaid { color: #b45309; }
.al-pay-btn.on.al-pay-paid {
  background: #dcfce7;
  border-color: #15803d;
}
.al-pay-btn.on.al-pay-unpaid {
  background: #fef3c7;
  border-color: #b45309;
}
.al-cert-pay-lbl {
  margin: 12px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}
.al-cert-ready-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ar-cert-bar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(30, 58, 110, 0.06);
  position: sticky;
  top: 0;
  z-index: 20;
}
.ar-cert-bar-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 16px 14px;
}
.ar-cert-bar-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin-bottom: 10px;
}
.ar-cert-bar-title strong {
  color: #1e3a6e;
  font-size: 1rem;
}
.ar-cert-bar .field {
  max-width: 360px;
  margin: 8px 0;
}
.ar-cert-bar .al-pay-row {
  margin-bottom: 4px;
}
.al-quick-block { margin-top: 4px; }
.al-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.al-chip {
  flex: 1 1 22%;
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.al-chip svg { width: 16px; height: 16px; }
.al-chip:hover { transform: translateY(-1px); }
.al-chip-info { background: #fff1e8; color: #c2410c; }
.al-chip-status { background: #e8f0fe; color: #1e3a6e; }
.al-chip-history { background: #eef2f6; color: #334155; }
.al-chip-lost { background: #fee2e2; color: #b91c1c; }
.al-facts-full { gap: 8px; }
.al-facts-full > div {
  padding: 4px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
@media (max-width: 560px) {
  .al-sheet-split { grid-template-columns: 1fr; }
  .al-tile-lbl { font-size: 0.55rem; }
}
.al-score-box {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 12px;
}
.al-report, .al-report-mini {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.85rem;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0;
  max-height: 220px;
  overflow: auto;
}
.al-report-block { margin: 12px 0; }
.al-report-block h4 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: #1e3a6e;
}
.al-report-score { margin: 0; font-size: 0.88rem; color: #475569; }
.al-more-wrap { position: relative; }
.al-more-btn { min-width: 36px; font-size: 1.2rem; line-height: 1; }
.al-more-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.al-more-menu button {
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.al-more-menu button:hover { background: #f1f5f9; }
.al-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  overflow: auto;
}
.al-timeline li {
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #f4845f);
  background: #f8fafc;
  border-radius: 0 10px 10px 0;
}
.al-assess-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 720px) {
  .al-desktop-list { display: none !important; }
  .al-mobile-cards,
  .al-mobile-cards[hidden] {
    display: grid !important;
  }
}

/* ===== Calling Workspace (Phase 2) ===== */
.call-workspace { margin-top: 8px; }
.call-workspace-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.call-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.call-flow-lang {
  display: inline-flex;
  align-items: center;
  margin: 0;
  min-width: 148px;
}
.call-flow-lang-select {
  min-width: 148px;
  height: 36px;
  padding: 0 28px 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
.call-flow-lang-select:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.call-mode-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.call-workspace-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 14px;
  align-items: start;
}
.call-lead-panel h3 { margin: 6px 0 4px; font-size: 1.15rem; }
.call-dial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.call-dial-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.call-dial-btn svg { width: 22px; height: 22px; display: block; }
.call-dial-primary { background: #dcfce7; color: #16a34a; }
.call-dial-secondary { background: #dbeafe; color: #2563eb; }
.call-dial-followup { background: #fef3c7; color: #b45309; }
.call-dial-web { background: #e0f2fe; color: #0369a1; }
.call-dial-web.is-on { background: #ccfbf1; color: #0f766e; }
.call-dial-google { background: #fee2e2; color: #b91c1c; }
.call-dial-wa { background: #dcfce7; color: #15803d; }
.call-dial-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
}
.call-dial-btn:hover:not(:disabled) { transform: translateY(-1px); }
.call-dial-btn:disabled,
.call-dial-btn.is-off {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}
.call-assess-mode {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.call-assess-mode-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.call-live-flow {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #475569;
}
.call-assess-toggle {
  display: block;
  cursor: pointer;
  user-select: none;
}
.call-assess-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.call-assess-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 44px;
  border-radius: 999px;
  background: #e2e8f0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.call-assess-opt {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748b;
  padding: 10px 8px;
  transition: color 0.18s ease;
}
.call-assess-knob {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, background 0.2s ease;
}
.call-assess-toggle.is-quick .call-assess-knob {
  transform: translateX(100%);
  background: #2563eb;
}
.call-assess-toggle:not(.is-quick) .call-assess-opt-normal,
.call-assess-toggle.is-quick .call-assess-opt-quick {
  color: #0f172a;
}
.call-assess-toggle.is-quick .call-assess-opt-quick {
  color: #fff;
}
.call-assess-mode-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}
.call-assess-mode.is-locked {
  opacity: 0.72;
}
.call-assess-mode.is-locked .call-assess-toggle {
  cursor: not-allowed;
}
.call-lang-gate { padding: 8px 0 4px; }
.call-lang-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.call-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
#wsStepTitle,
.call-flow-body #wsStepTitle {
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.35;
  margin: 10px 0 12px;
  font-weight: 700;
}
.call-script-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 120px;
  font-size: clamp(1.08rem, 2.4vw, 1.22rem);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.call-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.call-flow-note { margin-top: 12px; font-size: 0.82rem; }
.call-assess-panel { margin-top: 16px; }
.call-assess-scores {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.call-assess-scores .data-card-row strong { font-size: 1.05rem; }
.call-assess-msg {
  margin: 12px 0;
  display: grid;
  gap: 8px;
}
.call-assess-msg label {
  font-weight: 600;
  font-size: 0.9rem;
}
.call-assess-wa-text {
  width: 100%;
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.call-assess-msg-actions { margin-top: 4px; }
.call-assess-report {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.call-assess-report h5 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.call-assess-report h6 {
  margin: 12px 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
}
.call-assess-report-scores {
  display: grid;
  gap: 8px;
}
.call-assess-report-rec {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.call-assess-improve-list {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 8px;
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  line-height: 1.45;
}
.call-handover-panel { margin-top: 16px; }
.call-handover-panel .form-row { margin: 10px 0; }
.call-handover-panel .check-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0;
}
.call-ho-block { margin: 8px 0 12px; }
.call-ho-status { margin: 8px 0; }
.call-products-panel { margin-top: 16px; }
.call-products-panel .form-row { margin: 8px 0; }
.call-prod-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
  max-height: 140px;
  overflow: auto;
}
.call-prod-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border, #d0d5dd);
  background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.call-prod-chip:hover { border-color: var(--accent, #2a6); }
.call-prod-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.call-prod-selected .call-prod-chip {
  background: rgba(0, 0, 0, 0.04);
}
.call-prod-selected .call-prod-remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  opacity: 0.7;
}
.call-answer-host { margin-top: 14px; }
.call-answer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.call-answer-options--row {
  flex-direction: row;
  flex-wrap: wrap;
}
.call-answer-options .btn {
  font-size: clamp(1.02rem, 2.2vw, 1.12rem);
  padding: 12px 16px;
  line-height: 1.4;
  text-align: left;
  justify-content: flex-start;
}
.call-answer-options .btn.on {
  outline: 2px solid var(--brand, #0f766e);
}
.call-answer-field {
  width: 100%;
  max-width: 520px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font: inherit;
  font-size: clamp(1.02rem, 2.2vw, 1.12rem);
  line-height: 1.45;
}
.call-answer-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: clamp(1.02rem, 2.2vw, 1.12rem);
  line-height: 1.4;
  background: #fff;
}
#wsSaveStatus.is-error { color: #b91c1c; }
#wsSaveStatus.is-ok { color: #047857; }
@media (max-width: 860px) {
  .call-workspace-grid { grid-template-columns: 1fr; }
}

/* ===== Calling Flow Management (Phase 4 Admin) ===== */
.cfm-filters { gap: 10px; flex-wrap: wrap; }
.cfm-actions { white-space: nowrap; }
.cfm-actions .btn { margin: 2px 0; }
.cfm-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cfm-span-2 { grid-column: 1 / -1; }
.cfm-steps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cfm-step-add { display: flex; flex-wrap: wrap; gap: 8px; }
.cfm-nodes { display: flex; flex-direction: column; gap: 8px; }
.cfm-nodes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .cfm-nodes-grid { grid-template-columns: 1fr; }
}
.cfm-node {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* display:flex above would otherwise override the HTML hidden attribute */
.cfm-node[hidden],
.call-assess-panel[hidden],
.call-handover-panel[hidden],
.call-products-panel[hidden] {
  display: none !important;
}
.cfm-node.is-draggable { cursor: grab; }
.cfm-node.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.28);
  background: #fffaf5;
}
.cfm-node.is-dragging,
.cfm-node.is-drag-group {
  opacity: 0.45;
  cursor: grabbing;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.cfm-node.is-drop-target.drop-before {
  border-top: 3px solid var(--accent);
}
.cfm-node.is-drop-target.drop-after {
  border-bottom: 3px solid var(--accent);
}
.cfm-node.is-disabled { opacity: 0.65; }
.cfm-node.is-disabled.is-selected { opacity: 0.85; }
.cfm-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.88rem;
}
.cfm-select-row input { margin: 0; }
.cfm-multi-hint {
  margin: 0;
  font-size: 0.88rem;
}
.cfm-node-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.cfm-node-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.cfm-quick-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 8px;
  font-size: 0.9rem;
}
.cfm-quick-flags label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cfm-quick-flags input { margin: 0; }
.cfm-quick-count {
  margin: 0 0 8px;
  font-size: 0.9rem;
}
.cfm-lang-sync-hint {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.35;
}
.cfm-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
  color: #94a3b8;
  font-size: 0.85rem;
  letter-spacing: -2px;
  line-height: 1.2;
  user-select: none;
  cursor: grab;
}
.cfm-step-num {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cfm-node-badges { margin-bottom: 8px; }
.cfm-node-script {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.cfm-node-script.is-empty { font-style: italic; opacity: 0.75; }
.cfm-script-body {
  min-height: 180px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.cfm-node-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cfm-lifecycle-panel { margin-bottom: 16px; }
.cfm-lifecycle-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-left: 0;
}
.cfm-tool-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cfm-tool-group--lifecycle .btn.primary {
  box-shadow: 0 8px 18px rgba(244, 132, 95, 0.22);
}
.cfm-actions-more {
  position: relative;
  display: none;
}
.cfm-actions-more-summary {
  list-style: none;
  cursor: pointer;
}
.cfm-actions-more-summary::-webkit-details-marker { display: none; }
.cfm-actions-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(52, 58, 64, 0.14);
  z-index: 30;
}
.cfm-actions-more-menu .btn {
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
}
.cfm-builder > .crud-toolbar {
  flex-direction: column;
  align-items: stretch;
}
.cfm-builder .crud-toolbar-tools {
  margin-left: 0;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .cfm-tool-group--inspect,
  .cfm-tool-group--lifecycle {
    display: none;
  }
  .cfm-actions-more {
    display: block;
    width: 100%;
  }
  .cfm-actions-more-summary {
    width: 100%;
    justify-content: space-between;
  }
  .cfm-actions-more-menu {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }
}
.cfm-assign-add {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.cfm-assign-add .field { margin: 0; min-width: 220px; }
#assignTbody select {
  min-width: 220px;
  max-width: 100%;
}
.cfm-review-comments { margin-top: 12px; }
.cfm-event-list { margin: 8px 0 0; padding-left: 1.2rem; }
.cfm-event-list li { margin-bottom: 6px; }
.cfm-review-form { margin-top: 12px; max-width: 640px; }
.cfm-review-all { max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.cfm-review-node {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #f8fafc;
}
.cfm-review-node h4 { margin: 0 0 8px; }
.cfm-review-node p { margin: 4px 0; font-size: 0.92rem; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.bad { background: #fee2e2; color: #991b1b; }
.cfm-lang-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cfm-lang-tab {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
}
.cfm-lang-tab.on { background: #0f766e; color: #fff; border-color: #0f766e; }
.cfm-lang-tab.is-off { opacity: 0.55; }
.cfm-option-row, .cfm-branch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.cfm-option-row {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}
.cfm-option-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.cfm-option-head .cfm-opt-value {
  flex: 1 1 auto;
  min-width: 0;
}
.cfm-opt-del {
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  padding: 8px 0;
  line-height: 1;
}
.cfm-option-row .cfm-opt-label {
  width: 100%;
}
.cfm-option-row input, .cfm-branch-row input, .cfm-branch-row select {
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font: inherit;
}
.cfm-check { display: flex; align-items: center; gap: 8px; }
.cfm-version-row {
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
}
.dash-modal-card--wide { max-width: 720px; width: calc(100% - 24px); }
@media (max-width: 720px) {
  .cfm-meta-grid { grid-template-columns: 1fr; }
}

/* Add Leads form */
.add-lead-panel { max-width: 1100px; }
.add-lead-rows-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0 8px;
}
.add-lead-rows-head h3 { margin: 0; }
.add-lead-row { margin-bottom: 12px; }
.add-lead-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.add-lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.add-lead-grid .field-span-2 { grid-column: 1 / -1; }
.add-lead-verify { display: flex; gap: 8px; align-items: center; }
.add-lead-verify input { flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .add-lead-grid { grid-template-columns: 1fr; }
  .add-lead-grid .field-span-2 { grid-column: auto; }
}

/* Roles menu permissions */
.role-perm-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 0;
}
.role-perm-check .role-perm-key {
  font-size: 0.75rem;
  opacity: 0.65;
}
.role-perm-group h4 {
  margin: 14px 0 6px;
  font-size: 0.95rem;
  text-transform: none;
}