:root {
  /* =========================================
     核心设计令牌 (Linear / Modern DNA)
     ========================================= */

  /* 色阶架构 */
  --bg-deep: #020203;
  /* 极暗基底, 接近纯黑 */
  --bg-base: #050506;
  /* 主画布 */
  --bg-elevated: #0a0a0c;
  /* 抬起表面 */

  --surface: rgba(255, 255, 255, 0.05);
  /* 万能基础卡片层 */
  --surface-hover: rgba(255, 255, 255, 0.08);
  /* 卡片聚焦悬停 */

  /* 文本系统 */
  --foreground: #EDEDEF;
  /* 最亮的主标 */
  --foreground-muted: #8A8F98;
  /* 段落灰度字 */
  --foreground-subtle: rgba(255, 255, 255, 0.60);
  /* 占位及弱信息 */

  --text-primary: var(--foreground);
  --text-secondary: var(--foreground-subtle);
  --text-muted: var(--foreground-muted);

  /* 交互色彩体系 */
  --accent: #5E6AD2;
  /* 基础活动色 / 视觉着力点 */
  --accent-bright: #6872D9;
  /* 点击热烈区域 */
  --accent-glow: rgba(94, 106, 210, 0.3);
  /* 光晕晕染 */

  /* 描边 */
  --border-default: rgba(255, 255, 255, 0.06);
  /* 第一重边框 */
  --border-hover: rgba(255, 255, 255, 0.10);
  /* 加亮边框 */
  --border-accent: rgba(94, 106, 210, 0.30);
  /* 主题加亮 */

  /* Semantic */
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.25);
  --warning: #fbbf24;
  --warning-glow: rgba(251, 191, 36, 0.25);
  --danger: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.25);

  /* 多层级立体深空间发光阴影组合 */
  --shadow-multi-layer: 0 0 0 1px var(--border-default), 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2);
  --shadow-multi-hover: 0 0 0 1px var(--border-hover), 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(94, 106, 210, 0.08);
  --shadow-cta: 0 0 0 1px rgba(94, 106, 210, 0.5), 0 4px 12px rgba(94, 106, 210, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);

  --primary-color: var(--accent);
  --glass-bg: var(--surface);
  --glass-border: var(--border-default);

  --provider-color: #a3a8b4;
  --provider-glow: rgba(163, 168, 180, 0.18);
  --provider-border: rgba(163, 168, 180, 0.32);

  --badge-color: var(--foreground);
  --badge-bg: var(--surface);
  --badge-border: var(--border-default);

  --motion-duration-fast: 200ms;
  --motion-duration-base: 260ms;
  --motion-duration-slow: 300ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-mono: "JetBrains Mono", "Cascadia Mono", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--foreground);
  background-color: var(--bg-deep);
  /* 底色托底 */
  height: 100vh;
  overflow: hidden;
  line-height: 1.6;
}

:where(
    button,
    a[href],
    input:not([type="hidden"]),
    select,
    textarea,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
  outline: 2px solid rgba(94, 106, 210, 0.45);
  outline-offset: 2px;
}

/* =========================================
   氛围系统: 深空极简动态多层背景光晕
   ========================================= */

/* 第一层级：绝对背景和统一调度层级 */
.ambient-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* 基础光层：微型中心散发渐变，不采用纯黑，引入一丝空间感 */
.ambient-base {
  background: radial-gradient(ellipse at top center, #0a0a0f 0%, #050506 50%, #020203 100%);
}

/* 次级环境光点网格背景 */
.ambient-grid {
  opacity: 0.02;
  background-size: 64px 64px;
  background-image:
    linear-gradient(to right, #ffffff 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff 1px, transparent 1px);
}

/* 第三级核心灵魂：悬浮游移的发光源容器 */
.ambient-blobs-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  animation: float-blob 12s ease-in-out infinite alternate;
}

/* Blob 1：中上部宏观主光轴 */
.ambient-blob.primary {
  width: 900px;
  height: 1400px;
  top: -600px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent);
  opacity: 0.12;
  filter: blur(150px);
  animation-duration: 20s;
}

/* Blob 2：左侧游离的暗玫红 */
.ambient-blob.secondary {
  width: 600px;
  height: 800px;
  top: 10%;
  left: -200px;
  background-color: rgba(181, 102, 210, 0.4);
  opacity: 0.08;
  animation-duration: 28s;
  animation-delay: -5s;
}

/* Blob 3：右侧偏下悬浮青蓝 */
.ambient-blob.tertiary {
  width: 500px;
  height: 700px;
  bottom: -200px;
  right: -100px;
  background-color: rgba(69, 130, 255, 0.4);
  opacity: 0.06;
  filter: blur(100px);
  animation-duration: 24s;
  animation-delay: -10s;
}

/* 第四最终层：极低不透明度的 SVG Noise 以削减色带并加强玻璃拟态手感 */
.ambient-noise {
  opacity: 0.018;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

@keyframes float-blob {
  0% {
    transform: translate(-50%, 0) rotate(0deg) scale(1);
  }

  50% {
    transform: translate(-48%, 20px) rotate(1deg) scale(1.02);
  }

  100% {
    transform: translate(-52%, -10px) rotate(-1deg) scale(0.98);
  }
}

/* 重构应用基础容器：防止遮挡背景并且统一上拉 Z-index */
.app-container {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100vh;
  /* 以微弱的不对称黑边形成应用包裹感 (可选) */
}

/* =========================================
   核心组件基础: 卡片、按钮、表单
   ========================================= */

/* 核心毛玻璃面板：完全剔除大弧线，改用圆润的小倒角配合多层精细高光 */
.glass-panel {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: var(--shadow-multi-layer);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  margin-bottom: 24px;
  overflow: hidden;
  transition: box-shadow var(--motion-duration-slow) var(--motion-ease-out), transform var(--motion-duration-slow) var(--motion-ease-out), border-color var(--motion-duration-slow) var(--motion-ease-out);
  position: relative;
}

/* 顶部增加一根极细的光线强调边缘 */
.glass-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
}

/* 赋予主行动按钮 (Primary Button) 深邃发光与微反弹交互 */
.btn-primary,
.panel-action-btn,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.btn-size-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
}

.btn-size-xs {
  padding: 4px 10px;
  height: 28px;
  font-size: 0.78rem;
  border-radius: 8px;
}

.btn-block {
  width: 100%;
}

.btn-dashed {
  border-style: dashed;
}

.btn-mt-sm {
  margin-top: 10px;
}

.btn-primary {
  position: relative;
  background: rgba(94, 106, 210, 0.25);
  color: #e2e8f0;
  padding: 10px 24px;
  border-radius: 10px;
  border-color: rgba(94, 106, 210, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transition-duration: 0.3s;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-20deg);
  transition: var(--motion-duration-slow) var(--motion-ease-out);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: rgba(94, 106, 210, 0.4);
  border-color: rgba(94, 106, 210, 0.6);
  box-shadow: 0 6px 20px rgba(94, 106, 210, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(94, 106, 210, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.btn-primary:disabled,
.btn-primary[disabled],
.panel-action-btn:disabled,
.panel-action-btn[disabled],
.btn-secondary:disabled,
.btn-secondary[disabled] {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.panel-action-btn,
.btn-secondary {
  background: var(--surface);
  color: var(--foreground);
  border-color: var(--border-default);
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.panel-action-btn:hover,
.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  color: #fff;
}

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

.btn-ghost,
.panel-action-btn.btn-ghost {
  background: transparent;
  color: var(--foreground-muted);
  border-color: var(--border-default);
  box-shadow: none;
}

.btn-ghost:hover,
.panel-action-btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  border-color: var(--border-hover);
}

.btn-danger,
.danger-action-btn {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.05);
}

.btn-danger:hover,
.danger-action-btn:hover {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.14);
}

.btn-danger:focus-visible,
.danger-action-btn:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.35);
  outline-offset: 2px;
}

/* =========================================
   侧边导航栏重制
   ========================================= */

.admin-sidebar {
  width: 260px;
  background: rgba(5, 5, 6, 0.4);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  padding: 32px 0;
  flex-shrink: 0;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.2);
  z-index: 50;
}

.brand-panel {
  padding: 0 24px 28px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo-gem {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.6),
    /* 深重跌落阴影 */
    inset 0px 2px 4px rgba(255, 255, 255, 0.4),
    /* 顶部高光倒角 */
    inset 0px -2px 6px rgba(0, 0, 0, 0.5),
    /* 底部内凹暗场 */
    0 0 0 1px rgba(255, 255, 255, 0.15);
  /* 极细描边勾勒 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gem-inner {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-bright) 100%);
  box-shadow:
    inset 0px 3px 6px rgba(255, 255, 255, 0.4),
    /* 物理质感厚度 */
    inset 0px -4px 6px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(94, 106, 210, 0.4);
  /* 自发光 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.brand-title {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #d1d5db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.brand-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow:
    0 0 10px var(--success),
    inset 0 2px 3px rgba(255, 255, 255, 0.8),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
}

.nav-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  color: var(--foreground-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  position: relative;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-item i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  opacity: 0.7;
}

.nav-item:hover {
  color: var(--foreground);
  background: var(--surface);
}

.nav-item:hover i {
  opacity: 1;
}

.nav-item.active {
  background: rgba(94, 106, 210, 0.15);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(94, 106, 210, 0.2);
}

.nav-item.active i {
  color: var(--accent-bright);
  opacity: 1;
}

/* 左侧光条标识 */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -16px;
  /* 抵靠边缘 */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px var(--accent-glow);
}

