/* index.css - 界面美化与主题配置 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* 主题 CSS 变量定义 */
:root {
  /* 默认幽冥深渊紫主题 */
  --bg-base: radial-gradient(circle at 50% 50%, #110924 0%, #06020f 100%);
  --bg-panel: rgba(20, 10, 40, 0.65);
  --bg-card: rgba(32, 16, 64, 0.45);
  --bg-input: rgba(12, 6, 24, 0.7);
  --text-primary: #f5f3ff;
  --text-secondary: #c7d2fe;
  --accent-color: #c084fc;
  --accent-rgb: 192, 132, 252;
  --accent-glow: 0 0 25px rgba(192, 132, 252, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(192, 132, 252, 0.25);
  --border-color: rgba(192, 132, 252, 0.15);
  --border-focus: rgba(192, 132, 252, 0.5);
  --scrollbar-thumb: rgba(192, 132, 252, 0.25);
  --btn-start-bg: linear-gradient(135deg, #d8b4fe 0%, #c084fc 55%, #a855f7 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 55%, #c084fc 100%);
  --btn-start-text: #0d0d0f;
  --accent-text: #0d0d0f;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, 'Microsoft YaHei', monospace;
}

/* 暗黑流光（可选预设；系统默认已改为 theme-abyss） */
.theme-dark {
  --bg-base: radial-gradient(circle at 50% 50%, #151226 0%, #0d0b18 100%);
  --bg-panel: rgba(22, 19, 38, 0.65);
  --bg-card: rgba(30, 27, 51, 0.45);
  --bg-input: rgba(14, 11, 23, 0.7);
  --text-primary: #f1ecff;
  --text-secondary: #a39cb5;
  --accent-color: #8c52ff;
  --accent-rgb: 140, 82, 255;
  --accent-glow: 0 0 25px rgba(140, 82, 255, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(140, 82, 255, 0.25);
  --border-color: rgba(140, 82, 255, 0.15);
  --border-focus: rgba(140, 82, 255, 0.5);
  --scrollbar-thumb: rgba(140, 82, 255, 0.25);
  --btn-start-bg: linear-gradient(135deg, #9b6bff 0%, #8c52ff 55%, #6d4aff 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #a878ff 0%, #9560ff 55%, #7a58ff 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 曜石纯黑主题 */
.theme-black {
  --bg-base: radial-gradient(circle at 50% 50%, #0d0d0f 0%, #000000 100%);
  --bg-panel: rgba(15, 15, 18, 0.7);
  --bg-card: rgba(24, 24, 28, 0.5);
  --bg-input: rgba(8, 8, 10, 0.8);
  --text-primary: #e3e3e8;
  --text-secondary: #7e7e8a;
  --accent-color: #ffffff;
  --accent-rgb: 255, 255, 255;
  --accent-glow: 0 0 25px rgba(255, 255, 255, 0.4);
  --accent-glow-reduced: 0 0 10px rgba(255, 255, 255, 0.2);
  --border-color: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(255, 255, 255, 0.45);
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --btn-start-bg: linear-gradient(135deg, #ffffff 0%, #e5e5ea 55%, #c7c7cc 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #ffffff 0%, #f2f2f7 55%, #d1d1d6 100%);
  --btn-start-text: #0d0d0f;
  --accent-text: #0d0d0f;
}

/* 极光霓虹主题 */
.theme-aurora {
  --bg-base: radial-gradient(circle at 50% 50%, #0b1c1e 0%, #050d0e 100%);
  --bg-panel: rgba(13, 29, 31, 0.65);
  --bg-card: rgba(19, 38, 41, 0.45);
  --bg-input: rgba(7, 15, 16, 0.7);
  --text-primary: #e6f4f5;
  --text-secondary: #8cabae;
  --accent-color: #00e676;
  --accent-rgb: 0, 230, 118;
  --accent-glow: 0 0 25px rgba(0, 230, 118, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(0, 230, 118, 0.25);
  --border-color: rgba(0, 230, 118, 0.15);
  --border-focus: rgba(0, 230, 118, 0.5);
  --scrollbar-thumb: rgba(0, 230, 118, 0.25);
  --btn-start-bg: linear-gradient(135deg, #00ff87 0%, #00e676 55%, #00b050 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #1aff96 0%, #17eb80 55%, #00cc5c 100%);
  --btn-start-text: #050d0e;
  --accent-text: #050d0e;
}

/* 深邃科技蓝主题 */
.theme-blue {
  --bg-base: radial-gradient(circle at 50% 50%, #0f1c3f 0%, #070c1b 100%);
  --bg-panel: rgba(16, 28, 59, 0.65);
  --bg-card: rgba(24, 40, 80, 0.45);
  --bg-input: rgba(10, 18, 38, 0.7);
  --text-primary: #ecf3ff;
  --text-secondary: #9cb0d5;
  --accent-color: #2563eb;
  --accent-rgb: 37, 99, 235;
  --accent-glow: 0 0 25px rgba(37, 99, 235, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(37, 99, 235, 0.25);
  --border-color: rgba(37, 99, 235, 0.15);
  --border-focus: rgba(37, 99, 235, 0.5);
  --scrollbar-thumb: rgba(37, 99, 235, 0.25);
  --btn-start-bg: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 璀璨珊瑚橙主题 */
.theme-orange {
  --bg-base: radial-gradient(circle at 50% 50%, #2f190e 0%, #150a04 100%);
  --bg-panel: rgba(32, 18, 10, 0.65);
  --bg-card: rgba(48, 26, 15, 0.45);
  --bg-input: rgba(20, 10, 5, 0.7);
  --text-primary: #fff2eb;
  --text-secondary: #d5bfae;
  --accent-color: #ea580c;
  --accent-rgb: 234, 88, 12;
  --accent-glow: 0 0 25px rgba(234, 88, 12, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(234, 88, 12, 0.25);
  --border-color: rgba(234, 88, 12, 0.15);
  --border-focus: rgba(234, 88, 12, 0.5);
  --scrollbar-thumb: rgba(234, 88, 12, 0.25);
  --btn-start-bg: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #fb923c 0%, #f97316 55%, #ea580c 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* Matrix 青墨绿主题 */
.theme-teal {
  --bg-base: radial-gradient(circle at 50% 50%, #051a18 0%, #020a0a 100%);
  --bg-panel: rgba(6, 28, 26, 0.65);
  --bg-card: rgba(10, 44, 40, 0.45);
  --bg-input: rgba(4, 18, 17, 0.7);
  --text-primary: #ebfffd;
  --text-secondary: #92bfae;
  --accent-color: #0d9488;
  --accent-rgb: 13, 148, 136;
  --accent-glow: 0 0 25px rgba(13, 148, 136, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(13, 148, 136, 0.25);
  --border-color: rgba(13, 148, 136, 0.15);
  --border-focus: rgba(13, 148, 136, 0.5);
  --scrollbar-thumb: rgba(13, 148, 136, 0.25);
  --btn-start-bg: linear-gradient(135deg, #0d9488 0%, #0f766e 55%, #115e59 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #14b8a6 0%, #0d9488 55%, #0f766e 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 璀璨复古金主题 */
.theme-amber {
  --bg-base: radial-gradient(circle at 50% 50%, #20150d 0%, #0f0905 100%);
  --bg-panel: rgba(28, 18, 11, 0.65);
  --bg-card: rgba(44, 28, 18, 0.45);
  --bg-input: rgba(18, 11, 7, 0.7);
  --text-primary: #fff6eb;
  --text-secondary: #d5c7b3;
  --accent-color: #d97706;
  --accent-rgb: 217, 119, 6;
  --accent-glow: 0 0 25px rgba(217, 119, 6, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(217, 119, 6, 0.25);
  --border-color: rgba(217, 119, 6, 0.15);
  --border-focus: rgba(217, 119, 6, 0.5);
  --scrollbar-thumb: rgba(217, 119, 6, 0.25);
  --btn-start-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 赛博迷幻粉主题 */
.theme-pink {
  --bg-base: radial-gradient(circle at 50% 50%, #240e15 0%, #0f0408 100%);
  --bg-panel: rgba(32, 11, 18, 0.65);
  --bg-card: rgba(50, 18, 28, 0.45);
  --bg-input: rgba(20, 7, 11, 0.7);
  --text-primary: #ffeff3;
  --text-secondary: #dcaab3;
  --accent-color: #f43f5e;
  --accent-rgb: 244, 63, 94;
  --accent-glow: 0 0 25px rgba(244, 63, 94, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(244, 63, 94, 0.25);
  --border-color: rgba(244, 63, 94, 0.15);
  --border-focus: rgba(244, 63, 94, 0.5);
  --scrollbar-thumb: rgba(244, 63, 94, 0.25);
  --btn-start-bg: linear-gradient(135deg, #fda4af 0%, #f43f5e 55%, #e11d48 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #fecdd3 0%, #fda4af 55%, #f43f5e 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 北极冰川蓝主题 */
.theme-glacier {
  --bg-base: radial-gradient(circle at 50% 50%, #0b1622 0%, #040910 100%);
  --bg-panel: rgba(13, 26, 40, 0.65);
  --bg-card: rgba(20, 38, 58, 0.45);
  --bg-input: rgba(8, 16, 25, 0.7);
  --text-primary: #e0f2fe;
  --text-secondary: #93c5fd;
  --accent-color: #38bdf8;
  --accent-rgb: 56, 189, 248;
  --accent-glow: 0 0 25px rgba(56, 189, 248, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(56, 189, 248, 0.25);
  --border-color: rgba(56, 189, 248, 0.15);
  --border-focus: rgba(56, 189, 248, 0.5);
  --scrollbar-thumb: rgba(56, 189, 248, 0.25);
  --btn-start-bg: linear-gradient(135deg, #38bdf8 0%, #0284c7 55%, #0369a1 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 55%, #0284c7 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 火山熔岩红主题 */
.theme-magma {
  --bg-base: radial-gradient(circle at 50% 50%, #180808 0%, #0a0303 100%);
  --bg-panel: rgba(28, 10, 10, 0.65);
  --bg-card: rgba(44, 15, 15, 0.45);
  --bg-input: rgba(16, 5, 5, 0.7);
  --text-primary: #fef2f2;
  --text-secondary: #fca5a5;
  --accent-color: #dc2626;
  --accent-rgb: 220, 38, 38;
  --accent-glow: 0 0 25px rgba(220, 38, 38, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(220, 38, 38, 0.25);
  --border-color: rgba(220, 38, 38, 0.15);
  --border-focus: rgba(220, 38, 38, 0.5);
  --scrollbar-thumb: rgba(220, 38, 38, 0.25);
  --btn-start-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #f87171 0%, #ef4444 55%, #dc2626 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 幽冥深渊紫主题 */
.theme-abyss {
  --bg-base: radial-gradient(circle at 50% 50%, #110924 0%, #06020f 100%);
  --bg-panel: rgba(20, 10, 40, 0.65);
  --bg-card: rgba(32, 16, 64, 0.45);
  --bg-input: rgba(12, 6, 24, 0.7);
  --text-primary: #f5f3ff;
  --text-secondary: #c7d2fe;
  --accent-color: #c084fc;
  --accent-rgb: 192, 132, 252;
  --accent-glow: 0 0 25px rgba(192, 132, 252, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(192, 132, 252, 0.25);
  --border-color: rgba(192, 132, 252, 0.15);
  --border-focus: rgba(192, 132, 252, 0.5);
  --scrollbar-thumb: rgba(192, 132, 252, 0.25);
  --btn-start-bg: linear-gradient(135deg, #d8b4fe 0%, #c084fc 55%, #a855f7 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 55%, #c084fc 100%);
  --btn-start-text: #0d0d0f;
  --accent-text: #0d0d0f;
}

/* 雅致鼠尾草绿主题 */
.theme-sage {
  --bg-base: radial-gradient(circle at 50% 50%, #1e2022 0%, #111213 100%);
  --bg-panel: rgba(30, 32, 34, 0.65);
  --bg-card: rgba(45, 48, 51, 0.45);
  --bg-input: rgba(20, 21, 22, 0.7);
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --accent-color: #a7f3d0;
  --accent-rgb: 167, 243, 208;
  --accent-glow: 0 0 25px rgba(167, 243, 208, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(167, 243, 208, 0.25);
  --border-color: rgba(167, 243, 208, 0.15);
  --border-focus: rgba(167, 243, 208, 0.5);
  --scrollbar-thumb: rgba(167, 243, 208, 0.25);
  --btn-start-bg: linear-gradient(135deg, #a7f3d0 0%, #34d399 55%, #059669 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 55%, #34d399 100%);
  --btn-start-text: #0c0d0e;
  --accent-text: #0c0d0e;
}

/* 液氮荧光青主题 */
.theme-mint {
  --bg-base: radial-gradient(circle at 50% 50%, #061317 0%, #02070a 100%);
  --bg-panel: rgba(8, 25, 30, 0.65);
  --bg-card: rgba(12, 38, 45, 0.45);
  --bg-input: rgba(4, 12, 15, 0.7);
  --text-primary: #f0fdfa;
  --text-secondary: #5eead4;
  --accent-color: #2dd4bf;
  --accent-rgb: 45, 212, 191;
  --accent-glow: 0 0 25px rgba(45, 212, 191, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(45, 212, 191, 0.25);
  --border-color: rgba(45, 212, 191, 0.15);
  --border-focus: rgba(45, 212, 191, 0.5);
  --scrollbar-thumb: rgba(45, 212, 191, 0.25);
  --btn-start-bg: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #99f6e4 0%, #2dd4bf 55%, #14b8a6 100%);
  --btn-start-text: #0c0d0e;
  --accent-text: #0c0d0e;
}

/* 英伦极夜绿主题 */
.theme-forest {
  --bg-base: radial-gradient(circle at 50% 50%, #051811 0%, #010805 100%);
  --bg-panel: rgba(6, 30, 21, 0.65);
  --bg-card: rgba(10, 48, 33, 0.45);
  --bg-input: rgba(4, 18, 13, 0.7);
  --text-primary: #ecfdf5;
  --text-secondary: #a7f3d0;
  --accent-color: #10b981;
  --accent-rgb: 16, 185, 129;
  --accent-glow: 0 0 25px rgba(16, 185, 129, 0.5);
  --accent-glow-reduced: 0 0 10px rgba(16, 185, 129, 0.25);
  --border-color: rgba(16, 185, 129, 0.15);
  --border-focus: rgba(16, 185, 129, 0.5);
  --scrollbar-thumb: rgba(16, 185, 129, 0.25);
  --btn-start-bg: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #34d399 0%, #10b981 55%, #059669 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 白昼明亮主题 */
.theme-light {
  --bg-base: linear-gradient(135deg, #f5f4fa 0%, #e9e7f3 100%);
  --bg-panel: rgba(255, 255, 255, 0.75);
  --bg-card: rgba(240, 238, 248, 0.75);
  --bg-input: rgba(255, 255, 255, 0.9);
  --text-primary: #2a253d;
  --text-secondary: #6e6785;
  --accent-color: #6200ee;
  --accent-rgb: 98, 0, 238;
  --accent-glow: 0 0 20px rgba(98, 0, 238, 0.35);
  --accent-glow-reduced: 0 0 8px rgba(98, 0, 238, 0.2);
  --border-color: rgba(98, 0, 238, 0.1);
  --border-focus: rgba(98, 0, 238, 0.4);
  --scrollbar-thumb: rgba(98, 0, 238, 0.15);
  --btn-start-bg: linear-gradient(135deg, #7f39fb 0%, #6200ee 55%, #4b00c3 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #8e50fc 0%, #731efa 55%, #590dd9 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
}

/* 全局重置与基础样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

/* 确保输入框、选择器和其内部选项能够正常交互与滚动 */
input, select, option, textarea {
  user-select: text !important;
}

html, body {
  /* 禁止透明：Windows 最小化/还原时透明 body 会先闪系统白底 */
  background: #06020f !important;
}
body.theme-dark {
  background: #0d0b18 !important;
}
body.theme-black {
  background: #000000 !important;
}
body.theme-aurora {
  background: #050d0e !important;
}
body.theme-light {
  background: #e9e7f3 !important;
}
body.theme-blue {
  background: #070c1b !important;
}
body.theme-orange {
  background: #150a04 !important;
}
body.theme-teal {
  background: #020a0a !important;
}
body.theme-amber {
  background: #0f0905 !important;
}
body.theme-pink {
  background: #0f0408 !important;
}
body.theme-glacier {
  background: #040910 !important;
}
body.theme-magma {
  background: #0a0303 !important;
}
body.theme-abyss {
  background: #06020f !important;
}
body.theme-sage {
  background: #111213 !important;
}
body.theme-mint {
  background: #02070a !important;
}
body.theme-forest {
  background: #010805 !important;
}
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 无边框视窗容器 */
.app-container {
  width: 100vw;
  height: 100vh;
  background: var(--bg-base); /* 承接主题大渐变背景色 */
  border: 1px solid var(--border-color);
  border-radius: 14px; /* 柔和、圆润的高级圆角 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* 窗口最大化自适应状态 (清除圆角和多余边框防止屏幕四角漏出背景) */
body.maximized .app-container {
  border-radius: 0px !important;
  border: none !important;
}

/* 顶部标题拖拽栏 */
.title-bar {
  height: 48px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  -webkit-app-region: drag; /* 允许拖拽 */
  position: relative; /* 允许子元素绝对定位居中 */
}

.title-logo-zone {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-logo-zone span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.app-instance-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), 0.28);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  -webkit-app-region: no-drag;
}

.window-controls {
  display: flex;
  gap: 10px;
  -webkit-app-region: no-drag; /* 禁用拖拽以便点击 */
}

.window-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease;
}

.window-btn.close { background: #ff5f56; }
.window-btn.minimize { background: #ffbd2e; }
.window-btn.maximize { background: #27c93f; }

/* 在按钮中心绘制精致的极简矢量图标 */
.window-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* 仅在鼠标悬停在控制条区域或按钮本身时显现图标，保持mac风格的高档感 */
.window-controls:hover .window-btn::after {
  opacity: 0.8;
}

.window-btn:hover::after {
  opacity: 1 !important;
}

.window-btn:hover {
  transform: scale(1.15);
}

/* 关闭按钮: 绘制一个小 X */
.window-btn.close::after {
  content: "×";
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
  color: rgba(0,0,0,0.85);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
}

/* 最小化按钮: 绘制一个小横线 */
.window-btn.minimize::after {
  width: 9px;
  height: 2px;
  background-color: rgba(0,0,0,0.85);
}

/* 最大化按钮: 绘制一个小正方形 */
.window-btn.maximize::after {
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(0,0,0,0.85);
  background: none;
  box-sizing: border-box;
}

/* 核心内容布局 */
.main-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧边栏 */
.sidebar {
  position: relative;
  width: 250px;
  background: rgba(0, 0, 0, 0.1);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 16px 20px 16px;
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.status-badge-container {
  background: var(--accent-color);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
  color: #fff;
}

.status-badge-container h4,
.status-badge-container #btn-label-text {
  color: #fff !important;
}

.status-badge-container:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.status-badge-container:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* 已停止 → 纯色启动按钮 */
.status-badge-container.stopped {
  background: var(--btn-start-bg);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.4);
  animation: none;
}
.status-badge-container.stopped:hover {
  background: var(--btn-start-bg-hover);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.5);
}
.status-badge-container.stopped,
.status-badge-container.stopped h4,
.status-badge-container.stopped #btn-label-text {
  color: var(--btn-start-text) !important;
}
.status-badge-container.stopped #status-label {
  color: var(--btn-start-text) !important;
  opacity: 0.85;
}
.status-badge-container.stopped .status-light-btn-container svg {
  color: var(--btn-start-text) !important;
}

/* 运行中 → 纯色终止按钮 */
.status-badge-container.running {
  background: linear-gradient(135deg, #ff6b63 0%, #e5484d 55%, #d63b42 100%);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(229, 72, 77, 0.4);
}
.status-badge-container.running:hover {
  background: linear-gradient(135deg, #ff7a73 0%, #ef5a5e 55%, #e04850 100%);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(229, 72, 77, 0.5);
}

/* 启动中 → 纯色等待按钮 */
.status-badge-container.starting {
  background: linear-gradient(135deg, #ffc857 0%, #f5a623 55%, #e8940f 100%);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.4);
  cursor: wait;
  color: #1a1208;
}
.status-badge-container.starting h4,
.status-badge-container.starting #btn-label-text {
  color: #1a1208 !important;
}
.status-badge-container.starting:hover {
  background: linear-gradient(135deg, #ffd06a 0%, #ffb02e 55%, #f09d18 100%);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(245, 166, 35, 0.5);
}

@keyframes borderPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 1; }
}

/* 侧边栏网关开关状态对应图标颜色 */
/* 侧边栏网关一键启停指示灯与控制按钮容器 */
.status-light-btn-container {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.status-light-btn-container:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.3);
}

.status-light-btn-container.running {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.status-light-btn-container.running:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.3);
}

.status-light-btn-container.starting {
  background: rgba(0, 0, 0, 0.18);
  color: #1a1208;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  box-shadow: none;
}

.status-text-zone h4 {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: bold;
}

.status-text-zone p {
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  margin: 0 -10px;
  padding: 10px 14px 10px 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent; /* 预留边框，避免 hover 抖动 */
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-item:hover, .nav-item.active {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.nav-item.active {
  border-color: var(--accent-color);
  box-shadow: var(--accent-glow);
}

/* 主题和设置工具区 */
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.theme-picker-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
}

.theme-picker-panel span {
  font-size: 13px;
  color: var(--text-secondary);
}

.theme-dots {
  display: flex;
  gap: 8px;
}

.theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.theme-dot.black { background: #0c0c0e; border-color: rgba(255, 255, 255, 0.4); }
.theme-dot.dark { background: #8c52ff; }
.theme-dot.aurora { background: #00e676; }
.theme-dot.light { background: #ffffff; border-color: rgba(0, 0, 0, 0.15) !important; }
.theme-dot.blue { background: #2563eb; }
.theme-dot.orange { background: #ea580c; }
.theme-dot.teal { background: #0d9488; }
.theme-dot.amber { background: #d97706; }
.theme-dot.pink { background: #f43f5e; }
.theme-dot.glacier { background: #38bdf8; }
.theme-dot.magma { background: #dc2626; }
.theme-dot.abyss { background: #c084fc; }
.theme-dot.sage { background: #a7f3d0; }
.theme-dot.mint { background: #2dd4bf; }
.theme-dot.forest { background: #10b981; }
.theme-dot.custom {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444);
  border-color: rgba(255, 255, 255, 0.45);
}

.settings-theme-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.settings-theme-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.settings-theme-card-copy {
  min-width: 180px;
  flex: 1;
}

.settings-theme-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}

.settings-theme-card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 5px;
  line-height: 1.45;
}

.settings-theme-card .theme-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 420px;
}

.custom-theme-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-theme-panel[hidden] {
  display: none !important;
}

.custom-theme-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 36px;
}

.custom-theme-line-actions {
  align-items: center;
}

.custom-theme-line-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
  white-space: nowrap;
}

.custom-theme-overlay-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-color);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

.custom-theme-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  height: 36px;
  padding: 0 14px 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-theme-swatch:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.custom-theme-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
}

.custom-theme-swatch-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-color, #3b82f6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
  flex-shrink: 0;
}

.custom-theme-swatch-hex {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
}

.custom-theme-range-wrap {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.custom-theme-range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.custom-theme-range-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent-color, #3b82f6);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.65);
}

.custom-theme-range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent !important;
  outline: none;
  cursor: pointer;
}

.custom-theme-range::-webkit-slider-runnable-track {
  height: 10px;
  background: transparent;
  border: none;
}

.custom-theme-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 10px rgba(var(--accent-rgb), 0.45);
  cursor: pointer;
}

.custom-theme-range::-moz-range-track {
  height: 10px;
  background: transparent;
  border: none;
}

.custom-theme-range::-moz-range-progress {
  background: transparent;
  border: none;
}

.custom-theme-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 10px rgba(var(--accent-rgb), 0.45);
  cursor: pointer;
}

.custom-theme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-theme-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.custom-theme-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.custom-theme-btn-primary {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.55);
  color: #fff;
}

.custom-theme-btn-primary:hover {
  background: rgba(var(--accent-rgb), 0.4);
}

.custom-theme-hint {
  margin: 0;
  padding-left: 84px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  opacity: 0.9;
}

@media (max-width: 720px) {
  .custom-theme-line {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .custom-theme-overlay-value {
    grid-column: 2;
    justify-self: end;
  }
  .custom-theme-hint {
    padding-left: 0;
  }
}

/* 设置页开关行：玻璃质感，减少死黑框感 */
#settings-view .form-group-section > div[style*="justify-content: space-between"] {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.theme-custom.has-custom-bg #settings-view .form-group-section {
  background: rgba(8, 10, 18, 0.28);
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-custom.has-custom-bg .settings-theme-card,
body.theme-custom.has-custom-bg #settings-view .form-group-section > div[style*="justify-content: space-between"] {
  background: rgba(8, 10, 18, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 自定义主题：暗色底 + 可换强调色 / 背景图 */
.theme-custom {
  --bg-base: radial-gradient(circle at 50% 40%, #151a28 0%, #080a12 100%);
  --bg-panel: rgba(14, 18, 28, 0.55);
  --bg-card: rgba(22, 26, 40, 0.42);
  --bg-input: rgba(10, 12, 20, 0.62);
  --text-primary: #eef2ff;
  --text-secondary: #9aa6c2;
  --accent-color: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-glow: 0 0 25px rgba(var(--accent-rgb), 0.5);
  --accent-glow-reduced: 0 0 10px rgba(var(--accent-rgb), 0.25);
  --border-color: rgba(var(--accent-rgb), 0.18);
  --border-focus: rgba(var(--accent-rgb), 0.5);
  --scrollbar-thumb: rgba(var(--accent-rgb), 0.25);
  --btn-start-bg: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #1d4ed8 100%);
  --btn-start-bg-hover: linear-gradient(135deg, #93c5fd 0%, #60a5fa 55%, #2563eb 100%);
  --btn-start-text: #ffffff;
  --accent-text: #ffffff;
  --custom-bg-overlay: 0.35;
}

body.theme-custom {
  background: #080a12 !important;
}

body.theme-custom.has-custom-bg .app-container {
  /* 覆盖 shorthand background，避免被 --bg-base 盖掉图片层 */
  background: none !important;
  background-color: #080a12 !important;
  background-image:
    linear-gradient(rgba(8, 10, 18, var(--custom-bg-overlay, 0.4)), rgba(8, 10, 18, calc(var(--custom-bg-overlay, 0.4) + 0.06))),
    var(--custom-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: none;
}

/* 有背景图时，让卡片更透，图才看得出来 */
body.theme-custom.has-custom-bg .form-group-section,
body.theme-custom.has-custom-bg .sidebar {
  background: rgba(10, 12, 20, 0.38);
}

body.theme-custom.has-custom-bg .title-bar {
  background: rgba(0, 0, 0, 0.22);
}

.theme-dot:hover {
  transform: scale(1.2);
}

.theme-dot.active {
  border-color: white !important;
  transform: scale(1.25);
  box-shadow: 0 0 10px var(--accent-color);
}

.theme-light .theme-dot.active {
  border-color: #2a253d !important;
}

.settings-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-bar input[type="checkbox"] {
  cursor: pointer;
}

/* 右侧内容视口 */
.content-viewport {
  flex: 1;
  padding: 24px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

/* 侧栏切页时右侧加载遮罩 */
.page-load-mask {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.18s ease;
}
.page-load-mask[hidden] {
  display: none !important;
}
.page-load-mask-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
}
.page-load-mask-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(var(--accent-rgb), 0.15);
  border-top-color: var(--accent-color);
  animation: spin 0.8s linear infinite;
}
.page-load-mask-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* OpenClaw webview 首次加载 / 白屏自愈遮罩 */
.openclaw-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base, #0a0e17);
  pointer-events: auto;
}
.openclaw-panel-overlay[hidden] {
  display: none !important;
}
.openclaw-panel-overlay-inner {
  max-width: 420px;
  padding: 28px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.openclaw-panel-overlay-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(var(--accent-rgb, 212, 160, 74), 0.18);
  border-top-color: var(--accent-color, #d4a04a);
  animation: spin 0.85s linear infinite;
  margin-bottom: 6px;
}
.openclaw-panel-overlay.is-error .openclaw-panel-overlay-spinner {
  display: none;
}
.openclaw-panel-overlay-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e8e4dc);
}
.openclaw-panel-overlay-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #9a9080);
}
.openclaw-panel-overlay-retry {
  margin-top: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb, 212, 160, 74), 0.45);
  background: rgba(var(--accent-rgb, 212, 160, 74), 0.12);
  color: var(--accent-color, #d4a04a);
  cursor: pointer;
  font-size: 13px;
}
.openclaw-panel-overlay-retry:hover {
  background: rgba(var(--accent-rgb, 212, 160, 74), 0.22);
}
.openclaw-panel-overlay-retry[hidden] {
  display: none !important;
}

/* OpenClaw / 数据中心 内置面板铺满视口，避免外层 padding 挤压 */
.content-viewport:has(#openclaw-panel-view.active),
.content-viewport:has(#data-center-view.active) {
  padding: 0;
}

/* 首进 webview 尚未绘出时用主题渐变垫底，避免透明层透出窗口纯黑 */
#openclaw-panel-view,
#data-center-view {
  background: var(--bg-base) !important;
}
#openclaw-iframe,
#data-center-iframe {
  background: transparent !important;
}

.tab-pane {
  display: none;
  height: 100%;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  /* 去掉 fadeIn：每次切换菜单都会触发全量合成，体感明显卡一下 */
}

.tab-pane.active {
  display: flex;
}

/* --- 内置终端独立页 --- */
#terminal-view {
  overflow: hidden;
  box-sizing: border-box;
  /* 外边距统一走 .content-viewport 的 24px，不再叠加 */
  min-height: 0;
}

#terminal-view .terminal-page-container,
#xterm-container.terminal-page-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

#terminal-view .terminal-page-container .xterm,
#terminal-view .terminal-page-container .xterm-viewport {
  height: 100% !important;
  background-color: transparent !important;
}

#terminal-view .terminal-page-container .xterm-screen {
  background-color: transparent !important;
}

/* --- 系统运行日志独立页 --- */
#syslogs-view {
  overflow: hidden;
  box-sizing: border-box;
  /* 外边距统一走 .content-viewport 的 24px，不再叠加 */
  min-height: 0;
}

#syslogs-view .syslogs-page-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 加速通道 */
#acceleration-view {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

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

.acc-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.acc-mini-enable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.acc-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  width: fit-content;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.acc-subtab {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.acc-subtab.active {
  color: var(--accent-text, #fff);
  background: var(--accent-color);
}

.acc-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
}

.acc-panel.active {
  display: flex;
}

#acc-panel-proxies {
  overflow: hidden !important;
}

.acc-panel[hidden] {
  display: none !important;
}

.acc-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
}

.acc-panel-fill {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.acc-card-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.acc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.acc-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acc-proxy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
  min-width: 0;
}

.acc-proxy-now {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03)),
    rgba(255, 255, 255, 0.02);
}

.acc-proxy-now-flag {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  overflow: hidden;
}

.acc-proxy-now-flag .acc-flag-icon {
  width: 28px;
  height: 20px;
  margin: 0;
  border-radius: 3px;
}

.acc-proxy-now-body {
  flex: 1;
  min-width: 0;
}

.acc-proxy-now-kicker {
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.acc-proxy-now-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.acc-proxy-now-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  min-height: 14px;
}

.acc-proxy-now-delay {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.acc-proxy-delay-label {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
}

.acc-proxy-now-delay strong {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.acc-proxy-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.acc-proxy-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.acc-proxy-stat span {
  font-size: 10px;
  color: var(--text-secondary);
}

.acc-proxy-stat strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-proxy-stat strong.is-ok {
  color: #4ade80;
}

.acc-proxy-stat strong.is-bad {
  color: #f87171;
}

.acc-proxy-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.acc-delay-progress {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-color, var(--accent-color));
  white-space: nowrap;
  flex: 0 0 auto;
}

.acc-delay-progress[hidden] {
  display: none !important;
}

.acc-proxy-actions .acc-delay-btn,
.acc-proxy-actions .acc-proxy-auto-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  margin: 0;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  word-break: keep-all;
}

.acc-proxy-auto-btn {
  font-weight: 500;
}

.acc-proxy-auto-btn.active {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: var(--accent-color);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

.acc-proxy-interval {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.acc-auto-select-status {
  font-size: 11px;
  color: var(--accent-color, var(--accent-color));
  white-space: nowrap;
  min-width: 5.5em;
}

.acc-proxy-interval .acc-select {
  min-width: 145px;
  width: auto;
  height: 32px;
  padding: 0 20px 0 10px;
  font-size: 12px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.acc-proxy-interval #acc-auto-select-interval {
  min-width: 145px;
}

.acc-proxy-interval #acc-auto-select-threshold {
  min-width: 135px;
  width: auto;
}

@media (max-width: 900px) {
  .acc-proxy-hero {
    grid-template-columns: 1fr;
  }
}

.acc-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.acc-import-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.acc-import-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-primary);
  padding: 14px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}

.acc-import-item:hover {
  border-color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-1px);
}

.acc-import-item.active {
  border-color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.12);
}

.acc-import-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-color);
  font-weight: 800;
  flex: 0 0 auto;
}

.acc-import-item strong,
.acc-import-item small {
  display: block;
}

.acc-import-item small {
  color: var(--text-secondary);
  font-size: 11px;
  margin-top: 3px;
}

.acc-inline-import {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}

.acc-inline-import-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 12px;
}

.acc-inline-import-head span {
  color: var(--text-secondary);
  font-size: 11px;
}

.acc-import-fields,
.acc-node-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acc-import-fields-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.acc-import-fields[hidden],
.acc-import-fields-column[hidden] {
  display: none !important;
}

.acc-input {
  min-width: 220px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  padding: 6px 12px;
  box-sizing: border-box;
  outline: none;
  font: inherit;
  resize: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

textarea.acc-input {
  height: auto;
  min-height: 80px;
}

.acc-input:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.acc-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.02);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.acc-input-grow {
  flex: 1;
  min-width: 0;
}

.acc-action-btn {
  width: auto !important;
  min-width: 92px;
  height: 36px;
  margin: 0 !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.acc-file-hint,
.acc-import-feedback {
  color: var(--text-secondary);
  font-size: 11px;
}

.acc-file-hint {
  flex: 1;
}

.acc-import-feedback {
  min-height: 15px;
  margin-top: 7px;
}

.acc-import-feedback.error {
  color: #fb7185;
}

.acc-import-feedback.success {
  color: #4ade80;
}

.acc-node-toolbar {
  margin-bottom: 4px;
  background: transparent;
  position: relative;
  z-index: 10;
  padding: 4px 0;
}

.acc-node-toolbar .acc-select {
  min-width: 130px;
}

.acc-danger-btn {
  color: #fb7185 !important;
  border-color: rgba(251, 113, 133, .28) !important;
}

.acc-profile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acc-profile-item {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.acc-profile-item:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.06);
}

.acc-profile-item.active {
  border-color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.1);
}

.acc-profile-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.acc-profile-item strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
}

.acc-profile-item small {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.acc-profile-badge {
  flex-shrink: 0;
  font-size: 11px;
  padding-top: 2px;
}

.acc-profile-traffic {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acc-profile-traffic-empty {
  padding-top: 2px;
}

.acc-profile-traffic-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.acc-profile-traffic-remain {
  color: var(--text-primary);
  font-weight: 600;
}

.acc-profile-traffic-used {
  color: var(--text-secondary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
}

.acc-profile-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.acc-profile-progress-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.acc-profile-progress-bar.warn {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.acc-profile-progress-bar.danger {
  background: linear-gradient(90deg, #ef4444, #fb7185);
}

.acc-profile-traffic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--text-secondary);
}

.acc-node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 88px;
  align-items: stretch;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 2px;
  flex: 1;
  min-height: 0;
}

.acc-node-grid-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.acc-node-grid-wrap .acc-node-grid {
  flex: 1;
  min-height: 0;
}

.acc-delay-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 16, 0.55);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  pointer-events: all;
}

.acc-delay-overlay[hidden] {
  display: none !important;
}

.acc-delay-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(20, 22, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.acc-delay-overlay-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-delay-overlay-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.acc-btn-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent-color, #8b7cff);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.acc-btn-spinner-lg {
  width: 22px;
  height: 22px;
  border-width: 2.5px;
  margin-bottom: 2px;
}

.acc-delay-btn.is-loading {
  opacity: 0.95;
  cursor: wait;
  min-width: 88px;
}

.acc-node-grid.is-testing .acc-node-card {
  /* 测速中禁止点选节点，但保留网格滚轮滚动 */
  pointer-events: none;
}

.dash-channels-grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 10px 0;
}

.channel-status-tile {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}

.channel-status-tile:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.channel-status-tile .tile-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.channel-status-tile .tile-icon svg {
  display: block;
}

.channel-status-tile.online .tile-icon {
  color: #4caf50;
}

.channel-status-tile:hover .tile-icon {
  color: var(--accent-color);
}

.channel-status-tile .tile-name {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 5px;
  opacity: 0.85;
  font-weight: 500;
  transition: color 0.3s ease;
}

.channel-status-tile:hover .tile-name {
  color: var(--text-primary);
}

/* 挂角指示灯伪元素 */
.channel-status-tile::after {
  content: " ";
  display: block;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-base, #111);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.channel-status-tile.offline::after {
  background: #55586a;
  box-shadow: none;
}

.channel-status-tile.online::after {
  background: #4caf50;
  box-shadow: 0 0 8px #4caf50;
}

.channel-status-tile.warning::after {
  background: #ff9800;
  box-shadow: 0 0 8px #ff9800;
}

.acc-node-card {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  padding: 10px 12px;
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.acc-node-card:hover {
  border-color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.12);
  z-index: 2;
}

.acc-node-card.selected {
  overflow: visible;
  z-index: 4;
  border: 2px solid var(--accent-color);
  background: rgba(var(--accent-rgb), 0.24);
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.22),
    0 8px 22px rgba(var(--accent-rgb), 0.35);
}

.acc-node-card.selected::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 3px solid #a855f7;
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.45),
    0 0 18px rgba(var(--accent-rgb), 0.95);
  z-index: 6;
  pointer-events: none;
}

.acc-node-card.selected .acc-node-meta {
  padding-top: 16px; /* 右上角大圆点不挡延迟数字 */
}

.acc-node-card.is-info {
  cursor: default;
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.22);
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
}

.acc-node-card.is-info:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

.acc-node-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.acc-node-meta {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.acc-flag-icon {
  width: 18px;
  height: 13.5px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  object-fit: cover;
}

.acc-node-name {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  padding-right: 4px;
  max-height: 2.7em;
}

.acc-node-type {
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-node-delay {
  font-family: var(--font-mono), 'Microsoft YaHei', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  min-width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.acc-node-delay-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.22);
  border-top-color: var(--accent-color);
  box-sizing: border-box;
  animation: acc-node-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes acc-node-spin {
  to { transform: rotate(360deg); }
}

.acc-node-card.is-info .acc-node-name {
  color: #7dd3fc;
  -webkit-line-clamp: 2;
}

.acc-node-card.is-info .acc-node-type,
.acc-node-card.is-info .acc-node-delay,
.acc-node-card.is-info .acc-node-meta {
  display: none;
}

.acc-node-info-value {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.acc-node-delay.latency-good,
.acc-group-node-delay.latency-good {
  color: #4ade80;
}

.acc-node-delay.latency-medium,
.acc-group-node-delay.latency-medium {
  color: #facc15;
}

.acc-node-delay.latency-bad,
.acc-group-node-delay.latency-bad {
  color: #f87171;
}

.acc-node-delay.latency-none,
.acc-group-node-delay.latency-none {
  color: var(--text-secondary);
}

.acc-node-delay.latency-testing,
.acc-group-node-delay.latency-testing {
  color: var(--accent-color);
}

.acc-group-node-delay.latency-testing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.acc-node-card.is-delay-testing {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.05);
}

/* 新增连接管理相关的表格及容器样式 */
.acc-connections-table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.acc-connections-table-container::-webkit-scrollbar-track {
  background: transparent;
}
.acc-connections-table-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.acc-connections-table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.acc-connections-table tr:hover {
  background: rgba(255, 255, 255, 0.015) !important;
}

.acc-connections-table th {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* 策略组分流转视图：占满节点网格同样的剩余高度，避免中间留白 */
.acc-groups-container {
  flex: 1 1 0;
  min-height: 0;
  display: none;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 2px 8px 0;
}

.acc-groups-container[hidden] {
  display: none !important;
}

/* 策略组相关的微调样式 */
.acc-group-card:hover {
  border-color: rgba(var(--accent-rgb), 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.acc-group-node-chip:hover {
  background: rgba(var(--accent-rgb), 0.1) !important;
  border-color: rgba(var(--accent-rgb), 0.3) !important;
}
.acc-group-node-chip.active:hover {
  background: rgba(var(--accent-rgb), 0.25) !important;
  border-color: var(--accent-color) !important;
}

.acc-empty {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  text-align: center;
  padding: 42px 12px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

.acc-controls-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 主控三卡网格 ── */
.acc-controls-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
  min-height: 245px;
}

.acc-ctrl-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.acc-ctrl-card:hover {
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
}

.acc-ctrl-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  height: 24px;
  min-height: 24px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.acc-ctrl-card-head-text {
  flex: 1;
  min-width: 0;
}

.acc-ctrl-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  line-height: 20px;
}

.acc-status-pill-inline {
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.2;
}

.acc-ctrl-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  flex-shrink: 0;
}

.acc-ctrl-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.acc-ctrl-card-sub {
  margin-top: 1px;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.75;
  line-height: 15px;
  height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-ctrl-card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.acc-ctrl-toggles,
.acc-seg-group {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  overflow: hidden;
}

.acc-ctrl-stats {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  overflow: hidden;
}

.acc-urow-primary {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.28);
  padding: 8px 12px;
  border-radius: 8px;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.acc-urow-primary:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.acc-urow-primary .acc-urow-name {
  font-size: 13px;
  font-weight: 600;
}

.acc-ctrl-sub-toggles {
  grid-row: span 2;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  min-height: 0;
  height: 100%;
  transition: opacity 0.2s ease;
}

.acc-ctrl-sub-toggles.is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

.acc-ctrl-sub-toggles.is-disabled .switch-slider-btn {
  cursor: not-allowed;
}

/* ── 通道开关行 ── */
.acc-urow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.2s, border-color 0.2s;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.acc-urow:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
}

.acc-urow-label {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.acc-urow-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-urow-desc {
  display: none !important;
}

.acc-urow .switch-slider-btn {
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin: 0;
}

/* ── 分段按钮组（出站模式） ── */
.acc-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  min-height: 0;
  height: 100%;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-sizing: border-box;
}

.acc-seg-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.acc-seg-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.acc-seg-hint {
  display: none !important;
}

.acc-seg-btn:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.acc-seg-btn:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent-color);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 4px 14px rgba(var(--accent-rgb), 0.1);
}

.acc-seg-btn:has(input:checked) .acc-seg-hint {
  opacity: 0.8;
  color: inherit;
}

/* ── 运行状态行 ── */
.acc-ustat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.acc-ustat:last-child {
  border-bottom: none;
}

.acc-ustat > span:first-child {
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
}

.acc-ustat > strong,
.acc-ustat-detect-val > strong {
  color: var(--text-primary);
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}

.acc-ustat-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: 0;
}

.acc-ustat-detect-val {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.acc-mini-btn {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  white-space: nowrap;
  color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.acc-mini-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.45);
}

/* ── 模式提示条 ── */
.acc-ctrl-hint {
  position: relative;
  flex-shrink: 0;
  padding: 11px 16px 11px 18px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.acc-ctrl-hint::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-color);
}

.acc-shield-tag .dot-green {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  flex-shrink: 0;
}

/* ── 底部：快捷操作 + 精简提示 ── */
.acc-ctrl-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.acc-ctrl-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.acc-action-btn {
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}

.acc-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent-color);
  transform: translateY(-1px);
}

.acc-ctrl-tips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.acc-tip-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  cursor: default;
}

.acc-tip-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45);
  flex-shrink: 0;
}

.acc-tip-chip strong {
  flex-shrink: 0;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
}

.acc-tip-chip span:not(.acc-tip-chip-dot) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 11px;
  opacity: 0.75;
}

#acc-panel-controls.active {
  overflow: hidden;
}


.acc-status-pill {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
}

.acc-status-pill.enabled {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.1);
}

.acc-select {
  min-width: 180px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  padding: 0 12px;
  outline: none;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.acc-select:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.acc-country-pill {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}
.acc-country-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.acc-country-pill.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.acc-filter-sep {
  width: 1px;
  align-self: stretch;
  min-height: 18px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.acc-country-pill.acc-latency-pill[data-latency="available"].active {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.55);
  color: #4ade80;
}

.acc-country-pill.acc-latency-pill[data-latency="timeout"].active {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.acc-select:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.02);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

@media (max-width: 1280px) {
  .acc-ctrl-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acc-tip-chip {
    flex-wrap: wrap;
  }

  .acc-tip-chip span:not(.acc-tip-chip-dot) {
    flex: 1 1 100%;
    padding-left: 14px;
  }
}

@media (max-width: 1050px) {
  .acc-controls-hero {
    grid-template-columns: 1fr;
    flex: none;
  }

  .acc-ctrl-actions,
  .acc-ctrl-tips {
    grid-template-columns: 1fr;
  }

  #acc-panel-controls.active {
    overflow-y: auto;
  }

  .acc-import-grid {
    grid-template-columns: 1fr;
  }

  .acc-card-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1050px) {
  .acc-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .acc-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .acc-import-fields,
  .acc-node-toolbar {
    flex-wrap: wrap;
  }
}

/* 模块标题 */
.view-header {
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* 当 .view-header 被包在 .view-header-row（标题+右侧工具栏）里时，去掉它自身的下边距，
   否则会与外层 row 的 margin-bottom 叠成双倍空隙、把 header 撑高（roles/terminal/syslogs 之前 72px 的元凶）。 */
.view-header-row .view-header {
  margin-bottom: 0;
}

.view-header h2 {
  font-size: 22px;
  font-weight: 700;
}

.view-header p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

#config-view .config-view-header h2 {
  line-height: 1.35;
}

#config-view .config-view-header p {
  margin-top: 10px;
  line-height: 1.5;
}

#config-view .config-header-actions .btn-primary,
#config-view .config-header-actions .btn-cancel {
  white-space: nowrap;
}

/* --- 控制台 Tab --- */
.console-grid {
  display: flex;
  flex: 1;
  gap: 20px;
  min-height: 0;
}

.console-left {
  position: relative; /* 确保子背景绝对定位生效 */
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  min-height: 0;
  min-width: 0; /* 强制防止被超长日志行强行撑开宽度，从而挤压右边卡片 */
}

.btn-clear-logs {
  position: absolute;
  top: 16px;
  right: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.btn-clear-logs:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-clear-logs:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.96);
}

.btn-clear-logs:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 终端机器人科技背景底纹 */
.terminal-bg-robot {
  display: none; /* 移除机器人背景 */
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 340px;
  color: #ffffff;
  opacity: 0.16;
  pointer-events: none; /* 防止鼠标误选、阻碍终端文字交互 */
  z-index: 0;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: robot-pulse-stopped 5s ease-in-out infinite;
}

/* 保证日志文本浮在背景上方 */
.log-terminal {
  position: relative;
  z-index: 1;
}

/* 状态：未启用 - 白色慢速呼吸 */
@keyframes robot-pulse-stopped {
  0% {
    opacity: 0.12;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.05));
  }
  50% {
    opacity: 0.22;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
  }
  100% {
    opacity: 0.12;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.05));
  }
}

/* 状态：启动中 - 白色紧急跃动呼吸 */
.console-left.starting .terminal-bg-robot {
  color: #ffffff;
  opacity: 0.25;
  animation: robot-pulse-starting 1s ease-in-out infinite;
}

@keyframes robot-pulse-starting {
  0% {
    opacity: 0.15;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.1));
  }
  50% {
    opacity: 0.32;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.3));
  }
  100% {
    opacity: 0.15;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.1));
  }
}

/* 状态：运行中 - 白色静止极其微弱底纹 */
.console-left.running .terminal-bg-robot {
  color: #ffffff;
  opacity: 0.035;
  transform: translate(-50%, -50%) scale(1);
  animation: robot-pulse-running 8s ease-in-out infinite;
}

@keyframes robot-pulse-running {
  0% { opacity: 0.015; }
  50% { opacity: 0.035; }
  100% { opacity: 0.015; }
}

@keyframes terminalPulse {
  0%, 100% { box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.04); }
  50% { box-shadow: inset 0 0 28px rgba(var(--accent-rgb), 0.09); }
}

@keyframes logFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.console-dashboard-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: hidden; /* 绝对禁止外层产生滚动条，避免阻断里层日志流滚动吸附 */
  min-height: 0;
  box-sizing: border-box;
}

.dashboard-metrics-row {
  display: flex;
  gap: 12px;
}

.dash-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px 16px;
  position: relative;
  min-width: 0; /* 允许 flex 容器内的子级收缩以触发 text-overflow */
}

.dash-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}

