/* ═══════════════════════════════════════════════════════════════════════
   mew UI 设计语言 v1(ADR-0006;规格见 DESIGN.md)
   原则:内容先于界面 · 发丝线+留白分层 · 品牌色即实例(--accent 由 base.html 注入)
   纪律:颜色只从 token 取;金额列必挂 .num;新状态走 badge 词表,不手写颜色。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 字体(自托管,零 CDN)─────────────────────────────────────────────── */
@font-face { font-family: "Noto Sans SC"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/noto-sans-sc-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/noto-sans-sc-500.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/noto-sans-sc-700.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/dm-mono-400.woff2") format("woff2"); }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #F3F5F7; --card: #FFFFFF;
  --line: #E7EAEE; --line2: #EEF1F4;
  --ink: #181B20; --ink2: #5B6470; --ink3: #9AA2AD;
  --up: #16A06A; --down: #E05751;

  --accent: #2F5FD8;                       /* 实例品牌色;base.html 内联覆盖 */
  --wm: none;                              /* 用户水印底图;base.html 按登录账号内联覆盖(文件末「用户水印」节) */
  --accent-strong: var(--accent);          /* 不支持 color-mix 时的回退 */
  --accent-ink: var(--accent);
  --wash: rgba(47, 95, 216, .09);
  --accent-strong: color-mix(in srgb, var(--accent) 72%, #16202E);
  --accent-ink: color-mix(in srgb, var(--accent) 60%, #23272E);
  --wash: color-mix(in srgb, var(--accent) 9%, transparent);

  --ok-ink: #117A52;  --ok-wash: rgba(22, 160, 106, .10);
  --warn-ink: #96660F; --warn-wash: rgba(176, 124, 32, .12);
  --bad-ink: #C13E38;  --bad-wash: rgba(224, 87, 81, .10);
  --mut-ink: #7C8590;  --mut-wash: rgba(90, 100, 112, .08);

  --ctl-border: #C9D1DA;
  --r-card: 14px; --r-ctl: 9px;
  /* 顶栏实高(sticky 顶栏 = .topbar min-height 52 + 上下边框 3)。粘在顶栏下方的
     元素(悬账绑定条…)都拿它当 top —— 顶栏改高必须同时改这里,否则粘出个缝或压一截。 */
  --topbar-h: 55px;
  --font-sans: "Noto Sans SC", system-ui, "Microsoft YaHei", sans-serif;
  --font-num: "Space Grotesk", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Consolas, monospace;

  /* 平台色(馄饨指数/发行情况)。🔴 色与名分家(阮 2026-09-20,DESIGN §2):
     色 = 平台身份 —— 与 7mew lib/qimiao-platforms.ts、meowspace 三边同源,
     改色仍须三边一起改(客户在哪个产品里都靠同一个颜色认出同一个平台);
     名 = 各产品自己的事 —— 小馄饨直接用平台名(词表 ui.PLATFORM_NAMES,阮 2026-09-21),
     换名不动色,改色也别顺手改名。点=线=chip 三处同色。
     钢灰 = 母品牌(合计/无平台归属),任何平台不占用。 */
  --plat-qishui: #1EBC67; --plat-tme: #2E8BE0; --plat-netease: #E5342F;
  --plat-fanqie: #F26840; --plat-kuaishou: #897BF2; --plat-mew: #3B434C;
}
/* 平台身份挂 --pc(未知平台不定义 → 消费处回退灰);字符+色双编码,不靠色盲辨色 */
.p-qishui { --pc: var(--plat-qishui); } .p-tme { --pc: var(--plat-tme); }
.p-netease { --pc: var(--plat-netease); } .p-fanqie { --pc: var(--plat-fanqie); }
.p-kuaishou { --pc: var(--plat-kuaishou); } .p-mew { --pc: var(--plat-mew); }

/* ── 基底 ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  accent-color: var(--accent);
}
::selection { background: var(--wash); }
/* [hidden] 得压得过下面任何 display 类(.check/.field 都是 flex,UA 那条 display:none
   在作者样式面前必输)——渐进增强的元素靠它藏,漏一次就是「藏不住」的整类 bug */
[hidden] { display: none !important; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--wash); outline-offset: 1px;
  border-radius: 4px; }

/* ── 壳:磨砂顶栏 + 品牌线 ─────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 20;
  border-top: 2px solid var(--accent);      /* 品牌线:实例身份贯穿每一页 */
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}
.topbar {
  max-width: min(1720px, 100%); margin: 0 auto; padding: 0 28px;
  min-height: 52px; display: flex; align-items: center; gap: 20px;
}
.brand { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px; }
.brand:hover { text-decoration: none; }
.brand::before { content: ""; width: 11px; height: 11px; border-radius: 3.5px;
  background: var(--accent); flex: none; }
.topbar nav { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { color: var(--ink2); font-size: 13.5px; padding: 5px 11px;
  border-radius: 8px; white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); background: rgba(24, 27, 32, .045);
  text-decoration: none; }
.topbar nav a.on { color: var(--accent-ink); background: var(--wash);
  font-weight: 500; }
.who { display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13px; color: var(--ink3); white-space: nowrap; }

/* 全站内容列与财务模块同宽(阮 2026-07-14 定:各分页主内容宽度一致) */
main { max-width: min(1720px, 100%); margin: 28px auto 0; padding: 0 28px; }
footer { max-width: min(1720px, 100%); margin: 44px auto 26px; padding: 0 28px;
  font-size: 12.5px; color: var(--ink3); }
/* ICP 备案号:法定悬挂物,必须是可点的外链(工信部要求),但不该抢视觉——
   与周围页脚同色同字号,只在悬停时露出下划线。 */
.beian { color: inherit; text-decoration: none; }
.beian:hover { text-decoration: underline; }

