/* 全站设计 token 单一真源(首页 / 行情 /stock/ / 基金 /fund/ 三页共用)。
   放在 static/home/assets 下是因为三页各自是独立的 fs.Sub 子树,只有 home 目录能提供根路径下的资源,
   三页统一用绝对路径 <link rel="stylesheet" href="/assets/theme.css"> 引入,页内 <style> 只留本页特有布局。

   这里收的都是「通用」层:颜色 / 字体 / 形状 token、深色变量、body 底色与 body::before 五点柔光、磨砂 .card、
   顶部 .top 大标题区、药丸 .pill、tag 串 .tag / 输入 .tzin / 下拉 .tzlist、填充输入 .field、命中标签 .hit、
   空态 .note、页脚 .icp,以及动效与键盘焦点规则。页面自己的网格 / 行结构不进来。

   调节旋钮:
   - 柔光浓度只改 --glow-alpha(浅色 1,深色 .22);五点颜色以 rgb 通道值存,alpha 走这个旋钮。
   - 衬线 "Chanshu Serif" 是思源宋体 SemiBold 的子集(scripts/fundfont.py 按库切,约 1500 字),只给静态标题
     与「已知在子集内」的文字用;股票名 / 时区名等动态文本一律系统无衬线,否则子集外的字逐字回退会花。
   形状约定(全站一套):卡片 18,内部容器 12,输入 10,徽标 6,可交互药丸全圆。 */