.dash-card-icon svg {
  display: block;
}

.dash-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0; /* 允许文本截断 */
  flex: 1;
}

.dash-card-label {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.8;
}

.dash-card-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.status-indicator-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-indicator-dot.stopped { background: #ff5252; box-shadow: 0 0 8px #ff5252; }
.status-indicator-dot.running { background: #4caf50; box-shadow: 0 0 8px #4caf50; }

.dashboard-channels-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-activity-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0; /* 关键：允许被 flex 父容器限高，内部 stream 才能产生滚动条 */
}

.dash-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-channels-grid {
  display: flex;
  gap: 12px;
}

.channel-status-tile {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px 16px;
}

.tile-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tile-icon { font-size: 18px; }
.tile-name { font-size: 12.5px; color: var(--text-primary); font-weight: 500; }

.tile-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: bold;
}
.tile-badge.offline { background: rgba(255,255,255,0.05); color: var(--text-secondary); }
.tile-badge.online { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.tile-badge.warning { background: rgba(255, 152, 0, 0.15); color: #ff9800; }

.dash-activity-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.activity-item-empty {
  color: var(--text-secondary);
  font-size: 12.5px;
  text-align: center;
  margin: auto 0;
}

.activity-log-line {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  position: relative;
}

/* 打字机闪烁光标 */
.activity-log-line.typing::after {
  content: '▌';
  color: var(--accent-color, #ff9800);
  animation: blink-cursor 0.5s steps(2) infinite;
  font-size: 14px;
  margin-left: 1px;
  vertical-align: baseline;
}

@keyframes blink-cursor {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.activity-log-line:last-child {
  border-bottom: none;
}

.console-right {
  width: 192px; /* 增加到 192px 宽度，配合 padding 确保内部元素（如运行时间、载入插件）不折行 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start; /* 内容按需高度、顶部对齐，不被拉伸留大片空白 */
  gap: 6px; /* 统一设为 6px 间隙，与内部卡片间隙完美对齐 */
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}



.console-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 0;
  flex: 1 1 auto; /* 撑满右列可用高度，让末尾的引擎卡片能向下延伸 */
  min-height: 0;
}

/* 引擎服务配置卡片：自适应撑高，填满到底部「应用运行时间」上方 */
#console-system-info-panel {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  overflow-y: auto;
}

.stat-card-mini {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  min-height: 38px;
}

.stat-card-mini span {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.stat-card-name-val {
  font-size: 14px;
  font-weight: 700;
}

/* --- 配置面板 Tab --- */
.config-scrollable {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}

.form-group-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.form-group-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  border-left: 3px solid var(--accent-color);
  padding-left: 10px;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field.half {
  max-width: 50%;
}

.form-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select:not(.chat-model-select-hidden):not(#chat-model-select):not(#stats-model-select), textarea {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  height: 38px;
  padding: 0 12px;
  color: var(--text-primary) !important;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

select option {
  background-color: var(--bg-panel) !important; /* 强制暗系夜空背景，拒绝惨白底色 */
  color: var(--text-primary) !important;
}

.form-field input:focus, .form-field select:focus {
  border-color: var(--border-focus);
}

#model-teacher[disabled],
#model-teacher[readonly] {
  opacity: 0.72;
  cursor: not-allowed;
  color: var(--text-secondary);
}

.action-bar-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-color) 0%, rgba(var(--accent-rgb), 0.8) 100%);
  color: var(--accent-text);
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
  filter: brightness(1.15);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: scale(0.98);
}