/* ── 模块壳:左二级栏 + 内容(财务;蓝本 7mew settlement layout)──────────── */
.mod { display: flex; align-items: flex-start; gap: 24px; }
.modnav { flex: none; width: 148px; position: sticky; top: 68px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 8px; }
.modnav a { padding: 7px 12px 7px 10px; border-left: 3px solid transparent;
  border-radius: 4px 9px 9px 4px; color: var(--ink2); font-size: 13.5px; }
.modnav a:hover { color: var(--ink); background: rgba(24, 27, 32, .045);
  text-decoration: none; }
.modnav a.on { color: var(--accent-ink); background: var(--wash);
  border-left-color: var(--accent); font-weight: 500; }
.modnav.ghost { visibility: hidden; }   /* 无二级栏页面的占位:主体区全站同宽同位 */
.modbody { flex: 1 1 auto; min-width: 0; }
.modpad { flex: none; width: 148px; }   /* 右侧对称留白:主体区居中(阮 2026-07-14 定) */

/* ── 页头与标题 ─────────────────────────────────────────────────────────── */
h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: .01em; }
h2 { font-size: 15px; font-weight: 700; margin: 34px 0 4px; }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px;
  margin-bottom: 18px; }
.pagehead .sub { flex-basis: 100%; margin: 2px 0 0; font-size: 13px;
  color: var(--ink3); }
.pagehead .actions { margin-left: auto; display: flex; align-items: center;
  gap: 10px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.tabs a { padding: 5px 13px; border-radius: 999px; font-size: 13px;
  color: var(--ink2); }
.tabs a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.tabs a.on { background: var(--wash); color: var(--accent-ink); font-weight: 500; }
.tabs.bare { margin: 0; }               /* 页头 actions 内的时窗 pills:去外边距 */

/* 操作记录总览:功能使用量条(宽度=相对榜首占比)与失败计数 */
.fnm .meterc { width: 30%; min-width: 140px; }
.meter { height: 6px; border-radius: 999px; }
.meter i { display: block; height: 100%; border-radius: 999px;
  background: var(--accent); opacity: .45; }
.errn { color: var(--bad-ink); font-weight: 500; }

/* ── 统计卡(总览)──────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 4px 0 10px; }
/* 曲库总览三卡选择器:激活卡 accent 描边 + wash 环;中间槽=堆叠卡(后卡露顶边可点) */
.stats.pick { grid-template-columns: repeat(3, 1fr); align-items: end; margin-bottom: 20px; }
.stat.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--wash); }
.stack { position: relative; }
.stack .front { position: relative; z-index: 1; margin-top: 24px; }
.stack .back { position: absolute; z-index: 0; top: 0; left: 18px; right: 0; bottom: 18px;
  padding: 4px 16px; font-size: 12px; color: var(--ink3); }
.stack .back:hover { color: var(--accent-ink); text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
/* 跨文档 View Transition(Chromium 渐进增强):艺人↔词曲作者换卡时前后卡平滑对调 */
@view-transition { navigation: auto; }
.stack .dim-artists { view-transition-name: dim-artists; }
.stack .dim-writers { view-transition-name: dim-writers; }
::view-transition-group(dim-artists), ::view-transition-group(dim-writers) {
  animation-duration: .3s; }

/* 分页条:左=每页条数,右=上一页/页码窗口/下一页 */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 14px 0 4px; font-size: 13px; color: var(--ink2); }
.pager .sizes a, .pager .sizes .on { padding: 2px 7px; border-radius: 999px; }
.pager .sizes a { color: var(--ink2); }
.pager .sizes a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.pager .sizes .on { background: var(--wash); color: var(--accent-ink); font-weight: 500; }
.pager .pages { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.pager .pages a, .pager .pages .on, .pager .pages .off {
  padding: 4px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink2); }
