/* ============================================================
   第四层：骨架重做（去参考站同构）
   ============================================================
   前三层（style.css / crc30.css / logo-mark.css）都是"换变量、换造型"，
   但**骨架没动**—— 左文右圆环 + 下方 2×2 卡片，这套构图是发币页面的通用范式，
   也是参考站最容易被认出来的部分。改配色不解决"一眼像"。

   这一层改的是**版式骨架**：
     旧：hero 左文 / 右圆形仪表 + 下方 2×2 特性卡
     新：整页收窄成单一信息栏，发行轨道成为首屏主视觉（横向 21,000 格），
         圆形刻度盘降级为轨道下方的小仪表，特性卡改成单行流水
   为什么轨道是横的：横向进度带是"债券/发行"的语汇，
   而圆形进度环是"徽章/成就"的语汇。CRC-30 是前者。
   ---------------------------------------------------------- */

/* ---------- hero：单栏纵向，轨道在最前 ---------- */
.hero{
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  max-width:1180px!important;
  padding:56px var(--gutter) 72px!important;
}
/* DOM 顺序已调整为 rail 在最前，无需 order。*/

/* 左栏文字不再并排，直接按阅读顺序落进单栏 */
.hero .eyebrow{margin-bottom:20px}
.hero h1{
  /* 标题不是主角了：发行才是。缩小并压低存在感。 */
  font-size:clamp(24px,2.2vw,32px)!important;
  letter-spacing:.02em!important;
  margin:0 0 14px!important;
}
.hero .lede-hook{
  font-size:clamp(17px,1.5vw,20px)!important;
  margin:0 0 20px!important;
  padding-bottom:20px;
  border-bottom:1px solid var(--line-soft);
}
.hero .lede{max-width:66ch!important;font-size:15.5px!important}
.hero .lede-2{max-width:66ch!important}

/* ---------- 发行轨道：首屏主视觉 ---------- */
.rail{
  margin:34px 0 0;
  border:1px solid var(--line-soft);
  background:
    linear-gradient(180deg,rgba(240,255,246,.018),rgba(0,0,0,.28));
  padding:18px 20px 14px;
}
.rail-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:16px;
}
.rail-head .label:first-child{
  color:var(--brand);letter-spacing:.24em;font-size:11px;
}
.rail-sub{color:var(--ink-4);letter-spacing:.08em;flex:0 1 auto;text-align:right}

/* 21,000 格。用 flex + flex-grow 摊开，比逐格定位省。
   已 mint 的部分用品牌色，未 mint 的极暗 —— 明度差，不用色相。 */
.rail-track{
  --fill:0%;
  display:flex;gap:0;height:34px;width:100%;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.rail-track i{
  flex:1 1 0;min-width:0;height:100%;
  border-right:1px solid rgba(4,7,5,.85);
  background:rgba(240,255,246,.055);
}
.rail-track::after{
  /* 已 mint 覆盖层：用 clip 百分比精确对齐"第几份已mint" */
  content:'';position:absolute;inset:0;
  width:var(--fill);
  background:linear-gradient(180deg,var(--brand),rgba(157,255,200,.55));
  box-shadow:0 0 22px rgba(157,255,200,.18);
  pointer-events:none;
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.rail-scale{
  display:flex;justify-content:space-between;margin-top:7px;
}
.rail-scale .label{color:var(--ink-5);letter-spacing:.1em;font-size:10.5px}

/* ---------- 圆形刻度盘：降级为轨道下的小仪表 ---------- */
.orb{
  /* 从 620px 的大圆缩成一条窄带里的小表 —— 不再是首屏主角 */
  width:100%!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  height:118px;
  margin:16px 0 0!important;
  border:1px solid var(--line-soft);
  border-top:0;
  display:grid;grid-template-columns:132px minmax(0,1fr);
  align-items:center;gap:0;
  background:rgba(0,0,0,.2);
}
.orb::before{display:none}          /* 底盘径向光已不需要 */
.orb-dial{
  /* 改成半个环：只用上半圈，像仪表指针盘 */
  position:absolute!important;left:0;top:0;
  width:118px!important;height:118px!important;
  transform:none!important;
  opacity:.5;
}
.orb-ring{
  position:absolute;left:0;top:0;width:118px;height:118px;
  opacity:.42;
}
/* 端点百分比标签：移到左右两端，别压在环上 */
.orb-end{font-size:10.5px!important;letter-spacing:.2em;opacity:.55}
.orb-end-l{left:auto!important;right:auto!important;position:static;margin-left:14px}
.orb-end-r{position:static;margin-left:auto}
.orb-tip{display:none}                /* 悬停提示在轨道上已不需要 */

/* orb-read：改成一条横向读数带 */
.orb-read{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px!important;
  background:var(--line-soft);
  border-left:1px solid var(--line-soft);
  align-self:stretch;align-content:center;
}
.orb-read>div{
  background:rgba(0,0,0,.22);
  padding:12px 14px;
  display:grid;gap:4px;align-content:center;min-width:0;
}
.orb-read .label{color:var(--ink-5);letter-spacing:.14em;font-size:10px}
.orb-read b{font-size:19px!important;line-height:1.2}
.orb-read b.is-soon{font-size:11px!important;padding:3px 8px}

/* ---------- 特性卡：2×2 → 单行流水 ---------- */
.feats{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:1px!important;
  margin-top:38px!important;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.feat{
  background:var(--bg-1);
  padding:16px 16px 18px;
  /* 与卡片区同一套角标记号 */
  position:relative;
  transition:background .16s;
}
.feat:hover{background:var(--surface-2)}
.feat::before{
  content:'';position:absolute;left:-1px;top:-1px;width:10px;height:10px;
  border-left:1px solid var(--brand-dim);border-top:1px solid var(--brand-dim);
}
.feat-n{font-size:19px!important;margin-bottom:6px!important}
.feat-t{font-size:13px!important;letter-spacing:.02em}
.feat-s{font-size:11px!important;line-height:1.55}

/* ---------- 全站节奏：让每一屏都是"数据表"而不是"宣传页" ---------- */
.card,.proto,.faq{padding-left:var(--gutter);padding-right:var(--gutter)}

/* 打印与窄屏：轨道在375px 下21,000 格会糊成一片，
   所以窄屏只画进度覆盖层、不画格线。 */
@media(max-width:760px){
  .rail-track i{border-right:0}
  .rail-track{height:22px}
  .feats{grid-template-columns:1fr 1fr!important}
  .orb{grid-template-columns:1fr;height:auto}
  .orb-dial,.orb-ring{display:none}   /* 小屏直接不画圆表，省空间 */
  .orb-read{grid-template-columns:1fr;border-left:0;border-top:1px solid var(--line-soft)}
}
/* ---------- 修1：圆形仪表不能塌 ---------- */
/* 上面把 .orb 设为 grid 且 height:118px，但 .orb-dial/.orb-ring 是
   position:absolute（不占布局），整个 grid 就只剩一行 0px。
   改回 flex 行：左边固定一块放圆表，右边读数带。 */
.orb{
  display:flex!important;
  align-items:stretch;
  height:auto!important;
}
.orb-dial,.orb-ring{display:block!important}
/* 给圆表一个占位盒子（原 .orb 自身就是那个盒子），
   所以这里只需要让读数带不吃满整行。 */
.orb-read{flex:1 1 auto;min-width:0}

/* ---------- 修2：进度为 0 时轨道也要有可见结构 ---------- */
/* 未 mint 的格子 rgba(.055) 在纯黑上几乎看不见，
   于是"21,000 格"这个卖点看不到，只剩一条空带。
   提高底格明度 + 加上每 500 份一根更亮的分隔线。 */
.rail-track i{background:rgba(240,255,246,.10)}
.rail-track{
  /* 每 500 份一根里程碑线（1%），比逐格线更耐看 */
  background-image:
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,255,246,.16) 1px,transparent 1px);
  background-size:10% 100%,2% 100%;
  background-repeat:no-repeat;
}

/* ============================================================
   第四层 · 修正（第一版实测后）
   ============================================================
   踩到的三个问题，都不是"设计不好看"而是**信息没显示出来**：
     ① 21,000 格看不见 —— 底格明度 .10 在 #040705 上对比不足，
        且 gap:0 + 21,000 个 1/21000 宽的元素会被浏览器四舍五入成 0
     ② 圆表压成 17px —— .orb 改 flex 后 canvas 是 absolute，
        不占高度，容器只剩文字高度
     ③ 读数挤成一团 —— .orb-read 是 .orb 的兄弟节点，
        我却给它写了 grid-template-columns，父级不给宽度
   ------------------------------------------------------------ */

/* ① 格子的可见性：靠边框而不是背景色。
   背景色在深底上要看得很仔细才找得到，边框是"结构线"，
   一眼就能看出这是一条被切成很多段的带子。
   21,000 个 border-right 在浏览器里会被合并绘制，实际开销可接受。 */
.rail-track{
  height:44px;
  background:rgba(240,255,246,.028);
  box-shadow:inset 0 0 0 1px rgba(240,255,246,.07);
}
.rail-track i{
  border-right:1px solid rgba(240,255,246,.16);
  background:transparent;
}
/* 每 500 份一根更亮的里程碑（背景渐变，不额外元素） */
.rail-track::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(240,255,246,.34) 1px,transparent 1px);
  background-size:2% 100%;
  background-repeat:no-repeat;
}
/* 已 mint 覆盖层要在里程碑线之上 */
.rail-track::after{z-index:1}

