/*
  客诉闭环控制台 —— 精密仪表盘。

  设计前提：这是个每天盯几小时、每一步都牵扯真钱和不可撤销操作的工具。
  所以不追求花哨，追求「一眼看得准」：
    · 颜色只做信号，不做装饰。绿=核对通过，琥珀=待办/存疑，赤=会写入/危险。
      除此之外全是墨色和纸色——任何一处多余的彩色都会稀释信号。
    · 所有数字等宽对齐（tabular-nums），金额、时间、ID 上下扫一眼就能比对。
    · 用发丝线分区，不靠阴影和圆角堆叠——密度高的界面里，盒子套盒子最先垮掉。
    · 小标签配大数字，靠字号和字重拉层级，而不是靠颜色。
*/

:root {
  color-scheme: light dark;

  /* 纸与墨：暖白偏灰，长时间看不刺眼 */
  --paper:     #f7f6f3;
  --surface:   #ffffff;
  --sunken:    #f1efec;
  --ink:       #191a17;
  --ink-2:     #55534e;
  --ink-3:     #8b8880;
  --rule:      #e0ddd6;
  --rule-firm: #c9c5bc;

  /* 信号色。只有这三个，且各自只表达一件事 */
  --ok:      #0f6f52;   /* 核对通过 / 支付成功 */
  --ok-bg:   #e8f3ee;
  --warn:    #9a5b00;   /* 待办 / 存疑 / 未支付 */
  --warn-bg: #fbf0df;
  --risk:    #a52a2a;   /* 会写入 / 破坏性 / 失败 */
  --risk-bg: #fbeceb;

  /* 交互色，克制使用 */
  --act:     #2b4a8b;
  --act-bg:  #e9eef8;

  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #16171a;
    --surface:   #1d1f23;
    --sunken:    #121316;
    --ink:       #e9e7e2;
    --ink-2:     #a8a49c;
    --ink-3:     #706d66;
    --rule:      #2c2e33;
    --rule-firm: #3d4046;
    --ok: #4fbf95;   --ok-bg: #12291f;
    --warn: #d69a3c; --warn-bg: #2a2011;
    --risk: #e0736c; --risk-bg: #2c1615;
    --act: #7ba2e8;  --act-bg: #182236;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* 数字、ID、单号一律等宽，便于纵向比对 */
.mono, .num, code, pre { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 微标签：小、大写、宽字距。用来标注而不是喧宾夺主 */
.micro {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}

/* ══════════ 左侧固定导航 ══════════ */
.rail {
  position: sticky; top: 0; align-self: flex-start;
  width: 216px; height: 100vh; flex: none;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--rule);
}
.rail-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--rule);
}
.rail-mark {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg);
}
.rail-name { font-weight: 700; letter-spacing: .04em; }

.rail-nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; }
.rail-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px;
  border: none; border-radius: 5px; background: none;
  color: var(--ink-2); font: inherit; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.rail-item:hover { background: var(--sunken); color: var(--ink); }
.rail-item.active { background: var(--act-bg); color: var(--act); font-weight: 600; }
.rail-count {
  min-width: 20px; padding: 0 6px; border-radius: 9px;
  background: var(--sunken); border: 1px solid var(--rule);
  font: 600 11px/17px var(--mono); text-align: center; color: var(--ink-2);
}
.rail-count.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.rail-count.zero { opacity: .38; }

