/* ========== CSS Variables — BI 大屏设计系统 ========== */
:root {
  /* 631 配色法 — 深蓝基底 */
  --bg-primary: #030b1a;
  --bg-secondary: #071426;
  --bg-card: rgba(6, 20, 42, 0.72);
  --bg-card-hover: rgba(8, 26, 52, 0.88);
  --bg-card-solid: #0a1e3a;

  /* 青蓝发光体系 */
  --glow-cyan: #00d4ff;
  --glow-cyan-dim: rgba(0, 212, 255, 0.3);
  --glow-cyan-faint: rgba(0, 212, 255, 0.12);
  --border-glow: rgba(0, 212, 255, 0.18);
  --border-glow-strong: rgba(0, 212, 255, 0.45);

  /* 文字层次 */
  --text-primary: #e4efff;
  --text-secondary: #7eb8e0;
  --text-muted: #4a7a9b;

  /* 语义色 — 低饱和高辨识 */
  --color-primary: #00b8ff;
  --color-success: #00e5a0;
  --color-warning: #ffaa2c;
  --color-danger: #ff4d6a;
  --color-info: #5b8ca8;

  /* 角标装饰 */
  --corner-size: 14px;
  --corner-color: rgba(0, 212, 255, 0.6);
  --corner-color-hover: rgba(0, 212, 255, 0.9);

  /* 字体 */
  --font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace;
  --font-din: "DIN Alternate", "DIN", "Oswald", "Impact", var(--font-family);

  /* 圆角 — BI 风格用小圆角 */
  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 6px;

  /* 阴影 */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.06);
  --shadow-glow-strong: 0 0 40px rgba(0, 212, 255, 0.12);

  --transition: all 0.3s ease;
}

/* ========== Element Plus Dark Theme Override ========== */
/* Merge EP dark vars with our deep-blue palette */
html.dark {
  /* Core backgrounds — deep navy BI palette */
  --el-bg-color: #071426;
  --el-bg-color-overlay: #0a1e3a;
  --el-bg-color-page: #030b1a;

  /* Fill colors — semi-transparent white on deep navy */
  --el-fill-color: rgba(255, 255, 255, 0.05);
  --el-fill-color-light: rgba(255, 255, 255, 0.03);
  --el-fill-color-lighter: rgba(255, 255, 255, 0.02);
  --el-fill-color-extra-light: rgba(255, 255, 255, 0.015);
  --el-fill-color-dark: rgba(255, 255, 255, 0.07);
  --el-fill-color-darker: rgba(255, 255, 255, 0.09);
  --el-fill-color-blank: transparent;

  /* Text — cyan-tinted hierarchy */
  --el-text-color-primary: #e4efff;
  --el-text-color-regular: #b0ccdf;
  --el-text-color-secondary: #7eb8e0;
  --el-text-color-placeholder: #4a7a9b;
  --el-text-color-disabled: #365670;

  /* Borders — cyan glow */
  --el-border-color: rgba(0, 212, 255, 0.18);
  --el-border-color-light: rgba(0, 212, 255, 0.12);
  --el-border-color-lighter: rgba(0, 212, 255, 0.08);
  --el-border-color-extra-light: rgba(0, 212, 255, 0.05);
  --el-border-color-dark: rgba(0, 212, 255, 0.25);
  --el-border-color-darker: rgba(0, 212, 255, 0.35);

  /* Input specific */
  --el-input-bg-color: rgba(0, 20, 40, 0.5);
  --el-input-border-color: rgba(0, 212, 255, 0.18);
  --el-input-hover-border-color: rgba(0, 212, 255, 0.35);
  --el-input-focus-border-color: var(--glow-cyan);
  --el-input-text-color: #e4efff;

  /* Disabled */
  --el-disabled-bg-color: rgba(255, 255, 255, 0.02);
  --el-disabled-text-color: #365670;
  --el-disabled-border-color: rgba(0, 212, 255, 0.06);

  /* Card / Dialog / Drawer */
  --el-card-bg-color: rgba(6, 20, 42, 0.8);
  --el-dialog-bg-color: #0a1e3a;
  --el-drawer-bg-color: #071426;

  /* Table */
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: rgba(0, 212, 255, 0.04);
  --el-table-row-hover-bg-color: rgba(0, 212, 255, 0.06);
  --el-table-border-color: rgba(0, 212, 255, 0.1);

  /* Dropdown / Popper */
  --el-popper-border-color: rgba(0, 212, 255, 0.2);

  /* Mask */
  --el-mask-color: rgba(0, 0, 0, 0.7);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.4);

  /* Box shadow */
  --el-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --el-box-shadow-light: 0 2px 14px rgba(0, 0, 0, 0.4);
  --el-box-shadow-lighter: 0 1px 8px rgba(0, 0, 0, 0.3);
  --el-box-shadow-dark: 0 6px 28px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* Extra overrides for specific EP components that need help */
html.dark .el-input__wrapper,
html.dark .el-textarea__inner {
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2) inset;
}
html.dark .el-input__wrapper:hover,
html.dark .el-textarea__inner:hover {
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.4) inset;
}
html.dark .el-input__wrapper.is-focus,
html.dark .el-textarea__inner:focus {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset, 0 0 8px rgba(0, 212, 255, 0.15);
}
html.dark .el-select .el-input__wrapper {
  background-color: rgba(255, 255, 255, 0.05);
}
html.dark .el-input-number {
  --el-input-bg-color: rgba(255, 255, 255, 0.05);
}
html.dark .el-input-number .el-input-number__decrease,
html.dark .el-input-number .el-input-number__increase {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 212, 255, 0.2);
  color: var(--text-secondary);
}
html.dark .el-input-number .el-input-number__decrease:hover,
html.dark .el-input-number .el-input-number__increase:hover {
  color: var(--el-color-primary);
}
html.dark .el-select-dropdown {
  background-color: #0a1e3a;
  border: 1px solid rgba(0, 212, 255, 0.2);
}
html.dark .el-select-dropdown__item {
  color: #b0ccdf;
}
html.dark .el-select-dropdown__item.hover,
html.dark .el-select-dropdown__item:hover {
  background-color: rgba(0, 212, 255, 0.1);
}
html.dark .el-select-dropdown__item.selected {
  color: var(--el-color-primary);
}
html.dark .el-tag {
  --el-tag-bg-color: rgba(0, 212, 255, 0.15);
  --el-tag-border-color: rgba(0, 212, 255, 0.3);
  --el-tag-text-color: #4dd4ff;
}
html.dark .el-tag .el-tag__close {
  color: #4dd4ff;
}
html.dark .el-tag .el-tag__close:hover {
  background-color: rgba(0, 212, 255, 0.3);
  color: #fff;
}
html.dark .el-switch {
  --el-switch-off-color: rgba(255, 255, 255, 0.15);
}
html.dark .el-checkbox__inner {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.3);
}
html.dark .el-card {
  --el-card-bg-color: rgba(13, 33, 55, 0.7);
  --el-card-border-color: rgba(0, 212, 255, 0.15);
}
html.dark .el-dialog {
  background: #0a1e3a;
  border: 1px solid rgba(0, 212, 255, 0.2);
}
/* el-drawer background consolidated at line ~2203 */
html.dark .el-progress__text {
  color: var(--text-secondary);
}
html.dark .el-tabs__item {
  color: var(--text-secondary);
}
html.dark .el-tabs__item.is-active {
  color: var(--el-color-primary);
}
html.dark .el-message-box {
  background: #0a1e3a;
  border: 1px solid rgba(0, 212, 255, 0.2);
}
html.dark .el-popconfirm {
  --el-popover-bg-color: #0a1e3a;
  --el-popover-border-color: rgba(0, 212, 255, 0.2);
}
html.dark .el-button--default:not(.is-plain) {
  --el-button-bg-color: rgba(255, 255, 255, 0.06);
  --el-button-border-color: rgba(0, 212, 255, 0.2);
  --el-button-text-color: #b0ccdf;
  --el-button-hover-bg-color: rgba(255, 255, 255, 0.1);
  --el-button-hover-border-color: rgba(0, 212, 255, 0.4);
  --el-button-hover-text-color: #e4efff;
}

