/**
 * Super Settings stylesheet v3 — "modern" pass (2026-08-30).
 * Single source of truth for the page. Noribel branding, clean surfaces,
 * motion built in (entrance stagger, spring modals, animated tab indicator).
 *
 * Load order on super-settings.html:
 *   superSettings bundle → main CSS → nor-tokens → nor-ui → nor-ui-packs →
 *   nor-ui-parts → THIS FILE (skins via html[data-ui*] keep winning by design).
 *
 * Layers:
 *   1. Tokens + keyframes
 *   2. Page chrome — header, tab bars, panels
 *   3. Primitives — buttons, controls, fields, toolbars, cards, tables
 *   4. Tab sections — analytics, icons, users, engines/docs, infrastructure
 *   5. Motion guards (prefers-reduced-motion)
 *
 * COMPONENT CONTRACT — every tab builds from these 10 patterns only:
 *   button · control · field · toolbar · card · table · modal · tab bar ·
 *   badge · empty state. Overflow rules: grid/flex children min-width:0,
 *   text wraps (overflow-wrap), grid templates use minmax(0, …).
 */

/* ════════════════ 1. Tokens + keyframes ════════════════ */
.super-settings-page {
  /* Reads shared skin tokens (nor-tokens.css) with the classic palette as fallback */
  --ss-gap-lg: 1.5rem;
  --ss-gap: 1rem;
  --ss-blue: var(--accent, #2563eb);
  --ss-blue-hover: var(--accent-hot, #1d4ed8);
  --ss-blue-dim: var(--noribel-blue-dim, rgba(37, 99, 235, 0.1));
  --ss-slate-50: var(--bg-subtle, #f8fafc);
  --ss-slate-100: var(--bg-card-muted, #f1f5f9);
  --ss-slate-200: var(--border-solid, #e2e8f0);
  --ss-slate-300: #cbd5e1;
  --ss-slate-500: var(--text-muted, #64748b);
  --ss-slate-700: var(--text-muted, #334155);
  --ss-slate-900: var(--text, #0f172a);
  /* form-control lock */
  --ss-ctrl-h: 2.25rem;
  --ss-ctrl-px: 0.75rem;
  --ss-ctrl-radius: 0.625rem;
  --ss-ctrl-font: 0.8125rem;
  --ss-ctrl-border: #d6dee8;
  /* surface + motion language */
  --ss-radius-card: 16px;
  --ss-radius-modal: 20px;
  --ss-shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.05);
  --ss-shadow-hover: 0 2px 4px rgb(15 23 42 / 0.05), 0 14px 34px rgb(15 23 42 / 0.1);
  --ss-shadow-pop: 0 25px 70px rgb(15 23 42 / 0.28), 0 0 0 1px rgb(15 23 42 / 0.04);
  --ss-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ss-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  font-family: Outfit, system-ui, sans-serif;
}

@keyframes ssRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes ssPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes ssPlatformFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ssPlatformPopIn {
  from { opacity: 0; transform: scale(0.95) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ss-spin {
  to { transform: rotate(360deg); }
}

/* ════════════════ 2. Page chrome ════════════════ */

/* Legacy chrome we no longer show */
.super-settings-page .main__toolbar,
.super-settings-page .ss-page-hero,
.super-settings-page .super-settings__lede,
.super-settings-page .ss-page-hero__lede,
.super-settings-page .ss-platform-summary__lede,
.super-settings-page .field__help.ss-lede-kill,
.super-settings-page .ss-posthog-panel__text {
  display: none;
}

/* Header */
.super-settings-page .ss-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-gap);
  flex-wrap: wrap;
  margin: 0 0 var(--ss-gap-lg);
  padding: 0;
}
.super-settings-page .ss-shell-head__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ss-slate-900);
}
.super-settings-page .ss-shell-head__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Main tab bar — underline with animated indicator */
.super-settings-page .ss-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.25rem;
  margin: 0 0 var(--ss-gap-lg);
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ss-slate-200);
  border-radius: 0;
  box-shadow: none;
}
.super-settings-page .ss-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ss-slate-500);
  background: transparent;
  border: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.super-settings-page .ss-tabs__tab::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: var(--ss-blue);
  opacity: 0;
  transition: left 0.22s var(--ss-ease-out), right 0.22s var(--ss-ease-out), opacity 0.15s ease;
}
.super-settings-page .ss-tabs__tab:hover {
  color: var(--ss-slate-900);
  background: var(--ss-slate-50);
}
.super-settings-page .ss-tabs__tab.ss-tabs__tab--active,
.super-settings-page .ss-tabs__tab[aria-selected='true'] {
  color: var(--ss-blue);
  background: transparent;
  box-shadow: none;
}
.super-settings-page .ss-tabs__tab.ss-tabs__tab--active::after,
.super-settings-page .ss-tabs__tab[aria-selected='true']::after {
  left: 0.55rem;
  right: 0.55rem;
  opacity: 1;
}
.super-settings-page .ss-tabs__tab svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  opacity: 1;
}

/* Sub-tabs (Infrastructure views / Icon library) — same language, smaller */
.super-settings-page .ss-infra-views,
.super-settings-page .ss-icon-lib__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 var(--ss-gap);
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--ss-slate-200);
}
.super-settings-page .ss-infra-views__btn,
.super-settings-page .ss-icon-lib__tab {
  position: relative;
  appearance: none;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  box-shadow: none;
  color: var(--ss-slate-500);
  font: 600 0.875rem Outfit, system-ui, sans-serif;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.super-settings-page .ss-infra-views__btn::after,
.super-settings-page .ss-icon-lib__tab::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: var(--ss-blue);
  opacity: 0;
  transition: left 0.22s var(--ss-ease-out), right 0.22s var(--ss-ease-out), opacity 0.15s ease;
}
.super-settings-page .ss-infra-views__btn:hover,
.super-settings-page .ss-icon-lib__tab:hover {
  color: var(--ss-slate-900);
  background: var(--ss-slate-50);
}
.super-settings-page .ss-infra-views__btn.is-active,
.super-settings-page .ss-icon-lib__tab.is-active {
  color: var(--ss-blue);
  background: transparent;
  box-shadow: none;
}
.super-settings-page .ss-infra-views__btn.is-active::after,
.super-settings-page .ss-icon-lib__tab.is-active::after {
  left: 0.5rem;
  right: 0.5rem;
  opacity: 1;
}

/* Panel rhythm + entrance */
.super-settings-page .super-settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ss-gap-lg);
  animation: ssPanelIn 0.32s var(--ss-ease-out);
}
/* display:flex above must never defeat the HTML [hidden] attribute */
.super-settings-page .super-settings-panel[hidden],
.super-settings-page [data-ss-panel][hidden],
.super-settings-page .ss-tabs[hidden],
.super-settings-page [hidden] {
  display: none !important;
}
.super-settings-page .super-settings-panel > .panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.super-settings-page .super-settings-panel > .panel__head .panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--ss-slate-900);
}
.super-settings-page .ss-section-h,
.super-settings-page .super-settings__h.ss-section-h,
.super-settings-page .super-settings__h {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ss-slate-900);
}

/* ════════════════ 3. Primitives ════════════════ */

/* Buttons — base behaviour + press feel */
.super-settings-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease,
    transform 0.14s var(--ss-ease-out), box-shadow 0.14s ease;
}
.super-settings-page .btn:hover {
  transform: translateY(-1px);
}
.super-settings-page .btn:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}

/* Header / standalone buttons */
.super-settings-page .ss-shell-head__actions .btn--primary,
.super-settings-page .ss-posthog-panel > .btn--primary,
.super-settings-page a.btn.btn--primary:not(.btn--sm),
.super-settings-page .btn.btn--primary:not(.btn--sm),
.super-settings-page .ss-shell-head__actions .btn--sm.btn--primary {
  background: var(--ss-blue);
  color: #fff;
  border: 1px solid var(--ss-blue);
  padding: 0.5rem 1rem;
  border-radius: var(--ss-ctrl-radius);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}
.super-settings-page .ss-shell-head__actions .btn--primary:hover,
.super-settings-page .ss-posthog-panel > .btn--primary:hover {
  background: var(--ss-blue-hover);
  border-color: var(--ss-blue-hover);
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.14);
}
.super-settings-page .ss-shell-head__actions .btn--ghost,
.super-settings-page .btn.btn--ghost:not(.btn--sm),
.super-settings-page a.btn.btn--ghost:not(.btn--sm),
.super-settings-page .ss-shell-head__actions .btn--sm.btn--ghost {
  background: #fff;
  color: var(--ss-slate-700);
  border: 1px solid var(--ss-ctrl-border);
  padding: 0.5rem 1rem;
  border-radius: var(--ss-ctrl-radius);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}
.super-settings-page .ss-shell-head__actions .btn--ghost:hover {
  background: var(--ss-slate-50);
  border-color: var(--ss-slate-300);
}

/* Control-height lock — sm buttons and toolbar buttons share one size */
.super-settings-page .btn.btn--sm,
.super-settings-page .btn.btn--primary.btn--sm,
.super-settings-page .btn.btn--ghost.btn--sm,
.super-settings-page a.btn.btn--sm,
.super-settings-page .ss-ui-toolbar .btn,
.super-settings-page .ss-ai-toolbar .btn,
.super-settings-page .ss-bugs__filters .btn,
.super-settings-page .users-panel__toolbar-actions .btn,
.super-settings-page .ss-icon-lib__toolbar .btn,
.super-settings-page .ss-email-settings-form .btn,
.super-settings-page .ss-email-log-actions .btn,
.super-settings-page .ss-ui-actions .btn,
.super-settings-page .ss-icon-modal__foot .btn,
.super-settings-page .ss-userdrawer__foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ss-ctrl-h);
  height: var(--ss-ctrl-h);
  padding: 0 var(--ss-ctrl-px);
  border-radius: var(--ss-ctrl-radius);
  font-size: var(--ss-ctrl-font);
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}
.super-settings-page .btn.btn--primary.btn--sm,
.super-settings-page .ss-ui-toolbar .btn--primary,
.super-settings-page .ss-ai-toolbar .btn--primary,
.super-settings-page .ss-email-settings-form .btn--primary,
.super-settings-page .ss-email-log-actions .btn--primary,
.super-settings-page .ss-ui-actions .btn--primary {
  background: var(--ss-blue);
  color: #fff;
  border: 1px solid var(--ss-blue);
  box-shadow: none;
}
.super-settings-page .btn.btn--ghost.btn--sm,
.super-settings-page .ss-ui-toolbar .btn--ghost,
.super-settings-page .ss-ai-toolbar .btn--ghost,
.super-settings-page .ss-email-log-actions .btn--ghost,
.super-settings-page .ss-ui-actions .btn--ghost {
  background: #fff;
  color: var(--ss-slate-700);
  border: 1px solid var(--ss-ctrl-border);
  box-shadow: none;
}