.btn-secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.04);
}

.btn-secondary.acc-danger-btn {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
}

.btn-secondary.acc-danger-btn:hover {
  background: rgba(248, 113, 113, 0.25);
  border-color: rgba(248, 113, 113, 0.6);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.3);
}

#btn-reset-builtin-terminal:hover,
#btn-copy-system-logs:hover {
  background: rgba(59, 130, 246, 0.35) !important;
  border-color: rgba(99, 102, 241, 0.75) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px);
}

#btn-clear-system-logs:hover {
  background: rgba(239, 68, 68, 0.35) !important;
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px);
}

#config-reset-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px);
}



/* --- 插件卡片 Tab --- */
/* --- 语音管理 --- */
.voice-notice {
  margin: 0 0 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.voice-section-label {
  margin: 8px 0 12px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.voice-pack-card .plugin-card-top p {
  min-height: 54px;
}

.voice-pack-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 0 0;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.voice-pack-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.voice-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--border-color);
  color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.12);
  white-space: nowrap;
}

.plugins-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* safe center：卡片不足一屏时整体垂直居中，铺满/超出时回退为顶部对齐并正常滚动，不会裁切 */
  align-content: safe center;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 24px;
  position: relative;
  z-index: 1;
  /* 悬停上浮/阴影不得盖住上方标题说明 */
  isolation: isolate;
}