.sidebar-footer {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.perf-status-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  transition: all var(--motion-duration-base) var(--motion-ease-out);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.status-node:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-multi-layer);
}

.node-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(94, 106, 210, 0.12);
  border-radius: 8px;
  color: var(--accent);
  position: relative;
}

.node-svg {
  width: 18px;
  height: 18px;
  z-index: 1;
}

.node-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.node-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--foreground-muted);
  margin-bottom: 2px;
}

.node-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.theme-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--foreground-subtle);
  font-size: 0.84rem;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
  padding: 0;
  margin-top: 4px;
}

.theme-switch-btn:hover {
  color: var(--foreground);
}

.theme-switch-btn i {
  font-size: 1.1em;
}

.logout-wrap {
  text-align: center;
  margin-top: 4px;
}

.logout-link {
  color: var(--foreground-subtle);
  text-decoration: none;
  font-size: 0.84rem;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}

.logout-link:hover {
  color: var(--foreground);
}

/* =========================================
   主工作区重制 (Main & Views)
   ========================================= */

.admin-main {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  position: relative;
  z-index: 20;
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.view-shell-head {
  margin-bottom: 25px;
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.view-shell-head-wrap {
  flex-wrap: wrap;
}

.view-shell-copy {
  min-width: 0;
}

.view-shell-title {
  margin: 0 0 5px;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--foreground);
}

.view-shell-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.view-shell-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary-strong {
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-primary-strong i {
  margin-right: 6px;
}

.panel-action-btn-save {
  background: rgba(255, 255, 255, 0.1);
}

.provider-matrix-wrapper-compact {
  margin-top: 20px;
}

.skills-tabs-shell {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.skills-tab-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
}

.skills-tab-btn .tab-icon {
  margin-right: 6px;
}

.skills-tab-btn.active {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.skills-tab-btn.active .tab-icon {
  color: var(--accent);
}

.skills-panel {
  display: none;
}

.skills-panel.active {
  display: block;
}

.skills-panel-card {
  border-radius: 16px;
  overflow: hidden;
}

.skills-panel-card-main {
  min-height: 200px;
}

.skills-panel-card-compact {
  min-height: 100px;
}

.skills-panel-card-warn {
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.skills-panel-card-danger {
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.config-section-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.config-section-title {
  margin: 0 0 12px 5px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-section-title-warn {
  color: var(--warning);
}

.config-section-title-muted {
  color: var(--text-muted);
}

.config-section-title-danger {
  color: var(--danger);
}

.node-invoke-panel {
  margin-top: 20px;
  padding: 20px;
}

.node-invoke-actions,
.node-result-panel {
  margin-top: 15px;
}

/* =========================================
   节点详情面板 (Node Detail Panel)
   ========================================= */

.node-summary-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.node-card-selected {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-multi-hover), 0 0 0 1px var(--border-accent);
}

.node-detail-panel {
  margin-top: 18px;
  padding: 20px;
}

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

.node-detail-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}

.node-detail-subtitle {
  font-size: 0.8rem;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
  margin: 2px 0 0;
}

.node-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.node-detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-detail-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.node-detail-empty {
  font-size: 0.82rem;
  color: var(--foreground-muted);
  font-style: italic;
}

.node-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.node-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  border: 1px solid transparent;
}

.node-tag-cap {
  color: var(--accent-bright);
  background: rgba(94, 106, 210, 0.12);
  border-color: rgba(94, 106, 210, 0.25);
}

.node-tag-cmd {
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.node-invoke-section {
  border-top: 1px solid var(--border-default);
  padding-top: 16px;
}

.node-invoke-head {
  margin-bottom: 12px;
}

.node-invoke-head-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--foreground-muted);
}

.node-invoke-head-label i {
  margin-right: 6px;
  color: var(--accent);
}

.node-invoke-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.config-row-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.config-row-inline label {
  min-width: 70px;
  flex-shrink: 0;
}

.config-row-inline input,
.config-row-inline textarea {
  flex: 1;
}

.node-invoke-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ---- Node Pairing Guide ---- */
.node-guide-panel {
  padding: 0;
  margin-bottom: 16px;
  cursor: default;
}
.node-guide-panel[open] .node-guide-chevron {
  transform: rotate(180deg);
}
.node-guide-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 0.95rem;
  list-style: none;
}
.node-guide-summary::-webkit-details-marker { display: none; }
.node-guide-icon {
  color: var(--accent);
  font-size: 1.1rem;
}
.node-guide-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.5;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}
.node-guide-body {
  padding: 0 20px 20px;
}
.node-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.node-guide-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.node-guide-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}
.node-guide-step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.node-guide-step-content strong {
  font-size: 0.9rem;
}
.node-guide-code {
  display: block;
  font-family: var(--font-mono, "SF Mono", "Fira Code", monospace);
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  word-break: break-all;
}
.node-guide-hint {
  font-size: 0.82rem;
  opacity: 0.6;
  margin: 0;
}

/* ---- Node Pairing Section ---- */
.node-pairing-section {
  margin-bottom: 16px;
}
.node-pairing-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--accent);
}
.node-pairing-card {
  padding: 16px;
}
.node-pairing-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ---- Node Rename Button ---- */
.node-rename-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.8rem;
  opacity: 0.6;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out);
  vertical-align: middle;
}
.node-rename-btn:hover {
  opacity: 1;
}

.node-rename-btn.disabled,
.node-rename-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: auto;
}

.node-rename-btn.disabled:hover,
.node-rename-btn:disabled:hover {
  opacity: 0.3;
}

/* ---- Danger button ---- */
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transition: background var(--motion-duration-fast) var(--motion-ease-out);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.22);
}

.logs-shell-panel {
  padding: 15px;
}

.logs-toolbar {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.logs-input-grow {
  flex: 1;
}

.chat-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.persona-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.persona-sidebar,
.persona-main-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.persona-agent-shell,
.persona-files-shell {
  margin-bottom: 0;
}

.persona-agent-shell,
.persona-files-shell {
  overflow: hidden;
}

.persona-panel-caption {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.persona-panel-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.persona-panel-body {
  min-width: 0;
}

.persona-panel-body-padding {
  padding: 20px 24px 24px;
}

.persona-panel-body-padding .skeleton-stack {
  padding: 0;
}

.persona-form {
  padding: 0;
}

.persona-form-compact {
  padding: 24px 24px 26px;
}

.persona-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.persona-form-grid-single {
  grid-template-columns: 1fr;
}

.persona-field-full {
  grid-column: 1 / -1;
}

.persona-inline-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.persona-agent-shell {
  min-height: 460px;
  display: flex;
  flex-direction: column;
}

.persona-agent-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.persona-agent-card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border-default);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-duration-base) var(--motion-ease-out), border-color var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out), background var(--motion-duration-base) var(--motion-ease-out);
}

.persona-agent-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-multi-hover);
}

.persona-agent-card.active {
  border-color: var(--border-accent);
  background: linear-gradient(180deg, rgba(94, 106, 210, 0.16), rgba(255, 255, 255, 0.02));
  box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.22), 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 36px rgba(94, 106, 210, 0.08);
}

.persona-agent-bubble {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(94, 106, 210, 0.24), rgba(94, 106, 210, 0.1));
  border: 1px solid rgba(94, 106, 210, 0.3);
  color: var(--foreground);
  font-size: 1.08rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.persona-agent-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.persona-agent-name {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 600;
}

.persona-agent-workspace,
.persona-agent-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.persona-agent-workspace {
  color: var(--foreground-subtle);
}

.persona-agent-id {
  color: var(--text-muted);
}

.persona-agent-badges {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.persona-meta-bar {
  border-bottom: 1px solid var(--border-default);
}

.persona-meta-bar-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-out);
}

.persona-meta-bar-summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

.persona-meta-bar-glyph {
  width: 32px;
  height: 32px;
  font-size: 0.88rem;
  border-radius: 10px;
}

.persona-meta-bar-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.persona-meta-bar-name {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 600;
}

.persona-meta-bar-workspace {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-meta-bar-badges {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.persona-meta-bar-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

.persona-meta-bar.open .persona-meta-bar-chevron {
  transform: rotate(180deg);
}

.persona-meta-bar-detail {
  display: none;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-default);
}

.persona-meta-bar.open .persona-meta-bar-detail {
  display: block;
}

.persona-meta-bar-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 12px;
}

.persona-delete-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.persona-delete-toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

.persona-inline-actions-wrap {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.persona-create-modal-panel {
  max-width: 520px;
}

.persona-create-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.persona-field-note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.persona-field-note-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--foreground);
  word-break: break-all;
}

.persona-field-note-source {
  display: block;
  margin-top: 4px;
}

.persona-field-note-warning {
  display: block;
  margin-top: 6px;
  color: var(--warning-text, #f5c46b);
}

.persona-files-shell .empty-placeholder,
.persona-agent-shell .empty-placeholder {
  padding: 56px 20px;
}

.persona-file-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-default);
}

.persona-file-tab {
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out), border-color var(--motion-duration-fast) var(--motion-ease-out), background var(--motion-duration-fast) var(--motion-ease-out), color var(--motion-duration-fast) var(--motion-ease-out), box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}

