/* =========================================================
 * Storyboard — Dark Design System
 * 基于 Pencil 正式稿（UI 设计.pen）重写
 * ========================================================= */

/* ---- 设计 Token ----------------------------------------- */
:root {
  /* 背景层级 */
  --bg-page:       #090a0d;
  --bg-surface:    #111318;
  --bg-surface-2:  #14171e;
  --bg-surface-3:  #1c1e22;
  --bg-panel:      #15171c;

  /* 文字 */
  --text-primary:   #dce2f0;
  --text-secondary: #98a2bd;
  --text-muted:     #5c6480;
  --text-inverse:   #0d0e12;

  /* 强调 / 主色 */
  --accent:         #7fb7ff;
  --accent-strong:  #4a9bff;
  --accent-bg:      rgba(127, 183, 255, 0.10);
  --accent-hover:   rgba(127, 183, 255, 0.16);

  /* 危险 */
  --danger:         #ff6666;
  --danger-bg:      rgba(255, 102, 102, 0.10);

  /* 成功 */
  --success:        #42d392;

  /* 描边 */
  --border:         rgba(255, 255, 255, 0.07);
  --border-strong:  rgba(127, 183, 255, 0.20);
  --border-card:    rgba(60, 64, 80, 0.60);

  /* 阴影 */
  --shadow-sm:    0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow:  0 0 0 4px rgba(127, 183, 255, 0.14);

  /* 圆角 */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* 网格 */
  --grid-major: rgba(43, 102, 255, 0.07);
  --grid-minor: rgba(255, 255, 255, 0.025);

  /* 连线颜色 */
  --edge-color:   #7fb7ff;
  --edge-filter:  drop-shadow(0 0 4px rgba(127, 183, 255, 0.35));

  /* ========================================================
   * Type scale (line-height 通过 --leading-* 单独控制)
   * 用法：font-size: var(--font-sm); line-height: var(--leading-normal);
   * ======================================================== */
  --font-2xs:  10px;
  --font-xs:   11px;
  --font-sm:   12px;
  --font-base: 13px;
  --font-md:   14px;
  --font-lg:   16px;
  --font-xl:   18px;
  --font-2xl:  22px;
  --font-3xl:  28px;
  --font-4xl:  36px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ========================================================
   * Spacing scale — Tailwind 风格 4px 基础 + 半步
   * 半步 (-5) 命名解决 6 / 10 / 14 等常见值不在整步上的问题
   * 用法：padding: var(--space-3) var(--space-4);
   * ======================================================== */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-4-5:  18px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;

  /* ========================================================
   * 语义化色调（用于 badge / tone / status pill）
   * 每个 tone 提供 bg / border / text 三件套
   * ======================================================== */
  --tone-success-bg:     rgba(66, 211, 146, 0.14);
  --tone-success-border: rgba(66, 211, 146, 0.32);
  --tone-success-text:   #6dffb1;

  --tone-info-bg:        rgba(127, 183, 255, 0.14);
  --tone-info-border:    rgba(127, 183, 255, 0.32);
  --tone-info-text:      #a8c8ff;

  --tone-warn-bg:        rgba(255, 184, 64, 0.14);
  --tone-warn-border:    rgba(255, 184, 64, 0.32);
  --tone-warn-text:      #ffd47a;

  --tone-danger-bg:      rgba(255, 102, 102, 0.14);
  --tone-danger-border:  rgba(255, 102, 102, 0.32);
  --tone-danger-text:    #ff8e8e;

  --tone-neutral-bg:     rgba(255, 255, 255, 0.06);
  --tone-neutral-border: rgba(255, 255, 255, 0.12);
  --tone-neutral-text:   var(--text-secondary);

  /* ========================================================
   * z-index scale — 避免散落的硬编码 z-index 数字打架
   * ======================================================== */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-modal-bg:  3500;
  --z-modal:     4000;
  --z-toast:     9000;
  --z-tooltip:   10000;

  /* ========================================================
   * Motion (动效曲线和持续时间)
   * ======================================================== */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
}

/* =========================================================
 * 全局动画 Keyframes
 * ========================================================= */

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

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes slide-in-left {
  from { opacity: 0; transform: translateY(-50%) translateX(-12px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@keyframes btn-press {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* ---- 全局重置 ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "SF Pro Text", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
 * AUTH PAGES
 * ========================================================= */

.auth-page-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(127, 183, 255, 0.18) 0%, transparent 60%),
    var(--bg-page);
}

.auth-page-shell {
  width: 100%;
  max-width: 400px;
  padding: 40px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 顶部 logo 行 */
.auth-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-primary);
}

/* 卡片 */
.auth-card {
  width: 100%;
  background: rgba(14, 16, 21, 0.88);
  border: 1px solid rgba(86, 94, 113, 0.42);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 20px 48px rgba(0,0,0,0.40);
  padding: 28px 24px 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.auth-card-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
}

.auth-kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.auth-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.auth-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* 标签页 */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 3px;
}

.auth-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.auth-tab-btn.is-active {
  background: rgba(255,255,255,0.10);
  color: var(--text-primary);
}

.auth-tab-btn:hover:not(.is-active) {
  color: var(--text-secondary);
}

/* 表单 */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field[hidden] { display: none !important; }

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

.auth-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-field-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.6;
  letter-spacing: 0;
}

.auth-field-input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(86,94,113,0.45);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  padding: 0 13px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}

.auth-field-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.auth-field-input:focus {
  border-color: rgba(127,183,255,0.60);
  box-shadow: 0 0 0 3px rgba(127,183,255,0.10);
}

/* 密码可见切换 */
.auth-field-password-wrap {
  position: relative;
}

.auth-field-password-wrap .auth-field-input {
  padding-right: 44px;
}

.auth-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.16s;
}

.auth-password-toggle:hover { color: var(--text-primary); }

/* 消息 */
/* 预览区内嵌 toast */
.preview-toast {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 25;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(22, 24, 28, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.preview-toast[data-type="error"] {
  background: rgba(147, 38, 38, 0.94);
}

.preview-toast[data-type="success"] {
  background: rgba(26, 99, 66, 0.94);
}

/* 画布顶部全局错误 toast (canvas-toast.js) */
.canvas-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -16px);
  z-index: 9000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(147, 38, 38, 0.96);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.canvas-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
 * 统一的 ui-modal.js 内嵌弹窗（toast + confirm/prompt modal）
 * 替代原生 alert / confirm / prompt
 * ========================================================= */
.ui-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -16px);
  z-index: var(--z-toast, 9000);
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-align: center;
  color: #fff;
  background: rgba(36, 40, 50, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ui-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ui-toast[data-type="success"] {
  background: rgba(26, 99, 66, 0.96);
  border-color: rgba(66, 211, 146, 0.32);
}

.ui-toast[data-type="error"] {
  background: rgba(147, 38, 38, 0.96);
  border-color: rgba(255, 102, 102, 0.32);
}

.ui-toast[data-type="info"] {
  background: rgba(36, 60, 100, 0.96);
  border-color: rgba(127, 183, 255, 0.32);
}

/* ── modal backdrop / container ───────────────────────── */
.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 4000);
  background: rgba(4, 6, 10, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ui-modal-fade-in 0.18s ease-out;
}

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