/* ========== Global Reset ========== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: var(--font-family);
  color: var(--text-primary);
  min-width: 1200px;
  overflow-x: auto;
  /* BI 大屏背景：网格纹理 + 环境光斑 + 深蓝渐变 */
  background:
    linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px),
    radial-gradient(ellipse 800px 500px at 10% 15%, rgba(0,80,180,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 90% 85%, rgba(0,120,220,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(0,180,255,0.03) 0%, transparent 60%),
    linear-gradient(180deg, #030b1a 0%, #05112a 40%, #071426 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

#app {
  min-height: 100vh;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.5);
}

/* ========== Glass Card with Corner Decorations ========== */
.glass-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  transition: var(--transition);
}
/* 四角角标 — BI 大屏标志性装饰 */
.glass-card::before,
.glass-card::after {
  content: '';
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  border-color: var(--corner-color);
  border-style: solid;
  z-index: 2;
  transition: border-color 0.3s;
  pointer-events: none;
}
.glass-card::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.glass-card::after {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0;
}

.glass-card:hover {
  border-color: var(--border-glow-strong);
  box-shadow: var(--shadow-card), var(--shadow-glow-strong);
}
.glass-card:hover::before,
.glass-card:hover::after {
  border-color: var(--corner-color-hover);
}

/* ========== Element Plus Deep Dark Overrides ========== */
.el-card {
  position: relative;
  background: var(--bg-card) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card), var(--shadow-glow) !important;
  color: var(--text-primary) !important;
}
.el-card__header {
  border-bottom: 1px solid var(--border-glow) !important;
  color: var(--text-primary) !important;
  padding: 14px 20px !important;
  font-weight: 600;
}
.el-card__body {
  color: var(--text-primary) !important;
}

.el-table {
  --el-table-bg-color: transparent !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-header-bg-color: rgba(0, 212, 255, 0.08) !important;
  --el-table-row-hover-bg-color: rgba(0, 212, 255, 0.06) !important;
  --el-table-border-color: var(--border-glow) !important;
  --el-table-text-color: var(--text-primary) !important;
  --el-table-header-text-color: var(--text-secondary) !important;
}
.el-table__empty-text {
  color: var(--text-muted) !important;
}

.el-input__wrapper {
  background-color: rgba(4, 14, 30, 0.6) !important;
  box-shadow: 0 0 0 1px var(--border-glow) inset !important;
  border-radius: var(--radius-sm) !important;
}
.el-input__wrapper:hover {
  box-shadow: 0 0 0 1px var(--border-glow-strong) inset !important;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--color-primary) inset !important;
}
.el-input__inner {
  color: var(--text-primary) !important;
}
.el-input__inner::placeholder {
  color: var(--text-muted) !important;
}
.el-textarea__inner {
  background-color: rgba(4, 14, 30, 0.6) !important;
  border-color: var(--border-glow) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}

.el-select .el-input__wrapper {
  background-color: rgba(4, 14, 30, 0.6) !important;
}
.el-select-dropdown {
  background-color: #071426 !important;
  border-color: var(--border-glow) !important;
}
.el-select-dropdown__item {
  color: var(--text-primary) !important;
}
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  background-color: rgba(0, 212, 255, 0.1) !important;
}
.el-select-dropdown__item.selected {
  color: var(--color-primary) !important;
}

.el-form-item__label {
  color: var(--text-secondary) !important;
}

.el-dialog {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
}
.el-dialog__title {
  color: var(--text-primary) !important;
}
.el-dialog__header {
  border-bottom: 1px solid var(--border-glow) !important;
}

/* el-drawer styles consolidated at line ~2201 */
.el-drawer__header {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-glow) !important;
  margin-bottom: 0 !important;
  padding: 16px 20px !important;
}
.el-drawer__body {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
}

.el-tabs__header {
  margin: 0 !important;
}
.el-tabs__item {
  color: var(--text-secondary) !important;
}
.el-tabs__item.is-active {
  color: var(--color-primary) !important;
}
.el-tabs__active-bar {
  background-color: var(--color-primary) !important;
}
.el-tabs__nav-wrap::after {
  background-color: var(--border-glow) !important;
}

.el-tag {
  border-radius: 4px !important;
}

.el-button--primary {
  --el-button-bg-color: var(--color-primary) !important;
  --el-button-border-color: var(--color-primary) !important;
  --el-button-hover-bg-color: #33c4ff !important;
  --el-button-hover-border-color: #33c4ff !important;
}

.el-message-box {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-glow) !important;
}
.el-message-box__title {
  color: var(--text-primary) !important;
}
.el-message-box__content {
  color: var(--text-secondary) !important;
}

.el-popconfirm {
  background-color: var(--bg-secondary) !important;
}

.el-loading-mask {
  background-color: rgba(4, 14, 30, 0.7) !important;
}

.el-tree {
  background: transparent !important;
  color: var(--text-primary) !important;
}
.el-tree-node__content:hover {
  background-color: rgba(0, 212, 255, 0.1) !important;
}
.el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(0, 212, 255, 0.15) !important;
}

/* ========== Navbar — BI 大屏科技感导航 ========== */
/* ========== Navbar — Quick BI Header Style ========== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 20px;
  background: #000000;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(0,180,255,0.2) 25%, rgba(0,180,255,0.35) 50%, rgba(0,180,255,0.2) 75%, transparent 98%);
  pointer-events: none;
}

/* Nav text links (left & right of center) */
.nav-left-text, .nav-right-text {
  display: flex;
  gap: 4px;
  position: relative;
  flex-shrink: 0;
}
.nav-highlight {
  position: absolute;
  top: 0; left: 0;
  border-radius: 3px;
  background: rgba(0, 180, 255, 0.08);
  border: 1px solid rgba(0, 180, 255, 0.18);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
  pointer-events: none;
  z-index: 0;
}
.nav-left-text a, .nav-right-text a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.nav-left-text a:hover, .nav-right-text a:hover {
  color: var(--text-primary);
}
.nav-left-text a.router-link-active, .nav-right-text a.router-link-active {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 180, 255, 0.4);
}

/* Decorative SVG lines */
.nav-decor {
  flex: 1;
  height: 40px;
  min-width: 60px;
  max-width: 220px;
  display: flex;
  align-items: center;
}
.nav-decor-svg {
  width: 100%;
  height: 100%;
}
.nav-decor-flip {
  transform: scaleX(-1);
}

/* Center brand — horizontal layout with separator */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 0 12px;
}
.nav-brand-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 180, 255, 0.3);
}
.nav-brand-sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.2);
}
.nav-brand-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 2px;
  font-weight: 400;
}

