/* 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(--p-gray-400);
  cursor: pointer;
  border-radius: var(--saas-radius);
  transition: color 0.1s, background 0.1s;
  font-family: var(--saas-font);
  line-height: 1.4;
}
.lang-inline-btn:hover {
  color: var(--p-gray-900);
  background: var(--p-gray-100);
}
.lang-inline-btn.active {
  color: var(--p-gray-900);
  font-weight: 600;
}

.lang-divider {
  font-size: 11px;
  color: var(--p-gray-300);
  -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(--saas-radius);
  transition: transform 0.1s;
  line-height: 1;
}
.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(--saas-border);
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--saas-radius);
  transition: border-color 0.1s;
  line-height: 1;
}
.lang-dropdown-btn:hover { border-color: var(--p-gray-300); }

.lang-select {
  border: 1px solid var(--saas-border);
  background: var(--saas-surface);
  color: var(--color-text-primary);
  font-size: 12px;
  padding: 4px 28px 4px 8px;
  border-radius: var(--saas-radius);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a1a1aa' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none;
  font-family: var(--saas-font);
  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(--saas-border);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-gray-500);
  cursor: pointer;
  border-radius: var(--saas-radius);
  transition: all 0.1s;
  font-family: var(--saas-font);
  line-height: 1.4;
}
.lang-icon-btn:hover {
  color: var(--p-gray-900);
  border-color: var(--p-gray-300);
  background: var(--p-gray-50);
}
.lang-icon-select {
  max-width: 92px;
  border: 1px solid var(--saas-border);
  background: var(--saas-surface);
  color: var(--p-gray-600);
  padding: 3px 5px;
  border-radius: var(--saas-radius);
  font: 600 10px/1.4 var(--saas-font);
}
.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(--p-gray-600);
  padding: 2px 3px;
  border-radius: var(--saas-radius);
  font: 500 11px/1.4 var(--saas-font);
  cursor: pointer;
}
.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-global-search {
  position: relative;
  min-width: 0;
}

.saas-global-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(280px, 30vw);
  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;
}

.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 (max-width: 480px) {
  .saas-global-search-popover {
    position: fixed;
    top: 60px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}
.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 Design Token System — v2
   三层架构：Primitive → Semantic → Component Alias
   用户自定义：只需覆盖 Semantic 层变量即可换主题，无需改动组件

   层级说明：
   ├── Primitive      原始色值/数值（不直接被组件使用）
   ├── Semantic        语义化 token（主题层，用户覆盖这里）
   └── Component      组件专用别名（映射到 Semantic，保持向后兼容）
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 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;

  /* Semantic Colors */
  --p-green-50:  #f0fdf4;
  --p-green-100: #dcfce7;
  --p-green-500: #22c55e;
  --p-green-600: #16a34a;

  --p-amber-50:  #fffbeb;
  --p-amber-100: #fef3c7;
  --p-amber-400: #f59f0b;
  --p-amber-500: #d97706;

  --p-red-50:    #fef2f2;
  --p-red-100:   #fee2e2;
  --p-red-400:   #ef4444;
  --p-red-500:   #dc2626;

  --p-blue-50:   #eff6ff;
  --p-blue-100:  #dbeafe;
  --p-blue-500:  #3b82f6;

  --p-orange-50: #fff7ed;
  --p-orange-100:#fed7aa;
  --p-orange-500:#c2410c;
  --p-orange-600:#92400e;

  --p-purple-50:  #f5f3ff;
  --p-purple-100: #ede9fe;
  --p-purple-200: #ddd6fe;
  --p-purple-300: #c4b5fd;
  --p-purple-500: #8b5cf6;
  --p-purple-600: #7c3aed;
  --p-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-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:  cubic-bezier(0.34, 1.56, 0.64, 1); /* 仅限品牌动效强调；默认不用于核心 UI */

  /* ── 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-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);    /* 深色表面 */

  /* Sidebar 语义层（跟随主题：light 近白 / dark 深灰） */
  --color-sidebar-bg:      #ffffff;             /* 侧栏背景：近白，与卡片同色 */
  --color-sidebar-hover:   #f5f5f7;            /* 侧栏 hover：Apple 浅灰 */
  --color-sidebar-active:  #ebebed;            /* 侧栏激活态：Apple 中灰 */
  --color-sidebar-border:  #e5e5ea;            /* 侧栏边框：Apple 细灰线 */
  --color-sidebar-text-1: #1d1d1f;             /* 侧栏主文字：Apple 近黑 */
  --color-sidebar-text-2: #6e6e73;             /* 侧栏次要文字：Apple 灰 */
  --color-sidebar-text-3: #86868b;             /* 侧栏更弱文字 */
  --color-sidebar-text-4: #aeaeb2;             /* 侧栏最弱文字 */

  /* 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-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-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(--p-green-500);
  --color-success-subtle:  var(--p-green-50);
  --color-success-strong:  var(--p-green-600);

  --color-warning:         var(--p-amber-400);
  --color-warning-subtle:  var(--p-amber-50);
  --color-warning-strong:  var(--p-amber-500);

  --color-danger:          var(--p-red-400);
  --color-danger-subtle:   var(--p-red-50);
  --color-danger-strong:   var(--p-red-500);

  --color-info:            var(--p-blue-500);
  --color-info-subtle:     var(--p-blue-50);

  /* Colors — Purple (套餐/规划用紫色补充) */
  --color-purple:         var(--p-purple-600);
  --color-purple-strong:  var(--p-purple-700);
  --color-purple-subtle:  var(--p-purple-50);
  --color-purple-line:    var(--p-purple-300);

  /* Colors — Tier/Badge */
  --color-tier-free:       var(--p-green-500);
  --color-tier-free-bg:    var(--p-green-50);
  --color-tier-paid:       var(--p-orange-500);
  --color-tier-paid-bg:    var(--p-orange-50);

  /* 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-2:   var(--p-space-2);
  --space-3:   var(--p-space-3);
  --space-4:   var(--p-space-4);
  --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);

  /* 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: color-mix(in srgb, var(--saas-surface) 60%, var(--color-bg-secondary));
  --saas-border:   var(--p-gray-200);             /* 默认边框 #e4e4e7 */
  --saas-border-h:  var(--p-gray-300);             /* hover 边框 #d4d4d8 */

  /* 侧栏专用 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-mono:      var(--font-code);
  --saas-radius:    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);
}

/* ── DARK THEME — 内容区暗色模式（侧栏同步深色）────────── */
/* 切换内容区为暗色时，只需覆盖这些 Semantic 层变量 */
[data-theme="dark"] {
  /* 内容区暗色 surface */
  --color-bg-primary:    var(--p-gray-900);   /* 卡片：#18181b */
  --color-bg-secondary:  var(--p-gray-950);   /* 内容区背景：#09090b */
  --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: rgba(255,255,255,0.07);
  --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);

  /* 侧栏暗色（Apple 深灰，非纯黑） */
  --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;

  /* 内容区暗色交互色 (indigo 亮版，保持对比度) */
  --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);

  /* 内容区暗色语义色（subtle 背景在暗色下偏灰） */
  --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-tier-free-bg: var(--p-gray-800);
  --color-tier-paid-bg: var(--p-gray-800);

  /* 组件 Alias 同步更新 */
  --saas-content-bg:    var(--p-gray-950);   /* 内容区背景 #09090b */
  --saas-surface:      var(--p-gray-900);    /* 卡片 #18181b */
  --saas-surface-hover: var(--p-gray-800);  /* 卡片悬浮 */
  --saas-surface-muted: color-mix(in srgb, var(--p-gray-900) 70%, var(--p-gray-950));
  --saas-border:   rgba(255,255,255,0.07);
  --saas-border-h:  rgba(255,255,255,0.13);
  --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);
}

/* ── Base Reset ──────────────────────────────────────────── */
html,
body,
#root {
  min-height: 100%;
  margin: 0;
}
body {
  min-width: 320px;
}

/* 背景：内容区浅灰（侧栏独立用 sidebar token） */
.saas-root {
  background-color: var(--saas-content-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);

  -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);
}

