/* =========================================================================
   CANISEGUROS Admin — MODERN DESIGN REFRESH (2026)
   ─────────────────────────────────────────────────────────────────────────
   Layered ON TOP of admin.css. New token system + component refinements
   that bring the admin to a Linear / Vercel / Stripe / Cal.com level
   of polish without breaking backward compatibility.

   All existing cs-* classes KEEP working — these rules just refine.
   See admin/DESIGN-REFRESH.md for the full spec.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --- Modern surfaces --- */
  --color-bg-base: #fafafa;
  --color-bg-surface: #ffffff;
  --color-bg-subdued: #f4f4f5;
  --color-bg-elevated: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);

  /* --- Borders --- */
  --color-border-subtle: #f0f0f0;
  --color-border-default: #e4e4e7;
  --color-border-strong: #d4d4d8;

  /* --- Text --- */
  --color-text-primary: #18181b;
  --color-text-secondary: #52525b;
  --color-text-tertiary: #a1a1aa;
  --color-text-disabled: #d4d4d8;
  --color-text-inverse: #ffffff;

  /* --- Brand --- */
  --color-brand: #18181b;
  --color-brand-hover: #27272a;
  --color-accent: #b45309;
  --color-accent-soft: #fef3c7;

  /* --- Semantic --- */
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-info: #2563eb;
  --color-info-soft: #dbeafe;
  --color-warning: #ea580c;
  --color-warning-soft: #ffedd5;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;

  /* --- B2C/B2B segments --- */
  --color-b2c: #15803d;
  --color-b2c-soft: #f0fdf4;
  --color-b2b: #1d4ed8;
  --color-b2b-soft: #eff6ff;

  /* --- Spacing 4px base --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px;

  /* --- Radii --- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
  --font-xs: 11px; --font-sm: 12px; --font-base: 13px; --font-md: 14px;
  --font-lg: 16px; --font-xl: 18px; --font-2xl: 22px; --font-3xl: 28px; --font-4xl: 36px;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --line-tight: 1.2; --line-snug: 1.4; --line-normal: 1.55; --line-relaxed: 1.7;

  /* --- Transitions --- */
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index modern aliases (legacy --z-* still present) --- */
  --z-overlay: 800; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200;
}

/* =========================================================================
   DARK MODE — manual toggle via [data-theme="dark"]
   ========================================================================= */
[data-theme="dark"] {
  --color-bg-base: #0a0a0a;
  --color-bg-surface: #18181b;
  --color-bg-subdued: #27272a;
  --color-bg-elevated: #1f1f23;
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-border-subtle: #27272a;
  --color-border-default: #3f3f46;
  --color-border-strong: #52525b;
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary: #71717a;
  --color-text-disabled: #52525b;
  --color-text-inverse: #18181b;
  --color-brand: #fafafa;
  --color-brand-hover: #e4e4e7;
  --color-accent: #f59e0b;
  --color-accent-soft: rgba(245, 158, 11, 0.14);
  --color-success-soft: rgba(22, 163, 74, 0.18);
  --color-info-soft: rgba(37, 99, 235, 0.18);
  --color-warning-soft: rgba(234, 88, 12, 0.18);
  --color-danger-soft: rgba(220, 38, 38, 0.18);
  --color-b2c-soft: rgba(21, 128, 61, 0.18);
  --color-b2b-soft: rgba(29, 78, 216, 0.18);

  /* Map legacy --cs-* tokens to dark equivalents so old classes adapt */
  --cs-bg: var(--color-bg-base);
  --cs-surface: var(--color-bg-surface);
  --cs-surface-alt: var(--color-bg-subdued);
  --cs-side: #0a0a0a;
  --cs-side-fg: #e4e4e7;
  --cs-side-active: #27272a;
  --cs-text: var(--color-text-primary);
  --cs-text-muted: var(--color-text-secondary);
  --cs-text-subdued: var(--color-text-tertiary);
  --cs-border: var(--color-border-default);
  --cs-border-strong: var(--color-border-strong);
  --cs-accent: var(--color-accent);
  --cs-accent-hover: #d97706;
}

/* System dark mode (only when no manual override) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #0a0a0a;
    --color-bg-surface: #18181b;
    --color-bg-subdued: #27272a;
    --color-bg-elevated: #1f1f23;
    --color-bg-overlay: rgba(0, 0, 0, 0.6);
    --color-border-subtle: #27272a;
    --color-border-default: #3f3f46;
    --color-border-strong: #52525b;
    --color-text-primary: #fafafa;
    --color-text-secondary: #a1a1aa;
    --color-text-tertiary: #71717a;
    --color-text-disabled: #52525b;
    --color-text-inverse: #18181b;
    --color-brand: #fafafa;
    --color-brand-hover: #e4e4e7;
    --color-accent: #f59e0b;
    --color-accent-soft: rgba(245, 158, 11, 0.14);
    --color-success-soft: rgba(22, 163, 74, 0.18);
    --color-info-soft: rgba(37, 99, 235, 0.18);
    --color-warning-soft: rgba(234, 88, 12, 0.18);
    --color-danger-soft: rgba(220, 38, 38, 0.18);
    --color-b2c-soft: rgba(21, 128, 61, 0.18);
    --color-b2b-soft: rgba(29, 78, 216, 0.18);
  }
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-size: var(--font-md);
  line-height: var(--line-normal);
  transition: background-color var(--transition-base), color var(--transition-base);
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: var(--color-accent-soft); color: var(--color-accent); }

/* =========================================================================
   SIDEBAR — light, modern (overrides legacy dark sidebar)
   ========================================================================= */