/* Time display — absolute right */
.nav-time {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-time .time-display {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

/* ========== Page Transition ========== */
.page-fade-enter-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.page-fade-leave-active {
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.page-fade-enter-from {
  opacity: 0;
  transform: translateY(6px);
}
.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-3px);
}

/* ========== Page Layout ========== */
.page-container {
  padding: 10px 12px 36px; /* 36px bottom for fixed status footer */
  max-width: 100%;
  margin: 0;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, var(--glow-cyan), transparent);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

/* ========== Stat Cards (Top Row) — BI 大屏 KPI 卡片 ========== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 12px;
}

/* ===== KPI Cards (Quick BI style) ===== */
.kpi-card {
  background: rgba(20, 28, 42, 0.9);
  border-radius: 8px;
  padding: 16px 20px 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: default;
  border: 1px solid rgba(255,255,255,0.04);
}
/* Top gradient accent bar */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 8px 8px 0 0;
}
.kpi-green::before { background: linear-gradient(90deg, #00e5a0, #00b880); }
.kpi-blue::before { background: linear-gradient(90deg, #00b8ff, #0088cc); }
.kpi-amber::before { background: linear-gradient(90deg, #d4a04a, #b8862e); }
.kpi-red::before { background: linear-gradient(90deg, #ff6b81, #e84057); }

/* Warm inner glow at top */
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 40px;
  pointer-events: none;
}
.kpi-green::after { background: radial-gradient(ellipse at top, rgba(0,229,160,0.08), transparent); }
.kpi-blue::after { background: radial-gradient(ellipse at top, rgba(0,184,255,0.08), transparent); }
.kpi-amber::after { background: radial-gradient(ellipse at top, rgba(212,160,74,0.1), transparent); }
.kpi-red::after { background: radial-gradient(ellipse at top, rgba(255,107,129,0.08), transparent); }

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Header: icon + title */
.kpi-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.kpi-green .kpi-icon { background: rgba(0,229,160,0.15); color: #00e5a0; }
.kpi-blue .kpi-icon { background: rgba(0,184,255,0.15); color: #00b8ff; }
.kpi-amber .kpi-icon { background: rgba(212,160,74,0.15); color: #d4a04a; }
.kpi-red .kpi-icon { background: rgba(255,107,129,0.15); color: #ff6b81; }

.kpi-title {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Main number */
.kpi-number {
  font-family: var(--font-din);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

/* Footer: comparison metrics */
.kpi-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 8px;
}
.kpi-meta { color: var(--text-muted); }
.kpi-trend { font-weight: 500; }
.kpi-trend.trend-up { color: var(--color-success); }
.kpi-trend.trend-down { color: var(--color-danger); }
.kpi-trend.trend-stable { color: var(--text-muted); }

/* ========== Dashboard Main Layout (KPI sides + Architecture center) ========== */
.dash-main-layout {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.kpi-side {
  display: flex;
  flex-direction: column;
  width: 140px;
  flex-shrink: 0;
  justify-content: flex-start;
  padding-top: 8px;
}
.kpi-side-panel {
  background: rgba(20, 28, 42, 0.9);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}
.kpi-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kpi-row:last-child {
  border-bottom: none;
}
.kpi-row-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.kpi-row-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 1;
}
.kpi-row-value {
  font-family: var(--font-din);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ========== Architecture Diagram ========== */
.arch-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 160px);
  min-height: 500px;
  flex: 1;
  background:
    linear-gradient(rgba(0,212,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.015) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(0,100,200,0.04) 0%, transparent 60%),
    var(--bg-card);
  background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  padding: 0;
}
/* 架构图四角角标 */
.arch-container::before,
.arch-container::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--corner-color);
  border-style: solid;
  z-index: 5;
  pointer-events: none;
}
.arch-container::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.arch-container::after {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0;
}

.arch-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;  /* Above arch-node (z-index:2) so connections render on top */
}
.arch-svg line,
.arch-svg path {
  /* stroke/stroke-width set per-element by JS based on connection type */
  fill: none;
}
.arch-svg .arrow-head {
  fill: rgba(0, 212, 255, 0.4);
  stroke: none;
}

/* Connection dash animation */
@keyframes flow-dash {
  to { stroke-dashoffset: -12; }
}

/* Flow particles - type-based coloring */
.flow-particle {
  r: 3;
  fill: var(--color-primary);
  filter: drop-shadow(0 0 4px var(--color-primary));
  transition: opacity 0.3s ease;
}
.flow-particle-data {
  fill: #00b8ff;
  filter: drop-shadow(0 0 5px #00b8ff);
}
.flow-particle-cookie {
  fill: #00e5a0;
  filter: drop-shadow(0 0 5px #00e5a0);
}
.flow-particle-request {
  fill: #ffaa2c;
  filter: drop-shadow(0 0 5px #ffaa2c);
}

.arch-node {
  position: absolute;
  width: 140px;
  height: 55px;
  transform: translateX(-50%);
  border-radius: var(--radius);
  background: rgba(4, 14, 30, 0.85);
  border: 1px solid var(--border-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
  user-select: none;
}
.arch-node:hover {
  transform: translateX(-50%) scale(1.08);
  z-index: 10;
  border-color: var(--border-glow-strong);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.3), inset 0 0 12px rgba(0, 212, 255, 0.05);
}

/* Hovered node - extra glow */
.arch-node.node-hovered {
  transform: translateX(-50%) scale(1.12);
  z-index: 10;
  box-shadow: 0 0 35px rgba(0, 212, 255, 0.45), inset 0 0 15px rgba(0, 212, 255, 0.08);
  border-color: var(--glow-cyan);
}

.arch-node .node-name-zh {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.arch-node .node-name-en {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 1px;
}
.arch-node .node-status-dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-info);
}
.arch-node .node-failure-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(245,108,108,0.5);
  z-index: 5;
}
.arch-node .node-status-dot.running {
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
  animation: pulse-green 2s infinite;
}
.arch-node .node-status-dot.error {
  background: var(--color-danger);
  box-shadow: 0 0 8px var(--color-danger);
  animation: pulse-red 1s infinite;
}
.arch-node .node-status-dot.stopped {
  background: var(--color-info);
}

/* Running nodes - breathing glow */
.arch-node.status-running {
  border-color: rgba(0, 229, 160, 0.4);
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 160, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 229, 160, 0.45); }
}

/* Error nodes - red flash */
.arch-node.status-error {
  border-color: rgba(255, 77, 106, 0.5);
  animation: border-pulse-red 1.5s infinite;
}
.arch-node.status-stopped {
  border-color: rgba(91, 140, 168, 0.3);
  opacity: 0.6;
}

/* Blast radius - dimmed */
.node-dimmed {
  opacity: 0.15 !important;
  filter: grayscale(0.8);
  transition: all 0.3s ease;
}

/* Blast radius - upstream highlight */
.node-upstream {
  box-shadow: 0 0 20px rgba(255, 170, 44, 0.6) !important;
  border-color: rgba(255, 170, 44, 0.8) !important;
  opacity: 1 !important;
}

/* Blast radius - downstream highlight */
.node-downstream {
  box-shadow: 0 0 20px rgba(255, 77, 106, 0.6) !important;
  border-color: rgba(255, 77, 106, 0.8) !important;
  opacity: 1 !important;
}

/* Node operation overlay (loading / success / failed) */
.node-op-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  z-index: 15;
  pointer-events: none;
  animation: op-fade-in 0.2s ease;
}
@keyframes op-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.node-op-overlay.node-op-loading {
  background: rgba(4, 14, 30, 0.85);
}
.node-op-overlay.node-op-success {
  background: rgba(0, 229, 160, 0.2);
}
.node-op-overlay.node-op-failed {
  background: rgba(255, 77, 106, 0.2);
}
.node-op-spinner {
  animation: spin 1s linear infinite;
  color: var(--color-primary);
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.node-op-icon {
  font-size: 16px;
  line-height: 1;
}
.node-op-success .node-op-icon {
  color: var(--color-success);
}
.node-op-failed .node-op-icon {
  color: var(--color-danger);
}
.node-op-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Success flash on node border */
.arch-node.node-op-success {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 16px rgba(0, 229, 160, 0.5) !important;
}
.arch-node.node-op-failed {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 16px rgba(255, 77, 106, 0.5) !important;
}

/* Inline action buttons inside node card */
.node-inline-actions {
  position: absolute;
  bottom: 3px;
  right: 4px;
  display: flex;
  gap: 3px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.arch-node:hover .node-inline-actions {
  opacity: 1;
}
.node-ibtn {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  color: #fff;
  opacity: 0.7;
}
.node-ibtn:hover {
  opacity: 1;
  transform: scale(1.2);
}
.node-ibtn-stop {
  background: rgba(255, 77, 106, 0.9);
}
.node-ibtn-stop:hover {
  box-shadow: 0 0 6px rgba(255, 77, 106, 0.7);
}
.node-ibtn-start {
  background: rgba(0, 229, 160, 0.9);
}
.node-ibtn-start:hover {
  box-shadow: 0 0 6px rgba(0, 229, 160, 0.7);
}
.node-ibtn-restart {
  background: rgba(255, 170, 44, 0.9);
}
.node-ibtn-restart:hover {
  box-shadow: 0 0 6px rgba(255, 170, 44, 0.7);
}

/* Infrastructure nodes */
.arch-node.infra-node {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.2);
  border-style: dashed;
}

/* Node hover tooltip */
.node-tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4, 14, 30, 0.95);
  border: 1px solid var(--border-glow-strong);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: tooltip-fade-in 0.2s ease;
}
@keyframes tooltip-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ========== Service Drawer — unified layout system ========== */
/*
 * Layout hierarchy inside el-drawer:
 *   .el-drawer__body          → flex column (set via CSS override)
 *     .drawer-custom-header   → fixed height 48px, flex-shrink:0
 *     .drawer-tabs / .redis-panel / .pg-panel  → flex:1, fills remaining
 *       el-tabs               → inherits flex column from parent
 *         .el-tabs__header    → fixed, flex-shrink:0
 *         .el-tabs__content   → flex:1
 *           el-tab-pane       → height:100%
 *             .drawer-tab-pane  → overflow-y:auto, scrollable content
 */

/* 1. All drawer panel wrappers: flex:1 fill below header */
.drawer-tabs,
.redis-panel,
.pg-panel {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Drawer split layout: 80% workflow + 20% other tabs */
.drawer-split-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.drawer-split-left {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.drawer-split-left .wf-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer-split-left .wf-canvas-container {
  flex: 1;
  height: auto !important;
  min-height: 0;
  overflow: auto;
}
.drawer-split-left .wf-canvas-inner {
  position: relative;
  min-height: 100%;
}
/* Drawer split resize handle (vertical bar) */
.drawer-split-handle {
  flex-shrink: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  border-left: 1px solid var(--border-glow);
  transition: background 0.2s;
  position: relative;
}
.drawer-split-handle:hover,
.drawer-split-handle:active {
  background: rgba(0, 212, 255, 0.15);
  border-left-color: rgba(0, 212, 255, 0.4);
}
.drawer-split-right {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.drawer-split-right .el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.drawer-split-right .el-tabs__header {
  margin: 0;
  padding: 0 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-glow);
}
.drawer-split-right .el-tabs__item {
  height: 34px;
  line-height: 34px;
  font-size: 12px;
  padding: 0 10px;
}
.drawer-split-right .el-tabs__content {
  flex: 1;
  overflow: hidden;
}
.drawer-split-right .el-tab-pane {
  height: 100%;
}
.drawer-split-right .drawer-tab-pane {
  height: 100%;
  overflow-y: auto;
  padding: 10px 12px 30px;
}
.drawer-split-right .drawer-log-pane {
  padding-bottom: 8px;
}
.drawer-split-right .drawer-log-terminal {
  font-size: 11px;
  line-height: 1.5;
}
.drawer-split-right .env-var-item {
  flex-direction: column;
  gap: 4px;
}
.drawer-split-right .env-var-key {
  min-width: unset;
  font-size: 11px;
}
.drawer-split-right .log-toolbar {
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
}

/* 2. All el-tabs inside drawer inherit flex column */
.drawer-tabs > .el-tabs,
.redis-panel > .el-tabs,
.pg-panel > .el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 3. Tab header: fixed, not scrollable */
.drawer-tabs .el-tabs__header,
.redis-panel .el-tabs__header,
.pg-panel .el-tabs__header {
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.12);
  flex-shrink: 0;
}
.drawer-tabs .el-tabs__item,
.redis-panel .el-tabs__item,
.pg-panel .el-tabs__item {
  height: 38px;
  line-height: 38px;
  font-size: 13px;
  padding: 0 16px;
}

/* 4. Tab content area: flex:1, fill remaining */
.drawer-tabs .el-tabs__content,
.redis-panel .el-tabs__content,
.pg-panel .el-tabs__content {
  flex: 1;
  overflow: hidden;
}

/* 5. Individual tab pane: fill parent and handle its own scrolling */
.drawer-tabs .el-tab-pane,
.redis-panel .el-tab-pane,
.pg-panel .el-tab-pane {
  height: 100%;
}

/* 6. Tab pane inner content: scrollable area with padding */
.drawer-tab-pane {
  height: 100%;
  overflow-y: auto;
  padding: 16px 20px 40px; /* 40px bottom to ensure nothing is cut off */
}

/* 7. Log pane special: flex column so terminal fills remaining */
.drawer-log-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 8px;
}

/* 8. Log terminal: flex:1 fills the log pane */
.drawer-log-terminal {
  background: #040d18;
  color: #b0ccdf;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  padding: 12px 12px 32px;
  border-radius: var(--radius-sm);
  flex: 1;
  min-height: 0; /* critical for flex overflow to work */
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid rgba(0, 212, 255, 0.12);
}

/* Drawer env var list */
.env-var-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.env-var-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(4, 14, 30, 0.5);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm);
}
.env-var-key {
  min-width: 160px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.env-var-type {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0,212,255,0.1);
  color: var(--color-primary);
  font-family: var(--font-mono);
}
.env-var-value {
  flex: 1;
}

/* ========== Pod Management Page ========== */
.pod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.pod-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: var(--transition);
  position: relative;
}
.pod-card:hover {
  border-color: var(--border-glow-strong);
  box-shadow: var(--shadow-card), 0 0 20px rgba(0, 212, 255, 0.12);
}

.pod-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.pod-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.pod-card-en-name {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.pod-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}
.pod-card-field {
  color: var(--text-secondary);
}
.pod-card-field span {
  color: var(--text-primary);
  font-weight: 500;
}

.pod-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
}

/* ========== Config Page ========== */
.config-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.config-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-glow);
}