.persona-file-tab:hover {
  color: var(--foreground);
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.persona-file-tab.active {
  color: var(--foreground);
  border-color: rgba(94, 106, 210, 0.36);
  background: rgba(94, 106, 210, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(94, 106, 210, 0.12);
}

.persona-file-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.persona-file-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.persona-file-copy {
  min-width: 0;
}

.persona-file-title {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 600;
  word-break: break-all;
}

.persona-file-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  line-height: 1.5;
  word-break: break-all;
}

.persona-file-hint,
.persona-file-status-block {
  margin: 0;
}

.persona-file-editor {
  min-height: 380px;
  tab-size: 2;
}

.chat-sessions {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 620px;
  max-height: calc(100vh - 210px);
}

.chat-sessions-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface);
}

.chat-sessions-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--foreground);
}

.chat-sessions-head p {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--foreground-muted);
}

.chat-session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}

.chat-session-item {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface);
  color: var(--foreground);
  text-align: left;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
}

.chat-session-item:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.chat-session-item.active {
  border-color: rgba(94, 106, 210, 0.48);
  background: rgba(94, 106, 210, 0.14);
  box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.18);
}

.chat-session-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-session-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  word-break: break-word;
}

.chat-session-meta {
  font-size: 0.78rem;
  color: var(--foreground-muted);
  word-break: break-word;
}

.chat-session-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--foreground-subtle);
}

.chat-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 620px;
  max-height: calc(100vh - 210px);
  padding: 0;
}

.chat-main-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface);
}

.chat-main-title {
  margin: 0;
  font-size: 1.02rem;
  color: var(--foreground);
}

.chat-main-subtitle {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--foreground-muted);
  word-break: break-word;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.03));
}

.chat-message-row {
  display: flex;
  justify-content: flex-start;
}

.chat-message-row.user {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: min(78%, 760px);
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-multi-layer);
  animation: chat-bubble-in var(--motion-duration-fast) var(--motion-ease-out);
}

.chat-bubble-user {
  background: rgba(94, 106, 210, 0.18);
  border-color: rgba(94, 106, 210, 0.42);
}

.chat-bubble-assistant {
  background: var(--surface);
}

.chat-bubble-tool,
.chat-bubble-system {
  background: rgba(250, 204, 21, 0.08);
  border-color: rgba(250, 204, 21, 0.24);
}

.chat-bubble-content {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.48;
  word-break: break-word;
}

.chat-bubble-content-streaming {
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-markdown p,
.chat-markdown ul,
.chat-markdown ol,
.chat-markdown blockquote,
.chat-markdown pre,
.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4,
.chat-markdown h5,
.chat-markdown h6 {
  margin: 0;
}

.chat-markdown p + p,
.chat-markdown p + ul,
.chat-markdown p + ol,
.chat-markdown p + blockquote,
.chat-markdown ul + p,
.chat-markdown ol + p,
.chat-markdown blockquote + p,
.chat-markdown pre + p {
  margin-top: 8px;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4,
.chat-markdown h5,
.chat-markdown h6 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 4px;
}

.chat-markdown ul,
.chat-markdown ol {
  padding-left: 18px;
}

.chat-markdown li + li {
  margin-top: 3px;
}

.chat-markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-markdown code {
  font-family: var(--font-code, "JetBrains Mono", "Fira Code", monospace);
  font-size: 0.78rem;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 0 4px;
}

.chat-markdown .chat-md-code {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--surface);
  overflow: auto;
  max-height: 260px;
}

.chat-markdown .chat-md-code code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.76rem;
  line-height: 1.45;
}

.chat-markdown blockquote {
  border-left: 3px solid var(--border-hover);
  padding-left: 10px;
  color: var(--foreground-muted);
}

.chat-segment-thinking,
.chat-segment-tool {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 10px;
}

.chat-segment-thinking summary,
.chat-segment-tool summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--foreground-muted);
  font-size: 0.78rem;
}

.chat-segment-thinking summary::-webkit-details-marker,
.chat-segment-tool summary::-webkit-details-marker {
  display: none;
}

.chat-segment-thinking pre,
.chat-segment-tool pre {
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 8px 10px;
  max-height: 220px;
  overflow: auto;
}

.chat-segment-thinking {
  border-style: dashed;
}

.chat-segment-tool-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--foreground);
}

.chat-segment-tool-status {
  font-size: 0.72rem;
  color: var(--foreground-subtle);
}

.chat-segment-tool-call .chat-segment-tool-status {
  color: var(--warning);
}

.chat-segment-tool-result .chat-segment-tool-status {
  color: var(--success, #22c55e);
}

.chat-segment-tool-result.is-error .chat-segment-tool-status {
  color: var(--danger, #ef4444);
}

.chat-segment-tool-meta {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--foreground-subtle);
  font-family: var(--font-code, "JetBrains Mono", "Fira Code", monospace);
}

.chat-segment-tool-empty {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--foreground-subtle);
}

.chat-segment-tool-result.is-error {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.06);
}

.chat-bubble-meta {
  display: inline-flex;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--foreground-muted);
  align-items: center;
}

.chat-message-pending {
  color: var(--warning);
}

.chat-input-area {
  border-top: 1px solid var(--border-default);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
}

.chat-input {
  width: 100%;
  min-height: 96px;
  max-height: 240px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 12px;
}

.chat-input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chat-input-hint {
  font-size: 0.76rem;
  color: var(--foreground-muted);
}

.chat-mobile-toggle {
  display: none;
}

.chat-reconnect-btn {
  white-space: nowrap;
}

.chat-history-banner {
  margin: 0 auto 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--foreground-muted);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chat-history-banner.loading {
  color: var(--warning);
}

.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--foreground-muted);
  padding: 30px 12px;
  text-align: center;
}

.chat-empty-state i {
  font-size: 1.5rem;
  opacity: 0.8;
}

.chat-empty-state-main {
  min-height: 240px;
}

@keyframes chat-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view {
  display: none;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
  pointer-events: none;
}

.view.active {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 占位符重新打磨，提升科幻质感 */
.empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--foreground-muted);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 24px;
  opacity: 0.2;
  color: var(--accent);
  animation: float-empty 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.empty-title {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.empty-subtitle {
  font-size: 0.9rem;
  margin-top: 8px;
}

@keyframes float-empty {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.skeleton-text {
  height: 12px;
  background: var(--surface);
  border-radius: 6px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.skeleton-stack {
  padding: 20px;
}

.skeleton-w-96 {
  width: 96%;
}

.skeleton-w-90 {
  width: 90%;
}

.skeleton-w-84 {
  width: 84%;
}

.skeleton-w-78 {
  width: 78%;
}

.skeleton-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* 全局交互点击反馈 (克制) */
button:active,
.nav-item:active {
  transform: scale(0.98) !important;
}

/* Dashboard Grid 通用补丁 */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.dashboard-grid-compact {
  gap: 16px;
}

.dashboard-grid-lg {
  gap: 24px;
  margin-bottom: 35px;
}

.panel-grid-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.glass-panel-shell {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.glass-panel-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
}

.panel-error {
  padding: 20px;
  color: var(--danger);
}

.panel-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.panel-row-head-center {
  align-items: center;
}

.panel-row-title {
  font-size: 0.95rem;
  color: var(--foreground);
  font-weight: 500;
}

.panel-row-title-break {
  word-break: break-all;
}

.panel-row-title-nowrap {
  white-space: nowrap;
}

.panel-row-meta {
  color: var(--foreground-muted);
  white-space: nowrap;
  font-size: 0.8rem;
}

.panel-row-detail {
  color: var(--foreground-muted);
  font-size: 0.85rem;
  word-break: break-all;
}

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

.panel-head-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.panel-head-title {
  font-size: 1.05rem;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.panel-head-subtitle {
  font-size: 0.8rem;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
}

.panel-switch-offset {
  margin-top: 2px;
}

.panel-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.panel-soft-box {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--border-default);
}

.panel-soft-text {
  font-size: 0.85rem;
}

.panel-time-note {
  font-size: 0.8rem;
  color: var(--foreground-muted);
  margin-top: 4px;
}

.icon-prefix-sm {
  margin-right: 4px;
}

.icon-prefix-md {
  margin-right: 6px;
}

.node-card {
  cursor: pointer;
}

.node-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--border-default);
}

.node-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.node-meta-item-full {
  grid-column: 1 / -1;
}

.node-meta-label {
  font-size: 0.75rem;
  color: var(--foreground-muted);
}

.node-meta-value {
  font-size: 0.85rem;
  color: var(--foreground);
  font-family: var(--font-mono);
}

.node-meta-value-subtle {
  font-size: 0.82rem;
  color: var(--foreground-subtle);
}

/* =========================================
   用量统计 (Usage / Metrics)
   ========================================= */

.usage-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.usage-section {
  padding: 20px;
}

.usage-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.usage-section-icon {
  color: var(--accent);
  font-size: 1rem;
}

.usage-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
}

.usage-bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.usage-bar-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
}

.usage-bar-label {
  font-size: 0.82rem;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-bar-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width var(--motion-duration-base) var(--motion-ease-out);
  min-width: 4px;
}

.usage-bar-value {
  font-size: 0.82rem;
  color: var(--foreground);
  font-family: var(--font-mono);
  text-align: right;
}

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

.usage-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-default);
}

.usage-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: var(--font-mono);
}