.cs-sidebar {
  background: var(--cs-side, #1a1c1d);
  color: var(--cs-side-fg, #e3e5e7);
  border-right: 1px solid #2c2e30;
  padding: 0;
  width: 250px;
}
.cs-sidebar.is-collapsed { width: 64px; }
.cs-sidebar__brand {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-3);
  gap: var(--space-2);
}
.cs-sidebar__brand-link { color: var(--color-text-primary); }
.cs-sidebar__brand-name { font-weight: var(--weight-bold); letter-spacing: -0.01em; font-size: var(--font-md); }
.cs-sidebar__brand-sub { color: var(--color-text-tertiary); font-size: 10px; letter-spacing: 0.08em; }
.cs-sidebar__collapse {
  background: transparent;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}
.cs-sidebar__collapse:hover { background: var(--color-bg-subdued); color: var(--color-text-primary); }

.cs-sidebar__nav { gap: 1px; padding: var(--space-2) 0; }
.cs-sidebar__nav::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 3px; }

/* Sidebar nav-item: konsolidiert mit admin.css — kein Pill mehr, einheitlich */
.cs-nav-item {
  color: var(--cs-side-fg, #e3e5e7);
  font-size: 13.5px;
  font-weight: 400;
  padding: 9px 16px;
  margin: 0;
  border-radius: 0;
  border-left: 3px solid transparent !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', Roboto, sans-serif;
}
.cs-nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cs-nav-item.active,
.cs-nav-item.cs-nav-item--active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 500;
  border-left-color: var(--cs-accent, #008060) !important;
}
.cs-nav-item.active-branch { background: rgba(255,255,255,0.04); color: #fff; }
.cs-nav-icon { color: inherit; width: 22px; flex-shrink: 0; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.cs-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sub-Items: dezenter, nahtlos in dunkles Sidebar-Theme integriert */
.cs-nav-sub {
  position: relative;
  margin: 0;
  padding: 0;
  border-left: none;
  background: rgba(0,0,0,0.15);
}
.cs-nav-sub a {
  padding: 6px 16px 6px 38px !important;
  margin: 0;
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.72);
  opacity: 1;
  border-radius: 0;
  border-left: 3px solid transparent !important;
  transition: background 0.12s, color 0.12s;
  display: block;
  text-decoration: none;
}
.cs-nav-sub a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cs-nav-sub a.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 500;
  border-left-color: var(--cs-accent, #008060) !important;
}

.cs-nav-section {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  padding: var(--space-5) var(--space-4) var(--space-2);
  border-top: none;
  margin-top: var(--space-2);
}
.cs-nav-section--b2c { color: var(--color-b2c); }
.cs-nav-section--b2b { color: var(--color-b2b); }

.cs-nav-item--b2c.active,
.cs-nav-item--b2c.cs-nav-item--active { background: var(--color-b2c); color: #fff; }
.cs-nav-item--b2b.active,
.cs-nav-item--b2b.cs-nav-item--active { background: var(--color-b2b); color: #fff; }
.cs-nav-item--b2c.active-branch { background: var(--color-b2c-soft); color: var(--color-b2c); }
.cs-nav-item--b2b.active-branch { background: var(--color-b2b-soft); color: var(--color-b2b); }

.cs-sidebar__user { border-top: 1px solid var(--color-border-subtle); padding: var(--space-2); }
.cs-user-avatar {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  width: 28px; height: 28px;
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-user-meta { color: var(--color-text-tertiary); }
.cs-user-logout button {
  background: transparent;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}
.cs-user-logout button:hover {
  background: var(--color-bg-subdued);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* Nav badge */
.cs-nav-badge {
  background: var(--color-bg-subdued);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  font-size: 10px;
}
.cs-nav-item.active .cs-nav-badge,
.cs-nav-item.cs-nav-item--active .cs-nav-badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text-inverse);
}

/* Adjust main width to new sidebar */
.cs-main { max-width: calc(100vw - 248px); padding: 0 !important; }
@media (min-width: 769px) {
  body.cs-sidebar-collapsed .cs-main { max-width: calc(100vw - 64px); }
}

/* =========================================================================
   TOPBAR
   ========================================================================= */
.cs-topbar {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-6);
  gap: var(--space-3);
}
.cs-topbar-search {
  background: var(--color-bg-subdued);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-md);
  transition: all var(--transition-base);
}
.cs-topbar-search:hover {
  background: var(--color-bg-base);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}
.cs-topbar-search kbd {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-tertiary);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  padding: 1px 6px;
  font-size: 10px;
}

.cs-theme-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 16px;
  transition: all var(--transition-base);
}
.cs-theme-toggle:hover { background: var(--color-bg-subdued); color: var(--color-text-primary); }

