:root {
  color-scheme: light;

  --brand-primary: #F2C500;
  --brand-primary-hover: #DFB500;
  --brand-primary-soft: #FFF7D0;
  --brand-on-primary: #151515;

  --brand-secondary: #4A4A4A;
  --brand-secondary-soft: #DEDEDE;
  --brand-on-secondary: #FFFFFF;

  --app-bg: #F5F5F4;
  --sidebar-bg: #1D1D1D;
  --sidebar-soft: #303030;
  --sidebar-text: #F7F7F7;
  --sidebar-muted: #A8A8A8;

  --panel: #FFFFFF;
  --panel-soft: #F7F7F6;
  --text: #1C1C1C;
  --text-secondary: #444444;
  --muted: #5F5F5F;
  --line: #E3E3E1;

  /* Compatibility aliases. Components use semantic roles,
     runtime branding supplies the brand values. */
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-hover);
  --accent-soft: var(--brand-primary-soft);

  --action-primary-bg: var(--brand-primary);
  --action-primary-bg-hover: var(--brand-primary-hover);
  --action-primary-text: var(--brand-on-primary);

  --action-secondary-bg: var(--panel);
  --action-secondary-bg-hover: var(--brand-primary-soft);
  --action-secondary-text: var(--text);
  --action-secondary-border: var(--line);
  --action-secondary-border-hover: var(--brand-primary);

  --selection-bg: var(--brand-primary-soft);
  --selection-border: var(--brand-primary);
  --focus-ring: var(--brand-primary);

  --warning: #b97712;
  --warning-soft: #fff5df;

  --danger: #b42318;
  --success: #23724e;

  --radius-sm: 10px;
  --radius: 15px;
  --radius-lg: 20px;

  --sidebar-width: 236px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--text);
  background: var(--app-bg);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

input,
select {
  outline: none;
}

/* LOGIN */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #f1f3f1;
}

