.cnm-redesign {
  --app-bg: #f4f8f8;
  --app-bg-soft: #edf3f2;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fbfb;
  --app-line: #d9e4e5;
  --app-line-strong: #c7d4d6;
  --app-ink: #13252c;
  --app-ink-soft: #31464d;
  --app-muted: #63777f;
  --app-brand: #17323a;
  --app-brand-strong: #10242a;
  --app-accent: #2d6d63;
  --app-accent-soft: #e8f0ee;
  --app-warning: #b8772f;
  --app-warning-soft: #f7ede2;
  --app-danger: #bb604d;
  --app-danger-soft: #faece8;
  --app-success: #2c7a62;
  --app-success-soft: #e8f3ee;
  --app-shadow: 0 24px 56px rgba(19, 37, 44, 0.08);
  --app-shadow-soft: 0 12px 28px rgba(19, 37, 44, 0.05);
  --app-radius: 24px;
  --app-radius-sm: 16px;
}

body.cnm-redesign {
  background:
    radial-gradient(circle at top right, rgba(45, 109, 99, 0.08), transparent 24rem),
    linear-gradient(180deg, #fbfcfc 0%, var(--app-bg) 100%) !important;
  color: var(--app-ink) !important;
  font-family: "Inter", "Source Sans 3", system-ui, sans-serif !important;
}

body.cnm-redesign a {
  color: inherit;
}

body.cnm-redesign p,
body.cnm-redesign li,
body.cnm-redesign label,
body.cnm-redesign .subtitle,
body.cnm-redesign .page-subtitle,
body.cnm-redesign .form-hint,
body.cnm-redesign .help-text,
body.cnm-redesign .user-role,
body.cnm-redesign .muted,
body.cnm-redesign .label {
  color: var(--app-muted) !important;
}

body.cnm-redesign h1,
body.cnm-redesign h2,
body.cnm-redesign h3,
body.cnm-redesign .logo,
body.cnm-redesign .page-title,
body.cnm-redesign .card-title,
body.cnm-redesign .page-header h1,
body.cnm-redesign .stat-value,
body.cnm-redesign .value {
  color: var(--app-brand) !important;
  font-family: "Inter", "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
}

body.cnm-redesign .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-transform: none;
}

body.cnm-redesign .logo::before {
  content: "CNM";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, var(--app-brand) 0%, #284953 100%);
  color: #f7fbfb;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 24px rgba(23, 50, 58, 0.18);
}

body.cnm-redesign .header,
body.cnm-redesign .site-header,
body.cnm-redesign .nav,
body.cnm-redesign .banner {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--app-line) !important;
  box-shadow: 0 12px 30px rgba(19, 37, 44, 0.04);
  backdrop-filter: blur(16px);
}

body.cnm-redesign .container,
body.cnm-redesign .shell,
body.cnm-redesign .site-main {
  width: min(calc(100% - 2rem), 1320px);
}