/* ② 圆表：给它一个真实高度。
   canvas 是 absolute，所以必须由 .orb 自己定高，
   并且留出左边的位置给圆表、右边给读数。 */
.orb{
  height:132px!important;
  align-items:stretch;
  gap:0;
  border-left:0;
}
.orb-dial,.orb-ring{
  width:132px!important;height:132px!important;
  position:absolute;left:0;top:0;
  opacity:.62;
}
/* 左槽：给圆表占位，否则读数会盖在圆上 */
.orb::before{
  content:'';display:block;width:132px;flex:0 0 132px;
}
/* 端点标签：上下排列在圆表下方 */
.orb-end{
  position:static!important;
  display:block;
}
/* ③ 读数带：给它明确的宽度与三等分 */
.orb-read{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1px!important;
  background:var(--line-soft)!important;
  border-left:1px solid var(--line-soft)!important;
  flex:1 1 auto;min-width:0;width:auto;
  align-self:stretch;
}
.orb-read>div{
  background:rgba(0,0,0,.24);
  padding:14px 16px;
  display:grid;gap:5px;align-content:center;min-width:0;
}
.orb-read b{font-size:20px!important;line-height:1.15;overflow-wrap:anywhere}
.orb-read .label{color:var(--ink-5);font-size:10px;letter-spacing:.14em}

/* 窄屏：圆表彻底不画（它是装饰性的仪表，不是数据本体） */
@media(max-width:760px){
  .orb{height:auto!important}
  .orb::before,.orb-dial,.orb-ring,.orb-end{display:none!important}
  .orb-read{border-left:0;border-top:1px solid var(--line-soft);grid-template-columns:1fr!important}
  .rail-track{height:26px}
  .rail-track i{border-right:0}
}

/* ============================================================
   第四层 · 收尾（第二次实测后）
   ------------------------------------------------------------
   实测发现 21,000 个 <i> 在 1082px 宽里每个只有 0.05px ——
   浏览器把它们全部舍入成 0 宽，于是 border-right 也不画，
   整条轨道退化成一块灰板。**这是"元素数量×可用宽度"的硬约束**，
   不是配色问题。
   改用**不依赖元素宽度**的画法：repeating-linear-gradient，
   周期 1/21000，纯粹由背景绘制，与 DOM 无关。 */
.rail-track{
  height:46px;
  background:
    /* 每 500 份一根里程碑（2%） */
    linear-gradient(90deg,rgba(240,255,200,.42) 1px,transparent 1px) 0 0/2% 100% no-repeat,
    /* 每份一格（周期 = 100%/21000） */
    repeating-linear-gradient(90deg,
      rgba(240,255,246,.20) 0 1px,
      transparent 1px calc(100%/21000)),
    rgba(240,255,246,.035);
  box-shadow:inset 0 0 0 1px rgba(240,255,246,.09);
}
/* 21,000 个 i 不再承担"画线"职责，只是给读屏与调试一个计数锚点 */
.rail-track i{display:none}

/* 已 mint 覆盖层：进度 0% 时也要留一条基线，
   否则整条轨道看不出"这是进度条" */