.rail-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--rule); }
.daemon-state { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.dot.off { background: var(--risk); box-shadow: 0 0 0 3px var(--risk-bg); }
.daemon-note { margin: 6px 0 10px; font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.daemon-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.daemon-interval {
  display: flex; align-items: center; gap: 5px;
  margin-top: 9px; font-size: 11px; color: var(--ink-3);
}
.daemon-interval input {
  width: 54px; padding: 3px 6px; font: inherit; font-family: var(--mono);
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--sunken); color: var(--ink);
}

/* ══════════ 按钮 ══════════ */
.btn {
  padding: 6px 13px; font: 500 13px var(--sans);
  border: 1px solid var(--rule-firm); border-radius: 5px;
  background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.btn:hover:not(:disabled) { border-color: var(--act); color: var(--act); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.xs { padding: 4px 8px; font-size: 11px; }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn.primary { background: var(--act); border-color: var(--act); color: #fff; }
.btn.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.1); }
.btn.danger { background: var(--risk); border-color: var(--risk); color: #fff; }
.btn.danger:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-3); }
.btn.ghost:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
.btn .sub { display: block; font-size: 10px; font-weight: 400; opacity: .75; margin-top: 1px; }

/* ══════════ 主舞台 ══════════ */
.stage { flex: 1; min-width: 0; padding: 0 0 80px; }

/* 记分板：最上面就是"脚本干了多少活" */
.scoreboard {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.score { padding: 15px 18px; border-right: 1px solid var(--rule); }
.score:last-child { border-right: none; }
.score-num { font: 600 25px/1.15 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.score.hero { background: var(--ok-bg); }
.score.hero .score-num { font-size: 33px; color: var(--ok); }
.score-label { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.score-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

/* ══════════ 面板 ══════════ */
.panel { display: none; padding: 22px 24px; }
.panel.active { display: block; animation: rise .22s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
.panel-head { margin-bottom: 18px; }
.panel-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.panel-head p { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }

.empty {
  padding: 52px; text-align: center; color: var(--ink-3); font-size: 13px;
  border: 1px dashed var(--rule-firm); border-radius: 8px; background: var(--surface);
}

/* ══════════ 案子卡片 ══════════ */
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; margin-bottom: 16px; overflow: hidden;
}
.card.stale { border-left: 3px solid var(--warn); }

.card-top {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--sunken);
}
.uid { font: 700 15px var(--mono); letter-spacing: -.01em; }
.card-top .dev { font-size: 11px; color: var(--ink-3); }
.card-top .spacer { flex: 1; }
.card-top .age { font-size: 11px; color: var(--ink-3); }

.chip {
  padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--rule-firm); color: var(--ink-2); background: var(--surface);
}
.chip.ok   { color: var(--ok);   border-color: var(--ok);   background: var(--ok-bg); }
.chip.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.chip.risk { color: var(--risk); border-color: var(--risk); background: var(--risk-bg); }
.chip.act  { color: var(--act);  border-color: var(--act);  background: var(--act-bg); }

.why {
  padding: 9px 16px; font-size: 12.5px; color: var(--warn);
  background: var(--warn-bg); border-bottom: 1px solid var(--rule);
}

/* 对话 */
.thread { max-height: 400px; overflow-y: auto; padding: 14px 16px;
  border-bottom: 1px solid var(--rule); }
.thread.empty-thread { text-align: center; color: var(--ink-3); font-size: 12px; padding: 22px; }
.msg-row { margin-bottom: 11px; display: flex; flex-direction: column; }
.msg-row.service { align-items: flex-end; }
.msg-who { font-size: 10px; color: var(--ink-3); margin-bottom: 2px; letter-spacing: .04em; }
.msg-ts { margin-left: 6px; opacity: .7; font-family: var(--mono); }
.msg-body {
  max-width: 74%; padding: 7px 11px; border-radius: 8px;
  background: var(--sunken); border: 1px solid var(--rule);
  white-space: pre-wrap; word-break: break-word; font-size: 13px;
}
.msg-row.service .msg-body { background: var(--act-bg); border-color: var(--act); }
img.shot {
  max-width: 190px; max-height: 230px; border-radius: 5px; display: block;
  border: 1px solid var(--rule-firm); cursor: zoom-in;
}

/* 分区：每个操作区一个标题条 */
.zone { border-bottom: 1px solid var(--rule); }
.zone:last-of-type { border-bottom: none; }
.zone-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--sunken); border-bottom: 1px solid var(--rule);
}
.zone-head .hint { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.zone.risk .zone-head { background: var(--risk-bg); }
.zone.risk .zone-head .micro { color: var(--risk); }
.zone-body { padding: 11px 16px; }
.zone-body.tight { padding: 0; }

/* 表格：发丝线，无斑马纹，靠对齐说话 */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  padding: 7px 10px; text-align: left; font-weight: 600; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-firm); white-space: nowrap;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.scroll-x { overflow-x: auto; }
.num-cell { font-family: var(--mono); }

/* 候选行 */
.cand.bad { opacity: .5; }
.cand.bad td { background: repeating-linear-gradient(45deg,
  transparent, transparent 5px, var(--risk-bg) 5px, var(--risk-bg) 10px); }
