:root{
  /* 湖水蓝 · 安静水域：低饱和湖蓝主色 + 蓝灰基调的中性色，喧哗降下去、层级靠明度 */
  --bg:#edf2f5;
  --surface:#ffffff;
  --line:#e1e9ee;
  --line-soft:#edf2f6;
  --text:#1a2c3b;
  --text-2:#4b6478;
  --text-3:#8ea1b0;
  --accent:#3e7ca4;        /* 湖水蓝 */
  --accent-dark:#32698d;
  --accent-deep:#235677;
  --accent-soft:#e7f0f6;
  --accent-line:#c9dceb;   /* 编辑态描边 / 弱强调边框 */
  --cyan:#4e89ab;          /* 烟波蓝：次级色，与主色同族更浅一档 */
  --cyan-soft:#e3eef5;
  --danger:#b3493f;        /* 降饱和的砖红，警示但不刺眼 */
  --danger-soft:#f9edeb;
  --danger-line:#efd0cc;
  --warn:#a1762e;          /* 沉稳的沙金 */
  --warn-soft:#f8f2e2;
  --warn-line:#eadcb8;
  --sage:#4a7c62;          /* 青瓷绿：休闲循环卡片专属第四色（与湖水蓝区分开），
                              只用于循环卡片/休闲场景，不进工作模式语义色 */
  --sage-soft:#e8f1ec;
  /* 圆角体系（全局小圆角）：卡片/弹窗 8 · 条目卡 6 · 控件 4 · 小件（复选框/小签）2。
     数据密集界面上大圆角显得虚胖、还吃掉小尺寸组件的可用面积，整体收敛到精密感 */
  --radius:8px;     /* 旧别名，仅存量引用 */
  --radius-sm:6px;  /* 旧别名（下拉菜单在用） */
  /* 设计令牌：字号 / 控件高度 / 间距 / 圆角，全局统一引用 */
  --fs-11:11px;  --fs-12:12px;  --fs-13:13px;  --fs-14:14px;
  --fs-15:15px;  --fs-17:17px;  --fs-24:24px;  --fs-26:26px;
  --check:22px;      /* 待办复选框边长：首行对齐基准 */
  --tag-h:22px;      /* 标签高度：桌面 */
  --ctl-h:40px;      /* 输入类控件高度 */
  --btn-h:40px;      /* 常规按钮高度：与控件 --ctl-h 等高，行内天然对齐 */
  --btn-h-sm:32px;   /* 小按钮高度 / 筛选 chip / 弹窗按钮 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --r-lg:8px; --r-md:6px; --r-sm:4px; --r-xs:2px;
  --hub-r:32px;      /* 休闲循环卡片圆角（原宫格砖叶形圆角，花形已废） */
  --hub-pad:36px;    /* 休闲循环卡片内边距 */
  --sh-1:0 1px 2px rgba(26,44,59,.05);
  --sh-2:0 1px 2px rgba(26,44,59,.04),0 4px 14px rgba(26,44,59,.05);
  --sh-3:0 2px 4px rgba(26,44,59,.05),0 12px 30px rgba(26,44,59,.07);
  --nav-w:240px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 字体缩放策略：viewport 不加 maximum-scale / user-scalable（禁缩放是无障碍反模式）。
   text-size-adjust 显式写 auto：允许移动端文字膨胀算法生效，大字号用户能正常放大。
   放大后的布局适配责任在组件——宽度过文字、字号用 clamp()、必要时容器内滚动，
   见 .hub-card（循环卡片宽度随容器、三件套居中）。一处规范：绝不靠 text-size-adjust:none 关掉放大来掩盖布局问题
   （100% 等价于 none，会整个关掉膨胀算法，是错的默认值）。 */
html{-webkit-text-size-adjust:auto;text-size-adjust:auto}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  /* 水面光感：右上角一片几乎察觉不到的亮部，让底色有纵深而不抢内容 */
  background:
    radial-gradient(1100px 480px at 88% -12%, #dcebf3 0%, rgba(220,235,243,0) 62%),
    var(--bg);
  background-attachment:fixed;
}
button,input,select,textarea{font-family:inherit;font-size:14px;color:inherit}
button{cursor:pointer;border:none;background:none;padding:0}
svg{display:inline-block;vertical-align:middle;flex:0 0 auto}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c9d8e2;border-radius:9px;border:2.5px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ===== 布局 ===== */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  background:var(--surface);border-right:1px solid var(--line);
  padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:var(--sp-3);padding:0 6px var(--sp-4)}
.brand .logo{width:34px;height:34px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent),var(--cyan));display:flex;align-items:center;justify-content:center}
.brand .logo svg{width:20px;height:20px;color:#fff}
.brand .name{font-size:var(--fs-15);font-weight:700;letter-spacing:.3px}
.brand .sub{font-size:var(--fs-11);color:var(--text-3);margin-top:-2px}
.nav{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:6px}
.nav button{
  display:flex;align-items:center;gap:11px;padding:0 var(--sp-3);min-height:var(--ctl-h);
  border-radius:var(--r-sm);color:var(--text-2);font-size:var(--fs-14);
  font-weight:600;text-align:left;transition:.15s;
}
.nav button svg{width:18px;height:18px;color:var(--text-3)}
.nav button:hover{background:var(--accent-soft);color:var(--accent-deep)}
.nav button.active{background:var(--accent-soft);color:var(--accent-deep)}
.nav button.active svg{color:var(--accent)}
.nav .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav .badge.hide{display:none}
/* 双模式：工作模式导航 = 侧边/底部四件套；休闲模式没有导航——
   循环卡片总入口（hub）是唯一内容页，侧栏与底栏整条隐藏（入口只剩右下角悬浮球） */
body[data-mode="leisure"] .nav-work{display:none}
body[data-mode="leisure"] .work-only{display:none}
body[data-mode="leisure"] .sidebar{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:var(--sp-3);padding:14px var(--sp-6);
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:var(--fs-17);margin:0;font-weight:700;line-height:1.35}
/* 标题区允许收缩：窄屏时面包屑出省略号，右侧同步状态与「⋯」按钮永不被挤出屏幕 */
.topbar > div:first-child{flex:1;min-width:0}
.topbar .crumb{font-size:var(--fs-12);color:var(--text-3);margin-top:1px;line-height:1.4}
.topbar .actions{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
/* 按钮：统一高度 36 / 小号 30，内边距与圆角按令牌走 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--btn-h);padding:0 var(--sp-4);border-radius:var(--r-sm);
  font-weight:600;font-size:var(--fs-14);line-height:1;
  background:var(--accent-soft);color:var(--accent-deep);transition:.15s;border:1px solid transparent;
  white-space:nowrap;
}
.btn:hover{background:#dae8f1}
.btn svg{width:16px;height:16px}
.btn .blabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text-2)}
.btn.ghost:hover{background:var(--line-soft)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.danger:hover{background:#f3dbd7}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.sm{min-height:var(--btn-h-sm);padding:0 var(--sp-3);font-size:var(--fs-12)}
.btn.sm svg{width:14px;height:14px}
/* 提交/取消按钮组：同处一个 .field，横向并排、底部对齐 */
.field.act{flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--sp-2);flex:0 0 auto}
.field.act .btn{flex:0 0 auto;min-width:96px}
/* 同步指示：只留色点（文字收进 title 悬停提示）；
   syncing 加呼吸动画——「已同步」与「同步中」同为蓝色系，靠动效区分 */
.sync-dot{display:inline-flex;align-items:center;padding:6px;cursor:default}
.sync-dot i{width:8px;height:8px;border-radius:50%;background:var(--cyan);display:inline-block;flex:0 0 auto;transition:background .2s}
.sync-dot.syncing i{animation:syncPulse 1.2s ease-in-out infinite}
@keyframes syncPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.dropdown{position:relative;display:inline-flex}
.dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:156px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--sh-3);padding:6px;display:none;flex-direction:column;gap:2px;z-index:25}
.dropdown.open .dropdown-menu{display:flex}
.dropdown.open #btnMore{background:var(--line-soft)}
.dropdown-item{display:flex;align-items:center;gap:9px;width:100%;padding:0 var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-13);font-weight:600;color:var(--text-2);text-align:left;min-height:var(--ctl-h);line-height:1.3}
.dropdown-item:hover{background:var(--accent-soft);color:var(--accent-deep)}
.dropdown-item.danger{color:var(--danger)}
.dropdown-item.danger:hover{background:var(--danger-soft)}
.dropdown-item svg{width:16px;height:16px;flex:0 0 auto}

.content{padding:24px 26px 60px;max-width:1080px;width:100%;margin:0 auto}

/* ===== 通用卡片/区块：padding 20 / 圆角 14 / 标题 15 ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);box-shadow:var(--sh-1)}
.card h2{font-size:var(--fs-15);margin:0 0 var(--sp-1);font-weight:700;display:flex;align-items:center;gap:var(--sp-2);line-height:1.4}
.card h2 svg{width:16px;height:16px;color:var(--accent)}
.card .desc{font-size:var(--fs-12);color:var(--text-3);margin:0 0 var(--sp-4);line-height:1.5}
/* 编辑态：表单转入「编辑任务」，标题旁加标识、卡片描边提示当前在改哪条 */
.card.editing{border-color:var(--accent-line);background:var(--accent-soft)}
.card.editing h2 svg{color:var(--accent-deep)}
.edit-flag{margin-left:auto;font-size:var(--fs-11);font-weight:700;color:var(--accent-deep);background:#fff;border:1px solid var(--accent-line);border-radius:var(--r-xs);padding:2px 10px;line-height:1.6;flex:0 0 auto}
.section-title{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);font-weight:700;margin:6px 0 var(--sp-4);color:var(--text)}
.section-title svg{width:16px;height:16px;color:var(--accent)}
.muted{color:var(--text-3);font-size:var(--fs-12)}

/* ===== 表单：控件统一 40px 高，标签 12px，字段间距 12px ===== */
.form-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end}
.form-row + .form-row{margin-top:var(--sp-3)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-12);color:var(--text-2);font-weight:600;line-height:1.4}
input[type=text],input[type=date],input[type=number],select,textarea{
  border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-3);background:#fbfdfd;color:var(--text);
  font-size:var(--fs-14);outline:none;transition:.15s;min-width:0;height:var(--ctl-h);
}
select{padding-right:32px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ea1b0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:80px;height:auto;width:100%;padding:10px var(--sp-3);line-height:1.6}
.grow{flex:1;min-width:180px}

