/* ==========================================================================
   ecomspy — 组件层(Claude 官网风)
   卡片 / 表格 / 徽标 / 详情头 / 图表 / tabs / feed / 榜单
   依赖 style.css 定义的 :root tokens。克制:无渐变 · 无阴影 · 无动画。
   pcard 卡片见 style.css(与卡片网格同处)。
   ========================================================================== */

/* ============================== 数据表格 ============================== */
table.data {
  width: 100%; border-collapse: collapse; background: var(--card-bg);
  border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden;
  font-size: 13px;
}
table.data th, table.data td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd-2);
  vertical-align: middle;
  line-height: 1.45;
}
table.data th {
  background: var(--bg);
  font-weight: 600; color: var(--mut); font-size: 12px;
  text-align: left;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.data th a { color: var(--mut); font-weight: 600; }
table.data th a:hover { color: var(--txt); text-decoration: none; }
table.data th a.on { color: var(--txt); font-weight: 700; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--hover); }
table.data td.num { text-align: right; }
.cell-domain { display: inline-flex; align-items: center; gap: 8px; }
.cell-domain .ic {
  width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bd-2); color: var(--mut-2); font-size: 9px; font-weight: 700;
}
.cell-domain a { font-weight: 600; color: var(--txt); }
.bold { font-weight: 700; }

/* 通用徽章(深色字 + 浅色底) */
.badge { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.badge.ok { background: var(--up-bg); color: var(--up); }
.badge.failed { background: var(--warn-bg); color: var(--fail); }
.badge.running { background: var(--pri-bg); color: var(--accent-h); }
.badge.unsupported, .badge.muted { background: var(--bd-2); color: var(--mut); }

/* ============================== 详情头部 ============================== */
.detail-head {
  background: var(--card-bg); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 12px;
}
.detail-head .domain { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.detail-head .sub { color: var(--mut); font-size: 13px; margin-top: 2px; }
.detail-head .bigrow { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
/* 站点详情头部链接行 */
.head-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 13px;
}
.head-links a { font-weight: 500; }
.visits-big { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--txt); }
.growth-chip {
  font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 4px;
}
.growth-chip.up { color: var(--up); background: var(--up-bg); }
.growth-chip.down { color: var(--warn); background: var(--warn-bg); }
.growth-chip.flat { color: var(--mut); background: var(--bd-2); }

/* ============================== 图表容器 ============================== */
.chart-box {
  background: var(--card-bg); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 18px; overflow-x: auto;
}
.chart-box .legend { font-size: 12px; color: var(--mut); margin-bottom: 10px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
/* ≤3 个点或无变化时的一行流量摘要（替代大图） */
.traffic-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.traffic-summary .ts-label { color: var(--mut); font-size: 13px; }
.traffic-summary .ts-seq { font-weight: 600; font-variant-numeric: tabular-nums; }
.traffic-summary .ts-arrow { font-weight: 700; }
.traffic-summary .ts-arrow.up { color: var(--up); }
.traffic-summary .ts-arrow.down { color: var(--warn); }
.traffic-summary .ts-arrow.flat { color: var(--mut); }
.chart-box svg { display: block; }
.gridline { stroke: var(--bd-2); stroke-width: 1; }
.axislbl { font-size: 10px; fill: var(--mut); }

/* ============================== 来源指标(站点详情) ============================== */
.src-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: 12px; color: var(--mut);
}
.source-legend {
  display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--mut); flex-wrap: wrap;
}
.source-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.source-legend .lg .sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.source-legend .lg.paid .sw   { background: var(--pri); }
.source-legend .lg.social .sw { background: var(--up); }
.source-legend .lg.search .sw { background: var(--warn); }
.source-legend .lg.direct .sw { background: var(--flat); }
.source-legend .lg .v { font-weight: 600; color: var(--txt); }

/* Top 国家(详情页):浅底 pill 列表,国家名 + 占比,无图表库。 */
.country-list { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.country-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--bd); border-radius: var(--radius-sm);
  color: var(--mut);
}
.country-item .v { font-weight: 600; color: var(--txt); }

