/* 受法条约束：L-8(只许引用 --g-*，不许在此定义 token) · 法典/01_宪法_六条铁律.md
   实现 法典/04_UI风格规范.md 的 U-1 卡片基类 / U-2 列表 / U-3 间距 / U-6 田字格 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--g-font-family);
  font-size: var(--g-font-size);
  color: var(--g-text);
  /* U-10：上暖下冷渐变，冷端不许丢（法典/04）；min-height 保证短页面也铺满 */
  background: var(--g-screen-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── U-1 卡片基类（唯一基类，禁各页自造） ── */
.card {
  background: var(--g-card);
  border: 1px solid var(--g-card-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  padding: var(--g-pad);
}
.card--active { border-color: var(--g-accent); border-width: 2px; }
.card--warn   { border-color: var(--g-warn);   border-width: 2px; }
.card--dashed { border-style: dashed; }
.card--glass  { background: rgba(255, 255, 255, .80); backdrop-filter: blur(18px); }

/* ── U-2 列表条目 ── */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--g-gap);
  padding: var(--g-pad-sm) 0;
  border-bottom: 1px solid var(--g-sep);
  font-size: var(--g-font-size-sm);
}
.list-row:last-child { border-bottom: none; }

/* ── U-3 间距工具（只用 token，禁写死像素） ── */
.stack    { display: flex; flex-direction: column; gap: var(--g-gap-lg); }
.stack-sm { display: flex; flex-direction: column; gap: var(--g-gap); }
.row      { display: flex; align-items: center; gap: var(--g-gap); }

/* ── U-6 全貌页 2x2 田字格 ── */
.mgmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-gap); }

/* ── 文字层级（S-3：一律 rem） ── */
.title    { font-size: var(--g-font-size-lg); font-weight: 700; }
.subtitle { font-size: var(--g-font-size);    font-weight: 600; }
.text-sub { color: var(--g-text-sub); font-size: var(--g-font-size-sm); }
.text-dim { color: var(--g-text-dim); font-size: var(--g-font-size-xs); }

/* ── 应用骨架 ── */
#app     { max-width: 480px; margin: 0 auto; padding: var(--g-pad); min-height: 100vh; }
#overlay-root { position: fixed; inset: 0; pointer-events: none; z-index: 900; }
#overlay-root > * { pointer-events: auto; }

/* ── 错误条：L-4 要求中文 message 原样显示，不许静默 ── */
.error-bar {
  background: var(--g-red-bg);
  border: 1px solid var(--g-red);
  border-radius: var(--g-radius-sm);
  color: var(--g-red);
  padding: var(--g-pad-sm);
  font-size: var(--g-font-size-sm);
}

/* ── 陈旧角标：L-6 要求用快照的界面必须打这个 ── */
.stale-badge {
  background: var(--g-warn-bg);
  border: 1px solid var(--g-warn-light);
  border-radius: var(--g-radius-sm);
  color: var(--g-warn);
  padding: var(--g-pad-xs) var(--g-pad-sm);
  font-size: var(--g-font-size-xs);
}

/* ══ 工作台 A 顶栏 ══ 源：旧仓 css/main.css:138-149 + index.html:113-125
   拆线头：原本 style="..." 内联的一律搬进这里；颜色间距值一个数字都没改 */

/* A0 吸顶磨砂条：顶栏 + 电池栏的 sticky 外壳 */
.wb-top { position: sticky; top: 0; z-index: 20; }
.wb-top > .wb-topbar { position: static; }
.wb-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--g-gap-lg);
  padding: var(--g-pad-sm) var(--g-pad);
  padding-top: max(var(--g-pad-sm), env(safe-area-inset-top, 0px));
  background: var(--g-topbar-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--g-card-border);
}

/* A5 头像：描边色按角色，色值查 DICT.ROLE_RING（L-5） */
.wb-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: var(--g-avatar-ring) solid var(--g-accent);
  background: #c8d8c8; flex-shrink: 0; cursor: pointer;
}
.wb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-avatar--warn  { border-color: var(--g-warn); }
.wb-avatar--green { border-color: var(--g-green); }
.wb-avatar--blue  { border-color: var(--g-blue); }
.wb-avatar--dim   { border-color: var(--g-text-dim); }

.wb-id { flex: 1; min-width: 0; line-height: 1.4; }

/* A1 用户名 + A2 豆子余额（同一行） */
.wb-id-row1 { display: flex; align-items: center; gap: var(--g-pad-xs); line-height: 1.6; }
.wb-name { font-weight: 700; font-size: var(--g-font-size); }

/* A2 豆子按钮：点它展开 B 电池栏 */
.wb-purse {
  margin-left: auto; display: flex; align-items: center; gap: 2px;
  font-weight: 700; font-size: var(--g-font-size); color: var(--g-accent);
  white-space: nowrap; background: none; border: none; padding: 2px 0;
  cursor: pointer; font-family: inherit;
}
.wb-purse img { width: 18px; height: 18px; vertical-align: middle; }
.wb-purse-caret { font-size: var(--g-font-size-xs); color: var(--g-text-sub); }

/* A3 称号行：四种信息各自成块、各自带色，不再拼成一条灰字符串
   违规史：旧仓 core.js:1274 把称号+勋章+信誉+注册日期拼成一个 textContent，
   且被 main.css:148 的 color 全部刷成灰色 —— 设计好的颜色被 CSS 吃掉 */
