@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --bg: #f7f8fb;
  --bg-2: #eef2f6;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  --ink: #111827;
  --muted: #667085;
  --soft: #f1f5f9;
  --line: #d9e2ec;
  --line-strong: #bdc9d6;
  --brand: #0f766e;
  --brand-2: #1d4ed8;
  --accent: #b45309;
  --gold: #b7791f;
  --blue: #2563eb;
  --danger: #b42318;
  --ok: #047857;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --border: var(--line);
  --text: var(--ink);
  --shadow: 0 22px 54px rgba(15, 23, 42, 0.11);
  --shadow-sm: 0 10px 26px rgba(15, 23, 42, 0.07);
  --shadow-soft: var(--shadow-sm);
}

/* v2.9.187 public HIPAA-ready trust note */
.kv-hipaa-note {
  width: min(1320px, calc(100% - 40px));
  margin: 26px auto 0;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  border: 1px solid rgba(13, 119, 112, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(225, 248, 244, 0.86), rgba(255, 255, 255, 0.94)),
    #fff;
  box-shadow: 0 18px 46px rgba(18, 38, 63, 0.08);
}

.signup-landing .kv-hipaa-note {
  width: 100%;
}

.kv-hipaa-note-icon {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  color: #057b73;
  border-radius: 18px;
  background: rgba(13, 119, 112, 0.1);
}

.kv-hipaa-note-icon svg {
  width: 28px;
  height: 28px;
}

.kv-hipaa-note h2 {
  margin: 2px 0 8px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.kv-hipaa-note p:not(.eyebrow) {
  margin: 0;
  max-width: 980px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .kv-hipaa-note {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    padding: 18px;
    margin-top: 18px;
  }

  .signup-landing .kv-hipaa-note {
    width: 100%;
  }

  .kv-hipaa-note-icon {
    width: 48px;
    height: 48px;
  }
}

.database-health-hero,
.database-cron-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.aws-database-hero {
  background:
    radial-gradient(circle at 8% 12%, rgba(0, 128, 118, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.92));
}

.database-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.database-hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(0, 128, 118, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
}

.database-hero-tags i {
  width: 16px;
  height: 16px;
}

.database-status-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  min-width: 220px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 128, 118, 0.1), rgba(34, 93, 209, 0.08));
}

.database-status-pill i {
  grid-row: span 2;
  color: var(--accent);
}

.database-status-pill span {
  color: var(--muted);
  font-size: 0.82rem;
}

.database-cron-card code {
  display: block;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  white-space: normal;
  word-break: break-word;
}

.database-aws-panel,
.database-readiness-panel,
.database-table-panel {
  margin-top: 16px;
}

.database-runtime-grid,
.database-readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.database-runtime-grid article,
.database-readiness-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-soft);
}

.database-runtime-grid article {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 4px 10px;
}

.database-runtime-grid i,
.database-readiness-card > i {
  width: 34px;
  height: 34px;
  padding: 8px;
  color: var(--accent);
  border-radius: 12px;
  background: rgba(0, 128, 118, 0.1);
}

.database-runtime-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.database-runtime-grid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.96rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-readiness-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.database-readiness-card strong {
  display: block;
  margin-bottom: 8px;
}

.database-readiness-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.database-aws-cron {
  align-items: flex-start;
}

.database-cron-commands {
  display: grid;
  gap: 8px;
  min-width: min(620px, 100%);
}

.database-cron-commands label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.database-stats-table td:first-child {
  min-width: 210px;
}

.database-stats-table td:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

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

.database-task-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-soft);
}

.database-task-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.database-task-head i {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 9px;
  color: var(--accent);
  border-radius: 12px;
  background: rgba(0, 128, 118, 0.1);
}

.database-task-head h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.database-task-head p,
.database-task-card p {
  margin: 0;
}

.database-task-count {
  font-size: 2rem;
  line-height: 1;
}

.database-task-body {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.database-task-body span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.database-task-card details {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: rgba(248, 251, 252, 0.8);
}

.database-task-card summary {
  cursor: pointer;
  font-weight: 800;
}

.database-task-card ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

.database-confirm-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.database-confirm-line input {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  .database-health-hero,
  .database-cron-card {
    align-items: stretch;
    flex-direction: column;
  }

  .database-runtime-grid,
  .database-readiness-grid {
    grid-template-columns: 1fr;
  }

  .database-task-grid {
    grid-template-columns: 1fr;
  }
}

.aws-ops-shell {
  display: grid;
  gap: 18px;
}

.aws-ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 18px;
  padding: 26px;
  border: 1px solid rgba(13, 119, 112, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 10%, rgba(15, 118, 110, 0.15), transparent 34%),
    radial-gradient(circle at 95% 8%, rgba(37, 99, 235, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
  box-shadow: var(--shadow);
}

.aws-ops-hero-main h2 {
  margin: 4px 0 10px;
  max-width: 880px;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.06;
}

.aws-ops-hero-main p:not(.eyebrow) {
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.62;
}

.aws-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.aws-hero-tags span,
.aws-kpi-card small,
.aws-posture-card .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.aws-hero-tags span {
  padding: 8px 12px;
  border: 1px solid rgba(13, 119, 112, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 900;
}

.aws-hero-tags i {
  width: 16px;
  height: 16px;
}

.aws-ops-status-stack {
  display: grid;
  gap: 12px;
}

.aws-ops-status-stack article {
  padding: 18px;
  border: 1px solid rgba(13, 119, 112, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
}

.aws-ops-status-stack span,
.aws-kpi-card span,
.aws-runtime-grid span,
.aws-command-stack label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aws-ops-status-stack strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--ink);
  font-size: 1.42rem;
}

.aws-ops-status-stack small {
  color: var(--muted);
  font-weight: 800;
  word-break: break-word;
}

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

.aws-kpi-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}

.aws-kpi-card i {
  width: 34px;
  height: 34px;
  padding: 8px;
  margin-bottom: 12px;
  color: #0f766e;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.1);
}

.aws-kpi-card strong {
  display: block;
  min-height: 2.25em;
  margin: 7px 0 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.12;
  text-overflow: ellipsis;
}

.aws-kpi-card small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.aws-runtime-panel,
.aws-posture-panel,
.aws-table-panel,
.aws-maintenance-panel,
.aws-cron-card,
.aws-boundary-panel {
  margin-top: 0;
}

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

.aws-runtime-grid article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.86));
}

.aws-runtime-grid i,
.aws-posture-card > i,
.aws-boundary-panel i {
  width: 38px;
  height: 38px;
  padding: 9px;
  color: #0f766e;
  border-radius: 13px;
  background: rgba(15, 118, 110, 0.1);
}

.aws-runtime-grid strong {
  display: block;
  min-width: 0;
  margin: 4px 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aws-runtime-grid small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.aws-posture-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.9);
}

.aws-posture-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}

.aws-posture-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.48;
}

.aws-cron-card {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(340px, 1fr);
  gap: 18px;
  align-items: start;
  border-color: rgba(37, 99, 235, 0.18);
  background:
    radial-gradient(circle at 94% 18%, rgba(37, 99, 235, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.94);
}

.aws-command-stack {
  display: grid;
  gap: 8px;
}

.aws-command-stack code {
  display: block;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0f172a;
  color: #e0f2fe;
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.aws-boundary-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border-style: dashed;
  background: rgba(248, 251, 252, 0.86);
}

.aws-boundary-panel h2 {
  margin-bottom: 6px;
}

@media (max-width: 1180px) {
  .aws-kpi-grid,
  .aws-runtime-grid,
  .aws-posture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aws-cron-card,
  .aws-ops-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .aws-ops-hero,
  .aws-kpi-card,
  .aws-runtime-grid article,
  .aws-posture-card,
  .aws-cron-card,
  .aws-boundary-panel {
    border-radius: 16px;
  }

  .aws-ops-hero {
    padding: 18px;
  }

  .aws-kpi-grid,
  .aws-runtime-grid,
  .aws-posture-grid {
    grid-template-columns: 1fr;
  }

  .aws-boundary-panel {
    grid-template-columns: 1fr;
  }
}

.pwa-dashboard-card {
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(8, 127, 123, .12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,247,255,.92));
}
.pwa-dashboard-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}
.pwa-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.pwa-actions .button[hidden] {
  display: none;
}
.pwa-dashboard-card.push-enabled {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px 18px;
}
.pwa-dashboard-card.push-enabled h2 {
  font-size: 18px;
  margin-bottom: 2px;
}
.pwa-dashboard-card.push-enabled small {
  margin-top: 3px;
}
.pwa-dashboard-card.push-enabled .pwa-actions .button.secondary {
  display: none;
}
.pwa-dashboard-card.push-enabled .pwa-actions .button.primary {
  min-height: 42px;
  padding: 10px 14px;
  box-shadow: none;
}
.pwa-install-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-width: 760px;
}
.pwa-install-steps span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.pwa-install-steps svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex: 0 0 auto;
}
.pwa-install-steps b {
  color: var(--ink);
}

@media (max-width: 720px) {
  .pwa-install-steps {
    grid-template-columns: 1fr;
  }
  .pwa-actions {
    width: 100%;
    justify-content: stretch;
  }
  .pwa-actions .button {
    flex: 1 1 150px;
  }
}

.sms-settings-form .toggle-grid {
  align-items: stretch;
}

.sms-hero-polished {
  align-items: center;
  overflow: hidden;
  position: relative;
}

.sms-hero-polished::after {
  content: "";
  position: absolute;
  right: 34px;
  top: 24px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 118, 110, .16), transparent 66%);
  pointer-events: none;
}

.sms-feature-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.sms-feature-badges span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon copy";
  align-items: center;
  column-gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .76);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.sms-feature-badges svg {
  grid-area: icon;
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.sms-feature-badges strong {
  grid-area: title;
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.sms-feature-badges small {
  grid-area: copy;
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .sms-feature-badges {
    grid-template-columns: 1fr;
  }
}

/* v2.9.164: compact table no-results rows and consistent mobile tables. */
.table-empty-row[hidden] {
  display: none !important;
}

.table-empty-row td,
.table-empty-cell {
  padding: 16px !important;
  max-width: none !important;
  white-space: normal !important;
  text-align: center;
}

.table-empty-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 0;
  padding: 12px 14px;
  border: 1px dashed rgba(15,118,110,.24);
  border-radius: 14px;
  background: rgba(240,253,250,.58);
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
}

.table-empty-state svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: #0f766e;
}

.table-empty-state strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.table-empty-state span {
  color: #64748b;
  font-weight: 750;
}

@media (max-width: 760px) {
  .table-panel,
  .records-table-wrap,
  .report-table-wrap,
  .dashboard-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100%;
  }

  .table-panel table,
  .records-table-wrap table,
  .report-table-wrap table,
  .dashboard-table-wrap table {
    display: table !important;
    width: max-content !important;
    min-width: 860px !important;
    border-collapse: separate;
  }

  .table-panel thead,
  .records-table-wrap thead,
  .report-table-wrap thead,
  .dashboard-table-wrap thead {
    display: table-header-group !important;
  }

  .table-panel tbody,
  .records-table-wrap tbody,
  .report-table-wrap tbody,
  .dashboard-table-wrap tbody {
    display: table-row-group !important;
  }

  .table-panel tr,
  .records-table-wrap tr,
  .report-table-wrap tr,
  .dashboard-table-wrap tr {
    display: table-row !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .table-panel th,
  .records-table-wrap th,
  .report-table-wrap th,
  .dashboard-table-wrap th,
  .table-panel td,
  .records-table-wrap td,
  .report-table-wrap td,
  .dashboard-table-wrap td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 11px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle;
  }

  .table-panel td::before,
  .records-table-wrap td::before,
  .report-table-wrap td::before,
  .dashboard-table-wrap td::before {
    content: none !important;
  }

  .table-empty-row {
    display: table-row !important;
  }

  .table-empty-row[hidden] {
    display: none !important;
  }

  .table-empty-row td,
  .table-empty-cell {
    display: table-cell !important;
    padding: 12px !important;
    white-space: normal !important;
  }

  .table-empty-state {
    display: flex;
    width: min(420px, calc(100vw - 96px));
    margin: 0 auto;
    padding: 10px 12px;
  }

  .table-empty-state span {
    display: none;
  }
}

.sms-template-list {
  display: grid;
  gap: 14px;
}

.sms-template-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.78);
  display: grid;
  gap: 12px;
}

.sms-template-card h3 {
  margin: 0;
  font-size: 17px;
}

.sms-template-card textarea {
  min-height: 92px;
}

.sms-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 800;
}

.sms-active-toggle input {
  width: 18px;
  height: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.10), transparent 340px),
    linear-gradient(225deg, rgba(29, 78, 216, 0.09), transparent 360px),
    linear-gradient(180deg, #ffffff 0, var(--bg) 420px, var(--bg-2) 100%);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  letter-spacing: 0;
  line-height: 1.12;
}
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

a { color: inherit; text-decoration: none; }
img, svg, canvas, video, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(8, 122, 114, .5);
  box-shadow: 0 0 0 4px rgba(8, 122, 114, .10);
}
textarea { resize: vertical; }
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  padding: 0;
  border-radius: 5px;
  accent-color: var(--brand);
  box-shadow: none;
  flex: 0 0 18px;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  box-shadow: 0 0 0 4px rgba(8, 122, 114, .10);
}
.searchable-select {
  position: relative;
  width: 100%;
}
.searchable-select .searchable-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.searchable-select-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  text-align: left;
}
.searchable-select-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchable-select-button svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}
.searchable-select.open .searchable-select-button,
.searchable-select-button:focus-visible {
  border-color: rgba(8, 122, 114, .5);
  box-shadow: 0 0 0 4px rgba(8, 122, 114, .10);
}
.searchable-select-panel {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.searchable-select-panel input {
  min-height: 40px;
  margin-bottom: 8px;
  border-radius: 12px;
}
.searchable-select-options {
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
}
.searchable-select-option,
.searchable-select-empty {
  width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
  text-align: left;
}
.searchable-select-option:hover,
.searchable-select-option[aria-selected="true"] {
  background: rgba(15, 118, 110, .09);
  color: var(--brand);
}
.searchable-select-empty {
  color: var(--muted);
  cursor: default;
}

.shell,
.content,
.page-shell,
.panel,
.records-shell,
.table-panel,
.dashboard-table-wrap,
.billing-shell,
.booking-public,
.premium-booking-flow,
.public-form-shell,
.staff-profile-hero,
.client-profile-hero,
.forms-hero,
.billing-hero {
  max-width: 100%;
  min-width: 0;
}
.shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(14px, 3vw, 36px);
  border-bottom: 1px solid rgba(219, 228, 235, .8);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 224px;
  flex: 0 0 auto;
  grid-column: 1;
  grid-row: 1;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: white;
  background: linear-gradient(135deg, var(--brand), #123846 62%, var(--accent));
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 12px 24px rgba(8,122,114,.22);
  overflow: hidden;
  flex: 0 0 auto;
}
.brand-mark.has-logo {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.brand strong { display: block; line-height: 1.05; font-size: 15px; }
.brand small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;
  grid-column: 2;
  grid-row: 1;
}
.nav-group { position: relative; flex: 0 0 auto; padding-bottom: 8px; margin-bottom: -8px; }
.nav a, .pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(219, 228, 235, .95);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #536171;
  font-size: 13px;
  font-weight: 800;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}
.nav a span { white-space: nowrap; }
.nav a:hover, .button.secondary:hover {
  color: var(--ink);
  border-color: rgba(8, 122, 114, .35);
  background: #fff;
  transform: translateY(-1px);
}
.nav a.active, .pill.active {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 24px rgba(8,122,114,.18);
}
.nav svg, .button svg, .icon-button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mega-menu {
  display: none;
  position: absolute;
  top: 45px;
  left: 0;
  min-width: 238px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  z-index: 60;
}
.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.mega-menu a {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  min-height: 38px;
  box-shadow: none;
}
.nav-group:hover .mega-menu, .nav-group:focus-within .mega-menu { display: grid; gap: 3px; }

.user-pill {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  font-size: 13px;
  white-space: nowrap;
  grid-column: 3;
  grid-row: 1;
  cursor: pointer;
}
.user-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(15,118,110,.16);
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-avatar.empty {
  border: 1px solid rgba(255,255,255,.55);
}
.user-pill-main {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}
.user-pill-main small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}
.account-menu .status-dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px rgba(40,201,130,.14);
}
.account-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 248px;
  display: none;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(15,23,42,.14);
  z-index: 120;
}
.account-menu-panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.account-menu:hover .account-menu-panel,
.account-menu:focus-within .account-menu-panel {
  display: grid;
}
.account-menu-head {
  display: grid;
  gap: 3px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid rgba(226,232,240,.95);
}
.account-menu-head strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}
.account-menu-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: normal;
}
.account-menu-panel a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 9px;
  border-radius: 11px;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
}
.account-menu-panel a:hover {
  color: var(--brand);
  background: rgba(15,118,110,.08);
}
.account-menu-panel a svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.search-location-row {
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.global-search {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
}
.global-search svg { width: 16px; height: 16px; color: var(--muted); }
.global-search input {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.global-search input:focus { box-shadow: none; }
.user-pill > a { color: var(--brand); font-weight: 900; }
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: #28c982;
  box-shadow: 0 0 0 5px rgba(40,201,130,.14);
}
.menu-button { display: none !important; }
.mobile-back-button { display: none !important; }
.mobile-bottom-nav { display: none; }

.workspace {
  width: min(1440px, 100%);
  margin: 0 auto;
}
.view { padding: 30px clamp(14px, 3vw, 38px); }
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.page-head h1 {
  max-width: 920px;
  margin: 4px 0 6px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}
.compact-head { align-items: center; margin-bottom: 16px; }
.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.muted { color: var(--muted); margin: 0; }
.small { font-size: 13px; }

.button, .icon-button {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.button {
  min-height: 44px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
  color: white;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(29, 78, 216, .18);
}
.button span,
.button strong {
  color: inherit !important;
  font-size: inherit;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(29, 78, 216, .22);
  filter: saturate(1.05);
}
.button.secondary {
  color: var(--ink);
  border-color: var(--line);
  background: #fff;
  box-shadow: none;
}
.button.secondary:hover {
  color: #0f766e;
  border-color: rgba(15, 118, 110, .35);
  background: #f8fbff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}
.button.danger-button,
.danger-button {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #b42318, #e11d48);
  box-shadow: 0 14px 28px rgba(180,35,24,.18);
}
.icon-button {
  width: 42px;
  height: 42px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}
.icon-button:hover {
  color: var(--brand);
  border-color: rgba(15, 118, 110, .35);
  background: #f8fbff;
  transform: translateY(-1px);
}
.icon-button.danger {
  color: var(--danger);
  border-color: #fecdca;
  background: #fff6f5;
}
.inline-action,
.inline-form { margin: 0; display: inline-flex; }
.row-actions, .form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.row-actions form,
.staff-actions form {
  margin: 0;
}
.invoice-create-panel form {
  display: grid;
  gap: 18px;
}
.invoice-section-title {
  margin-top: 8px;
}
.invoice-builder-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(15,118,110,.06), rgba(255,255,255,.96));
}
.invoice-item-form [hidden] {
  display: none !important;
}
.invoice-summary-panel form + form {
  margin-top: 12px;
}
.action-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.action-button svg { width: 15px; height: 15px; }
.action-button:hover {
  transform: translateY(-1px);
  border-color: rgba(15,118,110,.34);
  background: #f8fbff;
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.action-button.ghost { color: var(--muted); }
.action-button.danger {
  color: var(--danger);
  border-color: #fecdca;
  background: #fff6f5;
}
.wide-button { width: 100%; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.metric, .panel, .plan, .auth-card, .table-panel, .install-card, .module-card {
  background: var(--panel);
  border: 1px solid rgba(219, 228, 235, .88);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.metric {
  min-height: 128px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  position: relative;
}
.metric::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -32px;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: rgba(8,122,114,.08);
}
.metric svg { color: var(--brand); }
.metric span, .metric small { color: var(--muted); }
.metric strong { font-size: 28px; letter-spacing: 0; }
.metric span { font-size: 14px; }
.metric small { font-size: 12px; }

.layout-two, .booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .82fr);
  gap: 18px;
  margin-top: 18px;
}
.panel, .auth-card, .install-card, .module-card { padding: 20px; }
.view.active > * + * {
  margin-top: 18px;
}
.panel > * + *,
.module-card > * + *,
.form-template-card > * + * {
  margin-top: 12px;
}
.panel .button,
.module-card .button,
.form-template-card .button {
  margin-top: 4px;
}
.form-page-card { max-width: 1080px; }

.email-signature-preview {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
  padding: 18px;
  overflow: auto;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 20px;
  align-items: start;
}
.auth-card {
  max-width: 540px;
  margin: 46px auto;
}
.wide-auth, .install-card { max-width: 940px; }
.signup-shell {
  width: min(1180px, 100%);
  margin: 34px auto;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 22px;
  align-items: stretch;
}
.signup-intro,
.signup-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}
.signup-intro {
  min-height: 620px;
  padding: 34px;
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(135deg, rgba(15,118,110,.18), rgba(255,255,255,.9) 45%),
    linear-gradient(225deg, rgba(29,78,216,.14), transparent 48%),
    #fff;
}
.signup-intro h1 {
  margin: 8px 0 14px;
  max-width: 500px;
  font-size: 42px;
}
.signup-intro p {
  max-width: 520px;
  color: var(--muted);
  font-size: 16px;
}
.signup-benefits {
  display: grid;
  gap: 10px;
}
.signup-benefits span {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(217,226,236,.86);
  border-radius: 14px;
  background: rgba(255,255,255,.74);
  font-weight: 850;
}
.signup-benefits svg { width: 18px; height: 18px; color: var(--brand); }
.signup-card {
  max-width: none;
  margin: 0;
  padding: 28px;
  background: rgba(255,255,255,.94);
}
.signup-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}
.signup-card-head h2 {
  margin: 3px 0 0;
  font-size: 30px;
}
.signup-form {
  gap: 10px;
  align-items: start;
}
.signup-form input[readonly] {
  color: var(--brand);
  font-weight: 850;
  background: #f8fbff;
}
.signup-form label {
  align-self: start;
}
.phone-input-group {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}
.phone-prefix,
.phone-input-group input {
  min-height: 48px;
}
.phone-prefix {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #0f766e;
  font-weight: 900;
  color: #0f766e;
  background:
    linear-gradient(180deg, rgba(15,118,110,.07), rgba(255,255,255,.98)),
    #fff;
}
select.phone-prefix {
  width: 100%;
  padding-inline: 10px 24px;
  font-size: 13px;
}
.phone-input-group input {
  letter-spacing: .02em;
}
.phone-label small {
  color: #64748b;
  font-weight: 700;
}
.signup-submit {
  display: grid;
  gap: 10px;
}
.signup-submit .button {
  min-height: 50px;
}
.login-shell {
  width: min(1080px, 100%);
  margin: 46px auto;
  display: grid;
  grid-template-columns: minmax(300px, .95fr) minmax(360px, .72fr);
  gap: 22px;
  align-items: stretch;
}
.login-brand-panel,
.login-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}
.login-brand-panel {
  min-height: 520px;
  padding: 34px;
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(135deg, rgba(15,118,110,.16), rgba(255,255,255,.92) 45%),
    linear-gradient(225deg, rgba(29,78,216,.14), transparent 46%),
    #fff;
}
.login-brand-panel h1 {
  max-width: 580px;
  margin: 8px 0 14px;
  font-size: 42px;
}
.login-brand-panel p {
  max-width: 560px;
  color: var(--muted);
  font-size: 16px;
}
.login-card {
  max-width: none;
  margin: 0;
  padding: 30px;
  align-self: center;
  background: rgba(255,255,255,.95);
}
.login-card .brand-mark { margin-bottom: 18px; }
.login-card h2 { margin: 0 0 6px; font-size: 30px; }
.auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.password-control {
  position: relative;
  display: block;
  width: 100%;
}
.password-control input {
  padding-right: 52px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  box-shadow: none;
  transition: color .16s ease, background .16s ease, transform .16s ease;
  transform: translateY(-50%);
}
.password-toggle:hover,
.password-toggle:focus {
  color: var(--brand);
  background: rgba(15, 118, 110, .09);
}
.password-toggle:focus-visible {
  outline: 2px solid rgba(15, 118, 110, .35);
  outline-offset: 2px;
}
.password-toggle svg {
  width: 18px;
  height: 18px;
}
.password-strength {
  display: grid;
  gap: 8px;
  margin-top: 7px;
  padding: 10px;
  border: 1px solid rgba(217, 226, 236, .88);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248, 251, 255, .92), rgba(255, 255, 255, .96));
}
.login-card .password-control + .password-strength {
  display: none;
}
.password-strength-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.password-strength-head strong {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.password-strength-head span {
  min-width: 90px;
  text-align: right;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}
.password-strength-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6edf3;
}
.password-strength-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #94a3b8;
  transition: width .22s ease, background .22s ease;
}
.password-strength.strength-weak .password-strength-bar i { background: #e11d48; }
.password-strength.strength-medium .password-strength-bar i { background: linear-gradient(90deg, #b7791f, #0f766e); }
.password-strength.strength-strong .password-strength-bar i { background: linear-gradient(90deg, #0f766e, #1d4ed8); }
.password-strength.strength-weak .password-strength-head span { color: #be123c; }
.password-strength.strength-medium .password-strength-head span { color: #b45309; }
.password-strength.strength-strong .password-strength-head span { color: var(--brand); }
.password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.password-rules span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid #dbe4eb;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}
.password-rules span.met {
  color: #047857;
  border-color: #bbf7d0;
  background: #ecfdf3;
}
.password-strength-message {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.form-grid label > small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}
.checkbox-line {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  color: var(--text) !important;
}
.checkbox-line input {
  width: 16px;
  height: 16px;
}
.sms-consent-line {
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, .9);
  font-size: 13px;
  line-height: 1.45;
}
.sms-consent-line input {
  flex: 0 0 auto;
  margin-top: 3px;
}
.sms-consent-line span {
  color: #536171;
  font-weight: 750;
}
.sms-consent-line a {
  color: var(--brand);
  font-weight: 900;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.form-grid.single { grid-template-columns: 1fr; }
.form-grid label {
  display: grid;
  gap: 7px;
  color: #536171;
  font-size: 13px;
  font-weight: 800;
}
.wide { grid-column: 1 / -1; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.module-card {
  min-height: 158px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,252,253,.88));
}
.module-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand);
  background: linear-gradient(135deg, rgba(8,122,114,.12), rgba(200,111,61,.10));
}
.module-icon svg { width: 19px; height: 19px; }
.module-card h3 { margin: 0; font-size: 18px; }
.module-card p { margin: 0; color: var(--muted); }
.module-card .button { justify-self: start; margin-top: auto; }
.focus-card {
  background:
    linear-gradient(135deg, rgba(8,122,114,.08), transparent 62%),
    #fff;
}

.command-center, .home-hero, .home-band, .home-section {
  border: 1px solid rgba(219,228,235,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
}
.command-center {
  margin: 18px 0;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.command-center h2 { margin: 4px 0 6px; font-size: 24px; }
.dashboard-start-card {
  width: 100%;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.12), rgba(37,99,235,.08) 58%, rgba(255,255,255,.96)),
    #fff;
  box-shadow: var(--shadow-sm);
}
.dashboard-start-card > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.dashboard-start-card h2 {
  margin: 2px 0 4px;
  font-size: 22px;
}
.dashboard-start-card p {
  margin: 0;
}
.booking-link-card {
  margin: 18px 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(15,118,110,.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.92) 54%),
    #fff;
  box-shadow: var(--shadow-sm);
}
.booking-link-card h2 { margin: 2px 0 4px; font-size: 21px; }
.booking-link-card p { margin: 0; overflow-wrap: anywhere; }
.booking-link-card .booking-link-note {
  margin-top: 8px;
  max-width: 780px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.booking-link-card a:not(.button) {
  color: var(--brand);
  font-weight: 850;
}
.store-link-card {
  border-color: rgba(37,99,235,.22);
  background:
    linear-gradient(135deg, rgba(37,99,235,.09), rgba(255,255,255,.94) 54%),
    #fff;
}

.dashboard-bottom {
  align-items: start;
}
.dashboard-appointments-panel {
  overflow: hidden;
}
.dashboard-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.dashboard-appointments-table {
  min-width: 620px;
}
.dashboard-appointments-table th,
.dashboard-appointments-table td {
  padding: 12px 14px;
}
.dashboard-appointments-table td {
  vertical-align: middle;
}
.dashboard-appointments-table td strong,
.dashboard-appointments-table td span {
  display: block;
}
.dashboard-appointments-table td strong {
  font-size: 13px;
  line-height: 1.25;
}
.dashboard-appointments-table td span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.dashboard-appointments-table td:last-child {
  width: 88px;
  text-align: right;
}
.status-pill {
  display: inline-flex !important;
  width: max-content;
  margin: 0 6px 5px 0 !important;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 900 !important;
}
.status-pill.good {
  color: var(--ok) !important;
  background: #ecfdf3;
}
.status-pill.neutral {
  color: #475467 !important;
  background: #f1f5f9;
}
.business-health-card {
  display: grid;
  gap: 16px;
}
.health-score {
  min-width: 72px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  font-weight: 950;
  font-size: 14px;
  box-shadow: 0 10px 20px rgba(15,118,110,.16);
}
.health-list {
  display: grid;
  gap: 10px;
}
.health-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}
.health-item > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--brand);
  background: rgba(15,118,110,.10);
}
.health-item svg {
  width: 16px;
  height: 16px;
}
.health-item strong,
.health-item small {
  display: block;
}
.health-item strong {
  font-size: 14px;
}
.health-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.health-item b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
}
.health-item.ready b {
  color: var(--ok);
  background: #ecfdf3;
}
.health-item.attention > span {
  color: var(--accent);
  background: rgba(180,83,9,.10);
}
.health-item.attention b {
  color: var(--accent);
  background: #fff7ed;
}

.check-list { display: grid; gap: 10px; }
.check-list label {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.check-list input { width: 18px; min-height: 18px; accent-color: var(--brand); }

.staff-command,
.preferences-hero,
.staff-profile-hero {
  margin-bottom: 18px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.94) 50%),
    linear-gradient(225deg, rgba(29,78,216,.10), transparent 48%),
    #fff;
  box-shadow: var(--shadow-sm);
}
.staff-command h2,
.preferences-hero h2,
.staff-profile-hero h1 { margin: 5px 0 6px; font-size: 26px; }
.staff-portal-hero {
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 14px;
}
.staff-portal-hero .staff-avatar.large,
.staff-portal-hero .staff-card-head img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 18px;
}
.staff-portal-hero .eyebrow { font-size: 11px; }
.staff-portal-hero h1 { font-size: 20px; }
.staff-portal-hero p { font-size: 13px; }
.staff-portal-hero + .metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.staff-portal-hero + .metric-grid .metric {
  min-height: 106px;
  padding: 13px;
}
.staff-portal-hero + .metric-grid .metric svg {
  width: 18px;
  height: 18px;
}
.staff-portal-hero + .metric-grid .metric span {
  font-size: 13px;
}
.staff-portal-hero + .metric-grid .metric strong {
  font-size: 21px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.staff-portal-hero + .metric-grid .metric small {
  font-size: 11px;
}
.staff-portal-hero + .metric-grid .metric::after {
  width: 72px;
  height: 72px;
}
.staff-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 14px;
  margin-bottom: 14px;
}
.staff-clock-card,
.staff-quick-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
}
.staff-clock-card h2,
.staff-quick-card h2 {
  margin: 4px 0 6px;
  font-size: 20px;
  line-height: 1.2;
}
.staff-quick-card {
  align-items: flex-start;
  flex-direction: column;
}
.quick-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.staff-mini-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.staff-mini-metrics .metric {
  min-height: 98px;
  padding: 12px;
}
.staff-mini-metrics .metric strong {
  font-size: 20px;
}
.staff-create-panel { margin-bottom: 18px; }
.staff-list-toolbar {
  margin-bottom: 18px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.staff-list-toolbar form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.staff-list-toolbar label {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.staff-list-toolbar label svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--muted);
}
.staff-list-toolbar input {
  padding-left: 42px;
  min-height: 44px;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.staff-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.staff-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.staff-card-head img,
.staff-mini img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
}
.staff-card-head h3 { margin: 0 0 3px; }
.staff-card-head p { margin: 0; color: var(--muted); }
.staff-avatar,
.staff-mini b {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-weight: 950;
}
.staff-avatar.large { width: 64px; height: 64px; font-size: 22px; }
.staff-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0;
}
.staff-status-row span {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: #526071;
  font-size: 12px;
  font-weight: 900;
}
.staff-status-row .status-good { color: var(--ok); background: #ecfdf3; }
.staff-status-row .status-warn { color: var(--danger); background: #fff1f0; }
.staff-card dl,
.staff-profile-hero dl {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}
.staff-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.staff-card dt { color: var(--muted); font-weight: 800; }
.staff-card dd { margin: 0; text-align: right; font-weight: 900; overflow-wrap: anywhere; }
.staff-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.staff-actions .button { min-height: 40px; padding: 9px 10px; }
.profile-tabs {
  position: sticky;
  top: 118px;
  z-index: 35;
  margin-bottom: 18px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px) saturate(1.12);
  box-shadow: var(--shadow-sm);
  scroll-padding-inline: 8px;
}
.profile-tabs a {
  white-space: nowrap;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #526071;
  font-weight: 900;
}
.profile-tabs a:hover { color: var(--brand); background: rgba(15,118,110,.08); }
.profile-tabs + section,
.profile-tabs ~ section {
  scroll-margin-top: 188px;
}
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.toggle-row {
  min-height: 56px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.toggle-row span { display: grid; gap: 2px; }
.toggle-row small { color: var(--muted); font-weight: 700; }
.toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-row i {
  width: 46px;
  height: 26px;
  position: relative;
  border-radius: 999px;
  background: #d8e1ea;
  transition: background .16s ease;
}
.toggle-row i::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(15,23,42,.18);
  transition: transform .16s ease;
}
.toggle-row input[type="checkbox"]:checked + i {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.toggle-row input[type="checkbox"]:checked + i::after { transform: translateX(20px); }
.service-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.service-check-grid label {
  min-height: 86px;
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.service-check-grid input { width: 18px; min-height: 18px; accent-color: var(--brand); }
.service-check-grid span { color: var(--muted); }
.bulk-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mini-button {
  min-height: 36px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}
.bulk-check-grid {
  display: grid;
  gap: 8px;
}
.schedule-editor,
.business-hours-editor {
  display: grid;
  gap: 10px;
}
.schedule-day,
.business-day {
  display: grid;
  grid-template-columns: 70px minmax(190px, 1fr) repeat(2, minmax(120px, 160px));
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.schedule-day.is-open,
.business-day.is-open {
  border-color: rgba(15,118,110,.28);
  background:
    linear-gradient(135deg, rgba(15,118,110,.06), rgba(255,255,255,.96)),
    #fff;
}
.schedule-day.is-closed,
.business-day.is-closed {
  background: #f8fafc;
  color: #667085;
}
.schedule-editor-locked .schedule-day,
.schedule-day.is-readonly {
  opacity: .82;
  background:
    linear-gradient(135deg, rgba(15,118,110,.04), rgba(248,250,252,.96)),
    #f8fafc;
}
.schedule-editor-locked input,
.schedule-editor-locked button,
.open-toggle.is-disabled {
  cursor: not-allowed;
}
.schedule-editor-locked input:disabled {
  color: #475467;
  -webkit-text-fill-color: #475467;
  background: #eef4f7;
}
.schedule-day.is-closed input[type="time"],
.business-day.is-closed input[type="time"],
.schedule-day input[readonly],
.business-day input[readonly] {
  color: #98a2b3;
  background: #eef2f6;
  border-color: #d8e1ea;
  cursor: not-allowed;
}
.open-toggle input[type="checkbox"]:checked + i {
  background: linear-gradient(135deg, var(--ok), var(--brand));
}
.sticky-save {
  position: sticky;
  bottom: 14px;
  z-index: 18;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(15,118,110,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
}
.sticky-save span { color: var(--muted); font-weight: 800; }
.booking-preferences { display: grid; gap: 18px; }
.preferences-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.refined-preferences {
  align-items: stretch;
}
.booking-preference-tabs {
  margin-bottom: 18px;
}
.booking-preference-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.booking-preference-tabs svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
}
.preference-scope-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  border-color: rgba(15,118,110,.18);
  background:
    linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.96) 48%),
    #fff;
}
.preference-scope-panel h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.preference-scope-form label {
  display: grid;
  gap: 7px;
  margin: 0;
  font-weight: 850;
}
.preference-scope-form span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.preference-scope-form select {
  min-height: 52px;
  border-radius: 16px;
  background: #fff;
  font-weight: 850;
}
.preference-card,
.booking-preview-panel {
  padding: 22px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.045), rgba(255,255,255,.96) 42%),
    #fff;
  box-shadow: 0 16px 36px rgba(15,23,42,.075);
}
.preference-card {
  display: grid;
  align-content: start;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.preference-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.preference-card > .module-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}