@font-face {
  font-family: "Chanshu Serif";
  src: url(/assets/fonts/NotoSerifSC-600.subset.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
/* 补充面:主子集按库切,不含「戳 / 叠 / → / 近浏览」(首页 / 行情页标题)与「借款 / 还 / 编辑 / 认 / 负」(负债页标题)这几个字;
   这里用同一字族(系统自带 NotoSerifSC-VF 实例化 wght=600)只切这 13 个字(几 KB),同名 + unicode-range 兜住。
   同一字符同时命中两个面时以后定义者为准,所以放在主面之后;将来主子集补齐这些字也不冲突。 */
@font-face {
  font-family: "Chanshu Serif";
  src: url(/assets/fonts/NotoSerifSC-600.extra.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+2192, U+501F, U+53E0, U+6233, U+6B3E, U+6D4F, U+7F16, U+89C8, U+8BA4, U+8D1F, U+8F91, U+8FD1, U+8FD8;
}
:root {
  color-scheme: light dark;
  --serif: "Chanshu Serif", "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* 墨色与其派生:次级文字 / 发丝线 / 填充。次级 alpha 取 .70 而不是设计稿的 .62:
     磨砂卡叠在桃色柔光上时 .62 只有 4.0:1,不到 AA;.70 约 5.0:1。 */
  --ink: #2A2B3A; --sec: rgba(42, 43, 58, .70); --hair: rgba(42, 43, 58, .10); --fill: rgba(42, 43, 58, .06);
  --accent: #2A2B3A; --on-accent: #FBF6EE;
  /* 五点柔光用 rgb 通道值存,alpha 走 --glow-alpha 一个旋钮(默认 1,想调淡改这一处)。 */
  --peach: 249 198 176; --pink: 246 184 208; --lav: 207 194 242; --lemon: 251 231 166; --sky: 203 218 246;
  --glow-alpha: 1;
  --page: #FAF3F0;
  --card: rgba(255, 253, 251, .78); --edge: rgba(255, 255, 255, .7); --blur: blur(16px) saturate(1.2);
  --rowhover: rgba(255, 255, 255, .6);
  --shadow: 0 30px 70px -30px rgba(150, 100, 170, .35), 0 1px 0 rgba(255, 255, 255, .8) inset;
  --shadow-sm: 0 1px 3px rgba(42, 43, 58, .05);
  --table: rgba(255, 255, 255, .85); --menu: #FFFDFA;
  --hit-bg: rgba(150, 120, 200, .16); --hit-fg: #5A4A86;
  /* 涨跌色按 13px 小字取「文字级」深度:浅色 4.9:1 / 4.7:1。 */
  --up: #B4452E; --down: #2F7A4F; --up-soft: rgba(180, 69, 46, .12);
  --skb-shine: rgba(255, 255, 255, .55);
  /* 对话框遮罩:墨色 35%。 */
  --scrim: rgba(42, 43, 58, .35);
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #EEE9E1; --sec: rgba(238, 233, 225, .62); --hair: rgba(238, 233, 225, .10); --fill: rgba(238, 233, 225, .08);
    --accent: #EEE9E1; --on-accent: #14162A;
    --glow-alpha: .22;
    --page: #14162A;
    --card: rgba(31, 34, 64, .72); --edge: rgba(255, 255, 255, .08); --blur: blur(16px) saturate(1.1);
    --rowhover: rgba(255, 255, 255, .05);
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
    --table: rgba(20, 22, 42, .55); --menu: #23264A;
    --hit-bg: rgba(207, 194, 242, .18); --hit-fg: #CFC2F2;
    --up: #FF8A7A; --down: #7FD69A; --up-soft: rgba(255, 138, 122, .16);
    --skb-shine: rgba(255, 255, 255, .08);
    --scrim: rgba(0, 0, 0, .5);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* 动效:药丸 / 按钮按压与背景过渡,只动 transform/opacity(背景色过渡除外,仅为消除闪跳),
   整体受 prefers-reduced-motion 约束。页面自己的动效(展开 / 骨架微光)在各页追加,同样包在这个 media 里。 */
@media (prefers-reduced-motion: no-preference) {
  .pill, .tag .tx, .more { transition: background-color .15s ease, color .15s ease, transform .15s cubic-bezier(.16, 1, .3, 1); }
  .pill:active:not(:disabled), .tag .tx:active, .more:active:not(:disabled) { transform: scale(.96); }
}
/* 键盘焦点统一走墨色描边;输入框聚焦由填充面加深提示。 */
.pill:focus-visible, .tag .tx:focus-visible, .more:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px;
}
.pill:focus-visible, .tag .tx:focus-visible { border-radius: 999px; }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.tzin:focus-visible { outline: none; }

html, body { margin: 0; }
body {
  min-height: 100vh; background: var(--page); color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; position: relative;
}
/* 柔光层:fixed 铺满视口、滚动不动;五个径向渐变各占一角加中心一点。 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 8% 5%, rgb(var(--peach) / var(--glow-alpha)) 0%, transparent 70%),
    radial-gradient(55% 50% at 92% 8%, rgb(var(--lav) / var(--glow-alpha)) 0%, transparent 70%),
    radial-gradient(60% 50% at 80% 90%, rgb(var(--lemon) / var(--glow-alpha)) 0%, transparent 70%),
    radial-gradient(55% 45% at 15% 95%, rgb(var(--sky) / var(--glow-alpha)) 0%, transparent 70%),
    radial-gradient(45% 40% at 50% 50%, rgb(var(--pink) / var(--glow-alpha)) 0%, transparent 75%);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sec { color: var(--sec); }

/* 全站顶栏(由 /assets/nav.js 渲染):56px 细条,sticky 吸顶,磨砂让柔光透过;最左站标 → 页面药丸 / 右动作槽(页面自己的胶囊与按钮)。
   吸顶后各页 sticky 侧栏的 top 要让出这 56px(见各页 .side / .filters)。账号页 /account/ 不带顶栏(登录页惯例)。 */
.sitenav {
  position: sticky; top: 0; z-index: 20; height: 56px;
  background: var(--nav-bg, rgba(250,243,240,.55)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hair);
}
/* 顶栏内层不跟内容同宽:不设 max-width,贴视口两侧只留 24px(GitHub 式),站标靠最左、动作槽靠最右;
   内容区各页同样随视口拉满(不设宽度上限),只留两侧内边距;登录页那张卡是内容自身宽度,不算。 */
.navin { display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 24px; }
.navbrand { display: inline-flex; flex: none; border-radius: 8px; }
.navbrand svg { display: block; width: 28px; height: 28px; }
.navbrand rect { fill: var(--ink); }
.navbrand path { stroke: var(--page); }
.navbrand:hover { opacity: .8; }
.navlinks { display: flex; gap: 6px; }
.navlinks .pill { text-decoration: none; color: var(--ink); }
.navlinks .pill.on { color: var(--on-accent); }
.navr { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.navr:empty { display: none; }
/* 登录态(nav.js 渲染):未登录「登录」链接;已登录 昵称药丸(过长截断)+ 小箭头,点击 / 悬停下拉「账号设置 / 退出登录」。 */
.navacct { position: relative; }
.navacct .acct { max-width: 160px; gap: 5px; text-decoration: none; color: var(--ink); }
.navacct .acct .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navacct .acct svg { width: 12px; height: 12px; flex: none; opacity: .6; transition: transform .15s ease; }
.navacct.open .acct svg { transform: rotate(180deg); }
.navmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 150px; padding: 6px; display: none;
  background: var(--menu); border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 16px 40px -8px rgba(42, 43, 58, .28);
}
.navacct.open .navmenu { display: block; }
.navmenu .mi {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; line-height: 1.3; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.navmenu .mi:hover { background: var(--fill); }
.navmenu .mi:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* 工具组下拉(nav.js 渲染):组名药丸 + 小箭头,菜单复用 .navmenu 这套皮、只是左对齐到药丸;当前组药丸 .on,当前工具项 .mi.on。 */
.navdrop { position: relative; }
.navdrop .pill { gap: 5px; }
.navdrop .pill svg { width: 12px; height: 12px; flex: none; opacity: .6; transition: transform .15s ease; }
.navdrop.open .pill svg { transform: rotate(180deg); }
.navdrop .navmenu { left: 0; right: auto; }
.navdrop.open .navmenu { display: block; }
.navmenu .mi.on { font-weight: 500; background: var(--fill); }
/* 窄屏替代整排药丸的「当前页」下拉(nav.js 渲染,结构同 .navdrop):宽屏不出现。 */
.navcur { display: none; }
@media (prefers-color-scheme: dark) { .sitenav { --nav-bg: rgba(20,22,42,.55); } }
/* 回到顶部(nav.js 渲染):右下角 40px 磨砂圆钮,默认隐去,滚过一屏加 .show 浮现;避开底部居中的 .toast。 */
.totop {
  position: fixed; right: 24px; bottom: 28px; z-index: 25; width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--edge); border-radius: 50%;
  background: var(--card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-sm);
  color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.totop svg { width: 18px; height: 18px; }
.totop.show { opacity: 1; pointer-events: auto; transform: none; }
.totop:hover { background: var(--menu); }
.totop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 1000px) { .totop { right: 16px; bottom: 20px; } }
@media (max-width: 1000px) { .navin { padding: 0 16px; gap: 12px; } }
/* 窄屏:整排药丸换成一枚「当前页」药丸 + 下拉(之前是横向滑动藏滚动条,但 flex 没给它下限,右槽胶囊一宽就把它挤到零宽,
   手机上菜单直接消失)。下拉贴顶栏下方全宽浮出(.sitenav 的 backdrop-filter 成为 fixed 的包含块,top/left 都相对顶栏算,
   顶栏本就贴着视口顶与两侧)。右槽让步:页面胶囊的值可省略号截断、账号药丸收窄,四件东西在 360px 也固定放得下。 */
@media (max-width: 600px) {
  .navlinks { display: none; }
  .navcur { display: block; }
  .navdrop { position: static; }
  .navdrop .navmenu { position: fixed; left: 16px; right: 16px; top: 64px; }
  .navr { min-width: 0; }
  .navr .eyebrow { min-width: 0; }
  .navr .eyebrow b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navacct .acct { max-width: 110px; }
}
/* 顶栏之下没有大标题行:顶栏自带 24px 下边距(sticky 元素的 margin 仍占流内空间),让内容首行落在 80px,
   与各页 sticky 侧栏的 top: 80px 对齐,不然侧栏被 sticky 顶到 80 而右侧内容从 56 起,两卡上沿错位。 */
.sitenav { margin-bottom: 24px; }

/* 顶部:左衬线大标题 + 一句副文案,右侧胶囊(报告期 / 时区 / 设置入口)。顶栏之下,上内边距比无顶栏时收 12px。 */
.top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  width: 100%; max-width: 1560px; margin: 0 auto; padding: 28px 48px 26px;
}
.top h1 { margin: 0 0 6px; font: 600 38px/1.1 var(--serif); letter-spacing: -.02em; }
.lead { margin: 0; font-size: 14px; color: var(--sec); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--edge); box-shadow: var(--shadow-sm); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  font: 500 11px var(--mono); letter-spacing: .1em; color: var(--sec); white-space: nowrap;
}
.eyebrow b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 磨砂卡:半透明纸色 + 背景模糊 + 白边 + 长投影。 */
.card {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--edge); box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

/* tag 串 + 内联输入 + 下拉浮层(fund 的「持有」、首页的时区多选共用)。
   .tzlist 默认左右贴容器;想与卡片边缘对齐时由页面覆盖 left/right;top 由脚本或页面定。 */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: text; }