.wb-id-row2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-pad-xs); font-size: var(--g-font-size-tiny); }
.wb-chip { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.wb-chip--dim    { color: var(--g-text-dim); }
.wb-chip--green  { color: var(--g-green); }
.wb-chip--accent { color: var(--g-accent); }
.wb-chip--warn   { color: var(--g-warn); }
.wb-chip--warn2  { color: var(--g-warn); }   /* 原 --gold，橄榄黄退役（U-9） */
.wb-chip--red    { color: var(--g-red); }

/* A4 营队行 */
.wb-id-row3 { font-size: var(--g-font-size-xs); color: var(--g-text-sub); }

/* A6 收件箱 + 红角标（数字来自 notify.summary，不许写死在 HTML） */
.wb-inbox { position: relative; background: none; border: none; padding: 0; cursor: pointer; line-height: 1; }
.wb-inbox-ico { font-size: 1.3rem; }
.wb-inbox-badge {
  position: absolute; top: -4px; right: -6px;
  background: var(--g-red); color: #fff;
  font-size: var(--g-font-size-micro);
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 999px; padding: 0 4px;
}

/* 工作台页容器：顶栏吸顶＋底栏吸底，所以本页 flex 纵向拉满视口，padding 负值吃满宽 */
.wb-page { margin: calc(var(--g-pad) * -1); min-height: 100vh; display: flex; flex-direction: column; }
.wb-body { padding: var(--g-pad); flex: 1 1 auto; }
/* A7 信号格：贴头像右下角，外套顶栏同色描边圈使其浮在头像上（微信/Slack 同做法）
   CSS 画三竖条而非字符——字符宽窄跨设备会跳且无法逐格上色。见 法典/10_元件编号表.md 的「工作台 my.js（U-1）」 */
/* 右侧多 3px：信号格往右探出 3px，补回来两侧间距才对称 */
.wb-avatar-wrap { position: relative; flex-shrink: 0; margin-right: 3px; }
.wb-sig {
  position: absolute; right: -3px; bottom: -2px;
  display: flex; align-items: flex-end; gap: 1.5px;
  padding: 2px; border-radius: 4px;
  background: var(--g-topbar-bg);
  box-shadow: 0 0 0 1.5px var(--g-topbar-bg);
}
.wb-sig i { display: block; width: 2.5px; border-radius: 1px; background: var(--g-text-muted); }
.wb-sig i:nth-child(1) { height: 4px; }
.wb-sig i:nth-child(2) { height: 7px; }
.wb-sig i:nth-child(3) { height: 10px; }
.wb-sig--on  i:nth-child(-n+3) { background: var(--g-accent); }
.wb-sig--mid i:nth-child(-n+2) { background: var(--g-warn); }
.wb-sig--off i:nth-child(1)    { background: var(--g-red); }

/* A8 网络状态条：正常不出现。仪表盘（A7）常驻，喇叭（A8）只在该响时响 */
.wb-netbar {
  border-radius: var(--g-radius-sm);
  padding: var(--g-pad-xs) var(--g-pad-sm);
  font-size: var(--g-font-size-sm);
  line-height: 1.5;
}
.wb-netbar--mid { background: var(--g-warn-bg); border: 1px solid var(--g-warn-light); color: var(--g-warn); }
.wb-netbar--off { background: var(--g-red-bg);  border: 1px solid var(--g-red);        color: var(--g-red); }
/* ══ B 钱包电池栏 ══ 见 法典/10_元件编号表.md 的「工作台 my.js（U-1）」
   默认收起，点 A2 豆子才展开。格数由 api.me.capabilities() 的 pools 决定，CSS 不管几格都自适应 */
.wb-wallet {
  display: flex; gap: var(--g-pad-xs);
  padding: var(--g-gap) var(--g-pad);
  border-bottom: 1px solid var(--g-card-border);
  background: var(--g-topbar-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* B1/B2/B3 电池格：一格 = 图标 + 电池条。格内居中（并排方格的例外，顶栏才左对齐） */
.wb-bat-cell {
  flex: 1 1 0; min-width: 0;
  background: var(--g-card);
  border: 1px solid var(--g-card-border);
  border-radius: var(--g-radius-sm);
  padding: var(--g-pad-xs) 4px;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
}
.wb-bat-ico { font-size: var(--g-font-size-lg); line-height: 1.1; }

.wb-bat {
  position: relative;
  margin-top: 4px; height: 14px;
  border: 1px solid; border-radius: 4px;
  overflow: hidden;
}
.wb-bat-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.wb-bat-num {
  position: relative;
  font-size: var(--g-font-size-xs); font-weight: 700;
  line-height: 14px; white-space: nowrap;
}

/* 池色五种，取自 DICT.POOLS 的 tone。颜色只来自 token（L-8） */
.wb-bat-cell--warn2        .wb-bat { border-color: var(--g-warn); }
.wb-bat-cell--warn2        .wb-bat-fill { background: var(--g-warn-bg); }
.wb-bat-cell--warn2        .wb-bat-num  { color: var(--g-warn); }
.wb-bat-cell--accent       .wb-bat { border-color: var(--g-accent); }
.wb-bat-cell--accent       .wb-bat-fill { background: var(--g-accent-bg); }
.wb-bat-cell--accent       .wb-bat-num  { color: var(--g-accent); }
.wb-bat-cell--accent-light .wb-bat { border-color: var(--g-accent-light); }
.wb-bat-cell--accent-light .wb-bat-fill { background: var(--g-accent-bg); }
.wb-bat-cell--accent-light .wb-bat-num  { color: var(--g-accent-light); }
.wb-bat-cell--warn         .wb-bat { border-color: var(--g-warn); }
.wb-bat-cell--warn         .wb-bat-fill { background: var(--g-warn-bg); }
.wb-bat-cell--warn         .wb-bat-num  { color: var(--g-warn); }
.wb-bat-cell--blue         .wb-bat { border-color: var(--g-blue); }
.wb-bat-cell--blue         .wb-bat-fill { background: var(--g-blue-bg); }
.wb-bat-cell--blue         .wb-bat-num  { color: var(--g-blue); }
/* ══ C 状态条 ══ 见 法典/10_元件编号表.md 的「工作台 my.js（U-1）」
   C0 整条：全零时页面根本不画它（见 my.js），所以这里不用写隐藏规则 —— 不存在比 display:none 更省 */
.wb-stat {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--g-pad-xs);
  padding: var(--g-gap) var(--g-pad);
  border-bottom: 1px solid var(--g-card-border);
}

/* C1 一枚 chip：主体可点跳去处，右侧可选一枚动作键 */
.wb-chip-stat {
  display: inline-flex; align-items: stretch;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
}
.wb-chip-stat-main {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 9px;   /* ★ 不许改大：C1/C2 一排 chip 挤在一行，每边 +1px 就换行（U-15 实测） */
  border: 0; background: transparent;
  font-family: inherit; font-size: var(--g-font-size-xs); font-weight: 700;
  line-height: 1; cursor: pointer;
}
.wb-chip-stat-ico  { font-size: var(--g-font-size-xs); }
.wb-chip-stat-num  { font-variant-numeric: tabular-nums; }
.wb-chip-stat-name { white-space: nowrap; }

/* C2 结算键：贴在 settle 那枚右侧，与 chip 同高不另起一行 */
.wb-stat-act {
  border: 0; padding: 0 9px;   /* ★ 同上，不许改大 */
  background: var(--g-accent); color: #fff;
  font-family: inherit; font-size: var(--g-font-size-micro); font-weight: 700;
  line-height: 1; cursor: pointer;
}

/* 项色四种，取自 DICT.STAT_CHIPS 的 tone。颜色只来自 token（L-8） */
.wb-chip-stat--red   { background: var(--g-red-bg); }
.wb-chip-stat--red   .wb-chip-stat-main { color: var(--g-red); }
.wb-chip-stat--green { background: var(--g-green-bg); }
.wb-chip-stat--green .wb-chip-stat-main { color: var(--g-green); }
.wb-chip-stat--warn  { background: var(--g-warn-bg); }
.wb-chip-stat--warn  .wb-chip-stat-main { color: var(--g-warn); }
.wb-chip-stat--dim   { background: var(--g-card-hover); }
.wb-chip-stat--dim   .wb-chip-stat-main { color: var(--g-text-sub); }
/* ══ E 任务卡列表 ══ 见 法典/10_元件编号表.md 的 E0/E1，字段见 法典/03_数据字典.md 的 D-17
   尺寸搬自旧仓 css/main.css:193-211（卡高 66、图标 42、名字截断 180），颜色全换 token（L-8） */
.wb-quests { padding: var(--g-gap) var(--g-pad); }
.wb-archive-link { padding: 12px var(--g-pad); color: var(--g-accent); font-size: var(--g-font-size-xs); cursor: pointer; text-align: center; border-top: 1px solid var(--g-card-border); }

/* E1 卡：左侧 3px 竖带＝归属色，底色＝急迫程度 */
.q-card {
  display: flex; align-items: center; gap: var(--g-pad-sm);
  background: var(--g-card);
  border: 1px solid var(--g-card-border);
  border-left: 3px solid var(--g-text-dim);
  border-radius: var(--g-radius-sm);
  padding: var(--g-gap) var(--g-pad-sm);
  margin-bottom: var(--g-pad-xs);
  /* U-18 刀1：= 顶栏实高 + 呼吸，顶栏改高度时须同步 */
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 68px);
}
.q-card:active { transform: scale(.98); }
/* U-9 第2条：底色淡到「几乎是白的」（味 2%），禁再用 8% 透明色铺满。
   竖带才是那个抢眼的地方 —— 面积小才可以饱和 */
.q-card--warn { background: var(--g-tint-warn); border-left-color: var(--g-warn); }
.q-card--red  { background: var(--g-tint-red);  border-left-color: var(--g-red);  }
/* 我发的任务：左边 3px 竖线用 accent 色，底色跟普通卡一样（白底不铺色，避免跟背景融在一起） */
.q-card--posted { border-left-color: var(--g-accent); }

/* 左侧图标块 42×42（旧仓 .task-left 原尺寸） */
.q-left {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--g-radius-sm);
  font-size: var(--g-font-size-lg);
}
/* U-9 第3条：七种归属靠图标区分，底色统一墨绿 —— 不再一归属一色 */
.q-left--accent { background: var(--g-accent-bg); }
.q-left--dim    { background: var(--g-card-hover); }

.q-body { flex: 1; min-width: 0; }