.preference-card > .button {
  align-self: end;
  justify-self: start;
  margin-top: 4px;
}
.wide-card {
  grid-column: 1 / -1;
}
.preference-card h3 { margin: 0; font-size: 20px; }
.preference-card .eyebrow { color: var(--brand); }
.preference-card label {
  font-weight: 850;
}
.preference-card textarea {
  min-height: 132px;
}
.stepper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.stepper-grid small,
.business-day small,
.preference-card label small { color: var(--muted); font-weight: 700; }
.booking-preview-panel {
  background:
    linear-gradient(135deg, rgba(15,118,110,.10), rgba(29,78,216,.055) 62%),
    #fff;
}
.timezone-chip,
.timezone-note {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(15,118,110,.22);
  border-radius: 999px;
  color: #475467;
  background: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 850;
}
.timezone-note {
  justify-self: start;
  margin: 0;
  border-radius: 14px;
  background: #f8fbff;
}
.timezone-chip svg,
.timezone-note svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.toast-message {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid #abefc6;
  border-radius: 16px;
  color: var(--ok);
  background: rgba(236,253,243,.96);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
  font-weight: 900;
}
.toast-message.show {
  opacity: 1;
  transform: none;
}
.toast-message svg {
  width: 18px;
  height: 18px;
}
.preview-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.preview-steps span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(15,118,110,.09);
  font-weight: 900;
}
.staff-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}
.staff-mini img,
.staff-mini b { width: 38px; height: 38px; border-radius: 12px; }
.date-picker-panel {
  max-width: 420px;
}
.booking-progress.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.booking-progress.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.staff-card-choice {
  align-content: start;
  min-height: 158px;
}
.staff-card-choice > span:not(.staff-mini) {
  font-weight: 850;
}
.first-available-card {
  background:
    linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.96)),
    #fff;
}
.soft-empty {
  border-style: solid;
  background:
    linear-gradient(135deg, rgba(29,78,216,.06), rgba(255,255,255,.96)),
    #fff;
}

.records-shell {
  display: grid;
  gap: 14px;
}
.records-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(219,228,235,.9);
  border-radius: var(--radius);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm);
}
.records-head h2 {
  margin: 3px 0 4px;
  font-size: 24px;
}
.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.view-tabs a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #536171;
  font-weight: 900;
}
.view-tabs a.active,
.view-tabs a:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.view-tabs svg {
  width: 16px;
  height: 16px;
}
.calendar-card-list {
  display: grid;
  gap: 10px;
}
.calendar-event-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.calendar-event-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15,118,110,.28);
  box-shadow: var(--shadow-soft);
}

.staff-readonly-event {
  cursor: default;
}

.staff-schedule-toolbar {
  margin-top: 18px;
}

.staff-schedule-toolbar .records-head {
  margin-bottom: 14px;
}
.calendar-period-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(246,248,251,.72);
}
.calendar-period-nav strong {
  color: var(--ink);
  font-size: 18px;
}
.calendar-event-card time,
.calendar-event-card time strong,
.calendar-event-card time span,
.calendar-event-card h3,
.calendar-event-card p {
  display: block;
}
.calendar-event-card time {
  color: var(--brand);
  font-weight: 900;
}
.calendar-event-card time span,
.calendar-event-card p {
  color: var(--muted);
  font-size: 13px;
}
.calendar-event-card h3 {
  margin: 0 0 3px;
  font-size: 16px;
}
.calendar-event-card .action-hint {
  padding: 8px 10px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 999px;
  background: rgba(15,118,110,.08);
  color: var(--brand);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 10px;
  overflow-x: auto;
}
.week-day,
.month-cell {
  min-height: 140px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.week-day header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 900;
}
.week-event,
.calendar-mini-event {
  display: block;
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(15,118,110,.10);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.week-event:hover,
.calendar-mini-event:hover {
  background: rgba(37,99,235,.12);
  color: var(--brand-2);
}
.week-day p {
  color: var(--muted);
  font-size: 13px;
}
.month-grid {
  overflow-x: auto;
}
.month-grid-head,
.month-grid-body {
  min-width: 820px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.month-grid-head {
  margin-bottom: 8px;
}
.month-grid-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
.month-cell strong {
  color: var(--ink);
}
.month-cell em {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.muted-cell {
  opacity: .35;
  background: #f8fafc;
}
.staff-schedule-grid {
  overflow-x: auto;
  display: grid;
  gap: 8px;
}
.staff-schedule-head,
.staff-schedule-row {
  min-width: 920px;
  display: grid;
  grid-template-columns: 180px repeat(7, minmax(120px, 1fr));
  gap: 8px;
}
.staff-schedule-head span,
.staff-schedule-row > strong,
.staff-schedule-row > div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.staff-schedule-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.staff-schedule-head small {
  display: block;
  margin-top: 3px;
  color: var(--brand);
}
.staff-schedule-row > strong {
  align-self: stretch;
  color: var(--ink);
}
.contact-search {
  margin-bottom: 12px;
}
.contact-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.contact-tag.client {
  color: var(--brand);
  background: rgba(15,118,110,.10);
}
.contact-tag.lead {
  color: #b45309;
  background: #fff7ed;
}
.time-clock-panel {
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.time-clock-panel h2 {
  margin: 4px 0 5px;
  font-size: 23px;
}
.records-search {
  width: min(340px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.records-search svg { width: 17px; height: 17px; }
.records-search input { min-height: 40px; }
.services-command {
  margin-bottom: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(219,228,235,.95);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.95) 56%),
    #fff;
  box-shadow: var(--shadow-sm);
}
.services-command h2 { margin: 4px 0 6px; font-size: 26px; }
.services-command p { max-width: 740px; }
.services-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.service-category-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.service-category-card {
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(240,253,250,.68)),
    #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .055);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.service-category-card:hover {
  border-color: rgba(15, 118, 110, .28);
  box-shadow: 0 18px 34px rgba(15, 23, 42, .075);
  transform: translateY(-1px);
}
.service-category-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.service-category-main > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--brand);
  background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(37,99,235,.08));
}
.service-category-card h3 { margin: 0 0 2px; font-size: 15px; line-height: 1.2; }
.service-category-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-category-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(226, 232, 240, .86);
}
.service-category-card strong {
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}
.service-category-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.service-category-card .action-button,
.service-category-card .button {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.empty-category {
  grid-column: 1 / -1;
}
.service-records .table-panel table { min-width: 860px; }
.table-subtext {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.service-category-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(15,118,110,.10);
  font-size: 12px;
  font-weight: 900;
}
.table-panel {
  overflow: auto;
  margin-top: 0;
}
.table-toolbar {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
}
.table-toolbar strong, .table-toolbar small { display: block; }
.table-toolbar small { color: var(--muted); }
.table-toolbar label {
  width: min(320px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.table-toolbar svg { width: 16px; height: 16px; }
.table-toolbar input { min-height: 38px; }
.search-panel { margin-bottom: 16px; }
.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.search-form label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.search-form svg { width: 18px; height: 18px; }
.search-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 16px;
}
.search-results-head h2 { margin: 4px 0 0; font-size: 26px; }
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.search-group {
  display: grid;
  gap: 10px;
}
.search-group h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 20px;
}
.search-group h2 svg { width: 18px; height: 18px; color: var(--brand); }
.search-result {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.search-result:hover {
  transform: translateY(-1px);
  border-color: rgba(29,78,216,.32);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
.search-result strong { font-size: 14px; }
.search-result span { color: var(--muted); font-size: 13px; }
.doc-hero,
.support-panel,
.support-side {
  border: 1px solid rgba(219,228,235,.95);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.96) 54%),
    #fff;
  box-shadow: var(--shadow-sm);
}
.doc-hero {
  margin-bottom: 16px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.doc-hero h2,
.support-panel h2 {
  margin: 4px 0 7px;
  font-size: 28px;
}
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.doc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.doc-card h3 {
  margin: 10px 0 6px;
  font-size: 20px;
}
.doc-card p {
  margin: 0 0 12px;
  color: var(--muted);
}
.doc-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-card li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #536171;
  font-size: 13px;
  font-weight: 800;
}
.doc-card li svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
}
.doc-shot {
  min-height: 180px;
  padding: 12px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 17px;
  background:
    linear-gradient(180deg, #fff, #f8fafc);
}
.doc-shot-top {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}
.doc-shot-top i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cbd5e1;
}
.doc-shot-title {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 12px;
  font-weight: 900;
}
.doc-shot-bars {
  display: grid;
  gap: 7px;
  margin: 16px 0;
}
.doc-shot-bars span {
  height: 9px;
  border-radius: 999px;
  background: #dbeafe;
}
.doc-shot-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.doc-shot-cards b {
  min-height: 48px;
  border-radius: 12px;
  background: rgba(15,118,110,.10);
}
.doc-steps {
  margin-top: 16px;
}
.doc-steps ol {
  margin: 14px 0 0 20px;
  color: #536171;
  font-weight: 760;
}
.doc-steps li {
  margin: 8px 0;
}
.platform-control-panel {
  overflow: hidden;
}

.platform-metric-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.platform-metric-grid .metric {
  min-height: 118px;
}

.platform-tenants-first {
  margin-top: 14px;
}

.platform-table table {
  min-width: 1180px;
}
.platform-table td {
  vertical-align: top;
}
.platform-table td strong,
.platform-table td small {
  display: block;
}
.platform-table td small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.tenant-admin-form,
.platform-actions {
  display: grid;
  gap: 8px;
}
.tenant-admin-form select,
.tenant-admin-form input,
.platform-actions input {
  min-height: 38px;
  border-radius: 10px;
  font-size: 13px;
}
.platform-actions .inline-action,
.platform-actions form {
  display: grid;
  gap: 6px;
}
.platform-actions .action-button {
  width: 100%;
  justify-content: center;
}
.platform-tenant-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(203,213,225,.86);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.platform-tenant-search {
  flex: 1 1 520px;
  margin: 0;
}
.platform-tenant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  align-items: start;
}
.platform-tenant-card {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  box-shadow: 0 10px 24px rgba(15,23,42,.055);
}
.platform-tenant-card[hidden] {
  display: none !important;
}
.platform-tenant-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.platform-tenant-identity {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.platform-tenant-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
}
.platform-tenant-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0;
}
.platform-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.platform-tenant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.platform-tenant-meta span,
.platform-connect-row small {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(241,245,249,.9);
}

.platform-tenant-snapshot,
.platform-connect-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.platform-tenant-snapshot span,
.platform-connect-mini span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid rgba(203,213,225,.78);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.82);
  font-size: 10.5px;
  font-weight: 850;
}

.platform-tenant-snapshot svg {
  width: 13px;
  height: 13px;
  color: var(--brand);
}

.platform-connect-mini span {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.platform-billing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.platform-billing-grid article {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 13px;
  background: rgba(255,255,255,.84);
}
.platform-billing-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.platform-billing-grid strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}
.platform-billing-grid small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
}
.platform-connect-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 13px;
  background: rgba(236,253,245,.58);
}
.platform-tenant-controls {
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 11px;
  background: rgba(255,255,255,.7);
}
.platform-tenant-controls summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--ink);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 900;
  list-style: none;
}
.platform-tenant-controls summary::-webkit-details-marker {
  display: none;
}
.platform-tenant-controls summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.platform-tenant-controls summary svg {
  width: 14px;
  height: 14px;
}
.platform-tenant-controls[open] summary > svg {
  transform: rotate(180deg);
}
.platform-tenant-controls-body {
  display: grid;
  gap: 8px;
  padding: 0 9px 9px;
}
.tenant-admin-form.platform-tenant-edit {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid rgba(203,213,225,.72);
}
.platform-tenant-edit label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.platform-tenant-edit .button {
  grid-column: 1 / -1;
  min-height: 38px;
  white-space: nowrap;
}
.platform-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.platform-actions form {
  margin: 0;
}
.platform-actions form:not([data-confirm-delete]) {
  flex: 0 0 auto;
}
.platform-actions form[data-confirm-delete] {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  flex: 1 1 320px;
  gap: 8px;
}
.platform-tenant-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 26px;
  border: 1px dashed rgba(148,163,184,.75);
  border-radius: 20px;
  color: var(--muted);
  text-align: center;
  background: rgba(255,255,255,.62);
}
.platform-tenant-empty[hidden] {
  display: none !important;
}
.platform-tenant-empty svg {
  width: 30px;
  height: 30px;
  color: var(--brand);
}
@media (max-width: 1320px) {
  .platform-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .platform-tenant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .platform-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .platform-tenant-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .platform-tenant-command,
  .platform-tenant-card-head {
    align-items: stretch;
    flex-direction: column;
  }
  .platform-card-badges {
    justify-content: flex-start;
  }
  .platform-tenant-grid,
  .platform-billing-grid,
  .platform-metric-grid,
  .tenant-admin-form.platform-tenant-edit,
  .platform-actions form[data-confirm-delete] {
    grid-template-columns: 1fr;
  }
  .platform-tenant-search {
    flex-basis: auto;
  }
  .platform-actions,
  .platform-actions form,
  .platform-actions .action-button,
  .platform-tenant-edit .button {
    width: 100%;
  }
}
.forms-hero,
.public-form-head {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.94) 56%),
    #fff;
  box-shadow: var(--shadow-sm);
}
.forms-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.forms-hero h1,
.public-form-head h1 {
  margin: 3px 0 8px;
  font-size: 32px;
}
.forms-hero-actions {
  display: grid;
  gap: 8px;
  min-width: 220px;
}
.forms-hero-actions span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  font-weight: 850;
}
.forms-hero-actions svg { width: 17px; height: 17px; color: var(--brand); }
.signed-doc,
.client-profile-hero,
.client-portal-hero,
.workspace-card {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.96) 58%), #fff;
  box-shadow: var(--shadow-sm);
}
.signed-doc-head h1,
.client-profile-hero h1,
.client-portal-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(28px, 3vw, 42px);
}
.signed-doc-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.signed-doc-meta div,
.signed-answer-list article,
.signed-doc-signature,
.portal-login-note {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.signed-doc-meta dt,
.portal-login-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}
.signed-doc-meta dd {
  margin: 6px 0 0;
  font-weight: 850;
}
.signed-answer-list {
  display: grid;
  gap: 10px;
}
.signed-answer-list p { margin: 8px 0 0; color: var(--muted); }
.signed-doc-signature {
  margin-top: 16px;
  display: grid;
  gap: 4px;
}
.signed-doc-signature span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.signed-signature-image {
  display: block;
  max-width: 280px;
  max-height: 96px;
  object-fit: contain;
  padding: 8px 0;
}
.client-profile-hero,
.client-portal-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.client-profile-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.workspace-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.workspace-card {
  display: grid;
  gap: 12px;
}
.workspace-card h2 { margin: 0; font-size: 22px; }
.account-choice-grid {
  align-items: stretch;
}
.account-choice-card {
  align-content: start;
}
.account-choice-card .button {
  justify-self: start;
}
.portal-login-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.contact-profile-head,
.contact-table-name {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.contact-profile-head img,
.contact-image-preview img {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.contact-table-name img,
.contact-table-name b {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  object-fit: cover;
  background: rgba(15,118,110,.11);
  color: var(--brand);
  font-size: 14px;
}
.contact-image-preview {
  display: block;
  margin-top: 10px;
}
.business-profile-card {
  overflow: visible;
}
.business-logo-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240, 253, 250, .9), rgba(255, 255, 255, .95));
}
.business-logo-preview {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.business-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.business-logo-preview.empty svg {
  width: 28px;
  height: 28px;
}
.logo-upload-field {
  display: grid;
  gap: 8px;
}
input[type="file"] {
  padding: 9px 12px;
  background: #fbfdff;
}
label small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.page-head,
.records-head,
.panel-title-row,
.section-title,
.table-toolbar,
.command-center,
.staff-card-head,
.client-profile-head,
.forms-command,
.services-command,
.billing-plan-toolbar,
.home-nav-row,
.quick-action-row {
  min-width: 0;
}
.page-head > *,
.records-head > *,
.panel-title-row > *,
.section-title > *,
.table-toolbar > *,
.command-center > *,
.staff-card-head > *,
.client-profile-head > *,
.forms-command > *,
.services-command > *,
.billing-plan-toolbar > *,
.home-nav-row > *,
.quick-action-row > * {
  min-width: 0;
}
.profile-tabs,
.billing-tabs,
.view-tabs,
.booking-category-rail,
.services-command-actions,
.row-actions,
.quick-action-row,
.staff-actions {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-panel,
.dashboard-table-wrap,
.records-table-wrap,
.report-table-wrap,
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.row-actions {
  scrollbar-width: thin;
}
.contact-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.contact-detail-grid div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.contact-detail-grid dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.contact-detail-grid dd {
  margin: 6px 0 0;
  font-weight: 800;
}
.lead-import-panel {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,118,110,.08), #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lead-import-panel form {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.lead-import-panel input[type="file"] {
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.lead-import-panel .button {
  min-height: 44px;
  white-space: nowrap;
}
.embedded-checkout-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 34px auto;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.embedded-checkout-copy,
.embedded-checkout-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.embedded-checkout-copy {
  position: sticky;
  top: 132px;
  padding: 28px;
}
.embedded-checkout-copy h1 {
  margin: 6px 0 12px;
  font-size: 34px;
}
.embedded-checkout-copy .button {
  margin-top: 16px;
}
.embedded-checkout-card {
  min-height: 560px;
  padding: 12px;
  overflow: hidden;
}
.sales-hero,
.public-invoice-shell,
.invoice-workspace {
  width: min(100%, 1360px);
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.sales-hero {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.12), transparent 46%),
    linear-gradient(225deg, rgba(29,78,216,.10), transparent 52%),
    rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.sales-hero h2 {
  margin: 6px 0 10px;
  font-size: 32px;
}
.sales-module-grid {
  margin-top: 14px;
}
.marketing-hero,
.automation-hero {
  background:
    linear-gradient(135deg, rgba(15,118,110,.14), transparent 42%),
    linear-gradient(225deg, rgba(194,65,12,.08), transparent 48%),
    #fff;
}
.marketing-metrics {
  width: min(100%, 1360px);
  margin: 0 auto 18px;
}
.marketing-template-grid,
.automation-command-grid,
.report-library {
  width: min(100%, 1360px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.template-tile,
.automation-flow-card,
.report-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
}
.template-tile,
.report-card {
  padding: 18px;
}
.template-tile h3,
.automation-flow-card h3,
.report-card h3 {
  margin: 12px 0 8px;
  font-size: 18px;
}
.template-tile p,
.automation-flow-card p,
.report-card p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
}
.campaign-builder-card textarea {
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
}
.rich-editor-shell {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfdff, #f6fafb);
}
.rich-editor-toolbar button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}
.rich-editor-toolbar button:hover {
  border-color: rgba(15,118,110,.38);
  color: var(--brand);
  background: #eef6f6;
}
.rich-email-editor {
  min-height: 260px;
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--ink);
  line-height: 1.65;
  outline: none;
}
.rich-email-editor:focus {
  box-shadow: inset 0 0 0 3px rgba(15,118,110,.08);
}
.rich-email-editor a {
  color: var(--brand);
  font-weight: 850;
}
.rich-email-editor img {
  max-width: 100%;
  height: auto;
}
.rich-email-editor h2 {
  margin: 16px 0 8px;
  font-size: 24px;
  line-height: 1.25;
}
.rich-email-editor p {
  margin: 0 0 14px;
}
.automation-command-grid {
  align-items: stretch;
  margin-bottom: 18px;
}
.automation-flow-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.automation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.automation-meta span,
.report-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef6f6;
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
}
.report-filters,
.report-results-head {
  width: min(100%, 1360px);
  margin: 0 auto 16px;
}
.report-filters {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
}
.report-filters .form-grid {
  align-items: end;
}
.report-card {
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.report-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -28px;
  top: -28px;
  border-radius: 50%;
  background: rgba(15,118,110,.08);
}
.report-card .button {
  margin-top: 8px;
}
.report-card strong,
.report-card small {
  display: block;
  position: relative;
  z-index: 1;
}
.report-card small {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}
.report-card.active {
  border-color: rgba(15,118,110,.45);
  box-shadow: 0 18px 40px rgba(15,118,110,.14);
}
.report-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.invoice-workspace,
.public-invoice-shell {
  grid-template-columns: minmax(0, 1fr) 360px;
}
.invoice-item-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.invoice-summary-panel,
.invoice-pay-panel {
  position: sticky;
  top: 132px;
}
.invoice-summary-panel dl,
.invoice-pay-panel dl {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.invoice-summary-panel dl div,
.invoice-pay-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(217,226,236,.75);
}
.invoice-summary-panel dd,
.invoice-pay-panel dd {
  margin: 0;
  font-weight: 900;
}
.invoice-pay-panel > strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  margin: 10px 0;
}
.invoice-pay-form {
  display: grid;
  gap: 12px;
}
.invoice-tip-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, .22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(240, 253, 250, .92), rgba(248, 251, 252, .96));
}
.invoice-tip-box label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 850;
}
.tip-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tip-shortcuts button {
  border: 1px solid rgba(203, 215, 225, .95);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-weight: 850;
  padding: 8px 12px;
}
.tip-shortcuts button:hover {
  border-color: rgba(15, 118, 110, .45);
  color: var(--teal);
  transform: translateY(-1px);
}
.public-invoice-redesign {
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
}
.public-invoice-card,
.invoice-pay-panel {
  border-radius: 24px;
}
.public-invoice-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(203,213,225,.82);
}
.public-invoice-hero h1 {
  margin: 6px 0 6px;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.05;
}
.public-invoice-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.public-invoice-meta div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fbfc);
}
.public-invoice-meta span,
.public-payment-row span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.public-invoice-meta strong,
.public-invoice-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.public-invoice-meta strong {
  color: var(--ink);
  font-size: 15px;
}
.public-invoice-meta small {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.35;
}
.public-invoice-lines {
  overflow: hidden;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 20px;
  background: #fff;
}
.public-invoice-lines-head,
.public-invoice-line {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 70px 110px 110px 120px;
  gap: 12px;
  align-items: center;
}
.public-invoice-lines-head {
  padding: 13px 16px;
  background: linear-gradient(180deg, #f8fafc, #f1f6f8);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.public-invoice-line {
  padding: 16px;
  border-top: 1px solid rgba(203,213,225,.82);
  color: var(--ink);
  font-weight: 850;
}
.public-invoice-line strong,
.public-invoice-line small {
  display: block;
}
.public-invoice-line small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.public-payment-history {
  margin-top: 18px;
}
.public-payment-history h2 {
  margin: 0 0 10px;
  font-size: 20px;
}
.public-payment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(92px, auto));
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 18px;
  background: #fff;
}
.public-payment-row + .public-payment-row {
  margin-top: 10px;
}
.public-payment-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 750;
}
.wide-button {
  width: 100%;
}
.forms-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}
.form-builder-panel form { align-items: start; }
.forms-side ol {
  margin: 12px 0 0 20px;
  color: var(--muted);
  font-weight: 750;
}
.forms-side li { margin: 9px 0; }
.form-field-builder {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
}
.long-textarea {
  min-height: 220px;
  line-height: 1.6;
}
.form-reading-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.form-reading-panel h2 {
  margin: 0 0 10px;
  font-size: 20px;
}
.form-reading-panel div {
  max-height: 360px;
  overflow: auto;
  color: var(--ink);
  line-height: 1.7;
  font-weight: 600;
}
.form-reading-panel h3,
.form-reading-panel h4 {
  margin: 14px 0 8px;
  color: var(--ink);
}
.form-reading-panel p,
.form-reading-panel li {
  color: var(--muted);
  font-size: 15px;
}
.public-form-card {
  gap: 14px;
}
.public-form-card > label,
.public-form-card .check-card {
  margin: 0;
}
.legal-signature-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(15,118,110,.24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.98) 62%), #fff;
  box-shadow: var(--shadow-sm);
}
.legal-signature-panel h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.standalone-signature-pad {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(15,118,110,.56);
  border-radius: 16px;
  background: #fff;
}
.standalone-signature-pad canvas {
  display: block;
  width: 100%;
  height: 180px;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(0deg, rgba(148,163,184,.14) 0, rgba(148,163,184,.14) 1px, transparent 1px, transparent 28px);
  cursor: crosshair;
  touch-action: none;
}
.standalone-signature-pad .button {
  justify-self: start;
}
.signature-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.public-form-card > .button[type="submit"] {
  margin-top: 4px;
}
.pdf-map-card,
.public-pdf-fill {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
}
.pdf-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.pdf-map-pages {
  display: grid;
  gap: 16px;
  max-height: 760px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #eaf0f4;
}
.public-pdf-fill .pdf-map-pages {
  max-height: none;
}
.pdf-page-wrap {
  position: relative;
  width: min(100%, 860px);
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
}
.pdf-page-wrap canvas {
  display: block;
}
.pdf-overlay {
  position: absolute;
  inset: 0;
}
.pdf-field-box {
  position: absolute;
  display: grid;
  align-items: center;
  min-height: 24px;
  border: 2px solid rgba(15,118,110,.82);
  border-radius: 6px;
  background: rgba(20,125,117,.12);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}
.pdf-field-box.editable {
  cursor: move;
}
.pdf-field-box.editable span {
  display: block;
  padding: 3px 6px;
  color: #064e3b;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-field-box.fillable {
  background: rgba(255,255,255,.74);
  border-color: rgba(37,99,235,.78);
}
.pdf-field-box.fillable input {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 4px;
  background: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 800;
  padding: 2px 5px;
  text-align: center;
  line-height: 1.1;
}
.pdf-field-box.fillable input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: auto;
}
.signature-pad-field {
  min-width: 160px;
  min-height: 54px;
  background: rgba(255,255,255,.92);
}
.signature-pad-field canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.signature-pad-field button {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}
.pdf-field-list {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.pdf-field-list-row {
  display: grid;
  grid-template-columns: 1fr 96px auto 36px;
  gap: 6px;
  align-items: center;
}
.pdf-field-list-row input,
.pdf-field-list-row select {
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.pdf-field-list-row label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.pdf-field-list-row button {
  width: 36px;
  height: 36px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: var(--danger);
  background: #fff5f5;
}
.pdf-map-card [data-pdf-add-field].active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.form-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.form-mode-card {
  min-height: 116px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  cursor: pointer;
}
.form-mode-card input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  min-width: 18px;
  align-self: end;
  justify-self: end;
}
.form-mode-card svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}
.form-mode-card strong {
  font-size: 15px;
}
.form-mode-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.form-mode-card:has(input:checked) {
  border-color: rgba(15,118,110,.55);
  box-shadow: 0 0 0 4px rgba(15,118,110,.08);
}
.form-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 110px;
  gap: 8px;
  align-items: center;
}
.mini-check,
.check-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-weight: 800;
}
.mini-check input,
.check-card input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.form-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.form-template-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.form-template-card h3,
.form-template-card p { margin: 0; }
.form-template-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.form-template-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.form-template-card dd {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}
.public-form-shell {
  max-width: 860px;
  margin: 0 auto;
}
.required-forms-panel {
  margin: 14px 0;
}
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}
.support-panel {
  padding: 24px;
}
.support-side {
  align-self: start;
  display: grid;
  gap: 12px;
  padding: 22px;
}
.support-side h3 {
  margin: 0;
  font-size: 21px;
}
.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0%, rgba(15,118,110,.12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,247,246,.76));
  box-shadow: var(--shadow-soft);
}
.legal-hero h1 {
  margin: 8px 0;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
}
.legal-hero a {
  color: var(--brand);
  font-weight: 900;
}
.legal-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  color: var(--text);
  font-weight: 900;
}
.legal-hero-badge svg {
  width: 22px;
  height: 22px;
  color: var(--brand);
}
.legal-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.legal-contact-card,
.legal-section {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
}
.legal-contact-card {
  position: sticky;
  top: 118px;
  display: grid;
  gap: 14px;
  padding: 22px;
}
.legal-contact-card h2,
.legal-section h2 {
  margin: 0;
  font-size: 22px;
}
.legal-company-list {
  display: grid;
  gap: 10px;
}
.legal-company-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: rgba(246,248,251,.78);
  font-weight: 900;
  text-decoration: none;
}
.legal-company-list svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--brand);
}
.legal-contact-card address {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.55;
  background: rgba(240,253,250,.72);
}
.legal-content {
  display: grid;
  gap: 14px;
}
.legal-section {
  padding: 24px;
}
.legal-section ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.62;
}
.legal-section li::marker {
  color: var(--brand);
}
.empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 260px;
  padding: 32px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.empty-state svg { width: 34px; height: 34px; color: var(--brand); }
table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 14px;
}
th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(246,248,251,.72);
}
tr:hover td { background: rgba(246,248,251,.62); }
td .button, td select, td input { min-height: 38px; }
td { color: #182231; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(8px);
}
.modal-backdrop.show { display: grid; }
.confirm-modal {
  width: min(440px, 100%);
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15,23,42,.26);
}
.confirm-modal h2 {
  margin: 0;
  font-size: 22px;
}
.confirm-modal p {
  margin: 0;
  color: var(--muted);
}
.modal-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--danger);
  background: #fff1f0;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.pricing-grid, .portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.home-hero {
  min-height: 460px;
  padding: clamp(28px, 5vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
  background:
    linear-gradient(135deg, rgba(8,122,114,.16), transparent 42%),
    linear-gradient(225deg, rgba(200,111,61,.18), transparent 38%),
    linear-gradient(180deg, #ffffff, #f3faf9);
}
.home-hero-pro {
  background:
    linear-gradient(135deg, rgba(15,118,110,.12), rgba(255,255,255,.96) 42%),
    linear-gradient(225deg, rgba(29,78,216,.13), transparent 40%),
    #fff;
}
.home-hero h1 {
  max-width: 780px;
  margin: 8px 0 14px;
  font-size: 48px;
  line-height: 1.04;
}
.home-hero p { max-width: 720px; margin: 0; color: #536171; font-size: 18px; }
.home-hero aside {
  display: grid;
  gap: 12px;
}
.home-command-preview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-command-preview div {
  min-height: 138px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm);
}
.home-command-preview span,
.home-command-preview small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}
.home-command-preview strong {
  display: block;
  margin: 10px 0 6px;
  font-size: 30px;
}
.home-hero aside span, .industry-row span, .industry-row a, .booking-speedbar span {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  font-weight: 900;
}
.home-hero aside svg, .booking-speedbar svg { width: 18px; height: 18px; color: var(--brand); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.home-band, .home-section { margin-top: 18px; padding: 24px; }
.home-pricing { margin-top: 18px; }
.industry-row {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.industry-row span,
.industry-row a {
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}
.section-title h2 { margin: 4px 0 0; font-size: 25px; }
.plan ul {
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 700;
}
.plan {
  padding: 24px;
  background: linear-gradient(180deg, #fff, #fafdff);
}
.plan.featured {
  border-color: rgba(8,122,114,.42);
  box-shadow: var(--shadow);
}
.plan strong {
  display: block;
  margin: 8px 0;
  font-size: 38px;
}
.plan span { color: var(--muted); font-size: 16px; }
.billing-shell {
  display: grid;
  gap: 18px;
}
.billing-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow-sm);
  width: fit-content;
  max-width: 100%;
}
.billing-tabs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 13px;
  color: #344054;
  font-weight: 900;
}
.billing-tabs a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #0d5d68);
  box-shadow: 0 12px 28px rgba(8,122,114,.2);
}
.billing-tabs svg { width: 18px; height: 18px; }
.billing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 24px;
  align-items: stretch;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(219,228,235,.92);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(8,122,114,.14), rgba(255,255,255,.92) 44%),
    linear-gradient(225deg, rgba(200,111,61,.18), transparent 44%),
    #fff;
  box-shadow: var(--shadow-sm);
}
.package-hero {
  min-height: 300px;
}
.connect-hero {
  background:
    linear-gradient(135deg, rgba(14,92,115,.16), rgba(255,255,255,.92) 48%),
    linear-gradient(225deg, rgba(8,122,114,.16), transparent 42%),
    #fff;
}
.billing-hero h2 {
  max-width: 760px;
  margin: 4px 0 10px;
  font-size: 32px;
  line-height: 1.06;
}
.billing-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.billing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.billing-hero-actions span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(219,228,235,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}
.billing-hero-actions svg { width: 16px; height: 16px; color: var(--brand); }
.billing-summary-card {
  padding: 20px;
  border: 1px solid rgba(219,228,235,.9);
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 20px 46px rgba(16,24,40,.08);
}
.billing-summary-card > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.billing-summary-card > strong {
  display: block;
  margin: 6px 0 16px;
  font-size: 34px;
}
.billing-summary-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.billing-summary-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.billing-summary-card dt { color: var(--muted); font-weight: 800; }
.billing-summary-card dd { margin: 0; text-align: right; font-weight: 900; overflow-wrap: anywhere; }
.billing-plan-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
}
.billing-plan-toolbar h2 {
  margin: 2px 0 4px;
  font-size: 24px;
}
.billing-plan-toolbar p { margin: 0; }
.billing-toggle {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f5f8fa;
}
.billing-toggle button {
  min-height: 42px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #475467;
  font-weight: 950;
}
.billing-toggle button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #0b5963);
  box-shadow: 0 12px 24px rgba(8,122,114,.18);
}
.billing-toggle span {
  margin-left: 6px;
  font-size: 12px;
  opacity: .86;
}
.subscription-command-hero {
  min-height: 0;
}
.subscription-summary-card .status-pill {
  display: inline-flex;
}
.subscription-detail-grid,
.billing-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.subscription-detail-grid article,
.billing-control-grid article {
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
}
.subscription-detail-grid .module-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
}
.subscription-detail-grid small,
.billing-control-grid span {
  display: block;
  color: var(--muted);
  font-weight: 800;
}
.subscription-detail-grid strong {
  display: block;
  margin: 4px 0 6px;
  font-size: 22px;
  line-height: 1.15;
}
.subscription-detail-grid p,
.billing-control-grid span {
  margin: 0;
  font-size: 13px;
}
.billing-control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.billing-control-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 6px 12px;
  min-height: 110px;
}
.billing-control-grid svg {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  color: var(--brand);
}
.billing-control-grid strong {
  font-size: 16px;
}
.billing-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgba(8,122,114,.18);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(8,122,114,.08);
  font-weight: 950;
  white-space: nowrap;
}
.billing-sync-pill svg {
  width: 16px;
  height: 16px;
}
.billing-overview, .connect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.billing-overview article {
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.billing-overview svg { width: 22px; height: 22px; color: var(--brand); }
.billing-overview strong, .billing-overview span { display: block; }
.billing-overview strong { margin-top: 10px; font-size: 16px; }
.billing-overview span { margin-top: 5px; color: var(--muted); }
.connect-grid { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
.connect-single-grid {
  grid-template-columns: minmax(280px, 620px);
}
.connect-single-grid .connect-action-panel {
  min-height: 260px;
}
.connect-management-grid {
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
  align-items: stretch;
}
.payment-provider-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 4px solid transparent;
}
.payment-provider-card.active-provider {
  border-color: var(--brand);
  box-shadow: 0 18px 45px rgba(18, 105, 150, .14);
}
.payment-provider-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.payment-provider-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.payment-provider-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.payment-provider-card dd {
  margin: 0;
  text-align: right;
  word-break: break-word;
}
.compact-form.single {
  gap: 10px;
}
.compact-form label {
  padding: 12px;
}
.connect-change-panel {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
}
.connect-change-panel .module-icon.warning {
  color: #b54708;
  background: rgba(200,111,61,.12);
}
.connect-change-panel h2 {
  margin: 4px 0 8px;
  font-size: 22px;
}
.connect-change-panel dl {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.connect-change-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.connect-change-panel dt {
  color: var(--muted);
  font-weight: 850;
}
.connect-change-panel dd {
  margin: 0;
  font-weight: 950;
  text-align: right;
  overflow-wrap: anywhere;
}
.connect-action-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(8,122,114,.08), transparent 58%),
    #fff;
}
.connect-action-panel .button { justify-self: start; margin-top: 8px; }
.stripe-diagnostics-panel {
  display: grid;
  gap: 16px;
}
.stripe-test-panel {
  display: grid;
  gap: 16px;
}
.stripe-config-panel {
  display: grid;
  gap: 16px;
}
.stripe-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stripe-config-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.stripe-config-card.selected {
  border-color: var(--brand);
  background: linear-gradient(135deg, rgba(8,122,114,.08), #fff 62%);
}
.stripe-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.stripe-config-head strong,
.stripe-config-head code {
  display: block;
}
.stripe-config-head strong {
  font-size: 16px;
}
.stripe-config-head code {
  margin-top: 5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.stripe-config-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.stripe-config-methods .status-pill {
  font-size: 11px;
  padding: 6px 9px;
}
.stripe-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stripe-config-actions form {
  margin: 0;
}
.stripe-config-actions .button {
  min-height: 40px;
  padding: 10px 12px;
}
.stripe-test-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}
.stripe-test-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.stripe-test-card strong,
.stripe-test-card span {
  display: block;
}
.stripe-test-card strong {
  font-size: 17px;
}
.stripe-test-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.stripe-test-card .button {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
}
.stripe-diagnostic-log table {
  min-width: 1180px;
  table-layout: fixed;
}
.stripe-diagnostic-log code {
  display: block;
  max-width: 220px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.stripe-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stripe-diagnostic-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: linear-gradient(135deg, rgba(8,122,114,.06), #fff 60%);
}
.stripe-diagnostic-grid span,
.stripe-diagnostic-grid small {
  display: block;
  color: var(--muted);
}
.stripe-diagnostic-grid strong {
  display: block;
  margin: 6px 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.stripe-capability-table table {
  min-width: 1240px;
  table-layout: fixed;
}
.stripe-capability-table td {
  vertical-align: top;
  line-height: 1.45;
}
.stripe-capability-table th:last-child,
.stripe-capability-table td:last-child {
  width: auto;
  min-width: 0;
  white-space: normal;
}
.stripe-capability-table .status-pill {
  white-space: nowrap;
}
.stripe-status-cell {
  vertical-align: middle !important;
}
.payment-routing-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.payment-routing-panel article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(8,122,114,.07), #fff 68%);
  box-shadow: var(--shadow-soft);
}
.payment-routing-panel h3 {
  margin: 4px 0 7px;
  font-size: 16px;
  line-height: 1.35;
}
.payment-routing-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.payment-routing-audit {
  margin-top: 18px;
}
.payment-routing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.payment-routing-grid article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.payment-routing-grid svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}
.payment-routing-grid strong,
.payment-routing-grid span {
  display: block;
}
.payment-routing-grid strong {
  font-size: 14px;
  line-height: 1.25;
}
.payment-routing-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.stripe-eligibility-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #eff6ff, #fff 70%);
}
.stripe-eligibility-callout h3 {
  margin: 0 0 6px;
  font-size: 17px;
}
.stripe-eligibility-callout p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.stripe-flag-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.stripe-flag-list div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  align-items: baseline;
}

.stripe-flag-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stripe-flag-list dd {
  margin: 0;
  color: #172033;
  font-size: 12px;
  font-weight: 850;
}

.stripe-reason-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stripe-reason-list li {
  position: relative;
  padding-left: 17px;
  color: #526176;
  font-size: 12px;
  line-height: 1.45;
}

.stripe-reason-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

.stripe-muted-note {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.stripe-eligibility-table th:nth-child(1),
.stripe-eligibility-table td:nth-child(1) { width: 20%; }
.stripe-eligibility-table th:nth-child(2),
.stripe-eligibility-table td:nth-child(2) { width: 15%; }
.stripe-eligibility-table th:nth-child(3),
.stripe-eligibility-table td:nth-child(3) { width: 25%; }
.stripe-eligibility-table th:nth-child(4),
.stripe-eligibility-table td:nth-child(4) { width: 40%; }
.stripe-eligibility-table .table-subtext {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.muted-pill {
  background: #eef2f7;
  color: #526176;
}
.stripe-diagnostic-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stripe-diagnostic-notes article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
}
.stripe-diagnostic-notes h3 {
  margin: 0 0 8px;
  font-size: 17px;
}
.stripe-diagnostic-notes p,
.stripe-diagnostic-notes ul {
  margin: 0;
  color: var(--muted);
}
.billing-grid { margin-top: 2px; }
.billing-grid .plan {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 450px;
  padding: 30px;
}
.billing-grid .plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.billing-grid .plan.featured {
  transform: translateY(-4px);
}
.subscription-plan-card {
  gap: 0;
}
.plan-location-limit {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin: -8px 0 16px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #0b5963;
  background: rgba(8,122,114,.08);
  font-size: 12px;
  font-weight: 950;
}
.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.current-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(8,122,114,.2);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(8,122,114,.08);
  font-size: 12px;
  font-weight: 950;
}
.current-plan-badge.popular {
  color: #9a4f16;
  border-color: rgba(200,111,61,.28);
  background: rgba(200,111,61,.11);
}
.billing-plan h2 {
  margin: 0 0 16px;
  font-size: 24px;
}
.billing-plan strong {
  display: flex;
  align-items: end;
  gap: 5px;
  margin: 0 0 8px;
  font-size: 48px;
  line-height: 1;
}
.billing-plan strong span:last-child {
  padding-bottom: 6px;
  font-size: 17px;
  color: var(--muted);
}
.plan-subtext {
  min-height: 42px;
  margin: 0 0 12px;
  color: var(--muted);
}
.yearly-note {
  min-height: 34px;
  margin: 0 0 10px;
  color: #475467;
}
.yearly-note > span:not(.save-pill) {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}
.billing-grid .plan ul { flex: 1; }
.save-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--brand) !important;
  background: rgba(8,122,114,.1);
  font-size: 12px !important;
  font-weight: 900;
}
.plan-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.plan-actions .button { justify-content: center; }
.plan-actions small {
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}
.billing-plan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.billing-plan-actions form {
  margin: 0;
}
.billing-plan-actions .button {
  width: 100%;
  justify-content: center;
  min-height: 46px;
}
.billing-card-note {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}
.button:disabled {
  cursor: not-allowed;
  color: #98a2b3;
  background: #f2f4f7;
  border-color: var(--line);
}

.insight-strip {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.insight-strip article {
  min-height: 130px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.76));
  box-shadow: var(--shadow-sm);
}
.insight-strip span { color: var(--muted); font-weight: 800; }
.insight-strip strong { display: block; margin: 5px 0 12px; font-size: 30px; }
.mini-line {
  height: 46px;
  display: flex;
  align-items: end;
  gap: 7px;
}
.mini-line i {
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--brand), #83c8c0);
}
.progress-bar {
  height: 12px;
  border-radius: 999px;
  background: #e8eef2;
  overflow: hidden;
}
.progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.progress-bar.warm i { background: linear-gradient(90deg, var(--gold), var(--accent)); }
.quick-action-row {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.quick-action-row a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.quick-action-row svg { width: 18px; height: 18px; color: var(--brand); }
.portal-hero {
  margin-bottom: 18px;
  padding: clamp(22px, 4vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 8%, rgba(8,122,114,.16), transparent 240px),
    linear-gradient(135deg, #fff, #f3f9fb);
  box-shadow: var(--shadow-sm);
}
.portal-hero h1 { margin: 5px 0 8px; font-size: 31px; line-height: 1.08; }
.booking-public {
  max-width: 1120px;
  margin: 0 auto;
}
.booking-hero { margin-bottom: 12px; }
.premium-booking-hero {
  min-height: 0;
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid rgba(219,228,235,.9);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(20,184,166,.12), rgba(255,255,255,.98) 48%),
    linear-gradient(225deg, rgba(59,130,246,.10), transparent 44%),
    #fff;
  box-shadow: var(--shadow-sm);
}
.premium-booking-hero h1 { margin: 4px 0 7px; font-size: clamp(28px, 4vw, 38px); }
.premium-booking-hero p { max-width: 760px; }
.booking-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}
.booking-badges span, .booking-progress button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #526071;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 11px;
}
.booking-steps {
  display: grid;
  gap: 14px;
  overflow: hidden;
}
.premium-booking-flow {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  margin-top: 12px;
}
.premium-booking-flow .booking-steps {
  padding: 18px;
}
.booking-speedbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.booking-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
}
.booking-progress button {
  width: 100%;
  max-width: none;
  min-height: 40px;
  height: 40px;
  justify-content: center;
  cursor: pointer;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 13px;
  aspect-ratio: auto;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.booking-progress button:hover { transform: translateY(-1px); }
.booking-progress .active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  box-shadow: 0 10px 20px rgba(29,78,216,.14);
}
.booking-panel {
  display: none;
  animation: stepIn .24s ease;
}
.booking-panel.active { display: grid; gap: 14px; }
.booking-empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.94)),
    #fff;
}
.booking-empty-state svg { width: 30px; height: 30px; color: var(--brand); }
.booking-empty-state h3 { margin: 0; font-size: 22px; }
.booking-empty-state p { max-width: 560px; }
.fast-booking .booking-panel {
  display: grid;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
@keyframes stepIn { from { opacity: .15; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.choice-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.booking-service-browser {
  display: grid;
  gap: 12px;
}
.booking-service-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.booking-service-search svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
}
.booking-service-search input {
  min-height: 46px;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.booking-category-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.booking-category-rail button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #526071;
  background: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.booking-category-rail button:hover {
  transform: translateY(-1px);
  border-color: rgba(15,118,110,.28);
}
.booking-category-rail button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 20px rgba(29,78,216,.13);
}

.booking-service-accordion {
  display: grid;
  gap: 10px;
}

.booking-category-panel {
  overflow: hidden;
  border: 1px solid rgba(203,213,225,.92);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  box-shadow: 0 10px 24px rgba(15,23,42,.045);
}

.booking-category-panel[hidden] {
  display: none !important;
}

.booking-category-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.booking-category-panel summary::-webkit-details-marker {
  display: none;
}

.booking-category-panel summary > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.booking-category-panel summary svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex: 0 0 auto;
}

.booking-category-panel summary > svg:last-child {
  color: var(--muted);
  transition: transform .18s ease;
}

.booking-category-panel[open] summary > svg:last-child {
  transform: rotate(180deg);
}

.booking-category-panel summary strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.15;
}

.booking-category-panel summary small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(241,245,249,.95);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.booking-service-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}
.booking-service-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(203,213,225,.95);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #f8fbff);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.booking-service-row[hidden],
[data-booking-service-card][hidden] {
  display: none !important;
}
.booking-service-row:hover {
  transform: translateY(-1px);
  border-color: rgba(29,78,216,.25);
  box-shadow: 0 14px 28px rgba(15,23,42,.07);
}
.booking-service-row:has(input:checked) {
  border-color: rgba(15,118,110,.62);
  background:
    linear-gradient(135deg, rgba(15,118,110,.11), rgba(255,255,255,.98)),
    #fff;
  box-shadow: 0 0 0 4px rgba(15,118,110,.09), 0 12px 26px rgba(15,118,110,.08);
}
.booking-service-row input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--brand);
}
.booking-selected-services {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.98));
}
.booking-selected-services strong {
  color: var(--ink);
  font-size: 13px;
}
.booking-selected-services span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.service-row-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.service-row-main b {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.18;
}
.service-row-main small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
}
.service-row-meta {
  display: grid;
  gap: 2px;
  justify-items: end;
  color: var(--muted);
  font-size: 12px;
}
.addon-hint {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15,118,110,.1);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 900;
}
.booking-addons {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,118,110,.07), rgba(255,255,255,.98));
}
.booking-addons[hidden],
.booking-addon-group[hidden] {
  display: none !important;
}
.booking-addons-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.booking-addons-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
}
.booking-addon-group {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(203,213,225,.75);
}
.inline-addon-group {
  margin: -3px 4px 6px 30px;
  padding: 10px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.98));
}
.booking-addon-group + .booking-addon-group {
  margin-top: 12px;
}
.booking-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.booking-addon-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(203,213,225,.95);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.booking-addon-card:hover {
  transform: translateY(-1px);
  border-color: rgba(29,78,216,.25);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}
.booking-addon-card:has(input:checked) {
  border-color: rgba(15,118,110,.62);
  box-shadow: 0 0 0 4px rgba(15,118,110,.08);
}
.booking-addon-card input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--brand);
}
.booking-addon-card span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.booking-addon-card b {
  font-size: 14px;
}
.booking-addon-card small {
  color: var(--muted);
  line-height: 1.35;
}
.booking-addon-card em {
  color: var(--brand);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}
.service-addons-panel {
  margin-top: 18px;
}
.compact-addon-form {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(203,213,225,.8);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15,118,110,.06), rgba(255,255,255,.98));
}
.service-addon-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.service-addon-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 18px;
  background: #fff;
}
.service-addon-edit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  align-items: end;
}
.service-addon-edit-grid .wide {
  grid-column: 1 / -1;
}
.service-addon-actions,
.service-addon-delete-form {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 820px) {
  .booking-addons-head {
    display: grid;
  }
  .booking-addon-grid,
  .service-addon-edit-grid {
    grid-template-columns: 1fr;
  }
  .booking-addon-card {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .booking-addon-card em {
    grid-column: 2;
  }
}
.service-row-meta strong {
  color: var(--ink);
  font-size: 15px;
}
.service-row-meta small {
  font-weight: 850;
}
.choice-card {
  min-height: 118px;
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(203,213,225,.95);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.choice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(29,78,216,.28);
  box-shadow: 0 16px 36px rgba(15,23,42,.08);
}
.choice-card:has(input:checked) {
  border-color: rgba(15,118,110,.62);
  background: linear-gradient(180deg, #fff, #f0fdfa);
  box-shadow: 0 0 0 4px rgba(15,118,110,.10), 0 14px 32px rgba(15,118,110,.08);
}
.choice-card input { width: 16px; min-height: 16px; accent-color: var(--brand); }
.choice-card strong { font-size: 15px; }
.choice-card span, .choice-card small { color: var(--muted); }
.vivid-card:nth-child(3n+1) { background: linear-gradient(180deg, #fff, #edf8f6); }
.vivid-card:nth-child(3n+2) { background: linear-gradient(180deg, #fff, #f7fbff); }
.vivid-card:nth-child(3n) { background: linear-gradient(180deg, #fff, #eef3ff); }
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 9px;
  align-items: stretch;
}
.booking-payment-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 13px 14px;
  border: 1px solid rgba(15,118,110,.22);
  border-radius: 16px;
  background: rgba(240,253,250,.86);
  color: var(--ink);
  font-weight: 850;
}
.booking-payment-alert svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
}
.booking-payment-alert.requires-payment {
  border-color: rgba(180,83,9,.28);
  background: rgba(255,251,235,.92);
}
.slot-button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #f8fbff);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.slot-button.active, .slot-button:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 24px rgba(29,78,216,.16);
  transform: translateY(-1px);
}
.slot-button::before {
  content: "Available";
  display: block;
  margin-bottom: 2px;
  color: inherit;
  opacity: .72;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.flatpickr-calendar {
  width: 326px !important;
  padding: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: visible;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background: #fff;
}
.flatpickr-months,
.flatpickr-weekdays {
  background: #f8fbff;
}
.flatpickr-months {
  min-height: 56px;
  align-items: center;
  padding: 8px 10px 0;
  border-radius: 18px 18px 0 0;
}
.flatpickr-month {
  height: 44px;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  top: 16px;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 12px;
  color: var(--ink);
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: rgba(15,118,110,.10);
}
.flatpickr-current-month {
  position: static;
  left: auto;
  width: auto;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 36px;
  transform: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(15,23,42,.04);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  padding: 0 26px 0 10px;
}
.flatpickr-current-month input.cur-year {
  padding: 0 6px;
}
.flatpickr-weekdays {
  height: 38px;
  align-items: center;
}
.flatpickr-weekday {
  color: var(--muted) !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.flatpickr-days {
  padding: 8px 10px 0;
}
.dayContainer {
  width: 306px;
  min-width: 306px;
  max-width: 306px;
}
.flatpickr-day {
  border-radius: 10px;
  color: var(--ink);
}
.flatpickr-day:hover {
  border-color: rgba(15,118,110,.22);
  background: rgba(15,118,110,.08);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.flatpickr-input[readonly],
.flatpickr-input.form-control[readonly] {
  background: #fff;
  cursor: pointer;
}
.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.confirm-button {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
}
.booking-summary {
  position: sticky;
  top: 132px;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.booking-summary p { color: var(--muted); }
.light-summary {
  background:
    linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.96) 46%),
    linear-gradient(225deg, rgba(29,78,216,.08), transparent 46%),
    #fff;
}
.light-summary dl { display: grid; gap: 10px; margin: 16px 0; }
.light-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.light-summary dt { color: var(--muted); font-weight: 800; }
.light-summary dd { margin: 0; text-align: right; font-weight: 900; color: var(--ink); }
.colorful-summary {
  background:
    linear-gradient(135deg, rgba(15,118,110,.32), transparent 260px),
    linear-gradient(180deg, #0f172a, #172554);
  box-shadow: var(--shadow);
}
.colorful-summary dl { display: grid; gap: 10px; margin: 16px 0; }
.colorful-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.colorful-summary dt { color: #b9c8cc; }
.colorful-summary dd { margin: 0; text-align: right; font-weight: 900; }

.portal-grid article {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.success-panel, .error-panel, .warning-panel {
  margin: 12px 0;
  padding: 13px 15px;
  border-radius: 14px;
}
.success-panel { color: var(--ok); background: #ecfdf3; border: 1px solid #abefc6; }
.error-panel { color: var(--danger); background: #fef3f2; border: 1px solid #fecdca; }
.warning-panel { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.install-body { background: #101820; }
.install-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.brand-footer {
  margin: 10px clamp(14px,3vw,38px) 26px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
}
.brand-footer a { color: var(--brand); font-weight: 900; }
.brand-footer b {
  display: inline-flex;
  margin-left: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(15,118,110,.10);
  font-size: 11px;
}
code {
  display: inline-flex;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

@media (max-width: 1280px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav a { padding: 9px 10px; font-size: 12px; }
  .brand { min-width: 184px; }
}
@media (max-width: 900px) {
  .module-grid, .pricing-grid, .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head,
  .records-head,
  .panel-title-row,
  .section-title,
  .table-toolbar,
  .command-center,
  .staff-profile-hero,
  .client-profile-hero,
  .forms-command,
  .services-command,
  .billing-plan-toolbar {
    flex-wrap: wrap;
  }
  .services-command-actions,
  .client-profile-actions,
  .forms-command-actions,
  .records-head .button,
  .section-title .button {
    width: 100%;
  }
  .forms-hero,
  .dashboard-start-card,
  .forms-builder-grid,
  .form-template-grid,
  .form-mode-grid,
  .workspace-picker-grid,
  .signed-doc-meta,
  .pdf-map-layout,
  .contact-detail-grid {
    grid-template-columns: 1fr;
  }
  .lead-import-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .lead-import-panel form {
    width: 100%;
  }
  .embedded-checkout-shell {
    width: min(100% - 24px, 680px);
    grid-template-columns: 1fr;
    margin: 18px auto;
  }
  .embedded-checkout-copy {
    position: static;
  }
  .dashboard-start-card {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-start-card > div {
    align-items: flex-start;
  }
  .dashboard-start-card .button {
    width: 100%;
  }
  .sales-hero,
  .invoice-workspace,
  .public-invoice-shell {
    grid-template-columns: 1fr;
  }
  .marketing-template-grid,
  .automation-command-grid,
  .report-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-export-actions,
  .report-export-actions .button {
    width: 100%;
  }
  .invoice-summary-panel,
  .invoice-pay-panel {
    position: static;
  }
  .forms-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .form-field-row {
    grid-template-columns: 1fr;
  }
  .signup-shell {
    grid-template-columns: 1fr;
    margin: 18px auto;
  }
  .login-shell {
    grid-template-columns: 1fr;
    margin: 18px auto;
  }
  .login-brand-panel { min-height: auto; }
  .booking-link-card {
    display: grid;
    align-items: start;
  }
  .booking-link-card .button { width: 100%; }
  .signup-intro { min-height: auto; }
  .search-results-grid, .home-command-preview, .doc-grid, .support-layout, .legal-layout { grid-template-columns: 1fr; }
  .legal-hero {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 22px;
  }
  .legal-contact-card {
    position: static;
  }
  .doc-card {
    grid-template-columns: 1fr;
  }
  .doc-hero {
    display: grid;
    align-items: start;
  }
  .calendar-event-card,
  .time-clock-panel {
    display: grid;
    align-items: start;
  }
  .calendar-event-card {
    grid-template-columns: 1fr;
  }
  .calendar-event-card .action-hint {
    justify-self: start;
  }
  .billing-hero, .connect-grid, .stripe-config-grid, .stripe-test-grid, .stripe-diagnostic-grid, .stripe-diagnostic-notes, .payment-routing-grid { grid-template-columns: 1fr; }
  .billing-overview { grid-template-columns: 1fr; }
  .billing-plan-toolbar {
    display: grid;
    align-items: start;
  }
  .billing-toggle {
    width: 100%;
    justify-content: stretch;
  }
  .billing-toggle button { flex: 1; }
  .billing-grid .plan.featured { transform: none; }
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
  }
  .profile-tabs {
    top: 126px;
    margin-left: -2px;
    margin-right: -2px;
  }
  .brand { min-width: 0; }
  .mobile-back-button {
    display: inline-flex !important;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 42px;
    height: 42px;
    border-radius: 16px;
  }
  .menu-button {
    display: inline-flex !important;
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }
  .global-search {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .user-pill {
    grid-column: 3;
    grid-row: 1;
    justify-content: center;
    padding: 8px 10px;
  }
  .user-pill > strong,
  .user-pill > .user-pill-main small {
    display: none;
  }
  .nav {
    display: none;
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 14px;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    max-height: min(68dvh, 620px);
    overflow: auto;
    z-index: 120;
    grid-column: auto;
    grid-row: auto;
    overscroll-behavior: contain;
  }
  .nav.open {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
    animation: mobileSheetIn .18s ease-out;
  }
  .nav-group { display: grid; width: 100%; gap: 4px; }
  .nav a { width: 100%; justify-content: flex-start; border-radius: 12px; min-height: 44px; }
  .nav-group > a {
    position: relative;
  }
  .nav-group > a::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
  }
  .nav-group.expanded > a {
    color: var(--brand);
    background: rgba(15,118,110,.08);
  }
  .nav-group.expanded > a::after {
    transform: rotate(225deg);
  }
  .mega-menu {
    display: none;
    position: static;
    min-width: 0;
    padding: 2px 0 8px 14px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav-group:hover .mega-menu,
  .nav-group:focus-within .mega-menu {
    display: none;
  }
  .nav-group.expanded .mega-menu { display: grid; gap: 3px; }
  .nav-group.expanded:hover .mega-menu,
  .nav-group.expanded:focus-within .mega-menu {
    display: grid;
  }
  .mega-menu a {
    color: var(--muted);
    font-size: 13px;
    min-height: 40px;
    padding-left: 14px;
  }
  .user-pill { margin-left: 0; }
  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 130;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(203, 213, 225, .92);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 45px rgba(15,23,42,.18);
    backdrop-filter: blur(18px) saturate(1.15);
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    min-width: 0;
    min-height: 54px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 7px 3px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #64748b;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
    font-family: inherit;
    line-height: 1;
    transition: background .16s ease, color .16s ease, transform .16s ease;
  }
  .mobile-bottom-nav a svg,
  .mobile-bottom-nav button svg {
    width: 19px;
    height: 19px;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav button[aria-expanded="true"] {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 22px rgba(8,122,114,.18);
  }
  .mobile-bottom-nav a:active,
  .mobile-bottom-nav button:active {
    transform: translateY(1px) scale(.98);
  }
  @keyframes mobileSheetIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .workspace {
    padding-bottom: 86px;
  }
}
@media (max-width: 900px) {
  .view { padding: 20px 12px 34px; }
  .page-head, .layout-two, .booking-layout, .home-hero {
    display: grid;
    grid-template-columns: 1fr;
  }
  .booking-summary { position: static; }
  .premium-booking-hero {
    padding: 16px;
    border-radius: 18px;
  }
  .booking-badges {
    gap: 6px;
    margin-top: 10px;
  }
  .booking-badges span {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
  }
  .booking-category-panel summary {
    align-items: flex-start;
    min-height: 52px;
    padding: 10px 12px;
  }
  .booking-category-panel summary > span {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .booking-category-panel summary strong {
    font-size: 15px;
  }
  .booking-category-panel summary small {
    white-space: normal;
  }
  .booking-service-list {
    padding: 0 10px 10px;
  }
  .booking-service-row {
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 0;
  }
  .booking-service-row .service-row-meta {
    grid-column: 2;
    justify-items: start;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
  }
  .page-head { align-items: start; }
  .page-head h1 { font-size: 34px; }
  .home-hero h1, .billing-hero h2, .portal-hero h1 { font-size: 34px; }
  .form-grid { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .phone-input-group {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .choice-grid, .choice-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-progress, .booking-speedbar, .industry-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-progress.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preferences-grid,
  .staff-grid,
  .service-check-grid {
    grid-template-columns: 1fr;
  }
  .staff-command,
  .staff-list-toolbar,
  .staff-list-toolbar form,
  .services-command,
  .preferences-hero,
  .staff-profile-hero {
    display: grid;
    align-items: start;
  }
  .staff-home-grid {
    grid-template-columns: 1fr;
  }
  .staff-clock-card,
  .staff-quick-card {
    display: grid;
    justify-items: start;
  }
  .staff-mini-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-category-strip {
    grid-template-columns: 1fr;
  }
  .records-search {
    width: 100%;
  }
  .schedule-day,
  .business-day {
    grid-template-columns: 1fr;
  }
  .toggle-grid {
    grid-template-columns: 1fr;
  }
  .wizard-actions .button { flex: 1 1 130px; }
  .insight-strip, .quick-action-row { grid-template-columns: 1fr; }
  .command-center, .section-title { display: grid; align-items: start; }
  .home-hero { min-height: auto; }
  .portal-hero { display: grid; }
  .table-toolbar { display: grid; }
}
@media (max-width: 640px) {
  .metric-grid, .module-grid, .pricing-grid, .portal-grid, .choice-grid, .choice-grid.compact,
  .marketing-template-grid, .automation-command-grid, .report-library {
    grid-template-columns: 1fr;
  }
  .booking-service-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .service-row-meta {
    grid-column: 2;
    grid-row: 2;
    justify-items: start;
    grid-auto-flow: column;
    justify-content: start;
    gap: 10px;
  }
  .empty-category,
  .service-category-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .empty-category .button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .services-command-actions {
    justify-content: stretch;
  }
  .services-command-actions .button {
    flex: 1 1 150px;
  }
  .phone-input-group {
    grid-template-columns: 1fr;
  }
  .signup-intro,
  .signup-card,
  .login-brand-panel,
  .login-card {
    padding: 20px;
    border-radius: 18px;
  }
  .profile-tabs {
    top: 122px;
    padding: 7px;
    gap: 6px;
  }
  .profile-tabs a {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
  }
  .signup-intro h1,
  .login-brand-panel h1,
  .premium-booking-hero h1 { font-size: 27px; }
  .booking-public {
    margin: -4px auto 0;
  }
  .premium-booking-hero {
    padding: 14px;
    margin-bottom: 10px;
  }
  .premium-booking-hero p {
    font-size: 14px;
  }
  .signup-card-head {
    display: grid;
  }
  .signup-card-head .button {
    width: 100%;
  }
  .search-form {
    grid-template-columns: 1fr;
  }
  .lead-import-panel form {
    grid-template-columns: 1fr;
  }
  .lead-import-panel .button {
    width: 100%;
  }
  .search-results-head {
    display: grid;
    align-items: start;
  }
  .doc-shot {
    min-height: 150px;
  }
  .home-hero h1, .billing-hero h2, .portal-hero h1 { font-size: 30px; }
  .billing-tabs {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .billing-hero {
    padding: 20px;
    border-radius: 18px;
  }
  .billing-hero h2 { font-size: 32px; }
  .billing-summary-card > strong { font-size: 28px; }
  .billing-summary-card dl div {
    display: grid;
    gap: 3px;
  }
  .billing-summary-card dd { text-align: left; }
  .billing-plan-toolbar { padding: 16px; }
  .billing-toggle {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 18px;
  }
  .billing-toggle button { border-radius: 13px; }
  .billing-grid .plan { padding: 24px; min-height: auto; }
  .billing-plan strong { font-size: 42px; }
  .booking-speedbar, .industry-row { grid-template-columns: 1fr; }
  .booking-progress { grid-template-columns: 1fr; }
  .premium-booking-flow .booking-progress {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-sm);
  }
  .premium-booking-flow .booking-progress button {
    min-height: 36px;
    padding: 7px;
    font-size: 0;
    border-radius: 12px;
  }
  .premium-booking-flow .booking-progress button svg {
    width: 17px;
    height: 17px;
  }
  .booking-steps { gap: 12px; }
  .booking-panel h2 {
    font-size: 23px;
    margin: 0;
  }
  .booking-panel > .eyebrow {
    font-size: 11px;
  }
  .booking-panel.active { gap: 12px; }
  .choice-card {
    min-height: 104px;
    padding: 13px;
  }
  .booking-summary {
    padding: 16px;
    border-radius: 18px;
  }
  .light-summary dl div {
    display: grid;
    gap: 3px;
  }
  .light-summary dd {
    text-align: left;
  }
  .wizard-actions {
    display: grid;
  }
  .wizard-actions .button { width: 100%; }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-actions,
  .profile-settings-grid,
  .stepper-grid {
    grid-template-columns: 1fr;
  }
  .sticky-save {
    display: grid;
  }
  .sticky-save .button {
    width: 100%;
  }
  .metric { min-height: 126px; }
  table { min-width: 720px; }
  .user-pill > strong,
  .user-pill > .user-pill-main small {
    display: none;
  }
  .brand small { display: none; }
  .brand strong { font-size: 14px; }
  .topbar { gap: 8px; }
.nav { top: auto; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; }
}

@media (max-width: 520px) {
  .account-menu-panel {
    right: -8px;
    width: min(248px, calc(100vw - 24px));
  }
  .mobile-bottom-nav {
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px;
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    min-height: 50px;
    font-size: 10px;
    border-radius: 14px;
  }
  .mobile-bottom-nav a svg,
  .mobile-bottom-nav button svg {
    width: 18px;
    height: 18px;
  }
}

/* Mobile app shell fixes: bottom menu, Back button, and compact install help. */
.pwa-dashboard-card.push-enabled {
  padding: 14px 16px;
}

.pwa-dashboard-card.push-enabled > div {
  align-items: flex-start;
}

.pwa-dashboard-card.push-enabled .module-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.pwa-dashboard-card.push-enabled p.muted {
  display: block;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.pwa-dashboard-card.push-enabled .pwa-install-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.pwa-dashboard-card.push-enabled .pwa-install-steps span {
  padding: 7px 9px;
  font-size: 11px;
  border-radius: 11px;
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center;
  }

  .mobile-back-button {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start;
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .menu-button {
    display: none !important;
  }

  .user-pill {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .global-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-height: min(70dvh, 620px);
    overflow: auto;
    z-index: 240 !important;
  }

  .nav.open,
  body.mobile-menu-open .nav {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
  }

  .mobile-bottom-nav {
    display: grid !important;
    z-index: 260 !important;
  }

  .workspace {
    padding-bottom: 96px;
  }
}

@media (max-width: 640px) {
  .pwa-dashboard-card,
  .pwa-dashboard-card.push-enabled {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pwa-actions {
    justify-content: stretch;
  }

  .pwa-actions .button {
    width: 100%;
  }

  .pwa-dashboard-card.push-enabled .pwa-install-steps {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mobile-back-button {
    width: 40px;
    height: 40px;
  }

  .mobile-bottom-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }

  .nav {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.sales-report-metrics,
.sales-chart-panel,
.sales-report-grid,
.campaign-test-panel {
  width: min(100%, 1360px);
  margin-left: auto;
  margin-right: auto;
}

.sales-report-metrics {
  margin-bottom: 18px;
}

.sales-chart-panel {
  margin-bottom: 18px;
}

.sales-bar-chart {
  display: flex;
  align-items: end;
  gap: 12px;
  min-height: 260px;
  overflow-x: auto;
  padding: 18px 4px 6px;
}

.sales-bar-chart article {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 8px;
  min-width: 88px;
  color: var(--muted);
  font-size: 12px;
}

.sales-bar-chart article > span {
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}

.sales-bar {
  width: 56px;
  min-height: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  border-radius: 16px 16px 7px 7px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 18px 34px rgba(15, 118, 110, .18);
}

.sales-bar span {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(225deg);
}

.sales-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.campaign-performance-panel {
  width: min(100%, 1360px);
  margin: 0 auto 18px;
}

.campaign-report-pro {
  display: grid;
  gap: 16px;
}

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

.campaign-scoreboard article,
.campaign-funnel-card,
.campaign-health-card,
.campaign-activity-card,
.campaign-top-recipients {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15,23,42,.05);
}

.campaign-scoreboard article {
  min-height: 132px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.98) 58%),
    #fff;
}

.campaign-scoreboard span,
.campaign-funnel-row span,
.campaign-activity-list span,
.campaign-last-activity b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.campaign-scoreboard strong {
  font-size: 30px;
  line-height: 1;
}

.campaign-scoreboard small {
  color: var(--muted);
  font-weight: 750;
}

.campaign-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 14px;
}

.campaign-funnel-card,
.campaign-health-card,
.campaign-activity-card,
.campaign-top-recipients {
  padding: 16px;
}

.campaign-funnel-card h3,
.campaign-health-card h3,
.campaign-activity-card h3,
.campaign-top-recipients h3 {
  margin: 0 0 12px;
  font-size: 17px;
}

.campaign-funnel-row {
  display: grid;
  grid-template-columns: 120px 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.campaign-funnel-row b {
  font-size: 15px;
}

.campaign-funnel-row i {
  display: block;
  height: 10px;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.report-mini-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.report-mini-grid.compact article {
  padding: 12px;
}

.report-mini-grid.compact strong {
  font-size: 20px;
}

.campaign-activity-list {
  display: grid;
  gap: 8px;
}

.campaign-activity-list div,
.campaign-last-activity span {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) repeat(3, auto);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.campaign-last-activity {
  display: grid;
  gap: 8px;
}

.campaign-last-activity span {
  grid-template-columns: 110px minmax(0, 1fr);
}

.campaign-top-recipients .table-panel {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .campaign-scoreboard,
  .campaign-report-layout {
    grid-template-columns: 1fr;
  }

  .campaign-funnel-row {
    grid-template-columns: 88px 44px minmax(0, 1fr);
  }

  .campaign-activity-list div,
  .campaign-last-activity span {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.sales-chart-bars {
  min-height: 220px;
  display: flex;
  align-items: end;
  gap: 14px;
  padding: 18px 0 4px;
}

.sales-chart-bars > span {
  flex: 1;
  min-height: 18px;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 18px 18px 10px 10px;
  color: #fff;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 18px 36px rgba(15,118,110,.16);
}

.sales-chart-bars b,
.sales-chart-bars strong {
  color: #fff;
}

.sales-chart-bars b {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sales-chart-bars strong {
  font-size: 22px;
}

.report-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.report-mini-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.report-mini-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.report-mini-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.campaign-test-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: end;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 18px;
}

.campaign-test-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.access-role-grid {
  width: min(100%, 1360px);
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.access-role-card {
  min-height: 240px;
}

.access-role-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.access-invite-panel {
  width: min(100%, 1360px);
  margin-left: auto;
  margin-right: auto;
}

.marketing-tabs {
  width: min(100%, 1360px);
  margin: 0 auto 18px;
  flex-wrap: wrap;
}

.checklist-field {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  background: rgba(255,255,255,.76);
}

.checklist-field legend {
  padding: 0 8px;
  font-weight: 900;
  color: var(--text);
}

.checklist-field label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-weight: 800;
}

.checklist-field input {
  width: 18px;
  height: 18px;
}

.doc-layout {
  width: min(100%, 1360px);
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.doc-sidebar {
  position: sticky;
  top: 104px;
  align-self: start;
  max-height: none;
  overflow: visible;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}

.doc-sidebar strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 14px;
}

.doc-sidebar nav {
  display: grid;
  gap: 6px;
}

.doc-sidebar a {
  display: block;
  padding: 9px 10px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.doc-sidebar a:hover {
  color: var(--brand);
  background: rgba(15,118,110,.08);
}

.help-search-panel {
  width: min(100%, 1360px);
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.help-search-panel label {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
}

.help-search-panel label svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: 0 0 auto;
}

.help-search-panel input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  color: var(--text);
  font: inherit;
  font-weight: 750;
}

.help-search-panel input::placeholder {
  color: var(--muted);
}

.doc-guide-list {
  display: grid;
  gap: 16px;
}

.doc-guide-card {
  display: grid;
  gap: 14px;
}

.doc-guide-card ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.doc-guide-card li::marker {
  color: var(--brand);
  font-weight: 900;
}

.quick-start-hero {
  width: min(100%, 1360px);
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 20%, rgba(20,184,166,.2), transparent 28%),
    linear-gradient(135deg, rgba(15,118,110,.12), rgba(37,99,235,.1) 55%, rgba(255,255,255,.96)),
    #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.quick-start-hero-simple {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(16px, 2.4vw, 22px);
}

.quick-start-hero h1 {
  margin: 0 0 8px;
  max-width: 820px;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.04;
}

.quick-start-hero-simple h1 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}

.quick-start-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.quick-start-hero-actions .button {
  white-space: nowrap;
}

.quick-start-hero-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(203,213,225,.88);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(236,253,245,.72)),
    #fff;
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

.quick-start-hero-panel strong {
  font-size: 15px;
  color: var(--ink);
}

.quick-start-hero-panel p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}

.quick-start-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.quick-start-progress {
  width: min(100%, 1360px);
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(260px, .65fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.quick-start-mini-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-start-mini-steps a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(203,213,225,.88);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.quick-start-mini-steps a:hover {
  transform: translateY(-1px);
  border-color: rgba(15,118,110,.35);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.quick-start-mini-steps span,
.quick-start-number {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 12px;
  font-weight: 950;
}

.quick-start-grid {
  width: min(100%, 1360px);
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.quick-start-card {
  display: grid;
  gap: 8px;
  align-content: start;
  position: relative;
  overflow: hidden;
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.quick-start-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(15,118,110,.85), rgba(37,99,235,.85));
  opacity: .8;
}

.quick-start-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15,118,110,.28);
  box-shadow: 0 18px 44px rgba(15,23,42,.1);
}

.quick-start-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.quick-start-card-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.quick-start-card-head .eyebrow {
  margin: 0;
}

.quick-start-card h2 {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.15;
}

.quick-start-card p.muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.quick-start-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-start-card li {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(20,184,166,.16);
  border-radius: 999px;
  color: var(--brand-strong);
  background: rgba(20,184,166,.08);
  font-size: 11px;
  font-weight: 800;
}

.quick-start-card li svg {
  width: 13px;
  height: 13px;
  color: var(--brand);
  flex: 0 0 auto;
}

.quick-start-card .button {
  width: 100%;
  margin-top: 4px;
  align-self: end;
  min-height: 38px;
  padding: 8px 10px;
}

.quick-start-final {
  width: min(100%, 1360px);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.7)),
    #fff;
}

.faq-grid {
  width: min(100%, 1360px);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.faq-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.faq-card h2 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
}

.faq-card ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.faq-card li::marker {
  color: var(--brand);
  font-weight: 900;
}

[data-help-card][hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .quick-start-hero,
  .quick-start-progress,
  .quick-start-final {
    grid-template-columns: 1fr;
  }
  .quick-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-start-hero-actions,
  .quick-start-final-actions {
    justify-content: stretch;
  }
  .quick-start-hero-panel .button,
  .quick-start-hero-actions .button,
  .quick-start-final-actions .button,
  .quick-start-card .button {
    width: 100%;
    justify-self: stretch;
  }
  .help-search-panel,
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .doc-layout {
    grid-template-columns: 1fr;
  }
  .doc-sidebar {
    position: sticky;
    top: 82px;
    z-index: 6;
    max-height: none;
    padding: 12px;
    border-radius: 16px;
  }
  .doc-sidebar nav {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  .doc-sidebar strong {
    margin-bottom: 8px;
  }
  .doc-sidebar a {
    flex: 0 0 auto;
    min-width: 160px;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .sales-report-grid,
  .campaign-test-panel,
  .campaign-test-form,
  .report-mini-grid,
  .access-role-grid {
    grid-template-columns: 1fr;
  }

  .checklist-field {
    grid-template-columns: 1fr;
  }

  .sales-bar-chart {
    min-height: 220px;
  }

  .sales-chart-bars {
    min-height: 180px;
    gap: 8px;
  }

  .campaign-test-form .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .quick-start-hero {
    border-radius: 20px;
  }
  .quick-start-hero h1 {
    font-size: 26px;
  }
  .quick-start-hero-simple {
    padding: 16px;
  }
  .quick-start-grid {
    grid-template-columns: 1fr;
  }
  .quick-start-card-head {
    align-items: flex-start;
  }
  .quick-start-card-head > div {
    align-items: flex-start;
    flex-direction: column;
  }
  .quick-start-mini-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-start-mini-steps a {
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
  }
}

.location-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.045);
  min-width: 210px;
  max-width: 280px;
}

.location-switcher svg {
  width: 17px;
  height: 17px;
  color: var(--brand);
}

.location-switcher select {
  border: 0;
  background: transparent;
  font-weight: 800;
  color: var(--ink);
  width: 100%;
  outline: none;
}

.locations-hero {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 22px;
}

.button.compact-action {
  width: auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 13px;
  white-space: nowrap;
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.location-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f7fbfb);
  box-shadow: 0 12px 32px rgba(15,23,42,.055);
}

.location-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.location-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.location-card p,
.location-card dl {
  margin: 0;
}

.location-card dl {
  display: grid;
  gap: 10px;
}

.location-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(148,163,184,.22);
}

.location-card dt {
  color: var(--muted);
  font-size: .82rem;
}

.location-card dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.readonly-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  font-weight: 800;
}

.location-checklist {
  background: linear-gradient(135deg, rgba(20,125,117,.08), rgba(37,99,235,.05));
  border-radius: 18px;
}

.form-page-card {
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(20,125,117,.05), rgba(37,99,235,.035)),
    #fff;
}

.form-page-card .form-grid {
  gap: 16px;
}

.form-page-card label,
.location-checklist {
  padding: 14px;
  border: 1px solid rgba(217,226,236,.86);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
}

.form-page-card label input,
.form-page-card label select,
.form-page-card label textarea {
  margin-top: 7px;
  background: #fff;
}

.form-page-card .form-actions {
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid rgba(148,163,184,.18);
}

.booking-location-strip {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fbfb);
}

.booking-location-dropdown {
  position: relative;
}

.booking-location-dropdown summary {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 8px 18px rgba(15,23,42,.045);
}

.booking-location-dropdown summary::-webkit-details-marker {
  display: none;
}

.location-summary-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(15,118,110,.10);
}

.location-summary-icon svg,
.booking-location-dropdown summary > svg {
  width: 17px;
  height: 17px;
}

.location-summary-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.location-summary-copy strong {
  font-size: 14px;
}

.location-summary-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-location-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 40px rgba(15,23,42,.11);
  max-height: 260px;
  overflow: auto;
}

.booking-location-options label {
  cursor: pointer;
}

.booking-location-options input {
  position: absolute;
  opacity: 0;
}

.booking-location-options span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.booking-location-options svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
}

.booking-location-options small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
}

.booking-location-options input:checked + span {
  border-color: var(--brand);
  background: linear-gradient(135deg, rgba(15,118,110,.08), #fff);
  box-shadow: 0 10px 22px rgba(20,125,117,.10);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .preference-scope-panel {
    grid-template-columns: 1fr;
  }

  .search-location-row {
    grid-template-columns: 1fr;
  }

  .location-switcher {
    width: 100%;
    max-width: none;
    border-radius: 18px;
  }

  .locations-hero {
    grid-template-columns: 1fr;
  }

  .booking-location-options {
    grid-template-columns: 1fr;
  }
}

/* v2.7.9 CRM polish: compact forms, tables, actions, and signup flow. */
body { font-size: 14px; }
h1 { font-size: 30px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.view { padding-top: 22px; padding-bottom: 22px; }
.page-head h1,
.staff-profile-hero h1,
.client-profile-hero h1,
.forms-hero h1,
.public-form-head h1,
.portal-hero h1 {
  font-size: clamp(24px, 3vw, 30px);
}
.sales-hero h2,
.records-head h2,
.panel-title-row h2,
.services-command h2,
.staff-command h2,
.preferences-hero h2,
.command-center h2,
.section-title h2 {
  font-size: 20px;
}
.panel,
.sales-hero,
.records-shell,
.forms-hero,
.services-command,
.staff-command,
.preferences-hero,
.client-profile-hero,
.portal-hero {
  margin-bottom: 12px;
}
.records-shell { gap: 10px; }
.records-head {
  padding: 14px 16px;
  border-radius: 16px;
}
.table-toolbar {
  padding: 10px 12px;
  border-radius: 16px 16px 0 0;
}
.table-toolbar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.table-toolbar .table-search-control {
  width: min(360px, 48vw);
}
.table-page-size {
  width: auto !important;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.table-page-size select {
  width: auto;
  min-height: 34px;
  margin-left: 6px;
  padding: 4px 28px 4px 8px;
  border: 0;
  background-color: transparent;
  font-size: 13px;
}
.table-panel {
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15,23,42,.055);
}
table {
  min-width: 920px;
}
th, td {
  padding: 11px 12px;
  font-size: 13px;
}
td:last-child,
th:last-child {
  width: 1%;
  white-space: nowrap;
}
.table-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.table-actions .action-button,
td .action-button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.table-result-set {
  display: block;
  width: 100%;
  margin: 12px 0 18px;
}
.table-result-set:last-child {
  margin-bottom: 0;
}
.table-pagination,
.server-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
}
.table-pagination > div,
.server-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-pagination span,
.server-pagination span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.table-pagination .table-page-current,
.server-pagination .table-page-current {
  min-width: 90px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  text-align: center;
}
.table-pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.server-pagination a {
  text-decoration: none;
}
.platform-restore-panel .table-result-set,
.platform-retention-panel .table-result-set {
  margin-top: 14px;
}
.platform-retention-table td strong,
.platform-retention-table td small {
  display: block;
}
.platform-retention-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}
.readiness-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.compact-form-grid {
  gap: 12px;
}
.location-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 6px 9px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 999px;
  color: #0f766e;
  background: rgba(240,253,250,.82);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.location-tag svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.premium-booking-hero {
  padding: 13px 16px;
  border-radius: 18px;
}
.premium-booking-hero h1 {
  margin: 3px 0 5px;
  font-size: clamp(23px, 3vw, 30px);
}
.premium-booking-hero p {
  font-size: 13px;
}
.booking-badges {
  margin-top: 8px;
}
.booking-public {
  max-width: 1060px;
}
.premium-booking-flow {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 12px;
  margin-top: 10px;
}
.premium-booking-flow .booking-steps {
  padding: 14px;
}
.booking-progress {
  gap: 6px;
  padding: 5px;
}
.booking-progress button {
  min-height: 36px;
  height: 36px;
  font-size: 12px;
}
.booking-panel.active {
  gap: 12px;
}
.booking-panel h2 {
  margin: 0;
  font-size: 20px;
}
.booking-panel > .muted {
  margin: -6px 0 0;
  font-size: 13px;
}
.booking-service-row {
  min-height: 74px;
  padding: 12px;
}
.booking-date-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.booking-date-rail button {
  flex: 0 0 92px;
  min-height: 62px;
  display: grid;
  gap: 3px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(15,23,42,.045);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.booking-date-rail button:hover,
.booking-date-rail button.active {
  transform: translateY(-1px);
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.booking-date-rail span {
  font-size: 12px;
  font-weight: 850;
  opacity: .82;
}
.booking-date-rail strong {
  font-size: 14px;
}
.compact-date-picker {
  max-width: 220px;
}
.slot-grid {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}
.slot-button {
  min-height: 44px;
  border-radius: 13px;
}

.form-page-card,
.panel.form-page-card {
  padding: 14px;
}

.form-page-card .form-grid,
.form-grid {
  gap: 10px;
  align-items: start;
}

.form-page-card label,
.business-profile-card .form-grid > label,
.form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.location-checklist {
  min-height: auto;
  padding: 10px 12px;
  border-radius: 13px;
}

.form-grid label {
  gap: 4px;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.form-page-card input,
.form-page-card select,
.form-page-card textarea {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.form-grid textarea,
.form-page-card textarea {
  min-height: 78px;
}

.form-grid input[type="file"],
.form-page-card input[type="file"] {
  min-height: 38px;
  padding: 8px 10px;
}

.form-grid label > small,
.form-page-card label > small {
  margin-top: 3px;
  line-height: 1.32;
}

.button,
button.button,
a.button {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 13px;
  gap: 7px;
  line-height: 1.1;
  white-space: nowrap;
}

.action-button,
td .action-button,
.table-actions .action-button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.action-button svg,
td .action-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

td .row-actions,
td .table-actions,
.table-actions,
.platform-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  overflow: visible;
  max-width: none;
}

td .row-actions form,
td .table-actions form {
  flex: 0 0 auto;
}

.table-panel,
.dashboard-table-wrap,
.records-table-wrap,
.report-table-wrap {
  overflow-x: auto;
}

.platform-tenant-card .platform-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  white-space: normal;
  width: 100%;
}

.platform-tenant-card .platform-actions form {
  display: grid;
  margin: 0;
}

.platform-tenant-card .platform-actions form:not([data-confirm-delete]) {
  flex: 0 0 112px;
}

.platform-tenant-card .platform-actions form[data-confirm-delete] {
  grid-template-columns: minmax(190px, 1fr) auto;
  flex: 1 1 360px;
}

.platform-tenant-card .platform-actions .action-button {
  width: 100%;
  min-height: 40px;
  padding-inline: 12px;
  justify-content: center;
}

.platform-tenant-card .platform-actions input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .platform-tenant-card .platform-actions form:not([data-confirm-delete]),
  .platform-tenant-card .platform-actions form[data-confirm-delete] {
    flex: 1 1 100%;
  }
  .platform-tenant-card .platform-actions form[data-confirm-delete] {
    grid-template-columns: 1fr;
  }
}

.table-panel table,
.records-table-wrap table,
.report-table-wrap table {
  width: 100%;
  table-layout: auto;
}

.table-panel th,
.table-panel td,
.records-table-wrap th,
.records-table-wrap td,
.report-table-wrap th,
.report-table-wrap td {
  padding: 12px 14px;
  vertical-align: middle;
}

.table-panel th:last-child,
.table-panel td:last-child,
.records-table-wrap th:last-child,
.records-table-wrap td:last-child,
.report-table-wrap th:last-child,
.report-table-wrap td:last-child {
  width: 1%;
  min-width: 330px;
  white-space: nowrap;
}

.dashboard-appointments-table th,
.dashboard-appointments-table td {
  padding: 11px 13px;
}

.dashboard-appointments-table td:last-child,
.dashboard-appointments-table th:last-child {
  min-width: 112px;
}

.panel,
.sales-hero,
.records-shell,
.forms-hero,
.services-command,
.staff-command,
.preferences-hero,
.client-profile-hero,
.portal-hero {
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  table { min-width: 760px; }
  .table-toolbar {
    display: grid;
    gap: 10px;
  }
  .table-toolbar-controls,
  .table-toolbar .table-search-control,
  .table-page-size {
    width: 100% !important;
  }
  .table-toolbar-controls {
    justify-content: stretch;
  }
  .table-pagination,
  .server-pagination {
    display: grid;
  }
  .table-pagination > div,
  .server-pagination > div {
    justify-content: space-between;
  }
  .premium-booking-flow { grid-template-columns: 1fr; }
  .booking-summary { order: 2; }
  .premium-booking-hero {
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .premium-booking-hero h1 {
    font-size: 22px;
    margin: 2px 0 3px;
  }
  .premium-booking-hero p,
  .booking-badges {
    display: none;
  }
  .booking-location-options span {
    min-height: 54px;
  }
  .form-page-card,
  .panel.form-page-card {
    padding: 14px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .form-page-card label,
  .business-profile-card .form-grid > label,
  .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option) {
    padding: 12px 13px;
  }
  .table-panel th,
  .table-panel td,
  .records-table-wrap th,
  .records-table-wrap td,
  .report-table-wrap th,
  .report-table-wrap td {
    padding: 10px 11px;
  }
  .table-panel th:last-child,
  .table-panel td:last-child,
  .records-table-wrap th:last-child,
  .records-table-wrap td:last-child,
  .report-table-wrap th:last-child,
  .report-table-wrap td:last-child {
    min-width: 286px;
  }
  td .row-actions,
  td .table-actions,
  .table-actions {
    gap: 6px;
  }
  .action-button,
  td .action-button,
  .table-actions .action-button {
    min-height: 33px;
    padding: 7px 9px;
  }
}

@media (max-width: 760px) {
  .table-panel,
  .records-table-wrap,
  .report-table-wrap {
    overflow: visible;
  }

  .table-panel table,
  .records-table-wrap table,
  .report-table-wrap table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table-panel thead,
  .records-table-wrap thead,
  .report-table-wrap thead {
    display: none;
  }

  .table-panel tbody,
  .records-table-wrap tbody,
  .report-table-wrap tbody {
    display: grid;
    gap: 12px;
  }

  .table-panel tr,
  .records-table-wrap tr,
  .report-table-wrap tr {
    display: block;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 30px rgba(15,23,42,.07);
  }

  .table-panel th,
  .records-table-wrap th,
  .report-table-wrap th {
    display: none;
  }

  .table-panel td,
  .records-table-wrap td,
  .report-table-wrap td {
    display: grid;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid rgba(219,228,235,.74);
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .table-panel td:last-child,
  .records-table-wrap td:last-child,
  .report-table-wrap td:last-child {
    border-bottom: 0;
  }

  .table-panel td::before,
  .records-table-wrap td::before,
  .report-table-wrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .table-panel td:empty,
  .records-table-wrap td:empty,
  .report-table-wrap td:empty {
    display: none;
  }

  .table-panel td > *,
  .records-table-wrap td > *,
  .report-table-wrap td > * {
    min-width: 0;
    max-width: 100%;
  }

  .contact-table-name,
  .location-tag,
  .status-pill,
  .contact-tag,
  .service-category-tag {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .table-panel .row-actions,
  .records-table-wrap .row-actions,
  .report-table-wrap .row-actions,
  .table-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px;
    white-space: normal;
  }

  .table-panel .row-actions form,
  .records-table-wrap .row-actions form,
  .report-table-wrap .row-actions form,
  .table-actions form {
    flex: 0 1 auto;
    min-width: 0;
  }

  .table-panel .action-button,
  .records-table-wrap .action-button,
  .report-table-wrap .action-button,
  td .action-button,
  .table-actions .action-button {
    width: auto;
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .table-pagination,
  .server-pagination {
    margin-top: 12px;
  }
}

/* v2.7.9 signup polish: custom business category and tighter workspace setup. */
.signup-shell {
  gap: 18px;
}

.signup-intro {
  min-height: 560px;
  padding: 28px;
}

.signup-intro h1 {
  margin: 6px 0 10px;
  font-size: clamp(30px, 4vw, 38px);
}

.signup-intro p {
  font-size: 15px;
  line-height: 1.55;
}

.signup-card {
  padding: 22px;
}

.signup-card-head {
  margin-bottom: 12px;
}

.signup-card-head h2 {
  font-size: 26px;
}

.signup-form {
  gap: 10px;
}

.signup-form label {
  gap: 5px;
}

.signup-form input,
.signup-form select {
  min-height: 42px;
  padding: 9px 11px;
}

.phone-input-group {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 7px;
}

.phone-prefix,
.phone-input-group input {
  min-height: 42px;
}

.signup-submit {
  gap: 7px;
}

.signup-submit .button {
  min-height: 44px;
}

[data-other-business-category][hidden] {
  display: none !important;
}

/* v2.9.58 signup landing page for paid traffic. */
.signup-landing {
  width: min(1320px, 100%);
  margin: 26px auto 0;
}

.signup-ad-shell {
  width: 100%;
  grid-template-columns: minmax(320px, .92fr) minmax(520px, 1.08fr);
  gap: 18px;
  align-items: stretch;
}

.signup-ad-copy {
  min-height: auto;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  background:
    radial-gradient(circle at 8% 8%, rgba(15,118,110,.15), transparent 28%),
    linear-gradient(138deg, rgba(236,253,245,.92), rgba(255,255,255,.96) 50%, rgba(239,246,255,.86)),
    #fff;
}

.signup-ad-copy h1 {
  max-width: 620px;
  margin: 8px 0 12px;
  font-size: clamp(32px, 3.3vw, 50px);
  line-height: 1.02;
  letter-spacing: 0;
}

.signup-ad-copy p {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.62;
}

.signup-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.signup-proof-row span,
.signup-plan-limit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(15,118,110,.2);
  border-radius: 999px;
  background: rgba(240,253,250,.86);
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.signup-proof-row svg,
.signup-plan-limit svg {
  width: 16px;
  height: 16px;
}

.signup-hero-proof {
  margin-top: 16px;
}

.signup-login-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(203,213,225,.95);
  border-radius: 999px;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255,255,255,.9);
}

.signup-login-link:hover {
  border-color: rgba(15,118,110,.35);
  color: #0f766e;
  transform: translateY(-1px);
}

.signup-login-link svg {
  width: 16px;
  height: 16px;
}

.signup-ad-copy .signup-benefits {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.signup-ad-copy .signup-benefits span {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 13px;
}

.signup-form-panel {
  padding: 24px 26px;
  border-radius: 22px;
}

.signup-form-panel .signup-card-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

.signup-form-panel .signup-card-head h2 {
  margin: 2px 0 4px;
  font-size: 29px;
}

.signup-form-panel .signup-card-head p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.signup-form-panel .signup-form {
  gap: 9px 12px;
}

.signup-form-panel .signup-form label {
  gap: 4px;
  font-size: 12px;
}

.signup-form-panel .signup-form input,
.signup-form-panel .signup-form select {
  min-height: 40px;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px;
}

.signup-form-panel .phone-input-group {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 7px;
}

.signup-form-panel .phone-prefix,
.signup-form-panel .phone-input-group input {
  min-height: 40px;
}

.signup-form-panel .terms-line {
  margin-top: 2px;
  align-items: flex-start;
}

.signup-form-panel .terms-line input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.signup-form-panel .signup-submit {
  gap: 6px;
}

.signup-form-panel .signup-submit .button {
  min-height: 44px;
}

.signup-section {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
}

.signup-section-head {
  max-width: 780px;
  margin-bottom: 16px;
}

.signup-section-head h2 {
  margin: 4px 0 6px;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.12;
}

.signup-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

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

.signup-feature-card {
  min-height: 154px;
  padding: 18px;
  border: 1px solid rgba(217,226,236,.92);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(240,253,250,.72), rgba(255,255,255,.96) 45%),
    #fff;
}

.signup-feature-card span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(15,118,110,.1);
  color: var(--brand);
}

.signup-feature-card svg {
  width: 19px;
  height: 19px;
}

.signup-feature-card h3 {
  margin: 14px 0 6px;
  font-size: 17px;
}

.signup-feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

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

.signup-plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(217,226,236,.95);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,.06);
}

.signup-plan-card.selected {
  border-color: rgba(15,118,110,.58);
  box-shadow: 0 20px 54px rgba(15,118,110,.13);
}

.signup-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 950;
  font-size: 20px;
}

.signup-plan-top em {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.signup-plan-card strong {
  font-size: 40px;
  line-height: 1;
}

.signup-plan-card strong small {
  color: var(--muted);
  font-size: 15px;
}

.signup-plan-card p {
  min-height: 42px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.signup-plan-card ul {
  margin: 2px 0 4px;
  padding-left: 18px;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

.signup-plan-card .button {
  margin-top: auto;
  justify-content: center;
  min-height: 42px;
}

.signup-faq-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, .12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
}

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

.signup-faq-item {
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.signup-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 16px;
  color: #0f172a;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.signup-faq-item summary::-webkit-details-marker {
  display: none;
}

.signup-faq-item summary svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--brand);
  transition: transform .18s ease;
}

.signup-faq-item[open] summary svg {
  transform: rotate(180deg);
}

.signup-faq-item p {
  margin: -2px 16px 16px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.signup-faq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240, 253, 250, .86), rgba(239, 246, 255, .78));
}

.signup-faq-cta div {
  display: grid;
  gap: 4px;
}

.signup-faq-cta strong {
  color: #0f172a;
  font-size: 17px;
}

.signup-faq-cta span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 980px) {
  .signup-ad-shell,
  .signup-feature-grid,
  .signup-plan-grid,
  .signup-faq-grid {
    grid-template-columns: 1fr;
  }

  .signup-form-panel {
    order: 1;
  }

  .signup-ad-copy {
    order: 2;
  }

  .signup-ad-copy .signup-benefits {
    grid-template-columns: 1fr;
  }

  .signup-faq-cta {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .signup-landing {
    margin-top: 12px;
  }

  .signup-ad-shell {
    gap: 12px;
  }

  .signup-form-panel,
  .signup-ad-copy,
  .signup-section {
    padding: 16px;
    border-radius: 18px;
  }

  .signup-form-panel .signup-card-head {
    display: grid;
    gap: 10px;
  }

  .signup-form-panel .signup-card-head .button,
  .signup-form-panel .signup-card-head .signup-login-link {
    width: 100%;
    justify-content: center;
  }

  .signup-form-panel .signup-form {
    grid-template-columns: 1fr;
  }

  .signup-form-panel .phone-input-group {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .signup-ad-copy h1 {
    font-size: 30px;
  }

  .signup-feature-card,
  .signup-plan-card {
    border-radius: 16px;
  }
}

/* v2.8.0 access control polish. */
.access-actions,
.access-edit-form {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.access-edit-form {
  margin: 0;
}

.access-edit-form select {
  width: auto;
  min-width: 132px;
  min-height: 34px;
  padding: 6px 28px 6px 10px;
  border-radius: 11px;
  font-size: 12px;
}

.roles-access-table td:last-child,
.roles-access-table th:last-child {
  min-width: 430px;
}

@media (max-width: 900px) {
  .signup-shell {
    gap: 14px;
    margin-top: 18px;
  }
  .signup-intro,
  .signup-card {
    padding: 18px;
  }
  .signup-intro {
    min-height: auto;
  }
  .roles-access-table td:last-child,
  .roles-access-table th:last-child {
    min-width: 390px;
  }
  .access-edit-form select {
    min-width: 120px;
  }
}

/* v2.9.59 signup conversion polish. */
.signup-ad-copy {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: stretch;
  gap: 16px;
}

.signup-conversion-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(240,253,250,.84)),
    #fff;
  box-shadow: 0 16px 38px rgba(15,23,42,.06);
}

.signup-conversion-card div > span {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #0f766e;
  background: rgba(15,118,110,.1);
}

.signup-conversion-card svg {
  width: 18px;
  height: 18px;
}

.signup-conversion-card strong {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.22;
}

.signup-conversion-card p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.signup-conversion-card ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  counter-reset: signupSteps;
}

.signup-conversion-card li {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(217,226,236,.9);
  border-radius: 12px;
  background: rgba(255,255,255,.74);
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  counter-increment: signupSteps;
}

.signup-conversion-card li::before {
  content: counter(signupSteps);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-size: 11px;
}

.signup-plan-offer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15,118,110,.1), rgba(29,78,216,.1));
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
}

.signup-plan-offer svg {
  width: 16px;
  height: 16px;
}

.signup-form-panel {
  align-self: start;
}

.signup-form-panel .signup-form {
  gap: 6px 10px !important;
  align-items: start;
}

.signup-form-panel .signup-form label {
  gap: 3px !important;
}

.signup-form-panel .signup-form input,
.signup-form-panel .signup-form select {
  min-height: 38px !important;
  padding: 7px 10px !important;
}

.signup-form-panel .phone-prefix,
.signup-form-panel .phone-input-group input {
  min-height: 38px !important;
}

.signup-form-panel .phone-label small,
.signup-form-panel .signup-submit .small {
  font-size: 11px;
  line-height: 1.28;
}

.signup-form-panel .password-strength {
  margin-top: 4px;
  padding: 10px;
}

.signup-form-panel .signup-submit .button {
  min-height: 42px;
}

@media (max-width: 980px) {
  .signup-conversion-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .signup-form-panel .signup-form {
    gap: 7px !important;
  }

  .signup-form-panel .phone-input-group {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .signup-conversion-card {
    padding: 14px;
  }

  .signup-conversion-card strong {
    font-size: 17px;
  }
}

/* v2.9.60 client gallery and document image collection. */
.client-gallery-panel {
  overflow: hidden;
}

.client-gallery-upload {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(170px, .6fr) minmax(220px, .8fr);
  gap: 10px;
  align-items: end;
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(217,226,236,.9);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(240,253,250,.72), rgba(255,255,255,.96) 46%),
    #fff;
}

.client-gallery-upload label {
  display: grid;
  gap: 5px;
  color: #536171;
  font-size: 12px;
  font-weight: 850;
}

.client-gallery-upload input,
.client-gallery-upload select,
.client-gallery-upload textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.client-gallery-upload small {
  color: var(--muted);
  font-size: 11px;
}

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

.client-gallery-card {
  display: grid;
  grid-template-rows: 180px auto auto;
  min-width: 0;
  border: 1px solid rgba(217,226,236,.92);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 32px rgba(15,23,42,.06);
}

.client-gallery-card > a {
  display: grid;
  min-height: 180px;
  background: #f8fafc;
}

.client-gallery-card img {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
}

.client-gallery-card .protected-file-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #0f766e;
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(15,118,110,.18);
  font-size: 11px;
  font-weight: 900;
}

.client-gallery-card .protected-file-badge svg {
  width: 14px;
  height: 14px;
}

.client-gallery-card.file-kind-pdf > a {
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.16), transparent 32%),
    linear-gradient(135deg, #f8fafc, #ffffff);
}

.client-gallery-file-preview {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  min-height: 142px;
  border: 1px dashed rgba(15,118,110,.34);
  border-radius: 16px;
  color: #0f766e;
  text-align: center;
}

.client-gallery-file-preview svg {
  width: 34px;
  height: 34px;
}

.client-gallery-file-preview strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e6fffb;
  color: #0f766e;
  font-size: 12px;
  letter-spacing: .08em;
}

.client-gallery-file-preview span {
  max-width: 100%;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-gallery-card > div {
  padding: 12px;
}

.client-gallery-card strong,
.client-gallery-card span,
.client-gallery-card small,
.client-gallery-card em {
  display: block;
}

.client-gallery-card strong {
  color: var(--ink);
  font-size: 14px;
}

.client-gallery-card span {
  margin-top: 3px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.client-gallery-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.client-gallery-card p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.client-gallery-card em {
  width: fit-content;
  margin-top: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.client-gallery-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 12px;
}

.client-gallery-actions form {
  margin: 0;
}

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

@media (max-width: 640px) {
  .client-gallery-upload,
  .client-gallery-grid {
    grid-template-columns: 1fr;
  }

  .client-gallery-card {
    grid-template-rows: 210px auto auto;
  }

  .client-gallery-card img {
    height: 210px;
  }

  .client-gallery-card > a {
    min-height: 210px;
  }

  .client-gallery-actions .action-button {
    flex: 1;
    justify-content: center;
  }
}

/* v2.8.9 enterprise polish: compact portals, reports, time clock, and product storefront. */
.page-head h1,
.portal-hero h1,
.client-portal-hero h1,
.client-profile-hero h1,
.staff-profile-hero h1,
.sales-hero h2,
.records-head h2,
.panel-title-row h2,
.panel > h2,
.booking-hero h1 {
  font-size: clamp(20px, 2.4vw, 26px) !important;
  line-height: 1.12;
  letter-spacing: 0;
}

.client-portal-hero,
.portal-hero,
.client-profile-hero {
  padding: 16px 18px !important;
  border-radius: 18px;
}

.client-portal-hero p,
.portal-hero p,
.client-profile-hero p,
.panel .muted,
.records-head .muted {
  font-size: 13px;
  line-height: 1.45;
}

.metric-grid.compact-metrics .metric,
.client-portal .metric,
.portal-grid article {
  min-height: auto;
  padding: 14px 16px;
}

.metric-grid.compact-metrics .metric strong,
.client-portal .metric strong,
.portal-grid article strong {
  font-size: 24px;
  line-height: 1.05;
}

.compact-filters {
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.compact-filters label {
  padding: 9px 10px !important;
  border-radius: 13px !important;
}

.time-clock-layout {
  align-items: start;
}

.campaign-segment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.campaign-segment-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  display: grid;
  gap: 8px;
}

.campaign-segment-grid strong {
  font-size: 26px;
  line-height: 1;
}

.campaign-segment-grid small {
  color: var(--muted);
  font-weight: 750;
}

.billing-cancel-card {
  border-color: rgba(220, 38, 38, .22);
  background: linear-gradient(135deg, rgba(254, 242, 242, .72), #fff);
}

.button.danger,
button.button.danger,
a.button.danger {
  background: #fff1f2;
  color: #b91c1c;
  border: 1px solid #fecdd3;
  box-shadow: none;
}

.button.danger:hover,
button.button.danger:hover,
a.button.danger:hover {
  background: #fee2e2;
  transform: translateY(-1px);
}

.product-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.product-image-grid figure {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.product-image-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}

.product-image-grid figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.form-page-card label.is-required,
.product-category-manager label.is-required {
  position: relative;
}

.form-page-card label.is-required::after,
.product-category-manager label.is-required::after {
  content: "Required";
  justify-self: start;
  display: inline-flex;
  width: max-content;
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 118, 110, .1);
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
}

.product-category-manager {
  display: grid;
  gap: 16px;
}

.product-category-form {
  align-items: end;
}

.product-category-list {
  display: grid;
  gap: 10px;
}

.product-category-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(219, 228, 235, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}

.product-category-list strong,
.product-category-list small {
  display: block;
}

.product-category-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  margin-top: 3px;
}

.product-store {
  max-width: 1280px;
  margin: 0 auto;
}

.product-store-hero {
  padding: 16px 18px !important;
  margin-bottom: 12px;
}

.product-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.product-store-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
  overflow: hidden;
  display: grid;
}

.product-store-card > img,
.product-store-placeholder,
.product-image-carousel {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(37,99,235,.08));
  display: grid;
  place-items: center;
  color: var(--brand);
}

.product-image-carousel {
  position: relative;
  overflow: hidden;
}

.product-image-track,
.product-image-track img {
  width: 100%;
  height: 100%;
}

.product-image-track img {
  display: none;
  object-fit: cover;
}

.product-image-track img.active {
  display: block;
}

.product-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  min-height: 34px;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
  cursor: pointer;
}

.product-carousel-nav.prev { left: 10px; }
.product-carousel-nav.next { right: 10px; }

.product-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .32);
  backdrop-filter: blur(8px);
}

.product-carousel-dots button {
  width: 8px;
  min-height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  padding: 0;
  cursor: pointer;
}

.product-carousel-dots button.active {
  width: 18px;
  background: #fff;
}

.product-store-card > div,
.product-buy-form,
.product-cart-controls {
  padding: 14px;
}

.product-store-card h2 {
  margin: 2px 0 5px;
  font-size: 18px;
}

.product-store-card strong {
  font-size: 20px;
}

.product-buy-form,
.product-cart-controls {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.product-buy-form label,
.product-cart-controls label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
}

.product-buy-form input,
.product-cart-controls input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  font: inherit;
}

.product-store-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  align-items: start;
  gap: 14px;
}

.product-cart-controls {
  grid-template-columns: minmax(92px, 1fr) auto;
  align-items: end;
}

.product-cart-panel {
  position: sticky;
  top: 96px;
  z-index: 20;
  border-color: rgba(15, 118, 110, .22);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

.product-cart-panel .panel-title-row {
  align-items: flex-start;
}

.product-cart-panel .form-grid {
  grid-template-columns: 1fr;
}

.product-cart-panel .form-actions,
.product-cart-panel .button {
  width: 100%;
}

.cart-total-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(240, 253, 250, .82);
  color: var(--brand);
  font-weight: 900;
}

.cart-total-pill span {
  color: var(--muted);
  font-size: 12px;
}

.product-store-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
}

.product-category-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.product-category-chip {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}

.product-category-chip svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.product-category-chip small {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 118, 110, .1);
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
}

.product-category-chip.active {
  background: linear-gradient(135deg, var(--brand), var(--blue));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .2);
}

.product-category-chip.active svg,
.product-category-chip.active small {
  color: #fff;
}

.product-category-chip.active small {
  background: rgba(255, 255, 255, .18);
}

.product-cart-link {
  white-space: nowrap;
}

.product-cart-link strong {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 12px;
}

.product-store-cart-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 14px;
  align-items: start;
}

.product-cart-review {
  min-width: 0;
}

.product-cart-list {
  display: grid;
  gap: 10px;
}

.product-cart-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 92px auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
}

.product-cart-line > img,
.product-cart-line > div:first-child {
  width: 76px;
  aspect-ratio: 1;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(37,99,235,.08));
  display: grid;
  place-items: center;
  color: var(--brand);
}

.product-cart-line h3 {
  margin: 0 0 3px;
  font-size: 15px;
  line-height: 1.2;
}

.product-cart-line span,
.product-cart-line label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.product-cart-line label {
  display: grid;
  gap: 4px;
}

.product-cart-line input {
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  font: inherit;
}

.product-cart-line > strong {
  font-size: 15px;
  white-space: nowrap;
}

.product-cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 6px;
}

.product-checkout-panel {
  position: sticky;
  top: 96px;
}

@media (max-width: 1000px) {
  .compact-filters,
  .campaign-segment-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-store-cart {
    grid-template-columns: 1fr;
  }

  .product-cart-panel {
    position: static;
    order: -1;
  }

  .product-store-toolbar,
  .product-store-cart-page {
    grid-template-columns: 1fr;
  }

  .product-cart-link {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .page-head h1,
  .portal-hero h1,
  .client-portal-hero h1,
  .client-profile-hero h1,
  .staff-profile-hero h1,
  .sales-hero h2,
  .records-head h2,
  .panel-title-row h2,
  .panel > h2,
  .booking-hero h1 {
    font-size: 20px !important;
  }

  .compact-filters,
  .campaign-segment-grid,
  .product-store-grid {
    grid-template-columns: 1fr;
  }

  .product-store-card > div,
  .product-buy-form,
  .product-cart-controls {
    padding: 12px;
  }

  .product-cart-panel .panel-title-row,
  .product-cart-panel .form-grid {
    gap: 10px;
  }

  .product-cart-panel {
    margin-bottom: 2px;
  }

  .product-store-toolbar {
    gap: 8px;
  }

  .product-category-scroll {
    padding-bottom: 6px;
  }

  .product-cart-line {
    grid-template-columns: 56px minmax(0, 1fr) 72px;
    gap: 9px;
  }

  .product-cart-line > img,
  .product-cart-line > div:first-child {
    width: 56px;
  }

  .product-cart-line > strong,
  .product-cart-line .action-button {
    grid-column: 2 / 4;
    justify-self: stretch;
  }

  .product-cart-actions {
    justify-content: stretch;
  }

  .product-cart-actions .button {
    flex: 1 1 160px;
  }
}

/* v2.9.0 visible polish pass: client portal scale, stronger reports, and product command panels. */
body {
  font-size: 13.5px;
}

h1,
.page-head h1,
.compact-head h1,
.client-portal-hero h1,
.client-profile-hero h1,
.portal-hero h1,
.doc-hero h2,
.records-head h2,
.sales-hero h2,
.panel-title-row h2,
.form-page-card h1,
.form-page-card h2 {
  font-size: clamp(19px, 2.1vw, 24px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.panel h2,
.workspace-card h2,
.form-template-card h3,
.template-tile h3,
.product-store-card h2 {
  font-size: 17px !important;
  line-height: 1.2 !important;
}

.client-portal-hero,
.client-profile-hero,
.workspace-card,
.account-choice-card,
.portal-hero {
  padding: 14px 16px !important;
}

.client-portal-hero .button,
.client-profile-actions .button,
.workspace-card .button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
}

.client-profile-hero .contact-profile-head {
  gap: 12px;
}

.client-profile-hero .staff-avatar.large,
.client-profile-hero .contact-profile-head img {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.client-profile-hero + .metric-grid .metric,
.workspace-picker-grid .workspace-card,
.account-choice-grid .workspace-card {
  min-height: auto;
  padding: 13px 14px !important;
}

.client-profile-hero + .metric-grid .metric strong {
  font-size: 22px !important;
}

.contact-detail-grid dt,
.contact-detail-grid dd,
.client-portal-hero p,
.client-profile-hero p,
.workspace-card p,
.panel p,
.panel li,
.table-panel td,
.table-panel th {
  font-size: 13px;
}

.product-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 12px;
  margin-bottom: 14px;
}

.product-store-share,
.product-tax-panel,
.time-clock-insights,
.campaign-action-center {
  background: linear-gradient(135deg, #fff, rgba(240,253,250,.78));
}

.copy-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

.copy-url-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 800;
  color: var(--brand);
  background: #fff;
}

.product-tax-panel .form-grid.single {
  gap: 9px;
}

.invoice-filter-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.invoice-filter-grid {
  grid-template-columns: minmax(260px, 1.4fr) minmax(160px, .7fr) minmax(150px, .55fr) minmax(150px, .55fr) auto;
  align-items: end;
}

.invoice-filter-grid .form-actions {
  align-items: end;
  margin: 0;
}

.invoice-filter-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoices-table-panel table {
  min-width: 1080px;
}

.invoice-share-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(219, 228, 235, .9);
  border-radius: 14px;
  background: rgba(248, 251, 252, .92);
}

.invoice-share-box > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.invoice-share-box > span svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
}

.invoice-share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.invoice-share-row input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-share-row .button {
  min-height: 42px;
  padding: 9px 12px;
  white-space: nowrap;
}

.installment-pay-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 184, 166, .26);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240, 253, 250, .9), rgba(239, 246, 255, .88));
  display: grid;
  gap: 12px;
}

.installment-pay-card strong,
.installment-pay-card p,
.installment-pay-card span {
  display: block;
}

.installment-pay-card strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

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

.installment-kicker {
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.installment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.installment-badges span {
  width: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(203, 213, 225, .95);
  color: #334155;
  font-size: 11px;
  font-weight: 900;
}

.invoice-payment-history {
  grid-column: 1;
}

.invoice-payment-history h2 {
  font-size: 18px;
}

.muted-cancel-card {
  border-color: var(--line);
  background: #fff;
}

.muted-cancel-card .button[disabled] {
  opacity: .75;
  cursor: not-allowed;
}

.doc-hero {
  padding: 18px !important;
}

.doc-layout {
  align-items: start;
}

.doc-guide-card ol,
.doc-steps ol {
  display: grid;
  gap: 8px;
}

.doc-guide-card li,
.doc-steps li {
  padding: 9px 10px;
  border: 1px solid rgba(219, 228, 235, .82);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}

@media (max-width: 900px) {
  .invoice-filter-grid,
  .invoice-filter-summary,
  .payment-routing-panel,
  .product-command-grid,
  .copy-url-row,
  .invoice-share-row {
    grid-template-columns: 1fr;
  }

  .product-category-list article {
    grid-template-columns: 1fr;
  }

  .client-profile-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

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

.doc-quick-grid .panel {
  display: grid;
  gap: 10px;
  align-content: start;
}

.doc-quick-grid ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.doc-quick-grid li {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .subscription-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .billing-control-grid,
  .connect-management-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .subscription-detail-grid,
  .billing-control-grid {
    grid-template-columns: 1fr;
  }
  .billing-plan-actions {
    grid-template-columns: 1fr;
  }
  .subscription-detail-grid strong {
    font-size: 19px;
  }
  .connect-change-panel {
    grid-template-columns: 1fr;
  }
  .connect-change-panel dl div {
    display: grid;
  }
  .connect-change-panel dd {
    text-align: left;
  }
}

@media (max-width: 900px) {
  .doc-quick-grid {
    grid-template-columns: 1fr;
  }
}

.client-action-grid,
.inline-form-action,
.contact-search-form .form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.client-action-grid .button,
.inline-form-action .button {
  width: auto;
}

.inline-form-action select {
  min-width: min(340px, 100%);
}

.client-action-panel .client-action-grid {
  display: grid !important;
  grid-template-columns: auto auto minmax(360px, 520px);
  align-items: center !important;
  justify-content: start !important;
  gap: 10px !important;
}

.client-action-panel .inline-form-action {
  display: grid !important;
  grid-template-columns: minmax(260px, 360px) auto;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.client-action-panel .inline-form-action select {
  min-width: 0 !important;
  width: 100% !important;
}

.client-action-panel .inline-form-action .button,
.client-action-panel .client-action-grid > .button {
  align-self: center !important;
  white-space: nowrap !important;
}

.client-payment-panel .saved-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.saved-card-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(20, 184, 166, .08), rgba(37, 99, 235, .06));
}

.saved-card-item strong,
.saved-card-item small {
  display: block;
  min-width: 0;
}

.saved-card-item small {
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}

.saved-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.saved-card-actions form {
  margin: 0;
}

.client-card-charge-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}

.compact-title-row {
  margin-bottom: 12px;
}

.stripe-card-field {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}

.stripe-card-field .field-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
}

.stripe-card-element {
  width: 100%;
  min-height: 52px;
  display: block;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.stripe-card-element.StripeElement,
.stripe-card-element iframe {
  width: 100% !important;
}

.stripe-card-element.StripeElement {
  min-height: 52px;
}

.stripe-card-element-loading {
  position: relative;
}

.stripe-card-element-loading::before {
  content: "Loading secure card field...";
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.stripe-card-element-ready::before {
  content: none;
}

.stripe-card-element.StripeElement--focus {
  border-color: rgba(15, 118, 110, .52);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .11), inset 0 1px 0 rgba(255,255,255,.9);
}

.stripe-card-element.StripeElement--invalid,
.stripe-card-element-error {
  border-color: rgba(220, 38, 38, .58);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .08), inset 0 1px 0 rgba(255,255,255,.9);
}

.charge-client-card .checkbox-line,
.saved-card-setup-card .checkbox-line {
  align-items: flex-start;
}

@media (max-width: 900px) {
  .client-action-panel .client-action-grid,
  .client-action-panel .inline-form-action {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .client-action-panel .client-action-grid > .button,
  .client-action-panel .inline-form-action .button {
    width: 100% !important;
  }

  .saved-card-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .saved-card-actions {
    grid-column: 1 / -1;
    justify-self: start;
    justify-content: flex-start;
  }
}

.contact-filter-panel {
  margin-top: 16px;
  margin-bottom: 16px;
}

.portal-search-row {
  justify-content: flex-start;
}

.portal-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(240,253,250,.88), #fff);
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.portal-context-pill svg {
  width: 16px;
  height: 16px;
}

/* v2.9.91 trial countdown banner. */
.trial-banner {
  width: min(100%, 1780px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(217, 226, 236, .92);
  background:
    radial-gradient(circle at 10% 0%, rgba(20, 184, 166, .14), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .9));
}

.trial-banner > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.trial-banner strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.trial-banner small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(15, 118, 110, .2);
  border-radius: 999px;
  background: #fff;
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.trial-badge svg {
  width: 15px;
  height: 15px;
}

.disabled-button,
.disabled-button:hover {
  cursor: default;
  transform: none;
  box-shadow: none;
  opacity: .82;
}

@media (max-width: 760px) {
  .trial-banner {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 16px;
  }

  .trial-banner .button {
    width: 100%;
    justify-content: center;
  }
}

/* v2.9.63 signup trust and demo video section. */
.signup-trust-section {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 24px;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto 24px;
  padding: 28px;
  border: 1px solid rgba(217,226,236,.9);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 8%, rgba(20,184,166,.16), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(37,99,235,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
  box-shadow: 0 28px 80px rgba(15,23,42,.09);
}

.signup-trust-copy {
  display: grid;
  gap: 16px;
}

.signup-trust-copy h1 {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.04;
  letter-spacing: 0;
}

.signup-trust-copy p {
  max-width: 720px;
  margin: 0;
  color: #536171;
  font-size: 17px;
  line-height: 1.65;
}

.signup-trust-actions,
.signup-trust-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.signup-trust-actions .button {
  width: auto;
}

.signup-trust-stats span {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid rgba(217,226,236,.9);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
}

.signup-trust-stats strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.signup-trust-stats small {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

/* v2.9.131 homepage and signup conversion redesign. */
.home-conversion-hero {
  min-height: 520px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(217,226,236,.88);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 16%, rgba(20,184,166,.18), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(37,99,235,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.76) 52%, rgba(240,253,250,.88));
  box-shadow: 0 28px 80px rgba(15,23,42,.08);
}

.home-conversion-hero h1 {
  max-width: 840px;
  font-size: clamp(34px, 4vw, 58px);
}

.home-conversion-hero p {
  max-width: 800px;
  font-size: 17px;
  line-height: 1.68;
}

.home-proof-preview div {
  min-height: 128px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.78)),
    #fff;
}

.home-proof-preview strong {
  font-size: 28px;
  overflow-wrap: anywhere;
}

.home-industry-band {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(217,226,236,.88);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
}

.home-industry-band h2 {
  margin: 4px 0 0;
  font-size: clamp(22px, 2vw, 30px);
}

.home-feature-band {
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(240,253,250,.78), rgba(255,255,255,.94) 42%),
    #fff;
}

.kv-payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.kv-payment-badges span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
}

.kv-payment-badges b {
  letter-spacing: 0;
}

.kv-payment-badges svg {
  width: 16px;
  height: 16px;
  color: #0f766e;
}

.kv-pay-stripe {
  border-color: rgba(99,91,255,.22) !important;
  background: linear-gradient(135deg, rgba(99,91,255,.1), rgba(255,255,255,.94)) !important;
}

.kv-pay-stripe svg,
.kv-pay-stripe b {
  color: #635bff;
}

.kv-pay-square {
  border-color: rgba(15,118,110,.22) !important;
  background: linear-gradient(135deg, rgba(236,253,245,.96), rgba(255,255,255,.94)) !important;
}

.kv-pay-klarna {
  border-color: rgba(255,179,199,.72) !important;
  background: linear-gradient(135deg, rgba(255,179,199,.42), rgba(255,255,255,.94)) !important;
}

.kv-pay-klarna svg,
.kv-pay-klarna b {
  color: #111827;
}

.kv-pay-afterpay {
  border-color: rgba(20,184,166,.28) !important;
  background: linear-gradient(135deg, rgba(167,243,208,.5), rgba(255,255,255,.94)) !important;
}

.kv-logo-strip {
  width: 100%;
  margin: 18px auto 20px;
  padding: 18px 0;
  border: 1px solid rgba(217,226,236,.86);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.kv-logo-title {
  margin-bottom: 12px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kv-logo-slider {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.kv-logo-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: kvLogoSlide 22s linear infinite;
}

.kv-logo-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 34px;
  padding-inline: 17px;
}

.kv-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  min-height: 68px;
  padding: 10px 16px;
  border: 1px solid rgba(217,226,236,.58);
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 24px rgba(15,23,42,.035);
}

.kv-logo-card img {
  width: auto;
  max-width: 166px;
  height: 58px;
  object-fit: contain;
  filter: saturate(1.02);
}

.kv-logo-fallback {
  display: grid;
  place-items: center;
  gap: 2px;
  color: #0f172a;
  font-family: inherit;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}

.kv-logo-fallback b {
  color: #0f766e;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: .01em;
}

.kv-logo-fallback small {
  color: #b45309;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@keyframes kvLogoSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.signup-trust-no-video {
  grid-template-columns: minmax(0, .95fr) minmax(360px, .7fr);
  margin-bottom: 16px;
}

.signup-trust-simple {
  display: block;
  padding: 28px;
}

.signup-trust-simple .signup-trust-copy {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.signup-trust-simple .signup-trust-copy p {
  margin-left: auto;
  margin-right: auto;
}

.signup-trust-simple .signup-proof-row,
.signup-trust-simple .signup-trust-actions,
.signup-trust-simple .kv-payment-badges {
  justify-content: center;
}

.signup-funnel-shell {
  grid-template-columns: minmax(310px, .78fr) minmax(580px, 1.22fr);
}

.signup-funnel-copy {
  padding: 24px;
}

.signup-hero-clean {
  justify-content: center;
}

.signup-hero-clean .signup-trust-actions {
  margin-top: 20px;
}

.signup-hero-clean .signup-proof-row {
  margin-top: 18px;
}

.signup-form-priority {
  padding: 20px 24px;
}

.signup-form-priority .signup-card-head h2 {
  font-size: 26px;
}

.signup-form-priority .signup-form {
  gap: 8px 10px;
}

.signup-form-priority .signup-form label {
  padding: 9px 11px;
}

.signup-form-priority .signup-form input,
.signup-form-priority .signup-form select {
  min-height: 38px;
}

@media (max-width: 1100px) {
  .signup-trust-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .home-conversion-hero {
    min-height: auto;
    padding: 18px;
    border-radius: 22px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-conversion-hero h1 {
    font-size: 29px;
    line-height: 1.08;
  }

  .home-conversion-hero p {
    font-size: 14px;
    line-height: 1.55;
  }

  .home-conversion-hero .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .home-proof-preview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .home-proof-preview div {
    min-height: 92px;
    padding: 11px;
    border-radius: 16px;
  }

  .home-proof-preview span,
  .home-proof-preview small {
    font-size: 10px;
    line-height: 1.25;
  }

  .home-proof-preview strong {
    margin: 7px 0 4px;
    font-size: 20px;
    line-height: 1.05;
  }

  .home-band,
  .home-section,
  .home-industry-band,
  .home-feature-band {
    margin-top: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .home-industry-band h2,
  .section-title h2 {
    font-size: 21px;
  }

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

  .industry-row a {
    min-height: 42px;
    padding: 10px 9px;
    font-size: 12px;
  }

  .signup-trust-section {
    padding: 14px;
    border-radius: 20px;
    margin-bottom: 10px;
    gap: 12px;
  }

  .signup-trust-copy h1 {
    font-size: 25px;
    line-height: 1.08;
  }

  .signup-trust-copy p {
    font-size: 13px;
    line-height: 1.5;
  }

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

  .signup-trust-actions .button {
    width: 100%;
    min-height: 42px;
    padding-inline: 8px;
    font-size: 12px;
  }

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

  .signup-trust-stats span {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .signup-trust-stats span:first-child {
    grid-column: 1 / -1;
  }

  .signup-trust-stats strong {
    font-size: 20px;
  }

  .signup-trust-stats small {
    font-size: 10px;
  }

  .signup-trust-no-video {
    gap: 10px;
  }

  .kv-logo-strip {
    margin: 10px 0 12px;
    padding: 12px 0;
    border-radius: 18px;
  }

  .kv-logo-title {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: .05em;
  }

  .kv-logo-group {
    gap: 20px;
    padding-inline: 10px;
  }

  .kv-logo-card {
    min-width: 150px;
    min-height: 62px;
    padding: 9px 12px;
    border-radius: 18px;
  }

  .kv-logo-card img {
    max-width: 138px;
    height: 50px;
  }

  .kv-logo-fallback b {
    font-size: 16px;
  }

  .kv-logo-fallback small {
    font-size: 8px;
  }

  .kv-payment-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }

  .kv-payment-badges span {
    min-height: 40px;
    padding: 8px;
    border-radius: 14px;
    font-size: 12px;
  }

  .kv-payment-badges svg {
    width: 15px;
    height: 15px;
  }

  .signup-funnel-shell {
    margin-top: 10px;
    gap: 12px;
  }

  .signup-form-priority {
    padding: 14px;
    border-radius: 18px;
  }

  .signup-form-priority .signup-card-head {
    gap: 10px;
    margin-bottom: 8px;
  }

  .signup-form-priority .signup-card-head h2 {
    font-size: 22px;
  }

  .signup-form-priority .signup-card-head p {
    font-size: 12px;
  }

  .signup-form-priority .signup-form {
    gap: 7px;
  }

  .signup-form-priority .signup-form label {
    padding: 8px 9px;
    border-radius: 12px;
  }

  .signup-form-priority .signup-form input,
  .signup-form-priority .signup-form select {
    min-height: 36px;
    font-size: 13px;
  }

  .signup-funnel-copy {
    padding: 16px;
    border-radius: 18px;
  }

  .signup-funnel-copy h1 {
    font-size: 23px;
  }

  .signup-conversion-card {
    padding: 14px;
    border-radius: 16px;
  }

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

  .signup-feature-card {
    min-height: 136px;
    padding: 12px;
    border-radius: 15px;
  }

  .signup-feature-card h3 {
    margin-top: 10px;
    font-size: 13px;
  }

  .signup-feature-card p {
    font-size: 11px;
  }

  .signup-section {
    margin-top: 12px;
    padding: 16px;
    border-radius: 18px;
  }

  .signup-section-head h2 {
    font-size: 21px;
  }
}

@media (max-width: 720px) {
  .signature-meta-grid {
    grid-template-columns: 1fr;
  }

  .client-action-grid,
  .inline-form-action {
    align-items: stretch;
    flex-direction: column;
  }

  .client-action-grid .button,
  .inline-form-action .button,
  .inline-form-action select {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .booking-public .wizard-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 8px;
  }

  .booking-public .wizard-actions .button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    min-height: 42px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  .booking-public .wizard-actions .confirm-button {
    flex-grow: 1.15 !important;
  }

  .booking-public .wizard-actions .button svg {
    width: 14px;
    height: 14px;
  }
}

.inbox-hero .billing-hero-actions span,
.inbox-connect-hero .billing-hero-actions span {
  white-space: nowrap;
}

.inbox-modern-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
}

.inbox-hero-metrics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.inbox-hero-metrics span {
  min-width: 112px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  display: grid;
  gap: 2px;
  box-shadow: var(--shadow-sm);
}

.inbox-hero-metrics svg {
  color: var(--primary);
}

.inbox-hero-metrics strong {
  font-size: 22px;
  line-height: 1;
}

.inbox-hero-metrics small {
  color: var(--muted);
  font-weight: 800;
}

.inbox-tabs {
  margin-bottom: 16px;
}

.inbox-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.45fr) minmax(240px, .72fr);
  gap: 16px;
  align-items: stretch;
}

.inbox-empty-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 20px;
  align-items: stretch;
  padding: clamp(22px, 4vw, 34px);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 4%, rgba(20,125,117,.12), transparent 30%),
    radial-gradient(circle at 95% 8%, rgba(37,99,235,.10), transparent 34%),
    linear-gradient(135deg, #fff, #f8fbff);
}

.inbox-empty-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 330px;
}

.inbox-empty-copy h2 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
}

.inbox-empty-copy p {
  max-width: 660px;
}

.inbox-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.inbox-inline-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 14px;
  color: #92400e;
  background: #fffbeb;
  font-weight: 800;
}

.inbox-inline-note svg {
  flex: 0 0 auto;
}

.inbox-empty-steps {
  display: grid;
  gap: 12px;
}

.inbox-empty-steps article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-sm);
}

.inbox-empty-steps svg {
  grid-row: span 2;
  color: var(--primary);
}

.inbox-empty-steps strong {
  font-size: 15px;
}

.inbox-empty-steps span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.inbox-meta-notice {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 12px 0 16px;
  padding: 16px;
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb, #fff);
}

.inbox-meta-notice h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.inbox-list-panel,
.inbox-thread-panel,
.inbox-profile-panel {
  min-width: 0;
}

.inbox-messenger-layout .panel {
  padding: 18px;
}

.inbox-mini-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  margin-bottom: 12px;
}

.inbox-mini-search input {
  border: 0;
  outline: 0;
  padding: 0;
  min-height: 0;
  background: transparent;
  width: 100%;
  font-weight: 800;
}

.inbox-conversation {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,.80);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.inbox-conversation:hover {
  transform: translateY(-1px);
  border-color: rgba(20,125,117,.38);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.inbox-conversation + .inbox-conversation {
  margin-top: 10px;
}

.inbox-conversation.active {
  border-color: rgba(20,125,117,.55);
  background: linear-gradient(135deg, rgba(20,125,117,.12), rgba(37,99,235,.09));
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
}

.inbox-avatar {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: linear-gradient(135deg, rgba(20,125,117,.14), rgba(37,99,235,.10));
  border: 1px solid rgba(20,125,117,.15);
}

.inbox-avatar.large {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

.inbox-conversation-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.inbox-conversation-main strong,
.inbox-conversation-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-conversation-main small,
.inbox-conversation-meta,
.inbox-message span {
  color: var(--muted);
  font-size: 12px;
}

.inbox-conversation-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.inbox-conversation-meta em {
  font-style: normal;
  white-space: nowrap;
}

.inbox-conversation-meta b {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6f4;
  color: var(--primary);
  font-size: 11px;
}

.inbox-thread-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.inbox-thread-header h2 {
  margin: 0;
  font-size: 22px;
}

.inbox-thread {
  display: grid;
  gap: 12px;
  min-height: 360px;
  align-content: start;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(20,125,117,.06), transparent 28%),
    linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,.76));
  border: 1px solid rgba(226,232,240,.75);
}

.inbox-message {
  max-width: min(78%, 620px);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.inbox-message.outbound {
  justify-self: end;
  color: #fff;
  border-color: transparent;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg, #147d75, #255bd4);
}

.inbox-message.failed {
  color: var(--ink);
  border-color: rgba(220, 38, 38, 0.22);
  background: #fff7f7;
}

.inbox-message.outbound span {
  color: rgba(255,255,255,.78);
}

.inbox-message div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.inbox-message p {
  margin: 0;
  line-height: 1.48;
}

.inbox-message-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  background: #e9f8f2;
  color: #047857;
}

.inbox-message-status.failed {
  background: #fee2e2;
  color: #b91c1c;
}

.inbox-reply-box {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(236, 253, 245, .72), rgba(255, 255, 255, .96));
  display: grid;
  gap: 10px;
}

.inbox-reply-box label {
  display: grid;
  gap: 7px;
  font-weight: 800;
  color: var(--ink);
}

.inbox-reply-box textarea {
  min-height: 86px;
  resize: vertical;
}

.inbox-reply-box .button {
  justify-self: end;
  min-width: 150px;
}

.inbox-reply-box small {
  color: var(--muted);
  font-weight: 700;
}

.inbox-checklist {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.inbox-checklist span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.inbox-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.inbox-channel-card {
  display: grid;
  gap: 14px;
  align-content: start;
  border-top: 4px solid rgba(20,125,117,.55);
}

.inbox-channel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inbox-channel-card h2 {
  margin: 0;
  font-size: 19px;
}

.inbox-channel-account {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248,250,252,.8);
}

.inbox-channel-account span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.inbox-channel-account strong {
  overflow-wrap: anywhere;
}

.meta-load-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  border-color: rgba(20,125,117,.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(20,125,117,.10), transparent 32%),
    #fff;
}

.meta-load-card.disabled {
  opacity: .92;
}

.meta-load-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--primary);
  background: rgba(20,125,117,.12);
}

.meta-load-notes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.meta-load-notes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.meta-webhook-card {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 16px;
}

.meta-webhook-values {
  display: grid;
  gap: 10px;
}

.meta-webhook-values input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.simple-connect-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 22px;
}

.simple-connect-hero h2,
.simple-inbox-empty h2 {
  font-size: clamp(24px, 2.4vw, 32px);
}

.simple-channel-card {
  gap: 12px;
  border-top-width: 3px;
}

.simple-channel-card .button {
  width: 100%;
}

.simple-webhook-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 18px;
}

.simple-webhook-card h2,
.simple-sync-card h2 {
  font-size: 20px;
}

.simple-sync-card {
  padding: 18px;
}

@media (max-width: 1180px) {
  .inbox-modern-hero {
    grid-template-columns: 1fr;
  }

  .inbox-hero-metrics {
    justify-content: stretch;
  }

  .inbox-hero-metrics span {
    flex: 1 1 140px;
  }

  .inbox-layout,
  .inbox-empty-dashboard,
  .inbox-channel-grid,
  .meta-load-card,
  .meta-webhook-card {
    grid-template-columns: 1fr;
  }

  .inbox-message {
    max-width: 100%;
  }

  .meta-load-card .button,
  .meta-load-card form {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .inbox-empty-dashboard {
    padding: 18px;
  }

  .inbox-empty-copy {
    min-height: auto;
  }

  .inbox-empty-actions .button {
    width: 100%;
  }

  .inbox-conversation {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .inbox-conversation-meta {
    grid-column: 2;
    justify-items: start;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .inbox-thread-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .inbox-thread-header .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .inbox-thread {
    min-height: 260px;
    padding: 10px;
  }

  .meta-load-notes {
    display: grid;
  }
}

/* v2.9.92 responsive design pass: desktop, tablet, mobile, and account menu polish. */
.account-menu.is-open .account-menu-panel {
  display: grid;
}

.button,
button.button,
a.button {
  font-size: 14px;
  font-weight: 850;
}

.icon-button {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.icon-button:hover,
.account-menu:hover {
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

.panel,
.records-shell,
.table-panel,
.dashboard-table-wrap,
.module-card,
.metric,
.plan,
.sales-hero,
.forms-hero,
.services-command,
.staff-command,
.preferences-hero,
.client-profile-hero,
.portal-hero {
  border-radius: 18px;
}

.page-head h1,
.portal-hero h1,
.home-hero h1,
.staff-profile-hero h1,
.client-profile-hero h1 {
  font-size: clamp(26px, 2.15vw, 34px);
}

.section-title h2,
.panel-title-row h2,
.sales-hero h2,
.records-head h2,
.module-card h3,
.panel h2 {
  letter-spacing: 0;
}

.form-grid,
.signup-form,
.profile-settings-grid,
.stepper-grid {
  gap: 12px;
}

.form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.form-page-card label,
.business-profile-card .form-grid > label {
  padding: 12px 14px;
  border-radius: 15px;
}

.table-panel th,
.table-panel td,
.records-table-wrap th,
.records-table-wrap td,
.report-table-wrap th,
.report-table-wrap td {
  font-size: 13px;
}

.table-panel th,
.records-table-wrap th,
.report-table-wrap th {
  font-size: 12px;
}

@media (min-width: 1281px) {
  .topbar {
    gap: 12px;
  }

  .nav {
    gap: 7px;
  }

  .nav a,
  .pill {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .view {
    padding-top: 26px;
  }

  .metric {
    min-height: 128px;
  }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 16px;
  }

  .brand {
    min-width: 190px;
  }

  .nav {
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a,
  .pill {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }

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

  .form-grid {
    gap: 11px;
  }
}

@media (max-width: 900px) {
  body {
    font-size: 14px;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 10px 12px;
  }

  .brand-mark,
  .user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .user-pill {
    min-height: 40px;
    padding: 4px 7px;
  }

  .account-menu-panel {
    top: calc(100% + 8px);
  }

  .account-menu:hover .account-menu-panel,
  .account-menu:focus-within .account-menu-panel {
    display: none;
  }

  .account-menu.is-open .account-menu-panel {
    display: grid;
  }

  .nav {
    top: 126px;
  }

  .search-location-row {
    gap: 8px;
  }

  .view {
    padding: 18px 12px 34px;
  }

  .page-head h1,
  .portal-hero h1,
  .home-hero h1,
  .staff-profile-hero h1,
  .client-profile-hero h1 {
    font-size: clamp(24px, 5.6vw, 30px);
  }

  .panel,
  .records-shell,
  .table-panel,
  .dashboard-table-wrap,
  .module-card,
  .metric,
  .plan,
  .sales-hero,
  .forms-hero,
  .services-command,
  .staff-command,
  .preferences-hero,
  .client-profile-hero,
  .portal-hero {
    border-radius: 16px;
  }

  .button,
  button.button,
  a.button {
    min-height: 39px;
    padding: 9px 12px;
    font-size: 13px;
  }

  .icon-button {
    width: 40px;
    height: 40px;
  }

  .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
  .form-page-card label,
  .business-profile-card .form-grid > label {
    padding: 11px 12px;
  }

  input,
  select,
  textarea,
  .searchable-select-button {
    min-height: 42px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .brand {
    gap: 9px;
  }

  .brand strong {
    font-size: 13px;
  }

  .global-search {
    min-height: 38px;
  }

  .location-switcher {
    min-width: 0;
  }

  .page-head,
  .records-head,
  .section-title,
  .panel-title-row {
    gap: 10px;
    margin-bottom: 12px;
  }

  .panel,
  .records-shell,
  .table-panel,
  .dashboard-table-wrap,
  .module-card,
  .metric,
  .plan,
  .sales-hero,
  .forms-hero,
  .services-command,
  .staff-command,
  .preferences-hero,
  .client-profile-hero,
  .portal-hero {
    padding: 14px;
  }

  .metric {
    min-height: 108px;
  }

  .metric strong {
    font-size: 28px;
  }

  .form-grid,
  .signup-form,
  .profile-settings-grid,
  .stepper-grid {
    gap: 10px;
  }

  .button,
  button.button,
  a.button {
    white-space: normal;
  }

  .wizard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wizard-actions .button {
    width: auto;
    min-width: 0;
  }

  .wizard-actions .confirm-button {
    grid-column: auto;
  }

  .account-menu-panel {
    position: fixed;
    top: 66px;
    right: 10px;
    width: min(274px, calc(100vw - 20px));
  }
}

/* Mobile app menu override. Keep this near EOF so old responsive rules cannot move it. */
@media (max-width: 1100px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  html body .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  html body .mobile-back-button {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  html body .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html body .menu-button {
    display: none !important;
  }

  html body .user-pill {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html body .search-location-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  html body .nav#mainNav {
    display: none !important;
    position: fixed !important;
    inset: auto 10px calc(88px + env(safe-area-inset-bottom, 0px)) 10px !important;
    width: auto !important;
    max-height: min(72dvh, 620px) !important;
    overflow: auto !important;
    padding: 14px !important;
    border: 1px solid rgba(203, 213, 225, .92) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .22) !important;
    z-index: 10040 !important;
    overscroll-behavior: contain !important;
  }

  html body .nav#mainNav.open,
  html body.mobile-menu-open .nav#mainNav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  html body .mobile-bottom-nav {
    display: grid !important;
    position: fixed !important;
    inset: auto 10px 10px 10px !important;
    width: auto !important;
    z-index: 10050 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body .workspace {
    padding-bottom: 98px !important;
  }
}

@media (max-width: 640px) {
  html body .nav#mainNav {
    inset: auto 8px calc(84px + env(safe-area-inset-bottom, 0px)) 8px !important;
    max-height: min(74dvh, 620px) !important;
  }

  html body .mobile-bottom-nav {
    inset: auto 8px 8px 8px !important;
  }
}

.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 1100px) {
  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: none;
    border: 0;
    background: rgba(15, 23, 42, .42);
  }

  .mobile-menu-backdrop.show {
    display: block;
  }

  html body .nav#mainNav.open::before,
  html body.mobile-menu-open .nav#mainNav::before {
    content: "Menu";
    justify-self: center;
    width: 100%;
    height: auto;
    margin: 0 0 8px;
    padding: 0 4px 10px;
    border-radius: 0;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    background: transparent;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    text-align: left;
  }

  html body .nav#mainNav.open .nav-group,
  html body.mobile-menu-open .nav#mainNav .nav-group {
    width: 100%;
    display: grid;
    gap: 4px;
  }

  html body .nav#mainNav.open .nav-group > a,
  html body.mobile-menu-open .nav#mainNav .nav-group > a {
    width: 100%;
    min-height: 50px;
    justify-content: flex-start;
    border-radius: 15px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, .92);
    color: #1f2937;
    font-weight: 900;
  }

  html body .nav#mainNav.open .nav-group > a.active,
  html body.mobile-menu-open .nav#mainNav .nav-group > a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #087f7b, #1d4ed8);
    border-color: transparent;
  }

  html body .nav#mainNav.open .mega-menu,
  html body.mobile-menu-open .nav#mainNav .mega-menu {
    position: static;
    min-width: 0;
    padding: 5px 0 9px 12px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  html body .nav#mainNav.open .mega-menu a,
  html body.mobile-menu-open .nav#mainNav .mega-menu a {
    min-height: 40px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
  }
}

/* v2.9.105 mobile form stability: prevent side-to-side form movement and use native selects on phones. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .shell,
  .content,
  .view,
  .page-shell,
  .workspace,
  .panel,
  .records-shell,
  .table-panel,
  .form-page-card,
  .business-profile-card,
  .signup-card,
  .signup-form-panel,
  .portal-card,
  .booking-panel,
  .modal,
  form {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .form-grid,
  .signup-form,
  .profile-settings-grid,
  .stepper-grid,
  .client-gallery-upload,
  .inline-form-action,
  .phone-input-group {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
    min-width: 0;
  }

  .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
  .business-profile-card .form-grid > label,
  .form-page-card label,
  .signup-form label,
  .signup-form-panel .signup-form label,
  .client-gallery-upload label,
  .inline-form-action {
    max-width: 100%;
    min-width: 0;
  }

  input,
  select,
  textarea,
  .searchable-select,
  .searchable-select-button,
  .phone-prefix,
  .phone-input-group input,
  .input-with-icon,
  .password-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  input,
  select,
  textarea,
  .searchable-select-button {
    font-size: 16px !important;
  }

  textarea {
    resize: vertical;
  }

  .phone-input-group {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 8px;
  }

  .phone-prefix {
    white-space: nowrap;
  }

  .searchable-select .searchable-native {
    position: static;
    inset: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .searchable-select .searchable-select-button,
  .searchable-select .searchable-select-panel {
    display: none !important;
  }

  .records-table-wrap,
  .table-responsive,
  .table-scroll,
  .dashboard-table-wrap,
  .report-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-panel,
  .records-table-wrap,
  .report-table-wrap {
    overflow: visible !important;
  }

  .table-panel table,
  .records-table-wrap table,
  .report-table-wrap table,
  .service-records .table-panel table,
  .invoices-table-panel table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .table-panel tbody,
  .records-table-wrap tbody,
  .report-table-wrap tbody {
    display: grid !important;
    gap: 12px;
  }

  .table-panel tr,
  .records-table-wrap tr,
  .report-table-wrap tr {
    display: block !important;
  }

  .table-panel td,
  .records-table-wrap td,
  .report-table-wrap td {
    display: grid !important;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
  }
}

/* v2.9.132 signup tablet/mobile ordering fix. */
@media (max-width: 1024px) {
  .signup-landing {
    width: min(100%, 720px);
    margin-top: 12px;
    padding-inline: 8px;
  }

  .signup-funnel-shell,
  .signup-ad-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  .signup-form-priority,
  .signup-form-panel {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .signup-funnel-copy,
  .signup-ad-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .signup-form-priority .signup-card-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .signup-form-priority .signup-card-head .button {
    width: 100%;
    justify-content: center;
  }

  .signup-form-priority .signup-form {
    grid-template-columns: 1fr !important;
  }

  .signup-form-priority .wide,
  .signup-form-priority .signup-submit,
  .signup-form-priority .terms-line {
    grid-column: 1 / -1;
  }

  .signup-form-priority .phone-input-group {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .signup-landing {
    padding-inline: 0;
  }

  .signup-form-priority .phone-input-group {
    grid-template-columns: 66px minmax(0, 1fr);
  }
}

/* Mobile form typography scale. */
@media (max-width: 760px) {
  input,
  select,
  textarea,
  .phone-prefix,
  .searchable-select-button,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .signup-form input,
  .signup-form select,
  .signup-form textarea,
  .signup-form-panel .signup-form input,
  .signup-form-panel .signup-form select,
  .signup-form-panel .signup-form textarea,
  .signup-form-priority .signup-form input,
  .signup-form-priority .signup-form select,
  .signup-form-priority .signup-form textarea,
  .form-page-card input,
  .form-page-card select,
  .form-page-card textarea,
  .booking-public input,
  .booking-public select,
  .booking-public textarea {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  input::placeholder,
  textarea::placeholder,
  .form-grid input::placeholder,
  .form-grid textarea::placeholder,
  .signup-form input::placeholder,
  .signup-form textarea::placeholder,
  .form-page-card input::placeholder,
  .form-page-card textarea::placeholder,
  .booking-public input::placeholder,
  .booking-public textarea::placeholder {
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #7b8797 !important;
  }

  select,
  .phone-prefix,
  .searchable-select-button {
    font-weight: 750 !important;
  }

  label,
  .form-grid label,
  .signup-form label,
  .form-page-card label {
    font-size: 13px !important;
  }

  .checkbox-line,
  .terms-line,
  .sms-consent-line {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}

/* v2.9.141 services archive safely when historical records exist. */
@media (max-width: 1024px) {
  .signup-funnel-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .signup-hero-clean,
  .signup-funnel-copy.signup-hero-clean,
  .signup-ad-copy.signup-hero-clean {
    order: 1 !important;
  }

  .signup-form-priority,
  .signup-form-panel.signup-form-priority {
    order: 2 !important;
  }
}

@media (max-width: 640px) {
  .signup-hero-clean {
    padding: 14px !important;
    gap: 10px;
    border-radius: 18px;
  }

  .signup-hero-clean .eyebrow {
    margin-bottom: 4px;
  }

  .signup-hero-clean h1 {
    margin: 4px 0 8px;
    font-size: 28px;
    line-height: 1.05;
  }

  .signup-hero-clean p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
  }

  .signup-hero-clean .signup-proof-row {
    margin-top: 10px;
    gap: 6px;
  }

  .signup-hero-clean .signup-proof-row span {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .signup-hero-clean .signup-trust-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .signup-hero-clean .signup-trust-actions .button {
    min-height: 40px;
    width: 100%;
    justify-content: center;
  }

  .signup-landing .kv-logo-strip {
    margin-top: 12px;
  }
}

/* v2.9.142 service CSV import. */
.service-import-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
  align-items: stretch;
  margin: 18px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(236, 253, 245, .78), #fff 58%);
  box-shadow: var(--shadow-soft);
}

.service-import-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(20, 184, 166, .12);
  margin-bottom: 12px;
}

.service-import-card h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.import-helper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-weight: 750;
  font-size: .9rem;
}

.service-import-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
}

.service-import-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.service-import-form .button {
  width: 100%;
}

@media (max-width: 760px) {
  .service-import-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .service-import-actions {
    grid-template-columns: 1fr;
  }
}

.audit-log-panel {
  overflow: hidden;
}

.audit-filter-form {
  margin: 18px 0;
  padding: 14px;
  gap: 12px;
  align-items: center;
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(4, minmax(150px, .75fr)) auto;
  border: 1px solid rgba(219,228,235,.95);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15,118,110,.05), rgba(255,255,255,.96));
}

.audit-filter-form select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  font-size: 14px;
  border-radius: 14px;
}

.audit-filter-form .records-search {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(203,216,226,.95);
  border-radius: 14px;
  background: #fff;
}

.audit-filter-form .records-search input {
  border: 0;
  min-height: 42px;
  padding: 0;
}

.audit-filter-form .button {
  min-height: 44px;
  white-space: nowrap;
}

.audit-log-panel .responsive-table,
.platform-audit-panel .responsive-table {
  margin-top: 8px;
}

.security-settings-card {
  border-top: 4px solid var(--brand);
}

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

.security-status-grid article {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 11px;
  row-gap: 2px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(219,228,235,.95);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 22px rgba(15,23,42,.04);
}

.security-status-grid span {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(15,118,110,.10);
}

.security-status-grid svg {
  width: 19px;
  height: 19px;
}

.security-status-grid strong {
  font-size: 14px;
  color: var(--ink);
}

.security-status-grid small {
  font-size: 12px;
  color: var(--muted);
}

.hipaa-readiness-card {
  display: grid;
  gap: 18px;
  border: 1px solid rgba(13, 120, 116, 0.2);
  background:
    radial-gradient(circle at top right, rgba(13, 120, 116, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(240, 253, 250, 0.86), rgba(255, 255, 255, 0.96));
}

.hipaa-readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.hipaa-readiness-head h2 {
  margin: 0 0 6px;
}

.hipaa-readiness-score {
  min-width: 154px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 120, 116, 0.2);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.hipaa-readiness-score span {
  display: block;
  color: var(--ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.hipaa-readiness-score small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hipaa-readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.hipaa-readiness-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
}

.hipaa-readiness-item.ready {
  border-color: rgba(13, 148, 136, 0.24);
}

.hipaa-readiness-item.attention {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(255, 251, 235, 0.86);
}

.hipaa-readiness-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(13, 120, 116, 0.1);
}

.hipaa-readiness-item.attention .hipaa-readiness-icon {
  color: #a16207;
  background: rgba(245, 158, 11, 0.14);
}

.hipaa-readiness-icon svg {
  width: 20px;
  height: 20px;
}

.hipaa-readiness-item strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.hipaa-readiness-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.hipaa-readiness-item em {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(13, 120, 116, 0.1);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.hipaa-readiness-item.attention em {
  color: #92400e;
  background: rgba(245, 158, 11, 0.16);
}

.hipaa-readiness-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

.hipaa-readiness-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 800;
}

.hipaa-readiness-meta svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
}

.hipaa-evidence-card {
  display: grid;
  gap: 18px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(13, 120, 116, 0.11), transparent 26%),
    radial-gradient(circle at 100% 8%, rgba(37, 99, 235, 0.1), transparent 24%),
    rgba(255, 255, 255, 0.94);
}

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

.hipaa-evidence-summary article,
.hipaa-overview-metrics article {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.hipaa-evidence-summary span,
.hipaa-overview-metrics strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.hipaa-evidence-summary small,
.hipaa-overview-metrics span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hipaa-evidence-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(13, 120, 116, 0.24);
  border-radius: 18px;
  background: rgba(240, 253, 250, 0.52);
}

.hipaa-evidence-notes div {
  display: grid;
  gap: 4px;
}

.hipaa-evidence-notes strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hipaa-evidence-notes span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.hipaa-safe-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.92));
}

.hipaa-safe-note > span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(15, 118, 110, 0.1);
}

.hipaa-safe-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 14px;
}

.hipaa-safe-note p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.hipaa-signoff-form {
  display: grid;
  gap: 16px;
}

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

.hipaa-check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.hipaa-check-item input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
}

.hipaa-check-item strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.hipaa-check-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.platform-hipaa-overview {
  display: grid;
  gap: 18px;
}

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

.platform-hipaa-checklist-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.platform-hipaa-checklist-summary article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(219, 228, 235, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
}

.platform-hipaa-checklist-summary svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.platform-hipaa-checklist-summary strong {
  color: var(--ink);
  font-size: 13px;
}

.platform-hipaa-checklist-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.platform-hipaa-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.88));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.platform-hipaa-card strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.platform-hipaa-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hipaa-mini-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hipaa-mini-pills span {
  padding: 7px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.hipaa-mini-pills .good {
  color: var(--brand);
  background: rgba(13, 148, 136, 0.11);
}

.hipaa-mini-pills .warn {
  color: #92400e;
  background: rgba(245, 158, 11, 0.14);
}

.platform-hipaa-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.platform-hipaa-card dl div {
  padding: 10px;
  border-radius: 14px;
  background: rgba(241, 245, 249, 0.72);
}

.platform-hipaa-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.platform-hipaa-card dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.security-settings-card .toggle-row {
  align-items: center;
  min-height: 58px;
}

@media (max-width: 1180px) {
  .audit-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .security-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hipaa-evidence-summary,
  .hipaa-overview-metrics,
  .hipaa-evidence-notes,
  .hipaa-checklist-grid,
  .platform-hipaa-checklist-summary,
  .platform-hipaa-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .audit-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .audit-filter-form select,
  .audit-filter-form button,
  .audit-filter-form .records-search {
    width: 100%;
  }

  .security-status-grid {
    grid-template-columns: 1fr;
  }

  .hipaa-readiness-head,
  .hipaa-evidence-card .panel-title-row,
  .platform-hipaa-overview .panel-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .hipaa-evidence-summary,
  .hipaa-overview-metrics,
  .hipaa-evidence-notes,
  .hipaa-checklist-grid,
  .platform-hipaa-checklist-summary,
  .platform-hipaa-grid,
  .platform-hipaa-card dl {
    grid-template-columns: 1fr;
  }

  .hipaa-check-item {
    padding: 12px;
  }
}

/* v2.9.163: safer, tighter tables across CRM list screens. */
.table-panel,
.records-table-wrap,
.report-table-wrap,
.dashboard-table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.table-panel table,
.records-table-wrap table,
.report-table-wrap table,
.dashboard-table-wrap table {
  width: 100%;
  min-width: 900px;
  table-layout: auto;
}

.table-panel th,
.table-panel td,
.records-table-wrap th,
.records-table-wrap td,
.report-table-wrap th,
.report-table-wrap td,
.dashboard-table-wrap th,
.dashboard-table-wrap td {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: middle;
}

.table-panel td:not(:last-child),
.records-table-wrap td:not(:last-child),
.report-table-wrap td:not(:last-child),
.dashboard-table-wrap td:not(:last-child) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-panel th:last-child,
.table-panel td:last-child,
.records-table-wrap th:last-child,
.records-table-wrap td:last-child,
.report-table-wrap th:last-child,
.report-table-wrap td:last-child {
  min-width: 245px;
}

.contact-table-panel table {
  min-width: 980px;
}

.contact-table-panel th:nth-child(1),
.contact-table-panel td:nth-child(1) {
  min-width: 210px;
}

.contact-table-panel th:nth-child(2),
.contact-table-panel td:nth-child(2) {
  min-width: 120px;
}

.contact-table-panel th:nth-child(3),
.contact-table-panel td:nth-child(3) {
  min-width: 170px;
}

.contact-table-panel th:nth-child(4),
.contact-table-panel td:nth-child(4) {
  min-width: 220px;
}

.contact-table-panel th:nth-child(5),
.contact-table-panel td:nth-child(5) {
  min-width: 130px;
}

.contact-table-panel th:nth-child(6),
.contact-table-panel td:nth-child(6) {
  min-width: 145px;
}

.contact-table-name,
.contact-table-name strong,
.location-tag,
.contact-tag,
.status-pill,
.service-category-tag,
.table-email-cell,
.table-phone-cell {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.contact-table-name {
  max-width: 190px;
}

.contact-table-name strong,
.location-tag,
.table-email-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .table-panel,
  .records-table-wrap,
  .report-table-wrap,
  .dashboard-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .table-panel table,
  .records-table-wrap table,
  .report-table-wrap table,
  .dashboard-table-wrap table,
  .contact-table-panel table {
    display: table !important;
    width: max-content !important;
    min-width: 900px !important;
    border-collapse: separate;
  }

  .table-panel thead,
  .records-table-wrap thead,
  .report-table-wrap thead {
    display: table-header-group !important;
  }

  .table-panel tbody,
  .records-table-wrap tbody,
  .report-table-wrap tbody {
    display: table-row-group !important;
  }

  .table-panel tr,
  .records-table-wrap tr,
  .report-table-wrap tr {
    display: table-row !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .table-panel th,
  .records-table-wrap th,
  .report-table-wrap th {
    display: table-cell !important;
  }

  .table-panel td,
  .records-table-wrap td,
  .report-table-wrap td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 11px 12px !important;
    border-bottom: 1px solid rgba(219,228,235,.9) !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  .table-panel td::before,
  .records-table-wrap td::before,
  .report-table-wrap td::before {
    content: none !important;
  }

  .table-panel .row-actions,
  .records-table-wrap .row-actions,
  .report-table-wrap .row-actions,
  .table-actions {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .table-panel .action-button,
  .records-table-wrap .action-button,
  .report-table-wrap .action-button,
  td .action-button,
  .table-actions .action-button {
    width: auto !important;
  }
}

/* v2.9.164 final override: no-results rows stay compact after all table rules. */
.table-empty-row[hidden] {
  display: none !important;
}

.table-panel .table-empty-row,
.records-table-wrap .table-empty-row,
.report-table-wrap .table-empty-row,
.dashboard-table-wrap .table-empty-row {
  display: table-row !important;
}

.table-panel .table-empty-row[hidden],
.records-table-wrap .table-empty-row[hidden],
.report-table-wrap .table-empty-row[hidden],
.dashboard-table-wrap .table-empty-row[hidden] {
  display: none !important;
}

.table-panel .table-empty-cell,
.records-table-wrap .table-empty-cell,
.report-table-wrap .table-empty-cell,
.dashboard-table-wrap .table-empty-cell {
  display: table-cell !important;
  max-width: none !important;
  padding: 12px !important;
  text-align: center;
  white-space: normal !important;
}

.table-panel .table-empty-state,
.records-table-wrap .table-empty-state,
.report-table-wrap .table-empty-state,
.dashboard-table-wrap .table-empty-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0 !important;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px dashed rgba(15,118,110,.24);
  border-radius: 14px;
  background: rgba(240,253,250,.58);
  box-shadow: none;
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
}

.table-empty-state svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #0f766e;
}

.table-empty-state strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.table-empty-state span {
  color: #64748b;
  font-weight: 750;
}

@media (max-width: 760px) {
  .table-panel .table-empty-cell,
  .records-table-wrap .table-empty-cell,
  .report-table-wrap .table-empty-cell,
  .dashboard-table-wrap .table-empty-cell {
    white-space: normal !important;
  }

  .table-panel .table-empty-state,
  .records-table-wrap .table-empty-state,
  .report-table-wrap .table-empty-state,
  .dashboard-table-wrap .table-empty-state {
    width: min(360px, calc(100vw - 88px));
  }

  .table-empty-state span {
    display: none;
  }
}

/* v2.9.165 mobile table controls and public invoice pay link polish. */
@media (max-width: 900px) {
  .public-invoice-redesign {
    display: grid;
    grid-template-columns: 1fr;
  }

  .public-invoice-card,
  .invoice-pay-panel {
    padding: 16px;
    border-radius: 20px;
  }

  .invoice-pay-panel {
    position: static;
    order: -1;
  }

  .invoice-pay-panel > strong {
    font-size: 36px;
  }

  .public-invoice-meta {
    grid-template-columns: 1fr;
  }

  .public-invoice-lines-head {
    display: none;
  }

  .public-invoice-lines {
    border: 0;
    background: transparent;
  }

  .public-invoice-line {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(203,213,225,.86);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15,23,42,.045);
  }

  .public-invoice-line > div {
    grid-column: 1 / -1;
  }

  .public-invoice-line > span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(226,232,240,.82);
    font-size: 13px;
    white-space: nowrap;
  }

  .public-invoice-line > span::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 900;
  }

  .public-payment-row {
    grid-template-columns: 1fr 1fr;
  }

  .public-payment-row > div:first-child {
    grid-column: 1 / -1;
  }

  .table-toolbar {
    padding: 10px !important;
  }

  .table-toolbar-controls {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .table-toolbar .table-search-control {
    width: 100% !important;
    min-width: 0;
  }

  .table-page-size {
    display: inline-grid !important;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 6px;
    width: auto !important;
    min-width: 112px;
    min-height: 46px;
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  .table-page-size select {
    width: 54px !important;
    min-width: 54px;
    padding: 4px 22px 4px 8px !important;
    font-size: 14px !important;
  }

  .row-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    white-space: nowrap;
  }

  .row-actions .action-button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .public-invoice-hero {
    display: grid;
  }

  .public-invoice-hero h1 {
    font-size: 26px;
  }

  .public-invoice-line,
  .public-payment-row {
    grid-template-columns: 1fr;
  }

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

  .table-page-size {
    justify-content: space-between;
    width: 100% !important;
  }
}

/* v2.9.166 system-wide filter, form, field, and button polish. */
.contact-filter-panel,
.invoice-filter-panel,
.report-filters,
.audit-log-panel .records-toolbar,
.search-panel,
.panel:has(> form.form-grid) {
  overflow: visible;
}

.contact-search-form,
.invoice-filter-grid,
.compact-filters,
.audit-filter-form,
.search-form {
  width: 100%;
  align-items: end;
  gap: 10px !important;
}

.contact-search-form {
  grid-template-columns: minmax(300px, 1.7fr) minmax(170px, .65fr) minmax(220px, .8fr) auto;
}

.contact-search-form .wide,
.invoice-filter-grid .wide,
.compact-filters .wide {
  grid-column: auto !important;
}

.invoice-filter-grid {
  grid-template-columns: minmax(280px, 1.5fr) minmax(170px, .7fr) minmax(145px, .55fr) minmax(145px, .55fr) auto;
}

.compact-filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto;
}

.audit-filter-form {
  grid-template-columns: minmax(240px, 1.4fr) minmax(160px, .75fr) minmax(160px, .75fr) minmax(140px, .55fr) minmax(120px, .45fr) auto;
}

.search-form {
  grid-template-columns: minmax(260px, 1fr) auto;
}

.form-grid,
.form-page-card .form-grid,
.business-profile-card .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px !important;
}

.form-grid label,
.form-page-card label,
.business-profile-card .form-grid > label,
.contact-search-form label,
.invoice-filter-grid label,
.compact-filters label {
  min-width: 0;
}

.form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.form-page-card .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.business-profile-card .form-grid > label,
.contact-search-form > label,
.invoice-filter-grid > label,
.compact-filters > label,
.audit-filter-form select,
.audit-filter-form .records-search {
  min-height: 76px;
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.searchable-select-button,
.contact-search-form input,
.contact-search-form select,
.invoice-filter-grid input,
.invoice-filter-grid select,
.compact-filters input,
.compact-filters select,
.audit-filter-form select,
.audit-filter-form .records-search input {
  min-height: 44px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.form-grid textarea {
  min-height: 86px !important;
}

.form-grid input[type="file"] {
  min-height: 42px !important;
  padding: 8px 10px !important;
}

.form-grid input::placeholder,
.form-grid textarea::placeholder,
.contact-search-form input::placeholder,
.invoice-filter-grid input::placeholder {
  font-size: 14px !important;
  color: rgba(100, 116, 139, .82);
}

.form-actions,
.contact-search-form .form-actions,
.invoice-filter-grid .form-actions,
.compact-filters .form-actions,
.audit-filter-form .form-actions,
.search-form .form-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

.form-actions .button,
.contact-search-form .button,
.invoice-filter-grid .button,
.compact-filters .button,
.audit-filter-form .button,
.search-form .button {
  min-height: 44px !important;
  width: auto !important;
  white-space: nowrap;
  padding: 10px 16px !important;
}

.form-page-card label.is-required,
.product-category-manager label.is-required {
  padding-right: 34px !important;
}

.form-page-card label.is-required::after,
.product-category-manager label.is-required::after {
  content: "" !important;
  position: absolute;
  top: 13px;
  right: 13px;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .11);
}

.form-page-card label.is-required::before,
.product-category-manager label.is-required::before {
  content: "*";
  position: absolute;
  top: 5px;
  right: 8px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.client-gallery-upload .form-grid,
.client-profile-gallery .form-grid {
  align-items: end;
}

@media (min-width: 901px) {
  .contact-filter-panel,
  .invoice-filter-panel,
  .report-filters,
  .search-panel {
    padding: 18px !important;
  }

  .contact-search-form .form-actions,
  .invoice-filter-grid .form-actions,
  .compact-filters .form-actions {
    align-self: end;
  }
}

@media (max-width: 1180px) {
  .contact-search-form,
  .invoice-filter-grid,
  .audit-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-search-form .form-actions,
  .invoice-filter-grid .form-actions,
  .audit-filter-form .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .contact-filter-panel,
  .invoice-filter-panel,
  .report-filters,
  .search-panel,
  .audit-log-panel .records-toolbar {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .form-grid,
  .form-page-card .form-grid,
  .business-profile-card .form-grid,
  .contact-search-form,
  .invoice-filter-grid,
  .compact-filters,
  .audit-filter-form,
  .search-form {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
  .form-page-card .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
  .business-profile-card .form-grid > label,
  .contact-search-form > label,
  .invoice-filter-grid > label,
  .compact-filters > label,
  .audit-filter-form select,
  .audit-filter-form .records-search {
    min-height: 68px;
    padding: 9px 11px !important;
  }

  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .searchable-select-button,
  .contact-search-form input,
  .contact-search-form select,
  .invoice-filter-grid input,
  .invoice-filter-grid select,
  .compact-filters input,
  .compact-filters select,
  .audit-filter-form select,
  .audit-filter-form .records-search input {
    min-height: 42px !important;
    font-size: 13px !important;
  }

  .form-grid input::placeholder,
  .form-grid textarea::placeholder,
  .contact-search-form input::placeholder,
  .invoice-filter-grid input::placeholder {
    font-size: 13px !important;
  }

  .form-actions,
  .contact-search-form .form-actions,
  .invoice-filter-grid .form-actions,
  .compact-filters .form-actions,
  .audit-filter-form .form-actions,
  .search-form .form-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions .button,
  .contact-search-form .button,
  .invoice-filter-grid .button,
  .compact-filters .button,
  .audit-filter-form .button,
  .search-form .button {
    width: 100% !important;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .form-actions,
  .contact-search-form .form-actions,
  .invoice-filter-grid .form-actions,
  .compact-filters .form-actions,
  .audit-filter-form .form-actions,
  .search-form .form-actions {
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
  }

  .form-actions .button,
  .contact-search-form .button,
  .invoice-filter-grid .button,
  .compact-filters .button,
  .audit-filter-form .button,
  .search-form .button {
    min-height: 42px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
}

/* v2.9.167 client gallery upload polish and appointment list clarity. */
.client-gallery-upload {
  grid-template-columns: minmax(320px, 1.3fr) minmax(190px, .65fr) minmax(300px, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 16px !important;
  background:
    linear-gradient(135deg, rgba(240,253,250,.72), rgba(255,255,255,.98) 52%),
    #fff !important;
}

.client-gallery-upload > label {
  min-width: 0;
  min-height: 78px;
  display: grid !important;
  align-content: start;
  gap: 7px !important;
  padding: 12px !important;
  border: 1px solid rgba(217,226,236,.9);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
}

.client-gallery-upload .gallery-file-field {
  grid-column: 1 / 2;
}

.client-gallery-upload .gallery-type-field {
  grid-column: 2 / 3;
}

.client-gallery-upload .gallery-title-field {
  grid-column: 3 / 4;
}

.client-gallery-upload .gallery-notes-field {
  grid-column: 1 / 3;
  min-height: 116px;
}

.client-gallery-upload .gallery-notes-field textarea {
  min-height: 72px !important;
}

.client-gallery-upload .gallery-visibility-field {
  grid-column: 3 / 4;
}

.client-gallery-upload .gallery-upload-actions {
  grid-column: 3 / 4;
  align-self: end;
  display: flex !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

.client-gallery-upload .gallery-upload-actions .button {
  min-height: 46px !important;
  padding-inline: 22px !important;
  white-space: nowrap;
}

.client-gallery-upload input[type="file"] {
  border-style: dashed;
  background: #f8fafc;
}

@media (max-width: 1180px) {
  .client-gallery-upload {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .client-gallery-upload .gallery-file-field,
  .client-gallery-upload .gallery-type-field,
  .client-gallery-upload .gallery-title-field,
  .client-gallery-upload .gallery-visibility-field,
  .client-gallery-upload .gallery-upload-actions {
    grid-column: auto;
  }

  .client-gallery-upload .gallery-notes-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .client-gallery-upload {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .client-gallery-upload > label,
  .client-gallery-upload .gallery-file-field,
  .client-gallery-upload .gallery-type-field,
  .client-gallery-upload .gallery-title-field,
  .client-gallery-upload .gallery-notes-field,
  .client-gallery-upload .gallery-visibility-field,
  .client-gallery-upload .gallery-upload-actions {
    grid-column: 1 / -1;
  }

  .client-gallery-upload .gallery-upload-actions {
    display: block !important;
  }

  .client-gallery-upload .gallery-upload-actions .button {
    width: 100% !important;
    justify-content: center;
  }
}

.security-reauth-page {
  max-width: 760px;
  margin: 42px auto 72px;
  padding: 0 18px;
}

.security-reauth-panel {
  display: grid;
  gap: 14px;
  padding: 28px !important;
}

.security-reauth-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #007c76;
  background: linear-gradient(135deg, rgba(0, 124, 118, 0.12), rgba(37, 99, 235, 0.08));
  border: 1px solid rgba(0, 124, 118, 0.16);
}

.security-reauth-panel h1 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.security-reauth-form {
  margin-top: 4px;
}

.security-reauth-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.security-reauth-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  color: #536179;
  background: #f8fafc;
  border: 1px solid #dbe6f2;
  font-weight: 700;
}

.security-reauth-note svg {
  flex: 0 0 auto;
  color: #007c76;
}

@media (max-width: 700px) {
  .security-reauth-page {
    margin: 20px auto 92px;
    padding: 0 12px;
  }

  .security-reauth-panel {
    padding: 18px !important;
  }

  .security-reauth-actions .button {
    width: 100%;
    justify-content: center;
  }
}

.auth-code-card .mfa-code-input {
  text-align: center;
  letter-spacing: .28em;
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.inline-post-form {
  margin-top: 12px;
  text-align: center;
}

.mfa-remember-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(203, 216, 226, .95);
  border-radius: 16px;
  padding: 12px 14px;
  background: #f8fcff;
  font-weight: 850;
}

.mfa-remember-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 8px 10px;
}

.link-button:hover {
  color: var(--brand-strong);
  text-decoration: underline;
}

.security-users-panel {
  margin-top: 18px;
}

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

.security-overview-card {
  border: 1px solid rgba(203, 216, 226, .95);
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f7fbff);
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.security-overview-card span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(10, 125, 124, .1);
  margin-bottom: 12px;
}

.security-overview-card svg {
  width: 21px;
  height: 21px;
}

.security-overview-card strong {
  display: block;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.security-overview-card small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  margin-top: 6px;
}

.security-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.security-user-card {
  border: 1px solid rgba(203, 216, 226, .95);
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f8fcff);
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.security-user-card.reset-required {
  border-color: rgba(245, 158, 11, .45);
  background: linear-gradient(135deg, #fff, #fffaf0);
}

.security-user-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.security-user-head strong,
.security-user-head small {
  display: block;
}

.security-user-head small {
  color: var(--muted);
  font-weight: 800;
  margin-top: 2px;
}

.security-user-meta {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.security-user-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.security-user-meta svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.security-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.security-user-actions form {
  margin: 0;
}

.security-user-actions .button {
  min-width: 0;
}

.security-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.security-device-card {
  border: 1px solid rgba(203, 216, 226, .95);
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f7fbff);
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.security-device-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.security-device-head > span {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(10, 125, 124, .1);
}

.security-device-head svg {
  width: 20px;
  height: 20px;
}

.security-device-head strong,
.security-device-head small {
  display: block;
}

.security-device-head strong {
  color: var(--ink);
  line-height: 1.2;
}

.security-device-head small {
  color: var(--muted);
  font-weight: 800;
  margin-top: 2px;
}

.security-device-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.security-device-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-device-meta svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
  flex: 0 0 auto;
}

.button.compact {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 13px;
}

.button[disabled] {
  opacity: .52;
  cursor: not-allowed;
  filter: grayscale(.25);
}

.status-pill.danger {
  color: #b42318;
  background: #fff1f0;
}

.status-pill.warning {
  color: #92400e;
  background: #fff7ed;
}

.button.warning {
  border-color: rgba(245, 158, 11, .35);
  color: #92400e;
  background: #fff7ed;
}

.button.warning:hover {
  border-color: rgba(245, 158, 11, .65);
  background: #ffedd5;
}

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

  .readiness-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .security-overview-grid {
    grid-template-columns: 1fr;
  }

  .security-user-grid {
    grid-template-columns: 1fr;
  }

  .security-user-head {
    grid-template-columns: auto 1fr;
  }

  .security-user-head .status-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .security-user-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .security-user-actions .button {
    width: 100%;
    justify-content: center;
  }

  .security-device-grid,
  .security-device-meta {
    grid-template-columns: 1fr;
  }

  .readiness-wide {
    grid-template-columns: 1fr;
  }

  .server-pagination,
  .table-pagination {
    align-items: stretch;
  }
}

/* v2.9.188 signup terms and HIPAA note polish */
.signup-form-panel .terms-line,
.signup-form-priority .terms-line,
.signup-form .terms-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.35 !important;
}

.signup-form-panel .terms-line input,
.signup-form-priority .terms-line input,
.signup-form .terms-line input {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 1px 0 0 !important;
}

.signup-form-panel .terms-line span,
.signup-form-priority .terms-line span,
.signup-form .terms-line span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.kv-hipaa-note h2 {
  font-size: clamp(1.25rem, 1.55vw, 1.7rem) !important;
  line-height: 1.18;
}

@media (max-width: 720px) {
  .kv-hipaa-note h2 {
    font-size: 1.25rem !important;
  }
}

/* v2.9.205 signup desktop card height alignment */
@media (min-width: 1025px) {
  .signup-funnel-shell,
  .signup-ad-shell {
    align-items: stretch !important;
  }

  .signup-funnel-shell > .signup-hero-clean,
  .signup-funnel-shell > .signup-form-priority,
  .signup-ad-shell > .signup-ad-copy,
  .signup-ad-shell > .signup-form-panel {
    align-self: stretch !important;
    height: 100% !important;
  }

  .signup-funnel-shell > .signup-hero-clean,
  .signup-ad-shell > .signup-ad-copy {
    min-height: 100%;
  }
}

/* v2.9.217 onboarding scheduler */
.onboarding-calendar-panel {
  overflow: hidden;
}

.onboarding-calendar-panel .calendly-inline-widget {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}

.onboarding-side .clean-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 20px;
  padding-left: 18px;
  color: var(--muted);
}

.onboarding-side .button {
  width: 100%;
}

@media (max-width: 760px) {
  .onboarding-calendar-panel .calendly-inline-widget {
    min-width: 0 !important;
    height: 760px !important;
  }

  .onboarding-layout {
    grid-template-columns: 1fr;
  }
}

/* CRM-wide interface polish: slimmer filters, buttons, and cleaner sections. */
.panel,
.table-panel,
.module-card,
.metric,
.dashboard-start-card,
.booking-link-card,
.sales-hero,
.staff-profile-hero,
.client-profile-hero,
.form-page-card {
  border-color: rgba(148, 163, 184, .24) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .075) !important;
}

.panel {
  padding: 18px !important;
}

.panel + .panel,
.panel + .layout-two,
.layout-two + .panel,
.metric-grid + .panel,
.profile-tabs + section,
.profile-tabs ~ section {
  margin-top: 16px !important;
}

.records-head,
.panel-title-row,
.section-title {
  gap: 12px !important;
  padding-bottom: 2px;
}

.records-head h2,
.panel-title-row h2,
.section-title h2,
.panel > h2 {
  font-size: clamp(1rem, 1.2vw, 1.25rem) !important;
  line-height: 1.25 !important;
}

.eyebrow {
  letter-spacing: .08em !important;
}

.button,
button.button,
a.button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  gap: 7px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(29, 78, 216, .11) !important;
}

.button svg,
button.button svg,
a.button svg,
.icon-button svg {
  width: 15px !important;
  height: 15px !important;
}

.button.primary,
button.button.primary,
a.button.primary {
  background: linear-gradient(135deg, #0f766e, #1d4ed8) !important;
}

.button.secondary,
button.button.secondary,
a.button.secondary {
  color: #26364d !important;
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(148, 163, 184, .36) !important;
  box-shadow: none !important;
}

.row-actions,
.client-profile-actions,
.report-export-actions,
.form-actions,
.table-actions {
  gap: 7px !important;
}

.action-button,
td .action-button,
.table-actions .action-button {
  min-height: 34px !important;
  padding: 7px 10px !important;
  gap: 6px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(148, 163, 184, .34) !important;
}

.action-button svg,
td .action-button svg,
.table-actions .action-button svg {
  width: 14px !important;
  height: 14px !important;
}

td .row-actions,
.table-panel .row-actions,
.records-table-wrap .row-actions,
.report-table-wrap .row-actions {
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.contact-filter-panel,
.invoice-filter-panel,
.report-filters,
.search-panel,
.audit-log-panel .records-toolbar {
  padding: 14px !important;
  border-radius: 14px !important;
}

.contact-search-form,
.invoice-filter-grid,
.compact-filters,
.audit-filter-form,
.search-form,
.records-head .table-toolbar-controls,
.table-toolbar-controls {
  display: grid !important;
  align-items: end !important;
  gap: 9px !important;
}

.contact-search-form {
  grid-template-columns: minmax(260px, 1.45fr) minmax(150px, .55fr) minmax(180px, .7fr) auto !important;
}

.invoice-filter-grid {
  grid-template-columns: minmax(230px, 1.25fr) minmax(145px, .6fr) minmax(130px, .5fr) minmax(130px, .5fr) auto !important;
}

.compact-filters {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) auto !important;
}

.audit-filter-form {
  grid-template-columns: minmax(220px, 1.2fr) repeat(4, minmax(120px, .55fr)) auto !important;
}

.contact-search-form > label,
.invoice-filter-grid > label,
.compact-filters > label,
.search-form > label,
.form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.form-page-card .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.business-profile-card .form-grid > label {
  min-height: 66px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
}

.contact-search-form input,
.contact-search-form select,
.invoice-filter-grid input,
.invoice-filter-grid select,
.compact-filters input,
.compact-filters select,
.search-form input,
.form-grid input,
.form-grid select,
.searchable-select-button {
  min-height: 38px !important;
  border-radius: 10px !important;
}

.form-grid textarea {
  border-radius: 10px !important;
}

.form-actions .button,
.contact-search-form .button,
.invoice-filter-grid .button,
.compact-filters .button,
.audit-filter-form .button,
.search-form .button {
  align-self: end !important;
  min-height: 38px !important;
  white-space: nowrap !important;
}

.table-panel {
  overflow: hidden !important;
}

.table-panel table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table-panel th {
  padding: 11px 12px !important;
  background: #f8fafc !important;
  color: #647084 !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}

.table-panel td {
  padding: 12px !important;
  vertical-align: middle !important;
}

.table-panel tbody tr:hover {
  background: rgba(15, 118, 110, .035) !important;
}

.records-head .records-search,
.table-toolbar-controls .records-search {
  min-height: 38px !important;
  border-radius: 12px !important;
}

.table-page-size {
  min-height: 38px !important;
  border-radius: 12px !important;
}

.metric-grid {
  gap: 11px !important;
}

.metric {
  padding: 14px !important;
}

.metric strong {
  font-size: clamp(1.15rem, 1.5vw, 1.6rem) !important;
}

.profile-tabs,
.billing-tabs,
.marketing-tabs {
  gap: 8px !important;
  margin: 14px 0 !important;
}

.profile-tabs a,
.billing-tabs a,
.marketing-tabs a {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

@media (min-width: 981px) {
  td .action-button span,
  .table-actions .action-button span {
    display: none !important;
  }

  td .action-button,
  .table-actions .action-button {
    width: 34px !important;
    min-width: 34px !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }
}

@media (max-width: 980px) {
  .contact-search-form,
  .invoice-filter-grid,
  .compact-filters,
  .audit-filter-form,
  .search-form,
  .table-toolbar-controls {
    grid-template-columns: 1fr 1fr !important;
  }

  .form-actions,
  .contact-search-form .form-actions,
  .invoice-filter-grid .form-actions,
  .compact-filters .form-actions,
  .audit-filter-form .form-actions,
  .search-form .form-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .panel {
    padding: 14px !important;
  }

  .contact-search-form,
  .invoice-filter-grid,
  .compact-filters,
  .audit-filter-form,
  .search-form,
  .table-toolbar-controls {
    grid-template-columns: 1fr !important;
  }

  .button,
  button.button,
  a.button,
  .action-button,
  td .action-button {
    width: auto !important;
    min-width: 0 !important;
  }

  .client-profile-actions,
  .report-export-actions,
  .row-actions {
    flex-wrap: wrap !important;
  }
}

/* Full-system responsive form and action audit. */
:root {
  --shadow: 0 18px 42px rgba(15, 23, 42, .095);
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, .055);
  --shadow-soft: 0 8px 20px rgba(15, 23, 42, .055);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #111827;
  background:
    radial-gradient(circle at 0 0, rgba(15, 118, 110, .08), transparent 28%),
    radial-gradient(circle at 100% 16%, rgba(29, 78, 216, .07), transparent 26%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
}

.app-main,
.main,
main {
  min-width: 0;
}

.page-head {
  margin-bottom: 18px !important;
}

.page-head h1 {
  font-size: clamp(1.55rem, 2.1vw, 2.15rem) !important;
  line-height: 1.1 !important;
}

.sales-hero,
.staff-profile-hero,
.client-profile-hero,
.booking-link-card,
.dashboard-start-card {
  align-items: center !important;
  gap: 16px !important;
}

.sales-hero h2,
.staff-profile-hero h1,
.client-profile-hero h1 {
  font-size: clamp(1.15rem, 1.8vw, 1.6rem) !important;
  line-height: 1.17 !important;
}

.sales-hero .client-profile-actions,
.staff-profile-hero .client-profile-actions,
.client-profile-hero .client-profile-actions,
.panel-title-row .client-profile-actions,
.panel-title-row .row-actions,
.records-head .row-actions,
.records-head .client-profile-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

.button,
button.button,
a.button {
  min-height: 36px !important;
  padding: 8px 11px !important;
  border-radius: 11px !important;
  font-size: 12.75px !important;
  font-weight: 850 !important;
}

.button.primary,
button.button.primary,
a.button.primary {
  box-shadow: 0 12px 24px rgba(29, 78, 216, .18) !important;
}

.button.secondary,
button.button.secondary,
a.button.secondary {
  box-shadow: 0 6px 16px rgba(15, 23, 42, .035) !important;
}

.form-grid,
.form-page-card .form-grid,
.business-profile-card .form-grid,
.client-gallery-upload .form-grid,
.client-profile-gallery .form-grid {
  gap: 10px !important;
}

.form-grid.placeholder-enhanced,
.form-grid:has(.placeholder-label) {
  gap: 9px !important;
}

.placeholder-label {
  position: relative;
  color: transparent !important;
  font-size: 0 !important;
}

.placeholder-label > input,
.placeholder-label > textarea {
  color: var(--text) !important;
  font-size: 14px !important;
}

.placeholder-label > small,
.placeholder-label .contact-image-preview {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.placeholder-label > input::placeholder,
.placeholder-label > textarea::placeholder {
  color: #7c899c !important;
  font-weight: 800 !important;
}

.form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.form-page-card .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.business-profile-card .form-grid > label,
.contact-search-form > label,
.invoice-filter-grid > label,
.compact-filters > label,
.search-form > label {
  min-height: 58px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.contact-search-form input,
.contact-search-form select,
.invoice-filter-grid input,
.invoice-filter-grid select,
.compact-filters input,
.compact-filters select,
.search-form input,
.searchable-select-button {
  min-height: 36px !important;
  padding: 8px 10px !important;
  font-size: 13.5px !important;
}

.form-grid textarea {
  min-height: 78px !important;
}

.contact-filter-panel,
.invoice-filter-panel,
.report-filters,
.audit-log-panel .records-toolbar,
.search-panel {
  padding: 12px !important;
}

.contact-search-form,
.invoice-filter-grid,
.compact-filters,
.audit-filter-form,
.search-form {
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(120px, 1fr) !important;
}

.contact-search-form .form-actions,
.invoice-filter-grid .form-actions,
.compact-filters .form-actions,
.audit-filter-form .form-actions,
.search-form .form-actions,
.form-actions {
  align-self: stretch !important;
}

.contact-search-form .form-actions .button,
.invoice-filter-grid .form-actions .button,
.compact-filters .form-actions .button,
.audit-filter-form .form-actions .button,
.search-form .form-actions .button,
.form-actions .button {
  align-self: end !important;
}

.invoice-filter-grid {
  grid-template-columns: minmax(240px, 1.6fr) minmax(140px, .7fr) minmax(125px, .55fr) minmax(125px, .55fr) auto auto !important;
}

.contact-search-form {
  grid-template-columns: minmax(260px, 1.65fr) minmax(160px, .8fr) minmax(180px, .85fr) auto auto !important;
}

.compact-filters {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) auto auto !important;
}

.audit-filter-form {
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(118px, .7fr)) auto !important;
}

.table-toolbar-controls,
.records-head .table-toolbar-controls {
  grid-auto-flow: column !important;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  justify-content: end !important;
}

.records-head {
  padding: 12px 14px !important;
}

.table-panel {
  border-radius: 14px !important;
}

.table-panel th,
.table-panel td {
  white-space: nowrap;
}

.table-panel td:last-child,
.table-panel th:last-child {
  position: sticky;
  right: 0;
  background: inherit;
  box-shadow: -10px 0 18px rgba(255, 255, 255, .78);
}

.panel,
.module-card,
.metric,
.table-panel {
  backdrop-filter: blur(12px);
}

.layout-two,
.dashboard-bottom,
.campaign-report-layout {
  gap: 16px !important;
}

.status-pill,
.table-panel td .status-pill {
  border-radius: 999px !important;
  font-size: 11.5px !important;
  padding: 5px 8px !important;
}

@media (min-width: 1180px) {
  .form-actions .button span.optional-label,
  .row-actions .button span.optional-label {
    display: none !important;
  }
}

@media (min-width: 981px) {
  .contact-search-form,
  .invoice-filter-grid,
  .compact-filters,
  .audit-filter-form,
  .search-form {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .form-actions,
  .contact-search-form .form-actions,
  .invoice-filter-grid .form-actions,
  .compact-filters .form-actions,
  .audit-filter-form .form-actions,
  .search-form .form-actions {
    grid-column: auto !important;
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  .sales-hero,
  .staff-profile-hero,
  .client-profile-hero,
  .booking-link-card,
  .dashboard-start-card,
  .records-head,
  .panel-title-row {
    align-items: flex-start !important;
  }

  .contact-search-form,
  .invoice-filter-grid,
  .compact-filters,
  .audit-filter-form,
  .search-form,
  .table-toolbar-controls {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .table-panel td:last-child,
  .table-panel th:last-child {
    position: static;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .page-head h1 {
    font-size: 1.45rem !important;
  }

  .sales-hero,
  .staff-profile-hero,
  .client-profile-hero,
  .booking-link-card,
  .dashboard-start-card {
    padding: 15px !important;
  }

  .contact-search-form,
  .invoice-filter-grid,
  .compact-filters,
  .audit-filter-form,
  .search-form,
  .table-toolbar-controls,
  .form-grid,
  .form-page-card .form-grid,
  .business-profile-card .form-grid {
    grid-template-columns: 1fr !important;
  }

  .client-profile-actions,
  .report-export-actions,
  .row-actions,
  .form-actions {
    width: 100%;
  }

  .client-profile-actions .button,
  .report-export-actions .button,
  .form-actions .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .table-panel th,
  .table-panel td {
    white-space: normal;
  }
}

/* Focused hard override for CRM forms, filters, and header actions. */
.records-head,
.panel-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}

.records-head > div,
.panel-title-row > div {
  min-width: 0 !important;
}

.records-head .client-profile-actions,
.records-head .services-command-actions,
.records-head .row-actions,
.panel-title-row .client-profile-actions,
.panel-title-row .row-actions,
.products-hero .client-profile-actions,
.sales-hero .client-profile-actions,
.client-profile-hero .client-profile-actions,
.staff-profile-hero .client-profile-actions {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: auto !important;
  min-width: max-content !important;
}

.records-head .button,
.panel-title-row .button,
.products-hero .button,
.sales-hero .button,
.client-profile-hero .button,
.staff-profile-hero .button {
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.invoice-filter-panel,
.contact-filter-panel,
.report-filters,
.search-panel {
  display: grid !important;
  gap: 12px !important;
}

.invoice-filter-grid,
.contact-search-form,
.compact-filters,
.search-form {
  display: grid !important;
  grid-auto-flow: unset !important;
  align-items: center !important;
  gap: 8px !important;
}

.invoice-filter-grid {
  grid-template-columns: minmax(260px, 1.7fr) minmax(150px, .72fr) minmax(132px, .55fr) minmax(132px, .55fr) auto !important;
}

.contact-search-form {
  grid-template-columns: minmax(300px, 1.8fr) minmax(180px, .8fr) minmax(200px, .9fr) auto !important;
}

.compact-filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto !important;
}

.invoice-filter-grid .form-actions,
.contact-search-form .form-actions,
.compact-filters .form-actions,
.search-form .form-actions,
.form-actions {
  grid-column: auto !important;
  align-self: center !important;
  justify-self: start !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: max-content !important;
  gap: 8px !important;
}

.invoice-filter-grid .button,
.contact-search-form .button,
.compact-filters .button,
.search-form .button,
.form-actions .button {
  align-self: center !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 13px !important;
  white-space: nowrap !important;
}

.crm-ui-polished .placeholder-label {
  display: grid !important;
  align-content: center !important;
  min-height: 48px !important;
  padding: 6px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.crm-ui-polished .placeholder-label > input,
.crm-ui-polished .placeholder-label > textarea {
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 14px !important;
}

.crm-ui-polished .placeholder-label > small {
  margin: 5px 4px 0 !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
}

.crm-ui-polished .placeholder-label > input::placeholder,
.crm-ui-polished .placeholder-label > textarea::placeholder {
  color: #7c8797 !important;
  font-weight: 800 !important;
}

.contact-search-form > label,
.invoice-filter-grid > label,
.compact-filters > label,
.search-form > label {
  min-height: 48px !important;
}

.contact-search-form > label:not(.placeholder-label),
.invoice-filter-grid > label:not(.placeholder-label),
.compact-filters > label:not(.placeholder-label),
.search-form > label:not(.placeholder-label) {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.contact-search-form select,
.invoice-filter-grid select,
.compact-filters select,
.search-form select,
.form-grid select {
  min-height: 38px !important;
}

.table-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.table-toolbar-controls {
  display: grid !important;
  grid-template-columns: minmax(220px, 360px) auto !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: end !important;
}

.table-toolbar .table-search-control,
.records-head .records-search {
  width: 100% !important;
  min-height: 40px !important;
}

.table-page-size {
  height: 40px !important;
  white-space: nowrap !important;
}

.table-panel td .row-actions,
td .row-actions,
.table-actions {
  display: inline-flex !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: max-content !important;
}

td .action-button,
.table-actions .action-button {
  height: 34px !important;
  min-height: 34px !important;
}

@media (min-width: 981px) {
  td .action-button span,
  .table-actions .action-button span {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .invoice-filter-grid,
  .contact-search-form,
  .compact-filters,
  .search-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .invoice-filter-grid .form-actions,
  .contact-search-form .form-actions,
  .compact-filters .form-actions,
  .search-form .form-actions {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  .records-head,
  .panel-title-row,
  .table-toolbar {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .records-head .client-profile-actions,
  .records-head .services-command-actions,
  .records-head .row-actions,
  .panel-title-row .client-profile-actions,
  .panel-title-row .row-actions,
  .products-hero .client-profile-actions,
  .sales-hero .client-profile-actions,
  .client-profile-hero .client-profile-actions,
  .staff-profile-hero .client-profile-actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .invoice-filter-grid,
  .contact-search-form,
  .compact-filters,
  .search-form,
  .table-toolbar-controls {
    grid-template-columns: 1fr !important;
  }

  .invoice-filter-grid .form-actions,
  .contact-search-form .form-actions,
  .compact-filters .form-actions,
  .search-form .form-actions,
  .form-actions {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
}

/* Final form consistency and marketing editor fix. */
.rich-editor-shell,
.rich-editor-shell *,
.rich-email-editor,
.rich-email-editor * {
  color: var(--text) !important;
  font-size: revert;
}

.rich-editor-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  padding: 10px !important;
  background: linear-gradient(135deg, rgba(15, 118, 110, .06), rgba(29, 78, 216, .055), #ffffff) !important;
}

.rich-editor-toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 36px !important;
  max-width: none !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  color: #1f2a3d !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .05) !important;
}

.rich-editor-toolbar button:hover {
  color: #0f766e !important;
  border-color: rgba(15, 118, 110, .38) !important;
  background: rgba(236, 253, 245, .9) !important;
  transform: translateY(-1px);
}

.rich-editor-toolbar button.is-loading,
.rich-editor-toolbar button:disabled {
  opacity: .7 !important;
  cursor: wait !important;
  transform: none !important;
}

.rich-upload-status {
  padding: 9px 14px;
  border-top: 1px solid rgba(203, 213, 225, .72);
  background: rgba(236, 253, 245, .76);
  color: #0f766e !important;
  font-size: 12.5px !important;
  font-weight: 850;
}

.rich-upload-status.error {
  background: rgba(254, 242, 242, .9);
  color: #b91c1c !important;
}

.rich-email-editor {
  min-height: 300px !important;
  padding: 24px !important;
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
}

.crm-ui-polished label:has(.rich-editor-shell),
.crm-ui-polished label:has(select),
.crm-ui-polished label:has(.searchable-select),
.crm-ui-polished label:has(input[type="file"]) {
  color: var(--muted) !important;
  font-size: 13px !important;
}

.crm-ui-polished label:has(.rich-editor-shell) {
  min-height: 0 !important;
  padding: 12px !important;
}

.form-grid label:not(.placeholder-label),
.contact-search-form label:not(.placeholder-label),
.invoice-filter-grid label:not(.placeholder-label),
.compact-filters label:not(.placeholder-label),
.search-form label:not(.placeholder-label) {
  color: #647084 !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
}

.placeholder-label > input,
.placeholder-label > textarea {
  border-color: rgba(148, 163, 184, .46) !important;
  background: #fff !important;
}

.placeholder-label > input:focus,
.placeholder-label > textarea:focus,
.form-grid select:focus,
.contact-search-form select:focus,
.invoice-filter-grid select:focus,
.compact-filters select:focus {
  border-color: rgba(15, 118, 110, .55) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .10) !important;
}

.invoice-filter-grid,
.contact-search-form,
.compact-filters,
.search-form {
  align-items: stretch !important;
}

.invoice-filter-grid > label,
.contact-search-form > label,
.compact-filters > label,
.search-form > label,
.invoice-filter-grid .form-actions,
.contact-search-form .form-actions,
.compact-filters .form-actions,
.search-form .form-actions {
  height: 54px !important;
  min-height: 54px !important;
}

.invoice-filter-grid .form-actions,
.contact-search-form .form-actions,
.compact-filters .form-actions,
.search-form .form-actions {
  align-items: center !important;
}

.invoice-filter-grid .form-actions .button,
.contact-search-form .form-actions .button,
.compact-filters .form-actions .button,
.search-form .form-actions .button {
  height: 40px !important;
  margin: 0 !important;
}

.button,
.action-button {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

.button:hover,
.action-button:hover {
  transform: translateY(-1px);
}

.panel,
.table-panel,
.module-card,
.records-head,
.sales-hero,
.staff-profile-hero,
.client-profile-hero {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.panel:hover,
.module-card:hover,
.records-head:hover {
  border-color: rgba(15, 118, 110, .22) !important;
}

@media (max-width: 760px) {
  .invoice-filter-grid > label,
  .contact-search-form > label,
  .compact-filters > label,
  .search-form > label,
  .invoice-filter-grid .form-actions,
  .contact-search-form .form-actions,
  .compact-filters .form-actions,
  .search-form .form-actions {
    height: auto !important;
    min-height: 50px !important;
  }

  .rich-editor-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }
}

/* Visible title field system. */
.crm-title-fields .placeholder-label,
.placeholder-label {
  color: inherit !important;
  font-size: inherit !important;
}

.crm-title-fields .form-grid,
.crm-title-fields .form-page-card .form-grid,
.crm-title-fields .business-profile-card .form-grid,
.crm-title-fields .client-gallery-upload .form-grid,
.crm-title-fields .client-profile-gallery .form-grid {
  gap: 12px !important;
  align-items: start !important;
}

.crm-title-fields .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.crm-title-fields .form-page-card .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.crm-title-fields .business-profile-card .form-grid > label,
.crm-title-fields .client-gallery-upload .form-grid > label,
.crm-title-fields .client-profile-gallery .form-grid > label,
.crm-title-fields .contact-search-form > label,
.crm-title-fields .invoice-filter-grid > label,
.crm-title-fields .compact-filters > label,
.crm-title-fields .search-form > label {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 76px !important;
  padding: 10px 12px !important;
  color: #526072 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  border: 1px solid rgba(203, 213, 225, .88) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .9)) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035) !important;
}

.crm-title-fields .form-grid > label:focus-within,
.crm-title-fields .form-page-card .form-grid > label:focus-within,
.crm-title-fields .business-profile-card .form-grid > label:focus-within,
.crm-title-fields .contact-search-form > label:focus-within,
.crm-title-fields .invoice-filter-grid > label:focus-within,
.crm-title-fields .compact-filters > label:focus-within,
.crm-title-fields .search-form > label:focus-within {
  color: #0f766e !important;
  border-color: rgba(15, 118, 110, .45) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .08), 0 12px 26px rgba(15, 23, 42, .06) !important;
}

.crm-title-fields .form-grid input,
.crm-title-fields .form-grid select,
.crm-title-fields .form-grid textarea,
.crm-title-fields .form-page-card input,
.crm-title-fields .form-page-card select,
.crm-title-fields .form-page-card textarea,
.crm-title-fields .contact-search-form input,
.crm-title-fields .contact-search-form select,
.crm-title-fields .invoice-filter-grid input,
.crm-title-fields .invoice-filter-grid select,
.crm-title-fields .compact-filters input,
.crm-title-fields .compact-filters select,
.crm-title-fields .search-form input,
.crm-title-fields .searchable-select-button {
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  border: 1px solid rgba(203, 213, 225, .95) !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.crm-title-fields .form-grid input::placeholder,
.crm-title-fields .form-grid textarea::placeholder,
.crm-title-fields .contact-search-form input::placeholder,
.crm-title-fields .invoice-filter-grid input::placeholder,
.crm-title-fields .compact-filters input::placeholder,
.crm-title-fields .search-form input::placeholder {
  color: #94a3b8 !important;
  font-weight: 650 !important;
}

.crm-title-fields .form-grid input:focus,
.crm-title-fields .form-grid select:focus,
.crm-title-fields .form-grid textarea:focus,
.crm-title-fields .contact-search-form input:focus,
.crm-title-fields .contact-search-form select:focus,
.crm-title-fields .invoice-filter-grid input:focus,
.crm-title-fields .invoice-filter-grid select:focus,
.crm-title-fields .compact-filters input:focus,
.crm-title-fields .compact-filters select:focus,
.crm-title-fields .search-form input:focus {
  border-color: rgba(15, 118, 110, .55) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .10) !important;
  outline: none !important;
}

.crm-title-fields .form-grid input[type="file"],
.crm-title-fields .form-page-card input[type="file"] {
  min-height: 42px !important;
  padding: 8px 10px !important;
}

.crm-title-fields .form-grid textarea,
.crm-title-fields .form-page-card textarea {
  min-height: 84px !important;
  resize: vertical;
}

.crm-title-fields .form-grid label > small,
.crm-title-fields .form-page-card label > small {
  color: #6b778c !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.crm-title-fields .contact-search-form,
.crm-title-fields .invoice-filter-grid,
.crm-title-fields .compact-filters,
.crm-title-fields .search-form {
  align-items: end !important;
}

.crm-title-fields .contact-search-form .form-actions,
.crm-title-fields .invoice-filter-grid .form-actions,
.crm-title-fields .compact-filters .form-actions,
.crm-title-fields .search-form .form-actions {
  min-height: 42px !important;
  height: auto !important;
  align-self: end !important;
  align-items: center !important;
  margin-bottom: 1px !important;
}

.crm-title-fields .contact-search-form .form-actions .button,
.crm-title-fields .invoice-filter-grid .form-actions .button,
.crm-title-fields .compact-filters .form-actions .button,
.crm-title-fields .search-form .form-actions .button {
  height: 42px !important;
  min-height: 42px !important;
}

.crm-title-fields .form-actions {
  padding-top: 8px !important;
}

@media (max-width: 760px) {
  .crm-title-fields .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
  .crm-title-fields .form-page-card .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
  .crm-title-fields .business-profile-card .form-grid > label,
  .crm-title-fields .contact-search-form > label,
  .crm-title-fields .invoice-filter-grid > label,
  .crm-title-fields .compact-filters > label,
  .crm-title-fields .search-form > label {
    min-height: 72px !important;
  }

  .crm-title-fields .contact-search-form .form-actions,
  .crm-title-fields .invoice-filter-grid .form-actions,
  .crm-title-fields .compact-filters .form-actions,
  .crm-title-fields .search-form .form-actions {
    width: 100% !important;
    align-self: stretch !important;
  }
}

/* One-line desktop filters and compact metrics. */
@media (min-width: 901px) {
  .crm-title-fields .report-filters > form.form-grid,
  .crm-title-fields form.contact-search-form,
  .crm-title-fields form.invoice-filter-grid,
  .crm-title-fields form.compact-filters,
  .crm-title-fields form.audit-filter-form,
  .crm-title-fields form.search-form,
  .report-filters > form.form-grid,
  form.contact-search-form,
  form.invoice-filter-grid,
  form.compact-filters,
  form.audit-filter-form,
  form.search-form {
    display: grid !important;
    grid-template-columns: repeat(var(--filter-field-count, 4), minmax(126px, 1fr)) auto !important;
    gap: 10px !important;
    align-items: end !important;
  }

  .crm-title-fields .report-filters > form.form-grid > label,
  .crm-title-fields form.contact-search-form > label,
  .crm-title-fields form.invoice-filter-grid > label,
  .crm-title-fields form.compact-filters > label,
  .crm-title-fields form.search-form > label,
  .report-filters > form.form-grid > label,
  form.contact-search-form > label,
  form.invoice-filter-grid > label,
  form.compact-filters > label,
  form.search-form > label {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 66px !important;
    height: 66px !important;
    padding: 8px 10px !important;
  }

  .crm-title-fields .report-filters > form.form-grid > .wide,
  .crm-title-fields form.contact-search-form > .wide,
  .crm-title-fields form.invoice-filter-grid > .wide,
  .crm-title-fields form.compact-filters > .wide,
  .report-filters > form.form-grid > .wide,
  form.contact-search-form > .wide,
  form.invoice-filter-grid > .wide,
  form.compact-filters > .wide {
    grid-column: auto !important;
  }

  .crm-title-fields form.contact-search-form {
    --filter-field-count: 3;
  }

  .crm-title-fields form.invoice-filter-grid,
  .crm-title-fields form.compact-filters,
  .crm-title-fields .report-filters > form.form-grid,
  form.invoice-filter-grid,
  form.compact-filters,
  .report-filters > form.form-grid {
    --filter-field-count: 4;
  }

  .crm-title-fields form.search-form,
  form.search-form {
    --filter-field-count: 1;
  }

  .crm-title-fields form.audit-filter-form,
  form.audit-filter-form {
    grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(112px, .72fr)) auto !important;
  }

  .crm-title-fields .report-filters > form.form-grid input,
  .crm-title-fields .report-filters > form.form-grid select,
  .crm-title-fields form.contact-search-form input,
  .crm-title-fields form.contact-search-form select,
  .crm-title-fields form.invoice-filter-grid input,
  .crm-title-fields form.invoice-filter-grid select,
  .crm-title-fields form.compact-filters input,
  .crm-title-fields form.compact-filters select,
  .crm-title-fields form.search-form input {
    min-height: 36px !important;
    height: 36px !important;
    padding: 7px 9px !important;
    font-size: 13px !important;
  }

  .crm-title-fields .report-filters > form.form-grid .form-actions,
  .crm-title-fields form.contact-search-form .form-actions,
  .crm-title-fields form.invoice-filter-grid .form-actions,
  .crm-title-fields form.compact-filters .form-actions,
  .crm-title-fields form.search-form .form-actions,
  .report-filters > form.form-grid .form-actions,
  form.contact-search-form .form-actions,
  form.invoice-filter-grid .form-actions,
  form.compact-filters .form-actions,
  form.search-form .form-actions {
    grid-column: auto !important;
    align-self: end !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 66px !important;
    height: 66px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: end !important;
    flex-wrap: nowrap !important;
  }

  .crm-title-fields .report-filters > form.form-grid .button,
  .crm-title-fields form.contact-search-form .button,
  .crm-title-fields form.invoice-filter-grid .button,
  .crm-title-fields form.compact-filters .button,
  .crm-title-fields form.search-form .button,
  .report-filters > form.form-grid .button,
  form.contact-search-form .button,
  form.invoice-filter-grid .button,
  form.compact-filters .button,
  form.search-form .button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }
}

.metric-grid {
  gap: 12px !important;
}

.metric {
  min-width: 0 !important;
  overflow: hidden !important;
}

.metric span {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

.metric strong {
  display: block !important;
  max-width: 100% !important;
  color: #111827 !important;
  font-size: clamp(1.05rem, 1.25vw, 1.45rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.metric small {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

.time-clock-hero,
.payroll-hero,
.sales-hero,
.records-head,
.panel,
.table-panel {
  border-color: rgba(203, 213, 225, .78) !important;
}

.time-clock-insights {
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .9), rgba(239, 246, 255, .95), #ffffff) !important;
}

@media (max-width: 900px) {
  .crm-title-fields .report-filters > form.form-grid,
  .crm-title-fields form.contact-search-form,
  .crm-title-fields form.invoice-filter-grid,
  .crm-title-fields form.compact-filters,
  .crm-title-fields form.audit-filter-form,
  .crm-title-fields form.search-form {
    grid-template-columns: 1fr !important;
  }

  .metric strong {
    font-size: 1.25rem !important;
  }
}

/* Refined typography, navigation, color, and motion. */
:root {
  --brand-soft: #e8f7f4;
  --blue-soft: #edf4ff;
  --amber-soft: #fff7ed;
  --rose-soft: #fff1f2;
  --surface-tint: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,255,.9));
  --lift-shadow: 0 16px 34px rgba(15, 23, 42, .075);
  --lift-shadow-strong: 0 22px 46px rgba(15, 23, 42, .12);
}

body {
  font-size: 14px !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(15, 118, 110, .075), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(37, 99, 235, .075), transparent 31%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
}

.crm-motion-ready .view,
.crm-motion-ready .auth-card,
.crm-motion-ready .signup-shell,
.crm-motion-ready .booking-layout {
  opacity: 0;
  transform: translateY(10px);
}

.crm-motion-ready.crm-page-visible .view,
.crm-motion-ready.crm-page-visible .auth-card,
.crm-motion-ready.crm-page-visible .signup-shell,
.crm-motion-ready.crm-page-visible .booking-layout {
  opacity: 1;
  transform: none;
  transition: opacity .24s ease, transform .24s ease;
}

.page-head h1,
.compact-head h1,
.portal-hero h1,
.client-portal-hero h1,
.client-profile-hero h1,
.staff-profile-hero h1,
.home-hero h1 {
  font-size: clamp(1.42rem, 1.8vw, 1.88rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.sales-hero h2,
.records-head h2,
.panel-title-row h2,
.section-title h2,
.panel > h2,
.module-card h3,
.workspace-card h2,
.booking-panel h2 {
  font-size: clamp(1rem, 1.08vw, 1.2rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.muted,
.small,
.panel p,
.module-card p,
.records-head p {
  font-size: 12.75px !important;
  line-height: 1.48 !important;
}

.eyebrow {
  font-size: 10.75px !important;
  letter-spacing: .075em !important;
}

.topbar {
  border-bottom: 1px solid rgba(203, 213, 225, .82) !important;
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .045) !important;
}

.brand strong {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

.brand small {
  font-size: 11px !important;
}

.nav {
  gap: 6px !important;
  padding: 2px !important;
}

.nav-group {
  padding-bottom: 10px !important;
  margin-bottom: -10px !important;
}

.nav a,
.pill {
  min-height: 34px !important;
  padding: 7px 10px !important;
  gap: 7px !important;
  border-color: rgba(203, 213, 225, .86) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .035) !important;
}

.nav a svg,
.pill svg {
  width: 15px !important;
  height: 15px !important;
  color: #64748b !important;
}

.nav a:hover,
.nav-group:hover > a,
.nav a.active,
.pill.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #0f766e, #1d4ed8) !important;
  box-shadow: 0 14px 28px rgba(29, 78, 216, .17) !important;
  transform: translateY(-1px);
}

.nav a:hover svg,
.nav-group:hover > a svg,
.nav a.active svg,
.pill.active svg {
  color: #fff !important;
}

.mega-menu {
  min-width: 232px !important;
  padding: 8px !important;
  gap: 4px !important;
  border: 1px solid rgba(203, 213, 225, .88) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,252,255,.96)) !important;
  box-shadow: 0 24px 54px rgba(15, 23, 42, .16) !important;
}

.mega-menu a {
  min-height: 36px !important;
  justify-content: flex-start !important;
  padding: 8px 10px !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.mega-menu a:hover,
.mega-menu a.active {
  color: #0f766e !important;
  background: linear-gradient(135deg, rgba(232, 247, 244, .95), rgba(237, 244, 255, .88)) !important;
  transform: translateX(2px);
}

.panel,
.records-head,
.sales-hero,
.client-profile-hero,
.staff-profile-hero,
.portal-hero,
.module-card,
.metric,
.table-panel,
.dashboard-start-card,
.booking-link-card {
  border-color: rgba(203, 213, 225, .74) !important;
  background: var(--surface-tint) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .055) !important;
}

.sales-hero,
.records-head,
.dashboard-start-card,
.booking-link-card {
  background:
    linear-gradient(135deg, rgba(232, 247, 244, .92), rgba(237, 244, 255, .9) 54%, rgba(255,255,255,.95)) !important;
}

.metric:nth-child(3n + 1)::after,
.module-card:nth-child(3n + 1) .module-icon {
  background: rgba(15, 118, 110, .10) !important;
}

.metric:nth-child(3n + 2)::after,
.module-card:nth-child(3n + 2) .module-icon {
  background: rgba(37, 99, 235, .10) !important;
}

.metric:nth-child(3n)::after,
.module-card:nth-child(3n) .module-icon {
  background: rgba(180, 83, 9, .10) !important;
}

.button,
.action-button,
.icon-button,
.panel,
.records-head,
.sales-hero,
.module-card,
.metric,
.table-panel,
.nav a,
.mega-menu a,
.mobile-bottom-nav a,
.mobile-bottom-nav button {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease !important;
}

.panel:hover,
.records-head:hover,
.sales-hero:hover,
.module-card:hover,
.metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-shadow) !important;
}

.table-panel tr {
  transition: background .16s ease, transform .16s ease;
}

.table-panel tbody tr:hover {
  background: rgba(232, 247, 244, .42) !important;
}

.crm-title-fields .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.crm-title-fields .form-page-card .form-grid > label:not(.checkbox-line):not(.toggle-row):not(.form-mode-card):not(.choice-card):not(.location-option),
.crm-title-fields .business-profile-card .form-grid > label,
.crm-title-fields .contact-search-form > label,
.crm-title-fields .invoice-filter-grid > label,
.crm-title-fields .compact-filters > label,
.crm-title-fields .search-form > label {
  font-size: 11.5px !important;
  border-radius: 12px !important;
}

.crm-title-fields .form-grid input,
.crm-title-fields .form-grid select,
.crm-title-fields .form-grid textarea,
.crm-title-fields .form-page-card input,
.crm-title-fields .form-page-card select,
.crm-title-fields .form-page-card textarea,
.crm-title-fields .contact-search-form input,
.crm-title-fields .contact-search-form select,
.crm-title-fields .invoice-filter-grid input,
.crm-title-fields .invoice-filter-grid select,
.crm-title-fields .compact-filters input,
.crm-title-fields .compact-filters select,
.crm-title-fields .search-form input,
.crm-title-fields .searchable-select-button {
  font-size: 13.25px !important;
  font-weight: 720 !important;
}

@media (max-width: 1100px) {
  html body .nav#mainNav {
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.98)) !important;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .24) !important;
  }

  html body .nav#mainNav.open,
  html body.mobile-menu-open .nav#mainNav {
    animation: crmDrawerIn .22s ease both;
  }

  html body .nav#mainNav.open .nav-group > a,
  html body.mobile-menu-open .nav#mainNav .nav-group > a {
    min-height: 46px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #ffffff, #f4f8fb) !important;
    color: #243044 !important;
  }

  html body .nav#mainNav.open .nav-group > a.active,
  html body.mobile-menu-open .nav#mainNav .nav-group > a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #1d4ed8) !important;
  }

  html body .nav#mainNav.open .mega-menu a,
  html body.mobile-menu-open .nav#mainNav .mega-menu a {
    min-height: 36px !important;
    background: rgba(241, 245, 249, .82) !important;
  }

  html body .mobile-bottom-nav {
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid rgba(203, 213, 225, .86) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.16) !important;
    backdrop-filter: blur(16px);
  }

  html body .mobile-bottom-nav a,
  html body .mobile-bottom-nav button {
    border-radius: 15px !important;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 13.5px !important;
  }

  .page-head h1,
  .compact-head h1,
  .portal-hero h1,
  .client-portal-hero h1,
  .client-profile-hero h1,
  .staff-profile-hero h1 {
    font-size: clamp(1.28rem, 5vw, 1.62rem) !important;
  }

  .sales-hero h2,
  .records-head h2,
  .panel-title-row h2,
  .section-title h2,
  .panel > h2 {
    font-size: 1rem !important;
  }

  .panel:hover,
  .records-head:hover,
  .sales-hero:hover,
  .module-card:hover,
  .metric:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .crm-motion-ready .view,
  .crm-motion-ready .auth-card,
  .crm-motion-ready .signup-shell,
  .crm-motion-ready .booking-layout {
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes crmDrawerIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Workflow menu organization polish. */
.nav#mainNav {
  justify-content: flex-start !important;
}

.nav#mainNav .nav-group > a span {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav#mainNav .mega-menu {
  grid-template-columns: 1fr !important;
}

.nav#mainNav .mega-menu a {
  position: relative;
  padding-left: 14px !important;
}

.nav#mainNav .mega-menu a::before {
  content: none !important;
}

.nav#mainNav .mega-menu a:hover::before,
.nav#mainNav .mega-menu a.active::before {
  background: #0f766e;
}

/* Menu, dropdown, and validation polish. */
.topbar {
  align-items: flex-start !important;
}

.nav#mainNav {
  justify-content: flex-start !important;
  gap: 5px !important;
}

.nav#mainNav .nav-group > a {
  border-radius: 12px !important;
  padding-inline: 9px !important;
}

.nav#mainNav .nav-group > a span {
  max-width: none !important;
}

.nav#mainNav .mega-menu {
  min-width: 218px !important;
  grid-template-columns: 1fr !important;
  padding: 7px !important;
}

.nav#mainNav .mega-menu a {
  padding: 8px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

.searchable-select-panel {
  z-index: 9999 !important;
  overflow: hidden !important;
}

.searchable-select-panel .searchable-select-options {
  max-height: min(260px, calc(100vh - 170px)) !important;
}

.contact-filter-panel,
.invoice-filter-panel,
.report-filters,
.records-shell,
.panel:has(.compact-filters),
.panel:has(.invoice-filter-grid),
.panel:has(.audit-filter-form) {
  overflow: visible !important;
}

.form-grid label.is-required,
.crm-title-fields .form-grid label.is-required {
  border-color: rgba(15, 118, 110, .32) !important;
}

.form-grid label.is-required::after,
.crm-title-fields .form-grid label.is-required::after {
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .22) !important;
}

@media (max-width: 1100px) {
  .topbar {
    align-items: center !important;
  }
}

@media (max-width: 1100px) {
  html body .nav#mainNav.open .nav-group > a span,
  html body.mobile-menu-open .nav#mainNav .nav-group > a span {
    max-width: none;
  }

  html body .nav#mainNav.open .mega-menu,
  html body.mobile-menu-open .nav#mainNav .mega-menu {
    display: none !important;
    gap: 5px !important;
    padding-left: 8px !important;
  }

  html body .nav#mainNav.open .nav-group.expanded .mega-menu,
  html body.mobile-menu-open .nav#mainNav .nav-group.expanded .mega-menu {
    display: grid !important;
  }
}

/* Dedicated product category page polish. */
.product-categories-hero {
  background:
    radial-gradient(circle at 10% 10%, rgba(15, 118, 110, .10), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(37, 99, 235, .10), transparent 30%),
    #fff;
}

.product-category-metrics {
  margin: 0 0 16px;
}

.product-category-page {
  margin-bottom: 16px;
}

.product-category-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-category-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, .86);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .72)),
    #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.product-category-card:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .25);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

.product-category-card-main {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.product-category-card-main > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #1d4ed8;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(15, 118, 110, .10));
}

.product-category-card-main h3 {
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 1.2;
}

.product-category-card-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-category-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.product-category-card-stats span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 10px;
  background: rgba(255,255,255,.75);
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.product-category-card-stats strong {
  color: var(--ink);
  font-size: 13px;
}

.product-category-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, .86);
}

.product-category-card-actions .action-button,
.product-category-card-actions .status-pill {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}

@media (max-width: 980px) {
  .product-category-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .product-category-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile menu collapse behavior. */
@media (max-width: 1100px) {
  html body .nav#mainNav.open .nav-group > a,
  html body.mobile-menu-open .nav#mainNav .nav-group > a {
    position: relative !important;
    padding-right: 42px !important;
  }

  html body .nav#mainNav.open .nav-group > a::after,
  html body.mobile-menu-open .nav#mainNav .nav-group > a::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    opacity: .72;
    transition: transform .16s ease;
  }

  html body .nav#mainNav.open .nav-group.expanded > a::after,
  html body.mobile-menu-open .nav#mainNav .nav-group.expanded > a::after {
    transform: translateY(-35%) rotate(225deg);
  }

  html body .nav#mainNav.open .nav-group:not(.expanded) > .mega-menu,
  html body.mobile-menu-open .nav#mainNav .nav-group:not(.expanded) > .mega-menu {
    display: none !important;
  }

  html body .nav#mainNav.open .nav-group.expanded > .mega-menu,
  html body.mobile-menu-open .nav#mainNav .nav-group.expanded > .mega-menu {
    display: grid !important;
    position: static !important;
    min-width: 0 !important;
    padding: 4px 0 8px 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* System-wide checkbox alignment and soft page loading polish. */
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 12000;
  pointer-events: none;
  background: linear-gradient(90deg, #0f766e, #2563eb);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .22s ease, opacity .18s ease;
}

html.crm-soft-loading::before {
  opacity: 1;
  transform: scaleX(.82);
}

html.crm-motion-ready .view,
html.crm-motion-ready .auth-card,
html.crm-motion-ready .signup-shell,
html.crm-motion-ready .booking-layout {
  opacity: 1 !important;
  transform: none !important;
}

html.crm-page-visible .view,
html.crm-page-visible .auth-card,
html.crm-page-visible .signup-shell,
html.crm-page-visible .booking-layout {
  transition: opacity .16s ease, transform .16s ease !important;
}

body:has(form.form-is-submitting) .button.is-loading,
body:has(form.form-is-submitting) button.is-loading {
  opacity: .82;
  pointer-events: none;
}

label.checkbox-line,
.checkbox-line,
.mfa-remember-row,
.database-confirm-line,
.pdf-field-list-row label,
.form-grid > label:has(> input[type="checkbox"]):not(.toggle-row):not(.booking-service-row):not(.booking-addon-card):not(.choice-card):not(.form-mode-card):not(.location-option),
form label:has(> input[type="checkbox"]):not(.toggle-row):not(.open-toggle):not(.booking-service-row):not(.booking-addon-card):not(.choice-card):not(.form-mode-card):not(.location-option) {
  display: inline-flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  text-align: left !important;
}

label.checkbox-line > input[type="checkbox"],
.checkbox-line > input[type="checkbox"],
.mfa-remember-row > input[type="checkbox"],
.database-confirm-line > input[type="checkbox"],
.pdf-field-list-row label > input[type="checkbox"],
.form-grid > label:has(> input[type="checkbox"]) > input[type="checkbox"],
form label:has(> input[type="checkbox"]) > input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.mfa-remember-row {
  width: 100%;
  min-height: 48px;
}

.mfa-remember-row span,
.mfa-remember-row strong,
.mfa-remember-row small,
.checkbox-line span,
.checkbox-line strong,
.checkbox-line small {
  min-width: 0;
}

/* Mobile record cards: no horizontal dragging on phones or installed app. */
@media (max-width: 760px) {
  html body .table-panel,
  html body .records-table-wrap,
  html body .report-table-wrap,
  html body .dashboard-table-wrap,
  html body .table-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: 100% !important;
  }

  html body .table-panel table,
  html body .records-table-wrap table,
  html body .report-table-wrap table,
  html body .dashboard-table-wrap table,
  html body .table-scroll table,
  html body .contact-table-panel table,
  html body .service-records .table-panel table,
  html body .invoices-table-panel table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  html body .table-panel thead,
  html body .records-table-wrap thead,
  html body .report-table-wrap thead,
  html body .dashboard-table-wrap thead,
  html body .table-scroll thead {
    display: none !important;
  }

  html body .table-panel tbody,
  html body .records-table-wrap tbody,
  html body .report-table-wrap tbody,
  html body .dashboard-table-wrap tbody,
  html body .table-scroll tbody {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body .table-panel tr,
  html body .records-table-wrap tr,
  html body .report-table-wrap tr,
  html body .dashboard-table-wrap tr,
  html body .table-scroll tr {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(203, 213, 225, .86) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .54)) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
  }

  html body .table-panel th,
  html body .records-table-wrap th,
  html body .report-table-wrap th,
  html body .dashboard-table-wrap th,
  html body .table-scroll th {
    display: none !important;
  }

  html body .table-panel td,
  html body .records-table-wrap td,
  html body .report-table-wrap td,
  html body .dashboard-table-wrap td,
  html body .table-scroll td {
    display: grid !important;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, .82) !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: right !important;
  }

  html body .table-panel td:last-child,
  html body .records-table-wrap td:last-child,
  html body .report-table-wrap td:last-child,
  html body .dashboard-table-wrap td:last-child,
  html body .table-scroll td:last-child {
    border-bottom: 0 !important;
  }

  html body .table-panel td::before,
  html body .records-table-wrap td::before,
  html body .report-table-wrap td::before,
  html body .dashboard-table-wrap td::before,
  html body .table-scroll td::before {
    content: attr(data-label) !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  html body .table-panel td:empty,
  html body .records-table-wrap td:empty,
  html body .report-table-wrap td:empty,
  html body .dashboard-table-wrap td:empty,
  html body .table-scroll td:empty {
    display: none !important;
  }

  html body .table-panel td > *,
  html body .records-table-wrap td > *,
  html body .report-table-wrap td > *,
  html body .dashboard-table-wrap td > *,
  html body .table-scroll td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body .contact-table-name,
  html body .table-subtext,
  html body .table-email-cell,
  html body .table-phone-cell,
  html body td a,
  html body td strong,
  html body td span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  html body .table-panel td[data-label="Actions"],
  html body .records-table-wrap td[data-label="Actions"],
  html body .report-table-wrap td[data-label="Actions"],
  html body .dashboard-table-wrap td[data-label="Actions"],
  html body .table-scroll td[data-label="Actions"],
  html body .table-panel td:last-child:has(.row-actions),
  html body .records-table-wrap td:last-child:has(.row-actions),
  html body .report-table-wrap td:last-child:has(.row-actions) {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  html body .table-panel td[data-label="Actions"]::before,
  html body .records-table-wrap td[data-label="Actions"]::before,
  html body .report-table-wrap td[data-label="Actions"]::before,
  html body .dashboard-table-wrap td[data-label="Actions"]::before,
  html body .table-scroll td[data-label="Actions"]::before,
  html body .table-panel td:last-child:has(.row-actions)::before,
  html body .records-table-wrap td:last-child:has(.row-actions)::before,
  html body .report-table-wrap td:last-child:has(.row-actions)::before {
    content: "Actions" !important;
    margin-bottom: 2px !important;
  }

  html body .table-panel .row-actions,
  html body .records-table-wrap .row-actions,
  html body .report-table-wrap .row-actions,
  html body .dashboard-table-wrap .row-actions,
  html body .table-scroll .row-actions,
  html body .table-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: 100% !important;
    white-space: normal !important;
  }

  html body .table-panel .row-actions form,
  html body .records-table-wrap .row-actions form,
  html body .report-table-wrap .row-actions form,
  html body .dashboard-table-wrap .row-actions form,
  html body .table-scroll .row-actions form,
  html body .table-actions form {
    flex: 0 1 auto !important;
    width: auto !important;
  }

  html body .table-panel .action-button,
  html body .records-table-wrap .action-button,
  html body .report-table-wrap .action-button,
  html body .dashboard-table-wrap .action-button,
  html body .table-scroll .action-button,
  html body td .action-button,
  html body .table-actions .action-button {
    min-height: 34px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  html body .table-empty-row {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .table-empty-cell {
    display: block !important;
    text-align: center !important;
    border-bottom: 0 !important;
  }

  html body .table-empty-cell::before {
    content: none !important;
  }
}

/* Small desktop and tablet header: wrap menu instead of clipping items. */
@media (min-width: 1101px) and (max-width: 1680px) {
  html body .topbar {
    grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    gap: 8px 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    overflow: visible !important;
  }

  html body .brand {
    min-width: 0 !important;
    max-width: 330px !important;
    align-self: center !important;
  }

  html body .brand strong {
    max-width: 260px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .nav#mainNav {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding-right: 4px !important;
  }

  html body .nav#mainNav .nav-group {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  html body .nav#mainNav a {
    min-height: 32px !important;
    padding: 6px 9px !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
  }

  html body .nav#mainNav a svg {
    width: 14px !important;
    height: 14px !important;
  }

  html body .user-pill {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    z-index: 4 !important;
  }

  html body .search-location-row {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 2px !important;
    width: 100% !important;
  }

  html body .mega-menu {
    top: 38px !important;
  }
}

@media (min-width: 1101px) and (max-width: 1320px) {
  html body .topbar {
    grid-template-columns: minmax(180px, 1fr) auto !important;
  }

  html body .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body .user-pill {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body .nav#mainNav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding-top: 2px !important;
  }

  html body .search-location-row {
    grid-row: 3 !important;
  }
}

/* Narrow panel record tables: stack rows when a table is inside a small column. */
html body .table-result-set.is-compact-record-set .table-toolbar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 12px !important;
}

html body .table-result-set.is-compact-record-set .table-toolbar-controls {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  width: 100% !important;
}

html body .table-result-set.is-compact-record-set .table-search-control {
  min-width: 0 !important;
  width: 100% !important;
}

html body .table-result-set.is-compact-record-set .table-page-size {
  width: auto !important;
  white-space: nowrap !important;
}

html body .is-compact-record-table {
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}

html body .is-compact-record-table table,
html body .service-records .is-compact-record-table table,
html body .invoices-table-panel.is-compact-record-table table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html body .is-compact-record-table thead {
  display: none !important;
}

html body .is-compact-record-table tbody {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}

html body .is-compact-record-table tr {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(203, 213, 225, .86) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .54)) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
}

html body .is-compact-record-table th {
  display: none !important;
}

html body .is-compact-record-table td {
  display: grid !important;
  grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 9px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(226, 232, 240, .82) !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: right !important;
}

html body .is-compact-record-table td:last-child {
  border-bottom: 0 !important;
}

html body .is-compact-record-table td::before {
  content: attr(data-label) !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

html body .is-compact-record-table td:empty {
  display: none !important;
}

html body .is-compact-record-table td > *,
html body .is-compact-record-table td a,
html body .is-compact-record-table td strong,
html body .is-compact-record-table td span {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

html body .is-compact-record-table td[data-label="Actions"],
html body .is-compact-record-table td:last-child:has(.row-actions) {
  grid-template-columns: 1fr !important;
  text-align: left !important;
}

html body .is-compact-record-table td[data-label="Actions"]::before,
html body .is-compact-record-table td:last-child:has(.row-actions)::before {
  content: "Actions" !important;
  margin-bottom: 2px !important;
}

html body .is-compact-record-table .row-actions,
html body .is-compact-record-table .table-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  white-space: normal !important;
}

html body .is-compact-record-table .row-actions form,
html body .is-compact-record-table .table-actions form {
  flex: 0 1 auto !important;
  width: auto !important;
}

html body .is-compact-record-table .action-button,
html body .is-compact-record-table td .action-button,
html body .is-compact-record-table .table-actions .action-button {
  min-height: 34px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

html body .is-compact-record-table .table-empty-row {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .is-compact-record-table .table-empty-cell {
  display: block !important;
  text-align: center !important;
  border-bottom: 0 !important;
}

html body .is-compact-record-table .table-empty-cell::before {
  content: none !important;
}

@media (max-width: 520px) {
  html body .table-result-set.is-compact-record-set .table-toolbar-controls {
    grid-template-columns: 1fr !important;
  }
}

/* v2.9.253 mobile app readability pass: tables, action buttons, account menu, and staff clock controls. */
@media (max-width: 760px) {
  html body {
    -webkit-text-size-adjust: 100%;
  }

  html body .view {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }

  html body .page-head h1,
  html body .client-portal-hero h1,
  html body .portal-hero h1 {
    font-size: clamp(1.45rem, 8vw, 2rem) !important;
    overflow-wrap: anywhere !important;
  }

  html body .panel-title-row,
  html body .records-head,
  html body .client-portal-hero,
  html body .portal-hero,
  html body .staff-clock-card,
  html body .staff-quick-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  html body .client-portal-hero .button,
  html body .portal-hero .button,
  html body .staff-clock-card .button,
  html body .staff-quick-card .button,
  html body .quick-action-row .button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html body .staff-clock-card form,
  html body .staff-quick-card .quick-action-row {
    width: 100% !important;
  }

  html body .quick-action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body .account-menu-panel {
    right: 0 !important;
    left: auto !important;
    width: min(280px, calc(100vw - 22px)) !important;
    max-width: calc(100vw - 22px) !important;
  }

  html body .account-menu-panel a {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 40px !important;
    white-space: nowrap !important;
  }

  html body .account-menu-panel a svg {
    flex: 0 0 auto !important;
  }

  html body .product-category-list article,
  html body .service-category-card,
  html body .empty-category {
    min-width: 0 !important;
  }

  html body .product-category-list strong,
  html body .product-category-list small,
  html body .service-category-card h3,
  html body .service-category-card p,
  html body .service-category-card strong,
  html body .service-category-tag,
  html body .product-category-chip,
  html body .booking-category-rail button {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  html body .product-category-list article {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .product-category-list article .row-actions,
  html body .service-category-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  html body .records-table-wrap,
  html body .table-panel,
  html body .report-table-wrap,
  html body .dashboard-table-wrap,
  html body .table-scroll {
    max-width: 100% !important;
  }

  html body .records-table-wrap table,
  html body .table-panel table,
  html body .report-table-wrap table,
  html body .dashboard-table-wrap table,
  html body .table-scroll table {
    table-layout: fixed !important;
  }

  html body .records-table-wrap td,
  html body .table-panel td,
  html body .report-table-wrap td,
  html body .dashboard-table-wrap td,
  html body .table-scroll td,
  html body .is-compact-record-table td {
    grid-template-columns: minmax(76px, 31%) minmax(0, 1fr) !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body .records-table-wrap td::before,
  html body .table-panel td::before,
  html body .report-table-wrap td::before,
  html body .dashboard-table-wrap td::before,
  html body .table-scroll td::before,
  html body .is-compact-record-table td::before {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html body .records-table-wrap td > *,
  html body .table-panel td > *,
  html body .report-table-wrap td > *,
  html body .dashboard-table-wrap td > *,
  html body .table-scroll td > *,
  html body .is-compact-record-table td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body .row-actions,
  html body .table-actions {
    gap: 6px !important;
  }

  html body .row-actions .action-button,
  html body .table-actions .action-button,
  html body td .action-button {
    min-width: 36px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  html body .row-actions .action-button span,
  html body .table-actions .action-button span,
  html body td .action-button span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
}

@media (max-width: 430px) {
  html body .records-table-wrap td,
  html body .table-panel td,
  html body .report-table-wrap td,
  html body .dashboard-table-wrap td,
  html body .table-scroll td,
  html body .is-compact-record-table td {
    grid-template-columns: minmax(68px, 30%) minmax(0, 1fr) !important;
    gap: 7px !important;
    padding-block: 8px !important;
  }

  html body .records-table-wrap td::before,
  html body .table-panel td::before,
  html body .report-table-wrap td::before,
  html body .dashboard-table-wrap td::before,
  html body .table-scroll td::before,
  html body .is-compact-record-table td::before {
    font-size: 9.5px !important;
    letter-spacing: .025em !important;
  }

  html body .row-actions .action-button,
  html body .table-actions .action-button,
  html body td .action-button {
    padding-inline: 9px !important;
  }
}

/* v2.9.254 mobile category-card stacking fix. */
@media (max-width: 760px) {
  html body .service-category-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body .service-category-card,
  html body .empty-category {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 13px !important;
  }

  html body .service-category-main {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html body .service-category-main > span {
    width: 42px !important;
    height: 42px !important;
  }

  html body .service-category-main > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body .service-category-card h3,
  html body .empty-category h3 {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html body .service-category-card p,
  html body .empty-category p {
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
    color: var(--muted) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  html body .service-category-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .service-category-footer strong {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  html body .service-category-actions {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  html body .service-category-actions .button,
  html body .service-category-actions .action-button {
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  html body .service-category-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  html body .service-category-actions,
  html body .service-category-actions .button,
  html body .service-category-actions .action-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* v2.9.255 mobile hero/action scale fix. */
@media (max-width: 760px) {
  html body .page-head,
  html body .compact-head,
  html body .client-portal-hero,
  html body .client-profile-hero,
  html body .staff-profile-hero,
  html body .staff-portal-hero,
  html body .portal-hero,
  html body .sales-hero,
  html body .products-hero,
  html body .records-head,
  html body .panel-title-row,
  html body .services-command,
  html body .workspace-card,
  html body .account-choice-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 10px !important;
  }

  html body .client-portal-hero,
  html body .client-profile-hero,
  html body .staff-profile-hero,
  html body .staff-portal-hero,
  html body .portal-hero,
  html body .sales-hero,
  html body .products-hero,
  html body .services-command,
  html body .workspace-card,
  html body .account-choice-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  html body .page-head h1,
  html body .compact-head h1,
  html body .client-portal-hero h1,
  html body .client-profile-hero h1,
  html body .staff-profile-hero h1,
  html body .staff-portal-hero h1,
  html body .portal-hero h1,
  html body .home-hero h1,
  html body .forms-hero h1,
  html body .booking-hero h1,
  html body .form-page-card h1 {
    max-width: 100% !important;
    margin: 3px 0 5px !important;
    font-size: clamp(1.32rem, 6.2vw, 1.72rem) !important;
    line-height: 1.13 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html body .sales-hero h2,
  html body .products-hero h2,
  html body .services-command h2,
  html body .records-head h2,
  html body .panel-title-row h2,
  html body .workspace-card h2,
  html body .account-choice-card h2,
  html body .booking-panel h2,
  html body .panel > h2 {
    margin: 2px 0 5px !important;
    font-size: clamp(1.05rem, 4.8vw, 1.28rem) !important;
    line-height: 1.18 !important;
  }

  html body .client-portal-hero p,
  html body .client-profile-hero p,
  html body .staff-profile-hero p,
  html body .staff-portal-hero p,
  html body .portal-hero p,
  html body .sales-hero p,
  html body .products-hero p,
  html body .services-command p,
  html body .workspace-card p,
  html body .account-choice-card p {
    max-width: 100% !important;
    font-size: 12.75px !important;
    line-height: 1.42 !important;
  }

  html body .client-profile-actions,
  html body .services-command-actions,
  html body .report-export-actions,
  html body .records-head .services-command-actions,
  html body .panel-title-row .row-actions,
  html body .panel-title-row .client-profile-actions,
  html body .sales-hero .client-profile-actions,
  html body .products-hero .client-profile-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body .client-portal-hero > .button,
  html body .client-profile-hero .button,
  html body .staff-profile-hero .button,
  html body .staff-portal-hero .button,
  html body .portal-hero > .button,
  html body .workspace-card .button,
  html body .account-choice-card .button,
  html body .client-profile-actions .button,
  html body .services-command-actions .button,
  html body .report-export-actions .button,
  html body .records-head .button,
  html body .panel-title-row .button {
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 40px !important;
    max-height: none !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
    font-size: 12.75px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html body .client-portal-hero > .button svg,
  html body .client-profile-hero .button svg,
  html body .staff-profile-hero .button svg,
  html body .staff-portal-hero .button svg,
  html body .portal-hero > .button svg,
  html body .workspace-card .button svg,
  html body .account-choice-card .button svg {
    width: 15px !important;
    height: 15px !important;
  }
}

@media (max-width: 430px) {
  html body .page-head h1,
  html body .compact-head h1,
  html body .client-portal-hero h1,
  html body .client-profile-hero h1,
  html body .staff-profile-hero h1,
  html body .staff-portal-hero h1,
  html body .portal-hero h1,
  html body .home-hero h1,
  html body .forms-hero h1,
  html body .booking-hero h1,
  html body .form-page-card h1 {
    font-size: clamp(1.22rem, 5.7vw, 1.56rem) !important;
  }
}

/* v2.9.257 signup and booking mobile validation polish. */
html body [data-other-business-category]:not([data-category-visible]) {
  display: none !important;
}

html body [data-other-business-category] {
  display: none !important;
}

html body [data-other-business-category][data-category-visible="1"] {
  display: grid !important;
}

@media (max-width: 760px) {
  html body .booking-public .premium-booking-hero {
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }

  html body .booking-public .premium-booking-hero h1 {
    margin: 2px 0 3px !important;
    font-size: clamp(1.05rem, 4.8vw, 1.28rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word !important;
  }

  html body .booking-public .premium-booking-hero .eyebrow {
    font-size: 10px !important;
  }
}

/* v2.9.261 client profile appointment history: keep status, payment, and actions separated. */
.client-appointment-history-panel {
  overflow-x: auto !important;
}

.client-appointment-history-table {
  min-width: 720px !important;
  table-layout: fixed !important;
}

.client-appointment-history-table th:nth-child(1),
.client-appointment-history-table td:nth-child(1) {
  width: 190px;
}

.client-appointment-history-table th:nth-child(2),
.client-appointment-history-table td:nth-child(2) {
  width: 220px;
}

.client-appointment-history-table th:nth-child(3),
.client-appointment-history-table td:nth-child(3) {
  width: 160px;
}

.client-appointment-history-table th:nth-child(4),
.client-appointment-history-table td:nth-child(4),
.client-appointment-history-table th:nth-child(5),
.client-appointment-history-table td:nth-child(5) {
  width: 118px;
}

.client-appointment-history-table th:nth-child(6),
.client-appointment-history-table td:nth-child(6) {
  width: 96px;
  min-width: 96px !important;
}

.client-appointment-history-table td {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.client-appointment-history-table td:nth-child(2),
.client-appointment-history-table td:nth-child(3) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.appointment-history-link {
  color: #0f766e;
  font-weight: 850;
  text-decoration: none;
}

.appointment-history-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.appointment-status-pill,
.appointment-payment-text {
  display: inline-flex;
  max-width: 100%;
  white-space: nowrap;
}

.client-appointment-history-table .row-actions {
  justify-content: flex-start;
  min-width: 0;
}

@media (max-width: 760px) {
  html body .client-appointment-history-table {
    min-width: 0 !important;
  }

  html body .client-appointment-history-table td:nth-child(2),
  html body .client-appointment-history-table td:nth-child(3) {
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 640px) {
  html body .signup-faq-item {
    border-radius: 14px;
  }

  html body .signup-faq-item summary {
    min-height: 50px;
    padding: 12px 13px;
    font-size: 13px;
  }

  html body .signup-faq-item p {
    margin: -2px 13px 13px;
    font-size: 12px;
  }

  html body .signup-faq-cta {
    padding: 13px;
    border-radius: 15px;
  }
}

/* v2.9.262 appointment detail EMR-style chart polish. */
.appointment-chart-layout {
  align-items: stretch;
}

.appointment-chart-card {
  background:
    linear-gradient(135deg, rgba(240, 253, 250, .88), rgba(255, 255, 255, .98) 48%, rgba(239, 246, 255, .76));
}

.appointment-contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.appointment-contact-list div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.appointment-contact-list dt {
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.appointment-contact-list dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.appointment-emr-panel {
  border-color: rgba(20, 184, 166, .24);
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, .10), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .96));
}

.appointment-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}

.appointment-notes-grid label {
  min-height: 100%;
}

.appointment-notes-grid textarea {
  min-height: 150px;
  resize: vertical;
}

.appointment-emr-form > label {
  align-self: stretch;
}

@media (max-width: 760px) {
  html body .appointment-contact-list,
  html body .appointment-notes-grid {
    grid-template-columns: 1fr;
  }

  html body .appointment-contact-list div {
    padding: 10px;
  }

  html body .appointment-notes-grid textarea {
    min-height: 132px;
  }
}

.appointment-schedule-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 20%, rgba(20, 184, 166, .14), transparent 28%),
    radial-gradient(circle at 94% 4%, rgba(37, 99, 235, .12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,247,255,.88));
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.schedule-toolbar-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.schedule-toolbar-copy strong,
.schedule-toolbar-copy span {
  display: block;
}

.schedule-toolbar-copy strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.schedule-toolbar-copy span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.appointment-schedule-toolbar .view-tabs {
  justify-content: flex-end;
}

.appointment-schedule-toolbar .view-tabs a {
  min-height: 36px;
  padding: 8px 12px;
  border-color: rgba(15, 118, 110, .16);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.appointment-calendar-panel {
  padding: 18px;
  border-color: rgba(15, 118, 110, .16);
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, .08), transparent 34%),
    radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 32%),
    rgba(255,255,255,.92);
}

.appointment-calendar-panel .calendar-period-nav {
  margin-bottom: 14px;
  border-color: rgba(15, 118, 110, .14);
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.appointment-calendar-panel .calendar-period-nav strong {
  font-size: 17px;
  letter-spacing: 0;
}

.appointment-calendar-panel .month-grid {
  padding-bottom: 2px;
}

.appointment-calendar-panel .month-grid-head,
.appointment-calendar-panel .month-grid-body {
  min-width: 960px;
  gap: 9px;
}

.appointment-calendar-panel .month-cell,
.appointment-calendar-panel .week-day {
  min-height: 156px;
  border-color: rgba(148, 163, 184, .28);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .04);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.appointment-calendar-panel .month-cell:hover,
.appointment-calendar-panel .week-day:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, .24);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.appointment-calendar-panel .month-cell > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(15, 118, 110, .08);
  color: #0f766e;
  font-size: 13px;
}

.appointment-calendar-panel .muted-cell {
  background: rgba(241,245,249,.68);
  box-shadow: none;
}

.appointment-calendar-panel .calendar-mini-event,
.appointment-calendar-panel .week-event {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  padding: 8px 9px 8px 11px;
  border: 1px solid rgba(15, 118, 110, .12);
  border-left: 4px solid #0f766e;
  background: linear-gradient(135deg, rgba(240,253,250,.95), rgba(239,246,255,.84));
  color: #203044;
  font-size: 12px;
  line-height: 1.32;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.appointment-calendar-panel .calendar-mini-event.status-pending,
.appointment-calendar-panel .week-event.status-pending {
  border-left-color: #d97706;
  background: linear-gradient(135deg, rgba(255,251,235,.96), rgba(255,247,237,.9));
}

.appointment-calendar-panel .calendar-mini-event.status-cancelled,
.appointment-calendar-panel .calendar-mini-event.status-canceled,
.appointment-calendar-panel .calendar-mini-event.status-no-show,
.appointment-calendar-panel .week-event.status-cancelled,
.appointment-calendar-panel .week-event.status-canceled,
.appointment-calendar-panel .week-event.status-no-show {
  border-left-color: #dc2626;
  background: linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,247,237,.86));
}

.appointment-calendar-panel .calendar-mini-event.status-completed,
.appointment-calendar-panel .week-event.status-completed {
  border-left-color: #2563eb;
  background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(240,253,250,.86));
}

.appointment-calendar-panel .staff-schedule-grid {
  padding-bottom: 4px;
}

.compact-section-title {
  margin-bottom: 14px;
}

@media (max-width: 1080px) {
  .appointment-schedule-toolbar {
    grid-template-columns: 1fr;
  }

  .appointment-schedule-toolbar .view-tabs {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  html body .appointment-schedule-toolbar {
    margin-top: 0;
    padding: 12px;
    border-radius: 18px;
  }

  html body .schedule-toolbar-copy .module-icon {
    width: 38px;
    height: 38px;
  }

  html body .schedule-toolbar-copy strong {
    font-size: 15px;
  }

  html body .schedule-toolbar-copy span {
    font-size: 12px;
  }

  html body .appointment-schedule-toolbar .view-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  html body .appointment-schedule-toolbar .view-tabs a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }

  html body .appointment-calendar-panel {
    padding: 12px;
    border-radius: 18px;
  }

  html body .appointment-calendar-panel .calendar-period-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 8px;
  }

  html body .appointment-calendar-panel .calendar-period-nav strong {
    font-size: 14px;
    text-align: center;
  }

  html body .appointment-calendar-panel .calendar-period-nav .button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 12px;
  }

  html body .appointment-calendar-panel .month-grid-head,
  html body .appointment-calendar-panel .month-grid-body {
    min-width: 850px;
  }

  html body .appointment-calendar-panel .month-cell,
  html body .appointment-calendar-panel .week-day {
    min-height: 132px;
    padding: 9px;
  }
}