/* =========================================================================
   WorkOS — Carbon Design System
   A faithful implementation of IBM's Carbon design language (tokens, type
   scale, 2x grid spacing and components) with zero build step or external
   dependency, so it deploys cleanly to cPanel. Theme: White (g10) content with
   a Gray 100 UI shell, per Carbon's standard product shell.
   ========================================================================= */

/* ---- Color tokens (IBM Carbon palette) -------------------------------- */
:root {
  /* Gray */
  --cds-gray-10: #f4f4f4;  --cds-gray-20: #e0e0e0;  --cds-gray-30: #c6c6c6;
  --cds-gray-40: #a8a8a8;  --cds-gray-50: #8d8d8d;  --cds-gray-60: #6f6f6f;
  --cds-gray-70: #525252;  --cds-gray-80: #393939;  --cds-gray-90: #262626;
  --cds-gray-100: #161616; --cds-white: #ffffff;    --cds-gray-0: #ffffff;
  /* Blue (interactive) */
  --cds-blue-40: #78a9ff;  --cds-blue-50: #4589ff;  --cds-blue-60: #0f62fe;
  --cds-blue-70: #0043ce;  --cds-blue-80: #002d9c;
  /* Support */
  --cds-red-50: #fa4d56;   --cds-red-60: #da1e28;   --cds-red-70: #a2191f;
  --cds-green-40: #42be65; --cds-green-50: #24a148;  --cds-green-60: #198038;
  --cds-yellow-30: #f1c21b;
  --cds-purple-60: #8a3ffc; --cds-teal-50: #009d9a;  --cds-cyan-50: #1192e8;
  --cds-magenta-50: #ee5396;

  /* Themed tokens (White theme) */
  --cds-background: #ffffff;
  --cds-background-hover: rgba(141,141,141,0.12);
  --cds-background-active: rgba(141,141,141,0.20);
  --cds-background-selected: rgba(141,141,141,0.12);
  --cds-layer: #f4f4f4;
  --cds-layer-hover: #e8e8e8;
  --cds-layer-accent: #e0e0e0;
  --cds-field: #f4f4f4;
  --cds-field-hover: #e8e8e8;
  --cds-border-subtle: #e0e0e0;
  --cds-border-subtle-01: #c6c6c6;
  --cds-border-strong: #8d8d8d;
  --cds-border-interactive: #0f62fe;
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-placeholder: #a8a8a8;
  --cds-text-helper: #6f6f6f;
  --cds-text-on-color: #ffffff;
  --cds-text-disabled: #c6c6c6;
  --cds-link-primary: #0f62fe;
  --cds-link-primary-hover: #0043ce;
  --cds-icon-primary: #161616;
  --cds-icon-secondary: #525252;
  --cds-interactive: #0f62fe;
  --cds-focus: #0f62fe;
  --cds-support-error: #da1e28;
  --cds-support-success: #24a148;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #0043ce;

  /* Spacing scale (Carbon mini-units) */
  --cds-spacing-01: 0.125rem; --cds-spacing-02: 0.25rem; --cds-spacing-03: 0.5rem;
  --cds-spacing-04: 0.75rem;  --cds-spacing-05: 1rem;    --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem;     --cds-spacing-08: 2.5rem;  --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem;     --cds-spacing-11: 5rem;    --cds-spacing-12: 6rem;
  --cds-spacing-13: 10rem;

  --cds-header-height: 3rem;
  --cds-sidenav-width: 16rem;

  /* Motion */
  --cds-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-duration-fast: 110ms;
  --cds-duration-moderate: 240ms;

  --cds-shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --cds-shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --cds-shadow-lg: 0 8px 32px rgba(0,0,0,0.18);
}