.ui-modal {
  width: min(420px, 100%);
  background: var(--bg-surface, #111318);
  border: 1px solid var(--border-card, rgba(60, 64, 80, 0.6));
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.55));
  overflow: hidden;
  animation: ui-modal-pop 0.22s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes ui-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ui-modal-title {
  padding: 18px 20px 0;
  font-size: var(--font-md, 14px);
  font-weight: var(--weight-semibold, 600);
  color: var(--text-primary, #dce2f0);
}

.ui-modal-body {
  padding: 14px 20px 6px;
  color: var(--text-secondary, #98a2bd);
  font-size: var(--font-base, 13px);
  line-height: var(--leading-normal, 1.5);
}

.ui-modal-message {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.ui-modal-input-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: var(--font-sm, 12px);
  color: var(--text-muted, #5c6480);
}

.ui-modal-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-surface-2, #14171e);
  border: 1px solid var(--border-card, rgba(60, 64, 80, 0.6));
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary, #dce2f0);
  font-size: var(--font-base, 13px);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.ui-modal-input:focus {
  border-color: var(--accent, #7fb7ff);
  background: var(--bg-surface-3, #1c1e22);
  box-shadow: var(--shadow-glow, 0 0 0 4px rgba(127, 183, 255, 0.14));
}

.ui-modal-input-error {
  margin-top: 6px;
  font-size: var(--font-sm, 12px);
  color: #ff8e8e;
}

.ui-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--border-card, rgba(60, 64, 80, 0.6));
  margin-top: 8px;
}

.ui-modal-btn {
  min-width: 76px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-card, rgba(60, 64, 80, 0.6));
  background: var(--bg-surface-3, #1c1e22);
  color: var(--text-primary, #dce2f0);
  font-size: var(--font-base, 13px);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ui-modal-btn:hover {
  border-color: var(--accent, #7fb7ff);
  color: var(--accent, #7fb7ff);
}

.ui-modal-btn-cancel {}

.ui-modal-btn-confirm {
  background: var(--accent, #7fb7ff);
  border-color: var(--accent, #7fb7ff);
  color: #0d0e12;
  font-weight: var(--weight-semibold, 600);
}

.ui-modal-btn-confirm:hover {
  background: var(--accent-strong, #4a9bff);
  border-color: var(--accent-strong, #4a9bff);
  color: #0d0e12;
}

.ui-modal-btn-confirm.is-danger {
  background: #ff6666;
  border-color: #ff6666;
  color: #fff;
}

.ui-modal-btn-confirm.is-danger:hover {
  background: #e54848;
  border-color: #e54848;
}

.auth-message {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  animation: fade-down 0.22s ease both;
}

.auth-message.is-error {
  background: rgba(255,80,80,0.10);
  color: #ffb3b3;
  border: 1px solid rgba(255,102,102,0.26);
}

.auth-message.is-success {
  background: rgba(66,211,146,0.10);
  color: #9ff0c8;
  border: 1px solid rgba(66,211,146,0.26);
}

/* 提交按钮 */
.auth-submit-btn {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #6fa8f5 0%, #4d8ef0 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
  margin-top: 4px;
  transition: opacity 0.16s, box-shadow 0.16s, transform 0.12s;
  box-shadow: 0 5px 16px rgba(77,142,240,0.24);
}

.auth-submit-btn:hover {
  opacity: 0.92;
  box-shadow: 0 7px 20px rgba(77,142,240,0.34);
  transform: translateY(-1px);
}

.auth-submit-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.auth-submit-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 底部注释 */
.auth-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.auth-icp-note {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.38;
  text-align: center;
  margin: 18px 0 0;
}
.auth-icp-note a {
  color: inherit;
  text-decoration: none;
}
.auth-icp-note a:hover {
  text-decoration: underline;
  opacity: 0.7;
}

.auth-legal-note {
  opacity: 0.82;
}

.auth-legal-link {
  color: var(--accent);
  text-decoration: none;
}

.auth-legal-link:hover {
  text-decoration: underline;
}


/* =========================================================
 * LEGAL PAGES
 * ========================================================= */

.legal-page-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(127, 183, 255, 0.16) 0%, transparent 60%),
    var(--bg-page);
}

.legal-page-shell {
  width: min(960px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 36px 0 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.legal-page-header {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.legal-brand-row {
  justify-content: center;
  margin-bottom: 4px;
}

.legal-brand-mark {
  display: inline-flex;
}

.legal-back-link {
  justify-self: flex-start;
}

.legal-back-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.legal-back-link:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}

.legal-page-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  color: var(--text-primary);
}

.legal-page-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.legal-page-content {
  padding: 28px;
  border-radius: 24px;
  background: rgba(14, 16, 21, 0.90);
  border: 1px solid rgba(86, 94, 113, 0.5);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 24px 56px rgba(0,0,0,0.44);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: visible;
}

.legal-page-content section + section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.legal-page-content h2 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text-primary);
}

.legal-page-content p,
.legal-page-content li {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.9;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.legal-page-content p + p {
  margin-top: 12px;
}

.legal-page-content ul {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}

.legal-page-content a {
  color: var(--accent);
  text-decoration: none;
}

.legal-page-content a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .legal-page-shell {
    width: min(100vw - 24px, 960px);
    padding: 20px 0 36px;
    gap: 16px;
  }

  .legal-page-content {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .legal-page-content section + section {
    margin-top: 22px;
    padding-top: 22px;
  }

  .legal-page-title {
    font-size: 24px;
  }
}


.manager-view,
.editor-view {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.manager-view[hidden],
.editor-view[hidden] {
  display: none !important;
}

/* 整体壳层 */
.manager-app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-page);
}

/* ---- 顶栏 ---------------------------------------------- */
.manager-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 24px;
  height: 54px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: #0d0e12;
  animation: fade-down 0.3s ease both;
}

.manager-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.manager-brand-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.manager-brand {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.manager-workspace-pill {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.manager-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

.manager-sync-banner {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(127, 183, 255, 0.22);
  background: rgba(127, 183, 255, 0.10);
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1.5;
}

.manager-sync-debug {
  margin: -8px 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: var(--font-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}

.manager-sync-banner.is-success {
  border-color: rgba(66, 211, 146, 0.24);
  background: rgba(66, 211, 146, 0.10);
  color: #9ff0c8;
}

.manager-sync-banner.is-warning {
  border-color: rgba(255, 183, 77, 0.24);
  background: rgba(255, 183, 77, 0.10);
  color: #ffd89a;
}

/* 搜索框 */
.manager-search-shell {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.manager-search-decoy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.manager-search {
  position: relative;
  width: 240px;
}

.manager-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--font-lg);
  pointer-events: none;
}

.manager-search input {
  width: 100%;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  padding: 0 14px 0 36px;
  font-size: var(--font-base);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  font-family: inherit;
}

.manager-search input::placeholder { color: var(--text-muted); }
.manager-search input:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(127,183,255,0.10);
  background: rgba(255,255,255,0.06);
}

.manager-search-hint {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-xs);
  color: rgba(255,255,255,0.18);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

/* 视图切换 */
.manager-view-switch {
  display: flex;
  gap: var(--space-0-5);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
}

.manager-view-switch-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 14px;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  font-family: inherit;
}

.manager-view-switch-btn.is-active {
  background: rgba(255,255,255,0.10);
  color: var(--text-primary);
}

/* 通用按钮 */
.btn {
  border: 1px solid transparent;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  min-height: 34px;
  padding: 0 13px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: inherit;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s, opacity 0.12s;
}

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

.btn:active { transform: scale(0.96); opacity: 0.82; }

.btn.primary {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: transparent;
}

.btn.primary:hover { background: var(--accent-strong); transform: translateY(-1px); }

.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.btn.ghost:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
}

.manager-create-btn {
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
}

/* 顶栏头像按钮 */
.manager-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
}

.manager-avatar-btn:hover {
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 0 0 3px rgba(127,183,255,0.18);
  transform: scale(1.06);
}

.manager-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.manager-avatar-fallback {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
  pointer-events: none;
}

/* =========================================================
 * 个人资料弹窗
 * ========================================================= */

.profile-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 2000;
  animation: fade-in 0.22s ease both;
}

.profile-modal-backdrop[hidden],
.profile-modal[hidden] { display: none !important; }

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.profile-modal-inner {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
  animation: scale-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.profile-modal-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.profile-modal-close {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-lg);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  line-height: 1;
  transition: color 0.14s, background 0.14s;
}

.profile-modal-close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.07);
}

.profile-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-modal-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* 头像区域 */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2-5);
  padding-bottom: 4px;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--border-card);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s, transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s;
}

.profile-avatar-large:hover {
  border-color: var(--accent);
  transform: scale(1.04);
  box-shadow: 0 0 0 4px rgba(127,183,255,0.16);
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-avatar-text {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: rgba(255,255,255,0.30);
  user-select: none;
  pointer-events: none;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-sm);
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: opacity 0.16s;
}

.profile-avatar-large:hover .profile-avatar-overlay { opacity: 1; }

.profile-avatar-hint {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  max-width: 260px;
}

/* 表单字段 */
.profile-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.profile-field-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.profile-field-input {
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  padding: 0 12px;
  font-size: var(--font-md);
  outline: none;
  font-family: inherit;
  transition: border-color 0.16s;
}

.profile-field-input:focus { border-color: var(--border-strong); }

.profile-field-readonly {
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  padding: 0 12px;
  font-size: var(--font-md);
  display: flex;
  align-items: center;
  user-select: text;
  font-family: "SF Mono", "Fira Code", monospace;
  letter-spacing: 0.02em;
}

.profile-section-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.profile-section-title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-secondary);
}

.profile-field-btn {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
}

.profile-message {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--font-base);
}

.profile-message.is-error {
  background: var(--danger-bg);
  color: #ffb3b3;
  border: 1px solid rgba(255,102,102,0.26);
}

.profile-message.is-success {
  background: rgba(66,211,146,0.10);
  color: #9ff0c8;
  border: 1px solid rgba(66,211,146,0.26);
}

/* ---- 主内容 -------------------------------------------- */
.manager-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.manager-section-tabs {
  width: 100%;
  max-width: 980px;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.manager-subview-panel {
  width: 100%;
  max-width: 980px;
}

/* 类型 tabs */
.manager-section-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.manager-section-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-md);
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
  font-family: inherit;
}

.manager-section-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.manager-section-tab:disabled {
  opacity: 0.45;
  cursor: default;
}

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

/* ---- 项目卡片网格 --------------------------------------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

/* 卡片入场错位动画 */
.project-card:nth-child(1)  { animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.04s both; }
.project-card:nth-child(2)  { animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.08s both; }
.project-card:nth-child(3)  { animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.12s both; }
.project-card:nth-child(4)  { animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.16s both; }
.project-card:nth-child(5)  { animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.20s both; }
.project-card:nth-child(6)  { animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.24s both; }
.project-card:nth-child(7)  { animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.project-card:nth-child(n+8){ animation: fade-up 0.35s cubic-bezier(0.22,1,0.36,1) 0.30s both; }

.project-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  background: var(--bg-surface-2);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: default;
  text-align: left;
  min-height: 0;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.project-card-cover {
  display: block;
  cursor: pointer;
  text-decoration: none;
}

.project-card:hover {
  border-color: rgba(127, 183, 255, 0.30);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 新建项目卡片 */
.project-card-create {
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  background: rgba(255,255,255,0.02);
  border-style: dashed;
  min-height: 140px;
}

.project-create-plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-2xl);
  line-height: 1;
  font-weight: 400;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s cubic-bezier(0.22,1,0.36,1);
}