.config-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(4, 14, 30, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.config-item:hover {
  border-color: var(--border-glow);
  background: rgba(4, 14, 30, 0.6);
}
.config-item-label {
  min-width: 150px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
  font-weight: 500;
}
.config-item-value {
  flex: 1;
}

/* ========== Log Monitor Page ========== */
.log-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  height: calc(100vh - 120px);
}

.log-sidebar {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  padding: 12px;
  overflow-y: auto;
}
.log-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-glow);
}

.log-pod-item {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.log-pod-item:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--text-primary);
}
.log-pod-item.active {
  background: rgba(0, 212, 255, 0.15);
  color: var(--color-primary);
}
.log-pod-item .pod-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

.log-group-label {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 10px 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.log-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.log-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
}

.log-terminal {
  background: #040d18;
  color: #b0ccdf;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 212, 255, 0.15);
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.log-terminal .log-line {
  padding: 1px 0;
}
.log-terminal .log-line.error-line {
  color: #ff6b82;
  background: rgba(255, 77, 106, 0.08);
}
.log-terminal .log-line.warn-line {
  color: #ffaa2c;
  background: rgba(255, 170, 44, 0.06);
}
.log-terminal .log-line.info-line {
  color: #4dd4ff;
}
.log-terminal .log-line.search-highlight {
  background: rgba(0, 212, 255, 0.2);
}

.log-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 15px;
}

/* ========== Scheduler Page ========== */
.sched-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sched-header .page-title { margin-bottom: 0; }
.sched-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.sched-status-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sched-status-badge.s-idle     { background: rgba(144,147,153,0.15); color: #7eb8e0; }
.sched-status-badge.s-idle .dot { background: #5b8ca8; }
.sched-status-badge.s-running  { background: rgba(103,194,58,0.15); color: #33edb8; }
.sched-status-badge.s-running .dot { background: #00e5a0; animation: pulse-green 1.5s infinite; }
.sched-status-badge.s-paused   { background: rgba(230,162,60,0.15); color: #ffc266; }
.sched-status-badge.s-paused .dot { background: #ffaa2c; }
.sched-status-badge.s-completed { background: rgba(0,212,255,0.15); color: #4dd4ff; }
.sched-status-badge.s-completed .dot { background: #00b8ff; }
.sched-status-badge.s-generating { background: rgba(230,162,60,0.15); color: #ffc266; }
.sched-status-badge.s-generating .dot { background: #ffaa2c; animation: pulse-green 1s infinite; }

/* KPI row: ring + cards */
.sched-kpi-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}
.sched-kpi-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
}
.sched-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}
.sched-ring-svg {
  width: 80px;
  height: 80px;
}
.sched-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sched-ring-pct {
  font-size: 20px;
  font-weight: 700;
  color: #4dd4ff;
  font-variant-numeric: tabular-nums;
}
.sched-ring-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.sched-kpi-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Legacy compat */
.scheduler-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

/* Toggle icon */
.sched-toggle-icon {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  display: inline-block;
}
.sched-toggle-icon.expanded {
  transform: rotate(180deg);
}

/* Empty state */
.sched-empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scheduler-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* Config panel */
.sched-section {
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.sched-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,212,255,0.12);
  background: rgba(0,212,255,0.04);
}
.sched-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sched-section-title::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--glow-cyan), transparent);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
}
.sched-section-body {
  padding: 20px;
}

/* Config form rows */
.sched-form-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sched-form-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.sched-form-label {
  min-width: 80px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding-top: 6px;
  flex-shrink: 0;
}
.sched-form-content {
  flex: 1;
  min-width: 0;
}
.sched-form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Inline param group */
.sched-params {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.sched-param-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sched-param-item label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Task type chips */
.sched-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sched-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  user-select: none;
}
.sched-chip:hover {
  border-color: rgba(0,212,255,0.4);
  background: rgba(0,212,255,0.08);
}
.sched-chip.active {
  border-color: rgba(0,212,255,0.6);
  background: rgba(0,212,255,0.15);
  color: #4dd4ff;
  box-shadow: 0 0 8px rgba(0,212,255,0.15);
}
.sched-chip-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.sched-chip-actions a {
  font-size: 11px;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
}
.sched-chip-actions a:hover { text-decoration: underline; }

/* Order-by grid */
.sched-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.sched-order-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(4, 14, 30, 0.4);
  border: 1px solid rgba(255,255,255,0.06);
}
.sched-order-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 32px;
}

/* Server expand arrow */
.srv-expand-arrow {
  display: inline-block;
  font-size: 10px;
  margin-right: 4px;
  transition: transform 0.2s;
  color: var(--text-muted);
}
.srv-expand-arrow.rotated {
  transform: rotate(90deg);
}
.server-progress-item.srv-expanded {
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.04);
}

