/* Modal Component — Uses Design Token CSS Variables */

/* ── Overlay ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg, rgba(0, 0, 0, 0.45));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 100);
  padding: 16px;
  animation: modalFadeIn 0.18s ease both;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Box ──────────────────────────────────────────────────── */
.modal-box {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg, 8px);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl, 0 16px 48px rgba(0,0,0,0.16));
  animation: modalScaleIn 0.2s var(--ease, cubic-bezier(0.16,1,0.3,1)) both;
  overflow: hidden;
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Header ───────────────────────────────────────────────── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--text-lg, 15px);
  font-weight: 600;
  color: var(--color-text-primary, var(--color-text-primary));
  letter-spacing: -0.01em;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted, var(--color-text-muted));
  font-size: 20px;
  padding: 2px 4px;
  line-height: 1;
  margin-left: var(--space-2, 8px);
  border-radius: var(--radius-sm, 2px);
  transition: color 0.1s, background 0.1s;
}
.modal-close:hover {
  color: var(--color-text-primary, var(--color-text-primary));
  background: var(--color-bg-tertiary);
}

/* ── Body ─────────────────────────────────────────────────── */
.modal-body {
  padding: var(--space-5, 20px);
  overflow-y: auto;
  flex: 1;
}

/* ── Footer ───────────────────────────────────────────────── */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-5, 20px);
  border-top: 1px solid var(--color-border-default);
  flex-shrink: 0;
}/* Language & Theme Switcher */

.lang-switcher {
  display: inline-flex;
  align-items: center;
}

/* ── Inline mode ─────────────────────────────────────────── */
.lang-switcher--inline.lang-switcher--sm { gap: 4px; }
.lang-switcher--inline.lang-switcher--md { gap: 6px; }

.lang-inline-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.1s, background 0.1s;
  font-family: var(--font-body);
  line-height: 1.4;
}
.lang-inline-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
}
.lang-inline-btn.active {
  color: var(--color-text-primary);
  font-weight: 600;
}

.lang-divider {
  font-size: 11px;
  color: var(--color-text-disabled);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.lang-theme-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: transform 0.1s;
  line-height: 1;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
}
.lang-theme-btn:hover { transform: scale(1.15); }

/* ── Dropdown mode ───────────────────────────────────────── */
.lang-dropdown-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-dropdown-btn {
  background: none;
  border: 1px solid var(--color-border-default);
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: border-color 0.1s;
  line-height: 1;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
}
.lang-dropdown-btn:hover { border-color: var(--color-border-strong); }

.lang-select {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 12px;
  padding: 4px 28px 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: var(--control-select-icon);
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none;
  font-family: var(--font-body);
  transition: border-color 0.1s;
}
.lang-select:focus { border-color: var(--color-border-focus); }

/* ── Icon-only mode ──────────────────────────────────────── */
.lang-switcher--icon { gap: 4px; }

.lang-icon-btn {
  background: none;
  border: 1px solid var(--color-border-default);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.1s;
  font-family: var(--font-body);
  line-height: 1.4;
}
.lang-icon-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  background: var(--color-bg-secondary);
}
.lang-icon-select {
  max-width: 92px;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  font: 600 10px/1.4 var(--font-body);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.lang-icon-select:focus,
.lang-inline-select:focus {
  outline: 1px solid var(--color-border-focus);
}
.lang-inline-select-wrap {
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  background: transparent;
}
.lang-inline-select {
  max-width: 128px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  padding: 2px 3px;
  border-radius: var(--radius-sm);
  font: 500 11px/1.4 var(--font-body);
  cursor: pointer;
}
.lang-inline-select:hover,
.lang-inline-select:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}
.lang-switcher--icon.lang-switcher--sm .lang-icon-btn { padding: 3px 6px; font-size: 10px; }
.lang-switcher--icon.lang-switcher--md .lang-icon-btn { padding: 4px 8px; font-size: 11px; }
.saas-preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
}

.saas-preview-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
  animation: saas-preview-pulse 1.6s ease-in-out infinite;
}

@keyframes saas-preview-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.saas-preview-banner-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.saas-preview-banner-copy strong {
  font-weight: 700;
  white-space: nowrap;
}

.saas-preview-banner-copy span {
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-preview-banner-exit {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.saas-preview-banner-exit:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 720px) {
  .saas-preview-banner-copy span {
    display: none;
  }
}
.saas-global-search {
  position: relative;
  width: min(280px, 100%);
  min-width: 0;
}

.saas-global-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  height: 32px;
  padding: 0 9px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}

@container saas-header-center (max-width: 180px) {
  .saas-global-search-trigger {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .saas-global-search-trigger span,
  .saas-global-search-trigger kbd {
    display: none;
  }
}

.saas-global-search-trigger:hover,
.saas-global-search-trigger[aria-expanded="true"] {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
}

.saas-global-search-trigger span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-global-search kbd,
.saas-global-search-popover kbd {
  padding: 1px 4px;
  color: var(--color-text-muted);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 3px;
  font-family: var(--font-code, monospace);
  font-size: 9px;
  line-height: 1.4;
  white-space: nowrap;
}

.saas-global-search-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 300;
  width: min(380px, calc(100vw - 32px));
  overflow: hidden;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-xl, 0 18px 48px rgba(0,0,0,.16));
  transform: translateX(-50%);
  animation: saasGlobalSearchIn .14s ease both;
}

@keyframes saasGlobalSearchIn {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.saas-global-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-default);
}

.saas-global-search-input-wrap input {
  min-width: 0;
  flex: 1;
  padding: 0;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 12px;
}

.saas-global-search-results {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 6px;
}

.saas-global-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 7px 9px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.saas-global-search-result:hover,
.saas-global-search-result.is-active {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
}

.saas-global-search-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-brand);
  background: var(--color-brand-soft, var(--color-bg-secondary));
  border-radius: 6px;
}

.saas-global-search-result-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.saas-global-search-result-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-global-search-result-copy small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-global-search-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 90px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.saas-global-search-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 12px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-default);
  font-size: 10px;
}

.saas-global-search-footer span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

@media (max-width: 720px) {
  .saas-global-search-trigger {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .saas-global-search-trigger span,
  .saas-global-search-trigger kbd {
    display: none;
  }

  .saas-global-search-popover {
    right: -90px;
    left: auto;
    transform: none;
  }

  @keyframes saasGlobalSearchIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .saas-global-search-trigger {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .saas-global-search-trigger span,
  .saas-global-search-trigger kbd {
    display: none;
  }
}

@media (max-width: 480px) {
  .saas-global-search-popover {
    position: fixed;
    top: 60px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}
/* ConfirmDialog — Uses Design Token CSS Variables */
.admin-confirm-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: adminConfirmFadeIn 0.15s ease;
}

.admin-confirm-dialog {
  background: var(--color-bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  max-width: 420px;
  width: 90%;
  padding: 24px;
  animation: adminConfirmSlideIn 0.2s ease;
}

.admin-confirm-header {
  margin-bottom: 12px;
}

.admin-confirm-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-primary);
}

.admin-confirm-body {
  margin-bottom: 20px;
}

.admin-confirm-message {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.admin-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.admin-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.admin-btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-secondary);
}

.admin-btn-primary {
  background: var(--color-brand);
  color: white;
}

.admin-btn-primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
}

.admin-btn-danger {
  background: var(--color-danger-strong);
  color: white;
}

.admin-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-danger-strong) 85%, black);
}

@keyframes adminConfirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes adminConfirmSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.saas-user-menu {
  position: relative;
}

.saas-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 180px;
  height: 32px;
  padding: 0 7px 0 4px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  cursor: pointer;
}

.saas-user-menu-trigger:hover,
.saas-user-menu-trigger[aria-expanded="true"] {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.saas-user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--color-brand-text);
  background: var(--color-brand);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.saas-user-menu-avatar.large {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.saas-user-menu-name {
  max-width: 110px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-user-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  width: 240px;
  padding: 8px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-xl, 0 18px 48px rgba(0,0,0,.16));
  animation: saasUserMenuIn .14s ease both;
}

@keyframes saasUserMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.saas-user-menu-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.saas-user-menu-summary > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.saas-user-menu-summary strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-user-menu-summary small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-user-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--color-border-default);
}

.saas-user-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.saas-user-menu-item:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
}

.saas-user-menu-item.danger:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

@media (max-width: 720px) {
  .saas-user-menu-name,
  .saas-user-menu-trigger > svg {
    display: none;
  }

  .saas-user-menu-trigger {
    padding: 0;
  }
}
.saas-data-panel {
  min-width: 0;
  background: var(--color-bg-primary, #fff);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted, #f0f0f2);
  overflow: hidden;
}

.saas-data-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 15px;
}

.saas-data-panel-heading {
  min-width: 0;
}

.saas-data-panel-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.saas-data-panel-title {
  margin: 0;
  color: var(--color-text-primary, #18181b);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.saas-data-panel-count {
  color: var(--color-text-muted, #71717a);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.saas-data-panel-description {
  max-width: 72ch;
  margin: 5px 0 0;
  color: var(--color-text-muted, #71717a);
  font-size: 12px;
  line-height: 1.5;
}

.saas-data-panel-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.saas-data-panel-toolbar {
  padding: 0 20px 14px;
}

.saas-data-panel-body {
  min-width: 0;
}

@media (max-width: 720px) {
  .saas-data-panel-header {
    flex-direction: column;
    padding-inline: 16px;
  }

  .saas-data-panel-actions {
    width: 100%;
  }

  .saas-data-panel-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  .saas-data-panel-toolbar {
    padding-inline: 16px;
  }
}
.saas-drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

.saas-drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--color-text-primary, #18181b) 24%, transparent);
  cursor: default;
  pointer-events: auto;
}

.saas-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--color-text-primary, #18181b);
  background: var(--color-bg-primary, #fff);
  box-shadow: -20px 0 56px color-mix(in srgb, var(--color-text-primary, #18181b) 15%, transparent);
  animation: saasDrawerIn 180ms cubic-bezier(.22, 1, .36, 1) both;
  pointer-events: auto;
  overflow: hidden;
}

.saas-drawer-header,
.saas-drawer-footer {
  flex: 0 0 auto;
}

.saas-drawer-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 72px;
  padding: 20px 22px 16px;
  box-shadow: inset 0 -1px 0 var(--color-border-muted, #f0f0f2);
}

.saas-drawer-heading {
  min-width: 0;
  flex: 1;
}

.saas-drawer-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.saas-drawer-description,
.saas-drawer-section-description {
  margin: 5px 0 0;
  color: var(--color-text-muted, #71717a);
  font-size: 12px;
  line-height: 1.55;
}

.saas-drawer-header-extra {
  flex: 0 0 auto;
}

.saas-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--color-text-muted, #71717a);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.saas-drawer-close:hover,
.saas-drawer-close:focus-visible {
  color: var(--color-text-primary, #18181b);
  background: var(--color-bg-secondary, #f4f4f5);
  outline: none;
}

.saas-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.saas-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  box-shadow: inset 0 1px 0 var(--color-border-muted, #f0f0f2);
}

.saas-drawer-section {
  margin-bottom: 26px;
}

.saas-drawer-section:last-child {
  margin-bottom: 0;
}

.saas-drawer-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.saas-drawer-section-title {
  margin: 0;
  color: var(--color-text-secondary, #52525b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.saas-drawer-section-actions {
  flex: 0 0 auto;
}

@keyframes saasDrawerIn {
  from { transform: translateX(18px); opacity: .5; }
  to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 640px) {
  .saas-drawer {
    width: 100% !important;
  }

  .saas-drawer-header,
  .saas-drawer-body {
    padding-inline: 16px;
  }

  .saas-drawer-footer {
    padding-inline: 16px;
  }
}
.saas-admin-drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.saas-admin-drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--color-text-primary, #18181b) 24%, transparent);
  opacity: 1;
  cursor: default;
  pointer-events: auto;
}

.saas-admin-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border-default, #e4e4e7);
  box-shadow: -18px 0 48px color-mix(in srgb, var(--color-text-primary, #18181b) 14%, transparent);
  transform: translateX(100%);
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: auto;
  overflow: hidden;
}

.saas-admin-drawer-layer-left .saas-admin-drawer {
  right: auto;
  left: 0;
  border-right: 1px solid var(--color-border-default, #e4e4e7);
  border-left: 0;
  box-shadow: 18px 0 48px color-mix(in srgb, var(--color-text-primary, #18181b) 14%, transparent);
  transform: translateX(-100%);
}

.saas-admin-drawer.is-open {
  transform: translateX(0);
}

.saas-admin-drawer-header,
.saas-admin-drawer-footer {
  flex: 0 0 auto;
  border-color: var(--color-border-default, #e4e4e7);
}

.saas-admin-drawer-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 68px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--color-border-default, #e4e4e7);
}

.saas-admin-drawer-heading {
  min-width: 0;
  flex: 1;
}

.saas-admin-drawer-title {
  margin: 0;
  color: var(--color-text-primary, #18181b);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.saas-admin-drawer-description,
.saas-admin-drawer-section-description {
  margin: 4px 0 0;
  color: var(--color-text-muted, #71717a);
  font-size: 12px;
  line-height: 1.5;
}

.saas-admin-drawer-header-extra,
.saas-admin-drawer-section-actions {
  flex: 0 0 auto;
}

.saas-admin-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--color-text-muted, #71717a);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}

.saas-admin-drawer-close:hover,
.saas-admin-drawer-close:focus-visible {
  color: var(--color-text-primary, #18181b);
  background: var(--color-bg-secondary, #f4f4f5);
  border-color: var(--color-border-default, #e4e4e7);
  outline: none;
}

.saas-admin-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.saas-admin-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border-default, #e4e4e7);
}

.saas-admin-drawer-section {
  margin-bottom: 24px;
}

.saas-admin-drawer-section:last-child {
  margin-bottom: 0;
}

.saas-admin-drawer-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.saas-admin-drawer-section-title {
  margin: 0;
  color: var(--color-text-secondary, #52525b);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .saas-admin-drawer {
    width: 100% !important;
  }
}
.admin-form-modal {
  max-width: calc(100vw - 32px);
  max-height: min(760px, calc(100vh - 32px));
}

.admin-form-modal .modal-header {
  align-items: flex-start;
  padding: 20px 24px 16px;
}

.admin-form-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-form-modal .modal-body {
  padding: 20px 24px 24px;
}

.admin-form-modal .modal-footer {
  min-height: 64px;
  padding: 12px 24px;
  background: var(--color-bg-secondary);
}

.admin-form-modal-description {
  margin: -6px 0 20px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.admin-form-modal .saas-schema-form,
.admin-form-modal .admin-form-grid {
  min-width: 0;
}

.admin-form-modal .saas-schema-form-grid,
.admin-form-modal .admin-form-grid {
  gap: 18px 16px;
}

.admin-form-modal .saas-schema-form-actions {
  display: none;
}

.admin-form-modal .admin-form-field,
.admin-form-modal .admin-form-group,
.admin-form-modal .saas-schema-field {
  gap: 7px;
}

.admin-form-modal .admin-form-label,
.admin-form-modal .saas-form-label,
.admin-form-modal .admin-field-label {
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.admin-form-modal .admin-form-input,
.admin-form-modal .saas-input {
  min-height: 38px;
}

.admin-form-modal textarea.admin-form-input,
.admin-form-modal textarea.saas-input {
  min-height: 88px;
  resize: vertical;
}

.admin-form-modal .admin-modal-section {
  padding-top: 18px;
  border-top: 1px solid var(--color-border-default);
}

.admin-form-modal .admin-modal-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.admin-form-modal .admin-modal-section-title {
  margin: 0 0 12px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
}

.admin-form-modal .admin-modal-section-description {
  margin: -6px 0 14px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.admin-table-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-table-truncate {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-pool-modal-form,
.expert-pool-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.model-pool-modal-form .model-pool-drawer-section,
.expert-pool-modal-form .expert-pool-section {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-default);
}

.model-pool-modal-form .model-pool-drawer-section:first-child,
.expert-pool-modal-form .expert-pool-section:first-child {
  padding-top: 0;
}

.model-pool-modal-form .model-pool-drawer-section:last-child,
.expert-pool-modal-form .expert-pool-section:last-child {
  border-bottom: 0;
}

.model-pool-modal-form .model-pool-drawer-form,
.expert-pool-modal-form .expert-pool-drawer-form {
  padding: 0;
}

.expert-pool-editor-state,
.model-pool-editor-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

@media (max-width: 640px) {
  .admin-form-modal .modal-header,
  .admin-form-modal .modal-body,
  .admin-form-modal .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* DataTable — Uses Design Token CSS Variables */

.data-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.data-table-density-compact .data-table-td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.data-table-density-spacious .data-table-td {
  padding-top: 18px;
  padding-bottom: 18px;
}

.data-table-sticky-header {
  max-height: 560px;
  overflow: auto;
}

.data-table-sticky-header .data-table-th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base, 13px);
  font-family: var(--font-body, inherit);
}

.data-table-th {
  padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-2-5, 10px);
  text-align: left;
  font-size: var(--text-xs, 11px);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.1em);
  border-bottom: 1px solid var(--color-border-default);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.data-table-th--check { width: 32px; }

.data-table-th.sortable { cursor: pointer; }
.data-table-th.sortable:hover { color: var(--color-text-primary, var(--color-text-primary)); }

.data-table-th.sorted { color: var(--color-text-primary, var(--color-text-primary)); }

.data-table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.data-table-sort-button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.data-table-th-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.data-table-sort-icon {
  font-size: 10px;
  opacity: 0.7;
}

.data-table-row {
  transition: background var(--duration-fast, 0.1s);
}
.data-table-row:hover td { background: var(--color-bg-secondary); }
.data-table-row.selected td { background: var(--color-brand-subtle); }
.data-table-row.clickable { cursor: pointer; }

.data-table-td {
  padding: var(--space-3, 12px);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-muted);
  vertical-align: middle;
}
.data-table-td--check { width: 32px; }
.data-table-row:last-child td { border-bottom: none; }

.data-table-check {
  width: 14px;
  height: 14px;
  accent-color: var(--color-brand, var(--color-text-primary));
  cursor: pointer;
}

.data-table-empty {
  text-align: center;
  padding: var(--space-12, 48px);
  color: var(--color-text-muted);
  font-size: var(--text-sm, 12px);
}
.saas-admin-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 24px;
  color: var(--color-text-secondary, #52525b);
  font-size: 12px;
  text-align: center;
}

.saas-admin-state strong {
  color: var(--color-text-primary, #18181b);
  font-size: 13px;
}

.saas-admin-state p {
  max-width: 360px;
  margin: 0;
  color: var(--color-text-muted, #71717a);
  line-height: 1.6;
}

.saas-admin-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-default, #e4e4e7);
  border-top-color: var(--color-brand, #18181b);
  border-radius: 50%;
  animation: saas-admin-spin 700ms linear infinite;
}

@keyframes saas-admin-spin {
  to { transform: rotate(360deg); }
}

.saas-admin-loading-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(320px, 100%);
  margin-top: 8px;
}

.saas-admin-loading-lines i {
  display: block;
  height: 8px;
  background: linear-gradient(90deg, var(--color-bg-secondary, #f4f4f5), var(--color-border-default, #e4e4e7), var(--color-bg-secondary, #f4f4f5));
  background-size: 200% 100%;
  border-radius: 99px;
  animation: saas-admin-shimmer 1.2s ease-in-out infinite;
}

.saas-admin-loading-lines i:nth-child(2) { width: 82%; }
.saas-admin-loading-lines i:nth-child(3) { width: 64%; }

@keyframes saas-admin-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.saas-admin-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-danger, #dc2626);
  background: var(--color-danger-subtle, #fef2f2);
  border-radius: 50%;
}

.saas-admin-permission-state .saas-admin-state-icon {
  color: var(--color-warning-strong, #b45309);
  background: var(--color-warning-subtle, #fffbeb);
}

.saas-admin-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-text-muted, #71717a);
  background: var(--color-bg-secondary, #f4f4f5);
  border-radius: 50%;
  font-size: 20px;
}

/* ── AdminTableSkeleton ──────────────────────────────────────── */

.saas-admin-table-skeleton {
  width: 100%;
  border: 1px solid var(--color-border-default, #e4e4e7);
  border-radius: 8px;
  overflow: hidden;
}

.saas-admin-skeleton-header {
  display: flex;
  gap: 1px;
  background: var(--color-bg-secondary, #f4f4f5);
  border-bottom: 1px solid var(--color-border-default, #e4e4e7);
}

.saas-admin-skeleton-th {
  flex: 1;
  height: 36px;
  background: linear-gradient(90deg, var(--color-bg-secondary), var(--color-border-subtle), var(--color-bg-secondary));
  background-size: 200% 100%;
  animation: saas-admin-shimmer 1.2s ease-in-out infinite;
}

.saas-admin-skeleton-body {
  display: flex;
  flex-direction: column;
}

.saas-admin-skeleton-tr {
  display: flex;
  gap: 1px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.saas-admin-skeleton-tr:last-child {
  border-bottom: none;
}

.saas-admin-skeleton-td {
  height: 48px;
  background: linear-gradient(90deg, var(--color-bg-primary), var(--color-bg-secondary), var(--color-bg-primary));
  background-size: 200% 100%;
  animation: saas-admin-shimmer 1.2s ease-in-out infinite;
}
.saas-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 14px 20px 16px;
  color: var(--color-text-secondary, #52525b);
  border-top: 1px solid var(--admin-line);
}

.saas-admin-pagination-info {
  font-size: 11px;
  white-space: nowrap;
}

.saas-admin-pagination-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

.saas-admin-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  color: var(--color-text-secondary, #52525b);
  background: var(--admin-control-bg, var(--color-bg-secondary));
  border: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--admin-line);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.saas-admin-page-button:hover:not(:disabled):not(.is-active) {
  color: var(--color-text-primary, #18181b);
  background: var(--color-bg-secondary, #f4f4f5);
}

.saas-admin-page-button.is-active {
  color: var(--color-brand-text, #fff);
  background: var(--color-brand, #18181b);
  box-shadow: none;
}

.saas-admin-page-button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.saas-admin-page-button.is-nav {
  font-size: 18px;
  line-height: 1;
}

.saas-admin-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--color-text-muted, #71717a);
}

.saas-admin-page-size {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 4px;
  color: var(--color-text-muted, #71717a);
  font-size: 11px;
}

.saas-admin-page-size select {
  height: 28px;
  padding: 0 20px 0 6px;
  color: inherit;
  background: var(--admin-control-bg, var(--color-bg-secondary));
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--admin-line);
  font: inherit;
}

@media (max-width: 560px) {
  .saas-admin-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
.saas-admin-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px;
  color: var(--color-text-primary, #18181b);
  background: var(--admin-accent-surface, var(--color-bg-secondary, #f4f4f5));
  border-top: 1px solid var(--admin-line, var(--color-border-default, #e4e4e7));
  border-bottom: 1px solid var(--admin-line, var(--color-border-default, #e4e4e7));
}

.saas-admin-bulk-count {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.saas-admin-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.saas-admin-bulk-clear {
  padding: 4px 2px;
  color: var(--color-text-muted, #71717a);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.saas-admin-bulk-clear:hover {
  color: var(--color-text-primary, #18181b);
}

@media (max-width: 560px) {
  .saas-admin-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-admin-bulk-actions {
    justify-content: flex-start;
  }
}
.admin-data-table {
  min-width: 0;
}

.admin-data-table .data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-data-table .data-table {
  min-width: 640px;
  color: var(--admin-text);
  font-size: 13px;
}

.admin-data-table .data-table-th {
  padding: 12px 16px;
  color: var(--admin-text-muted);
  background: var(--admin-soft-surface);
  border-bottom: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.admin-data-table .data-table-th.sortable {
  padding: 0;
}

.admin-data-table .data-table-sort-button {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  gap: 6px;
  padding: 12px 16px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-data-table .data-table-sort-button:hover {
  color: var(--admin-text);
  background: color-mix(in srgb, var(--admin-blue) 4%, transparent);
}

.admin-data-table .data-table-sort-button:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: -2px;
}

.admin-data-table .data-table-td {
  padding: 14px 16px;
  color: var(--admin-text);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--admin-line);
  vertical-align: middle;
}

.admin-data-table .data-table-row:hover td {
  background: var(--admin-accent-surface);
}

.admin-data-table .data-table-row.selected td {
  background: var(--color-brand-soft);
}

.admin-data-table .data-table-row:last-child td {
  box-shadow: none;
}

.admin-data-table .data-table-empty {
  min-height: 168px;
  padding: 48px 20px;
  color: var(--admin-text-subtle);
  background: var(--admin-card-bg);
}

.admin-table-state {
  min-height: 180px;
  padding: 20px 0;
}

.admin-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 16px 20px 10px;
  background: var(--admin-card-bg);
}

.admin-table-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.admin-table-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-table-summary-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 9px;
}

.admin-table-summary strong {
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 750;
}

.admin-table-summary span {
  color: var(--admin-text-subtle);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.admin-table-summary small {
  max-width: 72ch;
  color: var(--admin-text-subtle);
  font-size: 11px;
  line-height: 1.45;
}

.admin-table-header-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-table-filter-row {
  min-width: 0;
  padding: 2px 20px 14px;
  background: var(--admin-card-bg);
}

.admin-table-utility-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 5px;
}

.admin-table-utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  color: var(--admin-text-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color var(--admin-transition), background var(--admin-transition);
}

.admin-table-utility-button:hover,
.admin-table-utility-button.is-active {
  color: var(--admin-text);
  background: var(--admin-soft-surface);
}

.admin-table-utility-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.admin-table-columns {
  position: relative;
}

.admin-table-columns-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 170px;
  padding: 10px;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-line-strong);
  border-radius: 10px;
  box-shadow: var(--admin-shadow-lg);
}

.admin-table-columns-popover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.admin-table-columns-title {
  margin-bottom: 7px;
  color: var(--admin-text-subtle);
  font-size: 10px;
  font-weight: 700;
}

.admin-table-column-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--admin-text-muted);
  font-size: 11px;
  cursor: pointer;
}

.admin-table-column-option input {
  accent-color: var(--admin-blue);
}

.admin-table-bulk-progress {
  color: var(--admin-text-subtle);
  font-size: 11px;
}

@media (max-width: 720px) {
  .admin-data-table .data-table {
    min-width: 720px;
  }

  .admin-table-head {
    align-items: stretch;
    flex-direction: column;
    padding-inline: 16px;
  }

  .admin-table-head-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .admin-table-filter-row {
    padding-inline: 16px;
  }

  .admin-table-utility-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .admin-table-head {
    padding: 14px 16px 9px;
  }

  .admin-table-header-actions {
    width: 100%;
  }

  .admin-table-header-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  .admin-data-table .data-table-th,
  .admin-data-table .data-table-td {
    padding-inline: 12px;
  }
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-5);
  min-width: 0;
}

.admin-form .admin-form-grid {
  display: grid;
  gap: var(--admin-space-5) var(--admin-space-4);
}

.admin-form .admin-form-grid-columns-1 {
  grid-template-columns: minmax(0, 1fr);
}

.admin-form .admin-form-grid-columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form .admin-form-grid-columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-form .admin-form-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
}

.admin-form .admin-form-field-wide {
  grid-column: 1 / -1;
}

.admin-form .admin-form-label {
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.admin-form .admin-form-description {
  margin-top: -2px;
  color: var(--admin-text-subtle);
  font-size: 11px;
  line-height: 1.45;
}

.admin-form .admin-form-required {
  color: var(--color-danger);
}

.admin-form .admin-form-error {
  color: var(--color-danger);
  font-size: 11px;
  line-height: 1.4;
}

.admin-form .admin-form-field.has-error .admin-form-input,
.admin-form .admin-form-field.has-error .saas-input {
  border-color: var(--color-danger);
}

.admin-form .admin-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-4);
  padding-top: var(--admin-space-5);
  border-top: 1px solid var(--admin-border);
}

.admin-form .admin-form-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.admin-form .admin-form-section-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-form .admin-form-section-heading h3 {
  margin: 0;
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 700;
}

.admin-form .admin-form-section-heading p {
  max-width: 70ch;
  margin: 0;
  color: var(--admin-text-subtle);
  font-size: 11px;
  line-height: 1.5;
}

.admin-form .admin-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--admin-space-2);
  padding-top: var(--admin-space-2);
}

@media (max-width: 640px) {
  .admin-form .admin-form-grid-columns-2,
  .admin-form .admin-form-grid-columns-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.admin-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--admin-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: color var(--admin-transition), background var(--admin-transition), border-color var(--admin-transition);
}

.admin-menu-trigger:hover,
.admin-menu-trigger[aria-expanded="true"] {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  border-color: var(--admin-border);
}

.admin-menu-trigger:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
}

.admin-menu-trigger:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.admin-menu-popover {
  position: fixed;
  z-index: var(--z-popover, 110);
  overflow: hidden;
  padding: 4px;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow-lg);
}

.admin-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  gap: 9px;
  padding: 7px 9px;
  color: var(--admin-text);
  background: transparent;
  border: 0;
  border-radius: var(--admin-radius-sm);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.admin-menu-item:hover,
.admin-menu-item:focus-visible {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  outline: 0;
}

.admin-menu-item.is-danger {
  color: var(--color-danger);
}

.admin-menu-item.is-danger:hover,
.admin-menu-item.is-danger:focus-visible {
  background: var(--color-danger-subtle);
}

.admin-menu-item:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.admin-menu-item-icon {
  display: inline-flex;
  color: currentColor;
}

.admin-menu-separator {
  height: 1px;
  margin: 4px 2px;
  background: var(--admin-border);
}
.saas-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.saas-admin-toolbar-main,
.saas-admin-toolbar-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.saas-admin-toolbar-main {
  flex: 1;
  align-items: center;
}

.saas-admin-toolbar-end {
  justify-content: flex-end;
  flex: 0 0 auto;
}

.saas-admin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 340px;
  height: 36px;
  padding: 0 10px;
  color: var(--color-text-muted, #71717a);
  background: var(--admin-control-bg, var(--color-bg-secondary));
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--admin-line);
}

.saas-admin-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--color-brand, #2563eb), 0 0 0 3px color-mix(in srgb, var(--color-brand, #2563eb) 14%, transparent);
}

.saas-admin-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--color-text-primary, #18181b);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 12px;
}

.saas-admin-search input::-moz-placeholder {
  color: var(--color-text-muted, #71717a);
}

.saas-admin-search input::placeholder {
  color: var(--color-text-muted, #71717a);
}

.saas-admin-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.saas-admin-filter-label {
  color: var(--color-text-muted, #71717a);
  font-size: 11px;
  white-space: nowrap;
}

.saas-admin-filter select {
  height: 36px;
  min-width: 110px;
  padding: 0 28px 0 10px;
  color: var(--color-text-primary, #18181b);
  background: var(--admin-control-bg, var(--color-bg-secondary));
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--admin-line);
  font: inherit;
  font-size: 12px;
}

.saas-admin-filter select:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--color-brand, #2563eb), 0 0 0 3px color-mix(in srgb, var(--color-brand, #2563eb) 14%, transparent);
}

.saas-admin-toolbar-reset {
  min-height: 32px;
  padding: 0 9px;
  color: var(--color-text-secondary, #52525b);
  background: var(--admin-control-bg, var(--color-bg-secondary));
  border-radius: 8px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--admin-line);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.saas-admin-toolbar-reset:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--color-brand), 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.saas-admin-toolbar-reset:hover {
  color: var(--color-text-primary, #18181b);
  background: var(--admin-row-hover, var(--color-bg-secondary));
}

@media (max-width: 760px) {
  .saas-admin-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-admin-toolbar-end {
    justify-content: flex-start;
  }

  .saas-admin-search {
    max-width: none;
  }
}
.saas-admin-tabs {
  border-bottom: 1px solid var(--color-border-default, #e4e4e7);
}

.saas-admin-tab-list {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  overflow-x: auto;
}

.saas-admin-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 0 10px;
  color: var(--color-text-muted, #71717a);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.saas-admin-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--color-brand, #18181b);
  content: '';
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity 120ms ease, transform 120ms ease;
}

.saas-admin-tab:hover:not(:disabled),
.saas-admin-tab.is-active {
  color: var(--color-text-primary, #18181b);
}

.saas-admin-tab.is-active {
  font-weight: 650;
}

.saas-admin-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.saas-admin-tab:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.saas-admin-tab-count {
  min-width: 18px;
  padding: 1px 5px;
  color: var(--color-text-muted, #71717a);
  background: var(--color-bg-secondary, #f4f4f5);
  border-radius: 999px;
  font-size: 10px;
  text-align: center;
}
.saas-admin-descriptions {
  display: grid;
  grid-template-columns: repeat(var(--description-columns, 1), minmax(0, 1fr));
  margin: 0;
}

.saas-admin-description-item {
  display: grid;
  grid-template-columns: minmax(84px, .7fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-bg-secondary, #f4f4f5);
}

.saas-admin-description-item dt,
.saas-admin-description-item dd {
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.saas-admin-description-item dt {
  color: var(--color-text-muted, #71717a);
}

.saas-admin-description-item dd {
  color: var(--color-text-primary, #18181b);
  font-weight: 500;
  overflow-wrap: anywhere;
  text-align: right;
}

.saas-admin-description-item dd.is-muted {
  color: var(--color-text-muted, #71717a);
  font-weight: 400;
}

.saas-admin-descriptions.is-bordered {
  gap: 1px;
  overflow: hidden;
  background: var(--color-border-default, #e4e4e7);
  border: 1px solid var(--color-border-default, #e4e4e7);
  border-radius: var(--radius-sm, 4px);
}

.saas-admin-descriptions.is-bordered .saas-admin-description-item {
  padding: 10px 12px;
  background: var(--color-bg-primary);
  border-bottom: 0;
}

@media (max-width: 680px) {
  .saas-admin-descriptions {
    grid-template-columns: 1fr;
  }
}
.saas-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.saas-admin-badge-sm {
  padding: 2px 6px;
  font-size: 10px;
}

.saas-admin-badge-lg {
  padding: 4px 10px;
  font-size: 12px;
}

.saas-admin-badge-green {
  color: var(--color-success);
  background: var(--color-success-subtle);
  border-color: var(--color-success-line);
}

.saas-admin-badge-blue {
  color: var(--color-info);
  background: var(--color-info-subtle);
  border-color: var(--color-info-line);
}

.saas-admin-badge-amber {
  color: var(--color-warning-strong);
  background: var(--color-warning-subtle);
  border-color: var(--color-warning-line);
}

.saas-admin-badge-red {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
  border-color: var(--color-danger-line);
}

.saas-admin-badge-purple {
  color: var(--color-purple-strong);
  background: var(--color-purple-subtle);
  border-color: var(--color-purple-line);
}

.saas-admin-badge-gray {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.saas-admin-badge-black {
  color: var(--color-text-primary);
  background: var(--color-bg-inverse);
  border-color: var(--color-bg-inverse);
}

.saas-admin-badge-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
}
.saas-admin-stat-card {
  min-width: 0;
  padding: 16px;
  color: var(--color-text-primary, #18181b);
  text-align: left;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default, #e4e4e7);
  border-radius: var(--radius-md, 8px);
}

.saas-admin-stat-card.is-clickable {
  width: 100%;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.saas-admin-stat-card.is-clickable:hover {
  border-color: var(--color-border-strong, #a1a1aa);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text-primary, #18181b) 7%, transparent);
  transform: translateY(-1px);
}

.saas-admin-stat-card-top,
.saas-admin-stat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.saas-admin-stat-label,
.saas-admin-stat-meta {
  color: var(--color-text-muted, #71717a);
  font-size: 11px;
}

.saas-admin-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-secondary, #52525b);
  background: var(--color-bg-secondary, #f4f4f5);
  border-radius: 6px;
}

.saas-admin-stat-value {
  display: block;
  margin: 12px 0 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.saas-admin-stat-meta {
  justify-content: flex-start;
  gap: 6px;
}

.saas-admin-stat-meta .is-positive { color: var(--color-success, #16a34a); }
.saas-admin-stat-meta .is-negative { color: var(--color-danger, #dc2626); }

.saas-admin-stat-card-blue .saas-admin-stat-icon {
  color: var(--color-info, #2563eb);
  background: var(--color-info-subtle, #eff6ff);
}

.saas-admin-stat-card-green .saas-admin-stat-icon {
  color: var(--color-success, #16a34a);
  background: var(--color-success-subtle, #f0fdf4);
}

.saas-admin-stat-card-amber .saas-admin-stat-icon {
  color: var(--color-warning-strong, #b45309);
  background: var(--color-warning-subtle, #fffbeb);
}
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  color: var(--admin-text-subtle);
  font-size: 13px;
}

.admin-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.admin-breadcrumb-sep {
  margin-inline: 2px;
  color: var(--admin-text-disabled);
}

.admin-breadcrumb-link {
  color: var(--admin-text-muted);
  text-decoration: none;
  transition: color var(--admin-transition);
}

.admin-breadcrumb-link:hover {
  color: var(--admin-text);
  text-decoration: none;
}

.admin-breadcrumb-current {
  overflow: hidden;
  color: var(--admin-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* AdminAlert — shared inline alert styles (U015) */

.admin-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
  border: 1px solid;
  animation: admin-alert-in 0.15s ease-out;
}

@keyframes admin-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-alert-icon {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 0;
}

.admin-alert-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.admin-alert-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity 0.14s;
}

.admin-alert-dismiss:hover {
  opacity: 1;
}

/* Variants */
.admin-alert-error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.admin-alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.admin-alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.admin-alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}
/* AdminErrorBoundary — error fallback styles (A015) */

.admin-error-boundary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 20px;
}

.admin-error-boundary-card {
  text-align: center;
  max-width: 400px;
  padding: 40px 32px;
  background: var(--color-bg-primary);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--admin-shadow-sm, 0 8px 24px rgba(18, 32, 52, 0.08));
}

.admin-error-boundary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--admin-red, var(--color-danger, #b91c1c));
  background: color-mix(in srgb, var(--admin-red, #b91c1c) 10%, transparent);
  border-radius: 12px;
  margin-bottom: 12px;
  line-height: 1;
}

.admin-error-boundary-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary, #18181b);
  margin: 0 0 8px;
}

.admin-error-boundary-message {
  font-size: 13px;
  color: var(--color-text-muted, #71717a);
  margin: 0 0 20px;
  line-height: 1.5;
  word-break: break-word;
}

.admin-error-boundary-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.admin-error-boundary-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-secondary, #52525b);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s;
}

.admin-error-boundary-btn:hover {
  background: var(--color-bg-secondary, #f4f4f5);
}

.admin-error-boundary-btn.primary {
  background: var(--color-text-primary, #18181b);
  color: var(--color-text-inverse, #fff);
  border-color: var(--color-text-primary, #18181b);
}

.admin-error-boundary-btn.primary:hover {
  opacity: 0.9;
}
.workspace-overview-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.overview-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 0;
  margin-bottom: 16px;
  padding: 28px 32px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-border-default));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-primary)), var(--color-bg-primary) 66%);
}

.overview-hero-grid {
  display: none;
}

.overview-hero-content,
.overview-hero-actions {
  position: relative;
  z-index: 1;
}

.overview-hero-content {
  max-width: 670px;
}

.overview-hero h1 {
  max-width: 600px;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.overview-hero p {
  max-width: 600px;
  margin: 12px 0 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.overview-hero-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.overview-hero-status strong {
  max-width: 230px;
  overflow: hidden;
  padding: 4px 9px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-status-divider {
  width: 1px;
  height: 12px;
  margin: 0 4px;
  background: var(--color-border-default);
}

.overview-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.overview-primary-button,
.overview-secondary-button {
  min-height: 38px;
  padding-inline: 14px;
}

.overview-primary-button {
  box-shadow: 0 5px 12px color-mix(in srgb, var(--color-brand) 24%, transparent);
}

.overview-readiness-card {
  margin-bottom: 16px;
  padding: 18px 20px 16px;
}

.overview-readiness-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.overview-readiness-copy {
  min-width: 0;
}

.overview-readiness-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.overview-readiness-title-row h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.025em;
}

.overview-readiness-copy p {
  max-width: 620px;
  margin: 7px 0 0 33px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.overview-readiness-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 7px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
}

.overview-readiness-score {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 70px;
  text-align: right;
}

.overview-readiness-score strong {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

.overview-readiness-score span {
  color: var(--color-text-muted);
  font-size: 10px;
}

.overview-readiness-score.is-complete strong,
.overview-readiness-next.is-complete {
  color: var(--color-success-strong);
}

.overview-readiness-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.overview-readiness-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.overview-readiness-step:hover {
  border-color: var(--color-brand-border);
  background: color-mix(in srgb, var(--color-brand-soft) 38%, var(--color-bg-primary));
  box-shadow: var(--shadow-xs);
}

.overview-readiness-step.is-complete {
  border-color: color-mix(in srgb, var(--color-success) 22%, var(--color-border-default));
}

.overview-readiness-step-index {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: 11px;
  font-weight: 700;
}

.overview-readiness-step.is-complete .overview-readiness-step-index {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border-default));
  color: var(--color-success-strong);
  background: var(--color-success-subtle);
}

.overview-readiness-step-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.overview-readiness-step-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-readiness-step-copy span {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-readiness-step > svg {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.overview-readiness-next {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
  color: var(--color-brand);
  font-size: 11px;
  font-weight: 650;
}

.overview-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.overview-metric {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
}

.overview-action-icon,
.overview-empty-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
}

.overview-metric-copy {
  display: grid;
  align-content: space-between;
  gap: 3px;
  min-width: 0;
}

.overview-metric-label,
.overview-metric-detail {
  color: var(--color-text-muted);
  font-size: 11px;
}

.overview-metric-label {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.overview-metric-value {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
}

.overview-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
}

.overview-main-column,
.overview-side-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.overview-card {
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
}

.overview-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.overview-section-header h2 {
  margin: 5px 0 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.overview-text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.overview-text-link:hover {
  color: var(--color-brand-hover);
}

.overview-action-list {
  display: grid;
  gap: 8px;
}

.overview-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 62px;
  padding: 11px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.overview-action-card:hover {
  border-color: var(--color-brand-border);
  background: color-mix(in srgb, var(--color-brand-soft) 42%, var(--color-bg-primary));
  box-shadow: var(--shadow-xs);
}

.overview-action-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.overview-action-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.overview-action-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-action-copy span {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-action-copy small {
  color: var(--color-text-muted);
  font-size: 11px;
}

.overview-action-arrow {
  color: var(--color-text-muted);
}

.overview-activity-list {
  display: grid;
}

.overview-activity-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 0;
  border-top: 1px solid var(--color-border-default);
}

.overview-activity-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.overview-activity-marker {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}

.overview-activity-item:first-child .overview-activity-marker {
  color: var(--color-brand);
  background: var(--color-brand-soft);
}

.overview-activity-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.overview-activity-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-activity-copy span,
.overview-activity-item time {
  color: var(--color-text-muted);
  font-size: 11px;
}

.overview-activity-item time {
  flex: 0 0 auto;
}

.overview-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-secondary);
}

.overview-empty-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.overview-empty-state > div {
  flex: 1;
  min-width: 0;
}

.overview-empty-state strong {
  color: var(--color-text-primary);
  font-size: 12px;
}

.overview-empty-state p {
  margin: 3px 0 0;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.overview-period {
  color: var(--color-text-muted);
  font-size: 11px;
}

.overview-performance-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border-default);
}

.overview-performance-total strong {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.05em;
}

.overview-performance-total span {
  color: var(--color-text-muted);
  font-size: 11px;
}

.overview-performance-list {
  display: grid;
  gap: 12px;
  padding: 16px 0;
}

.overview-performance-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.overview-performance-list strong {
  color: var(--color-text-primary);
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 650;
}

.overview-performance-footnote {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  font-size: 11px;
}

.overview-performance-footnote svg {
  color: var(--color-success-strong);
}

.overview-usage-list {
  display: grid;
  gap: 17px;
}

.overview-usage-row {
  display: grid;
  gap: 7px;
}

.overview-usage-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.overview-usage-label strong {
  color: var(--color-text-primary);
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.overview-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--color-bg-tertiary);
}

.overview-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--color-brand);
  transform-origin: left center;
  transition: transform .35s ease;
}

.overview-progress-fill.warning {
  background: var(--color-warning-strong);
}

.overview-progress-fill.danger {
  background: var(--color-danger-strong);
}

.overview-state-card {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 560px;
  padding: 32px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  background: var(--color-bg-primary);
}

.overview-state-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 25%, var(--color-border-default));
  border-radius: var(--radius-md);
  color: var(--color-danger-strong);
  background: var(--color-danger-subtle);
}

.overview-state-card h1 {
  margin: 2px 0 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.025em;
}

.overview-state-card p {
  max-width: 46ch;
  margin: 0 0 8px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.overview-loading {
  display: grid;
  gap: 16px;
}

.overview-skeleton-hero,
.overview-skeleton-panel,
.overview-skeleton-metrics > span {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
}

.overview-skeleton-hero {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 176px;
  padding: 28px 32px;
}

.overview-skeleton-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.overview-skeleton-metrics > span {
  height: 92px;
}

.overview-skeleton-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
}

.overview-skeleton-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 250px;
  padding: 22px;
}

.overview-skeleton-panel.large {
  min-height: 290px;
}

.overview-skeleton-line,
.overview-skeleton-action,
.overview-skeleton-detail {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 25%,
    color-mix(in srgb, var(--color-bg-tertiary) 50%, var(--color-bg-primary)) 50%,
    var(--color-bg-tertiary) 75%
  );
  background-size: 240% 100%;
  animation: overviewSkeleton 1.2s ease-in-out infinite;
}

.overview-skeleton-line {
  height: 12px;
}

.overview-skeleton-line.wide {
  width: min(48%, 360px);
  height: 28px;
}

.overview-skeleton-line.medium {
  width: min(62%, 460px);
}

.overview-skeleton-line.short {
  width: 32%;
}

.overview-skeleton-action {
  height: 62px;
}

.overview-skeleton-detail {
  height: 18px;
}

@keyframes overviewSkeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 1080px) {
  .overview-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-hero-actions {
    justify-content: flex-start;
  }

  .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .overview-hero {
    padding: 24px;
  }

  .overview-readiness-steps {
    grid-template-columns: 1fr;
  }

  .overview-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .overview-content-grid {
    grid-template-columns: 1fr;
  }

  .overview-skeleton-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .overview-metrics-grid {
    grid-template-columns: 1fr;
  }

  .overview-card {
    padding: 18px;
  }

  .overview-readiness-card {
    padding: 16px;
  }

  .overview-readiness-header {
    gap: 12px;
  }

  .overview-readiness-copy p {
    margin-left: 0;
  }

  .overview-readiness-score {
    min-width: 52px;
  }

  .overview-hero-actions .saas-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .overview-hero-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .overview-status-divider {
    display: none;
  }

  .overview-action-copy span {
    white-space: normal;
  }

  .overview-empty-state {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .overview-empty-state .saas-btn {
    margin-left: 44px;
  }

  .overview-state-card {
    padding: 24px;
  }

  .overview-skeleton-hero {
    min-height: 160px;
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-skeleton-line,
  .overview-skeleton-action,
  .overview-skeleton-detail {
    animation: none;
  }
}

/* Customer workspace skin: quiet surfaces, clear action hierarchy. */
.workspace-overview-page {
  max-width: 1440px;
}

.workspace-overview-page .overview-hero {
  min-height: 190px;
  padding: 30px 32px;
  border: 0;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-brand) 13%, transparent), transparent 36%),
    linear-gradient(110deg, color-mix(in srgb, var(--color-brand-soft) 62%, var(--color-bg-primary)), var(--color-bg-primary) 72%);
  box-shadow: var(--shadow-md);
}

.workspace-overview-page .overview-hero-status strong {
  border: 0;
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.workspace-overview-page .overview-readiness-card,
.workspace-overview-page .overview-card {
  border: 0;
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.workspace-overview-page .overview-readiness-card:hover,
.workspace-overview-page .overview-card:hover {
  box-shadow: var(--shadow-md);
}

.workspace-overview-page .overview-readiness-icon,
.workspace-overview-page .overview-action-icon,
.workspace-overview-page .overview-empty-icon,
.workspace-overview-page .overview-state-icon {
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-border) 72%, transparent);
}

.workspace-overview-page .overview-readiness-step,
.workspace-overview-page .overview-action-card {
  border: 0;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.workspace-overview-page .overview-readiness-step:hover,
.workspace-overview-page .overview-action-card:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-brand-soft) 55%, var(--color-bg-secondary));
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

.workspace-overview-page .overview-readiness-step.is-complete {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success) 26%, transparent);
}

.workspace-overview-page .overview-readiness-step-index {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.workspace-overview-page .overview-metric {
  min-height: 100px;
  border: 0;
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.workspace-overview-page .overview-metric:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.workspace-overview-page .overview-activity-item {
  border-top-color: var(--color-border-muted);
}

.workspace-overview-page .overview-empty-state {
  border: 0;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.workspace-overview-page .overview-performance-total {
  border-bottom-color: var(--color-border-muted);
}

.workspace-overview-page .overview-performance-footnote {
  border-top-color: var(--color-border-muted);
}

.workspace-overview-page .overview-state-card {
  border: 0;
  box-shadow: var(--shadow-md);
}

.workspace-overview-page .overview-skeleton-hero,
.workspace-overview-page .overview-skeleton-panel,
.workspace-overview-page .overview-skeleton-metrics > span {
  border: 0;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 780px) {
  .workspace-overview-page .overview-hero {
    min-height: 0;
    padding: 24px;
  }
}

/* Workspace dashboard: one operating surface instead of stacked cards. */
.workspace-overview-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.workspace-overview-page .overview-hero {
  min-height: 0;
  margin-bottom: 0;
  padding: 0 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.workspace-overview-page .overview-hero h1 {
  font-size: 24px;
  letter-spacing: -.028em;
}

.workspace-overview-page .overview-hero p {
  max-width: 720px;
  margin-top: 8px;
  font-size: 13px;
}

.workspace-overview-page .overview-hero-status {
  margin-top: 13px;
}

.workspace-overview-page .overview-hero-status strong {
  padding: 3px 8px;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.workspace-overview-page .overview-hero-actions {
  align-self: flex-end;
}

.workspace-overview-page .overview-primary-button {
  box-shadow: none;
}

.workspace-overview-page .overview-readiness-card {
  margin-bottom: 0;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.workspace-overview-page .overview-readiness-header {
  margin-bottom: 14px;
}

.workspace-overview-page .overview-readiness-steps {
  gap: 0;
  overflow: hidden;
  border-radius: 9px;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.workspace-overview-page .overview-readiness-step {
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset -1px 0 0 var(--color-border-muted);
}

.workspace-overview-page .overview-readiness-step:last-child {
  box-shadow: none;
}

.workspace-overview-page .overview-readiness-step:hover,
.workspace-overview-page .overview-readiness-step.is-complete {
  border: 0;
  background: var(--color-brand-soft);
  box-shadow: inset -1px 0 0 var(--color-border-muted);
}

.workspace-overview-page .overview-readiness-step:last-child:hover,
.workspace-overview-page .overview-readiness-step:last-child.is-complete {
  box-shadow: none;
}

.workspace-overview-page .overview-readiness-next {
  margin-top: 11px;
}

.workspace-overview-page .overview-metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.workspace-overview-page .overview-metric {
  min-height: 84px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset -1px 0 0 var(--color-border-muted);
}

.workspace-overview-page .overview-metric:last-child {
  box-shadow: none;
}

.workspace-overview-page .overview-metric:hover {
  background: var(--color-bg-secondary);
  box-shadow: inset -1px 0 0 var(--color-border-muted);
  transform: none;
}

.workspace-overview-page .overview-metric:last-child:hover {
  box-shadow: none;
}

.workspace-overview-page .overview-metric-value {
  font-size: 22px;
}

.workspace-overview-page .overview-content-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}

.workspace-overview-page .overview-main-column,
.workspace-overview-page .overview-side-column {
  gap: 18px;
}

.workspace-overview-page .overview-card {
  padding: 18px 20px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.workspace-overview-page .overview-card:hover {
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.workspace-overview-page .overview-section-header {
  margin-bottom: 12px;
}

.workspace-overview-page .overview-section-header h2 {
  margin-top: 0;
  font-size: 15px;
}

.workspace-overview-page .overview-action-list {
  gap: 0;
  overflow: hidden;
  border-radius: 9px;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.workspace-overview-page .overview-action-card {
  min-height: 64px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.workspace-overview-page .overview-action-card:last-child {
  box-shadow: none;
}

.workspace-overview-page .overview-action-card:hover {
  border: 0;
  background: var(--color-brand-soft);
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.workspace-overview-page .overview-action-card:last-child:hover {
  box-shadow: none;
}

.workspace-overview-page .overview-activity-item {
  padding: 12px 0;
}

.workspace-overview-page .overview-performance-total {
  padding-bottom: 14px;
}

.workspace-overview-page .overview-performance-total strong {
  font-size: 28px;
}

.workspace-overview-page .overview-performance-list {
  gap: 10px;
  padding: 14px 0;
}

.workspace-overview-page .overview-usage-list {
  gap: 15px;
}

@media (max-width: 780px) {
  .workspace-overview-page .overview-hero {
    padding-bottom: 18px;
  }

  .workspace-overview-page .overview-hero-actions {
    align-self: stretch;
  }

  .workspace-overview-page .overview-readiness-steps {
    grid-template-columns: 1fr;
  }

  .workspace-overview-page .overview-readiness-step,
  .workspace-overview-page .overview-readiness-step:last-child {
    box-shadow: inset 0 -1px 0 var(--color-border-muted);
  }

  .workspace-overview-page .overview-readiness-step:last-child {
    box-shadow: none;
  }

  .workspace-overview-page .overview-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-overview-page .overview-metric:nth-child(2) {
    box-shadow: none;
  }

  .workspace-overview-page .overview-metric:nth-child(-n + 2) {
    box-shadow: inset 0 -1px 0 var(--color-border-muted);
  }
}

@media (max-width: 520px) {
  .workspace-overview-page .overview-metrics-grid {
    grid-template-columns: 1fr;
  }

  .workspace-overview-page .overview-metric,
  .workspace-overview-page .overview-metric:nth-child(2),
  .workspace-overview-page .overview-metric:nth-child(-n + 2) {
    box-shadow: inset 0 -1px 0 var(--color-border-muted);
  }

  .workspace-overview-page .overview-metric:last-child {
    box-shadow: none;
  }
}

/* Keep the overview useful without the marketing-style hero hierarchy. */
.saas-layout .workspace-overview-page {
  gap: 12px;
}

.saas-layout .workspace-overview-page .overview-hero {
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.saas-layout .workspace-overview-page .overview-hero-content {
  display: flex;
  align-items: center;
  min-width: 0;
}

.saas-layout .workspace-overview-page .overview-hero-content > h1,
.saas-layout .workspace-overview-page .overview-hero-content > p {
  display: none;
}

.saas-layout .workspace-overview-page .overview-hero-status {
  gap: 6px;
  margin: 0;
}

.saas-layout .workspace-overview-page .overview-hero-status > span:not(.overview-status-divider),
.saas-layout .workspace-overview-page .overview-status-divider {
  display: none;
}

.saas-layout .workspace-overview-page .overview-hero-status strong {
  max-width: 180px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
  font-size: 11px;
}

.saas-layout .workspace-overview-page .overview-hero-actions {
  gap: 6px;
}

.saas-layout .workspace-overview-page .overview-primary-button,
.saas-layout .workspace-overview-page .overview-secondary-button {
  min-height: 30px;
  padding-inline: 10px;
}

.saas-layout .workspace-overview-page .overview-readiness-card {
  padding: 10px;
}

.saas-layout .workspace-overview-page .overview-readiness-header {
  justify-content: flex-end;
  margin-bottom: 8px;
}

.saas-layout .workspace-overview-page .overview-readiness-copy {
  display: none;
}

.saas-layout .workspace-overview-page .overview-readiness-steps {
  border-radius: 6px;
}

.saas-layout .workspace-overview-page .overview-readiness-step {
  min-height: 48px;
  padding: 7px 9px;
}

.saas-layout .workspace-overview-page .overview-readiness-step-copy span,
.saas-layout .workspace-overview-page .overview-readiness-next {
  display: none;
}

.saas-layout .workspace-overview-page .overview-readiness-step-copy {
  gap: 0;
}

.saas-layout .workspace-overview-page .overview-metrics-grid {
  border-radius: 8px;
}

.saas-layout .workspace-overview-page .overview-metric {
  min-height: 66px;
  padding: 10px 12px;
}

.saas-layout .workspace-overview-page .overview-metric-value {
  font-size: 19px;
}

.saas-layout .workspace-overview-page .overview-content-grid,
.saas-layout .workspace-overview-page .overview-main-column,
.saas-layout .workspace-overview-page .overview-side-column {
  gap: 12px;
}

.saas-layout .workspace-overview-page .overview-card {
  padding: 12px;
  border-radius: 8px;
}

.saas-layout .workspace-overview-page .overview-section-header {
  align-items: center;
  margin-bottom: 8px;
}

.saas-layout .workspace-overview-page .overview-section-header h2 {
  margin: 0;
  font-size: 12px;
}

.saas-layout .workspace-overview-page .overview-action-list {
  border-radius: 6px;
}

.saas-layout .workspace-overview-page .overview-action-card {
  min-height: 48px;
  padding: 7px 9px;
}

.saas-layout .workspace-overview-page .overview-action-copy {
  gap: 0;
}

.saas-layout .workspace-overview-page .overview-action-copy > span {
  display: none;
}

.saas-layout .workspace-overview-page .overview-action-copy small {
  margin-top: 2px;
}

.saas-layout .workspace-overview-page .overview-activity-item {
  padding: 9px 0;
}

.saas-layout .workspace-overview-page .overview-performance-total {
  padding-bottom: 10px;
}

.saas-layout .workspace-overview-page .overview-performance-total strong {
  font-size: 24px;
}

.saas-layout .workspace-overview-page .overview-performance-list {
  gap: 8px;
  padding: 10px 0;
}

.saas-layout .workspace-overview-page .overview-usage-list {
  gap: 10px;
}

@media (max-width: 780px) {
  .saas-layout .workspace-overview-page .overview-hero {
    align-items: stretch;
    flex-direction: column;
    padding-bottom: 10px;
  }

  .saas-layout .workspace-overview-page .overview-hero-actions {
    justify-content: flex-start;
  }

  .saas-layout .workspace-overview-page .overview-readiness-steps {
    grid-template-columns: 1fr;
  }
}
/* SaasCharts — 统一图表样式（跟随 design token） */

.saas-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-muted, #6b7280);
  font-size: 12px;
  opacity: 0.7;
}

/* Tooltip */
.saas-chart-tooltip {
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default, #e3e4e6);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-primary, #fff);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  font-size: 12px;
  line-height: 1.4;
}

.saas-chart-tooltip-label {
  margin-bottom: 4px;
  color: var(--color-text-secondary, #52525b);
  font-weight: 600;
}

.saas-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.saas-chart-tooltip-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 2px;
}

.saas-chart-tooltip-name {
  color: var(--color-text-secondary, #52525b);
}

.saas-chart-tooltip-value {
  margin-left: auto;
  color: var(--color-text-primary, #1a1d21);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Donut 中心文字 */
.saas-donut-wrap {
  position: relative;
}

.saas-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.saas-donut-center-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #1a1d21);
  font-variant-numeric: tabular-nums;
}

.saas-donut-center-label {
  font-size: 10px;
  color: var(--color-text-muted, #6b7280);
}

/* Recharts 默认 focus outline 去掉（容器已可聚焦） */
.recharts-wrapper:focus,
.recharts-surface:focus {
  outline: none;
}
.saas-analytics-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-analytics-header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* These four were referenced in AnalyticsPage.jsx but never defined here, so
   the header actions, period select and trend panels fell back to unstyled
   defaults. `-header` and `-panel` are modifiers layered on the shared
   page-header / data-panel primitives, so they only need light tuning. */
.saas-analytics-header {
  align-items: flex-start;
}

.saas-analytics-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.saas-analytics-period {
  min-width: 132px;
}

.saas-analytics-panel {
  margin-bottom: 16px;
}

.saas-analytics-loading {
  padding: 24px 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.saas-analytics-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.saas-analytics-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  background: var(--color-surface);
}

.saas-analytics-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
  flex-shrink: 0;
}

.saas-analytics-stat-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.saas-analytics-stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
}

.saas-analytics-stat-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.saas-analytics-trend {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding-top: 12px;
  overflow-x: auto;
}

.saas-analytics-trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 0 24px;
  height: 100%;
  min-width: 24px;
}

.saas-analytics-trend-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
  background: var(--color-success);
  transition: height 0.2s ease;
}

.saas-analytics-trend-label {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.saas-analytics-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.saas-analytics-lower-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.saas-analytics-table-wrap {
  overflow-x: auto;
}

.saas-analytics-table .is-numeric {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.saas-analytics-path,
.saas-analytics-source {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-analytics-scope-hint {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 13px;
}
.saas-account-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-account-header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saas-account-loading {
  padding: 24px 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.saas-account-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
}

.saas-account-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saas-account-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.saas-account-hint {
  font-size: 11px;
}

.saas-account-hint.is-warning {
  color: var(--color-warning);
}

.saas-account-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.saas-account-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saas-account-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
}

.saas-account-toggle:last-child {
  border-bottom: none;
}

.saas-account-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.saas-account-toggle-copy strong {
  font-size: 13px;
  font-weight: 600;
}

.saas-account-toggle-copy small {
  font-size: 12px;
  color: var(--color-text-muted);
}

.saas-account-switch {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-border);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.saas-account-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.saas-account-switch:checked {
  background: var(--color-success);
}

.saas-account-switch:checked::after {
  transform: translateX(16px);
}

.saas-account-switch:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.saas-account-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.saas-account-provider-list {
  display: flex;
  flex-direction: column;
}

.saas-account-provider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.saas-account-provider:last-child {
  border-bottom: none;
}

.saas-account-provider-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.saas-account-provider-copy strong {
  font-size: 13px;
  font-weight: 600;
}

.saas-account-provider-copy small {
  font-size: 12px;
  color: var(--color-text-muted);
}
.saas-messages-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-messages-header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saas-messages-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border-default);
}

.saas-messages-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.saas-messages-tab:hover {
  color: var(--color-text-primary);
}

.saas-messages-tab.is-active {
  color: var(--color-success-strong);
  border-bottom-color: var(--color-success);
}

.saas-messages-tab-badge {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.saas-messages-loading {
  padding: 24px 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.saas-messages-scope-hint {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 13px;
}

.saas-messages-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.saas-messages-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 8px;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}

.saas-messages-item:hover {
  background: var(--color-surface-subtle);
}

.saas-messages-item.is-unread .saas-messages-item-subject {
  font-weight: 700;
}

.saas-messages-item-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.saas-messages-item-subject {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--color-text-primary);
}

.saas-messages-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

.saas-messages-item-preview {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-messages-item-time {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.saas-messages-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-messages-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.saas-messages-detail-meta dt {
  margin: 0 0 2px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.saas-messages-detail-meta dd {
  margin: 0;
  font-size: 13px;
  word-break: break-all;
}

.saas-messages-detail-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.saas-messages-compose {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.saas-messages-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.saas-messages-recipient {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  font-size: 13px;
}

.saas-messages-recipient button {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.saas-messages-directory {
  display: flex;
  flex-direction: column;
  max-height: 190px;
  margin-top: 6px;
  overflow-y: auto;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
}

.saas-messages-directory-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.saas-messages-directory-item:last-child {
  border-bottom: none;
}

.saas-messages-directory-item:hover {
  background: var(--color-surface-subtle);
}

.saas-messages-directory-item strong {
  font-size: 13px;
  font-weight: 600;
}

.saas-messages-directory-item small {
  color: var(--color-text-muted);
  font-size: 11.5px;
}

.saas-messages-directory-empty {
  padding: 14px 10px;
  color: var(--color-text-muted);
  font-size: 12.5px;
}
/* Badge — Uses Design Token CSS Variables */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 2px);
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.5;
  transition: opacity 0.1s;
  font-family: var(--font-body, inherit);
}

.badge--sm  { padding: 1px 5px; font-size: 9px; }
.badge--md  { padding: 2px 7px; font-size: 10px; }
.badge--lg  { padding: 3px 9px; font-size: 12px; }

.badge--clickable:hover { opacity: 0.8; }

/* Dot indicator */
.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Type variants — colors driven by inline style from JS, no CSS needed */
.badge--badge-default  {}
.badge--badge-success  {}
.badge--badge-warning  {}
.badge--badge-danger   {}
.badge--badge-info     {}
.badge--badge-neutral  {}
.badge--badge-free     {}
.badge--badge-paid     {}.saas-sites-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-sites-list-section .saas-data-panel-body {
  min-width: 0;
}

.saas-sites-table {
  min-width: 0;
  overflow-x: auto;
}

.saas-sites-table-head,
.saas-sites-table .saas-site-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 170px 100px 92px;
  align-items: center;
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.saas-sites-table-head {
  min-height: 38px;
  padding: 0 20px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: 11px;
  font-weight: 650;
}

.saas-sites-table-head span:last-child {
  text-align: right;
}

.saas-sites-table .saas-site-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 760px;
}

.saas-sites-table .saas-site-card {
  min-height: 76px;
  padding: 12px 20px;
  background: var(--color-bg-primary);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.saas-sites-table .saas-site-card:hover,
.saas-sites-table .saas-site-card.active {
  background: var(--color-bg-secondary);
  box-shadow: inset 3px 0 0 var(--color-brand), inset 0 -1px 0 var(--color-border-muted);
}

.saas-site-card-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.saas-site-card-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: 9px;
}

.saas-site-card-main {
  min-width: 0;
}

.saas-site-card-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.saas-site-card-title {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-site-card-domain {
  margin-top: 3px;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-family: var(--font-code);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-site-card-meta {
  display: none;
}

.saas-site-type-select {
  min-height: 34px;
}

.saas-sites-table .saas-btn {
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .saas-sites-table-head,
  .saas-sites-table .saas-site-card {
    grid-template-columns: minmax(260px, 1fr) 150px 92px 84px;
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}
.saas-bundles-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-bundles-page-header {
  margin-bottom: 0;
}

.saas-bundles-page-header .saas-page-header-icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

.saas-bundles-toolbar {
  flex-wrap: wrap;
}

.saas-bundles-toggle {
  min-height: 34px;
  padding-inline: 10px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-bundles-toggle:has(input:checked) {
  color: var(--color-brand);
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

.saas-bundle-sort {
  min-width: 154px;
  height: 36px;
}

.saas-bundles-page > .saas-scene-tabs {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  background: var(--color-bg-secondary);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-bundles-page .saas-scene-tab {
  min-height: 32px;
  padding: 0 11px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: 7px;
  white-space: nowrap;
}

.saas-bundles-page .saas-scene-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}

.saas-bundles-page .saas-scene-tab.active {
  color: var(--color-brand-text);
  background: var(--color-brand);
}

.saas-bundles-catalog .saas-data-panel-body {
  padding: 0 20px 20px;
}

.saas-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
}

.saas-bundle-grid-skeleton {
  align-items: stretch;
}

.saas-bundle-skeleton {
  display: flex;
  min-height: 236px;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-bg-secondary);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-bundle-skeleton-head,
.saas-bundle-skeleton-chips,
.saas-bundle-skeleton-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.saas-bundle-skeleton-head {
  gap: 10px;
}

.saas-bundle-skeleton-chips {
  margin-top: 3px;
}

.saas-bundle-skeleton-actions {
  margin-top: auto;
}

.saas-skeleton-block {
  display: block;
  background: var(--color-bg-tertiary);
  border-radius: 5px;
}

.saas-skeleton-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
}

.saas-skeleton-title {
  width: 42%;
  height: 13px;
}

.saas-skeleton-badge {
  width: 48px;
  height: 18px;
  margin-left: auto;
  border-radius: 999px;
}

.saas-skeleton-copy {
  width: 92%;
  height: 10px;
}

.saas-skeleton-copy-short {
  width: 68%;
}

.saas-skeleton-chip {
  width: 58px;
  height: 22px;
  border-radius: 6px;
}

.saas-skeleton-chip-wide {
  width: 82px;
}

.saas-skeleton-button {
  width: 44%;
  height: 32px;
  border-radius: 7px;
}

.saas-skeleton-button-primary {
  width: 56%;
  background: color-mix(in srgb, var(--color-brand) 16%, var(--color-bg-tertiary));
}

.saas-bundles-page .saas-bundle-card {
  min-width: 0;
  gap: 11px;
  padding: 16px;
  background: var(--color-bg-primary);
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-bundles-page .saas-bundle-card:hover {
  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-sm);
}

.saas-bundle-card-header {
  gap: 10px;
}

.saas-bundle-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: 9px;
  font-size: 0;
}

.saas-bundle-name {
  font-size: 14px;
}

.saas-bundle-scene,
.saas-bundle-services-label {
  color: var(--color-text-muted);
}

.saas-bundle-desc {
  min-height: 38px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.saas-bundle-services {
  gap: 6px;
}

.saas-bundle-service-chip {
  padding: 4px 7px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-bundle-popular-badge,
.saas-bundle-installed-badge {
  top: 0;
  padding: 4px 8px;
  border-radius: 0 0 7px 7px;
  font-size: 10px;
}

.saas-bundle-popular-badge {
  right: 12px;
  background: var(--color-warning-subtle);
  color: var(--color-warning-strong);
}

.saas-bundle-installed-badge {
  left: 12px;
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}

.saas-bundles-page .saas-bundle-actions {
  gap: 6px;
  padding-top: 10px;
  border-top: 0;
}

.saas-bundles-page .saas-bundle-actions .saas-btn {
  flex: 1;
  justify-content: center;
}

.saas-bundles-state-card {
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

@media (max-width: 720px) {
  .saas-bundles-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-bundles-toolbar {
    align-items: stretch;
    width: 100%;
  }

  .saas-bundles-toggle,
  .saas-bundle-sort {
    flex: 1 1 0;
  }

  .saas-bundles-catalog .saas-data-panel-body {
    padding-inline: 12px;
  }

  .saas-bundle-grid-skeleton {
    grid-template-columns: 1fr;
  }
}
.saas-services-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-services-page-header {
  margin-bottom: 0;
}

.saas-services-page-header .saas-page-header-info {
  gap: 7px;
}

.saas-services-page-header .saas-page-header-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

.saas-services-header-summary {
  color: var(--color-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.saas-services-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: var(--color-bg-primary);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-services-summary-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  box-shadow: inset -1px 0 0 var(--color-border-muted);
}

.saas-services-summary-item:last-child {
  box-shadow: none;
}

.saas-services-summary-label {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-services-summary-item strong {
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.saas-services-summary-item.is-success strong { color: var(--color-success-strong); }
.saas-services-summary-item.is-brand strong { color: var(--color-brand); }
.saas-services-summary-item.is-warm strong { color: var(--color-warning-strong); }
.saas-services-summary-item.is-accent strong { color: var(--color-info); }

.saas-services-scenes .saas-data-panel-body {
  padding: 0 20px 18px;
}

.saas-services-scenes .saas-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin: 0;
}

.saas-services-page .saas-scene-card {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 60px;
  gap: 10px;
  padding: 10px 12px;
  color: var(--color-text-secondary);
  text-align: left;
  background: var(--color-bg-secondary);
  border: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.saas-services-page .saas-scene-card:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-default), 0 3px 10px rgb(24 24 27 / 5%);
}

.saas-services-page .saas-scene-card.active {
  color: var(--color-brand-text);
  background: var(--color-brand);
  box-shadow: none;
}

.saas-services-page .saas-scene-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: 8px;
}

.saas-services-page .saas-scene-card.active .saas-scene-icon {
  color: inherit;
  background: rgb(255 255 255 / 15%);
}

.saas-services-page .saas-scene-label {
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-services-page .saas-scene-desc {
  margin-top: 3px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.35;
  opacity: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-services-page .saas-scene-card.active .saas-scene-desc {
  color: inherit;
  opacity: .72;
}

.saas-services-page .saas-scene-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--color-text-secondary);
  background: var(--color-brand-soft);
  border-radius: 9px;
}

.saas-services-page .saas-scene-bar-label {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.saas-services-page .saas-scene-bar-label strong {
  color: var(--color-text-primary);
  font-weight: 650;
}

.saas-services-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.saas-services-search {
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 180px;
  height: 36px;
  gap: 8px;
  padding: 0 10px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-services-search:focus-within {
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand-border), 0 0 0 3px var(--color-brand-soft);
}

.saas-services-search input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 13px;
}

.saas-services-search input::-moz-placeholder {
  color: var(--color-text-muted);
}

.saas-services-search input::placeholder {
  color: var(--color-text-muted);
}

.saas-services-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.saas-services-search button:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}

.saas-services-filter-select {
  min-width: 170px;
  height: 36px;
}

.saas-service-table {
  min-width: 0;
}

.saas-service-table-head,
.saas-service-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(120px, 160px) 96px 104px minmax(210px, auto);
  align-items: center;
  -moz-column-gap: 14px;
       column-gap: 14px;
}

.saas-service-table-head {
  min-height: 38px;
  padding: 0 20px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
}

.saas-service-table-head span:last-child {
  text-align: right;
}

.saas-service-list {
  display: flex;
  flex-direction: column;
}

.saas-service-row-wrap {
  animation: saasFadeUp 0.35s var(--ease) both;
}

.saas-service-row {
  min-height: 78px;
  padding: 12px 20px;
  background: var(--color-bg-primary);
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
  transition: background 150ms ease;
}

.saas-service-row:hover {
  background: var(--color-bg-secondary);
}

.saas-service-row.locked {
  background: var(--color-bg-secondary);
}

.saas-service-row-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: 9px;
}

.saas-service-row-content {
  min-width: 0;
}

.saas-service-row-name {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-service-row-desc {
  max-width: 42ch;
  margin-top: 3px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-service-row-category {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-service-row-tier {
  min-width: 0;
}

.saas-service-status {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.saas-service-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
}

.saas-service-status.is-active { color: var(--color-success-strong); }
.saas-service-status.is-needsInput { color: var(--color-warning-strong); }
.saas-service-status.is-locked { color: var(--color-text-muted); }

.saas-service-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.saas-service-row-actions .saas-btn {
  white-space: nowrap;
}

.saas-services-activated .saas-data-panel-body {
  padding: 0 20px 20px;
}

.saas-activated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.saas-activated-card {
  min-width: 0;
  padding: 13px 14px;
  background: var(--color-bg-secondary);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-activated-header {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.saas-activated-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: 8px;
}

.saas-activated-header .saas-title-sm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-activated-card > .saas-body-sm {
  margin: 7px 0 10px;
  color: var(--color-text-muted);
}

.saas-activated-actions {
  display: flex;
  gap: 6px;
}

.saas-activated-actions .saas-btn {
  flex: 1;
  justify-content: center;
}

.saas-drawer-form,
.saas-drawer-preview {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-drawer-form .saas-form-group {
  gap: 7px;
}

.saas-drawer-form .saas-form-label {
  color: var(--color-text-primary);
  font-weight: 650;
}

.saas-drawer-form .saas-input,
.saas-drawer-form .saas-styled-select-trigger {
  min-height: 38px;
}

.saas-drawer-form textarea.saas-input {
  min-height: 92px;
  padding-block: 10px;
}

.saas-drawer-form .saas-install-hint {
  margin-top: 0;
}

.saas-drawer-preview .saas-code-wrap {
  min-width: 0;
}

@media (max-width: 1180px) {
  .saas-service-table-head,
  .saas-service-row {
    grid-template-columns: minmax(220px, 1fr) 120px 86px 96px minmax(180px, auto);
    -moz-column-gap: 10px;
         column-gap: 10px;
  }

  .saas-service-row-actions .saas-btn {
    padding-inline: 8px;
  }
}

@media (max-width: 900px) {
  .saas-services-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-services-summary-item:nth-child(2n) {
    box-shadow: none;
  }

  .saas-services-summary-item:nth-child(-n + 2) {
    box-shadow: inset 0 -1px 0 var(--color-border-muted);
  }

  .saas-service-table {
    overflow-x: auto;
  }

  .saas-service-table-head,
  .saas-service-row {
    min-width: 860px;
  }
}

@media (max-width: 640px) {
  .saas-services-summary {
    grid-template-columns: 1fr 1fr;
  }

  .saas-services-summary-item {
    padding: 12px;
  }

  .saas-services-scenes .saas-data-panel-body,
  .saas-services-activated .saas-data-panel-body {
    padding-inline: 12px;
  }

  .saas-scene-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .saas-scene-card {
    min-height: 56px !important;
  }

  .saas-scene-desc {
    display: none;
  }

  .saas-scene-bar {
    align-items: stretch !important;
    flex-direction: column;
  }

  .saas-services-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-services-search,
  .saas-services-filter-select,
  .saas-services-toolbar > .saas-btn {
    width: 100%;
    flex-basis: auto;
  }

  .saas-activated-grid {
    grid-template-columns: 1fr;
  }
}
.saas-plans-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-plans-page-header {
  margin-bottom: 0;
}

.saas-plans-page-header .saas-page-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 24px;
  letter-spacing: -.028em;
}

.saas-plans-page-header .saas-page-header-desc {
  margin: 7px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.saas-plans-page .saas-current-plan-panel,
.saas-plans-page .saas-invitation-panel {
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-current-plan-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.saas-current-plan-meta {
  min-width: 0;
}

.saas-current-plan-label,
.saas-invitation-label {
  margin-bottom: 4px;
  color: var(--color-text-muted) !important;
}

.saas-current-plan-period,
.saas-current-plan-note,
.saas-invitation-description {
  margin-top: 3px;
  color: var(--color-text-muted);
}

.saas-current-plan-alert {
  max-width: 52ch;
  margin-top: 7px;
  color: var(--color-danger-strong);
}

.saas-current-plan-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-direction: column;
  flex: 0 0 auto;
  text-align: right;
}

.saas-current-plan-cancel-note {
  margin-top: 1px;
  color: var(--color-warning-strong);
}

.saas-current-plan-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.saas-current-plan-panel .saas-title-md {
  color: var(--color-text-primary);
  font-size: 18px;
}

.saas-invitation-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.saas-invitation-copy {
  min-width: 190px;
}

.saas-invitation-form > .saas-input {
  flex: 1 1 240px;
  min-width: 180px;
}

.saas-invitation-form > .saas-btn {
  flex: 0 0 auto;
}

.saas-invitation-panel form {
  gap: 12px !important;
}

.saas-invitation-panel .saas-label-sm {
  font-size: 13px;
  font-weight: 700;
}

.saas-invitation-panel .saas-body-xs {
  font-size: 12px;
}

.saas-invitation-panel .saas-input {
  min-height: 38px;
}

.saas-plans-catalog .saas-data-panel-body {
  padding: 0 20px 20px;
}

.saas-plans-page .saas-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 8px;
}

.saas-plans-page .saas-plan-card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: 18px;
  overflow: hidden;
  background: var(--color-bg-primary);
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-plans-page .saas-plan-card:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-sm);
}

.saas-plans-page .saas-plan-card--current {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-brand) 42%, transparent);
}

.saas-plans-page .saas-plan-card--current:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-brand) 42%, transparent), var(--shadow-sm);
}

.saas-plans-page .saas-plan-card--popular {
  background: color-mix(in srgb, var(--color-brand-soft) 34%, var(--color-bg-primary));
}

.saas-plans-page .saas-plan-popular-tag {
  top: 0;
  left: 16px;
  right: auto;
  padding: 4px 8px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: 0 0 7px 7px;
  font-size: 10px;
  letter-spacing: .02em;
}

.saas-plans-page .saas-plan-header {
  min-height: 94px;
  margin-bottom: 12px;
}

.saas-plans-page .saas-plan-name {
  color: var(--color-text-primary);
  font-size: 14px;
  letter-spacing: .02em;
}

.saas-plans-page .saas-plan-price {
  margin-top: 14px;
}

.saas-plans-page .saas-plan-price-amount {
  color: var(--color-text-primary);
  font-size: 30px;
  letter-spacing: -.04em;
}

.saas-plans-page .saas-plan-price-yearly {
  color: var(--color-text-muted);
}

/* Referenced by PlansPage.jsx but never defined, so the currency glyph, the
   billing-period suffix and the quota label rendered at body defaults. */
.saas-plans-page .saas-plan-price-currency {
  margin-right: 2px;
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 600;
  vertical-align: top;
}

.saas-plans-page .saas-plan-price-period {
  margin-left: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.saas-plans-page .saas-plan-quota-label {
  color: var(--color-text-secondary);
}

/* One-time purchase cards need slightly more vertical room than subscriptions. */
.saas-plans-page .saas-plan-card--one-time .saas-plan-price {
  min-height: 58px;
}

.saas-plans-page .saas-plan-quota {
  margin: 0 0 15px;
  padding: 11px 0;
  border: 0;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-plans-page .saas-plan-quota-item {
  padding: 0 10px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.saas-plans-page .saas-plan-quota-value {
  color: var(--color-text-primary);
  font-weight: 650;
}

.saas-plans-page .saas-plan-features {
  min-height: 88px;
  gap: 6px;
  margin-bottom: 16px;
}

.saas-plans-page .saas-plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.saas-plans-page .saas-plan-feature-item svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-success-strong);
}

.saas-plan-custom-credit {
  margin-top: 14px;
}

.saas-plan-custom-credit .saas-input {
  margin-top: 6px;
}

.saas-plan-custom-credit-hint {
  margin-top: 6px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.saas-plan-confirm-copy p {
  margin: 0;
}

.saas-plan-confirm-price {
  margin-top: 9px;
  color: var(--color-text-muted);
}

.saas-plans-page .saas-plan-card .saas-btn-full {
  min-height: 38px;
}

.saas-plan-comparison-section {
  margin-top: 0;
  padding: 18px 20px 20px;
  background: var(--color-bg-primary);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-plan-comparison-heading {
  margin-bottom: 13px;
}

.saas-plan-comparison-section .saas-title-md {
  margin: 0;
  font-size: 15px;
}

.saas-plan-comparison-heading .saas-body-xs {
  margin-top: 4px;
  color: var(--color-text-muted);
}

.saas-plan-comparison-scroll {
  overflow-x: auto;
}

.saas-plan-comparison-table {
  min-width: 640px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-plan-comparison-table th {
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: 11px;
  font-weight: 650;
}

.saas-plan-comparison-table td {
  color: var(--color-text-secondary);
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
  font-size: 12px;
}

.saas-plan-comparison-table tr:last-child td {
  box-shadow: none;
}

.saas-plan-skeleton {
  min-height: 380px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border-muted) 50%, var(--color-bg-secondary) 75%);
  background-size: 240% 100%;
  animation: saasPlanSkeleton 1.2s ease-in-out infinite;
}

.saas-plans-footnote {
  margin-top: 0;
  text-align: center;
  font-size: 11px;
}

.saas-plans-footnote .saas-body-xs {
  color: var(--color-text-muted);
}

@keyframes saasPlanSkeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 720px) {
  .saas-plans-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-plans-catalog .saas-data-panel-body {
    padding-inline: 12px;
  }

  .saas-plan-comparison-section {
    padding-inline: 12px;
  }

  .saas-current-plan-layout,
  .saas-invitation-form {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-current-plan-actions {
    align-items: flex-start;
    width: 100%;
    text-align: left;
  }

  .saas-current-plan-buttons {
    justify-content: flex-start;
  }

  .saas-invitation-form > *,
  .saas-invitation-form > .saas-input {
    width: 100%;
    min-width: 0;
  }

  .saas-invitation-form > .saas-btn {
    justify-content: center;
  }

  .saas-invitation-panel form {
    align-items: stretch !important;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saas-plan-skeleton {
    animation: none;
  }
}
.saas-api-keys-panels {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-api-keys-panel .saas-data-panel-body {
  min-width: 0;
  overflow-x: auto;
}

.saas-api-key-search {
  display: flex;
  align-items: center;
  max-width: 360px;
  height: 36px;
  gap: 8px;
  padding: 0 10px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-api-key-search:focus-within {
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand-border), 0 0 0 3px var(--color-brand-soft);
}

.saas-api-key-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 13px;
}

.saas-api-key-table-wrap {
  min-width: 760px;
}

.saas-api-keys-panel .saas-table {
  margin: 0;
  border: 0;
  box-shadow: none;
}

.saas-api-keys-panel .saas-table th {
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: 11px;
  font-weight: 650;
}

.saas-api-keys-panel .saas-table td {
  height: 58px;
  color: var(--color-text-secondary);
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.saas-api-keys-panel .saas-table tr:last-child td {
  box-shadow: none;
}

.saas-api-keys-panel.is-revoked {
  opacity: .72;
}

.saas-api-key-drawer-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.saas-api-key-drawer-content > .saas-btn-primary {
  align-self: flex-end;
}

.saas-api-key-drawer-content .saas-scope-list {
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding: 2px;
}

.saas-api-key-drawer-content .saas-scope-item {
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

@media (max-width: 640px) {
  .saas-api-key-search {
    max-width: none;
    width: 100%;
  }
}
.auth-captcha {
  display: flex;
  align-items: center;
  margin: 4px 0 18px;
}

.auth-captcha cap-widget {
  max-width: 100%;
}
/* ══════════════════════════════════════════════════════════════════════════
   Auth Pages — Premium Split-Panel Design
   Left: atmospheric brand panel with geometric grain
   Right: refined form panel with DM Sans typography
   Staggered entrance animations, micro-interactions, dark mode aware
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Root: Split Layout ───────────────────────────────────────────────── */
.auth-root {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
/* ── Left Brand Panel ─────────────────────────────────────────────────── */
.auth-brand {
  position: relative;
  background: var(--color-emphasis-bg-start);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 44px;
  overflow: hidden;
}

/* Subtle grid lines */
.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-emphasis-text) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-emphasis-text) 3%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Large ambient glow orb */
.auth-brand::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-emphasis-text) 6%, transparent) 0%, transparent 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: authGlowPulse 6s ease-in-out infinite;
}

@keyframes authGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* Brand content */
.auth-brand-content {
  position: relative;
  z-index: 1;
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: authFadeIn 0.6s ease both;
  animation-delay: 0.1s;
}

.auth-brand-mark {
  width: 34px;
  height: 34px;
  background: var(--color-emphasis-bg-end);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-emphasis-text);
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--color-emphasis-text) 8%, transparent);
  letter-spacing: 0.02em;
  -o-object-fit: cover;
     object-fit: cover;
}

.auth-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-emphasis-text);
  letter-spacing: -0.02em;
}

.auth-brand-headline {
  margin-top: 48px;
  animation: authFadeIn 0.7s ease both;
  animation-delay: 0.2s;
}

.auth-brand-headline h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-emphasis-text);
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.auth-brand-headline h2 em {
  font-style: normal;
  color: color-mix(in srgb, var(--color-emphasis-text) 45%, transparent);
  font-weight: 400;
}

.auth-brand-tagline {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-emphasis-text) 38%, transparent);
  line-height: 1.7;
  max-width: 320px;
  margin: 0;
  animation: authFadeIn 0.7s ease both;
  animation-delay: 0.3s;
}

/* Feature pills */
.auth-brand-features {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: authFadeIn 0.7s ease both;
  animation-delay: 0.4s;
}

.auth-brand-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-emphasis-text) 55%, transparent);
}

.auth-brand-feature-icon {
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--color-emphasis-text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-emphasis-text) 8%, transparent);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

/* Floating decorative dots */
.auth-brand-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-emphasis-text) 20%, transparent);
  pointer-events: none;
  animation: authFloatDot 8s ease-in-out infinite;
}

.auth-brand-dot:nth-child(1) { top: 18%; right: 14%; animation-delay: 0s; }
.auth-brand-dot:nth-child(2) { top: 35%; right: 8%;  animation-delay: 1.5s; }
.auth-brand-dot:nth-child(3) { top: 55%; right: 18%; animation-delay: 3s; }
.auth-brand-dot:nth-child(4) { top: 70%; right: 10%; animation-delay: 4.5s; }

@keyframes authFloatDot {
  0%, 100% { opacity: 0.15; transform: translateY(0); }
  50%       { opacity: 0.4;  transform: translateY(-8px); }
}

/* ── Right Form Panel ────────────────────────────────────────────────── */
.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  padding: 48px 44px;
  overflow-y: auto;
}

/* Authentication consumes the global theme tokens. The brand panel remains
   intentionally dark below, while the form side follows the active theme. */

.auth-card {
  width: 100%;
  max-width: 400px;
  animation: authFadeUp 0.55s var(--ease) both;
  animation-delay: 0.25s;
}

/* ── Form Header ─────────────────────────────────────────────────────── */
.auth-form-header {
  margin-bottom: 32px;
  animation: authFadeUp 0.55s var(--ease) both;
  animation-delay: 0.3s;
}

.auth-form-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.auth-form-logo-mark {
  width: 28px;
  height: 28px;
  background: var(--color-emphasis-bg-start);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-emphasis-text);
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.auth-form-logo-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

.auth-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Error ──────────────────────────────────────────────────────────── */
.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-danger-subtle);
  border: 1px solid var(--color-danger-line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-danger-strong);
  margin-bottom: 20px;
  line-height: 1.5;
  animation: authShake 0.4s ease;
  animation-delay: 0s;
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

.auth-error svg { flex-shrink: 0; margin-top: 1px; }

/* ── Login method switcher ───────────────────────────────────────────── */
.auth-login-modes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0;
  margin: 0 0 22px;
  background: transparent;
  border: 0;
}

.auth-login-mode {
  min-height: 30px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--color-brand);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
  border-bottom: 1px solid transparent;
}

.auth-login-mode:hover { color: var(--color-brand-hover); }
.auth-login-mode.active {
  color: var(--color-brand-hover);
  border-bottom-color: currentColor;
}

.auth-code-row {
  display: flex;
  gap: 8px;
}

.auth-code-row .auth-input {
  flex: 1;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.auth-code-send {
  min-width: 92px;
  padding: 0 12px;
  border: 1.5px solid var(--color-emphasis-bg-start);
  border-radius: 10px;
  background: var(--color-emphasis-bg-start);
  color: var(--color-emphasis-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.auth-code-send:hover:not(:disabled) {
  background: var(--color-emphasis-bg-end);
  transform: translateY(-1px);
}

.auth-code-send:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.auth-debug-code {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--color-warning-line);
  border-radius: 7px;
  background: var(--color-warning-subtle);
  color: var(--color-warning-strong);
  font-size: 12px;
  line-height: 1.4;
}

.auth-debug-code strong {
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.auth-2fa-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--color-info-line);
  border-radius: 9px;
  background: var(--color-info-subtle);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.auth-2fa-copy strong {
  color: var(--color-text-primary);
  font-size: 13px;
}

/* ── SSO Section ─────────────────────────────────────────────────────── */
.auth-sso-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
  animation: authFadeUp 0.5s ease both;
  animation-delay: 0.35s;
}

.auth-sso-divider::before,
.auth-sso-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-muted);
}

.auth-sso-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: authFadeUp 0.5s ease both;
  animation-delay: 0.4s;
}

.auth-google { margin-bottom: 12px; }
.auth-google__button { min-height: 42px; display: flex; justify-content: center; }
.auth-google__button > div { width: 100% !important; }
.auth-google__button iframe { margin: 0 auto; }
.auth-google__hint {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
}
.auth-google__hint--error { color: var(--color-danger); }
.auth-google--disabled { opacity: 0.6; pointer-events: none; }

.auth-sso-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border-default);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.auth-sso-btn:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.auth-sso-btn:active { transform: translateY(0); box-shadow: none; }
.auth-sso-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.auth-sso-init {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  background: var(--color-emphasis-bg-start);
  color: var(--color-emphasis-text);
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

/* ── Form Fields ────────────────────────────────────────────────────── */
.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
  animation: authFadeUp 0.5s ease both;
  animation-delay: 0.45s;
}

.auth-field { display: flex; flex-direction: column; gap: 6px; }

.auth-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-forgot {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
  letter-spacing: 0.01em;
}
.auth-forgot:hover { color: var(--color-text-primary); }

.auth-input {
  width: 100%;
  border: 1.5px solid var(--color-border-default);
  background: var(--color-bg-primary);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--color-text-primary);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0;
}
.auth-input::-moz-placeholder { color: var(--color-text-muted); }
.auth-input::placeholder { color: var(--color-text-muted); }
.auth-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 7%, transparent);
}
.auth-input:not(:-moz-placeholder):valid { border-color: var(--color-success); }
.auth-input:not(:placeholder-shown):valid { border-color: var(--color-success); }
.auth-input:not(:-moz-placeholder):not(:valid) { border-color: var(--color-danger); }
.auth-input:not(:placeholder-shown):not(:valid) { border-color: var(--color-danger); }

.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 42px; }

.auth-field-hint {
  margin-top: 6px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.auth-toggle {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  padding: 3px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: 500 12px/1 var(--font-body);
  transition: color 0.12s;
  border-radius: 4px;
}
.auth-toggle:hover,
.auth-toggle:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  outline: none;
}

/* ── Submit Button ─────────────────────────────────────────────────── */
.auth-submit {
  width: 100%;
  padding: 13px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-shadow) 18%, transparent);
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}

/* Subtle shine sweep on hover */
.auth-submit::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-brand-text) 12%, transparent), transparent);
  transition: left 0.4s ease;
}
.auth-submit:hover::after { left: 150%; }

.auth-submit:hover:not(:disabled) {
  background: var(--color-brand-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-shadow) 24%, transparent);
  transform: translateY(-1px);
}
.auth-submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-shadow) 14%, transparent);
}
.auth-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Switch link ─────────────────────────────────────────────────────── */
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 24px;
  animation: authFadeUp 0.5s ease both;
  animation-delay: 0.55s;
}
.auth-switch-link {
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.12s;
}
.auth-switch-link:hover { opacity: 0.7; }

/* ── Password Strength ───────────────────────────────────────────────── */
.auth-strength {
  display: flex;
  align-items: center;
  gap: 6px;
}
.auth-strength-bar {
  flex: 1;
  height: 3px;
  background: var(--color-border-muted);
  border-radius: 999px;
  overflow: hidden;
}
.auth-strength-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s var(--ease), background 0.35s;
}
.auth-strength-label {
  font-size: 10px;
  font-weight: 600;
  width: 26px;
  text-align: right;
}

/* ── Spinner ──────────────────────────────────────────────────────────── */
.auth-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--color-brand-text) 25%, transparent);
  border-top-color: var(--color-brand-text);
  border-radius: 50%;
  animation: authSpin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ── Entrance Animations ─────────────────────────────────────────────── */
@keyframes authFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-root {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .auth-brand {
    padding: 32px 28px 28px;
    min-height: auto;
  }

  .auth-brand::after { display: none; }
  .auth-brand-dot { display: none; }

  .auth-brand-headline { margin-top: 24px; }
  .auth-brand-features { display: none; }
  .auth-brand-headline h2 { font-size: 22px; }

  .auth-form-side {
    padding: 36px 24px 40px;
    align-items: flex-start;
  }

  .auth-card { max-width: 100%; animation-delay: 0.05s; }
  .auth-login-modes { gap: 18px; }
  .auth-code-row { align-items: stretch; flex-direction: column; }
  .auth-code-send { min-height: 42px; }
}
/* ServiceDetailPage — single service instance: status, config, health, events.
   Page-scoped styles using shared design tokens.

   Previously this page had no stylesheet: ~50 inline `style={{…}}` blocks
   carried everything, including two hardcoded `--p-red-100` / `--p-purple-100`
   primitive references that bypass the semantic layer. */

.saas-service-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Header ───────────────────────────────────────────────── */
.saas-service-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.saas-service-detail-heading {
  min-width: 0;
}

.saas-service-detail-title {
  margin: 0;
}

.saas-service-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.saas-service-detail-category {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.saas-service-detail-tier {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-transform: capitalize;
}

.saas-service-detail-back {
  margin-bottom: 4px;
}

/* ── Status + health pills ────────────────────────────────── */
.saas-service-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.saas-service-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.saas-service-status.is-neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}
.saas-service-status.is-info {
  background: var(--color-info-subtle);
  color: var(--color-brand);
}
.saas-service-status.is-warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning-strong);
}
.saas-service-status.is-success {
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.saas-service-status.is-danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}

.saas-service-health {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Health check list ────────────────────────────────────── */
.saas-service-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-muted);
}

.saas-service-check:last-child {
  border-bottom: 0;
}

.saas-service-check-body {
  flex: 1;
  min-width: 0;
}

.saas-service-check-name {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.saas-service-check-message {
  margin-top: 2px;
  font-size: var(--text-xs);
}

.saas-service-check.is-pass .saas-service-check-message {
  color: var(--color-success-strong);
}

.saas-service-check.is-fail .saas-service-check-message {
  color: var(--color-danger-strong);
}

.saas-service-check-type {
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.saas-service-check.is-pass .saas-service-check-type {
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}

.saas-service-check.is-fail .saas-service-check-type {
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}

/* ── Config field editor ──────────────────────────────────── */
.saas-service-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.saas-service-field-label {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.saas-service-field-required {
  color: var(--color-danger);
}

.saas-service-field-hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.saas-service-field-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.saas-service-field-toggle input {
  accent-color: var(--color-brand);
}

.saas-service-field-toggle-text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.saas-service-field-help {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ── Error panel ──────────────────────────────────────────── */
.saas-service-error {
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--color-danger-line);
  border-radius: var(--radius-md);
  background: var(--color-danger-subtle);
}

.saas-service-error-code {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--color-danger-strong);
  font-size: var(--text-base);
  font-weight: 600;
}

.saas-service-error-message {
  color: var(--color-danger-strong);
  font-size: var(--text-sm);
}

/* ── Loading / empty states ───────────────────────────────── */
.saas-service-detail-loading {
  padding: 40px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Event log ────────────────────────────────────────────── */
.saas-service-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.saas-service-event:last-child {
  border-bottom: 0;
}

.saas-service-event-time {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.saas-service-event-body {
  min-width: 0;
  flex: 1;
}

.saas-service-event-title {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.saas-service-event-detail {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

/* ── Embed code block ─────────────────────────────────────── */
.saas-service-embed {
  position: relative;
}

.saas-service-embed-code {
  max-height: 180px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-family: var(--font-code);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.saas-service-embed-copy {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* ── Actions row ──────────────────────────────────────────── */
.saas-service-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Layout ───────────────────────────────────────────────── */
.saas-service-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1024px) {
  .saas-service-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .saas-service-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .saas-service-detail-actions {
    width: 100%;
  }
}

/* ── Runtime status panel ─────────────────────────────────── */
.saas-service-runtime {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.saas-service-runtime-full {
  grid-column: 1 / -1;
}

.saas-service-field-label-block {
  margin-bottom: 6px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.saas-service-field-value {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.saas-service-bundle-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-purple-subtle);
  color: var(--color-purple);
  font-size: var(--text-xs);
  font-weight: 600;
}

.saas-service-section-hint {
  margin-left: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

/* ── Install / embed note ─────────────────────────────────── */
.saas-service-note {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.saas-service-embed-pre {
  max-height: 200px;
  overflow: auto;
}

/* ── Event log (compact list) ─────────────────────────────── */
.saas-service-events {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.saas-service-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-muted);
}

.saas-service-event-row:last-child {
  border-bottom: 0;
}

.saas-service-event-index {
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: var(--text-xs);
}

.saas-service-event-name {
  flex: 1;
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.saas-service-event-at {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.saas-service-events-empty {
  padding: 24px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 640px) {
  .saas-service-runtime {
    grid-template-columns: 1fr;
  }
}

/* Full-width primary action in the config sidebar. */
.saas-service-save {
  width: 100%;
}
/* NotificationsPage — preference filters, delivery schedule, notification list.
   Page-scoped styles using shared design tokens.

   This page previously had no stylesheet: ~21 inline `style={{…}}` blocks
   carried layout, and the notification list classes (`saas-notification-*`)
   had no definitions at all until they were added to globals.css. */

.saas-notifications-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-notifications-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.saas-notifications-card {
  margin-bottom: 16px;
}

/* ── Filter bar ───────────────────────────────────────────── */
.saas-notifications-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.saas-notifications-filter-spacer {
  flex: 1;
  min-width: 0;
}

.saas-notifications-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-base);
  cursor: pointer;
  white-space: nowrap;
}

.saas-notifications-check input {
  accent-color: var(--color-brand);
}

/* ── Schedule card ────────────────────────────────────────── */
.saas-notifications-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.saas-notifications-card-desc {
  margin-top: 4px;
}

.saas-notifications-schedule {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.saas-notifications-schedule > label {
  display: inline-flex;
  align-items: center;
}

.saas-notifications-inline-check {
  margin-right: 6px;
  accent-color: var(--color-brand);
}

.saas-notifications-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.saas-notifications-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.saas-notifications-summary-value {
  margin-left: 4px;
  color: var(--color-text-secondary);
}

/* Inline select inside a schedule label. */
.saas-notifications-select {
  margin-left: 8px;
  min-width: 132px;
}

/* The unread dot colour comes from the existing
   `.saas-notification-item.unread .saas-notification-dot` rule in globals.css,
   so no page-level override is needed here. */

/* ── Empty / loading states ───────────────────────────────── */
.saas-notifications-state {
  padding: 48px;
}

.saas-notifications-empty {
  padding: 64px;
}

@media (max-width: 640px) {
  .saas-notifications-filter-spacer {
    display: none;
  }

  .saas-notifications-card-head,
  .saas-notifications-schedule {
    align-items: stretch;
    flex-direction: column;
  }
}
/* ExpertsPage — 页面级样式（收编此前散落的内联 style）
   命名前缀 saas-expert-* / saas-mcp-* / saas-skill-* / saas-tool-* / saas-capability-*
   颜色/字号一律引用 design token，禁止硬编码 */

/* ── 页面头部 / 布局 ─────────────────────────────────────────── */
.saas-experts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.saas-experts-header .saas-body-sm {
  margin-top: 4px;
  color: var(--color-text-secondary);
}

.saas-expert-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

/* ── 空状态（补充 globals.css 中的基础定义）──────────────────── */
.saas-expert-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 24px;
}

.saas-expert-empty > .saas-btn { margin-top: 8px; }

/* ── Skill Combobox ──────────────────────────────────────────── */
.saas-skill-combobox { position: relative; }

.saas-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.saas-skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-text-on-brand);
  font-size: 12px;
  font-weight: 500;
}

.saas-skill-tag-remove {
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.saas-skill-input-wrap { position: relative; }
.saas-skill-input-wrap .saas-input { width: 100%; padding-right: 36px; }

.saas-skill-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.saas-skill-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
}

.saas-skill-dropdown-empty {
  padding: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

.saas-skill-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.saas-skill-option:hover { background: var(--color-bg-muted); }

.saas-skill-option-cat {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 500;
}

.saas-skill-option-label {
  flex: 1;
  color: var(--color-text-primary);
  font-size: 13px;
}

.saas-skill-option-plus { color: var(--color-text-muted); }

/* ── MCP Server ──────────────────────────────────────────────── */
.saas-mcp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  font-size: 13px;
}

.saas-mcp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
}

.saas-mcp-icon.is-sse { background: color-mix(in srgb, var(--color-brand) 10%, transparent); }
.saas-mcp-icon.is-stdio { background: color-mix(in srgb, #15803d 10%, transparent); }

.saas-mcp-info {
  flex: 1;
  min-width: 0;
}

.saas-mcp-name {
  overflow: hidden;
  color: var(--color-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-mcp-url {
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-mcp-transport {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
}

.saas-mcp-transport.is-stdio {
  color: var(--color-success-strong);
  background: color-mix(in srgb, #15803d 10%, transparent);
}

.saas-mcp-transport.is-sse {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.saas-mcp-action {
  flex-shrink: 0;
  padding: 2px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.saas-mcp-action.is-danger { color: var(--color-danger); }

.saas-mcp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.saas-mcp-transport-toggles { display: flex; gap: 8px; }

.saas-mcp-transport-toggle {
  flex: 1;
  padding: 8px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.saas-mcp-transport-toggle.is-active {
  border-color: var(--color-brand);
  background: var(--color-info-subtle);
}

.saas-mcp-field-label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.saas-mcp-required { color: var(--color-danger-strong); }

.saas-mcp-hint {
  color: var(--color-text-muted);
  font-weight: 400;
}

.saas-input.saas-mono {
  width: 100%;
  font-family: var(--font-code);
  font-size: 12px;
}

.saas-input.saas-mono-sm { font-size: 12px; }

.saas-mcp-test-result {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.saas-mcp-test-result.is-ok {
  color: var(--color-success-strong);
  background: color-mix(in srgb, var(--color-success-strong) 10%, transparent);
}

.saas-mcp-test-result.is-fail {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.saas-mcp-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.saas-mcp-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.saas-mcp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.saas-mcp-add-btn {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

/* ── 表单通用 ────────────────────────────────────────────────── */
.saas-expert-kicker {
  margin-bottom: 12px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.saas-expert-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.saas-expert-field-label--tight { margin-bottom: 8px; }

.saas-expert-required { color: var(--color-danger-strong); }

.saas-expert-error {
  margin-top: 4px;
  color: var(--color-danger-strong);
  font-size: 11px;
}

.saas-expert-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.saas-expert-form-row--plain { margin-bottom: 0; }

.saas-expert-appearance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Icon Picker ─────────────────────────────────────────────── */
.saas-expert-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.saas-expert-icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.15s;
}

.saas-expert-icon-option.is-active {
  border: 2px solid var(--color-info);
  background: var(--color-info-subtle);
}

/* ── 颜色选择 ────────────────────────────────────────────────── */
.saas-color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.saas-color-swatch {
  width: 28px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  outline-offset: 2px;
}

.saas-color-swatch.is-active {
  border-color: var(--color-text-primary);
  outline: 2px solid var(--color-info);
}

/* ── Model preference ────────────────────────────────────────── */
.saas-expert-model-options { display: flex; gap: 8px; }

.saas-expert-model-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  cursor: pointer;
  transition: all 0.15s;
}

.saas-expert-model-option.is-active {
  border-color: var(--color-info);
  background: var(--color-info-subtle);
}

.saas-expert-model-option-name {
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
}

.saas-expert-model-option-desc {
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

/* ── Grouped Tools ───────────────────────────────────────────── */
.saas-tool-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saas-tool-group {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.saas-tool-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.saas-tool-count {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 600;
}

.saas-tool-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}

.saas-tool-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.saas-tool-chip.is-selected {
  background: var(--color-text);
  color: var(--color-text-on-brand);
}

.saas-tool-chip.is-disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.saas-tool-chip input[type='checkbox'] { display: none; }

/* ── Capability Workbench ────────────────────────────────────── */
.saas-capability-workbench {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--color-brand) 24%, var(--color-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand) 7%, transparent), var(--color-bg-elevated));
}

.saas-capability-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.saas-capability-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.saas-capability-desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.saas-capability-summary {
  white-space: nowrap;
  font-size: 10px;
}

.saas-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.saas-capability-preset {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.saas-capability-preset.is-active { border-color: var(--preset-tone, var(--color-brand)); background: color-mix(in srgb, var(--preset-tone, var(--color-brand)) 7%, var(--color-bg-elevated)); }

.saas-capability-preset-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--preset-tone, var(--color-brand)) 10%, transparent);
  color: var(--preset-tone, var(--color-brand));
}

.saas-capability-preset-name {
  display: block;
  font-size: 12px;
}

.saas-capability-preset-desc {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.saas-capability-preset-check {
  flex-shrink: 0;
  margin-left: auto;
}

.saas-capability-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: 11px;
}

/* ── Expert 卡片 ─────────────────────────────────────────────── */
.saas-expert-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.saas-expert-card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.saas-expert-card-name-wrap { flex: 1; min-width: 0; }

.saas-expert-card-name {
  overflow: hidden;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-expert-card-name-en {
  color: var(--color-text-muted);
  font-size: 11px;
}

.saas-model-pref-chip {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
}

.saas-expert-card-desc {
  margin-bottom: 12px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.saas-expert-card-section { margin-bottom: 12px; }

.saas-expert-ref-label {
  margin-bottom: 5px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.saas-expert-ref-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.saas-expert-ref-list .saas-badge {
  font-size: 10px;
  text-decoration: none;
}

.saas-expert-prompt-preview {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.saas-expert-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.saas-expert-tag-list .saas-badge { font-size: 10px; }

.saas-expert-mcp-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, #6b21a8 10%, transparent);
  color: #6b21a8;
  font-size: 10px;
  font-weight: 600;
}

.saas-expert-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.saas-expert-card-actions .saas-btn {
  flex: 1;
  font-size: 12px;
}

.saas-btn-danger-ghost {
  color: var(--color-danger-strong) !important;
}

/* ── Expert Modal ────────────────────────────────────────────── */
.saas-expert-modal {
  display: flex;
  flex-direction: column;
}

.saas-expert-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-default);
}

.saas-expert-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saas-expert-modal-icon-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--expert-color, var(--color-brand));
}

.saas-expert-modal-title {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}

.saas-expert-modal-close {
  padding: 4px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 20px;
  cursor: pointer;
}

.saas-expert-modal-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  padding: 20px;
}

.saas-expert-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border-default);
}

/* ── Confirm 对话框 ──────────────────────────────────────────── */
.saas-expert-confirm {
  padding: 24px;
}

.saas-expert-confirm-title {
  margin-bottom: 8px;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 600;
}

.saas-expert-confirm-message {
  margin-bottom: 20px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.saas-expert-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.saas-btn-danger {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-text-on-brand) !important;
}

/* ── 启动检查 / 开关 ─────────────────────────────────────────── */
.saas-expert-form-toggles {
  display: flex;
  gap: 16px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border-muted);
}

.saas-expert-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.saas-expert-check-label input {
  width: 14px;
  height: 14px;
}
.saas-usage-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.saas-usage-page-header {
  margin-bottom: 0;
}

.saas-usage-page-copy {
  min-width: 0;
}

.saas-usage-page-copy .saas-page-header-desc {
  margin-top: 6px;
}

.saas-usage-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.saas-usage-period-select {
  min-width: 150px;
  height: 38px;
}

.saas-usage-alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  color: var(--color-danger-strong);
  background: var(--color-danger-subtle);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--color-danger-line);
}

.saas-usage-alert-copy {
  min-width: 0;
}

.saas-usage-alert-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
}

.saas-usage-alert-item {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
}

.saas-usage-panel .saas-data-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.saas-usage-panel .saas-data-panel-title svg {
  color: var(--color-brand);
}

.saas-usage-panel .saas-data-panel-body {
  padding: 0 20px 20px;
}

.saas-usage-loading,
.saas-usage-empty {
  display: grid;
  min-height: 116px;
  place-items: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

.saas-credit-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.saas-credit-metric {
  min-width: 0;
  min-height: 74px;
  padding: 12px 13px;
  background: var(--color-bg-secondary);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-credit-metric-label {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-credit-metric-value {
  margin-top: 7px;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.saas-credit-guide {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 12px 14px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.6;
}

.saas-credit-guide strong {
  color: var(--color-text-primary);
}

.saas-usage-meter-list {
  display: grid;
  gap: 16px;
}

.saas-usage-meter {
  min-width: 0;
}

.saas-usage-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-primary);
  font-size: 13px;
}

.saas-usage-meter-head span:last-child {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.saas-usage-meter-track {
  height: 8px;
  margin-top: 7px;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  border-radius: 999px;
}

.saas-usage-meter-fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
}

.saas-usage-meter-meta {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.saas-usage-table-wrap {
  overflow-x: auto;
}

.saas-usage-table {
  min-width: 720px;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.saas-usage-table th {
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: 11px;
  font-weight: 650;
}

.saas-usage-table td {
  height: 52px;
  color: var(--color-text-secondary);
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
  font-size: 12px;
}

.saas-usage-table tr:last-child td {
  box-shadow: none;
}

.saas-usage-table td.is-positive {
  color: var(--color-success-strong);
  font-weight: 700;
}

.saas-usage-table td.is-negative {
  color: var(--color-danger-strong);
  font-weight: 700;
}

.saas-usage-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 18px;
}

.saas-usage-detail-list {
  display: grid;
  gap: 0;
}

.saas-usage-detail-row {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 13px 0;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.saas-usage-detail-row:last-child {
  box-shadow: none;
}

.saas-usage-detail-service {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-usage-detail-metrics {
  display: grid;
  gap: 5px;
}

.saas-usage-detail-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.saas-usage-detail-metric strong {
  color: var(--color-text-secondary);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.saas-invoice-list {
  display: grid;
  gap: 0;
}

.saas-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 10px 0;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.saas-invoice-row:last-child {
  box-shadow: none;
}

.saas-invoice-period {
  min-width: 0;
}

.saas-invoice-period .saas-body-sm {
  margin-top: 3px;
  color: var(--color-text-muted);
}

.saas-invoice-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--invoice-status);
  background: color-mix(in srgb, var(--invoice-status) 10%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
}

.saas-alert-form {
  display: grid;
  gap: 18px;
}

@media (max-width: 980px) {
  .saas-credit-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .saas-usage-lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .saas-usage-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-usage-page-actions {
    width: 100%;
  }

  .saas-usage-period-select,
  .saas-usage-page-actions > .saas-btn {
    flex: 1 1 0;
  }

  .saas-usage-alert {
    flex-direction: column;
  }

  .saas-usage-alert > .saas-btn {
    width: 100%;
    justify-content: center;
  }

  .saas-usage-panel .saas-data-panel-body {
    padding-inline: 14px;
  }

  .saas-credit-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-usage-detail-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}
/* InvoicesPage — billing history table and invoice detail dialog.
   Page-scoped styles. All values come from the shared design tokens so the page
   follows light/dark theme changes automatically.

   Previously this page had no stylesheet at all: it leaned on ~24 inline
   `style={{…}}` blocks and six Tailwind utility classes (`flex`, `gap-2`,
   `ml-2`, `text-sm`, `font-medium`, `text-green-600`). Tailwind Preflight is
   disabled for this app and no utilities are generated, so those six classes
   silently did nothing. */

.saas-invoices-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Loading state ─────────────────────────────────────────── */
.saas-invoices-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 12rem;
  color: var(--color-text-muted);
}

/* ── Table ─────────────────────────────────────────────────── */
.saas-invoices-table .saas-table {
  min-width: 760px;
}

.saas-invoices-period {
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
}

.saas-invoices-amount {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.saas-invoices-discount {
  margin-left: 8px;
  color: var(--color-success);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.saas-invoices-created {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  white-space: nowrap;
}

.saas-invoices-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Detail dialog ─────────────────────────────────────────── */
.saas-invoices-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.saas-invoices-detail-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.saas-invoices-detail-total {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.saas-invoices-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  font-size: var(--text-base);
}

.saas-invoices-meta-grid p {
  margin: 0;
}

.saas-invoices-meta-grid p + p {
  margin-top: 2px;
}

.saas-invoices-meta-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

.saas-invoices-section {
  padding-top: 16px;
  border-top: 1px solid var(--color-border-muted);
}

.saas-invoices-section-title {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.saas-invoices-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: var(--text-base);
}

.saas-invoices-sum-row span:first-child {
  color: var(--color-text-secondary);
}

.saas-invoices-sum-row span:last-child {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.saas-invoices-sum-row.is-discount span {
  color: var(--color-success);
}

.saas-invoices-sum-row.is-total {
  margin-top: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border-muted);
  font-size: var(--text-lg);
  font-weight: 700;
}

.saas-invoices-sum-row.is-total span:last-child {
  font-weight: 700;
}

/* Line items */
.saas-invoices-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border-muted);
  font-size: var(--text-base);
}

.saas-invoices-line:last-child {
  border-bottom: 0;
}

.saas-invoices-line-desc {
  min-width: 0;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.saas-invoices-line-amount {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .saas-invoices-meta-grid {
    grid-template-columns: 1fr;
  }

  .saas-invoices-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .saas-invoices-detail-total {
    font-size: 20px;
  }
}
/* WebhooksPage — endpoint cards and delivery history.
   Page-scoped styles using shared design tokens.

   Previously this page had no stylesheet: it carried ~37 inline `style={{…}}`
   blocks and referenced the legacy `--saas-gray-400/500` aliases instead of the
   semantic text tokens, so it did not track the design system. */

.saas-webhooks-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Status pill (delivery status) ─────────────────────────── */
.saas-webhook-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.saas-webhook-status.is-success {
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.saas-webhook-status.is-failed {
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}
.saas-webhook-status.is-pending,
.saas-webhook-status.is-retrying {
  background: var(--color-warning-subtle);
  color: var(--color-warning-strong);
}
.saas-webhook-status.is-unknown {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* ── Endpoint card ─────────────────────────────────────────── */
.saas-webhook-card {
  margin-bottom: 12px;
}

.saas-webhook-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.saas-webhook-card-info {
  flex: 1;
  min-width: 0;
}

.saas-webhook-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.saas-webhook-url {
  margin-bottom: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.saas-webhook-events {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.saas-webhook-event {
  font-size: var(--text-xs);
}

.saas-webhook-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.saas-webhook-danger {
  color: var(--color-danger);
}

/* ── Delivery history ──────────────────────────────────────── */
.saas-webhook-deliveries {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-muted);
}

.saas-webhook-deliveries-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.saas-webhook-deliveries-title {
  font-weight: 600;
}

.saas-webhook-delivery {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.saas-webhook-delivery:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.saas-webhook-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.saas-webhook-delivery-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.saas-webhook-delivery-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.saas-webhook-delivery-attempt {
  margin-left: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.saas-webhook-delivery-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.saas-webhook-delivery-detail {
  margin-top: 8px;
  font-family: var(--font-code);
  font-size: var(--text-sm);
}

.saas-webhook-delivery-error {
  color: var(--color-danger);
}

.saas-webhook-delivery-body {
  margin-top: 4px;
  max-height: 120px;
  padding: 8px;
  overflow: auto;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.saas-webhook-delivery-note {
  margin-top: 4px;
  color: var(--color-text-muted);
}

.saas-webhook-state {
  padding: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.saas-webhook-state.is-error {
  color: var(--color-danger);
}

/* ── Page-level ────────────────────────────────────────────── */
.saas-webhooks-create {
  margin-bottom: 20px;
}

.saas-webhooks-empty {
  padding: 64px;
}

@media (max-width: 768px) {
  .saas-webhook-card-main,
  .saas-webhook-delivery-row {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-webhook-card-actions,
  .saas-webhook-delivery-actions {
    width: 100%;
  }

  .saas-webhook-deliveries-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ── Create / edit form ────────────────────────────────────── */
.saas-webhooks-form {
  margin-top: 16px;
}

.saas-webhooks-form-fields {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.saas-webhooks-event-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.saas-webhooks-event-group-title {
  margin-bottom: 4px;
  font-weight: 600;
}

.saas-webhooks-event-option {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  font-size: var(--text-sm);
  cursor: pointer;
}

.saas-webhooks-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.saas-webhooks-state {
  padding: 48px;
}

@media (max-width: 768px) {
  .saas-webhooks-event-groups {
    grid-template-columns: 1fr;
  }
}
/* CampaignsPage — 页面级样式（收编此前散落的内联 style）
   前缀：camp-*
   颜色/字号一律引用 design token */

/* ── 页面骨架 ────────────────────────────────────────────────── */
.camp-page { padding: 24px; }

.camp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.camp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.camp-header-desc {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.camp-header-actions { display: flex; gap: 8px; }

/* ── 配置状态横幅 ────────────────────────────────────────────── */
.camp-config-banner {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 10px;
}

.camp-config-banner.is-warning {
  border: 1px solid color-mix(in srgb, var(--color-warning) 24%, transparent);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}

.camp-config-banner.is-ok {
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-success) 18%, transparent);
  background: color-mix(in srgb, var(--color-success) 7%, transparent);
}

.camp-config-banner-title {
  color: var(--color-warning-strong);
  font-size: 13px;
  font-weight: 700;
}

.camp-config-banner-desc {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.camp-config-banner-info {
  color: var(--color-text-muted);
  font-size: 12px;
}

.camp-config-banner-info strong { color: var(--color-text); }

/* ── 列表 ────────────────────────────────────────────────────── */
.camp-loading {
  padding: 40px;
  color: var(--color-text-muted);
  text-align: center;
}

.camp-empty {
  padding: 60px 24px;
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  text-align: center;
}

.camp-empty-icon {
  margin-bottom: 12px;
  color: var(--color-brand);
}

.camp-empty-title {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
}

.camp-empty-desc {
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.camp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.camp-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.camp-item:hover { box-shadow: var(--p-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08)); }

.camp-item-main { flex: 1; min-width: 0; }

.camp-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.camp-item-name { font-size: 14px; font-weight: 700; }

.camp-status-chip {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
}

.camp-item-meta {
  color: var(--color-text-muted);
  font-size: 12px;
}

.camp-item-schedule {
  margin-top: 4px;
  color: var(--color-warning-strong);
  font-size: 11px;
}

.camp-item-side {
  color: var(--color-text-muted);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.camp-item-date { margin-top: 2px; }

/* ── 双栏布局 ────────────────────────────────────────────────── */
.camp-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.camp-two-col--fixed { grid-template-columns: 1fr 320px; }

.camp-side-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 24px;
}

.camp-side-col--wide { gap: 14px; }

/* ── 面板卡片 ────────────────────────────────────────────────── */
.camp-panel {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.camp-panel--p16 { padding: 16px; }

.camp-panel-title {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
}

.camp-panel-title--sm {
  margin-bottom: 16px;
  color: var(--color-text);
  font-size: 14px;
}

.camp-panel-title--tight { margin-bottom: 12px; }

.camp-panel-desc {
  margin-bottom: 18px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.camp-form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.camp-form-stack--12 { gap: 12px; }

.camp-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.camp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.camp-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.camp-schedule-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.camp-hint {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
}

/* ── HTML 编辑器 ─────────────────────────────────────────────── */
.camp-editor-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.camp-editor-tab {
  padding: 6px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.camp-editor-tab.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.camp-editor-textarea {
  width: 100%;
  min-height: 300px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.camp-editor-frame {
  width: 100%;
  height: 300px;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

/* ── 标签选择器 ──────────────────────────────────────────────── */
.camp-tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.camp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  color: var(--color-brand);
  font-size: 12px;
}

.camp-tag-remove {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}

.camp-tag-remove:disabled { cursor: not-allowed; }

.camp-tag-input-row {
  display: flex;
  gap: 6px;
}

.camp-tag-input-row .saas-input { flex: 1; }

/* ── 统计卡 ──────────────────────────────────────────────────── */
.camp-stat-card {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.camp-stat-value {
  font-size: 22px;
  font-weight: 800;
}

.camp-stat-label {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.camp-stat-sub {
  margin-top: 1px;
  color: var(--color-text-muted);
  font-size: 10px;
}

/* ── 能力说明 / 提示块 ───────────────────────────────────────── */
.camp-info-note {
  padding: 12px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-brand) 6%, transparent);
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.7;
}

.camp-info-note-title {
  margin-bottom: 6px;
  color: var(--color-primary);
  font-weight: 700;
}

.camp-info-note-title--row {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── 发送结果 / 失败收件人 / 测试邮件 ────────────────────────── */
.camp-send-result {
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13px;
}

.camp-send-result.is-ok {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.camp-send-result.is-fail {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.camp-failed-box {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

.camp-failed-title {
  margin-bottom: 6px;
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 700;
}

.camp-failed-list {
  max-height: 90px;
  overflow: auto;
  color: var(--color-text-muted);
  font-size: 11px;
}

.camp-failed-row { margin-top: 3px; }

.camp-failed-retry {
  width: 100%;
  margin-top: 10px;
}

.camp-test-result {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.camp-test-result.is-ok {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.camp-test-result.is-fail {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.camp-btn-block {
  width: 100%;
  font-size: 13px;
}

.camp-btn-block--strong {
  font-size: 14px;
  font-weight: 700;
}

.camp-test-input {
  margin-bottom: 8px;
  font-size: 13px;
}

/* ── Toast ───────────────────────────────────────────────────── */
.camp-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
}

.camp-toast.is-error {
  background: var(--color-danger);
  color: var(--color-on-danger);
}

.camp-toast.is-success {
  background: var(--color-success);
  color: var(--color-on-success);
}

.camp-editor-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* ConfirmDialog — Uses Design Token CSS Variables */

.confirm-message {
  font-size: var(--text-base, 13px);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-5, 20px);
}

.confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
}

/* ── Buttons ──────────────────────────────────────────────── */
.confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  font-size: var(--text-sm, 12px);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
  font-family: var(--font-body, inherit);
}
.confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.confirm-btn--cancel {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
}
.confirm-btn--cancel:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary, var(--color-text-primary));
}

.confirm-btn--primary {
  background: var(--color-brand, var(--color-text-primary));
  color: var(--color-brand-text);
  border-color: var(--color-brand, var(--color-text-primary));
}
.confirm-btn--primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.confirm-btn--danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.confirm-btn--danger:hover:not(:disabled) {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

/* Spinner */
.confirm-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: saasSpin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes saasSpin {
  to { transform: rotate(360deg); }
}/* Avatar — Uses Design Token CSS Variables */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.avatar--xs  { width: 20px; height: 20px; font-size: 8px; }
.avatar--sm  { width: 24px; height: 24px; font-size: 10px; }
.avatar--md  { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg  { width: 40px; height: 40px; font-size: 15px; }
.avatar--xl  { width: 56px; height: 56px; font-size: 20px; }

.avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}/* Tooltip — Uses Design Token CSS Variables */

.tooltip-wrap {
  display: inline-flex;
  position: relative;
}

.tooltip {
  position: absolute;
  z-index: var(--z-popover, 110);
  background: var(--color-bg-inverse, var(--color-text-primary));
  color: var(--color-text-inverse, #ffffff);
  font-size: var(--text-xs, 11px);
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 2px);
  white-space: nowrap;
  pointer-events: none;
  animation: tooltipFadeIn 0.15s ease both;
  font-family: var(--font-body, inherit);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Placement */
.tooltip--top {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip--top .tooltip-arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-color: var(--color-bg-inverse, var(--color-text-primary)) transparent transparent;
}

.tooltip--bottom {
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip--bottom .tooltip-arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 5px 5px;
  border-color: transparent transparent var(--color-bg-inverse, var(--color-text-primary));
}

.tooltip--left {
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip--left .tooltip-arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent var(--color-bg-inverse, var(--color-text-primary));
}

.tooltip--right {
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip--right .tooltip-arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-color: transparent var(--color-bg-inverse, var(--color-text-primary)) transparent transparent;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}/* Alert — Uses Design Token CSS Variables */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5, 10px);
  padding: var(--space-3, 12px) var(--space-3-5, 14px);
  border-radius: var(--radius-md, 4px);
  border: 1px solid transparent;
  font-family: var(--font-body, inherit);
  font-size: var(--text-sm, 12px);
  line-height: 1.5;
}

.alert--success { background: var(--color-success-subtle); border-color: var(--color-success-line); }
.alert--warning { background: var(--color-warning-subtle); border-color: var(--color-warning-line); }
.alert--danger  { background: var(--color-danger-subtle); border-color: var(--color-danger-line); }
.alert--info    { background: var(--color-info-subtle); border-color: var(--color-info-line); }

.alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; line-height: 1; }

.alert-body { flex: 1; min-width: 0; }
.alert-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.alert-text {
  color: var(--color-text-secondary);
}

.alert-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 16px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s;
  margin-left: auto;
}
.alert-close:hover { color: var(--color-text-primary); }
/* Pagination — Uses Design Token CSS Variables */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  font-family: var(--font-body, inherit);
}

.pagi-total {
  font-size: var(--text-sm, 12px);
  color: var(--color-text-muted, var(--color-text-muted));
  white-space: nowrap;
}

.pagi-pages {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pagi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--space-2, 8px);
  font-size: var(--text-sm, 12px);
  font-weight: 500;
  color: var(--color-text-secondary, var(--color-text-secondary));
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  transition: all 0.1s;
  font-family: var(--font-body, inherit);
}
.pagi-btn:hover:not(:disabled):not(.pagi-btn--active) {
  color: var(--color-text-primary, var(--color-text-primary));
  border-color: var(--color-border-strong);
  background: var(--color-bg-secondary);
}
.pagi-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.pagi-btn--active {
  background: var(--color-brand, var(--color-text-primary));
  color: var(--color-brand-text);
  border-color: var(--color-brand, var(--color-text-primary));
}
.pagi-btn--nav {
  font-size: var(--text-base, 13px);
  letter-spacing: -0.02em;
}

.pagi-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  color: var(--color-text-muted, var(--color-text-muted));
  font-size: var(--text-sm, 12px);
}

.pagi-info {
  font-size: var(--text-xs, 11px);
  color: var(--color-text-muted, var(--color-text-muted));
  white-space: nowrap;
}.h5-share-modal .modal-body {
  padding: 0;
}

.h5-share-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 20px 16px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--color-brand) 18%, transparent), transparent 10rem),
    color-mix(in srgb, var(--color-brand) 4%, var(--color-bg-primary));
}

.h5-share-kicker {
  color: var(--color-brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.h5-share-intro h2 {
  margin: 7px 0 5px;
  color: var(--color-text-primary);
  font-size: 18px;
  letter-spacing: -0.03em;
}

.h5-share-intro p {
  max-width: 350px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.h5-share-intro-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-primary));
}

.h5-share-main {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 22px 20px 18px;
}

.h5-share-qr-frame {
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.h5-share-qr-frame img {
  display: block;
  width: 188px;
  height: 188px;
  image-rendering: pixelated;
}

.h5-share-qr-frame small {
  color: #81848c;
  font-size: 10px;
}

.h5-share-url-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.h5-share-url-panel > span {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.h5-share-url-panel code {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  padding: 10px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  font-family: var(--font-code);
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h5-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 3px;
}

.h5-share-actions .saas-btn {
  gap: 6px;
}

.h5-share-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 20px;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  padding: 13px 0;
}

.h5-share-stats > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.h5-share-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: 10px;
  white-space: nowrap;
}

.h5-share-stats strong {
  color: var(--color-text-primary);
  font-size: 16px;
  letter-spacing: -0.04em;
}

.h5-share-footnote {
  margin: 0;
  padding: 14px 20px 18px;
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.6;
}

.h5-share-loading,
.h5-share-error {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 300px;
  padding: 24px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

.h5-share-error {
  display: flex;
  justify-content: center;
  color: var(--color-danger);
}

@media (max-width: 560px) {
  .h5-share-main {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .h5-share-qr-frame {
    width: min(100%, 220px);
    margin: 0 auto;
  }

  .h5-share-url-panel {
    width: 100%;
  }
}
.h5-templates-page {
  --h5-ink: #20222a;
  --h5-muted: #777b86;
  --h5-border: color-mix(in srgb, var(--color-border-default) 78%, transparent);
}

.h5-templates-page .saas-runtime-page-header {
  align-items: center;
}

.h5-templates-alert {
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 22%, var(--color-border-default));
  border-radius: 12px;
  padding: 11px 13px;
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 7%, var(--color-bg-primary));
  font-size: 12px;
}

.h5-templates-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
  align-items: start;
  gap: 18px;
}

.h5-templates-catalog {
  min-width: 0;
}

.h5-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.h5-template-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 156px;
  border: 1px solid var(--h5-border);
  border-radius: 16px;
  padding: 16px;
  overflow: hidden;
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-bg-primary) 96%, white);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.h5-template-card::after {
  position: absolute;
  right: -46px;
  bottom: -54px;
  width: 128px;
  height: 128px;
  border: 1px solid color-mix(in srgb, var(--color-brand) 8%, transparent);
  border-radius: 50%;
  content: "";
}

.h5-template-card:hover {
  border-color: color-mix(in srgb, var(--color-brand) 42%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-brand) 3%, var(--color-bg-primary));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-brand) 8%, transparent);
  transform: translateY(-2px);
}

.h5-template-card.is-selected {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 6%, var(--color-bg-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 11%, transparent);
}

.h5-template-card-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--template-accent);
  background: color-mix(in srgb, var(--template-accent) 11%, var(--color-bg-primary));
}

.h5-template-card-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.h5-template-card-copy strong {
  color: var(--h5-ink);
  font-size: 14px;
}

.h5-template-card-copy > span {
  color: var(--h5-muted);
  font-size: 11px;
  line-height: 1.65;
}

.h5-template-card-foot {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: end;
  color: var(--color-text-muted);
}

.h5-template-card-foot small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.h5-template-card.is-selected .h5-template-card-foot {
  color: var(--color-brand);
}

.h5-template-config {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 20px;
  background: var(--color-bg-primary);
  box-shadow: none;
}

.h5-template-config-heading {
  display: flex;
  align-items: center;
}

.h5-template-config-heading h2 {
  margin: 0;
  color: var(--h5-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.h5-template-field {
  display: grid;
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.h5-template-field input:not([type="color"]) {
  width: 100%;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  outline: none;
  padding: 11px 12px;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  font: inherit;
  font-weight: 500;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.h5-template-field input:not([type="color"]):focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.h5-template-field small {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 400;
}

.h5-template-color-field {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.h5-template-color-field > span:first-child {
  align-self: center;
}

.h5-template-color-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.h5-template-color-control input {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.h5-template-color-control code {
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 500;
}

.h5-template-delivery-note {
  display: flex;
  gap: 10px;
  border: 1px solid color-mix(in srgb, #0f9f78 20%, var(--color-border-default));
  border-radius: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, #0f9f78 6%, var(--color-bg-primary));
}

.h5-template-delivery-note > span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #0f9f78;
  background: color-mix(in srgb, #0f9f78 12%, transparent);
}

.h5-template-delivery-note strong {
  color: var(--color-text-primary);
  font-size: 11px;
}

.h5-template-delivery-note p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.55;
}

.h5-template-create {
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.h5-templates-empty {
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 260px;
  border: 1px dashed var(--color-border-default);
  border-radius: 18px;
  color: var(--color-text-muted);
  text-align: center;
}

.h5-templates-empty strong {
  color: var(--color-text-primary);
  font-size: 14px;
}

.h5-templates-empty span {
  font-size: 12px;
}

@media (max-width: 900px) {
  .h5-templates-layout {
    grid-template-columns: 1fr;
  }

  .h5-template-config {
    position: static;
  }
}

@media (max-width: 620px) {
  .h5-templates-page .saas-runtime-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .h5-template-grid {
    grid-template-columns: 1fr;
  }
}
.public-h5-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 4%, color-mix(in srgb, var(--h5-primary) 16%, transparent), transparent 30rem),
    #f4f1eb;
  color: #202227;
  font-family: "Manrope", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

.public-h5-page {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 16px 30px;
}

.public-h5-hero {
  position: relative;
  min-height: 350px;
  padding: 20px 22px 30px;
  overflow: hidden;
  border-radius: 28px;
  color: #fff;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--h5-primary) 90%, #121317), #191c22 76%),
    var(--h5-primary);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--h5-primary) 20%, transparent);
}

.public-h5-hero::after {
  position: absolute;
  right: -45px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.04), 0 0 0 44px rgba(255, 255, 255, 0.03);
  content: "";
}

.public-h5-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.public-h5-brand-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
}

.public-h5-eyebrow,
.public-h5-form-kicker {
  color: color-mix(in srgb, var(--h5-primary) 76%, #111);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.public-h5-eyebrow {
  position: relative;
  z-index: 1;
  margin-top: 72px;
  color: rgba(255, 255, 255, 0.64);
}

.public-h5-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 12px 0 12px;
  font-size: clamp(2.25rem, 9vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.public-h5-hero p {
  position: relative;
  z-index: 1;
  max-width: 390px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.public-h5-hero-orbit {
  position: absolute;
  top: 92px;
  right: 28px;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.public-h5-hero-orbit::before,
.public-h5-hero-orbit::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.public-h5-hero-orbit::before { top: 10px; right: 2px; }
.public-h5-hero-orbit::after { bottom: 10px; left: 2px; opacity: 0.35; }

.public-h5-sections {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.public-h5-section,
.public-h5-form,
.public-h5-success {
  border: 1px solid rgba(32, 34, 39, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 28px rgba(29, 31, 35, 0.05);
}

.public-h5-section {
  padding: 20px;
}

.public-h5-section h2,
.public-h5-form h2,
.public-h5-success h2 {
  margin: 0;
  color: #202227;
  font-size: 19px;
  letter-spacing: -0.04em;
}

.public-h5-section p,
.public-h5-success p,
.public-h5-form-heading p {
  margin: 8px 0 0;
  color: #77766f;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 13px;
  line-height: 1.65;
}

.public-h5-section ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.public-h5-section li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #45443f;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 13px;
}

.public-h5-section li span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  color: var(--h5-primary);
  background: color-mix(in srgb, var(--h5-primary) 12%, white);
  font-weight: 800;
}

.public-h5-form {
  padding: 22px 18px 18px;
}

.public-h5-form-heading {
  margin-bottom: 20px;
}

.public-h5-form-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--h5-primary);
}

.public-h5-fields {
  display: grid;
  gap: 14px;
}

.public-h5-field {
  display: grid;
  gap: 7px;
  color: #4f4e49;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.public-h5-field b { color: #c2410c; }

.public-h5-field input,
.public-h5-field textarea,
.public-h5-field select {
  width: 100%;
  border: 1px solid #dfddd7;
  border-radius: 12px;
  outline: none;
  padding: 13px 12px;
  color: #24252a;
  background: rgba(255, 255, 255, 0.82);
  font: 400 14px/1.4 "Inter", "PingFang SC", sans-serif;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.public-h5-field textarea { resize: vertical; min-height: 92px; }

.public-h5-field input:focus,
.public-h5-field textarea:focus,
.public-h5-field select:focus {
  border-color: var(--h5-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--h5-primary) 12%, transparent);
  background: #fff;
}

.public-h5-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-h5-check {
  position: relative;
  cursor: pointer;
}

.public-h5-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.public-h5-check span {
  display: block;
  border: 1px solid #dfddd7;
  border-radius: 999px;
  padding: 8px 12px;
  color: #67655f;
  background: #fff;
  font: 400 12px/1.2 "Inter", "PingFang SC", sans-serif;
}

.public-h5-check.is-checked span {
  border-color: var(--h5-primary);
  color: var(--h5-primary);
  background: color-mix(in srgb, var(--h5-primary) 10%, white);
}

.public-h5-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5d5b55;
  font: 400 13px/1.4 "Inter", "PingFang SC", sans-serif;
}

.public-h5-switch input { accent-color: var(--h5-primary); }

.public-h5-error {
  margin-top: 14px;
  border-radius: 10px;
  padding: 10px 12px;
  color: #a33a21;
  background: #fff0e9;
  font: 400 12px/1.5 "Inter", "PingFang SC", sans-serif;
}

.public-h5-submit,
.public-h5-secondary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  padding: 15px 16px;
  color: #fff;
  background: var(--h5-primary);
  box-shadow: 0 12px 20px color-mix(in srgb, var(--h5-primary) 23%, transparent);
  font: 800 14px/1 "Inter", "PingFang SC", sans-serif;
  transition: transform 160ms ease, filter 160ms ease;
}

.public-h5-submit:hover:not(:disabled),
.public-h5-secondary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.public-h5-submit:disabled { cursor: wait; opacity: 0.58; }

.public-h5-privacy {
  margin: 12px 0 0;
  color: #a3a097;
  text-align: center;
  font: 400 10px/1.5 "Inter", "PingFang SC", sans-serif;
}

.public-h5-success {
  padding: 42px 22px;
  text-align: center;
}

.public-h5-success-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: var(--h5-primary);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--h5-primary) 20%, transparent);
  font-size: 28px;
  font-weight: 800;
}

.public-h5-secondary-button {
  justify-content: center;
  width: auto;
  margin: 24px auto 0;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--h5-primary) 10%, white);
  color: var(--h5-primary);
  box-shadow: none;
  font-size: 12px;
}

.public-h5-footer {
  display: flex;
  justify-content: space-between;
  padding: 18px 4px 0;
  color: #aaa79f;
  font: 700 9px/1 "Inter", "PingFang SC", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-h5-state {
  display: grid;
  min-height: 100vh;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  color: #55534d;
  background: #f4f1eb;
  font-family: "Inter", "PingFang SC", sans-serif;
}

.public-h5-state p { margin: 0; color: #8d8a82; font-size: 13px; }
.public-h5-state h1 { margin: 0; font: 800 22px/1.2 "Manrope", "PingFang SC", sans-serif; }
.public-h5-state-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: #a33a21;
  background: #ffe8de;
  font-weight: 800;
}
.public-h5-loader {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(67, 56, 202, 0.16);
  border-top-color: #4338ca;
  border-radius: 50%;
  animation: public-h5-spin 700ms linear infinite;
}

@keyframes public-h5-spin { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  .public-h5-page { padding-top: 28px; padding-bottom: 48px; }
  .public-h5-hero { min-height: 390px; padding: 26px 30px 34px; }
  .public-h5-form { padding: 28px 26px 22px; }
}
/*
 * SaaS workspace token contract
 *
 * This file is loaded last on purpose. Older page styles can keep their
 * component-specific selectors, but shared SaaS geometry and type hierarchy
 * are owned here so the final result does not depend on import order.
 */

:root {
  /* Spacing: one 4px rhythm for page, section, control, and table layout. */
  --saas-space-0: 0px;
  --saas-space-1: 4px;
  --saas-space-2: 8px;
  --saas-space-3: 12px;
  --saas-space-4: 16px;
  --saas-space-5: 20px;
  --saas-space-6: 24px;
  --saas-space-8: 32px;
  --saas-space-10: 40px;
  --saas-space-12: 48px;

  /* Typography: semantic roles, not page-specific pixel values. */
  --saas-type-overline: 10px;
  --saas-type-caption: 11px;
  --saas-type-body-sm: 12px;
  --saas-type-body: 13px;
  --saas-type-card: 14px;
  --saas-type-section: 15px;
  --saas-type-subtitle: 18px;
  --saas-type-page: 22px;
  --saas-type-hero: 28px;
  --saas-type-value: 28px;

  --saas-weight-regular: 400;
  --saas-weight-medium: 500;
  --saas-weight-semibold: 600;
  --saas-weight-bold: 700;
  --saas-weight-heavy: 800;

  --saas-leading-tight: 1.25;
  --saas-leading-body: 1.5;
  --saas-leading-relaxed: 1.6;

  /* Geometry: controls, rows, dividers, and surfaces share fixed anchors. */
  --saas-control-height-xs: 28px;
  --saas-control-height-sm: 32px;
  --saas-control-height-md: 36px;
  --saas-control-height-lg: 40px;
  --saas-table-row-height: 48px;
  --saas-border-width: 1px;
  --saas-radius-control: 8px;
  --saas-radius-card: 12px;
  --saas-radius-panel: 12px;
  --saas-radius-pill: 9999px;

  /* Workspace frame. */
  --saas-sidebar-width: 220px;
  --saas-shell-height: 52px;
  --saas-page-gutter: 20px;
  --saas-page-top: 24px;
  --saas-page-bottom: 40px;
  --saas-section-gap: 24px;
}

/* The public workspace uses this contract. Platform admin and public H5
   surfaces stay outside this scope and keep their own visual language. */
.saas-layout {
  --sidebar-width: var(--saas-sidebar-width);
  --shell-header-height: var(--saas-shell-height);
  --page-padding-x: var(--saas-page-gutter);
  --page-padding-y: var(--saas-page-top);
}

.saas-layout.saas-layout .saas-page-content {
  padding: var(--saas-page-top) var(--saas-page-gutter) var(--saas-page-bottom);
}

/* Typography hierarchy. Every workspace h1/h2/h3 now maps to one role. */
.saas-layout.saas-layout h1,
.saas-layout.saas-layout .saas-title-xl,
.saas-layout.saas-layout .saas-page-title,
.saas-layout.saas-layout .camp-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--saas-type-page);
  font-weight: var(--saas-weight-bold);
  line-height: var(--saas-leading-tight);
  letter-spacing: 0;
}

.saas-layout.saas-layout h2,
.saas-layout.saas-layout .saas-title-md,
.saas-layout.saas-layout .saas-section-title,
.saas-layout.saas-layout .saas-data-panel-title,
.saas-layout.saas-layout .camp-panel-title,
.saas-layout.saas-layout .overview-section-header h2,
.saas-layout.saas-layout .overview-readiness-title-row h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--saas-type-section);
  font-weight: var(--saas-weight-bold);
  line-height: var(--saas-leading-tight);
  letter-spacing: 0;
}

.saas-layout.saas-layout h3,
.saas-layout.saas-layout h4,
.saas-layout.saas-layout .saas-title-sm,
.saas-layout.saas-layout .camp-item-name,
.saas-layout.saas-layout .saas-bundle-name {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--saas-type-card);
  font-weight: var(--saas-weight-semibold);
  line-height: var(--saas-leading-body);
  letter-spacing: 0;
}

.saas-layout.saas-layout .saas-title-lg {
  font-size: var(--saas-type-subtitle);
  line-height: var(--saas-leading-tight);
}

.saas-layout.saas-layout .saas-body,
.saas-layout.saas-layout .saas-page-header-desc,
.saas-layout.saas-layout .saas-runtime-page-description {
  font-size: var(--saas-type-body);
  line-height: var(--saas-leading-body);
}

.saas-layout.saas-layout .saas-body-sm,
.saas-layout.saas-layout .saas-data-panel-description,
.saas-layout.saas-layout .saas-form-help {
  font-size: var(--saas-type-body-sm);
  line-height: var(--saas-leading-body);
}

.saas-layout.saas-layout .saas-body-xs,
.saas-layout.saas-layout .saas-label,
.saas-layout.saas-layout .saas-label-sm,
.saas-layout.saas-layout .saas-card-label,
.saas-layout.saas-layout .saas-stat-label {
  font-size: var(--saas-type-caption);
  line-height: var(--saas-leading-body);
}

/* Page rhythm. Legacy and runtime pages share the same header geometry. */
.saas-layout.saas-layout .saas-page-header,
.saas-layout.saas-layout .saas-runtime-page-header {
  gap: var(--saas-space-6);
  margin-bottom: var(--saas-space-6);
}

.saas-layout.saas-layout .saas-page-header-info,
.saas-layout.saas-layout .saas-runtime-page-header-copy {
  gap: var(--saas-space-2);
}

.saas-layout.saas-layout .saas-page-header-title,
.saas-layout.saas-layout .saas-runtime-page-title {
  gap: var(--saas-space-3);
}

.saas-layout.saas-layout .saas-page-header-actions,
.saas-layout.saas-layout .saas-runtime-section-actions,
.saas-layout.saas-layout .saas-data-panel-actions {
  gap: var(--saas-space-2);
}

.saas-layout.saas-layout .saas-runtime-section {
  margin-bottom: var(--saas-section-gap);
}

.saas-layout.saas-layout .saas-runtime-section-header {
  gap: var(--saas-space-4);
  margin-bottom: var(--saas-space-3);
}

.saas-layout.saas-layout .saas-runtime-toolbar {
  min-height: var(--saas-control-height-lg);
  gap: var(--saas-space-3);
  margin-bottom: var(--saas-space-5);
  padding: var(--saas-space-2) var(--saas-space-3);
  border-radius: var(--saas-radius-panel);
}

.saas-layout.saas-layout .saas-data-panel {
  border-radius: var(--saas-radius-panel);
}

.saas-layout.saas-layout .saas-data-panel-header {
  gap: var(--saas-space-4);
  padding: var(--saas-space-4) var(--saas-space-5) var(--saas-space-3);
}

.saas-layout.saas-layout .saas-data-panel-toolbar {
  padding: 0 var(--saas-space-5) var(--saas-space-3);
}

/* Page roots use one section gap. This removes the 16/18/22px local rhythms
   that made otherwise equivalent screens feel unrelated. */
.saas-layout.saas-layout .saas-analytics-page,
.saas-layout.saas-layout .saas-account-page,
.saas-layout.saas-layout .saas-bundles-page,
.saas-layout.saas-layout .saas-deployments-page,
.saas-layout.saas-layout .saas-experts-page,
.saas-layout.saas-layout .saas-installed-page,
.saas-layout.saas-layout .saas-messages-page,
.saas-layout.saas-layout .saas-notifications-page,
.saas-layout.saas-layout .saas-services-page,
.saas-layout.saas-layout .saas-sites-page,
.saas-layout.saas-layout .saas-usage-page,
.saas-layout.saas-layout .saas-webhooks-page,
.saas-layout.saas-layout .saas-page.saas-plans-page,
.saas-layout.saas-layout .menu-settings-page {
  gap: var(--saas-section-gap);
}

.saas-layout.saas-layout .camp-page {
  padding: 0;
}

/* Surfaces and controls. These are the only public workspace geometry
   variants; local pages should use these classes instead of new pixel values. */
.saas-layout.saas-layout .saas-card {
  padding: var(--saas-space-5);
  border-radius: var(--saas-radius-card);
}

.saas-layout.saas-layout .saas-card-sm {
  padding: var(--saas-space-3);
}

.saas-layout.saas-layout .saas-card-md {
  padding: var(--saas-space-4);
}

.saas-layout.saas-layout .saas-card-lg {
  padding: var(--saas-space-5);
}

.saas-layout.saas-layout .saas-page-content .saas-btn {
  min-height: var(--saas-control-height-md);
  padding-inline: var(--saas-space-4);
  border-radius: var(--saas-radius-control);
  font-size: var(--saas-type-body-sm);
  font-weight: var(--saas-weight-semibold);
}

.saas-layout.saas-layout .saas-page-content .saas-btn-sm {
  min-height: var(--saas-control-height-sm);
  padding-inline: var(--saas-space-3);
  font-size: var(--saas-type-caption);
}

.saas-layout.saas-layout .saas-page-content .saas-btn-xs {
  min-height: var(--saas-control-height-xs);
  padding-inline: var(--saas-space-2);
  font-size: var(--saas-type-overline);
}

.saas-layout.saas-layout .saas-page-content .saas-btn-lg {
  min-height: var(--saas-control-height-lg);
  padding-inline: var(--saas-space-5);
}

.saas-layout.saas-layout .saas-page-content .saas-input,
.saas-layout.saas-layout .saas-page-content .saas-select {
  min-height: var(--saas-control-height-md);
  padding-inline: var(--saas-space-3);
  border-radius: var(--saas-radius-control);
  font-size: var(--saas-type-body);
}

.saas-layout.saas-layout .saas-table,
.saas-layout.saas-layout .data-table,
.saas-layout.saas-layout .ruoyi-table {
  font-size: var(--saas-type-body);
}

.saas-layout.saas-layout .saas-table th,
.saas-layout.saas-layout .data-table-th,
.saas-layout.saas-layout .ruoyi-table th {
  height: 40px;
  padding-inline: var(--saas-space-4);
  font-size: var(--saas-type-caption);
  line-height: var(--saas-leading-body);
}

.saas-layout.saas-layout .saas-table td,
.saas-layout.saas-layout .data-table-td,
.saas-layout.saas-layout .ruoyi-table td {
  min-height: var(--saas-table-row-height);
  padding: var(--saas-space-3) var(--saas-space-4);
}

/* Keep the intentional dashboard hero/value distinction, but make it token
   based so it does not become another arbitrary heading scale. */
.saas-layout.saas-layout .workspace-overview-page .overview-hero h1 {
  font-size: var(--saas-type-hero);
  line-height: var(--saas-leading-tight);
}

.saas-layout.saas-layout .workspace-overview-page .overview-metric-value {
  font-size: var(--saas-type-value);
}

@media (max-width: 768px) {
  :root {
    --saas-page-gutter: 16px;
    --saas-page-top: 20px;
    --saas-page-bottom: 32px;
    --saas-section-gap: 20px;
  }

  .saas-layout.saas-layout .saas-page-header,
  .saas-layout.saas-layout .saas-runtime-page-header {
    align-items: stretch;
    gap: var(--saas-space-4);
    margin-bottom: var(--saas-space-5);
  }

  .saas-layout.saas-layout .saas-card {
    padding: var(--saas-space-4);
  }

  .saas-layout.saas-layout .saas-data-panel-header {
    padding-inline: var(--saas-space-4);
  }

  .saas-layout.saas-layout .saas-data-panel-toolbar {
    padding-inline: var(--saas-space-4);
  }

  .saas-layout.saas-layout .saas-runtime-page-title .saas-title-xl,
  .saas-layout.saas-layout .saas-page-title,
  .saas-layout.saas-layout h1 {
    font-size: var(--saas-type-page);
  }
}

@media (max-width: 480px) {
  :root {
    --saas-page-gutter: 12px;
    --saas-page-top: 16px;
    --saas-page-bottom: 28px;
  }

  .saas-layout.saas-layout .saas-page-header,
  .saas-layout.saas-layout .saas-runtime-page-header {
    gap: var(--saas-space-3);
    margin-bottom: var(--saas-space-4);
  }
}
/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-400-normal-DQukG94-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-400-normal-obahsSVq.woff2) format('woff2'), url(/assets/inter-cyrillic-400-normal-HOLc17fK.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-ext-400-normal-DGGRlc-M.woff2) format('woff2'), url(/assets/inter-greek-ext-400-normal-KugGGMne.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-400-normal-B4URO6DV.woff2) format('woff2'), url(/assets/inter-greek-400-normal-q2sYcFCs.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-vietnamese-400-normal-DMkecbls.woff2) format('woff2'), url(/assets/inter-vietnamese-400-normal-Bbgyi5SW.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2'), url(/assets/inter-latin-ext-400-normal-77YHD8bZ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(/assets/inter-latin-400-normal-CyCys3Eg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-ext-500-normal-B0yAr1jD.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-500-normal-BmqWE9Dz.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-500-normal-BasfLYem.woff2) format('woff2'), url(/assets/inter-cyrillic-500-normal-CxZf_p3X.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-ext-500-normal-C4iEst2y.woff2) format('woff2'), url(/assets/inter-greek-ext-500-normal-2j5mBUwD.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-500-normal-BIZE56-Y.woff2) format('woff2'), url(/assets/inter-greek-500-normal-Xzm54t5V.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-vietnamese-500-normal-DOriooB6.woff2) format('woff2'), url(/assets/inter-vietnamese-500-normal-mJboJaSs.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2'), url(/assets/inter-latin-ext-500-normal-BxGbmqWO.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format('woff2'), url(/assets/inter-latin-500-normal-BL9OpVg8.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-600-normal-Bcila6Z-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-600-normal-CWCymEST.woff2) format('woff2'), url(/assets/inter-cyrillic-600-normal-4D_pXhcN.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-ext-600-normal-DRtmH8MT.woff2) format('woff2'), url(/assets/inter-greek-ext-600-normal-B8X0CLgF.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-600-normal-plRanbMR.woff2) format('woff2'), url(/assets/inter-greek-600-normal-BZpKdvQh.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-vietnamese-600-normal-Cc8MFFhd.woff2) format('woff2'), url(/assets/inter-vietnamese-600-normal-BuLX-rYi.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2'), url(/assets/inter-latin-ext-600-normal-CIVaiw4L.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(/assets/inter-latin-600-normal-CiBQ2DWP.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-cyrillic-ext-700-normal-BjwYoWNd.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-700-normal-LO58E6JB.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-cyrillic-700-normal-CjBOestx.woff2) format('woff2'), url(/assets/inter-cyrillic-700-normal-DrXBdSj3.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-greek-ext-700-normal-qfdV9bQt.woff2) format('woff2'), url(/assets/inter-greek-ext-700-normal-BoQ6DsYi.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-greek-700-normal-C3JjAnD8.woff2) format('woff2'), url(/assets/inter-greek-700-normal-BUv2fZ6O.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-vietnamese-700-normal-DlLaEgI2.woff2) format('woff2'), url(/assets/inter-vietnamese-700-normal-BZaoP0fm.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-latin-ext-700-normal-Ca8adRJv.woff2) format('woff2'), url(/assets/inter-latin-ext-700-normal-TidjK2hL.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-latin-700-normal-Yt3aPRUw.woff2) format('woff2'), url(/assets/inter-latin-700-normal-BLAVimhd.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* manrope-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAYgAA8AAAAAC6wAAAXGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG4F8HC4GYD9TVEFUKgCBChEICok0h0cLIAABNgIkAzwEIAWEQAeBDgwHG5cJCB6FcZsTTpEclTZ1ofCYsgigtf/N7skX04SpVaInlfSIVkUjP2GSIHRN3jxyP4+n/+cmKTSyb2AG30HZWweyUJo+QKzeh1mF/xdjrs6zSTMtYbWZ/NyiSXJLWxqQIFKSe1ofxF0ne+ShzqSmdMSp6nFvLQIqjYKRSxSVjeCxeyKrAY+9fZwOPFDwTdTtGWJ1IKRmSEUFRpbDQcJrb8IFyJUDxecUvR3IkY7xO77kfFAsKE4Yev2ygnvUvOJSrKX4r+JPAtpuVgnKBVEikytTrlIQVEvy15AhyqWCMmXCdFUc0CNBugWUMWh5nxiwDWrZjela4gpkZM3UCeAqVup2T4oLAMjGMiC6cPOKqjLYATX9Z4SN/x4A6JVEqxzQNUA6g7cD6EcJywvRzF/fjTg8MsohQBQg5MQVMAQkBAtJXJ1yCGjlgpSr0a/QDngdInWcukx92X9mMR167jHqEvVFdfF1caPQLNylKD7tAtQGxKrVqndSjUy5XIWyza8vqgMI2Xv8EAhrAWIC5J2ADtJRIiGaAlZHAMinJmGMcLGLfD2/i8g/+CRlkRQVKUHuMCm4SHJcNlE8STKhAznD8coOQYf8kJLNhqpmWCUX7cWcxWJzQU02SaZUyyZQkynmtd2yzGqFWEnOtIEHiUuWnBZKPFmNXGG09NFb6OzbHxeHffgGzjg+aLba7cj4Sc02iwXOWK1D5CTJxMmSCcRk4nFr3qatKQSFBixziDo8wmDJZrKbqnjQ0rw4UBiqM4PWKFBus8UFDevXeztbQFXlhRtw5mTmxRmUFa0/7i/ZYaG1JnbhiG1+p6d2vyp2824081TMoa4S9IEjPmIV5Pfjr3tpjS+wFByJesBitmjGilpci+hcOS6nswqsYHAMZvA5OIfOYozp4xJxIoOlMR2IwTEaQhgOw8ux/BDOD/tBVPfQjr7i3//he1c6zdcspTI+/OVDmDgt+/xG43ncctTsilG5X+PCutoFjVcSGSaRx6801i3wd6bP+dE24se6oN31vuW5Zbm+Qavrq8H7844ZXTsfphnPOZZ2/7ln0y+15S7LMk0TxirNuyrpwAkf/gTZdci3//DpD/+ZHSlX9tS9/76nwBGHI1Wm4AfaP1oBr872fr1tW+8X2L4CSdEvkT2Xwf2RUZ85+CeXn51dSecfk/cdBZ8tWD1lWVD1/ntrA5ZN4LegMnf+L3xvouGga81AWVepJlzz008Ybj6/2nj1yNu7flw5B+4dmv//j8u375Yh5m7qgXnwc8XOD1csvr5h69JLy/qmNGdvGt667BIc7KlYG9bdlTp8SVmWNntkzPj/pcWx+pj+MLepkXGx3/toGtxD83vSm67xk/9IjFS9w4zYlVv/u1pxdezOELjy++FfNIzSyoSGVOmvKz0iJ4wcqRpDZ9enGfjBGf/xCpMmxuU13ugwdB7I2bdXsbMxM8wU0nsRYg4pKSB9k12HgPQsn16Z/qbHOedXISl4Ae8e7JsD+NBXtx3838DbLjgKQS6CwAsnnCeAbEEAmuuyB95mcyEqZab3OSRbAUv4JMxJ63WHzYNLlMWGsAJwgnTkdz5bC6HONjIVwhBa+W2VTiGFVARcRyEyXjDsP15U7h8vscgZXmqcebxMJw0vN0YBt9YUUhkEqgF+18dtN0RpxCiuqYhYBlkSDjMZwFIy4HxCPJNBg9+MHmtEghoKlar00WHpGQwpNgGH1aey8+viMPQ0BjUbwnZXrKcjl8r3S5MotZgt93Dydvpnl61BqSplsiekxYMPD0VWyxOx/vHJEiXJJNdotIOuHUKth1TBADFUyLzRoN+ImFzUpltMcWiE0jJg1u+lB+hpDyM9qg87SGBQn2ZSO+AfRiOAYotJwNrqMOxhiDAnkIhCPMRHAiSEJIiQGEn4hf3s0LghUdPfX07iBiYKzDplYipTiPcqxiKzBZaBTF6SWJhIFNWnRyUnMqkX0P9GqKU=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAiAAA4AAAAACxgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABRAAAAJ0AAAD8jluUzEdTVUIAAAHkAAAALQAAAC4jdiSCT1MvMgAAAhQAAABMAAAAYHNlrf5TVEFUAAACYAAAACYAAAAqeZVrSWNtYXAAAAKIAAAAZAAAAIpNu/P9Z2FzcAAAAuwAAAAIAAAACAAAABBnbHlmAAAC9AAAA2UAAASK2CSsZ2hlYWQAAAZcAAAANgAAADYgiMT2aGhlYQAABpQAAAAfAAAAJBDuBsdobXR4AAAGtAAAADcAAAA8RLkDYGxvY2EAAAbsAAAAIAAAACAI1wpYbWF4cAAABwwAAAAcAAAAIAAmAL9uYW1lAAAHKAAAAPIAAAHsJ/5KCXBvc3QAAAgcAAAAYwAAAI7B1Xo4eNpiYGRgYOBi0GKwYGB2cfMJYRBJrizKYRDJSSzJYxABVDkHGAhEURSGvzu9Zp60ptpKEIgkLSG0jgCIARABLWJ20DJuPIM6B/ycn6NApkAc9uejikaKThWqzknB3VWvAvkhdzkx80S+f2hL3nKk7ca85MMmnznO2xf59JfZD1XoLCz1BtVKCGuLVpbo9IowGIT2s1XzQvkCzs0qKgAAAHjaY2BkYGDgYtABQmYXN58QBonkyqIcBpGcxJI8BhEGEGABEf//g0gAlk8HPAAAAHjaY2BhOc20h4GVgYFVhGUDAwPDNAgNFDNi6mBAAUzsIALGC/bw9WRYwMCrsIUj5O8KBgaOEKYIBQbG+SA5FgvWBUBKgYEFAFbgDHp42mNgBEIOIGZgEAGTMgxM5ekZJSAmAxMDmGJkY9rDwAAALTgCwgAAeNpVyDUBQgEUBdCDu8tMlV+DDMzkoQDOgkMSRiwEru9dRxgRVEWEHh7VRl1RRFxOQ6BjGwpH+9F59NiYXC787b3oLHp47pfzZXNpXYJLCNg1hdR9LyuvCHJikuJSEtJXUj0X5gABAAH//wAPeNqVU0OYHFsUPueW5kvbRnVNY9zujq3xdGzb/Wzbtm37xcbqMdlOdtnFrNu51RPvUsY9Pw7AALsABBDeBQ4k0IEJbOACH4RAgTg0QAtkADI52RG9znMXXzx7nWe5/Gx3942treUxY24cMeLGQYPKxeLNyWS5sbFcX39zbW05HL7R6wUgkGCaHUyzBP2YOpRR4WQOOS6BO3Ae7ji1QN01n5T++1t498xcLNJdxEPeVucDcH2R0lfVSONVsajYMtfGY+svr/9yNQgfwfIlnPFVHM9VOLZILJbL2J3pPLuK4rWQ/098vOfPkXNH/ll6/BpgLD02MTlyZHLiYyUABLbxO5nHGgDZwuDZYcFD1IkebMNW9FAX6eRK6hYy5NzX6vdQqVyMICLwoCE8yd7/ZAhu9mLJF/KZtNPpsCiWbDNRIpIosUe8Oz1u0bqfD8w5Zhlw27KbevLyEeFd9UDI5nv6zId0MXa3PnPj6JjXp95W7ZBBlV7hHWED6MAJMkOvJWZrbZi3mgkfdzKGgux0OZ0Yi8fYITIK4qD7PvoIs/gt5j76iO7d/9zmVEB37gtdILmZDNIFUpufe25TMqgLrscSbsDS+vX0azqCfr3+IN5/89hJk0bfdD+5b9KYG+8n1XfNVYK+ytfzRS0vLCEZZIcFv6W3HkETmg/TW+mruJQvnjvMmc7uoq9qES8wpXkW4a3mQUuDK0iqidCEKpG+TDxUfKbzk52BGokc43TWhbPGrYof4Yv0pUDo5Wfqprba6BkUXRPru1tjAWpkaBx0V3r5B/nJYGIZjgAIkRjJZa0avtVhJ2I8fSEhLB9VFpaOZe8feejRI+98cOThR468/+yYFpN6wJwai++ak2OfnndX0FQTfB7xk88Rnn2eVj75lFae6507bPqsobPxl5nDZk3pSDQBgQ7G+yqrggLjqqzMRC5bUNjQyYzEYddqkEmzcuQLGZF9ETEua2+5S37ZV4X97csFawq7lHGQdW0v52cvMUzi21TFWGMNReITlaFzY3oLf4pPBEfuVxcg+ZcQcz+3y9fZOHCC22LlqZhWhm5eO/OzgQPH6hcHo6HcH8syLevXG43+poZhnoC9kDfFbakVTUuXc/J6jnOm7fH+7kAkL7uS7hG3N0+aObiQf39iS8v68/QJLjMAAAAAAQAAAASBBgDfBT5fDzz1AAMH0AAAAADbtqaEAAAAAN0fUZ/+z/2eCcgJZAABAAYAAgAAAAAAAHjaY2BkYOAI+buCgYHL4d/5f+c5TwBFUAE/AKRJBsgAeNpjPcFwgtWWQQOGWY4zMIAwqwdDDxszgw1LEFCsjWEyyxWGAMYJDAwgzLIBiJ8y+AIAUaoLVwAAAABaAHcAmwDMAOUA7QEWAVgBcQGdAdkB2QHZAdkCRXjaY2BkYGDgZ0hh4GWIZGAD8xCAmYERABSdAOZ42nXQA25FQRSA4b924xTRDWvbtt342byo2wV0FV1G466ga+rk5FQPw28MoJEXqqiobgDe+FRX0MqHupJ63tVVDPKqrqYdW11DJ9fqWtpZVrcyTjPiCoxQ18qeV4SJEyWGK9klxyxDDOEQxCZODtd4EMc4ZeosNlGGOGKTfQ7wk8EmS44wA6wapQhxSRhb1mTJYDHOIBMMM16wwvpZ8TODOc7Y5oAdo3L7a10wvib1PfbPmyxGGWaEGaNzYnJi4Q2OxQnjoKxYwZPfyMoLLLp/fsbRv4kSlxkeAQYJkiUtPxbDjy27h/AzRPrfST1f4K1IMgAAeNpjYGIAg/9zGIwYsAF+IFZhOMnIxGDDyMzIwsjKyMbIzsjBwMzIycjFyM3mmFSUWpbKGVpcUpSYWZJcyV6al2lg4uQIoV0tOEvRZJygMpZg2sDRgMk5CMQ0MnAyAQBr7hs3AA==) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/manrope-cyrillic-700-normal-Dw_fZAg2.woff2) format('woff2'), url(/assets/manrope-cyrillic-700-normal-7JNVKxyl.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/manrope-greek-700-normal-CHUG9PD8.woff2) format('woff2'), url(/assets/manrope-greek-700-normal-DyfsrCpP.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/manrope-vietnamese-700-normal-CUqMx5-1.woff2) format('woff2'), url(/assets/manrope-vietnamese-700-normal-pt65Fn2Z.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/manrope-latin-ext-700-normal-DYOwVNan.woff2) format('woff2'), url(/assets/manrope-latin-ext-700-normal-eVCcYqtJ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-700-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/manrope-latin-700-normal-BZp_XxE4.woff2) format('woff2'), url(/assets/manrope-latin-700-normal-DGRFkw-m.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* manrope-cyrillic-ext-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAY4AA8AAAAADAgAAAXbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG4F8HC4GYD9TVEFUKgCBChEIColAh0ILIAABNgIkAzwEIAWFDgeBDgwHG+AJUZRRTjjFj4Tq5gemzyGZTG6nVw6tYjI838fD/1/mfX/fTGqhUoGWQqHaNBZMPNyAow0ox7twBQnwzhJOTWc7hKOWXWKXr0DkpgQpUDLH6QCIQtseGBrgH7bw/7/frGjU9j8ZT4RKbQ9/j4slsyyW3BKNiYZGaHNN65yFqEm8baHMTLciniD21+aCycSwMhUB9AqGkau5xdUw8mwCNwAjL9r4IRiJAnwSJed6bgjEoKJRCGVEjGC8GHhyqyYG0DhA08q13HvbJ8lebH7HERcej2+zleYi6xT6wehFtXEWiNUvSCAJCImISSGIHKm5DqiAQoiCiIig3eo8ADUgAQHGoYHxBjSdwsAt6MGRua9FgwBU49Rx3A0mlxftMl8tLF3AK/Y82SwpgOugmDstrv53P6BrEjoa0D3ksmA75lDQ6fxg3Lv+FOKyu4dHABQIEF0kDbACtOQ2UndzyjAwSY0kpEDLsN0nIqhjeSm/nDt9ljqr5GhezC8Km6+73kAZzaiMv3qoplbpp6S21QABMSEJ0d2XNlEBdJkzxy+C2AOIDmqgXx8jkEidBQ30gaHWTIs4YaidEmffo5a4hu+kIoCiAmRoBDxnYriXbJJignyibHw9UsEkaUO/Dq6z0GZDsukvZIte0YjFIthDIZio6O1XjKcmUZmv7LIcqxUIOTnDVp9JutASWkvJJ/WTGqJn4Udv0Iy3H9N6H76G6Y4PWKvdjlwvxNosFphuterJiYqmFsV4YhLxaCpXzZYMPCKMQYGkAWmgc6HN1znqPK+FXRTq3HQ5HnTBhRrE6faqdetCVJb6osXnj8P0EwkXrLJF9qx1m8YoNltCLRbu3AzWo75k9wpCNm1DM44GH5ypMHD9Zif5LnuEfRFPxQtrsocl/XDgfQ5zWdOXl+PyLsUX4kKKy8W5NJ+JM73JOBkLMcbUMIMZmgvFoaJgHCzyxb5CGtPr8C7YBQJd52xfS3/eyWn2bzFOvr+pQv774z+Iuhv3cM+ch4n7LjutH3zXSbespmaZ7mXYd2G586UOIIjDbM01Od8UetxiU+PdG5Lav6VCcP50O9809mH04Gnr0qZ/9m4dWZwhmceYjLk9hvVFf7tPeKkFwXbwylNfV3+td+BL+ys++IBR3usAa9r/n4/OTKh/f+3a+rce8uqSNeBYd4/TbKz+/+uGqPvn7AHnT3Dz4gVuBfvvrHNdNl7IQsFIpXfniaoDmlw2uSKnzTf4Ey2GB6deVr889GLXryvmw74Di+DXZdt3/bZiAezbvxB+W77j31nTjy9aPvPQjLqxZXFLmlfMPAjT3PNX0oX6GMOdwbyo2b2aLu/q0sjJYYP+w5N+CAq8L4zPU7kl18bGTtyU7BTm030o2/CB4cjPL1tf5nzoi17QUx+5xsyMj21KjNhRqKA9YhbneAQkFMenndxF082h5m/SGx+1m1sOp5w7m7enKt5bTx6ZLik1UCAByP9quwDyqh71gzqlRZX8q5gUPQd8nd07G/DjWbGNznrB8a7LqBEAAT62tHocAMlKAerKoeq++wIWAjNxfgOi1Sks1nqT02jBq0FBfqY8lhP8knymAocQMISlIIFWMMLj+q3VglIC4CF0QIrgoKUEZWilpGJ3eymhVMDFYalQnGGpUoxMqZovD4mGltyDAMgGPois/7uWXq9uPXg5xuNx2mQyGNCpRJshHAMjPVrmKNaKevCIvIkimvVMOnB6GfFAFM5EBgbPY8DpFqFMruLZm8fDwvYUY+lx82YaDKHFBN5YzKAmUU9SJV+Jgm6sxaz0djPzwttw9zCMnguydOMTcNL1ojAiJaBVY6a+4RpQDph90KHzZzDfMxhOH6YF3rnNlOBu0su8Zu1BrIPB4FtAzxl08eRObSIMrveDQQgAzWZt9dSGgCUPEAHJQSIKCZAQiZAYyJAgKZIJM9o5/bBeUvOLzFZ8xwSReaiXicnMGKyWgyVmOzcTErwsJoMhsiqzjaKYzJjz6P+dWgIAAAA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAiIAA4AAAAAC0gAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABRAAAAJsAAAD8jkqUrUdTVUIAAAHgAAAALQAAAC4jdiSCT1MvMgAAAhAAAABNAAAAYHPJrjFTVEFUAAACYAAAACYAAAAqeZZrrWNtYXAAAAKIAAAAZAAAAIpNu/P9Z2FzcAAAAuwAAAAIAAAACAAAABBnbHlmAAAC9AAAA2AAAASSElra4mhlYWQAAAZUAAAANgAAADYglsUZaGhlYQAABowAAAAfAAAAJBD9BtZobXR4AAAGrAAAADcAAAA8RcwDXGxvY2EAAAbkAAAAIAAAACAI4wpobWF4cAAABwQAAAAcAAAAIAAmAL9uYW1lAAAHIAAAAQEAAAIUKwxPmHBvc3QAAAgkAAAAYwAAAI7B1Xo4eNpiYGRgYOBi0GKwYGB2cfMJATQ51gYIQ1EUPfEgZbZBVsEb3KVGh6BigtSpGYJtPvejee7vknR28yHJsLUck+ADGIMDOIPefEwM7wwfV5kjdZkqgxsHQuWWMA9p09pcfs9lVdmLSQE7l5qluVI3mSrvWesz8vTd10+pi0dASKSsiCMuq2IZ1cElxMchEjsfnJaxe8r9J7ePKfoAeNpjYGRgYOBi0AFCZhc3nxAGieTKohwGkZzEkjwGEQYQYAER//+DSACWTwc8AAAAeNpjYGG5x6zAwMrAwCrCsoGBgWEahGbaw2DE1MGAApjYQQSMF+zh68lwgIFXYQtHyN8VDAwcIUwRCgyM80FyLBasC4CUAgMLACrPDBIAAAB42mNgBEIOIGZgEAGTMgxM5ekZJSAmAxMDmGJkZ1ZgYAAAK20CKAAAeNpVyDUBQgEUBdCDu8tMlV+DDMzkoQDOgkMSRiwEru9dRxgRVEWEHh7VRl1RRFxOQ6BjGwpH+9F59NiYXC787b3oLHp47pfzZXNpXYJLCNg1hdR9LyuvCHJikuJSEtJXUj0X5gABAAH//wAPeNqUkwOwHEkYgP+/h/XW89a2dx/WV7HtPJ5tTMWFsxUnhbNt2zaLZ8bm9KYnRilt/fq6G0zwMYAAwt3AgQQGsEAruMAHIYhBCnLQBiWAUiXiSBxn/Ziv7zrOqqoLp0yZNW6cOmrUrGHDZg0YoNbrc9rb1XxezWbnxONqODzL6wUgkGY+F5nPErQw7zCCES7CIcel8WVcji/Tf0/Sfu8nuffeFu7eeSrm6fckS+ZqNwK3T1J6fa+k+QhZjLWWjpHHEZ8++OmRSngjXgcHNXUxTU7wHKYpmkxWSnZnZ5W1oth6lFN4Yc/Crm8H9w3+tmvhOYf8E91dC3sKgwcX2O5uZa+vCCzxq1mUMkDExtSzYsPV1I6DsM7yIGon47gu7XcS3P2o9iI0mwckiAg8GyLcwuZfMw1uNrFVa9VSp9PpsEVs5SKJRSVRYkO8s2P0WRc9/+PJdHVLx2XnXjKhI0jXCndrfwcV7+3ag/R0nDD0hlmjk26vdsPeVzKg+bvwtPAmGFjcYQA+TqxKPMwrVsJzTmajFnG6nE5MppLJuMhskCD96JFHsIFPY+ORR+hHP9/4YtFl2P27wV14kbgNruKLdO2LBbch+DpOw7dx2uuv0yfpEPrk6whkwaUnjBjeuHgBmaW3vD4FhDRdyY/h6zoXPMjlaToPrQgsW+k8uhLP5euanaze9TFdeYDECCbj3UtCB+EKkr0odEdj0f0sGjeNffhDvywhXc0ZlO6pI0+P0bV8nd4bCKxcmOkeZ6cb0WyfkR09MOGjfr7OeExp/s4v57vAwihHAYRoklTKim5BcdiJmOrcj0QnotthRNT7tt54y9a779t2083b7r16aNJCLdb0UJxvTQ27slf1GaTgYsSHHkFcuJg2H3qYNhfR3vLoceUufHBMuWvKaH8IyF67+j3EYIxuVQ+jUq7F2NeLMCMOu34LpU52Icy8yFZETEX0WeVgxGw1wnb30WAPwy6VHOSKMUsqZ18qT+NP1VKyYA1E4mP8A3ricguPbi7uG/mbNoOQbwkxCIrdMyrVmGg3Gjj6q1gIDf189ilPDBgwRj49GPFVPrwok/r2W1n2ZNINl9tarRr8puK5+Usv5dzfcpySM4XbHIFQPdwat+2ZfZlubLKdhfmyYFX1SwCpGzFLAAEAAAAEgQaDNptmXw889QADB9AAAAAA27amhAAAAADdH1Gf/uL9ignECZsAAAAGAAIAAAAAAAB42mNgZGDgCPm7goGBy+bfo3+POI8ARVABPwCm3QbmAHjaYz3BcII1jEEDhlneMDCAMGsMQw+bCIMNSwFQbApDD8szhgDGCQwMIMyyASjPwBAAAHPHC2cAAAAAWgB3AJwAzQDmAO4BGAFZAXMBoAHcAdwB3AHcAkl42mNgZGBg4GdIYeBliGRgA/MQgJmBEQAUnQDmeNqFkLVVRUEYBgd3zXBJcHdIcHdNee5+Lw4lUAPVUAG1EPOdw3NdnX/WF6jngwrKKuuAL37jXMYgP3Eup5nvOFewzGecK9PmVNGJEedq+cs4NzNP7z+XQSPtca4RwQ5PGESxsEkIP3bucODBhVteVTnMKlPKMWxE8Sg2xJPExH71IVkXU5yxyzEnWAgSlQ3jYCLPCbfyUbRacZB+5plkgWnm02iNK/Y54UBUesdLeRem2EI0a35/nvlbaIxnosmX9jPLNDOsiK5ltC5nn3PEeMU2tIINTPRHcnqN4uHkf8XiP+bCg2ZgYmUSGyEC6B9lLERVg9ixMCWbftLIH+hQUM8AAAB42mNgYgCD/3MYjBiwAX4gVmE4ycjEYMPIzMjCyMrIxsjOyMHAzMjJyMXIzeaYVJRalsoZWlxSlJhZklzJXpqXaWDi5AihXS04S9FknKAylmDawNGAyTkIxDQycDIBAGvuGzcA) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/manrope-cyrillic-800-normal-AvdZ5mAV.woff2) format('woff2'), url(/assets/manrope-cyrillic-800-normal-BuEMjQU-.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/manrope-greek-800-normal-CDvU698_.woff2) format('woff2'), url(/assets/manrope-greek-800-normal-Bw-67qu9.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/manrope-vietnamese-800-normal-ClPWri-A.woff2) format('woff2'), url(/assets/manrope-vietnamese-800-normal-bvg7iBCV.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/manrope-latin-ext-800-normal-DdFx7KEb.woff2) format('woff2'), url(/assets/manrope-latin-ext-800-normal-BQAQsuQc.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-800-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/manrope-latin-800-normal-BfWYOv1c.woff2) format('woff2'), url(/assets/manrope-latin-800-normal-uHUdIJgA.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* jetbrains-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(data:font/woff2;base64,d09GMgABAAAAAASIABAAAAAACQQAAAQuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoBmA/U1RBVF4AdBEICoRkhAALIAABNgIkAzoEIAWFAAeBFAwHG2oHKJ6DceNW4lJEFHn9tEOE37LNsvkjHr7f739rn3u+OSrSxLQytE91Dw2PYtNVq3Qaw/vJ7fUBMdOj/u2ImB98cT5WUx9F13ZKt06mU7tG1sAYcM26yCRX4f/0904bmwq8hwkUUMTRX61pa9C3xlpAGYw1vOu8C2SBZZFlld7DAW82RJWmwYMI1AJCKBNCIASqdZGFmtPSNQRhMpR0EKjWTwm6z6sJ+4jqhxjovTinVdRpZaQjaQzAYjI8NgAKDJCokgunCn9oUQE8VZd/F//+v6P4F1U9gLr58yNI/dJX9BAshEoJbTDogz7ocKoUsPvES8UK/aQIUQgpGgECBVLkOEV6iASTYgNAPKdNXayhDPL7IJuAZnEYSZ0eOLc9i5Rv5/+lEi3sW/kfnCf/+fTe0sxS7CKLx5erRJkKOixEqQaoqrvx5HN4iz4VhX0gS6DjFIWUzn/fIXJRVFY1NFRVNVeFt+SYmrK6vCU6eJsnKnJj5HTESMTQZOTI3Y/tzr3rUcOsiRy/ciP50s3Mycgxmhz9GMXhjzVH30ut796NHP0UUa31/Zoa6vCH6iPvdIM0IRANaT60FablmZlZd+UKNFy9NrvnFGxb5NC2CRxR0/rIyF/WNn+35sv9r+tHVhkseuWGKkCPPh96+GXt8Lc/Sh24ujfjf+tNw1lZWreiPuHb/PSpyjdv2rf/++ZE5TSKjFdZxYsBvr1sEHl5STuHZqYR7jGYGvGBBdjcaB5bODY1GAxMjsd0wDMIzXAXODRd74DxNMtO4YuYHclgLQRzp9KlUmxptCwv9bYgvWGD2xBW7r9413fdJu+mxzvzAUYeeONQvZP4kgfqZle4jhH/MWh+UbxgtJdrLdXLymNL53PRU0D3Q6FcXTfGqGcul6vrqhgLGAVSv+IVIfZOHpu+mlLqSlnj903j8mazXDsba/wbxhS/4Oubh1c5/uXDgt4j5KtnGEy5BIJHo0ur+jD+r2qCkuP1aRVM8EpUoRYSJyqNRA38uwDvHBNo0AejO2Z+ZYLLal1QiFyFh1EDQOgSCSCpjwwKU8yDbIjroEwne0G5Qca49cYp4AlqtQNZfWTQoFb1tRpFYAmRD+HXTkV4uQhG2bg4OKmyoypAsUGtWgQXyFxYrkpODeUxvGqIZA61erXo0sFG1UBGuPgpuon8RNUG2DhovAjZCBuZwtXrU3mQGki9+pm0eVZAXoWxLWTQoYHBPrJR4WunNxIFbCHfkTyPK+sqxjxDmGArZvf79JGJ3GwEqjwc7a7NIrl/7bJ7Nzu4+n1Ow6shEPnUrtVo7cnd5Wi5qCUbBIQbNKCP95FMCSZylEV5VCiiMqqiOmrKZ/I/C0gI1fyuulVcM2E1r4MhtcV/fbCD+HwEvVzH1dGNAzFE0FTbKzyQz3gootrNbN2a4PuG0j0JOgE=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAbUAA8AAAAACOgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABgAAAAcABQABEdQT1MAAAFwAAAAHgAAAB5EdEx1R1NVQgAAAZAAAAAnAAAAKLj8uOpPUy8yAAABuAAAAFEAAABgFwRca1NUQVQAAAIMAAAARgAAAF7mY9MfY21hcAAAAlQAAABRAAAAdAyHCodnYXNwAAACqAAAAAgAAAAIAAAAEGdseWYAAAKwAAAB6QAAAl7g5OpvaGVhZAAABJwAAAA2AAAANhSQ8UNoaGVhAAAE1AAAAB8AAAAkAcoBImhtdHgAAAT0AAAAHgAAADofBAM2bG9jYQAABRQAAAAgAAAAIATcBZ9tYXhwAAAFNAAAABwAAAAgAIcCb25hbWUAAAVQAAABEgAAAoA4pV3kcG9zdAAABmQAAABwAAAAlNdzMTB42mNgZGBg4GGAAEYgZAWTjCAeAAG0ABkAAQAAAAoAHAAcAAFERkxUAAgABAAAAAD//wAAAAAAAHjaY2BkYGDgYlADQiYXN58QBqGcxJI8Bj4GEGABEf//g0gAWkkFVQB42mNgYYpinMDAysDA1MUUwcDA4A2hGeMYjBgdgKIMDJwMUMDEzoAEvJyAxAEGXpaXzH/+XWFgYP7DqKPAwDj//nWgSjWmW0BZBQZWABNDDdYAAAB42kXIIQIBARQFwHl/QQIkWXInUAANXMOBJCcTd+KIGCjMNViq9/H0CM6P/S0j0bOwUqh08iEb8kPTXn3RiMoYhD90Nwc3AAB42lXIRwHCQBAF0JceehWAlTjhjikUgAVQA4mJLbdk5neUqHBVKWSv3XF2VCnt3AyevkVZv+sxBBbbq/6HfFP4hEcYQgEK82v1aHQ5RTs3FRQAAAAAAQAB//8AD3jabZA1tNRAFEDfTGDdfXHI2QQnZJJvK5ngDs13Welwt/78CtcS7xvcrcHKbXCtceh+wgtu437nXRCgC4BY9AGOXOAFYNHR0dzoKCGju8gJ6xiZaF3DWqcPBiSV5i2geaCgAlAJ77ghgjfiLC7KojvOZEmSXS63emXr5W7lsTLtXFMkRmks4ly+cYOEnvO2YLDNANv+9oJwhkpAAJAcHPG/1RC2BERc1ZGGMxYVWDyVSjc0NMaZELUf9e4JhCgNB3b2PiJRctuqZ0WPR8zilxutN/ji97vUBYMAnGjtzxjtK3wrDaMABo+R9KjWwNRUMppwuWS1QdfFZCIlMF2TxDGuJJlYW7OmVlvD+sx86b1hvC/l8yXf2hqZ66xbZ80yWzyD9/fzGaRzA58+nSOzYC+gw9AP+vyNqUAUhoD4lSnputbgUFPJ5O9Y+ReWlxkrc96naX08b3zk/KORb+E+VjYPmH1M6+UHeVlDtCzzGZ9FY8YMA8gPMsQA0jqaGkHT6cYSdVwl7Zs9Wzx+DyWUugPujd03T52ikrUvM26kF9PIcRmycuDBKcd3XRhPDgtnQACINzJ3fVl1tTB++3bc2S7kyD3cCQIQNMcSKaY2YOciE+d0zFbGjps6u0PILTFlRZHNJfAFnfeHtgAAAAABAAAAAjYEro52gl8PPPUAAwPoAAAAANvSppoAAAAA29rQ8vk5/tQEkgP8AAAABgACAAAAAAAAeNpjYGRgYP7z7woDA8uGn5Z/+1kmAUVQAR8Ar8AG6gB42mOKYIgCYiMkrAzCUHEbJJoBikHgCkMPAPDwCFUAAAAAABoAOwBGAFEAbwB3AKkAsQDmAQkBCQEJAQkBFgEveNpjYGRgYOBn3MGQx7CFgQ3MQwBmBiYALRoB+HjajJADbgVQEEXPZ20bQW3bthvXbr8Vp4to1KV0AV1Wb9JvZzJvzhvcB6CQL0wYzHnAj6E/yAYaDeVBNlJsMAfZxCy/QTbTy3eQLdTzGWQr3VwGuZhx2v/ZAIVUB9kc0TSUKJ8f5FIRHGPjnWs+2MKt+MYzt1xwr/jIk3JymR0X0wzIXKo7VbXjFvfLn3lTtCn7qPoB6+yyzb3qy8pdq/6hrj11fMj7OFbtEY+mrlU/516rVFCdVobplw/JEjVaCaqIYlUiUzOaW9aa/Q1idmlPXZHbCagW/B10XwaRi06VuVdMf+9DnIov6rlF8yzhUXxC/4c66Uz48UepqEN9N/Tzt2RwjOljsUUfj581AbaEXsIAAHjaY2BiAIP/qQxGQIqRAR3wA7EKw0lGJgYbRmZGFkZWRjZGdgZmRg5GTkYuRm42x6Si1LJU9tK8TAMTR1cI7WoB5btB+Zas6Ym5uYlgnoGjAZNzEF9icmlJanJ+bpJecmJxKg9IxtjADMwBAKDtHJg=) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-cyrillic-400-normal-BEIGL1Tu.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-400-normal-ugxPyKxw.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-greek-400-normal-C190GLew.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-400-normal-B9oWc5Lo.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(data:font/woff2;base64,d09GMgABAAAAAA9UABAAAAAALMAAAA7zAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGnAbhWocghYGYD9TVEFUXgCDBBEICrBAp3ILgjgAATYCJAOEKAQgBYUAB4xODAcbIiYzo8LGAQCKfn4o/usELQ4rdj22ABHwitFYjZPqB3XSqAbV3C5dFkHYtTehxpeGbU+3+QexdERCkxARw9oNxAyetvXzdhdjl/7aiBiHgcqBjZywaGPSh4mNFccpF3DHlfyO8Jc/OiSe/kb7/iQYRAE23iScpHngiRRBFETNiZzQwc2HOllJ0fqXIjTY8RTYbDsklKc81hGPQcOJojhD/w80ll1aG/qiQErbzqOXjmvOVKd14tuv+Hxrlbarq/5xH7CiMPjaZXlrfNSp7uqaroZXvYAzc8A0kH2zs3MvHQBUORcJ2GG2cdFRgArh+Sgb7yOsjImpmgM0kq1FwhQCQzQ1Mt+j7at5GSAAIQAAKFLk6uMul4pIl4HIpEEUK0dUMiCMmhFWNoSDC+Exghgzi5i3hNhtN9qaINo+EbQj1tEIgJVLj5oebQ6I1/fyLMQYALYgALKS0yEOQCJG89uIiEPKyeRDVCmC0HgZ203jIg7kk6cHxfEKeBSDXtxd6n5yJzqpfSgXs9xMri1fPezlKMAVcCGEIhmwHiDRtJOyKfXkGsAVqI7ohIZs0rsDM/IU4fuQgkppCk2n+VRHy6mFttJ26t16mBjQPyIeYhvZnyXaiDSeaAYYXLiKPIm4uKh1zIq6gSRVU7WNPIV5v1PwBOy07RrrT6skwoEAtYyZeYgpBUABaDEmtPWRGP/UGABFgUUjchFXAghAgAYQpyPkCIBBoRwQgU/g3kQcyqTY9KSDItmjjmmkP+qJHG3C66hjXhtlhzwglI+1+4Be+T77hYQxxeNkCIDaKU+ANXhkMqePOVAQr7uwCjoBlCdtHQE8TNRd17//A/evkhSpkOMDA9VTmwAVAbLNlwMkoAG5qG2bWCYA/h3uEYgEhFqSmJJPpCIFbJHg1Aw5GaAujjqMzIHc8NrIHBEJJjGZP3cuFQZD9PvzLvZIaCIjBcTvEnIzTWiGjqdzlD+VAO2TUERK8smEi8lNNOguiAM9P6Gfo6bX8bD0v7V/cPwA/fDBi0BaGgUllWy5AATy6X9gAZqRVIsMLuVmqQ3QmrBbiFgTiWbxLDj1hBqINGLVYewQwySWWRyeQK1kXVJ0S2UjZ5WgXaIOSTodp42CUzqHXH226ZfJI4tXth45eqnslGdQgSGFhmmMyOdTbEyJcdv56U0pNa3MDJ1JVRZUmldtkcESglQkAOA8AMgAoBeYLQi+wDxAtwAAGlXJUdVLPLmo/TLRystE3SsqO29LUY0hsrtvBoXUw1Fy+XjIhqbj4rEZISsUysW1L68PlGRwyWImjWXjS9LFyUzjC7v7Z5hYsYKRhIH49EyxTJxutwOy2PRxp1R63SVViB+eNFYRywlEzJBIMDIl5Aa4PtbFOno416WTTkfVQwSPgIve66BCbLAuLmpCh59ln5uFECODSuUIJ2CJCCzDwbf+DV2/3yTtan5J1gEVuilcVASHULO9Bt+nWkIEHMMit5gOxaO4JpWjvdzOcySeFek9q4dy3jxi2BxHwsuuo2CzbQ+KJWxyqPUJljVCU3WT8JwlhZyLkKODRhZkQByHu8ERJIcGBexSmdwGPfMPbjnC0SwRUTyCAIwY4Mdr9zxJTKE5yp0mcEe9s3Umm/TZp2s4X/27cQUmhrd4Ow4ibPOTOxxT6w+S8ENc9AGE7meFOlNbuzjngJtzjFKcrMsxtf4G4UIPcNGXbvwNaeDea6+1L7kaYG+M13a455pruOh5Ww0HlhllPy/PsqS9Zr7ZV9cSLODAoItzBt2cI5i1brCxQRIcH6yr9wV5+XjhtlxuziH7LiqGTXVnkfCZntd1doJ5liyIno6X3GqH56fcnGNwE2IXvYhw5a/MJGsMns/TOawd+2HX5kOXxQZFsYkwmMetzGtqKDKSe+h9h7jX77z2Snb98vyL7rjmil1N3B/cCBfsC5rymA/ExpPlni/DL9i7eflmn66oxrSlMRRB/8Dbq/e/3aN95L3BG+dFd1d+uCVzKhQy5/+I77CmWJ/o2Hygaay8yleXU1c1NH2IpqHOYUtriyWHf3iZwxjZvNxm/Ti/O5+22uC3nVFxhu1wvQc08ZZ+nb5/9oBF38ehJXaKPt7K6/v34Ltqai21rbXDXI3BRDa+9XDSGp8gzZZarV2ag9v3RBzSNfFjU/M+uVduNDTsMNY0GCOHDU3O4dazeb3zFXjg0rlPuiV75+m+kzV3v5qc/PHdJ2j6pI+wDP+U7mFPW/uw23ltZemTVTo+3+KNa1yyuwdmfI41j1/yvbG3oaLR3G3Sd1xdrNOUfAou3jYw0z860D9jr+9sqU1IIHve9W56/fIEU2fztvaqHQ213trhKauqjXVmr/kFxP1m7bdCE88Plpb1m840l/VNQz72QvvMPlc5z9fvKPt1xBtXv9yVZ9nGmxscXiDfwGcI4LQ9duBaG7Nxjw2aWMuArp7In2qxObTwKfr40/iy/j34zhqeN59qHuZqDBaysQWiL/PZsk4cyV13mvbwWw7phfEDC/O+fm9/ram+sspcXxs5hm9pHjufSujGRbKXaTPmBAPPfMm45bau15+jR/bbBx80mR7sCth94rfB6Q6sngJcuO1v4a7Lu157ad9GKIlypuEea9GDnXs0IytDmZ2Rka2cVv4jrIHmaFZ3O9OWlWX7gLuRH1mMjsxE8VrEH/XNRrErsh61R6PD3e2d7dDsb3Z38k15W/kFkrwmHk+PhWNKx3nLMhHkSl5ZLMvHWPGPfwRB9AKr2QoSUb4qSlB18X715zkqwRI0G3lvUOptugtcID+tsKQForrC+pqxS4X1dcof21bf4OQcbZ2Le6y53kKao3rxNWE9f1a+S3t2tiIu5yej2d/W12RozBwrLh7LbDT0NkUDi+HBQPj0xIlAoKHFFxAMPB8Vce+KKo28Rq0SHV3LUk6MNLv35DMrCzVNmbxBeCGCKzMtu20y8f+SVD4h31Sosky03Upl9YJxzh+L0ZFANLR4LOpYj452tne145E/wok2e6JX/xBX/vH8WaFQojdWlrhzuOXjs1Zn3cCkT4qWSmZeqX/B4tciE4HBmUBZwGxtMDaqnCpdllPVaIzdNw9ZqfDU30ppYDgw2B+A5JP5L8bj4tgWoy/t6WRRcO2P8uFDakiP2fMWaviyaOYFr94gE0nEsXysWligOuHRC2TiH0XSJ/4WqQcjE4GxmUAocKlG+jECgZHFwGX8vabVzf8f4KQSi8Gp6laIdgV0q8OzbmjyaWdnW1MQXZoJDb7ZaEdzVzMoNQiAGESUwszDAIzTDIqSxGFoxoRZ/vTKM8CfyZ9V/ZAPfzZ/Ds4tMHm0dSxCkOPaNpKlK8/KwGQVCdzqbPDn1HKuiT8WHUnStEQYZB2TC6WJ6spymNIjBV7JK5lSs1C5qDoRSYBUSlgH31LlM7X5O4o8eBxrX3MDwtOG1iZdZ/NjXsu0gBJohRVmlQNfwVfQmsReAdZEAahljqkMaxLHg/gT+BONkwxcgT0CH/5k/pQrcCpMUYiGtPqbDGvVgALfitYyTHyI7iP25WqsSqAlstCbcmZ3k0PcRZlgbs0KCrwb7lImBTqQCCawVEpMWHur0DRm3+9sVAOK6UQiqESr8NaEtY8Vu86AIjK3KRZhXNwqD34Oc38umLZM7/33+38/uOj7///Z9yMAAHqAUtN3Bsa/l9rSiKVxlONqqbKozYWfYMRMRkicEE2FhIs4TuWQJL0RDNwCPy0hP1CbGAVY9Mb6W+DZ2p14CIQoIBjqGKpe6lOONhDJTUFBXMgZYOPct8C7Ffmf2jR2ksQ72U7f6SBu5gywoW8x2Qhy1APl1CZGAQ4ksGGD8loGsjY0UQKXmhdvpBboCNglmiU2XUCieL2dF1bDaTacoykaTjgFAhquyoFkiSk0LZyooeM7gQDVIlmNOwCPlICNKQpatkhBhUQJpdLCVwFqWj3FQ8sWeajTWbJiLeRJQlRmsyh1YLRZtAzVNr0dAoCqYN6wXLhzQGL8LY6mvwSAd1698ly88s2Xfwa7FbVA/wsgBhQAgABfG3dQHs2o/066DhB0wWo68NIlpR8Rtqkj9flbwtMc3oZyWoIn3n+L86o5vA1V8ng6L4C9+Ax3YgMBHN8Er4rV97ZRXgdo2vF244hH35wAzlOM0Y1BABGNnNCZ4UFNPID7U9KeSCgiP5EiDnMizejpExlFzj9RIM2BE2MU8pwgViH7TAQQSqpgnDuJJAk2kHIaYDNnhs+sFsvBuaf5DXMbXT9uwvLIbk49b4mBNm3JsEV+85YtKUHWb5rT5ywap9WpUZtWo6q5Fot8W89a0m4OaXOK2Ywat2KaD3NdRi1S/+eloldCT0fn1K5q61Mpa6eaNrKMB6WMQqn83IfXmTNv1eIRiaKj7aOsikMmoxej+EfqsmjOpFHDLnneylGLQxT66vnHnh/n12VXDN1Hw6/bcNpctWo3vrwApZvfrdEDiP8IzgPkeiYUoQlzDvYWB0cnZ6uLq5t7+aRk5I6TIFGS5IqkSJWWXjqFDEqZVLJky5FrG7W8quQrUEijSLESWtsz0tErVVa9chUqValmUMNoh1omZjxSM4s69Ro0atKspTe1smrLpl2HTl262dg5OLm4eezMw6tHrz79BgzyGarXsBGjxqJtJvhNmjJtxqw58xYsWrJsxS4Bu61aE7THXvvsFxJ2wEERhxx2xFHHrIs6fuE/r+1vm6/8jhhtDCwnASDGR1h4SGhYwEGU1Y/Xffk5G4u9XgIAYtxyGpZ5y9sDdNbyP142W5DgAhoE7i3q0c5x2vm9v24aZuNohdcxqSEAz8up00My03HSwmqPa8bMecG3Tjzb+f9EelEtg2vpzPeiIEEBwSA8IEDBwAE9F5Z6vQIQjAnLGTgWLO+uZTL/qwGEAYOAQpg3TefgwBCQgBDzqukKDBAOoU3KVtqIbBXK9XpEAAujuudkZN724kIGmrtVaS38ZZLrS9/4fsKMQhN3yXK5gvSBvJ2Y9/Nydbcvb0bm58+e3FhmGfGLJ9u7axl1F1LQTbaCeyrbu7wFCsorFgV4qnh+GUrWtaczqkSBB96AEeKRB94k2SyLuyw3qwrxeg3P5FNR1Av1Gsq2/ds6dPPkBAAA) format('woff2'), url(/assets/jetbrains-mono-vietnamese-400-normal-CqNFfHCs.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-latin-ext-400-normal-Bc8Ftmh3.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-400-normal-fXTG6kC5.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-400-normal-6-qcROiO.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* jetbrains-mono-cyrillic-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(data:font/woff2;base64,d09GMgABAAAAAASUABAAAAAACRAAAAQ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoBmA/U1RBVEwAdBEICoRkg3oLIAABNgIkAzoEIAWFHgeBFAwHG3AHKB4HzukrRjyF5Gb4kQ/B873d17mv8TWkoqUUGaHodJCtoqntw7m8tiPWyGkfWDU/IMpzVk4zAs9Czv3c7Os5NvKFG1Ht9vBVXySRZpJc4tTrbM3sTRFcLa3zVboKWRIoAksKSKgqUQWEwlSoqjp44V5J9/kjd0+Fi5xaFjwJArgBAIJgIAgCCAI4CdNMqGuYXYUKdADLAkAAJwl6iX0+bZqEm1AH0Hu9rvrJHwxQG1Q/gFYwWYbgTRWgwEESVzbmtjQAt3DXO7Tu/+9Q/KNKWhTCgZ8fQSWoL0CUUgTBjgL8iEAcce7YHBeA8ZvogieCnxI0BCVeACCAAhBD/oDcAdUPABSgAX4kBPBTwjCAjwYSCneiqF65LUo/qXdYFrRwTujtMrKm07plTbSqLQFAiHBN7E4DG5wkiGXhCYBNETh3K/AciHN69iFfQjFOr9EXQQAAQXRNszs8PR0OH4fDV/dwGe76CHdj1MQa11DXYGcfZ6+B1X0OfwjY+i7KpQ1w9d+1z3/HydCB1f3U8A0fRFv+0bXxPWrZu3d9Nn4UcbLs/QCXLH/j3PCKblKOiZxLOR78W9brPo7eGTLz/F27ZPmePQdCB1YP4nJU91o4gU9cy64L3c3SPu8GfDn6ZXD2cGmllVqSxtD5vCXHm5xaeHlnpffx7DcPvXog5NnjA//cPz2btsz3yf+0MI8ri33tuv7upNbYmW5STbosW8bYItV/SPzxvXC0KnpWnFdC91oojit5Lyo6WcJQ1YzwBYbi52ohJVpcxfcHBqsv0nFz8U74rzS6M7r0RVlXZ3jJC4G92O//7Lm78VOtnUx+aQxAzsqPnrRr1t9zDrezKePvZ027x+fGte4s4NXu7/jEp3G9cM1bICYgACbuETUUD5wmenGXA/IBpAKVrl0AEJ5cqr6Q89tGq+SpqkDfX2DtG+pZ9teuae0AX98c301CX179InyErnSG8WCiABB4HFbVrw/lpTdBIOk82nXbpHKoQGyBpUovAAD4XQA8ZTUCeBJHIpI0v0FRrgcnckV3ANckrwYJKXEihQfdSKPER6XeExmEeEMmSe6QBwWmkZdmSOSthhibgIkBlUYreBKd/0NeVAE9WAyEaQpH6KikDWlUVg43Jy2FOmaYlsZhDEGZXO3mWEyWHI6zuaJkMlcSQ9k4F+KidIiFyZItGDc7r1pUj6wP6zrWB0/fbeeFeHl4YOvETMNiM8Ny+7OO6Qh2wur20YVxFts5dlORdl5Kwd5utR7SRcxqX8RA5Ehacha76hg7c6yzNm/Xf6vOLNrv544lIEkWg7xWo/ItBAeIJEmt0XgBwgM8gTifoiiLJroYYooNTeziEKe4zOoR/wvIKp89hSr+6jFAqw/LaonjmZHSscMNg4iPlWpFrO1RN3zkMU+/xUP+JQ99TbvTl1Vg0gtirT6lbwYAAAA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAbQAA8AAAAACMAAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABgAAAAcABQABEdQT1MAAAFwAAAAHgAAAB5EdEx1R1NVQgAAAZAAAAAnAAAAKLj8uOpPUy8yAAABuAAAAFEAAABgF2hca1NUQVQAAAIMAAAAPQAAAEzpM8woY21hcAAAAkwAAABRAAAAdAyHCodnYXNwAAACoAAAAAgAAAAIAAAAEGdseWYAAAKoAAAB8AAAAl604cJFaGVhZAAABJgAAAA2AAAANhSS8UNoaGVhAAAE0AAAAB8AAAAkAcwBEGhtdHgAAATwAAAAHwAAADoe/QLmbG9jYQAABRAAAAAgAAAAIATcBZ9tYXhwAAAFMAAAABwAAAAgAIcCb25hbWUAAAVMAAABEwAAAmo0OV08cG9zdAAABmAAAABwAAAAlNdzMTB42mNgZGBg4GGAAEYgZAWTjCAeAAG0ABkAAQAAAAoAHAAcAAFERkxUAAgABAAAAAD//wAAAAAAAHjaY2BkYGDgYlADQiYXN58QBqGcxJI8Bj4GEGABEf//g0gAWkkFVQB42mNgYYpi/MLAysDA1MUUwcDA4A2hGeMYjBgdgKIMDJwMUMDEzoAEvJyAxAEGXpaXzH/+XWFgYP7DqKPAwDj//nWgSjWmW0BZBQZWADbPDjoAAAB42gXBsQ1AABQFwHsfiY5CYQBDaVVIlBL7mckA7kT0CpPCop79uIPz3q4MojUrSJePvNSKRlRGEH74hwYNAAAAeNpVyEcBwkAQBdCXHnoVgJU44Y4pFIAFUAOJiS23ZOZ3lKhwVSlkr91xdlQp7dwMnr5FWb/rMQQW26v+h3xT+IRHGEIBCvNr9Wh0OUU7NxUUAAAAAAEAAf//AA942mzQNZTUQAAG4H9mIDlbySoOt5I9HHZiL+vS4VDh7u40OFRo3+FQ464V7tbiUmHdJczicsm4fe/9YBgDEIc+BYOEeoArzUqyWSGkeQzZ6+wmfZwLot6nT1vVNM04oBlQ9AZoX3FHhh/gQR6Mp+JykKdUNSVJcu9T20/N73OrT3F/2qMw5vfWLp88SQL3rFE+3ygTrvv9BXaMqiCAkD3d2lr1ipagK4QqNDHjCuPBSCRqGGaQM+XLk0XrPX5GlaY1i54QD7nhvO/c3+Pp35mEHO58dN2fd6mEdgAYRrhfqEyfi7ei6AG0j6m6ohk8HQkrIUlKpQ1dj4dDEcZ1TY3HpDDpM3PZspkzl+lTqlbmZUYUy8o0LJtKSlOXLp3qnC9N1ieU7FWr7BIZPssuFm1hpt3BVBW/yPMPcwAUdEL8m6nqumbU1Eg4/Ceb+s2WpxrG1HKtnVKxcm9zolhWrkGbVN5RmqQJdGdpkj6ukGluzhTed7ULBRvkp4wAENVFUt1oNGrmaS2r8JcrCxfJjXWUUCo3yvMXXDlyhKrO3mhLj/qGhvoeLREyvvXpEYDgGutFDrFjYEDQ5PK1OcsWs15bt4JgM0uQe2LHAxCRHA9FeNoQnUS+Tsc7JkRXVV03JIZZJcBJRUdHxSmAAQCFZYU3AAEAAAACNgQJCtdkXw889QADA+gAAAAA29KmmgAAAADb2tDy+Tv+1ASSA/wAAAAGAAIAAAAAAAB42mNgZGBg/vPvCgMDy4af1n9rWSYBRVABHwCudAbaAHjaY4pgiAJibSQsC8WBQGyERDNAMQicZmgFAOeFB/4AAAAAGgA7AEYAUQBvAHcAqQCxAOYBCQEJAQkBCQEWAS942mNgZGBg4GfcwZDHsIWBDcxDAGYGJgAtGgH4eNqM0IFGQ2EUB/DfqqJMBZLAFUh0V0MoUBGllKQArHVtN9vu3HuH3iEAPUJP0cP0BD1D3D6zKQqHH9/5n885qHs1qza3iPfaenDNts/gGcs+gmcdeAuem+iZt+EleMGWx+Bl++Jv16jbDJ5Xtxa8om4peNUSbmT6WgbOlFp6Um2XEo9SI333EqmOrrKq0lDhQENDoS2XGioVYoVUTyyT62i4curCuUTpWK4lNVC4lBnI7Ez9dCeRK6TVa6Qp1rRnb0KHzh07/PfMG4mOkZ6W/JdUNM5FU7kTmaFn+Xj3SNNuVZFbXYnoj3nXcpkniXaVPzKqbpjJq86tH/fsSKuOkQextkzf1/Sx2KKPx/+aADN1XKsAeNpjYGIAg/+pDEZAipEBHfADsQrDSUYmBhtGZkYWRlZGNkZ2BmZGDkZORi5GbjbHpKLUslT20rxMAxNHVwjtagHlu0H5lqzpibm5iWCegaMBk3MQX2JyaUlqcn5ukl5yYnEqD0jG2MAMzAEAoO0cmA==) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/jetbrains-mono-cyrillic-500-normal-DmUKJPL_.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-500-normal-DJqRU3vO.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/jetbrains-mono-greek-500-normal-JpySY46c.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-500-normal-D7SFKleX.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(data:font/woff2;base64,d09GMgABAAAAAA/IABAAAAAALMwAAA9mAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGnAbhXAcghYGYD9TVEFUTACDBBEICrA8p1ILgjgAATYCJAOEKAQgBYUeB4xODAcbFCYzA/aDkxp0RMXmTMH/IcEUkaXZhe7qAVQoRhtRmOhkzaUYXs3lyzTUlwptwwNGy28PLP/oZewn39g4Jjp8YusISWZ9eNpW788MNQMI7jZprgsqRiJ7imCBYlEWIBhgoWjj7uJGcddednnRIQ/fX77n7i8NtLf08UwEQl3jq59XJCShypU4lMyz3Hb3X0omkAkZCYVNhfN/c3Pmf1nJcDqnj2VE35fYAx+8WYIJhZj4znn1Qbjp9+f4Pab0wOi7JSECzG0o6DRWu/MBgfu/NdPu5O8cUssKSJ1wUyTjq6oWZic7nUsKuIEySsIkzXvdKzArVNkCwvP1lQCgK4yu0BVWFp6vrWVm/6Nt7H82JGhxDyAteCbHZLRdzTsxJqNEUxb+txHysoxjwQzz2p8tU5uFtC4RmcGouCRX3v1195cCAYgBAECRIWSIVNsQCiqEhh6RpxRRzogwaUTYdSCc3AivAcSQCcSkacSCBbQlcbQ9DqAddgyNAFiZilAX9c1OSB/6ZyYgxQCwDgGQoVQGIYAIRvVlRAiR7Ax+jsqKIDacjVExNGWA/MQLk8VzJshTmOztrVbySNyHVnaAiUVpcgdvmnh9FNeAYYXkMl4AqisEoDtIZK0zs6lsSM8yAboEhZ5CFVqD23kNfor49QgAGWwFBeRAIZRCLdigBbqPFSIF+ABeQAfotUU0g+rL1gCMOnSNn4S0PWEL5Nw2QBqyIVvBT2Fe9wCSYDa3QH3Vt4cSaWSAug+NT0JKDgAKQOMLa96EFIKf/gOUWDQiE3EFgAB4aACxikhFAAwKZZ8DgHeiRQixRghm5n4HrCOOSrQAtqJU3LzpFAr/6TAHnDo8QQgszNHZ77FXwgom85JfwQOqMC8Ae/gYkSsURQ1AgQgAQAutAAoAALCdA3gIkv619L//vwb0H8nVgjz+bwLUlFoDaPGQkfqBjQcpc4R8ODxDAPwurhVJMbRRa7ksFTJAUJERK+RXgDxDi8az0D39NBJmMjGZP5MWgyH5+mYXeZg0kZOdJEIu5k1OaIYW0Rnqv/S2DtQxKCIjOSRMLuKNDjpwIXDRE0Y407zODF3/W/ovnvbiAz6YIOC0nZKaVrpMADK9/g8sQDORaaLiVmpCNj+DsAUJUg1SNBKpxbESqyNRj2XB2IWvmkANITOe42zRZqt223RIZbdRi00cNmu1QTMlFwWnTH2y+Gh4pemWrkeGXlpddgjYKUgnRG9Ajn55huQbViCiyKhiY0qMKzSiwpRykyrFGE0jSCIFAJwLADkD0AtMDvBegHkHug0AoFGJVK2qhCXG61AIrWWr8aYYT2zhWkVVD6EX62dQyHJqVGLicdAyTQtFjJgVi1Olw0wdI6eouC1SZjvL3umikG5h3BSHrTOMQKpkUgQu/aGoVC5VKLOjXKBIrWSy2FqmlB+dTKAUcDwJE5TwBkbFnJ/rY92ss4dzXxKbV1/T9hAJvBUu+bwOaq/XWDeXTEKvBMv+HYDYtSMXHI8lErBlDv1FvCF2yDfJcie3f1oWe+wCtb9HCZdshHBIfLC9FrNf60J4HGMKYkfC5TJ+lSNHd3NdZ5dNZ96o6OG8lOvpt5IcR3r2z61suaFBNQmrT0wrCXkvwKkNWenURddyk4+u1FuSiQRtRvQxxhEfxFo411PBvfbTQ1aCPSbA0yIczRIJRXEEQyYS4ocX/of1WiiyaY7SI3Z54u6pUe8m+30ZXB4f13V23XbupYoeLhwa5QqcRIKRdhwtDjdHX7sj8SSWqhgd2s25/B7OuTu4WLdz9FgQLtG55HhMlbFN/J5rrmGPXQWwZOVVLnn31VevgnPrfKt+IsHWeS5ZYVnCJZ9HIqem3z+aeAsjx92cK+7hnPGyVcarN47i9QctdADS864Xl+f2cM6E6W7jwyDLmWTlDNfAWRtN3eLupy1VuUoXA0Y9nDMwDm0aWWy8vkY6yniPTKmax1mFMSPTY+OyNo5gvPrMaWh+d6Yocqzobrh2BM+xO665gj12WQPSixm3X325OHNpey4+FiI+ViG4n+0mtkeDT6J77bK1vsLcqur1aMyF/u63T4xFx/V3vXhzq+VXFL7ypKwjPz+l4w2I7O1b21+wrz3XGCkzhqwKi3EwUtbo7w+YrLVVCuM8U1MAvrXrA5YXtX7tt5YAgoHTtp8WWF0eGHqRNVhUEjBba0v8h+bWaAV+c525JPC7Y/GXH19hrUyWl51baa04D0cn7Sp5qsze1VrwV7OyZHfSiyJTsZB0TFoerSjfW97MUD0Yt59oL3Kd4SNndY35u+St5yYTG575P1cpvWf3hskypgS/yB30tjjC3t6zi/Om4l/vjtYRYdOcpyc4FXQtRAZTN5h66vUdRpsxv/FMnSRHdzIYUWcg6vcHAtFOq8NmDm+l9r49tjYS2RI2O2zqvuITK5wVJxaXLhudxmXyUWt/K/Qiy0BJqb/mZHOpb6DEYg2VlPrMQWf+rheNhpOjo1zdfIfKkm6qMhsrTeZd234B2oMPB68Kyh+7OQi90BoqLvWbT6wt9YWKrdEKfLUnmkv9J2fxld9XeaLx3vKyZ40nVj6HfU/YdfKw79i9rQU1lSWHXuzBSScKzcZC3WPdlRcUl9xQeTh2aC6G9md6xnorxgsKd1f0dvkr/e7KQtNT/YHYFK691fHqc7z5WGnoTXPhm6HR0mnubTCFnYEJf7bfP+G0Ouw1k4QvuOw/rPsO97uflSxXKCuWS0rjlcrKePHlrYZWnH9AY9VoL03tATMa+kB/IGO1LLqakbF6sqvQHJhOLowm8cyBSHJmMonogaPJATpOOOweE/o99p7WWmfms1k7ns101lZHxtRBTefZMzIJkSsaNIZ6PReT/ohVl1uGg2e7ml3474DkI8kGTVtDZOe2TO2ONujXMk7TagqPrtGehm2f5GksNUqWOMsAC1JpXVMB8a265dwCWrecb+qjmcuF3pKhX/qEodrl80v5RPPuq9xGdUu9x3B2pnqrdvnB6Pe2BBpN7ap0nS5d1W7yN56QiB0YXTzQIWMqsVit2E1IJJ65TsI+KzVZbHmN6dJzkiro99t7Gqscyl/8nbTSUVWdjOByTedCSCZdr0kNW3MHcrWWxWmp1cp+yE6c98d0jC0lz4gdGXjRaLO92ffUHysp8pF3giv+eOcGjvsbGa11hkiW+PB5hmPdht38S67pmA9my+IbNmXULvS3VG07Lq136q4xnKz01oPhuZGJueMWrK31JofKklae1qlqKba7vg5yWnz3hzAuBOeGe+aQ8ur03gWhSNxQ3a/htqUcWzqxZsgptuwTcY3NaGzZLlTUKP8UW4zHk6oxHFFf9+F9MrFUwq/n52j06vNeGlmS9eyJU7A8ejA8F5uYO2Oh2i5K+uDcaxPRubvf6vbTxu85m5WnWqo9WbdqJUcOf3tSoNvCbrn09HJ9io6MjZ4Xny5qb2puApUNggl8KLVU1ACQTpMomG2HoEriLLkaejrIM8gzIx90Is8iz8bnjGNjNLQADHJcM4VcEXqXkOUhG7nIA5BvNJ+N9MKmYbuN05Tq5ZrWhcjqhmQ1IzdINamW1V4WrBhk29RG6FoDqfIt9wjkbNfvcq4XYOw1PHUJmquCZ03r3q6PSYNswHBLUJbKWbcHWUaWQZUN89AnAsi+EPxQrrIlEJnJIlUJM7HMcyIb2WdiwCYYhdkKuBjZ5gUYSBu2TYSNZEBQZ/dsLMogZAlqcMnlTpcszNOWC7LHy0oMpAd7JmhjAL8NbmRdayAVvDU+WxL5XR70AowhbINbkc7/KgLwLmPqTfwNBEUHCMBxmUhdQj6WUlkZlKnxu6pO1d9/v//3Q7rw+///2fMjAAB6oDb0HaH0b6GUJU8Y0eR64ojqUqm14Od8duRDHPKhFfZpiGupUNnzetjxdgRbK/5+l4IJ5JeSir8t3R+1IaFaa9AZitANXTvqUxavQ2TYeNmrYwP4det2tGuWgFpDejL9euYAfQfK28gGGIvbgQRcpXesotZIABUK/LoCMgX5tBzoUFiWbADfCNfMu98PsCghbdyeq6jgel07qoCDJjjsyIFY7MAODSYL1alQ9phCIRt3Ri4tbQVgE5dpkfhjGAkZMAWRYzPLNioh68Amvwwd4zGzodCRGaTlUjZqVdaBTSBDfJ6vWzoqG6lZhQKbFK6EAKgz5unB00f9KabfIE1/CcA764pzcPbvSz+DTdl+/xcAHwUACHwM3JK6lBL+d88HxAVfFHh3m1b6a8TWqK9qwVrRVjPaq6WqFSbUXqOOqrXXCkfN6KhWPgnndsCsD3CdZzHpoEPOX6wjz67FHso9aAqWW+ynpyeAc+VhtGMQgKDhk7pBGKUsAnBflEhlCV2wnFLxv2VpRo+QTFme7a4qy5cjUVaqjK2sjFJ+GTmx9FYE4M2hvDRKwSyXLSegQ9S4fhOazOT8YyJCPAaHHhY2o8XyD4iYNc7mNKNWTL+ICdO0Go+aiFqsGZM3ZyMDg2khMRGTZqrMfNN8LD/nqJhhBq3qNXN2r8LzGkBuHpMgYmkV2dpFChUKu08Vm1pVR9TBh+FjevSxMYZr7aNbRE1aFJsrvS1RcG1pOS9ocBJ8rTYx4yMuQj6W2WwW4VnSDJFz5tU/LKK0ZgWXCD2/qRmKRWuYh+47US6adX1FAOIfwbmATE+T2t4wLVab3eF0uT1eXz6MQKLQGCyuGE8gVpLIFCqNzmCy2Bwur54vEIrEEqlM3qxQqtTdSrU6vcFoMlusNjsz0q+WhVWdeg0aNfUmG7vmOrRwaNWmXYdOTi5uHl5deXXr0auPj19Av2C9QgYMGor2C4sYMWrMuAlRk6bETJsxa868BYuWxC3bbY+9EjhBUjTDcrwgSih88/y+eq/C13kHnXKhbTUDgISUCgNDoABXKLCL+2X27E/c2jAAQEKsFigx1qgLEbSeu+NyhcJGIECQNm9L567c3l7uZ5Wo3pkx4tYOhJANKw9dEonovRqVDb5dMKz515Ng+hci23hm4UQEs8eChwPB0BZYOBINbH3Erw0HECzUaokWa42eyGD3PIBIMBSOrfryBQ3G4oHQKi+/kEA0tuaDV40GP3h0+wuAAgXTKy0v5428xUDwksfm538juY9ni9fz2Ggy4iWLMz4qLklle7kcZvOLwy5bXp7fdYrRJlP4l5NDdZPiKVeLnJV7Ohg2VAs/aQwZNVtodX2jki6RU1e/j6GkgZbgAmmogZafuF4mZlb1t+COUyrcnF/CCZzS4MO/dX1T6QQAAAA=) format('woff2'), url(/assets/jetbrains-mono-vietnamese-500-normal-DNRqzVM1.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/jetbrains-mono-latin-ext-500-normal-Cut-4mMH.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-500-normal-ckzbgY84.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-500-normal-CJOVTJB7.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ═════════════════════════════════════════════════════════════════════════════
   SaaS Design Token System — v2
   三层架构：Primitive → Semantic → Component Alias
   用户自定义：只需覆盖 Semantic 层变量即可换主题，无需改动组件

   层级说明：
   ├── Primitive      原始色值/数值（--raw-* 与 --p-* 兼容别名）
   ├── Semantic        语义化 token（主题层，用户覆盖这里）
   └── Component      组件专用别名（映射到 Semantic，保持向后兼容）
   ═════════════════════════════════════════════════════════════════════════════ */

/* Ownership:
   - globals.css owns primitives, semantic defaults, compatibility aliases, and shared SaaS primitives.
   - themes/index.css owns theme overrides.
   - admin.css owns the active admin shell and admin component styles.
   - legacy-admin.css owns the retired PlatformAdminPage styles. */

/* ── LAYER 0: Primitive（原始值，定义全局基础）────────────────────────────── */
:root {
  /* ── Primitive Colors ─────────────────────────────────── */
  /* Neutrals */
  --p-gray-0:   #ffffff;
  --p-gray-50:  #fcfcfd;
  --p-gray-100: #f8f8f9;
  --p-gray-200: #e3e4e6;
  --p-gray-300: #c8cbd0;
  --p-gray-400: #9ca3af;
  --p-gray-500: #6b7280;
  --p-gray-600: #52525b;
  --p-gray-700: #3f444b;
  --p-gray-800: #272a30;
  --p-gray-900: #1a1d21;
  --p-gray-950: #13161a;

  /* Raw state palettes. Components consume the semantic aliases below. */
  --raw-green-50:  #f0fdf4;
  --raw-green-100: #dcfce7;
  --raw-green-500: #22c55e;
  --raw-green-600: #16a34a;

  --raw-amber-50:  #fffbeb;
  --raw-amber-100: #fef3c7;
  --raw-amber-200: #fde68a;
  --raw-amber-400: #f59e0b;
  --raw-amber-500: #d97706;
  --raw-amber-700: #b45309;
  --raw-amber-800: #92400e;

  --raw-red-50:    #fef2f2;
  --raw-red-100:   #fee2e2;
  --raw-red-400:   #ef4444;
  --raw-red-500:   #dc2626;

  --raw-blue-50:   #eff6ff;
  --raw-blue-100:  #dbeafe;
  --raw-blue-200:  #bfdbfe;
  --raw-blue-300:  #93c5fd;
  --raw-blue-400:  #60a5fa;
  --raw-blue-500:  #3b82f6;
  --raw-blue-600:  #2563eb;
  --raw-blue-700:  #1d4ed8;

  --raw-orange-50: #fff7ed;
  --raw-orange-100:#fed7aa;
  --raw-orange-500:#c2410c;
  --raw-orange-600:#92400e;

  --raw-purple-50:  #f5f3ff;
  --raw-purple-100: #ede9fe;
  --raw-purple-200: #ddd6fe;
  --raw-purple-300: #c4b5fd;
  --raw-purple-500: #8b5cf6;
  --raw-purple-600: #7c3aed;
  --raw-purple-700: #6d28d9;

  /* ── Primitive Typography ─────────────────────────────── */
  --p-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --p-font-display: 'Manrope', var(--p-font-sans);
  --p-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* ── Primitive Spacing (4px base grid) ────────────────── */
  --p-space-px:   1px;
  --p-space-0-5:   2px;
  --p-space-1:     4px;
  --p-space-1-5:   6px;
  --p-space-2:     8px;
  --p-space-2-5:   10px;
  --p-space-3:     12px;
  --p-space-3-5:   14px;
  --p-space-4:     16px;
  --p-space-4-5:   18px;
  --p-space-5:     20px;
  --p-space-6:     24px;
  --p-space-7:     28px;
  --p-space-8:     32px;
  --p-space-10:    40px;
  --p-space-12:    48px;

  /* ── Primitive Radius (DESIGN.md: sm 6 / md 8 / lg 12 / xl 16) ── */
  --p-radius-none: 0;
  --p-radius-sm:   6px;
  --p-radius-md:   8px;
  --p-radius-lg:   12px;
  --p-radius-xl:   16px;
  --p-radius-2xl:  24px;
  --p-radius-full: 9999px;

  /* ── Primitive Shadows（分层调色，制造空间感）───────────────────────────── */
  /* Light mode — 偏蓝灰冷调，增加层次感 */
  --p-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --p-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --p-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
  --p-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --p-shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);
  /* Dark mode — 偏暖琥珀调，减少压迫感 */
  --p-shadow-dark-xs:   0 1px 2px rgba(0, 0, 0, 0.30);
  --p-shadow-dark-sm:   0 2px 4px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.24);
  --p-shadow-dark-md:   0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.20);
  --p-shadow-dark-lg:   0 8px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.24);
  --p-shadow-dark-xl:   0 16px 48px rgba(0, 0, 0, 0.60), 0 4px 16px rgba(0, 0, 0, 0.30);

  /* ── Primitive Easing ──────────────────────────────────── */
  --p-ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --p-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --p-ease-spring:  var(--p-ease-default); /* Keep motion controlled and non-elastic across the workspace. */

  /* ── Primitive Z-Index ─────────────────────────────────── */
  --p-z-base:      0;
  --p-z-dropdown:  50;
  --p-z-sticky:    60;
  --p-z-overlay:   80;
  --p-z-modal:     100;
  --p-z-popover:   110;
  --p-z-toast:     9999;

  /* ── LAYER 1: Semantic Tokens — v3
     色阶架构：侧栏深黑（固定）| 内容区浅灰 | 卡片纯白（通过 bg/surface 差值撑层次）
     用户自定义：只需覆盖 Semantic 层变量即可换主题，无需改动组件 ──── */
  /* Colors — Surface */
  --color-scheme:         light;
  --color-shadow:         #000000;
  --control-select-icon:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  --color-bg-primary:    var(--p-gray-0);      /* 卡片/最上层表面：纯白 */
  --color-bg-secondary:  var(--p-gray-100);    /* 内容区背景：浅灰 #f5f5f5 */
  --color-bg-tertiary:   var(--p-gray-200);    /* 输入框/更强悬浮 */
  --color-bg-inverse:    var(--p-gray-900);    /* 深色表面 */
  --color-emphasis-bg-start: var(--p-gray-900);
  --color-emphasis-bg-end:   var(--p-gray-800);
  --color-emphasis-text:     var(--p-gray-0);

  /* Sidebar 语义层（跟随主题：light 近白 / dark 深灰） */
  --color-sidebar-bg:      var(--p-gray-0);    /* 侧栏背景：近白，与卡片同色 */
  --color-sidebar-hover:   var(--p-gray-50);   /* 侧栏 hover：浅灰 */
  --color-sidebar-active:  var(--p-gray-100);  /* 侧栏激活态：中灰 */
  --color-sidebar-border:  var(--p-gray-200);  /* 侧栏边框：细灰线 */
  --color-sidebar-text-1:  var(--p-gray-900);  /* 侧栏主文字 */
  --color-sidebar-text-2:  var(--p-gray-600);  /* 侧栏次要文字 */
  --color-sidebar-text-3:  var(--p-gray-500);  /* 侧栏更弱文字 */
  --color-sidebar-text-4:  var(--p-gray-400);  /* 侧栏最弱文字 */

  /* Colors — Text */
  --color-text-primary:   var(--p-gray-900);
  --color-text-secondary: var(--p-gray-500);
  --color-text-muted:     var(--p-gray-400);
  --color-text-disabled:  var(--p-gray-300);
  --color-text-inverse:   var(--p-gray-0);

  /* Colors — Border */
  --color-border-default: var(--p-gray-200);
  --color-border-strong:  var(--p-gray-300);
  --color-border-focus:   var(--color-brand);
  --color-border-muted:   var(--p-gray-100);

  /* Compatibility aliases used by older SaaS surfaces. */
  --color-bg:             var(--color-bg-secondary);
  --color-bg-elevated:    var(--color-bg-primary);
  --color-bg-muted:       var(--color-bg-tertiary);
  --color-bg-subtle:      color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  --color-bg-brand-subtle: color-mix(in srgb, var(--color-brand) 10%, transparent);
  --color-bg-muted-subtle: color-mix(in srgb, var(--color-text-secondary) 10%, transparent);
  --color-border:         var(--color-border-default);
  --color-text:           var(--color-text-primary);
  --color-text-link:      var(--color-brand);
  --color-text-on-brand:  var(--color-brand-text);

  /* Colors — Interactive (品牌色 indigo) */
  --color-brand:           #4338ca;
  --color-brand-hover:     #3730a3;
  --color-brand-soft:      #eef2ff;
  --color-brand-subtle:    color-mix(in srgb, var(--color-brand) 9%, transparent);
  --color-brand-border:    #c7d2fe;
  --color-brand-text:      #ffffff;
  /* 别名：部分页面引用 --color-primary，统一指向品牌色 */
  --color-primary:         var(--color-brand);
  --color-primary-soft:    var(--color-brand-soft);

  /* Colors — Semantic State */
  --color-success:         var(--raw-green-500);
  --color-success-subtle:  var(--raw-green-50);
  --color-success-strong:  var(--raw-green-600);
  --color-on-success:      var(--p-gray-0);

  --color-warning:         var(--raw-amber-400);
  --color-warning-subtle:  var(--raw-amber-50);
  --color-warning-strong:  var(--raw-amber-500);
  --color-warning-line:    var(--raw-amber-100);
  --color-on-warning:      var(--p-gray-950);

  --color-danger:          var(--raw-red-400);
  --color-danger-subtle:   var(--raw-red-50);
  --color-danger-strong:   var(--raw-red-500);
  --color-danger-line:     var(--raw-red-100);
  --color-on-danger:       var(--p-gray-0);

  --color-info:            var(--raw-blue-500);
  --color-info-subtle:     var(--raw-blue-50);
  --color-info-line:       var(--raw-blue-100);
  --color-info-strong:     var(--raw-blue-600);
  --color-on-info:         var(--p-gray-0);

  --color-success-line:    var(--raw-green-100);

  /* Colors — Purple (套餐/规划用紫色补充) */
  --color-purple:         var(--raw-purple-600);
  --color-purple-strong:  var(--raw-purple-700);
  --color-purple-subtle:  var(--raw-purple-50);
  --color-purple-line:    var(--raw-purple-300);

  /* Colors — Orange subtle（付费/一次性套餐底色，暗色下需可覆盖）*/
  --color-orange-subtle:  var(--raw-orange-50);

  /* Colors — Tier/Badge */
  --color-tier-free:       var(--color-success);
  --color-tier-free-bg:    var(--color-success-subtle);
  --color-tier-paid:       var(--raw-orange-500);
  --color-tier-paid-bg:    var(--color-orange-subtle);

  /* Shared semantic aliases used by older pages and plugin surfaces. */
  --color-bg-base:         var(--color-bg-secondary);
  --color-surface:         var(--color-bg-primary);
  --color-surface-muted:   color-mix(in srgb, var(--color-bg-primary) 60%, var(--color-bg-secondary));
  --color-surface-subtle:  var(--color-bg-subtle);
  --color-border-subtle:   color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  --color-brand-strong:    var(--color-brand-hover);

  --color-success-bg:      var(--color-success-subtle);
  --color-success-border:  var(--color-success-line);
  --color-success-text:    var(--color-success-strong);
  --color-warning-bg:      var(--color-warning-subtle);
  --color-warning-border:  var(--color-warning-line);
  --color-warning-text:    var(--color-warning-strong);
  --color-danger-bg:       var(--color-danger-subtle);
  --color-danger-border:   var(--color-danger-line);
  --color-danger-text:     var(--color-danger-strong);
  --color-info-bg:         var(--color-info-subtle);
  --color-info-border:     var(--color-info-line);
  --color-info-text:       var(--color-info-strong);

  /* Compatibility aliases: legacy primitive references now follow the theme. */
  --p-green-50:  var(--color-success-subtle);
  --p-green-100: var(--color-success-line);
  --p-green-200: var(--color-success-line);
  --p-green-500: var(--color-success);
  --p-green-600: var(--color-success-strong);
  --p-amber-50:  var(--color-warning-subtle);
  --p-amber-100: var(--color-warning-line);
  --p-amber-200: var(--color-warning-line);
  --p-amber-400: var(--color-warning);
  --p-amber-500: var(--color-warning-strong);
  --p-amber-700: var(--color-warning-strong);
  --p-amber-800: var(--color-warning-strong);
  --p-red-50:    var(--color-danger-subtle);
  --p-red-100:   var(--color-danger-line);
  --p-red-400:   var(--color-danger);
  --p-red-500:   var(--color-danger-strong);
  --p-blue-50:   var(--color-info-subtle);
  --p-blue-100:  var(--color-info-line);
  --p-blue-200:  var(--color-info-line);
  --p-blue-300:  var(--color-info);
  --p-blue-400:  var(--color-info);
  --p-blue-500:  var(--color-info);
  --p-blue-600:  var(--color-info-strong);
  --p-blue-700:  var(--color-info-strong);
  --p-orange-50:  var(--color-orange-subtle);
  --p-orange-100: var(--color-orange-subtle);
  --p-orange-500: var(--color-tier-paid);
  --p-orange-600: var(--color-warning-strong);
  --p-purple-50:  var(--color-purple-subtle);
  --p-purple-100: var(--color-purple-subtle);
  --p-purple-200: var(--color-purple-line);
  --p-purple-300: var(--color-purple-line);
  --p-purple-500: var(--color-purple);
  --p-purple-600: var(--color-purple);
  --p-purple-700: var(--color-purple-strong);

  /* Typography */
  --font-body:       var(--p-font-sans);
  --font-display:    var(--p-font-display);
  --font-code:       var(--p-font-mono);
  --text-xs:         11px;
  --text-sm:         12px;
  --text-base:       13px;
  --text-lg:         15px;
  --text-xl:         18px;
  --text-2xl:        20px;
  --text-3xl:        26px;
  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.75;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.1em;

  /* Spacing (re-export primitive) */
  --space-1:   var(--p-space-1);
  --space-1-5: var(--p-space-1-5);
  --space-2:   var(--p-space-2);
  --space-2-5: var(--p-space-2-5);
  --space-3:   var(--p-space-3);
  --space-3-5: var(--p-space-3-5);
  --space-4:   var(--p-space-4);
  --space-4-5: var(--p-space-4-5);
  --space-5:   var(--p-space-5);
  --space-6:   var(--p-space-6);
  --space-8:   var(--p-space-8);
  --space-10:  var(--p-space-10);
  --space-12:  var(--p-space-12);

  /* Radius */
  --radius-none: var(--p-radius-none);
  --radius-sm:   var(--p-radius-sm);
  --radius-md:   var(--p-radius-md);
  --radius-lg:   var(--p-radius-lg);
  --radius-xl:   var(--p-radius-xl);
  --radius-full: var(--p-radius-full);

  /* Shadow */
  --shadow-xs:  var(--p-shadow-xs);
  --shadow-sm:  var(--p-shadow-sm);
  --shadow-md:  var(--p-shadow-md);
  --shadow-lg:  var(--p-shadow-lg);
  --shadow-xl:  var(--p-shadow-xl);

  /* Overlay — modal / drawer 遮罩层 */
  --overlay-bg: rgba(0, 0, 0, 0.45);
  --overlay-bg-light: rgba(0, 0, 0, 0.25);

  /* Motion */
  --ease:       var(--p-ease-default);
  --ease-out:   var(--p-ease-out);
  --ease-in:    var(--p-ease-in);
  --ease-spring:var(--p-ease-spring);
  --duration-fast:   0.1s;
  --duration-normal: 0.2s;
  --duration-slow:   0.4s;

  /* Layout */
  --sidebar-width: 240px;
  --shell-header-height: 64px;
  --shell-gutter: 24px;
  --page-max-width: 1160px;
  --page-padding-x: 32px;
  --page-padding-y: 28px;

  /* Z-Index */
  --z-dropdown: var(--p-z-dropdown);
  --z-sticky:   var(--p-z-sticky);
  --z-overlay:  var(--p-z-overlay);
  --z-modal:    var(--p-z-modal);
  --z-popover:  var(--p-z-popover);
  --z-toast:    var(--p-z-toast);

  /* ── LAYER 2: Component Aliases（向后兼容，映射到 Semantic）────────── */
  /* 旧变量名 → 新 token 映射，保持现有 class 正常工作 */
  --saas-black:    var(--p-gray-950);
  --saas-white:    var(--p-gray-0);

  /* 新的内容区 surface 体系 */
  --saas-content-bg:    var(--color-bg-secondary); /* 内容区背景 #f5f5f5 */
  --saas-surface:      var(--color-bg-primary);    /* 卡片表面 #ffffff */
  --saas-surface-hover: var(--color-bg-tertiary); /* 卡片悬浮 */
  --saas-surface-muted: var(--color-surface-muted);
  --saas-border:   var(--color-border-default);
  --saas-border-h:  var(--color-border-strong);
  --saas-border-strong: var(--color-border-strong);

  /* 侧栏专用 alias */
  --saas-sidebar-bg:     var(--color-sidebar-bg);    /* #090909 */
  --saas-sidebar-hover:   var(--color-sidebar-hover);
  --saas-sidebar-active:  var(--color-sidebar-active);
  --saas-sidebar-border:  var(--color-sidebar-border);
  --saas-sidebar-text-1:  var(--color-sidebar-text-1);
  --saas-sidebar-text-2:  var(--color-sidebar-text-2);
  --saas-sidebar-text-3:  var(--color-sidebar-text-3);
  --saas-sidebar-text-4:  var(--color-sidebar-text-4);

  --saas-gray-50:  var(--p-gray-50);
  --saas-gray-100: var(--p-gray-100);
  --saas-gray-200: var(--p-gray-200);
  --saas-gray-300: var(--p-gray-300);
  --saas-gray-400: var(--p-gray-400);
  --saas-gray-500: var(--p-gray-500);
  --saas-gray-600: var(--p-gray-600);
  --saas-gray-700: var(--p-gray-700);
  --saas-gray-800: var(--p-gray-800);
  --saas-gray-900: var(--p-gray-900);
  --saas-gray-950: var(--p-gray-950);

  --saas-accent:    var(--color-brand);
  --saas-accent-h:  var(--color-brand-hover);
  /* 别名：site-switcher / ai-msg 等组件引用 --saas-primary，统一指向品牌色 */
  --saas-primary:        var(--color-brand);
  --saas-primary-lightest: var(--color-brand-soft);
  --saas-success:   var(--color-success);
  --saas-warning:   var(--color-warning);
  --saas-danger:    var(--color-danger);
  --saas-info:      var(--color-info);
  --saas-purple:    var(--color-purple);

  --saas-font:      var(--font-body);
  --saas-body-font: var(--font-body);
  --saas-mono:      var(--font-code);
  --saas-radius:    var(--radius-sm);
  --saas-radius-sm: var(--radius-sm);
  --saas-radius-md: var(--radius-md);
  --saas-radius-lg: var(--radius-lg);
  --saas-ease:     var(--ease);
  --saas-ease-out: var(--ease-out);
  --saas-shadow-sm: var(--shadow-sm);
  --saas-shadow:    var(--shadow-md);
  --saas-shadow-lg: var(--shadow-lg);
}

/* ── Base Reset ──────────────────────────────────────────── */
html,
body,
#root {
  min-height: 100%;
  margin: 0;
}
body {
  min-width: 320px;
}

/* 背景：内容区浅灰（侧栏独立用 sidebar token） */
.saas-root {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color-scheme: var(--color-scheme);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
.saas-root ::-moz-selection {
  background: rgba(24,24,27,0.08);
}
.saas-root ::selection {
  background: rgba(24,24,27,0.08);
}

/* 数字排版：所有数据场景等宽对齐，刷新/变动时不跳动
   （金额、用量、指标卡、表格数字列都会命中此规则） */
.saas-root {
  font-variant-numeric: tabular-nums;
}
.saas-root code,
.saas-root pre,
.saas-root kbd {
  font-family: var(--font-code);
  font-variant-numeric: normal;
}

/* ── Keyframe Animations ───────────────────────────────────── */
@keyframes saasFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes saasFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes saasSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes saasSlideRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes saasShimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

@keyframes saasSpin {
  to { transform: rotate(360deg); }
}

@keyframes saasPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes saasScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes saasToastSlide {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes saasToastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}

/* ── Entrance Animations ──────────────────────────────────── */
.saas-anim-fadeUp   { animation: saasFadeUp   0.45s var(--ease) both; }
.saas-anim-fadeIn  { animation: saasFadeIn   0.3s ease both; }
.saas-anim-scaleIn { animation: saasScaleIn  0.25s var(--ease) both; }
.saas-anim-spin    { animation: saasSpin     0.8s linear infinite; }

/* Staggered delays */
.saas-delay-1  { animation-delay: 0.05s; }
.saas-delay-2  { animation-delay: 0.10s; }
.saas-delay-3  { animation-delay: 0.15s; }
.saas-delay-4  { animation-delay: 0.20s; }
.saas-delay-5  { animation-delay: 0.25s; }
.saas-delay-6  { animation-delay: 0.30s; }
.saas-delay-7  { animation-delay: 0.35s; }
.saas-delay-8  { animation-delay: 0.40s; }

/* ── Typography ───────────────────────────────────────────── */
.saas-title-xl {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;

  letter-spacing: -0.02em;
  line-height: 1.2;
}
.saas-title-lg {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;

  letter-spacing: -0.01em;
}
.saas-title-md {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;

}
.saas-title-sm {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;

}
.saas-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Body text scale ─────────────────────────────────────────────
   `saas-body`, `saas-body-sm` and `saas-body-xs` are used ~124 times across
   the workspace, but only ever appeared in descendant overrides
   (e.g. `.saas-runtime-section-header .saas-body-sm { … }`) — the base rules
   were never written, so all of those elements fell back to inherited body
   text. These are the missing base definitions. */
.saas-body,
.saas-body-sm,
.saas-body-xs {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.saas-body { font-size: var(--text-base); }
.saas-body-sm { font-size: var(--text-sm); }
.saas-body-xs { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Small label variant used by compact forms. */
.saas-label-sm {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

/* Base title alias — `.saas-title` alone is used without a size modifier. */
.saas-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.saas-mono      { font-family: var(--font-code); font-size: 11px; }

/* ── Surface: Card（Apple 风格：柔和阴影，极细边框）────────────────── */
.saas-card {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: box-shadow 0.2s ease;
}
.saas-card:hover {
  box-shadow: var(--shadow-sm);
}
.saas-card-sm  { padding: 12px; }
.saas-card-md  { padding: 16px; }
.saas-card-lg  { padding: 20px; }
.saas-card-label {
  font-size: 10px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

/* ── Sidebar（跟随主题：light 近白 / dark 深灰）────────────────────── */
.saas-sidebar {
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-sidebar-border);
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Logo 区域 */
.saas-sidebar-logo {
  display: flex;
  align-items: center;
  min-height: var(--shell-header-height);
  padding: 0 14px;
  border-bottom: 1px solid var(--color-sidebar-border);
}

.saas-sidebar-logo-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.saas-sidebar-logo-trigger:hover {
  background: var(--color-sidebar-hover);
}

/* saas-logo (App.jsx SaasSidebar 使用的类名） */
.saas-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--shell-header-height);
  padding: 0 var(--shell-gutter);
  border-bottom: 1px solid var(--color-sidebar-border);
}
.saas-logo-mark {
  width: 30px; height: 30px;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--color-brand);
  flex-shrink: 0;
}
.saas-logo-name {
  font-size: 14px; font-weight: 600;
  color: var(--color-sidebar-text-1);
  letter-spacing: -0.01em;
}
.saas-logo-sub {
  font-size: 9px; color: var(--color-sidebar-text-3);
  text-transform: uppercase; letter-spacing: 0.12em; margin-top: 1px;
}

.saas-sidebar-logo-mark {
  width: 30px; height: 30px;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--color-brand);
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.saas-sidebar-logo-name {
  font-size: 14px; font-weight: 600;
  color: var(--color-sidebar-text-1);
  letter-spacing: -0.01em;
}
.saas-sidebar-logo-sub {
  font-size: 9px; color: var(--color-sidebar-text-3);
  text-transform: uppercase; letter-spacing: 0.12em; margin-top: 1px;
}

/* Current site is a first-class workspace context, not a footer utility. */
.saas-sidebar-context-bar {
  display: grid;
  gap: 6px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--color-sidebar-border);
}
.saas-sidebar-context-label {
  padding-inline: 2px;
  color: var(--color-sidebar-text-4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.saas-sidebar-context-bar .site-switcher {
  display: block;
  width: 100%;
}
.saas-sidebar-context-bar .saas-site-chip {
  min-height: 36px;
  max-width: none;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-sidebar-active);
}
.saas-sidebar-context-bar .saas-site-chip:hover {
  border-color: var(--color-sidebar-border);
  background: var(--color-sidebar-hover);
}
.saas-sidebar-context-readonly {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--color-sidebar-border);
  border-radius: var(--radius-md);
  background: var(--color-sidebar-active);
}
.saas-sidebar-context-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 7px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
}
.saas-sidebar-context-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.saas-sidebar-context-copy small {
  color: var(--color-sidebar-text-4);
  font-size: 9px;
  line-height: 1.2;
}
.saas-sidebar-context-copy strong {
  overflow: hidden;
  color: var(--color-sidebar-text-1);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 侧栏顶部 Site 切换器区域 */
.saas-sidebar-site {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-sidebar-border);
}

/* Nav 主区域 */
.saas-sidebar-nav {
  flex: 1;
  padding: 8px 8px;
  overflow-y: auto;
}

.saas-sidebar-app-context {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 4px 12px;
  padding: 10px 10px;
  border: 1px solid var(--color-sidebar-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-sidebar-active) 70%, transparent);
}
.saas-sidebar-app-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
}
.saas-sidebar-app-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.saas-sidebar-app-copy small {
  color: var(--color-sidebar-text-4);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.saas-sidebar-app-copy strong {
  overflow: hidden;
  color: var(--color-sidebar-text-1);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 导航分组 */
.saas-nav-group {
  margin-bottom: 4px;
}
.saas-nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 3px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-sidebar-text-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: left;
  border-radius: var(--radius-md);
  transition: color 0.12s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.saas-nav-group-label-copy {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}
.saas-nav-group-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--color-brand);
}
.saas-nav-generated-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0;
}
.saas-nav-generated-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-sidebar-text-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background 0.12s, color 0.12s;
}
.saas-nav-generated-group-label:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-text-1);
}
.saas-nav-generated-group-label.active {
  background: var(--color-sidebar-active);
  color: var(--color-sidebar-text-1);
  box-shadow: inset 2px 0 0 var(--color-brand);
}
.saas-nav-group-label:hover { color: var(--color-sidebar-text-3); }
.saas-nav-generated-group-label:hover { color: var(--color-sidebar-text-1); }
.saas-nav-generated-group-label .saas-nav-group-icon {
  width: 16px;
  height: 16px;
  color: inherit;
}
.saas-nav-generated-group-label .saas-nav-collapse-icon {
  color: inherit;
}
.saas-nav-collapse-icon {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-sidebar-text-4);
  transition: transform 0.15s var(--ease);
  flex-shrink: 0;
}
.saas-nav-group.collapsed .saas-nav-collapse-icon { transform: rotate(0); }
.saas-nav-group:not(.collapsed) .saas-nav-collapse-icon { transform: rotate(90deg); }
.saas-nav-group.collapsed .saas-nav-items { display: none; }
.saas-nav-items { display: flex; flex-direction: column; gap: 1px; }
.saas-nav-generated-items {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--color-sidebar-border);
}

/* 一级导航项 */
.saas-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-sidebar-text-2);
  border-radius: var(--radius-md);
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.saas-nav-link:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-text-1);
}
.saas-nav-link.active {
  background: var(--color-sidebar-active);
  color: var(--color-sidebar-text-1);
  font-weight: 500;
  border-color: transparent;
}
.saas-nav-link .saas-nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}
.saas-nav-link.active .saas-nav-icon { opacity: 1; }
.saas-nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.7;
}

/* 二级子菜单（缩进 + 小圆点） */
.saas-nav-sub-items {
  margin-left: 25px;
  padding-left: 8px;
  border-left: 1px solid var(--color-sidebar-border);
  margin-top: 2px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.saas-nav-sub-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-sidebar-text-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  border: 1px solid transparent;
}
.saas-nav-sub-item:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-text-2);
}
.saas-nav-sub-item.active {
  color: var(--color-sidebar-text-1);
  font-weight: 500;
}
.saas-nav-sub-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.4;
}
.saas-nav-sub-item.active .saas-nav-sub-dot { opacity: 1; }

/* 已安装功能分组 */
.saas-installed-nav-group {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-sidebar-border);
}
.saas-installed-nav-label {
  padding: 6px 10px 3px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-sidebar-text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.saas-installed-nav-hint {
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-sidebar-text-3);
}
.saas-nav-link-installed {
  font-size: 12px;
}
.saas-installed-nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 侧栏底部 */
.saas-sidebar-footer {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--color-sidebar-border);
  position: relative;
}
.saas-user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px;
}
.saas-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--color-brand);
  flex-shrink: 0;
}
.saas-user-info { flex: 1; min-width: 0; }
.saas-user-name {
  font-size: 12px; font-weight: 500; color: var(--color-sidebar-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saas-user-plan {
  font-size: 9px; color: var(--color-sidebar-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.saas-user-settings {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-sidebar-text-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.saas-user-settings:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-text-2);
}

/* ── Stat Card（Apple 风格，无跳起）───────────────────────────── */
.saas-stat {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: box-shadow 0.2s ease;
}
.saas-stat:hover {
  box-shadow: var(--shadow-sm);
}
.saas-stat-label {
  font-size: 10px;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.saas-stat-value {
  font-size: 26px;
  font-weight: 700;

  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.saas-stat-sub {
  font-size: 11px;

  margin-top: 4px;
}

/* ── Table ────────────────────────────────────────────────── */
.saas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.saas-table th {
  font-size: 10px;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 12px 10px;
  text-align: left;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-default);
}
.saas-table td {
  padding: 12px 12px;
  color: var(--color-text-primary);

  vertical-align: middle;
}
.saas-table tr:last-child td { border-bottom: none; }
.saas-table tbody tr {
  transition: background 0.1s;
}
.saas-table tbody tr:hover td {
  background: var(--color-bg-tertiary);
}

/* ── Buttons ──────────────────────────────────────────────── */
.saas-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.saas-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.saas-btn-primary {
  background: var(--color-brand);
  color: var(--color-brand-text);
  border-color: var(--color-brand);
}
.saas-btn-primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}
.saas-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}
.saas-btn-secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.saas-btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-strong);
}
.saas-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.saas-btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.saas-btn-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-border-default);
}
.saas-btn-danger:hover:not(:disabled) {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.saas-btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}
.saas-btn-xs {
  padding: 2px 8px;
  font-size: 10px;
}
.saas-btn-locked {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--color-warning-subtle);
  border: 1px dashed var(--color-warning);
  color: var(--color-warning-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  transition: background 0.15s;
}
.saas-btn-locked:hover {
  background: var(--color-warning-subtle);
}

/* ── Inputs ────────────────────────────────────────────────── */
.saas-input {
  width: 100%;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  transition: border-color 0.1s, box-shadow 0.1s;
  outline: none;
  font-family: var(--font-body);
}
.saas-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
.saas-input::-moz-placeholder {
  color: var(--color-text-muted);
}
.saas-input::placeholder {
  color: var(--color-text-muted);
}
.saas-input-error {
  border-color: var(--color-danger);
}
.saas-input-error:focus {
  box-shadow: 0 0 0 2px rgba(239,68,68,0.12);
}

textarea.saas-input {
  resize: none;
  min-height: 60px;
  line-height: 1.5;
}

.saas-styled-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 34px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font: inherit;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.saas-styled-select-trigger:hover:not(:disabled) {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-focus);
}
.saas-styled-select-trigger[aria-expanded="true"] {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
.saas-styled-select-trigger:disabled {
  color: var(--color-text-disabled);
  background: var(--color-bg-tertiary);
  cursor: not-allowed;
  opacity: .75;
}
.saas-styled-select-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-styled-select-placeholder { color: var(--color-text-muted); }
.saas-styled-select-chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease;
}
.saas-styled-select-chevron.is-open { transform: rotate(180deg); }
.saas-styled-select-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-lg, 0 16px 36px rgba(0, 0, 0, .16));
  color: var(--color-text-primary);
}
.saas-styled-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.saas-styled-select-option:hover,
.saas-styled-select-option.is-active {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.saas-styled-select-option.is-selected {
  color: var(--color-brand);
  font-weight: 600;
}
.saas-styled-select-option:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* Shared fallback for native selects in both workspaces. */
.saas-root select,
.admin-root select {
  min-height: 34px;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-primary);
  background-image: var(--control-select-icon);
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: 1.4;
  outline: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.saas-root select:hover:not(:disabled),
.admin-root select:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}
.saas-root select:focus-visible,
.admin-root select:focus-visible {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
.saas-root select:disabled,
.admin-root select:disabled {
  color: var(--color-text-disabled);
  background-color: var(--color-bg-tertiary);
  cursor: not-allowed;
  opacity: 0.75;
}
.saas-root select option,
.admin-root select option,
.saas-root select optgroup,
.admin-root select optgroup {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
.saas-root select option:disabled,
.admin-root select option:disabled {
  color: var(--color-text-disabled);
}
select.saas-input {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: var(--control-select-icon);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Compact variant of the shared input. Declared immediately after the typed-
   field baseline below so it wins on cascade order at equal specificity. */
.saas-root .saas-input.saas-input-sm,
.saas-root select.saas-input-sm:not([multiple]) {
  min-height: 28px;
  padding: 4px 8px;
  font-size: var(--text-sm);
}

/* Keep typed fields consistent with the select baseline. */
.saas-root .saas-input,
.admin-root .saas-input,
.admin-root .admin-form-input,
.admin-root .admin-pool-inline-input {
  min-height: 34px;
  box-sizing: border-box;
}

.saas-root input[type="number"].saas-input,
.admin-root input[type="number"].saas-input,
.admin-root input[type="number"].admin-form-input,
.admin-root input[type="number"].admin-pool-inline-input {
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}

.saas-root input[type="number"].saas-input::-webkit-inner-spin-button,
.saas-root input[type="number"].saas-input::-webkit-outer-spin-button,
.admin-root input[type="number"].saas-input::-webkit-inner-spin-button,
.admin-root input[type="number"].saas-input::-webkit-outer-spin-button,
.admin-root input[type="number"].admin-form-input::-webkit-inner-spin-button,
.admin-root input[type="number"].admin-form-input::-webkit-outer-spin-button,
.admin-root input[type="number"].admin-pool-inline-input::-webkit-inner-spin-button,
.admin-root input[type="number"].admin-pool-inline-input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

.saas-root .saas-input:focus-visible,
.admin-root .saas-input:focus-visible,
.admin-root .admin-form-input:focus-visible,
.admin-root .admin-pool-inline-input:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.saas-root .saas-input:disabled,
.admin-root .saas-input:disabled,
.admin-root .admin-form-input:disabled,
.admin-root .admin-pool-inline-input:disabled {
  color: var(--color-text-disabled);
  background: var(--color-bg-tertiary);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Checkbox */
.saas-root input[type="checkbox"],
.saas-root input[type="radio"] {
  accent-color: var(--color-brand);
  cursor: pointer;
}

.saas-root input[type="checkbox"]:not([class]),
.saas-root input[type="radio"]:not([class]) {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.saas-root input[type="checkbox"]:disabled,
.saas-root input[type="radio"]:disabled {
  cursor: not-allowed;
}

.saas-root input[type="checkbox"]:focus-visible,
.saas-root input[type="radio"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  outline-offset: 2px;
}

/* Admin checkbox/radio fallback — mirrors saas-root above */
.admin-root input[type="checkbox"],
.admin-root input[type="radio"] {
  accent-color: var(--color-brand);
  cursor: pointer;
}

.admin-root input[type="checkbox"]:not([class]),
.admin-root input[type="radio"]:not([class]) {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.admin-root input[type="checkbox"]:disabled,
.admin-root input[type="radio"]:disabled {
  cursor: not-allowed;
}

.admin-root input[type="checkbox"]:focus-visible,
.admin-root input[type="radio"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  outline-offset: 2px;
}

.saas-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.saas-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
  cursor: pointer;

  flex-shrink: 0;
}

/* ── Section Title ─────────────────────────────────────────── */
.saas-section-title {
  font-size: 10px;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/* ── Usage Bar ─────────────────────────────────────────────── */
.saas-usage-bar {
  height: 3px;

  border-radius: 999px;
  overflow: hidden;
}
.saas-usage-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}
.saas-usage-fill.warn  { background: var(--color-warning); }
.saas-usage-fill.danger{ background: var(--color-danger); }
.saas-usage-fill.ok    { background: var(--color-success); }

/* ── Tags / Badges ────────────────────────────────────────── */
.saas-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.saas-badge-free     { background: var(--color-success-subtle); color: var(--color-success-strong); border: 1px solid var(--color-success-line); }
.saas-badge-paid     { background: var(--color-orange-subtle); color: var(--color-tier-paid); border: 1px solid var(--color-warning-line); }
.saas-badge-pro      { background: var(--color-purple-subtle); color: var(--color-purple); border: 1px solid var(--color-purple-line); }
.saas-badge-starter  { background: var(--color-brand-soft); color: var(--color-brand); border: 1px solid var(--color-brand-border); }
.saas-badge-enterprise { background: var(--color-warning-subtle); color: var(--color-warning-strong); border: 1px solid var(--color-warning-line); }
.saas-badge-required { background: var(--color-warning-subtle); color: var(--color-warning-strong); border: 1px solid var(--color-warning-line); }

/* ── Mini Bundle Card (Dashboard) ────────────────────────────────────────────── */
.saas-bundle-card-mini {
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.saas-bundle-card-mini:hover {
  border-color: var(--color-brand);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

}
.saas-bundle-mini-icon { font-size: 24px; margin-bottom: 6px; }
.saas-bundle-mini-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.saas-bundle-mini-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.saas-badge-success  { background: var(--color-success-subtle); color: var(--color-success-strong); border: 1px solid var(--color-success-line); }
.saas-badge-warning  { background: var(--color-warning-subtle); color: var(--color-warning-strong); border: 1px solid var(--color-warning-line); }
.saas-badge-danger   { background: var(--color-danger-subtle); color: var(--color-danger-strong); border: 1px solid var(--color-danger-line); }
.saas-badge-info     { background: var(--color-info-subtle); color: var(--color-info); border: 1px solid var(--color-info-line); }

/* ── Legacy badge aliases (unprefixed) ───────────────────────────
   Several workspace surfaces compose badges as `saas-badge badge-success`
   (or `badge-neutral`, `badge-billing`, …) but only the `saas-badge-*` names
   were ever defined. Every such badge therefore rendered with no colour, which
   is why several panels fell back to inline styles.
   These aliases make the unprefixed names resolve to exactly the same tokens.
   Prefer `saas-badge-*` in new code; these exist for backwards compatibility. */
.badge-default,
.badge-neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}
.badge-success { background: var(--color-success-subtle); color: var(--color-success-strong); border: 1px solid var(--color-success-line); }
.badge-warning { background: var(--color-warning-subtle); color: var(--color-warning-strong); border: 1px solid var(--color-warning-line); }
.badge-danger  { background: var(--color-danger-subtle); color: var(--color-danger-strong); border: 1px solid var(--color-danger-line); }
.badge-info    { background: var(--color-info-subtle); color: var(--color-info); border: 1px solid var(--color-info-line); }
.badge-billing { background: var(--color-purple-subtle); color: var(--color-purple); border: 1px solid var(--color-purple-line); }
.badge-free    { background: var(--color-success-subtle); color: var(--color-success-strong); border: 1px solid var(--color-success-line); }
.badge-paid    { background: var(--color-orange-subtle); color: var(--color-tier-paid); border: 1px solid var(--color-warning-line); }
.badge-pro     { background: var(--color-purple-subtle); color: var(--color-purple); border: 1px solid var(--color-purple-line); }
.badge-starter { background: var(--color-brand-soft); color: var(--color-brand); border: 1px solid var(--color-brand-border); }
.badge-enterprise { background: var(--color-warning-subtle); color: var(--color-warning-strong); border: 1px solid var(--color-warning-line); }

/* ── Skeleton Loader ──────────────────────────────────────── */
.saas-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-border-default) 50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 800px 100%;
  animation: saasShimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.saas-skeleton-text   { height: 12px; border-radius: 3px; }
.saas-skeleton-title  { height: 20px; border-radius: 3px; width: 60%; }
.saas-skeleton-circle { border-radius: 50%; }

/* Skeleton row for service list */
.saas-skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
}
.saas-skeleton-icon   { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.saas-skeleton-content{ flex: 1; display: flex; flex-direction: column; gap: 6px; }
.saas-skeleton-line   { height: 10px; }
.saas-skeleton-btn    { width: 72px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; }

/* Skeleton stat card */
.saas-skeleton-stat {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Empty State ──────────────────────────────────────────── */
.saas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}
.saas-empty-icon {
  width: 48px;
  height: 48px;

  background: var(--color-brand-soft);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}
.saas-empty-illustration {
  width: 320px;
  max-width: 100%;
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.saas-illustration {
  display: block;
  width: 100%;
  height: auto;
}
.saas-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.saas-empty-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  max-width: 280px;
  line-height: 1.6;
}
.saas-empty-action {
  margin-top: 6px;
}

/* Legacy alias: `saas-empty-state` is the wrapper used by BundleDetailPage and
   InvoicesPage. Only the `saas-empty` variant was ever defined, so those empty
   states rendered edge-to-edge with no centering or padding. */
.saas-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}

/* ── Loading Spinner ──────────────────────────────────────── */
.saas-spin {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-default);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: saasSpin 0.7s linear infinite;
  flex-shrink: 0;
}
.saas-spin-sm { width: 12px; height: 12px; border-width: 1.5px; }
.saas-spin-md { width: 20px; height: 20px; border-width: 2px; }
.saas-spin-lg { width: 24px; height: 24px; border-width: 2px; }
.saas-spin-xl { width: 32px; height: 32px; border-width: 3px; }

/* Legacy alias: several pages render `<div className="saas-spinner" />`,
   which had no definition at all and therefore showed nothing. */
.saas-spinner {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-default);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: saasSpin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Overlay / Modal ───────────────────────────────────────── */
.saas-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: saasFadeIn 0.2s ease;
}
.saas-modal {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: saasScaleIn 0.2s var(--ease);
  overflow: hidden;
}
.saas-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.saas-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}
.saas-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

/* ── Legacy modal aliases ───────────────────────────────────────
   InvoicesPage and PlansPage render their own modal shell using
   `saas-modal-overlay` + `saas-modal-title`, neither of which existed, so those
   dialogs had no backdrop, no centering and an unstyled heading. These alias the
   canonical `.saas-overlay` / `.saas-modal-*` primitives above. Prefer the
   shared `Modal` component in new code. */
.saas-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay-bg);
  animation: saasFadeIn 0.15s var(--ease);
}
.saas-modal-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
}
.saas-modal-md { max-width: 640px; }
.saas-modal-lg { max-width: 880px; }
.saas-modal-sm { max-width: 400px; }

/* Multiline input. The workspace styles inputs with an inset box-shadow ring
   rather than a real border (see `.saas-root textarea` below), and enforces
   `min-height: 36px`. This rule only needs to guarantee a comfortable editable
   area and a consistent focus ring, so it defers to that convention. */
.saas-textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  resize: vertical;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  outline: none;
  transition: box-shadow var(--duration-normal) var(--ease);
}
.saas-textarea::-moz-placeholder { color: var(--color-text-muted); }
.saas-textarea::placeholder { color: var(--color-text-muted); }
.saas-textarea:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.saas-textarea:focus,
.saas-textarea:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-brand), 0 0 0 3px var(--color-brand-soft);
}

/* Compact input sizing is declared next to the typed-field baseline at
   `.saas-root .saas-input` (search "Compact variant"). */

/* Table select-all / row checkboxes in the API key scope picker. */
.saas-scope-check {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* Failed deployment row accent (`.saas-deploy-item` is defined elsewhere). */
.saas-deploy-item-failed {
  border-color: var(--color-danger-line);
  background: var(--color-danger-subtle);
}

/* Section wrapper for generated-resource cards. */
.saas-generated-resource-section {
  margin-top: 8px;
}

/* Data table used by generated-resource schemas. */
.saas-schema-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.saas-schema-table th,
.saas-schema-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-default);
  text-align: left;
  vertical-align: top;
}
.saas-schema-table th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.saas-schema-table td {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
.saas-schema-table tbody tr:hover { background: var(--color-bg-secondary); }
.saas-schema-table tbody tr:last-child td { border-bottom: 0; }

/* ── Code Block ────────────────────────────────────────────── */
.saas-code {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  padding: 14px 16px;
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.75;
  border-radius: var(--radius-md);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  border: 1px solid var(--color-border-strong);
}

/* ── Toast Notifications ──────────────────────────────────── */
.saas-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.saas-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;

  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 320px;
  min-width: 220px;
  pointer-events: auto;
  animation: saasToastSlide 0.3s var(--ease) both;
}
.saas-toast.out {
  animation: saasToastOut 0.25s ease forwards;
}
.saas-toast-icon {
  display: inline-flex;
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}
.saas-toast-content {
  flex: 1;
  min-width: 0;
}
.saas-toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-inverse);
  line-height: 1.4;
}
.saas-toast-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}
.saas-toast-close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s;
}
.saas-toast-close:hover { color: var(--color-text-inverse); }
.saas-toast-success .saas-toast-accent { color: var(--color-success); }
.saas-toast-error   .saas-toast-accent { color: var(--color-danger); }
.saas-toast-warning .saas-toast-accent { color: var(--color-warning); }
.saas-toast-info    .saas-toast-accent { color: var(--color-info); }

/* ── Divider ──────────────────────────────────────────────── */
.saas-divider {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 16px 0;
}

/* ── Pill/Category Filter ────────────────────────────────── */
.saas-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 400;

  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
}
.saas-pill:hover {

}
.saas-pill.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-text);
}

/* ── Service Row ──────────────────────────────────────────── */
.saas-service-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.1s;
}
.saas-service-row:hover {

}
.saas-service-row.locked {
  opacity: 0.6;

}
.saas-service-row.locked:hover {
  opacity: 0.8;

}
.saas-service-row-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;

  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.saas-service-row-content { flex: 1; min-width: 0; }
.saas-service-row-name {
  font-size: 13px;
  font-weight: 600;

}
.saas-service-row-desc {
  font-size: 11px;

  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saas-service-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.saas-services-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.saas-services-page-header {
  margin-bottom: 0;
}

.saas-services-page-header .saas-page-header-info {
  gap: 8px;
}

.saas-services-page-header .saas-page-header-icon {
  width: 42px;
  height: 42px;
  justify-content: center;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
}

.saas-services-header-summary {
  color: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.saas-services-stats {
  margin-bottom: 0;
}

/* ═════════════════════════════════════════════════════════════════════════════
   Panel Primitives — 共享服务面板组件样式
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── PanelCard ────────────────────────────────────────────────── */
.saas-panel-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.saas-panel-card-muted {
  background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}
.saas-panel-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;

}
.saas-panel-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-panel-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.saas-panel-card-body {
  padding: 12px 14px 14px;
}
.saas-panel-collapse-btn {
  background: none;
  border: none;

  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
}
.saas-panel-collapse-btn:hover {

}
.saas-panel-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* ── ConfigSection ──────────────────────────────────────────── */
.saas-config-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saas-config-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.saas-config-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saas-config-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;

  border-radius: var(--radius-md);

  transition: border-color 0.12s, background 0.12s;
}
.saas-config-row:hover {

}
.saas-config-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.saas-config-required {
  color: var(--color-warning);
  font-weight: 500;
}
.saas-config-help {
  font-size: 11px;

  line-height: 1.5;
  margin-top: 2px;
}
.saas-config-row-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
  max-width: 220px;
}
.saas-config-masked {
  font-family: var(--font-code);
  font-size: 12px;

  word-break: break-all;
}
.saas-config-plain {
  font-family: var(--font-code);
  font-size: 12px;

  word-break: break-all;
  text-align: right;
}
.saas-config-empty {
  font-size: 12px;

}
.saas-config-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.saas-panel-copy-btn,
.saas-panel-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  text-decoration: none;
}
.saas-panel-copy-btn {
  background: none;

}
.saas-panel-copy-btn:hover {

}
.saas-panel-link-btn {
  background: none;

}
.saas-panel-link-btn:hover {

}

/* ── DeployHistory ──────────────────────────────────────────── */
.saas-deploy-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.saas-deploy-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;

  border-radius: var(--radius-md);
}
.saas-deploy-trigger-label {
  font-size: 11px;
  font-weight: 500;

  white-space: nowrap;
}
.saas-deploy-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;

}
.saas-deploy-list {
  display: flex;
  flex-direction: column;
}
.saas-deploy-item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  cursor: default;
  border-radius: var(--radius-md);
  transition: background 0.1s;
}
.saas-deploy-item[role="button"] {
  cursor: pointer;
}
.saas-deploy-item[role="button"]:hover {

}
.saas-deploy-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
}
.saas-deploy-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.saas-deploy-line {
  width: 1px;
  flex: 1;

  margin-top: 3px;
}
.saas-deploy-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.saas-deploy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.saas-deploy-branch {
  font-size: 12px;
  font-weight: 600;

  font-family: var(--font-code);
}
.saas-deploy-time {
  font-size: 11px;

  margin-left: auto;
}
.saas-deploy-commit {
  font-size: 11px;

  font-family: var(--font-code);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-deploy-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.saas-deploy-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;

}
.saas-deploy-meta-link {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--color-info);
  text-decoration: none;
  font-weight: 500;
}
.saas-deploy-meta-link:hover { text-decoration: underline; }
.saas-deploy-error {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-danger);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.saas-deploy-show-more {
  background: none;
  border: none;
  font-size: 11px;

  cursor: pointer;
  text-align: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}
.saas-deploy-show-more:hover {

}

/* ── StatsGrid ─────────────────────────────────────────────── */
.saas-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.saas-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;

  border-radius: var(--radius-md);
  text-align: center;
}
.saas-stat-icon {
  font-size: 14px;

}
.saas-stat-value {
  font-size: 15px;
  font-weight: 700;

}

/* ── ActionBar ──────────────────────────────────────────────── */
.saas-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── ProviderOperations ────────────────────────────────────── */
.saas-provider-ops {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saas-provider-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.saas-provider-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;

  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;

  text-decoration: none;

  transition: all 0.12s;
}
.saas-provider-link:hover {

}
.saas-provider-build-hook {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.saas-provider-build-hook-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-provider-hook-value {
  font-family: var(--font-code);
  font-size: 11px;

  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── HealthCheckList ───────────────────────────────────────── */
.saas-health-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.saas-health-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;

  border-radius: var(--radius-md);

}
.saas-health-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-health-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.saas-health-status-text {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}
.saas-health-detail {
  font-size: 11px;
  color: var(--color-danger);
  line-height: 1.5;
  padding-left: 20px;
}
.saas-health-action {

  font-style: italic;
}
.saas-health-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 500;

}
.saas-health-expand-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--color-danger);
  cursor: pointer;
  text-decoration: underline;
}

/* ── Installed Service Page ─────────────────────────────── */
.saas-installed-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.saas-installed-panel-wrap {
  /* Panels fill the full content area */
}

/* ── Page Header ─────────────────────────────────────── */
/* ── Canonical page header ────────────────────────────────────
   Single source of truth for page headers. `.saas-page-header` is the legacy
   alias used by older workspace pages; `.saas-runtime-page-header` is what
   SaasPageShell renders. Both must resolve to the same geometry so legacy and
   migrated pages look identical. Any override of either belongs in this block,
   not in a later "finishing layer". */
/* Page-level container used by BundleDetailPage / InvoicesPage /
   ServiceDetailPage as their outermost element. It was referenced but never
   defined, so those pages had no width constraint or vertical rhythm. */
.saas-page {
  width: 100%;
  min-width: 0;
}
.saas-page-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.saas-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.saas-page-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.saas-page-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.saas-breadcrumb {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}
.saas-breadcrumb:hover { color: var(--color-text-link); }
.saas-breadcrumb-sep {
  color: var(--color-text-muted);
  font-size: 13px;
}
.saas-breadcrumb-current {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
}
.saas-page-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.saas-page-header-icon {
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: var(--color-brand);
}
.saas-page-header-desc {
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0;
}
.saas-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.saas-page-header-site {
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-code);
}

.saas-workspace-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-weight: 500;
  font-family: var(--font-body);
}

/* ── Panel Loading / Error ────────────────────────────── */
.saas-panel-loading,
.saas-panel-error {
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border-default);
}
.saas-panel-error { border-color: var(--color-danger); }

/* ── Status Dot ───────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-ok { background: var(--color-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 20%, transparent); }
.status-dot-warn { background: var(--color-warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 20%, transparent); }
.status-dot-err { background: var(--color-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 20%, transparent); }
.status-dot-neutral { background: var(--color-text-muted); }

/* ── Cloudflare Panel Styles ──────────────────────────── */
.cf-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hero card */
.cf-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  border: 1.5px solid;
}

/* Config strip */
.cf-config-strip {
  display: flex;
  align-items: center;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  gap: 0;
  overflow-x: auto;
}

/* Actions row */
.cf-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Result block */
.cf-result-block {

  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Project grid */
.cf-section       { display: flex; flex-direction: column; gap: 10px; }

/* Health check list */
.cf-check-list { display: flex; flex-direction: column; gap: 6px; }

/* ── Database Panel ──────────────────────────────────── */
.db-panel { display: flex; flex-direction: column; gap: 16px; }

/* ── Storage Panel ───────────────────────────────────── */
.st-panel { display: flex; flex-direction: column; gap: 16px; }
.st-stat-label   { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.st-section       { display: flex; flex-direction: column; gap: 8px; }

/* ── Legacy installed styles (kept for panel compatibility) ── */
.saas-installed-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.saas-installed-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.saas-installed-meta-item {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  min-height: 82px;
}
.saas-installed-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
}
.saas-installed-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.saas-installed-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.saas-installed-detail-list,
.saas-installed-config-list,
.saas-installed-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saas-installed-detail-item,
.saas-installed-config-item,
.saas-installed-project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);

}
.saas-installed-config-value {
  font-family: var(--font-code);
  font-size: 11px;

  word-break: break-all;
  text-align: right;
}
.saas-installed-output-card,
.saas-installed-tip-block,
.saas-installed-panel {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--color-bg-primary);
}
.saas-installed-panel-muted {
  background: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}
.saas-installed-tip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-default);
  font-size: 12px;
  line-height: 1.7;

}
.saas-installed-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.saas-installed-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.saas-installed-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.saas-installed-project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saas-installed-json {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.7;

}
.saas-installed-inline-code {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);

  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.6;
  word-break: break-all;
}
.saas-installed-empty-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Plan Card ────────────────────────────────────────────── */
.saas-plan-card {
  position: relative;
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.saas-plan-card:hover {

  box-shadow: var(--shadow-md);
}
.saas-plan-card.current {

}
.saas-plan-price {
  font-size: 32px;
  font-weight: 800;

  letter-spacing: -0.04em;
  line-height: 1;
}
.saas-plan-price-label {
  font-size: 12px;

  font-weight: 400;
}
.saas-plan-tag {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.1em;
  border-radius: 0 var(--radius-lg) 0 var(--radius-md);
  text-transform: uppercase;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
.saas-root ::-webkit-scrollbar { width: 4px; height: 4px; }
.saas-root ::-webkit-scrollbar-track { background: transparent; }
.saas-root ::-webkit-scrollbar-thumb {

  border-radius: 999px;
}

/* ── Focus ─────────────────────────────────────────────────── */
.saas-root :focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ── Layout (core shell — sidebar via .saas-sidebar) ─────────────────── */
.saas-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.saas-main {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg-secondary);
}
.saas-page-content {
  width: 100%;
  padding: 32px clamp(24px, 4vw, 48px) 56px;
  max-width: 1320px;
}

/* ── Expert management surface ─────────────────────────────── */
.saas-experts-page {
  min-width: 0;
}

.saas-experts-header {
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border-default);
}

.saas-experts-header .saas-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.saas-experts-header .saas-body-sm {
  max-width: 560px;
  color: var(--color-text-secondary) !important;
  line-height: 1.6;
}

.saas-experts-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saas-experts-header-stat {
  display: flex;
  min-width: 64px;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.saas-experts-header-stat strong {
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1;
}

.saas-experts-header-stat span {
  color: var(--color-text-muted);
  font-size: 10px;
}

.saas-expert-grid {
  align-items: stretch;
}

.saas-expert-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-xs);
}

.saas-expert-card:hover {
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.saas-expert-card-run-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--color-text-muted);
  font-size: 10px;
}

.saas-run-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.saas-run-status.is-amber { color: var(--color-warning-strong); background: var(--color-warning-subtle); }
.saas-run-status.is-blue { color: var(--color-info-strong); background: var(--color-info-subtle); }
.saas-run-status.is-green { color: var(--color-success-strong); background: var(--color-success-subtle); }
.saas-run-status.is-red { color: var(--color-danger-strong); background: var(--color-danger-subtle); }
.saas-run-status.is-neutral { color: var(--color-text-muted); background: var(--color-bg-secondary); }

.saas-spin-icon {
  animation: saas-expert-spin 1s linear infinite;
}

@keyframes saas-expert-spin {
  to { transform: rotate(360deg); }
}

.saas-expert-card-stripe {
  height: 3px !important;
}

.saas-expert-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.saas-expert-card-body > div:last-child {
  margin-top: auto !important;
  padding-top: 12px;
}

.saas-expert-empty {
  min-height: 360px;
  border: 1px dashed var(--color-brand-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand-soft) 30%, var(--color-bg-primary));
}

.saas-expert-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
  background: var(--color-brand-soft);
}

.saas-expert-empty-title {
  font-family: var(--font-display);
  font-size: 18px !important;
  letter-spacing: -0.02em;
}

.saas-expert-empty-desc {
  color: var(--color-text-secondary) !important;
}

.saas-expert-modal-backdrop,
.saas-expert-confirm-backdrop {
  padding: 20px;
  background: var(--overlay-bg) !important;
  backdrop-filter: blur(3px);
}

.saas-expert-modal,
.saas-expert-confirm {
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary) !important;
}

.saas-expert-modal {
  width: min(760px, calc(100vw - 40px)) !important;
  max-height: min(880px, calc(100vh - 40px)) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

.saas-expert-modal-form {
  scrollbar-width: thin;
  background: var(--color-bg-primary);
}

.saas-expert-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.saas-expert-step {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.saas-expert-step.is-active {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xs);
}

.saas-expert-step.is-complete { color: var(--color-brand); }

.saas-expert-step-number {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.saas-expert-step > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.saas-expert-step strong { font-size: 11px; }
.saas-expert-step small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-expert-launch-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--color-brand) 24%, var(--color-border-muted));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand-soft) 42%, var(--color-bg-primary));
}

.saas-expert-launch-summary-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--color-brand);
  background: var(--color-bg-primary);
}

.saas-expert-launch-summary div:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saas-expert-launch-summary strong { color: var(--color-text-primary); font-size: 13px; }
.saas-expert-launch-summary span { color: var(--color-text-secondary); font-size: 11px; line-height: 1.5; }

.saas-expert-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.saas-expert-review-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.saas-expert-review-grid span { color: var(--color-text-muted); font-size: 10px; }
.saas-expert-review-grid strong { color: var(--color-text-primary); font-size: 13px; }

.saas-expert-modal-header,
.saas-expert-modal-footer {
  background: var(--color-bg-primary) !important;
  border-color: var(--color-border-muted) !important;
}

.saas-expert-form-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.saas-expert-form-section > div:first-child {
  color: var(--color-text-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

.saas-expert-modal-form .saas-input {
  background: var(--color-bg-secondary);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
}

.saas-expert-modal-form .saas-input:focus {
  background: var(--color-bg-primary);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.saas-expert-model-options {
  gap: 2px !important;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.saas-expert-model-option {
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
}

.saas-expert-model-option[style*="var(--color-info-subtle)"] {
  background: var(--color-bg-primary) !important;
  box-shadow: var(--shadow-xs);
}

.saas-expert-appearance-grid {
  gap: 18px !important;
  align-items: start;
}

.saas-expert-icon-grid {
  gap: 4px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-bg-secondary) !important;
}

.saas-expert-icon-option {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.saas-expert-icon-option:hover {
  background: var(--color-bg-primary) !important;
}

.saas-expert-icon-option[style*="var(--color-info-subtle)"] {
  background: var(--color-bg-primary) !important;
  box-shadow: inset 0 0 0 1.5px var(--color-brand) !important;
}

.saas-expert-color-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px;
  border-radius: var(--radius-md) !important;
  border: 0;
  background: var(--color-bg-secondary);
}

.saas-expert-color-preview-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--expert-color);
}

.saas-expert-color-preview-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.saas-expert-color-preview-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-expert-color-preview-copy span {
  color: var(--color-text-muted);
  font-size: 10px;
}

.saas-expert-tool-group {
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-muted) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.saas-expert-tool-group:last-child {
  border-bottom: 0 !important;
}

.saas-expert-tool-group-header {
  padding: 8px 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

.saas-expert-tool-group-items {
  padding: 0 0 12px !important;
}

.saas-expert-form-toggles {
  border-top-color: var(--color-border-muted) !important;
}

.saas-expert-modal-form [style*="p-gray-700"],
.saas-expert-modal-form [style*="p-gray-800"],
.saas-expert-modal-form [style*="p-gray-600"],
.saas-expert-modal-form [style*="p-gray-400"],
.saas-expert-confirm [style*="p-gray"] {
  color: var(--color-text-secondary) !important;
}

.saas-expert-modal-form [style*="p-gray-200"],
.saas-expert-modal-form [style*="p-gray-100"] {
  border-color: var(--color-border-default) !important;
}

.saas-expert-modal-form [style*="p-blue-500"],
.saas-expert-modal-form [style*="p-blue-400"] {
  border-color: var(--color-brand) !important;
  outline-color: var(--color-brand) !important;
}

.saas-expert-run-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
}

.saas-expert-run-drawer {
  display: flex;
  width: min(620px, 100vw);
  height: 100%;
  flex-direction: column;
  background: var(--color-bg-primary);
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
  animation: saas-expert-drawer-in .28s cubic-bezier(.2, .8, .2, 1);
}

@keyframes saas-expert-drawer-in {
  from { transform: translateX(28px); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}

.saas-expert-run-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border-muted);
}

.saas-expert-run-title { display: flex; align-items: center; gap: 10px; }
.saas-expert-run-title > div:last-child { display: flex; flex-direction: column; gap: 3px; }
.saas-expert-run-title strong { color: var(--color-text-primary); font-size: 14px; }
.saas-expert-run-title span { color: var(--color-text-muted); font-size: 10px; }

.saas-expert-run-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: white;
}

.saas-icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--color-border-muted);
  border-radius: 50%;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  cursor: pointer;
}

.saas-expert-run-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding: 24px 22px 40px;
}

.saas-expert-run-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.saas-kicker {
  color: var(--color-brand);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.saas-expert-run-intro h2 {
  margin: 6px 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: -.03em;
}

.saas-expert-run-intro p {
  max-width: 440px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.saas-expert-run-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}

.saas-expert-run-form > label { color: var(--color-text-primary); font-size: 12px; font-weight: 700; }

.saas-expert-run-form textarea {
  width: 100%;
  min-height: 126px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  outline: none;
}

.saas-expert-run-form textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.saas-expert-run-tool-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.saas-expert-run-tool-row > div {
  display: flex;
  min-width: 140px;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}

.saas-expert-run-tool-row strong { color: var(--color-text-primary); font-size: 11px; }
.saas-expert-run-tool-row span { color: var(--color-text-muted); font-size: 10px; }

.saas-run-tool-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--color-brand-border);
  border-radius: 999px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  font-size: 10px;
  cursor: pointer;
}

.saas-run-tool-option input { accent-color: var(--color-brand); }
.saas-run-no-tools { padding: 6px 0; }
.saas-run-submit { align-self: flex-end; margin-top: 4px; }

.saas-inline-error,
.saas-run-failure {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  color: var(--color-danger-strong);
  background: var(--color-danger-subtle);
  font-size: 11px;
  line-height: 1.5;
}

.saas-expert-run-result { display: flex; flex-direction: column; gap: 13px; padding-top: 4px; }
.saas-expert-run-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.saas-expert-run-section-heading h3 { margin: 5px 0 0; color: var(--color-text-primary); font-size: 15px; }
.saas-run-id { color: var(--color-text-muted); font-family: var(--font-code); font-size: 10px; }

.saas-run-output {
  white-space: pre-wrap;
  padding: 14px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  font-size: 12px;
  line-height: 1.7;
}

.saas-run-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  border-radius: var(--radius-md);
  color: var(--color-brand);
  background: var(--color-brand-soft);
  font-size: 12px;
}

.saas-run-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.saas-run-meta span { padding: 4px 7px; border-radius: 5px; color: var(--color-text-secondary); background: var(--color-bg-secondary); font-size: 10px; }
.saas-run-meta span.is-success { color: var(--color-success-strong); background: var(--color-success-subtle); }
.saas-run-meta span.is-failure { color: var(--color-danger-strong); background: var(--color-danger-subtle); }

.saas-run-timeline { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }
.saas-run-timeline-item { display: flex; align-items: flex-start; gap: 9px; }
.saas-run-event-dot { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--color-text-muted); }
.saas-run-event-dot.is-assistant { background: var(--color-success-strong); }
.saas-run-event-dot.is-error { background: var(--color-danger-strong); }
.saas-run-event-dot.is-tool { background: var(--color-warning-strong); }
.saas-run-timeline-item div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.saas-run-timeline-item strong { color: var(--color-text-secondary); font-size: 11px; font-weight: 600; }
.saas-run-timeline-item small { color: var(--color-text-muted); font-size: 9px; }

@media (max-width: 700px) {
  .saas-page-content:has(> .saas-experts-page) {
    padding: 24px 18px 40px;
  }

  .saas-experts-header {
    align-items: stretch !important;
    flex-direction: column;
    gap: 14px;
  }

  .saas-experts-header > .saas-btn {
    align-self: flex-start;
  }

  .saas-experts-header-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .saas-experts-header-actions .saas-btn {
    flex: 1 0 100%;
  }

  .saas-expert-grid {
    grid-template-columns: 1fr !important;
  }

  .saas-expert-modal-backdrop,
  .saas-expert-confirm-backdrop {
    align-items: flex-end !important;
    padding: 0;
  }

  .saas-expert-modal {
    width: 100% !important;
    max-height: calc(100vh - 12px) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  }

  .saas-expert-modal-form {
    padding: 18px !important;
  }

  .saas-expert-modal-form > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .saas-expert-modal-form label[style*="flex: 1"] {
    min-width: 0;
  }

  .saas-expert-stepper {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    overflow-x: auto;
  }

  .saas-expert-step {
    padding-inline: 7px;
  }

  .saas-expert-step small {
    display: none;
  }

  .saas-expert-run-drawer {
    width: 100%;
  }

  .saas-expert-run-body {
    padding: 20px 16px 32px;
  }

  .saas-expert-confirm {
    width: min(400px, calc(100vw - 28px)) !important;
  }
}

/* ── First-time onboarding CTA ─────────────────────────────────── */
.saas-onboarding-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
  background: linear-gradient(135deg, var(--color-brand-soft) 0%, var(--color-info-subtle) 100%);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
  gap: 12px;
}
.saas-onboarding-art {
  width: 320px;
  max-width: 100%;
  flex: 0 0 auto;
  margin-bottom: 4px;
}
.saas-onboarding-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.saas-onboarding-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 360px;
}

.dp-success-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border-default);
}
.dp-success-art { width: 150px; flex: 0 0 150px; }
.dp-success-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.dp-success-desc { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); }

/* ── Dashboard layout ─────────────────────────────────────────── */
.saas-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.saas-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
}

.saas-dashboard-left,
.saas-dashboard-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Section header */
.saas-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Usage grid */
.saas-usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.saas-usage-label {
  font-size: 12px;

  margin-bottom: 6px;
}

/* Event tag */
.saas-event-tag {
  font-family: var(--font-code);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--color-border-default);

  border-radius: var(--radius-sm);
}

/* Quick links */
.saas-quick-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saas-quick-link {
  display: block;
  padding: 10px 12px;
  font-size: 13px;

  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.1s;
}
.saas-quick-link:hover {

}

/* Activated list */
.saas-activated-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saas-activated-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Top services */
.saas-top-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saas-top-service-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-top-rank {
  font-family: var(--font-code);
  font-size: 10px;

  width: 20px;
  flex-shrink: 0;
}

/* Sub info */
.saas-sub-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saas-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.saas-sub-footer {
  padding-top: 10px;
  border-top: 1px solid var(--color-border-default);
}
.saas-sub-link {
  font-size: 12px;

  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.1s;
}

/* ── Page header ─────────────────────────────────────────────── */
/* NOTE: `.saas-page-header` is defined once at the canonical header block
   (search "Canonical page header"). It previously had a second, conflicting
   definition here (no gap / no wrap / different margin) which made the final
   appearance depend on cascade order. Do not re-declare it here. */

/* ── Plan grid ──────────────────────────────────────────────── */
.saas-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.saas-plan-comparison-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  color: var(--color-text-primary);
  font-size: 13px;
}

.saas-plan-comparison-table th,
.saas-plan-comparison-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--color-border-default);
  text-align: left;
  vertical-align: middle;
}

.saas-plan-comparison-table th:not(:first-child),
.saas-plan-comparison-table td:not(:first-child) {
  text-align: center;
}

.saas-plan-comparison-table th {
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.saas-plan-comparison-table td:first-child {
  width: 34%;
}

.saas-plan-comparison-table td:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.saas-plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px;
}
.saas-plan-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saas-plan-feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.saas-plan-feature-val {
  font-family: var(--font-code);
  font-size: 11px;

}

/* ── Usage cards ─────────────────────────────────────────────── */
.saas-usage-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.saas-plan-card--current {

}
.saas-plan-card--popular {

  background: linear-gradient(to bottom, var(--color-bg-secondary), var(--color-bg-primary));
}
.saas-plan-card--test {
  border-color: var(--color-info);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-info) 8%, transparent), var(--color-bg-primary) 42%);
}
.saas-plan-test-tag {
  background: var(--color-info);
}
.saas-plan-popular-tag {
  position: absolute;
  top: -1px;
  left: 16px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.1em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-transform: uppercase;
}
.saas-plan-header { margin-bottom: 16px; }
.saas-plan-name {
  font-size: 13px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.saas-plan-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }

.saas-plan-quota { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); }
.saas-plan-quota-item { display: flex; justify-content: space-between; font-size: 13px; }

.saas-plan-features { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }

.saas-btn-full { width: 100%; }

@media (max-width: 900px) {
  .saas-plan-grid { grid-template-columns: repeat(2, 1fr); }
  .saas-usage-cards { grid-template-columns: repeat(3, 1fr); }
  .saas-installed-meta-grid,
  .saas-installed-main-grid,
  .saas-installed-panel-grid,
  .saas-installed-provider-grid {
    grid-template-columns: 1fr;
  }
  .saas-demo-bar,
  .saas-demo-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Scope list ─────────────────────────────────────────────── */
.saas-scope-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saas-scope-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.1s;
}

/* ── Key display ────────────────────────────────────────────── */
.saas-created-key-header {
  font-size: 12px;
  font-weight: 600;

  margin-bottom: 6px;
}
.saas-created-key-warning {
  font-size: 11px;
  color: var(--color-warning);
  margin-bottom: 12px;
}
.saas-key-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-key-code {
  flex: 1;
  font-family: var(--font-code);
  font-size: 10px;

  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  word-break: break-all;
  line-height: 1.5;
}
.saas-key-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.saas-key-code-sm {
  font-family: var(--font-code);
  font-size: 10px;

  border: 1px solid var(--color-border-default);
  padding: 2px 6px;

  border-radius: var(--radius-sm);
}

/* ── Usage guide ────────────────────────────────────────────── */
.saas-usage-guide {
  padding: 14px 16px;

  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: 12px;

  line-height: 1.7;
  margin-bottom: 24px;
}

.saas-usage-code {
  font-family: var(--font-code);
  font-size: 11px;

  padding: 1px 5px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
}

/* ── Code block (legacy compat) ────────────────────────────── */
.saas-code-block {

  padding: 12px;
  font-family: var(--font-code);
  font-size: 11px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  word-break: break-all;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .saas-layout {
    flex-direction: column;
  }
  .saas-sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--color-border-default);
  }
  .saas-sidebar-nav {
    flex-direction: row;
    padding: 8px;
    overflow-x: auto;
  }
  .saas-sidebar-nav .saas-nav-link {
    flex-shrink: 0;
  }
  .saas-sidebar-footer {
    display: none;
  }
  .saas-page-content {
    padding: 16px;
  }
  .saas-stat-value { font-size: 20px; }
  .saas-title-xl   { font-size: 17px; }
  .saas-stat-row   { grid-template-columns: repeat(2, 1fr); }
  .saas-dashboard-grid { grid-template-columns: 1fr; }
  .saas-scene-grid { grid-template-columns: repeat(2, 1fr); }
  .saas-usage-grid { grid-template-columns: 1fr; }
  .saas-installed-card-header,
  .saas-installed-config-item,
  .saas-installed-project-item,
  .saas-installed-detail-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .saas-installed-config-value {
    text-align: left;
  }
}

/* ── Extensible application shell ───────────────────────────── */
.saas-shell-header {
  min-height: var(--shell-header-height);
  padding: 0 var(--shell-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg-secondary) 88%, transparent);
  border-bottom: 1px solid var(--color-border-default);
  backdrop-filter: blur(16px);
}
.saas-shell-header-main,
.saas-shell-header-center,
.saas-shell-header-actions,
.saas-shell-breadcrumbs {
  display: flex;
  align-items: center;
}
.saas-shell-header-main { min-width: 0; gap: 14px; }
.saas-shell-header-center {
  flex: 1;
  min-width: 0;
  justify-content: center;
  container: saas-header-center / inline-size;
}
.saas-shell-header-actions { gap: 6px; }
.saas-app-switcher {
  position: relative;
  z-index: 2;
}
.saas-app-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 168px;
  padding: 5px 8px 5px 6px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.saas-app-switcher-trigger:hover,
.saas-app-switcher.is-open .saas-app-switcher-trigger {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
}
.saas-app-switcher-trigger > svg {
  color: var(--color-text-muted);
  transform: rotate(90deg);
  transition: transform var(--duration-fast);
}
.saas-app-switcher.is-open .saas-app-switcher-trigger > svg {
  transform: rotate(-90deg);
}
.saas-app-switcher-icon,
.saas-app-switcher-option-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
}
.saas-app-switcher-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.saas-app-switcher-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.saas-app-switcher-copy small {
  color: var(--color-text-muted);
  font-size: 9px;
  line-height: 1.1;
}
.saas-app-switcher-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-app-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 286px;
  padding: 8px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.saas-app-switcher-heading {
  padding: 5px 9px 8px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.saas-app-switcher-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 9px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.saas-app-switcher-option:hover,
.saas-app-switcher-option.active {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}
.saas-app-switcher-option-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.saas-app-switcher-option-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.saas-app-switcher-option-copy strong {
  font-size: 12px;
  font-weight: 650;
}
.saas-app-switcher-option-copy small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-app-switcher-check {
  color: var(--color-brand);
  font-size: 10px;
  font-weight: 700;
}
.saas-shell-icon-button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.saas-shell-icon-button:hover,
.saas-shell-icon-button.active {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
}
.saas-shell-breadcrumbs {
  min-width: 0;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}
.saas-shell-breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saas-shell-breadcrumbs a:hover { color: var(--color-text-primary); }
.saas-shell-eyebrow {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.saas-shell-breadcrumb-separator { color: var(--color-border-strong); }
.saas-shell-breadcrumbs .current {
  color: var(--color-text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saas-sidebar { transition: box-shadow var(--duration-normal) var(--ease); }
.saas-sidebar.collapsed { width: 72px; }
.saas-sidebar.collapsed .saas-sidebar-logo {
  justify-content: center;
  padding-inline: 0;
}
.saas-sidebar.collapsed .saas-sidebar-logo-trigger {
  justify-content: center;
  width: 42px;
  padding-inline: 0;
}
.saas-sidebar-brand,
.saas-sidebar-user-copy,
.saas-sidebar-version,
.saas-sidebar-template,
.saas-installed-nav-text {
  min-width: 0;
}
.saas-sidebar.collapsed .saas-sidebar-brand,
.saas-sidebar.collapsed .saas-sidebar-user-copy,
.saas-sidebar.collapsed .saas-sidebar-version,
.saas-sidebar.collapsed .saas-sidebar-template,
.saas-sidebar.collapsed .saas-installed-nav-label,
.saas-sidebar.collapsed .saas-nav-group-label > span:first-child {
  display: none;
}
.saas-sidebar.collapsed .saas-sidebar-context-bar {
  padding: 10px 12px;
}
.saas-sidebar.collapsed .saas-sidebar-context-label,
.saas-sidebar.collapsed .saas-site-chip-name,
.saas-sidebar.collapsed .saas-site-chip-arrow,
.saas-sidebar.collapsed .saas-sidebar-context-copy {
  display: none;
}
.saas-sidebar.collapsed .saas-sidebar-context-readonly,
.saas-sidebar.collapsed .saas-sidebar-context-bar .saas-site-chip {
  justify-content: center;
  padding-inline: 0;
}
.saas-sidebar.collapsed .saas-sidebar-context-bar .saas-site-chip {
  min-height: 34px;
}
.saas-sidebar.collapsed .saas-nav-group-label {
  justify-content: center;
  padding-inline: 0;
}
.saas-sidebar.collapsed .saas-nav-link {
  justify-content: center;
  padding-inline: 0;
}
.saas-sidebar.collapsed .saas-nav-link-label { display: none; }
.saas-sidebar.collapsed .saas-nav-group { margin-bottom: 8px; }
.saas-sidebar.collapsed .saas-sidebar-footer-row,
.saas-sidebar.collapsed .saas-sidebar-user-row {
  justify-content: center;
}
.saas-sidebar.collapsed .saas-sidebar-footer-actions { flex-direction: column; }
.saas-sidebar-user-row,
.saas-sidebar-footer-row,
.saas-sidebar-footer-actions {
  display: flex;
  align-items: center;
}
.saas-sidebar-user-row { gap: 8px; margin-bottom: 10px; }
.saas-sidebar-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 11px;
  font-weight: 700;
}
.saas-sidebar-user-name {
  color: var(--color-text-primary);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-sidebar-user-plan,
.saas-sidebar-version,
.saas-sidebar-template {
  color: var(--color-text-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.saas-sidebar-footer-row { justify-content: space-between; gap: 8px; }
.saas-sidebar-footer-actions { gap: 4px; }
.saas-sidebar-context {
  margin-top: 10px;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.saas-sidebar-template {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--color-sidebar-border);
}
.saas-sidebar-template strong {
  color: var(--color-sidebar-text-2);
  font-weight: 600;
}
/* Root container for the sidebar menu tree. `.saas-nav-tree-node` / `-row`
   existed but the wrapper did not, so the tree had no flex/gap context. */
.saas-nav-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.saas-nav-tree-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
.saas-nav-tree-row > .saas-nav-link,
.saas-nav-parent-button {
  flex: 1;
  min-width: 0;
}
.saas-nav-parent-button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  text-align: left;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.saas-nav-parent-button:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-text-1);
}
.saas-nav-parent-button.active {
  background: var(--color-sidebar-active);
  color: var(--color-sidebar-text-1);
}
.saas-nav-expand-button {
  width: 24px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: -30px;
  color: var(--color-sidebar-text-4);
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1;
  padding: 0;
  font: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.saas-nav-expand-button.expanded svg { transform: rotate(90deg); }
.saas-nav-expand-button svg { transition: transform var(--duration-fast) var(--ease); }
.saas-nav-children {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 0;
}
.saas-nav-depth-0 { font-size: 13px; line-height: 1.4; }
.saas-nav-depth-1 { font-size: 13px; line-height: 1.4; }
.saas-nav-depth-2 { font-size: 12px; line-height: 1.4; }
.saas-nav-depth-3 { font-size: 12px; line-height: 1.4; opacity: 0.9; }
.saas-nav-tree-node.has-children > .saas-nav-tree-row .saas-nav-parent-button {
  font-weight: 500;
}
.saas-nav-tree-node.has-children > .saas-nav-tree-row .saas-nav-parent-button.active {
  color: var(--color-sidebar-text-1);
}
.saas-nav-tree-node .saas-nav-link.active { box-shadow: inset 2px 0 0 var(--color-brand); }
.saas-nav-tree-node .saas-nav-link-label {
  min-width: 0;
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-nav-link.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.saas-nav-link.disabled:hover { background: transparent; }
.saas-nav-badge {
  min-width: 18px;
  max-width: 52px;
  margin-left: auto;
  padding: 1px 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px;
  color: var(--color-sidebar-text-3);
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Generated app navigation uses the shell's same hierarchy, not a second menu style. */
.saas-nav-generated-group .saas-nav-items {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--color-sidebar-border);
}
.saas-nav-generated-group .saas-nav-items > .saas-nav-tree-node > .saas-nav-tree-row > .saas-nav-link,
.saas-nav-generated-group .saas-nav-items > .saas-nav-tree-node > .saas-nav-tree-row > .saas-nav-parent-button {
  color: var(--color-sidebar-text-2);
}
.saas-nav-generated-group .saas-nav-items > .saas-nav-tree-node > .saas-nav-tree-row > .saas-nav-link.active,
.saas-nav-generated-group .saas-nav-items > .saas-nav-tree-node > .saas-nav-tree-row > .saas-nav-parent-button.active {
  color: var(--color-sidebar-text-1);
}
.saas-sidebar.collapsed .saas-nav-generated-group .saas-nav-group-label {
  justify-content: center;
  padding-inline: 0;
}
.saas-sidebar.collapsed .saas-nav-generated-group .saas-nav-group-label-copy {
  display: inline-flex;
}
.saas-sidebar.collapsed .saas-nav-generated-group .saas-nav-collapse-icon {
  display: none;
}
.saas-notification-center { position: relative; }
.saas-notification-count-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-bg-secondary);
  border-radius: 999px;
  background: var(--color-danger-strong);
  color: white;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

/* ── Runtime page primitives ─────────────────────────────── */
.saas-runtime-page {
  width: 100%;
  min-width: 0;
}
.saas-runtime-page-narrow { max-width: 920px; }
.saas-runtime-page-wide { max-width: 1600px; }
/* Canonical runtime header — geometry must match `.saas-page-header` above so
   SaasPageShell pages and legacy pages share one visual rhythm. Later "finishing
   layer" blocks must tune rhythm only through the shared tokens, never by
   re-declaring gap/margin-bottom here. */
.saas-runtime-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.saas-runtime-page-header-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saas-runtime-eyebrow {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.saas-runtime-page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.saas-runtime-page-title .saas-title-xl {
  min-width: 0;
  margin: 0;
}
.saas-runtime-page-description {
  max-width: 680px;
  margin: 0;
}
.saas-runtime-page-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.saas-runtime-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 20px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-primary) 88%, transparent);
}
.saas-runtime-toolbar-start,
.saas-runtime-toolbar-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.saas-runtime-toolbar-start { flex: 1; }
.saas-table-toolbar-summary {
  color: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.saas-runtime-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.saas-runtime-section-header .saas-title-md,
.saas-runtime-section-header .saas-body-sm { margin: 0; }
.saas-runtime-section-header .saas-body-sm { margin-top: 4px; }
.saas-runtime-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.saas-notification-popover {
  position: absolute;
  top: 42px;
  right: 0;
  width: min(380px, calc(100vw - 32px));
  overflow: hidden;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-popover);
}
.saas-notification-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--color-border-default);
}
.saas-notification-popover-meta {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.saas-link-button,
.saas-notification-popover-footer {
  color: var(--color-brand);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.saas-notification-preview-item {
  width: 100%;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 11px 16px;
  text-align: left;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
  cursor: pointer;
}
.saas-notification-preview-item:hover { background: var(--color-bg-secondary); }
.saas-notification-preview-item.unread { color: var(--color-text-primary); }
.saas-notification-preview-dot {
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: transparent;
}
.saas-notification-preview-item.unread .saas-notification-preview-dot { background: var(--color-brand); }
.saas-notification-preview-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.saas-notification-preview-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-notification-preview-copy span {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-notification-preview-item time {
  color: var(--color-text-muted);
  font-size: 10px;
}
.saas-notification-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--color-text-muted);
  font-size: 11px;
}
/* Wrapper for the popover preview rows. Only the child classes existed, so the
   list itself had no max-height or scroll containment. */
.saas-notification-preview-list {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
}

/* ── Notification centre page (list view) ─────────────────────────
   NotificationsPage rendered `.saas-notification-list/item/dot/body/header/
   time/title/body-text/count/actions`, none of which were defined, so the whole
   page fell back to unstyled stacked divs. Mirrors the popover preview grid. */
.saas-notification-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.saas-notification-item {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
  color: var(--color-text-secondary);
  background: transparent;
  transition: background var(--duration-fast) var(--ease);
}
.saas-notification-item + .saas-notification-item {
  border-top: 1px solid var(--color-border-default);
}
.saas-notification-item:hover { background: var(--color-bg-secondary); }
.saas-notification-item.unread { color: var(--color-text-primary); }
.saas-notification-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: transparent;
  transition: opacity var(--duration-fast) var(--ease);
}
.saas-notification-item.unread .saas-notification-dot { background: var(--color-brand); }
.saas-notification-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.saas-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.saas-notification-time {
  color: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.saas-notification-title {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.saas-notification-item.read .saas-notification-title { font-weight: 500; }
.saas-notification-body-text {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.saas-notification-count {
  justify-self: start;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.saas-notification-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .saas-notification-item {
    grid-template-columns: 7px minmax(0, 1fr);
  }
  .saas-notification-actions {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 4px;
  }
}
.saas-notification-popover-footer {
  width: 100%;
  padding: 12px;
  background: color-mix(in srgb, var(--color-brand-soft) 45%, transparent);
}
.saas-route-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: 12px;
}
.saas-bootstrap-error {
  width: min(460px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
}
.saas-forbidden {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.saas-forbidden-card { width: min(520px, 100%); text-align: center; }
.saas-forbidden-code { margin-bottom: 8px; color: var(--color-danger); font-size: 13px; font-weight: 700; }
.saas-forbidden-card p { margin: 8px 0 18px; color: var(--color-text-secondary); }
.saas-forbidden-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.menu-settings-page { max-width: 1220px; }
.menu-settings-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.menu-settings-unsaved { color: var(--color-warning-strong); font-size: 10px; font-weight: 700; }
.menu-settings-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--color-brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.menu-settings-kicker span { width: 18px; height: 2px; background: currentColor; border-radius: 999px; }
.menu-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 16px; }
.menu-settings-controls { display: grid; gap: 16px; }
.menu-settings-card { padding: 20px; }
.menu-settings-card-heading,
.menu-settings-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.menu-settings-card-heading .saas-body-sm { max-width: 620px; margin-top: 5px; }
.menu-settings-version {
  padding: 4px 8px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  font-family: var(--font-code);
  font-size: 10px;
}
.menu-settings-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.menu-settings-template {
  min-height: 126px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  text-align: left;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease), border-color var(--duration-fast), background var(--duration-fast);
}
.menu-settings-template:hover { transform: translateY(-2px); border-color: var(--color-brand-border); }
.menu-settings-template.selected {
  color: var(--color-text-primary);
  background: var(--color-brand-soft);
  border-color: var(--color-brand-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 18%, transparent);
}
.menu-settings-template-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--color-brand);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.menu-settings-template strong { font-size: 12px; }
.menu-settings-template > span:last-child { color: var(--color-text-muted); font-size: 10px; line-height: 1.5; }
.menu-settings-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.menu-settings-option {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  background: var(--color-bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.menu-settings-option:hover { border-color: var(--color-border-default); }
.menu-settings-option.disabled { opacity: 0.65; }
.menu-settings-option input { accent-color: var(--color-brand); }
.menu-settings-option-copy { min-width: 0; display: grid; gap: 2px; }
.menu-settings-option-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-settings-option-copy code,
.menu-settings-preview-item code { color: var(--color-text-muted); font-family: var(--font-code); font-size: 9px; }
.menu-settings-option-state { margin-left: auto; color: var(--color-text-muted); font-size: 10px; white-space: nowrap; }
.menu-settings-switch { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-secondary); font-size: 11px; cursor: pointer; }
.menu-settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.menu-settings-switch span { width: 30px; height: 18px; position: relative; display: inline-block; background: var(--color-bg-tertiary); border-radius: 999px; }
.menu-settings-switch span::after {
  content: '';
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease);
}
.menu-settings-switch input:checked + span { background: var(--color-brand); }
.menu-settings-switch input:checked + span::after { transform: translateX(12px); }
.menu-settings-json {
  width: 100%;
  min-height: 280px;
  margin-top: 16px;
  resize: none;
  color: var(--color-text-primary);
  background: var(--color-bg-inverse);
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.65;
}
.menu-settings-json-error { margin-top: 6px; color: var(--color-danger-strong); font-size: 10px; }
.menu-settings-preview {
  position: sticky;
  top: 78px;
  padding: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-brand) 16%, transparent), transparent 42%), var(--color-bg-primary);
}
.menu-settings-preview-header { padding-bottom: 16px; border-bottom: 1px solid var(--color-border-default); }
.menu-settings-live-dot { display: inline-flex; align-items: center; gap: 5px; color: var(--color-success-strong); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; }
.menu-settings-live-dot::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.menu-settings-preview-shell { min-height: 300px; margin: 16px 0; padding: 14px 12px; background: color-mix(in srgb, var(--color-bg-secondary) 72%, transparent); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }
.menu-settings-preview-brand { display: flex; align-items: center; gap: 8px; padding: 0 4px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--color-border-default); color: var(--color-text-primary); font-size: 12px; }
.menu-settings-preview-brand span { width: 23px; height: 23px; display: grid; place-items: center; color: var(--color-brand); background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); border-radius: 6px; font-size: 10px; font-weight: 800; }
.menu-settings-preview-brand-mark { width: 23px; height: 23px; display: block; -o-object-fit: cover; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.menu-settings-preview-level { display: grid; gap: 3px; }
.menu-settings-preview-level-1,
.menu-settings-preview-level-2 { padding-left: 10px; border-left: 1px solid var(--color-border-default); }
.menu-settings-preview-item { min-height: 28px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: 11px; }
.menu-settings-preview-item > .menu-settings-preview-level { grid-column: 1 / -1; }
.menu-settings-preview-icon { color: var(--color-brand); }
.menu-settings-preview-note { display: flex; align-items: flex-start; gap: 8px; color: var(--color-text-muted); font-size: 10px; line-height: 1.5; }
.menu-settings-preview-note svg { flex: 0 0 auto; color: var(--color-brand); margin-top: 1px; }
.menu-settings-history { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border-default); }
.menu-settings-history-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.menu-settings-history-header .menu-settings-kicker { margin-bottom: 5px; }
.menu-settings-history-count { min-width: 22px; padding: 3px 6px; color: var(--color-brand); background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); border-radius: 999px; font-family: var(--font-code); font-size: 10px; text-align: center; }
.menu-settings-history-description { margin-top: 5px; font-size: 10px; line-height: 1.5; }
.menu-settings-history-list { display: grid; gap: 7px; margin-top: 12px; }
.menu-settings-history-item { position: relative; padding: 10px; background: var(--color-bg-secondary); border: 1px solid transparent; border-radius: var(--radius-md); }
.menu-settings-history-item.current { border-color: var(--color-brand-border); background: var(--color-brand-soft); }
.menu-settings-history-item-top { display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: 10px; }
.menu-settings-history-item-top strong { color: var(--color-text-primary); font-family: var(--font-code); }
.menu-settings-history-item-top em { margin-left: auto; color: var(--color-brand); font-style: normal; font-size: 9px; font-weight: 700; }
.menu-settings-history-item-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 5px; color: var(--color-text-muted); font-size: 9px; }
.menu-settings-history-item-meta span + span::before { content: '·'; margin-right: 8px; color: var(--color-border-default-strong); }
.menu-settings-rollback { width: 100%; margin-top: 8px; }
.menu-settings-history-empty { padding: 14px 4px 2px; color: var(--color-text-muted); font-size: 10px; line-height: 1.5; }
.menu-settings-empty { min-height: 520px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.menu-settings-empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 6px; color: var(--color-brand); background: var(--color-brand-soft); border: 1px solid var(--color-brand-border); border-radius: var(--radius-xl); }
.menu-settings-empty .saas-body-sm { max-width: 360px; }
.saas-sites-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.saas-sites-page-header {
  margin-bottom: 0;
}
.saas-sites-page-header .saas-page-header-info {
  gap: 8px;
}
.saas-sites-page-header .saas-page-header-icon {
  width: 42px;
  height: 42px;
  justify-content: center;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
}
.saas-sites-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
  padding: 14px 18px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.saas-sites-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 124px;
}
.saas-sites-summary-item > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.saas-sites-summary-item strong {
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.saas-sites-summary-item small {
  color: var(--color-text-muted);
  font-size: 11px;
}
.saas-sites-summary-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.saas-sites-summary-icon.success {
  color: var(--color-success-strong);
  background: var(--color-success-subtle);
}
.saas-sites-summary-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border-default);
}
.saas-sites-summary-context {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin-left: auto;
  padding-left: 20px;
  border-left: 1px solid var(--color-border-default);
}
.saas-sites-summary-context span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.saas-sites-summary-context strong {
  max-width: 240px;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-site-create-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 18px 20px;
}
.saas-site-create-copy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.saas-site-create-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.saas-site-create-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 520px;
}
.saas-site-create-controls .saas-input { flex: 1; min-width: 0; }
.saas-site-create-controls .saas-styled-select-trigger { min-width: 128px; }
.saas-sites-list-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.saas-sites-list-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.saas-sites-list-header .saas-body-sm {
  margin-top: 4px;
}
.saas-sites-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}
.saas-site-grid {
  display: grid;
  gap: 10px;
}
.saas-site-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 15px 16px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.saas-site-type-select { min-width: 128px; }
.saas-site-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.saas-site-card.active {
  border-color: var(--color-brand-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 10%, transparent), var(--shadow-xs);
}
.saas-site-card-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.saas-site-card-main { min-width: 0; }
.saas-site-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.saas-site-card-title {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-site-card-domain {
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-site-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 10px;
}
.saas-site-card-meta-divider {
  width: 3px;
  height: 3px;
  background: var(--color-text-disabled);
  border-radius: 50%;
}
.saas-site-current-tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 650;
}
.saas-site-empty-card,
.saas-site-state-card {
  min-height: 240px;
}
.saas-site-state-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
}
.saas-site-state-card > div {
  min-width: 0;
}
.saas-site-state-card strong {
  color: var(--color-text-primary);
  font-size: 13px;
}
.saas-site-state-card p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.saas-site-state-card .saas-btn {
  margin-left: auto;
}
.saas-site-state-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.saas-site-state-icon.error {
  color: var(--color-danger-strong);
  background: var(--color-danger-subtle);
}
.saas-site-card-skeleton {
  pointer-events: none;
}
.saas-site-card-skeleton-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
}
.saas-site-card-skeleton-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.saas-site-card-skeleton-title {
  width: 120px;
  height: 13px;
}
.saas-site-card-skeleton-line {
  width: 180px;
  height: 10px;
}
.saas-site-card-skeleton-control {
  width: 96px;
  height: 28px;
  border-radius: var(--radius-sm);
}
.saas-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.saas-site-card-status {
  color: var(--color-success-strong);
  font-size: 11px;
  white-space: nowrap;
}

/* ── Deployment workspace ─────────────────────────────────────────────── */
.saas-deployments-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.saas-deployments-header {
  margin-bottom: 0;
}
.saas-deployments-header .saas-page-header-info {
  gap: 8px;
}
.saas-deployments-header .saas-page-header-icon {
  width: 42px;
  height: 42px;
  justify-content: center;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
}
.saas-deployments-live-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-info);
  font-size: 11px;
  font-weight: 600;
}
.saas-deployments-live-dot {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.saas-deployments-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.saas-deployments-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.saas-deployments-summary-item > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.saas-deployments-summary-item strong {
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.saas-deployments-summary-item small {
  color: var(--color-text-muted);
  font-size: 11px;
}
.saas-deployments-summary-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.saas-deployments-summary-icon.info {
  color: var(--color-info);
  background: var(--color-info-subtle);
}
.saas-deployments-summary-icon.success {
  color: var(--color-success-strong);
  background: var(--color-success-subtle);
}
.saas-deployments-summary-icon.danger {
  color: var(--color-danger-strong);
  background: var(--color-danger-subtle);
}
.saas-deployments-summary-divider {
  display: none;
}
.saas-deployments-content {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.saas-deployments-panel {
  min-width: 0;
  padding: 20px;
}
.saas-deployments-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-default);
}
.saas-deployments-panel-header .saas-body-sm {
  margin-top: 4px;
}
.saas-deployment-job-list,
.saas-deployment-order-list {
  display: flex;
  flex-direction: column;
}
.saas-deployment-job-card {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.saas-deployment-job-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.saas-deployment-job-card:first-child {
  padding-top: 18px;
}
.saas-deployment-job-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
/* Referenced by DeploymentsPage.jsx but never defined: the job card body and the
   detail notes block had no layout of their own. `.saas-deployment-job-main`
   is the flex column that stacks the heading, meta and actions. */
.saas-deployment-job-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.saas-deployment-job-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.saas-deployment-job-title-wrap {
  min-width: 0;
  flex: 1;
}
.saas-deployment-job-title-wrap h3 {
  margin: 1px 0 2px;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-deployment-job-title-wrap span {
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-deployment-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 13px 0 0 42px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.saas-deployment-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.saas-deployment-job-meta svg {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}
.saas-deployment-job-actions {
  margin: 12px 0 0 42px;
}
.saas-deployment-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.saas-deployment-detail-status {
  display: flex;
}
.saas-deployment-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
}
.saas-deployment-detail-notes {
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.saas-deployment-detail-grid dt {
  margin: 0 0 2px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.saas-deployment-detail-grid dd {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-primary);
  word-break: break-word;
}
.saas-deployment-detail-log-title {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.saas-deployment-detail-log pre {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.saas-api-key-never {
  color: var(--color-text-muted);
}
.saas-deployment-log {
  margin: 13px 0 0 42px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.saas-deployment-log summary {
  padding: 8px 10px;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.saas-deployment-log pre {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 0 10px 10px;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 10px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.saas-deployment-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.saas-deployment-order-row:last-child {
  border-bottom: 0;
}
.saas-deployment-order-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}
.saas-deployment-order-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.saas-deployment-order-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-deployment-order-copy span {
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-deployment-state-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
}
.saas-deployment-state-card > div {
  min-width: 0;
}
.saas-deployment-state-card strong {
  color: var(--color-text-primary);
  font-size: 13px;
}
.saas-deployment-state-card p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.saas-deployment-state-card .saas-btn {
  margin-left: auto;
}
.saas-deployment-state-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}
.saas-deployment-state-icon.error {
  color: var(--color-danger-strong);
  background: var(--color-danger-subtle);
}
.saas-deployments-skeleton {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
  gap: 16px;
}
.saas-deployment-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 220px;
  padding: 20px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.saas-deployment-skeleton-title {
  width: 40%;
  height: 18px;
  margin-bottom: 6px;
}
.saas-deployment-skeleton-title.short {
  width: 34%;
}
.saas-deployment-skeleton-line {
  width: 100%;
  height: 42px;
  border-radius: var(--radius-md);
}

@media (min-width: 769px) and (max-width: 1100px) {
  .saas-shell-header {
    gap: 10px;
    padding-inline: 16px;
  }
  .saas-shell-header-main {
    flex: 1 1 auto;
    gap: 8px;
  }
  .saas-shell-header-center {
    flex: 0 0 auto;
  }
  .saas-shell-header-actions {
    flex: 0 0 auto;
  }
  .saas-app-switcher-trigger {
    min-width: 36px;
    width: 36px;
    justify-content: center;
    padding-inline: 4px;
  }
  .saas-app-switcher-copy {
    display: none;
  }
  .saas-global-search-trigger {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .saas-global-search-trigger span,
  .saas-global-search-trigger kbd {
    display: none;
  }
  .saas-shell-breadcrumbs {
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .saas-shell-header {
    min-height: 56px;
    padding: 0 16px;
  }
  .saas-shell-header-center {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
  }
  .saas-app-switcher-trigger {
    min-width: 0;
    padding-inline: 4px;
  }
  .saas-app-switcher-copy {
    display: none;
  }
  .saas-app-switcher-menu {
    right: -8px;
    width: min(286px, calc(100vw - 24px));
  }
  .saas-shell-eyebrow,
  .saas-shell-breadcrumb-separator { display: none; }
  .saas-sidebar,
  .saas-sidebar.collapsed {
    width: 100%;
    height: auto;
    min-height: 0;
    flex-direction: row;
  }
  .saas-sidebar.collapsed .saas-sidebar-brand,
  .saas-sidebar.collapsed .saas-sidebar-user-copy,
  .saas-sidebar.collapsed .saas-sidebar-version,
  .saas-sidebar.collapsed .saas-sidebar-template,
  .saas-sidebar.collapsed .saas-installed-nav-label,
  .saas-sidebar.collapsed .saas-nav-group-label > span:first-child {
    display: block;
  }
  .saas-sidebar-nav { display: none; }
  .saas-sidebar-app-context { display: none; }
  .saas-sidebar-logo {
    min-height: 56px;
    flex: 1;
    padding-inline: 16px;
    border-bottom: 0;
  }
  .saas-sidebar-footer { display: none; }
  .saas-layout {
    height: 100vh;
    min-height: 100vh;
    flex-direction: column;
    overflow-y: auto;
  }
  .saas-sidebar {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
  }
  .saas-main {
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }
  .saas-page-content { padding: 24px 16px 40px; }
  .saas-runtime-page-header,
  .saas-runtime-toolbar,
  .saas-runtime-section-header { align-items: stretch; flex-direction: column; }
  .saas-runtime-page-header { gap: 16px; margin-bottom: 22px; }
  .saas-runtime-toolbar-start,
  .saas-runtime-toolbar-end,
  .saas-runtime-section-actions { width: 100%; }
  .saas-schema-form-grid { grid-template-columns: 1fr; }
  .saas-query-form,
  .saas-query-form-fields { align-items: stretch; flex-direction: column; }
  .saas-query-form-fields .saas-schema-field { width: 100%; }
  .saas-query-form-actions { justify-content: flex-end; }
  .saas-crud-pagination { justify-content: space-between; flex-wrap: wrap; }
  .menu-settings-layout { grid-template-columns: 1fr; }
  .menu-settings-preview { position: static; }
  .menu-settings-template-grid,
  .menu-settings-options { grid-template-columns: 1fr; }
  .menu-settings-card-heading,
  .menu-settings-preview-header { flex-direction: column; }
  .saas-sites-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .saas-sites-summary-context {
    width: 100%;
    margin-left: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--color-border-default);
    border-left: 0;
  }
  .saas-site-create-form {
    align-items: stretch;
    flex-direction: column;
  }
  .saas-site-create-controls {
    max-width: none;
    flex-basis: auto;
    flex-wrap: wrap;
  }
  .saas-site-create-controls .saas-input {
    flex-basis: 100%;
  }
  .saas-site-create-controls .saas-styled-select-trigger,
  .saas-site-create-controls .saas-btn {
    flex: 1;
  }
  .saas-site-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .saas-site-card .saas-site-type-select,
  .saas-site-card .badge,
  .saas-site-card > .saas-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .saas-site-card-icon { width: 30px; height: 30px; }
  .saas-deployments-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }
  .saas-deployments-content,
  .saas-deployments-skeleton {
    grid-template-columns: 1fr;
  }
  .saas-deployments-panel {
    padding: 16px;
  }
  .saas-deployment-job-meta,
  .saas-deployment-log {
    margin-left: 0;
  }
  .saas-deployment-job-meta {
    gap: 7px 10px;
  }
  .saas-deployment-state-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .saas-deployment-state-card .saas-btn {
    width: 100%;
    margin: 2px 0 0 48px;
  }
  .saas-services-page-header .saas-page-header-title {
    gap: 10px;
  }
  .saas-services-page-header .saas-page-header-icon {
    width: 36px;
    height: 36px;
  }
  .saas-service-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 14px;
  }
  .saas-service-row-content {
    padding-top: 2px;
  }
  .saas-service-row-actions {
    width: 100%;
    padding-left: 50px;
    flex-wrap: wrap;
  }
  .saas-service-row-actions .saas-btn {
    flex: 1 1 auto;
    min-width: min(132px, 100%);
  }
}

@media (max-width: 360px) {
  .saas-shell-header {
    gap: 6px;
    padding-inline: 12px;
  }

  .saas-shell-header-main {
    flex: 0 0 auto;
  }

  .saas-shell-breadcrumbs,
  .saas-shell-fullscreen-toggle {
    display: none;
  }

  .saas-shell-header-center {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .saas-shell-header-actions {
    flex: 0 0 auto;
    gap: 2px;
  }
}

/* ── Section ───────────────────────────────────────────────── */
.saas-section {
  margin-bottom: 24px;
}

/* ── Scene grid ─────────────────────────────────────────────── */
.saas-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.saas-scene-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;

}
.saas-scene-card:hover {

}
.saas-scene-card.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-text);
}
.saas-scene-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  color: var(--color-brand);
}
.saas-scene-info { flex: 1; min-width: 0; }
.saas-scene-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.saas-scene-desc {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saas-scene-card.active .saas-scene-desc { opacity: 0.65; }
.saas-scene-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.saas-scene-bar-label {
  font-size: 12px;

}
.saas-scene-bar-label strong {

  font-weight: 600;
}

/* ── Pill group ─────────────────────────────────────────────── */
.saas-pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.saas-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;

  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  padding: 0 4px;
  margin-left: 4px;
}
.saas-pill.active .saas-pill-count {
  background: rgba(255,255,255,0.25);
}

/* ── Search ─────────────────────────────────────────────────── */
.saas-search-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.saas-search-icon {
  position: absolute;
  left: 12px;
  font-size: 13px;
  pointer-events: none;

}
.saas-search-input {
  width: 100%;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
  padding: 9px 12px 9px 34px;
  font-size: 13px;

  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
  font-family: var(--font-body);
}
.saas-search-input:focus {

  box-shadow: 0 0 0 2px rgba(24,24,27,0.08);
}

.saas-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;

  font-size: 16px;
  padding: 4px;
  line-height: 1;
  transition: color 0.1s;
}

/* ── Demo install bar ─────────────────────────────────────── */
.saas-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.saas-demo-copy {
  margin-top: 8px;
  max-width: 760px;
  line-height: 1.7;
}
.saas-demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.saas-demo-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  min-width: 220px;
}
.saas-demo-context {
  font-size: 11px;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Service list ───────────────────────────────────────────── */
.saas-service-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saas-service-row-wrap {
  animation: saasFadeUp 0.35s var(--ease) both;
}

/* ── Activated grid ────────────────────────────────────────── */
.saas-activated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.saas-activated-card {
  /* uses .saas-card .saas-card-sm from above */
}
.saas-activated-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.saas-activated-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Form groups ───────────────────────────────────────────── */
.saas-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saas-form-label {
  font-size: 12px;
  font-weight: 500;

}
.saas-required {
  color: var(--color-danger);
  margin-left: 2px;
}
.saas-form-help {
  font-size: 11px;

  line-height: 1.5;
}
.saas-form-error {
  color: var(--color-danger-strong);
  font-size: 11px;
  line-height: 1.4;
}
.saas-schema-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.saas-schema-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.saas-schema-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
}
.saas-checkbox-input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-brand);
}
.saas-multi-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.saas-multi-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.saas-multi-select-option:hover {
  border-color: var(--color-brand-border);
  color: var(--color-text-primary);
}
.saas-multi-select-option.is-selected {
  border-color: var(--color-brand-border);
  color: var(--color-text-primary);
  background: var(--color-brand-soft);
}
.saas-multi-select-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-brand);
}
.saas-multi-select-option input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  outline-offset: 2px;
}
.saas-multi-select-option input[type="checkbox"]:disabled,
.saas-multi-select-option:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}
.saas-multi-select-empty {
  color: var(--color-text-muted);
  font-size: 12px;
}
.saas-dict-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}
.saas-query-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.saas-query-form-fields {
  display: flex;
  align-items: flex-end;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 220px;
}
.saas-query-form-fields .saas-schema-field {
  width: min(220px, 100%);
}
.saas-query-form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.saas-column-settings {
  position: relative;
}
.saas-column-settings .saas-btn.active {
  background: var(--color-surface-muted);
}
.saas-column-settings-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 190px;
  padding: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-lg);
}
.saas-column-settings-title {
  padding: 2px 6px 8px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.saas-column-settings-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.saas-column-settings-item:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}
.saas-schema-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.saas-btn-link {
  padding-inline: 4px;
  color: var(--color-brand);
  background: transparent;
  border-color: transparent;
}
.saas-btn-link:hover:not(:disabled) {
  color: var(--color-brand-strong);
  background: var(--color-brand-soft);
}
.saas-btn-link.danger {
  color: var(--color-danger-strong);
}
.saas-crud-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.saas-install-hint {
  padding: 10px 14px;

  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: 12px;

  line-height: 1.6;
}

/* Input with toggle */
.saas-input-wrap {
  position: relative;
}
.saas-input-wrap .saas-input {
  padding-right: 36px;
}
.saas-input-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
}

/* Modal header right */
.saas-modal-header-right {
  display: flex;
  align-items: center;
  gap: 0;
}
.saas-modal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-modal-icon {
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  color: var(--color-brand);
}
.saas-modal-close {
  background: none;
  border: none;
  cursor: pointer;

  font-size: 20px;
  padding: 2px 4px;
  line-height: 1;
  margin-left: 8px;
  transition: color 0.1s;
}

/* ── Native payment checkout ───────────────────────────────────────────── */
.saas-payment-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 9, 11, 0.58);
  backdrop-filter: blur(12px);
  animation: paymentOverlayIn 0.2s ease both;
}

@keyframes paymentOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.saas-payment-dialog {
  width: min(100%, 480px);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  padding: 30px;
  border: 1px solid var(--color-border-default);
  border-radius: 20px;
  background: var(--color-bg-primary);
  box-shadow: 0 26px 80px rgba(0,0,0,0.24);
  animation: paymentDialogIn 0.3s var(--ease) both;
}

@keyframes paymentDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.saas-payment-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.saas-payment-header h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.saas-payment-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-default);
  border-radius: 9px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.saas-payment-price {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}

.saas-payment-price span {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.saas-payment-price strong {
  margin-left: auto;
  color: var(--color-text-primary);
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.04em;
}

.saas-payment-price small {
  align-self: flex-end;
  margin-bottom: 5px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.saas-payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 16px;
}

.saas-payment-method {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-bg-primary);

  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}

.saas-payment-method.active { border-color: var(--color-success); background: var(--color-success-subtle); }
.saas-payment-method--alipay.active { border-color: #1677ff; background: rgba(22,119,255,0.06); }
.saas-payment-method i { margin-left: auto; color: var(--color-success); font-style: normal; font-weight: 800; }
.saas-payment-method--alipay i { color: #1677ff; }
.saas-payment-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #07c160;
  color: var(--color-text-inverse);
  font-size: 13px;
  font-weight: 800;
}
.saas-payment-method--alipay .saas-payment-logo { background: #1677ff; }
.saas-payment-method b { font-size: 13px; }

.saas-payment-submit { margin-top: 6px; min-height: 48px; }

.saas-payment-error { margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent); border-radius: 10px; background: var(--color-danger-subtle); color: var(--color-danger-strong); font-size: 12px; line-height: 1.5; }
.saas-payment-state { text-align: center; }
.saas-payment-state h4 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.02em; }
.saas-payment-provider-chip { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid rgba(7,193,96,0.22); border-radius: 8px; background: rgba(7,193,96,0.08); color: #079447; font-size: 11px; font-weight: 700; }
.saas-payment-provider-chip.alipay { background: rgba(22,119,255,0.1); color: #1264d8; }
.saas-payment-qr-wrap { display: grid; place-items: center; width: 244px; height: 244px; margin: 18px auto 14px; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-primary); box-shadow: 0 12px 35px rgba(0,0,0,0.08); }
.saas-payment-qr-wrap img { display: block; width: 220px; height: 220px; }

.saas-payment-copy {
  margin: 0 0 16px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.saas-payment-code-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 22px 0 18px;
  padding: 26px 18px;
  border: 1px dashed var(--color-border-default);
  border-radius: 16px;
  background: var(--color-surface-muted);

  font-size: 12px;
  line-height: 1.5;
}

.saas-payment-code-fallback code {
  display: block;
  width: 100%;
  max-height: 72px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-bg-primary);

  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  overflow-wrap: anywhere;
  text-align: left;
}
.saas-payment-success-mark { display: grid; place-items: center; width: 62px; height: 62px; margin: 20px auto 16px; border-radius: 50%; background: var(--color-success-subtle); color: var(--color-success); font-size: 34px; font-weight: 700; }
.saas-payment-failed-mark { background: var(--color-warning-subtle); color: var(--color-warning); }
.saas-payment-order { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; margin: 16px 0 18px; padding: 12px 14px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-surface-muted); text-align: left; }

.saas-payment-actions { display: flex; gap: 8px; }
.saas-payment-actions > * { flex: 1; }

@media (max-width: 560px) {
  .saas-payment-overlay { align-items: flex-end; padding: 0; }
  .saas-payment-dialog { max-height: calc(100vh - 18px); padding: 22px 18px 20px; border-radius: 20px 20px 0 0; }
  .saas-payment-methods { grid-template-columns: 1fr; }
  .saas-payment-price strong { font-size: 30px; }
}

/* Tab toggle */
.saas-tab-toggle {
  display: flex;

  border-radius: var(--radius-sm);
  padding: 2px;
}
.saas-tab-btn {
  background: none;
  border: none;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 2px;

  transition: all 0.1s;
  font-family: var(--font-body);
}
.saas-tab-btn.active {
  background: var(--color-brand);
  color: var(--color-brand-text);
}

/* Code preview */
.saas-preview-hint {
  font-size: 11px;

  line-height: 1.6;
  margin-bottom: 8px;
}
.saas-code-wrap {
  position: relative;
}
.saas-code-wrap .saas-code {
  max-height: 240px;
  margin-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.saas-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
.saas-preview-empty {
  padding: 32px;
  text-align: center;

  font-size: 12px;

  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

/* ── Bundle Page ──────────────────────────────────────────────────────────── */

.saas-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.saas-bundles-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.saas-bundles-page-header {
  margin-bottom: 0;
}

.saas-bundles-page-header .saas-page-header-info {
  gap: 8px;
}

.saas-bundles-page-header .saas-page-header-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
}

.saas-bundles-header-summary {
  color: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.saas-bundles-toolbar {
  align-items: center;
  gap: 10px;
}

.saas-bundles-toggle {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
}

.saas-bundle-sort {
  min-width: 154px;
}

.saas-bundles-state-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.saas-bundles-state-card > div {
  min-width: 0;
}

.saas-bundles-state-card strong {
  color: var(--color-text-primary);
  font-size: 13px;
}

.saas-bundles-state-card p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.saas-bundles-state-card .saas-btn {
  margin-left: auto;
}

.saas-bundle-card {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.saas-bundle-card:hover {

  box-shadow: var(--shadow-md);
}

.saas-bundle-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.saas-bundle-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.saas-bundle-title-group {
  flex: 1;
}

.saas-bundle-name {
  font-size: 16px;
  font-weight: 700;

}

.saas-bundle-scene {
  font-size: 11px;

  margin-top: 2px;
}

.saas-bundle-desc {
  font-size: 13px;

  line-height: 1.6;
  margin: 0;
}

.saas-bundle-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saas-bundle-services-label {
  font-size: 11px;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.saas-bundle-services-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.saas-bundle-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;

  border: 1px solid var(--color-border-default);
  border-radius: 999px;

  white-space: nowrap;
}

.saas-bundle-more {
  font-size: 11px;

  padding: 3px 6px;
}

.saas-bundle-popular-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: linear-gradient(135deg, #f59e0b, #e11d48);
  color: var(--color-emphasis-text);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0 var(--radius-lg) 0 var(--radius-md);
  letter-spacing: 0.05em;
}

.saas-bundle-installed-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--color-success);
  color: var(--color-on-success);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-md) 0 var(--radius-lg) 0;
  letter-spacing: 0.05em;
}

.saas-bundle-card {
  position: relative;
}

.saas-bundle-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-default);
}

/* ── Bundle scene tabs ─────────────────────────────────────────────────────── */

.saas-scene-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.saas-scene-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  cursor: pointer;

  transition: all 0.12s;
  font-family: var(--font-body);
}
.saas-scene-tab:hover {

}
.saas-scene-tab.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-text);
}

.saas-scene-tab-count {
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
}
.saas-scene-tab:not(.active) .saas-scene-tab-count {

}

/* ── Bundle detail page ─────────────────────────────────────────────────────── */

.saas-bundle-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.saas-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

.saas-detail-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.saas-detail-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.saas-section-title {
  font-size: 14px;
  font-weight: 600;

  margin: 0 0 12px 0;
}

.saas-bundle-service-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saas-bundle-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  cursor: pointer;
  transition: all 0.12s;
}
.saas-bundle-service-item:hover {

}
.saas-bundle-service-item.deselected {
  opacity: 0.4;

}

.saas-bundle-service-check {
  font-size: 16px;
  flex-shrink: 0;
}

.saas-bundle-service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.saas-bundle-service-index {
  font-size: 11px;
  font-family: var(--font-code);

  width: 20px;
  flex-shrink: 0;
}

.saas-bundle-service-info {
  flex: 1;
}

.saas-bundle-service-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;

}

.saas-bundle-service-desc {
  font-size: 11px;

  margin-top: 2px;
}

.saas-bundle-service-category {
  font-size: 10px;

  padding: 2px 8px;
  border-radius: 999px;
}

/* ── Install order ──────────────────────────────────────────────────────────── */

.saas-install-order {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saas-install-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;

  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: 12px;

}

.saas-install-order-num {
  width: 20px;
  height: 20px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Generic Panel ──────────────────────────────────────────────────────────── */
.gen-panel { display: flex; flex-direction: column; gap: 16px; }

/* Hero */
.gen-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1.5px solid;
}

/* Stats row */
.gen-stats-row  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* Layout */
.gen-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Card */
.gen-card   { background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Info list */
.gen-info-list { display: flex; flex-direction: column; gap: 0; }

/* Empty state */
.gen-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--color-text-muted); font-size: 13px; }

/* Health summary */
.gen-health-summary { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }

/* Check list */
.gen-check-list { display: flex; flex-direction: column; gap: 5px; }

/* AI hint */
.gen-ai-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--color-brand) 8%, var(--color-bg-primary)); border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent); border-radius: var(--radius-md); font-size: 12px; color: var(--color-text-secondary); }

/* ── Deploy Panel ───────────────────────────────────────────────────────────── */
.dp-panel { display: flex; flex-direction: column; gap: 16px; }

.dp-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 24px; border-radius: var(--radius-lg); border: 1.5px solid;
}
.dp-hero-ok   { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 6%, var(--color-bg-primary)); }
.dp-hero-warn { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 6%, var(--color-bg-primary)); }
.dp-hero-empty { border-color: var(--color-border-default); background: var(--color-bg-primary); }
.dp-hero-icon  { font-size: 40px; flex-shrink: 0; }
.dp-hero-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dp-hero-eyebrow { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.dp-hero-name   { font-size: 22px; font-weight: 700; color: var(--color-text-primary); }
.dp-hero-desc   { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.dp-hero-meta   { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.dp-hero-status-row { display: flex; align-items: center; gap: 6px; }
.dp-hero-status-label { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.dp-hero-org     { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.dp-hero-project { font-size: 12px; font-family: var(--font-code); color: var(--color-text-secondary); }
.dp-hero-date    { font-size: 11px; color: var(--color-text-muted); }

.dp-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dp-stat-card { padding: 16px 12px; background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); text-align: center; }
.dp-stat-icon { font-size: 18px; margin-bottom: 8px; display: inline-flex; color: var(--color-brand); }
.dp-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.dp-stat-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.dp-stat-note  { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }

.dp-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dp-card    { background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dp-card-muted { background: var(--color-surface-muted); }
.dp-card-header { display: flex; align-items: center; justify-content: space-between; }
.dp-card-title  { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.dp-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-border-default); }

.dp-info-list { display: flex; flex-direction: column; }
.dp-info-row  { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-default); gap: 12px; }
.dp-info-row:last-child { border-bottom: none; }
.dp-info-label { font-size: 12px; color: var(--color-text-muted); min-width: 80px; flex-shrink: 0; }
.dp-info-value { font-size: 13px; color: var(--color-text-primary); flex: 1; word-break: break-all; }
.dp-info-mono  { font-family: var(--font-code); font-size: 12px; }
.dp-info-secret { font-size: 12px; color: var(--color-text-muted); }

.dp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--color-text-muted); font-size: 13px; }
.dp-empty-icon { font-size: 28px; }

.dp-health-summary { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.dp-section-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

.dp-check-list { display: flex; flex-direction: column; gap: 5px; }
.dp-check-row  { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-bg-primary); border-radius: var(--radius-sm); }
.dp-check-label { font-size: 13px; color: var(--color-text-secondary); flex: 1; }

.dp-deployments { background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 16px; }
.dp-deploy-list  { display: flex; flex-direction: column; gap: 2px; }
.dp-deploy-row   { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-sm); transition: background 0.15s; cursor: default; }
.dp-deploy-row:hover { background: var(--color-bg-tertiary); }
.dp-deploy-info  { min-width: 0; flex: 1; }
.dp-deploy-name  { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.dp-deploy-meta  { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.dp-deploy-branch { font-size: 11px; font-family: var(--font-code); color: var(--color-text-muted); background: var(--color-surface-muted); padding: 1px 6px; border-radius: 4px; }
.dp-deploy-url   { font-size: 12px; color: var(--color-text-link); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-deploy-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dp-deploy-time  { font-size: 12px; color: var(--color-text-muted); }
.dp-deploy-more   { font-size: 12px; color: var(--color-text-muted); text-align: center; padding: 8px; }

/* ── AI Service Panel ───────────────────────────────────────────────────────── */
.ai-panel { display: flex; flex-direction: column; gap: 16px; }

.ai-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 24px; border-radius: var(--radius-lg); border: 1.5px solid;
}
.ai-hero-ok   { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 6%, var(--color-bg-primary)); }
.ai-hero-warn { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 6%, var(--color-bg-primary)); }
.ai-hero-empty { border-color: var(--color-border-default); background: var(--color-bg-primary); }
.ai-hero-icon  { font-size: 40px; flex-shrink: 0; }
.ai-hero-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-hero-eyebrow { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ai-hero-name   { font-size: 22px; font-weight: 700; color: var(--color-text-primary); }
.ai-hero-model  { font-size: 13px; font-family: var(--font-code); color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 10%, transparent); padding: 3px 10px; border-radius: 4px; display: inline-block; margin-top: 2px; }
.ai-hero-desc   { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.ai-hero-meta   { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.ai-hero-status-row { display: flex; align-items: center; gap: 6px; }
.ai-hero-status-label { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.ai-hero-key    { font-size: 12px; font-family: var(--font-code); color: var(--color-text-muted); }
.ai-hero-date   { font-size: 11px; color: var(--color-text-muted); }

.ai-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ai-stat-card { padding: 16px 12px; background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); text-align: center; }
.ai-stat-icon { font-size: 18px; margin-bottom: 8px; display: inline-flex; color: var(--color-brand); }
.ai-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.ai-stat-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

.ai-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ai-card    { background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ai-card-muted { background: var(--color-surface-muted); }
.ai-card-header { display: flex; align-items: center; justify-content: space-between; }
.ai-card-title  { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.ai-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-border-default); }

.ai-info-list { display: flex; flex-direction: column; }
.ai-info-row  { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-default); gap: 12px; }
.ai-info-row:last-child { border-bottom: none; }
.ai-info-label { font-size: 12px; color: var(--color-text-muted); min-width: 100px; flex-shrink: 0; }
.ai-info-value { font-size: 13px; color: var(--color-text-primary); flex: 1; word-break: break-all; }
.ai-info-mono  { font-family: var(--font-code); font-size: 12px; }
.ai-info-secret { font-size: 12px; color: var(--color-text-muted); }

.ai-health-summary { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.ai-section-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

.ai-check-list { display: flex; flex-direction: column; gap: 5px; }
.ai-check-row  { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-bg-primary); border-radius: var(--radius-sm); }
.ai-check-label { font-size: 13px; color: var(--color-text-secondary); flex: 1; }

/* Test chat */
.ai-test-card { background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 20px; }
.ai-test-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ai-test-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.ai-test-prompt { display: flex; flex-direction: column; gap: 8px; }
.ai-test-input { width: 100%; resize: none; font-family: var(--font-body); font-size: 13px; }
.ai-test-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ai-test-model-badge { font-size: 12px; font-family: var(--font-code); color: var(--color-text-muted); padding: 3px 8px; background: var(--color-surface-muted); border-radius: 4px; }
.ai-test-result { margin-top: 10px; padding: 12px; background: var(--color-surface-muted); border-radius: var(--radius-md); font-size: 13px; line-height: 1.6; white-space: pre-wrap; max-height: 200px; overflow: auto; }
.ai-test-error { color: var(--color-danger); }

/* ── Service Panel Base ─────────────────────────────────────────────────────── */
.sp-panel { display: flex; flex-direction: column; gap: 16px; }

/* Hero */
.sp-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 24px; border-radius: var(--radius-lg); border: 1.5px solid;
}
.sp-hero-ok   { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 6%, var(--color-bg-primary)); }
.sp-hero-warn { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 6%, var(--color-bg-primary)); }
.sp-hero-empty { border-color: var(--color-border-default); background: var(--color-bg-primary); }
.sp-hero-icon  { font-size: 40px; flex-shrink: 0; }
.sp-hero-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-hero-eyebrow { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.sp-hero-name   { font-size: 22px; font-weight: 700; color: var(--color-text-primary); }
.sp-hero-desc   { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.sp-hero-model  { font-size: 13px; font-family: var(--font-code); color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 10%, transparent); padding: 3px 10px; border-radius: 4px; display: inline-block; width: -moz-fit-content; width: fit-content; margin-top: 2px; }
.sp-hero-meta   { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.sp-hero-status-row { display: flex; align-items: center; gap: 6px; }
.sp-hero-status-label { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.sp-hero-meta-item { font-size: 12px; color: var(--color-text-secondary); }
.sp-hero-date    { font-size: 11px; color: var(--color-text-muted); }

/* Stats */
.sp-stats-row  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sp-stat-card  { padding: 16px 12px; background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); text-align: center; }
.sp-stat-icon  { font-size: 18px; margin-bottom: 8px; display: inline-flex; color: var(--color-brand); }
.sp-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.sp-stat-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.sp-stat-note  { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }

/* Layout */
.sp-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-card    { background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.sp-card-muted { background: var(--color-surface-muted); }
.sp-footer  { background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 20px; }

/* Card parts */
.sp-card-header { display: flex; align-items: center; justify-content: space-between; }
.sp-card-title  { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.sp-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-border-default); }
.sp-card-body   { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }

/* Info list */
.sp-info-list { display: flex; flex-direction: column; }
.sp-info-row   { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-default); gap: 12px; }
.sp-info-row:last-child { border-bottom: none; }
.sp-info-label { font-size: 12px; color: var(--color-text-muted); min-width: 90px; flex-shrink: 0; }
.sp-info-value { font-size: 13px; color: var(--color-text-primary); flex: 1; word-break: break-all; }
.sp-info-mono  { font-family: var(--font-code); font-size: 12px; }
.sp-info-secret { font-size: 12px; color: var(--color-text-muted); }

/* Checks */
.sp-check-list { display: flex; flex-direction: column; gap: 5px; }
.sp-check-row  { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-bg-primary); border-radius: var(--radius-sm); }
.sp-check-label { font-size: 13px; color: var(--color-text-secondary); flex: 1; }
.sp-section-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* Status dot */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot-ok      { background: var(--color-success); }
.status-dot-warn    { background: var(--color-warning); }
.status-dot-neutral { background: var(--color-text-muted); }

/* ── Algolia Test Panel ─────────────────────────────────────────────────────── */
.alg-test-panel { display: flex; flex-direction: column; gap: 12px; }
.alg-test-header { display: flex; align-items: center; justify-content: space-between; }
.alg-test-title  { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.alg-test-sub    { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.alg-test-stats  { display: flex; align-items: center; gap: 6px; }
.alg-test-stat-num  { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.alg-test-stat-label { font-size: 12px; color: var(--color-text-muted); }
.alg-test-stat-sep   { font-size: 12px; color: var(--color-text-muted); }
.alg-test-search { display: flex; gap: 8px; align-items: center; }
.alg-test-error  { padding: 10px 12px; background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-primary)); border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent); border-radius: var(--radius-md); font-size: 12px; color: var(--color-danger); }
.alg-test-empty  { padding: 20px; text-align: center; color: var(--color-text-muted); font-size: 13px; }
.alg-test-empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; color: var(--color-text-muted); font-size: 13px; }
.alg-test-hits   { display: flex; flex-direction: column; gap: 6px; }
.alg-hit-card    { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--color-surface-muted); border-radius: var(--radius-md); }
.alg-hit-rank    { font-size: 12px; font-weight: 700; color: var(--color-text-muted); min-width: 28px; flex-shrink: 0; padding-top: 1px; }
.alg-hit-body    { flex: 1; min-width: 0; }
.alg-hit-title   { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 3px; }
.alg-hit-meta    { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-top: 2px; }
.alg-hit-key     { color: var(--color-text-muted); }
.alg-hit-hl      { background: color-mix(in srgb, var(--color-warning) 15%, transparent); border-radius: 2px; padding: 0 2px; }
.alg-hit-id      { font-size: 11px; font-family: var(--font-code); color: var(--color-text-muted); margin-top: 3px; }

/* ── Config form ────────────────────────────────────────────────────────────── */

.saas-config-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.saas-config-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.saas-config-label {
  font-size: 12px;
  font-weight: 500;

}

.saas-config-help {
  font-size: 11px;

}

/* ── Install hints ──────────────────────────────────────────────────────────── */

.saas-install-hints {
  font-size: 12px;

  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.6;
}

/* ── Toggle label ──────────────────────────────────────────────────────────── */

.saas-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;

  cursor: pointer;
}
.saas-toggle-label input {

}

/* ── SiteSwitcher ──────────────────────────────────────────────────────────── */

.site-switcher {
  position: relative;
  display: inline-block;
}

.site-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  min-width: 240px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.site-switcher-header {
  padding: 10px 14px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-default);
}

.site-switcher-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
}

.site-switcher-loading,
.site-switcher-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.site-switcher-item-row { position: relative; }

.site-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  transition: background 0.1s;
}
.site-switcher-item:hover {
  background: var(--color-bg-tertiary);
}
.site-switcher-item.active {
  background: var(--color-brand-soft);
  color: var(--color-text-primary);
}

.site-switcher-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-disabled);
  flex-shrink: 0;
}
.site-switcher-item.active .site-switcher-item-dot {
  background: var(--color-brand);
}

.site-switcher-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-switcher-item-check {
  font-size: 11px;
  color: var(--color-brand);
}

.site-switcher-edit-input {
  width: 100%;
  padding: 6px 14px;
  font-size: 13px;
  border: none;
  border-bottom: 2px solid var(--color-brand);
  outline: none;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}
.site-switcher-edit-input::-moz-placeholder, .site-switcher-create-input::-moz-placeholder {
  color: var(--color-text-muted);
}
.site-switcher-edit-input::placeholder,
.site-switcher-create-input::placeholder {
  color: var(--color-text-muted);
}

.site-switcher-footer {
  border-top: 1px solid var(--color-border-default);
  padding: 8px 10px;
}

.site-switcher-create-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-body);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.site-switcher-create-btn:hover {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.site-switcher-create-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-switcher-create-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 13px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  outline: none;
  min-width: 0;
}
.site-switcher-create-input:focus {
  border-color: var(--color-brand);
}

.site-switcher-create-confirm {
  padding: 4px 8px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
}
.site-switcher-create-cancel {
  padding: 4px 8px;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
}
.site-switcher-create-cancel:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* ── SiteChip (sidebar v3 trigger) ────────────────────────────────────────── */
.saas-site-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--color-sidebar-active);
  border: 1px solid var(--color-sidebar-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-sidebar-text-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  max-width: 200px;
  width: 100%;
}
.saas-site-chip:hover {
  background: var(--color-sidebar-hover);
  border-color: rgba(255,255,255,0.12);
}
.saas-site-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 5px rgba(34,197,94,0.5);
  flex-shrink: 0;
}
.saas-site-chip-dot.inactive {

  box-shadow: none;
}
.saas-site-chip-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-site-chip-arrow {
  font-size: 10px;
  color: var(--color-sidebar-text-3);
  line-height: 1;
}

/* ── AI Chat Panel (DeepSeek / Anthropic / Groq / etc.) ─────────────────────── */
.ai-chat-panel     { display: flex; flex-direction: column; gap: 0; }
.ai-chat-header    { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ai-chat-title     { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.ai-chat-messages  { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.ai-chat-empty     { text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 20px 0; }
.ai-chat-empty-state { text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 20px; }
.ai-chat-error     { padding: 8px 12px; font-size: 12px; color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-primary)); border-radius: var(--radius-sm); }
.ai-chat-input-row { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--color-border-default); background: var(--color-bg-elevated); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ai-msg            { display: flex; flex-direction: column; gap: 3px; }
.ai-msg-user       { align-items: flex-end; }
.ai-msg-assistant  { align-items: flex-start; }
.ai-msg-role       { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.ai-msg-content    { font-size: 13px; line-height: 1.55; color: var(--color-text-primary); padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-bg-elevated); max-width: 85%; white-space: pre-wrap; word-break: break-word; }
.ai-msg-user .ai-msg-content { background: var(--color-brand); color: var(--color-text-inverse); }
.ai-usage-tag      { font-size: 11px; font-family: var(--font-code); color: var(--color-text-muted); text-align: center; padding: 4px 0; }

/* ── Email / SMS Test Panel (Resend / Twilio) ────────────────────────────────── */
.email-test-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--color-bg-elevated); border-radius: var(--radius-lg); }
.email-test-header { display: flex; flex-direction: column; gap: 2px; }
.email-test-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.email-test-form  { display: flex; flex-direction: column; gap: 8px; }

/* ── Deploy List (Vercel / GitHub Actions) ─────────────────────────────────── */
.deploy-list       { display: flex; flex-direction: column; gap: 0; }
.deploy-item       { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-border-default); transition: background 0.1s; }
.deploy-item:last-child { border-bottom: none; }
.deploy-item:hover { background: var(--color-bg-elevated); }

/* ── Sentry Stats ───────────────────────────────────────────────────────────── */
.sentry-stat-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--color-bg-elevated); border-radius: var(--radius-md); text-align: center; }

/* ═════════════════════════════════════════════════════════════════════════════
/* Metadata Runtime: stable, metadata-driven admin template. */
.ruoyi-runtime-page {
  min-height: calc(100vh - 82px);
  padding: 20px 28px 36px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.ruoyi-page-header-actions .saas-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ruoyi-resource-nav button.active {
  border-bottom-color: var(--color-brand);
  color: var(--color-brand);
  font-weight: 600;
}
.ruoyi-runtime-page .saas-btn {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
}
.ruoyi-runtime-page .saas-btn:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
.ruoyi-runtime-page .saas-btn-primary {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-brand-text);
}
.ruoyi-runtime-page .saas-btn-primary:hover:not(:disabled) {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
  color: var(--color-brand-text);
}
.ruoyi-runtime-page .saas-btn-danger {
  border-color: var(--color-border-default);
  background: var(--color-bg-primary);
  color: var(--color-danger);
}
.ruoyi-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-default);
}
.ruoyi-operation-cell { width: 150px; white-space: nowrap; }
.ruoyi-link-button.danger { color: var(--color-danger); }
.ruoyi-table-footer .pagination { margin-left: auto; }
.ruoyi-dialog-field:has(select[multiple]) { grid-column: 1 / -1; }
.ruoyi-version-item.selected {
  border-color: var(--color-brand-border);
  background: var(--color-brand-soft);
}
.ruoyi-version-item.selected .ruoyi-version-item-marker{
  color: var(--color-brand);
}
.ruoyi-version-status.is-published {
  border-color: var(--color-success-line);
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.ruoyi-version-diff-block .is-added {
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.ruoyi-version-diff-block .is-removed {
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}
.ruoyi-version-diff-block .is-changed {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
@media (max-width: 720px) {
  .ruoyi-search-actions .saas-btn { flex: 1; }
  .ruoyi-toolbar { align-items: flex-start; flex-direction: column; }
  .ruoyi-toolbar-actions .saas-btn { flex: 1; }
  .ruoyi-table-footer .pagination { margin-left: 0; }
  .ruoyi-dialog-field:has(select[multiple]) { grid-column: auto; }
}

/* ── Operate-first hierarchy ─────────────────────────────────────────────── */
.saas-root .saas-runtime-eyebrow {
  display: none;
}

.saas-root .saas-runtime-page-header,
.saas-root .saas-page-header {
  gap: 12px;
  margin-bottom: 14px;
}

.saas-root .saas-runtime-page-title .saas-title-xl,
.saas-root .saas-page-title {
  font-size: clamp(19px, 1.8vw, 22px);
  letter-spacing: -0.025em;
}

.saas-root .saas-runtime-section-header {
  margin-bottom: 8px;
}

.saas-root .saas-runtime-section-header .saas-title-md,
.saas-root .saas-data-panel-title {
  font-size: 14px;
  letter-spacing: -0.015em;
}

.saas-root .sp-panel {
  gap: 12px;
}

.saas-root .sp-hero {
  gap: 16px;
  padding: 16px 18px;
  border: 0;
  box-shadow: var(--shadow-sm);
}

.saas-root .sp-hero-name {
  font-size: 20px;
}

.saas-root .sp-stats-row {
  gap: 8px;
}

.saas-root .sp-stat-card,
.saas-root .sp-card,
.saas-root .sp-footer {
  border: 0;
  box-shadow: var(--shadow-sm);
}

.saas-root .sp-card,
.saas-root .sp-footer {
  padding: 16px;
}

.saas-root .sp-card-actions {
  border-top: 0;
  padding-top: 4px;
}

@media (max-width: 720px) {
  .saas-root .sp-hero {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .saas-root .sp-hero-meta {
    align-items: flex-start;
    width: 100%;
    padding-left: 37px;
  }
}

/* Distilled workspace hierarchy: actions and data lead; copy is opt-in. */
.saas-root .saas-runtime-page-header,
.saas-root .saas-page-header {
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.saas-root .saas-runtime-page-description,
.saas-root .saas-page-header-desc,
.saas-root .saas-data-panel-description,
.saas-root .saas-services-header-summary,
.saas-root .saas-bundles-header-summary {
  display: none;
}

.saas-root .saas-runtime-page-header-copy,
.saas-root .saas-page-header-info {
  gap: 0;
}

.saas-root .saas-runtime-page-title .saas-title-xl,
.saas-root .saas-page-header-title .saas-title-xl,
.saas-root .saas-page-title {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
}

.saas-root .saas-runtime-toolbar {
  margin-bottom: 14px;
}

.saas-root .saas-runtime-section {
  margin-bottom: 22px;
}

.saas-root .saas-runtime-section-header {
  align-items: center;
  margin-bottom: 10px;
}

.saas-root .saas-data-panel {
  border-radius: 12px;
  box-shadow: none;
}

.saas-root .saas-data-panel-header {
  align-items: center;
  padding: 0 0 10px;
}

.saas-root .saas-data-panel-toolbar {
  padding: 0 0 10px;
}

.saas-root .saas-data-panel-title {
  font-size: 14px;
}

@media (max-width: 768px) {
  .saas-root .saas-runtime-page-header,
  .saas-root .saas-page-header {
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
  }

  .saas-root .saas-data-panel-header {
    padding-bottom: 8px;
  }
}

/* ── SaaS data tables: quiet utility chrome, clear row rhythm ───────── */
.saas-root .admin-data-table {
  min-width: 0;
  background: transparent;
}

.saas-root .admin-table-head {
  padding: 10px 0 12px;
  background: transparent;
}

.saas-root .admin-table-filter-row {
  padding: 0 0 14px;
  background: transparent;
}

.saas-root .admin-table-summary strong {
  color: var(--color-text-primary);
}

.saas-root .admin-table-summary span,
.saas-root .admin-table-summary small {
  color: var(--color-text-muted);
}

.saas-root .admin-table-utility-button {
  color: var(--color-text-muted);
}

.saas-root .admin-table-utility-button:hover,
.saas-root .admin-table-utility-button.is-active {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
}

.saas-root .admin-data-table .data-table {
  min-width: 640px;
}

.saas-root .admin-data-table .data-table-th {
  padding: 11px 14px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-bottom: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.saas-root .admin-data-table .data-table-td {
  padding: 14px;
  color: var(--color-text-secondary);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.saas-root .admin-data-table .data-table-row:last-child .data-table-td {
  box-shadow: none;
}

.saas-root .admin-data-table .data-table-row:hover td {
  background: var(--color-bg-secondary);
}

.saas-root .admin-data-table .data-table-row.selected td {
  background: var(--color-brand-soft);
}

.saas-root .admin-table-columns-popover {
  border-color: var(--color-border-default);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-lg);
}

.saas-root .admin-table-columns-title {
  color: var(--color-text-muted);
}

.saas-root .admin-table-column-option {
  color: var(--color-text-secondary);
}

.saas-root .saas-sub-resource-panel {
  border-top: 0;
  padding-top: 12px;
}

/* ── RuoYi-style application builder template ───────────────────────────── */
.builder-template-page {
  min-height: calc(100vh - 82px);
  padding: 20px 28px 40px;
  color: var(--color-text-primary);
}
.builder-template-status-dot.is-connected,
.builder-template-header-meta .is-connected .builder-template-status-dot {
  background: var(--color-success-strong);
  box-shadow: 0 0 0 3px var(--color-success-subtle);
}
.builder-template-advanced[open] summary {
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-brand);
}
.builder-template-form-footer .saas-btn,
.builder-template-publish-footer .saas-btn {
  min-height: 34px;
}

@media (max-width: 768px) {
  .saas-bundles-page-header .saas-page-header-title {
    gap: 10px;
  }

  .saas-bundles-page-header .saas-page-header-icon {
    width: 36px;
    height: 36px;
  }

  .saas-bundles-toolbar {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .saas-bundle-sort {
    flex: 1 1 160px;
  }

  .saas-bundle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .saas-bundle-actions {
    flex-direction: column;
  }

  .saas-bundle-actions .saas-btn {
    width: 100%;
  }

  .saas-bundles-state-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .saas-bundles-state-card .saas-btn {
    width: 100%;
    margin: 2px 0 0 48px;
  }
}
@media (max-width: 560px) {
  .builder-template-form-footer .saas-btn {
    flex: 1;
    justify-content: center;
  }
  .builder-template-publish-footer .saas-btn {
    justify-content: center;
  }
}

/* Generated business template extensions: dashboard, workflows and sub-tables. */
.ruoyi-dashboard-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto 12px;
}
.ruoyi-child-panel-header .saas-btn {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
}

/* Generated app business navigation and detail components. */
.ruoyi-resource-nav-tree {
  display: block;
  padding: 6px 10px 2px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
}
.ruoyi-resource-menu button.active {
  border-color: var(--color-brand-border);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 600;
}
.ruoyi-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--color-bg-secondary);
}
.ruoyi-kanban-column {
  min-width: 0;
  min-height: 240px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
}
.ruoyi-kanban-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
}
.ruoyi-kanban-column > header b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
}
.ruoyi-kanban-cards {
  display: grid;
  gap: 8px;
  padding: 9px;
}
.ruoyi-kanban-empty {
  padding: 26px 10px;
  color: var(--color-text-disabled);
  font-size: 11px;
  text-align: center;
}
.ruoyi-kanban-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xs);
}
.ruoyi-kanban-card > strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-kanban-card-fields {
  display: grid;
  gap: 6px;
}
.ruoyi-kanban-card-fields span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.ruoyi-kanban-card-fields em {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-kanban-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-top: 7px;
  border-top: 1px solid var(--color-border-muted);
}
.ruoyi-operation-cell {
  white-space: normal;
}
@media (max-width: 720px) {
  .ruoyi-kanban {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

.ruoyi-calendar {
  padding: 16px;
  background: var(--color-bg-secondary);
}
.ruoyi-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ruoyi-calendar-header > div:first-child {
  display: grid;
  gap: 3px;
}
.ruoyi-calendar-header strong {
  color: var(--color-text-primary);
  font-size: 15px;
}
.ruoyi-calendar-header span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.ruoyi-calendar-controls {
  display: flex;
  gap: 6px;
}
.ruoyi-calendar-weekdays,
.ruoyi-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ruoyi-calendar-weekdays {
  border: 1px solid var(--color-border-default);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-bg-primary);
}
.ruoyi-calendar-weekdays span {
  padding: 8px 10px;
  color: var(--color-text-muted);
  font-size: 10px;
  text-align: right;
}
.ruoyi-calendar-grid {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-border-default);
  gap: 1px;
}
.ruoyi-calendar-cell {
  min-height: 112px;
  padding: 8px;
  background: var(--color-bg-primary);
}
.ruoyi-calendar-cell.is-empty {
  background: var(--color-bg-tertiary);
}
.ruoyi-calendar-day {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ruoyi-calendar-events {
  display: grid;
  gap: 5px;
}
.ruoyi-calendar-event {
  display: grid;
  gap: 3px;
  padding: 5px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-brand-soft) 84%, var(--calendar-event-color, var(--color-brand)) 16%);
}
.ruoyi-calendar-event > button:first-child {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-calendar-event > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* Fixed runtime primitives: tree rows, uploads, advanced controls and reports. */
.ruoyi-tree-table-wrap {
  overflow-x: auto;
}
.ruoyi-tree-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: calc(var(--tree-depth, 0) * 22px);
  min-width: 180px;
}
.ruoyi-tree-toggle,
.ruoyi-tree-spacer {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
}
.ruoyi-tree-toggle {
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.ruoyi-tree-toggle:hover {
  border-color: var(--color-brand-border);
  color: var(--color-brand);
}

.saas-generated-app-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.saas-generated-app-card {
  display: flex;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.saas-generated-app-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-secondary);
}

.saas-generated-app-card-icon,
.saas-generated-resource-icon {
  display: inline-grid;
  place-items: center;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-md);
}

.saas-generated-app-card-icon {
  width: 30px;
  height: 30px;
}

.saas-generated-app-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.saas-generated-app-card strong {
  color: var(--color-text-primary);
  font-family: var(--font-code);
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.saas-generated-report-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
}

.saas-generated-app-resource-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.saas-generated-resource-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.saas-generated-resource-link:hover {
  border-color: var(--color-brand-border);
  background: var(--color-brand-soft);
  transform: translateY(-1px);
}

.saas-generated-resource-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.saas-generated-resource-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.saas-generated-resource-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-generated-resource-copy small {
  color: var(--color-text-muted);
  font-size: 10px;
}

.saas-generated-resource-arrow {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transform: rotate(45deg);
  transition: color 160ms ease, transform 160ms ease;
}

.saas-generated-resource-link:hover .saas-generated-resource-arrow {
  color: var(--color-brand);
  transform: translate(2px, -2px) rotate(45deg);
}

.saas-generated-app-overview .saas-runtime-page-header {
  padding-bottom: 4px;
}

.saas-generated-app-overview .saas-runtime-page-description {
  max-width: 620px;
}

.saas-generated-app-overview .saas-runtime-page-meta {
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 11px;
}

/* Generated CRUD filters stay dense like the mother SaaS workbench. */
.saas-crud-page .saas-runtime-toolbar-start {
  min-width: 0;
}

.saas-crud-page .saas-query-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.saas-crud-page .saas-query-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  min-width: 0;
}

.saas-crud-page .saas-query-form-fields .saas-schema-field {
  width: auto;
  min-width: 0;
}

.saas-sub-resource-panel {
  margin-top: 18px;
  border-top: 3px solid var(--color-brand);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.saas-sub-resource-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.saas-sub-resource-total {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.saas-sub-resource-panel .saas-runtime-section-header {
  align-items: flex-start;
}

.saas-sub-resource-panel .saas-schema-row-actions {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .saas-generated-app-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-generated-app-resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-crud-page .saas-query-form {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .saas-crud-page .saas-query-form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .saas-generated-app-card-grid {
    grid-template-columns: 1fr;
  }

  .saas-generated-app-resource-list {
    grid-template-columns: 1fr;
  }

  .saas-crud-page .saas-query-form-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .ruoyi-calendar {
    padding: 10px;
    overflow-x: auto;
  }
  .ruoyi-calendar-weekdays,
  .ruoyi-calendar-grid {
    min-width: 680px;
  }
  .ruoyi-calendar-cell {
    min-height: 96px;
  }
}

/* Bundle catalog/detail hardening overrides. */
.saas-bundle-card {
  min-width: 0;
}

.saas-bundle-card:hover {
  border-color: var(--color-border-strong);
}

.saas-bundle-title-group,
.saas-bundle-service-info,
.saas-bundle-service-row {
  min-width: 0;
}

.saas-bundle-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saas-bundle-scene,
.saas-bundle-services-label,
.saas-bundle-more {
  color: var(--color-text-muted);
}

.saas-bundle-desc {
  min-height: 42px;
  color: var(--color-text-secondary);
}

.saas-bundle-service-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.saas-scene-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.saas-scene-tab {
  flex: 0 0 auto;
}

.saas-scene-tab:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-tertiary);
}

.saas-bundle-detail-header,
.saas-bundle-detail-header > div {
  min-width: 0;
}

.saas-bundle-detail-header {
  flex: 1;
  align-items: flex-start;
}

.saas-bundle-detail-description {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.saas-bundle-service-item {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.saas-bundle-service-item:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-tertiary);
}

.saas-bundle-service-item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.saas-bundle-service-row {
  flex: 1;
}

.saas-bundle-service-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.saas-bundle-service-category {
  flex-shrink: 0;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  white-space: nowrap;
}

.saas-install-order-item {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.saas-config-label {
  color: var(--color-text-secondary);
}

.saas-config-help {
  color: var(--color-text-muted);
}

.saas-bundle-missing-inputs {
  color: var(--color-warning-strong);
}

@media (max-width: 768px) {
  .saas-bundles-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-bundles-toggle {
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
  }

  .saas-bundle-sort {
    grid-column: 1 / -1;
    width: 100%;
  }

  .saas-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .saas-detail-sidebar {
    position: static;
  }

  .saas-bundle-detail-header {
    gap: 10px;
  }

  .saas-bundle-detail-header .saas-page-title {
    font-size: 18px;
  }

  .saas-bundle-detail-description {
    max-width: none;
  }

  .saas-bundle-service-category {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   SaaS final skin
   Shared visual layer for the customer workspace. Theme values
   are defined once in the root token layer above.
   ───────────────────────────────────────────────────────────── */
.saas-root,
.saas-root * {
  box-sizing: border-box;
}

.saas-root button,
.saas-root input,
.saas-root select,
.saas-root textarea {
  font-family: var(--font-body);
}

.saas-root button {
  margin: 0;
}

.saas-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.saas-input-sm),
.saas-root select:not(.saas-input-sm),
.saas-root textarea {
  min-height: 36px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  outline: none;
  transition: background-color var(--duration-fast), box-shadow var(--duration-normal), color var(--duration-fast);
}

.saas-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):hover,
.saas-root select:hover:not(:disabled),
.saas-root textarea:hover {
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.saas-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus-visible,
.saas-root select:focus-visible,
.saas-root textarea:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-brand), 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.saas-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])::-moz-placeholder, .saas-root textarea::-moz-placeholder {
  color: var(--color-text-muted);
}

.saas-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])::placeholder,
.saas-root textarea::placeholder {
  color: var(--color-text-muted);
}

.saas-root textarea {
  min-height: 96px;
  resize: vertical;
  line-height: var(--leading-normal);
}

.saas-root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):disabled,
.saas-root select:disabled,
.saas-root textarea:disabled {
  color: var(--color-text-disabled);
  background-color: var(--color-bg-tertiary);
  cursor: not-allowed;
  opacity: 0.72;
}

/* Shell geometry follows the admin workspace. */
.saas-sidebar {
  width: 220px;
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-sidebar-border);
  box-shadow: none;
}

.saas-sidebar.collapsed {
  width: 60px;
}

.saas-sidebar-logo {
  min-height: 70px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-sidebar-border);
}

.saas-sidebar-logo-trigger {
  min-height: 34px;
  padding: 0;
}

.saas-sidebar-context-bar {
  gap: 7px;
  padding: 12px 12px 8px;
  border-bottom: 0;
}

.saas-sidebar-context-readonly,
.saas-sidebar-context-bar .saas-site-chip {
  border: 0;
  background: var(--color-sidebar-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-sidebar-border) 72%, transparent);
}

.saas-sidebar-context-readonly {
  min-height: 36px;
}

.saas-sidebar-nav {
  padding: 14px 8px;
}

.saas-sidebar-app-context {
  margin: 2px 4px 14px;
  padding: 10px;
  border: 0;
  background: var(--color-sidebar-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-sidebar-border) 72%, transparent);
}

.saas-nav-group {
  margin-bottom: 14px;
}

.saas-nav-group-label {
  min-height: 24px;
  padding: 0 10px 8px;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.saas-nav-generated-group,
.saas-installed-nav-group {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.saas-nav-generated-group-label {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-md);
}

.saas-nav-items,
.saas-nav-children,
.saas-nav-generated-group .saas-nav-items {
  gap: 2px;
}

.saas-nav-children,
.saas-nav-generated-group .saas-nav-items,
.saas-nav-sub-items {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 0;
}

.saas-nav-link,
.saas-nav-parent-button {
  min-height: 32px;
  padding: 0 10px;
  margin: 0 0 2px;
  border: 0;
  border-radius: var(--radius-md);
}

.saas-nav-link.active,
.saas-nav-parent-button.active {
  font-weight: 600;
  box-shadow: none;
}

.saas-nav-tree-node .saas-nav-link.active {
  box-shadow: none;
}

.saas-nav-expand-button {
  height: 30px;
}

.saas-nav-badge {
  border: 0;
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.saas-sidebar-footer {
  padding: 14px 16px;
  border-top: 0;
}

.saas-sidebar-avatar {
  background: var(--color-brand-soft);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

/* Header and page rhythm match the admin shell. */
.saas-shell-header {
  min-height: 70px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--color-bg-primary) 94%, transparent);
  border-bottom: 1px solid var(--color-border-default);
  box-shadow: none;
}

.saas-shell-header-actions {
  gap: 6px;
}

.saas-shell-icon-button {
  width: 32px;
  height: 32px;
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-shell-icon-button:hover,
.saas-shell-icon-button.active {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.saas-global-search-trigger,
.saas-user-menu-trigger {
  background: var(--color-bg-secondary);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-global-search-trigger:hover,
.saas-global-search-trigger[aria-expanded="true"],
.saas-user-menu-trigger:hover,
.saas-user-menu-trigger[aria-expanded="true"] {
  background: var(--color-bg-primary);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.saas-page-content {
  width: 100%;
  max-width: none;
  padding: 28px 32px 40px;
}

.saas-runtime-page {
  width: min(1440px, 100%);
  margin: 0 auto;
}

.saas-runtime-page-narrow {
  width: min(920px, 100%);
}

.saas-runtime-page-wide {
  width: min(1600px, 100%);
}

/* Runtime header geometry is owned by the canonical block above. This layer
   previously re-declared gap/margin-bottom here, which made the final value
   depend on cascade order. Tune rhythm via tokens instead of re-declaring. */
.saas-runtime-page-title {
  gap: 10px;
}

.saas-runtime-page-title .saas-title-xl {
  font-size: 22px;
  line-height: 1.2;
}

.saas-runtime-page-description {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.saas-page-header-actions,
.saas-runtime-section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Toolbar: keep the bordered, rounded container defined by the runtime shell.
   This previously flattened the toolbar (padding/border/radius set to 0) which
   contradicted `.saas-runtime-toolbar` above and made toolbars read as unstyled
   raw rows. The runtime shell owns the visual; this layer only tunes rhythm. */
.saas-runtime-toolbar,
.ruoyi-toolbar {
  min-height: 44px;
  margin-bottom: 18px;
}

/* ── Tabs (previously referenced with no CSS at all) ─────────────
   `saas-tabs` / `saas-tab-count` were used by AuditLogPage but had zero style
   definitions, so tabs rendered as unstyled buttons. */
.saas-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}
.saas-tabs > button,
.saas-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.saas-tabs > button:hover,
.saas-tab:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.saas-tabs > button.active,
.saas-tabs > button[aria-selected="true"],
.saas-tab.active,
.saas-tab[aria-selected="true"] {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
}
.saas-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-family: var(--font-code);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.saas-tab-count-danger { background: var(--color-danger); color: var(--color-on-danger); }
.saas-tab-count-warning { background: var(--color-warning); color: var(--color-on-warning); }

/* ── Missing badge variants ────────────────────────────────────
   Audit log rows/tabs referenced `saas-badge-neutral` and
   `saas-badge-billing`, which had no definitions, so those badges rendered
   with no colour at all. */
.saas-badge-neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}
.saas-badge-billing {
  background: var(--color-purple-subtle);
  color: var(--color-purple);
  border: 1px solid var(--color-purple-line);
}

/* ── Filter chips ──────────────────────────────────────────────
   `.saas-chip` was used ~20 times by the audit log but never defined, so every
   filter rendered as a raw unstyled button. */
.saas-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.saas-chip:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.saas-chip.active,
.saas-chip[aria-pressed="true"] {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 600;
}

/* ── List group ────────────────────────────────────────────────
   `.saas-list-group` was used by the audit log to stack expandable rows but
   had no definition; rows previously relied on inline styles. */
.saas-list-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.saas-list-group > * + * {
  border-top: 1px solid var(--color-border-default);
}

/* ── Inline alert ──────────────────────────────────────────────
   `.saas-alert` / `.saas-alert-danger` were referenced with no styles. */
.saas-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.saas-alert-danger {
  border-color: var(--color-danger-line);
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}
.saas-alert-success {
  border-color: var(--color-success-line);
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.saas-alert-warning {
  border-color: var(--color-warning-line);
  background: var(--color-warning-subtle);
  color: var(--color-warning-strong);
}

/* ── Audit log: rows, diff viewer, summary tiles, distribution bars ──
   Replaces the inline `style={{...}}` layout that made this page diverge from
   the rest of the workspace. */
.saas-audit-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.saas-audit-toolbar {
  margin-bottom: 16px;
}
.saas-audit-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.saas-audit-filter-row + .saas-audit-filter-row {
  margin-top: 8px;
}
.saas-audit-filter-label {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.saas-audit-filter-label-spaced {
  margin-left: 8px;
}

.saas-audit-table-head {
  padding: 6px 12px;
  margin-bottom: 4px;
}
.saas-audit-grid {
  display: grid;
  grid-template-columns: 140px 200px minmax(0, 1fr) 80px 80px;
  gap: 8px;
  align-items: center;
}
.saas-audit-grid-head {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.saas-audit-grid-head-right,
.saas-audit-cell-right {
  text-align: right;
}

.saas-audit-row {
  display: grid;
  grid-template-columns: 140px 200px minmax(0, 1fr) 80px 80px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}
.saas-audit-row:hover,
.saas-audit-row.expanded {
  background: var(--color-bg-secondary);
}
.saas-audit-row:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}
.saas-audit-time {
  color: var(--color-text-secondary);
  font-family: var(--font-code);
  font-size: 11px;
}
.saas-audit-toggle {
  color: var(--color-text-muted);
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}
.saas-audit-resource {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  min-width: 0;
}
.saas-audit-resource-id {
  margin-left: 4px;
  font-family: var(--font-code);
}

.saas-audit-detail {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.saas-audit-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 6px;
}
.saas-audit-detail-meta code {
  font-family: var(--font-code);
  font-size: 10px;
}
.saas-audit-error {
  margin-bottom: 6px;
  color: var(--color-danger);
}
.saas-audit-agent {
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.saas-audit-diff {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  font-family: var(--font-code);
  font-size: 11px;
}
.saas-audit-diff-changed { color: var(--color-warning-strong); }
.saas-audit-diff-added { color: var(--color-success-strong); }
.saas-audit-diff-removed { color: var(--color-danger-strong); }

.saas-audit-suspicious {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid var(--color-danger-line);
  border-radius: var(--radius-md);
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}
.saas-audit-suspicious-body { flex: 1; min-width: 0; }
.saas-audit-suspicious-title { font-size: 13px; font-weight: 600; }
.saas-audit-suspicious-meta { margin-top: 2px; font-size: 11px; }
.saas-audit-suspicious-window { font-size: 10px; color: var(--color-danger); }

.saas-audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.saas-audit-summary-tile {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  text-align: center;
}
.saas-audit-summary-icon {
  margin-bottom: 4px;
  color: var(--color-brand);
}
.saas-audit-summary-value {
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 700;
}
.saas-audit-summary-label {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.saas-audit-generated-at {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.saas-audit-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-audit-dist-row + .saas-audit-dist-row { margin-top: 6px; }
.saas-audit-dist-label {
  width: 160px;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saas-audit-dist-track {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}
.saas-audit-dist-fill {
  width: 0;
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-purple);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease);
}
.saas-audit-dist-count {
  width: 40px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.saas-audit-card { margin-bottom: 16px; }
.saas-audit-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
}
.saas-audit-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.saas-audit-field-label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.saas-audit-compact-input {
  padding: 6px 8px;
  font-size: 12px;
}
.saas-audit-submit { align-self: flex-end; }

.saas-audit-state {
  padding: 40px;
  color: var(--color-text-muted);
  text-align: center;
}
.saas-audit-state-lg { padding: 60px; }
.saas-audit-state-spin { margin: 0 auto 12px; }
.saas-audit-state-title { font-size: 14px; }
.saas-audit-state-title-lg { font-size: 16px; font-weight: 600; }
.saas-audit-state-desc { margin-top: 4px; font-size: 12px; }
.saas-audit-state-desc-lg { margin-top: 8px; font-size: 13px; }
.saas-audit-state-icon { margin-bottom: 8px; }
.saas-audit-state-icon-lg { margin-bottom: 12px; }
.saas-audit-state-success { color: var(--color-success); }
.saas-audit-state-success .saas-audit-state-desc { color: var(--color-success-strong); }

@media (max-width: 768px) {
  .saas-audit-grid,
  .saas-audit-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 4px;
  }
  .saas-audit-grid-head { display: none; }
  .saas-audit-dist-label { width: 100px; }
}

.saas-runtime-section {
  margin-bottom: 28px;
}

.saas-runtime-section-header {
  margin-bottom: 12px;
}

.saas-not-found-panel {
  display: grid;
  justify-items: center;
  min-height: 280px;
  padding: 64px 24px;
  text-align: center;
  background: color-mix(in srgb, var(--color-bg-primary) 92%, var(--color-brand) 8%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.saas-not-found-code {
  margin-bottom: 10px;
  color: var(--color-brand);
  font-family: var(--font-code);
  font-size: clamp(64px, 12vw, 112px);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.saas-not-found-path {
  display: block;
  max-width: min(720px, 100%);
  margin-top: 4px;
  padding: 10px 14px;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  font-family: var(--font-code);
  font-size: 12px;
}

/* Surface hierarchy: cards float by tone and shadow, not by heavy outlines. */
.saas-card,
.saas-stat {
  border: 0;
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.saas-card:hover,
.saas-stat:hover {
  box-shadow: var(--shadow-md);
}

.saas-card-label,
.saas-stat-label {
  color: var(--color-text-muted);
}

.saas-table-wrap,
.saas-generated-report-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.saas-table,
.saas-root .data-table{
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text-primary);
  font-size: 13px;
}

.saas-table th,
.saas-root .data-table-th{
  height: 44px;
  padding: 0 14px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-bottom: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.saas-table td,
.saas-root .data-table-td{
  min-height: 48px;
  padding: 13px 14px;
  color: var(--color-text-primary);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
  vertical-align: middle;
}

.saas-table tbody tr:hover td,
.saas-root .data-table-row:hover td{
  background: var(--color-bg-secondary);
}

.saas-table tbody tr:last-child td,
.saas-root .data-table-row:last-child td{
  box-shadow: none;
}

.saas-root .data-table {
  min-width: 640px;
}

.saas-root .data-table-th {
  padding: 0 16px;
}

.saas-root .data-table-td {
  padding: 14px 16px;
}

.saas-root .data-table-sort-button {
  min-height: 44px;
  color: inherit;
}

.saas-root .data-table-row.selected td {
  background: var(--color-brand-subtle);
}

.saas-root .data-table-empty{
  min-height: 168px;
  padding: 48px 20px;
  color: var(--color-text-muted);
  background: var(--color-bg-primary);
}

/* Shared controls use the same 36px baseline as the admin workspace. */
.saas-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--duration-fast), box-shadow var(--duration-normal), color var(--duration-fast), transform var(--duration-fast);
}

.saas-btn:hover:not(:disabled) {
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.saas-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.saas-btn-primary {
  background: var(--color-brand);
  color: var(--color-brand-text);
  box-shadow: none;
}

.saas-btn-primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
  box-shadow: none;
}

.saas-btn-secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.saas-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
}

.saas-btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  box-shadow: none;
}

.saas-btn-danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
  box-shadow: none;
}

.saas-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger-strong);
  box-shadow: none;
}

.saas-btn-sm {
  min-height: 32px;
  padding: 0 11px;
  font-size: 11px;
}

.saas-btn-xs {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
}

.saas-btn-lg {
  min-height: 40px;
  padding-inline: 16px;
}

.saas-btn:disabled {
  opacity: 0.45;
}

.saas-root .saas-input,
.saas-root .saas-select {
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-input:focus,
.saas-root .saas-select:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-brand), 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.saas-root .saas-global-search-input-wrap input,
.saas-root .saas-app-switcher-menu input {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.saas-root .saas-global-search-input-wrap input:focus-visible,
.saas-root .saas-app-switcher-menu input:focus-visible {
  box-shadow: none;
}

.saas-root .pagi-btn {
  min-width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .pagi-btn:hover:not(:disabled):not(.pagi-btn--active) {
  border-color: transparent;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.saas-root .pagi-btn--active {
  border-color: transparent;
  background: var(--color-brand);
  color: var(--color-brand-text);
  box-shadow: none;
}

/* Popovers and dialogs keep one quiet perimeter only. */
.saas-root .modal-box,
.saas-root .saas-notification-popover,
.saas-root .saas-app-switcher-menu,
.saas-root .saas-user-menu-popover,
.saas-root .saas-global-search-popover {
  border: 0;
  box-shadow: var(--shadow-xl);
}

@media (max-width: 900px) {
  .saas-page-content {
    padding-inline: 24px;
  }
}

@media (max-width: 768px) {
  .saas-shell-header {
    min-height: 58px;
    padding-inline: 16px;
  }

  .saas-page-content {
    padding: 24px 16px 36px;
  }

  .saas-sidebar,
  .saas-sidebar.collapsed {
    width: 100%;
  }

  .saas-runtime-page-header,
  .saas-runtime-toolbar,
  .saas-runtime-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-runtime-page-title .saas-title-xl {
    font-size: 19px;
  }

  .saas-page-header-actions,
  .saas-runtime-toolbar-start,
  .saas-runtime-toolbar-end,
  .saas-runtime-section-actions {
    width: 100%;
  }

  .saas-page-header-actions .saas-btn,
  .saas-runtime-toolbar-end .saas-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .saas-root .data-table {
    min-width: 620px;
  }
}

@media (max-width: 480px) {
  .saas-page-content {
    padding-inline: 12px;
  }

  .saas-runtime-page-header {
    margin-bottom: 18px;
  }

  .saas-card {
    padding: 16px;
  }

  .saas-table th,
  .saas-table td,
  .saas-root .data-table-th,
  .saas-root .data-table-td {
    padding-inline: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Customer workspace page skin
   These rules are scoped to .saas-root so the platform console
   keeps its own admin composition.
   ───────────────────────────────────────────────────────────── */
.saas-root .saas-page-header {
  margin-bottom: 20px;
}

.saas-root .saas-page-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saas-root .saas-page-header-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-border) 72%, transparent);
}

.saas-root .saas-page-header-desc {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.saas-root .saas-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Dashboard and legacy workspace cards. */
.saas-root .saas-stat-row {
  gap: 12px;
  margin-bottom: 16px;
}

.saas-root .saas-stat {
  min-height: 92px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-stat-label {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.saas-root .saas-stat-value {
  margin-top: 8px;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.saas-root .saas-stat-sub {
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.saas-root .saas-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}

.saas-root .saas-dashboard-left,
.saas-root .saas-dashboard-right {
  gap: 16px;
}

.saas-root .saas-dashboard-left > .saas-card,
.saas-root .saas-dashboard-right > .saas-card {
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-quick-link {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-quick-link:hover {
  color: var(--color-text-primary);
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

.saas-root .saas-event-tag {
  padding: 3px 7px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 0;
  border-radius: var(--radius-sm);
}

.saas-root .saas-activated-row,
.saas-root .saas-top-service-row {
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-md);
}

.saas-root .saas-activated-row:hover,
.saas-root .saas-top-service-row:hover {
  background: var(--color-bg-secondary);
}

.saas-root .saas-onboarding-cta {
  border: 0;
  box-shadow: var(--shadow-md);
}

.saas-root .saas-bundle-card-mini {
  border: 0;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-bundle-card-mini:hover {
  border-color: transparent;
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand-border), var(--shadow-xs);
}

/* Services workspace: selection first, execution second. */
.saas-root .saas-services-page {
  gap: 24px;
}

.saas-root .saas-services-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.saas-root .saas-services-stats .saas-stat {
  min-height: 84px;
}

.saas-root .saas-services-page .saas-section {
  margin-bottom: 0;
}

.saas-root .saas-scene-grid {
  gap: 8px;
}

.saas-root .saas-scene-card {
  min-height: 64px;
  padding: 11px 13px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-scene-card:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border-strong), var(--shadow-xs);
}

.saas-root .saas-scene-card.active {
  color: var(--color-brand-text);
  background: var(--color-brand);
  border-color: transparent;
  box-shadow: none;
}

.saas-root .saas-scene-card.active .saas-scene-icon {
  color: inherit;
}

.saas-root .saas-scene-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}

.saas-root .saas-scene-card.active .saas-scene-icon {
  background: rgba(255, 255, 255, 0.16);
}

.saas-root .saas-pill {
  min-height: 32px;
  padding: 0 11px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-pill:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.saas-root .saas-pill.active {
  color: var(--color-brand-text);
  background: var(--color-brand);
  border-color: transparent;
  box-shadow: none;
}

.saas-root .saas-search-row {
  min-height: 40px;
  margin-bottom: 0;
  padding: 0 12px;
  color: var(--color-text-muted);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-xs);
}

.saas-root .saas-search-input {
  min-height: 40px;
  padding: 0 34px;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.saas-root .saas-search-input:focus {
  box-shadow: none;
}

.saas-root .saas-search-clear {
  color: var(--color-text-muted);
}

.saas-root .saas-search-clear:hover {
  color: var(--color-text-primary);
}

.saas-root .saas-service-list {
  gap: 8px;
}

.saas-root .saas-service-row {
  min-height: 76px;
  padding: 14px 16px;
  background: var(--color-bg-primary);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-service-row:hover {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.saas-root .saas-service-row.locked {
  opacity: 0.65;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-service-row-icon {
  width: 38px;
  height: 38px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
}

.saas-root .saas-service-row-name {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
}

.saas-root .saas-service-row-desc {
  max-width: 620px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.saas-root .saas-service-row-actions {
  gap: 6px;
}

/* Sites workspace: summary, creation, then a readable list. */
.saas-root .saas-sites-summary {
  min-height: 78px;
  padding: 16px 20px;
  background: var(--color-bg-primary);
  border: 0;
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-sites-summary-context {
  border-left: 0;
  box-shadow: inset 1px 0 0 var(--color-border-muted);
}

.saas-root .saas-sites-count {
  border: 0;
  background: var(--color-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-site-create-form {
  padding: 20px;
  border: 0;
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-site-create-controls {
  flex-basis: 560px;
}

.saas-root .saas-site-card {
  border: 0;
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-site-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.saas-root .saas-site-card.active {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-brand) 34%, transparent), var(--shadow-sm);
}

.saas-root .saas-site-current-tag {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

/* Plans, usage and API keys are data surfaces, not marketing cards. */
.saas-root .saas-plan-grid {
  gap: 14px;
}

.saas-root .saas-plan-card {
  min-width: 0;
  padding: 22px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-plan-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.saas-root .saas-plan-card--current {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-brand) 42%, transparent), var(--shadow-sm);
}

.saas-root .saas-plan-card--popular {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-soft) 48%, var(--color-bg-primary)) 0%, var(--color-bg-primary) 36%);
}

.saas-root .saas-plan-quota {
  margin: 18px 0;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.saas-root .saas-plan-quota-item {
  color: var(--color-text-secondary);
}

.saas-root .saas-plan-quota-value {
  color: var(--color-text-primary);
  font-weight: 650;
}

.saas-root .saas-plan-comparison-table {
  overflow: hidden;
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.saas-root .saas-plan-comparison-table th {
  background: var(--color-bg-secondary);
  border-bottom: 0;
}

.saas-root .saas-plan-comparison-table td {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
}

.saas-root .saas-plan-comparison-table tr:last-child td {
  box-shadow: none;
}

.saas-root .saas-usage-guide {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-scope-item {
  padding: 10px 12px;
  background: var(--color-bg-secondary);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-scope-item:hover,
.saas-root .saas-scope-item:has(input:checked) {
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand-border);
}

.saas-root .saas-key-code,
.saas-root .saas-key-code-sm {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.saas-root .saas-key-code {
  min-width: 0;
}

@media (max-width: 1024px) {
  .saas-root .saas-services-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-root .saas-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 768px) {
  .saas-root .saas-services-stats,
  .saas-root .saas-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-root .saas-service-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .saas-root .saas-service-row-content {
    flex: 1 1 calc(100% - 54px);
  }

  .saas-root .saas-service-row-actions {
    width: 100%;
    padding-left: 46px;
  }

  .saas-root .saas-service-row-actions .saas-btn {
    flex: 1 1 auto;
  }

  .saas-root .saas-site-create-form {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-root .saas-site-create-controls {
    flex-basis: auto;
    flex-wrap: wrap;
  }

  .saas-root .saas-site-create-controls .saas-input,
  .saas-root .saas-site-create-controls .saas-styled-select-trigger,
  .saas-root .saas-site-create-controls .saas-btn {
    flex: 1 1 180px;
  }
}

@media (max-width: 560px) {
  .saas-root .saas-services-stats,
  .saas-root .saas-stat-row {
    grid-template-columns: 1fr;
  }

  .saas-root .saas-sites-summary {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
  }

  .saas-root .saas-sites-summary-context {
    width: 100%;
    margin-left: 0;
    padding: 12px 0 0;
    box-shadow: inset 0 1px 0 var(--color-border-muted);
  }

  .saas-root .saas-site-create-controls {
    flex-direction: column;
  }

  .saas-root .saas-site-create-controls .saas-input,
  .saas-root .saas-site-create-controls .saas-styled-select-trigger,
  .saas-root .saas-site-create-controls .saas-btn {
    width: 100%;
    flex-basis: auto;
  }
}

/* Final operate-first pass: keep page context compact and let actions/data lead. */
.saas-root .saas-runtime-page-description,
.saas-root .saas-page-header-desc,
.saas-root .saas-data-panel-description,
.saas-root .saas-services-header-summary,
.saas-root .saas-bundles-header-summary,
.saas-root .admin-table-summary small {
  display: none;
}

.saas-root .saas-runtime-page-header,
.saas-root .saas-page-header {
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.saas-root .saas-runtime-page-title .saas-title-xl,
.saas-root .saas-page-header-title .saas-title-xl,
.saas-root .saas-page-title {
  font-size: 22px;
  line-height: 1.2;
}

.saas-root .admin-table-head {
  padding-block: 8px 10px;
}

.saas-root .admin-table-filter-row {
  padding-bottom: 12px;
}

@media (max-width: 768px) {
  .saas-root .saas-runtime-page-header,
  .saas-root .saas-page-header {
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
  }
}

/* Compact operations mode: data and actions lead, page chrome recedes. */
.saas-layout {
  --sidebar-width: 220px;
  --shell-header-height: 52px;
  --page-padding-x: 20px;
  --page-padding-y: 16px;
}

.saas-layout .saas-sidebar-logo {
  min-height: 52px;
  padding-inline: 10px;
}

.saas-layout .saas-sidebar-logo-trigger {
  min-height: 36px;
  padding-inline: 7px;
}

.saas-layout .saas-sidebar-context-bar {
  gap: 4px;
  padding: 8px 10px;
}

.saas-layout .saas-sidebar-context-label {
  display: none;
}

.saas-layout .saas-sidebar-context-bar .saas-site-chip,
.saas-layout .saas-sidebar-context-readonly {
  min-height: 32px;
  padding: 6px 8px;
}

.saas-layout .saas-sidebar-nav {
  padding: 5px 6px;
}

.saas-layout .saas-nav-group-label {
  padding: 5px 8px 2px;
  font-size: 10px;
}

.saas-layout .saas-nav-link {
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
}

.saas-layout .saas-nav-generated-group-label {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.saas-layout .saas-sidebar-footer {
  padding: 8px 10px 10px;
}

.saas-layout .saas-shell-header {
  min-height: 52px;
  padding-inline: 16px;
}

.saas-layout .saas-shell-header-actions {
  gap: 4px;
}

.saas-layout .saas-page-content {
  padding: 16px 20px 28px;
}

/* ── Authoritative page-header rhythm ────────────────────────────
   `.saas-layout` wraps every workspace page, so this is the outermost real
   container and the right place to own header rhythm. Earlier tiers
   (`.saas-root`, the canonical blocks) intentionally declare looser defaults
   and are overridden here in one place instead of accumulating conflicts.
   Both the legacy header (`.saas-page-header`) and the SaasPageShell header
   (`.saas-runtime-page-header`) MUST share one rhythm so migrated and
   un-migrated pages look identical. */
.saas-layout .saas-runtime-page-header,
.saas-layout .saas-page-header {
  gap: 10px;
  margin-bottom: 10px;
}

/* Mobile: the legacy header must stack exactly like the runtime header.
   Previously only `.saas-runtime-page-header` stacked, so migrated pages
   reflowed on phones while legacy pages kept a cramped two-column row. */
@media (max-width: 768px) {
  .saas-layout .saas-runtime-page-header,
  .saas-layout .saas-page-header {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ── Compact shell rhythm (mobile) ───────────────────────────────
   This block was written as if inside a `@media (max-width: 768px)` query but
   the surrounding media block had already closed, so compact sizing for the
   toolbar, cards, buttons, inputs and tables was applied at EVERY viewport.
   That flattened `.saas-card-md` (16px) and `.saas-card-lg` (20px) down to the
   12px base card padding, making the whole workspace feel cramped. Re-scoped
   to mobile, which is what the surrounding rules clearly intend. */
@media (max-width: 768px) {
  .saas-layout .saas-shell-breadcrumbs {
    display: none;
  }

  .saas-layout .saas-runtime-page-title .saas-title-xl,
  .saas-layout .saas-page-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .saas-layout .saas-runtime-section {
    margin-bottom: 14px;
  }

  .saas-layout .saas-runtime-section-header {
    margin-bottom: 6px;
  }

  .saas-layout .saas-runtime-section-header .saas-title-md,
  .saas-layout .saas-section-title,
  .saas-layout .saas-data-panel-title {
    font-size: 12px;
  }

  .saas-layout .saas-runtime-toolbar {
    min-height: 36px;
    margin-bottom: 10px;
    gap: 6px;
  }

  .saas-layout .saas-runtime-toolbar-start,
  .saas-layout .saas-runtime-toolbar-end,
  .saas-layout .saas-page-header-actions,
  .saas-layout .saas-runtime-section-actions {
    gap: 6px;
  }

  .saas-layout .saas-card {
    padding: 12px;
    border-radius: 8px;
  }

  .saas-layout .saas-card-sm {
    padding: 8px;
  }

  .saas-layout .saas-card-md,
  .saas-layout .saas-card-lg {
    padding: 12px;
  }

  .saas-layout .saas-btn {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 11px;
  }

  .saas-layout .saas-btn-sm {
    min-height: 28px;
    padding-inline: 9px;
    font-size: 10px;
  }

  .saas-layout .saas-input,
  .saas-layout .saas-select {
    min-height: 32px;
    font-size: 12px;
  }

  .saas-layout .saas-table,
  .saas-layout .data-table,
  .saas-layout .ruoyi-table {
    font-size: 12px;
  }

  .saas-layout .saas-table th,
  .saas-layout .data-table-th,
  .saas-layout .ruoyi-table th {
    height: 36px;
    padding-inline: 10px;
    font-size: 10px;
  }

  .saas-layout .saas-table td,
  .saas-layout .data-table-td,
  .saas-layout .ruoyi-table td {
    min-height: 40px;
    padding: 9px 10px;
  }

  .saas-layout .data-table-sort-button {
    min-height: 36px;
  }

  .saas-layout .admin-table-head {
    padding-block: 6px 8px;
  }

  .saas-layout .admin-table-filter-row {
    padding-bottom: 8px;
  }
  .saas-layout .saas-page-content {
    padding: 12px 14px 24px;
  }

  .saas-layout .saas-sidebar-logo {
    min-height: 48px;
  }
}
/**
 * 主题定义文件
 * 用户可通过以下方式换主题：
 *
 *  1. 直接修改本文件的 CSS 变量值
 *  2. 将本文件引入到自己的主题文件并覆盖变量
 *  3. 在组件中动态设置 document.documentElement.setAttribute('data-theme', 'dark')
 *
 * 主题切换优先级：
 *    data-theme 属性 > localStorage (themeUtils) > light 默认值
 */

/* ── Light Theme（默认）───────────────────────────────────────
   即 globals.css :root 的默认值，可不写，也可覆盖做自定义
   示例：把品牌色从黑色改成蓝色：
   :root[data-theme="light"] {
     --color-brand: #0066cc;
     --color-brand-hover: #0052a3;
   }
   ──────────────────────────────────────────────────────────── */

:root[data-theme="light"],
:root:not([data-theme]) {
  /* 可在此覆盖 light 主题的语义变量 */
}


/* ── Dark Theme ───────────────────────────────────────────────
   所有主题覆盖集中在本文件；组件样式只消费 semantic token。 */
:root[data-theme="dark"] {
  --color-scheme:         dark;
  --color-shadow:         #000000;
  --control-select-icon:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  --color-bg-primary:    var(--p-gray-900);
  --color-bg-secondary:  var(--p-gray-950);
  --color-bg-tertiary:   var(--p-gray-800);
  --color-bg-inverse:    var(--p-gray-0);
  --color-bg:            var(--color-bg-secondary);
  --color-bg-elevated:   var(--color-bg-primary);
  --color-bg-muted:      var(--color-bg-tertiary);

  --color-text-primary:   var(--p-gray-0);
  --color-text-secondary: var(--p-gray-400);
  --color-text-muted:     var(--p-gray-500);
  --color-text-disabled:  var(--p-gray-700);
  --color-text-inverse:   var(--p-gray-900);
  --color-text:           var(--color-text-primary);
  --color-text-link:      var(--color-brand-hover);
  --color-text-on-brand:  var(--p-gray-950);

  --color-border-default: var(--color-border-subtle);
  --color-border-strong:  rgba(255, 255, 255, 0.13);
  --color-border-focus:   rgba(255, 255, 255, 0.20);
  --color-border-muted:   rgba(255, 255, 255, 0.05);
  --color-border:         var(--color-border-default);

  --color-sidebar-bg:      #1c1c1e;
  --color-sidebar-hover:   #2c2c2e;
  --color-sidebar-active:  #3a3a3c;
  --color-sidebar-border:  rgba(255, 255, 255, 0.08);
  --color-sidebar-text-1:  #f5f5f7;
  --color-sidebar-text-2:  #a1a1a6;
  --color-sidebar-text-3:  #8e8e93;
  --color-sidebar-text-4:  #636366;

  --color-brand:        #818cf8;
  --color-brand-hover:  #a5b4fc;
  --color-brand-soft:   rgba(129, 140, 248, 0.14);
  --color-brand-border: rgba(165, 180, 252, 0.34);
  --color-brand-subtle: rgba(129, 140, 248, 0.15);
  --color-brand-text:   var(--p-gray-950);

  --color-success-subtle: rgba(34, 197, 94, 0.08);
  --color-warning-subtle: rgba(245, 158, 11, 0.08);
  --color-danger-subtle:  rgba(239, 68, 68, 0.08);
  --color-info-subtle:    rgba(59, 130, 246, 0.08);
  --color-success-line:   rgba(34, 197, 94, 0.28);
  --color-warning-line:   rgba(245, 158, 11, 0.28);
  --color-danger-line:    rgba(239, 68, 68, 0.28);
  --color-info-line:      rgba(59, 130, 246, 0.28);

  --color-tier-free-bg: var(--p-gray-800);
  --color-tier-paid-bg: var(--p-gray-800);
  --color-purple-subtle: rgba(139, 92, 246, 0.10);
  --color-purple-line:   rgba(167, 139, 250, 0.30);
  --color-purple-strong: #a78bfa;
  --color-orange-subtle: rgba(249, 115, 22, 0.10);

  --color-bg-subtle:       rgba(255, 255, 255, 0.08);
  --color-bg-brand-subtle: color-mix(in srgb, var(--color-brand) 12%, transparent);
  --color-bg-muted-subtle: rgba(255, 255, 255, 0.08);

  --shadow-xs: var(--p-shadow-dark-xs);
  --shadow-sm: var(--p-shadow-dark-sm);
  --shadow-md: var(--p-shadow-dark-md);
  --shadow-lg: var(--p-shadow-dark-lg);
  --shadow-xl: var(--p-shadow-dark-xl);
  --overlay-bg: rgba(0, 0, 0, 0.62);
  --overlay-bg-light: rgba(0, 0, 0, 0.38);
}


/* ── 品牌色主题示例（取消注释即可使用）───────────────────────────────
   themeUtils 接受带小写字母、数字和连字符的自定义主题名。 */
/*
:root[data-theme="brand-blue"] {
  --color-brand:          #0066cc;
  --color-brand-hover:    #0052a3;
  --color-brand-subtle:   #dbeafe;
  --color-brand-text:     #ffffff;
}

:root[data-theme="brand-green"] {
  --color-brand:          #16a34a;
  --color-brand-hover:    #15803d;
  --color-brand-subtle:   #dcfce7;
  --color-brand-text:     #ffffff;
}

:root[data-theme="warm"] {
  --color-brand:          #92400e;
  --color-brand-hover:    #78350f;
  --color-brand-subtle:   #fef3c7;
  --color-brand-text:     #ffffff;
  --color-danger:          #dc2626;
  --color-danger-subtle:   #fef2f2;
}

:root[data-theme="high-contrast"] {
  --color-text-primary:   #000000;
  --color-text-secondary: #3f3f46;
  --color-border-default: #18181b;
  --color-border-strong:  #18181b;
}
*/
/* ============================================================
   Veluvane Admin — active platform console
   Owns admin component aliases and layout styles only.
   Theme values come from globals.css + themes/index.css.
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --admin-bg:          var(--color-bg-secondary);
  --admin-card-bg:     var(--color-bg-primary);
  --admin-header-bg:    var(--color-bg-primary);
  --admin-header-border: var(--color-border-default);

  --admin-text:         var(--color-text-primary);
  --admin-text-muted:   var(--color-text-secondary);
  --admin-text-subtle:  var(--color-text-muted);
  --admin-text-disabled: var(--color-text-disabled);

  --admin-border:       var(--color-border-default);
  --admin-border-light: var(--color-border-muted);
  --admin-row-hover:    var(--color-bg-secondary);

  --admin-sidebar-bg:   var(--color-sidebar-bg);
  --admin-sidebar-text: var(--color-sidebar-text-2);
  --admin-sidebar-active-bg: var(--color-sidebar-active);
  --admin-sidebar-active: var(--color-sidebar-text-1);
  --admin-sidebar-brand-bg: var(--color-brand-soft);
  --admin-sidebar-brand-fg: var(--color-brand);
  --admin-sidebar-footer-bg: var(--color-sidebar-bg);

  --admin-blue:         var(--color-brand);
  --admin-green:        var(--color-success);
  --admin-amber:        var(--color-warning-strong);
  --admin-red:          var(--color-danger-strong);
  --admin-purple: var(--color-purple);

  --admin-radius-sm:    var(--radius-sm);
  --admin-radius:       var(--radius-lg);
  --admin-radius-lg:    var(--radius-xl);

  --admin-shadow-sm:    var(--shadow-sm);
  --admin-shadow-md:    var(--shadow-md);
  --admin-shadow:       var(--shadow-md);
  --admin-shadow-lg:    var(--shadow-lg);

  /* Shared admin layout/control tokens. Components should use these aliases. */
  --admin-space-1:      var(--space-1);
  --admin-space-2:      var(--space-2);
  --admin-space-3:      var(--space-3);
  --admin-space-4:      var(--space-4);
  --admin-space-5:      var(--space-5);
  --admin-space-6:      var(--space-6);
  --admin-space-8:      var(--space-8);
  --admin-space-10:     var(--space-10);
  --admin-sidebar-width: 264px;
  --admin-sidebar-collapsed-width: 72px;
  --admin-control-sm:   32px;
  --admin-control-md:   36px;
  --admin-control-lg:   40px;
  --admin-control-height: 38px;
  --admin-control-height-sm: 32px;
  --admin-control-bg:   var(--color-bg-tertiary);
  --admin-line:         var(--color-border-muted);
  --admin-line-strong:  var(--color-border-strong);
  --admin-overlay:      var(--overlay-bg);
  --admin-focus:        var(--color-brand);
  --admin-focus-ring:   0 0 0 3px color-mix(in srgb, var(--color-brand) 20%, transparent);
  --admin-transition:   var(--duration-normal) var(--ease);
  --admin-canvas:       var(--color-bg-secondary);
  --admin-surface:      var(--color-bg-primary);
  --admin-surface-soft: var(--color-bg-tertiary);
  --admin-surface-hover: var(--color-bg-tertiary);
  --admin-surface-selected: var(--color-brand-soft);
  --admin-surface-1:    var(--admin-surface);
  --admin-surface-2:    var(--admin-surface-soft);
  --admin-soft-surface: var(--admin-surface-soft);
  --admin-accent-surface: var(--admin-surface-selected);
  --admin-divider:      var(--admin-line);
  --admin-divider-strong: var(--admin-line-strong);
  --admin-control-radius: var(--radius-md);
}

/* ── Reset / Base ───────────────────────────────────────────── */
.admin-root {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--admin-text);
  background: var(--admin-bg);
  color-scheme: var(--color-scheme);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

/* Admin controls must not fall back to the browser button skin. */
.admin-root button {
  font-family: var(--font-body);
}

.admin-root button:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
}

/* ── Native Element Reset — 全局主题继承 ────────────────────── */
.admin-root input,
.admin-root select,
.admin-root textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--admin-text);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  transition: border-color var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-root input:focus,
.admin-root select:focus,
.admin-root textarea:focus {
  outline: none;
  border-color: var(--admin-blue);
  box-shadow: var(--admin-focus-ring);
}

.admin-root input::-moz-placeholder, .admin-root textarea::-moz-placeholder {
  color: var(--admin-text-subtle);
}

.admin-root input::placeholder,
.admin-root textarea::placeholder {
  color: var(--admin-text-subtle);
}

.admin-root table {
  border-collapse: collapse;
}

.admin-root a {
  color: var(--admin-blue);
  text-decoration: none;
}

.admin-root a:hover {
  text-decoration: underline;
}

/* ── Page Header ────────────────────────────────────────────── */
.admin-page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 60px;
  background: var(--admin-header-bg);
  border-bottom: 1px solid var(--admin-header-border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-xs);
}

.admin-page-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.admin-page-breadcrumb {
  font-size: 12px;
  color: var(--admin-text-muted);
  margin: 3px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-page-breadcrumb-sep { color: var(--admin-text-disabled); }
.admin-page-actions { display: flex; align-items: center; gap: 8px; }

.admin-page-body {
  padding: 20px 28px 32px;
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin-stat-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  padding: 16px 20px;
  box-shadow: var(--admin-shadow-sm);
  transition: box-shadow 0.18s, transform 0.18s;
  cursor: default;
}

.admin-stat-card:hover {
  box-shadow: var(--admin-shadow);
  transform: translateY(-1px);
}

.admin-stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.admin-stat-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-stat-card-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--admin-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 6px;
}

.admin-stat-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-stat-trend {
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-green);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
}

.admin-stat-trend.down { color: var(--admin-red); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }

.admin-stat-compare {
  font-size: 11px;
  color: var(--admin-text-subtle);
}

/* ── Cards ──────────────────────────────────────────────────── */
.admin-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-sm);
  overflow: hidden;
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--admin-border-light);
  gap: 12px;
}

.admin-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0;
}

.admin-card-subtitle {
  font-size: 11px;
  color: var(--admin-text-subtle);
  margin-top: 2px;
}

.admin-card-body { padding: 16px 20px; }
.admin-card-actions { display: flex; alignItems: center; gap: 8px; }

.admin-model-cost-grid { display: grid; grid-template-columns: minmax(420px, .85fr) minmax(0, 1.5fr); gap: 16px; align-items: start; }
.admin-model-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.admin-model-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-model-active { grid-column: 1 / -1; padding-top: 4px; }
.admin-model-form-footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--admin-border-light); }
.admin-model-muted { color: var(--admin-text-subtle); font-size: 11px; margin-top: 3px; }
.admin-model-negative { color: var(--admin-red) !important; font-weight: 700; }
.admin-model-partial { margin-left: 6px; color: var(--admin-amber); font-size: 10px; }
.admin-alert.success { background: color-mix(in srgb, var(--color-success) 8%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 15%, transparent); }

/* ── Model Pool ─────────────────────────────────────────────── */
.model-pool-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--admin-text-muted);
  font-size: 11px;
}
.model-pool-live-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--admin-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-green) 12%, transparent);
}
.model-pool-stat-model { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-pool-layout { display: grid; grid-template-columns: minmax(320px, .78fr) minmax(0, 1.55fr); gap: 16px; align-items: start; }
.model-pool-route-option.checked { border-color: color-mix(in srgb, var(--admin-blue) 45%, var(--admin-border)); background: color-mix(in srgb, var(--admin-blue) 5%, transparent); }
.model-pool-route-option.primary { opacity: .7; cursor: default; } .model-pool-primary-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--admin-blue) 10%, transparent);
  color: var(--admin-blue);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap; margin-left: 7px; vertical-align: 1px;
}
.model-pool-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.model-pool-routing-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--admin-border-light); }
.model-pool-form-note { display: inline-flex; align-items: center; gap: 5px; color: var(--admin-text-subtle); font-size: 11px; }
.model-pool-list-controls .admin-form-input { width: 130px; }
.model-pool-table td { vertical-align: middle; }
.model-pool-table tbody tr { cursor: pointer; }
.model-pool-table tbody tr:hover td { background: color-mix(in srgb, var(--admin-blue) 4%, transparent); }
.model-pool-list-card-wide { width: 100%; }
.model-pool-layout-single { display: block; }
.model-pool-model-name { display: flex; align-items: center; gap: 5px; }
.model-pool-table code { display: block; margin-top: 4px; color: var(--admin-text-subtle); font-size: 10px; font-family: var(--font-code); }
.model-pool-provider { display: inline-flex; border-radius: 5px; padding: 3px 7px; color: var(--admin-text); background: var(--admin-border-light); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.model-pool-provider-anthropic { background: color-mix(in srgb, #d97757 13%, transparent); color: #a94f35; }
.model-pool-provider-openai { background: color-mix(in srgb, #0d9488 13%, transparent); color: #0f766e; }
.model-pool-provider-deepseek { background: color-mix(in srgb, #2563eb 13%, transparent); color: #1d4ed8; }
.model-pool-capabilities { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.model-pool-capabilities span { padding: 2px 5px; border-radius: 4px; color: var(--admin-text-subtle); background: var(--admin-border-light); font-size: 9px; }
.model-pool-unpriced { color: var(--admin-amber); font-size: 11px; }
.model-pool-empty-note { display: flex; align-items: center; gap: 7px; padding: 12px; border: 1px dashed var(--admin-border); border-radius: 8px; color: var(--admin-text-subtle); font-size: 11px; }
.model-pool-editor { margin-top: 16px; background: var(--admin-card-bg); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-lg); box-shadow: var(--admin-shadow); overflow: hidden; }
.model-pool-editor form { padding: 18px 20px 0; }
.model-pool-editor-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px -20px 0; padding: 12px 20px; border-top: 1px solid var(--admin-border-light); }
.model-pool-check { display: inline-flex; align-items: center; gap: 7px; color: var(--admin-text-muted); font-size: 12px; }
.model-pool-check input { accent-color: var(--admin-blue); }
.model-pool-drawer { width: min(720px, 100vw); height: 100%; overflow-y: auto; background: var(--admin-card-bg); box-shadow: -12px 0 40px color-mix(in srgb, var(--color-shadow) 18%, transparent); }
.model-pool-drawer .model-pool-editor-header { position: sticky; top: 0; z-index: 2; background: var(--admin-card-bg); }
.model-pool-drawer-section { padding: 20px 0; border-bottom: 1px solid var(--admin-border-light); }
.model-pool-drawer-section:last-child { border-bottom: 0; }
.model-pool-drawer-section-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.model-pool-drawer-section-header strong { color: var(--admin-text); font-size: 13px; }
.model-pool-drawer-section-header span { color: var(--admin-text-subtle); font-size: 11px; line-height: 1.5; }
.model-pool-drawer-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.model-pool-drawer-check { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 9px; border: 1px solid var(--admin-border-light); border-radius: 7px; color: var(--admin-text-muted); font-size: 11px; }
.model-pool-drawer-check input { accent-color: var(--admin-blue); }
.model-pool-drawer-policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.model-pool-provider-card { margin-top: 16px; }
.model-pool-provider-body { display: flex; flex-direction: column; gap: 18px; padding: 20px; }
.model-pool-role-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.model-pool-role-tags span { padding: 2px 5px; border-radius: 4px; color: var(--admin-blue); background: color-mix(in srgb, var(--admin-blue) 10%, transparent); font-size: 9px; white-space: nowrap; }
.model-pool-provider-priority { margin-top: 18px; }
.model-pool-provider-priority-list { display: flex; flex-direction: column; gap: 7px; max-width: 560px; }
.model-pool-provider-priority-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--admin-border-light); border-radius: 8px; }
.model-pool-priority-index { width: 20px; color: var(--admin-text-subtle); font-size: 11px; text-align: center; }
.model-pool-provider-priority-spacer { flex: 1; }
.model-pool-provider-priority-item .admin-quick-btn { padding: 5px 8px; font-size: 10px; }
.model-pool-context-row .admin-form-input { width: 125px; flex: 0 0 auto; }

/* ── Expert Pool ─────────────────────────────────────────────── */
.expert-pool-list-card { overflow: hidden; }
.expert-pool-table { min-width: 900px; }
.expert-pool-table td { vertical-align: middle; }
.expert-pool-table tbody tr { cursor: pointer; }
.expert-pool-table tbody tr:hover td { background: color-mix(in srgb, var(--admin-blue) 4%, transparent); }
.expert-pool-name { min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.expert-pool-name strong { color: var(--admin-text); font-size: 12px; }
.expert-pool-name code { color: var(--admin-text-subtle); font-size: 10px; font-family: var(--font-code); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expert-pool-section { padding: 20px 0; border-bottom: 1px solid var(--admin-border-light); }
.expert-pool-section:last-of-type { border-bottom: 0; }
.expert-pool-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 13px; }
.expert-pool-section-heading > div { display: flex; flex-direction: column; gap: 4px; }
.expert-pool-section-heading strong { color: var(--admin-text); font-size: 13px; }
.expert-pool-section-heading span { color: var(--admin-text-subtle); font-size: 11px; line-height: 1.5; }
.expert-pool-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.expert-pool-tag-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.expert-pool-tag-option { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 9px; border: 1px solid var(--admin-border-light); border-radius: 7px; color: var(--admin-text-muted); background: var(--admin-card-bg); font-size: 11px; cursor: pointer; }
.expert-pool-tag-option:has(input:checked) { color: var(--admin-blue); border-color: color-mix(in srgb, var(--admin-blue) 38%, var(--admin-border)); background: color-mix(in srgb, var(--admin-blue) 7%, transparent); }
.expert-pool-tag-option input { accent-color: var(--admin-blue); }
.expert-pool-model-section { padding-bottom: 8px; }
.expert-pool-model-heading { align-items: center; }
.expert-pool-model-search { width: 100%; margin-bottom: 12px; }
.expert-pool-model-list { display: flex; flex-direction: column; gap: 8px; }
.expert-pool-model-card { padding: 11px 12px; border: 1px solid var(--admin-border-light); border-radius: 9px; transition: border-color .15s, background .15s; }
.expert-pool-model-card:hover { border-color: color-mix(in srgb, var(--admin-blue) 30%, var(--admin-border)); background: color-mix(in srgb, var(--admin-blue) 2%, transparent); }
.expert-pool-model-card.selected { border-color: color-mix(in srgb, var(--admin-blue) 45%, var(--admin-border)); background: color-mix(in srgb, var(--admin-blue) 5%, transparent); }
.expert-pool-model-summary { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.expert-pool-model-summary > input { margin-top: 3px; accent-color: var(--admin-blue); }
.expert-pool-model-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.expert-pool-model-copy strong { color: var(--admin-text); font-size: 12px; }
.expert-pool-model-copy code { color: var(--admin-text-subtle); font-family: var(--font-code); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expert-pool-model-copy small { color: var(--admin-text-subtle); font-size: 10px; line-height: 1.4; }
.expert-pool-binding-settings { display: grid; grid-template-columns: 110px auto; gap: 12px 16px; margin: 12px 0 0 25px; padding-top: 12px; border-top: 1px solid var(--admin-border-light); }
.expert-pool-inline-field { display: flex; flex-direction: column; gap: 5px; }
.expert-pool-inline-field > span,
.expert-pool-inline-check > span,
.expert-pool-binding-group > span { color: var(--admin-text-subtle); font-size: 10px; }
.expert-pool-inline-check { display: inline-flex; align-items: center; gap: 7px; align-self: end; min-height: 34px; color: var(--admin-text-muted); font-size: 11px; }
.expert-pool-inline-check input { accent-color: var(--admin-blue); }
.expert-pool-binding-group { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; }
.expert-pool-mini-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.expert-pool-mini-tags label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--admin-border-light); border-radius: 5px; color: var(--admin-text-muted); background: var(--admin-card-bg); font-size: 10px; cursor: pointer; }
.expert-pool-mini-tags label:has(input:checked) { color: var(--admin-blue); border-color: color-mix(in srgb, var(--admin-blue) 35%, var(--admin-border)); background: color-mix(in srgb, var(--admin-blue) 6%, transparent); }
.expert-pool-mini-tags input { accent-color: var(--admin-blue); }

@media (max-width: 1100px) {
  .admin-model-cost-grid { grid-template-columns: 1fr; }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .model-pool-layout { grid-template-columns: 1fr; }
  .model-pool-expert-row > .admin-badge { grid-column: 2 / -1; justify-self: start; }
  .expert-pool-table { min-width: 820px; }
}
@media (max-width: 720px) {
  .model-pool-list-controls .admin-form-input { width: 50%; flex: 1; }
  .model-pool-routing-footer, .model-pool-editor-footer { align-items: stretch; flex-direction: column; }
  .model-pool-form-grid { grid-template-columns: 1fr; }
  .model-pool-drawer-check-grid, .model-pool-drawer-policy-grid { grid-template-columns: 1fr; }
  .model-pool-context-row .admin-form-input { width: 100%; }
  .model-pool-expert-row > .admin-badge { grid-column: auto; }
  .expert-pool-form-grid { grid-template-columns: 1fr; }
  .expert-pool-section-heading { flex-direction: column; }
  .expert-pool-binding-settings { grid-template-columns: 1fr; margin-left: 0; }
  .expert-pool-inline-check { align-self: start; }
}

/* Feature flag management */
.admin-feature-flags-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-feature-flags-envs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 100%;
}

.admin-feature-flags-env {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: var(--admin-card-bg);
  color: var(--admin-text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.admin-feature-flags-env span {
  color: var(--admin-text-subtle);
  font-size: 11px;
}

.admin-feature-flags-env.active {
  border-color: var(--admin-text);
  background: var(--admin-text);
  color: var(--color-text-inverse);
}

.admin-feature-flags-env.active span {
  color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
}

.admin-feature-flags-count {
  flex: 0 0 auto;
  color: var(--admin-text-muted);
  font-size: 12px;
}

.admin-feature-flags-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 16px;
  align-items: start;
}

.admin-feature-flag-list {
  padding: 8px;
}

.admin-feature-flag-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--admin-text);
  text-align: left;
  cursor: pointer;
}

.admin-feature-flag-row:hover,
.admin-feature-flag-row.active {
  background: var(--admin-row-hover);
}

.admin-feature-flag-status {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
}

.admin-feature-flag-status.on {
  background: color-mix(in srgb, var(--admin-green) 13%, transparent);
  color: var(--admin-green);
}

.admin-feature-flag-status.off {
  background: var(--admin-row-hover);
  color: var(--admin-text-subtle);
}

.admin-feature-flag-row-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.admin-feature-flag-row-copy strong,
.admin-feature-flag-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feature-flag-row-copy small,
.admin-feature-flag-help {
  color: var(--admin-text-subtle);
  font-size: 11px;
}

.admin-feature-flag-form {
  padding: 18px 22px 22px;
}

.admin-form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-feature-flag-rollout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.admin-feature-flag-toggle {
  min-height: var(--admin-control-md);
  white-space: nowrap;
}

.admin-feature-flag-actions {
  margin-top: 4px;
}

.admin-feature-flag-preview {
  border-top: 1px solid var(--admin-border-light);
}

.admin-feature-flag-preview-form {
  display: flex;
  gap: 8px;
  padding: 16px 22px 10px;
}

.admin-feature-flag-preview-form .admin-form-input {
  min-width: 0;
  flex: 1;
}

.admin-feature-flag-result {
  margin: 0 22px 18px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.admin-feature-flag-result.on {
  background: color-mix(in srgb, var(--admin-green) 12%, transparent);
  color: var(--admin-green);
}

.admin-feature-flag-result.off {
  background: color-mix(in srgb, var(--admin-amber) 13%, transparent);
  color: var(--admin-amber);
}

@media (max-width: 900px) {
  .admin-feature-flags-layout {
    grid-template-columns: 1fr;
  }
}

/* Pool topology and deployment operations */
.admin-topology-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-business-loop {
  margin-bottom: 16px;
}

.admin-business-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--admin-border-light);
  border-top: 1px solid var(--admin-border-light);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-business-funnel-step {
  min-width: 0;
  padding: 16px 14px;
  background: var(--admin-card-bg);
}

.admin-business-funnel-label,
.admin-business-funnel-step small {
  display: block;
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-business-funnel-step strong {
  display: block;
  margin: 7px 0 9px;
  color: var(--admin-text);
  font-family: var(--font-display);
  font-size: 21px;
}

.admin-business-funnel-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--admin-border-light);
}

.admin-business-funnel-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--admin-blue);
}

.admin-business-funnel-step small {
  margin-top: 7px;
  font-family: var(--font-code);
}

.admin-business-loop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 20px;
  padding: 18px 20px 20px;
}

.admin-business-section-title {
  margin-bottom: 8px;
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-business-section-title span {
  color: var(--admin-text-subtle);
  font-family: var(--font-code);
  font-weight: 500;
}

.admin-opportunity-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-border-light);
}

.admin-opportunity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--admin-card-bg);
}

.admin-opportunity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--admin-blue) 10%, transparent);
  color: var(--admin-blue);
}

.admin-opportunity-icon.retention {
  background: color-mix(in srgb, var(--admin-amber) 13%, transparent);
  color: var(--admin-amber);
}

.admin-opportunity-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.admin-opportunity-copy strong,
.admin-opportunity-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-opportunity-copy strong {
  color: var(--admin-text);
  font-size: 11px;
}

.admin-opportunity-copy span {
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-opportunity-copy b {
  color: var(--admin-text-muted);
  font-weight: 600;
}

.admin-business-trend {
  margin-top: 16px;
}

.admin-business-trend-chart {
  padding: 16px 20px 8px;
  overflow-x: auto;
}

.admin-business-trend-chart > svg {
  display: block;
  min-width: 640px;
  width: 100%;
  height: auto;
}

.admin-business-trend-total {
  margin-left: auto;
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 700;
}

.admin-business-trend-axis {
  display: flex;
  justify-content: space-between;
  min-width: 640px;
  margin-top: 6px;
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-service-ranking-row {
  width: 100%;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.admin-service-ranking-row:hover {
  background: var(--admin-row-hover);
}

.admin-invitation-redemption-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-border-light);
}

.admin-invitation-redemption-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: var(--admin-card-bg);
}

.admin-invitation-redemption-row strong,
.admin-invitation-redemption-row small {
  display: block;
}

.admin-invitation-redemption-row strong {
  color: var(--admin-text);
  font-size: 12px;
}

.admin-invitation-redemption-row small,
.admin-invitation-redemption-meta {
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-invitation-redemption-meta {
  flex: 0 0 auto;
  text-align: right;
}

.admin-invitation-redemption-meta span {
  display: block;
  color: var(--admin-text-muted);
  font-size: 11px;
}

.admin-drawer-loading {
  padding: 28px 0;
  color: var(--admin-text-subtle);
  font-size: 12px;
  text-align: center;
}
.admin-topology-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-topology-toolbar .admin-search-wrap {
  max-width: 420px;
}

.admin-topology-filter {
  width: 150px;
  min-height: 34px;
  flex: 0 0 auto;
}

.admin-topology-filter-count {
  color: var(--admin-text-subtle);
  font-size: 11px;
}

.admin-topology-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
  overflow-x: auto;
}

.admin-topology-column {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-topology-column-title {
  color: var(--admin-text-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.admin-topology-node {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-card-bg);
  color: var(--admin-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--admin-transition), transform var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-topology-node:hover,
.admin-topology-node.selected {
  border-color: var(--admin-blue);
  box-shadow: var(--admin-shadow-sm);
  transform: translateY(-1px);
}

.admin-topology-node-type {
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-topology-node strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.admin-topology-node small {
  color: var(--admin-text-muted);
  font-size: 10px;
}

.admin-topology-node.account_pool { box-shadow: inset 2px 0 0 var(--admin-blue); }
.admin-topology-node.model_pool { box-shadow: inset 2px 0 0 var(--admin-purple); }
.admin-topology-node.model { box-shadow: inset 2px 0 0 var(--admin-green); }
.admin-topology-node.expert { box-shadow: inset 2px 0 0 var(--admin-amber); }

.admin-topology-edge-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 20px;
}

.admin-topology-edge-list-drawer {
  padding: 0;
}

.admin-topology-edge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--admin-border-light);
  border-radius: 8px;
  color: var(--admin-text-muted);
  font-size: 11px;
}

.admin-topology-edge code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-topology-edge small {
  color: var(--admin-text-subtle);
}

.admin-deployment-panels {
  align-items: start;
  margin-top: 16px;
}

.admin-deployment-slot-bar {
  height: 8px;
  margin: 0 20px 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--admin-border-light);
}

.admin-deployment-slot-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--admin-blue);
}

@media (max-width: 900px) {
  .admin-topology-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-topology-flow { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
}

@media (max-width: 560px) {
  .admin-topology-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-topology-toolbar .admin-search-wrap,
  .admin-topology-filter {
    width: 100%;
    max-width: none;
  }

  .admin-topology-summary { grid-template-columns: 1fr 1fr; }
  .admin-topology-flow { padding: 14px; gap: 10px; }
  .admin-topology-edge { grid-template-columns: 1fr; gap: 4px; }
  .admin-topology-edge span { display: none; }
}

@media (max-width: 980px) {
  .admin-business-funnel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-business-loop-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .admin-business-funnel {
    grid-template-columns: 1fr 1fr;
  }

  .admin-business-loop-grid {
    padding-inline: 12px;
  }

  .admin-opportunity-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-opportunity-row .saas-btn {
    margin-left: 38px;
  }
}

@media (max-width: 600px) {
  .admin-feature-flags-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-feature-flags-envs {
    width: 100%;
  }

  .admin-feature-flag-rollout,
  .admin-feature-flag-preview-form {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .admin-feature-flag-form {
    padding-inline: 16px;
  }

  .admin-feature-flag-preview-form {
    padding-inline: 16px;
  }

  .admin-feature-flag-result {
    margin-inline: 16px;
  }
}

/* ── Grid Layouts ────────────────────────────────────────────── */
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ── Settings Page ─────────────────────────────────────────────── */
.admin-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.admin-settings-section { border-top: 1px solid var(--admin-border-light); padding-top: 16px; }
.admin-settings-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.admin-settings-section-body { display: flex; flex-direction: column; }
.admin-card-body-flex { display: flex; flex-direction: column; gap: 18px; }
.admin-card-body-flex-sm { display: flex; flex-direction: column; gap: 16px; }
.admin-approval-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-settings-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.admin-settings-textarea { min-height: 80px; resize: none; }
.admin-settings-textarea-tall { min-height: 88px; resize: none; }
.admin-settings-toggle-stack { display: flex; flex-direction: column; }
.admin-settings-icon-inline { display: flex; align-items: center; }
.admin-settings-reset { border-color: var(--color-border-default); }
.admin-settings-mono-textarea { min-height: 88px; resize: none; }
.admin-settings-stat-value { color: var(--color-text-secondary); }
.admin-settings-progress-track { height: 6px; }
.admin-danger-card { overflow: visible; border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); }
.admin-danger-card .admin-card-header { border-color: color-mix(in srgb, var(--color-danger) 10%, transparent); background: color-mix(in srgb, var(--color-danger) 3%, transparent); }
.admin-danger-card .admin-card-title { color: var(--color-danger); }
.admin-danger-list { display: flex; flex-direction: column; gap: 10px; }
.admin-danger-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--color-bg-secondary); border-radius: 8px; background: var(--color-bg-secondary); }
.admin-danger-item.danger { border-color: color-mix(in srgb, var(--color-danger) 10%, transparent); background: color-mix(in srgb, var(--color-danger) 3%, transparent); }
.admin-danger-item-title { color: var(--color-text-primary); font-size: 13px; font-weight: 600; }
.admin-danger-item.danger .admin-danger-item-title { color: var(--color-danger-strong); }
.admin-danger-item-desc { margin-top: 2px; color: var(--color-text-muted); font-size: 11px; }
.admin-danger-action { flex-shrink: 0; }
.admin-danger-maintenance { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--color-danger) 16%, transparent); border-radius: 8px; background: var(--color-bg-secondary); }
.admin-danger-maintenance.active { background: color-mix(in srgb, var(--color-danger) 6%, transparent); }
.admin-environment-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-environment-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-card-bg);
  color: var(--admin-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.admin-environment-tab.active { border-color: var(--admin-blue); color: var(--admin-text); background: color-mix(in srgb, var(--admin-blue) 8%, var(--admin-card-bg)); }
.admin-environment-tab small { color: var(--admin-blue); font-size: 10px; }
.admin-environment-tab b { min-width: 17px; padding: 1px 5px; border-radius: 10px; background: var(--color-danger); color: var(--color-on-danger); font-size: 10px; text-align: center; }
.admin-environment-message { margin-bottom: 12px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--admin-blue) 20%, var(--admin-border)); border-radius: 8px; color: var(--admin-text-subtle); font-size: 12px; }
.admin-environment-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-environment-summary strong, .admin-environment-summary span { display: block; }
.admin-environment-summary strong { color: var(--admin-text); font-size: 14px; }
.admin-environment-summary span { margin-top: 3px; color: var(--admin-text-subtle); font-size: 11px; }
.admin-environment-diff { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--admin-blue) 24%, var(--admin-border)); border-radius: 8px; background: color-mix(in srgb, var(--admin-blue) 5%, var(--admin-card-bg)); color: var(--admin-text-subtle); font-size: 11px; }
.admin-environment-diff strong { color: var(--admin-text); }
.admin-environment-pending { margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--admin-border-light); }
.admin-environment-pending-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--admin-text-subtle); font-size: 11px; }
.admin-environment-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: 18px; padding-top: 14px; border-top: 1px solid var(--admin-border-light); }
.admin-environment-diff-list { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow: auto; }
.admin-environment-diff-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--admin-border-light); border-radius: 7px; color: var(--admin-text-subtle); font-size: 11px; }
.admin-environment-diff-row strong { color: var(--admin-text); font-size: 12px; }
.admin-environment-import { width: 100%; min-height: 180px; margin-bottom: 9px; resize: vertical; font-family: var(--font-code); font-size: 11px; line-height: 1.55; }
.admin-impact-preview { margin-bottom: 16px; }
.admin-impact-summary { display: flex; gap: 22px; flex-wrap: wrap; color: var(--admin-text-subtle); font-size: 12px; }
.admin-impact-summary strong { color: var(--admin-text); }
.admin-impact-domains { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.admin-impact-warning { margin-top: 8px; padding: 10px 12px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--color-warning) 7%, var(--admin-card-bg)); color: var(--admin-text-subtle); font-size: 11px; }
.admin-impact-stale { margin-top: 12px; color: var(--color-danger); font-size: 11px; }
.admin-field-row { display: flex; flex-direction: column; gap: 6px; }
.admin-field-label { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.admin-field-desc { font-size: 11px; color: var(--admin-text-subtle); margin-bottom: 6px; }
.admin-input-row { display: flex; gap: 8px; }
.admin-input-mono { font-family: var(--font-code); }
.admin-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--admin-border-light);
  border-radius: 8px;
  border: 1px solid var(--admin-border-light);
}
.admin-status-row-label { font-size: 11px; color: var(--admin-text-subtle); margin-bottom: 2px; }
.admin-status-row-value { font-size: 13px; font-weight: 600; color: var(--admin-text); }
.admin-stat-mini {
  padding: 10px 12px;
  background: var(--admin-border-light);
  border-radius: 8px;
  border: 1px solid var(--admin-border-light);
  text-align: center;
  flex: 1;
}
.admin-stat-mini-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 4px; }
.admin-stat-mini-value { font-size: 16px; font-weight: 800; }
.admin-stat-mini-value-dark { color: var(--admin-text); }
.admin-stat-mini-value-green { color: var(--color-success); }
.admin-stat-mini-value-red { color: var(--color-danger); }
.admin-stat-mini-inner {
  padding: 10px 12px;
  background: var(--admin-card-bg);
  border-radius: 8px;
  border: 1px solid var(--admin-border);
  text-align: center;
  flex: 1;
}
.admin-card-danger { border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); overflow: visible; }
.admin-card-header-danger { background: color-mix(in srgb, var(--color-danger) 3%, transparent); border-color: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.admin-title-danger { color: var(--color-danger); }
.admin-danger-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 8px; border: 1px solid; gap: 16px; }
.admin-danger-item-yes { background: color-mix(in srgb, var(--color-danger) 3%, transparent); border-color: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.admin-danger-item-no { background: var(--admin-border-light); border-color: var(--admin-border-light); }
.admin-danger-item-title { font-size: 13px; font-weight: 600; }
.admin-danger-item-desc { font-size: 11px; color: var(--admin-text-subtle); margin-top: 2px; }
.admin-storage-usage { padding: 14px; background: var(--admin-border-light); border-radius: 10px; border: 1px solid var(--admin-border-light); }
.admin-storage-usage-label { font-size: 11px; font-weight: 700; color: var(--admin-text-subtle); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.admin-storage-usage-row { display: flex; gap: 8px; margin-bottom: 10px; }
.admin-storage-pct-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.admin-storage-pct-label { font-size: 11px; color: var(--color-text-secondary); }
.admin-storage-pct-value { font-size: 11px; font-weight: 700; color: var(--admin-text); }
.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-toggle-row-text { flex: 1; min-width: 0; }
.admin-toggle-row-label { font-size: 13px; font-weight: 600; color: var(--admin-text); }
.admin-toggle-row-desc { font-size: 11px; color: var(--admin-text-subtle); margin-top: 3px; }
.admin-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg-primary); transition: left 0.2s; box-shadow: var(--shadow-sm); }
.admin-toggle-thumb-on { left: 21px; }
.admin-toggle-thumb-off { left: 3px; }
.admin-toggle-btn {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.admin-toggle-btn-on { background: var(--color-success); }
.admin-toggle-btn-off { background: var(--admin-text-disabled); }

/* ── Admin Shell Controls ───────────────────────────────────── */
.admin-user-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.admin-root .lang-switcher--icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-root .lang-icon-btn,
.admin-root .lang-icon-select {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-sidebar-border);
  border-radius: var(--admin-radius-sm);
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text-2);
  font: 600 10px/1 var(--font-body);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.admin-root .lang-icon-btn:hover,
.admin-root .lang-icon-btn:focus-visible,
.admin-root .lang-icon-select:hover,
.admin-root .lang-icon-select:focus-visible {
  color: var(--color-sidebar-text-1);
  background: var(--color-sidebar-hover);
  border-color: var(--color-sidebar-text-4);
  outline: none;
}

.admin-root .lang-icon-select {
  min-width: 28px;
  max-width: 28px;
  overflow: hidden;
  white-space: nowrap;
}

.admin-root .lang-icon-select .saas-styled-select-chevron {
  display: none;
}

.admin-root .admin-copy-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--admin-text-subtle);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.admin-root .admin-copy-icon-btn:hover,
.admin-root .admin-copy-icon-btn:focus-visible {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  border-color: var(--admin-border);
  outline: none;
}

.admin-root .admin-user-detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  margin-bottom: -1px;
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--admin-text-muted);
  font: 500 12px/1.2 var(--font-body);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.admin-root .admin-user-detail-tab:hover {
  color: var(--admin-text);
  background: var(--admin-row-hover);
}

.admin-root .admin-user-detail-tab.active {
  color: var(--admin-text);
  background: var(--admin-card-bg);
  border-bottom-color: var(--admin-text);
  font-weight: 650;
}

/* ── Approval Card ──────────────────────────────────────────────── */
.admin-approval-list { display: flex; flex-direction: column; gap: 10; }
.admin-approval-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--admin-border-light);
  border-radius: 10px;
  background: var(--admin-border-light);
}
.admin-approval-change-id { font-size: 12px; font-weight: 700; color: var(--admin-text); }
.admin-approval-meta { font-size: 11px; color: var(--admin-text-subtle); margin-top: 4px; }
.admin-approval-note { font-size: 12px; color: var(--admin-text-muted); margin-top: 8px; }
.admin-approval-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.admin-approval-tag {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  max-width: 240px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  font-size: 11px;
  color: var(--admin-text-muted);
}
.admin-approval-tag-key { color: var(--admin-text); font-weight: 650; }
.admin-approval-tag-value { overflow: hidden; textOverflow: ellipsis; whiteSpace: nowrap; }
.admin-approval-more { font-size: 11px; color: var(--admin-text-subtle); align-self: center; }
.admin-approval-actions { display: flex; gap: 8px; flex-shrink: 0; }
.admin-approval-loading { font-size: 13px; color: var(--color-text-secondary); }

.admin-chart-wrap { padding: 16px 20px 10px; }
.admin-chart-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.admin-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--admin-text-muted);
  font-weight: 500;
}

.admin-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-chart-controls {
  display: flex;
  gap: 4px;
}

.admin-chart-range-btn {
  padding: 4px 10px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  background: transparent;
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.12s;
}

.admin-chart-range-btn.active {
  background: var(--admin-text);
  color: var(--color-text-inverse);
  border-color: var(--admin-text);
}

.admin-chart-range-btn:hover:not(.active) {
  background: var(--admin-row-hover);
  color: var(--admin-text);
}

/* ── Mini Stats (inside cards) ──────────────────────────────── */
.admin-mini-stat { padding: 4px 0; }
.admin-mini-stat-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 3px; font-weight: 500; }
.admin-mini-stat-value { font-size: 15px; font-weight: 700; color: var(--admin-text); }

/* ── Quick Nav Cards ─────────────────────────────────────────── */
.admin-quick-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  text-decoration: none;
  color: inherit;
  transition: all 0.18s;
  box-shadow: var(--admin-shadow-sm);
  cursor: pointer;
}

.admin-quick-nav-card:hover {
  border-color: var(--admin-text-disabled);
  box-shadow: var(--admin-shadow);
  transform: translateY(-1px);
}

.admin-quick-nav-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--admin-text);
  margin-bottom: 2px;
}

.admin-quick-nav-desc {
  font-size: 11px;
  color: var(--admin-text-muted);
}
.admin-quick-nav-arrow {
  color: var(--admin-text-disabled);
  font-size: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.admin-quick-nav-card:hover .admin-quick-nav-arrow { color: var(--admin-text-muted); }

/* ── Activity Feed Items ─────────────────────────────────────── */
/* Note: .admin-activity-item base is defined later at line ~4634 */
.admin-activity-text { font-size: 12px; color: var(--admin-text); line-height: 1.4; }
.admin-activity-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── Notification Items ──────────────────────────────────────── */
.admin-notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--admin-border-light);
  transition: background 0.12s;
}
.admin-notif-item:last-child { border-bottom: none; }

.admin-forecast-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 20px 16px;
  padding: 10px 12px;
  border: 1px solid var(--admin-border-light);
  border-radius: 9px;
  background: var(--admin-row-hover);
}
.admin-forecast-label { color: var(--admin-text-subtle); font-size: 10px; font-weight: 700; }
.admin-forecast-empty { color: var(--admin-text-disabled); font-size: 10px; }
.admin-forecast-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: 10px;
}
.admin-forecast-item span { color: var(--admin-text-muted); }
.admin-quick-actions-card { margin-bottom: 12px; }
.admin-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 20px 16px;
}
.admin-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  color: var(--admin-text);
  background: var(--admin-card-bg);
  font-size: 11px;
  text-decoration: none;
}
.admin-quick-action:hover { border-color: var(--admin-text-disabled); background: var(--admin-row-hover); }
.admin-quick-action > span { display: inline-flex; color: var(--admin-blue); }
.admin-quick-action > svg { color: var(--admin-text-disabled); }
.admin-notif-item:hover { background: var(--admin-row-hover); }
.admin-notif-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.admin-notif-body { flex: 1; min-width: 0; }
.admin-notif-text { font-size: 12px; color: var(--admin-text); line-height: 1.4; }
.admin-notif-meta { font-size: 10px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── Inline Stat Grid (inside cards) ─────────────────────────── */
.admin-inline-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
  border: 1px solid var(--admin-border);
  margin: 0 20px 16px;
}
.admin-inline-stat { background: var(--admin-card-bg); padding: 16px 14px; text-align: center; }
.admin-inline-stat-label {
  font-size: 10px; font-weight: 600; color: var(--admin-text-subtle);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px;
}
.admin-inline-stat-value {
  font-size: 20px; font-weight: 800; color: var(--admin-text);
  letter-spacing: -0.02em;
}
.admin-inline-stat-trend { font-size: 10px; font-weight: 600; margin-top: 4px; }
.admin-inline-stat-trend.up { color: var(--admin-green); }
.admin-inline-stat-trend.down { color: var(--admin-red); }

/* ── Traffic Stats Row ───────────────────────────────────────── */
.admin-traffic-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
  border: 1px solid var(--admin-border);
  margin: 0 20px 14px;
}
.admin-traffic-stat { background: var(--admin-card-bg); padding: 14px; text-align: center; }
.admin-traffic-stat-label {
  font-size: 10px; color: var(--admin-text-subtle);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px;
}
.admin-traffic-stat-value {
  font-size: 17px; font-weight: 800; color: var(--admin-text); letter-spacing: -0.02em;
}

/* ── Mini Stats Row ─────────────────────────────────────────── */
.admin-mini-stats {
  display: flex; gap: 20px;
  padding: 0 20px 16px;
}
.admin-mini-stats-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 2px; }
.admin-mini-stats-value { font-size: 17px; font-weight: 800; color: var(--admin-text); }

/* ── Donut Legend ───────────────────────────────────────────── */
.admin-donut-wrap {
  display: flex; align-items: center; gap: 24px; padding: 20px;
}
.admin-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.admin-donut-legend-row { display: flex; align-items: center; gap: 8px; }
.admin-donut-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.admin-donut-legend-label { font-size: 11px; color: var(--admin-text-muted); flex: 1; }
.admin-donut-legend-value { font-size: 11px; font-weight: 700; color: var(--admin-text); }
.admin-donut-legend-pct { font-size: 10px; color: var(--admin-text-subtle); width: 36px; text-align: right; }

/* ── Chart Date Labels ──────────────────────────────────────── */
.admin-chart-labels {
  display: flex; justify-content: space-between; font-size: 10px;
  color: var(--admin-text-disabled); margin-top: 4px; padding: 0 20px;
}

/* ── Top Users Table ─────────────────────────────────────────── */
.admin-top-users-header {
  display: grid;
  grid-template-columns: 40px 1fr 120px 100px 80px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--admin-border);
}
.admin-top-users-col {
  font-size: 10px; font-weight: 700; color: var(--admin-text-subtle);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.admin-top-users-col.right { text-align: right; }
.admin-top-users-row {
  display: grid;
  grid-template-columns: 40px 1fr 120px 100px 80px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--admin-border-light);
  transition: background 0.12s;
}
.admin-top-users-row:last-child { border-bottom: none; }
.admin-top-users-row:hover { background: var(--admin-row-hover); }
.admin-top-users-rank { font-size: 11px; font-weight: 800; text-align: center; font-family: var(--font-code); }
.admin-top-users-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-top-users-id {
  font-size: 12px; color: var(--admin-text); font-family: var(--font-code);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-top-users-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ── Drawer ──────────────────────────────────────────────────── */
.admin-drawer {
  position: fixed; top: 0; right: 0; width: 480px; height: 100vh;
  background: var(--admin-card-bg); box-shadow: var(--admin-shadow-lg);
  z-index: 200; display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.admin-drawer.open { transform: translateX(0); }
.admin-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--admin-border); flex-shrink: 0;
}
.admin-drawer-title { font-size: 14px; font-weight: 700; }
.admin-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.admin-drawer-footer { padding: 16px 20px; border-top: 1px solid var(--admin-border); flex-shrink: 0; }
.admin-drawer-overlay { position: fixed; inset: 0; background: var(--overlay-bg-light); z-index: 199; display: none; }
.admin-drawer-overlay.open { display: block; }

/* ── Badges ─────────────────────────────────────────────────── */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.admin-badge.green { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); }
.admin-badge.blue  { background: color-mix(in srgb, var(--color-brand) 10%, transparent); color: var(--color-brand); }
.admin-badge.amber { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); }
.admin-badge.red   { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.admin-badge.purple { background: color-mix(in srgb, var(--color-purple) 10%, transparent); color: var(--color-purple); }
.admin-badge.gray  { background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent); color: var(--color-text-secondary); }
.admin-badge.black { background: color-mix(in srgb, var(--color-bg-inverse) 80%, transparent); color: var(--color-text-primary); }

/* ── Badge Dot ─────────────────────────────────────────────────── */
/* Note: .admin-badge-dot base is defined later at line ~4702 */

/* Plan badges */
.admin-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.admin-plan-badge.free       { background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent); color: var(--color-text-secondary); border-color: color-mix(in srgb, var(--color-text-secondary) 20%, transparent); }
.admin-plan-badge.starter    { background: color-mix(in srgb, var(--color-brand) 10%, transparent); color: var(--color-brand); border-color: color-mix(in srgb, var(--color-brand) 20%, transparent); }
.admin-plan-badge.pro        { background: color-mix(in srgb, var(--color-purple) 10%, transparent); color: var(--color-purple); border-color: color-mix(in srgb, var(--color-purple) 20%, transparent); }
.admin-plan-badge.enterprise { background: color-mix(in srgb, var(--color-bg-inverse) 80%, transparent); color: var(--color-text-primary); border-color: color-mix(in srgb, var(--color-bg-inverse) 150%, transparent); }

/* ── Live Badge ─────────────────────────────────────────────── */
.admin-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  color: var(--color-success);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.admin-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  animation: adminPulse 1.8s ease-in-out infinite;
}

@keyframes adminPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ── Alerts ──────────────────────────────────────────────────── */
/* Note: .admin-alert base is defined later at line ~4235 */

/* ── Tables ─────────────────────────────────────────────────── */
.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table thead tr {
  border-bottom: 1px solid var(--admin-border);
}

.admin-table th {
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
  background: var(--admin-border-light);
}

.admin-table th.col-right { text-align: right; }

.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--admin-border-light);
  color: var(--admin-text);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-table tbody tr:hover td { background: var(--admin-row-hover); }
.admin-text-btn {
  border: 0;
  background: transparent;
  color: var(--admin-blue);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 2px 0;
}
.admin-text-btn:hover { text-decoration: underline; }
.admin-text-btn.danger { color: var(--color-danger); }
.admin-benchmark-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--color-border-default);
}
@media (max-width: 760px) {
  .admin-benchmark-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .admin-benchmark-form { grid-template-columns: 1fr; }
}

.admin-table tbody tr.clickable { cursor: pointer; }

.admin-table-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--admin-text-subtle);
  font-size: 13px;
}

.col-right { text-align: right; }

/* ── Table Toolbar ──────────────────────────────────────────── */
.admin-table-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--admin-border-light);
  flex-wrap: wrap;
}

.admin-table-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  padding: 6px 10px;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  transition: border-color 0.15s;
}

.admin-table-search-wrap:focus-within { border-color: var(--admin-blue); }

.admin-table-search-icon { font-size: 13px; color: var(--admin-text-subtle); flex-shrink: 0; }

.admin-table-search {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: var(--admin-text);
  flex: 1;
  font-family: var(--font-body);
  min-width: 0;
}

.admin-table-search::-moz-placeholder { color: var(--admin-text-subtle); }

.admin-table-search::placeholder { color: var(--admin-text-subtle); }

.admin-table-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  min-width: 80px;
}

.admin-table-filter-select:focus { border-color: var(--admin-blue); }

.admin-column-settings { position: relative; }
.admin-column-settings > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-column-settings > summary::-webkit-details-marker { display: none; }
.admin-column-settings-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 170px;
  padding: 10px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card-bg);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-shadow) 14%, transparent);
}
.admin-column-settings-title {
  margin-bottom: 7px;
  color: var(--admin-text-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.admin-column-settings-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  color: var(--admin-text);
  font-size: 11px;
  cursor: pointer;
}
.admin-column-settings-item:hover { background: var(--admin-row-hover); }
.admin-dashboard-layout-popover { min-width: 190px; }

.admin-onboarding-card {
  border-color: color-mix(in srgb, var(--admin-blue) 28%, var(--admin-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--admin-blue) 5%, var(--admin-card-bg)), var(--admin-card-bg));
}
.admin-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 20px 18px;
}
.admin-onboarding-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  color: var(--admin-text);
  background: color-mix(in srgb, var(--admin-card-bg) 88%, transparent);
  text-decoration: none;
}
.admin-onboarding-step:hover { border-color: var(--admin-blue); }
.admin-onboarding-step-number {
  color: var(--admin-blue);
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 700;
}
.admin-onboarding-step strong,
.admin-onboarding-step small { display: block; }
.admin-onboarding-step strong { font-size: 11px; }
.admin-onboarding-step small { margin-top: 3px; color: var(--admin-text-subtle); font-size: 10px; line-height: 1.35; }
.admin-onboarding-step > svg { flex-shrink: 0; color: var(--admin-text-disabled); }

.admin-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--overlay-bg);
}
.admin-preview-dialog {
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-lg);
}
.admin-preview-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px 14px;
  color: var(--admin-text-subtle);
  font-size: 11px;
}
.admin-preview-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 20px 16px;
}
.admin-preview-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  color: var(--admin-text);
  font-size: 11px;
}
.admin-preview-row > span {
  min-width: 18px;
  color: var(--admin-blue);
  font-family: var(--font-code);
  font-size: 10px;
}
.admin-preview-dialog > .admin-card-footer { padding: 12px 20px 16px; }

.admin-segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg);
}
.admin-segmented-control button {
  border: 0;
  border-radius: 5px;
  padding: 5px 8px;
  color: var(--admin-text-subtle);
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.admin-segmented-control button.active {
  color: var(--admin-text);
  background: var(--admin-card-bg);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-shadow) 12%, transparent);
}
.admin-model-low-margin { color: var(--admin-amber); font-weight: 700; }

@media (max-width: 760px) {
  .admin-onboarding-grid { grid-template-columns: 1fr; }
  .admin-preview-backdrop { padding: 10px; }
  .admin-preview-summary { align-items: flex-start; flex-direction: column; }
  .admin-segmented-control { width: 100%; overflow-x: auto; }
  .admin-segmented-control button { white-space: nowrap; }
}

/* Cover admin selects that do not use the table-filter variant. */
.admin-root select {
  min-height: 34px;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background-color: var(--admin-card-bg);
  background-image: var(--control-select-icon);
  background-repeat: no-repeat;
  background-position: right 9px center;
  color: var(--admin-text);
  font-family: var(--font-body);
  line-height: 1.4;
  outline: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-root select:focus {
  border-color: var(--admin-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-blue) 18%, transparent);
}
.admin-root select:disabled {
  color: var(--admin-text-disabled);
  background-color: var(--admin-border-light);
  cursor: not-allowed;
  opacity: 0.75;
}
.admin-root select option {
  background: var(--admin-card-bg);
  color: var(--admin-text);
}
.admin-root select option:disabled {
  color: var(--admin-text-disabled);
}
/* ── Provider account pools ────────────────────────────────── */
.admin-pool-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-pool-list-card { min-width: 0; }
.admin-pool-list { padding: 8px; }
.admin-pool-list-item {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  align-items: start;
  gap: 10px;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--admin-radius);
  background: transparent;
  color: var(--admin-text);
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-pool-list-item:hover { background: var(--admin-row-hover); }
.admin-pool-list-item.active { background: var(--color-brand-soft); color: var(--admin-text); }
.admin-pool-list-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--admin-row-hover);
  color: var(--admin-text-muted);
}
.admin-pool-list-item.active .admin-pool-list-mark { background: var(--color-brand); color: var(--color-brand-text); }
.admin-pool-list-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-pool-list-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.admin-pool-list-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-list-copy code,
.admin-pool-meta-sep { color: var(--admin-text-subtle); font-family: var(--font-code); }
.admin-pool-list-copy > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.admin-pool-list-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--admin-text-subtle); font-size: 10px; font-style: normal; }
.admin-pool-list-arrow { padding-top: 7px; color: var(--admin-text-disabled); font-size: 18px; line-height: 1; }
.admin-pool-detail { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.admin-pool-detail-title-row { display: flex; align-items: center; gap: 8px; }
.admin-pool-overview-card .admin-card-header { align-items: flex-start; }
.admin-pool-overview-card .admin-card-subtitle code { font-family: var(--font-code); }
.admin-pool-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-top: 0.5px solid var(--admin-border); background: var(--admin-border); }
.admin-pool-stat { min-width: 0; padding: 16px 20px; background: var(--admin-card-bg); }
.admin-pool-stat span,
.admin-pool-stat small { display: block; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-stat strong { display: block; margin: 6px 0 4px; color: var(--admin-text); font-family: var(--font-display); font-size: 21px; letter-spacing: -0.03em; }
.admin-pool-stat small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-pool-empty-detail { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; padding: 32px; text-align: center; }
.admin-pool-empty-detail > svg { width: 34px; height: 34px; margin-bottom: 12px; color: var(--admin-text-muted); }
.admin-pool-empty-detail h2 { margin: 0 0 6px; font-size: 16px; }
.admin-pool-empty-detail p { max-width: 360px; margin: 0 0 18px; color: var(--admin-text-subtle); font-size: 12px; }
.admin-pool-loading,
.admin-pool-detail-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 240px; color: var(--admin-text-subtle); font-size: 12px; }
.admin-pool-detail-loading { min-height: 110px; }
.admin-pool-usage-card { overflow: hidden; }
.admin-pool-usage-window { color: var(--admin-text-subtle); font-family: var(--font-code); font-size: 10px; }
.admin-pool-usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--admin-border-light); border-bottom: 1px solid var(--admin-border-light); background: var(--admin-border-light); }
.admin-pool-usage-stat { min-width: 0; padding: 14px 18px; background: var(--admin-card-bg); }
.admin-pool-usage-stat span,
.admin-pool-usage-stat small { display: block; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-usage-stat strong { display: block; margin: 5px 0 3px; color: var(--admin-text); font-family: var(--font-display); font-size: 19px; letter-spacing: -0.03em; }
.admin-pool-usage-stat small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-pool-usage-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding: 16px 22px 8px; }
.admin-pool-usage-column { min-width: 0; }
.admin-pool-usage-heading { margin-bottom: 8px; color: var(--admin-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.admin-pool-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--admin-border-light); }
.admin-pool-usage-row:last-child { border-bottom: 0; }
.admin-pool-usage-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-pool-usage-row-main strong,
.admin-pool-usage-row-main code,
.admin-pool-usage-row-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-pool-usage-row-main strong { color: var(--admin-text); font-size: 11px; }
.admin-pool-usage-row-main code,
.admin-pool-usage-row-main span { color: var(--admin-text-subtle); font-family: var(--font-code); font-size: 9px; }
.admin-pool-usage-row-value { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 3px; }
.admin-pool-usage-row-value strong { color: var(--admin-text); font-family: var(--font-code); font-size: 11px; }
.admin-pool-usage-row-value span { color: var(--admin-text-subtle); font-size: 9px; white-space: nowrap; }
.admin-pool-usage-empty { padding: 12px 0; color: var(--admin-text-subtle); font-size: 11px; }
.admin-pool-usage-failures { margin: 0 22px 16px; padding-top: 14px; border-top: 1px solid var(--admin-border-light); }
.admin-pool-usage-failure { display: grid; grid-template-columns: auto minmax(90px, .8fr) minmax(100px, 1fr) auto auto; align-items: center; gap: 8px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--admin-border-light); font-size: 10px; }
.admin-pool-usage-failure:last-child { border-bottom: 0; }
.admin-pool-usage-failure > span:not(.admin-badge),
.admin-pool-usage-failure code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-pool-usage-failure code { color: var(--admin-text-subtle); font-family: var(--font-code); }
.admin-pool-usage-failure strong { color: var(--color-danger); font-family: var(--font-code); font-size: 9px; }
.admin-pool-usage-failure small { color: var(--admin-text-subtle); white-space: nowrap; }
.admin-pool-alert-card { border-color: color-mix(in srgb, var(--color-warning) 30%, var(--admin-border)); }
.admin-pool-alert-list { display: flex; flex-direction: column; gap: 8px; padding: 16px 22px 20px; }
.admin-pool-alert { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent); border-radius: var(--admin-radius); background: color-mix(in srgb, var(--color-warning) 6%, transparent); color: var(--admin-text); font-size: 12px; }
.admin-pool-alert > svg { flex: 0 0 auto; color: var(--color-warning); }
.admin-pool-alert > span:not(.admin-badge) { flex: 1; }
.admin-pool-intake-card { border-color: color-mix(in srgb, var(--color-brand) 26%, var(--admin-border)); box-shadow: var(--admin-shadow); }
.admin-pool-intake-card .admin-card-header { background: color-mix(in srgb, var(--color-brand-soft) 45%, var(--admin-card-bg)); }
.admin-pool-intake-actions { display: flex; align-items: center; gap: 8px; }
.admin-pool-intake-body { padding: 16px 22px 18px; }
.admin-pool-intake-head { display: grid; grid-template-columns: 28px minmax(110px, .8fr) minmax(120px, 1fr) minmax(190px, 1.35fr) minmax(170px, 1.2fr) 130px 36px; gap: 8px; padding: 0 0 8px; color: var(--admin-text-disabled); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.admin-pool-intake-rows { display: flex; flex-direction: column; gap: 8px; }
.admin-pool-intake-row { display: grid; grid-template-columns: 28px minmax(110px, .8fr) minmax(120px, 1fr) minmax(190px, 1.35fr) minmax(170px, 1.2fr) 130px 36px; gap: 8px; align-items: center; }
.admin-pool-intake-index { color: var(--admin-text-disabled); font-family: var(--font-code); font-size: 10px; text-align: center; }
.admin-pool-intake-row .saas-input { min-width: 0; min-height: 34px; font-size: 11px; }
.admin-pool-intake-verify { display: flex; align-items: center; gap: 6px; min-width: 0; }
.admin-pool-intake-result { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--admin-text-subtle); font-size: 10px; white-space: nowrap; }
.admin-pool-intake-remove { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--admin-text-disabled); font-size: 10px; cursor: pointer; }
.admin-pool-intake-remove:hover { background: var(--admin-row-hover); color: var(--admin-red); }
.admin-pool-intake-models { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0 0 4px; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-intake-models code { min-width: 0; overflow: hidden; color: var(--admin-text-muted); font-family: var(--font-code); text-overflow: ellipsis; white-space: nowrap; }
.admin-pool-intake-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--admin-border-light); }
.admin-pool-intake-note { display: inline-flex; align-items: center; gap: 6px; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-intake-note svg { flex: 0 0 auto; color: var(--color-success); }
.admin-pool-account-defaults { align-self: center; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-connected-card,
.admin-pool-model-card { scroll-margin-top: 90px; }
.admin-pool-account-table { min-width: 980px; }
.admin-pool-account-table td { padding-top: 13px; padding-bottom: 13px; }
.admin-pool-model-table { min-width: 860px; }
.admin-pool-model-table td { padding-top: 13px; padding-bottom: 13px; vertical-align: middle; }
.admin-pool-model-table td code { display: block; margin-top: 4px; color: var(--admin-text-muted); font-family: var(--font-code); font-size: 10px; }
.admin-pool-model-table td small { display: block; margin-top: 4px; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-discovery-report { display: flex; flex-direction: column; gap: 8px; margin: 0 22px 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--admin-blue) 24%, var(--admin-border)); border-radius: var(--admin-radius); background: color-mix(in srgb, var(--admin-blue) 5%, var(--admin-card-bg)); color: var(--admin-text-subtle); font-size: 11px; }
.admin-pool-discovery-report > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.admin-pool-discovery-report strong { color: var(--admin-text); }
.admin-pool-discovery-errors { display: flex; flex-direction: column; gap: 3px; color: var(--color-danger); font-family: var(--font-code); font-size: 10px; }
.admin-pool-test-output { width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--admin-border-light); border-radius: var(--admin-radius-sm); background: var(--admin-row-hover); color: var(--admin-text); font-family: var(--font-code); font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.admin-pool-capability-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 180px; }
.admin-pool-capability-list span { padding: 3px 5px; border: 1px solid var(--admin-border-light); border-radius: 4px; background: var(--admin-row-hover); color: var(--admin-text-subtle); font-family: var(--font-code); font-size: 9px; }
.admin-pool-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.admin-pool-account-name { font-size: 12px; font-weight: 700; }
.admin-pool-account-table td code { display: block; margin-top: 3px; color: var(--admin-text-muted); font-family: var(--font-code); font-size: 10px; }
.admin-pool-account-table td small { display: block; margin-top: 3px; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-fingerprint { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-code); }
.admin-pool-inline-input { width: 84px; min-height: 30px; padding: 5px 7px; border: 1px solid var(--admin-border); border-radius: var(--admin-radius-sm); background: var(--admin-card-bg); color: var(--admin-text); font: inherit; font-size: 11px; }
.admin-pool-inline-input.short { width: 54px; font-family: var(--font-code); text-align: right; }
.admin-pool-inline-input:focus { outline: none; border-color: var(--admin-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-blue) 14%, transparent); }
.admin-pool-account-metrics { font-family: var(--font-code); font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-pool-account-metrics span { margin-left: 5px; color: var(--admin-text-muted); font-weight: 500; }
.admin-pool-account-table .admin-badge { white-space: nowrap; }
.admin-pool-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-pool-field-wide { grid-column: 1 / -1; }
.admin-pool-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.admin-pool-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-pool-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-pool-form-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--admin-border-light); }
.admin-pool-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.admin-pool-section-heading .admin-card-subtitle { max-width: 560px; margin-top: 5px; }
.admin-pool-account-editor { display: flex; flex-direction: column; gap: 12px; }
.admin-pool-account-editor-row { padding: 14px; border: 1px solid var(--admin-border-light); border-radius: var(--admin-radius); background: var(--admin-row-hover); }
.admin-pool-account-editor-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--admin-text); font-size: 12px; }
.admin-pool-remove-account { border: 0; background: transparent; color: var(--color-danger); font: inherit; font-size: 11px; cursor: pointer; }
.admin-pool-remove-account:hover { text-decoration: underline; }
.admin-pool-account-tuning { display: grid; grid-template-columns: repeat(3, minmax(0, 90px)) minmax(220px, 1fr); align-items: end; gap: 10px; margin-top: 12px; }
.admin-pool-account-probe { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 34px; }
.admin-pool-inline-probe-success { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; color: var(--admin-text-subtle); font-size: 10px; }
.admin-pool-inline-probe-success code { flex-basis: 100%; overflow: hidden; color: var(--admin-text-muted); font-family: var(--font-code); text-overflow: ellipsis; white-space: nowrap; }
.admin-pool-inline-probe-error { overflow: hidden; color: var(--color-danger); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-pool-form-error { margin-top: 12px; color: var(--color-danger); font-size: 11px; line-height: 1.5; }
.admin-pool-toggle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-pool-toggle-grid .admin-toggle-row { min-height: 74px; padding: 12px; border: 1px solid var(--admin-border-light); border-radius: var(--admin-radius); background: var(--admin-row-hover); align-items: flex-start; }
.admin-modal-overlay { position: fixed; inset: 0; z-index: 300; background: var(--overlay-bg); backdrop-filter: blur(2px); }
.admin-modal { position: fixed; z-index: 301; top: 50%; left: 50%; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; transform: translate(-50%, -50%); border: 0.5px solid var(--admin-border); border-radius: var(--admin-radius-lg); background: var(--admin-card-bg); box-shadow: var(--admin-shadow-lg); }
.admin-pool-modal { width: min(900px, calc(100vw - 32px)); }
.admin-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 0.5px solid var(--admin-border); }
.admin-modal-body { padding: 20px 22px; }
.admin-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 0.5px solid var(--admin-border); background: var(--admin-row-hover); }
.admin-pool-json-input { width: 100%; min-height: 300px; resize: none; font-family: var(--font-code); font-size: 11px; line-height: 1.6; }
.admin-pool-config-json { width: 100%; min-height: 140px; resize: none; font-family: var(--font-code); font-size: 11px; line-height: 1.6; }
.admin-pool-probe-box { margin-bottom: 16px; padding: 14px; border: 1px solid var(--admin-border-light); border-radius: var(--admin-radius); background: var(--admin-row-hover); }
.admin-pool-probe-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr) auto; gap: 8px; margin-top: 10px; }
.admin-pool-probe-result { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: var(--admin-text-subtle); font-size: 11px; }
.admin-pool-probe-result code { flex-basis: 100%; overflow-wrap: anywhere; color: var(--admin-text-muted); font-family: var(--font-code); font-size: 10px; }
.admin-pool-security-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-success) 18%, transparent); border-radius: var(--admin-radius); background: color-mix(in srgb, var(--color-success) 6%, transparent); color: var(--color-success); font-size: 11px; line-height: 1.5; }
.admin-alert-dismiss { margin-left: auto; border: 0; background: transparent; color: currentColor; font-size: 17px; line-height: 1; cursor: pointer; opacity: 0.7; }
.admin-alert-dismiss:hover { opacity: 1; }
.admin-billing-alert-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  color: var(--admin-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--admin-border-light);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}
.admin-billing-alert-link:hover {
  color: var(--admin-text);
  background: var(--admin-row-hover);
}
.admin-billing-alert-link:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: -2px;
}

/* ── Pool Wizard ──────────────────────────────────────────────── */
.admin-wizard-modal { width: min(800px, calc(100vw - 32px)); }
.admin-wizard-step-icon { margin-right: 4px; width: 14px; height: 14px; }
.admin-wizard-status-icon { width: 14px; height: 14px; }
.admin-wizard-status-icon.success { color: var(--color-success); }
.admin-wizard-status-icon.danger { color: var(--color-danger); }
.admin-wizard-empty-state { padding: 32px 0; }
.admin-wizard-close { font-size: 20px; }
.admin-wizard-error { margin-bottom: 16px; }
.admin-wizard-steps { display: flex; justify-content: center; gap: 24px; padding: 16px 22px; border-bottom: 0.5px solid var(--admin-border); background: var(--admin-row-hover); }
.admin-wizard-step { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--admin-text-muted); padding: 6px 12px; border-radius: 6px; transition: all 0.2s; }
.admin-wizard-step.active { color: var(--admin-blue); background: color-mix(in srgb, var(--admin-blue) 10%, transparent); }
.admin-wizard-step.completed { color: var(--color-success); }
.admin-wizard-title { color: var(--admin-text); font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.admin-wizard-help { margin-bottom: 10px; color: var(--admin-text-subtle); font-size: 11px; line-height: 1.5; }
.admin-wizard-help code { color: var(--admin-text-muted); font-family: var(--font-code); }
.admin-wizard-valid { color: var(--color-success); }
.admin-wizard-warning { color: var(--color-warning); }
.admin-wizard-keys-textarea { width: 100%; min-height: 180px; font-family: var(--font-code); font-size: 11px; line-height: 1.6; padding: 12px; border: 1px solid var(--admin-border); border-radius: var(--admin-radius); background: var(--admin-card-bg); color: var(--admin-text); resize: none; }
.admin-wizard-keys-textarea::-moz-placeholder { color: var(--admin-text-disabled); }
.admin-wizard-keys-textarea::placeholder { color: var(--admin-text-disabled); }
.admin-wizard-keys-summary { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--admin-text-muted); }
.admin-wizard-keys-summary strong { color: var(--admin-text); }
.admin-wizard-keys-preview { margin-top: 8px; max-height: 180px; overflow-y: auto; border: 1px solid var(--admin-border); border-radius: var(--admin-radius); }
.admin-wizard-key-row { display: grid; grid-template-columns: 28px 1fr 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--admin-border-light); font-size: 11px; }
.admin-wizard-key-row:last-child { border-bottom: 0; }
.admin-wizard-key-error { background: color-mix(in srgb, var(--color-danger) 6%, transparent); }
.admin-wizard-key-idx { color: var(--admin-text-subtle); font-size: 10px; text-align: center; }
.admin-wizard-key-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--admin-text-muted); font-family: var(--font-code); font-size: 10px; }
.admin-wizard-key-masked { font-family: var(--font-code); font-size: 10px; color: var(--admin-text-subtle); }
.admin-wizard-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--admin-text-muted); font-size: 13px; }
.admin-wizard-review-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--admin-border-light); border-radius: var(--admin-radius); background: var(--admin-row-hover); font-size: 12px; }
.admin-wizard-pricing-wrap { max-height: 360px; overflow-y: auto; border: 1px solid var(--admin-border); border-radius: var(--admin-radius); }
.admin-wizard-pricing-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-wizard-pricing-table th, .admin-wizard-pricing-table td { padding: 8px 10px; border-bottom: 1px solid var(--admin-border-light); text-align: left; }
.admin-wizard-pricing-table th { position: sticky; top: 0; background: var(--admin-row-hover); font-weight: 600; font-size: 11px; color: var(--admin-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.admin-wizard-pricing-table tr:last-child td { border-bottom: 0; }
.admin-wizard-pricing-missing { background: color-mix(in srgb, var(--color-warning) 6%, transparent); }
.admin-wizard-model-name { font-family: var(--font-code); font-size: 11px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-wizard-price-input { width: 80px; padding: 4px 6px !important; font-size: 11px !important; font-family: var(--font-code); text-align: right; }
.admin-wizard-price-badge { font-size: 10px; color: var(--color-warning); font-weight: 500; }

@media (max-width: 1120px) {
  .admin-pool-layout { grid-template-columns: 1fr; }
  .admin-pool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-pool-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-pool-usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .admin-page-header-inner { align-items: stretch; flex-direction: column; gap: 10px; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .admin-page-actions { width: 100%; }
  .admin-page-actions .saas-btn { flex: 1; justify-content: center; }
  .admin-page-title { font-size: 19px; line-height: 1.2; }
  .admin-pool-list { grid-template-columns: 1fr; }
  .admin-pool-overview-card .admin-card-header { flex-direction: column; }
  .admin-pool-overview-card .admin-card-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .admin-pool-form-grid,
  .admin-pool-form-grid-3,
  .admin-pool-form-grid-2,
  .admin-pool-toggle-grid,
  .admin-pool-account-tuning { grid-template-columns: 1fr; }
  .admin-pool-section-heading { flex-direction: column; }
  .admin-pool-field-wide { grid-column: auto; }
  .admin-pool-probe-grid { grid-template-columns: 1fr; }
  .admin-pool-intake-head { display: none; }
  .admin-pool-intake-row { grid-template-columns: 24px minmax(0, 1fr) 28px; gap: 8px; padding: 12px; border: 1px solid var(--admin-border-light); border-radius: var(--admin-radius); background: var(--admin-row-hover); }
  .admin-pool-intake-row > .saas-input { grid-column: 2 / -1; }
  .admin-pool-intake-row > .admin-pool-intake-verify { grid-column: 2 / -1; }
  .admin-pool-intake-row > .admin-pool-intake-models { grid-column: 2 / -1; }
  .admin-pool-intake-footer { align-items: stretch; flex-direction: column; }
  .admin-pool-intake-footer .saas-btn { justify-content: center; }
  .admin-modal-header,
  .admin-modal-body,
  .admin-modal-footer { padding-left: 16px; padding-right: 16px; }
  .admin-pool-stat { padding: 14px; }
  .admin-pool-usage-columns { grid-template-columns: 1fr; gap: 12px; padding-inline: 16px; }
  .admin-pool-usage-failures { margin-inline: 16px; }
  .admin-pool-usage-failure { grid-template-columns: auto minmax(0, 1fr) auto; }
  .admin-pool-usage-failure code,
  .admin-pool-usage-failure strong,
  .admin-pool-usage-failure small { grid-column: 2 / -1; }
}

/* ── Pagination ─────────────────────────────────────────────── */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--admin-border-light);
  background: var(--admin-border-light);
}

.admin-pagination-info { font-size: 11px; color: var(--admin-text-muted); }
.admin-pagination-controls { display: flex; align-items: center; gap: 3px; }

.admin-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.12s;
}

.admin-page-btn:hover:not(:disabled):not(.active) {
  background: var(--admin-bg);
  border-color: var(--admin-text-disabled);
}

.admin-page-btn.active {
  background: var(--admin-text);
  color: var(--color-text-inverse);
  border-color: var(--admin-text);
}

.admin-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-page-btn.nav { font-size: 14px; }

/* ── Drawer ──────────────────────────────────────────────────── */
.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg-light);
  z-index: 200;
  backdrop-filter: blur(2px);
  animation: adminFadeIn 0.18s ease;
}

.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 95vw;
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-lg);
  z-index: 201;
  display: flex;
  flex-direction: column;
  animation: adminSlideIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes adminSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes adminFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.admin-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--admin-border-light);
  flex-shrink: 0;
}

.admin-drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--admin-text);
}

.admin-drawer-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--admin-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--admin-radius-sm);
  transition: background 0.12s;
}

.admin-drawer-close:hover { background: var(--admin-bg); color: var(--admin-text); }

.admin-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--admin-border) transparent;
}

.admin-drawer-section {
  margin-bottom: 20px;
}

.admin-drawer-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.admin-drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--admin-border-light);
  gap: 12px;
}

.admin-drawer-field {
  font-size: 12px;
  color: var(--admin-text-muted);
  flex-shrink: 0;
}

.admin-drawer-value {
  font-size: 12px;
  color: var(--admin-text);
  font-weight: 500;
  text-align: right;
}

.admin-drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--admin-border-light);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Timeline ────────────────────────────────────────────────── */
.admin-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

.admin-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.admin-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-text-disabled);
  flex-shrink: 0;
  margin-top: 4px;
  border: 2px solid var(--admin-card-bg);
  box-shadow: 0 0 0 1px var(--admin-text-disabled);
}

.admin-timeline-dot.green  { background: var(--color-success); box-shadow: 0 0 0 1px var(--color-success); }
.admin-timeline-dot.blue   { background: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.admin-timeline-dot.red    { background: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
.admin-timeline-dot.amber  { background: var(--color-warning); box-shadow: 0 0 0 1px var(--color-warning); }
.admin-timeline-dot.purple { background: var(--color-purple); box-shadow: 0 0 0 1px var(--color-purple); }

.admin-timeline-content { flex: 1; min-width: 0; }
.admin-timeline-text { font-size: 12px; color: var(--admin-text); }
.admin-timeline-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── Health Bars ─────────────────────────────────────────────── */
.admin-health-bar { display: flex; flex-direction: column; gap: 10px; }
.admin-health-item { display: flex; align-items: center; gap: 10px; }
.admin-health-label { font-size: 11px; color: var(--admin-text-muted); width: 56px; flex-shrink: 0; }
.admin-health-bar-track { flex: 1; height: 5px; background: var(--admin-border); border-radius: 999px; overflow: hidden; }
.admin-health-bar-fill { height: 100%; border-radius: 999px; transition: opacity 0.3s; }
.admin-health-value { font-size: 10px; font-weight: 700; width: 38px; text-align: right; }

/* ── Progress Bar ───────────────────────────────────────────── */
.admin-progress-track { height: 4px; background: var(--admin-border); border-radius: 999px; overflow: hidden; }
.admin-progress-fill { height: 100%; border-radius: 999px; transition: opacity 0.3s; }

/* ── Donut Legend ────────────────────────────────────────────── */
.admin-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.admin-donut-legend-item { display: flex; align-items: center; gap: 8px; }

/* ── Skeleton / Loading ──────────────────────────────────────── */
.admin-skeleton-bar {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, var(--admin-border-light) 25%, var(--admin-border) 50%, var(--admin-border-light) 75%);
  background-size: 200% 100%;
  animation: adminShimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes adminShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── User Avatars ────────────────────────────────────────────── */
.admin-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--admin-text);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-user-avatar-large {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--admin-text);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Invite Banner ───────────────────────────────────────────── */
.admin-invite-banner {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--admin-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-invite-code-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.admin-invite-code-value {
  font-family: var(--font-code);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--color-shadow) 12%, transparent);
  padding: 4px 10px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-shadow) 25%, transparent);
}
.admin-invite-banner-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; }
.admin-invite-banner-meta { margin-top: 4px; color: color-mix(in srgb, var(--color-text-inverse) 66%, transparent); font-size: 11px; }
.admin-table-secondary { display: block; margin-top: 3px; color: var(--admin-text-subtle); font-size: 11px; }
.admin-table-muted { color: var(--admin-text-subtle); }
.admin-inline-notice { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--admin-radius); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); background: color-mix(in srgb, var(--color-success) 6%, transparent); color: var(--color-success); font-size: 13px; font-weight: 500; }

/* ── Heatmap ─────────────────────────────────────────────────── */
.admin-heatmap-cell { transition: background 0.1s; cursor: pointer; }
.admin-heatmap-cell:hover { filter: brightness(0.85); }
.admin-analytics-empty-hourly { padding: 22px 0; color: var(--color-text-muted); font-size: 12px; text-align: center; }
.admin-analytics-heatmap-scroll { overflow-x: auto; padding: 6px 0 2px; }
.admin-analytics-heatmap-grid,
.admin-analytics-heatmap-hours { min-width: 560px; display: grid; grid-template-columns: repeat(24, minmax(18px, 1fr)); gap: 5px; }
.admin-analytics-heatmap-cell { height: 34px; border: 1px solid var(--color-border-default); border-radius: 5px; }
.admin-analytics-heatmap-hours { margin-top: 6px; color: var(--color-text-muted); font-size: 9px; text-align: center; }
.admin-analytics-heatmap-hint { margin-top: 8px; color: var(--color-text-muted); font-size: 10px; }
.admin-analytics-skeleton-card { padding: 20px 22px; border: 1px solid var(--admin-border); border-radius: 14px; background: var(--color-bg-elevated); }
.admin-analytics-skeleton-label { width: 80px; margin-bottom: 12px; }
.admin-analytics-skeleton-value { width: 60px; height: 30px; margin-bottom: 10px; }
.admin-analytics-skeleton-tail { width: 50px; }
.admin-analytics-skeleton-panel { height: 240px; }
.admin-analytics-chart-body { padding: 16px 20px; }
.admin-analytics-chart-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-border-default); }
.admin-analytics-chart-summary-cell { padding: 14px; background: var(--color-bg-elevated); text-align: center; }
.admin-analytics-chart-summary-label { margin-bottom: 4px; color: var(--color-text-muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.admin-analytics-chart-summary-value { color: var(--color-text); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.admin-analytics-chart-summary-value.danger { color: var(--color-danger); }
.admin-analytics-chart-summary-value.success { color: var(--color-success); }
.admin-analytics-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--color-text-muted); font-size: 10px; }
.admin-analytics-device-body { display: flex; align-items: center; gap: 20px; padding: 18px 20px; }
.admin-analytics-device-list { display: flex; flex: 1; flex-direction: column; gap: 10px; }
.admin-analytics-device-row { display: flex; align-items: center; gap: 8px; }
.admin-analytics-device-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 2px; }
.admin-analytics-device-label { flex: 1; color: var(--color-text-secondary); font-size: 12px; }
.admin-analytics-flex-track { flex: 1; }
.admin-analytics-percent { width: 36px; color: var(--color-text); font-size: 12px; font-weight: 700; text-align: right; }
.admin-analytics-empty { color: var(--color-text-muted); font-size: 12px; }
.admin-analytics-panel-body { padding: 14px 20px; }
.admin-analytics-empty-padded { padding: 10px 0; }
.admin-analytics-ranking-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.admin-analytics-ranking-label { width: 36px; flex: 0 0 auto; color: var(--color-text-secondary); font-size: 11px; }
.admin-analytics-ranking-label.top { color: var(--color-text); font-weight: 700; }
.admin-analytics-ranking-value { width: 44px; flex: 0 0 auto; color: var(--color-text); font-size: 11px; font-weight: 700; text-align: right; }
.admin-analytics-ranking-value small { display: block; color: var(--color-text-muted); font-size: 9px; font-weight: 400; }
.admin-analytics-referrer-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin-analytics-referrer-icon { display: flex; width: 28px; height: 28px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 8px; font-size: 12px; }
.admin-analytics-referrer-source { flex: 1; color: var(--color-text-secondary); font-size: 12px; }
.admin-analytics-referrer-value { width: 48px; flex: 0 0 auto; color: var(--color-text); font-size: 11px; font-weight: 700; text-align: right; }
.admin-analytics-referrer-value small { display: block; color: var(--color-text-muted); font-size: 9px; font-weight: 400; }
.admin-analytics-referrer-track { width: 64px; flex: 0 0 auto; }
.admin-analytics-heatmap-legend { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 16px; color: var(--color-text-muted); font-size: 10px; }
.admin-analytics-heatmap-swatch { width: 16px; height: 12px; border-radius: 2px; }
.admin-analytics-search { max-width: 240px; }
.admin-site-drawer-id,
.admin-site-drawer-user { margin-top: 2px; color: var(--color-text-muted); font-family: var(--font-code); font-size: 10px; }
.admin-site-drawer-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-default); }
.admin-site-drawer-icon { display: flex; color: var(--color-brand); font-size: 36px; }
.admin-site-drawer-name { color: var(--color-text-primary); font-size: 15px; font-weight: 700; }
.admin-site-drawer-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.admin-site-drawer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.admin-site-drawer-stat { padding: 10px; border-radius: 8px; background: var(--color-bg-secondary); text-align: center; }
.admin-site-drawer-stat-label { margin-bottom: 4px; color: var(--color-text-muted); font-size: 10px; }
.admin-site-drawer-stat-value { color: var(--color-text-primary); font-size: 16px; font-weight: 700; }
.admin-site-drawer-stat-value.danger { color: var(--color-danger); }
.admin-site-drawer-trend { margin-bottom: 8px; }
.admin-site-drawer-trend-label { margin-bottom: 6px; color: var(--color-text-muted); font-size: 10px; }
.admin-site-drawer-trend-empty { display: flex; height: 40px; align-items: center; color: var(--color-text-muted); font-size: 11px; }
.admin-site-drawer-rate { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: var(--color-text-muted); font-size: 11px; }
.admin-site-drawer-rate span:last-child { font-size: 13px; font-weight: 700; }
.admin-site-drawer-rate .success { color: var(--color-success); }
.admin-site-drawer-rate .warning { color: var(--color-warning); }
.admin-site-drawer-rate .danger { color: var(--color-danger); }
.admin-site-code { font-family: var(--font-code); font-size: 11px; }
.admin-site-code-small { font-family: var(--font-code); font-size: 10px; }
.admin-site-domain { color: var(--color-brand); font-size: 12px; }
.admin-site-events-loading { padding: 12px 0; }
.admin-site-events-loading .admin-skeleton-bar { width: 100%; margin-bottom: 8px; }
.admin-site-events-empty { padding: 12px 0; color: var(--color-text-muted); font-size: 12px; text-align: center; }
.admin-site-drawer-action { flex: 1; justify-content: center; }
.admin-stat-card-icon { display: flex; color: var(--admin-text-muted); }
.admin-sites-stat-grid { grid-template-columns: repeat(5, 1fr); }
.admin-sites-top-list { padding: 12px 20px; }
.admin-sites-top-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.admin-sites-top-rank { width: 20px; flex: 0 0 auto; color: var(--color-text-muted); font-family: var(--font-code); font-size: 11px; font-weight: 700; text-align: center; }
.admin-sites-top-rank.rank-0 { color: var(--color-warning-strong); }
.admin-sites-top-rank.rank-1 { color: var(--color-text-secondary); }
.admin-sites-top-rank.rank-2 { color: var(--color-tier-paid); }
.admin-sites-top-copy { flex: 1; min-width: 0; }
.admin-sites-top-domain { overflow: hidden; color: var(--color-brand); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.admin-sites-top-track { height: 3px; margin-top: 3px; overflow: hidden; border-radius: 2px; background: var(--color-bg-secondary); }
.admin-sites-top-fill { height: 100%; border-radius: 2px; background: var(--color-text-muted); }
.admin-sites-top-fill.rank-0 { background: var(--color-text-primary); }
.admin-sites-top-fill.rank-1 { background: var(--color-brand); }
.admin-sites-top-fill.rank-2 { background: var(--color-purple); }
.admin-sites-top-value { flex: 0 0 auto; color: var(--color-text-primary); font-size: 11px; font-weight: 700; }
.admin-sites-overview-body { padding: 14px 20px; }
.admin-sites-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.admin-sites-overview-grid .admin-mini-stat-value { color: var(--color-text-primary); }
.admin-sites-overview-grid .admin-mini-stat-value.admin-sites-danger-value { color: var(--color-danger); }

/* ── Traffic Bar ─────────────────────────────────────────────── */
.admin-traffic-bar-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.admin-traffic-bar-row { display: flex; align-items: center; gap: 6px; }
.admin-traffic-bar-label { font-size: 9px; font-weight: 600; color: var(--admin-text-subtle); width: 18px; text-align: right; flex-shrink: 0; }
.admin-traffic-bar-track { flex: 1; height: 4px; background: var(--admin-border); border-radius: 999px; overflow: hidden; }
.admin-traffic-bar-fill { width: 100%; height: 100%; border-radius: 999px; transform-origin: left center; transition: transform 0.3s; }
.admin-traffic-bar-value { font-size: 9px; font-weight: 600; color: var(--admin-text-muted); width: 26px; text-align: right; flex-shrink: 0; }

/* ── Empty State ─────────────────────────────────────────────── */
.admin-empty-state { text-align: center; padding: 40px 20px; }
.admin-empty-icon { font-size: 36px; margin-bottom: 10px; }
.admin-empty-title { font-size: 14px; font-weight: 700; color: var(--admin-text); margin-bottom: 4px; }
.admin-empty-desc { font-size: 12px; color: var(--admin-text-subtle); }

/* ── saas-btn (global) ────────────────────────────────────────── */
.saas-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--color-border-default);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.14s;
  text-decoration: none;
  white-space: nowrap;
}

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

.saas-btn-secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.saas-btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-strong);
}

.saas-btn-danger { background: var(--admin-red); color: var(--color-on-danger); border-color: var(--admin-red); }
.saas-btn-danger:hover { background: var(--color-danger-strong); }

.saas-btn-ghost {
  background: transparent;
  color: var(--admin-text-muted);
  border-color: var(--admin-border);
}
.saas-btn-ghost:hover { background: var(--admin-bg); color: var(--admin-text); border-color: var(--admin-text-disabled); }

.saas-btn-sm { padding: 5px 10px; font-size: 12px; }
.saas-btn:active { transform: scale(0.97); }
.saas-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Scrollbar (webkit) ─────────────────────────────────────── */
.admin-drawer-body::-webkit-scrollbar { width: 4px; }
.admin-drawer-body::-webkit-scrollbar-track { background: transparent; }
.admin-drawer-body::-webkit-scrollbar-thumb { background: var(--admin-border); border-radius: 999px; }

/* ── Focus states ───────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
}

/* ── Admin Sidebar ────────────────────────────────────────────── */
.admin-sidebar {
  width: 220px;
  min-height: 100vh;
  background: var(--color-sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  overflow-y: auto;
  transition: background 0.2s ease;
}

.admin-sidebar.collapsed {
  width: 60px;
}

.admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-sidebar-border);
  flex-shrink: 0;
}

.admin-sidebar.collapsed .admin-sidebar-header {
  justify-content: center;
  padding: 0;
}

.admin-sidebar-toggle {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--color-sidebar-text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.14s;
}

.admin-sidebar-toggle:hover {
  color: var(--color-sidebar-text-1);
}

.admin-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  flex-shrink: 0;
}

.admin-sidebar.collapsed .admin-sidebar-logo {
  padding: 18px 0 16px;
  justify-content: center;
}

.admin-logo-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  border: 1px solid var(--color-brand-border);
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.admin-logo-name {
  font-size: 14px; font-weight: 700; color: var(--color-sidebar-text-1);
  letter-spacing: -0.01em;
}

.admin-logo-sub {
  font-size: 9px; color: var(--color-sidebar-text-3);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 1px;
}

.admin-sidebar-nav {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
}

.admin-nav-group { margin-bottom: 2px; }

.admin-sidebar.collapsed .admin-nav-group {
  padding: 0;
}

.admin-nav-group-label {
  font-size: 9px; font-weight: 700;
  color: var(--color-sidebar-text-4);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 10px 16px 4px;
}

.admin-nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  font-size: 12px; font-weight: 500;
  color: var(--color-sidebar-text-2);
  text-decoration: none;
  border-radius: 6px;
  margin: 1px 6px;
  transition: all 0.14s;
  border: none;
  background: none;
  width: calc(100% - 12px);
  cursor: pointer;
  font-family: var(--font-body);
}

.admin-sidebar.collapsed .admin-nav-link {
  width: 44px;
  justify-content: center;
  padding: 8px 0;
}

.admin-nav-link:hover {
  color: var(--color-sidebar-text-1);
  background: var(--color-sidebar-hover);
}

.admin-nav-link.active {
  color: var(--color-sidebar-text-1);
  background: var(--color-sidebar-active);
  font-weight: 600;
}

.admin-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-sidebar-border);
  flex-shrink: 0;
}

.admin-user-row {
  display: flex; align-items: center; gap: 8px;
}

.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name {
  font-size: 12px; font-weight: 600; color: var(--color-sidebar-text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-user-role { font-size: 10px; color: var(--color-sidebar-text-3); margin-top: 1px; }

/* ── Admin Layout with Sidebar ────────────────────────────────── */
.admin-root.has-sidebar {
  display: flex;
  min-height: 100vh;
}

.admin-root.has-sidebar .admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-root.has-sidebar .admin-page-header-inner {
  position: relative;
  background: var(--admin-header-bg);
}

/* ── Admin Layout (header-only, no sidebar) ───────────────────── */
.admin-root.no-sidebar {
  min-height: 100vh;
  background: var(--admin-bg);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2 { grid-template-columns: 1fr; }
  .admin-grid-3 { grid-template-columns: 1fr; }
  .admin-page-body { padding: 16px 16px 24px; }
  .admin-page-header-inner { padding: 0 16px; }
  .admin-environment-workspace { grid-template-columns: 1fr; }
  .admin-environment-summary, .admin-environment-pending-row { align-items: flex-start; flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN V2 — PROFESSIONAL ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Admin Main Content Area ───────────────────────────────── */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--admin-bg);
}

/* ── Page Header Inner ──────────────────────────────────────── */
.admin-page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 64px;
  background: var(--admin-card-bg);
  border-bottom: 1px solid var(--admin-header-border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-xs);
  margin: 0;
}

/* ── Page Title ─────────────────────────────────────────────── */
.admin-page-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--admin-text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}




.admin-page-body {
  padding: 24px 28px 40px;
}

/* ── Hero Stat Grid ──────────────────────────────────────────── */
.admin-hero-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.admin-hero-stat-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  padding: 20px 22px;
  box-shadow: var(--admin-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: default;
}

.admin-hero-stat-card[href] {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.admin-hero-stat-card:hover {
  box-shadow: var(--admin-shadow-md);
  transform: translateY(-1px);
}

.admin-hero-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--admin-radius-lg) var(--admin-radius-lg) 0 0;
}

.admin-hero-stat-card.default::before   { background: var(--color-bg-inverse); }
.admin-hero-stat-card.green::before    { background: var(--color-success); }
.admin-hero-stat-card.blue::before     { background: var(--color-brand); }
.admin-hero-stat-card.amber::before    { background: var(--color-warning); }
.admin-hero-stat-card.purple::before   { background: var(--color-purple); }
.admin-hero-stat-card.red::before      { background: var(--color-danger); }

.admin-hero-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.admin-hero-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.admin-hero-stat-icon-wrap {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.admin-hero-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--admin-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 10px;
}

.admin-hero-stat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-hero-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.admin-hero-stat-trend.up {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.admin-hero-stat-trend.down {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.admin-hero-stat-sub {
  font-size: 11px;
  color: var(--admin-text-subtle);
}

/* ── Section Divider ─────────────────────────────────────────── */
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--admin-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.admin-section-subtitle {
  font-size: 12px;
  color: var(--admin-text-muted);
  margin-top: 2px;
}

/* ── Card Enhancement ─────────────────────────────────────────── */
.admin-card {
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.admin-card:hover {
  box-shadow: var(--admin-shadow-md);
}

.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--admin-border-light);
  gap: 12px;
  background: var(--admin-border-light);
}

.admin-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--admin-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-card-subtitle {
  font-size: 11px;
  color: var(--admin-text-subtle);
  margin-top: 3px;
}

/* ── Info Row ─────────────────────────────────────────────────── */
.admin-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--admin-border-light);
  font-size: 13px;
}

.admin-info-row:last-child { border-bottom: none; }

.admin-info-label {
  font-size: 12px;
  color: var(--admin-text-muted);
  min-width: 90px;
  flex-shrink: 0;
}

.admin-info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-text);
}

/* ── Status Indicator ───────────────────────────────────────── */
.admin-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  margin-right: 6px;
}

.admin-status-dot.online  { background: var(--color-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 20%, transparent); }
.admin-status-dot.offline { background: var(--admin-text-disabled); }
.admin-status-dot.warning { background: var(--color-warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 20%, transparent); }
.admin-status-dot.error   { background: var(--color-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 20%, transparent); }

/* ── Avatar ─────────────────────────────────────────────────── */
.admin-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--admin-text);
  color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}

.admin-avatar-sm {
  width: 24px; height: 24px;
  font-size: 10px;
  border-radius: 50%;
  background: var(--admin-text);
  color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-avatar-lg {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--admin-text);
  color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  flex-shrink: 0;
}

/* ── Tag / Chip ─────────────────────────────────────────────── */
.admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

.admin-tag-default  { background: var(--admin-border-light); color: var(--admin-text-disabled); border-color: var(--color-border-default); }
.admin-tag-blue     { background: color-mix(in srgb, var(--color-brand) 80%, transparent); color: var(--color-brand); border-color: color-mix(in srgb, var(--color-brand) 20%, transparent); }
.admin-tag-green    { background: color-mix(in srgb, var(--color-success) 8%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 20%, transparent); }
.admin-tag-amber    { background: color-mix(in srgb, var(--color-warning) 8%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 20%, transparent); }
.admin-tag-red      { background: color-mix(in srgb, var(--color-danger) 8%, transparent); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); }

/* ── Action Button Row ─────────────────────────────────────── */
.admin-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Detail Drawer ──────────────────────────────────────────── */
.admin-detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 95vw;
  background: var(--admin-card-bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow: var(--admin-shadow-lg);
  animation: adminDrawerSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes adminDrawerSlideIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

.admin-detail-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg-light);
  z-index: 199;
  backdrop-filter: blur(3px);
  animation: adminFadeIn 0.18s ease;
}

/* ── Search Bar ──────────────────────────────────────────────── */
.admin-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  padding: 7px 12px;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-search-wrap:focus-within {
  border-color: var(--admin-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 80%, transparent);
}

.admin-search-icon { color: var(--admin-text-subtle); font-size: 13px; flex-shrink: 0; }

.admin-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--admin-text);
  flex: 1;
  font-family: var(--font-body);
  min-width: 0;
}

.admin-search-input::-moz-placeholder { color: var(--admin-text-subtle); }

.admin-search-input::placeholder { color: var(--admin-text-subtle); }

/* ── Global Search ─────────────────────────────────────────── */
.admin-global-search-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--admin-text-muted);
  background: color-mix(in srgb, var(--admin-card-bg) 86%, var(--admin-bg));
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--admin-text) 4%, transparent);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: color var(--admin-transition), background var(--admin-transition), border-color var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-global-search-trigger:hover {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  border-color: color-mix(in srgb, var(--admin-blue) 48%, var(--admin-border));
}

.admin-global-search-trigger:focus-visible {
  outline: none;
  border-color: var(--admin-blue);
  box-shadow: var(--admin-focus-ring);
}

.admin-global-search-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--admin-text-subtle);
}

.admin-global-search-trigger kbd {
  margin-left: auto;
  padding: 3px 6px;
  color: var(--admin-text-subtle);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 5px;
  font-family: var(--font-code);
  font-size: 10px;
  line-height: 1;
}

.admin-global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--overlay-bg);
}

.admin-global-search-modal {
  position: fixed;
  top: min(20vh, 180px);
  left: 50%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 48px));
  overflow: hidden;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-lg);
  transform: translateX(-50%);
}

.admin-global-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--admin-border);
}

.admin-global-search-input-wrap svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--admin-text-subtle);
}

.admin-global-search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  color: var(--admin-text);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
}

.admin-global-search-input::-moz-placeholder {
  color: var(--admin-text-subtle);
}

.admin-global-search-input::placeholder {
  color: var(--admin-text-subtle);
}

.admin-global-search-input:focus-visible {
  outline: none;
}

.admin-global-search-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid var(--admin-border);
  border-top-color: var(--admin-blue);
  border-radius: 50%;
  animation: admin-global-search-spin .6s linear infinite;
}

@keyframes admin-global-search-spin {
  to { transform: rotate(360deg); }
}

.admin-global-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.admin-global-search-hint {
  padding: 24px;
  color: var(--admin-text-muted);
  font-size: 13px;
  text-align: center;
}

.admin-global-search-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  color: var(--admin-text);
  background: transparent;
  border: 0;
  border-radius: var(--admin-radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--admin-transition);
}

.admin-global-search-item:hover,
.admin-global-search-item.selected {
  background: var(--admin-row-hover);
}

.admin-global-search-item:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: -2px;
}

.admin-global-search-item-type {
  min-width: 40px;
  padding-top: 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-global-search-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-global-search-item-title,
.admin-global-search-item-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-global-search-item-title {
  font-size: 14px;
  font-weight: 500;
}

.admin-global-search-item-subtitle {
  color: var(--admin-text-muted);
  font-size: 12px;
}

@media (max-width: 640px) {
  .admin-global-search-modal {
    top: 16px;
  }
}

/* ── Table Row Hover Action ─────────────────────────────────── */
.admin-table-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.admin-table tbody tr:hover .admin-table-row-actions {
  opacity: 1;
}

.admin-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-card-bg);
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--font-body);
  flex-shrink: 0;
}

.admin-icon-btn svg { flex-shrink: 0; }

.admin-icon-btn:hover {
  background: var(--admin-bg);
  color: var(--admin-text);
  border-color: var(--admin-text-disabled);
}

.admin-icon-btn.danger:hover {
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.admin-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--admin-border-light);
  flex-wrap: wrap;
}

/* ── Stat Row (inline mini stats) ───────────────────────────── */
.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
  border: 1px solid var(--admin-border);
  margin-bottom: 16px;
}

.admin-stat-row-item {
  background: var(--admin-card-bg);
  padding: 16px 20px;
  text-align: center;
}

.admin-stat-row-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

.admin-stat-row-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--admin-text);
  letter-spacing: -0.02em;
}

/* ── Multi-Line Chart Area ──────────────────────────────────── */
.admin-chart-multi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
}

.admin-chart-multi-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-chart-multi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-text-muted);
  min-width: 60px;
  flex-shrink: 0;
}

.admin-chart-multi-track {
  flex: 1;
  height: 6px;
  background: var(--admin-border);
  border-radius: 999px;
  overflow: hidden;
}

.admin-chart-multi-fill {
  height: 100%;
  border-radius: 999px;
  transition: opacity 0.4s ease;
}

.admin-chart-multi-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text);
  min-width: 48px;
  text-align: right;
}

/* ── Sparkline Row ───────────────────────────────────────────── */
.admin-sparkline-wrap {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  align-items: center;
}

/* ── Divider ─────────────────────────────────────────────────── */
.admin-divider {
  border: none;
  border-top: 1px solid var(--admin-border-light);
  margin: 16px 0;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--admin-bg);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
}

.admin-tab {
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--admin-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.12s;
}

.admin-tab:hover:not(.active) { color: var(--admin-text); background: var(--admin-row-hover); }

.admin-tab.active {
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ── Number Counter Animation ───────────────────────────────── */
@keyframes adminCountUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.admin-animate-in {
  animation: adminCountUp 0.4s ease forwards;
}

/* ── Highlighted Card ───────────────────────────────────────── */
.admin-highlight-card {
  background: linear-gradient(135deg, var(--color-emphasis-bg-start) 0%, var(--color-emphasis-bg-end) 100%);
  color: var(--color-emphasis-text);
  border: none;
}

.admin-highlight-card .admin-card-title { color: var(--color-emphasis-text); }
.admin-highlight-card .admin-card-subtitle { color: var(--color-text-inverse); opacity: 0.5; }
.admin-highlight-card .admin-mini-stat-value { color: var(--color-emphasis-text); }
.admin-highlight-card .admin-mini-stat-label { color: var(--color-text-inverse); opacity: 0.5; }

/* ── Notification Bell ───────────────────────────────────────── */
.admin-notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-card-bg);
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: all 0.12s;
}

.admin-notif-btn:hover {
  background: var(--admin-bg);
  color: var(--admin-text);
}

.admin-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px; height: 16px;
  background: var(--color-danger);
  color: var(--color-on-danger);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--admin-card-bg);
}

/* ── Quick Action Button ────────────────────────────────────── */
.admin-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--admin-border);
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.14s;
}

.admin-quick-btn:hover {
  background: var(--admin-bg);
  border-color: var(--admin-text-disabled);
}

.admin-quick-btn.primary {
  background: var(--color-emphasis-bg-start);
  color: var(--color-emphasis-text);
  border-color: var(--color-text-primary);
}

.admin-quick-btn.primary:hover { background: var(--color-emphasis-bg-end); }

/* ── Form Group ──────────────────────────────────────────────── */
.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-form-input {
  padding: 8px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: 13px;
  font-family: var(--font-body);
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  width: 100%;
}

.admin-form-input:focus {
  border-color: var(--admin-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.admin-form-input::-moz-placeholder { color: var(--admin-text-subtle); }

.admin-form-input::placeholder { color: var(--admin-text-subtle); }
.admin-form-input[type="date"],
.admin-form-input[type="datetime-local"],
.admin-form-input[type="time"] {
  color-scheme: var(--color-scheme);
}

/* ── Activity Timeline ─────────────────────────────────────────── */
.admin-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-activity-item:last-child { border-bottom: none; }
.admin-activity-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.admin-activity-text { font-size: 11px; color: var(--admin-text); line-height: 1.4; }

/* ── System Health ─────────────────────────────────────────────── */
.admin-health-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.admin-health-track {
  flex: 1;
  height: 4px;
  background: var(--admin-border);
  border-radius: 999px;
  overflow: hidden;
}
.admin-health-fill {
  height: 100%;
  border-radius: 999px;
  transition: opacity 0.3s;
}
.admin-health-value {
  font-size: 10px;
  font-weight: 700;
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Mini Metric ───────────────────────────────────────────────── */
.admin-mini-metric { text-align: center; }
.admin-mini-metric-label {
  font-size: 10px;
  color: var(--admin-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-mini-metric-value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.admin-mini-metric-sub { font-size: 10px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── Notification Item ─────────────────────────────────────────── */
.admin-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-notif-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 3px; }

/* ── Mini stat grid inside cards ─────────────────────────────────── */
.admin-mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--admin-border);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  margin: 0 20px 16px;
}
.admin-mini-stat-cell {
  background: var(--admin-card-bg);
  padding: 16px 14px;
  text-align: center;
}
.admin-mini-stat-cell-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--admin-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.admin-mini-stat-cell-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--admin-text);
  letter-spacing: -0.02em;
}
.admin-mini-stat-cell-change {
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
}
.admin-mini-stat-cell-change.up { color: var(--admin-green); }
.admin-mini-stat-cell-change.down { color: var(--admin-red); }
.admin-mini-stat-cell-change.neutral { color: var(--admin-text-muted); }

/* ── Revenue card footer stats ─────────────────────────────────── */
.admin-revenue-footer {
  display: flex;
  gap: 20px;
  padding: 0 20px 16px;
}
.admin-revenue-footer-item { flex: 1; }
.admin-revenue-footer-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 2px; }
.admin-revenue-footer-value { font-size: 18px; font-weight: 800; }

/* ── Plan distribution inside card ──────────────────────────────── */
.admin-plan-dist {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
}
.admin-plan-dist-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.admin-plan-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-plan-dist-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.admin-plan-dist-label { font-size: 11px; color: var(--admin-text-muted); flex: 1; }
.admin-plan-dist-value { font-size: 11px; font-weight: 700; color: var(--admin-text); }
.admin-plan-dist-pct { font-size: 10px; color: var(--admin-text-subtle); width: 36px; text-align: right; }

/* ── User management surface ───────────────────────────────── */
.admin-users-page {
  min-width: 0;
}

/* Page hook classes used as the outermost element of these admin pages.
   They were referenced in JSX but never defined. The `max-width` rule lives at
   the END of this file (search "admin page hooks") because `.admin-page-body`
   is re-declared several times later in the stylesheet and would otherwise win
   on cascade order. */
.admin-environment-page,
.admin-leads-page,
.admin-notifications-page {
  min-width: 0;
}

.admin-users-page .admin-page-body {
  max-width: 1440px;
}

.admin-users-card {
  overflow: hidden;
}

.admin-users-card .admin-table-toolbar {
  padding: 14px 18px;
  background: var(--admin-card-bg);
}

.admin-users-card .admin-table-search-wrap {
  min-height: 34px;
  background: var(--admin-bg);
}

.admin-users-card .admin-table-filter-select {
  min-height: 34px;
  background: var(--admin-card-bg);
}

.admin-users-bulk-bar {
  min-height: 42px;
  background: var(--color-bg-inverse) !important;
}

.admin-users-bulk-bar select {
  min-height: 28px;
}

.admin-users-page .admin-table {
  min-width: 760px;
}

.admin-users-page .admin-table td:first-child,
.admin-users-page .admin-table th:first-child {
  padding-left: 18px;
}

.admin-users-page .admin-table tbody tr.clickable:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .admin-users-page .admin-page-header-inner {
    min-height: 70px;
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .admin-users-page .admin-page-body {
    padding-inline: 12px;
  }

  .admin-users-card .admin-table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-users-card .admin-table-search-wrap {
    width: 100%;
    max-width: none;
  }

  .admin-users-card .admin-table-filter-select {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .admin-users-page .admin-page-header-inner {
    align-items: flex-start;
  }

  .admin-users-page .admin-page-actions {
    display: none;
  }

  .admin-users-bulk-bar {
    align-items: flex-start !important;
    flex-wrap: wrap;
    padding: 10px 14px !important;
  }

  .admin-users-bulk-bar select {
    flex: 1;
    min-width: 150px;
  }

  .admin-drawer {
    width: 100%;
    max-width: 100%;
  }

  .admin-drawer-body {
    padding: 16px;
  }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .admin-hero-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-stat-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .admin-detail-drawer { width: 100%; }
}
/* ── Page Actions Bar ────────────────────────────────────────── */

/* ── Live Badge ──────────────────────────────────────────────── */
.admin-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 8%, transparent); color: var(--color-success);
  font-size: 11px; font-weight: 600;
}
.admin-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success); animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ── Quick Btn ───────────────────────────────────────────────── */
.admin-quick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border); background: var(--admin-card-bg);
  color: var(--admin-text); font-size: 12px; font-weight: 500;
  font-family: var(--font-body); cursor: pointer; transition: all 0.15s;
}
.admin-quick-btn:hover { background: var(--admin-row-hover); border-color: var(--admin-text-disabled); }

/* ── Notif Btn ───────────────────────────────────────────────── */
.admin-notif-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border); background: var(--admin-card-bg);
  color: var(--admin-text-muted); cursor: pointer; transition: all 0.15s;
}
.admin-notif-btn:hover { background: var(--admin-row-hover); color: var(--admin-text); }
.admin-notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; border-radius: 999px;
  background: var(--color-danger); color: var(--color-text-inverse);
  font-size: 9px; font-weight: 700; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--admin-card-bg); line-height: 1;
}

/* ── Alert ─────────────────────────────────────────────────────── */
.admin-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--admin-radius);
  border: 1px solid; font-size: 13px; font-weight: 500;
  margin-bottom: 16px;
}
.admin-alert.error { background: color-mix(in srgb, var(--color-danger) 6%, transparent); border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); color: var(--color-danger); }
.admin-alert.warning { background: color-mix(in srgb, var(--color-warning) 6%, transparent); border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); color: var(--color-warning); }
.admin-alert.success { background: color-mix(in srgb, var(--color-success) 6%, transparent); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); color: var(--color-success); }
.admin-alert.info { background: color-mix(in srgb, var(--color-brand) 60%, transparent); border-color: color-mix(in srgb, var(--color-brand) 250%, transparent); color: var(--color-brand); }

/* ── Hero Stat Grid ──────────────────────────────────────────── */
.admin-hero-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.admin-hero-stat-card {
  background: var(--admin-card-bg); border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg); padding: 20px 22px;
  box-shadow: var(--admin-shadow-sm);
  transition: box-shadow 0.18s, transform 0.18s;
}
.admin-hero-stat-card:hover { box-shadow: var(--admin-shadow); transform: translateY(-1px); }
.admin-hero-stat-card.green  { border-top: 3px solid var(--admin-green); }
.admin-hero-stat-card.blue   { border-top: 3px solid var(--admin-blue); }
.admin-hero-stat-card.amber  { border-top: 3px solid var(--admin-amber); }
.admin-hero-stat-card.red    { border-top: 3px solid var(--admin-red); }
.admin-hero-stat-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.admin-hero-stat-label {
  font-size: 11px; font-weight: 600; color: var(--admin-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.admin-hero-stat-icon-wrap {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-hero-stat-value {
  font-size: 26px; font-weight: 800; color: var(--admin-text);
  letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px;
}
.admin-hero-stat-footer { display: flex; align-items: center; gap: 8px; }
.admin-hero-stat-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 999px;
}
.admin-hero-stat-trend.up   { color: var(--admin-green); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.admin-hero-stat-trend.down { color: var(--admin-red);   background: color-mix(in srgb, var(--color-danger) 10%, transparent); }

/* ── Health Bar ──────────────────────────────────────────────── */
.admin-health-bar-track {
  height: 6px; background: var(--admin-border); border-radius: 999px; overflow: hidden;
}
.admin-health-bar-fill { height: 100%; border-radius: 999px; transition: opacity 0.4s ease; }

/* ── Activity Feed ───────────────────────────────────────────── */
.admin-activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--admin-border-light);
}
.admin-activity-dot {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.admin-activity-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 3px; }

/* ── Spinning Loader ─────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.admin-spin { animation: spin 0.8s linear infinite; }

/* ── Activity Icon Wrapper ───────────────────────────────────── */
.admin-activity-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* ── Health Item ──────────────────────────────────────────────── */
.admin-health-track { flex: 1; height: 6px; background: var(--admin-border); border-radius: 999px; overflow: hidden; }
.admin-health-fill { height: 100%; border-radius: 999px; transition: opacity 0.4s ease; }

/* ── Revenue Footer ───────────────────────────────────────────── */
.admin-revenue-footer {
  display: flex; gap: 16px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--admin-border-light);
}
.admin-revenue-footer-item { text-align: center; flex: 1; }
.admin-revenue-footer-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 3px; }
.admin-revenue-footer-value { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }

/* ── Empty State ──────────────────────────────────────────────── */
/* Note: .admin-empty base is defined later at line ~4577 */

/* ── Plan Distribution ─────────────────────────────────────────── */

/* ── Section Header ───────────────────────────────────────────── */
.admin-section-title { font-size: 14px; font-weight: 700; color: var(--admin-text); margin: 0; }
.admin-section-subtitle { font-size: 11px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── Skeleton Card ────────────────────────────────────────────── */
.admin-skeleton-card {
  background: var(--admin-card-bg); border-radius: var(--admin-radius-lg);
  border: 1px solid var(--admin-border); padding: 20px 22px;
  box-shadow: var(--admin-shadow-sm);
}

/* ── Inline Stat Grid (4-col) ─────────────────────────────────── */
.admin-inline-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--admin-border); border-radius: var(--admin-radius);
  overflow: hidden; border: 1px solid var(--admin-border); margin: 0 20px 16px;
}

/* ── Traffic Stats Row ───────────────────────────────────────── */

/* ── Mini Stats Row ─────────────────────────────────────────── */

/* ── Top Users Table ─────────────────────────────────────────── */
.admin-top-users-rank {
  font-size: 11px; font-weight: 700; color: var(--admin-text-subtle);
  text-align: center; line-height: 1;
}

/* ── Mono Text ────────────────────────────────────────────────── */
.admin-mono {
  font-family: var(--font-code); font-size: 12px;
  color: var(--admin-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ── Bold Right ──────────────────────────────────────────────── */
.admin-bold-right { font-size: 13px; font-weight: 800; color: var(--admin-text); text-align: right; }

/* ── Actions Cell ────────────────────────────────────────────── */
.admin-actions-cell { display: flex; gap: 4px; justify-content: flex-end; }

/* ── Select input in toolbar ─────────────────────────────────── */
.admin-toolbar-select {
  width: 100px; font-size: 11px; padding: 5px 8px;
  font-family: var(--font-body);
}

/* ── Mini metric row (inside cards) ───────────────────────────── */
.admin-metric-row { display: flex; gap: 20px; padding: 0 20px 16px; }

/* ── Metric pill inside card ──────────────────────────────────── */
.admin-metric-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; flex: 1;
}
.admin-metric-pill-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.admin-metric-pill-value { font-size: 20px; font-weight: 800; color: var(--admin-text); letter-spacing: -0.02em; line-height: 1; }
.admin-metric-pill-sub { font-size: 10px; color: var(--admin-text-subtle); margin-top: 4px; }

/* ── Card mini metric (single number + label) ─────────────────── */
.admin-card-metric {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px; background: var(--admin-card-bg); text-align: center; flex: 1;
}
.admin-card-metric-label { font-size: 10px; color: var(--admin-text-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
.admin-card-metric-value { font-size: 18px; font-weight: 800; color: var(--admin-text); letter-spacing: -0.02em; }
.admin-card-metric-sub { font-size: 10px; color: var(--admin-text-subtle); margin-top: 3px; }
.admin-card-metric-trend { font-size: 10px; font-weight: 600; margin-top: 4px; }

/* ── Dashboard page: four-metric strip ───────────────────────── */
.admin-4-metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--admin-border); border-radius: 10px; overflow: hidden; border: 1px solid var(--admin-border); margin: 0 20px 16px; }

/* ── Plan distribution row ───────────────────────────────────── */
.admin-plan-row { display: flex; align-items: center; gap: 8px; }
.admin-plan-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.admin-plan-label { font-size: 11px; color: var(--admin-text-muted); flex: 1; }
.admin-plan-count { font-size: 11px; font-weight: 700; color: var(--admin-text); }
.admin-plan-pct { font-size: 10px; color: var(--admin-text-subtle); width: 36px; text-align: right; }

/* ── Activity icon (in timeline) ──────────────────────────────── */
.admin-activity-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 1px;
}

/* ── Top users table ─────────────────────────────────────────── */
.admin-top-users-header { display: grid; grid-template-columns: 40px 1fr 120px 100px 80px; gap: 0; padding: 8px 20px; border-bottom: 1px solid var(--admin-border); }
.admin-top-users-row {
  display: grid; grid-template-columns: 40px 1fr 120px 100px 80px;
  align-items: center; padding: 10px 20px;
  border-bottom: 1px solid var(--admin-border-light);
  transition: background 0.12s;
  cursor: default;
}
.admin-top-users-rank { font-size: 11px; font-weight: 700; text-align: center; }
.admin-top-users-rank.gold { color: var(--color-warning); }
.admin-top-users-rank.silver { color: var(--color-text-secondary); }
.admin-top-users-rank.bronze { color: var(--color-warning-strong); }

/* ── Quick nav card icon area ────────────────────────────────── */
.admin-nav-icon { width: 44px; height: 44px; border-radius: 12px; flex-srink: 0; display: flex; align-items: center; justify-content: center; }
.admin-nav-arrow { color: var(--admin-text-disabled); font-size: 14px; flex-shrink: 0; }

/* ── Health item inside card ──────────────────────────────────── */
.admin-health-track { flex: 1; }

/* ── Inline layout helpers ─────────────────────────────────────── */
.admin-row { display: flex; align-items: center; justify-content: space-between; }
.admin-row-gap-8 { display: flex; align-items: center; gap: 8px; }
.admin-row-gap-6 { display: flex; align-items: center; gap: 6px; }
.admin-row-gap-12 { display: flex; align-items: center; gap: 12px; }
.admin-col { display: flex; flex-direction: column; }
.admin-col-gap-4 { display: flex; flex-direction: column; gap: 4px; }
.admin-col-gap-6 { display: flex; flex-direction: column; gap: 6px; }
.admin-col-gap-8 { display: flex; flex-direction: column; gap: 8px; }
.admin-col-gap-12 { display: flex; flex-direction: column; gap: 12px; }
.admin-flex-1 { flex: 1; min-width: 0; }
.admin-center { display: flex; align-items: center; }
.admin-center-center { display: flex; align-items: center; justify-content: center; }

/* ── Typography helpers ───────────────────────────────────────── */
.admin-text-xs { font-size: 10px; color: var(--admin-text-subtle); font-weight: 500; }
.admin-text-sm { font-size: 11px; color: var(--admin-text-subtle); }
.admin-text-base { font-size: 12px; color: var(--admin-text); }
.admin-text-bold { font-size: 12px; font-weight: 700; color: var(--admin-text); }
.admin-text-mono { font-size: 12px; font-family: var(--font-code); color: var(--admin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-text-upper { font-size: 10px; font-weight: 700; color: var(--admin-text-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-text-right { text-align: right; }
.admin-text-green { color: var(--admin-green); }
.admin-text-red { color: var(--admin-red); }
.admin-text-amber { color: var(--admin-amber); }
.admin-text-blue { color: var(--admin-blue); }
.admin-text-muted { color: var(--admin-text-muted); }
.admin-text-subtle { color: var(--admin-text-subtle); }
.admin-line-height-sm { line-height: 1.4; }
.admin-mt-2 { margin-top: 2px; }
.admin-mt-3 { margin-top: 3px; }
.admin-mt-4 { margin-top: 4px; }
.admin-mb-6 { margin-bottom: 6px; }
.admin-mb-8 { margin-bottom: 8px; }
.admin-mb-12 { margin-bottom: 12px; }
.admin-pad-0-20 { padding: 0 20px; }
.admin-pad-20 { padding: 20px; }
.admin-pad-14-20 { padding: 14px 20px; }
.admin-pad-12-20 { padding: 12px 20px; }
.admin-pad-16-20 { padding: 16px 20px; }
.admin-pad-16 { padding: 16px; }
.admin-pad-12 { padding: 12px; }
.admin-gap-8 { gap: 8px; }
.admin-gap-12 { gap: 12px; }
.admin-gap-16 { gap: 16px; }
.admin-gap-24 { gap: 24px; }
.admin-border-top { border-top: 1px solid var(--admin-border-light); }
.admin-border-bottom { border-bottom: 1px solid var(--admin-border-light); }
.admin-divider { height: 1px; background: var(--admin-border-light); margin: 12px 20px; }
.admin-border-radius-8 { border-radius: 8px; }
.admin-border-radius-10 { border-radius: 10px; }
.admin-bg-white { background: var(--admin-card-bg); }
.admin-bg-light { background: var(--admin-bg); }
.admin-shrink-0 { flex-shrink: 0; }

/* ── Notification / alert row ─────────────────────────────────── */
.admin-notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--admin-border-light); }
.admin-notif-text { font-size: 12px; color: var(--admin-text); line-height: 1.4; flex: 1; min-width: 0; }

/* ── System health summary mini-metrics ──────────────────────── */
.admin-health-mini-row { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--admin-border-light); }

/* ── Section title row ────────────────────────────────────────── */
.admin-section-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ── Table wrapper with overflow ───────────────────────────────── */
.admin-table-wrap { padding: 0 4px; }

/* ── Empty state ───────────────────────────────────────────────── */
.admin-empty { text-align: center; padding: 32px 0; color: var(--admin-text-subtle); font-size: 12px; }

/* ── Date label row under chart ───────────────────────────────── */
.admin-date-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--admin-text-disabled); margin-top: 4px; }

/* ── Legend dot inline ─────────────────────────────────────────── */
.admin-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Top users user cell ───────────────────────────────────────── */
.admin-top-users-user { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ── Grid layouts ───────────────────────────────────────────────── */
.admin-grid-2-gap-14 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-grid-2-gap-16 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.admin-form-grid { display: grid; gap: 10px; }
.admin-form-inline { display: flex; gap: 8px; align-items: center; }
.admin-form-inline > * { flex: 1; min-width: 0; }
.admin-list-stack { display: flex; flex-direction: column; gap: 2px; }
.admin-list-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--admin-border-light); background: transparent; color: var(--admin-text); text-align: left; cursor: pointer; }
.admin-list-row:hover, .admin-list-row.active { color: var(--admin-blue); }
.admin-list-row strong, .admin-list-row small { display: block; }
.admin-list-row small { margin-top: 3px; color: var(--admin-text-subtle); font-size: 11px; }
.admin-checkbox-row { display: flex; gap: 8px; align-items: center; color: var(--admin-text-muted); font-size: 12px; }
.admin-check-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--admin-text); }
.admin-check-label input[type="checkbox"] { width: 14px; height: 14px; flex: 0 0 auto; }
.admin-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-inline-error { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--admin-radius); border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent); background: color-mix(in srgb, var(--color-danger) 6%, transparent); color: var(--color-danger); font-size: 13px; font-weight: 500; }
.admin-grid-3-gap-14 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ── Revenue mini stat grid (4 cells) ──────────────────────────── */
.admin-mini-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--admin-border); border-radius: 10px; overflow: hidden; border: 1px solid var(--admin-border); margin: 0 20px 16px; }
.admin-mini-stat-cell { background: var(--admin-card-bg); padding: 14px; text-align: center; }
.admin-mini-stat-cell-value { font-size: 20px; font-weight: 800; color: var(--admin-text); letter-spacing: -0.02em; line-height: 1.1; }
.admin-mini-stat-cell-change { font-size: 10px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.admin-mini-stat-cell-change.neutral { color: var(--admin-text-subtle); }

/* ── Traffic stats row ──────────────────────────────────────────── */
.admin-traffic-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--admin-border); border-radius: 10px; overflow: hidden; border: 1px solid var(--admin-border); margin: 0 20px 14px; }

/* ── Mini stats row (below traffic chart) ──────────────────────── */
.admin-mini-stats-value { font-size: 18px; font-weight: 800; color: var(--admin-text); }

/* ── Revenue footer metrics (health card) ──────────────────────── */
.admin-revenue-footer-value { font-size: 18px; font-weight: 800; color: var(--admin-text); }

/* ── Activity feed ──────────────────────────────────────────────── */
.admin-activity-icon { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.admin-activity-body { flex: 1; min-width: 0; }

/* ── Plan distribution ─────────────────────────────────────────── */

/* ── Top users table ────────────────────────────────────────────── */

/* ── Notification item ─────────────────────────────────────────── */
.admin-notif-meta { font-size: 10px; color: var(--admin-text-subtle); margin-top: 3px; }

/* ── Chart container padding ────────────────────────────────────── */
.admin-chart-area { padding: 0 20px 16px; }
.admin-chart-area-tight { padding: 0 20px 4px; }

/* ── Skeleton card ──────────────────────────────────────────────── */
.admin-skeleton-card { background: var(--admin-card-bg); border-radius: var(--admin-radius-lg); padding: 20px 22px; border: 1px solid var(--admin-border); }

/* ── Health bar track (horizontal) ───────────────────────────────── */
.admin-health-bar-track { height: 4px; border-radius: 999px; overflow: hidden; }
.admin-health-bar-fill { height: 100%; border-radius: 999px; transition: opacity 0.5s ease; }
.admin-health-fill { height: 4px; border-radius: 999px; }

/* ── Spinner (inline) ───────────────────────────────────────────── */
.admin-spinner { width: 14px; height: 14px; border: 2px solid var(--admin-border); border-top-color: var(--admin-text-muted); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ── Flex column ────────────────────────────────────────────────── */
.admin-flex-col { display: flex; flex-direction: column; }
.admin-gap-6 { display: flex; flex-direction: column; gap: 6px; }
.admin-gap-14 { display: flex; flex-direction: column; gap: 14px; }

/* ── Col right ──────────────────────────────────────────────────── */
.col-right { text-align: right; font-weight: 700; color: var(--admin-text); }

/* ── Avatar ────────────────────────────────────────────────────── */
.admin-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--admin-text); color: var(--color-text-inverse); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Icon btn ──────────────────────────────────────────────────── */
.admin-icon-btn { width: 26px; height: 26px; border-radius: var(--admin-radius-sm); border: 1px solid var(--admin-border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--admin-text-muted); transition: all 0.12s; flex-shrink: 0; }
.admin-icon-btn:hover { background: var(--admin-bg); color: var(--admin-text); }
.admin-icon-btn.danger { color: var(--admin-red); }
.admin-icon-btn.danger:hover { background: color-mix(in srgb, var(--color-danger) 6%, transparent); border-color: var(--admin-red); }

/* ── Badge green/red/amber ───────────────────────────────────────── */
.admin-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.admin-badge-dot.green { background: var(--admin-green); }
.admin-badge-dot.red { background: var(--admin-red); }
.admin-badge-dot.amber { background: var(--admin-amber); }

/* ── Plan badge ─────────────────────────────────────────────────── */
.admin-plan-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.admin-plan-badge.free { background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent); color: var(--admin-text-muted); }
.admin-plan-badge.pro { background: color-mix(in srgb, var(--color-brand) 10%, transparent); color: var(--admin-blue); }
.admin-plan-badge.enterprise { background: color-mix(in srgb, var(--color-purple) 10%, transparent); color: var(--admin-purple); }

/* ── Nav icon container ────────────────────────────────────────── */
.admin-nav-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.admin-nav-arrow { color: var(--admin-text-disabled); font-size: 14px; flex-shrink: 0; margin-left: auto; }

/* ── Section title ──────────────────────────────────────────────── */
.admin-section-title { font-size: 14px; font-weight: 700; color: var(--admin-text); margin-bottom: 0; }
.admin-section-subtitle { font-size: 11px; color: var(--admin-text-muted); margin-top: 2px; }

/* ── Breadcrumb active ─────────────────────────────────────────── */
.admin-breadcrumb-active { color: var(--admin-text); font-weight: 500; }

/* ── Utility: Flex ─────────────────────────────────────────────── */
.admin-mb-16 { margin-bottom: 16px; }
.admin-mt-20 { margin-top: 20px; }
.admin-grid-3-gap-12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ── Top users ─────────────────────────────────────────────────── */
.admin-actions-cell { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* ── Section row ───────────────────────────────────────────────── */

/* ── Empty state ───────────────────────────────────────────────── */

/* ── Date label row under chart ───────────────────────────────── */

/* ── Legend dot inline ─────────────────────────────────────────── */

/* ── Top users user cell ───────────────────────────────────────── */

/* ── Grid layouts ───────────────────────────────────────────────── */

/* ── Revenue mini stat grid (4 cells) ──────────────────────────── */

/* ── Traffic stats row ──────────────────────────────────────────── */

/* ── Mini stats row (below traffic chart) ──────────────────────── */

/* ── Revenue footer metrics (health card) ──────────────────────── */

/* ── Activity feed ──────────────────────────────────────────────── */

/* ── Plan distribution ─────────────────────────────────────────── */

/* ── Top users table ────────────────────────────────────────────── */

/* ── Notification item ─────────────────────────────────────────── */

/* ── Chart container padding ────────────────────────────────────── */

/* ── Skeleton card ──────────────────────────────────────────────── */

/* ── Health bar track (horizontal) ───────────────────────────────── */

/* ── Spinner (inline) ───────────────────────────────────────────── */

/* ── Flex column ────────────────────────────────────────────────── */

/* ── Col right ──────────────────────────────────────────────────── */

/* ── Avatar ────────────────────────────────────────────────────── */

/* ── Icon btn ──────────────────────────────────────────────────── */

/* ── Badge green/red/amber ───────────────────────────────────────── */

/* ── Plan badge ─────────────────────────────────────────────────── */

/* ── Nav icon container ────────────────────────────────────────── */

/* ── Section title ──────────────────────────────────────────────── */

/* ── Breadcrumb active ─────────────────────────────────────────── */

/* ── Row helpers ────────────────────────────────────────────────── */
.admin-row-gap-14 { display: flex; align-items: center; gap: 14px; }
.admin-col-gap-14 { display: flex; flex-direction: column; gap: 14px; }

/* ── Margin helpers ─────────────────────────────────────────────── */
.admin-mb-14 { margin-bottom: 14px; }
.admin-mb-20 { margin-bottom: 20px; }

/* ── Table wrap ─────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
   Veluvane Premium Admin Skin — mirrors premium prototype
   ──────────────────────────────────────────────────────── */

.admin-root { background: var(--admin-bg); font-family: var(--font-body); }
.admin-root.has-sidebar { background: var(--admin-bg); }
.admin-main { background: var(--admin-bg); }
.admin-shell-header {
  min-height: 52px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--admin-header-bg) 92%, transparent);
  border-bottom: 0.5px solid var(--admin-border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
}
.admin-shell-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-shell-icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-muted);
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.admin-shell-icon-button:hover,
.admin-shell-icon-button:focus-visible {
  color: var(--admin-text);
  background: var(--admin-bg);
  border-color: var(--admin-text-disabled);
}

.admin-sidebar {
  width: 220px;
  background: var(--color-sidebar-bg);
  border-right: 0.5px solid var(--color-sidebar-border);
  box-shadow: none;
}
.admin-sidebar-logo {
  min-height: 70px;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--color-sidebar-border);
}
.admin-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--admin-radius);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
  box-shadow: none;
}
.admin-logo-name { color: var(--color-sidebar-text-1); font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.admin-logo-sub { color: var(--color-sidebar-text-3); font-size: 9px; letter-spacing: .12em; }
.admin-sidebar-nav { padding: 14px 8px; }
.admin-nav-group { margin-bottom: 14px; }
.admin-nav-group-label {
  padding: 0 10px 8px;
  color: var(--color-sidebar-text-4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}
.admin-nav-link {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--admin-radius);
  color: var(--color-sidebar-text-2);
  font-size: 13px;
  font-weight: 500;
  border: 0;
  margin: 0 0 2px;
  width: 100%;
}
.admin-nav-link.active { color: var(--color-sidebar-text-1); background: var(--color-sidebar-active); border: 0; }
.admin-sidebar-footer { border-top: 0.5px solid var(--color-sidebar-border); padding: 14px 16px; }
.admin-user-avatar { background: var(--color-brand-soft); color: var(--color-brand); border: 1px solid var(--color-brand-border); box-shadow: none; }
.admin-user-name { color: var(--color-sidebar-text-1); font-weight: 700; }
.admin-user-role { color: var(--color-sidebar-text-3); letter-spacing: .08em; }

.admin-page-header-inner,
.admin-root.has-sidebar .admin-page-header-inner {
  height: 70px;
  padding: 0 32px;
  background: color-mix(in srgb, var(--admin-header-bg) 94%, transparent);
  border-bottom: 0.5px solid var(--admin-border);
  box-shadow: none;
  backdrop-filter: blur(20px);
}
.admin-page-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--admin-text); }
.admin-page-breadcrumb { color: var(--admin-text-subtle); font-size: 12px; }
.admin-page-body { padding: 28px 32px 40px; }

.admin-stat-grid { gap: 12px; }
.admin-stat-card {
  border: 0.5px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-sm);
  padding: 22px;
  border-left-width: 0.5px !important;
}
.admin-stat-card:hover { box-shadow: var(--admin-shadow); transform: translateY(-2px); }
.admin-stat-card.red,
.admin-stat-card.green,
.admin-stat-card.blue,
.admin-stat-card.amber,
.admin-stat-card.purple,
.admin-stat-card.gray { border-left-color: var(--admin-border); }
.admin-stat-card::before {
  content: "";
  display: block;
  height: 2px;
  margin: -22px -22px 18px;
  background: var(--admin-text);
}
.admin-stat-card.green::before { background: var(--color-success); }
.admin-stat-card.blue::before { background: var(--color-brand); }
.admin-stat-card.amber::before { background: var(--color-warning); }
.admin-stat-card.red::before { background: var(--color-danger); }
.admin-stat-card.purple::before { background: var(--admin-text); }
.admin-stat-card-label { color: var(--admin-text-subtle); font-size: 11px; text-transform: none; letter-spacing: 0; }
.admin-stat-card-value { font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.admin-stat-compare { color: var(--admin-text-disabled); }

.admin-card,
.admin-quick-nav-card,
.admin-drawer,
.admin-inline-stats,
.admin-traffic-stats,
.admin-status-row,
.admin-stat-mini,
.admin-stat-mini-inner,
.admin-storage-usage,
.admin-approval-item {
  border: 0.5px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-sm);
}
.admin-card-header,
.admin-drawer-header {
  padding: 18px 22px;
  border-bottom: 0.5px solid var(--admin-border);
}
.admin-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--admin-text); }
.admin-card-subtitle { color: var(--admin-text-subtle); }
.admin-card-body { padding: 18px 22px; }
.admin-quick-nav-card { padding: 16px 18px; box-shadow: none; }

.admin-table th {
  background: var(--admin-row-hover);
  color: var(--admin-text-disabled);
  border-bottom: 0.5px solid var(--admin-border);
}
.admin-table td { border-bottom: 0.5px solid var(--admin-border-light); }
.admin-table tbody tr:hover td { background: var(--admin-row-hover); }
.admin-table-search-wrap,
.admin-table-filter-select,
.admin-page-btn,
.admin-chart-range-btn {
  border: 0.5px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-card-bg);
  box-shadow: none;
}
.admin-page-btn.active,
.admin-chart-range-btn.active { background: var(--admin-text); border-color: var(--admin-text); color: var(--color-text-inverse); }
.admin-pagination { background: var(--admin-row-hover); border-top: 0.5px solid var(--admin-border-light); }

html,
body {
  font-family: var(--font-body);
  background: var(--admin-bg);
}

/* Keep the admin shell usable on phones without collapsing data tables. */
@media (max-width: 768px) {
  .admin-shell-header {
    padding-inline: 16px;
  }

  .admin-root.has-sidebar {
    flex-direction: column;
  }

  .admin-root.has-sidebar .admin-sidebar {
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }

  .admin-root.has-sidebar .admin-sidebar-logo {
    min-height: 58px;
    padding: 12px 16px;
  }

  .admin-root.has-sidebar .admin-sidebar-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .admin-root.has-sidebar .admin-nav-group {
    display: contents;
  }

  .admin-root.has-sidebar .admin-nav-group-label {
    display: none;
  }

  .admin-root.has-sidebar .admin-nav-link {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .admin-root.has-sidebar .admin-sidebar-footer {
    display: none;
  }

  .admin-root.has-sidebar .admin-main {
    width: 100%;
  }
}

/* ── Platform operations surfaces ─────────────────────────── */
.admin-page-header-metric {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 9px;
  color: var(--admin-text-muted);
  background: var(--admin-soft-surface);
  border-radius: 8px;
  font-size: 10px;
  white-space: nowrap;
}

.admin-page-header-metric.is-danger {
  color: var(--admin-red);
  background: color-mix(in srgb, var(--admin-red) 8%, var(--admin-card-bg));
}

.admin-page-header-metric-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--admin-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-green) 14%, transparent);
}

.admin-page-header-metric.is-danger .admin-page-header-metric-dot {
  background: var(--admin-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-red) 14%, transparent);
}

.admin-shell-notification-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--admin-text-muted);
  background: var(--admin-soft-surface);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.admin-shell-notification-button:hover,
.admin-shell-notification-button:focus-visible {
  color: var(--admin-text);
  background: var(--admin-accent-surface);
}

.admin-shell-notification-count {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: var(--color-on-danger);
  background: var(--admin-red);
  border: 2px solid var(--admin-header-bg);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

.admin-notification-card .admin-data-table,
.admin-email-unsubscribes-page .admin-data-table {
  min-width: 0;
}

.admin-notification-row-copy {
  min-width: 220px;
  max-width: 440px;
}

.admin-notification-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--admin-text);
}

.admin-notification-row-copy small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--admin-text-subtle);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-notification-row-copy.is-read {
  opacity: .7;
}

.admin-notification-unread-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--admin-blue);
}

.admin-table-link {
  padding: 0;
  color: var(--admin-blue);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.admin-table-link:hover {
  color: var(--admin-text);
  text-decoration: underline;
}

.admin-notification-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-notification-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--admin-blue);
  background: color-mix(in srgb, var(--admin-blue) 10%, var(--admin-card-bg));
  border-radius: 10px;
}

.admin-notification-detail-icon.is-red {
  color: var(--admin-red);
  background: color-mix(in srgb, var(--admin-red) 10%, var(--admin-card-bg));
}

.admin-notification-detail-icon.is-amber {
  color: var(--admin-amber);
  background: color-mix(in srgb, var(--admin-amber) 12%, var(--admin-card-bg));
}

.admin-notification-detail-hero h3 {
  margin: 8px 0 0;
  color: var(--admin-text);
  font-size: 16px;
  line-height: 1.4;
}

.admin-email-control-card {
  margin-bottom: 16px;
}

.admin-email-control-card .admin-card-header {
  align-items: center;
}

.admin-email-control-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  color: var(--admin-text-subtle);
  background: color-mix(in srgb, var(--admin-blue) 4%, var(--admin-card-bg));
  font-size: 11px;
}

.admin-email-control-note svg {
  color: var(--admin-blue);
  flex: 0 0 auto;
}

.admin-toggle-btn-danger {
  color: var(--admin-red);
  background: color-mix(in srgb, var(--admin-red) 10%, var(--admin-card-bg));
}

.admin-toggle-btn-danger .admin-toggle-thumb {
  background: var(--admin-red);
}

.admin-mono {
  color: var(--admin-text-muted);
  font-family: var(--font-code);
  font-size: 11px;
}

.admin-environment-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px 18px;
}

.admin-environment-intro h2 {
  margin: 0;
  color: var(--admin-text);
  font-size: 18px;
  letter-spacing: -.02em;
}

.admin-environment-intro p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--admin-text-subtle);
  font-size: 12px;
  line-height: 1.6;
}

.admin-environment-intro-role {
  padding: 5px 9px;
  color: var(--admin-blue);
  background: color-mix(in srgb, var(--admin-blue) 8%, var(--admin-card-bg));
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .admin-page-header-metric {
    display: none;
  }

  .admin-notification-row-copy {
    min-width: 160px;
  }

  .admin-email-control-card .admin-card-header,
  .admin-environment-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-email-control-card .admin-toggle-btn {
    align-self: flex-start;
  }
}

/* ── Component completion pass ───────────────────────────────
   These rules belong to the individual admin surfaces below. They
   intentionally do not rely on browser defaults for controls or
   page-specific form sections. */
.admin-root .admin-quick-btn {
  min-height: 32px;
  justify-content: center;
  line-height: 1.2;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.admin-root .admin-quick-btn.admin-btn-outline {
  background: transparent;
  color: var(--admin-text-muted);
  border-color: var(--admin-border);
}

.admin-root .admin-quick-btn.admin-btn-outline:hover:not(:disabled) {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  border-color: var(--admin-text-disabled);
}

.admin-root .admin-quick-btn:focus-visible,
.admin-root .admin-btn-outline:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
}

.admin-root .admin-quick-btn:disabled,
.admin-root .admin-btn-outline:disabled {
  color: var(--admin-text-disabled);
  background: var(--admin-border-light);
  border-color: var(--admin-border-light);
}

.admin-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-alert-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.admin-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-stat-label,
.admin-stat-value {
  display: block;
}

.admin-stat-label {
  margin-bottom: 8px;
  color: var(--admin-text-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.admin-stat-value {
  color: var(--admin-text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.admin-account-pools-page,
.admin-model-pool-page,
.admin-model-costs-page {
  min-width: 0;
}

.admin-account-pools-page .admin-page-body,
.admin-model-pool-page .admin-page-body,
.admin-model-costs-page .admin-page-body {
  min-width: 0;
}

.admin-model-config-modal {
  width: min(760px, calc(100vw - 32px));
}

.admin-pool-import-modal {
  width: min(840px, calc(100vw - 32px));
}

.admin-pool-account-editor-section {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-row-hover);
}

.admin-model-form {
  min-width: 0;
  overflow: hidden;
}

.admin-model-form .admin-card-header {
  align-items: flex-start;
}

.admin-model-form .admin-card-footer {
  min-height: 54px;
  padding: 10px 20px;
  border-top: 1px solid var(--admin-border-light);
  background: var(--admin-row-hover);
}

.admin-model-costs-page .admin-card-metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-row-hover);
}

.admin-model-costs-page .admin-card-metric-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-root .admin-control-checkbox,
.admin-root .admin-control-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--admin-text-disabled);
  background: var(--admin-card-bg);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.admin-root .admin-control-checkbox {
  border-radius: 4px;
}

.admin-root .admin-control-radio {
  border-radius: 50%;
}

.admin-root .admin-control-checkbox::before {
  content: "";
  width: 8px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0);
  transition: transform .12s ease;
}

.admin-root .admin-control-radio::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform .12s ease;
}

.admin-root .admin-control-checkbox:checked,
.admin-root .admin-control-radio:checked {
  border-color: var(--admin-blue);
  background: var(--admin-blue);
}

.admin-root .admin-control-checkbox:checked::before,
.admin-root .admin-control-radio:checked::before {
  transform: scale(1);
}

.admin-root .admin-control-checkbox:focus-visible,
.admin-root .admin-control-radio:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-blue) 16%, transparent);
}

.admin-root .admin-control-checkbox:disabled,
.admin-root .admin-control-radio:disabled {
  background: var(--admin-border-light);
  border-color: var(--admin-border);
  cursor: not-allowed;
  opacity: .55;
}

.admin-users-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.admin-users-bulk-bar .admin-bulk-count {
  font-weight: 700;
  white-space: nowrap;
}

.admin-users-bulk-bar .admin-bulk-divider {
  width: 1px;
  height: 16px;
  background: color-mix(in srgb, var(--color-text-inverse) 22%, transparent);
}

.admin-users-bulk-bar .admin-bulk-select {
  min-height: 28px;
  padding: 4px 30px 4px 8px;
  border-color: color-mix(in srgb, var(--color-text-inverse) 24%, transparent);
  background-color: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  color: var(--color-text-inverse);
  font-size: 11px;
}

.admin-users-bulk-bar .admin-bulk-apply {
  min-height: 28px;
  padding: 4px 10px;
  color: var(--color-text-inverse);
  border-color: color-mix(in srgb, var(--color-text-inverse) 24%, transparent);
}

.admin-users-bulk-bar .admin-bulk-close {
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent);
  cursor: pointer;
}

.admin-users-bulk-bar .admin-bulk-close:hover {
  color: var(--color-text-inverse);
  background: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
}

.admin-table-check {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
}

.admin-table-check .admin-control-checkbox {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

.admin-drawer-footer .saas-btn,
.admin-drawer-footer .admin-quick-btn {
  min-width: 96px;
  justify-content: center;
}

@media (max-width: 720px) {
  .admin-page-header-inner {
    height: auto;
    min-height: 60px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }

  .admin-page-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .admin-page-actions .saas-btn {
    flex: 1 1 auto;
    justify-content: center;
  }


  .admin-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-inline: 16px;
  }

  .admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    min-width: 720px;
  }

  .admin-drawer {
    width: min(100vw, 420px);
    max-width: 100%;
  }

  .admin-grid-2-gap-16 {
    grid-template-columns: 1fr;
  }

  .admin-form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-model-form-grid,
  .admin-model-cost-grid {
    grid-template-columns: 1fr;
  }

  .admin-model-active {
    grid-column: auto;
  }

  .admin-users-bulk-bar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .admin-users-bulk-bar .admin-bulk-close {
    margin-left: auto;
  }

  .admin-model-form .admin-card-footer {
    padding-inline: 16px;
  }
}

/* Final dashboard/mobile overrides. Keep these after shared responsive rules. */
.admin-grid-2,
.admin-grid-3,
.admin-grid-3-gap-12 {
  align-items: start;
}

.admin-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-grid-3-gap-12 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-hero-stat-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  color: var(--admin-text-subtle);
  font-size: 11px;
}

.admin-chart-empty svg {
  width: 15px;
  height: 15px;
  color: var(--admin-text-disabled);
}

.admin-health-value {
  width: auto;
  min-width: 70px;
}

.admin-model-cost-ledger-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.admin-model-cost-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

@media (max-width: 1200px) {
  .admin-hero-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-hero-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-root.has-sidebar,
  .admin-root.has-sidebar .admin-main {
    max-width: 100vw;
    min-width: 0;
    overflow-x: clip;
  }

  .admin-root.has-sidebar .admin-sidebar-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-page-header-inner {
    width: 100%;
    height: auto !important;
    min-height: 60px;
    flex-direction: column;
    align-items: stretch !important;
    padding: 12px 16px !important;
  }

  .admin-page-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .admin-page-actions > * {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .admin-page-actions .admin-quick-btn {
    white-space: nowrap;
  }

  .admin-page-body {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .admin-model-cost-ledger-grid,
  .admin-model-cost-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-model-cost-filter-grid > :last-child {
    grid-column: 1 / -1;
  }

  .admin-hero-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .admin-hero-stat-card {
    min-width: 0;
    padding: 14px;
  }

  .admin-hero-stat-label {
    font-size: 10px;
    letter-spacing: .05em;
  }

  .admin-hero-stat-value {
    font-size: 24px;
  }

  .admin-hero-stat-icon-wrap {
    width: 32px;
    height: 32px;
  }

  .admin-hero-stat-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .admin-health-value {
    min-width: 64px;
  }
}

/* ── Dashboard layout stabilization ──────────────────────────
   Keep the dashboard's primary scan path stable across real data
   densities and prevent fixed chart canvases from widening phones. */
.admin-dashboard-layout-popover {
  max-width: min(280px, calc(100vw - 32px));
}









@media (max-width: 1200px) {
}

@media (max-width: 900px) {
}

@media (max-width: 720px) {


  .admin-page-header-inner {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
  }




}

@media (max-width: 560px) {






}

/* ── Dashboard Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-dashboard-layout-popover {
    right: -60px;
    max-width: 260px;
  }

  .admin-quick-actions {
    flex-direction: column;
  }

  .admin-quick-nav-card {
    padding: 12px;
  }

  .admin-plan-dist-legend {
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-top-users-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-top-users-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-top-users-col {
    display: none;
  }

  .admin-top-users-row > div:nth-child(n+3) {
    flex: 1;
    min-width: 60px;
  }
}

@media (max-width: 560px) {
  .admin-hero-stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-hero-stat-card {
    padding: 12px;
  }

  .admin-hero-stat-value {
    font-size: 20px;
  }

  .admin-quick-nav-card {
    padding: 10px;
  }

  .admin-quick-nav-title {
    font-size: 12px;
  }

  .admin-quick-nav-desc {
    font-size: 10px;
  }

  .admin-activity-item {
    padding: 8px 0;
  }

  .admin-health-item {
    flex-wrap: wrap;
    gap: 6px;
  }

  .admin-health-track {
    flex: 1;
    min-width: 100px;
  }
}

/* ── Sites Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {

  .admin-card-title {
    font-size: 13px;
  }

  .admin-card-subtitle {
    font-size: 11px;
  }

  .admin-mini-stat {
    padding: 8px;
  }

  .admin-mini-stat-value {
    font-size: 14px;
  }

  .admin-traffic-bar-wrap {
    width: 100%;
  }

  .admin-traffic-bar-row {
    margin-bottom: 4px;
  }

  .admin-traffic-bar-track {
    flex: 1;
  }

  .admin-traffic-bar-value {
    min-width: 40px;
    text-align: right;
  }
}

@media (max-width: 560px) {
  .admin-stat-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-stat-card {
    padding: 12px;
  }

  .admin-stat-card-value {
    font-size: 18px;
  }

  .admin-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .admin-card-actions {
    width: 100%;
  }

  .admin-card-actions .saas-btn {
    flex: 1;
  }

  .admin-table {
    min-width: 600px;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px 6px;
    font-size: 11px;
  }

  .admin-drawer-body {
    padding: 12px;
  }

  .admin-drawer-section {
    margin-bottom: 16px;
  }

  .admin-drawer-section-title {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .admin-drawer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .admin-drawer-field {
    font-size: 10px;
    color: var(--color-text-muted);
  }

  .admin-drawer-value {
    font-size: 12px;
  }
}

/* ── Settings Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-settings-grid {
    grid-template-columns: 1fr;
  }

  .admin-card-body-flex {
    padding: 16px;
  }

  .admin-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .admin-field-label {
    font-size: 12px;
    font-weight: 600;
  }

  .admin-field-desc {
    font-size: 11px;
  }

  .admin-form-input {
    width: 100%;
  }

  .admin-toggle-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .admin-toggle-btn {
    align-self: flex-start;
  }

  .admin-settings-section {
    margin-bottom: 16px;
  }

  .admin-settings-section-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
  }
}

@media (max-width: 560px) {
  .admin-page-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }


  .admin-page-actions .saas-btn {
    flex: 1;
    min-width: 100px;
  }

  .admin-card {
    margin-bottom: 12px;
  }

  .admin-card-header {
    padding: 12px 16px;
  }

  .admin-card-body {
    padding: 12px 16px;
  }


  .admin-environment-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .admin-environment-tab {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 12px;
  }

  .admin-environment-summary {
    flex-direction: column;
    gap: 8px;
  }

  .admin-environment-workspace {
    flex-direction: column;
  }

  .admin-environment-diff-row {
    flex-direction: column;
    gap: 4px;
  }

  .admin-environment-pending-row {
    flex-direction: column;
    gap: 8px;
  }

  .admin-approval-item {
    flex-direction: column;
    gap: 12px;
  }

  .admin-approval-actions {
    width: 100%;
  }

  .admin-approval-actions .saas-btn {
    flex: 1;
  }

  .admin-impact-summary {
    flex-wrap: wrap;
    gap: 12px;
  }

  .admin-storage-usage-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .admin-stat-mini-inner {
    flex: 1;
    min-width: 100px;
  }
}

/* ── Common Admin Page Responsive ────────────────────────────── */
@media (max-width: 720px) {














}

/* Final cascade guard for dashboard surfaces. */



.admin-grid-3,
.admin-grid-3-gap-12 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}





@media (max-width: 1200px) {
}

@media (max-width: 900px) {
}

@media (max-width: 720px) {






}

@media (max-width: 560px) {






}

/* ── Missing Class Definitions ─────────────────────────────────────── */

/* Page containers — follow admin-users-page pattern */
.admin-coupons-page,
.admin-customer-success-page,
.admin-deployments-page,
.admin-feature-flags-page,
.admin-plan-comparison-page,
.admin-pool-topology-page {
  min-width: 0;
}

.admin-coupons-page .admin-page-body,
.admin-customer-success-page .admin-page-body,
.admin-deployments-page .admin-page-body,
.admin-feature-flags-page .admin-page-body,
.admin-plan-comparison-page .admin-page-body,
.admin-pool-topology-page .admin-page-body {
  max-width: 1440px;
}

/* Text link button — plain text that looks clickable */
.admin-text-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--admin-blue);
  cursor: pointer;
  transition: color 0.15s;
  font-family: var(--font-body);
}
.admin-text-link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

/* Table variant with more row spacing */
.admin-table-spaced tbody td {
  padding: 14px 16px;
}

/* Live risk alert — pulsing border */
.admin-live-risk-alert {
  animation: admin-risk-pulse 2s ease-in-out infinite;
}
@keyframes admin-risk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-red) 20%, transparent); }
}

/* Cell text truncation for tables */
.admin-cell-truncate {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--admin-text-muted);
}

/* Pool intake launcher card */
.admin-pool-intake-launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: var(--admin-text-muted);
  font-size: 13px;
  padding: 24px;
  text-align: center;
}
.admin-pool-intake-launcher:hover {
  border-color: var(--admin-blue);
  background: color-mix(in srgb, var(--admin-blue) 4%, transparent);
  color: var(--admin-blue);
}

/* Product create launcher card */
.admin-product-create-launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: var(--admin-text-muted);
  font-size: 13px;
  padding: 24px;
  text-align: center;
}
.admin-product-create-launcher:hover {
  border-color: var(--admin-blue);
  background: color-mix(in srgb, var(--admin-blue) 4%, transparent);
  color: var(--admin-blue);
}

/* Settings operation stack */
.admin-settings-operation-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Page-level alert override */
.admin-page-alert {
  margin-bottom: 16px;
}

/* Topology cards */
.admin-topology-card {
  margin-bottom: 16px;
}
.admin-topology-impact {
  margin-bottom: 16px;
}

/* Model pool / Expert pool modal form */
.model-pool-modal-form,
.expert-pool-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Model pool stat grid override */
.model-pool-stat-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Modal section dividers */
.admin-modal-section {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-modal-section:last-child {
  border-bottom: none;
}
.admin-modal-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}

.admin-business-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Model control plane */
.admin-channels-page,
.admin-model-catalog-page,
.admin-feature-config-page {
  min-width: 0;
}

.admin-channel-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.admin-channel-table-header {
  align-items: flex-start;
  gap: 16px;
}

.admin-channel-search {
  width: min(280px, 100%);
}

.admin-model-catalog-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-model-catalog-filters .admin-form-input {
  min-width: 130px;
}

.admin-channel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-channel-url {
  display: block;
  max-width: 220px;
  overflow: hidden;
  color: var(--admin-text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-channel-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.admin-channel-capabilities span {
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--admin-blue);
  background: color-mix(in srgb, var(--admin-blue) 9%, transparent);
  font-size: 9px;
}

.admin-channel-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-channel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.admin-channel-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.admin-channel-field .admin-field-desc {
  margin-top: -2px;
}

.admin-channel-probe,
.admin-channel-security-note,
.admin-channel-switch-row,
.admin-model-config-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-channel-probe-success,
.admin-channel-security-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--admin-green);
  font-size: 11px;
}

.admin-channel-probe-error {
  color: var(--admin-red);
  font-size: 11px;
}

.admin-channel-section-label {
  padding-top: 4px;
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-model-pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-model-json-grid {
  align-items: stretch;
}

.admin-model-json-grid .admin-channel-field {
  min-height: 140px;
}

.admin-channel-switch-row {
  padding-top: 4px;
  color: var(--admin-text-muted);
  font-size: 12px;
}

.admin-channel-switch-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-model-unpriced {
  color: var(--admin-amber);
  font-size: 11px;
}

.admin-feature-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--admin-blue) 22%, var(--admin-border));
  border-radius: var(--admin-radius-lg);
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--admin-blue) 16%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--admin-blue) 8%, var(--admin-card-bg)), var(--admin-card-bg));
}

.admin-feature-kicker {
  color: var(--admin-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.admin-feature-hero h2 {
  margin: 7px 0 5px;
  color: var(--admin-text);
  font-size: 22px;
  letter-spacing: -.03em;
}

.admin-feature-hero p {
  max-width: 620px;
  margin: 0;
  color: var(--admin-text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.admin-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.admin-feature-form-grid,
.admin-feature-routing-body,
.admin-feature-policy-list,
.admin-feature-provider-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-feature-priority-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: var(--admin-row-hover);
}

.admin-feature-priority-copy span,
.admin-feature-priority-copy small {
  color: var(--admin-text-subtle);
  font-size: 11px;
}

.admin-feature-priority-copy strong {
  color: var(--admin-text);
  font-size: 16px;
}

.admin-feature-route-select {
  width: 100%;
}

.admin-feature-fallback-list {
  display: flex;
  max-height: 260px;
  flex-direction: column;
  gap: 7px;
  overflow: auto;
}

.admin-feature-check-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(110px, .8fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--admin-border-light);
  border-radius: 8px;
  color: var(--admin-text-muted);
  font-size: 12px;
}

.admin-feature-check-row small,
.admin-feature-default-card small,
.admin-feature-policy-row small,
.admin-feature-monitor-name small,
.admin-feature-monitor-label {
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-feature-default-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-feature-default-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}

.admin-feature-default-card > div,
.admin-feature-policy-row > div,
.admin-feature-monitor-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.admin-feature-default-card strong,
.admin-feature-policy-row strong,
.admin-feature-monitor-name strong {
  overflow: hidden;
  color: var(--admin-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feature-route-status {
  overflow: hidden;
  color: var(--admin-text-subtle);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feature-route-status.configured {
  color: var(--admin-green);
}

.admin-feature-policy-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.admin-feature-provider-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--admin-border-light);
  border-radius: 8px;
}

.admin-feature-provider-row > span {
  color: var(--admin-text-subtle);
  font-size: 11px;
  text-align: center;
}

.admin-feature-provider-row strong {
  color: var(--admin-text);
  font-size: 12px;
}

.admin-feature-monitor-list {
  display: flex;
  flex-direction: column;
}

.admin-feature-monitor-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) auto 100px 100px 120px 110px auto;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--admin-border-light);
}

.admin-feature-monitor-row > div:not(.admin-feature-monitor-name),
.admin-feature-monitor-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-feature-monitor-row > div strong {
  color: var(--admin-text);
  font-size: 13px;
}

.admin-feature-monitor-input span {
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-feature-monitor-input .admin-form-input {
  width: 100%;
}

@media (max-width: 1100px) {
  .admin-feature-monitor-row {
    grid-template-columns: minmax(160px, 1fr) auto auto auto;
  }

  .admin-feature-monitor-input {
    min-width: 120px;
  }
}

@media (max-width: 800px) {
  .admin-channel-stat-grid,
  .admin-feature-grid,
  .admin-feature-default-grid,
  .admin-channel-form-grid,
  .admin-model-pricing-grid {
    grid-template-columns: 1fr;
  }

  .admin-channel-table-header,
  .admin-feature-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-model-catalog-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-channel-search {
    width: 100%;
  }

  .admin-feature-monitor-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin-feature-monitor-name,
  .admin-feature-monitor-row > .admin-badge,
  .admin-feature-monitor-row > button {
    grid-column: 1 / -1;
  }
}

.admin-root,
.admin-root *,
.admin-root *::before,
.admin-root *::after {
  box-sizing: border-box;
}

.admin-root :where(h1, h2, h3, h4, h5, h6, p, ul, ol) {
  margin-top: 0;
}

.admin-root :where(button, input, select, textarea) {
  font: inherit;
}

.admin-root button {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.admin-root button:not(:disabled),
.admin-root a,
.admin-root select:not(:disabled) {
  cursor: pointer;
}

.admin-root :where(input, select, textarea) {
  color: var(--admin-text);
  background: var(--admin-control-bg);
  border-color: transparent;
}

.admin-root :where(input, select, textarea)::-moz-placeholder {
  color: var(--admin-text-subtle);
}

.admin-root :where(input, select, textarea)::placeholder {
  color: var(--admin-text-subtle);
}

.admin-root :where(input, select, textarea):focus-visible,
.admin-root :where(button, a):focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
  box-shadow: var(--admin-focus-ring);
}

.admin-root :where(input, select, textarea):disabled,
.admin-root button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.admin-root :where(table) {
  width: 100%;
}

html:has(.admin-root),
body:has(.admin-root) {
  background: var(--color-bg-secondary);
}

/* Shell */
.admin-root.has-sidebar {
  display: flex;
  align-items: stretch;
  min-height: 100dvh;
}

.admin-root.has-sidebar .admin-main {
  min-width: 0;
  min-height: 100dvh;
  background: var(--admin-bg);
}

.admin-sidebar {
  width: var(--admin-sidebar-width);
  min-width: var(--admin-sidebar-width);
  min-height: 100dvh;
  background: var(--admin-sidebar-bg);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  transition: opacity var(--admin-transition);
}

.admin-sidebar.collapsed {
  width: var(--admin-sidebar-collapsed-width);
  min-width: var(--admin-sidebar-collapsed-width);
}

.admin-sidebar-header {
  min-height: 72px;
  padding: 0 12px;
  border: 0;
}

.admin-sidebar-logo {
  min-height: 72px;
  padding: 0 8px;
}

.admin-logo-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--admin-sidebar-brand-bg);
  color: var(--admin-sidebar-brand-fg);
  box-shadow: none;
}

.admin-logo-name {
  color: var(--color-sidebar-text-1);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.admin-logo-sub {
  color: var(--color-sidebar-text-4);
  font-size: 9px;
  letter-spacing: 0.13em;
}

.admin-sidebar-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  color: var(--color-sidebar-text-3);
  background: transparent;
  font-size: 18px;
}

.admin-sidebar-toggle:hover,
.admin-sidebar-toggle:focus-visible {
  color: var(--color-sidebar-text-1);
  background: var(--color-sidebar-hover);
  outline: none;
  box-shadow: none;
}

.admin-root .admin-sidebar-toggle-icon-open {
  transform: rotate(180deg);
}

.admin-sidebar-nav {
  padding: 12px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-sidebar-hover) transparent;
}

.admin-nav-group {
  margin-bottom: 20px;
}

.admin-nav-group-label {
  padding: 0 12px 8px;
  color: var(--color-sidebar-text-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.admin-nav-link {
  min-height: 38px;
  width: 100%;
  margin: 2px 0;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  color: var(--color-sidebar-text-2);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  transition: color var(--admin-transition), background var(--admin-transition);
}


.admin-nav-link.active {
  color: var(--color-sidebar-text-1);
  background: var(--color-sidebar-active);
  font-weight: 650;
}

.admin-sidebar.collapsed .admin-nav-link {
  width: 48px;
  min-height: 42px;
  margin-inline: auto;
  padding: 0;
}

.admin-sidebar-footer {
  padding: 14px 16px 18px;
  border: 0;
  background: var(--admin-sidebar-footer-bg);
}

.admin-user-avatar {
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--admin-sidebar-brand-bg);
  color: var(--admin-sidebar-brand-fg);
  box-shadow: none;
}

.admin-user-name {
  color: var(--color-sidebar-text-1);
  font-size: 12px;
  font-weight: 650;
}

.admin-user-role {
  color: var(--color-sidebar-text-3);
  font-size: 10px;
}

.admin-global-search-trigger {
  min-height: 38px;
  margin: 0 14px 12px;
  width: calc(100% - 28px);
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  color: var(--color-sidebar-text-3);
  background: var(--color-sidebar-hover);
  box-shadow: none;
}

.admin-global-search-trigger:hover,
.admin-global-search-trigger:focus-visible {
  color: var(--color-sidebar-text-1);
  background: var(--color-sidebar-active);
  outline: none;
  box-shadow: none;
}

.admin-global-search-trigger kbd {
  color: var(--color-sidebar-text-4);
  background: transparent;
  border: 0;
}

/* Page frame */
.admin-shell-header {
  min-height: 56px;
  padding: 0 32px;
  background: var(--admin-header-bg);
  border: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--admin-text) 4%, transparent);
  backdrop-filter: blur(18px);
}

.admin-shell-icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: var(--admin-text-muted);
  background: var(--admin-control-bg);
  box-shadow: none;
}

.admin-shell-icon-button:hover,
.admin-shell-icon-button:focus-visible {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  outline: none;
  box-shadow: none;
}

.admin-page-header-inner,
.admin-root.has-sidebar .admin-page-header-inner {
  min-height: 96px;
  height: auto;
  padding: 28px 32px 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
  top: auto;
  z-index: auto;
}

.admin-page-header-inner > div:first-child {
  min-width: 0;
}

.admin-page-title {
  color: var(--admin-text);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.admin-page-breadcrumb {
  gap: 6px;
  margin-top: 7px;
  color: var(--admin-text-subtle);
  font-size: 12px;
}

.admin-page-breadcrumb a {
  color: var(--admin-text-muted);
}

.admin-page-breadcrumb a:hover {
  color: var(--admin-blue);
  text-decoration: none;
}

.admin-page-actions {
  gap: 8px;
}

.admin-page-body {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 14px 32px 48px;
}

/* Surfaces */
.admin-card,
.admin-hero-stat-card,
.admin-stat-card,
.admin-quick-nav-card,
.admin-drawer,
.admin-inline-stats,
.admin-traffic-stats,
.admin-status-row,
.admin-stat-mini,
.admin-stat-mini-inner,
.admin-storage-usage,
.admin-approval-item {
  border: 0 !important;
  border-radius: var(--admin-radius-lg);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-sm);
}

.admin-card,
.admin-hero-stat-card,
.admin-stat-card,
.admin-quick-nav-card {
  transition: box-shadow var(--admin-transition), background var(--admin-transition), transform var(--admin-transition);
}

.admin-card:hover,
.admin-hero-stat-card:hover,
.admin-stat-card:hover {
  box-shadow: var(--admin-shadow);
  transform: none;
}

.admin-card-header {
  padding: 20px 24px 12px;
  border: 0 !important;
  background: transparent;
}

.admin-card-title {
  color: var(--admin-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.admin-card-subtitle {
  color: var(--admin-text-subtle);
  font-size: 12px;
  line-height: 1.5;
}

.admin-card-body {
  padding: 12px 24px 24px;
}

.admin-card-footer,
.admin-model-form-footer,
.model-pool-routing-footer {
  border: 0 !important;
  background: transparent;
}

.admin-hero-stat-grid,
.admin-stat-grid {
  gap: 16px;
  margin-bottom: 24px;
}

.admin-hero-stat-card,
.admin-stat-card {
  min-width: 0;
  padding: 20px 22px;
}

.admin-hero-stat-card::before,
.admin-stat-card::before {
  display: none !important;
}

.admin-hero-stat-label,
.admin-stat-card-label {
  color: var(--admin-text-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

.admin-hero-stat-value,
.admin-stat-card-value {
  color: var(--admin-text);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.admin-hero-stat-value {
  font-size: 31px;
}

.admin-stat-card-value {
  font-size: 28px;
}

.admin-stat-compare {
  color: var(--admin-text-subtle);
}

.admin-quick-nav-card {
  padding: 17px 20px;
  box-shadow: none;
  background: var(--admin-control-bg);
}

.admin-quick-nav-card:hover {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  box-shadow: none;
  transform: none;
}

/* Controls */
.admin-root .saas-btn,
.admin-root .admin-quick-btn {
  min-height: 36px;
  padding: 0 13px;
  border: 0 !important;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  transition: color var(--admin-transition), background var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-root .saas-btn-primary,
.admin-root .admin-quick-btn.primary {
  color: var(--color-brand-text);
  background: var(--color-brand);
}

.admin-root .saas-btn-primary:hover:not(:disabled),
.admin-root .admin-quick-btn.primary:hover:not(:disabled) {
  color: var(--color-brand-text);
  background: var(--color-brand-hover);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.admin-root .saas-btn-secondary,
.admin-root .admin-quick-btn:not(.primary):not(.admin-btn-outline) {
  color: var(--admin-text);
  background: var(--admin-control-bg);
}

.admin-root .saas-btn-secondary:hover:not(:disabled),
.admin-root .admin-quick-btn:not(.primary):not(.admin-btn-outline):hover:not(:disabled) {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  box-shadow: none;
}

.admin-root .saas-btn-ghost,
.admin-root .admin-quick-btn.admin-btn-outline {
  color: var(--admin-text-muted);
  background: transparent;
}

.admin-root .saas-btn-ghost:hover:not(:disabled),
.admin-root .admin-quick-btn.admin-btn-outline:hover:not(:disabled) {
  color: var(--admin-text);
  background: var(--admin-control-bg);
}

.admin-root .saas-btn-danger {
  color: var(--color-on-danger);
  background: var(--admin-red);
}

.admin-root .saas-btn-danger:hover:not(:disabled) {
  background: var(--color-danger-strong);
}

.admin-root .admin-icon-btn,
.admin-root .admin-notif-btn,
.admin-root .admin-copy-icon-btn {
  width: 32px;
  height: 32px;
  border: 0 !important;
  border-radius: 9px;
  color: var(--admin-text-muted);
  background: transparent;
  box-shadow: none;
}

.admin-root .admin-icon-btn:hover,
.admin-root .admin-icon-btn:focus-visible,
.admin-root .admin-notif-btn:hover,
.admin-root .admin-notif-btn:focus-visible,
.admin-root .admin-copy-icon-btn:hover,
.admin-root .admin-copy-icon-btn:focus-visible {
  color: var(--admin-text);
  background: var(--admin-control-bg);
  outline: none;
  box-shadow: none;
}

/* Forms and search */
.admin-root .admin-form-input,
.admin-root .saas-input,
.admin-root .admin-search-wrap,
.admin-root .admin-table-search,
.admin-root .admin-table-filter-select,
.admin-root .saas-admin-search,
.admin-root .saas-admin-filter select,
.admin-root .admin-global-search-input-wrap {
  min-height: 38px;
  border: 1px solid transparent !important;
  border-radius: 10px;
  background: var(--admin-control-bg);
  box-shadow: none;
}

.admin-root .admin-form-input,
.admin-root .saas-input,
.admin-root .admin-table-search,
.admin-root .admin-table-filter-select {
  padding: 8px 12px;
}

.admin-root select.admin-form-input,
.admin-root select.saas-input,
.admin-root .admin-table-filter-select,
.admin-root .saas-admin-filter select {
  padding-right: 34px;
}

.admin-root .admin-form-input:focus,
.admin-root .admin-form-input:focus-visible,
.admin-root .saas-input:focus,
.admin-root .saas-input:focus-visible,
.admin-root .admin-table-search:focus,
.admin-root .admin-table-search:focus-visible,
.admin-root .admin-table-filter-select:focus,
.admin-root .admin-table-filter-select:focus-visible,
.admin-root .admin-search-wrap:focus-within,
.admin-root .saas-admin-search:focus-within,
.admin-root .saas-admin-filter select:focus-visible {
  border-color: var(--admin-blue) !important;
  background: var(--admin-card-bg);
  outline: none;
  box-shadow: var(--admin-focus-ring);
}

.admin-root .admin-search-wrap,
.admin-root .saas-admin-search {
  gap: 8px;
  padding: 0 12px;
}

.admin-root .admin-search-input,
.admin-root .saas-admin-search input {
  min-height: 36px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-root .admin-form-label,
.admin-root .admin-field-label {
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

.admin-root .admin-form-description,
.admin-root .admin-field-desc {
  color: var(--admin-text-subtle);
  line-height: 1.5;
}

/* Tables */
.admin-table-toolbar,
.admin-filter-bar,
.saas-admin-toolbar {
  border: 0 !important;
  background: transparent;
}

.admin-table-toolbar,
.saas-admin-toolbar {
  padding: 12px 20px 16px;
}

.admin-filter-bar {
  padding: 12px 20px;
}

.admin-table,
.admin-data-table .data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table th,
.admin-data-table .data-table-th {
  padding: 12px 16px;
  color: var(--admin-text-subtle);
  background: transparent;
  border-bottom: 0 !important;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-table td,
.admin-data-table .data-table-td {
  padding: 15px 16px;
  color: var(--admin-text);
  border-bottom: 1px solid var(--admin-border-light);
  font-size: 13px;
}

.admin-table tbody tr:last-child td,
.admin-data-table .data-table-row:last-child .data-table-td {
  border-bottom: 0;
}

.admin-table tbody tr:hover td,
.admin-data-table .data-table-row:hover td {
  background: var(--admin-row-hover);
}

.admin-table tbody tr.selected td,
.admin-data-table .data-table-row.selected td {
  background: var(--color-brand-soft);
}

.admin-table-wrap,
.admin-data-table .data-table-wrap {
  padding: 0;
}

.admin-pagination,
.saas-admin-pagination {
  border: 0 !important;
  background: transparent;
}

.admin-page-btn,
.saas-admin-page-button {
  border: 0 !important;
  border-radius: 9px;
  background: var(--admin-control-bg);
  color: var(--admin-text-muted);
}

.admin-page-btn:hover:not(:disabled),
.saas-admin-page-button:hover:not(:disabled):not(.is-active) {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  border: 0;
}

.admin-page-btn.active,
.saas-admin-page-button.is-active {
  color: var(--color-brand-text);
  background: var(--color-brand);
  border: 0;
}

/* Status, tabs and overlays */
.admin-badge,
.saas-admin-badge,
.admin-plan-badge {
  border: 0 !important;
  border-radius: 999px;
}

.admin-badge.green,
.saas-admin-badge-green,
.admin-plan-badge.free {
  color: var(--color-success-strong);
  background: var(--color-success-subtle);
}

.admin-badge.red,
.saas-admin-badge-red {
  color: var(--color-danger-strong);
  background: var(--color-danger-subtle);
}

.admin-badge.amber,
.saas-admin-badge-amber {
  color: var(--color-warning-strong);
  background: var(--color-warning-subtle);
}

.admin-badge.blue,
.saas-admin-badge-blue,
.admin-plan-badge.starter {
  color: var(--color-brand-hover);
  background: var(--color-brand-soft);
}

.admin-badge.gray,
.saas-admin-badge-gray,
.admin-plan-badge.enterprise {
  color: var(--admin-text-muted);
  background: var(--admin-control-bg);
}

.admin-tabs {
  gap: 4px;
  padding: 0;
  border: 0 !important;
  background: transparent;
  box-shadow: none;
}

.admin-tab {
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--admin-text-muted);
}

.admin-tab:hover:not(.active) {
  color: var(--admin-text);
  background: var(--admin-control-bg);
}

.admin-tab.active {
  color: var(--admin-text);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-sm);
}

.saas-admin-tabs {
  border: 0 !important;
}

.admin-drawer,
.saas-admin-drawer {
  border: 0 !important;
  box-shadow: var(--admin-shadow-lg);
}

.admin-drawer-header,
.admin-drawer-footer,
.saas-admin-drawer-header,
.saas-admin-drawer-footer {
  border: 0 !important;
}

.admin-drawer-close,
.saas-admin-drawer-close {
  border: 0 !important;
  border-radius: 9px;
}

.admin-drawer-close:hover,
.saas-admin-drawer-close:hover {
  background: var(--admin-control-bg);
}

.admin-alert,
.admin-environment-message,
.admin-environment-diff,
.admin-feature-hero,
.admin-pool-intake-launcher,
.admin-product-create-launcher {
  border-width: 0 !important;
}

.admin-root .admin-toggle-row {
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-root .admin-toggle-btn {
  border: 0;
  box-shadow: none;
}

.admin-root .admin-approval-item,
.admin-root .admin-stat-mini,
.admin-root .admin-stat-mini-inner,
.admin-root .admin-storage-usage {
  background: var(--admin-control-bg);
  box-shadow: none;
}

.admin-root .admin-approval-tag,
.admin-root .admin-feature-check-row,
.admin-root .admin-feature-default-card,
.admin-root .admin-feature-provider-row,
.admin-root .model-pool-route-option,
.admin-root .model-pool-drawer-check,
.admin-root .model-pool-context-row,
.admin-root .model-pool-expert-row,
.admin-root .expert-pool-tag-option,
.admin-root .expert-pool-model-card,
.admin-root .expert-pool-mini-tags label {
  border: 0 !important;
  background: var(--admin-control-bg);
}

.admin-root .model-pool-route-option:hover,
.admin-root .model-pool-route-option.checked,
.admin-root .expert-pool-model-card:hover,
.admin-root .expert-pool-model-card.selected {
  background: var(--color-brand-soft);
  box-shadow: none;
}

@media (max-width: 960px) {
  .admin-page-header-inner,
  .admin-root.has-sidebar .admin-page-header-inner {
    padding-inline: 24px;
  }

  .admin-page-body {
    padding-inline: 24px;
  }
}

@media (max-width: 768px) {
  .admin-root.has-sidebar {
    display: block;
  }

  .admin-root.has-sidebar .admin-sidebar,
  .admin-root.has-sidebar .admin-sidebar.collapsed {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    position: relative;
  }

  .admin-root.has-sidebar .admin-sidebar-header {
    min-height: 60px;
  }

  .admin-root.has-sidebar .admin-sidebar-logo {
    min-height: 60px;
  }

  .admin-root.has-sidebar .admin-sidebar-nav {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
  }


  .admin-root.has-sidebar .admin-nav-group-label,
  .admin-root.has-sidebar .admin-sidebar-footer {
    display: none;
  }

  .admin-root.has-sidebar .admin-nav-link,
  .admin-root.has-sidebar .admin-sidebar.collapsed .admin-nav-link {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    white-space: nowrap;
  }

  .admin-root.has-sidebar .admin-global-search-trigger {
    display: none;
  }

  .admin-page-header-inner,
  .admin-root.has-sidebar .admin-page-header-inner {
    min-height: 88px;
    padding: 24px 16px 8px;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .admin-page-title {
    font-size: 22px;
  }


  .admin-page-body {
    padding: 12px 16px 32px;
  }

  .admin-root .admin-grid-2,
  .admin-root .admin-grid-3,
  .admin-root .admin-grid-3-gap-12 {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-root .admin-hero-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-card-header {
    padding-inline: 18px;
  }

  .admin-card-body {
    padding-inline: 18px;
  }

  .admin-table-wrap,
  .admin-data-table .data-table-wrap {
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-root *,
  .admin-root *::before,
  .admin-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   ADMIN COMPONENT CONTRACT
   The admin surface has two generations of shared components.
   Keep both class families on the same token and control system.
   ============================================================ */

.admin-root :where(
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, dl, dt, dd, figure, blockquote
) {
  margin: 0;
}

.admin-root :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.admin-root :where(button, input, select, textarea) {
  margin: 0;
  font: inherit;
  line-height: 1.4;
}

.admin-root :where(button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  text-decoration: none;
}

.admin-root :where(a) {
  color: inherit;
  text-decoration: none;
}

.admin-root :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  color: var(--admin-text);
  background: var(--admin-control-bg);
  border: 0;
  outline: 0;
}

.admin-root :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
)::-moz-placeholder {
  color: var(--admin-text-subtle);
  opacity: 1;
}

.admin-root :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
)::placeholder {
  color: var(--admin-text-subtle);
  opacity: 1;
}

.admin-root :where(select) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: var(--control-select-icon);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.admin-root :where(input[type="checkbox"], input[type="radio"]) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  padding: 0;
  background: var(--admin-card-bg);
  box-shadow: inset 0 0 0 1px var(--admin-line-strong);
  cursor: pointer;
}

.admin-root :where(input[type="checkbox"]) {
  border-radius: 5px;
}

.admin-root :where(input[type="radio"]) {
  border-radius: 50%;
}

.admin-root :where(input[type="checkbox"]:checked, input[type="radio"]:checked) {
  background: var(--admin-blue);
  box-shadow: inset 0 0 0 1px var(--admin-blue);
}

.admin-root :where(input[type="checkbox"]:checked)::after {
  display: block;
  width: 8px;
  height: 4px;
  margin: 4px 0 0 3px;
  border-bottom: 2px solid var(--color-brand-text);
  border-left: 2px solid var(--color-brand-text);
  content: "";
  transform: rotate(-45deg);
}

.admin-root :where(input[type="radio"]:checked)::after {
  display: block;
  width: 6px;
  height: 6px;
  margin: 4px;
  border-radius: 50%;
  background: var(--color-brand-text);
  content: "";
}

.admin-root :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button,
  a
):focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
  box-shadow: var(--admin-focus-ring);
}

/* Page frame and layout primitives */
.admin-root .admin-page-header {
  margin: 0;
  border: 0 !important;
  background: transparent;
  box-shadow: none;
}

.admin-root .admin-page-meta {
  color: var(--admin-text-subtle);
  font-size: 12px;
}

.admin-root .admin-page-actions,
.admin-root .admin-card-actions,
.admin-root .admin-toolbar-actions,
.admin-root .admin-table-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-root .admin-grid-2,
.admin-root .admin-grid-2-gap-14,
.admin-root .admin-grid-2-gap-16,
.admin-root .admin-grid-3,
.admin-root .admin-grid-3-gap-12,
.admin-root .admin-grid-3-gap-14,
.admin-root .admin-inline-grid-4,
.admin-root .admin-stat-grid,
.admin-root .admin-hero-stat-grid {
  min-width: 0;
}

.admin-root .admin-grid-2,
.admin-root .admin-grid-2-gap-14,
.admin-root .admin-grid-2-gap-16 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-root .admin-grid-3,
.admin-root .admin-grid-3-gap-12,
.admin-root .admin-grid-3-gap-14 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-root .admin-inline-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Button families */
.admin-root .admin-btn,
.admin-root .admin-error-boundary-btn,
.admin-root .admin-quick-btn {
  min-height: var(--admin-control-height-sm);
  gap: 7px;
  padding: 0 12px;
  color: var(--admin-text);
  background: var(--admin-control-bg);
  border: 0 !important;
  border-radius: 9px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  transition: color var(--admin-transition), background var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-root .admin-btn:hover:not(:disabled),
.admin-root .admin-error-boundary-btn:hover:not(:disabled),
.admin-root .admin-quick-btn:hover:not(:disabled) {
  color: var(--admin-text);
  background: var(--admin-row-hover);
  box-shadow: none;
}

.admin-root .admin-btn-primary,
.admin-root .admin-quick-btn.primary,
.admin-root .admin-error-boundary-btn.primary {
  color: var(--color-brand-text);
  background: var(--color-brand);
}

.admin-root .admin-btn-primary:hover:not(:disabled),
.admin-root .admin-quick-btn.primary:hover:not(:disabled),
.admin-root .admin-error-boundary-btn.primary:hover:not(:disabled) {
  color: var(--color-brand-text);
  background: var(--color-brand-hover);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.admin-root .admin-btn-danger,
.admin-root .admin-error-boundary-btn.danger {
  color: var(--color-on-danger);
  background: var(--admin-red);
}

.admin-root .admin-btn-danger:hover:not(:disabled),
.admin-root .admin-error-boundary-btn.danger:hover:not(:disabled) {
  color: var(--color-on-danger);
  background: var(--color-danger-strong);
}

.admin-root .admin-btn-ghost,
.admin-root .admin-btn-outline,
.admin-root .admin-quick-btn.admin-btn-outline {
  color: var(--admin-text-muted);
  background: transparent;
}

.admin-root .admin-btn-ghost:hover:not(:disabled),
.admin-root .admin-btn-outline:hover:not(:disabled),
.admin-root .admin-quick-btn.admin-btn-outline:hover:not(:disabled) {
  color: var(--admin-text);
  background: var(--admin-control-bg);
}

.admin-root .admin-btn-sm,
.admin-root .admin-quick-btn.sm {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 11px;
}

.admin-root .admin-btn:disabled,
.admin-root .admin-error-boundary-btn:disabled,
.admin-root .admin-quick-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.admin-root .admin-error-boundary-card {
  border: 0;
  border-radius: var(--admin-radius-lg);
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow);
}

/* Form primitives */
.admin-root .admin-form {
  gap: var(--admin-space-6);
}

.admin-root .admin-form-grid {
  gap: var(--admin-space-5) var(--admin-space-4);
}

.admin-root .admin-form-field,
.admin-root .admin-form-group,
.admin-root .saas-schema-field {
  min-width: 0;
}

.admin-root .admin-form-input,
.admin-root .admin-table-search,
.admin-root .admin-table-filter-select,
.admin-root .saas-input {
  width: 100%;
  min-height: var(--admin-control-height);
  padding: 9px 12px;
  color: var(--admin-text);
  background: var(--admin-control-bg);
  border: 0 !important;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px transparent;
  font-size: 13px;
  line-height: 1.4;
  transition: background var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-root .admin-form-input:hover,
.admin-root .admin-table-search:hover,
.admin-root .admin-table-filter-select:hover,
.admin-root .saas-input:hover {
  background: var(--admin-row-hover);
}

.admin-root .admin-form-input:focus,
.admin-root .admin-form-input:focus-visible,
.admin-root .admin-table-search:focus,
.admin-root .admin-table-search:focus-visible,
.admin-root .admin-table-filter-select:focus,
.admin-root .admin-table-filter-select:focus-visible,
.admin-root .saas-input:focus,
.admin-root .saas-input:focus-visible {
  background: var(--admin-card-bg);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--admin-blue), var(--admin-focus-ring);
}

.admin-root textarea.admin-form-input,
.admin-root textarea.saas-input {
  min-height: 92px;
  resize: vertical;
}

.admin-root .admin-form-field.has-error .admin-form-input,
.admin-root .admin-form-field.has-error .saas-input {
  box-shadow: inset 0 0 0 1px var(--admin-red);
}

.admin-root .admin-form-section {
  border-top: 0;
}

.admin-root .admin-form-label,
.admin-root .admin-field-label,
.admin-root .saas-form-label {
  color: var(--admin-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-root .admin-form-description,
.admin-root .admin-form-error,
.admin-root .admin-field-desc {
  font-size: 11px;
  line-height: 1.5;
}

.admin-root .admin-form-description,
.admin-root .admin-field-desc {
  color: var(--admin-text-subtle);
}

.admin-root .admin-form-error {
  color: var(--admin-red);
}

.admin-root .admin-check-label,
.admin-root .admin-checkbox-row {
  gap: 8px;
  color: var(--admin-text-muted);
}

/* Tables, filters, and status text */
.admin-root .admin-table-toolbar,
.admin-root .admin-filter-bar,
.admin-root .saas-admin-toolbar,
.admin-root .saas-admin-bulk-bar {
  border: 0 !important;
  background: transparent;
}

.admin-root .admin-table-toolbar,
.admin-root .admin-filter-bar,
.admin-root .saas-admin-toolbar {
  padding: 8px 0 16px;
}

.admin-root .saas-admin-toolbar-main,
.admin-root .saas-admin-toolbar-end,
.admin-root .saas-admin-bulk-actions {
  gap: 8px;
}

.admin-root .saas-admin-search,
.admin-root .admin-search-wrap,
.admin-root .admin-global-search-input-wrap {
  min-height: var(--admin-control-height);
  border: 0 !important;
  border-radius: 10px;
  background: var(--admin-control-bg);
  box-shadow: none;
}

.admin-root .saas-admin-search input,
.admin-root .admin-search-input {
  min-height: 36px;
  color: var(--admin-text);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.admin-root .saas-admin-filter select,
.admin-root .admin-toolbar-select {
  min-height: var(--admin-control-height);
  padding: 0 34px 0 12px;
  color: var(--admin-text);
  background-color: var(--admin-control-bg);
  border: 0 !important;
  border-radius: 10px;
  font-size: 12px;
}

.admin-root .admin-data-table .data-table,
.admin-root .admin-table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-root .admin-data-table .data-table-th,
.admin-root .admin-table th {
  padding: 12px 16px;
  color: var(--admin-text-subtle);
  background: transparent;
  border: 0 !important;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.admin-root .admin-data-table .data-table-td,
.admin-root .admin-table td {
  padding: 14px 16px;
  color: var(--admin-text);
  border: 0;
  box-shadow: inset 0 -1px 0 var(--admin-line);
  font-size: 13px;
  vertical-align: middle;
}

.admin-root .admin-data-table .data-table-row:last-child .data-table-td,
.admin-root .admin-table tbody tr:last-child td {
  box-shadow: none;
}

.admin-root .admin-data-table .data-table-row:hover td,
.admin-root .admin-table tbody tr:hover td {
  background: var(--admin-row-hover);
}

.admin-root .admin-table-secondary,
.admin-root .admin-table-muted {
  display: block;
  margin-top: 3px;
  color: var(--admin-text-subtle);
  font-size: 11px;
  line-height: 1.4;
}

.admin-root .admin-text-link {
  color: var(--admin-blue);
  font-weight: 600;
}

.admin-root .admin-text-link:hover {
  color: var(--color-brand-hover);
}

.admin-root .admin-row-gap-6 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-root .admin-bulk-select {
  width: auto;
  min-width: 150px;
}

.admin-root .saas-admin-bulk-bar {
  min-height: 44px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--color-brand-soft);
}

.admin-root .saas-admin-pagination,
.admin-root .admin-pagination {
  min-height: 48px;
  padding: 12px 0 0;
  border: 0 !important;
}

.admin-root .saas-admin-page-button,
.admin-root .admin-page-btn {
  min-width: 30px;
  min-height: 30px;
  border: 0 !important;
  border-radius: 9px;
  background: var(--admin-control-bg);
  color: var(--admin-text-muted);
}

.admin-root .saas-admin-page-button:hover:not(:disabled):not(.is-active),
.admin-root .admin-page-btn:hover:not(:disabled):not(.active) {
  color: var(--admin-text);
  background: var(--admin-row-hover);
}

.admin-root .saas-admin-page-button.is-active,
.admin-root .admin-page-btn.active {
  color: var(--color-brand-text);
  background: var(--color-brand);
}

/* Badges, tabs, descriptions, drawers, and overlays */
.admin-root .admin-badge,
.admin-root .saas-admin-badge,
.admin-root .admin-plan-badge,
.admin-root .saas-admin-tab-count {
  border: 0 !important;
  border-radius: 999px;
}

.admin-root .saas-admin-tabs {
  border: 0 !important;
}

.admin-root .saas-admin-tab-list {
  gap: 6px;
  align-items: center;
}

.admin-root .saas-admin-tab {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
}

.admin-root .saas-admin-tab::after {
  display: none;
}

.admin-root .saas-admin-tab:hover:not(:disabled),
.admin-root .saas-admin-tab.is-active {
  color: var(--admin-text);
  background: var(--admin-control-bg);
}

.admin-root .saas-admin-tab.is-active {
  font-weight: 700;
}

.admin-root .saas-admin-descriptions {
  gap: 8px 24px;
}

.admin-root .saas-admin-description-item {
  gap: 16px;
  padding: 10px 0;
  border: 0;
}

.admin-root .saas-admin-descriptions.is-bordered {
  gap: 8px;
  overflow: visible;
  background: transparent;
  border: 0;
}

.admin-root .saas-admin-descriptions.is-bordered .saas-admin-description-item {
  border-radius: 10px;
  background: var(--admin-control-bg);
}

.admin-root .admin-drawer-overlay,
.admin-root .saas-admin-drawer-backdrop {
  background: var(--admin-overlay);
  backdrop-filter: blur(4px);
}

.admin-root .admin-drawer,
.admin-root .saas-admin-drawer {
  border: 0 !important;
  border-radius: 18px 0 0 18px;
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-lg);
}

.admin-root .admin-drawer-header,
.admin-root .admin-drawer-footer,
.admin-root .saas-admin-drawer-header,
.admin-root .saas-admin-drawer-footer {
  border: 0 !important;
}

.admin-root .admin-drawer-close,
.admin-root .saas-admin-drawer-close,
.admin-root .modal-close {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 9px;
  color: var(--admin-text-muted);
  background: transparent;
  font-size: 18px;
}

.admin-root .admin-drawer-close:hover,
.admin-root .saas-admin-drawer-close:hover,
.admin-root .modal-close:hover {
  color: var(--admin-text);
  background: var(--admin-control-bg);
}

.admin-root .saas-admin-drawer-section {
  margin-bottom: 24px;
}

.admin-root .admin-drawer-row {
  border: 0;
  box-shadow: inset 0 -1px 0 var(--admin-line);
}

.admin-root .admin-drawer-row:last-child {
  box-shadow: none;
}

.admin-root .admin-alert,
.admin-root .admin-inline-error,
.admin-root .admin-inline-notice {
  border: 0 !important;
  border-radius: 10px;
  box-shadow: none;
}

.admin-root .admin-alert {
  min-height: 40px;
  padding: 10px 12px;
}

.admin-root .admin-alert-dismiss {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
}

.admin-root .admin-empty,
.admin-root .admin-empty-state,
.admin-root .saas-admin-state {
  color: var(--admin-text-subtle);
}

/* Modals and confirmation surfaces */
.admin-root .modal-overlay,
.admin-root .admin-confirm-overlay {
  background: var(--admin-overlay);
  backdrop-filter: blur(5px);
}

.admin-root .modal-box,
.admin-root .admin-confirm-dialog {
  border: 0 !important;
  border-radius: 18px;
  background: var(--admin-card-bg);
  box-shadow: var(--admin-shadow-lg);
}

.admin-root .modal-header,
.admin-root .modal-footer {
  border: 0 !important;
}

.admin-root .modal-header {
  padding: 20px 24px 8px;
}

.admin-root .modal-title {
  color: var(--admin-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

.admin-root .modal-body {
  padding: 16px 24px 24px;
}

.admin-root .modal-footer {
  padding: 12px 24px 20px;
  background: transparent;
}

.admin-root .admin-confirm-dialog {
  padding: 28px;
}

/* Dense operational surfaces */
.admin-root .admin-model-field,
.admin-root .admin-feature-field,
.admin-root .admin-config-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.admin-root .admin-mini-stat,
.admin-root .admin-stat-mini,
.admin-root .admin-stat-mini-inner,
.admin-root .admin-storage-usage,
.admin-root .admin-approval-item {
  border: 0 !important;
  border-radius: 12px;
  background: var(--admin-control-bg);
  box-shadow: none;
}

.admin-root .admin-topology-toolbar,
.admin-root .admin-model-catalog-filters,
.admin-root .admin-pool-toolbar,
.admin-root .admin-feature-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin-bottom: 16px;
}

.admin-root .admin-topology-filter-count {
  color: var(--admin-text-subtle);
  font-size: 11px;
}

@media (max-width: 900px) {
  .admin-root .admin-grid-3,
  .admin-root .admin-grid-3-gap-12,
  .admin-root .admin-grid-3-gap-14,
  .admin-root .admin-inline-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .admin-root .admin-grid-2,
  .admin-root .admin-grid-2-gap-14,
  .admin-root .admin-grid-2-gap-16,
  .admin-root .admin-grid-3,
  .admin-root .admin-grid-3-gap-12,
  .admin-root .admin-grid-3-gap-14,
  .admin-root .admin-inline-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-root .admin-page-actions,
  .admin-root .admin-card-actions,
  .admin-root .admin-toolbar-actions {
    align-items: stretch;
    width: 100%;
  }

  .admin-root .admin-page-actions > .saas-btn,
  .admin-root .admin-page-actions > .admin-btn,
  .admin-root .admin-card-actions > .saas-btn,
  .admin-root .admin-card-actions > .admin-btn {
    flex: 1 1 auto;
  }

  .admin-root .admin-card-header,
  .admin-root .admin-card-body {
    padding-inline: 16px;
  }

  .admin-root .modal-header,
  .admin-root .modal-body,
  .admin-root .modal-footer {
    padding-inline: 16px;
  }

  .admin-root .modal-box {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
  }

  .admin-root .admin-drawer,
  .admin-root .saas-admin-drawer {
    width: 100% !important;
    max-width: none;
    border-radius: 18px 18px 0 0;
  }
}

/* ============================================================
   ADMIN SURFACE REFINEMENT
   Use spacing and tonal surfaces for hierarchy. Borders are
   reserved for focus, selection, and semantic status only.
   ============================================================ */

.admin-root .admin-card,
.admin-root .admin-hero-stat-card,
.admin-root .admin-stat-card {
  border: 0 !important;
  box-shadow: var(--admin-shadow-sm);
}

.admin-root .admin-card:hover,
.admin-root .admin-hero-stat-card:hover,
.admin-root .admin-stat-card:hover {
  box-shadow: var(--admin-shadow);
}

.admin-root .admin-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-root .admin-card-title > svg,
.admin-root .admin-section-title > svg {
  flex: 0 0 auto;
  color: var(--admin-text-muted);
}

.admin-root .admin-card-subtitle {
  max-width: 72ch;
  margin-top: 5px;
}

/* Dashboard: fewer floating boxes, clearer information bands. */
.admin-root .admin-hero-stat-grid,
.admin-root .admin-stat-grid {
  gap: 10px;
}

.admin-root .admin-hero-stat-card {
  min-height: 132px;
  padding: 18px 20px;
  background: var(--admin-card-bg);
}

.admin-root .admin-hero-stat-card:hover {
  transform: translateY(-1px);
}

.admin-root .admin-hero-stat-icon-wrap {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

.admin-root .admin-onboarding-card {
  border: 0 !important;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--admin-blue) 7%, var(--admin-card-bg)), var(--admin-card-bg) 70%);
  box-shadow: var(--admin-shadow-sm);
}

.admin-root .admin-onboarding-grid {
  gap: 8px;
}

.admin-root .admin-onboarding-step {
  border: 0;
  background: color-mix(in srgb, var(--admin-card-bg) 62%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-blue) 8%, transparent);
  transition: background var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-root .admin-onboarding-step:hover {
  border: 0;
  background: var(--admin-card-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-blue) 22%, transparent);
}

.admin-root .admin-mini-stat-grid,
.admin-root .admin-traffic-stats {
  gap: 8px;
  margin: 0 20px 16px;
  overflow: visible;
  background: transparent;
  border: 0;
}

.admin-root .admin-mini-stat-cell,
.admin-root .admin-traffic-stat {
  border: 0;
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-mini-stats {
  gap: 8px;
}

.admin-root .admin-mini-stats > div {
  min-width: 100px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-revenue-footer {
  gap: 8px;
  margin: 14px 20px 0;
  padding: 0;
  border: 0;
}

.admin-root .admin-revenue-footer-item {
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-activity-item,
.admin-root .admin-notif-item,
.admin-root .admin-notif-row {
  margin: 2px 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  transition: background var(--admin-transition);
}

.admin-root .admin-activity-item:hover,
.admin-root .admin-notif-item:hover,
.admin-root .admin-notif-row:hover {
  background: var(--admin-soft-surface);
}

.admin-root .admin-health-mini-row {
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  border: 0;
}

.admin-root .admin-health-mini-row > * {
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-top-users-header {
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-top-users-row {
  margin: 2px 0;
  padding-block: 11px;
  border: 0;
  border-radius: 10px;
}

.admin-root .admin-top-users-row:hover {
  background: var(--admin-soft-surface);
}

.admin-root .admin-quick-action {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-quick-action:hover {
  border: 0;
  background: var(--admin-accent-surface);
}

.admin-root .admin-quick-nav-card {
  min-height: 86px;
  border: 0 !important;
  background: var(--admin-soft-surface);
  box-shadow: none;
}

.admin-root .admin-quick-nav-card:hover {
  background: var(--admin-accent-surface);
  box-shadow: none;
  transform: translateY(-1px);
}

.admin-root .admin-section-row {
  margin-top: 28px;
  margin-bottom: 12px;
}

.admin-root .admin-dashboard-page .admin-grid-3 > .admin-flex-col {
  display: contents;
}

/* Empty states and chart placeholders should be intentional, not blank. */
.admin-root .admin-empty,
.admin-root .admin-chart-empty,
.admin-root .admin-data-table .data-table-empty {
  display: grid;
  min-height: 112px;
  place-items: center;
  padding: 24px 16px;
  border-radius: 12px;
  background: var(--admin-soft-surface);
  color: var(--admin-text-subtle);
}

.admin-root .admin-chart-empty {
  min-height: 116px;
}

.admin-root .admin-skeleton-card {
  border: 0;
  box-shadow: none;
  background: var(--admin-soft-surface);
}

/* Settings and governance: spacing separates groups better than rules. */
.admin-root .admin-settings-grid,
.admin-root .admin-feature-grid {
  gap: 20px;
}

.admin-root .admin-settings-section {
  margin-top: 4px;
  padding-top: 20px;
  border: 0;
}

.admin-root .admin-settings-section-label {
  margin-bottom: 8px;
  color: var(--admin-text-subtle);
}

.admin-root .admin-toggle-row {
  margin: 2px 0;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  transition: background var(--admin-transition);
}

.admin-root .admin-toggle-row:hover {
  background: var(--admin-soft-surface);
}

.admin-root .admin-environment-tabs {
  gap: 6px;
}

.admin-root .admin-environment-tab {
  border: 0;
  border-radius: 9px;
  background: var(--admin-control-bg);
}

.admin-root .admin-environment-tab.active {
  border: 0;
  color: var(--admin-blue);
  background: var(--admin-accent-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-blue) 13%, transparent);
}

.admin-root .admin-environment-message,
.admin-root .admin-environment-diff,
.admin-root .admin-environment-diff-row {
  border: 0 !important;
  border-radius: 10px;
}

.admin-root .admin-environment-message {
  background: var(--admin-accent-surface);
}

.admin-root .admin-environment-diff {
  background: var(--admin-soft-surface);
}

.admin-root .admin-environment-pending,
.admin-root .admin-environment-workspace {
  border: 0;
}

.admin-root .admin-environment-diff-row {
  background: var(--admin-soft-surface);
}

.admin-root .admin-approval-item {
  border: 0 !important;
  background: var(--admin-soft-surface);
}

.admin-root .admin-approval-tag {
  border: 0;
  background: var(--admin-accent-surface);
}

.admin-root .admin-impact-warning {
  border: 0;
  border-radius: 10px;
  background: var(--color-warning-subtle);
}

/* Control-plane pages: dense rows use tonal grouping, not outlines. */
.admin-root .admin-feature-hero {
  border: 0 !important;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--admin-blue) 14%, transparent), transparent 34%),
    linear-gradient(110deg, var(--admin-accent-surface), var(--admin-card-bg) 72%);
  box-shadow: var(--admin-shadow-sm);
}

.admin-root .admin-feature-priority-copy,
.admin-root .admin-feature-check-row,
.admin-root .admin-feature-default-card,
.admin-root .admin-feature-provider-row,
.admin-root .admin-feature-monitor-row,
.admin-root .model-pool-route-option,
.admin-root .model-pool-drawer-check,
.admin-root .model-pool-context-row,
.admin-root .model-pool-expert-row,
.admin-root .expert-pool-tag-option,
.admin-root .expert-pool-model-card,
.admin-root .expert-pool-mini-tags label {
  border: 0 !important;
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-feature-check-row,
.admin-root .admin-feature-provider-row {
  padding: 10px 12px;
}

.admin-root .admin-feature-monitor-row {
  margin: 3px 0;
  padding: 12px 16px;
}

.admin-root .admin-modal-section,
.admin-root .model-pool-modal-form .model-pool-drawer-section,
.admin-root .expert-pool-modal-form .expert-pool-section {
  border: 0;
  padding-block: 18px;
}

/* Topology: filters stay compact and nodes read as a connected system. */
.admin-root .admin-topology-toolbar {
  gap: 12px;
  margin-bottom: 16px;
}

.admin-root .admin-topology-toolbar .admin-search-wrap {
  flex: 1 1 360px;
  width: auto;
  max-width: 460px;
}

.admin-root .admin-topology-filter {
  width: 160px !important;
  flex: 0 0 160px;
}

.admin-root .admin-topology-flow {
  gap: 24px;
  padding: 22px 24px 24px;
}

.admin-root .admin-topology-node {
  border: 0;
  background: var(--admin-soft-surface);
  box-shadow: none;
}

.admin-root .admin-topology-node:hover,
.admin-root .admin-topology-node.selected {
  border: 0;
  background: var(--admin-accent-surface);
  box-shadow: none;
  transform: translateY(-1px);
}

.admin-root .admin-topology-node.account_pool,
.admin-root .admin-topology-node.model_pool,
.admin-root .admin-topology-node.model,
.admin-root .admin-topology-node.expert {
  box-shadow: none;
}

.admin-root .admin-topology-edge {
  border: 0;
  background: var(--admin-soft-surface);
}

/* Legacy list patterns used by business, invitation, and pool pages. */
.admin-root .admin-business-funnel {
  gap: 8px;
  background: transparent;
  border: 0;
}

.admin-root .admin-business-funnel-step {
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-opportunity-list,
.admin-root .admin-invitation-redemption-list {
  gap: 6px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.admin-root .admin-opportunity-row,
.admin-root .admin-invitation-redemption-row {
  border-radius: 10px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-opportunity-row:hover,
.admin-root .admin-invitation-redemption-row:hover {
  background: var(--admin-accent-surface);
}

.admin-root .admin-list-row {
  margin: 2px 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
}

.admin-root .admin-list-row:hover,
.admin-root .admin-list-row.active {
  color: var(--admin-text);
  background: var(--admin-soft-surface);
}

.admin-root .admin-pool-intake-launcher,
.admin-root .admin-product-create-launcher {
  border: 0;
  border-radius: 12px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-pool-intake-launcher:hover,
.admin-root .admin-product-create-launcher:hover {
  border: 0;
  background: var(--admin-accent-surface);
}

@media (max-width: 720px) {
  .admin-root .admin-hero-stat-grid,
  .admin-root .admin-stat-grid {
    gap: 8px;
  }

  .admin-root .admin-hero-stat-card {
    min-height: 116px;
    padding: 16px;
  }

  .admin-root .admin-topology-toolbar .admin-search-wrap,
  .admin-root .admin-topology-filter {
    width: 100% !important;
    max-width: none;
    flex-basis: 100%;
  }

  .admin-root .admin-topology-flow {
    padding-inline: 16px;
  }
}

@media (max-width: 560px) {
  .admin-root .admin-topology-flow {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }
}

/* ============================================================
   ADMIN PLATFORM SHELL
   The shell carries context and hierarchy before page content.
   Navigation is grouped into expandable capability areas instead
   of presenting one long flat list of links.
   ============================================================ */

.admin-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
}

.admin-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-sidebar-hover) transparent;
}

.admin-sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.admin-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-sidebar-hover);
  border-radius: 999px;
}

.admin-nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex: 0 0 18px;
}

.admin-nav-subgroup {
  margin: 4px 0 8px;
}

.admin-nav-subgroup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  color: var(--color-sidebar-text-4);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}

.admin-nav-subgroup-toggle:hover,
.admin-nav-subgroup.is-active .admin-nav-subgroup-toggle {
  color: var(--color-sidebar-text-1);
  background: var(--color-sidebar-hover);
}

.admin-nav-subgroup-toggle svg {
  width: 12px;
  height: 12px;
  opacity: .72;
}

.admin-nav-subgroup-items {
  display: grid;
  gap: 1px;
  margin-top: 2px;
}

.admin-nav-subgroup:not(.is-open) .admin-nav-subgroup-items {
  display: none;
}

.admin-sidebar.collapsed .admin-nav-subgroup {
  margin: 0 0 4px;
}

.admin-sidebar.collapsed .admin-nav-subgroup-items {
  display: grid;
}

.admin-sidebar.collapsed .admin-nav-subgroup-items .admin-nav-link {
  margin-inline: auto;
}

.admin-shell-header {
  justify-content: space-between;
  gap: 20px;
}

.admin-shell-context {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: var(--admin-text-subtle);
  font-size: 11px;
  white-space: nowrap;
}

.admin-shell-context-kicker {
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -.01em;
}

.admin-shell-context-separator {
  color: var(--admin-text-disabled);
}

.admin-shell-context strong {
  color: var(--admin-text-muted);
  font-weight: 650;
}

.admin-shell-header-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.admin-shell-header .admin-global-search-trigger {
  width: 220px;
  min-height: 34px;
  margin: 0;
  color: var(--admin-text-muted);
  background: var(--admin-soft-surface);
  border: 0;
}

.admin-shell-header .admin-global-search-trigger:hover,
.admin-shell-header .admin-global-search-trigger:focus-visible {
  color: var(--admin-text);
  background: var(--admin-accent-surface);
}

.admin-shell-header .admin-global-search-trigger kbd {
  color: var(--admin-text-disabled);
}

.admin-shell-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  color: var(--admin-text-muted);
  background: var(--admin-soft-surface);
  border-radius: 8px;
  font-size: 10px;
  white-space: nowrap;
}

.admin-shell-status i {
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 14%, transparent);
}

.admin-shell-role {
  max-width: 140px;
  overflow: hidden;
  color: var(--admin-text-subtle);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shell-header .lang-switcher--icon {
  gap: 0;
}

.admin-shell-header .lang-icon-select {
  max-width: 58px;
  padding: 4px 3px;
  color: var(--admin-text-muted);
  background: var(--admin-soft-surface);
  border: 0;
}

@media (max-width: 900px) {
  .admin-shell-role,
  .admin-shell-status {
    display: none;
  }

  .admin-shell-header .admin-global-search-trigger {
    width: 170px;
  }
}

@media (max-width: 768px) {
  .admin-sidebar {
    position: relative;
    height: auto;
    min-height: 0;
  }

  .admin-root.has-sidebar .admin-sidebar-nav {
    flex: 0 0 auto;
  }

  .admin-nav-subgroup {
    display: contents;
  }

  .admin-nav-subgroup-items {
    display: contents;
  }

  .admin-shell-header {
    min-height: 52px;
    padding-inline: 16px;
  }

  .admin-shell-context {
    overflow: hidden;
  }

  .admin-shell-context-kicker,
  .admin-shell-context-separator,
  .admin-shell-context strong {
    display: none;
  }

  .admin-shell-context span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-shell-header .admin-global-search-trigger {
    width: 34px;
    padding: 0;
    font-size: 0;
  }

  .admin-shell-header .admin-global-search-trigger span,
  .admin-shell-header .admin-global-search-trigger kbd {
    display: none;
  }
}

/* ============================================================
   ADMIN TABLE WORKSPACE
   Every data surface gets the same scan path: context, filters,
   actions, rows, and pagination. Keep hierarchy tonal instead of
   adding another outline around each layer.
   ============================================================ */

.admin-root .admin-table-head {
  gap: 16px;
  border: 0;
  background: var(--admin-card-bg);
}

.admin-root .admin-table-filter-row {
  border: 0;
  background: var(--admin-card-bg);
}

.admin-root .admin-table-summary strong {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

.admin-root .admin-data-table .data-table-th {
  background: var(--admin-soft-surface);
  border: 0 !important;
  color: var(--admin-text-muted);
}

.admin-root .admin-data-table .data-table-td {
  box-shadow: inset 0 -1px 0 var(--admin-line);
}

.admin-root .admin-data-table .data-table-row:last-child .data-table-td {
  box-shadow: none;
}

.admin-root .saas-admin-table-skeleton {
  border: 0;
  border-radius: 0;
  background: var(--admin-card-bg);
}

.admin-root .saas-admin-skeleton-header {
  background: var(--admin-soft-surface);
  border: 0;
}

.admin-root .saas-admin-skeleton-tr {
  border-bottom-color: var(--admin-line);
}

.admin-root .admin-sidebar {
  border-right: 0;
  box-shadow: 1px 0 0 color-mix(in srgb, var(--admin-text) 5%, transparent);
}

.admin-root .admin-shell-header {
  border-bottom: 0;
  box-shadow: 0 1px 18px color-mix(in srgb, var(--admin-text) 4%, transparent);
}

@media (max-width: 720px) {
  .admin-root .admin-table-filter-row .saas-admin-toolbar-main {
    align-items: stretch;
  }

  .admin-root .admin-table-filter-row .saas-admin-filter,
  .admin-root .admin-table-filter-row .saas-admin-filter select,
  .admin-root .admin-table-filter-row .saas-admin-search {
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   ADMIN OPERATIONS FINISHING PASS
   Shared visual contract for page context, controls and tables.
   ============================================================ */

.admin-root .admin-sidebar {
  background: var(--admin-sidebar-bg) !important;
  color: var(--admin-sidebar-text);
  border-right: 0;
  box-shadow: 1px 0 0 color-mix(in srgb, var(--admin-text) 5%, transparent);
}

.admin-root .admin-sidebar-logo,
.admin-root .admin-sidebar-footer {
  border-color: var(--admin-divider);
}

.admin-root .admin-nav-link {
  border: 0;
  color: var(--admin-sidebar-text);
}

.admin-root .admin-nav-link:hover,
.admin-root .admin-nav-link.active {
  color: var(--admin-sidebar-active);
  background: color-mix(in srgb, var(--admin-sidebar-active-bg) 82%, transparent);
}

.admin-root .admin-nav-subgroup-toggle {
  color: var(--admin-sidebar-text);
  border: 0;
}

.admin-root .admin-nav-subgroup-toggle:hover,
.admin-root .admin-nav-subgroup.is-active .admin-nav-subgroup-toggle {
  color: var(--admin-sidebar-active);
  background: color-mix(in srgb, var(--admin-sidebar-active-bg) 64%, transparent);
}

.admin-root .admin-page-header-inner {
  min-height: 76px;
  height: auto;
  align-items: flex-start;
  gap: 24px;
  padding: 18px 32px 16px;
  background: var(--admin-surface-1);
  border: 0;
  box-shadow: 0 1px 18px color-mix(in srgb, var(--admin-text) 4%, transparent);
}

.admin-root .admin-page-header-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-root .admin-page-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-root .admin-page-description {
  max-width: 72ch;
  margin: 6px 0 0;
  color: var(--admin-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-root .admin-page-actions {
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 50%;
}

.admin-root .admin-card,
.admin-root .admin-hero-stat-card,
.admin-root .admin-stat-card {
  border: 0 !important;
  box-shadow: var(--admin-shadow-sm);
}

.admin-root .admin-card-header {
  background: var(--admin-surface-1);
  border-bottom: 0;
}

.admin-root .admin-data-table {
  min-width: 0;
  background: var(--admin-surface-1);
}

.admin-root .admin-data-table .data-table-wrap {
  border: 0;
  background: var(--admin-surface-1);
}

.admin-root .admin-data-table .data-table-th {
  background: var(--admin-surface-2);
  border: 0 !important;
  box-shadow: inset 0 -1px 0 var(--admin-divider-strong);
}

.admin-root .admin-data-table .data-table-td {
  border: 0;
  box-shadow: inset 0 -1px 0 var(--admin-divider);
}

.admin-root .admin-data-table .data-table-row:hover td {
  background: var(--admin-accent-surface);
}

.admin-root .admin-table-filter-row {
  padding-top: 2px;
  background: var(--admin-surface-1);
}

.admin-root .saas-admin-toolbar {
  min-height: 38px;
}

.admin-root .saas-admin-search,
.admin-root .saas-admin-filter select,
.admin-root .saas-admin-toolbar-reset,
.admin-root .saas-admin-page-button,
.admin-root .saas-admin-page-size select {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--admin-divider);
}

.admin-root .saas-admin-search:focus-within,
.admin-root .saas-admin-filter select:focus-visible,
.admin-root .saas-admin-toolbar-reset:focus-visible,
.admin-root .saas-admin-page-button:focus-visible,
.admin-root .saas-admin-page-size select:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--admin-blue), var(--admin-focus-ring);
}

.admin-root .saas-btn {
  border-color: transparent;
}

.admin-root .saas-btn-secondary {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--admin-divider);
}

.admin-root .saas-btn-ghost {
  border-color: transparent;
}

.admin-root .saas-btn:focus-visible,
.admin-root .admin-quick-btn:focus-visible {
  outline: 0;
  box-shadow: var(--admin-focus-ring);
}

@media (max-width: 900px) {
  .admin-root .admin-page-header-inner {
    padding-inline: 24px;
  }

  .admin-root .admin-page-actions {
    max-width: 44%;
  }
}

@media (max-width: 720px) {
  .admin-root .admin-page-header-inner {
    gap: 12px;
    padding: 14px 16px;
  }

  .admin-root .admin-page-actions {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
}

/* ── Admin operate-first hierarchy ───────────────────────────────────────── */
.admin-root .admin-page-header-inner {
  min-height: 58px;
  height: 58px;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
}

.admin-root .admin-page-title {
  font-size: 18px;
  line-height: 1.2;
}

.admin-root .admin-page-description,
.admin-root .admin-page-breadcrumb,
.admin-root .admin-table-summary small {
  display: none;
}

.admin-root .admin-card-header {
  padding: 14px 20px;
}

.admin-root .admin-card-body {
  padding: 16px 20px;
}

.admin-root .admin-page-body {
  padding-top: 20px;
}

@media (max-width: 720px) {
  .admin-root .admin-page-header-inner {
    min-height: 54px;
    height: auto;
    padding: 12px 16px;
  }
}

/* Keep operational cards dense: the control itself carries the meaning. */
.admin-root .admin-card-header > div > .admin-card-subtitle,
.admin-root .admin-card-header .admin-card-subtitle {
  display: none;
}

.admin-root .admin-card-header {
  gap: 10px;
}

.admin-root.has-sidebar {
  min-height: 100dvh;
  background: var(--admin-canvas);
}

.admin-root.has-sidebar .admin-main {
  min-width: 0;
  background: var(--admin-canvas);
}

/* Shell: one solid material in each theme, no black/white split. */
.admin-root .admin-sidebar {
  width: var(--admin-sidebar-width);
  min-width: var(--admin-sidebar-width);
  background: var(--admin-sidebar-bg) !important;
  color: var(--admin-sidebar-text);
  border: 0;
  box-shadow: 1px 0 0 var(--admin-line);
}

.admin-root .admin-sidebar.collapsed {
  width: var(--admin-sidebar-collapsed-width);
  min-width: var(--admin-sidebar-collapsed-width);
}

.admin-root .admin-sidebar-header {
  min-height: 68px;
  padding: 0 14px;
  background: var(--admin-sidebar-bg);
  border: 0;
}

.admin-root .admin-sidebar-logo {
  min-height: 68px;
  padding: 0 8px;
  border: 0;
}

.admin-root .admin-logo-mark,
.admin-root .admin-user-avatar {
  background: var(--admin-sidebar-brand-bg);
  color: var(--admin-sidebar-brand-fg);
  box-shadow: none;
  border: 0;
}

.admin-root .admin-logo-name,
.admin-root .admin-user-name {
  color: var(--admin-sidebar-active);
}

.admin-root .admin-logo-sub,
.admin-root .admin-user-role,
.admin-root .admin-nav-group-label {
  color: var(--admin-text-subtle);
}

.admin-root .admin-sidebar-nav {
  padding: 14px 12px;
  background: var(--admin-sidebar-bg);
}

.admin-root .admin-nav-group {
  margin-bottom: 22px;
}

.admin-root .admin-nav-group-label {
  padding: 0 10px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.admin-root .admin-nav-link,
.admin-root .admin-nav-subgroup-toggle {
  min-height: 38px;
  margin: 2px 0;
  padding: 0 11px;
  color: var(--admin-sidebar-text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
}

.admin-root .admin-nav-link:hover,
.admin-root .admin-nav-subgroup-toggle:hover {
  color: var(--admin-sidebar-active);
  background: var(--admin-surface-hover);
}

.admin-root .admin-nav-link.active,
.admin-root .admin-nav-subgroup.is-active > .admin-nav-subgroup-toggle {
  color: var(--admin-sidebar-active);
  background: var(--admin-sidebar-active-bg);
  font-weight: 650;
}

.admin-root .admin-nav-subgroup {
  margin: 5px 0 10px;
}

.admin-root .admin-nav-subgroup-items {
  gap: 2px;
  margin: 3px 0 0;
  padding-left: 10px;
}

.admin-root .admin-sidebar-footer {
  padding: 14px 16px 18px;
  background: var(--admin-sidebar-footer-bg);
  border: 0;
}

/* Header and page frame. */
.admin-root .admin-shell-header {
  min-height: 58px;
  padding: 0 30px;
  background: color-mix(in srgb, var(--admin-surface) 94%, transparent);
  border: 0;
  box-shadow: 0 1px 0 var(--admin-line);
  backdrop-filter: blur(18px);
}

.admin-root .admin-shell-context {
  gap: 8px;
  color: var(--admin-text-subtle);
}

.admin-root .admin-shell-context-kicker,
.admin-root .admin-shell-context strong {
  color: var(--admin-text);
}

.admin-root .admin-shell-icon-button,
.admin-root .admin-global-search-trigger {
  color: var(--admin-text-muted);
  background: var(--admin-control-bg);
  border: 0;
  box-shadow: none;
}

.admin-root .admin-shell-icon-button:hover,
.admin-root .admin-global-search-trigger:hover {
  color: var(--admin-text);
  background: var(--admin-surface-hover);
}

.admin-root .admin-page-header-inner {
  min-height: 64px;
  height: 64px;
  padding: 0 30px;
  gap: 18px;
  background: var(--admin-surface);
  border: 0;
  box-shadow: 0 1px 0 var(--admin-line);
}

.admin-root .admin-page-title {
  color: var(--admin-text);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.admin-root .admin-page-actions {
  gap: 8px;
}

.admin-root .admin-page-body {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 22px 30px 40px;
}

/* Surfaces use one elevation model; borders are only for controls and state. */
.admin-root .admin-card,
.admin-root .admin-stat-card,
.admin-root .admin-stat-box,
.admin-root .admin-hero-stat-card {
  background: var(--admin-surface);
  border: 0 !important;
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow-sm);
}

.admin-root .admin-card:hover,
.admin-root .admin-stat-card:hover,
.admin-root .admin-stat-box:hover {
  box-shadow: var(--admin-shadow);
}

.admin-root .admin-card-header {
  min-height: 52px;
  padding: 13px 20px;
  background: var(--admin-surface);
  border: 0;
}

.admin-root .admin-card-title {
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 700;
}

.admin-root .admin-card-subtitle {
  color: var(--admin-text-subtle);
}

/* All native controls inherit the admin skin instead of browser defaults. */
.admin-root :where(input, select, textarea) {
  color: var(--admin-text);
  background-color: var(--admin-control-bg);
  border: 0 !important;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--admin-line);
}

.admin-root :where(input, select, textarea):hover {
  background-color: var(--admin-surface-hover);
}

.admin-root :where(input, select, textarea):focus-visible {
  background-color: var(--admin-surface);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--admin-focus), var(--admin-focus-ring);
}

.admin-root :where(input, select, textarea)::-moz-placeholder {
  color: var(--admin-text-subtle);
}

.admin-root :where(input, select, textarea)::placeholder {
  color: var(--admin-text-subtle);
}

.admin-root :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--admin-focus);
  outline-offset: 2px;
}

.admin-root :where(.saas-btn, .admin-btn, .admin-quick-btn) {
  min-height: 36px;
  gap: 7px;
  padding: 0 13px;
  border: 0 !important;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 650;
  transition: color var(--admin-transition), background var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-root :where(.saas-btn-ghost, .admin-btn-ghost, .admin-quick-btn) {
  color: var(--admin-text-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--admin-line);
}

.admin-root :where(.saas-btn-ghost, .admin-btn-ghost, .admin-quick-btn):hover:not(:disabled) {
  color: var(--admin-text);
  background: var(--admin-control-bg);
  box-shadow: none;
}

.admin-root .saas-btn-primary,
.admin-root .admin-btn-primary {
  color: var(--color-brand-text);
  background: var(--admin-focus);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.admin-root .saas-btn-primary:hover:not(:disabled),
.admin-root .admin-btn-primary:hover:not(:disabled) {
  color: var(--color-brand-text);
  background: var(--color-brand-hover);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--color-brand) 24%, transparent);
}

.admin-root .saas-btn-danger,
.admin-root .admin-btn-danger {
  color: var(--color-on-danger);
  background: var(--admin-red);
}

/* Data surfaces: toolbar first, table second, no nested border boxes. */
.admin-root .admin-data-table {
  min-width: 0;
  background: var(--admin-surface);
}

.admin-root .admin-table-head {
  min-height: 48px;
  padding: 10px 20px 6px;
  background: var(--admin-surface);
}

.admin-root .admin-table-filter-row {
  padding: 4px 20px 14px;
  background: var(--admin-surface);
}

.admin-root .saas-admin-toolbar {
  min-height: 38px;
  gap: 10px;
}

.admin-root .saas-admin-search,
.admin-root .saas-admin-filter select,
.admin-root .saas-admin-toolbar-reset {
  min-height: 36px;
  background: var(--admin-control-bg);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--admin-line);
}

.admin-root .admin-data-table .data-table-wrap {
  overflow-x: auto;
  background: var(--admin-surface);
}

.admin-root .admin-data-table .data-table {
  min-width: 720px;
  color: var(--admin-text);
}

.admin-root .admin-data-table .data-table-th {
  min-height: 42px;
  padding: 11px 16px;
  color: var(--admin-text-subtle);
  background: var(--admin-surface-soft);
  border: 0;
  box-shadow: inset 0 -1px 0 var(--admin-line-strong);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.admin-root .admin-data-table .data-table-td {
  padding: 14px 16px;
  color: var(--admin-text);
  border: 0;
  box-shadow: inset 0 -1px 0 var(--admin-line);
  vertical-align: middle;
}

.admin-root .admin-data-table .data-table-row:hover td {
  background: var(--admin-surface-hover);
}

.admin-root .admin-data-table .data-table-row.selected td {
  background: var(--admin-surface-selected);
}

.admin-root .admin-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--admin-text);
  background: var(--admin-surface);
}

.admin-root .admin-table th {
  padding: 11px 16px;
  color: var(--admin-text-subtle);
  background: var(--admin-surface-soft);
  border: 0;
  box-shadow: inset 0 -1px 0 var(--admin-line-strong);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-align: left;
}

.admin-root .admin-table td {
  padding: 14px 16px;
  color: var(--admin-text);
  border: 0;
  box-shadow: inset 0 -1px 0 var(--admin-line);
  vertical-align: middle;
}

.admin-root .admin-table tbody tr:hover td {
  background: var(--admin-surface-hover);
}

.admin-root .saas-admin-bulk-bar {
  min-height: 48px;
  padding: 8px 20px;
  background: var(--admin-surface-selected);
  border: 0;
  box-shadow: inset 0 1px 0 var(--admin-line), inset 0 -1px 0 var(--admin-line);
}

.admin-root .saas-admin-pagination {
  min-height: 52px;
  padding: 12px 20px;
  background: var(--admin-surface);
  border: 0;
  box-shadow: inset 0 1px 0 var(--admin-line);
}

.admin-root .saas-admin-page-button,
.admin-root .saas-admin-page-size select {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--admin-line);
}

/* Status and notices remain semantic, not decorative. */
.admin-root .admin-badge,
.admin-root .admin-plan-badge {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--admin-line);
  font-weight: 650;
}

.admin-root .admin-inline-error,
.admin-root .admin-alert {
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-red) 18%, transparent);
}

@media (max-width: 960px) {
  .admin-root .admin-page-header-inner,
  .admin-root .admin-page-body {
    padding-inline: 22px;
  }
}

@media (max-width: 720px) {
  .admin-root .admin-page-header-inner {
    min-height: 58px;
    height: auto;
    padding: 12px 16px;
  }

  .admin-root .admin-page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-root .admin-page-body {
    padding: 16px 16px 32px;
  }

  .admin-root .admin-card-header {
    padding-inline: 16px;
  }

  .admin-root .admin-table-head,
  .admin-root .admin-table-filter-row {
    padding-inline: 16px;
  }

  .admin-root .admin-data-table .data-table {
    min-width: 640px;
  }
}

/* Final control normalization: no browser-default controls leak into admin. */
.admin-root button {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
}

.admin-root button:not(:disabled) {
  cursor: pointer;
}

.admin-root button:disabled {
  cursor: not-allowed;
}

.admin-root :where(input[type="checkbox"], input[type="radio"]) {
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  background: transparent;
  border: 0 !important;
  border-radius: 4px;
  box-shadow: none !important;
  accent-color: var(--admin-focus);
}

.admin-root :where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--admin-focus);
  outline-offset: 2px;
  box-shadow: none !important;
}

.admin-root .admin-nav-subgroup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

.admin-root .admin-nav-subgroup-toggle svg {
  flex: 0 0 auto;
  opacity: 0.65;
}

.admin-root .admin-nav-subgroup-items {
  display: grid;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--admin-transition);
}

.admin-root .admin-nav-subgroup.is-open .admin-nav-subgroup-items,
.admin-root .admin-sidebar.collapsed .admin-nav-subgroup-items {
  max-height: 720px;
  opacity: 1;
}

.admin-root .admin-nav-subgroup-items .admin-nav-link {
  min-height: 34px;
  padding-inline-start: 20px;
  font-size: 12px;
}

.admin-root .admin-sidebar.collapsed .admin-nav-subgroup-items {
  display: grid;
  padding-left: 0;
}

.admin-root .admin-sidebar.collapsed .admin-nav-subgroup-items .admin-nav-link {
  padding-inline: 0;
}

@media (max-width: 768px) {
  .admin-root .admin-nav-subgroup,
  .admin-root .admin-nav-subgroup-items {
    display: contents;
    max-height: none;
    overflow: visible;
    opacity: 1;
  }
}

/* Final density pass: make the work surface lead, not the chrome. */
.admin-root .admin-page-body {
  display: grid;
  gap: 16px;
  align-content: start;
}

.admin-root .admin-page-body > .admin-card,
.admin-root .admin-page-body > .admin-data-table,
.admin-root .admin-page-body > section {
  min-width: 0;
}

.admin-root .admin-card {
  overflow: clip;
}

.admin-root .admin-card > .admin-data-table,
.admin-root .admin-card > .admin-table {
  border-radius: inherit;
}

.admin-root .admin-table-filter-row:empty {
  display: none;
}

.admin-root .admin-table-filter-row .saas-admin-toolbar {
  width: 100%;
}

.admin-root .admin-table-head + .admin-table-filter-row {
  padding-top: 0;
}

.admin-root .admin-table-summary-line {
  min-height: 28px;
}

.admin-root .admin-table-summary-line strong {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

.admin-root .admin-table-utility-button {
  min-height: 32px;
}

.admin-root .admin-data-table .data-table-th,
.admin-root .admin-table th {
  white-space: nowrap;
}

.admin-root .admin-data-table .data-table-td,
.admin-root .admin-table td {
  overflow-wrap: anywhere;
}

.admin-root .admin-inline-error,
.admin-root .admin-inline-notice,
.admin-root .admin-alert {
  margin-bottom: 0;
}

.admin-root .admin-page-actions > :where(button, a) {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .admin-root .admin-page-body {
    gap: 12px;
  }

  .admin-root .admin-page-actions > :where(button, a) {
    flex: 0 1 auto;
  }
}

/* Final surface rule: hierarchy comes from spacing and elevation, not stacked boxes. */
.admin-root .admin-card,
.admin-root .admin-stat-card {
  border-color: color-mix(in srgb, var(--admin-border) 48%, transparent);
}

.admin-root .admin-card-header,
.admin-root .admin-drawer-header {
  border-bottom-color: color-mix(in srgb, var(--admin-border) 52%, transparent);
}

.admin-root .admin-data-table .data-table-th,
.admin-root .admin-table th {
  border-bottom: 0;
}

.admin-root .admin-data-table .data-table-td,
.admin-root .admin-table td {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--admin-border) 52%, transparent);
}

.admin-root .admin-table-search-wrap,
.admin-root .admin-table-filter-select,
.admin-root .saas-admin-search,
.admin-root .saas-admin-filter select,
.admin-root .saas-admin-toolbar-reset {
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-border) 64%, transparent);
}

.admin-root .admin-table-search-wrap:focus-within,
.admin-root .saas-admin-search:focus-within,
.admin-root .saas-admin-filter select:focus-visible {
  box-shadow: inset 0 0 0 1px var(--admin-blue), var(--admin-focus-ring);
}

.admin-root .admin-card-gap-top {
  margin-top: var(--admin-space-4);
}

.admin-root .admin-card-gap-bottom {
  margin-bottom: var(--admin-space-4);
}

.admin-root .admin-card-header-gap-top {
  margin-top: var(--admin-space-5);
}

.admin-root .admin-card-body-compact {
  padding-bottom: var(--admin-space-1);
}

.admin-root .admin-reconciliation-input {
  width: 100%;
  resize: none;
  font-family: var(--font-code);
  font-size: 12px;
}

.admin-root .admin-reconciliation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-3);
  margin-top: var(--admin-space-3);
}

.admin-root .admin-toggle-row-compact {
  min-height: 40px;
}

.admin-root .admin-table-nowrap {
  white-space: nowrap;
}

.admin-root .admin-table-muted {
  color: var(--admin-text-muted);
  font-size: 11px;
}

.admin-root .admin-table-code {
  color: var(--admin-text);
  font-family: var(--font-code);
  font-size: 11px;
}

.admin-root .admin-fieldset-reset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

@media (max-width: 720px) {
  .admin-root .admin-reconciliation-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Services page: keep static presentation in CSS and data state in JSX. */
.admin-root .admin-services-drawer-id {
  margin-top: 2px;
  color: var(--admin-text-subtle);
  font-family: var(--font-code);
  font-size: 10px;
}

.admin-root .admin-services-events-error {
  margin-bottom: 16px;
}

.admin-root .admin-services-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-root .admin-services-identity-icon {
  display: flex;
  color: var(--color-purple);
  font-size: 36px;
}

.admin-root .admin-services-identity-copy {
  min-width: 0;
}

.admin-root .admin-services-identity-name {
  overflow: hidden;
  color: var(--admin-text);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-root .admin-services-identity-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.admin-root .admin-services-version {
  color: var(--admin-text-subtle);
  font-size: 11px;
}

.admin-root .admin-services-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-root .admin-services-metric-card {
  padding: 10px;
  border-radius: 8px;
  background: var(--admin-soft-surface);
  text-align: center;
}

.admin-root .admin-services-metric-label {
  margin-bottom: 4px;
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-root .admin-services-metric-value {
  color: var(--admin-text);
  font-size: 18px;
  font-weight: 700;
}

.admin-root .admin-services-metric-meta {
  margin-top: 6px;
  color: var(--admin-text-subtle);
  font-size: 10px;
}

.admin-root .admin-services-progress {
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--admin-line);
}

.admin-root .admin-services-progress-fill,
.admin-root .admin-services-ranking-fill,
.admin-root .admin-services-uptime-fill {
  height: 100%;
  border-radius: 2px;
}

.admin-root .admin-services-close {
  margin-left: auto;
}

.admin-root .admin-services-stat-grid,
.admin-root .admin-services-overview-grid,
.admin-root .admin-services-table-card {
  margin-bottom: 16px;
}

.admin-root .admin-services-skeleton-card {
  padding: 20px;
}

.admin-root .admin-services-skeleton-label {
  width: 80px;
  margin-bottom: 10px;
}

.admin-root .admin-services-skeleton-value {
  width: 60px;
  height: 28px;
}

.admin-root .admin-services-health-content {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 20px;
}

.admin-root .admin-services-health-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}

.admin-root .admin-services-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-root .admin-services-health-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--admin-text);
  font-size: 12px;
}

.admin-root .admin-services-health-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.admin-root .admin-services-health-count {
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 700;
}

.admin-root .admin-services-ranking-content {
  padding: 10px 20px 14px;
}

.admin-root .admin-services-ranking-empty {
  padding: 20px 0;
  color: var(--admin-text-subtle);
  font-size: 12px;
  text-align: center;
}

.admin-root .admin-services-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-root .admin-service-ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.admin-root .admin-services-ranking-index {
  width: 20px;
  flex: 0 0 auto;
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.admin-root .admin-services-ranking-main {
  flex: 1;
  min-width: 0;
}

.admin-root .admin-services-ranking-name {
  overflow: hidden;
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-root .admin-services-ranking-track {
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--admin-soft-surface);
}

.admin-root .admin-services-ranking-count {
  flex: 0 0 auto;
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 700;
}

.admin-root .admin-services-table-service {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.admin-root .admin-services-uptime {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-root .admin-services-uptime-track {
  width: 60px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--admin-line);
}

.admin-root .admin-services-failure-filters {
  padding-bottom: 4px;
}

.admin-root .admin-services-empty-success {
  padding: 32px 0;
  text-align: center;
}

.admin-root .admin-services-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--color-success);
}

.admin-root .admin-services-empty-title {
  color: var(--color-success);
  font-size: 14px;
  font-weight: 600;
}

.admin-root .admin-services-empty-copy {
  margin-top: 4px;
  color: var(--admin-text-subtle);
  font-size: 11px;
}

.admin-root .admin-services-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 720px) {
  .admin-root .admin-services-metric-grid {
    grid-template-columns: 1fr;
  }

  .admin-root .admin-services-health-content {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }
}

/* ── Admin page hooks (must stay last) ──────────────────────────
   `.admin-page-body` is re-declared several times earlier in this file, so the
   page-specific width constraint has to come after all of them or it loses on
   cascade order. These hooks are referenced by Environment / Leads /
   Notifications pages and had no definition at all. */
.admin-environment-page .admin-page-body,
.admin-leads-page .admin-page-body,
.admin-notifications-page .admin-page-body {
  max-width: 1440px;
}

@media (max-width: 900px) {
  .admin-environment-page .admin-page-body,
  .admin-leads-page .admin-page-body,
  .admin-notifications-page .admin-page-body {
    padding-inline: 12px;
  }
}

/* ── Admin layout gaps (verified missing) ───────────────────────
   These seven classes are used in JSX and have *partial* rules elsewhere in
   this file (colour, font-size, margin) but were never given the core layout
   property they exist for, so they had no effect:

     admin-services-stat-grid    – had margin only, no `display: grid`
     admin-services-metric-label – had font-size only, no uppercase treatment
     admin-services-version      – had no rule at all
     admin-toggle-row-compact    – had no rule at all
     admin-table-spaced          – had no rule at all
     admin-form-field-wide       – had no rule at all
     admin-btn-outline           – styled only via the `.admin-quick-btn`
                                   compound, so it lost its border whenever
                                   used without that companion class

   Only the missing properties are declared here so nothing overrides the
   existing partial rules. */
.admin-services-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.admin-services-metric-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.admin-services-version {
  font-family: var(--font-code);
}

.admin-toggle-row-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.admin-table-spaced td,
.admin-table-spaced th {
  padding-top: 14px;
  padding-bottom: 14px;
}

.admin-form-field-wide {
  grid-column: 1 / -1;
}

.admin-btn-outline {
  background: transparent;
}

/* ── Outlined button variant (must come last) ───────────────────
   `.admin-root .admin-quick-btn` sets `border: 0 !important` twice (a UA-skin
   reset) and the second occurrence is later in this file. An `!important`
   declaration can only be beaten by another `!important` with equal-or-higher
   specificity declared later, so this override lives at the end of the
   stylesheet. Without it, `admin-btn-outline` renders with no visible border. */
.admin-root .admin-quick-btn.admin-btn-outline {
  border: 1px solid var(--admin-border) !important;
  background: transparent;
}

.admin-root .admin-quick-btn.admin-btn-outline:hover:not(:disabled) {
  border-color: var(--color-brand) !important;
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.admin-root .admin-quick-btn.admin-btn-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}