/* ─────────────────────────────────────────────────────────────
   首页专属补充样式（只被 public/home_landing.html 加载）。

   为什么单独一个文件而不是并进 landing.css：landing.css 是全站共用文件，另一个席位也在
   同一分支上改子页面版式；把首页专属的几条规则塞进公共文件只会制造合并冲突。
   CSP 是 `style-src 'self'`，模板不能写内联样式，所以必须落到这里。
   载入方式：head_landing 的 add-only 钩子 extra_css（路由里只在首页声明）。

   §1 调度指标的「真实 / 演示」标识 — 版式复用 landing.css 的 .live-stat .delta，
      本文件只负责语气：真实=mint（冷、可信），演示=amber（提醒、非结论）。
   §2 价格表的分来源明细（含第 5 块「参考价覆盖」的真实/未知语气） — 原生 <details>，无 JS（CSP script-src 'self'）。
   ───────────────────────────────────────────────────────────── */

/* §1 指标标识 */
.landing .metric-badge{letter-spacing:.06em;font-weight:600}
.landing .metric-badge.is-live{color:var(--mint)}
.landing .metric-badge.is-live::before{content:"●";margin-right:5px;font-size:7px;vertical-align:1px}
.landing .metric-badge.is-demo{color:var(--amber)}
.landing .metric-badge.is-demo::before{content:"○";margin-right:5px;font-size:8px;vertical-align:1px}
/* 未知（读不到数据源）既不是真也不是演示：灰、无圆点，避免和「演示」混为一谈 */
.landing .metric-badge.is-unknown{color:var(--ink-3)}
/* 真实指标的来源脚注（如「价格快照 · 2026-11-04T20:17:06Z」）：小一号、不抢主数字 */
.landing .metric-src{display:block;margin-top:6px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.04em;color:var(--ink-3);word-break:break-all}
/* 第 5 块「参考价覆盖」是真实指标，桌面端与其余四块并排一行；窄屏沿用 landing.css 的 2 列 */
@media (min-width:681px){
  .landing .live-stats{grid-template-columns:repeat(5,1fr)}
}

/* 混排说明：一句人话，不抢指标本身的注意力 */
.landing .metric-note{
  margin:14px 0 0;max-width:78ch;color:var(--ink-3);
  font-size:12px;line-height:1.75;letter-spacing:.01em
}

/* §2 价格表：每行采样时间 + 分来源明细 */
.landing .price-table .price-sampled{
  display:block;margin-top:3px;color:var(--ink-3);
  font-family:var(--mono);font-size:9px;letter-spacing:.02em;white-space:nowrap
}
.landing .price-src{margin-top:5px}
.landing .price-src summary{
  cursor:pointer;color:var(--ink-3);font-family:var(--mono);
  font-size:9px;letter-spacing:.06em;text-transform:uppercase;list-style:none
}
.landing .price-src summary::-webkit-details-marker{display:none}
.landing .price-src summary:before{content:"▸ ";color:var(--mint)}
.landing .price-src[open] summary:before{content:"▾ "}
.landing .price-src summary:hover{color:var(--mint)}
.landing .price-src ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.landing .price-src li{
  color:var(--ink-2);font-family:var(--mono);font-size:10px;
  line-height:1.5;white-space:nowrap
}
.landing .price-src li b{color:var(--ink);font-weight:600}

@media(max-width:680px){
  .landing .metric-note{font-size:11.5px;line-height:1.7}
  .landing .price-table .price-sampled{white-space:normal}
  .landing .price-src li{white-space:normal}
}

/* ─────────────────────────────────────────────────────────────
   §3 热门模型价格条（hero 下方）
   - 纯 CSS 无缝横向滚动：列表渲染两遍，轨道左移 50%（无 JS 也不空白）；
   - 悬停暂停；prefers-reduced-motion 与窄屏改为静止 / 原生横滑（第二份隐藏）；
   - 价格文字全部来自数据文件（app/hot_prices.py），这里只管版式。
   ───────────────────────────────────────────────────────────── */
.landing .hot-strip{position:relative;border-block:1px solid var(--line);overflow:hidden;
  background:linear-gradient(90deg,rgba(143,217,190,.06),rgba(127,203,232,.04) 50%,rgba(143,217,190,.06))}
.landing .hot-caption{margin:0;padding:8px 22px 0;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.landing .hot-track{display:flex;width:max-content;animation:hot-scroll 64s linear infinite;will-change:transform}
.landing .hot-strip:hover .hot-track,
.landing .hot-strip:focus-within .hot-track{animation-play-state:paused}
@keyframes hot-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.landing .hot-item{display:flex;align-items:baseline;gap:9px;flex:0 0 auto;
  padding:12px 20px 13px;border-right:1px solid var(--line);text-decoration:none;color:inherit;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;white-space:nowrap}
.landing .hot-item:hover,.landing .hot-item:focus-visible{background:rgba(143,217,190,.08)}
.landing .hot-vendor{color:var(--mint);text-transform:uppercase;letter-spacing:.08em;font-size:9.5px}
.landing .hot-name{color:var(--ink);font-weight:600}
.landing .hot-price{color:var(--ink-2);font-variant-numeric:tabular-nums;display:inline-flex;
  align-items:baseline;gap:4px}
.landing .hot-price b{color:var(--ink);font-weight:700}
.landing .hot-price i{font-style:normal;color:var(--ink-3);font-size:9px;margin-right:6px}
.landing .hot-price i:last-child{margin-right:0}

@media (prefers-reduced-motion:reduce){
  .landing .hot-track{animation:none;flex-wrap:wrap;width:auto}
  .landing .hot-clone{display:none}
  .landing .hot-item{border-right:0;padding-block:8px}
}
@media (max-width:680px){
  /* 窄屏不做自动滚动：交给原生横向滑动（用户自己控制），第二份隐藏，避免重复内容 */
  .landing .hot-strip{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .landing .hot-track{animation:none}
  .landing .hot-clone{display:none}
  .landing .hot-caption{padding:7px 16px 0;font-size:8.5px}
  .landing .hot-item{padding:10px 14px;font-size:10.5px}
}
/* 区块底部小字（运营示意口径） */
.landing .metric-note-sim{margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:var(--ink-3);line-height:1.6}

/* ─────────────────────────────────────────────────────────────
   §4 HERO：Token Plan 变现（2026-11-05 主人任务单）
   - 删掉球形宣传动效（.orbit-* 留在 landing.css 给旧首页 home.html 用，这里不再引用）；
   - 原「全球流量」面板不再单独成块，整张地图下沉成本区的背景层：
     .hero-bg 低透明度 + 渐隐遮罩 + .hero-veil 压暗，保证正文 4.5:1 对比度；
   - 地图只是背景：aria-hidden、pointer-events:none、数字一律不在这里出现。
   ───────────────────────────────────────────────────────────── */
.landing .hero-flow{position:relative;isolation:isolate;padding:96px 0 84px;
  min-height:660px;display:grid;align-items:center;overflow:hidden}
.landing .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.landing .hero-bg .world-map{position:absolute;left:50%;top:50%;width:142%;height:142%;
  transform:translate(-50%,-50%);opacity:.58;
  -webkit-mask-image:radial-gradient(92% 86% at 58% 46%,#000 0%,rgba(0,0,0,.88) 54%,rgba(0,0,0,.40) 80%,transparent 94%);
  mask-image:radial-gradient(92% 86% at 58% 46%,#000 0%,rgba(0,0,0,.88) 54%,rgba(0,0,0,.40) 80%,transparent 94%)}
/* 背景层也要看得出「这是张地图」：陆地点阵往薄荷偏，弧线加粗提亮
   （2026-11-05 主人：原来透明度太高，看不出地图和算力调度的感觉） */
.landing .hero-bg .map-land{fill:rgba(143,217,190,.30)}
.landing .hero-bg .map-graticule{stroke:rgba(198,183,255,.09)}
.landing .hero-bg .map-arc{stroke-width:1.5;opacity:1}
/* 城市名在这个尺度只是噪点：背景层只留光点与弧线 */
.landing .hero-bg .map-pin text{display:none}
.landing .hero-bg .map-pin .halo{opacity:.85}
.landing .hero-bg .map-pin .core{fill:#B7F0DC}
/* 压暗改成**左边重、右边轻**的方向性遮罩：标题那块依然是满对比，右侧把地图放出来 */
.landing .hero-veil{position:absolute;inset:0;
  background:
    radial-gradient(42% 58% at 11% 44%,rgba(8,7,18,.93),rgba(8,7,18,.58) 56%,transparent 78%),
    linear-gradient(96deg,rgba(8,7,18,.88) 0%,rgba(8,7,18,.62) 30%,rgba(8,7,18,.24) 58%,rgba(8,7,18,.06) 84%,rgba(8,7,18,.02) 100%),
    linear-gradient(180deg,rgba(8,7,18,.62),rgba(8,7,18,0) 26%,rgba(8,7,18,.16) 72%,var(--bg) 99%)}
.landing .hero-inner{position:relative;z-index:1}
.landing .hero-inner > *{max-width:820px}
.landing .hero-flow h1{margin-top:22px}
.landing .hero-flow .lede{max-width:640px}

/* 三枚小凭条：一眼看出「能卖什么」 */
.landing .hero-chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0;padding:0;list-style:none}
.landing .hero-chips li{display:inline-flex;align-items:baseline;gap:8px;padding:9px 13px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.landing .hero-chips b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--mint);text-transform:uppercase}

/* 背景说明：口径不是装饰，是免责声明，字号小但必须能读 */
.landing .hero-map-note{margin:16px 0 0;max-width:660px;font-family:var(--mono);
  font-size:9px;line-height:1.75;letter-spacing:.04em;color:var(--ink-3)}

/* ─────────────────────────────────────────────────────────────
   §5 「出售算力」按钮：比主按钮更重（主人第 3 条：要更明显）
   - 专用渐变 + 外发光 + 右侧结算徽标；zh/en 两套文案都在徽标里，不靠字号大小区分；
   - 不用 breathing 类循环呼吸（动效预算：只在状态点上呼吸），改 hover 位移；
   - 命中区 ≥ 48px（与 --hit-mobile 一致），键盘 focus 用全局 --focus-ring。
   ───────────────────────────────────────────────────────────── */
.landing .btn-lg{min-height:56px;padding:0 26px;font-size:15.5px;border-radius:15px}
html[data-lang="zh"] .landing .btn-lg{min-height:58px;padding:0 28px;font-size:16px}

.landing .btn-sell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;min-height:58px;padding:0 18px 0 26px;border:1px solid rgba(247,200,115,.62);
  border-radius:15px;font-family:var(--sans);font-size:16px;font-weight:800;line-height:1;
  letter-spacing:.01em;color:#2A1206;text-decoration:none;white-space:nowrap;cursor:pointer;
  background:linear-gradient(102deg,#F7C873 0%,#F6B98B 46%,#F4A6D7 100%);
  box-shadow:0 14px 38px rgba(244,166,215,.26),0 2px 0 rgba(255,255,255,.22) inset;
  transition:transform var(--t-hover,160ms) ease,box-shadow var(--t-hover,160ms) ease,filter var(--t-hover,160ms) ease}
.landing .btn-sell:hover{transform:translateY(-2px);filter:saturate(1.05);
  box-shadow:0 20px 50px rgba(244,166,215,.36),0 2px 0 rgba(255,255,255,.26) inset}
.landing .btn-sell:focus-visible{outline:var(--focus-ring,2px solid var(--mint));outline-offset:var(--focus-offset,2px)}
.landing .btn-sell .sell-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;
  border-radius:9px;background:rgba(42,18,6,.15);color:#2A1206;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* 卡片内 / 移动端的出售按钮：整行铺满，别让它在窄屏里被挤成小字 */
.landing .btn-sell-card{margin-top:26px;width:100%}
html[data-lang="zh"] .landing .btn-sell-card{min-height:56px}

/* 出售角色卡：让「卖」的一侧比「用」的一侧更硬一点 */
.landing .role-card.sell{border-color:rgba(143,217,190,.30);
  background:linear-gradient(150deg,rgba(143,217,190,.075),rgba(255,255,255,.012) 62%)}
.landing .role-card.sell:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 88% -10%,rgba(143,217,190,.16),transparent 62%)}

@media(max-width:680px){
  .landing .hero-flow{padding:64px 0 58px;min-height:0}
  .landing .hero-bg .world-map{width:190%;height:150%;opacity:.15}
  .landing .hero-veil{background:
    radial-gradient(80% 62% at 30% 36%,rgba(10,9,21,.94),rgba(10,9,21,.62) 60%,transparent 86%),
    linear-gradient(180deg,rgba(10,9,21,.78),var(--bg) 96%)}
  .landing .hero-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .landing .hero-actions .btn{width:100%}
  .landing .btn-sell{padding:0 14px 0 20px;font-size:15px}
  .landing .hero-chips li{font-size:12px;padding:8px 11px}
}

/* ─────────────────────────────────────────────────────────────
   §6 价格面板分组：热门模型（上）/ 低价参考（下）
   同一面板两张表，靠分组标题 + 分隔线区分；行数据全部服务端渲染。
   ───────────────────────────────────────────────────────────── */
.landing .price-block{margin-top:10px}
.landing .price-block + .price-block{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.landing .price-group{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.landing .price-group i{font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.12em;color:var(--ink-3)}
.landing .price-table-hot td:first-child b{font-weight:700}
.landing .price-vendor{display:block;margin-top:3px;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.landing .price-table-hot tbody tr:hover{background:rgba(143,217,190,.05)}
.landing .price-table-hot td{padding-block:11px}
.landing .price-table-hot td:first-child b{letter-spacing:-.01em}
/* 分组标题右侧的采样时间：比文件名弱一档，但必须能读清 */
.landing .price-group-src{color:var(--ink-3);text-transform:none;letter-spacing:.02em}
/* 热门清单读不到、回落成低价参考模型时，明确说一句（不装作是热门清单） */
.landing .price-warn{margin:9px 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:var(--amber)}

/* ─────────────────────────────────────────────────────────────
   §7 版式微调：让长页面有呼吸（主人「还有其他细节调整，让页面更好看」）
   ───────────────────────────────────────────────────────────── */
.landing .roles-grid{gap:16px}
.landing .section-head h2{max-width:22ch}
.landing .cta-panel .btn-sell{margin-left:2px}
.landing .token-grid .token-proof{margin-top:20px}
@media (prefers-reduced-motion:reduce){
  .landing .btn-sell{transition:none}
  .landing .btn-sell:hover{transform:none}
}

/* ── §8 调度概览 · 全球算力调度图（主人 2026-11-05：调度栏目也要保留全球地图动效）
   与 hero 背景同一套点阵/光点/弧线，但这里不压暗、放大、加呼吸，是这一段的视觉主体。 ── */
.landing .sched-map{margin:0 0 26px}
.landing .sched-canvas{position:relative;margin:2px 0 0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(198,183,255,.16);
  background:radial-gradient(120% 160% at 50% 20%,rgba(23,20,48,.92),rgba(10,9,21,.97) 72%)}
.landing .sched-canvas:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 72% at 50% 42%,rgba(143,217,190,.10),transparent 72%)}
.landing .sched-svg{position:relative;display:block;width:100%;height:auto;max-height:420px}
.landing .sched-svg .map-land{fill:rgba(143,217,190,.34)}
.landing .sched-svg .map-graticule{stroke:rgba(198,183,255,.075)}
.landing .sched-svg .map-arc{stroke:url(#arcGradSched);stroke-width:1.8}
.landing .sched-svg .map-pin .core{fill:#C8F6E6}
/* 呼吸 = 这个枢纽在接单：只用 transform/opacity，不触发布局 */
.landing .sched-svg .map-pin .halo{fill:rgba(143,217,190,.14);animation:mapHalo 3.8s ease-in-out infinite}
.landing .sched-svg .map-pin.minor .halo{animation-duration:5.2s}
.landing .sched-svg .map-pin text{fill:#BCD8D3;font-size:11px;letter-spacing:.08em}
@keyframes mapHalo{0%,100%{opacity:.34;transform:scale(.85)}50%{opacity:1;transform:scale(1.45)}}
.landing .sched-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:12px 16px 14px;
  list-style:none;border-top:1px solid rgba(198,183,255,.12);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-2)}
.landing .sched-legend li{display:inline-flex;align-items:center;gap:7px}
.landing .sched-legend i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.landing .sched-legend .lg-node{background:#B7F0DC;box-shadow:0 0 0 3px rgba(143,217,190,.16)}
.landing .sched-legend .lg-arc{width:16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(143,217,190,.25),#B9A2FF,#F4A6D7)}
.landing .sched-legend .lg-ring{background:transparent;border:1px solid rgba(143,217,190,.75)}
@media (prefers-reduced-motion:reduce){
  .landing .sched-svg .map-pin .halo{animation:none;opacity:.8}
}
@media(max-width:680px){
  .landing .sched-svg{max-height:280px}
  .landing .sched-legend{gap:6px 14px;padding:10px 12px 12px}
  .landing .sched-svg .map-pin text{font-size:9.5px}
}

/* ── 日间模式：首页 hero 的压暗遮罩与调度画布换成浅色，文字仍用深墨 ── */
html[data-theme="day"] .landing .hero-veil{background:
  radial-gradient(42% 58% at 11% 44%,rgba(245,241,250,.96),rgba(245,241,250,.72) 56%,transparent 78%),
  linear-gradient(96deg,rgba(245,241,250,.94) 0%,rgba(245,241,250,.72) 30%,rgba(245,241,250,.30) 58%,rgba(245,241,250,.10) 84%,transparent 100%),
  linear-gradient(180deg,rgba(245,241,250,.70),rgba(245,241,250,0) 26%,rgba(245,241,250,.22) 72%,var(--bg) 99%)}
html[data-theme="day"] .landing .hero-bg .map-land{fill:rgba(47,125,102,.22)}
html[data-theme="day"] .landing .hero-bg .map-graticule{stroke:rgba(106,79,191,.10)}
html[data-theme="day"] .landing .sched-canvas{border-color:var(--line);background:radial-gradient(120% 160% at 50% 20%,rgba(255,255,255,.95),rgba(237,231,246,.92) 72%)}
html[data-theme="day"] .landing .sched-canvas:before{background:radial-gradient(58% 72% at 50% 42%,rgba(47,125,102,.08),transparent 72%)}
html[data-theme="day"] .landing .sched-svg .map-land{fill:rgba(47,125,102,.24)}
html[data-theme="day"] .landing .sched-svg .map-graticule{stroke:rgba(106,79,191,.10)}
html[data-theme="day"] .landing .sched-svg .map-pin text{fill:#3C3457}
html[data-theme="day"] .landing .sched-legend{border-top-color:var(--line)}
html[data-theme="day"] .landing .hero-chips li{background:rgba(255,255,255,.62)}