.rail-track::after{
  width:var(--fill);
  min-width:2px;
  background:linear-gradient(180deg,#b8ffdb,rgba(120,235,178,.62));
  box-shadow:0 0 24px rgba(157,255,200,.24);
}

/* ---------- 圆表：与特性卡分层，别被压住 ---------- */
.orb{
  margin-top:22px!important;
  position:relative;
  background:rgba(0,0,0,.24);
}
/* 圆表区域单独占左边，读数在右边，中间留白 */
.orb-dial,.orb-ring{opacity:.85}
.orb-end{opacity:.6;font-size:10px!important}

/* ---------- 标题重新成为锚点 ---------- */
.hero h1{
  font-size:clamp(30px,3.2vw,44px)!important;
  margin:0 0 12px!important;
  letter-spacing:.06em!important;
}
.hero .lede-hook{
  font-size:clamp(15px,1.25vw,18px)!important;
  margin:0 0 18px!important;
  padding-bottom:18px;
}

/* ============================================================
   第四层 · 最后（圆表区）
   ------------------------------------------------------------
   实测截图显示：圆环画得对，但中心的"0.00%"文字**压在环上**。
   原因是 .orb-end 是 absolute 且带 left/right，
   在 flex 容器里被当成了 flex 子项之外的定位元素，
   落到容器左上角去了。改成正常流内排列。 */
.orb{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:0;
  height:150px!important;
  padding:0 0 0 0;
}
/* 圆表占位块：把 canvas 与端点标签一起装进去 */
.orb-face{
  position:relative;
  width:150px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
}
.orb-dial,.orb-ring{
  position:absolute!important;left:0;top:50%!important;
  transform:translateY(-50%)!important;
  width:150px!important;height:150px!important;
  opacity:.9;
}
/* 端点标签：叠在环的上下两端，不再跑位 */
.orb-end{
  position:absolute!important;
  font-size:9.5px!important;letter-spacing:.18em;opacity:.5;
}
.orb-end-l{left:0!important;right:auto!important;top:2px!important}
.orb-end-r{left:auto!important;right:0!important;bottom:2px!important}
.orb-tip{display:none!important}
/* 中心数字在环内，用 .orb-read 的第一格承载视觉焦点即可，
   这里只保证不与环重叠。 */
.orb-read{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1px!important;background:var(--line-soft)!important;
  border-left:1px solid var(--line-soft)!important;
  height:100%;align-self:stretch;
}
.orb-read>div{
  background:rgba(0,0,0,.26);padding:16px 18px;
  display:grid;gap:6px;align-content:center;min-width:0;
}
.orb-read b{font-size:22px!important;line-height:1.15;overflow-wrap:anywhere}
@media(max-width:760px){
  .orb{grid-template-columns:1fr;height:auto!important;padding:0}
  .orb-face{display:none}
  .orb-read{border-left:0;border-top:1px solid var(--line-soft);grid-template-columns:1fr!important}
}

/* 读数带第三格：已 mint 份数。进度百分比已在轨道上用色块表示，
   环心不再重复显示百分比（原来"0.00%"压在刻度上，两处都在说同一件事）。 */
.read-c .label{color:var(--ink-5);font-size:10px;letter-spacing:.14em}
.read-c b{font-size:17px!important;color:var(--brand);letter-spacing:.02em}
/* 环心不再放数字：把百分比留给读数带，环只做"仪表"不做"文案板" */
.orb-face{position:relative}

/* ============================================================
   第五层·修正：铸造台改成真正的两列
   ============================================================
   第一版把 mint-card 设为两列 grid，但**漏数了子元素** ——
   它有 10 个直接子（fld-row / pxd / avail / cost / act / msg /
   receipt / prog / swap-note / selftest），我只给前三个分了列，
   于是 act 与 msg 被拆到两列、receipt 与 prog错位，页面明显散架。
   ⚠️ 教训：给一个容器改布局前，先把它的**全部直接子元素**列出来
   （浏览器里 [...c.children] 最快），不能凭印象猜有几个。

   正确做法：所有子元素默认进第1 列（输入侧），
   只有结果相关的（cost / msg / prog / selftest）进第 2 列。
   ---------------------------------------------------------- */
#mint-card{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;
  gap:0!important;padding:0!important;
  border:1px solid var(--line-soft);background:rgba(0,0,0,.24);
  align-items:start;
}
/* 第 1 列：输入侧 */
#mint-card > .fld-row,#mint-card > .pxd,#mint-card > .avail,
#mint-card > .act,#mint-card > .receipt,#mint-card > .swap-note{
  grid-column:1;padding:20px 24px;
}
#mint-card > .fld-row{border-bottom:1px solid var(--line-soft);align-content:start}
#mint-card > .pxd{border-bottom:1px solid var(--line-soft)}
#mint-card > .act{border-top:1px solid var(--line-soft)}

/* ---------- MINT 窗口倒计时横幅（通栏） ----------
   占满两列、位于卡片最顶：未开始态这是全页最重要的信息，
   不能再是 .prog 里一行 11px 的 dim 小字。
   横幅显示时（未开始/进行中/读取中），右侧 cost 从第 2 行起排 ——
   原来的 1/3 对应 fld-row/pxd/avail 三行，加横幅后它们整体下移一行。
   :has() 让"横幅隐藏（已关闭态）时布局自动回到原样"，
   否则右上角会留下一块空格。 */
#mint-card > .cd{grid-column:1/-1}
/* ⚠️ 这里必须带 !important：文件后面"第五层·再修正"有一段
   `#mint-card > .cost{grid-row:1/4!important}`（为无横幅的关闭态设计）。
   两条都带 !important 时比特异性 —— 本选择器（id + :has 实参 + class）
   高于普通的 `#mint-card > .cost`，所以桌面端横幅可见时本节生效：
   cost 让到第 2 行起，横幅占第 1 行通栏。
   横幅隐藏（关闭态）时 :has() 不匹配，cost 落回 1/4，布局自动还原。
   ≤900px 的 640 行 `grid-row:auto!important` 在文件更后面，移动端仍压得住。 */
#mint-card:has(> .cd:not([hidden])) > .cost{grid-row:2/4!important}

/* 第 2 列：结果侧，滚动时钉住 */
#mint-card > .cost{grid-column:2;grid-row:1/3;
  position:sticky;top:80px;align-self:start;
  padding:20px 24px;border-left:1px solid var(--line-soft);
  display:grid;grid-template-columns:1fr;gap:0;}
#mint-card > .msg{grid-column:2;border-left:1px solid var(--line-soft);padding:16px 24px}
#mint-card > .prog{grid-column:2;border-left:1px solid var(--line-soft);padding:14px 24px}
#mint-card > .selftest{grid-column:1/-1;padding:12px 24px}
#mint-card > .avail{border-top:1px solid var(--line-soft)}

#mint-card .cost .cost-a{border-top:1px solid var(--line-soft);padding-top:16px;margin-top:6px}

/* 步骤条：小标签而非横贯 header；序号做成方章，与圆徽章同族 */
#mint-card .step{border-top:0;padding:0 0 10px;margin-bottom:14px;
  border-bottom:1px solid var(--line-soft)}
#mint-card .step-n{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border:1px solid var(--brand-dim);
  font:400 10px/1 var(--mono);color:var(--brand);letter-spacing:0}