.pager .pages a:hover { text-decoration: none; color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.pager .pages .on { background: var(--accent-strong); border-color: var(--accent-strong);
  color: #fff; font-weight: 500; }
.pager .pages .off { color: var(--ink3); border-color: var(--line2); }
.pager .gap { color: var(--ink3); padding: 0 2px; }
.pager .jump { display: inline-flex; align-items: center; gap: 7px; margin: 0;
  margin-left: auto; }
.pager .jump input[type="number"] { width: 64px; padding: 4px 8px; font-size: 13px; }
.pager .jump button { padding: 4px 11px; font-size: 12.5px; }
.pager .jump + .pages { margin-left: 0; }

/* 表格顶部同步横向滚动条(app.js 生成;溢出才显示) */
.topscroll { overflow-x: auto; overflow-y: hidden; height: 15px;
  margin: 12px 0 -8px; }
.topscroll > div { height: 1px; }
.stat { display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 20px 14px; color: inherit; }
.stat:hover { text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.stat-n { display: block; font: 700 32px/1.15 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-l { display: block; margin-top: 3px; font-size: 13px; color: var(--ink3); }
.stat.alert .stat-n { color: var(--bad-ink); }

/* ── 表格 ───────────────────────────────────────────────────────────────── */
.tbl { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow-x: auto; margin: 12px 0 6px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--ink3);
  padding: 11px 14px 9px; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
td { padding: 10px 14px; border-top: 1px solid var(--line2);
  vertical-align: middle; }
tr > :first-child { padding-left: 20px; }
tr > :last-child { padding-right: 20px; }
tr:first-child td { border-top: 0; }
tbody tr:hover > td { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
td.num, th.num { text-align: right;
  font-variant-numeric: tabular-nums lining-nums; }
td.num { font-family: var(--font-num); font-weight: 500; }
tr.total > th, tr.total > td { border-top: 1px solid var(--line);
  font-weight: 700; color: var(--ink); font-size: 13.5px; padding: 11px 14px; }
tr.total > th.num, tr.total > td.num { font-family: var(--font-num); }
tr.empty td { color: var(--ink3); text-align: center; padding: 32px 14px; }
tbody tr.empty:hover > td { background: none; }
th a.thsort { color: inherit; }                    /* 列头排序链接(收入矩阵) */
th a.thsort:hover { color: var(--ink); text-decoration: none; }
th a.thsort.on { color: var(--accent-ink); }

/* ── 卡片与表单 ─────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 18px 20px; margin: 12px 0; }
.card-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.frow { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink2); }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 400; color: var(--ink2); padding-bottom: 8px;
  white-space: nowrap; }
/* 一排勾选(发行规划选交付通道):.field 内的多选组,行内换行、与 .check 同语言 */
.picks { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; }
.picks .check { padding-bottom: 0; }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type="checkbox"]), select {
  padding: 7px 10px; border: 1px solid var(--ctl-border);
  border-radius: var(--r-ctl); background: var(--card); color: var(--ink);
  font-size: 14px; min-width: 0; }
input::placeholder { color: var(--ink3); }
input:focus, select:focus { border-color: var(--accent);
  outline: 3px solid var(--wash); outline-offset: 0; }
input[type="file"] { font-size: 13px; color: var(--ink2); border-style: dashed;
  padding: 6px 10px; }
input[type="file"]::file-selector-button { font: 500 12.5px var(--font-sans);
  color: var(--ink2); background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 10px; margin-right: 10px; cursor: pointer; }

/* ── 按钮 ───────────────────────────────────────────────────────────────── */
button { background: var(--accent-strong); color: #fff; border: 0;
  border-radius: var(--r-ctl); padding: 8px 16px; font-size: 14px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s; }
button:hover { background: color-mix(in srgb, var(--accent-strong) 88%, #0C141E); }
button.quiet { background: var(--card); color: var(--ink2);
  border: 1px solid var(--ctl-border); }
button.quiet:hover { background: var(--bg); color: var(--ink); }
button.danger { background: var(--card); color: var(--bad-ink);
  border: 1px solid color-mix(in srgb, var(--down) 38%, var(--line)); }
button.danger:hover { background: var(--bad-wash); }
button.link { background: none; color: var(--ink3); padding: 0;
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { color: var(--ink); background: none; }
a.btn { display: inline-block; background: var(--card); color: var(--ink2);
  border: 1px solid var(--ctl-border); border-radius: var(--r-ctl);
  padding: 7px 14px; font-size: 13.5px; font-weight: 500; }
a.btn:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
form.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
form.inline button, td button { padding: 5px 11px; font-size: 12.5px; }
form.inline input, form.inline select, td input, td select {
  padding: 5px 8px; font-size: 13px; }

/* ── 徽标(词表 tone;ui.py badge()/onoff() 产出)─────────────────────── */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.7; white-space: nowrap; }
.b-ok   { color: var(--ok-ink);   background: var(--ok-wash); }
.b-warn { color: var(--warn-ink); background: var(--warn-wash); }

/* 数值单元格的注意态:对不上的账、对方尚未回收完的成本、AI 未判定的次数。
   只取 warn token,不引入第二套颜色(ADR-0006);不做整行染色——语义靠这一个数就够。 */
td.warn, td.warn strong { color: var(--warn-ink); }
.b-bad  { color: var(--bad-ink);  background: var(--bad-wash); }
.b-info { color: var(--accent-ink); background: var(--wash); }
.b-mut  { color: var(--mut-ink);  background: var(--mut-wash); }

/* ── 平台筹码 + 涨跌 + 迷你趋势(馄饨指数页/曲库发行情况;ui.py platchip()/
      delta()/spark() 产出。视觉语言同 badge:10% wash 底 + 深字,字符即身份)── */
.pchips { display: inline-flex; flex-wrap: nowrap; gap: 4px; vertical-align: middle; }
.pchip { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; line-height: 1; cursor: default;
  color: color-mix(in srgb, var(--pc, var(--mut-ink)) 62%, #23272E);
  background: color-mix(in srgb, var(--pc, var(--mut-ink)) 12%, transparent); }
/* 在途空心态类名用 pend——「subm」撞收入矩阵分月缩进类 .subm(padding-left 34px),
   撞上会把空心筹码撑宽(2026-08-03 实锤修复);全局裸类起名前先 grep */
.pchip.pend { background: none; box-shadow: inset 0 0 0 1px
  color-mix(in srgb, var(--pc, var(--mut-ink)) 42%, transparent); }
.pchip.down { background: var(--mut-wash); color: var(--mut-ink);
  text-decoration: line-through; }
/* 发行情况三态图例(曲库表上方;灰样字「平」= 平台占位,不与任何真平台撞色) */
.legend { display: flex; justify-content: flex-end; align-items: center;
  gap: 16px; margin: 10px 2px -4px; font-size: 12.5px; color: var(--ink2); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  border-radius: 5px; font-family: var(--font-num); font-size: 12px;
  font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.delta.up { color: var(--ok-ink); background: var(--ok-wash); }
.delta.down { color: var(--bad-ink); background: var(--bad-wash); }
.delta.nil { color: var(--ink3); padding-left: 2px; }
.delta .arr { font-size: 10px; }
/* 迷你趋势与趋势卡的线/面着色:平台色描边加深保白底对比(色相仍属平台) */
.spark, .trendsvg { color: color-mix(in srgb, var(--pc, var(--accent)) 86%, #16202E); }
.spark.neg { color: var(--down); }
.spark svg, .trendsvg svg { display: block; }

/* ── 馄饨指数页:KPI 行(label 上/大数/涨跌下,hero 带迷你趋势)+ 趋势卡 ──── */
/* 三卡(2026-08-08 撤「当日峰值曲目」= 明细首行的重复;meowspace 同日同法) */
.stats.idx { grid-template-columns: 1.5fr 1fr 1fr; margin-bottom: 16px; }
.stats.idx .stat { display: flex; flex-direction: column; gap: 8px; }
.stats.idx .stat-l { margin: 0; order: 0; }
.stats.idx .statrow { display: flex; align-items: flex-end;
  justify-content: space-between; gap: 12px; flex: 1; min-width: 0; }
.stats.idx .stat-n { font-size: 26px; }
.stats.idx .stat.hero .stat-n { font-size: 38px; }
.stats.idx .statd { display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink3); }
.trend .trendhead { display: flex; align-items: flex-end;
  justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.trend .trendhead .card-title { margin-bottom: 0; }
.trend .trendtot { text-align: right; display: flex; align-items: baseline; gap: 10px; }
.trend .trendtot .n { font: 700 22px/1.15 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.02em; }
.trendsvg { position: relative; }
.trendsvg text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink3); }
.trendtip { position: absolute; z-index: 6; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px 8px; box-shadow: 0 6px 22px rgba(24, 27, 32, .12);
  white-space: nowrap; }
.trendtip .d { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.trendtip .v { font: 500 17px/1.3 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--ink); margin: 1px 6px 3px 0;
  display: inline-block; }
/* 平台色点(指数页 tabs / 曲目详情指数表):身份靠文字,色点对上图线 */
.pdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pc, var(--ink3)); margin-right: 6px; vertical-align: 1px; }

/* ── flash(PRG 反馈)──────────────────────────────────────────────────────
   sticky 悬停顶栏下(2026-07-14 阮定:配合 data-hold 滚动原位保持——
   停在页面深处也看得见反馈);底色实色化,悬浮不透字 */
.flash { border-radius: 10px; padding: 10px 14px; margin: 0 0 16px;
  font-size: 13.5px; border: 1px solid;
  position: sticky; top: 64px; z-index: 25;
  box-shadow: 0 4px 14px rgba(24, 27, 32, .06); }
.flash.ok { color: var(--ok-ink);
  background: color-mix(in srgb, var(--up) 7%, var(--bg));
  border-color: color-mix(in srgb, var(--up) 30%, var(--line)); }
.flash.warn { color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.flash.bad { color: var(--bad-ink);
  background: color-mix(in srgb, var(--down) 7%, var(--bg));
  border-color: color-mix(in srgb, var(--down) 30%, var(--line));
  white-space: pre-wrap; }

/* ── 结算单「钱的时刻」────────────────────────────────────────────────── */
.kpis { display: flex; flex-wrap: wrap; margin: 2px 0 4px; }
.kpi { flex: 1 1 140px; padding: 6px 22px; border-left: 1px solid var(--line2); }
.kpi:first-child { border-left: 0; padding-left: 2px; }
.kpi-l { font-size: 12.5px; color: var(--ink3); }
.kpi-n { margin-top: 3px; font: 500 22px/1.2 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi.pay .kpi-n { font-size: 27px; font-weight: 700; color: var(--accent-ink); }
.actrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line2); }
.actrow .spacer { flex: 1; }

/* ── 格中筹码(账单覆盖网格 / 结算矩阵:一格 = 账单数·金额 / 状态·应付)──── */
.chip { display: inline-block; min-width: 84px; padding: 4px 9px 5px;
  border-radius: 9px; text-align: right; font-size: 12.5px; line-height: 1.45;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  background: var(--chip-bg, var(--mut-wash)); }
.chip .chip-l { display: block; font-size: 11px; font-family: var(--font-sans);
  opacity: .78; white-space: nowrap; }
.chip.ok   { --chip-bg: var(--ok-wash);   color: var(--ok-ink); }
.chip.warn { --chip-bg: var(--warn-wash); color: var(--warn-ink); }
.chip.bad  { --chip-bg: var(--bad-wash);  color: var(--bad-ink); }
.chip.info { --chip-bg: var(--wash);      color: var(--accent-ink); }
.chip.mut  { --chip-bg: var(--mut-wash);  color: var(--mut-ink); }
button.chip { border: 0; cursor: pointer; }
a.chip:hover, button.chip:hover { text-decoration: none;
  background: var(--chip-bg, var(--mut-wash));
  box-shadow: 0 0 0 1px currentColor inset; }
td .chip + .chip { margin-top: 4px; }

/* 跨列筹码:横跨月份列,居中。**width 不能省** —— <button> 是表单控件,
   即使 display:block 也按内容收缩(结算矩阵的 <a> 版会自动撑满,账单网格的
   popover 按钮版不会),不给宽度就缩在格子左端、看着像只压着头一个月。 */
.chip.wide { display: block; width: 100%; text-align: center; }
.chip.wide .chip-l { text-align: center; }

/* 可勾选筹码(结算矩阵待结算格:勾选月份 → 统一「生成结算单」) */
label.chip { cursor: pointer; position: relative; }
label.chip input { position: absolute; top: 5px; left: 7px; margin: 0; accent-color: var(--accent); }
label.chip:hover { box-shadow: 0 0 0 1px currentColor inset; }
label.chip:has(input:checked) { box-shadow: 0 0 0 1.5px var(--accent) inset; }
label.chip:has(input:disabled) { opacity: .4; cursor: default; box-shadow: none; }
.genbar { margin: 0 0 10px; }
.genbar button:disabled { opacity: .5; cursor: default; }

/* 页头返回(二级页 → 上级列表) */
h1 .backlink { text-decoration: none; color: var(--ink2); margin-right: 2px; }
h1 .backlink:hover { color: var(--ink); }

/* 曲目弹层编辑(曲库列表点 TRK 码;embed 片段注入,dialog 顶层渲染) */
.trackdlg { width: min(1160px, 94vw); max-height: 88vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg); color: var(--ink); padding: 6px 22px 20px; }
.trackdlg::backdrop { background: rgba(24, 27, 32, .22); }
.trackdlg-bar { position: sticky; top: 0; z-index: 2; display: flex;
  justify-content: flex-end; padding: 8px 0 2px; }
.trackdlg-bar .x { text-decoration: none; font-size: 15px; }

/* 艺人编辑弹层(曲库 艺人/词曲视图行内「编辑」:改名 + 合并入) */
.artistdlg { width: min(520px, 92vw); border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--card); color: var(--ink);
  padding: 12px 22px 18px; }
.artistdlg::backdrop { background: rgba(24, 27, 32, .22); }
.artistdlg .dlghead { display: flex; align-items: center; padding-bottom: 4px; }
.artistdlg .dlghead .x { margin-left: auto; text-decoration: none; font-size: 15px; }

/* 确认弹层(取代原生 confirm:dialog 原生居中 + 遮罩;app.js mewConfirm) */
.confirmdlg { width: min(400px, 92vw); border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--card); color: var(--ink);
  padding: 20px 22px 16px; }
.confirmdlg::backdrop { background: rgba(24, 27, 32, .22); }
.confirmdlg .confirm-msg { margin: 0 0 16px; font-size: 14px; line-height: 1.65;
  overflow-wrap: anywhere; }
.confirmdlg .actrow { display: flex; gap: 8px; justify-content: flex-end; }

/* 格详情弹层(Popover API,零 JS:通道·月(账单数)+ 逐单 文件/状态/账期/总匹悬/净额) */
.cellpop { position: fixed; inset: 0; margin: auto; width: min(460px, 92vw);
  max-height: 64vh; overflow-y: auto; padding: 6px 16px 10px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); color: var(--ink); }
.cellpop::backdrop { background: rgba(24, 27, 32, .22); }
.cellpop-head { display: flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700; padding: 8px 0; }
.cellpop-head .x { margin-left: auto; text-decoration: none; }
.cellpop-bill { border-top: 1px solid var(--line2); padding: 9px 0 7px;
  font-size: 13px; }
.cellpop-file { display: flex; align-items: center; gap: 10px; }
.cellpop-file .fn { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cellpop-file a { flex: none; font-size: 12.5px; }
.cellpop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 5px; font-size: 12.5px; }
.cellpop-fix { display: flex; align-items: center; gap: 12px; margin-top: 6px;
  font-size: 12.5px; }
.replf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cellpop-fix .replf { flex: 1 1 auto; }
.replf input[type="file"] { font-size: 12px; color: var(--ink3);
  min-width: 0; flex: 1 1 auto; }
.danger-link { color: var(--down); }

/* 卡片弹层原语(a[data-dlg] → #carddlg;账单卡等「先看卡再动作」的下载缓冲) */
.carddlg { width: min(760px, 94vw); max-height: 82vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); color: var(--ink); padding: 0 18px 14px; }
.carddlg::backdrop { background: rgba(24, 27, 32, .22); }
.carddlg-bar { position: sticky; top: 0; z-index: 2; display: flex;
  justify-content: flex-end; padding: 8px 0 2px; background: var(--card); }