body.cnm-redesign .card,
body.cnm-redesign .panel,
body.cnm-redesign .section,
body.cnm-redesign .endpoint,
body.cnm-redesign .highlight-box,
body.cnm-redesign .success-banner,
body.cnm-redesign .stat,
body.cnm-redesign .stat-card,
body.cnm-redesign .metric,
body.cnm-redesign .line-item,
body.cnm-redesign .payment-card,
body.cnm-redesign .client-card,
body.cnm-redesign .session-item,
body.cnm-redesign .list li,
body.cnm-redesign .empty-state,
body.cnm-redesign .event-item,
body.cnm-redesign .action {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

body.cnm-redesign .list li,
body.cnm-redesign .client-card,
body.cnm-redesign .session-item,
body.cnm-redesign .line-item,
body.cnm-redesign .payment-card,
body.cnm-redesign .action {
  border-radius: 18px !important;
}

body.cnm-redesign .highlight,
body.cnm-redesign .success-banner,
body.cnm-redesign .cta,
body.cnm-redesign .banner-copy {
  background: linear-gradient(180deg, var(--app-brand) 0%, #24434d 100%) !important;
  color: #f1f7f7 !important;
  border-color: rgba(23, 50, 58, 0.8) !important;
}

body.cnm-redesign .highlight *,
body.cnm-redesign .success-banner *,
body.cnm-redesign .cta *,
body.cnm-redesign .banner-copy * {
  color: inherit !important;
}

body.cnm-redesign .stat-card .value,
body.cnm-redesign .stat-value,
body.cnm-redesign .amount {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
}

body.cnm-redesign .pill,
body.cnm-redesign .role-badge,
body.cnm-redesign .badge,
body.cnm-redesign .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.72rem !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

body.cnm-redesign .pill,
body.cnm-redesign .role-badge,
body.cnm-redesign .badge-info,
body.cnm-redesign .badge-success,
body.cnm-redesign .status-chip {
  background: var(--app-accent-soft) !important;
  color: var(--app-accent) !important;
}

body.cnm-redesign .badge-warning,
body.cnm-redesign .alert-warning {
  background: var(--app-warning-soft) !important;
  color: var(--app-warning) !important;
  border-color: rgba(184, 119, 47, 0.22) !important;
}

body.cnm-redesign .badge-danger,
body.cnm-redesign .badge-urgent,
body.cnm-redesign .alert-error,
body.cnm-redesign .error {
  background: var(--app-danger-soft) !important;
  color: var(--app-danger) !important;
  border-color: rgba(187, 96, 77, 0.22) !important;
}

body.cnm-redesign .alert-success,
body.cnm-redesign .success {
  background: var(--app-success-soft) !important;
  color: var(--app-success) !important;
  border-color: rgba(44, 122, 98, 0.22) !important;
}

body.cnm-redesign .btn,
body.cnm-redesign .button,
body.cnm-redesign .btn-primary,
body.cnm-redesign .button-primary,
body.cnm-redesign button[type="submit"] {
  min-height: 3rem;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: linear-gradient(180deg, var(--app-brand) 0%, var(--app-brand-strong) 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(23, 50, 58, 0.16) !important;
}

body.cnm-redesign .btn-secondary,
body.cnm-redesign .button-secondary,
body.cnm-redesign .logout-btn,
body.cnm-redesign .nav-link,
body.cnm-redesign .forgot-link,
body.cnm-redesign .links a,
body.cnm-redesign .button-secondary {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--app-brand) !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: none !important;
}

body.cnm-redesign .logout-btn,
body.cnm-redesign .nav-link {
  border-radius: 14px !important;
}

body.cnm-redesign input,
body.cnm-redesign textarea,
body.cnm-redesign select,
body.cnm-redesign .form-input {
  border: 1px solid var(--app-line-strong) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--app-ink) !important;
  box-shadow: none !important;
}

body.cnm-redesign input:focus,
body.cnm-redesign textarea:focus,
body.cnm-redesign select:focus,
body.cnm-redesign .form-input:focus {
  outline: none !important;
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 4px rgba(45, 109, 99, 0.12) !important;
}

body.cnm-redesign .form-group,
body.cnm-redesign .meta-row,
body.cnm-redesign .deadline-item,
body.cnm-redesign .list-item,
body.cnm-redesign .suggestion-item,
body.cnm-redesign .search-result-item,
body.cnm-redesign .doc-item {
  border-color: var(--app-line) !important;
}

body.cnm-redesign .nav-links a,
body.cnm-redesign .site-nav a {
  color: var(--app-muted) !important;
  font-weight: 600;
}

body.cnm-redesign .nav-links a:hover,
body.cnm-redesign .nav-links a.active,
body.cnm-redesign .site-nav a:hover {
  color: var(--app-brand) !important;
}

body.cnm-redesign .client-card:hover,
body.cnm-redesign .button:hover,
body.cnm-redesign .btn:hover,
body.cnm-redesign .search-result-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(19, 37, 44, 0.09) !important;
}

body.cnm-redesign .checkbox-label input[type="checkbox"],
body.cnm-redesign .doc-checkbox input[type="checkbox"] {
  accent-color: var(--app-accent);
}

body.cnm-redesign .chat-log,
body.cnm-redesign .api-key-display {
  background: rgba(247, 250, 250, 0.9) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 18px !important;
}

body.cnm-redesign .chat-bubble {
  border-radius: 18px !important;
}

body.cnm-redesign .chat-bubble.outbound {
  background: linear-gradient(180deg, var(--app-brand) 0%, #24434d 100%) !important;
  color: #f3f8f8 !important;
}

body.cnm-redesign .chat-bubble.inbound {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--app-line) !important;
}