@media(max-width:900px){
  #mint-card{grid-template-columns:1fr!important}
  /* :has 那条 grid-row:2/4 的特异性更高，移动端必须显式压回去，
     否则单列布局里 cost 会跳到第 2 行、与表单之间裂开一格。 */
  #mint-card > .cost,#mint-card > .msg,#mint-card > .prog,
  #mint-card:has(> .cd:not([hidden])) > .cost{
    grid-column:1;grid-row:auto;position:static;border-left:0;
    border-top:1px solid var(--line-soft)}
  #mint-card .fld-row{grid-template-columns:1fr!important;gap:20px}
}

/* 资产下拉：从"圆角胶囊"改成直角带，
   与站内 1px 间隙网格的直角语言一致。 */
.dd-btn{
  border-radius:0!important;
  padding:14px 16px!important;
  gap:14px!important;
}
.dd-name{font-size:17px!important;letter-spacing:.04em}
.dd-menu{border-radius:0!important}
.dd-menu li{
  border-radius:0!important;
  padding:13px 16px!important;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  align-items:baseline;
}
/* 当前选中项：左侧竖线 + 品牌色，不是浅灰高亮 */
.dd-menu li[aria-selected=true]{
  box-shadow:inset 2px 0 0 var(--brand)!important;
  background:rgba(157,255,200,.06)!important;
}
.dd-menu li[aria-selected=true] .dd-sub{color:var(--brand-dim)!important}

/* 金额输入：数字是这一栏的主角，字号再提一档 */
.amt-box{padding:16px 18px!important;border-radius:0!important}
.amt-box input{font-size:26px!important;letter-spacing:-.01em}
.presets{gap:6px!important}
.presets button{border-radius:0!important;padding:8px 12px!important}

/* 计价切换：默认静态块状，选中才亮起 */
.chip{border-radius:0!important}
.chip.on{
  background:var(--brand)!important;
  color:#04120b!important;
  border-color:var(--brand)!important;
}

/* ============================================================
   第五层·续：控件形态统一
   ------------------------------------------------------------
   原版所有控件是"圆角胶囊 + 浅色描边"，这是 2020 年后
   通用 SaaS 的样子。改成直角 + 一条底边强调 ——
   与站内的 1px 间隙网格、方章序号同族。 */

/* 主按钮：从整块填充改成"描边 + 左侧实心方块"，
   视觉重量集中在左侧 = 动作的起点方向。 */
.btn-solid{
  border-radius:0!important;
  background:transparent!important;
  border:1px solid var(--brand)!important;
  color:var(--brand)!important;
  position:relative;
  padding-left:34px!important;
  overflow:hidden;
  transition:background .16s,color .16s;
}
.btn-solid::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:22px;
  background:var(--brand);
  transition:width .18s cubic-bezier(.22,.61,.36,1);
}
.btn-solid:hover{background:rgba(157,255,200,.08)!important;color:var(--ink-display)!important}
.btn-solid:hover::before{width:30px}
.btn-solid:active::before{width:34px}
.btn-solid:disabled{opacity:.4;cursor:not-allowed}
.btn-solid:disabled::before{background:var(--ink-5)}
/* 打印时按钮没有意义，去掉交互态 */
@media print{
  .btn-solid::before{display:none}
  .btn-solid{border-color:#0a7a4a!important;color:#0a7a4a!important}
}

/* 所有表单控件统一为直角 */
#mint-card input,#mint-card select,#mint-card button{border-radius:0!important}
#mint-card .chip{letter-spacing:.02em}
#mint-card .fee-seg button{border-radius:0!important}

/* 日期输入：原生控件在英文界面下会显示 locale 的日期格式，
   无法用 CSS 改。改为在它上方给出显式的 ISO 日期文本，
   用户不必猜格式。 */
#mint-card .pxd input[type=date]{
  font-family:var(--mono)!important;
  letter-spacing:.04em;
  color-scheme:dark;
}
/* K 线：限高，别让图表把整栏撑满 */
#mint-card .kline-wrap{max-height:340px}
#mint-card .kline{height:300px}

/* ============================================================
   第五层·收尾
   ------------------------------------------------------------
   实测三处问题：
   ① MINT 按钮左侧方块 22px 太宽，在整行宽按钮上像进度条
      → 改成 4px 的窄竖条（表示"从这里开始"），并把文字左移收窄
   ② 「YOU CAN MINT」标签压在金额输入框上（两栏后标签换了位置）
      → 给 cost 区第一格加上边距，不再与输入框同行
   ③ 右栏下方大片空白：K 线只有 300px 高，右栏内容不够撑满
      → 把 K 线移到右栏（它是"计价依据"，与结果同侧才合逻辑），
         左栏只留输入，减少视觉失衡
   ---------------------------------------------------------- */

/* ① 按钮左侧窄竖条 */
.btn-solid{padding-left:22px!important}
.btn-solid::before{width:4px}
.btn-solid:hover::before{width:7px}
.btn-solid:active::before{width:9px}

/* ② cost 区第一格留出间距 */
#mint-card .cost-b{padding-bottom:12px}

/* ③ K 线与结果同侧：
   K 线是"这个价格从哪来"的证据，和结果放一起才说得通。
   用 grid 显式换位，不用 order（跨容器不可靠）。 */
#mint-card > .pxd{
  grid-column:2!important;
  grid-row:2/4;
  border-left:1px solid var(--line-soft);
  border-bottom:0!important;
  border-top:1px solid var(--line-soft);
  position:sticky;top:calc(80px + 360px);
  align-self:start;
  padding-top:16px!important;
}
#mint-card > .cost{grid-row:1/2!important}
@media(max-width:900px){
  #mint-card > .pxd{grid-column:1!important;grid-row:auto!important;position:static;
    border-left:0!important;border-top:1px solid var(--line-soft)}
}
/* 右栏整体不再需要 sticky（K线也在右栏，整体钉住即可） */
#mint-card > .cost{position:sticky;top:80px}

/* ============================================================
   第五层·再修正：K线搬回左栏
   ------------------------------------------------------------
   把 .pxd（计价 + K线）搬到右栏后，左栏只剩输入与按钮，
   下方空出近一屏 —— 比原来的"右栏空"更明显。
   判断错了：右栏的自然高度（约 360px）本来就撑不满，
   而左栏有 fld-row + act + receipt + swap-note，天然够高。

   正确做法：K线回左栏（它确实是输入的一部分），
   把右栏的内容**在垂直方向铺开**填满（用 flex 分布，
   而不是让它顶部对齐后下面空着）。
   ---------------------------------------------------------- */
#mint-card > .pxd{
  grid-column:1!important;grid-row:auto!important;
  position:static!important;
  border-left:0!important;border-top:0!important;
  border-bottom:1px solid var(--line-soft)!important;
}
#mint-card > .cost{
  grid-column:2!important;grid-row:1/4!important;
  position:sticky!important;top:80px;
  align-self:stretch!important;
  /* 关键：让右栏内容在高度上均分，而不是顶部对齐后下面留白 */
  display:flex!important;flex-direction:column;justify-content:space-evenly;
  gap:4px;
}
#mint-card > .cost .cost-b{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:18px 0;
}
@media(max-width:900px){
  #mint-card > .cost{grid-column:1!important;grid-row:auto!important;position:static!important}
}

/* K 线回到左栏后给足高度（它是唯一的图形内容） */
#mint-card .kline-wrap{max-height:none}
#mint-card .kline{height:280px}

/* ============================================================
   第五层·第三修正：右栏填满
   ------------------------------------------------------------
   上一版让 .cost 同时`position:sticky` + `align-self:stretch`，
   两者**互斥**：sticky 元素必须有确定高度才能吸顶，
   于是 stretch 失效，右栏底部空出 360px。
   量出来才发现，不是靠看缩略图猜的。

   决定：**放弃 sticky**。
   两栏布局本身已经解决核心问题——改数量时结果就在右边，
   不用上下找。而 sticky 在这个卡片高度下收益很小，
   代价是右栏填不满。
   （要sticky 又要填满，必须包一层容器做 grid-area，
   为视觉对齐多一层 DOM不值得。）
   ---------------------------------------------------------- */
#mint-card > .cost{
  position:static!important;
  align-self:stretch!important;
  grid-column:2!important;
  grid-row:1/4!important;
  display:flex!important;flex-direction:column;justify-content:space-evenly;
}
/* 自检行只占左栏：它原本 grid-column:1/-1 跨两列，
   会把卡片高度撑到右栏之外，制造假的"右栏没填满"。 */
#mint-card > .selftest{grid-column:1!important;border-right:1px solid var(--line-soft)}
/* prog（供给进度）也进右栏底部，与 cost 同列 */
#mint-card > .prog{grid-column:2!important;grid-row:auto;align-self:end}

/* 原生日期输入：跟随文档语言。
   Chromium 按 <html lang> 决定日期框的占位格式（en → mm/dd/yyyy），
   之前 html lang 是 zh-cn，于是英文界面里显示"年/月/日"。 */
#mint-card input[type=date]{color-scheme:dark}

/* ============================================================
   响应式修正（由 tools/crc30_responsive.js 抓出）
   ------------------------------------------------------------
   ① 360px 主站横向溢出：`.fld-row` 的两列是
      `minmax(0,1fr) minmax(0,1.25fr)`，在 360px 下每列约 150px，
      而 `.step` 里的「01 + 标签 + 如何铸造按钮」最小内容宽度超过 150px
      → 网格项被内容顶开（min-width:auto 的经典问题）。
      修法：给直接子加 `min-width:0`，并在 ≤480px 时单列。
   ② Swap 页溢出：`.xtab td` 有 `white-space:nowrap`，
      阶梯报价表的列又多，窄屏必然撑破。
      修法：≤700px 时允许换行，并把表格包在可横向滚动的容器里
      （横向滚动优于挤压列宽——数字列挤到看不清更糟）。
   ③ 「如何铸造」按钮只有 18px 高：它是 inline-flex，
      高度由 16px 的问号图标决定。触控目标最小应 32px。
      修法：给足 padding 与 min-height。
   ---------------------------------------------------------- */

/* ① 网格子项必须允许收缩 */
#mint-card > .fld-row > .fld{min-width:0!important}
#mint-card .step{flex-wrap:wrap;row-gap:6px}

/* ② ⚠️ .fld 是 grid 容器（style.css 里只写了 display:grid），单列走隐式 auto，
      会被内容 max-content 撑开、不受自身宽度夹住 —— 实测 02 栏 .fld 只有 326px，
      它的列却被"金额框 + 预设按钮组"的 max-content 撑到 375px，
      金额框向右溢出 49px 压进右侧结果栏（绿框切在"你可铸造"文字上）。
      显式给 minmax(0,1fr)：列宽恒等于容器宽，子项可收缩，永不外溢。
      注意 min-width:0 只解决"允许收缩"，不解决"列被撑开"，两条都要。 */
#mint-card > .fld-row > .fld{grid-template-columns:minmax(0,1fr)}
#mint-card .amount{min-width:0;flex-wrap:wrap}
#mint-card .presets{flex-wrap:wrap;min-width:0;max-width:100%}
#mint-card .amt-box{max-width:100%}
@media(max-width:480px){
  #mint-card .fld-row{grid-template-columns:1fr!important;gap:18px!important}
  #mint-card{padding:0!important}
  #mint-card > .fld-row,#mint-card > .pxd,#mint-card > .avail,
  #mint-card > .act,#mint-card > .receipt,#mint-card > .swap-note,
  #mint-card > .cost,#mint-card > .msg,#mint-card > .prog{
    padding-left:16px!important;padding-right:16px!important;
  }
  #mint-card .feats{grid-template-columns:1fr!important}
}

/* ③ 「如何铸造」等文字按钮：保证可点面积 */
.how-btn{
  min-height:32px!important;
  padding:6px 10px!important;
  margin-left:auto;
}
.how-btn::before{width:15px;height:15px;flex:0 0 15px}

/* ② 表格类内容：窄屏横向滚动，而不是压扁列 */
@media(max-width:700px){
  .xtab,.proto table,.lp-covtab>table{width:100%;table-layout:auto}
  .xtab td,.xtab th{white-space:normal!important;word-break:break-word}
  /* 给所有宽表加一层可滚动容器（JS 会把超宽表格包起来） */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line-soft)}
  .tbl-scroll>table{margin:0;min-width:min-content}
}

/* ============================================================
   360px 最后修正：fld-row 的两列为什么没塌成单列
   ------------------------------------------------------------
   实测 grid-template-columns 仍是 `163px 377.5px`（两列），第二列
   宽到 377px —— 媒体查询命中了（matchMedia 为true），
   但 style.css 里那条 `minmax(0,1fr) minmax(0,1.25fr)` 的
   **特异性与我的规则相同**，而它写在文件更早的位置；
   我的 `!important` 又被另一条没加 important 的后写规则盖掉了。
   教训：跨样式表的媒体查询覆盖，**必须加 !important**，
   否则同特异性的先后顺序决定胜负 —— 顺序在不同文件里不可控。

   另外 `.step`（01 + 标签 + 如何铸造按钮）自身最小宽度 176px，
   比 131px 的列还宽，所以列即使塌成单列，内容仍会顶开。
   给 .step 允许换行即可（已在上面设过 flex-wrap，这里补 min-width）。
   ---------------------------------------------------------- */