/* ---- Reset & base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
  background: var(--cds-gray-10);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--cds-link-primary); text-decoration: none; }
a:hover { color: var(--cds-link-primary-hover); text-decoration: underline; }
code, pre, .cds-mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
hr { border: none; border-top: 1px solid var(--cds-border-subtle); margin: var(--cds-spacing-06) 0; }

/* ---- Type scale ------------------------------------------------------- */
.cds-type-display    { font-size: 2.625rem; line-height: 1.2;  font-weight: 300; letter-spacing: 0; }
.cds-type-heading-05 { font-size: 2rem;     line-height: 1.25; font-weight: 400; }
.cds-type-heading-04 { font-size: 1.75rem;  line-height: 1.28; font-weight: 400; }
.cds-type-heading-03 { font-size: 1.25rem;  line-height: 1.4;  font-weight: 400; }
.cds-type-heading-02 { font-size: 1rem;     line-height: 1.5;  font-weight: 600; }
.cds-type-heading-01 { font-size: 0.875rem; line-height: 1.43; font-weight: 600; }
.cds-type-body-02    { font-size: 1rem;     line-height: 1.5;  font-weight: 400; }
.cds-type-body-01    { font-size: 0.875rem; line-height: 1.43; font-weight: 400; }
.cds-type-label-01   { font-size: 0.75rem;  line-height: 1.34; font-weight: 400; letter-spacing: 0.32px; }
.cds-type-helper     { font-size: 0.75rem;  line-height: 1.34; color: var(--cds-text-helper); }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 400; }

.cds-text-secondary { color: var(--cds-text-secondary); }
.cds-text-helper-c  { color: var(--cds-text-helper); }
.cds-text-error     { color: var(--cds-support-error); }
.cds-text-success   { color: var(--cds-support-success); }
.cds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Layout helpers --------------------------------------------------- */
.cds-stack > * + * { margin-top: var(--cds-spacing-05); }
.cds-stack-sm > * + * { margin-top: var(--cds-spacing-03); }
.cds-stack-lg > * + * { margin-top: var(--cds-spacing-07); }
.cds-row { display: flex; gap: var(--cds-spacing-05); flex-wrap: wrap; }
.cds-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-05); flex-wrap: wrap; }
.cds-row-center { display: flex; align-items: center; gap: var(--cds-spacing-03); }
.cds-grid { display: grid; gap: var(--cds-spacing-05); }
.cds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cds-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cds-flex-1 { flex: 1 1 0%; min-width: 0; }
.cds-spacer { flex: 1 1 auto; }
.cds-mt-0{margin-top:0}.cds-mt-3{margin-top:var(--cds-spacing-03)}.cds-mt-5{margin-top:var(--cds-spacing-05)}.cds-mt-7{margin-top:var(--cds-spacing-07)}
.cds-mb-3{margin-bottom:var(--cds-spacing-03)}.cds-mb-5{margin-bottom:var(--cds-spacing-05)}.cds-mb-7{margin-bottom:var(--cds-spacing-07)}
@media (max-width: 1056px){ .cds-grid-4{grid-template-columns:repeat(2,1fr)} .cds-grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 672px){ .cds-grid-4,.cds-grid-3,.cds-grid-2{grid-template-columns:1fr} }

/* ---- Buttons ---------------------------------------------------------- */
.cds-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--cds-spacing-05);
  min-height: 3rem; padding: 0 var(--cds-spacing-05) 0 var(--cds-spacing-05);
  border: 1px solid transparent; border-radius: 0;
  font-size: 0.875rem; line-height: 1.29; letter-spacing: 0.16px; font-weight: 400;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--cds-duration-fast) var(--cds-ease-productive),
              border-color var(--cds-duration-fast) var(--cds-ease-productive),
              color var(--cds-duration-fast) var(--cds-ease-productive);
  position: relative;
}
.cds-btn:hover { text-decoration: none; }
.cds-btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -3px; box-shadow: inset 0 0 0 1px var(--cds-white); }
.cds-btn svg { flex: 0 0 auto; }
.cds-btn--icon-only { justify-content: center; padding: 0; width: 3rem; }
.cds-btn--sm { min-height: 2rem; }
.cds-btn--md { min-height: 2.5rem; }
.cds-btn--field { min-height: 2.5rem; }
.cds-btn--block { display: flex; width: 100%; }