/* 产品详情面包屑 */
.crumbs {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  color: var(--mut);
  margin-bottom: 14px;
}
.crumbs a { color: var(--mut); font-weight: 500; }
.crumbs .sep { color: var(--mut-2); font-size: 11px; }
.crumbs .cur {
  color: var(--txt);
  font-weight: 500;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================== 产品详情布局 ============================== */
.product-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.product-layout .img-box { flex: 0 0 320px; }
.product-layout .img-box img { width: 100%; border-radius: var(--radius); border: 1px solid var(--bd); display: block; }
.product-layout .img-box .placeholder {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; font-weight: 800; color: var(--mut-2);
  background: var(--bd-2);
}
.product-layout .info { flex: 1; min-width: 280px; }
.product-layout .info .title { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; letter-spacing: -0.01em; }
.product-layout .info .price-big { font-size: 24px; font-weight: 800; color: var(--txt); margin-bottom: 14px; letter-spacing: -0.02em; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  background: var(--pri); color: #fff !important; font-weight: 600; font-size: 13px;
  border: none; cursor: pointer;
}
.cta-btn:hover { text-decoration: none; background: var(--accent-h); }
.info-meta { margin-top: 16px; font-size: 13px; color: var(--mut); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.info-meta .k { color: var(--mut-2); }
.info-meta .v { color: var(--txt); }

/* 冷启动 stat block(排名点数 ≤ 2) */
.stat-block {
  background: var(--card-bg); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 28px; text-align: center;
}
.stat-block .stat-num { font-size: 40px; font-weight: 800; color: var(--up); letter-spacing: -0.02em; }
.stat-block .stat-cap { color: var(--mut); font-size: 13px; margin-top: 8px; }

/* ============================== details 折叠 ============================== */
details.runs, details.snapshots {
  background: var(--card-bg); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 4px 0; margin-top: 16px;
}
details > summary {
  cursor: pointer; padding: 12px 18px; font-size: 14px; font-weight: 600;
  list-style: none; color: var(--txt);
  display: flex; align-items: center; gap: 6px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸"; color: var(--mut); font-size: 11px;
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { background: var(--hover); }
details .details-body { padding: 0 18px 16px; }

/* 未采集站点折叠块 */
details.idle-shops {
  background: var(--card-bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 4px 0;
  margin-top: 16px;
}
.idle-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 16px;
}
.idle-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
  background: var(--bg);
}
.idle-list a:hover { border-color: var(--mut-2); }
.idle-list small { font-size: 10px; color: var(--mut-2); }

/* 采集异常告警条(callout:左色条 + 浅底) */
.crawl-alert {
  background: var(--warn-bg);
  border-left: 3px solid var(--fail);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fail);
}

/* 空站详情页提示(callout:琥珀左色条 + 浅底) */
.empty-crawl-banner {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--pri-bg);
  border-left: 3px solid var(--pri);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-h);
  text-align: center;
}

/* 产品详情图片加载失败占位 */
.product-layout .img-box.noimg {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bd-2);
}
.product-layout .img-box.noimg::after {
  content: attr(data-ph);
  font-size: 48px;
  font-weight: 800;
  color: var(--mut-2);
}

/* ============================== 热销榜 ============================== */
/* 热销榜折叠:默认隐藏,JS 就绪后显示 */
.board-toggle { display: none; }
body.tabs-js .board-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 14px auto 0;
  padding: 7px 16px;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--mut);
  cursor: pointer;
}
body.tabs-js .board-toggle:hover {
  border-color: var(--mut-2);
  color: var(--txt);
  background: var(--hover);
}
body.tabs-js .board-grid.board-collapsed .board-extra { display: none; }

