/* ==========================================================================
   纸片人 · 养成游戏原型 -- 统一「浅蓝游戏大厅」Aqua 设计语言
   --------------------------------------------------------------------------
   设计基调（对齐 doc/pages/浅蓝游戏大厅 - 截图整合版.html，完整移植）：
   - 单一主色派生：浅蓝 / 清透 / 轻巧；所有可见颜色尽量走 CSS 变量，便于换肤
   - 按钮语言（demo .slant-btn 完整移植）：实心底色 + ::before 几何纹理层
     （斜纹/锥形高光/渐变叠层）+ ::after 扫光层（hover 从 left:-72% 滑到 128%，
     460ms ease）+ hover 上浮/提亮/加深投影 + active 下压缩放
   - 卡片语言：白色圆角卡 + 顶部渐变细条 + 柔和分层阴影
   - 窗口语言：浅色遮罩 + blur + 顶部三色渐变条圆角白卡
   - 招募页布局（demo recruit 完整移植）：顶部灵动岛数值条（week-chip/money-chip/
     resource-pill/island-btn/stage-close）+ 立项板（标题行/紧急提示条/左立绘区+
     右人物卡翻页区/底部报名状态与操作）
   --------------------------------------------------------------------------
   手机端铁律：
   - viewport-fit=cover 保证刘海屏顶格显示（见 index.html meta）
   - UI 文字一律固定 rem，禁止按屏宽 vw 动态放大；两方向字号基准不变
   - 竖屏/横屏各一套 @media，同方向切换默认只改排布/间距
   - 例外：竖屏下正文/选项/按钮/面板标题会**统一抬一档字号**（手机可视距更远、字面更小），
     该覆盖集中在文件末尾「竖屏 · 字号统一抬升」段；横屏/桌面一字不动
   - 悬浮/按钮/toast 用 env(safe-area-inset-*) 避开刘海/圆角
   --------------------------------------------------------------------------

   z-index 全局分层（避免互相遮盖）：
     1    #game 游戏画布
     10   .hud  HUD / 波次提示 / 全局面板 + #btn-train 开始训练入口
     80   #training 玩法界面（训练）
     95   #fx-canvas 全局特效层（点击/移动特效，所有界面生效）
     90   #menu 主菜单（低于特效层，主菜单上也能看到点击特效）
     100  #loading 强制加载
     120  #transition 全局转场黑幕（进入游戏渐入/渐出）
     200  全局 toast / 崩溃层（预留）
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 安卓 Chrome 点击全屏元素（如 canvas）时默认 tap-highlight 是一层灰蓝色
     遮罩，盖满被点元素 = 全屏闪蓝。全局关闭，反馈交给 FX 点击特效。 */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* ============================================================
   Aqua 设计 Token -- 统一换肤入口
   ============================================================ */
:root {
  /* ---------- 品牌基础：浅蓝、清透、轻巧 ---------- */
  --aqua-background: #e7f7ff;
  --aqua-foreground: #17324d;
  --aqua-card: #ffffff;
  --aqua-card-foreground: #17324d;
  --aqua-popover: #ffffff;
  --aqua-popover-foreground: #17324d;
  --aqua-primary: #4fb7ee;
  --aqua-primary-foreground: #ffffff;
  --aqua-muted: #dff3fc;
  --aqua-muted-foreground: #6d8aa2;
  --aqua-border: #b8e5f7;
  --aqua-input: #c9ebf8;
  --aqua-ring: #2fa4df;

  /* ---------- 单一主色派生 ---------- */
  --aqua-primary-soft: #d5f2ff;
  --aqua-primary-deep: #2789c4;
  --aqua-surface: #f8fdff;
  --aqua-surface-2: #edf9ff;
  --aqua-surface-3: #d9f1fb;
  --aqua-line: #b8e5f7;
  --aqua-ink-2: #58758e;
  --aqua-ink-3: #8aa6ba;

  /* ---------- 轻量状态色（仅真实状态提示用） ---------- */
  --aqua-success: #53b98d;
  --aqua-warning: #f2b84b;
  --aqua-error: #e66b7a;

  /* ---------- 辅色：粉（招募/选中/女性角色点缀） ---------- */
  --aqua-pink: #ff7eb3;
  --aqua-pink-deep: #e86a9d;
  --aqua-pink-soft: #ffe3f2;

  /* ---------- 辅色：紫（主菜单右上角功能入口：成就 / 排行榜）----------
     2026-09-17 新增。与主色青蓝构成主次关系：开始游戏走青蓝，次级入口走紫。 */
  --aqua-purple: #a78bfa;
  --aqua-purple-deep: #7c5ce0;
  --aqua-purple-soft: #ece5ff;

  /* ---------- 卡片、按钮、阴影 ---------- */
  --aqua-radius-sm: 6px;
  --aqua-radius-md: 12px;
  --aqua-radius-lg: 18px;
  --aqua-radius-xl: 24px;
  --aqua-radius-pill: 999px;
  --shadow-soft: 0 10px 24px -22px rgba(23, 50, 77, 0.38);
  --shadow-card: 0 14px 28px -26px rgba(23, 50, 77, 0.30);
  --shadow-float: 0 18px 42px -34px rgba(23, 50, 77, 0.35);

  /* ---------- 字体 ---------- */
  --font-main: "HarmonyOS Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: "DIN Alternate", "Bahnschrift", "Arial", sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--aqua-background), var(--aqua-surface-2));
  font-family: var(--font-main);
  color: var(--aqua-foreground);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  font-size: 16px;       /* 固定根字号：UI 一律用 rem，不随屏宽缩放 */
}

button { font-family: inherit; color: inherit; }

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  cursor: pointer;
  touch-action: none;    /* 移动端点击不触发滚动/缩放 */
  z-index: 1;
}

/* 全局特效层：点击/移动特效，所有界面通用，不拦截交互 */
#fx-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 95;
}

/* ---------- HUD（后续养成 UI 的容器） ---------- */
.hud {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left, 0px));
  top: calc(14px + env(safe-area-inset-top, 0px));
  pointer-events: none;   /* 不挡点击，后续交互面板单独开启 */
  z-index: 10;
}

.hud-tip {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--aqua-border);
  color: var(--aqua-ink-2);
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--aqua-radius-md);
  box-shadow: var(--shadow-soft);
}

.hud-state {
  margin-top: 0.5rem;
  color: var(--aqua-ink-3);
  font-size: 0.75rem;
}

/* ============================================================
   主界面流程 -- 强制加载 & 等待主菜单
   ============================================================ */
.screen {
  position: fixed;
  inset: 0;
  overflow: hidden;       /* 横屏裁掉下方超出，保证一屏全可见 */
  transition: opacity 0.5s ease;
  opacity: 1;
}

/* ---------- 强制加载界面 ---------- */
.loading {
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(79, 183, 238, 0.22), transparent 32%),
    radial-gradient(circle at 90% 92%, rgba(255, 126, 179, 0.10), transparent 26%),
    linear-gradient(135deg, var(--aqua-background), var(--aqua-surface-2));
}

.load-inner {
  text-align: center;
  width: min(80vw, 20rem);
}

.load-bar {
  height: 0.7rem;
  border-radius: var(--aqua-radius-pill);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 3px rgba(40, 90, 130, 0.18);
  overflow: hidden;
  padding: 2px;
}

/* 彩条加载条：按钮同款「线段填充」质感（斜向线段纹理叠加在主色渐变上） */
.load-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--aqua-radius-pill);
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.22) 8px 9px, transparent 9px 17px),
    linear-gradient(90deg, #5ba9f5, #6fc3ff, #ff9f45);
  box-shadow: 0 0 8px rgba(150, 200, 255, 0.45);
  transition: width 0.25s ease;
}

.load-text {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--aqua-ink-3);
}

/* ---------- 等待主菜单 ---------- */
.menu {
  z-index: 90;
  background:
    radial-gradient(circle at 16% 12%, rgba(79, 183, 238, 0.22), transparent 30%),
    radial-gradient(circle at 92% 96%, rgba(230, 107, 122, 0.12), transparent 24%),
    radial-gradient(circle at 79% 64%, rgba(230, 107, 122, 0.10) 0 7%, transparent 7.6%),
    radial-gradient(circle at 58% 24%, rgba(242, 184, 75, 0.12) 0 5%, transparent 5.6%),
    radial-gradient(circle at 10% 75%, rgba(83, 185, 141, 0.14) 0 6%, transparent 6.6%),
    linear-gradient(32deg, transparent 0 72%, rgba(255, 255, 255, 0.55) 72% 74%, transparent 74%),
    linear-gradient(155deg, transparent 0 14%, rgba(79, 183, 238, 0.10) 14% 20%, transparent 20% 100%),
    linear-gradient(135deg, var(--aqua-background), var(--aqua-surface-2));
}

/* 细网格底纹（demo .aqua-stage::after 同款） */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.40) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* 视觉层（纸片人动画画布）不拦截 UI 点击 */
#menu-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.menu-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120% 70% at 50% 16%, rgba(255, 255, 255, 0) 42%, rgba(205, 238, 255, 0.45) 100%);
}

/* 内容层 pointer-events:none -> 点击穿透到 #menu，全屏任意位置可进游戏 */
.menu-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding: 0 6vw 6vh;
}

/* 标题：白色大字 + 大号深蓝描边（8 向实心描边） */
.menu-title {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #ffffff;
  text-shadow:
    -2px -2px 0 var(--aqua-primary-deep), 2px -2px 0 var(--aqua-primary-deep),
    -2px 2px 0 var(--aqua-primary-deep), 2px 2px 0 var(--aqua-primary-deep),
    -2px 0 0 var(--aqua-primary-deep), 2px 0 0 var(--aqua-primary-deep),
    0 -2px 0 var(--aqua-primary-deep), 0 2px 0 var(--aqua-primary-deep),
    0 8px 16px rgba(40, 90, 140, 0.35);
}

/* 标题入场动画：duang 弹出（一次顺滑放大回弹，无中途卡顿） */
.menu-title-in {
  animation: title-duang 0.55s cubic-bezier(0.2, 1.1, 0.3, 1);
  transform-origin: center;
}
@keyframes title-duang {
  0% { transform: scale(0.55); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  78% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* 标题图：等比缩放 + 柔和投影 */
.menu-title-img {
  display: block;
  margin: 0 auto;
  max-width: 78vw;
  max-height: 52vh;
  height: auto;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(40, 90, 140, 0.4));
}

.menu-sub {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  letter-spacing: 0.35em;
  color: var(--aqua-primary-deep);
  font-weight: 700;
  /* 白色底衬，保证在浅蓝背景上清晰可见 */
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: var(--aqua-radius-pill);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(23, 50, 77, 0.12);
}

/* 开始游戏按钮：蓝色实心圆角胶囊（柔和）+ 线段纹理 + 扫光动效 */
.menu-start-btn {
  --btn-geo: rgba(255, 255, 255, 0.24);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.9rem;
  padding: 0.75rem 2.6rem;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  border: none;
  border-radius: var(--aqua-radius-pill);
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  box-shadow: 0 16px 26px -18px rgba(23, 50, 77, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  /* menu-inner 是 pointer-events:none，按钮需恢复可点 */
  pointer-events: auto;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}
.menu-start-btn::before,
.menu-corner-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 38%),
    repeating-linear-gradient(135deg, transparent 0 9px, var(--btn-geo) 9px 10px, transparent 10px 18px),
    conic-gradient(from 45deg at 18% 50%, rgba(255, 255, 255, 0.18) 0 25%, transparent 0 100%),
    conic-gradient(from 225deg at 84% 52%, rgba(255, 255, 255, 0.16) 0 25%, transparent 0 100%);
  opacity: 0.86;
}
.menu-start-btn::after,
.menu-corner-btn::after {
  content: "";
  position: absolute;
  top: -36%;
  left: -72%;
  width: 48%;
  height: 172%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  transform: rotate(18deg);
  transition: left 460ms ease;
  pointer-events: none;
}
.menu-start-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 30px -18px rgba(23, 50, 77, 0.68), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.menu-start-btn:hover::after,
.menu-corner-btn:hover::after { left: 128%; }
.menu-start-btn:active { transform: translateY(1px) scale(0.985); }

/* 主菜单右上角功能入口（2026-09-17）：成就 / 排行榜。
   底图几何纹与「开始游戏」**共用同一套** ::before / ::after（见上面两条选择器），
   这里只把底色换成紫、缩小尺寸、固定到右上角 —— 保证「同款底图」而不复制一份配方。
   右上角定位走 safe-area，避免被刘海/圆角裁掉。 */
.menu-corner {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top, 0px));
  right: max(0.9rem, env(safe-area-inset-right, 0px));
  z-index: 4;
  display: flex;
  gap: 0.55rem;
  pointer-events: none;          /* 容器不挡点击，按钮各自恢复可点 */
}
.menu-corner-btn {
  --btn-geo: rgba(255, 255, 255, 0.26);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.48rem 1.1rem;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  border: none;
  border-radius: var(--aqua-radius-pill);
  background: linear-gradient(135deg, var(--aqua-purple), var(--aqua-purple-deep));
  box-shadow: 0 14px 22px -18px rgba(23, 50, 77, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  /* 与 .menu-start-btn 同款：容器是 pointer-events:none，按钮需恢复可点 */
  pointer-events: auto;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}
.menu-corner-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 26px -18px rgba(23, 50, 77, 0.68), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.menu-corner-btn:active { transform: translateY(1px) scale(0.985); }

.menu-foot {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--aqua-ink-3);
  pointer-events: none;
}

.menu.hide,
.loading.hide {
  display: none;
}

/* ---------- 全局转场黑幕 ---------- */
#transition {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 120;
  transition: opacity 0.3s ease;
}

/* ============================================================
   主场景「开始训练」入口 + 玩法界面
   ============================================================ */

/* 右下角开始训练按钮（demo recruit-btn 同款：粉实心 + 几何纹理 + 扫光） */
.btn-train {
  --btn-geo: rgba(255, 255, 255, 0.24);
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  padding: 0.7rem 1.7rem;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  border: none;
  /* demo .slant-btn 斜切平行四边形 */
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #ff9ad5, #ff7eb3 55%, #ff9ad5);
  animation: train-breathe 2.4s ease-in-out infinite;
  transition: filter 180ms ease;
}
.btn-train:hover { filter: brightness(1.04); }
.btn-train:active { transform: translateY(1px) scale(0.985); }

@keyframes train-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.04); }
}

/* 玩法界面（训练）-- Aqua 舞台背景（对齐 demo .aqua-stage：浅蓝渐变 + 斜切带 + 锥形色角 + 细网格） */
.training {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.55), rgba(223, 243, 252, 0.4)),
    linear-gradient(135deg, var(--aqua-background), var(--aqua-surface-2));
}
.training::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(32deg, transparent 0 72%, rgba(255, 255, 255, 0.62) 72% 74%, transparent 74%),
    radial-gradient(circle at 10% 75%, rgba(83, 185, 141, 0.15) 0 6%, transparent 6.4%),
    radial-gradient(circle at 79% 64%, rgba(230, 107, 122, 0.12) 0 7%, transparent 7.4%),
    radial-gradient(circle at 58% 24%, rgba(242, 184, 75, 0.13) 0 5%, transparent 5.4%),
    linear-gradient(155deg, transparent 0 14%, rgba(79, 183, 238, 0.10) 14% 20%, transparent 20% 100%);
}
.training::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    conic-gradient(from 45deg at 14% 22%, rgba(83, 185, 141, 0.16) 0 25%, transparent 0 100%),
    conic-gradient(from 225deg at 91% 83%, rgba(242, 184, 75, 0.16) 0 25%, transparent 0 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.38) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}

/* 右上角备用操作条（玩法 HUD 接管后隐藏；保留作渲染失败兜底） */
.train-topbar {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--aqua-radius-pill);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.train-topbar[hidden] { display: none !important; }

.train-btn {
  min-width: 3rem;
  height: 2.4rem;
  padding: 0 0.9rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--aqua-primary-deep);
  background: rgba(213, 242, 255, 0.72);
  border: 1px solid rgba(184, 229, 247, 0.86);
  border-radius: var(--aqua-radius-pill);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.train-btn:hover { transform: translateY(-1px); background: rgba(213, 242, 255, 0.94); }
.train-btn:active { transform: scale(0.94); }
.train-btn-close {
  min-width: 2.4rem;
  padding: 0;
  color: var(--aqua-pink);
  background: rgba(255, 235, 244, 0.72);
  border-color: rgba(255, 154, 213, 0.5);
}

/* 主体占位卡（玩法未启动时） */
.train-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.5rem 1.5rem;
}
#train-body[hidden] { display: none !important; }

.train-card {
  position: relative;
  max-width: 22rem;
  width: 100%;
  padding: 1.4rem 1.6rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(79, 183, 238, 0.05) 13px 15px, transparent 15px 26px),
    rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.78);
  border-radius: var(--aqua-radius-lg);
  box-shadow: var(--shadow-float);
  text-align: center;
  overflow: hidden;
}
.train-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-soft), rgba(242, 184, 75, 0.55));
}

.train-card-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  letter-spacing: 0.16em;
  margin-bottom: 0.8rem;
}

.train-card-text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--aqua-ink-2);
}

/* ---------- 二级弹窗（说明 / 菜单）：Aqua 模态窗口 ---------- */
.train-pop {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 50, 77, 0.18);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.train-pop[hidden] { display: none !important; }

.pop-card {
  position: relative;
  width: min(84vw, 20rem);
  max-height: 78vh;
  overflow-y: auto;
  padding: 1.2rem 1.4rem 1.1rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--aqua-radius-xl);
  box-shadow: 0 30px 70px -42px rgba(23, 50, 77, 0.62);
  text-align: center;
}
.pop-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-soft), rgba(242, 184, 75, 0.55));
}

.pop-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  letter-spacing: 0.2em;
  margin-bottom: 0.9rem;
}

.pop-body {
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--aqua-ink-2);
  text-align: left;
  margin-bottom: 0.9rem;
}

.pop-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.pop-label {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--aqua-ink-2);
}

.pop-range {
  flex: 1;
  accent-color: var(--aqua-pink);
  height: 1.6rem;
}

.pop-sec-title {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--aqua-ink-3);
  letter-spacing: 0.1em;
  margin: 0.1rem 0 0.5rem;
}

.pop-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aqua-border), transparent);
  margin: 0.95rem 0 0.85rem;
}

.pop-tip {
  font-size: 0.7rem;
  color: var(--aqua-ink-3);
  line-height: 1.5;
  margin: 0.45rem 0 0.15rem;
}

/* ============================================================
   手机端双 @media：默认只改排布/间距；竖屏的字号统一抬升见文件末尾专段
   ============================================================ */
@media (orientation: portrait) {
  .menu-inner { justify-content: center; }
}
@media (orientation: landscape) {
  .menu-inner { justify-content: center; }
  .menu-sub { letter-spacing: 0.28em; }
}

/* ============================================================
   大模型研发养成玩法（Aqua · demo 完整移植版）
   ============================================================ */
.devgame {
  position: absolute;
  inset: 0;
  z-index: 1;   /* 必须在右上角按钮(z2)/左下角头像(z2)之下 */
  overflow: hidden;
}
.devgame-render {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 0.8rem 0.9rem calc(2rem + env(safe-area-inset-bottom, 0px));
  scroll-behavior: smooth;
}
.devgame-render::-webkit-scrollbar { width: 5px; }
.devgame-render::-webkit-scrollbar-thumb { background: rgba(79, 183, 238, 0.35); border-radius: 99px; }

/* 决策后「训练时间流逝」动画：全屏遮罩 + 动态时间轴 + 立绘轮播 PPT + 齿轮转动 + 模型训练中 */
.dg-train-anim {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(40, 76, 138, 0.96), rgba(18, 38, 82, 0.97) 55%, rgba(8, 16, 44, 0.98)),
    linear-gradient(160deg, rgba(20, 44, 96, 0.9), rgba(10, 22, 56, 0.96));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: dg-train-fadein 0.35s ease;
}
@keyframes dg-train-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
.dg-train-inner {
  width: min(640px, 92vw);
  padding: 1.3rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* 动态时间轴（放大版：占满整行、醒目如标题） */
.dg-tl { width: 100%; }
.dg-tl-track { position: relative; height: 2.8rem; }
.dg-tl-line {
  position: absolute;
  left: 0; right: 0; top: 0.95rem;
  height: 5px;
  border-radius: 4px;
  background: rgba(150, 200, 255, 0.24);
  box-shadow: 0 0 14px rgba(95, 211, 255, 0.25);
}
.dg-tl-fill {
  position: absolute;
  left: 0; top: 0.95rem;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #5fd3ff, #9ae6ff, #ffe08a);
  box-shadow: 0 0 18px rgba(95, 211, 255, 0.85);
  transition: width 120ms linear;
}
.dg-tl-dot {
  position: absolute;
  top: 0.62rem;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(95, 211, 255, 0.4), 0 0 26px #5fd3ff;
  transition: left 120ms linear;
}
.dg-tl-mark { position: absolute; top: 0.95rem; width: 2px; height: 13px; background: rgba(150, 200, 255, 0.55); transform: translateX(-50%); }
.dg-tl-mark span {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: rgba(205, 225, 255, 0.82);
  white-space: nowrap;
  font-weight: 700;
}
/* 首尾刻度的标签贴边对齐，避免 translateX(-50%) 把一半文字顶出轨道外（BUG 修复 2026-08-29） */
.dg-tl-mark:first-child span { left: 0; transform: none; }
.dg-tl-mark:last-child span { left: auto; right: 0; transform: none; }
.dg-tl-mark.is-end { background: #ffe08a; height: 16px; }
.dg-tl-mark.is-end span { color: #ffe08a; font-weight: 800; }
.dg-tl-dates { margin-top: 2rem; display: flex; align-items: baseline; justify-content: center; gap: 1rem; }
.dg-tl-now {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ffe08a;
  font-family: var(--font-num);
  letter-spacing: 0.05em;
  text-shadow: 0 0 18px rgba(255, 224, 138, 0.45);
}
.dg-tl-week { margin-top: 0.3rem; font-size: 0.92rem; color: rgba(205, 225, 255, 0.88); letter-spacing: 0.1em; }
.dg-tl-week b { color: #fff; font-weight: 900; }

/* 立绘轮播（PPT） */
.dg-train-stage {
  position: relative;
  width: min(300px, 60vw);
  height: min(300px, 50vh);
  flex: 0 0 auto;
}
.dg-train-stage-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.95) translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}
.dg-train-stage-img.active { opacity: 1; transform: scale(1) translateY(0); }

/* 底部「模型训练中」+ 齿轮 + 呼吸点 */
.dg-train-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #d8ecff;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
}
.dg-train-label .dg-ic { color: #ffd97a; animation: dg-gear-spin 1.15s linear infinite; }
@keyframes dg-gear-spin { to { transform: rotate(360deg); } }
.dg-train-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #7df3c0;
  box-shadow: 0 0 8px rgba(125, 243, 192, 0.8);
  animation: dg-blink 0.85s ease-in-out infinite;
}
@keyframes dg-blink { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } }

/* 窄屏/竖屏：时间轴刻度与立绘尺寸自适应 */
@media (max-width: 520px) {
  .dg-train-anim { align-items: flex-start; padding-top: 10vh; }
  .dg-train-inner { width: 94vw; gap: 0.9rem; }
  .dg-tl-mark span { font-size: 0.5rem; }
  .dg-train-stage { width: 62vw; height: 46vh; }
}

/* ---- 灵感爆发（训练动画交互层，08 设计文档 §7.2） ---- */
.dg-spark-hint {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffe08a;
  letter-spacing: 0.06em;
  text-shadow: 0 0 14px rgba(255, 224, 138, 0.4);
}
.dg-spark-row { display: flex; gap: 0.9rem; justify-content: center; }
.dg-spark-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid rgba(184, 229, 247, 0.35);
  border-radius: var(--aqua-radius-lg, 18px);
  background: rgba(255, 255, 255, 0.08);
  cursor: default;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.dg-spark-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(184, 229, 247, 0.4);
  filter: grayscale(0.6);
  transition: filter 200ms ease;
}
.dg-spark-emoji { font-size: 1.7rem; filter: grayscale(0.6); transition: filter 200ms ease; }
.dg-spark-name { font-size: 0.72rem; font-weight: 800; color: rgba(205, 225, 255, 0.85); }
/* 发光态：一次性入场渐变 + 呼吸。不用无限 transform 动画做脉冲
   （曾导致发光前不可点、且移动端不断触发重排），点击与发光解耦。 */
@keyframes dg-spark-glow {
  from { border-color: rgba(184, 229, 247, 0.35); background: rgba(255, 255, 255, 0.08); box-shadow: none; }
  to   { border-color: #ffe08a; background: rgba(255, 224, 138, 0.14); box-shadow: 0 0 18px rgba(255, 224, 138, 0.5); }
}
.dg-spark-card.lit {
  cursor: pointer;
  animation: dg-spark-glow 0.4s ease both;
}
.dg-spark-card.lit .dg-spark-avatar,
.dg-spark-card.lit .dg-spark-emoji { filter: none; }
.dg-spark-card.lit .dg-spark-name { color: #ffe08a; }
@keyframes dg-spark-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.dg-spark-card.dg-spark-used {
  animation: none;
  border-color: rgba(184, 229, 247, 0.35);
  background: rgba(255, 255, 255, 0.05);
  cursor: default;
  opacity: 0.65;
}
.dg-spark-float {
  position: absolute;
  left: 50%; top: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 900;
  color: #ffe08a;
  text-shadow: 0 0 12px rgba(255, 224, 138, 0.6);
  pointer-events: none;
  animation: dg-spark-rise 1.3s ease forwards;
}
@keyframes dg-spark-rise {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -30px); }
}

/* 训练动画「跳过」按钮（右下角，随时可点立即结算） */
.dg-train-skip {
  align-self: flex-end;
  padding: 0.32rem 0.85rem;
  border: 1px dashed rgba(205, 225, 255, 0.45);
  border-radius: var(--aqua-radius-pill, 999px);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(205, 225, 255, 0.85);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.dg-train-skip:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ============================================================
   主布局壳：顶部灵动岛(整行居中) + 左数值侧栏(Y轴居中) + 右侧内容
   ============================================================ */
.dg-stage {
  display: grid;
  grid-template-columns: 9.2rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  width: 100%;
}
.dg-main { min-width: 0; }
.dg-main-body { min-width: 0; }

/* 左侧数值侧栏：品牌~稳定，从上到下，各带数值条；与右侧模块顶部平齐 */
.dg-side-stats {
  align-self: start;        /* 与右侧模块顶部平齐 */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.78);
  border-radius: var(--aqua-radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.7rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
}
.dg-side-title {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;   /* 文本还原为左对齐 */
}
.dg-side-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.dg-side-label {
  font-size: 0.62rem;
  color: var(--aqua-ink-2);
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;   /* 文本还原为左对齐 */
}
.dg-side-val {
  font-size: 0.66rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  font-family: var(--font-num);
  text-align: left;   /* 文本还原为左对齐 */
}
/* 品牌星级：金色醒目 */
.dg-side-stats .dg-side-row:first-of-type .dg-side-val {
  color: #f2a93b;
  letter-spacing: 0.06em;
}
/* 数值条：按「阶段上限」归一，条上带该阶段评审达标线刻度（2026-08-28） */
.dg-side-bar {
  position: relative;      /* 达标线刻度定位参照 */
  height: 7px;
  border-radius: 99px;
  background: #e9f0f7;
  overflow: hidden;
}
.dg-side-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fc3ff, var(--aqua-primary-deep));
  transition: width 0.35s ease;
}
/* 达标线刻度：白色竖线（未达标）/ 金色竖线（已达标），带深色描边保证浅底可见 */
.dg-side-mark {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(23, 58, 84, 0.45);
  pointer-events: none;
}
.dg-side-mark.ok { background: #ffcf3d; box-shadow: 0 0 0 1px rgba(140, 88, 0, 0.55); }
/* 达标状态提示：未达标显示"还差多少"，达标显示 ✓ */
.dg-side-num {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 900;
  color: var(--aqua-ink-1, #173a54);
  font-family: var(--font-num);
}
.dg-side-num i { font-style: normal; font-weight: 600; opacity: 0.5; font-size: 0.9em; }
.dg-side-num.ok { color: #1f9d55; }
.dg-side-goal {
  font-size: 0.56rem;
  font-weight: 700;
  color: #b0757a;
  letter-spacing: 0.02em;
}
.dg-side-goal.ok { color: #1f9d55; }

/* ---- 教学弹窗：鲸鱼娘立绘 + 气泡说明（2026-08-28）---- */
.dg-tut {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dg-tut-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dg-tut-port {
  width: 3.2rem;
  height: 3.2rem;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(214, 240, 253, 0.7);
  border: 2px solid rgba(184, 229, 247, 0.9);
  padding: 2px;
  animation: dgTutBob 2.6s ease-in-out infinite;
}
@keyframes dgTutBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.dg-tut-who {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--aqua-primary-deep);
  display: flex;
  align-items: center;
  gap: 4px;
}
.dg-tut-bubble {
  position: relative;
  background: #f4fbff;
  border: 1px solid rgba(184, 229, 247, 0.95);
  border-radius: var(--aqua-radius-md);
  padding: 0.65rem 0.75rem;
}
.dg-tut-bubble::before {   /* 气泡小尖角，指向立绘 */
  content: "";
  position: absolute;
  left: 1.5rem;
  top: -7px;
  width: 12px;
  height: 12px;
  background: #f4fbff;
  border-left: 1px solid rgba(184, 229, 247, 0.95);
  border-top: 1px solid rgba(184, 229, 247, 0.95);
  transform: rotate(45deg);
}
.dg-tut-title {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  margin-bottom: 0.3rem;
}
.dg-tut-bubble p {
  font-size: 0.72rem;
  line-height: 1.7;
  color: #37556d;
  margin: 0 0 0.35rem;
}
.dg-tut-bubble p:last-child { margin-bottom: 0; }
.dg-tut-bubble b { color: var(--aqua-primary-deep); }

/* ---- 说明面板：随时可查的简要说明 ---- */
.dg-help { max-width: 34rem; display: flex; flex-direction: column; }
.dg-help-goal {
  font-size: 0.72rem;
  line-height: 1.65;
  color: #37556d;
  background: linear-gradient(90deg, rgba(255, 240, 194, 0.6), rgba(226, 246, 255, 0.6));
  border: 1px solid rgba(255, 207, 61, 0.5);
  border-radius: var(--aqua-radius-md);
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.3rem;
}
.dg-help-goal b { color: #a0641a; }
.dg-help-body {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dg-help-sec {
  background: rgba(244, 251, 255, 0.75);
  border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: var(--aqua-radius-md);
  padding: 0.45rem 0.6rem;
}
.dg-help-sec-title {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  margin-bottom: 0.2rem;
}
.dg-help-sec p {
  font-size: 0.66rem;
  line-height: 1.7;
  color: #4a6a83;
  margin: 0;
}
.dg-help-sec b { color: var(--aqua-primary-deep); }

/* ==========================================================================
   全局过渡动画体系（用户 2026-08-29：消除硬切 / 闪屏，做到手机 UI 那种丝滑）
   --------------------------------------------------------------------------
   三条规则：
   1. 页面级切换 → 新内容淡入 + 轻微上移（dgPageIn），阶段变化时才播
   2. 同屏内的局部更新（打卡 / 选微调 / 翻页 / 展开选人行）→ 不重播页面动画，避免抖动
   3. 任何覆盖层（训练动画 / 模态）离场都要先淡出再移除，不许 opacity 直接归零
   缓动统一 cubic-bezier(0.22, 1, 0.36, 1)：起步快、收尾稳，接近 iOS 的系统曲线。
   ========================================================================== */
@keyframes dgPageIn {
  from { opacity: 0; transform: translateY(10px) scale(0.994); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dg-page-in {
  animation: dgPageIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}
/* 列表项逐个错峰入场（报告页 / 行动卡 / 候选卡），比整块淡入更有层次 */
@keyframes dgRiseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dg-rise > * { animation: dgRiseIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
.dg-rise > *:nth-child(1) { animation-delay: 0.02s; }
.dg-rise > *:nth-child(2) { animation-delay: 0.06s; }
.dg-rise > *:nth-child(3) { animation-delay: 0.10s; }
.dg-rise > *:nth-child(4) { animation-delay: 0.14s; }
.dg-rise > *:nth-child(5) { animation-delay: 0.18s; }
.dg-rise > *:nth-child(6) { animation-delay: 0.21s; }
.dg-rise > *:nth-child(n+7) { animation-delay: 0.24s; }

/* 覆盖层离场：先淡出再移除（训练动画遮罩） */
@keyframes dgFadeOut { to { opacity: 0; } }
.dg-train-anim.dg-anim-out { animation: dgFadeOut 0.26s ease forwards; pointer-events: none; }

/* 模态离场：与进场对称，避免"啪"地消失 */
@keyframes dgModalOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: scale(0.97); }
}
.dg-modal-mask.dg-modal-out {
  animation: dgModalOut 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

/* 尊重系统的"减弱动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .dg-page-in, .dg-rise > * { animation: none !important; }
  .dg-train-anim.dg-anim-out, .dg-modal-mask.dg-modal-out { animation-duration: 0.01s; }
}

/* ==========================================================================
   ④ 工作间（P1，用户 2026-08-29 对标《游戏发展国》）
   没有场景和像素小人 → 用「卡片燃烧 + 气泡台词 + 点击飘字 + 实时数值条」撑演出。
   火焰色 --flame 按工程师类型区分，卡片在燃烧时持续脉动。
   ========================================================================== */
.dg-wk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.4rem 0.9rem;
  padding: 0.5rem 0.6rem;
  background: rgba(244, 251, 255, 0.8);
  border: 1px solid rgba(184, 229, 247, 0.85);
  border-radius: var(--aqua-radius-md);
  margin-bottom: 0.65rem;
}
.dg-wk-stat { display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; }
.dg-wk-stat-label { flex: 0 0 2.1rem; font-weight: 800; color: var(--aqua-ink-2); }
.dg-wk-stat-track {
  position: relative;
  flex: 1;
  height: 0.62rem;
  background: #e9f0f7;
  border-radius: 99px;
  overflow: hidden;
}
.dg-wk-stat-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6fc3ff, var(--aqua-primary-deep));
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.dg-wk-stat-val {
  flex: 0 0 3.4rem;
  text-align: right;
  font-family: var(--font-num);
  font-weight: 800;
  color: var(--aqua-primary-deep);
}
.dg-wk-stat-val i { font-style: normal; opacity: 0.5; font-size: 0.85em; font-weight: 600; }
.dg-wk-stat.ok .dg-wk-stat-val { color: #1f9d55; }

.dg-wk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.dg-work-card {
  --flame: 255, 170, 70;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0.55rem 0.5rem 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(var(--flame), 0.5);
  border-radius: var(--aqua-radius-lg);
  animation: dgWorkBurn 1.25s ease-in-out infinite;
}
.dg-work-card.dg-type-pretrain { --flame: 255, 170, 70; }
.dg-work-card.dg-type-post     { --flame: 255, 130, 175; }
.dg-work-card.dg-type-data     { --flame: 120, 215, 150; }
.dg-work-card.dg-type-academic { --flame: 195, 150, 255; }
.dg-work-card.dg-work-done { animation: none; filter: grayscale(0.55); opacity: 0.7; }

@keyframes dgWorkBurn {
  0%, 100% {
    border-color: rgba(var(--flame), 0.5);
    box-shadow: 0 0 10px -2px rgba(var(--flame), 0.45), inset 0 0 18px -12px rgba(var(--flame), 0.6);
  }
  50% {
    border-color: rgba(var(--flame), 0.9);
    box-shadow: 0 0 24px 1px rgba(var(--flame), 0.7), inset 0 0 28px -10px rgba(var(--flame), 0.85);
  }
}

/* 工作气泡：带朝下的小尖角，每次换词重播淡入上浮 */
.dg-work-bubble {
  position: relative;
  min-height: 1.6rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #37556d;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: 0.6rem;
}
.dg-work-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid rgba(184, 229, 247, 0.9);
  border-bottom: 1px solid rgba(184, 229, 247, 0.9);
  transform: rotate(45deg);
}
.dg-work-bubble.show { animation: dgBubbleIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dgBubbleIn {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.dg-work-hit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  padding: 0.35rem 0.3rem;
  background: linear-gradient(160deg, #fffaf2, #ffe9cc);
  border: 1.5px solid rgba(var(--flame), 0.55);
  border-radius: var(--aqua-radius-md);
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.12s ease;
}
.dg-work-hit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 16px -9px rgba(23, 50, 77, 0.5); }
.dg-work-hit:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.dg-work-hit:disabled { cursor: default; opacity: 0.72; }
.dg-work-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--flame), 0.55);
  background: #fff;
}
.dg-work-name { font-size: 0.78rem; font-weight: 900; color: var(--aqua-primary-deep); }
.dg-work-type { font-size: 0.58rem; color: var(--aqua-ink-2); }
.dg-work-left { font-size: 0.6rem; font-weight: 800; color: #b0757a; font-family: var(--font-num); }
.dg-work-left b { color: #e07a3f; font-size: 0.74rem; }

/* 点击飘字：普通绿色 / 暴击金色更大 */
.dg-work-float {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 900;
  font-family: var(--font-num);
  color: #1f9d7a;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.95);
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
  animation: dgWorkFloat 0.95s ease-out forwards;
}
.dg-work-float.crit { color: #f2a93b; font-size: 0.98rem; }
/* 轴产出飘字（doc/27 §5）：颜色由 JS 内联给（取自 AXES.DEF[*].color，不另建色表），
   这里只加一层白色描边，保证在浅色背景/头像上也立得住 */
.dg-work-float.ax { text-shadow: 0 1px 6px rgba(255, 255, 255, 0.98), 0 0 2px rgba(255, 255, 255, 0.92); }
@keyframes dgWorkFloat {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.9); }
  25%  { opacity: 1; transform: translate(-50%, -2px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1); }
}

.dg-wk-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.dg-wk-total { margin-right: auto; font-size: 0.66rem; color: var(--aqua-ink-2); }
.dg-wk-total b { color: var(--aqua-primary-deep); font-family: var(--font-num); font-size: 0.84rem; }

@media (prefers-reduced-motion: reduce) {
  .dg-work-card { animation: none !important; }
  .dg-work-bubble.show { animation: none !important; }
  .dg-work-float { animation-duration: 0.5s; }
}

/* ==========================================================================
   模型测试：聊天框演出（P2，用户 2026-08-29）
   W4 输出乱码（抖动 + 慢打字），W8 输出正常回复 —— 前后对照就是 V1 的成长感。
   ========================================================================== */
.dg-chat {
  max-width: 30rem;
  margin: 0 auto 0.6rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 26px -20px rgba(23, 50, 77, 0.5);
}
.dg-chat-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.7rem;
  background: linear-gradient(90deg, rgba(214, 240, 253, 0.95), rgba(240, 249, 255, 0.9));
  border-bottom: 1px solid rgba(184, 229, 247, 0.85);
}
.dg-chat-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1.5px solid rgba(184, 229, 247, 0.9);
}
.dg-chat-name { font-size: 0.74rem; font-weight: 900; color: var(--aqua-primary-deep); }
.dg-chat-state { font-size: 0.6rem; color: #5c9c6a; font-weight: 700; }

.dg-chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.7rem 0.5rem;
  min-height: 5.5rem;
}
.dg-chat-msg { display: flex; }
.dg-chat-msg.me { justify-content: flex-end; }
.dg-chat-bubble {
  max-width: 78%;
  padding: 0.42rem 0.65rem;
  font-size: 0.76rem;
  line-height: 1.6;
  border-radius: 0.85rem;
  word-break: break-word;
}
.dg-chat-msg.me .dg-chat-bubble {
  background: linear-gradient(135deg, var(--aqua-primary), var(--aqua-primary-deep));
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.dg-chat-msg.ai .dg-chat-bubble {
  background: #f1f6fa;
  color: #37556d;
  border: 1px solid rgba(184, 229, 247, 0.8);
  border-bottom-left-radius: 0.25rem;
}
/* 乱码输出：等宽字体 + 抖动，一眼看出「还没学会说话」 */
.dg-chat-msg.ai.garbled .dg-chat-bubble {
  font-family: var(--font-num);
  color: #a8707a;
  letter-spacing: 0.06em;
  animation: dgGarbledShake 0.55s ease-in-out infinite;
}
@keyframes dgGarbledShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-1.5px) rotate(-0.4deg); }
  75%  { transform: translateX(1.5px) rotate(0.4deg); }
}
/* 打字中的光标 */
.dg-chat-bubble.typing::after {
  content: "▌";
  margin-left: 2px;
  animation: dgCaret 0.7s steps(1) infinite;
  color: var(--aqua-primary);
}
@keyframes dgCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.dg-chat-foot {
  padding: 0 0.7rem 0.35rem;
  font-size: 0.66rem;
  color: var(--aqua-ink-2);
  line-height: 1.6;
}
.dg-chat-who { display: block; }
.dg-chat-tip {
  margin: 0 0.7rem 0.6rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: #7a5a12;
  background: rgba(255, 240, 194, 0.65);
  border: 1px solid rgba(255, 207, 61, 0.5);
  border-radius: var(--aqua-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .dg-chat-msg.ai.garbled .dg-chat-bubble { animation: none; }
}

/* ==========================================================================
   语料条（P3 消耗品）：工作间里展示库存 / 收支 / 缺口警示 / 采购
   ========================================================================== */
.dg-corpus {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.42rem 0.6rem;
  background: rgba(248, 252, 246, 0.85);
  border: 1px solid rgba(180, 214, 178, 0.85);
  border-radius: var(--aqua-radius-md);
  margin-bottom: 0.6rem;
}
.dg-corpus.short {
  background: rgba(255, 244, 235, 0.9);
  border-color: rgba(255, 180, 120, 0.8);
}
.dg-corpus-label { font-size: 0.66rem; font-weight: 900; color: #3e7a4a; }
.dg-corpus-track {
  position: relative;
  flex: 1 1 6rem;
  min-width: 4rem;
  height: 0.6rem;
  background: #e8efe6;
  border-radius: 99px;
  overflow: hidden;
}
.dg-corpus-track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #9ed49a, #4d9e57);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dg-corpus-val {
  font-size: 0.68rem;
  font-weight: 900;
  color: #2e6b3a;
  font-family: var(--font-num);
}
.dg-corpus-val i { font-style: normal; opacity: 0.5; font-weight: 600; font-size: 0.85em; }
.dg-corpus-flow { font-size: 0.6rem; color: var(--aqua-ink-2); font-family: var(--font-num); }
.dg-corpus-warn {
  font-size: 0.6rem;
  font-weight: 800;
  color: #b4553f;
  background: #fff3ec;
  border: 1px solid #ffd3ba;
  border-radius: 99px;
  padding: 0.14rem 0.5rem;
}
.dg-corpus .dg-btn-sm { flex: 0 0 auto; }

/* ==========================================================================
   训练方案卡（P4）：架构 × 数据配方，定方向页展示
   ========================================================================== */
.dg-plan { margin-bottom: 0.65rem; }
.dg-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  margin-bottom: 0.35rem;
}
.dg-plan-lock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--aqua-ink-2);
  background: rgba(240, 249, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: 99px;
  padding: 0.12rem 0.45rem;
}
.dg-plan-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: stretch;
}
.dg-plan-card {
  background: linear-gradient(160deg, #f4fbff, #eaf5ff);
  border: 1.5px solid rgba(184, 229, 247, 0.95);
  border-radius: var(--aqua-radius-md);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.dg-plan-kind { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; color: var(--aqua-ink-2); }
.dg-plan-name { font-size: 0.84rem; font-weight: 900; color: var(--aqua-primary-deep); }
.dg-plan-proto { font-size: 0.62rem; color: #4a8ab5; font-weight: 700; }
.dg-plan-desc { font-size: 0.64rem; line-height: 1.6; color: #4a6a83; }
.dg-plan-tag {
  margin-top: auto;
  font-size: 0.58rem;
  font-weight: 800;
  color: #7a5a12;
  background: rgba(255, 240, 194, 0.7);
  border-radius: 99px;
  padding: 0.1rem 0.45rem;
  align-self: flex-start;
}
.dg-plan-x {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--aqua-ink-2);
  font-family: var(--font-num);
}
.dg-plan-x b { font-size: 0.62rem; font-weight: 800; white-space: nowrap; }
.dg-plan-x b.great { color: #1f9d7a; }
.dg-plan-x b.bad { color: #ff6b9d; }
.dg-plan-tip {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 0.62rem;
  line-height: 1.65;
  color: var(--aqua-ink-2);
  margin-top: 0.4rem;
}
.dg-dir-head {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  margin-bottom: 0.4rem;
}

/* ==========================================================================
   SFT / RM 小游戏（P5）：标注界面 + 对错反馈 + 成绩总结
   ========================================================================== */
/* 标题区（2026-09-06 补齐：此前 kicker/title 完全无样式=浏览器默认衬线黑字）。
   规范对齐 .dg-title：900 字重 / --aqua-primary-deep / 0.03em 字距；kicker 走胶囊徽标。 */
.dg-mg-kicker {
  display: inline-flex; align-items: center; gap: 0.28rem;
  width: fit-content;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em;
  color: var(--aqua-primary-deep);
  background: var(--aqua-primary-soft);
  border: 1px solid rgba(111, 195, 255, 0.45);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  margin-bottom: 0.45rem;
}
.dg-mg-kicker svg { flex-shrink: 0; }
.dg-mg-title {
  font-size: 1rem; font-weight: 900; line-height: 1.35;
  color: var(--aqua-primary-deep); letter-spacing: 0.03em;
  margin: 0 0 0.55rem;
}
.dg-mg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.dg-mg-q {
  flex: 1 1 12rem;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--aqua-primary-deep);
}
.dg-mg-dots { display: flex; align-items: center; gap: 0.3rem; }
.dg-mg-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: #dbe7f0;
  border: 1px solid rgba(184, 229, 247, 0.9);
}
.dg-mg-dot.on { background: var(--aqua-primary); border-color: var(--aqua-primary); }
.dg-mg-dot.cur { box-shadow: 0 0 0 3px rgba(111, 195, 255, 0.35); }
.dg-mg-score { font-size: 0.66rem; font-weight: 900; color: var(--aqua-primary-deep); margin-left: 0.25rem; font-family: var(--font-num); }
.dg-mg-tip {
  font-size: 0.62rem;
  font-weight: 800;
  color: #7a5a12;
  background: rgba(255, 240, 194, 0.65);
  border: 1px solid rgba(255, 207, 61, 0.5);
  border-radius: var(--aqua-radius-md);
  padding: 0.28rem 0.55rem;
  margin-bottom: 0.5rem;
}
.dg-mg-opts { display: flex; flex-direction: column; gap: 0.5rem; }
.dg-mg-opts.sft { gap: 0.45rem; }
.dg-mg-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.12s ease, box-shadow 0.12s ease;
}
.dg-mg-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--aqua-primary); box-shadow: 0 8px 18px -12px rgba(23, 50, 77, 0.55); }
.dg-mg-opt:disabled { cursor: default; }
.dg-mg-opt-tag {
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--aqua-ink-2);
}
/* 样本标签 + 理由同行（2026-09-29）：理由不再另起一行，选项作答前后等高，
   避免「下一题」被挤出 1080p 可视区。标签左、理由占满右侧剩余空间。 */
.dg-mg-opt-head { display: flex; align-items: baseline; gap: 0.5rem; }
.dg-mg-opt-head .dg-mg-opt-tag { flex: 0 0 auto; }
.dg-mg-opt-head .dg-mg-why { flex: 1 1 auto; border-top: none; padding-top: 0; }
.dg-mg-opt-text { font-size: 0.72rem; line-height: 1.7; color: #37556d; }
/* 作答后：正确绿框 / 错误红框，选中项加深 */
.dg-mg-opt.good { border-color: rgba(80, 190, 130, 0.85); background: rgba(240, 252, 245, 0.95); }
.dg-mg-opt.bad  { border-color: rgba(255, 130, 150, 0.8); background: rgba(255, 244, 246, 0.95); }
.dg-mg-opt.picked { box-shadow: 0 0 0 2.5px rgba(111, 195, 255, 0.4); }
.dg-mg-why {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--aqua-ink-2);
  border-top: 1px dashed rgba(184, 229, 247, 0.9);
  padding-top: 0.24rem;
  animation: dgBubbleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dg-mg-actions { margin-top: 0.5rem; }

/* 成绩总结屏 */
.dg-mg-summary {
  text-align: center;
  padding: 0.7rem 0.5rem 0.4rem;
}
.dg-mg-score-big {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--font-num);
  color: var(--aqua-primary-deep);
  margin-bottom: 0.35rem;
}
.dg-mg-gains {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 900;
  color: #1f9d7a;
  background: rgba(240, 252, 245, 0.9);
  border: 1px solid rgba(80, 190, 130, 0.5);
  border-radius: 99px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 0.4rem;
}
.dg-mg-note { font-size: 0.64rem; line-height: 1.7; color: var(--aqua-ink-2); }

/* ==========================================================================
   行业新闻（P6）：报纸头条样式
   ========================================================================== */
.dg-news {
  background: linear-gradient(180deg, #fffdf6, #fbf7ec);
  border: 1px solid rgba(210, 195, 150, 0.55);
  border-radius: var(--aqua-radius-md);
  overflow: hidden;
  margin-bottom: 0.55rem;
}
.dg-news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.6rem;
  font-weight: 800;
  color: #8a7a4e;
  background: rgba(240, 233, 212, 0.75);
  border-bottom: 1px dashed rgba(210, 195, 150, 0.7);
}
.dg-news-date { font-family: var(--font-num); }
.dg-news-body {
  padding: 0.5rem 0.7rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.85;
  color: #4a4638;
}
.dg-news-body div + div { margin-top: 0.15rem; }

/* ==========================================================================
   自由行动（P6）：大号图标卡（刷论文 / 学术会议 / 采购数据）
   ========================================================================== */
.dg-free-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}
.dg-free-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.22rem;
  text-align: left;
  padding: 0.65rem 0.6rem;
  background: linear-gradient(165deg, #ffffff, #f2f9ff);
  border: 1.5px solid rgba(184, 229, 247, 0.95);
  border-radius: var(--aqua-radius-lg);
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.14s ease, border-color 0.14s ease;
}
.dg-free-card:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--aqua-primary);
  box-shadow: 0 10px 22px -14px rgba(23, 50, 77, 0.55);
}
.dg-free-card:active:not(:disabled) { transform: translateY(-1px) scale(0.99); }
.dg-free-card:disabled { cursor: default; opacity: 0.62; filter: grayscale(0.4); }
.dg-free-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(23, 50, 77, 0.18));
}
.dg-free-name { font-size: 0.84rem; font-weight: 900; color: var(--aqua-primary-deep); }
.dg-free-desc { font-size: 0.6rem; line-height: 1.65; color: var(--aqua-ink-2); }
.dg-free-badge {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.56rem;
  font-weight: 800;
  color: #2e6b3a;
  background: rgba(220, 244, 226, 0.9);
  border: 1px solid rgba(140, 205, 160, 0.7);
  border-radius: 99px;
  padding: 0.12rem 0.5rem;
}
.dg-free-card.off .dg-free-badge {
  color: #8a7a4e;
  background: rgba(240, 233, 212, 0.9);
  border-color: rgba(210, 195, 150, 0.7);
}

/* ==========================================================================
   团队建设（P7）：团建/开会/1v1/奖金/培训 大卡 + 选人条
   ========================================================================== */
.dg-tb-block {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.55rem 0.55rem;
  background: rgba(250, 252, 248, 0.85);
  border: 1px solid rgba(200, 220, 190, 0.8);
  border-radius: var(--aqua-radius-md);
}
.dg-tb-head {
  font-size: 0.7rem;
  font-weight: 900;
  color: #3e6b4a;
  margin-bottom: 0.4rem;
}
.dg-tb-hint {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--aqua-ink-2);
  margin-left: 0.3rem;
}
.dg-tb-block .dg-free-card.picked {
  border-color: var(--aqua-primary);
  box-shadow: 0 0 0 2.5px rgba(111, 195, 255, 0.4);
}
.dg-tb-picker {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(240, 249, 255, 0.9);
  border: 1px dashed rgba(184, 229, 247, 0.95);
  border-radius: var(--aqua-radius-md);
  animation: dgBubbleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dg-tb-picker-label { font-size: 0.64rem; font-weight: 800; color: var(--aqua-primary-deep); }

/* ==========================================================================
   P8 阶段流转：方案选择卡 / 后训练抽卡 / 结算三收益
   ========================================================================== */
.dg-pick-block { margin-bottom: 0.6rem; }
.dg-pick-head {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  margin: 0.35rem 0;
}
.dg-pick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.45rem;
}
.dg-pick-card {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  text-align: left;
  padding: 0.45rem 0.5rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.12s ease;
}
.dg-pick-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--aqua-primary); }
.dg-pick-card.picked { border-color: var(--aqua-primary); box-shadow: 0 0 0 2.5px rgba(111, 195, 255, 0.4); }
.dg-pick-card.locked { opacity: 0.55; filter: grayscale(0.5); }
.dg-pick-card:disabled { cursor: default; }
.dg-pick-name { font-size: 0.78rem; font-weight: 900; color: var(--aqua-primary-deep); }
.dg-pick-sub { font-size: 0.58rem; font-weight: 700; color: #4a8ab5; }
.dg-pick-desc { font-size: 0.58rem; line-height: 1.55; color: var(--aqua-ink-2); }
.dg-pick-lock {
  font-size: 0.56rem;
  font-weight: 800;
  color: #8a7a4e;
  background: rgba(240, 233, 212, 0.9);
  border-radius: 99px;
  padding: 0.1rem 0.45rem;
  align-self: flex-start;
}

/* 后训练抽卡（评审页） */
.dg-tune {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.55rem;
  background: rgba(252, 248, 255, 0.85);
  border: 1px solid rgba(200, 185, 240, 0.8);
  border-radius: var(--aqua-radius-md);
  margin-bottom: 0.45rem;
}
.dg-tune-head { flex: 1 1 12rem; font-size: 0.64rem; font-weight: 800; color: #6b5a8a; }
.dg-tune-chips { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.dg-tune-chip {
  font-size: 0.58rem;
  font-weight: 800;
  font-family: var(--font-num);
  color: #6b5a8a;
  background: rgba(240, 235, 250, 0.9);
  border: 1px solid rgba(200, 185, 240, 0.8);
  border-radius: 99px;
  padding: 0.12rem 0.45rem;
}
.dg-tune-chip.good { color: #7a5a12; background: rgba(255, 240, 194, 0.8); border-color: rgba(255, 207, 61, 0.6); }

/* 结算三收益 */
.dg-over-rewards {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.5rem auto;
  max-width: 22rem;
  text-align: left;
  font-size: 0.7rem;
  color: var(--aqua-ink-2);
}
.dg-over-rewards span {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  background: rgba(244, 251, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.85);
  border-radius: var(--aqua-radius-md);
}
.dg-over-rewards b { color: var(--aqua-primary-deep); font-family: var(--font-num); }
.dg-over-final {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  font-weight: 900;
  color: #b45309;
}
/* 旧 .dg-trait-ups（潜力兑现名单）已随三幕结算重做删除——升级展示改由第三幕升级卡承担 */

/* 行动卡分页 tab（用户 2026-08-29：两种行动分页选择，别像网页一样罗列） */
.dg-act-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.dg-act-tab {
  flex: 1;
  padding: 0.42rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--aqua-ink-2);
  background: rgba(240, 249, 255, 0.9);
  border: 1.5px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.dg-act-tab:hover { border-color: var(--aqua-primary); }
.dg-act-tab.on {
  color: #fff;
  background: linear-gradient(135deg, var(--aqua-primary), var(--aqua-primary-deep));
  border-color: transparent;
  box-shadow: 0 4px 12px -6px rgba(79, 183, 238, 0.6);
}

/* ---- 双周三步流程（2026-08-29）----
   步骤条：报告 → 行动 → 攻关，当前步高亮、已完成打勾 */
.dg-stepbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  background: rgba(240, 249, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: 99px;
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}
.dg-step {
  font-size: 0.64rem;
  font-weight: 800;
  color: #9db4c8;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.dg-step.done { color: #6f93ad; }
.dg-step.on {
  color: var(--aqua-primary-deep);
  text-shadow: 0 0 12px rgba(79, 183, 238, 0.35);
}
.dg-step-sep {
  width: 0.7rem;
  height: 1px;
  background: #cfe3f2;
  flex: 0 0 auto;
}

/* ① 报告页：本轮成长做成 4 张大数字卡，比原来挤成一行的 +2 +2 +1 好读 */
.dg-gcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.dg-gcard {
  background: linear-gradient(160deg, #f2fbff, #e6f4ff);
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  padding: 0.5rem 0.4rem;
  text-align: center;
}
.dg-gcard-label { font-size: 0.66rem; font-weight: 800; color: var(--aqua-ink-2); }
.dg-gcard-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: #1f9d7a;
  font-family: var(--font-num);
  line-height: 1.25;
}
.dg-gcard.neg .dg-gcard-val { color: #ff6b9d; }
.dg-gcard-now { font-size: 0.6rem; color: var(--aqua-ink-2); }
.dg-gcard-now i { font-style: normal; opacity: 0.55; }

/* 报告正文：行距放开，不再挤成一坨 */
.dg-report {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(184, 229, 247, 0.75);
  border-radius: var(--aqua-radius-md);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.7rem;
}
.dg-report-line {
  font-size: 0.74rem;
  line-height: 1.95;
  color: #37556d;
}

/* ③ 攻关方向：卡片式，比原来的小按钮好按、也放得下说明文字 */
.dg-fcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.4rem;
  /* 上浮留白（BUG 修复 2026-08-29）：hover 会 translateY(-2px)，若容器不预留空间，
     卡片顶到 .dg-board 的 overflow:hidden 边界，文字上半截会被裁掉 */
  padding: 4px 0 8px;
  margin: -4px 0 0.4rem;
}
.dg-fcard {
  position: relative;
  text-align: left;
  padding: 0.6rem 0.7rem;
  background: #fff;
  border: 2px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.16s ease, box-shadow 0.16s ease;
}
.dg-fcard:hover { transform: translateY(-2px); border-color: var(--aqua-primary); box-shadow: 0 8px 20px -12px rgba(23, 50, 77, 0.5); }
.dg-fcard:active { transform: translateY(0); }
.dg-fcard-text { font-size: 0.8rem; font-weight: 900; color: var(--aqua-primary-deep); margin-bottom: 0.18rem; }
.dg-fcard-desc { font-size: 0.66rem; line-height: 1.6; color: #5c7c93; }
.dg-fcard-selected {
  border-color: var(--aqua-primary);
  background: linear-gradient(160deg, #eaf7ff, #d9eeff);
  box-shadow: 0 0 0 3px rgba(79, 183, 238, 0.22);
}
.dg-fcard-mark {
  position: absolute;
  top: -0.5rem; right: 0.5rem;
  font-size: 0.58rem;
  font-weight: 900;
  color: #fff;
  background: var(--aqua-primary);
  border-radius: 99px;
  padding: 0.1rem 0.45rem;
}
.dg-fc-tip {
  font-size: 0.66rem;
  color: var(--aqua-ink-2);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.dg-fc-tip b { color: var(--aqua-primary-deep); }

/* ---- 团队状态速览（报告页 / 行动页底部）---- */
.dg-team-mini {
  background: rgba(244, 251, 255, 0.8);
  border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: var(--aqua-radius-md);
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.6rem;
}
.dg-team-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--aqua-primary-deep);
  margin-bottom: 0.3rem;
}
.dg-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--aqua-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dg-link-btn:hover { color: var(--aqua-primary-deep); }
.dg-tm-rows { display: flex; flex-direction: column; gap: 0.22rem; }
.dg-tm-row { display: flex; align-items: center; gap: 0.5rem; }
.dg-tm-name { flex: 0 0 5.2rem; font-size: 0.66rem; font-weight: 700; color: #37556d; }
.dg-tm-bars { flex: 1; display: flex; gap: 0.25rem; min-width: 0; }
.dg-tm-bar {
  flex: 1;
  height: 5px;
  background: #e3eef6;
  border-radius: 99px;
  overflow: hidden;
  display: block;
  min-width: 0;
}
.dg-tm-bar i { display: block; height: 100%; border-radius: 99px; transition: width 0.35s ease; }

/* ---- 团队状态完整面板 ---- */
.dg-team-modal { max-width: 40rem; display: flex; flex-direction: column; }
.dg-team-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.68rem;
  color: var(--aqua-ink-2);
  background: rgba(240, 249, 255, 0.85);
  border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: var(--aqua-radius-md);
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
}
.dg-team-summary b { color: var(--aqua-primary-deep); font-family: var(--font-num); font-size: 0.78rem; }
.dg-team-alert {
  font-size: 0.68rem;
  font-weight: 700;
  color: #b4553f;
  background: #fff3ec;
  border: 1px solid #ffd3ba;
  border-radius: var(--aqua-radius-md);
  padding: 0.35rem 0.55rem;
  margin-bottom: 0.4rem;
  line-height: 1.6;
}
.dg-team-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.45rem;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 0.25rem;
  margin-bottom: 0.3rem;
}
.dg-team-card {
  background: #fff;
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  padding: 0.45rem 0.55rem;
}
.dg-tc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.25rem; }
.dg-tc-name { font-size: 0.76rem; font-weight: 900; color: var(--aqua-primary-deep); }
.dg-tc-meta { font-size: 0.6rem; color: var(--aqua-ink-2); }
.dg-tc-traits { display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 0.3rem 0; }
.dg-tc-abilities { display: flex; flex-direction: column; gap: 0.14rem; }
.dg-tc-ability { display: flex; align-items: center; gap: 0.35rem; font-size: 0.6rem; color: var(--aqua-ink-2); }
.dg-tc-ability > span:first-child { flex: 0 0 2.2rem; }
.dg-tc-ability .dg-ability-bar { flex: 1; min-width: 0; }
.dg-tc-ability b { flex: 0 0 1.5rem; text-align: right; color: var(--aqua-primary-deep); font-family: var(--font-num); }
.dg-team-gone { font-size: 0.62rem; margin-bottom: 0.4rem; }

/* 未开放的算力档位：整卡压暗 + 降低饱和（2026-08-29） */
.dg-card-locked { opacity: 0.5; filter: saturate(0.4); }
.dg-card-locked .dg-card-head::after {
  content: " 🔒";
  font-size: 0.8em;
  opacity: 0.8;
}

/* ---- 开局命名页（2026-08-28）----
   不套 dg-stage（那是「9.2rem 侧栏 + 内容」双列网格），命名页是单列居中卡片。 */
.dg-naming-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2vh 0;
}
.dg-naming-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.dg-name-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--aqua-ink-2);
  letter-spacing: 0.04em;
}
/* 标题行（2026-09-22 起输入框已删）：左边「挑一个」，右边「随机一个」 */
.dg-name-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
/* 预设名字卡片网格（2026-09-22 用户：「禁掉自定义名字，改成预设 N 个选项让玩家选」）：
   N 由配置决定 ⇒ 列数用 auto-fill 自适应，加名字不用改 CSS。
   ⚠️ 必须自带滚动兜底：外层 `.dg-board` 是 `overflow: hidden`，全链又没有滚动容器
      （`.dg-naming-wrap` 也没有）⇒ 预设名加到二三十个时会被直接裁掉，玩家看不到也点不着。
      默认 12 张只占 3 行（≈10.5rem），远够不到 46vh，不会平白多出一条滚动条。 */
.dg-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  gap: 0.45rem;
  max-height: 46vh;
  overflow-y: auto;
}
.dg-name-card {
  padding: 0.6rem 0.45rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--aqua-primary-deep);
  font-family: var(--font-num);
  background: #fff;
  border: 2px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-lg);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.14s ease;
}
.dg-name-card:hover { background: #eaf7ff; transform: translateY(-1px); }
.dg-name-card:active { transform: translateY(0); }
/* 选中态：实心蓝底白字 + 外环。**不能用浅色描边** —— 十来张卡平铺时那点色差在手机上看不出来，
   「我到底选了哪个」就成了问题。 */
.dg-name-card.is-on {
  color: #fff;
  background: linear-gradient(160deg, var(--aqua-primary), var(--aqua-primary-deep));
  border-color: var(--aqua-primary-deep);
  box-shadow: 0 0 0 3px rgba(111, 195, 255, 0.28);
}
.dg-name-empty {
  grid-column: 1 / -1;
  padding: 0.7rem 0.8rem;
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--aqua-ink-2);
  background: rgba(184, 229, 247, 0.28);
  border: 1px dashed var(--aqua-border);
  border-radius: var(--aqua-radius-lg);
}
.dg-name-tip {
  font-size: 0.62rem;
  color: var(--aqua-ink-2);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
}

/* 已招聘按钮：样式同「下一步」斜边按钮，配色不同（粉/绿色系） */
.dg-hired-open { min-width: 0; white-space: nowrap; }
.dg-hired-open.dg-btn-accent { --btn-bg: linear-gradient(135deg, #6fd8a8, #3cb87f); --btn-fg: #fff; --btn-geo: rgba(255,255,255,0.24); --btn-shadow: rgba(60,184,127,0.6); }

/* 已招聘模态内的小卡 */
.dg-hired-mini { padding: 0.6rem 0.7rem; border-radius: var(--aqua-radius-md); }

/* 词条胶囊提示：改为不截断（卡片 overflow 需兼容，这里用最小宽度） */
.dg-trait-chip { overflow: visible; }

/* 统一线条图标基线对齐 */
.dg-ic {
  display: inline-block;
  vertical-align: -2px;
  flex: 0 0 auto;
}
.dg-pill .dg-ic,
.dg-week-chip .dg-ic,
.dg-money-chip .dg-ic { vertical-align: -2px; }

/* ============================================================
   顶部灵动岛数值条（demo .island-topbar 严格移植）
   ============================================================ */
.dg-hud {
  grid-column: 1 / -1;   /* 灵动岛横跨整行，居中于画面 X 轴中央 */
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  height: 3rem;
  width: min(590px, 100%);   /* 灵动岛缩短一半，避免中间大片空白 */
  margin: 0 auto 0.66rem;
  padding: 7px 10px;
  border: none;
  border-radius: 1.65rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px -20px rgba(23, 50, 77, 0.38), 0 2px 10px -10px rgba(23, 50, 77, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* 周数/经费紧凑贴紧成一列靠左，操作按钮推到右侧 */
.dg-week-chip + .dg-money-chip { margin-left: 6px; }

/* 窄屏：灵动岛整体缩小 + 侧栏略收窄，保证一屏放下 */
@media (max-width: 1240px) {
  .dg-stage { grid-template-columns: 8.4rem minmax(0, 1fr); gap: 0.6rem; }
  .dg-side-stats { padding: 0.5rem 0.6rem; gap: 0.3rem; }
  .dg-hud { width: min(590px, 100%); gap: 4px; padding: 5px 8px; height: 2.6rem; border-radius: 1.3rem; }
  .dg-week-chip, .dg-money-chip { height: 1.75rem; font-size: 0.6rem; gap: 3px; }
  .dg-week-chip { min-width: 0; padding: 0 6px; }
  .dg-money-chip { min-width: 0; padding: 0 6px; }
  .dg-ic { width: 12px; height: 12px; }
  .dg-island-actions { gap: 3px; }
  .dg-island-btn { height: 1.75rem; padding: 0 8px; font-size: 0.6rem; gap: 3px; }
  .dg-island-close { width: 1.75rem; }
  .dg-hired-open { font-size: 0.72rem; padding: 0.4rem 0.8rem; }
}
/* 手机竖屏：侧栏改到顶行横向排布，避免纵向占用高度 */
@media (max-width: 700px) {
  .dg-stage { grid-template-columns: 1fr; }
  .dg-side-stats {
    position: static;
    align-self: stretch;   /* 竖屏单列：侧栏占满整行 */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
  }
  .dg-side-row { min-width: 4rem; flex: 1 1 auto; }
  .dg-hud { gap: 3px; padding: 4px 6px; height: 2.4rem; }
  .dg-week-chip, .dg-money-chip { height: 1.6rem; font-size: 0.55rem; }
  .dg-island-btn { height: 1.6rem; font-size: 0.55rem; }
}

/* 周数胶囊（demo .week-chip）：主色软底 */
.dg-week-chip,
.dg-money-chip,
.dg-pill {
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--aqua-radius-pill);
  color: var(--aqua-ink-2);
  background: rgba(237, 249, 255, 0.86);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.dg-week-chip {
  min-width: 0;
  padding: 0 11px;
  color: var(--aqua-primary-deep);
  background: var(--aqua-primary-soft);
  border: 1px solid rgba(184, 229, 247, 0.86);
}

.dg-money-chip {
  min-width: 0;
  padding: 0 11px;
  color: var(--aqua-foreground);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(184, 229, 247, 0.76);
}

/* 中部资源胶囊区（demo .top-resources）：窄屏可横向滚动，不被裁掉 */
.dg-top-resources {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dg-top-resources::-webkit-scrollbar { display: none; }

.dg-pill {
  min-width: 4rem;
  padding: 0 9px;
  border: 1px solid rgba(184, 229, 247, 0.58);
}

.dg-pill b,
.dg-week-chip b,
.dg-money-chip b {
  font-family: var(--font-num);
  color: var(--aqua-foreground);
  font-weight: 900;
}

/* 岛内操作按钮（demo .island-btn） */
.dg-island-actions {
  flex: 0 0 auto;
  margin-left: auto;   /* 操作按钮推到右侧 */
  display: flex;
  align-items: center;
  gap: 6px;
}

.dg-island-btn { height: 2.1rem; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border: 0; border-radius: var(--aqua-radius-pill); color: var(--aqua-primary-deep); background: rgba(213, 242, 255, 0.64); font-size: 0.72rem; font-weight: 900; white-space: nowrap; cursor: pointer; transition: transform 180ms ease, background 180ms ease; }
.dg-island-btn:hover { transform: translateY(-1px); background: rgba(213, 242, 255, 0.88); }
.dg-island-btn:active { transform: scale(0.95); }

/* 关闭按钮（内联进灵动岛操作组，避免窄屏与菜单重叠；粉圆钮） */
.dg-island-close {
  width: 2.1rem;
  padding: 0;
  justify-content: center;
  color: #ff7aa8;
  background: rgba(255, 235, 244, 0.72);
  border: 1px solid rgba(255, 154, 213, 0.3);
}
.dg-island-close:hover { background: rgba(255, 230, 244, 0.95); }

/* ============================================================
   招募立项板（demo .recruit-board 严格移植）
   ============================================================ */
.dg-board {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 12px 16px 12px;
  border-radius: var(--aqua-radius-xl);
  border: 1px solid rgba(184, 229, 247, 0.84);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px -34px rgba(23, 50, 77, 0.35);
  overflow: hidden;
}
/* 内容区固定高度：立绘框与人物卡严格 Y 轴等高（紧凑比例，对齐 demo） */
.dg-content-layout {
  flex: 0 0 auto;
  height: 23rem;
}
/* 矮窗口压缩：隐藏简历便签，内容区下调高度，避免招募模块过高溢出 */
@media (max-height: 700px) {
  .dg-board { gap: 4px; padding: 8px 12px; }
  .dg-content-layout { height: 19rem; }
  .dg-cand-note { display: none; }
  .dg-board-sub { display: none; }
  .dg-cand-card { grid-template-rows: auto auto auto minmax(26px, 1fr) auto auto; }
  .dg-ability-row { font-size: 0.6rem; }
  .dg-cand-name { font-size: 0.95rem; }
}

/* 板面柔光叠层（demo .recruit-board::before） */
.dg-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.66), transparent 42%),
    radial-gradient(circle at 43% 50%, rgba(79, 183, 238, 0.06), transparent 28%);
}
.dg-board > * { position: relative; z-index: 1; }

/* 标题行 */
.dg-board-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;   /* 窄屏时步骤条换到第二行，不挤压标题 */
}
.dg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--aqua-primary-deep);
  font-size: 0.8rem;
  font-weight: 900;
}
.dg-board-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.14;
  letter-spacing: 0.03em;
  color: var(--aqua-foreground);
}
.dg-board-sub {
  margin: 4px 0 0;
  color: var(--aqua-muted-foreground);
  font-size: 0.75rem;
}

/* 紧急提示条（demo .urgent-strip） */
.dg-urgent-strip {
  min-height: 1.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 1rem;
  color: #9a5a17;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px),
    rgba(255, 238, 218, 0.90);
  border: 1px dashed rgba(242, 184, 75, 0.62);
  font-size: 0.72rem;
  line-height: 1.35;
}
.dg-alert-icon {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--aqua-radius-pill);
  color: #fff;
  background: #f6a13f;
  font-size: 0.8rem;
  font-weight: 900;
}

/* 内容布局：左立绘区 + 右人物卡翻页区（demo .content-layout） */
.dg-content-layout {
  flex: 0 0 auto;
  height: 23rem;
  min-height: 0;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* 左侧立绘区（demo .portrait-slot，替换左下角头像） */
.dg-portrait-slot {
  position: relative;
  min-height: 0;
  border-radius: var(--aqua-radius-xl);
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(213, 242, 255, 0.56)),
    radial-gradient(circle at 46% 22%, rgba(79, 183, 238, 0.18), transparent 24%),
    var(--aqua-surface);
  border: 1px solid rgba(184, 229, 247, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 16px 28px -26px rgba(23, 50, 77, 0.32);
}
.dg-portrait-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 88%;
  max-width: 92%;
  transform: translateX(-50%);   /* 不镜像翻转 */
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 10px 18px rgba(23, 50, 77, 0.25));
  pointer-events: none;
}
.dg-portrait-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 7px 12px;
  border-radius: var(--aqua-radius-pill);
  color: var(--aqua-primary-deep);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 12px 22px -22px rgba(23, 50, 77, 0.42);
}
/* 决策界面类型 → 立绘标签配色（u-fixed/u-random/u-reward/u-positive/u-negative/u-critical/u-recruit） */
.dg-portrait-tag.u-fixed    { color: #fff; background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep)); }
.dg-portrait-tag.u-random   { color: #fff; background: linear-gradient(135deg, #b39ddb, #8b6ec7); }
.dg-portrait-tag.u-reward   { color: #fff; background: linear-gradient(135deg, #53b98d, #2f8f66); }
.dg-portrait-tag.u-positive { color: #fff; background: linear-gradient(135deg, #ff9ad5, #e86a9d); }
.dg-portrait-tag.u-negative { color: #fff; background: linear-gradient(135deg, #f2b84b, #d98a1f); }
.dg-portrait-tag.u-critical { color: #fff; background: linear-gradient(135deg, #ff8a6b, #e04f3d); }
.dg-portrait-tag.u-recruit  { color: #fff; background: linear-gradient(135deg, #6fd8a8, #3cb87f); }
/* 08 §6.3 外部事件分类：团队 / 媒体 / 资本（P2 事件池扩充） */
.dg-portrait-tag.u-team     { color: #fff; background: linear-gradient(135deg, #7ec8e3, #4a9dbd); }
.dg-portrait-tag.u-media    { color: #fff; background: linear-gradient(135deg, #9aa8ff, #6b7ce0); }
.dg-portrait-tag.u-capital  { color: #fff; background: linear-gradient(135deg, #ffd479, #e0a32f); }

/* 统一决策界面右侧内容区（招聘/买卡/方向/报告/事件/微调/评审共用） */
.dg-decision-body {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 0.15rem 0.2rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dg-decision-body .dg-tiers,
.dg-decision-body .dg-optrow { margin: 0; }
.dg-decision-body .dg-actions { margin-top: 0.2rem; }
/* 决策界面内报告区：可滚动，浅蓝软底 */
.dg-report-decision {
  max-height: 9rem;
  overflow-y: auto;
  background: rgba(237, 249, 255, 0.62);
  border: 1px solid rgba(184, 229, 247, 0.7);
  border-radius: var(--aqua-radius-md);
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--aqua-ink-2);
}

/* 右侧人物卡翻页区（demo .candidate-area） */
.dg-cand-area {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 34px;
  overflow: hidden;
}
.dg-cand-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
  animation: dg-grid-in 0.32s ease;
}
.dg-cand-grid > .dg-empty { grid-column: 1 / -1; }
.dg-cand-card:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(46%, 24rem);   /* 仅剩一位候选人时居中半宽，不撑满整区 */
}
@keyframes dg-grid-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
/* 翻页点不动时的缓动提示（demo .candidate-area.page-peek 同款）：
   卡片整体往该方向位移再弹回 */
.dg-cand-grid {
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease-in-out;
  will-change: transform;
}
.dg-cand-area.dg-peek-next .dg-cand-grid { transform: translateX(-18px); }
.dg-cand-area.dg-peek-prev .dg-cand-grid { transform: translateX(18px); }

/* 翻页箭头（demo .page-arrow：粗大胶囊，增强 hover 动效） */
.dg-page-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 42px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--aqua-radius-pill);
  color: var(--aqua-primary-deep);
  background:
    conic-gradient(from 45deg at 28% 24%, rgba(255, 255, 255, 0.5) 0 25%, transparent 0 100%),
    rgba(213, 242, 255, 0.9);
  box-shadow: 0 16px 28px -22px rgba(23, 50, 77, 0.55);
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease-in-out, box-shadow 260ms ease-in-out;
}
.dg-page-arrow .dg-ic {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dg-page-arrow:hover {
  background: rgba(184, 229, 247, 0.96);
  box-shadow: 0 20px 34px -22px rgba(23, 50, 77, 0.7);
  color: var(--aqua-primary-deep);
}
.dg-page-arrow.prev:hover { transform: translate(-4px, -50%) scale(1.05); }
.dg-page-arrow.next:hover { transform: translate(4px, -50%) scale(1.05); }
.dg-page-arrow.prev:hover .dg-ic { transform: translateX(-3px); }
.dg-page-arrow.next:hover .dg-ic { transform: translateX(3px); }
.dg-page-arrow.prev { left: 0; }
.dg-page-arrow.next { right: 0; }

/* 页码指示点（demo .page-indicator） */
.dg-page-indicator {
  position: absolute;
  left: 50%;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}
.dg-page-dot {
  width: 20px;
  height: 5px;
  border-radius: var(--aqua-radius-pill);
  background: var(--aqua-primary);
  opacity: 0.9;
}
.dg-page-dot.muted {
  width: 7px;
  background: var(--aqua-border);
  opacity: 0.85;
}

/* ---------- 人物卡（demo .candidate-card 严格移植） ---------- */
.dg-cand-card {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(44px, 1fr) auto auto;
  gap: 5px;
  padding: 9px;
  border-radius: 1.25rem;
  border: 1px solid rgba(184, 229, 247, 0.84);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 255, 0.9));
  box-shadow: 0 12px 22px -22px rgba(23, 50, 77, 0.32);
  overflow: hidden;
}
/* 卡面柔光叠层（demo .candidate-card::before） */
.dg-cand-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 10%, rgba(242, 184, 75, 0.14), transparent 20%),
    linear-gradient(135deg, rgba(79, 183, 238, 0.05), transparent 42%);
}
/* 天赋顶部色条（沿用档位配色） */
.dg-cand-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--aqua-border);
}
.dg-cand-card > * { position: relative; z-index: 1; }

.dg-cand-head {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  gap: 9px;
  align-items: center;
}
.dg-cand-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(184, 229, 247, 0.92);
  background: linear-gradient(145deg, var(--aqua-primary-soft), var(--aqua-surface));
  image-rendering: pixelated;
  object-fit: cover;
}
.dg-cand-name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--aqua-foreground);
}
.dg-cand-meta {
  margin-top: 3px;
  color: var(--aqua-ink-2);
  font-size: 0.72rem;
}
.dg-talent-badge {
  align-self: start;
  padding: 5px 8px;
  border-radius: var(--aqua-radius-pill);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 20px -18px rgba(125, 73, 25, 0.45);
}

.dg-level-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 左对齐：职位标签在左，词条紧跟右侧 */
  gap: 6px;
  flex-wrap: wrap;
  color: var(--aqua-primary-deep);
  font-size: 0.72rem;
  font-weight: 900;
}
.dg-soft-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--aqua-radius-pill);
  color: var(--aqua-primary-deep);
  background: rgba(213, 242, 255, 0.86);
  border: 1px solid rgba(184, 229, 247, 0.86);
  font-weight: 900;
  white-space: nowrap;
}
/* 词条胶囊组（同类型工程师软标签样式），位置统一靠右 */
.dg-trait-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* 词条胶囊：与左侧类型软标签同款底图；悬停说明用原生 title（不截断、移出自动消失） */
.dg-trait-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--aqua-radius-pill);
  color: var(--aqua-primary-deep);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.9);
  box-shadow: 0 1px 4px rgba(23, 50, 77, 0.12);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: help;
}

/* 能力条列表（demo .ability-list/.ability-row） */
.dg-ability-list {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}
.dg-ability-row {
  display: grid;
  grid-template-columns: 2.6rem 1fr 1.5rem;
  gap: 7px;
  align-items: center;
  color: var(--aqua-ink-2);
  font-size: 0.66rem;
}
.dg-ability-bar {
  height: 7px;
  border-radius: var(--aqua-radius-pill);
  overflow: hidden;
  background: rgba(223, 243, 252, 0.92);
}
.dg-ability-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.dg-ability-score {
  font-family: var(--font-num);
  color: var(--aqua-foreground);
  font-weight: 900;
  font-size: 0.68rem;
  text-align: right;
}

/* 简历便签（demo .candidate-note） */
.dg-cand-note {
  min-height: 0;
  margin: 0;
  padding: 7px 9px;
  border-radius: 0.8rem;
  color: var(--aqua-ink-2);
  background: rgba(237, 249, 255, 0.70);
  border: 1px solid rgba(184, 229, 247, 0.72);
  font-size: 0.64rem;
  line-height: 1.34;
  overflow: auto;
}

/* 薪资行（demo .salary-row） */
.dg-salary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--aqua-error);
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------- 板底：已招募 + 报名状态 + 操作（demo .recruit-footer） ---------- */
.dg-hired { margin-top: 2px; }
.dg-hired-title { font-size: 0.78rem; font-weight: 800; color: var(--aqua-primary-deep); margin-bottom: 0.4rem; }
.dg-hired-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.55rem; }

.dg-recruit-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
  min-height: 2.9rem;
  margin-top: 2px;
}
.dg-register-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--aqua-ink-2);
  font-size: 0.72rem;
  flex-wrap: wrap;
}
.dg-register-count {
  font-family: var(--font-num);
  color: var(--aqua-primary-deep);
  font-weight: 900;
}
.dg-register-hint { color: var(--aqua-muted-foreground); }
.dg-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dg-next-btn { min-width: 8.2rem; }

/* ============================================================
   通用面板 / 按钮 / 卡片（其他阶段沿用）
   ============================================================ */
.dg-panel {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(79, 183, 238, 0.045) 13px 15px, transparent 15px 26px),
    rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(184, 229, 247, 0.78);
  border-radius: var(--aqua-radius-xl);
  padding: 0.9rem 1rem 1.1rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.8rem;
  overflow: hidden;
}
.dg-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-soft), rgba(242, 184, 75, 0.55));
}
.dg-title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  letter-spacing: 0.03em;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.dg-title-sm { font-size: 0.85rem; margin-top: 0.75rem; }

/* 重要决策区块（双周微调方向，08 设计文档 §12.3：以重要事件分量呈现） */
.dg-ft-block {
  position: relative;
  flex-shrink: 0;              /* 父容器为定高 flex 列，禁止被压缩裁掉选项按钮 */
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem 0.85rem;
  background: var(--aqua-surface, #f8fdff);
  border: 1px solid var(--aqua-border, #b8e5f7);
  border-radius: var(--aqua-radius-lg, 18px);
  box-shadow: var(--shadow-card, 0 14px 28px -26px rgba(23, 50, 77, 0.3));
  overflow: hidden;
}
.dg-ft-block::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #ff8a6b, #e04f3d, #ffb19e);
}
.dg-ft-head {
  font-size: 0.88rem;
  font-weight: 900;
  color: #e04f3d;
  margin-bottom: 0.15rem;
}
.dg-ft-sub { font-size: 0.7rem; color: var(--aqua-ink-3); margin-bottom: 0.55rem; }

.dg-sub { font-size: 0.78rem; line-height: 1.65; color: var(--aqua-ink-2); margin-bottom: 0.7rem; }
.dg-dim { color: var(--aqua-ink-3); font-size: 0.72rem; }
.dg-empty { color: var(--aqua-ink-3); font-size: 0.8rem; padding: 1rem 0; text-align: center; }
.dg-dim-card { opacity: 0.5; }

/* ============================================================
   Aqua 按钮统一语言（demo .slant-btn 完整移植）
   结构：实心底色(--btn-bg) + ::before 几何纹理层 + ::after 扫光层
   文字直接在按钮内 -> isolation:isolate + 伪元素 z-index:-1，
   扫光从底色上方、文字下方扫过（demo 的 span z-index:1 同等效果）
   ============================================================ */
.dg-btn {
  --btn-bg: linear-gradient(180deg, #f8fcff, #e8f4fc);
  --btn-fg: var(--aqua-primary-deep);
  --btn-geo: rgba(79, 183, 238, 0.17);
  --btn-shadow: rgba(23, 50, 77, 0.35);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--aqua-line);
  border-radius: var(--aqua-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 12px 22px -20px var(--btn-shadow);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

/* 几何纹理层：斜线 + 菱形/三角锥形高光 + 顶部斜向提亮（demo 同参数） */
.dg-btn::before,
.pop-btn::before,
.btn-train::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 38%),
    repeating-linear-gradient(135deg, transparent 0 9px, var(--btn-geo, rgba(255, 255, 255, 0.26)) 9px 10px, transparent 10px 18px),
    conic-gradient(from 45deg at 18% 50%, rgba(255, 255, 255, 0.18) 0 25%, transparent 0 100%),
    conic-gradient(from 225deg at 84% 52%, rgba(255, 255, 255, 0.16) 0 25%, transparent 0 100%);
  opacity: 0.86;
}

/* 扫光层：hover 时从左外滑到右外（demo 同参数 460ms ease） */
.dg-btn::after,
.pop-btn::after,
.btn-train::after {
  content: "";
  position: absolute;
  top: -36%;
  left: -72%;
  width: 48%;
  height: 172%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  transform: rotate(18deg);
  transition: left 460ms ease;
  pointer-events: none;
}

.dg-btn:hover,
.pop-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 30px -20px var(--btn-shadow, rgba(23, 50, 77, 0.62));
}
.dg-btn:hover::after,
.pop-btn:hover::after,
.btn-train:hover::after {
  left: 128%;
}
.dg-btn:active,
.pop-btn:active {
  transform: translateY(1px) scale(0.985);
}
.dg-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.dg-btn:disabled::after { display: none; }

/* 主操作：实心主蓝（demo .slant-btn 斜切平行四边形） */
.dg-btn-primary {
  --btn-bg: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  --btn-fg: #ffffff;
  --btn-geo: rgba(255, 255, 255, 0.26);
  --btn-shadow: rgba(23, 50, 77, 0.62);
  border-color: transparent;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  padding: 0.5rem 1.15rem;
}
/* 强调/招募：粉珊瑚实心（demo recruit-btn 斜切平行四边形） */
.dg-btn-accent {
  --btn-bg: linear-gradient(135deg, #ff9ad5, var(--aqua-pink-deep));
  --btn-fg: #ffffff;
  --btn-geo: rgba(255, 255, 255, 0.24);
  --btn-shadow: rgba(230, 107, 122, 0.64);
  border-color: transparent;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  padding: 0.5rem 1.15rem;
}
/* 选中态：亮粉描边 + 上浮 */
.dg-btn-selected {
  --btn-bg: linear-gradient(135deg, var(--aqua-pink-soft), #ffd1ea);
  --btn-fg: var(--aqua-pink-deep);
  --btn-geo: rgba(232, 106, 157, 0.14);
  --btn-shadow: rgba(255, 154, 213, 0.5);
  border: 1.5px solid var(--aqua-pink);
}
.dg-btn-big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: var(--aqua-radius-md);
  line-height: 1.55;
  font-size: 0.84rem;
}
.dg-btn-ghost {
  --btn-bg: rgba(248, 253, 255, 0.7);
  --btn-fg: var(--aqua-ink-2);
  --btn-geo: rgba(79, 183, 238, 0.1);
  box-shadow: none;
  border: 1px dashed var(--aqua-line);
}
.dg-btn-danger { --btn-fg: var(--aqua-error); border-color: #f5cbd9; }
.dg-btn-sm { padding: 0.32rem 0.65rem; font-size: 0.7rem; }
.dg-btn-sub { font-size: 0.7rem; margin-top: 0.22rem; font-weight: 400; }

.dg-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.85rem; }
.dg-optrow { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.dg-optcol { flex-direction: column; }
.dg-hire-btn { width: 100%; }

/* 通用卡片（GPU 档位等） */
.dg-card {
  background: #fff;
  border: 1px solid #eef4fa;
  border-radius: var(--aqua-radius-lg);
  padding: 0.7rem 0.75rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dg-card:hover { box-shadow: 0 5px 16px rgba(47, 137, 196, 0.22); }
.dg-card-selected { border-color: var(--aqua-pink); box-shadow: 0 0 0 3px rgba(255, 154, 213, 0.2); }
.dg-card-head { font-size: 0.83rem; font-weight: 800; color: var(--aqua-primary-deep); margin-bottom: 0.35rem; }
.dg-traits { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.dg-trait {
  font-size: 0.64rem;
  font-weight: 700;
  color: #3f7fd4;
  background: #eaf1ff;
  padding: 0.16rem 0.45rem;
  border-radius: 99px;
}

/* 已招募工程师小卡 */
.dg-eng {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--aqua-border);
  border-radius: var(--aqua-radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.7rem 0.75rem;
}
.dg-eng::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.dg-eng-head { display: flex; gap: 0.5rem; align-items: center; }
.dg-avatar {
  width: 3.2rem; height: 3.2rem; flex: 0 0 auto;
  border-radius: var(--aqua-radius-md);
  image-rendering: pixelated;
  background: #eef4fa;
  object-fit: cover;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(79, 183, 238, 0.25);
}
.dg-avatar-sm { width: 2.4rem; height: 2.4rem; border-radius: 0.55rem; }
.dg-cand-name-sm { font-size: 0.86rem; font-weight: 800; color: var(--aqua-primary-deep); }
.dg-eng .dg-cand-name { font-size: 0.86rem; font-weight: 800; color: var(--aqua-primary-deep); margin: 0; }

/* 数值条（潜力属性，紧凑卡用） */
.dg-statbars { display: flex; flex-direction: column; gap: 0.28rem; margin: 0.35rem 0 0; }
.dg-statbar { display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; }
.dg-statbar-label { flex: 0 0 2.1rem; color: var(--aqua-ink-2); font-weight: 600; text-align: right; }
.dg-statbar-track { flex: 1; height: 0.5rem; background: #eef3f8; border-radius: 99px; overflow: hidden; }
.dg-statbar-fill { display: block; height: 100%; border-radius: 99px; transition: width 0.4s ease; }
.dg-statbar-val { flex: 0 0 1.6rem; font-weight: 800; color: var(--aqua-primary-deep); text-align: right; }
.dg-statbars-mini { gap: 0.2rem; }
.dg-statbar-mini .dg-statbar-label { flex-basis: 1.8rem; font-size: 0.62rem; }
.dg-statbar-mini .dg-statbar-track { height: 0.42rem; }

/* 类型配色：蓝=预训练 粉=后训练 绿=数据（infra/engineer 类型配色已随词条退役删除 2026-09-16） */
.c-blue  .dg-statbar-fill, .dg-statbar-fill.c-blue,  .dg-ability-fill.c-blue  { background: linear-gradient(90deg, #6fc3ff, var(--aqua-primary-deep)); }
.c-purple.dg-statbar-fill, .dg-statbar-fill.c-purple, .dg-ability-fill.c-purple { background: linear-gradient(90deg, #b79bff, #8a6fe8); }
.c-pink  .dg-statbar-fill, .dg-statbar-fill.c-pink,  .dg-ability-fill.c-pink  { background: linear-gradient(90deg, #ff9ad5, #f76ba8); }
.c-green .dg-statbar-fill, .dg-statbar-fill.c-green, .dg-ability-fill.c-green  { background: linear-gradient(90deg, #6fd8a8, #3cb87f); }
.dg-type-pretrain { border-left: 4px solid #6fc3ff; }
.dg-type-post     { border-left: 4px solid #ff9ad5; }
.dg-type-data     { border-left: 4px solid #6fd8a8; }

/* ---- 工程师运行态三围（08 设计文档 §10.2，P0-b）----
   分工：.dg-statbar = 潜力（静态，入职即定）；.dg-statusbar = 状态（动态可经营）。
   颜色语义：绿=健康 / 黄=警告 / 红=危险；忠诚触底时数值闪烁，提示"这个人快跑了"。 */
.dg-statusbars {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: 0.42rem;
  padding-top: 0.42rem;
  border-top: 1px dashed var(--aqua-border, #b8e5f7);
}
.dg-statusbar { display: flex; align-items: center; gap: 0.35rem; font-size: 0.64rem; line-height: 1.4; }
.dg-status-icon { flex: 0 0 auto; font-size: 0.72rem; }
.dg-status-name { flex: 0 0 1.9rem; color: var(--aqua-ink-2); font-weight: 600; }
.dg-status-track { flex: 1; height: 0.44rem; background: #eef3f8; border-radius: 99px; overflow: hidden; }
.dg-status-fill { display: block; height: 100%; border-radius: 99px; transition: width 0.4s ease, background 0.3s ease; }
.dg-status-val { flex: 0 0 1.5rem; font-weight: 800; text-align: right; }
.dg-status-ok   .dg-status-fill { background: linear-gradient(90deg, #6fd8a8, #3cb87f); }
.dg-status-ok   .dg-status-val  { color: #2f9e6b; }
.dg-status-warn .dg-status-fill { background: linear-gradient(90deg, #ffd479, #f5a623); }
.dg-status-warn .dg-status-val  { color: #d98b0a; }
.dg-status-bad  .dg-status-fill { background: linear-gradient(90deg, #ff9b8a, #e04f3d); }
.dg-status-bad  .dg-status-val  { color: #d63a26; }
.dg-status-risk .dg-status-val { animation: dg-status-blink 1.1s ease-in-out infinite; }
@keyframes dg-status-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }

/* 工程师快捷操作（慰问 / 辞退）：横向铺满，符合「横向利用空间」规范 */
.dg-eng-ops { display: flex; gap: 0.35rem; margin-top: 0.45rem; }
.dg-eng-ops .dg-btn { flex: 1; justify-content: center; }
.dg-eng-ops .dg-btn[disabled] { opacity: 0.45; }

/* 危险实心按钮（辞退确认）：与 primary 同构，只换色，保持斜切平行四边形语言 */
.dg-btn-danger-solid {
  --btn-bg: linear-gradient(135deg, #ff9b8a, #e04f3d);
  --btn-fg: #ffffff;
  --btn-geo: rgba(255, 255, 255, 0.24);
  --btn-shadow: rgba(224, 79, 61, 0.6);
  border-color: transparent;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  padding: 0.5rem 1.4rem 0.5rem 1.15rem;
}

/* ---- 行动卡面板（08 设计文档 §4，P1）----
   每双周固定 AP，玩家在训练/团队两类卡之间分配；卡片紧凑网格，横向利用空间。 */
.dg-act-block {
  position: relative;
  flex-shrink: 0;              /* 父容器为定高 flex 列，禁止被压缩裁掉卡片 */
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem 0.85rem;
  background: var(--aqua-surface, #f8fdff);
  border: 1px solid var(--aqua-border, #b8e5f7);
  border-radius: var(--aqua-radius-lg, 18px);
  box-shadow: var(--shadow-card, 0 14px 28px -26px rgba(23, 50, 77, 0.3));
  overflow: hidden;
}
.dg-act-block::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #7fd8ff, var(--aqua-primary-deep));
}
.dg-act-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
}
.dg-ap { display: inline-flex; align-items: center; gap: 0.22rem; font-size: 0.72rem; font-weight: 700; color: var(--aqua-ink-2); }
.dg-ap b { font-size: 0.86rem; color: var(--aqua-primary-deep); }
.dg-ap-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: #d7e6ef;
  box-shadow: inset 0 0 0 1px rgba(23, 50, 77, 0.08);
}
.dg-ap-dot.on { background: linear-gradient(135deg, #7fd8ff, var(--aqua-primary-deep)); }
.dg-act-sub { font-size: 0.7rem; color: var(--aqua-ink-3); margin: 0.15rem 0 0.55rem; }

.dg-act-group + .dg-act-group { margin-top: 0.55rem; }
.dg-act-group-head {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--aqua-ink-2);
  margin-bottom: 0.32rem;
}
.dg-act-group-hint { margin-left: 0.35rem; font-weight: 600; color: var(--aqua-ink-3); }

.dg-act-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: 0.4rem; }
.dg-act-card { position: relative; }
.dg-act-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--aqua-border, #b8e5f7);
  border-radius: var(--aqua-radius-md, 14px);
  background: #fff;
  color: var(--aqua-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dg-act-btn:hover:not([disabled]) {
  transform: translateY(-2px);
  border-color: var(--aqua-primary);
  box-shadow: 0 8px 18px -12px rgba(23, 50, 77, 0.45);
}
.dg-act-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.dg-act-icon { font-size: 0.95rem; line-height: 1; }
.dg-act-name { font-size: 0.78rem; font-weight: 800; }
.dg-act-desc { font-size: 0.64rem; color: var(--aqua-ink-2); line-height: 1.35; }
.dg-act-cost {
  margin-top: 0.12rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--aqua-primary-deep);
}
.dg-act-disabled .dg-act-cost { color: var(--aqua-ink-3); }
.dg-act-team .dg-act-btn { background: linear-gradient(180deg, #fff, #f4fbfd); }
.dg-act-picked .dg-act-btn { border-color: var(--aqua-primary); box-shadow: 0 0 0 2px rgba(79, 183, 238, 0.22); }

/* 选人展开行：卡片下方内联出现，避免弹窗打断节奏 */
.dg-act-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.3rem;
  padding: 0.35rem 0.4rem;
  background: #fff;
  border: 1px dashed var(--aqua-line, #cfe7f3);
  border-radius: 10px;
}
.dg-act-tip { font-size: 0.62rem; color: var(--aqua-ink-3); margin-right: 0.1rem; }

/* 辞退确认弹窗：后果清单 + 不可撤销警告 */
.dg-fire-list { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.76rem; line-height: 1.85; color: var(--aqua-ink-2); }
.dg-fire-list b { color: #2f9e6b; }
.dg-fire-warn { margin-top: 0.6rem; font-size: 0.74rem; font-weight: 800; color: #d63a26; }

/* 全局轻量 toast（团队操作反馈）：z-index 200 = 分层表预留的 toast 层 */
.dg-toast {
  position: fixed;
  left: 50%;
  bottom: 8vh;
  z-index: 200;
  transform: translate(-50%, 12px);
  max-width: min(86vw, 26rem);
  padding: 0.6rem 1rem;
  border-radius: 99px;
  background: rgba(23, 50, 77, 0.92);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 26px -14px rgba(23, 50, 77, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dg-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 词条说明气泡（移动端点按 / 桌面 title 兜底） */
.ui-trait-tip {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(23, 50, 77, 0.94);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-line;   /* 支持说明里的换行（架构说明用「!」弹出，多段分行） */
  box-shadow: 0 12px 28px -14px rgba(23, 50, 77, 0.7);
  opacity: 0;
  transition: opacity 0.18s ease;
}.recruit-detail-tag[data-tip], .team-chip.trait-tip { cursor: help; }

.dg-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.55rem; }
.dg-tier-info { font-size: 0.74rem; color: var(--aqua-ink-2); line-height: 1.65; margin-bottom: 0.45rem; }
.dg-target-block { margin-top: 0.85rem; }
.dg-salary { font-size: 0.72rem; color: var(--aqua-pink); font-weight: 700; }

/* 报告 / 事件 */
.dg-report {
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--aqua-ink-2);
  background: var(--aqua-surface);
  border: 1px solid rgba(184, 229, 247, 0.72);
  border-radius: var(--aqua-radius-md);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.65rem;
}
.dg-growth { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.dg-grow {
  font-size: 0.7rem;
  font-weight: 700;
  color: #1f9d7a;
  background: #e9fbf4;
  padding: 0.22rem 0.55rem;
  border-radius: 99px;
}
.dg-grow-neg { color: #ff6b9d; background: #fff0f5; }
.dg-engs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.55rem; margin-bottom: 0.35rem; }
.dg-event-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff9ad5, var(--aqua-pink-deep));
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  margin-bottom: 0.45rem;
}

/* 评审 */
.dg-rbars { display: flex; flex-direction: column; gap: 0.38rem; margin: 0.55rem 0 0.65rem; }
.dg-rbar { display: flex; align-items: center; gap: 0.5rem; }
.dg-rbar-label { flex: 0 0 2.6rem; font-size: 0.74rem; color: var(--aqua-primary-deep); font-weight: 700; }
/* 评审条：按阶段上限归一，条上带达标线刻度（2026-08-28） */
.dg-rbar-track { position: relative; flex: 1; height: 0.9rem; background: #eef3f8; border-radius: 99px; overflow: hidden; }
.dg-rbar-fill { height: 100%; background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-pink)); border-radius: 99px; transition: width 0.4s ease; }
.dg-rbar-val {
  flex: 0 0 5.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--aqua-primary-deep);
  text-align: right;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.dg-rbar-val i { font-style: normal; font-weight: 600; opacity: 0.5; }
.dg-rbar-val em { font-style: normal; font-size: 0.58rem; font-weight: 700; color: #b0757a; }
.dg-rbar.ok .dg-rbar-val em { color: #1f9d55; }
.dg-score { font-size: 0.88rem; color: var(--aqua-primary-deep); margin-bottom: 0.45rem; }
.dg-score b { color: var(--aqua-pink); font-size: 1.12rem; }
.dg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.35rem; margin-bottom: 0.55rem; }
.dg-check { font-size: 0.7rem; font-weight: 700; padding: 0.28rem 0.5rem; border-radius: 0.5rem; }
.dg-check.ok { color: #1f9d7a; background: #e9fbf4; }
.dg-check.fail { color: #ff6b9d; background: #fff0f5; }
.dg-reasons { font-size: 0.7rem; margin-bottom: 0.55rem; }

/* 结算 */
.dg-over { text-align: center; padding: 2rem 1rem; }
.dg-over-emoji { font-size: 3.4rem; margin-bottom: 0.6rem; animation: dg-bob 2s ease-in-out infinite; }
.dg-over-title { font-size: 1.3rem; font-weight: 900; color: var(--aqua-primary-deep); margin-bottom: 0.6rem; }
.dg-over-desc { font-size: 0.8rem; line-height: 1.8; color: var(--aqua-ink-2); margin-bottom: 0.9rem; }
.dg-over-stats { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.6rem; }
.dg-over-stat { font-size: 0.78rem; color: var(--aqua-primary-deep); background: #fff; border: 1px solid var(--aqua-border); padding: 0.4rem 0.8rem; border-radius: 99px; }
.dg-over-stat b { color: var(--aqua-pink); }
.dg-over-score { font-size: 0.76rem; color: var(--aqua-ink-3); margin-bottom: 1rem; }
@keyframes dg-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 存档模态 + 已招聘模态：点击出现时快速模糊淡入动画 */
/* ==========================================================================
   Toy 云存档 / 排行榜（2026-09-17）
   --------------------------------------------------------------------------
   ⚠️ 类名一律用 lb- 前缀。**不要用 rank-*** —— 项目里游戏内的「能力榜」
   （renderRankBoard 那一套）已经占用了 .rank-list / .rank-row / .rank-no /
   .rank-name / .rank-score 等类名，且带 `opacity:0 → .act.active 才亮` 的入场动画。
   最初这版用了 rank- 前缀，结果双向污染：新榜单的行被既有动画钉在 opacity:0（整片
   看不见），新样式又会改到能力榜。浏览器实测才暴露。改名前请先 grep 类名。
   ========================================================================== */
.lb-mask { z-index: 1002; }   /* 压过存档弹窗（999）—— 两者可能同时开着 */
.lb-modal { width: min(92vw, 520px); }
.lb-tabs { display: flex; gap: 8px; margin: 10px 0 12px; }
.lb-tab {
  flex: 1; padding: 7px 0; border: 1px solid var(--aqua-border);
  border-radius: var(--aqua-radius-pill); background: var(--aqua-surface-2);
  color: var(--aqua-ink-2); font-size: 13px; cursor: pointer;
}
.lb-tab.on {
  background: var(--aqua-primary); border-color: var(--aqua-primary);
  color: var(--aqua-primary-foreground); font-weight: 700;
}
.lb-list { display: grid; gap: 2px; max-height: 42vh; overflow-y: auto; }
.lb-head,
.lb-row {
  display: grid; grid-template-columns: 46px 1fr 64px 56px;
  align-items: center; gap: 6px; padding: 7px 8px;
}
.lb-head { color: var(--aqua-ink-3); font-size: 12px; border-bottom: 1px solid var(--aqua-line); }
/* 表头两列必须与数据列**同一对齐**：.lb-score / .lb-weeks 是 text-align:right，
   表头若用默认左对齐就会与数字错位（用户 2026-09-17 反馈）。 */
.lb-head .lb-score,
.lb-head .lb-weeks { text-align: right; }
.lb-row { border-bottom: 1px solid var(--aqua-surface-3); font-size: 14px; }
.lb-row .lb-no { color: var(--aqua-ink-2); font-family: var(--font-num); }
.lb-row .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .lb-score {
  text-align: right; font-family: var(--font-num);
  font-weight: 700; color: var(--aqua-primary-deep);
}
.lb-row .lb-weeks { text-align: right; color: var(--aqua-ink-2); font-family: var(--font-num); }
.lb-row.lb-top1 .lb-no { color: var(--aqua-warning); font-weight: 800; }
.lb-row.lb-top2 .lb-no { color: var(--aqua-ink-2); font-weight: 800; }
.lb-row.lb-top3 .lb-no { color: var(--aqua-pink-deep); font-weight: 800; }
/* 「我」那一行：加淡底高亮，并在名字下补一行「模型名 · 架构参数 · 阶段」。
   只有自己这行有 —— 平台榜单只回昵称/头像，拿不到别人的模型信息。 */
.lb-row.lb-me { background: var(--aqua-primary-soft); border-radius: var(--aqua-radius-sm); }
.lb-meta {
  display: block; margin-top: 1px;
  font-size: 11px; font-weight: 400; color: var(--aqua-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-mine {
  display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; padding: 8px 10px;
  background: var(--aqua-primary-soft); border-radius: var(--aqua-radius-md);
  color: var(--aqua-foreground); font-size: 13px;
}
.lb-mine-sub { color: var(--aqua-ink-2); font-family: var(--font-num); }
.lb-mine-off { background: var(--aqua-surface-2); color: var(--aqua-ink-2); }
.lb-tip { padding: 18px 6px; text-align: center; color: var(--aqua-ink-2); font-size: 13px; }
.lb-lock { padding: 6px 2px 2px; }
.lb-lock-row {
  display: flex; justify-content: space-between; padding: 7px 10px;
  border-bottom: 1px solid var(--aqua-surface-3); font-size: 13px;
}
.lb-lock-k { color: var(--aqua-ink-2); }
.lb-lock-v { font-family: var(--font-num); font-weight: 700; color: var(--aqua-foreground); }
.lb-lock-tip { margin: 10px 2px 0; color: var(--aqua-ink-3); font-size: 12px; line-height: 1.6; }

/* 存档弹窗内的云存档区 */
.cloud-box {
  margin-top: 10px; padding: 10px 12px;
  background: var(--aqua-surface-2); border: 1px solid var(--aqua-line);
  border-radius: var(--aqua-radius-md);
}
.cloud-line { color: var(--aqua-ink-2); font-size: 12px; }
.cloud-line-off { color: var(--aqua-ink-3); }
.cloud-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cloud-actions .dg-btn { flex: 1 1 auto; }

.dg-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(23, 50, 77, 0.18);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  animation: maskFadeBlur 0.22s ease forwards;
}
@keyframes maskFadeBlur {
  from { background: rgba(23, 50, 77, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to { background: rgba(23, 50, 77, 0.18); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}
.dg-modal {
  position: relative;
  width: min(92vw, 32rem);
  max-height: 86vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--aqua-radius-xl);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 30px 70px -42px rgba(23, 50, 77, 0.62);
}
.dg-modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-soft), rgba(242, 184, 75, 0.55));
}
/* 存档列表：还原为单列竖向列表（原版），紧凑行高，模态内自动滚动不撑破页面 */
.dg-save-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.55rem 0 0.85rem;
}
.dg-save-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border: 1px solid var(--aqua-border);
  border-radius: var(--aqua-radius-md);
  box-shadow: var(--shadow-soft);
}
.dg-save-row-empty { background: var(--aqua-surface); border-style: dashed; box-shadow: none; }
.dg-save-info { flex: 1; min-width: 0; }

/* 已招募工程师列表模态 */
.dg-modal-hired {
  width: min(92vw, 34rem);
  max-height: 82vh;
}
.dg-modal-hired .dg-eng { margin-bottom: 0.55rem; }
.dg-save-name { font-size: 0.76rem; font-weight: 800; color: var(--aqua-primary-deep); margin-bottom: 0.12rem; }
.dg-save-ops { display: flex; gap: 0.3rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* 弹窗主按钮（demo slant-btn 同款扫光） */
.pop-btn {
  --btn-bg: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  --btn-fg: #ffffff;
  --btn-geo: rgba(255, 255, 255, 0.26);
  --btn-shadow: rgba(47, 137, 196, 0.64);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0.3rem;
  padding: 0.55rem 2rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--btn-fg);
  border: none;
  border-radius: var(--aqua-radius-pill);
  cursor: pointer;
  background: var(--btn-bg);
  box-shadow: 0 16px 26px -20px var(--btn-shadow), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}
.pop-btn:hover {
  box-shadow: 0 18px 30px -20px var(--btn-shadow), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.pop-btn-danger {
  --btn-bg: linear-gradient(135deg, #ff9a8b, #e4635a);
  --btn-shadow: rgba(228, 99, 90, 0.64);
  width: 100%;
}

/* ============================================================
   工程师天赋档位（60蓝/70粉/80橙/90渐变彩）
   ============================================================ */
.dg-tier-badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  padding: 0.18rem 0.5rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
}
.dg-tier-badge-sm { font-size: 0.55rem; padding: 0.12rem 0.4rem; }

.t-gray   { background: #b6bec9; }
.t-blue   { background: #5ba9f5; }
.t-pink   { background: #ff8fc4; }
.t-orange { background: #ff9f45; }
.t-rainbow {
  background: linear-gradient(90deg, #ff6b8a, #ffb86b, #ffe66b, #6be0a3, #6ba8ff, #b98bff);
  background-size: 200% 100%;
  animation: tier-rainbow 3s linear infinite;
}
@keyframes tier-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 卡片天赋着色：边框 + 顶部色条
   注意：.dg-eng 色条用 ::before；.dg-cand-card 色条用 ::after（::before 是卡面柔光叠层） */
.dg-tier-gray   { border-color: #d5dae0; }
.dg-eng.dg-tier-gray::before, .dg-cand-card.dg-tier-gray::after { background: #b6bec9; }
.dg-tier-blue   { border-color: #a8d0f7; }
.dg-eng.dg-tier-blue::before, .dg-cand-card.dg-tier-blue::after { background: #5ba9f5; }
.dg-tier-pink   { border-color: #ffc1de; }
.dg-eng.dg-tier-pink::before, .dg-cand-card.dg-tier-pink::after { background: #ff8fc4; }
.dg-tier-orange { border-color: #ffd0a3; }
.dg-eng.dg-tier-orange::before, .dg-cand-card.dg-tier-orange::after { background: #ff9f45; }
.dg-tier-rainbow { border-color: #ffc7d8; }
.dg-eng.dg-tier-rainbow::before, .dg-cand-card.dg-tier-rainbow::after {
  background: linear-gradient(90deg, #ff6b8a, #ffb86b, #ffe66b, #6be0a3, #6ba8ff, #b98bff);
}

/* ============================================================
   响应式：竖屏（手机/平板窄幅）-- 顶部岛两行 + 立绘条 + 卡片纵向
   ============================================================ */
@media (max-width: 520px) and (orientation: portrait) {
  /* 顶部灵动岛：换行成两行（chips+操作 / 资源胶囊横滑） */
  .dg-hud {
    flex-wrap: wrap;
    height: auto;
    min-height: 3rem;
    row-gap: 4px;
    padding: 6px 8px;
  }
  .dg-top-resources {
    flex-basis: 100%;
    order: 3;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dg-top-resources::-webkit-scrollbar { display: none; }
  .dg-island-actions { margin-left: auto; }
  .dg-week-chip, .dg-money-chip { min-width: 0; height: 1.75rem; font-size: 0.6rem; padding: 0 6px; }
  .dg-pill { min-width: 3.6rem; height: 1.75rem; font-size: 0.58rem; padding: 0 5px; }
  .dg-island-btn { height: 1.75rem; padding: 0 8px; font-size: 0.62rem; }
  .dg-island-close { width: 1.75rem; }

  /* 立项板：纵向堆叠 */
  .dg-board { min-height: 0; padding: 8px 10px; gap: 5px; border-radius: 1.2rem; }
  .dg-board-title { font-size: 1.02rem; }
  .dg-board-sub { display: none; }
  .dg-urgent-strip { font-size: 0.62rem; padding: 4px 7px; min-height: 1.7rem; }
  .dg-content-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 6rem minmax(0, 1fr);
    gap: 6px;
  }
  /* 立绘条模式：小图靠左 */
  .dg-portrait-slot { border-radius: 1rem; }
  .dg-portrait-img { left: 12%; transform: scaleX(-1); height: 112%; max-width: 42%; }
  .dg-portrait-tag { left: auto; right: 10px; top: 8px; padding: 3px 7px; font-size: 0.58rem; }

  /* 决策内容区：竖屏纵向堆叠后压缩高度与文字 */
  .dg-decision-body { padding: 0 0 0.4rem; gap: 0.4rem; }
  .dg-report-decision { max-height: 6.5rem; font-size: 0.7rem; padding: 0.45rem 0.55rem; }

  .dg-cand-area { padding: 0 1.7rem 0.7rem; }
  .dg-cand-grid { grid-template-columns: 1fr; gap: 8px; }

  /* 人物卡压缩 */
  .dg-cand-card { padding: 7px; gap: 4px; border-radius: 1.05rem; grid-template-rows: auto auto auto minmax(30px, 1fr) auto auto; }
  .dg-cand-head { grid-template-columns: 2.6rem 1fr auto; gap: 7px; }
  .dg-cand-avatar { width: 2.6rem; height: 2.6rem; border-radius: 0.85rem; }
  .dg-cand-name { font-size: 0.92rem; }
  .dg-cand-meta, .dg-level-line, .dg-ability-row { font-size: 0.6rem; }
  .dg-talent-badge { padding: 3px 6px; font-size: 0.56rem; }
  .dg-ability-row { grid-template-columns: 2.1rem 1fr 1.1rem; gap: 5px; }
  .dg-cand-note { padding: 5px 7px; font-size: 0.58rem; }
  .dg-salary-row { font-size: 0.62rem; }

  .dg-recruit-footer { grid-template-columns: 1fr; gap: 6px; min-height: 0; }
  .dg-footer-actions { justify-content: space-between; }
  .dg-next-btn { min-width: 8.4rem; }
  .dg-page-arrow { width: 1.7rem; height: 2.9rem; }

  /* 起名页竖屏（2026-09-15 真机反馈「立绘区域在上面占了一大块」）：
     立绘条从 6rem 全宽空条压成 4.6rem 的「探头条」（只露头肩、贴左，标签竖中置右）——
     全宽空条里放一个 30% 宽的小人最显臃肿；整卡垂直居中见下方通用竖屏段。 */
  .dg-naming .dg-content-layout { height: auto; grid-template-rows: 4.6rem auto; }
  .dg-naming .dg-portrait-slot { border-radius: 1rem; }
  .dg-naming .dg-portrait-img { height: 152%; max-width: 34%; left: 16%; }
  .dg-naming .dg-portrait-tag { left: auto; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px 9px; }
}

/* 竖屏较宽（平板，521-820）：保持横版左立绘 + 右侧双卡，右卡区允许滚动以免挤压 */
@media (min-width: 521px) and (max-width: 820px) and (orientation: portrait) {
  .dg-content-layout { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; }
  .dg-board-title { font-size: 1.1rem; }
  .dg-urgent-strip { font-size: 0.66rem; padding: 4px 8px; }
  .dg-cand-grid { gap: 8px; }
  .dg-cand-card { grid-template-rows: auto auto auto minmax(34px, 1fr) auto auto; gap: 4px; padding: 7px; }
  .dg-cand-head { grid-template-columns: 2.6rem 1fr auto; gap: 7px; }
  .dg-cand-avatar { width: 2.6rem; height: 2.6rem; border-radius: 0.85rem; }
  .dg-cand-name { font-size: 0.95rem; }
  .dg-cand-meta, .dg-level-line, .dg-ability-row { font-size: 0.6rem; }
  .dg-ability-row { grid-template-columns: 2.1rem 1fr 1.1rem; gap: 5px; }
  .dg-talent-badge { padding: 4px 7px; font-size: 0.58rem; }
  .dg-cand-note { padding: 5px 7px; font-size: 0.58rem; }
  .dg-salary-row { font-size: 0.62rem; }
  .dg-next-btn { min-width: 8rem; }
}

/* ============================================================
   响应式：横屏矮屏（手机横屏）-- 压缩布局
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape) {
  .dg-hud { height: 2.4rem; padding: 4px 8px; border-radius: 1.4rem; }
  .dg-top-resources { overflow-x: auto; justify-content: flex-start; }
  .dg-week-chip, .dg-money-chip, .dg-pill { height: 1.7rem; font-size: 0.6rem; }
  .dg-week-chip, .dg-money-chip { min-width: 4.6rem; padding: 0 7px; }
  .dg-pill { min-width: 3.2rem; padding: 0 5px; }
  .dg-island-btn { height: 1.85rem; padding: 0 8px; font-size: 0.6rem; }
  .dg-island-close { width: 1.85rem; }

  .dg-board { min-height: 0; padding: 8px 10px; gap: 4px; }
  .dg-board-title { font-size: 1.02rem; }
  .dg-board-sub { display: none; }
  .dg-urgent-strip { min-height: 1.6rem; padding: 4px 8px; font-size: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dg-content-layout { grid-template-columns: 9rem minmax(0, 1fr); gap: 10px; }
  .dg-portrait-slot { border-radius: 1.1rem; }
  .dg-portrait-img { height: 92%; max-width: 88%; }
  .dg-portrait-tag { left: 10px; top: 10px; padding: 4px 7px; font-size: 0.58rem; }

  .dg-cand-area { padding: 0 1.6rem 0.6rem; }
  .dg-cand-grid { gap: 9px; }
  .dg-cand-card { padding: 6px; gap: 3px; border-radius: 1rem; grid-template-rows: auto auto auto minmax(26px, 1fr) auto auto; }
  .dg-cand-head { grid-template-columns: 2.4rem 1fr auto; gap: 6px; }
  .dg-cand-avatar { width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; }
  .dg-cand-name { font-size: 0.85rem; }
  .dg-cand-meta, .dg-level-line, .dg-ability-row { font-size: 0.56rem; }
  .dg-talent-badge { padding: 3px 5px; font-size: 0.54rem; }
  .dg-level-line .dg-soft-tag { padding: 2px 5px; font-size: 0.54rem; }
  .dg-ability-list { gap: 2px; }
  .dg-ability-row { grid-template-columns: 2rem 1fr 1rem; gap: 4px; }
  .dg-ability-bar { height: 5px; }
  .dg-cand-note { padding: 4px 6px; font-size: 0.52rem; line-height: 1.25; }
  .dg-salary-row { font-size: 0.56rem; }
  .dg-hire-btn { padding: 0.35rem 0.6rem; font-size: 0.62rem; }

  .dg-recruit-footer { min-height: 2.1rem; }
  .dg-register-status { font-size: 0.6rem; gap: 6px; }
  .dg-next-btn { min-width: 7.8rem; }
  .dg-page-arrow { width: 1.6rem; height: 2.8rem; }
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .dg-btn::after, .pop-btn::after, .btn-train::after { display: none; }
  .dg-cand-grid { animation: none; }
}

/* ==========================================================================
   X3 立项四步向导（2026-08-29：一屏塞不下 → 拆四步，一步一屏）
   ========================================================================== */
.dg-leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.dg-leader-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0;
  background: transparent;
  border: 2px dashed rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  text-align: left;
}
.dg-leader-card:hover { transform: translateY(-2px); border-color: var(--aqua-primary); }
.dg-leader-card.picked {
  border-style: solid;
  border-color: var(--aqua-primary);
  box-shadow: 0 0 0 2.5px rgba(111, 195, 255, 0.35);
}
.dg-leader-card .dg-eng { border: 0; box-shadow: none; margin: 0; }
.dg-leader-mark {
  display: block;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #7f9cb3;
  padding: 0.2rem 0 0.35rem;
}
.dg-leader-card.picked .dg-leader-mark { color: var(--aqua-primary-deep); }

.dg-confirm-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: rgba(244, 251, 255, 0.85);
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-md);
  padding: 0.55rem 0.7rem;
}
.dg-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.7rem;
  padding: 0.18rem 0;
  border-bottom: 1px dashed rgba(184, 229, 247, 0.7);
}
.dg-confirm-row:last-child { border-bottom: 0; }
.dg-confirm-row > span { color: var(--aqua-ink-2); font-weight: 700; flex: 0 0 auto; }
.dg-confirm-row > b { color: var(--aqua-primary-deep); text-align: right; }
.dg-confirm-row b.great, .dg-syn.great { color: #1f9d7a; }
.dg-confirm-row b.bad, .dg-syn.bad { color: #ff6b9d; }
.dg-warn { font-style: normal; color: #e8890c; font-size: 0.62rem; }
.dg-syn {
  margin-left: 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  color: #6f93ad;
}

/* 相性徽章：卡片之间的 ⟷ 只是连接符号（旧的「×」被误读成乘号），
   相性单独一行展示在方案卡下方，不再塞进这个符号里。 */
.dg-plan-x {
  display: grid;
  place-items: center;
  align-self: center;
  font-size: 1rem;
  font-weight: 900;
  color: #a9cbe0;
}
.dg-plan-syn {
  margin-top: 0.3rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 800;
  color: #6f93ad;
}
.dg-plan-syn .great { color: #1f9d7a; }
.dg-plan-syn .bad { color: #ff6b9d; }

/* ==========================================================================
   X5 过程演出：剧情气泡（事件引入 / 大牛拜访）
   ========================================================================== */
.dg-cine-mask {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 4vh 1rem;
  background: rgba(14, 34, 56, 0.62);
  backdrop-filter: blur(3px);
  animation: dgFadeIn 0.22s ease both;
}
@keyframes dgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.dg-cine {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  max-width: 40rem;
  width: 100%;
  animation: dgCineIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dgCineIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.dg-cine-mask.dg-cine-out { animation: dgFadeOut 0.22s ease both; }
.dg-cine-port {
  flex: 0 0 auto;
  width: clamp(90px, 16vh, 150px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
  animation: dgTutBob 2.4s ease-in-out infinite;
}
.dg-cine-box {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid rgba(184, 229, 247, 0.95);
  border-radius: var(--aqua-radius-lg);
  padding: 0.8rem 0.9rem 0.6rem;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
}
.dg-cine-text {
  min-height: 3.4rem;
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--aqua-ink);
  font-weight: 600;
}
.dg-cine-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(184, 229, 247, 0.9);
}
.dg-cine-idx { font-size: 0.62rem; color: var(--aqua-ink-3); font-weight: 700; }
.dg-cine-idx b { color: var(--aqua-primary-deep); }

/* ==========================================================================
   X6 行业新闻横幅（脱离事件池，不打断流程）
   ========================================================================== */
.dg-news-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 250;
  width: min(30rem, 92vw);
  transform: translate(-50%, -120%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.dg-news-banner.show { transform: translate(-50%, 0.7rem); pointer-events: auto; }
.dg-nb-inner {
  position: relative;
  background: linear-gradient(160deg, #fffdf7, #fff5e4);
  border: 2px solid #f0d9a8;
  border-radius: var(--aqua-radius-lg);
  padding: 0.6rem 0.8rem 0.65rem;
  box-shadow: 0 16px 34px -18px rgba(90, 60, 10, 0.55);
}
.dg-nb-inner::before {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; top: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, #c9a961 0 6px, transparent 6px 12px);
  opacity: 0.5;
}
.dg-nb-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 900;
  color: #8a6a1f;
  letter-spacing: 0.06em;
}
.dg-nb-cat {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.56rem;
  font-weight: 800;
  color: #fff;
  background: #c9a961;
  border-radius: 99px;
}
.dg-nb-title {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 900;
  color: #4a3a12;
  line-height: 1.5;
}
.dg-nb-desc {
  margin-top: 0.22rem;
  font-size: 0.66rem;
  line-height: 1.7;
  color: #6b5a35;
}
.dg-nb-inner .dg-btn { margin-top: 0.4rem; }

/* ==========================================================================
   X5 测评演出台（10 题 10 秒）
   ========================================================================== */
.dg-evalshow {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.2vh 0 0;
  text-align: center;
}
.dg-es-kicker {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--aqua-primary-deep);
  opacity: 0.75;
}
.dg-es-title {
  margin: 0.2rem 0 0.15rem;
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
}
.dg-es-sub { font-size: 0.64rem; color: var(--aqua-ink-3); }

.dg-es-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 32rem;
  margin: 0.7rem auto 0.35rem;
}
.dg-es-bar-track {
  position: relative;
  flex: 1;
  height: 0.85rem;
  background: #e7f0f8;
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: 99px;
  overflow: hidden;
}
.dg-es-bar-track > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7fd6ff, var(--aqua-primary-deep) 70%, #ffd166);
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.dg-es-score {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--aqua-primary-deep);
}
.dg-es-score i { font-style: normal; font-size: 0.62rem; opacity: 0.55; margin-left: 0.1rem; }
.dg-es-dots {
  display: flex;
  gap: 0.28rem;
  justify-content: center;
  margin-bottom: 0.7rem;
}
.dg-es-dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: #dfeaf4;
  border: 1px solid rgba(184, 229, 247, 0.9);
  transition: background 0.2s ease, transform 0.2s ease;
}
.dg-es-dot.ok { background: linear-gradient(180deg, #6fe0a5, #2fb877); border-color: #2fb877; transform: scale(1.12); }
.dg-es-dot.bad { background: linear-gradient(180deg, #ffb3c1, #ff7a95); border-color: #ff7a95; }

.dg-es-stage {
  max-width: 34rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-lg);
  padding: 0.7rem 0.8rem 0.6rem;
  box-shadow: 0 16px 34px -24px rgba(23, 50, 77, 0.6);
  text-align: left;
}
.dg-es-q {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--aqua-ink-2);
  margin-bottom: 0.45rem;
}
.dg-es-q.in { animation: dgEsQIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dgEsQIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dg-es-msg { display: flex; align-items: flex-start; gap: 0.5rem; }
.dg-es-face {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 50%;
  background: #eaf6fd;
  border: 1.5px solid rgba(184, 229, 247, 0.9);
}
.dg-es-out {
  flex: 1;
  min-width: 0;
  padding: 0.42rem 0.6rem;
  font-size: 0.74rem;
  line-height: 1.75;
  color: #37556d;
  background: #f2f8fc;
  border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: 0.7rem;
  white-space: pre-wrap;
  min-height: 2.6rem;
}
.dg-es-judge {
  margin-top: 0.4rem;
  min-height: 1.2rem;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 900;
  font-family: var(--font-num);
  opacity: 0;
}
.dg-es-judge.ok { color: #1f9d55; animation: dgEsPop 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
.dg-es-judge.bad { color: #ff6b9d; animation: dgEsPop 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dgEsPop {
  0% { opacity: 0; transform: translateY(8px) scale(0.9); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.dg-es-foot { margin-top: 0.5rem; }

.dg-es-final {
  margin-top: 0.9rem;
  animation: dgCineIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dg-es-final-label { font-size: 0.66rem; color: var(--aqua-ink-3); letter-spacing: 0.1em; }
.dg-es-final-num {
  font-family: var(--font-num);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--aqua-primary-deep);
  text-shadow: 0 6px 18px rgba(79, 183, 238, 0.3);
}
.dg-es-stamp {
  display: inline-block;
  margin: 0.2rem 0 0.7rem;
  padding: 0.22rem 1rem;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #fff;
  background: #8aa0b3;
  border: 3px double rgba(255, 255, 255, 0.85);
  border-radius: 0.4rem;
  transform: rotate(-8deg) scale(2.4);
  opacity: 0;
}
.dg-es-stamp.ok { background: linear-gradient(160deg, #54c98b, #1f9d55); }
.dg-es-stamp.great { background: linear-gradient(160deg, #ffb84d, #f07f13); }
.dg-es-stamp.bad { background: linear-gradient(160deg, #ff8fa6, #e03e63); }
.dg-es-stamp.drop { animation: dgStamp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dgStamp {
  0% { opacity: 0; transform: rotate(-8deg) scale(2.4); }
  70% { opacity: 1; transform: rotate(-8deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* ==========================================================================
   X7 奖金演出（数字滚动 + 旁边的庆祝小视频位）
   ========================================================================== */
.dg-bonus {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.dg-bonus-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--aqua-ink-2);
}
.dg-bonus-title {
  margin: 0.25rem 0 0.8rem;
  font-size: 1.24rem;
  font-weight: 900;
  color: #b07714;
  text-shadow: 0 4px 14px rgba(255, 199, 61, 0.35);
}
.dg-bonus-body {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.dg-bonus-video {
  flex: 0 0 auto;
  width: 240px;
  min-height: 180px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fffdf5, #fff3d6);
  border: 2px dashed rgba(201, 169, 97, 0.65);
  border-radius: var(--aqua-radius-lg);
  overflow: hidden;
}
.dg-bonus-mp4 { display: block; width: 100%; height: auto; object-fit: cover; }
.dg-bonus-video-ph {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #b19a5f;
}
.dg-bonus-video-ph span { letter-spacing: 0.08em; }
.dg-bonus-video-ph.on { display: flex; }
.dg-bonus-video-ph::first-line { font-size: 2rem; }

.dg-bonus-panel {
  flex: 1 1 16rem;
  min-width: 15rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(184, 229, 247, 0.9);
  border-radius: var(--aqua-radius-lg);
  padding: 0.7rem 0.8rem;
  box-shadow: 0 16px 34px -24px rgba(23, 50, 77, 0.6);
}
.dg-bonus-items { display: flex; flex-direction: column; gap: 0.35rem; }
.dg-bonus-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  background: rgba(244, 251, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.85);
  border-radius: var(--aqua-radius-md);
  font-size: 0.7rem;
  animation: dgBonusItem 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dgBonusItem {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
.dg-bonus-icon { font-size: 0.9rem; }
.dg-bonus-label { flex: 1; color: var(--aqua-ink-2); font-weight: 700; }
.dg-bonus-val {
  font-family: var(--font-num);
  font-weight: 900;
  color: #d18a10;
}
.dg-bonus-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 2px dashed rgba(184, 229, 247, 0.9);
  font-size: 0.72rem;
  color: var(--aqua-ink-2);
  font-weight: 800;
}
.dg-bonus-total b {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 900;
  color: #c87a0a;
}
.dg-bonus-total b span { font-size: 1.5rem; }
.dg-bonus-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  color: var(--aqua-ink-3);
}
.dg-bonus-foot b { color: var(--aqua-primary-deep); font-family: var(--font-num); }
.dg-bonus-ok { margin-top: 0.9rem; }

/* ==========================================================================
   X6 RM 偏好排序（点击排位）
   ========================================================================== */
.dg-mg-opt.rank { position: relative; text-align: left; }
.dg-mg-opt.rank .dg-mg-opt-text { display: block; }
.dg-mg-opt.rank.ranked {
  border-color: var(--aqua-primary);
  background: rgba(238, 249, 255, 0.96);
}
.dg-mg-opt.rank.ranked .dg-mg-opt-text { opacity: 0.72; }
.dg-mg-opt.rank.mid { border-color: rgba(255, 190, 90, 0.9); background: rgba(255, 250, 240, 0.96); }
.dg-mg-rank {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.58rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(160deg, #7fd6ff, var(--aqua-primary-deep));
  border-radius: 99px;
  animation: dgEsPop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dg-mg-rankbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
/* 「重排」按钮（2026-09-17 玩家反馈「点错了改不了排序」）：不参与均分，免得把
   4 个位次格挤变形；flex:0 0 auto = 只占自己的宽度 */
.dg-mg-rankbar .dg-mg-reset { flex: 0 0 auto; padding: 0.28rem 0.55rem; font-size: 0.64rem; }
.dg-mg-ranktip { font-size: 0.64rem; font-weight: 800; color: var(--aqua-ink-2); }
.dg-mg-verdict {
  margin-top: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: var(--aqua-radius-md);
  text-align: center;
}
.dg-mg-verdict.good { color: #1f7a4d; background: rgba(240, 252, 245, 0.95); border: 1px solid rgba(80, 190, 130, 0.6); }
.dg-mg-verdict.mid { color: #a0641a; background: rgba(255, 250, 240, 0.95); border: 1px solid rgba(255, 190, 90, 0.7); }
.dg-mg-verdict.bad { color: #c0392b; background: rgba(255, 244, 246, 0.95); border: 1px solid rgba(255, 130, 150, 0.6); }

/* 2026-09-29（玩家反馈「竖屏 RM 排序面板被挤压，下一题按钮看不见」）：
   竖屏下 4 条选项 + 排位条 + 「下一题」的总高超出面板可用高，
   `.modal-body{overflow:hidden}` 会直接把按钮裁掉；fitModalBody 的整体缩放又会被压到
   0.3 可读下限。这里压缩非必要留白与字号（判据与 SFT 同口径），把面板总高降下来，
   让排版本身放得下、缩放只做轻微兜底。 */
@media (orientation: portrait) {
  .mg-modal-body .dg-mg-kicker { margin-bottom: 0.3rem; }
  .mg-modal-body .dg-mg-title { font-size: 0.92rem; margin-bottom: 0.38rem; }
  .mg-modal-body .dg-mg-head { margin-bottom: 0.3rem; }
  .mg-modal-body .dg-mg-q { font-size: 0.78rem; line-height: 1.5; }
  .mg-modal-body .dg-mg-tip { padding: 0.24rem 0.5rem; margin-bottom: 0.38rem; }
  .mg-modal-body .dg-mg-opts,
  .mg-modal-body .dg-mg-opts.sft { gap: 0.34rem; }
  .mg-modal-body .dg-mg-opt { padding: 0.42rem 0.55rem; gap: 0.16rem; }
  .mg-modal-body .dg-mg-opt-text { font-size: 0.68rem; line-height: 1.55; }
  .mg-modal-body .dg-mg-why { font-size: 0.58rem; line-height: 1.45; }
  .mg-modal-body .dg-mg-rankbar { margin-top: 0.38rem; }
  .mg-modal-body .dg-mg-actions { margin-top: 0.38rem; }
}

/* ==========================================================================
   X5 模型测试：玩家自己点「发送」
   ========================================================================== */
.dg-chat-empty {
  padding: 0.5rem 0 0.2rem;
  text-align: center;
  font-size: 0.64rem;
  color: var(--aqua-ink-3);
}
.dg-chat-msg.in { animation: dgChatIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dgChatIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.dg-chat-input {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-top: 1px solid rgba(184, 229, 247, 0.85);
  background: rgba(244, 251, 255, 0.8);
}
.dg-chat-draft {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  color: var(--aqua-ink-2);
  background: #fff;
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: 99px;
}
.dg-optrow.in { animation: dgChatIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ==========================================================================
   X3 工作间：紧凑小卡 + 点击压弹（点一次就有一次的手感）
   ========================================================================== */
.dg-wk-cards { grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr)); gap: 0.55rem; }
.dg-work-card.hit { animation: dgWorkHit 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dgWorkHit {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(3px) scale(0.965); }
  100% { transform: translateY(0) scale(1); }
}
.dg-work-card.hit::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--aqua-radius-lg);
  border: 2px solid rgba(var(--flame), 0.85);
  opacity: 0;
  animation: dgWorkRing 0.45s ease-out;
  pointer-events: none;
}
@keyframes dgWorkRing {
  0% { opacity: 0.85; transform: scale(0.94); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* 窄屏适配：四步向导 / 测评秀 / 奖金页 */
@media (max-width: 640px) {
  .dg-leader-grid { grid-template-columns: 1fr 1fr; }
  .dg-bonus-body { flex-direction: column; align-items: center; }
  .dg-bonus-panel { width: 100%; }
  .dg-es-final-num { font-size: 2rem; }
  .dg-confirm-row { font-size: 0.64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-cine-mask, .dg-cine, .dg-es-q.in, .dg-es-stamp.drop, .dg-bonus-item,
  .dg-work-card.hit, .dg-work-card.hit::after, .dg-es-judge { animation: none !important; }
  .dg-es-stamp { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* ==========================================================================
   X8 一屏不滚动 · 第二轮修正（用户 2026-08-29 晚反馈）
   ========================================================================== */

/* ① 任何页面都不允许出现横向滚动条（点击工作卡时飘字过长会把页面顶出横向滑竿） */
.dg-main-body { overflow-x: hidden; }
.devgame-render { overflow-x: hidden; }

/* ② 工作间：真正的「小卡」——固定宽度不拉伸，1 个人也只有一张小卡（不再占满整行）*/
.dg-wk-cards {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 9.2rem));
  justify-content: center;
}
.dg-work-card { padding: 0.4rem 0.4rem 0.4rem; gap: 0.26rem; }
.dg-work-bubble { font-size: 0.56rem; min-height: 1.4rem; }
.dg-work-avatar { width: 36px; height: 36px; }
.dg-work-name { font-size: 0.68rem; }
.dg-work-type { font-size: 0.54rem; }
.dg-work-left { font-size: 0.56rem; }
.dg-work-card .dg-statusbars { gap: 0.12rem; }
.dg-work-card .dg-statusbar { font-size: 0.52rem; }
.dg-work-card .dg-status-icon { font-size: 0.5rem; }
.dg-work-card .dg-status-name { flex: 0 0 auto; }
.dg-work-card .dg-status-val { flex: 0 0 auto; }

/* ③ 团队面板：一行两张固定宽小卡，1 个人时不再占满整个弹窗 */
.dg-team-modal { max-width: 33rem; }
.dg-team-list {
  grid-template-columns: repeat(2, minmax(0, 14.5rem));
  justify-content: center;
}
.dg-team-list .dg-eng { padding: 0.45rem 0.5rem; }

/* ④ 存档页：8 个槽位 2 列网格，一屏放得下 */
.dg-save-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.dg-save-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.45rem 0.55rem;
}
.dg-save-row .dg-save-ops { justify-content: flex-start; }
.dg-save-name { font-size: 0.68rem; }
.dg-save-info .dg-dim { font-size: 0.56rem; line-height: 1.5; }

/* ⑤ 双周行动页：压缩到一屏（大卡改紧凑、描述限两行、间距收紧）*/
.dg-act-block { padding: 0.5rem 0.6rem; }
.dg-act-head { margin-bottom: 0.35rem; }
.dg-act-tabs { margin-bottom: 0.3rem; }
.dg-act-sub { margin-bottom: 0.4rem; }
.dg-act-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.4rem;
}
.dg-act-card { margin: 0; }
.dg-act-btn { padding: 0.42rem 0.5rem; gap: 0.12rem; }
.dg-act-icon { font-size: 0.95rem; }
.dg-act-name { font-size: 0.7rem; }
.dg-act-desc {
  font-size: 0.6rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dg-act-cost { font-size: 0.58rem; }
.dg-free-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.4rem;
}
.dg-free-card { padding: 0.42rem 0.5rem; gap: 0.1rem; }
.dg-free-name { font-size: 0.7rem; }
.dg-free-desc {
  font-size: 0.6rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dg-free-badge { font-size: 0.56rem; }
.dg-tb-block { padding: 0.45rem 0.55rem; }
.dg-tb-head { font-size: 0.68rem; margin-bottom: 0.35rem; }
.dg-tb-hint { display: none; }   /* 太长的说明收进 hover，不再挤一屏 */

/* ⑥ 事件/帮助等长文本：限高内部滚动（页面本身不出滑竿）*/
.dg-report-decision {
  max-height: 8.5rem;
  overflow-y: auto;
}
.dg-help-body { max-height: 46vh; overflow-y: auto; }

/* ==========================================================================
   X8 工作间「聚焦演出」：背景虚化，左侧数值栏 ↔ 右侧工程师小卡向中间靠拢并微震，
   点击时左侧对应数值行弹一下（数值上涨的提示），配合飘字不再「很突然」。
   ========================================================================== */
.dg-stage.dg-focus .dg-portrait-slot,
.dg-stage.dg-focus .dg-board-title-row,
.dg-stage.dg-focus .dg-wk-foot,
.dg-stage.dg-focus .dg-act-sub {
  opacity: 0.32;
  filter: blur(1.6px);
  transition: opacity 0.45s ease, filter 0.45s ease;
}
.dg-stage.dg-focus .dg-side-stats {
  animation: dgSideFocus 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, dgShakeX 2.6s ease-in-out 0.6s infinite;
}
.dg-stage.dg-focus .dg-wk-cards {
  animation: dgCardsFocus 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, dgShakeX 2.6s ease-in-out 0.6s infinite reverse;
}
.dg-stage.dg-focus .dg-corpus { margin-inline: auto; }
@keyframes dgSideFocus {
  from { transform: translateX(0); }
  to   { transform: translateX(1.6rem) scale(1.03); }
}
@keyframes dgCardsFocus {
  from { transform: translateX(0); }
  to   { transform: translateX(-1.2rem) scale(1.02); }
}
@keyframes dgShakeX {
  0%, 100% { margin-top: 0; }
  25% { margin-top: -1px; }
  75% { margin-top: 1px; }
}
/* 点击反馈：左侧对应数值行弹跳一下（模型数值在上涨的提示） */
.dg-side-row.bump { animation: dgSideBump 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dgSideBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.dg-side-row.bump .dg-side-num { animation: dgNumPop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dgNumPop {
  0% { transform: scale(1); color: var(--aqua-primary-deep); }
  45% { transform: scale(1.35); color: #1f9d7a; }
  100% { transform: scale(1); }
}
/* 飘字加大一点 + 允许浮出卡片（页面已 overflow-x hidden，不会再出横向滑竿）*/
.dg-work-float { font-size: 0.92rem; z-index: 8; }
.dg-work-float.crit { font-size: 1.08rem; }
@media (prefers-reduced-motion: reduce) {
  .dg-stage.dg-focus .dg-side-stats,
  .dg-stage.dg-focus .dg-wk-cards { animation: none; }
  .dg-side-row.bump, .dg-side-row.bump .dg-side-num { animation: none; }
}

/* X8b 行动页再压缩：卡片 5 列 + 描述一行，两行放完 10 张卡，整页不出滑竿 */
.dg-act-row { grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: 0.35rem; }
.dg-act-btn { padding: 0.34rem 0.42rem; }
.dg-act-name { font-size: 0.66rem; }
.dg-act-desc { -webkit-line-clamp: 1; font-size: 0.56rem; }
.dg-act-cost { font-size: 0.54rem; }
.dg-act-tabs .dg-act-tab { padding: 0.3rem 0.5rem; font-size: 0.66rem; }
.dg-act-sub { font-size: 0.6rem; }
.dg-free-row { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.dg-free-desc { -webkit-line-clamp: 1; }
/* 团队建设 6 张卡 → 3 列 2 行 */
.dg-tb-block .dg-free-row { grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); }
.dg-actions { margin-top: 0.5rem; }

/* X8c 行动卡最终压缩：效果说明收进悬停 title（卡面只留 图标+名称+成本），6 列两行放完 */
.dg-act-row { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); }
.dg-act-desc { display: none; }
.dg-act-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* X8d 团队 tab 一屏收口：团建卡效果说明收进悬停 title（badge 已带成本/次数），
   管理行动卡与团建卡统一紧凑高度 */
.dg-tb-block .dg-free-desc { display: none; }
.dg-tb-block .dg-free-card { padding: 0.36rem 0.45rem; gap: 0.08rem; }
.dg-tb-block .dg-free-name { font-size: 0.66rem; }
.dg-tb-block .dg-free-badge { font-size: 0.54rem; }
.dg-tb-picker { margin-top: 0.35rem; }

/* X8e 存档弹窗一屏：去掉副标题、槽位再紧凑，8 槽 + 自动档全部进视口 */
.dg-modal-save { width: min(92vw, 30rem); }
.dg-modal-save .dg-save-list { gap: 0.32rem; margin: 0.45rem 0 0.6rem; }
.dg-modal-save .dg-save-row { padding: 0.36rem 0.45rem; gap: 0.22rem; }
.dg-modal-save .dg-save-name { font-size: 0.64rem; margin-bottom: 0.05rem; }
.dg-modal-save .dg-save-info .dg-dim { font-size: 0.54rem; line-height: 1.4; }
.dg-modal-save .dg-btn { padding: 0.3rem 0.55rem; font-size: 0.62rem; }
.dg-modal-save .dg-actions { margin-top: 0.35rem; }

/* ==========================================================================
   办公室主界面（2026-08-30 新 UI）
   --------------------------------------------------------------------------
   布局 / 比例 / 动效 1:1 复用 demo（doc/pages/小鲸鱼UI重构demo/pages/office.html）：
   顶部灵动岛 56px + 主区（左 64px 行动列 | 场景）+ 底部 96px 模型条。
   二级面板：全屏遮罩 + 中部卡片，不模糊、不缩放、一屏无滚动条。
   ========================================================================== */
.app-shell.office-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 56px 1fr 96px;
  padding: 10px 14px;
  gap: 10px;
  z-index: 1;
}
.office-shell .island-topbar {
  position: relative;
  width: min(1080px, calc(100% - 20px));
  height: 48px;
  justify-self: center;
  /* 场景因左列行动列整体右移 38px（(64+12)/2）；灵动岛同步右移，保持与场景左对齐 */
  margin-left: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px -20px rgba(23, 50, 77, 0.38), 0 2px 10px -10px rgba(23, 50, 77, 0.22);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(184, 229, 247, 0.78);
  z-index: 5;
}
.office-shell .top-left, .office-shell .top-right { display: flex; align-items: center; gap: 6px; }
.office-shell .week-chip,
.office-shell .money-chip,
.office-shell .brand-chip,
.office-shell .corpus-chip {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 800;
}
.office-shell .week-chip { color: var(--aqua-primary-deep); background: var(--aqua-primary-soft); border: 1px solid rgba(184, 229, 247, 0.86); }
.office-shell .money-chip { color: var(--aqua-foreground); background: rgba(255,255,255,0.76); border: 1px solid rgba(184, 229, 247, 0.76); }
.office-shell .money-chip b, .office-shell .week-chip b, .office-shell .corpus-chip b { font-family: var(--font-num); font-weight: 900; }
.office-shell .brand-chip { color: var(--aqua-gold); background: var(--aqua-gold-soft); border: 1px solid rgba(242, 169, 59, 0.3); gap: 2px; }
.office-shell .corpus-chip { color: var(--aqua-primary-deep); background: var(--aqua-primary-soft); border: 1px solid rgba(184, 229, 247, 0.86); }
.office-shell .chip-warn {
  height: 34px; display: inline-flex; align-items: center; padding: 0 12px;
  border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--aqua-error); background: #ffeef0; border: 1px solid rgba(230, 107, 122, 0.4);
}
/* 灵动岛胶囊防溢出：窗口/缩放变大字号随之变大时，分组与胶囊可收缩、
   超宽内容以省略号截断而非挤出胶囊（min-width:0 允许 flex 收缩） */
.office-shell .top-left,
.office-shell .top-right { min-width: 0; flex-shrink: 1; }
.office-shell .week-chip,
.office-shell .money-chip,
.office-shell .brand-chip,
.office-shell .corpus-chip,
.office-shell .chip-warn {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.office-shell .island-btn { flex-shrink: 0; }
.office-shell .island-btn {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 11px; border: 0; border-radius: 999px;
  color: var(--aqua-primary-deep); background: rgba(213, 242, 255, 0.64);
  font-weight: 900; font-size: 12px; cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.office-shell .island-btn:hover { transform: translateY(-1px); background: rgba(213, 242, 255, 0.88); }
.office-shell .island-btn.icon-only { width: 34px; padding: 0; }
.office-shell .island-btn svg { width: 16px; height: 16px; }
.office-shell .main-area { display: grid; grid-template-columns: 64px 1fr; gap: 12px; min-height: 0; }
.office-shell .action-col {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(184, 229, 247, 0.6);
  border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 12px 28px -24px rgba(23, 50, 77, 0.3);
}
.office-shell .action-btn {
  width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: 1px solid transparent; border-radius: 14px; background: transparent;
  color: var(--aqua-ink-2); cursor: pointer; transition: all 180ms ease; position: relative;
}
.office-shell .action-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
.office-shell .action-btn .btn-label { font-size: 10px; font-weight: 700; line-height: 1; }
.office-shell .action-btn:hover { background: var(--aqua-primary-soft); color: var(--aqua-primary-deep); transform: translateY(-1px); }
.office-shell .action-btn.active {
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  color: #fff; border-color: var(--aqua-primary-deep); box-shadow: 0 8px 18px -12px rgba(39, 137, 196, 0.6);
}
.office-shell .btn-badge {
  position: absolute; top: -3px; right: -6px; padding: 1px 5px; border-radius: 999px;
  font-size: 9px; font-weight: 800; line-height: 1.4; white-space: nowrap;
  pointer-events: none; border: 1.5px solid #fff; background: var(--aqua-error); color: #fff;
}
.office-shell .btn-badge.plan-badge { background: var(--aqua-pink); }
.office-shell .countdown-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--aqua-pink); color: #fff; font-size: 9px; font-weight: 800;
  display: grid; place-items: center; line-height: 1; animation: badge-pulse 2s ease-in-out infinite;
}
.office-shell .count-badge {
  position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--aqua-success); color: #fff; font-size: 9px; font-weight: 800;
  display: grid; place-items: center; line-height: 1; border: 1.5px solid #fff;
}
@keyframes badge-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.office-shell .action-divider { width: 32px; height: 1px; background: var(--aqua-border); margin: 3px 0; }

.office-shell .office-scene {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(184, 229, 247, 0.7); box-shadow: 0 14px 32px -26px rgba(23, 50, 77, 0.32);
  min-height: 0; height: 100%; width: 100%;
}
.office-shell .office-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.office-shell .office-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(231, 247, 255, 0.04) 0%, rgba(231, 247, 255, 0.02) 50%, rgba(231, 247, 255, 0.10) 100%);
  pointer-events: none;
}
.office-shell .employee-markers { position: absolute; inset: 0; pointer-events: none; }
.office-shell .emp-marker {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: auto; cursor: pointer; transition: transform 200ms ease;
}
/* ⚠️ hover 必须带上 -50%/-26px 的偏移：下面 .emp-marker:hover 也写了同样的 transform，
   但本选择器优先级更高（.office-shell .emp-marker:hover），若这里只写 translateY(-3px)，
   hover 时头像会丢失偏移、跳到座位点的右下方。 */
.office-shell .emp-marker:hover { transform: translate(-50%, -37px) scale(1.05); }
.office-shell .emp-avatar {
  width: 69px; height: 69px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 26px; border: 4px solid rgba(255,255,255,0.92);
  box-shadow: 0 9px 24px -12px rgba(23, 50, 77, 0.5); position: relative;
}
.office-shell .emp-avatar::after {
  content: ""; position: absolute; bottom: -3px; right: -3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--aqua-success); border: 3px solid #fff;
}
.office-shell .emp-marker.busy .emp-avatar::after { background: var(--aqua-warning); }
.office-shell .emp-marker.full .emp-avatar { animation: emp-glow 1.8s ease-in-out infinite; }
.office-shell .emp-marker.full .emp-avatar::after { background: var(--aqua-gold); }
/* 状态头像角点：待入职(蓝) / 已下班(灰) / 休假(橙) */
.office-shell .emp-marker.pending .emp-avatar::after { background: var(--aqua-primary); }
.office-shell .emp-marker.off     .emp-avatar::after { background: var(--aqua-ink-3); }
.office-shell .emp-marker.rest    .emp-avatar::after { background: var(--aqua-warning) !important; }
@keyframes emp-glow {
  0%,100% { box-shadow: 0 6px 16px -8px rgba(23,50,77,0.5), 0 0 0 0 rgba(242,169,59,0.55); }
  50% { box-shadow: 0 6px 16px -8px rgba(23,50,77,0.5), 0 0 0 10px rgba(242,169,59,0); }
}
.office-shell .emp-name {
  padding: 3px 12px; background: rgba(255,255,255,0.95); border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: 999px; font-size: 17px; font-weight: 800; color: var(--aqua-foreground);
  white-space: nowrap; box-shadow: 0 4px 10px -8px rgba(23, 50, 77, 0.4);
}
.office-shell .emp-status {
  /* 浮在头像上方、不占布局流，这样 .emp-marker 顶部始终是头像，
     座位点才能精确对齐头像中心（与编辑器座位圆心一致） */
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  padding: 2px 10px; background: var(--aqua-success); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 800; white-space: nowrap; border: 1.5px solid #fff;
  z-index: 2;
}
/* 工程师状态配色：工作中(绿) / 待入职(蓝) / 等立项(紫) / 已下班(灰) / 休假(橙) */
.office-shell .emp-status.st-pending { background: var(--aqua-primary); }
.office-shell .emp-status.st-wait    { background: var(--aqua-ink-2); }
.office-shell .emp-status.st-off     { background: var(--aqua-ink-3); }
.office-shell .emp-status.st-rest    { background: var(--aqua-warning); }
.office-shell .emp-stamina {
  display: flex; align-items: center; gap: 5px; padding: 3px 10px; background: rgba(255,255,255,0.9);
  border: 1px solid rgba(184, 229, 247, 0.7); border-radius: 999px;
  font-size: 11px; font-weight: 800; color: var(--aqua-warning); white-space: nowrap;
}
.office-shell .emp-stamina svg { width: 14px; height: 14px; }
.office-shell .office-paused-tag {
  /* V3.5.x：左行动列已浮动盖在场景左缘(8px..72px)，暂停标签改放右上角避免被侧栏挡住。
     2026-09-05：可点击恢复（读档残留的暂停不再「无提示冻结」） */
  position: absolute; top: 10px; right: 12px; left: auto; padding: 3px 10px; border-radius: 999px;
  background: rgba(23, 50, 77, 0.62); color: #fff; font-size: 11px; font-weight: 800;
  cursor: pointer; animation: pausedTagPulse 1.6s ease-in-out infinite;
}
@keyframes pausedTagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 75, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 194, 75, 0.45); }
}

.office-shell .bottom-panel { display: grid; grid-template-columns: 1fr 260px; gap: 12px; min-height: 0; }
.office-shell .model-stats {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px;
  margin-left: 19px;   /* 2026-09-03：整体右移 19px（用户调整） */
  background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(184, 229, 247, 0.7);
  border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 12px 28px -24px rgba(23, 50, 77, 0.32);
}
.office-shell .model-title {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-right: 16px; border-right: 1px solid var(--aqua-border);
}
.office-shell .model-name { font-size: 14px; font-weight: 900; color: var(--aqua-foreground); }
.office-shell .model-sub { font-size: 10px; color: var(--aqua-ink-3); }
.office-shell .model-ver {
  padding: 2px 8px; border-radius: 999px; background: var(--aqua-primary-soft);
  color: var(--aqua-primary-deep); font-size: 10px; font-weight: 800;
}
.office-shell .stats-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.office-shell .stat-item { display: flex; flex-direction: column; gap: 4px; }
.office-shell .stat-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--aqua-ink-2); font-weight: 600; }
.office-shell .stat-label b { font-family: var(--font-num); color: var(--aqua-foreground); font-weight: 800; font-size: 12px; }
.office-shell .stat-bar { height: 6px; border-radius: 999px; background: var(--aqua-surface-3); overflow: hidden; }
.office-shell .stat-bar-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.office-shell .stat-bar-fill.code { background: linear-gradient(90deg, #6fc3ff, var(--aqua-primary-deep)); }
.office-shell .stat-bar-fill.text { background: linear-gradient(90deg, #7ed4f0, #3dbbd8); }
.office-shell .stat-bar-fill.safe { background: linear-gradient(90deg, #ffcf8a, var(--aqua-warning)); }
.office-shell .stat-bar-fill.stable { background: linear-gradient(90deg, #7ed4b0, var(--aqua-success)); }
.office-shell .collect-zone {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 16px;
  background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(184, 229, 247, 0.7);
  border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 12px 28px -24px rgba(23, 50, 77, 0.32);
}
.office-shell .collect-info { display: flex; align-items: baseline; justify-content: space-between; }
.office-shell .collect-label { font-size: 11px; color: var(--aqua-ink-2); font-weight: 600; }
.office-shell .collect-val { font-family: var(--font-num); font-size: 20px; font-weight: 900; color: var(--aqua-primary-deep); }
.office-shell .collect-val span { font-size: 11px; font-weight: 600; color: var(--aqua-ink-3); }

/* ---- 二级面板：全屏遮罩 + 中部卡片（不模糊、不缩放、一屏无滚动）---- */
.office-modal-mask {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(23, 50, 77, 0.28);
  display: grid; place-items: center; padding: 2vh 1rem;
}
.office-modal {
  width: min(960px, 96vw);
  max-height: 94vh;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: 22px;
  box-shadow: 0 30px 70px -40px rgba(23, 50, 77, 0.6);
  overflow: hidden;
  animation: omIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes omIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.om-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--aqua-border);
  background: linear-gradient(180deg, #f4fbff, #eaf7fe);
}
.om-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 900; color: var(--aqua-primary-deep); }
.om-title svg { width: 18px; height: 18px; }
.om-close {
  width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.8); color: var(--aqua-ink-2); cursor: pointer; transition: all 160ms ease;
}
.om-close:hover { background: var(--aqua-pink-soft); color: var(--aqua-pink-deep); transform: rotate(90deg); }
.om-body { padding: 0.85rem 1rem; overflow: hidden; }
.om-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
  padding: 0.65rem 1rem; border-top: 1px solid var(--aqua-border); background: var(--aqua-surface);
}
.om-foot .skew-btn { min-width: 96px; }
/* 空态：一张图 + 一句话 */
.om-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.2rem 0 0.6rem; }
.om-empty img { width: 150px; height: 150px; object-fit: contain; }
.om-empty-tip { font-size: 0.78rem; font-weight: 800; color: var(--aqua-ink-2); }
/* 2026-09-02：空态整体居中。
   部分面板的 .modal-body 是 grid 多列（如招聘 = 260px 候选人列 + 1fr 详情列），
   空态只占第一列 → 立绘与文案贴在左半边看着像没居中。这里让唯一的空态子项
   跨满所有列并水平垂直居中（flex 容器下 grid-column 自动失效，margin:auto 同样生效）。 */
.modal-body > .om-empty:only-child {
  width: 100%;
  grid-column: 1 / -1;
  margin: auto;
  padding: 1.6rem 1rem;
}

/* ==========================================================================
   办公室二级面板内部样式（2026-08-30 新 UI）
   全部按 demo 的紧凑比例，一屏放得下、禁止滚动条。
   ========================================================================== */
.om-subhead { font-size: 0.72rem; font-weight: 800; color: var(--aqua-ink-2); margin-bottom: 0.4rem; }
.om-split { display: grid; grid-template-columns: 240px 1fr; gap: 0.8rem; align-items: start; }
.om-left, .om-right { min-width: 0; }
.om-emp-list { display: flex; flex-direction: column; gap: 0.32rem; max-height: 46vh; overflow: hidden; }
.om-emp-card {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.34rem 0.45rem;
  background: #fff; border: 1px solid var(--aqua-border); border-radius: 12px;
  cursor: pointer; transition: all 160ms ease; text-align: left;
}
.om-emp-card:hover { background: var(--aqua-primary-soft); transform: translateX(2px); }
.om-emp-card.on { border-color: var(--aqua-primary); background: var(--aqua-primary-soft); box-shadow: 0 6px 14px -10px rgba(39,137,196,0.7); }
.om-emp-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.om-emp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.om-emp-meta b { font-size: 0.72rem; font-weight: 800; color: var(--aqua-foreground); }
.om-emp-meta i { font-size: 0.6rem; font-style: normal; color: var(--aqua-ink-3); }
.om-emp-prod { font-family: var(--font-num); font-size: 0.7rem; font-weight: 800; color: var(--aqua-primary-deep); }
.om-pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.68rem; font-weight: 700; color: var(--aqua-ink-2); }
.om-page-btn { width: 24px; height: 24px; border: 1px solid var(--aqua-border); border-radius: 8px; background: #fff; cursor: pointer; color: var(--aqua-primary-deep); font-weight: 900; }

.om-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.55rem; }
.om-overview > div { padding: 0.34rem 0.45rem; background: var(--aqua-surface); border: 1px solid var(--aqua-border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.om-overview span { font-size: 0.58rem; color: var(--aqua-ink-3); }
.om-overview b { font-family: var(--font-num); font-size: 0.78rem; font-weight: 900; color: var(--aqua-primary-deep); }

.om-detail { padding: 0.5rem 0.55rem; background: #fff; border: 1px solid var(--aqua-border); border-radius: 14px; }
.om-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.om-detail-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; }
.om-detail-name { font-size: 0.8rem; font-weight: 900; color: var(--aqua-foreground); }
.om-detail-name i { font-size: 0.62rem; font-style: normal; color: var(--aqua-ink-3); margin-left: 0.25rem; }
.om-detail-sub { font-size: 0.62rem; color: var(--aqua-ink-3); }
.om-detail-stats { display: flex; flex-direction: column; gap: 0.22rem; margin-bottom: 0.4rem; }
.om-bar { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 0.4rem; font-size: 0.6rem; color: var(--aqua-ink-2); }
.om-bar i { display: block; height: 5px; border-radius: 999px; background: var(--aqua-surface-3); overflow: hidden; }
.om-bar u { display: block; height: 100%; background: linear-gradient(90deg, #6fc3ff, var(--aqua-primary-deep)); }
.om-bar b { font-family: var(--font-num); font-size: 0.66rem; color: var(--aqua-foreground); text-align: right; }
.om-detail-traits { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.45rem; }
.om-trait { padding: 2px 8px; border-radius: 999px; background: var(--aqua-primary-soft); color: var(--aqua-primary-deep); font-size: 0.58rem; font-weight: 800; }
.om-detail-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.om-detail-actions .skew-btn { flex: 1; min-width: 0; padding: 0.35rem 0.3rem; font-size: 0.66rem; }
.om-resume { font-size: 0.6rem; line-height: 1.5; color: var(--aqua-ink-2); margin-top: 0.35rem; }

/* 立项 */
.om-plan { display: flex; flex-direction: column; gap: 0.6rem; }
.om-plan-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.om-arrow { width: 26px; height: 26px; border: 1px solid var(--aqua-border); border-radius: 8px; background: #fff; cursor: pointer; color: var(--aqua-primary-deep); font-weight: 900; }
.om-arrow:hover { background: var(--aqua-primary-soft); }
.om-pick-card {
  flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  padding: 0.42rem 0.55rem; background: #fff; border: 1px solid var(--aqua-border);
  border-radius: 12px; text-align: left;
}
.om-pick-name { font-size: 0.74rem; font-weight: 900; color: var(--aqua-foreground); }
.om-pick-sub { font-size: 0.58rem; color: var(--aqua-primary-deep); }
.om-pick-desc { font-size: 0.58rem; color: var(--aqua-ink-3); line-height: 1.4; }
.om-syn { padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--aqua-gold-soft); color: var(--aqua-gold); font-size: 0.6rem; font-weight: 800; white-space: nowrap; }
.om-chip {
  padding: 0.28rem 0.7rem; border: 1px solid var(--aqua-border); border-radius: 999px;
  background: #fff; font-size: 0.66rem; font-weight: 800; color: var(--aqua-ink-2); cursor: pointer;
}
.om-chip:hover { background: var(--aqua-primary-soft); }
.om-chip.on { background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep)); color: #fff; border-color: var(--aqua-primary-deep); }
.om-chip.off, .om-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.om-chip.wide { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 12px; padding: 0.3rem 0.6rem; }
.om-chip.wide b { font-size: 0.66rem; }
.om-chip.wide i { font-size: 0.56rem; font-style: normal; color: var(--aqua-ink-3); }
.om-chip.wide.on i { color: rgba(255,255,255,0.85); }
.om-dim { font-size: 0.58rem; color: var(--aqua-ink-3); }

/* 攻关 */
.om-focus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.om-focus-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.6rem 0.45rem;
  background: #fff; border: 1px solid var(--aqua-border); border-radius: 14px; cursor: pointer;
  transition: all 160ms ease;
}
.om-focus-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -16px rgba(23,50,77,0.5); }
.om-focus-card.on { border-color: var(--aqua-pink); background: var(--aqua-pink-soft); }
.om-focus-icon { font-size: 1.4rem; }
.om-focus-card b { font-size: 0.72rem; font-weight: 900; color: var(--aqua-foreground); }
.om-focus-card i { font-size: 0.58rem; font-style: normal; color: var(--aqua-ink-3); line-height: 1.4; text-align: center; }
.om-focus-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.55rem; font-size: 0.66rem; color: var(--aqua-ink-2); }
.om-focus-foot b { font-family: var(--font-num); color: var(--aqua-primary-deep); }
.om-cost { font-family: var(--font-num); font-weight: 800; color: var(--aqua-pink-deep); }

/* 论文 */
.om-paper-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.om-paper-card {
  display: flex; flex-direction: column; gap: 0.22rem; padding: 0.5rem 0.55rem; text-align: left;
  background: #fff; border: 1px solid var(--aqua-border); border-radius: 14px; cursor: pointer;
  transition: all 160ms ease;
}
.om-paper-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -16px rgba(23,50,77,0.5); }
.om-paper-card.on { border-color: var(--aqua-primary); background: var(--aqua-primary-soft); }
.om-paper-top { display: flex; align-items: center; justify-content: space-between; }
.om-paper-venue { font-size: 0.54rem; font-weight: 800; color: var(--aqua-ink-3); }
.om-paper-status { font-size: 0.52rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--aqua-primary-soft); color: var(--aqua-primary-deep); }
.om-paper-title { font-size: 0.7rem; font-weight: 900; color: var(--aqua-foreground); line-height: 1.3; }
.om-paper-authors { font-size: 0.56rem; color: var(--aqua-ink-3); }
.om-paper-desc { font-size: 0.56rem; color: var(--aqua-ink-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.om-paper-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.2rem; }
.om-paper-eff { font-size: 0.56rem; font-weight: 800; color: var(--aqua-success); }
.om-paper-cost { font-size: 0.56rem; font-weight: 800; color: var(--aqua-ink-3); }

/* 算力 */
.om-shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.om-shop-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.18rem;
  padding: 0.6rem 0.4rem; background: #fff; border: 1px solid var(--aqua-border);
  border-radius: 14px; cursor: pointer; transition: all 160ms ease;
}
.om-shop-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -16px rgba(23,50,77,0.5); }
.om-shop-card.on { border-color: var(--aqua-primary); background: var(--aqua-primary-soft); }
.om-shop-card:disabled { cursor: default; }
.om-shop-icon { font-size: 1.5rem; }
.om-shop-card b { font-size: 0.72rem; font-weight: 900; color: var(--aqua-foreground); }
.om-shop-price { font-family: var(--font-num); font-size: 0.7rem; font-weight: 900; color: var(--aqua-pink-deep); }
.om-shop-card i { font-size: 0.56rem; font-style: normal; color: var(--aqua-ink-3); }
.om-shop-owned { position: absolute; top: 6px; right: 6px; font-size: 0.5rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--aqua-success); color: #fff; }
.om-shop-tip { margin-top: 0.5rem; font-size: 0.62rem; color: var(--aqua-ink-3); }
.om-shop-tip b { color: var(--aqua-primary-deep); }

/* 测试（聊天） */
.om-test { display: grid; grid-template-columns: 1fr 200px; gap: 0.7rem; align-items: stretch; }
.om-test .dg-chat { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.7rem; background: var(--aqua-surface-2); border: 1px solid var(--aqua-border); border-radius: 16px; }
.om-test .dg-chat-head { display: flex; align-items: center; gap: 0.4rem; }
.om-test .dg-chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.om-test .dg-chat-name { font-size: 0.76rem; font-weight: 900; color: var(--aqua-foreground); }
.om-test .dg-chat-state { font-size: 0.6rem; color: var(--aqua-ink-3); }
.om-test .dg-chat-body { flex: 1; min-height: 150px; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 0; }
.om-test .dg-chat-empty { margin: auto; font-size: 0.66rem; color: var(--aqua-ink-3); }
.dg-chat-msg { display: flex; opacity: 0; transform: translateY(6px); }
.dg-chat-msg.in { animation: chatIn 0.28s ease forwards; }
.dg-chat-msg.me { justify-content: flex-end; }
@keyframes chatIn { to { opacity: 1; transform: none; } }
.dg-chat-bubble { max-width: 78%; padding: 0.4rem 0.65rem; border-radius: 14px; font-size: 0.7rem; line-height: 1.5; }
.dg-chat-msg.me .dg-chat-bubble { background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep)); color: #fff; border-bottom-right-radius: 4px; }
.dg-chat-msg.ai .dg-chat-bubble { background: #fff; color: var(--aqua-foreground); border: 1px solid var(--aqua-border); border-bottom-left-radius: 4px; }
.dg-chat-msg.ai.garbled .dg-chat-bubble { color: var(--aqua-ink-3); font-family: var(--font-num); letter-spacing: 0.5px; }
.dg-chat-msg .typing::after { content: "▌"; animation: caret 0.7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.om-test .dg-chat-tip { font-size: 0.62rem; color: var(--aqua-ink-2); }
.om-test .dg-chat-input { display: flex; align-items: center; gap: 0.4rem; }
.dg-chat-draft { flex: 1; padding: 0.35rem 0.6rem; background: #fff; border: 1px solid var(--aqua-border); border-radius: 10px; font-size: 0.68rem; color: var(--aqua-ink-2); }
.om-test-side { display: flex; flex-direction: column; gap: 0.3rem; }

/* 评审 */
.om-review { display: flex; flex-direction: column; gap: 0.55rem; }
.om-review-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.35rem; border-bottom: 1px solid var(--aqua-border); }
.om-review-head span { font-size: 0.66rem; font-weight: 800; letter-spacing: 1px; color: var(--aqua-ink-3); }
.om-review-head b { font-size: 0.78rem; font-weight: 900; color: var(--aqua-primary-deep); }
.om-review-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.om-review-stats .stat-label b { font-family: var(--font-num); }
.om-review-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 0.4rem; border-top: 1px solid var(--aqua-border); font-size: 0.68rem; color: var(--aqua-ink-2); }
.om-review-foot b { font-family: var(--font-num); color: var(--aqua-primary-deep); font-size: 0.8rem; }

/* 已完成态（立项后 / 攻关中 / 研究中） */
.om-done { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.3rem 0; }
.om-done-title { font-size: 0.78rem; font-weight: 900; color: var(--aqua-primary-deep); margin-bottom: 0.2rem; }
.om-done-line { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; background: var(--aqua-surface); border-radius: 10px; font-size: 0.68rem; }
.om-done-line span { color: var(--aqua-ink-3); }
.om-done-line b { color: var(--aqua-foreground); font-weight: 800; }
.om-done-tip { margin-top: 0.25rem; font-size: 0.6rem; color: var(--aqua-ink-3); line-height: 1.5; }


/* ==========================================================================
   一级界面切换 · 彩条过渡动画（2026-08-30）
   彩色圆角彩条从左下角向右上角划过，同时下一个界面出现。
   ========================================================================== */
/* 一级界面切换 · 彩条过渡：多条圆角彩条并排成斜向条纹覆盖整屏，从左下扫向右上 */
.dg-transition {
  position: fixed; inset: 0; z-index: 9999;   /* 最顶层：覆盖新手教学/所有 UI 的转场彩条 */
  pointer-events: none; overflow: hidden;
}
.dg-transition i {
  position: absolute;
  left: -60%;
  width: 220%;
  height: var(--bar-h, 14vh);
  top: var(--bar-top, 0%);
  border-radius: 999px;
  background: var(--bar-bg, #6fc3ff);
  transform-origin: center;
  will-change: transform, opacity;
  animation: dgBar var(--bar-ms, 620ms) cubic-bezier(0.36, 0, 0.2, 1) var(--bar-delay, 0ms) both;
}
@keyframes dgBar {
  /* 0%~24%：彩条停在覆盖位——切换/渲染都在这一层后面完成，玩家先看到的是整屏彩条 */
  0%   { opacity: 1; transform: rotate(-18deg) translate3d(0, 0, 0); }
  24%  { opacity: 1; transform: rotate(-18deg) translate3d(0, 0, 0); }
  /* 24%~100%：整条扫出画面，背景随之露出（「彩条过去之后背景才出来」） */
  94%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(-18deg) translate3d(118%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-transition i { animation-duration: 1ms; }
}

/* ====== [DEMO 移植] office.html 完整样式（以 demo 为准，覆盖此前手搬版本） ====== */

:root {
  --aqua-background: #e7f7ff;
  --aqua-foreground: #17324d;
  --aqua-card: #ffffff;
  --aqua-card-foreground: #17324d;
  --aqua-popover: #ffffff;
  --aqua-popover-foreground: #17324d;
  --aqua-primary: #4fb7ee;
  --aqua-primary-foreground: #ffffff;
  --aqua-muted: #dff3fc;
  --aqua-muted-foreground: #6d8aa2;
  --aqua-border: #b8e5f7;
  --aqua-input: #c9ebf8;
  --aqua-ring: #2fa4df;
  --aqua-primary-soft: #d5f2ff;
  --aqua-primary-deep: #2789c4;
  --aqua-surface: #f8fdff;
  --aqua-surface-2: #edf9ff;
  --aqua-surface-3: #d9f1fb;
  --aqua-line: #b8e5f7;
  --aqua-ink-2: #58758e;
  --aqua-ink-3: #8aa6ba;
  --aqua-success: #53b98d;
  --aqua-warning: #f2b84b;
  --aqua-error: #e66b7a;
  --aqua-pink: #ff7eb3;
  --aqua-pink-deep: #e86a9d;
  --aqua-pink-soft: #ffe3f2;
  --aqua-gold: #f2a93b;
  --aqua-gold-soft: #fff3d6;
  --aqua-radius-sm: 6px;
  --aqua-radius-md: 12px;
  --aqua-radius-lg: 18px;
  --aqua-radius-xl: 24px;
  --aqua-radius-pill: 999px;
  --shadow-soft: 0 10px 24px -22px rgba(23, 50, 77, 0.38);
  --shadow-card: 0 14px 28px -26px rgba(23, 50, 77, 0.30);
  --shadow-float: 0 18px 42px -34px rgba(23, 50, 77, 0.35);
  --font-main: "HarmonyOS Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: "DIN Alternate", "Bahnschrift", "Arial", sans-serif;
}
  

  @theme inline {
    --color-background: var(--aqua-background);
    --color-foreground: var(--aqua-foreground);
    --color-card: var(--aqua-card);
    --color-card-foreground: var(--aqua-card-foreground);
    --color-popover: var(--aqua-popover);
    --color-popover-foreground: var(--aqua-popover-foreground);
    --color-primary: var(--aqua-primary);
    --color-primary-foreground: var(--aqua-primary-foreground);
    --color-muted: var(--aqua-muted);
    --color-muted-foreground: var(--aqua-muted-foreground);
    --color-border: var(--aqua-border);
    --color-input: var(--aqua-input);
    --color-ring: var(--aqua-ring);
    --radius-sm: var(--aqua-radius-sm);
    --radius-md: var(--aqua-radius-md);
    --radius-lg: var(--aqua-radius-lg);
  }
  @layer base {
    body { background: var(--aqua-background); color: var(--aqua-foreground); }
  }
  

    .bg-background { background-color: var(--aqua-background); }
    .text-background { color: var(--aqua-background); }
    .bg-foreground { background-color: var(--aqua-foreground); }
    .text-foreground { color: var(--aqua-foreground); }
    .bg-card { background-color: var(--aqua-card); }
    .text-card-foreground { color: var(--aqua-card-foreground); }
    .bg-popover { background-color: var(--aqua-popover); }
    .text-popover-foreground { color: var(--aqua-popover-foreground); }
    .bg-primary { background-color: var(--aqua-primary); }
    .text-primary { color: var(--aqua-primary); }
    .bg-muted { background-color: var(--aqua-muted); }
    .text-muted-foreground { color: var(--aqua-muted-foreground); }
    .bg-border { background-color: var(--aqua-border); }
    .border-border { border-color: var(--aqua-border); }
    .bg-input { background-color: var(--aqua-input); }
    .bg-ring { background-color: var(--aqua-ring); }
  

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  color: var(--aqua-foreground);
  -webkit-font-smoothing: antialiased;
}

/* ========== 整体布局 ========== */
.app-shell {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  grid-template-rows: 56px 1fr 96px;
  padding: 10px 14px;
  gap: 10px;
  z-index: 1;
}

/* ========== 顶部灵动岛 ========== */
.island-topbar {
  position: relative; width: min(1080px, calc(100% - 20px));
  height: 48px; justify-self: center;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 12px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px -20px rgba(23, 50, 77, 0.38), 0 2px 10px -10px rgba(23, 50, 77, 0.22);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(184, 229, 247, 0.78);
  z-index: 5;
}
.top-left, .top-right { display: flex; align-items: center; gap: 6px; }
.week-chip, .money-chip, .brand-chip {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: 999px; padding: 0 12px;
  font-size: 12px; font-weight: 800;
}
.week-chip { color: var(--aqua-primary-deep); background: var(--aqua-primary-soft); border: 1px solid rgba(184, 229, 247, 0.86); }
.money-chip { color: var(--aqua-foreground); background: rgba(255,255,255,0.76); border: 1px solid rgba(184, 229, 247, 0.76); }
.money-chip b, .week-chip b, .corpus-chip b { font-family: var(--font-num); font-weight: 900; }
.brand-chip { color: var(--aqua-gold); background: var(--aqua-gold-soft); border: 1px solid rgba(242, 169, 59, 0.3); gap: 2px; }
.corpus-chip {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: 999px; padding: 0 12px;
  font-size: 12px; font-weight: 800;
  color: var(--aqua-primary-deep); background: var(--aqua-primary-soft);
  border: 1px solid rgba(184, 229, 247, 0.86);
}
.island-btn {
  height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 11px; border: 0; border-radius: 999px;
  color: var(--aqua-primary-deep); background: rgba(213, 242, 255, 0.64);
  font-weight: 900; font-size: 12px; cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.island-btn:hover { transform: translateY(-1px); background: rgba(213, 242, 255, 0.88); }
.island-btn.icon-only { width: 34px; padding: 0; }
.island-btn svg { width: 16px; height: 16px; }

/* ========== 主内容区 ========== */
.main-area {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; min-height: 0;
}

/* ========== 左侧行动列 ========== */
.action-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 0;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(184, 229, 247, 0.6);
  border-radius: 18px; backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -24px rgba(23, 50, 77, 0.3);
}
.action-btn {
  width: 48px; height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: var(--aqua-ink-2);
  cursor: pointer; transition: all 180ms ease; position: relative;
}
.action-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
.action-btn .btn-label { font-size: 10px; font-weight: 700; line-height: 1; }
.action-btn:hover { background: var(--aqua-primary-soft); color: var(--aqua-primary-deep); transform: translateY(-1px); }
.action-btn.active {
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  color: #fff; border-color: var(--aqua-primary-deep);
  box-shadow: 0 8px 18px -12px rgba(39, 137, 196, 0.6);
}
.btn-badge {
  position: absolute; top: -3px; right: -6px;
  padding: 1px 5px; border-radius: 999px;
  font-size: 9px; font-weight: 800; line-height: 1.4;
  white-space: nowrap; pointer-events: none;
  border: 1.5px solid #fff;
}
.plan-badge {
  background: var(--aqua-gold); color: #fff;
  box-shadow: 0 4px 10px -6px rgba(242, 169, 59, 0.7);
}
.plan-badge.done {
  background: var(--aqua-success); color: #fff;
  box-shadow: 0 4px 10px -6px rgba(83, 185, 141, 0.7);
}
.action-btn .countdown-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--aqua-pink);
  color: #fff;
  font-size: 9px; font-weight: 800;
  display: grid; place-items: center;
  line-height: 1;
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.action-divider { width: 32px; height: 1px; background: var(--aqua-border); margin: 3px 0; }

/* ========== 办公室场景 ========== */
.office-scene {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(184, 229, 247, 0.7);
  box-shadow: 0 14px 32px -26px rgba(23, 50, 77, 0.32);
}
.office-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.office-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(231, 247, 255, 0.04) 0%, rgba(231, 247, 255, 0.02) 50%, rgba(231, 247, 255, 0.10) 100%);
  pointer-events: none;
}

/* 员工像素头像 — 只显示头像+名字 */
.employee-markers {
  position: absolute; inset: 0;
  pointer-events: none;
}
.emp-marker {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  pointer-events: auto;
  cursor: pointer;
  /* 座位点 = 头像中心（编辑器里座位圆的圆心就是座位位置）：
     水平居中 + 垂直上移半个头像，否则头像会整体偏到座位右下方 */
  transform: translate(-50%, -23px);
  transition: transform 200ms ease;
}
.emp-marker:hover { transform: translate(-50%, -26px) scale(1.05); }
.emp-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 17px;
  border: 3px solid rgba(255,255,255,0.92);
  box-shadow: 0 6px 16px -8px rgba(23, 50, 77, 0.5);
  image-rendering: pixelated;
  position: relative;
}
.emp-avatar::after {
  content: "";
  position: absolute; bottom: -2px; right: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--aqua-success);
  border: 2px solid #fff;
}
.emp-marker.busy .emp-avatar::after { background: var(--aqua-warning); }
.emp-marker.full .emp-avatar { animation: emp-glow 1.8s ease-in-out infinite; }
.emp-marker.full .emp-avatar::after { background: var(--aqua-gold); }
@keyframes emp-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(242, 169, 59, 0.4), 0 6px 16px -8px rgba(23, 50, 77, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(242, 169, 59, 0.5), 0 10px 22px -8px rgba(242, 169, 59, 0.4); }
}
.emp-name {
  padding: 2px 8px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--aqua-foreground);
  white-space: nowrap;
  box-shadow: 0 4px 10px -8px rgba(23, 50, 77, 0.4);
}
.emp-stamina {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(184, 229, 247, 0.7);
  border-radius: 999px;
  font-size: 9px; font-weight: 700;
  color: var(--aqua-warning);
  white-space: nowrap;
}
.emp-stamina svg { width: 9px; height: 9px; }

/* 场景底部资源条 */
.scene-footer {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 8px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(184, 229, 247, 0.7);
  border-radius: 999px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -18px rgba(23, 50, 77, 0.4);
  font-size: 11px; font-weight: 700; color: var(--aqua-ink-2);
  z-index: 3;
}
.scene-footer .sf-item { display: flex; align-items: center; gap: 5px; }
.scene-footer .sf-item b { font-family: var(--font-num); color: var(--aqua-foreground); }
.scene-footer .sf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--aqua-border); align-self: center; }

/* ========== 底部模型参数面板 ========== */
.bottom-panel {
  display: grid; grid-template-columns: 1fr 260px; gap: 12px; min-height: 0;
}
.model-stats {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(184, 229, 247, 0.7);
  border-radius: 18px; backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -24px rgba(23, 50, 77, 0.32);
}
.model-title {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding-right: 16px; border-right: 1px solid var(--aqua-border);
}
.model-name { font-size: 14px; font-weight: 900; color: var(--aqua-foreground); }
.model-sub { font-size: 10px; color: var(--aqua-ink-3); }
.model-ver {
  padding: 2px 8px; border-radius: 999px;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep);
  font-size: 10px; font-weight: 800;
}
.stats-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--aqua-ink-2); font-weight: 600;
}
.stat-label b { font-family: var(--font-num); color: var(--aqua-foreground); font-weight: 800; font-size: 12px; }
.stat-bar { height: 6px; border-radius: 999px; background: var(--aqua-surface-3); overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.stat-bar-fill.code { background: linear-gradient(90deg, #6fc3ff, var(--aqua-primary-deep)); }
.stat-bar-fill.text { background: linear-gradient(90deg, #7ed4f0, #3dbbd8); }
.stat-bar-fill.safe { background: linear-gradient(90deg, #ffcf8a, var(--aqua-warning)); }
.stat-bar-fill.stable { background: linear-gradient(90deg, #7ed4b0, var(--aqua-success)); }

/* 收集区 */
.collect-zone {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; padding: 12px 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(184, 229, 247, 0.7);
  border-radius: 18px; backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -24px rgba(23, 50, 77, 0.32);
}
.collect-info { display: flex; align-items: baseline; justify-content: space-between; }
.collect-label { font-size: 11px; color: var(--aqua-ink-2); font-weight: 600; }
.collect-val { font-family: var(--font-num); font-size: 20px; font-weight: 900; color: var(--aqua-primary-deep); }
.collect-val span { font-size: 11px; font-weight: 600; color: var(--aqua-ink-3); }

/* ========== 圆角平行四边形主按钮（统一风格） ========== */
.skew-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 24px;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  color: #fff; font-size: 13px; font-weight: 900;
  border-radius: 12px;
  transform: skewX(-10deg);
  transition: transform 180ms ease, filter 180ms ease;
  overflow: hidden;
}
.skew-btn > * { transform: skewX(10deg); }
.skew-btn::before {
  content: ""; position: absolute; top: 0; left: -72%;
  width: 64%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: skewX(-15deg); transition: left 460ms ease;
  /* ⚠️ 2026-09-13 血泪：装饰性扫光层必须不吃点击。
     这个 ::before 从 left:-72% 起跑、宽 64%（= 按钮左侧外一大截），
     而 .modal-body *:not(.test-messages){overflow:visible} 会击穿 .skew-btn 的
     overflow:hidden → 扫光**逃出按钮**，横向盖到左边 60+px 处的团队翻页按钮上：
       ① 点「下一页」实际命中「安排」（closest('[data-action]') 找到的是安排）；
       ② hover 让扫光来回滑 → 指针下命中目标反复切换 → 按钮一直闪烁。
     （同款加固见 .dg-btn::after / .menu-start-btn::after / .arch-card::before …
       全站装饰层都有 pointer-events:none，这里以前漏了。） */
  pointer-events: none;
}
.skew-btn:hover { filter: brightness(1.05); transform: skewX(-10deg) translateY(-1px); }
.skew-btn:hover::before { left: 128%; }
.skew-btn:active { transform: skewX(-10deg) translateY(1px) scale(0.985); }
.skew-btn.pink { background: linear-gradient(135deg, #ff9ad5, var(--aqua-pink-deep)); }
.skew-btn.gold { background: linear-gradient(135deg, #ffd27a, #e89c20); color: #5a3d0b; }
.skew-btn.ghost {
  background: rgba(255,255,255,0.8);
  color: var(--aqua-primary-deep);
  border: 1px solid var(--aqua-border);
}
.skew-btn.ghost::before { display: none; }
.skew-btn.danger {
  background: linear-gradient(135deg, #ff8a9a, var(--aqua-error));
}
.skew-btn.sm { padding: 7px 16px; font-size: 12px; border-radius: 10px; }
.skew-btn svg { width: 14px; height: 14px; }
.skew-btn.disabled, .skew-btn:disabled {
  background: linear-gradient(135deg, #d0dde5, #b8c5cd);
  cursor: not-allowed;
  opacity: 0.7;
}
.skew-btn.disabled:hover, .skew-btn:disabled:hover {
  transform: skewX(-10deg) translateY(0);
  box-shadow: none;
}
.skew-btn.disabled::before, .skew-btn:disabled::before { display: none; }

/* ========== 二级弹窗（卡片式，无遮罩虚化） ========== */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  position: relative;
  pointer-events: auto;
  width: 600px;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(184, 229, 247, 0.9);
  border-radius: 22px;
  box-shadow: 0 28px 64px -24px rgba(23, 50, 77, 0.45), 0 8px 20px -12px rgba(23, 50, 77, 0.25);
  overflow: hidden;
  animation: cardPop 0.24s cubic-bezier(0.2, 1.1, 0.3, 1) forwards;
  display: flex;
  flex-direction: column;
}
@keyframes cardPop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-pink), var(--aqua-gold));
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--aqua-border);
  flex-shrink: 0;
}
.modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 900; color: var(--aqua-foreground);
}
.modal-title .title-icon {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep);
}
.modal-title .title-icon svg { width: 15px; height: 15px; }
.modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--aqua-surface-2); color: var(--aqua-ink-2);
  display: grid; place-items: center;
  transition: all 150ms ease;
}
.modal-close:hover { background: var(--aqua-error); color: #fff; transform: rotate(90deg); }
.modal-close svg { width: 13px; height: 13px; }
.modal-body {
  padding: 14px 20px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-body::-webkit-scrollbar { display: none; }
.modal-footer {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--aqua-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: var(--aqua-surface);
  flex-shrink: 0;
}

/* 飘字 */
.float-text {
  position: absolute; font-family: var(--font-num); font-weight: 800;
  font-size: 14px; color: var(--aqua-gold);
  text-shadow: 0 2px 8px rgba(242, 169, 59, 0.4);
  pointer-events: none; z-index: 10;
  animation: float-up-fade 0.9s ease-out forwards;
}
@keyframes float-up-fade {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(1.1); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 入场 */
.island-topbar { animation: fadeInUp 0.4s ease 0.05s both; }
.action-col { animation: fadeInUp 0.4s ease 0.15s both; }
.office-scene { animation: fadeInUp 0.5s ease 0.1s both; }
.bottom-panel { animation: fadeInUp 0.5s ease 0.3s both; }

/* ========== 各弹窗内部组件 ========== */
/* 迷你进度 */
.mini-stat {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--aqua-border);
}
.mini-stat:last-child { border-bottom: none; }
.mini-stat .ms-label { font-size: 12px; color: var(--aqua-ink-2); flex: 0 0 68px; font-weight: 600; }
.mini-stat .ms-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--aqua-surface-3); overflow: hidden; }
.mini-stat .ms-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-deep)); }
.mini-stat .ms-val { font-family: var(--font-num); font-size: 12px; font-weight: 800; color: var(--aqua-foreground); flex: 0 0 52px; text-align: right; }
.mini-stat .ms-val.ok { color: #1f9d7a; }
.mini-stat .ms-val.lack { color: #d24d4d; }
.ms-val.ok, .ms-val.lack { font-weight: 900; }
/* 立项「语料来源」选择行（与架构/配方同构的箭头翻卡） */
.corpus-source-row { display: flex; align-items: center; gap: 10px; }
.corpus-source-card { flex: 1; border: 1px solid rgba(111, 201, 154, 0.5); background: rgba(126, 212, 176, 0.08); border-radius: 12px; padding: 8px 12px; }
.corpus-source-card .cs-name { font-size: 12.5px; font-weight: 800; color: var(--aqua-foreground); }
.corpus-source-card .cs-desc { font-size: 10.5px; color: var(--aqua-ink-2); margin-top: 2px; line-height: 1.4; }

/* ========== 团队一览（左右布局） ========== */
.team-modal-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
}
.team-list-col {
  padding: 12px 14px;
  border-right: 1px solid var(--aqua-border);
  display: flex; flex-direction: column;
  min-height: 0;
}
.team-detail-col {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* ⚠️ min-height:0 必须有（2026-09-13）：flex 项默认 min-height:auto，**不会缩到内容以下** ——
   8 行时列表撑高、把下面的翻页条顶下去（实测翻页后 / 上下页位置差 29px，窗口再矮一点就被
   正文裁掉，翻页按钮「矩形存在但点不到」）。加上它，列表才会真正「占满剩余高度」，
   翻页条恒定贴底、不会随页内行数跳动。 */
.team-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.team-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  /* 2026-09-13（用户：「省出来的位置让卡片和按钮充分隔开」）：每页 8→6 人后
     腾出的高度全部给到间距 —— 卡片之间 6px、卡片区与翻页区之间 18px（原来是贴着的）。 */
  margin-top: 18px; padding-top: 10px;
  border-top: 1px solid var(--aqua-border);
  flex-shrink: 0;
}
.team-page-btn {
  width: 24px; height: 24px; border-radius: 8px;
  border: 1px solid var(--aqua-border);
  background: #fff;
  color: var(--aqua-primary-deep);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  transition: all 150ms ease;
  position: relative;                 /* ::after 命中区扩展的定位基准 */
}

/* 2026-09-12（用户实测「点翻页却触发安排/辞退、点击区域整体偏移」）：
   翻页按钮本身只有 24px，而面板会按窗口高度自适应缩放到 0.6~0.65，
   渲染出来命中框只有 15px —— 差几像素就点到隔壁按钮。
   这里把**命中框**往外撑一圈（视觉尺寸一点没动，所以不影响 demo 尺寸对账）；
   横向只撑 4px（翻页按钮之间的间距是 8px，刚好不互相重叠）。 */
.team-page-btn::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}
.team-page-btn:hover:not(:disabled) {
  background: var(--aqua-primary-soft);
  border-color: var(--aqua-primary);
}
.team-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.team-page-btn svg { width: 12px; height: 12px; }
.team-page-info {
  font-size: 10px; color: var(--aqua-ink-3); font-weight: 600;
  min-width: 50px; text-align: center;
}
.team-row {
  display: flex; align-items: center; gap: 10px;
  /* 2026-09-13：上下留白 10 → **7**，行高 59 → 50。
     实测（8 人/页 → 6 人/页）后 .team-list 可用高仍是 351px，6 行要 383px —— 依然溢出 32px
     （列表会顶到翻页区）。收到 7px 后 6 行 = 330px，留出 21px 富余，
     再把翻页区的间距加大（见 .team-pagination），卡片与按钮之间就真正隔开了。 */
  padding: 7px 12px; border-radius: 12px;
  background: var(--aqua-surface);
  border: 1.5px solid transparent;
  transition: all 150ms ease; cursor: pointer;
}
.team-row:hover { border-color: var(--aqua-border); background: #fff; }
.team-row.selected {
  border-color: var(--aqua-primary);
  background: var(--aqua-primary-soft);
  box-shadow: 0 4px 12px -8px rgba(39, 137, 196, 0.4);
}
.team-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.team-info { flex: 1; min-width: 0; }
.team-name { font-size: 13px; font-weight: 800; color: var(--aqua-foreground); }
.team-role { font-size: 11px; color: var(--aqua-ink-3); margin-top: 1px; }
.team-stats { display: flex; gap: 4px; }
.team-chip {
  padding: 2px 8px; border-radius: 999px;
  background: #fff; color: var(--aqua-primary-deep);
  font-size: 10px; font-weight: 700;
  border: 1px solid var(--aqua-border);
}

/* 团队详情面板 */
.detail-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding-bottom: 12px;
  border-bottom: 1px solid var(--aqua-border);
}
.detail-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 26px;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px -10px rgba(23, 50, 77, 0.4);
}
.detail-name { font-size: 16px; font-weight: 900; color: var(--aqua-foreground); }
.detail-role {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep);
  font-weight: 700;
}
.detail-stats { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.detail-stat-row {
  display: flex; flex-direction: column; gap: 3px;
}
.detail-stat-label {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--aqua-ink-2); font-weight: 600;
}
.detail-stat-label b { font-family: var(--font-num); color: var(--aqua-foreground); font-size: 13px; }
.detail-stat-bar { height: 7px; border-radius: 999px; background: var(--aqua-surface-3); overflow: hidden; }
.detail-stat-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
}
.detail-stat-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.2) 0px,
    rgba(255,255,255,0.2) 4px,
    transparent 4px,
    transparent 8px
  );
  border-radius: 999px;
  animation: stripe-move 1.5s linear infinite;
}
.detail-info-item {
  font-size: 11px; color: var(--aqua-ink-2); line-height: 1.5;
  padding: 8px 10px; background: var(--aqua-surface); border-radius: 10px;
}
.detail-info-item b { color: var(--aqua-foreground); font-size: 12px; }
.detail-actions { display: flex; flex-direction: row; gap: 8px; margin-top: auto; }
.detail-actions .skew-btn { flex: 1; }

/* 团队总览面板 */
.team-overview {
  display: flex; flex-direction: column;
  gap: 12px;
  height: 100%;
}
.overview-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--aqua-border);
}
.overview-title {
  font-size: 15px; font-weight: 900; color: var(--aqua-foreground);
  display: flex; align-items: center; gap: 6px;
}
.overview-subtitle {
  font-size: 10px; color: var(--aqua-ink-3);
}
.overview-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.overview-stat-card {
  padding: 10px;
  border-radius: 12px;
  background: var(--aqua-surface);
  display: flex; flex-direction: column;
  gap: 2px;
}
.overview-stat-card.gold { background: linear-gradient(135deg, #fff8e8, #fff0cc); }
.overview-stat-card.blue { background: linear-gradient(135deg, #f0f7ff, #d5ebff); }
.overview-stat-card.pink { background: linear-gradient(135deg, #fff5f9, #ffe3f2); }
.overview-stat-card.green { background: linear-gradient(135deg, #f0fbf5, #e0f7ec); }
.os-label { font-size: 10px; color: var(--aqua-ink-3); font-weight: 600; }
.os-value {
  font-family: var(--font-num); font-size: 18px; font-weight: 900;
  color: var(--aqua-foreground);
}
.overview-stat-card.gold .os-value { color: #b88030; }
.overview-stat-card.blue .os-value { color: var(--aqua-primary-deep); }
.overview-stat-card.pink .os-value { color: var(--aqua-pink-deep); }
.overview-stat-card.green .os-value { color: #3a9970; }
.os-desc { font-size: 9px; color: var(--aqua-ink-3); }

.overview-skill-section {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 8px;
}
.overview-section-title {
  font-size: 11px; font-weight: 800; color: var(--aqua-ink-2);
  display: flex; align-items: center; gap: 4px;
}
.overview-skill-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.overview-skill-item {
  display: flex; flex-direction: column; gap: 3px;
}
.overview-skill-label {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--aqua-ink-2); font-weight: 600;
}
.overview-skill-label .os-level {
  font-family: var(--font-num); font-weight: 900;
}
.overview-skill-bar {
  height: 6px; border-radius: 999px;
  background: var(--aqua-surface-3);
  overflow: hidden;
}
.overview-skill-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.25) 0px,
    rgba(255,255,255,0.25) 3px,
    transparent 3px,
    transparent 6px
  ), var(--aqua-primary);
}
.overview-team-btn {
  margin-top: auto;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff3d6, #ffe4a8);
  border: 1.5px solid #f2c96a;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2,0.9,0.3,1);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  font-weight: 800; color: #8a6010; font-size: 13px;
  box-shadow: 0 4px 12px -6px rgba(242, 169, 59, 0.5);
}
.overview-team-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(242, 169, 59, 0.6);
}
.overview-team-btn:active { transform: translateY(0); }

/* 三级弹窗（小弹窗） */
.sub-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(23, 50, 77, 0.35);
  backdrop-filter: blur(3px);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  animation: overlay-fade-in 0.2s ease both;
}
.sub-modal-card {
  width: 320px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px -15px rgba(23, 50, 77, 0.5);
  overflow: hidden;
  animation: sub-modal-pop 0.3s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
@keyframes sub-modal-pop {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.sub-modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--aqua-border);
  display: flex; align-items: center; justify-content: space-between;
}
.sub-modal-title {
  font-size: 13px; font-weight: 900; color: var(--aqua-foreground);
  display: flex; align-items: center; gap: 6px;
}
.sub-modal-close {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--aqua-surface);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--aqua-ink-3);
  transition: all 0.2s ease;
}
.sub-modal-close:hover { background: var(--aqua-surface-3); color: var(--aqua-foreground); }
.sub-modal-body {
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.sub-action-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--aqua-border);
  background: var(--aqua-surface);
  cursor: pointer;
  transition: all 0.25s ease;
}
.sub-action-item:hover {
  border-color: var(--aqua-primary);
  background: #fff;
  transform: translateX(3px);
}
.sub-action-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  background: linear-gradient(135deg, #f0f7ff, #d5ebff);
  flex-shrink: 0;
}
.sub-action-info { flex: 1; }
.sub-action-name { font-size: 12px; font-weight: 800; color: var(--aqua-foreground); }
.sub-action-desc { font-size: 10px; color: var(--aqua-ink-3); margin-top: 1px; }
.sub-action-arrow {
  color: var(--aqua-ink-3);
  font-size: 14px;
}

/* 暂停提示 */
.pause-overlay {
  position: fixed; inset: 0;
  background: rgba(23, 50, 77, 0.5);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  animation: overlay-fade-in 0.3s ease both;
}
.pause-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(39, 137, 196, 0.5);
  animation: pause-breathe 2s ease-in-out infinite;
}
@keyframes pause-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 30px -8px rgba(39, 137, 196, 0.5); }
  50% { transform: scale(1.05); box-shadow: 0 16px 40px -8px rgba(39, 137, 196, 0.7); }
}
.pause-icon svg { width: 36px; height: 36px; color: #fff; }
.pause-title {
  font-size: 24px; font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.pause-subtitle {
  font-size: 13px; color: rgba(255,255,255,0.8);
}
.pause-hint {
  margin-top: 20px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  font-size: 12px; color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  animation: pulse-hint 1.5s ease-in-out infinite;
}
@keyframes pulse-hint {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ========== 立项弹窗：架构 × 语料 ========== */
.plan-modal-body {
  padding: 14px 18px;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 0;
  background:
    linear-gradient(rgba(79, 183, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 183, 238, 0.03) 1px, transparent 1px),
    linear-gradient(135deg, #f8fbff, #f0f7ff);
  background-size: 20px 20px, 20px 20px, 100% 100%;
  position: relative;
}
.plan-modal-body::before {
  content: 'BLUEPRINT';
  position: absolute;
  top: 8px; right: 14px;
  font-size: 9px; font-weight: 900;
  color: rgba(79, 183, 238, 0.2);
  letter-spacing: 3px;
  font-family: monospace;
}
.plan-modal-body::after {
  content: 'PROJECT · V1.0';
  position: absolute;
  bottom: 8px; left: 14px;
  font-size: 8px; font-weight: 700;
  color: rgba(79, 183, 238, 0.25);
  letter-spacing: 2px;
  font-family: monospace;
}
.plan-step {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-bottom: 10px;
}
.plan-step-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  background: var(--aqua-surface-3); color: var(--aqua-ink-3);
}
.plan-step-dot.active {
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  color: #fff;
}
.plan-step-dot.done {
  background: var(--aqua-success); color: #fff;
}
.plan-step-line {
  width: 28px; height: 2px; background: var(--aqua-border);
}
.plan-step-line.done { background: var(--aqua-success); }

.plan-section {
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.plan-section-title {
  font-size: 12px; font-weight: 800; color: #2789c4;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-num);
}
.plan-section-title::before {
  content: '';
  width: 3px; height: 12px;
  background: linear-gradient(180deg, #4fb7ee, #2789c4);
  border-radius: 2px;
}
.plan-section-title .section-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 4px;
  background: rgba(79, 183, 238, 0.15);
  color: #2789c4;
  font-family: var(--font-num);
  letter-spacing: 0;
  text-transform: none;
}

.arch-selector, .corpus-selector {
  position: relative;
  display: flex; align-items: center;
  gap: 8px;
}
.arch-card, .corpus-card {
  flex: 1;
  padding: 12px 14px; border-radius: 8px;
  border: 1.5px solid #7bc2ee;
  background: linear-gradient(135deg, rgba(207, 232, 247, 0.6), rgba(180, 218, 240, 0.5));
  text-align: center;
  box-shadow: 0 4px 14px -8px rgba(39, 137, 196, 0.35),
              inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative;
}
.arch-card::before, .corpus-card::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px dashed rgba(39, 137, 196, 0.25);
  border-radius: 5px;
  pointer-events: none;
}
.arch-card .ac-name, .corpus-card .cc-name {
  font-size: 14px; font-weight: 900; color: #1a5f8a;
  font-family: var(--font-num);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}
.arch-card .ac-desc, .corpus-card .cc-desc {
  font-size: 11.5px; line-height: 1.5; color: #4a8cb8; margin-top: 4px;
  position: relative;
  z-index: 1;
}
.arrow-btn {
  width: 30px; height: 44px; flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid #7bc2ee;
  background: linear-gradient(180deg, #fff, #eaf5fc);
  color: #2789c4;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 150ms ease;
  box-shadow: 0 2px 6px -2px rgba(39, 137, 196, 0.2);
}
.arrow-btn:hover {
  background: linear-gradient(180deg, #eaf5fc, #d5ebff);
  border-color: #4fb7ee;
  transform: scale(1.06);
}
.arrow-btn svg { width: 16px; height: 16px; stroke-width: 2.5; }

.plan-compat-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, #fff8e8, #fff0cc);
  border-radius: 10px;
  margin: 10px 0;
  border: 1.5px solid #f2c96a;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 10px -4px rgba(242, 169, 59, 0.3);
}
.plan-compat-bar::before {
  content: 'COMPATIBILITY';
  position: absolute;
  top: -7px; left: 12px;
  font-size: 8px; font-weight: 800;
  color: #b88030;
  background: linear-gradient(135deg, #fff8e8, #fff0cc);
  padding: 0 4px;
  letter-spacing: 1px;
  font-family: monospace;
  pointer-events: none;   /* 纯标注文字（浮在条子上方 7px）：别挡点击 */
}
.plan-compat-bar .pc-label { font-size: 11px; color: #8a6010; font-weight: 700; }
.plan-compat-bar .pc-value {
  font-family: var(--font-num); font-size: 20px; font-weight: 900;
  color: #b88030;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.plan-compat-bar .pc-value span { font-size: 10px; color: #a07020; font-weight: 600; }

/* 语料品质要求条（2026-09-08 用户要求：替换原「兼容性 70% 达标」那条无用提示） */
.plan-quality-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 10px 0;
  background: linear-gradient(135deg, #fff8e8, #fff0cc);
  border: 1.5px solid #f2c96a; border-radius: 10px;
  position: relative; z-index: 1;
  box-shadow: 0 2px 10px -4px rgba(242, 169, 59, 0.3);
}
.plan-quality-bar .pq-label { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #8a6010; }
.plan-quality-bar .mix-req { margin: 0; flex: 1; }

/* 立项「语料不足怎么办」（2026-09-29 玩家反馈「V2 解锁不了」）：
   任务组合门槛高于带入语料时，光一个 ✗ 说不清该做什么 —— 这里给出两条可走的路
   （外包补足 / 先立项别的组合攒语料），红色告警皮与语料仓库的 .cm-lack-tip 同款。 */
.plan-lack-tip { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 11px;
  border-radius: 10px; font-size: 0.72rem; font-weight: 700; line-height: 1.5; color: #d24d4d;
  background: rgba(242, 108, 108, 0.08); border: 1px dashed rgba(210, 77, 77, 0.5); }
.plan-lack-tip svg { width: 14px; height: 14px; flex: none; margin-top: 1px; stroke-width: 2.2; }
.plan-lack-tip b { color: #c0392b; }

/* 架构卡片（2026-09-08 用户要求）：只留「架构名 + 解锁条件」，详细说明收进「!」按钮 */
.arch-card .ac-name {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.arch-card .ac-info {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #2789c4; color: #fff; font-size: 11px; font-weight: 900;
  cursor: pointer; font-family: var(--font-num); flex: 0 0 16px;
  box-shadow: 0 2px 6px -3px rgba(39, 137, 196, 0.8);
}
.arch-card .ac-info:hover { background: #0f4c75; }
.arch-card .ac-unlock {
  font-size: 11px; color: #4a8cb8; margin-top: 5px; line-height: 1.45;
  position: relative; z-index: 1;
}
.arch-card.locked .ac-unlock { color: #c98a1e; }

/* 立项动效 */
.arch-card, .corpus-card {
  transition: transform 0.35s cubic-bezier(0.2,0.9,0.3,1), opacity 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.arch-card::before, .corpus-card::before {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: card-sweep 3.5s ease-in-out infinite;
}
@keyframes card-sweep {
  0% { left: -60%; }
  60%, 100% { left: 120%; }
}
.card-switching-out-left {
  transform: translateX(-18px) rotate(-1deg);
  opacity: 0;
  filter: blur(2px);
}
.card-switching-out-right {
  transform: translateX(18px) rotate(1deg);
  opacity: 0;
  filter: blur(2px);
}
.card-switching-in-left {
  animation: card-slide-in-left 0.38s cubic-bezier(0.2,0.9,0.3,1) both;
}
.card-switching-in-right {
  animation: card-slide-in-right 0.38s cubic-bezier(0.2,0.9,0.3,1) both;
}
@keyframes card-slide-in-left {
  0% { transform: translateX(-18px) rotate(-1deg); opacity: 0; filter: blur(2px); }
  100% { transform: translateX(0) rotate(0); opacity: 1; filter: blur(0); }
}
@keyframes card-slide-in-right {
  0% { transform: translateX(18px) rotate(1deg); opacity: 0; filter: blur(2px); }
  100% { transform: translateX(0) rotate(0); opacity: 1; filter: blur(0); }
}

.plan-step-dot.active {
  animation: step-pulse 2s ease-in-out infinite;
}
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 183, 238, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(79, 183, 238, 0); }
}

.pc-value {
  display: inline-block;
  animation: compat-pop 0.45s cubic-bezier(0.2,1.3,0.3,1);
}
@keyframes compat-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* 模型参数选择器 */
/* 2026-09-13 用户要求：模型参数按钮**缩小、六个塞进一行**、每格文本控制在两行。
   做法：6 列 + 容器 80% 宽 → 每个按钮宽度 = 原先（1/3 行宽）的 40%（= 缩小 60%）；
   参数卡上那行「≥284B 激活工具」删掉（架构卡已注明带出哪些轴），格子自然只剩两行。 */
.param-selector {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 80%;
  position: relative;
  z-index: 1;
}
.param-item {
  padding: 8px 4px; border-radius: 8px;
  border: 1.5px solid #7bc2ee;
  background: linear-gradient(180deg, #fff, #f0f7ff);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: 0 2px 8px -4px rgba(39, 137, 196, 0.2);
}
.param-item::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px; right: 3px; bottom: 3px;
  border: 1px dashed rgba(39, 137, 196, 0.2);
  border-radius: 5px;
  pointer-events: none;
}
.param-item:hover {
  border-color: #4fb7ee;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(39, 137, 196, 0.5);
}
.param-item.selected {
  border-color: #2789c4;
  background: linear-gradient(180deg, #d5ebff, #b3dcff);
  box-shadow: 0 4px 14px -6px rgba(39, 137, 196, 0.5);
}
.param-item.selected::before {
  border-color: rgba(39, 137, 196, 0.4);
}
.param-item .pi-size {
  font-family: var(--font-num); font-size: 16px; font-weight: 900;
  color: #1a5f8a;
  position: relative; z-index: 1;
  white-space: nowrap;         /* 一行：数字 + B 不折行 */
}
.param-item.selected .pi-size { color: #0f4c75; }
.param-item .pi-unit { font-size: 10px; color: #4a8cb8; font-weight: 600; margin-left: 1px; }
.param-item .pi-label {
  font-size: 11px; color: #4a8cb8; font-weight: 700;
  margin-top: 2px;
  position: relative; z-index: 1;
  white-space: nowrap;         /* 第二行：只允许「入门/标准/进阶/旗舰」，绝不折成第三行 */
}
.param-item.selected .pi-label { color: #1a5f8a; }
/* 2026-09-13：参数卡不再标「激活哪根轴」（架构卡的「带出 …」已注明带出哪些轴），
   格子固定两行 —— 原来那条 .pi-axes 规则随之删除。 */

/* ========== 攻关训练（象限选择） ========== */
.focus-intro {
  font-size: 11px; color: #6a6a8a;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f5f3ff, #eee8ff);
  border-radius: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
  text-align: center;
  border: 1px solid #d4ccf5;
  position: relative;
}
.focus-intro::before {
  content: '◆';
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #9b87f5;
  font-size: 10px;
}
.focus-intro::after {
  content: '◆';
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #9b87f5;
  font-size: 10px;
}

/* 象限容器 */
.focus-quadrant {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 260px;
  margin-bottom: 12px;
}
.quadrant-axis {
  position: absolute;
  background: linear-gradient(90deg, transparent, #d4ccf5, transparent);
  z-index: 0;
}
.quadrant-axis-h {
  left: 8%; right: 8%; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #c0b8e8, transparent);
}
.quadrant-axis-v {
  top: 8%; bottom: 8%; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #c0b8e8, transparent);
}
.quadrant-center-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px; font-weight: 700;
  color: #9b87f5;
  background: #fff;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1.5px solid #d4ccf5;
  z-index: 2;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px -2px rgba(155, 135, 245, 0.3);
}

/* 象限卡片 */
.quadrant-card {
  position: absolute;
  width: 42%;
  height: 42%;
  border-radius: 16px;
  border: 2px solid #e0dcf5;
  background: #fff;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.2,0.9,0.3,1);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  z-index: 1;
  overflow: hidden;
}
.quadrant-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, rgba(155, 135, 245, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.quadrant-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px -8px rgba(155, 135, 245, 0.4);
}
.quadrant-card:hover::before { opacity: 1; }
.quadrant-card.selected {
  transform: scale(1.05);
  box-shadow: 0 10px 28px -8px rgba(155, 135, 245, 0.5);
  border-color: #9b87f5;
  background: linear-gradient(135deg, #f8f6ff, #f0ebff);
}
.quadrant-card.selected::before { opacity: 1; }

/* 四个象限位置 */
.quadrant-card.q1 { top: 0; left: 0; }
.quadrant-card.q2 { top: 0; right: 0; }
.quadrant-card.q3 { bottom: 0; left: 0; }
.quadrant-card.q4 { bottom: 0; right: 0; }

.qc-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: currentColor;
  opacity: 0.12;
  margin-bottom: 2px;
  position: relative; z-index: 1;
}
.quadrant-card.selected .qc-icon {
  opacity: 0.2;
  transform: scale(1.1);
  transition: all 0.3s ease;
}
.qc-icon svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: 1;
}
.qc-name {
  font-size: 12px; font-weight: 800;
  color: #3a3a5a;
  position: relative; z-index: 1;
}
.quadrant-card.selected .qc-name { color: #5a4ab8; }
.qc-bonus {
  font-family: var(--font-num);
  font-size: 15px; font-weight: 900;
  color: #9b87f5;
  position: relative; z-index: 1;
}
.quadrant-card.selected .qc-bonus {
  color: #7c68e0;
  transform: scale(1.1);
  transition: all 0.3s ease;
}
.qc-dur {
  font-size: 9px; color: #a098c0;
  font-weight: 600;
  position: relative; z-index: 1;
}
.quadrant-card.selected .qc-dur { color: #8878d0; }

/* 详情栏 */
.focus-detail {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f8f6ff, #f0ebff);
  border-radius: 12px;
  border: 1px solid #d4ccf5;
}
.fd-left { flex: 1; min-width: 0; }
.fd-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.fd-desc { font-size: 11px; color: #6a6a8a; line-height: 1.4; }
.fd-right { text-align: right; flex-shrink: 0; }
.fd-cost-label { font-size: 9px; color: #a098c0; font-weight: 600; margin-bottom: 3px; }
.fd-cost { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #6a6a8a; font-weight: 700; }

/* 攻关研究动画 */
.focus-research-overlay {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  border-radius: 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  z-index: 10;
  animation: overlay-fade-in 0.3s ease both;
}
@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.research-orbit {
  position: relative;
  width: 80px; height: 80px;
}
.research-core {
  position: absolute; top: 50%; left: 50%;
  width: 36px; height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9ad5, #e86a9d);
  box-shadow: 0 0 20px rgba(232, 106, 157, 0.5);
  animation: core-pulse 1.2s ease-in-out infinite;
}
@keyframes core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px rgba(232, 106, 157, 0.5); }
  50% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 30px rgba(232, 106, 157, 0.7); }
}
.research-ring {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -50%);
  border: 2px dashed var(--aqua-pink);
  border-radius: 50%;
  opacity: 0.6;
  animation: ring-spin 2s linear infinite;
}
.research-ring.r2 {
  width: 54px; height: 54px;
  border-color: var(--aqua-primary);
  animation-direction: reverse;
  animation-duration: 1.5s;
}
@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.research-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aqua-primary);
  top: 50%; left: 50%;
  animation: particle-orbit 1.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
.research-particle.p2 { background: var(--aqua-pink); animation-delay: -0.6s; }
.research-particle.p3 { background: var(--aqua-gold); animation-delay: -1.2s; }
@keyframes particle-orbit {
  0% { transform: rotate(0deg) translateX(32px) rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(180deg) translateX(38px) rotate(-180deg) scale(0.7); opacity: 0.7; }
  100% { transform: rotate(360deg) translateX(32px) rotate(-360deg) scale(1); opacity: 1; }
}
.research-text {
  font-size: 13px; font-weight: 800; color: var(--aqua-foreground);
  animation: text-blink 1s ease-in-out infinite;
}
@keyframes text-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.research-progress {
  width: 180px; height: 5px;
  background: var(--aqua-surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.research-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6fc3ff, #e86a9d);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* 成功提示 */
.success-toast {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: #fff;
  border: 2px solid var(--aqua-success);
  border-radius: 16px;
  padding: 16px 24px;
  z-index: 20;
  opacity: 0;
  animation: success-pop 0.5s cubic-bezier(0.2,1.3,0.3,1) forwards;
  box-shadow: 0 20px 40px -15px rgba(83, 185, 141, 0.5);
}
@keyframes success-pop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.success-icon {
  width: 48px; height: 48px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--aqua-success);
  display: grid; place-items: center;
  animation: success-icon-pop 0.6s cubic-bezier(0.2,1.4,0.3,1) 0.1s both;
}
@keyframes success-icon-pop {
  0% { transform: scale(0) rotate(-30deg); }
  100% { transform: scale(1) rotate(0); }
}
.success-icon svg { width: 28px; height: 28px; color: #fff; stroke-width: 3; }
.success-title {
  font-size: 16px; font-weight: 900; color: var(--aqua-success);
  text-align: center; margin-bottom: 4px;
}
.success-desc {
  font-size: 11px; color: var(--aqua-ink-2);
  text-align: center; font-weight: 600;
}

/* ========== 算力购买（右侧大icon） ========== */
.shop-modal-body {
  flex: 1;
  min-height: 0;
  position: relative;
  background: linear-gradient(145deg, #e8f4ff 0%, #d5ebff 50%, #e0f0ff 100%);
  display: flex;
  flex-direction: column;
}
/* 世代页签（2026-09-09 代际设计：A100 / H200·H300 分页） */
.shop-body { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; z-index: 1; }
.shop-gen-tabs { display: flex; gap: 6px; padding: 8px 16px 0; flex-shrink: 0; }
.shop-gen-tab {
  font-size: 12px; font-weight: 700; color: #3a7fae; background: rgba(255,255,255,0.35);
  border: 1px solid #a7cfe8; border-radius: 8px 8px 0 0; padding: 5px 14px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.shop-gen-tab:hover { background: rgba(255,255,255,0.6); }
.shop-gen-tab.active { background: #fff; color: #0f4c75; border-bottom-color: #fff; }
.shop-columns { display: grid; grid-template-columns: 1fr 160px; gap: 0; align-items: stretch; flex: 1; min-height: 0; }
.shop-modal-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    /* 横向电路线 */
    linear-gradient(90deg, transparent 20px, rgba(100, 180, 230, 0.15) 20px, rgba(100, 180, 230, 0.15) 22px, transparent 22px, transparent 60px),
    /* 纵向电路线 */
    linear-gradient(0deg, transparent 20px, rgba(100, 180, 230, 0.15) 20px, rgba(100, 180, 230, 0.15) 22px, transparent 22px, transparent 60px),
    /* 芯片节点 */
    radial-gradient(circle, rgba(100, 180, 230, 0.25) 3px, transparent 3px);
  background-size: 60px 60px, 60px 60px, 60px 60px;
  background-position: 0 0, 0 0, 30px 30px;
  pointer-events: none;
  opacity: 0.8;
}
.shop-modal-body::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    /* 大芯片轮廓 - 左上 */
    linear-gradient(135deg, transparent 40%, rgba(100, 180, 230, 0.08) 40%, rgba(100, 180, 230, 0.08) 60%, transparent 60%),
    /* 大芯片轮廓 - 右下 */
    radial-gradient(ellipse at 85% 90%, rgba(100, 180, 230, 0.1) 0%, transparent 40%);
  pointer-events: none;
}
.shop-tiers-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  flex: 1;
  padding: 12px 16px;
  align-content: center;
  position: relative;
  z-index: 1;
}
.shop-tier {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px 11px 16px;
  border-radius: 12px;
  border: 1.5px solid #a8d4f0;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2,0.8,0.3,1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.shop-tier::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(100, 180, 230, 0.08));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.shop-tier::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #4f9fd4, #2789c4);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0 2px 2px 0;
}
.shop-tier:hover {
  border-color: #4f9fd4;
  transform: translateX(3px);
  box-shadow: 0 6px 20px -10px rgba(39, 137, 196, 0.4);
}
.shop-tier:hover::before { opacity: 1; }
.shop-tier.selected {
  border-color: #2789c4;
  background: linear-gradient(135deg, #e0f0ff, #c8e4ff);
  transform: translateX(3px);
  box-shadow: 0 6px 22px -10px rgba(39, 137, 196, 0.5),
              inset 0 1px 0 rgba(255,255,255,0.8);
}
.shop-tier.selected::after { opacity: 1; }
.shop-tier.selected::before { opacity: 1; }
.shop-tier-info { flex: 1; position: relative; z-index: 1; }
.shop-tier-name {
  font-size: 13px; font-weight: 800;
  color: #1a5f8a;
  font-family: var(--font-num);
  letter-spacing: 0.3px;
}
.shop-tier.selected .shop-tier-name { color: #0f4c75; }
.shop-tier-spec { font-size: 11px; color: #4a8cb8; margin-top: 3px; }
.shop-tier.selected .shop-tier-spec { color: #2a6f9c; }
/* 2026-09-02：安排/集体活动选项的「次数限制」小字（每人每周一次之类） */
.shop-tier-note { font-size: 10px; color: #8fa6b5; margin-top: 2px; }
.shop-tier-price {
  font-family: var(--font-num); font-size: 16px; font-weight: 900;
  color: #2789c4;
  position: relative; z-index: 1;
}
.shop-tier.selected .shop-tier-price {
  color: #0f4c75;
}
/* 每周一次类操作（团建/聚餐）：本周已安排 → 卡片置灰、不可点（2026-09-09） */
.shop-tier.used, .shop-tier:disabled {
  opacity: 0.5; cursor: not-allowed; filter: grayscale(0.45);
  transform: none !important; box-shadow: none !important;
}
.shop-tier.used:hover, .shop-tier:disabled:hover { transform: none !important; box-shadow: none !important; }
.shop-tier.used .shop-tier-price, .shop-tier:disabled .shop-tier-price { color: #8fa6b5; }
.shop-preview-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px 12px;
  background: linear-gradient(180deg, rgba(200, 228, 255, 0.6), rgba(180, 216, 255, 0.8));
  border-left: 1px solid rgba(100, 180, 230, 0.3);
  position: relative;
  overflow: hidden;
}
.shop-preview-col::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(100, 180, 230, 0.2) 0%, transparent 70%);
  border-radius: 50%;
}
.shop-preview-col::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(100, 180, 230, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.shop-preview-icon {
  width: 90px; height: 90px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5ba8dd, #2789c4);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px -8px rgba(39, 137, 196, 0.5),
              inset 0 2px 8px rgba(255,255,255,0.3);
  transition: all 0.4s cubic-bezier(0.2,0.9,0.3,1);
  position: relative;
  z-index: 1;
}
.shop-preview-icon svg { width: 44px; height: 44px; color: #fff; transition: transform 0.4s cubic-bezier(0.2,0.9,0.3,1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
.shop-preview-icon.switching {
  animation: shop-icon-glow 0.5s cubic-bezier(0.2,1.3,0.3,1);
}
@keyframes shop-icon-glow {
  0% { transform: scale(1); box-shadow: 0 8px 24px -8px rgba(39, 137, 196, 0.5); }
  50% { transform: scale(1.1); box-shadow: 0 12px 32px -6px rgba(39, 137, 196, 0.6); }
  100% { transform: scale(1); box-shadow: 0 8px 24px -8px rgba(39, 137, 196, 0.5); }
}
.shop-preview-name {
  font-size: 11px; font-weight: 700; color: #1a5f8a;
  text-align: center;
  position: relative; z-index: 1;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(100, 180, 230, 0.4);
  font-family: var(--font-num);
  letter-spacing: 1px;
  text-transform: uppercase;
}
@keyframes shop-icon-bounce {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(0.85) rotate(-5deg); }
  60% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}
.shop-preview-name {
  font-size: 11px; font-weight: 700; color: var(--aqua-primary-deep);
  text-align: center;
  position: relative; z-index: 1;
  padding: 3px 10px;
  background: rgba(255,255,255,0.8);
  border-radius: 999px;
  border: 1px solid var(--aqua-border);
}

/* ========== 招募（左右布局） ========== */
.recruit-modal-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
}
.recruit-list-col {
  padding: 12px 14px;
  border-right: 1px solid var(--aqua-border);
  display: flex; flex-direction: column;
  min-height: 0;
}
.recruit-detail-col {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
}
.recruit-list { display: flex; flex-direction: column; gap: 5px; flex: 1; overflow: hidden; }
.recruit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px;
  background: var(--aqua-surface);
  border: 1.5px solid transparent;
  cursor: pointer; transition: all 150ms ease;
}
.recruit-row:hover { border-color: var(--aqua-border); }
.recruit-row.selected {
  border-color: var(--aqua-pink);
  background: var(--aqua-pink-soft);
}
.recruit-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.recruit-info { flex: 1; min-width: 0; }
.recruit-name { font-size: 12px; font-weight: 800; color: var(--aqua-foreground); }
/* 2026-09-07：列表行稀有度徽标（与团队页同一套 dg-tier-badge，只是间距适配行高） */
.recruit-name .dg-tier-badge { margin-left: 6px; vertical-align: 1px; }
.recruit-role { font-size: 10px; color: var(--aqua-ink-3); margin-top: 1px; }
.recruit-salary {
  font-family: var(--font-num); font-size: 12px; font-weight: 800;
  color: var(--aqua-gold);
}
.recruit-detail-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding-bottom: 12px;
  border-bottom: 1px solid var(--aqua-border);
}
.recruit-detail-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 26px;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px -10px rgba(23, 50, 77, 0.4);
}
.recruit-detail-name { font-size: 16px; font-weight: 900; color: var(--aqua-foreground); }
.recruit-detail-name .dg-tier-badge { margin-left: 6px; vertical-align: 2px; }
/* 2026-09-07：候选人有效期提示（反抽卡，超期走人；剩 1 周转红加急） */
/* doc/27 §6.3.5：招人时提示「他能产哪根轴」（只列本阶段真的激活的轴） */
.recruit-detail-axhint {
  margin: 6px 0 0; padding: 4px 8px; border-radius: 8px;
  background: rgba(155, 135, 245, 0.12); border: 1px solid rgba(155, 135, 245, 0.28);
  font-size: 10px; font-weight: 700; color: #5b4bb5;
}
.recruit-detail-axhint b { font-weight: 900; color: #4c3fb0; }

.recruit-detail-expire {
  font-size: 11px; font-weight: 700; text-align: center;
  color: var(--aqua-ink-2); background: var(--aqua-surface-3);
  border-radius: 8px; padding: 4px 8px; margin-bottom: 8px;
}
.recruit-detail-expire.urgent { color: #d63a2f; background: rgba(214, 58, 47, 0.08); }
.recruit-detail-role {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: var(--aqua-pink-soft); color: var(--aqua-pink-deep);
  font-weight: 700;
}
.recruit-detail-arrive { font-size: 11px; color: var(--aqua-ink-2); font-weight: 700; margin-top: 4px; }
/* 2026-09-29 用户反馈「竖屏招聘看不到候选人薪资」：列表窄条放不下薪资，详情面板此前也不显示 →
   两头都没有。这里在详情头部补一行薪资（金色，与列表/团队页同色），保证任何布局都能看到。 */
.recruit-detail-salary {
  font-family: var(--font-num); font-size: 12px; font-weight: 800;
  color: var(--aqua-gold); margin-top: 4px;
}
.recruit-detail-stats { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.rds-row { display: flex; flex-direction: column; gap: 3px; }
.rds-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--aqua-ink-2); font-weight: 600; }
.rds-label b { font-family: var(--font-num); color: var(--aqua-foreground); font-size: 13px; }
.rds-bar { height: 7px; border-radius: 999px; background: var(--aqua-surface-3); overflow: hidden; }
.rds-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
}
.rds-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.2) 0px,
    rgba(255,255,255,0.2) 4px,
    transparent 4px,
    transparent 8px
  );
  border-radius: 999px;
  animation: stripe-move 1.5s linear infinite;
}
@keyframes stripe-move {
  0% { background-position: 0 0; }
  100% { background-position: 16px 0; }
}
.recruit-detail-name, .team-detail-name, .detail-name {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.recruit-detail-bio {
  font-size: 12px; color: var(--aqua-ink-2); line-height: 1.7;
  padding: 10px 12px; background: var(--aqua-surface); border-radius: 12px;
  flex: 1; overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.recruit-detail-bio b { color: var(--aqua-foreground); font-size: 13px; }
.recruit-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.recruit-detail-tag {
  padding: 3px 9px; border-radius: 999px;
  background: #fff; border: 1px solid var(--aqua-border);
  font-size: 10px; font-weight: 700; color: var(--aqua-primary-deep);
}

/* ========== 论文 ========== */
.paper-list { display: flex; flex-direction: column; gap: 10px; flex: 1; position: relative; padding: 4px 2px; }
.paper-card {
  padding: 12px 14px 12px 16px;
  border-radius: 3px 12px 12px 3px;
  border: 1px solid #e8dcc4;
  background: linear-gradient(180deg, #fdf8ee 0%, #f7eed9 100%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2,0.8,0.3,1);
  position: relative;
  box-shadow: 0 2px 8px -4px rgba(120, 90, 40, 0.2), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
}
.paper-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, rgba(180, 150, 90, 0.15) 0%, transparent 100%);
  border-right: 1px dashed rgba(180, 150, 90, 0.3);
}
.paper-card::after {
  /* 装订孔 */
  content: '';
  position: absolute;
  left: 7px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d4c4a0;
  box-shadow: 0 -16px 0 #d4c4a0, 0 16px 0 #d4c4a0;
}
.paper-card:hover {
  transform: translateX(4px) translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(120, 90, 40, 0.3), inset 0 1px 0 rgba(255,255,255,0.7);
  border-color: #d4c4a0;
}
.paper-card.selected {
  border-color: #c4a060;
  background: linear-gradient(180deg, #fdf2dc 0%, #f5e4c0 100%);
  transform: translateX(4px);
  box-shadow: 0 6px 20px -6px rgba(180, 140, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.8);
}
.paper-card.owned {
  border-color: #7ed4b0;
  background: linear-gradient(180deg, #f0fbf5 0%, #e0f7ec 100%);
}
.paper-card.owned::before {
  background: linear-gradient(90deg, rgba(83, 185, 141, 0.12) 0%, transparent 100%);
  border-right-color: rgba(83, 185, 141, 0.3);
}
.paper-card.owned::after {
  background: #53b98d;
  box-shadow: 0 -16px 0 #53b98d, 0 16px 0 #53b98d;
}
.paper-card.locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.paper-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  padding-left: 18px;
}
.paper-venue {
  font-size: 9px; font-weight: 700;
  color: #a08050;
  font-style: italic;
  letter-spacing: 0.5px;
}
.paper-status {
  font-size: 9px; font-weight: 700; padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-num);
}
.paper-status.owned {
  background: #53b98d; color: #fff;
}
.paper-status.available {
  background: #e8d5a8; color: #7a5820;
}
.paper-status.locked {
  background: #d0c8b8; color: #7a7060;
}
.paper-title {
  font-size: 13px; font-weight: 800;
  color: #4a3820;
  line-height: 1.4;
  padding-left: 18px;
  margin-bottom: 4px;
  font-family: Georgia, 'Times New Roman', serif;
}
.paper-authors {
  font-size: 10px;
  color: #907850;
  padding-left: 18px;
  margin-bottom: 6px;
  font-style: italic;
}
.paper-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-left: 18px;
  margin-bottom: 6px;
}
.paper-tag {
  font-size: 9px; font-weight: 600;
  padding: 2px 6px;
  background: rgba(180, 150, 90, 0.15);
  color: #806030;
  border-radius: 3px;
}
.paper-desc {
  font-size: 10px; color: #705830; line-height: 1.6;
  padding-left: 18px;
  padding-top: 4px;
  border-top: 1px dashed rgba(180, 150, 90, 0.25);
}
.paper-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 18px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(180, 150, 90, 0.25);
}
.paper-effect {
  font-size: 10px; font-weight: 700; color: #b88030;
  display: flex; align-items: center; gap: 4px;
}
.paper-effect::before {
  content: '⚡';
  font-size: 10px;
}
.paper-cost {
  font-size: 10px; font-weight: 700;
  color: #607080;
  display: flex; align-items: center; gap: 3px;
}
.paper-card.researching {
  opacity: 0.85;
  filter: saturate(0.8);
}
.paper-countdown {
  position: absolute;
  top: 8px; right: 8px;
  background: linear-gradient(135deg, #e86a9d, #c94a7a);
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px -3px rgba(232, 106, 157, 0.6);
  animation: countdown-pulse 1.5s ease-in-out infinite;
  z-index: 2;
  font-family: var(--font-num);
}
@keyframes countdown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 论文研究动画 - 蓝色学术风 */
.paper-research-overlay {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  border-radius: 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  z-index: 10;
  animation: overlay-fade-in 0.3s ease both;
}
.paper-scroll-icon {
  width: 60px; height: 70px;
  position: relative;
  animation: paper-float 2s ease-in-out infinite;
}
@keyframes paper-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.paper-scroll-icon .paper-body {
  position: absolute; top: 6px; bottom: 6px; left: 4px; right: 4px;
  background: #fff;
  border: 2px solid var(--aqua-primary);
  border-radius: 4px;
}
.paper-scroll-icon .paper-roll {
  position: absolute; left: 0; right: 0; height: 12px;
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  border-radius: 6px;
}
.paper-scroll-icon .paper-roll.top { top: 0; }
.paper-scroll-icon .paper-roll.bottom { bottom: 0; }
.paper-scroll-icon .paper-lines {
  position: absolute; top: 18px; left: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.paper-scroll-icon .paper-line {
  height: 3px; background: var(--aqua-primary-soft);
  border-radius: 2px;
}
.paper-scroll-icon .paper-line:nth-child(2) { width: 80%; }
.paper-scroll-icon .paper-line:nth-child(3) { width: 60%; }

.paper-particles {
  position: absolute;
  width: 100px; height: 100px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.paper-particle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--aqua-primary);
  border-radius: 50%;
  opacity: 0;
  animation: paper-particle-float 2s ease-in-out infinite;
}
.paper-particle:nth-child(1) { left: 20%; top: 30%; animation-delay: 0s; }
.paper-particle:nth-child(2) { left: 70%; top: 25%; animation-delay: 0.4s; background: var(--aqua-success); }
.paper-particle:nth-child(3) { left: 80%; top: 60%; animation-delay: 0.8s; background: var(--aqua-gold); }
.paper-particle:nth-child(4) { left: 30%; top: 70%; animation-delay: 1.2s; }
.paper-particle:nth-child(5) { left: 50%; top: 15%; animation-delay: 1.6s; background: var(--aqua-pink); }
@keyframes paper-particle-float {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  50% { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.5); }
}

/* ========== 模型测试聊天框 ========== */
.test-modal-body {
  padding: 0;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.test-chat-area {
  flex: 1;
  padding: 14px 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 12px;
}
.test-chat-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--aqua-border);
}
.test-chat-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #6fc3ff, #4fb7ee);
  color: #fff; font-weight: 900; font-size: 16px;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px -6px rgba(39, 137, 196, 0.5);
}
.test-chat-title {
  font-size: 15px; font-weight: 900; color: var(--aqua-primary-deep);
}
.test-chat-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--aqua-success);
}
.test-chat-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--aqua-success);
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.test-messages {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 6px 0;
  scroll-behavior: smooth;
}
.test-messages::-webkit-scrollbar { width: 4px; }
.test-messages::-webkit-scrollbar-thumb { background: var(--aqua-border); border-radius: 4px; }
.msg-user {
  align-self: flex-end;
  max-width: 75%;
  padding: 8px 14px;
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  font-size: 13px; font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 4px 12px -6px rgba(39, 137, 196, 0.5);
}
.msg-bot {
  align-self: flex-start;
  max-width: 75%;
  padding: 8px 14px;
  background: var(--aqua-surface);
  color: var(--aqua-foreground);
  border: 1px solid var(--aqua-border);
  border-radius: 4px 16px 16px 16px;
  font-size: 13px;
  line-height: 1.6;
}
.msg-bot.typing {
  color: var(--aqua-ink-3);
  font-style: italic;
}
.msg-bot.typing span {
  display: inline-block;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.msg-bot.typing span:nth-child(2) { animation-delay: 0.15s; }
.msg-bot.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
}
/* 测试聊天彩蛋：模型做的网页小游戏链接（V4.5） */
.test-game-link {
  color: var(--aqua-accent, #ffcf8a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all;
}
.test-game-link:hover { filter: brightness(1.15); }

.test-empty-tip {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--aqua-ink-3);
  font-size: 14px; font-weight: 600;
}

.test-engineer-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: var(--aqua-surface);
  border-radius: 12px;
  font-size: 12px; color: var(--aqua-ink-2);
  line-height: 1.6;
  margin-top: 4px;
}
.test-engineer-note svg {
  width: 16px; height: 16px; flex-shrink: 0;
  margin-top: 1px; color: var(--aqua-primary);
}
.test-engineer-note b { color: var(--aqua-primary-deep); font-weight: 800; }

.test-suggest-row {
  padding: 10px 16px 14px;
  background: var(--aqua-gold-soft);
  border-top: 1px solid rgba(242, 169, 59, 0.3);
}
.test-suggest-label {
  font-size: 11px; font-weight: 800; color: #8a6010;
  margin-bottom: 6px;
}
/* ---- P4 对话树：状态条 / 代码样例 / 记事本收集册（doc/26 §5）---- */
.test-status-line {
  font-size: 11px; font-style: italic; color: #8a8aa0;
  padding: 4px 2px;
}
.test-artifact {
  margin: 8px 2px; padding: 8px 10px;
  background: #1e2430; color: #cfe3ff;
  border-radius: 10px; font-size: 11px; line-height: 1.5;
  overflow: auto; max-height: 120px;
}
.test-suggest-options {
  display: flex; flex-direction: column; gap: 5px;
}
.test-suggest-btn {
  padding: 8px 12px;
  border: 1.5px solid rgba(242, 169, 59, 0.4);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  color: #5a3d0b;
  font-size: 12px; font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 150ms ease;
}
.test-suggest-btn:hover {
  background: #fff;
  border-color: var(--aqua-gold);
  transform: translateX(2px);
}
.test-suggest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ---- P4 对话树：对话选项与元操作拆两行（2026-09-10）---- */
.test-dialogue-row {
  display: flex; flex-direction: column; gap: 6px;
}
.test-meta-row {
  display: flex; gap: 6px; margin-top: 10px;
  padding-top: 9px; border-top: 1px dashed rgba(242, 169, 59, 0.35);
}
.test-meta-btn {
  flex: 1;
  border-color: rgba(122, 122, 140, 0.35);
  background: rgba(255, 255, 255, 0.55);
  color: #70707f;
  text-align: center;
  font-weight: 700;
}
.test-meta-btn:hover { border-color: #9b9bb0; transform: none; background: #fff; }

/* ========== 评审（现代简约风） ========== */
.review-modal-body {
  background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 50%, #eef2f7 100%);
  position: relative;
  /* 2026-09-11：原为 overflow:hidden —— 加了「追加能力轴」后内容超出容器高度，
     底部被**裁掉**（实测 scrollH 542 / 可视 465，差 77px）。改成纵向可滚、横向仍裁，
     与测试面板 .test-modal-body 同一做法；横向裁是为了让 ::before 的装饰圆不出滚动条。 */
  overflow-y: auto;
  overflow-x: hidden;
}
.review-modal-body::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.review-modal-body::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.review-certificate {
  position: relative; z-index: 1;
  padding: 14px 18px;
}
.review-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.review-header-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(59, 130, 246, 0.5);
  flex-shrink: 0;
}
.review-header-icon svg { width: 22px; height: 22px; }
.review-header-text { flex: 1; }
.review-header-title {
  font-size: 16px; font-weight: 900;
  color: #1e293b;
  letter-spacing: 0.5px;
}
.review-header-sub {
  font-size: 10px; color: #64748b;
  margin-top: 2px;
  font-weight: 500;
  font-family: var(--font-num);
  letter-spacing: 1px;
}

.review-desc {
  font-size: 11px; color: #475569;
  line-height: 1.6;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 14px;
  position: relative;
}
.review-desc::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  background: linear-gradient(180deg, #3b82f6, #6366f1);
  border-radius: 0 2px 2px 0;
}

/* 评审 · 追加能力轴（doc/27 P3）：与四维同结构，只在上面加一条分隔说明 */
.review-axis-sep {
  margin-top: 2px; padding-top: 8px;
  border-top: 1px dashed rgba(39, 137, 196, 0.3);
  font-size: 11px; font-weight: 800; color: #4a8cb8; text-align: center;
}
.review-weights {
  margin-top: 8px; padding: 5px 10px; border-radius: 10px;
  background: rgba(155, 224, 245, 0.16); border: 1px dashed rgba(39, 137, 196, 0.25);
  font-size: 11px; font-weight: 700; color: #2b4a63; line-height: 1.4; text-align: center;
}
.review-weights .rw-note { margin-left: 6px; font-weight: 600; color: #8aa0b2; font-size: 11px; }

.review-stats {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.05);
}
.review-stat {
  display: grid;
  grid-template-columns: 56px 1fr 50px;
  align-items: center;
  gap: 10px;
}
.rs-label { font-size: 11px; font-weight: 700; color: #334155; }
.rs-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.rs-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 4px;
  transition: width 0.6s ease;
  position: relative;
}
.rs-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
  border-radius: 4px 4px 0 0;
}
.rs-val { font-size: 11px; font-weight: 800; color: #475569; text-align: right; font-family: var(--font-num); }

.review-tip {
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border-radius: 10px;
  border: 1px solid #bbf7d0;
  font-size: 10px;
  color: #166534;
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.5;
}
.review-tip-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: -1px;
}
.review-tip strong { color: #15803d; font-weight: 800; }

.review-countdown {
  margin-top: 12px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.05);
}
.rc-label {
  font-size: 11px; color: #64748b; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.rc-label::before {
  content: '';
  width: 8px; height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.rc-value {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-num);
}

/* ========== 存档 ========== */
.save-slots { display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* 玩法说明 */
.guide-sections { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.guide-section {
  padding: 10px 12px; border-radius: 10px;
  background: var(--aqua-surface-2);
  border: 1px solid var(--aqua-line);
}
.guide-section-title { font-size: 12px; font-weight: 900; color: var(--aqua-primary-deep); margin-bottom: 4px; }
.guide-section-text { font-size: 11px; color: var(--aqua-ink-2); line-height: 1.6; font-weight: 600; }
.save-slot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--aqua-border);
  background: var(--aqua-surface); cursor: pointer;
  transition: all 180ms ease;
}
.save-slot:hover { border-color: var(--aqua-primary); background: #fff; }
.save-slot-num {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep);
  font-family: var(--font-num); font-weight: 900; font-size: 16px;
  flex-shrink: 0;
}
.save-slot-info { flex: 1; min-width: 0; }
.save-slot-title { font-size: 12px; font-weight: 800; color: var(--aqua-foreground); }
.save-slot-time { font-size: 10px; color: var(--aqua-ink-3); margin-top: 2px; }
.save-slot-action {
  padding: 5px 12px; border-radius: 9px;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep);
  font-size: 10px; font-weight: 800;
}
.save-slot.empty .save-slot-title { color: var(--aqua-ink-3); }



/* ==========================================================================
   2026-08-30 补丁：真实头像图 + 商店左右布局（对齐 demo）
   ========================================================================== */
/* 头像位统一用 <img>（工程师真实头像 resource/ui/avatar_N.webp） */
.emp-avatar img, .team-avatar img, .detail-avatar img,
.recruit-avatar img, .recruit-detail-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  display: block;
}
/* 算力商店：demo 的 shop-modal-body = 左卡片列 + 右 160px 大图区 */
.shop-modal-body.om-shop-wrap { display: grid; grid-template-columns: 1fr 160px; gap: 0; }
.om-shop-left { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.2rem 0.3rem 0.2rem 0; }
.om-shop-card { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; text-align: left; padding: 0.45rem 0.6rem; }
.om-shop-card .om-shop-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: var(--aqua-surface-2); border-radius: 10px; overflow: hidden; }
.om-shop-card .om-shop-icon img { width: 100%; height: 100%; object-fit: contain; }
.om-shop-card b { font-size: 0.76rem; font-weight: 900; color: var(--aqua-foreground); flex: 1; }
.om-shop-art {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.8rem 0.6rem; border-left: 1px solid var(--aqua-border);
}
.om-shop-art img { width: 120px; height: auto; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(23,50,77,0.25)); }
.om-shop-art-tip { font-size: 0.6rem; color: var(--aqua-ink-3); line-height: 1.5; text-align: center; }
/* 立项蓝图分区标题（demo 的 plan-section-title 已移植，这里补行距） */
.om-plan .plan-section-title { margin-top: 0.35rem; }
.om-plan .plan-section-title:first-child { margin-top: 0; }

/* 2026-08-30：教学弹窗遮罩不虚化背景（用户要求二级/覆盖层一律不用模糊） */
.dg-modal-mask.dg-tut-mask {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(23, 50, 77, 0.35);
  animation: none;
}

/* ==========================================================================
   2026-08-30 二级面板重做后补齐的样式（以 demo 为准）
   ========================================================================== */
/* 主体容器参与父级 grid（否则 app-shell 的三行布局会失效） */
.office-shell #officeMain { display: contents; }

/* 列表列头（团队/招聘左右分栏的小标题行） */
.team-col-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 800; color: var(--aqua-ink-2);
  margin-bottom: 6px; padding: 0 2px;
}
.team-col-sub { font-size: 10px; color: var(--aqua-ink-3); font-weight: 600; }

/* 详情区小标题 */
.dii-title { font-weight: 800; color: var(--aqua-foreground); margin-bottom: 4px; font-size: 11px; }

/* 测试面板头部 meta */
.tch-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* 算力预览规格行 */
.shop-preview-spec { font-size: 10px; color: var(--aqua-ink-3); margin-top: 4px; text-align: center; }

/* 评审达标标记 */
.rs-val.ok { color: var(--aqua-success); font-weight: 800; }

/* 设置浮层（demo 的三级弹窗卡片 + fixed 覆盖） */
.set-pop-mask {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(23, 50, 77, 0.35);
  display: flex; align-items: center; justify-content: center;
  animation: overlay-fade-in 0.2s ease both;
}
.set-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.set-row { display: flex; flex-direction: column; gap: 4px; }
.set-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--aqua-ink-2); }
.set-label b { font-family: var(--font-num); color: var(--aqua-primary-deep); }
.set-range { width: 100%; accent-color: var(--aqua-primary); }
.set-tip { font-size: 10px; color: var(--aqua-ink-3); }
.sub-modal-footer {
  padding: 10px 16px 14px; border-top: 1px solid var(--aqua-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: var(--aqua-surface);
}

/* 玩法说明面板 */
.guide-body { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.guide-goal {
  padding: 8px 10px; border-radius: 10px; font-size: 11px; line-height: 1.6;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep); font-weight: 700;
}
.guide-sec { padding: 6px 0; border-top: 1px solid var(--aqua-border); }
.guide-sec-title { font-size: 12px; font-weight: 900; color: var(--aqua-foreground); margin-bottom: 4px; }
.guide-sec p { font-size: 11px; line-height: 1.7; color: var(--aqua-ink-2); margin: 0; }

/* 玩法说明分页（用户 2026-09-02：过长文本翻页，不加滚动条） */
.guide-body.paginated { overflow: hidden; gap: 10px; max-height: none; }
.omg-goal {
  padding: 8px 12px; border-radius: 10px; font-size: 11px; line-height: 1.6; font-weight: 700;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep);
  border: 1px solid rgba(184, 229, 247, 0.8);
}
.omg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.omg-tab {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--aqua-border);
  background: var(--aqua-surface); color: var(--aqua-ink-2); font-size: 11px; font-weight: 800;
  cursor: pointer; transition: all 160ms ease;
}
.omg-tab:hover { border-color: var(--aqua-primary); color: var(--aqua-primary-deep); }
.omg-tab.active { background: var(--aqua-primary); color: #fff; border-color: var(--aqua-primary); box-shadow: 0 4px 10px -4px rgba(90, 166, 176, 0.6); }
.omg-page { display: flex; flex-direction: column; gap: 8px; }
.omg-page-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; color: var(--aqua-foreground); }
.omg-page-title svg { width: 14px; height: 14px; }
.omg-page-lines { display: flex; flex-direction: column; gap: 6px; }
.omg-page-lines p { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.7; color: var(--aqua-ink-2); background: var(--aqua-surface-2); border: 1px solid var(--aqua-line); }
.omg-page-lines b { color: var(--aqua-primary-deep); }
.omg-counters { font-size: 11px; font-weight: 800; color: var(--aqua-ink-3); text-align: right; }

/* 立项/攻关/论文等 body 无分栏时的通用补白 */
.modal-body:not(.team-modal-body):not(.recruit-modal-body):not(.shop-modal-body)
  :not(.test-chat-area):not(.review-certificate) { min-width: 0; }
.om-plan { display: flex; flex-direction: column; gap: 8px; }
.om-plan-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.om-arrow {
  width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--aqua-border);
  border-radius: 8px; background: #fff; color: var(--aqua-primary-deep);
  font-weight: 900; cursor: pointer;
}
.om-arrow:hover { background: var(--aqua-primary-soft); }
.om-pick-card {
  flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; background: #fff; border: 1px solid var(--aqua-border); border-radius: 12px;
}
.om-pick-name { font-size: 12px; font-weight: 900; color: var(--aqua-foreground); }
.om-pick-sub { font-size: 10px; color: var(--aqua-primary-deep); }
.om-pick-desc { font-size: 10px; color: var(--aqua-ink-3); line-height: 1.45; }
.om-syn {
  padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
  background: var(--aqua-gold-soft); color: var(--aqua-gold); white-space: nowrap;
}
.om-chip {
  padding: 5px 12px; border: 1px solid var(--aqua-border); border-radius: 999px;
  background: #fff; font-size: 11px; font-weight: 800; color: var(--aqua-ink-2); cursor: pointer;
}
.om-chip:hover { background: var(--aqua-primary-soft); }
.om-chip.on {
  background: linear-gradient(135deg, #6fc3ff, var(--aqua-primary-deep));
  color: #fff; border-color: var(--aqua-primary-deep);
}
.om-chip.wide { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 12px; }
.om-chip.wide b { font-size: 11px; }
.om-chip.wide i { font-size: 9px; font-style: normal; color: var(--aqua-ink-3); }
.om-chip.wide.on i { color: rgba(255, 255, 255, 0.85); }
.om-dim { font-size: 10px; color: var(--aqua-ink-3); }
.om-done { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; }
.om-done-title { font-size: 13px; font-weight: 900; color: var(--aqua-primary-deep); margin-bottom: 2px; }
.om-done-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--aqua-surface); border-radius: 10px; font-size: 11px;
}
.om-done-line span { color: var(--aqua-ink-3); }
.om-done-line b { color: var(--aqua-foreground); font-weight: 800; }
.om-done-tip { margin-top: 4px; font-size: 10px; color: var(--aqua-ink-3); line-height: 1.6; }
.om-detail-traits { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.om-trait {
  padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 800;
  background: var(--aqua-primary-soft); color: var(--aqua-primary-deep);
}
/* 头像位统一用 <img>（工程师真实头像） */
.emp-avatar img, .team-avatar img, .detail-avatar img,
.recruit-avatar img, .recruit-detail-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}

/* 2026-08-30 精简版 evalshow / over 样式（旧 bonus 舞台样式已随三幕结算重做删除） */
.evalshow-stage, .over-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 20px; gap: 16px; min-height: 60vh; max-width: 520px; margin: 0 auto;
}
.evalshow-head, .over-head { text-align: center; }
.evalshow-title, .over-title {
  font-size: 22px; font-weight: 900; color: var(--aqua-foreground); margin-bottom: 4px;
}
.evalshow-meta, .over-meta { font-size: 14px; color: var(--aqua-ink-3); }
.evalshow-meta .em-score b { font-family: var(--font-num); color: var(--aqua-gold); font-size: 18px; }
/* 2026-09-03 评审答题 · 一次一题：居中大卡片 + 小鲸鱼三态立绘 + 气泡对错反馈 */
.evalshow-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 460px;
  padding: 22px 22px 18px; border-radius: 18px;
  background: #fff; border: 1.5px solid var(--aqua-border);
  min-height: 300px; justify-content: center; position: relative;
  box-shadow: var(--aqua-shadow-1);
}
.evalshow-card.ok { border-color: var(--aqua-success); animation: evalshowPop 0.34s ease; }
.evalshow-card.fail { border-color: var(--aqua-error); animation: evalshowShake 0.4s ease; }
@keyframes evalshowPop {
  from { transform: translateY(6px) scale(0.98); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
@keyframes evalshowShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
}
/* 小鲸鱼答题立绘：等待(idle) / 答对(ok 略抬起) / 答错(fail 抖动+偏红) */
.evalshow-role {
  height: 150px; max-width: 160px; object-fit: contain; border-radius: 12px;
  filter: drop-shadow(0 4px 6px rgba(88,117,142,.25));
  transition: transform .3s ease;
}
.evalshow-card.ok .evalshow-role { transform: translateY(-4px) scale(1.03); }
.evalshow-card.fail .evalshow-role { transform: translateX(0); }
/* 题目气泡 */
.evalshow-num { font-size: 13px; font-weight: 900; color: var(--aqua-primary-deep); margin-bottom: 2px; }
.evalshow-bub { padding: 10px 14px; border-radius: 12px; font-size: 16px; line-height: 1.55; max-width: 100%; }
.evalshow-bub-q { background: var(--aqua-primary-soft); color: var(--aqua-foreground); text-align: center; }
.evalshow-bub-a { background: var(--aqua-surface); color: var(--aqua-ink-2); text-align: center; }
/* 对错反馈：大号 ✓/✗ 标识 + 答案气泡 */
.evalshow-fb { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.evalshow-fb-badge {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.evalshow-fb-badge.ok { background: var(--aqua-success); animation: evalshowBounce .5s ease; }
.evalshow-fb-badge.fail { background: var(--aqua-error); animation: evalshowShake .45s ease; }
@keyframes evalshowBounce {
  0% { transform: scale(.3); }
  55% { transform: scale(1.25); }
  75% { transform: scale(.92); }
  100% { transform: scale(1); }
}
.evalshow-foot, .over-foot { display: flex; gap: 8px; }
.over-score { text-align: center; padding: 12px 0; }
.over-score-num { font-size: 48px; font-weight: 900; color: var(--aqua-primary-deep); font-family: var(--font-num); }
.over-score-cap { font-size: 11px; color: var(--aqua-ink-3); }
.over-verdict { font-size: 16px; font-weight: 900; margin-top: 6px; padding: 4px 14px; border-radius: 999px; display: inline-block; }
.over-verdict-pass { background: var(--aqua-primary-soft); color: var(--aqua-primary-deep); }
.over-verdict-excellent { background: var(--aqua-gold-soft); color: var(--aqua-gold); }
.over-verdict-fail { background: #ffeef0; color: var(--aqua-error); }
.over-verdict-veto { background: #2a2a2a; color: #fff; }
.over-lines { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 460px; }
.over-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: #fff; border: 1px solid var(--aqua-border);
  border-radius: 8px; font-size: 12px;
}
.over-line span { color: var(--aqua-ink-3); }
.over-line b { color: var(--aqua-foreground); font-weight: 800; }

/* 2026-08-30 补丁：招聘/团队详情列内容超高时可滚动（保证「个人简介」看得见） */
.recruit-detail-col { overflow-y: auto; }
.team-detail-col { overflow-y: auto; }
.recruit-detail-stats { gap: 8px; }
.recruit-detail-bio { flex: 1; }
/* sub-modal 的活动按钮沿用 demo 的 shop-tier 卡片样式 */
.sub-modal-body .shop-tier {
  width: 100%; text-align: left; border: 1px solid var(--aqua-border);
  border-radius: 12px; background: #fff; cursor: pointer; padding: 8px 12px;
}
.sub-modal-body .shop-tier:hover { background: var(--aqua-primary-soft); }
/* 集体活动按钮（demo 的 overview-team-btn）容器留白 */
.team-overview { gap: 12px; }

/* 攻关 icon（demo 同款 SVG） */
.qc-icon svg { width: 30px; height: 30px; }
.fd-cost { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.fd-cost span { white-space: nowrap; }
/* 2026-09-02：攻关条件未达标（语料不够 / 经费不够）→ 红字，与旧门槛胶囊的 lack 同色 */
.fd-cost span.lack { color: #d24d4d; }


/* ==========================================================================
   2026-08-30 界面适配：整体等比缩放（设计基准 1280×720，与 demo 观感一致）
   --------------------------------------------------------------------------
   demo 的 .app-shell 是 100%×100%，所有尺寸都相对窗口；
   游戏这边若用固定 px（如 modal-card 600px），小窗口下会显得比 demo 大。
   这里对整个 office-shell 做等比缩放，让 UI 与窗口的比例关系与 demo 一致。
   ========================================================================== */
/* 外壳：只负责裁切，绝不溢出；缩放发生在内层 .office-scale */
.office-shell {
  --ui-scale: 1;
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
.office-scale {
  position: absolute;
  /* V3.5.5 固定比例 letterbox：游戏恒以「设计盒」整体等比缩放，
     不再用 100%/scale 跟随窗口宽高（那会让 X 轴单轴拉伸时 UI 跟着变形/被压缩）。
     窗口仅单轴变宽/变高时，scale = min(宽/设计宽, 高/设计高) 不变 → 只改四周留白，UI 像素尺寸与
     布局完全不变；只有整窗整体成比例放大/缩小才跟随缩放。相当于整体分辨率等比改变。
     2026-09-15：设计盒尺寸改由 JS applyUiScale 写入 --box-w/--box-h ——
     横屏仍是 1280×720（与写死时完全一致，零回归），竖屏是窄盒（宽 340 / 高按容器比例）。 */
  left: 50%; top: 50%;
  width: var(--box-w, 1280px);
  height: var(--box-h, 720px);
  transform: translate(-50%, -50%) scale(var(--ui-scale));
  transform-origin: center center;
  /* V3.5.x：从固定 56/1fr/96 三行 grid 改为「场景居中 + UI 紧贴场景」的列布局，
     顶部岛 / 底部条 / 左行动列的宽度与高度由 JS 算出的 --scene-w / --scene-h 决定。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  gap: 10px;
}
#officeMain { display: contents; }   /* 三行直接进 .office-scale 的 grid */
/* 2026-09-02：灵动岛 / 底部数值模块 / 办公室场景 三者同宽同中心。
   场景在 .main-area 里被左侧行动列（64px）挤走，中心线相对容器中心右移
   (64 + 12) / 2 = 38px；底部面板早就补了这个偏移，顶部岛没有 —— 看着就是
   「岛居中、场景偏右」。这里让顶部岛也跟场景同宽（--scene-w，JS 算出）并右移 38px。 */
.office-shell .island-topbar {
  width: min(var(--scene-w, 1080px), calc(100% - 20px));
  margin-left: 38px;
  /* 2026-09-03：右缘留 38px、整体再右移 40px、内容左对齐 */
  margin-right: 38px;
  text-align: left;
  left: 40px;
}
/* 注：新手引导横幅是 absolute 定位（left: 90px 已对齐场景左缘），不走这条居中规则 */
/* 弹窗层挂在 .office-shell 下（缩放容器之外）：不参与 transform:scale，
   尺寸/字号与 demo 完全一致，不会被放大成「比 demo 大一圈」。 */
.office-shell > #modalContainer { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.modal-mask { position: absolute; }

/* 二级界面高度默认不跨过办公室背景：上下各留出顶栏/底栏的安全区 */
.modal-card {
  /* 不跨过办公室背景：
     办公室界面是整体缩放的（.office-scale 的 transform:scale），场景区「视觉」占用的上下边距
     = (顶栏 56 + 间距 20 + 底部模型条 96 + 间距 20) × ui-scale = 192px × ui-scale。
     弹窗在缩放之外，所以要按缩放后的实际边距扣，否则大窗口（scale>1）仍会盖到背景外面。 */
  max-height: calc(100% - 192px * var(--ui-scale, 1));
  max-width: calc(100% - 40px);
  min-height: 200px;
}
/* 兜底：内容实在放不下时允许滚动，宁可滚动也不能把「集体活动」这类按钮截掉一半 */
.modal-body { overflow-y: auto; }
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--aqua-border); border-radius: 999px; }

/* 场景：始终铺满可见区，缩放不改变可见范围 */
.office-shell .office-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* 禁止所有二级界面出现滚动条（除测试聊天窗口外） */
/* 注：.modal-body 不在此列——见下方「兜底可滚动」规则 */
.modal-body *:not(.test-messages),
.team-detail-col, .recruit-detail-col,
.team-list, .recruit-list, .paper-list,
.office-shell, .app-shell, #officeMain {
  overflow: visible;
}
/* 用户 2026-08-30 明确要求：二级界面禁止滑动条。
   放不下时**整体缩放**（见 GameUI.fitModalBody：量出内容高 / 可用高，给 .modal-body 加
   transform:scale 并反向补偿宽度），而不是加滚动条 —— 这是为后期手机适配做准备。
   全站唯一允许滚动的两处：员工简介 .recruit-detail-bio、测试聊天 .test-messages。 */
.modal-card, .modal-footer { overflow: hidden; }
.modal-body {
  overflow: hidden;
  /* ⚠️ 必须 top left：JS 缩放时会把 width 反向补偿成 100%/k（k=0.8 → width:125%），
     元素变宽后中心右移；若用 top center，缩放会锁住这个偏移 → 内容整体往右挤（实测过）。
     以左上角为原点时，补偿宽度 × k 正好回到原宽，左边缘贴齐、不偏移。 */
  transform-origin: top left;
  transition: transform 160ms ease;
}
/* ★ fitModalBody 能否工作的关键：面板内容绝不能被 flex 压缩。
   .modal-body 是 flex column，子项默认 flex-shrink:1 —— 内容一被压扁，
   scrollHeight 就等于 clientHeight，fitModalBody 误判「不需要缩放」，
   表现就是「内容截断在半路 + 下方一大片空白」（立项面板实测截图）。 */
.modal-body > * { flex-shrink: 0; }
.dii-title { display: inline; font-weight: 800; color: var(--aqua-foreground); margin-right: 4px; }
/* ⚠️ 2026-09-13：这里**暂时维持 overflow:visible 的既有行为**（不改成 hidden）。
   背景：全局「二级界面禁滚动条」规则 `.modal-body *:not(.test-messages){overflow:visible}`
   特异性 (0,2,0)，会击穿本节的 (0,1,0) ⇒ 队伍满员时 .team-list 的最后一行会溢出列表盒、
   压在下方翻页按钮上（用户 2026-09-13 截图）。
   但实测把特异性提上去改成真 hidden 之后**更糟**：内容被裁掉（人看不见了），
   且 `audit_hitmap.js` 立刻报 12 处「点它却命中别人」——因为被裁元素几何位置仍在。
   根因不在 overflow，而在 **fitModalBody 量不到 flex 容器内部的溢出**：
   .team-modal-body 是 flex:1 + min-height:0，高度由容器分配，`.modal-body.scrollHeight`
   恒等于 clientHeight ⇒ 判不出「放不下」⇒ 不缩放 ⇒ 内容只能溢出或被裁。
   正解需要让 fitModalBody 也能量到 flex 子项的真实内容高（改动面较大），**留待单独一轮**。 */
.team-detail-col, .recruit-detail-col,
.team-list, .recruit-list, .paper-list {
  overflow: hidden;
}
/* 员工简介：简历文案可长可短，允许滚动（用户指定） */
.recruit-detail-bio {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.recruit-detail-bio::-webkit-scrollbar { width: 4px; }
.recruit-detail-bio::-webkit-scrollbar-thumb { background: var(--aqua-border); border-radius: 999px; }
/* 测试聊天窗口：允许滚动（用户指定） */
.test-messages {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ==========================================================================
   2026-08-30 逐页抄 demo 的修正
   ========================================================================== */
/* 攻关 icon：demo 的 .qc-icon 是 opacity .12 的淡色块且 svg 与底色同色 → 实际看不见。
   改为「实色圆角块 + 白色 svg」，视觉仍是 demo 的彩色方块图标，但清晰可见。 */
.qc-icon { opacity: 1; }
.qc-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.quadrant-card.selected .qc-icon { opacity: 1; }

/* 算力预览：真实显卡图（resource/ui/a100_*.webp） */
.shop-gpu-img {
  width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(23, 50, 77, 0.28));
  position: relative; z-index: 1;
}
.shop-preview-icon img { display: block; }

/* 论文卡片：demo 的字段名是 paper-footer / paper-desc（不是 paper-foot） */
/* demo 原值：没有 line-clamp / overflow:hidden —— 之前加的行数限制正是「论文卡片截断」的根因 */
.paper-desc {
  font-size: 10px; color: #705830; line-height: 1.6;
  padding-left: 18px;
  padding-top: 4px;
  border-top: 1px dashed rgba(180, 150, 90, 0.25);
}
.paper-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 18px; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(180, 150, 90, 0.25);
}
.paper-eff { font-size: 10px; font-weight: 800; color: #4a7c59; }
.paper-cost { font-size: 10px; font-weight: 700; color: #a08050; }

/* 测试面板：聊天区更大（demo 是 flex:1，这里保证至少占 60% 高度） */
.test-chat-area { flex: 1; min-height: 240px; }
.test-messages { flex: 1; min-height: 150px; max-height: none; }

/* 测试面板：鲸鱼娘头像用编辑器配置的 UI_PORTS.chat */
.test-chat-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--aqua-primary-soft);
  display: grid; place-items: center;
}
.test-chat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   2026-08-30 二轮修正：skew-btn 高光残留 / 团队详情压缩 / 论文不截断
   ========================================================================== */
/* skew-btn：::before 默认绝对不可见（opacity 0），hover 才滑出；
   触摸屏不残留 hover 高光；点击后不留 focus ring（保留键盘 focus-visible） */
.skew-btn::before { opacity: 0; transition: left 460ms ease, opacity 260ms ease; }
.skew-btn:hover::before { opacity: 1; }
.skew-btn { -webkit-tap-highlight-color: transparent; }
.skew-btn:focus { outline: none; }
.skew-btn:focus-visible { outline: 2px solid var(--aqua-primary); outline-offset: 2px; }

/* 团队详情：保证一屏放得下、按钮不截断 */
.detail-stats { gap: 10px; }
.detail-info-item { padding: 8px 10px; font-size: 11px; line-height: 1.5; }
.detail-role { white-space: nowrap; }
.detail-actions { margin-top: auto; padding-top: 6px; }

/* 论文卡片：内容超高也不截断（paper-list 内部滚动是 demo 允许的，这里保证卡片不被裁掉下半截） */
.paper-list { gap: 10px; }
.paper-card { padding: 12px 14px 12px 16px; }
.paper-tags { padding-left: 18px; display: flex; flex-wrap: wrap; gap: 4px; }
.paper-footer { margin-top: 6px; padding-top: 6px; }


/* ==========================================================================
   2026-08-30 团队 / 招聘面板：照抄 demo 的 stats-sidebar 结构与入场动效
   --------------------------------------------------------------------------
   · cardPopIn：卡片依次浮现（demo team.html engineer-card）
   · nameFadeIn：名字浮现（demo recruit.html selectCandidate）
   · coverage-* / rds-fill：进度条先归零再依次生长（demo animateCoverageBars）
   ========================================================================== */
@keyframes cardPopIn {
  0%   { opacity: 0; transform: scale(0.88) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nameFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 用 animation + both 兜底：即使 JS 没来得及设 animation，元素也会自己播完并停在可见态。
   （直接写 opacity:0 有风险——omSwap 延迟插入的节点若没被 animatePanelCards 扫到就永久隐形） */
.modal-card .pop-in { animation: cardPopIn 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
/* 依次浮现（demo team.html 的 nth-child 延迟） */
.team-list .team-row:nth-child(1), .recruit-list .recruit-row:nth-child(1) { animation-delay: 0.05s; }
.team-list .team-row:nth-child(2), .recruit-list .recruit-row:nth-child(2) { animation-delay: 0.10s; }
.team-list .team-row:nth-child(3), .recruit-list .recruit-row:nth-child(3) { animation-delay: 0.15s; }
.team-list .team-row:nth-child(4), .recruit-list .recruit-row:nth-child(4) { animation-delay: 0.20s; }
.team-list .team-row:nth-child(5), .recruit-list .recruit-row:nth-child(5) { animation-delay: 0.25s; }
.team-list .team-row:nth-child(6), .recruit-list .recruit-row:nth-child(6) { animation-delay: 0.30s; }
.team-list .team-row:nth-child(7), .recruit-list .recruit-row:nth-child(7) { animation-delay: 0.35s; }
.team-list .team-row:nth-child(8), .recruit-list .recruit-row:nth-child(8) { animation-delay: 0.40s; }
.team-name, .recruit-name { animation: nameFadeIn 0.38s ease-out 0.14s both; }
.rds-fill { transition: width 0.7s cubic-bezier(0.2, 0.9, 0.3, 1); }

/* ---- 团队总览（demo .stats-sidebar → .stats-card） ---- */
/* ⚠️ 原来是 height:100%，配合 .stats-card{flex:1} 会把卡片压到小于内容高度，
   于是「团建活动」按钮被挤出卡片外（实测按钮底超出卡片底 11px）。
   改成内容自然高度，放不下时由 GameUI.fitModalBody() 整体缩放兜底。 */
.team-overview { display: flex; flex-direction: column; gap: 12px; }
.team-overview .overview-subtitle b { font-family: var(--font-num); color: var(--aqua-primary-deep); }
.team-overview .overview-subtitle b.team-score { color: var(--aqua-pink-deep); }

.team-overview .stats-card {
  background: #fff;
  border: 1px solid var(--aqua-border);
  border-radius: var(--aqua-radius-lg);
  padding: 14px 16px;
  box-shadow: 0 6px 18px -14px rgba(23, 50, 77, 0.35);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;      /* 不被压缩：压了就会把底部的「团建活动」挤出可视区 */
  display: flex;
  flex-direction: column;
}
.team-overview .stats-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--aqua-pink), var(--aqua-primary));
  pointer-events: none;
}
.team-overview .stats-card-title {
  font-size: 0.9rem; font-weight: 800; color: var(--aqua-foreground);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.team-overview .stats-card-title .title-icon { font-size: 0.92rem; }
.team-overview .stats-card-title .title-line {
  flex: 1; height: 1px; margin-left: 4px;
  background: linear-gradient(90deg, var(--aqua-border), transparent);
}
.team-overview .stat-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; flex-shrink: 0; }
.team-overview .stat-item {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 5px 8px; gap: 6px;
  background: var(--aqua-surface-2); border-radius: var(--aqua-radius-sm);
}
.team-overview .stat-item-label {
  font-size: 0.72rem; color: var(--aqua-ink-2); font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.team-overview .stat-item-label .ico { font-size: 0.78rem; }
.team-overview .stat-item-value {
  font-family: var(--font-num); font-size: 0.9rem; font-weight: 900;
  color: var(--aqua-primary-deep);
}
.team-overview .stat-item-value.pink { color: var(--aqua-pink-deep); }
.team-overview .stat-item-value.gold { color: #b57b1e; }
.team-overview .stat-item-value .unit {
  font-size: 0.65rem; font-weight: 700; color: var(--aqua-ink-3); margin-left: 1px;
}

/* 岗位分布（2026-09-13）：一个 stat-item 里塞三个「岗位 N 人」。
   值不再是单个数，所以不用 .stat-item-value 的 0.9rem/900 大字号（会挤爆一行）。 */
.team-overview .stat-item-value.role-dist {
  display: flex; align-items: baseline; gap: 6px;
  font-family: inherit; font-size: 0.66rem; font-weight: 700;
  color: var(--aqua-ink-2); white-space: nowrap;
}
.team-overview .role-dist .rd { display: inline-flex; align-items: baseline; gap: 1px; }
.team-overview .role-dist .rd b {
  font-family: var(--font-num); font-size: 0.78rem; font-weight: 900; margin: 0 1px;
}
.team-overview .role-dist .pretrain { color: var(--aqua-primary-deep); }
.team-overview .role-dist .post     { color: var(--aqua-pink-deep); }
.team-overview .role-dist .data     { color: var(--aqua-success); }
.team-overview .role-dist .rd:not(:first-child)::before {
  content: "·"; color: var(--aqua-ink-3); font-weight: 400; margin-right: 5px;
}

.team-overview .skill-coverage { margin-bottom: 12px; flex-shrink: 0; }
.team-overview .coverage-title {
  font-size: 0.75rem; font-weight: 700; color: var(--aqua-ink-2);
  margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.team-overview .coverage-bars { display: flex; flex-direction: column; gap: 6px; }
.team-overview .coverage-row { display: flex; align-items: center; gap: 8px; }
.team-overview .coverage-name {
  width: 44px; font-size: 0.68rem; font-weight: 600;
  color: var(--aqua-ink-2); flex-shrink: 0;
}
.team-overview .coverage-bar {
  flex: 1; height: 10px; border-radius: 999px;
  background: var(--aqua-surface-3); overflow: hidden; position: relative;
}
.team-overview .coverage-fill {
  height: 100%; border-radius: 999px; width: 0;
  transition: width 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
}
.team-overview .coverage-fill::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 8px, rgba(255,255,255,0.35) 8px 9px, transparent 9px 17px);
}
.team-overview .coverage-fill.blue  { background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-deep)); }
.team-overview .coverage-fill.pink  { background: linear-gradient(90deg, var(--aqua-pink), var(--aqua-pink-deep)); }
.team-overview .coverage-fill.gold  { background: linear-gradient(90deg, #ffd27a, var(--aqua-gold)); }
.team-overview .coverage-fill.green { background: linear-gradient(90deg, #7ed4b0, var(--aqua-success)); }
.team-overview .coverage-fill.red   { background: linear-gradient(90deg, #f593a0, var(--aqua-error)); }
.team-overview .coverage-lv {
  width: 32px; text-align: right; flex-shrink: 0;
  font-family: var(--font-num); font-size: 0.75rem; font-weight: 800;
  color: var(--aqua-foreground);
}
.team-overview .coverage-lv .lv-label { font-size: 0.55rem; color: var(--aqua-ink-3); font-weight: 600; }

.team-overview .team-build-btn {
  width: 100%; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--aqua-gold-soft), #fff3d6);
  border: 1.5px solid var(--aqua-gold);
  border-radius: var(--aqua-radius-md);
  color: #b57b1e; font-size: 0.8rem; font-weight: 800;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(242, 169, 59, 0.2);
}
.team-overview .team-build-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(242, 169, 59, 0.35);
  filter: brightness(1.05);
}
.team-overview .team-build-btn .ico { font-size: 0.95rem; }
/* 本周团建/聚餐都已安排 → 入口置灰不可点（2026-09-09） */
.team-overview .team-build-btn:disabled, .team-overview .team-build-btn.used {
  opacity: 0.5; cursor: not-allowed; filter: grayscale(0.5);
}
.team-overview .team-build-btn:disabled:hover, .team-overview .team-build-btn.used:hover {
  transform: none; box-shadow: 0 4px 10px rgba(242, 169, 59, 0.2); filter: grayscale(0.5);
}


/* ==========================================================================
   2026-08-30 两处「兜底」补丁（与 demo 的有意差异，都是为了内容不被截）
   ========================================================================== */
/* ① 定时 tick（officeTick → render soft）会重建面板正文，此时禁掉 pop-in 入场动画。
      否则玩家会看到「打开团队界面过一会儿自己重置、卡片又浮现一遍」。
      由 renderOfficeModal 的静默刷新分支给 body 加 .no-pop。 */
.modal-body.no-pop .pop-in { animation: none; opacity: 1; }

/* ② 招聘详情「个人简介」卡片：demo 是 overflow:hidden，简历文案一长就会把
      里面的词条标签（recruit-detail-tags）裁掉 —— 表现为「工程师面板没有显示词条」。
      这里允许纵向滚动兜底，与团队/论文面板一致。 */
.recruit-detail-bio { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.recruit-detail-bio::-webkit-scrollbar { width: 4px; }
.recruit-detail-bio::-webkit-scrollbar-thumb { background: var(--aqua-border); border-radius: 999px; }

/* ==========================================================================
   V3.5.2 语料看板 / 门槛提示 / 品质拆解（doc/14 U12 / U13 / U14）
   ========================================================================== */
.office-shell .corpus-gap {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 0.68rem; font-weight: 900;
  color: #1f9d7a; background: rgba(126, 212, 176, 0.18);
  border: 1px solid rgba(83, 185, 141, 0.5);
}
.office-shell .corpus-gap.warn { color: #b97a1f; background: rgba(242, 185, 75, 0.16); border-color: rgba(242, 185, 75, 0.55); }
.office-shell .corpus-gap.bad { color: #d24d4d; background: rgba(242, 108, 108, 0.14); border-color: rgba(242, 108, 108, 0.5); }
.corpus-dash { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.corpus-dash .cd-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: #5b6b7a; }
.corpus-dash .cd-row b { font-family: var(--font-num); color: #24313d; }
.corpus-dash .cd-lack {
  font-size: 0.75rem; font-weight: 700; color: #d24d4d;
  background: rgba(242, 108, 108, 0.08); border: 1px dashed rgba(210, 77, 77, 0.45);
  border-radius: 8px; padding: 6px 8px;
}
/* V3.5.3：语料「本周预计新增需求 vs 每周产量」可比性标记 */
.cd-compare { padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; }
.cd-compare.avant { color: #1f9d7a; background: rgba(111, 201, 154, 0.16); border: 1px solid rgba(83, 185, 141, 0.45); }
.cd-compare.lack { color: #d24d4d; background: rgba(242, 108, 108, 0.12); border: 1px solid rgba(210, 77, 77, 0.5); }
/* 旧「攻关分方向门槛胶囊」（文字门槛 / 代码门槛）已于 2026-09-02 删除：
   攻关条件改为「统一语料门槛 + 经费消耗」，文案并入右下角消耗区（.fd-cost span.lack）。
   .focus-gate-strip 相关样式随旧结构一并移除。 */
.review-breakdown { margin-top: 8px; font-size: 0.76rem; color: #7a8894; text-align: right; font-family: var(--font-num); }

/* ===== V3.5.2 语料仓库弹窗 / 立项语料门槛（2026-09-01）===== */
.corpus-modal { display: flex; flex-direction: column; gap: 14px; }
.corpus-modal .cm-hero { display: flex; align-items: center; gap: 12px; }
.corpus-modal .cm-num { font-family: var(--font-num); font-size: 2.2rem; font-weight: 900; color: #24313d; }
.corpus-modal .cm-num span { font-size: 0.85rem; font-weight: 700; color: #7a8894; }
.corpus-range {
  position: relative; height: 18px; border-radius: 999px; overflow: hidden;
  display: flex; border: 1px solid var(--aqua-border);
}
.corpus-range .cr-seg { height: 100%; }
.corpus-range .cr-seg.lack { background: rgba(242, 108, 108, 0.55); }
.corpus-range .cr-seg.tight { background: rgba(242, 185, 75, 0.55); }
.corpus-range .cr-seg.ok { background: rgba(126, 212, 176, 0.6); }
/* 2026-09-06：.cr-need-mark（100% 需求刻度线）已随「语料缺口减速」改版移除 */
.corpus-range .cr-cursor {
  position: absolute; top: -3px; bottom: -3px; width: 4px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 0 2px #24313d;
}
.corpus-range-legend { display: flex; margin-top: 5px; font-size: 0.68rem; font-weight: 800; }
/* 图例三段与上方色段等宽（内联 width 控制），位置严格对齐 */
.corpus-range-legend span { display: inline-block; text-align: center; letter-spacing: 0.02em; }
.corpus-range-legend .lack { color: #d24d4d; }
.corpus-range-legend .tight { color: #b97a1f; }
.corpus-range-legend .ok { color: #1f9d7a; }

/* V3.5.3 语料仓库 · 品质库存（背包式三卡） */
.corpus-modal .cm-quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.corpus-modal .cm-quality {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--aqua-border);
}
.corpus-modal .cm-quality .cmq-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 800; color: #5b6b7a;
}
.corpus-modal .cm-quality .cmq-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.corpus-modal .cm-quality.normal .cmq-dot { background: #9aa8b5; }
.corpus-modal .cm-quality.good .cmq-dot { background: #6fc99a; }
.corpus-modal .cm-quality.prime .cmq-dot { background: #f2b84b; }
.corpus-modal .cm-quality .cmq-count {
  font-family: var(--font-num); font-size: 1.5rem; font-weight: 900;
  color: #24313d; line-height: 1.1;
}
.corpus-modal .cm-quality .cmq-count i { font-style: normal; font-size: 0.72rem; font-weight: 700; color: #7a8894; margin-left: 2px; }
.corpus-modal .cm-quality .cmq-sub { font-size: 0.66rem; color: #8a97a3; font-family: var(--font-num); }
.corpus-modal .cm-quality.good { border-color: rgba(111, 201, 154, 0.7); background: rgba(126, 212, 176, 0.1); }
.corpus-modal .cm-quality.prime { border-color: rgba(242, 184, 75, 0.7); background: rgba(242, 184, 75, 0.1); }

/* V3.5.4 语料仓库 · 供需胶囊看板 / 品质胶囊 / 采购胶囊（替代纯文本行） */
.cm-supply { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--aqua-surface-2); border: 1px solid var(--aqua-line); }
.cm-sup-chart { display: flex; flex-direction: column; gap: 8px; }
.cms-row { display: grid; grid-template-columns: 92px 1fr 74px; align-items: center; gap: 8px; }
.cms-lab { font-size: 0.72rem; font-weight: 800; color: #5b6b7a; white-space: nowrap; }
.cms-track { position: relative; height: 9px; border-radius: 999px; background: rgba(23, 50, 77, 0.08); overflow: hidden; }
.cms-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.cms-fill.need { background: linear-gradient(90deg, #5aa6b0, var(--aqua-primary-deep)); }
.cms-fill.ok { background: linear-gradient(90deg, #7ed4b0, #53b98d); }
.cms-fill.lack { background: linear-gradient(90deg, #ffb3a0, #e8837d); }
.cms-fill.wait { background: linear-gradient(90deg, #aeb9c4, #8a97a3); }
.cms-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #24313d; opacity: 0.55; }
.cms-val { font-family: var(--font-num); font-size: 0.82rem; font-weight: 900; color: #24313d; text-align: right; }
.cms-val i { font-style: normal; font-size: 0.62rem; font-weight: 700; color: #8a97a3; }
.cms-val.lack { color: #d24d4d; }
.cms-val.wait { color: #8a97a3; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.cms-val.wait svg { width: 13px; height: 13px; vertical-align: -2px; stroke-width: 2.4; }
.cms-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cm-verdict { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 900; }
.cm-verdict svg { width: 12px; height: 12px; stroke-width: 2.5; }
.cm-verdict.avant { color: #1f9d7a; background: rgba(111, 201, 154, 0.16); border: 1px solid rgba(83, 185, 141, 0.45); }
.cm-verdict.lack { color: #d24d4d; background: rgba(242, 108, 108, 0.12); border: 1px solid rgba(210, 77, 77, 0.5); }
.cm-verdict.wait { color: #8a97a3; background: rgba(138, 151, 163, 0.14); border: 1px solid rgba(138, 151, 163, 0.45); }
.cm-quality-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,0.85); border: 1px solid var(--aqua-border); font-size: 0.7rem; font-weight: 800; color: #5b6b7a; }
.cmqc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cm-quality-chip b { font-family: var(--font-num); color: #24313d; }
.cmqc-tier { color: #29323c; }
.cmqc-bonus { padding: 1px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; color: #1f9d7a; background: rgba(111, 201, 154, 0.14); }
.cm-lack-tip { display: flex; align-items: flex-start; gap: 6px; padding: 8px 11px; border-radius: 10px; font-size: 0.74rem; font-weight: 700; line-height: 1.5; color: #d24d4d; background: rgba(242, 108, 108, 0.08); border: 1px dashed rgba(210, 77, 77, 0.5); }
.cm-lack-tip svg { width: 14px; height: 14px; flex: none; margin-top: 1px; stroke-width: 2.2; }
/* 中性「机制说明」框（2026-09-16 用户：「明明已经很充足的情况下就不要弹红色的提醒了」）：
   语料不足的阶梯惩罚是**规则说明**，不是当前告警 —— 它常驻显示，以前借用 .cm-lack-tip
   的红色皮（红字红底红虚边）⇒ 库存储备充裕时玩家也会看到一个红框，误以为出了问题。
   这里换成中性信息色；真正的缺口告警仍是红色 .cm-lack-tip。 */
.cm-info-tip { display: flex; align-items: flex-start; gap: 6px; padding: 8px 11px; border-radius: 10px; font-size: 0.74rem; font-weight: 700; line-height: 1.5; color: #5b6b7a; background: rgba(138, 151, 163, 0.08); border: 1px dashed var(--aqua-line); }
.cm-info-tip svg { width: 14px; height: 14px; flex: none; margin-top: 1px; stroke-width: 2.2; }
.cm-buy { padding: 12px; border-radius: 14px; background: var(--aqua-surface-2); border: 1px solid var(--aqua-line); }
.cm-buy-odds { display: flex; gap: 8px; margin-bottom: 10px; }
.cbo-item { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: #5b6b7a; background: rgba(255,255,255,0.85); border: 1px solid var(--aqua-border); }
.cbo-item em { font-style: normal; font-size: 0.64rem; font-weight: 600; color: #8a97a3; }
.cbdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cbo-item.normal .cbdot { background: #9aa8b5; }
.cbo-item.good .cbdot { background: #6fc99a; }
.cmb-qual { font-size: 0.66rem; color: #8a97a3; font-weight: 700; margin-bottom: 8px; }

/* V3.5.3 新手教学引导横幅（必要操作未完成 → 时间暂停提示）
   ⚠️ 必须 position:absolute 脱离 .office-scale 的 3 行 grid 流：
   #officeMain 下有 4 个子（topbar/guideBanner/main-area/bottom-panel），
   若 banner 参与 grid 会抢占第2行(1fr)，导致 main-area 被挤入第3行(96px → 场景只露底)。 */
.office-guide-banner {
  position: absolute;
  top: calc(10px + 48px + 8px);   /* padding-top 10 + island-topbar高 48 + 视觉间距 8 */
  left: 90px;                    /* 左行动列 64 + gap 12 + padding 14 → 约 90 对齐场景区左上 */
  z-index: 7;                    /* 高于 office-scene (默认 0-1)，低于 modal (z:100) */
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px; font-size: 0.78rem; font-weight: 800;
  /* 2026-09-03：白底黑字 + 红字文案/图标 + 柔和投影（用户调整；此前被并行改动覆盖，重新应用） */
  color: #000000;
  background: #ffffff;
  border: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
}
.office-guide-banner span { color: #ca4e4e; }
.office-guide-banner > .dg-ic { color: #bd4242; }
.plan-gate { margin: 4px 0 0; font-size: 0.78rem; font-weight: 700; }
.plan-gate.ok { color: #1f9d7a; }
.plan-gate.lack { color: #d24d4d; }
/* 团队详情按钮被截断修复：详情列允许纵向滚动并留出底部空间 */
.team-detail-col { overflow-y: auto; padding-bottom: 18px; }
.team-detail-col .detail-actions { margin-top: auto; padding-top: 10px; }
.emp-wait {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -14px; z-index: 4; white-space: nowrap;
  font-size: 0.62rem; font-weight: 900; color: #6b7a88;
  background: rgba(230, 236, 241, 0.95); border: 1px solid var(--aqua-border);
  border-radius: 999px; padding: 1px 8px; pointer-events: none;
}

/* V3.5.2：语料面板移入左列弹窗后，底部模型数值与「场景左缘」对齐
   （main-area 按钮列 64px + gap 12px = 76px；右列 260px 空槽收起） */
.office-shell .bottom-panel { padding-left: 76px; grid-template-columns: 1fr; }

/* V3.5.2：场景「任何情况全图可见」——背景 contain 永不裁边；场景随外壳等比缩放
   （上一版的固定世界尺寸+裁切会挡住工程师，已按用户拍板撤销） */
.office-shell .office-bg { object-fit: contain; }

/* V3.5.2：语料区间条强化（实色 + 加高） */
.corpus-range { height: 24px; border-radius: 12px; }
.corpus-range .cr-seg.lack { background: #e8837d; }
.corpus-range .cr-seg.tight { background: #eebc63; }
.corpus-range .cr-seg.ok { background: #6fc99a; }
.corpus-range .cr-cursor { width: 6px; box-shadow: 0 0 0 3px #1f3a52; }

/* V3.5.2：顶栏语料区间条（迷你版，放在经费旁） */
.office-shell .corpus-mini {
  position: relative; display: inline-flex; align-items: center;
  width: 96px; height: 9px; margin-left: 8px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(184, 229, 247, 0.9); background: #eef7fb;
}
.office-shell .corpus-mini .cm-seg { height: 100%; }
/* 2026-09-06：三段宽度改为内联动态值（充裕线 = GAP_SLOW.FREE_ABOVE，编辑器可配），此处只留配色 */
.office-shell .corpus-mini .cm-seg.lack { background: #e8837d; }
.office-shell .corpus-mini .cm-seg.tight { background: #eebc63; }
.office-shell .corpus-mini .cm-seg.ok { background: #6fc99a; }
.office-shell .corpus-mini .cm-cursor {
  position: absolute; top: -2px; bottom: -2px; width: 3px; border-radius: 2px; background: #1f3a52; box-shadow: 0 0 0 1px rgba(255,255,255,0.9);
}

/* ==========================================================================
   V3.5.x 场景贴配角（背景任意比例，UI 跟随场景动态伸缩、紧密贴合，背景永不裁边）
   --------------------------------------------------------------------------
   .office-scale 已改为「场景居中」的 flex 列；以下三块 UI 一律以场景框
   (--scene-w / --scene-h，由 JS applySceneLayout 按背景实际比例算好) 为基准：
   - 顶部灵动岛：宽度 = 场景宽
   - 底部模型胶囊：宽度 = 场景宽
   - 左行动列：高度 = 场景高
   换背景图（1:1 / 4:3 / 其他）时 JS 重算两个变量，UI 自动贴合并居中。 */
.office-shell .island-topbar { width: var(--scene-w, 1060px); }
/* 主区 = 一个与场景同宽同高的位置容器；场景铺满，左行动列作为浮动侧栏叠在其左缘 */
.office-shell .main-area {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  /* 行总宽 = 场景宽 + 左外侧行动列 76（行动列 64 + 间隙 12）；
     main-area 居中，行动列自然贴在场景左外侧、绝不压到背景 */
  width: calc(var(--scene-w, 1060px) + 76px);
  height: var(--scene-h, 720px);
  min-height: 0;
}
.office-shell .office-scene {
  position: relative; flex: none;
  width: var(--scene-w, 1060px); height: var(--scene-h, 720px);
}
/* 背景必须铺满场景框：applySceneLayout 已将场景框比例强制 = 背景图比例，
   此时 cover 与 contain 完全等价（不裁图）；改用 cover 可杜绝任何细微比例偏差下
   contain 在圆角框内左右/上下留白的问题（覆盖旧规则 .office-bg contain）。 */
.office-shell .office-bg { object-fit: cover; object-position: center; }
/* 行动列固定在场景左外侧：不参与场景绝对定位，占 main-area 首列，上下各留 8px 边距紧贴场景高 */
.office-shell .action-col {
  position: relative; flex: none; order: 0;
  width: 64px; height: calc(100% - 16px); z-index: 8;
}
.office-shell .bottom-panel {
  width: var(--scene-w, 1060px);
  grid-template-columns: 1fr;          /* 语料已移入左列：底部只留模型胶囊，占满场景宽 */
  padding-left: 0;                      /* 场景框已居中贴合，不再需要左缘 76px 对齐补偿 */
  /* 场景因左列行动列整体右移 38px（(64+12)/2）；底部胶囊同步右移，保持与场景水平对齐 */
  margin-left: 38px;
}
/* 教学横幅：固定位置（2026-09-03 用户调整：top 69 / left 465，不再按场景宽推导） */
.office-guide-banner {
  top: 69px;
  left: 465px;
}

/* ==========================================================================
   竖屏适配（2026-09-15 用户拍板：顶部 = 灵动岛 + 行动区 / 中部 = 完整办公室场景 / 底部 = 数值条）
   --------------------------------------------------------------------------
   · 判据必须与 JS GameUI.isPortrait() 一致（viewport orientation: portrait），否则场景尺寸与排布错配。
   · 设计盒（--box-w/--box-h）由 JS applyUiScale 写入：竖屏宽 340、高按容器实际比例推导 → scale≈1，
     所以桌面那套 12px/11px 字号按设计值**原样渲染**（清晰可见），且整体等比缩放、绝不挤压变形。
   · 本段只改排布 / 间距 / 尺寸，**不改字号**（沿用项目「两方向字号保持不变」铁律）。
   · DOM 结构不动（行动按钮还是 #officeMain 里同一批节点，只是换向）→ 点击委托 / 增量刷新 /
     座位百分比 / fitModalBody 全部零改动。横屏规则一行未动，桌面像素级零回归。
   ========================================================================== */
@media (orientation: portrait) {
  /* ① 容器留白：底部 2rem 是给横屏旧 UI 留的，竖屏白吃约 66px；顶部补刘海安全区 */
  .devgame-render {
    padding: max(6px, env(safe-area-inset-top, 0px)) 10px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  /* ② 设计盒：不再写死 1280×720（值由 JS 写入） */
  .office-scale { width: var(--box-w, 1280px); height: var(--box-h, 720px); }
  /* ②b 全竖屏通用：起名页整张卡垂直居中（原来贴顶、下方空掉一大片 → 像布局没做完）。
        立绘条压扁只在手机档（≤520，见上方 dg 竖屏段），平板保持左立绘窄列。 */
  .dg-naming-wrap { min-height: 100%; align-items: center; padding: 0; }
  /* ③ 顶部灵动岛：紧凑两行。把 .top-left/.top-right 用 display:contents「解散」成岛的直属
        flex 项 → chips 与 4 个操作按钮一起自动换行（实测第一行 日期+品牌+经费、第二行 语料+四个按钮）
       = 两行排完（原来 chips 占两行 + 按钮一行 = 三行，白吃约 50px 高度，挤的是办公室场景）。
       宽度按「设计盒内容宽」而非 --scene-w —— 与场景尺寸解耦，避免高度/宽度互相依赖 */
  .office-shell .island-topbar {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 3px;
    column-gap: 5px;
    padding: 5px 6px;
    margin-left: 0;
    margin-right: 0;
    left: 0;
    border-radius: 16px;
    align-content: space-around;   /* 匀到的余量摊进行距，避免卡片里出现空档 */
  }
  .office-shell .island-topbar .top-left,
  .office-shell .island-topbar .top-right { display: contents; }
  /* chips 在竖屏压扁一档（只改高度/内距，字号不动）→ 四枚 chips 由两行收成一行，
     配合上面 display:contents，整岛实测由三行变两行（省 ~44px 高度，留给办公室场景） */
  .office-shell .island-topbar .week-chip,
  .office-shell .island-topbar .money-chip,
  .office-shell .island-topbar .brand-chip,
  .office-shell .island-topbar .corpus-chip,
  .office-shell .island-topbar .chip-warn,
  .office-shell .island-topbar .chip-dividend {
    height: 32px;
    padding: 0 6px;
    gap: 3px;
  }
  /* 2026-09-15 用户真机微调（浏览器 inspect 实测值）：竖屏 chips 字号 12→9、gap 徽标同字号 */
  .office-shell .island-topbar .week-chip,
  .office-shell .island-topbar .money-chip,
  .office-shell .island-topbar .brand-chip,
  .office-shell .island-topbar .corpus-chip,
  .office-shell .island-topbar .chip-warn,
  .office-shell .island-topbar .chip-dividend,
  .office-shell .island-topbar .corpus-gap { font-size: 9px; }
  /* 岛上的四个图标按钮 30×30（用户实测值：原来 34/40 太占地） */
  .office-shell .island-topbar .island-btn.icon-only { width: 30px; height: 30px; }
  .office-shell .island-topbar .island-btn.icon-only svg { width: 14px; height: 14px; }
  /* ④ 主区改列方向：行动区在上（横向自动换行），场景紧随其下并**吃掉全部余量** */
  .office-shell .main-area {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
  }
  .office-shell .action-col {
    order: 1;
    width: 100%;
    height: auto;
    /* flex-grow 分余量（2026-09-16）：场景框贴照片高后，余量改由行动区与数值条对半分 ——
       全给数值条会把它的两行数值撑出 ~150px 大空洞（「撑空」复发）；行动区按钮块
       align-content:center 居中，多的高度变成按钮上下的呼吸感，观感自然 */
    flex: 1 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
  }
  /* 分组分隔线在横排里改成「整行分隔」→ 行动按钮自然分成两行（默认 5 个 + 6 个） */
  .office-shell .action-divider { flex-basis: 100%; width: 100%; height: 1px; margin: 1px 0; }
  /* 场景框**贴着照片高**（2026-09-16 用户反馈「上下两侧留空」：此前框 flex:1 吃掉全部余量、
     照片只有满宽一条，上下全靠模糊垫底 → 看着像两块空白。现在余量由**行动区与数值条
     对半分**（shell 层 main-area 与 bottom-panel 都是 flex-grow:1 → 各得一半；
     main-area 内部场景定高、行动区吃掉它那一半），模糊垫底只剩防取整缝隙的兜底作用） */
  .office-shell .main-area { margin: 0; flex: 1 1 auto; height: auto; min-height: 0; }
  .office-shell .office-scene { order: 2; margin: 0; }
  .office-shell .office-scene::before {
    content: ""; position: absolute; inset: -24px;
    background: var(--scene-bg, none) center / cover no-repeat;
    filter: blur(16px) saturate(1.06) brightness(1.02);
  }
  /* 照片铺满场景框：框比例已被 JS applySceneLayout 强制 = 照片比例，cover 即等价 contain
     （不裁图），还能吃掉 ±1px 取整缝隙（旧的「满宽 + 垂直居中」会在框底漏出 1px 垫底） */
  .office-shell .office-bg { inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
  /* 与照片同参照（inset:0 于同一包含块）—— 2026-09-16b：旧方案照片满宽垂直居中、
     标记容器跟着居中；照片改满框后这条居中定位产生 ~2px 错位（_check_portrait 抓出
     「座位会跑位」）。照片怎么摆标记容器就跟到哪，座位百分比永远对齐。 */
  .office-shell .employee-markers { top: auto; height: auto; transform: none; inset: 0; }
  /* ④b 顶栏回内容高；余量对半分（见上）。数值条 stats-grid 的 space-around 把多出的
     高度匀进行距，只留适度呼吸感，不再「撑空」 */
  .office-shell .island-topbar { flex: 0 0 auto; }
  .office-shell .bottom-panel { flex: 1 1 auto; }
  .office-shell .stats-grid { flex: 1 1 auto; align-content: space-around; }
  .office-shell .action-btn { height: 52px; }
  /* ④c 员工标记瘦身（AI 视觉复查结论）：竖屏场景只有 312×234 设计像素，
        9 个标记按横屏原尺寸（头像 69 + 名字 17px + 体力条）必糊成一团、名字互相压叠。
        这里把头像缩到 42、文案收到 9~10px，并把座位锚点（头像中心在座位点下方 11.5px）
        原样保留 —— 锚点 = translateY(-9.5px) + 头像半径 21 = 11.5 ✓ 与横屏一致。 */
  /* 上移 4px（-9.5 → -13.5）：最下面那个座位（y≈72~82%）的名字/体力条原本会被场景下边缘切掉，
     上移后可完整显示；代价是头像相对座位点高 4px（≈场景高的 1.7%，肉眼不可辨）。 */
  /* 体力回归（2026-09-16 用户反馈「竖屏的办公室体力显示没有了」——那是 09-15 为防最靠下的
     座位溢出场景下缘而整行隐藏的）。但体力**不能再独占一行**（场景框现在贴照片高，
     溢出会被直接裁掉）→ 标记从「竖排三行」改成 grid：头像占满上排，名字与 ⚡体力并排
     同一行，标记总高与只有名字时一致，座位锚点 -13.5px 原样保留。 */
  /* 再瘦身一轮（2026-09-16 用户反馈「很容易互相遮挡」）：头像 42→34（-20%），
     名字/状态胶囊各缩 2 号，体力图标 8→6，行距 3→2 —— 标记整体变小，
     9 个标记互相压叠的概率显著下降；座位锚点 -13.5px 原样保留。 */
  .office-shell .emp-marker { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: center; column-gap: 2px; row-gap: 2px; transform: translate(-50%, -13.5px); }
  .office-shell .emp-marker:hover { transform: translate(-50%, -20px) scale(1.06); }
  .office-shell .emp-avatar { grid-column: 1 / -1; width: 34px; height: 34px; font-size: 13px; border-width: 2.5px; }
  .office-shell .emp-avatar::after { width: 11px; height: 11px; right: -2px; bottom: -2px; border-width: 2px; }
  .office-shell .emp-name { font-size: 8px; padding: 1px 5px; }
  .office-shell .emp-status { top: -12px; font-size: 7px; padding: 1px 5px; }
  .office-shell .emp-stamina { display: inline-flex; padding: 1px 4px; gap: 2px; font-size: 7px; }
  .office-shell .emp-stamina svg { width: 6px; height: 6px; }
  /* ⑤ 底部数值条：模型名与版本挤成一行 + 数值一行两个（追加能力轴自动多一行）
        + 2026-09-15 用户真机微调：卡片至少 150 高；左移 8px 后用户又要求「往右挪 8」
        → 抵消回 0（与岛/场景同左缘）。 */
  .office-shell .bottom-panel { width: 100%; margin-left: 0; align-content: stretch; }
  .office-shell .model-stats {
    flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 12px;
    min-height: 150px; margin-left: 0; margin-right: 0;
  }
  .office-shell .model-title {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-right: 0;
    padding-bottom: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--aqua-border);
  }
  /* 一行两个（用户拍板）：单列 4 行会让追加能力轴（记忆/推理/工具）放不下 ——
     V3.5+ 的模型最多 7 项（四维 + 三轴），2 列正好 4 行；这里同时把整块压紧：
     进度条 12→8px、行距 2px，保证 4 行也塞得进 min-height:150 的卡片。 */
  .office-shell .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
  .office-shell .stat-item { gap: 1px; }
  .office-shell .stat-bar { height: 8px; }
  /* ⑥ 新手引导横幅：不再占一整行（原来 ~50px 高、还把场景挤小 15%），改为**浮在场景上缘**：
       紧贴内容宽（不再拉满整行）、内边距收紧；top 由 JS 写 --guide-top（场景顶边 + 6px）。
       横屏那条 top:69/left:465 的硬坐标是用户拍板的，这里只覆盖竖屏。 */
  .office-shell .office-guide-banner {
    position: absolute;
    top: var(--guide-top, 120px);
    left: 50%;
    transform: translateX(-50%);
    /* 2026-09-15 用户真机微调：压成 200×40 的小胶囊、字号 10px、内容居中 */
    width: 200px;
    height: 40px;
    max-width: calc(100% - 24px);
    padding: 5px 8px;
    gap: 5px;
    font-size: 10px;
    justify-content: center;
    text-align: center;
    z-index: 9;      /* 高于场景(0-1)与员工标记，低于二级面板(100) */
  }
  /* 「 已暂停 · 点击继续」竖屏挪到场景**右下角**：引导横幅浮在场景上缘居中、宽 200px，
     会压住右上角的标签（实测截图里标签文字从横幅右边露出来，像排版坏了）。
     座位分布是「左下→中上」一条斜线（见 data/game_cfg.json 的 SCENES.v1.seats），
     右下角是空的 → 标签放这儿两边都能完整看到、都能点。 */
  .office-shell .office-paused-tag { top: auto; bottom: 8px; right: 10px; }
  /* ⑦ 二级面板：竖屏满宽（原本固定 600px），高度按 JS 实测的岛/底栏安全区避让 */
  .office-shell .modal-card {
    width: calc(100% - 20px);
    max-width: none;
    max-height: calc(100% - var(--modal-top, 0px) - var(--modal-bottom, 0px));
  }
  /* ⑧ 二级面板内部竖屏排布（2026-09-15 全面板截图自查：team/recruit/news/shop + 设置按钮）。
     ⚠️ 面板正文有 fitModalBody 的 zoom 缩放 → inspect 选中位置会错位，改这里别用浏览器手调。 */
  /* 8.1 团队：列表 260px 会把右侧「团队数据」挤成竖条（岗位分布一字一行）→ 压到 116px。
     行内的「体力 N」胶囊竖屏收起（成员详情有完整体力条，数据卡有平均体力，信息不丢）。
     2026-09-16 用户反馈「还是太窄」：116px 里 名字+徽标 刚好放不下（73px 文本列 vs 需 ~78px）。 */
  /* 2026-09-30 用户反馈「竖屏下团队界面左侧太窄、右侧太宽，比例像 1:4」：
     旧写法是**左列固定 px + 右列 1fr** ⇒ 比例随屏宽/zoom 漂移（实测 390 视口下 138:333 ≈ 1:2.4，
     越窄越糟）。改用 **fr 定比例（2:3，即左 40% / 右 60%）**——比例与 zoom、屏宽完全解耦。
     ⚠️ 只影响 team-modal-body（团队总览 + 成员详情共用这一处网格）与 recruit-modal-body 两处。 */
  .office-shell .team-modal-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .office-shell .team-list .team-row { padding: 5px 6px; gap: 5px; }
  .office-shell .team-list .team-stats { display: none; }
  .office-shell .team-list .team-avatar { width: 26px; height: 26px; }
  .office-shell .team-list .team-avatar img { width: 100%; height: 100%; }
  .office-shell .team-list .team-name { font-size: 10px; }
  .office-shell .team-list .team-name .dg-tier-badge { white-space: nowrap; }
  .office-shell .team-list .team-role { font-size: 8px; }
  .office-shell .team-list .dg-tier-badge { font-size: 7px; padding: 0 3px; }
  .office-shell .team-col-head { font-size: 9px; }
  /* 8.2 招募：同样压窄列表 + 详情瘦身（原 260px 列表 + 大立绘把正文撑得极高，
     fitModalBody 只能 zoom 到 ~0.6 → 全面板字小到看不清）。目标：zoom 回 0.85+
     2026-09-15 用户真机反馈：106px 太窄，「一般·lv1」徽标在字中间断行、裂成两截像
     两个徽标积压 → 列加宽到 118px + 徽标禁止内断行（要断就整枚换行）；
     表头「可招募候选人（3）座位 0/8」也收到了 8px，一行放得下。 */
  /* 2026-09-29 用户反馈「竖屏招聘看不到候选人薪资」：以前 .recruit-salary 直接 display:none，
     详情面板也从不显示薪资 → 竖屏两头都看不到。现两头都补上（详情见下方 .recruit-detail-salary）。
     ⚠️ 列表要放下「薪资」就得从 .recruit-info 里抠宽度：原来信息列只剩 42px，
        名字+徽标（约 66px）放不下 → 徽标被挤到第二行、行高从 30 涨到 50，8 人一页直接溢出列表盒。
     故：列宽 132→148、列表左右内边距 14→6、行内边距/间距收紧 → 信息列回到 ~74px，徽标不再换行。 */
  /* 2026-09-30 用户反馈同上（招聘左列太窄、右列太宽）：同 team 一并改成 **fr 定比例 2:3**
     （旧 148px + 1fr 实测在 390 视口下 ≈ 148:267 ≈ 1:1.8，且随 zoom 漂移）。 */
  .office-shell .recruit-modal-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .office-shell .recruit-list-col { padding: 10px 6px; }
  .office-shell .recruit-list-col .team-col-head { font-size: 8px; gap: 3px; }
  .office-shell .recruit-list .recruit-row { padding: 3px 3px; gap: 4px; }
  .office-shell .recruit-list .recruit-avatar { width: 22px; height: 22px; }
  .office-shell .recruit-list .recruit-avatar img { width: 100%; height: 100%; }
  .office-shell .recruit-list .recruit-name { font-size: 9.5px; }
  .office-shell .recruit-list .recruit-name .dg-tier-badge { white-space: nowrap; }
  .office-shell .recruit-list .recruit-role { font-size: 7.5px; }
  /* 薪资：保留显示，但收窄 —— 隐藏「/月」单位（详情面板有完整「月薪 ¥X / 月」） */
  .office-shell .recruit-list .recruit-salary {
    display: block; font-size: 9px; white-space: nowrap;
  }
  .office-shell .recruit-list .recruit-salary .recruit-salary-unit { display: none; }
  .office-shell .recruit-list .dg-tier-badge { font-size: 7px; padding: 0 3px; }
  .office-shell .recruit-detail-header { gap: 6px; }
  .office-shell .recruit-detail-avatar { width: 40px; height: 40px; }
  .office-shell .recruit-detail-avatar img { width: 100%; height: 100%; }
  .office-shell .recruit-detail-name { font-size: 12px; }
  .office-shell .recruit-detail-role,
  .office-shell .recruit-detail-salary,
  .office-shell .recruit-detail-arrive { font-size: 9px; }
  .office-shell .recruit-detail-stats .rds-row { margin-bottom: 3px; }
  .office-shell .recruit-detail-stats .rds-label { font-size: 9px; }
  .office-shell .recruit-detail-stats .rds-bar { height: 7px; }
  .office-shell .recruit-detail-bio { font-size: 9px; line-height: 1.5; padding: 6px 8px; }
  .office-shell .recruit-detail-tag { font-size: 8px; padding: 1px 5px; }
  .office-shell .recruit-detail-expire,
  .office-shell .recruit-detail-axhint { font-size: 8px; }
  /* 8.3 吃瓜：信息流 + 热榜双列在 320px 里热榜只剩 ~120px（标题一字一行）。
     竖屏改单列：热榜收成顶部横排卡片；字号整体收到 8~10px（用户指定「8 号左右」） */
  .office-shell .news-weibo { flex-direction: column; gap: 6px; overflow-y: auto; }
  .office-shell .nw-feed { flex: none; overflow-y: visible; padding: 8px 10px 2px; }
  .office-shell .nw-side { flex: none; overflow: visible; padding: 0 10px 8px; display: flex; gap: 6px; }
  .office-shell .nw-side-card { flex: 1; min-width: 0; padding: 6px 8px; }
  .office-shell .nw-side-head { font-size: 9px; white-space: nowrap; }
  .office-shell .nw-side-tip { font-size: 7px; }
  .office-shell .nw-hot { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 3px 0 0; padding-left: 14px; }
  .office-shell .nw-hot li { font-size: 8px; }
  .office-shell .nw-side-foot { display: none; }   /* 免责声明竖屏收起，省高度 */
  .office-shell .nw-post { padding: 7px 9px; margin-bottom: 6px; border-radius: 10px; }
  .office-shell .nw-post .nw-user { font-size: 9px; }
  .office-shell .nw-post .nw-time { font-size: 7.5px; }
  .office-shell .nw-post .nw-text { font-size: 8px; line-height: 1.5; }
  .office-shell .nw-post .nw-actions { font-size: 7.5px; }
  .office-shell .nw-empty { font-size: 9px; }
  /* 8.4 购买算力：预览列 160px 会把档位卡挤到一字一行 → 竖屏预览列收成底部横条 */
  .office-shell .shop-columns { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .office-shell .shop-preview-col {
    flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px;
  }
  .office-shell .shop-preview-col .shop-gpu-img { width: 44px; height: 44px; }
  .office-shell .shop-tier { padding: 6px 9px; }
  .office-shell .shop-tier-name { font-size: 10px; white-space: normal; }
  .office-shell .shop-tier-spec { font-size: 8px; }
  .office-shell .shop-tier-price { font-size: 10px; }
  /* 8.5 设置等 sub-modal：footer 按钮不换行（「关闭」被拆成两行）。
     ⚠️ sub-modal 挂在 #devgame-render 下、不在 .office-shell 里 → 不能加 .office-shell 前缀 */
  .sub-modal-footer { flex-wrap: wrap; }
  .sub-modal-footer .skew-btn { white-space: nowrap; padding: 8px 12px; }
  /* 8.6 模型测试（2026-09-15 用户真机「重点修」：字体/UI 偏大、底部「点击选择消息」条被挤出面板）。
     test-modal-body 是 fitModalBody 的 zoom 例外（允许内部滚动、按桌面尺寸原样渲染）→
     320px 宽的短面板里 42px 头像 + 260px 消息区 min-height 直接把底栏顶出可视区。
     竖屏整体收一档（与 8.1~8.4 的 8~10px 字号对齐），消息区与底栏必须同屏。 */
  .office-shell .test-modal-body .test-chat-area { flex: 1 1 auto; min-height: 0; padding: 8px 10px; gap: 6px; }
  .office-shell .test-chat-header { gap: 8px; padding-bottom: 6px; }
  .office-shell .test-chat-avatar { width: 34px; height: 34px; font-size: 13px; }
  .office-shell .test-chat-title { font-size: 12px; }
  .office-shell .test-chat-status { font-size: 9px; gap: 4px; }
  .office-shell .test-chat-status::before { width: 5px; height: 5px; }
  .office-shell .test-modal-body .test-messages { flex: 1 1 auto; min-height: 0; gap: 6px; padding: 4px 0; }
  .office-shell .msg-user, .office-shell .msg-bot { max-width: 86%; padding: 5px 10px; font-size: 9.5px; line-height: 1.55; }
  .office-shell .msg-user { border-radius: 12px 12px 3px 12px; }
  .office-shell .msg-bot { border-radius: 3px 12px 12px 12px; }
  .office-shell .chat-sys { font-size: 8.5px; }
  .office-shell .chat-think-head { font-size: 8.5px; }
  .office-shell .chat-think-line { font-size: 8.5px; }
  .office-shell .msg-bot.msg-think { max-width: 100%; }
  .office-shell .chat-media-cap { font-size: 9px; }
  .office-shell .test-empty-tip { font-size: 10px; }
  .office-shell .test-engineer-note { gap: 5px; padding: 6px 8px; font-size: 8.5px; }
  .office-shell .test-engineer-note svg { width: 12px; height: 12px; }
  .office-shell .test-status-line { font-size: 8.5px; padding: 2px; }
  .office-shell .test-artifact { font-size: 8.5px; max-height: 90px; }
  .office-shell .test-suggest-row { padding: 6px 10px 8px; }
  .office-shell .test-suggest-label { font-size: 8.5px; margin-bottom: 4px; }
  .office-shell .test-suggest-options { gap: 4px; }
  .office-shell .test-suggest-btn { padding: 6px 9px; font-size: 9px; border-radius: 10px; }
  /* 底栏主条（「点击选择消息 / 这个话题聊完了」）＋ 右侧「＋」工具按钮 */
  .office-shell .chat-bar { gap: 6px; padding: 6px 8px; }
  .office-shell .cb-main { padding: 7px 10px; font-size: 10px; border-radius: 10px; }
  .office-shell .cb-side.cb-plus { width: 30px; height: 30px; border-radius: 9px; }
  /* 展开的选项 / 工具面板同档收拢 */
  .office-shell .chat-sheet { margin: 0 8px 4px; padding: 6px 8px; }
  .office-shell .chat-sheet .cs-head { font-size: 9px; margin: 3px 0 2px; }
  .office-shell .cs-item { padding: 6px 8px; font-size: 9.5px; margin-bottom: 3px; }
  .office-shell .cs-note, .office-shell .cs-note-item b, .office-shell .cs-note-item span { font-size: 9px; }
  .office-shell .cs-tool { min-width: 62px; padding: 6px 8px 5px; font-size: 9px; }
  /* 8.7 立项（2026-09-22 用户反馈「手机端立项界面的文字都太小了，整体放大一些，界面长度可以增加一点」）。
     ⚠️ 根因**不是某一处 font-size 小**，而是整个正文被 fitModalBody 等比缩掉了：
        正文 need 714px 要挤进 avail 351px ⇒ zoom 只能给到 **0.489**
        ⇒ 12px 的标题实际渲染 5.9px、14px 的架构名渲染 6.8px（全屏字都是一半大）。
        面板当时只有 474px 高：`max-height = 100% - (--modal-top 107 + --modal-bottom 251)`，
        而 844px 的屏幕还剩一大截 —— 上下都按安全区居中，高度全被数值条吃掉了。
     两条一起改，缺一条都回不到 1.0（实测 0.489 → 0.976）：
       ① **面板放长**（用户拍板「界面长度可以增加一点」）：顶边对齐岛下沿、底边贴到屏幕底。
          474px → 715px ⇒ avail 351 → 619。竖屏这一档办公室底部数值条（代码/文字/安全/稳定）
          在立项时**全是 0**（项目还没开跑），被面板盖住没有任何信息损失。
       ② **正文的间距与固定尺寸收一档**：need 714 → 635。
          ⚠️⚠️ **一个 font-size 都不动** —— 缩字号在这里是白干：
             fitModalBody 是 `zoom = avail / need` 反算的，字号缩 x% ⇒ need 少 x% ⇒ zoom 涨 x%，
             眼睛看到的字号**原地不动**（两边正好抵消）。
             真正换得来字号的只有「不含文字的空白」：内距 / 外边距 / 滑条与箭头按钮的固定高。
          ⚠️ 所以这段和 8.1~8.6 的写法**故意不同**（那几段是靠压字号腾地方），别照抄。
     ⚠️ 用 `:has()` 把改动锁在立项面板上（本项目已有先例）：
        其余面板的居中方式与高度**一行未动**，横屏/桌面也不受影响（整段在 @media portrait 内）。 */
  .office-shell .modal-mask:has(.plan-modal-body) { align-items: flex-start; }
  .office-shell .modal-mask:has(.plan-modal-body) .modal-card {
    margin-top: var(--modal-top, 0px);
    max-height: calc(100% - var(--modal-top, 0px) - 10px);
  }
  /* 头尾也收一档：面板总高是定值，头尾每省 1px 就多 1px 给正文 */
  .office-shell .modal-card:has(.plan-modal-body) .modal-header { padding: 6px 12px; }
  /* 2026-09-29 玩家反馈「V2 解锁不了」：语料不足时立项 footer 会多出「外包补足」按钮，
     窄屏（360px）下「取消 + 外包补足（N亿）+ 确认立项」三个按钮合计 ≈343px > 可用 ≈294px
     → 横向溢出裁掉最右的「确认立项」。这里允许换行（按钮右对齐，两三行都放得下）。 */
  .office-shell .modal-card:has(.plan-modal-body) .modal-footer { padding: 6px 12px 8px; flex-wrap: wrap; }
  .office-shell .plan-modal-body { padding: 8px 10px; }
  .office-shell .plan-modal-body .plan-section { margin-bottom: 6px; }
  .office-shell .plan-modal-body .plan-section-title { margin-bottom: 4px; }
  .office-shell .plan-modal-body .plan-quality-bar { padding: 5px 8px; margin: 6px 0; }
  .office-shell .plan-modal-body .mission-card { padding: 6px 8px; margin-bottom: 6px; }
  .office-shell .plan-modal-body .arch-card { padding: 7px 10px; }
  .office-shell .plan-modal-body .arch-card .ac-unlock { margin-top: 3px; }
  .office-shell .plan-modal-body .arrow-btn { width: 26px; height: 34px; }
  .office-shell .plan-modal-body .mix-board { gap: 3px; }
  .office-shell .plan-modal-body .mix-row { gap: 8px; }
  .office-shell .plan-modal-body .mix-range { height: 16px; margin: 0; }
  .office-shell .plan-modal-body .mix-premium { padding: 3px 8px; }
  .office-shell .plan-modal-body .param-selector { width: 100%; gap: 5px; }
  .office-shell .plan-modal-body .param-item { padding: 5px 3px; }
  .office-shell .plan-modal-body .param-item .pi-label { margin-top: 1px; }
  /* ⑨ 结算演出页（bonus 三幕）竖屏适配**不在这里** —— .aqua-stage/.reward-shell 等基础规则
     在 9229 行之后，同特异性下源顺序靠后者赢，写在这段里会被基础规则全部吃掉。
     实际规则见文件末尾「竖屏 · 结算演出页」独立段。 */
}


/* V3.5.2 扩编招聘面板 */
.hire-panel { display: grid; gap: 10px; }
.hire-role { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(231, 247, 255, 0.7); border: 1px solid rgba(184, 229, 247, 0.7); }
.hire-role.dim { opacity: 0.55; }
.hr-name { font-weight: 900; color: var(--aqua-ink); min-width: 96px; }
.hr-meta { flex: 1; font-size: 0.76rem; color: #6b7a88; }
.hire-status, .hire-cand { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(184, 229, 247, 0.8); }
.hs-title, .hc-head { font-weight: 900; margin-bottom: 6px; }
.hs-bar { height: 10px; border-radius: 6px; background: #eef7fb; overflow: hidden; }
.hs-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fc3ff, #2789c4); }
.hs-tip, .hc-meta { font-size: 0.74rem; color: #6b7a88; margin-top: 6px; }
/* doc/22 反抽卡：发布需求费用提示 / 候选人有效期警示 */
.hire-note { margin-top: 8px; font-size: 0.76rem; color: #6b7a88; }
.hire-note.warn { color: #d9480f; }
.hc-warn { color: #d9480f; font-weight: 500; }
/* ==========================================================================
   顶部弹出小卡片（2026-09-03）：时事新闻 / 节点提示 / 办公室事件 共用
   挂在 .office-scene 顶部居中，滑入滑出；事件卡片带选项按钮、不自动关。
   ========================================================================== */
.notice-stack {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(420px, 86%); z-index: 30; pointer-events: none;
}
.notice-card {
  pointer-events: auto; position: relative; width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(184, 229, 247, 0.9);
  border-radius: 14px; padding: 10px 14px 11px;
  box-shadow: 0 10px 26px -14px rgba(23, 50, 77, 0.35);
  opacity: 0; transform: translateY(-14px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.notice-card.in { opacity: 1; transform: translateY(0); }
.notice-card.out { opacity: 0; transform: translateY(-14px); }
.notice-card .nc-close {
  position: absolute; top: 6px; right: 8px; border: 0; background: none;
  color: #9db2c2; font-size: 0.78rem; cursor: pointer; padding: 2px 4px; line-height: 1;
}
.notice-card .nc-close:hover { color: #4a5763; }
.notice-card .nc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.notice-card .nc-icon { font-size: 0.9rem; }
.notice-card .nc-tag {
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.05em;
  color: #2789c4; background: rgba(184, 229, 247, 0.55);
  border-radius: 999px; padding: 2px 8px;
}
.notice-card.news .nc-tag { color: #b0603a; background: rgba(255, 207, 138, 0.55); }
.notice-card .nc-title { font-weight: 900; font-size: 0.86rem; color: #2b3a48; margin-bottom: 3px; }
.notice-card .nc-text { font-size: 0.76rem; line-height: 1.55; color: #4a5763; }
.notice-card .nc-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.notice-card .nc-opt {
  border: 1.5px solid rgba(184, 229, 247, 0.9); background: #f4fbff; color: #235573;
  border-radius: 10px; padding: 7px 10px; font-size: 0.76rem; font-weight: 700;
  cursor: pointer; text-align: left; transition: background 0.15s ease, transform 0.15s ease;
}
.notice-card .nc-opt:hover { background: #e3f4fd; transform: translateY(-1px); }
.notice-card.is-event { border-color: rgba(250, 200, 120, 0.9); }
.notice-card.is-event .nc-tag { color: #b0603a; background: rgba(255, 207, 138, 0.55); }

/* ==========================================================================
   工程师状态气泡（2026-09-03）：办公室场景，随机工程师头顶冒泡
   ========================================================================== */
.emp-marker { position: relative; }
.emp-bubble {
  position: absolute; bottom: calc(100% + 30px); left: 50%;
  /* +30px：状态胶囊浮在头像顶上方约 21px（top:-20px），气泡必须抬到它上面，
     否则与胶囊重叠（2026-09-03 用户反馈）；尖角再向下伸 5px，仍留 ~4px 间隙 */
  transform: translateX(-50%);
  /* 2026-09-23 修 BUG：气泡是纯装饰，必须防点击穿透 —— 它悬在 marker 上方 30px，
     会盖到上一排工程师的头像/名字；带气泡的 marker 又被 :has(.emp-bubble) 提到
     z-index:30 ⇒ 气泡活着的那 4 秒里，被盖住的工程师"点了没反应"（玩家反馈的
     「头像卡住点不动」的元凶之一）。 */
  pointer-events: none;
  background: rgba(255, 255, 255, 0.97);
  border: 1.5px solid rgba(184, 229, 247, 0.95);
  border-radius: 12px; padding: 6px 10px;
  font-size: 0.72rem; font-weight: 700; color: #2b3a48; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(23, 50, 77, 0.4);
  animation: bubblePop 0.28s ease both; z-index: 20; pointer-events: none;
}
.emp-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: rgba(255, 255, 255, 0.97);
  border-right: 1.5px solid rgba(184, 229, 247, 0.95);
  border-bottom: 1.5px solid rgba(184, 229, 247, 0.95);
}
.emp-bubble.tired { border-color: rgba(255, 179, 186, 0.95); color: #8a4a52; }
.emp-bubble.tired::after { border-color: rgba(255, 179, 186, 0.95); border-top-color: transparent; border-left-color: transparent; background: rgba(255,255,255,0.97); }
.emp-bubble.bye { opacity: 0; transform: translateX(-50%) translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
/* ⚠️ 冒泡的那个工程师必须**整个 marker 抬到所有 marker 之上**（2026-09-22 用户报
   「气泡应该在最上层，现在会被其他工程师头像挡住」）。
   根因：竖屏那条 `.office-shell .emp-marker { transform: translate(-50%, -13.5px) }`（L8664）
   给**每个** marker 建了独立层叠上下文 ⇒ 气泡自己的 `z-index: 20` 只在自己 marker 内部有效，
   出了 marker 就按 DOM 顺序跟邻居比大小 —— 排在后面的人（后招的、列表靠后的）头像
   整个盖住前面人的气泡。桌面没有那条 transform，所以只在竖屏复现。
   ⇒ 修法只能是抬**父级**：marker 抬上去，气泡（含尖角）自然跟着在最上层。
   ⚠️ 用 `:has()` 而不是给 marker 加类：`updateOfficeMain()` 每 tick 都 `node.className = cls`
      重写类名（L1036），加类会被下一帧抹掉 ⇒ 气泡时灵时不灵（本项目 `:has()` 已在
      成就卡用过，不支持的老浏览器整条失效、退回原样，不会坏）。 */
.office-shell .emp-marker:has(.emp-bubble) { z-index: 30; }
@keyframes bubblePop {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ==========================================================================
   办公室事件 · 中央三段展开演出（2026-09-03 用户定稿）
   圆点（波动扩散）→ 点击横向展开胶囊 → 纵向展开成卡片；是否暂停由事件 pause 字段配。
   ========================================================================== */
.ev-spawn {
  /* 2026-09-05 修 BUG：z-index 60 < #modalContainer 100 —— 二级面板（W3 强制打开的测试
     面板等）开着时事件卡被整个盖住，时间暂停却看不到任何提示（「7月3周静默暂停」根因）。
     事件必须盖在所有二级面板之上。 */
  position: absolute; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  pointer-events: none;
}
.ev-spawn .ev-morph {
  pointer-events: auto; cursor: pointer; position: relative;
  width: 58px; height: 58px; border-radius: 50%;
  /* 2026-09-03：渐变蓝圆点（用户反馈）；overflow 不再 hidden——它曾把向外扩散圈裁在圆内（波动效果失效根因） */
  background: linear-gradient(135deg, #9fd8ff 0%, #5db6f0 55%, #2a8ad4 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 34px -12px rgba(23, 50, 77, 0.5);
  display: flex; align-items: center; justify-content: center;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
              border-radius 0.45s ease 0.1s, box-shadow 0.4s ease;
  animation: evFloat 2.4s ease-in-out infinite;
}
/* 圆点内头像（2026-09-06 用户要求：闪电换成小鲸鱼头像，铺满圆点；展开胶囊时淡出）。
   absolute + inset 脱离文档流——铺满整圆且不影响胶囊/卡片的 flex 布局 */
.ev-spawn .ev-ic {
  position: absolute; inset: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 3px rgba(23, 50, 77, 0.35);
  transition: opacity 0.2s ease;
}
.ev-spawn.expand .ev-morph { cursor: default; width: min(360px, 86vw); height: 52px; border-radius: 999px; animation: none; overflow: hidden; }
.ev-spawn.expand .ev-ic { opacity: 0; }
.ev-spawn.expand.open .ev-morph { height: min(430px, 72vh); border-radius: 18px; cursor: default; }

/* 2026-09-29（玩家要求）：卡片右上角「缩小」按钮 + 缩小回圆点态。
   以前只有单向展开：事件卡（z-index 200）一直盖在二级面板（z-index 100）之上，
   冒头的是卡片的 .ev-body（pointer-events:auto）→ 下班窗口触发挖人事件后想辞退
   当事人，点「辞退」落不到按钮上（玩家报的「下班期间辞退点不动」）。
   缩小后停靠右下角，不挡居中的面板；点圆点可再展开。 */
.ev-spawn .ev-min {
  position: absolute; top: 7px; right: 7px; z-index: 6;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 8px;
  background: rgba(255, 255, 255, 0.9); color: #2a6a96;
  font-size: 15px; font-weight: 900; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(23, 50, 77, 0.28);
  transition: background 0.15s ease;
}
.ev-spawn .ev-min:hover { background: #fff; }
.ev-spawn.expand.open .ev-min { display: flex; }
.ev-spawn.min { justify-content: flex-end; align-items: flex-end; padding: 0 16px 16px; }
.ev-spawn.min .ev-hint { display: none; }

/* 波动扩散圈（等待点击时循环，展开后淡出）。
   morph 不得 overflow:hidden（2026-09-03 修复：此前扩散圈被裁在圆内，看不出向外波动） */
.ev-rings { position: absolute; inset: -1px; pointer-events: none; }
.ev-rings i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(111, 195, 255, 0.8);
  animation: evRipple 1.8s ease-out infinite;
}
.ev-rings i:nth-child(2) { animation-delay: 0.6s; }
.ev-rings i:nth-child(3) { animation-delay: 1.2s; }
.ev-spawn.expand .ev-rings { opacity: 0; transition: opacity 0.3s ease; }

/* 胶囊阶段的标题 */
.ev-capsule-title {
  position: absolute; opacity: 0; font-weight: 900; font-size: 0.86rem; color: #235573;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88%;
  transition: opacity 0.3s ease 0.25s;
}
.ev-spawn.expand:not(.open) .ev-capsule-title { opacity: 1; }
.ev-spawn.expand.open .ev-capsule-title { opacity: 0; transition: opacity 0.15s ease; }

/* 卡片阶段的内容 */
.ev-body {
  position: absolute; inset: 0; width: 100%; padding: 14px 16px; overflow-y: auto;
  opacity: 0; transition: opacity 0.35s ease 0.25s;
}
.ev-spawn.expand.open .ev-body { opacity: 1; }
.ev-title { font-weight: 900; font-size: 0.9rem; color: #2b3a48; margin-bottom: 6px; padding-right: 30px; }
.ev-text { font-size: 0.78rem; line-height: 1.6; color: #4a5763; white-space: pre-line; }
.ev-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ev-opt {
  border: 1.5px solid rgba(184, 229, 247, 0.9); background: #f4fbff; color: #235573;
  border-radius: 10px; padding: 8px 11px; font-size: 0.77rem; font-weight: 700;
  cursor: pointer; text-align: left; transition: background 0.15s ease, transform 0.15s ease;
}
.ev-opt:hover { background: #e3f4fd; transform: translateY(-1px); }
/* 2026-09-07 P3：经费不足的事件选项（禁选，不能「白嫖」） */
.ev-opt.lack {
  opacity: 0.5; cursor: not-allowed;
  border-color: rgba(230, 107, 122, 0.5); background: #faf1f2; color: #8b5f66;
}
.ev-opt.lack:hover { background: #faf1f2; transform: none; }
/* 2026-09-12：顶栏「事件!」角标（原「分红中 N%（剩 N 笔）」太长会挤压灵动岛其它胶囊）。
   保留橙黄警示底色，文本收敛成两字 + 红色感叹号徽标，点击弹「进行中的事件」详情面板 */
.office-shell .chip-dividend {
  height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px;
  border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  color: #8a5a00; background: #fff6e2; border: 1px solid rgba(216, 160, 42, 0.45);
  cursor: pointer; font-family: var(--font-ui);
}
.office-shell .chip-dividend:hover { background: #fff1c9; }
.office-shell .chip-dividend .dv-bang {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 900; line-height: 1;
  color: #fff; background: #e8703a; border: 1px solid rgba(178, 74, 22, 0.55);
  animation: dvBangPulse 1.2s ease-in-out infinite;
}
@keyframes dvBangPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* 2026-09-12：「进行中的事件」详情面板（灵动岛事件角标点开） */
.dve-list { display: flex; flex-direction: column; gap: 10px; }
.dve-card {
  padding: 12px 14px; border-radius: 12px;
  background: #fff9ea; border: 1.5px solid rgba(216, 160, 42, 0.4);
}
.dve-card .dve-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dve-card .dve-tag {
  font-size: 0.8rem; font-weight: 900; color: #8a5a00;
  background: rgba(242, 201, 106, 0.35); border-radius: 999px; padding: 2px 10px;
}
.dve-card .dve-pct { font-family: var(--font-num); font-size: 1.05rem; color: #c0721c; }
.dve-card .dve-line { font-size: 0.82rem; font-weight: 700; color: #5c5142; line-height: 1.6; }
.dve-card .dve-line b { color: #c0721c; }
.dve-card .dve-line.dim { color: #98866a; }
.dve-card .dve-note { margin-top: 6px; font-size: 0.72rem; font-weight: 700; color: #a5977d; }

/* 下方「触发事件」文字提醒（2026-09-03：不用呼吸闪烁） */
.ev-spawn .ev-hint {
  font-size: 0.78rem; font-weight: 800; color: #3d5a73;
  background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(184, 229, 247, 0.9);
  padding: 4px 12px; border-radius: 999px; pointer-events: none;
}
.ev-spawn.expand .ev-hint { opacity: 0; transition: opacity 0.25s ease; }
.ev-spawn.bye { opacity: 0; transition: opacity 0.35s ease; }

@keyframes evRipple {
  0% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes evFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes evHintPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ==========================================================================
   鲸华社新闻页（2026-09-03 二改）：微博式二级界面
   中间信息流（鲸华社 BOT）+ 右侧鲸搜热榜；feed 刷出动画、热榜定时重排。
   ========================================================================== */
.news-weibo-body { padding: 0 !important; }
.news-weibo {
  display: flex; gap: 14px; width: 100%; height: 100%;
  min-height: 0; text-align: left;
}
.nw-feed { flex: 1.7; min-width: 0; overflow-y: auto; padding: 10px 12px 10px 14px; }
.nw-side { flex: 1; min-width: 0; overflow-y: auto; padding: 10px 14px 10px 4px; }

/* ---- 信息流条目 ---- */
.nw-post {
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: 14px; padding: 11px 13px; margin-bottom: 10px;
  animation: nwSlideIn 0.5s cubic-bezier(0.2, 1, 0.3, 1) both;
}
.no-pop .nw-post { animation: none; }
@keyframes nwSlideIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.nw-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.nw-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(111, 195, 255, 0.7); background: #d8edfb;
}
.nw-meta { min-width: 0; }
.nw-user { font-weight: 900; font-size: 0.84rem; color: #235573; display: flex; align-items: center; gap: 5px; }
.nw-v {
  font-style: normal; font-size: 0.6rem; color: #fff; background: #f9a825;
  border-radius: 50%; width: 14px; height: 14px; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.nw-time { font-size: 0.68rem; color: #8aa0b2; margin-top: 2px; }
.nw-text { font-size: 0.78rem; line-height: 1.65; color: #3a4a58; }
.nw-text b { font-size: 0.82rem; color: #22384a; }
/* 新闻配图（2026-09-13 用户要求）：条目配了 img 才渲染。
   定高 + cover + 顶部对齐：海报/截图都不会把信息流撑变形；路径写错时整块被 onerror 隐藏。
   点图看原图（2026-09-13 追加）：cursor 给「可放大」的暗示，实际放大层见 .nw-lightbox。 */
.nw-img { margin-top: 8px; border-radius: 10px; overflow: hidden; background: #eef4fa; line-height: 0; cursor: zoom-in; }
.nw-img img { display: block; width: 100%; max-height: 200px; object-fit: cover; object-position: center top; }
.nw-img:hover img { filter: brightness(1.03); }
/* 配图放大层：单例节点挂在 #app 上（不进信息流，避免被重建冲掉）；点任意处关闭 */
.nw-lightbox { position: fixed; inset: 0; z-index: 99990; display: none;
  align-items: center; justify-content: center; background: rgba(10, 22, 34, 0.88); padding: 20px; }
.nw-lightbox.show { display: flex; }
.nw-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5); cursor: zoom-out; }
.nw-lightbox-tip { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  color: #cfe2f0; font-size: 12px; letter-spacing: 0.5px; }
.nw-actions {
  display: flex; gap: 18px; margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed rgba(184, 229, 247, 0.9);
  font-size: 0.72rem; color: #6b7a88; font-weight: 700;
}
.nw-actions span { display: inline-flex; align-items: center; gap: 4px; }
.nw-like { cursor: pointer; transition: transform 0.15s ease; }
.nw-like:hover { transform: scale(1.06); }
.nw-like.on { color: #e05a6d; }
/* 同事评论区（2026-09-05 新设计点）：评论按钮可点，展开同事评论 */
.nw-cmt-btn { cursor: pointer; transition: color 0.15s ease; }
.nw-cmt-btn:hover { color: var(--aqua-primary-deep); }
.nw-cmt-btn.on { color: var(--aqua-primary-deep); }
/* 2026-09-05 修 BUG：.nw-cmts 的 display:grid 会压过 UA 的 [hidden]{display:none}，
   导致留言默认全部显示、点「评论」toggle hidden 毫无反应 —— 显式补回 hidden 语义。 */
.nw-cmts[hidden] { display: none; }
.nw-cmts {
  margin-top: 8px; padding: 8px 10px;
  display: grid; gap: 7px;
  background: rgba(223, 243, 252, 0.55);
  border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: 10px;
}
.nw-cmt { display: flex; align-items: flex-start; gap: 7px; }
.nw-cmt-ava {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #7fd0f6, var(--aqua-primary-deep));
  color: #fff; font-size: 11px; font-weight: 900;
}
.nw-cmt-body { font-size: 0.72rem; line-height: 1.45; color: var(--aqua-ink-2); }
.nw-cmt-who { font-weight: 800; color: var(--aqua-foreground); margin-right: 6px; }
.nw-cmt-empty { color: var(--aqua-ink-3); font-size: 0.72rem; }
.nw-empty { text-align: center; color: #8aa0b2; font-size: 0.8rem; padding: 40px 0; }

/* ---- 右侧热榜 ---- */
.nw-side-card {
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(184, 229, 247, 0.8);
  border-radius: 14px; padding: 11px 13px; margin-bottom: 10px;
  /* 2026-09-03：卡住宽度防长标题把卡片撑开、文本溢出框外 */
  min-width: 0; overflow: hidden;
}
.nw-side-head { font-weight: 900; font-size: 0.85rem; color: #22384a; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.nw-side-tip { font-size: 0.62rem; font-weight: 700; color: #8aa0b2; flex-shrink: 0; }
.nw-hot { list-style: none; margin: 0; padding: 0; }
.nw-hot li {
  display: flex; align-items: center; gap: 6px; padding: 5px 0;
  border-bottom: 1px dashed rgba(184, 229, 247, 0.5); font-size: 0.74rem;
}
.nw-hot li:last-child { border-bottom: 0; }
.nw-rank {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 900; color: #9db2c2; background: #eef5fa;
}
.nw-rank.top { color: #fff; background: linear-gradient(135deg, #ff9a56, #f2705a); }
.nw-word {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #2b3a48; font-weight: 700;
}
.nw-tag {
  font-style: normal; font-size: 0.6rem; font-weight: 900; color: #fff;
  border-radius: 4px; padding: 1px 4px; flex-shrink: 0;
}
.nw-tag-爆 { background: #f03e3e; }
.nw-tag-热 { background: #ff922b; }
.nw-tag-新 { background: #4dabf7; }
.nw-tag-沸 { background: #be4bdb; }
.nw-heat { flex-shrink: 0; font-size: 0.64rem; color: #9db2c2; }
.nw-hot-empty { color: #8aa0b2; font-size: 0.74rem; }
.nw-side-foot { font-size: 0.66rem; color: #9db2c2; text-align: center; border-style: dashed; }

/* ==========================================================================
   立项面板 · 架构锁定态 + 语料品质配比滑条（2026-09-03）
   ========================================================================== */
.arch-card.locked { filter: grayscale(0.7); opacity: 0.82; }
.arch-card .ac-lock {
  font-style: normal; font-size: 0.66rem; font-weight: 900; color: #fff;
  background: #8aa0b2; border-radius: 999px; padding: 2px 8px; margin-left: 8px;
  vertical-align: 2px;
}
.arch-card .ac-lock-tip {
  margin-top: 6px; font-size: 0.7rem; font-weight: 700; color: #e08a00;
  background: rgba(255, 236, 204, 0.7); border-radius: 8px; padding: 4px 8px;
}

.mix-board { display: flex; flex-direction: column; gap: 7px; padding: 2px 2px 0; }
.mix-row { display: flex; align-items: center; gap: 10px; }
.mix-label { width: 38px; font-size: 0.84rem; font-weight: 900; flex-shrink: 0; }
.mix-range { flex: 1; accent-color: #2789c4; cursor: pointer; }
.mix-pct { width: 46px; text-align: right; font-size: 0.84rem; font-weight: 900; color: #2b3a48; }
.mix-sum { font-size: 0.8rem; font-weight: 700; color: #6b7a88; }
.mix-sum b { color: #22384a; font-size: 0.88rem; }
.mix-unused { margin-left: 6px; font-weight: 600; color: #9db2c2; font-size: 0.72rem; }
/* 2026-09-12：优质加成行（立项配比板内，滑条联动） */
.mix-premium {
  margin-top: 6px; padding: 5px 10px; border-radius: 8px;
  font-size: 0.76rem; font-weight: 700; color: #8a97a3;
  background: rgba(155, 224, 245, 0.16); border: 1px dashed rgba(39, 137, 196, 0.25);
}
.mix-premium.on { color: #1a5f8a; background: rgba(155, 224, 245, 0.32); border-style: solid; }
.mix-premium.on b { color: #0f4c75; font-weight: 900; }
.mix-req { font-size: 0.8rem; font-weight: 700; color: #6b7a88; line-height: 1.55; }
.mix-req-ok { color: #2f9e6e; font-weight: 900; }
/* 2026-09-12：要求行收敛成「数值 + ✓/✗」，效果数值进悬停提示（文本太长会撑变形） */
.mix-req .mix-req-need { color: #6b7a88; font-weight: 800; }
.mix-req .mix-req-mark {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; margin-left: 6px; border-radius: 50%;
  font-size: 12px; font-weight: 900; line-height: 1; vertical-align: -3px;
  cursor: help; user-select: none;
}
.mix-req .mix-req-ok.mix-req-mark { background: #e2f6ec; color: #2f9e6e; border: 1px solid rgba(47, 158, 110, 0.35); }
.mix-req .mix-req-lack.mix-req-mark { background: #fdecee; color: #e05a6d; border: 1px solid rgba(224, 90, 109, 0.4); }

/* ==========================================================================
   立项面板 · 追加能力轴徽章（doc/27 §5 P1 · 2026-09-10）
   —— 轴是「架构天赋 × 参数规模」的产物：玩家必须在立项前就看见有没有。
   ========================================================================== */
.axis-chip {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 0 3px 0 0; padding: 1px 7px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 900;
  color: #2b4a63; background: rgba(155, 224, 245, 0.45);
  border: 1px solid rgba(39, 137, 196, 0.35);
  white-space: nowrap;
}
.arch-card .ac-axes {
  margin-top: 6px; font-size: 0.7rem; font-weight: 700; color: #4a8cb8;
  position: relative; z-index: 1;
}
.arch-card .ac-axes i { font-style: normal; margin-right: 4px; opacity: 0.8; }
.arch-card .ac-axes.none { color: #9db2c2; }
/* 2026-09-13：立项面板那行「能力轴 记忆/推理/工具」胶囊 + 「由 … 产出」已删除
   （架构卡的「带出 …」已经注明，重复显示只会把字挤小）→ 规则一并删除。 */
.mix-req-lack { color: #e05a6d; font-weight: 900; }
.mix-req-na { color: #9db2c2; }

/* ============ 2026-09-03：趣味掉落鲸bee（金币）============ */
.whalebee {
  position: absolute;
  top: -70px;
  z-index: 5;                 /* 低于顶栏按钮/弹窗，盖在场景之上 */
  cursor: pointer;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35));
  animation:
    whalebee-fall var(--bee-fall, 9000ms) linear forwards,
    whalebee-sway 2.2s ease-in-out infinite alternate;
  transition: transform 0.12s ease;
}
.whalebee:hover { transform: scale(1.12); }
.whalebee:active { transform: scale(0.9); }
@keyframes whalebee-fall {
  from { top: -70px; }
  to   { top: 104%; }
}
@keyframes whalebee-sway {
  from { translate: -14px 0; }
  to   { translate: 14px 0; }
}

/* ==========================================================================
   吃瓜新闻页适配修正（2026-09-03 用户反馈）
   --------------------------------------------------------------------------
   全局「二级界面禁止滚动条」规则（.modal-body *:not(.test-messages) → overflow:visible）
   会击穿新闻页组件自身的 overflow 设置；此块写在全文件末尾、同特异性下顺序取胜，
   统一还原。左列限高滚动 = 全站第三处允许滚动条的地方（员工简历 / 测试聊天并列）。
   ========================================================================== */
.news-weibo-body .news-weibo { flex-shrink: 1; min-height: 0; }
.news-weibo-body .nw-feed {
  overflow: hidden;
  overflow-y: auto;
  max-height: 400px;            /* 左列最多露出约 2 条新闻，其余滚动查看 */
  scrollbar-gutter: stable;
}
.news-weibo-body .nw-side { overflow: hidden; overflow-y: auto; }
.news-weibo-body .nw-side-card { overflow: hidden; min-width: 0; }   /* 防长标题撑开卡片、文字溢出框外 */
.news-weibo-body .nw-hot li { min-width: 0; }
.news-weibo-body .nw-word {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* flex-basis 0 强制收缩：长标题必定在本项内截断，绝不与 爆/热/新 状态标签重叠 */
}

/* ---- 测试聊天窗口（2026-09-08 二次修复：小窗口下聊天彻底被选项挡住）----
   聊天区给保底高度，整块面板允许纵向滚动兜底：窗口再小也能滚到最新一句，
   不会再出现「消息区被压成 0 高、只看见下方选项」。 */
.test-modal-body { overflow-y: auto; }
.test-modal-body .test-chat-area { flex: 1 1 auto; max-height: none; min-height: 260px; overflow: hidden; }
.test-modal-body .test-messages {
  flex: 1 1 auto; overflow-y: auto; min-height: 170px; max-height: none;
  padding-bottom: 8px; scroll-padding-bottom: 8px;
}
.test-modal-body .test-suggest-row { flex: 0 0 auto; }
.test-modal-body .test-messages::-webkit-scrollbar { width: 5px; }
.test-modal-body .test-messages::-webkit-scrollbar-thumb { background: rgba(111, 195, 255, 0.5); border-radius: 4px; }

/* 结算页：立绘替换 emoji + 按钮居中 */
.dg-over { text-align: center; }
/* over 页立绘弹入：原引用的 bonusPopIn 已随旧演出层删除，这里补同曲线的专属关键帧 */
.dg-over-role {
  width: 128px; height: 146px; object-fit: contain; object-position: bottom; margin: 0 auto 4px;
  filter: drop-shadow(0 10px 18px rgba(23,50,77,0.28));
  animation: overRolePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes overRolePop {
  0% { opacity: 0; transform: translateY(34px) scale(0.5); }
  60% { transform: translateY(-6px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.dg-over .dg-actions.center { justify-content: center; }

/* 评审答题演出：卡片尺寸固定，三块各自绝对定位（立绘/题目/反馈都不参与 flex 压缩，
   答案长短、√ 按钮出现都不会再撑大卡片或移动立绘）
   2026-09-08 用户要求「答题框放大两倍」：卡片同步放大，答题区高度约 ×2。 */
.evalshow-card {
  position: relative; width: min(600px, 94vw); height: 500px; overflow: hidden;
  display: block;
}
.evalshow-card .evalshow-role {
  position: absolute; top: 8px; left: 0; right: 0; margin: 0 auto;
  height: 172px; max-width: 240px; object-fit: contain;
}
/* 终端 / 阅读台：标题栏小头像（2026-09-08 用户要求「立绘不能不见」；2026-09-09 一起放大） */
.evalshow-head .evalshow-role-sm {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto 6px;
  border: 2px solid #fff; box-shadow: 0 3px 10px -5px rgba(39,137,196,.6);
}
.evalshow-card .evalshow-bub-q {
  position: absolute; top: 190px; left: 50%; transform: translateX(-50%);
  width: 92%; max-height: 140px; overflow: hidden;
}
/* 2026-09-05（用户反馈）：长题目自适应缩字号（JS fitEvalQ 逐档加类），不再截断 */
.evalshow-card .evalshow-bub-q.fit-1 { font-size: 15px; line-height: 1.55; max-height: 140px; }
.evalshow-card .evalshow-bub-q.fit-2 { font-size: 14px; line-height: 1.5; max-height: 140px; }
.evalshow-card .evalshow-fb {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 92%; max-height: 150px; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.evalshow-card .evalshow-bub-a { max-height: 120px; overflow-y: auto; }

/* ==========================================================================
   奖励结算三幕演出（2026-09-04 重做，doc/16 方案 v2 + demo「评审通过 · 奖励结算演出」1:1 移植）
   --------------------------------------------------------------------------
   · 三幕推进式：① 四维分组柱状图 → ② 全球模型能力榜 + 用户反馈 → ③ 总奖金 + 词条升级
   · 顶部灵动岛三个进度胶囊（.step-pill）随幕点亮；幕切换 600ms 缓入缓出（.act）
   · 浅蓝玻璃卡（.glass-card）+ 彩色几何底纹（.aqua-stage::before/::after）
   · 金色只用于三个语义：提升高亮（.bar-col.up）/ 等级徽章（.lv-badge.new）/ 奖金
   · 庆祝 = 第三幕卡片内金币+彩纸粒子（.coin/.confetti，DOM 粒子，无 canvas）
   · 旧深色演出层的全部样式已在本区块之前的历次清理中删除，不再保留
   ========================================================================== */

/* 舞台外壳：嵌入 #devgame-render（demo 的 .aqua-shell 为整页 100vw/100vh，此处适配容器） */
.aqua-shell {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--aqua-foreground);
  font-family: var(--font-main);
}
.aqua-stage {
  position: relative;
  width: min(1280px, 100%, calc((100vh - 2rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100%;
  overflow: hidden;
  /* 2026-09-05 用户反馈：去掉舞台自带的底图/边框/阴影（此前浮在全局背景上形成「重叠的底图」），
     结算页直接使用全局浅蓝背景，舞台容器透明化 */
  background: none;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}

/* ---------- 顶部灵动岛 ----------
   注意：全局 .island-topbar 已被办公室顶栏占用，奖励页规则一律挂在 .reward-shell 下。 */
.reward-shell {
  position: absolute;
  inset: 14px 18px 18px;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  gap: 10px;
}
.reward-shell .island-topbar {
  position: relative;
  width: min(1080px, calc(100% - 58px));
  height: 48px;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px -22px rgba(23, 50, 77, 0.42);
  animation: none;
}
.island-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: var(--aqua-primary-deep);
  font-size: 15px;
}
.island-title .dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--aqua-success);
  box-shadow: 0 0 0 4px rgba(83,185,141,0.18);
}
.stage-steps { display: inline-flex; align-items: center; gap: 6px; }
.step-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  color: var(--aqua-ink-2);
  background: var(--aqua-surface-2);
  border: 1px solid rgba(184,229,247,0.7);
  transition: all .45s cubic-bezier(.22,1,.36,1);
}
.step-pill.active {
  color: #fff;
  background: linear-gradient(135deg, var(--aqua-primary), var(--aqua-primary-deep));
  border-color: transparent;
  box-shadow: 0 10px 20px -12px rgba(47,164,223,0.8);
}
.step-pill.done { color: var(--aqua-success); background: rgba(83,185,141,0.12); }

.stage-close {
  position: absolute;
  top: 3px; right: -46px;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  padding: 0; line-height: 1;
  border: 0; border-radius: 999px;
  color: var(--aqua-primary-deep);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 22px -16px rgba(23,50,77,0.5);
  cursor: pointer;
}

/* ---------- 幕（Act）容器与切换 ---------- */
.stage-body { position: relative; min-height: 0; }
.act {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  pointer-events: none;
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .6s cubic-bezier(.22,1,.36,1);
}
.act.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.act.leaving {
  opacity: 0;
  transform: translateY(-24px) scale(0.985);
}

.act-head { text-align: center; }
.pass-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 999px;
  font-weight: 900; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--aqua-success), #3fa47a);
  box-shadow: 0 14px 28px -14px rgba(63,164,122,0.9);
  animation: badgePop .7s cubic-bezier(.22,1.4,.36,1) both;
}
/* 第三幕金色徽章（demo 内联样式转语义类：阶段大成功） */
.pass-badge.gold {
  background: linear-gradient(135deg, #ffcf6e, #ef9f2a);
  box-shadow: 0 14px 28px -14px rgba(239,159,42,0.9);
}
@keyframes badgePop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   第四幕 · 成就（2026-09-16 · doc/35 §4.2.2）
   --------------------------------------------------------------------------
   四档稀有度**只在这一处定义**（描边色 + 外发光半径 + 环层数 + 粒子数）：
   改色 / 改半径 / 改粒子数都只改这张表，别在媒体查询里另抄一套色值。
   稀有度色**只活在 .achv-card 的作用域**里（不给 :root 加变量）——
   否则会打破「金色只用于提升高亮 / 等级徽章 / 奖金」的既有克制。
   "高级感"落在四条手艺上（每条都对应一种"廉价"的反面）：
     ① 内外两层光：只有外圈 = 像贴了圈彩色胶带；只有内圈 = 根本没亮
     ② 环是"收"不是"胀"：双环对冲，且外扩量按**卡的短边**算（防被舞台裁掉）
     ③ 尘埃不是星星：软边小点（radial-gradient）/ 尺寸不均 / 只上浮不自转
     ④ 相位错开：--p-delay 全为负且互不相等，否则同相呼吸像心跳
   ⚠️ 装饰层（环 / 粒子）一律 pointer-events:none —— 否则盖住「跳过全部」点不动。
   ⚠️ 卡体入场 / 扩散环 / 粒子必须挂在**三个不同元素**上：animation 是简写属性，
      一个元素只能拥有一组，挂一起会互相冲掉（且不报错，只是"动画没生效"）。
   ========================================================================== */
/* ==========================================================================
   第四幕 · 成就（2026-09-16 重做 v2 · doc/35 §4.2.2）
   --------------------------------------------------------------------------
   ⚠️⚠️ 两条**必须**遵守（第一条是首次上线时的真 bug）：
   ① `.achv-reveal` 是 flex、`.achv-grid` 是 grid —— 两者都会**顶掉 `[hidden]` 的 display:none**
      ⇒ 必须显式写 `.xxx[hidden] { display: none }`，否则"隐藏弹卡"根本不生效，
        弹卡与列表会**叠在同一屏里互相挤**（这正是第一版看起来很乱的原因）。
   ② 三层动效挂在**三个不同元素**上（辉光 / 环 / 粒子）：`animation` 是简写属性，
      一个元素只能拥有一组，挂一起会互相冲掉（不报错，只是"动画没生效"）。
   --------------------------------------------------------------------------
   稀有度色**只定义在 .achv-wrap 的作用域**里（不给 :root 加变量）——
   否则会打破「金色只用于提升高亮 / 等级徽章 / 奖金」的既有克制。
   "高级感"的落法：
     · **真实高斯模糊的辉光**（一层独立元素 + filter: blur）—— 比多层 box-shadow 更像"光"
     · **内外两层光**：inset 把卡照亮 + 外圈宽而淡；再加一层**中性**投影让卡离地（不是彩色的）
     · **尘埃不是星星**：软边小点（radial-gradient）/ 尺寸不均 / 只上浮不自转 / 相位错开
     · **环是"收"不是"胀"**：双环对冲，外扩量按卡的短边算（防被 .aqua-stage 裁掉）
   ⚠️ 所有装饰层（辉光 / 环 / 粒子）一律 pointer-events:none，否则盖住「跳过全部」点不动。
   ========================================================================== */

/* ---- 隐藏态（flex/grid 会顶掉 [hidden]，显式覆盖不是可选优化） ---- */
.achv-reveal[hidden],
.achv-grid[hidden],
.achv-pager[hidden] { display: none; }

/* ==========================================================================
   成就卡 = **模型库同款卡牌语言**（2026-09-16 二改，用户：「换成模型库那种卡片型」）
   --------------------------------------------------------------------------
   结构对齐（照抄，别自己另起一套）：
     .achv-card   ← 饰边层 = 稀有度底色 + 双向 conic 花纹 + 描边    ≡ .cdx-card
       .achv-inner ← 白色内卡 = 图标 / 名字 / 品质徽章 / 描述 / 元信息 ≡ .cdx-card-inner
   四档靠「底色 + 花纹 + 内卡色调 + 徽章色」同时变 —— 一眼就能分出稀有度。
   传说额外叠一道**流光**（复用样式库里已有的 @keyframes cdxSheen，不新造动效）。
   ⚠️ 竖版比例 aspect-ratio: 3/4.2（用户明确否掉了「扁平长方形」）。
   ⚠️ 稀有度变量定义在 .achv-wrap 上：辉光/环/粒子是 .achv-card 的**兄弟节点**，只能靠继承拿。
   ⚠️ 所有装饰层一律 pointer-events:none，否则盖住「跳过全部」点不动。
   ========================================================================== */

/* ---- 阶段 A 容器 ---- */
.achv-reveal {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 8px 24px 0; min-height: 0;
}
.achv-slot { display: flex; align-items: center; justify-content: center; }
.achv-reveal-foot { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--aqua-ink-3); }
.achv-count { font-family: var(--font-num); font-weight: 800; letter-spacing: .5px; }
.achv-skip {
  position: relative; border: 1px solid var(--aqua-line); background: rgba(255,255,255,.78);
  color: var(--aqua-primary-deep); font: inherit; font-size: 12.5px; font-weight: 800;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.achv-skip::after { content: ""; position: absolute; inset: -8px -6px; }   /* 撑命中框：视觉尺寸不动 */
.achv-skip:hover { border-color: var(--aqua-primary); color: var(--aqua-primary); box-shadow: 0 0 16px -4px rgba(79,183,238,.75); }

/* ---- 稀有度四档 + 未解锁：底色 / 花纹暗色 / 内卡 / 强调字色 / 徽章 / 主色 / 辉光 ---- */
.rarity-common {
  --achv-color:#7fd0f6; --achv-glow:rgba(127,208,246,.95); --achv-soft:rgba(127,208,246,.62); --achv-glow-r:28px;
  --achv-face: linear-gradient(160deg, #e8f9ff 0%, #9ed8f4 100%); --achv-pattern: rgba(24,90,130,.16);
  --achv-inner: linear-gradient(170deg, #ffffff 0%, #f5fbff 100%); --achv-ink: #3d8fbf; --achv-vd: #7fbede;
}
.rarity-rare {
  --achv-color:#3aa5e4; --achv-glow:rgba(58,165,228,.95); --achv-soft:rgba(58,165,228,.62); --achv-glow-r:36px;
  --achv-face: linear-gradient(160deg, #cbeaff 0%, #5cb6e7 100%); --achv-pattern: rgba(15,80,130,.20);
  --achv-inner: linear-gradient(170deg, #ffffff 0%, #f0f9ff 100%); --achv-ink: #2b6b96; --achv-vd: #3aa5e4;
}
.rarity-epic {
  --achv-color:#f96aa6; --achv-glow:rgba(249,106,166,.95); --achv-soft:rgba(249,106,166,.62); --achv-glow-r:44px;
  --achv-face: linear-gradient(160deg, #ffdcEB 0%, #f280b4 100%); --achv-pattern: rgba(150,30,80,.18);
  --achv-inner: linear-gradient(170deg, #fffafc 0%, #fff0f6 100%); --achv-ink: #c2477e; --achv-vd: #f96aa6;
}
.rarity-legend {
  --achv-color:#eda01f; --achv-glow:rgba(237,160,31,1); --achv-soft:rgba(237,160,31,.66); --achv-glow-r:52px;
  --achv-face: linear-gradient(160deg, #fff0c2 0%, #dfa72c 100%); --achv-pattern: rgba(150,100,10,.18);
  --achv-inner: linear-gradient(170deg, #fffdf4 0%, #fff6d8 100%); --achv-ink: #c0721c; --achv-vd: #d4a017;
}
.rarity-locked {
  --achv-color:#8fa6b5; --achv-glow:rgba(143,166,181,.5); --achv-soft:rgba(143,166,181,.28); --achv-glow-r:10px;
  --achv-face: linear-gradient(160deg, #eef3f6 0%, #cfdae1 100%); --achv-pattern: rgba(60,80,95,.14);
  --achv-inner: linear-gradient(170deg, #fbfdfe 0%, #f2f6f8 100%); --achv-ink: #7d94a3; --achv-vd: #8fa6b5;
}

/* ---- 定位容器（稀有度变量挂在它身上） ---- */
.achv-wrap { position: relative; width: 258px; max-width: 100%; }
.achv-wrap.compact { width: auto; }

/* ==========================================================================
   ① 辉光层：真实高斯模糊（"高级感"的主要来源）
   ⚠️ 模糊必须**静态** —— 动画只动 opacity。逐帧重算 filter 是最贵的写法。
   ⚠️ z-index 0 + 卡体 z-index 1：卡体不透明 ⇒ 光只从卡片四周溢出来，不会糊住正文。
   ========================================================================== */
.achv-glow {
  position: absolute; inset: -8px; border-radius: 26px;
  background: var(--achv-glow);
  filter: blur(30px);
  opacity: .60;
  z-index: 0;
  pointer-events: none;
  animation: achvGlowPulse 3.6s ease-in-out infinite;
}
@keyframes achvGlowPulse {
  0%, 100% { opacity: .48; }
  50%      { opacity: .82; }
}

/* ==========================================================================
   饰边层（≡ .cdx-card）：稀有度底色 + 双向斜纹花纹 + 描边
   花纹是**多层 conic-gradient 叠出来的**（同模型库写法：5 层 + 1 层底色，各自设 background-size）。
   ========================================================================== */
.achv-card {
  position: relative; z-index: 1;
  overflow: hidden; isolation: isolate;
  padding: 9px; border-radius: 16px;
  aspect-ratio: 3 / 4.2;
  border: 1px solid var(--achv-color);
  background-image:
    conic-gradient(from 40deg at 18% 24%, rgba(255,255,255,.55) 0 25%, transparent 25%),
    conic-gradient(from 205deg at 72% 14%, var(--achv-pattern) 0 25%, transparent 25%),
    conic-gradient(from 130deg at 32% 66%, rgba(255,255,255,.40) 0 25%, transparent 25%),
    conic-gradient(from 310deg at 84% 78%, var(--achv-pattern) 0 25%, transparent 25%),
    conic-gradient(from 80deg at 55% 42%, rgba(255,255,255,.32) 0 25%, transparent 25%),
    var(--achv-face);
  background-size: 44px 40px, 62px 54px, 54px 62px, 70px 46px, 38px 44px, 100% 100%;
  box-shadow:
    inset 0 0 16px -8px var(--achv-soft),
    0 0 var(--achv-glow-r) -6px var(--achv-glow),
    0 16px 30px -20px rgba(18,64,92,.45);
}
.achv-card.in { animation: badgePop .62s cubic-bezier(.22,1.4,.36,1) both; }
/* 列表里的卡改用**只上浮、不缩放**的入场：缩放版在网格里会溢出容器（冒滚动条），
   而且一堆卡同时缩放显得抖。弹卡是单张居中，保留 badgePop 的「弹」。 */
.achv-grid .achv-card.in { animation: achvCardIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes achvCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* 传说：一道流光斜向扫过（复用已有 @keyframes cdxSheen，别再新造一个同款动效） */
.rarity-legend .achv-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.8) 46%, rgba(255,226,130,.55) 52%, transparent 68%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: cdxSheen 3s ease-in-out infinite;
}

/* ---- 白色内卡（≡ .cdx-card-inner）：信息竖排，像一张真的收藏卡 ---- */
.achv-inner {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 12px 10px 10px; border-radius: 10px;
  background: var(--achv-inner);
  border: 1px solid rgba(255,255,255,.9);
  overflow: hidden; text-align: center;
}
.achv-art { flex: 0 0 auto; display: grid; place-items: center; width: 100%; height: 42%; min-height: 0; }
/* ⚠️ 2026-09-19 用户要求：「把上方的 SVG icon 向上挪，腾出位置，标题 / 稀有度 / 描述也往上挪」。
   原来 art 是 `height:42%` 的**定高框**，而矢量图标只有 46px ⇒ 实测 480×640 下 art 高 94px、
   白占 ~50px 的空白，把正文往下挤，最后逼得描述和日期只剩 3px（少数尺寸下直接压上）。
   这里让**没有立绘**的卡（只有 `span.achv-glyph`）贴住图标，把空白还给正文；有 `<img>` 的卡不受影响。
   ⚠️ 用 `:has()`：不支持的老浏览器会整条规则失效 ⇒ 退回原样，不会坏。 */
.achv-art:not(:has(img)) { height: auto; }
.achv-art img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: cover; display: block; }
.achv-art.art-missing { }
.achv-glyph { display: inline-flex; color: var(--achv-color); filter: drop-shadow(0 3px 7px rgba(18,64,92,.30)); }
.achv-name { font-size: 15px; font-weight: 900; letter-spacing: .3px; line-height: 1.25; color: var(--aqua-foreground); }
.achv-vd {
  flex: 0 0 auto; padding: 1px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #fff;
  background: var(--achv-vd); box-shadow: 0 2px 6px -3px rgba(23,50,77,.5);
}
.achv-desc {
  font-size: 11px; line-height: 1.55; color: var(--aqua-ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.achv-reveal .achv-desc { font-size: 11.5px; -webkit-line-clamp: 5; }
.achv-meta { margin-top: auto; font-size: 10px; font-family: var(--font-num); color: var(--aqua-ink-3); }

/* ==========================================================================
   ② 扩散环：双环对冲（一出一收 = "光从四周收拢到卡片上"）
   ⚠️ 两组 scale 都走变量：竖屏要能把**两个都**收小（内收环在 t=0 就整个露在外面）。
   ⚠️ 外扩量按卡的短边算：1280×900 下舞台垂直余量 ≈130px、水平 ≈380px（只看横向会判错）。
   ========================================================================== */
.achv-halo {
  position: absolute; inset: -3px; border-radius: 18px;
  pointer-events: none;
  border: 2px solid var(--achv-color);
  opacity: 0;
  z-index: 2;
  --halo-from: 1; --halo-to: 1;
}
.achv-halo.hl-a { --halo-from: .94; --halo-to: 1.14; animation: achvHaloA 1200ms cubic-bezier(.22,1,.36,1) forwards; }
.achv-halo.hl-b { --halo-from: 1.14; --halo-to: 1.01; animation: achvHaloB 900ms cubic-bezier(.4,0,.6,1) forwards; }
@keyframes achvHaloA {
  0%   { transform: scale(var(--halo-from)); opacity: .55; }
  100% { transform: scale(var(--halo-to));   opacity: 0; }
}
@keyframes achvHaloB {
  0%   { transform: scale(var(--halo-from)); opacity: .9; }
  100% { transform: scale(var(--halo-to));   opacity: 0; }
}

/* ==========================================================================
   ③ 尘埃粒子层
   · 每颗的尺寸 / 起点 / 漂移 / 上浮 / 时长 / 相位 = **nth-child 静态表**（下面 18 行）
   · ⚠️ 刻意**不用 JS 随机**：① 可复现（同一张卡每次播都一样；随机会被当成抖动/bug）；
     ② 不脏 DOM；③ 可断言（测试能查表齐不齐、相位有没有重复）。
   · ⚠️ `--p-delay` 必须**负值且互不相等** —— 从 0s 起则 18 颗同相呼吸 = 像心跳，很假。
   · ⚠️ 这一层要比卡片**宽出去一大截**（横向 -90px）：粒子才有一批飘在卡片**周围**的空气里。
     只贴着卡片外扩十几像素的话，粒子全压在卡片自己的颜色上 ⇒ 等于看不见（踩过）。
   ========================================================================== */
.achv-dust {
  position: absolute; inset: -44px -90px -18px;
  border-radius: 44px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.achv-dust > i {
  position: absolute; bottom: -12px; left: var(--p-left, 50%);
  width: var(--p-size, 2px); height: var(--p-size, 2px);
  border-radius: 50%;
  /* 软边小点：中心实、边缘透明 —— 用 border-radius 的硬圆会立刻变"闪粉贴纸" */
  background: radial-gradient(circle, #fff 0%, var(--achv-color) 48%, transparent 76%);
  box-shadow: 0 0 12px 2px var(--achv-glow), 0 0 4px 0 rgba(255,255,255,.95);
  opacity: 0;
  will-change: transform, opacity;
  animation: dustRise var(--p-dur, 3.2s) linear var(--p-delay, -0.2s) infinite;
}
@keyframes dustRise {
  0%   { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
  14%  { opacity: 1; }
  50%  { opacity: .85; }
  78%  { opacity: .45; }
  100% { transform: translate3d(var(--p-dx, 0px), var(--p-rise, -120px), 0) scale(1.05); opacity: 0; }
}
.achv-dust > i:nth-child(1) { --p-left:   5%; --p-size: 2.5px; --p-dx: -5px; --p-rise: -109px; --p-dur: 3.4s; --p-delay: -0.2s; }
.achv-dust > i:nth-child(2) { --p-left:  11%; --p-size: 3.5px; --p-dx: 6px; --p-rise: -91px; --p-dur: 3.9s; --p-delay: -0.5s; }
.achv-dust > i:nth-child(3) { --p-left:  18%; --p-size: 2px; --p-dx: -3px; --p-rise: -122px; --p-dur: 4.3s; --p-delay: -0.9s; }
.achv-dust > i:nth-child(4) { --p-left:  24%; --p-size: 3px; --p-dx: 4px; --p-rise: -99px; --p-dur: 3.1s; --p-delay: -1.3s; }
.achv-dust > i:nth-child(5) { --p-left:  31%; --p-size: 4px; --p-dx: -7px; --p-rise: -82px; --p-dur: 3.6s; --p-delay: -0.7s; }
.achv-dust > i:nth-child(6) { --p-left:  37%; --p-size: 2.5px; --p-dx: 3px; --p-rise: -117px; --p-dur: 4.5s; --p-delay: -1.9s; }
.achv-dust > i:nth-child(7) { --p-left:  43%; --p-size: 3px; --p-dx: -4px; --p-rise: -95px; --p-dur: 3.3s; --p-delay: -1.1s; }
.achv-dust > i:nth-child(8) { --p-left:  50%; --p-size: 2px; --p-dx: 5px; --p-rise: -127px; --p-dur: 4.1s; --p-delay: -2.4s; }
.achv-dust > i:nth-child(9) { --p-left:  56%; --p-size: 3.5px; --p-dx: -6px; --p-rise: -86px; --p-dur: 2.9s; --p-delay: -0.4s; }
.achv-dust > i:nth-child(10) { --p-left:  62%; --p-size: 2.5px; --p-dx: 7px; --p-rise: -105px; --p-dur: 3.7s; --p-delay: -1.6s; }
.achv-dust > i:nth-child(11) { --p-left:  68%; --p-size: 3px; --p-dx: -2px; --p-rise: -78px; --p-dur: 3.2s; --p-delay: -2.1s; }
.achv-dust > i:nth-child(12) { --p-left:  74%; --p-size: 2px; --p-dx: 4px; --p-rise: -118px; --p-dur: 4.4s; --p-delay: -2.8s; }
.achv-dust > i:nth-child(13) { --p-left:  79%; --p-size: 3.5px; --p-dx: -5px; --p-rise: -94px; --p-dur: 3.5s; --p-delay: -0.6s; }
.achv-dust > i:nth-child(14) { --p-left:  84%; --p-size: 2.5px; --p-dx: 8px; --p-rise: -85px; --p-dur: 4s; --p-delay: -1.4s; }
.achv-dust > i:nth-child(15) { --p-left:  89%; --p-size: 3px; --p-dx: -3px; --p-rise: -112px; --p-dur: 3s; --p-delay: -2.6s; }
.achv-dust > i:nth-child(16) { --p-left:  93%; --p-size: 2px; --p-dx: 5px; --p-rise: -101px; --p-dur: 4.2s; --p-delay: -3.1s; }
.achv-dust > i:nth-child(17) { --p-left:  97%; --p-size: 3px; --p-dx: -6px; --p-rise: -89px; --p-dur: 3.8s; --p-delay: -0.8s; }
.achv-dust > i:nth-child(18) { --p-left:   2%; --p-size: 3.5px; --p-dx: 6px; --p-rise: -108px; --p-dur: 4.3s; --p-delay: -2.2s; }

/* ---- 阶段 B · 解锁列表：**每页 4 张竖卡**（对齐模型库的每页 4 张） ---- */
.achv-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  width: 100%; max-width: 1000px; margin: 0 auto; padding: 2px 0 0; min-height: 0;
  /* 竖卡高得多：4 列 × (aspect 3/4.2) 时单卡 ≈337px，1 行就占满了 ——
     这正是「每页 4 张」的原因（6 张要 2 行，会顶穿 620px 的舞台，且超了是被裁不报错）。 */
  /* ⚠️ **不要**给这里设 max-height / overflow —— 每页 4 张永远只有一行，本来不需要滚动。
     而且 `overflow-y: auto` 会把 `overflow-x: visible` **隐式算成 auto**（CSS 规范：一轴非 visible，
     另一轴的 visible 变 auto）⇒ 卡片入场 scale(1.08) 的那几帧比列宽大，立刻冒出**横向**滚动条，
     纵向也会顶破 max-height 再冒一条（2026-09-16 用户实测：卡片弹出来时两条一起出现）。 */
  overflow: visible;
}
/* 翻页条：与第三幕「词条升级」的 pager 同款 */
.achv-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 4px; }

/* ==========================================================================
   第四幕 · 结算页「文案必须完整」—— **只在手机竖屏**（2026-09-29 用户要求）
   --------------------------------------------------------------------------
   用户原话①：「让成就卡文案显示完整，一页甚至可以只显示一张卡，让玩家翻页，
              无论如何要显示完整文案。」
   用户原话②（同日二次校正）：「成就卡是手机竖屏才是一页一个，电脑网页还是跟以前一样。」
   ⇒ 竖屏一页一张、卡高随文案自适应、不截断；**桌面/横屏回到旧行为**（4 列 + clamp 4~5 行）。
   竖屏旧行为的问题：`.achv-desc` 被 clamp 成 2~3 行 + 省略号，实机成就描述根本看不全。
   做法（**只覆盖 #act-4**：成就墙 / 模型库 / 前三幕一个字节不动）：
     · 卡高不再锁 `aspect-ratio: 3/4.2`，交给内容决定（文案多长卡就多高）
     · `.achv-inner / .achv-desc` 取消 `overflow:hidden` 与 clamp ⇒ 正文完整排版
     · 一页一张 ⇒ 网格收成**单列居中**；`.achv-pager` 负责翻页
     · `#act-4` 自己 `overflow-y:auto` + `safe center`：卡再高也只是**页内可滚**，
       不会被 `.aqua-stage{overflow:hidden}` 裁掉半截（`safe` 保证溢出时退回顶部对齐，
       否则内容会同时向上溢出、上面那截永远滚不到）。
   ⚠️ 媒体查询条件必须与 game_ui.js 的 `achvPerPage()` **完全一致**（都用
      `(orientation: portrait)`）—— 分页张数在 JS、列数在 CSS，两处判据一旦不同源，
      就会出现「一页 4 张却只画 1 列」或「一页 1 张却按 4 列分页」的错位。
   ⚠️ 全部用 id 选择器（#act-4 …）压过文件后面竖屏 / 矮舞台的 class 规则（0,1,0）——
      靠特异性取胜，**不依赖源顺序**，所以放这儿也安全。
   ========================================================================== */
@media (orientation: portrait) {
  #act-4 { align-content: center; align-content: safe center; overflow-y: auto; overflow-x: hidden; }
  #act-4 .achv-grid {
    grid-template-columns: minmax(0, 1fr); justify-items: center;
    max-width: min(460px, 100%); max-height: none; overflow: visible;
  }
  #act-4 .achv-reveal .achv-wrap,
  #act-4 .achv-grid .achv-wrap { width: min(320px, 100%); }
  #act-4 .achv-reveal .achv-card,
  #act-4 .achv-grid .achv-card { aspect-ratio: auto; }
  #act-4 .achv-reveal .achv-inner,
  #act-4 .achv-grid .achv-inner { height: auto; overflow: visible; }
  #act-4 .achv-reveal .achv-art,
  #act-4 .achv-grid .achv-art { height: auto; }
  #act-4 .achv-reveal .achv-art img,
  #act-4 .achv-grid .achv-art img { max-height: 150px; }
  #act-4 .achv-reveal .achv-desc,
  #act-4 .achv-grid .achv-desc {
    display: block; -webkit-line-clamp: none; overflow: visible; max-height: none;
  }
}

/* 第四幕页脚改横排：`.act-foot` 基线是「单列 grid」，两个按钮会**竖着堆**（白占 56px 高）。
   ⚠️ 只覆盖 #act-4，不动前三幕（它们页脚竖排是既有设计，改了会偏 demo）。 */
#act-4 .act-foot { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* ---- 结算页内部滚动区的滚动条：跟站内其它面板统一成 4px 细条 ----
   ⚠️ 在此之前 .rank-list / .feed-list 用的是**浏览器默认滚动条**（又粗又灰），
      是全站唯一漏掉样式的两个滚动区（.modal-body / .test-messages / .recruit-detail-bio 都有）。 */
/* ⚠️ 用**标准属性对**（scrollbar-width + scrollbar-color），不要跟 ::-webkit-scrollbar 混用：
   Chrome 一旦认了标准属性就会**忽略** ::-webkit-scrollbar ⇒ 自定义 thumb 被无视、退回默认灰条
   （2026-09-16 实测：先写的是 width:4px + thumb，屏幕上还是一条深灰粗条）。
   ⚠️ 顺带记：.recruit-detail-bio 同时写了 scrollbar-width:thin 与 ::-webkit-scrollbar，是同一个隐患。 */
.rank-list, .feed-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(111,195,255,.55) transparent;
}

/* ---- 动画降级：prefers-reduced-motion ----
   ⚠️ 粒子层与辉光**整块不生成**（display:none），**不是** `animation: none` ——
      `animation:none` 会让它们僵在初始位置（一堆不动的点挂在卡上，比有动画更难看）。 */
@media (prefers-reduced-motion: reduce) {
  .achv-dust { display: none; }
  .achv-glow { display: none; }
  .achv-halo { animation: none; opacity: 0; }
  .achv-card.in { animation: none; }
}

.act-title {
  margin: 10px 0 0;
  font-size: 30px; font-weight: 900; letter-spacing: 1px;
  color: var(--aqua-foreground);
}
.act-sub {
  margin: 6px 0 0;
  color: var(--aqua-muted-foreground);
  font-size: 13.5px;
}
/* 标题 meta（游戏补充：模型名 · 阶段 · 参数，demo 无此行） */
.act-meta {
  margin: 4px 0 0;
  font-family: var(--font-num);
  font-weight: 800; font-size: 12.5px; letter-spacing: 0.5px;
  color: var(--aqua-ink-3);
}

/* ---------- 通用玻璃卡 ---------- */
.glass-card {
  border-radius: 24px;
  border: 1px solid rgba(184,229,247,0.78);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(79,183,238,0.05) 14px 16px, transparent 16px 28px),
    rgba(255,255,255,0.9);
  box-shadow: 0 22px 46px -34px rgba(23,50,77,0.5);
}

/* ---------- 圆润平行四边形按钮：复用全局 .dg-btn-primary（demo .slant-btn 同语言） ---------- */
.next-btn { justify-self: center; }
.act-foot { display: grid; justify-items: center; gap: 8px; margin-top: 4px; }
.act-foot .dg-btn { min-width: 150px; height: 48px; font-size: 15px; }
.hint-tip {
  margin-top: 0; font-size: 11.5px; color: var(--aqua-ink-3);
  display: inline-flex; align-items: center; gap: 5px;
}

/* ---------- 第一幕：动态分组柱状图 ---------- */
.chart-card {
  padding: 20px 26px 18px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 236px;
  gap: 20px;
  align-items: stretch;
}
.chart-main {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  min-height: 0;
}
/* 图例：说明组内各柱代表的阶段（从新到旧） */
.chart-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 0 6px 2px;
  font-size: 11.5px; font-weight: 700; color: var(--aqua-ink-2);
}
.chart-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg-dot {
  width: 11px; height: 11px; border-radius: 4px 4px 3px 3px;
  background: var(--aqua-surface-3);
  border: 1px solid rgba(184,229,247,0.9);
}
.chart-legend .lg-dot.p2 { background: #b9e3f7; }
.chart-legend .lg-dot.p3 { background: #8fd0f2; }
.chart-legend .lg-dot.cur {
  width: 13px; height: 13px; border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, #8fd8f8, var(--aqua-primary-deep));
  box-shadow: 0 6px 12px -8px rgba(47,164,223,0.9);
}

.bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  align-items: end;
  height: 264px;
  padding: 14px 10px 0;
  /* X 轴基线贴柱底的关键（2026-09-06）：标签行固定高，基线 bottom = 标签高 + 列内间距，
     不再写死 34px（标签 auto 行高一变基线就悬空在柱底上方） */
  --bar-label-h: 20px;
}
/* 横向网格参考线 + 底部基线：让分组柱状图更精致、读数更清晰 */
.bars::before {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: 14px; bottom: calc(var(--bar-label-h) + 6px);
  background: repeating-linear-gradient(
    180deg,
    rgba(184,229,247,0.5) 0 1px,
    transparent 1px 25%
  );
  pointer-events: none;
}
.bars::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: calc(var(--bar-label-h) + 6px);
  height: 2px; border-radius: 2px;
  background: rgba(150,210,238,0.55);
  pointer-events: none;
}
.bar-col {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 6px;   /* = .bars 基线 bottom 计算里的 +6px（标签行与柱区的间距） */
  height: 100%;
  text-align: center;
}
/* 数值标识跟随柱顶（2026-09-05 用户需求）：绝对定位在本阶段柱 top 之上，随生长动画一起升 */
.bar-value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  font-family: var(--font-num);
  font-weight: 800; font-size: 17px; color: var(--aqua-primary-deep);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.bar-col.up .bar-value { color: #d98a16; }
/* 组容器：组内柱子紧贴，组间靠 grid gap 拉开距离 */
.bar-track {
  position: relative;
  align-self: end;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px;
  padding: 0 4px;
}
.mini-bar {
  position: relative;
  width: 13px;
  height: 0%;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #d9f1fb, #b9e0f2);
  border: 1px solid rgba(184,229,247,0.85);
  transition: height .9s cubic-bezier(.22,1,.36,1);
}
.mini-bar.p2 { background: linear-gradient(180deg, #c6ebfa, #9fd6f1); }
.mini-bar.p3 { background: linear-gradient(180deg, #aee2f8, #7fc8ee); }
/* 本阶段柱子：略宽、饱和蓝色，带顶部高光 */
.mini-bar.cur {
  width: 16px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #8fd8f8, var(--aqua-primary) 58%, var(--aqua-primary-deep));
  box-shadow: 0 10px 18px -12px rgba(47,164,223,0.9);
}
.mini-bar.cur::before {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  width: 36%; height: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
}
/* 提升项：本阶段柱触发金色高亮 + 呼吸光效 */
.bar-col.up .mini-bar.cur {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #ffd98a, var(--aqua-warning) 55%, #e89b23);
  box-shadow: 0 12px 22px -10px rgba(242,184,75,0.95);
  animation: barGlow 1.8s ease-in-out infinite;
}
@keyframes barGlow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}
.bar-label {
  height: var(--bar-label-h);   /* 固定高：X 轴基线按「标签高 + 6px」贴柱底，行高漂移不再让基线悬空 */
  font-weight: 800; font-size: 13px; color: var(--aqua-ink-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
/* +Δ 徽章：贴在本阶段柱顶部（数值标识上方，2026-09-05 数值改随柱顶后让位上移） */
.delta-chip {
  position: absolute;
  top: -46px; left: 50%;
  transform: translateX(-50%) scale(.5);
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #ffcf6e, #ef9f2a);
  box-shadow: 0 8px 16px -8px rgba(239,159,42,0.9);
  opacity: 0; white-space: nowrap;
  pointer-events: none;
}
.bar-col.up .delta-chip { animation: chipPop .5s cubic-bezier(.22,1.5,.36,1) forwards; }
@keyframes chipPop { to { opacity: 1; transform: translateX(-50%) scale(1); } }

.chart-side {
  display: grid; align-content: center; gap: 10px;
  padding: 16px 18px;
  border-radius: 20px;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(83,185,141,0.05) 12px 14px, transparent 14px 26px),
    rgba(237,249,255,0.8);
  border: 1px solid rgba(184,229,247,0.7);
}
.side-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.side-row .k { color: var(--aqua-ink-2); display: inline-flex; align-items: center; gap: 6px; }
.side-row .v { font-family: var(--font-num); font-weight: 800; color: var(--aqua-primary-deep); }
.side-row .v.up { color: var(--aqua-success); }

/* ---------- 第二幕：能力排行榜 + 用户反馈 ---------- */
.act2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
}
.panel { padding: 18px 20px; }
.panel-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: 16px; color: var(--aqua-primary-deep);
  margin: 0 0 12px;
}
/* 榜单 10~11 行：内部滚动区（铁律 6：页面本身不滚，超长交给内部滚动）
   overflow-x: hidden —— 定位脉冲 meLocate 用 transform:scale 撑宽行，
   否则 overflow-y:auto 会让 overflow-x 隐式变 auto，动画瞬间冒出横向滚动条挡住卡片（2026-09-06） */
/* ⚠️ 2026-09-13 用户实测「V3.5 结算时模型排名动画对不准，直接拉到下面来了」：
   定位己方行的动画用 `me.offsetTop` 算滚动目标，而 .rank-list 没有 position:relative →
   offsetTop 的参照系变成了**更外层的定位祖先**（把标题栏、上方面板的高度都算了进去）
   → target 过大 → scrollTop 被浏览器夹到最底部 → 表现就是「一下子拉到下面」。
   加上这一行，offsetTop 才是相对列表自身的，定位才准。 */
.rank-list { position: relative; display: grid; gap: 8px; max-height: 264px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.rank-row {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(248,253,255,0.85);
  border: 1px solid rgba(184,229,247,0.6);
  opacity: 0; transform: translateX(-30px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.act.active .rank-row { opacity: 1; transform: translateX(0); }
.rank-row .rank-no {
  width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-num); font-weight: 900; font-size: 16px;
  color: var(--aqua-ink-2); background: var(--aqua-surface-3);
}
.rank-row .rank-name { font-weight: 800; font-size: 14px; }
.rank-row .rank-meta { font-size: 11px; color: var(--aqua-ink-3); }
.rank-row .rank-score { font-family: var(--font-num); font-weight: 800; color: var(--aqua-ink-2); font-size: 14px; }
.rank-row.me {
  grid-template-columns: 40px minmax(0,1fr) auto;
  background: linear-gradient(120deg, rgba(127,208,246,0.28), rgba(213,242,255,0.9));
  border-color: var(--aqua-primary);
  box-shadow: 0 14px 28px -18px rgba(47,164,223,0.85);
}
.rank-row.me .rank-no { color: #fff; background: linear-gradient(135deg, var(--aqua-primary), var(--aqua-primary-deep)); }
.rank-row.me .rank-name { color: var(--aqua-primary-deep); }
/* 定位到己方模型：滚动到位后亮一圈脉冲（2026-09-05 用户需求） */
.rank-row.me.locating { animation: meLocate 1.6s cubic-bezier(.22,1,.36,1); }
@keyframes meLocate {
  0% { box-shadow: 0 0 0 0 rgba(47,164,223,0.0), 0 14px 28px -18px rgba(47,164,223,0.85); transform: scale(1); }
  22% { box-shadow: 0 0 0 5px rgba(47,164,223,0.45), 0 14px 28px -14px rgba(47,164,223,1); transform: scale(1.045); }
  60% { box-shadow: 0 0 0 3px rgba(47,164,223,0.28), 0 14px 28px -18px rgba(47,164,223,0.9); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(47,164,223,0), 0 14px 28px -18px rgba(47,164,223,0.85); transform: scale(1); }
}
.rank-up {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #ffcf6e, #ef9f2a);
}
/* 10 名外省略行（游戏补充，demo 无） */
.rank-ellipsis {
  display: grid; place-items: center;
  padding: 2px 0; margin: -2px 0;
  color: var(--aqua-ink-3); font-weight: 900; letter-spacing: 4px;
}
/* 内测保密提示条（游戏补充，demo 无） */
.rank-tip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: var(--aqua-ink-2);
  background: rgba(242,184,75,0.14);
  border: 1px solid rgba(242,184,75,0.4);
}

.user-stat {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px;
}
.stat-box {
  padding: 12px 14px; border-radius: 16px;
  background: rgba(248,253,255,0.85);
  border: 1px solid rgba(184,229,247,0.6);
}
.stat-box .num {
  font-family: var(--font-num); font-weight: 900; font-size: 24px;
  color: var(--aqua-primary-deep); line-height: 1.1;
}
.stat-box .num small { font-size: 13px; font-weight: 800; }
.stat-box .lbl { font-size: 11.5px; color: var(--aqua-ink-3); margin-top: 2px; }
.stat-box .trend { font-size: 11px; font-weight: 800; color: var(--aqua-success); }

/* max-height 只是防异常长文的保险，正常 3 条全显（2026-09-16b：188px 会把第 3 条剪一半，
   overflow:hidden 改 auto —— 铁律 6「超长交给内部滚动」本来就该滚而不是剪） */
.feed-list { display: grid; gap: 8px; max-height: 216px; overflow-y: auto; overflow-x: hidden; }
.feed-card {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px;
  padding: 9px 12px; border-radius: 14px;
  background: rgba(248,253,255,0.85);
  border: 1px solid rgba(184,229,247,0.55);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.act.active .feed-card { opacity: 1; transform: translateY(0); }
.feed-avatar {
  width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 13px;
  background: linear-gradient(135deg, #7fd0f6, var(--aqua-primary-deep));
}
.feed-text { font-size: 12.5px; line-height: 1.4; color: var(--aqua-ink-2); }
/* 用户名不继承 .feed-text 的 12.5px（DOM 里它是 feed-text 的兄弟节点 → 一路继承到根字号
   16px，2026-09-16 用户反馈「用户名字体太大」）→ 显式给字号：比正文略大半档表强调。
   line-height:1.25 —— 名字行盒此前继承 body 大行高（13px×1.5+），用户名上方浮着 ~4px
   空白（2026-09-16 用户反馈「胶囊用户名上方还有空白」），收紧后名字贴卡片顶。 */
.feed-name { font-size: 13px; line-height: 1.25; font-weight: 800; color: var(--aqua-foreground); margin-right: 6px; }
.feed-stars { color: var(--aqua-warning); font-size: 11px; letter-spacing: 1px; line-height: 1.25; }

/* ---------- 2026-09-16b 用户反馈面板收拢（用户三点诉求） ----------
   ① 保密提示胶囊与标题同行：panel-title 是 flex 块会独占一行 → 在第二幕范围把它改
      inline-flex，后面的 rank-tip（同为 inline-flex）自然接在同一行；榜单面板的
      title 后面是块级 rank-list，不受影响。tip 放不下时自动掉行兜底。
   ② 评分/人数胶囊压到两行：num 独占一行，lbl 与 trend（原本两个 div 各占一行、共 3 行）
      转 inline 合并到同一行 → 胶囊省一整行，反馈列表多出 ~14px。 */
.act2-grid .panel .panel-title { display: inline-flex; vertical-align: middle; }
.act2-grid .panel .rank-tip { margin: 0 0 10px 10px; vertical-align: middle; }
.act2-grid .stat-box .lbl { display: inline; margin: 0; line-height: 1.35; }
.act2-grid .stat-box .trend { display: inline; margin-left: 3px; line-height: 1.35; white-space: nowrap; }
.act2-grid .stat-box .trend svg { vertical-align: -1px; }

/* ---------- 第三幕：总奖金 ---------- */
.bonus-card {
  position: relative;
  justify-self: center;
  width: min(620px, 90%);
  padding: 30px 34px 28px;
  text-align: center;
  overflow: hidden;
}
.bonus-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg at 50% 120%, rgba(242,184,75,0.18), transparent 40%, rgba(79,183,238,0.16) 70%, transparent);
  pointer-events: none;
}
.bonus-label {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 16px; border-radius: 999px;
  font-weight: 900; font-size: 13px; color: #b97a14;
  background: rgba(242,184,75,0.18);
  border: 1px solid rgba(242,184,75,0.4);
}
.bonus-amount {
  position: relative;
  margin: 14px 0 4px;
  font-family: var(--font-num);
  font-weight: 900; font-size: 66px; line-height: 1;
  background: linear-gradient(180deg, #ffcf6e, #ef9f2a 60%, #d9820f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 22px rgba(239,159,42,0.35));
}
.bonus-amount .cur { font-size: 34px; margin-right: 4px; }
.bonus-break {
  position: relative;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 18px;
}
.break-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--aqua-ink-2);
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(184,229,247,0.7);
}
.break-chip b { color: var(--aqua-primary-deep); font-family: var(--font-num); }
/* 奖金卡底部小字（游戏补充，demo 无：玩家需要知道账上余额） */
.bonus-fund {
  position: relative;
  margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--aqua-ink-3);
}
.bonus-fund b { font-family: var(--font-num); color: var(--aqua-primary-deep); }

/* 金币 / 粒子（demo spawnParticles：卡片内喷发，无 canvas） */
.coin {
  position: absolute; top: -40px;
  width: 16px; height: 16px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff2cf, var(--aqua-warning) 55%, #d9820f);
  box-shadow: 0 4px 10px -3px rgba(217,130,15,0.7);
  opacity: 0;
}
.confetti {
  position: absolute; top: -20px;
  width: 9px; height: 14px; border-radius: 2px;
  opacity: 0;
}

/* ---------- 工程师词条升级模块（2026-09-12 二改：右侧竖列 + 翻页）----------
   第三幕改为左右并排（左=奖金卡 / 右=升级竖列），每页 3 人；不再竖向挤爆第三幕 */
.act3-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px;
  align-items: stretch; justify-content: center;
}
.upgrade-panel {
  justify-self: stretch; width: auto;
  padding: 12px 14px 12px;
  display: flex; flex-direction: column;
}
.upgrade-panel .panel-title { margin: 0 0 8px; font-size: 13px; }
.upgrade-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.upgrade-list.vertical {
  grid-template-columns: 1fr;
  gap: 8px;
  flex: 1; align-content: start;
}
.upgrade-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--aqua-line);
}
.upg-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--aqua-border); background: #fff;
  font-size: 11px; font-weight: 800; color: var(--aqua-primary-deep);
}
.upg-btn:hover:not(:disabled) { background: var(--aqua-primary-soft); }
.upg-btn:disabled { opacity: 0.4; cursor: default; }
.upg-pageno { font-family: var(--font-num); font-size: 11px; font-weight: 900; color: var(--aqua-ink-2); }
.upgrade-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px; row-gap: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(248,253,255,0.85);
  border: 1px solid rgba(184,229,247,0.6);
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.act.active .upgrade-item { opacity: 1; transform: translateY(0) scale(1); }
.up-avatar {
  grid-row: 1 / span 2;
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  overflow: hidden;
  color: #fff; font-weight: 900; font-size: 15px;
  box-shadow: 0 8px 16px -10px rgba(23,50,77,0.5);
}
.up-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 头像底色按岗位语义类（demo 的内联渐变转语义，颜色全走变量/语义渐变） */
.up-avatar.role-pretrain, .up-avatar.role-academic { background: linear-gradient(135deg, #8fd8f8, var(--aqua-primary-deep)); }
.up-avatar.role-post, .up-avatar.role-safety { background: linear-gradient(135deg, #7fd6b0, #3fa47a); }
.up-avatar.role-data { background: linear-gradient(135deg, #ffd98a, #ef9f2a); }
.up-info { display: grid; gap: 2px; min-width: 0; }
.up-name { font-size: 12px; font-weight: 800; color: var(--aqua-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-trait {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--aqua-primary-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 等级流转单独占第二行，避免与姓名/词条文字重叠 */
.lv-flow {
  grid-column: 2;
  display: inline-flex; align-items: center; gap: 5px;
  justify-self: start;
}
.lv-badge {
  font-family: var(--font-num);
  font-weight: 900; font-size: 11px;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
.lv-badge.old {
  color: var(--aqua-ink-3);
  background: var(--aqua-surface-3);
  border: 1px solid rgba(184,229,247,0.8);
}
.lv-arrow { display: inline-flex; width: 14px; height: 14px; color: var(--aqua-warning); }
.lv-badge.new {
  color: #fff;
  background: linear-gradient(135deg, #ffcf6e, #ef9f2a);
  box-shadow: 0 8px 16px -10px rgba(239,159,42,0.95);
}
/* 新等级徽章在升级项入场后再弹一下，突出「升级」 */
.act.active .lv-badge.new { animation: lvPop .55s cubic-bezier(.22,1.5,.36,1) both; animation-delay: .55s; }
@keyframes lvPop {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- 窄屏：双栏改单列，只改排布不改字号（铁律 6：字号固定 rem 永不缩放） ---------- */
@media (max-width: 720px) {
  .chart-card { grid-template-columns: 1fr; }
  .chart-side { align-content: start; }
  .act2-grid { grid-template-columns: 1fr; }
  .upgrade-list { grid-template-columns: 1fr; }
  .reward-shell .island-topbar { width: calc(100% - 44px); }
  .stage-close { right: -40px; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .aqua-shell *, .aqua-shell *::before, .aqua-shell *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ⑭ 爆发状态：工程师头像燃烧（2026-09-05 粒子火焰重做，用户反馈旧渐变火苗太简陋）
    谁体力攒够了谁才爆（按岗位槽判定）：头像高亮 + 8 个火苗粒子从头像轮廓升起，
    橙红外壳 + 黄亮内心，错峰循环（id 哈希确定性参数），只在 .bursting 时显示。 */
.emp-marker.bursting .emp-avatar {
  overflow: visible;
  border-color: #ffd76e;
  box-shadow: 0 0 0 3px rgba(255, 150, 60, 0.45), 0 0 18px -2px rgba(255, 140, 40, 0.85);
}
.emp-marker.bursting .emp-avatar::before {
  content: "";
  position: absolute; inset: -22%;
  z-index: 2; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 138, 0.55) 0 30%, rgba(255, 150, 45, 0.28) 55%, transparent 72%);
  animation: burstGlow 0.55s ease-in-out infinite alternate;
}
@keyframes burstGlow {
  from { opacity: 0.55; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.1); }
}
/* 火苗粒子层：挂在 .emp-marker 内（模板常驻），bursting 时才显示 */
.flame-fx {
  display: none;
  position: absolute;
  left: 50%; bottom: 58%;
  width: 0; height: 0;
  z-index: 3; pointer-events: none;
}
.emp-marker.bursting .flame-fx { display: block; }
.flame-p {
  position: absolute;
  bottom: 0; left: calc(var(--xl, 0px) - var(--sz, 8px) / 2);
  width: var(--sz, 8px); height: calc(var(--sz, 8px) * 1.4);
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 50% 76%,
    #fff6d8 0 18%, #ffd24a 44%, #ff8a1e 70%, rgba(255, 90, 10, 0) 76%);
  filter: blur(0.3px);
  opacity: 0;
  transform: translate(0, 0) scale(0.5);
  animation: flameRise var(--dur, 0.7s) linear infinite;
  animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
@keyframes flameRise {
  0% { transform: translate(0, 8px) scale(0.5); opacity: 0; }
  16% { opacity: 1; }
  55% { transform: translate(calc(var(--dx, 0px) * 0.6), -30px) scale(1.05); }
  100% { transform: translate(var(--dx, 0px), -58px) scale(0.12); opacity: 0; }
}
.emp-marker.bursting .emp-name {
  color: #b45309; font-weight: 900;
  background: linear-gradient(135deg, #ffe9a8, #ffc24b);
  border-color: rgba(255, 194, 75, 0.9);
}
.emp-marker.bursting .emp-stamina { color: #ff8a3d; font-weight: 900; }

/* ⑮ 昼夜渐变：办公场景随时间天黑 / 天亮（2026-09-04）
   只压暗**背景**，不碰员工头像、通知卡片与面板——遮罩挂在 .office-overlay 之后、
   .notice-stack / .employee-markers 之前，靠 DOM 顺序天然压在背景之上、UI 之下。
   opacity 由 GameUI.updateDayNight() 每秒按真实时间插值写入（不是每 tick 硬跳一档）。 */
.office-night {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s linear;          /* 兜底平滑；主平滑由逐秒插值保证 */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(90, 120, 200, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(14, 24, 54, 0.72) 0%, rgba(9, 15, 34, 0.88) 100%);
}

/* ==========================================================================
   ⑯ 评审演出 · 两套题型皮肤（2026-09-05，doc/17 方案 v2）
     skin-terminal：代码题 → CMD 终端（蓝色半透明投影 + 白色等宽字）
     skin-reader  ：长文本题 → 长文阅读台（容量条 + 原文 + 作答 + 长文本指标）
   两套都遵守《UI设计与落地规范》：颜色走 --aqua-* 变量 / 尺寸用 rem / 数字走 --font-num，
   高度一律用 clamp() 做响应式，小屏自动压缩，**绝不撑破一屏**。
   ========================================================================== */
.evalshow-card.skin-terminal,
.evalshow-card.skin-reader {
  justify-content: flex-start;      /* 气泡皮肤是居中，这两套内容靠上排 */
  gap: 10px;
}
/* 2026-09-08：答题区放大两倍 → 终端/阅读台卡片也加高，作答区不再被压成一条
   2026-09-09：立绘/头像/字号一起放大 → 卡片再各加高一档 */
.evalshow-card.skin-terminal { height: 500px; }
.evalshow-card.skin-terminal .evalshow-fb { max-height: 340px; }
.evalshow-card.skin-reader { max-width: 660px; height: 560px; }
.evalshow-card.skin-reader .evalshow-fb { max-height: 300px; }
.evalshow-stage.has-reader { max-width: 700px; }

/* ---------- 皮肤 B · CMD 终端（代码题）---------- */
/* 题面 = 一行命令（等宽、左对齐，像刚敲进去的） */
.skin-terminal .term-cmd {
  width: 100%;
  font-family: "Consolas", "Monaco", var(--font-num), monospace;
  font-size: 0.72rem;
  color: var(--aqua-foreground);
  background: var(--aqua-surface-3);
  border: 1px solid var(--aqua-border);
  border-radius: 8px;
  padding: 5px 9px;
  word-break: break-all;
}
/* 屏幕区：蓝色半透明投影（holo 默认） */
.skin-terminal .term-screen {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--aqua-primary-deep);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, rgba(45,140,200,.94), rgba(24,92,145,.96));
  box-shadow: inset 0 0 22px rgba(9,32,54,.35);
  color: #eaf6ff;
  font-family: "Consolas", "Monaco", var(--font-num), monospace;
}
/* 备用主题：白底 + 蓝绿字（EVAL_SKIN.code.theme = "light"） */
.skin-terminal.theme-light .term-screen {
  background: #fff;
  border-color: var(--aqua-border);
  color: #0f7d72;
  box-shadow: inset 0 0 0 1px rgba(15,125,114,.12);
}
.skin-terminal.theme-light .tc-no { color: #9db8c4; }
.skin-terminal.theme-light .term-panel { border-top-color: var(--aqua-border); }
.skin-terminal.theme-light .tp-k { color: var(--aqua-ink-2); }
/* 代码区：逐行刷出（CSS stagger，无定时器，切题自动重置） */
.skin-terminal .term-code {
  max-height: clamp(150px, 26vh, 240px);
  overflow-y: auto;
  padding: 7px 9px;
  font-size: 0.78rem;
  line-height: 1.5;
}
.skin-terminal .tc-line {
  display: flex;
  gap: 8px;
  white-space: pre-wrap;
  word-break: break-all;
  animation: termLineIn 0.18s ease both;
}
.skin-terminal .tc-no {
  flex: 0 0 14px;
  text-align: right;
  color: rgba(234,246,255,.45);
  user-select: none;
}
.skin-terminal .tc-txt { flex: 1; }
@keyframes termLineIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}
/* 结果面板：编译 / 测试用例 / BUG / 判定 */
.skin-terminal .term-panel {
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 6px 9px 8px;
  font-size: 0.68rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skin-terminal .tp-row { display: flex; align-items: center; gap: 7px; }
.skin-terminal .tp-k { flex: 0 0 auto; opacity: .8; }
.skin-terminal .tp-ok { color: #7ef0c0; font-weight: 800; }
.skin-terminal .tp-dim { opacity: .55; }
.skin-terminal .tp-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.skin-terminal .tp-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ee7b7, #34d399);
  animation: tpBarGrow 0.5s cubic-bezier(.22,1,.36,1) both;
}
.skin-terminal.theme-light .tp-bar { background: var(--aqua-surface-3); }
@keyframes tpBarGrow { from { width: 0 !important; } }
.skin-terminal .tp-num { font-family: var(--font-num); font-weight: 800; }
.skin-terminal .tp-bug {
  color: #ffd7a8;
  line-height: 1.45;
  word-break: break-word;
}
.skin-terminal.theme-light .tp-bug { color: #b4690e; }
.skin-terminal .tp-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 900;
}
.skin-terminal .tp-verdict.ok { background: rgba(52,211,153,.22); color: #7ef0c0; }
.skin-terminal .tp-verdict.fail { background: rgba(255,167,84,.2); color: #ffd7a8; }
.skin-terminal.theme-light .tp-verdict.ok { background: #e7f7f1; color: #0f7d72; }
.skin-terminal.theme-light .tp-verdict.fail { background: #fff3e4; color: #b4690e; }
.skin-terminal .tp-rate { font-family: var(--font-num); font-weight: 700; opacity: .85; }

/* ---------- 皮肤 C · 长文阅读台（长文本题）---------- */
/* 题面区：容量条 + 原文材料 + 问题，三行纵向，避免窄容器里左右分栏被挤爆 */
.skin-reader .reader-src {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skin-reader .rb-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  color: var(--aqua-ink-2);
}
.skin-reader .rb-label { flex: 0 0 auto; font-weight: 700; }
.skin-reader .rb-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--aqua-surface-3);
  overflow: hidden;
}
.skin-reader .rb-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-deep));
}
.skin-reader .rb-num { font-family: var(--font-num); color: var(--aqua-primary-deep); }
.skin-reader .reader-material {
  height: clamp(110px, 20vh, 150px);
  overflow-y: auto;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--aqua-surface);
  border: 1px dashed var(--aqua-border);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--aqua-ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.skin-reader .reader-ask {
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--aqua-primary-soft);
  color: var(--aqua-foreground);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}
/* 作答区：打字机输出，超出滚动 */
.skin-reader .reader-out {
  width: 100%;
  height: clamp(150px, 26vh, 230px);
  overflow-y: auto;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--aqua-surface-3);
  border: 1px solid var(--aqua-border);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--aqua-foreground);
  white-space: pre-wrap;
  word-break: break-word;
}
.skin-reader .reader-out.fail { border-color: var(--aqua-error); background: #fff5f6; }
.skin-reader .ro-wait { color: var(--aqua-ink-3); }
/* 长文本专属指标 */
.skin-reader .reader-metrics {
  width: 100%;
  display: flex;
  gap: 6px;
  font-size: 0.64rem;
}
.skin-reader .rm-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px;
  border-radius: 8px;
  background: var(--aqua-surface);
  border: 1px solid var(--aqua-border);
}
.skin-reader .rm-k { color: var(--aqua-ink-3); }
.skin-reader .rm-item b {
  font-family: var(--font-num);
  font-size: 0.76rem;
  color: var(--aqua-primary-deep);
}
.skin-reader .rm-item b.ok { color: var(--aqua-success); }
.skin-reader .rm-item b.fail { color: var(--aqua-error); }

/* 窄屏：两套皮肤都再压一点高度，保证一屏可见（字号不变，只收容器）
   2026-09-08：答题框整体放大后，这里只做温和收缩（不再压回原来的一条）。 */
@media (max-height: 700px) {
  /* 气泡皮肤也收一档（2026-09-09：卡片加高后窄屏要能一屏放下） */
  .evalshow-card { height: 430px; }
  .evalshow-card .evalshow-role { height: 128px; }
  .evalshow-card .evalshow-bub-q { top: 146px; }
  .evalshow-card.skin-terminal { height: 440px; }
  .evalshow-card.skin-reader { height: 480px; }
  .skin-terminal .term-code { max-height: 130px; }
  .skin-reader .reader-material { height: 96px; }
  .skin-reader .reader-out { height: 130px; }
}

/* 节点提示 · 立绘（2026-09-05）：OFFICE_HINTS 配了 avatar 才显示，没配维持原样。
   立绘贴卡片左下（底部对齐，像从卡片后探头），文字区让出宽度。 */
.notice-card .nc-flex { display: flex; gap: 10px; align-items: flex-end; }
.notice-card .nc-flex .nc-main { flex: 1; min-width: 0; }
.notice-card .nc-avatar {
  flex: 0 0 auto;
  width: auto;
  height: clamp(64px, 9vh, 84px);
  object-fit: contain;
  object-position: bottom;
  margin: -6px 0 -14px -4px;      /* 让立绘略微探出卡片底边，更有"探头"感 */
  filter: drop-shadow(0 4px 8px rgba(23, 50, 77, 0.25));
  pointer-events: none;
  user-select: none;
}

/* ==========================================================
   阶段任务目标卡片（doc/23 · 2026-09-07）
   立项面板顶部常驻：达成 = 绿，暂缓 = 橙，结算口径一眼可见
   ========================================================== */
.mission-card {
  border: 1.5px solid var(--aqua-line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--aqua-surface-2);
}
.mission-card.hit { border-color: #53b98d; background: #eefaf4; }
.mission-card.miss { border-color: #f2b84b; background: #fff8ea; }
.mission-card .mc-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 900; color: var(--aqua-foreground);
}
.mission-card .mc-icon {
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 50%; font-size: 12px; color: #fff; flex: 0 0 18px;
}
.mission-card.hit .mc-icon { background: #53b98d; }
.mission-card.miss .mc-icon { background: #f2b84b; }
.mission-card .mc-state { margin-left: auto; font-size: 12px; font-weight: 900; white-space: nowrap; }
.mission-card.hit .mc-state { color: #2f9e6e; }
.mission-card.miss .mc-state { color: #c98a1e; }
/* 任务内容：标题一行 + 内容一行（过长自然换行），字号不再压到看不清 */
.mission-card .mc-desc,
.mission-card .mc-req {
  font-size: 12.5px; line-height: 1.6; color: var(--aqua-ink-2); margin-top: 5px;
}
/* 内容后面的括号提醒 */
.mission-card .mc-remind { color: var(--aqua-primary-deep); font-weight: 700; }
.mission-card.hit .mc-remind { color: #2f9e6e; }
.mission-card.miss .mc-remind { color: #c98a1e; }
.mission-card .mc-req { font-weight: 700; }

/* ==========================================================
   模型库（图鉴）（doc/24 · 2026-09-07）
   入口：「设置 / 菜单」弹窗 → 📖 模型库
   ========================================================== */
.codex-card { width: min(560px, 94vw); }
.cdx-stat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cdx-stat-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--aqua-ink-2);
  background: var(--aqua-surface-2); border: 1px solid var(--aqua-line);
}
.cdx-stat-item b { font-family: var(--font-num); font-weight: 900; color: var(--aqua-primary-deep); }
.cdx-stat-item.gold { background: #fff8e2; border-color: rgba(216, 160, 42, 0.4); color: #8a5a00; }
.cdx-stat-item.gold b { color: #c0721c; }
.cdx-stat b { color: var(--aqua-foreground); }
.cdx-grid { display: grid; gap: 4px; margin-bottom: 6px; }
.cdx-hc, .cdx-hr {
  font-size: 11px; font-weight: 900; color: var(--aqua-ink-2);
  display: flex; align-items: center;
}
.cdx-hc { justify-content: center; }
.cdx-cell {
  border: 1.5px solid var(--aqua-line); border-radius: 8px; background: var(--aqua-surface);
  min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: var(--aqua-foreground); line-height: 1.2;
}
.cdx-cell i { font-size: 10px; font-weight: 400; color: var(--aqua-ink-3); font-style: normal; }
.cdx-cell.exc { border-color: #f2b84b; background: #fff8ea; }
/* DOC 26 P2 四档配色：合格蓝 / 优秀紫 / 顶尖金 / 不及格灰红 */
.cdx-cell.top { border-color: #d4a017; background: linear-gradient(180deg,#fff6dc,#ffe9a8); }
.cdx-cell.top b { color: #9c6f00; }
.cdx-cell.fl, .cdx-cell.vt { border-color: #e07a7a; background: #fdeeee; color: #b04040; }
.cdx-cell.off { opacity: 0.28; filter: saturate(0.3); }
.cdx-log-vd.v-top { color: #9c6f00; font-weight: 900; }
.cdx-log-vd.fl, .cdx-log-vd.vt { color: var(--aqua-error); font-weight: 900; }
.codex-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cdx-pager { display: flex; align-items: center; gap: 8px; }
.cdx-cell.locked { color: var(--aqua-ink-3); background: var(--aqua-surface-3); font-weight: 400; }
.cdx-log { max-height: 168px; overflow-y: auto; }
.cdx-log-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-bottom: 1px solid var(--aqua-line); font-size: 12px;
}
.cdx-log-row:last-child { border-bottom: 0; }
.cdx-log-ver {
  flex: 0 0 40px; font-family: var(--font-num); font-weight: 900;
  color: var(--aqua-primary-deep);
}
.cdx-log-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 800; color: var(--aqua-foreground);
}
.cdx-log-arch { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--aqua-ink-2); }
.cdx-log-score { flex: 0 0 auto; font-family: var(--font-num); font-weight: 900; color: var(--aqua-foreground); }
.cdx-log-vd {
  flex: 0 0 auto; padding: 1px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 900; color: #fff; background: #4a9ad4;
}
.cdx-log-vd.v-pass { background: var(--aqua-success); }
.cdx-log-vd.v-excellent, .cdx-log-vd.exc { background: #9b87f5; }
.cdx-log-vd.v-top, .cdx-log-vd.top { background: linear-gradient(135deg, #f4c14a, #d4a017); }
.cdx-log-vd.v-fail, .cdx-log-vd.v-veto { background: var(--aqua-error); }
.cdx-empty { font-size: 12px; color: var(--aqua-ink-3); padding: 10px 0; }

/* 立项后回顾用的任务状态小字（doc/23） */
.om-done .mc-hit { color: #2f9e6e; font-style: normal; font-weight: 900; }
.om-done .mc-miss { color: #c98a1e; font-style: normal; font-weight: 900; }
/* 目标卡片「配置已固定」态：本阶段架构与参数没得选（如 V1），不显示绿色"符合"，避免观感白给 */
.mission-card.fixed { border-color: #7bc2ee; background: var(--aqua-surface-2); }
.mission-card.fixed .mc-icon { background: #7bc2ee; }
.mission-card.fixed .mc-state,
.mission-card.fixed .mc-remind { color: #2789c4; }
/* 扩编招聘 · 多岗位勾选（2026-09-07 用户：一次需求可同时要多个岗位） */
.hire-role { cursor: pointer; transition: border-color .15s, background .15s; }
.hire-role.on { border-color: #f2b84b; background: rgba(255, 248, 234, 0.95); }
.hr-tick { margin-left: 6px; font-style: normal; color: #2f9e6e; font-weight: 900; }
.hr-pick { font-size: 0.72rem; color: #8aa6ba; }
.hire-role.on .hr-pick { color: #c98a1e; font-weight: 900; }
.hire-bar { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* 寻访进度条（2026-09-08：替换「还需 1 周」的干巴巴文字，让进度看得见） */
.hire-status .hs-bar {
  height: 6px; border-radius: 999px; overflow: hidden; margin: 7px 0 5px;
  background: var(--aqua-surface-3);
}
.hire-status .hs-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--aqua-primary), var(--aqua-primary-deep));
  transition: width 0.35s ease;
}
/* 论文分页（2026-09-08 用户要求：每页 2 篇，多的翻页） */
.paper-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 0 2px;
}
.paper-page-btn {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid #e8dcc4; background: #fdf8ee; color: #7a5820;
  display: grid; place-items: center;
}
.paper-page-btn:disabled { opacity: 0.4; cursor: default; }
.paper-page-info { font-family: var(--font-num); font-size: 12px; font-weight: 900; color: #7a5820; }

/* ==========================================================================
   追加能力轴 · P3 界面（doc/27 §13.9 · 2026-09-10）
   图鉴格子短标 / 第三幕结算块 / 攻关轴方向 —— 全部复用既有视觉语言
   （glass-card、panel-title、四象限卡同款边框与圆角），不新造容器
   ========================================================================== */
/* ① 图鉴格子：轴短标（记 / 推 / 工），不改变格子版式 */
.cdx-cell .cdx-ax {
  display: block; margin-top: 1px;
  font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: 0.5px;
  color: #6d5ce0; opacity: 0.9;
}
/* ② 第三幕 · 追加能力轴结算块（2026-09-11 改紧凑胶囊：一行三枚，总高 ~70px）
   原因：原「一行一卡 + 两行文字」三根轴 204px，第三幕放不下 → 与底部按钮重叠 -31px。
   样式沿用既有语言（glass-card + panel-title + 胶囊），不新造容器 */
/* 轴胶囊：**公用**（第三幕结算 + 评审界面都用它）—— 紧凑一行，不撑高容器。
   2026-09-11：评审面板正文是 overflow:hidden，轴原来按 3 条全宽行渲染 → 溢出 90px 被裁掉；
   和第三幕同一个病（那条是与页脚重叠 -31px）。现在两处统一用胶囊。 */
.axis-pills { display: flex; gap: 8px; }
.axis-pill {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(155, 224, 245, 0.12); border: 1px solid rgba(184, 229, 247, 0.65);
}
.axis-pill .ap-ic { display: inline-flex; flex-shrink: 0; color: #6d5ce0; }
.axis-pill .ap-name { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--aqua-ink-2); }
.axis-pill .ap-num { flex-shrink: 0; font-family: var(--font-num); font-size: 12px; font-weight: 900; color: #6b7a88; }
.axis-pill.ok .ap-num { color: #2f9e6e; }
.axis-pill .ap-num i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--aqua-ink-3); }
.axis-pill .ap-bar { flex: 1; min-width: 18px; height: 5px; border-radius: 999px; background: var(--aqua-surface-3); overflow: hidden; }
.axis-pill .ap-bar i { display: block; height: 100%; border-radius: 999px; }
.bonus-axis { margin-top: 12px; }
/* ③ 攻关 · 追加轴方向（与四象限卡同款观感，但排成一行） */
.focus-axis-title {
  margin: 12px 0 8px; text-align: center;
  font-size: 12px; font-weight: 900; color: #4a8cb8;
}
.focus-axis-row { display: flex; gap: 10px; justify-content: center; }
.focus-axis-card {
  flex: 1 1 0; min-width: 0; padding: 10px 8px; border-radius: 14px;
  border: 2px solid #e0dcf5; background: #fff; text-align: center; cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.focus-axis-card:hover { transform: scale(1.03); box-shadow: 0 8px 24px -8px rgba(155, 135, 245, 0.4); }
.focus-axis-card.selected {
  transform: scale(1.05); border-color: #6d5ce0;
  background: linear-gradient(135deg, #f8f6ff, #f0ebff);
  box-shadow: 0 10px 28px -8px rgba(109, 92, 224, 0.5);
}
.focus-axis-card .fa-icon { font-size: 18px; line-height: 1.2; }
.focus-axis-card .fa-name { margin-top: 2px; font-size: 12px; font-weight: 900; color: #3c3489; }
.focus-axis-card .fa-bonus { margin-top: 2px; font-family: var(--font-num); font-size: 13px; font-weight: 900; color: #6d5ce0; }
.focus-axis-card .fa-dur { font-size: 10px; font-weight: 700; color: #8aa0b2; }
/* 结算页 · 轴未达标提示（doc/27 P4） */
.dg-over-axis-tip {
  margin: 0 auto 0.6rem; max-width: 30rem; padding: 0.5rem 0.8rem;
  border-radius: 10px; text-align: center;
  background: rgba(250, 238, 218, 0.75); border: 1px dashed #e0b060;
  font-size: 0.76rem; font-weight: 700; color: #8a6010;
}

/* ==========================================================================
   模型库 · 卡牌列表（2026-09-11 按用户要求重做，替换原「架构×参数」矩阵网格）
   规则：只收录通过评审的组合 / 参数升序 / 每页 4 张 / 卡牌质感 / 核心信息铺开
   ========================================================================== */
/* ==========================================================================
   模型卡（2026-09-12 用户要求「像一张真正的卡片、档次有质感区分」）：
   · 合格 = 清透蓝（本命色）；优秀 = 紫（DOC 26 P2 配色：合格蓝/优秀紫/顶尖金）；
   · 顶尖 = 金 + 流光扫过（sheen 动画），像一张闪卡。
   ========================================================================== */
/* ==========================================================================
   模型卡（2026-09-12 二改：竖版卡牌 + 品质花纹外框）
   · 竖版比例（aspect-ratio 3/4.35），信息竖排——像一张真的收藏卡
   · 外框 = 9px 饰边层：档位底色 + 双向斜纹底图花纹，品质感从框上读
     （合格蓝 / 优秀紫 / 顶尖金+流光）
   ========================================================================== */
.cdx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
/* 翻页动画（2026-09-13 用户要求）：**只让卡片区动**，不再整页重刷。
   方向由 JS 写 --cdx-dir（下一页从右进、上一页从左进）。 */
.cdx-cards.flip { animation: cdxFlip 0.32s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes cdxFlip {
  from { opacity: 0; transform: translateX(var(--cdx-dir, 16px)); }
  to   { opacity: 1; transform: none; }
}
.cdx-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 9px; border-radius: 16px;
  aspect-ratio: 3 / 4.2; display: flex;
  background-image:
    conic-gradient(from 40deg at 18% 24%, rgba(255,255,255,.55) 0 25%, transparent 25%),
    conic-gradient(from 205deg at 72% 14%, rgba(23,50,77,.18) 0 25%, transparent 25%),
    conic-gradient(from 130deg at 32% 66%, rgba(255,255,255,.4) 0 25%, transparent 25%),
    conic-gradient(from 310deg at 84% 78%, rgba(23,50,77,.14) 0 25%, transparent 25%),
    conic-gradient(from 80deg at 55% 42%, rgba(255,255,255,.32) 0 25%, transparent 25%),
    linear-gradient(160deg, #cfeafc 0%, #8ec9ec 100%);
  background-size: 44px 40px, 62px 54px, 54px 62px, 70px 46px, 38px 44px, 100% 100%;
  border: 1px solid rgba(39, 137, 196, 0.4);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cdx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.cdx-card-inner {
  flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 10px 11px; border-radius: 10px;
  background: linear-gradient(170deg, #ffffff 0%, #f4fbff 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
.cdx-card.exc {
  border-color: rgba(155, 135, 245, 0.55);
  background-image:
    conic-gradient(from 40deg at 18% 24%, rgba(255,255,255,.55) 0 25%, transparent 25%),
    conic-gradient(from 205deg at 72% 14%, rgba(60,40,120,.22) 0 25%, transparent 25%),
    conic-gradient(from 130deg at 32% 66%, rgba(255,255,255,.4) 0 25%, transparent 25%),
    conic-gradient(from 310deg at 84% 78%, rgba(60,40,120,.16) 0 25%, transparent 25%),
    conic-gradient(from 80deg at 55% 42%, rgba(255,255,255,.32) 0 25%, transparent 25%),
    linear-gradient(160deg, #ece5ff 0%, #b7a4f2 100%);
  background-size: 44px 40px, 62px 54px, 54px 62px, 70px 46px, 38px 44px, 100% 100%;
}
.cdx-card.exc .cdx-card-inner { background: linear-gradient(170deg, #fdfcff 0%, #f3efff 100%); }
.cdx-card.exc .cdx-vd { background: #9b87f5; }
.cdx-card.exc .cdx-card-score b { color: #7a63d8; }
.cdx-card.top {
  border-color: rgba(216, 160, 42, 0.65);
  background-image:
    conic-gradient(from 40deg at 18% 24%, rgba(255,255,255,.6) 0 25%, transparent 25%),
    conic-gradient(from 205deg at 72% 14%, rgba(150,100,10,.22) 0 25%, transparent 25%),
    conic-gradient(from 130deg at 32% 66%, rgba(255,255,255,.42) 0 25%, transparent 25%),
    conic-gradient(from 310deg at 84% 78%, rgba(150,100,10,.16) 0 25%, transparent 25%),
    conic-gradient(from 80deg at 55% 42%, rgba(255,255,255,.34) 0 25%, transparent 25%),
    linear-gradient(160deg, #fff3cd 0%, #e8b84b 100%);
  background-size: 44px 40px, 62px 54px, 54px 62px, 70px 46px, 38px 44px, 100% 100%;
  box-shadow: 0 12px 26px -16px rgba(180, 130, 20, 0.6);
}
.cdx-card.top .cdx-card-inner { background: linear-gradient(170deg, #fffdf4 0%, #fff6d8 100%); }
.cdx-card.top .cdx-vd { background: linear-gradient(135deg, #f4c14a, #d4a017); }
.cdx-card.top .cdx-card-score b { color: #c0721c; }
/* 顶尖流光：一道高光斜向扫过卡面 */
.cdx-card.top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.8) 46%, rgba(255,226,130,.55) 52%, transparent 68%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: cdxSheen 3s ease-in-out infinite;
}
@keyframes cdxSheen {
  0% { background-position: 135% 0; }
  55% { background-position: -70% 0; }
  100% { background-position: -70% 0; }
}
.cdx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cdx-card-name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 900; color: var(--aqua-foreground); letter-spacing: 0.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdx-vd {
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 900; color: #fff; background: #4a9ad4;
  box-shadow: 0 2px 6px -3px rgba(23, 50, 77, 0.4);
}
.cdx-card.top .cdx-vd { background: linear-gradient(135deg, #f4c14a, #d4a017); }
.cdx-card-sub {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 3px 5px;
  font-size: 10px; line-height: 1.4; color: var(--aqua-ink-2);
  /* 2026-09-13 用户要求：「结构 · 参数 · 版本」**固定一行，不许换行**（换行会把整卡挤高，
     数值就没地方了）。名字太长时压缩文字而不是折行。 */
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.cdx-card-sub > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cdx-card-sub b { font-weight: 800; color: #2b6b96; }
.cdx-card-sub i { font-style: normal; color: var(--aqua-line); }
.cdx-card-score { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: 2px 0 1px; }
.cdx-card-score b { font-family: var(--font-num); font-size: 28px; font-weight: 900; line-height: 1; color: var(--aqua-pink-deep); }
.cdx-card-score small { font-size: 10px; font-weight: 700; color: var(--aqua-ink-3); }
/* 维度条（竖版卡）：2026-09-13 用户反馈「记忆往下的数值看不见了」——
   一列排不下 7 个维度（四维 + 三轴），改成**两列小格**：label 左、数值右，一行两个。 */
.cdx-card-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px; margin-top: 3px; }
.cdx-dim {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 2px 8px; border-radius: 7px;
  background: rgba(155, 224, 245, 0.18); font-size: 10px; font-weight: 700; color: #38607a;
}
.cdx-dim i { font-style: normal; color: #7d94a6; font-weight: 600; }
.cdx-dim b { font-family: var(--font-num); font-weight: 900; color: #1a5f8a; }
.cdx-dim.ax { background: rgba(155, 135, 245, 0.16); }
.cdx-dim.ax i { color: #7a6ea8; }
.cdx-dim.ax b { color: #5b4bb5; }
.cdx-card-times {
  margin-top: auto; text-align: center;
  font-size: 9px; font-weight: 800; color: var(--aqua-ink-3);
  border-top: 1px dashed var(--aqua-line); padding-top: 4px;
}


/* ==========================================================================
   聊天气泡里的多媒体 + COT（doc/29 §5，2026-09-11）
   · image/video：缩略图 → 点击全屏放大（视频带 controls 自动播）
   · audio：微信同款语音条（三弧图标 + 秒数，点击播放，播放中弧线跳动）
   · cot：气泡下方小字逐条播标识（比正文更小、更淡）
   ========================================================================== */
/* ⚠️ 2026-09-13 用户反馈「语音条放在了气泡里面」：
   以前只写了 .msg-bot.msg-media → **玩家自己发的语音/图片仍然套在蓝色气泡里**。
   媒体消息（图片 / 语音 / 链接卡）一律不带气泡，自己就是视觉主体；
   只保留对齐（发的靠右、她发的靠左）。 */
.msg-bot.msg-media, .msg-user.msg-media {
  padding: 0; background: none; border: none; box-shadow: none;
  max-width: 62%; color: inherit;
}
.chat-media-img {
  display: block; max-width: 100%; max-height: 190px; border-radius: 12px;
  cursor: zoom-in; border: 1px solid var(--aqua-border);
}
.chat-media-video {
  position: relative; display: inline-block; max-width: 100%; border-radius: 12px;
  overflow: hidden; cursor: zoom-in; border: 1px solid var(--aqua-border); background: #0d1520;
}
.chat-media-video video { display: block; max-width: 100%; max-height: 190px; }
.chat-media-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(12, 22, 34, 0.55); color: #fff; font-style: normal; pointer-events: none;
}
.chat-media-missing { font-size: 12px; color: var(--aqua-error); }
/* ---- 链接卡（2026-09-13 用户要求）：回复类型「链接」——
   点它**新建标签页**打开配置里填的真实网址（右上角一个小箭头示意"跳出去"）。 */
.chat-link-card {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, #eef7ff, #dcecfb); border: 1px solid var(--aqua-border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.chat-link-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(23, 50, 77, .55); }
.chat-link-ic { flex: none; display: inline-flex; color: #2b7fb8; }
.chat-link-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-link-title { font-size: 13px; font-weight: 800; color: #235573; word-break: break-all; }
.chat-link-host { font-size: 11px; color: #7b93a6; word-break: break-all; }
/* ---- 语音条（微信同款：左弧线 + 右秒数）---- */
.chat-voice {
  display: inline-flex; align-items: center; gap: 8px; min-width: 108px;
  padding: 9px 14px; border-radius: 14px; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, #eaf6ff, #d9ecfb); border: 1px solid var(--aqua-border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.chat-voice:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -8px rgba(23,50,77,.5); }
.chat-voice .cv-wave { flex: none; color: #2b7fb8; }
.chat-voice .cv-sec { font-size: 12px; font-weight: 800; color: #2b6b96; font-family: var(--font-num); }
.chat-voice.playing .cv-wave { animation: cvPulse .9s ease-in-out infinite; }
@keyframes cvPulse { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: .55; transform: scaleY(.8); } }
/* 语音字幕（默认关，走「＋」面板里的开关）：台词放在语音条**下面**一行，
   字号比气泡正文小（11px），颜色淡一档 —— 不抢语音条本身的注意力。 */
.chat-voice-cap {
  display: block; margin-top: 5px; font-style: normal; font-size: 11px; line-height: 1.5;
  color: var(--aqua-ink-2); word-break: break-word; animation: cotIn .24s ease both;
}
/* ---- COT：气泡下方的小字标识 ---- */
.msg-cot { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 4px 6px; }
.cot-step {
  display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.5;
  color: var(--aqua-ink-3); animation: cotIn .28s ease both;
}
.cot-step .cot-dot {
  width: 5px; height: 5px; border-radius: 999px; background: #7fb6de; flex: none;
  animation: cotBlink 1s ease-in-out infinite;
}
@keyframes cotIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes cotBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
/* ---- 图片/视频放大遮罩 ---- */
/* 2026-09-11 用户要求：底色改**白**、并**自动适配图片尺寸**（按原比例铺开，不裁不拉伸） */
.chat-zoom-mask {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: #ffffff; cursor: zoom-out; animation: zoomIn .16s ease both; padding: 24px; box-sizing: border-box;
}
.chat-zoom-mask img, .chat-zoom-mask video {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px -18px rgba(20, 40, 60, .45);
}
@keyframes zoomIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   底栏三件套 + 面板 + 居中状态流（doc/26 §1/§2/§3，2026-09-11）
   ⚠️ 设计稿是「去掉输入框」：中间那块是**按钮**（点击弹选项），不是输入框。
   ========================================================================== */
.chat-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--aqua-border); background: rgba(255,255,255,.72); }
.cb-main {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--aqua-border); background: #fff; color: var(--aqua-foreground);
  font-size: 13px; font-weight: 700; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cb-main:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(23,50,77,.5); }
.cb-main.cb-off { opacity: .5; cursor: default; }
.cb-side {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 10px; border-radius: 12px; cursor: pointer; border: 1px solid transparent;
  background: none; color: var(--aqua-ink-2); font-size: 10px; line-height: 1.2;
}
.cb-side i { font-style: normal; }
.cb-side:hover { background: rgba(155, 224, 245, .18); border-color: var(--aqua-border); }
.cb-side.cb-off { opacity: .4; }
/* 「＋」玩家工具按钮（2026-09-12）：左边「消息」按钮去掉后，这里只剩一个裸图标会显得又小又飘 ——
   改成和微信一样**带边框的方按钮**，与中间大按钮同高，整条底栏才平衡 */
.cb-side.cb-plus {
  width: 34px; height: 34px; padding: 0; justify-content: center;
  border: 1px solid var(--aqua-border); background: #fff; border-radius: 10px;
  color: #2b7fb8; transition: transform .12s ease, box-shadow .12s ease;
}
.cb-side.cb-plus:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(23,50,77,.5); background: #eaf6ff; }
/* 面板开着时 ＋ 转成 ×（转 135°）—— 一眼看出"再点一下收起"，也让点击有反馈 */
.cb-side.cb-plus .dg-ic { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.cb-side.cb-plus.on { background: #eaf6ff; border-color: #7fc4ec; }
.cb-side.cb-plus.on .dg-ic { transform: rotate(135deg); }
/* 面板（从底栏弹上来的一层） */
/* 面板（从底栏弹上来的一层）
   2026-09-12 用户：「点击加号以后要有展开的动画，现在直接切很生硬」
   → 展开 = **高度 + 内边距 + 淡入 + 上滑** 一起动（只动 opacity 会显得"凭空出现"；
     高度与内边距同步收放，才不会在起始那一刻残留一条 22px 的细边）。
   收起 = JS 走 `.cs-leaving`（把刚摘掉的那块按原高度放回流里缩到 0，见 renderChatBar）。 */
.chat-sheet { margin: 0 10px 6px; padding: 10px 12px; border: 1px solid var(--aqua-border); border-radius: 12px; background: #fff; max-height: 232px; overflow-y: auto; }
.chat-sheet.cs-open { animation: sheetOpen .2s cubic-bezier(.22,.61,.36,1) both; }
@keyframes sheetOpen {
  from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(6px); }
  to   { max-height: 232px; padding-top: 10px; padding-bottom: 10px; opacity: 1; transform: none; }
}
/* 面板里的条目再错开一点点上浮（2~11px 的层次感，比整块一起出现自然） */
.chat-sheet.cs-open > * { animation: csItem .22s cubic-bezier(.22,.61,.36,1) both; }
.chat-sheet.cs-open > *:nth-child(1) { animation-delay: .02s; }
.chat-sheet.cs-open > *:nth-child(2) { animation-delay: .05s; }
.chat-sheet.cs-open > *:nth-child(3) { animation-delay: .08s; }
.chat-sheet.cs-open > *:nth-child(4) { animation-delay: .11s; }
@keyframes csItem { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* 正在收起的那块：只剩残影，别接鼠标事件 */
.chat-sheet.cs-leaving { pointer-events: none; }
.chat-sheet .cs-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; color: var(--aqua-ink-3); margin: 6px 0 4px; }
.chat-sheet .cs-head:first-child { margin-top: 0; }
.cs-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; margin-bottom: 4px; border-radius: 10px; cursor: pointer; text-align: left; border: 1px solid var(--aqua-border); background: #f7fcff; color: var(--aqua-foreground); font-size: 13px; }
.cs-item:hover { background: #eaf6ff; }
.cs-item.cs-dim { opacity: .45; }
.cs-note { font-size: 12px; color: var(--aqua-ink-3); line-height: 1.6; padding: 2px 0; }
.cs-note-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; background: #f7fcff; margin-bottom: 4px; }
.cs-note-item b { font-size: 12px; color: var(--aqua-foreground); }
.cs-note-item span { font-size: 12px; color: var(--aqua-ink-2); }
.cs-back { padding: 1px 9px; border-radius: 999px; cursor: pointer; border: 1px solid var(--aqua-border); background: #fff; font-size: 11px; color: var(--aqua-ink-2); }
/* 2026-09-12（用户要求）：工具按钮压缩成微信同款小卡——不铺满整行、留空位给以后的工具 */
.cs-tools { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-tool {
  flex: 0 0 auto; min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px 7px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--aqua-border); background: #f7fcff; color: var(--aqua-foreground);
  font-size: 11px; font-weight: 700;
}
.cs-tool:hover { background: #eaf6ff; }
.cs-tool i { font-style: normal; color: #2b7fb8; }
.cs-tool em { font-style: normal; font-size: 9px; font-weight: 600; color: var(--aqua-ink-3); }
/* 系统状态条（doc/26 §3）：居中、小字、灰 —— 插在消息流里，结果出来后保留 */
.chat-sys { text-align: center; font-size: 11px; color: var(--aqua-ink-3); padding: 2px 0 3px; animation: sysIn .24s ease both; }
@keyframes sysIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   思考框 think（doc/34 §3.1）—— 「灰色是过程，黑色是结果，过程可看可不看」
   --------------------------------------------------------------------------
   与 .chat-sys（简略 cot / 工具状态流）的分工：
     · .chat-sys  = 居中独立一行、不可折叠、与环境等宽   → "她**正在**做什么"
     · .chat-think = 挂在某条回答上的灰底面板、可折叠   → "她**心里**想了什么"
   硬规矩复核（memory §3）：
     ① 本组件**没有**伪元素装饰层 ⇒ 不需要 pointer-events:none；
     ② 折叠靠 display:none，**不用 overflow:hidden** ⇒ 绕开「全局 overflow:visible 击穿」那个坑；
     ③ 不要碰全局 `.modal-body *:not(.test-messages){overflow:visible}`。
   ========================================================================== */
.msg-bot.msg-think { padding: 0; background: none; border: none; box-shadow: none; max-width: 92%; align-self: stretch; }
.chat-think {
  margin: 3px 0 6px; padding: 6px 10px 7px 9px;
  border-left: 2px solid var(--aqua-line); background: rgba(138, 166, 186, .10);
  border-radius: 0 10px 10px 0; cursor: pointer; animation: sysIn .24s ease both;
}
.chat-think-head { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--aqua-ink-3); user-select: none; }
.chat-think-head i { display: inline-flex; transition: transform .18s ease; }
.chat-think.collapsed .chat-think-head i { transform: rotate(0deg); }        /* ▸ 收起 */
.chat-think:not(.collapsed) .chat-think-head i { transform: rotate(90deg); } /* ▾ 展开 */
.chat-think-head:hover { color: var(--aqua-ink-2); }
.chat-think-body { margin-top: 4px; }
.chat-think.collapsed .chat-think-body { display: none; }
.chat-think-line { font-size: 11.5px; line-height: 1.72; color: var(--aqua-ink-3); transition: opacity .22s ease; }
.chat-think-line.hide { opacity: 0; }
/* 哼唱行（steps 以 ♪ 开头）—— doc/33 §3.15.2 的劳动号子 */
.chat-think-line.song { font-style: italic; color: var(--aqua-ink-2); letter-spacing: .01em; }

/* 图片下方的一句台词（doc/34 §4.6）：image 以前只有 <img>，配文全丢 */
.chat-media-fig { display: block; }
.chat-media-cap { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; line-height: 1.6; color: var(--aqua-ink-2); }

/* 2026-09-12：第一幕侧栏的追加能力轴行（从第三幕移入） */
.chart-side .side-row.ax .k { display: inline-flex; align-items: center; gap: 4px; }
.chart-side .side-row.ax .ax-line { font-style: normal; font-size: 9px; font-weight: 700; color: var(--aqua-ink-3); margin-left: 3px; }

/* ==========================================================================
   2026-09-13 · .modal-body 里的 .skew-btn 恢复 overflow:hidden
   --------------------------------------------------------------------------
   那条「二级界面禁止滚动条」的全局规则
     .modal-body *:not(.test-messages) { overflow: visible }
   特异性是 2（.modal-body + :not 里的类），**高于** .skew-btn 的 1 ——
   于是面板里所有倾斜按钮的 overflow:hidden 被击穿，扫光层 ::before（left:-72%）
   会**看得见地**跑到按钮外面去（滑动时尤其明显）。
   pointer-events:none 已经在 .skew-btn::before 上补齐（点击不会再被偷），
   这里再把裁剪还原 —— 视觉与命中框都回到「只在按钮内」。
   写法沿用本文件末尾「同特异性下顺序取胜」的老办法（同「吃瓜新闻页适配修正」）。
   ========================================================================== */
.modal-body .skew-btn { overflow: hidden; }

/* ==========================================================================
   主界面「制作组名单」入口 + 二级弹窗（2026-09-14）
   --------------------------------------------------------------------------
   · 正文 = 配置 `UI_CFG.credits`（编辑器【UI 配置】页可改，整区保存）；
     空配置 → 入口按钮自动隐藏（配置说话，代码不兜底假文案）。
   · 弹窗**整套复用办公区的 .modal-card / .modal-header / .modal-title / .modal-close /
     .modal-body**（视觉与办公区二级界面完全一致，不另起一套皮肤），只补自己的遮罩：
     ⚠️ 办公区的 `.modal-mask` 是 `pointer-events:none`（靠卡片自身接事件）——
        放在菜单层会让点击**穿透**到后面的「开始游戏」按钮 ⇒ 必须自带一层能吃事件的遮罩。
   · ⚠️ `.credits-body` 的 overflow 写在 `.modal-body` **之后**：同特异性 (0,1,0)，靠顺序取胜
     （本文件末尾「同特异性下顺序取胜」的老办法）。
   ========================================================================== */
.menu-credits-btn,
.menu-load-btn {
  margin-top: 0.85rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--aqua-foreground);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--aqua-border);
  border-radius: var(--aqua-radius-pill);
  cursor: pointer;
  /* menu-inner 是 pointer-events:none，按钮需恢复可点（与 .menu-start-btn 同款） */
  pointer-events: auto;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.menu-credits-btn:hover,
.menu-load-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.menu-credits-btn:active,
.menu-load-btn:active { transform: translateY(1px) scale(0.985); }
.menu-credits-btn[hidden],
.menu-load-btn[hidden] { display: none; }

.credits-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 50, 77, 0.34);
  backdrop-filter: blur(2px);
}
.credits-overlay[hidden] { display: none; }
.credits-card { width: min(92vw, 30rem); max-height: min(78vh, 34rem); }
.credits-body { overflow-y: auto; justify-content: center; }

/* ==========================================================================
   主界面 · 成就墙（2026-09-17 · doc/35 §4.6）
   --------------------------------------------------------------------------
   与 credits 弹窗**逐块同构**（同一套遮罩 + .modal-card + .modal-header/close），
   只有正文与尺寸不同；卡本身完全复用结算页那套 `.achv-*`（compact 版）。
   ⚠️ 36 张同屏 ⇒ **不生成辉光/环/粒子**（compact 版本来就没有装饰），
      并把外发光半径归零 —— 36 个 blur 同时呼吸是灾难。
   ⚠️ 墙上的卡比结算页小一档：5 列（竖屏 3 列），字号 9.5~12px。
   ⚠️ `.modal-body` 天生可滚 ⇒ **不需要第四幕那套翻页**，36 张直接铺。
   ========================================================================== */
.achv-wall-card { width: min(94vw, 60rem); max-height: min(88vh, 42rem); }
.achv-wall-body { display: block; overflow-y: auto; padding: 14px 18px 18px; }
.achv-wall-stats { margin-bottom: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: var(--aqua-ink-2); }
.achv-wall-stats b { font-family: var(--font-num); font-size: 17px; color: var(--aqua-primary-deep); }
.achv-wall-tip {
  margin-bottom: 10px; padding: 8px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: var(--aqua-ink-2);
  background: rgba(184,229,247,.28); border: 1px dashed var(--aqua-border);
}
.achv-wall-tip.warn { background: rgba(250,238,218,.75); border-color: #e0b060; color: #8a6010; }
.achv-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.achv-wall .achv-wrap { width: auto; }
.achv-wall .achv-card { --achv-glow-r: 0px; }        /* 36 张同时发光 = 灾难，外发光整层关掉 */
.achv-wall .achv-inner { padding: 9px 8px 8px; gap: 3px; border-radius: 8px; }
.achv-wall .achv-art { height: 40%; }
/* 同上：墙里的卡也没有立绘 ⇒ 贴住图标（`(.achv-wall .achv-art)` 特异性比基础那条高，必须单独写） */
.achv-wall .achv-art:not(:has(img)) { height: auto; }
.achv-wall .achv-glyph > svg { width: 44px; height: 44px; }
.achv-wall .achv-name { font-size: 12px; letter-spacing: 0; }
.achv-wall .achv-vd { font-size: 9px; padding: 0 7px; letter-spacing: .3px; }
/* ⚠️ 描述行数上限：卡片是 `aspect-ratio: 3/4.2` 的**定比卡**（高度锁死 247px @177 宽），
   超出由 `.achv-inner{overflow:hidden}` 裁掉。2026-09-19 用户报「描述第三行末尾固定变成三个点」——
   实测（tools/shot_reward.js menu → clamp 扫描）：卡片**本来就装得下 6 行**，
   3 行是白扔了后面 3 行（36/36 张里有 21 条被截断）。
   实测 3→6 行：卡片高 247、墙高 2047、图标 84px、名字行数**全都不变** ⇒ 纯粹是把空着的地方用起来。
   别改回 3；将来描述写得更长再加行数前，先跑一次那条 clamp 扫描看有没有空间。 */
.achv-wall .achv-desc { font-size: 9.5px; line-height: 1.45; -webkit-line-clamp: 6; }
.achv-wall .achv-meta { font-size: 9px; }
/* 未解锁整档降对比（灰烬底色已由 .rarity-locked 给，这里只收名字与图标） */
.achv-wall .is-locked .achv-name { color: var(--aqua-ink-3); }
.achv-wall .is-locked .achv-glyph { opacity: .55; }
.credits-text {
  white-space: pre-wrap;              /* 保住配置里的换行 */
  line-height: 1.95;
  font-size: 0.86rem;
  color: var(--aqua-foreground);
  text-align: center;
  margin: auto 0;                     /* 内容少时垂直居中，多时从顶部滚动 */
}

/* ==========================================================================
   主界面 · 选择存档（2026-09-22 用户要求）
   --------------------------------------------------------------------------
   · 入口 `.menu-load-btn` 与 `.menu-credits-btn` 共用一套胶囊样式（上面那条合并选择器）。
   · 弹窗与 credits / achv 同构：共用 `.credits-overlay` 遮罩 + 办公区 `.modal-card`，
     只补正文尺寸。⚠️ `.load-body` 必须 `display:block` —— `.modal-body` 是 flex column，
     一堆存档行挤成 flex 项会被压扁（同款坑见 `.achv-wall-body`）。
   · 行内二次确认（`.load-row.is-pending`）而不是另开一层弹窗：载入会覆盖本机自动存档，
     必须拦一道，但为一次点击再叠一层遮罩在手机上很容易点错层。
   ========================================================================== */
.load-card { width: min(92vw, 34rem); max-height: min(82vh, 38rem); }
.load-body { display: block; overflow-y: auto; padding: 14px 18px 18px; }
.load-group {
  margin: 12px 2px 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--aqua-ink-3);
}
.load-group:first-child { margin-top: 0; }
.load-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--aqua-border); border-radius: 12px;
  cursor: pointer; transition: box-shadow 160ms ease, border-color 160ms ease;
}
.load-row:hover { border-color: var(--aqua-primary); box-shadow: var(--shadow-card); }
.load-row.is-pending { border-color: #e0b060; background: rgba(250, 238, 218, .8); cursor: default; }
.load-badge {
  flex: 0 0 auto; min-width: 3.4rem; text-align: center;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--aqua-primary);
}
.load-row.is-cloud .load-badge { background: var(--aqua-primary-deep); }
.load-main { flex: 1 1 auto; min-width: 0; }
.load-name {
  font-size: 12.5px; font-weight: 800; color: var(--aqua-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.load-sub {
  margin-top: 2px; font-size: 10.5px; color: var(--aqua-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.load-tail { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.load-ask { font-size: 10.5px; font-weight: 700; color: #8a6010; }
.load-btn {
  padding: 4px 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: #fff; background: var(--aqua-primary);
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}
.load-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.load-btn:active { transform: translateY(1px) scale(.985); }
.load-btn.is-danger { background: #d9822b; }
.load-btn.is-ghost { color: var(--aqua-foreground); background: transparent; border-color: var(--aqua-border); }
.load-tip {
  padding: 10px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: var(--aqua-ink-2);
  background: rgba(184, 229, 247, .28); border: 1px dashed var(--aqua-border);
}
.load-tip.warn { background: rgba(250, 238, 218, .75); border-color: #e0b060; color: #8a6010; }
.load-note {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--aqua-border);
  font-size: 10.5px; line-height: 1.6; color: var(--aqua-ink-3);
}
/* 竖屏：行内确认的文案与按钮挤在一行会溢出 ⇒ 换行排 */
@media (max-width: 560px) {
  .load-row { flex-wrap: wrap; }
  .load-tail { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   竖屏 · 结算演出页（bonus 三幕）—— 2026-09-15
   --------------------------------------------------------------------------
   ⚠️ 必须放在文件最末尾：.aqua-stage / .reward-shell / .island-topbar / .act-*
   等基础规则都在 9243+ 行，同特异性下源顺序靠后者赢 —— 这套规则若写进前面
   8415 行的竖屏媒体块会被基础规则整体吃掉（只有基础规则没设的属性能漏过来）。
   竖屏三大问题：① .aqua-stage 锁 16:9 → 只剩 ~200px 高的一条横带；
               ② 顶栏（标题+三步进度+×）48px 定高压住幕内容；
               ③ 桌面尺寸（66px 奖金数字 / 264px 柱图 / 48px 按钮）在 390px 宽下溢出。
   口径与全站竖屏适配一致：只收拢尺寸不改层级不砍内容（铁律 6）。
   ========================================================================== */
@media (orientation: portrait) {
  /* 舞台解锁 16:9 → 全屏；外壳贴边（底部避开手机手势条） */
  .aqua-stage { width: 100%; aspect-ratio: auto; height: 100%; max-height: none; }
  .reward-shell { inset: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); grid-template-rows: auto minmax(0, 1fr); gap: 6px; }

  /* 顶栏：一行放不下 → 标题+× 一行、三个步骤胶囊第二行居中 */
  .reward-shell .island-topbar { width: 100%; height: auto; flex-wrap: wrap; padding: 5px 10px; gap: 4px 8px; border-radius: 16px; }
  .island-title { font-size: 11px; gap: 6px; }
  .island-title .dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(83, 185, 141, 0.18); }
  .stage-close { position: static; order: 2; margin-left: auto; width: 26px; height: 26px; }
  .stage-steps { order: 3; width: 100%; justify-content: center; gap: 4px; }
  .step-pill { font-size: 9px; padding: 2.5px 8px; gap: 3px; }

  /* 三幕通用：标题/徽章/底栏按钮收拢 */
  /* ⚠️⚠️ 2026-09-22 修 BUG（用户报「结算的排行榜页面最上方的字会被挡住（深海内测那行），
     最下方的按钮也被挤出去看不见了」）——
     根因不是某一幕的尺寸，而是 `.act` 本身：
         .act { position: absolute; inset: 0; display: grid; align-content: center; }
     `align-content: center` 在**内容比容器高**时是**上下同时溢出**：顶部（act-head，
     含「深海内测」那行 act-sub）被切在上边界外、底部（act-foot 的按钮）被切在下边界外，
     两端一起消失，且不报错、不出现滚动条 —— 390×844 刚好装得下所以看不出来，
     360×640（真机浏览器带地址栏时就是这高度）当场复现。
     ⇒ 改成 flex 列：标题恒贴顶、按钮恒贴底，**中间的正文自己滚**。
        `flex: 0 1 auto`（不 grow）是为了保留「内容少时整体居中」的原观感 ——
        用 flex:1 撑满的话短内容会被顶到最上面，竖屏下反而变丑。 */
  .act {
    display: flex; flex-direction: column; align-content: normal;
    justify-content: center; gap: 8px; overflow: hidden;
  }
  .act-head, .act-foot { flex: none; }
  /* 中间正文（第一幕 .chart-card / 第二幕 .act2-grid / 第三幕 .act3-grid）：
     装得下就按内容高、装不下就缩到自己滚，绝不把标题和按钮挤出去 */
  .act > .chart-card, .act > .act2-grid, .act > .act3-grid {
    flex: 0 1 auto; min-height: 0; overflow-y: auto;
  }
  .act > .reveal, .act > .achv-grid { flex: 0 1 auto; min-height: 0; }

  /* 第二幕：两个面板**平分**剩余高度、各自内部滚（比"整块榜单一起滚"好读：
     标题、榜单、反馈三样永远同屏，按钮也不会被顶走） */
  .act > .act2-grid { grid-auto-rows: minmax(0, 1fr); }
  .act2-grid > .panel { min-height: 0; display: flex; flex-direction: column; }
  .act2-grid > .panel > .rank-list,
  .act2-grid > .panel > .feed-list { flex: 1 1 auto; min-height: 0; max-height: none; }

  .pass-badge { font-size: 11px; padding: 4px 12px; gap: 5px; }
  .act-title { margin: 4px 0 0; font-size: 19px; letter-spacing: 0.5px; }
  .act-sub { margin: 3px 0 0; font-size: 10px; }
  .act-meta { margin: 2px 0 0; font-size: 10px; }
  .act-foot { gap: 5px; margin-top: 0; }
  .act-foot .dg-btn { min-width: 120px; height: 40px; font-size: 13px; }
  .hint-tip { font-size: 10px; }

  /* 第一幕：柱状图 264px→150px，侧栏在图下方（720px 断点已单列，这里只收尺寸） */
  .chart-card { padding: 10px 12px; gap: 8px; border-radius: 16px; }
  .chart-legend { gap: 8px; padding: 0 2px; font-size: 9px; }
  .chart-legend .lg-dot { width: 8px; height: 8px; }
  .chart-legend .lg-dot.cur { width: 9px; height: 9px; }
  .bars { height: 150px; padding: 8px 6px 0; gap: 10px; --bar-label-h: 18px; }
  .bar-value { font-size: 12px; }
  .mini-bar { width: 10px; }
  .mini-bar.cur { width: 13px; }
  .bar-label { font-size: 10px; }
  .delta-chip { top: -38px; font-size: 9px; padding: 2px 6px; }
  .chart-side { padding: 8px 10px; gap: 5px; border-radius: 12px; }
  .side-row { font-size: 10.5px; }
  .side-row .k { gap: 4px; }
  .chart-side .side-row.ax .ax-line { font-size: 8px; }

  /* 第二幕：榜单/反馈双卡叠放，列表高度收拢（内部仍可滚） */
  .act2-grid { gap: 8px; }
  .panel { padding: 10px 12px; border-radius: 18px; }
  .panel-title { font-size: 12px; margin: 0 0 6px; }
  .rank-list { gap: 5px; max-height: 170px; }
  .rank-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 5px 9px; border-radius: 12px; }
  .rank-row .rank-no { width: 24px; height: 24px; border-radius: 8px; font-size: 11px; }
  .rank-row .rank-name { font-size: 11px; }
  .rank-row .rank-meta { font-size: 9px; }
  .rank-row .rank-score { font-size: 11px; }
  .rank-up { margin-left: 4px; padding: 1px 6px; font-size: 9px; }
  .rank-tip { margin: 0 0 6px 8px; padding: 3px 9px; font-size: 9px; gap: 4px; }
  .user-stat { gap: 6px; margin-bottom: 6px; }
  .stat-box { padding: 6px 9px; border-radius: 12px; }
  .stat-box .num { font-size: 17px; }
  .stat-box .num small { font-size: 10px; }
  .stat-box .lbl { font-size: 9px; }
  .stat-box .trend { font-size: 9px; }
  /* max-height 240 只是保险：tip 同行 + 胶囊两行省出的空间足够 3 条全显（~165px），
     超出才内部滚（2026-09-16b：原 150px + overflow:hidden 把第 3 条反馈剪了一半） */
  .feed-list { gap: 5px; max-height: 240px; overflow-y: auto; }
  .feed-card { grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 6px 9px; border-radius: 12px; }
  .feed-avatar { width: 26px; height: 26px; border-radius: 9px; font-size: 10px; }
  .feed-text { font-size: 10px; }
  .feed-name { font-size: 11px; }
  .feed-stars { font-size: 9px; }

  /* 第三幕：奖金卡 + 工程师升级卡叠放 */
  .act3-grid { grid-template-columns: 1fr; gap: 8px; }
  .bonus-card { width: 100%; padding: 12px 12px 10px; border-radius: 18px; }
  .bonus-label { font-size: 10.5px; padding: 3px 11px; gap: 5px; }
  .bonus-amount { margin: 6px 0 2px; font-size: 38px; }
  .bonus-amount .cur { font-size: 20px; margin-right: 2px; }
  .bonus-break { margin: 8px 0; gap: 5px; }
  .break-chip { font-size: 9.5px; padding: 3px 8px; }
  .bonus-fund { margin: 0 0 2px; font-size: 10px; }
  .upgrade-panel { padding: 9px 12px; border-radius: 18px; }
  .upgrade-panel .panel-title { font-size: 11px; margin: 0 0 5px; }
  .upgrade-list.vertical { gap: 5px; }
  .upgrade-item { grid-template-columns: 30px minmax(0, 1fr); column-gap: 7px; row-gap: 3px; padding: 6px 9px; border-radius: 12px; }
  .up-avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 11px; }
  .up-name { font-size: 10.5px; }
  .up-trait { font-size: 9.5px; gap: 3px; }
  .lv-badge { font-size: 9.5px; padding: 2px 6px; }
  .lv-arrow { width: 12px; height: 12px; }
  .upgrade-pager { gap: 8px; margin-top: 5px; padding-top: 5px; }
  .upg-btn { font-size: 9.5px; padding: 2px 8px; }
  .upg-pageno { font-size: 9.5px; }
}

/* ==========================================================================
   评审答题演出 · 终端/阅读台自适应 —— 2026-09-16
   --------------------------------------------------------------------------
   用户反馈「代码评审界面中间空白太多积压下方按钮导致截断」：
   · 根因：.evalshow-card 定高 500/560px（9209 / 9995 / 9997 行），而 terminal/reader
     的视觉主体（term-screen / reader-out）全装在 .evalshow-fb 里、被 absolute
     bottom:12px 钉在卡片**底部** → 题目行与屏幕之间一大段空白；竖屏小屏时
     head + 500px 卡 + foot 超出视口 → 底部「暂停 / 跳过」按钮被截断。
   · 修法：terminal/reader 卡片改自适应高度 + fb 回到文档流（题目→屏幕紧挨着），
     超长内容交给 fb 自身的 max-height + overflow-y:auto 内部滚（铁律 6）；
     bubble 皮肤**不动**（它的 role/bub-q/fb 全靠定高卡片上的 absolute 锚点定位）。
   · ⚠️ 本段必须放在文件末尾：9995/9997（皮肤定高）与 10213（max-height:700 压缩）
     同特异性，同特异性下源顺序靠后者赢。
   ========================================================================== */
/* min-height:0 —— 7708 基础规则给卡片压了 300px 的 min-height（bubble 皮肤够内容撑），
   terminal/reader 内容少时底部会留一大截空白，一并清掉让卡片完全贴内容 */
.evalshow-card.skin-terminal,
.evalshow-card.skin-reader { height: auto; min-height: 0; }
.evalshow-card.skin-terminal .evalshow-fb,
.evalshow-card.skin-reader .evalshow-fb {
  position: static; transform: none; width: 100%; margin: 2px auto 0;
}

/* 竖屏小屏收拢：舞台内边距/间距压一档，标题栏头像 60→44 —— 终端/阅读台
   自适应后整页已在一屏内，这里只让手机竖屏不浪费纵向空间 */
@media (orientation: portrait) {
  .evalshow-stage { padding: 10px 12px; gap: 8px; }
  .evalshow-head .evalshow-role-sm { width: 44px; height: 44px; margin-bottom: 4px; }
}

/* ==========================================================================
   第四幕 · 成就（竖屏 / 窄屏收拢）—— 2026-09-16 · doc/35 §4.4
   --------------------------------------------------------------------------
   ⚠️ **必须放在文件最末尾**：`.achv-*` 的基础规则在上面（9400 行一带），
      同特异性下**源顺序靠后者赢** —— 写进别的竖屏块会被基础规则整体吃掉（静默半失效）。
   ⚠️ 这里收的是**半径与外扩量，不是内容**：竖屏时卡片贴边，
      390px 宽下卡 ≈342px、水平余量只剩 ≈24px ⇒ 光晕与扩散环会横向被
      `.aqua-stage{overflow:hidden}` 裁掉（**不报错**，只是"发光"少一半）。
      数字按「卡的短边 × 系数 ≤ 该方向余量 × 0.6」反推。
   ⚠️ 结算页**没有 zoom 兜底**（fitModalBody 只管办公区 .modal-body）⇒ 只能靠这里收。
   ========================================================================== */
@media (orientation: portrait) {
  .achv-reveal { padding: 6px 24px 0; gap: 10px; }
  /* ⚠️ 宽度与稀有度变量都挂在 **.achv-wrap** 上（辉光/环/粒子是卡片的兄弟节点，靠继承拿变量） */
  .achv-wrap { width: min(232px, calc(100% - 48px)); --achv-glow-r: 14px; }
  .achv-glow { inset: -6px; filter: blur(14px); }      /* 模糊半径也跟着缩，否则光会糊出卡外 */
  .achv-glyph > svg { width: 46px; height: 46px; }
  .achv-name { font-size: 13px; }
  .achv-desc { font-size: 10px; -webkit-line-clamp: 3; }
  /* 扩散环：**两个都收** —— .14 时外扩 .14×短边 远超 24px 余量会被裁；
     内收环在 t=0 就整个露在外面，同样要收，别只收外扩那个。 */
  .achv-halo.hl-a { --halo-from: .96; --halo-to: 1.06; }
  .achv-halo.hl-b { --halo-from: 1.06; --halo-to: 1.00; }
  .achv-halo { animation-duration: 800ms; }   /* 小屏缩短，避免"等光" */
  .achv-dust { display: none; }               /* 小屏不播粒子：同屏 18 个 opacity 动画会掉帧 */
  /* 竖屏改 2 列 × 2 行（仍是每页 4 张，不砍内容） */
  /* 竖屏 2 列 × 2 行放不下 ⇒ 这里**确实**要滚：显式写 overflow-x: hidden，
     否则 overflow-y:auto 会把横向也变成 auto（竖向滚动区不该横着动） */
  .achv-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; max-height: 460px; overflow-y: auto; overflow-x: hidden; }
}

/* ==========================================================================
   第四幕 · 成就（矮舞台收拢）—— 2026-09-16 二改
   --------------------------------------------------------------------------
   ⚠️ 竖版卡（aspect 3/4.2）比原来的扁平横条**高得多**：1280×900 的舞台 ≈620px 放得下，
     但 1024×768 的舞台只有 ≈500px（且**仍锁 16:9**，见 doc/35 §4.4）⇒ 弹卡会被裁。
     超高度是**被裁掉且不报错**，所以只能靠这里收。
   ⚠️ 同样必须放在文件最末尾（同特异性靠源顺序取胜）。
   ========================================================================== */
@media (max-height: 640px) {
  #act-4 .act-head .act-sub { display: none; }        /* 副标题最不占信息量，先让位 */
  .achv-reveal { gap: 10px; padding: 4px 20px 0; }
  .achv-reveal .achv-wrap { width: 186px; }
  .achv-glyph > svg { width: 42px; height: 42px; }
  .achv-inner { padding: 8px 8px 7px; gap: 3px; }
  .achv-name { font-size: 12px; }
  .achv-desc { font-size: 9.5px; line-height: 1.45; -webkit-line-clamp: 2; }
  .achv-meta { font-size: 9px; }
  .achv-grid { max-height: 246px; overflow-y: auto; overflow-x: hidden; }
  #act-4 .act-foot .dg-btn { height: 40px; min-width: 130px; font-size: 14px; }
}

/* 主界面 · 成就墙（竖屏）—— 2026-09-17
   ⚠️ 必须放在文件末尾： 的基础规则在 11135 行一带，同特异性下源顺序靠后者赢。
   5 列在手机上每张只有 ~60px（名字会一字一行），竖屏收成 3 列。 */
@media (orientation: portrait) {
  .achv-wall-card { width: min(96vw, 60rem); max-height: min(90vh, 42rem); }
  .achv-wall-body { padding: 10px 12px 14px; }
  .achv-wall { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .achv-wall .achv-glyph > svg { width: 38px; height: 38px; }
  .achv-wall .achv-name { font-size: 11px; }
  /* ⚠️⚠️ 竖屏**必须配合文件末尾那条 `.modal-body .achv-desc{overflow:hidden}`** 才对：
     2026-09-19 之前 `.achv-desc` 的 overflow 被全局规则击穿 ⇒ **clamp 插了省略号却不裁剪**
     ⇒ 竖屏 2 行时玩家实际看到 6 行文字、且省略号插在第 2 行中间（用户报的就是这个）。
     修好裁剪后重标定（tools/shot_reward.js menu 480x900，判据：日期被裁 0 张 + 实渲行数到得了上限）：
       2 行 → 日期 0 被裁，但只显示 2 行（比修复前玩家看到的 6 行少太多）
       5 行 → 日期 0 被裁、实渲到 5 行、有省略号 ✓  ← 采用这个
       6 行以上 → 实渲到不了（会被空间压回去 ⇒ 变成"没省略号的静默截断"），不用
     ⇒ 结论：竖屏 5 行 / 桌面 6 行（桌面那条见上方注释）。 */
  .achv-wall .achv-desc { font-size: 9px; -webkit-line-clamp: 5; }
}

/* ==========================================================================
   主界面 · 成就墙「缩略图模式」（2026-09-22）
   --------------------------------------------------------------------------
   用户要求：「手机竖屏横屏下的成就页面改成缩略图（只显示 icon 和标题），
   然后点击可以展开卡片的形式」。
   ⚠️ 判定的**唯一出处是 menu.js 的 achvThumbMode()**（由它挂 `.is-thumb` 类）——
      CSS 这边**不另写一套"是不是手机"的媒体查询**。两边各写一套的翻车方式有两种，都踩过：
        ① 媒体查询命中了缩略图排布、类却没挂上 ⇒ 看着是缩略图但**点不开**（不报错）；
        ② 两边对"是不是竖屏"给出相反答案（`orientation` 在 iframe / webview 里口径不一致）
           ⇒ 判定说"不是手机"、排布却按竖屏走了 3 列（2026-09-22 用户复报「一行还是 3 个」）。
      所以列数也**不再靠媒体查询**：auto-fill 按实际宽度自己算，横竖屏同一套规则。
   ⚠️ 只是「收起 3 个元素 + 换成小尺寸」，卡片 HTML 一个字节没改（仍是 compact 版）。
   ========================================================================== */
/* minmax(64px, 1fr) + auto-fill：能塞几列塞几列。
   ⚠️ 64px 是**按真机可用宽度反推的**：手机竖屏弹窗正文只有 ~294px（360 视口）~350px（390 视口），
      轨道下限取 84px 时只排得下 3 列 —— 正是用户复报的「一行还是 3 个」。
      64px 下：294 → 4 列（每张 ~67px）· 350 → 4 列（~79px）· 844 横屏 → 11 列。
   ⚠️ 轨道最小宽度必须是**固定值**：`1fr` 的隐含 min 是 min-content，长成就名
      （如 "nobody knows llm better than me"）会把轨道撑破容器 ⇒ 整行横向溢出（实测过）。 */
.achv-wall.is-thumb { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.achv-wall.is-thumb .achv-wrap { min-width: 0; cursor: pointer; }  /* 兜底：允许被压到轨道宽以下 */
.achv-wall.is-thumb .achv-card { aspect-ratio: auto; height: 100%; }  /* 定比卡是给"整卡"用的 */
.achv-wall.is-thumb .achv-inner { padding: 8px 6px 7px; gap: 4px; }
.achv-wall.is-thumb .achv-glyph > svg { width: 34px; height: 34px; }
.achv-wall.is-thumb .achv-name {
  font-size: 10.5px; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* 只留 icon + 标题：稀有度徽章 / 描述 / 解锁时间全收掉（稀有度由卡面底色与描边表达） */
.achv-wall.is-thumb .achv-vd,
.achv-wall.is-thumb .achv-desc,
.achv-wall.is-thumb .achv-meta { display: none; }
/* 缩略图没有 hover 可借，给一记按下反馈（不然"能点"这件事完全没有提示） */
.achv-wall.is-thumb .achv-wrap .achv-card { transition: transform .12s; }
.achv-wall.is-thumb .achv-wrap:active .achv-card { transform: scale(.96); }

/* ---- 缩略图点开的「展开卡」浮层（非 compact 完整卡：辉光 / 扩散环 / 粒子都在）----
   ⚠️ 它是 .modal-card 的**直接子节点**（那张卡 position:relative + overflow:hidden）⇒
      浮层被裁在弹窗内，不会溢到主菜单；也正因为盖满整张弹窗，点任意处都能关
      （绑定见 menu.js 的 init）。
   ⚠️ 只认 menu.js 的 openAchvDetail —— 别再写一套"展开卡"的 HTML，改一处必漏一处。 */
.achv-wall-detail {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; cursor: pointer;
  background: rgba(23, 50, 77, .38);
  backdrop-filter: blur(2px);
  animation: achvDetailIn .2s ease both;
}
.achv-wall-detail[hidden] { display: none; }   /* flex 会顶掉 [hidden]，必须显式还原 */
@keyframes achvDetailIn { from { opacity: 0 } to { opacity: 1 } }
.achv-wall-detail .achv-wrap { width: min(240px, calc(100% - 40px)); }
/* 横屏矮屏：240 宽的卡高 ≈336，比弹窗可用高还高 ⇒ 再收一档 */
@media (max-height: 640px) {
  .achv-wall-detail { padding: 8px; }
  .achv-wall-detail .achv-wrap { width: min(180px, calc(100% - 32px)); }
}

/* ==========================================================================
   模型库 · 缩略卡模式 + 点开看详细（2026-09-30）
   --------------------------------------------------------------------------
   用户：「竖屏下模型库卡片显示有问题，采用成就卡片同款适配逻辑，只显示缩略信息，
   但是可以点开看详细」。
   崩坏实况（390×844 真机实测）：弹窗正文仅 ~334px，卡仍是 `repeat(3,1fr)`（每张 ~103px 宽 /
   144px 高），而卡内要塞「名字 + 28px 大分 + 结构·参数 + 7 条维度 + 训练次数」——
   实测 `.cdx-card-inner` 内容 225px 挤进 123px（裁掉 102px）、`.cdx-card-sub` 高 0（整行不可见），
   玩家看到的正是「只剩巨大总评分 + 竖排综合评分」。
   ⚠️ 判定的**唯一出处是 game_ui.js 的 cdxThumbMode()**（由它挂 `.is-thumb` 类）——
      CSS 这边**不另写一套"是不是手机"的媒体查询**（同 achv 缩略图模式的原因：orientation 在
      iframe / webview（Toy 预览）里口径不一致，短边才是实际可用空间）。
      cardOf() 在 thumb 时给卡挂 `data-action="codex-open" data-id`，桌面/横屏不挂。
   ⚠️ 缩略模式只是**加一个类**：卡片 HTML 一个字节没改，靠 CSS 收起名字/维度条/训练次数，
      只留「档位徽章 + 总分 + 架构·参数」。详情卡复用同一份 cardOf（非缩略版）。
   ========================================================================== */
/* 列数**固定 3**，不用 achv 那套 auto-fill：那边是「整面墙」铺满（能塞几列塞几列），
   这边是**每页恰好 3 张**（PER=3，与桌面 repeat(3,1fr) 同口径）⇒ auto-fill 在 390 视口会排出
   4 列、第 4 列空着（真机截图实测右边缘空一格），改成 3 列后卡片铺满整宽。
   minmax(0,1fr) 兜住 min-content：`1fr` 的隐含 min 是 min-content，长架构名会把轨道撑破容器
   （同 achv 踩过）。 */
.cdx-cards.is-thumb { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cdx-cards.is-thumb .cdx-card { aspect-ratio: auto; padding: 4px; border-radius: 12px; }
.cdx-cards.is-thumb .cdx-card-inner { padding: 6px 5px; gap: 2px; }
.cdx-cards.is-thumb .cdx-card-name { display: none; }        /* 只留档位徽章 */
.cdx-cards.is-thumb .cdx-card-top { justify-content: center; }
.cdx-cards.is-thumb .cdx-vd { font-size: 10px; padding: 1px 7px; }
/* 总分与「综合评分」标签**竖排**：3 列时单卡仍只有 ~85px 内容宽，横排会被压成"综/合/评/分"四行（实测） */
.cdx-cards.is-thumb .cdx-card-score { flex-direction: column; align-items: center; gap: 0; margin: 2px 0 1px; }
.cdx-cards.is-thumb .cdx-card-score b { font-size: 20px; }
.cdx-cards.is-thumb .cdx-card-score small { font-size: 9px; }
/* 结构·参数允许折行（原本 nowrap 是为大卡"固定一行"设计的；窄卡里只能折） */
.cdx-cards.is-thumb .cdx-card-sub {
  font-size: 9.5px; white-space: normal; flex-wrap: wrap; justify-content: center;
  gap: 1px 3px; line-height: 1.3;
}
.cdx-cards.is-thumb .cdx-card-bars,
.cdx-cards.is-thumb .cdx-card-times { display: none; }
.cdx-cards.is-thumb .cdx-card:hover { transform: none; }
/* 触屏没有 hover 可借，给一记按下反馈（不然"能点"完全没有提示，同 achv） */
.cdx-cards.is-thumb .cdx-card { transition: transform .12s; }
.cdx-cards.is-thumb .cdx-card:active { transform: scale(.96); }

/* ---- 缩略卡点开的「详细卡」浮层（与 .achv-wall-detail 同款）----
   ⚠️ 它是 .sub-modal-card 的直接子节点（该卡 position:relative + overflow:hidden）⇒ 裁在弹窗内，
      不会溢到主菜单；盖满整张弹窗 ⇒ 点任意处都能关（绑定见 game_ui.js 的 codex-detail-close）。 */
.codex-card { position: relative; }   /* 浮层的定位父级 */
.cdx-detail {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; cursor: pointer;
  background: rgba(23, 50, 77, .38);
  backdrop-filter: blur(2px);
  animation: cdxDetailIn .2s ease both;
}
.cdx-detail[hidden] { display: none; }   /* flex 会顶掉 [hidden]，必须显式还原 */
@keyframes cdxDetailIn { from { opacity: 0 } to { opacity: 1 } }
/* 详细卡固定竖版比例、宽受弹窗约束；里面的名字/维度条/训练次数**照常显示**（不在 .is-thumb 内） */
.cdx-detail .cdx-card { width: min(220px, calc(100% - 40px)); aspect-ratio: 3 / 4.2; }
@media (max-height: 640px) {
  .cdx-detail { padding: 8px; }
  .cdx-detail .cdx-card { width: min(170px, calc(100% - 32px)); }
}

/* ==========================================================================
   竖屏 · 字号统一抬升 + 长面板放长（2026-09-30 用户：「手机竖屏字体还是太小了，
   每个界面都检查一下…多参考立项界面的字号」）
   --------------------------------------------------------------------------
   为什么单独一段、且必须放文件末尾：
     竖屏排布适配分散在 L716 / L2369 / L2383 / L4430 / L8589 等 @media (orientation: portrait)
     块里；同特异性下**源顺序靠后者胜** ⇒ 字号覆盖必须写在最后，才能盖住 8.1~8.6 那些
     为腾地方而压小的字号（团队 10px / 招聘 9.5px / 聊天 9.5px…）。本段只作用于竖屏，
     横屏 / 桌面一字不动。
   两类「字小」分开治：
     ① **zoom 型**（办公室二级面板）：正文被 fitModalBody 等比缩掉（实测团队 0.738 /
        招聘 0.839 / 算力 0.951 / 语料 0.546）。**缩字号在这里是白干**（见 L8904）⇒
        先把面板放长把 zoom 抬回 1，再抬字号才作数（本段 A 段）。
     ② **基准型**（办公室主界面 / 新闻 / 聊天 / 模型库，zoom 已 = 1）：直接抬字号即可。
   目标（竖屏）：正文 / 选项 / 按钮 ≥ 12.5px；卡片元信息 / 徽章 / 脚注 ≥ 11.2px；面板标题 ≥ 15.2px。
   ⚠️ 值全部按容器量过后再定（tmp/shot_portrait.js 溢出对账），不靠肉眼。
   ⚠️ 办公室主界面的「员工标记」「顶部 chips」**故意不动**：两者都是 390px 宽度下
      为「不互相遮挡 / 不换第三行」反复微调过的（见 L8631、L8703 注释），抬字号会破坏既有排布。
   ========================================================================== */
@media (orientation: portrait) {
  /* ---- A. 长内容面板用满整屏高度：把 fitModalBody 的 zoom 抬回 ~1（与立项 8.7 同款做法）----
     只用 :has() 锁在这四张面板上，其余面板的居中方式与高度一行未动。
     ⚠️ 语料面板正文太高（need ≈ 1036），拉满也只能到 zoom ≈ 0.69 —— 故它**只放长、不抬字号**
        （抬了会被 zoom 抵消）。 */
  .office-shell .modal-mask:has(.team-modal-body),
  .office-shell .modal-mask:has(.recruit-modal-body),
  .office-shell .modal-mask:has(.shop-modal-body),
  .office-shell .modal-mask:has(.corpus-modal),
  /* 2026-09-30 玩家反馈「攻关和开始评审的界面没有调，还是有点小」：
     这两张面板同样被 fitModalBody 缩到 zoom 0.768 —— 攻关实测正文 6.9~9.2px、
     评审 7.7~9.3px。一起放长（攻关面板没有专属 body class，只能认它的 .focus-quadrant）。 */
  .office-shell .modal-mask:has(.focus-quadrant),
  .office-shell .modal-mask:has(.review-modal-body) { align-items: flex-start; }
  .office-shell .modal-mask:has(.team-modal-body) .modal-card,
  .office-shell .modal-mask:has(.recruit-modal-body) .modal-card,
  .office-shell .modal-mask:has(.shop-modal-body) .modal-card,
  .office-shell .modal-mask:has(.corpus-modal) .modal-card,
  .office-shell .modal-mask:has(.focus-quadrant) .modal-card,
  .office-shell .modal-mask:has(.review-modal-body) .modal-card {
    margin-top: var(--modal-top, 0px);
    max-height: calc(100% - var(--modal-top, 0px) - 10px);
  }

  /* ---- B. 办公室主界面（zoom = 1，直接抬字号）---- */
  .office-shell .action-btn .btn-label { font-size: 12.5px; }
  .office-shell .btn-badge,
  .office-shell .count-badge { font-size: 11px; }
  .office-shell .model-ver,
  .office-shell .model-sub { font-size: 11.2px; }

  /* ---- C. 团队（面板放长后 zoom ≈ 1，以下字号才真正生效）---- */
  .office-shell .team-list .team-name { font-size: 12.5px; }
  .office-shell .team-list .team-role { font-size: 11px; }
  .office-shell .team-list .dg-tier-badge { font-size: 11px; padding: 0 5px; }
  .office-shell .team-col-head { font-size: 11.5px; }
  .office-shell .team-page-info { font-size: 11.5px; }
  .office-shell .team-col-sub { font-size: 11.2px; }
  .office-shell .team-overview .overview-subtitle { font-size: 11.2px; }
  .office-shell .team-overview .overview-subtitle b { font-size: 12.5px; }
  .office-shell .team-overview .coverage-name { font-size: 11.2px; }
  .office-shell .team-overview .coverage-lv .lv-label { font-size: 11px; }
  .office-shell .team-overview .coverage-lv .unit { font-size: 11.2px; }
  .office-shell .team-overview .rd { font-size: 11.2px; }
  /* 团队数据行：字号抬到 zoom=1 的实际大小后，「🧩岗位分布 + 一行三岗」挤不进一行 ——
     `.status-item-value`（含 .role-dist）是 nowrap 的，值不肯缩 ⇒ 把**标签压成
     「岗/位/分/布」竖排**（真机实测）。给行加 wrap：放不下就让值自己换到第二行。 */
  .office-shell .team-overview .stat-item { flex-wrap: wrap; }
  .office-shell .team-overview .stat-item-value.role-dist { flex-wrap: wrap; row-gap: 2px; }

  /* ---- D. 招聘 ---- */
  .office-shell .recruit-list .recruit-name { font-size: 12.5px; }
  .office-shell .recruit-list .recruit-role { font-size: 11px; }
  .office-shell .recruit-list .recruit-salary { font-size: 11.2px; }
  .office-shell .recruit-list .dg-tier-badge { font-size: 11px; padding: 0 5px; }
  .office-shell .recruit-list-col .team-col-head { font-size: 11px; }
  .office-shell .recruit-list-col .dg-tier-badge { font-size: 11px; padding: 0 5px; }
  .office-shell .recruit-detail-name { font-size: 14px; }
  .office-shell .recruit-detail-role,
  .office-shell .recruit-detail-salary,
  .office-shell .recruit-detail-arrive { font-size: 11.2px; }
  .office-shell .recruit-detail-stats .rds-label { font-size: 11.2px; }
  .office-shell .recruit-detail-bio { font-size: 11.2px; }
  .office-shell .recruit-detail-tag { font-size: 11px; }
  .office-shell .recruit-detail-expire,
  .office-shell .recruit-detail-axhint { font-size: 11px; }

  /* ---- E. 算力 ---- */
  .office-shell .shop-tier-name { font-size: 12.5px; }
  .office-shell .shop-tier-spec { font-size: 11.2px; }
  .office-shell .shop-tier-price { font-size: 12.5px; }
  .office-shell .shop-preview-name { font-size: 12.5px; }
  .office-shell .shop-preview-spec { font-size: 11.2px; }

  /* ---- F. 新闻 ---- */
  .office-shell .nw-side-head { font-size: 11.5px; }
  .office-shell .nw-side-tip { font-size: 11px; }
  .office-shell .nw-hot li { font-size: 11.2px; }
  .office-shell .nw-post .nw-user { font-size: 11.2px; }
  .office-shell .nw-post .nw-time { font-size: 11px; }
  .office-shell .nw-post .nw-text { font-size: 12.5px; }
  .office-shell .nw-post .nw-actions { font-size: 11px; }
  .office-shell .nw-empty { font-size: 12px; }

  /* ---- G. 模型测试 / 聊天 ---- */
  .office-shell .msg-user, .office-shell .msg-bot { font-size: 12.5px; }
  .office-shell .chat-sys,
  .office-shell .chat-think-head,
  .office-shell .chat-think-line { font-size: 11.2px; }
  .office-shell .chat-media-cap { font-size: 11.2px; }
  .office-shell .test-chat-title { font-size: 14px; }
  .office-shell .test-chat-status { font-size: 11.2px; }
  .office-shell .test-empty-tip { font-size: 12.5px; }
  .office-shell .test-engineer-note { font-size: 11.2px; }
  .office-shell .test-status-line { font-size: 11.2px; }
  .office-shell .test-artifact { font-size: 11.2px; }
  .office-shell .test-suggest-label { font-size: 11.2px; }
  .office-shell .test-suggest-btn { font-size: 12.5px; }
  .office-shell .cb-main { font-size: 12.5px; }
  .office-shell .chat-sheet .cs-head { font-size: 11.5px; }
  .office-shell .cs-item { font-size: 12.5px; }
  .office-shell .cs-note, .office-shell .cs-note-item b, .office-shell .cs-note-item span { font-size: 11.2px; }
  .office-shell .cs-tool { font-size: 12px; }

  /* ---- H. 模型库（设置弹层，zoom = 1）----
     竖屏让整张卡受弹窗高度约束 + 正文可滚，避免流水/统计把卡片顶出屏外。 */
  .codex-card { max-height: calc(100% - 16px); display: flex; flex-direction: column; }
  .codex-card .sub-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .codex-card .gcf-subhead { font-size: 12.5px; }
  .codex-card .cdx-stat-item { font-size: 11.5px; }
  .codex-card .cdx-log-row { font-size: 12.5px; }
  .codex-card .cdx-log-arch { font-size: 11.5px; }
  .codex-card .cdx-log-vd { font-size: 11px; }
  .codex-card .cdx-pageno { font-size: 12.5px; }
  .codex-card .sub-modal-footer .skew-btn { font-size: 12.5px; }

  /* ---- I. 结算演出页 / 评审（zoom = 1；沿用小字那几条的既有选择器，仅抬到下限）----
     这几条只抬「脚注 / 轴标签」级别的小字，卡片图与主标题不动，避免破坏已修好的
     「标题恒贴顶、按钮恒贴底、中间自己滚」竖屏版式（见上方结算段注释）。 */
  .act-meta { font-size: 11.2px; }
  .act-sub { font-size: 11.5px; }
  .hint-tip { font-size: 11.2px; }
  .bar-label { font-size: 11.2px; }
  .chart-legend { font-size: 11px; }
  .chart-legend .lg-item { font-size: 11px; }
  .skin-terminal .tp-row { font-size: 12px; }
  .skin-terminal .tc-prompt { font-size: 12.5px; }

  /* ---- J. 攻关 / 开始评审（A 段已放长 ⇒ zoom ≈ 0.95~1，以下字号才作数）----
     2026-09-30 玩家反馈「这两个界面没有调，还是有点小」：改前 eff 只有 6.9~9.3px
     （zoom 0.768 × 基准 9~12px）。除抬字号外，一并把**不含文字的空白**收一档
     （内距 / 行距 / 网格间距）—— 面板总高是定值，空白省下的每一 px 都会还给 zoom。 */
  /* 攻关 */
  .office-shell .focus-intro { font-size: 12.5px; padding: 8px 12px; margin-bottom: 8px; }
  .office-shell .quadrant-center-label { font-size: 11.2px; }
  .office-shell .qc-name { font-size: 12.5px; }
  .office-shell .qc-dur { font-size: 11.2px; }
  .office-shell .focus-axis-title { font-size: 11.5px; }
  .office-shell .fa-name { font-size: 12.5px; }
  .office-shell .fa-bonus, .office-shell .fa-dur { font-size: 11.2px; }
  .office-shell .focus-detail { padding: 8px 10px; margin-top: 8px; }
  .office-shell .fd-tag { font-size: 11.2px; }
  .office-shell .fd-desc { font-size: 12.5px; }
  .office-shell .fd-cost-label { font-size: 11.2px; margin-bottom: 2px; }
  .office-shell .fd-cost { font-size: 12.5px; }
  /* 开始评审
     ⚠️★ 这张面板 zoom 一直被压在 0.92 的**真正原因不是内容高**，而是装饰圆：
     `.review-modal-body::after { bottom:-40px }` 让它的 scrollHeight 永远比正文多 40px，
     而 fitModalBody 的 need 正是 `body.scrollHeight` ⇒ 每次都白缩 ~9%
     （实测：卡片 519 → zoom 0.9198；卡片垫到 560 → 仍 0.9198，need 跟着涨 45px）。
     视觉上这个圆本来就被 overflow:hidden 裁掉，把它收回容器内（bottom:0）后
     scrollHeight 与实际正文一致 ⇒ zoom 自然回到 1，字号也才真的是下面这些值。
     实测（390×844）：zoom 0.7684 → 0.92 → **1.0**；eff 8.5 → 11.5 → **12.5px**。 */
  .office-shell .review-modal-body::after { bottom: 0; }
  .office-shell .review-modal-body { padding: 8px 10px; }
  .office-shell .review-header-title { font-size: 16px; }
  .office-shell .review-header-sub { font-size: 11.2px; }
  .office-shell .review-desc { font-size: 12.5px; padding: 8px 10px; margin-bottom: 8px; }
  .office-shell .review-stat { grid-template-columns: 62px 1fr 56px; gap: 8px; }
  .office-shell .review-stats { gap: 8px; padding: 10px; }
  .office-shell .rs-label { font-size: 12.5px; }
  .office-shell .rs-val { font-size: 12.5px; }
  .office-shell .review-weights { font-size: 12.5px; }
  .office-shell .review-weights .rw-note { font-size: 11.2px; }
  .office-shell .review-axis-sep { font-size: 11.5px; }
  .office-shell .axis-pill { font-size: 11.2px; }
  .office-shell .rc-label { font-size: 12.5px; }
  .office-shell .rc-value { font-size: 22px; }
}

/* ==========================================================================
   ⚠️⚠️ 成就卡三层的 overflow 必须**再声明一次**（带 .modal-body 前缀，放文件最末尾）
   --------------------------------------------------------------------------
   2026-09-19 用户报：「竖屏下第二行最后一个字会被吞变成 ···」——**根因就是这个**。
   全局「二级界面禁止滚动条」规则（L11222）：
       .modal-body *:not(.test-messages) { overflow: visible }      ← 特异性 (0,2,0)
   而组件自己写的是：
       .achv-desc { overflow: hidden }   /  .achv-inner / .achv-card   ← 特异性 (0,1,0)
   ⇒ **被击穿** ⇒ `-webkit-line-clamp` 的省略号照样插在第 N 行末尾，但后面的行**不再被裁**，
     于是玩家看到「第二行末尾 ···，后面的文字照常显示」（真机实测三层全是 visible）。
     同理，描述也因此能画到卡外、压住日期（上一轮那个重叠其实也是它）。
   ⇒ 修法：同特异性 + **源顺序靠后**（这条必须留在文件最末尾）。
   ⚠️ 代价：这条规则只能抵消「(0,2,0) 击穿 (0,1,0)」这一类；凡是**其它**在 .modal-body 里
      声明 overflow:hidden 的组件，只要特异性 ≤ (0,2,0) 且写在这条之前，都还在被击穿。
      新写组件时照抄这个模式，别再踩（这是本项目的第 4 次，技能 §14 记过 3 次）。
   ========================================================================== */
.modal-body .achv-card,
.modal-body .achv-inner,
.modal-body .achv-desc { overflow: hidden; }