.billcard-file { font-weight: 500; word-break: break-all; margin-bottom: 6px; }
.billcard-months { margin-top: 10px; max-height: 300px; overflow-y: auto; }

/* 忙碌弹层原语(form[data-busy] 提交时亮出,不可关;长任务防误操作) */
.busydlg { border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); color: var(--ink); padding: 22px 28px; text-align: center; }
.busydlg::backdrop { background: rgba(24, 27, 32, .35); }
.busy-spin { width: 22px; height: 22px; margin: 0 auto 10px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: busyspin .8s linear infinite; }
@keyframes busyspin { to { transform: rotate(360deg); } }
.busy-msg { font-size: 13.5px; color: var(--ink2); }
.cellpop-err { margin-top: 4px; font-size: 12px; color: var(--bad-ink);
  white-space: pre-wrap; }

/* 汇总行(按季/按年):colspan 桶,数字贴桶尾(右对齐),底色同分段行 */
.matrix tr.agg > th, .matrix tr.agg > td { border-top: 1px solid var(--line2);
  background: var(--bg); font-size: 12.5px; color: var(--ink2); }
.matrix tr.agg > th { color: var(--ink); font-size: 13px; font-weight: 700;
  text-align: left; }
.matrix tr.agg > th:first-child { background: var(--bg); }
.matrix tr.agg > td { font-family: var(--font-num); font-weight: 500;
  font-variant-numeric: tabular-nums; }
