/* =====================================================
   Rahmanst生活工作台 - 全局样式
   Neo-Brutalism（新粗野主义）主题
   设计语言：纯黑粗硬边框 / 高饱和撞色 / 几何大圆角
   阴影策略：静止态零阴影，仅在悬浮/交互时使用硬偏移阴影
   ===================================================== */
:root {
  --bg: #f5f1e8;        /* 页面背景：奶油米白 */
  --card: #ffffff;      /* 卡片背景：纯白 */
  --ink: #111111;       /* 主黑：边框与文字 */
  --text: #111111;      /* 文字主色 */
  --text2: #5c5c50;     /* 文字次色：暖灰 */
  --border: #111111;    /* 边框：统一纯黑 */
  --accent: #ff4d6d;    /* 强调：热粉红 */
  --primary: #4361ee;  /* 主色：电光蓝 */
  --yellow: #ffd643;   /* 活力黄（选中/高亮） */
  --green: #06d6a0;    /* 成功/收入：薄荷绿 */
  --green-text: #00875c;
  --red: #e03131;      /* 警告/支出文字红 */
  --cyan: #4cc9f0;     /* 青 */
  --purple: #b388ff;   /* 紫 */
  --orange: #ff9f1c;   /* 橙 */
  --hover: #fff8dc;     /* 列表悬浮底色 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 方块滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--bg); border-radius: 0; }
::-webkit-scrollbar-track { background: var(--bg); }

.hidden { display: none !important; }

/* ========== 通用卡片 ========== */
.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 20px;
}

/* ========== 按钮：黑边白底，悬浮时硬偏移 ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 700; cursor: pointer; user-select: none;
  transition: transform .12s, box-shadow .12s, background .12s;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: none; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: var(--card); color: var(--ink); }
.btn-ghost:hover { background: var(--yellow); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: transparent; border: 2px solid transparent; color: var(--ink);
  font-size: 17px; cursor: pointer; transition: all .12s;
}
.icon-btn:hover { background: var(--yellow); border-color: var(--ink); }

/* ========== 表单：黑边输入框 ========== */
.input, select.input, textarea.input {
  width: 100%; min-height: 42px; padding: 8px 12px;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  outline: none; transition: box-shadow .12s, border-color .12s;
}
.input:focus { box-shadow: 3px 3px 0 var(--accent); }
.input::placeholder { color: #a8a896; opacity: 1; }
textarea.input { resize: vertical; min-height: 80px; }
select.input { appearance: none; cursor: pointer; }
input[type="date"], input[type="time"] { color-scheme: light; }

.form-label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}

/* ========== Tab 切换条 ========== */
.tab-bar {
  display: flex; gap: 0; padding: 4px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 10px;
}
.tab-item {
  flex: 1; min-height: 38px; border: 2px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text2);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.tab-item:hover { color: var(--ink); }
.tab-item.active { background: var(--yellow); border-color: var(--ink); color: var(--ink); }

/* ========== 筛选小标签 ========== */
.chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.chip:hover { background: var(--hover); }
.chip.active { background: var(--ink); color: var(--yellow); }

/* ========== 分类/优先级小标签：撞色实心块 ========== */
.tag {
  display: inline-block; padding: 1px 8px;
  border: 2px solid var(--ink); border-radius: 6px;
  font-size: 12px; font-weight: 700; line-height: 18px; color: var(--ink);
}
.tag-work { background: var(--cyan); }
.tag-life { background: var(--green); }
.tag-study { background: var(--purple); }
.tag-urgent { background: var(--accent); color: #fff; }
.tag-normal { background: #e9e5d8; }

/* ========== 登录页 ========== */
.login-card {
  width: 100%; max-width: 400px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 16px; padding: 34px 30px;
  box-shadow: 8px 8px 0 var(--accent); /* 全站唯一的常驻硬阴影：入口签名 */
}
.login-logo {
  display: inline-block;
  font-size: 30px; font-weight: 900; letter-spacing: 1px;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  background: var(--yellow); color: var(--ink);
  padding: 2px 12px; border: 2px solid var(--ink); border-radius: 8px;
}

/* ========== 主界面布局 ========== */
#app-view { display: flex; min-height: 100vh; }

#sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--card); border-right: 3px solid var(--ink);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  transition: transform .25s ease;
}
.sidebar-logo {
  display: inline-block; margin: 20px 16px 14px;
  padding: 2px 10px; width: fit-content;
  font-size: 21px; font-weight: 900; letter-spacing: 1px;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px;
}
#sidebar-nav { padding: 4px 12px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 0 14px; margin-bottom: 6px;
  border: 2px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text2);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .12s; text-align: left;
}
.nav-item i { width: 18px; text-align: center; }
.nav-item:hover { background: var(--hover); border-color: var(--ink); color: var(--ink); }
.nav-item.active {
  background: var(--yellow); border-color: var(--ink); color: var(--ink);
  font-weight: 800;
}
.nav-item.nav-bottom { margin-top: 16px; }
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-top: 3px solid var(--ink); color: var(--ink);
  font-weight: 700;
}

#sidebar-mask {
  display: none; position: fixed; inset: 0; z-index: 35;
  background: rgba(17,17,17,.4);
}

#main {
  flex: 1; min-width: 0;
  margin-left: 240px;
  display: flex; flex-direction: column;
}

#topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  min-height: 62px; padding: 0 24px;
  background: var(--card);
  border-bottom: 3px solid var(--ink);
}
#topbar-title {
  font-size: 19px; font-weight: 900;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  flex: 1; letter-spacing: .5px;
}

#content { flex: 1; padding: 24px; }
#page { max-width: 1200px; margin: 0 auto; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* 满屏页面（笔记）：解除 1200px 限宽限制，让三栏铺满可用宽度。
   --notes-h 由 JS 运行时测量（见 app.js 的 updateNotesHeight）：
   视口高 − 顶栏高 − 内容区上下内边距 − 容器边框。
   用运行时测量替代 `calc(100vh - 108px)` 这种手工累加的魔数，
   改 padding / 顶栏高度时不会再失配；且它基于 visualViewport，
   手机软键盘弹出时高度会自动收缩，编辑区不会被键盘遮住。 */
#page.page-full { max-width: none; }
/* 满屏页（笔记）收紧留白：24px → 12px，横竖各多出 24px 可用空间 */
#content.content-full { padding: 12px; }

