/* ==========================================================================
   幕僚长 · 呈现层样式（T-07 落地）
   --------------------------------------------------------------------------
   基准：**电脑桌面 1440px**（2026-09-16 拍板）；1280px 兜底；1024px 不破版。

   骨架沿用 health-app（★D-B0-10）：顶栏 58px + sticky 侧栏 230px
   + content(flex:1; min-width:0; max-width:1500px)。它是一套**流式**布局，
   不是固定宽，所以 1024 → 1440 都能装。

   文件分工（与 health-app 同纪律）：
     app.css    = 设计变量 + 桌面骨架 + **两端共用的组件**（★D-B0-11 的第 2 层）
     mobile.css = 只定义 .mb-*，**不覆盖任何桌面类**
   「不覆盖」不是洁癖：CSS 互相覆盖是最容易偷偷改坏另一端、又最难比对的一种方式。
   ========================================================================== */

:root{
  /* 色：墨褐为主（官制气质），与健康系统的蓝一眼分得开（D-B0-6） */
  --bg:#F5F6F8; --surface:#FFFFFF; --line:#E8EAED; --line2:#DADCE0;
  --t1:#202124; --t2:#5F6368; --t3:#80868B;
  --pri:#5B4636; --pri-ink:#493A2B; --pri-bg:#EFE8E0;
  --ok:#1F883D; --ok-bg:#E8F5EC; --todo:#9A6700; --todo-bg:#FDF4E3;
  --danger:#B42318; --info:#1F6FEB;
  --radius:10px;

  /* 骨架尺寸：JS 与 CSS 共用同一组数，避免两处各写一个 */
  --h-top:58px; --w-side:230px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--t1);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600}
form.inline-form{display:inline;margin:0}

/* ---------------------------------------------------------------- 顶栏 */
.topbar{
  position:sticky;top:0;z-index:30;height:var(--h-top);
  display:flex;align-items:center;gap:12px;
  padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px}
.logo{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
      background:var(--pri);color:#fff;font-size:14px;font-weight:600}
.brand-tx{font-size:15px;font-weight:600;letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--t3)}
.top-spacer{flex:1}
.auth-out{display:flex;align-items:center;gap:10px}
.auth-who{font-size:12.5px;color:var(--t3)}
.mini{font-size:12.5px;color:var(--t2);background:none;border:0;padding:0;
      cursor:pointer;font-family:inherit}
.mini:hover{color:var(--pri);text-decoration:underline}
/* ★ B6：提醒页的「删除」是**破坏性**动作（虽然是软删），
   不能和「知道了 / → 待办」长得一模一样 —— 三个一样的文字按钮挨在一起，
   误点一次就把一条周期提醒停了。 */
.mini.is-bad{color:var(--danger)}
.mini.is-bad:hover{color:var(--danger)}

/* ---------------------------------------------------------------- 主体骨架 */
.shell{display:flex;min-height:calc(100vh - var(--h-top));align-items:flex-start}
.sidebar{
  position:sticky;top:var(--h-top);width:var(--w-side);flex:none;
  height:calc(100vh - var(--h-top));overflow-y:auto;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px 12px;
}
.side-title{font-size:11px;color:var(--t3);padding:0 8px 8px;letter-spacing:.5px}

/* ---------------------------------------------------------------- 侧栏导航 */
.nav{display:flex;flex-direction:column;gap:1px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;
          border-radius:8px;color:var(--t2);font-size:13.5px;white-space:nowrap}