/* Server detail panel */
.srv-detail-panel {
  padding: 12px 16px 12px 32px;
  background: rgba(4, 14, 30, 0.5);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-top: -1px;
  margin-bottom: 8px;
  animation: srv-detail-in 0.2s ease;
}
@keyframes srv-detail-in {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 200px; }
}
.srv-detail-summary {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.srv-detail-summary b {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.srv-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}
.srv-detail-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.srv-type-name {
  min-width: 32px;
  color: var(--text-secondary);
  font-weight: 500;
}
.srv-type-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.srv-type-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary);
  transition: width 0.3s;
}
.srv-type-count {
  min-width: 30px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Progress list */
.server-progress-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.server-progress-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(4, 14, 30, 0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}
.server-progress-item:hover {
  background: rgba(4, 14, 30, 0.6);
}
.server-progress-name {
  min-width: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.server-progress-bar {
  flex: 1;
}
.server-progress-status {
  min-width: 60px;
  text-align: right;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ========== Login Page ========== */
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    linear-gradient(rgba(0,212,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.02) 1px, transparent 1px),
    radial-gradient(ellipse 600px 400px at 30% 30%, rgba(0,80,180,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 500px 300px at 70% 70%, rgba(0,150,255,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #030b1a 0%, #05112a 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%;
  position: relative;
  overflow: hidden;
}

.login-bg-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.login-bg-particles .particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.2);
  animation: float-particle linear infinite;
}

.login-card-wrapper {
  position: relative;
  z-index: 1;
  width: 420px;
  padding: 48px 36px;
  background: var(--bg-card);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: var(--radius);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 212, 255, 0.1);
}
/* 登录卡片大角标 */
.login-card-wrapper::before,
.login-card-wrapper::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--glow-cyan);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}
.login-card-wrapper::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.login-card-wrapper::after {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0;
}

.login-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #ffffff 20%, var(--glow-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.4));
}
.login-subtitle {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 36px;
  letter-spacing: 2px;
}

/* ========== Animations ========== */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 4px var(--color-success); }
  50% { box-shadow: 0 0 12px var(--color-success); }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 4px var(--color-danger); }
  50% { box-shadow: 0 0 12px var(--color-danger); }
}

@keyframes border-pulse-red {
  0%, 100% { border-color: rgba(255, 77, 106, 0.3); }
  50% { border-color: rgba(255, 77, 106, 0.7); }
}

@keyframes float-particle {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}


@keyframes slide-in-right {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out;
}
.animate-slide-in {
  animation: slide-in-right 0.4s ease-out;
}

/* 底部角标 — 通过额外 class */
.corner-bottom-left,
.corner-bottom-right {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  border-color: var(--corner-color);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
  transition: border-color 0.3s;
}
.corner-bottom-left {
  bottom: -1px; left: -1px;
  border-width: 0 0 2px 2px;
}
.corner-bottom-right {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}
/* ========== Responsive ========== */
@media (max-width: 1400px) {
  .arch-container {
    min-height: 680px;
  }
  .arch-node {
    width: 140px;
    height: 54px;
  }
  .arch-node .node-name-zh { font-size: 12px; }
  .arch-node .node-name-en { font-size: 9px; }
}

@media (max-width: 1200px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .config-layout {
    grid-template-columns: 1fr;
  }
  .log-layout {
    grid-template-columns: 200px 1fr;
  }
}

/* Drawer resize handle */
.drawer-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.2s;
}
.drawer-resize-handle:hover,
.drawer-resize-handle:active {
  background: rgba(0, 212, 255, 0.5);
}
/* Drawer body layout consolidated at .el-drawer__body above */
.drawer-custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  height: 48px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
  flex-shrink: 0;
  background: rgba(3, 8, 18, 0.7);
}
.drawer-custom-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--glow-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
/* Override Element Plus drawer background */
.el-drawer {
  background: #051220 !important;
  border-left: 1px solid rgba(0, 212, 255, 0.25) !important;
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.5), -1px 0 0 rgba(0, 212, 255, 0.2) !important;
}
/* Drawer 左边发光线 */
.el-drawer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--glow-cyan) 30%, var(--glow-cyan) 70%, transparent 100%);
  opacity: 0.4;
  z-index: 1;
  pointer-events: none;
}

/* Fix Element Plus tag text visibility in dark theme */
.el-tag--success {
  background: rgba(0, 229, 160, 0.15) !important;
  border-color: rgba(0, 229, 160, 0.4) !important;
  color: #00e5a0 !important;
}
.el-tag--warning {
  background: rgba(255, 170, 44, 0.15) !important;
  border-color: rgba(255, 170, 44, 0.4) !important;
  color: #ffaa2c !important;
}
.el-tag--danger {
  background: rgba(255, 77, 106, 0.15) !important;
  border-color: rgba(255, 77, 106, 0.4) !important;
  color: #ff4d6a !important;
}
.el-tag--info {
  background: rgba(91, 140, 168, 0.15) !important;
  border-color: rgba(91, 140, 168, 0.4) !important;
  color: #7eb8e0 !important;
}
.el-tag--primary {
  background: rgba(0, 212, 255, 0.15) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  color: #00b8ff !important;
}