/* Generic page content padding */
.cs-main > *:not(.cs-topbar):not(.cs-flash) { padding-left: var(--space-7); padding-right: var(--space-7); }
.cs-main > .cs-flash { margin: var(--space-4) var(--space-7); padding: var(--space-3) var(--space-4); }
@media (max-width: 768px) {
  .cs-main > *:not(.cs-topbar):not(.cs-flash) { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cs-main > .cs-flash { margin: var(--space-3) var(--space-4); }
}

/* =========================================================================
   PAGE HEADER + TITLES
   ========================================================================= */
h1.cs-h1 {
  font-size: var(--font-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--line-tight);
  margin: var(--space-6) 0 var(--space-4);
  color: var(--color-text-primary);
}
h2.cs-h2 {
  font-size: var(--font-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin: var(--space-6) 0 var(--space-3);
}

.cs-page__title { font-size: var(--font-3xl); letter-spacing: -0.02em; font-weight: var(--weight-semibold); }
.cs-page__subtitle { font-size: var(--font-md); color: var(--color-text-secondary); }
.cs-page__header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-6);
}

.cs-page-header {
  padding: var(--space-7) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); margin-bottom: var(--space-6);
}
.cs-page-title {
  font-size: var(--font-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--line-tight);
  margin: 0;
}
.cs-page-subtitle { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-md); }

/* =========================================================================
   CARDS
   ========================================================================= */
.cs-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.cs-card:hover { box-shadow: var(--shadow-sm); }
.cs-card__header {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.cs-card__title { font-size: var(--font-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.cs-card__subtitle { font-size: var(--font-sm); color: var(--color-text-secondary); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.cs-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-md); font-weight: var(--weight-medium);
  font-family: inherit; line-height: var(--line-tight);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap; user-select: none; text-decoration: none;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-xs);
}
.cs-btn:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.cs-btn:active { transform: translateY(0.5px); }
.cs-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cs-btn[disabled], .cs-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.cs-btn--primary {
  background: var(--color-brand); color: var(--color-text-inverse); border-color: var(--color-brand);
}
.cs-btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }

.cs-btn-secondary,
.cs-btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.cs-btn-secondary:hover,
.cs-btn--secondary:hover { background: var(--color-bg-subdued); }

.cs-btn-danger,
.cs-btn--danger {
  background: var(--color-danger); color: #fff; border-color: var(--color-danger);
}
.cs-btn-danger:hover,
.cs-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

.cs-btn--ghost {
  background: transparent; color: var(--color-text-secondary);
  border-color: transparent; box-shadow: none;
}
.cs-btn--ghost:hover { background: var(--color-bg-subdued); color: var(--color-text-primary); }

.cs-btn--plain {
  background: transparent; color: var(--color-accent);
  border-color: transparent; box-shadow: none;
  padding: var(--space-1) var(--space-2);
}
.cs-btn--plain:hover { background: var(--color-accent-soft); color: var(--color-accent); }

.cs-btn-sm,
.cs-btn--small { padding: var(--space-1) var(--space-3); font-size: var(--font-sm); }
.cs-btn--large { padding: var(--space-3) var(--space-5); font-size: var(--font-lg); }
.cs-btn--icon {
  padding: var(--space-2); width: 36px; height: 36px;
  aspect-ratio: 1; justify-content: center;
}

/* =========================================================================
   FORMS
   ========================================================================= */
.cs-input,
.cs-select,
.cs-textarea,
.cs-form-row input[type=text],
.cs-form-row input[type=email],
.cs-form-row input[type=password],
.cs-form-row input[type=number],
.cs-form-row input[type=url],
.cs-form-row input[type=tel],
.cs-form-row input[type=date],
.cs-form-row input[type=datetime-local],
.cs-form-row select,
.cs-form-row textarea,
.cs-form-field input[type=text],
.cs-form-field input[type=email],
.cs-form-field input[type=password],
.cs-form-field input[type=number],
.cs-form-field input[type=url],
.cs-form-field input[type=tel],
.cs-form-field input[type=date],
.cs-form-field input[type=datetime-local],
.cs-form-field select,
.cs-form-field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-md);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: var(--line-snug);
}
.cs-input:hover, .cs-select:hover, .cs-textarea:hover,
.cs-form-row input:hover, .cs-form-row select:hover, .cs-form-row textarea:hover,
.cs-form-field input:hover, .cs-form-field select:hover, .cs-form-field textarea:hover {
  border-color: var(--color-border-strong);
}
.cs-input:focus, .cs-select:focus, .cs-textarea:focus,
.cs-form-row input:focus, .cs-form-row select:focus, .cs-form-row textarea:focus,
.cs-form-field input:focus, .cs-form-field select:focus, .cs-form-field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .cs-input:focus,
[data-theme="dark"] .cs-form-row input:focus,
[data-theme="dark"] .cs-form-field input:focus,
[data-theme="dark"] .cs-form-row select:focus,
[data-theme="dark"] .cs-form-field select:focus,
[data-theme="dark"] .cs-form-row textarea:focus,
[data-theme="dark"] .cs-form-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.cs-input::placeholder, .cs-textarea::placeholder,
.cs-form-row input::placeholder, .cs-form-row textarea::placeholder { color: var(--color-text-tertiary); }