/* ===== 批量操作 ===== */
.batch-bar{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-4);
  background:linear-gradient(135deg,#f0f6fa,#e7f0f6);
}
.batch-bar .bb-count{font-size:var(--fs-13);color:var(--text-2);font-weight:600}
.batch-bar .bb-count b{color:var(--accent-deep);font-size:var(--fs-15)}
.batch-bar .bb-ops{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.todo.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.t-check.sel{border-color:var(--accent);background:#fff}
.t-check.sel.on{background:var(--accent);border-color:var(--accent)}
.t-check.sel.on svg{opacity:1}
.t-title.tsel{cursor:default}
.t-title.tsel:hover{background:transparent;box-shadow:none}
.btn.btch{min-height:var(--btn-h-sm);padding:0 var(--sp-3);font-size:var(--fs-12);margin-left:auto}
.btn.btch svg{width:14px;height:14px}
.btn.btch.on{background:var(--accent);color:#fff}
.todo-group > .gh{display:flex;align-items:center;gap:var(--sp-2)}
.todo-group > .gh .cnt{margin-right:auto}

/* ===== 全局搜索 ===== */
.search-box{
  display:flex;align-items:center;gap:var(--sp-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:4px var(--sp-4);box-shadow:var(--sh-1);margin-bottom:var(--sp-5);
}
.search-box svg{width:18px;height:18px;color:var(--text-3);flex:0 0 auto}
.search-box input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-size:var(--fs-15);height:44px;color:var(--text);padding:0;
}
.search-box .search-clear{
  width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  background:var(--line-soft);color:var(--text-3);flex:0 0 auto;transition:.15s;
}
.search-box .search-clear:hover{background:var(--danger-soft);color:var(--danger)}
.search-box .search-clear svg{width:14px;height:14px}
.search-group{margin-bottom:var(--sp-5)}
.search-group > .gh{font-size:var(--fs-13);font-weight:700;color:var(--text-2);margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2)}
.search-group > .gh .cnt{background:var(--line-soft);color:var(--text-2);font-size:var(--fs-11);padding:1px var(--sp-2);border-radius:var(--r-xs);font-weight:700}

/* ===== 复盘：范围选择 ===== */
.review-range{
  display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);
}
.review-range label{font-size:var(--fs-12);color:var(--text-2);font-weight:600;white-space:nowrap}
.review-range select{width:auto;min-width:120px;height:var(--btn-h-sm)}

/* ===== 项目：优先级 + 截止日期 ===== */
.proj .ph{flex-wrap:wrap}
.proj .p-tags{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.proj .p-tags .tag{height:var(--tag-h);padding:0 10px;border-radius:var(--r-xs);font-size:var(--fs-12);font-weight:600;display:inline-flex;align-items:center;line-height:1}
.proj .p-tags .tag.over{background:var(--danger-soft);color:var(--danger)}
.proj .p-tags .tag.date{background:var(--line-soft);color:var(--text-3);font-weight:500}
.proj.p-over{border-color:var(--danger-line);background:#fffafa}

/* ===== 账号设置弹窗 ===== */
.modal.settings{max-width:440px}
.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.settings-head h3{margin:0}
.settings-close{
  width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--text-3);transition:.15s;
}
.settings-close:hover{background:var(--line-soft);color:var(--text)}
.settings-close svg{width:16px;height:16px}
.settings-user{font-size:var(--fs-13);color:var(--text-2);margin:0 0 var(--sp-3)}
.settings-sec{border-top:1px solid var(--line-soft);padding-top:var(--sp-4);margin-top:var(--sp-4)}
.settings-sec.danger .settings-sec-title{color:var(--danger)}
.settings-sec-title{font-size:var(--fs-13);font-weight:700;color:var(--text);margin-bottom:var(--sp-3)}
.settings-warn{font-size:var(--fs-12);color:var(--warn);line-height:1.6;margin:0 0 var(--sp-3)}
.settings-err{font-size:var(--fs-12);color:var(--danger);min-height:18px;margin:4px 0}
.settings-sec .field{margin-bottom:var(--sp-2)}

/* 自动切换设置：开关行 / 时间区间 / 星期 chips */
.auto-sw{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-13);font-weight:600;color:var(--text-2);cursor:pointer;margin-bottom:var(--sp-3)}
.auto-sw input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.auto-times{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.auto-times input{flex:1;min-width:0}
.auto-times .auto-sep{font-size:var(--fs-12);color:var(--text-3);flex:0 0 auto}
.auto-days{display:flex;gap:6px;margin-bottom:var(--sp-2)}
.auto-days button{
  flex:1;min-width:0;padding:0;height:32px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-3);font-size:var(--fs-13);font-weight:600;font-family:inherit;cursor:pointer;transition:.15s;
}
.auto-days button:hover{border-color:var(--accent);color:var(--accent-deep)}
.auto-days button.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ===== 待办列表 ===== */
/* 三视图切换条：分段控件（同 auth-tabs 视觉语言）+ 右侧多选入口 */
.todo-tabs{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.todo-tabs .tt-group{display:flex;gap:2px;background:var(--line-soft);border-radius:var(--r-sm);padding:3px}
.todo-tabs .tt-group button{
  min-height:var(--btn-h-sm);padding:0 var(--sp-4);border-radius:var(--r-xs);
  font-size:var(--fs-13);font-weight:600;color:var(--text-2);
  display:inline-flex;align-items:center;gap:6px;transition:.15s;
}
.todo-tabs .tt-group button.active{background:var(--surface);color:var(--accent-deep);box-shadow:var(--sh-1)}
.todo-tabs .tt-group button .cnt{
  font-size:var(--fs-11);min-width:18px;height:18px;padding:0 6px;border-radius:var(--r-sm);
  background:var(--bg);color:var(--text-3);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.todo-tabs .tt-group button.active .cnt{background:var(--accent-soft);color:var(--accent-deep)}
.todo-tabs .btn.sm.on{background:var(--accent-soft);color:var(--accent-deep);border-color:transparent}

/* 日历跳转的「仅看某日」筛选条 */
.date-filter{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);font-size:var(--fs-13);color:var(--text-2)}
.date-filter svg{width:15px;height:15px;color:var(--accent)}
.date-filter b{color:var(--accent-deep)}
.date-filter .btn.sm{margin-left:auto}
/* 已完成视图的「显示全部 / 收起」 */
.done-more{text-align:center;margin-top:calc(-1 * var(--sp-2))}
/* 项目页：列表 / 甘特 视图切换（与待办三视图同一套分段控件） */
.proj-view{display:flex;justify-content:flex-end;margin-bottom:var(--sp-4)}
.proj-view .tt-group{display:flex;gap:2px;background:var(--line-soft);border-radius:var(--r-sm);padding:3px}
.proj-view .tt-group button{min-height:var(--btn-h-sm);padding:0 var(--sp-4);border-radius:var(--r-xs);font-size:var(--fs-13);font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:6px;transition:.15s;border:0;background:transparent;font-family:inherit;cursor:pointer}
.proj-view .tt-group button.active{background:var(--surface);color:var(--accent-deep);box-shadow:var(--sh-1)}

.todo-group{margin-bottom:var(--sp-5)}
.todo-group .gh{font-size:var(--fs-12);font-weight:700;color:var(--text-2);margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2);line-height:1.4}
.todo-group .gh .cnt{background:var(--line-soft);color:var(--text-2);font-size:var(--fs-11);padding:1px var(--sp-2);border-radius:var(--r-xs);font-weight:700}
.todo-group .gh svg{width:14px;height:14px;flex:0 0 auto}   /* 分组头图标统一 14px：svg 只有 viewBox 时会撑满容器宽 */
.todo-group.overdue .gh{color:var(--danger)}
.todo-group.overdue .gh svg{color:var(--danger)}
.todo{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--sp-2);background:var(--surface);transition:.15s}
.todo:hover{border-color:#c9d9e4;box-shadow:var(--sh-1)}
.todo.overdue{border-color:var(--danger-line);background:#fffafa}
.todo.done{opacity:.65}
.todo.done .t-title{text-decoration:line-through;color:var(--text-3)}
/* 用 Grid 排一行两列区：第 1 行「复选框 | 标题 | 操作」，第 2 行标签与标题同列起。
   Grid 的轨道对齐是几何保证的，不依赖 flex 的交叉轴测量，天然不会错位 */
.t-main{display:grid;grid-template-columns:var(--check) minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-3);row-gap:0}
.t-check{width:var(--check);height:var(--check);border-radius:var(--r-sm);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.15s;background:#fff}
.t-check svg{width:14px;height:14px;color:#fff;opacity:0}
.todo.done .t-check{background:var(--accent);border-color:var(--accent)}
.todo.done .t-check svg{opacity:1}
.t-title{font-weight:600;font-size:var(--fs-14);word-break:break-word;line-height:1.4;min-width:0;cursor:text;border-radius:var(--r-xs);transition:background .15s,box-shadow .15s}
.t-title:hover{background:var(--line-soft);box-shadow:0 0 0 4px var(--line-soft)}
/* 元信息行：所有标签共用同一套盒子规格（同高 / 同圆角 / 同字号 / 同内边距），
   只靠底色饱和度区分层级 —— 从根本上消除「大小不一、对不齐」 */
/* 标签行落在网格第 2 列起，自动与标题左边缘对齐。
   容器用块级 + 行内标签：垂直居中由 line-height 与 vertical-align 保证。
   若用 flex 容器，inline-flex 子项会参与行盒/基线计算，导致容器虚高且个别标签上下错位（实测差 6px） */
.t-sub{grid-column:2 / 4;align-self:start;display:block;line-height:var(--tag-h);margin:0 0 -4px}
.t-sub .tag{
  font-size:var(--fs-12);font-weight:600;line-height:1;
  height:var(--tag-h);padding:0 10px;border-radius:var(--r-xs);
  display:inline-flex;align-items:center;white-space:nowrap;
  vertical-align:middle;max-width:100%;
  /* 间距用 margin 而非 .tag+.tag 的 margin-left：后者作用于行内元素时
     会让容器多出约 12px 行高，并使个别标签上下错位 */
  margin:0 6px 0 0;
}
/* ===== 标题前元信息簇（移动端优先）=====
   色点 / 项目首字 / 顺延「延」标记同行排列；有内容才渲染，不预留空槽。
   inline-flex + 固定簇高让簇内元素永远互相对齐；vertical-align 只调这一处。 */
.t-lead{display:inline-flex;align-items:center;gap:5px;height:20px;margin-right:6px;vertical-align:middle;position:relative;top:-2px}
.pri-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.pri-dot.p0{background:var(--danger)}
.pri-dot.p1{background:var(--warn)}
.proj-badge{
  min-width:20px;height:20px;padding:0 4px;border-radius:var(--r-xs);
  background:var(--line-soft);color:var(--text-2);
  font-size:var(--fs-12);font-weight:700;line-height:20px;text-align:center;user-select:none;
}
.proj-badge.pa-0{background:var(--accent-soft);color:var(--accent-deep)}
.proj-badge.pa-1{background:var(--cyan-soft);color:var(--cyan)}
/* 可点的项目徽标（ drill-in 到项目筛选）：悬停给一圈 accent 环 */
.proj-badge[data-projfilter]{cursor:pointer;transition:box-shadow .15s}
.proj-badge[data-projfilter]:hover{box-shadow:0 0 0 2px var(--accent)}
.proj-badge.pa-2{background:var(--warn-soft);color:var(--warn)}
/* pa-3 用基类的中性灰，不另写 */

/* 项目筛选 chip（手机窄屏用缩写省空间）
   缩写字号与待办行徽标同源，识别逻辑统一；选中态展开全名不必点进去确认 */
.proj-filter .pf-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px 3px 4px}
.proj-filter .pf-abbr{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-xs);
  background:var(--line-soft);color:var(--text-2);
  font-size:var(--fs-12);font-weight:700;line-height:1;font-style:normal;
  user-select:none;
}
/* 配色跟待办行徽标一一对应：看到同一个颜色 = 同一个项目 */
.proj-filter .pf-chip.pa-0 .pf-abbr{background:var(--accent-soft);color:var(--accent-deep)}
.proj-filter .pf-chip.pa-1 .pf-abbr{background:var(--cyan-soft);color:var(--cyan)}
.proj-filter .pf-chip.pa-2 .pf-abbr{background:var(--warn-soft);color:var(--warn)}
/* 选中态：.tf.active 已是 accent 实底（底色统一不破坏筛选条的视觉语言），
   徽标改白底反色以免与底色糊在一起；选中态不再展开全名，
   保持缩写省空间，全名进 title / aria-label 即可。 */
.proj-filter .pf-chip.active .pf-abbr{background:#fff;color:var(--accent-deep)}
.post-badge{
  min-width:18px;height:18px;padding:0 3px;border-radius:var(--r-xs);
  background:var(--line-soft);color:var(--text-3);
  font-size:var(--fs-11);font-weight:600;line-height:18px;text-align:center;user-select:none;
}
/* 状态性标签：逾期红 / 日期中性灰；优先级与顺延已改为标题行内的色点与「延」标记 */
.t-sub .tag.over{background:var(--danger-soft);color:var(--danger)}
.t-sub .tag.date{background:var(--line-soft);color:var(--text-3);font-weight:500}
/* 行内操作按钮组：与复选框/标题同一 grid 行，靠 .t-main 的 align-items:center 居中，不再用负边距 hack */
.t-ops{display:flex;gap:6px;align-items:center}
/* 行内次要操作默认隐去存在感，整行 hover 时再浮现，避免每行都挂一个灰块 */
.icon-btn{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text-3);opacity:.55;transition:.15s}
.icon-btn:hover{background:var(--line-soft);color:var(--text-2);opacity:1}
.todo:hover .icon-btn{opacity:1}
.icon-btn svg{width:16px;height:16px}
.icon-btn.del:hover{background:var(--danger-soft);color:var(--danger)}
/* 顺延是处理逾期的主操作，保持常显以免被忽略 */
.icon-btn.post{background:var(--line-soft);color:var(--text-2);opacity:1}
.icon-btn.post:hover{background:var(--warn-soft);color:var(--warn)}

/* ===== 日记 ===== */
.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3)}
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);position:relative;transition:.15s}
.note:hover{box-shadow:var(--sh-2);border-color:#c9d9e4}
.note .ntxt{font-size:var(--fs-14);white-space:pre-wrap;word-break:break-word;color:var(--text);line-height:1.6}
.note .ntags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)}
.note .ntags .t{font-size:var(--fs-11);background:var(--accent-soft);color:var(--accent-deep);height:20px;padding:0 var(--sp-2);border-radius:var(--r-xs);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;line-height:1}
.note .ntime{font-size:var(--fs-11);color:var(--text-3);margin-top:var(--sp-2)}
.note .ndel{position:absolute;top:var(--sp-2);right:var(--sp-2);width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--line-soft);color:var(--text-3);opacity:0;transition:.15s}
.note:hover .ndel{opacity:1}
.note .ndel:hover{background:var(--danger-soft);color:var(--danger)}
.tag-filter{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.tag-filter .tf{min-height:var(--btn-h-sm);padding:0 var(--sp-4);border-radius:var(--r-sm);background:var(--line-soft);color:var(--text-2);font-size:var(--fs-12);font-weight:600;transition:.15s;display:inline-flex;align-items:center;line-height:1}
.tag-filter .tf.active{background:var(--accent);color:#fff}
.tag-filter .tf .x{opacity:.7;margin-left:5px}

/* ===== 项目跟进 ===== */
.proj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-3);transition:.15s}
.proj:hover{box-shadow:var(--sh-2)}
.proj.stuck{border-color:var(--warn-line)}
.proj .ph{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);min-height:24px}
.proj .pname{font-size:var(--fs-15);font-weight:700;flex:1;min-width:0;line-height:1.4;cursor:text;border-radius:var(--r-xs);transition:background .15s,box-shadow .15s}
.proj .pname:hover{background:var(--accent-soft);box-shadow:0 0 0 4px var(--accent-soft)}
.proj .pflag{font-size:var(--fs-11);font-weight:700;height:20px;padding:0 var(--sp-2);border-radius:var(--r-xs);background:var(--warn-soft);color:var(--warn);display:inline-flex;align-items:center;line-height:1}
.proj .prow{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-2);font-size:var(--fs-13);align-items:baseline}
.proj .prow .k{color:var(--text-3);flex:0 0 64px;font-weight:600;font-size:var(--fs-12)}
.proj .prow .v{color:var(--text);flex:1;min-width:0;word-break:break-word;line-height:1.5;cursor:text;border-radius:var(--r-xs);transition:background .15s,box-shadow .15s}
.proj .prow .v:hover{color:var(--accent-deep);background:var(--accent-soft);box-shadow:0 0 0 4px var(--accent-soft)}
.proj .prow .v.block{color:var(--warn);font-weight:600}
.proj .prow .v.ph{color:var(--text-3);font-weight:400}   /* 空值占位（— / 无）弱化显示 */
.proj-progress{margin-top:var(--sp-3)}
.proj-progress .bar{height:8px;background:var(--line-soft);border-radius:var(--r-xs);overflow:hidden}
.proj-progress .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:var(--r-xs);transition:width .3s}
.proj-progress .lab{font-size:var(--fs-12);color:var(--text-3);margin-top:6px;display:flex;justify-content:space-between}
.proj .pop{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}