/* ── 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(--saas-ease) both; }
.saas-anim-fadeIn  { animation: saasFadeIn   0.3s ease both; }
.saas-anim-scaleIn { animation: saasScaleIn  0.25s var(--saas-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 {
  font-size: 11px;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.saas-mono      { font-family: var(--saas-mono); font-size: 11px; }

/* ── Surface: Card（Apple 风格：柔和阴影，极细边框）────────────────── */
.saas-card {
  background: var(--saas-surface);
  border: 0.5px solid var(--saas-border);
  border-radius: var(--p-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(--saas-sidebar-bg);
  border-right: 1px solid var(--saas-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(--saas-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(--p-radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.saas-sidebar-logo-trigger:hover {
  background: var(--saas-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(--saas-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(--saas-sidebar-text-1);
  letter-spacing: -0.01em;
}
.saas-logo-sub {
  font-size: 9px; color: var(--saas-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(--saas-sidebar-text-1);
  letter-spacing: -0.01em;
}
.saas-sidebar-logo-sub {
  font-size: 9px; color: var(--saas-sidebar-text-3);
  text-transform: uppercase; letter-spacing: 0.12em; margin-top: 1px;
}

/* 侧栏顶部 Site 切换器区域 */
.saas-sidebar-site {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--saas-sidebar-border);
}

/* Nav 主区域 */
.saas-sidebar-nav {
  flex: 1;
  padding: 8px 8px;
  overflow-y: auto;
}

/* 导航分组 */
.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(--saas-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(--p-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: 1px solid var(--saas-sidebar-border);
}
.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(--p-radius-md);
  background: transparent;
  color: var(--saas-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(--saas-sidebar-hover);
  color: var(--saas-sidebar-text-1);
}
.saas-nav-generated-group-label.active {
  background: var(--saas-sidebar-active);
  color: var(--saas-sidebar-text-1);
  box-shadow: inset 2px 0 0 var(--color-brand);
}
.saas-nav-group-label:hover { color: var(--saas-sidebar-text-3); }
.saas-nav-generated-group-label:hover { color: var(--saas-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(--saas-sidebar-text-4);
  transition: transform 0.15s var(--saas-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(--saas-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(--saas-sidebar-text-2);
  border-radius: var(--p-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(--saas-sidebar-hover);
  color: var(--saas-sidebar-text-1);
}
.saas-nav-link.active {
  background: var(--saas-sidebar-active);
  color: var(--saas-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(--saas-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(--saas-sidebar-text-3);
  border-radius: var(--p-radius-md);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  border: 1px solid transparent;
}
.saas-nav-sub-item:hover {
  background: var(--saas-sidebar-hover);
  color: var(--saas-sidebar-text-2);
}
.saas-nav-sub-item.active {
  color: var(--saas-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(--saas-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(--saas-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(--saas-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(--saas-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(--saas-sidebar-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saas-user-plan {
  font-size: 9px; color: var(--saas-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(--saas-sidebar-text-3);
  border-radius: var(--p-radius-md);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.saas-user-settings:hover {
  background: var(--saas-sidebar-hover);
  color: var(--saas-sidebar-text-2);
}

/* ── Stat Card（Apple 风格，无跳起）───────────────────────────── */
.saas-stat {
  background: var(--saas-surface);
  border: 0.5px solid var(--saas-border);
  border-radius: var(--p-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(--saas-border);
}
.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(--saas-surface-hover);
}

/* ── Buttons ──────────────────────────────────────────────── */
.saas-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--saas-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  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(--saas-surface);
  color: var(--color-text-primary);
  border-color: var(--saas-border);
}
.saas-btn-secondary:hover:not(:disabled) {
  background: var(--saas-surface-hover);
  border-color: var(--saas-border-h);
}
.saas-btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.saas-btn-ghost:hover:not(:disabled) {
  background: var(--saas-surface-hover);
  color: var(--color-text-primary);
}
.saas-btn-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--saas-border);
}
.saas-btn-danger:hover:not(:disabled) {
  color: var(--saas-danger);
  border-color: var(--saas-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(--saas-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--saas-font);
  transition: background 0.15s;
}
.saas-btn-locked:hover {
  background: var(--color-warning-subtle);
}

/* ── Inputs ────────────────────────────────────────────────── */
.saas-input {
  width: 100%;
  border: 1px solid var(--saas-border);
  background: var(--saas-surface);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text-primary);
  border-radius: var(--saas-radius);
  transition: border-color 0.1s, box-shadow 0.1s;
  outline: none;
  font-family: var(--saas-font);
}
.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(--saas-danger);
}
.saas-input-error:focus {
  box-shadow: 0 0 0 2px rgba(239,68,68,0.12);
}

textarea.saas-input {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

/* Global fallback for pages that render native selects without a class. */
.saas-root select {
  min-height: 34px;
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  background-color: var(--saas-surface);
  background-image: 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");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--color-text-primary);
  font-family: var(--saas-font);
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: border-color 0.1s, box-shadow 0.1s, background-color 0.1s;
}
.saas-root select:focus {
  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 {
  color: var(--color-text-disabled);
  background-color: var(--color-bg-tertiary);
  cursor: not-allowed;
  opacity: 0.75;
}
.saas-root select option {
  background: var(--saas-surface);
  color: var(--color-text-primary);
}
.saas-root select option:disabled {
  color: var(--color-text-disabled);
}
[data-theme="dark"] .saas-root select {
  color-scheme: dark;
}

select.saas-input {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: 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");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Checkbox */
.saas-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.saas-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  border: 1px solid var(--saas-border);
  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%;

  border-radius: 999px;
  transition: width 0.6s var(--saas-ease);
}
.saas-usage-fill.warn  { background: var(--saas-warning); }
.saas-usage-fill.danger{ background: var(--saas-danger); }
.saas-usage-fill.ok    { background: var(--saas-success); }

/* ── Tags / Badges ────────────────────────────────────────── */
.saas-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  border-radius: var(--saas-radius);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.saas-badge-free     { background: var(--color-success-subtle); color: var(--p-green-600); border: 1px solid var(--p-green-100); }
.saas-badge-paid     { background: var(--p-orange-50); color: var(--p-orange-500); border: 1px solid var(--p-orange-100); }
.saas-badge-pro      { background: var(--color-purple-subtle); color: var(--color-purple); border: 1px solid var(--p-purple-300); }
.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(--p-amber-100); }
.saas-badge-required { background: var(--color-warning-subtle); color: var(--p-orange-600); border: 1px solid var(--p-amber-100); }

/* ── Mini Bundle Card (Dashboard) ────────────────────────────────────────────── */
.saas-bundle-card-mini {
  padding: 12px;
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius-md);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.saas-bundle-card-mini:hover {
  border-color: var(--saas-accent);
  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(--p-green-600); border: 1px solid var(--p-green-100); }
.saas-badge-warning  { background: var(--color-warning-subtle); color: var(--color-warning-strong); border: 1px solid var(--p-amber-100); }
.saas-badge-danger   { background: var(--color-danger-subtle); color: var(--color-danger-strong); border: 1px solid var(--p-red-100); }
.saas-badge-info     { background: var(--color-info-subtle); color: var(--color-info); border: 1px solid var(--p-blue-100); }


/* ── 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(--saas-radius);
}
.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(--saas-surface);
  border: 1px solid var(--saas-border);
}
.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(--saas-radius); flex-shrink: 0; }

/* Skeleton stat card */
.saas-skeleton-stat {
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-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(--p-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;
}

/* ── Loading Spinner ──────────────────────────────────────── */
.saas-spin {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--saas-border);
  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-lg { width: 24px; height: 24px; border-width: 2px; }

/* ── 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(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--saas-shadow-lg);
  animation: saasScaleIn 0.2s var(--saas-ease);
  overflow: hidden;
}
.saas-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--saas-border);
  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(--saas-border);
  flex-shrink: 0;
}

/* ── Code Block ────────────────────────────────────────────── */
.saas-code {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  padding: 14px 16px;
  font-family: var(--saas-mono);
  font-size: 11px;
  line-height: 1.75;
  border-radius: var(--saas-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(--saas-radius-md);
  box-shadow: var(--saas-shadow-lg);
  max-width: 320px;
  min-width: 220px;
  pointer-events: auto;
  animation: saasToastSlide 0.3s var(--saas-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(--saas-success); }
.saas-toast-error   .saas-toast-accent { color: var(--saas-danger); }
.saas-toast-warning .saas-toast-accent { color: var(--saas-warning); }
.saas-toast-info    .saas-toast-accent { color: var(--saas-info); }

/* ── Divider ──────────────────────────────────────────────── */
.saas-divider {
  border: none;
  border-top: 1px solid var(--saas-border);
  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(--saas-surface);
  border: 1px solid var(--saas-border);
  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(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-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(--saas-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;
}

/* ═════════════════════════════════════════════════════════════════════════════
   Panel Primitives — 共享服务面板组件样式
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── PanelCard ────────────────────────────────────────────────── */
.saas-panel-card {
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--p-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(--p-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(--saas-mono);
  font-size: 12px;

  word-break: break-all;
}
.saas-config-plain {
  font-family: var(--saas-mono);
  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(--p-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(--p-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(--saas-mono);
}
.saas-deploy-time {
  font-size: 11px;

  margin-left: auto;
}
.saas-deploy-commit {
  font-size: 11px;

  font-family: var(--saas-mono);
  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(--p-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(--p-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(--p-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(--saas-mono);
  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(--p-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 ─────────────────────────────────────── */
.saas-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.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(--saas-mono);
}

/* Top-level page names are already represented by the active sidebar item.
   Keep actionable controls, but remove duplicate title copy and its whitespace. */
.saas-page-header:has(> div:first-child > .saas-title-xl),
.saas-page-header:has(> div:first-child > .saas-page-title),
.saas-page-header:has(> h1.saas-page-title) {
  margin-bottom: 16px;
}
.saas-page-header:has(> div:first-child > .saas-title-xl):not(:has(> div:nth-child(2))):not(:has(> button)):not(:has(> select)),
.saas-page-header:has(> div:first-child > .saas-page-title):not(:has(> div:nth-child(2))):not(:has(> button)):not(:has(> select)),
.saas-page-header:has(> h1.saas-page-title):not(:has(> div:nth-child(2))):not(:has(> button)):not(:has(> select)) {
  display: none;
}
.saas-page-header:has(> div:first-child > .saas-title-xl):not(:has(.saas-page-header-title)):not(:has(.saas-breadcrumb)):has(> div:nth-child(2)) > div:first-child,
.saas-page-header:has(> div:first-child > .saas-page-title):not(:has(.saas-page-header-title)):not(:has(.saas-breadcrumb)):has(> div:nth-child(2)) > div:first-child,
.saas-page-header:has(> h1.saas-page-title):has(> div:nth-child(2)) > h1 {
  display: none;
}

.saas-workspace-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--saas-surface-muted);
  color: var(--color-text-secondary);
  font-weight: 500;
  font-family: var(--saas-body-font);
}

/* ── Panel Loading / Error ────────────────────────────── */
.saas-panel-loading,
.saas-panel-error {
  border-radius: var(--saas-radius-lg);
  padding: 28px 24px;
  background: var(--saas-surface);
  border: 1.5px solid var(--saas-border);
}
.saas-panel-error { border-color: var(--saas-danger); }

/* ── Status Dot ───────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-ok { background: var(--saas-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saas-success) 20%, transparent); }
.status-dot-warn { background: var(--saas-warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saas-warning) 20%, transparent); }
.status-dot-err { background: var(--saas-danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saas-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(--saas-radius-lg);
  border: 1.5px solid;
}
.cf-hero-ok   { border-color: var(--saas-success); background: color-mix(in srgb, var(--saas-success) 6%, var(--saas-surface)); }
.cf-hero-warn { border-color: var(--saas-warning); background: color-mix(in srgb, var(--saas-warning) 6%, var(--saas-surface)); }

.cf-hero-left  { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-hero-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }

.cf-hero-eyebrow  { font-size: 12px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.cf-hero-name     { font-size: 22px; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; }
.cf-hero-domain   { font-size: 13px; color: var(--color-text-link); text-decoration: none; }
.cf-hero-domain:hover { text-decoration: underline; }
.cf-hero-no-domain { font-size: 13px; color: var(--color-text-muted); font-style: italic; }
.cf-hero-unconfigured { font-size: 18px; color: var(--color-text-secondary); }

.cf-hero-status-row  { display: flex; align-items: center; gap: 6px; }
.cf-hero-status-label { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.cf-hero-badge { }

/* Config strip */
.cf-config-strip {
  display: flex;
  align-items: center;
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius-md);
  padding: 12px 20px;
  gap: 0;
  overflow-x: auto;
}
.cf-config-cell  { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; min-width: 80px; }
.cf-config-sep   { width: 1px; height: 32px; background: var(--saas-border); flex-shrink: 0; }
.cf-config-label { font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cf-config-value { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.cf-config-mono  { font-family: var(--saas-mono); font-size: 13px; }

/* Actions row */
.cf-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-actions-links {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

/* Result block */
.cf-result-block {

  border-radius: var(--saas-radius-md);
  overflow: hidden;
}
.cf-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}



/* Project grid */
.cf-section       { display: flex; flex-direction: column; gap: 10px; }
.cf-section-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.07em; }
.cf-project-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cf-project-card  { padding: 14px; border-radius: var(--saas-radius-md); border: 1px solid var(--saas-border); background: var(--saas-surface); display: flex; flex-direction: column; gap: 4px; }
.cf-project-ok    { border-color: color-mix(in srgb, var(--saas-success) 30%, transparent); }
.cf-project-err   { border-color: color-mix(in srgb, var(--saas-danger) 30%, transparent); }
.cf-project-name  { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.cf-project-subdomain { font-size: 12px; color: var(--color-text-muted); font-family: var(--saas-mono); }
.cf-project-status-row { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.cf-project-status-text { font-size: 12px; color: var(--color-text-secondary); }

/* Health check list */
.cf-check-list { display: flex; flex-direction: column; gap: 6px; }
.cf-check-row  { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--saas-radius-sm); background: var(--saas-surface-muted); }
.cf-check-label { font-size: 13px; color: var(--color-text-secondary); }

/* ── Database Panel ──────────────────────────────────── */
.db-panel { display: flex; flex-direction: column; gap: 16px; }

.db-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--saas-radius-lg);
  border: 1.5px solid;
}
.db-hero-ok   { border-color: var(--saas-success); background: color-mix(in srgb, var(--saas-success) 6%, var(--saas-surface)); }
.db-hero-warn { border-color: var(--saas-warning); background: color-mix(in srgb, var(--saas-warning) 6%, var(--saas-surface)); }
.db-hero-empty { border-color: var(--saas-border); background: var(--saas-surface); }

.db-hero-icon    { font-size: 32px; }
.db-hero-info    { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db-hero-eyebrow { font-size: 12px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.db-hero-title   { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.db-hero-host    { font-size: 13px; font-family: var(--saas-mono); color: var(--color-text-secondary); display: flex; align-items: center; gap: 8px; }
.db-ssl-badge    { font-size: 10px; padding: 1px 6px; border-radius: 10px; font-family: var(--saas-body-font); font-weight: 600; }
.db-ssl-on   { background: color-mix(in srgb, var(--saas-success) 20%, transparent); color: var(--saas-success); }
.db-ssl-off  { background: color-mix(in srgb, var(--saas-danger) 20%, transparent); color: var(--saas-danger); }

.db-hero-status   { margin-left: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.db-hero-status-text { font-size: 14px; font-weight: 600; }
.db-hero-user     { font-size: 12px; font-family: var(--saas-mono); color: var(--color-text-muted); }

.db-stats-row      { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.db-stat-card      { padding: 14px; background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-md); text-align: center; }
.db-stat-icon      { font-size: 16px; margin-bottom: 6px; }
.db-stat-value     { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.db-stat-label     { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.db-conn-bar-wrap       { background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-md); padding: 12px 16px; }
.db-conn-bar-header     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.db-conn-bar-label      { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.db-conn-bar-count      { font-size: 13px; font-family: var(--saas-mono); color: var(--color-text-primary); }

.db-conn-bar-fill       { height: 100%; border-radius: 3px; transition: width 0.4s ease; }

.db-section     { display: flex; flex-direction: column; gap: 8px; }
.db-section-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.07em; }
.db-check-list  { display: flex; flex-direction: column; gap: 5px; }
.db-check-row   { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--saas-surface-muted); border-radius: var(--saas-radius-sm); }
.db-check-label { font-size: 13px; color: var(--color-text-secondary); flex: 1; }
.db-check-result { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }

.db-actions-row { display: flex; gap: 8px; }

/* ── Storage Panel ───────────────────────────────────── */
.st-panel { display: flex; flex-direction: column; gap: 16px; }

.st-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--saas-radius-lg);
  border: 1.5px solid;
}
.st-hero-ok   { border-color: var(--saas-success); background: color-mix(in srgb, var(--saas-success) 6%, var(--saas-surface)); }
.st-hero-warn { border-color: var(--saas-warning); background: color-mix(in srgb, var(--saas-warning) 6%, var(--saas-surface)); }
.st-hero-empty { border-color: var(--saas-border); background: var(--saas-surface); }

.st-hero-icon    { font-size: 32px; }
.st-hero-info    { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-hero-eyebrow { font-size: 12px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.st-hero-name    { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.st-hero-region  { font-size: 13px; color: var(--color-text-secondary); }
.st-hero-endpoint { display: flex; align-items: center; gap: 6px; }
.st-hero-endpoint-label { font-size: 11px; color: var(--color-text-muted); }
.st-hero-endpoint-value { font-size: 12px; font-family: var(--saas-mono); color: var(--color-text-secondary); }

.st-hero-right       { margin-left: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.st-hero-status-text { font-size: 14px; font-weight: 600; }
.st-hero-account     { font-size: 11px; font-family: var(--saas-mono); color: var(--color-text-muted); }

.st-stats-row    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.st-stat-card    { padding: 14px; background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-md); text-align: center; }
.st-stat-icon    { font-size: 16px; margin-bottom: 6px; }
.st-stat-value   { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.st-stat-label   { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.st-section       { display: flex; flex-direction: column; gap: 8px; }
.st-section-label  { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.07em; }
.st-check-list    { display: flex; flex-direction: column; gap: 5px; }
.st-check-row     { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--saas-surface-muted); border-radius: var(--saas-radius-sm); }
.st-check-label   { font-size: 13px; color: var(--color-text-secondary); flex: 1; }
.st-check-result  { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.st-actions-row   { display: flex; 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(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-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(--saas-border);
  border-radius: var(--saas-radius-md);

}
.saas-installed-config-value {
  font-family: var(--saas-mono);
  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(--saas-border);
  border-radius: var(--saas-radius-md);
  padding: 14px;
  background: var(--saas-surface);
}
.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(--saas-border);
  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(--saas-mono);
  font-size: 11px;
  line-height: 1.7;

}
.saas-installed-inline-code {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--saas-radius-md);


  font-family: var(--saas-mono);
  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(--saas-surface);
  border: 1.5px solid var(--saas-border);
  border-radius: var(--saas-radius-lg);
  padding: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.saas-plan-card:hover {

  box-shadow: var(--saas-shadow);
}
.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(--saas-radius-lg) 0 var(--saas-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(--saas-content-bg);
}
.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(--saas-border);
}

.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-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-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(--saas-surface));
}

.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-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;
}

@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-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-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(--saas-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(--saas-border);
}
.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(--saas-mono);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--saas-border);


  border-radius: var(--saas-radius);
}

/* 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(--saas-border);
  border-radius: var(--saas-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(--saas-mono);
  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(--saas-border);
}
.saas-sub-link {
  font-size: 12px;

  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.1s;
}


/* ── Page header ─────────────────────────────────────────────── */
.saas-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

/* ── Plan grid ──────────────────────────────────────────────── */
.saas-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.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(--saas-mono);
  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(--saas-surface));
}
.saas-plan-card--test {
  border-color: #1677ff;
  background: linear-gradient(145deg, rgba(22,119,255,.08), var(--color-bg-primary) 42%);
}
.saas-plan-test-tag {
  background: #1677ff;
}
.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(--saas-radius-sm) var(--saas-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(--saas-border); border-bottom: 1px solid var(--saas-border); }
.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(--saas-border);
  border-radius: var(--saas-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(--saas-warning);
  margin-bottom: 12px;
}
.saas-key-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saas-key-code {
  flex: 1;
  font-family: var(--saas-mono);
  font-size: 10px;


  padding: 10px 12px;
  border-radius: var(--saas-radius);
  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(--saas-mono);
  font-size: 10px;

  border: 1px solid var(--saas-border);
  padding: 2px 6px;

  border-radius: var(--saas-radius);
}

/* ── Usage guide ────────────────────────────────────────────── */
.saas-usage-guide {
  padding: 14px 16px;

  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius-md);
  font-size: 12px;

  line-height: 1.7;
  margin-bottom: 24px;
}

.saas-usage-code {
  font-family: var(--saas-mono);
  font-size: 11px;

  padding: 1px 5px;
  margin-left: 4px;
  border-radius: var(--saas-radius);
}

/* ── Code block (legacy compat) ────────────────────────────── */
.saas-code-block {


  padding: 12px;
  font-family: var(--saas-mono);
  font-size: 11px;
  border-radius: var(--saas-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(--saas-border);
  }
  .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(--saas-content-bg) 88%, transparent);
  border-bottom: 1px solid var(--saas-border);
  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;
}
.saas-shell-header-actions { gap: 6px; }
.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(--saas-surface);
  border-color: var(--saas-border);
}
.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: width var(--duration-normal) var(--saas-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-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(--saas-accent);
  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(--saas-sidebar-border);
}
.saas-sidebar-template strong {
  color: var(--saas-sidebar-text-2);
  font-weight: 600;
}
.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(--p-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(--saas-sidebar-hover);
  color: var(--saas-sidebar-text-1);
}
.saas-nav-parent-button.active {
  background: var(--saas-sidebar-active);
  color: var(--saas-sidebar-text-1);
}
.saas-nav-expand-button {
  width: 24px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: -30px;
  color: var(--saas-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(--saas-ease); }
.saas-nav-children {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--saas-sidebar-border);
}
.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(--saas-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(--saas-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(--saas-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(--saas-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(--saas-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(--saas-content-bg);
  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; }
.saas-runtime-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.saas-runtime-page-header:has(.saas-runtime-page-title) {
  margin-bottom: 16px;
}
.saas-runtime-page-header:has(.saas-runtime-page-title):not(:has(.saas-page-header-actions)) {
  display: none;
}
.saas-runtime-page-header:has(.saas-runtime-page-title):has(.saas-page-header-actions) .saas-runtime-page-header-copy {
  display: none;
}
.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(--saas-border);
  border-radius: var(--p-radius-lg);
  background: color-mix(in srgb, var(--saas-surface) 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-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(--saas-surface);
  border: 1px solid var(--saas-border);
  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(--saas-border);
}
.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(--saas-border);
  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;
}
.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(--saas-content-bg);
  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(--p-red-400); 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(--saas-border);
  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(--saas-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--saas-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(--saas-surface);
  border: 1px solid var(--saas-border);
  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(--saas-border); }
.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(--saas-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: vertical;
  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(--saas-surface);
}
.menu-settings-preview-header { padding-bottom: 16px; border-bottom: 1px solid var(--saas-border); }
.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(--saas-border); 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(--saas-border); 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(--saas-border); }
.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(--saas-border); }
.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(--saas-border-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-site-create-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.saas-site-create-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 460px;
}
.saas-site-create-controls .saas-input { flex: 1; min-width: 0; }
.saas-site-grid { display: grid; gap: 10px; }
.saas-site-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}
.saas-site-card.active { border-color: var(--color-brand-border); }
.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-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-status {
  color: var(--color-success-strong);
  font-size: 11px;
  white-space: nowrap;
}

@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-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-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-site-create-form,
  .saas-site-card { grid-template-columns: 1fr; display: grid; align-items: stretch; }
  .saas-site-create-controls { max-width: none; flex-basis: auto; }
  .saas-site-card-icon { width: 30px; height: 30px; }
}

/* ── 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(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-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(--saas-border);
  background: var(--saas-surface);
  padding: 9px 12px 9px 34px;
  font-size: 13px;

  border-radius: var(--saas-radius);
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
  font-family: var(--saas-font);
}
.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(--saas-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(--saas-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(--saas-border);
}
.saas-checkbox-input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-brand);
}
.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(--saas-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(--saas-border);
  border-radius: var(--p-radius-lg);
  background: var(--saas-surface);
  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(--p-radius-md);
}
.saas-column-settings-item:hover {
  background: var(--saas-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-schema-table-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
}
.saas-crud-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.saas-crud-page-size {
  width: 96px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 11px;
}
.saas-install-hint {
  padding: 10px 14px;

  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  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(--saas-border);
  border-radius: 20px;
  background: var(--saas-surface);
  box-shadow: 0 26px 80px rgba(0,0,0,0.24);
  animation: paymentDialogIn 0.3s var(--saas-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(--saas-border);
  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(--saas-border);
  border-bottom: 1px solid var(--saas-border);
}

.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(--saas-border);
  border-radius: 12px;
  background: var(--saas-surface);

  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(--saas-border); 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(--saas-border);
  border-radius: 16px;
  background: var(--saas-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(--saas-surface);

  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(--saas-border); border-radius: 12px; background: var(--saas-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(--saas-radius);
  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(--saas-font);
}
.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(--saas-radius) var(--saas-radius) 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(--saas-border);
  border-radius: var(--saas-radius);
}

/* ── Bundle Page ──────────────────────────────────────────────────────────── */

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

.saas-bundle-card {
  background: var(--saas-surface);
  border: 1.5px solid var(--saas-border);
  border-radius: var(--saas-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(--saas-shadow);
}

.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(--saas-border);
  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(--p-gray-0);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0 var(--saas-radius-lg) 0 var(--saas-radius-md);
  letter-spacing: 0.05em;
}

.saas-bundle-installed-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--color-success);
  color: var(--p-gray-0);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--saas-radius-md) 0 var(--saas-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(--saas-border);
}

/* ── 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(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: 999px;
  cursor: pointer;

  transition: all 0.12s;
  font-family: var(--saas-font);
}
.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(--saas-border);
  border-radius: var(--saas-radius-md);
  background: var(--saas-surface);
  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(--saas-mono);

  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(--saas-border);
  border-radius: var(--saas-radius);
  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(--saas-radius-lg);
  border: 1.5px solid;
}
.gen-hero-ok   { border-color: var(--saas-success); background: color-mix(in srgb, var(--saas-success) 6%, var(--saas-surface)); }
.gen-hero-warn { border-color: var(--saas-warning); background: color-mix(in srgb, var(--saas-warning) 6%, var(--saas-surface)); }
.gen-hero-empty { border-color: var(--saas-border); background: var(--saas-surface); }

.gen-hero-icon  { font-size: 40px; flex-shrink: 0; }
.gen-hero-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gen-hero-eyebrow { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gen-hero-name   { font-size: 22px; font-weight: 700; color: var(--color-text-primary); }
.gen-hero-desc   { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.gen-hero-meta   { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.gen-hero-status-row { display: flex; align-items: center; gap: 6px; }
.gen-hero-status-label { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.gen-hero-site   { font-size: 11px; font-family: var(--saas-mono); color: var(--color-text-muted); }
.gen-hero-date   { font-size: 11px; color: var(--color-text-muted); }

/* Stats row */
.gen-stats-row  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gen-stat-card  { padding: 16px 12px; background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-md); text-align: center; }
.gen-stat-icon  { font-size: 18px; margin-bottom: 8px; }
.gen-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.gen-stat-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.gen-stat-sub   { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }

/* Layout */
.gen-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Card */
.gen-card   { background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.gen-card-muted { background: var(--saas-surface-muted); }
.gen-card-header { display: flex; align-items: center; justify-content: space-between; }
.gen-card-title  { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.gen-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--saas-border); }

/* Info list */
.gen-info-list { display: flex; flex-direction: column; gap: 0; }
.gen-info-row   { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--saas-border); gap: 12px; }
.gen-info-row:last-child { border-bottom: none; }
.gen-info-label { font-size: 12px; color: var(--color-text-muted); min-width: 90px; flex-shrink: 0; }
.gen-info-value { font-size: 13px; color: var(--color-text-primary); flex: 1; word-break: break-all; }
.gen-info-mono  { font-family: var(--saas-mono); font-size: 12px; }
.gen-info-secret { color: var(--color-text-muted); font-size: 12px; }
.gen-info-more   { font-size: 12px; color: var(--color-text-muted); text-align: center; padding: 8px; }

/* Empty state */
.gen-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--color-text-muted); font-size: 13px; }
.gen-empty-icon { font-size: 28px; }

/* Health summary */
.gen-health-summary { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.gen-section-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* Check list */
.gen-check-list { display: flex; flex-direction: column; gap: 5px; }
.gen-check-row  { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--saas-surface); border-radius: var(--saas-radius-sm); }
.gen-check-label { font-size: 13px; color: var(--color-text-secondary); flex: 1; }
.gen-check-note  { font-size: 11px; color: var(--color-text-muted); }

/* AI hint */
.gen-ai-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--saas-accent) 8%, var(--saas-surface)); border: 1px solid color-mix(in srgb, var(--saas-accent) 25%, transparent); border-radius: var(--saas-radius-md); font-size: 12px; color: var(--color-text-secondary); }
.gen-ai-hint-icon { flex-shrink: 0; }

/* ── 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(--saas-radius-lg); border: 1.5px solid;
}
.dp-hero-ok   { border-color: var(--saas-success); background: color-mix(in srgb, var(--saas-success) 6%, var(--saas-surface)); }
.dp-hero-warn { border-color: var(--saas-warning); background: color-mix(in srgb, var(--saas-warning) 6%, var(--saas-surface)); }
.dp-hero-empty { border-color: var(--saas-border); background: var(--saas-surface); }
.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(--saas-mono); 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(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-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(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dp-card-muted { background: var(--saas-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(--saas-border); }

.dp-info-list { display: flex; flex-direction: column; }
.dp-info-row  { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--saas-border); 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(--saas-mono); 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(--saas-surface); border-radius: var(--saas-radius-sm); }
.dp-check-label { font-size: 13px; color: var(--color-text-secondary); flex: 1; }

.dp-deployments { background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-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(--saas-radius-sm); transition: background 0.15s; cursor: default; }
.dp-deploy-row:hover { background: var(--saas-surface-hover); }
.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(--saas-mono); color: var(--color-text-muted); background: var(--saas-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(--saas-radius-lg); border: 1.5px solid;
}
.ai-hero-ok   { border-color: var(--saas-success); background: color-mix(in srgb, var(--saas-success) 6%, var(--saas-surface)); }
.ai-hero-warn { border-color: var(--saas-warning); background: color-mix(in srgb, var(--saas-warning) 6%, var(--saas-surface)); }
.ai-hero-empty { border-color: var(--saas-border); background: var(--saas-surface); }
.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(--saas-mono); color: var(--saas-accent); background: color-mix(in srgb, var(--saas-accent) 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(--saas-mono); 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(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-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-stat-note  { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }

.ai-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ai-card    { background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ai-card-muted { background: var(--saas-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(--saas-border); }

.ai-info-list { display: flex; flex-direction: column; }
.ai-info-row  { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--saas-border); 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(--saas-mono); font-size: 12px; }
.ai-info-secret { font-size: 12px; color: var(--color-text-muted); }

.ai-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--color-text-muted); font-size: 13px; }
.ai-empty-icon { font-size: 28px; }

.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(--saas-surface); border-radius: var(--saas-radius-sm); }
.ai-check-label { font-size: 13px; color: var(--color-text-secondary); flex: 1; }

/* Test chat */
.ai-test-card { background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-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: vertical; font-family: var(--saas-body-font); 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(--saas-mono); color: var(--color-text-muted); padding: 3px 8px; background: var(--saas-surface-muted); border-radius: 4px; }
.ai-test-result { margin-top: 10px; padding: 12px; background: var(--saas-surface-muted); border-radius: var(--saas-radius-md); font-size: 13px; line-height: 1.6; white-space: pre-wrap; max-height: 200px; overflow: auto; }
.ai-test-error { color: var(--saas-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(--saas-radius-lg); border: 1.5px solid;
}
.sp-hero-ok   { border-color: var(--saas-success); background: color-mix(in srgb, var(--saas-success) 6%, var(--saas-surface)); }
.sp-hero-warn { border-color: var(--saas-warning); background: color-mix(in srgb, var(--saas-warning) 6%, var(--saas-surface)); }
.sp-hero-empty { border-color: var(--saas-border); background: var(--saas-surface); }
.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(--saas-mono); color: var(--saas-accent); background: color-mix(in srgb, var(--saas-accent) 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(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-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(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.sp-card-muted { background: var(--saas-surface-muted); }
.sp-footer  { background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-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(--saas-border); }
.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(--saas-border); 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(--saas-mono); 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(--saas-surface); border-radius: var(--saas-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(--saas-success); }
.status-dot-warn    { background: var(--saas-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(--saas-danger) 8%, var(--saas-surface)); border: 1px solid color-mix(in srgb, var(--saas-danger) 25%, transparent); border-radius: var(--saas-radius-md); font-size: 12px; color: var(--saas-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(--saas-surface-muted); border-radius: var(--saas-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(--saas-warning) 15%, transparent); border-radius: 2px; padding: 0 2px; }
.alg-hit-id      { font-size: 11px; font-family: var(--saas-mono); 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-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;


  border-radius: var(--saas-radius-md);
  cursor: pointer;
  font-size: 13px;

  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  max-width: 200px;
}
.site-switcher-trigger:hover {


}
.site-switcher-icon { font-size: 14px; }
.site-switcher-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-switcher-chevron {
  font-size: 10px;

  line-height: 1;
}

.site-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  min-width: 240px;
  background: var(--saas-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-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(--saas-border);
}

.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(--saas-font);
  transition: background 0.1s;
}
.site-switcher-item:hover {
  background: var(--saas-surface-hover);
}
.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(--saas-primary);
}

.site-switcher-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-switcher-item-check {
  font-size: 11px;
  color: var(--saas-primary);
}

.site-switcher-edit-input {
  width: 100%;
  padding: 6px 14px;
  font-size: 13px;
  border: none;
  border-bottom: 2px solid var(--saas-primary);
  outline: none;
  background: var(--saas-surface);
  color: var(--color-text-primary);
  font-family: var(--saas-font);
}
.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(--saas-border);
  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(--saas-radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--saas-font);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.site-switcher-create-btn:hover {
  background: var(--saas-primary-lightest);
  border-color: var(--saas-primary);
  color: var(--saas-primary);
}

.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(--saas-surface);
  border: 1px solid var(--saas-border);
  color: var(--color-text-primary);
  font-family: var(--saas-font);
  border-radius: var(--saas-radius-sm);
  outline: none;
  min-width: 0;
}
.site-switcher-create-input:focus {
  border-color: var(--saas-primary);
}

.site-switcher-create-confirm {
  padding: 4px 8px;
  background: var(--saas-primary);
  color: var(--color-brand-text);
  border: none;
  border-radius: var(--saas-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(--saas-radius-sm);
  cursor: pointer;
  font-size: 12px;
}
.site-switcher-create-cancel:hover {
  background: var(--saas-surface-hover);
  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(--saas-sidebar-active);
  border: 1px solid var(--saas-sidebar-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--saas-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(--saas-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(--saas-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(--saas-border); background: var(--color-bg-elevated); border-radius: var(--saas-radius-lg) var(--saas-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(--saas-danger); background: color-mix(in srgb, var(--saas-danger) 8%, var(--saas-surface)); border-radius: var(--saas-radius-sm); }
.ai-chat-input-row { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--saas-border); background: var(--color-bg-elevated); border-radius: 0 0 var(--saas-radius-lg) var(--saas-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(--saas-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(--saas-primary); color: var(--color-text-inverse); }
.ai-usage-tag      { font-size: 11px; font-family: var(--saas-mono); 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(--saas-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-sub   { font-size: 12px; color: var(--color-text-muted); }
.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-list-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--saas-border); background: var(--color-bg-elevated); border-radius: var(--saas-radius-lg) var(--saas-radius-lg) 0 0; }
.deploy-list-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.deploy-list-empty { padding: 20px 14px; text-align: center; color: var(--color-text-muted); font-size: 13px; }
.deploy-item       { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--saas-border); transition: background 0.1s; }
.deploy-item:last-child { border-bottom: none; }
.deploy-item:hover { background: var(--color-bg-elevated); }
.deploy-item-left  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deploy-item-name  { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.deploy-item-meta  { font-size: 11px; color: var(--color-text-muted); }
.deploy-item-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.deploy-item-status { font-size: 11px; color: var(--color-text-muted); }

/* ── Sentry Stats ───────────────────────────────────────────────────────────── */
.sentry-stat-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--color-bg-elevated); border-radius: var(--saas-radius-md); text-align: center; }
.sentry-stat-num  { font-size: 22px; font-weight: 700; color: var(--color-text-primary); }
.sentry-stat-label { font-size: 11px; color: var(--color-text-muted); }

/* ═════════════════════════════════════════════════════════════════════════════
   ADMIN PAGE — Platform Console 专用样式
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Admin Layout ────────────────────────────────────────────────────────────── */
.admin-root {
  min-height: 100vh;
  background: var(--color-bg-secondary);
}
.admin-topbar {
  height: 56px;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.admin-topbar-left { display: flex; align-items: center; gap: 14px; }
.admin-topbar-right { display: flex; align-items: center; gap: 10px; }
.admin-topbar-brand {
  display: flex; align-items: center; gap: 10px;
}
.admin-logo-mark {
  width: 32px; height: 32px;

  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--color-text-inverse);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.admin-brand-text { display: flex; flex-direction: column; gap: 1px; }
.admin-brand-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; }
.admin-brand-sub { font-size: 10px; color: var(--color-text-secondary); letter-spacing: 0.08em; text-transform: uppercase; }

.admin-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text-muted); }
.admin-breadcrumb-sep { color: var(--color-text-muted); }
.admin-breadcrumb-item { color: var(--color-text-secondary); }
.admin-breadcrumb-item.active { color: var(--color-text-primary); font-weight: 500; }

.admin-global-stats { display: flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--color-bg-secondary); border-radius: 20px; }
.admin-global-stat { font-size: 11px; color: var(--color-text-secondary); }
.admin-global-stat strong { color: var(--color-text-primary); font-weight: 600; }

.admin-topbar-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  color: var(--color-text-secondary); background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default); border-radius: 6px;
  cursor: pointer; text-decoration: none;
  transition: all 0.1s;
}
.admin-topbar-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); background: var(--color-bg-secondary); }
.admin-topbar-btn .icon { font-size: 14px; }

/* ── Admin Page Container ───────────────────────────────────────────────────── */
.admin-page {
  padding: 0 24px 32px;
}
.admin-page-header {
  padding: 20px 0 16px;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.admin-page-title { font-size: 22px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.03em; }
.admin-page-desc { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.admin-page-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.admin-live-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: var(--color-success);
  background: var(--color-success-subtle); border: 1px solid var(--p-green-100); border-radius: 20px;
  padding: 2px 8px;
}
.admin-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-green-500);
  animation: adminPulse 2s ease-in-out infinite;
}
@keyframes adminPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Admin Tabs ─────────────────────────────────────────────────────────────── */
.admin-tabs {
  display: flex; gap: 2px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow-x: auto;
}
.admin-tab-item {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 500; color: var(--color-text-secondary);
  border-radius: 7px; cursor: pointer; border: none; background: transparent;
  transition: all 0.15s; white-space: nowrap; text-decoration: none;
}
.admin-tab-item:hover { color: var(--color-text-primary); background: var(--color-bg-secondary); }
.admin-tab-item.active {
  color: var(--color-text-primary); background: var(--color-bg-inverse);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.admin-tab-item.active .tab-icon { filter: brightness(0) invert(1); }
.admin-tab-icon { font-size: 14px; }

/* ── Admin Stat Grid ────────────────────────────────────────────────────────── */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-box {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}
.admin-stat-box:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.admin-stat-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-text-primary) 0%, var(--color-text-secondary) 100%);
  border-radius: 12px 12px 0 0;
}
.admin-stat-box.green::before { background: linear-gradient(90deg, var(--p-green-500), var(--p-green-100)); }
.admin-stat-box.blue::before { background: linear-gradient(90deg, var(--color-brand), #93c5fd); }
.admin-stat-box.amber::before { background: linear-gradient(90deg, var(--p-amber-400), var(--p-amber-100)); }
.admin-stat-box.purple::before { background: linear-gradient(90deg, var(--color-purple), var(--p-purple-300)); }
.admin-stat-box.red::before { background: linear-gradient(90deg, var(--p-red-400), var(--p-red-100)); }
.admin-stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-stat-label { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
.admin-stat-icon { font-size: 18px; }
.admin-stat-value { font-size: 28px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; }
.admin-stat-footer { display: flex; align-items: center; gap: 6px; }
.admin-stat-trend {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--color-success);
}
.admin-stat-trend.down { color: var(--color-danger); }
.admin-stat-trend-icon { font-size: 12px; }
.admin-stat-compare { font-size: 11px; color: var(--color-text-muted); }
.admin-stat-sparkline { margin-top: 10px; }

/* ── Admin Card ─────────────────────────────────────────────────────────────── */
.admin-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.admin-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-bg-secondary);
}
.admin-card-title {
  font-size: 13px; font-weight: 600; color: var(--color-text-primary);
  display: flex; align-items: center; gap: 7px;
}
.admin-card-subtitle { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.admin-card-body { padding: 16px 18px; }
.admin-card-actions { display: flex; align-items: center; gap: 6px; }
.admin-card-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--color-bg-secondary);
}
.admin-card-tab {
  padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--color-text-muted);
  border-bottom: 2px solid transparent; cursor: pointer; background: transparent; border-top: none; border-left: none; border-right: none;
  transition: color 0.15s;
}
.admin-card-tab:hover { color: var(--color-text-secondary); }
.admin-card-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); }

/* ── Admin Table ───────────────────────────────────────────────────────────── */
.admin-table-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-muted);
  flex-wrap: wrap;
}
.admin-table-toolbar .saas-input { width: 220px; flex-shrink: 0; }
.admin-table-filter-select {
  padding: 6px 28px 6px 10px;
  font-size: 12px; color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default); border-radius: 6px;
  background: var(--color-bg-primary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  cursor: pointer;
}
.admin-table-filter-select:focus { outline: none; border-color: var(--color-text-primary); }
.admin-table-search {
  flex: 1; min-width: 200px;
  padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--color-border-default); border-radius: 6px;
  background: var(--color-bg-primary); color: var(--color-text-primary); outline: none;
  transition: border-color 0.1s;
}
.admin-table-search:focus { border-color: var(--color-text-primary); box-shadow: 0 0 0 2px rgba(24,24,27,0.06); }
.admin-table-filter-count {
  display: flex; align-items: center; gap: 4px; padding: 4px 8px;
  font-size: 11px; color: var(--color-text-secondary); background: var(--color-bg-secondary); border-radius: 4px;
}
.admin-table-search-wrap { position: relative; flex: 1; min-width: 200px; }
.admin-table-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--color-text-muted); pointer-events: none;
}
.admin-table-search-wrap .admin-table-search { padding-left: 32px; width: 100%; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 0 16px 10px;
  text-align: left; border-bottom: 1px solid var(--color-border-muted);
  white-space: nowrap;
}
.admin-table th.sortable { cursor: pointer; }
.admin-table th.sortable:hover { color: var(--color-text-secondary); }
.admin-table td {
  padding: 13px 16px; font-size: 13px; color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-bg-secondary); vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr { transition: background 0.1s; }
.admin-table tbody tr:hover td { background: var(--color-bg-secondary); }
.admin-table tbody tr.clickable { cursor: pointer; }
.admin-table tbody tr.selected td { background: var(--color-bg-secondary); }
.admin-table .col-right { text-align: right; }
.admin-table .col-center { text-align: center; }
.admin-table-empty { text-align: center; padding: 40px 20px; color: var(--color-text-muted); font-size: 13px; }

/* ── Admin Pagination ───────────────────────────────────────────────────────── */
.admin-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border-muted);
  background: var(--color-bg-secondary);
}
.admin-pagination-info { font-size: 12px; color: var(--color-text-secondary); }
.admin-pagination-controls { display: flex; align-items: center; gap: 4px; }
.admin-page-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--color-text-secondary); background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default); border-radius: 5px; cursor: pointer;
  transition: all 0.1s; padding: 0;
}
.admin-page-btn:hover:not(:disabled) { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.admin-page-btn.active { background: var(--color-text-primary); color: var(--color-bg-primary); border-color: var(--color-text-primary); }
.admin-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.admin-page-btn.nav { font-size: 14px; }

/* ── Admin Badges ──────────────────────────────────────────────────────────── */
.admin-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11px; font-weight: 500;
  border-radius: 20px; border: 1px solid;
}
.admin-badge-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.admin-badge.green { color: var(--p-green-600); background: var(--color-success-subtle); border-color: var(--p-green-100); }
.admin-badge.green .admin-badge-dot { background: var(--p-green-500); }
.admin-badge.red { color: var(--color-danger-strong); background: var(--color-danger-subtle); border-color: var(--p-red-100); }
.admin-badge.red .admin-badge-dot { background: var(--p-red-400); }
.admin-badge.amber { color: var(--p-orange-600); background: var(--color-warning-subtle); border-color: var(--p-amber-100); }
.admin-badge.amber .admin-badge-dot { background: var(--p-amber-400); }
.admin-badge.blue { color: var(--color-info); background: var(--color-info-subtle); border-color: var(--p-blue-100); }
.admin-badge.blue .admin-badge-dot { background: var(--color-brand); }
.admin-badge.gray { color: var(--color-text-secondary); background: var(--color-bg-secondary); border-color: var(--color-border-default); }
.admin-badge.gray .admin-badge-dot { background: var(--color-text-muted); }
.admin-badge.purple { color: var(--color-purple-strong); background: var(--color-purple-subtle); border-color: var(--p-purple-200); }
.admin-badge.purple .admin-badge-dot { background: var(--color-purple); }
.admin-plan-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 11px; font-weight: 600; border-radius: 20px; }
.admin-plan-badge.free { background: var(--color-success-subtle); color: var(--p-green-600); border: 1px solid var(--p-green-100); }
.admin-plan-badge.starter { background: var(--color-info-subtle); color: var(--color-info); border: 1px solid var(--p-blue-100); }
.admin-plan-badge.pro { background: var(--color-purple-subtle); color: var(--color-purple-strong); border: 1px solid var(--p-purple-200); }
.admin-plan-badge.enterprise { background: var(--color-warning-subtle); color: var(--p-orange-600); border: 1px solid var(--p-amber-100); }