.project-card-create:hover .project-create-plus {
  background: var(--accent-bg);
  border-color: var(--border-strong);
  color: var(--accent);
  transform: scale(1.12) rotate(8deg);
}

.project-create-label {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-secondary);
}

.project-card-create:hover .project-create-label { color: var(--text-primary); }

/* 卡片封面 hover 缩放 */
.project-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #2a3050 0%, #1a2040 50%, #222840 100%);
  overflow: hidden;
  flex-shrink: 0;
  transition: none;
}

.project-card:hover .project-card-cover-image {
  transform: scale(1.04);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card-cover-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1e2438 0%, #181d2d 50%, #1c2235 100%);
  pointer-events: none;
}

.project-card-cover-placeholder[hidden] { display: none !important; }

/* 卡片信息体 */
.project-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
}

.project-card-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  cursor: text;
}

.project-card-rename-input {
  width: 100%;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 6px;
  outline: none;
  font-family: inherit;
}

.project-card-meta {
  font-size: var(--font-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.project-card-code {
  display: none;
}

/* ---- Dashboard ----------------------------------------- */
.dashboard-root {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* KPI 网格 */
.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.db-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s;
}

.db-kpi-card.tone-success { border-color: var(--tone-success-border); }
.db-kpi-card.tone-info    { border-color: var(--tone-info-border); }
.db-kpi-card.tone-warn    { border-color: var(--tone-warn-border); }
.db-kpi-card.tone-danger  { border-color: var(--tone-danger-border); }

.db-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.db-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  word-break: break-word;
}

.db-kpi-hint { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }

/* 标签页外壳 */
.db-tabs-shell {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.db-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.db-tabs-bar::-webkit-scrollbar { display: none; }

.db-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 13px 14px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
}

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

.db-tab-btn.is-active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.db-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  background: rgba(127, 183, 255, 0.15);
  color: var(--accent);
}

.db-tabs-body { padding: 24px; }

.db-tab-pane[hidden] { display: none !important; }

/* 标签页内容区块 */
.db-tab-section {
  margin-bottom: 24px;
}

.db-tab-section:last-child { margin-bottom: 0; }

.db-section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- 系统资源面板 ---------------------------------------- */
.db-sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.db-sys-card {
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.db-sys-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.db-meter-bar {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  vertical-align: middle;
}

.db-meter-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.db-meter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-left: 6px;
}

.db-sys-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.db-sys-key {
  color: var(--text-muted);
  white-space: nowrap;
}

.db-sys-val {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

.db-sys-val.tone-danger { color: #e74c3c; }

.db-tab-desc {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}

/* dl 键值对 */
.db-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 0;
}

.db-dl div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--border);
}

.db-dl dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.db-dl dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  word-break: break-word;
}

.db-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.db-provider-card {
  padding: 14px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--border);
}

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

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

.db-provider-endpoint-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.db-provider-endpoint-input {
  flex: 1 1 auto;
  min-width: 0;
}

.db-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.db-filter-field {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.db-filter-select {
  height: 30px;
  padding: 0 28px 0 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23889' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.18s;
}

.db-filter-select:focus { border-color: var(--accent); }

.db-filter-select option {
  background: #141820;
  color: var(--text-primary);
}

.db-filter-input {
  height: 30px;
  min-width: 220px;
  padding: 0 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  outline: none;
  transition: border-color 0.18s;
}

.db-filter-input::placeholder {
  color: var(--text-muted);
  font-family: inherit;
}

.db-filter-input:focus { border-color: var(--accent); }

.db-filter-reset {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  margin-left: auto;
}

.db-filter-reset:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.20);
}

.db-filter-count {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* 翻页控件 */
.db-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
}

.db-page-btn {
  padding: 5px 16px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.db-page-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
  color: var(--text-primary);
}

.db-page-btn:disabled {
  opacity: 0.30;
  cursor: default;
}

.db-pager-info {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 表格 */
.db-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  font-size: 13px;
}

.db-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.db-table tbody td {
  padding: 12px 14px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-table tbody td:hover { white-space: normal; overflow: visible; }

.db-table tbody tr:hover td { background: rgba(255,255,255,0.022); }
.db-table tbody tr:last-child td { border-bottom: none; }
.db-table-empty {
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-12) var(--space-6) !important;
  white-space: normal !important;
}

.db-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  color: var(--text-muted);
}

.db-empty-state-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  opacity: 0.85;
}

.db-empty-state-title {
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin: 0;
}

.db-empty-state-hint {
  font-size: var(--font-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 320px;
  text-align: center;
}

/* Jobs table — 单行紧凑模式 */
.db-table-jobs {
  min-width: 1100px;
}

.db-table-jobs tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: visible;
  white-space: nowrap;
}

.db-col-job-main    { width: auto; }
.db-col-job-model   { width: 14%; white-space: nowrap; }
.db-col-job-time    { width: 26%; white-space: nowrap; }
.db-col-job-actions { width: 150px; }
.db-col-job-error   { width: 110px; }

/* 单行内联布局 */
.db-job-cell-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.db-job-uuid-code { flex-shrink: 0; }

.db-job-model-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.db-job-model-inline strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.db-job-time-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.db-job-meta-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.db-job-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.db-job-actions-cell .db-link-btn {
  margin-right: 0;
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
  flex-shrink: 0;
}

.db-job-error-cell {
  color: var(--danger);
  font-size: 12px;
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
  margin-top: 8px;
}

.db-job-error-details { display: block; }

.db-job-error-details summary {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 102, 102, 0.10);
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.db-job-error-details summary::-webkit-details-marker { display: none; }

.db-job-error-details summary:focus-visible {
  outline: 2px solid rgba(255, 102, 102, 0.42);
  outline-offset: 2px;
}

.db-job-error-details[open] summary {
  background: rgba(255, 102, 102, 0.16);
}

.db-job-error-empty {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: 11px;
}

/* 内联元素 */
.db-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
}

.badge-success { background: var(--tone-success-bg); border-color: var(--tone-success-border); color: var(--tone-success-text); }
.badge-info    { background: var(--tone-info-bg);    border-color: var(--tone-info-border);    color: var(--tone-info-text); }
.badge-warn    { background: var(--tone-warn-bg);    border-color: var(--tone-warn-border);    color: var(--tone-warn-text); }
.badge-muted   { background: var(--tone-neutral-bg); border-color: var(--tone-neutral-border); color: var(--tone-neutral-text); }
.badge-danger  { background: var(--tone-danger-bg);  border-color: var(--tone-danger-border);  color: var(--tone-danger-text); }

.db-event-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

code.db-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.db-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(127, 183, 255, 0.20);
  background: rgba(127, 183, 255, 0.08);
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.14s, color 0.14s;
}

.db-link-btn.ghost {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--text-secondary);
}

.db-link-btn:hover {
  background: rgba(127, 183, 255, 0.14);
  color: #fff;
}

.db-link-btn.ghost:hover {
  background: rgba(255,255,255,0.09);
  color: var(--text-primary);
}

.db-asset-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.db-asset-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.db-asset-overlay-panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 1100px);
  max-height: 92vh;
  margin: 3vh auto;
  background: #0f141b;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(0,0,0,0.50);
}

.db-asset-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: var(--text-primary);
}

.db-asset-close-btn {
  border: none;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
}

.db-asset-close-btn:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
}


.db-asset-overlay-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  max-height: calc(92vh - 56px);
  overflow: auto;
  scrollbar-width: thin;
}

.db-asset-preview-image {
  max-width: 100%;
  max-height: calc(92vh - 80px);
  object-fit: contain;
  border-radius: 10px;
  background: #0a0d12;
}

/* 旧类名兼容（不再使用，但 dashboard.html 里的 .dashboard-root 还用） */
.dashboard-hero,
.dashboard-panel,
.dashboard-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.dashboard-kpi-grid,
.dashboard-grid,
.dashboard-grid-primary,
.dashboard-grid-secondary,
.dashboard-panel,
.dashboard-table-wrap,
.dashboard-table { display: none; }


/* =========================================================
 * EDITOR VIEW
 * ========================================================= */

:root {
  --editor-toolbar-w: 52px;
  --editor-panel-w: 622px;
  --editor-side-gap: 28px;
}

.editor-app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-page);
}

/* ---- 编辑器顶栏 ----------------------------------------- */
.editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px 0 34px;
  height: 52px;
  flex-shrink: 0;
  background: #090b10;
  border-bottom: none;
}

.editor-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.editor-back-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: #161b26;
  color: rgba(243, 247, 255, 0.96);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 13px;
  height: 34px;
  border-radius: 17px;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.editor-back-btn:hover {
  color: #fff;
  background: #1d2431;
  border-color: rgba(255,255,255,0.12);
}

.editor-brand {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.editor-project-pill {
  font-size: 12px;
  color: rgba(227, 233, 246, 0.84);
  background: #191f2b;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: background 0.18s, border-color 0.18s;
}

.editor-project-pill:hover {
  background: #1e2636;
  border-color: rgba(255,255,255,0.10);
}

.editor-save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(214, 247, 226, 0.95);
}

.editor-save-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3ecf8e;
  box-shadow: 0 0 0 4px rgba(62, 207, 142, 0.16);
  flex: 0 0 auto;
}

.editor-save-status.is-dirty {
  color: rgba(255, 208, 208, 0.96);
}

.editor-save-status.is-dirty .editor-save-status-dot {
  background: #ff5c5c;
  box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.16);
}

