/* 微店抽抽乐 · 双池战报
   ⚠️ 本文件刻意「不使用任何 CSS 自定义属性（--xxx）」：
   某些内置浏览器 / 预览沙箱会丢弃 --变量声明（也会丢弃含 var() 的整条声明），
   一旦如此，所有边框会变成 none（看不到线）、grid 列数会退化成单列（进度条竖着摞成一片空白）。
   所以配色与线条全部写字面值；进度条的列数由 app.js 用内联 style 写入字面量。
   ⚠️ 同理不用 background 渐变做关键色块（同一个宿主也可能丢渐变）：
   页头花标改成实色底 + 白花瓣 + 深色花心，三层都是字面值。 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #f7faef;
  background-color: #f7faef;
  background-image: linear-gradient(180deg, #fbfdf6 0%, #eef6e1 100%);
  background-attachment: fixed;
  color: #33402a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.sheet-open { overflow: hidden; }

.app { max-width: 1080px; margin: 0 auto; padding: 22px 18px 40px; }

/* ---------- 卡片 ---------- */
.card {
  background: #ffffff;
  border: 1px solid #cfe0ae;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(105, 140, 60, .07);
  padding: 0 0 16px;
  overflow: hidden;
}
.card-h {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px 11px;
  border-bottom: 1px solid #d8e8be;
  background: #f4f9ea;
  margin-bottom: 14px;
}
.card-h b { font-size: 14.5px; font-weight: 600; }
.card-sub {
  font-size: 12.5px; color: #8a9678; margin-left: auto; text-align: right;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card > *:not(.card-h) { margin-left: 18px; margin-right: 18px; }
.card > .feed-head, .card > .feed { margin-left: 0; margin-right: 0; }

/* ---------- 卡片小图标 ---------- */
.ph-ic { width: 19px; height: 19px; border-radius: 5px; flex: none; display: grid; place-items: center; }
.ph-ic svg { width: 12px; height: 12px; display: block; }
.ic-bolt { background: #eaf4d8; color: #a3c95b; }
.ic-flag { background: #eef5e1; color: #7f8c6d; }
.ic-feed { background: #eaf4d8; color: #a3c95b; }
.ic-day { background: #eef5e1; color: #8a9678; }

/* ---------- 页头 ---------- */
.head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid #cfe0ae;
}
.hd-l { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 240px; min-width: 0; }
.hd-txt { min-width: 0; }
.hd-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background-color: #a3c95b; border: 1px solid #8fb545;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(110, 150, 60, .22);
  overflow: hidden;                 /* 图片按圆角裁切，不越界 */
}
.hd-mark svg { width: 20px; height: 20px; display: block; }
/* 页头图标：用户提供的萌兔图（assets/rabbit_icon.png，已裁掉右下角水印）。
   用 cover 铺满方框；原图背景是浅绿草地，与主题色同系，缩到 34px 依然清楚。 */
.hd-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
h1 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -0.2px; line-height: 1.35; overflow-wrap: anywhere; }
.hd-scope {
  margin: 6px 0 0; font-size: 12.5px; color: #7f8c6d;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.hd-scope b { color: #4f6a18; font-weight: 600; }
.hd-r { display: flex; align-items: center; gap: 12px; flex: none; padding-top: 4px; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #647057; }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: #8a9678; display: block; }
.conn.ok i { background: #7f9179; }
.conn.bad i { background: #cf7f74; }
.conn b { font-weight: 500; }
.hd-time { font-size: 12.5px; color: #8a9678; font-variant-numeric: tabular-nums; }

/* ---------- 记分板：合计独占一行 → 下一行 A池 | B池 ---------- */
.score {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-bottom: 0; align-items: start;
}
/* 合计卡横跨整行（它没有进度条，不需要被挤成 1/3 宽）；
   下一行才是 A池 | B池 两张卡并排，进度条格子能宽一倍 */
.score .tmid { grid-column: 1 / -1; }
/* 整行宽度下别把内容拉散：标题行仍占满，下面「两池合计大数字」在左、「领先信息」贴右 */
@media (min-width: 621px) {
  .score .tmid { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
  .score .tmid .pc-top { flex: 1 0 100%; }
  .score .tmid .pc-num { margin: 11px 0 3px; }
  .score .tmid .lead-line { flex: 0 0 auto; margin: 11px 0 3px auto; }
}
.pcard, .tmid {
  background: #ffffff; border: 1px solid #cfe0ae;
  border-radius: 12px; box-shadow: 0 1px 2px rgba(105, 140, 60, .07);
  padding: 14px 15px 13px; min-width: 0;
}
.pcard.a { border-top: 3px solid #a9d06a; }
.pcard.b { border-top: 3px solid #6e9a2e; }
.tmid { border-top: 3px solid #a3c95b; background: #f9fcf3; background-color: #f9fcf3; }

.pc-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid #eaf3dc;
}
.pc-key { font-size: 15px; font-weight: 600; }
.pcard.a .pc-key { color: #8fb545; }
.pcard.b .pc-key { color: #5e7c20; }
.tmid .pc-key { color: #4f6a18; }
.pc-tag {
  font-size: 11.5px; padding: 1px 8px; border-radius: 999px;
  background: #f0f6e5; color: #647057; border: 1px solid #dceac4;
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-num { display: flex; align-items: baseline; gap: 6px; margin: 9px 0 10px; }
.pc-num b {
  font-size: 34px; font-weight: 600; letter-spacing: -1px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pcard.a .pc-num b { color: #8fb545; }
.pcard.b .pc-num b { color: #5e7c20; }
.tmid .pc-num b { color: #4f6a18; }
.pc-unit { font-size: 13px; color: #8a9678; }

/* ---------- 池进度条框：每格 1 万，一行 10 格（列数由 JS 内联写入） ---------- */
.pc-bar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)); /* 兜底：JS 用内联 style 覆盖成实际列数 */
  gap: 2px; padding: 3px;
  border: 1px solid #cfe0ae; border-radius: 8px;
  background: #f4f9ea; background-color: #f4f9ea;
  margin-bottom: 7px;
}
/* 每格自带细边框 —— 空格子也要看得见「一格一格」 */
.pc-bar i {
  height: 14px; display: block; border-radius: 3px;
  background: #e6f2d0; background-color: #e6f2d0;
  border: 1px solid #cde1ac;
}
.pcard.a .pc-bar i.on { background: #a9d06a; background-color: #a9d06a; border-color: #8fb545; }
.pcard.b .pc-bar i.on { background: #6e9a2e; background-color: #6e9a2e; border-color: #4a6318; }
.pc-bar-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: #8a9678; margin-bottom: 8px;
  font-variant-numeric: tabular-nums; flex-wrap: wrap;
}
.pc-bar-cap b { color: #647057; font-weight: 500; }

.pc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding-top: 9px;
  border-top: 1px solid #eaf3dc; flex-wrap: wrap;
}
.pc-sub { font-size: 12px; color: #8a9678; font-variant-numeric: tabular-nums; min-width: 0; }
.pc-price { font-size: 12px; color: #647057; font-variant-numeric: tabular-nums; }

.lead-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border: 1px solid #d8e8be; border-radius: 8px;
  background: #ffffff; padding: 6px 10px; margin-bottom: 9px;
}
.ll-who { font-size: 12.5px; color: #647057; }
.ll-gap { font-size: 14px; font-weight: 600; color: #4f6a18; margin-left: auto; font-variant-numeric: tabular-nums; }
.ll-u { font-size: 11.5px; color: #8a9678; }

/* ---------- 板块之间的分隔线 ---------- */
.rule {
  height: 1px; background: #cfe0ae; background-color: #cfe0ae;
  margin: 16px 0; border: 0;
}

/* ---------- 区块网格 ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }

/* ---------- 当前速度 ---------- */
.spd-main { display: flex; align-items: baseline; gap: 8px; padding-top: 2px; flex-wrap: nowrap; }
.spd-main b {
  font-size: 36px; font-weight: 600; letter-spacing: -1px; flex: none;
  font-variant-numeric: tabular-nums; color: #a3c95b; line-height: 1.1;
}
.spd-unit { font-size: 13px; color: #647057; flex: none; }
/* 说明跟在数字右边同一行：只吃剩余宽度，窄了就被省略号截断，不撑列宽 */
.spd-cap {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 12px; color: #8a9678;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 「当前速度」口径说明小字（近 5 分钟滑动窗口） */
.spd-hint { margin-top: 3px; font-size: 11.5px; color: #98a488; line-height: 1.4; }

.spd-t { border: 1px solid #d8e8be; border-radius: 8px; overflow: hidden; margin-top: 12px; }
.spd-th, .spd-tr {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch; gap: 0;
}
.spd-th > *, .spd-tr > * { display: flex; align-items: center; padding: 0 10px; min-width: 0; }
.spd-th > * + *, .spd-tr > * + * { border-left: 1px solid #d8e8be; }
.spd-th { font-size: 11.5px; color: #8a9678; background: #f4f9ea; border-bottom: 1px solid #d8e8be; }
.spd-th > * { padding-top: 7px; padding-bottom: 7px; }
.spd-th .v { justify-content: flex-end; }
.spd-tr { font-size: 13px; border-bottom: 1px solid #eaf3dc; }
.spd-tr:last-child { border-bottom: none; }
.spd-tr > * { padding-top: 7px; padding-bottom: 7px; }
.spd-tr .k { color: #647057; }
.spd-tr .v { justify-content: flex-end; font-variant-numeric: tabular-nums; font-weight: 500; }
.spd-tr .v.pred { color: #a3c95b; }
.spd-tr .v.dim { color: #8a9678; font-weight: 400; font-size: 12px; }
.spd-tr.primary { background: #eaf4d8; }
.spd-tr.primary .k { color: #4f6a18; font-weight: 500; }

.card-note { margin-top: 12px; font-size: 12px; color: #8a9678; line-height: 1.55; }

/* ---------- 里程碑 ---------- */
/* 最近达成 / 下一目标 = 左右两列（同一个框，中间一条竖线） */
.ms-now {
  display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px;
  border: 1px solid #d8e8be; border-radius: 8px; overflow: hidden;
  background: #f4f9ea; background-color: #f4f9ea;
}
.ms-now-col {
  min-width: 0; padding: 9px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.ms-now-col + .ms-now-col { border-left: 1px solid #d8e8be; }
.ms-now-k { font-size: 12px; color: #8a9678; }
.ms-now-col b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ms-now-note {
  font-style: normal; font-size: 11.5px; color: #8a9678;
  font-variant-numeric: tabular-nums;
}

.ms-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px; max-height: 266px; overflow-y: auto; padding: 2px;
}
/* 里程碑列表不沿用 104px 基础格：2 列 + 右边滚动条刚好被出格线，
   右边距预留 12px（约一个滚动条宽），格子才不会贴到容器边缘 */
#msList {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 5px; padding-right: 12px;
}
/* 有「达成时间 + 用时」的格子时收窄一点，列数就能多挤出一列 */
.ms-list.ms-wide { grid-template-columns: repeat(auto-fill, 118px); }
.ms-cell {
  border: 1px solid #d8e8be; border-radius: 7px; padding: 7px 9px;
  font-size: 12px; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 1px; background: #ffffff;
}
.ms-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 5px;
}

.ms-head b,
.ms-head em { flex: none; min-width: 0; }

.ms-cell b { font-weight: 500; color: #647057; }
.ms-cell em { font-style: normal; font-size: 11px; line-height: 1.4; }
.ms-cell .ms-used { color: #8a9678; }
.ms-cell .ms-at {
  color: #8a9678; font-size: 10.5px;
  display: flex; flex-direction: column; gap: 0;
  letter-spacing: -0.2px;
}
/* 达成时间 / 用时 各占一行（用户指定分行，别改回同排） */
.ms-cell .ms-at .ms-date,
.ms-cell .ms-at .ms-use { white-space: nowrap; display: block; }
.ms-cell .ms-state { color: #8a9678; }
.ms-cell.done { background: #eaf4d8; border-color: #d6e8b8; }
.ms-cell.done b { color: #4f6a18; }
.ms-cell.done .ms-used { color: #a8c47e; }
.ms-cell.used { background: #e2efca; border-color: #bcd794; }
.ms-cell.used b { color: #4f6a18; font-weight: 600; }
.ms-cell.used .ms-used { color: #4f6a18; font-weight: 500; }
.ms-cell.used .ms-at { color: #8fb545; }
.ms-cell.used .ms-at .ms-use { color: #8fb545; }
.ms-cell.big { border-color: #cbe0a6; }
.ms-cell.big.done { background: #dcebc0; border-color: #bcd794; }
.ms-cell.big.used { background: #d5e7b4; border-color: #a8c46a; }
.ms-cell.big b { color: #4f6a18; }
.ms-cell.now { border-color: #a3c95b; background: #ffffff; box-shadow: inset 0 0 0 1px #a3c95b; }
.ms-cell.now b { color: #4f6a18; font-weight: 600; }

/* ---------- 动态表（表头与数据行共用一个列模板 → 竖线必然对齐） ---------- */
.feed-head, .feed-row {
  display: grid;
  /* 首列 64px：「10:00」+ 左右内边距要放得下，窄了就会压出列线 */
  grid-template-columns: 64px repeat(5, minmax(0, 1fr));
  align-items: stretch; gap: 0;
}
/* 每日增长：日期 | 当日增长（带徽标，需要更宽的列） | 累计已售 */
.feed-head.d3, .feed-row.d3 { grid-template-columns: 80px minmax(0, 1.3fr) minmax(0, 1fr); }
/* 时间/日期列一律不折行：「10:00」会被压出列线，「10-01」会在连字符处断成两行 */
.feed-head .t, .feed-row .t { white-space: nowrap; }
.feed-head > *, .feed-row > * { display: flex; align-items: center; padding: 0 9px; min-width: 0; }
.feed-head > * + *, .feed-row > * + * { border-left: 1px solid #d8e8be; }
/* 首/末格多留一点内边距，让文字与卡片其它内容对齐（不改变栅格轨道，竖线仍对齐） */
.feed-head > *:first-child, .feed-row > *:first-child { padding-left: 16px; }
.feed-head > *:last-child, .feed-row > *:last-child { padding-right: 16px; }

.feed-head {
  font-size: 12px; color: #8a9678; background: #f4f9ea; background-color: #f4f9ea;
  border-bottom: 1px solid #d8e8be;
}
.feed-head > * { padding-top: 8px; padding-bottom: 8px; }
.feed-head .n { justify-content: flex-end; }
/* 逐小时的两张表（今日每小时 / 单日弹层）比别的表多一列（总销量）
   → 表头与数据行字号各收一档，六列下数字才不会互压 */
#hourlyHead, #dayHead { font-size: 11px; }
#hourlyHead .n, #dayHead .n { white-space: normal; line-height: 1.25; }
#hourly .feed-row, #dayFeed .feed-row { font-size: 12.5px; }
/* 六列表的徽标再收一档，六列下也尽量把「进行中 / 不完整」完整显示出来 */
#hourly .feed-row .tag, #dayFeed .feed-row .tag { font-size: 10.5px; padding: 0 4px; }
/* 六列下数字列内边距再收 3px，给「进行中」徽标留出位置；
   末列仍保留 16px 右内边距，与卡片正文右缘对齐 */
#hourlyHead > .n, #hourly > .feed-row > .n,
#dayHead > .n, #dayFeed > .feed-row > .n { padding-left: 6px; padding-right: 6px; }
#hourlyHead > .n:last-child, #hourly > .feed-row > .n:last-child,
#dayHead > .n:last-child, #dayFeed > .feed-row > .n:last-child { padding-right: 16px; }

.feed { max-height: 316px; overflow-y: auto; scrollbar-gutter: stable; }
.feed-row { border-bottom: 1px solid #e7f1d8; font-size: 13px; }
.feed-row > * { padding-top: 7px; padding-bottom: 7px; }
.feed-row:last-child { border-bottom: none; }
.feed-row .t { color: #647057; font-variant-numeric: tabular-nums; }
.feed-row .n { justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; }
.feed-row .d { font-weight: 500; }
.feed-row .d.hot { color: #b0333f; }
.feed-row .d.zero { color: #8a9678; font-weight: 400; }
.feed-row .sold { font-weight: 400; }
.feed-row .n.a { color: #8fb545; }
.feed-row .n.b { color: #5e7c20; }
.feed-row .n.sum { color: #4f6a18; font-weight: 600; }
/* 今日每小时「增量」列：徽标在数值前面、同一行 —— 数值右对齐所以各行落在同一列位置 */
.feed-row .n.sum {
  display: flex; flex-direction: row; align-items: center;
  justify-content: flex-end; gap: 5px;
}
.feed-row .n.sum .nv { font-weight: 600; }
/* 徽标可以横向压缩（裁字也不许压到左列数字上），数值本身不缩 */
.feed-row .n.sum .tag { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* 「每日增长」的当日增长列同样带徽标：列窄时让徽标省略号收缩，
   绝不越过列线压到日期列（原来徽标不可缩，列一窄就横穿竖线） */
.feed-row .n.d .tag { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.feed-row .n.zero { color: #8a9678; font-weight: 400; }
.feed-row .n.hot { color: #b0333f; font-weight: 600; }

/* 表格首行「本日起点」（正常是 00:00，首日是接入时刻）：只有该时刻的累计，没有增量，颜色收淡 */
.feed-row.base { background: #f8fcf2; }
.feed-row.base .t { color: #8a9678; }

/* 可点开的行（每日增长 → 单日归档） */
.feed-row.clickable { cursor: pointer; }
.feed-row.clickable:hover { background: #f2f8e6; }
.feed-row .go { color: #b6cd94; font-size: 11px; margin-left: 5px; flex: none; }

.tag {
  font-style: normal; font-weight: 400; font-size: 11px; line-height: 1.6;
  color: #8a9678; background: #f0f6e5; border: 1px solid #dceac4;
  border-radius: 4px; padding: 0 5px; white-space: nowrap;
}
.tag.live { color: #4f6a18; background: #eaf4d8; border-color: #d6e8b8; }
.tag.est { color: #4f6a18; background: #e2efca; border-color: #cbe0a6; cursor: help; }
.tag.est.big { color: #3f5514; background: #d3e6b0; border-color: #bcd794; }
.feed-empty { padding: 18px 18px 8px; font-size: 12.5px; color: #8a9678; line-height: 1.75; }
.feed-empty b { color: #a3c95b; font-weight: 600; }

/* ---------- 表尾汇总（每项一行） ---------- */
.feed-foot { margin-top: 12px; font-size: 12px; color: #8a9678; }
.ft-line {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; border-top: 1px solid #eaf3dc;
}
.ft-line:first-child { border-top: 0; padding-top: 0; }
.ft-k { min-width: 54px; color: #8a9678; flex: none; }
.ft-b { font-weight: 600; color: #647057; font-variant-numeric: tabular-nums; }
.ft-d { margin-left: auto; font-variant-numeric: tabular-nums; flex: none; }
.ft-d.up { color: #b0333f; }
.ft-d.down { color: #6f8a67; }
.ft-d.none { color: #a3ae95; }

/* ---------- 页脚 ---------- */
.foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid #cfe0ae;
  font-size: 12.5px; color: #8a9678; flex-wrap: wrap;
}
.foot-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foot-line { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.foot-keep { color: #98a488; }
/* 近 24 小时出现过异常断档（平台挂起/回收）时标红，提醒保活失效过 */
.foot-keep.warn { color: #b0333f; }
.foot-src { color: #a3ae95; }
.foot-r { display: flex; align-items: center; gap: 14px; flex: none; }
.foot button {
  font: inherit; font-size: 12.5px; color: #647057; cursor: pointer;
  background: #ffffff; border: 1px solid #cfe0ae;
  border-radius: 8px; padding: 5px 12px;
}
.foot button:hover { border-color: #a3c95b; color: #33402a; }

/* ---------- 单日归档弹层 ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sheet[hidden] { display: none; }
.sheet-mask { position: absolute; inset: 0; background: rgba(45, 62, 28, .42); background-color: rgba(45, 62, 28, .42); }
.sheet-box {
  position: relative; width: 100%; max-width: 640px; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #ffffff; border: 1px solid #cfe0ae; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(55, 75, 30, .30);
}
.sheet-h {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 13px 16px; border-bottom: 1px solid #d8e8be;
  background: #f4f9ea; background-color: #f4f9ea;
}
.sheet-h b { font-size: 15px; font-weight: 600; }
.sheet-sub { font-size: 12px; color: #8a9678; font-variant-numeric: tabular-nums; }
.sheet-x {
  margin-left: auto; flex: none; width: 28px; height: 28px;
  display: grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 18px; line-height: 1; color: #647057;
  background: #ffffff; border: 1px solid #cfe0ae; border-radius: 8px;
}
.sheet-x:hover { border-color: #a3c95b; color: #33402a; }
.sheet-sum {
  display: flex; flex-wrap: wrap; gap: 4px 16px; flex: none;
  padding: 10px 16px; font-size: 12.5px; color: #647057;
  border-bottom: 1px solid #e7f1d8;
}
.sheet-sum b { font-variant-numeric: tabular-nums; }
.sheet-sum .up { color: #b0333f; }
.sheet-sum .down { color: #6f8a67; }
.sheet-box .feed-head { border-top: 0; }
.sheet-box .feed { flex: 1 1 auto; max-height: none; overflow-y: auto; }
.sheet-foot { flex: none; padding: 10px 16px 12px; font-size: 12px; color: #8a9678; border-top: 1px solid #e7f1d8; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* 手机：页头改上下两段（标题独占整行 → 不再折出孤零零一个字） */
@media (max-width: 620px) {
  .app { padding: 16px 12px 32px; }
  .head { flex-direction: column; align-items: stretch; gap: 9px; }
  .hd-l { flex: none; }
  h1 { font-size: 17px; }
  .hd-r { justify-content: space-between; padding-top: 0; }
  .score { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tmid { grid-column: 1 / -1; order: 1; }
  .pcard.a { order: 2; }
  .pcard.b { order: 3; }
  .pcard, .tmid { padding: 12px 12px 11px; }
  .pc-num b { font-size: 28px; }
  .pc-tag { max-width: 58%; }
  .spd-main b { font-size: 30px; }
  .ms-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-right: 0; }
  .ms-cell { padding: 6px 7px; font-size: 11.5px; border-radius: 6px; }
  .ms-cell em { font-size: 10.5px; }
  .ms-cell .ms-at { font-size: 10px; }
  .card > *:not(.card-h) { margin-left: 14px; margin-right: 14px; }
  .card > .feed-head, .card > .feed { margin-left: 0; margin-right: 0; }
  .card-h { padding: 12px 14px 10px; }
  .feed-head > *, .feed-row > * { padding-left: 7px; padding-right: 7px; }
  .feed-head > *:first-child, .feed-row > *:first-child { padding-left: 13px; }
  .feed-head > *:last-child, .feed-row > *:last-child { padding-right: 13px; }
  .feed-row { font-size: 12.5px; }
  /* 增量列加宽一档：徽标要与数值待在同一行，需要多一点横向空间。
     逐小时的两张表有 6 列（含「总销量」）→ 必须给足 6 条轨道，否则第 6 列会被挤到第二行 */
  .feed-head, .feed-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); }
  #hourlyHead, #hourly .feed-row, #dayHead, #dayFeed .feed-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.3fr); }
  .feed-row .n.sum { gap: 4px; }
  .feed-row .n.sum .tag { font-size: 10px; padding: 0 4px; border-radius: 3px; }
  .feed-empty { padding: 16px 14px 8px; }
  .spd-th > *, .spd-tr > * { padding-left: 8px; padding-right: 8px; }
  /* 里程碑「最近达成 / 下一目标」一律左右两栏（不堆叠），窄屏只压紧内边距与字号 */
  .ms-now-col { padding: 8px 10px; }
  .ms-now-col b { font-size: 13px; }
  .ms-now-k { font-size: 11.5px; }
  .ms-now-note { font-size: 11px; }
  .sheet { padding: 10px; }
  .sheet-box { max-height: 88vh; }
}

@media (max-width: 400px) {
  .pc-num b { font-size: 24px; }
  .ms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .ms-cell { padding: 5px 6px; font-size: 11px; }
  .ms-cell b { font-size: 10.5px; }
  .ms-cell em { font-size: 9.5px; }
  .ms-cell .ms-at { font-size: 9px; }
  /* 增量列加宽：徽标要与数值挤在同一行，需要多一点横向空间。
     逐小时两张表 6 列（含「总销量」）→ 同样给足 6 条轨道 */
  .feed-head, .feed-row { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); }
  #hourlyHead, #hourly .feed-row, #dayHead, #dayFeed .feed-row { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.05fr) minmax(0, 1.25fr); }
  .feed-row .n.sum { gap: 4px; padding-left: 3px; padding-right: 5px; }
  .feed-row .n.sum .tag { font-size: 9.5px; padding: 0 3px; border-radius: 3px; }
  .feed-head.d3, .feed-row.d3 { grid-template-columns: 66px minmax(0, 1.1fr) minmax(0, 1fr); }
  .feed-head > *, .feed-row > * { padding-left: 5px; padding-right: 5px; }
  .feed-head > *:first-child, .feed-row > *:first-child { padding-left: 10px; }
  .feed-head > *:last-child, .feed-row > *:last-child { padding-right: 10px; }
  .feed-row { font-size: 11.5px; }
  .pc-bar { gap: 2px; padding: 2px; }
  .pc-bar i { height: 12px; }
  .ms-now-col { padding: 7px 8px; }
  .ms-now-col b { font-size: 12.5px; }
  .ms-now-note { font-size: 10.5px; }
  .spd-main b { font-size: 22px; }
  .spd-unit { font-size: 11.5px; }
}

/* ---------- 宿主把字号整体放大时的紧凑排版（html.tzup 由 app.js 探针挂上） ----------
   只在手机档生效：桌面 / 不放大字号的环境一个像素都不改动。 */
@media (max-width: 620px) {
  html.tzup .head { gap: 7px; padding-bottom: 11px; margin-bottom: 13px; }
  html.tzup h1 { font-size: 16.5px; line-height: 1.25; }
  html.tzup .hd-scope { margin-top: 4px; font-size: 11.5px; }
  html.tzup .card-h { padding: 10px 14px 9px; margin-bottom: 11px; }
  html.tzup .card > *:not(.card-h) { margin-left: 14px; margin-right: 14px; }
  html.tzup .card > .feed-head, html.tzup .card > .feed { margin-left: 0; margin-right: 0; }
  html.tzup .feed-head, html.tzup .feed-row { font-size: 12px; }
  html.tzup .feed-head > * { padding-top: 6px; padding-bottom: 6px; }
  html.tzup .feed-row > * { padding-top: 5px; padding-bottom: 5px; }
  html.tzup .feed-foot { margin-top: 9px; }
  html.tzup .ft-line { padding: 3px 0; }
  html.tzup .ms-list { max-height: 210px; }
  html.tzup .ms-now { gap: 0; margin-bottom: 9px; }
  html.tzup .ms-now-col { padding: 7px 9px; }
  html.tzup .ms-now-col b { font-size: 12.5px; }
  html.tzup .ms-now-note { font-size: 10.5px; }
  html.tzup .card-note { margin-top: 9px; line-height: 1.45; }
  html.tzup .spd-tr > * { padding-top: 5px; padding-bottom: 5px; }
  /* 字号被放大后徽标再收一档，保证「徽标 + 数值」仍在一行内 */
  html.tzup .feed-row .n.sum { gap: 3px; }
  html.tzup .feed-row .n.sum .tag { font-size: 9.5px; padding: 0 3px; }
  html.tzup .spd-cap { font-size: 11px; }
  html.tzup .pc-num { margin: 7px 0 8px; }
}