.tzin {
  flex: 1 1 140px; width: 140px; min-width: 0; height: 30px; border: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; caret-color: var(--ink);
}
.tzin::placeholder { color: var(--sec); }
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px; border-radius: 999px;
  background: var(--fill); font-size: 13px; white-space: nowrap;
}
.tag .tn { color: var(--ink); font-weight: 500; }
.tag .ti { color: var(--sec); font-size: 11px; }
.tag .tx {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  padding: 0; border: 0; border-radius: 50%; background: var(--sec); color: var(--page); cursor: pointer;
}
.tag .tx svg { width: 8px; height: 8px; }
.tag .tx:hover { background: var(--ink); }
.tzlist {
  position: absolute; left: 0; right: 0; z-index: 10;
  margin: 0; padding: 6px; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--menu); border-radius: 12px; border: 1px solid var(--edge);
  box-shadow: 0 16px 40px -8px rgba(42, 43, 58, .28);
}
.tzlist li { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.tzlist li.on, .tzlist li:hover { background: var(--fill); }
.tzlist li.none { color: var(--sec); font-size: 13px; cursor: default; background: none; }
.tzlist .cd { margin-left: auto; flex: none; color: var(--sec); font-size: 12px; }

/* 药丸:多选 / 单选 / 小按钮;选中 = 墨色底米白字;禁用弱化。 */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* 药丸同时用于 <button> 与 <a>:button 会自动把文字垂直居中,a 不会(块盒 30px 高、文字按行高贴顶),
   所以统一用 inline-flex 居中 + line-height 1,两种元素渲染完全一致。 */
.pill {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--fill);
  color: var(--ink); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; white-space: nowrap;
}
.pill.on { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.pill:disabled { opacity: .4; cursor: not-allowed; }

/* 填充输入:圆角 10、高 36。 */
.field {
  display: block; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill);
  color: var(--ink); font: inherit; font-size: 14px; caret-color: var(--ink);
}
.field::placeholder { color: var(--sec); font-size: 13px; }