/* 第1行：名字截断，赏金不缩 */
.q-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--g-pad-xs); }
.q-title {
  font-weight: 700; font-size: var(--g-font-size);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-nt { flex-shrink: 0; font-weight: 700; font-size: var(--g-font-size); color: var(--g-accent); }

/* 第2行 E4：nowrap 铁规 —— 换行就会长高，卡高必须恒定（D-17）
   挤不下的丢弃序由 q-drop1/2/3 的 min-width:0 + overflow:hidden 实现，截止不设 shrink 故永不丢 */
.q-row2 {
  display: flex; align-items: center; gap: var(--g-pad-xs);
  margin-top: 3px;
  font-size: var(--g-font-size-tiny); color: var(--g-text-sub);
  white-space: nowrap; overflow: hidden;
}
.q-meta { overflow: hidden; text-overflow: ellipsis; }
.q-drop2 { flex-shrink: 2; }   /* 名额 */
/* 发布者名：限宽 5em，超长截断但 hover 可见全名 */
.q-poster {
  max-width: 5em; min-width: 1.5em; flex-shrink: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* E2 归属标：营队显主线/支线/身份/隐藏，其余显社区/个人/在地（D-17） */
.q-tag {
  flex-shrink: 0;
  padding: 1px var(--g-pad-xs); border-radius: 4px;
  font-weight: 600;
}
.q-tag--accent { color: var(--g-accent); background: var(--g-accent-bg); }
.q-tag--dim    { color: var(--g-text-sub); background: var(--g-card-hover); }

/* E5 截止：flex-shrink 缺省为 0，故永不被挤掉。越急颜色越重 */
.q-due { flex-shrink: 0; font-weight: 600; }
.q-due--dim  { color: var(--g-text-dim); font-weight: 400; }

.q-due--warn { color: var(--g-warn); }
.q-due--red  { color: var(--g-red);  }

/* E6 快捷键：后端发了 quick_action 才画（C-11）。字号与展开态 .q-act 统一 */
.q-quick {
  flex-shrink: 0; margin-left: auto;
  border: 0; padding: 3px 9px; border-radius: var(--g-radius-sm);   /* ★ 不许改大：与卡内文字挤一行 */
  background: var(--g-accent); color: var(--g-text-on-dark);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 700;
  line-height: 1.2; cursor: pointer;
}
/* ══ E0 段头 ══ 见 法典/03_数据字典.md 的 D-20。搬自旧仓 .section-head（core.js:1513） */
.q-sec {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; box-sizing: border-box;
  margin: var(--g-gap) 0 var(--g-pad-xs);
  padding: var(--g-pad-xs) 2px;
  border: 0; border-top: 1px solid var(--g-sep);
  background: transparent;
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 700;
  cursor: pointer;
  /* U-18 刀1：段头滚到顶栏下方可见（同 q-card 值） */
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 68px);
}
.q-sec-fold { font-size: var(--g-font-size-micro); font-weight: 400; color: var(--g-text-dim); }
/* 段色只此三种（U-9 第1条：红=出事 橙=快到 灰=无所谓） */
.q-sec--red  { color: var(--g-red);   }
.q-sec--warn { color: var(--g-warn);  }
.q-sec--dim  { color: var(--g-text-sub); }

/* ══ 卡右侧 ✓✕ 直批 ══ 旧仓 .task-review（main.css:208-211），44×44 触控区照搬 */
.q-rv { display: flex; gap: 4px; flex-shrink: 0; }
.q-rv-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--g-radius-sm);
  font-family: inherit; font-size: var(--g-font-size); font-weight: 700;
  cursor: pointer;
}
.q-rv-btn--ok { background: var(--g-accent-bg); color: var(--g-accent); }
.q-rv-btn--no { background: var(--g-red-bg);    color: var(--g-red);    }

/* ══ E2 任务展开态 QuestDetail（U-1 块4b · 法典/03 的 D-22）══
   底色一律近白不含黄（S-9）；黄只准出现在小标签。折叠态已显示的不在这里重复。
   底部不留间距：详情卡必须紧贴紧随其后的任意元素（提交卡/审核栏/下一张卡），
   由后续元素自行决定距离。唯当详情卡直接挨着下一张 QuestCard 时，由 .q-card 的
   margin-top 补回段间距（见下方 .q-exp + .q-card 规则）。 */
.q-exp {
  background: var(--g-card);
  border: 1px solid var(--g-card-border);
  border-radius: var(--g-radius-sm);
  border-left: 3px solid var(--g-accent);
  margin: -4px 0 0 0;
  padding: var(--g-pad-sm) var(--g-pad);
  font-size: var(--g-font-size-sm);
  color: var(--g-text);
}
/* 详情卡后直接跟下一张任务卡（无提交卡插入时）：补回 12px 段间距 */
.q-exp + .q-card { margin-top: var(--g-gap-lg); }

/* ① 说明 */
.q-exp-note {
  background: var(--g-card-hover);
  border-radius: var(--g-radius-sm);
  padding: 7px var(--g-pad-sm); line-height: 1.55;
  margin-bottom: var(--g-pad-xs);
  /* D-23：行内只给 3 行，超出截断；全文进第③层，不在窄条里读长文 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 「📄 看详情（还有 N 字）· 📷3 📎2」——通往第③层的唯一入口 */
.q-exp-more {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 3px 0 6px;
  font-family: inherit; font-size: var(--g-font-size-xs); font-weight: 600;
  color: var(--g-accent); cursor: pointer;
}

/* ② 新手任务 + 倒计时 */
.q-exp-newbie {
  display: flex; align-items: center; gap: var(--g-gap);
  background: var(--g-accent-bg);
  border-radius: var(--g-radius-sm);
  padding: 5px var(--g-pad-sm); margin-bottom: var(--g-gap);
}
.q-exp-newbie-tag  { font-size: var(--g-font-size-xs); font-weight: 700; color: var(--g-accent); }
.q-exp-newbie-left { font-size: var(--g-font-size-xs); color: var(--g-text-dim); }

/* ①.⑤ 提交要求标签行：一行放平，颜色走 token */
.q-exp-deliv { display: flex; align-items: center; gap: var(--g-gap); margin-bottom: var(--g-gap); font-size: var(--g-font-size-xs); }
.q-exp-deliv-title { color: var(--g-text-sub); font-weight: 700; white-space: nowrap; }
.q-exp-deliv-list { display: flex; flex-wrap: wrap; gap: 4px; }
.q-exp-deliv-tag { padding: 1px var(--g-pad-xs); border-radius: 999px; background: var(--g-accent-bg); color: var(--g-accent); font-size: var(--g-font-size-xs); }

/* ③ 时间线：竖向串珠，日期列定宽 42px 永不被挤（D-22） */
.q-tl      { margin-bottom: var(--g-gap); }
.q-tl-head { font-size: var(--g-font-size-xs); color: var(--g-text-sub); margin-bottom: 3px; }
.q-tl-rows { display: flex; flex-direction: column; }
.q-tl-row  {
  display: flex; align-items: center; gap: var(--g-pad-xs);
  height: 16px; font-size: var(--g-font-size-xs); color: var(--g-text-sub);
}
.q-tl-row.is-now { height: 20px; font-weight: 700; color: var(--g-accent); }
.q-tl-dot  { width: 8px; flex: none; text-align: center; font-size: 0.5rem; line-height: 1; }
.q-tl-date { width: 42px; flex: none; }         /* 定宽：日期绝不被文字挤走 */
.q-tl-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-tl-row--muted { color: var(--g-text-muted); }
.q-tl-more {
  align-self: flex-start; margin-left: var(--g-pad);
  border: 0; background: none; padding: 1px 0;
  font-family: inherit; font-size: var(--g-font-size-xs);
  color: var(--g-text-dim); cursor: pointer;
}

/* ④⑥⑦ 单行信息 */
.q-exp-line { font-size: var(--g-font-size-xs); color: var(--g-text-sub); margin-bottom: var(--g-pad-xs); }
.q-exp-meta { font-size: var(--g-font-size-xs); color: var(--g-text-sub); margin-bottom: 3px; }
.q-exp-prog { font-size: var(--g-font-size-xs); color: var(--g-accent); font-weight: 600; margin-bottom: var(--g-pad-xs); }

/* ⑤ 退回意见：出事了才有，走 tint-red（U-9 第2条） */
.q-exp-reject {
  background: var(--g-tint-red);
  border: 1px solid var(--g-red);
  border-radius: var(--g-radius-sm);
  padding: var(--g-pad-xs) var(--g-pad-sm); margin-bottom: var(--g-pad-xs);
  font-size: var(--g-font-size-xs); color: var(--g-red); line-height: 1.5;
}

/* ⑧ 操作按钮：色调由后端 tone 决定，前端只映射类名（C-12） */
.q-exp-acts { display: flex; gap: var(--g-gap); margin: var(--g-gap) 0 5px; }
.q-act {
  flex: 1; min-height: 34px;
  border: 1px solid transparent; border-radius: var(--g-radius-sm);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 600;
  cursor: pointer;
}
.q-act--pri    { background: var(--g-accent);    color: #fff; }
.q-act--danger { background: var(--g-red-bg);    color: var(--g-red);    border-color: var(--g-red); }
.q-act--sec    { background: var(--g-card);      color: var(--g-text-sub); border-color: var(--g-card-border); }
.q-act--wait   { background: var(--g-card-hover); color: var(--g-text-dim); cursor: default; }

/* 提交卡：紧贴上方详情卡（.q-exp mb=0 + 本卡 mt=0 → 0px 无缝粘合） */
.q-sub {
  background: var(--g-card);
  border: 1px solid var(--g-card-border);
  border-left: 3px solid var(--g-accent);
  border-radius: var(--g-radius-sm);
  margin: 0; padding: var(--g-gap) var(--g-pad-sm);
}
.q-sub-head { font-size: var(--g-font-size-xs); font-weight: 700; margin-bottom: 3px; }
.q-sub-body { font-size: var(--g-font-size-sm); color: var(--g-text-sub); line-height: 1.55; }
.q-sub-miss { font-size: var(--g-font-size-xs); color: var(--g-red); padding: 1px 0; font-weight: 600; }
/* 提交卡后直接跟下一张任务卡（无审核栏时）：补回 12px，否则两张卡糊成一坨（U-15） */
.q-sub + .q-card { margin-top: var(--g-gap-lg); }
/* 逐人审核栏：紧贴 SubmissionCard（mt=0），下间距 20px 拉开与下一张卡 */
.q-sub-acts { display: flex; gap: var(--g-gap); margin: 0 0 var(--g-pad-lg); align-items: center; }
.q-sub-tag { font-size: var(--g-font-size-sm); padding: 2px var(--g-pad-xs); border-radius: 999px; font-weight: 700; }
.q-sub-tag--gold { background: var(--g-warn-bg); color: var(--g-warn); border: 1px solid var(--g-warn-light); }

/* ══ E3 第③层全屏详情 QuestSheet（U-1 块4g · 法典/03 的 D-23）══
   走 overlayStack（L-7）；长正文／网址／图片／附件都在这里，不挤进行内展开。 */
.q-sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--g-screen-bg);
}
.q-sheet-bar {
  flex: none; display: flex; align-items: center; gap: var(--g-gap);
  height: 48px; padding: 0 var(--g-pad);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--g-topbar-bg);
  border-bottom: 1px solid var(--g-sep);
}
.q-sheet-back {
  border: 0; background: none; padding: 4px 2px;
  font-family: inherit; font-size: var(--g-font-size); font-weight: 600;
  color: var(--g-accent); cursor: pointer;
}
.q-sheet-title {
  flex: 1; min-width: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-sheet-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--g-pad) var(--g-pad) var(--g-pad-lg);
}
.q-sheet-sec { margin-bottom: var(--g-gap-lg); }
.q-sheet-p {
  margin: 0 0 var(--g-gap); line-height: 1.7;
  font-size: var(--g-font-size); color: var(--g-text);
}
.q-sheet-head {
  font-size: var(--g-font-size-sm); font-weight: 700; color: var(--g-text-sub);
  margin: var(--g-gap-lg) 0 var(--g-gap);
}

/* 网址：只画后端发的 label，不显示裸 URL（C-13） */
.q-sheet-links { display: flex; flex-direction: column; gap: 1px; }
.q-link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--g-pad-sm);
  background: var(--g-card); border: 1px solid var(--g-card-border);
  border-radius: var(--g-radius-sm);
  text-decoration: none; color: var(--g-accent);
  font-size: var(--g-font-size-sm); font-weight: 600;
}
.q-link + .q-link { margin-top: var(--g-gap); }
.q-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-link-arrow { flex: none; color: var(--g-text-muted); font-size: var(--g-font-size-lg); }

/* 图片三宫格：104×104，点开看大图 */
.q-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-gap); }
.q-shot {
  position: relative; aspect-ratio: 1 / 1;
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card-hover); padding: 0; overflow: hidden; cursor: pointer;
}
.q-shot-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 附件：不预览，只列名＋图标＋大小（size_text 后端已算好） */
.q-files { display: flex; flex-direction: column; gap: var(--g-gap); }
.q-file {
  display: flex; align-items: center; gap: var(--g-gap); min-height: 44px;
  padding: 0 var(--g-pad-sm);
  background: var(--g-card); border: 1px solid var(--g-card-border);
  border-radius: var(--g-radius-sm);
  text-decoration: none; color: var(--g-text);
}
.q-file-ic   { flex: none; font-size: var(--g-font-size-lg); }
.q-file-name { flex: 1; min-width: 0; font-size: var(--g-font-size-sm); font-weight: 600;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-file-size { flex: none; font-size: var(--g-font-size-xs); color: var(--g-text-dim); }

/* 看大图：栈再压一层，点任意处关闭 */
.q-photo {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--g-gap); padding: var(--g-pad);
  background: rgba(29, 46, 36, 0.94);
}
.q-photo-img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--g-radius-sm); }
.q-photo-cap { font-size: var(--g-font-size-sm); color: var(--g-text-on-dark); }

/* ══ F 底栏 TabBar（U-1 块5 · 法典/10 的 F0~F5）══
   吸底：一屏之内换页的手指落点固定在拇指区，不必上滑找入口。
   ★ 颜色全走 --g-*（L-8）；tab 个数由后端 capabilities.tabs 定，CSS 不假设有几个。 */
.wb-tabbar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: stretch;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--g-topbar-bg);
  border-top: 1px solid var(--g-sep);
}
.wb-tab {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; background: none; padding: 0;
  font-family: inherit; color: var(--g-text-dim); cursor: pointer;
  position: relative;
}
.wb-tab-ico  { font-size: var(--g-font-size); line-height: 1.1; }
.wb-tab-name { font-size: var(--g-font-size-micro); line-height: 1.1; }
.wb-tab.is-on { color: var(--g-accent); }
.wb-tab.is-on::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: 2px; background: var(--g-accent);
}
.wb-tab.is-on .wb-tab-name { font-weight: 600; }
/* 筛选键与 tab 不是一类事（一个是翻这堆活，一个是换页），故右侧一道竖线分开 */
.wb-tab--search { flex: 0 0 58px; border-right: 1px solid var(--g-sep); }
/* 筛选生效时角标显数字：不显数字人就不知道自己筛了几条，以为活丢了 */
.wb-tab-dot {
  position: absolute; top: 4px; right: 10px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 999px; background: var(--g-accent); color: #fff;
  font-size: var(--g-font-size-micro); line-height: 14px; text-align: center;
}

/* 已筛选提示条：正在看筛过的结果这件事必须说出来 */
.wb-fs-tip {
  display: flex; align-items: center; gap: var(--g-gap);
  padding: var(--g-pad-xs) var(--g-pad-sm);
  border-radius: var(--g-radius-sm);
  background: var(--g-accent-bg);
  font-size: var(--g-font-size-xs); color: var(--g-accent-dark);
}
.wb-fs-tip > span { flex: 1; min-width: 0; }
.wb-fs-tip-x {
  flex: none; border: 0; background: none; padding: 2px 4px;
  font-family: inherit; font-size: var(--g-font-size-xs); font-weight: 600;
  color: var(--g-accent); cursor: pointer;
}

/* ══ 搜索面板 SearchSheet（U-1 块5b · 法典/03 的 D-27）══
   从底部升起，压 overlayStack（L-7）：返回键先关它。 */
.wb-fs { position: fixed; inset: 0; z-index: 65; pointer-events: auto; }
.wb-fs-mask { position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.wb-fs-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 72%;
  display: flex; flex-direction: column;
  padding: var(--g-pad-sm) var(--g-pad) var(--g-pad-sm);
  padding-bottom: calc(var(--g-pad-sm) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0;
  background: var(--g-card);
  box-shadow: var(--g-shadow-lg);
}
.wb-fs-bar { flex: none; display: flex; align-items: center; margin-bottom: var(--g-pad-xs); }
.wb-fs-title { flex: 1; font-size: var(--g-font-size); font-weight: 600; color: var(--g-text); }
.wb-fs-clear {
  border: 0; background: none; padding: 2px 4px;
  font-family: inherit; font-size: var(--g-font-size-xs); color: var(--g-text-dim); cursor: pointer;
}
/* 输入框＋搜键同一行：F8 chip 废止后不必再留整条底栏 */
.wb-fs-row {
  flex: none; display: flex; align-items: center; gap: var(--g-gap);
  margin-bottom: var(--g-pad-xs);
}
/* 搜索框：面板打开即聚焦，软键盘的搜索键直接生效 */
.wb-fs-input {
  flex: 1; min-width: 0; height: 32px;
  padding: 0 var(--g-pad-sm);
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-content); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-sm);
}
.wb-fs-input:focus { outline: none; border-color: var(--g-accent-light); }
/* 面板里的一行灰提示：告诉人按类别看去点段头，不在这儿找 */
.wb-fs-gh {
  margin: var(--g-pad-xs) 0 4px;
  font-size: var(--g-font-size-micro); color: var(--g-text-dim);
}
.wb-fs-go {
  flex: none; height: 32px; padding: 0 var(--g-pad);
  border: 0; border-radius: var(--g-radius-sm);
  background: var(--g-accent); color: #fff;
  font-family: inherit; font-size: var(--g-font-size); font-weight: 600; cursor: pointer;
}

/* ══ 抽屉柜 Dropdown + 居中面板（U-1 块9）══
   菜单项 hover、面板弹入动画。颜色只走 --g-*（L-8） */
.drw-menu-item:hover { background: var(--g-card-hover); }
@keyframes drwPopIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══ 提交弹层 SubmitSheet（U-1 块7f · L-7 叠加栈）══
   居中弹窗（不固定在底部）。颜色只走 --g-*（L-8） */
.wb-ss { position: fixed; inset: 0; z-index: 66; pointer-events: auto; }
.wb-ss-mask { position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.wb-ss-panel {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 340px; max-width: 94vw; max-height: 80vh;
  display: flex; flex-direction: column;
  border-radius: var(--g-radius);
  background: var(--g-card); box-shadow: var(--g-shadow-lg);
  animation: wb-ss-open .18s ease-out;
}
/* 标题栏 */
.wb-ss-bar {
  flex: none; display: flex; align-items: center; gap: var(--g-gap);
  padding: var(--g-pad-sm) var(--g-pad);
  border-bottom: 1px solid var(--g-sep);
}
.wb-ss-title { font-size: var(--g-font-size); font-weight: 700; color: var(--g-text); }
.wb-ss-task  { flex: 1; min-width: 0; font-size: var(--g-font-size-xs); color: var(--g-text-dim);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-ss-close {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--g-card-hover); font-size: var(--g-font-size-lg); line-height: 1;
  color: var(--g-text-dim); cursor: pointer;
}
/* 滚动内容区 */
.wb-ss-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--g-pad) var(--g-pad) var(--g-pad-xs);
}
.wb-ss-field { margin-bottom: var(--g-gap-lg); }
.wb-ss-label { font-size: var(--g-font-size-xs); font-weight: 700; color: var(--g-text-sub); margin-bottom: var(--g-pad-xs); }
/* textarea */
.wb-ss-note {
  width: 100%; box-sizing: border-box; min-height: 68px; resize: vertical;
  padding: var(--g-pad-xs) var(--g-pad-sm);
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-content); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-sm); line-height: 1.5;
}
.wb-ss-note:focus { outline: none; border-color: var(--g-accent-light); }
.wb-ss-note::placeholder { color: var(--g-text-muted); }
/* 签到型提示 */
.wb-ss-signin {
  padding: var(--g-pad); text-align: center; border-radius: var(--g-radius-sm);
  background: var(--g-accent-bg); font-size: var(--g-font-size); font-weight: 600; color: var(--g-accent);
}
/* 照片 */
.wb-ss-photo-row { display: flex; flex-wrap: wrap; gap: var(--g-gap); align-items: flex-start; }
.wb-ss-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-gap); }
.wb-ss-photo-cell { position: relative; aspect-ratio: 1/1; border-radius: var(--g-radius-sm); overflow: hidden; }
.wb-ss-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-ss-rm {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  font-size: var(--g-font-size-sm); line-height: 1; cursor: pointer;
}
/* 添加按钮 */
.wb-ss-add {
  border: 1px dashed var(--g-card-border); border-radius: var(--g-radius-sm);
  background: none; padding: var(--g-pad-xs) var(--g-pad-sm);
  font-family: inherit; font-size: var(--g-font-size-xs); color: var(--g-text-dim); cursor: pointer;
  margin-bottom: var(--g-gap);
}
.wb-ss-add:active { background: var(--g-card-hover); }
/* 隐藏 file input */
.wb-ss-file-input { display: none; }
/* 附件/链接列表行 */
.wb-ss-file-list, .wb-ss-link-list { display: flex; flex-direction: column; gap: 4px; }
.wb-ss-file-row, .wb-ss-link-row {
  display: flex; align-items: center; gap: var(--g-gap);
  padding: 5px var(--g-pad-xs); border-radius: var(--g-radius-sm);
  background: var(--g-card-hover); font-size: var(--g-font-size-xs); color: var(--g-text-sub);
}
.wb-ss-link-input {
  width: 100%; box-sizing: border-box; height: 32px;
  padding: 0 var(--g-pad-sm);
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-content); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-sm);
  margin-bottom: var(--g-gap);
}
.wb-ss-link-input:focus { outline: none; border-color: var(--g-accent-light); }
.wb-ss-empty { font-size: var(--g-font-size-xs); color: var(--g-text-muted); padding: var(--g-pad-xs) 0; }
/* 底部按钮 */
.wb-ss-foot {
  flex: none; padding: var(--g-pad-sm) var(--g-pad);
  border-top: 1px solid var(--g-sep);
}
.wb-ss-go {
  width: 100%; height: 42px; border: 0; border-radius: var(--g-radius-sm);
  background: var(--g-accent); color: #fff;
  font-family: inherit; font-size: var(--g-font-size); font-weight: 700; cursor: pointer;
}
.wb-ss-go:disabled { opacity: .45; cursor: default; }

@keyframes wb-ss-open {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ══ QuestDetail 认领人头像行（替代竖排列表，寸土寸金）══ */
.q-exp-claimants { margin-bottom: var(--g-gap); }
.q-exp-cl-head {
  font-size: var(--g-font-size-xs); font-weight: 700; color: var(--g-text-sub);
  margin-bottom: var(--g-pad-xs);
}
.q-exp-av-row { display: flex; flex-wrap: wrap; gap: var(--g-pad-sm); }
.q-exp-av-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.q-exp-av-label { font-size: var(--g-font-size-micro); color: var(--g-text-dim); max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 头像 6 种状态 + 通用角标（data-badge 属性驱动）
   claimed(灰)→submitted(绿边)→approved(绿底✓)→settled(金边🧾)
              ↘ rejected(红边✕)→resubmitted(绿边+数字) */
.q-exp-av {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent;
  font-size: var(--g-font-size-xs); font-weight: 700;
  cursor: default; position: relative;
}
/* 角标：右上角，白边框衬底，CSS 读 data-badge 属性画圆+图标 */
.q-exp-av[data-badge]::after {
  content: attr(data-badge); position: absolute; top: -3px; right: -3px;
  min-width: 13px; height: 13px; padding: 0 2px; border-radius: 999px;
  font-size: 8px; font-weight: 700; line-height: 13px; text-align: center;
  border: 1.5px solid var(--g-card); box-sizing: border-box;
}
/* ① 领了没交：黑白头像 = 一眼看出没交 */
.q-exp-av--claimed {
  background: var(--g-card-hover); color: var(--g-text-dim);
  border-color: var(--g-text-muted);
  filter: grayscale(1);
}
/* ② 交了等审：感叹号角标提醒「交了还没审」 */
.q-exp-av--submitted {
  background: var(--g-accent-bg); color: var(--g-accent);
  border-color: var(--g-green); cursor: pointer;
}
.q-exp-av--submitted[data-badge]::after {
  background: var(--g-accent); color: #fff;
}
/* ③ 审核通过：绿底+✓角标 */
.q-exp-av--approved {
  background: var(--g-green-bg); color: var(--g-green);
  border-color: var(--g-green); cursor: pointer;
}
.q-exp-av--approved[data-badge]::after {
  background: var(--g-green); color: #fff;
}
/* ④ 已结算：金边+🧾角标 */
.q-exp-av--settled {
  background: var(--g-warn-bg); color: var(--g-warn);
  border-color: var(--g-warn); cursor: default;
}
.q-exp-av--settled[data-badge]::after {
  background: var(--g-warn); color: #fff;
}
/* ⑤ 已打回：红边+✕角标 */
.q-exp-av--rejected {
  background: var(--g-red-bg); color: var(--g-red);
  border-color: var(--g-red); cursor: pointer;
}
.q-exp-av--rejected[data-badge]::after {
  background: var(--g-red); color: #fff;
}
/* ⑥ 重新提交：绿边+数字角标（同 submitted 但带角标） */
.q-exp-av--resubmitted {
  background: var(--g-accent-bg); color: var(--g-accent);
  border-color: var(--g-green); cursor: pointer;
}
.q-exp-av--resubmitted[data-badge]::after {
  background: var(--g-green); color: #fff;
}

/* ══ U-16 展开态聚焦与防误触（砚仁 2026-08-09 裁定） ══
   展开的卡加 is-open（box-shadow 描 accent 色）；
   其余卡加 is-dimmed（磨砂玻璃效果 + pointer-events:none 防误触）；
   防误触逻辑在 JS（pointerdown/pointerup 位移 ≤10px），CSS 只管画。 */
.q-card.is-open {
  box-shadow: 0 0 0 2px var(--g-accent), 0 4px 16px rgba(0,0,0,.12);
  z-index: 1;
}
.q-card.is-dimmed {
  opacity: .35;
  filter: blur(1.5px);
  transition: opacity var(--g-trans), filter var(--g-trans);
  /* 原有 pointer-events:none 已撤（砚仁 2026-08-18：切到别的卡要点两下，第一下物理点不动）。
     防误触仍有一道：JS 端 pointerdown→pointerup 位移 >10px 不算点击（ui-primitives.js QuestCard 段）。 */
}

/* ══ 账目页（ledger.js）—— 资金池概览 → 流水详情 ══ */

/* 顶栏 */
.ld-head, .it-head {
  display: flex; align-items: center; gap: var(--g-pad-sm);
  padding: var(--g-pad);
  background: var(--g-topbar-bg);
  backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 10;
}
.ld-back, .it-back {
  background: none; border: none; font-size: 1.2rem; cursor: pointer;
  color: var(--g-text);
}
.ld-title, .it-title {
  font-size: var(--g-font-size-lg); font-weight: 700; color: var(--g-text);
}

/* 池子概览 */
.ld-pools-head {
  font-size: var(--g-font-size-xs); font-weight: 700;
  color: var(--g-text-sub); margin-bottom: var(--g-pad-xs);
}
.ld-pool {
  display: flex; align-items: center; gap: var(--g-pad-sm);
  background: var(--g-card);
  border: 1px solid var(--g-card-border);
  border-radius: var(--g-radius-sm);
  padding: var(--g-pad-sm) var(--g-pad);
  margin-bottom: var(--g-gap);
  cursor: pointer;
  transition: border-color var(--g-trans);
}
.ld-pool.is-on { border-color: var(--g-accent); border-width: 2px; background: rgba(61, 107, 82, 0.06); }
.ld-pool-ic { font-size: var(--g-font-size-lg); flex-shrink: 0; }
.ld-pool-mid { flex: 1; min-width: 0; }
.ld-pool-nm { font-size: var(--g-font-size-sm); font-weight: 600; color: var(--g-text); display: block; }
.ld-pool-bar {
  height: 4px; background: var(--g-card-hover); border-radius: 2px;
  margin-top: 4px; overflow: hidden;
}
.ld-pool-bar-fill { height: 100%; border-radius: 2px; transition: width .3s ease; }
.ld-pool-bar-fill--accent       { background: var(--g-accent); }
.ld-pool-bar-fill--warn         { background: var(--g-warn); }
.ld-pool-bar-fill--accent-light { background: var(--g-accent-light); }
.ld-pool-bar-fill--blue         { background: var(--g-blue); }
.ld-pool-bar-fill--dim          { background: var(--g-text-dim); }
.ld-pool-bal { font-size: var(--g-font-size-sm); font-weight: 700; color: var(--g-accent); white-space: nowrap; flex-shrink: 0; }
.ld-pool-bal--neg { color: var(--g-red); }

/* 流水汇总三格 */
.ld-dt-head {
  font-size: var(--g-font-size); font-weight: 700; color: var(--g-text);
  margin: var(--g-pad-lg) 0 var(--g-pad-sm);
}
.ld-sum { display: flex; gap: var(--g-gap); margin-bottom: var(--g-pad); }
.ld-sum-cell { flex: 1; text-align: center; border-radius: var(--g-radius-sm); padding: var(--g-pad-sm); }
.ld-sum-cell--in  { background: var(--g-green-bg); }
.ld-sum-cell--out { background: var(--g-red-bg); }
.ld-sum-cell--ok  { background: var(--g-accent-bg); }
.ld-sum-cell--neg { background: var(--g-red-bg); }
.ld-sum-lb  { font-size: var(--g-font-size-micro); color: var(--g-text-dim); }
.ld-sum-val { font-size: var(--g-font-size-lg); font-weight: 700; }
.ld-sum-cell--in  .ld-sum-val { color: var(--g-green); }
.ld-sum-cell--out .ld-sum-val { color: var(--g-red); }
.ld-sum-cell--ok  .ld-sum-val { color: var(--g-accent); }
.ld-sum-cell--neg .ld-sum-val { color: var(--g-red); }

/* 分类汇总 + 流水明细 */
.ld-cat-head, .ld-entry-head {
  font-size: var(--g-font-size-xs); font-weight: 700;
  color: var(--g-text-sub); margin-bottom: var(--g-pad-xs);
}
.ld-cat-row, .ld-entry {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--g-pad-xs) 0;
  border-bottom: 1px solid var(--g-sep);
  font-size: var(--g-font-size-xs);
}
.ld-cat-nm { color: var(--g-text); }
.ld-cat-amt { display: flex; gap: var(--g-pad-xs); flex-shrink: 0; }
.ld-cat-in  { color: var(--g-green); font-weight: 600; }
.ld-cat-out { color: var(--g-red); font-weight: 600; }
.ld-entry-left { display: flex; gap: var(--g-pad-xs); align-items: center; min-width: 0; }
.ld-entry-date { color: var(--g-text-dim); font-size: var(--g-font-size-micro); flex-shrink: 0; }
.ld-entry-note { color: var(--g-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-entry-amt { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.ld-entry-amt--in  { color: var(--g-green); }
.ld-entry-amt--out { color: var(--g-red); }
.ld-empty { text-align: center; padding: var(--g-pad-lg); color: var(--g-text-dim); font-size: var(--g-font-size-xs); }

/* ══ 物品页（item.js）—— 分段横滑卡片 → 详情弹层 ══ */

.it-sections { margin-top: var(--g-pad-sm); }
.it-sec {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none; border: none;
  padding: var(--g-pad-xs) 0;
  font-size: var(--g-font-size-sm); font-weight: 700; cursor: pointer;
}
.it-sec--dim    { color: var(--g-text-dim); }
.it-sec--accent { color: var(--g-accent); }
.it-sec--warn   { color: var(--g-warn); }
.it-sec--green  { color: var(--g-green); }
.it-sec-fold { font-size: var(--g-font-size-xs); }

.it-scroll {
  display: flex; gap: var(--g-gap);
  padding: var(--g-pad-xs) 0 var(--g-pad) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.it-scroll-pad-l { width: 4px; flex-shrink: 0; }
.it-scroll-pad-r { width: var(--g-pad); flex-shrink: 0; }

.it-card {
  position: relative;
  width: 80px; flex-shrink: 0;
  background: var(--g-card);
  border: 1.5px solid var(--g-card-border);
  border-radius: var(--g-radius-sm);
  padding: var(--g-pad-xs);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.it-card-ic { font-size: 1.6rem; line-height: 1; }
.it-card-nm {
  font-size: var(--g-font-size-micro); font-weight: 600;
  line-height: 1.2; max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-card-pr { font-size: var(--g-font-size-micro); color: var(--g-accent); font-weight: 600; }
.it-card-loc {
  font-size: var(--g-font-size-micro); color: var(--g-text-dim);
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-card-qty {
  font-size: var(--g-font-size-micro); color: var(--g-text-sub); font-weight: 600;
}

/* M8 物品卡片增强标记 */
.it-card-acc { position: absolute; top: 4px; right: 4px; font-size: 12px; line-height: 1; }
.it-card-exp { font-size: var(--g-font-size-micro); color: var(--g-text-dim); }
.it-card-exp--warn { color: var(--g-warn); font-weight: 700; }
.it-card-fix { position: absolute; top: 4px; left: 4px; font-size: 12px; line-height: 1; }

/* 物品添加按钮行（已废弃，改用 FAB） */

/* 物品视图切换 tab */
.it-view-tabs {
  display: flex; gap: 4px; padding: var(--g-pad-xs) 0;
  border-bottom: 1px solid var(--g-card-border); margin-bottom: var(--g-pad-xs);
}
.it-view-tab {
  flex: 1; padding: 8px; border: none; border-radius: var(--g-radius-sm);
  background: transparent; color: var(--g-text-dim);
  font-size: var(--g-font-size-sm); font-weight: 600; cursor: pointer;
  font-family: var(--g-font-family);
}
.it-view-tab--icon { flex: 0 0 40px; padding: 8px 0; font-size: 1rem; }
.it-view-tab--on {
  background: var(--g-accent-bg); color: var(--g-accent);
}

/* 物品搜索条 */
.it-search-bar {
  display: flex; gap: 4px; padding: var(--g-pad-xs) 0;
  align-items: center;
}
.it-search-input {
  flex: 1; padding: 8px 12px;
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card); color: var(--g-text);
  font-size: var(--g-font-size-sm); font-family: var(--g-font-family);
  outline: none;
}
.it-search-input:focus { border-color: var(--g-accent); }
.it-search-clear {
  flex: 0 0 32px; height: 32px;
  border: none; border-radius: 50%;
  background: var(--g-card-hover); color: var(--g-text-dim);
  font-size: var(--g-font-size-sm); cursor: pointer;
}

/* 物品浮动添加按钮（左下角拇指区） */
.it-fab {
  position: fixed; bottom: 68px; left: 16px; z-index: 40;  /* 左下角：右下是抽屉柜 tab，放右会挡住 —— 禁改回 right */
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--g-accent); color: #fff;
  font-size: 1.6rem; font-weight: 300; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* 物品详情操作按钮行 */
.it-dt-acts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--g-gap); padding-top: var(--g-gap);
  border-top: 1px solid var(--g-card-border);
}
.it-dt-act {
  padding: 8px 14px; border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card); font-size: var(--g-font-size-xs); font-weight: 600;
  cursor: pointer; font-family: var(--g-font-family);
}
.it-dt-act--accent { color: var(--g-accent); }
.it-dt-act--warn   { color: var(--g-warn); }
.it-dt-act--danger { color: var(--g-red); }
.it-dt-act--ok     { color: var(--g-green); }
.it-dt-act--sub    { color: var(--g-text-sub); }

/* 物品详情弹层 */
.it-dt-body { padding: var(--g-pad); }
.it-dt-top { display: flex; align-items: center; gap: var(--g-pad-sm); margin-bottom: var(--g-gap); }
.it-dt-ic { font-size: 2rem; }
.it-dt-nm { font-size: var(--g-font-size); font-weight: 700; }
.it-dt-meta { font-size: var(--g-font-size-xs); color: var(--g-text-sub); margin-bottom: 4px; }
.it-dt-date { font-size: var(--g-font-size-xs); color: var(--g-text-dim); margin-bottom: var(--g-gap); }
.it-dt-status {
  display: inline-block; font-size: var(--g-font-size-xs); font-weight: 600;
  padding: 3px var(--g-pad-sm); border-radius: var(--g-radius-sm);
}
.it-dt-status--dim    { background: var(--g-card-hover); color: var(--g-text-dim); }
.it-dt-status--accent { background: var(--g-accent-bg); color: var(--g-accent); }
.it-dt-status--warn   { background: var(--g-warn-bg); color: var(--g-warn); }
.it-dt-price { font-size: var(--g-font-size-xl); font-weight: 700; color: var(--g-accent); margin-top: var(--g-gap); }
.it-dt-desc {
  font-size: var(--g-font-size-xs); color: var(--g-text-sub);
  background: var(--g-card-hover); border-radius: var(--g-radius-sm);
  padding: var(--g-pad-sm); margin-top: var(--g-gap); line-height: 1.4;
}
/* U-21 O-29：工作台关闭键（回村口）。旧仓 ✕ 在最左——放左侧与右侧信箱对称。 */
.wb-close {
  position: absolute; top: 8px; left: 8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--g-radius-sm);
  background: var(--g-accent-bg);
  color: var(--g-accent);
  font-size: var(--g-font-size);
  font-weight: 700; cursor: pointer;
  z-index: 21;
}
.wb-close:active { background: var(--g-accent); color: #fff; }
/* U-28 刀2(修正)：工作台外出/位置设置（右侧） */
.wb-presence {
  position: absolute; top: var(--g-gap); right: var(--g-gap);
  min-width: 32px; height: 32px; padding: 0 var(--g-pad-xs);
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--g-radius-sm);
  background: var(--g-card-hover); font-size: var(--g-font-size);
  cursor: pointer; z-index: 21; white-space: nowrap;
}
.wb-presence:active { background: var(--g-accent-bg); }

/* 卡片域组件样式（js/ui-cards.js 用）—— 原在 pages-trade.css，随组件搬来 */
.cr-step-tag {
  display: inline-flex; align-items: center;
  padding: 4px var(--g-pad-sm);
  border-radius: 999px;
  background: var(--g-accent-bg); color: var(--g-accent);
  font-size: var(--g-font-size-micro); font-weight: 700;
  margin-bottom: var(--g-gap);
}
.cr-disc-hint { font-size: var(--g-font-size-xs); color: var(--g-text-sub); line-height: 1.5; margin-bottom: var(--g-gap); }
.cr-disc-q { font-size: var(--g-font-size-sm); font-weight: 700; color: var(--g-text); margin-bottom: var(--g-gap); }
.cr-tip {
  font-size: var(--g-font-size-micro); color: var(--g-text-sub);
  background: var(--g-card-hover); padding: var(--g-pad-xs) var(--g-pad-sm);
  border-radius: var(--g-radius-sm); margin-bottom: var(--g-gap);
}
.cr-step-acts { display: flex; gap: var(--g-gap); margin-top: var(--g-gap); }
.cr-step-pri {
  flex: 1; min-height: 44px;
  border: 0; border-radius: var(--g-radius-sm);
  background: var(--g-accent); color: var(--g-text-on-dark);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 700; cursor: pointer;
}
.cr-step-sec {
  flex: 1; min-height: 44px;
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card); color: var(--g-text-sub);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 600; cursor: pointer;
}
.cr-empty { text-align: center; padding: var(--g-pad); font-size: var(--g-font-size-xs); color: var(--g-text-dim); }
.cr-bld-tabs {
  display: flex; gap: var(--g-gap);
  margin-bottom: var(--g-gap-lg);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cr-bld-tab {
  flex-shrink: 0;
  padding: var(--g-gap) var(--g-pad);
  border: 1.5px solid var(--g-card-border); border-radius: 999px;
  background: var(--g-card); color: var(--g-text-sub);
  font-family: inherit; font-size: var(--g-font-size-tiny); cursor: pointer;
}
.cr-bld-tab.is-on { border-color: var(--g-accent); background: var(--g-accent); color: var(--g-text-on-dark); font-weight: 600; }
.cr-rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--g-gap); }
.cr-room {
  display: flex; align-items: center; gap: var(--g-gap);
  padding: var(--g-pad-sm);
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-tiny); font-weight: 600; cursor: pointer;
  text-align: left;
}
.cr-room:active { background: var(--g-card-hover); }
.cr-note {
  width: 100%; box-sizing: border-box; min-height: 64px;
  padding: var(--g-pad-sm);
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-sm); resize: vertical;
  margin-bottom: var(--g-gap);
}
.cr-note::placeholder { color: var(--g-text-muted); }
.cr-people { display: flex; flex-direction: column; gap: var(--g-gap); margin-bottom: var(--g-gap); }
.cr-person {
  display: flex; align-items: center;
  padding: var(--g-pad-sm);
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 600; cursor: pointer;
  text-align: left;
}
.cr-person:active { background: var(--g-card-hover); }
.cr-grp {
  margin: var(--g-gap-lg) 0 var(--g-gap);
  font-size: var(--g-font-size-tiny); font-weight: 700; color: var(--g-accent);
}
.cr-lr-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-gap);
  width: 100%; padding: var(--g-pad-sm);
  margin-bottom: var(--g-gap);
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 600; cursor: pointer;
  text-align: left;
}
.cr-lr-row:active { background: var(--g-card-hover); }
.cr-lr-nt {
  flex-shrink: 0;
  color: #8a6a20;
  font-size: var(--g-font-size-xs); font-weight: 700;
}
.cr-lr-custom {
  width: 100%; padding: var(--g-pad-sm);
  margin: var(--g-gap) 0;
  border: 1px dashed var(--g-card-border); border-radius: var(--g-radius-sm);
  background: var(--g-card-hover); color: var(--g-text-sub);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 600; cursor: pointer;
}
.cr-lr-back {
  border: 0; background: none; padding: 4px;
  font-family: inherit; font-size: var(--g-font-size-xs); font-weight: 600;
  color: var(--g-accent); cursor: pointer;
}
.cr-ev-warn { font-size: var(--g-font-size-xs); color: var(--g-red); font-weight: 600; margin-bottom: var(--g-gap); }
.cr-ev-input {
  width: 100%; box-sizing: border-box;
  padding: var(--g-pad-sm);
  border: 1px solid var(--g-red); border-radius: var(--g-radius-sm);
  background: var(--g-card); color: var(--g-text);
  font-family: inherit; font-size: var(--g-font-size-sm);
  margin-bottom: var(--g-gap);
}
.cr-lr-vol {
  display: flex; align-items: center; gap: var(--g-gap);
  margin: var(--g-gap) 0;
  padding: var(--g-pad-sm);
  background: #f0f7f0;
  border-radius: var(--g-radius-sm);
  font-size: var(--g-font-size-xs); color: var(--g-accent-dark); cursor: pointer;
}
.cr-lr-vol input { width: 16px; height: 16px; accent-color: var(--g-accent); cursor: pointer; }
.cr-rules-line {
  font-size: var(--g-font-size-xs); color: var(--g-text-sub);
  line-height: 1.8;
}
.cr-rules-line + .cr-rules-line { margin-top: 4px; }
.wb-topbar { padding-left: 48px; }  /* 给左侧 ✕ 让位，头像右移（旧仓同款布局） */

