/* Shared visual language. Local system fonts and company-owned brand settings. */
:root,
:root[data-company-theme] {
  color-scheme: light;
  --nav: #f9fafb;
  --nav-soft: #eef1f5;
  --ink: #202733;
  --muted: #646e7c;
  --line: #e3e7ed;
  --surface: #fff;
  --canvas: #f5f7fa;
  --bg: #f8f9fb;
  --action: #253f57;
  --action-soft: #eaf0f7;
  --blue: #396da8;
  --radius: 16px;
  --border: var(--line);
}
:root[data-company-theme='warm'] {
  --nav: #faf8f5;
  --nav-soft: #f0eae2;
  --canvas: #f7f5f2;
  --bg: #faf8f5;
  --ink: #302b26;
  --muted: #706b64;
  --line: #e6e0d9;
  --action: #655039;
  --action-soft: #f2ece4;
}
:root[data-company-theme='minimal'] {
  --nav: #fafafa;
  --nav-soft: #eee;
  --canvas: #f6f6f6;
  --bg: #fafafa;
  --ink: #262626;
  --muted: #666;
  --line: #e5e5e5;
  --action: #333;
  --action-soft: #ededed;
}
:root[data-company-accent='champagne'] {
  --action: #6b5234;
  --action-soft: #f4ede3;
}
:root[data-company-accent='sky'] {
  --action: #275c90;
  --action-soft: #eaf2fb;
}
:root[data-company-accent='mint'] {
  --action: #1b6653;
  --action-soft: #e8f4ef;
}
:root[data-company-accent='rose'] {
  --action: #8b435e;
  --action-soft: #f8eaf0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
}
button,
input,
select,
textarea {
  font: inherit;
}
::selection {
  background: var(--action-soft);
  color: var(--ink);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}
