/* 个人工作台 · 扁平简约风格 (浅灰底 + 纯白卡片 + 细边框 + 单一主色点缀) */
:root {
  /* 品牌色 · 沉静蓝 (扁平, 无渐变) */
  --brand: #1677ff;
  --brand-700: #0958d9;
  --brand-50: #e8f1ff;
  --brand-30: #f4f8ff;
  --brand-glow: rgba(22, 119, 255, .16);

  /* 文本 · 中性灰阶 */
  --text: #1f2329;
  --text-muted: #5f6672;
  --text-faint: #98a0aa;

  /* 边框 · 细浅灰线 */
  --border: #e6e8eb;
  --border-strong: #d6d9de;

  /* 表面 · 纯白卡片 + 中性浅灰底 */
  --surface: #ffffff;
  --surface-muted: #f5f6f8;
  --surface-overlay: #ffffff;
  --surface-sunken: #f1f2f5;

  /* 语义色 · 扁平 */
  --danger: #f53f3f;
  --warn: #ff8f1f;
  --ok: #00b42a;
  --info: #0e9fd8;

  /* 阴影: 卡片扁平无影 (仅悬停浮起与模态/Toast 浮层使用) */
  --shadow-sm: none;
  --shadow-md: 0 2px 10px rgba(31, 35, 41, .07);
  --shadow-lg: 0 12px 32px rgba(31, 35, 41, .14);
  --shadow-focus: 0 0 0 3px var(--brand-glow);

  /* 圆角 (小而克制) */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", Roboto, sans-serif;

  /* 布局 */
  --sidebar-w: 120px;
  --sidebar-narrow-w: 72px;
  --topbar-h: 64px;
  --content-max: 1280px;
}

[data-theme="dark"] {
  --brand-50: #142a47;
  --brand-30: #101f33;
  --brand-glow: rgba(22, 119, 255, .30);
  --text: #e8eaed;
  --text-muted: #a3a9b3;
  --text-faint: #767d88;
  --border: #2c3138;
  --border-strong: #3b414a;
  --surface: #1c1f24;
  --surface-muted: #141619;
  --surface-overlay: #22262c;
  --surface-sunken: #101214;
  --shadow-sm: none;
  --shadow-md: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface-muted);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }

button { font-family: inherit; }

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.55; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn:hover { background: var(--surface-muted); border-color: var(--text-faint); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--surface-muted); color: var(--text); }
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { filter: brightness(1.05); }
.btn-block { width: 100%; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }

/* ---------- 锁屏 ---------- */
.lock-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  padding: 24px;
}
.lock-card {
  width: 380px;
  max-width: 100%;
  padding: 44px 36px 32px;
  background: var(--surface);
  border-radius: var(--r-xl);
  text-align: center;
  border: 1px solid var(--border);
}
.lock-logo {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--r-lg);
  background: var(--brand);
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 64px;
}
.lock-card h1 { font-size: 22px; margin: 0 0 6px; font-weight: 600; letter-spacing: -.01em; }
.lock-subtitle { color: var(--text-muted); margin: 0 0 24px; font-size: 13px; }
.lock-input { width: 100%; margin-bottom: 12px; padding: 11px 14px; }
.lock-error {
  color: var(--danger);
  font-size: 12px;
  min-height: 18px;
  margin-bottom: 8px;
}
.lock-actions { display: flex; gap: 8px; }
.lock-actions .btn { flex: 1; }
.lock-tip { color: var(--text-faint); font-size: 11px; margin: 20px 0 0; line-height: 1.6; }

/* ---------- 主壳 ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns .2s ease;
}
.app-shell[data-collapsed="true"] {
  grid-template-columns: var(--sidebar-narrow-w) 1fr;
}

/* 侧边栏 */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  overflow: hidden;
  transition: width .2s ease;
}
.brand {
  display: flex;
  flex-direction: column; /* 窄侧栏(120px): logo 与名称纵向堆叠, 避免横向溢出 */
  align-items: center;
  gap: 6px;
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.brand-mark {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  text-align: center;
  line-height: 36px;
  font-weight: 700;
  font-size: 16px;
}
.brand-text {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
}
.nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--surface-muted); color: var(--text); }
.nav-item.active {
  background: var(--brand);
  color: #fff;
  font-weight: 500;
}
.nav-ico {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-faint);
  line-height: 1;
}
.nav-item.active .nav-ico { color: #fff; }
.sidebar-foot {
  padding: 12px 12px 4px;
  border-top: 1px solid var(--border);
}

/* 折叠态隐藏文本 */
.app-shell[data-collapsed="true"] .brand-text,
.app-shell[data-collapsed="true"] .nav-item span:not(.nav-ico),
.app-shell[data-collapsed="true"] .sidebar-foot .btn { display: none; }
.app-shell[data-collapsed="true"] .nav-item { justify-content: center; padding: 10px 0; }
.app-shell[data-collapsed="true"] .brand { justify-content: center; padding-bottom: 14px; }

/* 内容区 */
.content {
  display: flex;
  flex-direction: column;
  /* 页面统一滚动容器: 顶栏与内容同属滚动流, 一起随页面滚动 (顶栏不再固定) */
  overflow-x: hidden;
  overflow-y: auto;
  /* 恒定预留滚动条槽位: 有无滚动条时内容列宽一致 */
  scrollbar-gutter: stable;
  min-width: 0;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  height: var(--topbar-h);
  background: var(--surface);
  /* 圆角悬浮: 脱离顶部边缘, 呈悬浮卡片状 (原通栏 + border-bottom 方案) */
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  /* 与内容列恒等宽: 宽窗口收进 --content-max 居中列, 窄窗口保留 24px 边距 (与 .view-container 同一公式) */
  max-width: var(--content-max);
  margin: var(--space-lg) max(var(--space-lg), (100% - var(--content-max)) / 2);
  flex-shrink: 0;
  transition: box-shadow .2s;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.view-container {
  /* 页面滚动已上移到 .content: 本容器只负责排版, 不再滚动/裁切 */
  overflow: visible;
  /* 与顶栏共用同一 max() 外边距公式: 任意窗口宽度下两者左右缘恒等宽 (宽窗为 1280 居中列, 窄窗为 24px 边距) */
  max-width: var(--content-max);
  margin: 0 max(var(--space-lg), (100% - var(--content-max)) / 2) var(--space-lg);
}
.view-inner { max-width: var(--content-max); margin: 0 auto; }

/* 侧边栏切换按钮 */
.nav-toggle {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  transition: background .15s, color .15s;
}
.nav-toggle:hover { background: var(--surface-muted); color: var(--text); }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  /* 裁剪贴边内容(表格表头底色/iframe 等)到圆角内, 顶部不再呈直角 */
  overflow: hidden; /* 回退: 不支持 overflow:clip 的环境 */
  overflow: clip;   /* 不产生滚动容器, 使卡片内 position:sticky 表头相对内容区滚动容器生效 */
  transition: box-shadow .2s;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.card-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
/* 卡片标题右侧计数胶囊 */
.card-count {
  display: inline-block;
  min-width: 22px; height: 22px; line-height: 22px; text-align: center;
  padding: 0 7px; margin-left: 8px;
  border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-700);
  font-size: 12px; font-weight: 600;
  vertical-align: middle;
}
.card-body { padding: 18px 20px; }
.card-body.tight { padding: 14px 16px; }

/* ---------- 表格 ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th, .table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-sunken);
  font-size: 12px;
  white-space: nowrap;
  letter-spacing: .02em;
  text-transform: uppercase;
}
/* 表头吸顶: 滚动长表格时, 列标题行固定在内容区顶部, 数据行在其下方滚动 */
.table thead th {
  position: sticky;
  top: var(--list-thead-top, 0px); /* 默认贴内容区顶部; 有吸顶筛选行的列表页由 JS 写入偏移, 表头紧贴筛选行下方 */
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--border); /* 吸顶时下边框随行固定(collapse 模式下原生边框不随粘滞行移动) */
}

/* 列表页吸顶筛选行(如联系人分类 Tab): 下滑时整行固定在内容区顶部, 不随内容滚动 */
.list-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface); /* 不透明底: 吸顶时遮住下方滚过的内容 */
}
.list-sticky-bar .pd-tabs { margin-bottom: 0; } /* 底部间距改由吸顶行 padding 承担, 避免吸顶时露出透明缝隙 */
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--brand-30); }
.table tbody tr:last-child td { border-bottom: none; }
.table td.actions { white-space: nowrap; text-align: right; }
.table .row-empty { text-align: center; color: var(--text-faint); padding: 32px; }
.table-wrap { overflow-x: auto; }