body.cnm-redesign .qr {
  border-radius: 20px !important;
  border: 1px solid var(--app-line) !important;
  background: #fff !important;
  box-shadow: var(--app-shadow-soft) !important;
}

body.cnm-auth-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

body.cnm-auth-surface .card {
  width: min(100%, 460px);
  padding: 2rem !important;
}

body.cnm-auth-surface .subtitle,
body.cnm-auth-surface .links {
  text-align: left !important;
}

body.cnm-product-surface .container,
body.cnm-product-surface .shell {
  margin-top: 1.5rem !important;
  margin-bottom: 3rem !important;
}

body.cnm-product-surface .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.cnm-product-surface .grid-3,
body.cnm-product-surface .stats-grid,
body.cnm-product-surface .meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.cnm-product-surface .grid,
body.cnm-product-surface .grid-2,
body.cnm-product-surface .dashboard-grid,
body.cnm-product-surface .pay-grid,
body.cnm-product-surface .hero,
body.cnm-product-surface .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.cnm-product-surface .panel-header,
body.cnm-product-surface .card-header,
body.cnm-product-surface .section-header {
  align-items: center;
  gap: 1rem;
}

body.cnm-product-surface .section-icon {
  background: var(--app-accent-soft) !important;
  color: var(--app-accent) !important;
  border-radius: 14px;
}

body.cnm-product-surface .empty-state-icon {
  background: var(--app-accent-soft) !important;
  color: var(--app-accent) !important;
  border-radius: 20px;
}

body.cnm-product-surface .deadline-item,
body.cnm-product-surface .list-item,
body.cnm-product-surface .suggestion-item,
body.cnm-product-surface .search-result-item,
body.cnm-product-surface .doc-item {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
}

body.cnm-doc-surface .container {
  max-width: 1080px !important;
}

body.cnm-doc-surface .section,
body.cnm-doc-surface .endpoint,
body.cnm-doc-surface .highlight-box {
  padding: 1.35rem !important;
}

@media (max-width: 1080px) {
  body.cnm-product-surface .grid-4,
  body.cnm-product-surface .grid-3,
  body.cnm-product-surface .stats-grid,
  body.cnm-product-surface .meta-grid,
  body.cnm-product-surface .grid,
  body.cnm-product-surface .grid-2,
  body.cnm-product-surface .dashboard-grid,
  body.cnm-product-surface .pay-grid,
  body.cnm-product-surface .hero,
  body.cnm-product-surface .form-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 760px) {
  body.cnm-redesign .header,
  body.cnm-redesign .site-header {
    padding: 1rem !important;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  body.cnm-redesign .container,
  body.cnm-redesign .shell,
  body.cnm-redesign .site-main {
    width: min(calc(100% - 1rem), 100%) !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  body.cnm-redesign .card,
  body.cnm-redesign .panel,
  body.cnm-redesign .section,
  body.cnm-redesign .endpoint,
  body.cnm-redesign .highlight-box,
  body.cnm-redesign .success-banner,
  body.cnm-redesign .stat,
  body.cnm-redesign .stat-card,
  body.cnm-redesign .metric,
  body.cnm-redesign .line-item,
  body.cnm-redesign .payment-card,
  body.cnm-redesign .client-card,
  body.cnm-redesign .session-item,
  body.cnm-redesign .list li,
  body.cnm-redesign .empty-state,
  body.cnm-redesign .event-item,
  body.cnm-redesign .action {
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  body.cnm-product-surface .grid-4,
  body.cnm-product-surface .grid-3,
  body.cnm-product-surface .stats-grid,
  body.cnm-product-surface .meta-grid,
  body.cnm-product-surface .grid,
  body.cnm-product-surface .grid-2,
  body.cnm-product-surface .dashboard-grid,
  body.cnm-product-surface .pay-grid,
  body.cnm-product-surface .hero,
  body.cnm-product-surface .form-grid {
    grid-template-columns: 1fr !important;
  }

  body.cnm-redesign .user-nav,
  body.cnm-redesign .nav-links,
  body.cnm-redesign .banner-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.cnm-auth-surface {
    padding: 1rem;
  }

  body.cnm-auth-surface .card {
    padding: 1.35rem !important;
  }
}