@media(max-width:520px){
  /* 双保险：!important + 提高特异性（重复选择器） */
  #mint-card #mint-card > .fld-row,
  #mint-card > .fld-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
  }
  #mint-card > .fld-row > .fld{
    min-width:0!important;
    width:100%!important;
  }
  .step{
    min-width:0!important;
    flex-wrap:wrap!important;
    row-gap:8px!important;
  }
  .step-n{flex:0 0 auto!important}
  .step > .label{min-width:0!important;overflow-wrap:anywhere}
  /* 金额框与预设档在极窄屏必须能压到容器宽 */
  .amount{flex-wrap:wrap!important}
  .amt-box{flex:1 1 100%!important;min-width:0!important}
  .presets{flex:1 1 100%!important;display:flex;flex-wrap:wrap;gap:6px}
  .presets button{flex:0 0 auto}
}

/* ============================================================
   360px · 溢出根因修正（量出来的，不是猜的）
   ------------------------------------------------------------
   实测两个元素超宽：
     .how-btn  176px  "How minting works" 不换行 + margin-left:auto
     .amt-box  440px  flex:1 1 100% 但父 .amount 也是 440

   ① .how-btn：英文文案比中文长得多（"如何铸造" 4 字 vs
      "How minting works" 17 字符），且 inline-flex 不换行。
      窄屏下让它换到第二行并允许文字折行。
   ② .amt-box / .amount：`minmax(0,1fr)` 的列在 360px 下是 131px，
      但 flex 子项的 `flex-basis:100%` 参照的是**父容器内容宽**，
      父容器若被内容顶开就形成正反馈。必须给父层也加 min-width:0。

   另外 .amt-box 里的 input 有 `flex:1 1 auto`，
   未设 min-width 时同样按内容撑开。
   ---------------------------------------------------------- */
@media(max-width:520px){
  /* ① 如何铸造按钮换行 */
  .how-btn{
    margin-left:0!important;
    flex:0 0 auto!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    line-height:1.35!important;
    height:auto!important;
    justify-content:flex-start;
  }
  /* ② flex 链每一层都要能收缩，否则正反馈顶开 */
  .amount{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    display:flex;flex-wrap:wrap;
  }
  .amount > *{min-width:0!important;max-width:100%!important}
  .amt-box{
    flex:1 1 100%!important;
    width:100%!important;min-width:0!important;
    box-sizing:border-box!important;
  }
  .amt-box input{min-width:0!important;width:100%!important;max-width:100%}
  .presets{
    flex:1 1 100%!important;
    min-width:0!important;max-width:100%!important;
    display:flex;flex-wrap:wrap;gap:6px;
  }
  /* 预设按钮按内容排布，允许换行 */
  .presets button{flex:0 0 auto!important;white-space:nowrap}
  /* 支付方式下拉与 step 一并收窄 */
  .pickrow,.dd,.dd-btn{min-width:0!important;max-width:100%!important;width:100%!important}
  .dd-btn{gap:8px!important}
  .dd-sub{font-size:10px!important;letter-spacing:.06em}
}

/* ============================================================
   360px · 系统性收窄（一次处理全部同类问题）
   ------------------------------------------------------------
   前面几次是逐个修（how-btn → amt-box → cost/fee），
   每修一个冒出下一个，效率太低。改成**列出所有超宽元素**后
   归纳出规律：几乎全是「一行的多个按钮/输入框 + 不换行文本」。

   三条通用规则覆盖全部情况：
   ① 铸造台内所有 flex/grid 容器必须 min-width:0（允许收缩）
   ② 按钮组窄屏一律换行（flex-wrap）
   ③ 长文本一律允许折行（overflow-wrap）

   ⚠️ 还有一条更根本的：**把 min-width:0 兜底加到容器级别**。
   `minmax(0,1fr)` 只解决 grid 列，flex 子项和 grid 子项默认都是
   `min-width:auto`（按内容最小宽度）—— 这是 CSS 里最常见的
   "明明设了 1fr 为什么还溢出"的原因。
   ---------------------------------------------------------- */
@media(max-width:520px){
  /* ① 兜底：铸造台内所有直接与间接子项都允许收缩 */
  #mint-card *,
  #mint-card{
    min-width:0;
  }
  /* 但输入框要能填满 */
  #mint-card input[type=text],
  #mint-card input:not([type]){
    max-width:100%!important;
  }

  /* ② 按钮组换行：矿工费档位、预设档、日期切换、计价切换 */
  .fee-seg{
    display:flex!important;flex-wrap:wrap!important;
    gap:6px!important;min-width:0!important;max-width:100%!important;
  }
  .fee-seg > *{
    flex:0 0 auto!important;
    min-width:0!important;
    white-space:nowrap;
  }
  /* 自定义费率那一项内部有 input，给它整行 */
  .fee-seg > label.fee-cust{
    flex:1 1 100%!important;
    display:flex!important;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .fee-seg > label.fee-cust input{
    flex:0 0 62px!important;min-width:0!important;
  }
  .px-seg{display:flex!important;flex-wrap:wrap!important;gap:6px!important;max-width:100%!important}
  .px-seg > *{flex:0 0 auto!important}
  /* 日期输入独占一行 */
  #mint-card input[type=date]{
    flex:1 1 100%!important;width:100%!important;max-width:100%!important;
  }

  /* ③ 结果区数值可能很长，允许折行而不是撑开 */
  .cost-get,.cost-usd,.cost-btc,.orb-read b,.read-a b,.read-b b{
    overflow-wrap:anywhere!important;word-break:break-word!important;
    min-width:0!important;
  }
  .cost-b,.cost-a{min-width:0!important;max-width:100%!important}

  /* 铸造按钮组（act）换行排布 */
  .act{display:flex!important;flex-wrap:wrap!important;gap:12px;min-width:0}
  .act .btn{flex:1 1 100%!important}
  .act-own{flex:1 1 100%!important;min-width:0!important}

  /* 自检行（三个小标签）换行 */
  .selftest{display:flex;flex-wrap:wrap!important;gap:8px 16px;min-width:0!important}
  .selftest span{white-space:normal!important}

  /* 收据行 */
  .rc-head{display:flex;flex-wrap:wrap!important;gap:10px;min-width:0}
  .slips{display:flex;flex-wrap:wrap!important;gap:6px;min-width:0}
}

/* ============================================================
   360px · 修 min-width:0 兜底的副作用
   ------------------------------------------------------------
   上一条"#mint-card *{min-width:0}"是为了解决"设了 1fr 还溢出"，
   但它把**输入框本身**也压成了 0 宽 —— min-width:0 允许元素
   收缩到内容宽度以下，而 input 的默认 `size` 宽度是 20 字符，
   被压到比 1px 还小就成0。
   实测：360px 下 #amount 宽 0（display 却是 block），
   断言"关键控件未隐藏"抓到的 —— 这条断言救了一个真 bug。

   修法：给真正需要可见的控件单独把 min-width 提回来，
   让它至少填满父容器（width:100%），而不是按内容收缩。
   ---------------------------------------------------------- */