.cds-btn--primary   { background: var(--cds-blue-60); color: #fff; }
.cds-btn--primary:hover   { background: var(--cds-blue-70); color: #fff; }
.cds-btn--primary:active  { background: var(--cds-blue-80); }
.cds-btn--secondary { background: var(--cds-gray-80); color: #fff; }
.cds-btn--secondary:hover { background: var(--cds-gray-70); color:#fff; }
.cds-btn--tertiary  { background: transparent; color: var(--cds-blue-60); border-color: var(--cds-blue-60); }
.cds-btn--tertiary:hover { background: var(--cds-blue-60); color: #fff; }
.cds-btn--ghost     { background: transparent; color: var(--cds-blue-60); }
.cds-btn--ghost:hover { background: var(--cds-background-hover); color: var(--cds-blue-70); }
.cds-btn--danger    { background: var(--cds-red-60); color: #fff; }
.cds-btn--danger:hover { background: var(--cds-red-70); color:#fff; }
.cds-btn--danger-ghost { background: transparent; color: var(--cds-red-60); }
.cds-btn--danger-ghost:hover { background: var(--cds-red-60); color: #fff; }
.cds-btn[disabled], .cds-btn--disabled { background: var(--cds-gray-30); color: var(--cds-gray-50); cursor: not-allowed; border-color: transparent; }
.cds-btn-set { display: flex; gap: 1px; }

/* ---- Forms ------------------------------------------------------------ */
.cds-form-item { margin-bottom: var(--cds-spacing-05); }
.cds-label { display: block; font-size: 0.75rem; line-height: 1.34; letter-spacing: 0.32px; color: var(--cds-text-secondary); margin-bottom: var(--cds-spacing-03); }
.cds-input,
.cds-text-input, .cds-textarea, .cds-select select {
  width: 100%; height: 2.5rem; padding: 0 var(--cds-spacing-05);
  background: var(--cds-field); color: var(--cds-text-primary);
  border: none; border-bottom: 1px solid var(--cds-border-strong);
  font-size: 0.875rem; font-family: inherit; border-radius: 0;
  transition: outline var(--cds-duration-fast), background var(--cds-duration-fast);
}
.cds-textarea { height: auto; min-height: 5rem; padding: var(--cds-spacing-04) var(--cds-spacing-05); resize: vertical; line-height: 1.43; }
.cds-input::placeholder, .cds-text-input::placeholder, .cds-textarea::placeholder { color: var(--cds-text-placeholder); }
.cds-input:focus, .cds-text-input:focus, .cds-textarea:focus, .cds-select select:focus {
  outline: 2px solid var(--cds-focus); outline-offset: -2px;
}
.cds-input--invalid, .cds-text-input--invalid { outline: 2px solid var(--cds-support-error); outline-offset: -2px; }
.cds-select { position: relative; }
.cds-select select { appearance: none; -webkit-appearance: none; padding-right: var(--cds-spacing-08); cursor: pointer; }
.cds-select::after {
  content: ''; position: absolute; right: 1rem; top: 50%; width: 0.5rem; height: 0.5rem;
  border-right: 1px solid var(--cds-icon-primary); border-bottom: 1px solid var(--cds-icon-primary);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.cds-form-requirement { display: block; margin-top: var(--cds-spacing-02); font-size: 0.75rem; color: var(--cds-support-error); min-height: 1rem; }
.cds-helper-text { display: block; margin-top: var(--cds-spacing-02); font-size: 0.75rem; color: var(--cds-text-helper); }

/* Checkbox & radio */
.cds-checkbox, .cds-radio { display: flex; align-items: flex-start; gap: var(--cds-spacing-03); cursor: pointer; margin-bottom: var(--cds-spacing-03); font-size: 0.875rem; }
.cds-checkbox input, .cds-radio input { width: 1rem; height: 1rem; margin: 0.18rem 0 0 0; accent-color: var(--cds-blue-60); flex: 0 0 auto; }

/* Toggle */
.cds-toggle { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); cursor: pointer; }
.cds-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cds-toggle__track { width: 3rem; height: 1.5rem; background: var(--cds-gray-50); border-radius: 1rem; position: relative; transition: background var(--cds-duration-moderate); }
.cds-toggle__track::after { content: ''; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; background: #fff; border-radius: 50%; transition: transform var(--cds-duration-moderate); }
.cds-toggle input:checked + .cds-toggle__track { background: var(--cds-green-50); }
.cds-toggle input:checked + .cds-toggle__track::after { transform: translateX(1.5rem); }
.cds-toggle input:focus-visible + .cds-toggle__track { outline: 2px solid var(--cds-focus); outline-offset: 2px; }

/* ---- Tiles ------------------------------------------------------------ */
.cds-tile {
  background: var(--cds-background); padding: var(--cds-spacing-06);
  border: 1px solid var(--cds-border-subtle); position: relative;
}
.cds-tile--clickable { display: block; color: inherit; text-decoration: none; transition: background var(--cds-duration-fast); cursor: pointer; }
.cds-tile--clickable:hover { background: var(--cds-layer-hover); text-decoration: none; color: inherit; }
.cds-tile--selected { outline: 1px solid var(--cds-interactive); }

/* ---- Metric / stat tile ---------------------------------------------- */
.cds-metric { display: flex; flex-direction: column; gap: var(--cds-spacing-03); }
.cds-metric__label { font-size: 0.875rem; color: var(--cds-text-secondary); display: flex; align-items: center; gap: var(--cds-spacing-03); }
.cds-metric__value { font-size: 2.25rem; line-height: 1.1; font-weight: 300; }
.cds-metric__delta { font-size: 0.75rem; }

/* ---- Tags ------------------------------------------------------------- */
.cds-tag {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-02);
  height: 1.5rem; padding: 0 var(--cds-spacing-04); border-radius: 0.9375rem;
  font-size: 0.75rem; line-height: 1; white-space: nowrap;
  background: var(--cds-gray-20); color: var(--cds-gray-100);
}
.cds-tag--sm { height: 1.125rem; font-size: 0.6875rem; padding: 0 var(--cds-spacing-03); }
.cds-tag--blue   { background: #d0e2ff; color: #0043ce; }
.cds-tag--green  { background: #a7f0ba; color: #0e6027; }
.cds-tag--red    { background: #ffd7d9; color: #a2191f; }
.cds-tag--yellow { background: #fcf4d6; color: #684e00; }
.cds-tag--purple { background: #e8daff; color: #6929c4; }
.cds-tag--teal   { background: #9ef0f0; color: #005d5d; }
.cds-tag--cyan   { background: #bae6ff; color: #00539a; }
.cds-tag--magenta{ background: #ffd6e8; color: #9f1853; }
.cds-tag--gray   { background: var(--cds-gray-20); color: var(--cds-gray-100); }
.cds-tag--cool-gray { background: #dde1e6; color: #343a3f; }

/* ---- Data table ------------------------------------------------------- */
.cds-table-container { background: var(--cds-background); border: 1px solid var(--cds-border-subtle); }
.cds-table-toolbar { display: flex; align-items: center; gap: var(--cds-spacing-03); padding: var(--cds-spacing-03); border-bottom: 1px solid var(--cds-border-subtle); }
.cds-table-toolbar .cds-search { flex: 1 1 auto; }
.cds-table-wrap { overflow-x: auto; }
.cds-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cds-table thead th {
  text-align: left; background: var(--cds-layer); color: var(--cds-text-primary);
  font-weight: 600; padding: var(--cds-spacing-05); border-bottom: none;
  white-space: nowrap; height: 3rem; vertical-align: middle;
}
.cds-table tbody td { padding: var(--cds-spacing-05); border-top: 1px solid var(--cds-border-subtle); color: var(--cds-text-secondary); vertical-align: middle; }
.cds-table tbody tr { transition: background var(--cds-duration-fast); }
.cds-table tbody tr:hover { background: var(--cds-layer-hover); }
.cds-table tbody td strong, .cds-table tbody td .cds-cell-strong { color: var(--cds-text-primary); font-weight: 600; }
.cds-table--compact thead th { height: 2rem; padding: 0 var(--cds-spacing-05); }
.cds-table--compact tbody td { padding: var(--cds-spacing-03) var(--cds-spacing-05); }
.cds-table th.cds-table__actions, .cds-table td.cds-table__actions { text-align: right; width: 1%; white-space: nowrap; }
.cds-table a { color: var(--cds-link-primary); }

/* ---- Search ----------------------------------------------------------- */
.cds-search { position: relative; display: flex; align-items: center; }
.cds-search svg { position: absolute; left: 1rem; color: var(--cds-icon-secondary); pointer-events: none; }
.cds-search input {
  width: 100%; height: 2.5rem; padding: 0 var(--cds-spacing-05) 0 2.75rem;
  background: var(--cds-field); border: none; border-bottom: 1px solid transparent;
  font-size: 0.875rem; color: var(--cds-text-primary);
}
.cds-search input:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

/* ---- Inline notification --------------------------------------------- */
.cds-notification {
  display: flex; align-items: flex-start; gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-left: 3px solid var(--cds-support-info);
  background: #edf5ff; color: var(--cds-gray-100); margin-bottom: var(--cds-spacing-05);
}
.cds-notification__icon { flex: 0 0 auto; margin-top: 0.1rem; }
.cds-notification__body { flex: 1 1 auto; font-size: 0.875rem; }
.cds-notification__title { font-weight: 600; margin-right: var(--cds-spacing-03); }
.cds-notification--success { border-left-color: var(--cds-support-success); background: #defbe6; }
.cds-notification--error   { border-left-color: var(--cds-support-error);   background: #fff1f1; }
.cds-notification--warning { border-left-color: var(--cds-support-warning); background: #fcf4d6; }
.cds-notification--info    { border-left-color: var(--cds-support-info);    background: #edf5ff; }
.cds-notification__close { background: none; border: none; cursor: pointer; color: inherit; padding: 0.25rem; display: flex; }
.cds-notification--success .cds-notification__icon { color: var(--cds-support-success); }
.cds-notification--error .cds-notification__icon { color: var(--cds-support-error); }
.cds-notification--warning .cds-notification__icon { color: #b28600; }
.cds-notification--info .cds-notification__icon { color: var(--cds-support-info); }

/* ---- Toasts (transient) ---------------------------------------------- */
.cds-toasts { position: fixed; top: calc(var(--cds-header-height) + 1rem); right: 1rem; z-index: 9000; display: flex; flex-direction: column; gap: var(--cds-spacing-03); max-width: 22rem; }
.cds-toast { box-shadow: var(--cds-shadow-md); animation: cds-toast-in var(--cds-duration-moderate) var(--cds-ease-productive); }
@keyframes cds-toast-in { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Breadcrumb ------------------------------------------------------- */
.cds-breadcrumb { display: flex; align-items: center; gap: var(--cds-spacing-03); font-size: 0.875rem; margin-bottom: var(--cds-spacing-04); flex-wrap: wrap; }
.cds-breadcrumb a { color: var(--cds-link-primary); }
.cds-breadcrumb span.sep { color: var(--cds-text-helper); }
.cds-breadcrumb .current { color: var(--cds-text-secondary); }

/* ---- Tabs ------------------------------------------------------------- */
.cds-tabs { display: flex; border-bottom: 1px solid var(--cds-border-subtle); gap: 0; overflow-x: auto; }
.cds-tab { padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 2px solid transparent; color: var(--cds-text-secondary); cursor: pointer; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none; font-size: 0.875rem; }
.cds-tab:hover { color: var(--cds-text-primary); border-bottom-color: var(--cds-border-strong); }
.cds-tab--selected { color: var(--cds-text-primary); border-bottom-color: var(--cds-interactive); font-weight: 600; }

/* ---- Pagination ------------------------------------------------------- */
.cds-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-05); padding: var(--cds-spacing-03) var(--cds-spacing-05); border-top: 1px solid var(--cds-border-subtle); background: var(--cds-background); font-size: 0.75rem; color: var(--cds-text-secondary); flex-wrap: wrap; }
.cds-pagination__pages { display: flex; align-items: center; gap: var(--cds-spacing-02); }
.cds-pagination a, .cds-pagination span.pg { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; color: var(--cds-text-secondary); }
.cds-pagination a:hover { background: var(--cds-layer-hover); text-decoration: none; }
.cds-pagination .current { background: var(--cds-gray-20); color: var(--cds-text-primary); font-weight: 600; }
.cds-pagination .disabled { color: var(--cds-text-disabled); pointer-events: none; }

/* ---- Overflow menu / dropdown ---------------------------------------- */
.cds-overflow { position: relative; display: inline-block; }
.cds-overflow__trigger { background: none; border: none; cursor: pointer; color: var(--cds-icon-primary); width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; }
.cds-overflow__trigger:hover { background: var(--cds-background-hover); }
.cds-menu {
  position: absolute; right: 0; top: 100%; min-width: 11rem; background: var(--cds-background);
  box-shadow: var(--cds-shadow-md); border: 1px solid var(--cds-border-subtle); z-index: 8000;
  display: none; padding: var(--cds-spacing-02) 0;
}
.cds-menu--open { display: block; }
.cds-menu--left { right: auto; left: 0; }
.cds-menu a, .cds-menu button {
  display: flex; align-items: center; gap: var(--cds-spacing-03); width: 100%; text-align: left;
  padding: var(--cds-spacing-04) var(--cds-spacing-05); background: none; border: none; cursor: pointer;
  color: var(--cds-text-primary); font-size: 0.875rem;
}
.cds-menu a:hover, .cds-menu button:hover { background: var(--cds-layer-hover); text-decoration: none; }
.cds-menu a.danger, .cds-menu button.danger { color: var(--cds-support-error); }
.cds-menu__divider { height: 1px; background: var(--cds-border-subtle); margin: var(--cds-spacing-02) 0; }

/* ---- Modal ------------------------------------------------------------ */
.cds-modal { position: fixed; inset: 0; background: rgba(22,22,22,0.5); z-index: 9500; display: none; align-items: center; justify-content: center; padding: var(--cds-spacing-05); }
.cds-modal--open { display: flex; }
.cds-modal__container { background: var(--cds-background); width: 100%; max-width: 36rem; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--cds-shadow-lg); animation: cds-modal-in var(--cds-duration-moderate) var(--cds-ease-productive); }
@keyframes cds-modal-in { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } }
.cds-modal__header { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--cds-spacing-05); gap: var(--cds-spacing-05); }
.cds-modal__heading { font-size: 1.25rem; font-weight: 400; }
.cds-modal__body { padding: 0 var(--cds-spacing-05) var(--cds-spacing-06); overflow-y: auto; }
.cds-modal__footer { display: flex; gap: 1px; margin-top: auto; }
.cds-modal__footer .cds-btn { flex: 1 1 0; min-height: 4rem; }
.cds-modal__close { background: none; border: none; cursor: pointer; color: var(--cds-icon-primary); padding: 0.25rem; display: flex; }

/* ---- Avatar ----------------------------------------------------------- */
.cds-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cds-blue-60); color: #fff; font-size: 0.75rem; font-weight: 600; flex: 0 0 auto; text-transform: uppercase; }
.cds-avatar--lg { width: 4rem; height: 4rem; font-size: 1.25rem; }
.cds-avatar--sm { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }

/* ---- Structured list -------------------------------------------------- */
.cds-struct { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cds-struct th { text-align: left; color: var(--cds-text-secondary); font-weight: 600; padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-strong); }
.cds-struct td { padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle); }

/* ---- Progress / meter ------------------------------------------------- */
.cds-meter { height: 0.5rem; background: var(--cds-layer-accent); overflow: hidden; }
.cds-meter__bar { height: 100%; background: var(--cds-interactive); transition: width var(--cds-duration-moderate); }
.cds-meter__bar--success { background: var(--cds-support-success); }
.cds-meter__bar--warning { background: var(--cds-support-warning); }
.cds-meter__bar--danger  { background: var(--cds-support-error); }

/* ---- Spinner ---------------------------------------------------------- */
.cds-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid var(--cds-layer-accent); border-top-color: var(--cds-interactive); border-radius: 50%; animation: cds-spin 0.8s linear infinite; }
@keyframes cds-spin { to { transform: rotate(360deg); } }

/* ---- Empty state ------------------------------------------------------ */
.cds-empty { text-align: center; padding: var(--cds-spacing-10) var(--cds-spacing-05); color: var(--cds-text-secondary); }
.cds-empty__icon { color: var(--cds-gray-40); margin-bottom: var(--cds-spacing-05); display: inline-flex; }
.cds-empty__title { font-size: 1.25rem; color: var(--cds-text-primary); margin-bottom: var(--cds-spacing-03); }

/* ---- Page header ------------------------------------------------------ */
.cds-page-header { margin-bottom: var(--cds-spacing-07); }
.cds-page-header__title { font-size: 1.75rem; line-height: 1.28; font-weight: 400; }
.cds-page-header__subtitle { color: var(--cds-text-secondary); margin-top: var(--cds-spacing-03); }

/* ---- Misc utilities --------------------------------------------------- */
.cds-divider { height: 1px; background: var(--cds-border-subtle); margin: var(--cds-spacing-05) 0; }
.cds-hidden { display: none !important; }
.cds-mono-block { background: var(--cds-gray-100); color: var(--cds-gray-10); padding: var(--cds-spacing-05); overflow-x: auto; font-size: 0.8125rem; }
.cds-kbd { display: inline-block; padding: 0 0.375rem; background: var(--cds-layer); border: 1px solid var(--cds-border-subtle); border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; }