.cs-label,
.cs-form-row label,
.cs-form-field > label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.cs-help, .cs-help-text, .cs-form-help {
  font-size: var(--font-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

/* =========================================================================
   TABLES
   ========================================================================= */
table.cs-table {
  width: 100%;
  background: var(--color-bg-surface);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
table.cs-table thead { background: var(--color-bg-subdued); }
table.cs-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-subdued);
}
table.cs-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-md);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
table.cs-table tbody tr { transition: background var(--transition-fast); }
table.cs-table tbody tr:hover td { background: var(--color-bg-subdued); }
table.cs-table tbody tr:last-child td { border-bottom: none; }
table.cs-table a { color: var(--color-text-primary); text-decoration: none; font-weight: var(--weight-medium); }
table.cs-table a:hover { color: var(--color-accent); }
.cs-table-wrap {
  border-color: var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

/* =========================================================================
   BADGES
   ========================================================================= */
.cs-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  line-height: var(--line-tight);
  letter-spacing: 0;
  text-transform: none;
}
.cs-badge--gray   { background: var(--color-bg-subdued); color: var(--color-text-secondary); }
.cs-badge--green  { background: var(--color-success-soft); color: var(--color-success); }
.cs-badge--blue   { background: var(--color-info-soft); color: var(--color-info); }
.cs-badge--yellow { background: var(--color-warning-soft); color: var(--color-warning); }
.cs-badge--orange { background: var(--color-warning-soft); color: var(--color-warning); }
.cs-badge--red    { background: var(--color-danger-soft); color: var(--color-danger); }
.cs-badge--purple { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.cs-badge--accent { background: var(--color-accent-soft); color: var(--color-accent); }
.cs-badge--b2c    { background: var(--color-b2c-soft); color: var(--color-b2c); }
.cs-badge--b2b    { background: var(--color-b2b-soft); color: var(--color-b2b); }

/* Map legacy named badges to refined tokens */
.cs-badge-new, .cs-badge-approved, .cs-badge-published, .cs-badge-active, .cs-badge-sent, .cs-badge-paid {
  background: var(--color-success-soft); color: var(--color-success);
}
.cs-badge-in_review, .cs-badge-pending, .cs-badge-queued, .cs-badge-scheduled, .cs-badge-partially_sent {
  background: var(--color-warning-soft); color: var(--color-warning);
}
.cs-badge-replied, .cs-badge-sending {
  background: var(--color-info-soft); color: var(--color-info);
}
.cs-badge-rejected, .cs-badge-blocked, .cs-badge-failed, .cs-badge-bounced {
  background: var(--color-danger-soft); color: var(--color-danger);
}
.cs-badge-closed, .cs-badge-onhold, .cs-badge-disabled, .cs-badge-draft, .cs-badge-archived, .cs-badge-refunded {
  background: var(--color-bg-subdued); color: var(--color-text-secondary);
}

/* =========================================================================
   STATUS chips
   ========================================================================= */
.cs-status { font-size: var(--font-xs); border-radius: var(--radius-full); padding: 2px var(--space-2); font-weight: var(--weight-medium); }
.cs-status-connected    { background: var(--color-success-soft); color: var(--color-success); }
.cs-status-unconfigured { background: var(--color-bg-subdued); color: var(--color-text-secondary); }
.cs-status-error        { background: var(--color-danger-soft); color: var(--color-danger); }
.cs-status-testing      { background: var(--color-warning-soft); color: var(--color-warning); }
.cs-status-disabled     { background: var(--color-bg-subdued); color: var(--color-text-tertiary); }

/* =========================================================================
   KPI / STAT TILES
   ========================================================================= */
.cs-stat,
.cs-kpi {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.cs-stat:hover, .cs-kpi:hover {
  box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--color-border-strong);
}
.cs-stat .label,
.cs-kpi__label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.cs-stat .value,
.cs-kpi__value {
  font-size: var(--font-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--line-tight);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.cs-stat .sub,
.cs-kpi__sub { font-size: var(--font-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }
.cs-kpi__delta { font-size: var(--font-sm); margin-top: var(--space-1); font-weight: var(--weight-medium); }
.cs-kpi__delta--up   { color: var(--color-success); }
.cs-kpi__delta--down { color: var(--color-danger); }
.cs-kpi--b2c { border-top: 2px solid var(--color-b2c); }
.cs-kpi--b2b { border-top: 2px solid var(--color-b2b); }

/* =========================================================================
   TABS
   ========================================================================= */
.cs-tabs {
  display: flex; gap: var(--space-1);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
  margin-bottom: var(--space-5);
}
.cs-tabs a,
.cs-tab,
.cs-tabs__item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
}
.cs-tabs a:hover, .cs-tab:hover, .cs-tabs__item:hover { color: var(--color-text-primary); }
.cs-tabs a.active,
.cs-tab--active,
.cs-tabs__item.is-active,
.cs-tabs__item.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-brand);
  font-weight: var(--weight-semibold);
}
.cs-tabs__count { background: var(--color-bg-subdued); color: var(--color-text-secondary); border-radius: var(--radius-full); }
.cs-tabs__item.is-active .cs-tabs__count,
.cs-tabs__item.active .cs-tabs__count { background: var(--color-accent-soft); color: var(--color-accent); }