.editor-project-rename-input {
  font-size: 12px;
  color: rgba(235, 240, 255, 0.96);
  background: #1a2236;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  max-width: 220px;
  outline: none;
  font-family: inherit;
  box-shadow: 0 0 0 3px rgba(127, 183, 255, 0.14);
}

.editor-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-topbar-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: background 0.18s, color 0.18s;
  font-family: inherit;
}

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

.editor-settings-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: #161b26;
  color: rgba(240, 244, 255, 0.9);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.18s, border-color 0.18s;
}

.editor-settings-btn:hover {
  background: #1d2431;
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}

/* ---- 编辑器主工作区 ------------------------------------- */
.editor-workspace {
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
}

.editor-canvas-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

.editor-canvas-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ---- 画布 ----------------------------------------------- */
.canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  /*
   * 点阵背景跟随 canvas-world 同步缩放/平移：
   *   --canvas-zoom / --canvas-pan-x / --canvas-pan-y 由
   *   canvas-system.js applyWorldTransform() 写入 inline style。
   * 每个 tile 的尺寸 (48px / 20px) 和 dot 中心位置 (40px / 10px)
   * 都乘以 zoom，pan 直接作为 background-position 偏移。
   * 这样点阵看起来就像粘在 canvas-world 上随它一起放大缩小。
   */
  background:
    radial-gradient(
      circle at calc(120px * var(--canvas-zoom, 1)) calc(120px * var(--canvas-zoom, 1)),
      var(--grid-major) 1px, transparent 1px
    )
      var(--canvas-pan-x, 0px) var(--canvas-pan-y, 0px) /
      calc(200px * var(--canvas-zoom, 1)) calc(200px * var(--canvas-zoom, 1)),
    radial-gradient(
      circle at calc(40px * var(--canvas-zoom, 1)) calc(40px * var(--canvas-zoom, 1)),
      var(--grid-minor) 1px, transparent 1px
    )
      var(--canvas-pan-x, 0px) var(--canvas-pan-y, 0px) /
      calc(80px * var(--canvas-zoom, 1)) calc(80px * var(--canvas-zoom, 1)),
    var(--bg-page);
}

.canvas-world {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  transform-origin: 0 0;
  will-change: transform;
  z-index: 0;
}

.canvas.space-pan-armed { cursor: grab; }
.canvas.space-pan-armed.is-panning-view,
.canvas.is-panning-view:not(.space-pan-armed) { cursor: grabbing; }

/* ---- 左侧悬浮工具条 ------------------------------------- */
.editor-floating-toolbar {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) translateY(0px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 54px;
  padding: 10px 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #242932 0%, #1d2129 100%);
  border: 1px solid rgba(121, 129, 147, 0.46);
  box-shadow: 0 18px 32px rgba(6, 9, 16, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  pointer-events: auto;
  animation: slide-in-left 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.editor-tool-btn {
  border: none;
  background: transparent;
  color: rgba(235, 239, 247, 0.84);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: transform 0.16s cubic-bezier(0.22,1,0.36,1), background 0.16s, color 0.16s, opacity 0.16s;
  opacity: 0.92;
  padding: 0;
}

.editor-tool-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateY(-1px) scale(1.08);
  opacity: 1;
}

.editor-tool-btn:active {
  transform: scale(0.9);
}

.editor-tool-btn + .editor-tool-btn {
  position: relative;
}

.editor-tool-btn + .editor-tool-btn::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 11px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(130, 140, 167, 0.16);
}

.editor-tool-btn-primary {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  background: #f3f4f6;
  color: #171b22;
  box-shadow: 0 8px 18px rgba(8, 11, 18, 0.26);
  opacity: 1;
}

.editor-tool-btn-primary:hover {
  background: #ffffff;
  color: #0f131a;
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 12px 24px rgba(8, 11, 18, 0.36);
}

.editor-toolbar-divider {
  width: 20px;
  height: 1px;
  margin: 4px 0 1px;
  background: rgba(130, 140, 167, 0.26);
}

.editor-tool-btn-profile {
  width: 32px;
  height: 32px;
  margin-top: -1px;
  background: rgba(67, 76, 94, 0.84);
  border: 1px solid rgba(138, 148, 174, 0.42);
  position: relative;
  overflow: hidden;
}

.editor-tool-btn-profile:hover {
  background: rgba(83, 93, 114, 0.92);
}

.editor-tool-btn-profile .manager-avatar-fallback {
  font-size: 12px;
  font-weight: 600;
  color: rgba(235, 239, 247, 0.88);
  user-select: none;
  pointer-events: none;
}

.editor-tool-btn-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.editor-tool-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.editor-tool-btn-primary .editor-tool-icon {
  width: 18px;
  height: 18px;
}

/* ---- Zoom Dock（navigator + slider合并区） --------- */
.canvas-zoom-dock {
  position: absolute;
  left: 24px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  pointer-events: auto;
  user-select: none;
  width: 204px;
}

/* ---- Navigator（内嵌在 zoom dock 中） -------------- */
.canvas-navigator {
  position: relative;
  width: 100%;
  height: 136px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(95, 103, 120, 0.55);
  border: none;
  box-shadow: none;
  cursor: crosshair;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navigator-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.navigator-viewport {
  position: absolute;
  border: 2px solid rgba(180, 195, 230, 0.70);
  background: rgba(180, 195, 230, 0.18);
  border-radius: 4px;
  pointer-events: none;
  box-sizing: border-box;
}

/* ---- Slider row ---------------------------------------- */
.zoom-dock-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}

.canvas-zoom-slider {
  flex: 1 1 auto;
  height: 3px;
  accent-color: rgba(200, 210, 230, 0.9);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.20);
  border-radius: 2px;
  outline: none;
}