/* ── Admin SVG Line Chart ───────────────────────────────────────────────────── */
.admin-chart-wrap { padding: 16px 18px; }
.admin-chart-legend { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.admin-chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-secondary); }
.admin-chart-legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.admin-chart-controls { display: flex; gap: 4px; }
.admin-chart-range-btn {
  padding: 3px 10px; font-size: 11px; font-weight: 500;
  color: var(--color-text-secondary); background: var(--color-bg-secondary); border: 1px solid transparent;
  border-radius: 4px; cursor: pointer; transition: all 0.1s;
}
.admin-chart-range-btn:hover { color: var(--color-text-primary); background: var(--color-border-default); }
.admin-chart-range-btn.active { background: var(--color-text-primary); color: var(--color-bg-primary); }

/* ── Admin Traffic Bar ──────────────────────────────────────────────────────── */
.admin-traffic-bar-wrap { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.admin-traffic-bar-row { display: flex; align-items: center; gap: 8px; }
.admin-traffic-bar-label { font-size: 10px; color: var(--color-text-muted); width: 32px; text-align: right; flex-shrink: 0; }
.admin-traffic-bar-track { flex: 1; height: 4px; background: var(--color-bg-secondary); border-radius: 999px; overflow: hidden; }
.admin-traffic-bar-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.admin-traffic-bar-value { font-size: 10px; color: var(--color-text-secondary); width: 36px; flex-shrink: 0; }

/* ── Admin Activity Feed ────────────────────────────────────────────────────── */
.admin-activity-list { display: flex; flex-direction: column; }
.admin-activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 18px; border-bottom: 1px solid var(--color-bg-secondary);
  transition: background 0.1s;
}
.admin-activity-item:last-child { border-bottom: none; }
.admin-activity-item:hover { background: var(--color-bg-secondary); }
.admin-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.admin-activity-content { flex: 1; min-width: 0; }
.admin-activity-text { font-size: 13px; color: var(--color-text-primary); line-height: 1.4; }
.admin-activity-text strong { font-weight: 600; }
.admin-activity-time { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.admin-activity-tag { font-size: 11px; font-family: var(--saas-mono); color: var(--color-text-secondary); }

/* ── Admin User Drawer ──────────────────────────────────────────────────────── */
.admin-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 100; backdrop-filter: blur(2px);
  animation: adminFadeIn 0.2s ease;
}
@keyframes adminFadeIn { from { opacity: 0; } to { opacity: 1; } }
.admin-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px;
  background: var(--color-bg-primary); border-left: 1px solid var(--color-border-default);
  z-index: 101;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.12);
  animation: adminSlideIn 0.25s var(--saas-ease);
}
@keyframes adminSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.admin-drawer-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-bg-secondary);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-drawer-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.admin-drawer-close { font-size: 18px; cursor: pointer; color: var(--color-text-muted); background: none; border: none; padding: 4px; border-radius: 4px; }
.admin-drawer-close:hover { color: var(--color-text-primary); background: var(--color-bg-secondary); }
.admin-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.admin-drawer-section { margin-bottom: 22px; }
.admin-drawer-section-title { font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.admin-drawer-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-bg-secondary); }
.admin-drawer-row:last-child { border-bottom: none; }
.admin-drawer-field { font-size: 12px; color: var(--color-text-secondary); }
.admin-drawer-value { font-size: 12px; font-weight: 500; color: var(--color-text-primary); }
.admin-drawer-footer { padding: 14px 20px; border-top: 1px solid var(--color-bg-secondary); display: flex; gap: 8px; }
.admin-user-avatar-large {
  width: 56px; height: 56px; border-radius: 12px;

  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--color-text-inverse);
}