/* ===== 复盘 ===== */
/* 图表色板：统一引用设计令牌，避免 SVG 里写死 hex 与全局色板脱节。
   （SVG presentation attribute 的 fill="var(--x)" 不解析 CSS 变量，故用 class 注入） */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--sh-1)}
.stat .v{font-size:var(--fs-26);font-weight:800;color:var(--accent-deep);line-height:1.1}
.stat .l{font-size:var(--fs-12);color:var(--text-3);margin-top:5px}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.chart-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--sh-1);margin-bottom:var(--sp-5)}
.chart-box h3{font-size:var(--fs-13);margin:0 0 var(--sp-3);font-weight:700;display:flex;align-items:center;gap:7px;line-height:1.4}
.chart-box h3 svg{width:16px;height:16px;color:var(--accent)}
.rate-line{font-size:var(--fs-13);color:var(--text-2);margin:calc(-1 * var(--sp-2)) 0 var(--sp-5)}
.rate-line b{font-size:var(--fs-17);font-weight:800;color:var(--accent-deep);margin:0 2px}
.dist-list{display:flex;flex-direction:column}
.dist-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-13);color:var(--text-2)}
.dist-row:last-child{border-bottom:none}
.dist-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dist-row b{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.block-list{list-style:none;padding:0;margin:0}
.block-list li{display:flex;gap:var(--sp-2);padding:9px 0;border-top:1px solid var(--line-soft);font-size:var(--fs-13);line-height:1.5}
.block-list li:first-child{border-top:none}
.block-list .bn{font-weight:600;color:var(--text)}
.block-list .bb{color:var(--warn);font-size:var(--fs-12)}

/* ===== 提醒条 ===== */
.remind{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);border-radius:var(--r-md);padding:11px 15px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;margin-bottom:18px}
.remind svg{width:16px;height:16px;flex:0 0 auto}

/* ===== 空态 ===== */
.empty{padding:38px var(--sp-5);text-align:center;color:var(--text-3);font-size:var(--fs-13);line-height:1.6}
.empty svg{width:48px;height:48px;color:var(--line);margin-bottom:var(--sp-2)}

.today-head{position:relative}
/* 今日摘要条：万年历页为纯展示；今日待办页可点击，唤出悬浮万年历 */
.today-strip{
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-1);font-variant-numeric:tabular-nums;
}
.today-strip.clickable{cursor:pointer;border-radius:var(--r-sm);transition:background .15s}
.today-strip.clickable:hover{background:var(--accent-soft)}
.today-strip .ct-date{font-size:var(--fs-26);font-weight:800;color:var(--text)}
.today-strip .ct-week{font-size:var(--fs-14);font-weight:700;color:var(--accent-deep)}
.today-strip .ct-lunar{font-size:var(--fs-13);color:var(--text-2)}
.today-strip .ct-open{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-12);font-weight:600;color:var(--text-3);align-self:center;
}
.today-strip .ct-open svg{width:14px;height:14px}
.today-strip.clickable:hover .ct-open{color:var(--accent)}

/* 悬浮万年历弹层：移动端底部抽屉，桌面为摘要条下方浮层 */
.cal-pop-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-1) 0;font-size:var(--fs-13);font-weight:700;color:var(--text-2);
}
.cal-pop{background:var(--surface);box-shadow:var(--sh-3)}

/* ===== 万年历 ===== */
.cal{max-width:720px}
.cal-card{padding:var(--sp-4)}
/* 顶部行：年月在左，「回到今天」右上角（仅翻走的月份显示） */
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-2)}
/* 底部翻月行：← 节气 →，节气居中，箭头贴近视图底部拇指易达 */
.cal-head{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0 0;
  border-top:1px solid var(--line-soft);padding-top:var(--sp-3)}