/* Architecture legend */
.arch-legend {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  padding: 6px 18px;
  background: rgba(4, 14, 30, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  border-radius: 12px;
  z-index: 5;
  max-width: 90%;
}
.legend-section {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend-title {
  color: var(--text-muted);
  font-size: 11px;
  margin-right: 2px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.footer-right .legend-dot {
  width: 6px;
  height: 6px;
}
.footer-right .legend-section {
  gap: 6px;
}
.footer-right .legend-item {
  font-size: 10px;
  gap: 3px;
}
.footer-right .legend-title {
  font-size: 10px;
}

/* ========== Redis Panel ========== */
.redis-panel {
  padding: 0 12px 12px;
}
.redis-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.redis-info-item {
  background: rgba(0, 212, 255, 0.08);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.12);
}
.redis-info-label {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.redis-info-value {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}
.redis-key-detail {
  background: rgba(13, 31, 56, 0.8);
  border: 1px solid var(--border-glow);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
}
.redis-key-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #00e5a0;
  word-break: break-all;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}
.redis-queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  transition: background 0.2s;
}
.redis-queue-item:hover {
  background: rgba(0, 212, 255, 0.05);
}
.redis-key-row {
  cursor: pointer;
}
.redis-panel .el-table {
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: rgba(0, 212, 255, 0.08);
  --el-table-row-hover-bg-color: rgba(0, 212, 255, 0.1);
  --el-table-text-color: var(--text-primary);
  --el-table-header-text-color: var(--text-secondary);
  --el-table-border-color: rgba(0, 212, 255, 0.1);
  --el-table-current-row-bg-color: rgba(0, 212, 255, 0.15);
}

/* ========== PostgreSQL Panel ========== */
.pg-panel {
  padding: 0 12px 12px;
}
.pg-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pg-info-item {
  background: rgba(0, 229, 160, 0.08);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(0, 229, 160, 0.15);
}
.pg-info-label {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.pg-info-value {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}
.pg-sql-editor .el-textarea__inner {
  font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace !important;
  background: #040d18 !important;
  color: #b0ccdf !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: 8px !important;
}
.pg-query-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--text-muted);
  font-size: 13px;
}
.pg-quick-queries {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pg-table-schema {
  margin: 8px 0;
}
.pg-result-table {
  width: 100%;
  overflow-x: auto;
}
.pg-table-row {
  cursor: pointer;
}
.pg-panel .el-table {
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: rgba(0, 229, 160, 0.08);
  --el-table-row-hover-bg-color: rgba(0, 229, 160, 0.06);
  --el-table-text-color: var(--text-primary);
  --el-table-header-text-color: var(--text-secondary);
  --el-table-border-color: rgba(0, 229, 160, 0.15);
  --el-table-current-row-bg-color: rgba(0, 229, 160, 0.12);
}

/* Element Plus dark theme overrides for dropdowns/popper */
.el-popper, .el-select-dropdown, .el-dropdown-menu {
  background: var(--bg-card, #0d1b2a) !important;
  border-color: var(--border-glow, rgba(0,212,255,0.2)) !important;
  color: var(--text-primary, #e4efff) !important;
}
.el-select-dropdown__item {
  color: var(--text-primary, #e4efff) !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: rgba(0, 212, 255, 0.15) !important;
  color: #00b8ff !important;
}
.el-select-dropdown__item.is-selected, .el-select-dropdown__item.selected {
  color: #00b8ff !important;
  font-weight: 600;
}
.el-popper__arrow::before {
  background: var(--bg-card, #0d1b2a) !important;
  border-color: var(--border-glow, rgba(0,212,255,0.25)) !important;
}
.el-select-dropdown__empty {
  color: var(--text-muted, #5a6f8a) !important;
}
.el-checkbox__label {
  color: var(--text-secondary, #8fa3b8) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #00b8ff !important;
}
.el-select__tags .el-tag {
  background: rgba(0,212,255,0.15) !important;
  border-color: rgba(0,212,255,0.3) !important;
  color: #00b8ff !important;
}

/* ========== Workflow Full-Canvas View ========== */
.wf-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  margin-bottom: 10px;
  gap: 12px;
}
.wf-breadcrumb-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wf-back-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-glow);
  background: rgba(0, 212, 255, 0.08);
  color: var(--glow-cyan);
  border-radius: var(--radius);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.wf-back-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}
.wf-breadcrumb-path {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-bc-link {
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.wf-bc-link:hover {
  color: var(--glow-cyan);
}
.wf-bc-sep {
  color: var(--text-muted);
  opacity: 0.5;
}
.wf-bc-current {
  color: var(--text-primary);
  font-weight: 600;
}
.wf-breadcrumb-center {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wf-breadcrumb-right {
  display: flex;
  align-items: center;
}

/* Workflow full canvas container */
.wf-canvas-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 280px);
  min-height: 400px;
  background:
    linear-gradient(rgba(0,212,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.015) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 40%, rgba(0,100,200,0.04) 0%, transparent 60%),
    var(--bg-card);
  background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100%;
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card), var(--shadow-glow);
}
.wf-canvas-container::before,
.wf-canvas-container::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--corner-color);
  border-style: solid;
  z-index: 5;
  pointer-events: none;
}
.wf-canvas-container::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.wf-canvas-container::after {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0;
}
.wf-canvas-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Failure detail panel — bottom resizable */
.wf-detail-panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  border-top: 1px solid var(--border-glow);
  overflow: hidden;
}
.wf-detail-resize-handle {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  cursor: row-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.2s;
}
.wf-detail-resize-handle:hover,
.wf-detail-resize-handle:active {
  background: rgba(0, 212, 255, 0.15);
}
.wf-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-glow);
  background: rgba(4, 12, 28, 0.6);
}
.wf-detail-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
}
.wf-detail-left {
  border-right: 1px solid var(--border-glow);
  overflow-y: auto;
}
.wf-detail-right {
  overflow-y: auto;
  padding: 0 12px;
}
.wf-detail-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 12px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-detail-section-title::before {
  content: '';
  width: 2px;
  height: 10px;
  background: linear-gradient(180deg, var(--glow-cyan), transparent);
  border-radius: 1px;
}
.wf-failure-item-v2 {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.2s;
}
.wf-failure-item-v2:hover {
  background: rgba(0, 212, 255, 0.06);
}
.wf-failure-item-v2.active {
  background: rgba(0, 212, 255, 0.1);
  border-left: 2px solid var(--glow-cyan);
}
.wf-evidence-content {
  padding: 8px 0;
}
.wf-evidence-pre {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(4, 14, 30, 0.6);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm);
  padding: 8px;
  max-height: 150px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 4px;
}

/* Canvas zoom & drag */
.arch-canvas-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.arch-zoom-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(4, 14, 30, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  border-radius: 20px;
  z-index: 10;
}
.zoom-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.zoom-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  color: var(--color-primary);
}
.zoom-level {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 36px;
  text-align: center;
  user-select: none;
}

/* ============================================================
   Workflow Flow Diagram (inside drawer)
   ============================================================ */
/*
 * Workflow tab layout:
 *   wf-container (height:100%, overflow-y:auto) — single scrollable area
 *     wf-diagram (position:relative, computed height) — flow diagram
 *     wf-failure-panel — failure list (natural height)
 *       wf-evidence-viewer — screenshot + HTML source (natural height)
 */
.wf-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 40px;
}
.wf-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.wf-toolbar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf-toolbar-label::before {
  content: '';
  width: 3px;
  height: 12px;
  background: linear-gradient(180deg, var(--glow-cyan), transparent);
  border-radius: 1px;
}
.wf-toolbar-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.wf-diagram {
  position: relative;
  min-height: 320px;
  overflow: visible;
  background:
    radial-gradient(ellipse at center, rgba(0,212,255,0.03) 0%, transparent 60%),
    linear-gradient(rgba(0,212,255,0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.01) 1px, transparent 1px);
  background-size: 100% 100%, 30px 30px, 30px 30px;
  margin-bottom: 12px;
}
.wf-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.wf-step-node {
  position: absolute;
  width: 120px;
  height: 60px;
  transform: translateX(-50%);
  border-radius: var(--radius);
  background: rgba(4, 12, 28, 0.9);
  border: 1px solid var(--border-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease;
  user-select: none;
  gap: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 212, 255, 0.05);
}
/* 工作流节点角标 */
.wf-step-node::before,
.wf-step-node::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: rgba(0, 212, 255, 0.4);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
  transition: border-color 0.3s;
}
.wf-step-node::before {
  top: -1px; left: -1px;
  border-width: 1.5px 0 0 1.5px;
}
.wf-step-node::after {
  bottom: -1px; right: -1px;
  border-width: 0 1.5px 1.5px 0;
}
.wf-step-node:hover {
  transform: translateX(-50%) scale(1.08);
  z-index: 10;
  border-color: var(--glow-cyan);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.35), inset 0 0 10px rgba(0, 212, 255, 0.06);
}
.wf-step-node:hover::before,
.wf-step-node:hover::after {
  border-color: rgba(0, 212, 255, 0.8);
}
.wf-step-node.wf-step-selected {
  border-color: var(--glow-cyan);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.45), inset 0 0 12px rgba(0, 212, 255, 0.08);
  transform: translateX(-50%) scale(1.06);
}
.wf-step-node.wf-step-selected::before,
.wf-step-node.wf-step-selected::after {
  border-color: var(--glow-cyan);
}
.wf-step-node.has-failures {
  border-color: rgba(255, 77, 106, 0.5);
  animation: border-pulse-red 1.5s infinite;
}
.wf-step-node.has-failures::before,
.wf-step-node.has-failures::after {
  border-color: rgba(255, 77, 106, 0.6);
}
/* External labels are now rendered inline within step nodes (.wf-inline-ext). */
.wf-ext-input {
  background: rgba(0,229,160,0.12);
  border: 1px dashed rgba(0,229,160,0.4);
  color: rgba(0,229,160,0.9);
}
.wf-ext-output {
  background: rgba(255,140,0,0.12);
  border: 1px dashed rgba(255,140,0,0.4);
  color: rgba(255,140,0,0.9);
}
.wf-ext-icon {
  font-size: 10px;
}
.wf-ext-name {
  font-weight: 500;
}
/* Inline external labels — positioned relative to parent step node */
.wf-inline-externals {
  display: flex;
  justify-content: center;
  gap: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}