/* ── Admin Invite Code Banner ───────────────────────────────────────────────── */
.admin-invite-banner {

  border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
  color: var(--color-text-inverse); display: flex; align-items: center; justify-content: space-between;
}
.admin-invite-banner-text { font-size: 13px; color: rgba(255,255,255,0.7); }
.admin-invite-code-display {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.admin-invite-code-value {
  font-size: 18px; font-weight: 700; font-family: var(--saas-mono);
  color: var(--color-text-inverse); letter-spacing: 0.05em;
  background: rgba(255,255,255,0.12); padding: 6px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ── Admin Mini Chart (SVG sparkline) ─────────────────────────────────────── */
.admin-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
.admin-sparkline-bar {
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--color-text-primary) 0%, var(--color-text-secondary) 100%);
  opacity: 0.6;
  transition: opacity 0.15s;
}
.admin-sparkline-bar:hover { opacity: 1; }
.admin-sparkline-bar.active { opacity: 1; }

/* ── Admin Two Column Grid ──────────────────────────────────────────────────── */
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── Admin Empty State ──────────────────────────────────────────────────────── */
.admin-empty-state { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center; }
.admin-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.admin-empty-title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }
.admin-empty-desc { font-size: 12px; color: var(--color-text-muted); }

/* ── Admin Alert Banner ─────────────────────────────────────────────────────── */
.admin-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
  font-size: 13px;
}
.admin-alert.warn { background: var(--color-warning-subtle); color: var(--p-orange-600); border: 1px solid var(--p-amber-100); }
.admin-alert.error { background: var(--color-danger-subtle); color: var(--color-danger); border: 1px solid var(--p-red-100); }
.admin-alert.info { background: var(--color-info-subtle); color: var(--color-info); border: 1px solid var(--p-blue-100); }
.admin-checkbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-checkbox-row input { flex-shrink: 0; }