/* 统一牌面样式（pk-*，校核室 + 卡片室共用）—— 原 verify.css vf-* 提升 */
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-gap); }
.pk-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: 130px;
  background: #fffdf9;
  border: 1.5px solid #c8c0b0;
  border-radius: var(--g-radius-sm);
  padding: var(--g-pad-sm) var(--g-pad-xs);
  box-shadow: var(--g-shadow-sm);
  text-align: center; cursor: pointer;
}
.pk-card--gold {
  border: 2px solid var(--g-warn);
  box-shadow: 0 2px 12px rgba(200, 135, 64, .25);
}
.pk-card--ok { background: #f8fcf6; border-color: #a0c8a0; }
.pk-card--no { background: #fafafa; border-color: #e0e0e0; }
.pk-card-suit {
  position: absolute; top: 4px; left: 4px;
  font-size: var(--g-font-size-micro); font-weight: 700; color: var(--g-text-dim);
}
.pk-card-mark { position: absolute; top: 4px; right: 4px; font-size: var(--g-font-size-micro); }
.pk-card-nt {
  position: absolute; bottom: 4px; right: 4px;
  font-size: var(--g-font-size-micro); font-weight: 700;
  color: var(--g-warn);
}
.pk-card--ok .pk-card-nt, .pk-card--no .pk-card-nt { color: #8a6a20; }
.pk-card-ic { font-size: 1.8rem; line-height: 1; margin-top: 16px; }
.pk-card-doer {
  color: #1d2e24;
  font-size: var(--g-font-size-xs); font-weight: 700;
  margin-top: 4px;
}
.pk-card-act {
  font-size: var(--g-font-size-micro); color: var(--g-text-sub);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-card-tag {
  font-size: var(--g-font-size-micro);
  background: var(--g-green-bg); color: var(--g-green);
  border-radius: 999px; padding: 4px 8px; margin-top: 4px;
}
.pk-card-time { font-size: var(--g-font-size-micro); color: var(--g-text-dim); margin-top: 4px; }
.pk-card-open {
  font-size: var(--g-font-size-micro); color: var(--g-accent);
  margin-top: 4px; font-weight: 600;
}

/* CardSheet 弹层内部样式（js/ui-cards.js UI.CardSheet 用） */
.cr-cs-preview { text-align: center; padding: var(--g-pad) 0; }
.cr-cs-suit { font-size: var(--g-font-size-xs); color: var(--g-text-dim); }
.cr-cs-ic { font-size: 2.4rem; line-height: 1.2; margin: 8px 0; }
.cr-cs-title { font-size: var(--g-font-size-m); font-weight: 700; color: var(--g-text); }
.cr-cs-place { font-size: var(--g-font-size-xs); color: var(--g-text-sub); margin-top: 4px; }
.cr-cs-nt { font-size: var(--g-font-size-xs); color: var(--g-warn); margin-top: 4px; font-weight: 600; }
.cr-cs-revealed { text-align: center; padding: var(--g-pad); color: var(--g-green); font-weight: 600; }
.cr-cs-guessed { text-align: center; padding: var(--g-pad); color: var(--g-warn); }
.cr-cs-search { display: flex; gap: var(--g-gap); margin-top: var(--g-pad); }
.cr-cs-search .wb-fs-input { flex: 1; }
.cr-cs-list { margin-top: var(--g-gap); max-height: 240px; overflow-y: auto; }
.cr-cs-list .cr-person {
  display: flex; align-items: center; gap: var(--g-gap);
  padding: 8px var(--g-pad-sm);
  border-bottom: 1px solid var(--g-border);
  cursor: pointer;
}
.cr-cs-list .cr-person:active { background: var(--g-accent-bg); }