.nav-item:hover{background:#F1F3F4}
.nav-item.on{background:var(--pri-bg);color:var(--pri-ink);font-weight:600}
.nav-item .ic{width:16px;text-align:center;font-size:13px;opacity:.85;flex:none}
.nav-item .lb{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-item .soon{font-size:10px;color:var(--todo);background:var(--todo-bg);
                border-radius:4px;padding:1px 4px;flex:none}
.nav-sep{height:1px;background:var(--line);margin:8px}
.nav-item.foot{font-size:13px;color:var(--t3)}
.side-foot{margin-top:auto;padding:10px 8px 2px;border-top:1px solid var(--line)}
.side-foot .meta{font-size:11px;color:var(--t3);line-height:1.8}
/* ★ 上云回填 · 备案号（页脚）。11px 与 .side-foot 其余文字同号，
   word-break 是必需的：备案号形如「京ICP备2026000000号-1」，
   若浏览器不在这里断开，窄侧栏会被它撑出一条横向滚动条。 */
.beian-lnk{color:var(--t3);text-decoration:none;word-break:break-all}
.beian-lnk:hover{color:var(--pri);text-decoration:underline}
/* 公安备案图标：13px 与 11px 文字同视觉高度，往下压 2px 对齐基线。
   ★ 不给它单独加边框 / 背景 —— 图标本身是蓝底白盾，再套一层就成噪点了。 */
.beian-ico{height:13px;width:auto;vertical-align:-2px;margin-right:3px}

/* ---------------------------------------------------------------- 内容区 */
.content{flex:1;min-width:0;padding:22px 28px 60px;max-width:1500px}
.page-head{margin-bottom:16px}
.page-head h1{font-size:21px}
.page-al{font-size:14px;color:var(--t3);font-weight:400;margin-left:4px}
.page-sub{font-size:12.5px;color:var(--t3);margin-top:4px}

/* ---------------------------------------------------------------- 共享组件
   （components/ui.html 用的类；两端一致，mobile.css 不得覆盖） */
.card{background:var(--surface);border:1px solid var(--line);
      border-radius:var(--radius);margin-bottom:16px}
.card-head{display:flex;align-items:baseline;gap:10px;
           padding:13px 16px;border-bottom:1px solid var(--line)}
.card-title{font-size:14.5px}
.card-note{font-size:11.5px;color:var(--t3);margin-left:auto;text-align:right}
.card-body{padding:6px 16px}
.card-body .row:last-child{border-bottom:0}

.row{display:flex;justify-content:space-between;align-items:center;gap:16px;
     padding:11px 0;border-bottom:1px solid var(--line)}
.row-k{color:var(--t2);min-width:0}
/* ★ min-width:0 + anywhere 是**必须**的：flex 子项默认 min-width:auto，
   一条没有断词点的长值（比如草稿卡里的 JSON 字段）会把整行顶宽、把页面顶出横向滚动条，
   而这行在任何一个页面里都可能出现，所以修在组件上而不是修在某一页。 */
.row-v{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.row-v.ok{color:var(--ok)}
.row-v.todo{color:var(--todo)}

.badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:5px;
       background:#F1F3F4;color:var(--t2)}
.badge-todo{background:var(--todo-bg);color:var(--todo)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-bad{background:#FDECEA;color:var(--danger)}

.empty{padding:28px 0;text-align:center;color:var(--t3)}
.empty-hint{font-size:12px;margin-top:4px}

/* 班底宫格：桌面两列起，窄了自动掉成一列 —— 流式，不用写断点 */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
          gap:10px;padding:10px 0}
.mod{display:flex;align-items:center;gap:10px;padding:10px 12px;
     border:1px solid var(--line);border-radius:9px;background:#fff}
.mod:hover{border-color:var(--line2);background:#FCFCFD}
.mod-ic{display:grid;place-items:center;width:30px;height:30px;flex:none;
        border-radius:8px;background:var(--pri-bg);color:var(--pri-ink);font-size:14px}
.mod-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.mod-nm{font-size:13.5px;font-weight:600}
.mod-al{font-size:12px;color:var(--t3);font-weight:400;margin-left:3px}
.mod-duty{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-tag{font-size:10.5px;color:var(--t3);border:1px solid var(--line);
         border-radius:4px;padding:1px 5px;flex:none}

/* ------------------------------------------------------- 审计日志（两端共用）
   ★ 长 JSON 值必须有出口：手机上一条 before/after 就能把整页顶宽，
   所以 .alog-d 用可换行布局 + 任意处断行，而不是 nowrap 一行塞到底。 */
.alog{display:flex;flex-direction:column}
.alog-i{padding:9px 0;border-top:1px solid var(--line)}
.alog-i:first-child{border-top:0}
.alog-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.alog-a{font-size:13px;font-weight:600;flex:none}
.alog-a.ok{color:var(--ok)}
.alog-a.bad{color:var(--danger)}
.alog-ac{font-size:11.5px;color:var(--t3);font-family:ui-monospace,Menlo,Consolas,monospace}
.alog-t{margin-left:auto;font-size:11.5px;color:var(--t3);flex:none;
        font-variant-numeric:tabular-nums}
.alog-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;
        font-size:11.5px;color:var(--t3)}
.alog-id{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg);
         border:1px solid var(--line);border-radius:4px;padding:0 5px;
         overflow-wrap:anywhere}
.alog-who{margin-left:auto}
.alog-m2{font-size:12px;color:var(--t3);min-width:0;overflow:hidden;
         text-overflow:ellipsis;white-space:nowrap}
.alog-d{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:5px;
        font-size:12px;color:var(--t2)}
.alog-d code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
             color:var(--t1);background:var(--bg);border:1px solid var(--line);
             border-radius:4px;padding:1px 5px;overflow-wrap:anywhere;
             max-width:100%;min-width:0}
.alog-k{color:var(--t3);flex:none}
.alog-ar{color:var(--t3);flex:none}
.alog-mini .alog-i{padding:7px 0}
.card-more{padding:8px 0 10px;text-align:right;font-size:12.5px;color:var(--pri)}
.card-more a:hover{text-decoration:underline}

/* 占位页 */
.stub-tx{margin:10px 0;font-size:13.5px;line-height:1.8}
.stub-tx.muted{color:var(--t3);font-size:12.5px}
.stub-foot{display:flex;align-items:center;gap:12px;padding:6px 0 12px}
.stub-hint{font-size:12px;color:var(--t3);margin-left:auto}
.plan-title{margin:14px 0 2px;font-size:12px;color:var(--t3)}
.plan{margin:0 0 4px;padding-left:20px}
.plan li{font-size:13px;color:var(--t2);line-height:1.95}

/* ------------------------------------------------- 草稿层（T-11，两端共用）
   草稿确认卡是 ★§5.2 强确认的落点，也是 components/ui.html 里
   「草稿确认卡」这份共享组件的实现 —— 桌面与手机上长得一样。 */
.dfilter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.dfilter-i{font-size:12.5px;color:var(--t2);padding:5px 11px;
           border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.dfilter-i:hover{border-color:var(--line2);color:var(--pri)}
.dfilter-add{margin-left:auto;min-height:32px}   /* ★ 只给「未完成」那一页 */
.dfilter-i.on{background:var(--pri-bg);border-color:var(--pri-bg);
              color:var(--pri-ink);font-weight:600}

.dform{padding:8px 0 12px}
.dform-tx{width:100%;padding:9px 11px;font:inherit;font-size:13.5px;color:var(--t1);
          background:var(--surface);border:1px solid var(--line2);
          border-radius:8px;resize:vertical}
.dform-tx:focus{outline:none;border-color:var(--pri)}
.dform-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.dform-sel,.dform-in{padding:7px 9px;font:inherit;font-size:13px;color:var(--t1);
                     background:var(--surface);border:1px solid var(--line2);
                     border-radius:8px}
.dform-in{flex:1;min-width:140px}
.dform-sel:focus,.dform-in:focus{outline:none;border-color:var(--pri)}
.dform-row .btn{margin-left:auto}

/* ★ .btn 放在共用区而不是某个页面里：将来「确认 / 丢弃」之外的按钮也用它 */
.btn{font:inherit;font-size:13px;padding:6px 14px;border-radius:8px;cursor:pointer;
     border:1px solid var(--line2);background:var(--surface);color:var(--t2)}
.btn:hover{border-color:var(--pri);color:var(--pri)}
.btn-pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn-pri:hover{filter:brightness(1.08);color:#fff}
/* ★「作废这条」是**不可逆的终态**（终态只能再拉回来，但动作本身要有分量）——
   给它一个危险色，而不是和「标记完成」长得一样让人随手点错。 */
.btn-bad{color:var(--danger);border-color:#F3C6C6}
.btn-bad:hover{border-color:var(--danger);color:var(--danger);background:#FDECEA}
.btn[disabled]{opacity:.55;cursor:default}

.dlist{display:flex;flex-direction:column}
.dcard{padding:12px 0;border-top:1px solid var(--line)}
.dcard:first-child{border-top:0}
.dcard.is-done{opacity:.78}
.dcard-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dcard-kind{font-size:12px;color:var(--t3)}
.dcard-tgt{font-size:11.5px;color:var(--t3);
           font-family:ui-monospace,Menlo,Consolas,monospace}
.dcard-t{margin-left:auto;font-size:11.5px;color:var(--t3);flex:none}
/* ★ B4 · 落地对象的近况（「→ 速记 #3 已被丢弃」）。
   被排除的那条用红字 + 底色：它要与「在库里」一眼分得开 ——
   标了却看不出差别，等于没标。 */
.dcard-cmt{margin-top:6px;font-size:11.5px;color:var(--t3);
           overflow-wrap:anywhere}
.dcard-cmt.is-out{display:inline-block;padding:2px 8px;border-radius:6px;
                  color:var(--danger);background:#FDECEA}
.dcard-tx{display:block;width:100%;margin-top:8px;padding:8px 10px;
          font:inherit;font-size:13.5px;line-height:1.6;color:var(--t1);
          background:var(--bg);border:1px solid var(--line);
          border-radius:8px;resize:vertical}
.dcard-tx:focus{outline:none;border-color:var(--pri);background:var(--surface)}
.dcard-tx.is-plain{border:0;background:none;padding:6px 0;color:var(--t2);
                   overflow-wrap:anywhere}
.dcard-fields{margin-top:6px}
.dcard-f{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.dcard-conf{font-size:12px;color:var(--t3)}
.dcard-conf.strong{color:var(--todo)}
.dcard-ops{margin-left:auto;display:flex;gap:8px}

/* ==========================================================================
   B1a · 拾遗（速记）与起居注（日记）
   --------------------------------------------------------------------------
   ★ 两端共用（★D-B0-11 的第 2 层）：这些类同时被桌面壳与移动壳使用，
     mobile.css **只做触控尺寸适配**，不改结构。
   ★ 流式：用 flex-wrap 自动堆叠，不写断点 ——
     1440 下是「列表 + 侧栏」，390 下自然掉成单列，中间宽度也不会破版。
   ★ 所有可能装长文本的地方一律 min-width:0 + overflow-wrap:anywhere
     （B0 踩过：一条没断词点的长值能把整页顶出横向滚动条）。
   ========================================================================== */
.memo-wrap,.jr-wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.memo-main,.jr-main{flex:1 1 560px;min-width:0}
.memo-side,.jr-side{flex:0 1 260px;min-width:0}

/* ---------------------------------------------------------------- 记一笔 */
.minput-form{padding:8px 0 12px}
.minput{display:block;width:100%;padding:10px 12px;font:inherit;font-size:13.5px;
        line-height:1.6;color:var(--t1);background:var(--surface);
        border:1px solid var(--line2);border-radius:8px;resize:vertical}
.minput:focus{outline:none;border-color:var(--pri)}
.minput-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.minput-hint{font-size:12px;color:var(--t3)}
.minput-row .btn{margin-left:auto}
.minput-msg{margin-top:8px;font-size:12.5px;color:var(--todo);
            background:var(--todo-bg);border-radius:8px;padding:8px 10px;
            overflow-wrap:anywhere}

/* ---------------------------------------------------------------- 批量条 */
.mbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
      padding:8px 0;border-bottom:1px solid var(--line)}
.mbar-l{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2)}
.mbar-n{font-size:12.5px;color:var(--t3)}
.mbar-ops{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------------------------- 速记行 */
.mlist{display:flex;flex-direction:column}
.mrow{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
      border-bottom:1px solid var(--line)}
.mrow.is-done{opacity:.72}
.mrow-cb{padding-top:2px;flex:none}
.mrow-bd{flex:1;min-width:0}
.mrow-tx{font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
.mrow-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
           margin-top:4px;font-size:11.5px;color:var(--t3)}
.mrow-to{font-family:ui-monospace,Menlo,Consolas,monospace}
.mrow-ops{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.side-note{margin-top:8px;font-size:12px;line-height:1.75;color:var(--t3)}

/* ---------------------------------------------------------------- 日记 */
.jform{padding:8px 0 12px}
.jform-line{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.jfld{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:4px}
.jfld-s{flex:0 1 130px}
.jfld-k{font-size:11.5px;color:var(--t3)}
.jfld-v{padding:7px 9px;font:inherit;font-size:13px;color:var(--t1);
        background:var(--surface);border:1px solid var(--line2);border-radius:8px;
        width:100%;min-width:0}
.jfld-v:focus{outline:none;border-color:var(--pri)}
.jform-tx{display:block;width:100%;padding:10px 12px;font:inherit;font-size:13.5px;
          line-height:1.75;color:var(--t1);background:var(--surface);
          border:1px solid var(--line2);border-radius:8px;resize:vertical}
.jform-tx:focus{outline:none;border-color:var(--pri)}
.jform-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.jform-tags{flex:1 1 200px;min-width:0;padding:7px 9px;font:inherit;font-size:13px;
            background:var(--surface);border:1px solid var(--line2);
            border-radius:8px}
.jform-note{margin-top:6px;font-size:11.5px;color:var(--t3)}

.jlist{display:flex;flex-direction:column}
.jitem{padding:12px 0;border-top:1px solid var(--line)}
.jitem:first-child{border-top:0}
.jitem-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jitem-d{font-size:13px;font-weight:600;color:var(--pri);flex:none}
.jitem-t{font-size:13.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.jitem-ops{margin-left:auto;flex:none}
.jitem-b{margin-top:6px;font-size:13px;line-height:1.8;color:var(--t2);
         white-space:pre-wrap;overflow-wrap:anywhere}

.jside{display:flex;flex-direction:column}
.jside-i{display:flex;align-items:baseline;gap:8px;padding:7px 0;
         border-bottom:1px solid var(--line);font-size:12.5px;color:var(--t2)}
.jside-i:last-child{border-bottom:0}
.jside-i.on{color:var(--pri-ink);font-weight:600}
.jside-t{flex:1;min-width:0;color:var(--t3);font-size:11.5px;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   B1b · 主簿（T-24）
   --------------------------------------------------------------------------
   ★ 周视图的硬要求：1440 / 1280 / 1024 三档**都不许横向滚动**。
     做法是七列一律 `minmax(0,1fr)`（★ 不能用 1fr 之外的固定值，
     grid 子项默认 min-width:auto，一条长标题会把整列顶宽、进而顶出滚动条），
     再给每个格子里的文字 `min-width:0 + overflow-wrap:anywhere`。
     这样 1024 下每列约 90px 也能正常换行，不会破版。
   ★ 与 B1a 同纪律：这里的类两端共用，mobile.css 只调触控尺寸，不改结构。
   ========================================================================== */
/* ★★ B10 · 改动 3：右边的「今天」侧栏**去掉了**，七列吃满整块宽度
   （列宽从约 130px 涨到约 190px，卡片放得下地点与「有备注」）。
   ★ 侧栏原本承担的「今天有几条 / 有没有逾期」由**上区顶部那条逾期条**接手 ——
     红色卡片散在七列里是数不出条数的，而「欠着几条」必须是一个数字。
   ★ .sch-side 这个类**故意留着**：它是侧栏的壳，哪天要放别的东西不用重新起名字。 */
.sch-wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.sch-main{flex:1 1 620px;min-width:0}
.sch-side{flex:0 1 260px;min-width:0}

/* ★ 逾期条：一行数字 + 一句话，不折叠、不需要点开。 */
.late-bar{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
          margin:0 0 9px;padding:7px 11px;border-radius:8px;
          background:#FDECEA;color:var(--danger);font-size:12.5px}
.late-bar .mini{color:var(--danger)}
.late-bar .mini:hover{color:var(--danger)}

/* ---------------------------------------------------------------- 翻周 */
.wk-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.wk-nav-n{margin-left:auto;font-size:12px;color:var(--t3)}

/* ---------------------------------------------------------------- 周网格 */
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:10px 0}
.wk-col{min-width:0;border:1px solid var(--line);border-radius:9px;
        background:#fff;display:flex;flex-direction:column;overflow:hidden}
.wk-col.is-today{border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri)}
.wk-hd{display:flex;align-items:baseline;gap:6px;padding:7px 8px;
       border-bottom:1px solid var(--line);background:var(--bg);
       font-size:11.5px;color:var(--t3)}
.wk-col.is-today .wk-hd{background:var(--pri-bg);color:var(--pri-ink);font-weight:600}
.wk-d{font-variant-numeric:tabular-nums}
.wk-w{margin-left:auto}
.wk-bd{display:flex;flex-direction:column;gap:5px;padding:7px 7px 9px;min-width:0}
.wk-none{font-size:12px;color:var(--line2)}

/* ★★ 卡片改为**上下两行**（28 号实测：格子里的字一个一行、竖成一条）
   --------------------------------------------------------------------------
   病因不在字体，也不在格子宽度 —— 是弹性盒的 min-content 陷阱：
     改造前一行里塞了「时间 / 标题 / ✓」三段，时间与按钮是 flex:none，
     标题段是 `flex:1;min-width:0`。**min-width:0 允许它一路缩到 min-content**，
     而它的 min-content 在 `overflow-wrap:anywhere` 下正好是**一个汉字**
     （实测 33px）→ 于是每个字占一行，整条竖起来。
   ★ 佐证：同格的**提醒**卡当时是正常的（84px 两行）—— 因为它没有按钮兄弟，
     段是 `flex:0 1 auto`、没有 min-width:0，于是保住了自己的 min-content。
     同一份字号、同一个格子，一个竖排一个正常，差别只在这两行 CSS。

   改法：**一行变两行**。第一行只放最少的元信息（时间 · 空间 · 可用宽度），
   第二行整行留给标题 —— 标题独占一整行就有 84px 可用，六个汉字一行放得下。
   顺带三件事：
     1. 完成 / 回到未完成由**点整张卡**触发，不再常驻一颗 20px 的按钮 ——
        那 20px 在 98px 的卡里就是 20% 的宽度，是竖排的另一半原因，也是误点源。
     2. 时间与重复标记合成一个 `.wk-tk-m` 前缀，长标题不再被时间列吃掉一截。
     3. 整卡可点：手机上 98×N 的命中区，比 20px 的方块可靠得多。 */
.wk-ev{display:flex;flex-direction:column;gap:1px;min-width:0;padding:5px 6px;
       border-radius:6px;background:var(--pri-bg);cursor:pointer}
.wk-ev:hover{filter:brightness(.97)}
.wk-ev-t{font-size:10.5px;color:var(--pri-ink);font-variant-numeric:tabular-nums}
.wk-ev-x{font-size:12px;line-height:1.45;color:var(--t1);
         min-width:0;overflow-wrap:anywhere}

/* ★ 卡片内部：**固定上下两行**，不靠 flex 的排布去碰运气。
   把卡片变成 position:relative 的普通块，两个 <span> 都是 block：
     .wk-tk-x   标题 —— 第 1 行，永远在最上
     .wk-tk-m   前缀（时间 · ↻重复 · @地点 · 有备注）—— 第 2 行，标题之下
   为什么要这么死板：
     · 用 order 排序 → 无效。卡片里还有一颗 <button>，而 order 只对同一弹性层级
       生效，子项集合一变（新建 / 移动 / 加标记）排序立刻错位（28 号实测：
       ✓ 跑到标题上面、时间掉到最底）。
     · 用 flex-wrap 行流 → 也不稳。标题 width:100% 虽然能顶成整行，但一旦卡片
       有 padding-left（.is-done 给位置让出 22px），可换行宽度变了，
       前缀行会先占满一行、把标题挤到它下面 —— 同一个类在上下两区会表现不一致。
   改成普通块就没这两类问题：谁在上面由结构决定，与宽度、与兄弟节点多少无关。 */
.wk-tk{position:relative;display:block;min-width:0;padding:5px 6px 5px 20px;
       border-radius:6px;background:var(--todo-bg);cursor:pointer}
.wk-tk:hover{filter:brightness(.97)}
/* ★ 标题行：**永远第 1 行**。可用宽度 66px 让「万莲莲长期签证咨询」落在 2 行内
   （改前是 33px / 每字一行 —— 那时它是 flex:1 + min-width:0，
    被时间与 ✓ 挤到了 min-content，而 min-content 在 anywhere 下正好是一个汉字）。 */
.wk-tk-x{display:block;min-width:0;font-size:12px;line-height:1.45;color:var(--t1);
         overflow-wrap:anywhere}
/* 前缀行：时间 · ↻重复 · @地点 · 有备注。flex-wrap —— 前缀再多也只往下折，
   永远不会把标题那一行挤掉；它自己只占 10.5px 高。 */
.wk-tk-m{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;
         margin-top:2px;min-width:0;font-size:10.5px;line-height:1.3;color:var(--t3)}
.wk-tk-m > span{font-variant-numeric:tabular-nums}
.wk-tk-d{font-variant-numeric:tabular-nums;opacity:.85}
/* 「有备注」这类补充信息比时间更弱一级：它是提示，不是这条待办的属性 */
.wk-tk-m > span:last-child:not(:first-child){opacity:.75}
/* ★★ B10 · 改动 1：✓ 从「装饰」变回**一颗真的按钮**。
   --------------------------------------------------------------------------
   改之前它是 13px 的无框小字、绝对定位在左上角，**真正的命中区是整张卡**
   （卡片带 data-finish）—— 于是「想看备注」和「做完了」是同一个动作。
   改之后：
     · ✓ 是 22×22 的**有框按钮**，一颗看得见、点得到的触控目标；
     · 命中区就是它自己 —— 派发顺序在 todo-popup.js 里先判 .wk-done；
     · 卡片其余任何地方 = 弹出内容。
   ★ 仍然**绝对定位**（不占文档流）：一是 .wk-tk 必须是块（标题才不会被
     flex 挤成 min-content，test_b5 有断言钉着），二是绝对定位的按钮
     在上下两区的位置完全一致 —— 打勾前后视觉不跳。
   ★ 给它留出的 30px 沟槽是**真实存在**的：所以它既看得见也点得到，
     不再是「长得像有一个勾、其实要点别处」。 */
.wk-tk > .wk-done{position:absolute;left:4px;top:4px;width:22px;height:22px;
                  display:grid;place-items:center;padding:0;
                  font-size:11px;line-height:1;border:1px solid var(--line2);
                  border-radius:5px;background:var(--surface);color:var(--t3);
                  cursor:pointer}
.wk-tk:hover > .wk-done{color:var(--ok);border-color:var(--ok)}
.wk-tk > .wk-done:hover{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.wk-tk.is-late > .wk-done{border-color:#F0BDB8;color:var(--danger)}
.wk-tk.is-done > .wk-done{color:var(--ok)}
/* ★ 下区（已完成）**没有任何符号**（改动 2）—— 只在 hover 时浮出一个极淡的
   「改」：它不占宽度、不抢视线，但能让「这张卡可以点」这件事有处落地。 */
.wk-tk-e{position:absolute;right:6px;top:5px;font-size:10.5px;color:var(--line2);
         opacity:0;pointer-events:none}
.wk-tk:hover > .wk-tk-e{opacity:1}
/* ★ 已完成的标题字号不动、颜色退一档：完成后它从「待办」变成「记录」，
   不该再跟未完成抢注意力（.wk-zone.is-done 那段已经在做这件事，这里补上标题）。 */
.wk-tk.is-done .wk-tk-x{color:var(--t2)}
/* 卡片给左上角那颗 ✓ 让位（B10 从 20px 加到 30px：那颗勾现在是 22px 宽的真按钮）。
   标题**还在第一行** —— 因为 .wk-tk-x 是 block，结构上排在 .wk-tk-m 之前。 */
.wk-tk{padding-left:30px}
.wk-done{flex:none;width:20px;height:20px;line-height:1;border:1px solid var(--line2);
         border-radius:5px;background:var(--surface);color:var(--t2);
         font-size:12px;cursor:pointer;padding:0}
.wk-done:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}

/* ★★ B5 · 周视图上下两区
   --------------------------------------------------------------------------
   上区 = 未完成（待打勾），下区 = 已完成；**两个完整的七列网格，列对齐**。
   「只有上下移，没有斜移」：周三到期、周五才做完的事，打勾后从上面那格的
   周三**垂直**落到下面那格的周三 —— 分列看的是原日期，不是完成那天。
   ★ 两区之间用一条虚线而不是卡片：它们属于**同一周**，拆成两张卡会让人以为
     是两个互不相干的东西，而实际上它们只是同一条记录的两种状态。 */
.wk-zone{margin-bottom:6px}
.wk-zone + .wk-zone{margin-top:14px;border-top:1px dashed var(--line);
                    padding-top:12px}
.wk-zone-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
           font-size:12.5px;color:var(--t1);font-weight:600}
.wk-zone-n{font-weight:400;font-size:11.5px;color:var(--t3);line-height:1.5}
.wk-zone.is-done .wk-col{background:var(--bg)}
.wk-zone.is-done .wk-hd{opacity:.75}
.wk-zone.is-done .wk-tk{background:var(--ok-bg)}
.wk-zone.is-done .wk-tk-x{color:var(--t2)}

/* 逾期**未完成**：留在上区那一列并标红（★ 不自动下移 —— 它还没做完） */
.wk-tk.is-late{background:#FDECEA}
.wk-tk.is-late .wk-tk-x{color:var(--danger)}

/* ★ 提醒借周视图的一天画出来（B5 第 4 条 · D-B5-4 = A，只做展示）。
   用**虚线框**而不是另一种底色：提醒与待办不是同一种东西（它有自己的
   生命周期），视觉上必须一眼分得开，而不是「看起来像一条浅色的待办」。 */
.wk-rm{display:flex;flex-direction:column;gap:1px;min-width:0;padding:5px 6px;
       border-radius:6px;background:var(--surface);border:1px dashed var(--todo);
       text-decoration:none;cursor:pointer}
.wk-rm:hover{filter:brightness(.97)}
.wk-rm.is-out{opacity:.55}
.wk-rm-t{font-size:10.5px;color:var(--todo);font-variant-numeric:tabular-nums}
.wk-rm-x{font-size:12px;line-height:1.45;color:var(--t1);overflow-wrap:anywhere}
/* ★★ B10 · 建议 B：重复提醒**只画一次实体卡** —— 本周第一次出现那天是完整卡片，
   其余几天是这一行极淡的「↻ 标题」。一条每天重复的提醒原来铺七张一模一样的卡，
   占了上区六分之一的面积，而那六张没有一张多告诉你一件事。
   ★ 它仍然可以点（跳提醒页），只是不再抢位置。 */
.wk-echo{display:block;padding:3px 4px 3px 7px;font-size:10.5px;line-height:1.35;
         color:#B0B5BB;border-left:2px solid var(--line);overflow-wrap:anywhere}
.wk-echo:hover{color:var(--todo);border-left-color:var(--todo)}
.wk-echo-i{margin-right:4px;opacity:.9}

/* ★ B5 · 待办弹窗（D-B5-3 = A：新建与编辑**同一个**弹窗）。
   原生 <dialog>：遮罩、Esc、焦点都是浏览器给的，不必自己实现一遍。 */
.tdlg{width:min(540px,92vw);max-height:88vh;overflow:auto;padding:0;
      border:1px solid var(--line2);border-radius:12px;
      background:var(--surface);color:var(--t1)}
.tdlg::backdrop{background:rgba(20,20,20,.45)}
.tdlg-h{display:flex;align-items:center;gap:10px;padding:12px 14px;
        border-bottom:1px solid var(--line)}
.tdlg-t{flex:1;min-width:0;font-size:14px;font-weight:600}
.tdlg-x{flex:none;min-width:32px;height:32px;border:0;background:none;
        font-size:20px;line-height:1;color:var(--t3);cursor:pointer}
.tdlg .sform{padding:12px 14px 2px}
.tdlg .wk-msg{margin:0 14px 10px}
.tdlg-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
        padding:10px 14px 14px;border-top:1px solid var(--line)}
.tdlg-src{flex:1;min-width:0;font-size:11.5px;color:var(--t3)}
.tdlg-ops{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------------------------- 表单 */
.sform{padding:8px 0 12px}
.sform-2{border-top:1px dashed var(--line)}
.sform-line{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sfld{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:4px}
.sfld-g{flex:2 1 240px}
.sfld-g2{flex:2 1 200px}
.sfld-s{flex:0 1 120px}
.sfld-k{font-size:11.5px;color:var(--t3)}
.sfld-v{padding:7px 9px;font:inherit;font-size:13px;color:var(--t1);
        background:var(--surface);border:1px solid var(--line2);
        border-radius:8px;width:100%;min-width:0}
.sfld-v:focus{outline:none;border-color:var(--pri)}
.sfld-cb{display:flex;align-items:center;gap:6px;align-self:flex-end;
         padding-bottom:8px;font-size:12.5px;color:var(--t2);flex:none}
.sform-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sform-al{font-size:12px;color:var(--t3)}
.sform-row .btn{margin-left:auto}

/* ★ B4 · 类别切换（日程 / 待办）—— 单表单的两个身份。
   做成一排分段控件而不是下拉：二选一用下拉要多点一下，
   而「我现在加的是哪一种」必须**一直看得见**（28 号 #4 的困惑就在这儿）。 */
.skind{display:inline-flex;gap:0;margin:2px 0 10px;
       border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.skind-i{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
         font-size:13px;color:var(--t2);cursor:pointer;background:var(--surface)}
.skind-i + .skind-i{border-left:1px solid var(--line2)}
.skind-i.on,.skind-i:has(input:checked){background:var(--pri);color:#fff}
.skind-i input{margin:0}

/* ★ B4 · 备注改成多行：原来单行 input 写不下第二句（28 号 #3）。
   rows=3 + 只允许竖向拖 —— 横向拖动会把整行撑破，390px 下必然横向滚动。 */
.sfld-ta{resize:vertical;min-height:62px;line-height:1.5}

/* 去向说明：「加进来后它会出现在哪」——**写在按钮旁边**，不是写在文档里。 */
.sch-where{font-size:12px;color:var(--t3);line-height:1.5}
.sch-where b{color:var(--t2);font-weight:600}

/* 待办行里的备注（存了就要看得见） */
.trow-note{margin-top:4px;font-size:12px;color:var(--t3);
           white-space:pre-wrap;overflow-wrap:anywhere}
.wk-msg{margin-top:8px;font-size:12.5px;color:var(--t2);background:var(--bg);
        border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}
.wk-msg.is-bad{color:var(--danger);background:#FDECEA}

/* ---------------------------------------------------------------- 侧栏今日 */
.side-k{margin:8px 0 4px;font-size:11.5px;color:var(--t3)}
/* ★ 与 .wk-tk 同病同治（28 号实测）：行里混了 flex:none 的时间 + flex:1;min-width:0
   的标题，标题会被压到 min-content（一个汉字）→ 竖排。侧栏更宽（260px）所以轻微，
   但结构是同一个陷阱，一起改掉。
   ★ 现在与周视图卡片一致：**整行可点**触发完成 / 回到未完成，行尾不再挂按钮 ——
   侧栏那一列只放「今天做过什么」这一件事，按钮交给卡片本身就够了。 */
/* ★★ B10：与周视图卡片同一套口径 —— **点 ✓ 才完成，点行是看内容**。
   手机上这条更关键：指尖比行还宽，「想看备注就必定误打勾」是常态。
   ★ 左边 30px 沟槽留给那颗 22px 的 ✓；已完成那段没有符号，但缩进保持一致，
     于是上下两段的标题是对齐的。 */
.side-i{position:relative;display:flex;flex-direction:column;gap:2px;
        padding:7px 0 7px 30px;
        border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.side-i:last-child{border-bottom:0}
.side-t{font-variant-numeric:tabular-nums;color:var(--t3);font-size:11.5px}
.side-x{min-width:0;overflow-wrap:anywhere}
.side-i.is-done .side-x{color:var(--t2)}
.side-i > .wk-done{position:absolute;left:0;top:7px;width:22px;height:22px;
                   display:grid;place-items:center;padding:0;
                   font-size:11px;line-height:1;border:1px solid var(--line2);
                   border-radius:5px;background:var(--surface);color:var(--t3);
                   cursor:pointer}
.side-i > .wk-done:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}

/* --------------------------------------- 首页：未读提醒条与今日区块（T-27）
   ★ 这两块是「不订阅推送也一定看得见」的落点：提醒能不能到取决于厂商、
     浏览器、网络，而打开首页是确定的 —— 所以它们必须在首屏最上面，
     不能折叠、不能需要点一下才展开。 */
.mz-alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
          margin:0 0 14px;padding:10px 14px;border-radius:10px;
          background:#FDECEA;border:1px solid #F3C6C6;color:var(--danger)}
.mz-alert-n{min-width:20px;height:20px;padding:0 5px;border-radius:10px;
            background:var(--danger);color:#fff;font-size:12px;font-weight:600;
            display:grid;place-items:center;flex:none}
.mz-alert-tx{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
.mz-alert-go{flex:none;font-size:12.5px;color:var(--pri);font-weight:600}

.mz-k{margin:10px 0 2px;font-size:11.5px;color:var(--t3)}
.mz-line{display:flex;align-items:baseline;gap:10px;padding:7px 0;
         border-bottom:1px solid var(--line);font-size:13px}
.mz-line:last-child{border-bottom:0}
.mz-line.is-late .mz-t{color:var(--danger)}
.mz-line.is-late .mz-x{color:var(--danger)}
.mz-t{flex:none;width:86px;font-size:11.5px;color:var(--t3);
      font-variant-numeric:tabular-nums}
.mz-x{flex:1;min-width:0;overflow-wrap:anywhere}
.mz-x:hover{color:var(--pri);text-decoration:underline}

/* ★ 侧栏 / 底部 Tab 的红点：只表示「已响过但人还没处理」 */
.dot{display:inline-grid;place-items:center;min-width:17px;height:17px;
     margin-left:6px;padding:0 4px;border-radius:9px;background:var(--danger);
     color:#fff;font-size:10.5px;font-weight:600;line-height:1}

/* ------------------------------------------------- 主簿的子导航（T-25） */
.sch-subnav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}

/* ---------------------------------------------------------------- 待办清单 */
/* ★ 待办与提醒是同一套行结构，共用一组类：两份模板若各写一套，
   「提醒行比待办行宽 2px」这类差异迟早出现，而且没人说得清哪份是对的。 */
.tlist,.rlist{display:flex;flex-direction:column}
.trow,.rrow{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
      border-bottom:1px solid var(--line);cursor:pointer}
.trow:last-child,.rrow:last-child{border-bottom:0}
.trow.is-done,.rrow.is-done{opacity:.72}
.trow-bd,.rrow-bd{flex:1;min-width:0}
.trow-tx,.rrow-tx{font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
.trow-meta,.rrow-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
           margin-top:4px;font-size:11.5px;color:var(--t3)}
.trow-none{color:var(--line2)}
.trow-ops,.rrow-ops{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ★ 上次推送失败要看得见：推送是「发出去了但没人知道有没有到」的黑洞，
   把 last_error 摆在行上是唯一能让人发现它的地方（T-28 会往这里写）。 */
.rrow-err{color:var(--danger);background:#FDECEA;border-radius:4px;padding:0 5px}

/* ---------------------------------------------------------------- 登录（T-06）
   手机优先：卡片在 390px 下也不横向滚动；桌面自然居中。 */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
           padding:24px 16px}
.auth-wrap{width:100%;max-width:360px}
.auth-brand{text-align:center;margin-bottom:20px}
.auth-brand h1{margin:0;font-size:26px;letter-spacing:.5px;color:var(--pri)}
.auth-sub{margin:6px 0 0;font-size:13px;color:var(--t2)}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
           padding:24px 20px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.auth-title{margin:0 0 10px;font-size:17px;font-weight:600}
.auth-note{margin:0 0 16px;font-size:13px;color:var(--t2);line-height:1.7}
.auth-warn{color:var(--todo);margin-top:14px;margin-bottom:0}
.auth-list{margin:0 0 8px;padding-left:18px;font-size:13px;color:var(--t2);line-height:1.8}
.auth-list code{background:var(--bg);border:1px solid var(--line);border-radius:4px;
                padding:1px 5px;font-size:12px}
.auth-error{background:#fff5f5;border:1px solid #f3c6c6;color:var(--danger);
            border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px}
/* 与 .auth-error 对称的正向提示：改密码成功后甩回登录页时用它说明「为什么我又回来了」 */
.auth-ok{background:var(--ok-bg);border:1px solid #c9e8d3;color:var(--ok);
         border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.auth-form{display:block}
.auth-label{display:block;font-size:13px;color:var(--t2);margin:0 0 6px}
.auth-input{width:100%;padding:10px 12px;margin-bottom:14px;font-size:15px;
            border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--t1)}
.auth-input:focus{outline:none;border-color:var(--pri);
                  box-shadow:0 0 0 3px rgba(91,70,54,.10)}
.auth-btn{width:100%;padding:11px;font-size:15px;color:#fff;background:var(--pri);
          border:0;border-radius:8px;cursor:pointer}
.auth-btn:hover{filter:brightness(1.08)}
.auth-btn:active{transform:translateY(1px)}
.auth-foot{margin:16px 0 0;text-align:center;font-size:12px;color:var(--t3)}
/* 备案号那一行：与上一行贴紧（它是同一块页脚的续行，不是新段落） */
.auth-beian{margin-top:6px;font-size:11px}

/* ---------------------------------------------------------------- 推送（B1b T-28）
   订阅卡片：明说「不订阅也漏不掉」，这是它最重要的一行字 ——
   推送在鸿蒙端基本不可达，不给这句话用户会把「没弹出来」当成系统坏了。 */
.pbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;
      padding:14px 16px;margin:0 0 16px}
.pbox-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pbox-t{font-size:15px;font-weight:600;color:var(--t1)}
.pbox-s{font-size:12px;color:var(--t2)}
.pbox-bd{margin-top:10px}
.pbox-state{font-size:13px;color:var(--t2);line-height:1.7}
.pbox-ops{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pbox-note{margin-top:10px;font-size:12px;color:var(--t3);line-height:1.8}

/* ==========================================================================
   B2 · 度支（T-35 导入与对账）
   --------------------------------------------------------------------------
   ★ 两条硬要求（验收 A15）：
     1. 1440 / 1280 / 1024 三档都不许横向滚动 —— 表格一律 ``table-layout:fixed``
        + 每个单元格 ``overflow-wrap:anywhere``，列宽由模板里的 ``<colgroup>`` 定死。
        （B0 踩过：一条没断词点的长摘要能把整张表顶宽，而"空数据的回归"永远全绿。）
     2. 390px 下同样不许滚动 —— 所以预览表只留四列（行号 / 日期 / 金额 / 内容），
        对手方与摘要**并成一列**上下排。并列六列在 390 上必然破版。
   ★ 与 B1a/B1b 同纪律：这些类两端共用，mobile.css 只做尺寸适配，不改结构。
   ========================================================================== */
.fin-wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.fin-main{flex:1 1 560px;min-width:0}
.fin-side{flex:0 1 280px;min-width:0}

/* ---------------------------------------------------------------- 提示条 */
.fin-alert{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
           margin:0 0 12px;padding:10px 13px;border-radius:10px;font-size:13px;
           background:var(--bg);border:1px solid var(--line);color:var(--t2)}
.fin-alert.is-warn{background:var(--todo-bg);border-color:#F0DCB4;color:var(--todo)}
.fin-alert.is-bad{background:#FDECEA;border-color:#F3C6C6;color:var(--danger)}
.fin-alert.is-ok{background:var(--ok-bg);border-color:#C9E8D3;color:var(--ok)}
.fin-alert-n{flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
             background:currentColor;color:#fff;font-size:11.5px;font-weight:600;
             display:grid;place-items:center}
.fin-alert-tx{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.7;white-space:pre-wrap}

/* ---------------------------------------------------------------- 计数卡 */
.fin-stats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.fin-stat{flex:1 1 118px;min-width:0;border:1px solid var(--line);border-radius:9px;
          background:var(--surface);padding:9px 11px}
.fin-stat-k{font-size:11.5px;color:var(--t3);line-height:1.5}
.fin-stat-v{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;
            overflow-wrap:anywhere}
.fin-stat-v.ok{color:var(--ok)}
.fin-stat-v.todo{color:var(--todo)}
.fin-stat-v.bad{color:var(--danger)}
.fin-stat-x{margin-top:2px;font-size:11.5px;color:var(--t3);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- 上传 */
.fin-drop{border:1px dashed var(--line2);border-radius:10px;background:var(--bg);
          padding:14px;display:flex;flex-direction:column;gap:10px;margin:10px 0}
.fin-file{width:100%;padding:8px 10px;background:var(--surface);
          border:1px solid var(--line2);border-radius:8px;font:inherit;font-size:13px;color:var(--t1)}
.fin-drop-h{margin:8px 0;font-size:13px;color:var(--t1);overflow-wrap:anywhere}
.fin-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fin-fld{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:4px}
.fin-fld-s{flex:0 1 120px}
.fin-fld-k{font-size:11.5px;color:var(--t3)}
.fin-fld-v{padding:7px 9px;font:inherit;font-size:13px;color:var(--t1);
           background:var(--surface);border:1px solid var(--line2);
           border-radius:8px;width:100%;min-width:0}
.fin-fld-v:focus{outline:none;border-color:var(--pri)}
.fin-cb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2);
        flex:none;padding-bottom:8px}
.fin-hint{margin:8px 0 0;font-size:12.5px;color:var(--t3);line-height:1.8;
          overflow-wrap:anywhere}
.fin-ops{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* ---------------------------------------------------------------- 识别信息 */
.fin-metas{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.fin-meta{font-size:12px;color:var(--t2);background:var(--bg);border:1px solid var(--line);
          border-radius:999px;padding:3px 10px;overflow-wrap:anywhere;min-width:0}
.fin-meta b{color:var(--t1);font-weight:600}

/* ---------------------------------------------------------------- 列映射表单 */
.fin-map{margin:0 0 6px}
.fin-map-d{border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.fin-map-d > summary{padding:8px 12px;font-size:12.5px;color:var(--t2);cursor:pointer;
                     list-style:none;overflow-wrap:anywhere}
.fin-map-d > summary::-webkit-details-marker{display:none}
.fin-map-d > summary::before{content:"▸ ";color:var(--t3)}
.fin-map-d[open] > summary::before{content:"▾ "}
.fin-map-g{padding:2px 12px 10px}
.fin-map-t{margin:8px 0 4px;font-size:11.5px;color:var(--t3)}
.fin-map-f{display:flex;gap:8px;flex-wrap:wrap}
.fin-map-i{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px}
.fin-map-k{font-size:11.5px;color:var(--t3)}
.fin-map-v{padding:6px 8px;font:inherit;font-size:12.5px;color:var(--t1);
           background:var(--surface);border:1px solid var(--line2);
           border-radius:7px;width:100%;min-width:0}
.fin-map-v:focus{outline:none;border-color:var(--pri)}

/* ---------------------------------------------------------------- 表格
   ★ table-layout:fixed + anywhere：长摘要只在自己那一格里换行，绝不把表顶宽 */
.fin-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.fin-tbl th,.fin-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);
                        text-align:left;vertical-align:top;font-size:12.5px;
                        overflow-wrap:anywhere;min-width:0}
.fin-tbl th{font-size:11.5px;font-weight:400;color:var(--t3);background:var(--bg)}
.fin-tbl tr:last-child td{border-bottom:0}
.fin-tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-tbl .dim{color:var(--t3);font-size:11.5px;font-variant-numeric:tabular-nums}
.fin-tbl .out{color:var(--danger)}
.fin-tbl .in{color:var(--ok)}
.fin-tbl-bd{min-width:0;overflow-wrap:anywhere}

/* 跳过行：一行一条原因（★ 必须看得见 —— "有行被静默丢了"就是这么被防住的） */
.fin-skips{margin:4px 0 0;padding:0;list-style:none}
.fin-skips li{padding:5px 0;border-bottom:1px solid var(--line);font-size:12px;
              color:var(--t2);overflow-wrap:anywhere}
.fin-skips li:last-child{border-bottom:0}

/* ---------------------------------------------------------------- 对账 */
.fin-recon{display:flex;flex-direction:column}
.fin-recon-i{display:flex;align-items:baseline;gap:12px;padding:8px 0;
             border-bottom:1px solid var(--line);font-size:13px}
.fin-recon-i:last-child{border-bottom:0}
.fin-recon-k{flex:1;min-width:0;color:var(--t2);overflow-wrap:anywhere}
.fin-recon-v{flex:none;font-weight:600;font-variant-numeric:tabular-nums;
             text-align:right}
.fin-recon-v.ok{color:var(--ok)}
.fin-recon-v.bad{color:var(--danger)}
.fin-li{font-size:12.5px;color:var(--t2);line-height:1.8;overflow-wrap:anywhere}
.fin-li + .fin-li{margin-top:6px}
/* 侧栏卡里的小节标题（与 .mz-k 同一套观感，但不共用类名：
   两端各有一套列表样式，混用会让"改 A 破了 B"） */
.fin-k{margin:10px 0 2px;font-size:11.5px;color:var(--t3)}

/* ==========================================================================
   B2 · 流水台账与 L3 待确认（T-36）
   --------------------------------------------------------------------------
   沿用 A15 那两条硬要求（这里对应 A16）：
     1. 1440 / 1280 / 1024 三档都不横向滚动 —— 台账表 `table-layout:fixed`
        + `<colgroup>` 定死列宽 + 单元格 `overflow-wrap:anywhere`；
        筛选条与批量条一律 `flex-wrap`，宁可换行也不撑宽。
     2. 长摘要不撑破单元格 —— 对手方与摘要**上下排在同一格**里，坏也只坏自格。
   ★ 390px 走的是 `m/pages/finance_txn.html` 的卡片列表（不是把这张表挤扁），
     所以这里没有针对窄屏的表格降级规则 —— 那种"降级"是两套动线挤在一份模板里。
   ========================================================================== */

/* ---------------------------------------------------------------- 筛选条 */
.led-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
            margin:0 0 12px;padding:11px 12px;border:1px solid var(--line);
            border-radius:10px;background:var(--surface)}
.led-filter .fin-fld{flex:0 1 132px}
.led-filter .fin-ops{margin:0}
/* 搜索框单独放宽：它是唯一需要输入多个字的控件 */
.led-filter .led-filter-q{flex:1 1 190px}
/* 自动分类按钮：独立小 form，贴在筛选条正下方 */
.led-auto{margin:-4px 0 12px}
.led-auto .btn{font-size:12.5px}
.led-filter-d{margin:0 0 12px}
.led-filter-d > summary{padding:8px 12px;font-size:12.5px;color:var(--t2);
                        border:1px solid var(--line);border-radius:9px;
                        background:var(--surface);cursor:pointer;list-style:none;
                        overflow-wrap:anywhere}
.led-filter-d > summary::-webkit-details-marker{display:none}
.led-filter-d > summary::before{content:"▸ ";color:var(--t3)}
.led-filter-d[open] > summary::before{content:"▾ "}
.led-filter-d[open] > summary{margin-bottom:10px}

/* ---------------------------------------------------------------- 批量操作条
   上下各一条（同一个 form 里的两组同名按钮 —— 点哪一组就提交哪一个 value）。
   上面那条让"勾完不用往下滚"，下面那条让"翻到表尾就能直接操作"。 */
.led-ops{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
         margin:0 0 10px;padding:9px 11px;border:1px solid var(--line);
         border-radius:9px;background:var(--bg)}
.led-sel{flex:none;font-size:12.5px;color:var(--t2)}
.led-sel b{color:var(--pri);font-variant-numeric:tabular-nums}
.led-cat-sel{flex:0 1 158px;width:auto}

/* ---------------------------------------------------------------- 台账表 */
.led-tbl tr.is-out{opacity:.62}
.led-tbl tr.is-todo{background:var(--todo-bg)}
.led-cp{font-size:12.5px;overflow-wrap:anywhere}
select.led-cat{width:100%;min-width:0;padding:5px 7px;font:inherit;font-size:12px;
               color:var(--t1);background:var(--surface);
               border:1px solid var(--line2);border-radius:7px}
select.led-cat:focus{outline:none;border-color:var(--pri)}
/* 改过还没提交的行：一眼能看出"保存"按钮会动哪几行 */
select.led-cat.is-dirty{border-color:var(--pri);background:var(--pri-bg)}
.led-dirty{color:var(--pri)}
.led-pager{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 0}

/* ---------------------------------------------------------------- 手机卡片
   ★ 只在 m/pages/finance_txn.html 里用；放 app.css 的理由是它与 .mrow 同类
     （分叉页的专用组件，只是目前只有一端用），而 mobile.css 的纪律是
     "只定义 .mb-*、不覆盖桌面类"—— 放那边就得破例。 */
.led-card{border:1px solid var(--line);border-radius:10px;background:var(--surface);
          padding:10px 11px}
.led-card.is-out{opacity:.62}
.led-card.is-todo{border-color:#F0DCB4;background:var(--todo-bg)}
.led-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.led-cb{flex:none;width:18px;height:18px;margin:0}
.led-card-d{flex:none;font-size:12px;color:var(--t2);
            font-variant-numeric:tabular-nums}
.led-card-a{flex:0 1 auto;min-width:0;font-size:12px;overflow-wrap:anywhere}
.led-card-amt{margin-left:auto;flex:none;font-size:15px;font-weight:600;
              font-variant-numeric:tabular-nums}
.led-card-amt.out{color:var(--danger)}
.led-card-amt.in{color:var(--ok)}
.led-card-cp{margin-top:5px;font-size:13.5px;overflow-wrap:anywhere}
.led-card-ds{font-size:12px;overflow-wrap:anywhere}
.led-card-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.led-card-f select.led-cat{flex:1 1 150px;width:auto}

/* ---------------------------------------------------------------- L3 并排对照
   ★ 窄屏自动退化成上下堆叠（`.rev-side` 的 `flex:1 1 240px` + 换行），
     所以这一页两端共用一份模板 —— 并置变堆叠是尺寸适配，不是动线变化。 */
.rev-list{display:flex;flex-direction:column;gap:14px}
.rev-pair{border:1px solid var(--line);border-radius:10px;background:var(--surface);
          padding:12px}
.rev-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.rev-head-t{font-size:12.5px;color:var(--t2);overflow-wrap:anywhere}
.rev-sides{display:flex;gap:10px;flex-wrap:wrap}
.rev-side{flex:1 1 240px;min-width:0;padding:9px 11px;background:var(--bg);
          border:1px solid var(--line);border-radius:9px}
.rev-side-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
            padding-bottom:6px;border-bottom:1px solid var(--line)}
.rev-side-n{flex:1;min-width:0;font-size:12px;color:var(--t3)}
.rev-side-amt{flex:none;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.rev-side-amt.out{color:var(--danger)}
.rev-side-amt.in{color:var(--ok)}
.rev-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;
         border-bottom:1px solid var(--line);font-size:12.5px}
.rev-row:last-of-type{border-bottom:0}
.rev-k{flex:none;width:52px;color:var(--t3);font-size:12px}
.rev-v{flex:1;min-width:0;text-align:right;overflow-wrap:anywhere}
.rev-reasons{margin:10px 0 0;padding-left:18px;font-size:12px;color:var(--t3);
             line-height:1.8}
.rev-reasons li{overflow-wrap:anywhere}
.rev-f{margin-top:10px}
.rev-f-row{display:flex;gap:8px;flex-wrap:wrap}
.rev-f .btn{max-width:100%;overflow-wrap:anywhere;white-space:normal;text-align:left}
/* 待确认页的分段标题（成对 / 落单疑似 / 退款对冲） */
.rev-sec-t{margin:22px 0 4px;font-size:15px;font-weight:600;color:var(--t1)}
.rev-sec-d{margin:0 0 12px;font-size:12.5px;color:var(--t2);line-height:1.7}

/* ---------------------------------------------------------------- 月度总结（B2 T-37）
   ★ 390px 无横向滚动：没有一处定宽（表格走 table-layout:fixed + 百分比 colgroup，
     两栏并置靠 flex-wrap 自动堆叠）。与 .rev-sides 同一套做法 ——
     "并置 → 堆叠"是尺寸适配，不是动线变化，所以不写第二份模板。 */
.rep-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.rep-pick,.rep-act{display:flex;gap:6px;align-items:center;margin:0}
.rep-lab{font-size:12.5px;color:var(--t3)}
.rep-pick select{padding:7px 9px;font:inherit;font-size:13px;color:var(--t1);
                 background:var(--surface);border:1px solid var(--line2);
                 border-radius:8px;max-width:190px}
.rep-x{margin:0 0 4px;font-size:12px;color:var(--t3)}
.rep-x-t{overflow-wrap:anywhere}
.rep-k{margin:14px 0 2px;font-size:11.5px;color:var(--t3);line-height:1.8}
.rep-sec{margin:0 0 14px}
.rep-sec-h{margin:14px 0 6px;font-size:13px;font-weight:600;color:var(--t1)}
.rep-tbl{width:100%;table-layout:fixed}
.rep-tbl th,.rep-tbl td{overflow-wrap:anywhere}
/* 「未分类」在占比表里也要显眼：它是唯一一处"钱在但不知道花在哪" */
.rep-tbl tr.is-todo{background:var(--todo-bg)}
/* 差异行：只高亮行，不给正负配红绿 —— 支出涨是"危险"、收入涨不是，
   一套颜色表达不了两种语义，而猜错了比不高亮更误导。差额列已有 +/- 号。 */
.rep-tbl tr.is-diff{background:var(--todo-bg)}
.rep-tbl td.rep-up,.rep-tbl td.rep-down{font-weight:600}
.rep-anom{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.rep-anom-b{border:1px solid var(--line);border-radius:9px;padding:10px 12px;min-width:0}
.rep-anom-h{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px}
.rep-n{display:inline-block;min-width:20px;padding:0 6px;border-radius:9px;
       background:var(--pri-bg);color:var(--pri-ink);font-size:12px;text-align:center}
.rep-anom-x{font-size:11.5px;color:var(--t3);line-height:1.6}
.rep-list{margin:6px 0 0;padding-left:16px;font-size:12.5px;line-height:1.9}
.rep-list li{overflow-wrap:anywhere}
.rep-note{font-size:12.5px;color:var(--t2);line-height:1.9;overflow-wrap:anywhere}
.rep-sides{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.rep-side{flex:1 1 340px;min-width:0}
.rep-side-solo{flex:1 1 100%}
.rep-side-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;flex-wrap:wrap}
.rep-side-t{font-size:11.5px;color:var(--t3);overflow-wrap:anywhere}
/* 首页那条财务横幅的角标改用主色：默认的红底是「有未读提醒」的语义，
   而"该导流水了"不是出错，染成同一片红会让人先去找发生了什么事故。 */
.mz-alert.is-fin .mz-alert-n{background:var(--pri)}
/* ★ 系统自检横幅（失败可见性 · 乙档）：用**琥珀**而不是红。
   红在这个页面上已经被「你有 N 条提醒未处理」占用了；这条说的是另一件事
   ——「系统自己可能不可信」——混成同一种红，人会先去找提醒，看不见它。 */
.mz-alert.is-sys{background:#FFF6E5;border-color:#E8C87A;color:#8A5A00}
.mz-alert.is-sys .mz-alert-n{background:#B7791F}
.mz-alert.is-sys .mz-alert-go{color:#8A5A00}

/* ==========================================================================
   B7 · 侍读（阅读笔记）与教头（运动记录）
   --------------------------------------------------------------------------
   两端共用：列表型页面，手机只是少几列（次要列由 mobile.css 的 .col-opt 藏掉），
   不需要第二份模板。
   ========================================================================== */

/* ---- 侍读：总列表 ---- */
.rd-tb{width:100%;border-collapse:collapse;font-size:13px}
.rd-tb th{text-align:left;font-weight:600;font-size:11.5px;color:var(--t3);
          padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.rd-tb td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.rd-tb tbody tr:last-child td{border-bottom:0}
.rd-tb tbody tr:hover{background:#FAFBFC}
.rd-tb .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rd-tb .t{font-weight:600}
.rd-tb .sub{font-size:11.5px;color:var(--t3);margin-top:2px}
.rd-star{color:#C8A24A;letter-spacing:1px;font-size:12px;white-space:nowrap}
.rd-star .off{color:var(--line2)}
.rd-empty{padding:26px 0;text-align:center;color:var(--t3);font-size:13px}

/* ---- 侍读：笔记 ---- */
.rd-note{border:1px solid var(--line);border-radius:9px;margin-bottom:10px;
         background:var(--surface)}
.rd-note.is-deep{border-color:#DED6CB;background:#FEFCFA}
.rd-note-h{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer}
.rd-note-h .d{font-size:11.5px;color:var(--t3);white-space:nowrap}
.rd-note-h .t{flex:1;min-width:0;font-size:13.5px;font-weight:600;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-note-b{padding:0 12px 12px;border-top:1px dashed var(--line)}
.rd-note-b[hidden]{display:none}
.rd-sec{margin-top:10px}
.rd-sec .k{font-size:11.5px;color:var(--t3);margin-bottom:2px}
.rd-sec .v{font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.rd-sec ul{margin:0;padding-left:18px}
.rd-sec li{font-size:13px;line-height:1.65}
.rd-quote{border-left:3px solid var(--pri-bg);background:#FAF8F5;padding:8px 12px;
          margin-top:10px;font-size:12.5px;color:var(--t2);line-height:1.7;
          border-radius:0 6px 6px 0}
.rd-line{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;
         border-bottom:1px solid var(--line);flex-wrap:wrap}
.rd-line:last-child{border-bottom:0}
.rd-line .d{font-size:11.5px;color:var(--t3);white-space:nowrap;padding-top:1px}
.rd-line .x{flex:1;min-width:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.rd-line .who{font-size:11.5px;color:var(--t3)}
.rd-hit{font-size:11.5px;color:var(--t3)}
mark{background:#FFF2B8;color:inherit;border-radius:2px;padding:0 1px}
.rd-item-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rd-kv{font-size:13px;line-height:1.7}
.rd-kv .k{font-size:11.5px;color:var(--t3);margin-right:6px}

/* ---- 教头：统计 ---- */
.ft-stats{display:flex;gap:12px;flex-wrap:wrap}
.ft-stat{flex:1 1 150px;border:1px solid var(--line);border-radius:9px;
         padding:10px 12px;background:#FCFCFD}
.ft-stat .k{font-size:11.5px;color:var(--t3)}
.ft-stat .v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;
            margin-top:2px}
.ft-stat .s{font-size:11.5px;color:var(--t3);margin-top:2px}
.ft-bar{height:6px;border-radius:4px;background:#EFEFEF;margin-top:8px;overflow:hidden}
.ft-bar i{display:block;height:100%;background:var(--pri)}
.ft-bar.k-stretch i{background:#8A6E52}
.ft-bar.k-strength i{background:#B39B7D}
.ft-bar.k-other i{background:#C9B79B}
/* 表格里的比例条：不再需要上方留白（那一格已经有文字行把高度撑开） */
.rd-tb .ft-bar{margin-top:0}
/* 比例条 + 百分比同一行：数字另起一行会把这条的行高撑成两倍，
   而这一列只提供量级感，不值得两行高 */
.rd-pct{display:flex;align-items:center;gap:8px}
.rd-pct .ft-bar{flex:1;margin-top:0}
.rd-pct>span{font-size:11.5px;color:var(--t3);white-space:nowrap;
             min-width:34px;text-align:right;font-variant-numeric:tabular-nums}

/* ---- 教头：录入条 ----
   ★ 目标是「一行排完」而不是「随便折」。字段宽度是按**最窄的桌面窗口**（约 1082px，
     内容区 ~762px）抠出来的：104+176+190+76+分段(~144) + 4×8 间距 ≈ 722 < 762。
   ★ 窄到放不下时自然折成第二行（备注 flex:1 会带走右边剩下的宽度），
     手机上则由 mobile.css 的 `.mb-body .mz-row > *{flex:1 1 100%}` 强制每字段一行 ——
     那份规则的前提正是「这张表是横排的」，所以这里不能把 .mz-row 改成 grid。
   ★ 输入框定高 31px：默认那个只有 21px（浏览器默认样式 + 小 padding），
     与 31px 的强度分段底对齐时，「强度」那组标签会被顶高 9px ——
     其他五个标签在同一条线上、它自己高一截，看上去就是"没对齐"。
     定高顺带把点击目标还给手指（21px 太窄了）。 */
.ft-form{gap:8px}
.ft-form .inp{height:31px}
.ft-combo{position:relative;min-width:176px}
.ft-pop{position:absolute;z-index:25;top:100%;left:0;margin-top:4px;width:290px;
        max-height:320px;overflow-y:auto;background:var(--surface);
        border:1px solid var(--line2);border-radius:9px;
        box-shadow:0 6px 18px rgba(0,0,0,.10);padding:6px}
.ft-pop[hidden]{display:none}
.ft-cg-t{font-size:10.5px;color:var(--t3);padding:6px 8px 3px;letter-spacing:.4px}
.ft-cg-i{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;
         font-size:13px;cursor:pointer}
.ft-cg-i:hover{background:#F1F3F4}
.ft-cg-i .n{flex:1}
.ft-cg-i .c{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.ft-new{border-top:1px solid var(--line);margin-top:6px;padding:8px}
.ft-new .t{font-size:12.5px;margin-bottom:6px}

/* ---- 共用：两档切换 / 弹层 / 回执 ---- */
.mz-seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;
        overflow:hidden}
.mz-seg button{font:inherit;font-size:12.5px;padding:5px 14px;border:0;
               background:var(--surface);color:var(--t2);cursor:pointer}
.mz-seg button.on{background:var(--pri);color:#fff}
.mz-dlg{border:0;border-radius:12px;padding:0;width:640px;max-width:94vw;
        box-shadow:0 12px 40px rgba(0,0,0,.2)}
.mz-dlg::backdrop{background:rgba(20,20,20,.32)}
.mz-dlg-h{display:flex;align-items:center;gap:10px;padding:14px 18px;
          border-bottom:1px solid var(--line)}
.mz-dlg-h h3{font-size:15px}
.mz-dlg-b{padding:16px 18px;max-height:64vh;overflow-y:auto}
.mz-dlg-f{display:flex;gap:10px;align-items:center;padding:12px 18px;
          border-top:1px solid var(--line)}
.mz-fld{margin-bottom:10px}
.mz-fld-lb{font-size:12px;color:var(--t2);margin-bottom:4px;display:block}
.mz-hint{font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.6}
.mz-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mz-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:80;
          background:#2C2A28;color:#fff;font-size:13px;padding:10px 16px;
          border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.mz-toast[hidden]{display:none}
.mz-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

/* ==========================================================================
   B3：参军（项目容器）—— 列表卡片格 + 详情六区块
   ★ 两端共用一份模板：手机上由 mobile.css 把卡片改成一列、次要列藏掉。
   ★ 比例条超过 100% 转红并**写字** —— 条填满是没有信息量的，字才会被看见。
   ========================================================================== */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
         gap:14px;margin-bottom:16px}
.pj-card{display:block;background:var(--surface);border:1px solid var(--line);
         border-radius:var(--radius);padding:14px 16px;text-decoration:none;
         color:inherit}
.pj-card:hover{border-color:var(--pri);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.pj-h{display:flex;align-items:center;gap:8px}
.pj-ic{flex:none;width:24px;height:24px;line-height:24px;text-align:center;
       border-radius:6px;background:var(--pri-bg);color:var(--pri-ink);
       font-size:12.5px;font-weight:600}
.pj-nm{flex:1;min-width:0;font-size:14.5px;font-weight:600;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-goal{font-size:12.5px;color:var(--t2);margin:6px 0 8px;line-height:1.6;
         overflow-wrap:anywhere}
.pj-goal-lg{font-size:13.5px;margin:0 0 10px}
.pj-money{font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums}
.pj-money b{color:var(--t1)}

.pj-bar{height:7px;border-radius:4px;background:#EDEFF2;overflow:hidden;margin:7px 0 3px}
.pj-bar-sm{height:5px;margin:3px 0 2px}
.pj-bar-fill{display:block;height:100%;background:var(--pri);border-radius:4px}
.pj-bar.is-over .pj-bar-fill{background:var(--danger)}
.pj-bar-tx{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.pj-bar-tx.is-over{color:var(--danger);font-weight:600}

.pj-foot{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--t3);
         margin-top:8px}
.pj-next{font-size:11.5px;color:var(--t3);margin-top:4px;overflow-wrap:anywhere}
.pj-next-lg{font-size:12.5px;margin-top:8px}
.pj-late{color:var(--danger)}
.pj-neg{color:var(--ok)}
.pj-alert{margin-top:8px;font-size:12.5px;color:var(--danger);
          background:#FDECEA;border:1px solid #F3C6C6;border-radius:8px;padding:7px 10px}

.pj-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
        gap:10px;margin:4px 0 10px}
.pj-kpi-i{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.pj-kpi-i .k{display:block;font-size:11.5px;color:var(--t3)}
.pj-kpi-i .v{display:block;font-size:15px;font-weight:600;margin-top:2px;
             font-variant-numeric:tabular-nums}
.pj-kpi-i .v.is-over{color:var(--danger)}

/* ---- 表单（新建 / 详情里就地改） ---- */
.pj-form{display:block}
.pj-types{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pj-type{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
         border:1px solid var(--line2);border-radius:8px;cursor:pointer;font-size:13px}
.pj-type input{margin:0}
.pj-type.on{border-color:var(--pri);background:var(--pri-bg);color:var(--pri-ink)}
.pj-type-ic{font-weight:600}
.pj-line{display:flex;gap:12px;flex-wrap:wrap}
.pj-fields{display:flex;gap:12px;flex-wrap:wrap}
.pj-fld{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0}
.pj-fld.pj-g{flex:1 1 100%}
.pj-k{font-size:11.5px;color:var(--t3)}
.pj-v{font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line2);
      border-radius:7px;background:var(--surface);color:var(--t1);width:100%}
.pj-v:focus{border-color:var(--pri);outline:none}
.pj-req{color:var(--danger)}
.pj-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
         font-size:11.5px;color:var(--t3);margin-top:8px;line-height:1.6}
.pj-hint-x{flex:1;min-width:0}
.pj-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;
            margin:14px 0 4px}
.pj-err{background:#FDECEA;border:1px solid #F3C6C6;color:var(--danger);
        border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}

/* ---- 种子项（新建页带出来的默认房间 / 里程碑） ---- */
.pj-seed{display:flex;gap:8px;flex-wrap:wrap}
.pj-seed-i{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;
           border:1px solid var(--line);border-radius:7px;background:#FAFBFC}
.pj-seed-i input{border:0;background:none;font:inherit;font-size:13px;width:120px;
                 color:var(--t1)}
.pj-seed-i input:focus{outline:none;border-bottom:1px solid var(--pri)}

/* ---- 里程碑时间线 ---- */
.pj-ms{margin:2px 0}
.pj-ms-i{display:flex;align-items:center;gap:8px;padding:7px 0;
         border-bottom:1px solid var(--line);font-size:13px}
.pj-ms-i:last-child{border-bottom:0}
.pj-ms-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.pj-ms-i.is-done .pj-ms-dot{background:var(--ok)}
.pj-ms-i.is-late .pj-ms-dot{background:var(--danger)}
.pj-ms-cb{flex:none;display:inline-flex;align-items:center}
.pj-ms-nm{flex:none;min-width:96px;font-weight:600}
.pj-ms-d{flex:1;min-width:0;font-size:11.5px;color:var(--t3);
         display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pj-date{font:inherit;font-size:11.5px;padding:2px 5px;border:1px solid var(--line2);
         border-radius:5px;background:var(--surface);color:var(--t1)}

/* ---- 支出来源标识 / 子标题 ---- */
.pj-src{display:inline-block;font-size:11px;padding:2px 7px;border-radius:5px;
        background:var(--todo-bg);color:var(--todo)}
.pj-src-txn{background:var(--ok-bg);color:var(--ok)}
.pj-sub{margin:14px 0 4px;font-size:11.5px;color:var(--t3)}

/* ---- 记一笔支出：候选匹配**并排** ---- */
.pj-dlg{border:0;border-radius:12px;padding:0;width:680px;max-width:94vw;
        box-shadow:0 12px 40px rgba(0,0,0,.2)}
.pj-dlg::backdrop{background:rgba(20,20,20,.32)}
.pj-dlg-h{display:flex;align-items:center;gap:10px;padding:14px 18px;
          border-bottom:1px solid var(--line)}
.pj-dlg-t{font-size:15px;font-weight:600;flex:1}
.pj-dlg-x{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;
          color:var(--t3)}
.pj-match{border:1px solid var(--line2);border-radius:8px;padding:10px 12px;
          margin:8px 0;background:#FAFBFC}
.pj-match-i{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;
            align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.pj-match-i:last-child{border-bottom:0}
.pj-match-l,.pj-match-r{display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-match-l .k,.pj-match-r .k{font-size:11px;color:var(--t3)}
.pj-match-l .v,.pj-match-r .v{font-size:13px;overflow-wrap:anywhere}
.pj-match-r{border-left:1px solid var(--line);padding-left:10px}
.pj-match-ops{display:flex;gap:6px;flex-wrap:wrap}
.pj-match-none{font-size:12.5px;color:var(--t3)}
.pj-md{width:100%;font:inherit;font-size:13px;line-height:1.7;padding:10px 12px;
       border:1px solid var(--line2);border-radius:8px;background:var(--surface);
       color:var(--t1);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pj-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:80;
          background:#2C2A28;color:#fff;font-size:13px;padding:10px 16px;
          border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.pj-toast[hidden]{display:none}
.pj-ops{margin-left:10px;display:inline-flex;align-items:center;gap:8px}

/* ★ 日常侧「挂到项目」的下拉（B3 T-63）。
   它长在**别人的行里**（待办行 / 日记行），所以尺寸要收着：
   不设上限宽度的话，一个「140㎡ 翻修（执行中）」能把整行的操作区挤到换行，
   待办行一换行，右边的「✓」就跑到下一行去了 —— 那种错位看着像 bug 而不是样式。 */
.pj-bind{max-width:190px;font-size:12px;padding:3px 6px;
         border:1px solid var(--line2);border-radius:7px;
         background:var(--surface);color:var(--t2);cursor:pointer}
.pj-bind:hover{border-color:var(--line);color:var(--t1)}

/* ============================================================
   参军 v2 · 三层结构（步骤 → 子条目 → 事件）        B8 / m014
   ------------------------------------------------------------
   ★ 三层的**缩进靠 padding-left 而不是 margin**：margin 会被父级的
     overflow / 折叠边距吃掉一半，缩进看起来时有时无。
   ★ 只有第三层（事件）进日历，所以它的左侧有一根竖线把它和
     「不进日历的两层」在视觉上分开 —— 这根线是给人的一句说明。 */
.pj-tree{margin-top:2px}
.pj-step{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--surface)}
.pj-step-h{display:flex;align-items:flex-start;gap:10px;padding:11px 13px}
.pj-step-no{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;
            margin-top:1px;font-size:11.5px;font-weight:600;
            background:#F1F3F4;color:var(--t2);border:1px solid var(--line2)}
.pj-step.is-done .pj-step-no{background:var(--ok);border-color:var(--ok);color:#fff}
.pj-step.is-late .pj-step-no{background:var(--danger);border-color:var(--danger);color:#fff}
.pj-step-main{flex:1;min-width:0}
.pj-step-l1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pj-step-nm{font-size:14.5px;font-weight:600}
.pj-step.is-done .pj-step-nm{color:var(--t2);font-weight:400;
  text-decoration:line-through;text-decoration-color:var(--line2)}
.pj-step-dt{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.pj-step-dt.is-late{color:var(--danger);font-weight:600}
.pj-step-intro{font-size:12.5px;color:var(--t2);margin-top:5px;line-height:1.6}
.pj-step-acts{display:flex;gap:10px;flex:none;padding-top:2px}
.pj-step-acts .mini{font-size:12px}

.pj-sons{padding:0 13px 2px 45px}
.pj-sons-none{padding:2px 0 8px;font-size:12px;color:var(--t3)}
.pj-son{padding:8px 0 6px;border-top:1px dashed var(--line)}
.pj-son-l1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pj-son-nm{font-size:13px;font-weight:600}
.pj-son-dt{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.pj-son-dt.is-inherit{font-style:normal}
.pj-son-money{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.pj-son-intro{font-size:12.5px;color:var(--t2);margin-top:4px;line-height:1.6}
.pj-son-acts{display:flex;gap:8px;flex:none;margin-left:auto}
.pj-son-acts .mini{font-size:12px}
.pj-son-foot{display:flex;gap:12px;align-items:baseline;margin-top:2px}
.pj-son-foot .mini{font-size:12px;color:var(--t3)}
.pj-son-foot .mini:hover{color:var(--pri)}
.pj-son-foot .pj-hint-x{font-size:11.5px;color:var(--t3)}

.pj-chip{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:4px;
         background:#F1F3F4;color:var(--t3)}
.pj-chip.is-auto{background:var(--pri-bg);color:var(--pri-ink)}

.pj-evs{margin:6px 0 2px;padding-left:14px;border-left:2px solid var(--line2)}
.pj-evs.is-direct{margin-left:0}
.pj-ev{display:flex;align-items:baseline;gap:9px;padding:5px 0;flex-wrap:wrap}
.pj-ev-cb{flex:none;display:inline-flex;align-items:center}
.pj-ev-when{font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums;
            flex:none;min-width:104px}
.pj-ev-when.is-late{color:var(--danger);font-weight:600}
.pj-ev-nm{font-size:13px;flex:1;min-width:0}
.pj-ev.is-done .pj-ev-nm{color:var(--t3);
  text-decoration:line-through;text-decoration-color:var(--line2)}
.pj-ev-span{font-size:11px;color:var(--t3);flex:none}
.pj-ev-acts{display:flex;gap:8px;flex:none}
.pj-ev-acts .mini{font-size:12px}

.pj-step-foot{display:flex;gap:14px;align-items:center;padding:8px 13px;
              border-top:1px dashed var(--line);background:#FCFCFD;
              border-radius:0 0 10px 10px}
.pj-step-foot .mini{font-size:12px;color:var(--t3)}
.pj-step-foot .mini:hover{color:var(--pri)}
.pj-step-count{margin-left:auto;font-size:11.5px;color:var(--t3)}

.pj-loose{margin-top:10px;border:1px dashed var(--line2);border-radius:10px;
          padding:10px 13px;background:#FCFCFD}
.pj-loose-t{font-size:12px;color:var(--t3);margin-bottom:4px}
.pj-tree-foot{display:flex;gap:14px;align-items:center;padding:10px 13px;
              border:1px dashed var(--line2);border-radius:10px;margin-top:10px;
              background:var(--surface)}

/* ---- 弹层：改一步 / 改子条目 / 改一件事 / 记一笔 ---- */
.pj-dlg-b{padding:14px 18px;max-height:70vh;overflow:auto}
.pj-dlg-f{display:flex;gap:10px;justify-content:flex-end;align-items:center;
          padding:11px 16px;border-top:1px solid var(--line);background:#FCFCFD}
.pj-k-sub{font-size:11px;color:var(--t3);line-height:1.5}
.pj-note{font-size:12px;color:var(--t2);background:#FAFBFC;border:1px solid var(--line);
         border-radius:7px;padding:8px 11px;margin-bottom:12px;line-height:1.65}
.pj-note.is-info{background:var(--info-bg);border-color:#C9DEF8;color:#12467E}
.pj-v:disabled{background:#F5F6F8;color:var(--t3);cursor:not-allowed}
.pj-dlg [hidden]{display:none}

/* ---- 支出台账 ---- */
.pj-exp-top{display:flex;justify-content:flex-end;margin-bottom:8px}
.pj-exp-sum{font-size:12px;color:var(--t3);padding-top:10px}
td.pj-exp-sum,td.num.pj-exp-sum{font-weight:600;color:var(--t1)}
.mini.bad{color:var(--danger)}
.mini.bad:hover{color:var(--danger);text-decoration:underline}

/* ---- 复盘里的四个数字 ---- */
.pj-review-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
                gap:10px;margin-bottom:4px}

/* ================================================================ B9 · 度支总结
   ★ 图表全部是**纯 CSS**（flexbox 柱状 + grid 横向条），不引第三方库：
     项目是离线部署，为几根柱子引一个 Chart.js 不划算，也多一处会失效的东西。
     代价是没有 tooltip / 缩放 —— 悬停只做 filter:brightness。 */
.maintabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.maintab{position:relative;padding:8px 15px;font-size:13.5px;color:var(--t2);cursor:pointer;
  border:0;background:none;font-family:inherit;border-radius:8px 8px 0 0}
.maintab:hover{color:var(--t1);background:#F1F3F4}
.maintab.on{color:var(--pri-ink);font-weight:600;background:var(--pri-bg)}
.pane[hidden]{display:none}

/* ---- 期间选择条（年度=年份 chip · 月度=月份 chip，已归档带 ✓） ---- */
.period-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{padding:4px 10px;border-radius:7px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;color:var(--t2);cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--line2);color:var(--t1)}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.chip .tick{font-size:10px;opacity:.9;margin-left:3px}
.period-note{font-size:12px;color:var(--t3);margin-left:auto}

/* ---- KPI 卡 ---- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin:0 0 14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px 14px}
.kpi-k{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:6px}
.kpi-v{font-size:25px;font-weight:650;letter-spacing:-.6px;margin:5px 0 3px;font-variant-numeric:tabular-nums}
.kpi-v.is-out{color:var(--up)}
.kpi-v.is-in{color:var(--ok)}
.kpi-v.is-sm{font-size:19px;padding-top:5px}
.kpi-sub{font-size:11.5px;color:var(--t3);line-height:1.5}
/* ★ 涨跌徽标：支出涨=红、跌=绿（记账习惯，与股市相反方向的颜色语义无关） */
.trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:1px 5px;border-radius:5px}
.trend.up{color:var(--up);background:var(--up-bg)}
.trend.down{color:var(--down);background:var(--ok-bg)}
.trend.flat{color:var(--t3);background:var(--track)}

/* ---- 纵向柱状图 ---- */
.legend{display:flex;gap:12px;font-size:11.5px;color:var(--t3);align-items:center}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.chart-v{display:flex;align-items:flex-end;gap:4px;height:186px;padding:10px 2px 0}
.cv-col{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:5px}
.cv-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.cv-bar{width:12px;border-radius:3px 3px 0 0;min-height:2px;position:relative;transition:filter .12s}
.cv-bar:hover{filter:brightness(.88)}
.cv-bar.out{background:#D98A7C}
.cv-bar.in{background:#7CC49A}
.cv-bar.dim{background:#DCE0E4}
.cv-lab{font-size:11px;color:var(--t3);white-space:nowrap}
.cv-col.now .cv-lab{color:var(--pri-ink);font-weight:600}
.cv-val{font-size:10.5px;color:var(--t3);height:14px;line-height:14px;font-variant-numeric:tabular-nums;overflow:hidden}
.cv-col.now .cv-val{color:var(--t2);font-weight:600}
.axis-line{height:1px;background:var(--line);margin:0 0 2px}

/* ---- 横向条形图 ---- */
.bar-list{display:flex;flex-direction:column}
.bar-row{display:grid;grid-template-columns:88px 1fr 62px 46px;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px solid #F4F5F7}
.bar-row:last-child{border-bottom:0}
.bar-row.is-todo .bar-nm{color:var(--todo);font-weight:600}
.bar-nm{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:15px;background:var(--track);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;min-width:2px}
.bar-fill.out{background:linear-gradient(90deg,#E8B4AA,#C0392B)}
.bar-fill.in{background:linear-gradient(90deg,#A8DCBE,#1F883D)}
/* ★ 项目切片用棕色：和分类的红/绿不是一个维度 —— 颜色本身就在说「这不是分类」 */
.bar-fill.neutral{background:linear-gradient(90deg,#D8CFC4,#8B7355)}
.bar-amt{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-pct{font-size:11.5px;color:var(--t3);text-align:right;font-variant-numeric:tabular-nums}
.bar-row:hover .bar-track{background:#EAECEF}
/* 「没归到项目的」：虚线分隔 + 灰色，它不是一个项目，所以不给条 */
.bar-row.rest{border-top:1px dashed var(--line2);padding-top:10px;margin-top:4px}
.bar-row.rest .bar-nm{color:var(--t3)}
.rest-note{font-size:11.5px;color:var(--t3);line-height:1.7;margin-top:10px}
.proj-go{font-size:12px;color:var(--pri);font-weight:600}
.proj-tail{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3);margin-top:11px}

/* ---- 提醒卡（原「异常项」）---- */
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:10px}
.tip{border:1px solid var(--line);border-radius:9px;padding:11px 13px;min-width:0}
.tip.warn{border-color:#F0DCC0;background:#FFFBF3}
.tip-h{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.tip-n{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--t2)}
.tip-x{font-size:11.5px;color:var(--t3);margin:3px 0 6px;line-height:1.6}
.tip-l{margin:5px 0 0;padding-left:2px;list-style:none;font-size:12.5px;line-height:1.85}
.tip-l li{display:flex;gap:8px;align-items:baseline;overflow:hidden}
/* ★ 左半那格**必须**能缩：flex 项的 min-width 默认是 auto（= 内容的 min-content），
   不写 min-width:0 的话"商户名 + 金额"这一行在 375px 上必然顶出去 ——
   而 .amt 又是 nowrap，于是右边那格被推到容器外（T-14 实测溢出 8px）。 */
.tip-l li > span{min-width:0;flex:1 1 auto;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tip-l .amt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tip-go{font-size:12px;color:var(--pri);font-weight:600}

/* ---- 状态条（归档 / 草稿）---- */
.statebar{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);margin:0 0 14px;font-size:12.5px;line-height:1.7}
.statebar.warn{border-color:#F0DCC0;background:#FFFBF3}
.statebar .ic{font-size:15px;line-height:1.3;flex:none}
.statebar .tx{color:var(--t2);min-width:0}
/* ★ 窄屏要能换行：状态条里"一句话说明" + "两三个按钮"并排，375px 上一定放不下
   （T-14 实测：.acts 与里面的按钮一起顶出去）。窄屏让按钮整行落到第二行。 */
.statebar .acts{margin-left:auto;display:flex;gap:7px;flex:none;flex-wrap:wrap}
@media(max-width:640px){
  .statebar{flex-wrap:wrap}
  .statebar .acts{margin-left:0;width:100%}
}

/* ---- 一句话小结 ---- */
.recap{font-size:13.5px;line-height:2;color:var(--t2)}
.recap b{color:var(--t1);font-weight:650}
.recap .hl{background:#FFF4D6;padding:1px 3px;border-radius:3px}
.recap ul{margin:6px 0 0;padding-left:18px}
.recap li{margin-bottom:2px}

.grid-2-1{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;align-items:start}
@media(max-width:1100px){.grid-2-1{grid-template-columns:1fr}}

/* ==========================================================================
   B10 · 待办页三段 + 弹窗三态
   --------------------------------------------------------------------------
   ★ 三段 tab 只回答「这一段有几条」；上面那排数字才回答「我今天到底欠多少」。
     两件事**都**要有：只有 tab 的话，人得把三段的数字心算一遍才知道总数；
     只有数字的话，又落不到具体哪几条上。
   ========================================================================== */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.stat{flex:1 1 108px;min-width:96px;border:1px solid var(--line);border-radius:9px;
      padding:9px 12px;background:#FCFCFD}
.stat .k{font-size:11.5px;color:var(--t3)}
.stat .v{font-size:19px;font-weight:600;margin-top:1px;font-variant-numeric:tabular-nums}
.stat .v.pri{color:var(--pri)}
.stat .v.bad{color:var(--danger)}

.tabrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.tabrow .tabrow-r{margin-left:auto;display:flex;gap:10px;align-items:center;
                  flex-wrap:wrap;justify-content:flex-end}
.tabrow .dfilter-i{font-weight:400}
.tabrow .dfilter-i b{font-weight:600;font-variant-numeric:tabular-nums}

/* ★ 分组小标题：**「这一段为什么叫这一段」写在标题旁边**。
   逾期那一组用红色 —— 它不是「今天要做的」，是「早该做的」。 */
.dgrp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
      margin:14px 0 2px;padding:0 2px 5px;border-bottom:1px solid var(--line)}
.dgrp:first-child{margin-top:2px}
.dgrp b{font-size:12.5px;font-weight:600;color:var(--t2)}
.dgrp span{font-size:11.5px;color:var(--t3)}
.dgrp .n{margin-left:auto;font-variant-numeric:tabular-nums}
.dgrp.late b{color:var(--danger)}
.dgrp.none b{color:var(--t3);font-weight:500}

/* ★★ 建议 E：项目小标签。挂了显示项目名，没挂显示虚线「+ 项目」。
   下拉**还在 DOM 里**（hidden），点标签才展开 —— 于是没有 JS 也看得见
   这条归哪个项目，只是不能改。 */
.pj-tag{flex:none;font:inherit;font-size:11px;padding:2px 8px;border-radius:5px;
        background:var(--pri-bg);color:var(--pri-ink);border:1px solid #E2D7C8;
        cursor:pointer;white-space:nowrap;max-width:150px;overflow:hidden;
        text-overflow:ellipsis}
.pj-tag:hover{filter:brightness(.97)}
.pj-add{flex:none;font:inherit;font-size:11px;padding:2px 8px;border-radius:5px;
        border:1px dashed var(--line2);background:none;color:var(--t3);
        cursor:pointer;white-space:nowrap}
.pj-add:hover{color:var(--pri);border-color:var(--pri)}
select.pj-bind[hidden]{display:none}

/* ★★ 建议 G：弹窗里的状态三态。当前那一态高亮 —— 一眼看得出「它现在是哪种」，
   不用先猜那颗按钮上写的是「做完了」还是「拉回来」。 */
.tdlg-st{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
         margin:0 14px 10px;padding:9px 11px;border-radius:8px;background:var(--bg)}
.tdlg-st-k{flex:none;font-size:12px;color:var(--t2)}
.tdlg-st-n{flex:1 1 220px;min-width:0;font-size:11.5px;color:var(--t3);line-height:1.6}
.tdlg-st-n b{color:var(--t2);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:12px;padding:5px 11px;border:1px solid var(--line2);
      border-radius:7px;background:var(--surface);color:var(--t2);cursor:pointer}
.chip:hover{border-color:var(--pri);color:var(--pri)}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.chip.on.done{background:var(--ok);border-color:var(--ok);color:#fff}
.chip.on.cancel{background:var(--danger);border-color:var(--danger);color:#fff}

/* ★ 待办行里那颗 ✓ 与周视图卡片同一颗：22×22、有框、点得到。
   它是**唯一**的完成命中区 —— 行本身是「打开看内容」。 */
.trow > .wk-done,.rrow > .wk-done{flex:none;width:22px;height:22px;margin-top:1px}