.agg-n { display: block; font: 400 11px/1.5 var(--font-sans); color: var(--ink3); }

/* ── 行内展开(▸ 分月明细;收入矩阵曲目行 / 悬账合并组行,整行可点)────── */
.rowtgl { background: none; border: 0; padding: 0 5px 0 0; cursor: pointer;
  color: var(--ink3); font-size: 11px; line-height: 1; vertical-align: 1px; }
.rowtgl:hover { background: none; color: var(--ink); }
.rowtgl.open { color: var(--accent-ink); }
tr.xrow { cursor: pointer; }
tr.subrow > td { background: var(--bg); border-top: 1px solid var(--line2);
  font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; }
.matrix tr.subrow > td:first-child { background: var(--bg); }
.subm { padding-left: 34px; }
tr.subrow .src { display: inline-block; max-width: 360px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* (原「财务模块整页放宽」已升级为全站统一 1720px,见上方壳布局) */
.trackcell, .nowrap { white-space: nowrap; }

/* ── 悬账绑定条(蓝本 7mew BindToTrackPanel):勾选出条,候选磁贴 + 悬停详情 ── */
/* 绑定条**粘在顶栏下方**:选中的那一组常在表格深处,而操作面在表头之上
   —— 勾完还得滑回去才够得着(阮 2026-08-06 报)。粘性区间 = 它的包含块
   `#suspform`(横跨整张表),所以从勾选到提交全程都在手边;勾选之前它 hidden,
   一格屏幕都不占。z-index 压过表格、让过顶栏(顶栏 20)。
   🔴 背景必须**先垫一层不透明卡底**:--warn-wash 是半透明的(rgba …,.12),
   钉住后表格行从它背后滚过,不垫就是字压字。保留 token,不硬编码合成色。 */
.bindbar { position: sticky; top: var(--topbar-h); z-index: 15;
  background: var(--card);
  background-image: linear-gradient(var(--warn-wash), var(--warn-wash));
  border-color: color-mix(in srgb, var(--warn-ink) 28%, var(--line));
  box-shadow: 0 10px 16px -14px rgba(24, 27, 32, .55); }
.bindbar-head { display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--warn-ink); margin-bottom: 10px; }
.bindbar-head .x { margin-left: auto; }
.cands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cand { position: relative; text-align: left; background: var(--card); color: var(--ink);
  border: 1px solid var(--ctl-border); border-radius: 9px; padding: 7px 12px;
  font-size: 13px; cursor: pointer; }