.login-card {
  width: min(100%, 390px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 14px 45px rgba(20, 35, 27, 0.08);
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 26px;
}

.login-card .muted {
  color: var(--muted);
}

.login-card label {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

.login-card label input {
  margin-top: 6px;
}

.login-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 13px;
}

.login-card button {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 12px;
  margin-top: 18px;
  background: var(--accent);
  color: var(--brand-on-primary);
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  margin-bottom: 18px;
  background: var(--accent);
  color: var(--brand-on-primary);
  font-weight: 800;
}

.form-error {
  color: var(--danger);
  min-height: 20px;
  margin-top: 10px;
  font-size: 13px;
}

/* APP SHELL */

.admin-app {
  min-height: 100vh;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;

  width: var(--sidebar-width);
  padding: 20px 14px;

  display: flex;
  flex-direction: column;

  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 8px 24px;
}

.brand-symbol {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border-radius: 11px;
  background: var(--accent);
  font-weight: 800;
  font-size: 13px;
}

.brand-copy strong {
  display: block;
  font-size: 15px;
}

.brand-copy span {
  display: block;
  margin-top: 2px;
  color: var(--sidebar-muted);
  font-size: 11px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 11px 12px;

  display: flex;
  align-items: center;
  gap: 11px;

  color: #cbd2cd;
  background: transparent;
  text-align: left;
  font-size: 14px;
}

.nav-item:hover {
  background: var(--sidebar-soft);
  color: #fff;
}

.nav-item.active {
  color: #fff;
  background: var(--sidebar-soft);
}

.nav-marker {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #616b65;
}

.nav-item.active .nav-marker {
  background: var(--brand-primary);
}

.sidebar-footer {
  margin-top: auto;
}

.logout-button {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #353d38;
  border-radius: 10px;
  background: transparent;
  color: var(--sidebar-muted);
  text-align: left;
}

.logout-button:hover {
  color: #fff;
  background: var(--sidebar-soft);
}

.admin-shell {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.app-topbar {
  min-height: 78px;
  padding: 16px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  background: rgba(244, 245, 244, 0.94);
  border-bottom: 1px solid var(--line);
}

.topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-topbar h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.app-topbar p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.mobile-menu-button {
  display: none;
  border: 0;
  background: transparent;
  font-size: 22px;
}

.secondary-button,
.text-button {
  border: 0;
  background: transparent;
}

.secondary-button {
  padding: 9px 13px;
  border: 1px solid var(--action-secondary-border);
  border-radius: 9px;
  background: var(--action-secondary-bg);
  color: var(--action-secondary-text);
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease;
}

.secondary-button:hover:not(:disabled) {
  border-color: var(--action-secondary-border-hover);
  background: var(--action-secondary-bg-hover);
}

.secondary-button:active:not(:disabled) {
  transform: translateY(1px);
}

.text-button {
  padding: 6px;
  color: var(--accent);
  font-size: 13px;
}

.app-content {
  padding: 26px 28px 42px;
}

.app-view {
  display: none;
}

.app-view.active {
  display: block;
}

/* GENERIC PANELS */

.workspace-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-heading {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.card-heading.compact {
  border-bottom: 0;
  padding-bottom: 8px;
}

.card-heading h2 {
  margin: 0;
  font-size: 16px;
}

.card-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.count-badge {
  min-width: 34px;
  height: 28px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 20px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

/* DASHBOARD */

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.status-card {
  min-height: 134px;
  padding: 18px;

  display: flex;
  flex-direction: column;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.status-card > span {
  color: var(--muted);
  font-size: 13px;
}

.status-card strong {
  margin-top: 14px;
  font-size: 30px;
  line-height: 1;
}

.status-card small {
  margin-top: auto;
  color: #8a928d;
  font-size: 11px;
}

.attention-list {
  padding: 8px 20px 16px;
}

.attention-item {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1.3fr) auto;
  align-items: center;
  gap: 18px;

  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.attention-item:last-child {
  border-bottom: 0;
}

.attention-item:hover strong {
  color: var(--accent);
}

.attention-client strong {
  display: block;
  font-size: 14px;
}

.attention-client span,
.attention-reason span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.attention-reason strong {
  font-size: 13px;
}

.attention-arrow {
  color: var(--muted);
}

.empty-inline {
  padding: 24px 0;
  color: var(--muted);
  font-size: 13px;
}

/* LEADS PAGE */

.page-toolbar {
  margin-bottom: 14px;
  padding: 14px;

  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 190px;
  gap: 10px;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-field {
  min-width: 0;
}

.filter-field label {
  display: block;
  margin: 0 0 5px 2px;
  color: var(--muted);
  font-size: 10px;
}

.filter-field input,
.filter-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 11px;

  background: #fff;
  color: var(--text);
}


.leads-workspace {
  min-height: calc(100vh - 190px);

  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 14px;
}

.lead-list-panel,
.lead-detail-panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.lead-list-panel {
  overflow: hidden;
}

.list-panel-heading {
  height: 54px;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--line);
}

.list-panel-heading strong {
  font-size: 14px;
}

.list-panel-heading span {
  color: var(--muted);
  font-size: 12px;
}

.lead-list {
  max-height: calc(100vh - 245px);
  overflow: auto;
  padding: 8px;
}

.lead-list-card {
  padding: 12px;

  border: 1px solid transparent;
  border-radius: 11px;

  cursor: pointer;
}

.lead-list-card + .lead-list-card {
  margin-top: 4px;
}

.lead-list-card:hover {
  background: var(--panel-soft);
}

.lead-list-card.active {
  background: var(--accent-soft);
  border-color: #c7ded2;
}

.lead-list-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.lead-list-top strong {
  font-size: 13px;
}

.lead-list-meta {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.status-pill {
  display: inline-flex;
  align-items: center;

  padding: 4px 7px;

  border-radius: 20px;
  background: var(--panel-soft);
  color: #5f6862;
  font-size: 10px;
  white-space: nowrap;
}

.lead-detail-panel {
  overflow: hidden;
}

.empty-state {
  min-height: 430px;

  display: grid;
  place-content: center;
  text-align: center;

  color: var(--muted);
}

.empty-state strong {
  color: #69716c;
  font-size: 15px;
}

.empty-state p {
  margin: 5px 0 0;
  font-size: 12px;
}

/* LEAD DETAIL */

.lead-detail-header {
  padding: 20px 22px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;

  border-bottom: 1px solid var(--line);
}

.lead-detail-header h2 {
  margin: 0;
  font-size: 22px;
}

.lead-detail-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.primary-button {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;

  transition:
    background .16s ease,
    transform .16s ease,
    opacity .16s ease;
}

.primary-button:hover:not(:disabled) {
  background: var(--action-primary-bg-hover);
}

.primary-button:active:not(:disabled) {
  transform: translateY(1px);
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.detail-tabs {
  height: 47px;
  padding: 0 22px;

  display: flex;
  align-items: flex-end;
  gap: 20px;

  border-bottom: 1px solid var(--line);
}

.detail-tab {
  height: 47px;
  padding: 0 2px;

  border: 0;
  border-bottom: 2px solid transparent;

  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.detail-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.detail-tab-view {
  display: none;
}

.detail-tab-view.active {
  display: block;
}

.lead-summary {
  padding: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-card {
  padding: 16px;

  background: var(--panel-soft);
  border-radius: 12px;
}

.detail-card.full {
  grid-column: 1 / -1;
}

.detail-card h3 {
  margin: 0 0 13px;
  font-size: 13px;
}

.field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
}

.detail-card input,
.detail-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
  background: #fff;
}

.form-stack {
  display: grid;
  gap: 10px;
}

.save-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.save-note {
  color: var(--muted);
  font-size: 10px;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fact {
  min-width: 0;
  padding: 10px;

  border: 1px solid #eaedea;
  border-radius: 9px;
  background: #fff;
}

.fact span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.fact strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.kv-list,
.package-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kv-list li,
.package-list li {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;

  padding: 9px 0;
  border-bottom: 1px solid #e6e9e7;
}

.kv-list li:last-child,
.package-list li:last-child {
  border-bottom: 0;
}

.kv-list span,
.package-list span {
  color: var(--muted);
  font-size: 11px;
}

.kv-list strong,
.package-list strong {
  font-size: 12px;
}

.qualification-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.qualification-item {
  padding: 10px 11px;

  display: flex;
  gap: 9px;

  border-radius: 9px;
  background: #fff;
  border: 1px solid #ece8de;
}

.qualification-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;

  margin-top: 5px;
  border-radius: 50%;
  background: var(--warning);
}

.qualification-item strong {
  display: block;
  font-size: 12px;
}

.qualification-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.qualification-ok {
  color: var(--success);
  font-size: 12px;
}

.conversation-wrap {
  padding: 18px 22px;
}

.conversation {
  max-height: calc(100vh - 280px);
  overflow: auto;

  display: flex;
  flex-direction: column;
  gap: 9px;
}

.message {
  max-width: 78%;
  padding: 10px 12px;

  border-radius: 11px;

  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 12px;
}

.message.user {
  align-self: flex-end;
  background: var(--accent-soft);
}

.message.assistant {
  align-self: flex-start;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

/* CLIENT TABLE */

.table-wrap {
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
}

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

.data-table tbody tr {
  cursor: pointer;
}

.data-table tbody tr:hover {
  background: var(--panel-soft);
}

.table-primary {
  font-weight: 600;
}

/* TEAM */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.team-card {
  padding: 18px;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.team-person {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}

.team-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.team-person strong {
  display: block;
  font-size: 14px;
}

.team-person span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.team-stat {
  padding: 10px;
  border-radius: 9px;
  background: var(--panel-soft);
}

.team-stat span {
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.team-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}

/* ANALYTICS */

.analytics-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.analytics-wide {
  grid-column: 1 / -1;
}

.bar-list {
  padding: 8px 20px 20px;
}

.bar-row + .bar-row {
  margin-top: 13px;
}

.bar-heading {
  margin-bottom: 6px;

  display: flex;
  justify-content: space-between;
  gap: 12px;

  font-size: 11px;
}

.bar-heading span:last-child {
  color: var(--muted);
}

.bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: 20px;
  background: #edf0ee;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* SETTINGS */

.settings-list {
  padding: 8px 20px 20px;
}

.settings-list > div {
  padding: 11px 0;

  display: flex;
  justify-content: space-between;
  gap: 20px;

  border-bottom: 1px solid var(--line);
}

.settings-list > div:last-child {
  border-bottom: 0;
}

.settings-list span {
  color: var(--muted);
  font-size: 11px;
}

.settings-list strong {
  font-size: 12px;
}

.integration-placeholder {
  margin: 6px 20px 20px;
  padding: 16px;

  border-radius: 10px;
  background: var(--panel-soft);

  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* RESPONSIVE */

@media (max-width: 1180px) {
  .status-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .leads-workspace {
    grid-template-columns: 310px minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 160ms ease;
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .admin-shell {
    margin-left: 0;
  }

  .mobile-menu-button {
    display: block;
  }

  .page-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .filter-search {
    grid-column: 1 / -1;
  }

  .leads-workspace {
    grid-template-columns: 1fr;
  }

  .lead-list {
    max-height: 330px;
  }

  .analytics-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .analytics-wide {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .app-topbar {
    padding: 14px 16px;
  }

  .app-content {
    padding: 16px;
  }

  .status-grid,
  .team-grid,
  .detail-grid,
  .fact-grid {
    grid-template-columns: 1fr;
  }

  .page-toolbar {
    grid-template-columns: 1fr;
  }

  .filter-search {
    grid-column: auto;
  }

  .attention-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .attention-arrow {
    display: none;
  }

  .lead-detail-header {
    flex-direction: column;
  }

  .detail-card.full {
    grid-column: auto;
  }

  .kv-list li,
  .package-list li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .message {
    max-width: 92%;
  }
}


/* Dynamic company branding */

.brand-logo-shell {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
}

.brand-logo-image {
  display: block;
  max-width: 38px;
  max-height: 38px;
  object-fit: contain;
}

.color-swatch {
  width: 15px;
  height: 15px;
  display: inline-block;
  flex: 0 0 15px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.12);
}

.brand-color-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* : compact workspace and accessible brand-aware interactions. */
[hidden], #sidebarBrandFallback[hidden], #sidebarBrandLogo[hidden] { display: none !important; }
:where(
  button,
  a,
  input,
  select,
  textarea,
  [tabindex]
):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.brand-symbol { color: var(--brand-on-primary); }
.brand-copy { min-width: 0; overflow-wrap: anywhere; }
.app-topbar { background: var(--app-bg); }
.app-content { max-width: 1680px; margin-inline: auto; padding: 22px 26px 32px; }
.status-grid { gap: 12px; margin-bottom: 16px; }
.status-card { min-height: 114px; padding: 16px 18px; border-top: 3px solid var(--brand-primary); }
.status-card strong { margin: 9px 0; font-size: 32px; font-variant-numeric: tabular-nums; }
.status-card small { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.attention-item { grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.2fr) auto; gap: 12px; border-radius: 6px; }
.attention-item:hover { background: var(--panel-soft); }
.attention-item:hover strong { color: var(--text); }
.pulse-content { padding: 18px 20px 8px; }
.pulse-number { font-size: 38px; margin-right: 12px; }
.pulse-content span, .pulse-content p { font-size: 13px; color: var(--muted); }
.data-scope, .section-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.text-button { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.leads-workspace { grid-template-columns: 310px minmax(0, 1fr); }
.lead-list-card { padding: 13px 11px; border-bottom: 1px solid var(--line); }
.lead-list-card.active { border-color: var(--brand-primary); box-shadow: inset 3px 0 var(--brand-primary); }
.lead-list-top { flex-wrap: wrap; align-items: center; }
.lead-list-top strong { font-size: 15px; overflow-wrap: anywhere; }
.lead-list-meta, .lead-detail-header p { font-size: 12px; line-height: 1.7; }
.status-pill { font-size: 11px; font-weight: 600; }
.status-pill[data-status="new"] { background: var(--brand-primary-soft); color: var(--text); }
.status-pill[data-status="in_work"] { background: #eaf0ff; color: #294b86; }
.status-pill[data-status="contacted"] { background: #f0eafa; color: #65438a; }
.status-pill[data-status="completed"] { background: #e8f3ed; color: #216042; }
.detail-card { border: 1px solid var(--line); background: var(--panel); }
.detail-card h3 { font-size: 15px; }
.field-label, .filter-field label { font-size: 12px; }
.fact span, .kv-list span, .package-list span, .save-note { font-size: 12px; }
.fact strong, .kv-list strong, .package-list strong, .primary-button, .detail-tab { font-size: 13px; }
.filter-field input:focus,
.filter-field select:focus {
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--brand-primary-soft);
}
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.summary-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.summary-item span { display: block; font-size: 12px; color: var(--muted); }
.summary-item strong { display: block; margin-top: 8px; font-size: 26px; font-variant-numeric: tabular-nums; }
.client-toolbar { grid-template-columns: minmax(0, 1fr) 240px; }
.data-table { min-width: 740px; }
.data-table th { font-size: 12px; background: var(--panel-soft); white-space: nowrap; }
.data-table td { font-size: 13px; padding-block: 16px; }
.data-table tbody tr:focus-within, .data-table tbody tr:hover { background: var(--brand-primary-soft); }
.client-link { border: 0; padding: 4px 0; background: transparent; color: var(--text); font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.team-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.team-card { padding: 22px; }
.team-avatar { width: 48px; height: 48px; color: var(--text); border-radius: 14px; font-size: 15px; }
.team-person strong { font-size: 17px; }
.team-person span, .team-stat span { font-size: 12px; }
.team-load { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.team-load strong { font-size: 32px; }
.team-load span, .team-updated { font-size: 12px; color: var(--muted); }
.team-load progress { width: 100%; height: 8px; accent-color: var(--brand-primary); }
.team-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-stat strong { font-size: 22px; }
.team-updated { line-height: 1.7; margin-bottom: 0; }
.team-updated strong { font-weight: 500; color: var(--text); }
.analytics-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.analytics-toolbar h2 { margin: 0; font-size: 18px; }
.analytics-toolbar select { margin-top: 6px; }
.bar-heading { font-size: 13px; }
.bar-heading span { overflow-wrap: anywhere; }
.bar-track { height: 10px; background: var(--panel-soft); }
.bar-fill { min-width: 0; }
.branding-form { display: grid; gap: 16px; padding: 20px; }
.branding-form label { display: grid; gap: 8px; font-size: 13px; }
.branding-form input { width: 100%; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); }
.branding-form input[type="color"] { height: 46px; padding: 4px; cursor: pointer; }
.brand-color-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.branding-form p { margin: 0; }

.widget-install-card {
  grid-column: 1 / -1;
}

.branding-form textarea {
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

#widgetInstallKey,
#widgetEmbedCode {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 12px;
}

#widgetInstallKey[readonly],
#widgetEmbedCode[readonly] {
  background: var(--panel-soft);
}

#widgetEmbedCode {
  min-height: 92px;
  overflow-wrap: anywhere;
}

#widgetInstallStatus,
#brandSaveStatus {
  min-height: 22px;
  font-size: 13px;
  line-height: 1.6;
}

#copyWidgetCodeBtn:disabled,
#rotateWidgetKeyBtn:disabled {
  cursor: not-allowed;
}

button:disabled { opacity: .6; cursor: wait; }
.brand-preview { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr); min-height: 290px; margin: 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.preview-sidebar { padding: 18px 12px; background: var(--preview-sidebar); color: white; font-size: 12px; display: flex; flex-direction: column; gap: 18px; }
.preview-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.preview-identity img { max-width: 36px; max-height: 36px; object-fit: contain; }
.preview-initials { padding: 8px; border-radius: 9px; background: var(--preview-primary); color: var(--preview-on-primary); font-weight: 700; }
.preview-nav { border-left: 3px solid var(--preview-primary); padding-left: 8px; }
.preview-main { padding: 24px 16px; background: var(--app-bg); }
.preview-main small, .preview-main p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.preview-main h3 { font-size: 18px; }
.preview-button { display: inline-block; padding: 10px; border-radius: 8px; background: var(--preview-primary); color: var(--preview-on-primary); font-size: 12px; }
.preview-note { margin: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1180px) { .dashboard-grid { grid-template-columns: 1fr; } .settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .leads-workspace { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .app-content { padding: 16px; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip { grid-template-columns: 1fr; gap: 8px; }
  .summary-item { display: flex; justify-content: space-between; align-items: center; }
  .summary-item strong { margin: 0; }
  .client-toolbar, .attention-item { grid-template-columns: 1fr; }
  .team-stats { grid-template-columns: repeat(2, 1fr); }
  .analytics-toolbar { align-items: stretch; flex-direction: column; }
  .brand-preview { margin: 12px; grid-template-columns: 1fr; }
  .save-row { flex-wrap: wrap; }
}

.team-load progress { appearance: none; border: 0; border-radius: 8px; overflow: hidden; background: var(--panel-soft); }
.team-load progress::-webkit-progress-bar { background: var(--panel-soft); border-radius: 8px; }
.team-load progress::-webkit-progress-value { background: var(--brand-primary); border-radius: 8px; }
.team-load progress::-moz-progress-bar { background: var(--brand-primary); border-radius: 8px; }
.team-card { container-type: inline-size; }
@container (max-width: 360px) { .team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* company calculations */
.calculations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.calculations-upload-card,
.calculations-preview-card {
  grid-column: 1 / -1;
}

.calculations-upload-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
}

.calculations-upload-box p {
  margin: 6px 0 0;
}

.calculations-file-button {
  position: relative;
  flex: none;
  cursor: pointer;
}

.calculations-file-info {
  margin: 0 20px 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 13px;
}

.calculations-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 0 20px 20px;
}

.calculations-summary-grid strong {
  display: block;
  margin-bottom: 10px;
}

.calculations-summary-grid ul {
  margin: 0;
  padding-left: 18px;
}

.calculations-summary-grid li + li {
  margin-top: 6px;
}

.calculations-developer-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calculations-developer-card .secondary-button {
  margin: 0 20px 20px;
  align-self: flex-start;
}

@media (max-width: 980px) {
  .calculations-grid,
  .calculations-summary-grid {
    grid-template-columns: 1fr;
  }

  .calculations-upload-box {
    align-items: flex-start;
    flex-direction: column;
  }
}

.calculations-preview-result {
  display: grid;
  gap: 20px;
}

.calculations-metrics {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.calculations-metrics > div {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.calculations-metrics span {
  font-size: 12px;
  opacity: .7;
}

.calculations-metrics strong {
  font-size: 24px;
}

.calculations-preview-section {
  display: grid;
  gap: 10px;
}

.calculations-preview-section p {
  margin: 0;
}

.calculations-warning-list {
  margin: 0;
  padding-left: 18px;
}

.calculations-warning-list li + li {
  margin-top: 6px;
}

@media (max-width: 760px) {
  .calculations-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* calculations workspace */

.calculations-preview-card
  #calculationsPreviewEmpty {
  padding: 20px;
  text-align: left;
}

.calculations-preview-result {
  display: grid;
  gap: 18px;
}

.calculations-overview-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.calculations-overview-card {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-primary);
  border-radius: 12px;
  background: var(--panel);
}

.calculations-overview-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.calculations-overview-card strong {
  display: block;
  margin-top: 7px;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.calculations-overview-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.calculations-preview-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.calculations-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.calculations-section-heading strong {
  font-size: 15px;
}

.calculations-section-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.calculations-diff-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.calculations-diff-grid > div {
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--panel-soft);
}

.calculations-diff-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.calculations-diff-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.calculations-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.calculations-table th,
.calculations-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

.calculations-table th {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.calculations-table tbody tr:hover {
  background: var(--brand-primary-soft);
}

.calculations-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.calculations-status-success {
  background: color-mix(
    in srgb,
    var(--success) 12%,
    var(--panel)
  );
  color: var(--success);
}

.calculations-status-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.calculations-status-new {
  background: var(--brand-primary-soft);
  color: var(--text);
}

.calculations-status-neutral {
  background: var(--panel-soft);
  color: var(--muted);
}

.calculations-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.calculations-pagination span {
  min-width: 52px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.calculations-page-button {
  min-width: 38px;
  min-height: 36px;
  padding: 7px 11px;
}

.calculations-warning-stack {
  display: grid;
  gap: 8px;
}

.calculations-warning-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--warning) 30%,
      var(--line)
    );
  border-radius: 10px;
  background: var(--warning-soft);
}

.calculations-warning-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--warning);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.calculations-warning-item strong {
  font-size: 12px;
}

.calculations-warning-item p {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.calculations-warning-empty {
  padding: 14px;
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

.calculations-preview-note {
  padding: 2px 2px 0;
}

.calculations-file-button {
  background: var(--action-primary-bg);
  border-color: transparent;
  color: var(--action-primary-text);
  font-weight: 600;
}

.calculations-file-button:hover {
  background: var(--action-primary-bg-hover);
  border-color: transparent;
}

.calculations-developer-card
  .secondary-button {
  background: var(--action-primary-bg);
  border-color: transparent;
  color: var(--action-primary-text);
  font-weight: 600;
}

.calculations-developer-card
  .secondary-button:hover {
  background: var(--action-primary-bg-hover);
  border-color: transparent;
}

@media (max-width: 1050px) {
  .calculations-overview-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .calculations-diff-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .calculations-overview-grid,
  .calculations-diff-grid {
    grid-template-columns: 1fr;
  }

  .calculations-preview-card
    #calculationsPreviewEmpty {
    padding: 14px;
  }

  .calculations-preview-section {
    padding: 14px;
  }

  .calculations-pagination {
    justify-content: center;
  }
}

.calculations-delivery-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.calculations-delivery-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.calculations-delivery-card strong {
  display: block;
  font-size: 13px;
}

.calculations-delivery-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.calculations-section-count {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding-inline: 9px;
  border-radius: 999px;
  background: var(--brand-primary-soft);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calculations-additional-routes {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.calculations-additional-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-width: 0;
  padding: 10px 12px;

  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.calculations-additional-route strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.calculations-additional-route span {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.calculations-change-group {
  display: grid;
  gap: 9px;
  padding-top: 4px;
}

.calculations-change-group > strong {
  font-size: 12px;
}

/* Calculations readability */
.calculations-overview-card span {
  font-size: 13px;
  font-weight: 500;
}

.calculations-overview-card small {
  font-size: 12px;
  font-weight: 500;
}

.calculations-section-heading p {
  font-size: 13px;
  line-height: 1.5;
}

.calculations-additional-route span {
  font-size: 12px;
  font-weight: 500;
}

.calculations-table th {
  font-size: 12px;
  font-weight: 600;
}

.calculations-pagination span {
  font-size: 13px;
  font-weight: 500;
}

/* Calculations secondary text */
.calculations-overview-card span,
.calculations-overview-card small,
.calculations-section-heading p,
.calculations-diff-grid span,
.calculations-table th,
.calculations-pagination span,
.calculations-warning-empty,
.calculations-delivery-card p,
.calculations-additional-route span {
  color: var(--text-secondary);
}

.calculations-overview-card span,
.calculations-section-heading p {
  font-weight: 500;
}

.calculations-additional-route span,
.calculations-table th {
  font-weight: 600;
}

/* Calculations: important data uses primary text */
.calculations-overview-card span,
.calculations-overview-card strong,
.calculations-overview-card small,
.calculations-additional-route strong,
.calculations-additional-route span,
.calculations-table td,
.calculations-table th,
.calculations-pagination span {
  color: var(--text);
}

/* Only explanatory copy stays secondary */
.calculations-section-heading p,
.calculations-preview-note,
.calculations-delivery-card p,
.calculations-warning-empty {
  color: var(--text-secondary);
}

/* Calculations: headings and labels use primary text */
.calculations-preview-result strong,
.calculations-preview-section > .calculations-section-heading strong,
.calculations-overview-card span,
.calculations-table th,
.calculations-change-group > strong,
.calculations-additional-route strong {
  color: var(--text);
}

/* Only explanatory text remains secondary */
.calculations-preview-section > .calculations-section-heading p,
.calculations-preview-note,
.calculations-delivery-card p,
.calculations-warning-empty {
  color: var(--text-secondary);
}