.canvas-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c8d4ea;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.zoom-fit-icon-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #1a2030;
  color: rgba(220, 228, 246, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, transform 0.16s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

.zoom-fit-icon-btn:hover {
  background: #232d44;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.36);
}

/* 旧样式兼容清除 */
.zoom-dock-preview,
.zoom-dock-controls,
.zoom-dock-row,
.zoom-dock-label,
.zoom-dock-value,
.zoom-dock-fit-btn { display: none !important; }

/* Canvas ID 标注 */
.canvas-id-label {
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-size: 11px;
  color: rgba(174, 182, 200, 0.38);
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

/* ---- 连线 ----------------------------------------------- */
.edge-layer {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.edge-group { pointer-events: auto; }

.edge-line {
  stroke: var(--edge-color);
  stroke-width: 2;
  fill: none;
  filter: var(--edge-filter);
  pointer-events: none;
}

.edge-temp {
  stroke: var(--edge-color);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
  stroke-dasharray: 6 4;
  opacity: 0.75;
}

.edge-hit {
  stroke: rgba(0,0,0,0.01);
  stroke-width: 14;
  fill: none;
  pointer-events: stroke;
}

.edge-group.hover .edge-line {
  stroke: #a8d0ff;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(127, 183, 255, 0.50));
}

.edge-group.selected .edge-line {
  stroke: #c8e4ff;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(127, 183, 255, 0.60));
}

/* edge cut 按钮 */
.edge-cut-btn {
  position: fixed;
  z-index: 80;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(28, 32, 44, 0.90);
  color: rgba(230, 235, 245, 0.92);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  animation: scale-in 0.16s cubic-bezier(0.22,1,0.36,1) both;
  transition: transform 0.14s, background 0.14s, box-shadow 0.14s;
}

.edge-cut-btn:hover {
  background: rgba(200, 60, 60, 0.88);
  border-color: rgba(255,100,100,0.4);
  box-shadow: 0 4px 16px rgba(200,60,60,0.28);
  transform: translate(-50%, -50%) scale(1.14);
}

.edge-cut-btn[hidden] { display: none !important; }

/* 框选矩形 */
.marquee-rect {
  position: absolute;
  border: 1.5px solid rgba(127, 183, 255, 0.65);
  background: rgba(127, 183, 255, 0.06);
  pointer-events: none;
  z-index: 10;
  border-radius: var(--radius-xs);
}

/* 多选外框 */
.multi-select-overlay {
  box-sizing: border-box;
  border: 2px solid rgba(127, 183, 255, 0.50);
  background: rgba(127, 183, 255, 0.05);
  border-radius: var(--radius-lg);
  z-index: 2;
}

.multi-select-download-btn {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(127, 183, 255, 0.28);
  background: var(--bg-surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  font-family: inherit;
}

/* =========================================================
 * 节点层与节点
 * ========================================================= */

.node-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.node {
  pointer-events: auto;
  position: absolute;
  width: 392px;
  min-height: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  user-select: none;
  animation: fade-up 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

.node.dragging { opacity: 0.92; }

.node-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.node-editor-stack { position: relative; z-index: 0; }

/* ---- 节点上方浮动工具条（toolbar-bar 新版） ----------- */
.node-editor-stack .upload-float-wrap { display: none; }
.upload-float-wrap.toolbar-open { display: block; }

.toolbar-popup-panel {
  position: fixed;
  z-index: 52;
  pointer-events: auto;
}

.node-toolbar-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.node-toolbar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(164, 176, 210, 0.12);
  background: rgba(36, 44, 60, 0.94);
  color: rgba(236, 241, 252, 0.9);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, opacity 0.18s;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(7, 10, 18, 0.3);
}

.node-toolbar-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(123, 167, 255, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, border-color 0.18s;
}

.node-toolbar-bar:hover .node-toolbar-btn {
  opacity: 0.92;
}

.node-toolbar-bar:hover .node-toolbar-btn:hover {
  opacity: 1;
}

.node-toolbar-btn:hover {
  background: rgba(104, 144, 229, 0.96);
  border-color: rgba(173, 202, 255, 0.52);
  color: #ffffff;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 12px 28px rgba(29, 69, 153, 0.34);
}

.node-toolbar-btn:hover::after,
.node-toolbar-btn:focus-visible::after {
  opacity: 1;
  border-color: rgba(123, 167, 255, 0.34);
}

.node-toolbar-btn:focus-visible {
  outline: none;
  background: rgba(104, 144, 229, 0.96);
  border-color: rgba(173, 202, 255, 0.52);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(123, 167, 255, 0.18), 0 12px 28px rgba(29, 69, 153, 0.34);
}

.node-toolbar-btn + .node-toolbar-btn {
  position: static;
}

.node-toolbar-btn + .node-toolbar-btn::before,
.download-capsule-btn::before {
  content: none;
}

.upload-capsule-btn {
  width: 40px;
  height: 40px;
  margin-right: 0;
  background: rgba(37, 45, 61, 0.92);
  border-color: rgba(164, 176, 210, 0.14);
  color: rgba(236, 241, 252, 0.9);
  box-shadow: 0 8px 22px rgba(7, 10, 18, 0.34);
}

.upload-capsule-btn:hover {
  background: rgba(92, 131, 215, 0.92);
  color: #ffffff;
  border-color: rgba(156, 189, 255, 0.42);
}

.download-capsule-btn {
  margin-top: 0;
  margin-left: 0;
  position: relative;
  border-color: rgba(164, 176, 210, 0.14);
  color: rgba(236, 241, 252, 0.9);
}

.node-toolbar-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 生图节点（generated）隐藏上传按钮 */
.node.image-node.kind-generated .node-toolbar-bar .upload-capsule-btn { display: none !important; }

/* 宫格裁切按钮：仅在有图片时可见 */
.node-toolbar-btn-grid { display: none !important; }
.toolbar-popup-panel.has-preview .node-toolbar-btn-grid { display: inline-flex !important; }

/* 下载按钮默认隐藏，有图片时由 JS class 控制 */
/* 下载按钮：默认隐藏，由 JS 在 toolbar-popup-panel 上加 has-preview 类控制 */
.download-capsule-btn,
.fullscreen-preview-btn { display: none !important; }
.toolbar-popup-panel.has-preview .download-capsule-btn,
.toolbar-popup-panel.has-preview .fullscreen-preview-btn { display: inline-flex !important; }
/* 视频节点：工具栏始终显示上传+下载+全屏（不依赖 has-preview） */
.node.video-node .upload-capsule-btn,
.node.video-node .download-capsule-btn,
.node.video-node .fullscreen-preview-btn { display: inline-flex !important; }
/* 旧的节点级选择器保留兼容 */
.node.image-node.has-preview-image .download-capsule-btn { display: none !important; }

/* 旧样式兼容清除 */
.upload-float-inner:not(.node-toolbar-bar),
.editor-node-toolbar,
.editor-node-toolbar-group,
.upload-capsule-label,
.upload-capsule-icon:not(.node-toolbar-icon) { display: none !important; }

/* ---- 图片预览区 ----------------------------------------- */
/* 三种节点的预览区块共享基础样式 */
.image-block,
.text-block,
.video-block,
.audio-block {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.06);
  background: #0e1118;
  overflow: visible;
}

.preview-port-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: visible;
  border-radius: inherit;
}

.preview-wrap {
  height: 220px;
  min-height: 220px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
  border-radius: inherit;
  position: relative;
  cursor: grab;
  touch-action: none;
}

.node.image-node:not(.has-preview-image) .preview-wrap,
.node.text-node .preview-wrap,
.node.video-node .preview-wrap {
  background: linear-gradient(180deg, rgba(138, 146, 166, 0.12) 0%, rgba(96, 104, 123, 0.18) 100%);
}
/* 有视频时不显示空态背景 */
.node.video-node .preview-wrap:has(video[src]:not([src=""])) {
  background: transparent;
}

.preview-wrap:active { cursor: grabbing; }

.preview-wrap.drag-over {
  border-color: var(--border-strong);
  background: rgba(127, 183, 255, 0.05);
}

/* 加载 overlay — 与画布加载浮层 .app-loading-overlay 同款：
 * 磨砂底 + 一道极淡的竖向高光从左往右扫。无文字、无进度数字、无 spinner。
 * 节点生图、上传、resume in-progress job、未来生视频/生文字 全部走这个动画。
 */
.preview-loading-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: auto;
  background: rgba(15, 18, 24, 0.32);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.preview-loading-layer[hidden] { display: none !important; }

.preview-loading-sweep {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -64px;
  width: 64px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)     0%,
    rgba(255, 255, 255, 0.003) 18%,
    rgba(255, 255, 255, 0.018) 36%,
    rgba(255, 255, 255, 0.07)  50%,
    rgba(255, 255, 255, 0.018) 64%,
    rgba(255, 255, 255, 0.003) 82%,
    rgba(255, 255, 255, 0)     100%
  );
  filter: blur(5px);
  animation: preview-loading-sweep 3.4s linear infinite;
  will-change: left;
}
@keyframes preview-loading-sweep {
  0%   { left: -64px; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-loading-sweep { animation: none; opacity: 0; }
}

/* 预览图 */
.preview {
  display: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
  min-height: 0;
  border-radius: inherit;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---- 连接端口 ------------------------------------------- */
.port {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.75);
  background: var(--accent);
  cursor: crosshair;
  box-shadow: 0 0 0 3px rgba(127, 183, 255, 0.15);
  transition: transform 0.16s cubic-bezier(0.22,1,0.36,1), box-shadow 0.16s, background 0.16s;
  opacity: 0;
  /* 必须高于 .preview-loading-layer (z-index: 6)，否则加载浮层会盖住
   * 端口 —— port 半径 7px，刚好和 .preview-wrap 的边缘重叠一半。 */
  z-index: 7;
}

.node:hover .port,
.node.node-selected .port { opacity: 1; }

/* 加载动画期间，端口必须始终可见 */
.preview-port-wrap:has(.preview-loading-layer:not([hidden])) .port { opacity: 1; }

.port.out { right: -7px; top: 50%; transform: translateY(-50%); }
.port.in  { left: -7px;  top: 50%; transform: translateY(-50%); }

.port.out:hover { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 0 5px rgba(127,183,255,0.25); }
.port.in:hover  { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 0 5px rgba(127,183,255,0.25); }

.port.in.port-snap-target {
  transform: translateY(-50%) scale(1.6);
  background: #a8d0ff;
  box-shadow: 0 0 0 5px rgba(127, 183, 255, 0.28);
  opacity: 1;
}

/* 节点选中：仅预览框边缘高亮，不要整个节点方框 */

.hidden-file-input { display: none; }

/* =========================================================
 * PROMPT 面板
 * ========================================================= */

.node-editor-stack .prompt-float-wrap { display: none; }

/* kind-pure 节点不显示 prompt */
.node.image-node.kind-pure .prompt-popup-panel,
.node.image-node.kind-pure .prompt-float-wrap { display: none !important; }

.node.image-node.kind-pure .preview-wrap,
.node.image-node.kind-pure .preview-wrap:active { cursor: default; }

.node.image-node.kind-pure .upload-float-wrap.open { display: none; }

/* Prompt popup 层 */
.prompt-popup-panel {
  position: fixed;
  width: 622px;
  height: 209px;
  pointer-events: auto;
  z-index: 50;
  overflow: visible;
}

.prompt-popup-panel .prompt-float-panel {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.prompt-popup-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.prompt-compose-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 24px 20px 18px;
  border: 1px solid rgba(76, 82, 99, 0.72);
  border-radius: 22px;
  background: rgba(18, 18, 19, 0.98);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}

.prompt-popup-panel .prompt-float-panel .prompt-input {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #f4f7ff;
  font-size: 14px;
  line-height: 1.65;
  resize: none;
  outline: none;
  font-family: inherit;
}

.prompt-popup-panel .prompt-float-panel .prompt-input::placeholder {
  color: rgba(188, 194, 210, 0.7);
}

.prompt-compose-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.prompt-summary-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.prompt-menu-anchor {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.aspect-quality-menu-anchor {
  margin-left: 0;
}

.prompt-summary-trigger {
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.14s;
}

.prompt-summary-trigger:hover,
.prompt-summary-trigger[aria-expanded="true"] {
  border-color: rgba(110, 146, 255, 0.34);
  background: #222b40;
  transform: translateY(-1px);
}

.prompt-summary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: #1b2232;
  color: rgba(244, 247, 255, 0.94);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.model-summary-pill {
  text-transform: none;
}

.prompt-summary-pill-combined {
  gap: 6px;
}

.prompt-summary-icon {
  font-size: 10px;
  color: rgba(255,255,255,0.88);
}

.prompt-summary-divider {
  color: rgba(255,255,255,0.4);
}

.prompt-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.reference-thumbs-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reference-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.reference-thumb-item,
.reference-thumb-empty,
.reference-thumb-add {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 10px;
}

.reference-thumb-item {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #2a3143;
}

.reference-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reference-thumb-empty,
.reference-thumb-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: #232a3a;
  color: rgba(221, 228, 245, 0.44);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.reference-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(9, 10, 13, 0.88);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
  padding: 0;
}

.reference-thumb-item:hover .reference-thumb-remove { opacity: 1; }

.prompt-send-btn {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  background: linear-gradient(180deg, #4e83ff 0%, #3c6fff 100%);
  color: #fff;
  transition: background 0.18s, transform 0.14s, box-shadow 0.18s;
}

.prompt-send-btn:hover {
  background: linear-gradient(180deg, #6796ff 0%, #4a7aff 100%);
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(62, 111, 255, 0.40);
}

.prompt-send-btn:active {
  transform: scale(0.94);
}

/* 停止生图状态 */
.prompt-send-btn.is-cancel {
  background: linear-gradient(180deg, #ff5c5c 0%, #e04040 100%);
  box-shadow: 0 4px 14px rgba(255, 60, 60, 0.30);
}
.prompt-send-btn.is-cancel:hover {
  background: linear-gradient(180deg, #ff7070 0%, #e84e4e 100%);
  box-shadow: 0 6px 20px rgba(255, 60, 60, 0.40);
}

.imageprompt-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 6;
}

.imageprompt-aspect-quality-menu {
  left: auto;
  right: 0;
}

.imageprompt-menu[hidden] { display: none !important; }

.imageprompt-menu:not([hidden]) {
  animation: scale-in-sm 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top left;
}

.imageprompt-aspect-quality-menu:not([hidden]) {
  transform-origin: top right;
}

.prompt-settings-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 332px;
  min-width: 332px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(76, 82, 99, 0.72);
  border-radius: 22px;
  background: rgba(18, 18, 19, 0.99);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.4);
}

.prompt-settings-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prompt-settings-group[hidden] {
  display: none !important;
}

.prompt-settings-title {
  font-size: 13px;
  color: rgba(198, 205, 223, 0.76);
  line-height: 1;
  padding-left: 2px;
}

.prompt-option-row,
.prompt-option-grid,
.prompt-option-row-wide {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prompt-option-row-compact {
  gap: 10px;
}

.prompt-option-grid {
  gap: 10px;
}

.prompt-option-grid-aspect {
  width: 100%;
  max-width: none;
}

.prompt-option-btn {
  border: 1px solid transparent;
  background: #1b2232;
  color: rgba(236, 241, 252, 0.92);
  min-height: 31px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.14s;
}

.prompt-option-btn:hover {
  background: #212a3d;
  transform: translateY(-1px);
}

.prompt-option-btn:active {
  transform: scale(0.95);
}

.prompt-option-btn.is-active {
  border-color: rgba(106, 149, 255, 0.58);
  background: rgba(62, 105, 199, 0.22);
  color: #f7faff;
  box-shadow: inset 0 0 0 1px rgba(86, 127, 225, 0.22);
}

.prompt-option-grid .prompt-option-btn,
.prompt-option-row-compact .prompt-option-btn {
  justify-content: center;
  padding: 0 14px;
}

.prompt-option-row-compact .prompt-option-btn {
  min-width: 42px;
}

.prompt-option-grid-aspect .prompt-option-btn {
  min-width: 46px;
}

.prompt-option-row-wide .prompt-option-btn {
  min-width: 132px;
}

.prompt-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.prompt-collapse-btn { display: none; }

.image-node { overflow: visible; }

@media (max-width: 900px) {
  .imageprompt-menu,
  .imageprompt-aspect-quality-menu {
    left: 0;
    right: auto;
  }

  .prompt-settings-card {
    min-width: min(308px, calc(100vw - 32px));
  }
}

/* =========================================================
 * 右键菜单 / Canvas 菜单
 * ========================================================= */

.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 150px;
  padding: 3px;
  border-radius: 16px;
  border: 1px solid rgba(86, 94, 113, 0.78);
  background: rgba(20, 23, 29, 0.98);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  animation: scale-in-sm 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top left;
}

.add-node-context-menu {
  min-width: 118px;
}

.canvas-context-menu {
  min-width: 118px;
}

.context-menu[hidden] { display: none !important; }

.context-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: rgba(245, 248, 255, 0.96);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, padding-left 0.16s cubic-bezier(0.22,1,0.36,1);
  border-radius: 12px;
}

.add-node-context-menu-item {
  justify-content: flex-start;
  gap: 0;
  padding: 11px 16px;
  border-radius: 13px;
  background: transparent;
  color: rgba(245, 248, 255, 0.96);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.add-node-context-menu-item:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.context-menu-item:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.06);
  padding-left: 18px;
  transition: background 0.12s, padding-left 0.16s cubic-bezier(0.22,1,0.36,1);
}