.cand:hover { background: var(--card); color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--ctl-border)); }
.cand.on { background: var(--card); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--wash); }
.cand .m { display: block; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink3); margin-top: 1px; }
/* 候选磁贴第三行 = 归属(+分成档)。同名多版本要挑哪一条,归属常是那个判据,
   所以它自成一行而不是挤进 .m —— 一列对齐才扫得动。比 .m 深一档:它是商务事实,
   不是编号那类定位信息。未设归属走 warn 墨色(会让结算 fail-closed 的状态,不是缺数据)。 */
.cand .o { display: block; font-size: 11.5px; color: var(--ink2); margin-top: 2px; }
.cand .o.none { color: var(--warn-ink); }
/* 候选磁贴上的外显厂牌:排在归属之后且更弱 —— 收款方仍是客户,厂牌不驱动钱 */
.cand .o .lbl { margin-left: 6px; color: var(--ink3, var(--ink2)); opacity: .75; }
.cand-tip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 6;
  min-width: 220px; white-space: pre-line; background: var(--ink); color: #fff;
  border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 1.7;
  font-family: var(--font-sans); text-align: left; }
.cand:hover .cand-tip { display: block; }
/* AI 痕迹(mew_core/ai/DESIGN §10.3):全站最克制的一枚——10px 贴在字段旁,解释走悬停,
   不加徽章边框、不写教学小字、不露员工名(名字只用于 /ai 页、日志与成本报表)。 */
.aimark { margin-left: 6px; font-family: var(--font-sans); font-size: 10px; color: var(--ink3); }
/* 候选区的一句陈述位:没候选 / 员工未判定 / 跨客户提醒。「未判定」是故障信号,必须看得见。 */
.candnote { flex-basis: 100%; font-size: 12px; color: var(--ink3); }
/* 「艺人不符」= 这条候选只靠曲名过来。与 .aimark 同一档克制(10px、无边框、解释走悬停),
   但取 warn 墨色:碰瓷(照着知名歌手改一个字)在这行业是常态,落错就是错账。 */
.warnmark { margin-left: 6px; font-family: var(--font-sans); font-size: 10px;
  color: var(--warn-ink); }
.bindbar .actrow { border-top-color: color-mix(in srgb, var(--warn-ink) 18%, var(--line2)); }
/* 补档条的客户组(曲库「缺分档」):一家一行 = 客户名(点它只选这一家)· 本页曲数 ·
   该客户已有的档 · 补上。补档的单位是客户,行就是那个单位的形状。 */
/* 一页可能站着十来家客户,而这条是 sticky 的:单列排下去会吃掉半屏。故多列铺开
   + 高度封顶(超过就在条内滚),勾选之后 JS 收起无关组,常态就剩一行。 */
.tiergrp { display: grid; gap: 8px 18px; max-height: min(34vh, 240px); overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.tierrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tierrow .pickall { font-weight: 600; }
.tierrow select { min-width: 92px; }
.tierrow button[name="partner_id"]:disabled { opacity: .5; cursor: default; }
#tier-each:disabled { opacity: .5; cursor: default; }

/* ── 悬账分诊(悬账页的唯一视图):四类卡 + 「候选」列 ──────────────────────
   卡沿用 .stat 原语,只把次序倒过来(类名在上、组数为主数)并补两行:行数·金额、
   该类的处置动作。动作那行是卡片的内容本身——分诊页存在的理由就是「同一类怎么办
   是同一件事」,不说出来这张卡只剩个数字。 */
.stats.triage .stat-l { margin: 0 0 5px; }
.stats.triage .stat-n { font-size: 27px; }
.stat-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink2);
  font-variant-numeric: tabular-nums; }
.stat-act { display: block; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line2); font-size: 12.5px; color: var(--ink3); }
/* 候选列:一行一条(≤3 条),超出收成「等 N 条」;过长省略号截断,不撑破表格 */
/* 列宽上界(悬账表 `.susp`):**每一列都封顶**,上界之和 < 容器宽 → 表格自己铺满
   100%,永不横滚。封顶必须配「允许换行」—— nowrap 的单元格会无视 max-width 把表顶爆:
   2026-08-06 量到一个 29 字曲名把「账单曲名」撑到 437px,表需 1588 / 可视 1318,
   横滚 270px,恰好让最左的账单曲名与最右的候选没法同屏(阮报)。
   行高不受影响:候选列本就 3 行,曲名折到 2–3 行仍在它的阴影里。
   🔴 新增列必须一并给上界,否则这条「永不横滚」的保证当场失效。 */