.layout {
  grid-template-columns: 248px minmax(0, 1fr);
}
.content {
  min-width: 0;
}
.main {
  max-width: 1500px;
  padding: 34px 36px 40px;
  min-height: calc(100dvh - 124px);
}
.sidebar,
:root[data-company-theme] .sidebar {
  background: var(--nav);
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: 26px 16px 16px;
  top: 0;
  gap: 0;
}
.sidebar .brand {
  padding: 0 10px !important;
  gap: 11px;
  letter-spacing: -0.5px;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  min-height: 42px;
}
.brand > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.brand-mark {
  width: 36px;
  height: 38px;
  flex: 0 0 36px;
  background: var(--action) !important;
  border: 0;
  color: #fff !important;
  border-radius: 10px;
  font-size: 18px;
  letter-spacing: -0.5px;
}
.brand small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 4px;
  max-width: 170px;
}
.brand em {
  color: var(--action);
}
.workspace,
:root[data-company-theme] .workspace {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 25px 0 22px;
  gap: 10px;
  box-shadow: 0 2px 3px #162a3e03;
}
.workspace-logo,
:root[data-company-theme] .workspace-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--action-soft);
  color: var(--action);
  font-size: 12px;
}
.workspace small {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
.workspace strong,
.workspace select {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.workspace select option {
  background: var(--surface);
  color: var(--ink);
}
.workspace > .icon {
  color: var(--muted);
}
.nav {
  padding: 0;
  scrollbar-color: var(--line) transparent;
}
.nav button,
.nav-link,
.nav-group summary {
  font-size: 14px;
  font-weight: 500;
  min-height: 43px;
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--muted);
  gap: 11px;
  line-height: 1.5;
  margin: 3px 0;
}
.nav .icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}
.nav button:hover,
.nav-link:hover,
.nav-group summary:hover {
  background: var(--nav-soft);
  color: var(--ink);
}
.nav button.active,
:root[data-company-theme] .nav button.active {
  background: var(--action-soft);
  color: var(--action);
  box-shadow: none;
  font-weight: 650;
}
.nav button.active .icon,
:root[data-company-theme] .nav button.active .icon {
  color: var(--action);
}
.nav-caption {
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.5;
  color: var(--muted);
  margin: 24px 12px 10px;
  font-weight: 650;
}
.nav-ai {
  margin-top: 8px;
  padding-bottom: 5px;
}
.nav-ai button {
  color: var(--action);
  background: var(--surface);
  border: 1px solid var(--line);
}
.nav-group summary {
  font-weight: 600;
  color: var(--ink);
}
.nav-group > div {
  padding: 2px 0 7px 16px;
  margin-left: 20px;
  border-left: 1px solid var(--line);
}
.nav-group > div button,
.nav-group > div .nav-link {
  font-size: 13px;
  min-height: 38px;
  padding: 8px 10px;
  margin: 2px 0;
}
.nav-group > div .icon {
  width: 16px;
  height: 16px;
}
.nav-group summary .icon:last-child {
  width: 14px;
  color: var(--muted);
}
.sidebar-footer {
  padding: 12px 4px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.profile {
  border: 0;
  padding: 4px 0;
  gap: 10px;
}
.profile-link {
  color: var(--ink);
}
.profile strong {
  font-size: 13px;
  font-weight: 600;
  max-width: 140px;
}
.profile small {
  font-size: 11px;
  color: var(--muted);
}
.profile .icon-button {
  color: var(--muted);
}
.avatar {
  background: var(--action-soft);
  color: var(--action);
  border: 1px solid var(--line);
  width: 34px;
  height: 34px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}
.platform-signature {
  font-size: 10px;
  color: var(--muted);
  padding-top: 12px;
}
.topbar,
:root[data-company-theme] .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  height: 72px;
  padding: 0 36px;
}
.breadcrumb {
  font-size: 12px;
  gap: 10px;
  color: var(--muted);
}
.breadcrumb span {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.breadcrumb .icon {
  color: var(--muted);
}
.global-search {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  gap: 8px;
}
.global-search kbd {
  border: 0;
  background: var(--bg);
  font-size: 10px;
  margin-left: 18px;
  color: var(--muted);
}
.icon-button {
  border-radius: 9px;
}
.icon-button:hover {
  background: var(--nav-soft);
}
.notification-button {
  border: 0;
  padding: 0;
  color: var(--muted);
  width: 36px;
}
.notification-button i {
  background: var(--action);
  box-shadow: 0 0 0 2px var(--surface);
}
.topbar-avatar {
  width: 34px;
  height: 34px;
}
.page-heading h1,
.dashboard-heading h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
}
.page-heading p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}
.eyebrow,
:root[data-company-theme] .eyebrow {
  font-size: 10px;
  color: var(--muted);
  font-weight: 650;
  letter-spacing: 1.2px;
  line-height: 1.5;
}
.surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 3px 12px #142c4603;
}
.section-head h2 {
  font-size: 18px;
  font-weight: 650;
}
.btn {
  font-size: 13px;
  min-height: 42px;
  border-radius: 9px;
  padding: 10px 16px;
  font-weight: 600;
  color: var(--ink);
  background: var(--nav-soft);
  gap: 8px;
  box-shadow: none;
}
.btn .icon {
  width: 17px;
  height: 17px;
}
.btn.primary,
.btn.accent,
:root[data-company-theme] .btn.primary,
:root[data-company-theme] .btn.accent {
  background: var(--action);
  color: #fff;
  box-shadow: 0 2px 3px #152c4010;
}
.btn.primary:hover,
.btn.accent:hover,
:root[data-company-theme] .btn.primary:hover,
:root[data-company-theme] .btn.accent:hover {
  background: var(--action);
  filter: brightness(1.12);
}
.btn.ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn.ghost:hover {
  background: var(--bg);
  border-color: #bac4d0;
}
.btn.text {
  color: var(--action);
  background: transparent;
}
.btn.danger {
  background: #fff0ee;
  color: #a5372c;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
.count-label,
.disabled-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.form-field label {
  font-size: 13px;
  font-weight: 600;
}
.form-field input,
.form-field select,
.form-field textarea,
textarea,
.invite-link {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid #ced5de;
  border-radius: 9px;
  min-height: 44px;
  padding: 11px 13px;
  line-height: 1.6;
}
.form-field select option {
  background: var(--surface);
  color: var(--ink);
}
.form-field input::placeholder,
textarea::placeholder {
  color: #8b939d;
}
.form-field small {
  font-size: 12px;
}
.error-inline {
  background: #fff2ef;
  border: 1px solid #ffd6cf;
  color: #a43b2c;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.65;
}
.empty {
  font-size: 14px;
}
.pill {
  background: #e7f4ed;
  color: #236246;
  font-size: 12px;
}
.pill.preview,
.role-label {
  background: var(--nav-soft);
  color: var(--muted);
}
dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px #152a4030;
  border-radius: 18px;
  padding: 28px;
}
dialog::backdrop {
  background: #182c4660;
  backdrop-filter: blur(4px);
}
.modal-head h2 {
  font-size: 23px;
  font-weight: 650;
}
.modal-icon {
  background: var(--action-soft);
  color: var(--action);
}
.modal-body p {
  font-size: 14px;
}
.notice {
  background: #26384b;
  color: #fff;
  border-color: #26384b;
  box-shadow: 0 8px 30px #142b4620;
  font-size: 14px;
}
.demo-banner {
  background: #eef2f7;
  border-bottom: 1px solid #dfe5ec;
  color: #43566b;
  font-size: 10px;
  padding: 6px 18px;
  letter-spacing: 0.5px;
}
.demo-banner span {
  font-size: 11px;
  color: #63738a;
  letter-spacing: 0;
}
.demo-banner a {
  font-size: 11px;
  color: #354b63;
}
.pilot-banner {
  background: #eef2f7;
  border-color: #dfe5ec;
  color: #43566b;
}
.demo-roles {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 9px;
}
.demo-roles button {
  font-size: 11px;
  padding: 5px 8px;
  color: var(--muted);
}
.demo-roles button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px #152a4010;
}
.workspace-footer {
  border-color: var(--line);
  color: var(--muted);
  font-size: 10px;
  padding: 17px 36px;
  letter-spacing: 0;
}
.footer-dot:before {
  background: #458c71;
}
.skip-link {
  background: var(--action);
  color: #fff;
}
.skip-link:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}
.project-row {
  border-color: var(--line);
}
.project-row .project-icon {
  background: var(--action-soft);
  color: var(--action);
}
.progress-track {
  background: var(--nav-soft);
}
.progress-track i {
  background: var(--action);
}
td {
  border-color: var(--line);
}
.app-card,
.app-card.featured {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 3px 12px #142c4603;
}
.app-card.featured {
  border-color: #bdcfdf;
}
.app-card .app-icon {
  background: var(--action-soft);
  color: var(--action);
}
.app-card .app-status,
.app-card.featured .app-status,
.app-card p,
.featured p {
  color: var(--muted);
}
.app-card h2 {
  font-size: 22px;
  font-weight: 650;
}
.app-card:hover {
  border-color: #b3c1cf;
  box-shadow: 0 8px 24px #142c4608;
  transform: translateY(-2px);
}
.auth-content {
  background: var(--surface);
}
.auth-aside {
  background: #203449;
}
.auth-aside .brand {
  color: #fff;
}
.auth-aside h1 {
  font-weight: 600;
}
.auth-art div {
  background: #2c4358;
  border-color: #496075;
  color: #dce7f1;
}
.auth-art div:first-child {
  border-color: #8bb5a5;
  color: #cef0e3;
}
.auth-box h2 {
  font-size: 30px;
  font-weight: 700;
}
.auth-box .btn.primary {
  color: #fff;
}
.auth-actions button {
  color: var(--muted);
}
.company-chooser .membership-card {
  background: var(--surface);
}
.onboarding-steps b {
  background: var(--nav-soft);
}
.onboarding-steps .active {
  color: var(--action);
}
.onboarding-steps .active b {
  background: var(--action);
  color: #fff;
}
.domain-input {
  border-color: #ced5de;
}
.domain-input span {
  background: var(--bg);
}
.onboarding-note,
.setup-banner {
  background: var(--action-soft);
  color: var(--ink);
}
.billing-warning {
  background: #fff6e8;
  color: #865820;
}
.billing-metrics strong {
  font-weight: 650;
}
.trial-panel {
  background: var(--bg);
}
.payment-status {
  background: #eef2f7;
  color: #445a72;
}
.payment-status.attention {
  background: #fff1d9;
  color: #8c5810;
}
.payment-status.settled {
  background: #e7f5ed;
  color: #286b45;
}
.marketing-tabs [aria-selected='true'] {
  border-color: var(--action);
  color: var(--action);
  background: var(--action-soft);
}
.business-state,
.business-schedule-group > h2 {
  color: var(--action);
}
.proc-warning,
.business-note,
.marketing-note,
.setup-note {
  border-left-color: var(--action);
}
.setup-steps button[aria-current='step'] {
  border-color: var(--action);
  color: var(--action);
}
.setup-steps button[aria-current='step'] span {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.setup-plan-editor {
  border-color: var(--action);
}
.setup-check input {
  accent-color: var(--action);
}
.cashflow-shortfall {
  background: #fff0eb;
}
.cashflow-scroll {
  background: var(--surface);
}
.search-result {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 13px;
}
.search-result:hover {
  background: var(--action-soft);
}
/* CRM shares the same surfaces while keeping its status and drag/drop semantics. */
.crm-page {
  --crm-ink: var(--ink);
  --crm-muted: var(--muted);
  --crm-line: var(--line);
  color: var(--ink);
}
.crm-page .page-heading h1 {
  font-size: 30px;
  color: var(--ink);
}
.crm-page .page-heading p {
  font-size: 14px;
}
.crm-metrics {
  border-color: var(--line);
  background: var(--surface);
  border-radius: 13px;
  padding: 22px 0;
}
.crm-metrics span,
.crm-metrics small {
  font-size: 12px;
  color: var(--muted);
}
.crm-metrics strong {
  font-size: 26px;
  color: var(--ink);
  font-weight: 650;
}
.crm-view-switch {
  background: var(--nav-soft);
  border: 1px solid var(--line);
}
.crm-view-switch button {
  font-size: 13px;
  color: var(--muted);
}
.crm-view-switch button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 5px #142c4610;
}
.crm-search input,
.crm-filters select,
.crm-status-control select,
.crm-table select,
.crm-detail-status select,
.crm-source-filter input {
  background: var(--surface);
  border-color: #ced5de;
  color: var(--ink);
  font-size: 13px;
}
.crm-filters label {
  font-size: 12px;
  color: var(--muted);
}
.crm-filters select {
  padding: 9px 24px 9px 10px;
}
.crm-results-label,
.crm-order-label,
.crm-help,
.crm-pagination {
  font-size: 12px;
  color: var(--muted);
}
.crm-search input::placeholder {
  color: #8b939d;
}
.crm-column {
  background: #eef1f5;
  border: 1px solid var(--line);
  padding: 14px 12px;
}
.crm-column-heading h2 {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.crm-column-heading > strong {
  font-size: 12px;
  color: var(--muted);
}
.crm-column-count {
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.crm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px;
  box-shadow: 0 2px 4px #142c4604;
}
.crm-card:hover {
  border-color: var(--action);
}
.crm-card-link,
.crm-card h3 {
  color: var(--ink);
}
.crm-card h3 {
  font-size: 14px;
  font-weight: 650;
}
.crm-card-link > p {
  font-size: 13px;
  color: var(--muted);
}
.crm-card-source,
.crm-card-location,
.crm-next {
  font-size: 11px;
  color: var(--muted);
}
.crm-card-value {
  font-size: 16px;
  color: var(--action);
  font-weight: 650;
}
.crm-card-footer {
  border-color: var(--line);
}
.crm-person > span:first-child {
  background: var(--nav-soft);
  border-color: var(--line);
  color: var(--muted);
  font-size: 10px;
}
.crm-next.overdue {
  color: #9f4f26;
}
.crm-status-control select {
  font-size: 11px;
  padding: 7px 22px 7px 9px;
  color: var(--muted);
}
.crm-save-label {
  font-size: 11px;
  color: var(--action);
}
.crm-column-empty {
  border-color: #ced5de;
  color: var(--muted);
  font-size: 12px;
}
.crm-column-add {
  font-size: 12px;
  color: var(--muted);
}
.crm-column.is-drag-over {
  background: var(--action-soft);
  border-color: var(--action);
}
.crm-table-wrap,
.crm-panel,
.crm-empty,
.crm-query-state {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.crm-empty h2,
.crm-empty h3 {
  color: var(--ink);
}
.crm-empty p {
  color: var(--muted);
  font-size: 14px;
}
.crm-empty-icon {
  background: var(--action-soft);
  border-color: var(--line);
  color: var(--action);
}
.crm-table th {
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
}
.crm-table td {
  color: var(--ink);
  border-color: var(--line);
  font-size: 13px;
}
.crm-table a {
  color: var(--ink);
}
.crm-table a small {
  color: var(--muted);
  font-size: 12px;
}
.crm-back {
  color: var(--action);
  font-size: 13px;
}
.crm-tabs {
  border-color: var(--line);
}
.crm-tabs button {
  font-size: 14px;
  color: var(--muted);
}
.crm-tabs button[aria-selected='true'] {
  border-color: var(--action);
  color: var(--action);
}
.crm-details dt {
  font-size: 12px;
  color: var(--muted);
}
.crm-details dd {
  color: var(--ink);
  font-size: 14px;
}
.crm-panel h2,
.crm-detail-title {
  color: var(--ink);
}
.crm-form input,
.crm-form select,
.crm-form textarea {
  background: var(--surface);
  color: var(--ink);
  border-color: #ced5de;
}
.crm-form label {
  font-size: 13px;
  color: var(--ink);
}
.crm-stage-new .crm-stage-dot {
  background: #5e86ad;
}
.crm-stage-contacted .crm-stage-dot {
  background: #667db0;
}
.crm-stage-consultation .crm-stage-dot {
  background: #9275b2;
}
.crm-stage-offer .crm-stage-dot {
  background: #b88439;
}
.crm-stage-negotiation .crm-stage-dot {
  background: #c06c40;
}
.crm-stage-won .crm-stage-dot {
  background: #45876a;
}
.crm-stage-lost .crm-stage-dot {
  background: #a66367;
}
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 226px minmax(0, 1fr);
  }
  .sidebar {
    padding: 22px 12px 14px;
  }
  .main {
    padding: 30px 26px;
  }
  .topbar {
    padding: 0 26px;
  }
  .global-search span {
    display: none;
  }
  .global-search kbd {
    margin-left: 0;
  }
}
@media (max-width: 900px) {
  .topbar-right {
    gap: 10px;
  }
  .main {
    padding: 26px 22px;
  }
  .page-heading h1 {
    font-size: 28px;
  }
}
@media (max-width: 760px) {
  .layout {
    display: block;
  }
  .sidebar,
  :root[data-company-theme] .sidebar {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    width: 286px;
    max-width: calc(100vw - 32px);
    height: 100dvh;
    padding: 24px 18px 16px;
    z-index: 40;
  }
  .sidebar.open,
  :root[data-company-theme] .sidebar.open {
    display: flex;
    box-shadow: 15px 0 40px #152a4020;
  }
  .sidebar.open + .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: #182c4660;
  }
  .sidebar-close {
    color: var(--muted);
    top: 26px;
    right: 8px;
  }
  .sidebar .brand {
    padding-right: 24px !important;
  }
  .mobile-menu {
    display: grid;
    color: var(--ink);
  }
  .topbar,
  :root[data-company-theme] .topbar {
    height: 64px;
    padding: 0 18px;
  }
  .topbar-right {
    gap: 9px;
  }
  .breadcrumb {
    display: none;
  }
  .main {
    padding: 26px 18px 30px;
    min-height: calc(100dvh - 120px);
  }
  .page-heading {
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
  }
  .page-heading h1 {
    font-size: 27px;
  }
  .page-heading p {
    font-size: 14px;
  }
  .global-search {
    border: 0;
    padding: 6px;
  }
  .global-search kbd {
    display: none;
  }
  .demo-roles button {
    font-size: 11px;
    padding: 5px 7px;
  }
  .workspace-footer {
    padding: 15px 18px;
  }
  .surface {
    padding: 22px;
  }
  .form-field input,
  .form-field textarea,
  .form-field select {
    font-size: 16px;
  }
  .crm-filters label {
    font-size: 12px;
  }
  .crm-filters select {
    font-size: 12px;
    padding: 9px 7px;
  }
  .crm-metrics > div {
    padding: 0 12px;
  }
  .crm-metrics span {
    font-size: 11px;
  }
  .crm-metrics strong {
    font-size: 23px;
  }
  .crm-column {
    padding: 13px 11px;
  }
  .crm-column .crm-pagination,
  .crm-column .crm-pagination .btn {
    font-size: 11px;
  }
  .demo-banner span {
    font-size: 10px;
  }
}
@media (max-width: 420px) {
  .topbar {
    padding: 0 12px;
  }
  .main {
    padding: 23px 14px 28px;
  }
  .topbar-right .avatar {
    display: grid;
  }
  .demo-banner span {
    display: none;
  }
  .surface {
    padding: 18px;
  }
  .crm-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .crm-filters {
    grid-template-columns: 1fr 1fr;
  }
  .workspace-footer > span:nth-child(2) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: 0.01ms !important;
  }
}