/* Table-row action buttons — quiet, compact */
.super-settings-page .data-table__cell--actions .btn,
.super-settings-page .users-table-actions > .btn,
.super-settings-page .users-table-actions .users-actions-menu__toggle,
.super-settings-page .ss-btn-table,
.super-settings-page .ss-table .btn--sm,
.super-settings-page td .btn--sm {
  background: var(--ss-slate-100);
  color: var(--ss-slate-700);
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: none;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}
.super-settings-page .data-table__cell--actions .btn:hover,
.super-settings-page .users-table-actions > .btn:hover,
.super-settings-page .ss-btn-table:hover,
.super-settings-page td .btn--sm:hover {
  background: var(--ss-slate-200);
  color: var(--ss-slate-900);
}

.super-settings-page .ss-icon-lib__add {
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--ss-slate-300);
  color: var(--ss-slate-700);
  padding: 0.5rem 1rem;
  border-radius: var(--ss-ctrl-radius);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  cursor: pointer;
}
.super-settings-page .ss-icon-lib__add:hover,
.super-settings-page .ss-icon-lib__add.is-active {
  background: var(--ss-slate-50);
  border-style: solid;
  color: var(--ss-slate-900);
}

/* Form controls — one height for every input/select on the page */
.super-settings-page input.race-map-time-input,
.super-settings-page input.field__input,
.super-settings-page select.field__input,
.super-settings-page select.safety-plan-select,
.super-settings-page .ss-trend-toolbar select,
.super-settings-page .users-filter select,
.super-settings-page .users-search-input,
.super-settings-page .ss-icon-lib__search input,
.super-settings-page .ss-icon-lib__toolbar select,
.super-settings-page .ss-ui-toolbar select,
.super-settings-page .ss-ui-field input,
.super-settings-page .ss-ai-toolbar select,
.super-settings-page .ss-infra-toolbar select,
.super-settings-page .ss-infra-toolbar input,
.super-settings-page .ss-daily-filters select,
.super-settings-page .ss-platform-search {
  min-height: var(--ss-ctrl-h);
  height: var(--ss-ctrl-h);
  padding: 0 var(--ss-ctrl-px);
  border: 1px solid var(--ss-ctrl-border);
  border-radius: var(--ss-ctrl-radius);
  font-size: var(--ss-ctrl-font);
  line-height: 1.25;
  background: #fff;
  color: var(--ss-slate-900);
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.super-settings-page input.field__input:focus,
.super-settings-page select.field__input:focus,
.super-settings-page .users-search-input:focus,
.super-settings-page .ss-icon-lib__search input:focus,
.super-settings-page .ss-platform-search:focus,
.super-settings-page .ss-trend-toolbar select:focus,
.super-settings-page .users-filter select:focus {
  outline: none;
  border-color: var(--ss-blue);
  box-shadow: 0 0 0 3px var(--ss-blue-dim);
}

/* Field layout: label above control, help below */
.super-settings-page .field,
.super-settings-page label.field,
.super-settings-page .ss-email-settings-form .field,
.super-settings-page .users-billing-field,
.super-settings-page .ss-icon-lib__form .field,
.super-settings-page .ss-ui-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  width: 100%;
  max-width: 100%;
}
.super-settings-page .field__label,
.super-settings-page .field > .field__label,
.super-settings-page .users-filter > span,
.super-settings-page .ss-trend-toolbar__field > span,
.super-settings-page .ss-ai-toolbar__field > span,
.super-settings-page .ss-ui-toolbar__field > span,
.super-settings-page .ss-ui-field > label {
  display: block;
  margin: 0;
  float: none;
  width: auto;
  max-width: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ss-slate-500);
  line-height: 1.3;
}
.super-settings-page .field__help {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  color: var(--ss-slate-500);
  line-height: 1.4;
}
.super-settings-page .ss-email-settings-form {
  display: flex;
  flex-direction: column;
  max-width: 36rem;
  width: 100%;
  margin: 0 0 1.5rem;
}
.super-settings-page .ss-check-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  background: var(--ss-slate-50);
  border: 1px solid var(--ss-slate-200);
  border-radius: 0.75rem;
}
.super-settings-page .ss-check-stack__title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ss-slate-500);
}
.super-settings-page .ss-check-stack label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ss-slate-700);
}
.super-settings-page .ss-form-actions,
.super-settings-page .ss-email-log-actions,
.super-settings-page .ss-ui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
}

/* Toolbars — fields bottom-aligned in one row */
.super-settings-page .ss-trend-toolbar,
.super-settings-page .ss-ai-toolbar,
.super-settings-page .ss-ui-toolbar,
.super-settings-page .ss-icon-lib__toolbar,
.super-settings-page .ss-infra-toolbar,
.super-settings-page .users-filter-bar__controls,
.super-settings-page .ss-bugs__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.75rem;
}
.super-settings-page .ss-trend-toolbar__field,
.super-settings-page .ss-ai-toolbar__field,
.super-settings-page .ss-ui-toolbar__field,
.super-settings-page .users-filter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  margin: 0;
  min-width: 9rem;
  flex: 0 1 auto;
}

/* Surfaces — one card look */
.super-settings-page .ss-chart-card,
.super-settings-page .ss-overview__col,
.super-settings-page .ss-trend-main-card,
.super-settings-page .ss-posthog-panel,
.super-settings-page .ss-icon-lib__bar,
.super-settings-page .users-filter-bar,
.super-settings-page .ss-trend-toolbar,
.super-settings-page .ss-platform-summary,
.super-settings-page .ss-infra-col,
.super-settings-page .ss-infra-focus-panel,
.super-settings-page .ss-more-charts {
  background: #fff;
  border: 1px solid var(--ss-slate-200);
  border-radius: var(--ss-radius-card);
  box-shadow: var(--ss-shadow-card);
}
.super-settings-page .ss-trend-toolbar,
.super-settings-page .ss-icon-lib__bar,
.super-settings-page .users-filter-bar {
  padding: 1rem;
  margin: 0;
}
.super-settings-page .ss-icon-lib__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.super-settings-page .ss-icon-lib__search {
  flex: 1 1 14rem;
  min-width: 11rem;
  display: flex;
  align-items: center;
}
.super-settings-page .ss-posthog-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-gap);
  padding: 1rem;
  margin: 0;
}
.super-settings-page .ss-posthog-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ss-slate-900);
}
.super-settings-page .users-panel__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.super-settings-page .users-panel__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.super-settings-page .users-panel__toolbar-actions .users-search-input {
  width: min(18rem, 100%);
  flex: 1 1 12rem;
}