/* ========== 概览统计卡：撞色底 ========== */
.stat-card {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 18px; cursor: pointer; transition: all .12s;
}
.stat-card:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.stat-card .stat-icon {
  width: 40px; height: 40px; border-radius: 8px;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.stat-num {
  font-size: 24px; font-weight: 900; line-height: 1.2;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
}
.stat-label { font-size: 13px; color: var(--text2); font-weight: 600; }

/* ========== 列表通用 ========== */
/* 注意：双类选择器用于压过 Tailwind 内置的 .list-item{display:list-item} */
.list-item.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.list-item.list-item:hover { background: var(--hover); }
.list-item .del-btn {
  opacity: 0; flex-shrink: 0;
  width: 32px; height: 32px; border: 2px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text2); cursor: pointer; transition: all .12s;
}
.list-item:hover .del-btn { opacity: 1; }
.del-btn:hover { background: var(--accent); border-color: var(--ink); color: #fff !important; }
.item-done { background: #efeadb; }
.item-done .item-text { text-decoration: line-through; color: var(--text2); }
.item-done.item-done { border-style: dashed; }

/* 复选框 */
.checkbox {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 6px;
  background: var(--card); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 12px; font-weight: 900; transition: all .12s;
}
.checkbox.checked { background: var(--green); color: var(--ink); }

/* ========== 日历 ========== */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head {
  text-align: center; font-size: 12px; font-weight: 700; color: var(--text2); padding: 6px 0;
}
.cal-cell {
  position: relative; min-height: 56px; padding: 6px;
  border: 2px solid transparent; border-radius: 8px;
  background: var(--card);
  cursor: pointer; transition: all .12s; text-align: center;
}
.cal-cell:hover { border-color: var(--ink); background: var(--hover); }
.cal-cell.other { opacity: .35; }
.cal-cell.today { border-color: var(--ink); background: var(--cyan); font-weight: 800; }
.cal-cell.selected { background: var(--yellow); border-color: var(--ink); font-weight: 800; }
.cal-cell .dot {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
  border: 1px solid var(--ink);
}

/* ========== 笔记（旧版列表/编辑两栏，保留兼容） ========== */
.notes-wrap {
  display: grid; grid-template-columns: 300px 1fr; gap: 20px;
  height: var(--notes-h, calc(100vh - 108px));
}
.notes-list, .notes-editor {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.notes-list-body { flex: 1; overflow-y: auto; padding: 8px; }
.note-item {
  position: relative; padding: 12px 14px; margin-bottom: 6px;
  border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card); cursor: pointer; transition: all .12s;
}
.note-item:hover { background: var(--hover); }
.note-item.active { background: var(--yellow); font-weight: 700; }
.note-item .note-del {
  position: absolute; right: 8px; top: 8px; opacity: 0;
  width: 28px; height: 28px; border: 2px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text2); cursor: pointer;
}
.note-item:hover .note-del { opacity: 1; }
.note-del:hover { color: #fff !important; background: var(--accent); border-color: var(--ink); }
.notes-editor-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.note-title-input {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 22px; font-weight: 900; color: var(--ink); margin-bottom: 12px;
}
.note-title-input::placeholder { color: #a8a896; }
.note-content {
  min-height: 300px; outline: none; font-size: 15px; line-height: 1.8;
}
.note-content:empty::before { content: '开始记录点什么吧…'; color: #a8a896; }
.note-content blockquote {
  border-left: 4px solid var(--ink); padding: 2px 12px; margin: 8px 0;
  background: var(--hover); border-radius: 0 6px 6px 0; color: var(--text2);
}
.note-content ul, .note-content ol { padding-left: 22px; margin: 6px 0; }
.editor-toolbar { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 2px solid var(--ink); background: var(--bg); }
.editor-toolbar .icon-btn { width: 34px; height: 34px; font-size: 14px; }
.save-status { font-size: 12px; color: var(--text2); font-weight: 600; }
.save-status.error { color: var(--red); cursor: pointer; text-decoration: underline; }

/* =====================================================
   笔记模块：三栏布局（Neo-Brutalism）
   左栏深蓝导航 / 中栏墨蓝列表 / 右栏奶油白编辑器
   ===================================================== */
.nb-notes {
  display: grid;
  /* 第三列用 minmax(0, 1fr)：否则 1fr 的最小尺寸取内容 min-content，
     编辑器内部的工具栏会把轨道撑宽，在窄屏上内容被 overflow:hidden 裁掉 */
  grid-template-columns: 240px 280px minmax(0, 1fr);
  gap: 0;
  height: var(--notes-h, calc(100vh - 108px));
  border: 3px solid var(--ink); border-radius: 0;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--card);
}
/* 中栏折叠：只留导航 + 编辑器 */
.nb-notes.list-collapsed { grid-template-columns: 240px 0 minmax(0, 1fr); }
.nb-notes.list-collapsed .nb-list { border-width: 0; overflow: hidden; }

/* 三栏都允许收缩到内容以下（配合 minmax(0,1fr)，防止窄屏横向撑破） */
.nb-nav, .nb-list, .nb-editor { min-width: 0; }

/* ---------- 左栏：导航 ---------- */
.nb-nav {
  background: #16213e; color: #fff;
  border-right: 3px solid var(--ink);
  display: flex; flex-direction: column; min-height: 0;
}
.nb-nav-head {
  padding: 14px 14px; font-weight: 800; font-size: 15px;
  border-bottom: 3px solid var(--ink);
  display: flex; align-items: center; gap: 8px;
  background: #0f1830;
}
.nb-nav-search {
  position: relative; display: flex; align-items: center;
  padding: 10px; border-bottom: 3px solid var(--ink);
}
.nb-nav-search > i {
  position: absolute; left: 20px; color: #9aa4c4; font-size: 13px; pointer-events: none;
}
.nb-nav-search input {
  width: 100%; padding: 8px 30px 8px 32px;
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 0;
  font-size: 13px; font-weight: 600; outline: none;
}
.nb-nav-search input::placeholder { color: #8b8b80; }
.nb-nav-search button {
  position: absolute; right: 16px;
  width: 24px; height: 24px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); cursor: pointer; line-height: 1;
}
.nb-nav-search button:hover { background: var(--accent); color: #fff; }

.nb-nav-body { flex: 1; overflow-y: auto; padding: 8px; }
.nb-nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; margin-bottom: 4px;
  border: 3px solid transparent; border-radius: 0;
  background: transparent; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; text-align: left;
}
.nb-nav-item:hover { background: #22305a; border-color: #fff; }
.nb-nav-item.active { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.nb-nav-count {
  margin-left: auto; font-size: 11px; font-weight: 800;
  padding: 0 6px; background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .35);
}
.nb-nav-item.active .nb-nav-count { background: var(--ink); color: var(--yellow); border-color: var(--ink); }

.nb-nav-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: #8c99c0; text-transform: uppercase;
}
.nb-nav-mini {
  width: 22px; height: 22px;
  border: 2px solid #8c99c0; border-radius: 0;
  background: transparent; color: #cfd6ec; cursor: pointer; font-size: 10px; line-height: 1;
}
.nb-nav-mini:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }

/* 文件夹树 */
.nb-tree-empty { font-size: 12px; color: #8c99c0; padding: 4px 10px; }
.nb-tree-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; margin-bottom: 3px;
  border: 3px solid transparent; border-radius: 0;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.nb-tree-row:hover { background: #22305a; border-color: #fff; }
.nb-tree-row.active { background: var(--cyan); color: var(--ink); border-color: var(--ink); }
.nb-tree-arrow { width: 12px; font-size: 9px; flex-shrink: 0; }
.nb-tree-arrow.empty { visibility: hidden; }
.nb-tree-icon { color: #ffd643; font-size: 12px; flex-shrink: 0; }
.nb-tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-tree-count { font-size: 10px; opacity: .7; }
.nb-tree-actions { display: none; gap: 2px; }
.nb-tree-row:hover .nb-tree-actions { display: flex; }
.nb-tree-actions button {
  width: 20px; height: 20px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  cursor: pointer; font-size: 9px; line-height: 1;
}
.nb-tree-actions button:hover { background: var(--accent); color: #fff; }

/* ---------- 左栏：标签区域 ---------- */
.nb-tag-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; margin-bottom: 3px;
  border: 2px solid transparent; border-radius: 0;
  color: #dfe4f2; font-size: 13px; cursor: pointer;
  position: relative;
}
.nb-tag-row:hover { background: #22305a; border-color: #fff; }
.nb-tag-row.active { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.nb-tag-dot {
  width: 11px; height: 11px; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 0;
}
.nb-tag-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-tag-count { font-size: 10px; opacity: .7; }
.nb-tag-del {
  display: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink); font-size: 9px; cursor: pointer;
}
.nb-tag-row:hover .nb-tag-del { display: flex; }
.nb-tag-del:hover { background: var(--accent); color: #fff; }
.nb-tag-row.active .nb-tag-del { display: flex; }

/* ---------- 中栏：笔记列表 ---------- */
.nb-list {
  background: #1a1a2e; color: #fff;
  border-right: 3px solid var(--ink);
  display: flex; flex-direction: column; min-height: 0;
}
.nb-list-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; border-bottom: 3px solid var(--ink);
  background: #131327;
}
.nb-list-title { font-size: 12px; font-weight: 800; color: #cfd6ec; }
.nb-list-toggle {
  margin-left: auto;
  width: 26px; height: 26px;
  border: 2px solid #cfd6ec; border-radius: 0;
  background: transparent; color: #cfd6ec; cursor: pointer; font-size: 10px; line-height: 1;
}
.nb-list-toggle:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.nb-list-body { flex: 1; overflow-y: auto; padding: 8px; }

.nb-note {
  position: relative;
  padding: 10px 12px; margin-bottom: 8px;
  border: 3px solid #3a3a55; border-radius: 0;
  background: #232342; color: #fff;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.nb-note:hover { background: #2d2d54; border-color: #fff; }
.nb-note.active { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.nb-note.is-bin { opacity: .85; }
.nb-note-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; word-break: break-word; }
.nb-pin { color: var(--accent); font-size: 11px; margin-right: 3px; }
.nb-fav { color: #ffb703; font-size: 11px; margin-right: 4px; }
.nb-note.active .nb-pin, .nb-note.active .nb-fav { color: #b3003c; }
.nb-note-excerpt {
  font-size: 12px; opacity: .72; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nb-note-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; opacity: .68; margin-top: 5px; }
.nb-note-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.nb-tag {
  display: inline-block; padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--chip, var(--yellow)); color: var(--ink);
  font-size: 10px; font-weight: 800;
}
.nb-todo-stat { display: inline-flex; align-items: center; gap: 3px; }
.nb-note .nb-act {
  position: absolute; right: 6px; top: 6px; opacity: 0;
  width: 26px; height: 26px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 11px; line-height: 1;
}
.nb-note:hover .nb-act { opacity: 1; }
.nb-act:hover { background: var(--accent); color: #fff; }
.nb-act.danger:hover { background: #ff006e; }
.nb-note-actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; }
.nb-note-actions .nb-act { position: static; opacity: 1; }
.nb-empty-list { text-align: center; padding: 40px 14px; color: #9aa4c4; }
.nb-empty-list i { font-size: 30px; display: block; margin-bottom: 12px; opacity: .6; }
.nb-empty-list p { font-size: 13px; }

/* ---------- 右栏：编辑器 ---------- */
.nb-editor {
  display: flex; flex-direction: column; min-height: 0;
  background: #fbf7ee; color: var(--ink);
}
.nb-editor-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 3px solid var(--ink);
  background: #fff; flex-wrap: wrap;
}
.nb-title-input {
  flex: 1; min-width: 140px;
  background: transparent; border: none; outline: none;
  font-size: 18px; font-weight: 800; color: var(--ink);
  font-family: inherit;
}
.nb-title-input::placeholder { color: #a8a896; }
.nb-folder-select {
  max-width: 150px; padding: 6px 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.nb-topbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; min-height: 34px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.nb-topbtn:hover { background: var(--yellow); }
.nb-topbtn.active { background: var(--ink); color: var(--yellow); }
.nb-save-status { font-size: 12px; font-weight: 700; color: var(--green-text); white-space: nowrap; }
.nb-save-status.error { color: var(--red); cursor: pointer; text-decoration: underline; }
.nb-bin-hint { font-size: 12px; color: var(--text2); }
.nb-back {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); cursor: pointer;
}

/* ---------- 编辑器：标签区 ---------- */
.nb-tagbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 3px solid var(--ink);
  background: #fff;
}
.nb-tagbar-icon { color: var(--primary); font-size: 12px; }
.nb-tagbar-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.nb-tag-empty { font-size: 12px; color: #a8a896; font-weight: 600; }
.nb-tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--chip, var(--yellow)); color: var(--ink);
  font-size: 12px; font-weight: 800; line-height: 1.4;
}
.nb-tag-chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: 2px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
  font-size: 8px; cursor: pointer; padding: 0;
}
.nb-tag-chip button:hover { background: var(--accent); color: #fff; }
.nb-tag-input {
  flex: 1; min-width: 110px; max-width: 190px;
  padding: 4px 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 700; font-family: inherit; outline: none;
}
.nb-tag-input::placeholder { color: #a8a896; }
.nb-tag-input:focus { background: #fffbe8; }
/* 联想下拉：定位于标签栏下方，硬阴影 */
.nb-tag-suggest {
  flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; padding: 8px;
  border: 3px solid var(--ink); background: #fffdf5;
  box-shadow: 4px 4px 0 var(--ink);
}
.nb-tag-suggest.hidden { display: none; }
.nb-tag-chip.suggest { cursor: pointer; }
.nb-tag-chip.suggest:hover { transform: translate(1px, 1px); }
.nb-tag-chip.suggest.new { background: #fff; border-style: dashed; }

/* ---------- 编辑器：「更多」下拉菜单 ---------- */
.nb-more { position: relative; }
.nb-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 210px; padding: 6px;
  /* 手机端菜单项较多（含从顶栏收纳进来的置顶/收藏/Markdown），
     限高并允许内部滚动，避免菜单超出屏幕点不到下面的项 */
  max-height: calc(100vh - 24px); overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 3px solid var(--ink); border-radius: 0;
  background: #fff; box-shadow: 4px 4px 0 var(--ink);
}
.nb-more-menu.hidden { display: none; }
.nb-more-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
  font-family: inherit;
}
.nb-more-menu button:hover { background: var(--yellow); border-color: var(--ink); }
.nb-more-sep { height: 2px; background: var(--ink); opacity: .18; margin: 6px 2px; }

/* ---------- 编辑器主区：正文 + 右侧大纲 ---------- */
/* min-width: 0 是必需的：flex 子项默认 min-width:auto，会被内部宽内容
   （代码块横向滚动区、长表格等）撑破容器。外层有 overflow:hidden，
   溢出时不会出现滚动条，反而更难发现（实测移动端正文区被撑到 751px）。 */
.nb-editor-main { display: flex; flex: 1; min-height: 0; min-width: 0; }
.nb-editor-main > * { min-width: 0; }

/* ---------- 文档大纲 ---------- */
.nb-outline {
  width: 216px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-left: 3px solid var(--ink);
  background: #fff;
  transition: width .16s ease;
  overflow: hidden;
}
.nb-outline.collapsed { width: 42px; }
.nb-outline-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 8px 8px 12px; flex-shrink: 0;
  border-bottom: 3px solid var(--ink);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.nb-outline-head > span { display: inline-flex; align-items: center; gap: 6px; }
.nb-outline.collapsed .nb-outline-head { justify-content: center; padding: 8px 0; }
.nb-outline.collapsed .nb-outline-head > span { display: none; }
.nb-outline-fold {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 9px; cursor: pointer; padding: 0;
}
.nb-outline-fold:hover { background: var(--yellow); }
.nb-outline-body { flex: 1; overflow-y: auto; padding: 8px; }
.nb-outline.collapsed .nb-outline-body { display: none; }
.nb-outline-empty { font-size: 11px; line-height: 1.8; color: #a8a896; padding: 6px 4px; }
.nb-outline-item {
  display: block; width: 100%; text-align: left;
  padding: 5px 7px; margin-bottom: 2px;
  border: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: 12px; font-weight: 600; line-height: 1.45;
  cursor: pointer; font-family: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-outline-item:hover { background: #fffbe8; border-color: var(--ink); }
.nb-outline-item.active { background: var(--yellow); border-color: var(--ink); font-weight: 800; }
.nb-outline-item.lv1 { font-size: 13px; font-weight: 800; }
.nb-outline-item.lv2 { padding-left: 18px; }
.nb-outline-item.lv3 { padding-left: 30px; font-size: 11px; }

/* ---------- [[ 双向链接选择器 ---------- */
.nb-quill-wrap { position: relative; }
.nb-wiki-picker {
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: min(430px, calc(100% - 28px));
  max-height: 236px; overflow-y: auto; padding: 6px;
  border: 3px solid var(--ink); border-radius: 0;
  background: #fff; box-shadow: 4px 4px 0 var(--ink);
  z-index: 30;
}
.nb-wiki-picker.hidden { display: none; }
.nb-wiki-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: 13px; cursor: pointer; text-align: left; font-family: inherit;
}
.nb-wiki-item.active, .nb-wiki-item:hover { background: var(--yellow); border-color: var(--ink); }
.nb-wiki-item.new { color: #0a7d5a; font-weight: 800; }
.nb-wiki-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.nb-wiki-meta { font-size: 10px; opacity: .6; flex-shrink: 0; }
.nb-wiki-empty { font-size: 12px; color: #a8a896; padding: 12px; text-align: center; }

/* 正文里的双向链接（含阅读模式与回收站预览） */
.nb-quill-body .ql-editor a.nb-wikilink,
.nb-quill-body .ql-editor a[href^="note:"],
.nb-readonly .ql-editor a.nb-wikilink,
.nb-readonly .ql-editor a[href^="note:"] {
  background: #dbe8ff; color: #14349b !important;
  border-bottom: 2px solid #14349b;
  padding: 0 3px; text-decoration: none; font-weight: 700;
}

/* ---------- 被引用（backlinks） ---------- */
.nb-backlinks { border-top: 3px solid var(--ink); background: #fffdf5; flex-shrink: 0; }
.nb-backlinks.hidden { display: none; }
.nb-backlinks-head {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; font-size: 12px; font-weight: 800;
  cursor: pointer; user-select: none;
}
.nb-backlinks-head:hover { background: var(--yellow); }
.nb-backlinks-arrow { margin-left: auto; font-size: 10px; }
.nb-backlinks.folded .nb-backlinks-body { display: none; }
.nb-backlinks.folded .nb-backlinks-arrow { transform: rotate(180deg); }
.nb-backlinks-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.nb-backlink-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border: 2px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.nb-backlink-item:hover { background: var(--yellow); }
.nb-backlink-title { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-backlink-time { font-size: 10px; opacity: .6; }
.nb-backlink-count { font-size: 12px; font-weight: 700; color: var(--primary); }

/* ---------- 顶栏图标按钮（置顶 / 收藏 / 大纲） ---------- */
.nb-iconbtn { padding: 6px 9px; }
.nb-iconbtn.active { background: var(--yellow); }
.nb-iconbtn[aria-pressed="true"] { background: var(--yellow); }

/* ---------- 历史版本弹窗 ---------- */
.nb-ver-wrap { display: grid; grid-template-columns: 212px 1fr; gap: 12px; min-height: 300px; }
.nb-ver-list { display: flex; flex-direction: column; gap: 4px; max-height: 384px; overflow-y: auto; padding-right: 4px; }
.nb-ver-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 2px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: left;
}
.nb-ver-item:hover { background: #fffbe8; }
.nb-ver-item.active { background: var(--yellow); font-weight: 800; }
.nb-ver-wc { font-size: 10px; opacity: .65; flex-shrink: 0; }
.nb-ver-preview {
  border: 3px solid var(--ink); border-radius: 0;
  background: #fbf7ee; max-height: 384px; overflow-y: auto;
}
.nb-ver-preview-inner { padding: 16px; font-size: 14px; line-height: 1.75; }
.nb-ver-tip { font-size: 11px; color: var(--text2); margin-top: 12px; line-height: 1.7; }
.nb-ver-empty { text-align: center; padding: 32px 10px; color: var(--text2); font-size: 13px; line-height: 2; }
.nb-ver-empty i { font-size: 26px; opacity: .5; }
.nb-ver-empty span { font-size: 11px; opacity: .8; }

/* ---------- 模板管理 ---------- */
.nb-tpl-manage { display: flex; flex-direction: column; gap: 6px; }
.nb-tpl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 3px solid var(--ink); border-radius: 0; background: #fff;
}
.nb-tpl-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.nb-tpl-builtin {
  font-size: 10px; padding: 1px 6px; font-weight: 800;
  border: 2px solid var(--ink); background: var(--cyan); color: var(--ink);
}
.nb-tpl-del {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink); cursor: pointer; font-size: 11px; padding: 0;
}
.nb-tpl-del:hover { background: var(--accent); color: #fff; }

/* ---------- 概览页：最近笔记的待办进度徽标 ---------- */
.ov-note-todo {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  margin-top: 5px; padding: 1px 6px;
  border: 2px solid var(--ink); border-radius: 6px;
  background: var(--purple); color: var(--ink);
  font-size: 10.5px; font-weight: 800;
}
.ov-note-todo.all-done { background: var(--green); }

/* =====================================================
   笔记第四步：代码高亮 / 图片工具 / Markdown 模式 / 图谱 / 加密
   ===================================================== */

/* ---------- 代码块：语言标签 + 复制按钮 ---------- */
.nb-code {
  position: relative; margin: 12px 0;
  border: 3px solid var(--ink); border-radius: 0;
  background: #1b1b1b; overflow: hidden;
}
.nb-code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px 5px 12px;
  background: #111; border-bottom: 3px solid var(--ink);
}
.nb-code-lang {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--yellow);
  font-family: 'Space Grotesk', monospace;
}
.nb-code-copy {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 2px solid #fff; border-radius: 0;
  background: transparent; color: #fff;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.nb-code-copy:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.nb-code-pre {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.7;
}
.nb-code-pre code.hljs { background: transparent; padding: 0; color: #e6e6e6; }

/* 编辑器内的代码块：语言标签用 ::before 从 data-nb-lang 取（Quill 结构不能改），
   真正的 token 着色在阅读模式与 Markdown 预览里做（见 .nb-code） */
.nb-quill-body .ql-editor .ql-code-block-container::before {
  content: attr(data-nb-lang);
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 2px 10px;
  background: #111; color: var(--yellow);
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  font-family: 'Space Grotesk', monospace;
}
/* attr() 读不到子元素的属性，故由 JS 把语言写到容器的 data-nb-lang 上；
   未设置时不显示标签 */
.nb-quill-body .ql-editor .ql-code-block-container:not([data-nb-lang])::before { content: none; }

/* 悬浮复制按钮（位于 Quill 之外，因此不会被 Quill 回滚） */
.nb-code-copy-float {
  position: absolute; display: none; align-items: center; gap: 6px;
  padding: 4px 9px; z-index: 31;
  border: 2px solid #fff; border-radius: 0;
  background: #111; color: #fff;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.nb-code-copy-float.show { display: inline-flex; }
.nb-code-copy-float:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.nb-code-copy-lang { font-size: 10px; opacity: .75; text-transform: uppercase; }

/* 编辑器内的代码块逐行 div：外观完全由外层 .ql-code-block-container 承担，
   这里必须清零内边距/边框/背景，否则会与容器样式叠加（出现双重边框与多余留白）。 */
.nb-quill-body .ql-editor .ql-code-block {
  margin: 0; padding: 0; background: transparent; border: none; border-radius: 0;
  color: #e6e6e6;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 13px;
}
/* 阅读模式里被高亮包裹后的行同样不需要额外样式 */
.nb-quill-body .ql-editor .nb-code .ql-code-block { border: none; padding: 0; margin: 0; }

/* ---------- 图片工具条 ---------- */
.nb-imgtools {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) scale(.9);
  display: none; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 7px 9px; max-width: calc(100% - 24px);
  border: 3px solid var(--ink); border-radius: 0;
  background: #fff; box-shadow: 4px 4px 0 var(--ink);
  z-index: 32;
}
.nb-imgtools.show { display: flex; transform: translateX(-50%) scale(1); }
.nb-imgtools-label { font-size: 11px; font-weight: 800; margin-right: 2px; }
.nb-imgtools button {
  min-width: 34px; height: 28px; padding: 0 7px;
  border: 2px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.nb-imgtools button:hover { background: var(--yellow); }
.nb-imgtools button.active { background: var(--ink); color: #fff; }
.nb-imgtools [data-imgdel]:hover { background: var(--accent); color: #fff; }
.nb-imgtools-sep { width: 2px; height: 18px; background: var(--ink); opacity: .25; margin: 0 3px; }

/* 正文里的图片：默认不超出宽度；对齐由内联样式控制 */
.nb-quill-body .ql-editor img { max-width: 100%; height: auto; border: 3px solid var(--ink); }
.nb-quill-body .ql-editor img.ql-align-center { display: block; margin: 0 auto; }

/* ---------- Markdown 模式（左右分栏） ---------- */
.nb-md { display: none; flex: 1; min-height: 0; min-width: 0; }
.nb-quill-wrap.md-mode .nb-quill-body,
.nb-quill-wrap.md-mode .nb-imgtools,
.nb-quill-wrap.md-mode .nb-wiki-picker { display: none; }
.nb-quill-wrap.md-mode .nb-md { display: flex; }
.nb-md-pane {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.nb-md-pane + .nb-md-pane { border-left: 3px solid var(--ink); }
.nb-md-head {
  padding: 6px 12px; flex-shrink: 0;
  border-bottom: 2px solid var(--ink);
  background: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; gap: 6px;
}
.nb-md-src {
  flex: 1; min-height: 0; width: 100%; resize: none;
  padding: 14px; border: none; outline: none;
  background: #fbf7ee; color: var(--ink);
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 14px; line-height: 1.75; tab-size: 2;
}
.nb-md-preview {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px;
  background: #fbf7ee; color: var(--ink);
  font-size: 15px; line-height: 1.8;
}
.nb-md-preview h1 { font-size: 26px; font-weight: 800; margin: 14px 0 10px; }
.nb-md-preview h2 { font-size: 21px; font-weight: 800; margin: 12px 0 8px; }
.nb-md-preview h3 { font-size: 17px; font-weight: 800; margin: 10px 0 6px; }
.nb-md-preview p { margin: 8px 0; }
.nb-md-preview blockquote {
  margin: 12px 0; padding: 8px 14px;
  border-left: 5px solid var(--yellow); background: #fffbe8; font-style: italic;
}
.nb-md-preview ul, .nb-md-preview ol { margin: 8px 0; padding-left: 24px; }
.nb-md-preview li { margin: 3px 0; }
.nb-md-preview li[data-list="unchecked"], .nb-md-preview li[data-list="checked"] { list-style: none; position: relative; padding-left: 6px; }
.nb-md-preview li[data-list="unchecked"]::before,
.nb-md-preview li[data-list="checked"]::before {
  content: ''; display: inline-block; width: 14px; height: 14px;
  margin-right: 7px; vertical-align: -2px;
  border: 3px solid var(--ink); background: #fff;
}
.nb-md-preview li[data-list="checked"]::before { background: var(--green); }
.nb-md-preview li[data-list="checked"] { text-decoration: line-through; opacity: .7; }
.nb-md-preview hr { border: none; border-top: 3px solid var(--ink); margin: 16px 0; }
.nb-md-preview code {
  background: #ece7db; padding: 1px 5px; font-family: monospace; font-size: 13px;
}
.nb-md-preview img { max-width: 100%; border: 3px solid var(--ink); }
.nb-md-empty { color: #a8a896; }

/* ---------- 附件区 ---------- */
.nb-attach { border-top: 3px solid var(--ink); background: #fff; flex-shrink: 0; }
.nb-attach.hidden { display: none; }
.nb-attach-head { padding: 6px 14px; font-size: 12px; font-weight: 800; }
.nb-attach-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.nb-attach-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px; border: 2px solid var(--ink); border-radius: 0; background: #fffbe8;
  font-size: 12px; font-weight: 700;
}
.nb-attach-item a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.nb-attach-item:hover { background: var(--yellow); }
.nb-attach-size { font-size: 10px; opacity: .6; }

/* ---------- 加密：锁面板 ---------- */
.nb-locked-title { font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; flex: 1; }
.nb-lockbox {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #fbf7ee;
}
.nb-lockbox-card {
  width: 100%; max-width: 380px; padding: 26px 22px;
  border: 3px solid var(--ink); border-radius: 0; background: #fff;
  box-shadow: 6px 6px 0 var(--ink); text-align: center;
}
.nb-lockbox-icon { font-size: 34px; color: var(--primary); display: block; margin-bottom: 12px; }
.nb-lockbox-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.nb-lockbox-tip { font-size: 12px; line-height: 1.75; color: var(--text2); margin-bottom: 14px; }
.nb-lockbox-card .input { margin-bottom: 12px; text-align: center; letter-spacing: .1em; }
.nb-lockbox-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.nb-lockbox-err { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--red); min-height: 16px; }

/* ---------- 插入图片弹窗 ---------- */
.nb-hint { font-size: 11px; color: var(--text2); margin-top: 6px; }
.nb-or { position: relative; text-align: center; font-size: 11px; color: var(--text2); }
.nb-or::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed rgba(17,17,17,.2);
}
.nb-or span { position: relative; background: var(--card); padding: 0 10px; }

/* ---------- 图谱视图 ---------- */
.nb-graph-layer {
  position: fixed; inset: 0; z-index: 120;
  background: #f5f1e8; display: flex; flex-direction: column;
}
.nb-graph-loading, .nb-graph-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: var(--text2); font-size: 14px;
}
.nb-graph-empty i { font-size: 40px; opacity: .5; }
.nb-graph-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; flex-shrink: 0;
  border-bottom: 3px solid var(--ink); background: #fff;
}
.nb-graph-title { font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; }
.nb-graph-stat { font-size: 12px; color: var(--text2); font-weight: 600; }
.nb-graph-actions { margin-left: auto; display: flex; gap: 6px; }
.nb-graph-actions button {
  width: 34px; height: 34px;
  border: 3px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink); cursor: pointer; font-size: 13px;
}
.nb-graph-actions button:hover { background: var(--yellow); }
.nb-graph-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 7px 14px; flex-shrink: 0;
  border-bottom: 2px solid rgba(17,17,17,.15); background: #fbf7ee;
  font-size: 11px; font-weight: 700;
}
.nb-graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.nb-graph-legend i { width: 11px; height: 11px; border: 2px solid var(--ink); display: inline-block; }
.nb-graph-svg { flex: 1; width: 100%; min-height: 0; touch-action: none; cursor: grab; display: block; }
.nb-graph-svg:active { cursor: grabbing; }
.nb-gnode { cursor: pointer; }
.nb-gnode.selected circle { stroke: var(--accent); stroke-width: 4; }
.nb-glabel {
  font-size: 11px; font-weight: 700; fill: var(--ink);
  pointer-events: none; user-select: none;
}
.nb-graph-tip {
  padding: 7px 14px; flex-shrink: 0;
  border-top: 2px solid rgba(17,17,17,.15);
  font-size: 11px; color: var(--text2); text-align: center;
}

.nb-quill-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* 阅读模式的只读渲染区：与编辑器互斥显示 */
.nb-read-view { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; background: #fbf7ee; }
.nb-read-view.hidden { display: none; }
.nb-read-view .ql-code-block-container {
  position: relative; margin: 12px 0;
  border: 3px solid var(--ink); background: #1b1b1b; overflow: hidden;
}
/* 阅读模式：隐藏编辑区与工具栏，只显示只读渲染区 */
.nb-quill-wrap.reading .nb-quill-body { display: none; }
.nb-quill-wrap.reading .nb-quill-toolbar { display: none; }
.nb-quill-wrap.reading .nb-md { display: none; }
.nb-quill-wrap.reading .nb-imgtools,
.nb-quill-wrap.reading .nb-code-copy-float { display: none !important; }
.nb-read-view { padding: 8px 26px 40px; line-height: 1.9; font-size: 17px; }
.nb-read-view h1 { font-size: 30px; font-weight: 800; margin: 20px 0 12px; }
.nb-read-view h2 { font-size: 24px; font-weight: 800; margin: 18px 0 10px; }
.nb-read-view h3 { font-size: 19px; font-weight: 800; margin: 14px 0 8px; }
.nb-read-view p { margin: 10px 0; }
.nb-read-view blockquote {
  margin: 12px 0; padding: 8px 14px;
  border-left: 5px solid var(--yellow); background: #fffbe8; font-style: italic;
}
.nb-read-view ul, .nb-read-view ol { margin: 10px 0; padding-left: 26px; }
.nb-read-view img { max-width: 100%; border: 3px solid var(--ink); }
.nb-quill-body { flex: 1; overflow-y: auto; background: #fbf7ee; -webkit-overflow-scrolling: touch; }
.nb-quill-body .ql-container { border: none; font-size: 16px; background: #fbf7ee; }
.nb-quill-body .ql-editor {
  min-height: 100%; padding: 24px;
  font-size: 16px; line-height: 1.8; color: var(--ink);
  font-family: inherit;
  background: #fbf7ee;
  /* 正文真正的滚动容器是 .ql-editor（不是外层 .nb-quill-body）。
     加上 iOS 惯性滚动，避免手机上滚动手感"发涩"。 */
  -webkit-overflow-scrolling: touch;
}
/* 阅读模式：隐藏工具栏、放大字号 */
.nb-quill-wrap.reading .nb-quill-toolbar { display: none; }
.nb-quill-wrap.reading .ql-editor { font-size: 18px; line-height: 2; padding: 40px 32px; max-width: 900px; margin: 0 auto; }

.nb-editor-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-top: 3px solid var(--ink);
  background: #fff; font-size: 12px; font-weight: 700; color: var(--text2);
}
.nb-footer-right { font-weight: 600; }
.nb-editor-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--text2);
}
.nb-editor-empty i { font-size: 34px; }
.nb-editor-empty p { font-size: 14px; }
.nb-readonly .ql-editor { color: var(--ink); }

/* ---------- Quill 工具栏 Neo-Brutalism 化 ---------- */
.nb-quill-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 8px 10px;
  border-bottom: 3px solid var(--ink);
  background: #fff;
}
.nb-quill-toolbar .ql-formats { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.nb-quill-toolbar button {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--ink) !important; border-radius: 0 !important;
  background: #fff !important; color: var(--ink) !important;
  cursor: pointer; padding: 0;
}
.nb-quill-toolbar button:hover { background: var(--yellow) !important; }
.nb-quill-toolbar button.ql-active {
  background: var(--yellow) !important; color: var(--ink) !important;
}
.nb-quill-toolbar button.ql-active .ql-stroke { stroke: var(--ink) !important; }
.nb-quill-toolbar button .ql-stroke { stroke: var(--ink) !important; }
.nb-quill-toolbar button .ql-fill { fill: var(--ink) !important; }

/* Quill 会把 <select> 替换成 .ql-picker（原来的 select 被 display:none 隐藏），
   因此样式要打在这些 picker 元素上，而不是 select 上。 */
.nb-quill-toolbar .ql-picker { position: relative; }
.nb-quill-toolbar .ql-picker-label {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 4px;
  border: 3px solid var(--ink) !important; border-radius: 0 !important;
  background: #fff !important; color: var(--ink) !important;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.nb-quill-toolbar .ql-picker-label:hover { background: var(--yellow) !important; }
.nb-quill-toolbar .ql-picker-label::before {
  /* Quill 用 data-label 承载当前值文字，这里确保它显示出来 */
  display: inline-block; line-height: 1; white-space: nowrap;
}
.nb-quill-toolbar .ql-picker-label .ql-stroke { stroke: var(--ink) !important; }
.nb-quill-toolbar .ql-picker-label .ql-fill { fill: var(--ink) !important; }

/* 标题选择器需要更宽以显示「标题 1 / 正文」 */
.nb-quill-toolbar .ql-picker.ql-header { width: 78px; }
.nb-quill-toolbar .ql-picker.ql-header .ql-picker-label { width: 78px; justify-content: space-between; }
/* 颜色/背景色需要为色块留出空间 */
.nb-quill-toolbar .ql-picker.ql-color,
.nb-quill-toolbar .ql-picker.ql-background { width: 38px; }
.nb-quill-toolbar .ql-picker.ql-color .ql-picker-label,
.nb-quill-toolbar .ql-picker.ql-background .ql-picker-label { width: 38px; }
/* 对齐是纯图标，窄一些即可 */
.nb-quill-toolbar .ql-picker.ql-align { width: 32px; }
.nb-quill-toolbar .ql-picker.ql-align .ql-picker-label { width: 32px; }

/* 下拉选项面板 */
.nb-quill-toolbar .ql-picker-options {
  border: 3px solid var(--ink) !important; border-radius: 0 !important;
  background: #fff !important; padding: 6px !important;
  box-shadow: 4px 4px 0 var(--ink);
  min-width: 76px;
}
.nb-quill-toolbar .ql-picker-item {
  border-radius: 0 !important; color: var(--ink);
  font-size: 12px; font-weight: 700; padding: 4px 6px;
}
.nb-quill-toolbar .ql-picker-item:hover { background: var(--yellow) !important; }
.nb-quill-toolbar .ql-picker-item.ql-selected { background: var(--yellow) !important; }

/* ---------- Quill 内容区样式（覆盖默认圆角/柔和阴影） ---------- */
.nb-quill-body .ql-editor h1 { font-size: 28px; font-weight: 800; margin: 16px 0 8px; }
.nb-quill-body .ql-editor h2 { font-size: 22px; font-weight: 800; margin: 14px 0 8px; }
.nb-quill-body .ql-editor h3 { font-size: 18px; font-weight: 800; margin: 12px 0 6px; }
.nb-quill-body .ql-editor p { margin: 6px 0; }
.nb-quill-body .ql-editor blockquote {
  border-left: 4px solid var(--yellow);
  background: #fffbe8;
  padding: 6px 14px; margin: 10px 0;
  font-style: italic; color: var(--ink);
}
/* 代码块：Quill 2 的容器（每行一个 .ql-code-block 装在里面）。
   注意这里的背景色与第四步的样式必须保持一致，否则两条规则会互相覆盖
   （历史上这里有 #111 与 #1b1b1b 两套值，导致实际渲染与预期不符）。 */
.nb-quill-body .ql-editor pre.ql-syntax,
.nb-quill-body .ql-editor .ql-code-block-container {
  background: #1b1b1b; color: #fff;
  border: 3px solid var(--ink); border-radius: 0;
  padding: 12px 14px;
  margin: 12px 0;
  position: relative;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6;
}
/* 语言标签占位：有标签时为顶部留出空间 */
.nb-quill-body .ql-editor .ql-code-block-container[data-nb-lang] { padding-top: 20px; }
.nb-quill-body .ql-editor code {
  background: #e9e5d8; border: 2px solid var(--ink); border-radius: 0;
  padding: 0 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
}
.nb-quill-body .ql-editor a { color: var(--primary); text-decoration: underline; font-weight: 700; }
.nb-quill-body .ql-editor img { max-width: 100%; border: 3px solid var(--ink); border-radius: 0; }
.nb-quill-body .ql-editor hr { border: none; border-top: 3px solid var(--ink); margin: 16px 0; }

/* 待办清单：方形复选框 + 勾选后删除线 */
.nb-quill-body .ql-editor ul[data-checked="true"] > li::before,
.nb-quill-body .ql-editor ul[data-checked="false"] > li::before {
  content: ''; display: inline-block;
  width: 14px; height: 14px; margin-right: 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: #fff; vertical-align: middle;
}
.nb-quill-body .ql-editor li[data-list="checked"]::before,
.nb-quill-body .ql-editor li[data-list="unchecked"]::before {
  content: ''; display: inline-block;
  width: 14px; height: 14px; margin-right: 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: #fff; vertical-align: middle;
}
.nb-quill-body .ql-editor li[data-list="checked"]::before {
  background: var(--green);
  background-image: linear-gradient(45deg, transparent 40%, var(--ink) 40%, var(--ink) 60%, transparent 60%),
                    linear-gradient(-45deg, transparent 40%, var(--ink) 40%, var(--ink) 60%, transparent 60%);
}
.nb-quill-body .ql-editor li[data-list="checked"] > .ql-ui::before,
.nb-quill-body .ql-editor li[data-list="unchecked"] > .ql-ui::before {
  border-radius: 0 !important;
  border: 3px solid var(--ink) !important;
}
.nb-quill-body .ql-editor li[data-list="checked"] {
  text-decoration: line-through; opacity: .6;
}
.nb-quill-body .ql-editor li[data-list="checked"] > .ql-ui::before { background-color: var(--green) !important; }

/* ---------- 模板选择 ---------- */
.nb-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 4px; }
.nb-tpl {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.nb-tpl i { font-size: 16px; }
.nb-tpl:hover { background: var(--hover); }
.nb-tpl.active { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--ink); }

/* ==========================================================================
   习惯健康模块（Neo-Brutalism）
   设计口径：3px 黑边框 · 4px 硬阴影 · 零圆角 · 高饱和配色 · 奶油底 #fbf7ee
   热力图语义色：完成 #00b894 / 部分 #7bed9f / 请假 #ffa502 / 未完成 #ff6b81
                休息 #dfe6e9 / 可选 #e8eef7 / 未来 #f1f2f6
   ========================================================================== */

/* ---------- 页面外壳与 Tab ---------- */
/* 用 minmax(0, 1fr) 而不是默认的 auto 列：
   默认 auto 列的宽度下限是子项的 min-content，只要有一个横向可滚动的条
   （如分类筛选条里 7 个 chip 共 530px），整列就会被撑到 530px，超出的部分
   直接溢出到视口外。minmax(0,1fr) 允许列收缩到容器宽度，滚动交给内部容器。 */
.hb-wrap { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
#hb-body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.hb-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; min-height: 44px;
  border: 3px solid var(--ink); border-radius: 0; background: var(--card);
  color: var(--ink); font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, background .12s;
}
.hb-tab:hover { background: var(--hover); }
.hb-tab.active { background: var(--yellow); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- 今日完成率大卡片 ---------- */
.hb-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hb-ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.hb-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.hb-ring-bg { fill: none; stroke: #e9e5d8; stroke-width: 10; }
.hb-ring-fg { fill: none; stroke-width: 10; transition: stroke-dashoffset .5s ease; }
.hb-ring-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
}
.hb-hero-info { flex: 1; min-width: 200px; }
.hb-hero-title { font-size: 22px; font-weight: 900; }
.hb-hero-sub { font-size: 13px; color: var(--text2); margin-top: 2px; }
.hb-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hb-tag {
  font-size: 12px; font-weight: 700; padding: 3px 8px;
  border: 2px solid var(--ink); background: #fff; border-radius: 0;
}
.hb-tag-relax { background: #e8faf2; }
.hb-hero-side { flex-shrink: 0; min-width: 190px; }
.hb-level {
  border: 3px solid var(--ink); background: #fff8dc; padding: 10px 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hb-level-top { font-size: 13px; font-weight: 800; }
.hb-level-top b { color: var(--accent); font-size: 15px; }
.hb-level-bar { height: 10px; border: 2px solid var(--ink); background: #fff; margin: 6px 0 4px; }
.hb-level-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.hb-level-sub { font-size: 11px; color: var(--text2); }

/* ---------- 工具栏（搜索 / 排序 / 添加） ---------- */
.hb-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hb-search { position: relative; flex: 1; min-width: 180px; }
.hb-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text2); font-size: 13px; pointer-events: none;
}
.hb-search .input { padding-left: 34px; }
.hb-sort { max-width: 150px; }
.hb-add { white-space: nowrap; }

/* ---------- 分类筛选条 ---------- */
/* min-width:0 + max-width:100% 是关键：否则内容宽度会向上撑大父级 min-content（见文件首注释） */
.hb-catbar {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch;
}
.hb-catchip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 13px; min-height: 38px;
  border: 3px solid var(--ink); background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .1s;
}
.hb-catchip:hover { background: var(--hover); }
.hb-catchip.active { background: var(--chip, var(--yellow)); transform: translate(2px, 2px); box-shadow: none; }

/* ---------- 分组 ---------- */
.hb-groups { display: grid; gap: 16px; }
.hb-group { border: 3px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--ink); border-radius: 0; }
.hb-group-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; background: #fff; border: none; border-bottom: 3px solid var(--ink);
  font-weight: 900; font-size: 14px; cursor: pointer; text-align: left; color: var(--ink);
}
.hb-group-bar { width: 8px; height: 20px; border: 2px solid var(--ink); flex-shrink: 0; }
.hb-group-icon { font-size: 17px; }
.hb-group-name { flex: 1; }
.hb-group-count {
  font-size: 12px; font-weight: 800; padding: 2px 8px;
  border: 2px solid var(--ink); background: #f1f2f6;
}
.hb-group-chev { color: var(--text2); font-size: 12px; }
.hb-group.collapsed .hb-group-body { display: none; }
.hb-group.collapsed .hb-group-head { border-bottom: none; }
.hb-group-body { display: grid; }
.hb-noresult { text-align: center; color: var(--text2); padding: 40px 20px; }

/* ---------- 习惯行 ---------- */
/* 布局意图：
   桌面  → 一行放下 icon / 名称+频率 / 连续 / 控件 / 状态
   手机  → 两行：①icon + 名称+频率 + 连续  ②控件 + 状态
   状态文字不能占满整行（否则会多出一行、行高从 ~64px 涨到 ~120px）。 */
.hb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 2px solid #e4dfcf; flex-wrap: wrap;
}
.hb-group-body .hb-row:last-child { border-bottom: none; }
.hb-row.is-done { background: #f3fdf8; }
.hb-row.is-rest { opacity: .62; }
.hb-icon {
  width: 42px; height: 42px; flex-shrink: 0; border: 3px solid var(--ink); border-radius: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  cursor: pointer; box-shadow: 2px 2px 0 var(--ink); padding: 0;
}
.hb-icon:active { transform: translate(2px, 2px); box-shadow: none; }
.hb-main { flex: 1 1 auto; min-width: 150px; cursor: pointer; }
.hb-name { font-weight: 800; font-size: 15px; line-height: 1.35; }
/* 频率/目标这行必须稳定为单行：一旦折行，.hb-main 会从 ~38px 涨到 ~62px，
   整个习惯行高度跟着从 ~100px 变成 ~130px。超出部分用省略号，完整内容在 title 里。 */
.hb-meta {
  font-size: 11.5px; color: var(--text2); margin-top: 3px;
  display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; line-height: 1.3;
}
.hb-meta > span { white-space: nowrap; }
.hb-meta > .hb-target { overflow: hidden; text-overflow: ellipsis; }
.hb-dot { opacity: .5; }
.hb-streak {
  display: inline-flex; align-items: baseline; gap: 3px; flex-shrink: 0;
  font-size: 14px; font-weight: 900; color: var(--text2); padding: 3px 6px;
}
.hb-streak.on { color: #ffa502; }
.hb-streak i { font-size: 12px; }
.hb-streak-sub { font-size: 10px; color: #b08a2e; font-weight: 700; margin-left: 3px; }
.hb-ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.hb-row-state {
  font-size: 11px; font-weight: 700; color: var(--text2);
  flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap;
}
.hb-row-state.done { color: var(--green-text); }
.hb-row-state.skipped { color: #b07000; }
.hb-row-state.rest { color: var(--text2); }
.hb-row-state.optional { color: var(--primary); }
.hb-row-state.due { color: var(--red); }

/* ---------- 打卡控件：勾选型 ---------- */
.hb-check {
  width: 32px; height: 32px; border: 3px solid var(--ink); background: var(--card);
  color: transparent; font-size: 15px; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 2px 2px 0 var(--ink); transition: background .12s, transform .08s;
}
.hb-check:hover { background: var(--hover); }
.hb-check.on { background: var(--green); color: var(--ink); }
.hb-check:active { transform: translate(2px, 2px); box-shadow: none; }

/* ---------- 打卡控件：计数型 ---------- */
.hb-count { display: inline-flex; align-items: center; gap: 6px; }
.hb-cbtn {
  width: 32px; height: 32px; border: 3px solid var(--ink); background: var(--card);
  font-size: 16px; font-weight: 900; cursor: pointer; border-radius: 0; color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink); line-height: 1; padding: 0;
}
.hb-cbtn:hover { background: var(--yellow); }
.hb-cbtn:active { transform: translate(2px, 2px); box-shadow: none; }
.hb-count-val { font-size: 15px; min-width: 62px; text-align: center; font-weight: 700; }
.hb-count-val b { font-size: 18px; font-weight: 900; }
.hb-count-val i { font-style: normal; color: var(--text2); font-size: 12px; }
.hb-count-val em { font-style: normal; color: var(--text2); font-size: 11px; margin-left: 3px; }
.hb-count.on .hb-count-val b { color: var(--green-text); }
.hb-count.on .hb-cbtn { background: #e8faf2; }
.hb-quick {
  font-size: 11px; font-weight: 800; padding: 4px 8px; min-height: 30px;
  border: 2px solid var(--ink); background: #fff; cursor: pointer; border-radius: 0;
}
.hb-quick:hover { background: var(--yellow); }

/* ---------- 打卡控件：数值型 ---------- */
.hb-num {
  min-width: 148px; border: 3px solid var(--ink); background: var(--card);
  padding: 5px 9px; cursor: pointer; border-radius: 0; text-align: left;
  box-shadow: 2px 2px 0 var(--ink);
}
.hb-num.on { background: #e8faf2; }
.hb-num-val { display: block; font-size: 14px; font-weight: 700; }
.hb-num-val b { font-size: 17px; font-weight: 900; }
.hb-num-val i { font-style: normal; color: var(--text2); font-size: 12px; }
.hb-num-val em { font-style: normal; color: var(--text2); font-size: 11px; margin-left: 2px; }
.hb-bar { display: block; height: 8px; border: 2px solid var(--ink); background: #fff; margin-top: 4px; }
.hb-bar i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.hb-bar.lg { height: 12px; margin-top: 8px; }
.hb-num.on .hb-bar i { background: var(--green); }

/* ---------- 打卡控件：计时型 ---------- */
.hb-timerbtn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  border: 3px solid var(--ink); background: var(--card); padding: 5px 12px;
  font-weight: 800; font-size: 13px; cursor: pointer; border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
}
.hb-timerbtn:hover { background: var(--yellow); }
.hb-timerbtn.on { background: var(--green); }

/* ---------- 休息 / 请假态 ---------- */
.hb-rest {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text2); font-weight: 700;
  padding: 8px 12px; border: 2px dashed #c9c3ad; background: #f6f4ec;
}
.hb-skipbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: #7a4d00;
  padding: 7px 12px; border: 3px solid var(--ink); background: #ffd08a; cursor: pointer; border-radius: 0;
}
.hb-skipbadge:hover { background: #ffc06a; }

/* ---------- 热力图 ---------- */
.hb-heat-card { display: grid; gap: 12px; }
.hb-heat-month { overflow-x: auto; min-width: 0; max-width: 100%; }
.hb-heat-dow { display: grid; grid-template-columns: repeat(7, 20px); gap: 4px; margin-bottom: 5px; }
.hb-heat-dow span { font-size: 10px; font-weight: 800; color: var(--text2); text-align: center; }
.hb-heat-grid { display: grid; grid-template-columns: repeat(7, 20px); gap: 4px; }
.hb-heatwrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.hb-year { display: grid; gap: 4px; min-width: 700px; }
.hb-year-head { display: flex; align-items: flex-end; gap: 6px; }
.hb-year-corner { width: 44px; flex-shrink: 0; }
.hb-year-days { display: grid; grid-template-columns: repeat(31, 14px); gap: 4px; }
.hb-year-days span { font-size: 9px; color: var(--text2); text-align: center; height: 12px; }
.hb-year-row { display: flex; align-items: center; gap: 6px; }
.hb-year-month { width: 44px; flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--text2); }
.hb-year-cells { display: grid; grid-template-columns: repeat(31, 14px); gap: 4px; }

/* 格子：14x14 · 3px 黑边 · 零圆角 */
.hb-cell {
  width: 14px; height: 14px; border: 3px solid var(--ink); border-radius: 0;
  background: #f1f2f6; padding: 0; display: block; cursor: pointer;
  transition: transform .1s;
}
.hb-cell:hover { transform: scale(1.35); z-index: 2; position: relative; }
.hb-cell-blank { border-color: transparent; background: transparent; cursor: default; }
.hb-cell-blank:hover { transform: none; }
.hb-cell.fill-done { background: #00b894; }
.hb-cell.fill-partial { background: #7bed9f; }
.hb-cell.fill-skipped { background: #ffa502; }
.hb-cell.fill-due { background: #ff6b81; }
.hb-cell.fill-rest { background: #dfe6e9; }
.hb-cell.fill-optional { background: #e8eef7; }
.hb-cell.fill-future { background: #f1f2f6; }
.hb-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.hb-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text2); font-weight: 700; }
.hb-legend-item .hb-cell { cursor: default; }
.hb-legend-item .hb-cell:hover { transform: none; }
.hb-year-nav { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 14px; }
.hb-navbtn {
  width: 32px; height: 32px; border: 3px solid var(--ink); background: var(--card);
  cursor: pointer; border-radius: 0; box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
}
.hb-navbtn:hover:not(:disabled) { background: var(--yellow); }
.hb-navbtn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

/* ---------- 统计 Tab ---------- */
.hb-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.hb-stat-card {
  border: 3px solid var(--ink); background: var(--card); padding: 14px 16px;
  box-shadow: 4px 4px 0 var(--ink); position: relative; overflow: hidden;
}
.hb-stat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: var(--c, var(--yellow)); border-right: 3px solid var(--ink);
}
.hb-stat-label { font-size: 12px; font-weight: 800; color: var(--text2); }
.hb-stat-value { font-size: 28px; font-weight: 900; line-height: 1.15; }
.hb-stat-value em { font-style: normal; font-size: 13px; color: var(--text2); margin-left: 2px; }
.hb-stat-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
.hb-level-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff8dc;
}
.hb-level-strip-left { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; }
.hb-level-strip-left b { font-size: 20px; color: var(--accent); }
.hb-level-strip-bar { flex: 1; min-width: 140px; height: 14px; border: 3px solid var(--ink); background: #fff; }
.hb-level-strip-bar i { display: block; height: 100%; background: var(--accent); }
.hb-level-strip-right { font-size: 12px; color: var(--text2); font-weight: 700; }
.hb-chart-card { display: grid; gap: 10px; }
.hb-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb-chart-title { font-weight: 900; font-size: 15px; }
.hb-chart-sub { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.hb-chart-box { position: relative; width: 100%; }
.hb-rank-card { display: grid; gap: 10px; }
.hb-rank-list { display: grid; gap: 8px; }
.hb-rank-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border: 2px solid var(--ink); background: #fff; cursor: pointer;
}
.hb-rank-row:hover { background: var(--hover); }
.hb-rank-no { width: 20px; font-weight: 900; font-size: 12px; color: var(--text2); text-align: center; flex-shrink: 0; }
.hb-rank-icon {
  width: 28px; height: 28px; border: 2px solid var(--ink); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.hb-rank-name { flex: 1; min-width: 70px; font-weight: 800; font-size: 13px; }
.hb-rank-bar { flex: 1.4; min-width: 80px; height: 12px; border: 2px solid var(--ink); background: #f1f2f6; }
.hb-rank-bar i { display: block; height: 100%; }
.hb-rank-val { font-weight: 900; font-size: 13px; width: 42px; text-align: right; }
.hb-rank-sub { font-size: 11px; color: var(--text2); width: 46px; text-align: right; }
.hb-top-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.hb-top-card {
  border: 3px solid var(--ink); background: #fff; padding: 12px; text-align: center;
  box-shadow: 3px 3px 0 var(--ink); position: relative;
}
.hb-top-medal { position: absolute; top: 6px; left: 8px; font-size: 13px; font-weight: 900; color: var(--text2); }
.hb-top-icon {
  width: 38px; height: 38px; margin: 4px auto 6px; border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.hb-top-name { font-weight: 800; font-size: 13px; }
.hb-top-streak { font-weight: 900; color: #ffa502; font-size: 14px; margin-top: 3px; }
.hb-top-sub { font-size: 10.5px; color: var(--text2); margin-top: 2px; }
.hb-reports { display: grid; gap: 12px; }
.hb-report { display: grid; gap: 10px; }
.hb-report-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hb-report-month { font-weight: 900; font-size: 15px; }
.hb-report-rate { font-size: 22px; font-weight: 900; }
.hb-report-delta { font-size: 12px; font-weight: 800; padding: 3px 8px; border: 2px solid var(--ink); }
.hb-report-delta.up { background: #e8faf2; color: var(--green-text); }
.hb-report-delta.down { background: #ffe9ec; color: var(--red); }
.hb-report-delta.flat { background: #f1f2f6; color: var(--text2); }
.hb-report-body { display: grid; gap: 6px; }
.hb-report-item { display: flex; gap: 10px; font-size: 12.5px; align-items: baseline; }
.hb-report-k {
  flex-shrink: 0; width: 68px; font-weight: 800; color: var(--text2);
  font-size: 11px; text-transform: none;
}
.hb-report-k.up { color: var(--green-text); }
.hb-report-k.down { color: var(--red); }

/* ---------- 详情页 ---------- */
/* 同样用 minmax(0,1fr)：年视图内含 min-width:700px 的网格，默认 auto 列会被撑宽 */
.hb-detail { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.hb-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb-back {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
  border: 3px solid var(--ink); background: var(--card); padding: 6px 14px;
  font-weight: 800; font-size: 13px; cursor: pointer; border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
}
.hb-back:hover { background: var(--yellow); }
.hb-detail-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-danger { border-color: var(--ink) !important; background: #ffe9ec !important; color: var(--red) !important; }
.hb-danger:hover { background: #ffd3d9 !important; }
.hb-detail-hero { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.hb-detail-icon {
  width: 60px; height: 60px; border: 3px solid var(--ink); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hb-detail-title { flex: 1; min-width: 180px; }
.hb-detail-title h2 { font-size: 21px; font-weight: 900; }
.hb-detail-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hb-chip-sm {
  font-size: 11px; font-weight: 800; padding: 3px 8px;
  border: 2px solid var(--ink); background: #fff;
}
.hb-chip-arc { background: #f1f2f6; }
.hb-period { margin-top: 8px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-period b { font-size: 15px; }
.hb-period-bar { display: inline-block; width: 110px; height: 10px; border: 2px solid var(--ink); background: #fff; }
.hb-period-bar i { display: block; height: 100%; background: var(--primary); }
.hb-bignums { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-bignum {
  min-width: 92px; border: 3px solid var(--ink); background: #fff; padding: 10px 12px;
  text-align: center; box-shadow: 3px 3px 0 var(--ink);
}
.hb-bignum i { font-style: normal; font-size: 15px; }
.hb-bignum b { display: block; font-size: 26px; font-weight: 900; line-height: 1.1; }
.hb-bignum span { font-size: 11px; color: var(--text2); font-weight: 700; }
.hb-bignum.cur b { color: #ffa502; }
.hb-bignum.long b { color: #c9a227; }
.hb-bignum.total b { color: #1e90ff; }
.hb-today-card { display: grid; gap: 10px; }
.hb-today-label { font-size: 12px; font-weight: 800; color: var(--text2); }
.hb-today-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hb-today-note { font-size: 12.5px; color: var(--text2); }
.hb-badge-card { display: grid; gap: 12px; }
.hb-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.hb-badge {
  width: 104px; border: 3px solid var(--ink); background: #fff; padding: 12px 8px;
  text-align: center; box-shadow: 3px 3px 0 var(--ink);
}
.hb-badge.off { opacity: .42; filter: grayscale(1); }
.hb-badge.on { background: #fff8dc; }
.hb-badge-icon {
  width: 44px; height: 44px; margin: 0 auto 7px; border: 3px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 21px; background: #fff;
}
.hb-badge-name { font-weight: 900; font-size: 12.5px; }
.hb-badge-sub { font-size: 10.5px; color: var(--text2); margin-top: 3px; }
.hb-notes-card { display: grid; gap: 12px; }
.hb-notes { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.hb-note-row {
  display: flex; gap: 10px; align-items: flex-start;
  border: 2px solid var(--ink); background: #fff; padding: 8px 10px;
}
.hb-note-date { font-size: 11px; font-weight: 900; color: var(--text2); flex-shrink: 0; }
.hb-note-txt { flex: 1; font-size: 13px; }
.hb-mini-empty { font-size: 12.5px; color: var(--text2); padding: 12px 0; }
.hb-diary-card { display: grid; gap: 12px; }
.hb-diaries { display: grid; gap: 12px; }
.hb-diary-row { border: 2px solid var(--ink); background: #fff; padding: 10px 12px; position: relative; }
.hb-diary-date { font-size: 11px; font-weight: 900; color: var(--text2); margin-bottom: 6px; }
.hb-diary-body { font-size: 13.5px; line-height: 1.75; }
.hb-diary-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.hb-md p { margin: 0 0 6px; }
.hb-md ul { margin: 0 0 6px; padding-left: 20px; }
.hb-md li { margin-bottom: 2px; }
.hb-md h1, .hb-md h2, .hb-md h3 { font-size: 15px; font-weight: 900; margin: 8px 0 4px; }
.hb-md code { background: #f1f2f6; padding: 1px 4px; border: 1px solid #c9c3ad; font-size: 12px; }
.hb-md blockquote { border-left: 4px solid var(--ink); padding-left: 10px; color: var(--text2); margin: 0 0 6px; }

/* ---------- 日操作面板 ---------- */
.hb-sheet-status {
  font-size: 13px; font-weight: 800; padding: 8px 12px;
  border: 2px solid var(--ink); background: #fff8dc; margin-bottom: 10px;
}
.hb-sheet-note { font-size: 12.5px; color: var(--text2); margin-bottom: 10px; }
.hb-sheet-actions { display: grid; gap: 8px; }
.hb-sheet-actions .btn { justify-content: center; min-height: 40px; }

/* ---------- 空状态 ---------- */
.hb-empty { text-align: center; padding: 46px 20px; }
.hb-empty-sm { padding: 34px 20px; }
.hb-empty-emoji { font-size: 44px; line-height: 1; }
.hb-empty-title { font-size: 17px; font-weight: 900; margin-top: 12px; }
.hb-empty-sub { font-size: 13px; color: var(--text2); margin-top: 6px; }
.hb-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.hb-empty-tpls { margin-top: 22px; }
.hb-empty-tpl-title { font-size: 12px; font-weight: 800; color: var(--text2); margin-bottom: 8px; }
.hb-tpl-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hb-tpl-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
  border: 3px solid var(--ink); background: #fff; padding: 5px 12px;
  font-weight: 800; font-size: 13px; cursor: pointer; border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
}
.hb-tpl-chip:hover { background: var(--hover); }
.hb-tpl-chip span {
  width: 24px; height: 24px; border: 2px solid var(--ink); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px;
}
.hb-arch-note {
  display: flex; gap: 9px; align-items: flex-start; background: #f1f2f6;
  font-size: 12.5px; color: var(--text2); line-height: 1.7;
}
.hb-row.is-archived { background: #fbfaf6; }
.hb-arch-actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 6px; }

/* ---------- 提醒条 ---------- */
.hb-remindbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 3px solid var(--ink); background: var(--yellow); padding: 10px 14px;
  box-shadow: 3px 3px 0 var(--ink); font-size: 13px; font-weight: 800;
}
.hb-remindbar > i { font-size: 15px; }
.hb-remindbar > span { flex: 1; min-width: 160px; }
.hb-remind-x {
  border: 2px solid var(--ink); background: #fff; width: 28px; height: 28px;
  cursor: pointer; border-radius: 0; color: var(--ink);
}

/* ---------- 计时器 ---------- */
.hb-timer { text-align: center; display: grid; gap: 14px; }
.hb-timer-display { font-size: 52px; font-weight: 900; letter-spacing: 2px; line-height: 1.1; }
.hb-timer-display.reached { color: var(--green-text); }
.hb-timer-sub { font-size: 13px; color: var(--text2); font-weight: 700; }
.hb-timer-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hb-timer-hint { font-size: 11.5px; color: var(--text2); }

/* ---------- 表单弹窗 ---------- */
.hb-form { display: grid; gap: 14px; }
.hb-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hb-form-col { flex: 1; min-width: 130px; }
.hb-form-col.hidden, .hb-icon-grid.hidden { display: none !important; }
.hb-form-iconcol { flex: 0 0 88px; min-width: 88px; }
.hb-icon-pick {
  width: 56px; height: 48px; border: 3px solid var(--ink); cursor: pointer;
  font-size: 24px; border-radius: 0; box-shadow: 2px 2px 0 var(--ink);
}
.hb-icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px;
  border: 3px solid var(--ink); background: #fff; padding: 10px;
}
.hb-icon-opt {
  height: 38px; border: 2px solid transparent; background: #f8f6f0;
  font-size: 19px; cursor: pointer; border-radius: 0;
}
.hb-icon-opt:hover { border-color: var(--ink); background: var(--yellow); }
.hb-color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-color {
  width: 34px; height: 34px; border: 3px solid var(--ink); cursor: pointer;
  border-radius: 0; transition: transform .1s;
}
.hb-color.active { transform: scale(1.14); box-shadow: 0 0 0 3px #fff inset, 0 0 0 5px var(--ink); }
.hb-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; }
.hb-type {
  border: 3px solid var(--ink); background: #fff; padding: 10px 8px; cursor: pointer;
  text-align: left; border-radius: 0; display: grid; gap: 3px; color: var(--ink);
}
.hb-type:hover { background: var(--hover); }
.hb-type.active { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--ink); }
.hb-type i { font-size: 15px; }
.hb-type b { font-size: 13px; }
.hb-type span { font-size: 10.5px; color: var(--text2); }
.hb-freq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.hb-freqopt {
  border: 3px solid var(--ink); background: #fff; padding: 9px 10px; cursor: pointer;
  text-align: left; border-radius: 0; display: grid; gap: 2px; color: var(--ink);
}
.hb-freqopt:hover { background: var(--hover); }
.hb-freqopt.active { background: var(--cyan); box-shadow: inset 0 0 0 3px var(--ink); }
.hb-freqopt b { font-size: 13px; }
.hb-freqopt span { font-size: 10.5px; color: var(--text2); }
.hb-sub { min-height: 4px; }
.hb-freq-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.hb-mini { max-width: 80px; }
.hb-week-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-week {
  min-width: 46px; min-height: 36px; border: 3px solid var(--ink); background: #fff;
  font-size: 12px; font-weight: 800; cursor: pointer; border-radius: 0; color: var(--ink);
}
.hb-week:hover { background: var(--hover); }
.hb-week.on { background: var(--green); box-shadow: inset 0 0 0 3px var(--ink); }
.hb-cat-pick { display: flex; gap: 8px; }
.hb-cat-pick .input { flex: 1; }
.hb-remind { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hb-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.hb-remind .input[type="time"] { max-width: 130px; }
.hb-remind #hb-f-rem-text { flex: 1; min-width: 160px; }
.hb-form-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 2px dashed #c9c3ad; }
.hb-note-input { width: 100%; resize: vertical; }
.hb-note-pref { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); margin-top: 10px; }
.hb-num-summary { border: 3px solid var(--ink); background: #fff8dc; padding: 12px; margin-bottom: 14px; }
.hb-num-summary > div { font-size: 26px; font-weight: 900; }
.hb-num-summary > div em { font-style: normal; font-size: 13px; color: var(--text2); margin-left: 3px; }
.hb-num-summary > span { font-size: 12px; color: var(--text2); }
.hb-num-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hb-chip {
  border: 2px solid var(--ink); background: #fff; padding: 5px 11px; min-height: 32px;
  font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 0;
}
.hb-chip:hover { background: var(--yellow); }
.hb-num-set { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); margin-top: 12px; }
.hb-cat-list { display: grid; gap: 8px; margin-bottom: 14px; }
.hb-cat-row { display: flex; align-items: center; gap: 9px; border: 2px solid var(--ink); background: #fff; padding: 7px 10px; }
.hb-cat-emoji { width: 28px; height: 28px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.hb-cat-name { flex: 1; font-weight: 800; font-size: 13px; }
.hb-cat-n { font-size: 11px; color: var(--text2); }
.hb-cat-add { display: flex; gap: 8px; }
.hb-cat-add .input { flex: 1; }

/* ---------- 模板选择 ---------- */
.hb-tpl-group { margin-bottom: 16px; }
.hb-tpl-title { font-size: 12.5px; font-weight: 900; color: var(--text2); margin-bottom: 8px; }
.hb-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.hb-tpl-card { position: relative; }
.hb-tpl-pick {
  width: 100%; border: 3px solid var(--ink); background: #fff; padding: 10px;
  cursor: pointer; border-radius: 0; text-align: left; display: grid; gap: 5px;
  box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
}
.hb-tpl-pick:hover { background: var(--hover); }
.hb-tpl-emoji {
  width: 30px; height: 30px; border: 2px solid var(--ink); display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px;
}
.hb-tpl-pick b { font-size: 13px; }
.hb-tpl-pick em { font-style: normal; font-size: 10.5px; color: var(--text2); }
.hb-tpl-del {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border: 2px solid var(--ink); background: var(--accent); color: #fff;
  cursor: pointer; border-radius: 0; font-size: 11px; line-height: 1; padding: 0;
}
.hb-diary-editor { display: grid; gap: 10px; }
.hb-diary-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hb-diary-hint { font-size: 11px; color: var(--text2); margin-left: 4px; }
.hb-diary-ta { width: 100%; resize: vertical; line-height: 1.7; }
.hb-diary-preview-label { font-size: 11px; font-weight: 900; color: var(--text2); }
.hb-diary-preview { border: 3px solid var(--ink); background: #fff; padding: 12px; min-height: 60px; font-size: 13.5px; }

/* ========== 响应式：移动端 ========== */
@media (max-width: 767px) {
  .hb-tabs { gap: 8px; }
  .hb-tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13px; }
  .hb-hero { gap: 14px; }
  .hb-hero-side { width: 100%; min-width: 0; }
  .hb-hero-title { font-size: 19px; }
  .hb-stat-value { font-size: 24px; }
  .hb-detail-hero { gap: 14px; }
  .hb-bignum { flex: 1; min-width: 0; padding: 9px 6px; }
  .hb-bignum b { font-size: 22px; }
  .hb-bignum span { font-size: 10px; }
  .hb-badges { gap: 8px; }
  .hb-badge { width: calc(50% - 4px); }

  /* 移动端习惯行：目标是「两行」——①图标+名称+连续 ②控件+状态。
     关键在 .hb-main 必须能收缩（min-width:0），否则名称会把它撑到 min-content，
     把「连续」和打卡控件依次挤到下一行，一行习惯会变成四行（实测高 168px）。 */
  /* 移动端习惯行改为 grid 精确排两行：
       行1  [图标] 名称+频率        连续🔥
       行2  [图标] 打卡控件        状态
     用 flex 很难稳定做到这点（元素宽度随类型变化，容易变成 3~5 行），
     grid 的模板区域可以固定住两行结构。 */
  .hb-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon main   streak"
      "icon ctrl   state";
    gap: 6px 10px; padding: 10px 12px; align-items: center;
  }
  .hb-icon { grid-area: icon; width: 40px; height: 40px; font-size: 19px; }
  .hb-main { grid-area: main; min-width: 0; }
  .hb-streak { grid-area: streak; flex: 0 0 auto; font-size: 13px; padding: 0 3px; justify-self: end; }
  .hb-streak-sub { display: none; }          /* 手机上只留 🔥N，省出横向空间 */
  .hb-ctrl { grid-area: ctrl; flex: 0 0 auto; gap: 8px; }
  .hb-row-state { grid-area: state; justify-self: end; font-size: 10.5px; margin-left: 0; }
  .hb-name { font-size: 14.5px; }
  .hb-check { width: 40px; height: 40px; font-size: 18px; }
  .hb-cbtn { width: 40px; height: 40px; font-size: 19px; }
  .hb-count-val { min-width: 58px; }
  .hb-count-val b { font-size: 19px; }
  .hb-num { min-width: 112px; padding: 8px 10px; }
  .hb-timerbtn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .hb-quick { min-height: 34px; padding: 6px 10px; }
  .hb-rest, .hb-skipbadge { padding: 9px 12px; font-size: 12.5px; }
  .hb-rank-row { flex-wrap: wrap; }
  .hb-rank-bar { order: 5; width: 100%; flex: none; }
  .hb-year { min-width: 660px; }
  .hb-detail-bar-actions { width: 100%; }
  .hb-detail-bar-actions .btn { flex: 1; justify-content: center; }
  .hb-arch-actions .btn { flex: 1; justify-content: center; }
  .hb-toolbar .hb-sort { max-width: none; flex: 1 1 0; }
  .hb-add { flex: 1 1 0; justify-content: center; }
  /* 手机端工具栏分两行：搜索独占一行，排序与添加各占一半。
     否则搜索框 min-width:180px 会把排序与添加挤到 72px，选项文字被截断。 */
  .hb-search { flex: 1 1 100%; }
}
/* ==========================================================================
   笔记页外壳：双 Tab（飞书文档 / 本地笔记）
   ──────────────────────────────────────────────────────────
   高度策略：外壳自身占满 --notes-h（由 app.js 的 updateNotesHeight 测量），
   内部用 flex 分配 —— Tab 栏固定高度，内容区吃掉剩余空间。
   这样两个 Tab 的面板都填满可视区，不会出现「内容比屏幕矮一截」。
   注意 #page 用的是普通块级布局，所以外壳必须显式给高度，不能靠 flex:1。
   ========================================================================== */
.nt-shell {
  display: flex; flex-direction: column; gap: 10px;
  height: var(--notes-h, calc(100vh - 108px));
  min-height: 240px;
}
.nt-tabs { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.nt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; min-height: 42px;
  border: 3px solid var(--ink); border-radius: 0; background: var(--card);
  color: var(--ink); font-weight: 800; font-size: 13.5px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, background .12s;
}
.nt-tab:hover { background: var(--hover); }
.nt-tab.active { background: var(--yellow); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* 内容区：撑满剩余高度，且允许子元素收缩（min-height:0 是 flex 嵌套里必须的） */
.nt-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* 本地笔记的面板原本用 --notes-h，在 Tab 内改为撑满父级 */
.nt-body > .nb-notes { height: 100%; flex: 1 1 auto; min-height: 0; }

/* ---------- 飞书面板整体 ---------- */
.fs-wrap {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border: 3px solid var(--ink); background: var(--card);
  box-shadow: 4px 4px 0 var(--ink); overflow: hidden;
}
/* 移动端顶部下拉选择：PC 端隐藏（PC 用左栏列表） */
.fs-mobilebar { display: none; }
.fs-main { flex: 1 1 auto; min-height: 0; display: flex; }

/* ---------- 左栏：文档链接列表 ---------- */
.fs-side {
  width: 260px; flex: 0 0 260px; min-width: 0;
  display: flex; flex-direction: column;
  background: #f5f0e6; border-right: 3px solid var(--ink);
  transition: width .18s ease, flex-basis .18s ease;
}
.fs-wrap.side-collapsed .fs-side { width: 0; flex-basis: 0; border-right: none; overflow: hidden; }
.fs-side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 3px solid var(--ink); background: #fff;
}
.fs-side-title { flex: 1; font-weight: 900; font-size: 13.5px; white-space: nowrap; }
.fs-side-tools { display: flex; gap: 6px; }
.fs-mini {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  cursor: pointer; border-radius: 0; font-size: 12px;
}
.fs-mini:hover { background: var(--yellow); }
.fs-side-act { padding: 10px; border-bottom: 2px solid #e0d9c8; }
.fs-add {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 12px;
  border: 3px solid var(--ink); background: var(--yellow); color: var(--ink);
  font-weight: 900; font-size: 13.5px; cursor: pointer; border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .1s;
}
.fs-add:hover { background: #ffe07a; }
.fs-add:active { transform: translate(3px, 3px); box-shadow: none; }
.fs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
.fs-side-foot {
  padding: 8px 12px; border-top: 2px solid #e0d9c8;
  font-size: 10.5px; color: var(--text2); line-height: 1.5;
}

.fs-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; margin-bottom: 7px;
  border: 3px solid transparent; background: transparent; cursor: pointer;
}
.fs-item:hover { background: #eae4d6; }
.fs-item.active {
  background: var(--yellow); border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.fs-item-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: #fff; font-size: 15px;
}
.fs-item-body { flex: 1; min-width: 0; display: block; }
.fs-item-name {
  display: block; font-size: 13px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-item-host { display: block; font-size: 10.5px; color: var(--text2); margin-top: 2px; }
.fs-item-more {
  width: 26px; height: 26px; flex-shrink: 0; line-height: 1;
  border: 2px solid transparent; background: transparent; color: var(--text2);
  cursor: pointer; border-radius: 0; font-size: 15px; font-weight: 900;
}
.fs-item-more:hover { border-color: var(--ink); background: #fff; color: var(--ink); }

.fs-empty { padding: 26px 14px; text-align: center; }
.fs-empty-emoji { font-size: 30px; }
.fs-empty-txt { margin-top: 8px; font-size: 12.5px; color: var(--text2); line-height: 1.7; }

/* ---------- 右栏：工具栏 + 舞台 ---------- */
.fs-view { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.fs-toolbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  min-height: 42px; padding: 0 10px;
  background: var(--bg); border-bottom: 3px solid var(--ink);
}
.fs-tb-icon { font-size: 15px; flex-shrink: 0; }
/* 展开按钮常驻 DOM，只在左栏收起时显示（避免 JS 反复增删节点） */
.fs-expand { display: none; }
.fs-wrap.side-collapsed .fs-expand { display: inline-flex; }
.fs-tb-name {
  flex: 1; min-width: 0; font-weight: 800; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-tb-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.fs-tbtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 10px;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 0; white-space: nowrap;
}
.fs-tbtn:hover { background: var(--yellow); }
.fs-stage { flex: 1 1 auto; min-height: 0; position: relative; background: #fff; }
.fs-iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; }

/* 内嵌模式下的常驻提示条（可关闭）：说明"空白/要求登录"的成因与出路 */
.fs-hintbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-top: 3px solid var(--ink); background: #fff8dc;
  font-size: 11.5px; line-height: 1.6; color: var(--ink);
}
.fs-hintbar-txt { flex: 1; min-width: 0; }
.fs-hintbar-x {
  width: 24px; height: 24px; flex-shrink: 0; line-height: 1;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  cursor: pointer; border-radius: 0; font-size: 11px;
}
.fs-hintbar-x:hover { background: var(--yellow); }

/* ---------- 加载中 ---------- */
.fs-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #fff;
}
.fs-spinner {
  width: 38px; height: 38px; border: 4px solid #e4dfcf; border-top-color: var(--ink);
  border-radius: 50%; animation: fs-spin .8s linear infinite;
}
@keyframes fs-spin { to { transform: rotate(360deg); } }
.fs-loading-txt { font-weight: 800; font-size: 14px; }
.fs-loading-sub { font-size: 12px; color: var(--text2); }
.fs-skip {
  margin-top: 6px; border: 2px solid var(--ink); background: #fff;
  padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 0;
}
.fs-skip:hover { background: var(--yellow); }

/* ---------- 降级界面 ---------- */
.fs-fallback {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--bg);
}
.fs-card {
  width: 100%; max-width: 520px; padding: 26px 24px; text-align: center;
  border: 3px solid var(--ink); background: #fbf7ee;
  box-shadow: 5px 5px 0 var(--ink);
}
.fs-card-emoji { font-size: 40px; line-height: 1; }
.fs-card-title { font-size: 19px; font-weight: 900; margin-top: 8px; }
.fs-card-desc { font-size: 13px; color: var(--text2); line-height: 1.85; margin: 12px 0 20px; }
.fs-open-big {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 62px; padding: 12px 18px;
  border: 3px solid var(--ink); background: var(--yellow); color: var(--ink);
  cursor: pointer; border-radius: 0; box-shadow: 4px 4px 0 var(--ink); transition: transform .1s;
}
.fs-open-big:hover { background: #ffe07a; }
.fs-open-big:active { transform: translate(4px, 4px); box-shadow: none; }
.fs-open-big-icon { font-size: 24px; }
.fs-open-big-body { display: grid; gap: 2px; text-align: left; }
.fs-open-big-body b { font-size: 15px; font-weight: 900; }
.fs-open-big-body em { font-style: normal; font-size: 11.5px; color: #6b5a1f; }
.fs-card-meta {
  margin-top: 18px; padding: 12px; text-align: left;
  border: 2px solid var(--ink); background: #fff;
}
.fs-card-row { display: flex; gap: 10px; font-size: 12px; margin-bottom: 5px; }
.fs-card-row:last-child { margin-bottom: 0; }
.fs-card-row b { flex-shrink: 0; width: 56px; color: var(--text2); font-weight: 800; }
.fs-card-row span { flex: 1; min-width: 0; word-break: break-all; }
.fs-card-tip {
  margin-top: 14px; padding: 10px 12px; text-align: left; font-size: 12px;
  line-height: 1.7; border: 2px dashed #c9c3ad; background: #fff;
}
.fs-card-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.fs-none {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 30px; text-align: center;
}
.fs-none-emoji { font-size: 40px; }
.fs-none-title { font-size: 16px; font-weight: 900; }
.fs-none-sub { font-size: 12.5px; color: var(--text2); }

/* ---------- ⋯ 菜单（挂到 body，避免被左栏 overflow 裁掉） ---------- */
.fs-menu {
  position: fixed; z-index: 120; min-width: 176px; padding: 5px;
  border: 3px solid var(--ink); background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
}
.fs-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: transparent;
  font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left;
}
.fs-menu button:hover { background: var(--hover); }
.fs-menu-danger { color: var(--red) !important; }

/* ---------- 表单 ---------- */
.fs-form { display: grid; }
.fs-hint { font-size: 11px; color: var(--text2); margin-top: 5px; }
.fs-icon-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-icon-opt {
  width: 38px; height: 36px; font-size: 17px;
  border: 2px solid #ddd6c4; background: #fff; cursor: pointer; border-radius: 0;
}
.fs-icon-opt:hover { border-color: var(--ink); background: var(--hover); }
.fs-icon-opt.active { border-color: var(--ink); background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }

/* ========== 响应式：手机端 ========== */
@media (max-width: 767px) {
  /* 手机端：左栏折叠为顶部下拉选择，右栏全屏；不尝试 iframe */
  .nt-shell { height: var(--notes-h, calc(100vh - 92px)); gap: 8px; }
  .nt-tab { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12.5px; }
  .nt-body > .nb-notes { height: 100%; }

  .fs-mobilebar {
    display: flex; gap: 8px; flex: 0 0 auto; padding: 9px;
    background: #f5f0e6; border-bottom: 3px solid var(--ink);
  }
  .fs-mobilebar .input { flex: 1; min-width: 0; }
  .fs-mobilebar .btn { flex-shrink: 0; }
  .fs-side { display: none; }
  .fs-toolbar { flex-wrap: wrap; padding: 7px 9px; gap: 7px; }
  .fs-tb-name { font-size: 12.5px; flex: 1 1 100%; order: -1; }
  .fs-tb-right { width: 100%; }
  .fs-tbtn { flex: 1; justify-content: center; }
  /* 手机端走降级视图，提示条派不上用场（降级页自己已说明原因） */
  .fs-hintbar { display: none; }
  .fs-fallback { padding: 14px; align-items: flex-start; }
  .fs-card { padding: 20px 16px; }
  .fs-card-emoji { font-size: 34px; }
  .fs-card-title { font-size: 17px; }
  .fs-open-big { min-height: 56px; }
  .fs-card-acts { flex-direction: column; }
  .fs-card-acts .fs-tbtn { width: 100%; }
}
/* ========== 进度条 ========== */
.progress {
  height: 14px; border: 2px solid var(--ink); border-radius: 7px;
  background: #e9e5d8; overflow: hidden;
}
.progress > div {
  height: 100%; background: var(--green); transition: width .3s;
}
.progress.over > div { background: var(--accent); }

/* ========== 书影音 ========== */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;
}
.media-card {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  overflow: hidden; cursor: pointer; transition: all .12s;
}
.media-card:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.media-cover {
  position: relative; aspect-ratio: 3/4; background: var(--primary);
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: rgba(255,255,255,.5); overflow: hidden;
}
.media-cover img { width: 100%; height: 100%; object-fit: cover; }
.media-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 8px; border: 2px solid var(--ink); border-radius: 6px;
  font-size: 11px; font-weight: 800; color: var(--ink);
}
.media-badge.want { background: #e9e5d8; }
.media-badge.doing { background: var(--yellow); }
.media-badge.done { background: var(--green); }
.stars { color: #e8a20c; font-size: 13px; letter-spacing: 2px; }
.stars .fa-regular { color: #cfc9b4; }
.stars-edit { font-size: 24px; cursor: pointer; }
.stars-edit i { transition: transform .1s; }
.stars-edit i:hover { transform: scale(1.2); }

/* ========== 弹窗 ========== */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17,17,17,.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fadein .15s ease;
}
.modal {
  width: 100%; max-width: 440px; max-height: 88vh;
  background: var(--card); border: 3px solid var(--ink); border-radius: 14px;
  display: flex; flex-direction: column;
  box-shadow: 8px 8px 0 var(--ink);
  animation: pop .18s ease;
}
.modal-wide { max-width: 620px; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 2px solid var(--ink);
  background: var(--yellow);
  font-size: 16px; font-weight: 800;
  border-radius: 11px 11px 0 0;
}
.modal-x {
  width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 15px; font-weight: 800;
}
.modal-x:hover { background: var(--accent); color: #fff; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 2px solid var(--ink); background: var(--bg);
  border-radius: 0 0 11px 11px;
}

/* 分类选择小方块（记账表单用） */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border: 2px solid var(--ink); border-radius: 10px;
  font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; transition: all .12s;
  background: var(--card);
}
.cat-item i { font-size: 16px; }
.cat-item:hover { background: var(--hover); }
.cat-item.active { background: var(--yellow); }

/* ========== Toast 提示 ========== */
#toast-root {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  padding: 10px 20px; border-radius: 8px;
  background: var(--card); border: 2px solid var(--ink);
  color: var(--ink); font-size: 14px; font-weight: 700;
  box-shadow: 4px 4px 0 var(--ink);
  animation: toastin .2s ease;
}
.toast.success { border-left: 8px solid var(--green); }
.toast.error { border-left: 8px solid var(--accent); }
@keyframes toastin { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ========== 骨架屏 ========== */
.sk {
  border-radius: 8px;
  background: linear-gradient(90deg, #e9e5d8 25%, #f6f2e6 50%, #e9e5d8 75%);
  background-size: 200% 100%;
  animation: skmove 1.2s infinite;
}
@keyframes skmove { to { background-position: -200% 0; } }

/* ========== 错误提示盒 ========== */
.error-box {
  text-align: center; padding: 60px 20px;
  color: var(--text2); font-weight: 600;
}
.error-box i { font-size: 36px; margin-bottom: 12px; color: var(--accent); }

/* ========== 金额颜色 ========== */
.money-expense { color: var(--red); font-weight: 800; }
.money-income { color: var(--green-text); font-weight: 800; }
.text-over { color: var(--red) !important; font-weight: 800; }

/* ========== 响应式 ========== */
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #sidebar-mask.show { display: block; }
  #main { margin-left: 0; }
}

@media (max-width: 767px) {
  #content { padding: 16px; }
  #content.content-full { padding: 8px; }
  #topbar { padding: 0 16px; }
  #topbar.content-full { padding: 0 12px; }
  /* 只在手机端隐藏（与 .mobile-only 相反）：
     用于把桌面端顶栏的次要按钮移到手机端的"更多"菜单里 */
  .desktop-only { display: none !important; }
  .btn { min-height: 44px; }
  .chip { min-height: 36px; }
  .icon-btn { width: 44px; height: 44px; }

  /* 笔记：旧版列表/编辑分页切换（保留兼容） */
  .notes-wrap { grid-template-columns: 1fr; height: var(--notes-h, calc(100vh - 92px)); }
  .notes-wrap .notes-editor { display: none; }
  .notes-wrap.editing .notes-editor { display: flex; }
  .notes-wrap.editing .notes-list { display: none; }

  /* 笔记新版三栏 → 移动端单栏切换
     状态机：默认只显示导航 → .editing 显示列表 → .editing.doc-open 显示编辑器 */
  .nb-notes {
    grid-template-columns: minmax(0, 1fr);
    height: var(--notes-h, calc(100vh - 92px));
    box-shadow: 2px 2px 0 var(--ink);
  }
  .nb-notes.list-collapsed { grid-template-columns: minmax(0, 1fr); }
  .nb-notes .nb-list,
  .nb-notes .nb-editor { display: none; }
  .nb-notes.editing .nb-nav { display: none; }
  .nb-notes.editing .nb-list { display: flex; }
  .nb-notes.editing .nb-editor { display: none; }
  .nb-notes.editing.doc-open .nb-list { display: none; }
  .nb-notes.editing.doc-open .nb-editor { display: flex; }

  .nb-nav { border-right: none; }
  .nb-list { border-right: none; }
  /* Quill 工具栏：手机端保留横向滚动（这是移动端富文本工具栏的标准做法——
     要装下全部格式化功能，一行必然放不下；改成两行反而更占纵向空间，
     而纵向空间正是我们最缺的）。
     横向滚动被限制在工具栏容器内，不会带动整页横滑。 */
  .nb-quill-toolbar {
    flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;          /* 明确横滑手势，避免与纵滑冲突 */
    overscroll-behavior-x: contain; /* 滚到头不"传染"给外层 */
  }
  .nb-quill-toolbar .ql-formats { flex-shrink: 0; }
  /* 触控目标放大到 32×30。
     注意必须 !important：quill.snow.css 里的
       `.ql-snow.ql-toolbar button { height:24px; width:28px }`
     选择器权重(0,2,1)高于 `.nb-quill-toolbar button`(0,1,1)，
     不加 !important 的话尺寸会被它覆盖掉（实测就是 28×24）。 */
  .nb-quill-toolbar button {
    width: 32px !important; height: 30px !important; padding: 0 !important;
  }
  /* 下拉选择器（标题/对齐等）同步放大 */
  .nb-quill-toolbar .ql-picker.ql-header { width: 68px !important; }
  .nb-quill-body .ql-editor { padding: 16px; font-size: 15px; }
  .nb-quill-body .ql-editor h1 { font-size: 23px; }
  .nb-quill-body .ql-editor h2 { font-size: 19px; }
  .nb-quill-body .ql-editor h3 { font-size: 16px; }
  .nb-title-input { font-size: 16px; min-width: 100px; }
  /* 移动端顶栏按钮多（返回/文件夹/置顶/收藏/大纲/阅读/更多/状态）：
     标题独占第一行，其余控件在后续行紧凑排布，避免互相挤压与过多空白行 */
  .nb-editor-topbar { gap: 5px; row-gap: 7px; padding: 8px 10px; }
  /* 返回按钮与标题同行，其余控件自动换到下一行 */
  .nb-title-input { flex: 1 1 auto; min-width: 0; }
  .nb-folder-select { max-width: 86px; font-size: 11px; padding: 6px 4px; }
  .nb-topbtn { padding: 6px 8px; min-height: 32px; }
  .nb-iconbtn { padding: 6px 7px; }
  .nb-save-status { margin-left: auto; font-size: 11px; }
  .nb-folder-select { max-width: 112px; font-size: 11px; }
  .nb-topbtn-text { display: none; }
  .nb-editor-footer { font-size: 11px; }
  .nb-footer-right { display: none; }
  /* 手机端页脚压缩：只保留"共 N 字"，纵向让出空间给正文 */
  .nb-editor-footer { padding: 5px 10px; }

  /* 标签区：移动端纵向空间紧张，输入框占满剩余宽度；联想面板整行铺开 */
  .nb-tagbar { padding: 6px 10px; gap: 6px; }
  .nb-tag-chip { font-size: 11px; padding: 2px 3px 2px 7px; }
  .nb-tag-input { max-width: none; min-width: 88px; font-size: 12px; }
  .nb-tag-suggest { box-shadow: 2px 2px 0 var(--ink); }
  /* 触屏无 hover：标签删除按钮常显 */
  .nb-tag-del { display: flex; }
  /* 「更多」菜单按钮定位后不超出屏幕 */
  .nb-more-menu { min-width: 190px; box-shadow: 2px 2px 0 var(--ink); }
  .nb-more-menu button { font-size: 12px; padding: 10px; }

  /* ---------- 第三步：大纲抽屉 / 双向链接选择器 / 版本弹窗 ---------- */
  /* 大纲改为抽屉：忽略折叠态，默认藏到右侧屏外 */
  .nb-outline,
  .nb-outline.collapsed {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 78% !important; max-width: 320px;
    z-index: 70;
    box-shadow: -5px 0 0 rgba(17, 17, 17, .16);
    transform: translateX(103%);
    transition: transform .2s ease;
  }
  .nb-outline.drawer-open { transform: translateX(0); }
  .nb-outline.collapsed .nb-outline-body { display: block; }
  .nb-outline.collapsed .nb-outline-head { justify-content: space-between; padding: 8px 8px 8px 12px; }
  .nb-outline.collapsed .nb-outline-head > span { display: inline-flex; }
  .nb-outline .nb-outline-fold { display: none; }
  .nb-outline-item { font-size: 13px; padding: 8px; }

  /* [[ 选择器：贴底铺开，便于触屏点选 */
  .nb-wiki-picker {
    bottom: 10px;
    width: calc(100% - 16px);
    max-height: 200px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .nb-wiki-item { padding: 10px; }

  /* 版本弹窗：单列（列表在上、预览在下） */
  .nb-ver-wrap { grid-template-columns: 1fr; min-height: 0; }
  .nb-ver-list {
    flex-direction: row; overflow-x: auto; max-height: none;
    padding-right: 0; padding-bottom: 4px;
  }
  .nb-ver-item { flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; min-width: 104px; }
  .nb-ver-preview { max-height: 240px; }
  .nb-ver-preview-inner { padding: 12px; font-size: 13px; }

  /* 被引用区：收起箭头常显、条目换行 */
  .nb-backlinks-body { padding: 0 10px 10px; }
  .nb-backlink-title { max-width: 140px; }
  .nb-backlink-count { display: none; }

  /* ---------- 第四步：代码块 / 图片工具 / Markdown / 图谱 / 锁面板 ---------- */
  /* 代码块：字号压小，工具栏按钮常显（触屏无 hover） */
  .nb-code-pre { font-size: 12px; padding: 10px 12px; }
  .nb-code-bar { padding: 4px 6px 4px 10px; }
  /* 逐行 div 不设内边距（外观由容器承担），移动端只压字号 */
  .nb-quill-body .ql-editor .ql-code-block { font-size: 12px; }
  .nb-quill-body .ql-editor .ql-code-block-container { padding: 10px 12px; }
  .nb-quill-body .ql-editor .ql-code-block-container[data-nb-lang] { padding-top: 20px; }

  /* 图片工具条：贴底铺开，按钮加大便于点按 */
  .nb-imgtools {
    bottom: 8px; width: calc(100% - 16px);
    justify-content: center; box-shadow: 2px 2px 0 var(--ink);
  }
  .nb-imgtools button { min-width: 40px; height: 32px; font-size: 12px; }
  .nb-imgtools-label { display: none; }

  /* Markdown 模式：移动端改为上下两栏（源码 / 预览），避免横向挤成两条窄柱 */
  .nb-md { flex-direction: column; }
  .nb-md-pane + .nb-md-pane { border-left: none; border-top: 3px solid var(--ink); }
  .nb-md-src { font-size: 13px; padding: 12px; }
  .nb-md-preview { padding: 12px; font-size: 14px; }
  .nb-md-preview h1 { font-size: 21px; }
  .nb-md-preview h2 { font-size: 18px; }
  .nb-md-pane { flex: 1 1 50%; }

  /* 图谱：图例换行、提示文字缩小 */
  .nb-graph-bar { padding: 8px 10px; gap: 8px; }
  .nb-graph-title { font-size: 13px; }
  .nb-graph-stat { font-size: 11px; }
  .nb-graph-legend { padding: 6px 10px; gap: 9px; font-size: 10px; }
  .nb-graph-tip { font-size: 10px; padding: 6px 10px; }

  /* 锁面板：卡片贴满宽度 */
  .nb-lockbox { padding: 16px; }
  .nb-lockbox-card { padding: 20px 16px; box-shadow: 3px 3px 0 var(--ink); }

  /* 附件条目：允许换行 */
  .nb-attach-body { padding: 0 10px 8px; }
  .nb-attach-item { font-size: 11px; }

  /* 列表项删除按钮移动端常显 */
  .list-item .del-btn { opacity: 1; }
  .note-item .note-del { opacity: 1; }
  .nb-note .nb-act { opacity: 1; }

  /* 书影音封面墙 2 列 */
  .media-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .modal { max-height: 92vh; box-shadow: 5px 5px 0 var(--ink); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* =====================================================
   待办模块（Neo-Brutalism 强化版，作用域限定在 .todo-page）
   规范：3px 纯黑边框 / 4px 4px 0 硬阴影 / 零圆角
   hover：阴影收为 2px 2px 并位移 translate(2px,2px)
   ===================================================== */
.todo-page .card,
.todo-page .nb-card { box-shadow: 4px 4px 0 var(--ink); }

/* 作用域内所有组件统一为 3px 黑边 + 零圆角 */
.todo-page .card,
.todo-page .nb-card,
.todo-page .input,
.todo-page .btn,
.todo-page .chip,
.todo-page .icon-btn,
.todo-page .tab-item,
.todo-page .tab-bar,
.todo-page .cal-cell,
.todo-page .tag,
.todo-page .list-item,
.todo-page .checkbox {
  border-width: 3px;
  border-radius: 0;
}

.todo-page .btn { box-shadow: 4px 4px 0 var(--ink); }
.todo-page .btn:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(2px, 2px); }
.todo-page .btn:active { box-shadow: none; transform: translate(4px, 4px); }
.todo-page .btn:disabled:hover { box-shadow: 4px 4px 0 var(--ink); transform: none; }
.todo-page .btn-danger { background: #ff006e; color: #fff; }

/* ---------- 新粗野主义卡片 ---------- */
.nb-card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 16px;
}

/* ---------- 添加栏 ---------- */
.todo-add-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.todo-add-row .todo-cat-sel { max-width: 110px; }
.todo-add-row .todo-due-input { max-width: 158px; }

/* 优先级切换按钮：点击循环 高/中/低 */
.todo-pri-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 14px; flex-shrink: 0;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: box-shadow .12s, transform .12s, background .12s;
}
.todo-pri-btn:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(2px, 2px); }
.pri-badge { width: 12px; height: 12px; border: 2px solid var(--ink); display: inline-block; }
.todo-pri-btn.pri-high  { background: #ff006e; color: #fff; }
.todo-pri-btn.pri-medium { background: #ffdb33; }
.todo-pri-btn.pri-low   { background: #7bed9f; }
.todo-pri-btn.pri-high .pri-badge { background: #fff; }

/* ---------- 列表容器 ---------- */
.todo-list-card { padding: 10px; }

/* ---------- 单条待办 ---------- */
.todo-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px 12px 20px; margin-bottom: 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card);
  transition: background .12s, transform .12s;
}
.todo-item:last-child { margin-bottom: 0; }
.todo-item:hover { background: var(--hover); }

/* 左侧优先级竖线（高=红 / 中=黄 / 低=绿） */
.todo-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: #ffdb33;
}
.todo-item.pri-high::before  { background: #ff006e; }
.todo-item.pri-medium::before { background: #ffdb33; }
.todo-item.pri-low::before   { background: #7bed9f; }

.todo-main { flex: 1; min-width: 0; cursor: pointer; }
.todo-title { font-weight: 600; word-break: break-word; line-height: 1.45; }
.todo-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }

/* 已完成：删除线 + 变灰 + 浅灰底 */
.todo-item.is-done { background: #efeadb; }
.todo-item.is-done .todo-title { text-decoration: line-through; opacity: .5; }
.todo-item.is-done .todo-meta { opacity: .6; }
.todo-page .checkbox.checked { background: var(--green); color: #fff; }

/* 过期任务：标题标红 */
.todo-item.is-overdue .todo-title { color: #ff006e; }

/* ---------- 截止日期标签 ---------- */
.due-tag {
  display: inline-block; padding: 1px 7px;
  border: 3px solid var(--ink); border-radius: 0;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.due-today    { background: #ffdb33; color: var(--ink); }
.due-over     { background: #ff006e; color: #fff; }
.due-tomorrow { background: #7bed9f; color: var(--ink); }
.due-future   { background: #e9e5d8; color: var(--ink); }

/* 待办页内的分类标签配色 */
.todo-page .tag-work  { background: #00f0ff; }
.todo-page .tag-life  { background: #ff006e; }
.todo-page .tag-study { background: #a55eea; }

/* ---------- 搜索框 ---------- */
.todo-search {
  position: relative; display: flex; align-items: center;
}
.todo-search-icon {
  position: absolute; left: 14px; font-size: 15px;
  color: var(--text2); pointer-events: none; z-index: 1;
}
.todo-page .todo-search-input {
  width: 100%; padding-left: 40px; padding-right: 46px;
  box-shadow: 4px 4px 0 var(--ink);
}
.todo-page .todo-search-input:focus { box-shadow: 2px 2px 0 var(--ink); transform: translate(2px, 2px); }
.todo-search-clear {
  position: absolute; right: 8px;
  width: 32px; height: 32px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  cursor: pointer; line-height: 1;
}
.todo-search-clear:hover { background: #ff006e; color: #fff; }

/* 搜索结果高亮 */
mark.hl {
  background: var(--yellow); color: var(--ink);
  font-weight: 800; padding: 0 2px;
  border-bottom: 3px solid var(--ink);
}

/* 命中在描述时的片段提示 */
.todo-desc-snippet {
  font-size: 12.5px; color: var(--text2);
  margin-top: 3px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-desc-snippet mark.hl { font-size: 12.5px; }

/* ---------- 已完成折叠栏 ---------- */
.todo-done-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 12px 10px 4px;
  border: none; border-top: 3px dashed var(--ink);
  background: transparent; color: var(--text2);
  font-size: 13px; font-weight: 800; cursor: pointer; text-align: left;
}
.todo-done-head:hover { color: var(--ink); }

/* ---------- 删除按钮（PC hover 显示 / 移动端常显） ---------- */
.todo-del {
  opacity: 0; flex-shrink: 0;
  width: 34px; height: 34px;
  border: 3px solid transparent; border-radius: 0;
  background: transparent; color: var(--text2); cursor: pointer;
  transition: all .12s;
}
.todo-item:hover .todo-del { opacity: 1; }
.todo-del:hover { background: #ff006e; border-color: var(--ink); color: #fff; }

/* ---------- 空状态 ---------- */
.todo-empty {
  text-align: center;
  padding: 56px 20px;
  box-shadow: 4px 4px 0 var(--ink);
}
.todo-empty > i { font-size: 42px; display: block; margin-bottom: 16px; color: var(--accent); }
.todo-empty p:first-of-type { font-weight: 800; font-size: 16px; }

/* =====================================================
   任务详情面板
   ===================================================== */
.detail-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(17, 17, 17, .35);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.detail-mask.show { opacity: 1; pointer-events: auto; }

.detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: 400px; max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--card);
  border-left: 3px solid var(--ink);
  transform: translateX(101%);
  transition: transform .22s ease;
}
.detail-panel.open { transform: translateX(0); }

.detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 3px solid var(--ink);
  font-weight: 800; font-size: 16px;
  background: var(--yellow);
}
.detail-x {
  width: 34px; height: 34px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); cursor: pointer;
  font-size: 15px; line-height: 1;
}
.detail-x:hover { background: #ff006e; color: #fff; }

.detail-body {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: grid; gap: 16px; align-content: start;
}
.detail-field { display: grid; gap: 6px; }
.detail-label { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--text2); }
.detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-textarea {
  min-height: 96px; resize: vertical;
  font-family: inherit; line-height: 1.6;
  box-shadow: none !important;
}
.detail-body .input { box-shadow: none; }

/* 优先级选择（详情面板内） */
.pri-picker { display: flex; gap: 8px; }
.pri-opt {
  flex: 1; min-height: 40px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-weight: 800; cursor: pointer;
  transition: box-shadow .12s, transform .12s;
}
.pri-opt:hover { transform: translate(2px, 2px); }
.pri-opt.active { box-shadow: inset 0 0 0 3px rgba(17, 17, 17, .25); }
.pri-opt.pri-high.active   { background: #ff006e; color: #fff; }
.pri-opt.pri-medium.active { background: #ffdb33; }
.pri-opt.pri-low.active    { background: #7bed9f; }

/* 只读信息 */
.detail-readonly {
  border: 3px solid var(--ink); border-radius: 0;
  padding: 12px 14px; display: grid; gap: 8px;
  background: #fbf7ee;
}
.detail-readonly > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.detail-readonly span { color: var(--text2); font-weight: 600; }
.detail-readonly b { font-weight: 700; }

.detail-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-top: 3px solid var(--ink);
}
.detail-status { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--green-text); }

/* =====================================================
   日程日历（作用域内：今天黄底、选中青底、事件圆点）
   ===================================================== */
.todo-page .cal-cell {
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card);
}
.todo-page .cal-cell.other { opacity: .3; }
.todo-page .cal-cell.today { background: var(--yellow); font-weight: 800; color: var(--ink); }
.todo-page .cal-cell.selected { background: #00f0ff; font-weight: 800; color: var(--ink); }
/* 今天恰好被选中时：青底 + 黄色内描边，两种状态都能看出来 */
.todo-page .cal-cell.today.selected { box-shadow: inset 0 0 0 4px var(--yellow); }
.todo-page .cal-cell .dot {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 0; background: #ff006e;
  border: 1px solid var(--ink);
}
.cal-event-list { max-height: 300px; overflow-y: auto; }
.cal-ev-time { color: #ff006e; min-width: 48px; font-weight: 700; }
.cal-event-form { padding-top: 16px; border-top: 3px solid var(--ink); }

/* =====================================================
   第三步新增组件：子任务 / 标签 / 重复 / 提醒 / 分组 / 收集箱
   ===================================================== */

/* ---------- Tab 上的数量徽标 ---------- */
.todo-tabs .tab-badge {
  display: inline-block; min-width: 18px; padding: 0 4px;
  margin-left: 2px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 15px;
}

/* ---------- 标签筛选栏 ---------- */
.todo-tagbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.todo-tagbar-label {
  font-size: 12px; font-weight: 800; color: var(--text2); margin-right: 2px;
}

/* 标签色块（可点击筛选 / 可移除） */
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--chip, var(--yellow)); color: var(--ink);
  font-size: 12px; font-weight: 800; cursor: pointer;
  transition: box-shadow .12s, transform .12s;
}
.tag-chip:hover { transform: translate(1px, 1px); }
.tag-chip.active { box-shadow: inset 0 0 0 3px var(--ink); }
.tag-chip.ghost { background: var(--card); }
.tag-chip button {
  border: none; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 900; color: inherit; padding: 0 1px; line-height: 1;
}
.tag-chip button:hover { color: #fff; }

/* 列表项里的小标签点 */
.todo-tag-dot {
  display: inline-block; padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--chip, var(--yellow)); color: var(--ink);
  font-size: 11px; font-weight: 800;
}

/* ---------- 重复 / 子任务进度 / 提醒 徽标 ---------- */
.recur-badge, .sub-progress-badge, .rem-badge, .inbox-hint {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 0;
  font-size: 11px; font-weight: 800; color: var(--ink);
  background: #e9e5d8;
}
.recur-badge { background: var(--cyan); }
.sub-progress-badge { background: var(--purple); }
.rem-badge { background: var(--orange); padding: 0 5px; }
.inbox-hint { background: var(--yellow); }

/* ---------- 分组 ---------- */
.todo-group { margin-bottom: 6px; }
.todo-group-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  border: none; background: transparent;
  color: var(--ink); font-size: 13px; font-weight: 800;
  cursor: pointer; text-align: left;
}
.todo-group-head:hover { background: var(--hover); }
.todo-group-count {
  margin-left: auto;
  min-width: 22px; padding: 0 5px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); text-align: center;
  font-size: 11px; font-weight: 800;
}
.todo-group.grp-overdue .todo-group-head { color: #ff006e; }
.todo-group.grp-overdue .todo-group-count { background: #ff006e; color: #fff; }
.todo-group.grp-today .todo-group-count { background: var(--yellow); }
.todo-group-body { padding-left: 6px; }

/* ---------- 详情面板：开关 ---------- */
.nb-switch { display: inline-flex; align-items: center; cursor: pointer; }
.nb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.nb-switch-track {
  position: relative; display: inline-block;
  width: 52px; height: 28px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); transition: background .15s;
}
.nb-switch-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 20px; height: 20px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); transition: transform .15s, background .15s;
}
.nb-switch input:checked + .nb-switch-track { background: var(--green); }
.nb-switch input:checked + .nb-switch-track .nb-switch-thumb {
  transform: translateX(24px); background: #fff;
}

.detail-tip { font-size: 12px; color: var(--text2); margin-top: 4px; line-height: 1.5; }
.sub-count {
  display: inline-block; margin-left: 4px; padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--purple); font-size: 11px; font-weight: 800;
}

/* ---------- 详情面板：子任务 ---------- */
.sub-list { display: grid; gap: 6px; margin-top: 4px; }
.sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card);
}
.sub-item.done .sub-text { text-decoration: line-through; opacity: .5; }
.sub-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); color: transparent;
  cursor: pointer; font-size: 11px; line-height: 1;
}
.sub-item.done .sub-check { background: var(--green); color: var(--ink); }
.sub-text { flex: 1; min-width: 0; word-break: break-word; font-size: 14px; }
.sub-del {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--text2);
  cursor: pointer; font-size: 12px; line-height: 1;
}
.sub-del:hover { background: #ff006e; border-color: var(--ink); color: #fff; }
.sub-add { display: flex; gap: 8px; margin-top: 8px; }
.sub-add .input { flex: 1; }

/* ---------- 详情面板：标签 ---------- */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* ---------- 收集箱 ---------- */
.todo-inbox-hint { padding: 14px 16px; }
.todo-page .btn-primary { background: var(--primary); color: #fff; }

/* =====================================================
   第四步新增：视图切换 / 四象限 / 番茄钟 / 统计 / 状态
   ===================================================== */

/* ---------- 视图切换（列表 / 四象限） ---------- */
.view-switch {
  display: inline-flex;
  border: 3px solid var(--ink); border-radius: 0;
  overflow: hidden;
}
.view-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: none; border-right: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.view-switch-btn:last-child { border-right: none; }
.view-switch-btn:hover { background: var(--hover); }
.view-switch-btn.active { background: var(--ink); color: var(--yellow); }

.todo-status-label {
  font-size: 12px; font-weight: 800; color: var(--text2); margin-right: 2px;
}
.chip-status.active { background: var(--primary); color: #fff; }

/* ---------- 四象限 ---------- */
.quad-hint {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px; font-size: 13px; line-height: 1.6;
  background: #fbf7ee;
}
.quad-hint > i { color: var(--primary); margin-top: 3px; flex-shrink: 0; }
/* 文本必须包成一个可换行的整体，否则 flex 会把每段文字当作独立项目挤成竖排 */
.quad-hint-body { flex: 1; min-width: 0; }

.quad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.quad-card {
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--ink);
  min-height: 180px;
  display: flex; flex-direction: column;
  transition: box-shadow .12s, transform .12s, background .12s;
}
.quad-card.drag-over { background: var(--hover); box-shadow: 2px 2px 0 var(--ink); transform: translate(2px, 2px); }
/* 每个象限不同颜色边框 */
.quad-q1 { border-color: #ff006e; }
.quad-q2 { border-color: #00f0ff; }
.quad-q3 { border-color: #ffdb33; }
.quad-q4 { border-color: #7bed9f; }

.quad-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 3px solid var(--ink);
  font-weight: 800; font-size: 14px;
}
.quad-q1 .quad-head { background: #ff006e; color: #fff; }
.quad-q2 .quad-head { background: #00f0ff; color: var(--ink); }
.quad-q3 .quad-head { background: #ffdb33; color: var(--ink); }
.quad-q4 .quad-head { background: #7bed9f; color: var(--ink); }
.quad-hint-text { font-size: 11px; font-weight: 700; opacity: .85; }
.quad-count {
  margin-left: auto;
  min-width: 24px; padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 800; text-align: center;
}
.quad-body { padding: 10px; display: grid; gap: 8px; align-content: start; flex: 1; }
.quad-empty { font-size: 12px; color: var(--text2); text-align: center; padding: 14px 0; }

.quad-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--card); position: relative;
  cursor: grab;
}
.quad-item:active { cursor: grabbing; }
.quad-item.dragging { opacity: .45; }
.quad-item:hover { background: var(--hover); }
/* 左侧优先级竖线 */
.quad-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: #ffdb33;
}
.quad-item.pri-high::before { background: #ff006e; }
.quad-item.pri-low::before { background: #7bed9f; }

.quad-item .checkbox { width: 20px; height: 20px; border-width: 2px; }
.quad-item-main { flex: 1; min-width: 0; cursor: pointer; }
.quad-item-title { font-size: 13.5px; font-weight: 600; word-break: break-word; line-height: 1.4; }
.quad-item-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.quad-move {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--text2);
  cursor: pointer; font-size: 11px;
}
.quad-move:hover { background: var(--primary); border-color: var(--ink); color: #fff; }

/* ---------- 状态徽标 / 状态选择器 ---------- */
.status-badge {
  display: inline-block; padding: 0 6px;
  border: 2px solid var(--ink); border-radius: 0;
  font-size: 11px; font-weight: 800; color: var(--ink);
}
.status-badge.st-progress { background: var(--primary); color: #fff; }
.status-badge.st-cancelled { background: #e9e5d8; text-decoration: line-through; }

.status-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.status-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-weight: 800; font-size: 13px; cursor: pointer;
  transition: background .12s, transform .12s;
}
.status-opt:hover { transform: translate(1px, 1px); }
.status-opt.active.st-todo { background: var(--yellow); }
.status-opt.active.st-in_progress { background: var(--primary); color: #fff; }
.status-opt.active.st-done { background: var(--green); }
.status-opt.active.st-cancelled { background: #d9d5c8; }

/* 列表里「已取消」条目弱化显示 */
.todo-item.is-cancelled { opacity: .6; }
.todo-item.is-cancelled .todo-title { text-decoration: line-through; }

/* ---------- 番茄钟 ---------- */
.focus-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(17, 17, 17, .55);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.focus-overlay.show { opacity: 1; pointer-events: auto; }

.focus-card {
  width: 100%; max-width: 420px;
  background: var(--card);
  border: 3px solid var(--ink); border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px;
  text-align: center;
}
.focus-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 15px;
  padding-bottom: 12px; border-bottom: 3px solid var(--ink);
}
.focus-x {
  width: 32px; height: 32px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); cursor: pointer; line-height: 1;
}
.focus-x:hover { background: #ff006e; color: #fff; }

.focus-task {
  margin: 16px 0 8px; font-weight: 700; font-size: 14px;
  color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.focus-ring-wrap { position: relative; width: 220px; height: 220px; margin: 8px auto; }
.focus-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.focus-ring-bg { fill: none; stroke: #e9e5d8; stroke-width: 14; }
.focus-ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 14;
  stroke-linecap: butt;
  transition: stroke-dashoffset .9s linear;
}
.focus-time {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: 46px; letter-spacing: 1px;
}
.focus-colon { animation: focusBlink 1s steps(2, start) infinite; }
@keyframes focusBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.focus-meta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 16px; }
.focus-pill {
  padding: 3px 10px;
  border: 3px solid var(--ink); border-radius: 0;
  background: #fbf7ee; font-size: 12px; font-weight: 800;
}
.focus-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.focus-actions .btn { flex: 1 1 auto; min-width: 104px; }

/* ---------- 统计 ---------- */
.stat-tile { text-align: center; padding: 18px 14px; }
.stat-tile-label { font-size: 12px; font-weight: 800; color: var(--text2); }
.stat-tile-num {
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: 32px; line-height: 1.25; margin: 4px 0 2px;
}
.stat-tile-sub { font-size: 11.5px; color: var(--text2); }
.tile-yellow { background: #ffdb33; }
.tile-cyan { background: #00f0ff; }
.tile-purple { background: #a55eea; }

.dist-list { display: grid; gap: 10px; }
.dist-row { display: flex; align-items: center; gap: 10px; }
.dist-name { min-width: 74px; font-size: 13px; font-weight: 700; }
.dist-bar {
  flex: 1; height: 20px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); overflow: hidden;
}
.dist-bar > i { display: block; height: 100%; background: var(--primary); }
.dist-bar > i.qf-q1 { background: #ff006e; }
.dist-bar > i.qf-q2 { background: #00f0ff; }
.dist-bar > i.qf-q3 { background: #ffdb33; }
.dist-bar > i.qf-q4 { background: #7bed9f; }
.dist-num { min-width: 30px; text-align: right; font-weight: 800; font-size: 13px; }

/* =====================================================
   移动端适配（第四步补充）
   ===================================================== */
@media (max-width: 767px) {
  /* 四象限改为单列堆叠，格子仍可读 */
  .quad-grid { grid-template-columns: 1fr; gap: 12px; }
  .quad-card { min-height: auto; box-shadow: 2px 2px 0 var(--ink); }
  .view-switch-btn { padding: 0 10px; font-size: 12px; }

  /* 番茄钟卡片 */
  .focus-card { padding: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .focus-ring-wrap { width: 180px; height: 180px; }
  .focus-time { font-size: 38px; }
  .focus-actions .btn { min-width: 92px; }

  .stat-tile-num { font-size: 26px; }
  .dist-name { min-width: 62px; font-size: 12px; }
}
@media (max-width: 767px) {
  /* 收集箱条目：整理按钮不压缩 */
  .todo-page .todo-item[data-id] .btn-sm { flex-shrink: 0; }
  .tag-chip { font-size: 11px; padding: 2px 6px; }
  .detail-body { padding: 14px; }
  .sub-add .btn { min-height: 38px; padding: 0 12px; }
  .nb-switch-track { width: 48px; height: 26px; }
  .nb-switch input:checked + .nb-switch-track .nb-switch-thumb { transform: translateX(21px); }

  /* 列表项删除按钮常显 */
  .todo-del { opacity: 1; }

  /* 添加栏纵向排列，控件占满宽度 */
  .todo-add-row { flex-direction: column; align-items: stretch; }
  .todo-add-row .todo-cat-sel,
  .todo-add-row .todo-due-input,
  .todo-add-row .todo-pri-btn { max-width: none; width: 100%; }
  .todo-add-row .todo-pri-btn { justify-content: center; }

  /* 日历格子缩小但仍可点击 */
  .todo-page .cal-cell { min-height: 46px; padding: 4px; font-size: 13px; }
  .todo-page .cal-head { font-size: 11px; padding: 4px 0; }
  .todo-page .cal-grid { gap: 3px; }
  .todo-page .cal-cell .dot { bottom: 3px; width: 5px; height: 5px; }

  /* 移动端阴影减弱，避免拥挤 */
  .todo-page .card,
  .todo-page .nb-card,
  .todo-page .btn,
  .todo-pri-btn,
  .todo-empty,
  .todo-page .todo-search-input { box-shadow: 2px 2px 0 var(--ink); }
}

/* =====================================================
   记账理财模块（账户 / 二级分类 / 流水 / 统计 / 预算 / 日历 / 模板 / 周期账 / 项目 / 借贷）
   设计语言沿用全站 Neo-Brutalism：2px 黑边、8-14px 圆角、交互态硬偏移阴影、高饱和撞色
   ===================================================== */

/* ---------- 页面头部：周期切换 + 隐藏金额 ---------- */
.fin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.fin-period { display: flex; align-items: center; gap: 4px; }
.fin-period-text {
  font-size: 18px; font-weight: 900; min-width: 108px; text-align: center;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
}
.fin-period-tip {
  font-size: 11px; font-weight: 700; color: var(--ink);
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px; padding: 1px 6px;
}
.eye-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--card);
  color: var(--ink); cursor: pointer; font-size: 14px; transition: all .12s;
}
.eye-btn:hover { background: var(--yellow); }

.fin-tabs { max-width: 480px; margin-bottom: 16px; }

/* ---------- 工具条 / 分段控件 ---------- */
.fin-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.fin-toolbar-right { display: flex; align-items: center; gap: 8px; }
.fin-seg {
  display: inline-flex; border: 2px solid var(--ink); border-radius: 10px;
  overflow: hidden; background: var(--card);
}
.fin-seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border: none; background: transparent;
  font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; transition: all .12s;
}
.fin-seg-btn + .fin-seg-btn { border-left: 2px solid var(--ink); }
.fin-seg-btn:hover { background: var(--hover); }
.fin-seg-btn.active { background: var(--ink); color: var(--yellow); }
.fin-only-mobile { display: none; }

/* 移动端浮动「+」按钮（桌面端隐藏：桌面已有右侧常驻表单）
   注意：不能用 .fin-only-mobile 一起控制显示 —— 两条单类选择器权重相同，
   后定义的 .fin-fab{display:flex} 会覆盖 .fin-only-mobile{display:none}，
   导致桌面端也冒出悬浮按钮。这里默认 none，只在窄屏媒体查询里打开。 */
.fin-fab {
  position: fixed; right: 18px; bottom: 22px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--accent); color: #fff;
  font-size: 22px; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  display: none; align-items: center; justify-content: center;
}
.fin-fab:active { transform: translate(2px, 2px); box-shadow: none; }

/* ---------- 子 Tab（统计/预算内部分页） ---------- */
.fin-subtabs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.fin-subtabs-tip {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text2);
}
.ml-auto { margin-left: auto; }

/* ---------- 筛选区 ---------- */
.fin-filters {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
/* 筛选内容统一放在 .fin-filter-body 里（移动端靠它整体折叠） */
.fin-filter-body { display: grid; gap: 10px; }
.fin-range-chips, .fin-type-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-range-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.fin-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* 筛选区内的紧凑控件。
   注意：基础样式 `.input, select.input, textarea.input` 里写了 width:100%，
   权重 (0,1,1) 高于单类选择器，所以这里必须用 `select.fin-sm-input` 才能压过它，
   否则下拉框会各占一整行，筛选栏在桌面端被撑成 4 行。 */
.input.fin-sm-input,
select.fin-sm-input,
input.fin-sm-input {
  min-height: 34px; padding: 4px 8px; font-size: 13px;
  width: auto; min-width: 128px; max-width: 200px;
}
.fin-filter-row > .fin-sm-input { flex: 0 1 auto; }
.fin-search { position: relative; flex: 1 1 180px; min-width: 150px; max-width: 280px; }
.fin-search > i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--text2); pointer-events: none;
}
.fin-search .input { padding-left: 30px; min-height: 34px; font-size: 13px; width: 100%; }

/* 移动端把筛选条件收进折叠面板，避免占掉半屏。
   注意：「收起时隐藏内容」的规则必须只写在窄屏媒体查询里 ——
   否则桌面端渲染出的折叠类名会把整个筛选栏隐藏掉（元素在但 display:none，
   既看不见也无法获得焦点）。折叠按钮默认隐藏，桌面端始终展开。 */
.fin-filter-toggle { display: none; width: 100%; }
.fin-filter-toggle .btn { width: 100%; justify-content: center; }
.fin-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; margin-left: 4px;
  border: 2px solid var(--ink); border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
}

/* ---------- 记账 Tab 双栏 ---------- */
.fin-record-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; align-items: start;
}
.fin-records-col { min-width: 0; }
.fin-form-panel { position: sticky; top: 78px; min-width: 0; }
.fin-form-card {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden;
}
.fin-form-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 2px solid var(--ink);
  background: var(--yellow); font-weight: 800; font-size: 15px;
}
.fin-form { padding: 14px; display: grid; gap: 10px; }

/* ---------- 汇总条 ---------- */
.fin-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 10px; margin-bottom: 14px;
}
.fin-summary-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fin-summary-item span { font-size: 11px; font-weight: 700; color: var(--text2); }
.fin-summary-item b { font-size: 15px; font-weight: 900; }

/* ---------- 流水列表 ---------- */
.fin-day { margin-bottom: 12px; }
.fin-day-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 4px 8px; flex-wrap: wrap;
}
.fin-day-label { font-size: 13px; font-weight: 900; }
.fin-day-totals { display: flex; gap: 10px; font-size: 11.5px; font-weight: 700; }
.fin-day-totals em { font-style: normal; }
.fin-day-body {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 6px; display: grid; gap: 4px;
}
.fin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 2px solid transparent; border-radius: 10px;
  transition: background .12s, border-color .12s;
}
.fin-row:hover { background: var(--hover); border-color: var(--ink); }
.fin-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 10px; font-size: 17px; line-height: 1;
}
.fin-row-main { flex: 1; min-width: 0; cursor: pointer; }
.fin-row-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700;
}
.fin-cat-name { word-break: break-word; }
.fin-sub-tag {
  font-size: 10.5px; font-weight: 800; padding: 0 5px;
  border: 2px solid var(--ink); border-radius: 5px; background: #e9e5d8;
}
.fin-row-note {
  font-size: 12px; font-weight: 600; color: var(--text2);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-row-meta { font-size: 11.5px; color: var(--text2); margin-top: 1px; word-break: break-word; }
.fin-row-meta b { color: var(--ink); }
.fin-row-right { flex-shrink: 0; text-align: right; }
.fin-row-amt { font-size: 15px; font-weight: 900; white-space: nowrap; }
.fin-amt-transfer { color: #636e72; font-weight: 800; }
.fin-row-acts { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.fin-row:hover .fin-row-acts { opacity: 1; }
.fin-act {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent; border-radius: 7px; background: transparent;
  color: var(--text2); cursor: pointer; font-size: 12px; transition: all .12s;
}
.fin-act:hover { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.fin-act.danger:hover { background: var(--accent); color: #fff; }
.fin-act:disabled { opacity: .3; cursor: not-allowed; }
.fin-act:disabled:hover { background: transparent; border-color: transparent; }

.fin-loading { text-align: center; padding: 26px 10px; color: var(--text2); font-size: 13px; font-weight: 600; }
.fin-more { text-align: center; padding: 10px 0; }
.fin-more-tip { text-align: center; font-size: 12px; color: var(--text2); padding: 10px 0; }
.fin-empty { text-align: center; padding: 44px 16px; }
.fin-empty > i { font-size: 40px; color: var(--accent); display: block; margin-bottom: 12px; }
.fin-empty p { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.fin-empty-sub { font-size: 12px !important; font-weight: 600 !important; color: var(--text2); margin-bottom: 14px; }
.fin-empty-sm { padding: 26px 12px; }
.fin-empty-sm > i { font-size: 28px; margin-bottom: 8px; }
.fin-empty-sm p { font-size: 13px; }

/* ---------- 记一笔表单 ---------- */
.fin-type-tabs { margin-bottom: 4px; }
.fin-amount-box {
  position: relative; display: flex; align-items: center;
  border: 2px solid var(--ink); border-radius: 12px; background: #fffdf5; overflow: hidden;
}
.fin-amount {
  width: 100%; border: none; outline: none; background: transparent;
  padding: 10px 14px 10px 34px;
  font-size: 32px; font-weight: 900; color: var(--ink);
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
}
.fin-amount::placeholder { color: #cfc9b4; }
.fin-amount-cur {
  position: absolute; left: 12px; font-size: 20px; font-weight: 900; color: var(--text2);
}
.fin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fin-pad-key {
  min-height: 40px; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card); color: var(--ink); font-size: 17px; font-weight: 800;
  cursor: pointer; transition: all .1s;
}
.fin-pad-key:hover { background: var(--yellow); }
.fin-pad-key:active { transform: translate(2px, 2px); }
.fin-pad-key.del { background: #e9e5d8; }

.fin-tpl-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-tpl-label { font-size: 11px; font-weight: 800; color: var(--text2); }
.fin-tpl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--cyan); color: var(--ink); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.fin-tpl-chip:hover { background: var(--yellow); transform: translate(-1px, -1px); }
.fin-tpl-empty { font-size: 11px; color: var(--text2); }

.fin-cat-parents {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px;
}
.fin-cat-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card); cursor: pointer; transition: all .12s;
}
.fin-cat-item:hover { background: var(--hover); }
.fin-cat-item.active { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.fin-cat-ico {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 8px; font-size: 14px;
}
.fin-cat-name { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.25; }
.fin-cat-hot {
  position: absolute; top: 3px; right: 4px; font-size: 9px; font-weight: 800;
  background: var(--accent); color: #fff; border-radius: 4px; padding: 0 3px;
}
.fin-sub-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fin-sub-label { font-size: 11px; font-weight: 800; color: var(--text2); }
.fin-sub-item {
  padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--card); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .12s;
}
.fin-sub-item:hover { background: var(--hover); }
.fin-sub-item.active { background: var(--ink); color: var(--yellow); }

.fin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-grid2b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.fin-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.fin-inline .input { width: 70px; min-height: 36px; }

.fin-imgbox { display: flex; gap: 8px; align-items: center; }
.fin-img-add {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 2px dashed var(--ink); border-radius: 10px;
  background: var(--card); color: var(--text2); font-size: 13px; font-weight: 700; cursor: pointer;
}
.fin-img-add:hover { background: var(--hover); color: var(--ink); }
.fin-img-preview { position: relative; }
.fin-img-preview img { max-height: 120px; border: 2px solid var(--ink); border-radius: 10px; display: block; }
.fin-img-del {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); color: #fff;
  cursor: pointer; font-size: 12px;
}
.fin-img-loading { font-size: 12px; color: var(--text2); }

.fin-form-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.fin-hint { font-size: 11.5px; color: var(--text2); margin-top: 6px; line-height: 1.6; }
.fin-notice {
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; line-height: 1.7;
}
.fin-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.fin-check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- 记账日历 ---------- */
.fin-cal-card { padding: 16px; }
.fin-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fin-cal-head h3 { font-size: 16px; font-weight: 800; }
.fin-cal-grid { gap: 5px; }
.fin-cal-cell {
  min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 4px !important;
}
.fin-cal-day { font-size: 12px; font-weight: 800; }
.fin-cal-amt { font-size: 10.5px; font-weight: 800; color: var(--red); }
.fin-cal-amt.income { color: var(--green-text); }
.fin-cal-cell.has { background: #fff8dc; }
.fin-cal-cell.over { background: #ffe3e3; }
.fin-cal-cell.today { background: var(--cyan); }
.fin-cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text2); margin-top: 12px; font-weight: 600; }
.fin-cal-legend i {
  display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink);
  border-radius: 3px; margin-right: 5px; vertical-align: -1px;
}
.fin-day-box { display: grid; gap: 4px; }
.fin-day-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---------- 流水详情 ---------- */
.fin-detail { display: grid; gap: 8px; }
.fin-detail-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0; border-bottom: 2px dashed rgba(17,17,17,.15);
}
.fin-detail-row > span { width: 68px; flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--text2); }
.fin-detail-row > div { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; word-break: break-word; }
.fin-detail-img img { max-width: 100%; border: 2px solid var(--ink); border-radius: 10px; margin-bottom: 10px; }
.fin-detail-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- 「更多功能」宫格 ---------- */
.fin-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fin-more-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--card); cursor: pointer; text-align: left; transition: all .12s;
}
.fin-more-item:hover { background: var(--hover); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.fin-more-item i { font-size: 18px; color: var(--accent); }
.fin-more-item b { font-size: 14px; font-weight: 800; }
.fin-more-item span { font-size: 11.5px; color: var(--text2); }

/* ---------- 回收站 / 备份 / 模板 / 周期账 / 项目 通用行 ---------- */
.fin-trash-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.fin-trash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card); margin-bottom: 8px; flex-wrap: wrap;
}
.fin-trash-row.archived { background: #f2efe6; }
.fin-trash-row.archived .fin-row-title { opacity: .7; }
.fin-trash-acts { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; flex-wrap: wrap; }

/* ---------- 批量记账表格 ---------- */
.fin-batch-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: 10px; }
.fin-batch { width: 100%; border-collapse: collapse; min-width: 720px; }
.fin-batch th {
  background: var(--yellow); font-size: 12px; font-weight: 800; text-align: left;
  padding: 8px; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.fin-batch td { padding: 6px; border-bottom: 2px solid #e9e5d8; vertical-align: middle; }
.fin-batch tr:last-child td { border-bottom: none; }
.fin-batch .fin-sm-input { min-width: 0; width: 100%; }
.fin-batch-na { font-size: 12px; color: var(--text2); }
.fin-batch-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }

/* ---------- 统计 ---------- */
.fin-stat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.fin-stat-card {
  display: flex; flex-direction: column; gap: 3px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card); padding: 14px;
}
.fin-stat-card.net { background: var(--yellow); }
.fin-stat-label { font-size: 12px; font-weight: 800; color: var(--text2); }
.fin-stat-num { font-size: 22px; font-weight: 900; font-family: "Archivo Black", "Space Grotesk", sans-serif; }
.fin-stat-sub { font-size: 11.5px; color: var(--text2); }

.fin-alerts { display: grid; gap: 8px; margin-bottom: 14px; }
.fin-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px;
  font-size: 13px; font-weight: 700;
}
.fin-alert.warn { background: #fff8dc; }
.fin-alert.danger { background: #ffe9c9; }
.fin-alert.over { background: #ffd8d8; }

.fin-chart-card {
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 14px; margin-bottom: 14px;
}
.fin-chart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.fin-chart-head h3 { font-size: 15px; font-weight: 800; }
.fin-chart-tip { font-size: 11.5px; font-weight: 700; color: var(--text2); display: inline-flex; align-items: center; gap: 6px; }
.fin-chart-tip i {
  display: inline-block; width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 3px;
}
.fin-chart-box { position: relative; height: 230px; min-width: 0; }
.fin-chart-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fin-chart-2col > .fin-chart-card { margin-bottom: 0; }

.fin-donut-wrap { display: flex; justify-content: center; }
.fin-donut { height: 260px; width: 100%; }
.fin-donut-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; width: 120px;
}
.fin-donut-center span { display: block; font-size: 11px; font-weight: 700; color: var(--text2); }
.fin-donut-center b { font-size: 16px; font-weight: 900; }

.fin-rank { display: grid; gap: 12px; }
.fin-rank-row { display: flex; gap: 10px; align-items: flex-start; }
.fin-rank-row.clickable { cursor: pointer; }
.fin-rank-row.clickable:hover .fin-rank-name { text-decoration: underline; }
.fin-rank-no {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 8px; font-size: 12px; font-weight: 900;
}
.fin-rank-main { flex: 1; min-width: 0; }
.fin-rank-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-rank-name { font-size: 13.5px; font-weight: 700; }
.fin-rank-top b { font-size: 13.5px; font-weight: 900; }
.fin-rank-bar {
  height: 10px; border: 2px solid var(--ink); border-radius: 5px;
  background: #e9e5d8; overflow: hidden; margin-top: 4px;
}
.fin-rank-bar > i { display: block; height: 100%; }
.fin-rank-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text2); margin-top: 3px; flex-wrap: wrap; }
.fin-rank-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* ---------- 预算 ---------- */
.card.mt-4, .fin-card.mt-4 { margin-top: 16px; }
.fin-card {
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card); padding: 16px;
  margin-bottom: 14px;
}
.fin-budget-hero {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 16px; margin-bottom: 14px; align-items: center;
}
.fin-budget-info h3 { font-size: 16px; font-weight: 900; margin-bottom: 12px; }
.fin-budget-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fin-budget-kv > div { display: flex; flex-direction: column; gap: 2px; }
.fin-budget-kv span { font-size: 11.5px; font-weight: 700; color: var(--text2); }
.fin-budget-kv b { font-size: 16px; font-weight: 900; }
.fin-budget-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.fin-budget-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px dashed rgba(17,17,17,.14); }
.fin-budget-row:last-child { border-bottom: none; }
.fin-budget-main { flex: 1; min-width: 0; }
.fin-budget-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fin-budget-name { font-size: 13.5px; font-weight: 800; }
.fin-budget-nums b { font-size: 14px; font-weight: 900; }
.fin-budget-nums em { font-style: normal; font-size: 12px; color: var(--text2); font-weight: 700; }
.fin-progress {
  height: 12px; border: 2px solid var(--ink); border-radius: 6px;
  background: #e9e5d8; overflow: hidden; margin-top: 5px;
}
.fin-progress > i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.fin-progress.lv-warn > i { background: var(--yellow); }
.fin-progress.lv-danger > i { background: var(--accent); }
.fin-progress.lv-over > i { background: #c92a2a; }
.fin-budget-meta {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--text2); margin-top: 3px; font-weight: 600;
}
.lv-ok { color: var(--green-text); }
.lv-warn { color: #b8860b; }
.lv-danger { color: var(--accent); }
.lv-over { color: #c92a2a; }
.lv-none { color: var(--text2); }
.fin-budget-input { font-size: 20px !important; font-weight: 900 !important; }
.fin-quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fin-cat-budget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fin-cat-set {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card); cursor: pointer; font-size: 13px; font-weight: 700; text-align: left;
}
.fin-cat-set:hover { background: var(--hover); }
.fin-cat-set i { margin-left: auto; font-size: 11px; color: var(--text2); }

/* ---------- 账户 ---------- */
.fin-net-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--yellow);
  padding: 18px 20px; margin-bottom: 16px;
}
.fin-net-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fin-net-label { font-size: 12px; font-weight: 800; }
.fin-net-num { font-size: 34px; font-weight: 900; font-family: "Archivo Black", "Space Grotesk", sans-serif; line-height: 1.1; }
.fin-net-sub { font-size: 12.5px; font-weight: 700; }
.fin-net-eye { background: #fff; }
.fin-acc-groups { display: grid; gap: 14px; }
.fin-acc-group { margin-bottom: 0; }
.fin-acc-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border-bottom: 2px dashed rgba(17,17,17,.14); border-radius: 8px; cursor: pointer;
  transition: background .12s;
}
.fin-acc-line:last-child { border-bottom: none; }
.fin-acc-line:hover { background: var(--hover); }
.fin-acc-line.archived { cursor: default; }
.fin-acc-line.archived:hover { background: transparent; }
.fin-acc-bal { font-size: 16px; font-weight: 900; white-space: nowrap; }
.fin-acc-acts { display: flex; gap: 3px; flex-shrink: 0; }
.fin-acc-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.fin-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.fin-type-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card); cursor: pointer; text-align: left; transition: all .12s;
}
.fin-type-item b { font-size: 18px; }
.fin-type-item span { font-size: 13px; font-weight: 800; }
.fin-type-item em { font-style: normal; font-size: 11px; color: var(--text2); line-height: 1.4; }
.fin-type-item:hover { background: var(--hover); }
.fin-type-item.active { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.fin-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.fin-icon-item {
  height: 40px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card);
  font-size: 18px; cursor: pointer; transition: all .12s;
}
.fin-icon-item:hover { background: var(--hover); }
.fin-icon-item.active { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.fin-color-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-color-item {
  width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 8px; cursor: pointer;
}
.fin-color-item.active { box-shadow: 0 0 0 3px var(--ink) inset; }

/* ---------- 分类管理 ---------- */
.fin-cm-group { border: 2px solid var(--ink); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.fin-cm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card); }
.fin-cm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-cm-main b { font-size: 14px; font-weight: 800; }
.fin-cm-main span { font-size: 11px; color: var(--text2); }
.fin-cm-acts { display: flex; gap: 3px; flex-shrink: 0; }
.fin-cm-subs { background: #faf7ee; padding: 6px 10px; border-top: 2px dashed rgba(17,17,17,.16); }
.fin-cm-sub {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: 13px; font-weight: 600;
}
.fin-cm-sub > span:first-child { flex: 1; min-width: 0; }
.fin-cm-used { font-size: 11px; color: var(--text2); }
.fin-cm-empty { font-size: 12px; color: var(--text2); padding: 4px 0; }
.hidden-cat { opacity: .5; }

/* ---------- 借贷 ---------- */
.fin-debt-summary { margin-bottom: 6px; }
.fin-debt-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--card); margin-bottom: 8px;
}
.fin-debt-row.settled { background: #f2f7f4; }
.fin-repay-list { margin-top: 6px; font-size: 12px; }
.fin-repay-list summary { cursor: pointer; font-weight: 700; color: var(--text2); }
.fin-repay-item { display: flex; justify-content: space-between; padding: 3px 0 0 10px; font-size: 12px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .fin-record-wrap { grid-template-columns: minmax(0, 1fr); }
  .fin-form-panel { display: none; }
  .fin-only-mobile { display: inline-flex; }
  .fin-chart-2col { grid-template-columns: minmax(0, 1fr); }
  .fin-budget-hero { grid-template-columns: minmax(0, 1fr); }
  .fin-donut { height: 220px; }
  /* 桌面端才有右侧常驻表单，移动端用底部浮动按钮，这里给列表留出安全距离 */
  .fin-records-col { padding-bottom: 76px; }
  /* 筛选条件折叠：移动端默认收起，点「筛选条件」展开 */
  .fin-filter-toggle { display: block; }
  .fin-filters { display: block; }
  /* 折叠状态类名统一用 .folded（与其它模块的命名习惯一致，避免过长的复合类名） */
  .fin-filters.folded .fin-filter-body { display: none; }
  .fin-filters:not(.folded) .fin-filter-body { margin-top: 10px; }
}
/* 桌面端（宽屏）筛选栏始终可见可交互，不受折叠状态影响 */
@media (min-width: 1024px) {
  .fin-filter-toggle { display: none !important; }
  .fin-filter-body { display: grid !important; margin-top: 0 !important; }
}

@media (max-width: 767px) {
  .fin-head { gap: 8px; }
  .fin-period-text { font-size: 16px; min-width: 92px; }
  .fin-stat-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fin-stat-num { font-size: 20px; }
  .fin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fin-net-num { font-size: 26px; }
  .fin-net-card { padding: 14px; }
  .fin-amount { font-size: 26px; }
  .fin-pad-key { min-height: 36px; font-size: 15px; }
  .fin-cat-parents { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .fin-grid2, .fin-grid2b { grid-template-columns: minmax(0, 1fr); }
  .fin-row-acts { opacity: 1; }
  .fin-acc-acts { flex-wrap: wrap; }
  .fin-acc-line { flex-wrap: wrap; }
  .fin-trash-acts { margin-left: 0; }
  .fin-chart-box { height: 200px; }
  .fin-budget-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-cal-cell { min-height: 46px; }
  .fin-cal-amt { font-size: 9.5px; }
  .fin-fab { right: 14px; bottom: 18px; width: 54px; height: 54px; display: flex; }
}

/* ---------- 概览页：金额隐藏开关与预算预警 ---------- */
.fin-alert[data-goto] { cursor: pointer; }
.fin-alert[data-goto]:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.fin-alert-go { font-size: 11.5px; font-weight: 800; white-space: nowrap; }

/* =====================================================
   今日概览（首页仪表盘）
   -----------------------------------------------------
   视觉沿用全站既有的 Neo-Brutalism 令牌（纯黑粗边框、高饱和撞色、硬偏移阴影仅在交互态），
   而不是另起一套 3px/零圆角：概览页与其它模块共用同一套 .card/.btn 视觉，才能保持整站一致。
   各分区的「主题色」集中定义在下面的 --ov-* 变量里，想换配色只改这一段即可。
   ===================================================== */
:root {
  /* 分区主题色：待办青 / 财务粉 / 习惯绿 / 待买黄 / 健身紫 / 笔记蓝 / 书影音红 */
  --ov-todo: #4cc9f0;
  --ov-finance: #ff4d6d;
  --ov-habits: #06d6a0;
  --ov-shopping: #ffd643;
  --ov-fitness: #b388ff;
  --ov-notes: #4361ee;
  --ov-media: #ff6b81;
  --ov-muted: #b2bec3;
  --ov-shadow: 4px 4px 0 var(--ink);
  --ov-shadow-lg: 6px 6px 0 var(--ink);
}

/* 文字语义色：收入绿 / 支出红 */
.ink-green { color: var(--green-text); font-weight: 800; }
.ink-red { color: var(--red); font-weight: 800; }

/* ---------- Hero 区 ---------- */
.ov-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px;
  align-items: center;
  background: var(--yellow);
  border: 2px solid var(--ink); border-radius: 14px;
  padding: 20px 24px; margin-bottom: 16px;
}
.ov-hero-left { min-width: 0; }
.ov-greeting {
  font-size: 28px; font-weight: 900; line-height: 1.2;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  word-break: break-word;
}
.ov-date { font-size: 14px; color: var(--ink); opacity: .72; font-weight: 700; margin-top: 2px; }
.ov-quote { font-size: 13px; color: var(--ink); opacity: .85; font-weight: 600; margin-top: 8px; }
.ov-quote i { opacity: .55; margin-right: 4px; }

.ov-hero-right {
  display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap;
}
.ov-hero-metric {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 146px; padding: 10px 14px;
  background: rgba(255,255,255,.62);
  border: 2px solid var(--ink); border-radius: 12px;
  cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.ov-hero-metric:hover { transform: translateY(-2px); box-shadow: var(--ov-shadow); background: #fff; }
.ov-hero-label { font-size: 11.5px; font-weight: 800; color: var(--ink); opacity: .7; }
.ov-hero-num {
  font-size: 32px; font-weight: 900; line-height: 1.1;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.ov-hero-num.pos { color: var(--green-text); }
.ov-hero-num.neg { color: var(--red); }
.ov-hero-num.warn { color: #b8860b; }
.ov-hero-sub { font-size: 11.5px; color: var(--ink); opacity: .75; font-weight: 600; }
.ov-hero-sub em { font-style: normal; }

/* 环形进度（SVG） */
.ov-ring-wrap { position: relative; flex-shrink: 0; }
.ov-ring { width: 100%; height: 100%; display: block; }
.ov-ring-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ov-hero-ring-metric { align-items: center; min-width: 132px; }
.ov-hero-ring-metric .ov-hero-label { align-self: flex-start; }

/* ---------- 快捷操作栏 ---------- */
.ov-quick {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 16px;
}
.ov-quick-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 64px; padding: 10px 12px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  font-size: 14px; font-weight: 800; color: var(--ink); cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.ov-quick-btn i { font-size: 20px; }
.ov-quick-btn:hover { transform: translateY(-2px); box-shadow: var(--ov-shadow-lg); }
.ov-quick-btn.th-pink:hover { background: var(--ov-finance); color: #fff; }
.ov-quick-btn.th-cyan:hover { background: var(--ov-todo); }
.ov-quick-btn.th-blue:hover { background: var(--ov-notes); color: #fff; }
.ov-quick-btn.th-green:hover { background: var(--ov-habits); }
.ov-quick-btn.th-yellow:hover { background: var(--ov-shopping); }

/* ---------- 6 个核心指标卡 ---------- */
.ov-cards {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 16px;
}
.ov-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 14px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.ov-card:hover { transform: translateY(-2px); box-shadow: var(--ov-shadow-lg); }
/* 左侧主题色竖条：一眼区分分区 */
.ov-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border-right: 2px solid var(--ink); background: var(--ov-muted);
}
.ov-card.th-cyan::before { background: var(--ov-todo); }
.ov-card.th-pink::before { background: var(--ov-finance); }
.ov-card.th-green::before { background: var(--ov-habits); }
.ov-card.th-yellow::before { background: var(--ov-shopping); }
.ov-card.th-purple::before { background: var(--ov-fitness); }
.ov-card.th-blue::before { background: var(--ov-notes); }
.ov-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-left: 6px; }
.ov-card-label { font-size: 12px; font-weight: 800; color: var(--text2); }
.ov-card-badge {
  font-style: normal; font-size: 9.5px; font-weight: 800; margin-left: 4px;
  background: var(--accent); color: #fff; border-radius: 5px; padding: 0 4px;
}
.ov-card-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 8px; font-size: 12px;
  background: var(--ov-todo);
}
.ov-card.th-pink .ov-card-icon { background: var(--ov-finance); color: #fff; }
.ov-card.th-green .ov-card-icon { background: var(--ov-habits); }
.ov-card.th-yellow .ov-card-icon { background: var(--ov-shopping); }
.ov-card.th-purple .ov-card-icon { background: var(--ov-fitness); }
.ov-card.th-blue .ov-card-icon { background: var(--ov-notes); color: #fff; }
.ov-card-value {
  font-size: 24px; font-weight: 900; line-height: 1.15; padding-left: 6px;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums; word-break: break-all;
  animation: ovFadeIn .3s ease;
}
.ov-card-value small { font-size: 13px; font-weight: 700; color: var(--text2); }
.ov-card-sub {
  font-size: 11.5px; color: var(--text2); font-weight: 600; padding-left: 6px;
  line-height: 1.45; word-break: break-word;
}
.ov-card .ov-bar { padding-left: 0; margin-top: 4px; }
@keyframes ovFadeIn { from { opacity: .3; } to { opacity: 1; } }

/* ---------- 进度条（0.5s 填充动画，按用度分级着色） ---------- */
.ov-bar {
  height: 10px; border: 2px solid var(--ink); border-radius: 5px;
  background: #e9e5d8; overflow: hidden;
}
.ov-bar.thin { height: 7px; }
.ov-bar.tall { height: 18px; }
.ov-bar > i { display: block; height: 100%; background: var(--green); transition: width .5s ease; }
.ov-bar > i.lv-ok { background: var(--green); }
.ov-bar > i.lv-warn { background: var(--yellow); }
.ov-bar > i.lv-danger { background: var(--accent); }
.ov-bar > i.lv-over { background: #c92a2a; }
.ov-bar > i.lv-none { background: var(--ov-muted); }
.lv-ok { color: var(--green-text); }
.lv-warn { color: #b8860b; }
.lv-danger { color: var(--accent); }
.lv-over { color: #c92a2a; }
.lv-none { color: var(--text2); }

/* ---------- 主体两列 ---------- */
.ov-columns {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px;
  align-items: start; margin-bottom: 16px;
}
.ov-col-left, .ov-col-right { display: grid; gap: 16px; min-width: 0; }
.ov-panel {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 16px; min-width: 0;
}
.ov-panel.ov-flash { animation: ovFlash .6s ease 2; }
@keyframes ovFlash { 50% { background: var(--hover); box-shadow: var(--ov-shadow); } }

/* 区块标题栏 */
.ov-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.ov-head h3 { font-size: 16px; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; }
.ov-head-emoji { font-size: 15px; }
.ov-head-count {
  font-style: normal; font-size: 12px; font-weight: 800; color: var(--ink);
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px; padding: 0 5px;
}
.ov-head-actions { display: flex; align-items: center; gap: 8px; }
.ov-head-total { font-size: 12px; font-weight: 700; color: var(--text2); }
.ov-head-total b { color: var(--ink); }
.ov-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 2px solid transparent; border-radius: 8px;
  padding: 3px 8px; font-size: 12px; font-weight: 800; color: var(--text2);
  cursor: pointer; transition: all .12s;
}
.ov-link:hover { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.ov-icon-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--ink); border-radius: 7px;
  color: var(--ink); font-size: 11px; cursor: pointer; transition: all .12s;
}
.ov-icon-btn:hover { background: var(--yellow); }
.ov-month-nav { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; }
.ov-month-nav span { min-width: 62px; text-align: center; }

/* 空状态 */
.ov-empty { text-align: center; padding: 26px 12px; }
.ov-empty-emoji { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.ov-empty p { font-size: 13px; font-weight: 700; color: var(--text2); }
.ov-empty-btn {
  margin-top: 10px; padding: 6px 14px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 8px;
  font-size: 12.5px; font-weight: 800; color: var(--ink); cursor: pointer; transition: all .12s;
}
.ov-empty-btn:hover { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.ov-hint-line { font-size: 12.5px; color: var(--text2); font-weight: 600; padding: 10px 0; text-align: center; }

/* ---------- 今日待办清单 ---------- */
.ov-list { display: grid; gap: 6px; }
.ov-todo {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  border: 2px solid transparent; background: #faf8f2;
  transition: background .12s, border-color .12s;
}
.ov-todo:hover { background: var(--hover); border-color: var(--ink); }
/* 高优先级：左侧红色竖条 */
.ov-todo.pri-high { box-shadow: inset 5px 0 0 var(--accent); }
.ov-todo.is-done { opacity: .55; background: #f2efe6; }
.ov-todo.is-done .ov-todo-text { text-decoration: line-through; color: var(--text2); }
.ov-check {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--ink); border-radius: 6px;
  color: transparent; font-size: 11px; cursor: pointer;
  transition: transform .2s, background .15s, color .15s;
}
.ov-check:active { transform: scale(.9); }
.ov-check.checked { background: var(--green); color: var(--ink); }
.ov-todo-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; word-break: break-word; }
.ov-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 1px 6px;
  border: 2px solid var(--ink); border-radius: 6px; background: #e9e5d8;
}
.ov-tag.cat-work { background: var(--cyan); }
.ov-tag.cat-life { background: var(--green); }
.ov-tag.cat-study { background: var(--purple); }
.ov-tag.overdue-tag { background: var(--accent); color: #fff; }
.ov-more {
  display: block; width: 100%; margin-top: 10px; padding: 7px;
  background: transparent; border: 2px dashed var(--ink); border-radius: 10px;
  font-size: 12.5px; font-weight: 800; color: var(--text2); cursor: pointer; transition: all .12s;
}
.ov-more:hover { background: var(--yellow); color: var(--ink); border-style: solid; }

/* 内联新建（待办 / 待买） */
.ov-inline-add { display: flex; gap: 6px; margin-bottom: 10px; }
.ov-inline-input {
  flex: 1; min-width: 0; min-height: 38px; padding: 6px 10px;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 9px;
  font-size: 13.5px; font-weight: 600; font-family: inherit; outline: none;
}
.ov-inline-input:focus { box-shadow: 3px 3px 0 var(--accent); }
.ov-inline-ok, .ov-inline-cancel {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 9px; cursor: pointer; font-size: 13px;
}
.ov-inline-ok { background: var(--green); color: var(--ink); }
.ov-inline-cancel { background: var(--card); color: var(--text2); }
.ov-inline-ok:hover { background: var(--yellow); }
.ov-inline-cancel:hover { background: var(--accent); color: #fff; }

/* ---------- 今日日程时间线 ---------- */
.ov-timeline { display: grid; gap: 0; }
.ov-tl-item {
  display: grid; grid-template-columns: 52px 14px minmax(0, 1fr);
  gap: 8px; align-items: start; position: relative; padding-bottom: 12px;
}
.ov-tl-item:last-child { padding-bottom: 0; }
/* 连接线：由圆点向下延伸到下一项 */
.ov-tl-item:not(:last-child) .ov-tl-dot::after {
  content: ''; position: absolute; left: 50%; top: 14px; bottom: -2px;
  width: 2px; transform: translateX(-50%); background: rgba(17,17,17,.2);
}
.ov-tl-time {
  font-size: 13px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.ov-tl-dot {
  position: relative; width: 14px; height: 14px; margin-top: 3px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--ov-todo);
}
.ov-tl-item.past .ov-tl-time { color: var(--ov-muted); }
.ov-tl-item.past .ov-tl-dot { background: #e9e5d8; }
/* 当前/下一个日程：黄色脉冲圆点 */
.ov-tl-item.current .ov-tl-dot { background: var(--yellow); animation: ovPulse 1.6s ease-in-out infinite; }
.ov-tl-item.current .ov-tl-time { color: var(--ink); }
@keyframes ovPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,214,67,.85); }
  50% { box-shadow: 0 0 0 6px rgba(255,214,67,0); }
}
.ov-tl-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; background: #faf8f2;
  border: 2px solid var(--ink); border-radius: 9px; min-width: 0;
}
.ov-tl-card b { font-size: 14px; font-weight: 700; word-break: break-word; }
.ov-tl-note { font-size: 11.5px; color: var(--text2); word-break: break-word; }

/* ---------- 最近笔记 ---------- */
.ov-note {
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; transition: background .12s, border-color .12s;
}
.ov-note:hover { background: var(--hover); border-color: var(--ink); }
.ov-note + .ov-note { margin-top: 4px; }
.ov-note-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ov-note-title {
  font-size: 14.5px; font-weight: 800; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-note-time { font-size: 11px; color: var(--text2); font-weight: 600; flex-shrink: 0; }
.ov-note-excerpt {
  font-size: 12px; color: var(--text2); line-height: 1.5; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 本月收支 ---------- */
.ov-donut-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.ov-donut { position: relative; width: 168px; height: 168px; }
.ov-donut canvas { width: 100% !important; height: 100% !important; }
.ov-donut-center {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.ov-donut-center span { font-size: 11px; font-weight: 800; color: var(--text2); }
.ov-donut-center b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
/* 无数据时的灰色空环 */
.ov-donut-ring {
  width: 100%; height: 100%; border-radius: 50%;
  border: 18px solid #e9e5d8;
}
.ov-donut-empty .ov-donut-center b { color: var(--text2); }

.ov-top3 { display: grid; gap: 8px; }
.ov-top3-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; background: transparent; border: 2px solid transparent;
  border-radius: 9px; cursor: pointer; text-align: left; transition: all .12s;
}
.ov-top3-row:hover { background: var(--hover); border-color: var(--ink); }
.ov-top3-row .ov-bar { grid-column: 1 / -1; }
.ov-ico {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 8px; font-size: 13px;
}
.ov-top3-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-top3-amt { font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ov-top3-pct { font-size: 11px; font-weight: 700; color: var(--text2); min-width: 38px; text-align: right; }

.ov-income-line {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 2px dashed rgba(17,17,17,.16);
  font-size: 12px; font-weight: 700; color: var(--text2);
}
.ov-income-line b { font-size: 13px; }
.ov-income-line em { font-style: normal; font-weight: 600; }
.ov-income-line .ov-sep { opacity: .4; }

/* ---------- 预算进度 ---------- */
.ov-warn-list { display: grid; gap: 6px; margin-bottom: 12px; }
.ov-warn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 2px solid var(--ink); border-radius: 9px;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .12s;
}
.ov-warn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.ov-warn.lv-warn { background: #fff8dc; }
.ov-warn.lv-danger { background: #ffe9c9; }
.ov-warn.lv-over { background: #ffd8d8; }
.ov-warn span { flex: 1; min-width: 0; }

.ov-budget-total { display: grid; gap: 6px; }
.ov-budget-pct {
  font-size: 26px; font-weight: 900; line-height: 1.1;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
}
.ov-budget-nums {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text2); font-weight: 700;
}
.ov-budget-nums b { color: var(--ink); font-weight: 900; }
.ov-budget-remain { font-size: 12.5px; font-weight: 700; color: var(--text2); }
.ov-cat-budgets { display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(17,17,17,.16); }
.ov-cat-budget { display: grid; gap: 4px; }
.ov-cat-budget-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; }
.ov-cat-budget-top em { font-style: normal; font-weight: 800; font-size: 11.5px; }

/* ---------- 今日习惯快捷打卡 ---------- */
.ov-habits { display: grid; gap: 8px; }
.ov-habit {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px;
  background: #faf8f2; transition: background .15s;
}
.ov-habit.is-done { background: #e8faf2; }
.ov-habit-name {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; word-break: break-word;
}
.ov-habit.is-done .ov-habit-name { color: var(--text2); }
.ov-habit-name i { font-size: 8px; color: var(--ov-habits); flex-shrink: 0; }
.ov-streak {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 800; background: var(--orange); color: #fff;
  border: 2px solid var(--ink); border-radius: 6px; padding: 0 5px;
}
.ov-counter { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ov-count-btn {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--ink); border-radius: 7px;
  font-size: 14px; font-weight: 900; color: var(--ink); cursor: pointer; line-height: 1;
}
.ov-count-btn:hover { background: var(--yellow); }
.ov-count-val {
  font-size: 13px; font-weight: 900; min-width: 34px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ov-count-val small { font-size: 10px; font-weight: 700; color: var(--text2); }
.ov-num-btn {
  flex-shrink: 0; min-height: 32px; padding: 0 10px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 8px;
  font-size: 13px; font-weight: 800; color: var(--ink); cursor: pointer;
}
.ov-num-btn:hover { background: var(--yellow); }
.ov-num-btn.checked { background: var(--green); }
.ov-num-btn small { font-size: 10px; margin-left: 2px; color: var(--text2); }

/* ---- 习惯区块新增：完成率摘要 / 等级条 / 提醒条 / 休息与请假态 ---- */
.ov-habit-remind {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow);
  padding: 7px 10px; font-size: 12px; font-weight: 800;
}
.ov-habit-sum {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 11.5px; color: var(--text2); margin-bottom: 6px;
}
.ov-habit-sum b { color: var(--ink); font-size: 13px; }
.ov-habit-lv {
  margin-left: auto; font-weight: 900; color: var(--accent);
  border: 2px solid var(--ink); border-radius: 6px; padding: 0 6px; background: #fff;
}
.ov-level-bar {
  height: 9px; border: 2px solid var(--ink); border-radius: 5px;
  background: #fff; margin-bottom: 10px; overflow: hidden;
}
.ov-level-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.ov-habit.is-rest { background: #f1f2f6; opacity: .74; }
.ov-habit.is-skip { background: #fff2d6; }
.ov-habit.is-optional { background: #eef4ff; }
.ov-habit-rest { font-size: 11px; font-weight: 700; color: var(--text2); flex-shrink: 0; }
.ov-habit-unskip {
  flex-shrink: 0; min-height: 32px; padding: 0 10px;
  background: #ffd08a; border: 2px solid var(--ink); border-radius: 8px;
  font-size: 12px; font-weight: 800; color: #7a4d00; cursor: pointer;
}
.ov-habit-unskip:hover { background: #ffc06a; }

/* ---------- 底部行（3 列） ---------- */
.ov-bottom {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.ov-mini-card {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px;
  padding: 16px; min-width: 0;
}
.ov-mini-chart { position: relative; height: 96px; }
.ov-mini-labels {
  display: flex; justify-content: space-between; gap: 2px; margin-top: 5px;
  font-size: 10.5px; font-weight: 700; color: var(--text2);
}
.ov-mini-labels span { flex: 1; text-align: center; }
.ov-mini-labels span.today { color: var(--ink); font-weight: 900; }
.ov-mini-foot { font-size: 11.5px; color: var(--text2); font-weight: 700; margin-top: 8px; }
.ov-mini-foot b { color: var(--ink); }

.ov-shop-list, .ov-shop-box { display: grid; gap: 6px; }
.ov-shop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 9px;
  border: 2px solid transparent; background: #faf8f2; transition: all .12s;
}
.ov-shop-item:hover { background: var(--hover); border-color: var(--ink); }
.ov-shop-item.urgent { box-shadow: inset 5px 0 0 var(--accent); }
.ov-shop-item.is-bought { opacity: .55; }
.ov-shop-item.is-bought .ov-shop-name { text-decoration: line-through; color: var(--text2); }
.ov-shop-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; word-break: break-word; }
.ov-shop-qty { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--text2); }

.ov-media-list { display: grid; gap: 8px; }
.ov-media { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ov-media-cover {
  width: 40px; height: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); border: 2px solid var(--ink); border-radius: 8px;
  font-size: 17px; color: rgba(255,255,255,.6); overflow: hidden;
}
.ov-media-cover img { width: 100%; height: 100%; object-fit: cover; }
.ov-media-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-media-info b {
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-media-meta { font-size: 11px; color: var(--text2); font-weight: 600; }
.ov-media-meta .st-want { color: var(--text2); }
.ov-media-meta .st-doing { color: #b8860b; font-weight: 800; }
.ov-media-meta .st-done { color: var(--green-text); font-weight: 800; }

/* ---------- 快速记一笔弹窗 ---------- */
.ov-qr-amount {
  display: flex; align-items: center; gap: 6px;
  border: 2px solid var(--ink); border-radius: 10px; background: #fffdf5;
  padding: 6px 12px; margin-bottom: 14px;
}
.ov-qr-amount > span { font-size: 20px; font-weight: 900; color: var(--text2); }
.ov-qr-amount input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 28px; font-weight: 900; color: var(--ink); font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.ov-qr-amount input::placeholder { color: #cfc9b4; }
.ov-qr-cats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px; margin-bottom: 14px;
}
.ov-qr-cat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; background: var(--card);
  border: 2px solid var(--ink); border-radius: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--ink); cursor: pointer; transition: all .12s;
}
.ov-qr-cat:hover { background: var(--hover); }
.ov-qr-cat.active { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.ov-qr-cat-ico {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 8px; font-size: 13px;
}
.ov-qr-account {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; font-size: 11.5px; color: var(--text2); font-weight: 600;
}
.ov-qr-account i { color: var(--primary); }

/* ---------- 响应式 ---------- */
/* 768-1200px：指标卡 3 列 × 2 行，内容区仍为两列 */
@media (max-width: 1200px) {
  .ov-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-hero { grid-template-columns: minmax(0, 1fr); }
  .ov-hero-right { width: 100%; }
  .ov-hero-metric { flex: 1 1 132px; min-width: 0; }
  .ov-hero-num { font-size: 26px; }
  .ov-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-bottom > *:first-child { grid-column: 1 / -1; }
}

/* <768px：全部单列，指标卡横向滚动，快捷按钮 2-3 个一行 */
@media (max-width: 767px) {
  .ov-hero { padding: 16px; border-radius: 12px; }
  .ov-greeting { font-size: 22px; }
  .ov-hero-right { gap: 10px; }
  /* 移动端指标并排两列，避免把 Hero 撑得过高 */
  .ov-hero-metric { flex: 1 1 calc(50% - 5px); padding: 8px 10px; }
  .ov-hero-num { font-size: 21px; }
  .ov-hero-ring-metric { align-items: flex-start; }

  .ov-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ov-quick-btn { min-height: 56px; flex-direction: column; gap: 3px; font-size: 12px; padding: 8px 4px; }
  .ov-quick-btn i { font-size: 17px; }

  /* 指标卡横向滚动：overflow-x:auto 需要容器可滚动，这里用 flex + 固定宽度 */
  .ov-cards {
    display: flex; overflow-x: auto; gap: 10px;
    padding-bottom: 6px; margin-bottom: 16px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .ov-card { flex: 0 0 62%; min-width: 168px; scroll-snap-align: start; }
  .ov-card-value { font-size: 21px; }

  .ov-columns { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ov-col-left, .ov-col-right { gap: 14px; }
  .ov-panel, .ov-mini-card { padding: 13px; }

  .ov-bottom { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ov-bottom > *:first-child { grid-column: auto; }

  .ov-greeting { font-size: 21px; }
  .ov-donut { width: 148px; height: 148px; }
  .ov-budget-pct { font-size: 22px; }
  .ov-tl-item { grid-template-columns: 44px 12px minmax(0, 1fr); gap: 6px; }
  .ov-tl-time { font-size: 12px; }
  .ov-tl-dot { width: 12px; height: 12px; }
  .ov-todo-text { font-size: 14.5px; }
  .ov-qr-cats { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .ov-qr-amount input { font-size: 24px; }
  .ov-head h3 { font-size: 15px; }
  .ov-empty { padding: 20px 10px; }
}

/* ---------- 概览页待办清单的分组标题 ---------- */
.ov-todo-group + .ov-todo-group { margin-top: 10px; }
.ov-todo-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px 6px; font-size: 11.5px; font-weight: 800; color: var(--text2);
}
.ov-todo-group-head.overdue { color: var(--red); }
.ov-todo-group-head em {
  font-style: normal; font-size: 10.5px;
  background: #e9e5d8; border-radius: 5px; padding: 0 5px; color: var(--ink);
}
.ov-todo-group-head.overdue em { background: var(--accent); color: #fff; }
.ov-head-count.overdue { background: var(--accent); color: #fff; }

/* 「已达成」进度色：用于待办/习惯/待买/健身等「越高越好」的进度，
   避免把 100% 完成渲染成预算超支那样的红色 */
.ov-bar > i.lv-done { background: var(--green); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.lv-done { color: var(--green-text); }

/* 迷你图在无数据时给出占位文案（避免只剩一大片空白） */
.ov-mini-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--ov-muted); pointer-events: none;
}

/* =====================================================
   娱乐模块（游戏 / 电影 / 剧集 / 音乐 / 书籍）
   由原「书影音收藏」升级而来。沿用 Neo-Brutalism：
   3px 纯黑边框 / 零圆角 / 硬偏移阴影 / 高饱和撞色
   ===================================================== */

.ent-wrap { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

/* ---------- 顶部 Tab ---------- */
.ent-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.ent-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; min-height: 42px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: inherit; transition: transform .1s, box-shadow .1s, background .12s;
}
.ent-tab:hover { background: var(--yellow); }
.ent-tab.active { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.25); }
.ent-tab:active { transform: translate(2px, 2px); }

/* ---------- 筛选区 ---------- */
.ent-filters {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px;
  border: 3px solid var(--ink); background: var(--card);
}
.ent-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ent-filter-label {
  flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--text2);
  padding: 2px 8px; border: 2px solid var(--ink); background: var(--bg);
}
.ent-chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ent-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.ent-chips .chip em {
  font-style: normal; font-size: 10px; font-weight: 800;
  padding: 0 5px; background: var(--ink); color: #fff;
}
.ent-chips .chip.active em { background: #fff; color: var(--ink); }

.ent-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ent-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 160px;
  border: 3px solid var(--ink); background: var(--card); padding: 0 10px;
}
.ent-search i { color: var(--text2); font-size: 13px; flex-shrink: 0; }
.ent-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 10px 0; font-size: 14px; font-weight: 600; font-family: inherit; color: var(--ink);
}
.ent-select {
  padding: 10px 12px; border: 3px solid var(--ink); background: var(--card);
  font-size: 13px; font-weight: 700; font-family: inherit; color: var(--ink);
  cursor: pointer; min-height: 42px;
}
.ent-view-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; min-height: 42px;
  border: 3px solid var(--ink); background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: transform .1s, box-shadow .1s;
}
.ent-view-btn:hover { background: var(--yellow); }
.ent-view-btn:active { transform: translate(2px, 2px); }

/* ---------- 封面墙 ---------- */
.ent-grid {
  display: grid; gap: 16px;
  /* PC 每行 5~6 个；minmax 保证窄屏自动降列数 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  min-width: 0;
}
.ent-card {
  display: flex; flex-direction: column;
  border: 3px solid var(--ink); background: var(--card);
  cursor: pointer; overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}
.ent-card:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--ink); }

.ent-card-cover { position: relative; }
/* 封面统一 3:4 */
.ent-cover {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  background: #e9e3d3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ent-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 图片加载失败时露出底下的 emoji 占位 */
.ent-cover-ph {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center; font-size: 40px;
}
.ent-cover-fallback .ent-cover-ph { display: flex; }
.ent-cover-plain {
  flex-direction: column; gap: 8px;
  background: linear-gradient(135deg, #ffe9a8 0%, #ffd643 100%);
}
.ent-cover-emoji { font-size: 44px; line-height: 1; }
.ent-cover-title {
  font-size: 12px; font-weight: 800; text-align: center;
  padding: 0 10px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 状态标签：小方形 3px 黑边框，零圆角 */
.ent-st {
  display: inline-block; padding: 2px 7px;
  border: 3px solid var(--ink); border-radius: 0;
  font-size: 11px; font-weight: 800; line-height: 1.5;
  white-space: nowrap;
}
.ent-st-doing   { background: #2ed573; color: #fff; }   /* 进行中：绿底白字 */
.ent-st-wish    { background: #1e90ff; color: #fff; }   /* 想玩/想看：蓝底白字 */
.ent-st-done    { background: #ffdb33; color: var(--ink); }  /* 已完成：黄底黑字 */
.ent-st-paused  { background: #b2bec3; color: var(--ink); }  /* 暂停：灰底黑字 */
.ent-st-dropped { background: #ff6b81; color: #fff; }   /* 弃坑：红底白字 */

.ent-card-cover .ent-st { position: absolute; left: 6px; top: 6px; }
.ent-card-rating {
  position: absolute; right: 6px; top: 6px;
  background: rgba(255,255,255,.94); border: 2px solid var(--ink);
  padding: 2px 5px; line-height: 1;
}
.ent-card-fav {
  position: absolute; right: 6px; bottom: 6px;
  color: #ff4d6d; font-size: 15px;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}

.ent-stars { display: inline-flex; align-items: center; gap: 1px; color: #e8a20c; font-size: 12px; }
.ent-stars-sm { font-size: 10px; }
.ent-stars-lg { font-size: 20px; gap: 2px; }
.ent-stars em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink); margin-left: 4px; }

.ent-card-info { padding: 10px 10px 12px; display: grid; gap: 4px; }
.ent-card-title {
  font-size: 13.5px; font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-card-meta {
  font-size: 11px; color: var(--text2); font-weight: 600;
  display: flex; align-items: center; gap: 5px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-type-dot { width: 8px; height: 8px; flex-shrink: 0; border: 1px solid var(--ink); }

/* 进度条：3px 黑边框 + 零圆角 */
.ent-bar {
  height: 12px; border: 3px solid var(--ink); background: #f0ece0;
  overflow: hidden;
}
.ent-bar-lg { height: 20px; }
.ent-bar-fill { display: block; height: 100%; transition: width .25s ease; }
.ent-card > .ent-bar { border-left: none; border-right: none; }

/* ---------- 列表视图 ---------- */
.ent-list { padding: 6px; display: grid; gap: 0; }
.ent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-bottom: 2px solid #e9e3d3;
  cursor: pointer; transition: background .12s;
}
.ent-row:last-child { border-bottom: none; }
.ent-row:hover { background: var(--hover); }
.ent-row-cover {
  width: 48px; height: 64px; flex-shrink: 0;
  border: 2px solid var(--ink); background: #e9e3d3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ent-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.ent-row-cover .ent-cover-emoji { font-size: 20px; }
.ent-row-cover .ent-cover-title { display: none; }
.ent-row-cover .ent-cover-plain { padding: 0; }
.ent-row-main { flex: 1; min-width: 140px; display: grid; gap: 5px; }
.ent-row-title { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.ent-row-fav { color: #ff4d6d; font-size: 11px; }
.ent-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ent-row-type {
  font-size: 11px; font-weight: 800; padding: 1px 6px;
  border: 2px solid var(--ink); border-left-width: 5px; background: var(--card);
}
.ent-row-info { font-size: 11.5px; color: var(--text2); font-weight: 600; }
.ent-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ent-row-norating { font-size: 11px; color: #b5b0a0; font-weight: 700; }
.ent-quick {
  width: 34px; height: 34px; border: 2px solid var(--ink); background: var(--card);
  color: var(--text2); cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ent-quick.on, .ent-quick:hover { color: #ff4d6d; background: #fff0f3; }

/* ---------- 空状态 ---------- */
.ent-empty { text-align: center; padding: 48px 20px; display: grid; gap: 10px; justify-items: center; }
.ent-empty-emoji { font-size: 48px; line-height: 1; }
.ent-empty p { font-weight: 800; font-size: 15px; }
.ent-empty-sub { font-size: 13px !important; font-weight: 600 !important; color: var(--text2); }
.ent-muted { color: var(--text2); font-size: 13px; font-weight: 600; }
.ent-pad { padding: 16px; }
.ent-link-btn {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 800; color: var(--ink);
  text-decoration: underline; padding: 0 4px;
}

/* ---------- 详情页 ---------- */
.ent-detail { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ent-back {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 3px solid var(--ink); background: var(--card);
  font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; color: var(--ink);
}
.ent-back:hover { background: var(--yellow); }

.ent-d-head {
  display: grid; gap: 18px;
  grid-template-columns: 200px minmax(0, 1fr);
  padding: 18px; border: 3px solid var(--ink); background: var(--card);
}
.ent-d-cover {
  width: 100%; aspect-ratio: 3 / 4;
  border: 3px solid var(--ink); background: #e9e3d3; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ent-d-cover img { width: 100%; height: 100%; object-fit: cover; }
.ent-d-cover .ent-cover-emoji { font-size: 56px; }
.ent-d-cover .ent-cover-title { font-size: 13px; }

.ent-d-info { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ent-d-title-row { display: flex; align-items: flex-start; gap: 12px; }
.ent-d-title { font-size: 24px; font-weight: 900; line-height: 1.25; flex: 1; min-width: 0; }
.ent-d-fav { width: 40px; height: 40px; font-size: 17px; }

.ent-d-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ent-d-type {
  display: inline-block; padding: 3px 10px;
  border: 3px solid var(--ink); font-size: 12px; font-weight: 800; color: #fff;
}
.ent-d-tag {
  font-size: 11px; font-weight: 800; padding: 2px 8px;
  border: 2px solid var(--ink); background: var(--bg);
}

.ent-d-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ent-d-rating-hint { font-size: 11px; color: var(--text2); font-weight: 600; }

/* 可点星级：整星在右、半星命中区在左半边 */
.ent-star-unit { position: relative; display: inline-block; }
.ent-star-half, .ent-star-full { display: inline-block; cursor: pointer; }
.ent-star-half { position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 2; }
.ent-star-half:hover ~ .ent-star-full i,
.ent-star-full:hover i { color: #ffb703; }

.ent-d-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ent-d-facts dt { font-size: 11px; font-weight: 800; color: var(--text2); }
.ent-d-facts dd { font-size: 14px; font-weight: 800; }

.ent-d-status-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.ent-st-btn {
  padding: 7px 13px; border: 3px solid var(--ink); background: var(--card);
  font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; color: var(--ink);
  transition: transform .1s;
}
.ent-st-btn:hover { transform: translateY(-1px); }
.ent-st-btn.active { box-shadow: inset 0 0 0 3px rgba(0,0,0,.22); }
.ent-st-btn.ent-st-doing.active   { background: #2ed573; color: #fff; }
.ent-st-btn.ent-st-wish.active    { background: #1e90ff; color: #fff; }
.ent-st-btn.ent-st-done.active    { background: #ffdb33; }
.ent-st-btn.ent-st-paused.active  { background: #b2bec3; }
.ent-st-btn.ent-st-dropped.active { background: #ff6b81; color: #fff; }

/* ---------- 面板 ---------- */
.ent-panel { border: 3px solid var(--ink); background: var(--card); min-width: 0; }
.ent-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 3px solid var(--ink); background: var(--bg);
}
.ent-panel-head h3 { font-size: 14px; font-weight: 900; display: flex; align-items: center; gap: 8px; }

.ent-progress-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
.ent-progress-panel > *:not(.ent-panel-head) { padding: 0 16px; }
.ent-progress-panel > .ent-panel-head { padding: 12px 14px; }

.ent-p-big { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.ent-p-num { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.ent-p-num small { font-size: 16px; margin-left: 3px; font-weight: 800; color: var(--text2); }
.ent-p-label { font-size: 13px; font-weight: 700; color: var(--text2); }
.ent-p-label b { color: var(--ink); font-size: 15px; }

.ent-p-adjust { display: grid; gap: 6px; }
.ent-p-adjust-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ent-p-adjust-row .input { max-width: 110px; }
.ent-p-unit { font-size: 13px; font-weight: 800; color: var(--text2); }
.ent-chip-mini {
  padding: 6px 10px; border: 2px solid var(--ink); background: var(--card);
  font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; color: var(--ink);
}
.ent-chip-mini:hover { background: var(--yellow); }

.ent-hltb {
  font-size: 12px; font-weight: 700; color: var(--text2);
  padding: 8px 10px; border: 2px dashed var(--ink); background: var(--bg);
}
.ent-warn {
  font-size: 12px; font-weight: 700; padding: 8px 10px;
  border: 3px solid var(--ink); background: #fff8dc;
}
.ent-warn i { color: #e8a20c; }

/* ---------- 剧集逐集 ---------- */
.ent-batch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ent-batch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.ent-batch-num { width: 66px !important; text-align: center; }

.ent-eps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ent-eps-head { font-size: 13px; font-weight: 800; }
.ent-eps-head b { color: var(--green-text); }
.ent-season { border: 2px solid var(--ink); background: var(--bg); }
.ent-season-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 2px solid var(--ink); background: var(--card);
}
.ent-season-name { font-size: 13px; font-weight: 800; }
.ent-season-count { font-size: 12px; font-weight: 800; color: var(--text2); }
.ent-season-all {
  margin-left: auto; padding: 4px 10px; border: 2px solid var(--ink);
  background: var(--card); font-size: 11px; font-weight: 800;
  cursor: pointer; font-family: inherit; color: var(--ink);
}
.ent-season-all:hover { background: var(--yellow); }
.ent-ep-grid {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
}
/* 逐集复选框：方形 3px 黑边框，勾选绿底白勾 */
.ent-ep {
  width: 38px; height: 38px;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: transform .1s;
}
.ent-ep:hover { transform: translateY(-1px); background: var(--hover); }
.ent-ep.watched { background: #2ed573; color: #fff; }
.ent-ep.watched::after {
  content: '✓'; position: absolute; right: -4px; bottom: -6px;
  font-size: 11px; font-weight: 900; color: #fff;
  text-shadow: 0 0 2px #111, 0 0 3px #111;
}

/* ---------- 短评 / 记录 ---------- */
.ent-d-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ent-review {
  padding: 14px; font-size: 14px; line-height: 1.8; min-height: 80px;
  cursor: text; white-space: pre-wrap; word-break: break-word;
}
.ent-review:hover { background: var(--hover); }
.ent-review-actions { display: flex; gap: 8px; margin-top: 8px; }

.ent-logs { display: grid; grid-template-columns: minmax(0, 1fr); max-height: 340px; overflow-y: auto; }
.ent-log {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 2px solid #e9e3d3; font-size: 12.5px;
}
.ent-log:last-child { border-bottom: none; }
.ent-log-clickable { cursor: pointer; }
.ent-log-clickable:hover { background: var(--hover); }
.ent-log-date { font-weight: 800; color: var(--text2); font-variant-numeric: tabular-nums; }
.ent-log-title { font-weight: 800; flex: 1; min-width: 80px; }
.ent-log-hours {
  font-weight: 800; padding: 1px 7px; border: 2px solid var(--ink); background: #e8fff5;
}
.ent-log-note { color: var(--text2); font-weight: 600; flex-basis: 100%; }
.ent-log-del {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: #b5b0a0; font-size: 13px; padding: 2px 4px; font-family: inherit;
}
.ent-log-del:hover { color: var(--red); }

.ent-d-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ent-danger { color: var(--red) !important; }

/* ---------- 统计 Tab ---------- */
.ent-stats { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ent-stats-loading { padding: 40px; text-align: center; font-weight: 800; color: var(--text2); }
.ent-year-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ent-year-text { font-size: 18px; font-weight: 900; min-width: 100px; text-align: center; }

.ent-stat-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ent-stat-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 3px solid var(--ink); background: var(--card);
}
.ent-stat-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border: 3px solid var(--ink); background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.ent-stat-card.tone-doing .ent-stat-icon { background: #d4ffe9; }
.ent-stat-card.tone-done .ent-stat-icon { background: #fff6c9; }
.ent-stat-card.tone-time .ent-stat-icon { background: #e6f0ff; }
.ent-stat-label { font-size: 11.5px; font-weight: 800; color: var(--text2); }
.ent-stat-value { font-size: 24px; font-weight: 900; line-height: 1.15; }
.ent-stat-value small { font-size: 12px; margin-left: 2px; font-weight: 800; color: var(--text2); }
.ent-stat-approx { font-size: 12px; font-style: normal; color: var(--text2); margin-right: 1px; }

.ent-charts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ent-panel-wide { grid-column: span 2; }
.ent-chart-box { position: relative; height: 260px; padding: 14px; }
.ent-chart-tall { height: 380px; }
.ent-chart-empty { padding: 30px 16px; text-align: center; }
.ent-chart-note { font-size: 11px; color: var(--text2); font-weight: 600; padding: 0 14px 12px; }

.ent-yearly { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; }
.ent-yearly li {
  display: grid; gap: 2px; padding: 12px 14px;
  border-bottom: 2px solid #e9e3d3; border-right: 2px solid #e9e3d3;
}
.ent-yearly li span { font-size: 11.5px; font-weight: 700; color: var(--text2); }
.ent-yearly li b { font-size: 16px; font-weight: 900; }

/* ---------- 添加 / 编辑弹窗 ---------- */
.ent-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ent-type-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ent-type-opt {
  display: grid; justify-items: center; gap: 4px;
  padding: 12px 6px; border: 3px solid var(--ink); background: var(--card);
  cursor: pointer; font-family: inherit; color: var(--ink);
  transition: transform .1s, background .12s;
}
.ent-type-opt:hover { background: var(--hover); }
.ent-type-opt.active { background: var(--yellow); box-shadow: inset 0 0 0 3px rgba(0,0,0,.15); }
.ent-type-emoji { font-size: 24px; line-height: 1; }
.ent-type-name { font-size: 12px; font-weight: 800; }

.ent-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ent-form-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ent-typed-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ent-form-danger { padding-top: 10px; border-top: 2px solid #e9e3d3; }
.req { color: var(--accent); font-style: normal; }

.ent-cover-row { display: flex; gap: 14px; align-items: flex-start; }
.ent-cover-preview {
  width: 96px; height: 128px; flex-shrink: 0;
  border: 3px solid var(--ink); background: #e9e3d3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ent-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.ent-cover-preview-empty { font-size: 34px; }
.ent-cover-actions { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.ent-cover-actions .input { width: 100%; }
.form-hint { font-size: 11.5px; color: var(--text2); font-weight: 600; }

.ent-star-pick { display: flex; align-items: center; gap: 2px; }
.ent-star-pick .ent-star-unit .fa-star { font-size: 20px; color: #e8a20c; }
.ent-star-clear {
  margin-left: 10px; padding: 4px 8px; border: 2px solid var(--ink);
  background: var(--card); font-size: 11px; font-weight: 800;
  cursor: pointer; font-family: inherit; color: var(--ink);
}
.ent-fav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; min-height: 42px;
  border: 3px solid var(--ink); background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.ent-fav-toggle.on { background: #ffe3e8; color: #c9184a; }

.ent-log-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ent-log-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 3px solid var(--ink); background: var(--bg);
  font-weight: 800; font-size: 14px;
}

/* =====================================================
   记账理财 · 待买 Tab（由原「待买清单」页面合并而来）
   ===================================================== */
.shop-catbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; min-width: 0; }
.shop-summary {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
  border: 3px solid var(--ink); background: var(--card);
  font-size: 12.5px; font-weight: 700; color: var(--text2);
}
.shop-summary b { color: var(--ink); font-size: 14px; }
.fin-loading { padding: 30px; text-align: center; font-weight: 800; color: var(--text2); }

.shop-card { padding: 6px; }
.shop-empty { padding: 34px 16px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text2); }
.shop-toggle { color: var(--text2); font-weight: 700; }

.shop-row { gap: 10px; }
.shop-main { flex: 1; min-width: 130px; }
.shop-name { font-size: 14px; font-weight: 800; }
.shop-meta { font-size: 11px; color: var(--text2); font-weight: 600; margin-top: 2px; }
/* 价格 + 编辑/删除 作为一组，手机上整组换行 */
.shop-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* 优先级：三档色标 */
.shop-pri {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 2px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.shop-pri.high   { background: #ff6b81; color: #fff; }
.shop-pri.medium { background: #ffd643; color: var(--ink); }
.shop-pri.low    { background: #d6d3c8; color: var(--ink); }

.shop-price { font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.shop-price.bought { color: var(--text2); text-decoration: line-through; font-weight: 700; }
.shop-more { width: 32px !important; height: 32px !important; font-size: 12px; flex-shrink: 0; }

.shop-pri-pick { display: flex; gap: 8px; }
.shop-pri-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 3px solid var(--ink); background: var(--card);
  font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; color: var(--ink);
}
.shop-pri-opt.active { box-shadow: inset 0 0 0 3px rgba(0,0,0,.2); }
.shop-pri-opt.high.active   { background: #ff6b81; color: #fff; }
.shop-pri-opt.medium.active { background: #ffd643; }
.shop-pri-opt.low.active    { background: #d6d3c8; }
.shop-pri-dot { width: 10px; height: 10px; border: 2px solid var(--ink); }
.shop-pri-opt.high .shop-pri-dot { background: #ff6b81; }
.shop-pri-opt.medium .shop-pri-dot { background: #ffd643; }
.shop-pri-opt.low .shop-pri-dot { background: #d6d3c8; }

.shop-cat-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.shop-quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.shop-quick-name {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 3px solid var(--ink); background: #fff8dc;
  font-weight: 800; font-size: 14px;
}
.form-row { display: grid; gap: 6px; }
.form-label { font-size: 12px; font-weight: 800; color: var(--text2); }

/* 概览页待买价格小字 */
.ov-shop-price {
  margin-left: auto; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* =====================================================
   响应式（移动端 / 平板）
   ===================================================== */
@media (max-width: 1023px) {
  /* 平板：封面墙 3~4 列 */
  .ent-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .ent-panel-wide { grid-column: span 1; }
  .ent-d-head { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* 手机：封面墙固定 2 列（提示词要求） */
  .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .ent-tabs { gap: 8px; }
  .ent-tab { flex: 1; justify-content: center; padding: 10px 12px; }

  .ent-filters { padding: 12px; gap: 10px; }
  /* 筛选项横向滚动，避免 chip 换行把筛选区撑得很高 */
  .ent-chips {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%;
  }
  .ent-chips .chip { flex: 0 0 auto; }
  .ent-filter-row { align-items: flex-start; }
  .ent-toolbar { gap: 8px; }
  .ent-search { min-width: 100%; order: -1; }
  .ent-select { flex: 1; min-width: 0; }
  .ent-view-btn { flex-shrink: 0; }
  .ent-view-btn span { display: none; }   /* 手机上只留图标，省横向空间 */

  .ent-card-info { padding: 8px; }
  .ent-card-title { font-size: 12.5px; }
  .ent-card-meta { font-size: 10.5px; }
  .ent-cover-emoji { font-size: 34px; }
  .ent-cover-title { font-size: 11px; }

  .ent-row { padding: 10px 8px; gap: 10px; }
  .ent-row-cover { width: 42px; height: 56px; }
  .ent-row-right { flex-direction: column; gap: 4px; }
  .ent-quick { width: 32px; height: 32px; }

  /* 详情页：封面与信息上下排列 */
  .ent-detail { gap: 12px; }
  .ent-d-head { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px; }
  .ent-d-cover { max-width: 150px; margin: 0 auto; }
  .ent-d-title { font-size: 20px; }
  .ent-d-info { justify-items: stretch; }
  .ent-d-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-d-status-pick { gap: 6px; }
  .ent-st-btn { padding: 7px 10px; font-size: 12px; }
  .ent-p-num { font-size: 32px; }
  .ent-star-pick .ent-star-unit .fa-star { font-size: 24px; }
  .ent-stars-lg { font-size: 22px; }
  /* 触控目标放大到 40px 以上 */
  .ent-ep { width: 42px; height: 42px; font-size: 13px; }
  .ent-chip-mini { min-height: 34px; }
  .ent-season-all { min-height: 34px; }
  .ent-log { padding: 9px 12px; }
  .ent-chart-box { height: 230px; padding: 10px; }
  .ent-chart-tall { height: 320px; }

  .ent-type-pick { grid-template-columns: repeat(3, 1fr); }
  .ent-form-grid3 { grid-template-columns: 1fr; }
  .ent-cover-row { flex-direction: column; align-items: stretch; }
  .ent-cover-preview { width: 100%; height: 160px; }

  .shop-summary { gap: 10px; font-size: 12px; padding: 10px 12px; }
  /* 手机端待买行：勾选框 + 名称 + 优先级 占第一行，价格与操作按钮换到第二行。
     若不换行，「勾选框22+名称130+优先级26+价格67+编辑32+删除32+间隔50 = 359px」
     会超过 327px 可用宽 —— 结果是按钮被 flex 压扁（18px）且页面横向溢出。 */
  .shop-row { flex-wrap: wrap; padding: 11px 10px; row-gap: 8px; }
  .shop-name { font-size: 13.5px; }
  .shop-main { min-width: 0; flex: 1 1 auto; }
  .shop-pri { width: 26px; height: 26px; flex-shrink: 0; }
  .shop-acts { width: 100%; margin-left: 0; justify-content: flex-end; }
  /* 触控目标放大；flex-shrink:0 保证不被压扁 */
  .shop-row .checkbox { width: 40px; height: 40px; border-radius: 0; font-size: 16px; }
  .shop-more { width: 40px !important; height: 40px !important; font-size: 15px; flex-shrink: 0; }
  .shop-row .del-btn { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; }
  .shop-price { font-size: 15px; }
  .shop-pri-opt { flex: 1; justify-content: center; min-height: 42px; }
}