/* ==========================================================================
   lanmao.ai · 懒猫 AI — V3 样式表（表格式列表改版）
   零依赖：不引外部字体/图标库/CSS 框架。全部基于系统字体栈 + CSS 变量。

   V2（卡片网格）被两轮否决："还是太乱，争取做得简单清晰一些"——这轮是形态级改版，
   不是风格微调：卡片网格 → 对齐的表格式列表行。方向锚点：
   "像一份优雅的表格，不像营销页"，参照 free-for.dev 的信息密度 + Linear 的排版精致度。

   视觉语言：
   - 近白暖灰（暗色近黑暖灰）+ 灰阶层次 + 单一强调色琥珀橙 + 细边框/分隔线代替阴影堆叠。
   - 琥珀橙全站仅三处：选中态（tab / chip）、"领取"文字链接、筛选计数角标。
     其余一律灰阶 + emoji（含 trend / deadline），quota 不再是彩色"卡片主角"，
     退回成加粗墨色正文——克制，不抢注意力，靠字号字重和留白建立层次。
   - 字体尺寸阶梯全站仅 4 档：--text-xs / --text-sm / --text-base / --text-display。
   ========================================================================== */

/* ---------- 1. Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* JS 大量用 el.hidden 控制显隐（搜索清空按钮 / 筛选计数角标 / 空状态 / 表格列表）。
   浏览器对 [hidden] 的 display:none 是 UA 样式表里的低特异性规则，一旦组件自己的
   class 选择器上写了 display（如 .search-clear{display:inline-flex}），会静默盖掉
   hidden 属性的视觉效果——元素的 DOM 属性仍是 hidden=true，但照样画出来。
   这里用一条最高优先级规则兜底，保证 hidden 语义任何时候都不被组件样式覆盖。 */
[hidden] {
  display: none !important;
}

body,
h1, h2, h3, p, ul, li, figure, dl, dd {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

input {
  font: inherit;
  color: inherit;
}

/* ---------- 2. 设计令牌（CSS 变量） ---------- */

:root {
  color-scheme: light dark;

  /* 基础色：近白暖灰底，四级表面（bg < elevated < card, muted 为"凹陷"表面） */
  --bg: #FAF9F6;
  --bg-elevated: #FDFCFA;
  --bg-card: #FFFFFF;
  --bg-muted: #F1EFEA;
  --bg-muted-strong: #E8E4DB;

  /* 文字：三级灰阶，无色彩 */
  --ink: #1C1A17;
  --ink-soft: #605B53;
  --ink-faint: #716B60;

  /* 边框：细边框/分隔线体系，替代阴影堆叠 */
  --border: #E7E3DC;
  --border-strong: #D3CCC0;

  /* 唯一强调色：琥珀橙。全站仅三处：tab/chip 选中态、"领取"链接、筛选计数角标 */
  --accent: #B5540F;
  --accent-hover: #9B480C;
  --accent-contrast: #FFFFFF;
  --accent-rgb: 181, 84, 15;

  /* 阴影：单一克制的 hover 提升，禁止静态阴影堆叠 */
  --shadow-hover: 0 6px 18px -8px rgba(28, 22, 15, .16);

  /* 圆角 token */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* 间距 token */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  /* 字体尺寸阶梯：全站仅 4 档，不再新增 */
  --text-xs: .75rem;        /* 12px —— 次要信息：厂商/模型/标签/表头/页脚/时间戳 */
  --text-sm: .875rem;       /* 14px —— 正文基准：行名称/quota/按钮/输入框/详情段落 */
  --text-base: 1rem;        /* 16px —— 少量强调：品牌名、空状态文案 */
  --text-display: clamp(1.4rem, 3.2vw, 2rem); /* 仅 H1 使用；克制尺寸，不做营销页式巨字 */

  /* 字体栈：零外部依赖，系统无衬线统一栈；等宽仅供 quota/统计数字使用 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK SC",
    "Cascadia Mono", monospace;

  --container-w: 1320px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  /* 表格列宽：表头与每一行共用同一套列模板，保证纵向对齐 */
  --table-cols: minmax(160px, 1.3fr) minmax(220px, 2.3fr) minmax(130px, 1.1fr) 78px 92px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171512;
    --bg-elevated: #1D1A16;
    --bg-card: #211E19;
    --bg-muted: #2A251E;
    --bg-muted-strong: #332D24;

    --ink: #F1EDE6;
    --ink-soft: #B6AFA3;
    --ink-faint: #948C7E;

    --border: #332E26;
    --border-strong: #453F34;

    --accent: #E8934C;
    --accent-hover: #F2A464;
    --accent-contrast: #241605;
    --accent-rgb: 232, 147, 76;

    --shadow-hover: 0 8px 22px -8px rgba(0, 0, 0, .5);
  }
}

/* 显式主题切换：与系统偏好一致的覆盖规则（若页面后续接入主题切换按钮，
   直接靠 [data-theme] 覆盖同一套变量，无需改组件样式）。 */
:root[data-theme="dark"] {
  --bg: #171512;
  --bg-elevated: #1D1A16;
  --bg-card: #211E19;
  --bg-muted: #2A251E;
  --bg-muted-strong: #332D24;
  --ink: #F1EDE6;
  --ink-soft: #B6AFA3;
  --ink-faint: #948C7E;
  --border: #332E26;
  --border-strong: #453F34;
  --accent: #E8934C;
  --accent-hover: #F2A464;
  --accent-contrast: #241605;
  --accent-rgb: 232, 147, 76;
  --shadow-hover: 0 8px 22px -8px rgba(0, 0, 0, .5);
}

/* ---------- 3. 基础排版 ---------- */

html, body {
  overflow-x: hidden; /* 375px 无横向滚动的安全网 */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(var(--accent-rgb), .22);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- 4. 工具类 ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* 隐藏横向滚动条，用遮罩渐隐提示"还有更多" */
.scrollbar-hidden {
  scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.edge-fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
}

/* 通用「展开/收起」容器：grid-rows 0fr↔1fr 技巧，宽支持、内容自适应、
   collapse 完成后靠 visibility 延迟退出无障碍树（键盘/读屏都不会误入）。 */
.disclosure {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s var(--ease-standard), visibility 0s linear .3s;
}

.disclosure.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s var(--ease-standard), visibility 0s linear 0s;
}

.disclosure > * {
  min-height: 0;
}

/* ---------- 5. Header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.header-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: .55rem var(--gutter);
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.brand-mark {
  font-size: 1.3rem;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -.01em;
}

.brand-domain {
  color: var(--ink-faint);
  font-weight: 500;
}

.tagline {
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

/* ---------- 6. Hero（大瘦身：H1 + 一行副标题 + 一行统计） ---------- */

.hero {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.hero-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: clamp(.7rem, 1.7vw, .95rem) var(--gutter) clamp(.6rem, 1.5vw, .85rem);
}

.hero-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.18;
  letter-spacing: -.015em;
  max-width: 17em;
}

.hero-sub {
  margin-top: .3rem;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.hero-stats {
  margin-top: .35rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-faint);
}

.hero-stats strong {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: var(--text-xs);
}

/* ---------- 7. 今日情报条（changelog）—— 更轻一档的单行 ticker ---------- */

.changelog-strip {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.changelog-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: .28rem var(--gutter);
  display: flex;
  align-items: center;
  gap: .7rem;
}

.changelog-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  opacity: .82;
}

.changelog-list {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  min-width: 0;
}

/* 内容超宽时自动无缝滚动（双份内容平移 50%）；悬停暂停 */
.changelog-list.is-scrolling {
  overflow: hidden;
}

.ticker-track {
  display: flex;
  width: max-content;
}

.ticker-group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 非滚动态只留一份内容 */
.changelog-list:not(.is-scrolling) .ticker-group[aria-hidden] {
  display: none;
}

.changelog-list.is-scrolling .ticker-track {
  animation: lanmao-ticker var(--ticker-duration, 30s) linear infinite;
}

.changelog-list.is-scrolling:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes lanmao-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .changelog-list.is-scrolling { overflow-x: auto; }
  .changelog-list.is-scrolling .ticker-track { animation: none; }
  .changelog-list.is-scrolling .ticker-group[aria-hidden] { display: none; }
}

.changelog-item {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: .32rem;
  padding: .1rem 0;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  white-space: nowrap;
  margin-right: .65rem;
  padding-right: .65rem;
  border-right: 1px solid var(--border);
}

.changelog-item time {
  color: var(--ink-faint);
  opacity: .8;
}

/* ---------- 8. 工具栏（sticky） ---------- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.toolbar-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: .4rem var(--gutter) .45rem;
  display: flex;
  flex-direction: column;
  gap: .32rem;
}

.toolbar-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.search-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .34rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}

.search-icon {
  flex: none;
  color: var(--ink-faint);
}

.search-box input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: var(--text-sm);
  -webkit-appearance: none;
  appearance: none;
}

.search-box input::-webkit-search-cancel-button {
  display: none;
}

.search-box input::placeholder {
  color: var(--ink-faint);
}

.search-clear {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink-soft);
  font-size: .62rem;
}

.search-clear:hover {
  background: var(--bg-muted-strong);
}

/* 筛选按钮 */

.filter-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.filter-toggle:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.filter-toggle[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--bg-muted);
  color: var(--ink);
}

.filter-toggle-icon {
  flex: none;
}

.filter-count {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 .3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Tabs（场景分类） */

.tabs {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  padding-bottom: .1rem;
}

.tab {
  flex: none;
  padding: .3rem .78rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

.tab:hover {
  background: var(--bg-muted);
  color: var(--ink);
}

.tab.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.tab.is-active:hover {
  background: var(--accent-hover);
}

.tab:active {
  transform: scale(.96);
}

/* ---------- 9. 筛选面板（灰阶细边框、紧凑） ---------- */

.filter-panel {
  max-height: min(60vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 0;
  border-top: 0 solid var(--border);
}

#filterPanelWrap.is-open .filter-panel {
  padding-top: .75rem;
  border-top-width: 1px;
}

.filter-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem 1.4rem;
}

@media (min-width: 640px) {
  .filter-panel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.filter-group {
  min-width: 0;
}

.filter-group-model {
  margin-top: .7rem;
}

.filter-group-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: .35rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.chip {
  flex: none;
  padding: .28rem .62rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

.chip:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), .12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.chip:active {
  transform: scale(.95);
}

.filter-panel-footer {
  margin-top: .8rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: flex-end;
}

.filter-clear-all {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-soft);
  padding: .35rem .6rem;
  border-radius: var(--radius-sm);
}

.filter-clear-all:hover {
  background: var(--bg-muted);
  color: var(--ink);
}

@media (max-width: 480px) {
  .filter-panel {
    max-height: min(56vh, 420px);
  }
}

/* ---------- 10. 表格式列表 ---------- */

.table-section {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: .6rem var(--gutter) clamp(2.5rem, 5vw, 4rem);
}

.result-count {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-bottom: .35rem;
}

.offer-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}

/* 表头：桌面 ≥768px 才显示，与每行共用同一套列模板对齐 */
.offer-table-head {
  display: none;
  grid-template-columns: var(--table-cols);
  /* 与 .row-peek 同名 areas：表头 span 复用了 .row-quota/.row-tier/.row-cta 等
     带 grid-area 的类，无同名区域时会被甩进隐式轨道造成表头错位 */
  grid-template-areas: "name quota models tier cta";
  column-gap: 1rem;
  padding: .4rem 1.25rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
}

.offer-table-head .row-tier {
  justify-self: center;
}

.offer-table-head .row-cta {
  justify-self: end;
}

@media (min-width: 768px) {
  .offer-table-head {
    display: grid;
  }
}

.offer-table-body {
  display: block;
}

/* --- 行：peek + detail 两段，行间只用 1px 分隔线 --- */

.offer-row {
  display: block;
}

.offer-row + .offer-row {
  border-top: 1px solid var(--border);
}

.row-peek {
  display: grid;
  grid-template-columns: var(--table-cols);
  grid-template-areas: "name quota models tier cta";
  align-items: center;
  column-gap: 1rem;
  min-height: 56px;
  padding: .5rem 1.25rem;
  cursor: pointer;
  transition: background .12s ease;
}

.row-peek:hover {
  background: var(--bg-muted);
}

.offer-row.is-expanded .row-peek {
  background: var(--bg-muted);
}

/* 名称格：折叠三角 + 名称/厂商同格堆叠 */

.row-name-cell {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.row-trigger {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  border-radius: 50%;
}

.row-trigger:hover {
  color: var(--ink);
}

.chevron-icon {
  transition: transform .25s var(--ease-standard);
}

.offer-row.is-expanded .chevron-icon {
  transform: rotate(180deg);
}

.row-name-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.row-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-vendor {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* quota：不再是彩色主角，退回墨色正文，字重 600、单行截断 */

.row-quota {
  grid-area: quota;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.row-models {
  grid-area: models;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.row-tier {
  grid-area: tier;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  font-size: var(--text-base); /* emoji 图标，非正文，恰好与 base 阶同值 */
  line-height: 1;
  white-space: nowrap;
}

.row-tier-txt {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.tier-legend {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin: 0;
}

.row-cta {
  grid-area: cta;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.row-cta:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* --- Detail：点击行展开的详情区，样式随新语言简化 --- */

.row-detail-wrap {
  padding: 0 1.25rem;
}

.row-detail {
  padding: 0;
  border-top: 0 solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.offer-row.is-expanded .row-detail {
  padding: .75rem 0 .9rem;
  border-top-width: 1px;
}

.detail-text {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.65;
}

.detail-quota-full {
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.65;
  font-weight: 600;
}

.detail-models {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: .2rem .5rem;
  white-space: nowrap;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.detail-notes {
  display: flex;
  gap: .4rem;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  line-height: 1.55;
}

.detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.detail-source {
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
}

.detail-source:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}

/* ---------- 10b. 移动端（<768px）：两行紧凑列表项 ---------- */

@media (max-width: 767px) {
  .row-peek {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "name  tier cta"
      "quota quota quota";
    row-gap: .3rem;
    column-gap: .55rem;
    min-height: 0;
    padding: .65rem .9rem;
  }

  .row-models {
    display: none;
  }

  .row-vendor {
    display: none;
  }

  .row-quota {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-soft);
  }

  .row-cta {
    font-size: var(--text-xs);
  }

  .row-detail-wrap {
    padding: 0 .9rem;
  }
}

/* ---------- 11. 空状态 ---------- */

.empty-state {
  text-align: center;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1rem;
  color: var(--ink-soft);
}

.empty-emoji {
  font-size: 2.4rem;
  margin-bottom: .6rem;
}

.empty-text {
  font-size: var(--text-base);
}

/* ---------- 12. Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

.footer-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.footer-inner .disclaimer {
  color: var(--ink-soft);
}

.footer-inner .copyright {
  margin-top: .4rem;
}

/* ---------- 13. noscript 兜底 ---------- */

.noscript-fallback {
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1.25rem;
  font-family: var(--font-sans);
  color: var(--ink);
}

.noscript-fallback h2 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: .5rem;
}

.noscript-fallback li {
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}

.noscript-fallback a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- 14. 动效 ---------- */

/* 首屏入场：比 V2 更克制——轻微上浮 + 更快的级联，符合"表格"而非"卡片"的气质 */
@keyframes row-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.offer-row {
  opacity: 0;
  animation: row-in .32s ease forwards;
  animation-delay: var(--row-delay, 0s);
}

.offer-table-body.no-entrance-anim .offer-row {
  animation: none;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 15. 响应式细节补充 ---------- */

@media (max-width: 480px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
}