.wf-inline-inputs {
  bottom: 100%;
  margin-bottom: 4px;
}
.wf-inline-outputs {
  top: 100%;
  margin-top: 4px;
}
.wf-inline-ext {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}
.wf-inline-ext.wf-ext-input {
  background: rgba(0,229,160,0.15);
  border: 1px dashed rgba(0,229,160,0.5);
  color: rgba(0,229,160,0.95);
}
.wf-inline-ext.wf-ext-output {
  background: rgba(255,140,0,0.15);
  border: 1px dashed rgba(255,140,0,0.5);
  color: rgba(255,140,0,0.95);
}
.wf-step-top {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 104px;
}
.wf-node-type-icon {
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.7;
}
.wf-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}
.wf-step-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wf-badge-success {
  color: #00e5a0;
  text-shadow: 0 0 8px rgba(0, 229, 160, 0.4);
}
.wf-badge-failure {
  color: #ff4d6a;
  text-shadow: 0 0 8px rgba(255, 77, 106, 0.4);
}
.wf-badge-empty {
  color: var(--text-muted);
  font-size: 10px;
}
.wf-step-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: #e0e0e0;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.wf-step-node:hover .wf-step-tooltip {
  display: block;
}
.wf-step-rate {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-primary);
  line-height: 1.3;
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
}
.wf-flow-particle {
  fill: rgba(0, 212, 255, 0.4);
  opacity: 0.7;
  filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.3));
}
.wf-particle-ok {
  fill: #00e5a0;
  filter: drop-shadow(0 0 6px #00e5a0);
  opacity: 0.95;
}
.wf-particle-fail {
  fill: #ff4d6a;
  filter: drop-shadow(0 0 6px #ff4d6a);
  opacity: 0.95;
}
.wf-empty-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(0,212,255,0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* Failure panel */
.wf-failure-panel {
  border: 1px solid var(--border-glow);
  background: rgba(4, 12, 28, 0.6);
  border-radius: var(--radius);
  margin-top: 12px;
  position: relative;
}
/* 失败面板角标 */
.wf-failure-panel::before,
.wf-failure-panel::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(255, 77, 106, 0.5);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}
.wf-failure-panel::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.wf-failure-panel::after {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0;
}
.wf-failure-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  background: rgba(4, 14, 30, 0.9);
  z-index: 3;
}
.wf-failure-list {
  max-height: 240px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.wf-failure-item {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.2s;
}
.wf-failure-item:hover {
  background: rgba(0, 212, 255, 0.08);
}
.wf-fail-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 3px;
}
.wf-fail-time {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.wf-fail-worker {
  font-size: 11px;
  color: var(--color-primary);
  background: rgba(0, 212, 255, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
}
.wf-fail-type {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0,212,255,0.12);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: auto;
}
.wf-fail-reason {
  font-size: 12px;
  color: #ff4d6a;
  line-height: 1.4;
}

/* Evidence viewer */
.wf-evidence-viewer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wf-evidence-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-evidence-type-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--glow-cyan);
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wf-evidence-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.wf-ef-label {
  color: var(--text-muted);
  min-width: 60px;
  flex-shrink: 0;
  font-weight: 500;
}
.wf-ef-value {
  color: var(--text-secondary);
  word-break: break-all;
}
.wf-evidence-img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  margin-bottom: 12px;
}
.wf-evidence-source-wrap {
  margin-top: 8px;
}
/* Log toolbar */
.log-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(10,22,40,0.5);
  border: 1px solid var(--border-glow);
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  flex-shrink: 0;
}
.log-level-filters {
  display: flex;
  gap: 4px;
}
.log-level-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  transition: all 0.2s;
}
.log-level-chip.active {
  background: rgba(0,212,255,0.2);
  color: var(--color-primary);
}
.log-level-chip.chip-error.active {
  background: rgba(245,108,108,0.2);
  color: #ff4d6a;
}
.log-level-chip.chip-warn.active {
  background: rgba(230,162,60,0.2);
  color: #ffaa2c;
}
.log-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Audit timeline */
.audit-timeline {
  max-height: 300px;
  overflow-y: auto;
}
.audit-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: flex-start;
}
.audit-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.audit-dot.audit-ok { background: #00e5a0; }
.audit-dot.audit-fail { background: #ff4d6a; }
.audit-content { flex: 1; min-width: 0; }
.audit-action {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.audit-target {
  color: var(--color-primary);
  font-weight: 400;
}
.audit-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.wf-html-source {
  max-height: 250px;
  overflow-y: auto;
  background: #040d18;
  color: #b0ccdf;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 212, 255, 0.1);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ========== System Status Footer Bar ========== */
.system-status-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: rgba(3, 8, 18, 0.95);
  border-top: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  z-index: 9999;
  backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 rgba(0, 212, 255, 0.08);
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-legend-sep {
  width: 1px;
  height: 14px;
  background: var(--border-glow);
  flex-shrink: 0;
}
.footer-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.footer-dot.dot-ok {
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}
.footer-dot.dot-warn {
  background: var(--color-warning);
  box-shadow: 0 0 6px var(--color-warning);
}
.footer-dot.dot-err {
  background: var(--color-danger);
  box-shadow: 0 0 6px var(--color-danger);
}

/* ========== Docs Page ========== */
.docs-content {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 14px;
}
.docs-content h2 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-glow);
}
.docs-content h3 {
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 8px;
}
.docs-content p {
  margin: 0 0 10px;
}
.docs-content strong {
  color: var(--text-primary);
}
.docs-content code {
  background: rgba(0,212,255,0.08);
  color: var(--color-accent);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}
.docs-content pre {
  background: rgba(10,22,40,0.7);
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 8px 0 16px;
}
.docs-content pre code {
  background: none;
  padding: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.docs-section {
  background: var(--glass-bg);
  border: 1px solid var(--border-glow);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
  backdrop-filter: blur(12px);
}
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-size: 13px;
}
.docs-table th {
  text-align: left;
  padding: 8px 12px;
  background: rgba(0,212,255,0.06);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-glow);
  font-weight: 600;
}
.docs-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(0,212,255,0.04);
  color: var(--text-secondary);
}
.docs-table tr:hover td {
  background: rgba(0,212,255,0.03);
}
.docs-table td code {
  font-size: 12px;
}

/* Docs Layout: TOC + Main */
.docs-layout {
  display: flex;
  gap: 24px;
}
.docs-toc {
  position: sticky;
  top: 60px;
  width: 200px;
  min-width: 200px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 16px 0;
}
.docs-toc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-left: 12px;
}
.docs-toc-item {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.2s;
  cursor: pointer;
}
.docs-toc-item:hover {
  color: var(--text-secondary);
}
.docs-toc-item.active {
  color: var(--glow-cyan);
  border-left-color: var(--glow-cyan);
  background: rgba(0,212,255,0.05);
}
.docs-main {
  flex: 1;
  min-width: 0;
}

/* Syntax Highlighting */
.hl-keyword { color: #c792ea; }
.hl-string { color: #c3e88d; }
.hl-comment { color: #546e7a; font-style: italic; }
.hl-type { color: #82aaff; }

/* ================================================================
   BI Dashboard Enhancement Layer
   - Background texture & depth
   - Stat card top gradient bar & glass
   - Section title system
   - Node type color differentiation
   - Connection line flow animation
   - Count-up entrance animation
   - Node health pulse animation
   ================================================================ */

/* ---------- 1. Background Texture ---------- */
.arch-container {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.03) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(0,212,255,0.03) 59px, rgba(0,212,255,0.03) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(0,212,255,0.03) 59px, rgba(0,212,255,0.03) 60px);
}

/* ---------- 2. Stat Card Enhancement ---------- */
/* Top gradient light bar */
.stat-card-wrap::after {
  /* Override: repurpose ::after for top gradient bar while keeping corner via ::before */
}
.stat-card-wrap {
  border-top: none;
  overflow: visible;
}
/* Top gradient bar via box-shadow inset trick + dedicated child approach */
.stat-card-wrap.stat-green {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-success), rgba(0,229,160,0.2)) 1;
}
.stat-card-wrap.stat-blue {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--glow-cyan), var(--color-primary)) 1;
}
.stat-card-wrap.stat-orange {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-warning), rgba(255,170,44,0.2)) 1;
}
.stat-card-wrap.stat-red {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-danger), rgba(255,77,106,0.2)) 1;
}
.stat-card-wrap.stat-grey {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-info), rgba(91,140,168,0.2)) 1;
}