.usage-stat-label {
  font-size: 0.78rem;
  color: var(--foreground-muted);
}

@media (max-width: 640px) {
  .usage-bar-row {
    grid-template-columns: 100px minmax(0, 1fr) 60px;
    gap: 8px;
  }

  .usage-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cron-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  border: 1px solid transparent;
}

.cron-badge-at {
  color: #60a5fa;
  background: rgba(59, 112, 252, 0.15);
  border-color: rgba(59, 112, 252, 0.3);
}

.cron-badge-cron {
  color: var(--success);
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

.cron-badge-every {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
}

.cron-badge-code {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.cron-status-empty {
  color: var(--foreground-muted);
}

.cron-status-ok {
  color: var(--success);
  font-weight: 500;
}

.cron-status-running {
  color: var(--primary);
  font-weight: 500;
}

.cron-status-error {
  color: var(--danger);
  font-weight: 500;
}

/* =========================================
   仪表盘组件 (Dashboard Stats)
   ========================================= */

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.panel-title-foreground {
  color: var(--foreground);
}

.panel-title-icon {
  margin-right: 10px;
}

.panel-title-icon-accent {
  color: var(--accent);
}

.panel-title-icon-warning {
  color: var(--warning);
}

.panel-body-scroll {
  flex: 1;
  overflow-y: auto;
}

.panel-empty {
  padding: 24px;
  text-align: center;
  color: var(--foreground-muted);
  font-size: 0.9rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 24px;
  position: relative;
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-4px);
  background: var(--surface-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-multi-hover);
}

.stat-card:hover .stat-icon {
  opacity: 0.8;
  transform: translateY(-50%) scale(1.05);
  filter: drop-shadow(0 0 12px currentColor);
}

.stat-icon {
  position: absolute;
  right: 24px;
  top: 24px;
  font-size: 1.8rem;
  opacity: 0.2;
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--foreground-muted);
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
}

/* Tables */
.table-wrap {
  overflow-x: auto;
}

.model-select-wrap {
  position: relative;
}

.model-select-wrap input {
  padding-right: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(147, 191, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.2);
}

.model-select-wrap input:focus {
  border-color: rgba(103, 175, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(103, 175, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.model-select-caret {
  position: absolute;
  right: 14px;
  top: 12px;
  color: rgba(255, 255, 255, 0.62);
  pointer-events: none;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

.model-select-wrap.open .model-select-caret {
  transform: rotate(180deg);
}

.model-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(160, 201, 255, 0.28);
  background: linear-gradient(180deg, rgba(24, 39, 69, 0.96), rgba(15, 25, 45, 0.95));
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  padding: 6px;
  display: none;
}

.model-select-wrap.open .model-select-menu {
  display: block;
}

.model-select-group {
  padding: 6px 10px 4px;
  font-size: 0.72rem;
  color: rgba(187, 212, 255, 0.72);
}

.model-select-item {
  width: 100%;
  text-align: left;
  border: 0;
  color: #eff5ff;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-out);
}

.model-select-item:hover,
.model-select-item.active {
  background: rgba(103, 175, 255, 0.2);
}

.model-select-item small {
  display: block;
  color: rgba(205, 223, 255, 0.62);
  margin-top: 2px;
}

.model-select-empty {
  padding: 10px;
  color: rgba(205, 223, 255, 0.62);
  font-size: 0.86rem;
}

.form-hint {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.alias-editor {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.alias-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-matrix-card {
  border-radius: 24px;
  border: 1px solid rgba(170, 209, 255, 0.18);
  background: linear-gradient(165deg, rgba(31, 51, 88, 0.55), rgba(12, 21, 40, 0.45));
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px;
  transition: transform var(--motion-duration-slow) var(--motion-ease-out), box-shadow var(--motion-duration-slow) var(--motion-ease-out);
}

.provider-matrix-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  border-color: rgba(170, 209, 255, 0.3);
}

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

.provider-matrix-card-head h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.provider-card-manage-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(170, 209, 255, 0.25);
  color: #d5e9ff;
  background: rgba(59, 112, 252, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.provider-card-manage-btn:hover {
  transform: translateY(-1px);
  background: rgba(59, 112, 252, 0.28);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.provider-matrix-url {
  font-size: 0.85rem;
  color: var(--foreground-muted);
  word-break: break-all;
  margin-bottom: 20px;
}

.provider-matrix-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.provider-matrix-add-card {
  min-height: 128px;
  border-radius: 20px;
  border: 1px dashed var(--border-default);
  color: var(--foreground-subtle);
  background: var(--surface);
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
}

.provider-matrix-add-card i {
  font-size: 1.35rem;
}

.provider-matrix-add-card:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
  color: var(--foreground);
  transform: translateY(-2px);
  box-shadow: var(--shadow-multi-layer);
}

.provider-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid var(--border-default);
  color: var(--foreground);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* =========================================
   模型池与胶囊交互 (Models Pills Pool)
   ========================================= */

.model-pool-shell {
  overflow: hidden;
  margin-top: 50px;
  margin-bottom: 40px;
}

.models-pills-pool {
  padding: 32px;
  border-radius: 24px;
  border: 1px solid var(--border-default);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 140px;
  background: radial-gradient(circle at top right, rgba(94, 106, 210, 0.05), transparent 70%);
  background-color: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 40px rgba(0, 0, 0, 0.4);
}

.glass-pill {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 180px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--border-default);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform var(--motion-duration-slow) var(--motion-ease-out), box-shadow var(--motion-duration-slow) var(--motion-ease-out), border-color var(--motion-duration-slow) var(--motion-ease-out);
}

.glass-pill:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 106, 210, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.stat-card-shell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 20px 24px;
}

.stat-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(128, 128, 128, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card-icon {
  font-size: 1.6rem;
}

.stat-icon-info {
  color: #64b5f6;
}

.stat-icon-success {
  color: #81c784;
}

.stat-icon-warning {
  color: #fff176;
}

.stat-icon-danger {
  color: #e57373;
}

.stat-card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-label-compact {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.stat-value-hero {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
}

.glass-pill strong {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
}

.glass-pill small {
  font-size: 0.75rem;
  color: var(--foreground-subtle);
  font-family: var(--font-mono);
}

.glass-pill em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}

.glass-pill .pill-flag {
  position: absolute;
  right: 12px;
  top: -8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-default);
  color: var(--foreground-muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

/* 赋予胶囊不同的泛光等级 (Context Window 越长越绮丽) */
.glass-pill.tone-sm {
  border-color: rgba(94, 106, 210, 0.15);
  background: linear-gradient(135deg, rgba(94, 106, 210, 0.08), transparent);
}

.glass-pill.tone-sm:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 106, 210, 0.2), inset 0 1px 1px rgba(94, 106, 210, 0.3);
}

.glass-pill.tone-md {
  border-color: rgba(69, 130, 255, 0.2);
  background: linear-gradient(135deg, rgba(69, 130, 255, 0.12), transparent);
}

.glass-pill.tone-md:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 25px rgba(69, 130, 255, 0.25), inset 0 1px 1px rgba(69, 130, 255, 0.4);
}

.glass-pill.tone-lg {
  border-color: rgba(181, 156, 255, 0.45);
  background: linear-gradient(135deg, rgba(120, 103, 255, 0.35), rgba(62, 90, 232, 0.22));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 40px rgba(145, 123, 255, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.glass-pill.tone-xl {
  border-color: rgba(249, 164, 255, 0.5);
  background: linear-gradient(135deg, rgba(197, 95, 255, 0.4), rgba(101, 89, 246, 0.25));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 45px rgba(220, 131, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.models-pool-empty {
  width: 100%;
  min-height: 72px;
  border-radius: 14px;
  border: 1px dashed rgba(170, 209, 255, 0.25);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body.provider-modal-open,
body.skill-modal-open {
  overflow: hidden;
}

.provider-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(154, 198, 255, 0.38);
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(103, 175, 255, 0.3), rgba(59, 112, 252, 0.2));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 6px rgba(0, 0, 0, 0.22);
}

.provider-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.24);
}

.provider-add-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.provider-edit-card {
  border-radius: 16px;
  border: 1px solid var(--border-default);
  background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px;
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
}

.provider-edit-card.focus-ring {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  background: var(--surface-hover);
}

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

.provider-card-head-spacious {
  margin-bottom: 20px;
}

.provider-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.provider-card-title i {
  color: var(--accent);
}

.provider-card-title-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  color: var(--accent);
}

.provider-card-title-strong {
  font-weight: 600;
}

.provider-card-remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--foreground-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
}

.provider-card-remove:hover {
  background: var(--surface-hover);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--danger);
  transform: scale(1.05);
}

.provider-delete-btn {
  min-width: 146px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  white-space: nowrap;
}

.provider-delete-btn i {
  font-size: 0.92rem;
}

.provider-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}

.provider-card-grid .config-row {
  margin-bottom: 0;
}

.provider-json-row {
  grid-column: 1 / -1;
  margin: 12px 0 0;
}

.provider-json-config.skeuo-textarea {
  min-height: 320px;
}

.provider-json-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.provider-json-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.provider-json-error {
  display: none;
}

.provider-json-error.is-hidden {
  display: none;
}

.provider-models-row {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

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

.provider-model-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  color: var(--foreground);
  background: var(--surface);
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
}

.provider-model-add:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.provider-model-list {
  display: grid;
  gap: 8px;
}