/* Metric cards (KPIs) — inspo style: small caps label, bold value */
.super-settings-page .ss-kpi-grid,
.super-settings-page .ss-trend-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--ss-gap);
  align-items: stretch;
  margin: 0;
}
.super-settings-page .ss-kpi,
.super-settings-page .ss-trend-kpi-card,
.super-settings-page .ss-metric-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 5.5rem;
  margin: 0;
  padding: 1rem 1.05rem;
  background: #fff;
  border: 1px solid var(--ss-slate-200);
  border-left-width: 1px;
  border-left-color: var(--ss-slate-200);
  border-radius: 14px;
  box-shadow: var(--ss-shadow-card);
  gap: 0.35rem;
  transform: none;
  transition: transform 0.18s var(--ss-ease-out), box-shadow 0.18s ease, border-color 0.18s ease;
}
.super-settings-page .ss-kpi:hover,
.super-settings-page .ss-trend-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--ss-slate-300);
  box-shadow: var(--ss-shadow-hover);
}
.super-settings-page .ss-kpi__label,
.super-settings-page .ss-trend-kpi__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ss-slate-500);
}
.super-settings-page .ss-kpi__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #94a3b8;
}
.super-settings-page .ss-kpi__dot--blue { background: #2563eb; }
.super-settings-page .ss-kpi__dot--teal { background: #0d9488; }
.super-settings-page .ss-kpi__dot--violet { background: #7c3aed; }
.super-settings-page .ss-kpi__dot--rose { background: #e11d48; }
.super-settings-page .ss-kpi__dot--amber { background: #d97706; }
.super-settings-page .ss-kpi__dot--slate { background: #64748b; }
.super-settings-page .ss-kpi__value,
.super-settings-page .ss-trend-kpi__value {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  color: var(--ss-slate-900);
  opacity: 1;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.super-settings-page .ss-kpi__value--blue { color: #2563eb; }
.super-settings-page .ss-kpi__value--rose { color: #e11d48; }
.super-settings-page .ss-kpi__value--violet { color: #7c3aed; }
.super-settings-page .ss-kpi__sub,
.super-settings-page .ss-trend-kpi__sub {
  display: block;
  margin: 0;
  font-size: 0.73rem;
  color: #94a3b8;
  opacity: 1;
}

/* Grids — equal-height columns and cards */
.super-settings-page .ss-overview__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--ss-gap-lg);
  margin: 0;
}
.super-settings-page .ss-overview__col {
  padding: 1.05rem;
}
.super-settings-page .ss-chart-grid,
.super-settings-page .ss-trend-grid {
  display: grid;
  gap: var(--ss-gap);
  margin: 0;
}
.super-settings-page .ss-chart-card__head {
  padding: 1rem 1.05rem 0.25rem;
}
.super-settings-page .ss-chart-card__body {
  padding: 0.5rem 1.05rem 1.05rem;
}
.super-settings-page .ss-overview__cols,
.super-settings-page .ss-kpi-grid,
.super-settings-page .ss-trend-kpi-row,
.super-settings-page .ss-trend-grid,
.super-settings-page .ss-chart-grid,
.super-settings-page .ss-ui-grid,
.super-settings-page .ss-ui-opts,
.super-settings-page .users-billing-presets__grid {
  align-items: stretch;
}
.super-settings-page .ss-overview__col,
.super-settings-page .ss-chart-card,
.super-settings-page .ss-trend-main-card,
.super-settings-page .ss-ui-card,
.super-settings-page .ss-ui-opt,
.super-settings-page .ss-platform-card {
  height: 100%;
  box-sizing: border-box;
}
.super-settings-page .ss-ui-grid {
  display: grid;
  gap: var(--ss-gap-lg);
}
@media (min-width: 960px) {
  .super-settings-page .ss-ui-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  .super-settings-page .ss-ui-grid > .ss-ui-side {
    display: flex;
    flex-direction: column;
    gap: var(--ss-gap);
    min-height: 100%;
  }
  .super-settings-page .ss-ui-grid > .ss-ui-side > .ss-ui-card:last-child {
    flex: 1 1 auto;
  }
}
.super-settings-page .ss-bugs__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--ss-gap);
  align-items: stretch;
}
@media (max-width: 900px) {
  .super-settings-page .ss-bugs__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.super-settings-page .ss-bugs__list,
.super-settings-page .ss-bugs__detail {
  min-height: 16rem;
  border: 1px solid var(--ss-slate-200);
  border-radius: var(--ss-radius-card);
  background: #fff;
  overflow: auto;
}

/* Tables */
.super-settings-page .ss-table-scroll,
.super-settings-page .table-wrap,
.super-settings-page .users-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
}
.super-settings-page .data-table thead th,
.super-settings-page .ss-table thead th,
.super-settings-page #users-table thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ss-slate-500);
  background: rgb(248 250 252 / 0.9);
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--ss-slate-200);
  white-space: nowrap;
}
.super-settings-page .data-table tbody td,
.super-settings-page .ss-table tbody td,
.super-settings-page #users-table tbody td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--ss-slate-100);
  vertical-align: middle;
  font-size: 0.875rem;
}
.super-settings-page .data-table tbody tr,
.super-settings-page .ss-table tbody tr,
.super-settings-page #users-table tbody tr {
  transition: background-color 0.12s ease;
}
.super-settings-page .ss-table tbody tr:hover td,
.super-settings-page #users-table tbody tr.users-table-row:hover td {
  background: var(--ss-slate-50);
}
.super-settings-page td.data-table__cell--actions,
.super-settings-page th.data-table__th--actions,
.super-settings-page .users-table-actions,
.super-settings-page .users-table-actions-th {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
.super-settings-page td.data-table__cell--actions {
  display: table-cell;
  min-width: 11rem;
}
.super-settings-page .users-table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: auto;
}
.super-settings-page .ss-table td:first-child .cell-muted.ss-mono {
  word-break: break-all;
  font-size: 0.72rem;
}

/* Chips (plans, statuses) */
.ss-chip { display: inline-flex; align-items: center; padding: .18rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 650; background: #e2e8f0; color: #334155 }
.ss-chip--plan { background: #dbeafe; color: #1d4ed8 }
.ss-chip--ok, .ss-chip--active { background: #dcfce7; color: #15803d }
.ss-chip--admin { background: #ede9fe; color: #5b21b6 }
.ss-chip--danger, .ss-chip--past_due, .ss-chip--canceled { background: #fee2e2; color: #b91c1c }
.ss-chip--trialing, .ss-chip--comp { background: #ffedd5; color: #c2410c }

/* Info tip */
.super-settings-page .ss-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.super-settings-page .ss-info__btn {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--ss-slate-300);
  background: #fff;
  color: var(--ss-slate-500);
  font: 700 0.65rem/1 Outfit, system-ui, sans-serif;
  cursor: help;
  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}
.super-settings-page .ss-info:hover .ss-info__btn,
.super-settings-page .ss-info:focus-within .ss-info__btn {
  border-color: #5ba8d4;
  color: #0369a1;
  background: #e0f2fe;
}
.super-settings-page .ss-info__tip {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: min(18rem, 70vw);
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 12px 28px #0f172a33;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.14s ease, transform 0.14s var(--ss-ease-out);
}
.super-settings-page .ss-info:hover .ss-info__tip,
.super-settings-page .ss-info:focus-within .ss-info__tip {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Empty state */
.super-settings-page .ss-empty,
.super-settings-page .ss-icon-lib__empty,
.super-settings-page .ss-platform-detail__empty {
  color: var(--ss-slate-500);
  font-size: 0.85rem;
  padding: 1.25rem 0.5rem;
  line-height: 1.5;
  text-align: center;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 }

/* Overflow guards — the contract rules that stop text escaping boxes */
.super-settings-page :is(.ss-kpi-grid, .ss-trend-kpi-row, .ss-chart-grid, .ss-trend-grid,
  .ss-overview__cols, .ss-ui-grid, .ss-ui-opts, .ss-icon-lib__grid, .ss-platform-cards,
  .ss-bugs__layout, .users-billing-presets__grid, .users-billing-identity__grid,
  .ss-infra-nodes, .ss-platform-detail__grid, .ss-detail-meta, .ss-detail-targets,
  .ss-detail-devgrid, .ss-platform-algo, .ss-infra-legend, .ss-platform-docs) > * {
  min-width: 0;
}
.super-settings-page :is(.ss-kpi, .ss-trend-kpi-card, .ss-metric-card, .ss-overview__col,
  .ss-chart-card, .ss-ui-card, .ss-ui-opt, .ss-platform-card, .ss-infra-node,
  .ss-platform-detail__card, .ss-detail-meta__item, .ss-detail-target, .ss-detail-devcol,
  .ss-platform-algo__card, .ss-infra-legend__step, .ss-platform-doc) {
  min-width: 0;
  overflow-wrap: break-word;
}
.super-settings-page :is(.ss-kpi__value, .ss-kpi__label, .ss-kpi__sub,
  .ss-trend-kpi__value, .ss-trend-kpi__label, .ss-trend-kpi__sub,
  .ss-chart-card__title, .ss-chart-card__sub, .ss-platform-card__name,
  .ss-platform-card__sum) {
  overflow-wrap: break-word;
  min-width: 0;
}
.super-settings-page :is(.ss-trend-toolbar, .ss-ai-toolbar, .ss-ui-toolbar,
  .ss-icon-lib__toolbar, .ss-infra-toolbar, .users-filter-bar__controls, .ss-bugs__filters) > * {
  min-width: 0;
}
.super-settings-page :is(.ss-trend-toolbar__field, .ss-ai-toolbar__field,
  .ss-ui-toolbar__field, .users-filter) {
  min-width: 9rem;
}

/* ════════════════ 4a. Analytics & trends ════════════════ */
.super-settings-page .ss-analytics-loading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.82rem;
  font-weight: 600;
}
.super-settings-page .ss-analytics-loading[hidden] {
  display: none !important;
}
.ss-analytics-loading__spin { width: 1rem; height: 1rem; border: 2px solid #a5b4fc; border-top-color: #4338ca; border-radius: 50%; animation: ss-spin .7s linear infinite }
.ss-overview--loading .ss-kpi__value { opacity: .45 }

.ss-daily-filters { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap }
.ss-daily-filters select { font: inherit; cursor: pointer }
.ss-daily-filters select:focus { outline: 2px solid #6366f1; outline-offset: 1px }

.ss-trend-toolbar { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin: .75rem 0 1rem; padding: .85rem 1rem }
.ss-trend-toolbar__field { display: flex; flex-direction: column; gap: .2rem; min-width: 9rem }
.ss-trend-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .65rem; margin-bottom: 1rem }
.ss-trend-kpi { display: flex; flex-direction: column; gap: .15rem }
.ss-trend-kpi__label { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b }
.ss-trend-kpi__value { font-size: 1.35rem; font-weight: 700; color: #0f172a; line-height: 1.1 }
.ss-trend-kpi__sub { font-size: .75rem; color: #94a3b8 }
.ss-trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .85rem; margin-top: .85rem }
.ss-trend-wide { grid-column: 1/-1 }
.ss-trend-main-card { margin-bottom: .85rem }

.ss-posthog-panel { margin: 1.25rem 0; padding: 1rem 1.15rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem }
.ss-kpi--hazard { border-left-color: #ef4444 }
.ss-kpi--road { border-left-color: #8b5cf6 }

.ss-more-charts { margin-top: .85rem; padding: .35rem .75rem .55rem }
.ss-more-charts > summary { cursor: pointer; font-weight: 700; font-size: .85rem; padding: .45rem 0; color: #0f172a; list-style: none }
.ss-more-charts > summary::-webkit-details-marker { display: none }
.ss-more-charts > summary::before { content: "▸ "; color: #64748b }
.ss-more-charts[open] > summary::before { content: "▾ " }

/* ════════════════ 4b. Icon library + icon editor modal ════════════════ */
.ss-icon-lib { margin-top: .15rem }
.ss-icon-lib__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; margin: 0 0 .85rem }
.ss-icon-lib__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; margin-bottom: .55rem }
.ss-icon-lib__search { flex: 1 1 14rem; min-width: 11rem }
.ss-icon-lib__search input { width: 100% }
.ss-icon-lib__view { display: inline-flex; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff }
.ss-icon-lib__view-btn { appearance: none; border: 0; background: transparent; color: #64748b; font: 600 .72rem Outfit, system-ui, sans-serif; padding: .42rem .7rem; cursor: pointer; transition: background-color .14s ease, color .14s ease }
.ss-icon-lib__view-btn.is-active { background: #0f172a; color: #fff }
.ss-icon-lib__cats { display: flex; flex-wrap: wrap; gap: .28rem; margin-bottom: .75rem }
.ss-icon-lib__chip { appearance: none; border: 0; background: #f1f5f9; color: #475569; font: 600 .7rem Outfit, system-ui, sans-serif; padding: .32rem .6rem; border-radius: 999px; cursor: pointer; transition: background-color .14s ease, color .14s ease, transform .14s ease }
.ss-icon-lib__chip:hover { transform: translateY(-1px) }
.ss-icon-lib__chip.is-active { background: #0f172a; color: #fff }
.ss-icon-lib__count { margin-left: auto; font-size: .75rem; color: #64748b; font-weight: 600; white-space: nowrap }
.ss-icon-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); gap: .55rem }
.ss-icon-lib__grid[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: .3rem }
.ss-icon-lib__card { display: flex; flex-direction: column; gap: .4rem; padding: .55rem; border: 1px solid #e8eef4; border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: border-color .15s ease, transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s ease }
.ss-icon-lib__card:hover { border-color: #5ba8d4; box-shadow: 0 8px 20px #0f172a0d; transform: translateY(-2px) }
.ss-icon-lib__card:focus-visible { outline: 2px solid #5ba8d4; outline-offset: 2px }
.ss-icon-lib__card.is-inactive { opacity: .5 }
.ss-icon-lib__grid[data-view="list"] .ss-icon-lib__card { flex-direction: row; align-items: center; gap: .8rem; padding: .5rem .7rem; border-radius: 12px }
.ss-icon-lib__preview { display: flex; align-items: center; justify-content: center; height: 4.1rem; background: linear-gradient(180deg, #f8fafc, #f1f5f9); border-radius: 10px; flex: 0 0 auto }
.ss-icon-lib__grid[data-view="list"] .ss-icon-lib__preview { width: 2.6rem; height: 2.6rem }
.ss-icon-lib__preview img { max-width: 2.9rem; max-height: 2.9rem; object-fit: contain }
.ss-icon-lib__grid[data-view="list"] .ss-icon-lib__preview img { max-width: 1.85rem; max-height: 1.85rem }
.ss-icon-lib__meta { min-width: 0; flex: 1 }
.ss-icon-lib__label { display: block; font-size: .8rem; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em }
.ss-icon-lib__id { display: block; font-size: .62rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem }
.ss-icon-lib__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; align-items: center }
.ss-icon-lib__badge { font-size: .58rem; font-weight: 700; letter-spacing: .02em; padding: .12rem .35rem; border-radius: 999px; background: #f1f5f9; color: #64748b }
.ss-icon-lib__badge--platform { background: #e0f2fe; color: #0369a1 }
.ss-icon-lib__badge--user { background: #dcfce7; color: #166534 }
.ss-icon-lib__cat { font-size: .6rem; color: #94a3b8; text-transform: capitalize }
.ss-icon-lib__ws { font-size: .65rem; color: #64748b; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ss-icon-lib__status { margin: .35rem 0; padding: .5rem .7rem; border-radius: 10px; background: #ecfdf5; color: #065f46; font-size: .82rem; font-weight: 600 }
.ss-icon-lib__status--err { background: #fef2f2; color: #b91c1c }
.ss-icon-lib__status[hidden], .ss-icon-lib__empty[hidden] { display: none !important }
.ss-icon-lib__empty { color: #64748b; font-size: .85rem; padding: 1.25rem .25rem; line-height: 1.5; text-align: center }
.ss-icon-lib__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .75rem }
.ss-icon-lib__field-wide { grid-column: 1/-1 }
.ss-icon-lib__form-preview { width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 12px; background: linear-gradient(180deg, #f8fafc, #f1f5f9); flex: 0 0 auto }
.ss-icon-lib__form-preview[hidden] { display: none !important }
.ss-icon-lib__form-preview img { max-width: 3.75rem; max-height: 3.75rem; object-fit: contain }
.ss-icon-lib__form-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center }
.ss-icon-lib__form-actions .btn--danger { margin-left: auto; color: #b91c1c }
@media (max-width: 560px) { .ss-icon-lib__form-grid { grid-template-columns: minmax(0, 1fr) } }

/* Icon editor — centered modal with spring pop */
.ss-icon-modal-backdrop { position: fixed; inset: 0; z-index: 9200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #0f172a70; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: ssPlatformFadeIn .2s ease-out }
.ss-icon-modal-backdrop[hidden] { display: none !important; animation: none }
.ss-icon-modal { position: relative; top: auto; right: auto; left: auto; height: auto; max-height: min(88vh, 900px); width: min(28rem, 96vw); z-index: 9201; background: #fff; box-shadow: var(--ss-shadow-pop, 0 25px 70px #0f172a47); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; animation: ssPlatformPopIn .32s cubic-bezier(.34, 1.3, .64, 1) }
.ss-icon-modal[hidden] { display: none !important; animation: none }
.ss-icon-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.15rem .95rem; border-bottom: 1px solid #eef2f7 }
.ss-icon-modal__eyebrow { margin: 0; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8 }
.ss-icon-modal__title { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.25 }
.ss-icon-modal__close { appearance: none; border: 1px solid #e2e8f0; background: #f8fafc; width: 2.1rem; height: 2.1rem; border-radius: 10px; font-size: 1.25rem; line-height: 1; cursor: pointer; color: #475569; display: grid; place-items: center; flex: 0 0 auto; transition: background-color .14s ease, color .14s ease, transform .14s ease }
.ss-icon-modal__close:hover { background: #e2e8f0; color: #0f172a; transform: scale(1.05) }
.ss-icon-modal__body { padding: 1rem 1.15rem; overflow: auto; flex: 1 }
.ss-icon-modal__help { margin: 0 0 .85rem; font-size: .8rem; color: #64748b; line-height: 1.45 }
.ss-icon-modal__preview-row { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; padding: .75rem; border-radius: 12px; background: #f8fafc; border: 1px solid #eef2f7 }
.ss-icon-modal__preview-meta { font-size: .78rem; color: #64748b; line-height: 1.45; white-space: pre-line }
.ss-icon-modal__foot { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .85rem 1.15rem; border-top: 1px solid #eef2f7; background: #fff; flex: 0 0 auto }

/* ════════════════ 4c. Users tab + drawers ════════════════ */
.users-panel__toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap }
.users-panel__toolbar h2 { margin: 0 }
.users-search-input { min-width: min(18rem, 100%) }
.users-filter-bar { margin: .55rem 0 .65rem; padding: .7rem .85rem }
.users-filter-bar__stats { display: flex; flex-wrap: wrap; gap: .45rem .85rem; margin-bottom: .55rem }
.users-stat { font-size: .8rem; color: #64748b }
.users-stat strong { color: #0f172a; font-weight: 700 }
.users-filter { display: flex; flex-direction: column; gap: .15rem; min-width: 8.5rem }
.users-filter--org { min-width: 11rem; flex: 1 1 11rem }
.users-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
#users-table { min-width: 1080px; border-collapse: separate; border-spacing: 0; font-size: .86rem }
#users-table thead th { position: sticky; top: 0; z-index: 2 }
#users-table thead th.is-sortable { cursor: pointer; user-select: none }
#users-table thead th.is-sortable:hover { color: #0f172a }
#users-table thead th.is-sorted { color: #1d4ed8 }
#users-table thead th.is-sorted::after { content: attr(data-dir); margin-left: .25rem; font-size: .65rem; opacity: .8 }
#users-table thead th.is-sorted[data-dir="asc"]::after { content: "▲" }
#users-table thead th.is-sorted[data-dir="desc"]::after { content: "▼" }
#users-table tbody tr.users-table-row { cursor: pointer }
.users-col-user { min-width: 14rem; max-width: 18rem }
.users-user { display: flex; flex-direction: column; gap: .08rem; min-width: 0 }
.users-user__email { font-size: .86rem; font-weight: 650; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.users-user__name { font-size: .78rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.users-col-org { max-width: 11rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #334155 }
.users-col-plan .users-plan-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .18rem }
.users-col-last { white-space: nowrap; color: #64748b; font-size: .82rem }
.user-role-badge { display: inline-flex; align-items: center; padding: .12rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap }
.user-role-badge--admin { background: #dbeafe; color: #1d4ed8 }
.user-role-badge--organiser { background: #e2e8f0; color: #334155 }
.user-role-badge--active { background: #dcfce7; color: #15803d }
.user-role-badge--disabled { background: #fee2e2; color: #b91c1c }
.users-actions-menu { position: relative; flex: 0 0 auto }
.users-actions-menu__toggle { min-width: 2.1rem; font-size: 1.15rem; line-height: 1; letter-spacing: .08em }
.users-actions-menu__panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 11rem; padding: .35rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 28px #0f172a1f; display: flex; flex-direction: column; gap: .1rem; animation: ssRise .18s cubic-bezier(.16,1,.3,1) }
.users-actions-menu__panel[hidden] { display: none !important; animation: none }
.users-actions-menu__panel button { appearance: none; border: 0; background: transparent; text-align: left; padding: .45rem .6rem; border-radius: 8px; font: inherit; font-size: .82rem; cursor: pointer; color: #0f172a; width: 100%; transition: background-color .12s ease }
.users-actions-menu__panel button:hover { background: #f1f5f9 }
.users-actions-menu__panel button.btn--danger { color: #dc2626 }
.users-actions-menu__panel button.btn--danger:hover { background: #fef2f2 }

/* User drawer + billing drawer — centered modals (main CSS docks them right) */
.ss-userdrawer-backdrop { position: fixed; inset: 0; z-index: 9000; background: #0f172a70; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: ssPlatformFadeIn .2s ease-out }
.ss-userdrawer-backdrop[hidden] { display: none !important; animation: none }
.ss-userdrawer,
.users-billing-drawer { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(42rem, 96vw); max-height: min(88vh, 900px); height: auto; border-radius: 20px; box-shadow: 0 25px 70px #0f172a47; display: flex; flex-direction: column; overflow: hidden; z-index: 9001 }
.ss-userdrawer[hidden],
.users-billing-drawer[hidden] { display: none !important }
.ss-userdrawer__close,
.ss-icon-modal__close { border: 1px solid #e2e8f0; background: #f8fafc; width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center }
.ss-userdrawer__foot,
.ss-icon-modal__foot { flex-wrap: wrap }

.users-billing-drawer { z-index: 9002; width: min(680px, 96vw) }
.users-billing-identity { display: grid; gap: .55rem; margin: 0 0 1rem; padding: .85rem .95rem; border: 1px solid #e2e8f0; border-radius: 12px; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%) }
.users-billing-identity__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .75rem }
.users-billing-identity__field { min-width: 0 }
.users-billing-identity__field > span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; margin-bottom: .12rem }
.users-billing-identity__field > strong { display: block; font-size: .9rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.users-billing-chips { display: flex; flex-wrap: wrap; gap: .35rem }
.users-billing-summary { margin: .15rem 0 .85rem; font-size: .84rem; line-height: 1.45 }
.users-billing-presets__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem }
.users-billing-presets__grid .btn { justify-content: center; text-align: center; white-space: normal; line-height: 1.25; min-height: 2.4rem; padding: .42rem .55rem }
.users-billing-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .85rem; row-gap: 0 }
.users-billing-form .ss-userdrawer__h,
.users-billing-form .users-billing-form__actions,
.users-billing-form .users-billing-status { grid-column: 1/-1 }
.users-billing-form .users-billing-field { margin-bottom: .75rem }
.users-billing-form .users-billing-field:last-of-type { grid-column: 1/-1 }
.users-billing-form__actions { align-items: stretch }
.users-billing-form__actions .btn { flex: 1 1 auto; min-width: 0; justify-content: center }
@media (max-width: 560px) {
  .users-billing-form { grid-template-columns: minmax(0, 1fr) }
  .users-billing-presets__grid { grid-template-columns: minmax(0, 1fr) }
  .users-billing-identity__grid { grid-template-columns: minmax(0, 1fr) }
}

/* ════════════════ 4d. Engines & docs (platform catalog + modal) ════════════════ */
.ss-platform-summary { margin: .2rem 0 .55rem; padding: .55rem .7rem }
.ss-platform-summary__chips, .ss-platform-domains { display: flex; flex-wrap: wrap; gap: .35rem }
.ss-platform-domains { margin: 0 0 .75rem }
.ss-platform-domain { appearance: none; border: 1px solid #e2e8f0; background: #fff; border-radius: 12px; padding: .4rem .55rem; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; min-width: 7rem; flex: 1 1 8.5rem; max-width: 10rem; font: inherit; color: inherit; transition: border-color .15s ease, background-color .15s ease, transform .15s cubic-bezier(.16,1,.3,1) }
.ss-platform-domain:hover { transform: translateY(-1px); border-color: #93c5e8 }
.ss-platform-domain strong { font-size: .82rem }
.ss-platform-domain span { font-size: .7rem; color: #64748b; line-height: 1.3 }
.ss-platform-domain em { font-style: normal; font-size: .72rem; font-weight: 700; color: #5ba8d4; margin-top: .2rem }
.ss-platform-domain.is-active { border-color: #5ba8d4; background: #e0f2fe; box-shadow: 0 0 0 1px #5ba8d455 }
.ss-platform-chip { appearance: none; border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: .28rem .65rem; font: 600 .72rem Outfit, system-ui, sans-serif; color: #475569; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; transition: border-color .14s ease, background-color .14s ease, transform .14s ease }
.ss-platform-chip:hover { transform: translateY(-1px) }
.ss-platform-chip.is-active { border-color: #5ba8d4; background: #e0f2fe; color: #0c4a6e }
.ss-platform-chip strong { margin-right: .2rem }
.ss-platform-toolbar { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .75rem }
.ss-platform-search { flex: 1 1 14rem; min-width: 12rem }
.ss-platform-count { margin-left: auto; font-size: .75rem }
.ss-platform-group { margin: 0 0 1.15rem }
.ss-platform-group__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .5rem }
.ss-platform-group__head h2 { margin: 0; font-size: .95rem; font-weight: 750 }
.ss-platform-group__head span { font-size: .75rem; color: #64748b; font-weight: 600 }
.ss-platform-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .55rem }
.ss-platform-card { appearance: none; border: 1px solid #e2e8f0; background: #fff; border-radius: 14px; padding: .7rem .75rem; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .35rem; font: inherit; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s cubic-bezier(.16,1,.3,1) }
.ss-platform-card:hover { border-color: #93c5e8; box-shadow: 0 10px 24px #0f172a12; transform: translateY(-2px) }
.ss-platform-card__kind { font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8 }
.ss-platform-card__name { font-size: .95rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.25 }
.ss-platform-card__sum { margin: 0; font-size: .74rem; color: #64748b; line-height: 1.4; flex: 1; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden }
.ss-platform-card__cta { font-size: .72rem; font-weight: 700; color: #0369a1; margin-top: .15rem }
.ss-platform-status { display: inline-flex; padding: .12rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase }
.ss-platform-status--ok { background: #dcfce7; color: #166534 }
.ss-platform-status--warn { background: #ffedd5; color: #c2410c }
.ss-platform-status--admin { background: #ede9fe; color: #5b21b6 }
.ss-platform-status--muted { background: #e2e8f0; color: #475569 }
.ss-platform-status--wip { background: #fef3c7; color: #92400e }
.ss-platform-status--planned { background: #f1f5f9; color: #64748b }
.ss-platform-note { margin: .35rem 0 0; font-size: .75rem; color: #9a3412; line-height: 1.35 }
.ss-platform-tag { display: inline-block; margin: .1rem .2rem .1rem 0; padding: .1rem .35rem; border-radius: 6px; background: #f1f5f9; font-size: .68rem; color: #475569 }
.ss-platform-section { margin: 1.25rem 0; padding-top: 1rem; border-top: 1px solid #e2e8f0 }
.ss-platform-section__head { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: space-between; margin-bottom: .55rem }
.ss-platform-flow { padding: .85rem 1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff }
.ss-platform-flow__summary { margin: 0 0 .75rem; font-size: .85rem; color: #475569; line-height: 1.45 }
.ss-platform-flow__nodes { margin: 0 0 .85rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem }
.ss-platform-flow__nodes li { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; font-weight: 600; color: #0f172a }
.ss-platform-flow__n { flex: 0 0 1.4rem; height: 1.4rem; border-radius: 999px; background: #5ba8d4; color: #fff; display: grid; place-items: center; font-size: .7rem }
.ss-platform-flow__edges { margin: 0 0 .65rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem }
.ss-platform-flow__edges li { font-size: .8rem; color: #334155; padding: .45rem .55rem; border-radius: 8px; background: #f8fafc; border: 1px solid #f1f5f9; line-height: 1.4 }
.ss-platform-flow__arrow { color: #5ba8d4; font-weight: 700; margin: 0 .25rem }
.ss-platform-flow__label { display: block; margin-top: .2rem; color: #64748b; font-size: .75rem }
.ss-platform-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .55rem }
.ss-platform-doc { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s ease }
.ss-platform-doc:hover { border-color: #93c5e8; transform: translateY(-1px); box-shadow: 0 8px 18px #0f172a0d }
.ss-platform-doc__kind { font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b }
.ss-platform-doc__note { font-size: .75rem; color: #64748b }

/* Feature icons on cards / chips / modal */
.super-settings-page .ss-platform-card__top { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .4rem }
.super-settings-page .ss-platform-card__ico { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: .5rem; background: #f1f5f9; color: #2563eb; flex: 0 0 auto }
.super-settings-page .ss-platform-card__ico svg { width: 1rem; height: 1rem }
.super-settings-page .ss-platform-modal__title { display: flex; align-items: center; gap: .55rem }
.super-settings-page .ss-platform-modal__feat-ico { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: #eff6ff; color: #2563eb; flex: 0 0 auto }
.super-settings-page .ss-platform-modal__feat-ico svg { width: 1.15rem; height: 1.15rem }
.super-settings-page .ss-platform-chip__ico { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; color: #2563eb }
.super-settings-page .ss-platform-chip__ico svg { width: .85rem; height: .85rem }

/* ── Platform / infrastructure detail modal — spring pop + staggered content ── */
.ss-platform-modal-backdrop { position: fixed; inset: 0; z-index: 9300; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: #0f172a70; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: ssPlatformFadeIn .2s ease-out }
.ss-platform-modal-backdrop[hidden] { display: none !important; animation: none }
.ss-platform-modal { width: min(48rem, 100%); max-height: min(88vh, 920px); background: #fff; border-radius: 20px; box-shadow: 0 25px 70px #0f172a47, 0 0 0 1px #0f172a0a; display: flex; flex-direction: column; overflow: hidden; animation: ssPlatformPopIn .34s cubic-bezier(.34, 1.3, .64, 1) }
.ss-platform-modal[hidden] { display: none !important }
.ss-platform-modal__head { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem 1rem; border-bottom: 1px solid #eef2f7; flex: 0 0 auto }
.ss-platform-modal__eyebrow { margin: 0; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8 }
.ss-platform-modal__title { margin: .25rem 0 .55rem; font-size: 1.35rem; font-weight: 780; letter-spacing: -.025em; line-height: 1.2 }
.ss-platform-modal__badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center }
.ss-platform-modal__kind { display: inline-flex; padding: .14rem .5rem; border-radius: 999px; font-size: .65rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; background: #f1f5f9; color: #334155 }
.ss-platform-modal__aud { font-size: .75rem; color: #64748b; margin-left: .15rem }
.ss-platform-modal__close { appearance: none; border: 1px solid #e2e8f0; background: #f8fafc; width: 2.25rem; height: 2.25rem; border-radius: 10px; font-size: 1.35rem; line-height: 1; cursor: pointer; color: #475569; display: grid; place-items: center; flex: 0 0 auto; transition: background-color .14s ease, color .14s ease, transform .14s ease }
.ss-platform-modal__close:hover { background: #e2e8f0; color: #0f172a; transform: scale(1.05) }
.ss-platform-modal__tabs { display: flex; gap: .3rem; padding: .55rem 1.15rem; border-bottom: 1px solid #eef2f7; background: #f8fafc; flex: 0 0 auto; overflow-x: auto }
.ss-platform-modal__tab { appearance: none; border: 0; background: transparent; color: #64748b; font: 600 .78rem Outfit, system-ui, sans-serif; padding: .45rem .8rem; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; transition: background-color .16s ease, color .16s ease, transform .16s ease }
.ss-platform-modal__tab:hover { background: #eef2f7; color: #0f172a }
.ss-platform-modal__tab svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .85 }
.ss-platform-modal__tab.is-active { background: #0f172a; color: #fff }
.ss-platform-modal__tab.is-active svg { opacity: 1 }
.ss-platform-modal__tab:focus-visible { outline: 2px solid #5ba8d4; outline-offset: 2px }
.ss-platform-modal__body { padding: 1.1rem 1.25rem 1.35rem; overflow: auto; flex: 1; min-height: 0 }
/* Staggered entrance for modal content sections */
.ss-platform-modal__body > * { animation: ssRise .45s cubic-bezier(.16, 1, .3, 1) both }
.ss-platform-modal__body > *:nth-child(1) { animation-delay: .04s }
.ss-platform-modal__body > *:nth-child(2) { animation-delay: .09s }
.ss-platform-modal__body > *:nth-child(3) { animation-delay: .14s }
.ss-platform-modal__body > *:nth-child(4) { animation-delay: .19s }
.ss-platform-modal__body > *:nth-child(5) { animation-delay: .24s }
.ss-platform-modal__body > *:nth-child(6) { animation-delay: .29s }
.ss-platform-modal__body > *:nth-child(n+7) { animation-delay: .34s }

.ss-platform-lift { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease }
.ss-platform-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 18px #0f172a14 }
.ss-platform-lift:focus-visible { outline: 2px solid #5ba8d4; outline-offset: 2px }
.ss-platform-detail__overview { margin: 0 0 .85rem; font-size: .92rem; line-height: 1.55; color: #334155 }
.ss-platform-detail__where { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .75rem }
.ss-platform-detail__hint { margin: 0 0 1rem; font-size: .75rem; color: #94a3b8 }
.ss-platform-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .65rem; margin: 0 0 1.1rem }
.ss-platform-detail__card { position: relative; padding: .85rem .9rem .85rem 2.6rem; border: 1px solid #eef2f7; border-radius: 14px; background: linear-gradient(180deg, #fff, #f8fafc); transition: border-color .15s ease, transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s ease }
.ss-platform-detail__card:hover { border-color: #dbe6f0; transform: translateY(-1px); box-shadow: 0 8px 18px #0f172a0a }
.ss-platform-detail__card strong { display: block; font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: #64748b; margin-bottom: .35rem }
.ss-platform-detail__card p { margin: 0; font-size: .84rem; line-height: 1.45; color: #0f172a }
.ss-platform-detail__card-ico { position: absolute; left: .75rem; top: .85rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; color: #0369a1 }
.ss-platform-detail__card-ico svg { width: 16px; height: 16px }
.ss-platform-detail__h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: #64748b }
.ss-platform-detail__h svg { width: 14px; height: 14px; color: #5ba8d4 }
.ss-platform-detail__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem }
.ss-platform-detail__steps li { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; line-height: 1.45; color: #0f172a; border: 1px solid #eef2f7; border-radius: 12px; padding: .65rem .75rem; background: #fff; transition: border-color .15s ease, transform .15s cubic-bezier(.16,1,.3,1) }
.ss-platform-detail__steps li:hover { border-color: #dbe6f0; transform: translateX(2px) }
.ss-platform-detail__n { flex: 0 0 1.55rem; height: 1.55rem; border-radius: 999px; background: #0f172a; color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 700 }
.ss-platform-detail__sec { margin: 0 0 1.15rem }
.ss-platform-detail__sec:last-child { margin-bottom: 0 }
.ss-platform-detail__sec h3 { margin: 0 0 .55rem; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: #64748b }
.ss-platform-detail__bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem }
.ss-platform-detail__bullets li { position: relative; display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .7rem; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; font-size: .84rem; line-height: 1.45; color: #0f172a }
.ss-platform-detail__bullets li svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .15rem; color: #16a34a }
/* main CSS decorates generic list bullets — keep them off here */
.ss-platform-detail__bullets li::before { display: none !important; content: none !important }
.ss-platform-detail__rule-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .65rem }
.ss-platform-detail__rule-badge { display: inline-flex; padding: .18rem .5rem; border-radius: 999px; font-size: .65rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; background: #e0f2fe; color: #0369a1 }
.ss-platform-pill-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem }
.ss-platform-pill-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .55rem .65rem; border-radius: 12px; background: #f8fafc; border: 1px solid #eef2f7; transition: transform .14s ease, box-shadow .14s ease }
.ss-platform-pill-list li:hover { transform: translateY(-2px); box-shadow: 0 8px 18px #0f172a12 }
.ss-platform-pill { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .25rem .45rem .25rem .55rem; border-radius: 8px; background: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; color: #0f172a; line-height: 1.3; word-break: break-all }
.ss-platform-pill:focus-within { outline: 2px solid #5ba8d4; outline-offset: 2px; border-radius: 8px }
.ss-platform-pill--api { background: #dbeafe; color: #1e40af }
.ss-platform-pill--path { background: #e2e8f0; color: #1e293b }
.ss-platform-pill__copy { appearance: none; border: 0; background: #fff; color: #475569; font: 600 .62rem Outfit, system-ui, sans-serif; padding: .18rem .4rem; border-radius: 5px; cursor: pointer; flex: 0 0 auto; letter-spacing: .02em; text-transform: uppercase; transition: background-color .14s ease, color .14s ease }
.ss-platform-pill__copy:hover, .ss-platform-pill__copy.is-copied { background: #0f172a; color: #fff }
.ss-platform-pill-list__note { flex: 1 1 8rem; font-size: .76rem; color: #64748b; line-height: 1.35 }
.ss-platform-detail__related { display: flex; flex-wrap: wrap; gap: .35rem }
.ss-platform-detail__empty { margin: 1.5rem 0; text-align: center; color: #94a3b8; font-size: .85rem }
.ss-platform-params {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)) !important;
  gap: 0.5rem !important;
  align-items: stretch !important;
}
.ss-platform-param {
  appearance: none;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 0.65rem 0.75rem !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.2rem !important;
  min-width: 0 !important;
  min-height: 5.25rem !important;
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.ss-platform-param:hover {
  transform: none !important;
  border-color: #93c5fd !important;
  background: #f8fbff !important;
}
.ss-platform-param__label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
}
.ss-platform-param__value {
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}
.ss-platform-param__key {
  font-size: 0.62rem !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 0.08rem 0.3rem !important;
  border-radius: 4px !important;
  margin-top: auto;
}
.ss-platform-param.is-copied { border-color: #16a34a !important; background: #f0fdf4 !important; }
.ss-platform-param:focus-visible { outline: 2px solid #5ba8d4; outline-offset: 2px }
.ss-platform-algo { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .55rem }
.ss-platform-algo__card { position: relative; padding: .85rem; border: 1px solid #eef2f7; border-radius: 14px; background: linear-gradient(180deg, #fff, #f8fafc) }
.ss-platform-algo__n { position: absolute; top: .55rem; right: .65rem; font-size: .65rem; font-weight: 800; color: #94a3b8 }
.ss-platform-algo__ico { display: inline-flex; color: #0369a1; margin-bottom: .35rem }
.ss-platform-algo__ico svg { width: 18px; height: 18px }
.ss-platform-algo__card strong { display: block; font-size: .84rem; margin-bottom: .25rem }
.ss-platform-algo__card p { margin: 0; font-size: .78rem; line-height: 1.45; color: #475569 }
.ss-platform-acc { display: flex; flex-direction: column; gap: .4rem }
.ss-platform-acc__item { border: 1px solid #eef2f7; border-radius: 12px; background: #fff; overflow: hidden }
.ss-platform-acc__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; font-weight: 650; font-size: .86rem; transition: background-color .14s ease }
.ss-platform-acc__item > summary:hover { background: #f8fafc }
.ss-platform-acc__item > summary::-webkit-details-marker { display: none }
.ss-platform-acc__item[open] > summary { border-bottom: 1px solid #eef2f7; background: #f8fafc }
.ss-platform-acc__item[open] > *:not(summary) { animation: ssRise .25s cubic-bezier(.16,1,.3,1) }
.ss-platform-acc__ico { display: grid; place-items: center; color: #dc2626 }
.ss-platform-acc__ico svg { width: 16px; height: 16px }
.ss-platform-acc__title { flex: 1; min-width: 0 }
.ss-platform-acc__type { font-size: .62rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; padding: .12rem .4rem; border-radius: 999px; background: #fee2e2; color: #b91c1c }
.ss-platform-acc__body { padding: .7rem .8rem .85rem }
.ss-platform-acc__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .55rem }
.ss-platform-tagpill { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .68rem; padding: .2rem .4rem; border-radius: 6px; background: #e2e8f0; color: #0f172a }
.ss-platform-acc__query { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .45rem }
.ss-platform-acc__query > span:first-child { font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8 }
.ss-platform-acc__note { margin: 0; font-size: .78rem; color: #64748b; line-height: 1.4 }
.ss-platform-limits { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem }
.ss-platform-limit { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid #eef2f7; border-radius: 14px; background: #fff }
.ss-platform-limit__ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: #e0f2fe; color: #0369a1; flex: 0 0 auto }
.ss-platform-limit__ico svg { width: 16px; height: 16px }
.ss-platform-limit strong { display: block; font-size: .84rem; margin-bottom: .2rem }
.ss-platform-limit p { margin: 0; font-size: .78rem; line-height: 1.45; color: #475569 }

/* Detail modal — plain-English hero + visual flows */
.ss-detail-hero { padding: .95rem 1.05rem; border-radius: 14px; background: linear-gradient(135deg, #0f172a, #1e3a5f); color: #f8fafc; margin: 0 0 1rem }
.ss-detail-hero__label { margin: 0 0 .25rem; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7dd3fc }
.ss-detail-hero p { margin: 0; font-size: .92rem; line-height: 1.5; color: #e2e8f0 }
.ss-detail-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .35rem; margin: 0 0 1rem }
.ss-detail-flow__step { flex: 1 1 8.5rem; min-width: 7.5rem; padding: .7rem .75rem; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; position: relative; transition: border-color .15s ease, transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s ease; animation: ssRise .4s cubic-bezier(.16,1,.3,1) both }
.ss-detail-flow__step:nth-child(1) { animation-delay: .05s }
.ss-detail-flow__step:nth-child(3) { animation-delay: .12s }
.ss-detail-flow__step:nth-child(5) { animation-delay: .19s }
.ss-detail-flow__step:nth-child(7) { animation-delay: .26s }
.ss-detail-flow__step:nth-child(9) { animation-delay: .33s }
.ss-detail-flow__step:nth-child(11) { animation-delay: .4s }
.ss-detail-flow__step:hover { border-color: #93c5e8; transform: translateY(-2px); box-shadow: 0 8px 18px #0f172a0d }
.ss-detail-flow__n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: #0f172a; color: #fff; font-size: .68rem; font-weight: 800; margin-bottom: .4rem }
.ss-detail-flow__step strong { display: block; font-size: .78rem; font-weight: 750; margin-bottom: .2rem }
.ss-detail-flow__step p { margin: 0; font-size: .74rem; line-height: 1.4; color: #64748b }
.ss-detail-flow__arrow { display: flex; align-items: center; color: #94a3b8; font-weight: 800; font-size: 1rem; padding: 0 .05rem; flex: 0 0 auto }
@media (max-width: 640px) { .ss-detail-flow__arrow { display: none } }
.ss-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .45rem; margin: 0 0 1rem }
.ss-detail-meta__item { display: flex; gap: .5rem; align-items: flex-start; padding: .65rem .7rem; border-radius: 12px; background: #f8fafc; border: 1px solid #eef2f7 }
.ss-detail-meta__item svg { width: 16px; height: 16px; color: #0369a1; flex: 0 0 auto; margin-top: .1rem }
.ss-detail-meta__item strong { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8 }
.ss-detail-meta__item span { font-size: .82rem; font-weight: 600; color: #0f172a; line-height: 1.35 }
.ss-detail-pipeline {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)) !important;
  gap: 0.55rem !important;
  margin: 0 0 0.25rem !important;
  list-style: none !important;
  padding: 0 !important;
  align-items: stretch !important;
}
.ss-detail-pipe {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 8.5rem !important;
  height: 100% !important;
  padding: 0.85rem 0.9rem !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
  flex: none !important;
}
.ss-detail-pipe__top { display: flex; align-items: center; justify-content: space-between; gap: .35rem; margin-bottom: .45rem }
.ss-detail-pipe__ico { color: #0369a1 }
.ss-detail-pipe__ico svg { width: 18px; height: 18px }
.ss-detail-pipe__n {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem;
  border-radius: 999px; background: #0f172a; color: #fff; font-size: .68rem; font-weight: 800;
}
.ss-detail-pipe strong { display: block; font-size: .88rem; margin-bottom: .3rem; overflow-wrap: anywhere; line-height: 1.3 }
.ss-detail-pipe p { margin: 0; font-size: .76rem; line-height: 1.45; color: #475569; overflow-wrap: anywhere; flex: 1 }
.ss-detail-pipe-arrow { display: none !important }
.ss-detail-targets {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)) !important;
  gap: 0.55rem !important;
  align-items: stretch !important;
}
.ss-detail-target {
  display: flex !important; flex-direction: column !important; min-width: 0 !important;
  min-height: 8rem !important; height: 100% !important; padding: 0.85rem !important;
  border-radius: 14px !important; border: 1px solid #fee2e2 !important; background: #fff !important;
  box-sizing: border-box !important;
}
.ss-detail-target__h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: .84rem; font-weight: 750 }
.ss-detail-target__h svg { width: 15px; height: 15px; color: #dc2626; flex: 0 0 auto }
.ss-detail-target__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .4rem }
.ss-detail-target p { margin: 0; font-size: .74rem; color: #64748b; line-height: 1.35; overflow-wrap: anywhere }
.ss-detail-devgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .65rem }
.ss-detail-devcol { padding: .75rem; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff }
.ss-detail-devcol__h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; font-size: .78rem; font-weight: 750 }
.ss-detail-devcol__h svg { width: 16px; height: 16px; color: #0369a1 }

/* ════════════════ 4e. Infrastructure diagram ════════════════ */
.ss-infra-toolbar { display: flex; flex-wrap: wrap; gap: .45rem .55rem; align-items: center; margin: 0 0 .45rem }
.ss-infra-kinds { display: flex; flex-wrap: wrap; gap: .3rem }
.ss-infra-chip { appearance: none; border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: .28rem .6rem; font: 600 .7rem Outfit, system-ui, sans-serif; color: #475569; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease }
.ss-infra-chip:hover { transform: translateY(-1px) }
.ss-infra-chip.is-active { border-color: #0f172a; background: #0f172a; color: #fff }
.ss-infra-chip.is-off { opacity: .4 }
.ss-infra-chip--engine.is-active { background: #1d4ed8; border-color: #1d4ed8 }
.ss-infra-chip--feature.is-active { background: #0f766e; border-color: #0f766e }
.ss-infra-chip--integration.is-active { background: #c2410c; border-color: #c2410c }
.ss-infra-chip--surface.is-active { background: #5b21b6; border-color: #5b21b6 }
.ss-infra-chip--platform.is-active { background: #334155; border-color: #334155 }
.ss-infra-story { margin: 0 0 .75rem; padding: 0; border: 0; background: transparent; font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit }
.ss-infra-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0 }
@media (max-width: 720px) { .ss-infra-legend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } }
.ss-infra-legend__step { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .65rem; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; font-size: .72rem; line-height: 1.35; color: #334155 }
.ss-infra-legend__n { flex: 0 0 1.25rem; height: 1.25rem; border-radius: 999px; background: #0f172a; color: #fff; display: grid; place-items: center; font-size: .65rem; font-weight: 800 }
.ss-infra-legend__step strong { display: block; font-size: .74rem; font-weight: 750; color: #0f172a; margin-bottom: .1rem }
.ss-infra-legend__step span { color: #64748b }
.ss-infra-hint { margin: .55rem 0 0; font-size: .78rem; color: #0369a1; font-weight: 600 }
/* Diagram columns cascade in one after another */
.ss-infra-diagram { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box }
.ss-infra-diagram > * { animation: ssRise .5s cubic-bezier(.16, 1, .3, 1) both }
.ss-infra-diagram > *:nth-child(1) { animation-delay: .03s }
.ss-infra-diagram > *:nth-child(2) { animation-delay: .09s }
.ss-infra-diagram > *:nth-child(3) { animation-delay: .15s }
.ss-infra-diagram > *:nth-child(4) { animation-delay: .21s }
.ss-infra-diagram > *:nth-child(5) { animation-delay: .27s }
.ss-infra-diagram > *:nth-child(6) { animation-delay: .33s }
.ss-infra-diagram > *:nth-child(7) { animation-delay: .39s }
.ss-infra-col { padding: .75rem .85rem; min-width: 0; max-width: 100%; box-sizing: border-box }
.ss-infra-col__head { display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 .65rem }
.ss-infra-col__ico { flex: 0 0 2.25rem; height: 2.25rem; border-radius: 12px; display: grid; place-items: center; color: #fff }
.ss-infra-col__ico svg { width: 18px; height: 18px }
.ss-infra-col--clients .ss-infra-col__ico { background: #5b21b6 }
.ss-infra-col--engines .ss-infra-col__ico { background: #1d4ed8 }
.ss-infra-col--firebase .ss-infra-col__ico { background: #334155 }
.ss-infra-col--external .ss-infra-col__ico { background: #c2410c }
.ss-infra-col__head h3 { margin: 0; font-size: .95rem; font-weight: 750; letter-spacing: -.01em }
.ss-infra-col__head p { margin: .15rem 0 0; font-size: .75rem; color: #64748b; line-height: 1.35 }
.ss-infra-col__step { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; margin-bottom: .15rem }
.ss-infra-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr)); gap: .4rem; align-items: stretch; min-width: 0; max-width: 100% }
.ss-infra-node { appearance: none; border: 1px solid #e2e8f0; background: #fff; border-radius: 12px; padding: .52rem .58rem; font: inherit; color: #0f172a; cursor: pointer; display: flex; align-items: flex-start; gap: .42rem; text-align: left; transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s cubic-bezier(.16,1,.3,1); box-shadow: 0 1px 0 #fff inset; min-height: 3.5rem; height: 100%; box-sizing: border-box; min-width: 0; max-width: 100% }
.ss-infra-node.is-clickable:hover { background: #f0f9ff; border-color: #7dd3fc; transform: translateY(-2px); box-shadow: 0 6px 16px #0f172a0f }
.ss-infra-node.is-selected { background: #0f172a; border-color: #0f172a; color: #fff; box-shadow: 0 8px 20px #0f172a22 }
.ss-infra-node__ico { flex: 0 0 1.75rem; height: 1.75rem; border-radius: 10px; display: grid; place-items: center; background: #f1f5f9; color: #0369a1; transition: background-color .14s ease, color .14s ease }
.ss-infra-node__ico svg { width: 15px; height: 15px }
.ss-infra-node.is-selected .ss-infra-node__ico { background: #1e293b; color: #7dd3fc }
.ss-infra-node__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0 }
.ss-infra-node__text strong { font-size: .78rem; font-weight: 750; line-height: 1.25 }
.ss-infra-node__text em { font-style: normal; font-size: .65rem; color: #64748b; font-weight: 600 }
.ss-infra-node.is-selected .ss-infra-node__text em { color: #94a3b8 }
.ss-infra-node__dot { display: none }
.ss-infra-arrow { display: flex; justify-content: center; padding: .15rem 0; color: #94a3b8; font-size: 1.1rem; font-weight: 700; line-height: 1 }
.ss-infra-focus-panel { margin-top: .85rem; padding: 1rem 1.1rem; max-width: 100%; min-width: 0; animation: ssRise .35s cubic-bezier(.16, 1, .3, 1) }
.ss-infra-focus-panel[hidden] { display: none !important; animation: none }
.ss-infra-focus-panel__title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 750; display: flex; align-items: center; gap: .45rem }
.ss-infra-focus-panel__sub { margin: 0 0 .75rem; font-size: .8rem; color: #64748b }
.ss-infra-focus-panel__links { display: flex; flex-direction: column; gap: .35rem }
.ss-infra-focus-panel__links div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; color: #334155; padding: .4rem .55rem; border-radius: 10px; background: #f8fafc }
.ss-infra-focus-panel__links em { font-style: normal; color: #0284c7; font-weight: 700 }
.ss-infra-focus-panel__cta { margin-top: .75rem }

/* ════════════════ 5. Motion guards ════════════════ */
@media (prefers-reduced-motion: reduce) {
  .super-settings-page *,
  .super-settings-page *::before,
  .super-settings-page *::after,
  .ss-platform-modal,
  .ss-platform-modal-backdrop,
  .ss-platform-modal__body > *,
  .ss-icon-modal,
  .ss-icon-modal-backdrop,
  .ss-userdrawer-backdrop,
  .ss-detail-flow__step,
  .ss-infra-diagram > *,
  .ss-infra-focus-panel,
  .users-actions-menu__panel {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════ BOLD VISUAL PASS (unmistakable) ════════════════
 * Soft canvas, pill tabs, accent-top KPIs, roomier chrome.
 * Uses higher specificity + !important where the Vite bundle still fights.
 */

.super-settings-page {
  --ss-canvas: #eef2f7;
  --ss-radius-card: 18px;
  --ss-radius-modal: 22px;
  --ss-shadow-card: 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 28px rgb(15 23 42 / 0.07);
}

/* Soft gray canvas — white cards float on it */
.super-settings-page .main,
.super-settings-page main.main,
body.super-settings-page .main,
.super-settings-page {
  background: var(--ss-canvas, #eef2f7) !important;
}
.super-settings-page .main__body,
.super-settings-page .content,
.super-settings-page .super-settings {
  background: transparent !important;
}

/* Header: bigger title + Noribel brand chip */
.super-settings-page .ss-shell-head {
  margin: 0 0 1.25rem !important;
  padding: 0.35rem 0 0 !important;
  align-items: flex-end !important;
}
.super-settings-page .ss-shell-head__title {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  line-height: 1.15 !important;
}
.super-settings-page .ss-shell-head__title::before {
  content: "NORIBEL";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--ss-blue, #2563eb);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

/* Pill segmented tabs — totally different from underline */
.super-settings-page .ss-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  margin: 0 0 1.5rem !important;
  padding: 0.4rem !important;
  background: #fff !important;
  border: 1px solid #dbe3ee !important;
  border-bottom: 1px solid #dbe3ee !important;
  border-radius: 16px !important;
  box-shadow: var(--ss-shadow-card) !important;
}
.super-settings-page .ss-tabs__tab {
  position: relative !important;
  padding: 0.55rem 0.9rem !important;
  border-radius: 12px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.super-settings-page .ss-tabs__tab::after {
  display: none !important;
}
.super-settings-page .ss-tabs__tab:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.super-settings-page .ss-tabs__tab.ss-tabs__tab--active,
.super-settings-page .ss-tabs__tab[aria-selected='true'] {
  background: var(--ss-blue, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgb(37 99 235 / 0.28) !important;
}
.super-settings-page .ss-tabs__tab.ss-tabs__tab--active svg,
.super-settings-page .ss-tabs__tab[aria-selected='true'] svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* Sub-tabs: same pill language, smaller */
.super-settings-page .ss-infra-views,
.super-settings-page .ss-icon-lib__tabs {
  gap: 0.3rem !important;
  margin: 0 0 1rem !important;
  padding: 0.3rem !important;
  background: #fff !important;
  border: 1px solid #dbe3ee !important;
  border-bottom: 1px solid #dbe3ee !important;
  border-radius: 14px !important;
  box-shadow: var(--ss-shadow-card) !important;
}
.super-settings-page .ss-infra-views__btn,
.super-settings-page .ss-icon-lib__tab {
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 10px !important;
  padding: 0.45rem 0.8rem !important;
  background: transparent !important;
  color: #64748b !important;
}
.super-settings-page .ss-infra-views__btn::after,
.super-settings-page .ss-icon-lib__tab::after {
  display: none !important;
}
.super-settings-page .ss-infra-views__btn.is-active,
.super-settings-page .ss-icon-lib__tab.is-active {
  background: #0f172a !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* KPI cards: thick top accent, bigger type, float on canvas */
.super-settings-page .ss-kpi-grid,
.super-settings-page .ss-trend-kpi-row {
  gap: 0.85rem !important;
}
.super-settings-page .ss-kpi,
.super-settings-page .ss-trend-kpi-card,
.super-settings-page .ss-metric-card {
  background: #fff !important;
  border: 1px solid #dbe3ee !important;
  border-top: 3px solid var(--ss-blue, #2563eb) !important;
  border-left-width: 1px !important;
  border-radius: 16px !important;
  box-shadow: var(--ss-shadow-card) !important;
  padding: 1.1rem 1.15rem 1rem !important;
  min-height: 6.25rem !important;
}
.super-settings-page .ss-kpi:nth-child(6n+2),
.super-settings-page .ss-trend-kpi-card:nth-child(6n+2) { border-top-color: #0d9488 !important; }
.super-settings-page .ss-kpi:nth-child(6n+3),
.super-settings-page .ss-trend-kpi-card:nth-child(6n+3) { border-top-color: #7c3aed !important; }
.super-settings-page .ss-kpi:nth-child(6n+4),
.super-settings-page .ss-trend-kpi-card:nth-child(6n+4) { border-top-color: #e11d48 !important; }
.super-settings-page .ss-kpi:nth-child(6n+5),
.super-settings-page .ss-trend-kpi-card:nth-child(6n+5) { border-top-color: #d97706 !important; }
.super-settings-page .ss-kpi:nth-child(6n+6),
.super-settings-page .ss-trend-kpi-card:nth-child(6n+6) { border-top-color: #64748b !important; }

.super-settings-page .ss-kpi__label,
.super-settings-page .ss-trend-kpi__label {
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
.super-settings-page .ss-kpi__value,
.super-settings-page .ss-trend-kpi__value {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

/* Floating surface cards */
.super-settings-page .ss-chart-card,
.super-settings-page .ss-overview__col,
.super-settings-page .ss-trend-main-card,
.super-settings-page .ss-posthog-panel,
.super-settings-page .ss-icon-lib__bar,
.super-settings-page .users-filter-bar,
.super-settings-page .ss-trend-toolbar,
.super-settings-page .ss-platform-summary,
.super-settings-page .ss-infra-col,
.super-settings-page .ss-infra-focus-panel,
.super-settings-page .ss-more-charts,
.super-settings-page .ss-ui-card {
  background: #fff !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 18px !important;
  box-shadow: var(--ss-shadow-card) !important;
}

/* Primary buttons: solid Noribel blue, no gradient fight */
.super-settings-page .btn--primary {
  background: var(--ss-blue, #2563eb) !important;
  border-color: var(--ss-blue, #2563eb) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgb(37 99 235 / 0.22) !important;
}

/* Live races strip: stronger presence */
.super-settings-page .ss-live-races,
.super-settings-page .ss-live-races__list,
.super-settings-page [class*="ss-live"] {
  border-radius: 14px;
}

/* Panel titles: clearer hierarchy */
.super-settings-page .super-settings-panel > .panel__head .panel__title,
.super-settings-page .ss-section-h,
.super-settings-page .super-settings__h {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Fill the whole column so the gray canvas is obvious */
.main-column:has(.super-settings-page),
body:has(.super-settings-page) {
  background: #eef2f7 !important;
}

/* Kill page-level horizontal scroll at 100% zoom */
html:has(.super-settings-page),
body:has(.super-settings-page) {
  overflow-x: clip;
  max-width: 100%;
}
.shell:has(.super-settings-page) {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
.main-column:has(.super-settings-page) {
  min-width: 0 !important;
  max-width: 100%;
  overflow-x: clip;
}

/* EDGE PADDING FIX — beat main.css .panel{padding:0!important} */
.super-settings-page.main {
  background: #eef2f7 !important;
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 2.25rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: min(1220px, 100%) !important;
  min-width: 0 !important;
  overflow-x: clip;
}
.super-settings-page .panel.super-settings-panel,
.super-settings-page .super-settings-panel.panel,
.super-settings-page section.panel {
  padding: 1.1rem 1.15rem 1.2rem !important;
  margin: 0 0 1.1rem !important;
  border-radius: 16px !important;
  border: 1px solid #dbe3ee !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 28px rgb(15 23 42 / 0.07) !important;
  /* clip — only inner table/icon scrollers may scroll horizontally */
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.super-settings-page .super-settings-panel > .panel__head,
.super-settings-page .panel > .panel__head {
  padding: 0 0 0.75rem !important;
  margin: 0 0 0.25rem !important;
  min-width: 0;
  max-width: 100%;
}

/* Toolbars / tabs must wrap inside the column */
.super-settings-page .ss-tabs,
.super-settings-page .ss-icon-lib__tabs,
.super-settings-page .ss-icon-lib__bar,
.super-settings-page .ss-icon-lib__toolbar,
.super-settings-page .ss-icon-lib__cats {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.super-settings-page .ss-icon-lib__search {
  flex: 1 1 10rem !important;
  min-width: 0 !important;
}
.super-settings-page .ss-icon-lib__grid {
  max-width: 100%;
  min-width: 0;
}
.super-settings-page .users-table-scroll,
.super-settings-page .ss-table-scroll,
.super-settings-page .table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.ss-build-stamp {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══ Rich infra filters ═══ */
.ss-infra-toolbar--rich {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.65rem !important;
  padding: 0.9rem 1rem !important;
  margin: 0 0 1rem !important;
  background: #fff !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !important;
}
.ss-infra-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}
.ss-infra-filter-row--search {
  padding-top: 0.25rem;
  border-top: 1px solid #eef2f7;
}
.ss-infra-filter-label {
  flex: 0 0 auto;
  min-width: 2.75rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ss-infra-floors,
.ss-infra-show {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.ss-infra-floor,
.ss-infra-show-btn {
  appearance: none;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font: 650 0.75rem Outfit, system-ui, sans-serif;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.ss-infra-floor:hover,
.ss-infra-show-btn:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
}
.ss-infra-floor.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.ss-infra-show-btn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.ss-infra-filter-row--search .ss-platform-search {
  flex: 1 1 14rem;
  min-width: 12rem;
}
.ss-infra-col--empty {
  opacity: 0.7;
}
.ss-detail-story__body strong {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ss-detail-story__body p {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@keyframes ssInfraPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(37 99 235 / 0.35); }
  50% { box-shadow: 0 0 0 8px rgb(37 99 235 / 0); }
}
@keyframes ssInfraDraw {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes ssStoryOpen {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 8rem; }
}

.ss-infra-story-card {
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  color: #e2e8f0;
  margin: 0 0 0.85rem;
}
.ss-infra-story-card__label {
  margin: 0 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
}
.ss-infra-story-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #f8fafc;
  font-weight: 550;
}
.ss-infra-legend {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}
@media (max-width: 720px) {
  .ss-infra-legend { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.ss-infra-legend__step--clients .ss-infra-legend__n { background: #5b21b6; }
.ss-infra-legend__step--engines .ss-infra-legend__n { background: #1d4ed8; }
.ss-infra-legend__step--firebase .ss-infra-legend__n { background: #334155; }
.ss-infra-legend__step--external .ss-infra-legend__n { background: #c2410c; }

.ss-infra-diagram > .ss-infra-col,
.ss-infra-diagram > .ss-infra-arrow {
  animation: ssRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--ss-infra-i, 0) * 0.08s);
}
.ss-infra-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.35rem 0 !important;
  color: #64748b;
}
.ss-infra-arrow__line {
  flex: 1;
  max-width: 4rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #94a3b8, transparent);
  transform-origin: center;
  animation: ssInfraDraw 0.6s ease both;
}
.ss-infra-arrow__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

.ss-infra-node {
  position: relative;
}
.ss-infra-node.has-docs .ss-infra-node__badge {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.ss-infra-node.is-dimmed {
  opacity: 0.28 !important;
  filter: grayscale(0.4);
  transform: none !important;
}
.ss-infra-node.is-linked {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
}
.ss-infra-node.is-selected {
  animation: ssInfraPulse 1.6s ease-out infinite;
}

.ss-infra-focus-panel {
  border: 2px solid #2563eb !important;
  background: linear-gradient(180deg, #fff, #f0f7ff) !important;
}
.ss-infra-focus-panel__top {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}
.ss-infra-focus-panel__ico {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
}
.ss-infra-focus-panel__ico svg { width: 1.35rem; height: 1.35rem; }
.ss-infra-focus-panel__title { margin: 0 0 0.2rem; font-size: 1.1rem; font-weight: 800; }
.ss-infra-focus-panel__sub { margin: 0; font-size: 0.82rem; color: #475569; line-height: 1.4; }
.ss-infra-focus-panel__group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.65rem 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.ss-infra-focus-panel__group svg { width: 14px; height: 14px; color: #2563eb; }
.ss-infra-focus-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.65rem;
  margin: 0 0 0.3rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.ss-infra-focus-link:hover {
  border-color: #93c5fd;
  transform: translateX(3px);
}
.ss-infra-focus-link span { font-size: 0.85rem; font-weight: 700; color: #0f172a; }
.ss-infra-focus-link em { font-style: normal; font-size: 0.72rem; color: #64748b; }
.ss-infra-focus-panel__cta { margin-top: 1rem; }
.ss-infra-focus-panel__cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  justify-content: center;
  min-height: 2.75rem;
  font-size: 0.95rem;
  border-radius: 12px !important;
}
.ss-infra-focus-panel__cta .btn svg { width: 1.1rem; height: 1.1rem; }
.ss-infra-focus-panel__nodocs {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
}

/* Detail modal — ELI5 + interactive story */
.ss-platform-modal.is-animating {
  animation: ssPlatformPopIn 0.38s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.ss-platform-modal__eyebrow { letter-spacing: 0.1em !important; }
.ss-detail-eli5 {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
  color: #f8fafc;
  margin: 0 0 0.85rem;
  box-shadow: 0 12px 32px rgb(37 99 235 / 0.25);
}
.ss-detail-eli5__ico {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.15);
  display: grid;
  place-items: center;
  color: #fff;
}
.ss-detail-eli5__ico svg { width: 1.5rem; height: 1.5rem; }
.ss-detail-eli5__label {
  margin: 0 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #93c5fd;
}
.ss-detail-eli5__text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
  color: #fff;
}
.ss-detail-like {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  margin: 0 0 1rem;
}
.ss-detail-like--soft {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.ss-detail-like__ico {
  flex: 0 0 2rem;
  color: #c2410c;
  display: grid;
  place-items: center;
  padding-top: 0.1rem;
}
.ss-detail-like--soft .ss-detail-like__ico { color: #0369a1; }
.ss-detail-like__ico svg { width: 1.25rem; height: 1.25rem; }
.ss-detail-like__label {
  margin: 0 0 0.15rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a3412;
}
.ss-detail-like--soft .ss-detail-like__label { color: #0369a1; }
.ss-detail-like__text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: #0f172a;
}
.ss-detail-meta--kid .ss-detail-meta__item {
  background: #f8fafc;
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
}
.ss-detail-flow__hint {
  margin: -0.25rem 0 0.65rem;
  font-size: 0.78rem;
  color: #64748b;
}
.ss-detail-story {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.65rem;
  align-items: stretch;
  counter-reset: none;
}
.ss-detail-story__step {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  min-height: 7.5rem;
  height: 100%;
  box-sizing: border-box;
  animation: ssRise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--ss-step, 0) * 0.05s);
}
.ss-detail-story__n {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
}
.ss-detail-story__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}
.ss-detail-story__body strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: #0f172a;
}
.ss-detail-story__body p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #475569;
  overflow-wrap: anywhere;
}
.ss-detail-story__more,
.ss-detail-story__join { display: none !important }
.ss-detail-more {
  margin: 1rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 0.35rem 0.85rem 0.55rem;
}
.ss-detail-more > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  padding: 0.45rem 0;
}
.ss-detail-more p {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #334155;
}

@media (prefers-reduced-motion: reduce) {
  .ss-infra-diagram > .ss-infra-col,
  .ss-infra-diagram > .ss-infra-arrow,
  .ss-infra-node.is-selected,
  .ss-infra-arrow__line,
  .ss-platform-modal.is-animating,
  .ss-detail-story__step.is-open .ss-detail-story__more {
    animation: none !important;
  }
}

/* ═══ fit2: no page/panel horizontal scroll + compact client surfaces ═══ */
.super-settings-page .ss-infra-panel,
.super-settings-page .ss-infra-story,
.super-settings-page .ss-infra-toolbar,
.super-settings-page .ss-infra-views,
.super-settings-page .ss-platform-toolbar,
.super-settings-page .ss-platform-domains,
.super-settings-page .ss-platform-grid {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Users table scroll stays inside its wrapper, not the whole panel */
.super-settings-page #users-table {
  width: max-content;
  min-width: 1080px;
}
.super-settings-page .users-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Client surfaces: 4×2 grid on typical widths, tighter cards */
.ss-infra-col--clients .ss-infra-nodes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
@media (min-width: 640px) {
  .ss-infra-col--clients .ss-infra-nodes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ss-infra-col--clients .ss-infra-node {
  min-height: 3rem;
  padding: 0.42rem 0.48rem;
  border-radius: 10px;
}
.ss-infra-col--clients .ss-infra-node__ico {
  flex: 0 0 1.45rem;
  height: 1.45rem;
  border-radius: 8px;
}
.ss-infra-col--clients .ss-infra-node__ico svg {
  width: 13px;
  height: 13px;
}
.ss-infra-col--clients .ss-infra-node__text strong {
  font-size: 0.7rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ss-infra-col--clients .ss-infra-node__text em {
  display: none;
}
.ss-infra-col--clients .ss-infra-col__head h3 {
  font-size: 0.88rem;
}
.ss-infra-col--clients .ss-infra-col__head p {
  font-size: 0.72rem;
}

.ss-infra-filter-row--search .ss-platform-search {
  min-width: 0;
  flex: 1 1 10rem;
}

.ss-infra-story-card {
  margin: 0 0 0.65rem;
  padding: 0.75rem 0.9rem;
}
.ss-infra-story-card__text {
  font-size: 0.82rem;
  line-height: 1.45;
}