@media(max-width:520px){
  /* 输入框与可交互控件：填满父容器，不按内容收缩 */
  #amount,
  #mint-card .amt-box input,
  #mint-card input#fee-in,
  #mint-card input[type=date],
  #mint-card .lang-sel,
  .dd-btn{
    min-width:100%!important;
    width:100%!important;
    flex:1 1 100%!important;
  }
  /* 按钮同理：按钮文字不能被压没 */
  #mint-card .btn,
  .fee-seg > button,
  .px-seg > button,
  .presets button{
    min-width:auto!important;
    width:auto!important;
    flex:0 0 auto!important;
  }
  /* 但容器仍然允许收缩（这才是我们要修的） */
  #mint-card .amt-box,
  #mint-card .fee-seg,
  #mint-card .cost-b{
    min-width:0!important;
    max-width:100%!important;
  }
  /* 自定义费率那个 label 内部也有 input，别把它也撑成 100% 宽 */
  .fee-seg > label.fee-cust input#fee-in{
    min-width:0!important;width:62px!important;flex:0 0 62px!important;
  }
}

/* ============================================================
   360px · 根因修正：amt-box 只剩 38px
   ------------------------------------------------------------
   量出来的：#amount 的 min-width 是 100%（我的规则生效了），
   但 width 算出 0px，父 .amt-box 只有 38px 宽。
   为什么 38？.amt-box 的 flex 是 `1 1 220px`：
   flex-basis 220px 在 131px 的列里被压缩，但列本身又被
   `#mint-card *{min-width:0}` 压到最小 —— 三层收缩叠加，
   最后剩 38px（大概是预设按钮的宽度）。

   结论：**在一串收缩的 flex 里再叠 min-width:0 只会更糟**。
   正确做法是窄屏下**换布局模型**：把 .amount 从 flex 改成 grid
   单列，行宽由grid 的1fr 决定，不再受 basis 影响。

   同样的问题 .pickrow / .step 也适用，一起换成 grid。
   ---------------------------------------------------------- */
@media(max-width:520px){
  /* 输入区全部改成 grid 单列：行宽由容器决定，不受 flex-basis 影响 */
  #mint-card .amount{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;max-width:100%!important;
  }
  #mint-card .amt-box{
    grid-column:1/-1!important;
    display:flex!important;
    width:100%!important;max-width:100%!important;
    min-width:0!important;
    flex:none!important;      /* 脱离 flex 流，grid 自己控宽 */
  }
  #mint-card .presets{
    grid-column:1/-1!important;
    display:flex!important;flex-wrap:wrap!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
  }
  #mint-card .amt-box input{
    flex:1 1 auto!important;
    width:auto!important;min-width:0!important;
  }

  /* 支付方式那一栏同样处理 */
  #mint-card .pickrow{
    display:block!important;width:100%!important;max-width:100%!important;
  }
  #mint-card .dd{display:block!important;width:100%!important;max-width:100%!important}
  #mint-card .dd-btn{
    display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;
  }

  /* 步骤条：grid 而非 flex，避免"标签 + 按钮"互相挤 */
  #mint-card .step{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:4px 10px!important;
    width:100%!important;min-width:0!important;
  }
  #mint-card .step .how-btn{
    grid-column:2!important;
    justify-self:start!important;
    white-space:normal!important;
  }

  /* 计价区：日期输入与切换按钮分行 */
  #mint-card .pxd{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;width:100%!important;max-width:100%!important;
  }
  #mint-card .pxd > *{grid-column:1/-1!important;min-width:0!important;max-width:100%!important}
  #mint-card .px-seg{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
}

/* ============================================================
   360px · 真正的根因：#mint-card 自己的列定义
   ------------------------------------------------------------
   量出来：#mint-card 324px 正常，但 .fld-row 只有 49px。
   原因在**铸造台自身**的两列定义：
       grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr)
   `minmax(320px, ...)` 的第二参数是**最小 320px** ——
   360px 视口下容器只有 324px，第二列要 320px，
   第一列就被挤到剩 4px（加上 padding 剩 49px 布局宽）。

   我之前只在 max-width:900px 塌成单列，而 900px 那条规则里
   **没有覆盖 minmax(320px,...)** —— 于是 520px~900px 之间一直错，
   360px 下因为还有 max-width:900px 那条才勉强单列，
   但那条被后写的规则部分覆盖了。

   修法：把"单列"这件事在**最后一条规则**里重新声明一次，
   且不带 minmax 下限（用 minmax(0,1fr)）。
   ---------------------------------------------------------- */
@media(max-width:900px){
  /* 铸造台单列：显式覆盖列下限，这是之前漏掉的那条 */
  #mint-card{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  /* 单列时不需要横向分隔线 */
  #mint-card > .fld-row{border-right:0!important}
  #mint-card > .cost,
  #mint-card > .msg,
  #mint-card > .prog{
    grid-column:1!important;
    grid-row:auto!important;
    position:static!important;
    border-left:0!important;
    border-top:1px solid var(--line-soft);
    align-self:auto!important;
  }
  #mint-card > .selftest{grid-column:1!important;border-right:0!important}
  /* 子元素一律 100% 宽 */
  #mint-card > *{width:100%!important;max-width:100%!important}
}

/* ============================================================
   移动端页头（360px 实测）
   ------------------------------------------------------------
   实测两处：
   ① 「CRC-30」折成两行 —— .brand b 有 letter-spacing:.22em，
      英文比中文宽得多，15px × .22em 的字距让 6 个字符撑破品牌区。
   ② 「CONNECT WALLET」贴到屏幕右缘 —— 页头是 flex，
      nav 在 360px 下仍占 5 项，挤掉了右侧按钮的余量。

   修法：
   - 品牌名不换行，字距在窄屏收窄
   - 导航在窄屏**横向滚动**（保留全部入口，不藏功能），
     这是移动端处理多导航项的标准做法：藏功能不如让它能滑。
   - 连接按钮改为紧凑文案（i18n 提供短标签）
   ---------------------------------------------------------- */
@media(max-width:640px){
  .brand{flex:0 0 auto!important;white-space:nowrap}
  .brand b{font-size:14px!important;letter-spacing:.1em!important;white-space:nowrap!important}

  /* 导航可横向滚动：不隐藏任何入口 */
  .nav{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:16px!important;
    /* 让滚动条消失但仍可滑动 */
    -ms-overflow-style:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:0 0 auto;font-size:13px}

  /* 语言下拉与连接按钮压缩 */
  .lang-sel{max-width:96px!important;padding-left:8px!important;padding-right:24px!important;
    font-size:12px!important;flex:0 0 auto!important}
  #connect,.btn-solid{padding-left:16px!important;padding-right:14px!important;font-size:13px!important}
  #connect{flex:0 0 auto!important;white-space:nowrap}
  /* 页头整体不再强制单行，允许换行到两行 */
  .bar{flex-wrap:wrap!important;row-gap:10px}
  .brand{order:1}
  #connect{order:2;margin-left:auto!important}
  .lang-sel{order:3}
  /* 导航独占第二行 */
  .nav{
    order:4;flex:1 0 100%!important;
    margin-left:0!important;margin-right:0!important;
    padding-bottom:2px;
    border-top:1px solid var(--line-soft);
    padding-top:8px;
  }
}

/* 语言下拉：窄屏压缩宽度时把 padding 也压小了，高度掉到 30px
   —— 低于 32px 的触控下限。宽度可以压，高度必须守住。 */
@media(max-width:640px){
  .lang-sel{
    min-height:34px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
}

/* ============================================================
   移动端页头 · 第二版修正
   ------------------------------------------------------------
   实测问题：
   ① 导航整行消失 —— `.bar` 有 `height:72px`（固定高），
      我给它加了 flex-wrap 让内容换行，但**高度没跟着放开**，
      第二行的导航被固定高度裁掉了。
      改法：`height:auto` + `min-height:72px`（保留最小高度，
      内容多时自然增长）。
   ② 「Connect」被显示成「CONNECT WALLET」——
      `.btn` 有 `text-transform:uppercase`，短文案也逃不掉。
      改法：窄屏下 `text-transform:none`（按钮上的短文案
      本来就不该全大写，那是给长标签的排版效果）。
   ---------------------------------------------------------- */
@media(max-width:640px){
  .bar{
    height:auto!important;
    min-height:72px;
    flex-wrap:wrap!important;
    row-gap:10px;
    padding-top:10px!important;
    padding-bottom:10px!important;
    align-items:center;
  }
  /* 按钮短文案不做全大写 */
  #connect{text-transform:none!important;letter-spacing:.02em!important}
  .brand,.lang-sel,#connect{align-self:center}
  /* 导航：整行 + 可横向滚动 */
  .nav{
    order:9;
    flex:1 0 100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0!important;
    padding:8px 0 2px!important;
    border-top:1px solid var(--line-soft);
    gap:18px!important;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:0 0 auto;font-size:13px;padding:4px 0}
}

/* ============================================================
   移动端页头 · 第三版（实测 barH 仍=72、navH=0）
   ------------------------------------------------------------
   现象：CSS 规则确实加载了（curl 能看到），但
     .bar 实际高 72px、.nav 实际高 0px。

   两个真因：
   ① `.nav` 高度为 0 —— `flex:1 0 100%` 的 flex-basis 是**宽度**，
      交叉轴（高度）上它没有尺寸；而 `overflow-x:auto` 让它成了
      滚动容器，交叉轴尺寸由内容决定 —— 但内容是 `a`（inline），
      flex 容器的 line box 高度在部分引擎下算成 0。
      修法：给 .nav 显式高度 + `align-items:center`。
   ② `.bar` 高度 72px —— `height:auto!important` 应该生效，
      但 style.css 的 `@media(max-width:520px)` 里那条
      `height:62px` 在同一媒体查询内、且**同样重要**时，
      后加载的 style.css 胜出（crc30.css/v2.css 在 style.css 之后加载，
      但这条在 style.css 内部更靠后 —— 同特异性同重要时看**声明顺序**，
      而整个文件块的顺序由 <link> 决定，不是文件内行号）。
      所以我改用**更高的特异性**而不是 !important。
   ---------------------------------------------------------- */
@media(max-width:640px){
  header .wrap.bar{
    height:auto!important;
    min-height:66px;
    flex-wrap:wrap!important;
    row-gap:10px;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  /* .nav：显式高度 + 居中 —— 修 flex-basis 只管宽度不管高度的坑 */
  header .bar > .nav{
    flex:1 0 100%!important;
    width:100%!important;
    min-height:40px!important;      /* 明确高度，line box 塌陷不再发生 */
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0!important;
    padding:6px 0!important;
    border-top:1px solid var(--line-soft);
    gap:18px!important;
  }
  header .bar > .nav::-webkit-scrollbar{display:none}
  header .bar > .nav > a{
    white-space:nowrap;flex:0 0 auto;
    font-size:13px;line-height:28px;   /* 明确 line-height → 行盒有高度 */
    padding:0;
  }
  /* 按钮短文案不要全大写 */
  header .bar > #connect{
    text-transform:none!important;
    letter-spacing:.02em!important;
    align-self:center!important;
  }
  header .bar > .lang-sel{align-self:center!important}
  header .bar > .brand{align-self:center!important}
}

/* ============================================================
   移动端页头 · 第四版（修 768px 导航被压成 0 宽）
   ------------------------------------------------------------
   实测 768px 时 navClientW=0、navScrollW=0 —— 导航整行消失。
   原因：`.nav` 在 768px 下仍与品牌/按钮同处一个 nowrap 的 flex 行，
   而 `.nav` 没有 `flex-shrink:0`，被前面元素挤成 0 宽。
   这是**原有缺陷**（style.css 里 .nav 只有 margin-right:auto），
   我加粗按钮、logo 后把它放大了。

   修法两处：
   ① 给 .nav 加 flex-shrink:0 —— 内容多时挤别人，而不是自己消失
   ② 把"导航独占一行"的断点从 640px 提到 900px ——
      中等宽度同样放不下 5 项导航 + 品牌 + 2 个按钮
   ---------------------------------------------------------- */
.nav{flex-shrink:0}
@media(max-width:900px){
  header .wrap.bar{
    height:auto!important;min-height:66px;
    flex-wrap:wrap!important;row-gap:10px;
    padding-top:10px!important;padding-bottom:10px!important;
  }
  header .bar > .nav{
    flex:1 0 100%!important;width:100%!important;
    min-height:38px!important;height:auto!important;
    display:flex!important;align-items:center!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0!important;padding:6px 0!important;
    border-top:1px solid var(--line-soft);gap:20px!important;
    flex-shrink:1!important;
  }
  header .bar > .nav::-webkit-scrollbar{display:none}
  header .bar > .nav > a{
    white-space:nowrap;flex:0 0 auto;
    font-size:13px;line-height:26px;padding:0;
  }
  header .bar > .brand,
  header .bar > .lang-sel,
  header .bar > #connect{align-self:center!important}
  header .bar > #connect{text-transform:none!important;letter-spacing:.02em!important}
}