.model-chip-muted {
  background: rgba(255, 255, 255, 0.05);
}

.model-chip-manage {
  background: none;
  border-style: dashed;
  cursor: pointer;
}

.model-chips-container-end {
  margin-top: auto;
  padding-top: 10px;
}

.provider-empty-placeholder {
  grid-column: 1 / -1;
  padding: 40px;
}

.provider-empty-title {
  color: var(--text-primary);
  font-size: 1.1rem;
}

.provider-model-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto 1.5fr 36px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-out);
}

.provider-model-row:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

.provider-model-row input[type="text"],
.provider-model-row input[type="number"] {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.9rem;
  height: 36px;
  /* 统一样式高度 */
}

.provider-model-context {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

.provider-model-context::-webkit-outer-spin-button,
.provider-model-context::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.provider-model-context {
  -moz-appearance: textfield;
  appearance: textfield;
}

.provider-model-reasoning {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--foreground-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
}

.provider-model-reasoning .provider-model-reasoning-label {
  font-weight: 500;
  letter-spacing: 0.2px;
}

.provider-model-reasoning:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.provider-model-reasoning:focus-within {
  border-color: rgba(94, 106, 210, 0.5);
  box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.15);
}

.provider-model-reasoning input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 20px;
  flex: 0 0 34px;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

.provider-model-reasoning input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out), background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.provider-model-reasoning input[type="checkbox"]:focus {
  outline: none;
  border-color: rgba(94, 106, 210, 0.8);
}

.provider-model-reasoning input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(94, 106, 210, 0.35);
  outline-offset: 2px;
}

.provider-model-reasoning input[type="checkbox"]:checked {
  background: rgba(94, 106, 210, 0.92);
  border-color: rgba(94, 106, 210, 0.85);
  box-shadow: 0 0 10px rgba(94, 106, 210, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.provider-model-reasoning input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: #fff;
}

.provider-model-reasoning input[type="checkbox"]:checked+.provider-model-reasoning-label {
  color: var(--foreground);
}

.provider-model-reasoning:has(input[type="checkbox"]:checked) {
  border-color: rgba(94, 106, 210, 0.35);
  background: rgba(94, 106, 210, 0.12);
  color: var(--foreground);
}

.provider-model-remove {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--foreground-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
}

.provider-model-remove:hover {
  transform: scale(1.05);
}

.provider-secret-wrap {
  position: relative;
}

.provider-secret-wrap .provider-api-key {
  padding-right: 44px;
}

.provider-secret-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.provider-secret-toggle:hover,
.provider-secret-toggle.active {
  color: var(--foreground);
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

.alias-remove {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--foreground-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  padding: 0;
}

.alias-remove:hover {
  transform: scale(1.05);
}

button {
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
}

/* =========================================
   Spotlight 物理光效核心
   ========================================= */

[data-spotlight] {
  position: relative;
  overflow: hidden;
}

.spotlight-lens {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out);
}

[data-spotlight]:hover .spotlight-lens {
  opacity: 1;
}

/* Nodes & Cron Specific Cleanups */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.result,
.log-output {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 15px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow: auto;
}

.log-output {
  min-height: 400px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  white-space: pre-wrap;
}

.log-output-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-muted);
  font-style: italic;
}

.log-line {
  display: block;
}

.log-default {
  color: var(--text-primary);
}

.log-info {
  color: #60a5fa;
}

.log-warn {
  color: #fbbf24;
}

.log-error {
  color: #f87171;
}

.log-highlight {
  background: rgba(251, 191, 36, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

#nodes-list tbody tr.node-row {
  cursor: pointer;
  transition: all var(--motion-duration-base) var(--motion-ease-out);
}

#nodes-list tbody tr.node-row-selected td {
  background: linear-gradient(90deg, transparent, rgba(103, 175, 255, 0.15), transparent) !important;
  color: #fff;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
  /* 取消实体边框 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.status-badge-tight {
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.status-badge-icon {
  margin-right: 6px;
}

.status-badge.accent {
  background: rgba(94, 106, 210, 0.15);
  border-color: rgba(94, 106, 210, 0.3);
  color: var(--accent);
}

.status-badge.dynamic {
  color: var(--badge-color, var(--foreground));
  background: var(--badge-bg, var(--surface));
  border-color: var(--badge-border, var(--border-default));
}

.status-badge.ok {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  box-shadow: inset 0 1px 0 rgba(110, 231, 183, 0.2), 0 0 10px rgba(16, 185, 129, 0.1);
}

.status-badge.warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fce181;
  box-shadow: inset 0 1px 0 rgba(252, 225, 129, 0.2), 0 0 10px rgba(251, 191, 36, 0.1);
}

.status-badge.bad {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  box-shadow: inset 0 1px 0 rgba(252, 165, 165, 0.2), 0 0 10px rgba(239, 68, 68, 0.1);
}

#models-apply-status[hidden] {
  display: none !important;
}

.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  background: var(--glass-bg);
  padding: 10px;
  border-radius: 8px;
  color: white;
}

@media (max-width: 1024px) {
  .admin-sidebar {
    position: fixed;
    left: -260px;
    height: 100%;
    transition: var(--motion-duration-slow) var(--motion-ease-out);
    z-index: 99;
  }

  .admin-sidebar.active {
    left: 0;
  }

  .admin-main {
    padding: 80px 20px 20px;
  }

  .mobile-menu-btn {
    display: block;
  }

  .alias-row {
    flex-direction: column;
    align-items: stretch;
  }

  .provider-card-grid {
    grid-template-columns: 1fr;
  }

  .provider-model-row {
    grid-template-columns: 1fr;
  }

  .chat-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chat-main,
  .chat-sessions {
    min-height: 0;
    max-height: none;
  }

  .chat-sessions {
    display: none;
  }

  .chat-sessions.mobile-open {
    display: flex;
    max-height: 50vh;
  }

  .chat-mobile-toggle {
    display: inline-flex;
  }

  .chat-bubble {
    max-width: 100%;
  }

  .persona-layout {
    grid-template-columns: 1fr;
  }

  .persona-agent-list {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .persona-form-grid {
    grid-template-columns: 1fr;
  }

  .persona-form-compact,
  .persona-meta-bar-detail,
  .persona-file-content,
  .persona-panel-body-padding {
    padding: 18px;
  }

  .persona-file-tabs {
    padding: 14px 18px;
  }

  .persona-meta-bar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .persona-delete-toggle {
    width: 100%;
  }

  .persona-inline-actions-wrap {
    width: 100%;
    justify-content: stretch;
  }

  .persona-inline-actions-wrap>* {
    flex: 1 1 auto;
    justify-content: center;
  }

  .persona-panel-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .persona-agent-card {
    flex-wrap: wrap;
  }

  .persona-agent-badges {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
  }

  .chat-input-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .chat-input-hint {
    order: 2;
  }

  #chat-send-btn {
    width: 100%;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.table-wrap {
  overflow-x: auto;
  padding: 0 8px 8px;
  /* 增加一定外留白 */
}

.table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.table-wrap table th {
  letter-spacing: 1.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 18px 20px 14px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  text-align: left;
}

/* 强制表格列宽声明 */
.table-wrap table th.col-w-lg,
.table-wrap table td.col-w-lg {
  width: 45% !important;
  max-width: 45% !important;
}

.table-wrap table th.col-w-md,
.table-wrap table td.col-w-md {
  width: 25% !important;
  max-width: 25% !important;
}

.table-wrap table th.col-w-sm,
.table-wrap table td.col-w-sm {
  width: 15% !important;
  max-width: 15% !important;
}

.table-wrap table tr:last-child td {
  border-bottom: none;
}

.table-wrap table td {
  padding: 16px 20px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  word-wrap: break-word;
  word-break: normal;
  white-space: normal;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  transition: color var(--motion-duration-base) var(--motion-ease-out);
  text-align: left;
}

.table-wrap table tr {
  transition: all var(--motion-duration-base) var(--motion-ease-out);
  position: relative;
}

/* 斑马线：进一步增强宽表的可读性 */
.table-wrap table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.012);
}

/* 赋予高级呼吸悬浮光 */
.table-wrap table tbody tr:hover td {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent) !important;
  color: #fff;
}

/* 仪表盘专用：针对特定容器取消固定列宽限制以允许文字自然舒缩 */
#overview-content .table-wrap table {
  table-layout: auto;
}

#overview-content .table-wrap table td {
  word-wrap: normal;
  word-break: break-word;
  /* 允许必要时断开长英文名，但不生硬截断单词 */
  white-space: normal;
}

.skills-legend {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-default);
  color: var(--foreground-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  background: linear-gradient(180deg, rgba(94, 106, 210, 0.08), rgba(94, 106, 210, 0.02));
}

.skills-legend i {
  color: var(--accent);
  margin-top: 1px;
}

