.crm-settings {
  --settings-ink: #253b3b;
  --settings-muted: #687a79;
  --settings-line: #dce6e2;
  --settings-paper: #f4f7f3;
  --settings-accent: #2e6459;
  --settings-soft: #e6efea;
  color: var(--settings-ink);
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 0 36px;
}

.crm-settings-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 0 22px;
}

.crm-settings-eyebrow,
.crm-settings-kicker {
  color: var(--settings-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.crm-settings-heading h1 {
  margin: 4px 0 5px;
  color: var(--settings-ink);
  font-size: clamp(27px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.crm-settings-heading p,
.crm-settings-section-heading p {
  margin: 0;
  color: var(--settings-muted);
  font-size: 13px;
  line-height: 1.55;
}

.crm-settings-layout {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.crm-settings-nav {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 5px;
  padding: 8px;
  background: var(--settings-paper);
  border: 1px solid var(--settings-line);
  border-radius: 12px;
}

.crm-settings-nav-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--settings-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.crm-settings-nav-item:hover {
  background: #eaf1ec;
}

.crm-settings-nav-item.is-active {
  background: #fff;
  border-color: #d5e2dc;
  box-shadow: 0 2px 7px rgba(36, 67, 57, .06);
  transform: translateX(2px);
}

.crm-settings-nav-label {
  font-size: 13px;
  font-weight: 750;
}

.crm-settings-nav-detail {
  color: var(--settings-muted);
  font-size: 11px;
  line-height: 1.35;
}

.crm-settings-nav-item:focus-visible {
  outline: 3px solid #a6c8b8;
  outline-offset: 2px;
}

.crm-settings-content {
  min-width: 0;
}

.crm-settings-panel[hidden] {
  display: none !important;
}

.crm-settings-section-heading {
  margin: 1px 0 17px;
}

.crm-settings-section-heading h2 {
  margin: 4px 0 4px;
  color: var(--settings-ink);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.crm-settings-card-group {
  display: grid;
  gap: 0;
}

.crm-settings-card-group > .card {
  border-color: var(--settings-line);
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(39, 67, 57, .035);
}

.crm-settings-card-group > .card:last-child {
  margin-bottom: 0;
}

.crm-settings-admin-links {
  display: grid;
  gap: 10px;
}

.crm-settings-admin-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 17px;
  border: 1px solid var(--settings-line);
  border-radius: 10px;
  background: #fff;
  color: var(--settings-ink);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(39, 67, 57, .035);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.crm-settings-admin-link:hover {
  background: #f8faf7;
  border-color: #b8cfc3;
  transform: translateY(-1px);
}

.crm-settings-admin-link:focus-visible {
  outline: 3px solid #a6c8b8;
  outline-offset: 2px;
}

.crm-settings-admin-link-copy {
  display: grid;
  gap: 4px;
}

.crm-settings-admin-link-title {
  font-size: 13px;
  font-weight: 750;
}

.crm-settings-admin-link-detail {
  color: var(--settings-muted);
  font-size: 12px;
  line-height: 1.45;
}

.crm-settings-admin-link-arrow {
  flex: 0 0 auto;
  color: var(--settings-accent);
  font-size: 18px;
}

.admin-settings-home,
.admin-settings-leaf {
  --admin-ink: #263e42;
  --admin-muted: #6b7d7d;
  --admin-line: #d9e5df;
  --admin-paper: #f3f7f2;
  --admin-teal: #24685d;
  max-width: 1210px;
  margin: 0 auto;
  padding: 8px 0 42px;
  color: var(--admin-ink);
}

.admin-settings-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 25px;
  border: 1px solid #d3e2d9;
  border-radius: 14px;
  background: linear-gradient(110deg, #eaf2eb, #f4f6ef 72%);
}

.admin-settings-kicker {
  color: var(--admin-teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.admin-settings-hero h1,
.admin-settings-leaf h1 {
  margin: 5px 0 6px;
  color: var(--admin-ink);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.admin-settings-hero p,
.admin-settings-leaf > p {
  max-width: 610px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.55;
}

.admin-settings-search-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(340px, 42%);
  min-height: 43px;
  padding: 0 11px;
  border: 1px solid #ccdcd3;
  border-radius: 9px;
  background: #fff;
  color: #71817e;
  box-shadow: 0 3px 10px rgba(38, 62, 66, .04);
}

.admin-settings-search-wrap > span {
  color: var(--admin-teal);
  font-size: 22px;
  line-height: 1;
}

.admin-settings-search-wrap input,
.admin-settings-inline-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--admin-ink);
  font: inherit;
  font-size: 12px;
}

.admin-settings-search-wrap kbd {
  padding: 2px 6px;
  border: 1px solid #dce6e0;
  border-radius: 4px;
  color: #71817e;
  font: 10px ui-monospace, monospace;
}

.admin-settings-search-status {
  min-height: 17px;
  margin: -12px 0 10px 5px;
  color: var(--admin-muted);
  font-size: 11px;
}

.admin-settings-groups {
  display: grid;
  gap: 18px;
}

.admin-settings-group {
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fbfcf8;
}

.admin-settings-group-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 11px;
}

.admin-settings-index {
  color: #a6b7ad;
  font: 11px ui-monospace, monospace;
}

.admin-settings-group-head h2 {
  margin: 0;
  color: #31494a;
  font-size: 15px;
  letter-spacing: -.02em;
}

.admin-settings-group-count {
  margin-left: auto;
  color: #80908a;
  font-size: 10px;
}

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

.admin-settings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 63px;
  padding: 12px 14px;
  border: 1px solid #e0e9e2;
  border-radius: 8px;
  background: #fff;
  color: var(--admin-ink);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

.admin-settings-link:hover {
  transform: translateY(-1px);
  border-color: #adc8b8;
  background: #fafffa;
}

.admin-settings-link:focus-visible,
.admin-settings-home-link:focus-visible {
  outline: 3px solid #a9c9b8;
  outline-offset: 2px;
}

.admin-settings-link strong {
  display: block;
  font-size: 12px;
  font-weight: 750;
}

.admin-settings-link small {
  display: block;
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.35;
}

.admin-settings-arrow {
  flex: 0 0 auto;
  color: var(--admin-teal);
  font-size: 14px;
}

.admin-settings-notice {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 11px 14px;
  border-left: 2px solid #82aa97;
  background: #f4f7f1;
  color: var(--admin-muted);
  font-size: 11px;
}

.admin-settings-notice strong { color: #49675f; }
.admin-settings-group[hidden],
.admin-settings-link[hidden],
.admin-settings-quick-group[hidden] { display: none !important; }

.admin-settings-chrome {
  margin: 0 0 19px;
  padding: 12px 14px;
  border: 1px solid #dae5df;
  border-radius: 10px;
  background: #f5f8f4;
}

.admin-settings-chrome-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #87948e;
  font-size: 11px;
}

.admin-settings-home-link {
  color: var(--admin-teal);
  font-weight: 750;
  text-decoration: none;
}

.admin-settings-chrome-top strong {
  color: #354c4d;
  font-size: 11px;
}

.admin-settings-chrome-links {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.admin-settings-quick-group {
  position: relative;
}

.admin-settings-quick-group summary {
  padding: 6px 8px;
  border: 1px solid #dce6df;
  border-radius: 6px;
  background: #fff;
  color: #506965;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.admin-settings-quick-group summary::-webkit-details-marker { display: none; }
.admin-settings-quick-group[open] summary { border-color: #b8cfc1; color: var(--admin-teal); }
.admin-settings-quick-group > div {
  margin-top: 5px;
  display: grid;
  width: min(260px, 100%);
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(36, 57, 50, .12);
}

.admin-settings-link.is-compact {
  min-height: 0;
  padding: 9px;
  border: 0;
  border-radius: 5px;
}

.admin-settings-link.is-compact:hover { transform: none; background: #f2f7f2; }
.admin-settings-link.is-compact strong { font-size: 11px; }

.admin-settings-inline-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 6px 8px;
  border: 1px solid #dce6df;
  border-radius: 6px;
  background: #fff;
  color: #6e817b;
  font-size: 10px;
}

.admin-settings-inline-search input { width: 150px; font-size: 10px; }

.admin-settings-leaf {
  max-width: 1200px;
  padding-top: 3px;
}

.admin-settings-leaf h1 { margin-bottom: 6px; }
.admin-settings-leaf > p { margin-bottom: 17px; }
.admin-settings-card {
  padding: 19px;
  border: 1px solid #dce6df;
  border-radius: 11px;
  background: #fbfcf8;
}

.admin-settings-control-row,
.admin-settings-control-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e1e9e3;
}

.admin-settings-control-row strong,
.admin-settings-control-heading strong { font-size: 13px; }
.admin-settings-control-row p { margin: 4px 0 0; color: var(--admin-muted); font-size: 11px; }
.admin-settings-control-heading { padding: 15px 0 10px; border: 0; }
.admin-settings-control-heading span { color: var(--admin-muted); font-size: 11px; }
.admin-settings-user-list { overflow: hidden; border: 1px solid #dce6df; border-radius: 8px; background: #fff; }
.admin-settings-user-list label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid #e7eee9;
}
.admin-settings-user-list label:last-child { border-bottom: 0; }
.admin-settings-user-list strong,
.admin-settings-user-list small { display: block; }
.admin-settings-user-list strong { font-size: 12px; }
.admin-settings-user-list small { margin-top: 3px; color: var(--admin-muted); font-size: 10px; }
.admin-settings-user-toggle { display: flex; align-items: center; gap: 9px; color: var(--admin-muted); font-size: 11px; }
.admin-settings-user-toggle input { width: 16px; height: 16px; accent-color: var(--admin-teal); }
.admin-settings-error { padding: 12px; border: 1px solid #ead3c9; border-radius: 8px; background: #fbf0ea; color: #8a4d3c; font-size: 12px; }
.admin-settings-empty { padding: 20px 12px; color: var(--admin-muted); font-size: 12px; }
.admin-settings-skeleton { height: 13px; margin: 6px 0 10px; border-radius: 5px; background: #e5ede7; animation: admin-settings-pulse 1.1s ease-in-out infinite alternate; }
.admin-settings-skeleton.short { width: 58%; }
@keyframes admin-settings-pulse { to { opacity: .48; } }

@media (max-width: 760px) {
  .crm-settings {
    padding-top: 2px;
  }

  .crm-settings-heading {
    margin-bottom: 16px;
  }

  .crm-settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .crm-settings-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .crm-settings-nav-item {
    min-height: 64px;
    padding: 10px;
  }

  .crm-settings-nav-item.is-active {
    transform: none;
  }

  .crm-settings-admin-link {
    padding: 13px;
  }
  .admin-settings-hero { align-items: stretch; flex-direction: column; padding: 19px; }
  .admin-settings-search-wrap { width: 100%; }
  .admin-settings-grid { grid-template-columns: 1fr; }
  .admin-settings-group { padding: 12px; }
  .admin-settings-chrome-links { align-items: stretch; }
  .admin-settings-inline-search { width: 100%; margin-left: 0; }
  .admin-settings-inline-search input { width: auto; }
  .admin-settings-control-row,
  .admin-settings-control-heading { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-settings-nav-item {
    transition: none;
  }
  .admin-settings-link,
  .admin-settings-skeleton { animation: none; transition: none; }
}