.canvas-context-menu .context-menu-item.strong {
  color: var(--accent);
  font-weight: 600;
}

.canvas-context-menu .context-menu-item.strong:hover {
  background: var(--accent-bg);
}

.context-menu-item.disabled,
.context-menu-item:disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.6;
}

.context-menu-item-danger {
  color: #ff6b6b;
}

.context-menu-item-danger:hover:not(.disabled) {
  background: rgba(255, 80, 80, 0.08);
  color: #ff4d4d;
}

.context-menu-shortcut {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.context-menu-separator {
  height: 1px;
  margin: 4px 10px;
  background: var(--border);
}

/* =========================================================
 * Prompt popup 层（fixed 定位层）
 * ========================================================= */

.prompt-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

/* =========================================================
 * 宫格裁切覆盖层
 * ========================================================= */

.grid-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 860;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  animation: fade-in 0.18s ease both;
}

.grid-crop-overlay[hidden] { display: none !important; }

/* 遮罩只在有内容的覆盖层里显示 */
.grid-crop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

.grid-crop-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 36px;
  pointer-events: none;
}

.grid-crop-stage {
  position: relative;
  width: min(75vw, 1360px);
  height: min(75vh, 920px);
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 200px);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(12, 15, 22, 0.96);
  border: 1px solid rgba(127, 183, 255, 0.18);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.46);
  animation: scale-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.grid-crop-preview-image { display: none; }

/* 宫格/裁切 canvas 是 position:fixed，由 JS 直接定位到节点图片区域上方 */
#grid-crop-grid-layer {
  display: none;
  position: fixed;
  pointer-events: none;
  z-index: 865;
  border: none;
}

#region-crop-select-layer {
  display: none;
  position: fixed;
  cursor: crosshair;
  z-index: 865;
}

.grid-crop-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15, 18, 26, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
  animation: fade-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: auto;
}

.grid-crop-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, transform 0.16s, border-color 0.18s;
}

.grid-crop-btn:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.grid-crop-btn:active {
  transform: scale(0.96);
}

.grid-crop-btn-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}

.grid-crop-btn-confirm {
  min-width: 126px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4e83ff 0%, #3c6fff 100%);
  border-color: rgba(127, 183, 255, 0.34);
  color: #fff;
}

.grid-crop-btn-confirm:hover {
  background: linear-gradient(180deg, #6796ff 0%, #4a7aff 100%);
}

.grid-crop-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.grid-crop-input {
  width: 62px;
  height: 42px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
  appearance: textfield;
  -moz-appearance: textfield;
}

.grid-crop-input::-webkit-outer-spin-button,
.grid-crop-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.grid-crop-input-sep {
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.region-crop-select-layer {
  cursor: crosshair;
  pointer-events: auto;
}

.region-crop-overlay .grid-crop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.region-crop-toolbar {
  min-width: auto;
  flex-wrap: wrap;
}

.region-crop-aspect-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 6px 12px;
  height: 42px;
}

.region-crop-aspect-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
  white-space: nowrap;
}

.region-crop-aspect-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.region-crop-aspect-btn.is-active {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: rgba(127,183,255,0.34);
}

/* 裁切按钮仅在有图片时显示 */
.node-toolbar-btn-crop { display: none !important; }
.toolbar-popup-panel.has-preview .node-toolbar-btn-crop { display: inline-flex !important; }

@media (max-width: 820px) {
  .grid-crop-shell {
    padding: 20px 16px 112px;
  }

  .grid-crop-stage {
    width: calc(100vw - 32px);
    height: min(68vh, 560px);
    max-height: calc(100vh - 180px);
    border-radius: 20px;
  }

  .grid-crop-toolbar {
    bottom: 22px;
    gap: 10px;
    width: calc(100vw - 32px);
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 24px;
  }
}

/* =========================================================
 * 版本更新横幅
 * ========================================================= */

/* 版本更新横幅入场动画（已有，保持一致） */
#update-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: 13px;
  z-index: 99999;
  white-space: nowrap;
}

#update-banner.is-editor {
  bottom: 88px;
}

@keyframes update-banner-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

.update-banner-text strong { color: var(--accent); }

.update-banner-btn {
  padding: 6px 14px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
}

.update-banner-btn:hover { opacity: 0.85; }

/* =========================================================
 * 独立 Dashboard 页面 Shell
 * ========================================================= */

/* =========================================================
 * Dashboard 应用外壳（侧边栏布局）
 * ========================================================= */

.dashboard-page-body {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* 全屏应用容器 */
.db-app-shell {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 加载占满全屏 — 带柔和呼吸动画 */
.db-loading-screen {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--font-md);
  color: var(--text-secondary);
}

.db-loading-screen::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--border-card);
  border-top-color: var(--accent);
  animation: db-spin 0.9s linear infinite;
}

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

.db-loading-screen[hidden] {
  display: none !important;
}

/* 主应用根（侧边栏 + 内容区） */
.db-app-root {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.db-app-root[hidden] { display: none !important; }

/* ---- 左侧边栏 ------------------------------------------- */

.db-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  height: 100%;
  overflow: hidden;
}