/* ---------- 表单 ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px 16px;
}
.form-grid label { color: var(--text-muted); font-size: 13px; line-height: 36px; }
.form-grid .field-full { grid-column: 2 / 3; }
.form-grid textarea { width: 100%; }

/* 项目新建/编辑: 两列横向排布 (label+控件成对), 宽屏每行 2 组, 手机回落 1 列 */
.form-grid.project-form { grid-template-columns: repeat(2, 96px minmax(0, 1fr)); gap: 12px 18px; }
.form-grid.project-form .field-full { grid-column: 2 / -1; }
@media (max-width: 720px) {
  .form-grid.project-form { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .form-grid.project-form .field-full { grid-column: 1 / -1; }
}

/* 可搜索输入 + 下拉建议 (项目对应销售) */
.combo-wrap { position: relative; }
.combo-wrap input { width: 100%; }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  max-height: 220px; overflow: auto; padding: 4px;
}
.combo-list.hidden { display: none; }
.combo-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.combo-item:hover, .combo-item.active { background: var(--brand-30); }
.combo-item .ci-name { font-size: 13px; color: var(--text); white-space: nowrap; }
.combo-item .ci-meta { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-empty { padding: 9px; font-size: 12px; color: var(--text-faint); }

/* 添加关联联系人: 内嵌「新建联系人」快捷表单 */
.pc-new {
  margin: 4px 0 12px; padding: 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted);
}
.pc-new-hd { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.pc-new-grid { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.pc-new-grid label { font-size: 12px; font-weight: normal; color: var(--text-muted); }
.pc-new-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 560px) {
  .pc-new-grid { grid-template-columns: 72px minmax(0, 1fr); }
}

/* ---------- 项目资料 (NAS 目录) ---------- */
.mat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mat-head-info { min-width: 240px; flex: 1; }
.mat-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.mat-dir { margin-top: 4px; word-break: break-all; }
.mat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mat-crumbs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border); font-size: 12px;
}
.mat-crumb {
  max-width: 240px; padding: 3px 6px; border: 0; border-radius: 5px; background: none;
  color: var(--brand); font: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mat-crumb:hover { background: var(--brand-30); }
.mat-crumb.current { color: var(--text); font-weight: 600; cursor: default; }
.mat-crumb.current:hover { background: none; }
.mat-crumb-sep { color: var(--text-faint); }
.mat-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mat-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 24px; border-radius: 5px; background: var(--text-faint);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.mat-ico.dir, .mat-card-ext.dir { background: #2f80ff; }
.mat-ico.pdf, .mat-card-ext.pdf { background: #e5484d; }
.mat-ico.doc, .mat-card-ext.doc { background: #3b7ddd; }
.mat-ico.xls, .mat-card-ext.xls { background: #1a9f6b; }
.mat-ico.ppt, .mat-card-ext.ppt { background: #d97706; }
.mat-ico.img, .mat-card-ext.img { background: #7c5cff; }
.mat-ico.zip, .mat-card-ext.zip { background: #8a6d3b; }
.mat-ico.vid, .mat-card-ext.vid { background: #0e9aa7; }
.mat-name-btn {
  min-width: 0; padding: 0; border: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mat-name-btn:hover { color: var(--brand); text-decoration: underline; }
.mat-muted { color: var(--text-faint); white-space: nowrap; }

/* 视图切换 + 图标视图 */
.mat-view-toggle { display: flex; gap: 4px; padding-right: 4px; }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mat-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mat-card:hover, .mat-card:focus-visible {
  border-color: var(--brand); box-shadow: 0 6px 18px rgba(0, 0, 0, .09); outline: none;
}
.mat-card-preview {
  display: flex; align-items: center; justify-content: center;
  height: 100px; background: var(--surface-muted); overflow: hidden;
}
.mat-card-preview.has-thumb { background: #0f1115; }
.mat-card-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mat-folder-svg { width: 52px; height: 42px; }
.mat-card-ext {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 8px; background: #8a919c;
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.mat-card-name {
  min-height: 34px; padding: 8px 10px 0; color: var(--text); font-size: 12.5px; line-height: 17px;
  overflow: hidden; text-overflow: ellipsis; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mat-card-meta {
  padding: 4px 10px 10px; color: var(--text-faint); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 报价单据信息: 并排紧凑多列 (label+控件成对, 宽屏每行 3 组 / 中屏 2 组 / 手机 1 组) */
.form-grid.cpq-head-grid { grid-template-columns: repeat(3, 96px minmax(0, 1fr)); gap: 10px 14px; }
.form-grid.cpq-head-grid .field-full { grid-column: 2 / -1; }
.form-grid.cpq-head-grid textarea { min-height: 68px; }
@media (max-width: 1100px) { .form-grid.cpq-head-grid { grid-template-columns: repeat(2, 96px minmax(0, 1fr)); } }
@media (max-width: 720px) { .form-grid.cpq-head-grid { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; } }

/* 产品新增/编辑表单: 2 列横向排布 (label+控件成对), 备注框缩小, 手机回落 1 列 */
.form-grid.cpq-prod-grid { grid-template-columns: repeat(2, 84px minmax(0, 1fr)); gap: 10px 14px; }
.form-grid.cpq-prod-grid .field-full { grid-column: 2 / -1; }
.form-grid.cpq-prod-grid label { line-height: 36px; padding-top: 0; }
.form-grid.cpq-prod-grid textarea { min-height: 44px; }
.form-grid.cpq-prod-grid textarea[name="spec"] { min-height: 84px; }   /* 设备参数: 默认 3 行, 可纵向拖拽调整高度 */
@media (max-width: 520px) { .form-grid.cpq-prod-grid { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; } }

/* 成对网格内控件需填满所在列 (原生 input 默认窄宽度, 否则右侧留白) */
.form-grid.cpq-prod-grid > div > input:not([type="color"]),
.form-grid.cpq-prod-grid > div > select,
.form-grid.cpq-prod-grid > div > textarea,
.form-grid.cpq-head-grid > div > input:not([type="color"]),
.form-grid.cpq-head-grid > div > select,
.form-grid.cpq-head-grid > div > textarea { width: 100%; }

/* ---------- 模态 ---------- */
.modal-root {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(16, 18, 22, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  background: var(--surface-overlay);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: min(680px, 92vw);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
/* 可拖动模态 (openModal { draggable: true }): 标题栏作为拖动手柄 */
.modal-card.is-draggable .modal-head { cursor: grab; user-select: none; touch-action: none; }
.modal-card.is-draggable.dragging .modal-head { cursor: grabbing; }
.modal-card.is-draggable.dragging { user-select: none; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--surface-muted); color: var(--text); }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* ---------- Toast ---------- */
.toast-root {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  max-width: 360px;
  animation: toast-in .22s ease;
}
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.err { border-left-color: var(--danger); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- 通用工具 ---------- */
.row { display: flex; gap: 10px; align-items: center; }
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 12px; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  letter-spacing: .02em;
}
.badge.brand { background: var(--brand-50); color: var(--brand-700); border-color: transparent; }
.badge.ok { background: rgba(0, 180, 42, .14); color: var(--ok); border-color: transparent; }
.badge.warn { background: rgba(255, 143, 31, .16); color: var(--warn); border-color: transparent; }
.badge.danger { background: rgba(245, 63, 63, .13); color: var(--danger); border-color: transparent; }

.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-faint);
}
.empty .empty-ico { font-size: 36px; margin-bottom: 10px; opacity: .6; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

/* 滚动条美化 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid var(--surface-muted);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 首页特化 ---------- */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.hero h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.hero .hero-sub { color: var(--text-muted); font-size: 13px; }

/* ---------- 首页天气条 (问候卡右侧: 未来 7 天, 城市可设置) ---------- */
.hero {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  position: relative;
  overflow: clip;   /* 裁掉动画层溢出, 保留卡片圆角 */
}
.hero-main { flex-shrink: 0; }
/* 天气条限宽右对齐: 宽屏下 7 天格子不会被拉得过宽 */
.hero-wx { flex: 1 1 auto; min-width: 0; max-width: 880px; margin-left: auto; }
/* 文字层压在动态背景之上, 保证可读性 */
.hero-main, .hero-wx { position: relative; z-index: 1; }

/* ---------- 首页问候卡: 摸鱼动态背景 (整卡铺底, 金鱼位于左侧三分之一) ---------- */
.hero-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* 整卡背景铺底: cover 铺满问候卡; 插画主体(金鱼)本身即位于画面左侧三分之一 */
.hero-art-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -28px;    /* 左右各外扩, 给游动动画留余量, 不露出白边 */
  right: -28px;
  background: url('../img/hero-moyu-left.jpg') center / cover no-repeat;
  opacity: .95;
  animation: heroMoyu 22s ease-in-out infinite alternate;
}
@keyframes heroMoyu {
  from { transform: translateX(-14px); }
  to   { transform: translateX(14px); }
}
/* 气泡: 由卡片底部缓缓上浮 (跟随金鱼所在区域) */
.hero-bub {
  position: absolute;
  bottom: -14px;
  border-radius: 50%;
  background: rgba(22, 119, 255, .13);
  border: 1px solid rgba(22, 119, 255, .22);
  animation: heroBubble 12s linear infinite;
}
.hero-bub.b1 { left: 20%; width: 9px;  height: 9px;  animation-duration: 11s; }
.hero-bub.b2 { left: 26%; width: 6px;  height: 6px;  animation-duration: 14s; animation-delay: 2.5s; }
.hero-bub.b3 { left: 32%; width: 11px; height: 11px; animation-duration: 16s; animation-delay: 5s; }
.hero-bub.b4 { left: 38%; width: 7px;  height: 7px;  animation-duration: 13s; animation-delay: 7.5s; }
@keyframes heroBubble {
  0%   { transform: translateY(0) scale(.7);     opacity: 0; }
  18%  {                                         opacity: .9; }
  70%  {                                         opacity: .65; }
  100% { transform: translateY(-118px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art-img, .hero-bub { animation: none; }
}
.wx-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  min-height: 22px;
}
.wx-loc {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.wx-loc b { color: var(--text); font-weight: 600; }
.wx-now { color: var(--text-muted); }
.wx-set {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.wx-set:hover { background: var(--surface-muted); border-color: var(--border); color: var(--text); }
.wx-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(54px, 1fr));
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wx-days::-webkit-scrollbar { display: none; }
.wx-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px 7px;
  border-radius: var(--r-sm);
  min-width: 0;
}
.wx-day.today { background: var(--brand-30); }
.wx-d { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.wx-day.today .wx-d { color: var(--brand-700); font-weight: 600; }
.wx-t {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wx-t .wx-i { font-size: 13px; line-height: 1; font-style: normal; }
.wx-t b { font-size: 13px; font-weight: 600; }
.wx-t span { font-size: 12px; color: var(--text-faint); }
.wx-load, .wx-err { font-size: 12px; color: var(--text-faint); padding: 12px 0; }
.wx-err { color: var(--text-muted); }
.wx-retry {
  margin-left: 6px;
  border: none;
  background: none;
  padding: 0;
  color: var(--brand);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

/* 天气条整栏可点击 (打开详细天气): 仅悬停加深, 不做位移 */
.wx-click { cursor: pointer; }
.wx-click:hover .wx-day { background: var(--surface-muted); }
.wx-click:hover .wx-day.today { background: var(--brand-50); }

/* 天气详情弹窗: 实况 + 指标磁贴 + 逐时横向滑动 + 逐日列表 */
.wxd-now { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wxd-now-ico { font-size: 42px; line-height: 1; }
.wxd-now-temp {
  font-size: 30px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.wxd-now-temp span { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.wxd-now-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.wxd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.wxd-cell { background: var(--surface-muted); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; }
.wxd-cell span { display: block; font-size: 11px; color: var(--text-faint); margin-bottom: 2px; }
.wxd-cell b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxd-sec { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; }
.wxd-hours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.wxd-h {
  flex: 0 0 auto;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.wxd-h-t { font-size: 10.5px; color: var(--text-muted); }
.wxd-h-i { font-size: 15px; line-height: 1.2; }
.wxd-h-v { font-size: 12.5px; font-weight: 600; }
.wxd-h-p { min-height: 13px; line-height: 13px; font-size: 10px; color: var(--info); }
.wxd-days { display: flex; flex-direction: column; }
.wxd-d {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.wxd-d:last-child { border-bottom: none; }
.wxd-d-name { width: 62px; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wxd-d-name b { font-size: 12.5px; font-weight: 600; }
.wxd-d-name i { font-style: normal; font-size: 10.5px; color: var(--text-faint); }
.wxd-d-ico { flex-shrink: 0; font-size: 15px; }
.wxd-d-txt { flex: 1; min-width: 0; color: var(--text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxd-d-p { width: 50px; flex-shrink: 0; text-align: right; font-size: 11.5px; color: var(--info); }
.wxd-d-temp { width: 76px; flex-shrink: 0; text-align: right; }
.wxd-d-temp b { font-weight: 600; }
.wxd-d-temp span { color: var(--text-faint); font-size: 12px; margin-left: 3px; }
.wxd-foot { margin-top: 12px; font-size: 11px; color: var(--text-faint); }
@media (max-width: 480px) {
  .wxd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 城市设置弹窗 */
.wx-cur { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.wx-cur b { color: var(--text); }
.wx-search { display: flex; gap: 8px; }
.wx-search input { flex: 1; min-width: 0; }
.wx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.wx-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.wx-chip:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-30); }
.wx-results {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  max-height: 240px;
  overflow-y: auto;
}
.wx-hint { color: var(--text-faint); font-size: 12px; padding: 10px 12px; line-height: 1.5; }
.wx-bad { color: var(--danger); }
.wx-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: background .15s;
}
.wx-row:last-child { border-bottom: none; }
.wx-row:hover { background: var(--surface-muted); }
.wx-row-name { font-size: 13px; color: var(--text); font-weight: 500; }
.wx-row-sub { font-size: 12px; color: var(--text-faint); }

/* 窄屏 (手机 / 小窗口): 天气条换行占满整行, 7 天不挤压 (过窄时可横向滑动) */
@media (max-width: 900px) {
  .hero { flex-wrap: wrap; row-gap: 14px; }
  .hero-main { flex: 1 1 100%; }
  .hero-wx { flex: 1 1 100%; }
}
/* 小屏手机: 天气改 4 列两行, 7 天全部可见, 无需横向滑动 */
@media (max-width: 480px) {
  .wx-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.kpi:hover { box-shadow: var(--shadow-md); }
.kpi .kpi-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kpi .kpi-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.1;
}
.kpi .kpi-foot {
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 6px;
}
.kpi.kpi-accent {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
}
.kpi.kpi-accent .kpi-label,
.kpi.kpi-accent .kpi-foot { color: rgba(255, 255, 255, .78); }
.kpi.kpi-accent .kpi-value { color: #fff; }

/* ---------- 首页: 快速访问 (快捷方块, 紧凑尺寸) ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 7px 6px; }
.qa-item { min-width: 0; position: relative; }
.qa-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s, filter .16s;
  user-select: none;
}
.qa-tile:hover { box-shadow: var(--shadow-md); filter: brightness(1.04); }
.qa-tile .qa-ico { font-size: 18px; line-height: 1; }
.qa-name {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  color: var(--text-muted);
  /* 窄磁贴下名称最多两行, 超出省略 (title 里仍有完整名称) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
.qa-op {
  position: absolute;
  top: 2px;
  width: 14px; height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 8px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none;
}
.qa-op:hover { background: rgba(0, 0, 0, .55); }
.qa-op[data-edit] { right: 18px; }
.qa-op[data-del] { right: 2px; }
.qa-item:hover .qa-op { display: inline-flex; }
@media (hover: none) { .qa-op { display: inline-flex; } }
.qa-tile-add {
  background: var(--surface-muted);
  border: 1.5px dashed var(--border-strong);
  color: var(--text-faint);
  box-shadow: none;
}
.qa-tile-add:hover { border-color: var(--brand); color: var(--brand); filter: none; }
.qa-hint { color: var(--text-faint); font-size: 12px; margin-bottom: 12px; }
.qa-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.qa-tab {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.qa-tab:hover { border-color: var(--brand); color: var(--brand-700); }
.qa-tab.on { border-color: var(--brand); color: var(--brand-700); background: var(--brand-30); font-weight: 500; }
.qa-tab-add { border-style: dashed; color: var(--text-faint); background: transparent; }
.qa-tab-add:hover { color: var(--brand); }
.qa-tab-wrap { position: relative; display: inline-flex; }
.qa-tab-del {
  position: absolute;
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none;
}
.qa-tab-wrap:hover .qa-tab-del { display: inline-flex; }
@media (hover: none) { .qa-tab-del { display: inline-flex; } }

/* 快速访问: 表单 (图标/配色/路径浏览) */
.qa-emoji-row { display: flex; flex-wrap: wrap; gap: 4px; }
.qa-emoji {
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.qa-emoji:hover { border-color: var(--brand); background: var(--brand-30); }
.qa-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qa-swatch {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: transform .12s, box-shadow .12s;
}
.qa-swatch:hover { transform: scale(1.08); }
.qa-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.qa-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.qa-swatch-auto {
  background: var(--surface-muted);
  border: 1.5px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 10px;
}
.qa-swatch-auto:has(input:checked) { color: var(--brand-700); border-color: var(--brand); }

/* 快速访问: 路径浏览面板 */
.qa-browser {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-muted);
  padding: 10px;
}
.qa-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qa-crumb-path {
  flex: 1; min-width: 0;
  font-size: 12px;
  font-family: Consolas, "Courier New", monospace;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qa-chip {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.qa-chip:hover { border-color: var(--brand); color: var(--brand-700); }
.qa-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.qa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.qa-row:last-child { border-bottom: none; }
.qa-row:hover { background: var(--brand-30); }
.qa-row-ico { width: 16px; text-align: center; flex-shrink: 0; }
.qa-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-row-tag { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.qa-browser-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.qa-dim { color: var(--text-faint); font-size: 12px; padding: 12px; text-align: center; }
.qa-err { color: var(--danger); font-size: 12px; padding: 8px 4px; }

.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.todo-item:last-child { border-bottom: none; }
.todo-item:hover { background: var(--surface-muted); border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; }
.todo-item .todo-check {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  transition: all .15s;
}
.todo-item .todo-check:hover { border-color: var(--brand); }
.todo-item .todo-check.done {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.todo-item .todo-main { flex: 1; min-width: 0; }
.todo-item .todo-title { font-size: 13px; font-weight: 500; }
.todo-item .todo-meta { color: var(--text-faint); font-size: 11px; margin-top: 2px; }

.proj-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.proj-item:last-child { border-bottom: none; }
.proj-item:hover { background: var(--surface-muted); border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; }
.proj-item .proj-main { min-width: 0; }
.proj-item .proj-name { font-size: 13px; font-weight: 500; }
.proj-item .proj-meta { color: var(--text-faint); font-size: 11px; margin-top: 2px; }

/* ---------- 首页: 左右两栏 (左: 今日待办 + 本月待办; 右: 快速访问 + 工具箱) ---------- */
.home-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: var(--space-lg);
  align-items: start;
}
.home-col-main, .home-col-side {
  display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0;
}
/* 右栏为快捷入口, 卡片内边距收紧一些 */
.home-col-side .card-head { padding: 10px 16px; }
.home-col-side .card-body { padding: 10px 14px; }
@media (max-width: 900px) {
  .home-cols { grid-template-columns: 1fr; }
  .home-col-side { order: -1; }   /* 手机端: 快捷入口前置 */
}
/* 工具箱入口磁贴: 小图标 + 名称/说明 (紧凑横向), 点击跳转工具页 */
.home-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.tool-tile:hover { border-color: var(--brand); background: var(--brand-30); box-shadow: var(--shadow-sm); }
.tool-ico {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  font-size: 14px;
}
.tool-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tool-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-desc { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .home-tools-grid { grid-template-columns: 1fr; }
}

/* ---------- 首页: 今日待办 (左栏) / 本月待办简化月历 (左栏次卡) ---------- */
.home-today { padding: 16px 20px; min-width: 0; }
.month-todos {
  background: var(--surface-muted);
  padding: 16px 18px 18px;
  min-width: 0;
}
.month-title { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.month-sum { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
/* 月历: 复用待办视图的周网格与跨天条机制 (.cal-week/.cal-bar/.cal-lane-pad), 单元格用简化样式 */
.month-todos .cal-week { --cal-bar-top: 21px; --cal-bar-h: 15px; --cal-bar-step: 17px; }
.month-todos .cal-bar { cursor: default; }
.hcal-cell {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  min-height: 54px; min-width: 0;
  padding: 3px 5px 4px; display: flex; flex-direction: column; gap: 2px;
}
.hcal-cell.out { background: var(--surface-muted); }
.hcal-cell.out .hcal-d { color: var(--text-faint); }
.hcal-d { font-size: 11px; color: var(--text-muted); line-height: 16px; }
.hcal-cell.today .hcal-d {
  width: 16px; height: 16px; border-radius: 50%; text-align: center;
  background: var(--brand);
  color: #fff; font-weight: 600;
}
.cal-ev {
  font-size: 10px; line-height: 15px; padding: 0 4px; border-radius: 4px;
  background: var(--brand-50); color: var(--brand-700);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal-ev.done { background: rgba(0, 180, 42, .14); color: var(--ok); text-decoration: line-through; }
.hcal-more { font-size: 10px; color: var(--text-faint); padding-left: 2px; }

/* ---------- Phase 3: 标签 ---------- */
.tab-row {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab-row .btn {
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  height: 34px;
  background: transparent;
}
.tab-row .btn:hover { background: transparent; color: var(--text); }
.tab-row .btn.active { border-bottom-color: var(--brand); color: var(--brand-700); }
.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  font-size: 13px;
  transition: background .15s, border-color .15s;
}
.tag-chip:hover { background: var(--surface); border-color: var(--border-strong); }
.tag-chip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tag-pick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
}
.tag-pick input { margin: 0; }
.tag-pick:has(input:checked) {
  background: var(--brand-50);
  border-color: var(--brand);
  color: var(--brand-700);
}

/* ---------- Phase 3: 关系图 ---------- */
.relation-canvas { width: 100%; height: 70vh; min-height: 480px; }
.legend {
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .dot { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- Phase 3: 拓扑图 ---------- */
.topo-frame-wrap { padding: 0; overflow: hidden; position: relative; }
.topo-frame { width: 100%; height: 74vh; border: 0; background: #fff; display: block; }

/* 全屏查看: 原生全屏(:fullscreen)与 CSS 覆盖层(.fs-overlay, 手机/嵌入式回退) 均让拓扑撑满屏幕 */
.topo-frame-wrap:fullscreen,
.topo-frame-wrap.fs-overlay {
  position: fixed; inset: 0;
  z-index: 1500; /* 高于模态 1000, 低于 toast 2000 */
  background: #fff;
  border-radius: 0;
}
.topo-frame-wrap:fullscreen .topo-frame,
.topo-frame-wrap.fs-overlay .topo-frame {
  height: 100% !important; /* 覆盖弹窗实例的内联高度 */
}
/* 全屏态内的悬浮退出按钮 (全屏时顶栏被覆盖, 必须层内可退出) */
.fs-exit-btn {
  display: none;
  position: absolute; top: 46px; right: 12px;
  z-index: 5;
  box-shadow: var(--shadow-md);
}
.topo-frame-wrap:fullscreen .fs-exit-btn,
.topo-frame-wrap.fs-overlay .fs-exit-btn { display: inline-flex; }

/* ---------- Phase 3: 仪表盘 ---------- */
.chart-card .card-body { padding: 14px 16px; }
.chart-card canvas { max-height: 240px; }

/* ---------- 响应式 ---------- */
/* 平板: 侧边栏折叠为图标栏 */
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: var(--sidebar-narrow-w) 1fr; }
  .app-shell[data-collapsed="true"] { grid-template-columns: var(--sidebar-narrow-w) 1fr; }
  .brand-text,
  .nav-item span:not(.nav-ico),
  .sidebar-foot .btn { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .brand { justify-content: center; padding-bottom: 14px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* 手机: 侧边栏变抽屉 */
@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 18, 22, .45);
    backdrop-filter: blur(2px);
    z-index: 150;
  }
  /* 折叠态隐藏所有文本 */
  .app-shell[data-collapsed="true"] .brand-text,
  .app-shell[data-collapsed="true"] .nav-item span:not(.nav-ico),
  .app-shell[data-collapsed="true"] .sidebar-foot .btn { display: revert; }
  .app-shell[data-collapsed="true"] .nav-item { justify-content: flex-start; padding: 10px 12px; }
  .app-shell[data-collapsed="true"] .brand { justify-content: flex-start; padding-bottom: 18px; }
  /* 桌面隐藏的切换按钮在手机显示 */
  .nav-toggle { display: inline-flex !important; }

  .topbar { padding: 0 var(--space-md); height: 56px; margin: var(--space-md); }
  .view-container { margin: 0 var(--space-md) var(--space-md); }
  .page-title { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-3.keep-2 { grid-template-columns: 1fr 1fr; }
  .hero { padding: 18px 20px; }
  .hero h2 { font-size: 18px; }
  .kpi { padding: 16px 18px; }
  .kpi .kpi-value { font-size: 24px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { height: 32px; padding: 0 12px; }
  .topbar-actions input[type="search"],
  .topbar-actions select { width: 100%; }
  .modal-root { padding: 12px; }
  .modal-card { width: 100%; max-height: 92vh; border-radius: var(--r-md); }
  .modal-body { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 8px; }
  .form-grid label { line-height: 1.4; padding-top: 4px; }
  .form-grid .field-full { grid-column: 1 / -1; }
  .table th, .table td { padding: 10px 12px; }
  .toast-root { top: 12px; right: 12px; left: 12px; }
  .toast { max-width: none; }
}

/* 桌面默认隐藏汉堡按钮(由 media 控制) */
.nav-toggle { display: none; }

/* ---------- 项目详情页 ---------- */
.row-link {
  color: var(--brand-700);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed transparent;
  transition: color .15s, border-color .15s;
}
.row-link:hover { color: var(--brand-700); border-bottom-color: var(--brand-700); }

/* 抬头吸顶: 详情页向下滚动时, 项目信息卡 + Tab 栏固定在内容区顶部, 不随内容滚走 */
.pd-head-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-muted); /* 与页面底色一致: 滚动时遮住下方内容, 静止时不可见 */
}
body.has-bg .pd-head-sticky {
  /* 不用毛玻璃: 直接铺同一张固定背景图, 静止时与页面背景无缝一致, 滚动时仍能遮住下方内容 */
  background: var(--app-bg-image, transparent) center / cover no-repeat fixed;
}
.pd-header .pd-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-header .pd-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.pd-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.pd-meta b { color: var(--text); font-weight: 600; }

/* 横向 Tab 导航栏 */
.pd-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: var(--r-md) var(--r-md) 0 0;
  white-space: nowrap;
  position: relative;
  transition: color .15s, background .15s;
}
.pd-tab:hover { color: var(--brand-700); background: var(--brand-30); }
.pd-tab.active {
  color: var(--brand-700);
  font-weight: 600;
}
.pd-tab.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand);
}

/* 项目详情: 页签栏与内容区合并为一张连通卡片 (页签作卡片头部, 内容紧接其下, 不再分为两块) */
#pd-tabs {
  margin: 18px 0 0;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-sm);
}
#pd-tabs .pd-tab.active::after { bottom: 0; }
/* 页签下第一张卡片: 去掉顶边/顶圆角/阴影, 与页签无缝相接 */
#pd-body > .card:first-child {
  margin-top: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
}

/* 详情卡片 */
.pd-card { margin-bottom: 16px; }
.pd-card .pd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pd-card .pd-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.pd-amount { display: flex; gap: 16px; color: var(--text-muted); font-size: 13px; }
.pd-amount b { color: var(--text); font-size: 15px; }
.pd-meta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 12px;
}
.pd-hint { color: var(--text-faint); font-size: 12px; }

/* 商务关系流程图 (项目详情 · 合同信息页签): 环节卡横向串联, 窄屏横向滚动 */
.biz-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.biz-flow { display: flex; align-items: stretch; overflow-x: auto; padding: 12px 2px 6px; }
.biz-ring { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--brand-30); border: 1px solid var(--border); border-radius: var(--r-sm); }
.biz-ring-head { font-size: 12px; font-weight: 600; color: var(--brand-700); text-align: center; }
.biz-ring-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.biz-node { position: relative; padding: 8px 24px 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.biz-node:hover { border-color: var(--brand); background: var(--brand-30); }
.biz-node-main { display: flex; flex-direction: column; gap: 2px; }
.biz-node-main b { font-size: 13px; font-weight: 600; word-break: break-all; }
.biz-node-sub { font-size: 12px; color: var(--text-faint); }
.biz-node.is-empty { padding-right: 10px; color: var(--text-faint); font-size: 12px; text-align: center; cursor: default; border-style: dashed; }
.biz-node.is-empty:hover { border-color: var(--border); background: var(--surface); }
.biz-node-del { position: absolute; top: 3px; right: 5px; padding: 0 2px; border: 0; background: transparent; color: var(--text-faint); font-size: 15px; line-height: 1; cursor: pointer; }
.biz-node-del:hover { color: var(--danger); }
.biz-ring-add { margin-top: auto; }
.biz-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; color: var(--brand); font-size: 15px; }

.table-sm th, .table-sm td { padding: 8px 12px; font-size: 12.5px; }
.table-sm thead th { color: var(--text-faint); font-weight: 500; }

/* 账户密码"查看"按钮 */
.acc-reveal { font-family: inherit; min-width: 64px; }

/* 设备图片 */
.dev-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  display: block;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.dev-thumb:hover { transform: scale(1.12); box-shadow: var(--shadow-md); }

.dev-img-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.dev-img-preview {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.dev-img-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 设备详细配置单元格 (可点击) */
.dev-config-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12.5px;
  border-radius: 6px;
  padding: 2px 4px;
  transition: background .15s, color .15s;
}
.dev-config-cell:hover { background: var(--brand-50); color: var(--brand-700); }
.dev-config-cell .badge { cursor: pointer; }

/* 合同文件行 (上传 / 查看 / 下载) */
.ct-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
.ct-file-ico {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #fff;
  background: var(--brand);
  padding: 3px 6px;
  border-radius: 5px;
}
.ct-file-name {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.ct-file-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.ct-file-pick .btn { cursor: pointer; }

@media (max-width: 720px) {
  .pd-amount { flex-direction: column; gap: 4px; }
  .pd-meta { gap: 12px; }
  .pd-tab { padding: 9px 13px; font-size: 13px; }
  .dev-thumb { width: 32px; height: 32px; }
  .dev-config-cell { font-size: 11.5px; }
  .ct-file-name { max-width: 140px; }
}

/* ---------- 项目详情 · 巡检记录 ---------- */
.insp-cfg {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.insp-cfg-title { font-weight: 600; margin-bottom: 10px; }
.insp-cfg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insp-cfg-row input[type="number"] { width: 80px; }
.insp-cfg-row input[type="date"],
.insp-cfg-row select { padding: 7px 10px; }
.insp-cfg-right { text-align: right; }
.insp-file-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.insp-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-muted);
}
.insp-file-item .name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insp-file-kind {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.7;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
}
.insp-file-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.insp-file-btns .btn { cursor: pointer; }
.insp-pending-thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--r-xs);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.insp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.insp-photo {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  cursor: zoom-in;
  background: var(--surface-muted);
}

/* ---------- 文档在线预览 (Word/Excel) ---------- */
.doc-loading { padding: 48px 0; text-align: center; color: var(--text-muted); }
.doc-preview {
  background: #fff;
  color: #24292f;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px 34px;
  max-height: 70vh;
  overflow: auto;
  font-size: 14px;
  line-height: 1.75;
}
.doc-preview img { max-width: 100%; height: auto; }
.doc-preview table { border-collapse: collapse; margin: 8px 0; max-width: 100%; }
.doc-preview table td, .doc-preview table th { border: 1px solid #d9d9d9; padding: 4px 9px; }
.doc-preview h1 { font-size: 22px; }
.doc-preview h2 { font-size: 19px; }
.doc-preview h3 { font-size: 16px; }
.doc-preview blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid #d9d9d9; color: #57606a; }
.xlsx-preview {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 70vh;
  overflow: auto;
}
.xlsx-preview .xlsx-sheet-title { font-weight: 600; margin: 10px 0 8px; font-size: 13px; color: var(--text); }
.xlsx-preview .xlsx-sheet-title:first-child { margin-top: 0; }
.xlsx-preview table { border-collapse: collapse; font-size: 12.5px; }
.xlsx-preview table td, .xlsx-preview table th {
  border: 1px solid #d9d9d9;
  padding: 3px 8px;
  white-space: nowrap;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 老格式 .doc/.ppt 文本预览 ---------- */
.doc-legacy-tip {
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 12px;
}
.doc-plain {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.9;
  font-size: 13.5px;
  color: var(--text);
}

/* ---------- PPT (.pptx) 在线预览: 幻灯片等比卡片 + 形状绝对定位 ---------- */
.pptx-preview { display: flex; flex-direction: column; gap: 16px; }
.pptx-slide {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(30, 16, 51, .07);
}
.pptx-no {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 2;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(30, 16, 51, .3);
  color: #fff;
  font-size: .78em;
  line-height: 1.75;
  opacity: .75;
}
.pptx-shape { position: absolute; overflow: hidden; }
.pptx-text { display: flex; flex-direction: column; }
.pptx-text > div { line-height: 1.3; }
.pptx-tbl { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-size: 1.2em; }
.pptx-tbl td {
  border: 1px solid rgba(30, 16, 51, .18);
  padding: .12em .35em;
  vertical-align: middle;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.3;
}

/* ---------- 自定义背景图 · 磨砂玻璃导航 ---------- */
body.has-bg {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.has-bg .sidebar {
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-right-color: rgba(255, 255, 255, .45);
}
body.has-bg .brand { border-bottom-color: rgba(110, 112, 128, .16); }
body.has-bg .brand-text { color: #eceef4; }
body.has-bg .nav-item { color: #eceef4; }
body.has-bg .nav-ico { color: #c6cad8; }
body.has-bg .nav-item:hover { background: rgba(255, 255, 255, .35); color: #fff; }
body.has-bg .nav-item.active {
  background: var(--brand);
  color: #fff;
}
body.has-bg .nav-item.active .nav-ico { color: #fff; }
body.has-bg .sidebar-foot { border-top-color: rgba(110, 112, 128, .16); }
body.has-bg .sidebar-foot .btn { color: #eceef4; }
body.has-bg .sidebar-foot .btn:hover { background: rgba(255, 255, 255, .35); color: #fff; }
body.has-bg .sidebar-foot .btn.active { color: #fff; background: var(--brand); }

/* 侧栏底部按钮间距 (设置 / 锁定) */
.sidebar-foot .btn + .btn { margin-top: 8px; }

/* 设置页: 背景图预览 */
.settings-card { max-width: 780px; }
.settings-bg-preview {
  margin-top: 4px;
  height: 230px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-bg-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 圆角悬浮 (所有卡片/板块/顶栏: 悬停仅加深阴影, 不做位移/晃动) ---------- */
.hero { transition: box-shadow .2s; } /* .card/.topbar 的过渡已在各自规则处定义 */
.card:hover,
.topbar:hover,
.hero:hover {
  box-shadow: var(--shadow-md);
}

/* ---------- 待办事项 (月/周/天日历 + 四象限 + 图片) ---------- */
/* 象限色: qd-1 重要且紧急 / qd-2 重要不紧急 / qd-3 紧急不重要 / qd-4 不重要不紧急 / qd-0 未分类 */
.qd-1 { --qc: #f53f3f; --qc-bg: rgba(245, 63, 63, .12); --qc-solid: #ffe7e7; }
.qd-2 { --qc: #1677ff; --qc-bg: rgba(22, 119, 255, .12); --qc-solid: #e0eeff; }
.qd-3 { --qc: #ff8f1f; --qc-bg: rgba(255, 143, 31, .14); --qc-solid: #fff0dc; }
.qd-4 { --qc: #8a93a6; --qc-bg: rgba(138, 147, 166, .16); --qc-solid: #e9ecf1; }
.qd-0 { --qc: #98a0aa; --qc-bg: rgba(152, 160, 170, .18); --qc-solid: #eef1f5; }
[data-theme="dark"] .qd-1 { --qc-bg: rgba(245, 63, 63, .20); --qc-solid: #45222c; }
[data-theme="dark"] .qd-2 { --qc-bg: rgba(22, 119, 255, .22); --qc-solid: #172f4d; }
[data-theme="dark"] .qd-3 { --qc-bg: rgba(255, 143, 31, .20); --qc-solid: #453320; }
[data-theme="dark"] .qd-4 { --qc-bg: rgba(138, 147, 166, .22); --qc-solid: #2d3240; }
[data-theme="dark"] .qd-0 { --qc-bg: rgba(152, 160, 170, .22); --qc-solid: #2b3038; }
.qd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--qc, #98a0aa); display: inline-block; flex-shrink: 0; }

/* ---------- 待办计划: 三栏布局 (待办清单 / 日程安排 / 十字管理矩阵) ---------- */
/* 待办页铺满可视区: 取消内容列限宽居中, 顶栏同步铺满以保持左右对齐 */
.view-container.view-wide { max-width: none; margin-left: var(--space-lg); margin-right: var(--space-lg); }
.content:has(> .view-container.view-wide) > .topbar {
  max-width: none;
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}
.todo-cols {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 5fr) minmax(0, 3.6fr);
  gap: 14px;
  /* 铺满可视高度: 减去 顶栏(上边距 + 高度) 与 内容底部边距 */
  height: calc(100vh - var(--topbar-h) - var(--space-lg) * 2);
  height: calc(100dvh - var(--topbar-h) - var(--space-lg) * 2);
}
.todo-col { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.todo-col-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.todo-col-title { font-weight: 600; font-size: 14px; }
.todo-col-new { margin-left: auto; }
.todo-counts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-count {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 9px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted); font-size: 12px; cursor: pointer;
}
.td-count b { color: var(--text); font-size: 12.5px; }
.td-count:hover { border-color: var(--border-strong); }
.td-count.on { border-color: transparent; background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.td-count.on b { color: var(--brand-700); }
.todo-col-body {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.tt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-title { font-weight: 600; font-size: 15px; }
.tt-date { color: var(--text-faint); font-size: 12px; }
.tt-count {
  margin-left: auto; flex-shrink: 0;
  min-width: 22px; height: 22px; line-height: 22px; text-align: center; padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-700);
  font-size: 12px; font-weight: 600;
}
.tt-list { display: flex; flex-direction: column; gap: 2px; }
.tt-item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 8px 8px 8px 6px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background .15s, border-color .15s;
}
.tt-item:hover { background: var(--surface-muted); border-color: var(--border); }
.tt-item.done { opacity: .72; }
.tt-item.done .tt-title-text { text-decoration: line-through; }
.tt-click { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.tt-row1 { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; font-weight: 500; line-height: 1.45; }
.tt-title-text { min-width: 0; word-break: break-word; }
.tt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-left: 15px; color: var(--text-faint); font-size: 11.5px; }
.tt-span { color: var(--brand-700); background: var(--brand-50); border-radius: var(--r-pill); padding: 0 7px; }
.tt-thumbs { display: flex; align-items: center; gap: 4px; padding-left: 15px; }
.todo-col-body .td-thumb { width: 34px; height: 34px; }
.tt-act {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: var(--text-faint);
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tt-act:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
/* 过期项: 延期 + 完成 双操作按钮纵向排列 (窄面板) */
.tt-acts { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.tt-due { color: var(--text-muted); }
.tt-empty { color: var(--text-faint); font-size: 12.5px; text-align: center; padding: 30px 0; }
.tt-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); }

/* 矩阵栏: 四象限 2x2 网格 (与未分类区各占一半高度) */
.mtx-grid {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px;
}
/* 未分类区: 与四象限区各占一半 */
.todo-matrix > .mtx-cell { flex: 1 1 0; min-height: 0; }
.mtx-cell {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.mtx-head {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: var(--qc-bg); color: var(--qc);
  font-size: 12.5px; font-weight: 600;
}
.mtx-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtx-n {
  margin-left: auto; flex-shrink: 0;
  min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--surface); color: var(--qc);
  font-size: 11px; font-weight: 600;
}
.mtx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.mtx-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-xs, 4px);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.mtx-item:hover { background: var(--brand-30); border-color: var(--border); }
.mtx-item.done { opacity: .6; }
.mtx-item.done .mtx-title { text-decoration: line-through; }
.mtx-title { font-size: 12.5px; font-weight: 500; line-height: 1.4; word-break: break-word; }
.mtx-meta { color: var(--text-faint); font-size: 11px; }
.mtx-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 14px 0; }

/* 日历日期点击弹窗: 当天待办 (复用今日事项列表样式) */
.dm-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dm-body .tt-empty { padding: 24px 0; }
.cal-cell[data-dayk], .wk-col[data-dayk] { cursor: pointer; }

/* 窄屏: 三栏改为上下堆叠 (待办清单 → 日程安排 → 矩阵) */
@media (max-width: 1100px) {
  .todo-cols { grid-template-columns: 1fr; height: auto; }
  .todo-col { overflow: visible; }
  .todo-col-body { overflow: visible; }
  /* 窄屏无固定高度: 取消 flex 均分, 改由内容撑开 */
  .mtx-grid, .todo-matrix > .mtx-cell { flex: none; }
  .mtx-grid { min-height: 260px; }
  .tt-empty { padding: 16px 0; }
}

/* ---------- 待办弹窗: 横向排版 (色板 / 大标题 / 横向控件行) ---------- */
.todo-form { display: flex; flex-direction: column; gap: 12px; }
.tf-colors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-color {
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  border: none; border-radius: var(--r-sm);
  background: var(--tc, #98a0aa); cursor: pointer;
  transition: box-shadow .15s, opacity .15s;
}
.tf-color:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 22%, transparent); }
.tf-color.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tc); }
.tf-title {
  width: 100%; min-height: 84px; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.6;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.tf-title:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.tf-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tf-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 160px; }
.tf-cell-due { flex: 1 1 200px; }
.tf-cell-sm { flex: 0 0 110px; }
.tf-cell-grow { flex: 1 1 100%; }
.tf-label { color: var(--text-faint); font-size: 12px; }
.tf-cell input[type="number"], .tf-cell select, .tf-cell textarea {
  width: 100%; font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 10px;
}
.tf-cell textarea { resize: vertical; }
.tf-more { border-top: 1px dashed var(--border); padding-top: 10px; }
.tf-more > summary { cursor: pointer; color: var(--text-muted); font-size: 12.5px; user-select: none; }
.tf-more-body { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
/* footer: 左「循环任务」, 右 取消/保存 */
.todo-form-foot [data-cycle] { margin-right: auto; }
/* 循环任务弹窗 */
.modal-root.layer-root { z-index: 1200; }   /* 叠加在待办弹窗之上, 不覆盖其 DOM */
.cycle-form { display: flex; flex-direction: column; gap: 16px; }
.cf-sec { display: flex; flex-direction: column; gap: 8px; }
.cf-sec[hidden] { display: none; }
.cf-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.cf-inline .cf-input { width: 88px; }
.cf-next {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--brand-30); font-size: 13px;
}
.cf-next b { color: var(--brand-700); font-weight: 600; }
.cf-label .cf-hint { font-weight: 400; }
.cf-label { font-size: 13px; font-weight: 600; color: var(--text); }
.cf-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cf-allday { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.cf-allday input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.cf-input {
  width: 100%; font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 11px;
}
.cf-input:disabled { background: var(--surface-muted); color: var(--text-faint); }
.cf-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.cf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-hint { color: var(--text-faint); font-size: 11.5px; }
.cf-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cf-seg button {
  appearance: none; cursor: pointer; font-size: 13px;
  height: 36px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-muted);
}
.cf-seg button:hover { border-color: var(--border-strong); }
.cf-seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.cf-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cf-day {
  appearance: none; cursor: pointer; font-size: 12px;
  height: 34px; padding: 0 2px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted);
}
.cf-day:hover { border-color: var(--border-strong); }
.cf-day.on { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); font-weight: 600; }
@media (max-width: 640px) {
  .cf-days { grid-template-columns: repeat(4, 1fr); }
}
/* 任务颜色: 列表项色条 (未设置时回退象限色) */
.tt-item.has-tc { box-shadow: inset 3px 0 0 0 var(--tc); }
.mtx-item.has-tc { box-shadow: inset 3px 0 0 0 var(--tc); }

/* 工具栏 (中栏卡片内): 视图切换 / 日期导航 / 状态/象限筛选 */
.todo-toolbar {
  background: var(--surface);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.todo-tb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.todo-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.todo-seg button {
  appearance: none; border: none; background: var(--surface);
  color: var(--text-muted); height: 30px; padding: 0 18px;
  font-size: 13px; cursor: pointer;
}
.todo-seg button + button { border-left: 1px solid var(--border); }
.todo-seg button:hover { background: var(--surface-muted); color: var(--text); }
.todo-seg button.on { background: var(--brand); color: #fff; font-weight: 600; }
.todo-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.todo-period { color: var(--text-muted); font-size: 13px; font-weight: 500; margin-left: 6px; }
.todo-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.todo-filter-label { color: var(--text-faint); font-size: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.on { border-color: transparent; background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.chip.qd-chip.on { background: var(--qc-bg); color: var(--qc); }
.q-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px;
  border-radius: var(--r-pill);
  background: var(--qc-bg); color: var(--qc);
  font-size: 12px; line-height: 1.6;
}
.q-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--qc); }

/* 月视图: 每周一个 7 列网格; 跨天条绝对定位叠加在网格上 */
.cal-week-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding-bottom: 8px; color: var(--text-faint); font-size: 12px; text-align: center; }
.cal-month { display: flex; flex-direction: column; gap: var(--cal-gap, 6px); --cal-gap: 6px; }
.cal-week {
  position: relative;
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--cal-gap);
  --cal-gap: 6px;
  --cal-bar-top: 31px;   /* 单元格上内边距 5 + 日期头 22 + 间隙 4 */
  --cal-bar-h: 17px;
  --cal-bar-step: 19px;
}
.cal-lane-pad { height: calc(var(--lanes) * var(--cal-bar-step)); flex-shrink: 0; }
/* 跨天横向色条: 横跨多日格子; --col/--span 定横向, --lane 定纵向泳道 */
.cal-bar {
  position: absolute; z-index: 2;
  left: calc((100% + var(--cal-gap)) / 7 * var(--col));
  width: calc((100% + var(--cal-gap)) / 7 * var(--span) - var(--cal-gap));
  top: calc(var(--cal-bar-top) + var(--lane) * var(--cal-bar-step));
  height: var(--cal-bar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px;
  border: none; border-left: 3px solid var(--tc, var(--qc, #98a0aa));
  border-radius: 5px;
  background: var(--qc-solid, #eef1f5);
  color: var(--text);
  font-size: 11px; text-align: left; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 20, 40, .10);
}
.cal-bar:hover { filter: brightness(.96); }
.cal-bar.done { opacity: .55; }
.cal-bar.done .cal-bar-t { text-decoration: line-through; }
.cal-bar-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bar-days { flex: 0 0 auto; font-style: normal; font-size: 10px; opacity: .7; }
.cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-cell {
  min-height: 96px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 5px 6px 6px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, box-shadow .15s;
}
.cal-cell:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.cal-cell.out { background: var(--surface-sunken); }
.cal-cell.today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.cal-cell-head { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.cal-cell-head > .cal-date, .cal-cell-head > .cal-add, .cal-cell-head > .hd-tag { flex-shrink: 0; }
.cal-cell-head > .cal-add { margin-left: auto; }
.cal-date {
  appearance: none; border: none; background: transparent;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 50%; cursor: pointer; padding: 0;
}
.cal-date:hover { background: var(--surface-muted); color: var(--text); }
.cal-cell.today .cal-date { background: var(--brand); color: #fff; }
.cal-add {
  appearance: none; border: none; cursor: pointer;
  width: 20px; height: 20px; line-height: 1; padding: 0;
  border-radius: var(--r-xs);
  background: var(--brand-50); color: var(--brand-700);
  font-size: 14px; opacity: 0; transition: opacity .15s;
}
.cal-cell:hover .cal-add, .wk-col:hover .cal-add { opacity: 1; }
.cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip {
  appearance: none; border: none; cursor: pointer;
  display: block; width: 100%; text-align: left;
  border-left: 3px solid var(--tc, var(--qc, #98a0aa));
  background: var(--qc-bg, rgba(152, 160, 170, .18));
  color: var(--text);
  font-size: 11.5px; line-height: 1.5;
  padding: 2px 6px; border-radius: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip:hover { filter: brightness(.97); }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-more {
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--brand-700); font-size: 11px; text-align: left; padding: 0 4px;
}

/* 节假日 / 调休标记 (休=红 / 班=灰; 节日名仅放假类型展示) */
.hd-tag {
  display: inline-block; flex-shrink: 0;
  width: 15px; height: 15px; line-height: 15px;
  border-radius: 4px; text-align: center;
  font-size: 10px; font-style: normal; font-weight: 600; color: #fff;
}
.hd-tag.off { background: var(--danger); }
.hd-tag.work { background: #8a93a6; }
.hd-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--danger); }
.cal-cell.holiday .cal-date, .wk-col.holiday .wk-col-head b { color: var(--danger); }
.hd-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; line-height: 1.7; }
.hd-pill.off { background: rgba(245, 63, 63, .10); color: var(--danger); }
.hd-pill.work { background: rgba(138, 147, 166, .16); color: #6b7488; }

/* 周视图 (七列; 窄屏横向滚动) */
.wk-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px;
  --cal-gap: 8px;
  --cal-bar-top: 35px;   /* 列内边距 8 + 列头 27 */
  --cal-bar-h: 17px;
  --cal-bar-step: 19px;
}
.wk-lane-pad { height: calc(var(--lanes) * var(--cal-bar-step)); flex-shrink: 0; }
.wk-col {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: 8px;
  display: flex; flex-direction: column; gap: 6px; min-height: 180px;
}
.wk-col.today { border-color: var(--brand); }
.wk-col-head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--border);
  font-size: 12px; color: var(--text-muted);
}
.wk-col-head b { color: var(--text); font-size: 13px; }
.wk-col-head .cal-add { margin-left: auto; }
.wk-col-body { display: flex; flex-direction: column; gap: 6px; }
.wk-card {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--tc, var(--qc, #98a0aa));
  border-radius: var(--r-sm);
  background: var(--surface-muted);
  padding: 6px 8px;
  transition: box-shadow .15s;
}
.wk-card:hover { box-shadow: var(--shadow-sm); }
.wk-title { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-card.done .wk-title { opacity: .55; text-decoration: line-through; }
.wk-meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); }
.wk-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 12px 0; }

/* 天视图 */
.td-day-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.td-day-title { font-weight: 600; font-size: 14px; }
.td-day-count { color: var(--text-faint); font-size: 12.5px; }
.td-day-head .btn { margin-left: auto; }
.td-list { display: flex; flex-direction: column; gap: 10px; }
.td-card {
  display: flex; gap: 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--tc, var(--qc, #98a0aa));
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 12px 14px;
}
.td-card.done { background: var(--surface-muted); }
.td-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.td-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.td-card.done .td-title-text { opacity: .6; text-decoration: line-through; }
.td-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-muted); font-size: 12.5px; }
.td-card-remark { color: var(--text-muted); font-size: 12.5px; white-space: pre-wrap; }
.td-card-thumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.td-thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  cursor: zoom-in; background: var(--surface-muted);
}
.td-thumb-more { color: var(--text-faint); font-size: 12px; }
.td-card-acts { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* 详情弹窗 */
.td-detail-title { font-weight: 600; font-size: 15px; }
.td-detail-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-muted); font-size: 12.5px; margin: 6px 0 10px; }
.td-detail-meta b { color: var(--text); font-weight: 600; }
.td-detail-remark {
  white-space: pre-wrap;
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px;
  margin-bottom: 10px;
}
.td-detail-sec { font-weight: 600; margin: 14px 0 8px; }

@media (max-width: 640px) {
  .todo-toolbar { padding: 12px; }
  .todo-nav { margin-left: 0; }
  .cal-month, .cal-week-head { gap: 3px; }
  .cal-week { --cal-gap: 3px; --cal-bar-top: 29px; --cal-bar-h: 14px; --cal-bar-step: 16px; }
  .wk-grid { --cal-bar-h: 14px; --cal-bar-step: 16px; }
  .cal-bar { font-size: 9.5px; padding: 0 4px; border-left-width: 2px; }
  .cal-bar-days { display: none; } /* 手机端省空间, 天数见天视图/详情 */
  .cal-cell { min-height: 74px; padding: 3px; border-radius: var(--r-sm); }
  .cal-chip { font-size: 10px; padding: 1px 3px; border-left-width: 2px; }
  .cal-date { width: 18px; height: 18px; line-height: 18px; font-size: 11px; }
  .cal-add { display: none; } /* 手机端用顶部「新建待办」或进入天视图添加 */
  .hd-name { display: none; } /* 手机端只保留 休/班 徽标, 节日名见天视图/弹窗 */
  .hd-tag { width: 13px; height: 13px; line-height: 13px; font-size: 9px; border-radius: 3px; }
  .td-card { flex-direction: column; }
  .td-card-acts { flex-direction: row; flex-wrap: wrap; }
  .td-day-head .btn { margin-left: 0; }
}

/* ---------- 滚轮式日期时间选择 (到期时间) ---------- */
.dt-field { position: relative; }
.dt-trigger {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
}
.dt-trigger:hover { border-color: var(--border-strong); }
.dt-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 340px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 10px 10px 8px;
}
.dt-panel.inline { position: static; margin-top: 6px; }   /* 空间不足时内嵌展开 */
.dt-wheels { position: relative; display: flex; gap: 2px; }
.dt-col {
  flex: 1; height: 200px; overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding: 80px 0; box-sizing: border-box;   /* 上下留白 = 可视高度的居中垫层 */
  scrollbar-width: none;
}
.dt-col::-webkit-scrollbar { display: none; }
.dt-item {
  height: 40px; line-height: 40px; text-align: center;
  font-size: 14px; color: var(--text-muted); cursor: pointer;
  scroll-snap-align: center; border-radius: 8px;
  user-select: none;
}
.dt-item.on { color: var(--brand); font-weight: 600; }
.dt-band {
  position: absolute; left: 0; right: 0; top: 80px; height: 40px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  pointer-events: none;
}
.dt-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

@media (max-width: 640px) {
  .dt-panel { width: min(320px, calc(100vw - 56px)); }
}

/* ---------- 项目管理: 左侧销售列表 + 右侧项目表格 ---------- */
.proj-split {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.proj-sales-card { position: sticky; top: 0; }
/* 表格列多, 分栏后横向紧凑: 收紧单元格内边距 */
.proj-split .table th, .proj-split .table td { padding: 11px 12px; }
/* 表格区在卡片内滚动: 列多时横向滚动, 保证 操作 列完整可点 */
.proj-table-wrap { overflow-x: auto; }

/* 桌面: 两卡片固定高度 (同资料页/快速支持页): 视口 - 顶栏 - 内容区留白;
   不随数据多少伸缩, 超高内容在卡片内部滚动 */
@media (min-width: 901px) {
  .proj-split {
    height: calc(100vh - var(--topbar-h) - var(--space-lg) * 3);
    height: calc(100dvh - var(--topbar-h) - var(--space-lg) * 3);
    min-height: 400px;
    align-items: stretch;
  }
  .proj-sales-card,
  .proj-main-card { display: flex; flex-direction: column; min-height: 0; }
  .proj-main-card > .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .proj-main-card .proj-table-wrap { flex: 1; min-height: 0; overflow: auto; }
}

.proj-sales-list {
  padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.ps-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text);
  font-size: 13px; font-family: inherit; text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ps-item:hover { background: var(--surface-muted); }
.ps-item.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.ps-av {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
}
.ps-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-n {
  flex-shrink: 0; min-width: 22px; height: 20px; line-height: 20px; padding: 0 7px;
  text-align: center; border-radius: var(--r-pill);
  background: var(--surface-muted); color: var(--text-faint);
  font-size: 11.5px; font-weight: 600;
}
.ps-item.on .ps-n { background: var(--brand); color: #fff; }

/* 窄屏: 上下堆叠, 销售列表改为横向滚动胶囊 */
@media (max-width: 900px) {
  .proj-split { grid-template-columns: 1fr; gap: 14px; }
  .proj-sales-card { position: static; }
  .proj-sales-list {
    flex-direction: row;
    max-height: none; overflow-y: hidden; overflow-x: auto;
    padding: 10px 12px;
  }
  .ps-item { width: auto; flex-shrink: 0; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-muted); }
  .ps-item.on { background: var(--brand-50); }
  .ps-av { display: none; }
}

/* ---------- 资料管理: 群晖 NAS 文件浏览器 (左目录树 + 右文件目录) ---------- */
.nas-split {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 16px;
  /* 两卡片固定高度: 视口 - 顶栏(含上下留白) - 内容区底部留白; 不随内容多少伸缩 */
  height: calc(100vh - var(--topbar-h) - var(--space-lg) * 3);
  height: calc(100dvh - var(--topbar-h) - var(--space-lg) * 3);
  min-height: 400px;
}
.nas-tree-card,
.nas-main-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.nas-tree {
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow-y: auto; /* 目录树在卡片内部滚动 */
}
/* 未配置时右侧内嵌的连接表单: 同样限高, 超高时卡片内滚动 */
.nas-main-card > .card-body { flex: 1; min-height: 0; overflow-y: auto; }
.nas-tree-hint { padding: 10px 12px; color: var(--text-faint); font-size: 12.5px; line-height: 1.6; }

/* 目录树节点 */
.nas-item { display: block; }
.nas-node {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nas-node:hover { background: var(--surface-muted); }
.nas-node.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.nas-arrow {
  flex-shrink: 0; width: 14px; text-align: center;
  color: var(--text-faint); font-size: 10px; line-height: 1;
}
.nas-ico { flex-shrink: 0; font-size: 13px; line-height: 1; }
.nas-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nas-children { margin-left: 14px; border-left: 1px dashed var(--border); padding-left: 2px; }

/* 右侧工具栏 */
.nas-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.nas-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; font-size: 13px; }
.nas-crumb {
  border: none; background: transparent; color: var(--brand-700);
  font-family: inherit; font-size: 13px; padding: 2px 4px;
  border-radius: var(--r-sm); cursor: pointer;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nas-crumb:hover { background: var(--brand-50); }
.nas-crumb.last { color: var(--text); font-weight: 600; cursor: default; }
.nas-sep { color: var(--text-faint); font-size: 11px; }
.nas-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* 工具栏左侧导航组: 上级 / 刷新 */
.nas-tb-nav { display: flex; align-items: center; gap: 4px; flex: none; }
.nas-icon-btn {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-muted);
  font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.nas-icon-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-muted); }

/* 视图切换 (图标 / 列表): 选中态高亮 */
.nas-viewseg {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-muted);
}
.nas-view-btn {
  width: 28px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-xs);
  background: transparent; color: var(--text-faint);
  font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.nas-view-btn:hover { color: var(--text); }
.nas-view-btn.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

/* 搜索组 (输入框 + 搜索按钮) */
.nas-search { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* 面包屑行: 路径 + 条目计数 */
.nas-crumbrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.nas-crumbrow .nas-crumbs { flex: 1 1 auto; }

/* 图标模式: 卡片网格 */
.nas-grid-wrap { flex: 1; min-height: 0; overflow: auto; }
.nas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  align-content: start;
}
.nas-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 8px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.nas-cell:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.nas-cell-main {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; padding: 0; border: none; background: transparent; color: var(--text);
  font-family: inherit; cursor: pointer;
}
.nas-cell-ico { font-size: 34px; line-height: 1; }
.nas-cell-name {
  width: 100%; text-align: center; font-size: 12.5px; line-height: 1.4; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nas-cell-sub {
  width: 100%; text-align: center; font-size: 11.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nas-cell-ops { display: flex; align-items: center; gap: 2px; opacity: .7; transition: opacity .15s; }
.nas-cell:hover .nas-cell-ops { opacity: 1; }
.nas-cbtn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.nas-cbtn:hover { background: var(--brand-50); color: var(--brand-700); }
.nas-cbtn-danger:hover { background: rgba(245, 63, 63, .12); color: var(--danger); }
.nas-empty {
  grid-column: 1 / -1;
  padding: 64px 16px; text-align: center;
  color: var(--text-faint); font-size: 13px;
}
.nas-grid-more { grid-column: 1 / -1; padding: 6px 0; text-align: center; color: var(--text-faint); font-size: 12.5px; }

/* 文件表格 (卡片内滚动区; 表头 sticky 相对它生效) */
.nas-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.nas-col-size { width: 110px; }
.nas-col-time { width: 150px; }
.nas-col-ops { width: 230px; text-align: right; }
.nas-dim { color: var(--text-muted); white-space: nowrap; }
.nas-entry {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  border: none; background: transparent; color: var(--text);
  font-family: inherit; font-size: 13px; text-align: left;
  padding: 4px 6px; margin: -4px -6px;
  border-radius: var(--r-sm); cursor: pointer;
}
.nas-entry:hover { background: var(--brand-50); color: var(--brand-700); }
.nas-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 搜索: 工具栏输入框 + 结果提示条 + 结果行的所在目录副标题 */
.nas-q-input {
  width: 190px; max-width: 40vw;
  padding: 6px 10px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
}
.nas-q-input:focus { outline: none; border-color: var(--brand); }
.nas-search-info {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 12.5px; color: var(--text-muted);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}
.nas-entry-s { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
.nas-entry-s .nas-line1 { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.nas-entry-s .nas-sub {
  font-size: 11.5px; color: var(--text-faint);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 连接目录 (设置行 + 目录选择器) */
.nas-dir-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nas-dir-row .nas-f-dir { flex: 1; min-width: 0; }
.nas-pick-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; margin-bottom: 10px; }
.nas-pick-list {
  max-height: 44vh; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.nas-pick-item {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px 0 10px; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 13px;
}
.nas-pick-item:last-child { border-bottom: none; }
.nas-pick-item:hover { background: var(--brand-50); }
.nas-pick-item.on { background: var(--brand-50); }
.nas-pick-cb { display: inline-flex; align-items: center; padding: 10px 4px 10px 0; cursor: pointer; }
.nas-pick-cb input { cursor: pointer; }
.nas-pick-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border: none; background: transparent; color: inherit;
  font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.nas-pick-name .nas-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nas-pick-name:hover .nas-label { color: var(--brand-700); }
.nas-pick-item .nas-arrow { cursor: pointer; color: var(--text-faint); flex: none; }
.nas-pick-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.nas-pick-sum { flex: 1; min-width: 140px; font-size: 12.5px; color: var(--text-muted); }

/* 预览弹窗 */
.nas-preview { display: flex; justify-content: center; }
.nas-preview img { max-width: 100%; max-height: 70vh; border-radius: var(--r-sm); }
.nas-pdf { width: 100%; height: 70vh; border: none; border-radius: var(--r-sm); background: #fff; }
.nas-text {
  width: 100%; max-height: 60vh; overflow: auto;
  margin: 0; padding: 14px 16px;
  background: var(--surface-sunken); border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}

/* 连接设置表单 */
.nas-setup-msg { margin: 0 0 14px; color: var(--text-muted); font-size: 13px; }
.nas-setup-actions { display: flex; gap: 10px; margin-top: 8px; }
.nas-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 36px; color: var(--text); cursor: pointer; }
.nas-check input { width: auto; }
.nas-prompt-input { width: 100%; }
.nas-retry { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }

/* 窄屏: 上下堆叠; 不锁定整体高度, 目录树限高, 文件卡片固定高度 */
@media (max-width: 900px) {
  .nas-split { grid-template-columns: 1fr; gap: 14px; height: auto; min-height: 0; }
  .nas-tree { max-height: 260px; }
  .nas-main-card { height: min(65vh, 560px); }
  .nas-toolbar .nas-tools { margin-left: 0; }
  .nas-search { flex: 1 1 160px; }
  .nas-q-input { width: 100%; max-width: none; }
  .nas-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; padding: 12px; }
  .nas-cell { padding: 12px 8px 6px; }
  .nas-col-time { display: none; }
  .nas-col-size { width: 84px; }
  .nas-col-ops { width: auto; }
}

/* ---------- 快速支持: 细节问题知识库 (左页面目录 + 右内容) ---------- */
.sp-split {
  display: grid;
  /* 左目录列: 随窗口自适应 (280~360px), 长标题可较完整显示; 更宽窗口不无限占宽 */
  grid-template-columns: clamp(280px, 26vw, 360px) minmax(0, 1fr);
  gap: 16px;
  /* 两卡片固定高度 (同资料页): 视口 - 顶栏 - 内容区留白 */
  height: calc(100vh - var(--topbar-h) - var(--space-lg) * 3);
  height: calc(100dvh - var(--topbar-h) - var(--space-lg) * 3);
  min-height: 420px;
}

/* 快速支持: 隐藏全局顶栏 (标题已含于内容卡片), 桌面内容区用满高度;
   手机 (≤720px) 保留顶栏, 保证汉堡菜单按钮可用 */
@media (min-width: 721px) {
  .content.no-topbar .topbar { display: none; }
  .content.no-topbar .view-container { margin-top: var(--space-lg); }
}
@media (min-width: 901px) {
  .content.no-topbar .sp-split {
    height: calc(100vh - var(--space-lg) * 2);
    height: calc(100dvh - var(--space-lg) * 2);
  }
}
.sp-tree-card,
.sp-main-card { display: flex; flex-direction: column; min-height: 0; }
.sp-main-card { position: relative; } /* 悬浮目录的定位基准 */
.sp-tree { flex: 1; min-height: 0; padding: 8px; overflow-y: auto; }

/* 搜索框 (标题/内容关键字) */
.sp-search { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sp-search input {
  width: 100%; height: 30px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 12.5px;
}
.sp-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-30); }

/* 搜索结果列表 (替换目录树显示) */
.sp-results-count { padding: 6px 8px 4px; font-size: 12px; color: var(--text-faint); }
.sp-result { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.sp-result:hover { background: var(--surface-muted); }
.sp-result.on { background: var(--brand-50); }
.sp-result-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-result-snippet {
  margin-top: 3px; font-size: 12px; color: var(--text-muted); line-height: 1.6; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 搜索关键字高亮 (全局: 各搜索结果/正文命中处共用) */
mark {
  background: rgba(255, 205, 60, .5);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 600;
}

/* 页面目录树节点 */
.sp-item { display: block; }
.sp-node {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sp-node:hover { background: var(--surface-muted); }
.sp-node.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.sp-arrow {
  flex-shrink: 0; width: 14px; text-align: center;
  color: var(--text-faint); font-size: 10px; line-height: 1;
}
.sp-arrow.void { cursor: default; }
.sp-ico { flex-shrink: 0; font-size: 12px; line-height: 1; }
.sp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-children { margin-left: 14px; border-left: 1px dashed var(--border); padding-left: 2px; }

/* 节点操作按钮 (悬停显示; 触屏常显) */
.sp-ops { display: none; align-items: center; gap: 2px; flex-shrink: 0; }
.sp-node:hover .sp-ops { display: inline-flex; }
.sp-op {
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted);
  border-radius: var(--r-xs); cursor: pointer; font-size: 12px;
}
.sp-op:hover { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); }
@media (hover: none) { .sp-ops { display: inline-flex; } }

/* 右侧头部 + 工具栏 */
/* 文档式布局: 标题/内容统一为居中列 (宽屏两侧留白对称), 操作按钮固定卡片右上角 */
.sp-head {
  position: relative;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.sp-head-l { max-width: 900px; margin: 0 auto; padding: 0 128px; text-align: center; }
.sp-title {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--text-faint); }
.sp-head-ops { position: absolute; top: 12px; right: 16px; display: flex; gap: 8px; }
.sp-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}
.sp-tbtn {
  height: 30px; min-width: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-xs);
  background: transparent; color: var(--text);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.sp-tbtn:hover { background: var(--surface); border-color: var(--border-strong); }
.sp-tsep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 6px; }

/* 内容区 (卡片内滚动) + 空状态 */
.sp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.sp-empty {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 13px; text-align: center;
}
.sp-ask-msg { margin: 0; color: var(--text-muted); font-size: 13px; }
.sp-img-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* 查看内容 / 编辑区 排版 (共用; 居中列, 宽屏两侧留白对称) */
.sp-content, .sp-editor { max-width: 900px; margin-left: auto; margin-right: auto; font-size: 13.5px; line-height: 1.75; color: var(--text); word-break: break-word; }

/* 文章结束线 (正文末尾默认显示, 代表文章结束; 查看/编辑模式通用) */
.sp-endline {
  max-width: 900px; margin: 30px auto 12px;
  border-top: 1px solid var(--border-strong);
}
.sp-editor { min-height: 340px; outline: none; caret-color: var(--brand); }
.sp-editor:empty::before { content: '在这里输入内容…'; color: var(--text-faint); }

/* 悬浮文档目录 (查看模式: 内容卡片右上角悬浮; 高亮随正文滚动同步; 点击跳转) */
.sp-toc {
  position: absolute; top: 76px; right: 12px; z-index: 30;
  width: 172px; max-height: calc(100% - 92px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sp-toc-head {
  padding: 8px 12px 6px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-faint);
}
.sp-toc-list { overflow-y: auto; padding: 5px 0; }
.sp-toc-item {
  display: block; padding: 4px 10px;
  border-left: 2px solid transparent; text-decoration: none;
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-toc-item.lv2 { padding-left: 22px; font-size: 11.5px; }
.sp-toc-item.lv3 { padding-left: 34px; font-size: 11px; }
.sp-toc-item.lv4 { padding-left: 46px; font-size: 11px; }
.sp-toc-item:hover { color: var(--brand); background: var(--brand-30); }
.sp-toc-item.on { color: var(--brand-700); border-left-color: var(--brand); background: var(--surface-muted); font-weight: 600; }
/* 目录跳转落点留白 */
.sp-content h1, .sp-content h2, .sp-content h3, .sp-content h4, .sp-content p, .sp-content li, .sp-content blockquote { scroll-margin-top: 14px; }
.sp-toc.off { display: none; } /* 手动隐藏目录 */
@media (max-width: 900px) { .sp-toc, #sp-toc-toggle { display: none; } } /* 手机端目录与其按钮一并隐藏 */
/* 目录展开时: 正文区让出右侧空间, 目录停靠其中, 不遮挡内容 (200 = 目录 172 + 贴边 12 + 间距) */
@media (min-width: 901px) {
  .sp-main-card.sp-toc-open .sp-body { padding-right: 200px; }
}
/* 悬浮操作按钮 (查看模式: 内容卡片右下角; 返回顶部 / 目录显隐) */
.sp-fabs {
  position: absolute; bottom: 18px; right: 12px; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
}
.sp-fab {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
  color: var(--text-muted); font-size: 15px; line-height: 1;
}
.sp-fab:hover { color: var(--brand); border-color: var(--brand); }
.sp-fab.on { color: var(--brand-700); border-color: var(--brand); background: var(--brand-30); }
.sp-content h1, .sp-editor h1 { margin: 22px 0 10px; font-size: 22px; line-height: 1.4; }
.sp-content h2, .sp-editor h2 { margin: 18px 0 8px; font-size: 19px; line-height: 1.4; }

/* ---------- 工具箱 (掩码计算器 / TCPing / 工时计算 / 简易拓扑) ---------- */
.tools-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-md); }
.tools-tab {
  height: 34px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted);
  font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tools-tab:hover { border-color: var(--brand); color: var(--brand); }
.tools-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.tools-form { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: flex-end; }
.tools-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }
.tools-field.sm { flex: 0 1 128px; }
.tools-field label { font-size: 12px; color: var(--text-muted); }
.tools-field input, .tools-field select {
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-muted); color: var(--text);
  font-size: 13.5px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tools-field input:focus, .tools-field select:focus {
  border-color: var(--brand); background: var(--surface); box-shadow: var(--shadow-focus);
}
.tools-field-btn .btn { width: 100%; height: 36px; }
.tools-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.tools-chips > span { font-size: 12px; color: var(--text-faint); }
.tools-chip {
  height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted);
  font-size: 12px; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tools-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-30); }
.tools-error {
  margin-top: 16px; padding: 10px 14px;
  border: 1px solid rgba(245, 63, 63, .35); border-radius: var(--r-sm);
  background: rgba(245, 63, 63, .08); color: var(--danger); font-size: 12.5px;
}
.tools-note { margin-top: 12px; font-size: 12px; color: var(--text-faint); line-height: 1.7; }
.tools-note.inline { margin-top: 0; }
.tools-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.tools-check {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 13px; color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.tools-check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* 掩码计算结果 */
.mask-hero {
  margin-top: 18px; padding: 14px 18px;
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--r-md); background: var(--surface-muted);
}
.mask-hero-cidr { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mask-hero-sub { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.mask-hero-sub b { color: var(--brand-700); }
.mask-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.mask-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 2px; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.mask-row > span { color: var(--text-muted); flex: 0 0 auto; }
.mask-row > b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; word-break: break-all; }

/* TCPing 输出 */
.tools-out {
  margin-top: 16px; padding: 12px 14px; min-height: 92px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-sunken); font-size: 13px; line-height: 1.75;
}
.tools-out-mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12.5px; }
.ping-line { white-space: pre-wrap; word-break: break-all; }
.ping-line.err { color: var(--danger); }
.ping-line.stat { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--text-muted); }

/* 工时计算结果 */
.wt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 18px; }
.wt-card {
  padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-muted);
}
.wt-num { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.wt-label { margin-top: 4px; font-size: 12px; color: var(--text-muted); }

/* 简易拓扑 */
.tools-topo-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; flex-wrap: wrap;
}
.tools-topo-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }
.tools-topo-wrap {
  height: calc(100vh - 262px); min-height: 520px;
  border-top: 1px solid var(--border); background: #f2f5f9;
}
.tools-topo-frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) {
  .mask-grid { grid-template-columns: 1fr; }
  .tools-field.sm { flex: 1 1 120px; }
  .tools-topo-wrap { height: max(60vh, 460px); min-height: 0; }
}

/* ---------- 工具箱 v2: 工具市场式卡片网格 ---------- */
.tk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.tk-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0;
  color: var(--text-faint); font-size: 12.5px; letter-spacing: .02em;
}
.tk-divider::before, .tk-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.tk-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 16px 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  text-align: center; cursor: pointer; overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}
.tk-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.tk-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tk-card-ico {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--c, var(--brand)); background: var(--cbg, var(--brand-30));
}
.tk-card-ico svg { width: 26px; height: 26px; }
.tk-card-title { align-self: stretch; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.tk-card-desc { align-self: stretch; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.tk-card-tags {
  align-self: stretch;
  margin: auto -16px 0;
  padding: 10px 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}
.tk-card-tag {
  padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.tk-card.soon { cursor: default; }
.tk-card.soon:hover { box-shadow: var(--shadow-sm); border-color: var(--border); }
.tk-card.soon .tk-card-ico { filter: grayscale(.35); opacity: .85; }
.tk-card.soon .tk-card-title { color: var(--text-muted); }
.tk-soon-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 1px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-sunken);
  color: var(--text-faint); font-size: 10px;
}
.tk-ribbon { position: absolute; top: 0; right: 0; width: 64px; height: 64px; overflow: hidden; pointer-events: none; }
.tk-ribbon > span {
  position: absolute; top: 12px; right: -22px; width: 96px;
  transform: rotate(45deg);
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 18px; text-align: center;
}

/* 工具弹窗承载容器: 内部卡片扁平化融入模态 */
.tk-tool { display: block; }
.tk-tool > .card {
  border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible;
}
.tk-tool > .card > .card-head { display: none; }
.tk-tool > .card > .card-body { padding: 0; }
.tk-tool .tools-topo-wrap { height: min(62vh, 620px); min-height: 0; }
.tk-detail-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--c, var(--brand)); background: var(--cbg, var(--brand-30));
}
.tk-detail-ico svg { width: 20px; height: 20px; }
.tk-soon-dlg { display: flex; gap: 14px; align-items: flex-start; }
.tk-soon-dlg p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.75; }

/* 工具箱表单补充控件 */
.tools-field textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-muted); color: var(--text);
  font-size: 13px; font-family: inherit; line-height: 1.6;
  outline: none; resize: vertical;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tools-field textarea:focus { border-color: var(--brand); background: var(--surface); box-shadow: var(--shadow-focus); }
.tools-field input[type="file"] { height: auto; min-height: 36px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.tools-field input[type="range"] {
  height: 28px; padding: 0; border: 0; background: transparent;
  box-shadow: none; accent-color: var(--brand); cursor: pointer;
}
.tools-field input[type="range"]:focus { border: 0; background: transparent; box-shadow: none; }
.tools-field.full { flex: 1 1 100%; }
.tools-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); margin-top: 14px; }

/* 图片压缩结果 */
.ic-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-size: 12.5px;
}
.ic-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.ic-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-dim { margin-left: 8px; color: var(--text-faint); font-size: 11px; }
.ic-sizes { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ic-sizes b { color: var(--text); }
.ic-ratio { flex: 0 0 74px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-ratio.ic-good { color: #0f9d58; }
.ic-ratio.ic-warn { color: #d97706; }
.ic-bad { flex: 1 1 auto; color: var(--danger); }

/* 身份证校验 / 通用判定色 */
.mask-hero.ok { border-left-color: #12b76a; background: rgba(18, 183, 106, .07); }
.mask-hero.bad { border-left-color: var(--danger); background: rgba(245, 63, 63, .07); }
.mask-hero.ok .mask-hero-cidr { color: #0f9d58; }
.mask-hero.bad .mask-hero-cidr { color: var(--danger); }

/* 参会桌签 */
.dc-thumbs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.dc-thumb {
  width: 232px; height: 164px; flex: 0 0 auto;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.dc-thumb-half {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 4px 10px; text-align: center;
  border-bottom: 1px dashed var(--border-strong);
}
.dc-thumb-half:last-child { border-bottom: 0; }
.dc-thumb-half.flip { transform: rotate(180deg); }
.dc-thumb-unit { font-size: 10.5px; color: var(--text-muted); }
.dc-thumb-name { font-size: 20px; font-weight: 700; letter-spacing: .12em; }

/* 打印层 (仅打印时可见) */
.tk-print { display: none; }
.dc-page {
  width: 297mm; height: 210mm; overflow: hidden;
  display: flex; flex-direction: column;
  page-break-after: always;
}
.dc-page:last-child { page-break-after: auto; }
.dc-half { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10mm; }
.dc-half.flip { transform: rotate(180deg); }
.dc-half.guide { border-bottom: 1px dashed #bbb; }
.dc-unit { font-size: calc(var(--dc-size, 60pt) * .4); color: #111; }
.dc-name { font-size: var(--dc-size, 60pt); font-weight: 700; letter-spacing: .14em; color: #000; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body > #shell, body > #lock, body > .modal-root, body > .toast-root { display: none !important; }
  .tk-print { display: block !important; }
  .dc-half.guide { border-bottom: 0; }
}

/* 文档对比 */
.dd-out { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.dd-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}
.dd-body { max-height: 62vh; overflow: auto; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12.5px; }
.dd-row { display: flex; gap: 10px; padding: 3px 14px; white-space: pre-wrap; word-break: break-all; }
.dd-row.add { background: rgba(18, 183, 106, .10); }
.dd-row.del { background: rgba(245, 63, 63, .10); }
.dd-row.skip { justify-content: center; color: var(--text-faint); background: var(--surface-sunken); }
.dd-sign { flex: 0 0 10px; color: var(--text-faint); }
.dd-row.add .dd-sign { color: #0f9d58; font-weight: 700; }
.dd-row.del .dd-sign { color: var(--danger); font-weight: 700; }
.dd-line { flex: 1 1 auto; }
.dd-num { flex: 0 0 42px; text-align: right; color: var(--text-faint); user-select: none; }

/* Excel 工具结果 */
.tools-status {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-sunken); font-size: 13px; line-height: 1.8;
}
.tools-status .ok { color: #0f9d58; font-weight: 600; }
.tools-status .bad { color: var(--danger); font-weight: 600; }

/* 工具箱响应式 */
@media (max-width: 1180px) { .tk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tk-card { padding: 18px 12px 0; }
  .tk-card-tags { margin-left: -12px; margin-right: -12px; padding: 9px 10px; }
  .dc-thumb { width: 100%; height: 150px; }
  .dd-body { max-height: 52vh; }
}
@media (max-width: 520px) {
  .tk-grid { grid-template-columns: 1fr; }
}

.sp-content h3, .sp-editor h3 { margin: 14px 0 6px; font-size: 16px; line-height: 1.4; }
.sp-content h4, .sp-editor h4 { margin: 12px 0 6px; font-size: 14.5px; line-height: 1.4; }
.sp-content p, .sp-editor p { margin: 8px 0; }
.sp-content ul, .sp-editor ul,
.sp-content ol, .sp-editor ol { margin: 8px 0; padding-left: 24px; }
.sp-content li, .sp-editor li { margin: 2px 0; }
.sp-content blockquote, .sp-editor blockquote {
  margin: 10px 0; padding: 8px 14px;
  border-left: 3px solid var(--brand);
  background: var(--brand-30);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-muted);
}
.sp-content img.sp-img, .sp-editor img.sp-img {
  max-width: 100%; margin: 6px 0;
  border-radius: var(--r-sm); box-shadow: var(--shadow-sm); display: block;
}
.sp-content .sp-clickable { cursor: zoom-in; }
.sp-content a.sp-naslink, .sp-editor a.sp-naslink {
  color: var(--brand-700); text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 3px;
}
.sp-content a.sp-naslink { cursor: pointer; }
.sp-content a.sp-naslink:hover { color: var(--brand-700); }

/* 图片放大查看覆盖层 (点击空白处 / Esc 关闭) */
.sp-lightbox {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 15, 22, .72);
  cursor: zoom-out;
}
.sp-lightbox img {
  max-width: 92vw; max-height: 92vh;
  border-radius: var(--r-sm);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
  cursor: default;
  transition: transform .06s linear; /* 滚轮缩放平滑过渡 */
}
.sp-content table.sp-table, .sp-editor table.sp-table {
  border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 13px;
}
.sp-content table.sp-table th, .sp-content table.sp-table td,
.sp-editor table.sp-table th, .sp-editor table.sp-table td {
  border: 1px solid var(--border-strong); padding: 6px 10px; text-align: left; vertical-align: top;
}
.sp-content table.sp-table th, .sp-editor table.sp-table th { background: var(--surface-muted); font-weight: 600; }

/* NAS 文件选择弹窗: 不可选文件置灰 */
.nas-pick-item.off { opacity: .45; }
.nas-pick-item.off .nas-pick-name { cursor: not-allowed; }

/* 目录树拖拽: 拖拽中的节点与放置指示 (before/after 插入线, inside 高亮, 容器末尾线) */
.sp-node.dragging { opacity: .45; }
.sp-node.drag-over-before { box-shadow: inset 0 2px 0 0 var(--brand); }
.sp-node.drag-over-after { box-shadow: inset 0 -2px 0 0 var(--brand); }
.sp-node.drag-over-inside { background: var(--brand-30); outline: 1px dashed var(--brand); outline-offset: -2px; }
.sp-tree.drag-over-end { box-shadow: inset 0 -3px 0 0 var(--brand); }

/* 工具栏下拉 (字体 / 字间距 / 行距 / 段间距) */
.sp-tsel {
  height: 30px; max-width: 118px; padding: 0 4px;
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.sp-tsel:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-30); }

/* 编辑区图片: 选中描边 / 居中 / 右对齐 / 宽度 */
.sp-editor img.sp-img-sel { outline: 2px solid var(--brand); outline-offset: 2px; }
.sp-editor img.sp-img-center, .sp-content img.sp-img-center { margin-left: auto; margin-right: auto; }
.sp-editor img.sp-img-right, .sp-content img.sp-img-right { margin-left: auto; margin-right: 0; }
.sp-editor img.sp-img-w25, .sp-content img.sp-img-w25 { width: 25%; }
.sp-editor img.sp-img-w50, .sp-content img.sp-img-w50 { width: 50%; }
.sp-editor img.sp-img-w75, .sp-content img.sp-img-w75 { width: 75%; }

/* 两张图片并排 (等宽两列; 窄窗口自动回退为上下排列) */
.sp-img-row { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.sp-img-cell { flex: 1 1 0; min-width: 0; }
.sp-img-row .sp-img-cell img.sp-img { width: 100%; margin: 0 0 6px; }
@media (max-width: 720px) { .sp-img-row { flex-direction: column; } }

/* 图片浮动工具条 (编辑模式点击图片出现; 对齐 / 宽度 / 裁切 / 并排) */
.sp-imgbar {
  position: fixed; z-index: 1200;
  display: flex; align-items: center; gap: 2px;
  padding: 4px 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}
.sp-imgbar .sp-tbtn { height: 26px; min-width: 26px; padding: 0 6px; font-size: 12px; }
.sp-imgbar .sp-tbtn.on { color: var(--brand-700); border-color: var(--brand); background: var(--brand-30); }
.sp-imgbar .sp-tbtn:disabled { opacity: .35; cursor: not-allowed; }
.sp-imgbar .sp-tsep { height: 16px; margin: 0 4px; }

/* 裁切图片弹窗 (选框 + 四角手柄 + 四块遮罩) */
.sp-crop-stage { position: relative; margin: 4px 0 0; }
.sp-crop-stage > img { display: block; margin: 0 auto; max-width: 100%; max-height: 56vh; border-radius: var(--r-sm); }
.sp-crop-sel { position: absolute; width: 0; height: 0; border: 1px solid var(--brand); cursor: move; }
.sp-crop-h {
  position: absolute; width: 11px; height: 11px;
  background: var(--surface); border: 1.5px solid var(--brand); border-radius: 2px;
}
.sp-crop-h[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.sp-crop-h[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.sp-crop-h[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.sp-crop-h[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.sp-crop-mask { position: absolute; background: rgba(12, 15, 22, .45); pointer-events: none; }

/* 窄屏: 上下堆叠 */
@media (max-width: 900px) {
  .sp-split { grid-template-columns: 1fr; gap: 14px; height: auto; min-height: 0; }
  .sp-tree { max-height: 240px; }
  .sp-main-card { height: min(70vh, 620px); }
  .sp-body { padding: 14px 14px; }
}

/* ============================================================
   报价 CPQ (报价单 / 库存目录 / BOM 模板库 / 编辑器 / 格式设置)
   扁平简约风: 纯白卡片 / 细边框 / 小圆角 / 无卡片阴影 / 无位移抖动
   ============================================================ */
.cpq-tabs-card { padding: 0; margin-bottom: 16px; }
.cpq-tabs-card .pd-tab { font-size: 13.5px; }
/* 库存目录: 主标签栏 +「商品视图 / SN 视图」子切换栏 + SN 提示条 合并为一张连通卡片 */
.cpq-tabs-card.merged { margin-bottom: 0; }
#cpq-subbar { margin: 0; }
#cpq-subbar .cpq-inv-tabs {
  margin: 0; padding: 0 14px;
  background: var(--brand-30);
  border: none; border-radius: 0;
}
/* 子切换栏与下方内容之间以一条灰线隔离 (无 SN 提示条时该线即卡片底边) */
#cpq-subbar .cpq-inv-tabs { border-bottom: 2px solid var(--border); }
.cpq-tabs-card.merged:not(.has-sn) #cpq-subbar .cpq-inv-tabs { border-bottom: none; }
.cpq-tabs-card.merged:not(.has-sn) #cpq-subbar .pd-tab.active::after { bottom: 0; }
#cpq-subbar .cpq-inv-tabs .pd-tab { font-size: 13.5px; padding: 8px 14px; }
/* SN 提示条: 紧接子切换栏下方, 同底色, 无自身边框 */
#cpq-subbar .cpq-sn-bar {
  margin: 0; min-height: 32px; padding: 8px 14px;
  background: var(--brand-30);
  border: none; border-radius: 0;
}
.cpq-sn-grp { cursor: pointer; }
/* SN 明细弹窗: 顶部信息条 + 列设置面板 + 可滚动表格区域; SN 数量用蓝底徽标 */
.cpq-sn-detail-meta { margin: 0 0 10px; }
.cpq-sn-detail-cols { margin: 0 0 10px; max-height: 34vh; overflow: auto; }
.cpq-sn-detail-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
/* 参数列: 默认展示两行, 溢出时在第二行末尾给出「展开/收起」 */
.cpq-param-cell { width: 360px; min-width: 360px; max-width: 360px; white-space: normal; }
.cpq-param-box { position: relative; line-height: 1.55; }
.cpq-param-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; white-space: normal; word-break: break-word;
}
.cpq-param-box.expanded .cpq-param-text { display: block; overflow: visible; -webkit-line-clamp: unset; }
.cpq-param-toggle {
  position: absolute; right: 0; bottom: 0; border: 0; cursor: pointer;
  padding: 0 0 0 14px; font-size: 12px; line-height: 1.55; color: var(--brand);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 40%);
}
.cpq-param-box.expanded .cpq-param-toggle {
  position: static; display: block; margin-left: auto; padding: 2px 0 0; background: none;
}
.chip-n.chip-blue { background: var(--brand); color: #fff; }

/* 左列表 + 右内容 分栏 (产品目录 / BOM 模板库 / 报价编辑器) */
.cpq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 16px;
  align-items: start;
}
.cpq-bom-split { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); }
.cpq-tpl-card { display: flex; flex-direction: column; }

/* 产品目录: 品类左(2) / 产品列表右(8) */
.cpq-prod-split { display: grid; grid-template-columns: minmax(190px, 2fr) minmax(0, 8fr); gap: 16px; align-items: start; }
.cpq-cat-card { position: sticky; top: 0; }

/* 表格区在卡片内横向滚动, 保证 操作 列完整可点 */
.cpq-table-wrap { overflow-x: auto; }
.cpq-items-table { min-width: 720px; }
.cpq-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cpq-num.neg { color: var(--danger); }

/* 明细: 组行 / 子组件缩进 */
.cpq-group-row { background: var(--surface-muted); }
.cpq-group-row td { font-weight: 500; }
.cpq-child-row td { color: var(--text-muted); }
.cpq-indent { display: inline-block; padding-left: 20px; }
.cpq-name-cell { white-space: nowrap; }
.cpq-caret {
  width: 16px; padding: 0; margin-right: 4px;
  border: none; background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 11px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.cpq-caret:hover { color: var(--brand-700); }
.cpq-caret-ph { display: inline-block; width: 16px; }

/* 工具栏 */
.cpq-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cpq-toolbar-pad { padding: 12px 16px; border-bottom: 1px solid var(--border); }

/* 汇总面板 (sticky) */
.cpq-summary { position: sticky; top: 12px; }
.cpq-summary .card-body { padding: 14px 18px; }
.cpq-sum-block { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.cpq-sum-block:first-child { padding-top: 0; }
.cpq-sum-block:last-child { border-bottom: none; padding-bottom: 0; }
.cpq-sum-title { margin-bottom: 6px; font-size: 12px; color: var(--text-faint); }
.cpq-sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; color: var(--text); }
.cpq-sum-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; font-weight: 600; }

/* 品类 chips (宽度随文字) */
.cpq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-n {
  min-width: 18px; padding: 0 6px; margin-left: 6px;
  border-radius: var(--r-pill); background: var(--surface-muted);
  text-align: center; font-size: 11px; color: var(--text-faint);
}
.chip.on .chip-n { background: var(--brand); color: #fff; }

/* BOM 模板列表 */
.cpq-list { flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.cpq-list-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 8px 10px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.cpq-list-item:hover { background: var(--surface-muted); }
.cpq-list-item.on { background: var(--brand-50); color: var(--brand-700); }
.cpq-li-name { font-size: 13px; font-weight: 500; }

/* 产品目录: 卡片头工具区 (模糊搜索 + 列设置) */
.cpq-p-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cpq-p-tools .cpq-p-search { width: 190px; height: 28px; }
@media (max-width: 720px) {
  .cpq-p-tools .cpq-p-search { width: 130px; }
}
/* 产品目录: 表头居中 */
.cpq-main-card .cpq-table-wrap thead th { text-align: center; }
/* 产品目录: 设备参数默认最多 2 行, 超出时小三角展开/收起 */
.cpq-spec { position: relative; }
.cpq-spec-txt { padding-right: 20px; }
.cpq-spec-txt.clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cpq-spec-toggle {
  position: absolute; right: 0; bottom: 0; padding: 0 2px; border: none; background: transparent;
  color: var(--brand-700); font-family: inherit; font-size: 13px; line-height: 1; cursor: pointer;
}
.cpq-spec-toggle:hover { color: var(--brand); }
.cpq-spec-toggle.hidden { display: none; }

/* 产品目录: 数量列 (同品类 + 型号 + 报价价的记录合并为一行, 数量为组内合计; 点击可修改) */
.cpq-qty {
  min-width: 34px; padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--brand-700); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.cpq-qty:hover { border-color: var(--brand); background: var(--brand-50); }
.cpq-qty.one { color: var(--text-faint); font-weight: 400; }

/* 产品列表分页栏 (固定在卡片底部; 分页渲染避免一次性渲染海量数据卡顿) */
.cpq-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  flex-shrink: 0; padding: 8px 16px; border-top: 1px solid var(--border); }
.cpq-pager-info { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 12.5px; }
.cpq-pg-num { width: 52px; height: 24px; padding: 0 4px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 12.5px; text-align: center; }
.cpq-pager-btns { display: flex; align-items: center; gap: 6px; }
.cpq-pager .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 清除全部产品: 弹窗提示文案 */
.cpq-clear p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; }
.cpq-clear b { color: var(--danger); }
/* 清除全部产品: 可选项 (是否一并删除品类) */
.cpq-clear-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.cpq-clear-opt input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--brand); }

/* 品类列表 (单行排列; 大类 + 缩进小类) */
.cpq-cat-list { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.cpq-cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 7px 10px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font-family: inherit; font-size: 13px;
  text-align: left; cursor: pointer; transition: background .12s, color .12s;
}
.cpq-cat-item:hover { background: var(--surface-muted); }
.cpq-cat-item.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.cpq-cat-item .cpq-ci-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpq-cat-item.root { font-weight: 600; }
.cpq-cat-item.sub { padding-left: 24px; font-size: 12.5px; color: var(--text-muted); }
.cpq-cat-item.sub .cpq-ci-name::before { content: '└'; margin-right: 6px; color: var(--text-faint); }

/* 品类行内操作按钮 (悬停显现; 触摸设备常显) */
.cpq-ci-acts { display: none; gap: 3px; align-items: center; flex-shrink: 0; }
.cpq-ci-act {
  min-width: 20px; padding: 1px 4px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-muted); font-family: inherit;
  font-size: 10.5px; line-height: 1.6; white-space: nowrap; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.cpq-ci-act:hover { color: var(--brand-700); border-color: var(--brand); background: var(--brand-50); }
/* 删除按钮: 悬停以危险色提示 */
.cpq-ci-act.cpq-ci-del:hover { color: var(--danger); border-color: var(--danger); background: #fff1f0; }
@media (hover: hover) {
  .cpq-cat-item:hover .cpq-ci-acts { display: inline-flex; }
  .cpq-cat-item:hover .chip-n { display: none; }
}
@media (hover: none) {
  .cpq-ci-acts { display: inline-flex; }
}

/* 品类分组 (大类 + 其小类; 小类可收起) */
.cpq-cat-group { display: flex; flex-direction: column; gap: 2px; }
.cpq-cat-group.collapsed .cpq-cat-item.sub { display: none; }
/* 小三角: 收起/展开该大类下的小类 */
.cpq-ci-caret {
  width: 14px; flex-shrink: 0; padding: 0; border: none; background: transparent;
  color: var(--text-faint); font-family: inherit; font-size: 10px; line-height: 1;
  text-align: center; cursor: pointer; transition: color .12s;
}
.cpq-ci-caret:hover { color: var(--brand-700); }
/* 无小类时占位, 使大类与小类名称左侧对齐 */
.cpq-ci-caret-ph { display: inline-block; width: 14px; flex-shrink: 0; }

/* BOM 模板预览 (插入弹窗) */
.cpq-tpl-preview {
  margin-top: 12px; padding: 10px 12px; max-height: 40vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-muted);
  font-size: 12.5px; line-height: 1.8;
}
.cpq-pv-group { font-weight: 600; }
.cpq-pv-child, .cpq-pv-item { padding-left: 16px; color: var(--text-muted); }

/* 产品目录选择弹窗 */
.cpq-prod-pick { max-height: 52vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.cpq-prod-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 13px; cursor: pointer;
}
.cpq-prod-row:last-child { border-bottom: none; }
.cpq-prod-row:hover { background: var(--brand-50); }
.cpq-prod-row input { flex: none; }
.cpq-prod-row .cpq-pn { font-weight: 500; min-width: 140px; }
.cpq-prod-row .cpq-num { margin-left: auto; }

/* 产品目录导入弹窗 */
.cpq-import p { margin: 0; line-height: 1.7; }
.cpq-import-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cpq-import-preview { max-height: 34vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }

/* Logo 编辑行 */
.cpq-logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 0; }
.cpq-logo-img { height: 42px; max-width: 160px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }

/* 列显隐与排序 */
.cpq-cols { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.cpq-col-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.cpq-col-row:last-child { border-bottom: none; }
.cpq-col-chk { display: inline-flex; align-items: center; gap: 8px; line-height: 1.6; color: var(--text); font-size: 13px; cursor: pointer; }
.cpq-col-chk input { width: auto; }
.cpq-col-ord { display: inline-flex; gap: 2px; }
.cpq-col-ord .btn:disabled { opacity: .35; cursor: not-allowed; }

/* CPU / GPU 速查: 左侧多选筛选面板 (复用 .cpq-cat-card + .cpq-cat-list 的滚动行为) */
.cpq-flt-qwrap { padding: 0 2px 6px; }
.cpq-flt-qwrap input {
  width: 100%; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 12.5px;
}
.cpq-flt-group { padding: 8px 2px 10px; border-top: 1px solid var(--border); }
.cpq-flt-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 2px 6px; color: var(--text-muted); font-size: 12.5px; font-weight: 600;
}
.cpq-flt-clr {
  padding: 0; border: none; background: transparent; color: var(--brand-700);
  font-family: inherit; font-size: 12px; font-weight: 400; cursor: pointer;
}
.cpq-flt-opts { display: flex; flex-direction: column; gap: 1px; max-height: 216px; overflow-y: auto; }
.cpq-flt-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm);
  color: var(--text); font-size: 12.5px; cursor: pointer;
}
.cpq-flt-opt:hover { background: var(--surface-muted); }
.cpq-flt-opt input[type="checkbox"] { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.cpq-flt-opt .cpq-flt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpq-flt-opt.on { color: var(--brand-700); font-weight: 600; }
.cpq-flt-opt.off .cpq-flt-name, .cpq-flt-opt.off .chip-n { opacity: .4; }

/* 卡片头 · 数值下限筛选 (核心数 ≥ / 基准频率 ≥) */
.cpq-s-ranges { display: flex; align-items: center; gap: 12px; margin-right: auto; margin-left: 4px; }
.cpq-rng { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12.5px; white-space: nowrap; cursor: text; }
.cpq-rng input { width: 78px; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 12.5px; }
.cpq-rng input:focus { border-color: var(--brand); outline: none; }
@media (max-width: 900px) {
  .cpq-s-ranges { margin-left: 0; gap: 8px; flex-wrap: wrap; }
  .cpq-rng input { width: 68px; }
}

/* 窄屏: 分栏堆叠, 汇总面板取消 sticky */
@media (max-width: 900px) {
  .cpq-split, .cpq-bom-split, .cpq-prod-split { grid-template-columns: 1fr; gap: 14px; }
  .cpq-summary, .cpq-cat-card { position: static; }
}

/* 产品目录 桌面: 两卡片固定高度, 卡头与表头吸顶不动, 仅表格区内部滚动 */
@media (min-width: 901px) {
  /* 198px = 顶栏块(64+24*2 外边距) + 页签卡片(含 16px 下间距) + 内容区底部留白 24px */
  .cpq-prod-split {
    height: calc(100vh - 198px);
    height: calc(100dvh - 198px);
    min-height: 420px;
    align-items: stretch;
  }
  .cpq-cat-card, .cpq-main-card { display: flex; flex-direction: column; min-height: 0; }
  .cpq-cat-card .cpq-cat-list { flex: 1; min-height: 0; overflow-y: auto; }
  .cpq-main-card > .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .cpq-main-card .cpq-table-wrap { flex: 1; min-height: 0; overflow: auto; }
}

/* ---------- 账户管理 ---------- */
.badge-admin { background: var(--brand); color: #fff; border-color: transparent; }
.badge-user { background: rgba(0,0,0,.06); color: var(--text-muted); border-color: transparent; }
.nav-account { margin: 6px 0; }
.sidebar-foot { border-top: 1px solid var(--border); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sidebar-foot .nav-account { margin: 0; }