.cand.picked td { background: var(--act-bg); }
.cand-ops { white-space: nowrap; }
.cand-ops .btn { margin-right: 4px; }
.full-hit td { background: var(--ok-bg); }

/* 话术库 */
.reply-bar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.qr-panel { border: 1px solid var(--act); border-radius: 6px; overflow: hidden; margin-bottom: 9px; }
.qr-search {
  width: 100%; padding: 9px 12px; border: none; border-bottom: 1px solid var(--rule);
  background: var(--sunken); color: var(--ink); font: inherit; outline: none;
}
.qr-list { max-height: 300px; overflow-y: auto; }
.qr-item { padding: 9px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.qr-item:hover { background: var(--act-bg); }
.qr-when { font-size: 11px; font-weight: 700; color: var(--act); margin-bottom: 2px; }
.qr-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.qr-empty { padding: 18px; text-align: center; color: var(--ink-3); font-size: 12px; }

textarea.reply {
  width: 100%; min-height: 76px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--rule-firm); border-radius: 6px;
  background: var(--sunken); color: var(--ink); resize: vertical;
}
textarea.reply:focus { outline: none; border-color: var(--act); background: var(--surface); }
.act-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.act-bar .src { margin-left: auto; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }

/* 表单行 */
.frow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.frow label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-3); }
.frow input[type=text], .frow input:not([type]) {
  padding: 5px 8px; font: inherit; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--rule-firm); border-radius: 5px;
  background: var(--surface); color: var(--ink); width: 168px;
}
.frow input.narrow { width: 82px; }
.frow .inline { flex-direction: row; align-items: center; gap: 6px; }

/* 飞书登记 */
.fs-step { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; flex-wrap: wrap; }
.fs-step + .fs-step { border-top: 1px dashed var(--rule); }
.fs-n {
  flex: none; width: 17px; height: 17px; border-radius: 50%; margin-top: 2px;
  background: var(--risk); color: #fff; font: 700 10px/17px var(--mono); text-align: center;
}
.fs-body { flex: 1; min-width: 220px; }
.fs-shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.fs-shot { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.fs-shot img { max-width: 78px !important; max-height: 92px !important; }
.fs-recap {
  font-size: 12px; padding: 6px 10px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--rule-firm); font-family: var(--mono);
}
.fs-recap b { color: var(--act); }
.fs-done { margin-top: 8px; padding: 6px 10px; border-radius: 5px;
  background: var(--ok-bg); color: var(--ok); font-size: 12px; }
.fs-none { padding: 8px 10px; border-radius: 5px; background: var(--risk-bg);
  color: var(--risk); font-size: 12px; }

/* 订单查询 */
.order-search { display: flex; gap: 9px; margin-bottom: 18px; }
.order-search input {
  flex: 1; max-width: 320px; padding: 9px 13px; font: inherit;
  font-family: var(--mono); border: 1px solid var(--rule-firm);
  border-radius: 6px; background: var(--surface); color: var(--ink);
}
.order-search input:focus { outline: none; border-color: var(--act); }
.osum { display: flex; gap: 22px; flex-wrap: wrap; padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px 8px 0 0; border-bottom: none; }
.osum div { font-size: 11px; color: var(--ink-3); }
.osum b { display: block; font: 600 19px var(--mono); color: var(--ink); }
.otable { background: var(--surface); border: 1px solid var(--rule); border-radius: 0 0 8px 8px; }
.price-was { color: var(--ink-3); text-decoration: line-through; font-size: 11px; }
.price-now { font-weight: 700; }
.save { color: var(--ok); font-weight: 600; }

.grid-wrap { background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; overflow-x: auto; }

pre.mono {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  padding: 14px 16px; font-size: 12px; white-space: pre-wrap;
  max-height: 560px; overflow: auto;
}
details summary { cursor: pointer; color: var(--ink-3); font-size: 12px; padding: 4px 0; }

/* 灯箱 / 提示 */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none; padding: 26px;
  background: rgba(12,12,10,.9); align-items: center; justify-content: center; cursor: zoom-out;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 95vw; max-height: 94vh; object-fit: contain; }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 300;
  transform: translateX(-50%) translateY(14px);
  padding: 10px 18px; border-radius: 6px; font-size: 13px;
  background: var(--ink); color: var(--paper);
  opacity: 0; pointer-events: none; transition: .2s; max-width: 76vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--risk); color: #fff; }