/* ── Admin Stat Card (using existing admin-stat-box but adding compact variant) ── */
.admin-stat-card {
  background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: 12px;
  padding: 18px 20px; position: relative; overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s; cursor: default;
}
.admin-stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.admin-stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-text-primary) 0%, var(--color-text-secondary) 100%);
  border-radius: 12px 12px 0 0;
}
.admin-stat-card.blue::before { background: linear-gradient(90deg, var(--color-brand), #93c5fd); }
.admin-stat-card.green::before { background: linear-gradient(90deg, var(--p-green-500), var(--p-green-100)); }
.admin-stat-card.amber::before { background: linear-gradient(90deg, var(--p-amber-400), var(--p-amber-100)); }
.admin-stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-stat-card-label { font-size: 10px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
.admin-stat-card-value { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; }
.admin-stat-card-footer { display: flex; align-items: center; gap: 6px; }
.admin-stat-trend { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--color-success); }
.admin-stat-trend.down { color: var(--color-danger); }
.admin-stat-compare { font-size: 11px; color: var(--color-text-muted); }

/* Mini stat inside card */
.admin-mini-stat { background: var(--color-bg-secondary); border-radius: 8px; padding: 10px 12px; }
.admin-mini-stat-label { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.admin-mini-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.03em; }

/* Quick nav card */
.admin-quick-nav-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: var(--color-bg-primary); border: 1px solid var(--color-border-default); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.admin-quick-nav-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: var(--color-text-muted); transform: translateY(-1px); }
.admin-quick-nav-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.admin-quick-nav-desc { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ═════════════════════════════════════════════════════════════════════════════
   ADMIN SIDEBAR — 平台超级管理控制台侧边栏
   ═════════════════════════════════════════════════════════════════════════════ */

.admin-layout-root {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg-secondary);
}

/* ── Admin Sidebar ─────────────────────────────────────────────────────────── */
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--p-gray-950);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Logo */
.admin-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-logo-mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--p-gray-900), var(--p-gray-800));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--color-text-inverse);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.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); text-transform: uppercase;
  letter-spacing: 0.12em; margin-top: 2px;
}

/* Nav */
.admin-sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
}
.admin-nav-group {
  margin-bottom: 6px;
}
.admin-nav-group-label {
  display: flex;
  align-items: center;
  padding: 6px 10px 3px;
  font-size: 10px; font-weight: 600;
  color: var(--color-sidebar-text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 13px; font-weight: 400;
  color: var(--color-sidebar-text-2);
  border-radius: 7px;
  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;
}
.admin-nav-link:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-sidebar-text-1);
}
.admin-nav-link.active {
  background: var(--color-sidebar-active);
  color: var(--color-sidebar-text-1);
  font-weight: 500;
  border-color: rgba(255,255,255,0.08);
}
.admin-nav-link .admin-nav-icon { font-size: 15px; }

/* Sidebar Footer */
.admin-sidebar-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.admin-user-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.admin-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--p-gray-900), var(--p-gray-800));
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--color-sidebar-text-2);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name {
  font-size: 12px; font-weight: 500; color: var(--color-sidebar-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-user-role {
  font-size: 9px; color: var(--color-sidebar-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Admin Main Content ───────────────────────────────────────────────────── */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Admin Page Header ────────────────────────────────────────────────────── */
.admin-page-header {
  padding: 20px 28px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--color-bg-secondary);
  position: sticky;
  top: 0;
  z-index: 30;
}
.admin-page-header-inner {
  padding: 20px 28px 16px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-page-title {
  font-size: 20px; font-weight: 700; color: var(--color-text-primary);
  letter-spacing: -0.03em;
}
.admin-page-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-text-muted); margin-top: 4px;
}
.admin-page-breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.admin-page-breadcrumb a:hover { color: var(--color-text-primary); }
.admin-page-breadcrumb-sep { color: var(--color-text-muted); }
.admin-page-actions { display: flex; align-items: center; gap: 8px; }
.admin-page-desc { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }

/* Live badge in header */
.admin-live-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: var(--color-success);
  background: var(--color-success-subtle); border: 1px solid var(--p-green-100); border-radius: 20px;
  padding: 3px 10px; margin-top: 8px;
}
.admin-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-green-500);
  animation: adminPulse 2s ease-in-out infinite;
}
@keyframes adminPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Admin Page Body ───────────────────────────────────────────────────────── */
.admin-page-body {
  padding: 24px 28px 32px;
  flex: 1;
}
.admin-page-body-nopad {
  flex: 1;
}

/* ── Admin Section Header ────────────────────────────────────────────────── */
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.admin-section-title {
  font-size: 15px; font-weight: 600; color: var(--color-text-primary);
}
.admin-section-subtitle {
  font-size: 12px; color: var(--color-text-muted); margin-top: 2px;
}

/* ── Admin Loading Skeleton ─────────────────────────────────────────────────── */
.admin-skeleton-bar {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border-default) 50%, var(--color-bg-secondary) 75%);
  background-size: 400px 100%;
  animation: saasShimmer 1.5s ease-in-out infinite;
  margin-bottom: 8px;
}
.admin-skeleton-bar:last-child { margin-bottom: 0; width: 70%; }

/* ── Admin Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2 { grid-template-columns: 1fr; }
  .admin-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .admin-stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-page { padding: 0 12px 24px; }
  .admin-drawer { width: 100%; }
  .admin-grid-3 { grid-template-columns: 1fr; }
}

/* 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-runtime-layout {
  display: block;
  width: min(1440px, 100%);
  margin: 0 auto;
  align-items: start;
}
.ruoyi-runtime-content {
  min-width: 0;
}
.ruoyi-breadcrumb,
.ruoyi-page-header,
.ruoyi-resource-nav,
.ruoyi-search-card,
.ruoyi-table-card,
.ruoyi-alert {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}
.ruoyi-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.ruoyi-breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.ruoyi-breadcrumb a:hover { color: var(--color-brand); }
.ruoyi-breadcrumb strong { color: var(--color-text-primary); font-weight: 500; }
.ruoyi-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.ruoyi-page-header h1 {
  margin: 0 0 6px;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.ruoyi-page-header p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.ruoyi-page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ruoyi-page-header-actions .saas-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ruoyi-version {
  padding: 4px 9px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-code);
  font-size: 10px;
}
.ruoyi-resource-nav {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border-default);
}
.ruoyi-resource-nav button {
  padding: 10px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
}
.ruoyi-resource-nav button:hover { color: var(--color-text-primary); }
.ruoyi-resource-nav button.active {
  border-bottom-color: var(--color-brand);
  color: var(--color-brand);
  font-weight: 600;
}
.ruoyi-alert {
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--p-red-200);
  border-radius: var(--radius-sm);
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
  font-size: 12px;
}
.ruoyi-search-card,
.ruoyi-table-card {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}
.ruoyi-search-card { margin-bottom: 14px; padding: 16px; }
.ruoyi-search-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.ruoyi-search-field { display: grid; width: min(300px, 100%); gap: 6px; }
.ruoyi-query-field { width: min(220px, 100%); }
.ruoyi-query-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.ruoyi-search-field span,
.ruoyi-dialog-field > span { color: var(--color-text-secondary); font-size: 12px; }
.ruoyi-form-input {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.ruoyi-search-actions,
.ruoyi-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.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-toolbar-title { display: flex; align-items: baseline; gap: 10px; }
.ruoyi-toolbar-title strong { color: var(--color-text-primary); font-size: 14px; font-weight: 600; }
.ruoyi-toolbar-title span,
.ruoyi-table-footer { color: var(--color-text-muted); font-size: 11px; }
.ruoyi-table-wrap { overflow-x: auto; }
.ruoyi-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 12px; }
.ruoyi-table th {
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.ruoyi-table td {
  height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border-muted);
  color: var(--color-text-secondary);
  vertical-align: middle;
}
.ruoyi-table tbody tr:hover td { background: var(--color-bg-secondary); }
.ruoyi-table tbody tr:last-child td { border-bottom: 0; }
.ruoyi-check-cell { width: 42px; text-align: center !important; }
.ruoyi-check-cell input { width: 14px; height: 14px; accent-color: var(--color-brand); }
.ruoyi-operation-cell { width: 150px; white-space: nowrap; }
.ruoyi-link-button {
  padding: 2px 5px;
  border: 0;
  background: transparent;
  color: var(--color-brand);
  cursor: pointer;
  font-size: 12px;
}
.ruoyi-link-button:hover { text-decoration: underline; }
.ruoyi-link-button.danger { color: var(--color-danger); }
.ruoyi-empty-cell { color: var(--color-text-disabled); }
.ruoyi-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
}
.ruoyi-status-success { border-color: var(--p-green-200); background: var(--color-success-subtle); color: var(--p-green-700); }
.ruoyi-status-danger { border-color: var(--p-red-200); background: var(--color-danger-subtle); color: var(--p-red-700); }
.ruoyi-status-info { border-color: var(--p-blue-200); background: var(--color-info-subtle); color: var(--p-blue-700); }
.ruoyi-table-state { height: 180px !important; color: var(--color-text-muted) !important; text-align: center; }
.ruoyi-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}
.ruoyi-table-footer .pagination { margin-left: auto; }
.ruoyi-dialog-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ruoyi-dialog-field { display: grid; gap: 7px; }
.ruoyi-dialog-field:has(textarea),
.ruoyi-dialog-field:has(select[multiple]) { grid-column: 1 / -1; }
.ruoyi-dialog-field i { margin-left: 4px; color: var(--color-danger); font-style: normal; }
.ruoyi-switch-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.ruoyi-switch-field input { accent-color: var(--color-brand); }
.ruoyi-settings-page {
  width: min(1180px, 100%);
  margin: 0 auto;
}
.ruoyi-settings-empty {
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--color-brand);
  text-align: center;
}
.ruoyi-settings-empty h1 {
  margin: 4px 0 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 22px;
}
.ruoyi-settings-empty p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
}
.ruoyi-parameters-card {
  max-width: none;
}
.ruoyi-parameters-list {
  display: grid;
}
.ruoyi-parameter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px minmax(280px, 1.2fr);
  gap: 22px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border-muted);
}
.ruoyi-parameter-row:last-child {
  border-bottom: 0;
}
.ruoyi-parameter-meta,
.ruoyi-parameter-editor {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ruoyi-parameter-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ruoyi-parameter-title strong {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
}
.ruoyi-parameter-title em {
  padding: 2px 5px;
  border: 1px solid var(--p-amber-200);
  border-radius: 999px;
  background: var(--color-warning-subtle);
  color: var(--color-warning-strong);
  font-size: 9px;
  font-style: normal;
}
.ruoyi-parameter-meta code {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-text-muted);
  font-family: var(--saas-mono);
  font-size: 10px;
}
.ruoyi-parameter-meta > span {
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.ruoyi-parameter-type {
  display: grid;
  gap: 5px;
  align-content: start;
}
.ruoyi-parameter-type span {
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 10px;
}
.ruoyi-parameter-type small,
.ruoyi-parameter-default {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-parameter-json {
  min-height: 100px;
  resize: vertical;
  font-family: var(--saas-mono);
  font-size: 11px;
  line-height: 1.5;
}
.ruoyi-parameter-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.ruoyi-parameter-switch input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-brand);
}
.ruoyi-parameters-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 72px 20px;
  color: var(--color-brand);
  text-align: center;
}
.ruoyi-parameters-empty strong {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.ruoyi-parameters-empty span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.ruoyi-parameters-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1.5;
}
.ruoyi-parameters-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-success-strong);
}
.ruoyi-version-layout {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
}
.ruoyi-version-list {
  display: grid;
  padding: 8px;
  gap: 3px;
}
.ruoyi-version-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  width: 100%;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
}
.ruoyi-version-item:hover {
  background: var(--color-bg-secondary);
}
.ruoyi-version-item.selected {
  border-color: var(--color-brand-border);
  background: var(--color-brand-soft);
}
.ruoyi-version-item-marker {
  padding-top: 1px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.ruoyi-version-item.selected .ruoyi-version-item-marker,
.ruoyi-version-item:first-child .ruoyi-version-item-marker {
  color: var(--color-brand);
}
.ruoyi-version-item-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ruoyi-version-item-main strong {
  color: var(--color-text-primary);
  font-family: var(--saas-mono);
  font-size: 12px;
}
.ruoyi-version-item-main em {
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 5px;
  border: 1px solid var(--color-brand-border);
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 9px;
  font-style: normal;
}
.ruoyi-version-item-main small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-version-status {
  padding: 3px 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 9px;
  white-space: nowrap;
}
.ruoyi-version-status.is-published {
  border-color: var(--p-green-200);
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.ruoyi-version-detail {
  min-width: 0;
}
.ruoyi-version-detail-body {
  display: grid;
  gap: 20px;
  padding: 20px;
}
.ruoyi-version-summary-grid,
.ruoyi-version-blueprint-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.ruoyi-version-summary-grid > div,
.ruoyi-version-blueprint-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}
.ruoyi-version-summary-grid span,
.ruoyi-version-blueprint-summary span {
  color: var(--color-text-muted);
  font-size: 10px;
}
.ruoyi-version-summary-grid strong,
.ruoyi-version-blueprint-summary strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-version-blueprint-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ruoyi-version-diff-section {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.ruoyi-version-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-primary);
  font-size: 12px;
}
.ruoyi-version-section-title svg {
  color: var(--color-brand);
}
.ruoyi-version-diff {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ruoyi-version-diff-block {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
}
.ruoyi-version-diff-block > span {
  color: var(--color-text-muted);
  font-size: 10px;
}
.ruoyi-version-diff-block > strong {
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
}
.ruoyi-version-diff-block > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ruoyi-version-diff-block em {
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
}
.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);
}
.ruoyi-version-no-diff {
  padding: 14px;
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 11px;
}
@media (max-width: 720px) {
  .ruoyi-runtime-page { padding: 16px 14px 28px; }
  .ruoyi-runtime-layout {
    display: block;
  }
  .ruoyi-page-header { align-items: flex-start; }
  .ruoyi-page-header h1 { font-size: 21px; }
  .ruoyi-version { display: none; }
  .ruoyi-page-header-actions { width: 100%; }
  .ruoyi-search-form,
  .ruoyi-search-field,
  .ruoyi-query-range,
  .ruoyi-search-actions { width: 100%; }
  .ruoyi-search-actions .saas-btn { flex: 1; }
  .ruoyi-toolbar { align-items: flex-start; flex-direction: column; }
  .ruoyi-toolbar-actions { width: 100%; }
  .ruoyi-toolbar-actions .saas-btn { flex: 1; }
  .ruoyi-table-footer { align-items: flex-start; flex-direction: column; }
  .ruoyi-table-footer .pagination { margin-left: 0; }
  .ruoyi-dialog-form { grid-template-columns: 1fr; }
  .ruoyi-dialog-field:has(textarea),
  .ruoyi-dialog-field:has(select[multiple]) { grid-column: auto; }
  .ruoyi-parameter-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ruoyi-parameter-type {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ruoyi-parameter-type small {
    white-space: normal;
  }
  .ruoyi-version-layout {
    grid-template-columns: 1fr;
  }
  .ruoyi-version-summary-grid,
  .ruoyi-version-blueprint-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ruoyi-version-diff {
    grid-template-columns: 1fr;
  }
}

/* ── RuoYi-style application builder template ───────────────────────────── */
.builder-template-page {
  min-height: calc(100vh - 82px);
  padding: 20px 28px 40px;
  color: var(--color-text-primary);
}
.builder-template-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 1180px;
  margin: 0 auto 16px;
  color: var(--color-text-muted);
  font-size: 12px;
}
.builder-template-breadcrumb strong {
  color: var(--color-text-primary);
  font-weight: 500;
}
.builder-template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto 18px;
}
.builder-template-header h1 {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.builder-template-header p {
  margin: 5px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.builder-template-header-meta {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 12px;
}
.builder-template-header-meta > span,
.builder-template-publish-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.builder-template-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
}
.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-card {
  max-width: 1180px;
  margin: 0 auto 16px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xs);
}
.builder-template-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border-default);
}
.builder-template-card-header h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 600;
}
.builder-template-card-header p {
  margin: 5px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.builder-template-card-header > svg {
  color: var(--color-brand);
}
.builder-template-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  padding: 20px;
}
.builder-template-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.builder-template-field > span {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.builder-template-field > span i {
  margin-left: 3px;
  color: var(--color-danger-strong);
  font-style: normal;
}
.builder-template-field-wide {
  grid-column: span 3;
}
.builder-template-input {
  width: 100%;
  min-height: 34px;
}
.builder-template-field textarea.builder-template-input {
  resize: vertical;
  line-height: 1.55;
}
.builder-template-prompt {
  min-height: 150px;
  padding: 14px 15px;
  font-size: 14px;
  line-height: 1.75;
  border-color: var(--color-brand-border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-brand-soft) 55%, var(--color-bg-primary)),
    var(--color-bg-primary)
  );
}
.builder-template-prompt:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 14%, transparent);
}
.builder-template-advanced {
  grid-column: 1 / -1;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}
.builder-template-advanced summary {
  padding: 11px 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.builder-template-advanced[open] summary {
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-brand);
}
.builder-template-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}
.builder-template-ai-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.builder-template-ai-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.builder-template-ai-note div {
  display: grid;
  gap: 3px;
}
.builder-template-ai-note strong { font-size: 11px; }
.builder-template-ai-note span {
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.builder-template-mono {
  font-family: var(--saas-mono);
}
.builder-template-form-footer {
  display: flex;
  grid-column: span 3;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}
.builder-template-form-footer .saas-btn,
.builder-template-publish-footer .saas-btn {
  min-height: 34px;
}
.builder-template-alert {
  max-width: 1180px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-subtle);
  color: var(--color-danger-strong);
  font-size: 12px;
}
.builder-template-validated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-success-strong);
  font-size: 12px;
}
.builder-template-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 68px 20px;
  color: var(--color-text-muted);
}
.builder-template-empty strong {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
}
.builder-template-summary {
  display: grid;
  grid-template-columns: minmax(160px, .35fr) minmax(0, 1fr) minmax(120px, .28fr);
  gap: 20px;
  padding: 18px 20px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
}
.builder-template-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.builder-template-summary span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.builder-template-summary strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-template-menu-preview {
  display: grid;
  gap: 9px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
}
.builder-template-menu-preview > span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.builder-template-menu-level {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.builder-template-menu-group {
  display: grid;
  gap: 7px;
}
.builder-template-menu-group > strong {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.builder-template-menu-level-1 {
  gap: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--color-border-muted);
}
.builder-template-menu-item {
  padding: 4px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 11px;
}
.builder-template-table-wrap {
  overflow-x: auto;
}
.builder-template-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}
.builder-template-table th {
  height: 42px;
  padding: 0 20px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.builder-template-table td {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  vertical-align: top;
}
.builder-template-table tbody tr:hover {
  background: var(--color-bg-secondary);
}
.builder-template-table td strong {
  color: var(--color-text-primary);
  font-weight: 500;
}
.builder-template-table code {
  color: var(--color-text-secondary);
  font-family: var(--saas-mono);
  font-size: 11px;
}
.builder-template-field-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 270px;
}
.builder-template-field-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: 11px;
}
.builder-template-field-list em {
  color: var(--color-text-muted);
  font-family: var(--saas-mono);
  font-size: 9px;
  font-style: normal;
}
.builder-template-type-badge,
.builder-template-capability-list span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 10px;
  white-space: nowrap;
}
.builder-template-capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 100px;
}
.builder-template-capability-list span {
  border-color: var(--color-border-default);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
.builder-template-view-link {
  color: var(--color-brand);
  font-size: 12px;
  white-space: nowrap;
}
.builder-template-publish-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: 12px;
}
@media (max-width: 820px) {
  .builder-template-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .builder-template-field-wide,
  .builder-template-form-footer {
    grid-column: span 2;
  }
}
@media (max-width: 560px) {
  .builder-template-page {
    padding: 16px 14px 32px;
  }
  .builder-template-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .builder-template-form {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .builder-template-field-wide,
  .builder-template-form-footer {
    grid-column: span 1;
  }
  .builder-template-form-footer {
    justify-content: stretch;
  }
  .builder-template-form-footer .saas-btn {
    flex: 1;
    justify-content: center;
  }
  .builder-template-card-header,
  .builder-template-publish-footer {
    padding: 16px;
  }
  .builder-template-summary {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .builder-template-publish-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .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-dashboard-stat {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 13px 15px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xs);
}
.ruoyi-dashboard-stat span {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.ruoyi-dashboard-stat strong {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ruoyi-dashboard-stat em {
  color: var(--color-text-muted);
  font-size: 10px;
  font-style: normal;
}
.ruoyi-child-panel {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}
.ruoyi-child-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);
}
.ruoyi-child-panel-header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ruoyi-child-panel-header strong {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
}
.ruoyi-child-panel-header span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.ruoyi-child-panel-header .saas-btn {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 11px;
}
.ruoyi-child-empty {
  padding: 22px 12px;
  color: var(--color-text-muted);
  font-size: 11px;
  text-align: center;
}
.ruoyi-child-table-wrap {
  overflow-x: auto;
}
.ruoyi-child-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 11px;
}
.ruoyi-child-table th {
  padding: 9px 11px;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.ruoyi-child-table td {
  padding: 9px 11px;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.ruoyi-child-table tbody tr {
  background: var(--color-bg-primary);
}
.ruoyi-child-table tbody tr:hover {
  background: var(--color-brand-soft);
}

/* 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 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}
.ruoyi-resource-menu-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}
.ruoyi-resource-menu-group-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.ruoyi-resource-menu-group-title small {
  color: var(--color-text-disabled);
  font-family: var(--saas-mono);
  font-size: 10px;
}
.ruoyi-resource-menu-level-1 {
  gap: 0;
}
.ruoyi-resource-menu button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 12px;
}
.ruoyi-resource-menu button:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-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-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
}
.ruoyi-detail-item {
  display: grid;
  gap: 6px;
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-muted);
}
.ruoyi-detail-item span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.ruoyi-detail-item strong {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}
@media (max-width: 720px) {
  .ruoyi-resource-menu,
  .ruoyi-resource-menu-group {
    align-items: flex-start;
    flex-direction: column;
  }
  .ruoyi-resource-menu-group {
    width: 100%;
    gap: 0;
  }
  .ruoyi-resource-menu-level-1 {
    width: 100%;
    padding-left: 8px;
    border-left: 2px solid var(--color-border-muted);
  }
  .ruoyi-resource-menu-level-1 button {
    width: 100%;
    text-align: left;
  }
  .ruoyi-detail-grid {
    grid-template-columns: 1fr;
  }
}
.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-dashboard-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 440px) {
  .ruoyi-dashboard-strip {
    grid-template-columns: 1fr;
  }
}
@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-left: 3px solid var(--calendar-event-color, var(--color-brand));
  border-radius: 4px;
  background: var(--color-brand-soft);
}
.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);
}
.ruoyi-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-height: 36px;
  align-items: center;
}
.ruoyi-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.ruoyi-choice input {
  accent-color: var(--color-brand);
}
.ruoyi-rich-text-input {
  min-height: 130px;
  resize: vertical;
  line-height: 1.7;
}
.ruoyi-upload-field {
  display: grid;
  gap: 8px;
}
.ruoyi-upload-trigger {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px dashed var(--color-brand-border);
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.ruoyi-upload-trigger input {
  display: none;
}
.ruoyi-upload-list,
.ruoyi-file-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ruoyi-upload-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 11px;
}
.ruoyi-upload-item em {
  color: var(--color-text-muted);
  font-style: normal;
}
.ruoyi-file-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-brand);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}
.ruoyi-file-link:hover {
  text-decoration: underline;
}
.ruoyi-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ruoyi-report-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xs);
}
.ruoyi-report-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ruoyi-report-card > header div {
  display: grid;
  gap: 3px;
}
.ruoyi-report-card > header strong {
  color: var(--color-text-primary);
  font-size: 13px;
}
.ruoyi-report-card > header span,
.ruoyi-report-card > header em {
  color: var(--color-text-muted);
  font-size: 11px;
  font-style: normal;
}
.ruoyi-report-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: -2px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-muted);
}
.ruoyi-report-range label {
  display: grid;
  gap: 4px;
  min-width: 130px;
}
.ruoyi-report-range label span {
  color: var(--color-text-muted);
  font-size: 10px;
}
.ruoyi-report-range input {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  font: inherit;
  font-size: 11px;
}
.ruoyi-report-range input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
  border-color: var(--color-brand);
}
.ruoyi-report-line {
  display: grid;
  gap: 6px;
}
.ruoyi-report-line svg {
  width: 100%;
  min-height: 150px;
  overflow: visible;
}
.ruoyi-report-line line {
  stroke: var(--color-border-default);
  stroke-width: 1;
}
.ruoyi-report-line polyline {
  fill: none;
  stroke: var(--color-brand);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}
.ruoyi-report-line circle {
  fill: var(--color-bg-primary);
  stroke: var(--color-brand);
  stroke-width: 3;
}
.ruoyi-report-axis-labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 10px;
  text-align: center;
}
.ruoyi-report-axis-labels span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-report-pie-layout {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 150px;
}
.ruoyi-report-pie {
  position: relative;
  display: grid;
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
  place-items: center;
  border-radius: 50%;
}
.ruoyi-report-pie::before {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-bg-primary);
  content: "";
}
.ruoyi-report-pie > div {
  position: absolute;
  color: var(--color-text-primary);
  font-family: var(--font-code);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.ruoyi-report-legend {
  display: grid;
  flex: 1;
  gap: 8px;
  min-width: 0;
}
.ruoyi-report-legend > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.ruoyi-report-legend span {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-report-legend i {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}
.ruoyi-report-legend b {
  color: var(--color-text-primary);
  font-family: var(--font-code);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ruoyi-report-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  color: var(--color-text-muted);
  font-size: 12px;
}
.ruoyi-report-bars {
  display: grid;
  gap: 10px;
}
.ruoyi-report-bar-row {
  display: grid;
  grid-template-columns: minmax(70px, 0.8fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.ruoyi-report-bar-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruoyi-report-bar-row > div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-bg-tertiary);
}
.ruoyi-report-bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand);
}
.ruoyi-report-bar-row b {
  color: var(--color-text-primary);
  font-family: var(--font-code);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ruoyi-report-table-wrap {
  overflow-x: auto;
}
.ruoyi-report-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.ruoyi-report-table th,
.ruoyi-report-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--color-border-muted);
  text-align: left;
  white-space: nowrap;
}
.ruoyi-report-table th {
  color: var(--color-text-muted);
  font-weight: 500;
}

.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(--p-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(--saas-border);
  border-radius: var(--p-radius-lg);
  background: var(--saas-surface);
}

.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(--saas-border);
  border-radius: var(--p-radius-lg);
  background: var(--saas-surface);
  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(--saas-mono);
  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;
}

@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-report-grid {
    grid-template-columns: 1fr;
  }
  .ruoyi-calendar {
    padding: 10px;
    overflow-x: auto;
  }
  .ruoyi-calendar-weekdays,
  .ruoyi-calendar-grid {
    min-width: 680px;
  }
  .ruoyi-calendar-cell {
    min-height: 96px;
  }
  .ruoyi-report-pie-layout {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* ============================================================
   Veluvane Admin — Professional Dashboard CSS
   Design: Clean Dark-Header + Card-Based + Data-First
   Version: 2.0 — Enhanced
   ============================================================ */

/* ── 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-bg-secondary);
  --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-blue:         var(--color-brand);
  --admin-green:        var(--p-green-500);
  --admin-amber:        var(--p-amber-500);
  --admin-red:          var(--p-red-500);
  --admin-purple: var(--color-purple);

  --admin-radius-sm:    var(--p-radius-sm);
  --admin-radius:       var(--p-radius-lg);
  --admin-radius-lg:    var(--p-radius-xl);

  --admin-shadow-sm:    var(--p-shadow-sm);
  --admin-shadow:       var(--p-shadow-md);
  --admin-shadow-lg:    var(--p-shadow-lg);
}

/* ── Reset / Base ───────────────────────────────────────────── */
.admin-root {
  font-family: var(--font-body);
  color: var(--admin-text);
  background: var(--admin-bg);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

/* ── 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: 0 1px 3px rgba(0,0,0,0.04);
}

.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.red    { border-left: 3px solid var(--admin-red); }
.admin-stat-card.green  { border-left: 3px solid var(--admin-green); }
.admin-stat-card.blue   { border-left: 3px solid var(--admin-blue); }
.admin-stat-card.amber  { border-left: 3px solid var(--admin-amber); }
.admin-stat-card.purple  { border-left: 3px solid var(--admin-purple); }
.admin-stat-card.gray    { border-left: 3px solid var(--admin-text-disabled); }

.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: rgba(220, 38, 38, 0.08); }

.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); }
@media (max-width: 1100px) {
  .admin-model-cost-grid { grid-template-columns: 1fr; }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 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-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(--saas-mono); }
.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: 0 1px 3px rgba(0,0,0,0.2); }
.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); }

/* ── 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 ─────────────────────────────────────── */
.admin-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--admin-border-light);
  transition: background 0.12s;
}
.admin-activity-item:last-child { border-bottom: none; }
.admin-activity-item:hover { background: var(--admin-row-hover); }

.admin-activity-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px; font-weight: 700;
  margin-top: 1px;
}
.admin-activity-body { flex: 1; min-width: 0; }
.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-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(--saas-mono); }
.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(--saas-mono);
  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: -4px 0 24px rgba(0,0,0,0.12);
  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: rgba(0,0,0,0.25); 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(--p-gray-900) 80%, transparent); color: var(--color-text-primary); }

.admin-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.admin-badge.green .admin-badge-dot  { background: var(--color-success); }
.admin-badge.blue  .admin-badge-dot  { background: var(--color-brand); }
.admin-badge.amber .admin-badge-dot  { background: var(--p-amber-400); }
.admin-badge.red   .admin-badge-dot  { background: var(--color-danger); }
.admin-badge.purple .admin-badge-dot { background: var(--color-purple); }
.admin-badge.gray  .admin-badge-dot  { background: var(--color-text-secondary); }
.admin-badge.black .admin-badge-dot  { background: var(--p-gray-900); }

/* 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(--p-gray-900) 80%, transparent); color: var(--color-text-primary); border-color: color-mix(in srgb, var(--p-gray-900) 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 ──────────────────────────────────────────────────── */
.admin-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--admin-radius);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

.admin-alert.error { background: color-mix(in srgb, var(--color-danger) 8%, transparent); color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 15%, transparent); }
.admin-alert.warning { background: color-mix(in srgb, var(--color-warning) 8%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 15%, transparent); }
.admin-alert.info   { background: color-mix(in srgb, var(--color-brand) 80%, transparent); color: var(--color-brand); border: 1px solid color-mix(in srgb, var(--color-brand) 150%, transparent); }

/* ── 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-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); }

/* Cover admin selects that do not use the table-filter variant. */
.admin-root select {
  min-height: 34px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background-color: var(--admin-card-bg);
  background-image: 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");
  background-repeat: no-repeat;
  background-position: right 9px center;
  color: var(--admin-text);
  font-family: var(--font-body);
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          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);
}
[data-theme="dark"] .admin-root select {
  color-scheme: dark;
}

/* ── 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(--saas-mono); }
.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(--saas-mono); }
.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-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-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(--saas-mono); font-size: 10px; }
.admin-pool-model-table td small { display: block; margin-top: 4px; color: var(--admin-text-subtle); font-size: 10px; }
.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(--saas-mono); 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(--saas-mono); 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(--saas-mono); }
.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(--saas-mono); 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(--saas-mono); 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(--saas-mono); 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: rgba(17, 24, 39, 0.32); 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: vertical; font-family: var(--saas-mono); font-size: 11px; line-height: 1.6; }
.admin-pool-config-json { width: 100%; min-height: 140px; resize: vertical; font-family: var(--saas-mono); 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(--saas-mono); 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; }

@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)); }
}

@media (max-width: 720px) {
  .admin-pool-list { grid-template-columns: 1fr; }
  .admin-pool-overview-card .admin-card-header { flex-direction: column; }
  .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-modal-header,
  .admin-modal-body,
  .admin-modal-footer { padding-left: 16px; padding-right: 16px; }
  .admin-pool-stat { padding: 14px; }
}

/* ── 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: rgba(0,0,0,0.3);
  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(--p-green-500); box-shadow: 0 0 0 1px var(--p-green-500); }
.admin-timeline-dot.blue   { background: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); }
.admin-timeline-dot.red    { background: var(--p-red-400); box-shadow: 0 0 0 1px var(--p-red-400); }
.admin-timeline-dot.amber  { background: var(--p-amber-400); box-shadow: 0 0 0 1px var(--p-amber-400); }
.admin-timeline-dot.purple { background: var(--p-purple-500); box-shadow: 0 0 0 1px var(--p-purple-500); }

.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: width 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: width 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; }
.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); }

/* ── 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(--saas-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.12);
  padding: 4px 10px;
  border-radius: var(--admin-radius-sm);
  border: 1px solid rgba(255,255,255,0.25);
}

/* ── Heatmap ─────────────────────────────────────────────────── */
.admin-heatmap-cell { transition: background 0.1s; cursor: pointer; }
.admin-heatmap-cell:hover { filter: brightness(0.85); }

/* ── 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 { height: 100%; border-radius: 999px; transition: width 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(--p-gray-0); 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; }

/* ── saas-input (global) ─────────────────────────────────────── */
.saas-input {
  padding: 7px 11px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-card-bg);
  color: var(--admin-text);
  font-size: 12px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s;
}
.saas-input:focus { border-color: var(--admin-blue); }
.saas-input::-moz-placeholder { color: var(--admin-text-subtle); }
.saas-input::placeholder { color: var(--admin-text-subtle); }

/* ── saas-spin (loading spinner) ────────────────────────────── */
.saas-spin {
  display: block;
  width: 16px; height: 16px;
  border: 2px solid var(--admin-border);
  border-top-color: var(--admin-text);
  border-radius: 50%;
  animation: adminSpin 0.7s linear infinite;
}
.saas-spin-lg { width: 28px; height: 28px; border-width: 3px; }

@keyframes adminSpin { to { transform: rotate(360deg); } }

/* ── 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;
}

.admin-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--color-sidebar-border);
  flex-shrink: 0;
}

.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-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-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 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: 0 1px 4px rgba(0,0,0,0.04);
  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-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: 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:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  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(--p-gray-900); }
.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: 0 3px 12px rgba(0,0,0,0.07);
}

.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(--p-green-500); box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
.admin-status-dot.offline { background: var(--admin-text-disabled); }
.admin-status-dot.warning { background: var(--p-amber-400); box-shadow: 0 0 0 2px rgba(245,158,11,0.2); }
.admin-status-dot.error   { background: var(--p-red-400); box-shadow: 0 0 0 2px rgba(239,68,68,0.2); }

/* ── 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: rgba(22,163,74,0.2); }
.admin-tag-amber    { background: color-mix(in srgb, var(--color-warning) 8%, transparent); color: var(--color-warning); border-color: rgba(217,119,6,0.2); }
.admin-tag-red      { background: color-mix(in srgb, var(--color-danger) 8%, transparent); color: var(--color-danger); border-color: rgba(220,38,38,0.2); }

/* ── 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: -8px 0 40px rgba(0,0,0,0.12);
  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: rgba(0,0,0,0.3);
  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); }

/* ── 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: width 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: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── 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(--p-gray-900) 0%, var(--p-gray-800) 100%);
  color: var(--p-gray-0);
  border: none;
}

.admin-highlight-card .admin-card-title { color: var(--p-gray-0); }
.admin-highlight-card .admin-card-subtitle { color: rgba(255,255,255,0.5); }
.admin-highlight-card .admin-mini-stat-value { color: var(--p-gray-0); }
.admin-highlight-card .admin-mini-stat-label { color: rgba(255,255,255,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(--p-gray-0);
  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(--p-gray-900);
  color: var(--p-gray-0);
  border-color: var(--color-text-primary);
}

.admin-quick-btn.primary:hover { background: var(--p-gray-800); }

/* ── 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);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.admin-form-input:focus {
  border-color: var(--admin-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 80%, transparent);
}

.admin-form-input::-moz-placeholder { color: var(--admin-text-subtle); }

.admin-form-input::placeholder { color: var(--admin-text-subtle); }

/* ── 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; }
.admin-activity-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── System Health ─────────────────────────────────────────────── */
.admin-health-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.admin-health-label {
  font-size: 11px;
  color: var(--admin-text-muted);
  width: 56px;
  flex-shrink: 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: width 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-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-notif-text { font-size: 12px; color: var(--admin-text); line-height: 1.4; }
.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;
}

.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-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-hero-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-detail-drawer { width: 100%; }
}
/* ── Page Actions Bar ────────────────────────────────────────── */
.admin-page-actions { display: flex; align-items: center; gap: 8px; }

/* ── 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;
}
.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: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.25); 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); }
.admin-hero-stat-sub { font-size: 11px; color: var(--admin-text-subtle); }

/* ── 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: width 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-item:last-child { border-bottom: none; }
.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-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: 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-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.admin-health-label { font-size: 11px; color: var(--admin-text-muted); width: 56px; flex-shrink: 0; }
.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: width 0.4s ease; }
.admin-health-value { font-size: 10px; font-weight: 700; width: 38px; text-align: right; flex-shrink: 0; }

/* ── 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 ──────────────────────────────────────────────── */
.admin-empty { text-align: center; padding: 24px 0; color: var(--admin-text-subtle); font-size: 12px; }

/* ── Plan Distribution ─────────────────────────────────────────── */
.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; }

/* ── Section Header ───────────────────────────────────────────── */
.admin-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.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;
}
.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); }

/* ── 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-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:hover { background: var(--admin-row-hover); }
.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-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(--saas-mono); 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-row:hover { background: var(--admin-row-hover); }
.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-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.admin-health-label { font-size: 11px; color: var(--admin-text-muted); width: 56px; flex-shrink: 0; }
.admin-health-track { flex: 1; }
.admin-health-value { font-size: 10px; font-weight: 700; width: 38px; text-align: right; flex-shrink: 0; }

/* ── 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(--saas-mono); 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-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.admin-notif-text { font-size: 12px; color: var(--admin-text); line-height: 1.4; flex: 1; min-width: 0; }
.admin-notif-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 3px; }

/* ── 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-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-label { font-size: 10px; color: var(--admin-text-subtle); font-weight: 600; 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; 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.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-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; }
.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 (below traffic chart) ──────────────────────── */
.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: 18px; font-weight: 800; color: var(--admin-text); }

/* ── Revenue footer metrics (health card) ──────────────────────── */
.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 { flex: 1; text-align: center; }
.admin-revenue-footer-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 3px; }
.admin-revenue-footer-value { font-size: 18px; font-weight: 800; color: var(--admin-text); }

/* ── 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-item:last-child { border-bottom: none; }
.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; }
.admin-activity-text { font-size: 11px; color: var(--admin-text); line-height: 1.4; }
.admin-activity-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── Plan distribution ─────────────────────────────────────────── */
.admin-plan-dist { padding: 20px; display: flex; align-items: center; gap: 24px; }
.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; }