.skills-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.skills-group {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.skills-group-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skills-group-title {
  margin: 0;
  color: var(--foreground);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.skills-group-subtitle {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.skills-group-empty {
  padding: 14px;
  color: var(--foreground-muted);
  font-size: 0.84rem;
}

.skills-group-list {
  display: flex;
  flex-direction: column;
}

.skill-entry {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-default);
  transition: background var(--motion-duration-fast) var(--motion-ease-out);
  position: relative;
  z-index: 1;
}

.skill-entry-divider {
  border-bottom: 1px solid var(--border-default);
}

.skill-entry-main {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 140px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skill-entry-head {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-entry-name {
  font-size: 1.1rem;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-right: 8px;
}

.skill-entry-key {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 8px;
}

.skill-entry-description {
  width: 100%;
  white-space: normal;
  line-height: 1.4;
  color: var(--foreground-subtle);
  font-size: 0.9rem;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}

.skill-chip-source {
  background: rgba(128, 128, 128, 0.1);
  border-color: var(--glass-border);
  color: var(--text-secondary);
  margin-right: 8px;
}

.skill-chip-ready {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.3);
  font-weight: 600;
}

.skill-chip-not-ready {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.3);
  font-weight: 600;
}

.skill-chip-flag {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.25);
}

.skill-entry-toggle {
  margin-top: 0;
  flex-shrink: 0;
}

.skill-entry-toggle-blocked {
  opacity: 0.5;
  filter: grayscale(1);
  cursor: not-allowed;
}

.skill-entry-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  min-width: 120px;
  position: relative;
  z-index: 2;
}

.skill-entry-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skill-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skill-entry-status {
  font-size: 0.75rem;
  margin-top: 6px;
  font-weight: 600;
}

.skill-entry-status-active {
  color: var(--success);
}

.skill-entry-status-pending {
  color: var(--warning);
}

.skill-entry-status-disabled {
  color: var(--text-muted);
}

.skill-entry-status-blocked {
  color: var(--danger);
}

.skill-list-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.skill-ready-note,
.skill-reason-summary {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
}

.skill-ready-note {
  color: var(--success);
}

.skill-reason-summary {
  color: var(--warning);
}

.skill-hint-active {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--success);
  font-weight: 500;
  font-size: 0.85rem;
}

.skill-hint-block {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.skill-hint-blocked {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.skill-hint-disabled {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.skill-hint-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  color: var(--warning);
  font-size: 0.85rem;
  background: rgba(251, 191, 36, 0.08);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.skill-hint-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.skill-hint-list {
  margin: 4px 0 0;
  padding-left: 24px;
  opacity: 0.95;
  list-style-type: disc;
}

.skill-hint-list li {
  margin-bottom: 4px;
}

.skill-hint-note {
  margin-top: 4px;
  font-size: 0.8rem;
  opacity: 0.75;
  font-style: italic;
}

.skill-ready-note i,
.skill-reason-summary i {
  margin-top: 2px;
}

.skill-reason-details {
  margin-top: 2px;
}

.skill-reason-details summary {
  cursor: pointer;
  color: var(--foreground-muted);
  font-size: 0.79rem;
}

.skill-reason-details ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--foreground-muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

/* Forms */
.config-row {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

input,
textarea,
select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: white;
  transition: all var(--motion-duration-base) var(--motion-ease-out);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(94, 106, 210, 0.5);
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.config-form {
  padding: 30px;
  background: transparent;
}

.form-section {
  margin-bottom: 20px;
}

.form-section-lg {
  margin-bottom: 24px;
}

.form-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.form-label-strong {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.form-label-icon {
  margin-right: 6px;
  opacity: 0.7;
}

.form-control {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background: rgba(0, 0, 0, 0.3);
  color: var(--foreground);
  padding: 10px 14px;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.form-control-mono {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.form-control-sm {
  padding: 8px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
}

.form-control:focus {
  border-color: rgba(94, 106, 210, 0.5);
  outline: none;
  box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.15);
}

.form-help-muted {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.form-empty-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 12px;
}

.form-inline-actions {
  display: flex;
  gap: 10px;
}

.form-status-block {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 16px;
}

.form-status-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-status-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 0.85rem;
  opacity: 0.9;
}

.form-status-list li {
  margin-bottom: 4px;
}

.form-status-warning {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.25);
  color: var(--warning);
}

.form-status-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: var(--success);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-config-modal-panel {
  max-width: 640px;
  width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.skill-config-modal-head,
.skill-config-modal-foot {
  flex-shrink: 0;
}

.skill-config-title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}

.skill-config-subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.83rem;
  font-family: var(--font-mono);
}

.skill-config-key {
  color: var(--accent);
}

.skill-config-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.skill-config-desc {
  margin-bottom: 20px;
  color: var(--foreground-subtle);
  font-size: 0.9rem;
  line-height: 1.5;
}

.skill-config-status {
  margin-bottom: 20px;
}

.env-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.env-key {
  flex: 1;
}

.env-val {
  flex: 2;
}

.env-row-delete {
  color: var(--danger);
}

.is-readonly {
  opacity: 0.7;
}

.is-hidden {
  display: none;
}

.switch-toggle input:focus-visible+.slider {
  outline: 2px solid rgba(94, 106, 210, 0.4);
  outline-offset: 2px;
}

/* Blog Admin Toast Styles */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  background: rgba(20, 40, 80, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  min-width: 280px;
  max-width: 420px;
  pointer-events: auto;
  animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: right center;
  color: #fff;
}

.toast.toast-exit {
  animation: toastSlideOut 0.3s ease-in forwards;
}

.toast-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}

.toast.success .toast-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.toast.warning .toast-icon {
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

.toast.error .toast-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.toast.info .toast-icon {
  background: rgba(59, 112, 252, 0.2);
  color: #60a5fa;
  box-shadow: 0 0 15px rgba(59, 112, 252, 0.3);
}

.toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.toast-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 4px;
}

.toast-message {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  font-size: 0.85rem;
}

.toast-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(50%) scale(0.9);
  }
}

.switch-toggle {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 22px;
  align-items: center;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-toggle .slider {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--motion-duration-base) var(--motion-ease-out);
}

.switch-toggle .knob {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left var(--motion-duration-base) var(--motion-ease-out);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.switch-toggle input:checked+.slider {
  background: var(--primary-color);
  border-color: transparent;
}

.switch-toggle input:checked+.slider .knob {
  left: calc(100% - 18px);
}

/* Action buttons in tables */
.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  padding: 0;
}

.action-btn-horizontal {
  width: auto;
  height: auto;
  padding: 6px 12px;
  border-radius: 6px;
}

.action-btn-fill {
  flex: 1;
  justify-content: center;
}

.action-btn-run {
  background: rgba(59, 112, 252, 0.15);
  color: #82b0ff;
  border-color: rgba(59, 112, 252, 0.3);
}

.action-btn-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.action-btn-row-end {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 8px;
}

.action-btn:hover {
  transform: translateY(-2px);
  color: var(--text-primary);
}

.play-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.log-btn:hover {
  background: rgba(59, 112, 252, 0.2);
  border-color: rgba(59, 112, 252, 0.4);
  color: #60a5fa;
}

/* Tabs for forms */
.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
  padding: 10px 15px;
  cursor: pointer;
  position: relative;
  transition: var(--motion-duration-base) var(--motion-ease-out);
}

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

.tab-btn.active {
  color: var(--primary-color);
  font-weight: 600;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-color);
  border-radius: 3px 3px 0 0;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(94, 106, 210, 0.5);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Custom select arrow and options */
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  padding-right: 2.5rem;
  color: var(--text-primary);
}

select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  padding: 8px;
}

#cron-form-wrap {
  margin-top: 30px;
  transform: translateY(15px);
}

#cron-form-wrap.cron-form-wrap-loading {
  display: none;
  opacity: 0;
}

#cron-form-wrap.cron-form-wrap-ready {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out), transform var(--motion-duration-slow) var(--motion-ease-out);
}

.cron-panel-header {
  background: rgba(0, 0, 0, 0.15);
}

.cron-tabs {
  display: flex;
  gap: 15px;
}

#cron-view-form .config-row {
  margin-bottom: 24px;
}

.cron-schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

#cron-form-value-wrap {
  margin-bottom: 0;
  position: relative;
}

#cron-time-picker {
  display: flex;
  gap: 10px;
}

#cron-time-picker.is-hidden {
  display: none;
}

#cron-form-name,
#cron-form-kind,
#cron-form-time,
#cron-form-value,
#cron-form-message {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
}

#cron-form-time {
  padding: 11px 16px;
  font-size: 1rem;
  font-family: var(--font-mono);
  cursor: pointer;
}

#cron-form-value {
  display: none;
  font-family: var(--font-mono);
}

#cron-form-value.cron-value-visible {
  display: block;
}

#cron-form-message {
  padding: 16px;
  line-height: 1.5;
  resize: vertical;
}

.cron-flags-row {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-bottom: 30px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cron-flag-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.cron-flag-switch {
  width: 36px;
  height: 20px;
}

.cron-flag-switch .knob {
  width: 14px;
  height: 14px;
}

.cron-flag-switch input:checked+.slider .knob {
  left: calc(100% - 16px);
}

.cron-view-json {
  display: none;
}

#cron-view-json.active {
  display: block;
}

.cron-json-head {
  margin-bottom: 15px;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cron-template-btn {
  background: rgba(59, 112, 252, 0.15);
  border: 1px solid rgba(59, 112, 252, 0.3);
  color: var(--text-primary);
  padding: 6px 12px;
}

.cron-json-editor-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

#cron-job-json {
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 16px;
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 320px;
  resize: vertical;
}

#node-params {
  min-height: 140px;
  font-family: var(--font-mono);
  line-height: 1.6;
  resize: vertical;
}

.cron-actions {
  margin-top: 15px;
  justify-content: flex-end;
}

.cron-result {
  display: none;
}