/* 标题层压在卡片之上，避免 hover 上浮挡住说明文字 */
#plugins-view > .view-header,
#skills-view > .view-header,
#voice-view > .view-header {
  position: relative;
  z-index: 2;
  margin-bottom: 20px; /* 统一为控制面板一致的 20px header→内容间距 */
}

/* 技能中心：固定头栏，下方网格可滚动 */
#skills-view {
  overflow: hidden;
  min-height: 0;
}
#skills-view .skills-toolbar,
#skills-view .skills-hint {
  flex-shrink: 0;
}
#skills-view .skills-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#skills-view .plugins-masonry {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.skills-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.skills-tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}
.skills-tab.active {
  color: var(--text-primary);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.12);
}
.skills-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.skills-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}
.skills-clawhub-bar {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-bottom: 12px;
  align-items: center;
}
.skills-clawhub-bar input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
}
.skills-clawhub-banner {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 2px 2px 4px;
  letter-spacing: 0.02em;
}
.skills-clawhub-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* 技能卡片：统一高度、说明两行截断、底栏操作 */
#skills-view .plugins-masonry {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-content: start;
}
.skill-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 168px;
  padding: 16px;
  background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.skill-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(255,255,255,0.02) 100%);
  transform: translateY(-1px);
}
.skill-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.skill-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.skill-card-icon.pending {
  background: rgba(255, 180, 60, 0.12);
  border-color: rgba(255, 180, 60, 0.28);
}
.skill-card-icon.store {
  background: rgba(80, 180, 255, 0.12);
  border-color: rgba(80, 180, 255, 0.28);
}
.skill-card-titles {
  min-width: 0;
  flex: 1;
}
.skill-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-card-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-card-desc {
  margin: 0;
  flex: 0 0 auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-height: calc(1.55em * 2);
  min-height: calc(1.55em * 2);
}
.skill-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.skill-card-status {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
}
.skill-card-status.on {
  color: #8fd9a8;
  border-color: rgba(100, 200, 140, 0.35);
  background: rgba(80, 180, 120, 0.1);
}
.skill-card-status.wait {
  color: #f0c070;
  border-color: rgba(240, 180, 80, 0.35);
  background: rgba(240, 180, 80, 0.1);
}
.skills-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  justify-content: flex-end;
}
.skills-card-actions button {
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.skills-card-actions button:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
}
.skills-card-actions button.primary {
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), 0.16);
}
.skills-card-actions button.danger {
  border-color: rgba(255, 100, 100, 0.3);
  color: #ff9a9a;
}
.skills-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 500;
}
.skill-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}