.ok-t { color: var(--ok); } .warn-t { color: var(--warn); } .risk-t { color: var(--risk); }
.dim { color: var(--ink-3); }

@media (max-width: 900px) {
  body { flex-direction: column; }
  .rail { width: 100%; height: auto; position: static; flex-direction: row;
    flex-wrap: wrap; align-items: center; }
  .rail-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .rail-foot { margin: 0; border-top: none; border-left: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ══════════ 队列双栏：宽屏放两条案子并排处理 ══════════ */
/* 卡片高度差异很大，所以用 grid + align-items:start，每列各自贴顶排，
   不会因为邻居很长而拉出大片空白。auto-fill 让它自己决定几栏。 */
.queue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  align-items: start;
  gap: 16px;
}
.queue .card { margin-bottom: 0; }

/* 并排时对话窗口矮一点，两栏才好对照着看 */
@media (min-width: 1280px) { .queue .thread { max-height: 320px; } }
@media (max-width: 1279px) { .queue { grid-template-columns: 1fr; } }

.view-ctl { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.view-ctl .btn.on { background: var(--act); border-color: var(--act); color: #fff; }
.queue.cols-1 { grid-template-columns: 1fr; }
.queue.cols-1 .thread { max-height: 400px; }


/* ══════════ 面板头部：下滑收起，上滑/停下露出 ══════════ */
/* 标题+筛选条占了近 200px，翻队列时纯占地方；
   但筛选是常用的，不能直接删掉——所以按滚动方向动态收放：
   下滑时让位给内容，上滑或停下立刻回来。上滑一律显示（用户在往回找东西）。*/
.panel-bar {
  position: sticky;
  top: var(--sb-h, 86px);
  z-index: 15;
  background: var(--paper);
  padding: 14px 0 12px;
  margin: -22px 0 14px;
  border-bottom: 1px solid var(--rule);
  transition: transform .2s ease, opacity .2s ease;
  will-change: transform;
}
.panel-bar.tucked {
  transform: translateY(calc(-100% - var(--sb-h, 86px)));
  opacity: 0;
  pointer-events: none;
}
.panel-bar .panel-head { margin-bottom: 12px; }
.panel-bar .view-ctl { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .panel-bar { transition: none; } }

/* ══════════ 折叠区块：标题栏本身就是开关 ══════════ */
/* 卡片默认只留「对话 + 回复」，工具全收起。
   标题里写清里面有什么、有几条，不用点开就知道值不值得点。 */
.zone > summary.zone-head {
  cursor: pointer; list-style: none;
  user-select: none; transition: background .12s;
}
.zone > summary.zone-head::-webkit-details-marker { display: none; }
.zone > summary.zone-head::before {
  content: "▸"; flex: none; margin-right: 2px;
  color: var(--ink-3); font-size: 9px; transition: transform .15s;
}
.zone[open] > summary.zone-head::before { transform: rotate(90deg); }
.zone > summary.zone-head:hover { background: var(--rule); }
.zone.risk > summary.zone-head:hover { background: var(--risk-bg); filter: brightness(.97); }
/* 折叠标题里的说明文字：收起时截断成一行，不撑高卡片 */
.zone > summary.zone-head .hint {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.zone[open] > summary.zone-head .hint { white-space: normal; }
/* 带风险的区块，标题左侧留一道竖线，收起时也看得出轻重 */
.zone.risk > summary.zone-head { border-left: 3px solid var(--risk); }
.zone.warn > summary.zone-head { border-left: 3px solid var(--warn); }

/* SOP 决策条：按候选数直接说下一步该干嘛，不用人回想规则 */
.sop-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 14px; font-size: 12.5px; border-bottom: 1px solid var(--rule);
}
.sop-bar.ok   { background: var(--ok-bg);   color: var(--ok); }
.sop-bar.warn { background: var(--warn-bg); color: var(--warn); }
.sop-bar.risk { background: var(--risk-bg); color: var(--risk); }
.sop-bar b { font-family: var(--mono); font-size: 14px; }

/* 登录人 */
.rail-me { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.me-name { font-size: 13px; font-weight: 600; }
.me-role { font-size: 10.5px; color: var(--ink-3); }

/* 守护进程异常（degraded/error/超时未跑/进程已死）：整块标红，
   detail 和连败轮数就在这里，必须一眼看到，不能藏在正常灰字里 */
.daemon.alert { border: 1px solid var(--risk); background: var(--risk-bg);
  border-radius: 8px; padding: 9px; }

/* 上轮拟发审阅视图：全文必须能展开看完整，截断的拟发内容没法审 */
.dry-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px;
  font-size: 12.5px; background: var(--warn-bg);
  border: 1px solid var(--warn); border-radius: 8px; }
.dry-item { background: var(--surface); border: 1px solid var(--rule);
  border-radius: 6px; margin-bottom: 6px; }
.dry-item > summary { padding: 8px 12px; cursor: pointer; font-size: 12.5px;
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dry-item .dry-full { margin: 0; border: none; border-top: 1px solid var(--rule);
  border-radius: 0; white-space: pre-wrap; word-break: break-word; }
.dry-meta { font-size: 11px; padding: 6px 12px; }

/* 审计筛选输入框 */
.audit-flt { padding: 4px 8px; font: inherit; font-size: 12px; width: 170px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--surface); color: var(--ink); }

/* ══════════ 实时推送指示：绿=已连接，黄=重连中 ══════════ */
.live { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.live-t { font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
.rail-me .me-acts { display: flex; gap: 4px; flex: none; }

/* ══════════ 弹窗：改密 / 强制首登改密 ══════════ */
/* 遮罩必须盖住并吞掉所有点击（z-index 高于灯箱），强制改密时不给任何点穿的路 */
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(12, 12, 10, .55);
}
.modal[hidden] { display: none; }
.modal-box {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--rule-firm);
  border-radius: 10px; padding: 20px 22px;
}
.modal-box h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
.modal-hint { margin: 0 0 14px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.modal-box .field-l { display: block; margin-bottom: 12px; font-size: 11px;
  letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.modal-box .field-l input {
  width: 100%; margin-top: 4px; padding: 8px 11px; font: 14px var(--sans);
  border: 1px solid var(--rule-firm); border-radius: 6px;
  background: var(--sunken); color: var(--ink);
}
.modal-box .field-l input:focus { outline: none; border-color: var(--act); background: var(--surface); }
.modal-acts { display: flex; gap: 8px; margin-top: 14px; }
.modal-acts .btn { flex: 1; }
.modal-err { margin-top: 12px; padding: 8px 11px; border-radius: 5px;
  background: var(--risk-bg); color: var(--risk); font-size: 12.5px; }
/* 强制改密：取消按钮直接不渲染进流程 */
.modal.force #pw-cancel { display: none; }

/* ══════════ 账号管理 ══════════ */
.acct-new { padding: 13px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.acct-new select {
  padding: 5px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--rule-firm); border-radius: 5px;
  background: var(--surface); color: var(--ink);
}
.acct-brief { padding: 12px 16px; margin-bottom: 14px;
  background: var(--ok-bg); border: 1px solid var(--ok); border-radius: 8px; }
.acct-brief pre { margin: 6px 0 8px; border-color: var(--rule); }
.acct-self { font-size: 10.5px; color: var(--ink-3); }

/* ══════════ 协作归属：徽章 + 移交弹层 + 筛选 ══════════ */
/* 徽章只做信号，不抢卡片信息的戏：灰=没人认领，绿=在我名下，蓝=在同事名下。
   全部沿用既有信号 token（--ok/--act），不引新颜色。 */
.owner-box { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip.owner.unclaimed { color: var(--ink-3); background: var(--sunken); border-style: dashed; }
.chip.owner.mine  { color: var(--ok);  border-color: var(--ok);  background: var(--ok-bg); }
.chip.owner.other { color: var(--act); border-color: var(--act); background: var(--act-bg); }
/* 移交弹层：贴在卡片头下面的一条。临时菜单，重渲染即消失，不进 SCENE 快照；
   [hidden] 收起靠浏览器默认 display:none，这里不许写 display 把它顶掉 */
.assign-panel { padding: 9px 16px; background: var(--sunken); border-bottom: 1px solid var(--rule); }
.assign-panel .assign-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }