/* ============================================================
   TokenOasis 样式表
   亮色主题：底色是浅沙色，强调色是深赭石（--amber）和青绿（--oasis）。
   所有颜色都过了 WCAG AA：正文 4.5:1，控件描边 3:1。
   ============================================================ */

:root{
  color-scheme:light;

  /* 纸 —— 晒白的沙地。数字越大越深。 */
  --paper-0:#FFFDF8;
  --paper-1:#FAF5EC;
  --paper-2:#F2EADA;
  --paper-3:#EADFC9;

  --line:#DCCFB6;
  --line-soft:#E9DFCB;
  /* 输入框、下拉这类控件的边得够实：非文本控件的对比度要求是 3:1，
     亮底上随手一个浅灰边就不合格了。 */
  --line-strong:#A08B6A;
  --line-hover:#8E7A58;

  /* 墨 —— 文字。数字越大越淡，--ink-3 已经到极限：
     它要在头图和页脚那层深一档的沙色上也保住 4.5:1。 */
  --ink:#2A2118;
  --ink-2:#5C4F3D;
  --ink-3:#766751;

  /* 强调 —— 亮底上必须压暗，原来那套荧光琥珀在白纸上根本读不出来。
     压到这一档，在最深的那层沙底上也还有 4.6:1；--amber-hi 是悬停时再压一档。 */
  --amber:#8F5B09;
  --amber-hi:#7A4D06;
  --amber-dim:rgba(143,91,9,.10);
  --oasis:#0E7C6B;
  --oasis-dim:rgba(14,124,107,.10);
  --rust:#B4402A;
  --rust-dim:rgba(180,64,42,.10);
  /* 和 --ink-3 同色，但用途不同：这是「情况未明」印章的颜色 */
  --dust:#766751;
  --dust-dim:rgba(118,103,81,.10);
  /* 亮底上的阴影不能用纯黑，会发灰发脏，掺进沙色 */
  --shade:rgba(120,92,44,.26);

  /* 字体：拉丁走 Fraunces，中文落到系统字库 —— 谷歌字体在国内不稳，
     所以中文一律不依赖网络字体，断了也不影响阅读。 */
  --font-display:"Fraunces","Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --font-body:"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --shell:min(1180px,100% - 2.5rem);
  --r:3px;
  /* 等高线：亮底上得用深赭石描线，原来那支亮琥珀在白纸上等于没画 */
  --topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%238A6420' stroke-width='1.1'%3E%3Cpath d='M-10 34c40-26 78 22 118 4s72-40 112-16 50 8 50 8'/%3E%3Cpath d='M-10 72c44-24 76 24 120 8s70-38 108-14 52 6 52 6'/%3E%3Cpath d='M-10 118c48-22 74 26 122 12s66-36 104-12 54 4 54 4'/%3E%3Cpath d='M-10 166c52-20 72 28 124 16s62-34 100-10 56 2 56 2'/%3E%3Cpath d='M-10 214c56-18 70 30 126 20s58-32 96-8 58 0 58 0'/%3E%3C/g%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 基础 ---------- */

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

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

body{
  margin:0;
  min-height:100vh;
  background:var(--paper-1);
  color:var(--ink);
  font:400 clamp(.95rem,.9rem + .2vw,1.02rem)/1.75 var(--font-body);
  letter-spacing:.01em;
  /* clip 而不是 hidden：hidden 会让 body 变成滚动容器，
     把下面工具条的 position:sticky 弄坏。 */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* 全局颗粒 —— 印刷品的手感。亮底要用 multiply，overlay 在白纸上只会发灰。 */
.grain{
  position:fixed;
  inset:0;
  z-index:99;
  pointer-events:none;
  background:var(--grain);
  opacity:.030;
  mix-blend-mode:multiply;
}

.shell{width:var(--shell);margin-inline:auto}

p{margin:0 0 .9em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}

a{color:var(--amber);text-decoration-color:rgba(143,91,9,.4);text-underline-offset:3px}
a:hover{color:var(--amber-hi)}

:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:1px;
}
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  padding:.6rem 1rem;
  background:var(--amber);color:var(--paper-0);
  font:600 .85rem/1 var(--font-mono);
  text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:1rem;color:var(--paper-0)}

/* ---------- 头图 ---------- */

.hero{
  position:relative;
  isolation:isolate;
  /* 下内边距要略大于沙丘高度，让山脊正好收在文案下面，不留一条空带 */
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(4rem,7.5vw,6.5rem);
  background:var(--paper-2);
  overflow:hidden;
}

/* 地平线上的太阳 */
.hero__glow{
  position:absolute;
  inset:-30% -10% auto -10%;
  height:120%;
  z-index:-2;
  background:
    radial-gradient(ellipse 46rem 22rem at 72% 8%,rgba(240,182,74,.5),transparent 68%),
    radial-gradient(ellipse 30rem 26rem at 12% 74%,rgba(14,124,107,.09),transparent 70%);
}

/* 等高线 */
.hero__topo{
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--topo);
  opacity:.13;
  mask-image:linear-gradient(to bottom,#000 10%,transparent 88%);
}

.hero__inner{position:relative}

.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 1.6rem;
  color:var(--ink-3);
  font:500 .72rem/1 var(--font-mono);
  letter-spacing:.26em;
  text-transform:uppercase;
}
.eyebrow__mark{
  width:2.4rem;height:1px;flex:none;
  background:linear-gradient(90deg,var(--amber),transparent);
}

.wordmark{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(3.6rem,13vw,9.5rem);
  font-weight:600;
  font-variation-settings:"SOFT" 32,"WONK" 1,"opsz" 144;
  line-height:.82;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.wordmark__l1,.wordmark__l2{display:block}
.wordmark__l1{
  color:var(--ink);
  animation:slide-in .9s cubic-bezier(.16,1,.3,1) both;
}
/* 亮底上不加光晕 —— 发光只在暗底成立，白纸上只会糊掉字边 */
.wordmark__l2{
  margin-left:.09em;
  color:var(--amber);
  animation:slide-in .9s cubic-bezier(.16,1,.3,1) .1s both;
}
/* 一条穿过 OASIS 的水线 */
.wordmark__l2::after{
  content:"";
  display:block;
  width:min(28rem,60%);
  height:2px;
  margin-top:.14em;
  background:linear-gradient(90deg,var(--oasis),rgba(14,124,107,0));
  animation:draw 1.1s cubic-bezier(.16,1,.3,1) .45s both;
}

.lede{
  max-width:46ch;
  margin:2rem 0 0;
  color:var(--ink-2);
  font-size:clamp(1rem,.95rem + .3vw,1.14rem);
  line-height:1.85;
  animation:rise .8s cubic-bezier(.16,1,.3,1) .3s both;
}
/* 图例牌 —— 像地图角上的测绘信息栏 */
.plate{
  margin:2.6rem 0 0;
  padding:1.1rem 1.25rem;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,253,248,.86),rgba(250,245,236,.6));
  backdrop-filter:blur(2px);
  box-shadow:0 1px 2px rgba(120,92,44,.05);
  animation:rise .8s cubic-bezier(.16,1,.3,1) .42s both;
}
.plate__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.42rem 0;
  border-bottom:1px dashed var(--line);
}
.plate__row:last-child{border-bottom:0;padding-bottom:0}
.plate__row:first-child{padding-top:0}
.plate dt{
  color:var(--ink-3);
  font:500 .68rem/1.4 var(--font-mono);
  letter-spacing:.16em;
  white-space:nowrap;
}
.plate dd{
  margin:0;
  color:var(--amber);
  font:600 .84rem/1.4 var(--font-mono);
  text-align:right;
}

@media (min-width:64rem){
  .plate{
    position:absolute;
    right:0;top:.4rem;
    width:15.5rem;
    margin:0;
  }
  .lede{max-width:42ch}
}

/* 沙丘 —— 前面那条必须和页面底色同色，山脊才接得上 */
.dune{
  position:absolute;
  left:0;right:0;bottom:-1px;
  width:100%;height:clamp(3.5rem,7vw,8rem);
  display:block;
}
.dune__back{fill:var(--paper-3)}
.dune__front{fill:var(--paper-1)}
/* ---------- 工具条 ---------- */

.toolbar{
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem 1.1rem;
  margin:clamp(2rem,5vw,3.5rem) 0 0;
  padding:1.1rem 1.25rem;
  border:1px solid var(--line);
  background:rgba(250,245,236,.9);
  backdrop-filter:blur(14px) saturate(1.15);
  /* 吸顶时卡片会从下面滑过，得有一道浅影压住边界 */
  box-shadow:0 .5rem 1rem -.75rem rgba(120,92,44,.18);
}

@media (min-width:52rem){
  .toolbar{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.85fr)) auto}
}

.field{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.field__label{
  color:var(--ink-3);
  font:500 .64rem/1 var(--font-mono);
  letter-spacing:.2em;
  text-transform:uppercase;
}

.search{position:relative;display:flex;align-items:center}
.search__icon{
  position:absolute;left:.75rem;
  width:1rem;height:1rem;
  color:var(--ink-3);
  pointer-events:none;
}
.search input{
  width:100%;
  padding:.66rem 2.6rem .66rem 2.35rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  background:var(--paper-0);
  color:var(--ink);
  font:400 .92rem/1.4 var(--font-body);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.search input::placeholder{color:#7F7059}
.search input:hover{border-color:var(--line-hover)}
.search input:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-dim);
}
/* 亮底上原生的清除按钮本来就是深色，不用再反相 */
.search input::-webkit-search-cancel-button{filter:sepia(.4) opacity(.55)}
.search__kbd{
  position:absolute;right:.6rem;
  padding:.14rem .4rem;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--ink-3);
  font:500 .7rem/1.3 var(--font-mono);
}
.search input:focus~.search__kbd{opacity:0}

.select{position:relative;display:flex}
.select::after{
  content:"";
  position:absolute;right:.8rem;top:50%;
  width:.42rem;height:.42rem;
  border-right:1.5px solid var(--amber);
  border-bottom:1.5px solid var(--amber);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.select select{
  appearance:none;
  width:100%;
  padding:.66rem 2rem .66rem .8rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  background:var(--paper-0);
  color:var(--ink);
  font:400 .92rem/1.4 var(--font-body);
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.select select:hover{border-color:var(--line-hover)}
.select select:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-dim);
}
.select select option{background:var(--paper-0);color:var(--ink)}
/* 值不是「全部」时给个提示，避免用户忘了自己开着筛选 */
.select.is-set select{border-color:rgba(143,91,9,.6);color:var(--amber-hi)}

.btn-clear{
  align-self:end;
  padding:.66rem 1rem;
  border:1px dashed var(--line-strong);
  border-radius:var(--r);
  background:none;
  color:var(--ink-3);
  font:500 .76rem/1.4 var(--font-mono);
  letter-spacing:.06em;
  cursor:pointer;
  white-space:nowrap;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.btn-clear:hover{color:var(--amber);border-color:var(--amber);background:var(--amber-dim)}

/* ---------- 分类 ---------- */

.cats{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.6rem 0 0;
}
.cat{
  display:inline-flex;align-items:baseline;gap:.5rem;
  padding:.5rem .95rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper-0);
  color:var(--ink-2);
  font:400 .92rem/1.4 var(--font-body);
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease,opacity .2s ease;
}
.cat:hover{color:var(--ink);border-color:var(--line-strong);background:var(--paper-2)}
.cat__n{
  color:var(--ink-3);
  font:500 .7rem/1 var(--font-mono);
  font-feature-settings:"tnum";
}
.cat.is-active{
  border-color:var(--amber);
  background:var(--amber-dim);
  color:var(--amber-hi);
}
.cat.is-active .cat__n{color:var(--amber)}
/* 当前筛选下没有结果的分类压淡一档，先告诉你点过去是空的。
   仍然可点——空状态里有提示，比一个禁用掉的按钮好懂 */
.cat.is-empty:not(.is-active){opacity:.45}
.cat.is-empty:not(.is-active):hover{opacity:1}

/* ---------- 计数 ---------- */

.tally{
  margin:1.5rem 0 1.1rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-3);
  font:500 .74rem/1.5 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tally b{color:var(--amber);font-weight:600}

/* ---------- 列表 ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));
  /* 行距同时也是卡片内部各节之间的间距 —— 卡片按 subgrid 借用这里的行 */
  column-gap:1.1rem;
  row-gap:.95rem;
  margin:0 0 clamp(4rem,8vw,7rem);
  padding:0;
  scroll-margin-top:7rem;
}

/* 卡片比页面底色更白，靠这一档提亮 + 一道浅影浮起来 */
.card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:.95rem;
  padding:1.35rem 1.4rem 1.15rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg,var(--paper-0),#FDFAF3 62%);
  box-shadow:0 1px 2px rgba(120,92,44,.06);
  animation:rise .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0) * 42ms);
  transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease,box-shadow .28s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(143,91,9,.45);
  box-shadow:0 1rem 2.2rem -1rem var(--shade),0 0 0 1px rgba(143,91,9,.08);
}

/* 四角定位标记 —— 悬停时浮现 */
.card::before{
  content:"";
  position:absolute;inset:5px;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
  --c:linear-gradient(var(--amber),var(--amber));
  background:
    var(--c) 0 0/10px 1px no-repeat,var(--c) 0 0/1px 10px no-repeat,
    var(--c) 100% 0/10px 1px no-repeat,var(--c) 100% 0/1px 10px no-repeat,
    var(--c) 0 100%/10px 1px no-repeat,var(--c) 0 100%/1px 10px no-repeat,
    var(--c) 100% 100%/10px 1px no-repeat,var(--c) 100% 100%/1px 10px no-repeat;
}
.card:hover::before{opacity:.55}

/* 卡片内的等高线底纹 */
.card::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background:var(--topo);
  opacity:.05;
  transition:opacity .3s ease;
}
.card:hover::after{opacity:.09}

.card__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  /* 状态留空的卡片没有印章，这里预留印章的高度，同一行卡片的标题才不会错位 */
  min-height:1.68rem;
}
.card__no{
  color:var(--ink-3);
  font:500 .7rem/1.6 var(--font-mono);
  letter-spacing:.14em;
  font-feature-settings:"tnum";
}

/* 站点名与分类。规格表原先自带的那道分隔线移到这里 ——
   规格表已拆成三块独立的节，线画在任何一节上都会随该节的有无而闪现。 */
.card__id{
  padding-bottom:.95rem;
  border-bottom:1px solid var(--line-soft);
}
.card__name{
  margin:0;
  font-family:var(--font-display);
  font-size:1.42rem;
  font-weight:600;
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 36;
  line-height:1.25;
  letter-spacing:-.008em;
  color:var(--ink);
}
.card__cat{
  margin:.42rem 0 0;
  color:var(--oasis);
  font:500 .68rem/1 var(--font-mono);
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* 状态印章 —— 像盖在通行证上的橡皮章 */
.stamp{
  flex:none;
  padding:.3rem .58rem;
  border:1.5px solid currentColor;
  border-radius:2px;
  outline:1px solid currentColor;
  outline-offset:2px;
  font:600 .68rem/1.3 var(--font-mono);
  letter-spacing:.16em;
  white-space:nowrap;
  opacity:.92;
  transform:rotate(-4.5deg);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
}
.card:hover .stamp{transform:rotate(0) scale(1.05);opacity:1}
.stamp--recommended{color:var(--oasis);background:var(--oasis-dim)}
.stamp--not-recommended{color:var(--rust);background:var(--rust-dim)}
.stamp--unknown{color:var(--dust);background:var(--dust-dim)}

/* 规格表 —— 模型、福利、门槛三节，各自独立成块。
   不再套一层 <dl> 把三节裹在一起：那会让三节挤进父网格的同一行，
   同一行卡片之间就只能对齐整块、对不齐每一节。 */
.spec__row{
  display:grid;
  grid-template-columns:2.9rem minmax(0,1fr);
  gap:.8rem;
  margin:0;
  align-items:baseline;
}
.spec__row dt{
  color:var(--ink-3);
  font:500 .68rem/1.75 var(--font-mono);
  letter-spacing:.14em;
}
.spec__row dd{
  margin:0;
  min-width:0;
  color:var(--ink-2);
  font-size:.88rem;
  line-height:1.7;
}

/* 某一节没有内容时的空占位。只在 subgrid 生效时参与占格，
   退化布局里不占位，卡片仍是紧凑的一列。 */
.void{display:none}

/* 厂商图标雪碧图：只存放 <symbol> 供 <use> 引用，容器本身不占位、不显示 */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.chips{display:flex;flex-wrap:wrap;gap:.34rem;margin:0}

/* 模型标签按厂商着色：--tag-fg 是文字色，--tag-bg 是底色，每个厂商一套，
   同一厂商的所有模型（含生图模型）共用同一套颜色和同一个图标。
   厂商在 app.js 的 VENDOR_RULES 里从模型名认出来，对应到 .chip--xxx。
   十套配色的文字对底色都在 5:1 以上。 */
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  max-width:100%;
  padding:.16rem .46rem .16rem .36rem;
  border:1px solid var(--line);
  border:1px solid color-mix(in srgb,var(--tag-fg,var(--ink-2)) 22%,transparent);
  border-radius:2px;
  background:var(--tag-bg,var(--paper-2));
  color:var(--tag-fg,var(--ink-2));
  font:500 .72rem/1.5 var(--font-mono);
  overflow-wrap:anywhere;
}
/* 图标是厂商的品牌标识，用 currentColor 画，跟着标签文字色走。
   厂商标识细节比几何图形多，尺寸给到 .85rem 才辨得清。 */
.chip__icon{flex:none;width:.85rem;height:.85rem}

.chip--anthropic{--tag-fg:#9C4A21;--tag-bg:#FBE9DD}
.chip--openai   {--tag-fg:#1D6B4C;--tag-bg:#E1F1E7}
.chip--google   {--tag-fg:#2A5C9E;--tag-bg:#E4EDFB}
.chip--deepseek {--tag-fg:#45596E;--tag-bg:#E6EBEF}
.chip--zhipu    {--tag-fg:#0F6D78;--tag-bg:#DEF0F2}
.chip--qwen     {--tag-fg:#93357F;--tag-bg:#F8E6F3}
.chip--xai      {--tag-fg:#3D3D42;--tag-bg:#EAE9EB}
.chip--moonshot {--tag-fg:#6B41A8;--tag-bg:#EFE7F9}
.chip--minimax  {--tag-fg:#A93A46;--tag-bg:#FBE5E7}
.chip--other    {--tag-fg:var(--ink-2);--tag-bg:var(--paper-2)}

/* 「+N」：模型列得多的站点先只显示前几个。同一行卡片的高度差主要来自这一节，
   收一收，各节才对得齐（收几个由 app.js 的 CHIP_CAP 定）。
   点一下展开该站的全部模型，这一行卡片随之一起变高。 */
.chips.is-clipped .chip--rest{display:none}
.chips:not(.is-clipped) .chip--more{display:none}
.chip--more{
  --tag-bg:transparent;
  border-style:dashed;
  color:var(--ink-3);
  cursor:pointer;
  letter-spacing:.04em;
}
.chip--more:hover{border-color:var(--line-strong);color:var(--ink)}

/* 福利列表，项目符号是一滴水 */
.perks{display:grid;gap:.26rem;margin:0;padding:0;list-style:none}
.perks li{position:relative;padding-left:1.05rem}
.perks li::before{
  content:"";
  position:absolute;left:.06rem;top:.6em;
  width:.42rem;height:.42rem;
  background:var(--oasis);
  border-radius:60% 60% 60% 0;
  transform:rotate(-45deg);
  opacity:.85;
}

.card__note{
  margin:0;
  padding:.7rem .85rem;
  border-left:2px solid var(--line);
  background:rgba(234,223,201,.45);
  color:var(--ink-2);
  font-size:.84rem;
  line-height:1.7;
}

.card__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:.85rem;
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid var(--line-soft);
}
.card__meta{display:grid;gap:.3rem}
.card__checked{
  color:var(--ink-3);
  font:500 .7rem/1.4 var(--font-mono);
  font-feature-settings:"tnum";
}
.card__checked.is-stale{color:var(--rust)}
/* 「链接待补」这类占位说明 */
.card__ref{
  margin:0;
  color:var(--ink-3);
  font:400 .69rem/1.4 var(--font-mono);
  letter-spacing:.08em;
}

.card__acts{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
/* 亮底上的主按钮要实心：描边 + 淡填在白纸上压不住，看着像禁用 */
.go{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.52rem .95rem;
  border:1px solid var(--amber);
  border-radius:var(--r);
  background:var(--amber);
  color:var(--paper-0);
  font:600 .82rem/1.3 var(--font-body);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,gap .2s ease;
}
.go:hover{background:var(--amber-hi);border-color:var(--amber-hi);color:var(--paper-0);gap:.72rem}

/* ---------- 卡片的横向对齐 ---------- */

/*
 * 同一行卡片的模型、福利、门槛、说明、页脚逐节对齐到同一条水平线上。
 *
 * 做法：卡片不再是一个独立的纵向弹性容器，而是占父网格的七行，
 * 再用 subgrid 把这七行让给自己的七个直接子节点。每一行的高度由该行卡片中
 * 最高的那一节决定，于是「福利」标签在整行卡片里落在同一高度。
 *
 * 两条前提：
 *   1. 每张卡片的节数必须一样。缺了的那一节由 app.js 补一个 .void 空占位，
 *      否则后面几节会整体上移、与邻居错开。
 *   2. 行距取自父网格的 row-gap。subgrid 在该轴上不认卡片自己的 gap，
 *      所以卡片内部的节距与卡片之间的纵向间距是同一个值。
 *
 * 内容偏短的卡片，余量留在各节下方，因此一律 align-self:start ——
 * 否则「说明」那块底纹会被拉成一个半空的盒子。
 * 不支持 subgrid 的浏览器沿用上面的弹性布局：卡片内部照常，只是横向不对齐。
 */
@supports (grid-template-rows:subgrid){
  .card{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:subgrid;
    grid-row:span 7;
    gap:0;
  }
  .void{display:block}
  /* .card__id 不收缩，让它那道分隔线落在整行的同一条水平线上 ——
     站名换行与否会改变这一节的高度，线跟着内容走就会一张卡片一个位置 */
  .card__head,.spec__row,.card__note{align-self:start}
  .card__foot{margin-top:0;align-self:end}
}

/* ---------- 空状态 ---------- */

.empty{
  grid-column:1/-1;
  padding:clamp(3rem,8vw,5.5rem) 1.5rem;
  border:1px dashed var(--line-strong);
  border-radius:var(--r);
  text-align:center;
}
.empty__sun{
  width:2.6rem;height:2.6rem;
  margin:0 auto 1.4rem;
  border:1px solid var(--amber);
  border-radius:50%;
  opacity:.55;
  position:relative;
}
.empty__sun::after{
  content:"";
  position:absolute;left:-1.6rem;right:-1.6rem;top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
}

.empty__title{
  margin:0 0 .6rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  font-variation-settings:"SOFT" 24,"WONK" 1;
  color:var(--ink);
}
.empty__hint{margin:0 auto;max-width:46ch;color:var(--ink-3);font-size:.9rem;text-wrap:balance}

/* ---------- 页脚 ---------- */

.foot{
  position:relative;
  padding:clamp(3rem,7vw,5rem) 0 0;
  border-top:1px solid var(--line);
  background:var(--paper-2);
  overflow:hidden;
}
.foot__inner{
  display:grid;
  gap:2.2rem;
  padding-bottom:clamp(4.5rem,9vw,7rem);
}
@media (min-width:52rem){
  .foot__inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6rem}
}
.foot__h{
  display:flex;align-items:center;gap:.65rem;
  margin:0 0 .85rem;
  color:var(--amber);
  font:600 .68rem/1 var(--font-mono);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.foot__h::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent);
}
.foot__col{color:var(--ink-2);font-size:.86rem;line-height:1.8}
.foot__list{display:grid;gap:.42rem;margin:0;padding-left:1.1rem}
.foot__list li::marker{color:var(--amber)}
.foot__mono{margin:.9rem 0 0;color:var(--ink-3);font:400 .7rem/1.5 var(--font-mono)}

/* 底部提示 —— 利益相关和数据风险。横跨整行，比页脚正文更容易被看到。
   边框用深一档的 --line-hover：页脚底色本身就比页面深，用 --line-strong 描不出来。 */
.notes{
  grid-column:1/-1;
  display:grid;
  gap:1.3rem;
  margin-top:.4rem;
  padding:1.25rem 1.35rem;
  border:1px solid var(--line-hover);
  border-radius:var(--r);
  background:rgba(255,253,248,.62);
}
@media (min-width:52rem){
  .notes{grid-template-columns:1fr 1fr;gap:1.8rem}
}
.notice{color:var(--ink-2);font-size:.86rem;line-height:1.8}
.notice__h{
  display:inline-block;
  margin:0 0 .55rem;
  padding:.18rem .5rem;
  border:1px solid currentColor;
  border-radius:2px;
  font:600 .68rem/1.4 var(--font-mono);
  letter-spacing:.16em;
}
.notice__h--aff{color:var(--amber);background:var(--amber-dim)}
.notice__h--risk{color:var(--rust);background:var(--rust-dim)}

.foot__horizon{
  position:absolute;left:0;right:0;bottom:0;
  width:100%;height:clamp(2rem,4vw,3.75rem);
  fill:var(--paper-3);
}

/* 筛选后的重绘不再逐张浮现 —— 手感要立刻 */
.grid.is-instant .card{animation:none}

.empty__hint code{
  padding:.1rem .3rem;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--paper-2);
  color:var(--amber);
  font:500 .84em/1 var(--font-mono);
}

/* ---------- 动画 ---------- */

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes slide-in{
  from{opacity:0;transform:translateY(.2em);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes draw{
  from{width:0;opacity:0}
  to{width:min(28rem,60%);opacity:1}
}

/* ---------- 窄屏 ---------- */

@media (max-width:40rem){
  :root{--shell:min(1180px,100% - 1.75rem)}
  .toolbar{padding:.95rem 1rem}
  .card{padding:1.2rem 1.15rem 1rem}
  .card__foot{align-items:flex-start}
  .card__acts{align-items:flex-start;width:100%}
  .lede br{display:none}
  .plate{padding:.95rem 1.05rem}
}
/* ---------- 降低动效 ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-delay:0ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .card:hover{transform:none}
  .card:hover .stamp{transform:rotate(-4.5deg) scale(1)}
}