:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --text: #1f2430;
  --muted: #8a90a2;
  --border: #e8eaef;
  --accent: #1677ff;
  --accent-soft: #e6f4ff;
  --accent-ink: #0958d9;
  --danger: #ef5a6f;
  --danger-soft: #fdeef0;
  --ok: #2bb673;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(31, 36, 48, 0.08);
  --shadow-sm: 0 2px 8px rgba(31, 36, 48, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; color: var(--text); }

/* ---------- 通用按钮 ---------- */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 11px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  transition: background .15s, transform .05s;
}
.btn-primary:hover { background: var(--accent-ink); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary.sm { padding: 8px 14px; font-size: 13px; }
.btn-ghost {
  background: var(--surface); color: var(--accent-ink); border: 1px solid var(--border);
  padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.btn-ghost:hover { background: var(--accent-soft); }
.btn-ghost.sm { padding: 7px 12px; }
.btn-new {
  background: var(--accent-soft); color: var(--accent-ink); border: none;
  width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; font-weight: 700;
}
.btn-new:hover { background: #e2e5ff; }
.link-btn {
  background: none; border: none; color: var(--muted); font-size: 12.5px; padding: 2px 4px;
}
.link-btn:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------- 认证页 ---------- */
.auth-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #e6f4ff 0%, var(--bg) 55%);
}
.auth-card {
  width: 380px; max-width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 26px;
}
/* 需求（20261012c）：游客 / 本机模式入口 */
.auth-guest-row { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); text-align: center; }
.btn-guest { width: 100%; }
.auth-guest-tip { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, #1677ff, #4096ff); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 22px;
}
.brand-logo.small { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
/* 需求 i#3：内嵌 SVG 品牌标志（替代原「M」字母），随徽标尺寸自适应且不失真 */
.brand-logo .brand-mark { width: 66%; height: 66%; display: block; }
.brand h1 { font-size: 19px; font-weight: 700; }
.brand-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.seg {
  display: flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px; margin-bottom: 18px;
}
.seg-btn {
  flex: 1; border: none; background: none; padding: 8px; border-radius: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-form label { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.auth-form input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.auth-form input:focus { outline: none; border-color: var(--accent); background: #fff; }
.row-between { display: flex; justify-content: space-between; margin: 4px 0 8px; }

/* 需求 p#3：记住登录状态（勾选后下次免密码自动登录） */
.remember-row {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted);
  user-select: none;
}
.remember-row:hover { color: var(--text); }
.auth-form .remember-row input[type="checkbox"] {
  width: 15px; height: 15px; padding: 0; margin: 0; flex: none;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
  accent-color: var(--accent); cursor: pointer;
}
.auth-form .btn-primary { margin-top: 10px; }
.auth-form .link-btn { margin-top: 10px; align-self: center; }

.auth-msg { margin-top: 12px; font-size: 13px; text-align: center; min-height: 18px; }
.auth-msg.err { color: var(--danger); }
.auth-msg.ok { color: var(--ok); }
/* 需求 1（20261006r）：后台数据 / 公告窗口标题下的空消息占位（margin-top:12px + min-height:18px）
   空着时也撑出约 30px 空白 → 消息为空时不占位，有内容时才显示。 */
.admin-wrap .auth-msg:empty { display: none; }

/* ---------- 主框架 ---------- */
.app-view { display: flex; height: 100vh; overflow: hidden; }
/* 第一栏：概览 + 导航 + 标签 */
.sidebar {
  width: 252px; flex: none; background: var(--surface); min-height: 0;
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.side-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px; }
.side-title { font-weight: 700; font-size: 15px; }

/* 统计 */
.side-stats { display: flex; gap: 20px; padding: 4px 18px 14px; }
.side-stats .stat { display: flex; flex-direction: column; gap: 1px; }
.side-stats b { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.side-stats span { font-size: 11.5px; color: var(--muted); }

/* 记录热点图（固定 7 行 × N 周，格子尺寸统一，周数由 JS 依据栏宽计算） */
.heat-wrap { padding: 0; }
.heat-months {
  display: grid; gap: 3px; margin-bottom: 6px;
  font-size: 10px; color: var(--muted); line-height: 1;
}
.heat-months span { white-space: nowrap; overflow: visible; }
.heat-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; }
.heat-cell { width: 11px; height: 11px; border-radius: 2.5px; background: #eef0f4; }
.heat-cell.future { background: transparent; }
.heat-cell.lv1 { background: #c9ecd3; }
.heat-cell.lv2 { background: #74cf94; }
.heat-cell.lv3 { background: #21a35f; }
.heat-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 7px; font-size: 10.5px; color: var(--muted);
}
.heat-legend i { width: 10px; height: 10px; border-radius: 2.5px; display: block; background: #eef0f4; }
.heat-legend i.lv1 { background: #c9ecd3; }
.heat-legend i.lv2 { background: #74cf94; }
.heat-legend i.lv3 { background: #21a35f; }

.side-nav { display: flex; flex-direction: column; padding: 0 12px; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  text-align: left; border: none; background: none; color: var(--muted);
  padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.nav-item .ni-ico { font-size: 14px; line-height: 1; }
.nav-item .ni-ico svg { width: 17px; height: 17px; display: block; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }

/* 全部标签（第三栏，独立成列） */
.side-tags { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 10px; }
.side-sec {
  padding: 0 20px 8px; font-size: 11.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em;
}
.tags-panel {
  width: 216px; flex: none; min-height: 0; background: var(--surface);
  border-left: 1px solid var(--border); display: flex; flex-direction: column;
}
/* 需求 o#4：去掉顶部多余的「全部标签」面板标题，仅保留可点击的「# 全部标签」行 */
.tag-filter {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
  flex: 1; padding: 0 16px 12px; overflow-y: auto; min-height: 0;
}

/* 第二栏：笔记列表列 */
.notes-panel {
  width: 336px; flex: none; min-height: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.notes-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; font-size: 13px; font-weight: 700; color: var(--text);
}
.notes-head-title { display: inline-flex; align-items: center; gap: 6px; }
.notes-count {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 99px; padding: 1px 7px;
}

.note-list { list-style: none; overflow-y: auto; flex: 1; padding: 0 10px 14px; }
.note-item {
  display: flex; align-items: flex-start; gap: 6px; padding: 10px 11px;
  border-radius: 12px; cursor: pointer; margin-bottom: 4px; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.note-item:hover { background: var(--surface-2); }
.note-item.active { background: var(--accent-soft); border-color: #cfe0ff; }
.note-item.dragging { opacity: .4; }
.note-item.drag-over { border-color: var(--accent); }
.note-item-main { flex: 1; min-width: 0; }
.ni-top { display: flex; align-items: center; gap: 4px; }
.note-title-txt {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-item.active .note-title-txt { color: var(--accent-ink); }
.ni-snippet {
  margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ni-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ni-date { font-size: 11px; color: #a8adbd; }
.ni-tag {
  border: none; font-family: inherit; font-size: 11px; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 99px; padding: 1px 7px; line-height: 1.6;
}
.ni-tag:hover { background: #cfe0ff; }
.note-rename-input {
  flex: 1; min-width: 0; border: 1px solid var(--accent); border-radius: 7px; padding: 4px 6px; font-size: 13px;
}
.note-move { display: none; gap: 2px; flex: none; }
.note-item:hover .note-move { display: flex; }
.note-move button {
  border: none; background: none; color: var(--muted); font-size: 13px; padding: 0 3px; line-height: 1;
}
.note-move button:hover { color: var(--accent-ink); }

.side-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--border); margin-top: auto;
}
/* 头像 + 昵称：整块可点击 → 个人资料 */
.side-me {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  border: none; background: none; padding: 4px 6px; margin: -4px -6px;
  border-radius: 10px; cursor: pointer; text-align: left; font-family: inherit;
  transition: background .15s;
}
.side-me:hover { background: var(--surface-2); }
.side-me:hover .side-name { color: var(--accent-ink); }
.side-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.side-name { font-size: 13px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sub { font-size: 11px; color: var(--muted); display: block; }
.side-user { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.side-ops { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
/* 超管入口（仅超级管理员可见） */
.side-admin {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #cfe0ff; background: var(--accent-soft); color: var(--accent-ink);
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.side-admin:hover { background: #cfe0ff; border-color: #bcdcff; }
.side-admin svg { display: block; }

/* ---------- 主区 ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.editor-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); gap: 12px;
}
.empty-ill { font-size: 46px; }

.editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.editor-bar {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.note-title {
  flex: 1; border: none; background: none; font-size: 18px; font-weight: 700; color: var(--text);
}
.note-title:focus { outline: none; }
.editor-actions { display: flex; align-items: center; gap: 10px; }
.save-state { font-size: 12px; color: var(--muted); }

.editor-split { flex: 1; display: flex; min-height: 0; }
/* 需求 q#1：MD 编辑窗口与预览窗口字体统一（原为等宽 var(--mono)，与预览 .markdown-body 不一致） */
.note-input {
  flex: 1; border: none; resize: none; padding: 20px 22px; font-family: var(--font);
  font-size: 14.5px; line-height: 1.75; background: var(--surface); color: var(--text);
  border-right: 1px solid var(--border);
}
.note-input:focus { outline: none; }
.note-preview { flex: 1; overflow-y: auto; padding: 20px 26px; background: var(--surface-2); }

/* ---------- 个人资料 ---------- */
.profile-wrap { flex: 1; overflow-y: auto; padding: 26px 30px; max-width: 720px; width: 100%; }
.page-title { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
.profile-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.profile-card h3 { font-size: 15px; margin-bottom: 14px; }
.avatar-block { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); }
.avatar-ops { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.profile-fields { display: flex; flex-direction: column; gap: 7px; }
.profile-fields label, .profile-card > label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.profile-fields input, .profile-fields textarea, .profile-card > input {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 14px; background: var(--surface-2); resize: vertical;
}
.profile-fields input:focus, .profile-fields textarea:focus, .profile-card > input:focus {
  outline: none; border-color: var(--accent); background: #fff;
}
.profile-fields .btn-primary { margin-top: 12px; align-self: flex-start; }
.kv { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.profile-card input { width: 100%; }

/* ---------- Markdown 预览样式 ---------- */
.markdown-body { line-height: 1.75; font-size: 14.5px; color: var(--text); word-wrap: break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1.1em 0 .5em; line-height: 1.3; }
.markdown-body h1 { font-size: 1.6em; border-bottom: 1px solid var(--border); padding-bottom: .2em; }
.markdown-body h2 { font-size: 1.35em; }
.markdown-body h3 { font-size: 1.15em; }
.markdown-body p { margin: .7em 0; }
.markdown-body a { color: var(--accent-ink); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
  padding: .1em .4em; font-family: var(--mono); font-size: .9em;
}
.markdown-body pre {
  background: #1f2430; color: #e6e8ef; padding: 14px 16px; border-radius: 10px;
  overflow-x: auto; margin: .8em 0;
}
.markdown-body pre code { background: none; border: none; color: inherit; padding: 0; }
.markdown-body blockquote {
  border-left: 3px solid var(--accent); margin: .8em 0; padding: .2em 1em;
  color: var(--muted); background: var(--accent-soft); border-radius: 0 8px 8px 0;
}
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: .6em 0; }
.markdown-body li { margin: .3em 0; }
.markdown-body img { max-width: 100%; border-radius: 8px; margin: .5em 0; }
.markdown-body table { border-collapse: collapse; margin: .8em 0; width: 100%; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 7px 10px; font-size: 13.5px; word-break: break-word; }
/* 20261010b#3（取代 20261010a#3 的做法）：每日 MD 表固定六列 =
   任务 | 清单 | 任务状态 | 优先级 | 时长 | 日期。
   诉求：清单/任务状态/优先级/时长/日期各列**按内容自适应宽度、不换行**，剩余空间全部留给任务列。
   做法：撤掉 table-layout:fixed（它会让第 1、2 列平分空白，把任务列压窄 → 任务列疯狂折行），
   改回 auto 布局；只对「六列及以上」的表给第 1 列 99%（吸收剩余宽度），
   第 2 列起 white-space:nowrap + width:1%（1% 只是最小宽度提示，实际宽度由内容决定）。
   :has(tr > :nth-child(6)) 用来把影响范围限定在这张六列表，别的 markdown 表格不受牵连。 */
.markdown-body table:has(tr > :nth-child(6)) :is(th, td):nth-child(1) { width: 99%; }
.markdown-body table:has(tr > :nth-child(6)) :is(th, td):nth-child(n+2) { white-space: nowrap; width: 1%; }
.markdown-body th { background: var(--surface-2); }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1040px) {
  .sidebar { width: 226px; }
  .notes-panel { width: 290px; }
}
@media (max-width: 860px) {
  .app-view { flex-direction: column; height: auto; min-height: 100vh; overflow: auto; }
  .sidebar {
    width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border);
  }
  .heat-wrap { display: block; }
  .side-tags { flex: none; max-height: 108px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; padding-bottom: 10px; }
  .side-foot { border-top: 1px solid var(--border); }
  .notes-panel { width: 100%; height: auto; max-height: 54vh; border-right: none; border-bottom: 1px solid var(--border); }
  .editor-split { flex-direction: column; }
  .note-input { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---------- 本地存储模式横幅 ---------- */
.local-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: #fff7e6; color: #9a6b00; border-bottom: 1px solid #ffe1a8;
  font-size: 12.5px; font-weight: 600; text-align: center;
  padding: 9px 16px; box-shadow: 0 2px 8px rgba(154, 107, 0, .12);
}
body.has-local-banner .app-view { height: calc(100vh - 40px); margin-top: 40px; }
body.has-local-banner .auth-view { padding-top: 64px; }

/* ---------- 我的清单（任务管理，参考滴答清单） ---------- */
.tl-layout { flex: 1; min-height: 0; display: flex; width: 100%; }
.tl-side { width: 232px; flex: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.tl-side-scroll { flex: 1; overflow-y: auto; padding: 14px 10px 6px; }
.tl-smartgroup { display: flex; flex-direction: column; gap: 2px; }
.tl-smart {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: none; background: none; color: var(--text); border-radius: 9px; font-size: 13.5px; text-align: left; cursor: pointer;
}
.tl-smart:hover { background: var(--surface-2); }
.tl-smart.on { background: var(--surface-2); font-weight: 700; }
.tl-sico { display: inline-flex; color: var(--muted); flex: none; }
.tl-smart.on .tl-sico { color: var(--accent); }
.tl-slabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-badge { font-size: 12px; color: var(--muted); font-weight: 600; }
.tl-smart.on .tl-badge { color: var(--accent); }
/* 需求 t#1：智能行「主按钮 + 悬浮 ⋯ 设置按钮」（鼠标悬浮才显示 ⋯；触屏常显） */
.tl-srow { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.tl-srow .tl-smart { flex: 1; min-width: 0; }
.tl-srow .tl-rowmore { opacity: 0; transition: opacity .12s; font-size: 14px; line-height: 1; padding: 3px 7px; }
.tl-srow:hover .tl-rowmore, .tl-srow:focus-within .tl-rowmore { opacity: 1; }
@media (hover: none) { .tl-srow .tl-rowmore { opacity: 1; } }
.tl-sec { display: flex; align-items: center; justify-content: space-between; margin: 14px 6px 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.tl-sec-add { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; }
.tl-sec-add:hover { color: var(--accent); }
.tl-lists { display: flex; flex-direction: column; gap: 2px; }
/* 需求 5（20261003e，本轮）：清单分组——分组标题行可点击折叠，带「⋯」设置 */
.tl-grp-head { display: flex; align-items: center; gap: 5px; padding: 7px 8px 4px 6px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.tl-grp-head:hover { background: var(--surface-2); color: var(--text); }
.tl-grp-caret { display: inline-flex; align-items: center; transition: transform .15s; }
.tl-grp-caret svg { width: 12px; height: 12px; transform: rotate(90deg); }
.tl-grp-head.closed .tl-grp-caret svg { transform: rotate(0deg); }
.tl-grp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-grp-cnt { font-weight: 600; opacity: .7; }
.tl-grp-more { border: none; background: none; cursor: pointer; padding: 2px; border-radius: 5px; color: inherit; display: inline-flex; opacity: 0; transition: opacity .12s; }
.tl-grp-head:hover .tl-grp-more { opacity: 1; }
.tl-grp-more:hover { background: var(--surface); color: var(--accent); }
.tl-grp-more svg { width: 13px; height: 13px; }
.tl-grp-body { display: flex; flex-direction: column; gap: 2px; }
/* 需求 4（20261004）：已归档清单小节——标题行之外，列表行整体降透明度表示「非活跃」 */
.tl-grp-arch .tl-listrow { opacity: .62; }
.tl-grp-arch .tl-listrow:hover { opacity: 1; }
.tl-empty-tip { font-size: 12.5px; color: var(--muted); padding: 6px 10px; margin: 0; }
.tl-side-foot { border-top: 1px solid var(--border); padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.tl-main-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 10px; }
.tl-main-l { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.tl-title { font-size: 19px; font-weight: 800; margin: 0; }
.tl-count { font-size: 12.5px; color: var(--muted); }
/* 需求 i#1：移动端左栏抽屉——开关按钮（桌面端不显示）+ 遮罩 */
.tl-sidebtn {
  display: none; align-items: center; gap: 5px; flex: none;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 9px; padding: 5px 9px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.2;
}
.tl-sidebtn:hover { border-color: var(--accent); color: var(--accent); }
.tl-sidebtn svg { display: block; flex: none; }
.tl-side-ov { position: fixed; inset: 0; background: rgba(15, 18, 30, .42); z-index: 1140; }
.tl-side-ov[hidden] { display: none; }
/* 需求 w#1：中栏三态视图切换（列表 / 日历 / 四象限） */
.tl-viewseg { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px; padding: 2px; }
.tl-viewbtn {
  display: inline-flex; align-items: center; gap: 5px; border: none; background: none;
  color: var(--muted); border-radius: 7px; padding: 5px 10px; font-size: 12.5px; cursor: pointer;
}
.tl-viewbtn:hover { color: var(--text); }
.tl-viewbtn.on { background: var(--surface); color: var(--accent); font-weight: 700; box-shadow: var(--shadow-sm); }
.tl-addbar { padding: 0 22px 8px; }
.tl-add-input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 14px; background: var(--surface-2); color: var(--text); }
.tl-add-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.tl-addctl { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tl-flags { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px 4px; background: var(--surface-2); }
.tl-flag { border: none; background: none; padding: 3px; cursor: pointer; color: var(--muted); display: inline-flex; border-radius: 6px; opacity: .5; }
.tl-flag:hover { opacity: 1; background: var(--surface); }
.tl-flag.on { opacity: 1; }
.tl-flag.f3.on { color: #e5484d; }
.tl-flag.f2.on { color: #f5a623; }
.tl-flag.f1.on { color: #3b82f6; }
.tl-flag.f0.on { color: var(--ok); }
.tl-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; cursor: pointer;
}
.tl-chip:hover { border-color: var(--accent); color: var(--accent); }
.tl-cico { display: inline-flex; }
.tl-groups { flex: 1; overflow-y: auto; padding: 4px 22px 26px; }
.tl-group { margin-bottom: 14px; }
.tl-group-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 6px 2px; }
/* 需求 m#1：任务回收站——剩余天数提示 + 一键清空按钮 */
.tl-rowdel { font-size: 11px; color: var(--muted); margin-left: auto; padding-right: 4px; white-space: nowrap; }
.tl-trash-clear { margin-left: auto; }
.tl-gcaret { color: var(--muted); font-size: 10px; }
.tl-gcount { font-size: 12px; color: var(--muted); font-weight: 600; }
.tl-rows { display: flex; flex-direction: column; }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; flex-wrap: wrap; }
.tl-row:hover { background: var(--surface-2); }
.tl-row.sel { background: var(--surface-2); border-color: var(--border); }
.tl-check { width: 18px; height: 18px; flex: none; border: 1.7px solid var(--border); border-radius: 50%; background: none; cursor: pointer; position: relative; padding: 0; }
.tl-check:hover { border-color: var(--accent); }
.tl-check.on { background: var(--accent); border-color: var(--accent); }
.tl-check.on::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tl-check.sm { width: 15px; height: 15px; }
.tl-check.sm.on::after { left: 4px; top: 1px; width: 4px; height: 7px; }
.tl-check.big { width: 22px; height: 22px; }
.tl-check.big.on::after { left: 6px; top: 2.5px; width: 6px; height: 11px; }
.tl-rowtitle { flex: 1; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row.done .tl-rowtitle { text-decoration: line-through; color: var(--muted); }
.tl-rowsub { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; flex: none; }
.tl-rowsub i { font-style: normal; }
.tl-rowflag { display: inline-flex; flex: none; }
/* 需求 5（20261004m）：日程 / 月视图在「状态」左侧加了优先级旗子，
   该容器需容纳「旗子 + 循环图标 + 状态文字」，故给足宽度并左对齐。 */
.tl-mc-status { display: inline-flex; align-items: center; gap: 4px; }
/* 优先级「无」(0)：绿色（与应用内「无优先级」标识一致），区别于 低(蓝)/中(橙)/高(红) */
.tl-rowflag.p0 { color: var(--ok); }
.tl-rowflag.p3 { color: #e5484d; }
.tl-rowflag.p2 { color: #f5a623; }
.tl-rowflag.p1 { color: #3b82f6; }
.tl-rowtime { font-size: 12.5px; color: var(--muted); flex: none; }
/* 需求 s#1：邮件提醒视图行（清单/提醒量 + 截止 + 触发时刻） */
.tl-rowmail-meta { font-size: 12px; color: var(--muted); flex: none; }
/* 需求 3（20261004b，本轮）：邮件行「来自哪个清单」标签（紧跟标题，一眼看出来源） */
.tl-rowmail-list {
  display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 168px;
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.tl-rowmail-list svg { flex: none; width: 12px; height: 12px; }
.tl-rowmail-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tl-rowmail.sent .tl-rowmail-list { opacity: .8; }
.tl-rowmail-due { font-size: 12.5px; color: var(--muted); flex: none; }
.tl-rowmail-at { font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 6px; flex: none; white-space: nowrap; }
.tl-rowmail.passed .tl-rowmail-at { color: var(--danger); background: var(--danger-soft); }
/* 需求 u#1：待发送邮件列表——发送状态（已发送 / 到点待发送）+ 后端未连接提示 */
.tl-rowmail.sent .tl-rowmail-at, .tl-rowmail-at.ok { color: #1f9d55; background: rgba(31, 157, 85, .12); }
.tl-rowmail-at.due { color: var(--danger); background: var(--danger-soft); }
.tl-rowmail.sent .tl-rowtitle { color: var(--muted); }
.tl-rowmail.sent { opacity: .78; }
.tl-mail-offline { display: flex; align-items: center; gap: 7px; margin: 6px 0 12px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; color: #b26a00; background: rgba(255, 170, 0, .13); }
.tl-mail-offline svg { flex: none; }
.tl-mail-empty { font-size: 12.5px; color: var(--muted); padding: 6px 2px 2px; }
/* 需求 e#11：任务行描述（开启「显示描述」后展示，独占一行） */
.tl-rowdesc-wrap { flex-basis: 100%; order: 9; padding-left: 30px; min-width: 0; }
.tl-rowdesc { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 需求 g#1：看板视图列窄，备注需自动换行、不得溢出列宽 */
.tl-board-body .tl-rowdesc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; }
/* 需求 4：任务行右侧元信息四列对齐（状态 / 优先级 / 时间 / 日期）。
   每列固定宽度 + 整组右对齐，使各行竖排对齐。 */
/* 需求 3（20261005d）：日期弹窗四个快捷按钮的选中态 */
.tl-picker-quick button.on { background: var(--accent-soft, #eef1fd); color: var(--accent); border-color: var(--accent); font-weight: 600; }

.tl-rowmeta { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.tl-rowmeta > span { display: inline-flex; align-items: center; flex: none; min-width: 0; }
.tl-rowmeta .tl-mc-status { width: auto; min-width: 50px; justify-content: flex-start; }
.tl-rowmeta .tl-mc-prio { width: 18px; justify-content: center; }
.tl-rowmeta .tl-mc-span { width: 64px; justify-content: flex-end; text-align: right; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tl-rowmeta .tl-mc-day { width: 48px; justify-content: flex-end; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* 需求 3（20261004d）：时长列改为按内容自适应。
   需求 6（20261005c，用户反馈「标签没对齐」）：**恢复定宽 + 右对齐** ——
   列表 / 四象限里 状态(68) / 旗(20) / 时长(70) 三列定宽，各行纵向对齐，时长右端在同一条竖线上。 */
.tl-row .tl-rowmeta .tl-mc-span { width: 64px; min-width: 64px; justify-content: flex-end; text-align: right; }
/* 需求 3（20261004，本轮）：看板改回「优先级旗子」列（回退 20261003e 的整行着色方案），
   故移除 .tl-row.row-board.p<n> 标题着色规则。旗子列宽恢复 18px 与其它视图对齐。 */
.tl-board-body .tl-rowmeta .tl-mc-prio { width: 18px; justify-content: center; }
/* 需求 1（20261004b，本轮）：看板列窄，时长列仍固定 58px 且右对齐 → 时长数字左边空出一大截（红框）。
   看板里让时长列按内容自适应，紧跟在优先级旗子右边，不再撑出空白。 */
.tl-board-body .tl-rowmeta .tl-mc-span { width: auto; min-width: 0; justify-content: flex-end; }
/* 需求 2 / 3：重复任务「循环」图标——浅灰、不占额外空位（无重复时不渲染元素） */
.tl-rowrepeat { display: inline-flex; flex: none; align-items: center; color: var(--muted); opacity: .75; margin-right: 3px; }
.tl-rowrepeat svg { width: 13px; height: 13px; }
/* 需求 2（20261003e，本轮）：日程视图任务标题用优先级色（替代原来的整行灰色） */
.tl-ag-bar .tl-rowtitle { color: var(--text); }
.tl-ag-bar.p0 .tl-rowtitle { color: #1f7a4d; }
.tl-ag-bar.p1 .tl-rowtitle { color: #2f6fd0; }
.tl-ag-bar.p2 .tl-rowtitle { color: #c07806; }
.tl-ag-bar.p3 .tl-rowtitle { color: var(--danger); }
.tl-mini { border: none; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 2px 6px; border-radius: 6px; flex: none; }
.tl-mini:hover { background: var(--surface); color: var(--text); }
.tl-mini.danger:hover { color: var(--danger); }
.tl-empty { text-align: center; padding: 46px 0; color: var(--muted); }
/* 需求 v#2：空状态插画 = 通用灰线图标（原为 emoji） */
.tl-empty-ill { display: flex; justify-content: center; margin-bottom: 10px; color: #b6bccb; }
/* 需求 4（20261004q）：待办空状态用 64 视口的大插画（浅紫圆角方牌），32px 偏小、与参考图不符 → 44px */
.tl-empty-ill svg { width: 44px; height: 44px; }
.tl-empty p { font-size: 13px; margin: 0; }
/* 右栏：任务详情 */
.tl-detail { width: var(--tl-detail-w, 384px); flex: none; border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; padding: 18px 18px 24px; }
.tl-d-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.tl-d-title { flex: 1; border: none; background: none; font-size: 16px; font-weight: 700; color: var(--text); padding: 2px 0; }
.tl-d-title:focus { outline: none; }
.tl-iconbtn { border: none; background: none; color: var(--muted); cursor: pointer; padding: 3px; display: inline-flex; flex: none; }
.tl-iconbtn:hover { color: var(--text); }
.tl-d-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tl-d-flags { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.tl-d-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.tl-d-sec { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; margin: 16px 0 8px; }
/* 需求 3（20261004j）：待办历史记录（详情面板底部）——每天一条 + 子任务树 */
.tl-hist-sec { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.tl-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-hist-item { padding: 6px 8px; border-radius: 8px; border-left: 2px solid var(--border); background: var(--surface-2, transparent); }
.tl-hist-item.st-done { border-left-color: #2f9e5e; }
.tl-hist-item.st-overdue { border-left-color: #d9534f; }
.tl-hist-item.st-todo { border-left-color: var(--border); }
.tl-hist-item.st-doing { border-left-color: #1677ff; }
.tl-hist-line { display: flex; align-items: center; gap: 8px; }
.tl-hist-day { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tl-hist-badge { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.tl-hist-item.st-done .tl-hist-badge { background: #e7f6ec; color: #1a7f43; }
.tl-hist-item.st-overdue .tl-hist-badge { background: #fdeceb; color: #b93a37; }
.tl-hist-item.st-todo .tl-hist-badge { background: #eef0f4; color: var(--muted); }
.tl-hist-item.st-doing .tl-hist-badge { background: #e7f0ff; color: #1668dc; }
.tl-hist-time { font-size: 12px; color: var(--text); opacity: .8; margin-left: auto; white-space: nowrap; }
.tl-hist-subs { list-style: none; margin: 6px 0 2px; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 3px; border-left: 1px dashed var(--border); margin-left: 4px; }
.tl-hist-sub { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.tl-hist-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex: none; }
.tl-hist-sub.st-done .tl-hist-dot { background: #2f9e5e; }
.tl-hist-sub.st-overdue .tl-hist-dot { background: #d9534f; }
.tl-hist-subtitle { color: var(--text); }
.tl-hist-sub.st-done .tl-hist-subtitle { text-decoration: line-through; opacity: .7; }
.tl-hist-st { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* 需求 2（20261004k）：标题右侧的「已完成/总天数」+ 日历按钮 */
.tl-hist-count { display: inline-flex; align-items: center; gap: 6px; }
.tl-hist-calbtn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
  padding: 1px 5px; font-size: 12px; line-height: 1.4; cursor: pointer;
}
.tl-hist-calbtn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* 需求 1（20261004k）：每周 / 每月 的选择弹窗 */
.tl-rep-ov { position: fixed; inset: 0; background: rgba(15, 18, 30, .42); z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tl-rep-box { width: 380px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); }
.tl-rep-box h4 { margin: 0 0 6px; font-size: 14px; }
.tl-rep-hint { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.tl-rep-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tl-rep-grid.wk { grid-template-columns: repeat(7, 1fr); }
.tl-rep-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--text); cursor: pointer; }
.tl-rep-cell input { cursor: pointer; margin: 0; }
.tl-rep-cell span { white-space: nowrap; }
.tl-rep-cell.sm span { font-family: var(--mono); font-size: 11.5px; }
.tl-rep-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tl-d-mini { border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-ink); border-radius: 6px; padding: 2px 9px; font-size: 12px; font-family: inherit; cursor: pointer; }
.tl-d-mini:hover { border-color: var(--accent); background: var(--accent-soft); }
.tl-d-repsum { margin-top: 6px; font-size: 12px; color: var(--accent-ink); }

/* 需求 2（20261004k）：历史日历弹窗（红绿标识） */
.tl-hc-box { width: 330px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); }
.tl-hc-box h4 { margin: 0 0 4px; font-size: 14px; }
.tl-hc-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.tl-hc-wk span { text-align: center; font-size: 11.5px; color: var(--muted); }
.tl-hc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tl-hc-day, .tl-hc-blank { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 12px; font-style: normal; color: var(--text); position: relative; }
.tl-hc-day.st-done { background: #e7f6ec; color: #1a7f43; font-weight: 600; }
.tl-hc-day.st-overdue { background: #fdeceb; color: #b93a37; font-weight: 600; }
.tl-hc-day.st-todo { background: #f1f2f5; color: var(--muted); }
.tl-hc-day.st-doing { background: #e7f0ff; color: #1668dc; }
.tl-hc-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tl-hc-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.tl-hc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tl-hc-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tl-hc-legend .st-done i { background: #2f9e5e; }
.tl-hc-legend .st-overdue i { background: #d9534f; }
.tl-hc-legend .st-todo i { background: #c8ccd4; }
.tl-hc-legend .st-doing i { background: #1677ff; }
.tl-hc-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 10px; }
.tl-hc-mv { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; width: 26px; height: 24px; font-size: 14px; line-height: 1; cursor: pointer; }
.tl-hc-mv:hover { border-color: var(--accent); color: var(--accent-ink); }
.tl-hc-cur { font-size: 12.5px; font-weight: 600; color: var(--text); min-width: 74px; text-align: center; }
.tl-d-note { width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 13px; background: var(--surface-2); color: var(--text); resize: vertical; }
.tl-d-note:focus { outline: none; border-color: var(--accent); background: var(--surface); }
/* 需求 k#2：待办笔记——图标工具条 + 浮层 + 大块 MD 笔记编辑区 */
/* 需求 o#5：图标工具条所有按钮统一样式、规整为一行（超出可横向滚动，不换行） */
.tl-d-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 需求 o#4：按钮样式完全参考快速笔记 .quick-tools（无边框、hover 浅蓝底），与编辑窗口风格统一 */
.tl-dtbtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; min-width: 30px; padding: 0 7px; border: none; border-radius: 8px; background: none; color: #8b91a3; cursor: pointer; font-size: 13px; line-height: 1; font-family: inherit; }
.tl-dtbtn svg { width: 16px; height: 16px; display: block; }
.tl-dtbtn:hover, .tl-dtbtn.on { color: var(--accent-ink); background: var(--accent-soft); }
/* 需求 q#7：提取子任务按钮与相邻图标按钮同底色（去掉不同背景高亮） */
.tl-d-pop { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); padding: 10px 12px; margin-bottom: 14px; }
.tl-d-pop[hidden] { display: none; }
.tl-d-pop-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-d-pop-label { font-size: 12px; color: var(--muted); }
/* 需求 n#7：评论面板 */
.tl-dtcount { font-size: 10.5px; color: var(--muted); margin-left: 4px; min-width: 8px; }
.tl-comment-pop { display: flex; flex-direction: column; gap: 10px; }
.tl-comment-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.tl-comment-empty { font-size: 12px; color: var(--muted); margin: 0; }
.tl-comment { border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; background: var(--surface-2); }
.tl-comment-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.tl-comment-time { font-size: 11px; color: var(--muted); }
.tl-comment-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.tl-comment-del:hover { color: var(--danger); }
.tl-comment-text { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.tl-comment-add { display: flex; align-items: flex-end; gap: 6px; }
.tl-comment-ta { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; color: var(--text); resize: vertical; background: var(--surface); }
.tl-comment-ta:focus { outline: none; border-color: var(--accent); }
.tl-d-mdbtn { border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 12px; padding: 2px 9px; cursor: pointer; }
.tl-d-mdbtn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tl-d-note.md { min-height: 200px; font-size: 13px; line-height: 1.65; padding-right: 30px; }
/* 需求 o#4：编辑区聚焦高亮，完全参考快速笔记 .quick-card:focus-within 的浅蓝描边 + 柔光 */
.tl-d-note.md:focus { outline: none; border-color: #bcdcff; background: #fff; box-shadow: 0 0 0 3px rgba(91, 108, 255, .10); }
/* 需求 n#6：展开按钮浮在编辑区右上角（对齐快速笔记 .quick-toggle 的展开方式） */
.tl-d-notebox .tl-d-exbtn { position: absolute; top: 6px; right: 6px; z-index: 3; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--muted); }
.tl-d-notebox .tl-d-exbtn svg { display: block; margin: 0 auto; }
.tl-d-note-preview.md-body { min-height: 200px; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--surface-2); font-size: 13px; line-height: 1.65; overflow: auto; }
.tl-d-note-preview.md-body[hidden] { display: none; }
/* 需求 m#3：笔记编辑区展开按钮（复用 .tl-d-mdbtn 外观）+ 展开态放大编辑区（参考快速笔记展开方式） */
.tl-d-exbtn { display: inline-flex; align-items: center; justify-content: center; }
/* 需求 n#8：选中文本浮出富文本工具条 */
.tl-wz-bar {
  position: fixed; z-index: 1200; display: flex; align-items: center; gap: 1px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 28px rgba(15, 18, 30, .18); padding: 4px;
}
.tl-wz-bar.hidden { display: none; }
.tl-wz-btn {
  min-width: 30px; height: 30px; padding: 0 7px; border: none; background: none; color: var(--text);
  border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; display: inline-grid; place-items: center;
}
.tl-wz-btn b { font-weight: 800; }
.tl-wz-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.tl-d-exbtn svg { display: block; }
.tl-detail.expanded .tl-d-note { min-height: 320px; max-height: 72vh; overflow-y: auto; }
.tl-detail.expanded .tl-d-exbtn { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
/* 需求 q#4：桌面端「待办列表 ↔ 笔记详情」之间的可拖拽滑块（调整右栏宽度）；手机端由 CSS 隐藏 */
.tl-d-split { flex: none; width: 7px; align-self: stretch; cursor: col-resize; background: transparent; position: relative; z-index: 3; touch-action: none; }
.tl-d-split::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 44px; border-radius: 2px; background: var(--border); transition: background .15s, height .15s; }
.tl-d-split:hover::before, .tl-d-split.dragging::before { background: var(--accent); height: 66px; }
@media (max-width: 1100px) { .tl-d-split { display: none !important; } }

/* 紧凑 Markdown 正文（笔记预览） */
.md-body { color: var(--text); word-break: break-word; }
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }
.md-body h1, .md-body h2, .md-body h3 { margin: 10px 0 6px; line-height: 1.3; }
.md-body h1 { font-size: 17px; } .md-body h2 { font-size: 15px; } .md-body h3 { font-size: 14px; }
.md-body p { margin: 6px 0; }
.md-body ul, .md-body ol { margin: 6px 0; padding-left: 20px; }
.md-body li { margin: 2px 0; }
.md-body a { color: var(--accent-ink); text-decoration: none; }
.md-body code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-family: var(--mono); font-size: 12px; }
.md-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; overflow: auto; }
.md-body pre code { border: none; padding: 0; background: none; }
.md-body blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--border); color: var(--muted); }
/* 需求 l#3：笔记编辑区「插入区块」菜单 */
.tl-d-notebox { position: relative; }
.tl-d-sec-r { display: inline-flex; align-items: center; gap: 6px; }
.tl-d-mdadd { display: inline-flex; align-items: center; justify-content: center; }
.tl-d-mdadd svg { display: block; }
.tl-d-mdmenu {
  position: absolute; left: 0; top: 2px; z-index: 40;
  min-width: 212px; max-height: 322px; overflow: auto; padding: 6px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: 0 14px 36px rgba(15, 18, 30, .16);
}
.tl-d-mdmenu[hidden] { display: none; }
.tl-mdmenu-sep { height: 1px; background: var(--border); margin: 5px 6px; border-radius: 1px; }
.tl-mdmi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: none; background: none; border-radius: 7px; color: var(--text); font-size: 13px; line-height: 1.2; cursor: pointer; text-align: left; }
.tl-mdmi:hover { background: var(--accent-soft); color: var(--accent-ink); }
.tl-mdmi-ico { width: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.tl-mdmi:hover .tl-mdmi-ico { color: var(--accent); }
.tl-mdmi-ico sub { font-size: 9px; }
.tl-subs { display: flex; flex-direction: column; gap: 3px; }
.tl-sub { display: flex; align-items: center; gap: 9px; padding: 5px 2px; }
.tl-sub-title { flex: 1; font-size: 13px; }
.tl-sub.done .tl-sub-title { text-decoration: line-through; color: var(--muted); }
.tl-sub-add input { width: 100%; border: none; border-bottom: 1px dashed var(--border); background: none; padding: 7px 2px; font-size: 13px; color: var(--text); }
.tl-sub-add input:focus { outline: none; border-bottom-color: var(--accent); }
.tl-d-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
/* 中栏：日历（需求 x#1 起支持年/月/周/日/日程/多日/多周多视图） */
.tl-cal { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 22px 0; overflow: hidden; }
.tl-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tl-cal-label { font-size: 15px; font-weight: 700; }
.tl-cal-nav { display: inline-flex; gap: 6px; }
.tl-cal-nav button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 7px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.tl-cal-nav button:hover { border-color: var(--accent); color: var(--accent); }
/* 需求 h#3：多日/多周视图的天数/周数步进器 */
.tl-cal-right { display: inline-flex; align-items: center; gap: 10px; }
.tl-cal-step { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface-2); }
.tl-cal-step button { border: none; background: none; color: var(--muted); width: 22px; height: 22px; border-radius: 999px; cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.tl-cal-step button:hover { background: var(--accent-soft); color: var(--accent); }
.tl-cal-step b { font-size: 12.5px; color: var(--text); min-width: 34px; text-align: center; }
.tl-cal-week, .tl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tl-cal-week span { text-align: center; font-size: 11.5px; color: var(--muted); padding: 4px 0; }
.tl-cal-grid { gap: 2px; }
/* 需求 w#1+w#3：日期格改为「日号左置 + 计数右上 + 任务色条」，日号与计数不再叠成两个圆 */
.tl-cell {
  position: relative; border: 1px solid transparent; background: none; cursor: pointer;
  min-height: 74px; border-radius: 9px; display: flex; flex-direction: column; align-items: stretch;
  gap: 3px; padding: 7px 7px 8px; text-align: left; overflow: hidden;
}
.tl-cell:hover { background: var(--surface-2); }
.tl-cell.out { opacity: .55; }
.tl-cell.out .tl-cn { color: var(--muted); }
.tl-ctop { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tl-cn { font-size: 12.5px; line-height: 1; }
.tl-cell.today .tl-cn {
  background: var(--accent); color: #fff; border-radius: 50%; width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.tl-cnum { font-size: 10px; font-weight: 700; color: var(--muted); flex: none; }
.tl-cell.sel { border-color: var(--accent); background: var(--accent-soft); }
.tl-cchips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-cchip {
  display: block; font-size: 10.5px; line-height: 15px; padding: 0 5px; border-radius: 4px;
  background: var(--surface-2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-cchip i { font-style: normal; opacity: .75; margin-right: 3px; }
.tl-cchip.p3 { background: #fdecec; color: #c93b40; }
.tl-cchip.p2 { background: #fff3e2; color: #b8720a; }
.tl-cchip.p1 { background: #eaf2ff; color: #2f6fd0; }
.tl-cchip.p0 { background: var(--accent-soft); color: var(--accent-ink); }
.tl-cmore { font-size: 10px; color: var(--muted); padding-left: 5px; }
.tl-cal-daylist { margin-top: 16px; }
.tl-cal-dayhead { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
/* ---------- 需求 x#1：日历多视图 ---------- */
.tl-calbody { flex: 1; min-height: 0; overflow: auto; padding-bottom: 54px; }
/* 需求 h#5：多周视图与月视图同构 —— 7 列星期网格 + N 行周；行高更接近日历密度 */
.tl-cal-grid.mw { gap: 3px; grid-auto-rows: minmax(96px, 1fr); }
.tl-cal-grid.mw .tl-cell { min-height: 96px; }
/* 底部悬浮胶囊切换条（当前视图高亮，右侧橙色「今天」） */
.tl-calbar { flex: none; display: flex; justify-content: center; padding: 8px 0 14px; pointer-events: none; }
.tl-calbar-in {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; overflow-x: auto;
  background: rgba(26, 28, 34, .93); border-radius: 999px; padding: 4px;
  box-shadow: 0 8px 22px rgba(15, 18, 26, .28);
}
.tl-cvbtn {
  border: none; background: none; color: #c6cbd6; font-size: 12.5px; line-height: 1;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.tl-cvbtn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
/* 需求 y#3 / e#6：选中视图 = 白底 + 「今天」原色文字（去紫底）；无独立「今天」按钮 */
.tl-cvbtn.on { color: var(--accent-ink); background: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(15, 18, 26, .22); }
/* 年视图：12 个月迷你网格 + 任务热力底色 */
.tl-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.tl-ymon { border: 1px solid var(--border); border-radius: 10px; padding: 8px 9px 10px; background: var(--surface); }
.tl-ymon-t { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.tl-yweek, .tl-ygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tl-yweek span { text-align: center; font-size: 10.5px; color: var(--muted); }
.tl-ycell {
  border: none; background: none; color: var(--text); font-size: 11.5px; font-family: inherit;
  aspect-ratio: 1 / 1; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tl-ycell:hover { outline: 1px solid var(--accent); }
.tl-ycell.out { color: var(--muted); opacity: .4; }
/* 需求 e#8：年视图热力——减淡 + 分层（l1 最浅 → l5 最深，仍保持浅色不刺眼） */
.tl-ycell.l1 { background: #eef2fc; color: #2a3142; }
.tl-ycell.l2 { background: #dde6fa; color: #2a3142; }
.tl-ycell.l3 { background: #c8d8f6; color: #1f3a7a; }
.tl-ycell.l4 { background: #aec6f1; color: #16306b; }
.tl-ycell.l5 { background: #8fb0ec; color: #102a63; }
.tl-ycell.today { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.tl-ycell.sel { background: var(--accent); color: #fff; font-weight: 700; }
/* 周 / 日 / 多日视图：时间轴网格 */
.tl-tg { display: flex; flex-direction: column; min-width: 0; }
.tl-tg-head { display: grid; position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--border); }
.tl-tg-dh { text-align: center; padding: 5px 0 7px; font-size: 11.5px; color: var(--muted); border-left: 1px solid var(--border); cursor: pointer; }
.tl-tg-dh b { display: block; font-size: 15px; color: var(--text); line-height: 1.25; }
.tl-tg-dh.today b { color: var(--accent); }
/* 日视图：单日表头左对齐（与滴答清单一致） */
.tl-tg.wide .tl-tg-dh { text-align: left; padding-left: 16px; }
.tl-tg.wide .tl-tg-dh b { display: inline; font-size: 14px; margin-right: 6px; }
.tl-tg-allday { display: grid; min-height: 30px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tl-tg-albl { font-size: 10.5px; color: var(--muted); padding: 8px 8px 0 0; text-align: right; }
.tl-tg-acell { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-left: 1px solid var(--border); min-width: 0; }
.tl-tg-acell .tl-cchip { border: none; text-align: left; cursor: pointer; font-family: inherit; width: 100%; }
/* 需求 n#5：全天任务用虚线蓝底 + 「全天」标记区分，不进入时间列撑满高度 */
.tl-cchip.allday { background: #eef3ff; border: 1px dashed #9db8ff !important; color: #2b4cb3; }
.tl-cchip.allday .allday-tag { font-style: normal; font-size: 10px; color: #5b78d6; margin-left: 5px; opacity: .9; }
/* 需求 4（本轮）：多日 / 日 / 周视图「全天」行的持续时间(全天)右对齐——推到色条最右 */
.tl-tg-acell .tl-cchip .allday-tag { margin-left: auto; padding-left: 6px; }
.tl-tg-grid { display: grid; }
.tl-tg-axis { padding-top: 0; }
.tl-tg-hr { height: 42px; font-size: 10.5px; color: var(--muted); text-align: right; padding-right: 8px; transform: translateY(-6px); }
.tl-tg-col {
  position: relative; border-left: 1px solid var(--border);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, var(--border) 41px, var(--border) 42px);
}
.tl-tg-blk {
  position: absolute; border: none; border-radius: 6px; text-align: left; padding: 4px 8px; overflow: hidden;
  font-size: 11.5px; line-height: 1.35; color: #374151; cursor: pointer; font-family: inherit; background: var(--surface-2);
  /* 需求 4：重叠任务改为叠层（同一时间段多任务全宽叠放），加阴影区分层次 */
  box-shadow: 0 1px 3px rgba(15, 18, 30, .12);
}
.tl-tg-blk b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 20261013b#2：跨天拖拽 —— 目标列高亮 + 被拖块半透明 */
.tl-tg-col.drag-over, .tl-tg-acell.drag-over { background-color: rgba(22, 119, 255, .08); box-shadow: inset 0 0 0 1px var(--accent); }
.tl-tg-blk.dragging, .tl-tg-acell .tl-cchip.dragging { opacity: .55; }
.tl-tg-blk i { font-style: normal; opacity: .8; font-size: 10.5px; display: flex; align-items: baseline; gap: 5px; }
/* 需求 4：持续范围(起–止)轻标注，位于时长之后 */
.tl-tg-blk i .tl-tg-range { font-style: normal; font-size: 9.5px; opacity: .7; white-space: nowrap; }
.tl-tg-blk.p3 { background: #fdecec; color: #b5353a; }
.tl-tg-blk.p2 { background: #fff3e2; color: #a86707; }
.tl-tg-blk.p1 { background: #eaf2ff; color: #2f6fd0; }
/* 需求 9（本轮）：优先级「无」(p0) 与旗子一样是绿色，故日视图时间块也用绿色系（与 .tl-rowflag.p0 呼应） */
.tl-tg-blk.p0 { background: #e6f6ee; color: #1f7a4d; border-color: #bfe6d1; }
.tl-tg-blk:hover { filter: brightness(.97); box-shadow: 0 0 0 1px var(--accent) inset; }
/* 日程视图 */
.tl-agenda { display: flex; flex-direction: column; gap: 10px; }
.tl-ag { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tl-ag-h { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--surface-2); font-size: 13px; }
.tl-ag-h b { font-weight: 700; }
.tl-ag-h span { font-size: 11.5px; color: var(--muted); }
.tl-ag-h em { font-style: normal; font-size: 11px; color: #fff; background: var(--accent); border-radius: 99px; padding: 1px 8px; }
.tl-ag-rows { display: flex; flex-direction: column; padding: 6px 10px 10px; gap: 6px; }
.tl-ag-row { display: flex; align-items: stretch; gap: 10px; border: none; background: none; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }
/* 需求 p#6：左侧时间列加宽并禁止折行（此前 44px 宽导致「09:30–11:07」被折成两行） */
.tl-ag-time { width: 72px; flex: none; font-size: 11.5px; color: var(--muted); padding-top: 7px; text-align: right; white-space: nowrap; }
/* 需求 5（本轮）：日程视图去掉左侧持续时间列与色条内时长；尾部（标签/状态/优先级）整体右对齐，
   状态与优先级按固定列宽竖向对齐，标签贴右。 */
.tl-ag-tail { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.tl-ag-tags { display: inline-flex; align-items: center; gap: 4px; }
.tl-ag-col-status { width: 46px; flex: none; display: inline-flex; justify-content: center; align-items: center; }
.tl-ag-col-flag { width: 18px; flex: none; display: inline-flex; justify-content: center; align-items: center; }
.tl-ag-bar { flex: 1; min-width: 0; border-radius: 6px; padding: 6px 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; }
/* 需求 p#5：标题可压缩省略，右侧标签 / 状态 / 优先级徽标固定不换行 */
.tl-ag-bar b { font-size: 12.5px; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.tl-ag-bar i { font-style: normal; font-size: 11px; color: #6b7280; flex: none; white-space: nowrap; }
.tl-ag-bar .tl-rowtag, .tl-ag-bar .tl-rowstatus, .tl-ag-bar .tl-rowflag { flex: none; }
.tl-ag-bar.p3 { background: #fdecec; }
.tl-ag-bar.p3 b { color: #b5353a; }
.tl-ag-bar.p2 { background: #fff3e2; }
.tl-ag-bar.p2 b { color: #a86707; }
.tl-ag-bar.p1 { background: #eaf2ff; }
.tl-ag-bar.p1 b { color: #2f6fd0; }
/* 需求 2（20261003e，本轮更正）：日程视图任务标题用**优先级色**（原先 p0 是中性灰 #5b6472，
   看上去跟"没有优先级"一样没有颜色）。p0 与旗子一致用绿色系（--ok #2bb673 的深色可读版）。
   底色也相应改淡绿，与 .tl-tg-blk.p0 / .tl-rowflag.p0 呼应。 */
.tl-ag-bar.p0 { background: #e6f6ee; }
.tl-ag-bar.p0 b { color: #1f7a4d; }
/* 需求 2（20261003e，本轮）：日程视图右侧原「优先级旗子」列改为「时长」列 */
.tl-ag-col-span { min-width: 34px; flex: none; display: inline-flex; justify-content: flex-end; align-items: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tl-ag-row:hover .tl-ag-bar { box-shadow: 0 0 0 1px var(--accent) inset; }
@media (max-width: 1180px) { .tl-year { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .tl-year { grid-template-columns: repeat(2, 1fr); } }
/* 需求 w#1：四象限视图 */
.tl-quad { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 22px 20px; }
.tl-quad-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.tl-quad-cell {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); border-top-width: 3px; border-radius: 12px;
}
.tl-quad-cell.q1 { border-top-color: #e5484d; }
.tl-quad-cell.q2 { border-top-color: #f5a623; }
.tl-quad-cell.q3 { border-top-color: #3b82f6; }
.tl-quad-cell.q4 { border-top-color: var(--ok); }
.tl-quad-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.tl-qico { display: inline-flex; flex: none; }
.tl-quad-cell.q1 .tl-qico { color: #e5484d; }
.tl-quad-cell.q2 .tl-qico { color: #f5a623; }
.tl-quad-cell.q3 .tl-qico { color: #3b82f6; }
.tl-quad-cell.q4 .tl-qico { color: var(--ok); }
.tl-qtitle { flex: 1; font-size: 13px; font-weight: 700; }
.tl-qadd { display: inline-flex; border: none; background: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 6px; }
.tl-qadd:hover { background: var(--surface-2); color: var(--accent); }
.tl-quad-body { flex: 1; overflow-y: auto; padding: 6px 8px 10px; }
.tl-qgroup { margin-bottom: 6px; }
.tl-qghead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px; }
.tl-qempty { text-align: center; font-size: 12px; color: var(--muted); padding: 24px 0; }
/* 日期/时间段选择弹窗 */
.tl-modal-ov { position: fixed; inset: 0; background: rgba(15, 18, 30, .42); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tl-picker { width: 320px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 16px; }
.tl-picker-tabs { display: flex; gap: 4px; background: var(--surface-2); border-radius: 9px; padding: 3px; margin-bottom: 12px; }
.tl-picker-tabs button { flex: 1; border: none; background: none; padding: 7px 0; border-radius: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.tl-picker-tabs button.on { background: var(--surface); color: var(--text); font-weight: 700; }
.tl-picker-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.tl-picker-quick button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px; padding: 8px 0; font-size: 12px; color: var(--text); cursor: pointer; }
.tl-picker-quick button:hover { border-color: var(--accent); color: var(--accent); }
.tl-pc-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.tl-pc-head span { font-size: 13.5px; font-weight: 700; }
.tl-pc-head button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; }
.tl-pc-head button:hover { background: var(--surface-2); color: var(--text); }
.tl-pc-week, .tl-pc-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tl-pc-week span { text-align: center; font-size: 11px; color: var(--muted); padding: 3px 0; }
.tl-pc-cell { border: none; background: none; cursor: pointer; padding: 6px 0; border-radius: 8px; font-size: 12.5px; color: var(--text); }
.tl-pc-cell:hover { background: var(--surface-2); }
.tl-pc-cell.out { color: var(--muted); opacity: .5; }
.tl-pc-cell.today { color: var(--accent); font-weight: 700; }
.tl-pc-cell.sel { background: var(--accent); color: #fff; font-weight: 700; }
.tl-prow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; }
.tl-prow input { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: var(--surface-2); color: var(--text); font-size: 13px; }
/* 需求 g#2：时间段弹窗去掉各行横线分隔（仅作用于该弹窗，不影响其它 .tl-prow 用法） */
#tl-picker-ov .tl-prow { border-top: none; }
#tl-picker-ov .tl-prow input[type="datetime-local"] { width: auto; min-width: 178px; }
.tl-picker-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* 简易选择弹窗 */
.tl-askov { position: fixed; inset: 0; background: rgba(15, 18, 30, .42); z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tl-askbox { width: 300px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); }
.tl-askbox h4 { margin: 0 0 12px; font-size: 14px; }
.tl-askopts { display: flex; flex-direction: column; gap: 4px; }
.tl-askopt { text-align: left; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 9px 12px; font-size: 13px; cursor: pointer; }
.tl-askopt:hover { border-color: var(--accent); color: var(--accent); }
.tl-askcancel { width: 100%; margin-top: 12px; border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 6px; }
@media (max-width: 1100px) { .tl-detail { width: 336px; } }
@media (max-width: 900px) {
  .tl-detail { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); z-index: 1100; box-shadow: -8px 0 28px rgba(15, 18, 30, .18); }
  .tl-side { width: 200px; }
}
@media (max-width: 900px) {
  .tl-quad { overflow-y: auto; }
  .tl-quad-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(190px, auto); }
}
@media (max-width: 700px) {
  .tl-layout { flex-direction: column; }
  /* 需求 i#1：手机端左栏（清单/效率/过滤器/标签）改为左侧抽屉。
     原实现 max-height:200px 只能露出 3 行、「清单/效率/过滤器/标签」被整段裁掉，
     现改为点「☰ 清单」从左侧滑出、点遮罩或选中项自动收起；桌面端布局完全不变。 */
  .tl-side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1150;
    width: min(84vw, 304px); height: auto; max-height: none;
    border-right: 1px solid var(--border); border-bottom: none;
    border-radius: 0 16px 16px 0;
    box-shadow: 8px 0 28px rgba(15, 18, 30, .18);
    transform: translateX(-102%);
    transition: transform .22s ease;
  }
  .tl-side.open { transform: none; }
  .tl-sidebtn { display: inline-flex; }
  body.tl-side-lock { overflow: hidden; }
  .tl-detail { width: 100%; }
  .tl-viewbtn span { display: none; }

  /* 需求 i#1：手机端收紧内边距，把宽度让给任务列表与甘特图；
     头部吸顶（贴在 App 侧栏下方），保证往下滚任务时「☰ 清单」始终可点 */
  .tl-main-head {
    position: sticky; top: var(--side-h, 0px); z-index: 65;
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-wrap: wrap; row-gap: 8px; padding: 10px 14px 8px;
  }
  .tl-main-l { flex: 1 1 auto; align-items: center; }
  .tl-viewseg { flex: none; margin-left: auto; }
  .tl-main .tl-addbar { margin-top: 12px; padding: 14px 14px 9px; }
  .tl-groups { padding: 4px 14px 26px; }
}
.btn-ghost.danger { color: var(--danger); border-color: var(--danger-soft); }
.btn-ghost.danger:hover { background: var(--danger-soft); }

/* ---------- 后台 ---------- */
.admin-wrap { flex: 1; overflow-y: auto; padding: 26px 30px; width: 100%; }
.sec-title { font-size: 15px; font-weight: 700; margin: 22px 0 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.stat-num { font-size: 24px; font-weight: 800; color: var(--accent-ink); }
.stat-label { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: auto; box-shadow: var(--shadow-sm);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.admin-table th { background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 12.5px; }
.admin-table tr:last-child td { border-bottom: none; }
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 99px; background: var(--surface-2);
  color: var(--muted); font-size: 12px; font-weight: 600; border: 1px solid var(--border);
}
.badge.admin { background: var(--accent-soft); color: var(--accent-ink); border-color: #cfe0ff; }
.badge.ok { background: #e8f7ee; color: #1a7f43; border-color: #c9ecd6; }
.badge.off { background: #fdecec; color: #b3261e; border-color: #f8d4d2; }

/* ---------- 后台站点设置 ---------- */
.admin-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 4px;
}
.admin-card .sec-title { margin: 0 0 12px; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.setting-info b { font-size: 14px; }
.setting-info .hint { margin-top: 4px; max-width: 620px; }
.setting-ops { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.uid-text { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
/* 需求 2 / 4（20261004g）：后台用户列表——功能权限勾选 + 管理员备注 */
.perm-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perm-cb { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.perm-cb input { cursor: pointer; margin: 0; }
.perm-cb.is-locked { color: var(--muted); cursor: default; }
.perm-cb.is-locked input { cursor: not-allowed; }
.perm-save, .admin-note-save {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-ink);
  border-radius: 6px; padding: 2px 9px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.perm-save:hover, .admin-note-save:hover { border-color: var(--accent); background: var(--accent-soft); }
.perm-save:disabled, .admin-note-save:disabled { opacity: .5; cursor: wait; }
.admin-note { width: 180px; max-width: 100%; padding: 4px 8px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.admin-note:focus { outline: none; border-color: var(--accent); }
.note-cell { white-space: nowrap; }
/* 需求 6（20261006p）：超管用户卡片桌面端三处布局修正
   ① 功能权限 4 个复选框 + 保存按钮必须同一行（原 flex-wrap:wrap 会折行）
   ② 管理员备注输入框缩小，保存按钮「存」完整显示，且与输入框同一行
   ③ 用户 ID（19 位）单行不折行
   超宽时由 .admin-users-wrap 横向滚动兜底，不强压换行 */
.admin-users-wrap { overflow-x: auto; }
.perm-box { flex-wrap: nowrap; }
.perm-cell { white-space: nowrap; }
.perm-save, .admin-note-save { white-space: nowrap; }
.admin-note { width: 160px; max-width: 180px; }
.uid-val { white-space: nowrap; }
/* 需求 3（20261004i）：好友与分享页 */
.friend-list { display: flex; flex-direction: column; gap: 6px; }
.friend-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.friend-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.friend-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.shared-main { min-width: 0; flex: 1; }
.shared-main b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.shared-body { margin: 0 0 3px; font-size: 12.5px; color: var(--text-soft, var(--muted)); line-height: 1.6; }

/* ---------- Markdown 工具栏（极简图标风 + 分组分隔线） ---------- */
.md-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 18px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.md-toolbar button {
  border: none; background: none; color: #6b7183;
  border-radius: 8px; padding: 0 8px; height: 28px; min-width: 30px;
  font-size: 12.5px; font-weight: 600; font-family: inherit; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.md-toolbar button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.md-toolbar button:active { transform: translateY(1px); }
.md-toolbar button svg { display: block; }
.md-sep { width: 1px; height: 18px; background: var(--border); margin: 0 7px; flex: none; }
/* 「文字背景」图标：A + 底色横条 */
.ico-hl { position: relative; display: inline-block; font-size: 12px; font-weight: 800; line-height: 1; }
.ico-hl::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -4px; height: 3px;
  border-radius: 1px; background: #ffd54a;
}

/* ---------- 笔记：搜索 / 标签筛选 / 时间线 ---------- */
.notes-tools { position: relative; display: flex; align-items: center; padding: 0 14px 10px; }
.search-ico {
  position: absolute; left: 25px; font-size: 12px; opacity: .55; pointer-events: none;
}
#note-search {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 30px 8px 32px; font-size: 13px; background: var(--surface-2);
}
#note-search:focus { outline: none; border-color: var(--accent); background: #fff; }
.search-clear {
  position: absolute; right: 22px; border: none; background: #e6e8f0; color: #6b7183;
  width: 18px; height: 18px; border-radius: 50%; font-size: 12px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.search-clear:hover { background: #d8dbe6; color: var(--text); }
.search-clear.hidden { display: none; }

/* 标签胶囊（flomo 风格） */
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); background: var(--surface-2); color: #525a6d;
  border-radius: 99px; padding: 4px 10px; font-size: 12px; font-family: inherit;
  line-height: 1.35; transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.tag-chip:hover { border-color: #bcdcff; background: #fff; color: var(--accent-ink); transform: translateY(-1px); }
.tag-chip .tc-hash { color: #9aa1b5; font-weight: 700; }
.tag-chip .tc-num {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: #eceef4; border-radius: 99px; padding: 0 5px; min-width: 16px; text-align: center;
}
.tag-chip.active {
  background: linear-gradient(135deg, #1677ff, #4096ff); color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(91, 108, 255, .28);
}
.tag-chip.active .tc-hash, .tag-chip.active .tc-num { color: #fff; }
.tag-chip.active .tc-num { background: rgba(255, 255, 255, .28); }
.tag-chip.all .tc-ico { font-size: 11px; }
.tag-empty { font-size: 12px; color: var(--muted); line-height: 1.6; }

.note-group {
  list-style: none; padding: 10px 12px 6px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); letter-spacing: .04em; text-transform: uppercase;
}
.note-empty {
  list-style: none; padding: 22px 16px; color: var(--muted); font-size: 13px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.mini-star { color: #f5b50a; margin-right: 2px; font-size: 12px; }

/* ---------- 笔记属性面板（Notion 风格） ---------- */
.note-props {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 10px 22px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.note-props .prop { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.note-props .prop.grow { flex: 1; min-width: 200px; }
.note-props label { font-weight: 600; white-space: nowrap; }
.note-props select, .note-props input {
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 13px; background: var(--surface-2);
}
.note-props input.grow, .note-props .grow input { flex: 1; }
.note-props .prop.grow input { width: 100%; }
.note-props select:focus, .note-props input:focus { outline: none; border-color: var(--accent); background: #fff; }
.star {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px;
  width: 32px; height: 30px; font-size: 16px; cursor: pointer; color: var(--muted); line-height: 1;
}
.star.on { color: #f5b50a; border-color: #f5d98a; background: #fff7e0; }

/* ---------- 反向链接 ---------- */
.backlinks { padding: 14px 22px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.backlinks.hidden { display: none; }
.bl-title {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--text); margin-bottom: 10px;
}
.bl-count {
  font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 99px; padding: 1px 7px;
}
.bl-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--text);
  font-family: inherit; cursor: pointer; margin-bottom: 6px;
  transition: background .15s, border-color .15s, transform .1s;
}
.bl-item:hover { border-color: #bcdcff; background: #fff; transform: translateX(2px); }
.bl-ico { font-size: 12px; opacity: .7; }
.bl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-arrow { color: var(--muted); font-size: 13px; }

/* ---------- 预览 callout（Notion 风格） ---------- */
.markdown-body blockquote.callout {
  border-left: none; border-radius: 10px; padding: 12px 14px; margin: 12px 0;
  background: var(--surface-2); border: 1px solid var(--border);
}
.markdown-body blockquote.callout-note { background: #eef2ff; border-color: #dbe2ff; }
.markdown-body blockquote.callout-info { background: #e8f4fd; border-color: #cfe8fb; }
.markdown-body blockquote.callout-tip { background: #e9f8ee; border-color: #cdeed7; }
.markdown-body blockquote.callout-warning { background: #fdf3e7; border-color: #f6e2c4; }
.markdown-body blockquote.callout p { margin: 0; }

/* =========================================================
 * 快捷笔记（flomo 风格 · 可展开面板）
 * ========================================================= */
.quick-card {
  position: relative; margin: 0 auto 10px; max-width: 820px; width: 100%; padding: 12px 13px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.quick-card:hover { border-color: #dce0ea; }
.quick-card:focus-within {
  border-color: #bcdcff; box-shadow: 0 0 0 3px rgba(91, 108, 255, .10);
  background: #fff;
}
.quick-input {
  display: block; width: 100%; height: 46px; border: none; background: none;
  resize: none; outline: none; color: var(--text); font-family: inherit;
  font-size: 13.5px; line-height: 1.65; padding: 0 22px 0 0;
  transition: height .18s ease;
}
.quick-input::placeholder { color: #a9afc0; }
/* 需求 5（20261004g）：快速笔记的「笔记名」独立输入位。
   折叠态（未展开）时隐藏，展开后显示在正文上方；留空则沿用「正文首行当标题」的老逻辑。 */
.quick-title {
  display: none; width: 100%; border: none; background: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 16px; font-weight: 650; line-height: 1.5;
  padding: 0 22px 4px 0; margin-bottom: 2px;
}
.quick-title:empty::before { content: attr(data-ph); color: #a9afc0; font-weight: 400; }
.quick-card.expanded .quick-title { display: block; }
.quick-title:focus { border: none; }
.quick-card.expanded .quick-input { height: auto; min-height: 440px; max-height: 72vh; overflow-y: auto; }
.quick-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.quick-tools { display: flex; align-items: center; gap: 1px; }
.quick-tools button {
  border: none; background: none; color: #8b91a3; width: 28px; height: 28px;
  border-radius: 8px; font-size: 12.5px; font-family: inherit; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.quick-tools button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.quick-tools button:active { transform: translateY(1px); }
.quick-tools button svg { display: block; }
.quick-tools button b { font-weight: 800; }
.quick-tools button u { text-decoration: underline; text-underline-offset: 2px; }
.ico-q { font-size: 14px; line-height: 1; }
.qt-sep { width: 1px; height: 16px; background: #e3e6ef; margin: 0 6px; flex: none; }
/* 需求 e#14：加粗/下划线/背景/待办/引用 折叠为一个「格式」图标，点击展开五项 */
.q-morefmt { color: var(--accent-ink); }
.q-morefmt.on { background: var(--accent-soft); }
/* 需求 f#5：格式按钮图标改为文字「Aa」 */
.q-aa { font-weight: 700; font-size: 14px; line-height: 1; font-style: normal; letter-spacing: .2px; }
.qt-fmtgroup { display: inline-flex; align-items: center; gap: 1px; }
.qt-fmtgroup.hidden { display: none; }
.qt-fmtgroup .qt-sep:first-child { display: none; }

/* ---------- 图片附件（编辑区缩略图条 / 卡片图廊） ---------- */
.att-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.att-strip.hidden { display: none; }
.att {
  position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); flex: none;
}
.att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-x {
  position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; border-radius: 50%;
  border: none; background: rgba(38, 42, 58, .62); color: #fff; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.att-x:hover { background: var(--danger); }
.att-add {
  width: 62px; height: 62px; border-radius: 10px; border: 1px dashed #c9cedd;
  background: none; color: #97a0b5; font-size: 20px; line-height: 1; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.att-add:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.att-spin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .6); font-size: 11px; color: #6b7183;
}
.memo-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.memo-atts img {
  width: 82px; height: 82px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); cursor: zoom-in;
}
/* 正文内联图片 / 下划线 / 文字背景 */
.wz-img, .markdown-body img.wz-img { max-width: 100%; border-radius: 10px; margin: 6px 0; display: block; }
.wz u, .markdown-body u, .memo-body u { text-decoration: underline; text-underline-offset: 2px; }
.wz mark, .markdown-body mark, .memo-body mark { background: #ffe066; color: inherit; border-radius: 3px; padding: 0 2px; }
.quick-right { display: flex; align-items: center; gap: 8px; }
.quick-msg { font-size: 11.5px; color: var(--ok); }
.quick-msg.err { color: var(--danger); }
.quick-send {
  border: none; width: 30px; height: 30px; border-radius: 9px; font-size: 13px;
  background: var(--surface-2); color: #b3b8c7; transition: background .15s, color .15s, transform .1s;
}
.quick-send.ready { background: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(91, 108, 255, .3); }
.quick-send.ready:hover { background: var(--accent-ink); }
.quick-send:active { transform: translateY(1px); }
/* 展开 / 收起按钮（卡片右上角，hover 才显眼，展开后常亮） */
.quick-toggle {
  position: absolute; top: 8px; right: 9px; z-index: 3;
  width: 24px; height: 24px; border: none; background: none; color: #c4cad8;
  border-radius: 7px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, color .15s, transform .15s;
}
.quick-toggle:hover { color: var(--accent-ink); background: var(--accent-soft); }
.quick-card.expanded .quick-toggle { color: var(--accent-ink); background: var(--accent-soft); }
.quick-card.expanded .quick-toggle svg { transform: scale(.92); }
/* 右下角字数 */
.quick-count { font-size: 11px; color: #b3b8c7; font-variant-numeric: tabular-nums; min-width: 13px; text-align: right; }

/* =========================================================
 * 预览里的 #标签（可点击筛选）
 * ========================================================= */
.md-tag {
  display: inline-block; font-size: .92em; color: var(--accent-ink); cursor: pointer;
  background: var(--accent-soft); border-radius: 99px; padding: 0 .5em;
  margin: 0 .1em; transition: background .15s, color .15s;
}
.md-tag:hover { background: #cfe0ff; }
.markdown-body a[href^="#note:"] {
  background: #eaf7f0; color: #1a7f43; border-radius: 6px; padding: .05em .4em; font-weight: 600;
}

/* =========================================================
 * 空状态
 * ========================================================= */
.empty-title { font-size: 15px; font-weight: 700; color: var(--text); }
.empty-sub { font-size: 12.5px; color: var(--muted); max-width: 340px; line-height: 1.7; text-align: center; }

/* =========================================================
 * 两列布局 · 大内容区（flomo 风格）
 * ========================================================= */
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.view-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex: none;
}
.vh-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vh-right { display: flex; align-items: center; gap: 10px; flex: none; }
.view-title { font-size: 17px; font-weight: 700; white-space: nowrap; }
.view-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 40px; }

/* 搜索框（大区顶部） */
.search-box { position: relative; display: flex; align-items: center; width: 260px; }
.search-box .search-ico {
  position: absolute; left: 11px; font-size: 12px; opacity: .5; pointer-events: none;
}
.search-box input {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 30px 8px 30px; font-size: 13px; background: var(--surface-2);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.search-box input:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 108, 255, .10);
}
.search-box .search-clear { right: 8px; }

/* 当前标签筛选提示条 */
.filter-bar {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 24px; background: var(--accent-soft); border-bottom: 1px solid #cfe0ff;
  font-size: 12.5px; color: var(--accent-ink);
}
.filter-bar .fb-tag { font-weight: 700; }
.filter-bar button {
  border: none; background: none; color: var(--accent-ink); font-size: 12.5px;
  font-weight: 600; padding: 2px 6px; border-radius: 6px; font-family: inherit;
}
.filter-bar button:hover { background: #cfe0ff; }

/* 列表内容宽度约束（中间区域大，但阅读宽度适中；与快速输入卡保持一致） */
.memo-stream, .note-list.wide { max-width: 820px; margin: 0 auto; width: 100%; }

/* ---------- 快速笔记卡片流 ---------- */
.memo-group {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase; margin: 18px 2px 10px;
}
/* 需求 2（20261004p）：回收站分组标题行内的「清空」按钮（右侧） */
.memo-group:has(.memo-group-clear) { display: flex; align-items: center; justify-content: space-between; }
.memo-group-clear {
  border: 1px solid var(--border); background: var(--surface); color: var(--danger, #d9534f);
  border-radius: 6px; padding: 1px 9px; font-size: 11.5px; font-family: inherit; cursor: pointer;
  text-transform: none; letter-spacing: normal;
}
.memo-group-clear:hover { border-color: #d9534f; background: #fdeceb; }
.memo-group:first-child { margin-top: 4px; }
.memo-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px 12px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s;
}
.memo-card:hover { border-color: #dce0ea; box-shadow: 0 4px 16px rgba(31, 36, 48, .07); }
.memo-card.editing { border-color: #bcdcff; box-shadow: 0 0 0 3px rgba(91, 108, 255, .10); }
/* 编辑态隐藏只读标题，避免「两个标题」——保留下方可编辑的标题输入框 */
.memo-card.editing .memo-title { display: none; }
.memo-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.memo-time { font-size: 12px; font-weight: 700; color: #6b7183; }
.memo-badge {
  font-size: 10.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 99px; padding: 1px 7px;
}
.memo-spacer { flex: 1; }
.memo-body { font-size: 14px; line-height: 1.75; color: var(--text); word-wrap: break-word; position: relative; }
/* 需求 f#4：仅 .memo-card.has-fold（正文超过编辑块预览高度约 360px）才折叠+渐隐+展开按钮；短笔记完整显示 */
.memo-card.has-fold .memo-body { max-height: 360px; overflow: hidden; transition: max-height .2s ease; }
/* 需求 1（本轮）：收起态改用 alpha 渐隐(mask)替代原来的「白色渐变遮罩 ::after」。
 * 原遮罩会在收起时于卡片中部画出一条白色带（收起/展开来回切换后还会残留），
 * mask 只做透明度渐隐、不绘制任何白色，故不再出现「白色阴影」。 */
.memo-card.has-fold:not(.expanded) .memo-body {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), rgba(0, 0, 0, 0) 100%);
}
.memo-card.has-fold.expanded .memo-body { max-height: 72vh; overflow: auto; }
/* 需求 1（本轮）：编辑态「折叠光标上下 5 行以外内容」——被折叠的块整体隐藏（内容不删，保存时仍序列化） */
.wz .wz-folded-out, .memo-body.wz .wz-folded-out { display: none !important; }
/* 需求 4（20261004d，本轮）：手动折叠（Ctrl+Shift+F）的视觉提示条——
   原来只有 display:none，折叠处毫无痕迹；现在渐隐提示条 + 一键「展开全部」。 */
.wz-fold-hint {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 7px 12px;
  border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2);
  color: var(--muted); font-size: 12.5px;
}
.wz-fold-hint-btn {
  margin-left: auto; border: 1px solid var(--border); background: var(--surface);
  color: var(--accent-ink); border-radius: 999px; padding: 2px 12px; font-size: 12px;
  font-family: inherit; cursor: pointer; flex: none;
}
.wz-fold-hint-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
/* 折叠发生处向上渐隐，暗示「下面还有内容被收起了」 */
.memo-body.wz.wz-folded, .wz.wz-folded {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), rgba(0, 0, 0, 0) 100%);
}
.memo-more { display: none; margin: 8px 0 2px; padding: 3px 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-ink); border-radius: 999px; font-size: 12px; font-family: inherit; cursor: pointer; }
.memo-card.has-fold .memo-more { display: inline-block; }
/* 需求 2（20261004e，本轮）：手动折叠（Ctrl+Shift+F）期间隐藏「收起 / 展开」按钮——
   手动折叠已把大部分行 display:none，再显示会让人以为还有一层折叠、点了也看不出变化；
   解除手动折叠（clearWzFold 移除 wz-manual-folded）后由上面的 .has-fold 规则自动恢复。 */
.memo-card.wz-manual-folded .memo-more { display: none !important; }
.memo-more:hover { border-color: var(--accent); background: var(--accent-soft); }
.memo-body:empty::before { content: '（空）'; color: var(--muted); }
.memo-body p { margin: .35em 0; }
.memo-body p:first-child { margin-top: 0; }
.memo-body p:last-child { margin-bottom: 0; }
.memo-body h1, .memo-body h2, .memo-body h3 { margin: .5em 0 .3em; line-height: 1.35; }
.memo-body h1 { font-size: 1.35em; }
.memo-body h2 { font-size: 1.2em; }
.memo-body h3 { font-size: 1.08em; }
.memo-body ul, .memo-body ol { padding-left: 1.35em; margin: .35em 0; }
.memo-body ul.wz-tasks { padding-left: 2px; }
.memo-body li { margin: .18em 0; }
.memo-body code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
  padding: .08em .35em; font-family: var(--mono); font-size: .9em;
}
.memo-body blockquote {
  border-left: 3px solid var(--accent); margin: .5em 0; padding: .2em .9em;
  color: #5b6273; background: var(--accent-soft); border-radius: 0 8px 8px 0;
}
.memo-body a { color: var(--accent-ink); }
.memo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.memo-tags:empty { display: none; }
/* 双链（反向链接）：位于标签下方，另起一行显示 */
.memo-backlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.memo-backlinks:empty { display: none; }
.mbl-label { font-size: 11px; color: #8b91a3; flex: none; }
.mbl-item {
  border: none; background: var(--accent-soft); color: var(--accent-ink);
  font-family: inherit; font-size: 11.5px; font-weight: 600; border-radius: 99px;
  padding: 2px 9px; cursor: pointer; max-width: 230px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; transition: background .15s;
}
.mbl-item:hover { background: #cfe0ff; }
.memo-bar { display: flex; align-items: center; gap: 4px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.memo-bar .mb-msg { font-size: 11.5px; color: var(--ok); margin-left: 4px; }
.memo-bar .mb-msg.err { color: var(--danger); }
.memo-bar .mb-count { font-size: 11.5px; color: var(--muted); margin-left: 2px; white-space: nowrap; }
.memo-btn {
  border: none; background: none; color: var(--muted); font-family: inherit;
  font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.memo-btn:hover { background: var(--surface-2); color: var(--text); }
.memo-btn.star-on { color: #eaa800; }
.memo-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
/* 卡片内联编辑工具条：与顶部快捷编辑器（.quick-tools）保持一致的图标与分组 */
.memo-tools { display: flex; align-items: center; gap: 1px; margin-top: 10px; }
.memo-empty {
  padding: 40px 16px; color: var(--muted); font-size: 13.5px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.memo-empty .empty-ill { font-size: 40px; }

/* ---------- 所见即所得编辑区（快速笔记） ---------- */
.wz {
  outline: none; font-size: 14px; line-height: 1.75; color: var(--text);
  word-wrap: break-word; overflow-wrap: anywhere;
}
.wz:empty::before { content: attr(data-ph); color: #a9afc0; pointer-events: none; }
.wz p { margin: .35em 0; }
.wz p:first-child { margin-top: 0; }
.wz p:last-child { margin-bottom: 0; }
.wz h1, .wz h2, .wz h3 { margin: .5em 0 .3em; line-height: 1.35; }
.wz h1 { font-size: 1.35em; }
.wz h2 { font-size: 1.2em; }
.wz h3 { font-size: 1.08em; }
.wz ul, .wz ol { padding-left: 1.4em; margin: .35em 0; }
.wz li { margin: .18em 0; }
ul.wz-tasks { list-style: none; padding-left: 2px; }
ul.wz-tasks > li { display: flex; align-items: flex-start; gap: 7px; }
ul.wz-tasks > li::before { content: none; }
.wz-txt { flex: 1; min-width: 0; }
.wz-box {
  flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px;
  margin-top: 3px; border: 1.5px solid #c2c8d8; border-radius: 5px; font-size: 11px;
  color: transparent; cursor: pointer; user-select: none; transition: all .15s;
}
.wz-box[data-checked="1"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.wz-box:hover { border-color: var(--accent); }
ul.wz-tasks > li[data-done="1"] { color: var(--muted); }
ul.wz-tasks > li[data-done="1"] .wz-txt { text-decoration: line-through; }
.wz blockquote {
  border-left: 3px solid var(--accent); margin: .5em 0; padding: .2em .9em;
  color: #5b6273; background: var(--accent-soft); border-radius: 0 8px 8px 0;
}
.wz pre {
  background: #1f2430; color: #e6e8ef; padding: 12px 14px; border-radius: 10px;
  overflow-x: auto; margin: .6em 0; font-family: var(--mono); font-size: 12.5px;
}
.wz code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
  padding: .08em .35em; font-family: var(--mono); font-size: .9em;
}
.wz hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.wz a { color: var(--accent-ink); }
.wz-link {
  color: #1a7f43; background: #eaf7f0; border-radius: 6px; padding: .05em .4em;
  font-weight: 600; cursor: pointer;
}
.wz-link:hover { background: #d9f0e3; }
/* 需求 1（20261004f）：网址链接（区别于 .wz-link 的 @笔记 提及）——
   胶囊外观 + 下划线；文本区可编辑（改显示文字），点 ↗ 打开原地址；hover 显示完整 URL。 */
.wz .wz-url, .wz-url {
  display: inline-flex; align-items: baseline; gap: 3px; max-width: 100%;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px;
  padding: .05em .35em; text-decoration: underline; text-underline-offset: 2px;
  cursor: text; word-break: break-all;
}
.wz-url:hover { background: var(--accent-soft); filter: brightness(.97); }
.wz-url-text { min-width: 1em; outline: none; cursor: text; }
.wz-url-text:focus { text-decoration: underline dotted; }
.wz-url-open {
  flex: none; font-size: .85em; cursor: pointer; opacity: .65; text-decoration: none;
  font-family: inherit; user-select: none;
}
.wz-url-open:hover { opacity: 1; }

/* 快捷输入卡（所见即所得版） */
.quick-card .quick-input.wz {
  display: block; width: 100%; min-height: 46px; max-height: 340px; overflow-y: auto;
  border: none; background: none; padding: 2px 30px 0 0; resize: none; outline: none;
}
.quick-card.expanded .quick-input.wz { min-height: 440px; max-height: 72vh; }
.quick-hint { font-size: 11px; color: #b3b8c7; }
.quick-card .quick-tools button b { font-weight: 800; }

/* ---------- Markdown列表（时间为笔记名） ---------- */
.note-list.wide { list-style: none; padding: 0; }
.note-item.wide {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  margin-bottom: 9px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.note-item.wide:hover { border-color: #bcdcff; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(31,36,48,.08); }
.note-item.wide .ni-kind {
  flex: none; font-size: 10.5px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; margin-top: 1px;
}
.note-item.wide .ni-top { display: flex; align-items: center; gap: 6px; }
.note-item.wide .note-title-txt { font-size: 14px; font-weight: 700; }
.note-item.wide .ni-snippet { margin-top: 4px; font-size: 12.5px; -webkit-line-clamp: 2; }
.note-item.wide .ni-arrow { color: #c3c8d6; font-size: 15px; align-self: center; flex: none; }
/* 需求 p#4：Markdown行「⋯」菜单按钮（悬停出现，与快速笔记卡片一致） */
.note-item.wide .ni-spacer { flex: 1; min-width: 0; }
.note-item.wide .ni-menu {
  flex: none; width: 26px; height: 26px; margin: -2px 2px 0 0;
  border: none; border-radius: 7px; background: none; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .12s, background .15s, color .15s;
}
.note-item.wide:hover .ni-menu,
.note-item.wide .ni-menu:focus-visible { opacity: 1; }
.note-item.wide .ni-menu:hover { background: var(--surface-2); color: var(--text); }

/* ---------- MD 编辑器（全页 · 单栏） ---------- */
.editor-head { padding: 14px 24px; }
.editor-head .vh-left { align-items: center; gap: 12px; }
.editor-head .view-title { font-size: 15px; color: #4a5164; font-family: var(--font); }
.back-btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  width: 30px; height: 30px; border-radius: 9px; font-size: 15px; line-height: 1;
  display: grid; place-items: center; flex: none;
}
.back-btn:hover { background: var(--accent-soft); border-color: #cfe0ff; color: var(--accent-ink); }
#md-kind-badge { background: var(--accent); color: #fff; }
.save-state { font-size: 12px; color: var(--muted); min-width: 44px; text-align: right; }
.save-count { font-size: 12px; color: var(--muted); margin-left: 2px; white-space: nowrap; }
.editor-split { flex: 1; display: flex; min-height: 0; }
.note-input { padding: 22px 26px; }
.note-preview { flex: 1; overflow-y: auto; padding: 22px 26px; background: var(--surface-2); }
.editor-split.single .note-input { max-width: 900px; margin: 0 auto; width: 100%; }
.editor-split.single .note-preview { max-width: 900px; margin: 0 auto; width: 100%; }

/* 需求 q#1（20261006q）：MD 编辑器页补右侧栏（标签/双链 + 活跃度/概览/文件夹树），桌面横向、移动纵向 */
.md-editor-layout { flex: 1; min-height: 0; display: flex; }
.md-editor-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.md-editor-main .note-props,
.md-editor-main .md-toolbar,
.md-editor-main .backlinks { flex: none; }
.md-editor-main .editor-split { flex: 1; min-height: 0; }

/* 响应式 */
@media (max-width: 1080px) {
  .sidebar { width: 226px; }
  .search-box { width: 200px; }
  .view-sub { display: none; }
}
@media (max-width: 860px) {
  .app-view { flex-direction: column; height: auto; min-height: 100vh; overflow: auto; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .heat-wrap { display: block; }
  .side-tags { flex: none; max-height: 108px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; padding-bottom: 10px; }
  .notes-panel { width: 100%; height: auto; max-height: 54vh; }
  .view-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-box { width: 100%; }
  .editor-split { flex-direction: column; }
  .note-input { border-right: none; }
}

/* =========================================================
 * 快速笔记三栏布局 + 分类树（需求 #42）
 * ========================================================= */
.memo-layout { flex: 1; min-height: 0; display: flex; }
.memo-layout > .view-scroll { flex: 1; min-width: 0; }

/* 第三栏：分类树面板 */
.cat-panel {
  width: 252px; flex: none; min-height: 0;
  border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column;
}
/* 右栏顶部：活跃度热力图（从左侧栏移入，置于分类树上方） */
.cat-heat { flex: none; border-bottom: 1px solid var(--border); }
.cat-cap { padding: 14px 16px 2px; font-size: 13px; font-weight: 700; color: var(--text); }
.cat-heat .heat-wrap { padding: 4px 16px 12px; }
.cat-heat .heat-legend { margin-top: 5px; }
/* 右栏：数据概览（笔记 / 标签 / 天），位于活跃度与文件夹之间 */
.cat-stats {
  flex: none; display: flex; gap: 22px; padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.cat-stats .stat { display: flex; flex-direction: column; gap: 1px; }
.cat-stats b { font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.cat-stats span { font-size: 11.5px; color: var(--muted); }
.cat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.cat-title { font-size: 13px; font-weight: 700; color: var(--text); }
.cat-add {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-ink);
  width: 28px; height: 28px; border-radius: 8px; font-size: 16px; line-height: 1;
  display: grid; place-items: center; font-family: inherit;
}
.cat-add:hover { background: var(--accent-soft); border-color: #cfe0ff; }
.cat-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 16px; }
.cat-row {
  display: flex; align-items: center; gap: 6px; padding: 7px 8px;
  border-radius: 9px; cursor: pointer; font-size: 13px; color: #525a6d;
  user-select: none; transition: background .15s, color .15s;
}
.cat-row:hover { background: var(--surface-2); color: var(--text); }
.cat-row.active { background: var(--accent-soft); color: var(--accent-ink); }
.cat-caret { width: 12px; text-align: center; font-size: 10px; color: var(--muted); flex: none; }
.cat-caret.empty { visibility: hidden; }
.cat-ico { width: 16px; text-align: center; flex: none; }
.cat-ico svg { width: 16px; height: 16px; display: block; margin: 0 auto; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count {
  font-size: 11px; color: var(--muted); background: var(--surface-2);
  border-radius: 99px; padding: 0 6px; flex: none;
}
.cat-row.active .cat-count { background: #cfe0ff; color: var(--accent-ink); }
.cat-menu-btn {
  border: none; background: none; color: var(--muted); font-size: 14px; line-height: 1;
  padding: 0 2px; flex: none; opacity: 0; transition: opacity .15s, color .15s;
}
.cat-row:hover .cat-menu-btn { opacity: 1; }
.cat-menu-btn:hover { color: var(--accent-ink); }
.cat-row.drop-over { border: 1px dashed var(--accent); background: var(--accent-soft); }
.cat-new {
  width: 100%; margin-top: 8px; border: 1px dashed var(--border); background: none;
  color: var(--muted); border-radius: 9px; padding: 8px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.cat-new:hover { border-color: #bcdcff; color: var(--accent-ink); background: var(--accent-soft); }

/* 需求 q#2：文件夹展开后可点击的三角箭头 */
.cat-caret:not(.empty) { cursor: pointer; }
.cat-caret:not(.empty):hover { color: var(--accent-ink); }
/* 需求 q#2：文件夹展开后列出的笔记标题行 */
.cat-note {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  border-radius: 8px; font-size: 12.5px; color: #6b7183; cursor: default;
  user-select: none; transition: background .15s, color .15s;
}
.cat-note.clickable { cursor: pointer; }
.cat-note.clickable:hover { background: var(--surface-2); color: var(--text); }
.cat-note-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; color: var(--muted); }
.cat-note-ico svg { width: 14px; height: 14px; display: block; }
.cat-note-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
 * 左侧「全部标签」—— flomo 风格竖直列表（需求 #44）
 * ========================================================= */
.side-tags .tag-filter, .tags-panel .tag-filter { flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 12px 12px; }
.tag-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  border: none; background: none; text-align: left; padding: 7px 8px;
  border-radius: 9px; font-family: inherit; font-size: 13px; color: #525a6d;
  cursor: pointer; transition: background .15s, color .15s;
}
.tag-row:hover { background: var(--surface-2); color: var(--text); }
.tag-row.active { background: var(--accent-soft); color: var(--accent-ink); }
.tag-row .tr-ico { flex: none; font-size: 12px; width: 16px; text-align: center; }
.tag-row .tr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「全部双链」分组（第三栏，全部标签下方）；需求 p#1：去掉「@全部链接」分组标题 */
.tag-sec { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.tag-sec-head {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; padding: 8px 8px 4px;
  font-size: 12px; font-weight: 800; color: #6b7183; letter-spacing: .02em;
}
.tag-sec-head:hover { color: var(--accent-ink); }
.tag-sec-head .tsh-ico { font-size: 12px; font-weight: 800; color: var(--muted); }

/* =========================================================
 * 卡片：标题 / 分类 / 收藏 / ⋯ 菜单按钮（需求 #2 #5）
 * ========================================================= */
.memo-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.4; }
/* 编辑态标题输入框（已有笔记也能改标题，需求 #10） */
.memo-title-edit {
  display: block; width: 100%; border: 1px dashed #cfe0ff; background: #fbfcff;
  border-radius: 9px; padding: 6px 9px; margin: 0 0 8px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--text);
}
.memo-title-edit:focus {
  outline: none; border-style: solid; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 108, 255, .10);
}
.memo-title-edit::placeholder { font-weight: 500; color: #a9afc0; }
.memo-cat {
  font-size: 11px; color: var(--muted); background: var(--surface-2);
  border-radius: 6px; padding: 1px 7px; font-weight: 600; flex: none;
  display: inline-flex; align-items: center; gap: 3px;
}
.memo-cat .mc-ico { display: inline-flex; }
.memo-cat .mc-ico svg { width: 12px; height: 12px; display: block; }
.memo-fav { color: #f5b50a; font-size: 12px; }
.memo-menu-btn {
  border: none; background: none; color: var(--muted); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 8px; flex: none; transition: background .15s, color .15s;
}
.memo-menu-btn:hover { background: var(--surface-2); color: var(--text); }

/* =========================================================
 * 回收站卡片（需求 #5 衍生）
 * ========================================================= */
.trash-card { border-style: dashed; border-color: #e7c9cd; background: #fffafa; }
.trash-card .memo-title { color: #b3556a; }

/* =========================================================
 * 浮层菜单 / 文本输入弹窗 / 轻提示（需求 #5 #42）
 * ========================================================= */
.pop-menu {
  position: fixed; z-index: 1000; min-width: 184px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
}
.pm-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none;
  font-family: inherit; font-size: 13px; color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s;
}
.pm-item .pm-ico {
  flex: none; width: 17px; height: 17px; display: grid; place-items: center;
  color: #8b91a3; transition: color .15s;
}
.pm-item .pm-ico svg { display: block; }
.pm-item:hover .pm-ico { color: var(--accent-ink); }
.pm-item.danger .pm-ico { color: #98a0b3; }
.pm-item.danger:hover .pm-ico { color: var(--danger); }
.pm-item:hover { background: var(--surface-2); }
.pm-item.danger { color: var(--danger); }
.pm-item.danger:hover { background: var(--danger-soft); }
.pm-item.on { color: var(--accent-ink); font-weight: 600; }

.modal-ov {
  position: fixed; inset: 0; z-index: 1100; background: rgba(20, 24, 34, .42);
  display: grid; place-items: center; padding: 20px;
}
.modal { width: 320px; max-width: 100%; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 16px; }
.modal h4 { font-size: 14.5px; margin-bottom: 12px; }
.modal input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 14px; background: var(--surface-2); margin-bottom: 14px;
}
.modal input:focus { outline: none; border-color: var(--accent); background: #fff; }
.modal-ops { display: flex; justify-content: flex-end; gap: 8px; }
.anno-modal { width: 360px; }
.anno-input {
  width: 100%; min-height: 104px; resize: vertical; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 14px; font-family: inherit;
  line-height: 1.55; background: var(--surface-2); margin-bottom: 14px;
}
.anno-input:focus { outline: none; border-color: var(--accent); background: #fff; }

.mali-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
  z-index: 1200; background: #1f2430; color: #fff; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 99px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.mali-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 小屏：分类树移到下方，整列堆叠 */
@media (max-width: 860px) {
  .memo-layout { flex-direction: column; }
  .cat-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 50vh; }
}

/* =========================================================
 * 标签行「⋯」管理按钮（需求：标签重命名 / 删除）
 * ========================================================= */
.tag-row .tr-menu {
  flex: none; font-size: 13px; line-height: 1; color: var(--muted);
  padding: 1px 3px; border-radius: 6px; opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.tag-row:hover .tr-menu { opacity: 1; }
.tag-row .tr-menu:hover { color: var(--accent-ink); background: #fff; }
.tag-row.active .tr-menu { opacity: 1; }

/* =========================================================
 * 标签输入联想浮层（需求：写 # 时选择已有标签 / 新建）
 * ========================================================= */
.tag-pop {
  position: fixed; z-index: 1050; width: 268px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.tp-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--text);
  padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s;
}
.tp-item .tp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-item:hover, .tp-item.on { background: var(--accent-soft); color: var(--accent-ink); }
/* 行尾类型徽章：# 标签 / 笔记（两种联想浮层保持同宽同款式） */
.tp-item .tp-kind {
  flex: none; font-size: 11.5px; font-weight: 700; border-radius: 7px; line-height: 1.5;
  padding: 2px 9px; border: 1px solid transparent;
}
.tp-item .tp-kind.is-note { color: #1f7a4d; background: #e3f5ea; border-color: #bfe6d0; }
.tp-item .tp-kind.is-tag { color: #4d5568; background: var(--surface-2); border-color: var(--border); }
.tp-item:hover .tp-kind.is-note, .tp-item.on .tp-kind.is-note { background: #fff; color: #1f7a4d; border-color: #bfe6d0; }
.tp-item:hover .tp-kind.is-tag, .tp-item.on .tp-kind.is-tag { background: #fff; color: #4d5568; border-color: var(--border); }
.tp-item .tp-new {
  flex: none; font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 2px 8px;
}
.tp-item.new:hover .tp-new, .tp-item.new.on .tp-new { background: #fff; color: var(--accent-ink); border-color: #cfe0ff; }

/* =========================================================
 * 回收站分页（笔记 / 标签）+ 标签回收站列表
 * ========================================================= */
.trash-tabs {
  display: flex; gap: 6px; flex: none; padding: 0 24px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
#page-trash .view-head { border-bottom: none; padding-bottom: 10px; }
.tt-btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 7px 12px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.tt-btn:hover { background: var(--surface-2); color: var(--text); }
.tt-btn.active { background: var(--accent-soft); color: var(--accent-ink); }
.tt-btn b {
  font-size: 11px; font-weight: 700; background: var(--surface-2);
  border-radius: 99px; padding: 1px 6px; color: var(--muted);
}
.tt-btn.active b { background: #cfe0ff; color: var(--accent-ink); }

.tag-trash {
  max-width: 860px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.tag-trash-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed #e7c9cd; background: #fffafa; border-radius: var(--radius-sm); padding: 12px 14px;
}
.tag-trash-row .ttr-ico { color: #b3556a; font-size: 14px; font-weight: 700; flex: none; }
.tag-trash-row .ttr-name { font-size: 14px; font-weight: 700; color: #b3556a; flex: none; }
.tag-trash-row .ttr-meta { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; }
.tag-trash-row .ttr-ops { display: flex; gap: 8px; flex: none; }
.tag-trash .memo-empty { padding: 40px 0; }

/* =========================================================
 * 细线形滚动条（替代系统粗滚动条 / 三角按钮，需求：分隔栏改细线下滑条）
 * ========================================================= */
* { scrollbar-width: thin; scrollbar-color: #cdd2de transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd4e0; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #b4bbcc; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* =========================================================
 * 正文列表（有序 / 无序）显式样式，确保圆点 / 序号正确显示（需求 #7）
 * ========================================================= */
.wz ul:not(.wz-tasks), .memo-body ul:not(.wz-tasks), .markdown-body ul { list-style: disc outside; }
.wz ol, .memo-body ol, .markdown-body ol { list-style: decimal outside; }
.wz li::marker, .memo-body li::marker, .markdown-body li::marker { color: #8a90a2; }
.wz ul:not(.wz-tasks), .wz ol { padding-left: 1.6em; }
.memo-body ul:not(.wz-tasks), .memo-body ol { padding-left: 1.5em; }

/* 待办清单：有序 / 无序统一按 flex 布局，避免复选框与文字错位（需求 #8） */
.wz .wz-tasks, .memo-body .wz-tasks, .markdown-body .wz-tasks {
  list-style: none; padding-left: 2px; margin: .35em 0;
}
.wz .wz-tasks > li, .memo-body .wz-tasks > li, .markdown-body .wz-tasks > li {
  display: flex; align-items: flex-start; gap: 8px;
}
.wz .wz-tasks > li::marker, .memo-body .wz-tasks > li::marker, .markdown-body .wz-tasks > li::marker { content: none; }
.wz .wz-tasks > li::before, .memo-body .wz-tasks > li::before { content: none; display: none; }

/* =========================================================
 * 四栏布局响应式（需求 #8）
 * ========================================================= */
@media (max-width: 1240px) {
  .tags-panel { width: 196px; }
  .cat-panel { width: 232px; }
}
@media (max-width: 980px) {
  .tags-panel { width: 176px; }
  .cat-panel { width: 210px; }
  .search-box { width: 180px; }
}
@media (max-width: 860px) {
  .tags-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 38vh; }
}

/* =========================================================
 * 置顶徽标 / 批注块（卡片 header 与正文之间，需求 #8 置顶、批注）
 * ========================================================= */
.memo-pin { font-size: 12.5px; line-height: 1; flex: none; }
/* 需求 o#1：批注块样式对齐「标题重命名」输入框（虚线框 + 浅底 + 灰线图标） */
.memo-anno {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 8px;
  padding: 6px 9px; background: #fbfcff; border: 1px dashed #cfe0ff;
  border-radius: 9px; font-size: 12.5px; line-height: 1.65;
}
.ma-label { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #6b7183; }
.ma-label .ma-ico { display: inline-flex; align-items: center; color: #8a90a2; }
.ma-label .ma-ico svg { width: 13px; height: 13px; display: block; }
.ma-text { color: #525a6d; word-break: break-word; }

/* 卡片编辑态的图片附件条（与 .att-strip 共用基础样式） */
.att-strip-card { margin-bottom: 0; }

/* =========================================================
 * 卡片「⋯」菜单底部信息（需求 #8：字数统计 / 最后编辑时间）
 * ========================================================= */
.pm-foot {
  margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.pm-foot-line {
  font-size: 11.5px; color: var(--muted); padding: 2px 10px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
 * 「全部双链」一行展示 链接→被链接（需求 #5）
 * ========================================================= */
.tr-name-pair { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.trp-a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.trp-arrow { flex: none; color: var(--muted); font-size: 12px; }
.trp-b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-ink); }

/* =========================================================
 * 回收站内联「清空」按钮（需求 #7）
 * ========================================================= */
#btn-empty-trash-inline { color: var(--danger); }
#btn-empty-trash-inline:hover { background: var(--danger-soft); border-color: #f3c3cc; }

/* =========================================================
 * 浮窗：右下角浮动按钮 + 笔记面板（需求 #9）
 * ========================================================= */
/* 需求 p#2：浮窗 dock 改为「素材」式胶囊胶囊（白底 + 浅灰描边 + 蓝图标 + 蓝色圆形计数） */
.float-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  height: 42px; padding: 0 9px 0 14px; border-radius: 999px;
  border: 1px solid #e5e8f0; background: #fff; color: var(--text);
  box-shadow: 0 4px 16px rgba(31, 36, 48, .10);
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; transition: transform .12s, box-shadow .15s, border-color .15s;
}
.float-dock:hover { transform: translateY(-1px); border-color: #cfd6e8; box-shadow: 0 9px 24px rgba(31, 36, 48, .15); }
.float-dock:active { transform: translateY(1px); }
.fd-ico { display: inline-flex; align-items: center; color: var(--accent); }
.fd-ico svg { width: 19px; height: 19px; display: block; }
.fd-txt { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; color: var(--text); }
.fd-badge {
  flex: none; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.float-panel {
  position: fixed; right: 22px; bottom: 76px; z-index: 950;
  width: 320px; max-width: calc(100vw - 44px); max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.float-panel.hidden { display: none; }
.fp-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.fp-count { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
.fp-act {
  border: 1px solid var(--border); background: var(--surface); color: #525a6d;
  font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.fp-act:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: #bcdcff; }
.fp-act svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.fp-act span { vertical-align: middle; }
.fp-x { font-size: 15px; line-height: 1; padding: 2px 9px; }
.fp-body { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.fp-empty { padding: 22px 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; text-align: center; }
.fp-row { display: flex; align-items: stretch; gap: 6px; }
.fp-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 8px 10px; cursor: pointer; transition: background .15s, border-color .15s;
}
.fp-main:hover { background: var(--surface-2); border-color: #dce0ea; }
/* 需求 p#1：浮窗行只显示标题，单行省略号 */
.fp-text {
  flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.fp-thumb {
  width: 38px; height: 38px; flex: none; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.fp-rm {
  flex: none; width: 28px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 10px; color: #98a0b3; font-size: 16px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.fp-rm:hover { background: var(--danger-soft); color: var(--danger); border-color: #f3c3cc; }
/* 需求 q#8：浮窗分组标题（待办 / 快速笔记 / Markdown）同类型聚在一起 */
.fp-group { display: flex; align-items: center; gap: 6px; margin: 8px 2px 2px; padding-top: 6px; }
.fp-group:first-child { margin-top: 0; padding-top: 0; }
.fp-group::before { content: ''; flex: none; width: 3px; height: 12px; border-radius: 2px; background: var(--border); }
.fp-group.todo::before { background: var(--accent); }
.fp-group-t { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .3px; }
.fp-group-n { font-size: 10.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; line-height: 16px; }
/* 需求 q#8：待办行——左侧蓝条 + 复选框，与笔记行区分 */
.fp-row-task .fp-main { border-left: 3px solid var(--accent); padding-left: 9px; }
.fp-chk { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); display: inline-grid; place-items: center; color: #fff; box-sizing: border-box; }
.fp-chk svg { width: 12px; height: 12px; display: block; }
.fp-chk.on { background: var(--accent); border-color: var(--accent); }
.fp-chk:not(.on) { color: transparent; }

/* =========================================================
 * 通用标准图标 / 视图标题 / 工具按钮（需求 #1 #4 #6 #7）
 * ========================================================= */
.view-title { display: flex; align-items: center; gap: 7px; }
.view-title .vt-ico { display: inline-flex; align-items: center; justify-content: center; color: #8a90a2; flex: none; }
.view-title .vt-ico svg { display: block; }
.search-box .search-ico { display: inline-flex; align-items: center; color: #98a0b3; }
.search-box .search-ico svg { display: block; }
/* ＋ 右侧的快捷键按钮 */
.btn-ico {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: #6b7183;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-ico:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: #cfe0ff; }
.btn-ico svg { display: block; }
/* 需求 o#2：双链行首统一灰色 @ 符号（与「# 全部标签」行对称） */
.tag-row.tr-row-link .tr-ico.tr-at { font-weight: 800; color: #9aa1b4; }
.tag-row.tr-row-mutual .tr-ico.tr-at { color: var(--accent-ink); }
.tag-row.tr-row-link .trp-b { font-weight: 600; }

/* =========================================================
 * 右侧「键盘快捷键」抽屉（需求 #3 #4）
 * ========================================================= */
.sd-mask { position: fixed; inset: 0; z-index: 1090; background: rgba(20, 24, 34, .26); }
.sd-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1095;
  width: 360px; max-width: calc(100vw - 40px);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(31, 36, 48, .12);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s ease;
}
.sd-drawer.open { transform: translateX(0); }
.sd-head { display: flex; align-items: center; gap: 8px; flex: none; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sd-head .sd-ico { display: inline-flex; color: #6b7183; }
.sd-head .sd-title { flex: 1; font-size: 14px; font-weight: 700; }
.sd-x { border: none; background: var(--surface-2); color: #6b7183; width: 26px; height: 26px; border-radius: 8px; font-size: 16px; line-height: 1; }
.sd-x:hover { background: var(--accent-soft); color: var(--accent-ink); }
.sd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; }
.sd-sec { margin-bottom: 14px; }
.sd-sec-title { font-size: 12px; font-weight: 800; color: #6b7183; letter-spacing: .02em; margin-bottom: 6px; }
.sd-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 7px 6px; border-radius: 8px; }
.sd-row:hover { background: var(--surface-2); }
.sd-label { font-size: 13px; color: #4a5164; }
.sd-keys { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.sd-keys kbd, .sd-foot kbd {
  font-family: var(--mono); font-size: 11.5px; color: #525a6d;
  background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 6px; line-height: 1.6;
}
.sd-foot { flex: none; border-top: 1px solid var(--border); padding: 10px 16px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 3px; }

/* =========================================================
 * 需求 q#3：移动端（≤860px）宽度修复
 * 原 bug：980 断点的 `.cat-panel{width:210px}` 写在 860 断点 `.cat-panel{width:100%}` 之后，
 * 同优先级下后者被覆盖 → 手机上活跃度热力图与文件夹面板只占约半宽，右侧大片留白。
 * 这里放在文件末尾，确保移动端两栏都占满宽度、热力图按实际宽度自适应重算周数。
 * ========================================================= */
@media (max-width: 860px) {
  .memo-layout { flex-direction: column; }
  .tags-panel { width: 100%; max-height: none; border-left: none; border-top: 1px solid var(--border); }
  .cat-panel { width: 100%; max-height: none; border-left: none; border-top: 1px solid var(--border); }
  .cat-heat .heat-wrap { padding: 4px 14px 12px; }
}

/* =========================================================
 * 需求 r#3：双链行左右两侧各自可点
 * 点左侧（源笔记）跳源笔记，点右侧（@被链接）跳被链接笔记
 * ========================================================= */
.trp-hit {
  cursor: pointer; border-radius: 5px; padding: 1px 3px; margin: -1px -3px;
  transition: background .15s, color .15s;
}
.trp-hit:hover { background: var(--accent-soft); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
 * 需求 r#4 / r#5：移动端（≤860px）聚焦自动放大 + 顶部区域吸顶
 *
 * r#4 原 bug：iOS Safari 聚焦 font-size < 16px 的输入控件会「自动放大整页」，
 *            表现就是点开快速笔记输入区后页面变大超出屏幕、需要手动捏合缩小。
 *            这里把窄屏下的表单控件字号统一提到 16px。
 * r#5 原 bug：窄屏下 .app-view 是 overflow:auto 的滚动容器，sticky 以它为参照，
 *            而它自身随页面一起滚走 → 侧栏与标题栏一向下滚动就消失。
 *            这里放开裁剪，让 sticky 相对视口生效；标题栏的 top 用 --side-h
 *            （侧栏实高，由 JS 写入）紧贴在吸顶侧栏下方。
 * ========================================================= */
@media (max-width: 860px) {
  html, body { height: auto; min-height: 100%; }
  .app-view { height: auto; min-height: 100vh; overflow: visible; }

  /* r#5 吸顶：第一段 = 侧栏（品牌 + 导航 + 用户信息） */
  .sidebar { position: sticky; top: 0; z-index: 70; }
  /* r#5 吸顶：第二段 = 当前页标题 / 搜索栏，紧贴侧栏下方 */
  .view-head { position: sticky; top: var(--side-h, 0px); z-index: 60; padding: 12px 16px; }
  .filter-bar { position: sticky; top: var(--side-h, 0px); z-index: 59; }

  /* r#4：控件字号 ≥16px，避免 iOS 聚焦自动放大整页 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea,
  select,
  [contenteditable="true"] { font-size: 16px !important; }
  /* 需求 5（20261006p）：公告「全部用户」下拉字号与旁边按钮（13px）对齐，
     不被上面 16px 规则撑大（仅移动端触发，桌面端本就 13px） */
  #ann-scope { font-size: 13px !important; }

  /* 需求 l#1：手机端任务编辑弹窗——「编辑」态 textarea 被上面的 !important 提到 16px，
     而「预览」态 .md-body 仍是 13px，两态字号不一致。这里把预览同步到 16px，
     并把标题 / 行内代码按同一比例换算，保证编辑与预览观感一致。 */
  .tl-d-note-preview.md-body { font-size: 16px; }
  .tl-d-note-preview.md-body h1 { font-size: 1.31em; }
  .tl-d-note-preview.md-body h2 { font-size: 1.16em; }
  .tl-d-note-preview.md-body h3 { font-size: 1.08em; }
  .tl-d-note-preview.md-body code { font-size: .875em; }

  /* r#4：展开态编辑区不再用固定 440px 最小高度（会顶出屏幕），改由 JS 按可视高度给值 */
  .quick-card.expanded .quick-input,
  .quick-card.expanded .quick-input.wz { min-height: 0; max-height: 46vh; }
  /* 需求 e#14：手机端保护确认按钮不被挤出块区域；工具条允许换行 */
  .quick-bar { flex-wrap: wrap; }
  .quick-tools { flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
  .quick-right { flex: none; margin-left: auto; }
  .search-box { width: 100%; }
}

/* =========================================================
 * 需求 s#5：笔记「⋯」菜单——分组之间的分隔横线
 * ========================================================= */
.pop-menu .pm-sep { height: 1px; background: var(--border); margin: 5px 8px; border-radius: 1px; }

/* =========================================================
 * 需求 s#4：筛选条「文件夹」用统一灰线 SVG 图标（原为 📁 emoji）
 * ========================================================= */
.filter-bar .fb-tag { display: inline-flex; align-items: center; gap: 5px; }
.filter-bar .fb-tag .fb-ico { display: inline-flex; align-items: center; color: var(--accent-ink); }
.filter-bar .fb-tag .fb-ico svg { width: 14px; height: 14px; display: block; }

/* =========================================================
 * 需求 s#6：修改日期日历弹窗
 * ========================================================= */
.mod-cal { width: 342px; max-width: 100%; padding: 16px 16px 14px; max-height: 86vh; overflow: auto; }
.mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mc-title { font-size: 14.5px; font-weight: 700; }
.mc-x { border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 2px 7px; border-radius: 7px; font-family: inherit; }
.mc-x:hover { background: var(--surface-2); color: var(--text); }
.mc-month { display: flex; align-items: center; justify-content: center; gap: 2px; margin-bottom: 8px; }
.mc-mon { flex: 1; text-align: center; font-size: 14px; font-weight: 600; }
.mc-nav { border: none; background: none; color: var(--muted); font-size: 14px; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; font-family: inherit; }
.mc-nav:hover { background: var(--surface-2); color: var(--accent-ink); }
.mc-week, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mc-week span { text-align: center; font-size: 11.5px; color: var(--muted); padding: 2px 0; }
.mc-cell {
  border: none; background: none; font-family: inherit; font-size: 13px; color: var(--text);
  height: 34px; border-radius: 9px; cursor: pointer; position: relative; padding: 0;
}
.mc-cell.out { cursor: default; }
.mc-cell:not(.out):hover { background: var(--surface-2); }
.mc-cell.has { color: var(--accent-ink); font-weight: 700; }
.mc-cell.has::after {
  content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent); transform: translateX(-50%);
}
.mc-cell.today { box-shadow: inset 0 0 0 1px var(--border); }
.mc-cell.sel { background: var(--accent); color: #fff; font-weight: 700; }
.mc-cell.sel::after { background: #fff; }
.mc-sel { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
.mc-sel-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mc-vers { display: flex; flex-direction: column; gap: 3px; max-height: 148px; overflow: auto; }
.mc-empty { font-size: 12.5px; color: var(--muted); padding: 4px 2px; }
.mc-ver {
  display: flex; align-items: center; gap: 8px; border: none; background: var(--surface-2);
  border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 12.5px; color: var(--text);
  cursor: pointer; transition: background .15s;
}
.mc-ver:hover { background: #e6e9ff; }
.mc-ver .v-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.mc-ver .v-count { flex: 1; color: var(--muted); }
.mc-ver .v-act { color: var(--accent-ink); font-weight: 600; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.mc-legend { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.mc-legend .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ================= 需求 y#4：日历日号「休 / 班」徽标 ================= */
.tl-ctop { display: flex; align-items: center; gap: 4px; }
.tl-cbadge { font-size: 9.5px; font-style: normal; line-height: 1.4; padding: 0 4px; border-radius: 5px; font-weight: 700; }
.tl-cbadge.rest { color: #b5353a; background: #fdecec; }
.tl-cbadge.work { color: #2f6fd0; background: #eaf2ff; }
.tl-ybadge { font-size: 8px; font-style: normal; margin-left: 1px; font-weight: 700; }
.tl-ybadge.rest { color: #b5353a; }
.tl-ybadge.work { color: #2f6fd0; }

/* ================= 需求 y#6：日历任务色条复选框 + 时间 ================= */
.tl-check.xs { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid var(--border); background: var(--surface); flex: none; cursor: pointer; padding: 0; position: relative; transition: all .15s; }
.tl-check.xs::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.tl-check.xs.on { background: var(--ok); border-color: var(--ok); }
.tl-check.xs.on::after { opacity: 1; }
.tl-cchip { display: inline-flex; align-items: center; gap: 4px; }
.tl-cchip i { font-style: normal; font-size: 10px; opacity: .8; }
.tl-cchip.done { opacity: .55; text-decoration: line-through; }
.tl-tg-blk { display: inline-flex; align-items: center; gap: 3px; }
.tl-tg-blk.done { opacity: .6; }
.tl-tg-blk.done b { text-decoration: line-through; }
.tl-ag-row { display: flex; align-items: center; gap: 8px; }
.tl-ag-row.done .tl-ag-bar b { text-decoration: line-through; opacity: .6; }

/* ================= 需求 y#4：详情 时间 / 提醒 / 重复 / 自定义 ================= */
.tl-d-meta .tl-chip { display: inline-flex; }
.tl-d-select, .tl-d-input {
  font-family: inherit; font-size: 12.5px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; cursor: pointer; max-width: 160px;
}
.tl-d-input { cursor: text; width: 160px; }
/* 需求 4（20261004l）：站内信正文输入框 */
.tl-d-ta {
  cursor: text; font-family: inherit; font-size: 13px; line-height: 1.65; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; resize: vertical;
}
.tl-d-ta:focus { outline: none; border-color: var(--accent); }
.tl-d-flags .tl-d-select:focus, .tl-d-flags .tl-d-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* 需求 y#4：时间段选择弹窗 */
.tl-picker-span { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tl-prow-inline { display: flex; align-items: center; justify-content: space-between; }
.tl-prow-inline input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

/* ================= 需求 y#5：我的待办 · 统计页 ================= */
.tl-stats { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 24px; }
.tl-st-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.tl-stab { border: none; background: none; font-family: inherit; font-size: 13px; color: var(--muted); padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.tl-stab.on { background: var(--accent); color: #fff; font-weight: 700; }
.tl-st-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.tl-st-cards2 { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
.tl-st-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.tl-st-card b { font-size: 24px; font-weight: 800; color: var(--text); }
.tl-st-card span { font-size: 12px; color: var(--muted); }
.tl-st-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.tl-st-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.tl-st-trend { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.tl-st-bar { flex: 1; background: var(--accent-soft); border-radius: 6px 6px 0 0; height: 100%; display: flex; align-items: flex-end; }
.tl-st-bar span { display: block; width: 100%; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .3s; }
.tl-st-trend-x { display: flex; gap: 5px; margin-top: 6px; }
.tl-st-trend-x i { flex: 1; text-align: center; font-style: normal; font-size: 9.5px; color: var(--muted); }
/* 需求 m#5：统计概览里的完成热力图容器（复用 .heat-grid 色阶） */
.tl-task-heat .heat-wrap { padding: 2px 0 6px; overflow-x: auto; }
.tl-task-heat .heat-legend { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.tl-task-heat .heat-legend .heat-cell { width: 11px; height: 11px; }
.tl-st-bars { display: flex; flex-direction: column; gap: 8px; }
.tl-st-bar2 { display: flex; align-items: center; gap: 10px; }
.tl-st-bar2-label { width: 64px; flex: none; font-size: 12.5px; color: var(--text); }
.tl-st-bar2-track { flex: 1; height: 10px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.tl-st-bar2-track i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.tl-st-bar2 b { width: 30px; text-align: right; font-size: 12.5px; color: var(--muted); }
.tl-st-list { display: flex; flex-direction: column; gap: 6px; }
.tl-st-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 7px 10px; background: var(--surface); border-radius: 8px; }
.tl-st-row b { color: var(--accent-ink); }
.tl-st-row i { font-style: normal; color: var(--muted); margin-left: auto; }
/* 需求 e#10：概览完成率环 + 指标卡布局 */
.tl-st-ov { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.tl-st-donut { position: relative; width: 120px; height: 120px; flex: none; }
.tl-donut { width: 120px; height: 120px; transform: rotate(-90deg); }
.tl-donut-bg { fill: none; stroke: var(--surface-2); stroke-width: 11; }
.tl-donut-fg { fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.tl-st-donut-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tl-st-donut-cap b { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.tl-st-donut-cap span { font-size: 11px; color: var(--muted); margin-top: 3px; }
.tl-st-ov .tl-st-cards { flex: 1; grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }

/* ================= 需求 y#7：习惯打卡 ================= */
.habit-wrap { max-width: 760px; margin: 0 auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 12px; }
.hl-row { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.hl-info { display: flex; align-items: center; gap: 8px; width: 200px; flex: none; }
.hl-ico { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.hl-name { font-size: 13.5px; font-weight: 600; flex: 1; }
.hl-rate { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hl-week { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
.hl-dot { width: 34px; height: 34px; border-radius: 50%; border: 1.6px solid var(--border); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all .15s; }
.hl-dot i { font-style: normal; font-size: 10px; color: var(--muted); }
.hl-dot.on { border-color: var(--c, var(--accent)); background: var(--c, var(--accent)); }
.hl-dot.on i { color: #fff; }

/* ================= 需求 y#8：番茄钟 ================= */
.pomo-mode-seg { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.pomo-mode { border: none; background: none; font-family: inherit; font-size: 12.5px; color: var(--muted); padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.pomo-mode.on { background: var(--accent); color: #fff; font-weight: 700; }
.pomo-wrap { max-width: 360px; margin: 28px auto 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pomo-ring { position: relative; width: 240px; height: 240px; }
.pomo-svg { width: 240px; height: 240px; transform: rotate(-90deg); }
.pomo-bg { fill: none; stroke: var(--border); stroke-width: 14; }
.pomo-fg { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .4s linear; }
.pomo-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pomo-time { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.pomo-center span { font-size: 13px; color: var(--muted); }
.pomo-ctrl { display: flex; gap: 12px; }
.pomo-foot { font-size: 12.5px; color: var(--muted); }

/* ================= 需求 z#1/z#2/z#3/z#4：效率工具（习惯 / 番茄专注 / 纪念日）迁入「我的待办」中栏 ================= */
/* 中栏工具容器：与 tl-groups / tl-stats 同级，隐藏其它视图后占位 */
.tl-tool { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 26px; }
.tl-tool.hidden { display: none; }
.tl-tool-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 12px; }
.tl-th-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-th-title { font-size: 19px; font-weight: 800; margin: 0; color: var(--text); }
.tl-th-sub { font-size: 12.5px; color: var(--muted); }
.tl-tool-body { display: flex; flex-direction: column; gap: 14px; }

/* ---- 习惯打卡 ---- */
.hl-weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.hl-wd { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 9px; background: var(--surface); }
.hl-wd.today { box-shadow: 0 0 0 1.5px var(--accent) inset; }
.hl-wd b { font-size: 14px; font-weight: 700; color: var(--text); }
.hl-wd span { font-size: 11px; color: var(--muted); }
.hl-wd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.hl-wd-dot.on { background: var(--accent); }
.hl-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
/* 20261013b#3：习惯卡片拖拽调序 —— 被拖卡半透明、落点卡顶部高亮线 */
.hl-card.dragging { opacity: .5; }
.hl-card.drag-over { border-color: var(--accent); box-shadow: inset 0 3px 0 -1px var(--accent); }
.hl-card.open { box-shadow: var(--shadow-sm); }
.hl-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.hl-card-head .hl-ico { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.hl-card-head .hl-name { font-size: 14px; font-weight: 700; flex: 1; color: var(--text); }
.hl-stat { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hl-stat b { color: var(--accent-ink); font-size: 13.5px; }
.hl-card-week { display: flex; gap: 6px; padding: 0 14px 12px; justify-content: flex-start; }
.hl-detail { padding: 4px 14px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.hl-d-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0; }
.hl-d-stats span { font-size: 12.5px; color: var(--muted); }
.hl-d-stats b { color: var(--text); font-size: 14px; margin-left: 3px; }
.hl-mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 4px 0 12px; }
.hl-mcell { aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; }
.hl-mcell.on { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); color: #fff; font-weight: 700; }
.hl-log { display: flex; flex-direction: column; gap: 6px; }
.hl-log-h { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.hl-log-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.hl-log-row b { color: var(--text); }
.hl-log-row span { font-size: 15px; }
.hl-log-row i { font-style: normal; color: var(--muted); margin-left: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-mood-emojis { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.hl-mood-emo { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 22px; cursor: pointer; }
.hl-mood-emo.on { border-color: var(--accent); background: var(--accent-soft); }

/* ---- 番茄专注 ---- */
.pomo-body { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.pomo-left { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 320px; max-width: 100%; margin: 0 auto; }
.pomo-side { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 14px; }
.pomo-ov { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px; }
.pomo-ov h4 { margin: 0 0 10px; font-size: 13.5px; color: var(--text); }
.pomo-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pomo-ov-grid div { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 9px; padding: 10px 12px; }
/* 需求 6（本轮）：手机端番茄专注「概览 / 专注记录」过小且被挤到角落——
   .pomo-left 固定 320px 会占满首行，.pomo-side 被挤成窄条。改为纵向堆叠、两块都占满整宽，
   并放大统计数字与记录行，保证可读可点。
   ※ 注意：本块必须放在下面 .pomo-ov-grid b{18px} 等**基础规则之后**——
   同权重下后定义的媒体查询规则才会正确覆盖基础字号（否则 18px 会反过来压掉 24px）。 */
.pomo-ov-grid b { font-size: 18px; font-weight: 800; color: var(--accent-ink); }
.pomo-ov-grid span { font-size: 12px; color: var(--muted); }
.pomo-rec { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px; }
.pomo-rec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pomo-rec-h h4 { margin: 0; font-size: 13.5px; color: var(--text); }
@media (max-width: 860px) {
  .pomo-body { flex-direction: column; gap: 16px; align-items: stretch; }
  .pomo-left { width: 100%; max-width: 100%; margin: 0; }
  .pomo-side { flex: none; width: 100%; min-width: 0; }
  .pomo-ov, .pomo-rec { padding: 14px 16px; }
  .pomo-ov h4, .pomo-rec-h h4 { font-size: 15px; }
  .pomo-ov-grid { gap: 12px; }
  .pomo-ov-grid b { font-size: 24px; }
  .pomo-ov-grid span { font-size: 13px; }
  .pomo-ov-grid div { padding: 14px 14px; }
  .pomo-rec .tl-st-list .tl-st-row { padding: 12px 10px; }
}
.pomo-task { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.pomo-task label { flex: none; }

/* ---- 纪念日 ---- */
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ms-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px 14px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ms-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
.ms-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ms-name { font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-type { font-size: 12px; color: var(--muted); }
.ms-num { display: flex; flex-direction: column; align-items: flex-end; }
.ms-num b { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.ms-num span { font-size: 11px; color: var(--muted); }
.ms-tip { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ms-card .tl-mini.danger { position: absolute; top: 8px; right: 8px; }
.ms-empty { grid-column: 1 / -1; }

/* ---- 添加纪念日：类型菜单 / 图标选择 ---- */
.tl-msmenu .tl-ms-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl-ms-type { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); padding: 12px 14px; cursor: pointer; }
.tl-ms-type:hover { border-color: var(--accent); }
.tl-ms-type b { font-size: 14px; color: var(--text); }
.tl-ms-type span { font-size: 12px; color: var(--muted); }
.ms-ico-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ms-ico-row > span { font-size: 13px; color: var(--muted); flex: none; }
.ms-icos { display: flex; flex-wrap: wrap; gap: 7px; }
.ms-ico-btn { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); font-size: 19px; cursor: pointer; }
.ms-ico-btn.on { border-color: var(--accent); background: var(--accent-soft); }

/* 需求 j#1：纪念日卡片备注显示（最多 2 行，超出省略） */
.ms-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 需求 j#2：编辑弹窗去掉逐行分隔线，提醒/重复、类型/天数计算 合并为两列 */
#tl-ms-ov .tl-prow { border-top: none; padding-top: 0; margin-top: 10px; }
.tl-prow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tl-pfield { display: flex; flex-direction: column; gap: 5px; }
.tl-pfield > span { font-size: 12px; color: var(--muted); }
.tl-pfield select { width: 100%; max-width: none; }
.tl-prow-note { flex-direction: column; align-items: stretch; gap: 5px; }
.tl-prow-note > span { font-size: 12px; color: var(--muted); }
#tl-ms-ov textarea#ms-note { width: 100%; min-height: 62px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--surface-2); color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.45; resize: vertical; }
#tl-ms-ov textarea#ms-note:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ================= 需求 z#5：时间轴任务块真实高度 + 可拖拽 ================= */
.tl-tg-blk { cursor: grab; }
.tl-tg-blk:active { cursor: grabbing; }
.tl-tg-blk.dragging { opacity: .92; box-shadow: 0 6px 18px rgba(15, 18, 30, .18); }

/* =========================================================
 * 需求 a#1：添加弹窗内原生 <select> 统一为页面风格（圆角 / 表面色 / 与详情面板一致）
 * ========================================================= */
.tl-prow select, .tl-picker select {
  font-family: inherit; font-size: 12.5px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; cursor: pointer;
  width: 100%; max-width: 200px;
}
.tl-prow select:focus, .tl-picker select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* =========================================================
 * 需求 a#2：习惯详情右栏面板（紧凑，不再撑满整屏）
 * ========================================================= */
.hl-panel { display: flex; flex-direction: column; gap: 4px; }
.hl-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 10px; border-bottom: 1px solid var(--border); }
.hl-panel-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.hl-detail-body { padding-top: 12px; }
.hl-mcal-wrap { margin: 8px 0 14px; }
.hl-mcal-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.hl-mcal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
.hl-mcal-week span { text-align: center; font-size: 11px; color: var(--muted); }
.hl-mcell.ghost { background: transparent; border-color: transparent; cursor: default; }
.hl-mcell.today { box-shadow: 0 0 0 1.5px var(--accent) inset; }

/* =========================================================
 * 需求 a#3：纪念日日期复用通用日期选择器（按钮样式，覆盖在弹窗之上）
 * ========================================================= */
.ms-datefield {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 6px 10px;
  font-size: 13px; cursor: pointer;
}
.ms-datefield:hover { border-color: var(--accent); color: var(--accent); }
.ms-datefield svg { width: 15px; height: 15px; }
#tl-picker-ov.ms-mode { z-index: 1500; }

/* =========================================================
 * 需求 a#4：番茄专注设置面板
 * ========================================================= */
.tl-tool-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 12px; }
.tl-th-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-th-title { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }
.tl-th-sub { font-size: 12.5px; color: var(--muted); }
.tl-th-r { display: flex; align-items: center; gap: 8px; flex: none; }
.tl-icobtn {
  width: 32px; height: 32px; border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer;
}
.tl-icobtn:hover { color: var(--text); border-color: var(--accent); }
/* 需求 b#8：此处原先二次定义 .btn-new（padding:6px 12px + font-size:14px），
   与文件顶部 .btn-new 的 width/height:28px 叠加后内容区仅剩 4px，
   导致效率工具右侧「＋」溢出到右下角、看起来「位置不正确」。
   已移除该冲突规则，效率工具的 ＋ 改用下方独立的 .tl-tool-add。 */
.tl-tool-add {
  width: 32px; height: 32px; flex: none; padding: 0;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tl-tool-add svg { width: 15px; height: 15px; }
.tl-tool-add:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
/* 需求 5（本轮）：效率工具「返回待办」按钮——桌面端隐藏（侧栏可直接切换），手机端才显示 */
.tl-th-back {
  display: none; flex: none; align-items: center; gap: 4px;
  height: 32px; padding: 0 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tl-th-back svg { width: 15px; height: 15px; }
.tl-th-back:active { background: var(--surface); }
@media (max-width: 860px) { .tl-th-back { display: inline-flex; } }
.pomo-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pomo-set-head h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.pomo-set-title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 14px 0 8px; letter-spacing: .02em; }
.pomo-set-group { display: flex; flex-direction: column; gap: 4px; }
.pomo-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.pomo-toggle-txt { min-width: 0; }
.pomo-toggle-txt b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.pomo-toggle-txt p { font-size: 12px; color: var(--muted); margin: 2px 0 0; line-height: 1.4; }
.pomo-crown { font-size: 13px; }
.pomo-sw { width: 42px; height: 24px; border-radius: 999px; border: none; background: var(--border); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.pomo-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pomo-sw.on { background: var(--accent); }
.pomo-sw.on i { left: 21px; }
.pomo-set-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.pomo-set-row > span { font-size: 13px; color: var(--text); }
.pomo-set-num { display: inline-flex; align-items: center; gap: 6px; }
.pomo-set-num input { width: 64px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--surface); color: var(--text); font-size: 13px; text-align: right; }
.pomo-set-num i { font-size: 12px; color: var(--muted); font-style: normal; }

/* =========================================================
 * 需求 a#5：纪念日分类标签页 + 卡片菜单 + 样式弹窗
 * ========================================================= */
.ms-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ms-cat { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.ms-cat:hover { color: var(--text); border-color: var(--accent); }
.ms-cat.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.ms-card { grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.ms-card-top { grid-column: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-more { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 8px; padding: 4px 9px; flex: none; }
.ms-more:hover { background: var(--surface-2); color: var(--text); }
.ms-num { grid-column: 2; grid-row: 1; align-self: center; }
.ms-tip { grid-column: 1 / -1; }
.ms-card.past .ms-num b { color: var(--muted); }
.ms-archived-tip { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.msmenu { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 6px; min-width: 180px; }
.msmenu-it { display: flex; align-items: center; gap: 10px; border: none; background: none; color: var(--text); font-size: 13.5px; text-align: left; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.msmenu-it svg { width: 16px; height: 16px; flex: none; }
.msmenu-it:hover { background: var(--surface-2); }
.msmenu-it.danger { color: var(--danger); }
.msmenu-it.danger:hover { background: var(--danger-soft); }
/* 需求 3 / 4：清单设置复选框 */
.tl-chk-row { display: flex; align-items: center; }
.tl-chk-row .tl-chkbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); background: var(--surface); margin-left: auto; flex: none; position: relative; transition: background .15s, border-color .15s; }
.tl-chk-row.on .tl-chkbox { background: var(--accent); border-color: var(--accent); }
.tl-chk-row.on .tl-chkbox::after { content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tl-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
.tl-set-label { font-size: 13.5px; color: var(--text); }
.tl-chk { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: none; margin: 0; }
.ms-cols { display: flex; flex-wrap: wrap; gap: 7px; }
.ms-col-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.ms-col-btn.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* =========================================================
 * 需求 a#6：过滤器与标签（左栏分组 + 添加 / 编辑弹窗）
 * ========================================================= */
.tl-filters, .tl-tags { display: flex; flex-direction: column; gap: 2px; }
.tl-side-hint { font-size: 12px; color: var(--muted); padding: 6px 10px; margin: 0; line-height: 1.5; }
.tl-frow, .tl-tagrow { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.tl-frow.on, .tl-tagrow.on { background: var(--surface-2); }
.tl-fmain, .tl-tagmain { flex: 1; display: flex; align-items: center; gap: 8px; border: none; background: none; color: var(--text); font-size: 13px; padding: 7px 8px; border-radius: 8px; cursor: pointer; min-width: 0; text-align: left; }
.tl-fmain:hover, .tl-tagmain:hover { background: var(--surface-2); }
.tl-frow.on .tl-fmain, .tl-tagrow.on .tl-tagmain { font-weight: 700; color: var(--accent); }
.tl-sico { width: 16px; height: 16px; flex: none; color: var(--muted); display: inline-flex; }
.tl-sico svg { width: 16px; height: 16px; }
.tl-slabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-tagrow-d1 { padding-left: 14px; }
.tl-tagrow-d2 { padding-left: 28px; }
.tl-tagrow-d3 { padding-left: 42px; }
.tl-tagdot { width: 9px; height: 9px; border-radius: 50%; background: var(--tagc, var(--accent)); flex: none; }
.tl-pin { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; margin-left: 4px; }
.tl-fname { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tl-fico { color: var(--muted); display: inline-flex; }
.tl-fico svg { width: 18px; height: 18px; }
.tl-fname input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); color: var(--text); font-size: 13px; }
.tl-fconds { display: flex; flex-wrap: wrap; gap: 7px; }
.tl-fchip { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 9px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; }
.tl-fchip:hover { color: var(--text); border-color: var(--accent); }
.tl-fchip.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.tl-tagadd .tl-prow-tag { justify-content: flex-start; gap: 8px; border-top: none; padding-top: 0; margin-top: 0; }
.tl-tagadd .tl-prow-tag input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: var(--surface-2); color: var(--text); font-size: 13px; width: auto; }
.tl-tag-ico { color: var(--accent); display: inline-flex; }
.tl-tag-ico svg { width: 18px; height: 18px; }
.tl-cols { display: flex; flex-wrap: wrap; gap: 7px; }
.tl-col { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.tl-col.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* 需求 t#1：邮件模板弹窗（主题 + 正文 + 变量提示） */
.tl-mailtpl { width: 400px; }
.tl-mailtpl .tl-mt-lab { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 5px 2px; }
.tl-mailtpl input#tl-mt-subj { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); color: var(--text); font-size: 13px; margin-bottom: 12px; }
.tl-mailtpl input#tl-mt-subj:focus, .tl-mailtpl textarea#tl-mt-body:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tl-mailtpl textarea#tl-mt-body { width: 100%; min-height: 116px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.tl-mailtpl .tl-mt-hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; }
.tl-mailtpl .tl-mt-hint b { color: var(--text); font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

/* =========================================================
 * 需求 b#2 / b#5：通用创建任务块（列表 / 日历各视图 / 四象限 / 标签 / 过滤器 通用）
 * ========================================================= */
.tl-addbar {
  margin: 0 22px 10px; padding: 10px 12px 9px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.tl-addbar .tl-add-input {
  border: none; background: transparent; padding: 3px 2px 10px;
  font-size: 14.5px; border-radius: 0;
}
.tl-addbar .tl-add-input:focus { outline: none; border: none; background: transparent; }
.tl-addbar .tl-addctl { margin-top: 0; gap: 7px; }
.tl-addbar .tl-flags { border: none; background: none; padding: 0; }
.tl-addbar .tl-chip { border-color: transparent; background: transparent; color: var(--muted); padding: 5px 8px; }
.tl-addbar .tl-chip:hover { background: var(--surface); color: var(--accent); border-color: transparent; }
.tl-addbar .tl-chip.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tl-addbar .tl-chip-more { font-size: 15px; line-height: 1; letter-spacing: 1px; padding: 5px 9px; }
.tl-qa-add { flex: none; }
/* 需求 h#1：添加任务按钮与「状态」chip（选中态：浅紫底 + 紫字）同底色、同尺寸 */
.tl-addbar .tl-qa-add {
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
  border-radius: 8px; padding: 5px 8px; font-size: 12.5px; min-width: 0;
  box-shadow: none; display: inline-flex; align-items: center; justify-content: center;
}
.tl-addbar .tl-qa-add:hover { background: var(--accent); color: #fff; }
.tl-addbar .tl-qa-add:active { transform: none; }
.tl-addbar .tl-qa-add svg { width: 16px; height: 16px; }
/* 需求 d#5：创建块清单 / 标签 / 时间段 chip 只显示图标（不显示文字） */
.tl-addbar .tl-chip.tl-chip-nolabel .tl-chip-label { display: none; }
.tl-addbar .tl-add-status.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* 需求 b#3：任务行 / 详情 标签 */
.tl-rowtag {
  font-size: 11.5px; line-height: 1; padding: 3px 7px; border-radius: 6px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--tagc, var(--accent)); white-space: nowrap;
}
.tl-row:hover .tl-rowtag { background: var(--surface); }
.tl-d-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-d-tag {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer;
}
.tl-d-tag:hover { color: var(--text); border-color: var(--accent); }
.tl-d-tag.on { border-color: var(--tagc, var(--accent)); color: var(--tagc, var(--accent)); background: var(--surface); font-weight: 600; }
.tl-d-hint { font-size: 12px; color: var(--muted); }

/* 需求 b#3：创建任务块的标签多选弹窗 */
.tl-addtag .tl-tagpick-wrap { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; margin-bottom: 14px; }
.tl-tagpick {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 9px; padding: 7px 12px; font-size: 12.5px;
}
.tl-tagpick:hover { border-color: var(--accent); }
.tl-tagpick.on { border-color: var(--tagc, var(--accent)); color: var(--tagc, var(--accent)); background: var(--surface); font-weight: 600; box-shadow: 0 0 0 2px var(--accent-soft); }

/* 需求 b#7：习惯卡片「⋯」菜单 / 置顶 / 备注 / 编辑弹窗 */
.hl-card-head .hl-more { width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 15px; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; }
.hl-card.pinned { border-color: var(--accent); }
.hl-card.pinned .hl-card-head .hl-more { color: var(--muted); }
.hl-card-note { font-size: 12.5px; color: var(--muted); padding: 0 14px 8px; }
.hl-edit .tl-d-sec { margin-top: 14px; }
.hl-edit .tl-d-note { min-height: 84px; }

/* =========================================================
 * 需求 c#1：清单行 hover 出现「⋯」菜单 + 置顶 / 已归档 标记
 * ========================================================= */
.tl-sec-r { display: inline-flex; align-items: center; gap: 2px; }
.tl-listrow .tl-mini { opacity: 0; transition: opacity .12s; }
.tl-listrow:hover .tl-mini,
.tl-listrow.on .tl-mini { opacity: 1; }
.tl-listrow.on .tl-fmain { font-weight: 700; color: var(--accent); }

/* =========================================================
 * 需求 c#3 / c#4：通用创建块折叠（默认占位，聚焦 / 有设置展开）
 * ========================================================= */
.tl-addbar .tl-addctl { display: none; }
.tl-addbar:hover .tl-addctl,
.tl-addbar:focus-within .tl-addctl,
.tl-addbar.expanded .tl-addctl { display: flex; }
.tl-addbar .tl-add-input { color: var(--text); }

/* =========================================================
 * 需求 c#5：任务状态徽标（进行 / 延后 / 逾期 / 归档）
 * ========================================================= */
.tl-rowstatus { font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 6px; flex: none; font-weight: 600; white-space: nowrap; }
.tl-rowstatus.st-doing { background: var(--accent-soft); color: var(--accent); }
.tl-rowstatus.st-delayed { background: #fff3e0; color: #e08a00; }
.tl-rowstatus.st-overdue { background: var(--danger-soft); color: var(--danger); }
.tl-rowstatus.st-archived { background: var(--surface-2); color: var(--muted); }

/* 时间段选择弹窗 */
.tl-seg .tl-prow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tl-seg .tl-prow > span { width: 64px; color: var(--muted); font-size: 13px; flex: none; }
.tl-seg .tl-prow input[type="time"] { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--surface-2); color: var(--text); font-size: 13px; }
.tl-seg-presets { display: flex; gap: 7px; flex-wrap: wrap; }
.tl-seg-preset { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.tl-seg-preset:hover { color: var(--text); border-color: var(--accent); }
.tl-seg-preset.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.tl-seg-prev { color: var(--muted); }
.tl-seg-prev b { color: var(--text); font-weight: 600; }
/* 需求 1（20261004d）：预览行补总时长（跨天时段尤其需要，否则看不出结束在几天后） */
.tl-pc-spanprev-dur { font-style: normal; font-size: 12px; color: var(--muted); }
.tl-pc-spanprev-dur:not(:empty) { margin-left: 6px; }

/* 默认设置面板复用 .tl-d-flags / .tl-d-label / .tl-d-select（已定义） */
.tl-addmore .tl-d-flags { align-items: center; margin: 10px 0; }
.tl-addmore .tl-d-label { width: 72px; flex: none; }
.tl-addmore .tl-d-select { flex: 1; max-width: 200px; }

/* =========================================================
 * 需求 c#9：看板视图 / 甘特图视图
 * ========================================================= */
.tl-board { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; }
.tl-board-col { flex: 1 1 0; min-width: 220px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.tl-board-col.empty { opacity: .7; }
.tl-board-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.tl-board-head b { font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 6px; padding: 1px 7px; }
.tl-board-body { display: flex; flex-direction: column; gap: 6px; }
.tl-board-body .tl-row { background: var(--surface); }

.tl-gantt { display: flex; flex-direction: column; gap: 8px; }
.tl-gantt-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-left: 120px; border-bottom: 1px dashed var(--border); padding-bottom: 4px; }
.tl-gantt-row { display: flex; align-items: center; gap: 10px; }
.tl-gantt-name { width: 110px; flex: none; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-gantt-track { position: relative; flex: 1; height: 26px; background: var(--surface-2); border-radius: 7px; }
.tl-gantt-bar { position: absolute; top: 3px; height: 20px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 11px; line-height: 20px; padding: 0 8px; overflow: hidden; white-space: nowrap; }
.tl-gantt-bar.st-doing { background: var(--accent); }
.tl-gantt-bar.st-delayed { background: #f5a623; }
.tl-gantt-bar.st-overdue { background: var(--danger); }
.tl-gantt-bar.st-todo { background: #8bc34a; }

/* =========================================================
 * 需求 i#2：甘特图手机端专用布局（桌面端保持原样）
 * 手机上原布局问题：轴刻度 3h 一档共 9 个标签挤在 ~250px 内互相重叠；
 * 任务名固定 110px 又把轨道压得很窄。这里改为「任务名+时间置顶一行 + 轨道占满整宽」。
 * ========================================================= */
@media (max-width: 700px) {
  .tl-gantt.m { gap: 12px; }
  .tl-gantt.m .tl-gantt-axis {
    position: relative; height: 16px; padding-left: 0; margin-bottom: 2px;
    border-bottom: 1px dashed var(--border); font-size: 10.5px;
  }
  .tl-gantt.m .tl-gantt-axis span { position: absolute; top: 0; white-space: nowrap; }
  .tl-gantt.m .tl-gantt-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .tl-gantt.m .tl-gantt-rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .tl-gantt.m .tl-gantt-name { width: auto; flex: 1; min-width: 0; font-size: 13.5px; }
  .tl-gantt.m .tl-gantt-time { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .tl-gantt.m .tl-gantt-track {
    height: 34px; border-radius: 9px;
    background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 25% 100%;
  }
  .tl-gantt.m .tl-gantt-bar {
    top: 4px; height: 26px; line-height: 26px; border-radius: 7px;
    font-size: 11px; padding: 0 7px; min-width: 12px; box-sizing: border-box;
  }
}

/* =========================================================
 * 需求 d#2 / d#6：详情底部图标按钮 + 状态图标
 * ========================================================= */
.tl-d-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; }
.tl-d-foot-acts, .tl-d-foot-ok { display: inline-flex; align-items: center; gap: 8px; }
.tl-foot-ico {
  width: 36px; height: 36px; flex: none; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.tl-foot-ico:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }
.tl-foot-ico.danger { color: var(--danger); }
.tl-foot-ico.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.tl-d-status-ico { display: inline-flex; color: var(--accent); flex: none; }
.tl-d-status-ico svg { width: 16px; height: 16px; }
/* 需求 d#6：详情顶部 meta chip 仅显示图标 */
.tl-d-meta .tl-chip.tl-chip-ico { padding: 5px; }
.tl-d-meta .tl-chip.tl-chip-ico svg { width: 16px; height: 16px; }

/* =========================================================
 * 需求 d#4：看板视图拖拽切换状态
 * ========================================================= */
.tl-board-col { cursor: default; transition: background .12s, box-shadow .12s; }
.tl-board-col.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.tl-board-body .tl-row { cursor: grab; }
.tl-board-body .tl-row.dragging { opacity: .45; cursor: grabbing; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
/* 需求 e#7：四象限拖拽切换优先级 */
.tl-quad-cell { transition: background .12s, box-shadow .12s; }
.tl-quad-cell.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.tl-quad-body .tl-row { cursor: grab; }
.tl-quad-body .tl-row.dragging { opacity: .45; cursor: grabbing; box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* =========================================================
   需求 3（20261004q）：智能表格（左侧栏「智能表格」页）
   形态对齐飞书智能表：浅灰网格 + 表头类型徽章 + 底部统计行
   ========================================================= */
.sheet-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 2px 2px; }
.sheet-tip { margin-left: auto; font-size: 12px; color: var(--muted); }
.sheet-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-left: 2px; }
.sheet-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; font-size: 13px; table-layout: fixed; }
.sheet-table th, .sheet-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; }
.sheet-table th:last-child, .sheet-table td:last-child { border-right: none; }
.sheet-th { background: var(--bg-soft, #f6f7fb); text-align: left; padding: 6px 8px; white-space: nowrap; }
.sheet-kind {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 1; color: var(--muted);
  background: var(--accent-soft, #eef1fd); border-radius: 5px; padding: 3px 6px; margin-right: 6px;
  cursor: pointer; user-select: none;
}
.sheet-kind:hover { color: var(--accent); }
.sheet-kind.k-number { background: #e8f4ec; }
.sheet-kind.k-date { background: #eef2fb; }
.sheet-kind.k-check { background: #f3ecfb; }
.sheet-kind.k-select { background: #fdf1e6; }
.sheet-head-name {
  border: none; background: none; font-weight: 600; font-size: 13px; color: var(--text);
  padding: 2px 4px; border-radius: 6px;
}
.sheet-head-name:focus { outline: none; background: var(--bg-soft, #f6f7fb); }
.sheet-td { min-height: 34px; }
.sheet-cell {
  border: none; background: none; width: 100%; padding: 7px 9px; font-size: 13px; color: var(--text);
  border-radius: 0;
}
.sheet-cell:focus { outline: none; background: var(--accent-soft, #eef1fd); }
.sheet-cell::placeholder { color: var(--muted); }
.sheet-check { width: 15px; height: 15px; accent-color: var(--accent); margin: 9px 9px; display: block; }
.sheet-ops { width: 34px; text-align: center; }
.sheet-x {
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: 6px; opacity: 0;
}
.sheet-table tbody tr:hover .sheet-x, .sheet-th:hover .sheet-x, .sheet-x:focus { opacity: 1; }

/* ---- 需求 1-7（20261004t）：公告栏 / 页面留白 / 列宽拖动 / 画册 / 查询页 ---- */
#page-sheet { padding: 20px 24px 28px; }
.sheet-notice-box { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.sheet-notice-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sheet-ntools, .sheet-nops { display: flex; align-items: center; gap: 6px; }
.sheet-nops { margin-left: auto; gap: 8px; padding-left: 14px; border-left: 1px solid var(--border); }
.sheet-nsep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.sheet-nt {
  min-width: 28px; height: 28px; border: none; background: none; border-radius: 6px; cursor: pointer;
  color: var(--text); font-size: 13px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
}
.sheet-nt:hover { background: var(--bg-soft, #f2f3f7); }
.sheet-nt svg { width: 15px; height: 15px; }
.sheet-nt-a { position: relative; font-weight: 600; }
.sheet-nt-a::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: -1px; height: 2px; background: #e15b5b; }
.sheet-nsel { border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text); padding: 4px 6px; background: var(--surface); margin: 0 2px; }
.sheet-nsel.nsize { width: 66px; }
.sheet-ncheck { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-left: 6px; }
.sheet-ncheck input { accent-color: var(--accent); }
.sheet-notice { min-height: 46px; max-height: 40vh; overflow: auto; padding: 10px 12px; font-size: 14px; color: var(--text); outline: none; line-height: 1.7; }
.sheet-notice:empty::before, .sheet-notice[data-empty="1"]::before { content: attr(data-ph); color: var(--muted); }
.sheet-notice mark.sheet-hit { background: #ffe58f; color: inherit; }
/* 列宽拖动把手 */
.sheet-th { position: relative; }
.sheet-colrz { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; }
.sheet-colrz:hover { background: var(--accent); opacity: .5; }
.sheet-rz-tip { position: fixed; z-index: 120; background: #1f2430; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; }
/* 画册视图 */
.sheet-album-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px 2px; }
.sheet-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding-left: 2px; }
.sheet-album-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.sheet-album-cover { height: 122px; background: var(--bg-soft, #f6f7fb); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sheet-album-cover img { max-width: 100%; max-height: 118px; object-fit: cover; }
.sheet-album-ph svg { width: 30px; height: 30px; }
.sheet-album-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.sheet-album-t { font-size: 13px; color: var(--muted); }
.sheet-album-f { font-size: 16px; font-weight: 600; color: var(--text); }
/* 查询视图 */
.sheet-q-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px 2px; }
.sheet-q-undo { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 6px; }
.sheet-q-undo:hover { background: var(--bg-soft, #f2f3f7); }
.sheet-q-pages { margin-left: auto; display: flex; gap: 18px; }
.sheet-q-page { border: none; background: none; font-size: 13px; color: var(--muted); padding: 6px 2px; cursor: pointer; border-bottom: 2px solid transparent; }
.sheet-q-page.on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.sheet-q-edit { display: flex; gap: 16px; }
.sheet-q-side { width: 240px; flex: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.sheet-q-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.sheet-q-tabs span { text-align: center; font-size: 12.5px; color: var(--muted); padding: 8px 0; }
.sheet-q-tabs span.on { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.sheet-q-sec { font-size: 12px; color: var(--muted); padding: 10px 12px 6px; }
.sheet-q-sec i { font-style: normal; color: var(--accent); cursor: pointer; margin-left: 6px; }
.sheet-qf-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--text); border-top: 1px solid var(--border); }
.sheet-qf-row.req .sheet-qf-n { font-weight: 600; }
.sheet-qf-ico { color: var(--muted); display: inline-flex; }
.sheet-qf-n { flex: 1; }
.sheet-qf-req, .sheet-qf-x { font-style: normal; cursor: pointer; color: var(--muted); }
.sheet-qf-req:hover, .sheet-qf-x:hover { color: var(--accent); }
.sheet-q-main { flex: 1; background: var(--bg-soft, #f4f5f9); border-radius: 10px; padding: 22px; display: flex; justify-content: center; }
.sheet-q-card { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.sheet-q-title { border: none; font-size: 19px; font-weight: 700; color: var(--text); width: 100%; background: none; }
.sheet-q-title:focus { outline: none; }
.sheet-q-desc { border: none; font-size: 13px; color: var(--muted); width: 100%; background: none; margin: 4px 0 14px; }
.sheet-q-desc:focus { outline: none; }
.sheet-q-row { margin-bottom: 14px; }
.sheet-q-row b { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.sheet-q-input { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font-size: 13px; background: var(--bg-soft, #f7f8fb); color: var(--text); }
.sheet-q-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.sheet-q-ops { display: flex; justify-content: center; margin-top: 18px; }
.sheet-q-use { display: flex; justify-content: center; padding: 10px 0; }
.sheet-q-use-t { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
/* ---- 需求 1-6（20261005c）：时长按实际时间 / 标题换行 / 备注 / 括号按钮 / 行尾对齐 + 完成态 ---- */
/* 需求 2：详情标题改为 textarea —— 标题超过一行自动换行并撑高（最多 220px） */
.tl-d-title {
  border: none; background: none; resize: none; overflow: hidden; width: 100%;
  font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; min-height: 22px;
  white-space: pre-wrap; word-break: break-word;
}
.tl-d-title:focus { outline: none; }
/* 需求 6：行尾各列定宽右对齐 —— 多行任务的状态/旗/时长才能纵向对齐（列表/四象限视图用 .tl-mc-* 三列） */
.tl-rowstatus { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; }
.tl-rowstatus.st-done { background: #e9f7ee; color: #1f7a44; }
.tl-rowflag { width: 18px; justify-content: center; }
.tl-rowtime { min-width: 66px; text-align: right; }
.tl-rowsub { min-width: 52px; justify-content: flex-end; }
.tl-row.done .tl-rowstatus, .tl-row.done .tl-rowflag, .tl-row.done .tl-rowtime { opacity: .55; }
.tl-row.done { background: var(--surface-2); }
.tl-row.done .tl-rowtitle { text-decoration: line-through; }
/* 需求 5：addbar 的括号按钮（与日期按钮同样处理，避免被 flex 压成 0 宽） */
#tl-add-paren { flex: none; min-width: 32px; padding: 5px 6px; }
#tl-add-paren svg { width: 15px; height: 15px; }

/* ---- 需求 5（20261005b）：公告（由好友改造） ---- */
.ann-list { display: flex; flex-direction: column; gap: 10px; }
.ann-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.ann-item-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ann-item-h b { font-size: 14px; color: var(--text); }
.ann-item-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ann-item-b { font-size: 13px; color: var(--text); line-height: 1.7; }
.ann-admin .setting-row { align-items: flex-start; }
.tl-rowfrom {
  font-size: 11.5px; color: var(--muted); background: var(--bg-soft, #f2f3f7);
  border-radius: 5px; padding: 1px 6px; margin-left: 8px; flex: none; max-width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-flags-single { position: relative; display: inline-flex; }
.tl-addprio-pop, .tl-df-priopop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14); white-space: nowrap;
}
.tl-df-priopop { position: static; margin-top: 8px; box-shadow: none; background: var(--bg-soft, #f7f8fb); }
.tl-addprio-pop[hidden], .tl-df-priopop[hidden] { display: none; }
.tl-addprio-pop .tl-d-pop-label, .tl-df-priopop .tl-d-pop-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.tl-favpick { width: 300px; }
.tl-fav-list { max-height: 320px; overflow: auto; padding: 4px 0; }
.tl-fav-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text);
}
.tl-fav-row:hover { background: var(--surface); }
.tl-fav-row input { accent-color: var(--accent); }
.tl-fav-name { flex: 1; }
.tl-fav-row b { font-size: 12px; color: var(--muted); font-weight: 400; }
.tl-fav-ops { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--border); }
/* 插入日期按钮（需求 6 / 20261005a）：曾用虚线框区分；需求 3（20261005b）改为与旁边图标完全一致 */
.tl-dtbtn-date { border: none !important; background: none; color: inherit; }
.tl-dtbtn-date:hover { background: var(--bg-soft, #f2f3f7); }
.tl-dtbtn-date svg { width: 16px; height: 16px; }
/* 左右留白：画册 / 查询页 / 表单 / 看板 两侧都要有呼吸感 */
.sheet-album { padding: 2px 10px 2px 6px; }
.sheet-album-bar, .sheet-kanban-bar, .sheet-q-bar { margin-left: 6px; }
.sheet-q-edit { padding: 0 8px 0 6px; gap: 18px; }
.sheet-q-side { margin-left: 2px; }
.sheet-q-main { padding: 26px 30px; }
.sheet-q-use { padding: 14px 12px; }
.sheet-kanban { padding: 0 8px 8px 6px; }
.sheet-dash-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px 6px; }
.sheet-dash-bar .btn-ghost.sm { display: inline-flex; align-items: center; gap: 5px; }
.sheet-dash-bar svg { width: 14px; height: 14px; }
/* 仪表盘空态 */
.sheet-dash-empty { text-align: center; padding: 70px 20px 60px; }
.sheet-dash-art { display: flex; justify-content: center; gap: 14px; margin-bottom: 22px; }
.sheet-dash-art .art { width: 96px; height: 66px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.art-bar { display: flex !important; align-items: flex-end !important; gap: 5px; padding: 0 14px 12px; }
.art-bar i { width: 9px; background: #7aa2ff; border-radius: 2px 2px 0 0; display: block; }
.art-line { color: #4a7dff; }
.art-line svg { width: 54px; height: 40px; }
.art-num { flex-direction: column; gap: 6px; color: #4a7dff; }
.art-num b { font-size: 15px; }
.art-num i { display: block; width: 34px; height: 3px; background: #cfe0ff; border-radius: 2px; }
.sheet-dash-empty h3 { font-size: 15px; color: var(--text); margin: 0 0 8px; }
.sheet-dash-empty p { font-size: 12.5px; color: var(--muted); margin: 0 0 20px; }
.sheet-dash-empty .btn-primary { min-width: 150px; padding: 9px 18px; font-size: 13px; border-radius: 6px; }
/* 仪表盘图表网格 */
.sheet-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 0 6px; }
.sheet-dash-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.sheet-dash-card-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.sheet-dash-card-h span { display: flex; gap: 6px; }
.sheet-dash-card-h i { font-style: normal; color: var(--muted); cursor: pointer; padding: 0 4px; }
.sheet-dash-card-h i:hover { color: var(--accent); }
.sheet-dash-card-b { padding: 10px 14px 14px; }
.sheet-dash-legend { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.sheet-dash-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sheet-dash-legend i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.sheet-dash-card-b svg { width: 100%; height: auto; }
.sheet-dash-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.sheet-dash-table th, .sheet-dash-table td { border: 1px solid var(--border); padding: 5px 7px; text-align: left; color: var(--text); }
.sheet-dash-table th { background: var(--bg-soft, #f6f7fb); }
.sheet-dash-text { font-size: 18px; font-weight: 600; color: var(--text); padding: 20px 0; text-align: center; }
/* 仪表盘 / 分享 弹窗 */
.sheet-dash-mask { position: fixed; inset: 0; background: rgba(17, 24, 39, .28); z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sheet-dash-mask.hidden { display: none; }
.sheet-dash-modal {
  width: min(1080px, 96vw); height: min(640px, 92vh); background: var(--surface); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
  position: relative;
}
.sheet-dash-body { flex: 1; min-height: 0; display: flex; }
.sheet-dash-side { width: 300px; flex: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.sheet-dash-stabs { display: flex; gap: 18px; padding: 14px 18px 0; border-bottom: 1px solid var(--border); }
.sheet-dash-stabs button { border: none; background: none; font-size: 13px; color: var(--muted); padding: 0 0 10px; cursor: pointer; border-bottom: 2px solid transparent; }
.sheet-dash-stabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.sheet-dash-sbody { flex: 1; overflow: auto; padding: 4px 18px 20px; }
.sheet-dash-sec { font-size: 12px; color: var(--muted); margin: 14px 0 8px; }
.sheet-dt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sheet-dt { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--border); background: none; border-radius: 8px; padding: 10px 4px; cursor: pointer; color: var(--text); font-size: 11.5px; }
.sheet-dt .dt-ico { color: var(--muted); display: inline-flex; }
.sheet-dt i { font-style: normal; }
.sheet-dt.on { border-color: var(--accent); background: var(--accent-soft, #eef1fd); color: var(--accent); }
.sheet-dt.on .dt-ico { color: var(--accent); }
.sheet-dline { display: flex; gap: 8px; }
.sheet-dchip { border: 1px solid var(--border); background: none; border-radius: 7px; padding: 6px 12px; font-size: 12px; color: var(--text); cursor: pointer; }
.sheet-dchip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft, #eef1fd); }
.sheet-dcolors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sheet-dcolor { width: 20px; height: 20px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sheet-dcolor.on { border-color: var(--text); }
.sheet-dcolor-sel { border: 1px solid var(--border); border-radius: 6px; font-size: 12px; padding: 3px 6px; background: var(--surface); color: var(--text); }
.sheet-drow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sheet-dlab { width: 74px; font-size: 12px; color: var(--muted); flex: none; }
.sheet-dinput { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; background: var(--surface); color: var(--text); min-width: 0; }
.sheet-dinput:disabled { background: var(--bg-soft, #f6f7fb); color: var(--muted); }
.sheet-dmini { border: 1px solid var(--border); background: none; border-radius: 6px; padding: 6px 8px; font-size: 12px; color: var(--text); cursor: pointer; }
.sheet-dtoggle { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text); padding: 7px 0; border-bottom: 1px solid var(--border); }
.sheet-dtoggle input { accent-color: var(--accent); }
.sheet-dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sheet-dash-mhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; }
.sheet-dash-x { border: none; background: none; font-size: 17px; color: var(--muted); cursor: pointer; line-height: 1; }
.sheet-dash-x:hover { color: var(--text); }
.sheet-dash-prev { flex: 1; overflow: auto; padding: 18px; }
.sheet-dash-prev svg { width: 100%; height: auto; }
.sheet-dash-guide { position: absolute; right: 22px; bottom: 74px; background: var(--accent); color: #fff; font-size: 12px; padding: 7px 12px; border-radius: 16px; box-shadow: var(--shadow-md); }
.sheet-dash-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
/* 分享表格 */
.sheet-share-tip { font-size: 12.5px; color: var(--muted); padding: 12px 0 4px; line-height: 1.7; }
.sheet-share-row { display: flex; gap: 8px; }
.sheet-share-row .sheet-dinput { flex: 1; }
.sheet-share-ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.9; }
.sheet-share-card { border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.sheet-share-card-t { font-size: 15px; font-weight: 600; color: var(--text); }
.sheet-share-card-s { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.sheet-share-card-l { font-size: 12px; color: var(--accent); margin-top: 10px; }
.sheet-form-card { max-width: 620px; }
.sheet-form-cover {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 84px; margin: -6px 0 14px;
  border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: 12.5px; cursor: pointer;
  background: var(--bg-soft, #f7f8fb);
}
.sheet-form-cover:hover { border-color: var(--accent); color: var(--accent); }
.sheet-form-cover svg { width: 22px; height: 22px; }
.sheet-form-block { border: 1px solid transparent; border-radius: 9px; padding: 6px 8px 2px; margin-bottom: 2px; }
.sheet-form-block:hover { border-color: var(--border); }
.sheet-form-block.on { border-color: var(--accent); background: var(--accent-soft, #f7f9ff); }
.sheet-form-cfg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--border); }
.sheet-form-cfg-l { color: var(--muted); }
.sheet-form-cfg .sheet-q-sel { width: auto; min-width: 92px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; padding: 3px 6px; background: var(--surface); color: var(--text); }
.sheet-form-cfg-ck { display: inline-flex; align-items: center; gap: 4px; }
.sheet-form-cfg-ck input { accent-color: var(--accent); }
.sheet-form-cfg-b { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 5px; border-radius: 5px; }
.sheet-form-cfg-b:hover { background: var(--surface); color: var(--accent); }
.sheet-form-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.sheet-form-opt { border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.sheet-form-opt.on { border-color: var(--accent); background: var(--accent-soft, #eef1fd); color: var(--accent); }
.sheet-form-none, .sheet-form-alldone { font-size: 12px; color: var(--muted); padding: 10px 12px; }
.sheet-form-alldone { text-align: center; border: 1px dashed var(--border); border-radius: 8px; margin: 0 12px; }
.sheet-form-addbtn { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 13px; color: var(--accent); cursor: pointer; }
.sheet-form-addbtn svg { width: 15px; height: 15px; }
.sheet-form-img {
  border: 1px dashed var(--border); border-radius: 9px; height: 96px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12.5px; cursor: pointer; background: var(--bg-soft, #f7f8fb);
}
.sheet-form-img:hover { border-color: var(--accent); color: var(--accent); }
.sheet-layout { display: flex; gap: 14px; height: 100%; min-height: 0; align-items: stretch; }
.sheet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sheet-foot-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sheet-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sheet-tab {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.sheet-tab.on { background: var(--accent-soft, #eef1fd); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sheet-tab-x { font-style: normal; opacity: .5; font-size: 13px; padding: 0 2px; }
.sheet-tab-x:hover { opacity: 1; color: var(--danger); }
.sheet-tab-add { border: 1px dashed var(--border); background: none; color: var(--muted); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.sheet-tab-add:hover { color: var(--accent); border-color: var(--accent); }
/* 右侧表格列表 */
.sheet-side {
  width: 232px; flex: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet-side-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sheet-side-ico { color: var(--muted); display: inline-flex; }
.sheet-search { flex: 1; border: none; background: none; font-size: 13px; color: var(--text); min-width: 0; }
.sheet-search:focus { outline: none; }
.sheet-side-list { flex: 1; overflow: auto; padding: 6px; }
.sheet-side-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none;
  color: var(--text); font-size: 13px; padding: 7px 8px; border-radius: 7px; cursor: pointer; margin-bottom: 2px;
}
.sheet-side-item:hover { background: var(--bg-soft, #f6f7fb); }
.sheet-side-item.on { background: var(--accent-soft, #eef1fd); color: var(--accent); font-weight: 600; }
/* 20261016b#2：「文件 → sheet 页」两级结构 */
.sheet-side-file { font-weight: 600; }
.sheet-side-file .sheet-side-arrow { font-style: normal; opacity: .45; font-size: 11px; padding: 0 3px; }
/* 20261016d#1：「文件 → 表单位 → sheet 页」三级结构：表单位第二层，sheet 页第三层缩进加深 */
.sheet-side-group { font-weight: 600; }
.sheet-side-group .sheet-side-arrow { font-style: normal; opacity: .45; font-size: 11px; padding: 0 3px; }
.sheet-side-leaf { padding-left: 14px; }
.sheet-side-sub { padding-left: 38px; }
.sheet-side-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-side-x { font-style: normal; opacity: .45; padding: 0 3px; }
.sheet-side-x:hover { opacity: 1; }
.sheet-side-none { font-size: 12px; color: var(--muted); padding: 10px 8px; }
.sheet-side-new { border-top: 1px solid var(--border); padding: 8px 6px 10px; max-height: 46%; overflow: auto; }
.sheet-side-sec { font-size: 11.5px; color: var(--muted); padding: 4px 8px 6px; }
.sheet-side-newitem {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none;
  color: var(--text); font-size: 13px; padding: 7px 8px; border-radius: 7px; cursor: pointer;
}
.sheet-side-newitem:hover { background: var(--bg-soft, #f6f7fb); }
.sheet-side-newitem span { color: var(--muted); display: inline-flex; }
/* 看板视图 */
.sheet-kanban-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px 2px; }
.sheet-kb-lb { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sheet-kb-sel { width: auto; min-width: 140px; }
.sheet-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.sheet-kcol { min-width: 230px; flex: 1 0 230px; background: var(--bg-soft, #f6f7fb); border-radius: 10px; padding: 10px; }
.sheet-kcol-h { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; justify-content: space-between; }
.sheet-kcol-h i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; }
.sheet-kcard { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.sheet-kcard-t { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.sheet-kcard-f { font-size: 15px; color: var(--text); margin-bottom: 6px; font-weight: 600; }
/* 日历视图 */
.sheet-cal { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.sheet-cal-h { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-soft, #f6f7fb); }
.sheet-cal-h span { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 0; }
.sheet-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.sheet-cal-cell { min-height: 92px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); padding: 6px; }
.sheet-cal-cell:nth-child(7n) { border-right: none; }
.sheet-cal-cell.empty { background: var(--bg-soft, #fafbfd); }
.sheet-cal-cell.today b { color: var(--accent); }
.sheet-cal-cell b { font-size: 12px; color: var(--muted); }
.sheet-cal-item { display: block; font-size: 12px; color: var(--text); background: var(--accent-soft, #eef1fd); border-radius: 5px; padding: 2px 5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-cal-more { font-size: 11px; color: var(--muted); }
/* 甘特视图 */
.sheet-gantt { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 8px; }
.sheet-gt-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--border); padding: 8px 4px; position: relative; }
.sheet-gt-name { width: 160px; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-gt-bar { position: relative; flex: 1; background: var(--accent-soft, #eef1fd); color: var(--accent); font-size: 12px; border-radius: 6px; padding: 4px 8px; }
.sheet-gt-bar.done { background: #e9f7ee; color: #1f7a44; }
/* 未实现视图占位 */
.sheet-todo { text-align: center; padding: 60px 0; color: var(--muted); }
.sheet-todo-ill { display: flex; justify-content: center; margin-bottom: 10px; color: var(--muted); }
.sheet-todo-ill svg { width: 34px; height: 34px; }
.sheet-todo p { font-size: 14px; margin: 0 0 6px; color: var(--text); }
.sheet-todo span { font-size: 12.5px; }
/* 列重命名输入框（需求 1 / 20261004u）：去掉浏览器默认黑色描边与 focus ring，直接用蓝色描边 */
.sheet-rename {
  border: 2px solid var(--accent); border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text);
  padding: 2px 6px; flex: 1 1 auto; min-width: 0; width: auto; background: var(--surface); outline: none !important;
  box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.sheet-rename:focus { border-color: var(--accent); outline: none !important; box-shadow: 0 0 0 3px var(--accent-soft, #eef1fd); }
.sheet-rename::selection { background: var(--accent-soft, #eef1fd); }
/* 货币字段设置面板 */
.sheet-pop-cur { min-width: 300px; }
.sheet-pop-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sheet-pop-row { display: flex; gap: 6px; }
.sheet-pop-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sheet-pop-q {
  display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--border);
  background: none; border-radius: 8px; padding: 8px 4px; cursor: pointer; font-size: 12px; color: var(--text);
}
.sheet-pop-q i { color: var(--muted); display: inline-flex; }
.sheet-pop-q.on { border-color: var(--accent); background: var(--accent-soft, #eef1fd); color: var(--accent); }
.sheet-pop-q.on i { color: var(--accent); }
.sheet-pop-hint { font-size: 12px; color: var(--muted); text-align: right; margin: 4px 2px 0; }
.sheet-pop-ck { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); padding: 8px 2px 4px; }
.sheet-pop-ck input { accent-color: var(--accent); }
.sheet-pop-ai { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
.sheet-pop-ops { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.sheet-clip-ta {
  width: 100%; min-height: 168px; max-height: 320px; resize: vertical; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text);
  padding: 8px; margin-top: 4px; white-space: pre; overflow: auto;
}
.sheet-clip-ta:focus { outline: none; border-color: var(--accent); }
.sheet-pop-clip { width: 340px; max-width: calc(100vw - 24px); }
.btn-primary.sm { background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 12.5px; padding: 6px 14px; cursor: pointer; }
.btn-primary.sm:hover { filter: brightness(1.05); }
.sheet-page { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.sheet-quick {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 9px 12px; font-size: 13px; color: var(--text); width: 100%;
}
.sheet-quick:focus { outline: none; border-color: var(--accent); }
.sheet-footbar { display: flex; align-items: center; gap: 8px; padding: 10px 2px 2px; }
.sheet-footbar .sheet-tip { margin-right: auto; }
.sheet-th-idx, .sheet-idx { width: 46px; text-align: center; color: var(--muted); font-size: 12px; }
.sheet-idx.on { color: var(--accent); font-weight: 700; }
/* 20261016a#2：列标题可显示范围跟列同宽。
   注意：.sheet-th 必须保持 table-cell——设为 flex 会让 <th> 掉出表格布局流、
   表头纵向堆叠（20261014c 踩过的坑）。做法：.sheet-head 用 width:100% 撑满单元格
   内容盒，右侧留固定 padding；× 与拖拽手柄改绝对定位固定在列头末尾。 */
.sheet-head {
  display: flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box;
  border: none; background: none; cursor: pointer;
  padding: 2px 30px 2px 2px; border-radius: 6px; min-width: 0;
}
.sheet-head:hover { background: rgba(0, 0, 0, .04); }
.sheet-head .sheet-kind { margin-right: 0; flex: none; }
.sheet-head-name { font-weight: 600; font-size: 13px; color: var(--text); flex: 1 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* × 固定在列头末尾（绝对定位，避让 .sheet-head 右侧预留 padding 与拖拽手柄） */
.sheet-th .sheet-x { position: absolute; right: 12px; top: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; padding: 4px 5px; }
.sheet-addcol {
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
  width: 100%; padding: 4px; border-radius: 6px;
}
.sheet-addcol:hover { background: rgba(0, 0, 0, .05); color: var(--accent); }
.sheet-addrow {
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px;
}
.sheet-addrow:hover { color: var(--accent); }
.sheet-num { text-align: right; }
.sheet-ro { padding: 8px 9px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-pick { padding: 5px 6px; cursor: pointer; min-height: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border-radius: 6px; }
.sheet-pick:hover { background: rgba(0, 0, 0, .04); }
.sheet-tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: 12px; line-height: 1.5;
  font-weight: 600; white-space: nowrap;
}
.sheet-tag-empty { background: var(--bg-soft, #f4f5f9); color: var(--muted); font-weight: 400; }
.sheet-prog { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
.sheet-prog-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft, #eef1fd); border-radius: 4px; }
.sheet-range { flex: 1; position: relative; accent-color: var(--accent); }
.sheet-prog-t { position: relative; font-size: 12px; color: var(--muted); font-style: normal; min-width: 32px; text-align: right; }
.sheet-imgadd, .sheet-fileadd {
  border: 1px dashed var(--border); background: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 5px 8px; border-radius: 6px; width: calc(100% - 16px); margin: 4px 8px; text-align: center;
}
.sheet-imgadd:hover, .sheet-fileadd:hover { border-color: var(--accent); color: var(--accent); }
.sheet-imgcell { position: relative; padding: 4px 8px; }
.sheet-imgcell img { max-height: 44px; max-width: 100%; border-radius: 6px; display: block; }
.sheet-imgdel { position: absolute; top: 0; right: 2px; opacity: 1; background: rgba(255, 255, 255, .9); }
.sheet-file { display: inline-block; padding: 6px 8px; font-size: 12.5px; color: var(--text); cursor: default; }

/* 下拉面板 */
.sheet-pop {
  position: fixed; z-index: 90; min-width: 220px; max-width: 320px; max-height: 62vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16); padding: 6px;
}
/* 20261016e#1：单表渲染异常兜底提示（残损表不再整页空白） */
.sheet-render-err { margin: 24px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--accent-soft, #eef1fd); color: var(--text); font-size: 14px; line-height: 1.6; }
/* 20261016f#4：应用内确认框（替代原生 confirm —— 受限预览环境会静默忽略原生模态） */
.sheet-cf { width: 360px; }
.sheet-cf-tx { font-size: 13px; color: var(--muted); line-height: 1.65; margin: -4px 0 14px; }
.sheet-cf .modal-ops { margin-top: 2px; }
.sheet-cf .btn-primary.danger { background: var(--danger, #e5484d); }
.sheet-cf .btn-primary.danger:hover { filter: brightness(1.06); background: var(--danger, #e5484d); }
.sheet-cf input { margin-bottom: 14px; }
/* 20261016f#5：表单位行的 ⋯ 与折叠箭头并排（⋯ 靠右、箭头最右） */
.sheet-side-group .sheet-side-x { margin-left: auto; }
.sheet-pop-sec { font-size: 12px; color: var(--muted); padding: 6px 8px 4px; }
.sheet-pop-none { font-size: 12px; color: var(--muted); padding: 6px 8px; }
.sheet-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sheet-pop-item, .sheet-pop-opt {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text);
  padding: 7px 8px; border-radius: 7px;
}
.sheet-pop-item i, .sheet-pop-opt i { font-style: normal; width: 18px; text-align: center; color: var(--muted); }
.sheet-pop-item:hover, .sheet-pop-opt:hover { background: var(--accent-soft, #eef1fd); }
.sheet-pop-item.on, .sheet-pop-opt.on { background: var(--accent-soft, #eef1fd); color: var(--accent); font-weight: 600; }
.sheet-pop-item.on i, .sheet-pop-opt.on i { color: var(--accent); }
.sheet-pop-foot { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); padding: 6px 8px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.sheet-pop-search { padding: 4px 4px 6px; }
.sheet-pop-input {
  width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font-size: 13px;
  background: var(--bg-soft, #f6f7fb); color: var(--text);
}
.sheet-pop-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.sheet-pop-list { display: flex; flex-direction: column; gap: 1px; max-height: 220px; overflow: auto; }
.sheet-pop-none { font-size: 12px; color: var(--muted); padding: 8px; }
.sheet-tick { width: 16px; }
.sheet-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.sheet-x:hover { background: var(--surface); color: var(--danger); }
.sheet-empty { text-align: center; color: var(--muted); padding: 26px 0; }
.sheet-stat { background: var(--bg-soft, #f6f7fb); color: var(--muted); font-size: 12px; white-space: nowrap; }
.sheet-footlabel { font-weight: 600; }


/* ================= 20261005e：统计移位 / 习惯月份选择器 / 公告删除 / 手机端优化 ================= */
/* 需求 3：统计条（中栏标题行下方） */
.tl-statsbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.tl-statsbar-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.tl-statsbar-btn:hover { border-color: var(--accent); color: var(--accent); }
.tl-statsbar-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft, #eef1fd); }

/* 需求 1：习惯月份选择器 + 可点日志行 */
.hl-mcal-head { display: flex; align-items: center; gap: 8px; }
.hl-mcal-head b { flex: 1; text-align: center; font-size: 14px; color: var(--text); }
.hl-mcal-nav { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; }
.hl-mcal-nav:hover { border-color: var(--accent); color: var(--accent); }
.hl-mcal-today { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.hl-mcal-today:hover { border-color: var(--accent); color: var(--accent); }
button.hl-log-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 9px 4px; cursor: pointer; font-size: 12.5px; color: var(--text); }
button.hl-log-row:hover { background: var(--surface-2); }
button.hl-log-row i { flex: 1; font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-log-h em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 8px; }
.tl-logday { width: 340px; }
.tl-logday-body { padding: 6px 16px 4px; }
.tl-logday-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.tl-logday-row span { width: 62px; color: var(--muted); flex: none; }
.tl-logday-row b { flex: 1; color: var(--text); font-weight: 500; word-break: break-word; }

/* 需求 6：公告删除按钮 */
.ann-item { position: relative; }
.ann-item-del { position: absolute; top: 8px; right: 10px; border: none; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ann-item-del:hover { color: #e5484d; background: var(--surface-2); }
.ann-item-h { padding-right: 28px; }

/* 需求 7：后台数据页手机端优化（<= 760px）——之前多处横向溢出导致看不到 */
@media (max-width: 760px) {
  .admin-wrap { padding: 16px 12px 40px; }
  .admin-wrap .page-title { font-size: 18px; margin-bottom: 12px; }
  .admin-card { padding: 13px 12px; margin-bottom: 10px; border-radius: 10px; }
  .admin-card .sec-title { font-size: 14px; }
  /* 设置行改为「标题在上、操作在下」纵向堆叠，输入框占满宽度 */
  .setting-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .setting-info b { font-size: 13.5px; }
  .setting-info .hint { font-size: 12px; max-width: 100%; }
  .setting-ops { flex-wrap: wrap; gap: 8px; width: 100%; }
  .setting-ops input, .setting-ops select, .setting-ops textarea { flex: 1 1 100%; min-width: 0; width: 100%; }
  .setting-ops .btn-primary, .setting-ops .btn-ghost { flex: 0 0 auto; }
  .ann-admin .setting-row { align-items: stretch; }
  /* 用户表：表格转卡片（避免横向滚动看不到右侧列） */
  .admin-table-wrap, .table-wrap { overflow-x: visible; }
  table.admin-table, .admin-table { width: 100%; table-layout: fixed; font-size: 12px; }
  .perm-box { gap: 6px; }
  .perm-box .admin-note { width: 100%; }
  /* 统计块 / 数字卡两列 */
  .stat-grid, .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ann-item-meta { display: block; margin-top: 4px; }
  .friend-list .friend-row { flex-wrap: wrap; gap: 8px; }
}

/* 需求 7 补充（20261005e）：手机端后台表格表头不再被压成竖排单字 */
@media (max-width: 760px) {
  .admin-table th, .admin-table td { word-break: keep-all; overflow-wrap: anywhere; }
  .admin-table thead th { white-space: normal; line-height: 1.35; font-size: 11.5px; }
  .admin-table th:first-child, .admin-table td:first-child { width: 32%; }
  .admin-table th:nth-child(2), .admin-table td:nth-child(2) { width: 22%; }
}

/* ================= 20261005f：统计入口 / 公告时间 / 清单组对齐 / 表格留白 ================= */
/* 需求 4：清单组标题与清单行的数量统一右对齐到同一竖线 */
.tl-grp-head { display: flex; align-items: center; gap: 8px; }
.tl-grp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-grp-cnt { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.tl-list-cnt, .tl-listrow .tl-cnt { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

/* 需求 2：公告发布时间可点（仅超管） */
.ann-item-time { position: absolute; top: 8px; right: 34px; border: none; background: none; cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px; opacity: .55; }
.ann-item-time:hover { opacity: 1; background: var(--surface-2); }
[data-anntimeview] { cursor: default; }
.is-admin [data-anntimeview], .ann-admin [data-anntimeview] { cursor: pointer; text-decoration: underline dotted; }
.ann-item-h { padding-right: 56px; }

/* 需求 5：画册 / 看板视图上边与左边留白（此前贴边） */
.sheet-album-bar { margin: 6px 0 16px 8px; }
.sheet-album { padding: 4px 14px 4px 10px; }
.sheet-album-card .sheet-album-cover { margin: 0; }
.sheet-kanban-bar { margin: 6px 0 14px 8px; }
.sheet-kanban { padding: 2px 14px 10px 10px; }
.sheet-album-card { margin-top: 2px; }
/* 看板「分组依据」下拉过宽 → 限宽并靠左 */
.sheet-kanban-bar select, .sheet-album-bar select { max-width: 200px; }
.sheet-groupby { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; }
.sheet-groupby select { max-width: 180px; min-width: 120px; }
/* 看板「分组依据」下拉：限宽（此前撑满整行） */
.sheet-kb-sel { width: auto; min-width: 120px; max-width: 190px; }
.sheet-kanban-bar .sheet-kb-lb { flex: none; }

/* 需求 4（20261005f）：清单行数量与分组数量同宽右对齐 */
.tl-listrow .tl-badge { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; margin-left: auto; }
.tl-listrow .tl-fmain { display: flex; align-items: center; gap: 8px; width: 100%; }

/* ================= 需求（20261005g） ================= */
/* 需求 1：未分组 / 已归档 的行尾补「⋯」等宽占位，计数才能与已建分组、清单行对齐 */
/* 占位必须与真实「⋯」按钮同宽（13px 图标 + 2px×2 padding = 17px），否则计数仍会偏右 */
.tl-grp-more-ph { visibility: hidden; width: 17px; height: 17px; }
.tl-grp-head { align-items: center; }
/* 需求 4：子任务标题改为可编辑输入框（原为纯 span，点不动） */
.tl-sub-title {
  flex: 1; min-width: 0; font-size: 13px; font-family: inherit; color: var(--text);
  background: none; border: none; border-bottom: 1px solid transparent; padding: 2px 3px;
}
.tl-sub-title:focus { outline: none; border-bottom-color: var(--accent); }
/* 需求 7：左侧栏「智能表格」下方的分隔横线 */
.nav-sep { height: 1px; background: var(--border); margin: 8px 12px; }

/* =========================================================
 * 需求（20261006h）
 *   1. 手机端左侧栏只显示图标
 *   2. 摘要「选择清单（可多选）」弹窗
 *   3. 摘要下方「过滤」行 + 「添加过滤器」窗口（普通 / 高级）
 *   4. 0 点 md 日志模板（子任务 / 描述 / 列序）
 *   5. 智能表格适配手机
 * ========================================================= */

/* ---------- 需求 1：手机端左侧栏只显示图标 ---------- */
.nav-item .ni-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  /* 侧栏在窄屏是「顶部横排」，8 个入口带文字会占掉两三行 —— 只留图标，标题走 title 提示 */
  .side-nav { gap: 4px; padding: 0 8px 8px; justify-content: flex-start; }
  .nav-item { padding: 9px 10px; }
  .nav-item .ni-tx { display: none; }
  .nav-item .ni-ico svg { width: 19px; height: 19px; }
  .nav-sep { display: none; }
  .side-title { font-size: 14px; }
}

/* ---------- 需求 2：选择清单（可多选）弹窗 ---------- */
.tl-sumpick { width: 340px; }
.tl-sum-list { max-height: 340px; overflow: auto; padding: 2px 0; }
.tl-sum-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px;
  font-size: 13.5px; color: var(--text); cursor: pointer;
}
.tl-sum-row:hover { background: var(--surface-2); }
.tl-sum-row input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.tl-sum-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sum-row b { font-size: 12px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.tl-sum-ops { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px 0; border-top: 1px solid var(--border); margin-top: 8px; }

/* ---------- 需求 3：「过滤」行 + 添加过滤器窗口 ---------- */
/* 过滤图标：三条递减横线 + 下方漏斗，线性风格与其它侧栏图标一致 */
.tl-frow .tl-sico { color: var(--muted); }
.tl-filters { display: flex; flex-direction: column; gap: 2px; }

.tl-filteradd2 { width: 520px; max-width: 100%; }
.tl-fa2-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tl-fa2-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.tl-fa2-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: 9px; padding: 3px; margin: 0 auto 14px; }
.tl-fa2-tabs button { border: none; background: none; padding: 7px 22px; border-radius: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.tl-fa2-tabs button.on { background: var(--accent-soft, #eef1fd); color: var(--accent); font-weight: 700; }
.tl-fa2-name { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tl-fa2-name .tl-fa2-ico { color: var(--muted); display: inline-flex; flex: none; }
.tl-fa2-name input { flex: 1; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--surface); color: var(--text); font-size: 13.5px; }
.tl-fa2-name input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, #eef1fd); }
.tl-fa2-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tl-fa2-row > label, .tl-fa2-row > .tl-fa2-lb { width: 62px; flex: none; font-size: 13.5px; color: var(--text); }
.tl-fa2-row select, .tl-fa2-row input[type="text"] {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  background: var(--surface); color: var(--text); font-size: 13.5px;
}
.tl-fa2-row select:focus, .tl-fa2-row input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, #eef1fd); }
/* 优先级：所有 / 高 / 中 / 低 / 无 —— 单选圆点 + 方形复选框（同截图） */
.tl-fa2-pris { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: 1; }
.tl-fa2-pri { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.tl-fa2-pri input { accent-color: var(--accent); width: 15px; height: 15px; }
/* 高级：条件胶囊 + 逻辑胶囊 + ＋ */
.tl-fa2-conds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-fa2-cond {
  display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0;
  padding: 8px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.tl-fa2-cond .tl-fa2-pill { background: var(--surface); }
.tl-fa2-op { flex: none; }
.tl-fa2-val { flex: 1; min-width: 90px; display: inline-flex; }
.tl-fa2-val > select, .tl-fa2-val > input { flex: 1; min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--text); font-size: 13px; }
.tl-fa2-del { flex: none; padding: 6px 10px; }
.tl-fa2-pill {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); border-radius: 9px; padding: 8px 13px; font-size: 13px; cursor: pointer;
}
.tl-fa2-pill:hover { border-color: var(--accent); color: var(--accent); }
.tl-fa2-pill.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft, #eef1fd); }
.tl-fa2-pill.dashed { border-style: dashed; }
.tl-fa2-pill.add { font-size: 17px; line-height: 1; padding: 4px 14px; }
.tl-fa2-pill-ico { display: inline-flex; }
.tl-fa2-menu {
  position: absolute; z-index: 40; min-width: 168px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 24, 40, .14);
  padding: 6px; display: flex; flex-direction: column;
}
.tl-fa2-menu button {
  display: flex; align-items: center; gap: 8px; border: none; background: none; text-align: left;
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); cursor: pointer;
}
.tl-fa2-menu button:hover { background: var(--surface-2); }
.tl-fa2-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.tl-fa2-preview { border: none; background: none; color: var(--accent); font-size: 13px; cursor: pointer; padding: 4px 2px; font-weight: 600; }
.tl-fa2-example { border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 2px; }
.tl-fa2-foot .sp { flex: 1; }
.tl-fa2-hint { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
@media (max-width: 700px) {
  .tl-sumpick { width: 100%; }
  .tl-filteradd2 { width: 100%; }
  .tl-fa2-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .tl-fa2-row > label, .tl-fa2-row > .tl-fa2-lb { width: auto; }
  .tl-fa2-tabs button { padding: 7px 14px; }
}

/* ---------- 需求 4：md 日志里的子任务 / 描述渲染 ---------- */
.mdlog-subs { margin: 2px 0 0; padding-left: 16px; }
.mdlog-subs li { margin: 1px 0; }
.mdlog-desc { color: var(--muted); font-size: 12px; }

/* ---------- 需求 5：智能表格适配手机 ---------- */
@media (max-width: 760px) {
  #page-sheet { padding: 12px 10px 20px; }
  .sheet-layout { flex-direction: column; gap: 10px; }
  .sheet-main { gap: 10px; }
  /* 右侧表格列表移到下方并给一个固定高度，避免手机上被压成 0 */
  .sheet-side { width: 100%; max-height: 210px; }
  .sheet-side-list { max-height: 108px; }
  .sheet-side-new { max-height: none; }
  /* 工具栏按钮改成横向可滚动的一排，节省纵向空间 */
  .sheet-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-left: 0; -webkit-overflow-scrolling: touch; }
  .sheet-toolbar .btn-ghost.sm { flex: none; }
  .sheet-toolbar .sheet-tip { display: none; }
  /* 公告工具栏同样横滚，字体选择/字号不撑破 */
  .sheet-notice-bar { padding: 8px 10px; gap: 6px; }
  .sheet-ntools { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  .sheet-ntools .sheet-ncheck { display: none; }
  .sheet-nops { margin-left: 0; padding-left: 8px; }
  .sheet-notice { min-height: 40px; font-size: 13.5px; }
  /* 表格：去掉 560px 最小宽度导致的双重滚动，改为按内容横向滚动 + 首列吸附 */
  .sheet-wrap { margin-left: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
  .sheet-table { min-width: 100%; width: max-content; font-size: 12.5px; }
  .sheet-table th:first-child, .sheet-table td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .sheet-table thead th:first-child { z-index: 3; background: var(--bg-soft, #f6f7fb); }
  .sheet-cell { padding: 7px 8px; }
  .sheet-th { padding: 6px 6px; }
  .sheet-kind { margin-right: 4px; }
  .sheet-x { opacity: 1; }   /* 触屏无 hover，常显删除按钮 */
  .sheet-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .sheet-tab, .sheet-tab-add { flex: none; }
  .sheet-foot-actions { justify-content: stretch; }
  .sheet-foot-actions .btn-ghost.sm { flex: 1; }
  .sheet-footbar { font-size: 11.5px; }
  .sheet-kcol { min-width: 78vw; flex: 0 0 78vw; }   /* 看板列在手机上占大半屏 */
  .sheet-album { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
 * 需求 5（20261006i）：左栏「⋯ 更多 + 数量」行尾对齐
 *   统一结构： [主按钮 ...............] [⋯] [数量]
 *   数量右对齐到同一条竖线（与「今天」一致）；没有 ⋯ 的行补同宽占位。
 * ========================================================= */
.tl-tail { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.tl-tail-more { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex: none; }
.tl-tail-ph { display: block; width: 20px; height: 17px; }
.tl-num {
  font-size: 12px; color: var(--muted); font-weight: 600; flex: none;
  min-width: 26px; text-align: right; font-variant-numeric: tabular-nums;
}
.tl-num.is-zero { min-width: 26px; }
/* 智能行：主按钮撑开，行尾固定在右侧 */
.tl-srow .tl-smart { flex: 1; min-width: 0; }
.tl-srow .tl-rowmore, .tl-listrow .tl-rowmore, .tl-tagrow .tl-rowmore, .tl-filtrow .tl-rowmore, .tl-grp-head .tl-rowmore {
  opacity: 0; transition: opacity .12s; font-size: 14px; line-height: 1; padding: 3px 4px; width: 20px;
}
.tl-srow:hover .tl-rowmore, .tl-srow:focus-within .tl-rowmore,
.tl-listrow:hover .tl-rowmore, .tl-listrow:focus-within .tl-rowmore, .tl-listrow.on .tl-rowmore,
.tl-tagrow:hover .tl-rowmore, .tl-tagrow:focus-within .tl-rowmore, .tl-tagrow.on .tl-rowmore,
.tl-filtrow:hover .tl-rowmore, .tl-filtrow:focus-within .tl-rowmore, .tl-filtrow.on .tl-rowmore,
.tl-grp-head:hover .tl-rowmore, .tl-grp-head:focus-within .tl-rowmore { opacity: 1; }
@media (hover: none) {
  .tl-srow .tl-rowmore, .tl-listrow .tl-rowmore, .tl-tagrow .tl-rowmore,
  .tl-filtrow .tl-rowmore, .tl-grp-head .tl-rowmore { opacity: 1; }
}
/* 清单 / 标签 / 过滤器行：主按钮撑开 */
.tl-listrow .tl-fmain, .tl-tagrow .tl-tagmain, .tl-filtrow .tl-fmain { flex: 1; min-width: 0; }
/* 分组行：数量与齿轮同样走行尾 */
.tl-grp-head .tl-grp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-grp-head .tl-rowmore { padding: 3px; }
/* 旧规则覆盖：数量已移出主按钮，不再需要 margin-left:auto */
.tl-listrow .tl-badge { margin-left: 0; }
.tl-listrow .tl-fmain { width: auto; flex: 1; min-width: 0; }
/* 分组行数量沿用 .tl-grp-cnt 类名（兼容旧样式 / 断言），但排版交给统一的 .tl-num */
.tl-grp-head .tl-grp-cnt { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- 需求 4（20261006i）：公告「修改发布时间」弹窗 + 线性时钟图标 ---------- */
.ann-item-time { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; }
.ann-item-time svg { width: 15px; height: 15px; display: block; }
.tl-anntime { width: 360px; max-width: 100%; }
.tl-anntime-tip { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.tl-anntime input[type="datetime-local"] {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.tl-anntime input[type="datetime-local"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, #eef1fd); }
.tl-anntime .pomo-set-head { margin-bottom: 10px; }

/* ---------- 需求 1（20261006i）：「添加过滤器」窗口适配手机 ---------- */
@media (max-width: 760px) {
  /* 弹窗容器：全屏铺满，取消居中留白，避免窗口被压成一条 */
  #tl-filteradd2-ov { padding: 12px; align-items: flex-start; }
  #tl-filteradd2-ov .tl-picker { max-height: calc(100vh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .tl-filteradd2 { width: 100%; padding: 14px; border-radius: 14px; }
  .tl-fa2-head h3 { font-size: 15px; }
  /* 分段控件：整行等宽两半，拇指更好点 */
  .tl-fa2-tabs { display: flex; width: 100%; }
  .tl-fa2-tabs button { flex: 1; padding: 9px 0; }
  /* 普通页：标签在上、控件在下，避免 label 被压成竖排单字 */
  .tl-fa2-row { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 14px; }
  .tl-fa2-row > label, .tl-fa2-row > .tl-fa2-lb { width: auto; font-size: 12.5px; color: var(--muted); }
  .tl-fa2-row select, .tl-fa2-row input[type="text"] { width: 100%; padding: 10px 12px; font-size: 14px; }
  .tl-fa2-pris { gap: 12px 14px; }
  .tl-fa2-pri { font-size: 14px; }
  .tl-fa2-pri input { width: 17px; height: 17px; }
  /* 高级页：一条条件竖排（字段 / 运算符 / 值 / 删除 各占一行）*/
  .tl-fa2-conds { flex-direction: column; align-items: stretch; gap: 10px; }
  .tl-fa2-cond { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .tl-fa2-cond .tl-fa2-pill { justify-content: center; padding: 10px 12px; font-size: 13.5px; }
  .tl-fa2-val { width: 100%; }
  .tl-fa2-val > select, .tl-fa2-val > input { padding: 10px 12px; font-size: 14px; }
  .tl-fa2-del { align-self: flex-end; padding: 8px 14px; }
  /* 逻辑胶囊独立成行居中 */
  .tl-fa2-conds > .tl-fa2-pill[data-tlflogic] { align-self: center; padding: 7px 18px; }
  .tl-fa2-conds > .tl-fa2-pill.add { align-self: center; padding: 9px 20px; }
  /* 底部按钮：预览 / 规则示例 在上，关闭 / 保存 在下，各占一半 */
  .tl-fa2-foot { flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .tl-fa2-foot .sp { display: none; }
  .tl-fa2-preview, .tl-fa2-example { order: 1; flex: 1 1 auto; text-align: center; padding: 9px 0; border: 1px solid var(--border); border-radius: 9px; }
  .tl-fa2-foot .btn-ghost.sm, .tl-fa2-foot .btn-primary.sm { order: 2; flex: 1 1 0; min-width: 0; padding: 10px 0; }
  .tl-fa2-hint { font-size: 11.5px; }
}
/* 需求 5（20261006i）：分组行原本 padding-right:8px，会让它的数量比其它行右边缘少 8px。
   改成 padding-right:0，把这 8px 挪到名称上（视觉间距不变，右边缘与其它行齐平）。 */
.tl-grp-head { padding-right: 0; }
.tl-grp-head .tl-grp-name { padding-right: 10px; }

/* ---------- 需求 1（20261006i）补充：解除通用 select 的 200px 上限 + 加大按钮点击区 ---------- */
@media (max-width: 760px) {
  /* `.tl-prow select, .tl-picker select { max-width: 200px }` 会让手机上下拉只有 200px 宽，这里放开 */
  .tl-filteradd2 .tl-fa2-row select,
  .tl-filteradd2 .tl-fa2-row input[type="text"],
  .tl-filteradd2 .tl-fa2-val > select,
  .tl-filteradd2 .tl-fa2-val > input,
  .tl-filteradd2 .tl-fa2-op { max-width: none; width: 100%; }
  /* 按钮最小 40px 高，满足触屏点击 */
  .tl-filteradd2 .tl-fa2-foot .btn-ghost.sm,
  .tl-filteradd2 .tl-fa2-foot .btn-primary.sm { min-height: 40px; font-size: 14px; }
  .tl-filteradd2 .tl-fa2-preview, .tl-filteradd2 .tl-fa2-example { min-height: 38px; font-size: 13.5px; }
}

/* ---------- 需求 1（20261006i）再补：「关闭 / 保存」在手机上各占**整行**，别挤成半行 56px ---------- */
@media (max-width: 760px) {
  .tl-filteradd2 .tl-fa2-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tl-filteradd2 .tl-fa2-foot .sp { display: none; }
  .tl-filteradd2 .tl-fa2-preview,
  .tl-filteradd2 .tl-fa2-example { grid-column: span 1; }
  /* 只有「规则示例」存在时（高级页）预览与示例各占一格；下方两键再各占一格 */
  .tl-filteradd2 .tl-fa2-foot .btn-ghost.sm,
  .tl-filteradd2 .tl-fa2-foot .btn-primary.sm { grid-column: span 1; width: 100%; min-height: 42px; }
}

/* =========================================================
 * 需求（20261006j）
 *   1. 公告「修改时间 / 删除」图标与时间文字垂直对齐
 *   2. 公告筛选群发：增加「指定备注」条件
 *   3. 手机端侧栏个人资料块：加图标控制展开 / 折叠
 *   4. 超管「用户列表」适配手机端（表格 → 卡片）
 *   5. 清单 / 标签分区的 ＋ 与清单行数量右对齐；清单齿轮改悬浮「⋯」
 * ========================================================= */

/* ---------- 需求 1：公告图标对齐 ---------- */
/* 原来 .ann-item-time / .ann-item-del 都用 position:absolute + 固定 top，
   而时间文字 .ann-item-meta 的行高由字号决定 → 三者基线不一致。
   改为把时间 / 图标放进同一个 flex 行，天然居中对齐。 */
.ann-item-ops { position: absolute; top: 8px; right: 10px; display: flex; align-items: center; gap: 2px; z-index: 1; }
.ann-item-time, .ann-item-del {
  position: static; border: none; background: none; cursor: pointer; color: var(--muted);
  width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; opacity: .6; padding: 0; flex: none;
}
.ann-item-time:hover, .ann-item-del:hover { opacity: 1; background: var(--surface-2); }
.ann-item-del:hover { color: #e5484d; }
.ann-item-time svg { width: 15px; height: 15px; display: block; }
.ann-item-del { font-size: 17px; }
/* 标题行右侧留出与图标组等宽的空间，标题不再被压到图标下面 */
.ann-item-h { padding-right: 60px; }
.ann-item-meta { display: inline-flex; align-items: center; line-height: 1.5; }

/* ---------- 需求 3（20261006j）：手机端侧栏个人资料块折叠 ---------- */
.side-fold {
  display: none;   /* 桌面端不需要 */
  flex: none; width: 28px; height: 28px; border: none; background: none; color: var(--muted);
  border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; padding: 0;
}
.side-fold:hover { background: var(--surface-2); color: var(--text); }
.side-fold svg { width: 15px; height: 15px; display: block; transition: transform .18s; }
.side-foot.is-open .side-fold svg { transform: rotate(180deg); }
@media (max-width: 700px) {
  .side-foot { flex-wrap: wrap; padding: 10px 12px; gap: 8px; position: relative; }
  .side-foot .side-me { flex: 1; min-width: 0; }
  .side-fold { display: inline-flex; }
  /* 折叠时 .side-ops 整行隐藏；展开时占满下一行，横向排列三个按钮 */
  .side-foot .side-ops {
    display: none; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  }
  .side-foot.is-open .side-ops { display: flex; }
  .side-foot .side-ops .side-admin, .side-foot .side-ops .link-btn { font-size: 11.5px; }
}

/* ---------- 需求 4（20261006j）：超管用户列表适配手机端（表格 → 卡片） ---------- */
@media (max-width: 760px) {
  .admin-users-wrap { overflow-x: visible; }
  /* 表格转卡片：每个 tr 一张卡，td 竖排并用 ::before 打列名 */
  .admin-users-table,
  .admin-users-table tbody,
  .admin-users-table tr,
  .admin-users-table td { display: block; width: 100%; }
  .admin-users-table thead { display: none; }
  .admin-users-table tr {
    border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
    margin-bottom: 10px; background: var(--surface);
  }
  .admin-users-table tr:last-child td { border-bottom: none; }
  .admin-users-table td {
    border: none; padding: 6px 0; display: flex; align-items: flex-start; gap: 10px;
    text-align: left; word-break: break-word; line-height: 1.6;
  }
  .admin-users-table td::before {
    content: attr(data-label); flex: none; width: 74px; color: var(--muted);
    font-size: 12px; font-weight: 600; line-height: 1.8;
  }
  /* 卡片头部：用户 ID 单独一行且不换行截断 */
  .admin-users-table td.uid-text { font-size: 12px; padding-top: 0; word-break: break-all; }
  .admin-users-table td.num-cell::before { content: '笔记数'; }
  /* 权限 / 备注整块占满剩余宽度，不再被挤成竖排单字 */
  .admin-users-table td.perm-cell,
  .admin-users-table td.note-cell { flex-direction: column; align-items: stretch; gap: 6px; }
  .admin-users-table td.perm-cell::before,
  .admin-users-table td.note-cell::before { width: auto; line-height: 1.6; }
  .perm-box { gap: 10px 14px; }
  .perm-cb { font-size: 13px; }
  .perm-cb input { width: 16px; height: 16px; }
  .perm-save, .admin-note-save { min-height: 32px; padding: 5px 12px; }
  .admin-note { width: 100%; max-width: 100%; font-size: 13px; }
  .note-cell { white-space: normal; }
  /* 空态也要撑满 */
  .admin-users-table td.hint { color: var(--muted); }
  .admin-users-table td.hint::before { content: none; }
}

/* ---------- 需求 5（20261006j）：清单 / 标签 ＋ 号与清单行数量右对齐 ---------- */
.tl-sec-row { padding-right: 0; }
.tl-sec-row .tl-sec-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sec-tail { flex: none; }
.tl-sec-slot { min-width: 26px; display: inline-flex; align-items: center; justify-content: flex-end; }
.tl-sec-slot .tl-sec-add { display: inline-flex; align-items: center; justify-content: center; padding: 2px 3px; border-radius: 6px; }
.tl-sec-slot .tl-sec-add svg { width: 15px; height: 15px; display: block; }
/* 清单分区的「⋯ 清单设置」：悬浮 / 键盘聚焦才显示（与其它行一致） */
.tl-sec-more { opacity: 0; transition: opacity .12s; }
.tl-sec-row:hover .tl-sec-more, .tl-sec-row:focus-within .tl-sec-more { opacity: 1; }
@media (hover: none) { .tl-sec-more { opacity: 1; } }

/* 需求 5（20261006j）修正：`.tl-sec` 原本有 `margin: 14px 6px 6px`（左右各 6px），
   分区标题行的 ＋ 号会比下方清单行的数量少 6px 右缩进 → 标题行右边距归零即可对齐。 */
.tl-sec-row { margin-right: 0; }

/* 需求 4（20261006j）修正：卡片里 19 位用户 ID 被 74px 的标签列挤成竖排单字。
   → ID 行的标签宽度收窄、内容独占整行并横向滚动显示（不折行）。 */
@media (max-width: 760px) {
  .admin-users-table td.uid-text { flex-direction: column; align-items: stretch; gap: 4px; }
  .admin-users-table td.uid-text::before { width: auto; line-height: 1.6; }
  .admin-users-table td.uid-text .uid-val {
    display: block; font-family: var(--mono); font-size: 12px; color: var(--text);
    word-break: normal; overflow-x: auto; white-space: nowrap; padding-bottom: 2px;
  }
  /* 昵称 / 邮箱 / 注册时间 也不折行 */
  .admin-users-table td[data-label="昵称"],
  .admin-users-table td[data-label="邮箱"],
  .admin-users-table td.time-cell { word-break: normal; overflow-wrap: anywhere; }
}

/* 需求 4（20261006j）修正 2：74px 标签列放不下「昵称 / 邮箱」的内容 → 标签列加宽到 84px，
   且内容区 `white-space:nowrap` 防竖排（超长时由 .uid-val 的横向滚动兜底）。 */
@media (max-width: 760px) {
  .admin-users-table td::before { width: 84px; }
  .admin-users-table td[data-label="昵称"] > *,
  .admin-users-table td[data-label="邮箱"] > * { white-space: nowrap; }
  .admin-users-table td[data-label="昵称"],
  .admin-users-table td[data-label="邮箱"] { overflow-x: auto; }
}

/* =========================================================
 * 需求（20261006k）
 *   1. 「过滤」行展开时取消「邮件」等其它智能行的选中态
 *   2. 过滤器列表 / 提示紧跟「过滤」行，不再跑到「邮件」下方
 *   3. 公告时间文字与两个图标同一 flex 行，真正垂直居中
 *   4. 用户卡片：ID 显示全 / 昵称空行 / 权限不换行 / 保存按钮不压字 / 备注与存一行
 *   5. 手机端个人资料**整卡**折叠 + 侧栏「待办笔记」左侧新增个人资料图标
 *   6. 番茄钟：切离待办页时清 tlTool，不再被强制切回
 * ========================================================= */

/* ---------- 需求 3：公告时间行与图标真正对齐 ---------- */
/* 前两版失败的原因：图标 position:absolute + 固定 top，文字行高由字体决定，基线永远对不齐。
   这里把三者放进同一个 flex 行，用 align-items:center 由布局保证居中。 */
.ann-item-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ann-item-meta { font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 18px; }
.ann-item-ops { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: 2px; }
.ann-item-time, .ann-item-del {
  position: static; border: none; background: none; cursor: pointer; color: var(--muted);
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex: none; opacity: .55; transition: opacity .12s, background .12s;
}
.ann-item-time { font-size: 0; }   /* 清掉行内匿名盒子的基线间隙 */
.ann-item-del { font-size: 16px; line-height: 1; }
.ann-item-time:hover, .ann-item-del:hover { opacity: 1; background: var(--surface-2); }
.ann-item-del:hover { color: #e5484d; }
.ann-item-time svg { width: 15px; height: 15px; display: block; }
/* 标题右侧不再需要留白（图标已挪到时间行内） */
.ann-item-h { padding-right: 0; }

/* ---------- 需求 5（20261006k）：个人资料整卡折叠 + 侧栏入口图标 ---------- */
/* 桌面端：入口图标隐藏（底部卡片一直可见） */
.side-me-entry { display: none; }
.side-foot { transition: none; }

@media (max-width: 700px) {
  /* 入口图标与其它导航图标同排同大小 */
  .side-me-entry { display: flex; }
  .side-me-entry.on { background: var(--accent-soft); color: var(--accent-ink); }

  /* 整卡折叠：收起时只留一条极窄的占位（不占视觉空间），展开时完整显示 */
  .side-foot {
    display: block; padding: 0; border-top: 1px solid var(--border);
    max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  }
  .side-foot.is-open {
    max-height: 220px; opacity: 1; padding: 10px 12px; overflow: visible;
  }
  .side-foot .side-me { display: flex; width: 100%; }
  .side-foot .side-fold { display: inline-flex; }
  /* 展开态：头像昵称一行，箭头在右；公告/超管/退出横排一行 */
  .side-foot.is-open .side-me { padding-right: 34px; }
  .side-foot .side-fold {
    position: absolute; right: 10px; top: 12px; z-index: 2;
  }
  .side-foot.is-open .side-fold { position: static; margin-left: -34px; }
  .side-foot .side-ops {
    display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 8px; padding-top: 8px; margin-top: 8px;
    border-top: 1px solid var(--border);
  }
  .side-foot .side-ops .side-admin, .side-foot .side-ops .link-btn { font-size: 11.5px; }
  /* 收起态：整卡高度 0，视觉上完全消失 */
  .side-foot:not(.is-open) > * { visibility: hidden; }
  .side-foot:not(.is-open) { border-top-color: transparent; }
}

/* ---------- 需求 4（20261006k）：用户卡片五处修正 ---------- */
.note-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.note-row .admin-note { flex: 0 1 auto; width: 160px; max-width: 180px; min-width: 0; }
.note-row .admin-note-save { flex: none; }

@media (max-width: 760px) {
  /* ① 用户 ID 显示全：改成整行 + 字号自适应，绝不截断 */
  .admin-users-table td.uid-text { display: block; }
  .admin-users-table td.uid-text::before { display: block; width: auto; margin-bottom: 2px; }
  .admin-users-table td.uid-text .uid-val {
    display: block; width: 100%; font-family: var(--mono); font-size: 12px; color: var(--text);
    word-break: normal; overflow-wrap: normal; white-space: nowrap; line-height: 1.5;
  }
  /* ② 昵称下方空白行：内容为空（「—」）时不留空盒 */
  .admin-users-table td[data-label="昵称"] { min-height: 0; }
  .admin-users-table td[data-label="昵称"] > *:empty { display: none; }
  /* ③ 功能权限不换行：四个勾选 + 保存挤在一行，必要时横向滚动 */
  .admin-users-table td.perm-cell { display: block; }
  .admin-users-table td.perm-cell::before { display: block; width: auto; margin-bottom: 6px; }
  .admin-users-table .perm-box {
    flex-wrap: nowrap !important; overflow-x: auto; gap: 12px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .admin-users-table .perm-cb { flex: none; font-size: 12.5px; }
  .admin-users-table .perm-cb input { flex: none; width: 15px; height: 15px; }
  /* ④ 保存按钮不压字：`保存` 两字要完整显示，不能被挤成「保」 */
  .admin-users-table .perm-save {
    flex: none; white-space: nowrap; min-width: 48px; min-height: 28px;
    padding: 4px 10px; font-size: 12px; line-height: 1; writing-mode: horizontal-tb;
  }
  /* ⑤ 备注输入框 + 存 同一行 */
  .admin-users-table td.note-cell { display: block; }
  .admin-users-table td.note-cell::before { display: block; width: auto; margin-bottom: 6px; }
  .admin-users-table .note-row { flex-wrap: nowrap; }
  /* 需求 s#1（20261007）：手机端备注框**不再撑满整行**，改为固定窄宽，
     让「备注框 + 存」紧凑排在左侧。
     根因：上一轮（20261006r 需求2 Edit C）给它 `flex:1` + `max-width:none`，
     结果 19 位 ID 行修好后备注框反过来占满 277px，把「存」按钮顶到行最右缘（实测 btnRight==rowRight），
     视觉上像「按钮被挤出/贴边」。这里退回 `flex:0 1 auto` + 固定 150px，窄屏再收一档。 */
  .admin-users-table .admin-note { width: 150px; flex: 0 1 auto; min-width: 0; max-width: 150px; font-size: 13px; }
  @media (max-width: 400px) {
    .admin-users-table .admin-note { width: 118px; max-width: 118px; }
  }
  .admin-users-table .admin-note-save {
    flex: none; min-width: 40px; min-height: 32px; padding: 5px 12px;
    white-space: nowrap; font-size: 13px; line-height: 1;
  }
}

/* ---------- 需求 3（20261006k）修正：作废上一轮遗留的 .ann-item-ops 绝对定位 ---------- */
.ann-item-ops { position: static !important; top: auto !important; right: auto !important; }

/* ---------- 需求 4（20261006k）修正 2：ID 独占整行、昵称行不留空白 ---------- */
@media (max-width: 760px) {
  /* 上一轮 `td { display:flex }` + `::before { width:84px }` 会把 .uid-val 挤到 108px。
     这里对 ID / 昵称两行改为「标签在上、内容整行在��」的块级布局。 */
  .admin-users-table td.uid-text,
  .admin-users-table td[data-label="昵称"],
  .admin-users-table td[data-label="邮箱"] { display: block; }
  .admin-users-table td.uid-text::before,
  .admin-users-table td[data-label="昵称"]::before,
  .admin-users-table td[data-label="邮箱"]::before { display: block; width: auto; line-height: 1.5; margin-bottom: 1px; }
  .admin-users-table td[data-label="昵称"] { padding: 4px 0; }
  .admin-users-table td[data-label="昵称"] > * { display: inline-block; }
  /* 空昵称（「—」）时整行不留多余高度 */
  .admin-users-table td[data-label="昵称"] { line-height: 1.5; font-size: 13px; }
}

/* ---------- 需求 4（20261006k）修正 3：ID 一定要占满整行（覆盖前面几轮留下的 overflow-x:auto） ---------- */
@media (max-width: 760px) {
  /* 需求 q2（20261006r）：去掉 td.uid-text 的 display:block !important —— 否则会压住下面的 flex 同行布局。
     只保留 .uid-val 的块级 / 允许横向滚动规则；宽度交给 需求2 块的 flex:1 1 0 去撑满，
     绝不能再写 width:100%!important（会在 flex 行里把值盒压成 ~14px，引发 k4c 真实回归）。 */
  .admin-users-table td.uid-text .uid-val {
    display: block !important; min-width: 0 !important;
  }
  .admin-users-table td.uid-text .uid-val {
    overflow-x: auto !important; overflow-wrap: normal !important; word-break: normal !important;
    white-space: nowrap !important; line-height: 1.5 !important; padding: 0 !important;
  }
  /* 昵称 / 邮箱同样占满整行，不再被标签列挤窄 */
  .admin-users-table td[data-label="昵称"],
  .admin-users-table td[data-label="邮箱"] { width: 100% !important; }
  /* 昵称行：标签与内容同一行，右侧不留空（内容是「—」时不额外撑高） */
  .admin-users-table td[data-label="昵称"] { padding: 3px 0 !important; line-height: 1.5 !important; }
}

/* ---------- 需求 2（20261006r）：用户 ID / 功能权限 与标签恢复到同一行 ---------- */
/* 20261006k 修正 4 把「用户 ID」「功能权限」做成了「标签在上、内容在下」的块级两行。
   用户指出应像其它字段一样「标签 + 内容同一行」→ 这里统一改回 flex 单行，内容超宽时横向滚动。 */
@media (max-width: 760px) {
  /* 以下字段统一：标签(84px, flex:none) + 值，同一行、垂直居中 */
  .admin-users-table td.uid-text,
  .admin-users-table td.perm-cell,
  .admin-users-table td[data-label="昵称"],
  .admin-users-table td[data-label="邮箱"],
  .admin-users-table td[data-label="角色"],
  .admin-users-table td.num-cell,
  .admin-users-table td.time-cell {
    display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 3px 0; line-height: 1.5; width: 100%;
  }
  .admin-users-table td.uid-text::before,
  .admin-users-table td.perm-cell::before,
  .admin-users-table td[data-label="昵称"]::before,
  .admin-users-table td[data-label="邮箱"]::before,
  .admin-users-table td[data-label="角色"]::before,
  .admin-users-table td.num-cell::before,
  .admin-users-table td.time-cell::before {
    display: block; width: 84px; flex: none; line-height: 1.5; margin-bottom: 0;
  }
  /* 值不换行（昵称 / 邮箱） */
  .admin-users-table td[data-label="昵称"] > *,
  .admin-users-table td[data-label="邮箱"] > * { white-space: nowrap; }
  /* 用户 ID：占满剩余宽度，19 位超宽时横向滚动（与标签同行，不再折两行） */
  .admin-users-table td.uid-text .uid-val { flex: 1 1 0; min-width: 0; }
  /* 功能权限：4 个勾选 + 保存 与标签同行，超宽横向滚动 */
  .admin-users-table .perm-box {
    flex: 1 1 0; min-width: 0; flex-wrap: nowrap !important; overflow-x: auto; gap: 12px;
    padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  /* 管理员备注：输入框 + 存 需要整宽 → 仍保持「标签在上、整块在下」 */
  .admin-users-table td.note-cell { display: block; }
  .admin-users-table td.note-cell::before { display: block; width: auto; flex: none; margin-bottom: 6px; }
}

/* =========================================================
 * 需求（20261006m）
 *   1. 智能行**全部**恢复选中态底块（.on 常显），当前视图另加 .cur 强调色
 *   2. 手机端个人资料入口：点击打开个人资料界面（不是抽屉展开）+ 按钮恢复竖排
 *   3. 习惯打卡图标更换
 *   4. 后台数据 / 公告入口的 emoji 图标改线性 SVG
 *   5. Ctrl+Alt+D 支持普通输入框
 *   6. 番茄钟：renderPomo/renderHabit/renderMilestone 加守卫 + 切页补 hidden
 * ========================================================= */

/* ---------- 需求 1：智能行底块常显 ---------- */
/* 原来只有 .on 才有底块，而 .on 由 tlView 决定 → 点「过滤」时其它行全裸。
   现在：底块由 HTML 里的 on 类常显（与 .tl-listrow.on 同风格），
   当前所在视图再叠一层 .cur（强调色 + 加粗 + 左侧竖条）。 */
.tl-smart.on { background: var(--surface-2); }
.tl-smart.on.cur {
  background: var(--accent-soft, #eef1fd);
  font-weight: 700;
  color: var(--accent-ink);
}
.tl-smart.on.cur .tl-sico { color: var(--accent); }
.tl-smart.on.cur .tl-num { color: var(--accent); }
.tl-smart.on.cur .tl-tail-ph { visibility: hidden; }

/* ---------- 需求 2：个人资料入口点击打开界面 + 按钮恢复竖排 ---------- */
@media (max-width: 700px) {
  /* 恢复成 20261006j 之前的竖排按钮（公告 / 超管 / 退出 各占一行） */
  .side-foot .side-ops,
  .side-foot.is-open .side-ops {
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--border);
  }
  .side-foot .side-ops .side-admin,
  .side-foot .side-ops .link-btn { width: 100%; justify-content: flex-start; }
}

/* ---------- 需求 4（20261006m）：页面标题里的图标（emoji → 线性 SVG） ---------- */
.page-title-ico { display: inline-flex; align-items: center; gap: 8px; }
.page-title-ico svg { flex: none; color: var(--muted); }

/* =========================================================
 * 需求（20261006n）
 *   1. 打卡详情「心情 / 心得」可编辑 + 保存
 *   2. 只有当前所在视图才有选中态（on 条件化）
 *   3. 去掉「还没有过滤器…」空态提示
 *   4. 创建栏的默认设置图标收进「⋯」更多菜单
 *   6. 手机端个人资料页 SMTP 服务器 / 端口 / 保存 三控件间距
 *   7. 番茄钟启动时切到习惯打卡 / 纪念日不再空白
 * ========================================================= */

/* ---------- 需求 1：打卡详情可编辑行 ---------- */
.tl-logday-row.tl-logday-edit { align-items: flex-start; gap: 12px; }
.tl-logday-row.tl-logday-edit > span:first-child { width: 52px; flex: none; padding-top: 8px; }
.tl-mood-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.tl-mood-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.tl-mood-btn:hover { border-color: var(--accent); }
.tl-mood-btn.on { background: var(--accent-soft, #eef1fd); border-color: var(--accent); }
.tl-mood-pick .tl-d-input { flex: 1; min-width: 120px; margin-top: 0; }
.tl-logday-row.tl-logday-edit textarea.tl-d-note {
  flex: 1; min-width: 0; min-height: 84px; width: 100%; resize: vertical;
  font-family: inherit; font-size: 13px; line-height: 1.6; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text);
}
.tl-logday-row.tl-logday-edit textarea.tl-d-note:focus { outline: none; border-color: var(--accent); }

/* ---------- 需求 2：只有选中行才有底块 ---------- */
/* 上一轮把 on 恒显了，导致所有行都像选中。现在 on 只在当前所在视图时带上。 */
.tl-smart.on { background: var(--surface-2); }
.tl-smart.on.cur { background: var(--accent-soft, #eef1fd); font-weight: 700; color: var(--accent-ink); }

/* ---------- 需求 6：手机端个人资料页邮件控件间距 ---------- */
@media (max-width: 760px) {
  /* 需求 6（20261006n）：`#em-host` / `#em-port` / `#btn-save-em` 三个控件原本紧贴在一起
     （input 之间的 margin 被 label 的 margin 抵消），这里统一给 10px 间距并让保存按钮独占一行。 */
  #em-host, #em-port { margin-bottom: 10px !important; }
  #btn-save-em { margin-top: 6px !important; width: 100%; min-height: 40px; }
}

/* ---------- 需求 7：效率工具容器所有权（防串扰） ---------- */
/* 容器归属由 renderTlTool / switchPage 负责，render* 守卫一律「纯 return 不碰 DOM」。 */

/* ---------- 需求 1（20261006n）修正：心情表情在窄弹窗里会被挤成竖排，改成固定宽度的网格 ---------- */
.tl-mood-pick { display: grid; grid-template-columns: repeat(6, 30px); justify-content: start; gap: 6px; }
.tl-mood-btn { width: 30px; height: 30px; }
.tl-mood-pick .tl-d-input { grid-column: 1 / -1; width: 100%; min-width: 0; }
@media (max-width: 760px) { .tl-mood-pick { grid-template-columns: repeat(6, 1fr); } }

/* =========================================================
 * 需求（20261006o）
 *   1. 创建栏恢复「日期 / 优先级」快捷 chip（其余默认设置留在 ⋯）
 *   3. 统计计入已完成任务（全部任务口径）
 *   4. 点过过滤后选中态不再卡死
 * ========================================================= */

/* ---------- 需求 2（20261006o）：手机端常驻快捷行（左侧超管 / 右侧公告） ---------- */
/* 桌面端隐藏（入口在底部个人资料卡片里）；手机端（≤700px）常驻显示在导航与卡片之间 */
.side-quick { display: none; }
@media (max-width: 700px) {
  /* 需求 2（20261006q）：仅在「个人资料」页显示（由 JS 切换 .sq-page-only），其余手机页面隐藏（回退 20261006o 常驻行） */
  .side-quick.sq-page-only {
    display: flex; align-items: stretch; gap: 8px;
    padding: 8px 12px; margin: 0; border-top: 1px solid var(--border);
  }
  .side-quick.sq-page-only .side-q-btn {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); color: var(--text); font-size: 13px; cursor: pointer;
    padding: 0 10px;
  }
  .side-quick.sq-page-only .side-q-btn svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
  .side-quick.sq-page-only .side-q-btn:hover { border-color: var(--accent); color: var(--accent); }
  .side-quick.sq-page-only .side-q-btn:hover svg { color: var(--accent); }
  .side-quick.sq-page-only .side-q-btn.hidden { display: none; }
}
/* ================================================================
 * 收藏夹 —— 需求 s#2 建页 + t#1 三栏改版（20261007）
 *
 * 布局：#page-bookmarks 是三栏 flex（中间分类栏 + 右主区）。
 * 网格形态参考用户截图：大圆角图标 + 下方标题、**无卡片边框**，
 * 最后一格是「+」。桌面 6 列 / 窄屏自适应。
 * 注意：不给本页加 overflow-y（其它单栏页都没加），
 *       滚动交给 .bm-main > .bm-scroll，避免与手机端 sticky 页头打架。
 * ================================================================ */
#page-bookmarks { min-height: 0; }
.bm-layout { flex: 1; min-height: 0; display: flex; }

/* ================= ae#3 分类条：从中间栏搬到顶部工具区（横向） =================
   原中间栏（.bm-cats 独立列）已取消，分类胱牌改为顶部横向胱牌，
   “新建分类”与“设置”同行放在分类右侧。 */
.bm-cats-bar {
  display: flex; align-items: center; gap: 6px; flex: none;
  min-width: 0; max-width: 62%;
}
.bm-cats-bar .bm-cat-list {
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  padding: 0 2px; scrollbar-width: none;
}
.bm-cats-bar .bm-cat-list::-webkit-scrollbar { display: none; }
.bm-cats-bar .bm-cat {
  width: auto; flex: none; margin-bottom: 0;
  padding: 5px 11px; border-radius: 14px; font-size: 12.5px;
}
.bm-cats-bar .bm-cats-add {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  border: 1px dashed var(--border); color: var(--muted);
}
.bm-cats-bar .bm-cats-add:hover { border-color: var(--accent); }
.bm-cats-bar .bm-cat-set {
  flex: none; width: auto; padding: 5px 10px; border-radius: 14px;
  font-size: 12.5px;
}

/* ================= 中间栏：分类 ================= */
.bm-cats {
  width: 168px; flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--surface);
}
.bm-cats-sec { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bm-cats-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 6px 14px;
}
.bm-cats-title { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.bm-cats-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.bm-cats-add:hover { background: var(--accent-soft); color: var(--accent); }
.bm-cat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
.bm-cat {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; margin-bottom: 1px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 13px;
  font-family: inherit; text-align: left; cursor: pointer;
}
.bm-cat:hover { background: var(--surface-2); }
.bm-cat.cur { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.bm-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-cat-n { flex: none; font-size: 11px; color: var(--muted); }
.bm-cat.cur .bm-cat-n { color: var(--accent); }
/* 底部「设置」入口 */
.bm-cats-foot { flex: none; padding: 8px; border-top: 1px solid var(--border); }
.bm-cat-set {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-2, var(--muted)); font-size: 13px;
  font-family: inherit; cursor: pointer;
}
.bm-cat-set:hover { background: var(--surface-2); color: var(--text); }

/* ================= 右主区 ================= */
.bm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bm-head { flex: none; }
.bm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 22px 28px; }

/* ---- 时钟：已随 w 批次并入网格块（.bm-cell-clock），此处不再需要 ---- */
/* 原 .bm-clock / .bm-clock-time(44px) / .bm-clock-date 是独立居中块的样式，
   w 批后时钟已是网格里的 1×2 格，块内样式见 .bm-cell-clock 一节。 */
.bm-clock-time { font-variant-numeric: tabular-nums; }

/* ---- 搜索引擎 + 搜索栏 ---- */
#page-bookmarks .bm-engine {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; flex: none;
}
#page-bookmarks .bm-engine:hover { border-color: var(--accent); }
.bm-engine-ico { font-size: 13px; line-height: 1; }
.bm-engine-caret { color: var(--muted); }
#page-bookmarks .bm-search {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  height: 34px; padding: 0 6px 0 11px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2);
}
#page-bookmarks .bm-search:focus-within { border-color: var(--accent); }
#page-bookmarks .bm-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font-size: 13px; font-family: inherit; outline: none;
}
.bm-search-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer; flex: none;
}
.bm-search-go:hover { background: var(--accent-soft); color: var(--accent); }

/* 搜索引擎下拉（fixed 挂 body，不被 .bm-scroll 的 overflow 裁掉） */
.bm-engine-menu {
  position: fixed; z-index: 300; min-width: 108px; padding: 4px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1px;
}
.bm-engine-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text);
  font-size: 13px; font-family: inherit; text-align: left; cursor: pointer;
}
.bm-engine-item:hover { background: var(--surface-2); }
.bm-engine-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.bm-engine-item-ico { font-size: 12px; }

/* ---- 书签网格：大圆角图标 + 下方标题（参考截图，无卡片边框） ---- */
.bm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px 4px; padding: 8px 0 10px; align-content: start; position: relative;
}
.bm-cell {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 8px 4px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  cursor: pointer; position: relative;
}
/* ah#4 独立标签默认即显示通用描边 + 通用背景（不再仅 hover 才有） */
.bm-cell:hover { background: var(--surface-3, var(--surface-2)); }
.bm-cell.dragging { opacity: .4; }
.bm-cell.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.bm-cell-link {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 100%; text-decoration: none; color: inherit;
}
.bm-cell-ico {
  position: relative; width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--bm-c, var(--accent)); color: #fff;
  font-size: 24px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.bm-cell-ico.custom { border-radius: 14px; }
.bm-cell-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bm-cell-txt { line-height: 1; position: relative; }
/* aj#2 文字图标（图标字段填了文字时）：纯色圆角块 + 居中字母，不当图片加载（避免裂图） */
.bm-cell-ico.text .bm-cell-img { display: none; }
.bm-cell-ico.text .bm-cell-txt { display: block; }
/* ao#2：per-icon 作用域 —— 谁加载到真实图标（图片 / favicon）谁自己隐藏回退文字，
   不再把 has-ico 加在整格 .bm-cell 上（组内成员共享同一 .bm-cell-group，会误伤其它成员）。 */
.bm-cell-ico.has-img .bm-cell-txt { display: none; }
.bm-cell-title {
  width: 100%; font-size: 12px; color: var(--text-2, var(--text));
  text-align: center; line-height: 1.35; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 最后一格：+ 添加 */
.bm-cell-add { justify-content: flex-start; }
.bm-cell-add-ico {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px; flex: none;
  border: 1.5px dashed var(--border); color: var(--muted); background: transparent;
  box-shadow: none;
}
.bm-cell-add:hover .bm-cell-add-ico { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---- 空状态 ---- */
.bm-empty { padding: 40px 0; text-align: center; color: var(--muted); }
.bm-empty p { margin: 0; font-size: 14px; }
.bm-empty-sub { margin-top: 6px !important; font-size: 12.5px !important; color: var(--muted); }
/* ao#1：新分类页「可分配书签」候选面板 */
.bm-assign { padding: 18px 0 8px; }
.bm-assign.hidden { display: none; }
.bm-assign-head { margin: 0 0 14px; font-size: 14px; color: var(--muted); text-align: center; }
.bm-assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; padding: 0 4px; }
.bm-assign-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .15s, transform .1s; text-align: center; }
.bm-assign-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.bm-assign-card:active { transform: translateY(0); }
.bm-assign-card .bm-cell-ico { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; }
.bm-assign-title { font-size: 12.5px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= 添加弹窗 / 右键菜单 / 设置面板 ================= */
.bm-dialog {
  width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
}
.bm-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
}
.bm-dialog-head h3 { margin: 0; font-size: 15px; color: var(--text); }
.bm-dialog-x {
  width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 13px;
}
.bm-dialog-x:hover { background: var(--surface-2); color: var(--text); }
.bm-dialog-body { padding: 14px 16px; overflow-y: auto; }
.bm-dialog-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.bm-field { display: block; margin-bottom: 12px; }
.bm-field > span { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--muted); }
.bm-field input, .bm-field select, .bm-menu-row input, .bm-menu-row select, .bm-set-name {
  width: 100%; height: 34px; padding: 0 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); outline: none;
}
.bm-field input:focus, .bm-field select:focus,
.bm-menu-row input:focus, .bm-menu-row select:focus, .bm-set-name:focus { border-color: var(--accent); }
.bm-btn {
  height: 32px; padding: 0 13px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font-size: 13px;
  font-family: inherit; cursor: pointer;
}
.bm-btn:hover { border-color: var(--accent); }
.bm-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.bm-btn.primary:hover { filter: brightness(1.06); }
.bm-btn.danger { color: var(--danger); border-color: var(--danger); }
.bm-btn.danger:hover { background: var(--danger); color: #fff; }

/* 右键编辑菜单 */
.bm-menu {
  position: fixed; z-index: 320; width: 288px;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow);
}
.bm-menu-head {
  padding: 0 2px 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.bm-menu-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bm-menu-row > label { flex: none; width: 34px; font-size: 12.5px; color: var(--muted); }
.bm-menu-row input, .bm-menu-row select { flex: 1; min-width: 0; height: 30px; font-size: 12.5px; }
.bm-menu-ico { display: flex; gap: 6px; flex: 1; min-width: 0; }
.bm-menu-ico input { flex: 1; min-width: 0; }
.bm-menu-ico-pick {
  flex: none; height: 30px; padding: 0 9px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.bm-menu-ico-fetch {
  flex: none; height: 30px; padding: 0 9px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.bm-menu-ico-fetch:hover:not(:disabled) { border-color: var(--accent); }
.bm-menu-ico-fetch:disabled { opacity: .6; cursor: default; }
.bm-menu-ico-pick:hover { border-color: var(--accent); }
/* ao#5：分类行 —— 下拉收窄 + 右侧「文字图标」复选框 */
.bm-menu-cat-row { gap: 8px; }
.bm-menu-cat-row .bm-m-cat-narrow { flex: none; width: 108px; }
.bm-menu-texticon {
  display: inline-flex; align-items: center; gap: 4px; flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--text-2); white-space: nowrap; cursor: pointer; user-select: none;
}
.bm-menu-texticon input { margin: 0; width: 14px; height: 14px; flex: none; cursor: pointer; }
.bm-menu-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* ap#6：组菜单「移动到分类」列表（纵向铺满） */
.bm-menu-cats { flex-direction: column; align-items: stretch; }
.bm-menu-cats .bm-cat-pick { justify-content: flex-start; text-align: left; }
.bm-menu-cats .bm-cat-pick.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* aq#2：组块右键菜单加宽，5 个操作按钮（改名/方位/展开/切换分类/解散）单行不换行 */
.bm-menu-group { width: auto; min-width: 288px; max-width: calc(100vw - 16px); }
.bm-menu-group .bm-menu-ops { flex-wrap: nowrap; }
.bm-menu-group .bm-menu-ops .bm-btn { flex: none; white-space: nowrap; }

/* 设置面板 */
.bm-set-sec { margin-bottom: 20px; }
.bm-set-sec:last-child { margin-bottom: 0; }
.bm-set-title { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.bm-set-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bm-set-name { flex: 1; min-width: 0; height: 30px; font-size: 12.5px; }
.bm-set-n { flex: none; font-size: 11px; color: var(--muted); min-width: 34px; text-align: right; }
.bm-set-del {
  flex: none; height: 28px; padding: 0 9px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-family: inherit; cursor: pointer;
}
.bm-set-del:hover { border-color: var(--danger); color: var(--danger); }
.bm-set-empty { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.bm-switch { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--text); cursor: pointer; }
.bm-switch input { width: 15px; height: 15px; }

/* ================= 手机端 ================= */
@media (max-width: 860px) {
  /* 三栏折叠：分类栏变横向可滚的一行，放在主区顶部 */
  .bm-layout { flex-direction: column; }
  .bm-cats {
    width: 100%; flex: none; flex-direction: row; align-items: center; gap: 6px;
    border-right: 0; border-bottom: 1px solid var(--border); padding: 6px 8px;
  }
  .bm-cats-sec { flex: 1; min-width: 0; flex-direction: row; align-items: center; }
  .bm-cats-head { padding: 0; flex: none; }
  .bm-cats-title { display: none; }
  .bm-cat-list { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 0; }
  .bm-cat { width: auto; flex: none; margin-bottom: 0; padding: 5px 10px; border-radius: 14px; font-size: 12.5px; }
  .bm-cats-foot { flex: none; padding: 0; border-top: 0; }
  .bm-cat-set { width: auto; padding: 6px 9px; }
  .bm-cat-set span { display: none; }
  .bm-scroll { padding: 0 12px 24px; }
  .bm-clock { padding: 8px 0 4px; }
  .bm-clock-time { font-size: 32px; }
  .bm-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px 2px; }
  .bm-cell-ico, .bm-cell-add-ico { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
  .bm-cell-title { font-size: 11.5px; }
  .bm-head { padding: 10px 12px; }
  .bm-dialog { width: calc(100vw - 24px); }
  .bm-menu { width: calc(100vw - 24px); }
}
/* ================================================================
 * 收藏夹 u#1~u#4（20261007）
 * ================================================================ */

/* ---- u#4 搜索引擎图标条 ---- */
.bm-engine-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.bm-eng {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2);
  color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.bm-eng:hover { border-color: var(--accent); }
.bm-eng.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.bm-eng-ico { font-size: 13px; line-height: 1; }
.bm-eng-add { color: var(--muted); }

/* ---- u#3 多选操作条 ---- */
.bm-selbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--accent);
  border-radius: 10px; background: var(--accent-soft);
}
.bm-sel-n { font-size: 13px; font-weight: 600; color: var(--accent); }
.bm-sel-tip { flex: 1; font-size: 11.5px; color: var(--muted); }
.bm-sel-ops { display: flex; gap: 6px; }

/* 选中态 */
.bm-cell.sel { background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent) inset; }

/* ---- u#3 图标组格 ---- */
.bm-cell-group { cursor: pointer; }
.bm-group-box {
  position: relative; width: 56px; height: 56px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px;
}
.bm-group-icons { display: contents; }
.bm-cell-ico.sm {
  width: 100%; height: 100%; border-radius: 6px; font-size: 11px;
  box-shadow: none; position: relative;
}
/* ar#1：组内「回退文字」（favicon 抓不到 / 无图标时显示的标题首字）字号必须与
   独立书签一致 —— 独立 .bm-cell-ico 基础字号 24px、.bm-cell-txt 直接继承它；
   旧值 10px 使文字图标进组后明显缩小（用户实测「黑 vs 分」差距过大）。
   注意：图片/favicon 命中 .has-img 时 .bm-cell-txt 被隐藏，故此处放大无副作用。 */
.bm-cell-ico.sm .bm-cell-txt { font-size: 24px; }
.bm-group-more {
  position: absolute; right: -4px; bottom: -4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 10px; line-height: 17px; text-align: center;
  border: 1.5px solid var(--surface);
}
/* 展开浮层 */
.bm-group-pop {
  width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 90px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.bm-group-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--border);
}
.bm-group-pop-head h3 { margin: 0; font-size: 14px; }
.bm-group-pop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 4px; padding: 12px; overflow-y: auto;
}
.bm-group-pop-grid .bm-cell-ico { width: 44px; height: 44px; border-radius: 12px; }
/* ap#2：组内「文字图标」字号对齐外面 .bm-cell-ico（24px），不被 .sm 缩到 19px */
.bm-group-pop-grid .bm-cell-ico.sm.text { font-size: 24px; }
/* aq#4：所有「组/展开浮层」内的文字图标统一为 24px（与独立书签文字图标一致），
   覆盖 .bm-cell-ico.sm 默认 11px 与 .sm .bm-cell-txt 默认 10px，以及 data-cols/open 态的缩小。 */
.bm-cell-ico.sm.text { font-size: 24px !important; }
.bm-cell-ico.sm.text .bm-cell-txt { font-size: 24px !important; }
/* 20261009i#1：组内拖拽排序的落点指示 */
.bm-group-pop-grid .bm-cell.drag-over-before { box-shadow: inset 3px 0 0 var(--accent); }
.bm-group-pop-grid .bm-cell.drag-over-after { box-shadow: inset -3px 0 0 var(--accent); }
.bm-group-pop-grid .bm-cell.dragging { opacity: .45; }

/* ---- u#2 底色选择器 ---- */
.bm-colors { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.bm-color {
  position: relative; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 7px; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bm-color.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bm-color-dot { width: 14px; height: 14px; border-radius: 4px; display: block; }
.bm-color-auto { position: absolute; font-size: 6.5px; color: var(--muted); letter-spacing: -.2px; }
.bm-colors-static { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-color-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 38px; }
.bm-color-chip .bm-color-dot { width: 26px; height: 26px; border-radius: 8px; }
.bm-color-chip em { font-size: 10.5px; font-style: normal; color: var(--muted); }
/* 透明底色：图标不显示色块底 */
.bm-cell-ico.clear { background: transparent !important; }
.bm-cell-ico.clear .bm-cell-txt { color: var(--text); }
.bm-cell-ico.clear.has-img { border: 1px solid var(--border); }

/* ---- u#1 标准弹窗（对齐 tl-picker 规范：圆角 16 / surface / shadow-sm） ---- */
.bm-dialog {
  width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.bm-dialog.wide { width: 560px; }
.bm-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
}
.bm-dialog-head h3 { margin: 0; font-size: 15px; color: var(--text); font-weight: 700; }
.bm-dialog-x {
  width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bm-dialog-x:hover { background: var(--surface-2); color: var(--text); }
.bm-dialog-body { padding: 14px 16px; overflow-y: auto; }
.bm-dialog-msg { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.6; }
.bm-dialog-hint { margin: 6px 0 10px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.bm-dialog-sub { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.bm-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.bm-sec-title { margin: 16px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text); }

/* ---- 搜索引擎管理弹窗 ---- */
.bm-eng-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; }
.bm-eng-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 9px; background: var(--surface-2); cursor: pointer;
}
.bm-eng-row:hover { background: var(--accent-soft); }
.bm-eng-row input { width: 14px; height: 14px; flex: none; }
.bm-eng-row-ico { flex: none; font-size: 13px; }
.bm-eng-row-n { flex: none; font-size: 12.5px; color: var(--text); min-width: 64px; }
.bm-eng-row-u {
  flex: 1; min-width: 0; font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-my-row { display: flex; gap: 6px; margin-bottom: 8px; }
.bm-my-row input {
  flex: 1; min-width: 0; height: 32px; padding: 0 9px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  color: var(--text); outline: none;
}
.bm-my-row input:focus { border-color: var(--accent); }
.bm-eng-mine {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px;
  border-radius: 9px; background: var(--surface-2);
}
.bm-eng-mine-del {
  width: 22px; height: 22px; flex: none; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 11px;
}
.bm-eng-mine-del:hover { background: var(--danger); color: #fff; }

/* ---- 手机端适配 ---- */
@media (max-width: 860px) {
  .bm-engine-bar { gap: 5px; padding-bottom: 8px; }
  .bm-eng { height: 28px; padding: 0 9px; font-size: 12px; }
  .bm-eng-name { display: none; }
  .bm-eng { padding: 0 8px; }
  .bm-selbar { flex-wrap: wrap; gap: 6px; }
  .bm-sel-tip { display: none; }
  .bm-group-pop { width: calc(100vw - 24px); }
  .bm-group-pop-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .bm-dialog.wide { width: calc(100vw - 24px); }
  .bm-eng-lib { grid-template-columns: 1fr; }
  .bm-my-row { flex-wrap: wrap; }
}

/* ================================================================
 * v 批次（20261007u）：底色可点 + 搜索框独立行加宽 + 默认透明
 * ================================================================ */

/* ---- v#2：搜索框样式已随 w 批次并入网格块（.bm-cell-search），此处不再需要 ---- */
/* 原 .bm-search-row / .bm-search / .bm-search-go 已删除：w 批把搜索框并进网格首格，
   对应 DOM 节点与 JS 绑定均已移除，留着只会与 .bm-cell-search 内的规则打架。 */

/* ---- v#1：设置面板色卡可点 ---- */
.bm-color-chip {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 3px 2px; border-radius: 9px; font-family: inherit;
}
.bm-color-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.bm-color-chip:active { transform: scale(.94); }
.bm-colors-static { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- v#3：默认透明底 —— 有底色块时给图标加轻边线，透明时保持干净 ---- */
.bm-cell-ico.clear { background: transparent !important; }
.bm-cell-ico.clear .bm-cell-txt { color: var(--text); font-weight: 600; }

@media (max-width: 860px) {
  /* w 批：搜索框已并入 .bm-cell-search，旧的 .bm-search 规则无 DOM 匹配，
     保留 iOS 防聚焦缩放（16px）到新的块内选择器上。 */
  .bm-cell-search { padding: 8px 10px; }
  .bm-cell-search .bm-search-rowline { height: 36px; }
  .bm-cell-search #bm-search-input { font-size: 16px; }
  .bm-cell-search .bm-eng { height: 26px; padding: 0 8px; font-size: 12px; }
  .bm-cell-search .bm-eng-name { display: none; }
  .bm-cell-clock .bm-clock-time { font-size: 26px; }
}

/* ================================================================
 * w 批次：时钟块 1×2、搜索块 1×4 融入网格
 * ================================================================ */

/* 网格自适应列数：普通格 1 列，时钟块 2 列，搜索块 4 列。
   用 minmax(104px,1fr) 而非固定 8 列 —— 固定列数会让「2+4=6」在 8 列下
   右侧空出 2 格，首行排布不齐。 */
#page-bookmarks .bm-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px 4px;
}

/* ---- w#5 时钟块：**占 2 格**（span 2），ap#3 拆出日期后只显示 HH:MM:SS（大号粗体） ---- */
.bm-cell-clock {
  grid-column: span 2;
  grid-row: span 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.bm-cell-clock:hover { background: var(--surface-2); }
.bm-cell-clock .bm-clock-time {
  font-size: 44px; font-weight: 700; letter-spacing: 1px; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums; text-align: center;
}
/* ap#3：日期内置块（占 1×2：上「年月日」/ 中「星期X」/ 下「农历·周次·节气」），与时钟紧邻 */
.bm-cell-date {
  grid-column: span 2;
  grid-row: span 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  cursor: default;
}
.bm-cell-date:hover { background: var(--surface-2); }
/* 20261009i#2：三行 —— 年月日(主) / 星期(次) / 农历周次节气(副，去掉 |) */
.bm-cell-date .bm-date-main { font-size: 16px; font-weight: 700; line-height: 1.15; color: var(--text); white-space: nowrap; }
/* 20261010b#2：第二行（星期 + 农历）改为与第三行**完全同款**字号/字重/颜色，
   两行视觉统一（此前 14px/600 深色，比第三行 11px 灰字重得多）。 */
.bm-cell-date .bm-date-week { font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bm-cell-date .bm-date-sub { font-size: 11px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- ap#4（20261009h）剪贴板块：以「大格子」为单位。
   每个大格「大小 = 一个普通网格格」（1 列 × 1 行，桌面 104×96），内部固定 2×2 = 4 小格；
   big = 大格子数量，块跨度随 big 变化（见 bmClipSpan）。 ---- */
.bm-cell-clip {
  grid-column: span 1;
  grid-row: span 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px;
  display: flex; align-items: stretch; justify-content: center;
  cursor: default; position: relative;
}
.bm-cell-clip:hover { background: var(--surface-2); }
.bm-cell-clip .bm-clip-more {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0; z-index: 2;
}
.bm-cell-clip .bm-clip-more:hover { background: var(--accent-soft); color: var(--accent); }
/* 大格容器：把 big 个大格按「每行 perRow 个」铺开（每个大格占 1 行 1 列） */
.bm-cell-clip .bm-clip-grid {
  flex: 1 1 auto; display: grid; gap: 6px; grid-auto-rows: 1fr;
  min-width: 0; min-height: 0;
}
/* 一个大格子：大小 = 一个普通网格格，内部固定 2×2 小格 */
.bm-clip-big {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-3, var(--surface)); min-width: 0; min-height: 0;
}
.bm-clip-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 0; padding: 1px 2px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.1;
  background: var(--surface-3, var(--surface)); border: 1px solid var(--border);
  overflow: hidden; cursor: pointer; word-break: break-all;
}
.bm-clip-slot.empty { color: var(--muted); font-weight: 400; cursor: pointer; }
.bm-clip-slot.filled:hover { border-color: var(--accent); background: var(--accent-soft); }
/* ---- ap#4 剪贴板编辑弹窗 ---- */
.bm-clip-edit-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.bm-clip-big-head { font-size: 12px; font-weight: 600; color: var(--muted); margin: 4px 0 2px; }
.bm-clip-edit-row { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; align-items: center; }
.bm-clip-edit-row input {
  height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; outline: none;
}
.bm-clip-edit-row input:focus { border-color: var(--accent); }

/* ---- 20261010b#1 备忘板块：默认规格 3×1（横 3 格 × 竖 1 格），横竖格数可在 1~4 之间调整。
   块内就是一块整幅 textarea，输入的文本自动保存（localStorage + 云同步）。
   右上角「…」/ 右键块 → 调格子规格或清空。 ---- */
.bm-cell-memo {
  grid-column: span 3;
  grid-row: span 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px;
  align-items: stretch; justify-content: stretch;
  cursor: text; position: relative;
}
.bm-cell-memo:hover { background: var(--surface-2); }
.bm-cell-memo .bm-memo-more {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 5px; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0; z-index: 2;
}
.bm-cell-memo .bm-memo-more:hover { background: var(--accent-soft); color: var(--accent); }
.bm-cell-memo .bm-memo-text {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0;
  resize: none; border: 0; outline: none; background: transparent; color: var(--text);
  font-family: inherit; font-size: 12.5px; line-height: 1.45;
  padding: 2px 20px 2px 4px;   /* 右侧留出「…」按钮的位置 */
}
.bm-cell-memo .bm-memo-text::placeholder { color: var(--muted); }

/* ---- w#5 搜索块：**占 4 格**（span 4），与普通图标块同高；块内 1×4（搜索框 + 引擎按钮） ---- */
.bm-cell-search {
  grid-column: span 4;
  grid-row: span 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  justify-content: center;
  cursor: default;
}
.bm-cell-search:hover { background: var(--surface-2); }
/* x#1 块内**两行**：① 搜索框行 ② 搜索引擎按钮行 */
.bm-cell-search .bm-search-rowline {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
}
.bm-cell-search .bm-search-ico { display: inline-flex; color: var(--muted); flex: none; }
.bm-cell-search #bm-search-input {
  flex: 1; min-width: 0; height: 28px; padding: 0 4px;
  border: 0; background: transparent; color: var(--text);
  font-size: 13.5px; font-family: inherit; outline: none;
}
.bm-cell-search .bm-search-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
}
.bm-cell-search .bm-search-go:hover { background: var(--accent-soft); color: var(--accent); }
/* 第二行：引擎按钮，独占一行左对齐 */
.bm-cell-search .bm-engine-bar {
  width: 100%; padding: 0; gap: 6px; flex-wrap: wrap; justify-content: flex-start;
}
.bm-cell-search .bm-eng { height: 28px; padding: 0 10px; font-size: 12.5px; }
.bm-cell-search .bm-eng-name { display: inline; }

/* 拖动时特殊块不可拖 */
.bm-cell-clock, .bm-cell-search { user-select: none; }

/* 手机端：4 列基准下，时钟占 2 格、搜索占满 4 格 */
@media (max-width: 860px) {
  #page-bookmarks .bm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 时钟：占 2 格，块内 1×2（时间 | 日期） */
  .bm-cell-clock { grid-column: span 2; grid-row: span 1; padding: 8px 6px; }
  .bm-cell-clock .bm-clock-time { font-size: 36px; }
  /* 手机端 2 格宽度有限，日期单行显示不折行 */
  .bm-cell-clock .bm-clock-date { font-size: 11px; white-space: nowrap; }
  /* 搜索：占满 4 格，引擎条可换行 */
  .bm-cell-search { grid-column: span 4; padding: 8px 10px; }
  .bm-cell-search .bm-search-rowline { flex-wrap: wrap; }
  .bm-cell-search .bm-engine-bar { flex-wrap: wrap; }
  .bm-cell-search .bm-eng-name { display: none; }
  .bm-cell-search #bm-search-input { flex: 1; min-width: 90px; }
}

/* ================================================================
 * x 批次（20261007w → x）
 *  x#1 搜索块内分两行：① 搜索框 ② 搜索引擎按钮
 *  x#2 网格新增「成组」块（紧跟「+」）
 * ================================================================ */

/* ---- x#2 成组块：与「+」同款虚线框，网格里的固定入口 ---- */
.bm-cell-newgroup { justify-content: flex-start; }
.bm-cell-newgroup-ico {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px; flex: none;
  border: 1.5px dashed var(--border); color: var(--muted); background: transparent;
}
.bm-cell-newgroup:hover .bm-cell-newgroup-ico {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* ---- x#2 成组弹窗：书签勾选列表 ---- */
.bm-ng-all { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.bm-ng-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 260px; overflow-y: auto; padding: 2px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.bm-ng-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 8px; background: var(--surface); cursor: pointer;
}
.bm-ng-row:hover { background: var(--accent-soft); }
.bm-ng-row input { width: 15px; height: 15px; flex: none; }
.bm-ng-row-title { flex: none; max-width: 46%; font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-ng-row-url {
  flex: 1; min-width: 0; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 860px) {
  .bm-cell-newgroup-ico { width: 46px; height: 46px; border-radius: 12px; }
  .bm-ng-list { max-height: 210px; }
  .bm-ng-row-title { max-width: 40%; }
}

/* ================================================================
 * y 批次（20261007x → y）
 *  y#1 成组改为「选 N×M 规格 + 把书签拖进格子」，组块外围带框
 *  y#2 收藏夹接云端（跨设备同步）
 * ================================================================ */

/* ---- y#1 组块：按 cols×rows 铺格子（外围带框） ---- */
.bm-group-box { position: relative; }
.bm-group-slot {
  display: block; width: 100%; height: 100%; border-radius: 6px;
  position: relative; overflow: hidden;
}
/* 空格子：虚线占位，让「还差几个」一眼可见 */
.bm-group-slot.blank {
  border: 1px dashed var(--border); background: transparent;
}
/* 规格变大时组块也变大（4×4 时格子仍 ≥12px 可辨） */
.bm-cell-group[data-cols="3"] .bm-group-box,
.bm-cell-group[data-cols="4"] .bm-group-box { width: 68px; height: 68px; }
.bm-cell-group[data-cols="3"] .bm-cell-ico.sm,
.bm-cell-group[data-cols="4"] .bm-cell-ico.sm { border-radius: 5px; font-size: 9px; }
.bm-cell-group[data-cols="4"] .bm-cell-title,
.bm-cell-group[data-cols="3"] .bm-cell-title { font-size: 11.5px; }

/* ---- y#1 成组面板：规格选择 + 格子 + 书签池 ---- */
.bm-ng-dialog .bm-dialog-body { padding: 12px 16px 14px; }
.bm-ng-row1 { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.bm-ng-name { flex: 1; margin-bottom: 0; }
.bm-ng-size { flex: none; }
.bm-ng-size > span { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--muted); }
.bm-ng-sizes { display: flex; gap: 4px; }
.bm-ng-size-btn {
  height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-2); color: var(--text); font-size: 12px; font-family: inherit; cursor: pointer;
}
.bm-ng-size-btn:hover { border-color: var(--accent); }
.bm-ng-size-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* 格子区：外框代表「组」，能看到能放多少 */
.bm-ng-frame {
  padding: 8px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface-2); margin-bottom: 10px;
}
.bm-ng-grid { display: grid; gap: 6px; justify-content: center; grid-template-columns: repeat(var(--bm-ng-cols, 2), var(--bm-ng-slot-w, 120px)); }
.bm-ng-slot {
  position: relative; aspect-ratio: auto; height: 60px; border-radius: 9px;
  border: 1.5px dashed var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 3px; transition: border-color .12s, background .12s;
}
.bm-ng-slot.hot { border-color: var(--accent); background: var(--accent-soft); }
.bm-ng-slot.filled { border-style: solid; border-color: var(--accent); }
.bm-ng-slot-ph { color: var(--muted); font-size: 15px; line-height: 1; }
.bm-ng-slot-txt {
  font-size: 10.5px; color: var(--text); text-align: center; line-height: 1.25;
  word-break: break-word; padding: 0 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bm-ng-slot-x {
  position: absolute; top: 2px; right: 2px; width: 15px; height: 15px;
  border: 0; border-radius: 50%; background: var(--danger); color: #fff;
  font-size: 9px; line-height: 1; cursor: pointer; padding: 0;
}

/* 书签池 */
.bm-ng-pool {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 116px; overflow-y: auto; padding: 7px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.bm-ng-item {
  display: flex; align-items: center; max-width: 160px; padding: 5px 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font-size: 12px; color: var(--text); cursor: grab; user-select: none;
}
.bm-ng-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.bm-ng-item.dragging { opacity: .45; }
.bm-ng-item-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  .bm-ng-row1 { flex-direction: column; align-items: stretch; gap: 8px; }
  .bm-ng-grid { --bm-ng-slot-w: 70px; }
  .bm-ng-slot { height: 52px; }
  .bm-ng-pool { max-height: 96px; }
  .bm-cell-group[data-cols="3"] .bm-group-box,
  .bm-cell-group[data-cols="4"] .bm-group-box { width: 56px; height: 56px; }
}

/* ================================================================
 * z 批次（20261007y → z）
 *  z#1 组内图标**全部平铺显示**（不截断），组 = 一个描边框
 * ================================================================ */

/* 组框：按 cols 决定每行格数，行数按成员数量自动增长 —— 绝不折叠、绝不显示 +N */
.bm-group-box.bm-group-box-open {
  display: grid;
  gap: 3px;
  padding: 4px;
  width: auto; min-width: 44px;
  border: 1.5px solid var(--border);   /* ← 组的外框 */
  border-radius: 12px;
  background: var(--surface-2);
}
.bm-group-box.bm-group-box-open:hover { border-color: var(--accent); }
.bm-group-box-open .bm-group-slot {
  width: 22px; height: 22px; border-radius: 6px; overflow: hidden;
}
.bm-group-box-open .bm-cell-ico.sm {
  width: 100%; height: 100%; border-radius: 6px; font-size: 10px; box-shadow: none;
}
/* 每行格数越多 → 框越宽；用 --bm-gcols 让宽度跟着规格走 */
.bm-group-box-open { --bm-gcols: 2; }
/* ac#3：下面这些按「22px×格数」写死的框宽规则已被 ac#3 的 width:100% 取代，
   但它们的特异性更高（[data-cols]），留着会盖掉 100% → 明确置为 100%。 */
.bm-cell-group[data-cols="2"] .bm-group-box-open,
.bm-cell-group[data-cols="3"] .bm-group-box-open,
.bm-cell-group[data-cols="4"] .bm-group-box-open { width: 100%; }
/* 组块在网格里允许占更宽的位置 */
.bm-cell-group { align-items: center; }
.bm-cell-group .bm-cell-title { max-width: 100%; }

/* 旧规格化尺寸规则（y#1 遗留的 data-cols 放大）已不适用，撤回 */
.bm-cell-group[data-cols="3"] .bm-group-box,
.bm-cell-group[data-cols="4"] .bm-group-box { width: auto; height: auto; }

@media (max-width: 860px) {
  /* ac#3 组框同样铺满格子（原先 20px×格数 的固定宽度已废弃） */
  .bm-group-box-open .bm-group-slot { width: 100%; }
}

/* ================================================================
 * aa 批次（20261007z → aa）
 *  aa#1 组块单击打开 + 每格显示名称（格子缩小）
 *  aa#2 导出 / 导入收藏夹（跨设备搬运，替代云端）
 * ================================================================ */

/* ---- aa#1 组块：格子里图标 + 名称（整块不铺满网格格） ---- */
.bm-group-box.bm-group-box-open { gap: 5px 4px; padding: 5px; }
.bm-group-box-open .bm-group-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%;                      /* ac#3 每格均分整块宽度（组框铺满格子） */
  /* ad#1 关键修复：z 批次遗留的 height:22px + overflow:hidden 会把「名称」整行裁掉
     （用户反馈「成组后标题不显示」），这里显式放开高度与溢出。 */
  height: auto; overflow: visible;
  padding: 0;
}
.bm-group-slot-name {
  /* 本轮修复：与独立书签 .bm-cell-title(12px) 对齐，解决「文字图标放进组后标签字缩小」的观感 */
  font-size: 12px; line-height: 1.25; color: var(--text-2, var(--muted));
  text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ac#3 组框**铺满整个格子**：原先按「46px × 格数」算，比格子窄 → 看起来缩水了 */
.bm-cell-group { align-items: stretch; }
.bm-cell-group .bm-group-box-open { width: 100%; }
/* 组块本身允许比普通图标格宽：让它在网格里 span 2 列 */
.bm-cell-group { grid-column: span 2; cursor: pointer; }
.bm-cell-group .bm-cell-title { max-width: 100%; }

/* ---- aa#2 设置里的导入/导出行 ---- */
.bm-set-io { display: flex; gap: 8px; }

@media (max-width: 860px) {
  .bm-group-slot-name { font-size: 11px; }
}

/* ---- ab#1 收藏夹云同步状态标记 ---- */
.bm-sync {
  font-size: 11px; line-height: 1; color: var(--muted);
  padding: 3px 7px; border-radius: 999px;
  background: var(--chip, rgba(127, 131, 148, .14));
  white-space: nowrap; flex: none;
}
.bm-sync:empty { display: none; }
.bm-sync.ok { color: #2bb673; }
.bm-sync.bad { color: #ef5a6f; }

@media (max-width: 860px) {
  .bm-sync { font-size: 10px; padding: 2px 6px; }
}

/* ================================================================
 * ac 批次（20261008b → c）
 *  ac#1 成组面板格子宽度减半（原来 1fr 被撑到 ~253px）+ 新增 1×2 规格
 *  ac#2 搜索引擎图标改为抓官网 favicon（不再用 emoji）
 *  ac#3 组框铺满整个格子（原来按 46px×格数算，比格子窄）
 * ================================================================ */

/* ---- ac#2 官网图标：favicon <img> + 首字母兜底 ---- */
.bm-fav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none; overflow: hidden;
}
.bm-fav img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; display: block; }
.bm-fav-fb { display: none; font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1; }
.bm-fav.noimg img { display: none; }
.bm-fav.noimg .bm-fav-fb { display: block; }
/* 引擎条 / 管理列表里的图标容器稍大一点 */
.bm-eng-ico .bm-fav { width: 16px; height: 16px; }
.bm-eng-row-ico .bm-fav { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .bm-fav { width: 16px; height: 16px; }
  .bm-eng-ico .bm-fav, .bm-eng-row-ico .bm-fav { width: 15px; height: 15px; }
}

/* ---- ac#3 组内图标改为**固定尺寸**：slot 变成流体宽度后，
   .bm-cell-ico.sm 的 height:100% 失去确定高度 → 图标按原始尺寸撑爆（移动端尤其明显） ---- */
.bm-group-box-open .bm-cell-ico.sm {
  width: 26px; height: 26px; border-radius: 7px; font-size: 10px; flex: none;
}
.bm-group-box-open .bm-group-slot { min-width: 0; }
.bm-group-box-open .bm-group-slot-name { max-width: 100%; }

@media (max-width: 860px) {
  .bm-group-box-open .bm-cell-ico.sm { width: 24px; height: 24px; border-radius: 6px; }
}

/* ================================================================
 * ad 批次（20261008c → d）
 *  ad#1 组内格子与「未成组」完全一致（图标 56px / 名称 12px），
 *       组只在外围多描一圈边；组框按规格占 2/3/4 列
 *  ad#2 添加书签不再凭空创建「默认」分类
 *  ad#3 手机端「管理员备注」标签 + 文本框 + 存 同一行；
 *       权限「保存」按钮不再被裁成「保」
 * ================================================================ */

/* ---- ad#1 组内 = 普通图标格（唯一差别：外围一圈描边） ---- */
.bm-group-box.bm-group-box-open {
  padding: 8px 4px 6px;        /* 与 .bm-cell 一致 → 图标和普通格对齐 */
  gap: 6px 4px;
  justify-items: center;
  /* ad#1 关键：y#1 时代写死的 height:56px 会让「图标+名称」溢出到框外
     （截图里名称落在描边下方），且 .bm-cell 是 flex 列会把它压扁 → 必须放高 + 不收缩。
     高度改由内容决定，栅格行会随之变高，描边才能包住「外围一圈」。 */
  height: auto;
  min-height: 0;
  flex: none;
  align-self: stretch;
}
.bm-cell-group > .bm-cell-title { flex: none; }
.bm-group-box-open .bm-group-slot { gap: 7px; }          /* 与 .bm-cell 的 gap 一致 */
.bm-group-box-open .bm-cell-ico.sm {
  width: 56px; height: 56px; border-radius: 14px; font-size: 24px;
  flex: none; box-shadow: var(--shadow-sm);              /* 与 .bm-cell-ico 完全同尺寸 */
}
.bm-group-box-open .bm-group-slot-name {
  font-size: 12px; line-height: 1.35; color: var(--text-2, var(--text));
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 100%;
}
/* 每行格数越多 → 组块在网格里占更多列，保证每格宽度≈普通格 */
.bm-cell-group[data-cols="3"] { grid-column: span 3; }
.bm-cell-group[data-cols="4"] { grid-column: span 4; }

@media (max-width: 860px) {
  .bm-group-box.bm-group-box-open { padding: 8px 4px 6px; gap: 5px 3px; }
  .bm-group-box-open .bm-cell-ico.sm { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
  .bm-group-box-open .bm-group-slot-name { font-size: 11px; }
}

/* ---- ad#3 手机端管理页：备注行合并成一行 + 权限保存按钮完整显示 ---- */
@media (max-width: 760px) {
  /* ① 「管理员备注」标签 + 输入框 + 存 → 同一行 */
  .admin-users-table td.note-cell {
    display: flex; flex-direction: row; align-items: center;
    gap: 8px; flex-wrap: nowrap;
  }
  .admin-users-table td.note-cell::before {
    display: inline-block; width: auto; flex: none; margin: 0;
    line-height: 1.4; white-space: nowrap;
  }
  .admin-users-table td.note-cell .note-row { flex: 1 1 auto; min-width: 0; }
  /* ② 权限行：4 个勾选 + 保存 必须都完整可见（原先 gap 12px 溢出，
       保存 被 overflow-x 裁成「保」）。先收窄间距让它真的放得下（375px 实测可单行），
       并保底 flex-wrap: wrap —— 宁可「保存」另起一行，也不能只显示一个字。 */
  .admin-users-table .perm-box {
    flex-wrap: wrap !important; overflow-x: visible; gap: 5px 6px; padding-bottom: 0;
  }
  .admin-users-table .perm-cb { flex: none; font-size: 11.5px; gap: 2px; }
  .admin-users-table .perm-cb input { flex: none; width: 14px; height: 14px; }
  .admin-users-table .perm-save {
    flex: none; white-space: nowrap; min-width: 42px; padding: 4px 7px;
    font-size: 11.5px; line-height: 1;
  }
}


/* ================================================================
 * ae 批次（20261008d → e）
 *  ae#1 「收藏夹」改名「我的书签」
 *  ae#2 组名移入描边框**内部**（原在框外下方），
 *       并不再把整行（含时钟/搜索块）撑高
 *  ae#3 分类 + 设置从中间栏搬到顶部工具区（横向）
 * ================================================================ */

/* ---- ae#2：组框高度固定，组名在框内底部 ----
   根因（实测 box h=95 / cell h=132 / 普通格 h=93）：
   ad#1 给了 `align-self:stretch` + `height:auto`，框高由内容决定（2 个 56px 图标+
   各自名称 = 95px），再加外部组名 16px → 单元格 132px。
   同一行的时钟块/搜索块被grid 挤到 132px。
   修法：① 组名改为框内独立一行（横跨全部列），
        ② 框内 padding/gap 收紧，图标保持 56px（与未成组一致）；
        ③ 给时钟/搜索块加 `align-self:start` + 固定高度，不再被同行拖高。 */
.bm-group-box.bm-group-box-open {
  padding: 6px 4px 4px;
  gap: 3px;
  align-content: center;
  justify-items: center;
  /* 框高由内容决定，但不得拉高整行 */
  height: auto;
  min-height: 0;
  flex: none;
  align-self: stretch;
  box-sizing: border-box;
}
/* 组名：框内底部单独一行，横跨全部列 */
.bm-group-box-open .bm-group-name {
  grid-column: 1 / -1;
  width: 100%;
  font-size: 11.5px; line-height: 1.3; color: var(--text-2, var(--text));
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bm-group-box-open .bm-group-slot { gap: 4px; }
.bm-group-box-open .bm-cell-ico.sm {
  width: 56px; height: 56px; border-radius: 14px; font-size: 24px;
  flex: none; box-shadow: var(--shadow-sm);
}
.bm-group-box-open .bm-group-slot-name {
  font-size: 10px; line-height: 1.3; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
/* ③ 所有格子按内容高度排列，不再被同行最高的组块拉高 */
.bm-grid > .bm-cell { align-self: start; }
.bm-cell-group[data-cols="3"] { grid-column: span 3; }
.bm-cell-group[data-cols="4"] { grid-column: span 4; }

/* ③ 时钟 / 搜索块：不再被同行的组块拖高 */
.bm-cell-clock, .bm-cell-search {
  align-self: start;
  height: 93px;
  box-sizing: border-box;
}

@media (max-width: 860px) {
  .bm-group-box.bm-group-box-open { padding: 6px 3px 4px; gap: 3px; }
  .bm-group-box-open .bm-cell-ico.sm { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
  .bm-group-box-open .bm-group-slot-name { font-size: 10px; }
  .bm-group-box-open .bm-group-name { font-size: 11px; }
  .bm-cell-clock, .bm-cell-search { height: 84px; }
  .bm-cats-bar { max-width: 100%; }
  .bm-cats-bar .bm-cat-set span { display: none; }
  .bm-cats-bar .bm-cat-set { padding: 5px 7px; }
}
@media (max-width: 620px) {
  /* 小屏：分类条下独一行，不抢头部标题 */
  .bm-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .bm-cats-bar { max-width: 100%; width: 100%; order: 3; }
}

@media (max-width: 760px) {
  .bm-head .bm-cats-bar .bm-cat-list { max-width: 100%; }
}


/* ================================================================
 * af 批次（20261008f）
 *  af#2 待办笔记行：各列必须横向排成一排，不得挤成一团
 * ================================================================
   根因（实测）：
① `.tl-row { flex-wrap: wrap }` —— 行内容一旦超出宽度就换行，
     换行后因 `.tl-row{align-items:center}` 会把其余列拉散（屏幕上的「挤成一团」）；
② `.tl-rowtime { min-width:66px }` 但**没有 white-space:nowrap** —— 日期「2026-10-05」
     被挤在 66px 里在连字符处折成两行（截图里日期立到了第二行）；
③ `.tl-rowtitle { flex:1; white-space:nowrap }` 会无限吸容余宽，把后续列挤到下一行。
   修法：① 行内永不换行；② 各列补 white-space:nowrap；
        ③ 标题保留可缩就显示但 **flex-shrink 最小化**，使其余列保持定宽。 */

/* ① 行内永不换行 */
.tl-row { flex-wrap: nowrap; }
/* aj#1 带描述的行允许换行：描述独占第二行，不再挤乱右侧元信息列 */
.tl-row.has-desc { flex-wrap: wrap; }
/* ② 各列不内部折行 */
.tl-rowtitle,
.tl-rowfrom,
.tl-rowmeta,
.tl-rowmeta > span,
.tl-mc-status,
.tl-mc-prio,
.tl-mc-span,
.tl-mc-day,
.tl-rowtime,
.tl-rowsub,
.tl-rowstatus,
.tl-rowflag,
.tl-rowtag { white-space: nowrap; }
/* ③ 标题可缩就显示，同时不强占宽度 */
.tl-rowtitle { flex: 1 1 auto; min-width: 0; }
/* 日期列宽度与内容匹配，避免连字符折行 */
.tl-rowtime { min-width: 76px; }
/* 标签一行不排多行 */
.tl-row .tl-rowtag { flex: none; }


/* ================================================================
 * ag 批次（20261008f → g）
 *  ag#2 去掉组描述（右键菜单不再有「描述」按钮与弹窗）。
 * ah 批次（20261008g → h）
 *  ah#4 独立标签默认显示通用描边 + 通用背景（见 .bm-cell 基础规则）。
 *  ah#5 组块回填： revert ag#1 的 fit-content 内圈 —— 组块撑满分配到的
 *        多列跨度，整块（组范围）统一描边 + 背景，组内成员不再单独描边。
 *        （成组 vs 独立：独立标签有通用描边+背景；成组后以组范围为描边+背景。）
 * ================================================================ */

/* ah#5 组块撑满单元格，整块作为「组范围」描边 + 背景；成员不单独描边 */
.bm-cell-group { align-items: stretch; height: 100%; }   /* 覆盖 ag#1 的 center，并撑满单元格高度（aj#6 与时钟块等高） */
.bm-cell-group .bm-group-box.bm-group-box-open {
  width: 100%;                  /* 撑满单元格（与 4908/4947 的 100% 一致） */
  max-width: 100%;
  align-self: stretch;
  border: 0;                    /* 成员不单独描边，由外层 .bm-cell-group 统一承载 */
  border-radius: 12px;
  background: transparent;      /* 背景由外层整块承载 */
}
/* 手机端同样撑满 */
@media (max-width: 860px) {
  .bm-cell-group .bm-group-box.bm-group-box-open { width: 100%; max-width: 100%; }
}


/* ================================================================
 * ai 批次（20261008h → i）
 *  ai#1 块高统一：时钟/搜索/组/独立标签**同一个高度**
 *  ai#2 组窗口内右键菜单置顶（原先 .bm-menu z-index 320 < .tl-modal-ov 1200，被弹窗压住）
 *  ai#4 网格自由二维布局：块可横排也可竖排，不再只能线性左右挪
 *  ai#5 组的「方位」= 横 cols × 竖 rows，组块按此跨格
 * ================================================================ */

/* ---- ai#1 根因：时钟/搜索写死 height:93px，.bm-grid > .bm-cell 又是 align-self:start
       的内容高度，两者各自算高 → 视觉上高矮不齐。
       修法：把「块高」交给**网格行**统一控制（grid-auto-rows），
       所有块一律 align-self:stretch 填满自己的行，块内标题压到 1 行防溢出。 ---- */
#page-bookmarks .bm-grid {
  --bm-cellh: 96px;
  grid-auto-rows: var(--bm-cellh);
  gap: 6px 4px;
  /* al#1：网格原本只占内容高度，最后一行下面是 .bm-scroll 的空白，
     指针落在那里 dragover 的 target 不是网格 → 浏览器不派发 drop（能拖不能落）。
     给一个 min-height，下方留出真正属于网格的空行，可自由落位。 */
  min-height: calc(var(--bm-cellh) * 4 + 18px);
}
.bm-grid > .bm-cell { align-self: stretch; }              /* 覆盖 ③ 的 align-self:start */
.bm-cell-clock, .bm-cell-search { height: auto; }         /* 覆盖写死的 93px */
#page-bookmarks .bm-grid .bm-cell-title { -webkit-line-clamp: 1; }
/* 组块按方位跨 N 行时，内层盒子跟着撑满；成员垂直居中，与时钟块观感一致（aj#6） */
.bm-cell-group .bm-group-box.bm-group-box-open { height: 100%; align-content: center; }
/* aj#5 拖拽落点预览：虚线框按真实几何定位（与落位计算一致） */
.bm-drop-ghost {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6;
  border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-soft, rgba(22, 119, 255, .12));
  box-shadow: 0 0 0 2px var(--surface) inset;
}
/* ai#5 空位：虚线小格，让「方位」看得见，也提示还剩几格 */
.bm-group-slot.empty { border: 1px dashed var(--border); border-radius: 10px; min-height: 40px; }

@media (max-width: 860px) {
  #page-bookmarks .bm-grid { --bm-cellh: 88px; }
  .bm-cell-clock, .bm-cell-search { height: auto; }       /* 覆盖 84px 写死值 */
}

/* ---- ai#2 右键菜单置顶：组窗口（.tl-modal-ov）是 1200，菜单原为 320 → 被压在下面 ---- */
.bm-menu { z-index: 1500; }

/* ---- ai#4 二维自由布局：四个插入位指示 + 拖进组的落点高亮 ---- */
.bm-cell.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.bm-cell.drop-after  { box-shadow: 3px 0 0 0 var(--accent); }
.bm-cell.drop-above  { box-shadow: 0 -3px 0 0 var(--accent); }
.bm-cell.drop-below  { box-shadow: 0 3px 0 0 var(--accent); }
/* ai#3 独立标签拖到组块上 = 加入该组 */
.bm-cell-group.drop-into { box-shadow: 0 0 0 2px var(--accent) inset; background: var(--accent-soft); }
.bm-cell.drop-full { box-shadow: 0 0 0 2px var(--danger) inset; }

/* ---- ai#5 组的方位设置弹窗 ---- */
.bm-gs-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bm-gs-row > label { flex: none; width: 42px; font-size: 12.5px; color: var(--muted); }
.bm-gs-row select { flex: 1; min-width: 0; height: 30px; font-size: 12.5px; }
.bm-gs-prev {
  display: grid; gap: 3px; padding: 8px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.bm-gs-prev span { border: 1px dashed var(--border); border-radius: 5px; height: 18px; }
.bm-dialog-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
/* ================================================================
 * ak 批次（20261008j → k）2026-10-08
 *  ak#1 所有块高度以**时间块**为准 —— 组块也只占 1 个网格行，不再比其它块高
 *  ak#2 块标题超过 6 个中文字符以「…」省略（JS bmTitleShort 截断 + CSS 兜底防变形）
 *  ak#5 带描述的待办行：描述独占一行、长描述行内截断，右侧元信息列不再被挤乱
 *  ak#6 「添加书签」弹窗顶部的**分段胶囊**（添加书签 / 成组 同一容器两段）
 * ================================================================ */

/* ---- ak#2 标题过长会把格子撑变形：min-width:0 + 单行省略兜底 ---- */
#page-bookmarks .bm-grid > .bm-cell,
#page-bookmarks .bm-grid .bm-cell-link { min-width: 0; }
#page-bookmarks .bm-grid .bm-cell-title {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-line-clamp: 1; -webkit-box-orient: horizontal; word-break: normal;
}

/* ---- ak#5 描述行：描述独占一行 + 行内截断；标签过多时收缩省略，不再撑破行 ---- */
.tl-row.has-desc { flex-wrap: wrap; }
.tl-row .tl-rowdesc-wrap {
  flex: 1 1 100%; order: 9; min-width: 0; max-width: 100%;
  padding-left: 30px;
}
.tl-row .tl-rowdesc {
  display: block; width: 100%;
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-row .tl-rowtag {
  flex: 0 1 auto; min-width: 0; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- ak#6「添加书签」弹窗：顶部分段胶囊 ----
   an#2：原先 margin-top 只有 2px，胶囊紧贴标题栏下方的横线，视觉上「贴住」了。
   加大上间距并让标题栏与胶囊之间有呼吸感。 ---- */
.bm-mode-sw {
  display: flex; gap: 4px; margin: 14px 18px 4px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.bm-mode-btn {
  /* an#4：现在是**四段**（添加书签 / 成组 / 内置 / 本地文件），留足横向空间 */
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; cursor: pointer;
  padding: 7px 6px; border-radius: 8px; font-family: inherit;
  font-size: 12.5px; line-height: 1.3; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s, box-shadow .12s;
}
.bm-mode-btn:hover { color: var(--text); }
.bm-mode-btn.on { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-sm); }
.bm-add-dialog .bm-dialog-body { padding-top: 10px; }
@media (max-width: 760px) {
  .bm-mode-sw { margin: 0 14px 2px; }
  .bm-mode-btn { font-size: 12.5px; padding: 6px 8px; }
}
/* ================================================================
 * al 批次（20261008k → l）2026-10-08
 *  al#1 网格下方空白也能落位（min-height + 矩形命中）
 *  al#2 标题长度按显示宽度算（英文可显示更多）
 *  al#3 组的「方位」真正生效：2×2 就占 2 竖格，块比其它块高
 * ================================================================ */

/* ---- al#2 标题按宽度截断后仍需 CSS 兜底（JS 已算宽度，这里只防溢出） ---- */
#page-bookmarks .bm-grid > .bm-cell,
#page-bookmarks .bm-grid .bm-cell-link { min-width: 0; }
#page-bookmarks .bm-grid .bm-cell-title {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-line-clamp: 1; -webkit-box-orient: horizontal; word-break: normal;
}

/* ---- al#3 组块跨 rows 行：内层按行均分块高，成员图标随块高自适应 ---- */
.bm-cell-group { height: auto; }
.bm-cell-group .bm-group-box.bm-group-span {
  height: 100%;
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
  row-gap: 2px;
  overflow: hidden;
}
.bm-cell-group .bm-group-box.bm-group-span .bm-group-slot {
  /* an#6：原先 al 批次压到 1px，导致图标与标题几乎贴在一起；恢复可读间距 */
  gap: 4px; min-width: 0; min-height: 0; justify-content: center;
}
/* 图标尺寸按「块占几行」分档：1 行最小，2 行起放大，4 行以上略缩以塞下更多成员 */
.bm-cell-group[data-rows="1"] .bm-group-box.bm-group-span .bm-cell-ico.sm { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }
.bm-cell-group[data-rows="2"] .bm-group-box.bm-group-span .bm-cell-ico.sm { width: 54px; height: 54px; border-radius: 14px; font-size: 23px; }
.bm-cell-group[data-rows="3"] .bm-group-box.bm-group-span .bm-cell-ico.sm { width: 48px; height: 48px; border-radius: 13px; font-size: 20px; }
.bm-cell-group[data-rows="4"] .bm-group-box.bm-group-span .bm-cell-ico.sm { width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }
/* ap#2：组内「文字图标」字号统一对齐外面 .bm-cell-ico（24px），覆盖上面各档 17~23px 的缩小。
   图片 / favicon 图标不走 font-size（img 撑满且 .has-img 隐藏 .bm-cell-txt），故只命中 .text。 */
.bm-cell-group[data-rows="1"] .bm-group-box.bm-group-span .bm-cell-ico.sm.text { font-size: 24px; }
.bm-cell-group[data-rows="2"] .bm-group-box.bm-group-span .bm-cell-ico.sm.text { font-size: 24px; }
.bm-cell-group[data-rows="3"] .bm-group-box.bm-group-span .bm-cell-ico.sm.text { font-size: 24px; }
.bm-cell-group[data-rows="4"] .bm-group-box.bm-group-span .bm-cell-ico.sm.text { font-size: 24px; }
.bm-cell-group .bm-group-box.bm-group-span .bm-group-slot-name {
  /* 本轮修复：与独立书签 .bm-cell-title(12px) 对齐 —— 解决文字图标入组后标签字缩小（9.5px）的观感 */
  font-size: 12px; line-height: 1.25; color: var(--text-2, var(--muted));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; max-width: 100%; margin: 0;
}
/* 空位：虚线占位，随行高自适应，不再写死 40px */
.bm-cell-group .bm-group-slot.empty {
  border: 1px dashed var(--border); border-radius: 10px;
  min-height: 0; height: auto; align-self: stretch;
}

/* ---- al#1 手机端也留出可落位区域 ---- */
@media (max-width: 860px) {
  #page-bookmarks .bm-grid { min-height: calc(var(--bm-cellh) * 3 + 18px); }
}
/* ================================================================
 * am 批次（20261008l → m）2026-10-08
 *  am#1 组块右上角加「…」，点它才打开组窗口
 *  am#2 组内书签改成真链接，点哪个直接跳哪个网页
 *  am#3 本地文件标签（路径/文件夹/应用），点开自动复制绝对路径
 * ================================================================ */

/* ---- am#1 组右上角「…」：hover 才显形，不遮挡成员图标 ---- */
.bm-cell-group { position: relative; }
.bm-group-more {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--surface); color: var(--muted);
  box-shadow: 0 0 0 1px var(--border);
  opacity: .55; transition: opacity .12s, color .12s, background .12s;
}
.bm-cell-group:hover .bm-group-more { opacity: 1; }
.bm-group-more:hover { color: var(--accent); }
.bm-group-more:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.bm-group-more svg { display: block; }

/* ---- am#2 组内成员是 <a>，hover 给可点反馈；点击不冒泡到「打开组窗口」 ---- */
.bm-group-slot-link { text-decoration: none; color: inherit; cursor: pointer; }
.bm-cell-ico { transition: transform .12s; }
.bm-group-slot-link:hover .bm-cell-ico,
.bm-group-slot-local:hover .bm-cell-ico,
.bm-cell-local .bm-cell-link:hover .bm-cell-ico { transform: scale(1.06); }
.bm-group-slot-local { cursor: pointer; }

/* ---- am#3 本地文件标签的图标（按扩展名分类，纯 CSS/SVG 不依赖外部资源）---- */
.bm-cell-ico.local { color: #fff; }
.bm-cell-ico.local.kind-folder { background: #f0a020; }
.bm-cell-ico.local.kind-image  { background: #12b886; }
.bm-cell-ico.local.kind-video  { background: #e8590c; }
.bm-cell-ico.local.kind-audio  { background: #7048e8; }
.bm-cell-ico.local.kind-zip    { background: #868e96; }
.bm-cell-ico.local.kind-text   { background: #4c6ef5; }
.bm-cell-ico.local.kind-doc    { background: #1971c2; }
.bm-cell-ico.local.kind-app    { background: #d6336c; }
.bm-cell-ico.local.kind-file   { background: #5c7cfa; }
.bm-cell-ico.local.clear { color: var(--text); }
.bm-local-ico { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.bm-local-ico svg { display: block; }
.bm-cell-ico.local.sm .bm-local-ico svg { width: 15px; height: 15px; }
.bm-local-link { cursor: pointer; }

/* 本地标签右键菜单：路径只读 + 两枚操作按钮 */
#bm-m-path { color: var(--muted); background: var(--surface-2); }
.bm-menu-ops-row { display: flex; gap: 8px; margin-top: 8px; }
.bm-menu-ops-row .bm-btn { flex: 1; }
/* ================================================================
 * an 批次（20261009）2026-10-09
 *  an#1 每日 MD 日志列顺序：任务 → 清单 → 任务状态 → 优先级 → 时长 → 日期
 *  an#2 添加弹窗：分段胶囊与标题栏横线拉开间距
 *  an#3 新建分类 = 切到该分类的全新空白页（分类是独立页，不是过滤器）
 *  an#4 「内置」段：按分类勾选时钟 / 搜索块
 *  an#5 本地文件块点击 = 直接复制路径
 *  an#6 组块内图标与标题的上下间距
 *  an#7 组内成员标题兜底（避免整格空白）
 * ================================================================ */

/* ---- an#2 分段胶囊与标题栏之间的呼吸感 ---- */
.bm-dialog-head { padding-bottom: 2px; }
.bm-add-dialog .bm-mode-sw { margin: 14px 18px 6px; }
.bm-add-dialog .bm-dialog-body { padding-top: 4px; }

/* ---- an#4 内置块勾选行 ---- */
.bm-blk-cb {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; margin: 0 0 8px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); cursor: pointer;
  font-size: 13px; color: var(--text);
}
.bm-blk-cb:hover { border-color: var(--accent); background: var(--surface); }
.bm-blk-cb input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* ---- an#6 组块内图标与标题间距（al 批次压到 1px，这里由 JS 侧的 slot 样式兜底）---- */
.bm-cell-group .bm-group-box.bm-group-span .bm-group-slot { gap: 4px; }
.bm-cell-group .bm-group-box.bm-group-span .bm-group-slot-name {
  line-height: 1.25; margin-top: 1px;
}

@media (max-width: 760px) {
  .bm-add-dialog .bm-mode-sw { margin: 12px 14px 6px; }
  .bm-mode-btn { font-size: 12px; padding: 6px 4px; }
}