.cron-result-visible {
  display: block;
}

/* ── Cron Runs Modal ── */

.cron-runs-modal-shell {
  z-index: 1100;
}

.cron-runs-modal-panel {
  max-width: 560px;
}

.cron-runs-modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

.cron-run-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cron-run-item:last-child {
  border-bottom: none;
}

.cron-run-item-err {
  background: rgba(220, 38, 38, 0.05);
}

.cron-run-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.cron-run-icon-ok { color: #22C55E; }
.cron-run-icon-err { color: #EF4444; }
.cron-run-icon-unknown { color: var(--foreground-muted); }

.cron-run-status {
  font-weight: 600;
  min-width: 36px;
}

.cron-run-time {
  color: var(--foreground-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.cron-run-duration {
  margin-left: auto;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.cron-run-error {
  margin-top: 6px;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: #EF4444;
  background: rgba(220, 38, 38, 0.08);
  border-radius: 6px;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-all;
}

[data-theme="light"] .cron-run-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cron-run-item-err {
  background: rgba(220, 38, 38, 0.04);
}

[data-theme="light"] .cron-run-error {
  background: rgba(220, 38, 38, 0.06);
}

:root[data-theme="light"] .cron-flags-row {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(26, 32, 44, 0.08);
}

/* Input time picker icon color for dark mode */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.6;
}

input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

@media (max-width: 900px) {
  .cron-schedule-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cron-flags-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .cron-json-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .provider-matrix-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .provider-add-btn {
    width: 100%;
  }

  .models-pills-pool {
    padding: 14px;
  }

  .glass-pill {
    min-width: 100%;
  }

  .provider-modal-shell {
    padding: 12px;
  }

  .provider-modal-foot {
    flex-direction: column;
  }
}

/* =========================================
   模型管理模块 - Glass & Skeuomorphism 增强
   ========================================= */

/* 提供商矩阵布局 */
.provider-matrix-wrapper {
  overflow: hidden;
  margin-top: 40px;
}

.provider-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
  padding: 8px 0;
}

/* 玻璃态提供商卡片 */
.provider-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(20, 20, 25, 0.4) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* 边缘高光 */
  border-radius: 20px;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 0 30px var(--provider-glow);
  /* 品牌内透光 */
}

.provider-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: radial-gradient(circle at top left, var(--provider-glow, rgba(255, 255, 255, 0.05)), transparent 75%);
  opacity: 0.8;
  pointer-events: none;
}

.provider-card:hover {
  transform: translateY(-4px) scale(1.01);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(30, 30, 35, 0.5) 100%);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    0 0 0 1px var(--provider-border, rgba(255, 255, 255, 0.2)),
    inset 0 0 50px var(--provider-glow);
}

/* 提供商头部 */
.provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.provider-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.provider-logo-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(40, 40, 45, 0.8), rgba(20, 20, 25, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.6);
  color: var(--provider-color, #fff);
  font-size: 1.5rem;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  cursor: pointer;
}

.provider-logo-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.7),
    0 0 20px var(--provider-glow);
}

.provider-logo-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.provider-info h4 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.provider-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.provider-status.active {
  color: var(--success);
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.24);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.08),
    0 10px 24px rgba(16, 185, 129, 0.12);
}

.provider-status.active i {
  color: var(--success);
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.24);
}

.provider-status i {
  font-size: 0.65rem;
}

/* 拟物化模型按钮池 */
.model-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.model-chip {
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(45, 45, 50, 0.6), rgba(30, 30, 35, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
}

.model-chip:hover {
  background: linear-gradient(180deg, rgba(55, 55, 60, 0.8), rgba(40, 40, 45, 0.9));
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.model-chip-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--provider-color, #888);
  box-shadow: 0 0 6px var(--provider-color, #888);
}


/* 弹窗表单通用与 JSON 特殊字体 */
.provider-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--motion-duration-slow) var(--motion-ease-out);
}

.provider-modal-shell.show,
.provider-modal-shell.open {
  opacity: 1;
  visibility: visible;
}

.provider-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.provider-modal-panel {
  position: relative;
  width: 90%;
  max-width: 680px;
  max-height: 90vh;
  background: rgba(20, 20, 25, 0.75);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(20px);
  transition: transform var(--motion-duration-slow) var(--motion-ease-out);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.provider-modal-shell.show .provider-modal-panel,
.provider-modal-shell.open .provider-modal-panel {
  transform: scale(1) translateY(0);
}

.provider-modal-head {
  padding: 24px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  border-radius: 24px 24px 0 0;
}

.provider-modal-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

.provider-modal-subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.83rem;
}

.provider-modal-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.provider-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: scale(1.05);
}

.provider-modal-body {
  padding: 30px;
  overflow-y: auto;
  flex: 1;
}

.provider-modal-body::-webkit-scrollbar {
  width: 6px;
}

.provider-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.provider-modal-foot {
  padding: 20px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 0 24px 24px;
}

.modal-foot-actions {
  display: flex;
  gap: 10px;
}

.confirm-modal-shell {
  z-index: 10050;
}

.confirm-modal-panel {
  width: min(520px, calc(100% - 32px));
  max-width: 520px;
  max-height: min(82vh, 420px);
}

.confirm-modal-head {
  align-items: center;
}

.confirm-modal-body {
  padding: 24px 28px 22px;
}

.confirm-modal-message {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.prompt-dialog-input {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--surface-low);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.prompt-dialog-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.prompt-dialog-input::placeholder {
  color: var(--foreground-muted);
  opacity: 0.6;
}

.confirm-modal-foot {
  justify-content: flex-end;
  gap: 10px;
  flex-direction: row;
}

.confirm-modal-confirm-btn,
.confirm-modal-cancel-btn {
  min-width: 100px;
}

body.confirm-modal-open {
  overflow: hidden;
}

/* 表单内部元件 */
.provider-edit-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.skeuo-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeuo-input-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* 拟物凹陷输入框 */
.skeuo-input,
.skeuo-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top-color: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all var(--motion-duration-fast) var(--motion-ease-out);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

.skeuo-input:focus,
.skeuo-textarea:focus {
  outline: none;
  border-color: rgba(94, 106, 210, 0.5);
  background: rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(94, 106, 210, 0.2);
}

.skeuo-input::placeholder,
.skeuo-textarea::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

.skeuo-textarea {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}

/* 验证失败的高亮提示 */
.json-error {
  border-color: #ef4444 !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.5) !important;
}

.json-error-text {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 开关组 */
.skeuo-switch-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.skeuo-switch-info {
  display: flex;
  flex-direction: column;
}

.skeuo-switch-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.skeuo-switch-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* =============== 亮色主题切换 (Light Theme) =============== */
[data-theme="light"] {
  /* 基础画布映射至实体浅色材质 */
  --bg-deep: #E5E7EB;
  /* 更深的底板加强层次感 */
  --bg-base: #F3F4F6;
  --bg-elevated: #FFFFFF;

  /* 玻璃层，使用白色半透透彻背部质感 */
  --surface: rgba(255, 255, 255, 0.85);
  /* 提高不透明度，使卡片相对底板更实 */
  --surface-hover: #FFFFFF;

  /* 文本系统反转 */
  --foreground: #111827;
  /* 近黑极深灰为主阅读色 */
  --foreground-muted: #4B5563;
  /* 二级附带灰度文本，加深以提高可读性 */
  --foreground-subtle: #9CA3AF;
  /* 提示性文字 */

  --provider-color: #4B5563;
  --provider-glow: rgba(75, 85, 99, 0.14);
  --provider-border: rgba(75, 85, 99, 0.22);

  /* 品牌核心点缀 */
  --accent: #4338CA;
  /* 使用更深的靛蓝色确保在浅色背景上有充足对比 */
  --accent-bright: #4F46E5;
  --accent-glow: rgba(67, 56, 202, 0.15);

  /* 物理切边与分隔 */
  --border-default: rgba(0, 0, 0, 0.08);
  /* 加深边框线以分割内容区块 */
  --border-hover: rgba(0, 0, 0, 0.15);
  --border-accent: rgba(79, 70, 229, 0.3);

  /* 极度拟物化的物理立体多重投影架构
     调整亮色下的阴影为更加厚重克制的物理投影 */
  --shadow-multi-layer: 0 0 0 1px var(--border-default),
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.03);

  --shadow-multi-hover: 0 0 0 1px var(--border-hover),
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 20px 40px rgba(67, 56, 202, 0.05);

  /* 主行动按钮立体结构 */
  --shadow-cta: 0 0 0 1px rgba(67, 56, 202, 0.4),
    0 4px 12px rgba(67, 56, 202, 0.25),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .ambient-base {
  background: radial-gradient(ellipse at top center, #FFFFFF 0%, #F3F4F6 50%, #E5E7EB 100%);
}

[data-theme="light"] .ambient-grid {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

[data-theme="light"] .ambient-blob.primary,
[data-theme="light"] .ambient-blob.secondary,
[data-theme="light"] .ambient-blob.tertiary {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* 亮色模式特殊控件覆写 */
[data-theme="light"] .panel-action-btn:hover {
  color: #111827;
}

[data-theme="light"] .btn-secondary:hover {
  color: #111827;
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: #ffffff;
  border-color: rgba(79, 70, 229, 0.36);
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.08),
    0 10px 24px rgba(79, 70, 229, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

[data-theme="light"] .btn-primary::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
}

[data-theme="light"] .btn-primary:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  border-color: rgba(79, 70, 229, 0.48);
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.12),
    0 14px 30px rgba(79, 70, 229, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme="light"] .btn-primary:active {
  box-shadow:
    0 6px 14px rgba(79, 70, 229, 0.18),
    inset 0 2px 4px rgba(49, 46, 129, 0.14);
}

[data-theme="light"] .btn-primary-strong {
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.12),
    0 12px 28px rgba(79, 70, 229, 0.22);
}

[data-theme="light"] .btn-primary:disabled,
[data-theme="light"] .btn-primary[disabled] {
  color: rgba(99, 102, 241, 0.72);
  background: linear-gradient(135deg, rgba(224, 231, 255, 0.92), rgba(238, 242, 255, 0.92));
  border-color: rgba(165, 180, 252, 0.5);
  box-shadow:
    0 0 0 1px rgba(165, 180, 252, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

[data-theme="light"] .btn-primary:disabled::after,
[data-theme="light"] .btn-primary[disabled]::after {
  display: none;
}

[data-theme="light"] .btn-ghost,
[data-theme="light"] .panel-action-btn.btn-ghost {
  color: var(--foreground-muted);
  background: transparent;
}

[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .panel-action-btn.btn-ghost:hover {
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .status-badge {
  color: var(--accent) !important;
  background: rgba(67, 56, 202, 0.1) !important;
  border-color: rgba(67, 56, 202, 0.2) !important;
}

[data-theme="light"] .status-badge.accent {
  color: var(--accent) !important;
  background: rgba(67, 56, 202, 0.1) !important;
  border-color: rgba(67, 56, 202, 0.2) !important;
}

[data-theme="light"] .status-badge.dynamic {
  color: var(--foreground) !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .brand-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
}

[data-theme="light"] .brand-logo-gem {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 255, 0.82));
  box-shadow:
    0 10px 24px rgba(79, 70, 229, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 2px rgba(148, 163, 184, 0.18),
    0 0 0 1px rgba(79, 70, 229, 0.12);
}

[data-theme="light"] .gem-inner {
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-bright) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    inset 0 -2px 4px rgba(49, 46, 129, 0.28),
    0 8px 18px rgba(79, 70, 229, 0.22);
}

[data-theme="light"] .brand-title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--foreground);
  color: var(--foreground);
  filter: none;
  text-shadow: none;
}

[data-theme="light"] .brand-status {
  color: var(--foreground-muted);
}

[data-theme="light"] .status-dot {
  box-shadow:
    0 0 0 4px rgba(16, 185, 129, 0.12),
    inset 0 1px 2px rgba(255, 255, 255, 0.75),
    inset 0 -1px 2px rgba(5, 150, 105, 0.16);
}

[data-theme="light"] .nav-item.active {
  color: var(--accent-bright) !important;
  background: var(--surface) !important;
}

/* 亮色模式卡片、表格、表单框质感重定义 */
[data-theme="light"] .glass-panel {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
  box-shadow: 0 0 0 1px var(--border-default), 0 4px 16px rgba(0, 0, 0, 0.03), 0 16px 32px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .provider-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88));
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 14px 34px rgba(15, 23, 42, 0.06),
    0 28px 54px rgba(79, 70, 229, 0.06);
}

[data-theme="light"] .provider-card::before {
  background: radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 72%);
  opacity: 0.68;
}

