/* UI unification v1. Opt in one module at a time with .cf-unified. */
.cf-unified {
  --cf-primary: #4f46e5;
  --cf-primary-pressed: #4338ca;
  --cf-primary-soft: #eef2ff;
  --cf-primary-border: #c7d2fe;
  --cf-page: #f7f8fc;
  --cf-surface: #fff;
  --cf-text: #111827;
  --cf-muted: #5b6473;
  --cf-border: #dbe1ec;
  --cf-radius: 12px;
  --cf-card-radius: 16px;
  --cf-target: 44px;
  --cf-space-1: 4px;
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-4: 16px;
  --cf-space-6: 24px;
  color: var(--cf-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
}

.cf-unified :where(button, input, select, textarea) { font-family: inherit; }
.cf-unified :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 2px;
}
.cf-unified :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-color: var(--cf-border);
  border-radius: var(--cf-radius);
  font-size: 16px;
}
.cf-unified :where(.modal-content, .cf-card) { border-radius: var(--cf-card-radius); }
.cf-unified :where(.cf-nav-pair .cf-help-button, .cf-nav-pair .cf-home-button,
                     .module-modal-actions .module-home-btn,
                     .module-modal-actions .module-guide-button,
                     .module-modal-actions .module-close-btn) {
  box-sizing: border-box;
  min-height: var(--cf-target) !important;
  height: var(--cf-target) !important;
  border-radius: var(--cf-radius) !important;
  box-shadow: none !important;
}
.cf-unified :where(.module-modal-actions .module-home-btn, .cf-nav-pair .cf-home-button) {
  background: var(--cf-primary-soft) !important;
  color: var(--cf-primary-pressed) !important;
  border: 1px solid var(--cf-primary-border) !important;
}
.cf-unified :where(.module-modal-actions .module-guide-button, .cf-nav-pair .cf-help-button) {
  background: var(--cf-surface) !important;
  color: var(--cf-primary-pressed) !important;
  border: 1px solid var(--cf-primary-border) !important;
}
.cf-ui .cf-unified .module-modal-actions > button,
.cf-ui .cf-unified .cf-nav-pair > button {
  box-sizing: border-box;
  min-height: var(--cf-target) !important;
  height: var(--cf-target) !important;
}
.cf-unified :where(.cf-primary-action) {
  min-height: var(--cf-target);
  border-radius: var(--cf-radius);
  background: var(--cf-primary);
  color: #fff;
  box-shadow: none;
}
.cf-unified :where(.cf-secondary-action) {
  min-height: var(--cf-target);
  border: 1px solid var(--cf-primary-border);
  border-radius: var(--cf-radius);
  background: var(--cf-surface);
  color: var(--cf-primary-pressed);
  box-shadow: none;
}
.cf-unified :where(.cf-status) { color: var(--cf-muted); font-size: 13px; }
.cf-unified :where(.cf-list-row) { min-height: var(--cf-target); border-bottom: 1px solid var(--cf-border); }
.cf-unified :where(.cf-danger-action) { color: #b91c1c; }