/* Stronger glass effect */
.stat-card-wrap {
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  background: linear-gradient(
    135deg,
    rgba(4, 14, 30, 0.7) 0%,
    rgba(0, 50, 80, 0.25) 50%,
    rgba(4, 14, 30, 0.7) 100%
  );
}

/* Enhanced hover glow per color variant */
.stat-card-wrap.stat-green:hover {
  box-shadow: var(--shadow-card), 0 0 20px rgba(0,229,160,0.25), 0 4px 30px rgba(0,229,160,0.1);
}
.stat-card-wrap.stat-blue:hover {
  box-shadow: var(--shadow-card), 0 0 20px rgba(0,212,255,0.25), 0 4px 30px rgba(0,212,255,0.1);
}
.stat-card-wrap.stat-orange:hover {
  box-shadow: var(--shadow-card), 0 0 20px rgba(255,170,44,0.25), 0 4px 30px rgba(255,170,44,0.1);
}
.stat-card-wrap.stat-red:hover {
  box-shadow: var(--shadow-card), 0 0 20px rgba(255,77,106,0.25), 0 4px 30px rgba(255,77,106,0.1);
}
.stat-card-wrap.stat-grey:hover {
  box-shadow: var(--shadow-card), 0 0 20px rgba(91,140,168,0.2), 0 4px 30px rgba(91,140,168,0.08);
}

/* ---------- 3. Section Title System ---------- */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.section-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, var(--glow-cyan), var(--color-primary));
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---------- 4. Node Type Color System ---------- */
.arch-node[data-type="database"] {
  border-color: rgba(0, 229, 160, 0.45);
  background: rgba(0, 229, 160, 0.06);
}
.arch-node[data-type="database"]:hover {
  border-color: var(--color-success);
  box-shadow: 0 0 24px rgba(0, 229, 160, 0.3), inset 0 0 12px rgba(0, 229, 160, 0.05);
}

.arch-node[data-type="queue"] {
  border-color: rgba(255, 170, 44, 0.45);
  background: rgba(255, 170, 44, 0.06);
}
.arch-node[data-type="queue"]:hover {
  border-color: var(--color-warning);
  box-shadow: 0 0 24px rgba(255, 170, 44, 0.3), inset 0 0 12px rgba(255, 170, 44, 0.05);
}

.arch-node[data-type="browser"] {
  border-color: rgba(255, 77, 106, 0.45);
  background: rgba(255, 77, 106, 0.06);
}
.arch-node[data-type="browser"]:hover {
  border-color: var(--color-danger);
  box-shadow: 0 0 24px rgba(255, 77, 106, 0.3), inset 0 0 12px rgba(255, 77, 106, 0.05);
}

.arch-node[data-type="api"] {
  border-color: rgba(0, 184, 255, 0.45);
  background: rgba(0, 184, 255, 0.06);
}
.arch-node[data-type="api"]:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 24px rgba(0, 184, 255, 0.3), inset 0 0 12px rgba(0, 184, 255, 0.05);
}

.arch-node[data-type="service"] {
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.04);
}
.arch-node[data-type="service"]:hover {
  border-color: var(--glow-cyan);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.3), inset 0 0 12px rgba(0, 212, 255, 0.05);
}

/* ---------- 5. Connection Line Flow Animation ---------- */
@keyframes dash-flow {
  to { stroke-dashoffset: -20; }
}
.topo-line-animated {
  animation: dash-flow 1s linear infinite;
}
/* Apply to all SVG connection paths inside the arch canvas */
.arch-canvas-inner path[stroke-dasharray],
.arch-canvas-inner line[stroke-dasharray] {
  animation: dash-flow 1.2s linear infinite;
}

/* ---------- 6. Count-Up Entrance Animation ---------- */
@keyframes count-up-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-value {
  animation: count-up-fade 0.6s ease-out;
}

/* ---------- 7. Node Health Pulse Animation ---------- */
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,212,255,0.2); }
  50%      { box-shadow: 0 0 16px rgba(0,212,255,0.4); }
}
.arch-node.node-pulse {
  animation: node-pulse 2.5s ease-in-out infinite;
}
/* Green pulse for healthy running nodes */
@keyframes node-pulse-green {
  0%, 100% { box-shadow: 0 0 8px rgba(0,229,160,0.15); }
  50%      { box-shadow: 0 0 18px rgba(0,229,160,0.35); }
}
.arch-node.status-running[data-type="database"] {
  animation: node-pulse-green 3s ease-in-out infinite;
}
.arch-node.status-running[data-type="queue"] {
  animation: node-pulse-green 3s ease-in-out infinite;
}
/* Warning pulse for queue nodes with issues */
@keyframes node-pulse-warning {
  0%, 100% { box-shadow: 0 0 8px rgba(255,170,44,0.15); }
  50%      { box-shadow: 0 0 18px rgba(255,170,44,0.35); }
}
.arch-node.status-error[data-type="queue"] {
  animation: node-pulse-warning 1.8s ease-in-out infinite;
}

/* ========== Stat Card Trend Tags ========== */
.stat-trend {
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
  font-family: var(--font-din);
}
.stat-trend.trend-up {
  color: var(--color-success);
}
.stat-trend.trend-down {
  color: var(--color-danger);
}
.stat-trend.trend-stable {
  color: var(--text-muted);
}

/* ========== Service Alerts ========== */
.service-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 77, 106, 0.04);
  border: 1px solid rgba(255, 77, 106, 0.15);
  border-radius: var(--radius);
  margin-bottom: 8px;
  max-height: 80px;
  overflow-y: auto;
}
.alert-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 3px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.05);
}
.alert-item.alert-error { border-color: rgba(255, 77, 106, 0.3); }
.alert-item.alert-warn { border-color: rgba(255, 170, 44, 0.3); }
.alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.alert-error .alert-dot { background: var(--color-danger); box-shadow: 0 0 6px var(--color-danger); }
.alert-warn .alert-dot { background: var(--color-warning); box-shadow: 0 0 6px var(--color-warning); }
.alert-service {
  font-weight: 600;
  color: var(--text-primary);
}
.alert-msg {
  color: var(--text-secondary);
}
.alert-time {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: auto;
}

/* ========== Trace Waterfall ========== */
.trace-list { display: flex; flex-direction: column; gap: 4px; }
.trace-item { border: 1px solid var(--border-glow); border-radius: var(--radius); background: rgba(6,20,42,0.5); cursor: pointer; transition: var(--transition); }
.trace-item:hover, .trace-item.active { border-color: var(--border-glow-strong); background: rgba(10,30,58,0.7); }
.trace-item-summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; flex-wrap: wrap; }
.trace-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.trace-status-dot.dot-ok { background: var(--color-success); box-shadow: 0 0 5px var(--color-success); }
.trace-status-dot.dot-error { background: var(--color-danger); box-shadow: 0 0 5px var(--color-danger); }
.trace-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.trace-workflow { color: var(--text-primary); font-weight: 600; }
.trace-duration { color: var(--glow-cyan); font-family: var(--font-mono); font-size: 11px; }
.trace-spans { color: var(--text-muted); font-size: 11px; }
.trace-first-error { color: var(--color-danger); font-size: 11px; background: rgba(255,77,106,0.12); padding: 1px 6px; border-radius: 3px; }

.trace-waterfall { padding: 6px 10px 10px; border-top: 1px solid var(--border-glow); }
.wf-span-row { display: flex; align-items: center; height: 24px; gap: 0; font-size: 12px; border-radius: 2px; }
.wf-span-row.span-error { background: rgba(255,77,106,0.08); }
.span-label { flex: 0 0 30%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 11px; display: flex; align-items: center; gap: 4px; }
.span-evidence-icon { cursor: pointer; font-size: 13px; }
.span-evidence-icon:hover { filter: brightness(1.4); }
.span-bar-area { flex: 1; position: relative; height: 14px; background: rgba(255,255,255,0.03); border-radius: 2px; overflow: visible; }
.span-bar { position: absolute; top: 2px; height: 10px; border-radius: 2px; min-width: 2px; }
.span-bar.bar-ok { background: var(--color-success); opacity: 0.7; }
.span-bar.bar-error { background: var(--color-danger); opacity: 0.8; }
.span-dur-label { position: absolute; top: 1px; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }