/* ============================================================
   Flycleard (FCE) — 站点外壳样式
   密码强度条 / 字段规则提示 */
.pw-strength {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.4375rem;
}
.pw-bar {
  flex: 1 1 auto;
  height: 0.3125rem;
  border-radius: 100px;
  background: var(--line);
  overflow: hidden;
}
.pw-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 300ms linear;
}
.pw-strength.is-weak .pw-fill { background: #d92d20; }
.pw-strength.is-mid .pw-fill { background: #dc9a06; }
.pw-strength.is-strong .pw-fill { background: #16a34a; }
.pw-text {
  flex: none;
  min-width: 2.5em;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-mute);
}
.pw-strength.is-weak .pw-text { color: #d92d20; }
.pw-strength.is-mid .pw-text { color: #b45309; }
.pw-strength.is-strong .pw-text { color: #15803d; }

/* 字段下方的规则提示（注册页密码要求） */
.field-rule {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-mute);
}
.field-rule.is-bad { color: #d92d20; }
/* ============================================================
   （原文件头注释，被插入的规则打断，这里重新打开注释）
   Flycleard (FCE) — 站点外壳样式
   · 浅色主题：白底黑字
   · 全站黑白灰，无彩色
   · 整体尺寸 = 设计值 × 90%（见 html 的 font-size）
   · 纯手写 CSS，无框架、无外部字体、无 CDN 依赖
   ============================================================ */

/* ---------- 设计变量 ----------
   这里所有数值都按「设计稿 px」写，实际渲染 = 数值 × 0.9
   （因为 html 的 font-size 设成了 90%）
   想再整体缩放，只改 html 的 font-size 百分比即可。
   ------------------------------------------------------------ */
:root {
  color-scheme: light;

  --bg:          #ffffff;
  --bg-soft:     #fafbfc;

  --panel:       #ffffff;
  --panel-hover: #f5f7fa;

  --line:        #e8eaee;
  --line-strong: #d6dae1;
  --line-hover:  #c9d0da;

  --text:        #101317;
  --text-dim:    #3d444e;
  --text-mute:   #6b7280;
  --dot:         #c3c8d0;

  --ink:         #101317;   /* 黑白按钮：黑 */
  --ink-hover:   #262b33;

  /* ---------- 主题相关的扩展变量（浅色值） ---------- */
  --ink-text:   #ffffff;                    /* --ink 底上的文字 */
  --topbar-bg:  rgba(255, 255, 255, 0.96);  /* 顶栏毛玻璃底 */
  --ring:       rgba(16, 24, 40, 0.09);    /* 输入框聚焦光圈 */
  --code-bg:    #fcfcfd;                    /* 代码块 / 只读区底 */
  --selected:   #f2f4f7;                    /* 选中项底色 */
  --ph:         #a6adb9;                   /* 占位符 / 弱化值 */

  --ok-bg:   #f2fbf6;  --ok-line: #a9e0c4;  --ok-text:   #067647;
  --bad-bg:  #fdf3f2;  --bad-line: #f0b4ae; --bad-text:  #b42318;
  --warn-bg: #fdf9f0;  --warn-line: #f2d08a; --warn-text: #b54708;
  --info-bg: #e8f1fd;  --info-text: #1a56db;
  --post-bg: #eaf7ef;
  --accent-bg: #fffdfa;                     /* TEMPO 等强调段底色 */

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04),
               0 1px 3px rgba(16, 24, 40, 0.055);
  --shadow-md: 0 4px 10px -3px rgba(16, 24, 40, 0.09),
               0 2px 5px -2px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 28px -8px rgba(16, 24, 40, 0.16),
               0 4px 10px -4px rgba(16, 24, 40, 0.07);

  --radius:     0.625rem;   /* 10px */
  --radius-lg:  1rem;       /* 16px */
  --topbar-h:   4rem;       /* 64px */

  --container:  72.5rem;    /* 1160px */
  --gutter:     1.75rem;    /* 28px */

  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
          "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Arial, "Noto Sans SC", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }

/* ★ 整体缩放开关：90% 即「UI 整体缩小 10%」 */
html {
  font-size: 90%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Vue 的挂载点才是 header / main / footer 的直接父元素，
   所以「页脚压底」的弹性布局必须加在这里 —— 加在 body 上不起作用
   （body 的直接子元素只有 #app 这一个 div）。 */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main 吃掉除顶栏/页脚之外的全部高度，把页脚顶到视口底部 */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

img { border: 0; }

::selection { background: rgba(16, 24, 40, 0.1); }

/* Vue 挂载前的占位（挂载后会被整体替换掉） */
.boot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--text-mute);
  font-size: 0.9375rem;
}

/* ---------- 背景装饰（极淡，仅增加层次） ---------- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 24, 40, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 88% 52% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 88% 52% at 50% 0%, #000 10%, transparent 72%);
}

.bg-glow {
  position: fixed;
  top: -22.5rem;
  left: 50%;
  width: 71.875rem;
  height: 45rem;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(16, 24, 40, 0.045), transparent 66%);
  filter: blur(24px);
}

/* ============================================================
   顶栏
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-h);
  /* 这里刻意「不用」backdrop-filter：
     Chrome 在页面缩放时会把带 backdrop-filter 的合成层按低分辨率栅格化，
     左上角站名会跟着发糊。改用高不透明度纯色，视觉几乎一样但字是锐的。 */
  background: var(--topbar-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.topbar.is-scrolled {
  border-bottom-color: var(--line);
  background: var(--bg);
  box-shadow: 0 1px 12px -6px rgba(16, 24, 40, 0.14);
}

.topbar-inner {
  /* 顶栏比正文容器更宽：站名更靠左、服务更靠右，视觉更舒展 */
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* 左上角站名（纯文字，无 logo） */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  flex-shrink: 0;
}

/* logo 底片：logo 的飞机与对勾是白色的，放在白底顶栏会看不见，
   所以托一个深色圆角底片（原图就是这个底色），既保留设计又看得清 */
.brand-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.4375rem;
  background: #0b1b2d;
}

.brand-logo img {
  display: block;
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.brand-name {
  /* 字号取整数（90% 根字号下 = 18px）：
     原来的 1.21875rem 会落在 17.55px 这种小数值上，
     页面一经缩放就会被插值成半像素，字看起来发糊。 */
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;        /* 去掉负字距，缩小后字母不会黏在一起 */
  color: var(--text);
  white-space: nowrap;      /* 窗口变窄时不许挤压或换行 */
}

/* ---------- 主导航：紧随站名，居左 ---------- */
.services {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.service-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.90625rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.16s ease;
}

.service-btn:hover { color: var(--text); }

.service-btn:focus-visible {
  outline: 2px solid rgba(16, 24, 40, 0.35);
  outline-offset: 2px;
}

.service-btn.is-pending { color: var(--text-mute); }
.service-btn.is-pending:hover { color: var(--text-dim); }

.service-btn .pip {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--dot);
  flex-shrink: 0;
}

.service-btn.is-ready .pip {
  background: var(--text);
  box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.12);
}

/* 移动端汉堡 */
.menu-btn {
  display: none;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.menu-btn span {
  display: block;
  width: 0.9375rem;
  height: 1.6px;
  border-radius: 2px;
  background: var(--text-dim);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* ============================================================
   首屏 —— 图片轮播
   ============================================================ */
.hero {
  position: relative;
  /* overflow:clip 比 hidden 更省：它不会把 .hero 变成滚动容器，
     滑动时浏览器无需维护「可滚动溢出区域」，少一层开销。
     前一行 hidden 作为老浏览器的回退。 */
  overflow: hidden;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(26.875rem, 33vw, 38.75rem);
  background: #eceff3;          /* 图片加载完成前的底色 */
  /* 单一真相：滑动时长。位移要干净利落，太长反而显得拖沓 */
  --car-speed: 560ms;
}

/* ------------------------------------------------------------
   轮播结构：横向位移的幻灯片轨道
   ------------------------------------------------------------ */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* 裁剪容器自成一层 */
  contain: paint;
  transform: translateZ(0);
}

/* ------------------------------------------------------------
   ★ 滑动顺滑的关键 ★
   把整条轨道预先提升为独立的 GPU 合成层。
   否则浏览器会在动画的每一帧重新缩放并绘制那几张 2 MB 的大图
   （1919×1078 → 1440），这就是卡顿 / 僵硬的根因。
   提升之后，位移完全交给 GPU，主线程不参与。
   ------------------------------------------------------------ */
.hero-track {
  display: flex;
  height: 100%;

  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* 缓入缓出：起步柔、收尾稳，不生硬 */
  transition: transform var(--car-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/* 跟手拖动 / 循环瞬移时关掉过渡 */
.hero-track.is-jumping { transition: none; }

/* ------------------------------------------------------------
   图片显示规则（严格按要求）
   · 宽度铺满容器 —— 左右永不裁切、永不压缩变形
   · 高度按原始比例自动 —— 不拉伸
   · 容器 overflow:hidden + 垂直居中 —— 只裁掉上下多出来的部分
   结论：无论窗口多宽，图片都只会被「上下裁剪」
   ------------------------------------------------------------ */
.hero-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;      /* 垂直居中 → 上下均等裁剪 */
  justify-content: center;
  overflow: hidden;

  /* 绘制隔离：每张幻灯片互不牵连重绘 */
  contain: paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-slide img {
  display: block;
  width: 100%;
  height: auto;             /* 保持原始长宽比，绝不压扁 */
  max-width: none;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  user-select: none;
  -webkit-user-drag: none;
}

/* 文字可读性遮罩：左侧白、向右渐隐 */
/* hero 遮罩：做成「浅色一层 + 深色一层」叠着，靠 opacity 交叉淡入淡出。
   为什么不用一层改颜色：遮罩是 linear-gradient，属于 background-image，
   CSS 无法对它做过渡 —— 单层方案在切换主题时会瞬间跳变（其它元素都在
   慢慢渐变，唯独照片上这层"啪"地一下），所以必须拆成两层用 opacity 淡换。 */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* 渐变是静态的，单独成层避免跟随图片一起重绘 */
  transform: translateZ(0);
  transition: opacity 2s ease;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.90) 32%,
    rgba(255, 255, 255, 0.60) 56%,
    rgba(255, 255, 255, 0.18) 80%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

/* 深色那层：深色模式下才浮出来。不透明度整体比浅色低 ——
   浅色遮罩是「把照片提亮融进白底」，照片暗部照样看得见；
   深色遮罩如果照搬同样强度，照片暗部会被直接压成纯黑。 */
.hero-scrim-dark {
  opacity: 0;

  background: linear-gradient(
    90deg,
    rgba(10, 13, 17, 0.80) 0%,
    rgba(10, 13, 17, 0.62) 32%,
    rgba(10, 13, 17, 0.30) 56%,
    rgba(10, 13, 17, 0.10) 80%,
    rgba(10, 13, 17, 0.00) 100%
  );
}

html.theme-dark .hero-scrim { opacity: 0; }

/* 必须写在上面那条之后：两者选择器权重相同，靠先后顺序决胜 */
html.theme-dark .hero-scrim-dark { opacity: 1; }

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 3.5rem var(--gutter);

  /* 文字层单独成层：底下图片滑动时，文字纹理直接复用，不重新栅格化 */
  transform: translateZ(0);
}

/* 指示点 */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: rgba(16, 24, 40, 0.26);
  transition: width 0.22s ease, background 0.22s ease;
}

.hero-dot:hover { background: rgba(16, 24, 40, 0.45); }

.hero-dot.is-on {
  width: 1.25rem;
  background: var(--text);
}

/* ---------- 首屏文案 ---------- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  margin: 0 0 1.5rem;
  padding: 0.3125rem 0.8125rem 0.3125rem 0.6875rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text-mute);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.hero-eyebrow b { color: var(--text); font-weight: 700; }

.hero-eyebrow .dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.12);
}

.hero-title {
  margin: 0;
  font-size: clamp(2.625rem, 7vw, 4.75rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--text);
}

.hero-tagline {
  margin: 1.125rem 0 0;
  color: var(--text-dim);
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  font-weight: 500;
}

.hero-lead {
  max-width: 40rem;
  margin: 1.375rem 0 0;
  color: var(--text-mute);
  font-size: 1rem;
  line-height: 1.9;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.375rem;
}

/* ---------- 按钮（黑白） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.625rem;
  border: 1px solid transparent;
  /* 比原来（0.5625rem）圆一点，但仍比胶囊克制 —— 输入框是 0.65625rem，
     按钮略圆于输入框，视觉上更成套 */
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, background 0.16s ease,
              border-color 0.16s ease, box-shadow 0.2s ease, color 0.16s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: var(--ink-text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
}

.btn-primary:hover {
  background: var(--ink-hover);
  box-shadow: 0 4px 12px -4px rgba(16, 24, 40, 0.3);
}

.btn-ghost {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
  background: var(--panel);
  border-color: var(--line-hover);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   通用区块
   ============================================================ */
.section {
  position: relative;
  z-index: 1;
  padding: 5.5rem var(--gutter);
}

/* 相邻区块之间只留一份呼吸感。
   原来两块之间是「上面的 padding-bottom 5.5rem + 下面的 padding-top 5.5rem」
   叠成 158px，太空；把下面那道的上间距压到 2.5rem，合计约 115px。
   只影响相邻区块，首屏 hero 与第一个区块的关系不变。 */
.section + .section { padding-top: 2.5rem; }

.section-alt {
  background: var(--bg-soft);
  /* 不画上边线：与上一段（介绍区）之间靠底色深浅区分就够了，
     多一条横线会把本来连着的两块切开。
     下边线留着 —— 那是与页脚的分界。 */
  border-bottom: 1px solid var(--line);
}

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.section-head { margin-bottom: 2.625rem; }

.section-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--text);
}

.section-sub {
  margin: 0.75rem 0 0;
  color: var(--text-mute);
  font-size: 0.96875rem;
}

/* ---------- 介绍卡片 ---------- */
/* 介绍区：极简排版
   编号与标题同一行，下面接说明。不要框、不要分隔线、不要底色，
   只靠留白和字重分级 —— 三列自然成组，不会有「一框一框」的观感。 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.75rem 3rem;
}

.card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* 编号 + 标题同一行，基线对齐 */
.card-head {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.card-tag {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.card h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  color: var(--text);
}

.card p {
  margin: 0;
  /* 限一下行宽，长句更好读 */
  max-width: 34ch;
  color: var(--text-mute);
  font-size: 0.90625rem;
  line-height: 1.8;
}

/* ---------- 服务列表 ---------- */
/* 服务条目同样去框：一条顶部细线 + 留白，悬停只做颜色反馈 */
.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.25rem 2.5rem;
}

.service-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
  background: none;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.service-card:hover { border-top-color: var(--line-hover); }

.service-card .sc-main { min-width: 0; }

.service-card .sc-name {
  display: block;
  font-size: 0.96875rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  color: var(--text);
}

.service-card .sc-state {
  display: block;
  margin-top: 0.1875rem;
  color: var(--text-mute);
  font-size: 0.8125rem;
}

.service-card .sc-arrow {
  margin-left: auto;
  color: var(--dot);
  font-size: 1rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.service-card:hover .sc-arrow {
  color: var(--text);
  transform: translateX(3px);
}

.service-card.is-pending { background: var(--code-bg); }
.service-card.is-pending .sc-name { color: var(--text-dim); font-weight: 600; }
.service-card.is-pending:hover .sc-arrow { color: var(--text-mute); }

/* ============================================================
   页脚
   ============================================================ */
.footer {
  position: relative;
  z-index: 1;
  /* 原来 2.875rem 太厚 → 1.5rem → 再压到 1rem */
  padding: 1rem var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
}

.footer-abbr {
  padding: 1px 0.4375rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.3125rem;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.footer-note {
  flex: 1 1 21.25rem;
  margin: 0;
  color: var(--text-mute);
  font-size: 0.8125rem;
  line-height: 1.75;
}

.footer-meta {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.78125rem;
}

/* ============================================================
   提示条
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2.25rem;
  z-index: 200;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5625rem;
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  color: var(--text-dim);
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   导航下拉（「飞行包」）
   ============================================================ */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item.has-children .service-btn .caret {
  margin-left: 0.0625rem;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.nav-item.has-children .service-btn[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* 鼠标从按钮移到面板之间的「隐形桥」，避免中途断开 */
.nav-item.has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 120;

  min-width: 9.5rem;
  padding: 0.375rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
  box-shadow: var(--shadow-lg);

  display: flex;
  flex-direction: column;
  gap: 0.0625rem;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-item {
  display: block;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  color: var(--text-dim);
  font-size: 0.90625rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

.nav-dropdown-item:hover {
  background: var(--panel-hover);
  color: var(--text);
}

.nav-dropdown-item.router-link-active {
  color: var(--text);
  font-weight: 600;
}

/* 当前所在页：只加深加粗，不出现框 */
.service-btn.router-link-active { color: var(--text); font-weight: 600; }
.service-btn.router-link-active .pip { background: var(--text); }

/* ============================================================
   内页容器（除主页外的所有页面）
   ============================================================ */
.page {
  position: relative;
  z-index: 1;
  padding: 5rem var(--gutter) 6rem;
}

.page-inner {
  max-width: 46rem;
  margin: 0 auto;
}

/* 登录 / 注册 / 找回密码：整页背景「左糊右清」，表单落在左侧 */
.page.auth-page {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

/* ---------- 整页轮换背景 ---------- */
.auth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 两层叠着：清晰层铺满整页，模糊层盖在左侧。
   两层共用同一个缓慢推近动画（见 authStackZoom）——
   动画加在「层容器」上而不是单张图上，这样两张图切换时
   缩放进度天然一致，不会在过渡带上出现跳变。 */
.auth-bg-stack {
  position: absolute;
  inset: 0;
  animation: authStackZoom 22s ease-in-out infinite alternate;
}

/* 缓慢推近（Ken Burns）：让背景轮换看起来是持续在「渐变」而不是硬切 */
@keyframes authStackZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14); }
}

.auth-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* 5 秒一张，淡换给足 2 秒并改 ease-in-out —— 起收都慢，换得更柔和 */
  transition: opacity 2s ease-in-out;
}

.auth-bg-layer.is-on { opacity: 1; }

/* 模糊层：只显示左侧，36% 之后开始淡出、68% 淡干净
   （36% 是因为表单右边缘大约在 40%，过渡带要落在表单之外） */
.auth-bg-stack-blur {
  filter: blur(8.5px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0, 0, 0, 0) 68%);
  mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0, 0, 0, 0) 68%);
}

/* 蒙层：同样只压左侧（保证表单可读），右侧图片保持鲜亮。
   两层浅/深靠 opacity 交叉淡换 —— 渐变本身无法过渡，
   单层直接改颜色会在切换白昼黑夜时瞬间跳变。 */
.auth-bg-scrim {
  position: absolute;
  inset: 0;
  transition: opacity 2s ease;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0, 0, 0, 0) 68%);
  mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0, 0, 0, 0) 68%);
}

.auth-bg-scrim-light { background: rgba(255, 255, 255, 0.5); opacity: 1; }
.auth-bg-scrim-dark  { background: rgba(15, 18, 22, 0.5); opacity: 0; }

html.theme-dark .auth-bg-scrim-light { opacity: 0; }
html.theme-dark .auth-bg-scrim-dark  { opacity: 1; }

/* 表单落在左侧，占左侧 42%（与蓝框位置一致） */
.auth-page .page-inner {
  position: relative;
  z-index: 1;
  width: 42%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--gutter);
}

/* 整块表单右移。
   位移量要跟着宽度一起改：卡片是在 42% 栏里居中的，
   宽度每减少 100px，居中后的左边缘就会往右跑 50px ——
   所以从 +100 收到 +50，左边缘才能钉在原地不动（右边单独往左缩）。
   用 transform 而不是加 padding：加 padding 会把内容盒压窄，
   表单会被挤小；transform 只挪位置，尺寸完全不变。
   窄屏不偏移，避免顶出屏幕。 */
@media (min-width: 821px) {
  .auth-page .auth-card { transform: translateX(50px); }
}

/* ---------- 窄屏：整页一栏，虚化与蒙层铺满，左右过渡取消 ---------- */
@media (max-width: 820px) {
  .auth-page .page-inner {
    width: 100%;
    padding: 3.25rem 1.25rem 4rem;
  }

  .auth-bg-stack-blur,
  .auth-bg-scrim {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* 表单浮在背景之上 */
.auth-page .page-inner { position: relative; z-index: 1; }

/* ============================================================
   页面切换过渡
   ★ 刻意不用 Vue 的 <Transition> ★
     那套机制依赖 transitionend / animationend 的「完成检测」，
     一旦某次检测不到（视图根元素被复用、时序错位等），状态机就会停在
     离场阶段：旧页面永远不消失、新页面永远不挂载 —— 整站卡死。
     这里改成「把进场动画直接挂在页面根元素上」：
     纯 CSS keyframes 播完自然结束，不需要任何完成回调，不可能卡住。
   ============================================================ */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 只有淡入、不做位移的版本，给「减少动效」用 */
@keyframes viewInFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* .page 是所有内页的根元素；.view-anim 给主页那种多根节点的页面用 */
.page,
.view-anim {
  animation: viewIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.page-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.125rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.page-lead {
  margin: 1.125rem 0 0;
  color: var(--text-dim);
  font-size: 1.0625rem;
  line-height: 1.85;
}

.page-note {
  margin: 0;
  color: var(--text-mute);
  font-size: 0.9375rem;
  line-height: 1.85;
}

.page-card {
  margin-top: 2.25rem;
  padding: 1.5rem 1.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.page-badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--text-mute);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.page-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ============================================================
   工单表单
   ============================================================ */
.ticket-form {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field label {
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ph); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.ticket-hint {
  margin: 0;
  color: var(--text-mute);
  font-size: 0.8125rem;
}

/* ============================================================
   航路及油量查询页
   布局：左边参数栏 + 右边地图（顶栏不受影响，页面占满剩余高度）
   ============================================================ */
.tool-page {
  position: relative;
  z-index: 1;
  padding-bottom: 2rem;
}

/* 每一大块（航路查询 / 油量查询） */
.tool-section {
  max-width: 1560px;
  margin: 0 auto;
  padding: 3rem var(--gutter);
}

.tool-section + .tool-section {
  border-top: 1px solid var(--line);
}

.tool-head { margin-bottom: 1.75rem; }

.tool-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 1.9375rem);
  font-weight: 720;
  letter-spacing: -0.022em;
  color: var(--text);
}

.tool-sub {
  margin: 0.5rem 0 0;
  color: var(--text-mute);
  font-size: 0.9375rem;
}

/* ---------- 航路区：左参数栏 + 右地图 ---------- */
/* ---------- 航路区：左右各半，右侧再多 50px（比例固定，不随缩放变） ---------- */
.route-layout {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  height: 700px;               /* 由地图高度定，参数栏超出自己滚 */
}

.route-panel {
  flex: 0 0 calc(50% - 0.875rem - 25px);
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.75rem;
}

.route-map {
  position: relative;
  flex: 0 0 calc(50% - 0.875rem + 25px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #dfe6ec;
}


.rp-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.rp-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rp-cycle {
  margin-left: auto;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.71875rem;
}

.rp-block {
  padding: 0.875rem 0;
  border-top: 1px solid var(--line);
}

.rp-block:first-of-type { border-top: 0; padding-top: 0; }

.rp-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-mute);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
}

/* 机场输入 */
.rp-airport { position: relative; }

.rp-airport + .rp-airport { margin-top: 0.5rem; }

.rp-airport label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
}

.rp-airport input {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rp-airport input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

.rp-suggest {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.rp-suggest button {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  transition: background 0.12s ease;
}

.rp-suggest button:hover { background: var(--panel-hover); }

.rp-suggest strong {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text);
}

.rp-suggest span {
  color: var(--text-mute);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-swap {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.3125rem;
  border: 1px dashed var(--line-strong);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-mute);
  font-size: 0.8125rem;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.rp-swap:hover { color: var(--text); border-color: var(--line-hover); }

/* METAR */
.rp-metar {
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.65;
  word-break: break-word;
}

.rp-metar b { color: var(--text); }

/* 跑道 */
.rp-runways { display: flex; flex-direction: column; gap: 0.3125rem; }

.rp-rwy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel);
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.rp-rwy:hover { border-color: var(--line-hover); background: var(--panel-hover); }

.rp-rwy.is-on { border-color: var(--ink); background: var(--selected); }

.rp-rwy .id {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  min-width: 2.75rem;
}

.rp-rwy .dim {
  color: var(--text-mute);
  font-size: 0.75rem;
}

.rp-rwy .wind {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-align: right;
}

.rp-rwy .wind.is-off { color: var(--ph); }

.rp-empty {
  margin: 0;
  padding: 0.5rem 0;
  color: var(--text-mute);
  font-size: 0.8125rem;
}

/* 进离场程序及跑道：起飞 / 落地两组 */
.rp-side + .rp-side {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}

.rp-side-head {
  margin-bottom: 0.5rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.rp-proc { margin-top: 0.5rem; }

.rp-select {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.875rem;
}

.rp-select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

/* 航路字符串与信息 */
.rp-route-input {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  resize: vertical;
}

.rp-route-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

.rp-actions { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-top: 0.5rem; }

.rp-btn {
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--panel);
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 550;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.rp-btn:hover { color: var(--text); border-color: var(--line-hover); background: var(--panel-hover); }

.rp-btn.is-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-text);
}

.rp-btn.is-primary:hover { background: var(--ink-hover); }

.rp-info { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.625rem; }

.rp-info div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.rp-info span { color: var(--text-mute); }

.rp-info b {
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}

.rp-info .total b { font-size: 0.9375rem; }

.rp-status {
  margin-top: 0.5rem;
  color: var(--text-mute);
  font-size: 0.78125rem;
}

.rp-status.is-err { color: var(--bad-text); }
.rp-status.is-ok { color: var(--ok-text); }

/* 备选航路 */
.rp-options { display: flex; flex-direction: column; gap: 0.3125rem; margin-top: 0.5rem; }

.rp-option {
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel);
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.rp-option:hover { border-color: var(--line-hover); background: var(--panel-hover); }
.rp-option.is-on { border-color: var(--ink); background: var(--selected); }

.rp-option .t {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--text);
}

.rp-option .t small {
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-dim);
}

.rp-option .p {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.71875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 右侧地图 ---------- */
/* ---------- 右侧地图（尺寸由上面的 .route-layout 区块统一决定） ---------- */
.route-map .leaflet-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #dfe6ec;
}

/* 地图上的标注样式（Leaflet 的 divIcon / tooltip） */
.route-map .airport-marker {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1.5px #111;
}

.route-map .waypoint-marker {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #111;
}

/* 航路点标注：直接显示文字，不加白底框 */
.route-map .map-label {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #0d2b6b;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  text-shadow:
     0 0 3px #fff,  0 0 3px #fff,
     0 0 3px #fff,  0 0 3px #fff;
  white-space: nowrap;
}

.route-map .map-label::before { display: none; }

.route-map .leaflet-tooltip-top.map-label::before,
.route-map .leaflet-tooltip-bottom.map-label::before,
.route-map .leaflet-tooltip-left.map-label::before,
.route-map .leaflet-tooltip-right.map-label::before { display: none; }

/* 地图右上角的图例 */
.map-legend {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 500;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.map-legend i {
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 0.375rem;
  border-radius: 2px;
  vertical-align: middle;
}

.map-legend .l-route { background: #1a56db; }

/* 窄屏：左参数栏和地图改成上下排列 */
@media (max-width: 1024px) {
  .route-layout {
    flex-direction: column;
    /* ⚠️ 必须把基础规则的 height: 700px 清掉。
       那 700px 是给「左右分栏 + 参数栏内部滚动」用的固定高度；
       改成上下排列后，参数栏不再裁剪（overflow: visible），
       内容约 1050px 全被撑出来，容器却仍被钉在 700px，
       多出来的部分就会压到下一个区块（油量查询）上 ——
       浏览器缩放到 1024px 以下时出现的「错位」就是这个。
       同时清掉 min-height，避免任何高度约束残留。 */
    height: auto;
    min-height: 0;
  }

  .route-panel {
    /* 基础规则是 flex: 0 0 calc(50% ...)，那是「宽度」；
       一旦变成纵向排列，flex-basis 会作用到「高度」上把参数栏压扁，
       内容就会溢出。这里收回成按内容高度。 */
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .route-map {
    flex: 0 0 auto;
    width: 100%;
    height: 60vh;
    max-height: 700px;
  }

  .tool-section { padding: 2.25rem 1.25rem; }
}

/* ---------- 油量查询 ---------- */
.fuel-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.fuel-form { flex: 1 1 auto; min-width: 0; }

.fuel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.25rem;
}

/* 航程距离：来自上方航路，只读展示 */
.fuel-distance {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.fuel-distance .fd-label { color: var(--text-mute); font-size: 0.8125rem; font-weight: 600; }

.fuel-distance b {
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--text);
}

.fuel-distance .fd-note { margin-left: auto; color: var(--text-mute); font-size: 0.75rem; }
.fuel-distance.is-empty { border-style: dashed; }
.fuel-distance.is-empty b { color: var(--text-mute); }

/* 滑杆与数字框同一行，和普通输入框齐平 */
.fuel-slider-row { display: flex; align-items: center; gap: 0.75rem; }
.fuel-slider-row .fuel-range { flex: 1 1 auto; margin: 0; }
.fuel-slider-row .fuel-num { flex: 0 0 7.5rem; width: 7.5rem; }

/* 数字框：去掉浏览器自带的上下箭头，把宽度全留给数字（5 位数不再穿模） */
.fuel-num::-webkit-outer-spin-button,
.fuel-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* 结果底部的小标记 */
.fuel-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; }

.fuel-badges span {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.fuel-badges .is-bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-text); font-weight: 600; }
.fuel-badges .is-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-text); font-weight: 600; }

/* 各飞行阶段明细 */
.fuel-phases {
  width: 100%;
  margin-top: 0.875rem;
  border-collapse: collapse;
  font-size: 0.71875rem;
}

.fuel-phases th {
  padding: 0.1875rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-mute);
  font-weight: 600;
  text-align: right;
}

.fuel-phases th:first-child { text-align: left; }

.fuel-phases td {
  padding: 0.1875rem 0.25rem;
  color: var(--text-dim);
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
}

.fuel-phases td:first-child { text-align: left; font-family: inherit; }
.fuel-phases tbody tr + tr td { border-top: 1px dashed var(--line); }

.fuel-inline { display: flex; gap: 0.5rem; }

/* 带滑杆的字段：说明数字 → 滑杆 → 数值框 */
.field-wide { grid-column: 1 / -1; }

.field-hint {
  float: right;
  color: var(--text-mute);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--mono);
}

.fuel-range {
  width: 100%;
  height: 1.125rem;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.fuel-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 100px;
  background: var(--line-strong);
}

.fuel-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
}

.fuel-range::-moz-range-track {
  height: 4px;
  border-radius: 100px;
  background: var(--line-strong);
}

.fuel-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
}

.fuel-num {
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: right;
}

.fuel-num:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

/* 机型参数一览 */
.fuel-spec {
  margin: 1.25rem 0 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.375rem 1.25rem;
}

.fuel-spec > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.fuel-spec dt { color: var(--text-mute); }

.fuel-spec dd {
  margin: 0 0 0 auto;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}

.fuel-inline input { flex: 1 1 auto; min-width: 0; }
.fuel-inline .rp-btn { flex: none; white-space: nowrap; }
.fuel-inline .rp-btn:disabled { opacity: 0.42; cursor: not-allowed; border-color: var(--line); color: var(--text-mute); }

.fuel-result {
  flex: none;
  width: 20rem;
  max-width: 100%;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.fuel-result-head {
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.fuel-lines { margin: 0; display: flex; flex-direction: column; gap: 0.4375rem; }

.fuel-lines > div {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.fuel-lines dt { color: var(--text-mute); }

.fuel-lines dd {
  margin: 0 0 0 auto;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}

.fuel-lines .total {
  margin-top: 0.375rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--line);
}

.fuel-lines .total dd { font-size: 1rem; }

.fuel-note {
  margin: 1rem 0 0;
  color: var(--text-mute);
  font-size: 0.8125rem;
  line-height: 1.75;
}

@media (max-width: 1024px) {
  .fuel-layout { flex-direction: column; }
  .fuel-result { width: 100%; }
}

/* ============================================================
   首页服务卡片里的子项标签
   ============================================================ */
.sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.5625rem;
}

.sc-tag {
  padding: 0.0625rem 0.5rem;
  /* 小标签也去掉描边，改成浅底块 —— 少一层「框」 */
  border: 0;
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-mute);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 820px) {
  .menu-btn { display: flex; }

  .services {
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.625rem 1rem 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .services.is-open { display: flex; }

  /* 移动端：导航项改成整行，下拉不再是浮层，而是内联展开 */
  .nav-item { display: block; }

  .nav-item.has-children::after { display: none; }

  .nav-dropdown {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 0.375rem 1.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: none;
  }

  .nav-dropdown.is-open {
    display: flex;
    transform: none;
  }

  .nav-dropdown-item { padding: 0.625rem 0.875rem; }

  .page { padding: 3.25rem 1.25rem 4rem; }

  .service-btn {
    justify-content: flex-start;
    padding: 0.75rem 0.875rem;
  }

  /* 移动端：图片做顶部横幅，文案落到白底上（保证可读性） */
  .hero {
    display: block;
    min-height: 0;
  }

  .hero-media {
    position: relative;
    inset: auto;
    height: 52vw;
  }

  .hero-scrim { display: none; }

  .hero-inner { padding: 2.5rem 1.25rem 3rem; }

  .hero-dots {
    bottom: auto;
    top: calc(52vw - 1.75rem);
  }

  .section { padding: 4rem 1.25rem; }
  .footer { padding: 2.25rem 1.25rem; }
  .topbar-inner { padding: 0 1.25rem; }
}

/* 极窄屏：只留 logo 图形，隐藏站名，避免挤成一团 */
@media (max-width: 520px) {
  .brand-name { display: none; }
}

/* ============================================================
   天气查询
   ============================================================ */
.wx-form { display: flex; gap: 0.75rem; margin-bottom: 0.875rem; }

.wx-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5625rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wx-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

.wx-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.wx-quick-label { margin-right: 0.25rem; color: var(--text-mute); font-size: 0.75rem; }

.wx-chip {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.wx-chip:hover { border-color: var(--ink); color: var(--text); }

.wx-updated { margin: 0 0 1rem; color: var(--text-mute); font-size: 0.75rem; }
.wx-tip { color: var(--text-mute); opacity: 0.75; }

.wx-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); }

.wx-tab {
  padding: 0.5rem 0.875rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-mute);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wx-tab.is-on { color: var(--text); border-bottom-color: var(--ink); }
.wx-count { margin-left: 0.25rem; color: var(--text-mute); font-family: var(--mono); font-size: 0.6875rem; }

.wx-list { display: grid; gap: 1.25rem; }

.wx-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}

.wx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.wx-ident { display: flex; align-items: baseline; gap: 0.625rem; min-width: 0; }
.wx-ident b { font-family: var(--mono); font-size: 1.125rem; letter-spacing: 0.03em; }
.wx-name { color: var(--text-mute); font-size: 0.8125rem; }

.wx-cat {
  padding: 0.1875rem 0.5625rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
}

.wx-cat.is-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-text); }
.wx-cat.is-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-text); }
.wx-cat.is-bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-text); }

.wx-valid { color: var(--text-mute); font-family: var(--mono); font-size: 0.75rem; }

/* 原文 */
.wx-raw {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--line);
  background: var(--code-bg);
}

.wx-raw code {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  word-break: break-word;
}

.wx-copy {
  flex: none;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-mute);
  font-size: 0.6875rem;
  cursor: pointer;
}

.wx-copy:hover { border-color: var(--ink); color: var(--text); }

/* 翻译后的字段 */
.wx-fields {
  margin: 0;
  padding: 0.5rem 1.125rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0;
}

.wx-fields > div {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
}

.wx-fields > div.wide { grid-column: 1 / -1; }