.db-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.db-sidebar-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #000;
  font-weight: 900;
  font-size: var(--font-lg);
  border-radius: 8px;
  flex-shrink: 0;
}

.db-sidebar-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.db-sidebar-name {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.db-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  scrollbar-width: thin;
}

.db-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.db-nav-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
}

.db-nav-btn.is-active {
  background: rgba(127, 183, 255, 0.10);
  color: var(--accent);
  font-weight: 600;
}

.db-nav-icon {
  font-size: var(--font-base);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.6;
}

.db-nav-btn.is-active .db-nav-icon { opacity: 1; }

.db-nav-label { flex: 1; }

.db-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: var(--font-2xs);
  font-weight: 700;
  border-radius: 99px;
  background: rgba(127, 183, 255, 0.12);
  color: var(--accent);
  flex-shrink: 0;
}

.db-sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.db-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.db-refresh-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* ---- 右侧内容区 ----------------------------------------- */

.db-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-base);
}

.db-content-header {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.db-content-title {
  margin: 0;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
}

.db-content-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  scrollbar-width: thin;
}

.db-tab-pane { display: none; }
.db-tab-pane:not([hidden]) { display: block; }
.db-tab-pane[hidden] { display: none !important; }

/* 响应式：窄屏收起侧边栏标签 */
@media (max-width: 860px) {
  .db-sidebar { width: 56px; }
  .db-sidebar-name,
  .db-nav-label,
  .db-nav-badge { display: none; }
  .db-sidebar-brand { justify-content: center; padding: 16px 8px; }
  .db-nav-btn { justify-content: center; padding: 10px; }
  .db-nav-icon { width: auto; font-size: var(--font-xl); opacity: 1; }
  .db-content-body { padding: 16px; }
  .db-content-header { padding: 14px 16px 12px; }
}

/* =========================================================
 * Stage 5 组件级 UI 升级
 * ========================================================= */

/* 窄屏侧边栏 tooltip：hover 时浮现 nav-label 文字 */
@media (max-width: 860px) {
  .db-nav-btn { position: relative; }

  .db-nav-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: var(--space-1-5) var(--space-3);
    background: var(--bg-surface-3);
    color: var(--text-primary);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: var(--z-tooltip);
    box-shadow: var(--shadow-md);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
  }

  .db-nav-btn:hover::after,
  .db-nav-btn:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Filter Bar 间距收紧 + 输入框风格化 */
.db-filter-bar {
  gap: var(--space-3) var(--space-4) !important;
  padding: var(--space-3) 0;
  align-items: center;
}

.db-filter-bar select,
.db-filter-bar input[type="text"],
.db-filter-bar input[type="search"],
.db-filter-bar input[type="date"] {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--font-sm);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--duration-fast),
              background var(--duration-fast),
              box-shadow var(--duration-fast);
}

.db-filter-bar select:focus,
.db-filter-bar input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-surface-3);
  box-shadow: var(--shadow-glow);
}

/* Modal 现代化（dashboard 弹窗） */
.db-modal-backdrop,
.db-modal-overlay {
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.db-job-detail-panel,
.db-user-detail-panel,
.db-admin-create-panel,
.db-invite-create-panel {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* KPI 卡片间距规范化 */
.db-kpi-grid {
  gap: var(--space-3) !important;
}

/* 表格行 hover 更明显（accessibility） */
.db-table tbody tr:hover td {
  background: var(--accent-bg) !important;
}

/* 表格容器响应式：窄屏强制横向滚动而非裁切 */
.db-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

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

/* ---- 旧布局变量清理（保留兼容，可在后续版本删除） ----- */
.dashboard-page-shell,
.dashboard-page-header,
.dashboard-page-header-copy,
.dashboard-page-kicker,
.dashboard-page-title,
.dashboard-page-desc,
.dashboard-page-header-actions,
.dashboard-loading-card,
.dashboard-error-card,
.dashboard-page-root,
.dashboard-detail-inline { display: none; }


/* =========================================================
 * 响应式
 * ========================================================= */

@media (max-width: 1180px) {
  .dashboard-grid-primary, .dashboard-grid-secondary { grid-template-columns: 1fr; }
  .dashboard-hero { flex-direction: column; }
}

@media (max-width: 820px) {
  .manager-topbar { padding: 0 16px; }
  .manager-main { padding: 12px 16px 20px; }
  .project-grid { grid-template-columns: 1fr; }
  .editor-floating-toolbar { left: 12px; }
  .node { width: min(392px, calc(100vw - 48px)); }
  .db-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ---- 用户详情弹窗 --------------------------------------- */

.db-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.db-admin-create-panel,
.db-invite-create-panel {
  width: min(560px, calc(100vw - 48px));
  max-width: 560px;
  margin: 4vh auto;
}

.db-user-detail-panel {
  max-width: 520px;
  width: 90vw;
}

.db-job-detail-panel {
  width: min(1060px, calc(100vw - 32px));
  max-width: 1060px;
  margin: 3vh auto;
}

.db-job-detail-body {
  display: grid;
  gap: var(--space-4);
  padding: 16px;
}

.db-job-detail-section {
  display: grid;
  gap: var(--space-2-5);
}

.db-job-detail-section h4,
.db-job-detail-card-title {
  margin: 0;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-secondary);
}

.db-job-detail-section-head,
.db-job-detail-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
}

.db-job-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(127,183,255,0.12);
  background: linear-gradient(180deg, rgba(127,183,255,0.07), rgba(255,255,255,0.02));
}

.db-job-hero-main {
  display: grid;
  gap: var(--space-2-5);
}

.db-job-hero-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-wrap: wrap;
}

.db-job-hero-user {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.db-job-meta-label {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  line-height: 1;
  letter-spacing: 0.02em;
}

.db-job-meta-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
  word-break: break-all;
}

.db-job-hero-times {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 150px;
}

.db-job-hero-times div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.db-job-hero-times strong {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  width: 26px;
}

.db-job-hero-times span {
  font-size: var(--font-sm);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-all;
}

.db-job-prompt-section {
  gap: var(--space-2-5);
}

.db-job-prompt-shell {
  display: grid;
  gap: var(--space-2-5);
}

.db-job-content-card {
  display: grid;
  gap: var(--space-2-5);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}

.db-job-content-card-label,
.db-job-ref-label {
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.db-job-content-card-danger {
  border-color: rgba(255, 108, 108, 0.18);
  background: rgba(255,108,108,0.05);
}

.db-job-prompt-pre {
  font-size: var(--font-base);
  line-height: 1.75;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255,255,255,0.06);
}

/* hero 元数据卡片网格 */
.db-job-hero-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.db-job-meta-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 72px;
}

.db-job-result-preview-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.05);
}

.db-job-result-preview {
  width: min(100%, 480px);
  max-height: 400px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.db-job-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  justify-content: flex-start;
}

.db-job-debug-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
}

.db-job-debug-block summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-sm);
  font-weight: 500;
}

.db-job-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .db-job-hero {
    grid-template-columns: 1fr;
  }

  .db-job-detail-grid {
    grid-template-columns: 1fr;
  }

  .db-job-ref-gallery {
    grid-template-columns: 1fr;
  }
}

.db-job-detail-card {
  display: grid;
  gap: var(--space-2);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
}

.db-job-ref-card {
  align-content: start;
}

.db-job-ref-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
}

.db-job-ref-meta-chip {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.db-job-ref-info {
  display: grid;
  gap: var(--space-1-5);
}

.db-job-ref-info > div {
  display: grid;
  gap: 3px;
}

.db-job-ref-label {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.db-job-ref-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;
}

.db-job-ref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.db-job-ref-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2-5);
}

.db-job-ref-preview-wrap {
  display: flex;
  justify-content: flex-start;
}

.db-job-ref-preview {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}

.db-job-detail-pre {
  margin: 0;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
  line-height: 1.75;
}

.db-job-detail-details summary {
  cursor: pointer;
  color: var(--brand);
}

.db-job-detail-empty {
  color: var(--text-secondary);
}

.db-admin-create-body {
  display: block;
  padding: 16px;
}

.db-admin-create-form {
  display: grid;
  gap: var(--space-3);
}

.db-admin-create-field {
  display: grid;
  gap: var(--space-1-5);
}

.db-admin-create-field span {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.db-admin-create-input,
.db-admin-create-select {
  width: 100%;
  min-width: 0;
}

.db-admin-create-select {
  height: 36px;
  border-radius: 12px;
}

.db-admin-create-actions {
  margin-top: 6px;
}

.db-user-detail-body {
  display: grid;
  gap: var(--space-3-5);
  align-items: stretch;
}

.db-user-detail-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}

.db-user-detail-meta {
  display: grid;
  gap: 5px;
}

.db-user-detail-meta h3 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--text-primary);
  font-weight: 700;
}

.db-user-detail-meta p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.db-user-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-top: 4px;
}

.db-user-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.db-user-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.db-user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-strong);
}

.db-user-avatar-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(86,164,255,0.18), rgba(0,255,194,0.14));
  color: var(--text-primary);
  font-size: var(--font-2xl);
  font-weight: 700;
}

.db-user-detail-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ===========================================================================
 * 工程加载浮层 — bootstrapCanvas 期间覆盖整个视口
 *
 * 设计：磨砂玻璃底 + 一根竖线高光条从左往右扫，无文字、无卡片。
 * 默认 HTML 带 .is-visible 直接显示，JS 加载完后由 bootstrapCanvas 隐藏。
 * =========================================================================== */