.cal-terms{flex:1;text-align:center;font-size:var(--fs-12);color:var(--accent-deep);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 年月单行大字（节气已挪到底部行，不再两行堆叠） */
.cal-title{min-width:0;line-height:1.3}
.cal-title b{display:block;font-size:var(--fs-17);font-weight:800;color:var(--text)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1);margin-bottom:var(--sp-1)}
.cal-week span{text-align:center;font-size:var(--fs-11);font-weight:700;color:var(--text-3)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1)}
.cal-cell{
  min-height:64px;padding:var(--sp-1);border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid transparent;transition:.15s;
}
.cal-cell:hover{background:var(--accent-soft)}
.cal-cell .d{font-size:var(--fs-14);font-weight:700;color:var(--text);line-height:22px;width:22px;text-align:center}
.cal-cell .l{font-size:var(--fs-11);color:var(--text-3);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-cell .l.festival{color:var(--danger)}
.cal-cell .l.term{color:var(--accent)}
.cal-cell.weekend .d{color:var(--text-2)}
.cal-cell.dim{opacity:.42}
/* 今天：数字用 accent 圆底强调（尺寸沿用待办复选框令牌，保证同视觉重量） */
.cal-cell.today .d{background:var(--accent);color:#fff;border-radius:50%}
/* 黄历页选中日：整格 accent 描边 + 浅 accent 底（与「今天」的数字圆底并存不冲突：
   今天=实心圆，选中=整格框，两种语义可同时存在） */
.cal-cell.picked{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.cal-cell.picked .d{color:var(--accent-deep);font-weight:800}
.cal-cell.picked.today .d{background:var(--accent);color:#fff}
.cal-cell .dot{width:4px;height:4px;border-radius:50%;background:var(--accent);margin-top:auto}
.cal-cell .dot.alldone{background:var(--text-3)}
.cal-hint{font-size:var(--fs-12);color:var(--text-3);margin:var(--sp-2) 0 0 var(--sp-1)}

/* ===== 今日黄历（2026-10 简化排版）=====
   日柱大字 + 值神一行小字 + 一行干支元信息 + 宜忌 + 吉时；
   牌位三柱/标签堆/12 时辰宫格/彭祖百忌段落已删——干净是休闲页第一观感 */
.al-card h2{flex-wrap:wrap;align-items:flex-start}
.al-card h2 .btn{margin-left:auto;flex:0 0 auto}
/* 日柱大字（核心信息）+ 值神建除星宿一行（黄道点金、黑道中性灰） */
.al-head{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:2px}
.al-gz{font-size:var(--fs-26);font-weight:800;color:var(--text);letter-spacing:2px;line-height:1.2;cursor:help}
.al-daymeta{font-size:var(--fs-12);font-weight:600;color:var(--text-3)}
.al-daymeta.gold{color:var(--warn)}
/* 干支元信息一行：年·生肖·月·纳音·冲煞 */
.al-meta{margin:0 0 var(--sp-3);font-size:var(--fs-12);color:var(--text-3);line-height:1.6}
.al-row{display:flex;align-items:flex-start;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.al-k{flex:0 0 24px;height:24px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent-deep);font-weight:700;font-size:var(--fs-13);display:flex;align-items:center;justify-content:center}
.al-k.al-k-ji{background:var(--line-soft);color:var(--text-2)}
.al-list{font-size:var(--fs-13);color:var(--text-2);line-height:1.7;padding-top:2px;word-break:break-word}
.al-list.muted{color:var(--text-3)}
/* 吉时一行（替代 12 宫格）：出门只关心吉时 */
.al-gold{margin:var(--sp-1) 0 0;font-size:var(--fs-13);font-weight:700;color:var(--warn);letter-spacing:2px}
.al-gold-k{display:inline-block;margin-right:var(--sp-2);padding:1px 7px;border-radius:var(--r-xs);background:var(--warn-soft);color:var(--warn);font-size:var(--fs-11);letter-spacing:0}

/* ---- 悬浮万年历弹层（今日摘要条唤出）----
   移动端优先：底部抽屉 + 遮罩，动画与添加抽屉同一曲线；桌面改为摘要条下方的浮层 */
.cal-pop-mask{
  position:fixed;inset:0;z-index:55;background:rgba(17,36,50,.36);
  opacity:0;pointer-events:none;transition:opacity .24s;
}
.cal-pop-mask.show{opacity:1;pointer-events:auto}
.cal-pop{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  border-radius:18px 18px 0 0;
  box-shadow:0 -10px 30px rgba(26,44,59,.16);
  padding:0 14px calc(var(--sp-4) + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .24s cubic-bezier(.32,.72,0,1);
  max-height:82vh;overflow-y:auto;overscroll-behavior:contain;
}
.cal-pop.show{transform:none}
.cal-pop .cal-card{margin:0;border:0;box-shadow:none;padding:0 0 var(--sp-2)}
@media (min-width:769px){
  .cal-pop-mask{display:none}
  .cal-pop{
    position:absolute;top:calc(100% + 6px);left:0;right:auto;bottom:auto;
    width:372px;border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-3) var(--sp-3);
    transform:none;display:none;overflow:visible;max-height:none;
    /* 不加入场动画：keyframes 动画会把弹层提升为合成层，实测与页面内容产生层级错乱的截图/渲染伪影 */
  }
  .cal-pop.show{display:block}
}

/* ===== 弹窗 ===== */
.overlay{position:fixed;inset:0;background:rgba(17,36,50,.42);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.overlay.show{display:flex}
.modal{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-6);max-width:380px;width:100%;box-shadow:var(--sh-3)}
.modal h3{margin:0 0 var(--sp-2);font-size:var(--fs-15);line-height:1.4}
.modal p{font-size:var(--fs-13);color:var(--text-2);margin:0 0 var(--sp-5);line-height:1.6}
.modal .mbtns{display:flex;gap:var(--sp-2);justify-content:flex-end}

/* ===== 删除确认气泡：锚定在被点的删除按钮旁，比居中弹窗更轻、不打断视线 ===== */
.confirm-pop{
  position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-3);padding:var(--sp-3);
  max-width:min(280px,calc(100vw - 24px));
}
.confirm-pop .cp-text{font-size:var(--fs-13);color:var(--text);margin:0 0 var(--sp-3);line-height:1.5;word-break:break-word}
.confirm-pop .cp-btns{display:flex;gap:var(--sp-2);justify-content:flex-end}

/* ===== 内联编辑输入：点击标题/字段后就地变成输入框，不弹系统 prompt ===== */
.inline-input{
  font-family:inherit;font-size:inherit;font-weight:inherit;color:var(--text);
  background:#fff;border:1px solid var(--accent);border-radius:var(--r-sm);
  padding:1px 7px;outline:none;width:100%;min-width:0;line-height:inherit;
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---- 添加任务：桌面常显；移动端收进底部抽屉，由右下角悬浮按钮展开 ---- */
.fab{display:none}
.add-mask{display:none}
.sheet-close{display:none}
.sheet-grab{display:none}

/* 底部移动端 tab */
.mtab{display:none}
@media (max-width:768px){
  .sidebar{display:none}
  .app{flex-direction:column}
  .main{min-width:0}
  .content{padding:var(--sp-4) 14px 150px}   /* 底部留出悬浮按钮的位置 */
  /* 休闲模式没有「新建任务」FAB 也没有底栏：只有悬浮切换球（48px，bottom:18 起）
     占右侧，底部留白 ≥66+16 即可 */
  body[data-mode="leisure"] .content{padding-bottom:110px}
  body[data-mode="leisure"] .fab{display:none}
  /* 休闲模式整条底栏隐藏：循环卡片总入口是唯一内容页 */
  body[data-mode="leisure"] .mtab{display:none}
  .topbar{padding:var(--sp-3) var(--sp-4);gap:var(--sp-2)}
  .topbar h1{font-size:var(--fs-15)}
  .topbar .crumb{font-size:var(--fs-11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 移动端触控目标不小于 44px */
  .topbar .actions .btn{min-width:44px;min-height:44px;padding:0 var(--sp-3)}
  .btn,.form-row .btn{min-height:44px}
  .btn.sm{min-height:36px}
  /* 触屏没有 hover，操作按钮恢复常显 */
  .icon-btn{width:36px;height:36px;background:var(--line-soft);color:var(--text-2);opacity:1}
  :root{--check:24px;--tag-h:24px}
  /* 触屏下标签同步放大，保持与桌面同一套比例 */
  .t-sub .tag{margin:0 7px 0 0}
  .t-sub .tag{height:var(--tag-h);padding:0 11px}
  .t-ops{gap:var(--sp-2)}
  input[type=text],input[type=date],input[type=number],select{height:44px;font-size:16px}
  .topbar .actions .btn span{display:none}
  .dropdown-menu{right:-6px}
  .chart-row{grid-template-columns:1fr}
  .stat-cards{grid-template-columns:1fr 1fr}
  .mtab{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--line);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .mtab button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;color:var(--text-3);font-weight:600;position:relative}
  .mtab button svg{width:24px;height:24px}
  .mtab button.active{color:var(--accent)}
  .mtab button .badge{position:absolute;top:1px;right:50%;margin-right:-22px;background:var(--danger);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:0 4px}
  .mtab button .badge.hide{display:none}
  input[type=text],input[type=date],input[type=number],select,textarea{font-size:16px}
  .form-row{gap:8px}
  .field{flex:1 1 100%}
  .field.grow{flex:1 1 100%}
  /* 添加任务抽屉：默认收起，点悬浮按钮从底部升起，把首屏还给列表 */
  .add-panel{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--surface);border-radius:8px 8px 0 0;
    box-shadow:0 -10px 30px rgba(26,44,59,.16);
    padding:0 14px calc(var(--sp-5) + env(safe-area-inset-bottom));
    transform:translateY(102%);transition:transform .24s cubic-bezier(.32,.72,0,1);
    max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  }
  .add-panel.open{transform:none}
  .add-panel .card{margin:0;padding:0;border:0;box-shadow:none;background:transparent}
  .add-panel .card h2{margin:var(--sp-2) 0 var(--sp-4)}
  .add-panel .card .desc{display:none}          /* 抽屉里省掉说明文字，进一步压缩高度 */
  .add-panel .form-row .btn{width:100%}
  /* 编辑/添加表单的「保存 · 取消」操作行：移动端必须占满整行（覆盖桌面 flex:0 0 auto），
     两个按钮等宽并排，文字过长时省略而非裁切；图标与文字通过 .blabel 自然居中 */
  .add-panel .field.act{flex:1 1 100%;flex-direction:row;justify-content:stretch;gap:var(--sp-2)}
  .add-panel .field.act .btn{width:auto;flex:1 1 0;min-width:0;overflow:hidden}
  .add-panel .field.act .btn .blabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .sheet-grab{display:block;width:38px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
  .sheet-close{
    display:flex;align-items:center;justify-content:center;margin-left:auto;
    width:32px;height:32px;border-radius:var(--r-sm);color:var(--text-3);flex:0 0 auto;
  }
  .add-panel .sheet-close svg{width:18px;height:18px;color:currentColor}
  .add-mask{
    display:block;position:fixed;inset:0;z-index:55;background:rgba(17,36,50,.36);
    opacity:0;pointer-events:none;transition:opacity .24s;
  }
  .add-mask.show{opacity:1;pointer-events:auto}
  .fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:50;
    width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;
    box-shadow:0 6px 18px rgba(62,124,164,.42);transition:transform .15s,opacity .15s;
  }
  .fab svg{width:26px;height:26px}
  .fab:active{transform:scale(.92)}
  .fab.hide{opacity:0;pointer-events:none;transform:scale(.8)}

  /* 三视图分段控件撑满一行：手机上不显示计数、文字不折行；
     多选只留图标（36×36 与 tab 等高），窄屏一行稳定放下 */
  .todo-tabs{flex-wrap:wrap}
  .todo-tabs .tt-group{flex:1}
  .todo-tabs .tt-group button{flex:1;justify-content:center;padding:0 var(--sp-2);white-space:nowrap}
  .todo-tabs .tt-group button .cnt{display:none}
  .todo-tabs > .btn.sm{width:36px;min-width:36px;padding:0}
  .todo-tabs > .btn.sm .blabel{display:none}
  /* 项目卡头部「看待办」：窄屏只留图标，给项目名和标签让位 */
  .proj .ph .blabel{display:none}
  .proj .ph .btn.sm{min-width:36px;padding:0 8px}
  .cal-cell{min-height:52px}
}
.hidden{display:none!important}

/* ---- 登录/注册遮罩 ---- */
.auth-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(17,36,50,.45);backdrop-filter:blur(4px);padding:20px}
.auth-overlay.show{display:flex}
.auth-card{width:100%;max-width:360px;background:var(--surface);border-radius:var(--r-lg);padding:30px 26px;
  box-shadow:var(--sh-3);text-align:center;border:1px solid var(--line)}
.auth-logo{width:56px;height:56px;border-radius:var(--r-lg);background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.auth-logo svg{width:30px;height:30px}
.auth-card h2{margin:0 0 6px;font-size:19px;color:var(--text)}
.auth-sub{margin:0 0 18px;font-size:13px;color:var(--text-2);line-height:1.5}
.auth-tabs{display:flex;background:var(--bg);border-radius:var(--r-sm);padding:4px;margin-bottom:16px}
.auth-tabs button{flex:1;border:0;background:transparent;padding:9px 0;border-radius:var(--r-xs);font-size:14px;
  color:var(--text-2);cursor:pointer;transition:.15s}
.auth-tabs button.active{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:var(--sh-1)}
.auth-input{width:100%;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:16px;outline:none;transition:.15s;background:var(--surface);color:var(--text)}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-btn{width:100%;padding:12px 0;border:0;border-radius:var(--r-sm);background:var(--accent);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;margin-top:4px;transition:.15s}
.auth-btn:hover{background:var(--accent-dark)}
.auth-err{color:var(--danger);font-size:12.5px;min-height:18px;margin-top:10px}
.auth-foot{margin:14px 0 0;font-size:11px;color:var(--text-3);line-height:1.5}

/* 已登录：账号切换中心 */
.auth-logged{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 2px}
.auth-avatar{width:54px;height:54px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.auth-avatar svg{width:30px;height:30px}
.auth-logged-text{margin:2px 0 6px;font-size:14px;color:var(--text-2);line-height:1.5}
.auth-logged-text .auth-user{color:var(--text);font-weight:700}
.auth-btn.ghost{background:transparent;color:var(--text-2);border:1px solid var(--line);margin-top:0}
.auth-btn.ghost:hover{background:var(--bg);color:var(--text)}
button:active{filter:brightness(.97)}
.btn:active,.icon-btn:active{transform:scale(.95)}
.t-check:active{transform:scale(.88)}
.btn,.icon-btn,.t-check{will-change:transform}

/* ---- 模式切换悬浮球 ---- */
/* 唯一切换入口：点一下翻转工作/休闲。z-index=45：低于添加抽屉遮罩(55)、弹窗(60)、
   木鱼/记忆/搜索全屏场景(120)、休闲切换坞(130)、登录遮罩(200)——
   打开任一全屏浮层时自动被遮住，无需额外显隐逻辑。
   尺寸与 FAB 统一 48px、right 16px，避免工作模式两个悬浮钮错位。 */
.mode-ball{
  position:fixed;right:16px;bottom:18px;z-index:45;
  width:48px;height:48px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3);
  color:var(--accent-deep);cursor:pointer;transition:transform .15s,bottom .25s ease;
}
.mode-ball:hover{border-color:var(--accent)}
.mode-ball:active{transform:scale(.9)}
.mode-ball svg{width:22px;height:22px}
/* 图标 = 切换的目标态（按钮惯例）：现在工作 -> 显示茶杯（点了去休闲） */
.mode-ball .mb-work{display:none}
body[data-mode="leisure"] .mode-ball .mb-leisure{display:none}
body[data-mode="leisure"] .mode-ball .mb-work{display:block}
.mode-ball .mb-dot{position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.mode-ball .mb-dot.hide{display:none}
@media (max-width:768px){
  /* 工作模式：FAB(48px, bottom:78)之上；休闲模式无 FAB 无底栏，贴底即可 */
  .mode-ball{right:16px;bottom:calc(136px + env(safe-area-inset-bottom))}
  body[data-mode="leisure"] .mode-ball{bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* ---- 休闲总入口 · 循环卡片（一次只展示一张，5 秒自动切换，无限循环）---- */
/* 形态（2026-10-25 牛素）：封面从简——图标 + 标题 + 一句描述，无「点击进入」
   按钮，整张卡（含图标）就是入口；卡片尽量全屏、三件套整体居中。
   旧 2×2 花形宫格 / 花蕊 / 底部切换坞已整体下线，禁止加回。
   垂直居中（2026-10 牛素）：循环卡片是休闲模式的「桌面」，像启动器一样在
   可视区水平垂直居中，不顶在页头下面留一大片底部空白。用 margin:auto 而非
   justify-content:center——内容万一超高时 auto 边距归零，顶部不会被裁。 */
body[data-mode="leisure"] .content{flex:1;display:flex;flex-direction:column}
/* 顶栏整条隐藏（2026-10 牛素）：休闲模式不要任何 chrome——循环卡片页自己就是
   身份，同步状态 / 账号 / 导出等功能件走工作模式（悬浮球一键切过去）。
   工作模式顶栏不动。TAB_META.hub 文案保留（代码兜底），只是不再上屏。 */
body[data-mode="leisure"] .topbar{display:none}
.hub{max-width:460px;width:100%;margin:auto;padding:var(--sp-2)}
/* 配色：.hub 上一个 data-mod 驱动五个 CSS 变量，卡片 / 圆点全从变量取色。
   色彩识别（2026-10 评审修正的延续）：五模块一卡一色且可分——
   湖蓝(日省) / 青瓷绿(记忆) / 沙金(黄历) / 白底描边(识己) / 暖褐(八卦) */
.hub[data-mod="pray"]{--mod:var(--accent);--mod-deep:var(--accent-deep);--mod-soft:var(--accent-soft);--mod-grad:#f3f8fb;--mod-line:var(--accent-line)}
.hub[data-mod="mem"]{--mod:var(--sage);--mod-deep:var(--sage);--mod-soft:var(--sage-soft);--mod-grad:#f2f7f4;--mod-line:#c8dcd0}
.hub[data-mod="almanac"]{--mod:var(--warn);--mod-deep:var(--warn);--mod-soft:var(--warn-soft);--mod-grad:#fbf7ec;--mod-line:var(--warn-line)}
.hub[data-mod="mbti"]{--mod:var(--text-3);--mod-deep:var(--text-2);--mod-soft:var(--surface);--mod-grad:#ffffff;--mod-line:var(--line)}
.hub[data-mod="bagua"]{--mod:#7a5c2e;--mod-deep:#7a5c2e;--mod-soft:#f4ecdd;--mod-grad:#faf5e9;--mod-line:#e6d9bd}
.hub-stage{position:relative}
/* 卡片：同时只显示一张（其余 display:none——不可点、不进 tab 序，焦点只落当前卡）。
   尽量全屏：宽铺满 hub，高撑到视口减掉圆点/提示/悬浮球的让位；
   min-height 而非固定高：大字号膨胀时卡片长高可滚，不裁内容 */
.hub-card{
  display:none;width:100%;
  min-height:max(420px, calc(100vh - 190px));
  flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);
  padding:var(--hub-pad);
  background:linear-gradient(180deg, var(--mod-soft) 0%, var(--mod-grad) 100%);
  border:1px solid var(--mod-line);border-radius:var(--hub-r);
  color:var(--mod-deep);font-family:inherit;cursor:pointer;
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  /* 滑动：纵向手势让给页面滚动（pan-y），横向留给 JS；禁选中防鼠标拖拽选字 */
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.hub-card.active{display:flex}
.hub-card.active:hover{border-color:var(--mod);box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.65);transform:translateY(-3px)}
.hub-card.active:active{transform:scale(.98)}
/* 跟手拖动中：关过渡，位移全跟指针；松手清内联 transform，切换/回弹都靠过渡 */
.hub-card.swiping{transition:none;will-change:transform}
/* 轮播入场：上浮 8px + 淡入 0.3s（hub.js 摘类→强制回流→加类，重启动画） */
.hub-card.enter{animation:hubIn .3s ease}
@keyframes hubIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 方向感入场：左滑出新卡从右进、右滑出从左进（data-swipe 由 hub.js 书写） */
.hub[data-swipe="next"] .hub-card.enter{animation:hubInNext .3s ease}
.hub[data-swipe="prev"] .hub-card.enter{animation:hubInPrev .3s ease}
@keyframes hubInNext{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes hubInPrev{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
/* 封面三件套：图标 / 名称 / 描述，整体居中，无按钮——整卡即入口 */
.hc-ico{display:flex;align-items:center;justify-content:center;width:112px;height:112px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.8)}
.hc-ico svg{width:52px;height:52px}
.hc-body{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.hc-title{font-size:var(--fs-24);font-weight:600;letter-spacing:.5px;line-height:1.3}
.hc-desc{font-size:var(--fs-12);color:var(--text-2);letter-spacing:1px}
/* 记忆到期徽标：贴当前卡右上角（与旧导航徽标同一视觉语言；train.js 按 ID 刷新） */
.hub-badge{position:absolute;top:18px;right:18px;background:var(--danger);color:#fff;font-size:var(--fs-11);font-weight:700;min-width:18px;height:18px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;padding:0 5px}
.hub-badge.hide{display:none}
/* 圆点：视觉 9px 圆 / 当前项 20px 胶囊（带模块色），按钮热区 20×28 保易点 */
.hub-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:var(--sp-5)}
.hub-dot{width:20px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hub-dot::before{content:"";display:block;width:9px;height:9px;border-radius:999px;background:#c2cfd9;transition:width .25s ease,background .25s ease}
.hub-dot.active::before{width:20px;background:var(--mod)}
@media (prefers-reduced-motion:reduce){
  .hub-card.enter{animation:none}
  .hub[data-swipe="next"] .hub-card.enter,.hub[data-swipe="prev"] .hub-card.enter{animation:none}
  .hub-dot::before{transition:none}
}

/* ---- 老黄历 · 全屏场景（与 mem/mbti 同族：fixed 全屏 + 唯一返回键）---- */
.alm-scene{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column}
.alm-scene.show{display:flex}
.alm-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(64px + env(safe-area-inset-top)) 14px calc(var(--sp-6) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.alm-body>*{width:100%;max-width:560px;margin-left:auto;margin-right:auto}

/* ---- 轻提示 Toast ---- */
.toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(146px + env(safe-area-inset-bottom));z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
@media (min-width:769px){.toast-wrap{bottom:30px}}
/* 移动端两个悬浮钮(FAB/球)占右侧，toast 上抬让开那一行 */
@media (max-width:768px){.toast-wrap{bottom:calc(196px + env(safe-area-inset-bottom))}}
.toast{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;color:#fff;background:rgba(24,42,58,.94);box-shadow:var(--sh-3);
  animation:toastIn .18s ease;max-width:min(90vw,440px)}
.toast.err{background:rgba(164,58,49,.95)}
.toast.out{animation:toastOut .18s ease forwards}
.toast .tact{color:#a5d5ee;font-weight:700;white-space:nowrap;padding:2px 4px}
.toast .tact:hover{opacity:.8}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}

/* ===== 祈福 · 电子木鱼 =====
   夜湖色调的禅意全屏场景：与全局同色相（湖蓝的夜），木鱼与木槌是画面里
   唯一的暖色；transform-box:view-box 让 SVG 分组可以直接用 viewBox 坐标做变形轴心。
   布局：功德累计沉在鱼身正下方作底座托住木鱼，左上不再压数字；底部一句轻提示 */
.pray-scene{
  position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(130% 100% at 50% 12%, #2a3d50 0%, #1a2836 48%, #0e161f 100%);
  color:#e8dcc8;opacity:0;pointer-events:none;transition:opacity .18s;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;
}
.pray-scene.show{opacity:1;pointer-events:auto}
.pray-stage{
  position:relative;z-index:1;flex:1;width:100%;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
}
/* 木鱼身后的一圈暖光：随敲击短暂增亮，像烛火应了一下；
   显式居中并略上提，光晕仍罩住鱼身而不是随新布局下坠到数字上 */
.pray-stage::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);
  width:min(120vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,190,110,.13),rgba(255,190,110,0) 70%);
  opacity:.55;transition:opacity .12s;
}
.pray-scene.striking .pray-stage::before{opacity:1;transition:opacity 0s}
.pray-svg{position:relative;width:min(94vw,560px);height:auto;max-height:58vh}
.pray-fx{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.pray-floats{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}

/* 木槌与木鱼：木槌斜搁左上、与鱼身留出空隙，敲击时绕槌柄末端轻叩音槽上方的
   鱼背，浅触即回、槌头不扎进鱼身；鱼身从腹部接触点回弹 */
.pray-mallet{transform-box:view-box;transform-origin:68px 198px}
.pray-scene.striking .pray-mallet{animation:prayMallet .19s cubic-bezier(.36,.07,.42,.94)}
@keyframes prayMallet{0%{transform:rotate(0deg)}34%{transform:rotate(28deg)}58%{transform:rotate(28deg)}100%{transform:rotate(0deg)}}
.pray-fishwrap{transform-box:view-box;transform-origin:285px 300px}
.pray-scene.striking .pray-fishwrap{animation:praySquash .19s ease-out}
@keyframes praySquash{0%{transform:scale(1,1)}34%{transform:scale(1.02,.97)}62%{transform:scale(.996,1.003)}100%{transform:scale(1,1)}}

/* 功德累计：木鱼正下方的底座——牌位式小字标题 + 大数字，脚下再垫一泓暖光，
   像蒲团承着鱼身；挂在 stage 内，点它同样算一敲 */
.pray-merit{
  position:relative;z-index:2;margin-top:-6px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-family:ui-serif,Georgia,"Songti SC","STSong","SimSun",serif;
  color:#f2d9a6;
}
.pray-merit .pm-label{
  display:flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:5px;text-indent:5px;opacity:.66;
}
.pm-label::before,.pm-label::after{content:"";width:34px;height:1px}
.pm-label::before{background:linear-gradient(90deg,rgba(242,217,166,0),rgba(242,217,166,.5))}
.pm-label::after{background:linear-gradient(270deg,rgba(242,217,166,0),rgba(242,217,166,.5))}
.pray-merit .pm-num{
  font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:1px;
  text-shadow:0 0 20px rgba(255,180,80,.35);
}
/* 数字脚下的椭圆光晕：把整组构图稳稳托住 */
.pray-merit::after{
  content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  width:min(64vw,300px);height:22px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,190,110,.14),rgba(255,190,110,0));
}
.pray-merit.pop{animation:prayPop .18s ease-out}
@keyframes prayPop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 底部一句轻提示：只负责第一次的引导，开敲后淡出不再打扰 */
.pray-hint{
  position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:5;
  text-align:center;pointer-events:none;
  font-family:ui-serif,Georgia,"Songti SC","STSong","SimSun",serif;
  font-size:13px;letter-spacing:4px;text-indent:4px;color:rgba(232,220,200,.55);
  transition:opacity .8s;
}
.pray-scene.touched .pray-hint{opacity:0}

/* 功德飘字：从音孔上方升起、放大变淡 */
.pray-float{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:ui-serif,Georgia,"Songti SC","STSong","SimSun",serif;
  font-size:14px;font-weight:700;color:#ffd98a;letter-spacing:1px;
  text-shadow:0 0 14px rgba(255,180,80,.5);
  animation:prayRise .9s ease-out forwards;
}
@keyframes prayRise{
  0%{opacity:0;translate:0 8px}
  18%{opacity:1}
  100%{opacity:0;translate:0 -66px}
}

/* ============================================================
   甘特图（按项目查看）
   - 工具栏：项目下拉 + 时间窗口快捷 + 翻看按钮
   - 图表本体：左列标签 + 右列日期网格；CSS Grid 自适应
   - 背景层：周末浅灰、节假日浅红；今日用 accent 竖线标记
   - 任务条：按优先级配色，已完成半透明；可点击跳编辑
   ============================================================ */
:root{
  --gantt-label-w: 180px;
  --gantt-row-h: 32px;
  --gantt-row-h-proj: 42px;
  --gantt-cell-w: 30px;    /* 每格最小宽度：宁可横向滚动，也不压到看不清日期 */
  /* 甘特专用结构线：要「能数清行」，又远浅于正文色 —— 保证任务条永远是画面里最重的一层 */
  --gantt-line: #d5e2ea;
  /* 项目行底色：比 --bg 浅一档，免得和表头灰连成一片（那样表头看着像两行高） */
  --gantt-proj-bg: #f5f8fa;
  /* 圆角直接引用全局令牌（--r-lg 8 / --r-sm 4 / --r-xs 2）；
     任务条 3px 介于控件与小件之间，就地写死 */
}
/* 外层：为「左右滑动」提示提供定位基准（提示不能被 .gantt 一起滚走） */
.gantt-wrap{position:relative;margin-top:var(--sp-4)}
/* 主容器：横向溢出滚动，竖向不滚（避免与页面滚动冲突） */
.gantt{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;   /* 滑到边界别触发浏览器的「后退」手势 */
}
/* 表格整体行高统一，grid 行高决定节奏 */
.gantt .gantt-row{min-height:var(--gantt-row-h)}
.gantt .proj-row{min-height:var(--gantt-row-h-proj)}

/* 顶部工具栏：分成两组 —— gt-a 选项目/回家，gt-b 选窗口/翻屏。
   桌面并排一行，手机各占一行（见文末媒体查询）。 */
.gantt-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-1);
}
/* 工具栏内的按钮 / 下拉同样收到控件级小圆角，与图表本体一套语言 */
.gantt-toolbar .btn{border-radius:var(--r-sm)}
.gantt-toolbar select{border-radius:var(--r-sm)}
.gt-a{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.gt-b{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.gantt-proj-sel{display:inline-flex;align-items:center;gap:8px;min-width:0}
.gantt-proj-sel span{font-size:var(--fs-12);color:var(--text-2);font-weight:600;white-space:nowrap}
.gantt-proj-sel select{min-width:160px;height:var(--btn-h-sm)}
/* 时间窗口分段控件（沿用 todo-tabs 的视觉语言；圆角收到控件级） */
.gantt-window{display:flex;gap:2px;background:var(--line-soft);border-radius:var(--r-sm);padding:3px}
.gantt-window button{
  min-height:var(--btn-h-sm);padding:0 12px;border-radius:var(--r-xs);
  font-size:var(--fs-12);font-weight:600;color:var(--text-2);white-space:nowrap;
}
.gantt-window button.on{background:var(--surface);color:var(--accent-deep);box-shadow:var(--sh-1)}
/* 前后翻屏：箭头夹住区间文字，视觉上就是一组 */
.gantt-shift{display:flex;align-items:center;gap:4px}
.gantt-shift .icon-btn{width:30px;height:30px;background:var(--line-soft);opacity:1;border-radius:var(--r-sm)}
.gantt-range-label{font-size:var(--fs-12);color:var(--text-3);font-weight:600;white-space:nowrap;min-width:84px;text-align:center}
.gantt-range-label b{color:var(--accent-deep);font-weight:700}

/* 表头（日期带）：只画「表头下沿」这一条实线，把表头压住数据区；
   日期格之间不画竖线（否则每格都成小盒子），定位交给月首线。 */
.gantt-head{
  display:grid;
  /* 行盒必须随网格内容拉通（不小于轨道总宽）：sticky 首列只能在父盒范围内移动，
     盒子若只有视口宽，滚过头首列就被带走；行线下沿同理才能铺满整个内容宽。
     min-width 而非 width —— 区间短于视口时仍由 1fr 均分撑满，不丢自适应 */
  min-width:max-content;
  background:var(--bg);
  position:sticky;top:0;z-index:3;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line);
}
.gantt-corner{
  position:sticky;left:0;z-index:4;background:var(--bg);
  padding:var(--sp-2) var(--sp-3);
  display:flex;align-items:baseline;gap:6px;
  border-right:1px solid var(--line);   /* 与时间区之间的那道分界 */
}
.gantt-corner b{font-size:var(--fs-12);font-weight:700;color:var(--text-2)}
.gantt-corner i{font-style:normal;font-size:var(--fs-11);color:var(--text-3);font-weight:600}
.gh-cell{
  min-width:0;padding:5px 2px;text-align:center;
  font-size:var(--fs-11);color:var(--text-3);font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  line-height:1.15;height:var(--gantt-row-h);
}
.gh-cell .gh-month{font-size:var(--fs-11);color:var(--accent-deep);font-weight:700}
.gh-cell .gh-day{font-size:var(--fs-11);color:var(--text-3)}
/* 「M/D + 周几」是窄屏专用（手机一列只有 28px，稀疏锚点定位不了）；
   桌面端把这两行彻底让位给周刻度尺，避免表头变挤 */
.gh-cell .gh-md,.gh-cell .gh-wd{display:none}
/* 周一锚点：整把刻度尺上唯一出数字的一格，颜色略深以站稳 */
.gh-cell.gh-anchor .gh-day{color:var(--text-2);font-weight:700}
/* 月首：全表唯一保留的一条竖向分隔，用来定位「月份」这一级 */
.gh-cell.month-start{box-shadow:inset 1px 0 0 var(--line)}
.gh-cell.weekend{background:rgba(142,161,176,.10)}
.gh-cell.holiday{background:rgba(179,73,63,.10)}
.gh-cell.holiday .gh-day{color:var(--danger)}
/* 今天：整列淡蓝底 + 表头加重（取代原来的 2px 描边，更安静也更清楚）；
   表头格里再压一道 accent 顶线，纵向扫读时给「今天」一个明确锚点 */
.gh-cell.today{background:var(--accent-soft);box-shadow:inset 0 2px 0 var(--accent)}
.gh-cell.today .gh-month{color:var(--accent)}
.gh-cell.today .gh-day{color:var(--accent-deep);font-weight:700}

/* 单行（标签 + 时间区）：行底一条 1px 结构线 —— 这是「能数清有几行」的锚点。
   没有它，任务条和左侧名字就只能靠猜对齐，一片糊。 */
.gantt-row{
  display:grid;
  min-width:max-content;   /* 同 .gantt-head：行盒拉通到轨道总宽，sticky 标签列 / 行线才完整 */
  background:var(--surface);
  border-bottom:1px solid var(--gantt-line);
}
.gantt-row:hover{background:#fbfdfd}
/* 项目行 = 分组标题条：整行铺浅底 + 下沿加重，明确「这行是标题，不是数据」 */
.proj-row{background:var(--gantt-proj-bg);border-bottom:1px solid var(--line)}
.proj-row:hover{background:#eef4f7}
.gantt-proj + .gantt-proj{margin-top:10px}

/* 左侧标签列：sticky 跟随横向滚动；右侧一条结构线切开「名字」与「时间」 */
.gantt-label{
  position:sticky;left:0;z-index:2;background:inherit;
  padding:6px var(--sp-3);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-width:0;overflow:hidden;
  border-right:1px solid var(--gantt-line);
  font-size:var(--fs-13);color:var(--text);
}
.proj-row .gantt-label{background:var(--gantt-proj-bg)}
.proj-row:hover .gantt-label{background:#eef4f7}
/* 首列投影：只在横向可滚时出现，压住滑过来的任务条。
   注意是「投影」不是「竖线」—— 首列已有一条结构线，再叠加会显得脏。 */
.gantt-wrap.can-scroll .gantt-label,
.gantt-wrap.can-scroll .gantt-corner{box-shadow:6px 0 10px -6px rgba(26,44,59,.16)}
.gantt-label .proj-name{font-size:var(--fs-14);font-weight:700;color:var(--text);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.proj-label{gap:4px}
.gantt-label .task-name{font-weight:600;color:var(--text);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gantt-label .task-meta{font-size:var(--fs-11);color:var(--text-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.25;font-variant-numeric:tabular-nums}

/* 时间区：grid 等宽列。必须显式跨到最后一列 —— 否则它作为 grid item
   只占「标签列」右边那一格（1 列宽），内部日期列的宽度计算会跟着错。 */
.gantt-track{
  position:relative;
  display:grid;
  grid-column:2 / -1;
  background:transparent;   /* 透出行底色：hover 时整行连成一体，不留一块白 */
}
.proj-track{background:var(--gantt-proj-bg)}

/* 项目进度：收进标签列 —— 项目名下方一条 44px 小进度条 + 百分比。
   放在时间区里横贯整行会撞真实排期条，是上一版「乱」的主要来源之一。 */
.proj-prog{display:flex;align-items:center;gap:6px;min-width:0}
.proj-prog-bar{
  flex:0 0 auto;width:44px;height:4px;border-radius:2px;
  background:rgba(142,161,176,.24);overflow:hidden;
}
.proj-prog-bar b{display:block;height:100%;background:var(--accent);opacity:.72;border-radius:2px;transition:width .3s}
.proj-prog em{
  font-style:normal;font-size:var(--fs-11);color:var(--text-3);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;
}
/* 项目截止日：一条竖线 + 一枚日期小签；"截止"二字省掉，位置本身已经说明语义 */
.proj-due{
  position:absolute;top:0;bottom:0;width:2px;background:var(--warn);opacity:.55;
}
.proj-due.over{background:var(--danger)}
.proj-due-mark{
  position:absolute;top:50%;left:5px;transform:translateY(-50%);
  font-size:10px;font-weight:700;color:var(--warn);
  background:var(--warn-soft);padding:0 5px;border-radius:var(--r-xs);
  white-space:nowrap;line-height:15px;
}
.proj-due.over .proj-due-mark{color:var(--danger);background:var(--danger-soft)}

/* 任务行：背景层 + 任务条。特殊日全部用底色表达，不逐格描边。
   色值比「纯无边框版」深一档：行线会稀释对比，太淡就看不出来了。 */
.task-track{grid-template-rows:1fr}
/* 背景格固定在第 1 行（列由 JS 显式给出），与任务条重叠而不争位 */
.bg-cell{grid-row:1;min-height:var(--gantt-row-h)}
/* 周末/节假日：只做「这是哪天」的标记，退到背景去。
   分区职责已交给行线与月首线，色带一重就会和任务条抢视觉。 */
.bg-cell.weekend{background:rgba(142,161,176,.10)}
.bg-cell.holiday{background:rgba(179,73,63,.085)}
.bg-cell.month-start{box-shadow:inset 1px 0 0 var(--line)}
/* 今天：整列淡蓝底，直接托住当天所有任务条（比一条竖线更容易找到） */
.bg-cell.today{background:var(--accent-soft)}

/* 任务条：跨多列。小圆角（3px）+ 1px 自色加深内边 —— 条纹下压住底噪，
   看起来是「嵌进网格的一条」，而不是「浮在白纸上的色块」；
   常态不带外投影，hover 才抬升，整面图更安静 */
.task-bar{
  grid-row:1;
  align-self:center;
  height:24px;
  margin:0 3px;
  border-radius:3px;
  padding:0 8px;
  display:flex;align-items:center;
  font-size:var(--fs-12);font-weight:600;
  color:#fff;
  white-space:nowrap;overflow:hidden;
  cursor:pointer;
  transition:transform .12s,box-shadow .12s,opacity .12s;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  z-index:1;
}
.task-bar:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 3px 8px rgba(26,44,59,.20);opacity:1!important}
.task-bar .task-bar-text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 一两天宽的短条放不下文字：只留色块，标题交给左列与悬浮提示 */
.task-bar.narrow .task-bar-text{display:none}
/* 优先级色：纯色平涂 —— 渐变在 24px 小条上几乎不可读，还让同色任务条深浅不一 */
.task-bar.p-P0{background:#b3493f}
.task-bar.p-P1{background:#a1762e}
.task-bar.p-P2{background:#3e7ca4}
.task-bar.p-p0,.task-bar.p-p1,.task-bar.p-p2{background:#32698d}   /* 容错小写 */
.task-bar.done{opacity:.5;text-decoration:line-through}
.task-bar.done .task-bar-text{color:rgba(255,255,255,.85)}
.task-bar.overdue{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 1.5px var(--danger)}

/* 图例：在 .gantt 卡片之外的一条轻说明（放进卡片会被横向滚动带走），
   左「色块组」右「区间摘要」；手机端色块组横滑、摘要独占一行 */
.gantt-legend{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:10px 2px 0;
  font-size:var(--fs-12);color:var(--text-2);
}
.lg-items{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;min-width:0}
.gantt-legend .lg-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gantt-legend .lg-summary{margin-left:auto;color:var(--text-3);font-size:var(--fs-11);text-align:right;font-variant-numeric:tabular-nums}
.lg-swatch{width:12px;height:12px;border-radius:var(--r-xs);display:inline-block;flex:0 0 auto;font-style:normal}
/* 与任务条同款纯色，图例和图对得上 */
.lg-swatch.p-p0{background:#b3493f}
.lg-swatch.p-p1{background:#a1762e}
.lg-swatch.p-p2{background:#3e7ca4}
/* 已完成的条是「原色淡出」，没有单一色相可代表 —— 用中性灰示意淡出更如实 */
.lg-swatch.done{background:var(--text-3);opacity:.45}
.lg-swatch.weekend{background:rgba(142,161,176,.22)}
.lg-swatch.holiday{background:rgba(179,73,63,.22)}
.lg-swatch.today{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}

/* 「左右滑动」提示：只在该图确实溢出时出现，滑一下就撤
   （显示由 .gantt-wrap.can-scroll 控制，隐藏由 .hint-off 控制） */
.gantt-hint{
  display:none;align-items:center;gap:5px;
  /* bottom 抬到图例之上，让气泡落在卡片右下角内侧，不去压图例文字 */
  position:absolute;right:14px;bottom:44px;z-index:5;
  width:max-content;            /* 不写死宽度的话文字会被容器挤成一小条 */
  padding:6px 11px;border-radius:var(--r-md);  /* 跟随整图小圆角，不再用胶囊形 */
  background:rgba(24,42,58,.84);color:#fff;
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:var(--sh-2);pointer-events:none;
  transition:opacity .3s,transform .3s;
}
.gantt-hint svg{width:14px;height:14px}
/* 滑动提示只给触屏端：桌面有滚轮 / 拖动滚动条，深色气泡浮在任务条上纯属噪音 */
@media (min-width:769px){.gantt-hint{display:none!important}}
.gantt-wrap.can-scroll .gantt-hint{display:flex}
.gantt-wrap.can-scroll .gantt-hint svg{animation:ganttSwipe 1.2s ease-in-out 2}
.gantt-wrap.hint-off .gantt-hint{opacity:0;transform:translateY(4px)}
@keyframes ganttSwipe{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}

/* ============================================================
   手机端：工具栏压成两行、图例横滑、触控目标放大
   ============================================================ */
@media (max-width:768px){
  /* 行高抬到 34px：原来 18px 高的任务条手指点不准；
     标签列收到 104px，把宽度让给时间轴 */
  :root{--gantt-label-w:104px;--gantt-row-h:34px;--gantt-row-h-proj:46px;--gantt-cell-w:28px}

  /* 工具栏：原来堆了 4 行，压成 2 行 —— 「选项目 + 今天」「选窗口 + 翻屏」 */
  .gantt-toolbar{display:grid;gap:8px;align-items:center;padding:var(--sp-3);border-radius:var(--r-md)}
  .gt-a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .gt-b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .gantt-proj-sel span{display:none}            /* 「项目」二字窄屏省掉，下拉自身已说明 */
  .gantt-proj-sel,.gantt-proj-sel select{width:100%;min-width:0}
  .gantt-proj-sel select{height:38px}
  .gt-a #btnGanttToday{height:38px;min-height:38px;padding:0 14px}
  .gantt-window{padding:2px;gap:1px;min-width:0}
  .gantt-window button{flex:1;min-height:36px;padding:0 4px;font-size:12px}
  .gantt-shift{gap:2px}
  .gantt-shift .icon-btn{width:32px;height:32px}
  .gantt-range-label{font-size:11px;min-width:78px}

  /* 图表本体：卡片圆角收一档 */
  .gantt{border-radius:var(--r-md)}
  .gantt-corner{padding:6px 10px}
  .gantt-label{padding:6px 10px}

  /* 表头：窄屏逐格标「月/日 + 周几」，两行小字（9px）——
     原来只在周一出数字，手机上离开锚点几格就完全定位不了，
     看起来就像「日期错乱」。桌面端的月标签/日数字在这里让位。 */
  .gh-cell{padding:3px 0;gap:0;font-size:9px}
  .gh-cell .gh-month,.gh-cell .gh-day{display:none}
  .gh-cell .gh-md{display:block;font-size:9px;font-weight:700;color:var(--text-2);line-height:1.1;font-variant-numeric:tabular-nums}
  .gh-cell .gh-wd{display:block;font-size:9px;font-weight:600;color:var(--text-3);line-height:1.1}
  .gh-cell.weekend .gh-wd{color:rgba(122,142,158,.9)}
  .gh-cell.holiday .gh-md,.gh-cell.holiday .gh-wd{color:var(--danger)}
  .gh-cell.today .gh-md{color:var(--accent-deep)}
  .gh-cell.today .gh-wd{color:var(--accent)}

  /* 任务条加高到 22px 便于点按；圆角与桌面同一档（3px）；标题窄屏本来就显示不全，信息交给左侧列 */
  .task-bar{height:22px;font-size:11px;padding:0 6px;margin:0 2px;border-radius:3px}
  .gantt-label .task-meta{display:none}

  /* 图例：色块组横滑一行 + 摘要一行，高度从约 8 行压到 2 行 */
  .gantt-legend{flex-direction:column;align-items:stretch;gap:6px;padding:10px 2px 0}
  .lg-items{flex-wrap:nowrap;overflow-x:auto;gap:14px;scrollbar-width:none}
  .lg-items::-webkit-scrollbar{display:none}
  .gantt-legend .lg-summary{margin-left:0;text-align:left}

  /* 项目进度：窄屏省掉文字，进度条拉满标签列宽度（数字换成条长来表达） */
  .proj-prog em{display:none}
  .proj-prog-bar{flex:1 1 auto;width:auto;min-width:0}
  .proj-due-mark{font-size:9px;padding:0 4px}
  .gantt-hint{right:10px;bottom:66px}   /* 手机图例两行（约 53px），气泡退到其上方 */
}

/* ============================================================
   记忆训练：全屏场景（入口已改为休闲模式导航「记忆」）
   场景是独立全屏面板，训练会话与卡组管理都在里面完成
   ============================================================ */

/* ---- 场景骨架 ---- */
.mem-scene{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column}
.mem-scene.show{display:flex}
/* ---- 全局搜索浮层（与场景同族：fixed 全屏，z-index 相同）---- */
.search-scene{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column}
.search-scene.show{display:flex}
.search-head{display:flex;align-items:center;gap:var(--sp-3);flex:0 0 auto;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);background:var(--surface)}
.search-head h2{margin:0;font-size:var(--fs-15);font-weight:600}
.search-head .icon-btn{margin-left:auto;opacity:1}
.search-body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-4) 48px}
/* ---- 场景统一退出键（2026-10 牛素：参照木鱼，全屏干干净净，右上角唯一退出）----
   mem/mbti/almanac 场景不再有标题栏；退出键浮动在内容之上。
   木鱼场景的退出键同样走统一 .scene-exit（2026-10 牛素，全场景一致）。 */
.scene-exit{
  position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:5;
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--text-3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-2);cursor:pointer;transition:.15s;
}
.scene-exit svg{width:18px;height:18px}
.scene-exit:hover{color:var(--text);border-color:var(--accent-line)}
.scene-exit:active{transform:scale(.92)}
.mem-seg{display:flex;gap:4px;background:var(--line-soft);border-radius:var(--r-sm);padding:2px}
.mem-seg button{padding:5px 14px;border-radius:var(--r-xs);font-size:var(--fs-13);font-weight:600;color:var(--text-2)}
.mem-seg button.active{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
/* 训练/卡组切换：顶部居中浮动胶囊（与右上角退出键同一水平线，互不打架） */
.mem-scene .mem-seg{
  position:absolute;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:5;box-shadow:var(--sh-2);
}
.mem-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(64px + env(safe-area-inset-top)) 14px calc(var(--sp-6) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.mem-body>*{width:100%;max-width:560px;margin-left:auto;margin-right:auto}

/* ---- 训练：进度 / 卡面 / 评分 ---- */
.mem-progress{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-12);color:var(--text-3);margin-bottom:var(--sp-4)}
.mem-progress .mem-bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.mem-progress .mem-bar i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .2s}
.mem-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:var(--sp-6) var(--sp-5);text-align:center;margin-bottom:var(--sp-4);
}
.mem-card .mem-tag{
  display:inline-block;font-size:var(--fs-11);color:var(--accent);background:var(--accent-soft);
  border-radius:var(--r-xs);padding:2px 8px;margin-bottom:var(--sp-4);
}
.mem-card .mem-face{font-size:var(--fs-17);font-weight:500;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.mem-card .mem-face.back{color:var(--text-2);font-weight:400}
.mem-card .mem-rule{height:1px;background:var(--line);margin:var(--sp-4) 0}
.mem-card .mem-hint{margin-top:var(--sp-4);font-size:var(--fs-12);color:var(--text-3)}
.mem-reveal{
  display:block;width:100%;min-height:48px;border-radius:var(--r-lg);
  background:var(--accent);color:#fff;font-size:var(--fs-14);font-weight:600;
  box-shadow:0 6px 18px rgba(62,124,164,.28);
}
.mem-reveal:active{transform:scale(.98)}

/* ---- 识己 · MBTI 人格测试 ----
   场景骨架（头部/进度条/卡片/底部让位）复用 .mem-* 同族组件，
   这里只放本场景差异样式。scene-open 的底部让位规则
   body.scene-open .mem-body 已覆盖 .mbti-body（同一元素挂两个 class）。 */
.mbti-scene{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column}
.mbti-scene.show{display:flex}

/* intro 说明页 */
.mbti-hero{text-align:center;padding-top:var(--sp-6)}
.mbti-hero-ico{width:56px;height:56px;margin:0 auto var(--sp-3);border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center}
.mbti-hero-ico svg{width:30px;height:30px}
.mbti-hero-t{margin:0 0 var(--sp-2);font-size:var(--fs-17)}
.mbti-hero-d{margin:0 0 var(--sp-5);font-size:var(--fs-13);color:var(--text-2);line-height:1.7}
.mbti-ghost{display:block;width:100%;min-height:44px;margin-top:var(--sp-3);border-radius:var(--r-lg);background:var(--line-soft);color:var(--text-2);font-size:var(--fs-13);font-weight:600}
.mbti-ghost:hover{color:var(--text)}
.mbti-last{margin:var(--sp-4) 0 0;font-size:var(--fs-12);color:var(--text-3)}
.mbti-last b{color:var(--accent-deep)}
.mbti-foot{margin:var(--sp-4) 0 0;font-size:var(--fs-11);color:var(--text-3)}

/* quiz 单题流 */
.mbti-qcard{padding:var(--sp-5)}
.mbti-q{margin:0 0 var(--sp-5);font-size:var(--fs-17);font-weight:600;line-height:1.6;text-align:center}
/* 选项不设固定宽高、文字可换行：系统大字号下自然撑高，不重蹈切换坞折行覆辙 */
.mbti-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-bottom:var(--sp-3);padding:12px 14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);font-size:var(--fs-14);font-weight:500;text-align:left;color:var(--text);box-shadow:var(--sh-1);transition:.15s}
.mbti-opt:hover{border-color:var(--accent);color:var(--accent-deep)}
.mbti-opt:active{transform:scale(.99)}
.mbti-opt i{font-style:normal;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--line-soft);color:var(--text-3);font-size:var(--fs-11);font-weight:700;display:flex;align-items:center;justify-content:center}
.mbti-mile{margin:var(--sp-2) 0 0;font-size:var(--fs-12);color:var(--text-3);text-align:center}

/* result 结果卡 */
.mbti-result{text-align:center}
.mbti-code{margin:var(--sp-2) 0 0;font-size:44px;font-weight:700;letter-spacing:6px;color:var(--accent-deep)}
.mbti-type{margin:0 0 var(--sp-3);font-size:var(--fs-15);font-weight:600}
.mbti-desc{margin:0 0 var(--sp-4);font-size:var(--fs-13);color:var(--text-2);line-height:1.7;text-align:left}
.mbti-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:var(--sp-5)}
.mbti-tags span{font-size:var(--fs-11);color:var(--accent-deep);background:var(--accent-soft);border-radius:999px;padding:3px 10px}
.mbti-dims{text-align:left;margin-bottom:var(--sp-4)}
.mbti-dim{margin-bottom:var(--sp-3)}
.mbti-dim-head{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-12);margin-bottom:4px}
.mbti-dim-head b{color:var(--accent-deep);font-size:var(--fs-14)}
.mbti-dim-head .win{color:var(--text);font-weight:600}
.mbti-dim-head .lose{margin-left:auto;color:var(--text-3)}
.mbti-dim-head.tie .win{color:var(--text-2);font-weight:600}
.mbti-dim-bar i.tie{background:var(--text-3)}
.mbti-dim-bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.mbti-dim-bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.mem-giveup{display:block;width:100%;min-height:44px;margin-top:var(--sp-2);color:var(--text-3);font-size:var(--fs-13)}
.mem-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.mem-rate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:var(--sp-3) 4px;min-height:60px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);font-size:var(--fs-13);font-weight:600;
}
.mem-rate span{font-size:var(--fs-11);font-weight:400;color:var(--text-3)}
.mem-rate.r-again{border-color:var(--danger-line);color:var(--danger)}
.mem-rate.r-hard{border-color:var(--warn-line);color:var(--warn)}
.mem-rate.r-good{border-color:var(--accent-line);color:var(--accent)}

/* ---- 训练：小节总结 ---- */
.mem-summary{text-align:center;padding-top:var(--sp-6)}
.mem-sum-t{font-size:var(--fs-17);font-weight:600;margin-bottom:var(--sp-4)}
.mem-sum-rows{display:flex;justify-content:center;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.mem-summary .btn{display:flex;width:100%;max-width:320px;margin:0 auto var(--sp-2)}

/* ---- 空态 ---- */
.mem-empty{text-align:center;padding:var(--sp-6) 0;margin:auto}
.mem-empty-t{font-size:var(--fs-15);font-weight:600;margin-bottom:var(--sp-2)}
.mem-empty-s{font-size:var(--fs-13);color:var(--text-3);margin-bottom:var(--sp-5);line-height:1.6}
.mem-empty .btn{min-width:200px}

/* ---- 小chip（评分结果 / 盒号 / 到期 / 标签共用） ---- */
.mem-chip{
  display:inline-flex;align-items:center;font-size:var(--fs-11);color:var(--text-2);
  background:var(--line-soft);border-radius:var(--r-xs);padding:2px 8px;line-height:1.5;white-space:nowrap;
}
.mem-chip.r-again{background:var(--danger-soft);color:var(--danger)}
.mem-chip.r-hard{background:var(--warn-soft);color:var(--warn)}
.mem-chip.r-good{background:var(--accent-soft);color:var(--accent)}
.mem-chip.box{background:var(--accent-soft);color:var(--accent)}
.mem-chip.tag{background:var(--cyan-soft);color:var(--cyan)}

/* ---- 卡组：统计 / 表单 / 列表 ---- */
.mem-stats{display:flex;gap:var(--sp-4);font-size:var(--fs-12);color:var(--text-3);margin-bottom:var(--sp-4)}
.mem-stats b{color:var(--text);font-weight:600}
.mem-form{
  display:flex;flex-direction:column;gap:var(--sp-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4);margin-bottom:var(--sp-4);
}
.mem-form input{
  height:var(--ctl-h);width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 var(--sp-3);background:#fff;
}
.mem-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mem-form-act{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:var(--sp-1)}
.mem-form-act .btn{min-width:96px}
.mem-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.mem-row{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);
}
.mem-row.due{border-color:var(--accent-line)}
.mem-row-txt{flex:1;min-width:0}
.mem-row-front{font-size:var(--fs-14);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-row-back{font-size:var(--fs-12);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mem-row-meta{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:190px}
.mem-row-ops{display:flex;gap:4px;flex:0 0 auto}
.mem-op{padding:6px 8px;border-radius:var(--r-sm);font-size:var(--fs-12);color:var(--text-2)}
.mem-op:hover{background:var(--line-soft);color:var(--text)}
.mem-op.danger:hover{background:var(--danger-soft);color:var(--danger)}
@media (max-width:768px){
  .mem-row{flex-wrap:wrap}
  .mem-row-meta{max-width:none;width:100%;justify-content:flex-start;order:3}
  .mem-op{padding:10px;min-height:44px;display:flex;align-items:center}
  .mem-card{padding:var(--sp-5) var(--sp-4)}
  .mem-form-act .btn{flex:1}
}

/* ---- 自动制卡：入口 / 选来源 / 审卡 ---- */
.mem-gen-entry{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.mem-gen-entry .btn{flex:0 0 auto}
.mem-gen-entry-t{font-size:var(--fs-12);color:var(--text-3);line-height:1.5}
.mem-gen-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.mem-gen-head b{font-size:var(--fs-14);font-weight:600}
.mem-gen-head .mem-op{margin-left:auto}
.mem-gen-prog{margin-left:auto;font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums}
.mem-gen-intro{font-size:var(--fs-12);color:var(--text-3);line-height:1.6;margin-bottom:var(--sp-4)}
.mem-src{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);
}
.mem-src b{font-size:var(--fs-14);font-weight:600}
.mem-src span{font-size:var(--fs-12);color:var(--text-3)}
.mem-src:hover{border-color:var(--accent-line)}
.mem-paste{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4)}
.mem-paste textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-3);background:#fff;resize:vertical;font-family:inherit;line-height:1.6;
}
.mem-paste textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mem-gen .mem-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:var(--sp-4)}
.mem-gen .mem-bar i{display:block;height:100%;background:var(--accent);transition:width .2s}
.gen-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.gen-card.clean{border-color:var(--accent-line)}
.gen-badge{
  display:inline-block;font-size:var(--fs-11);font-weight:600;border-radius:var(--r-xs);
  padding:2px 8px;margin-bottom:var(--sp-3);background:var(--accent-soft);color:var(--accent);
}
.gen-card.review .gen-badge{background:var(--warn-soft);color:var(--warn)}
.gen-front{font-size:var(--fs-15);font-weight:500;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.gen-back{font-size:var(--fs-14);color:var(--text-2);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.gen-why{font-size:var(--fs-11);color:var(--text-3);margin-top:var(--sp-3)}
.gen-ops{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.gen-ops .btn{flex:1;min-height:44px}
@media (max-width:768px){
  .gen-ops{flex-wrap:wrap}
  .gen-ops .btn{flex:1 1 40%}
  .mem-gen-entry{flex-wrap:wrap}
}

/* ---- 默认卡组：批次勾选面板 ---- */
.mem-def-ops{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.mem-def-row{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);
}
.mem-def-row.on{border-color:var(--accent-line);background:var(--accent-soft)}
.mem-def-check{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r-xs);border:1px solid var(--line);
  background:#fff;color:var(--accent);font-size:13px;font-weight:600;line-height:1;
}
.mem-def-row.on .mem-def-check{border-color:var(--accent)}
.mem-def-t{flex:1;min-width:0;font-size:var(--fs-14);font-weight:500}
.mem-def-n{flex:0 0 auto;font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums}
.mem-def-load{margin-top:var(--sp-4)}
.mem-def-load .btn{width:100%;min-height:48px}

/* ---- 两级卡组：列表 ---- */
.mem-decks{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.mem-deck{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--sp-3) var(--sp-4);
}
.mem-deck.due{border-color:var(--accent-line)}
.mem-deck-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;text-align:left;padding:2px 0}
.mem-deck-name{font-size:var(--fs-14);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-deck-meta{font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums}
.mem-deck-bar{display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.mem-deck-bar i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .2s}
.mem-deck .mem-op{
  flex:0 0 auto;padding:8px 16px;border:1px solid var(--accent-line);border-radius:var(--r-sm);
  color:var(--accent);font-size:var(--fs-13);font-weight:600;
}
.mem-deck .mem-op:hover{background:var(--accent-soft)}

/* ---- 两级卡组：详情 ---- */
.mem-detail-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.mem-detail-head b{font-size:var(--fs-15);font-weight:600}
.mem-detail-head .mem-deck-meta{margin-left:auto}
.mem-detail-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.mem-detail-acts .btn{width:100%;min-height:44px}
@media (max-width:768px){
  .mem-detail-head .mem-deck-meta{margin-left:0;flex-basis:100%}
}

/* ---- 训练作用域提示（卡组训练中） ---- */
.mem-scope{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-12);color:var(--text-3);margin-bottom:var(--sp-3)}
.mem-scope .mem-op{margin-left:auto;padding:4px 12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.mem-scope .mem-op:hover{border-color:var(--accent-line);color:var(--accent)}

/* ---- 一键导入（批量粘贴） ---- */
.mem-bulk textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-3);font-size:var(--fs-13);line-height:1.7;resize:vertical;
  font-family:inherit;color:var(--text);
}
.mem-bulk textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mem-bulk .mem-form-act{margin-top:var(--sp-3)}
.mem-bulk .btn:disabled{opacity:.45;pointer-events:none}
.mem-bulk-sum{font-size:var(--fs-13);margin:var(--sp-4) 0 var(--sp-2)}
.mem-bulk-sum b{color:var(--accent);font-weight:600}
.mem-bulk .mem-row{cursor:default}

/* ============================================================
   八卦星盘 · 全屏场景（2026-10 牛素，与 pray/mem 同族）
   古典做旧路数：乌木盘 + 旧金刻字 + 朱砂点要。
   「古」的一半交给宋体族，另一半是 SVG 内的程序化做旧噪点（bgPatina），
   全程零图片依赖。盘子尺寸 min(92vw, 60vh)，控件区在盘外不抢画面。
   ============================================================ */
.bagua-scene{
  position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;
  /* 背景即器物的延伸：与盘座同色调的木色径向渐变，中心略亮，
     星盘像嵌在一整块大木盘上，不再有「器物放在背景上」的割裂 */
  background:radial-gradient(90% 70% at 50% 38%, #3a2a1a 0%, #261b10 48%, #140e08 100%);
  color:#e8d3a0;opacity:0;pointer-events:none;transition:opacity .18s;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;
  font-family:ui-serif,Georgia,"Songti SC","STSong","SimSun",serif;
}
.bagua-scene.show{opacity:1;pointer-events:auto}
.bagua-top{margin-top:calc(18px + env(safe-area-inset-top));text-align:center;flex:0 0 auto}
.bg-title{font-size:22px;font-weight:700;letter-spacing:8px;text-indent:8px;color:#e8d3a0}
.bg-sub{margin-top:4px;font-size:12px;letter-spacing:4px;text-indent:4px;color:rgba(232,211,160,.55)}
.bagua-stage{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:10px}
/* 屏上的同心细圈：与盘内刻层同一套圆语言，从盘心一路延伸到屏外并渐隐，
   背景因此「也是器物」——转动时视线跟着转，不存在被背景切断的边缘 */
.bagua-stage::before{
  content:"";position:absolute;inset:-12%;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 47%,
    rgba(201,169,106,.055) 0 1px, rgba(201,169,106,0) 1px 46px);
  -webkit-mask-image:radial-gradient(closest-side, #000 42%, rgba(0,0,0,.35) 72%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 42%, rgba(0,0,0,.35) 72%, transparent 100%);
}
/* svg 抬到背景伪元素之上：星点与同心细圈只露在盘的四周，不蒙盘面 */
.bagua-svg{position:relative;z-index:1;width:min(94vw,62vh);height:auto;overflow:visible;filter:drop-shadow(0 18px 50px rgba(0,0,0,.55));animation:bgIn .5s cubic-bezier(.2,.8,.3,1)}
/* 周天星点：稀疏暖金星点嵌在木色背景里，7s 极慢呼吸——夜空坛城感。
   透明度压在 .75 以内，不抢盘 */
.bagua-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 11% 18%, rgba(232,211,160,.55), transparent 65%),
    radial-gradient(1.3px 1.3px at 23% 72%, rgba(232,211,160,.4), transparent 65%),
    radial-gradient(1.8px 1.8px at 38% 9%, rgba(232,211,160,.5), transparent 65%),
    radial-gradient(1.2px 1.2px at 47% 88%, rgba(232,211,160,.35), transparent 65%),
    radial-gradient(1.5px 1.5px at 62% 24%, rgba(232,211,160,.45), transparent 65%),
    radial-gradient(1.7px 1.7px at 74% 63%, rgba(232,211,160,.5), transparent 65%),
    radial-gradient(1.3px 1.3px at 86% 33%, rgba(232,211,160,.4), transparent 65%),
    radial-gradient(1.4px 1.4px at 92% 81%, rgba(232,211,160,.35), transparent 65%),
    radial-gradient(1.2px 1.2px at 8% 55%, rgba(232,211,160,.3), transparent 65%),
    radial-gradient(1.6px 1.6px at 55% 47%, rgba(232,211,160,.28), transparent 65%);
  animation:baguaTwinkle 7s ease-in-out infinite;
}
@keyframes baguaTwinkle{0%,100%{opacity:.45}50%{opacity:.75}}
/* 天池呼吸光：5s 周期，幅度克制（.3↔.7）——针不转了，气在转 */
@keyframes baguaBreath{0%,100%{opacity:.3}50%{opacity:.7}}
.bg-breath{animation:baguaBreath 5s ease-in-out infinite}
/* 减少动态偏好：氛围光退为静态微光（盘仍可手动转，交互不砍） */
@media (prefers-reduced-motion: reduce){
  .bg-breath{animation:none;opacity:.5}
  .bagua-stage::after{animation:none;opacity:.55}
}
@keyframes bgIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
#baguaDial{touch-action:none;cursor:grab}
#baguaDial:active{cursor:grabbing}
/* 磁针投影：投在天池底上，针像架在顶针上而不是贴在盘面 */
#baguaNeedle{filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.bagua-svg text{font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif}
.bagua-svg [data-tip]{cursor:pointer}
.bagua-svg [data-tip]:hover{filter:brightness(1.35)}
/* 层显隐：整体淡出，保留布局不跳动 */
.bg-layer{transition:opacity .3s}
.bg-layer.off{opacity:0;pointer-events:none}
/* 磁针停正时针尖缓呼吸，像落位后余韵；盘转动时也不抢戏 */
.bg-needle-tip{animation:bgTip 2.6s ease-in-out infinite}
@keyframes bgTip{0%,90%,100%{opacity:1}95%{opacity:.3}}
/* 层开关 + 归位：盘下一行 chip，不占盘面 */
.bagua-ctrl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 16px 6px;flex:0 0 auto}
.bg-chip{
  font-family:inherit;font-size:12px;letter-spacing:1px;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(201,169,106,.35);
  background:rgba(201,169,106,.06);color:rgba(232,211,160,.6);
  transition:border-color .15s,color .15s,background .15s;cursor:pointer;
}
.bg-chip:hover{border-color:rgba(201,169,106,.6);color:#e8d3a0}
.bg-chip.on{background:rgba(201,169,106,.16);border-color:rgba(201,169,106,.65);color:#f0d9a4}
.bg-chip-go{border-style:dashed}   /* 归位是动作不是层，虚线区分 */
.bg-chip-sensor,.bg-chip-sound{border-style:dotted} /* 感应/音效是工具开关，点线区分 */
/* 层锁定珠：默认隐，锁定时亮——朱砂小珠钉在子午准线上 */
.bg-lock{visibility:hidden}
.bg-lock.on{visibility:visible;filter:drop-shadow(0 0 3px rgba(176,58,42,.85))}
/* chip 锁定态：前置朱砂小点，与盘上锁定珠呼应 */
.bg-chip.locked::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#b03a2a;margin-right:5px;vertical-align:1px}
/* 刻字 hover 提亮：可点区域的普惠反馈（含 64 卦微字） */
.bt-t{transition:fill .15s}
.bt-t:hover{fill:#f0d9a4}
/* 详情卡：底部滑出，5 秒自动退场，点卡也收 */
.bagua-tip{
  position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);width:min(92vw,420px);z-index:5;
  background:rgba(28,20,13,.94);border:1px solid rgba(201,169,106,.35);border-radius:12px;
  padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
}
.bagua-tip.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.bt-head{display:flex;align-items:center;gap:10px}
.bt-glyph{width:22px;height:24px;flex:0 0 auto}
.bt-name{font-size:22px;font-weight:700;color:#f0d9a4}
.bt-tag{font-size:12px;color:rgba(232,211,160,.6);letter-spacing:1px}
.bt-body{margin-top:8px;font-size:13px;line-height:1.75;color:rgba(232,211,160,.85)}
.bt-body p{margin:4px 0}
.bt-body b{color:#f0d9a4;font-weight:700}
/* 八卦星盘的暖褐配色已并入循环卡片的 data-mod 变量块（见 .hub[data-mod="bagua"]） */