.susp .trackcell { white-space: normal; max-width: 210px; }
.susp .artistcell { white-space: normal; max-width: 132px; }
.susp .namecell { white-space: normal; max-width: 96px; }
.candcol { max-width: 340px; }
.candline { display: block; font-size: 12.5px; line-height: 1.75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.candline .mono { font-size: 11.5px; color: var(--ink3); }
.candmore { font-size: 12px; color: var(--ink3); }

/* ── 收入矩阵(/finance/revenue):首列冻结横滚 + 分段小计行 ─────────────── */
.matrix th:first-child, .matrix td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  min-width: 240px; }
/* 结算矩阵:客户 + 费率两列冻结不随横滚(阮 2026-07-14 定);首列定宽供次列锚定 */
/* 表头吸顶(阮 2026-08-11):纵滚收进网格容器,表头行钉容器顶——客户一多,
   滚到深处就对不上月份列。容器封 100vh 内,表短则原高。110px 不是留白手感:
   页面滚到底时网格顶边的位置 = topbar-h + 这个数 − 网格下方块高(表卡下距 6 +
   页脚 44/26 边距 + 一行字 ≈ 97,页头多高都消掉),要 ≥ topbar-h 表头才不钻顶栏,
   故此数必须 ≥ 97;页脚改版式连着改这里。
   🔴 本表必须 border-collapse: separate:collapse 的边框归表不归格,Chromium
   不随 sticky 钉住(表头一钉线就丢);separate 后线由 th 自带、随钉随走。
   代价 = th 底线与首数据行 td 顶线不再合并,首数据行去 border-top 抵掉。
   层级:表头压冻结列(2>1),左上角双冻结格再压表头(3>2)。 */
#settlegrid { max-height: calc(100vh - var(--topbar-h) - 110px); overflow-y: auto; }
.setm { border-collapse: separate; border-spacing: 0; }
.setm tr:first-child > th { position: sticky; top: 0; z-index: 2;
  background: var(--card); }
.setm tr:first-child > th:first-child,
.setm tr:first-child > th:nth-child(2) { z-index: 3; }
.setm tr:first-child + tr > td { border-top: 0; }
.setm th:first-child, .setm td:first-child { min-width: 240px; max-width: 240px; }
.setm th:nth-child(2), .setm td:nth-child(2) {
  position: sticky; left: 240px; z-index: 1; background: var(--card);
  min-width: 210px; border-right: 1px solid var(--line); }
.setm tr.subrow > td:nth-child(2) { background: var(--bg); }
/* 这格没结完:既有已出的单、又还有待结算余量(常见于同期先结了一个平台)。
   只给一条左边框——扫一眼整张矩阵就知道哪些格是「结了一半」,不抢 chip 的视觉。 */
.setm td.part { box-shadow: inset 2px 0 0 var(--accent); }
.setm tbody tr:hover > td:nth-child(2) {
  background: color-mix(in srgb, var(--ink) 2.5%, var(--card)); }
.matrix tbody tr:hover > td:first-child {
  background: color-mix(in srgb, var(--ink) 2.5%, var(--card)); }
/* 组行:矩阵与普通 .tbl 表格(项目列表按对手方/状态分组)同一套语言,不另发明一档 */
.matrix tr.grp > th, .tbl tr.grp > th { border-top: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font-size: 13px; font-weight: 700; text-align: left; }
.matrix tr.grp > th.num { text-align: right; font-family: var(--font-num); }
.revm .num { width: 1%; white-space: nowrap; }  /* 数字列收缩靠右,曲目列吸收余宽 */
tr.grp[data-href] { cursor: pointer; scroll-margin-top: 76px; }  /* 组行整行可点;#g 锚点回位避 sticky 顶栏 */
.grpo { color: var(--ink); text-decoration: none; }
.grpo .tg { color: var(--ink3); font-size: 11px; }
.grpo.on .tg, .grpo:hover .tg { color: var(--accent-ink); }
.pagehead .amt { font-family: var(--font-num); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.pagehead .ymr { display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--ink2); }                          /* 日历(自/至)独立右上角 */
.sorthint { opacity: .55; font-weight: 400; }
.nil { color: var(--ink3); }                    /* 平台透视零格「–」 */

/* ── 登录页 ─────────────────────────────────────────────────────────────── */
body.login { display: grid; place-items: center; min-height: 100vh;
  padding: 24px; }
.login-box { width: min(346px, 92vw); }
.login-brand { font-size: 24px; font-weight: 700; display: flex;
  align-items: center; gap: 11px; margin-bottom: 20px; }
.login-brand::before { content: ""; width: 15px; height: 15px;
  border-radius: 5px; background: var(--accent); flex: none; }
.login-box .card { padding: 22px; margin: 0; }
.login-box .field { margin-bottom: 14px; }
.login-box .field input { width: 100%; }
.login-box button[type="submit"] { width: 100%; margin-top: 2px;
  padding: 9px 16px; }
.login-box .foot { margin-top: 16px; font-size: 12px; color: var(--ink3);
  text-align: center; }

/* ── 通用工具 ───────────────────────────────────────────────────────────── */
.muted { color: var(--ink3); font-size: 12.5px; }
.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em;
  white-space: nowrap; }
.strong { font-weight: 700; }
.right { text-align: right; }

/* ── 响应与可达性 ───────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .topbar, main, footer { padding-left: 16px; padding-right: 16px; }
  .topbar { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .stats, .stats.idx { grid-template-columns: repeat(2, 1fr); }
  .kpi { flex-basis: 40%; }
  .mod { display: block; }
  .modnav { position: static; width: auto; flex-direction: row; flex-wrap: wrap;
    margin-bottom: 14px; }
  .modnav.ghost, .modpad { display: none; }
  .modnav a { border-left: 0; border-radius: 999px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── 进度条(发行上传/代发;颜色取 accent token,ADR-0006)──────────────── */
.progbar { height: 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.progfill { height: 100%; width: 0; background: var(--accent);
  transition: width .2s ease; }

/* ── 物料预览(materials DESIGN §6)────────────────────────────── */
.cover-th{width:36px}
.cover-th img{width:32px;height:32px;object-fit:cover;border-radius:4px;display:block}
.cover-th .ph{display:inline-block;width:32px;height:32px;border-radius:4px;background:var(--soft,#f2f3f5);color:var(--muted,#8a8f98);font-size:9px;line-height:32px;text-align:center;overflow:hidden}
/* 指数明细的无封面占位(对标 meowspace 渐变占位):--h 由行 id 派生,同一首歌恒同色 */
.cover-th .ph.cv{background:linear-gradient(135deg,hsl(var(--h) 55% 80%),hsl(calc(var(--h) + 40) 55% 62%))}
.mats-row{display:flex;gap:16px;align-items:flex-start}
.mats-row img.cover{width:96px;height:96px;object-fit:cover;border-radius:8px}
.mats-row .cover.ph{display:flex;width:96px;height:96px;border-radius:8px;background:var(--soft,#f2f3f5);color:var(--muted,#8a8f98);align-items:center;justify-content:center;font-size:12px}
.mats-main{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.mats-main audio{width:100%;max-width:420px}
.mats-files{display:flex;gap:14px;flex-wrap:wrap}
.mats-lyric{margin:0;padding:10px 12px;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13px;line-height:1.7;background:var(--soft,#f2f3f5);border-radius:8px}
.mats-artists{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mats-artists img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.mats-artists .ph.s{width:56px;height:56px;border-radius:6px;background:var(--soft,#f2f3f5);color:var(--muted,#8a8f98);display:flex;align-items:center;justify-content:center;font-size:11px}

/* ── 曲库选曲 → 发行单(DESIGN v3)────────────────────────── */
.dlvbar{margin-bottom:12px}
th.pick,td.pick{width:28px;text-align:center}

/* ── 悬停释义(ADR-0006 原则 8;原语 web/ui.py hint()、定位 app.js)──────────
   `.hint` 只是**记号**:一条发丝虚线,告诉人「这儿还有话」。气泡本身是全站唯一的
   `#tip`(fixed 定位)—— 逐元素 ::after 会被 .tbl 的 overflow-x 裁掉半个,而这一页页
   都在表格里。`.bare` 用于「全文」场景(文件名截断/平台筹码):内容与显示的是同一份
   东西,截断即记号,再画下划线是给同一件事发两次信号。 */
.hint { border-bottom: 1px dashed var(--ink3); cursor: help; outline: 0; }
.hint:hover, .hint:focus-visible { border-bottom-color: var(--accent-ink); }
.hint:focus-visible { box-shadow: 0 0 0 3px var(--wash); border-radius: 2px; }
.hint.bare { border-bottom: 0; cursor: inherit; }
/* `[popover]` 的 UA 缺省是 `inset: 0; margin: auto; border: solid; background: Canvas`
   —— 不逐条压掉,气泡会变成屏幕正中一个带边框的白盒子。z-index 留着是给不支持
   popover 的浏览器用的(那时它就是普通层的 fixed 元素)。 */
.tip { position: fixed; inset: auto; margin: 0; border: 0; overflow: visible;
  z-index: 90; max-width: 340px; padding: 8px 11px;
  background: var(--ink); color: #F7F8FA; font-size: 12.5px; line-height: 1.55;
  border-radius: 7px; box-shadow: 0 6px 22px rgba(24, 27, 32, .18);
  pointer-events: none; }
.tip[hidden] { display: none; }

/* ── 用户水印(截屏溯源;DESIGN §5「用户水印」,蓝本 7mew@7f89258)──────────────
   底图 --wm 由服务端按登录账号生成并内联进 :root(base.html);未登录页不注入,
   token 缺省 none = 无水印。 */
.wm, dialog[open]::after, [popover]::after {
  position: fixed; inset: 0;
  pointer-events: none;         /* 全屏覆盖层的通行税:一格交互都不许吃 */
  background-image: var(--wm); background-repeat: repeat; background-position: 0 0;
}
.wm {
  z-index: 2147483000;          /* 压过站内一切(顶栏 20、绑定条 15…),以确保进截屏 */
  -webkit-user-select: none; user-select: none;
}
/* <dialog open> 与 [popover] 在 **top layer**:z-index 管不着它们,上面那层再高也压不住,
   而账单卡/曲目卡弹层恰恰是最值得截的那几屏。故各自在自己的层叠上下文里再撑一层。
   **必须是伪元素覆盖,不能只给弹层铺 background** —— 弹层里的表格自带不透明底
   (.tbl/table 的 var(--card)),会把背景上的水印整片盖掉,盖住的正是数据那块。
   `position:fixed` 而非 absolute:弹层自身可滚(max-height + overflow-y),absolute 那层
   会随内容滚走;fixed 锚在视口,原点与 .wm 同为 0 0,跨弹层边界瓦片严丝合缝不重影。 */
dialog[open]::after, [popover]::after { content: ""; }
/* 打印/导出 PDF 默认丢弃背景图 —— 那等于给「打印成 PDF 再发出去」开了道免检门。 */
@media print {
  .wm { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 系统运行 · 近 14 天逐日格(taskmon;7mew /system/jobs 同形) */
.days { display: inline-flex; gap: 2px; vertical-align: middle; }
.days i { display: inline-block; width: 8px; height: 16px; border-radius: 2px; background: var(--mut-wash); }
.days i.d-ok    { background: color-mix(in srgb, var(--ok-ink) 60%, transparent); }
.days i.d-alert { background: color-mix(in srgb, var(--warn-ink) 60%, transparent); }
.days i.d-part  { background: linear-gradient(var(--ok-ink) 50%, var(--bad-ink) 50%); opacity: .6; }
.days i.d-bad   { background: color-mix(in srgb, var(--bad-ink) 70%, transparent); }
.taskmon .small { font-size: 12px; }
.stats.five { grid-template-columns: repeat(5, 1fr); }