/* 排名角标 */
.rank-badge {
  position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px;
  padding: 0 5px; border-radius: 6px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(26, 23, 20, .72);
  font-variant-numeric: tabular-nums;
}
.rank-badge.top1 { background: #B45309; }  /* 金 —— 琥珀 */
.rank-badge.top2 { background: #A39C90; }  /* 银 —— 暖灰 */
.rank-badge.top3 { background: #92400E; }  /* 铜 —— 深琥珀 */

/* 榜单卡:无信号色条 */
.bcard::before { display: none; }
.bcard .body { padding-bottom: 4px; }
.board-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 12px 10px !important;
}
.ext-link { font-size: 12px; color: var(--mut); font-weight: 500; white-space: nowrap; }

/* 站点详情:榜单区标签页(最新上架 / 最近上升 / 热销榜) */
.tabs {
  display: flex;
  gap: 22px;
  margin: 28px 0 14px;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
}
.tabs .tab {
  flex: 0 0 auto;
  padding: 8px 2px 9px;
  margin-bottom: -1px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mut);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs .tab:hover { color: var(--txt); text-decoration: none; }
.tabs .tab.on { color: var(--txt); border-bottom-color: var(--pri); }
.tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
  background: var(--bd-2);
  border-radius: 999px;
}
.tabs .tab.on .tab-count { background: var(--txt); color: #fff; }
.pane-note { margin: 0 0 12px; font-size: 13px; color: var(--mut); }
.tabpane { margin-bottom: 8px; }
/* 无 JS 时三个面板全部展开;JS 就绪(body.tabs-js)后只显示激活面板 */
body.tabs-js .tabpane { display: none; }
body.tabs-js .tabpane.on { display: block; }
.thumb-link { display: block; color: inherit; }
.thumb-link:hover { text-decoration: none; }
.pcard .title { display: -webkit-box; }
.signal-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; margin-top: 7px; }
.signal-tag {
  display: inline-flex; align-items: center; min-height: 18px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--bd-2); color: var(--mut); font-size: 10px; font-weight: 700;
}
.signal-tag.rank_surge { color: #166534; background: var(--up-bg); }
.signal-tag.new_entrant { color: var(--accent-h); background: var(--pri-bg); }
/* 回归入榜:盖掉上面 new_entrant 的琥珀色(两个 class 同时出现在同一个 tag 上),
   用中性色弱化,不与"新入榜"抢眼;取值与基础 .signal-tag 相同,靠层叠顺序生效。 */
.signal-tag.is-returning { color: var(--mut); background: var(--bd-2); }
/* 疑似老品换 handle:复用 .signal-tag 尺寸/间距,只换成更弱的中性色,
   不再维护一份平行的 .flag-mark class(此前与 .signal-tag 基础样式近乎重复)。 */
.signal-tag.flag-old { color: var(--mut-2); }
.rank-change { font-size: 12px; font-weight: 600; white-space: nowrap; }
.history-link { color: var(--pri); font-weight: 600; white-space: nowrap; }
.empty-state {
  padding: 28px 20px; border: 1px solid var(--bd); border-radius: var(--radius);
  background: var(--card-bg); color: var(--mut); text-align: center;
}
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { color: var(--txt); margin-bottom: 4px; }
.empty-state code {
  font-size: 12px; background: var(--bd-2); padding: 1px 5px; border-radius: 4px;
  color: var(--txt);
}
.stat-hint { margin-top: 14px; color: var(--mut-2); }
.rank-segment {
  stroke: var(--up); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
}
.history-chart svg { min-width: 620px; }
.run-error {
  color: var(--mut); max-width: 300px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.cell-domain > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cell-domain small, table.data td > small { display: block; color: var(--mut); font-size: 10px; }
.cell-domain small.shop-summary { font-size: 12px; margin-top: 3px; max-width: 44ch; white-space: normal; line-height: 1.45; }
/* 监控状态列:三态徽标 + 最后成功采集 + 覆盖 */
.mon-cell .badge { margin-bottom: 3px; }
.mon-cell small { white-space: nowrap; }
/* 详情头监控行:徽标与文案同行 */
.monitor-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.table-wrap table { min-width: 900px; }

.board-foot { margin-top: 8px; padding: 0 !important; }

/* ============================== 动态流(/feed) ============================== */
/* 上新(arrival)统一中性灰:紫色从上新语义退场,不与排名/新入榜抢眼 */
.pcard[data-sig="arrival"]::before { background: var(--mut-2); }
.signal-tag.arrival { color: var(--mut); background: var(--bd-2); }
.pcard[data-sig="reactivated"]::before { background: #ea580c; }
.signal-tag.reactivated { color: #9a3412; background: #ffedd5; }

/* 无图占位卡压缩:无图时缩略区不占满 1:1,压成 ~80px 矮横条、字母缩小弱化,
   让无图卡整体明显矮于有图卡、视觉后退。限定 .fcard(feed 卡片,含 shop_detail
   复用的 feed_card 宏),不波及店铺板卡(.bcard)与摘要缩略图(.sum-thumb)。 */
.fcard .thumb:has(.noimg-ph) { aspect-ratio: auto; height: 80px; }
.fcard .noimg-ph { font-size: 14px; color: var(--mut-2); }
/* 栅格默认 stretch 会把无图卡拉到与同行有图卡等高(底部留白),
   顶对齐让无图卡收缩到自身自然高度,整体明显矮下去、视觉后退。 */
.grid > .fcard:has(.noimg-ph) { align-self: start; }

/* 涨幅 chip 单行紧凑:不因卡片窄而折成竖条(shop_detail 不加载 feed.css,
   故落在 components.css 覆盖 style.css 的 .pcard .delta)。 */
.pcard .delta { white-space: nowrap; }
/* 价格与排名分两行:价格一行、"#x → #y + 涨幅 chip"一行,任何价格长度都不粘连。 */
.pcard .row-1 { flex-direction: column; align-items: flex-start; gap: 4px; }

/* 排名证据内联可视化(_feed_card.html 宏产出,/feed 与 /shops/{id} 的"最近
   上升"标签页共用,后者始终带 delta,同样依赖这几条规则渲染幅度条)。 */
.rank-viz {
  position: relative;
  height: 6px;
  background: var(--bd-2);
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}
.rv-fill {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--up);
  min-width: 3px;
}
.rv-fill.lv1 { opacity: 0.35; }
.rv-fill.lv2 { opacity: 0.6; }
.rv-fill.lv3 { opacity: 1; }
/* 新品入榜:位置标记点,在 1-200 范围内标出入榜位置 */
.rv-entry {
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pri);
}

/* 日期分组头:顶部加分隔线 + 上间距,让时间锚在长列表里立住(不 sticky) */
.feed-day { margin-bottom: 22px; }
.feed-day + .feed-day { margin-top: 28px; }
.feed-day .day-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px; padding: 12px 0 6px;
  border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
}
.feed-day .day-label { font-size: 14px; font-weight: 700; color: var(--txt); }
.feed-day .day-count { font-size: 12px; color: var(--mut); }

/* 卡片时间 + 元信息行 */
.fcard-meta { display: inline-flex; align-items: center; gap: 8px; }
.fcard .ftime {
  color: var(--mut-2); font-size: 11px; font-variant-numeric: tabular-nums;
}

/* 入榜层级徽标:Top20/Top50 醒目,top200 不标注 */
.tier-badge {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  margin-left: 4px; white-space: nowrap;
}
.tier-badge.top20 { color: #92400e; background: #fde68a; }
.tier-badge.top50 { color: var(--accent-h); background: var(--pri-bg); }

/* ============================== 热销榜变化徽标 ============================== */
.chg {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.chg.up   { background: var(--up); }
.chg.down { background: var(--warn); }
.chg.new  { background: var(--pri); }

/* ============================== 产品库(搜索/排序/分页) ============================== */
.lib-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.searchbox { display: inline-flex; gap: 6px; }
.searchbox input[type="search"] {
  padding: 6px 12px; border: 1px solid var(--bd); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--txt); background: var(--card-bg); min-width: 220px;
}
.searchbox input[type="search"]:focus { outline: none; border-color: var(--pri); }
.searchbox button {
  padding: 6px 14px; border: 1px solid var(--pri); border-radius: var(--radius-sm);
  background: var(--pri); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.searchbox button:hover { background: var(--accent-h); border-color: var(--accent-h); }
.lib-sort { padding: 3px; }

/* 产品来源徽标 */
.src-badge {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  background: var(--bd-2); color: var(--mut);
}
.src-badge.newarrivals { color: var(--mut); background: var(--bd-2); }
.src-badge.rank { color: #166534; background: var(--up-bg); }
.lib-grid .row-2 { margin-top: 8px; font-size: 12px; }

/* ============================== 详情待补徽标与提示 ============================== */
.detail-pending-badge {
  position: absolute; bottom: 6px; right: 6px; z-index: 3;
  padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  color: var(--mut); background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--bd);
  white-space: nowrap;
}
.detail-pending-badge.gone {
  color: var(--fail); border-color: rgba(180, 35, 24, 0.35);
}
.detail-pending-banner {
  margin-bottom: 14px;
  padding: 10px 16px;
  background: var(--bg);
  border-left: 3px solid var(--bd);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--mut);
  text-align: center;
}

/* ============================== 响应式微调 ============================== */
@media (max-width: 720px) {
  main { padding: 16px; }
  header.top { padding: 0 16px; gap: 16px; }
  header.top nav a { padding: 6px 9px; }
  .product-layout .img-box { flex-basis: 100%; }
  .product-layout .info { min-width: 0; width: 100%; }
  .kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .kpi .cell { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
  .filterbar { gap: 8px; }
  .chips { max-width: 100%; overflow-x: auto; }
  .chips a { flex: 0 0 auto; white-space: nowrap; padding: 5px 10px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard .row-1 { align-items: flex-start; gap: 5px; flex-direction: column; }
  .pcard .row-2 { align-items: flex-start; gap: 5px; flex-direction: column; }
  .pcard .title { overflow-wrap: anywhere; }
  .head-links { flex-wrap: wrap; gap: 8px; }
  .active-filter { max-width: 100%; }
  .crumbs .cur { max-width: 180px; }
  .idle-list { gap: 4px; }
  .idle-list a { padding: 3px 8px; font-size: 11px; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  /* 顶栏:品牌名保持完整可读,导航横向可滚动而非挤压品牌名 */
  header.top { gap: 10px; }
  header.top nav { gap: 2px; overflow-x: auto; }
  header.top nav a { padding: 6px 8px; font-size: 12px; }
}