.app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: rgba(15, 18, 24, 0.32);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: opacity 0.25s ease;
}
.app-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 横扫的柔光条
 * 整体像一缕极淡的雾光缓缓掠过，几乎不喧宾夺主。
 * 容器留宽给 filter:blur 的扩散空间，渐变本身也很缓。
 */
.app-loading-overlay::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 64px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)     0%,
    rgba(255, 255, 255, 0.003) 18%,
    rgba(255, 255, 255, 0.018) 36%,
    rgba(255, 255, 255, 0.07)  50%,
    rgba(255, 255, 255, 0.018) 64%,
    rgba(255, 255, 255, 0.003) 82%,
    rgba(255, 255, 255, 0)     100%
  );
  filter: blur(5px);
  transform: translateX(-64px);
  animation: app-loading-sweep 3.4s linear infinite;
  will-change: transform;
}
@keyframes app-loading-sweep {
  0%   { transform: translateX(-64px); }
  100% { transform: translateX(calc(100vw + 24px)); }
}

/* 用户偏好减少动效时，停掉横扫，只保留磨砂底 */
@media (prefers-reduced-motion: reduce) {
  .app-loading-overlay::before {
    animation: none;
    opacity: 0;
  }
}

/* =========================================================
 * 项目卡片：版本历史按钮
 * ========================================================= */
.project-card-history-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 17, 22, 0.62);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s, transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.project-card:hover .project-card-history-btn,
.project-card-history-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-card-history-btn:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* =========================================================
 * 版本历史弹窗
 * ========================================================= */
.snapshot-history-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: snapshot-fade-in 0.18s ease-out;
}

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

.snapshot-history-modal {
  width: min(560px, 100%);
  max-height: min(78vh, 720px);
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: snapshot-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes snapshot-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.snapshot-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-card);
}

.snapshot-history-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 12px;
}

.snapshot-history-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: var(--font-2xl);
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.snapshot-history-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border-color: var(--border);
}

.snapshot-history-hint {
  padding: 8px 18px 0;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.snapshot-history-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 14px;
}

.snapshot-history-loading,
.snapshot-history-empty {
  padding: 36px 16px;
  text-align: center;
  font-size: var(--font-base);
  color: var(--text-muted);
}

.snapshot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.snapshot-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-surface-2);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.snapshot-item:hover {
  background: var(--bg-surface-3);
  border-color: var(--border-card);
}

.snapshot-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.snapshot-item-row1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.snapshot-version {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.snapshot-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-xs);
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.snapshot-badge-auto {
  background: rgba(127, 183, 255, 0.12);
  color: var(--accent);
  border: 1px solid rgba(127, 183, 255, 0.22);
}

.snapshot-badge-manual {
  background: rgba(120, 220, 160, 0.12);
  color: #78dca0;
  border: 1px solid rgba(120, 220, 160, 0.24);
}

.snapshot-item-row2 {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.snapshot-time {
  font-variant-numeric: tabular-nums;
}

.snapshot-stats::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.6;
}

.snapshot-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  flex-shrink: 0;
}

.snapshot-btn {
  font-size: var(--font-sm);
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-surface-3);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.snapshot-btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--accent);
}

.snapshot-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.snapshot-btn-inplace:hover:not(:disabled) {
  background: var(--accent-bg);
  color: var(--accent);
}

/* =========================================================
 * 全屏预览浮层
 * ========================================================= */
.fullscreen-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: zoom-out;
}
.fullscreen-preview-overlay[hidden] { display: none !important; }

.fullscreen-preview-img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-drag: none;
}

.fullscreen-preview-text {
  max-width: 80vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px 40px;
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(30, 33, 42, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  user-select: text;
  cursor: text;
}
.fullscreen-preview-text[hidden] { display: none !important; }

.fullscreen-preview-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.fullscreen-preview-video-wrap[hidden] { display: none !important; }
.fullscreen-preview-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 全屏视频播放器：隐藏全屏/缩小按钮（已经在全屏状态了） */
.fullscreen-preview-video-wrap video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
.fullscreen-preview-video-wrap video:fullscreen::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

.fullscreen-preview-screenshot {
  position: absolute;
  bottom: 24px;
  right: 24px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  z-index: 1;
}
.fullscreen-preview-screenshot:hover { background: rgba(255, 255, 255, 0.24); }
.fullscreen-preview-screenshot[hidden] { display: none !important; }

.fullscreen-preview-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.fullscreen-preview-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* =========================================================
 * 节点类型标签 + 颜色主题
 * ========================================================= */
.node-type-label {
  position: absolute;
  top: -22px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  pointer-events: none;
  z-index: 1;
  line-height: 16px;
}

/* 图片 = 蓝 */
.node-type-label-image { color: #3b82f6; background: rgba(59, 130, 246, 0.12); }
.node.image-node.node-selected .preview-wrap { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6); transition: box-shadow 0.18s ease; }

/* 文字 = 绿 */
.node-type-label-text { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.node.text-node.node-selected .preview-wrap { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.6); transition: box-shadow 0.18s ease; }

/* 视频 = 紫 */
.node-type-label-video { color: #a855f7; background: rgba(168, 85, 247, 0.12); }
.node.video-node.node-selected .preview-wrap { box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.6); transition: box-shadow 0.18s ease; }

/* ---- 文字预览区（与图片预览 .preview-wrap 同尺寸） -------- */
.text-preview {
  width: 100%;
  height: 220px;
  min-height: 220px;
  overflow-y: auto;
  padding: 16px;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
  background: transparent;
  border-radius: inherit;
  box-sizing: border-box;
  user-select: none;
  cursor: default;
}
/* 双击进入选择模式 */
.text-preview.is-selectable {
  user-select: text;
  cursor: text;
}
/* 文字节点放大预览按钮 */
.text-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.preview-port-wrap:hover .text-fullscreen-btn,
.text-preview.is-selectable ~ .text-fullscreen-btn { opacity: 1; }
.text-fullscreen-btn:hover { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8); }

.text-preview:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 13px;
}

/* ---- 视频预览区（Plyr 播放器） ----------------------------- */
.preview-video {
  width: 100%;
  height: 220px;
  min-height: 220px;
  object-fit: contain;
  border-radius: inherit;
  background: #000;
  display: block;
}

/* 节点内视频：只显示播放按钮 + 进度条，隐藏其他控件 */
.video-block .preview-video {
  cursor: pointer;
}
/* 放大播放按钮 */
.video-block .preview-video::-webkit-media-controls-play-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
/* 隐藏音量、全屏、下载、剩余时间等 */
.video-block .preview-video::-webkit-media-controls-volume-slider,
.video-block .preview-video::-webkit-media-controls-mute-button,
.video-block .preview-video::-webkit-media-controls-fullscreen-button,
.video-block .preview-video::-webkit-media-controls-current-time-display,
.video-block .preview-video::-webkit-media-controls-time-remaining-display,
.video-block .preview-video::-webkit-media-controls-toggle-closed-captions-button,
.video-block .preview-video::-webkit-media-controls-overflow-button,
.video-block .preview-video::-webkit-media-controls-enclosure .overflow-button,
.video-block .preview-video::-internal-media-controls-overflow-button {
  display: none !important;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 音频 = 橙 */
.node-type-label-audio { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.node.audio-node.node-selected .preview-wrap { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.6); transition: box-shadow 0.18s ease; }

/* audio-block 已加入共享样式组 */
.node.audio-node .preview-wrap {
  background: linear-gradient(180deg, rgba(138, 146, 166, 0.12) 0%, rgba(96, 104, 123, 0.18) 100%);
}
.audio-preview {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}
.audio-preview-icon { color: rgba(255, 255, 255, 0.15); }
/* 有音频时隐藏占位 */
.audio-node.has-audio .audio-preview { display: none; }
.audio-waveform-canvas {
  width: 100%;
  height: 80px;
  display: none;
  border-radius: inherit;
}
.audio-node.has-audio .audio-waveform-canvas { display: block; }
.audio-play-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  pointer-events: none;
}
.audio-node.has-audio .audio-play-overlay { display: flex; }
.audio-play-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background 0.12s;
  flex-shrink: 0;
}
.audio-play-btn:hover { background: rgba(255, 255, 255, 0.2); }
.audio-time-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.preview-audio { display: none; }
/* 音频节点工具栏始终显示 */
.node.audio-node .upload-capsule-btn,
.node.audio-node .download-capsule-btn { display: inline-flex !important; }

/* ---- 视频模型列表面板 ------------------------------------- */
.model-list-panel {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.model-list-panel::-webkit-scrollbar { width: 4px; }
.model-list-panel::-webkit-scrollbar-track { background: transparent; }
.model-list-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}
.model-list-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
.model-list-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  padding: 8px 10px 4px;
  text-transform: uppercase;
}
.model-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}
.model-list-item:hover { background: rgba(255, 255, 255, 0.06); }
.model-list-item.is-selected {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
}
.model-list-item-name { flex: 1; }
/* 隐藏原生 select（仍用于存值） */
.model-dropdown-select { display: none !important; }

/* ---- 视频秒数滑块 ----------------------------------------- */
.duration-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  margin: 8px 0 4px;
  cursor: pointer;
}
.duration-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.duration-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.duration-value-label {
  font-weight: 400;
  opacity: 0.7;
  margin-left: 4px;
}