/* 命中标签:薰衣草底(名 + 占比 + 排名),行情页重仓基金卡与 fund 结果行共用。 */
.hit { display: inline-flex; align-items: baseline; padding: 3px 9px; border-radius: 8px; background: var(--hit-bg); color: var(--hit-fg); font-size: 12px; white-space: nowrap; }
.hit b { font-weight: 500; }
.hit .pct { margin-left: 5px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hit .rk { margin-left: 4px; font-family: var(--mono); font-size: 11px; opacity: .75; }
/* 小圆标签(类型 / 代码)。 */
.stl { display: inline-block; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: 11px; line-height: 18px; }

/* 空态 / 错误提示。 */
.note { padding: 22px; text-align: center; font-size: 14px; color: var(--sec); }
.note.err { color: var(--up); }
.note small { display: block; margin-top: 4px; font-size: 12px; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }

@media (max-width: 1000px) {
  .top { flex-wrap: wrap; align-items: flex-start; padding: 22px 20px 18px; }
}
@media (max-width: 680px) {
  .top h1 { font-size: 30px; }
}

/* 页脚:两条备案链接,居中小字。 */
.icp { margin-top: auto; padding: 24px 16px 28px; text-align: center; font-size: 12px; color: var(--sec); }
.icp a { color: inherit; text-decoration: none; }
.icp a:hover { color: var(--ink); }
.icp a + a { margin-left: 12px; }

/* 日期选择器(/assets/datepick.js 渲染,替换各页的 <input type="date"> / datetime-local):顶层 popover,菜单底、圆角 14、长投影。
   左 日历:头行 « ‹ 年 月 › »(年 / 月可点进年份 / 月份面板),周一开头,固定六行(相邻月淡显),今天描边、选中反色;
   右 时 / 分 / 秒 三列(仅日期时间模式,底边与日历对齐);脚行 清除 · 今天 / 此刻 · 确定。窄屏时间列挪到日历下面。 */
.dp {
  position: fixed; inset: auto; margin: 0; padding: 10px 12px 8px; overflow: visible; max-width: calc(100vw - 16px);
  border: 1px solid var(--edge); border-radius: 14px; background: var(--menu); color: var(--ink);
  box-shadow: 0 16px 40px -8px rgba(42, 43, 58, .28); font-size: 13px;
}
.dp button { font: inherit; color: inherit; cursor: pointer; }
.dp button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dp-body { display: flex; gap: 10px; }
.dp-cal { width: 264px; flex: none; }
.dp-hd { display: flex; align-items: center; gap: 2px; height: 28px; margin-bottom: 8px; }
.dp-nav { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--sec); }
.dp-nav svg { width: 14px; height: 14px; }
.dp-nav:hover { background: var(--fill); color: var(--ink); }
.dp-title { flex: 1; display: flex; justify-content: center; align-items: center; gap: 2px; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.dp-title button { padding: 3px 7px; border: 0; border-radius: 8px; background: transparent; }
.dp-title button:hover { background: var(--fill); }
.dp-wd { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px; height: 20px; margin-bottom: 4px; align-items: center; text-align: center; font-size: 11px; color: var(--sec); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px; }
.dp-grid3 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; height: 226px; }
.dp-c { height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.dp-grid3 .dp-c { height: auto; }
.dp-c:hover { background: var(--fill); }
.dp-c.dp-other { color: var(--sec); opacity: .55; }
.dp-c.dp-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dp-c.dp-sel { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dp-time { display: flex; gap: 4px; align-self: flex-end; height: 226px; padding-left: 10px; border-left: 1px solid var(--hair); }
.dp-col { position: relative; width: 50px; overflow-y: auto; scrollbar-width: none; } /* 滚动条悬停才露(antd 同款),滚轮照常 */
.dp-col::-webkit-scrollbar { display: none; }
.dp-col:hover { scrollbar-width: thin; }
.dp-col:hover::-webkit-scrollbar { display: block; width: 4px; }
.dp-col:hover::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 2px; }
.dp-tc { display: block; width: 100%; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.dp-tc:hover { background: var(--fill); }
.dp-tc.dp-on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dp-ft { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }
.dp-sp { flex: 1; }
.dp-ft button { height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; font-size: 12.5px; }
.dp-ft button:hover { background: var(--fill); }
.dp-ft .dp-ok { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.dp-ft .dp-ok:hover { background: var(--accent); opacity: .85; }
@media (max-width: 560px) {
  .dp-body { flex-direction: column; }
  .dp-time { align-self: stretch; height: 140px; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
  .dp-col { flex: 1; width: auto; }
}
/* 被组件接管的输入框:等宽数字。 */
input[data-dp] { font-family: var(--mono); font-variant-numeric: tabular-nums; }