.wx-fields dt {
  flex: 0 0 6.5rem;
  color: var(--text-mute);
  font-size: 0.75rem;
}

.wx-fields dd { margin: 0; color: var(--text); font-size: 0.8125rem; line-height: 1.7; }
.wx-sub { display: block; margin-top: 0.125rem; color: var(--text-mute); font-size: 0.75rem; }
.wx-rmk { font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); word-break: break-word; }

.wx-tag {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.375rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--text-mute);
  font-size: 0.6875rem;
}

.wx-cloud { display: block; }

/* TAF 时段 */
.wx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  padding: 0.625rem 1.125rem 0;
  color: var(--text-mute);
  font-size: 0.75rem;
}

.wx-periods { padding: 0.75rem 1.125rem 1.125rem; display: grid; gap: 0.75rem; }

.wx-period {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  background: var(--panel);
}

.wx-period.is-change { border-left-color: #e07b2a; background: var(--accent-bg); }

.wx-period header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.wx-period header b { font-size: 0.8125rem; }
.wx-when { margin-left: auto; color: var(--text-mute); font-family: var(--mono); font-size: 0.6875rem; }
.wx-period ul { margin: 0; padding: 0; list-style: none; }

.wx-period li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.1875rem 0;
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.wx-period li i {
  flex: 0 0 4rem;
  color: var(--text-mute);
  font-size: 0.75rem;
  font-style: normal;
}

.wx-empty {
  padding: 2rem 0;
  color: var(--text-mute);
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 720px) {
  .wx-form { flex-wrap: wrap; }
  .wx-fields > div { flex-direction: column; gap: 0.125rem; }
  .wx-fields dt { flex: none; }
  .wx-period li { flex-direction: column; gap: 0.125rem; }
  .wx-period li i { flex: none; }
  .wx-when { margin-left: 0; }
}

/* ============================================================
   工单 —— 等待开发
   ============================================================ */
.wip {
  margin-top: 2.5rem;
  padding: 2.5rem 1.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  text-align: center;
}

.wip-badge {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-mute);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wip-title { margin: 1rem 0 0.625rem; font-size: 1.25rem; font-weight: 700; color: var(--text); }
.wip-text { margin: 0 auto; max-width: 30rem; color: var(--text-dim); font-size: 0.875rem; line-height: 1.85; }
.wip-dim { margin-top: 0.5rem; color: var(--text-mute); font-size: 0.8125rem; }

/* ============================================================
   API 文档
   ============================================================ */
.api-base {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.api-base-label { color: var(--text-mute); font-size: 0.8125rem; font-weight: 600; }

.api-base code {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.875rem;
  word-break: break-all;
}

.api-copy {
  flex: none;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-mute);
  font-size: 0.6875rem;
  cursor: pointer;
}

.api-copy:hover { border-color: var(--ink); color: var(--text); }

.api-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.api-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-dim);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.api-toc a:hover { border-color: var(--ink); color: var(--text); }
.api-toc a b { color: var(--text-mute); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; }

.api-group-head { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 1.25rem; }

.api-group-tag {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
}

.api-group-head h2 { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 700; }
.api-group-head p { margin: 0; max-width: 46rem; color: var(--text-dim); font-size: 0.8125rem; line-height: 1.8; }

.api-ep {
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}

.api-ep-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.api-method {
  padding: 0.125rem 0.4375rem;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.api-method.is-get { background: var(--info-bg); color: var(--info-text); }
.api-method.is-post { background: var(--post-bg); color: var(--ok-text); }

.api-path { color: var(--text); font-family: var(--mono); font-size: 0.8125rem; word-break: break-all; }
.api-ep-title { margin-left: auto; color: var(--text-dim); font-size: 0.8125rem; font-weight: 600; }
.api-ep-desc { margin: 0; padding: 0.875rem 1.125rem 0; color: var(--text-dim); font-size: 0.8125rem; line-height: 1.8; }

.api-params {
  width: calc(100% - 2.25rem);
  margin: 0.875rem 1.125rem 0;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.api-params th {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-mute);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.api-params td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px dashed var(--line);
  color: var(--text-dim);
  vertical-align: top;
}

.api-params td code { font-family: var(--mono); color: var(--text); }

.api-block { padding: 0.875rem 1.125rem 0; }
.api-block:last-child { padding-bottom: 1.125rem; }

.api-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
  color: var(--text-mute);
  font-size: 0.75rem;
  font-weight: 600;
}

.api-block pre {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--code-bg);
  overflow-x: auto;
}

.api-block pre code {
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.75;
  white-space: pre;
}

@media (max-width: 720px) {
  .api-ep-title { margin-left: 0; width: 100%; }
  .api-params { display: block; overflow-x: auto; white-space: nowrap; }
}

/* 登入按钮：先占位，功能待开发 */
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  margin-left: 0.875rem;
  padding: 0.375rem 0.9375rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.login-btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-text);
}

.login-btn svg { flex: none; }

/* ============================================================
   深色主题：只覆盖变量，组件自己用 var() 就自动翻转。
   地图区压在卫星影像上，标注与控件颜色不随主题变。
   ============================================================ */