/* ── 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-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; cursor: default; }
.admin-top-users-row:hover { background: var(--admin-row-hover); }
.admin-top-users-rank { font-size: 11px; font-weight: 700; text-align: center; }
.admin-top-users-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-top-users-id { font-size: 12px; font-family: var(--saas-mono); color: var(--admin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 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-item:last-child { border-bottom: none; }
.admin-notif-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.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: 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-track { flex: 1; }
.admin-health-bar-track { height: 4px; border-radius: 999px; overflow: hidden; }
.admin-health-bar-fill { height: 100%; border-radius: 999px; transition: width 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-flex-1 { flex: 1; min-width: 0; }
.admin-mb-16 { margin-bottom: 16px; }
.admin-mt-20 { margin-top: 20px; }
.admin-pad-12-20 { padding: 12px 20px; }
.admin-pad-14-20 { padding: 14px 20px; }
.admin-col-gap-6 { display: flex; flex-direction: column; gap: 6px; }
.admin-row-gap-6 { display: flex; align-items: center; gap: 6px; }
.admin-row-gap-8 { display: flex; align-items: center; gap: 8px; }
.admin-grid-3-gap-12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ── Top users ─────────────────────────────────────────────────── */
.admin-bold-right { font-size: 13px; font-weight: 800; color: var(--admin-text); text-align: right; }
.admin-actions-cell { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.admin-mono { font-size: 12px; font-family: var(--saas-mono); color: var(--admin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Section row ───────────────────────────────────────────────── */
.admin-section-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ── 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-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-label { font-size: 10px; color: var(--admin-text-subtle); font-weight: 600; 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; 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.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-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; }
.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 (below traffic chart) ──────────────────────── */
.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: 18px; font-weight: 800; color: var(--admin-text); }

/* ── Revenue footer metrics (health card) ──────────────────────── */
.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 { flex: 1; text-align: center; }
.admin-revenue-footer-label { font-size: 10px; color: var(--admin-text-subtle); margin-bottom: 3px; }
.admin-revenue-footer-value { font-size: 18px; font-weight: 800; color: var(--admin-text); }

/* ── 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-item:last-child { border-bottom: none; }
.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; }
.admin-activity-text { font-size: 11px; color: var(--admin-text); line-height: 1.4; }
.admin-activity-time { font-size: 10px; color: var(--admin-text-subtle); margin-top: 2px; }

/* ── Plan distribution ─────────────────────────────────────────── */
.admin-plan-dist { padding: 20px; display: flex; align-items: center; gap: 24px; }
.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; }

/* ── 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-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; cursor: default; }
.admin-top-users-row:hover { background: var(--admin-row-hover); }
.admin-top-users-rank { font-size: 11px; font-weight: 700; text-align: center; }
.admin-top-users-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-top-users-id { font-size: 12px; font-family: var(--saas-mono); color: var(--admin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 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-item:last-child { border-bottom: none; }
.admin-notif-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.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: 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-track { flex: 1; }
.admin-health-bar-track { height: 4px; border-radius: 999px; overflow: hidden; }
.admin-health-bar-fill { height: 100%; border-radius: 999px; transition: width 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; }

/* ── Row helpers ────────────────────────────────────────────────── */
.admin-row-gap-6 { display: flex; align-items: center; gap: 6px; }
.admin-row-gap-8 { display: flex; align-items: center; gap: 8px; }
.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-16 { margin-bottom: 16px; }
.admin-mb-14 { margin-bottom: 14px; }
.admin-mb-20 { margin-bottom: 20px; }

/* ── Table wrap ─────────────────────────────────────────────────── */
.admin-table-wrap { padding: 0 4px; }
.admin-grid-3-gap-12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ─────────────────────────────────────────────────────────
   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-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: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); 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: rgba(250,250,250,.94);
  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(--p-green-500); }
.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-quick-nav-card:hover { border-color: var(--admin-text-disabled); box-shadow: var(--admin-shadow); transform: translateY(-1px); }

.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-root.has-sidebar {
    flex-direction: column;
  }

  .admin-root.has-sidebar .admin-sidebar {
    width: 100%;
    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%;
  }
}
.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(--p-gray-950);
  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(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 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, rgba(255,255,255,0.06) 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(--p-gray-800);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.02em;
  -o-object-fit: cover;
     object-fit: cover;
}

.auth-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  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: #fff;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.auth-brand-headline h2 em {
  font-style: normal;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
}

.auth-brand-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  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: rgba(255,255,255,0.55);
}

.auth-brand-feature-icon {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  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: rgba(255,255,255,0.2);
  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(--saas-surface);
  padding: 48px 44px;
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  animation: authFadeUp 0.55s var(--saas-ease) both;
  animation-delay: 0.25s;
}

/* ── Form Header ─────────────────────────────────────────────────────── */
.auth-form-header {
  margin-bottom: 32px;
  animation: authFadeUp 0.55s var(--saas-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(--p-gray-900);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.auth-form-logo-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-gray-900);
  letter-spacing: -0.01em;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--p-gray-900);
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

.auth-subtitle {
  font-size: 13px;
  color: var(--p-gray-400);
  margin: 0;
  line-height: 1.5;
}

/* ── Error ──────────────────────────────────────────────────────────── */
.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--p-red-50);
  border: 1px solid var(--p-red-100);
  border-radius: 8px;
  font-size: 13px;
  color: var(--p-red-500);
  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(--p-blue-600);
  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(--p-blue-700); }
.auth-login-mode.active {
  color: var(--p-blue-700);
  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(--p-gray-900);
  border-radius: 10px;
  background: var(--p-gray-900);
  color: #fff;
  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(--p-gray-700);
  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(--p-amber-200);
  border-radius: 7px;
  background: var(--p-amber-50);
  color: var(--p-amber-700);
  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(--p-blue-100);
  border-radius: 9px;
  background: var(--p-blue-50);
  color: var(--p-gray-600);
  font-size: 12px;
  line-height: 1.5;
}

.auth-2fa-copy strong {
  color: var(--p-gray-900);
  font-size: 13px;
}

/* ── SSO Section ─────────────────────────────────────────────────────── */
.auth-sso-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--p-gray-400);
  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(--p-gray-200);
}

.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(--p-gray-500);
  text-align: center;
}
.auth-google__hint--error { color: var(--p-red-400); }
.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(--saas-surface);
  border: 1.5px solid var(--saas-border);
  color: var(--p-gray-700);
  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(--p-gray-900);
  color: var(--p-gray-900);
  background: var(--p-gray-50);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  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(--p-gray-900);
  color: #fff;
  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(--p-gray-700);
  letter-spacing: 0.01em;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-forgot {
  font-size: 11px;
  color: var(--p-gray-400);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
  letter-spacing: 0.01em;
}
.auth-forgot:hover { color: var(--p-gray-900); }

.auth-input {
  width: 100%;
  border: 1.5px solid var(--saas-border);
  background: var(--saas-surface);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--p-gray-900);
  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(--p-gray-400); }
.auth-input::placeholder { color: var(--p-gray-400); }
.auth-input:focus {
  border-color: var(--p-gray-900);
  box-shadow: 0 0 0 3px rgba(24,24,27,0.07);
}
.auth-input:not(:-moz-placeholder):valid { border-color: var(--p-green-500); }
.auth-input:not(:placeholder-shown):valid { border-color: var(--p-green-500); }
.auth-input:not(:-moz-placeholder):not(:valid) { border-color: var(--p-red-400); }
.auth-input:not(:placeholder-shown):not(:valid) { border-color: var(--p-red-400); }

.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 42px; }

.auth-toggle {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--p-gray-400);
  display: flex;
  padding: 3px;
  transition: color 0.12s;
  border-radius: 4px;
}
.auth-toggle:hover { color: var(--p-gray-700); }

/* ── 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(--p-gray-900) 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, rgba(255,255,255,0.12), 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(--p-gray-900) 24%, transparent);
  transform: translateY(-1px);
}
.auth-submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--p-gray-900) 14%, transparent);
}
.auth-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Switch link ─────────────────────────────────────────────────────── */
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--p-gray-400);
  margin-top: 24px;
  animation: authFadeUp 0.5s ease both;
  animation-delay: 0.55s;
}
.auth-switch-link {
  color: var(--p-gray-900);
  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(--p-gray-200);
  border-radius: 999px;
  overflow: hidden;
}
.auth-strength-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s var(--saas-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 rgba(255,255,255,0.25);
  border-top-color: #fff;
  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; }
}

/* ── Dark mode adjustments ─────────────────────────────────────────────── */
[data-theme="dark"] .auth-brand {
  background: var(--color-bg-primary);
}

[data-theme="dark"] .auth-brand-mark {
  background: var(--color-bg-tertiary);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .auth-title,
[data-theme="dark"] .auth-form-logo-name {
  color: var(--color-text-primary);
}

[data-theme="dark"] .auth-subtitle,
[data-theme="dark"] .auth-forgot,
[data-theme="dark"] .auth-google__hint,
[data-theme="dark"] .auth-switch {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .auth-login-mode {
  color: var(--p-blue-400);
}

[data-theme="dark"] .auth-login-mode:hover {
  color: var(--p-blue-300);
}

[data-theme="dark"] .auth-login-mode.active {
  color: var(--p-blue-300);
}

[data-theme="dark"] .auth-label,
[data-theme="dark"] .auth-switch-link {
  color: var(--color-text-primary);
}

[data-theme="dark"] .auth-error {
  background: var(--color-danger-subtle);
  border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
  color: var(--color-danger);
}

[data-theme="dark"] .auth-input {
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .auth-input::-moz-placeholder {
  color: var(--color-text-muted);
}

[data-theme="dark"] .auth-input::placeholder {
  color: var(--color-text-muted);
}

[data-theme="dark"] .auth-input:focus {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-primary) 18%, transparent);
}

[data-theme="dark"] .auth-sso-divider {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .auth-sso-divider::before,
[data-theme="dark"] .auth-sso-divider::after {
  background: var(--color-border-default);
}

[data-theme="dark"] .auth-sso-btn {
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .auth-sso-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

[data-theme="dark"] .auth-code-send {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

[data-theme="dark"] .auth-code-send:hover:not(:disabled) {
  background: var(--color-text-secondary);
}

[data-theme="dark"] .auth-toggle {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .auth-toggle:hover {
  color: var(--color-text-primary);
}
/* 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); }
}/* 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     {}/* 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, #f0fdf4); border-color: var(--p-green-100, #dcfce7); }
.alert--warning { background: var(--color-warning-subtle, #fffbeb); border-color: var(--p-amber-100, #fef3c7); }
.alert--danger  { background: var(--color-danger-subtle, #fef2f2); border-color: var(--p-red-100, #fee2e2); }
.alert--info    { background: var(--color-info-subtle, #eff6ff); border-color: var(--p-blue-100, #dbeafe); }

.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, 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, var(--color-text-primary)); }/* DataTable — Uses Design Token CSS Variables */

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

.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-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);
}/* 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;
}.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, #fff);
  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;
  }
}
.saas-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-default, #e4e4e7);
  background: var(--color-bg-primary, #fff);
}

.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;
}

.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: 34px;
  padding: 0 10px;
  color: var(--color-text-muted, #71717a);
  background: var(--color-bg-primary, #fff);
  border: 1px solid var(--color-border-default, #e4e4e7);
  border-radius: var(--radius-sm, 4px);
}

.saas-admin-search:focus-within {
  border-color: var(--color-brand, #2563eb);
  box-shadow: 0 0 0 2px 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: 34px;
  min-width: 110px;
  padding: 0 28px 0 10px;
  color: var(--color-text-primary, #18181b);
  background: var(--color-bg-primary, #fff);
  border: 1px solid var(--color-border-default, #e4e4e7);
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  font-size: 12px;
}

.saas-admin-filter select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-brand, #2563eb) 40%, transparent);
  outline-offset: 1px;
}

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

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

@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-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(--color-bg-secondary, #f4f4f5);
  border-bottom: 1px solid 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;
  }
}
.saas-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px;
  color: var(--color-text-secondary, #52525b);
  border-top: 1px solid var(--color-border-default, #e4e4e7);
}

.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(--color-bg-primary, #fff);
  border: 1px solid var(--color-border-default, #e4e4e7);
  border-radius: var(--radius-sm, 4px);
  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);
  border-color: var(--color-brand, #18181b);
}

.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(--color-bg-primary, #fff);
  border: 1px solid var(--color-border-default, #e4e4e7);
  border-radius: var(--radius-sm, 4px);
  font: inherit;
}

@media (max-width: 560px) {
  .saas-admin-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}
.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-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;
}
.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, #fff);
  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, #16a34a);
  background: var(--color-success-subtle, #f0fdf4);
  border-color: var(--p-green-100, #dcfce7);
}

.saas-admin-badge-blue {
  color: var(--color-info, #2563eb);
  background: var(--color-info-subtle, #eff6ff);
  border-color: var(--p-blue-100, #dbeafe);
}

.saas-admin-badge-amber {
  color: var(--color-warning-strong, #b45309);
  background: var(--color-warning-subtle, #fffbeb);
  border-color: var(--p-amber-100, #fef3c7);
}

.saas-admin-badge-red {
  color: var(--color-danger, #dc2626);
  background: var(--color-danger-subtle, #fef2f2);
  border-color: var(--p-red-100, #fee2e2);
}

.saas-admin-badge-purple {
  color: var(--color-purple-strong, #7c3aed);
  background: var(--color-purple-subtle, #f5f3ff);
  border-color: var(--p-purple-200, #ddd6fe);
}

.saas-admin-badge-gray {
  color: var(--color-text-secondary, #52525b);
  background: var(--color-bg-secondary, #f4f4f5);
  border-color: var(--color-border-default, #e4e4e7);
}

.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, #fff);
  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);
}
/**
 * 主题定义文件
 * 用户可通过以下方式换主题：
 *
 *  1. 直接修改本文件的 CSS 变量值
 *  2. 将本文件引入到自己的主题文件并覆盖变量
 *  3. 在组件中动态设置 document.documentElement.setAttribute('data-theme', 'dark')
 *
 * 主题切换优先级：
 *    data-theme 属性 > localStorage (themeUtils) > :root 默认值
 */

/* ── 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 由 globals.css [data-theme="dark"] 统一管理 ────── */
/* 请编辑 globals.css 中的 dark 块，而非此处 */


/* ── 品牌色主题示例（取消注释即可使用）─────────────────────────────── */
/*
: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;
}
*/