/* 这个站自己的样式，跟同目录其他项目没有共用文件。
   配色参照它们挑的（近纯黑 + 金黄），值都写在这里。

   字体（2026-08-30 返工）：原来正文用 Plus Jakarta Sans、标题跟正文同一家族
   只差字重、大数字和序号全套等宽体——这三样凑一起就是最典型的 AI 生成页长相，
   「等宽当装饰」还正好踩在界面红线上。
   现在：标题和大数字走衬线，中文落宋体；正文走 Work Sans，中文落思源黑体；
   等宽只留给真代码——代码块、密钥、模型名、错误码。对话页本来就是这套，
   改完全站一个长相。 */

:root {
  --paper:      #050505;
  --paper-2:    #0f0f0f;
  --paper-3:    #161616;
  --paper-hi:   #1c1c1c;
  --rule:       rgba(255, 255, 255, 0.07);
  --rule-hi:    rgba(255, 255, 255, 0.15);
  --neutral:    #8a8a90;
  --muted:      rgba(245, 245, 245, 0.6);
  --ink:        #f5f5f5;
  --gold:       #f5c518;
  --gold-soft:  rgba(245, 197, 24, 0.14);
  --gold-line:  rgba(245, 197, 24, 0.42);
  --danger:     #e2795c;

  /* 浏览器按字符挑字体：西文走前面那个，中文字符自动落到后面几个。
     中文那几份是切到中文时才现拉的，英文用户不背这个包袱。 */
  --font-cn: 'Work Sans', 'Noto Sans SC', 'MiSans', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: var(--font-cn);
  /* 标题和大数字走衬线，中文落宋体。跟正文拉开的是骨架，不只是字重。 */
  --font-title: 'Fraunces', 'Noto Serif SC', 'Songti SC', Georgia, serif;
  /* 等宽只给真代码：代码块、密钥、模型名、错误码。不许拿它当装饰。 */
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Consolas, monospace;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* 5 而不是 0：0 圆角让按钮、代码块、密钥框全变成硬邦邦的毛坯矩形，
     对话页那边本来就是圆角的，两套长相对不上。5 看得出来又不会变成胶囊。 */
  --radius: 5px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 120ms;
  --dur-short: 200ms;
  --dur-mid: 340ms;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; background: var(--paper); }
body {
  margin: 0; color: var(--ink); font-family: var(--font-display); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-size: 15px; line-height: 1.65;
}
/* 1 像素就够看清。2 像素配 3 像素外扩，在导航那排小字上等于又长出一个方框。 */
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* 代码块的滚动条别露一条白杠出来 */
pre::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb { background: var(--rule-hi); border-radius: 3px; }
pre::-webkit-scrollbar-thumb:hover { background: var(--neutral); }
pre { scrollbar-width: thin; scrollbar-color: var(--rule-hi) transparent; }

/* 1440 外框 + 左右 48 内边距 = 内容区 1344，这是量 OpenRouter 和 Together 得出的实际值。
   之前用 1040，在 1920 的屏上左右各空 400 多，看着像没占满。 */
.shell { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-xl) var(--space-xl); }

/* ── 顶栏 ──────────────────────────────────────────── */
/* 顶栏。窄屏上站名和菜单会挤在一起，所以两边都允许换行——
   站名自己不许断成两行（断了会跟菜单叠在一块儿），
   放不下时整排菜单落到下一行去。 */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) 0 var(--space-sm); border-bottom: 1px solid var(--rule);
}
a.wordmark, .wordmark {
  font-family: var(--font-cn); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out);
}
a.wordmark:hover { color: var(--gold); }
.topright {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}
.state {
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em;
  color: var(--neutral); white-space: nowrap;
}
.lang {
  background: transparent; border: 0; color: var(--neutral);
  border-left: 1px solid var(--rule); border-radius: 0;
  padding: 2px 0 2px var(--space-md); height: auto;
  font-family: var(--font-cn); font-size: 13px; font-weight: 400; letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.lang:hover, .lang:active { background: transparent; border-color: transparent; color: var(--gold); transform: none; }

/* 顶栏里的普通链接（控制台去文档那种）。跟 .state 一个字号，免得顶栏高低不齐。 */
/* 品牌名和「公测中」标签一组，别让标签混进右边的导航、被当成一个能点的页面。 */
.topleft { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

.topbar-link {
  font-family: var(--font-cn); font-size: 13.5px; letter-spacing: 0.01em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out);
}
.topbar-link:hover { color: var(--gold); }

/* 对话页的入口。它不是文档，是用户能直接上手用的地方，所以从那排灰链接里
   拎出来，加一道金边、字也换成金色，摆在最靠近动作那一侧。
   首页、控制台、文档页三套导航共用这一个类。 */
.nav-try {
  font-family: var(--font-cn); font-size: 13.5px; font-weight: 500;
  color: var(--gold); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--gold-line); padding-bottom: 2px;
  transition: border-color var(--dur-quick) var(--ease-out);
}
.nav-try:hover { border-bottom-color: var(--gold); }

/* ── 标题条 ────────────────────────────────────────── */
.intro {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end; gap: var(--space-lg) var(--space-xl);
  padding: var(--space-xl) 0 var(--space-lg);
}
h1 {
  margin: 0; font-family: var(--font-title);
  font-size: clamp(1.65rem, 2.6vw + 0.35rem, 2.4rem);
  font-weight: 600; line-height: 1.32; letter-spacing: 0.005em;
  overflow-wrap: anywhere; min-width: 0;
}
.lede {
  margin: 0; font-family: var(--font-cn); color: var(--muted);
  font-size: 13.5px; line-height: 1.8; max-width: 40ch; min-width: 0;
}

/* ── 操作台：左边看数，右边干活 ────────────────────── */
.deck {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--rule);
}

/* 左栏三块疏密不同：额度和次数是一组，模型清单单独隔开 */
.stats { display: flex; flex-direction: column; }
.stat { display: flex; flex-direction: column; gap: 5px; }
.stat + .stat { margin-top: var(--space-md); }
.stat.apart { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--rule); }

.tag {
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em;
  color: var(--gold); font-weight: 600;
}
.figure {
  font-family: var(--font-title);
  font-size: 2.55rem; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.figure .unit {
  font-family: var(--font-cn); font-size: 13px; font-weight: 400;
  letter-spacing: 0; color: var(--neutral); margin-left: 9px;
}
.gauge { height: 2px; background: var(--rule); overflow: hidden; margin-top: 7px; border-radius: 2px; }
.gauge > i {
  display: block; height: 2px; width: 0; background: var(--gold); border-radius: 2px;
  transition: width var(--dur-mid) var(--ease-out);
}
.hint { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); margin-top: 2px; }

.models { display: flex; flex-direction: column; margin-top: 4px; }
.model-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  padding: 8px 8px 8px 10px; margin-left: -10px; border-radius: var(--radius);
  position: relative; cursor: default;
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.model-row::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 0;
  background: var(--gold); border-radius: 2px; transform: translateY(-50%);
  transition: height var(--dur-short) var(--ease-out);
}
.model-row:hover { background: var(--paper-2); color: var(--ink); }
.model-row:hover::before { height: 60%; }
.model-row .dot { color: var(--gold); font-size: 9px; }

/* ── 主区 ──────────────────────────────────────────── */
.stage { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
/* 高度跟左边那栏对齐，别动。广告接上之前这里是空的，
   靠里面那行字说明它是什么，字号别再往下压。 */
.slot {
  height: 258px; border-radius: var(--radius); background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  animation: idlebreath 9s ease-in-out infinite;
  transition: height var(--dur-mid) var(--ease-out);
}
/* 空着的时候极慢地明暗一下，幅度很小，只是别让这块死在那儿 */
@keyframes idlebreath {
  0%, 100% { background-color: #0f0f0f; }
  50%      { background-color: #131313; }
}
.slot.busy { animation: none; background: var(--paper-2); }
.slot-idle {
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em; color: var(--neutral);
}
.timer { display: none; flex-direction: column; align-items: center; gap: var(--space-sm); }
.timer.on { display: flex; animation: fadein var(--dur-short) var(--ease-out); }
.timer .digits {
  font-size: 54px; font-weight: 500; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.timer .track { width: 190px; height: 2px; background: var(--rule-hi); overflow: hidden; border-radius: 2px; }
.timer .track > i { display: block; height: 2px; width: 0; background: var(--gold); border-radius: 2px; transition: width 1s linear; }
.timer .cap { font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em; color: var(--gold); }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.controls { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
button {
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--radius); padding: 11px 24px;
  font-family: var(--font-cn); font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
/* 这两条不要写成 :not(:disabled)——那样权重高过任何单个类名，
   语言键、复制键、代码那排小标签各自写的「悬停别变金块」会全被压掉。
   禁用态交给下面那条 button:disabled，它排在后面，照样管得住。 */
button:hover { background: var(--gold); border-color: var(--gold); color: #0a0a0a; }
button:active { transform: translateY(1px); background: #dfb014; border-color: #dfb014; }
button:disabled { background: transparent; color: var(--neutral); border-color: var(--rule-hi); cursor: default; }
.aside { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); }
.report {
  font-family: var(--font-cn); font-size: 13.5px; min-height: 21px; color: var(--gold);
}
.report.show { animation: risein var(--dur-mid) var(--ease-out); }
.report.bad { color: var(--danger); }
@keyframes risein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── 底部两栏 ──────────────────────────────────────── */
.ledger {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: var(--space-xl);
  padding-top: var(--space-lg); border-top: 1px solid var(--rule);
}
.panel { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: 30px;
}
.panel-title { font-family: var(--font-cn); font-size: 14px; font-weight: 600; }
.panel-note { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); white-space: nowrap; }

.keybar { display: flex; align-items: stretch; gap: 6px; }
.key {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  background: var(--paper-2); border-radius: var(--radius); padding: 0 14px; height: 40px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease-out);
}
.keybar:hover .key { background: var(--paper-3); }
.mini {
  background: transparent; color: var(--muted); border: 1px solid var(--rule-hi);
  border-radius: var(--radius); padding: 0 14px; height: 40px;
  font-family: var(--font-cn); font-size: 13px; font-weight: 400;
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.mini:hover { color: var(--gold); border-color: var(--gold); background: transparent; }
.mini:active { transform: translateY(1px); background: transparent; color: var(--gold); border-color: var(--gold); }
/* 顶栏最右边那个账号位。没登录时是整条顶栏唯一的实心按钮——不登录的人
   随时可能清掉缓存把额度弄丢，这个入口必须一眼看见。
   登录之后换成一行浅色的邮箱加一个退出，不再抢眼。 */
.acct-slot { display: inline-flex; align-items: center; gap: 10px; }
.nav-acct {
  font-family: var(--font-cn); font-size: 13.5px; font-weight: 600;
  background: var(--gold); color: #0a0a0a; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--gold); border-radius: var(--radius); padding: 7px 16px;
  transition: background-color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.nav-acct:hover { background: #ffd84d; border-color: #ffd84d; }
.nav-acct:active { transform: translateY(1px); }
.nav-who {
  font-family: var(--font-cn); font-size: 13.5px; color: var(--muted);
  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.nav-out {
  font-family: var(--font-cn); font-size: 13px; color: var(--neutral);
  background: none; border: 0; border-bottom: 1px solid var(--rule-hi);
  border-radius: 0; padding: 1px 0 2px; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.nav-out:hover:not(:disabled) {
  color: var(--gold); border-bottom-color: var(--gold); background: none;
}

.fine { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); line-height: 1.75; margin: 0; }

.tabs { display: flex; gap: 4px; }
.tab {
  background: transparent; border: 0; border-bottom: 1.5px solid transparent;
  color: var(--neutral); font-family: var(--font-mono); font-size: 13px;
  padding: 4px 9px; cursor: pointer; border-radius: 0; height: auto; font-weight: 400;
  transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.tab:hover { color: var(--muted); background: transparent; transform: none; }
.tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); background: transparent; }
.tab[aria-selected="true"]:hover { color: var(--gold); background: transparent; }

pre {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9; color: var(--muted);
  background: var(--paper-2); border-radius: var(--radius);
  padding: 16px 18px; margin: 0; overflow-x: auto;
}
pre.swap { animation: fadein var(--dur-short) var(--ease-out); }

.foot {
  margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--rule);
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em; color: var(--neutral);
}

/* 首屏一次入场 */
.enter { opacity: 0; transform: translateY(8px); animation: enter 0.5s var(--ease-out) forwards; }
@keyframes enter { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .enter, .timer.on, .report.show, pre.swap { animation: none; opacity: 1; transform: none; }
  .slot { animation: none; }
  .gauge > i, .timer .track > i, .model-row::before { transition-duration: 1ms; }
}

@media (max-width: 860px) {
  .deck { grid-template-columns: 1fr; gap: var(--space-lg); }
  .stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); }
  .stat + .stat { margin-top: 0; }
  .stat.apart { margin-top: 0; padding-top: 0; border-top: 0; flex-basis: 100%; }
  .ledger { grid-template-columns: 1fr; gap: var(--space-lg); }
  .intro { grid-template-columns: 1fr; gap: var(--space-sm); }
}

@media (max-width: 560px) {
  .shell { padding: 0 var(--space-md) var(--space-lg); }
  .intro { grid-template-columns: 1fr; padding: var(--space-lg) 0 var(--space-md); gap: var(--space-sm); }
  .slot { height: 196px; }
  .figure { font-size: 2.15rem; }
  .keybar { flex-wrap: wrap; }
  .key { flex-basis: 100%; }
  button { flex: 1 1 auto; }
}

/* 底部的法律链接 —— 广告平台审核要求首页能点到隐私政策 */
.foot, .landing-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
}
.foot-links { display: flex; gap: var(--space-md); }
.foot-links a {
  color: var(--neutral); text-decoration: none;
  transition: color var(--dur-quick) var(--ease-out);
}
.foot-links a:hover { color: var(--gold); }

/* ── 最近用量 ───────────────────────────────────────── */
.log { display: flex; flex-direction: column; }
.log-row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: var(--space-sm); align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.log-row:last-child { border-bottom: 0; }
.log-when { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); white-space: nowrap; }
.log-model {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-cost { font-family: var(--font-mono); font-size: 13px; color: var(--gold); white-space: nowrap; }
.log-empty {
  font-family: var(--font-cn); font-size: 13px; color: var(--neutral);
  padding: 9px 0;
}

@media (max-width: 560px) {
  .log-row { grid-template-columns: 70px minmax(0, 1fr) auto; gap: var(--space-xs); }
}

/* 控制台里指向对话页的那行小字 */
.chat-link {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--rule-hi); padding-bottom: 1px;
  transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.chat-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* 未登录时控制台只显示这一块。额度挂在账号下，没身份就没有余额、
   没有密钥、没有广告位可放，整页留着反而全是空数字。 */
.gate {
  padding: 42px 34px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.gate h2 {
  margin: 0 0 12px;
  font-family: var(--font-title); font-size: 26px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
}
.gate p {
  margin: 0 0 24px; max-width: 54ch;
  font-family: var(--font-cn); font-size: 14px; line-height: 1.75;
  color: var(--muted);
}
.gate-go {
  display: inline-block;
  font-family: var(--font-cn); font-size: 15px; font-weight: 600;
  background: var(--gold); color: #0a0a0a; text-decoration: none;
  border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 11px 24px;
  transition: background-color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.gate-go:hover { background: #ffd84d; border-color: #ffd84d; }
.gate-go:active { transform: translateY(1px); }

/* 密钥列表。一个账号能挂好几把，让人把不同项目分开，
   哪把漏了就停哪把，不用把自己所有设备一起踢下线。 */
.keylist { margin: 14px 0 0; border-top: 1px solid var(--rule); }
.keyrow {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-cn); font-size: 13px;
}
.keyrow-main { flex: 1; min-width: 0; }
.keyrow-name {
  color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.keyrow-name .tag-now {
  margin-left: 8px; font-size: 11px; font-weight: 400;
  color: var(--gold); border: 1px solid var(--gold-line);
  border-radius: var(--radius); padding: 1px 6px;
}
.keyrow-meta { color: var(--neutral); font-size: 12px; margin-top: 2px; }
.keyrow-off {
  flex: none; background: none; border: 1px solid var(--rule-hi);
  color: var(--neutral); font-family: var(--font-cn); font-size: 12px;
  border-radius: var(--radius); padding: 4px 10px; cursor: pointer;
  transition: color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
}
.keyrow-off:hover { color: var(--danger); border-color: var(--danger); }
.keyrow-off[disabled] { opacity: 0.35; cursor: default; }
.keyrow-off[disabled]:hover { color: var(--neutral); border-color: var(--rule-hi); }

.keyadd { display: flex; gap: var(--space-sm); margin-top: 14px; }
.keyadd input {
  flex: 1; min-width: 0; background: var(--paper-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); font-family: var(--font-cn); font-size: 13px;
  padding: 7px 10px;
}
.keyadd input:focus { outline: none; border-color: var(--gold-line); }

.keyfresh {
  margin-top: 14px; padding: 12px;
  border: 1px solid var(--gold-line); border-radius: var(--radius);
  background: var(--gold-soft);
}
.keyfresh-note {
  font-family: var(--font-cn); font-size: 12.5px;
  color: var(--gold); margin-bottom: 8px;
}

/* 模型名旁边那个单次消耗。两个模型差五倍，选之前就得看见，
   而不是聊完几句发现额度没了再回头怪服务。 */
.model-cost {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--neutral); margin-left: auto; padding-right: var(--space-sm);
  white-space: nowrap;
}

/* 最近七天的消耗。柱子高度按当周最大值归一化，
   全零的那几天也留一条细线——空白一片会让人以为是没画出来。 */
.trend {
  display: flex; align-items: flex-end; gap: 6px;
  height: 90px; margin: 14px 0 0;
}
.trend-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.trend-col i {
  display: block; width: 100%; background: var(--gold);
  border-radius: 2px 2px 0 0; min-height: 2px;
  transition: height var(--dur-mid) var(--ease-out);
}
.trend-col i.zero { background: var(--rule-hi); }
.trend-day {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--neutral); margin-top: 6px; white-space: nowrap;
}

/* 按模型分：两个模型差五倍，得看得见钱花在哪个上。 */
.split { margin-top: 16px; }
.split-row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 5px 0; font-family: var(--font-cn); font-size: 12.5px;
}
.split-name {
  flex: none; width: 140px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.split-track {
  flex: 1; height: 6px; background: var(--paper-hi);
  border-radius: 3px; overflow: hidden;
}
.split-track i { display: block; height: 100%; background: var(--gold); }
.split-num {
  flex: none; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--neutral); min-width: 62px; text-align: right;
}

/* 自检结果。每条一行，勾是正常，叉是要处理的。 */
.checkout { margin-top: 12px; }
.check-row {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: 6px 0; font-family: var(--font-cn); font-size: 13px;
  color: var(--muted); line-height: 1.6;
}
.check-row.bad { color: var(--ink); }
.check-dot {
  flex: none; font-family: var(--font-mono); font-size: 12px;
  color: var(--gold); margin-top: 1px;
}
.check-row.bad .check-dot { color: var(--danger); }