/* Higher-specificity legacy CRM controls. */
.crm-page {
  --crm-panel: var(--surface);
  --crm-accent: var(--action);
}
.crm-page .page-heading .eyebrow {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.2px;
}
.crm-page .btn.primary,
.crm-form-actions .btn.primary {
  background: var(--action);
  color: #fff;
  border-color: var(--action);
}
.crm-page .btn.primary:hover,
.crm-form-actions .btn.primary:hover {
  background: var(--action);
  filter: brightness(1.1);
}
.crm-page .btn.ghost,
.crm-form-actions .btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.crm-page .btn.text {
  color: var(--action);
}
.crm-page :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}
.crm-metrics > div {
  border-color: var(--line);
}
.crm-detail-meta,
.crm-detail-status label,
.crm-form-note {
  color: var(--muted);
}
.crm-tabs a {
  font-size: 14px;
  color: var(--muted);
}
.crm-tabs a[aria-current='page'] {
  color: var(--action);
  border-color: var(--action);
  font-weight: 600;
}
.crm-demo-note,
.crm-contact-name small,
.crm-notes > small,
.crm-linked-list small {
  color: var(--muted);
  font-size: 12px;
}
.crm-detail-status {
  font-size: 13px;
  color: var(--muted);
}
.crm-detail-actions .btn {
  font-size: 13px;
}
.crm-tag,
.crm-contact-avatar {
  background: var(--action-soft);
  color: var(--action);
  border-color: var(--line);
}
.crm-tag {
  font-size: 12px;
}
.crm-contact-name strong {
  font-size: 14px;
  font-weight: 600;
}
.crm-preserve {
  color: var(--ink);
  font-size: 14px;
}
.crm-linked-list article {
  border-color: var(--line);
}
.crm-linked-list strong {
  font-size: 14px;
}
.crm-form-fields :is(input, select, textarea) {
  background: var(--surface);
  color: var(--ink);
  color-scheme: light;
  border-color: #ced5de;
  font-size: 14px;
  border-radius: 9px;
}
.crm-form-fields .form-field label {
  font-size: 13px;
}
.crm-form-fields :is(input, select, textarea, button):focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}
.crm-form-error:not(:empty) {
  background: #fff2ef;
  color: #a43b2c;
  border-color: #ffd6cf;
  font-size: 13px;
}
.crm-page select option {
  background: var(--surface);
  color: var(--ink);
}
.crm-status-control select:focus {
  color: var(--ink);
}
.crm-column-add:hover,
.crm-table a:hover,
.crm-back:hover {
  color: var(--action);
}