/* =========================================================================
   EMPTY STATES
   ========================================================================= */
.cs-empty,
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: var(--color-bg-surface);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
}
.cs-empty .cs-empty-icon,
.empty-state-icon,
.cs-empty__icon {
  font-size: 48px; margin-bottom: var(--space-4); opacity: 0.4;
}
.cs-empty .cs-empty-title,
.empty-state-headline,
.cs-empty__title {
  font-size: var(--font-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}
.empty-state-desc,
.cs-empty__desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  max-width: 420px; margin-inline: auto;
  font-size: var(--font-md);
}
.empty-state-actions,
.cs-empty .cs-empty-actions,
.cs-empty__actions {
  margin-top: var(--space-5);
  display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap;
}

/* =========================================================================
   LOADING — SKELETON
   ========================================================================= */
@keyframes cs-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.cs-skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-subdued) 25%,
    var(--color-bg-base) 50%,
    var(--color-bg-subdued) 75%);
  background-size: 200% 100%;
  animation: cs-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.cs-skeleton--line   { height: 12px; margin: var(--space-2) 0; }
.cs-skeleton--title  { height: 24px; width: 40%; }
.cs-skeleton--card   { height: 120px; border-radius: var(--radius-lg); }
.cs-skeleton--avatar { width: 36px; height: 36px; border-radius: var(--radius-full); }

/* =========================================================================
   MODAL / DRAWER
   ========================================================================= */