html.theme-dark {
  color-scheme: dark;

  --bg:          #0f1216;
  --bg-soft:     #151a21;
  --panel:       #171c24;
  --panel-hover: #1f2630;

  --line:        #272e39;
  --line-strong: #36404e;
  --line-hover:  #47525f;

  --text:        #e7eaef;
  --text-dim:    #b4bcc8;
  --text-mute:   #7d868f;
  --dot:         #3a4250;

  --ink:         #e7eaef;
  --ink-hover:   #cdd4de;
  --ink-text:    #10141a;

  --topbar-bg:   rgba(15, 18, 22, 0.94);
  --ring:        rgba(231, 234, 239, 0.14);
  --code-bg:     #10141a;
  --selected:    #232b37;
  --ph:          #5c6672;

  --ok-bg:   #0f241b;  --ok-line: #1d4c38;  --ok-text:   #4ad395;
  --bad-bg:  #2a1517;  --bad-line: #5c2622; --bad-text:  #ff8177;
  --warn-bg: #2a2110;  --warn-line: #5c4a1e; --warn-text: #f6b954;
  --info-bg: #12233d;  --info-text: #74aaff;
  --post-bg: #0f241b;
  --accent-bg: #261e10;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px -3px rgba(0, 0, 0, 0.5), 0 2px 5px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.65), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}

/* 个别写死白色的元素，深色下单独覆盖 */
/* 深色的 hero 遮罩已经并入上面的 .hero-scrim-dark（两层叠加淡换），
   这里只留文字阴影：遮罩变轻之后靠它补回对比度 */
html.theme-dark .hero-title,
html.theme-dark .hero-tagline {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
}

html.theme-dark .hero-lead {
  color: #e2e6ec;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}

html.theme-dark .hero-eyebrow { background: rgba(13, 16, 20, 0.86); }

html.theme-dark .btn-ghost { background: rgba(23, 28, 35, 0.9); }

/* ---------- 深色模式：图片与地图相关的收尾 ---------- */

/* logo 底片是固定的深蓝（图片自带的底色），在近黑顶栏上会连同底片一起消失，
   补一圈极淡的内描边，让它是「一块底片」而不是浮着的白色图形 */
html.theme-dark .brand-logo {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* 照片加载完成前的占位底色，浅色下是浅灰，深色下必须换成深色 */
html.theme-dark .hero-slide,
html.theme-dark .hero-slide img { background-color: #141a22; }

/* 地图容器底色（卫星影像加载前会露出来） */
html.theme-dark .route-map,
html.theme-dark .route-map .leaflet-container { background: #141a22; }

/* Leaflet 自带的缩放按钮与版权条默认是纯白，深色下非常刺眼，改成主题色 */
html.theme-dark .route-map .leaflet-bar a {
  background: var(--panel);
  color: var(--text);
  border-bottom-color: var(--line);
}

html.theme-dark .route-map .leaflet-bar a:hover,
html.theme-dark .route-map .leaflet-bar a:focus {
  background: var(--panel-hover);
  color: var(--text);
}

html.theme-dark .route-map .leaflet-bar { border-color: var(--line); }

html.theme-dark .route-map .leaflet-control-attribution {
  background: rgba(23, 28, 36, 0.88);
  color: var(--text-mute);
}

html.theme-dark .route-map .leaflet-control-attribution a { color: var(--text-dim); }


/* ---------- 主题切换的 2 秒过渡 ----------
   JS 切换时临时给 <html> 挂 .theme-anim，2.2 秒后摘掉；
   不常驻是怕干扰其他交互动画（下拉、滑杆等）。 */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color 2s ease,
    color 2s ease,
    border-color 2s ease,
    fill 2s ease,
    stroke 2s ease,
    box-shadow 2s ease,
    /* opacity：hero 遮罩靠两层 opacity 交叉淡换，少了它遮罩会瞬间跳变 */
    opacity 2s ease,
    /* text-shadow：深色模式给 hero 标题加了文字阴影，少了它阴影会「啪」地
       出现，看起来就是标题的颜色突然变了 —— 这是深浅两套样式里最后一个
       没被覆盖到的属性，加上它就齐了 */
    text-shadow 2s ease !important;
}
/* ============================================================
   顶栏右侧工具组：语言 / 主题 / 公告 ｜ 登入
   ============================================================ */
.topbar-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ctrl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.375rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.ctrl-btn:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel-hover);
}

.ctrl-lang {
  font-family: var(--mono);
  letter-spacing: 0.02em;
  padding: 0 0.5rem;
}

/* 竖线：工具组与「登入」之间的分隔 */
.topbar-divider {
  width: 1px;
  height: 1.25rem;
  margin: 0 0.375rem;
  background: var(--line-strong);
  flex: none;
}

/* 登入现在是 RouterLink（<a>），补一条去下划线；
   旧规则里的 margin-left 在控制组里会挤歪竖线，归零 */
.login-btn { text-decoration: none; }
.topbar-controls .login-btn { margin-left: 0; }

/* ---------- 系统公告 ---------- */
.announce-wrap { position: relative; }

.announce-dot {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #e07b2a;   /* 强调橙，两种主题下都醒目 */
  box-shadow: 0 0 0 2px var(--topbar-bg);
}

.announce-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 130;
  width: min(24rem, 86vw);
  max-height: min(28rem, 70vh);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.announce-panel.is-open {
  display: flex;
  animation: announceIn 0.18s ease;
}

@keyframes announceIn {
  from { opacity: 0; transform: translateY(-0.375rem); }
  to   { opacity: 1; transform: none; }
}

.announce-head {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.announce-list { overflow-y: auto; padding: 0.5rem 0; }

.announce-item { padding: 0.75rem 1.125rem; }
.announce-item + .announce-item { border-top: 1px dashed var(--line); }

.announce-item time {
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.announce-item h4 {
  margin: 0.25rem 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.announce-item p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre-line;
}

.announce-empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--text-mute);
  font-size: 0.8125rem;
}

/* ============================================================
   登录页
   ============================================================ */
.auth-inner { display: flex; justify-content: center; }

/* 登录页不再套一层「卡片框」：页面本身就是登入用的区域，
   而且顶栏已经有登入入口了，直接让表单落在页面上更简洁 */
.auth-card {
  width: 100%;
  /* 24rem - 10px ≈ 335.6px：从 24rem+90px（435.6）整体收窄 100 像素 */
  max-width: calc(24rem - 10px);
  margin: 0 auto;              /* 垂直居中交给 .auth-page，这里只管水平 */
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* 标题移到左上角（左对齐），不再居中 —— 与站内其它页面
   （航路查询 / 天气查询 / API）的标题位置保持一致 */
.auth-head { text-align: left; }

.auth-head h1 {
  margin: 0 0 1.5rem;
  /* 标题（登入 / 注册 / 找回密码）字号：1.25 → 1.625 → 1.875rem */
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text);
}

/* ---- 表单整体收窄一档，界面更紧凑 ---- */
.auth-form .field { margin-bottom: 0.75rem; }

.auth-form .field label {
  display: block;
  margin-bottom: 0.3125rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
}

.auth-form .field input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  /* 比默认圆角再圆 5% */
  border-radius: calc(var(--radius) * 1.05);
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.auth-form .field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.4375rem;
  margin: 0 0 1rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.6;
  cursor: pointer;
}

.auth-agree input {
  margin-top: 0.125rem;
  accent-color: var(--ink);
}

.auth-doc {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 0.5625rem 1rem;
  font-size: 0.875rem;
}

.auth-links {
  margin-top: 1.125rem;
  padding-top: 0.9375rem;
  border-top: 1px dashed var(--line);
  text-align: center;
}

.auth-links p {
  margin: 0 0 0.375rem;
  /* 比上一版（0.875rem）再小一档 */
  font-size: 0.8125rem;
  /* 用 flex + gap 排版：「还没有账号？」和「点击注册」之间必须有间距，
     靠模板里的空格在编译后会被折叠掉（英文下会粘成 No account yet?Register）。
     注册 / 忘记密码排在同一行，不再各占一行。 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* 同行两个链接之间的间隔点：左右再各留一点，拉开两个链接的距离 */
.auth-sep { color: var(--text-mute); margin: 0 0.3125rem; }
.auth-dim { color: var(--text-mute); }

.auth-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-link:hover { color: var(--ink-hover); }

/* ============================================================
   账号页补充：注册 / 找回密码 / 账号菜单
   ============================================================ */
.auth-hint {
  margin: 0 0 1rem;
  color: var(--text-mute);
  font-size: 0.78125rem;
  line-height: 1.7;
}

.auth-opt { margin-left: 0.25rem; color: var(--text-mute); font-weight: 400; }

.auth-error {
  margin: -0.25rem 0 0.75rem;
  color: var(--bad-text);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* 验证码：题目 + 等号 + 输入框 */
.auth-captcha { display: flex; align-items: center; gap: 0.5rem; }

.auth-captcha-q {
  flex: none;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.05);
  background: var(--bg-soft);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  user-select: none;
}

.auth-captcha-eq { color: var(--text-mute); font-size: 0.8125rem; }
.auth-captcha input { flex: 1 1 auto; min-width: 0; }

.auth-refresh {
  float: right;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: 0.6875rem;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-refresh:hover { color: var(--text); }

/* 注册成功 / 密码重置完成 */
.auth-done { text-align: center; }
.auth-done-title { margin: 0 0 0.625rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.auth-done-text { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 0.8125rem; line-height: 1.8; }

.auth-done .auth-submit {
  display: inline-flex;
  width: auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* 开发模式提示：未配 SMTP 时把验证链接 / 验证码直接给出来 */
.auth-dev {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px dashed var(--warn-line);
  border-radius: calc(var(--radius) * 1.05);
  background: var(--warn-bg);
  text-align: left;
}

.auth-dev p {
  margin: 0 0 0.375rem;
  color: var(--warn-text);
  font-size: 0.75rem;
  line-height: 1.7;
}

.auth-dev-link {
  color: var(--warn-text);
  font-size: 0.75rem;
  font-weight: 600;
  word-break: break-all;
}

.auth-dev-code {
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.auth-back {
  display: block;
  margin: 0.875rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: 0.75rem;
  cursor: pointer;
}

.auth-back:hover { color: var(--text); }

/* ---------- 顶栏账号菜单 ----------
   按用户要求：不要标题、不要邮箱、不要按钮外框，就是几行字 */
.user-panel { width: auto; min-width: 8.5rem; }
.user-body { padding: 0.4375rem; }

/* ============================================================
   工单 / 个人中心 / 管理后台
   沿用「不描边」的取向：用浅底块 + 留白分隔，不画四边框
   ============================================================ */

/* ---------- 未登入 / 非管理员：拦下并说明 ---------- */
.tk-guard { max-width: 34rem; padding: 1.5rem 0 2rem; }
.tk-guard h3 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700; color: var(--text); }
.tk-guard p { margin: 0 0 1.5rem; color: var(--text-mute); font-size: 0.9375rem; line-height: 1.9; }

/* ---------- 新建工单 ---------- */
.tk-new {
  padding: 1.5rem 1.75rem 1.75rem;
  margin-bottom: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.tk-new-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.tk-new-title { font-size: 1.0625rem; font-weight: 650; color: var(--text); }
.tk-new-hint { color: var(--text-mute); font-size: 0.8125rem; }

.tk-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) * 1.05);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.75;
  resize: vertical;
}
.tk-textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }

/* ---------- 列表头 ---------- */
.tk-list-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 0.5rem; }
.tk-list-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 650; color: var(--text); }
.tk-count { margin-left: 0.5rem; color: var(--text-mute); font-size: 0.8125rem; font-weight: 400; }

.tk-switch { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-left: auto; }
.tk-switch button {
  padding: 0.3125rem 0.6875rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-dim);
  font-size: 0.8125rem;
  cursor: pointer;
}
.tk-switch button.is-on { border-color: var(--ink); background: var(--ink); color: var(--ink-text); }

/* ---------- 空态 ---------- */
.tk-empty { padding: 2rem 0; color: var(--text-mute); font-size: 0.875rem; }
.tk-empty-t { margin: 0 0 0.375rem; color: var(--text-dim); font-weight: 600; }
.tk-empty-h { margin: 0; }

/* ---------- 工单条目 ---------- */
.tk-items { list-style: none; margin: 0; padding: 0; }
.tk-item + .tk-item { border-top: 1px solid var(--line); }

.tk-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9375rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tk-row:hover .tk-subject { color: var(--ink-hover); }

.tk-badge { flex: none; padding: 0.0625rem 0.5rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; }
.tk-badge.is-open { background: var(--warn-bg); color: var(--warn-text); }
.tk-badge.is-closed { background: var(--code-bg); color: var(--text-mute); }

.tk-cat { flex: none; color: var(--text-mute); font-size: 0.8125rem; }
.tk-subject {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 550;
}
.tk-meta { flex: none; display: flex; align-items: center; gap: 0.5rem; color: var(--text-mute); font-size: 0.78125rem; }
.tk-who { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-replycount { padding: 0 0.375rem; border-radius: 100px; background: var(--code-bg); }

/* ---------- 展开详情 ---------- */
.tk-detail { padding: 0 0 1.5rem; }
.tk-from { margin: 0 0 0.5rem; color: var(--text-mute); font-size: 0.8125rem; }
.tk-body { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 0.90625rem; line-height: 1.9; white-space: pre-wrap; }

.tk-thread { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.tk-msg { padding: 0.75rem 0.9375rem; border-left: 2px solid var(--line-strong); background: var(--bg-soft); }
.tk-msg.is-admin { border-left-color: var(--ink); }
.tk-msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 0.375rem; }
.tk-msg-who { color: var(--text); font-size: 0.8125rem; font-weight: 650; }
.tk-msg-time { color: var(--text-mute); font-size: 0.75rem; }
.tk-msg p { margin: 0; color: var(--text-dim); font-size: 0.875rem; line-height: 1.85; white-space: pre-wrap; }

.tk-reply { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- 个人中心 ---------- */
.ac-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem 2.5rem; }
.ac-card { padding: 1.5rem 1.75rem 1.75rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.ac-card h3 { margin: 0 0 1.25rem; font-size: 1.0625rem; font-weight: 650; color: var(--text); }
.ac-lines { margin: 0 0 1.25rem; }
.ac-lines > div { display: flex; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.ac-lines dt { flex: 0 0 5.5rem; margin: 0; color: var(--text-mute); font-size: 0.8125rem; }
.ac-lines dd { margin: 0; color: var(--text); font-size: 0.875rem; word-break: break-all; }
/* UID 用等宽字体，跟邮箱区分开 */
.ac-uid { font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em; }
/* 「查看用户」弹窗里的大号 UID */
.adm-uid-big {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* ---------- 管理后台概览 ---------- */
.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.ad-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.375rem;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.ad-stat-n { color: var(--text); font-size: 1.75rem; font-weight: 720; letter-spacing: -0.02em; }
.ad-stat-l { color: var(--text-mute); font-size: 0.8125rem; }

/* ---------- 顶栏账号菜单条目 ---------- */
.user-item {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.user-item:hover { background: var(--panel-hover); color: var(--text); }

/* ============================================================
   按钮统一规范（用户明确要求）
   「统一采用简洁的字作为按钮，外框细。不要黑色底」
   主按钮一律改成：透明底 + 细边框 + 常规文字色，不再用深色填充块。
   选中态同理 —— 靠边框深浅和字重区分，不靠填色。
   ============================================================ */
.btn-primary {
  border-color: var(--line-strong);
  background: none;
  color: var(--text);
  box-shadow: none;
}
.btn-primary:hover {
  border-color: var(--ink);
  background: var(--panel-hover);
  color: var(--text);
}

.rp-btn.is-primary {
  border-color: var(--line-strong);
  background: none;
  color: var(--text);
}
.rp-btn.is-primary:hover {
  border-color: var(--ink);
  background: var(--panel-hover);
  color: var(--text);
}

.tk-switch button.is-on {
  border-color: var(--ink);
  background: none;
  color: var(--text);
  font-weight: 650;
}

/* 顶栏登入按钮悬停也不填黑 —— 同样按「按钮不要黑底」的规范 */
.login-btn:hover {
  border-color: var(--ink);
  background: var(--panel-hover);
  color: var(--text);
}

/* 工单页那个「前往登入」按钮上下太厚，单独收一档 */
.tk-guard .btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ============================================================
   管理后台：左栏目切换 + 右内容
   ============================================================ */
.ad-layout {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.ad-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  position: sticky;
  top: calc(var(--topbar-h) + 1rem);
}

.ad-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  /* 选中态用左侧竖条 + 字重，不填色 —— 沿用「按钮不要黑底」的规范 */
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 0.375rem 0.375rem 0;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.84375rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.ad-nav-item:hover { background: var(--panel-hover); color: var(--text); }
.ad-nav-item.is-on { border-left-color: var(--ink); color: var(--text); font-weight: 650; }
.ad-nav-icon { width: 1rem; color: var(--text-mute); font-size: 0.875rem; text-align: center; }

.ad-main { min-width: 0; }

/* ============================================================
   通用弹窗（新建工单、以及后面管理后台的「右侧操作 + 弹窗详情」）
   ============================================================ */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(16, 19, 23, 0.42);
}
html.theme-dark .modal-mask { background: rgba(0, 0, 0, 0.58); }

.modal {
  width: 100%;
  /* 加宽一档：权限列表 + 封禁选项在窄弹窗里太挤 */
  max-width: 38rem;
  max-height: calc(100vh - 3rem);
  /* overflow-y: auto 会让 overflow-x 也变成 auto，于是纵向滚动条一出现，
     内容就比可用宽度多出滚动条那十几像素，底部冒出一条横向滚动条。
     显式把横向锁死。 */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1.75rem 1.75rem;
  /* 圆角收小一档：--radius-lg 显得太圆 */
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

/* 弹窗底部操作区：右对齐，取消在左、保存在右。
   ⚠️ 不能用 position: sticky —— 实测它会盖住最后一个输入框（封禁原因）。
   回到正常文档流：内容滚动、页脚在最后，不会遮住任何东西。 */
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.modal-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text); }

.modal-x {
  flex: none;
  padding: 0.125rem 0.375rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--text-mute);
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
}
.modal-x:hover { background: var(--panel-hover); color: var(--text); }

.modal-hint { margin: 0 0 1.25rem; color: var(--text-mute); font-size: 0.8125rem; }

@media (max-width: 520px) {
  .modal-mask { padding: 0.75rem; }
  .modal { padding: 1.25rem 1.25rem 1.5rem; }
}

/* ============================================================
   工单清单：表格式 + 左侧展开（按用户给的参考版面）
   ============================================================ */
.tkl { border-top: 1px solid var(--line-strong); }

.tkl-head,
.tkl-row {
  display: grid;
  grid-template-columns: 1.25rem 11.5rem 6.5rem minmax(0, 1fr) 7rem;
  align-items: center;
  gap: 0.75rem;
}

.tkl-head {
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-mute);
  font-size: 0.78125rem;
  font-weight: 600;
}

.tkl-item + .tkl-item { border-top: 1px solid var(--line); }
.tkl-item.is-open { background: var(--bg-soft); }

.tkl-row {
  width: 100%;
  padding: 0.75rem 0.5rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tkl-row:hover .tkl-subject { color: var(--ink-hover); }

.tkl-arrow { color: var(--text-mute); font-size: 1rem; line-height: 1; }
.tkl-time { color: var(--text-dim); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.tkl-subject {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 550;
}
.tkl-who { margin-left: 0.5rem; color: var(--text-mute); font-size: 0.75rem; font-weight: 400; }
.tkl-right { text-align: right; }

/* 类型标签：按分类上色（故障红 / 建议蓝 / 数据橙 / 账号紫 / 其他灰） */
.tkl-type {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 0.3125rem;
  font-size: 0.75rem;
  line-height: 1.6;
}
.tkl-type.is-bug { background: #fdf2f1; color: #b42318; }
.tkl-type.is-feature { background: #eef4ff; color: #1a56db; }
.tkl-type.is-data { background: #fff6ec; color: #a35b00; }
.tkl-type.is-account { background: #f5f0ff; color: #6b3fd4; }
.tkl-type.is-other { background: var(--code-bg); color: var(--text-mute); }

/* 回复状态 */
.tkl-state {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 0.3125rem;
  font-size: 0.75rem;
  line-height: 1.6;
}
.tkl-state.is-done { background: #f2fbf6; color: #067647; }
.tkl-state.is-wait { background: #fdf2f1; color: #b42318; }

/* 展开后的详情：左边标签栏 + 右边内容（参考图那种两栏） */
.tkl-detail { padding: 0 0.5rem 1rem; }
.tkl-line {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.tkl-label {
  padding: 0.625rem 0.75rem;
  background: var(--code-bg);
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
}
.tkl-value {
  padding: 0.625rem 0.875rem;
  color: var(--text-dim);
  font-size: 0.84375rem;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.tkl-msg { margin-bottom: 0.5rem; }
.tkl-msg:last-child { margin-bottom: 0; }
.tkl-msg-who { color: var(--text); font-size: 0.8125rem; font-weight: 650; }
.tkl-msg-time { margin-left: 0.5rem; color: var(--text-mute); font-size: 0.75rem; }
.tkl-msg p { margin: 0.1875rem 0 0; }
.tkl-msg.is-admin .tkl-msg-who { color: var(--ink-hover); }

.tkl-note { margin: 0.5rem 0 0; color: var(--text-mute); font-size: 0.75rem; }

/* ---------- 管理后台：表单块与复选框组 ---------- */
.adm-form {
  padding: 1.5rem 1.75rem 1.75rem;
  margin-bottom: 2rem;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.adm-form .field + .field { margin-top: 0.875rem; }
.adm-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.875rem 1rem;
  align-items: end;
}
.adm-row .field + .field { margin-top: 0; }

.adm-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.25rem 0.75rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) * 1.05);
  background: var(--bg);
}
.adm-check {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--text-dim);
  font-size: 0.8125rem;
  cursor: pointer;
}
.adm-check input { accent-color: var(--ink); }
.adm-pin { align-self: end; padding-bottom: 0.5rem; }
.adm-html { margin-top: 0.625rem; font-family: var(--mono); font-size: 0.8125rem; }

/* 收件人选择：昵称 + 邮箱 两栏一行，点一下切换选中（比一排复选框好点） */
.adm-search {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) * 1.05);
  background: var(--bg);
  color: var(--text);
  font-size: 0.8125rem;
}
.adm-search:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }

.adm-picks {
  max-height: 13rem;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) * 1.05);
  background: var(--bg);
}
.adm-pick {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.adm-pick:last-child { border-bottom: 0; }
.adm-pick:hover { background: var(--panel-hover); }
.adm-pick.is-on { background: var(--code-bg); color: var(--text); font-weight: 600; }
.adm-pick.is-on::before { content: '✓'; margin-right: 0.125rem; color: var(--ink-hover); }
.adm-pick-name { flex: 0 0 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-pick-mail { flex: 1 1 auto; min-width: 0; color: var(--text-mute); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 权限单选：必须禁止换行，否则窄一点就会被挤成一个字一行（竖排） */
.adm-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  padding: 0.375rem 0 0.75rem;
}
.adm-roles .adm-check { white-space: nowrap; }
.adm-roles .adm-check span { white-space: nowrap; word-break: keep-all; }

/* 常用档位：点一下就填好，不用自己算秒数 */
.adm-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* 数据服务：档位按钮做大一点，一眼看出「点这个就生效」 */
.adm-presets .rp-btn { padding: 0.5rem 1rem; font-size: 0.84375rem; }
.adm-preset-hint { margin: 0.75rem 0 1.25rem; }

/* 页脚的构建标记：用来判断浏览器跑的是不是最新一版 */
.footer-build {
  margin-left: 0.5rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 100px;
  background: var(--code-bg);
  color: var(--text-mute);
  font-size: 0.6875rem;
}

/* 权限勾选：左文字、右控件。
   用 flex + `margin-left: auto` 把控件顶到最右 —— 这是最不依赖容器行为的做法：
   之前试过 space-between 和 grid 固定列，实测勾选框都还贴在文字后面，
   而 margin-left:auto 在 flex 里由规范强制生效（吸收全部剩余空间）。 */
.adm-perms { display: flex; flex-direction: column; width: 100%; padding: 0.375rem 0 0.75rem; }

.adm-perm,
.adm-perms-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4375rem 0.75rem;
}

.adm-perm {
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.84375rem;
  white-space: nowrap;
  cursor: pointer;
}

/* ⚠️⚠️ 真正的根因（DevTools 定位 + 实测确认）：
   权限行本身是 <label>，而 .auth-form .field label { display: block } 这条
   通用规则把整片表单里的 label 都设成块级 —— 权限行被压成块级后，
   勾选框就退回「行内跟在文字后面」，margin-left:auto 也随之失效。
   我试过加重选择器（.auth-form .field .adm-perm）仍然被压，
   所以这里直接 !important 定死 —— 这一条比任何选择器权重的猜测都可靠。 */
.adm-perms .adm-perm,
.adm-perms .adm-perms-head {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.adm-perm:last-child { border-bottom: 0; }
.adm-perm:hover { background: var(--panel-hover); }

/* 控件推到最右 —— 勾选框与表头文字因此落在同一条竖线上 */
.adm-perm > input,
.adm-perms-head > span:last-child { margin-left: auto; flex: none; }

.adm-perms-head {
  padding-bottom: 0.375rem;
  color: var(--text-mute);
  font-size: 0.75rem;
}

/* ⚠️ 关键修复：.auth-form .field input 那条规则本来是给文本框写的
   （width:100% + 输入框的边框/内边距），但它会一起套到复选框和单选框上，
   结果勾选框被撑成一条、贴不到右列，表头「是否给予此权限」也就跟勾选框列对不齐。
   这里把这两类控件从那条规则里摘出来，给固定尺寸。 */
.auth-form .field input[type="checkbox"],
.auth-form .field input[type="radio"],
.adm-perm input[type="checkbox"],
.adm-perm input[type="radio"] {
  flex: none;
  width: 1rem;
  height: 1rem;
  /* ⚠️ 这里必须是 `0 0 0 auto`（左 auto）而不是 `0`。
     这条规则权重 (0,2,1) 高于 `.adm-perm > input` 的 (0,1,1)，
     之前写 margin:0 会把「顶到最右」的 margin-left:auto 一起顶掉，
     勾选框就贴在文字后面了 —— 这是两次修复互相打架，CSSOM 实测确认。 */
  margin: 0 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 0.1875rem;
  background: var(--bg);
  accent-color: var(--ink);
  cursor: pointer;
}
.adm-perm input[type="radio"] { border-radius: 50%; }

/* 解封时间那一行：日期框填满控件列 */
.adm-perm-field input[type="datetime-local"] {
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

/* 表头与勾选框的右边缘对齐：两者共用同一个 9rem 控件列，天然对齐 */

/* 被封禁的行：整行泛红 + 标记 */
.ad-table tr.is-banned td { background: #fdf2f1; }
html.theme-dark .ad-table tr.is-banned td { background: #2a1a19; }
.adm-banned { display: block; margin-top: 0.25rem; color: #b42318; font-size: 0.75rem; }

/* 邮件附件 */
.adm-attach { display: flex; flex-direction: column; gap: 0.5rem; }
.adm-file-btn { align-self: flex-start; cursor: pointer; }
.adm-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.adm-file-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 0.8125rem;
}
.adm-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-file-size { flex: none; color: var(--text-mute); font-size: 0.75rem; }

/* 页面公告横幅（发到具体页面的公告显示在页面顶部） */
.pg-notice {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pg-notice-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-dim);
  font-size: 0.875rem;
}
.pg-notice-item.is-warn { border-left-color: #d97706; }
.pg-notice-item.is-danger { border-left-color: #b42318; }
.pg-notice-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pg-notice-text strong { color: var(--text); font-size: 0.9375rem; }
.pg-notice-text span { line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.pg-notice-x {
  flex: none;
  border: 0;
  background: none;
  color: var(--text-mute);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}
.pg-notice-x:hover { color: var(--text); }

.tk-closed-note {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: calc(var(--radius) * 1.05);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 0.8125rem;
}

@media (max-width: 820px) {
  .tkl-head { display: none; }
  .tkl-row { grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: 0.5rem; }
  .tkl-time, .tkl-type { display: none; }
  .tkl-line { grid-template-columns: minmax(0, 1fr); }
  .tkl-label { padding-bottom: 0.25rem; }
}
.ad-table { width: 100%; border-collapse: collapse; font-size: 0.84375rem; }
.ad-table th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-mute);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.ad-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}
.ad-table tr:hover td { background: var(--bg-soft); }
.ad-mail { color: var(--text-mute); word-break: break-all; }
.ad-you { color: var(--text-mute); font-size: 0.75rem; }
.ad-act { text-align: right; white-space: nowrap; }

@media (max-width: 820px) {
  .ad-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ad-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .ad-nav-item {
    width: auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0.375rem 0.375rem 0 0;
  }
  .ad-nav-item.is-on { border-left-color: transparent; border-bottom-color: var(--ink); }
  .ad-main { overflow-x: auto; }
  .ad-table { min-width: 40rem; }
}

/* 极窄屏：工具按钮收得更紧一点 */
@media (max-width: 520px) {
  .topbar-controls { gap: 0.125rem; }
  .topbar-divider { margin: 0 0.1875rem; }
}

/* 无障碍：尊重系统的「减少动效」设置
   ⚠️ 不能简单地用 * 全禁 —— 那会把两类「功能性过渡」一起干掉：
      · 轮播切换：松手后会「啪」地瞬间跳回，看起来像坏了
      · 页面切换：会变成生硬直切
   做法：先全禁，再把这两类单独恢复；页面切换退化为纯淡入淡出（去掉位移）。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  * {
    transition: none !important;
    animation: none !important;
  }

  /* 例外 1：轮播切换 */
  .hero-track {
    transition: transform var(--car-speed) cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .hero-track.is-jumping { transition: none !important; }

  /* 例外 2：页面进场（只留淡入，不做位移） */
  .page,
  .view-anim {
    animation: viewInFade 0.22s ease both !important;
  }

  /* 例外 3：账号页背景图的交叉淡入。
     透明度变化属于「淡入淡出」，不是 reduced-motion 要抑制的位移/缩放，
     不豁免的话背景会变成硬切一张图拍上去，视觉上非常跳。
     注意：Ken Burns 的推近缩放（authStackZoom）仍然被上面的 animation:none
     关掉了 —— 那才是真正需要抑制的运动。 */
  .auth-bg-layer {
    transition: opacity 2s ease-in-out !important;
  }

  /* 例外 4：主题切换的颜色过渡。
     同样只是颜色在变，没有位移；一并豁免，否则系统开了「减少动画」的用户
     切白昼黑夜时会看到整页颜色硬闪一下。 */
  html.theme-anim,
  html.theme-anim * {
    transition:
      background-color 2s ease,
      color 2s ease,
      border-color 2s ease,
      fill 2s ease,
      stroke 2s ease,
      box-shadow 2s ease,
      opacity 2s ease,
      text-shadow 2s ease !important;
  }
}