/* 内置插件页：卡片网格撑满可用高度（行拉伸，卡片随之增高；内容 space-between 自然分布，开关沉到底部） */
#plugins-view .plugins-masonry {
  align-content: stretch;
}

.plugin-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.plugin-card-item:hover {
  /* 轻微下移阴影，避免向上糊住标题区 */
  transform: translateY(-1px);
  border-color: var(--border-focus);
  box-shadow: 0 14px 28px -10px rgba(var(--accent-rgb), 0.28);
  z-index: 1;
}

.plugin-card-top h4 {
  font-size: 14px;
  font-weight: 700;
}

.plugin-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.plugin-card-title-row h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.plugin-avail-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}

.plugin-avail-badge.ready {
  color: #1b7a3d;
  background: rgba(46, 204, 113, 0.18);
}

.plugin-avail-badge.needs-config {
  color: #9a6b00;
  background: rgba(241, 196, 15, 0.2);
}

.plugin-avail-badge.needs-software {
  color: #8a3a00;
  background: rgba(230, 126, 34, 0.2);
}

.plugin-avail-badge.missing-runtime {
  color: #8b1e2d;
  background: rgba(231, 76, 60, 0.18);
}

.plugin-card-hint {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  opacity: 0.9;
}

.plugin-card-top p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.plugin-card-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch-slider-btn {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch-slider-btn input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-knob {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: .25s;
  border-radius: 24px;
  border: 1px solid var(--border-color);
}

.slider-knob:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
}

input:checked + .slider-knob {
  background-color: var(--accent-color);
}

input:checked + .slider-knob:before {
  transform: translateX(20px);
}

.switch-slider-btn.is-locked {
  opacity: 0.72;
  cursor: not-allowed;
}

.switch-slider-btn.is-locked .slider-knob,
.switch-slider-btn input:disabled + .slider-knob {
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Token 仪表盘 Tab --- */
.dashboard-grid {
  display: flex;
  gap: 20px;
  flex: 1;
}

.chart-panel-large {
  flex: 1.5;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chart-panel-small {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chart-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.svg-chart-container {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- 新手遮罩引导系统 --- */
.guide-overlay-mask {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
  display: none;
  justify-content: center;
  align-items: center;
}

.guide-step-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 105;
  width: 380px;
  background: var(--bg-panel);
  border: 2px solid var(--accent-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), var(--accent-glow);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.guide-title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
}

.guide-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.guide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.guide-steps-indicator {
  font-size: 12px;
  color: var(--text-secondary);
}

.guide-btn-group {
  display: flex;
  gap: 8px;
}

.guide-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}

.guide-btn.next {
  background: var(--accent-color);
  border-color: transparent;
  color: var(--accent-text, #fff);
}

/* --- 微信 / 飞书扫码弹出遮罩（需高于全局 plugin-async-overlay，避免挡码） --- */
.qrcode-overlay-mask {
  opacity: 0;
  transition: opacity 0.2s ease;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9700;
  display: none;
  justify-content: center;
  align-items: center;
}

.qrcode-box-card {
  width: 320px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.qrcode-image-container {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode-image-container img {
  width: 100%;
  height: 100%;
}

.qrcode-close-btn {
  background: var(--accent-color);
  color: var(--accent-text, white);
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 动效 */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 16px var(--accent-color); }
  100% { transform: scale(1); opacity: 0.9; }
}

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

@keyframes scaleUp {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

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

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* 动态提供商与模型管理组件样式 */
.provider-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.3s ease;
}

.provider-card:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.15);
}

.provider-card.collapsed {
  padding-bottom: 12px;
}

.provider-card.collapsed .provider-card-body {
  display: none !important;
}

.provider-card.collapsed .provider-card-header {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.provider-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 10px;
}

.provider-card-header h3 {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.provider-card-header .provider-title-wrap {
  min-width: 0;
}

.provider-card-header .provider-label-input:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.provider-card-header .provider-label-input:focus {
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.btn-delete-provider {
  background: rgba(211, 47, 47, 0.1);
  color: #ff5252;
  border: 1px solid rgba(211, 47, 47, 0.2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-delete-provider:hover {
  background: #d32f2f;
  color: white;
  border-color: transparent;
}

.provider-models-zone {
  margin-top: 16px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 14px;
}

.provider-models-zone h4 {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-weight: 600;
}

.model-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.model-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-primary);
}

.model-tag-del {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: bold;
  font-size: 10px;
  transition: color 0.15s ease;
}

.model-tag-del:hover {
  color: #ff5252;
}

.add-model-input-row {
  display: flex;
  gap: 8px;
}

.add-model-input-row input {
  flex: 1;
  height: 30px !important;
  font-size: 12px !important;
}

.btn-add-model {
  background: var(--accent-color);
  color: var(--accent-text, white);
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;
}

.btn-add-provider-box {
  border: 2px dashed var(--border-color);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all 0.25s ease;
  margin-bottom: 20px;
}

.btn-add-provider-box:hover {
  border-color: var(--accent-color);
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), 0.02);
}

/* 自定义模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 420px;
  padding: 24px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  z-index: 1001;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: #ff5252;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.btn-wechat-unbind {
  background: rgba(255, 82, 82, 0.12);
  color: #ff5252;
  border: 1px solid rgba(255, 82, 82, 0.25);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-wechat-unbind:hover {
  background: #ff5252;
  color: white;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(255, 82, 82, 0.4);
}

/* 全局聚焦状态高光与彩色光标 */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-color) !important;
  box-shadow: var(--accent-glow-reduced) !important;
  outline: none !important;
  caret-color: var(--accent-color) !important; /* 彩色闪烁光标，暗色背景下 100% 显眼 */
  background: rgba(255, 255, 255, 0.05) !important;
}

.btn-wechat-bind {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-wechat-bind:hover {
  background: var(--accent-color);
  color: var(--accent-text, white);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

#dashboard-view.active, #chat-view.active {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
/* --- 侧边栏折叠与展开面板 --- */

.sidebar.collapsed {
  width: 74px;
  padding: 24px 10px;
}

/* 折叠态导航左右对称；滚动条不占宽度，否则图标会被挤向左侧 */
.sidebar.collapsed .sidebar-nav {
  margin: 0 -10px;
  padding: 8px 10px;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/旧 Edge */
}

.sidebar.collapsed .sidebar-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.sidebar.collapsed .sidebar-nav::-webkit-scrollbar-thumb,
.sidebar.collapsed .sidebar-nav::-webkit-scrollbar-track {
  background: transparent !important;
}

/* 隐藏折叠状态下的图标旁的长文字 */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px 0;
  font-size: 0 !important;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.sidebar.collapsed .nav-item svg {
  margin: 0 !important;
}

/* 折叠状态下的网关核心状态灯 */
.sidebar.collapsed .status-badge-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  justify-content: center !important;
}

.sidebar.collapsed .status-light-btn-container {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  width: 36px !important;
  height: 36px !important;
}

.sidebar.collapsed .status-light-btn-container svg {
  width: 18px !important;
  height: 18px !important;
}

.sidebar.collapsed .status-text-zone,
.sidebar.collapsed .status-app-icon,
.sidebar.collapsed .status-percentage {
  display: none !important;
}

/* 折叠状态下隐藏的面板 */
.sidebar.collapsed .theme-picker-panel {
  display: none !important;
}

/* 运行状态微型趋势图表容器样式 */
.sidebar-mini-chart-container {
  margin-bottom: 4px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s ease;
}

/* 展开状态下嵌套在网关负载盒子里的微型折叠按钮 */
.collapse-toggle-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.collapse-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* 默认微型按钮内的图标大小 */
.collapse-toggle-btn svg.toggle-icon {
  width: 13px !important;
  height: 13px !important;
}

/* 折叠状态下隐藏图表和数值，但保留折叠按钮并转化为大卡片按钮 */
.sidebar.collapsed .sidebar-bottom {
  margin: 0 -10px;
  align-items: center;
}

.sidebar.collapsed .sidebar-mini-chart-container {
  background: transparent !important;
  border: none !important;
  padding: 0 10px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
}

.sidebar.collapsed .sidebar-mini-chart-container span,
.sidebar.collapsed .sidebar-mini-chart-container canvas {
  display: none !important;
}

/* 破除残留 Flex div 的干扰，使其直接定位 */
.sidebar.collapsed .sidebar-mini-chart-container > div,
.sidebar.collapsed .sidebar-mini-chart-container > div > div {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 折叠状态下转化为居中且与导航图标同轴的卡片按钮 */
.sidebar.collapsed .collapse-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

.sidebar.collapsed .collapse-toggle-btn:hover {
  border-color: var(--accent-color) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--accent-glow) !important;
}

/* 折叠状态下，将图标尺寸恢复放大为 18px */
.sidebar.collapsed .collapse-toggle-btn svg.toggle-icon {
  width: 18px !important;
  height: 18px !important;
}

/* 临时屏蔽过渡动画的辅助类（用于隔离伸缩动作与平时Hover渐变） */
.sidebar.no-transition,
.sidebar.no-transition * {
  transition: none !important;
}

/* 极客终端进度条 */
.terminal-progress-container {
  margin-top: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeIn 0.3s ease;
}

.terminal-progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.terminal-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-color) 0%, rgba(var(--accent-rgb), 0.5) 50%, var(--accent-color) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: shimmer 1.5s infinite linear;
}

.terminal-progress-text {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
}

@keyframes shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}

/* 侧边栏百分比显示 */
.status-percentage {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.status-badge-container.starting .status-percentage {
  color: #1a1208;
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.35);
  animation: pulse-sidebar 1.5s infinite ease-in-out;
}

.status-badge-container.running .status-percentage {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  opacity: 1;
}

.status-badge-container.stopped .status-percentage {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.18);
}

@keyframes pulse-sidebar {
  0% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0.6; transform: scale(0.98); }
}

.app-uptime-zone {
  margin-top: auto; /* 恢复 margin-top: auto，作为卡片页脚稳固沉到底部对齐 */
  padding-top: 6px; /* 统一设为 6px 间隙 */
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.85;
  width: 100%;
  box-sizing: border-box;
}

#stat-app-uptime {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-color);
}

/* --- 配置文件纵向堆叠布局 --- */
.config-preview-panel {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin-top: 24px;
}

.config-preview-panel h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  border-left: 3px solid var(--accent-color);
  padding-left: 10px;
}

.config-json-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 480px;
  height: 540px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #81c784; /* 精美护眼护眼绿 */
  background: #07050b;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
  resize: vertical;
  outline: none;
  transition: all 0.3s ease;
}

.config-json-textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
  background: var(--bg-input);
}

.json-error-msg {
  color: #ff5252;
  font-size: 12px;
  font-weight: bold;
  display: none;
  background: rgba(255, 82, 82, 0.08);
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #ff5252;
  line-height: 1.5;
}

#system-logs-view.active {
  display: flex !important;
  flex-direction: column;
}

.terminal-open-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.terminal-open-btn:hover {
  background: var(--accent-color);
  color: var(--accent-text, white);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}

.terminal-open-btn:active {
  transform: translateY(0);
}

/* AI Pulse Visualizer */
.pulse-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff; /* 纯白高对比度文字 */
  background: rgba(255, 255, 255, 0.08); /* 提高背景明度 */
  padding: 4px 10px; /* 稍微增宽 */
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15); /* 强化边框线，增加质感 */
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.badge-dot.green { background: #00e676; box-shadow: 0 0 6px #00e676; }
.badge-dot.purple { background: var(--accent-color); box-shadow: 0 0 6px var(--accent-color); }
.badge-dot.red { background: #ff4d4f; box-shadow: 0 0 6px #ff4d4f; }
.badge-dot.gray { background: #555; }

.pulse-visualizer {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}
.pulse-visualizer .bar {
  width: 3px;
  background: var(--accent-color);
  border-radius: 2px;
  opacity: 0;
  height: 14px;
  transform: scaleY(0.35);
  transform-origin: center;
  will-change: transform;
  /* 用 transform 动画，避免改 height 触发整页 layout */
  transition: opacity 0.3s ease;
}
.pulse-visualizer.active .bar {
  animation: pulse-bar 1s infinite alternate ease-in-out;
  opacity: 0.85;
}
.pulse-visualizer.active .bar:nth-child(3n+1) { animation-delay: -0.2s; animation-duration: 0.8s; }
.pulse-visualizer.active .bar:nth-child(3n+2) { animation-delay: -0.5s; animation-duration: 0.65s; }
.pulse-visualizer.active .bar:nth-child(3n) { animation-delay: -0.8s; animation-duration: 1.05s; }
.pulse-visualizer.active .bar:nth-child(4n+1) { animation-delay: -0.35s; animation-duration: 0.9s; }

@keyframes pulse-bar {
  0% { transform: scaleY(0.28); }
  100% { transform: scaleY(1); }
}

@keyframes pulse-circle {
  0% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 255, 255, 0.25); border-radius: 50%; }
  50% { transform: scale(1.1); box-shadow: 0 0 16px rgba(255, 255, 255, 0.55); border-radius: 50%; }
  100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 255, 255, 0.25); border-radius: 50%; }
}