[data-theme="light"] .provider-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.94));
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.12),
    0 18px 42px rgba(15, 23, 42, 0.08),
    0 30px 62px rgba(79, 70, 229, 0.12);
}

[data-theme="light"] .provider-logo-btn {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 242, 255, 0.86));
  border-color: rgba(79, 70, 229, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 18px rgba(79, 70, 229, 0.12);
  color: #475569;
}

[data-theme="light"] .provider-logo-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 28px rgba(79, 70, 229, 0.16),
    0 0 0 1px rgba(79, 70, 229, 0.1);
}

[data-theme="light"] .provider-status {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.16);
  color: var(--foreground-muted);
}

[data-theme="light"] .provider-status.active {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.22);
  color: #047857;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.06),
    0 8px 18px rgba(16, 185, 129, 0.08);
}

[data-theme="light"] .provider-status.active i {
  color: var(--success);
  text-shadow: none;
}

[data-theme="light"] .model-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 244, 246, 0.92));
  border-color: rgba(15, 23, 42, 0.08);
  color: var(--foreground-muted);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .model-chip:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(79, 70, 229, 0.16);
  color: var(--foreground);
  box-shadow:
    0 10px 20px rgba(79, 70, 229, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

[data-theme="light"] .model-chip-manage {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.16);
  color: var(--accent);
}

[data-theme="light"] .model-chip-muted {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.16);
  color: var(--foreground-muted);
}

[data-theme="light"] .admin-sidebar {
  background: rgba(247, 248, 250, 0.7);
  border-right: 1px solid var(--border-default);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .stat-card {
  background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .page-title {
  background: linear-gradient(to bottom, #111827 0%, #4B5563 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #FFFFFF;
  border: 1px solid var(--border-hover);
  color: var(--foreground);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--accent);
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .skeuo-switch-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--border-default);
}

[data-theme="light"] table th {
  background: rgba(0, 0, 0, 0.02);
  color: var(--foreground-muted);
}

[data-theme="light"] table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.015);
}

[data-theme="light"] .provider-model-row {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .provider-model-row:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .provider-model-reasoning {
  background: transparent;
}

/* 亮色全局通用控件附加覆盖 */
[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--foreground);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .toast-title {
  color: var(--foreground);
}

[data-theme="light"] .toast-message {
  color: var(--foreground-muted);
}

[data-theme="light"] .toast-close {
  color: var(--foreground-subtle);
}

[data-theme="light"] .toast-close:hover {
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .switch-toggle .slider {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .switch-toggle input:checked+.slider {
  background: var(--accent);
}

[data-theme="light"] .switch-toggle .knob {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .action-btn {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.6);
  color: var(--foreground-subtle);
}

[data-theme="light"] .action-btn:hover {
  color: var(--foreground);
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .action-btn.play-btn:hover {
  color: #10b981;
}

[data-theme="light"] .action-btn.log-btn:hover {
  color: #3b82f6;
}

/* 亮色模式：特定模块卡片细节组件覆盖 (Skills & Nodes 等) */
[data-theme="light"] .skill-chip-source {
  background: rgba(0, 0, 0, 0.04);
  color: var(--foreground-muted);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .skill-chip-ready {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .skill-chip-not-ready {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
  border-color: rgba(245, 158, 11, 0.2);
}

[data-theme="light"] .skill-chip-flag {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .status-badge.ok {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(16, 185, 129, 0.05), 0 2px 4px rgba(16, 185, 129, 0.05);
}

[data-theme="light"] .status-badge.warn {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #D97706 !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.05), 0 2px 4px rgba(245, 158, 11, 0.05);
}

[data-theme="light"] .status-badge.bad {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(220, 38, 38, 0.05), 0 2px 4px rgba(220, 38, 38, 0.05);
}

/* 亮色下横栏标题区与节点警告信息文字色彩纠正 */
[data-theme="light"] .skill-reason-summary {
  color: #D97706;
}

[data-theme="light"] .skill-ready-note {
  color: #059669;
}

/* Cron任务中配置小字 */
[data-theme="light"] .cron-flag-item {
  color: var(--foreground-muted);
}

[data-theme="light"] .cron-json-head {
  color: var(--foreground-muted);
}

/* ── 浅色主题：弹窗（Provider Modal + Confirm Modal） ── */

[data-theme="light"] .provider-modal-backdrop {
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}

[data-theme="light"] .provider-modal-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .provider-modal-head {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.6), transparent);
}

[data-theme="light"] .provider-modal-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--foreground-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .provider-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--foreground);
}

[data-theme="light"] .provider-modal-foot {
  border-top-color: rgba(0, 0, 0, 0.06);
  background: rgba(248, 250, 252, 0.6);
}

[data-theme="light"] .provider-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

/* ── 浅色主题：Provider 编辑表单 ── */

[data-theme="light"] .provider-edit-card {
  background: rgba(248, 250, 252, 0.8);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .provider-edit-card.focus-ring {
  border-color: rgba(79, 70, 229, 0.2);
  background: rgba(255, 255, 255, 0.9);
}

/* ── 浅色主题：实时日志页面 ── */

[data-theme="light"] .result,
[data-theme="light"] .log-output {
  background: rgba(15, 23, 42, 0.04);
  color: var(--foreground);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .log-output {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .log-default {
  color: var(--foreground);
}

[data-theme="light"] .log-info {
  color: #2563EB;
}

[data-theme="light"] .log-warn {
  color: #D97706;
}

[data-theme="light"] .log-error {
  color: #DC2626;
}

[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* ── 浅色主题：危险操作按钮 ── */

[data-theme="light"] .btn-danger {
  color: #DC2626;
  background: rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .btn-danger:hover {
  background: rgba(239, 68, 68, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-base: 1ms;
    --motion-duration-slow: 1ms;
  }

  .ambient-blob,
  .empty-icon,
  .skeleton-text::after {
    animation: none;
  }

  .toast,
  .toast.toast-exit {
    animation-duration: 1ms;
    animation-timing-function: linear;
  }

  .spotlight-lens {
    opacity: 0;
    transition: none;
  }
}