/* ============================================================================
   app.css — v0.2 新增组件（按用户架构图重构）
   只新增「功能入口 / 全屏进入动画 / 登录注册 / 订单 / 留言线程 / 工作室后台」
   相关样式。tokens/base/pages 三个文件保持不动。
   约束：不写死颜色（只用 tokens.css 的变量），不用外链字体与图片。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. 通用：待接后端标注 + 骨架说明
   --------------------------------------------------------------------------- */
.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-2);
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-1);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pending-note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-1);
  background: var(--bg-1);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.pending-note__body {
  display: grid;
  gap: var(--sp-2);
}

.pending-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* 模拟数据提示条：明确告诉用户这是前端骨架 */
.demo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.demo-strip > span:first-child {
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   1. 全屏进入动画（首页开屏 · HUD 线框 · 无限循环）
   ---------------------------------------------------------------------------
   行为：默认 display:none，site.js 加 .is-visible 后才播放。**无限循环**，只有用户
   主动点击「进入网站」按钮或按 Esc 才退场 —— 没有自动关闭计时器（旧版的 2.2s 自动
   消失与 sessionStorage 一次性标记均已移除）。

   无缝循环的实现纪律（用户明确要求「循环流畅度要求高」），三条同时成立：
   ① 所有循环动画共用主周期 --intro-loop: 12s，每个 duration 都是它的整除值
      （12s / 6s / 4s / 3s），因此各元素的周期边界彼此重合；
   ② 每条关键帧的 0% 与 100% 视觉状态完全一致 —— 位移正好一个周期、旋转正好
      360°、或在两端不透明度为 0（扫线在画面外折返，接缝看不见）；
   ③ 需要错开相位的地方一律用**负** animation-delay。负延迟不改变公共周期：
      t=0 与 t=T 的相位相同，因此整幅画面每 12s 精确回到初始状态。
   结果：循环点不存在任何跳变，且不依赖 JS 逐帧驱动（纯合成器动画，不掉帧）。 */
.intro {
  --intro-loop: 12s;
  /* 标注框引线长度：个别标签可局部覆盖（verify.py 要求 var() 引用的变量必须有定义） */
  --tag-line: 58px;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  overflow: hidden;
  align-content: center;
  place-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  /* 不是纯色：中央略亮的径向渐变 + 底色兜底。真正的纹理在 .intro__bg 里。 */
  background:
    radial-gradient(120% 88% at 50% 46%, var(--bg-1), var(--bg) 62%),
    var(--bg);
  color: var(--ink);
}

.intro.is-visible {
  display: grid;
  /* 一次性入场淡入：不加 fill-mode，退场时 .is-leaving 的 opacity 过渡才不被覆盖 */
  animation: intro-in 420ms var(--ease-out);
}

.intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}

/* --- 中央线框舞台 --------------------------------------------------------- */
.intro__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(60vh, 82vw);
  /* 舞台宽度用 vw 表达，而 .intro 两侧各有 --sp-6 内边距：窄屏的 min(54vh, 88vw)
     会算出 343px，但 390px 视口里内容盒只剩 326px，整组内容因此右偏 17px。
     注意不能用 max-width:100% —— 网格项的百分比是相对已被内容撑大的网格区域
     （343px）解析的，等于没约束；必须用 vw 直接减去内边距。 */
  max-width: calc(100vw - 2 * var(--sp-6));
  aspect-ratio: 1;
}

/* 中心橙光晕：让线框像浮在虚空里。
   注意 inset 必须留在 0：早先用 inset: -18% 把光晕盒子撑出舞台，舞台因此多出
   88px 的内部溢出（.intro 是 overflow:hidden，所以用户看不见横向滚动条，但
   scrollWidth 会一直报 537 > client 492 —— 一旦有人改动 overflow，这条阴影
   立刻变成真的横向滚动）。改用「盒子不长大、把渐变的实心区缩小」的办法拿到
   同样的光晕范围，溢出归零。 */
.intro__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    var(--accent-soft) 0%,
    color-mix(in srgb, var(--accent-soft) 45%, transparent) 26%,
    transparent 46%
  );
  animation: intro-breathe var(--intro-loop) var(--ease) infinite;
  animation-delay: calc(var(--intro-loop) * -0.25);
}

/* 旋转的虚线环 / 实线环 / 方位刻度 */
.intro__rings {
  position: absolute;
  inset: 0;
  animation: intro-spin var(--intro-loop) linear infinite;
}

.intro__ring {
  position: absolute;
  inset: 4%;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}

/* 环上的一个实心刻度点，让自转可见 */
.intro__ring::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -3px;
  background: var(--accent);
}

.intro__ring--dash {
  inset: 13%;
  border-style: dashed;
  border-color: var(--line-strong);
}

.intro__ring--inner {
  inset: 23%;
  border-color: var(--line);
}

/* 逆时针慢转的内环：与 .intro__rings 反向，形成交叉咬合感 */
.intro__ring--dash {
  animation: intro-spin-rev var(--intro-loop) linear infinite;
}

.intro__ring--inner {
  animation: intro-spin var(--intro-loop) linear infinite;
}

/* 雷达扫描扇形（conic 渐变旋转）。
   v0.4 修正：原写法 `conic-gradient(from 0deg, var(--accent-soft), transparent 30%)`
   在 30% 处是一条**硬边** —— 硬边从圆心笔直射出，旋转时正是一条穿过中心的斜线，
   用户看到的「中间这根扫描线是歪的」就是它（它不属于任何水平/垂直轴，所以读起来
   像画面歪了）。改为多段渐隐 + 收窄到 22%，硬边消失，只剩柔和的扇形余晖。 */
.intro__radar {
  position: absolute;
  inset: 23%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--accent-soft) 0deg,
    color-mix(in srgb, var(--accent-soft) 40%, transparent) 12deg,
    transparent 22deg,
    transparent 360deg
  );
  animation: intro-spin calc(var(--intro-loop) / 2) linear infinite;
}

/* 横向扫线：自上而下穿过画面，两端不透明度为 0，折返发生在看不见处。
   v0.4 修正用户反馈的「中间这根扫描线是歪的」：原写法 `left:-12%; right:-12%`
   是相对 .intro__stage（aspect-ratio:1、宽 min(60vh,82vw) 的网格项）解析的，
   扫线只有约 670px 宽，而画面上其它水平参考线（.intro__rule 240px、标签引线）
   各是另一个宽度 —— 同一屏三种水平长度并存、端点又落在等高线上，读起来就像
   「歪」。现在 HTML 里已把它从 .intro__stage 搬到 .intro 下（见 index.html），
   定位祖先变成全屏容器，left:0/right:0 即视口左右边缘，与任何水平线严格平行。

   第二轮修正：原来是一整条 `linear-gradient(90deg, transparent, accent, transparent)`
   铺满全宽、中心 100% 纯 accent，在锁标那一段形成一条贯穿的硬色带，看起来像
   渲染接缝而不是扫描线。现在把亮芯压到 0.42 的 --accent-line 并保持两端渐隐，
   仍然横贯全宽（与其它水平参考线严格同宽 —— 这是「不歪」的前提），但不再是
   一条实心橙线。 */
.intro__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--accent-line),
    transparent
  );
  animation: intro-scan calc(var(--intro-loop) / 2) linear infinite;
  animation-delay: calc(var(--intro-loop) / -4);
}

/* --- 背景层 1：铺满整屏的地形等高线（v0.4 NASA-punk） ---------------------
   用户 v0.4 要求（逐字）：「首页这个开屏这个等高线也是不对的，应该取消方格，
   让等高线铺满整个屏幕，等高线应该也有动效」。

   与 v0.3 的三处根本差别：
   ① **取消方格** —— 原来的 `.intro__bg::before` 64px 网格已删除（见下）。
   ② **铺满整屏** —— 容器 inset 从 -12% 改为 -4%（略大于视口以防裁切露边），
      径向遮罩从「只留中央 22%」放宽到「几乎整片可见」，只压住最外圈。
   ③ **几何换成真地形** —— v0.3 是 23 条同心闭合环自转，看起来像雷达靶心；
      现在由 tools/_make_topo.py 从 fBm 高度场切出等值线（计/首/间三级线型 +
      沿线高程数字 + 十字测标），线距由坡度决定，所以有真实的疏密节奏。

   动效只剩三样（用户点名的颜色/明暗/透明度），**没有任何 transform/rotate**：
   三级线型各自做不透明度呼吸 + 描边色偏移，周期都是 --intro-loop 的整除值
   （12s / 6s / 4s），且每条关键帧 0% 与 100% 同值 → 循环点无跳变。 */
.intro__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 暗角：压在等高线之上，避免边缘纹理抢戏。
   注意 v0.4 已删掉原来的 64px 细网格（用户要求「取消方格」），现在这一层
   是 .intro__bg 的第一个伪元素。 */
.intro__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(84% 68% at 50% 47%, transparent 42%, var(--bg) 100%);
}

/* 地形画布：铺满整屏。inset 取负值是为了让 1600×1000 的 viewBox 在超宽/超窄
   视口下仍能 slice 铺满而不露边（preserveAspectRatio="xMidYMid slice" 负责裁切）。 */
.intro__topo {
  position: absolute;
  /* inset 必须留在 0。原来写 inset:-4% / 108% 是想「多铺一圈避免露边」，但 SVG 的
     preserveAspectRatio 是 slice（等比填满 + 裁切），本来就不会露边；多出来的这
     4% 反而把**遮罩的衰减区推进了可见范围**，与 mask 相乘后在最右 3% 处把等高线
     整个抹平 —— 实测列密度 97%/98%/99%/100% = 2/0/0/0。归零后同位置恢复到
     18/16/13/10。用户看到的「右边没铺满」就是这一条。 */
  inset: 0;
  width: 100%;
  height: 100%;
  /* 不再用整层 opacity 压暗：那会把三级线型一起拉平，正是「看上去一片灰」的原因。
     明暗层次改由每一级自己的 opacity 承担（见下），这里保持 1。 */
  opacity: 1;
  /* 遮罩只做最外圈的收边，且必须完全落在画面之外。原来 68% → 104% 的衰减在宽屏
     （宽高比 > 1.6:1）上会把椭圆远角压进可视区 —— 而远角恰好是地势平缓、线本来
     就稀的地方，「稀 + 淡」叠加就是一片空白。改成 86% → 112%。 */
  -webkit-mask-image: radial-gradient(150% 132% at 50% 50%, var(--ink) 86%, transparent 112%);
  mask-image: radial-gradient(150% 132% at 50% 50%, var(--ink) 86%, transparent 112%);
}

.intro__topo-group {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  will-change: opacity;
}

/* 三级线型：亮/中/暗 × 实/虚 × 粗/细 —— 「明暗层次」由线型承担，
   而不是整片统一做不透明度呼吸（用户点名要明暗、颜色、透明度三样都有）。

   线宽与不透明度按「1600 viewBox → 视口」的实际缩放定：视口 1440px 时缩放
   约 0.9，0.85 的描边落到屏幕上不足一个设备像素，抗锯齿直接把线抹成灰雾。
   所以计曲线抬到 1.15 并保持高对比，首曲线 0.7，间曲线 0.5 —— 三级之间
   拉开约 2.3 倍，近看才能分清「哪根是主脊」。 */
.intro__topo-group--major {
  stroke: var(--topo-major);
  stroke-width: 1.15;
  opacity: 0.72;
  animation: intro-topo-major var(--intro-loop) var(--ease) infinite;
}

.intro__topo-group--minor {
  stroke: var(--topo-minor);
  stroke-width: 0.7;
  opacity: 0.46;
  animation: intro-topo-minor calc(var(--intro-loop) / 2) var(--ease) infinite;
  animation-delay: calc(var(--intro-loop) / -3);
}

.intro__topo-group--faint {
  stroke: var(--topo-faint);
  stroke-width: 0.5;
  stroke-dasharray: 4 9;
  opacity: 0.34;
  animation: intro-topo-faint calc(var(--intro-loop) / 3) var(--ease) infinite;
  animation-delay: calc(var(--intro-loop) / -6);
}

/* 高程数字与十字测标：橙色信号层，是画面上唯一会变色的部分 */
.intro__topo-marks {
  stroke: var(--topo-accent);
  stroke-width: 0.9;
  opacity: 0.72;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  animation: intro-topo-marks calc(var(--intro-loop) / 4) var(--ease) infinite;
  animation-delay: calc(var(--intro-loop) / -8);
}

.intro__topo-mark {
  fill: none;
}

/* SVG 根是 fill="none"，高程数字要显式给 fill */
.intro__topo-marks text {
  fill: var(--topo-accent);
  stroke: none;
}

/* 关键帧：0% 与 100% 必须同值（循环无缝的前提，由 _loopcheck.py 静态门禁把关）。
   谷值不能压得太低：原来计曲线最低 0.32、首曲线 0.24，呼吸到谷底时整片地形
   会「消失」一瞬，屏幕看起来是空的。现在三级的谷值都留在地平线上。 */
@keyframes intro-topo-major {
  0%,
  100% {
    opacity: 0.52;
    stroke: var(--topo-major);
  }
  50% {
    opacity: 0.86;
    stroke: var(--topo-major);
  }
}

@keyframes intro-topo-minor {
  0%,
  100% {
    opacity: 0.32;
  }
  50% {
    opacity: 0.62;
  }
}

@keyframes intro-topo-faint {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes intro-topo-marks {
  0%,
  100% {
    opacity: 0.42;
    stroke: var(--accent);
  }
  50% {
    opacity: 0.9;
    stroke: var(--topo-major);
  }
}

/* --- 背景层 2：点状标记 + 文字的数据读数 ----------------------------------
   对应参考画面里的 telemetry 标注：一个小点标记 + 名称 + 一个**一直在变**的
   数值。数值不靠 JS 改文本（那会破坏「纯合成器动画、绝不掉帧」的前提），而是
   把若干个值竖排成一列，用 steps() 逐格滚动：轨道首尾放同一个值，位移 -80%
   正好落在与 0% 视觉相同的那一格，因此滚动是连续均匀的，没有硬跳。 */
.intro__data {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.intro__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  /* --ink-4 是全站最暗的文字色，直接压在等高线上基本读不出来。抬到 --ink-3，
     再用一层极淡的散射底把背后的线压一档 —— 不做成实心色块，否则会像贴在
     地图上的便利贴，反而破坏「数据浮在地形之上」的关系。 */
  color: var(--ink-3);
  white-space: nowrap;
  padding: 2px 6px;
  margin: -2px -6px;
  background: radial-gradient(
    120% 180% at 50% 50%,
    var(--tech-scrim),
    transparent 78%
  );
}

/* 右侧站位的节点整体镜像，让点标记始终朝外（迎向画面边缘） */
.intro__node--b,
.intro__node--d,
.intro__node--f {
  flex-direction: row-reverse;
  text-align: right;
}

.intro__node--a {
  top: 15%;
  left: 7%;
}

.intro__node--b {
  top: 26%;
  right: 8%;
}

.intro__node--c {
  bottom: 27%;
  left: 10%;
}

.intro__node--d {
  bottom: 15%;
  right: 11%;
}

.intro__node--e {
  top: 51%;
  left: 4%;
}

.intro__node--f {
  top: 10%;
  right: 27%;
}

/* 点标记升级为**测绘标**：外环 + 中心实点 + 四向十字刻度 + 一条引线和端点刻度，
   与等高线上的十字测标（.intro__topo-mark）共用同一套语言。用户要求把四周的
   数据点「融进等高线」—— 关键就是让它读起来是「地形图上的一个观测点」：
   十字刻度把它钉在图上，引线把它接到画面边缘，而不是一枚悬空的指示灯。 */
.intro__node-dot {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  background: transparent;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  animation: intro-node-ping calc(var(--intro-loop) / 4) var(--ease-out) infinite;
}

/* 中心十字准星：与等高线上的十字测标（.intro__topo-mark）同形，是「这是一个
   地图上的观测点」最直接的视觉凭据。用两道渐变画十字，不需要额外元素；
   inset 给负值让十字四臂穿出圆环，正好是参考图里 `+` 配准标记的样子。 */
.intro__node-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat;
}

/* 引线（向左）+ 端点刻度：默认给左侧站位的 a/c/e 用，b/d/f 在下面镜像 */
.intro__node-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  width: 38px;
  height: 7px;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--accent-line), var(--accent-line)) left center / 1px 7px
      no-repeat,
    linear-gradient(90deg, transparent, var(--accent-line)) center / 100% 1px
      no-repeat;
}

/* 右侧站位的节点：点标记在右端，引线随之向右伸出 */
.intro__node--b .intro__node-dot::after,
.intro__node--d .intro__node-dot::after,
.intro__node--f .intro__node-dot::after {
  right: auto;
  left: calc(100% + 4px);
  background:
    linear-gradient(var(--accent-line), var(--accent-line)) right center / 1px 7px
      no-repeat,
    linear-gradient(270deg, transparent, var(--accent-line)) center / 100% 1px
      no-repeat;
}

.intro__node--b .intro__node-dot {
  animation-delay: calc(var(--intro-loop) / -8);
}

.intro__node--c .intro__node-dot {
  animation-delay: calc(var(--intro-loop) / -16);
}

.intro__node--d .intro__node-dot {
  animation-delay: calc(var(--intro-loop) * -0.1875);
}

.intro__node--e .intro__node-dot {
  animation-delay: calc(var(--intro-loop) / -6);
}

.intro__node--f .intro__node-dot {
  animation-delay: calc(var(--intro-loop) * -0.229);
}

.intro__node-meta {
  display: grid;
  gap: 2px;
  justify-items: start;
}

.intro__node--b .intro__node-meta,
.intro__node--d .intro__node-meta,
.intro__node--f .intro__node-meta {
  justify-items: end;
}

.intro__node-name {
  color: var(--ink-4);
  letter-spacing: 0.2em;
}

/* 数值窗口：高度固定为一行的 1.4 倍，多出来的行被裁掉，于是只看到一格 */
.intro__node-value {
  display: block;
  height: 1.4em;
  min-width: 7ch;
  overflow: hidden;
  color: var(--accent);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.intro__node-track {
  display: grid;
  animation: intro-node-roll calc(var(--intro-loop) / 4) steps(4, end) infinite;
}

.intro__node--b .intro__node-track {
  animation-delay: calc(var(--intro-loop) / -6);
}

.intro__node--c .intro__node-track {
  animation-delay: calc(var(--intro-loop) / -12);
}

.intro__node--d .intro__node-track {
  animation-delay: calc(var(--intro-loop) * -0.146);
}

.intro__node--e .intro__node-track {
  animation-delay: calc(var(--intro-loop) * -0.208);
}

.intro__node--f .intro__node-track {
  animation-delay: calc(var(--intro-loop) * -0.271);
}

.intro__node-track i {
  font-style: normal;
  line-height: 1.4;
}

/* --- 品牌锁定组合：把工作室 LOGO 本身搬进开屏 ------------------------------
   不再用旧的抽象六边形，而是直接重建 LOGO 的构图：键帽徽标在上、字标居中、
   细分隔线、标语在下 —— 也就是「让 LOGO 自己动起来」，这就是用户要求的
   「把工作室 LOGO 融合进去」。四段路径的先后描绘顺序 = 外框 → 键面 → F → 1。
   每条 path 都写了 pathLength="100"，所以 stroke-dasharray 用 100 即整圈长度，
   描边动画与真实路径长度无关 —— 这是让「画出」效果精确闭合的关键。 */
.intro__lockup {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  width: min(100%, 560px);
  max-width: 100%;
}

/* 锁标背后的散射底：地形线画到全屏之后，会直接穿过标语和字幕（「HIDDEN IN
   DETAIL」中段被一根计曲线横切，读不出来）。这里用一个没有任何硬边的椭圆径向
   渐变把锁标区域的地形压暗一档 —— 不做成矩形面板，否则会在满是等高线的画面
   上贴出一块明显的色块，把「地形图」的连续感打断。 */
.intro__lockup::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 盒子留在锁标之内（inset: 0），向外扩的那一圈改用渐变的「透明终点」来做：
     早先写 inset: -22% -18% 会把盒子撑大，锁标于是多出 73px 内部溢出。用户看不到
     （.intro 是 overflow:hidden），但 scrollWidth 会一直虚高。 */
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    58% 52% at 50% 50%,
    var(--tech-scrim) 0%,
    color-mix(in srgb, var(--tech-scrim) 45%, transparent) 46%,
    transparent 78%
  );
}

/* 键帽徽标：SVG 原始 viewBox 104.16×100（与 assets/img/mark.svg 同源几何） */
.intro__logo {
  position: relative;
  width: clamp(92px, 16vh, 156px);
  color: var(--ink);
  transform-style: preserve-3d;
  animation: intro-tilt var(--intro-loop) var(--ease) infinite;
}

.intro__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 线框层：四段依次自绘 */
.intro__logo-mark {
  position: relative;
  z-index: 2;
  animation: intro-logo-glow var(--intro-loop) var(--ease) infinite;
}

.intro__logo-mark path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: intro-draw var(--intro-loop) var(--ease) infinite;
}

/* 分层上色：外框键帽 + 键面用品牌橙（这是 LOGO 里最外层的轮廓，橙色让它从
   深底上立起来），F 与 1 保持近白（LOGO 里键面是反白字）。同色会让整个徽标
   糊成一片白线，分色之后键帽的「上窄下宽梯形」才读得出来。 */
.intro__logo-mark path:nth-child(1),
.intro__logo-mark path:nth-child(2) {
  stroke: var(--accent);
}

.intro__logo-mark path:nth-child(3),
.intro__logo-mark path:nth-child(4) {
  stroke: var(--ink);
}

.intro__logo-mark path:nth-child(2) {
  animation-delay: calc(var(--intro-loop) * -0.04);
}

.intro__logo-mark path:nth-child(3) {
  animation-delay: calc(var(--intro-loop) * -0.08);
}

.intro__logo-mark path:nth-child(4) {
  animation-delay: calc(var(--intro-loop) * -0.12);
}

/* 填充层：与线框同位叠放，只做不透明度呼吸 —— 像 HUD 里物体「充能」那样，
   让实心徽标在某个窗口里淡淡透出来，与线框共存。 */
.intro__logo-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--accent);
  opacity: 0;
  animation: intro-logo-fill var(--intro-loop) var(--ease) infinite;
}

/* --- 中央字标：直接沿用 LOGO 的字形语言 --------------------------------
   字体换成 --font-wordmark（Chakra Petch italic 700），与 LOGO 里的粗斜体方切
   科技字几乎同形；字号用 --fs-display（比原来的 --fs-h1 大一级），斜度由字体
   自带的 italic 提供，不再用 skew 伪造。
   字标压在白色线框上，必须自造底色才读得清：用多层 --bg 描边阴影把线框从字里
   推开（比加半透明方块更干净，也不会挡住线框的呼吸感）。 */
.intro__title {
  position: relative;
  z-index: 3;
  margin: 0;
  font-family: var(--font-wordmark);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1;
  /* LOGO 里字距很紧，两词之间留白靠 margin 而不是字距 */
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-align: center;
  text-shadow:
    0 0 8px var(--bg),
    0 0 18px var(--bg),
    0 0 32px var(--bg),
    0 0 56px var(--bg);
}

.intro__title em {
  font-style: inherit;
  color: var(--accent);
  margin-left: 0.18em;
}

/* LOGO 原文的第二行：tagline。这是 LOGO 里真实存在的一行小字（原图写作
   "Hidden in detail.Made to be treasured."），把它接在分隔线之后，
   整组锁定就与 LOGO 原图（1280x1280，键帽徽标 / 字标 / 横线 / 标语四段）一一对应了。
   字距放宽 + 等宽字体，模拟 LOGO 里那行点阵感的标语。 */
.intro__slogan {
  position: relative;
  z-index: 3;
  margin: 0;
  max-width: 100%;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 1.35vw, var(--fs-sm));
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  text-shadow:
    0 0 8px var(--bg),
    0 0 16px var(--bg),
    0 0 28px var(--bg);
}

/* 第三行：中文/英文的机构说明。它是本站补充的信息（LOGO 里没有），
   所以刻意比 slogan 低一档 —— 用户要求的「下方小字更突出」由 slogan 承担，
   这一行只做归属说明。 */
.intro__sub {
  position: relative;
  z-index: 3;
  margin: 0;
  max-width: 100%;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow:
    0 0 8px var(--bg),
    0 0 16px var(--bg);
}

/* LOGO 里的细分隔线，同时充当字标与标语之间的视觉分隔 */
.intro__rule {
  width: clamp(120px, 22vw, 240px);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-line) 18%,
    var(--accent) 50%,
    var(--accent-line) 82%,
    transparent
  );
  transform-origin: 50% 50%;
  animation: intro-rule var(--intro-loop) var(--ease) infinite;
}

/* --- HUD 标注框（橙底标签 + 引线），对应参考画面的 telemetry 标注 ---------- */
.intro__tag {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 3px 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: intro-tag var(--intro-loop) linear infinite;
}

.intro__tag em {
  font-style: normal;
  font-weight: 700;
}

/* 引线：向左的标签线朝右伸，向右的标签线朝左伸 */
.intro__tag::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--tag-line, 58px);
  height: 1px;
  background: var(--accent-line);
}

.intro__tag--a {
  top: 8%;
  left: -6%;
  animation-delay: calc(var(--intro-loop) * -0.02);
}

.intro__tag--a::after {
  left: 100%;
}

.intro__tag--b {
  top: 26%;
  right: -4%;
  animation-delay: calc(var(--intro-loop) * -0.16);
}

.intro__tag--b::after {
  right: 100%;
}

.intro__tag--c {
  bottom: 30%;
  left: -10%;
  animation-delay: calc(var(--intro-loop) * -0.30);
}

.intro__tag--c::after {
  left: 100%;
}

.intro__tag--d {
  bottom: 12%;
  right: -2%;
  animation-delay: calc(var(--intro-loop) * -0.44);
}

.intro__tag--d::after {
  right: 100%;
}

.intro__tag--e {
  top: 44%;
  left: -14%;
  animation-delay: calc(var(--intro-loop) * -0.58);
}

.intro__tag--e::after {
  left: 100%;
}

/* --- 底部滚动日志（复制一份内容，位移正好半条轨道 → 无缝） ---------------- */
.intro__log {
  position: absolute;
  left: var(--sp-8);
  bottom: var(--sp-8);
  width: 260px;
  height: 84px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--ink) 18%, var(--ink) 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, var(--ink) 18%, var(--ink) 82%, transparent);
}

.intro__logtrack {
  display: grid;
  animation: intro-log var(--intro-loop) linear infinite;
}

.intro__logline {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 21px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.intro__logline::before {
  content: "> ";
  color: var(--accent);
}

/* --- 进入按钮与页脚信息 --------------------------------------------------- */
.intro__enter {
  min-width: 240px;
  animation: intro-pulse calc(var(--intro-loop) / 3) var(--ease) infinite;
}

.intro__hint {
  margin-top: calc(var(--sp-6) * -1 + var(--sp-2));
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
}

.intro__count {
  position: absolute;
  right: var(--sp-8);
  bottom: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-4);
  letter-spacing: 0.1em;
}

/* --- 施工占位页（coming-soon）--------------------------------------------
   用户准备先买服务器和域名把站开起来，先用这个开屏当占位页放上去，所以
   这一页「仅显示这个开屏、不能跳转」。标记层面由 src/pages/coming-soon.html
   的 data-intro-hold 开关控制（site.js 的 initIntro 见到它就无条件显示、
   且不挂任何退场监听），样式层面在这里补三件事。 */

/* ① 占位页的开屏没有「进入网站」按钮（无处可进），取而代之的是一块施工提示。
   仍然沿用锁标的排版节奏：中文标题用 display 字体，下面一行等宽小字。 */
.intro__soon {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-4) var(--sp-7);
  /* 只有 clip-path 的话切角看不出来（描边会被裁掉，四角只是「少一块」）。
     这里用「外框用背景色画一个切角六边形、内层再画一个小一圈的」做双层描边，
     是纯 CSS 在 clip-path 下画出切角边框的标准做法 —— 比 border 可靠。 */
  border: 0;
  background: var(--tech-line);
  clip-path: polygon(
    var(--tech-chamfer) 0,
    100% 0,
    100% calc(100% - var(--tech-chamfer)),
    calc(100% - var(--tech-chamfer)) 100%,
    0 100%,
    0 var(--tech-chamfer)
  );
  animation: intro-soon-breathe calc(var(--intro-loop) / 2) var(--ease) infinite;
  animation-delay: calc(var(--intro-loop) / -4);
}

/* 内层：比外框小 1px，露出的一圈就是「边框」 */
.intro__soon::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-1);
  clip-path: polygon(
    var(--tech-chamfer) 0,
    100% 0,
    100% calc(100% - var(--tech-chamfer)),
    calc(100% - var(--tech-chamfer)) 100%,
    0 100%,
    0 var(--tech-chamfer)
  );
  z-index: -1;
}

.intro__soon-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: var(--ink);
}

.intro__soon-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  color: var(--accent);
}

/* ③ 常驻模式：隐藏按不动的进入按钮（防御性 —— 生成的标记里已经没有它，
   但如果哪天占位页改用手抄开屏，这里能兜住）。 */
[data-intro-hold] .intro__enter {
  display: none;
}

/* 占位页的提示语：与首页同一元素，但首页那句写在 .intro__hint 的默认色
   （--ink-4）上，压在铺满整屏的等高线里读不出来。占位页只有这一句说明文字，
   必须读得清，所以单独抬一档并给一点字距。 */
[data-intro-hold] .intro__hint {
  color: var(--ink-3);
  letter-spacing: 0.16em;
}

@keyframes intro-soon-breathe {
  0%,
  100% {
    background: var(--tech-line);
  }
  50% {
    background: var(--accent-line);
  }
}

/* 点标记脉冲：向外扩散一圈后消失，两端都在 0 尺度上，接缝不可见 */
@keyframes intro-node-ping {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-line);
  }
  45% {
    box-shadow: 0 0 0 7px transparent;
  }
}

/* 读数值滚动：竖排 5 格，用 steps(4) 逐格上移，位移 -80% 即 4 格。
   第 5 格与第 1 格写的是同一个值，所以 -80% 与 0% 显示的内容完全相同，
   循环处看不到回跳（见 index.html 里每条 track 的首尾重复值）。 */
@keyframes intro-node-roll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-80%);
  }
}

/* --- 关键帧：全部满足 0% == 100% ------------------------------------------ */
@keyframes intro-in {
  from {
    opacity: 0;
  }
}

@keyframes intro-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes intro-spin-rev {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes intro-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes intro-scan {
  0% {
    transform: translateY(-52vh);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(52vh);
    opacity: 0;
  }
}

/* 画出 → 停留 → 隐去；两端都不透明度 0，所以复位不可见 */
@keyframes intro-draw {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  24% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  78% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  94% {
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* 标注框闪现窗口：0% 与 100% 均为 opacity:0 + 下移，窗口内独立完成一次亮相 */
@keyframes intro-tag {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  5% {
    opacity: 1;
    transform: none;
  }
  26% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes intro-log {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* 徽标整体的轻微 3D 摆动：0% 与 100% 完全同姿（Y 轴转 360°），接缝无跳变 */
@keyframes intro-tilt {
  0%,
  100% {
    transform: perspective(700px) rotateX(8deg) rotateY(-16deg);
  }
  50% {
    transform: perspective(700px) rotateX(2deg) rotateY(16deg);
  }
}

/* 线框的呼吸辉光：0% 与 100% 同值 */
@keyframes intro-logo-glow {
  0%,
  100% {
    opacity: 0.92;
    filter: drop-shadow(0 0 6px var(--accent-soft));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 16px var(--accent-line));
  }
}

/* 实心徽标充能窗口：0% 与 100% 都是 opacity 0，中间透出来一次 */
@keyframes intro-logo-fill {
  0%,
  100% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  42% {
    opacity: 0.5;
  }
  58% {
    opacity: 0.5;
  }
  70% {
    opacity: 0;
  }
}

/* 分隔线：由中心向两端展开再收回，两端同为零宽 */
@keyframes intro-rule {
  0%,
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
  30% {
    transform: scaleX(1);
    opacity: 1;
  }
  70% {
    transform: scaleX(1);
    opacity: 1;
  }
  92% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes intro-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-line);
  }
  50% {
    box-shadow: 0 0 0 12px transparent;
  }
}

/* 窄屏：收起日志与部分标注，避免与按钮重叠 */
@media (max-width: 1000px) {
  .intro__log {
    display: none;
  }
}

@media (max-width: 760px) {
  .intro__tag--b,
  .intro__tag--d,
  .intro__tag--e,
  /* --c 在窄屏会压到 slogan 上（实测 tag 底边 430px、slogan 顶边 429px），
     留 --a 一个标注即可，纹理交给两个数据节点。 */
  .intro__tag--c,
  .intro__count {
    display: none;
  }

  .intro__stage {
    width: min(54vh, 88vw);
  }

  /* 桌面版用负偏移把标注甩到舞台外（-6% / -10%），窄屏这样做会被视口裁掉，
     所以改为贴边站位；引线也缩短，避免伸进中央线框。 */
  .intro__tag--a,
  .intro__tag--c {
    left: 0;
    --tag-line: 26px;
  }

  /* 徽标在窄屏缩小，给字标让位 */
  .intro__logo {
    width: clamp(72px, 13vh, 108px);
  }

  /* slogan（LOGO 原文那行）在窄屏字距收紧、缩小，避免贴边/被裁 */
  .intro__slogan {
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
  }

  /* 归属说明行更次要，窄屏继续降一档 */
  .intro__sub {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }

  .intro__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .intro__lockup {
    gap: var(--sp-3);
  }

  /* 背景与数据读数在窄屏收敛：地形降一档不透明度（否则纹理密度盖过字标），
     数据节点只留左右各一个，其余隐藏 —— 六个节点在 390px 宽下会互相叠字。 */
  .intro__topo {
    opacity: 0.5;
  }

  .intro__topo-marks {
    display: none; /* 高程数字在 390px 下会碎成噪点 */
  }

  .intro__node--b,
  .intro__node--d,
  .intro__node--e,
  .intro__node--f {
    display: none;
  }

  .intro__node--a {
    top: 11%;
    left: 5%;
  }

  .intro__node--c {
    bottom: 22%;
    left: 5%;
  }
}

/* 标题块必须能被 grid 压缩，否则副标题按 max-content 排成一行冲出屏幕 */
.intro__stage > div {
  max-width: 100%;
}

/* 极端降级：JS 不可用 / 用户要求减少动效时，直接不显示遮罩 */
.no-js .intro {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   2. 首页功能入口卡片（对应架构图的「各功能入口」）
   --------------------------------------------------------------------------- */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-5);
}

.entry-card {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-6);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.entry-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.entry-card:hover,
.entry-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--bg-2);
  transform: translateY(-3px);
}

.entry-card:hover::before,
.entry-card:focus-visible::before {
  transform: scaleY(1);
}

.entry-card--primary {
  background: var(--bg-2);
  border-color: var(--accent-line);
}

.entry-card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-1);
  background: var(--accent-soft);
}

.entry-card__icon svg {
  width: 22px;
  height: 22px;
}

.entry-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.entry-card__text {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.entry-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.entry-card__count {
  margin-left: auto;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* 「需要登录」的小锁标 */
.entry-card__lock {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entry-card__lock svg {
  width: 13px;
  height: 13px;
}

/* 首页：登录后替换访客提示条 */
.home-authline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg-1);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   3. 登录 / 注册
   --------------------------------------------------------------------------- */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 980px) {
  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.auth-card {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.auth-card__head {
  display: grid;
  gap: var(--sp-2);
}

.auth-card__head h2 {
  font-size: var(--fs-h3);
}

.auth-panel[hidden] {
  display: none;
}

.auth-aside {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.auth-perks {
  display: grid;
  gap: var(--sp-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.auth-perks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.auth-perks svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--accent);
}

.auth-perks strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.auth-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.checkline {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.checkline input {
  margin-top: 3px;
}

/* 登录后的账户头部 */
.account-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.account-head__main {
  display: grid;
  gap: 2px;
}

.account-head__main strong {
  font-size: 1.05rem;
}

.account-head__main span {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.account-head__actions {
  margin-left: auto;
}

/* 账户区左侧导航 */
.account-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

@media (max-width: 900px) {
  .account-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

.account-nav {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  position: sticky;
  top: calc(var(--sp-8) + 64px);
}

@media (max-width: 900px) {
  .account-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
}

.account-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-1);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.account-nav__link:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.account-nav__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.account-nav__link svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* 账户概览指标 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--sp-4);
}

.kpi {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.kpi__num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.kpi__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ---------------------------------------------------------------------------
   4. 订单：列表 + 类型 + 状态轨 + 逐项明细
   --------------------------------------------------------------------------- */
.order-list {
  display: grid;
  gap: var(--sp-4);
}

.order-card {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  transition: border-color var(--dur) var(--ease);
}

.order-card:hover {
  border-color: var(--line-strong);
}

.order-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.order-card__no {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.order-card__date {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.order-card__total {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.order-card__body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
}

@media (max-width: 620px) {
  .order-card__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.order-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.order-card__foot .btn {
  margin-left: auto;
}

.order-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  background: var(--bg-2);
}

.order-badge--review {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.order-badge--locked {
  color: var(--ink);
  border-color: var(--line-strong);
}

.order-badge--making,
.order-badge--shipping {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.order-badge--done {
  color: var(--ink-2);
}

.order-badge--aftersale {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-3);
}

/* 订单类型标签 */
.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px dashed var(--line-strong);
}

.type-tag--recolor {
  color: var(--accent);
  border-color: var(--accent-line);
}

/* 状态轨：下单 → 审核 → 锁定 → 制作 → 质检 → 发货 → 完成 */
.status-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
}

.status-step {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--ink-4);
  text-align: center;
}

.status-step::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.status-step::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
}

.status-step:first-child::before {
  left: 50%;
}

.status-step:last-child::before {
  right: 50%;
}

.status-step.is-done {
  color: var(--ink-2);
}

.status-step.is-done::before {
  background: var(--accent-line);
}

.status-step.is-done::after {
  background: var(--accent-line);
  border-color: var(--accent);
}

.status-step.is-current {
  color: var(--ink);
}

.status-step.is-current::after {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.status-step strong {
  font-weight: 500;
}

/* 定制需求内的逐项商品状态 */
.order-lines {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}

.order-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}

.order-line:last-child {
  border-bottom: 0;
}

@media (max-width: 620px) {
  .order-line {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .order-line__status {
    grid-column: 1 / -1;
  }
}

.order-line__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--r-1);
  overflow: hidden;
}

@media (max-width: 620px) {
  .order-line__thumb {
    width: 56px;
    height: 56px;
  }
}

.order-line__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-line__main strong {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.order-line__main span {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.order-line__status {
  display: grid;
  gap: var(--sp-2);
  justify-items: end;
  text-align: right;
}

.order-line__status small {
  color: var(--ink-4);
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 迷你进度条（逐项状态） */
.mini-track {
  display: flex;
  gap: 3px;
}

.mini-track i {
  width: 16px;
  height: 3px;
  background: var(--line);
  border-radius: var(--r-pill);
}

.mini-track i.is-on {
  background: var(--accent);
}

/* 订单内的金额/信息定义表 */
.order-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.order-meta div {
  display: grid;
  gap: 2px;
}

.order-meta dt,
.order-meta .order-meta__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.order-meta dd,
.order-meta .order-meta__v {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* 付款渠道卡片（线下付款） */
.pay-channel {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-1);
}

.pay-channel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.pay-channel__head strong {
  font-size: var(--fs-body);
}

.qr-box {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-3);
  background: var(--bg-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-1);
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.5;
}

.pay-channel__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-start;
}

/* 售后入口 */
.aftersale-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--bg-1);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.aftersale-bar .btn {
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   5. 留言 / 订单内提需求线程
   --------------------------------------------------------------------------- */
.thread {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.thread__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.thread__head strong {
  font-size: var(--fs-body);
}

.thread__head .pending-badge {
  margin-left: auto;
}

.thread__list {
  display: grid;
  gap: var(--sp-5);
  max-height: 560px;
  overflow-y: auto;
  padding-right: var(--sp-2);
}

.thread__item {
  display: grid;
  gap: var(--sp-2);
  max-width: 78%;
  justify-self: start;
}

.thread__item--studio {
  justify-self: end;
}

.thread__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.thread__item--studio .thread__meta {
  justify-content: flex-end;
}

.thread__who {
  color: var(--ink-2);
}

.thread__bubble {
  padding: var(--sp-4);
  border-radius: var(--r-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.thread__item--studio .thread__bubble {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--ink);
}

.thread__attach {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.thread__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-3);
}

.thread__file svg {
  width: 12px;
  height: 12px;
}

.thread-form {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.thread-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.thread-form__row .field__hint {
  margin-left: auto;
}

/* 站内信列表（联系我们 / 后台回复） */
.msg-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}

.msg-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.msg-item:last-child {
  border-bottom: 0;
}

.msg-item:hover {
  background: var(--bg-2);
}

.msg-item__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
}

.msg-item.is-unread .msg-item__dot {
  background: var(--accent);
}

.msg-item__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.msg-item__main strong {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.msg-item.is-unread .msg-item__main strong {
  color: var(--ink);
}

.msg-item__main span {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-item__time {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-4);
  white-space: nowrap;
}

/* 留言 + 工作室站内回复：一条留言是一个 .msg-thread，
   上半是 .msg-item 摘要，下半是回复列表（客户在「我的留言」里看到的就是这里）。 */
.msg-thread {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}

.msg-thread:last-child {
  border-bottom: 0;
}

.msg-thread .msg-item {
  border-bottom: 0;
}

.msg-thread__replies {
  display: grid;
  gap: var(--sp-3);
  padding: 0 var(--sp-5) var(--sp-4) calc(var(--sp-5) + 26px);
}

.msg-thread__reply {
  display: grid;
  gap: 2px;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-line);
}

.msg-thread__reply strong {
  font-size: var(--fs-xs);
  color: var(--accent);
}

.msg-thread__reply span {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

.msg-thread__reply time {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-4);
}

/* 后台留言回复台 */
.admin-msg {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}

.admin-msg:last-child {
  border-bottom: 0;
}

.admin-msg__head {
  display: grid;
  gap: var(--sp-1);
}

.admin-msg__head strong {
  font-size: var(--fs-sm);
}

.admin-msg__head span {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.admin-msg__reply {
  display: grid;
  gap: var(--sp-3);
}

.admin-msg__sent {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent-line);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------------
   6. 工作室后台
   --------------------------------------------------------------------------- */
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.admin-bar .pending-badge {
  margin-left: auto;
}

.admin-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

@media (max-width: 1000px) {
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

.admin-panel {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.admin-panel__head {
  display: grid;
  gap: var(--sp-1);
}

.admin-panel__head h3 {
  font-size: var(--fs-h4);
}

.admin-panel__head span {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.admin-queue {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}

.admin-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}

.admin-row:last-child {
  border-bottom: 0;
}

@media (max-width: 760px) {
  .admin-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-row__actions {
    justify-content: flex-start;
  }
}

.admin-row__id {
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.admin-row__id small {
  color: var(--ink-4);
  font-size: var(--fs-2xs);
}

.admin-row__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-row__main strong {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.admin-row__main span {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.admin-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* 后台的极简表格（用 .table-wrap + .spec-table 已有样式，这里补紧凑变体） */
.admin-table td,
.admin-table th {
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
}

/* base.css 的 .spec-table th 为「键值两列」表格设了 width:34%（base.css:1059），
   那是给规格表用的。后台总表有 6 列，沿用会把首列撑到三分之一宽，故在此复位。 */
.admin-table th {
  width: auto;
}

.admin-table td .type-tag,
.admin-table td .order-badge {
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   7. 商城：状态分区（在售 / 下架 / 仅供展示）
   --------------------------------------------------------------------------- */
.shop-section {
  display: grid;
  gap: var(--sp-5);
}

.shop-section + .shop-section {
  margin-top: var(--sp-11);
  padding-top: var(--sp-9);
  border-top: 1px solid var(--line);
}

.shop-section__head {
  display: grid;
  gap: var(--sp-3);
  max-width: 760px;
}

.shop-section__head h2 {
  font-size: var(--fs-h2);
}

.shop-section__head p {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.shop-section__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: start;
  padding: 2px var(--sp-3);
  border-radius: var(--r-1);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.shop-section__tag--onsale {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* 下架 / 仅供展示 的卡片：整体降饱和，但不影响可读性 */
.work-card--muted {
  opacity: 0.72;
}

.work-card--muted:hover {
  opacity: 1;
}

.work-card--display {
  border-style: dashed;
}

/* 状态图例 */
.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.status-legend b {
  color: var(--ink-2);
  font-weight: 600;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  vertical-align: middle;
}

.legend-dot--on {
  background: var(--accent);
}

/* 商品详情的「仅展示」提示 */
.display-notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-1);
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.display-notice svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--ink-4);
}

/* ---------------------------------------------------------------------------
   8. 其它小工具
   --------------------------------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-6);
}

.flow-list {
  display: grid;
  gap: 0;
  counter-reset: flow;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flow-list li {
  counter-increment: flow;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

.flow-list li:last-child {
  border-bottom: 0;
}

.flow-list li::before {
  content: counter(flow, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.06em;
}

.flow-list strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

.flow-list span {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* 关键提示（审核 / 锁定 / 线下付款） */
.callout {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-1);
  background: var(--bg-1);
}

.callout strong {
  font-size: var(--fs-sm);
}

.callout p {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* [data-auth-guest] / [data-auth-user] 由 site.js 控制显隐 */
[data-auth-guest][hidden],
[data-auth-user][hidden] {
  display: none !important;
}

/* 订单状态筛选：让筛选条在窄屏可横向滚动 */
.filter-bar--scroll {
  overflow-x: auto;
}

.filter-bar--scroll .filter-row {
  flex-wrap: nowrap;
}

/* ---------------------------------------------------------------------------
   9. 头部 / 抽屉里的账户入口（v0.2 新增，partials 使用）
   --------------------------------------------------------------------------- */
/* 头部「登录」/「我的订单」：图标 + 文字，窄屏只留图标 */
.header-login {
  gap: var(--sp-2);
  padding-inline: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}

.header-login:hover {
  color: var(--accent);
}

.header-login__text {
  white-space: nowrap;
}

/* 抽屉里的账户区：登录态两块由 site.js 切换显隐 */
.drawer__auth {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg-1);
}

.drawer__auth .field__hint {
  margin-top: var(--sp-1);
}

@media (max-width: 1240px) {
  .header-login__text {
    display: none;
  }

  .header-login {
    padding-inline: var(--sp-2);
  }
}