.console-go-bind-btn {
  color: var(--accent-color) !important;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  width: 100%;
}

.console-go-bind-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
  transform: translateY(-1px);
}

.console-go-bind-btn:active {
  transform: translateY(0);
}

/* 隐藏左上角启动卡片下面的启用/未启用状态文字，保持界面极简 */
#status-label {
  display: none !important;
}

/* 骨架屏动画与样式 */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.skeleton-title {
  width: 60%;
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  animation: skeleton-pulse 1.4s infinite ease-in-out;
  margin-bottom: 4px;
}
.skeleton-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skeleton-label {
  width: 40%;
  height: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  animation: skeleton-pulse 1.4s infinite ease-in-out;
}
.skeleton-value {
  width: 90%;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  animation: skeleton-pulse 1.4s infinite ease-in-out;
}
@keyframes skeleton-pulse {
  0% { opacity: 0.35; }
  50% { opacity: 0.7; }
  100% { opacity: 0.35; }
}

/* 卡片加载遮罩层 */
.card-loading-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 14, 21, 0.75);
  backdrop-filter: blur(1.5px);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  z-index: 10;
  pointer-events: auto; /* 阻止对卡片的点击操作 */
  transition: all 0.25s ease;
}
.card-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: card-spin 0.85s infinite linear;
}
@keyframes card-spin {
  to { transform: rotate(360deg); }
}

/* 自定义 Autocomplete 推荐下拉框 */
.custom-autocomplete-dropdown {
  position: absolute;
  z-index: 10000;
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--accent-rgb), 0.1);
  max-height: 220px;
  overflow-y: auto;
  min-width: 250px;
  padding: 6px 0;
  margin-top: 4px;
}

.custom-autocomplete-item {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
  white-space: nowrap;
}

.custom-autocomplete-item:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.05) 100%);
  color: var(--text-primary);
  padding-left: 18px; /* 轻微的向右滑入微动画 */
}

/* 针对 Light 主题做适配 */
.theme-light .custom-autocomplete-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(98, 0, 238, 0.15);
  box-shadow: 0 10px 30px rgba(98, 0, 238, 0.1);
}

.theme-light .custom-autocomplete-item {
  color: #2a253d;
}

.theme-light .custom-autocomplete-item:hover {
  background: rgba(98, 0, 238, 0.08);
  color: #6200ee;
}

/* 自定义模拟 Select */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100%; /* 宽度占满父容器 */
}

/* 展开时抬高自身；父行也要抬，否则 backdrop-filter 形成的层叠上下文会被下一行盖住 */
.custom-select-wrapper.active {
  z-index: 10050;
}

#settings-view .form-group-section > div:has(.custom-select-wrapper.active),
.form-group-section > div:has(.custom-select-wrapper.active),
.form-field:has(.custom-select-wrapper.active),
.settings-language-module:has(.custom-select-wrapper.active) {
  position: relative;
  z-index: 100;
}

/* 系统设置 · 菜单排序 */
.settings-menu-order-card {
  padding: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.settings-menu-order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.settings-menu-order-head:hover {
  background: rgba(255, 255, 255, 0.03);
}
.settings-menu-order-copy {
  min-width: 0;
  flex: 1;
}
.settings-menu-order-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
}
.settings-menu-order-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}
.settings-menu-order-chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.settings-menu-order-card:not(.is-collapsed) .settings-menu-order-chevron {
  transform: rotate(180deg);
  color: var(--accent-color);
  border-color: rgba(var(--accent-rgb), 0.45);
}
.settings-menu-order-body {
  padding: 0 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-menu-order-card.is-collapsed .settings-menu-order-body {
  display: none;
}
.settings-menu-order-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 8px;
}
.settings-menu-order-reset {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}
.settings-menu-order-reset:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent-color);
}
.settings-menu-order-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-menu-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.12);
}
.settings-menu-order-index {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.12);
  flex-shrink: 0;
}
.settings-menu-order-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-menu-order-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.settings-menu-order-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.settings-menu-order-btn:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent-color);
}
.settings-menu-order-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  height: 38px;
  padding: 0 12px;
  color: var(--text-primary) !important;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.custom-select-trigger:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
}

.custom-select-wrapper.active .custom-select-trigger {
  border-color: var(--border-focus);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}

.custom-select-arrow {
  font-size: 10px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  pointer-events: none;
  margin-left: 6px;
}

.custom-select-wrapper.active .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  background: var(--bg-input);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--accent-rgb), 0.1);
  max-height: 220px;
  overflow-y: auto;
  min-width: 100%; /* 与 trigger 同宽 */
  padding: 6px 0;
  margin-top: 4px;
  display: none; /* 默认隐藏 */
}

.custom-select-wrapper.active .custom-select-options {
  display: block;
}

.custom-select-option {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
  white-space: nowrap;
}

.custom-select-option:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.05) 100%);
  color: var(--accent-color);
  padding-left: 18px;
}

.custom-select-option.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-color);
  font-weight: bold;
}

/* 自定义 Select 禁用态 */
.custom-select-wrapper.disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* --- Stepper Mode View Styles --- */
.btn-toggle-view-mode {
  position: absolute;
  top: 16px;
  right: 132px; /* Sits to the left of "Clear Logs" button */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.btn-toggle-view-mode:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-toggle-view-mode:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.96);
}

.step-progress-wrapper {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 10px 6px;
  min-height: 0;
  overflow: hidden; /* 一屏展示，不出现内部滚动条 */
}

.stepper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
}

.stepper-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.stepper-status-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.stepper-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.stepper-item {
  display: flex;
  gap: 16px;
  min-height: 72px;
  position: relative;
  transition: all 0.3s ease;
}

.step-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
}

.step-icon-status {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}

.step-line {
  width: 2px;
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
}

.step-content {
  flex: 1;
  padding-top: 1px;
}

.step-title-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.step-desc-text {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
  line-height: 1.4;
}

/* --- Stepper States --- */

/* Pending (默认) */
.stepper-item.pending .step-icon-status {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

.stepper-item.pending .step-dot {
  background: rgba(255, 255, 255, 0.2);
}

/* Active (进行中) */
.stepper-item.active .step-icon-status {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent-color);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
  animation: step-active-pulse 2s infinite ease-in-out;
}

.stepper-item.active .step-dot {
  background: var(--accent-color);
  box-shadow: 0 0 6px var(--accent-color);
  width: 8px;
  height: 8px;
}

.stepper-item.active .step-title-text {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.15);
}

.stepper-item.active .step-desc-text {
  color: var(--text-secondary);
}

@keyframes step-active-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 10px 4px rgba(var(--accent-rgb), 0.15); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* Completed (已完成) */
.stepper-item.completed .step-icon-status {
  background: rgba(0, 230, 118, 0.12);
  border-color: #00e676;
  box-shadow: 0 0 6px rgba(0, 230, 118, 0.2);
}

.stepper-item.completed .step-icon-status::after {
  content: '✓';
  color: #00e676;
  font-size: 11px;
  font-weight: 900;
  position: absolute;
}

.stepper-item.completed .step-dot {
  display: none;
}

.stepper-item.completed .step-line {
  background: #00e676;
  box-shadow: 0 0 2px rgba(0, 230, 118, 0.3);
}

.stepper-item.completed .step-title-text {
  color: var(--text-secondary);
  text-decoration: none;
}

.stepper-item.completed .step-desc-text {
  color: rgba(255, 255, 255, 0.3);
}

/* Light Theme overrides for Stepper */
.theme-light .btn-toggle-view-mode {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
}
.theme-light .btn-toggle-view-mode:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}
.theme-light .stepper-status-text {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
.theme-light .step-icon-status {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
.theme-light .step-dot {
  background: rgba(0, 0, 0, 0.3);
}
.theme-light .step-line {
  background: rgba(0, 0, 0, 0.06);
}
.theme-light .step-desc-text {
  color: rgba(0, 0, 0, 0.45);
}
.theme-light .stepper-item.completed .step-desc-text {
  color: rgba(0, 0, 0, 0.35);
}

/* --- Watermark subtle overlay --- */
.console-left .terminal-bg-robot {
  opacity: 0.025 !important;
  animation: none !important; /* Disable pulse animations to reduce visual noise */
}

/* --- Console Left Header layout --- */
.console-left-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
  width: 100%;
  box-sizing: border-box;
  z-index: 10;
  flex-shrink: 0;
}

.console-left-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.console-left-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.console-left-actions .btn-clear-logs,
.console-left-actions .btn-toggle-view-mode {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
}

.theme-light .console-left-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* --- Stepper / Topology 区域：贴紧顶部工具栏，不留大空白 --- */
.step-progress-wrapper {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 2px 4px;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

/* --- Topology / Message Flow（一屏自适应） --- */
.topology-container {
  container-type: size;
  container-name: topo;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.2cqh, 10px);
  min-height: 0;
  overflow: hidden;
}

.topology-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.topology-header-text {
  min-width: 0;
  flex: 1;
}

.topology-title {
  font-size: clamp(12px, 2.2cqh, 15px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  margin: 0;
  line-height: 1.2;
  text-transform: none;
  opacity: 1;
}

.topology-subtitle {
  font-size: clamp(9px, 1.5cqh, 11px);
  line-height: 1.35;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.topology-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
}

.topo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.topo-legend-item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255, 255, 255, 0.22);
}

.topo-legend-item.active i {
  background: var(--accent-color);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55);
}

.topo-legend-item.completed i {
  background: #00e676;
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.45);
}

.topology-flow {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2px, 0.8cqh, 6px);
}

.topo-stage {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    rgba(14, 11, 26, 0.35);
  border-radius: 10px;
  padding: clamp(6px, 1.2cqh, 10px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8cqh, 8px);
}

.topo-stage-channels {
  flex: 1.15 1 0;
}

.topo-stage-core {
  flex: 0.85 1 0;
}

.topo-stage-pair {
  flex: 1.1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(4px, 0.8cqw, 8px);
  align-items: stretch;
}

.topo-stage-pair > .topo-stage {
  min-width: 0;
  height: 100%;
}

.topo-stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}

.topo-stage-num {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-color), #5b4bdb);
  box-shadow: 0 3px 8px rgba(var(--accent-rgb), 0.25);
}

.topo-stage-copy {
  min-width: 0;
  flex: 1;
}

.topo-stage-title {
  font-size: clamp(11px, 1.7cqh, 12px);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo-stage-desc {
  font-size: 9px;
  line-height: 1.3;
  color: var(--text-secondary);
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topo-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 0.9cqw, 8px);
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.topo-node {
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.topo-channel-card,
.topo-engine-card,
.topo-client-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 10px;
  padding: clamp(8px, 1.4cqh, 12px) clamp(6px, 1cqw, 10px);
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(4px, 0.7cqh, 7px);
  box-sizing: border-box;
}

.topo-engine-card,
.topo-client-card {
  flex: 1;
}

.topo-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.topo-card-icon,
.topo-node .node-icon {
  width: clamp(28px, 4.2cqh, 36px);
  height: clamp(28px, 4.2cqh, 36px);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  margin: 0 auto;
}

.topo-card-name,
.topo-node .node-label {
  font-size: clamp(11px, 1.8cqh, 13px);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

.topo-card-hint {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.3;
  opacity: 0.85;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-align: center;
}

.topo-card-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  flex-shrink: 0;
}

.topo-core-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(8px, 1.4cqh, 12px);
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background:
    radial-gradient(circle at 12% 20%, rgba(var(--accent-rgb), 0.18), transparent 55%),
    rgba(255, 255, 255, 0.03);
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

.topo-core-glow {
  position: absolute;
  inset: auto auto -50% -8%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 70%);
  pointer-events: none;
}

.topo-core-icon {
  width: clamp(32px, 5cqh, 42px);
  height: clamp(32px, 5cqh, 42px);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.35), rgba(79, 70, 229, 0.2));
  border-color: rgba(var(--accent-rgb), 0.35);
}

.topo-core-body {
  min-width: 0;
  flex: 1;
}

.topo-core-name {
  font-size: clamp(12px, 2cqh, 14px);
  font-weight: 700;
  color: var(--text-primary);
}

.topo-core-status {
  margin-top: 2px;
  font-size: clamp(9px, 1.5cqh, 11px);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo-engine-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.topo-reply-row {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.topo-reply-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.3;
  flex-shrink: 0;
}

.topo-connector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: var(--text-secondary);
  flex-shrink: 0;
  min-height: 14px;
}

.topo-connector-inline {
  writing-mode: horizontal-tb;
  justify-content: center;
  align-self: center;
  padding: 0;
  min-width: 28px;
}

.topo-connector-inline .topo-connector-label {
  padding: 2px 6px;
  font-size: 9px;
}

.topo-connector-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  position: relative;
}

.topo-connector-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7));
  transform: translateY(-50%);
  animation: topo-flow-beam 1.8s linear infinite;
  opacity: 0.55;
}

.topo-connector-label {
  font-size: 9px;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
}

@keyframes topo-flow-beam {
  0% { left: 0; opacity: 0; }
  20% { opacity: 0.7; }
  100% { left: 72%; opacity: 0; }
}

.topology-footer {
  flex-shrink: 0;
  font-size: clamp(9px, 1.4cqh, 10px);
  line-height: 1.35;
  color: var(--text-secondary);
  padding: clamp(5px, 0.9cqh, 8px) 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo-lines-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* States */
.topo-node.pending .topo-card-badge,
.topo-node.pending#node-core .topo-card-badge {
  color: var(--text-secondary);
}