.cs-modal-bg {
  background: var(--color-bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  animation: cs-fade-in var(--transition-base);
}
.cs-modal {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  animation: cs-scale-in var(--transition-slow);
}
.cs-modal-h {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}
.cs-modal-x { color: var(--color-text-tertiary); transition: color var(--transition-base); }
.cs-modal-x:hover { color: var(--color-text-primary); }

.cs-modal-overlay {
  position: fixed; inset: 0;
  background: var(--color-bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  animation: cs-fade-in var(--transition-base);
}
@keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-scale-in { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cs-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cs-drawer {
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-xl);
  border-left: 1px solid var(--color-border-default);
}
.cs-drawer__header {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-5);
}
.cs-drawer__title { font-size: var(--font-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.cs-drawer__footer { border-top: 1px solid var(--color-border-subtle); padding: var(--space-4) var(--space-5); }
.cs-drawer__body { padding: var(--space-5); }
.cs-drawer-bg { background: var(--color-bg-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* =========================================================================
   TOASTS
   ========================================================================= */
.cs-toast-stack {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.cs-toast {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  min-width: 280px;
  pointer-events: auto;
  color: var(--color-text-primary);
  font-size: var(--font-md);
  animation: cs-slide-in-right var(--transition-base);
}
.cs-toast--error   { border-left-color: var(--color-danger); }
.cs-toast--warning { border-left-color: var(--color-warning); }
.cs-toast--info    { border-left-color: var(--color-info); }

/* Flash banners */
.cs-flash {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
}
.cs-flash-success, .cs-flash--success { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(22,163,74,0.18); }
.cs-flash-error,   .cs-flash--error   { background: var(--color-danger-soft);  color: var(--color-danger);  border-color: rgba(220,38,38,0.18); }
.cs-flash-info,    .cs-flash--info    { background: var(--color-info-soft);    color: var(--color-info);    border-color: rgba(37,99,235,0.18); }
.cs-flash--warning                    { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(234,88,12,0.18); }

.cs-banner {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border: 1px solid rgba(234,88,12,0.18);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

/* =========================================================================
   TILES
   ========================================================================= */
.cs-tile {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  box-shadow: var(--shadow-xs);
}
.cs-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--color-border-strong); }
.cs-tile .icon { font-size: 28px; }
.cs-tile .title { font-weight: var(--weight-semibold); font-size: var(--font-md); color: var(--color-text-primary); }
.cs-tile .meta { font-size: var(--font-sm); color: var(--color-text-secondary); }

/* Settings sidebar */
.cs-settings-side {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.cs-settings-side-h {
  color: var(--color-text-tertiary);
  font-size: var(--font-xs);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
}
.cs-settings-side nav a {
  font-size: var(--font-md);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-1);
  transition: all var(--transition-base);
}
.cs-settings-side nav a:hover { background: var(--color-bg-subdued); color: var(--color-text-primary); }
.cs-settings-side nav a.active {
  background: var(--color-bg-subdued);
  color: var(--color-text-primary);
  border-left: none;
  padding-left: var(--space-4);
  font-weight: var(--weight-semibold);
}

/* =========================================================================
   SEARCH PALETTE (Cmd+K)
   ========================================================================= */
.search-palette-bg { background: var(--color-bg-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.search-palette-box {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  margin-top: 96px;
}
.search-palette-input {
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-4) var(--space-5);
}
.search-palette-input::placeholder { color: var(--color-text-tertiary); }
.search-palette-foot {
  background: var(--color-bg-subdued);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-tertiary);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.search-palette-group { color: var(--color-text-tertiary); font-size: 10px; letter-spacing: 0.08em; }
.search-palette-row { border-radius: var(--radius-sm); margin: 0 var(--space-2); }
.search-palette-row.active,
.search-palette-row:hover { background: var(--color-bg-subdued); }
.search-palette-title { color: var(--color-text-primary); font-size: var(--font-md); }
.search-palette-sub { color: var(--color-text-tertiary); }

/* =========================================================================
   PICKER + DROPZONE
   ========================================================================= */
.cs-picker-input {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}
.cs-picker-input:focus {
  outline: none; border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.cs-picker-dropdown {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
}
.cs-picker-row.active,
.cs-picker-row:hover { background: var(--color-bg-subdued); }
.cs-picker-chip {
  background: var(--color-bg-subdued);
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
}
.dropzone {
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  transition: all var(--transition-base);
}
.dropzone.drag {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.dropzone-text { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.dropzone-sub  { color: var(--color-text-tertiary); }

/* =========================================================================
   CHIPS / TIMELINE / MISC
   ========================================================================= */
.cs-chip {
  background: var(--color-bg-subdued);
  color: var(--color-text-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-3);
}
.cs-zone-pill { background: var(--color-bg-subdued); color: var(--color-text-secondary); border-radius: var(--radius-full); }
.cs-progress { background: var(--color-bg-subdued); border-radius: var(--radius-full); height: 6px; }
.cs-progress > div { background: var(--color-brand); border-radius: var(--radius-full); transition: width var(--transition-slow); }
.cs-timeline li.active { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.cs-timeline li.active::before { background: var(--color-brand); }

.cs-bulk-bar {
  background: var(--color-text-primary);
  color: var(--color-bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.cs-bulk-bar .cs-btn {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-bg-surface);
}

.cs-filter-bar {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.cs-filter-active { background: var(--color-accent-soft); color: var(--color-accent); border-radius: var(--radius-full); }

.cs-login {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
}
.cs-sticky-actions {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-default);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}
.cs-spinner { border-color: var(--color-border-default); border-top-color: var(--color-brand); }
.cs-toggle .slider { background: var(--color-border-strong); }
.cs-toggle input:checked + .slider { background: var(--color-brand); }

.cs-seg-badge--b2c { background: var(--color-b2c-soft); color: var(--color-b2c); border-color: rgba(21,128,61,0.18); }
.cs-seg-badge--b2b { background: var(--color-b2b-soft); color: var(--color-b2b); border-color: rgba(29,78,216,0.18); }

/* =========================================================================
   PRINT
   ========================================================================= */
@media print {
  .cs-sidebar, .cs-topbar,
  .cs-page-header__actions, .cs-page__actions,
  .cs-sticky-actions, .cs-bulk-bar { display: none !important; }
  body { background: white !important; color: black !important; }
  .cs-card, .cs-stat, .cs-kpi,
  table.cs-table, .cs-table-wrap { box-shadow: none !important; border: 1px solid #ddd !important; }
  .cs-main { max-width: 100% !important; padding: 0 !important; }
}

/* =========================================================================
   DARK MODE — surface fixes for legacy hard-coded colours
   ========================================================================= */
[data-theme="dark"] body { background: var(--color-bg-base); color: var(--color-text-primary); }
[data-theme="dark"] .cs-sidebar { background: var(--color-bg-surface); border-right-color: var(--color-border-default); color: var(--color-text-primary); }
[data-theme="dark"] .cs-sidebar__brand { border-bottom-color: var(--color-border-subtle); }
[data-theme="dark"] .cs-topbar { background: var(--color-bg-surface); border-bottom-color: var(--color-border-subtle); }
[data-theme="dark"] .cs-card,
[data-theme="dark"] .cs-stat,
[data-theme="dark"] .cs-kpi,
[data-theme="dark"] .cs-tile,
[data-theme="dark"] .cs-settings-side,
[data-theme="dark"] table.cs-table,
[data-theme="dark"] .cs-table-wrap,
[data-theme="dark"] .cs-modal,
[data-theme="dark"] .cs-drawer,
[data-theme="dark"] .cs-toast,
[data-theme="dark"] .cs-filter-bar,
[data-theme="dark"] .cs-login,
[data-theme="dark"] .search-palette-box,
[data-theme="dark"] .cs-picker-dropdown {
  background: var(--color-bg-surface);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
[data-theme="dark"] table.cs-table thead,
[data-theme="dark"] table.cs-table th { background: var(--color-bg-subdued); color: var(--color-text-secondary); }
[data-theme="dark"] table.cs-table td { color: var(--color-text-primary); border-bottom-color: var(--color-border-subtle); }
[data-theme="dark"] table.cs-table tbody tr:hover td { background: var(--color-bg-subdued); }
[data-theme="dark"] .cs-input,
[data-theme="dark"] .cs-select,
[data-theme="dark"] .cs-textarea,
[data-theme="dark"] .cs-form-row input,
[data-theme="dark"] .cs-form-row select,
[data-theme="dark"] .cs-form-row textarea,
[data-theme="dark"] .cs-form-field input,
[data-theme="dark"] .cs-form-field select,
[data-theme="dark"] .cs-form-field textarea,
[data-theme="dark"] .cs-picker-input {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
[data-theme="dark"] .cs-btn--secondary,
[data-theme="dark"] .cs-btn-secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .cs-btn,
[data-theme="dark"] .cs-btn--primary {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}
[data-theme="dark"] .cs-btn--ghost { background: transparent; color: var(--color-text-secondary); }
[data-theme="dark"] .cs-btn--ghost:hover { background: var(--color-bg-subdued); color: var(--color-text-primary); }
[data-theme="dark"] .cs-topbar-search { background: var(--color-bg-subdued); color: var(--color-text-tertiary); }
[data-theme="dark"] .cs-topbar-search kbd { background: var(--color-bg-base); border-color: var(--color-border-default); color: var(--color-text-tertiary); }
[data-theme="dark"] .empty-state,
[data-theme="dark"] .cs-empty { background: var(--color-bg-surface); border-color: var(--color-border-default); color: var(--color-text-secondary); }
[data-theme="dark"] .cs-flash-success, [data-theme="dark"] .cs-flash--success { background: var(--color-success-soft); color: #4ade80; }
[data-theme="dark"] .cs-flash-error,   [data-theme="dark"] .cs-flash--error   { background: var(--color-danger-soft);  color: #f87171; }
[data-theme="dark"] .cs-flash-info,    [data-theme="dark"] .cs-flash--info    { background: var(--color-info-soft);    color: #60a5fa; }
[data-theme="dark"] .cs-flash--warning                                        { background: var(--color-warning-soft); color: #fb923c; }
[data-theme="dark"] .cs-badge--gray   { background: var(--color-bg-subdued); color: var(--color-text-secondary); }
[data-theme="dark"] .cs-badge--green  { background: var(--color-success-soft); color: #4ade80; }
[data-theme="dark"] .cs-badge--blue   { background: var(--color-info-soft); color: #60a5fa; }
[data-theme="dark"] .cs-badge--yellow,
[data-theme="dark"] .cs-badge--orange { background: var(--color-warning-soft); color: #fb923c; }
[data-theme="dark"] .cs-badge--red    { background: var(--color-danger-soft); color: #f87171; }
[data-theme="dark"] .cs-badge--accent { background: var(--color-accent-soft); color: #fbbf24; }
[data-theme="dark"] .cs-badge--b2c    { background: var(--color-b2c-soft); color: #4ade80; }
[data-theme="dark"] .cs-badge--b2b    { background: var(--color-b2b-soft); color: #60a5fa; }
[data-theme="dark"] .dropzone { background: var(--color-bg-surface); border-color: var(--color-border-default); }
[data-theme="dark"] .cs-banner { background: var(--color-warning-soft); color: #fb923c; }
[data-theme="dark"] hr { border-color: var(--color-border-subtle); }

/* ============================================================
   FORM LAYOUTS — modern grid + card refinements (added 2026-04)
   ============================================================ */
.cs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cs-form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cs-form-grid--full { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .cs-form-grid, .cs-form-grid--3 { grid-template-columns: 1fr; }
}
.cs-form-field { display: flex; flex-direction: column; gap: 4px; }
.cs-form-field--full { grid-column: 1 / -1; }

.cs-label {
  font-size: 13px; font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}
.cs-required { color: #dc2626; margin-left: 2px; }
.cs-help {
  font-size: 12px; color: var(--color-text-tertiary);
  margin-top: 2px;
}
.cs-error {
  font-size: 12px; color: #dc2626;
  margin-top: 2px;
}

/* Inputs — refine */
.cs-input, .cs-select, .cs-textarea {
  padding: 8px 12px;
  font-size: 14px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  width: 100%;
  transition: all 100ms ease;
  font-family: inherit;
  color: var(--color-text-primary);
}
.cs-input:hover, .cs-select:hover, .cs-textarea:hover {
  border-color: var(--color-border-strong);
}
.cs-input:focus, .cs-select:focus, .cs-textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.cs-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }

/* Card refinements */
.cs-card { margin-bottom: 16px; }
.cs-card__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
  gap: 12px;
}
.cs-card__title {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.cs-card__subtitle {
  font-size: 13px; color: var(--color-text-secondary);
  margin: 2px 0 0;
}
.cs-card__body { padding: 20px; }
.cs-card__actions { display: flex; gap: 8px; align-items: center; }

/* Form footer / sticky actions */
.cs-form-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  background: var(--color-bg-subdued);
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
}
.cs-form-actions--sticky {
  position: sticky; bottom: 0;
  box-shadow: 0 -4px 6px -2px rgba(0,0,0,0.04);
  z-index: 10;
}
.cs-form-actions__left { margin-right: auto; }

/* Two-column page layout (form + sidebar) */
.cs-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}
@media (max-width: 1024px) {
  .cs-page-grid { grid-template-columns: 1fr; }
}
.cs-page-grid__sidebar > .cs-card { position: sticky; top: 24px; }

/* Field with prefix/suffix */
.cs-input-group {
  display: flex; align-items: stretch;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg-surface);
}
.cs-input-group:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.cs-input-group .cs-input {
  border: none; box-shadow: none;
  border-radius: 0;
}
.cs-input-prefix, .cs-input-suffix {
  padding: 8px 12px;
  background: var(--color-bg-subdued);
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex; align-items: center;
  border-right: 1px solid var(--color-border-default);
}
.cs-input-suffix { border-right: none; border-left: 1px solid var(--color-border-default); }

/* Checkbox / Radio refinements */
.cs-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  cursor: pointer;
  transition: all 100ms ease;
}
.cs-check:hover { background: var(--color-bg-subdued); border-color: var(--color-border-strong); }
.cs-check input { margin-top: 2px; cursor: pointer; }
.cs-check__label { font-weight: 500; font-size: 14px; }
.cs-check__desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

/* Toggle switch */
.cs-toggle {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
}
.cs-toggle input { opacity: 0; width: 0; height: 0; }
.cs-toggle__slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--color-border-strong);
  border-radius: 20px;
  transition: 0.2s;
}
.cs-toggle__slider::before {
  position: absolute; content: '';
  height: 14px; width: 14px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
.cs-toggle input:checked + .cs-toggle__slider { background: var(--color-brand); }
.cs-toggle input:checked + .cs-toggle__slider::before { transform: translateX(16px); }

/* Field group separator inside card */
.cs-divider {
  height: 1px; background: var(--color-border-subtle);
  margin: 16px 0;
}

/* Section badge */
.cs-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--color-bg-subdued);
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  font-size: 11px; font-weight: 600;
  color: var(--color-text-secondary);
  margin-right: 8px;
}

/* Compact form for inline edits */
.cs-form-inline { display: flex; gap: 8px; align-items: center; }

/* File upload zone */
.cs-dropzone {
  border: 2px dashed var(--color-border-strong);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  background: var(--color-bg-subdued);
  cursor: pointer;
  transition: all 150ms ease;
}
.cs-dropzone:hover, .cs-dropzone.dragover {
  border-color: var(--color-brand);
  background: var(--color-bg-surface);
}
.cs-dropzone__icon { font-size: 32px; margin-bottom: 8px; opacity: 0.6; }
.cs-dropzone__title { font-weight: 600; margin-bottom: 4px; }
.cs-dropzone__desc { font-size: 13px; color: var(--color-text-secondary); }

/* ============================================================
   BACKWARD COMPAT — auto-upgrade legacy form markup
   Old patterns (cs-row-2, label > input) inside .cs-card now
   inherit the modern grid/spacing without requiring a rewrite.
   ============================================================ */
.cs-card .cs-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .cs-card .cs-row-2 { grid-template-columns: 1fr; }
}
.cs-card .cs-row-2 > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}
.cs-card .cs-row-2 > label > input,
.cs-card .cs-row-2 > label > select,
.cs-card .cs-row-2 > label > textarea {
  padding: 8px 12px;
  font-size: 14px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  width: 100%;
  font-family: inherit;
  color: var(--color-text-primary);
  transition: all 100ms ease;
  font-weight: 400;
}
.cs-card .cs-row-2 > label > input:focus,
.cs-card .cs-row-2 > label > select:focus,
.cs-card .cs-row-2 > label > textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.cs-card .cs-h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Standalone labels in .cs-card (not in cs-row-2) */
.cs-card > label,
.cs-card > form > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}
.cs-card > label > input:not([type="checkbox"]):not([type="radio"]),
.cs-card > label > select,
.cs-card > label > textarea {
  display: block;
  margin-top: 4px;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  width: 100%;
  font-family: inherit;
  color: var(--color-text-primary);
  font-weight: 400;
}
.cs-card > label > input:focus,
.cs-card > label > select:focus,
.cs-card > label > textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* Old button alias mapping */
.cs-btn-primary { background: var(--color-brand); color: var(--color-text-inverse); border-color: var(--color-brand); }
.cs-btn-secondary { background: var(--color-bg-surface); color: var(--color-text-primary); border-color: var(--color-border-default); }