/* ============================================================
   polish-2.css · 覆盖层第二批（C2.57 之后新增的条目）
   ------------------------------------------------------------
   为什么要拆：polish.css 已经攒到 400 行红线，按「后加的往后放」切开，
   本文件在 polish.css 之后加载，层叠顺序与拆分前完全一致。
   新增样式默认往这里加；如果这里也快满 400 行，再按主题开 polish-3.css。
   ============================================================ */

/* ---------- 19) 每日产出：报表自己的时间维度 + 区间合计（C2.57） ---------- */
/* 卡片头右侧：粒度 seg + 区间下拉，跟标题同一行，中间用 .sp 撑开 */
.card .ch .sp{flex:1 1 auto;min-width:8px}
#act-grain .seg-b{font-size:12.5px;padding:5px 11px}
/* 全局 input/select 是 width:100%，放到卡片头上会撑满整行、把下拉挤到第二行 */
#dash-range-sel{width:auto;flex:0 0 auto;min-width:112px;
  font-size:13px;padding:5px 30px 5px 10px;height:auto}
.card .ch .hint{flex:0 1 auto;min-width:0}
/* 图下一行合计：直接读具体数，不用去数柱子。
   C2.90：原来是带边框 + 浅底 + 圆角的「横条」，数字还放大到 18px 抢眼；
   现在改成图上沿一条细线下的一行普通字，和概况顶部同一套语言。 */
.act-sum{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--txt2)}
.act-sum span{display:inline-flex;align-items:baseline;gap:6px}
.act-sum i{font-style:normal;font-size:12.5px;color:var(--txt3)}
.act-sum b{font-size:14px;font-weight:650;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1.2}
.act-sum em{font-style:normal;font-size:12px;color:var(--txt3)}
.act-sum .act-span{margin-left:auto;font-size:12px;color:var(--txt3);font-variant-numeric:tabular-nums}

/* ---------- 20) 广告账户：待登记提醒 + 最近登记金额 + 删除（C2.58） ---------- */
/* 侧栏角标：欠几笔登记，直接一个数字挂在「广告账户」上 */
.navi-badge{font-style:normal;margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  background:var(--amber-d,#fdf3df);color:var(--amber,#b7791f);border:1px solid var(--line-amber,#f0d9a8)}
.navi-badge.hot{background:var(--red-d);color:var(--red);border-color:var(--line-red)}
.navi-badge[hidden]{display:none}
.navi .stag+.navi-badge{margin-left:6px}

/* 提醒条：今天该登记还没登记 */
.remind-bar{display:flex;align-items:center;gap:11px;margin:0 0 13px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line-amber);background:var(--amber-d)}
.remind-bar.danger{border-color:var(--line-red);background:var(--red-d)}
.remind-bar .rb-ic{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:800;background:var(--amber);color:#fff}
.remind-bar.danger .rb-ic{background:var(--red)}
.remind-bar .rb-txt{min-width:0}
.remind-bar .rb-txt b{display:block;font-size:14px;font-weight:650;color:var(--txt)}
.remind-bar .rb-txt span{display:block;font-size:12.5px;color:var(--txt2);margin-top:2px}

/* 卡片底部：最近登记的日期 + 金额（金额要一眼看见） */
.ad-card-f{display:flex;align-items:center;gap:8px}
.ad-log{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.ad-log i{font-style:normal;font-size:12px;color:var(--txt3);white-space:nowrap}
.ad-log b{font-size:14px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.ad-log.today b{color:var(--green)}
.ad-log.never i{color:var(--amber)}
.ad-del{opacity:0;transition:opacity .14s}
.ad-card:hover .ad-del,.ad-card:focus-within .ad-del{opacity:1}
@media (hover:none){.ad-del{opacity:1}}

/* 删除确认弹窗里的事实清单 */
.del-lead{margin:0 0 10px;font-size:13.5px;color:var(--txt2);line-height:1.6}
.del-lead b{color:var(--red)}
.del-facts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.del-facts span{flex:1 1 120px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.del-facts i{display:block;font-style:normal;font-size:11.5px;color:var(--txt3)}
.del-facts b{display:block;font-size:15px;font-weight:700;color:var(--txt);margin-top:2px;font-variant-numeric:tabular-nums}

/* 详情页备注（C2.67）：一行淡字，不再用带框的整块卡片抢视线 */
.acct-note{margin-top:3px;font-size:12.5px;color:var(--txt3);line-height:1.5}

/* ---------- 21) 矩阵密度：三档并列（C2.60） ---------- */
/* 舒适 / 紧凑 / 超紧凑 三个都摆在卡头，当前档高亮；不再靠猜「下一档」 */
.mx-density{flex:0 0 auto}
.mx-density .seg-b{font-size:12.5px;padding:5px 12px;white-space:nowrap}
.mx-density .seg-b.on{background:var(--brand-d);color:var(--brand);font-weight:650}

/* ---------- 22) 看板卡的分段（递进）标识（C2.62） ---------- */
/* 和奖励同一套金色语汇：分段 = 冲满能多拿，扫一眼就知道这任务有几段 */
.bd-stage{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:650;letter-spacing:.2px;
  color:#8a6410;background:rgba(242,198,109,.22);border:1px solid rgba(200,150,40,.3)}
html[data-theme="dark"] .bd-stage{color:#ffd479;background:rgba(255,196,92,.12);border-color:rgba(255,196,92,.3)}

/* ---------- 23) 卡片头的解释文案收进「?」图标（C2.63，C2.79 提到公共层） ---------- */
/* 长解释常驻会让页面显得信息过载：默认只留一个圆圈问号，悬停/键盘聚焦才浮出说明 */
.help-q{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);
  color:var(--txt3);cursor:help;outline:none;transition:color .12s,border-color .12s,background .12s}
.help-q i{font-style:normal;font-size:11.5px;font-weight:800;line-height:1;transform:translateY(-.5px)}
.help-q:hover,.help-q:focus-visible,.help-q:focus{color:var(--brand);border-color:var(--brand);background:var(--brand-d)}
.help-q-tip{position:absolute;top:calc(100% + 9px);left:-6px;width:330px;max-width:56vw;
  padding:9px 11px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);
  box-shadow:0 10px 28px rgba(16,24,40,.14);font-size:12.5px;line-height:1.6;color:var(--txt2);
  text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s,transform .12s,visibility .12s;
  z-index:60;pointer-events:none}
/* 小三角，指回问号 */
.help-q-tip::before{content:"";position:absolute;top:-5px;left:12px;width:8px;height:8px;
  background:var(--panel);border-left:1px solid var(--line2);border-top:1px solid var(--line2);
  transform:rotate(45deg)}
.help-q:hover .help-q-tip,.help-q:focus .help-q-tip,.help-q:focus-visible .help-q-tip{
  opacity:1;visibility:visible;transform:translateY(0)}

/* ---------- 24) 侧栏左下角重排（C2.64） ---------- */
/* 名字/登录账号/状态/版本 → 深浅色（整行按钮）→ 字号三档 → 退出（最底部）
   原则：凡是能点的都做成按钮长相，不再用裸文字 */
/* 整行按钮：深浅色 / 退出 */
.side-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:32px;
  border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:var(--txt2);
  font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.side-btn:hover{border-color:var(--brand);color:var(--txt);background:var(--hover)}
.side-btn.logout{color:var(--txt2)}
.side-btn.logout:hover{color:var(--red);border-color:var(--line-red);background:var(--red-d)}
/* 字号三档：标签 + 均分三段 */
.side-zoom{display:flex;align-items:center;gap:8px}
.side-zoom-label{flex:0 0 auto;font-size:11.5px;color:var(--txt3)}
.side-zoom .seg{flex:1;display:flex;min-width:0}
.side-zoom .seg-b{flex:1;height:30px;padding:0;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.side-zoom .seg-b.on{background:var(--brand-d);color:var(--brand);font-weight:700}
/* 登录页也复用同一颗切换按钮：那里不需要占满整行 */
.login-theme .side-btn{width:auto;height:30px;padding:0 12px;font-size:12px}

/* ---------- 25) 每日产出：自定义日期范围（C2.69；滑块与明细表已在 C2.84/C2.85 下线，选日期样式曲线卡还在用） ---------- */
.act-range{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.act-dates{display:inline-flex;align-items:center;gap:6px}
/* 全局 input 是 width:100%，这里必须收回自适应，否则卡头被撑爆 */
.act-dates input[type="date"]{width:auto;min-width:132px;height:30px;padding:0 8px;font-size:12.5px}

/* 区间内一条记录都没有时，图不用占满 330px，别让人以为是画坏了 */
.trend-chart.is-empty{height:120px;display:flex;align-items:center;justify-content:center}

/* ---------- 26) 成员表「入职时间」：做成能看出可点的小胶囊（C2.71） ---------- */
.hire-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;
  border:1px solid var(--line2);border-radius:6px;background:var(--panel);
  font-size:12.5px;color:var(--txt2);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:border-color .12s,color .12s,background .12s}
.hire-chip i{font-style:normal;font-size:11px;color:var(--txt3);padding-left:6px;border-left:1px solid var(--line)}
.hire-chip:hover{border-color:var(--brand);color:var(--txt);background:var(--hover)}
.hire-chip:hover i{color:var(--brand)}

/* ---------- 27) 看板卡：分段标 + 播放要求同一行（C2.73） ---------- */
.bd-stage-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bd-stage-row .bd-stage{align-self:center}
.bd-views{font-size:12px;color:var(--txt3);font-variant-numeric:tabular-nums}
html[data-theme="dark"] .bd-views{color:#8b90a3}

/* ---------- 28) 看板按天清单：日期选择 + 沿用提示（C2.74） ---------- */
.bd-day-pick{width:auto;height:30px;padding:0 9px;font-size:12.5px;font-variant-numeric:tabular-nums}
#bd-carry{margin-bottom:13px}
#bd-carry:empty{display:none}

/* ---------- 29) 矩阵行序锁死：行头小蓝点代替「整行置顶」（C2.75） ----------
   顺序不再靠位置表达优先级，改成行头一个会呼吸的小点：这一行有格子等你动手。 */
.mx-acc .mx-todo{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--blue);margin-right:5px;vertical-align:1px;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);
  animation:mx-todo-breathe 2.6s ease-in-out infinite}
@keyframes mx-todo-breathe{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.mx-acc .mx-todo{animation:none}}
.mx-dense .mx-acc .mx-todo,.mx-ultra .mx-acc .mx-todo{width:5px;height:5px;margin-right:4px}

/* 列头被点成「置顶中」时，行序会临时跟着走；给个明显的离开提示，别让人以为顺序乱了 */
.mxsort-tag{font-style:normal}

/* ---------- 29) 卡头「?」与标题同行（C2.79） ---------- */
/* 标题原本是行内块，问号跟在文字后面要跟竖条一起垂直居中，不然会顶到字上 */
.ch h3.with-help{display:inline-flex;align-items:center;gap:7px}

/* ---------- 26) 提现对账：一行总账 + 按人列表（C2.92） ---------- */
/* 周选择（C2.106）：‹ [周下拉] › 拼成一个控件，两侧按钮只做步进，
   高度对齐 .btn.sm 的 30px（全局 select 是 37px，直接用会比按钮高一截） */
.week-pick{display:inline-flex;align-items:stretch}
.week-pick select{width:auto;min-width:196px;height:30px;border-radius:0;border-left:0;border-right:0;
  font-size:12.5px;font-variant-numeric:tabular-nums;padding:0 28px 0 10px;
  /* 全局下拉箭头按 37px 高定位（15px），这里 30px 高要跟着上移，否则箭头贴底 */
  background-position:calc(100% - 16px) 12px,calc(100% - 11px) 12px}
.week-pick select:focus{position:relative;z-index:1}
.week-pick .btn.nav{width:30px;height:30px;padding:0;justify-content:center;
  font-size:15px;line-height:1;border-radius:6px 0 0 6px}
.week-pick .btn.nav:last-child{border-radius:0 6px 6px 0}
.week-pick .btn.nav+.btn.nav{border-left:0}

/* 周列表（C2.106）：一周一行，当前周高亮；无记录的周整体压淡，不抢已经做过账的周 */
.settle-weeks>thead>tr>th.num,.settle-weeks>tfoot>tr>th.num{width:132px}
.settle-weeks>thead>tr>th:last-child,.settle-weeks>tfoot>tr>th:last-child{width:64px}
/* 状态列贴内容宽度，多出来的宽度留给「对账周」，不然灰胶囊会孤零零贴在差额后面 */
.settle-weeks>thead>tr>th:nth-child(5){width:1%;white-space:nowrap}
.settle-weeks tbody tr.on>td{background:var(--brand-d)}
.settle-weeks tbody tr.is-empty>td{opacity:.62}
.settle-weeks tbody tr.is-empty.on>td{opacity:1}
.settle-weeks .ops{text-align:right;white-space:nowrap}
.settle-weeks tfoot th{position:static;background:var(--soft);border-top:1px solid var(--line2)}
.week-phrase{margin-left:7px;font-size:11px;font-weight:600;color:var(--brand);
  background:var(--brand-d);border-radius:999px;padding:1px 6px;vertical-align:1px}

/* 顶部工具条右侧的银行到账小标签 */
.bank-chip{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--txt3);
  padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--soft)}
.bank-chip b{font-size:14px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}

/* 总账一行：银行 − 实到 = 差额，页面最该被看懂的就是这一行 */
.ledger{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--line-soft);border-radius:9px;background:var(--soft);margin-bottom:12px}
.ledger span{display:inline-flex;align-items:baseline;gap:6px}
.ledger i{font-style:normal;font-size:12px;color:var(--txt3)}
.ledger b{font-size:17px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1}
.ledger b.red{color:var(--red)}
.ledger b.amber{color:var(--amber)}
.ledger b.sub{color:var(--txt3)}
.ledger em{font-style:normal;font-size:14px;color:var(--txt3);font-weight:600}
.ledger .tag{margin-left:auto}
.ledger.pending{justify-content:flex-start}
.ledger-hint{font-size:12.5px;color:var(--txt2)}

/* 主表：合计压表尾、展开行不带底色跳变 */
.settle-tbl tbody tr.on>td{background:var(--hover)}
.settle-tbl tfoot th{position:static;background:var(--soft);border-top:1px solid var(--line2)}
.settle-tbl .ops{text-align:right;white-space:nowrap}

/* 展开后「其余账号没有金额」的一行提示 */
.settle-rest{margin-top:8px;font-size:12px;color:var(--txt3);padding-left:2px}
/* 列宽：名称列吃剩余、数字列定宽，否则 auto 布局会把「账号」撑到半屏 */
.settle-tbl>thead>tr>th.num,.settle-tbl>tfoot>tr>th.num{width:118px}
.settle-tbl>thead>tr>th:last-child,.settle-tbl>tfoot>tr>th:last-child{width:112px}
.sub-tbl>thead>tr>th.num,.sub-tbl>tfoot>tr>th.num{width:118px;text-align:right}
.sub-tbl>thead>tr>th:last-child,.sub-tbl>tfoot>tr>th:last-child{width:150px}
.settle-tbl tr.sub-row>td{padding:8px 10px 12px 24px}

/* 核对进度小标：还有几个账号没核，一眼能看出来 */
.settle-progress{margin-left:9px;font-size:11.5px;font-weight:500;color:var(--txt3);
  padding:1px 7px;border-radius:20px;background:var(--soft);border:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums}
.settle-progress.done{color:var(--green);border-color:transparent;background:transparent;padding-left:0}

/* ---------- 13) 星星人头像（C2.96 / C2.104 换手绘素材） ----------
   素材是 20 张 384×384 WebP，圆形裁切由 border-radius 兜，不额外包容器。
   C2.104 整体放大一档：手绘稿细节（腮红、帽尖星星）在 28px 下糊成一团，
   放大之后才认得出是不同的星星人。 */
.sv-ava{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:block;
  background:var(--soft);border:1px solid var(--line);object-fit:cover}
.sv-ava-sm{width:36px;height:36px}
.sv-ava-lg{width:56px;height:56px}
.ava.lg{width:56px;height:56px;font-size:17px}
/* 成员表里点头像换一个 */
.ava-btn{display:inline-flex;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
  transition:transform .15s ease}
.ava-btn:hover{transform:scale(1.08)}
.ava-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- 25) 侧栏左下角用户区（C2.100 重排 · C2.104 放大头像） ----------
   三层，不再是一串同权重的文字：
     ① 身份卡 —— 大头像 + 名字/角色 + 账号，装进一张浅色卡里
     ② 设置区 —— 深浅色 / 字号，两个等高等宽的控件
     ③ 页脚   —— 版本号靠左、退出靠右，都是小字小按钮（低频操作别抢视线）
   对齐：卡、按钮、字号行、页脚全部左右贴齐侧栏内容区（0 与 100% 两条线），
   卡内只有一条次级基线 —— 头像右边 11px。

   C2.104 两处改动：
   · 头像 36 → 56px，成为这张卡的视觉重心。手绘星星人靠表情区分（眨眼/嘟嘴/抱星），
     36px 下五官挤在一起根本认不出是哪一个，放大才有意义；再配一圈底色描边 + 柔和投影，
     让水彩画从侧栏底色上浮起来。
   · 去掉「账号正常」胶囊：它永远显示正常，是个恒真的字，等于没信息；
     在线状态已经由头像右下角那颗绿点表达，写两遍只会分散注意力。 */
.side-foot{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.who{display:flex;flex-direction:row;align-items:center;gap:11px;padding:10px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line-soft);min-width:0}
.who-ava{position:relative;flex:0 0 auto;display:block;line-height:0}
.who .sv-ava{width:56px;height:56px;
  box-shadow:0 0 0 2px var(--panel),0 2px 8px rgba(0,0,0,.14)}
.who .ava{width:56px;height:56px;font-size:19px;box-shadow:0 0 0 2px var(--panel)}
/* 在线绿点：压在头像圆边的右下 45°，用外发光描边而不是 border，免得把头像啃掉一圈 */
.who-dot{position:absolute;right:2px;bottom:2px;width:11px;height:11px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 2.5px var(--soft)}
.who-body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;flex:1}
/* 第一层：名字最重，角色退成灰字，两者同名时只留名字 */
.who-name{display:flex;align-items:baseline;gap:6px;max-width:100%;line-height:1.25}
.who-name b{font-size:14.5px;font-weight:650;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-role{flex:0 0 auto;font-size:11.5px;color:var(--txt3);font-weight:400}
/* 第二层：账号，等宽更整齐 */
.who-user{font-size:12px;color:var(--txt2);font-family:var(--mono);line-height:1.2;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 设置区：两个控件同高同圆角，间距与上面一致。
   app.css 里老的 .theme-btn 还带着 margin-left:2px / 5px 圆角 / 2px 6px 内边距，
   会把这一行顶偏 2px 且圆角跟别人不一样，这里一并按 .side-btn 的口径归零。 */
.side-foot .side-btn{height:32px;padding:0;margin:0;border-radius:8px;font-size:12.5px}
.side-zoom .seg-b{height:30px}
/* 页脚：版本号靠左、退出靠右 */
.side-tail{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1px}
.side-ver{font-size:10.5px;color:var(--txt3);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.side-tail .side-btn.logout{width:auto;height:26px;padding:0 11px;font-size:11.5px;
  border-color:transparent;background:transparent;color:var(--txt3)}
.side-tail .side-btn.logout:hover{color:var(--red);border-color:var(--line-red);background:var(--red-d)}

/* ---------- 27) 明细里的链接「改 / 删」（C2.108） ---------- */
/* 这一行主要是读链接，两个动作做轻：用文字按钮，不抢眼。
   「删」用红色与「改」区分；只剩一条时压淡（仍可点，点了给一句明确的话，不是死按钮）。 */
.vt-ops{text-align:right;white-space:nowrap}
.vt-ops .linkbtn+.linkbtn{margin-left:10px}
.vt-ops [data-v-act="v-del"]{color:var(--red)}
.vt-ops .linkbtn.is-off{opacity:.45;cursor:not-allowed}
.vt-ops .linkbtn.is-off:hover{text-decoration:none}
/* 只剩一条时的说明：贴在表下，直接回答「为什么删不了、那要怎么换」 */
.vt-hint{margin-top:6px;font-size:11.5px;color:var(--txt3);line-height:1.5}

/* ---------- 28) 登录页 logo 换成纯图形标（C2.117） ---------- */
/* 素材从「D + TokenDance + 公司名」整幅（190px 宽）换成只有 D 标的白底 JPG，
   抠成透明 PNG 之后按 190 放会把 D 撑得比原来大一圈，收到 150px —— 视觉上约等于
   原来那个 D 的比例。画布是正方形，height:auto 保证任何容器都不会拉伸变形。 */
.login-logo{width:150px;height:auto;display:block;margin:0 auto 12px}