.topo-node.active {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 6px 16px rgba(var(--accent-rgb), 0.1);
}

.topo-node.active .topo-card-icon,
.topo-node.active .node-icon {
  color: #fff;
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.18);
  animation: node-pulse-anim 2s infinite ease-in-out;
}

.topo-node.active .topo-card-badge {
  color: #d8c7ff;
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.topo-node.completed {
  border-color: rgba(0, 230, 118, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.08), 0 6px 14px rgba(0, 230, 118, 0.06);
}

.topo-node.completed .topo-card-icon,
.topo-node.completed .node-icon {
  color: #b9ffd8;
  border-color: rgba(0, 230, 118, 0.4);
  background: rgba(0, 230, 118, 0.12);
}

.topo-node.completed .topo-card-badge {
  color: #00e676;
  background: rgba(0, 230, 118, 0.1);
  border-color: rgba(0, 230, 118, 0.28);
}

.topo-node.completed .topo-card-hint,
.topo-node.active .topo-card-hint,
.topo-node.completed .topo-core-status,
.topo-node.active .topo-core-status {
  color: var(--text-primary);
  opacity: 0.85;
}

.topo-node.unbound:not(.completed):not(.active) {
  opacity: 0.72;
}

.topo-node.bound-ready.completed .topo-card-hint {
  color: #7dffb5;
}

@keyframes node-pulse-anim {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.topology-map { display: none; }

/* 矮窗口：进一步压缩说明与提示，保证一屏 */
@container topo (max-height: 520px) {
  .topology-subtitle,
  .topo-stage-desc,
  .topo-card-hint {
    display: none;
  }
  .topology-legend {
    gap: 6px;
    padding: 3px 6px;
  }
  .topo-stage {
    padding: 5px 7px;
  }
  .topo-connector {
    min-height: 10px;
  }
}

@container topo (max-height: 420px) {
  .topology-footer {
    display: none;
  }
  .topo-reply-chip {
    display: none;
  }
  .topo-stage-pair {
    grid-template-columns: 1fr 1fr;
  }
  .topo-connector-inline {
    display: none;
  }
}

@container topo (max-width: 420px) {
  .topo-stage-pair {
    grid-template-columns: 1fr;
  }
  .topo-connector-inline {
    display: none;
  }
  .topology-legend span span {
    display: none;
  }
  .topo-channel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.theme-light .topo-stage,
.theme-light .topo-channel-card,
.theme-light .topo-engine-card,
.theme-light .topo-client-card,
.theme-light .topo-core-card,
.theme-light .topology-footer,
.theme-light .topology-legend,
.theme-light .topo-reply-chip {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.theme-light .topo-card-icon,
.theme-light .topo-node .node-icon {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.theme-light .topo-connector-line {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
}

.console-left.step-view-active .terminal-bg-robot {
  display: none !important;
}

/* 流程图视图下隐藏底部启动进度条：左侧按钮已有百分比，再占一行会把拓扑图顶扁 */
.console-left.step-view-active .terminal-progress-container {
  display: none !important;
}

/* ==========================================
   Nexora Clash Dashboard Styles
   ========================================== */
#acc-panel-dashboard {
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
}

#acc-panel-dashboard.active {
  display: flex;
}

.acc-dash-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr);
  gap: 12px;
  margin-bottom: 0;
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* 玻璃拟态高级卡片 */
.acc-dash-top-grid .acc-card,
.acc-dash-status-grid .acc-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.24), inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.25s ease, 
              box-shadow 0.25s ease,
              background 0.25s ease;
}

.acc-dash-top-grid .acc-card:hover,
.acc-dash-status-grid .acc-card:hover {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: 0 8px 32px 0 rgba(var(--accent-rgb), 0.04), 
              0 8px 32px 0 rgba(0, 0, 0, 0.26), 
              inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.acc-dash-chart-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px;
  box-sizing: border-box;
}

.acc-dash-speed-text {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.acc-dash-speed-text .speed-up {
  color: #ff758f;
  text-shadow: 0 0 8px rgba(255, 117, 143, 0.35);
}

.acc-dash-speed-text .speed-down {
  color: #00f5ff;
  text-shadow: 0 0 8px rgba(0, 245, 255, 0.35);
}

.acc-dash-canvas-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 160px;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.01);
  overflow: hidden;
}

#acc-dash-speed-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.acc-dash-speed-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(18, 20, 28, 0.35) 0%, rgba(18, 20, 28, 0.08) 70%, transparent 100%);
}

.acc-dash-speed-empty[hidden] {
  display: none !important;
}

.acc-dash-speed-empty-icon {
  font-size: 22px;
  opacity: 0.85;
  margin-bottom: 2px;
}

.acc-dash-speed-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-dash-speed-empty-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 280px;
}

.acc-dash-controls-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.acc-dash-side-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
}

.acc-dash-side-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.acc-dash-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.acc-dash-side-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-dash-mode-hint {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.acc-dash-side-meta {
  flex: none !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  overflow: hidden;
}

/* 主状态卡片 */
.acc-dash-info-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: none !important;
  min-width: 0;
}

.acc-dash-info-card:hover {
  background: rgba(255, 255, 255, 0.01) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

/* 卡片头部 */
.acc-dash-info-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.acc-dash-info-card-header-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* 点缀小点 */
.acc-dash-info-card-dot {
  width: 5px;
  height: 5px;
  background: var(--accent-color, #8c52ff);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent-color, #8c52ff);
}

.acc-dash-info-card-title {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* 配置项名称展示 */
.acc-dash-info-card-profile {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 5px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.9;
}

/* 卡片内容区 */
.acc-dash-info-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acc-dash-node-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.acc-dash-node-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.acc-dash-node-label {
  font-size: 9px;
  color: var(--text-secondary);
  opacity: 0.6;
}

.acc-dash-node-value {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

/* 节点高亮文字 */
.acc-dash-kv-accent {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important; /* 节点名称颜色优化为高亮纯白 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 延迟标记框 */
.acc-dash-node-latency-wrapper {
  flex-shrink: 0;
}

.acc-node-delay {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--font-mono), 'Microsoft YaHei', sans-serif;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

.acc-node-delay.latency-good {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.15);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.04);
}

.acc-node-delay.latency-medium {
  color: #facc15 !important;
  background: rgba(250, 204, 21, 0.06);
  border-color: rgba(250, 204, 21, 0.15);
}

.acc-node-delay.latency-bad {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.06);
  border-color: rgba(248, 113, 113, 0.15);
}

.acc-node-delay.latency-none {
  color: var(--text-secondary) !important;
  background: transparent;
  border-color: transparent;
  font-family: var(--font-mono), 'Microsoft YaHei', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.acc-node-delay.latency-testing {
  color: var(--accent-color) !important;
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.15);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.04);
}

/* 遥测技术参数 */
.acc-dash-telemetry-flex-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: none;
}

.acc-dash-telemetry-row {
  display: flex;
  gap: 0;
  flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.acc-dash-telemetry-item {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  flex: 1;
  box-sizing: border-box;
}

.acc-dash-telemetry-item:last-child {
  border-right: none;
}

.acc-dash-telemetry-item-full {
  background: transparent;
  border: none;
  border-radius: 0;
  flex: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.acc-dash-telemetry-label {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.8;
  white-space: nowrap;
}

.acc-dash-telemetry-item strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-align: center;
}

.acc-dash-telemetry-item .acc-dash-kv-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.85;
}

/* 运行状态指示器组件 */
.acc-dash-status-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.acc-dash-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4b5563; /* 默认关闭状态为灰色 */
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.acc-dash-status-indicator.enabled .acc-dash-status-dot {
  background: #34d399; /* 运行中显示明亮薄荷绿 */
  box-shadow: 0 0 6px #34d399;
  animation: acc-status-pulse 1.8s infinite ease-in-out;
}

.acc-dash-status-indicator.enabled strong {
  color: #34d399 !important;
}

@keyframes acc-status-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

.acc-dash-kv-mono {
  font-family: var(--font-mono);
}

.acc-dash-kv-accent {
  color: var(--accent-color, #8c52ff) !important;
}

/* 统一配置与控制主卡片 */
.acc-dash-unified-card {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.acc-dash-unified-card:hover {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(var(--accent-rgb), 0.15);
  box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.03), 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 卡片头部：状态与配置文件 */
.acc-dash-unified-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acc-dash-unified-card-header .header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 活跃节点区 */
.acc-dash-active-node-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.acc-dash-active-node-section .node-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.acc-dash-active-node-section .node-label {
  font-size: 9px;
  color: var(--text-secondary);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.acc-dash-active-node-section .node-name-wrapper {
  overflow: hidden;
}

/* 卡片分割线 */
.acc-dash-card-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
  margin: 2px 0;
}

/* 卡片内开关选项 */
.acc-dash-unified-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 底部状态与参数 */
.acc-dash-side-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acc-dash-side-footer .telemetry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.acc-dash-side-footer .telemetry-label {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.acc-dash-side-footer .acc-dash-kv-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  opacity: 0.85;
}

/* 实时活跃连接面板 */
.acc-dash-mini-conn-card {
  flex: 1;
  min-height: 150px; /* 防止在英文长文本或小屏下被挤压成一条线 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

.acc-dash-mini-conn-card .card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.acc-dash-mini-conn-card .card-title-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.acc-dash-mini-conn-card .flash-icon {
  color: var(--accent-color, #8c52ff);
  font-size: 12px;
  animation: acc-pulse-glow 2s infinite alternate;
}

.acc-dash-mini-conn-card .count-badge {
  font-size: 9px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.acc-dash-mini-conn-card .acc-dash-card-divider {
  margin: 0;
}

.acc-dash-mini-conn-card .mini-conn-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding-right: 2px;
}

.acc-dash-mini-conn-card .mini-conn-list .empty-tip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-secondary);
  font-size: 11px;
  opacity: 0.6;
}

@keyframes acc-pulse-glow {
  from {
    opacity: 0.6;
    text-shadow: 0 0 2px var(--accent-color);
  }
  to {
    opacity: 1;
    text-shadow: 0 0 8px var(--accent-color);
  }
}

/* 兼容旧类名（若别处仍引用） */
.acc-dash-control-card,
.acc-dash-toggles-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px 18px;
  box-sizing: border-box;
  min-height: 0;
}

.acc-dash-mode-group {
  display: flex;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 9px;
  padding: 3px;
  gap: 4px;
}

.acc-dash-mode-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: center;
}

.acc-dash-mode-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

/* 霓虹流光背景与外发光 */
.acc-dash-mode-btn.active {
  color: var(--accent-text);
  background: var(--accent-color);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

.acc-dash-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.acc-dash-toggle-primary {
  padding: 10px 0;
  margin: 0;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  /* 用 inset 描边，避免 border 把文案/开关挤偏 */
  border: none;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22);
  box-sizing: border-box;
}

/* 与主开关同一水平起点，保证文案与右侧开关对齐 */
.acc-dash-unified-toggles > .acc-dash-toggle-row,
.acc-dash-sub-toggles > .acc-dash-toggle-row {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  width: 100%;
}

.acc-dash-sub-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.2s ease;
}

.acc-dash-sub-toggles.is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

.acc-dash-sub-toggles.is-disabled .switch-slider-btn {
  cursor: not-allowed;
}

.acc-dash-toggle-row .toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.acc-dash-toggle-row .switch-slider-btn {
  flex-shrink: 0;
  align-self: center;
}

.acc-dash-toggle-row .toggle-name {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}

.acc-dash-toggle-row .toggle-desc {
  color: var(--text-secondary);
  font-size: 10px;
  opacity: 0.65;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-dash-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.acc-dash-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.acc-dash-stat-card .stat-main {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.acc-dash-stat-card .stat-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .acc-dash-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 状态图标专属流光彩晕背景 */
.acc-dash-stat-card .stat-icon {
  font-size: 18px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 卡片一：内网 IP (淡蓝色系) */
.acc-dash-stat-card:nth-child(1) .stat-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0.04) 100%);
  border: 1px solid rgba(14, 165, 233, 0.22);
  color: #38bdf8;
}

/* 卡片二：网络检测 (紫色系) — 可点击重测 */
.acc-dash-stat-card:nth-child(2) .stat-icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  color: var(--accent-color);
}

#acc-dash-ip-detect-card {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  user-select: none;
}

#acc-dash-ip-detect-card:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

#acc-dash-ip-detect-card:active {
  transform: scale(0.98);
}

#acc-dash-ip-detect-card.is-detecting {
  opacity: 0.9;
  /* 检测中也允许点击强制重测，避免「点了没反应」 */
}

#acc-dash-ip-detect-card:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 2px;
}

/* 卡片四：内存信息 (青色系) */
.acc-dash-stat-card:nth-child(4) .stat-icon {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.04) 100%);
  border: 1px solid rgba(6, 182, 212, 0.22);
  color: #22d3ee;
}

.acc-dash-stat-card .stat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acc-dash-stat-card .stat-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
}

.acc-dash-stat-card .stat-value {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-dash-stat-card .stat-traffic-details {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.acc-dash-stat-card #acc-dash-upload-total {
  color: #ff758f;
  text-shadow: 0 0 6px rgba(255, 117, 143, 0.15);
}

.acc-dash-stat-card #acc-dash-download-total {
  color: #00f5ff;
  text-shadow: 0 0 6px rgba(0, 245, 255, 0.15);
}

#acc-dash-ip-detect-card {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#acc-dash-ip-detect-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1);
  transform: translateY(-2px);
}

#acc-dash-ip-detect-card:active {
  transform: translateY(0) scale(0.98);
}

.acc-dash-detect-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.acc-dash-detect-btn:hover {
  background: var(--accent-color);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}

.acc-dash-detect-btn:active {
  transform: translateY(-50%) scale(0.92);
}

/* --- 角色配置 --- */
#roles-view {
  overflow: hidden;
  box-sizing: border-box;
  /* 外边距统一交给 .content-viewport 的 24px，勿再叠加，否则本页比其它页更靠右 */
}

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

.roles-search-input {
  height: 32px;
  width: 220px;
  box-sizing: border-box;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-input, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--border-color);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-active-role-badge {
  display: inline-flex;
  align-items: center;
  max-width: 160px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-model-picker {
  position: relative;
  min-width: 220px;
  max-width: 320px;
  width: 280px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
  z-index: 20;
}

.chat-model-search {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  height: 32px;
  font-size: 12px;
  color: var(--text-primary) !important;
  padding: 0 28px 0 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 32px;
}

.chat-model-search:focus {
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
}

.chat-model-search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}

/* 模型选择逻辑用 select：移出布局，禁止被全局 select 皮肤画出来 */
#chat-model-select,
.chat-model-select-hidden {
  position: absolute !important;
  left: -99999px !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  z-index: -1 !important;
}

.chat-model-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 120;
  padding: 4px;
}

.chat-model-dropdown:not([hidden]) {
  display: block;
}

.chat-model-dropdown .chat-model-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  color: var(--text-primary);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 用量监控：头部 + 筛选条布局（标题左、条件右） */
#dashboard-view .stats-header-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px; /* 统一为控制面板一致的 20px */
  flex-shrink: 0;
  position: relative;
  z-index: 40;
  overflow: visible;
}

#dashboard-view .stats-header-copy {
  flex: 1 1 220px;
  min-width: 200px;
}

#dashboard-view .stats-header-desc {
  margin-top: 4px;
  line-height: 1.4;
  color: var(--text-secondary);
}

#dashboard-view .stats-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  margin-left: auto;
  position: relative;
  z-index: 45;
  overflow: visible;
  --stats-control-h: 32px;
}

#dashboard-view .stats-toolbar .toolbar-select,
#dashboard-view .stats-toolbar .stats-model-search,
#dashboard-view .stats-toolbar #btn-stats-query {
  box-sizing: border-box !important;
  height: var(--stats-control-h) !important;
  min-height: var(--stats-control-h) !important;
  max-height: var(--stats-control-h) !important;
  line-height: calc(var(--stats-control-h) - 2px) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  margin: 0 !important;
  vertical-align: middle;
}

#dashboard-view .stats-toolbar .toolbar-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--bg-input) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 0 24px 0 10px !important;
  outline: none;
  cursor: pointer;
  max-width: 140px;
}

#dashboard-view .stats-toolbar #btn-stats-query {
  min-width: 84px;
  width: auto;
  padding: 0 14px !important;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  gap: 4px;
  border: none !important;
  box-shadow: none;
  transform: none !important;
}

#dashboard-view .stats-toolbar #btn-stats-query:hover {
  transform: none !important;
}

#dashboard-view .stats-scroll-container {
  position: relative;
  z-index: 1;
}

/* 用量监控：可搜索模型筛选（仅自定义下拉，无原生 select 叠层） */
.stats-model-picker {
  position: relative;
  width: 168px;
  min-width: 148px;
  max-width: 200px;
  height: var(--stats-control-h, 32px);
  flex-shrink: 0;
  overflow: visible;
  z-index: 50;
  display: flex;
  align-items: center;
}

.stats-model-picker input[type="hidden"],
#stats-model-select {
  display: none !important;
}

.stats-model-search,
#stats-model-search.stats-model-search {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  height: var(--stats-control-h, 32px) !important;
  min-height: var(--stats-control-h, 32px) !important;
  max-height: var(--stats-control-h, 32px) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  padding: 0 28px 0 10px !important;
  margin: 0 !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: calc(var(--stats-control-h, 32px) - 2px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.stats-model-search::-webkit-search-decoration,
.stats-model-search::-webkit-search-cancel-button,
.stats-model-search::-webkit-search-results-button,
.stats-model-search::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none !important;
}

.stats-model-search::placeholder {
  color: var(--text-secondary);
  opacity: 0.9;
  white-space: nowrap;
}

.stats-model-search:focus {
  border-color: rgba(var(--accent-rgb), 0.65) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18) !important;
  cursor: text;
}

.stats-model-search-icon {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}

.stats-model-dropdown {
  display: none;
  position: absolute;
  right: 0;
  left: auto;
  min-width: 220px;
  width: max(100%, 220px);
  top: calc(100% + 6px);
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  /* 必须用不透明底，否则会透出下方「总成本」数字 */
  background: #160e28 !important;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.72);
  z-index: 9999;
  padding: 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stats-model-dropdown:not([hidden]) {
  display: block;
}

.stats-model-dropdown .stats-model-option {
  display: block !important;
  width: 100% !important;
  min-height: 32px !important;
  height: auto !important;
  text-align: left !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  margin: 0 0 2px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
}

.stats-model-dropdown .stats-model-option:hover,
.stats-model-dropdown .stats-model-option.is-active {
  background: rgba(var(--accent-rgb), 0.22) !important;
}

.roles-search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25);
}

.roles-search-input::placeholder {
  color: var(--text-secondary);
}

.roles-search-empty {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
  padding: 24px 12px;
}

.roles-toolbar .btn-secondary,
.roles-editor-actions .btn-primary,
.roles-editor-actions .btn-secondary {
  margin-top: 0;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.roles-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
}

.roles-list-panel,
.roles-editor-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.roles-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.roles-active-badge {
  font-size: 11px;
  color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-card-list {
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.role-card {
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.role-card:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: translateY(-1px);
}

.role-card.active-selected {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 8px 20px rgba(var(--accent-rgb), 0.12);
}

.role-card-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.role-card-title strong {
  color: var(--text-primary);
  font-size: 13px;
}

.role-card-source {
  color: var(--text-secondary);
  font-size: 11px;
  margin-bottom: 6px;
}

.role-card-summary {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.role-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.role-tag {
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 1px 7px;
}

.role-card-pill {
  font-size: 10px;
  border-radius: 999px;
  padding: 1px 7px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.role-card-pill.enabled {
  color: #00e676;
  border-color: rgba(0, 230, 118, 0.45);
  background: rgba(0, 230, 118, 0.08);
}

.roles-editor-panel {
  padding: 16px;
  overflow-y: auto;
}

.roles-editor-empty {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 24px 8px;
}

.roles-editor-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.roles-editor-title-row h3 {
  margin: 0;
  font-size: 15px;
  color: var(--text-primary);
}

.roles-builtin-tag {
  font-size: 10px;
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 999px;
  padding: 2px 8px;
}

.roles-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.roles-field input,
.roles-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 9px 11px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.roles-field input:focus,
.roles-field textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25);
}

.roles-field input:disabled,
.roles-field textarea:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.roles-field-prompt textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.5;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12px;
}

.roles-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.roles-btn-danger {
  color: #ff6b6b !important;
  border-color: rgba(255, 107, 107, 0.45) !important;
}

.roles-btn-danger:hover {
  background: rgba(255, 107, 107, 0.12) !important;
}

.roles-hint {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
}

@media (max-width: 980px) {
  .roles-layout {
    grid-template-columns: 1fr;
  }

  .roles-list-panel {
    max-height: 280px;
  }
}

/* --- 语音管理 --- */
#voice-view {
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  /* 外边距统一走 .content-viewport 的 24px，不再叠加 */
}

.voice-control-panel {
  margin: 0 0 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voice-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-primary);
}

.voice-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #666;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.voice-status-dot[data-status="idle"] { background: #6b7280; }
.voice-status-dot[data-status="listening_wake"] { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.55); }
.voice-status-dot[data-status="listening"] { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.55); }
.voice-status-dot[data-status="speaking"] { background: var(--accent-color); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55); }
.voice-status-dot[data-status="downloading"] { background: #38bdf8; }

.voice-engine-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
}

.voice-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 14px;
}

.voice-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.voice-toggle-item input {
  accent-color: var(--accent-color);
}

.voice-volume-row,
.voice-wake-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
}

.voice-volume-row input[type="range"] {
  flex: 1 1 160px;
  min-width: 120px;
  accent-color: var(--accent-color);
}

.voice-wake-row input[type="text"],
.voice-wake-row select,
.voice-role-bind-panel select {
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary, #111);
  color: var(--text-primary);
  padding: 0 10px;
  min-width: 140px;
}

.voice-asr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 5px;
  min-height: 32px;
}

.asr-model-label {
  font-weight: 500;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  height: 32px;
  line-height: 1;
}

.asr-model-status {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-family: monospace;
  display: inline-flex;
  align-items: center;
  height: 24px;
  box-sizing: border-box;
  line-height: 1;
}

.asr-progress-container {
  flex: 1 1 200px;
  min-width: 150px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

#asr-progress-bar {
  height: 100%;
  background: var(--accent-color, #f08300);
  width: 0%;
  transition: width 0.1s ease-out;
}

.voice-notice {
  margin: 0 0 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.voice-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 10px 0;
}

.voice-section-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

#voice-view .plugins-masonry {
  flex: 0 0 auto;
  overflow: visible;
  padding-bottom: 18px;
}

.voice-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.voice-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--border-color);
  color: var(--accent-color);
  background: rgba(var(--accent-rgb), 0.1);
  white-space: nowrap;
}

.voice-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.voice-role-bind-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
}

.voice-role-bind-list {
  width: 100%;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 启动动画和高亮文字 */
@keyframes neonPulseGlow {
  0% { color: #8c9eff; text-shadow: 0 0 5px rgba(140, 158, 255, 0.4); }
  50% { color: #b388ff; text-shadow: 0 0 15px rgba(179, 136, 255, 0.8), 0 0 30px rgba(179, 136, 255, 0.5); }
  100% { color: #8c9eff; text-shadow: 0 0 5px rgba(140, 158, 255, 0.4); }
}

@keyframes rainbowBgGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.starting-pulse-text {
  animation: neonPulseGlow 1.5s infinite alternate ease-in-out;
  font-weight: bold;
}

.starting-activity-item {
  background: linear-gradient(270deg, rgba(140, 158, 255, 0.1), rgba(179, 136, 255, 0.15), rgba(140, 158, 255, 0.1));
  background-size: 200% 200%;
  animation: rainbowBgGlow 2s ease infinite;
  border-left: 3px solid #b388ff !important;
  color: #fff !important;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.starting-activity-item::before {
  content: '⚙️';
  font-size: 14px;
  animation: spin 3s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
/* --- 会话归档管理 --- */
.session-archive-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  /* 外边距统一走 .content-viewport 的 24px，卡片左边与其它页对齐，不再额外 18px */
  box-sizing: border-box;
  overflow: hidden;
}
.session-archive-toolbar,
.session-archive-detail,
.session-archive-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
}
.session-archive-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  /* 头部改为裸标题（不再是卡片），与其它页统一：标题左对齐 24px、顶部对齐 */
  padding: 0;
  margin-bottom: 6px;
}
.session-archive-header h2 { margin: 0 0 6px 0; color: var(--text-primary); font-size: 22px; }
.session-archive-header p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.session-archive-actions,
.session-archive-card-actions,
.session-archive-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.session-archive-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}
.session-archive-btn:hover { transform: translateY(-1px); border-color: var(--accent-color); }
.session-archive-btn.primary { background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb),0.7)); border-color: transparent; color: #fff; }
.session-archive-btn.ghost { color: #7fe6ff; border-color: rgba(0,210,255,0.28); background: rgba(0,210,255,0.08); }
.session-archive-btn.danger { color: #ff7070; border-color: rgba(255,82,82,0.28); background: rgba(255,82,82,0.08); }
.session-archive-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px; }
.session-archive-toolbar input,
.session-archive-toolbar select,
.session-archive-editor input,
.session-archive-editor textarea {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color);
  color: var(--text-primary) !important;
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
}
.session-archive-toolbar input { flex: 1; height: 36px; padding: 0 12px; }
.session-archive-toolbar select { height: 36px; padding: 0 10px; }
.session-archive-count { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.session-archive-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 36%) minmax(420px, 1fr); gap: 14px; }
.session-archive-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.session-archive-card { padding: 14px; cursor: pointer; transition: all 0.18s ease; }
.session-archive-card:hover,
.session-archive-card.active { border-color: var(--accent-color); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.35), 0 10px 30px rgba(0,0,0,0.22); }
.session-archive-card-title { color: var(--text-primary); font-size: 14px; font-weight: 800; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-archive-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-secondary); font-size: 11px; margin-bottom: 8px; }
.session-archive-card-summary { color: var(--text-secondary); font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.session-archive-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.session-archive-tag { color: #7fe6ff; background: rgba(0,210,255,0.08); border: 1px solid rgba(0,210,255,0.18); border-radius: 999px; padding: 2px 8px; font-size: 10px; }
.session-archive-detail { min-height: 0; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.session-archive-detail-empty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-secondary); border: 1px dashed var(--border-color); border-radius: 12px; }
.session-archive-detail-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.session-archive-detail-title { margin: 0 0 6px 0; color: var(--text-primary); font-size: 18px; }
.session-archive-detail-meta { color: var(--text-secondary); font-size: 12px; }
.session-archive-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.session-archive-msg { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,0.025); }
.session-archive-msg.user { border-color: rgba(140,82,255,0.25); background: rgba(140,82,255,0.08); }
.session-archive-msg-role { font-size: 11px; font-weight: 800; color: var(--accent-color); margin-bottom: 6px; }
.session-archive-msg-content { color: var(--text-primary); font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.session-archive-editor { display: flex; flex-direction: column; gap: 10px; }
.session-archive-editor label { color: var(--text-secondary); font-size: 12px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.session-archive-editor input { height: 36px; padding: 0 10px; }
.session-archive-editor textarea { min-height: 92px; padding: 10px; resize: vertical; line-height: 1.5; }
@media (max-width: 1100px) { .session-archive-body { grid-template-columns: 1fr; } .session-archive-detail { min-height: 420px; } }