/* ============================================================================
 * 织界 织界 — 设计系统（M0.6）
 *
 * 6 个核心 token + 派生 token：
 *   --zj-bg       页面背景
 *   --zj-card     卡片/容器背景
 *   --zj-border   描边/分隔线
 *   --zj-text     主文本
 *   --zj-accent   织界靛青（主色）
 *   --zj-danger    危险/警示
 *
 * 派生：
 *   --zj-text-mute / --zj-accent-soft / --zj-success
 *   --zj-side-bg / --zj-side-text / --zj-side-active / --zj-side-active-bg
 *
 * 规范（CLAUDE.md 4.5）：模块 HTML 只引用 token；禁止硬编码颜色。
 * ============================================================================ */

/* ── 字体（P1 · 本地化打包 woff2，禁止 CDN） ──────────────────────
 * 源：Google Fonts unicode-range 拆分的 315 个 @font-face
 * 落地：315 个 woff2 + fonts.css（自动生成，勿手改）
 * 路径：ui/lib/fonts/{family}-{weight}-{subset}.woff2
 * 引用方式：@import（保留 Google Fonts 原结构，单文件复用）
 */
@import url('/lib/fonts/fonts.css');

:root {
  /* ── Tactile Loom 设计系统（5 角色 token + warning）──
   * 出处：织界_Stitch设计图_评审与落地交接.md（2026-10-10 定稿）
   * 命名约定：角色名（不用颜色名）
   * 老 token（--zj-bg / --zj-text / --zj-accent）全部作为 alias 保留，老 CSS 零改动
   */
  --zj-primary:    #1B365D;   /* 靛蓝染缸：导航 / 主按钮 / 横幅 */
  --zj-secondary:  #C85A32;   /* 赭红筒管：运行态 / 报警 */
  --zj-tertiary:   #4E7D6B;   /* 鼠尾草绿：合格 / 达标 */
  --zj-warning:    #D49A30;   /* 琥珀：警示 / 欠界 / 效率损失 */
  --zj-surface:    #F4EFEA;   /* 精梳棉：全局背景 */
  --zj-ink:        #25364A;   /* 工艺墨水：主文字 */
  --zj-card:       #ffffff;   /* 卡片白 */
  --zj-border:     #e3e6eb;   /* 描边灰 */

  /* ── 派生 token（语义化）────────────────── */
  --zj-bg:           var(--zj-surface);   /* 老 token alias */
  --zj-text:         var(--zj-ink);        /* 老 token alias */
  --zj-accent:       var(--zj-primary);    /* 老 token alias */
  --zj-accent-2:     var(--zj-secondary);  /* 老 token alias */
  --zj-accent-soft:  rgba(27, 54, 93, 0.08);
  --zj-accent-hover: #142a4a;
  --zj-danger:       var(--zj-secondary);
  --zj-success:      var(--zj-tertiary);
  --zj-text-mute:    #6b7785;

  /* ── 派生 token（背景 / 状态 / 标签）────── */
  --zj-success-bg:     #e8f0ec;
  --zj-danger-bg:      #f6e9e3;
  --zj-warning-bg:     #faf3e3;
  --zj-tag-bg:         var(--zj-accent-soft);
  --zj-tag-text:       var(--zj-primary);
  --zj-table-hover:    #f0ebe2;            /* surface 深 ~3% */
  --zj-table-head-bg:  #f0ebe2;

  /* ── 字体 token（P1 落地） ────────────────── */
  --zj-font-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --zj-font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* ── 侧栏（深色仪表盘 · 靛蓝染缸）───────── */
  --zj-side-bg:          var(--zj-primary);
  --zj-side-text:        #c5cee0;
  --zj-side-active:      #ffffff;
  --zj-side-active-bg:   rgba(255, 255, 255, 0.10);
  --zj-side-group-title: rgba(255, 255, 255, 0.4);

  /* ── 阴影 ─────────────────────────────────── */
  --zj-shadow-card:    0 6px 18px rgba(27, 54, 93, 0.08);
  --zj-shadow-modal:   0 14px 50px rgba(0, 0, 0, 0.18);

  /* ── 图片资产（P3a+image wire，登记见 docs/asset-provenance.md） ── */
  --zj-card-img-spinning:  url('/assets/img/workshops/spinning-hall.jpg');
  --zj-card-img-weaving:   url('/assets/img/workshops/weaving-hall.jpg');
  --zj-card-img-dyeing:    url('/assets/img/workshops/dyeing-lab.jpg');
  --zj-card-img-project:   url('/assets/img/workshops/project-spinning.jpg');
}

/* ============================================================================
 * 基础
 * ============================================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--zj-font-sans);
  background: var(--zj-bg);
  color: var(--zj-text);
}

/* ── P3a 阶段1.⑤ emoji 替换 SVG 样式 ── */
.zj-icon-wave, .zj-icon-dl,
.zj-icon-tick, .zj-icon-cross {
  width: 14px; height: 14px;
  display: inline-block;
  vertical-align: -2px;
  color: currentColor;
}
.zj-icon-tick  { color: var(--zj-tertiary); }
.zj-icon-cross { color: var(--zj-secondary); }
.zj-icon-dl    { color: var(--zj-text-mute); }

/* 全局 hidden 兜底：display 类规则会覆盖 [hidden] 默认样式（如 zj-spin-section / zj-spin-gauge-grid） */
[hidden] { display: none !important; }

/* ============================================================================
 * P3a 学生首页驾驶舱（Stitch 设计图屏 1）
 * 5 区段：banner / stats / workshops / showcase+workorders / leaderboard
 * 设计 token 全部走 :root，不引入新颜色
 * ============================================================================ */
.zj-home { display: flex; flex-direction: column; gap: 24px; max-width: 1200px; }
/* 全屏模式（D20e）：首页内容容器同步放开 1200px 限宽 */
:fullscreen .zj-home,
.zj-page-fullscreen .zj-home { max-width: none; }
/* 宽屏自适应（D28-4，主人 20:04 方向拍板）：≥1600px 随窗口放宽到外层 1560 上限，不无限通栏 */
@media (min-width: 1600px) {
  .zj-home { max-width: none; }
}

.zj-home-banner {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* 3 段渐变：edges-lighter → primary → edges-lighter，制造中心聚光感（对齐 Stitch 设计 from-primary-container via-primary to-primary-container） */
  background: linear-gradient(135deg, #2d4a72 0%, var(--zj-primary) 50%, #2d4a72 100%);
  color: #fff;
  padding: 28px 32px;
  box-shadow: var(--zj-shadow-card);
}
.zj-home-banner::before, .zj-home-banner::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(60px); opacity: 0.35;
}
.zj-home-banner::before { right: -60px; top: -60px; width: 320px; height: 320px; background: var(--zj-secondary); }
.zj-home-banner::after  { right: 30%; bottom: -80px; width: 260px; height: 260px; background: var(--zj-tertiary); opacity: 0.20; }
.zj-home-banner-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.zj-home-banner-text  { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; }
.zj-home-banner-tags  { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zj-home-banner-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.92);
  text-transform: uppercase;
}
.zj-home-banner-tag.activated { background: var(--zj-secondary); color: #fff; }
.zj-home-banner-tag.subtle   { background: transparent; color: rgba(255,255,255,0.78); text-transform: none; letter-spacing: 0.2px; font-weight: 400; }
.zj-home-banner-title { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.zj-home-banner-sub   { font-size: 14px; margin: 0; color: rgba(255,255,255,0.85); line-height: 1.55; max-width: 540px; }
.zj-home-banner-sub b  { color: var(--zj-warning); font-weight: 600; }

.zj-home-xp { display: flex; flex-direction: column; gap: 6px; max-width: 460px; margin-top: 4px; }
.zj-home-xp-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; }
.zj-home-xp-level { display: inline-flex; align-items: center; gap: 6px; color: var(--zj-warning); }
.zj-home-xp-level svg { width: 16px; height: 16px; color: var(--zj-warning); fill: var(--zj-warning); }
.zj-home-xp-text { color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums; }
.zj-home-xp-bar { height: 8px; background: rgba(0,0,0,0.30); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.18); }
.zj-home-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--zj-secondary) 0%, #E07A4B 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.zj-home-stats {
  display: grid;
  /* P3a 对齐：3 项统计（学时/纱长/优率）— 工分已下沉 topbar */
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  padding: 16px;
  position: relative;  /* P9-d：示例数据徽章定位 */
  border-radius: 12px;
  min-width: 280px;
}
.zj-home-stat {
  display: flex; flex-direction: column;
  padding: 4px 12px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.zj-home-stat:last-child { border-right: 0; }
.zj-home-stat-label { font-size: 12px; color: rgba(255,255,255,0.78); display: flex; align-items: center; gap: 5px; }
.zj-home-stat-label svg { width: 13px; height: 13px; opacity: 0.85; }
.zj-home-stat-value { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.zj-home-stat-value b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--zj-font-mono); letter-spacing: 0.01em; }
.zj-home-stat-value .unit { font-size: 11px; color: rgba(255,255,255,0.75); }
.zj-home-stat-sub { font-size: 11px; color: var(--zj-tertiary); font-weight: 500; margin-top: 2px; }
.zj-home-stat-sub.warn { color: var(--zj-warning); }

/* ── 工作车间入口 ── */
.zj-home-workshops-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.zj-home-workshops-head h2 { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: var(--zj-primary); }
.zj-home-workshops-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--zj-secondary); }
.zj-home-workshops-head p  { font-size: 13px; color: var(--zj-text-mute); max-width: 380px; margin: 0; }
.zj-home-workshops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.zj-home-workshop {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--zj-shadow-card);
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.zj-home-workshop:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(27,54,93,0.10); }
.zj-home-workshop-art {
  position: relative; height: 140px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--zj-primary) 0%, var(--zj-accent-hover) 100%);
  color: #fff;
  margin-bottom: 12px;
}
.zj-home-workshop-art svg { display: none; }  /* P3a 对齐：CSS art 完全取代 SVG 子元素 */
.zj-home-workshop-art-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 100%); pointer-events: none; }
/* ── 三个车间图（图片优先 · CSS art 作 fallback） ──
 * 背景栈：顶部高光 → 底部暗角 → 真实车间图 → CSS 渐变 fallback
 * --zj-card-img-* 缺失或 404 时，下层渐变兜底 */
.zj-home-workshop-art.spinning-frame {
  background:
    /* 顶部斜光 */
    radial-gradient(circle at 75% 20%, rgba(255,255,255,0.18) 0%, transparent 50%),
    /* 底部暗角（让 tag / speed 可读） */
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35) 100%),
    /* 主图：环锭纺纱车间长廊（512×279） */
    var(--zj-card-img-spinning, none) center/cover no-repeat,
    /* CSS art fallback：靛蓝细纱机 */
    linear-gradient(135deg, #1B365D 0%, #142a4a 100%);
}
.zj-home-workshop-art.weaving-loom {
  background:
    /* 右上角聚光 */
    radial-gradient(circle at 80% 25%, rgba(255,255,255,0.20) 0%, transparent 55%),
    /* 底部暗角 */
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.40) 100%),
    /* 主图：喷气织机阵列 */
    var(--zj-card-img-weaving, none) center/cover no-repeat,
    /* CSS art fallback：鼠尾草绿织机 */
    linear-gradient(135deg, #4E7D6B 0%, #3a5e51 100%);
}
.zj-home-workshop-art.dyeing-bath {
  background:
    /* 顶部 D65 光束 */
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 50%, transparent 80%),
    /* 底部染液深色 */
    linear-gradient(180deg, transparent 60%, rgba(120,40,20,0.55) 100%),
    /* 主图：染整对色实验室 */
    var(--zj-card-img-dyeing, none) center/cover no-repeat,
    /* CSS art fallback：赭红染浴 */
    linear-gradient(135deg, #C85A32 0%, #a04522 100%);
}
.zj-home-workshop-art-tag {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 4px;
  background: rgba(27,54,93,0.90); color: #fff;
  backdrop-filter: blur(4px);
}
.zj-home-workshop-art-tag.live { background: var(--zj-primary); }
.zj-home-workshop-art-tag.idle { background: var(--zj-tertiary); }
.zj-home-workshop-art-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zj-tertiary-fixed); opacity: 0.95; }
.zj-home-workshop-art-tag.live .dot { background: var(--zj-tertiary-fixed); animation: zj-pulse 1.4s infinite; }
.zj-home-workshop-art-tag svg { width: 12px; height: 12px; opacity: 0.95; }
.zj-home-workshop-art-speed {
  position: absolute; bottom: 8px; right: 8px;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 4px;
  background: rgba(255,255,255,0.95); color: var(--zj-primary);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* ── 车间卡：stack / info / keyvalues（P3a 对齐 Stitch 设计稿） ── */
.zj-home-workshop-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.zj-home-workshop-info  { display: flex; flex-direction: column; gap: 6px; }
.zj-home-workshop-meta  { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--zj-text-mute); }
.zj-home-workshop-meta b { color: var(--zj-secondary); font-weight: 600; }
.zj-home-workshop-meta b.pri { color: var(--zj-secondary); }
.zj-home-workshop-meta b.tri { color: var(--zj-tertiary); }
.zj-home-workshop-keyvalues {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--zj-bg);
  border-radius: 6px;
  border-left: 3px solid var(--zj-primary);
}
.zj-home-workshop-keyvalues-row { font-size: 11px; color: var(--zj-text); line-height: 1.4; }
.zj-home-workshop-keyvalues-row .muted { color: var(--zj-text-mute); font-family: var(--zj-font-mono); }
.zj-home-workshop h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--zj-primary); }
.zj-home-workshop p  { margin: 0 0 12px; font-size: 12px; color: var(--zj-text-mute); line-height: 1.55; min-height: 36px; }
.zj-home-workshop-spec { background: var(--zj-bg); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--zj-text-mute); margin-bottom: 12px; }
.zj-home-workshop-spec-row { display: flex; justify-content: space-between; }
.zj-home-workshop-spec-row b { color: var(--zj-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.zj-home-workshop-spec-row b.accent   { color: var(--zj-secondary); }
.zj-home-workshop-spec-row b.tertiary { color: var(--zj-tertiary); }
.zj-home-workshop-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  background: var(--zj-primary); color: #fff;
  border: 0; cursor: pointer; transition: background 0.15s;
}
.zj-home-workshop-cta:hover { background: var(--zj-accent-hover); }
.zj-home-workshop-cta.idle { background: var(--zj-text-mute); cursor: not-allowed; }
.zj-home-workshop-cta svg { width: 14px; height: 14px; }
@keyframes zj-pulse { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

/* ── 1.5 Resume Project · 中断保护存盘点（Stitch 设计稿段 2） ── */
.zj-home-resume {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, var(--zj-card) 0%, #fff8f3 100%);
  border: 1px solid var(--zj-border);
  border-left: 4px solid var(--zj-secondary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--zj-shadow-card);
}

/* V2.1-D28：教师评语「待看」提醒条（首页横幅与 Resume 之间） */
.zj-home-reviewrem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 18px;
  background: var(--zj-accent-soft);
  border: 1px solid var(--zj-accent);
  border-radius: 12px;
}
.zj-home-reviewrem[hidden] { display: none; }
.zj-home-reviewrem-body {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--zj-text);
}
.zj-home-reviewrem-icon {
  width: 20px;
  height: 20px;
  color: var(--zj-accent);
  flex-shrink: 0;
}
.zj-home-resume-body   { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; justify-content: space-between; }
.zj-home-resume-tags   { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 11px; }
.zj-home-resume-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3px;
}
.zj-home-resume-tag.urgent {
  background: var(--zj-danger-bg);
  color: var(--zj-secondary);
}
.zj-home-resume-tag.urgent .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: zj-pulse 1.4s infinite;
}
.zj-home-resume-meta    { font-size: 11px; color: var(--zj-text-mute); font-family: var(--zj-font-mono); }
.zj-home-resume-heading { margin: 0; font-size: 17px; font-weight: 600; color: var(--zj-primary); line-height: 1.45; }
.zj-home-resume-text    { margin: 0; font-size: 13px; color: var(--zj-text); line-height: 1.6; max-width: 760px; }
.zj-home-resume-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.zj-home-resume-progress-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--zj-text-mute); }
.zj-home-resume-progress-row b { color: var(--zj-tertiary); font-weight: 700; font-variant-numeric: tabular-nums; }
.zj-home-resume-progress-bar { height: 6px; background: var(--zj-bg); border-radius: 999px; overflow: hidden; }
.zj-home-resume-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--zj-tertiary) 0%, #6a9988 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.zj-home-resume-aside  { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; background: rgba(244,239,234,0.55); border-left: 1px solid var(--zj-border); }
.zj-home-resume-stage  {
  position: relative; flex: 1; min-height: 110px;
  border-radius: 8px; overflow: hidden;
  /* P3a.2.2 真实车间图（512×279 加捻三角区 3D 特写）+ 主背景渐变 fallback + 顶部高光 */
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,0.20) 0%, transparent 55%),
    var(--zj-card-img-project, none) center/cover no-repeat,
    linear-gradient(135deg, var(--zj-primary) 0%, var(--zj-accent-hover) 100%);
}
.zj-home-resume-stage-orb {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px);
  display: none;  /* P3a.2.2：真实图已用，CSS art 球层隐藏 */
}
.zj-home-resume-stage-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(27, 54, 93, 0.85) 100%); pointer-events: none; }
.zj-home-resume-stage-meta { position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; flex-direction: column; gap: 4px; color: #fff; z-index: 1; }
.zj-home-resume-stage-meta-row { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }
.zj-home-resume-stage-meta-row svg { width: 12px; height: 12px; opacity: 0.85; }
.zj-home-resume-stage-meta-value { font-size: 13px; font-weight: 700; font-family: var(--zj-font-mono); font-variant-numeric: tabular-nums; color: #fff; }
.zj-home-resume-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  background: var(--zj-secondary); color: #fff;
  border: 0; cursor: pointer;
  transition: background 0.15s;
}
.zj-home-resume-cta:hover { background: #a04522; }
.zj-home-resume-cta svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .zj-home-resume { grid-template-columns: 1fr; } .zj-home-resume-aside { border-left: 0; border-top: 1px solid var(--zj-border); } }

/* ── 展柜 + 工单 并排 8/4（P3a.1.2：对齐 Stitch 屏 1，工单挪回左 8 栏） ── */
.zj-home-mid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.zj-home-mid-left, .zj-home-mid-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.zj-home-section {
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--zj-shadow-card);
}
.zj-home-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 12px; flex-wrap: wrap; }
.zj-home-section-head h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--zj-primary); }
.zj-home-section-head .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--zj-secondary); }
.zj-home-section-sub { font-size: 12px; color: var(--zj-text-mute); margin: 0 0 14px; }
.zj-home-section-head-link { font-size: 12px; color: var(--zj-secondary); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.zj-home-section-head-link svg { width: 13px; height: 13px; }
/* P3a.2.6 工匠成果展柜头部金色星形图标 */
.zj-home-section-head-title { display: inline-flex; align-items: center; gap: 6px; }
.zj-home-section-head-icon { width: 22px; height: 22px; color: var(--zj-secondary); fill: var(--zj-secondary); flex-shrink: 0; }
/* P3a.2.x 排行榜头部奖杯圆形徽章 */
.zj-home-leaderboard-trophy {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--zj-warning-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--zj-secondary); flex-shrink: 0;
}
.zj-home-leaderboard-trophy svg { width: 18px; height: 18px; }
/* P3a.1.4 工单「待处理 N 项关键工单」徽章 */
.zj-home-section-head-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px;
  background: var(--zj-bg); color: var(--zj-text-mute);
  font-family: var(--zj-font-mono);
}
.zj-home-section-head-badge b { color: var(--zj-secondary); font-weight: 700; }

.zj-home-yarncards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zj-home-yarncard {
  position: relative;
  background: var(--zj-bg);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  padding: 12px;
  overflow: hidden;
  transition: transform 0.15s;
}
.zj-home-yarncard:hover { transform: translateY(-2px); }
.zj-home-yarncard-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  background: var(--zj-tertiary); color: #fff;
  letter-spacing: 0.2px;
}
.zj-home-yarncard-badge.feature { background: var(--zj-secondary); }
.zj-home-yarncard-badge.weaving { background: var(--zj-text-mute); }
.zj-home-yarncard-icon {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--zj-primary); color: #fff;
  margin-bottom: 8px;
}
.zj-home-yarncard-icon svg { width: 22px; height: 22px; }
.zj-home-yarncard-icon.feature { background: var(--zj-secondary); }
.zj-home-yarncard-icon.weaving { background: var(--zj-tertiary); }
.zj-home-yarncard h4 { font-size: 13px; font-weight: 600; margin: 0 0 2px; color: var(--zj-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zj-home-yarncard .material { font-size: 11px; color: var(--zj-text-mute); margin: 0 0 8px; }
.zj-home-yarncard-spec { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--zj-text-mute); }
.zj-home-yarncard-spec-row { display: flex; justify-content: space-between; }
.zj-home-yarncard-spec-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.zj-home-yarncard-spec-row b.t { color: var(--zj-tertiary); }
.zj-home-yarncard-spec-row b.s { color: var(--zj-secondary); }
.zj-home-yarncard-spec-row b.p { color: var(--zj-primary); }
.zj-home-yarncard-detail {
  display: block; text-align: center;
  margin-top: 8px; padding: 6px 0;
  font-size: 11px; color: var(--zj-text-mute);
  background: var(--zj-bg);
  border-top: 1px solid var(--zj-border);
  transition: background 0.15s, color 0.15s;
  font-family: var(--zj-font-mono);
}
.zj-home-yarncard:hover .zj-home-yarncard-detail { background: var(--zj-primary); color: #fff; }

/* ── 工单 ── */
.zj-home-workorder {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: var(--zj-bg);
  border-radius: 8px;
  border: 1px solid var(--zj-border);
  margin-bottom: 10px;
}
.zj-home-workorder:last-child { margin-bottom: 0; }
.zj-home-workorder-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: var(--zj-text-mute); margin-bottom: 6px; }
.zj-home-workorder-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
}
.zj-home-workorder-tag.urgent { background: var(--zj-danger-bg); color: var(--zj-secondary); }
.zj-home-workorder-tag.exam   { background: var(--zj-success-bg); color: var(--zj-tertiary); }
.zj-home-workorder-tag.case   { background: var(--zj-primary-bg, rgba(46,94,126,.10)); color: var(--zj-primary); }
.zj-home-workorder-tag.urgent .dot, .zj-home-workorder-tag.exam .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: zj-pulse 1.4s infinite; }
.zj-home-workorder h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--zj-primary); }
.zj-home-workorder p  { margin: 0; font-size: 12px; color: var(--zj-text-mute); line-height: 1.5; }
.zj-home-workorder-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--zj-text-mute); margin-top: 8px; }
.zj-home-workorder-meta b { color: var(--zj-secondary); font-weight: 600; }
.zj-home-workorder-cta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--zj-primary); color: #fff; border: 0; cursor: pointer;
}
.zj-home-workorder-cta:hover { background: var(--zj-accent-hover); }
.zj-home-workorder-cta.idle  { background: var(--zj-text-mute); }
a.zj-home-workorder-cta { text-decoration: none; }
.zj-home-workorder-cta svg { width: 12px; height: 12px; }

/* ── 排行榜 + 每日微课 ── */
.zj-home-leaderboard { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
/* P3b 真值榜：口径 tab / 加载与空态（替换 demo 基准条） */
.zj-home-leaderboard-tabs { display: flex; gap: 6px; margin-top: 10px; }
.zj-home-leaderboard-tabs button {
  padding: 3px 12px; border-radius: 999px; border: 1px solid var(--zj-border, #d8d2c4);
  background: transparent; font-size: 11px; color: var(--zj-text-mute); cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
}
.zj-home-leaderboard-tabs button.active {
  background: var(--zj-primary); border-color: var(--zj-primary); color: #fff;
}
.zj-home-leaderboard-tabs button:not(.active):hover { color: var(--zj-primary); }
.zj-home-leaderboard-empty {
  padding: 14px 12px; text-align: center; font-size: 11px; color: var(--zj-text-mute);
  background: var(--zj-bg); border-radius: 6px;
}
.zj-home-leaderboard-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  background: var(--zj-bg);
  transition: background 0.15s;
}
.zj-home-leaderboard-row:hover { background: var(--zj-table-hover); }
.zj-home-leaderboard-row.you {
  background: rgba(27,54,93,0.06); border: 1px solid rgba(27,54,93,0.18);
}
.zj-home-leaderboard-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.zj-home-leaderboard-rank {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--zj-bg); color: var(--zj-text-mute);
  flex-shrink: 0;
}
.zj-home-leaderboard-rank.t { background: var(--zj-secondary); color: #fff; }
.zj-home-leaderboard-rank.s { background: var(--zj-tertiary); color: #fff; }
.zj-home-leaderboard-name { font-size: 13px; font-weight: 600; color: var(--zj-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zj-home-leaderboard-row.you .zj-home-leaderboard-name { display: flex; align-items: center; gap: 4px; }
.zj-home-leaderboard-you-tag { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: var(--zj-primary); color: #fff; font-weight: 500; }
.zj-home-leaderboard-meta { font-size: 10px; color: var(--zj-text-mute); font-family: var(--zj-font-mono); }
.zj-home-leaderboard-stats { text-align: right; font-size: 11px; font-family: var(--zj-font-mono); }
.zj-home-leaderboard-stats b { display: block; font-weight: 700; color: var(--zj-tertiary); }
.zj-home-leaderboard-stats b.fail { color: var(--zj-secondary); }
.zj-home-leaderboard-stats .score { font-size: 10px; color: var(--zj-text-mute); }

/* ── Uster Gap · 与标杆差距诊断（P3a 对齐 Stitch 设计稿段 5） ── */
.zj-home-leaderboard-gap {
  margin-top: 14px;
  padding: 14px;
  background: var(--zj-bg);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.zj-home-leaderboard-gap-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--zj-text-mute);
}
.zj-home-leaderboard-gap-head b {
  font-size: 13px; font-weight: 700; color: var(--zj-secondary);
  font-family: var(--zj-font-mono); font-variant-numeric: tabular-nums;
}
.zj-home-leaderboard-radar {
  display: block; width: 100%; height: 70px;
}
.zj-home-leaderboard-radar .grid {
  stroke: var(--zj-border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.zj-home-leaderboard-radar .bench {
  stroke: var(--zj-text-mute);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.7;
}
.zj-home-leaderboard-radar .me {
  stroke: var(--zj-secondary);
  fill: var(--zj-secondary);
}
.zj-home-leaderboard-radar path.me {
  fill: none;
  stroke-width: 2.2;
}
.zj-home-leaderboard-radar circle.me {
  stroke: #fff;
  stroke-width: 1.5;
}
.zj-home-leaderboard-radar .label {
  font-size: 10px; fill: var(--zj-text-mute);
  font-family: var(--zj-font-mono);
}
.zj-home-leaderboard-gap-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--zj-text-mute);
}
.zj-home-leaderboard-gap-legend span { display: inline-flex; align-items: center; gap: 5px; }
.zj-home-leaderboard-gap-legend .dot { width: 8px; height: 2px; border-radius: 1px; }
.zj-home-leaderboard-gap-legend .me .dot    { background: var(--zj-secondary); }
.zj-home-leaderboard-gap-legend .bench .dot { background: var(--zj-text-mute); }

.zj-home-tip {
  margin-top: 14px;
  padding: 14px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
}
.zj-home-tip h4 {
  margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--zj-primary);
  display: flex; align-items: center; gap: 6px;
}
.zj-home-tip h4 svg { width: 16px; height: 16px; color: var(--zj-secondary); }
.zj-home-tip p  { margin: 0; font-size: 12px; color: var(--zj-text); line-height: 1.55; }
.zj-home-tip-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--zj-text-mute); }
.zj-home-tip-foot a { color: var(--zj-secondary); font-weight: 600; }

/* ============================================================================
 * Footer（P3a.1.5：对齐 Stitch 屏 1 4 列 footer + 版权底栏）
 * ============================================================================ */
.zj-home-footer {
  margin-top: 8px;
  background: var(--zj-table-head-bg);
  border-top: 1px solid var(--zj-border);
  border-radius: 12px 12px 0 0;
  padding: 32px 28px 14px;
  box-shadow: 0 -1px 6px rgba(27, 54, 93, 0.03);
}
.zj-home-footer-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px; margin-bottom: 24px;
}
.zj-home-footer-col-title {
  font-size: 13px; font-weight: 600; color: var(--zj-text);
  margin-bottom: 12px;
}
.zj-home-footer-brand {
  font-size: 17px; font-weight: 700; color: var(--zj-primary);
  margin-bottom: 10px; letter-spacing: 0.5px;
}
.zj-home-footer-col p {
  font-size: 12px; color: var(--zj-text-mute); line-height: 1.6; margin: 0;
  max-width: 380px;
}
.zj-home-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.zj-home-footer-col li { font-size: 12px; color: var(--zj-text-mute); }
.zj-home-footer-env-list { gap: 8px; }
.zj-home-footer-env-chip {
  background: var(--zj-card);
  padding: 5px 10px; border-radius: 5px;
  font-family: var(--zj-font-mono); font-size: 11px; font-weight: 500;
  color: var(--zj-text);
}
.zj-home-footer-hotline { color: var(--zj-secondary) !important; font-weight: 600; margin-top: 4px; }
.zj-home-footer-bottom {
  padding-top: 16px;
  border-top: 1px solid var(--zj-border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--zj-text-mute);
}
.zj-home-footer-bottom-right { display: flex; align-items: center; gap: 16px; font-family: var(--zj-font-mono); }
@media (max-width: 900px) { .zj-home-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zj-home-footer-cols { grid-template-columns: 1fr; gap: 22px; } }

@media (max-width: 1100px) {
  .zj-home-stats { grid-template-columns: repeat(2, 1fr); }
  .zj-home-workshops { grid-template-columns: 1fr; }
  .zj-home-mid { grid-template-columns: 1fr; }
  .zj-home-yarncards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .zj-home-yarncards { grid-template-columns: 1fr; }
  .zj-home-stats { grid-template-columns: 1fr; }
}


/* ============================================================================
 * 顶栏（Topbar）— admin / teacher / student 共用（P3a.2.1 对齐 Stitch 屏 1 高度 + 5 段 tab）
 * ============================================================================ */
.zj-topbar {
  min-height: 64px;
  background: var(--zj-card);
  border-bottom: 1px solid var(--zj-border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 8px rgba(27, 54, 93, 0.06);
}
.zj-topbar-left  { display: flex; align-items: center; gap: 18px; min-width: 0; }
.zj-topbar-right { display: flex; align-items: center; gap: 12px; }
.zj-topbar-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.zj-topbar-brand .zj-logo { font-size: 19px; font-weight: 700; color: var(--zj-primary); letter-spacing: 0.5px; white-space: nowrap; }
.zj-topbar-brand-sub {
  font-size: 11px; color: var(--zj-text-mute);
  border-left: 1px solid var(--zj-line); padding-left: 12px; margin-left: 4px;
  white-space: nowrap;
}
.zj-topbar-version {
  font-family: var(--zj-font-mono); font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--zj-accent-soft); color: var(--zj-primary);
  letter-spacing: 0.4px;
}
.zj-product-meta { font-size: 12px; color: var(--zj-text-mute); }
.zj-user-name    { font-size: 14px; }

/* 5 段 nav tab（Stitch 风：浅灰胶囊容器 + 选中深靛蓝 + 阴影） */
.zj-topbar-nav {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--zj-table-head-bg);
  border-radius: 8px;
  padding: 4px;
  margin-left: 12px;
}
.zj-topbar-tab {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--zj-text-mute);
  text-decoration: none; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.zj-topbar-tab:hover:not(.active):not(.disabled) { background: var(--zj-table-hover); color: var(--zj-text); }
.zj-topbar-tab.active {
  background: var(--zj-primary); color: #fff; font-weight: 600;
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.18);
}
.zj-topbar-tab.disabled { opacity: 0.4; cursor: not-allowed; }
.zj-topbar-tab[href^="/pages"]:hover { opacity: 0.92; }

/* 工分 */
.zj-topbar-score {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--zj-bg);
  font-family: var(--zj-font-mono); font-size: 12px;
  color: var(--zj-text-mute);
  white-space: nowrap; flex-shrink: 0;
}
.zj-topbar-score .label b, .zj-topbar-score b { color: var(--zj-secondary); font-weight: 700; }

/* 通知钟 */
.zj-topbar-bell {
  position: relative;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 0; cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--zj-text-mute);
  transition: background 0.12s, color 0.12s;
}
.zj-topbar-bell:hover { background: var(--zj-table-hover); color: var(--zj-text); }
.zj-topbar-bell .badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--zj-secondary); color: #fff;
  font-family: var(--zj-font-mono); font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 用户区（头像 + 姓名 + 角色胶囊） */
.zj-topbar-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding-left: 8px;
  cursor: default;
}
.zj-topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zj-primary); color: #fff;
  font-weight: 700; font-size: 13px;
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.15);
  flex-shrink: 0;
}
.zj-topbar-avatar.zj-role-student { background: var(--zj-primary); }
.zj-topbar-avatar.zj-role-teacher { background: var(--zj-tertiary); }
.zj-topbar-avatar.zj-role-admin   { background: var(--zj-secondary); }
.zj-topbar-name { font-size: 13px; font-weight: 600; color: var(--zj-text); white-space: nowrap; }
.zj-topbar-role-pill {
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--zj-accent-soft); color: var(--zj-primary);
  white-space: nowrap; flex-shrink: 0;
}
.zj-topbar-role-pill.zj-role-student { background: var(--zj-accent-soft); color: var(--zj-primary); }
.zj-topbar-role-pill.zj-role-teacher { background: var(--zj-success-bg); color: var(--zj-tertiary); }
.zj-topbar-role-pill.zj-role-admin   { background: var(--zj-danger-bg); color: var(--zj-secondary); }

@media (max-width: 1280px) {
  /* D28-3（主人 20:02 验收）：顶栏导航不再隐藏，改为窄屏横滑兜底；
     首页任何宽度都不再恢复侧栏（Stitch 屏 1 无侧栏单栏是基准） */
  .zj-topbar-nav {
    margin-left: 8px;
    max-width: 44vw;
    overflow-x: auto;
    scrollbar-width: none;         /* Firefox */
    flex-shrink: 1;
  }
  .zj-topbar-nav::-webkit-scrollbar { display: none; }
  .zj-topbar-name { display: none; }
  .zj-topbar-role-pill { display: none; }
  .zj-topbar-brand-sub { display: none; }
}
@media (max-width: 900px) {
  .zj-topbar-score { display: none; }
}

.zj-role-pill {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--zj-accent-soft);
  color: var(--zj-accent);
}
/* 三角色按 Tactile Loom 5 角色 token 着色（P3a 阶段1③，2026-10-10）
 * student → primary 靛蓝 / teacher → tertiary 鼠尾草 / admin → secondary 赭红 */
.zj-role-pill.zj-role-student { background: var(--zj-accent-soft); color: var(--zj-primary); }
.zj-role-pill.zj-role-teacher { background: var(--zj-success-bg); color: var(--zj-tertiary); }
.zj-role-pill.zj-role-admin   { background: var(--zj-danger-bg);  color: var(--zj-secondary); }

/* ============================================================================
 * 按钮
 * ============================================================================ */
.zj-btn {
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--zj-border);
  background: var(--zj-card);
  font-size: 13px;
  color: var(--zj-text);
}
.zj-btn:hover        { background: var(--zj-bg); }
.zj-btn-primary      { background: var(--zj-accent); color: #fff; border-color: var(--zj-accent); }
.zj-btn-primary:hover{ background: var(--zj-accent-hover); }
.zj-btn-danger       { color: var(--zj-danger); border-color: var(--zj-danger); background: #fff; }
.zj-btn-danger:hover { background: var(--zj-danger-bg); }
.zj-btn-ghost        { border-color: transparent; }
.zj-btn-ghost:hover  { background: var(--zj-accent-soft); color: var(--zj-accent); }

/* ============================================================================
 * 主体布局（sidebar + main）
 * ============================================================================ */
body.zj-shell { display: flex; flex-direction: column; min-height: 100vh; }
.zj-body     { flex: 1; display: flex; min-height: 0; }

/* 首页驾驶舱：Stitch 屏 1 是无侧栏单栏布局 — body.zj-home-active 时折叠侧栏 */
body.zj-home-active .zj-sidebar { display: none; }
body.zj-home-active .zj-main    { padding: 24px 36px; max-width: 1280px; margin: 0 auto; width: 100%; }
/* 全屏模式（D20e 补漏）：首页同样放开 1280px 居中限宽，与 .zj-main-full 全屏规则一致 */
:fullscreen body.zj-home-active .zj-main,
body.zj-page-fullscreen.zj-home-active .zj-main { max-width: none; }
/* 宽屏自适应（D28-4，主人 20:04 方向拍板）：窗口 ≥1600px 时首页随窗口放宽、但有 1560px 上限，
   避免 D20e-3 无限通栏导致的存盘点卡内部错位；<1600px 仍保持 1280 基准 */
@media (min-width: 1600px) {
  body.zj-home-active .zj-main { max-width: 1560px; }
}

.zj-sidebar {
  width: 220px;
  background: var(--zj-side-bg);
  color: var(--zj-side-text);
  padding: 18px 0;
  flex-shrink: 0;
}
.zj-side-group         { padding: 0 16px; margin-bottom: 18px; }
.zj-side-group-title   {
  font-size: 11px;
  color: var(--zj-side-group-title);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px 8px;
}
.zj-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  margin: 1px 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--zj-side-text);
  transition: background 0.12s;
  user-select: none;
}
.zj-side-item:hover  { background: var(--zj-side-active-bg); color: var(--zj-side-active); }
.zj-side-item.active { background: var(--zj-accent); color: #fff; font-weight: 500; }
.zj-side-icon        { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }

/* ============================================================================
 * 状态条（P3a.1.1：机台/PLC/捻度/温湿度/张力 · 对齐 Stitch 屏 1 灰色细条）
 * ============================================================================ */
.zj-status-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: var(--zj-table-head-bg);          /* 浅米色背景 */
  color: var(--zj-text-mute);
  font-family: var(--zj-font-mono);
  font-size: 11px; font-weight: 500;
  padding: 6px 28px;
  border-bottom: 1px solid var(--zj-border);
}
.zj-status-bar-left, .zj-status-bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zj-status-bar .sep   { color: rgba(107, 119, 133, 0.5); }
.zj-status-bar .hl    { color: var(--zj-secondary); font-weight: 600; }  /* 捻度高亮（赭红） */

/* P9-d 示例数据徽章：P3a 硬编码占位值的视觉标注（红线：占位不编造 → 标明示例） */
.zj-demo-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px dashed rgba(107, 119, 133, 0.55);
  color: var(--zj-text-mute);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.5;
  white-space: nowrap;
  user-select: none;
}
/* 统计卡内的徽章：绝对定位到右上角（.zj-home-stats 需 position:relative） */
.zj-home-stats > .zj-demo-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 1100px) { .zj-status-bar-right { display: none; } }
@media (max-width: 700px)  { .zj-status-bar { font-size: 10px; padding: 5px 14px; } }

/* ============================================================================
 * 主内容
 * ============================================================================ */
.zj-main       { flex: 1; padding: 24px 28px; overflow-y: auto; }
.zj-page-title { font-size: 22px; font-weight: 700; color: var(--zj-text); margin: 0 0 6px; }
.zj-page-sub   { font-size: 13px; color: var(--zj-text-mute); margin: 0 0 22px; }

/* 视图切换（侧栏点击） */
.zj-view       { display: none; }
.zj-view.active{ display: block; }

/* ============================================================================
 * 模块卡片（首页 4 模块）
 * ============================================================================ */
.zj-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.zj-module-card {
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  padding: 18px 16px 16px;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  cursor: pointer;
  display: flex; flex-direction: column;
  min-height: 130px;
}
.zj-module-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--zj-shadow-card);
  border-color: var(--zj-accent-soft);
}
.zj-module-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.zj-module-icon {
  width: 32px; height: 32px;
  background: var(--zj-accent-soft);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--zj-accent);
}
.zj-module-title     { font-size: 16px; font-weight: 600; color: var(--zj-text); }
.zj-module-desc      { font-size: 13px; color: var(--zj-text-mute); line-height: 1.55; flex: 1; }

/* 模块标签：M1 蓝色（已就绪） / M2-M4 红色（规划中） */
.zj-module-tag {
  font-size: 11px;
  background: var(--zj-tag-bg);
  color: var(--zj-tag-text);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  align-self: flex-start;
}
.zj-module-tag.placeholder { background: var(--zj-danger-bg); color: var(--zj-danger); }

/* 占位容器（M0.5 用：tag + 空状态文本） */
.zj-module-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
}
.zj-module-placeholder .zj-module-tag { margin-bottom: 0; }

/* 空状态 */
.zj-empty {
  text-align: center;
  color: var(--zj-text-mute);
  font-size: 13px;
  padding: 40px 16px;
}

/* ============================================================================
 * 数据表（teacher / admin）
 * ============================================================================ */
.zj-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
.zj-table th, .zj-table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--zj-border);
}
.zj-table th {
  background: var(--zj-table-head-bg);
  color: var(--zj-text-mute);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.zj-table tr:last-child td { border-bottom: none; }
.zj-table tr:hover td      { background: var(--zj-table-hover); }
.zj-table-actions          { display: flex; gap: 6px; }
.zj-table-actions button   { font-size: 12px; padding: 4px 10px; }

/* ── P9-a：教师端织分管理 ─────────────────────────── */
.zj-points-adjust-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.zj-points-adjust-form .zj-field { margin-bottom: 0; min-width: 140px; }
.zj-points-adjust-form .zj-field > span { display: block; font-size: 12px; color: var(--zj-text-mute); margin-bottom: 5px; }
.zj-points-msg { margin-top: 10px; font-size: 13px; color: var(--zj-accent); }
.zj-table input[type="text"] {
  width: 110px; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--zj-border); border-radius: 6px; background: var(--zj-bg);
  color: var(--zj-text);
}
.zj-table input[type="text"]:focus { border-color: var(--zj-accent); outline: none; }

/* 状态徽章 */
.zj-pill-ok  { background: var(--zj-success-bg); color: var(--zj-success); padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.zj-pill-off { background: var(--zj-danger-bg);  color: var(--zj-danger);  padding: 2px 8px; border-radius: 4px; font-size: 11px; }

/* ============================================================================
 * 工具条（admin）
 * ============================================================================ */
.zj-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.zj-toolbar input[type="text"],
.zj-toolbar select {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--zj-border);
  border-radius: 5px;
  background: var(--zj-card);
  outline: none;
}
.zj-toolbar input[type="text"]:focus,
.zj-toolbar select:focus       { border-color: var(--zj-accent); }

/* ============================================================================
 * 模态对话框（admin）
 * ============================================================================ */
.zj-modal-mask {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
.zj-modal-mask.active { display: flex; }
.zj-modal {
  background: var(--zj-card);
  border-radius: 10px;
  width: 460px;
  max-width: 92vw; max-height: 86vh; overflow-y: auto;
  box-shadow: var(--zj-shadow-modal);
}
.zj-modal-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--zj-border);
  display: flex; align-items: center; justify-content: space-between;
}
.zj-modal-head h3 { margin: 0; font-size: 16px; }
.zj-modal-close {
  cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--zj-text-mute);
  background: none; border: none; padding: 0;
}
.zj-modal-body { padding: 18px 22px; }
.zj-modal-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--zj-border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* 表单字段 */
.zj-field       { margin-bottom: 12px; }
.zj-field label { display: block; font-size: 12px; color: var(--zj-text-mute); margin-bottom: 5px; }
.zj-field input,
.zj-field select {
  width: 100%;
  padding: 8px 11px;
  font-size: 13px;
  border: 1px solid var(--zj-border);
  border-radius: 5px;
  outline: none;
}
.zj-field input:focus,
.zj-field select:focus { border-color: var(--zj-accent); }
.zj-err { color: var(--zj-danger); font-size: 12px; min-height: 18px; }

/* ============================================================================
 * 计数卡片（admin 首页）
 * ============================================================================ */
.zj-stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.zj-stat-card {
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  padding: 14px 18px;
  flex: 1; min-width: 140px;
}
.zj-stat-card-label { font-size: 12px; color: var(--zj-text-mute); }
.zj-stat-card-value { font-size: 24px; font-weight: 500; color: var(--zj-accent); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ============================================================================
 * 语言切换器（顶栏右侧）
 * ============================================================================ */
.zj-lang-switch {
  display: inline-flex;
  gap: 2px;
  margin-right: 12px;
  background: var(--zj-bg);
  border-radius: 6px;
  padding: 2px;
}
.zj-lang-switch button {
  background: transparent;
  border: none;
  color: var(--zj-text-mute);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.zj-lang-switch button:hover { color: var(--zj-text); }
.zj-lang-switch button.active {
  background: var(--zj-accent);
  color: #fff;
  font-weight: 600;
}

/* ============================================================================
 * 配置中心（M1 配置中心 + M2 模型参数化）
 * ============================================================================ */
.zj-main-full { width: 100%; padding: 24px 32px 32px; max-width: 1400px; margin: 0 auto; }
/* 全屏模式 — 整个布局撑满，不再居中限宽
   覆盖两条触发路径：
     a) Fullscreen API（documentElement / stage）→ :fullscreen 伪类
     b) F11 / 浏览器菜单 / OS 级全屏（无 fullscreenElement）→ .zj-page-fullscreen class */
:fullscreen .zj-main-full,
.zj-page-fullscreen .zj-main-full { max-width: none; margin: 0; padding: 16px 24px; }
:fullscreen .zj-spin-layout,
.zj-page-fullscreen .zj-spin-layout { height: calc(100vh - 120px); }
/* 宽屏窗口（D20e-3）：视口 ≥1600px 时放开居中限宽，避免把浏览器窗口拖大后两侧大片留白；
   padding 同步收到全屏同款 16px 24px，避免 32px 边距在宽屏显得过空 */
@media (min-width: 1600px) {
  .zj-main-full { max-width: none; }
}

/* ── 面包屑 + 返回（模块独立页通用） ── */
.zj-page-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.zj-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 16px;
  background: var(--zj-card); border: 1px solid var(--zj-border);
  color: var(--zj-text); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.zj-back-link:hover { background: var(--zj-accent-soft); border-color: var(--zj-accent); color: var(--zj-accent); }
.zj-back-arrow { font-size: 14px; line-height: 1; }
.zj-breadcrumb { font-size: 12px; color: var(--zj-text-mute); }
.zj-breadcrumb-sep { letter-spacing: 0.3px; }

.zj-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--zj-border);
}
.zj-page-head h1 { margin: 0 0 4px 0; }
.zj-page-head p { margin: 0; color: var(--zj-text-mute); font-size: 13px; }
.zj-spin-page-head { border-bottom-color: transparent; padding-bottom: 0; margin-bottom: 14px; }
.zj-spin-page-head h1 { font-size: 20px; }
/* V2.1-D1 前纺机台切换器 */
.zj-p21-switch { display: inline-flex; gap: 4px; background: var(--zj-bg-soft, rgba(31,45,61,.06)); border: 1px solid var(--zj-border); border-radius: 10px; padding: 4px; }
.zj-p21-switch-btn { border: 0; background: transparent; color: var(--zj-text-mute); font-size: 13px; font-weight: 500; padding: 6px 16px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.zj-p21-switch-btn:hover { color: var(--zj-text); }
.zj-p21-switch-btn.active { background: var(--zj-primary, #2e5e7e); color: #fff; }

/* D29：工序页工单列表（本机型案例 → task.html?case=） */
.zj-p21-workorders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zj-p21-workorders li { margin: 0; }
.zj-p21-workorder-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--zj-border); border-radius: 8px; background: var(--zj-card); text-decoration: none; color: var(--zj-text); transition: border-color .15s, background .15s; }
.zj-p21-workorder-item:hover { border-color: var(--zj-primary, #2e5e7e); background: var(--zj-hover, rgba(46,94,126,.06)); }
.zj-p21-workorder-title { font-size: 13px; font-weight: 500; line-height: 1.45; }
.zj-p21-workorder-go { flex-shrink: 0; font-size: 12px; color: var(--zj-primary, #2e5e7e); }
.zj-p21-workorder-empty { font-size: 13px; color: var(--zj-text-mute); padding: 8px 4px; }
/* D8：标题区机型徽标（机型由模块首页卡片导航，页内不再设切换 tab） */
.zj-p21-machine-badge { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; vertical-align: 3px; background: rgba(46, 94, 126, 0.12); color: var(--zj-primary, #2e5e7e); border: 1px solid rgba(46, 94, 126, 0.3); }
.zj-config-role-badge .zj-pill { padding: 6px 12px; border-radius: 16px; font-size: 13px; font-weight: 500; }
.zj-pill-admin { background: rgba(110, 86, 207, 0.15); color: #6e56cf; border: 1px solid rgba(110, 86, 207, 0.3); }
.zj-pill-teacher { background: rgba(45, 138, 86, 0.12); color: #2d8a56; border: 1px solid rgba(45, 138, 86, 0.3); }

.zj-config-group {
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.zj-config-group-head { margin-bottom: 14px; }
.zj-config-group-title { margin: 0 0 4px 0; font-size: 16px; color: var(--zj-accent); }
.zj-config-group-sub { margin: 0; color: var(--zj-text-mute); font-size: 12px; }
.zj-config-locked-tip {
  display: inline-block; margin-top: 6px; font-size: 12px;
  color: var(--zj-warn, #b45309); background: rgba(180, 83, 9, 0.08);
  padding: 3px 8px; border-radius: 4px;
}
.zj-config-rows { display: flex; flex-direction: column; gap: 8px; }
.zj-config-row {
  display: grid;
  grid-template-columns: 1fr 180px 180px;
  gap: 16px; align-items: center;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.zj-config-row:hover { background: rgba(110, 86, 207, 0.04); }
.zj-config-row.modified { background: rgba(220, 152, 67, 0.08); border-color: rgba(220, 152, 67, 0.4); }
.zj-config-row.locked { opacity: 0.6; }
.zj-config-row.locked input { cursor: not-allowed; }
.zj-config-row-main { min-width: 0; }
.zj-config-row-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zj-config-label { font-weight: 500; font-size: 14px; color: var(--zj-text); }
.zj-config-row-desc { font-size: 12px; color: var(--zj-text-mute); margin-top: 2px; line-height: 1.4; }

.zj-config-source {
  display: inline-block; font-size: 11px; padding: 2px 7px;
  border-radius: 10px; font-weight: 500;
  background: rgba(110, 86, 207, 0.12); color: #6e56cf;
}
.zj-source-schema { background: rgba(120, 120, 120, 0.12); color: var(--zj-text-mute); }
.zj-source-admin { background: rgba(45, 138, 86, 0.12); color: #2d8a56; }
.zj-source-teacher { background: rgba(220, 152, 67, 0.16); color: #b45309; }
.zj-config-modified-mark {
  display: inline-block; font-size: 11px; padding: 2px 7px;
  border-radius: 10px; font-weight: 500;
  background: rgba(220, 152, 67, 0.2); color: #b45309;
}

.zj-config-row-input {
  display: flex; align-items: center; gap: 6px;
}
.zj-config-row-input input[type="number"] {
  flex: 1; min-width: 0;
  background: var(--zj-bg);
  border: 1px solid var(--zj-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--zj-text);
  font-variant-numeric: tabular-nums;
}
.zj-config-row-input input[type="number"]:focus {
  outline: none;
  border-color: var(--zj-accent);
  background: var(--zj-card);
}
.zj-config-row-input input[type="number"]:disabled {
  background: rgba(120, 120, 120, 0.06);
  color: var(--zj-text-mute);
}
.zj-config-unit { font-size: 12px; color: var(--zj-text-mute); min-width: 24px; }

.zj-config-row-meta {
  font-size: 11px; color: var(--zj-text-mute);
  display: flex; flex-direction: column; gap: 2px;
}
.zj-config-range { font-variant-numeric: tabular-nums; }
.zj-config-default { font-style: italic; }

.zj-config-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 14px 16px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  position: sticky; bottom: 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
.zj-config-dirty {
  font-size: 12px; color: #b45309;
  background: rgba(220, 152, 67, 0.14);
  padding: 4px 10px; border-radius: 12px;
}
.zj-config-toolbar-spacer { flex: 1; }
.zj-config-toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }

.zj-config-audit {
  margin-top: 30px;
  padding: 18px 22px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
}
.zj-config-audit-title { margin: 0 0 4px 0; font-size: 15px; }
.zj-config-audit-sub { margin: 0 0 14px 0; color: var(--zj-text-mute); font-size: 12px; }
.zj-config-detail { font-size: 13px; }
.zj-config-detail p { margin: 0 0 10px 0; }

/* ── M4.1 细纱工序（自由纺 + YarnCard）────────────────── */
/* P7.x：单 layout 三栏结构（左 300 + 中 1fr + 右 320），取消顶部 mode tab */
.zj-spin-layout {
  display: grid;
  /* D12：窄屏（如 13 寸笔记本）下中栏 1fr 曾被 300+320 定宽挤成细条，两侧改 minmax 让位 */
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px;
  align-items: stretch;
  height: calc(100vh - 180px);   /* topbar + page-nav + page-head + 面包屑 */
  min-height: 0;                 /* 短屏不强制最小高度，避免溢出折叠以下 */
}
/* D12：视口 ≤1150px 时三栏同步收窄（真实视口 300+320 优先级高于 fr，minmax 上限仍吃满） */
@media (max-width: 1150px) {
  .zj-spin-layout {
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(190px, 240px);
    gap: 12px;
  }
}
.zj-spin-panel {
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
  min-height: 0;
}
.zj-spin-section { display: flex; flex-direction: column; gap: 10px; }
/* P7.x 美观清单 #2：节间距 token 统一（卡片内 16px、标题-内容 8px） */
.zj-spin-panel { gap: 18px; padding: 16px; }
.zj-spin-section-title { padding-bottom: 8px; }
.zj-spin-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--zj-accent);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--zj-border);
  letter-spacing: 0.3px;
}
.zj-spin-slider-row {
  display: grid;
  grid-template-columns: 78px 1fr 64px;
  gap: 8px;
  align-items: center;
}
.zj-spin-slider-row label {
  font-size: 12px;
  color: var(--zj-text-mute);
}
.zj-spin-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--zj-accent);
}
.zj-spin-slider-row input[type="range"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── P2 · 滑杆刻度层（注入位置绝对定位，不参与交互） ── */
.zj-spin-slider-track {
  position: relative;
  width: 100%;
  min-height: 42px;          /* input + marks 留 14px 给 marks 文字 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.zj-spin-slider-track input[type="range"] { width: 100%; display: block; }
.zj-spin-slider-marks {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;                  /* 贴 track 底部，避开 input */
  height: 14px;
  pointer-events: none;       /* 不挡滑杆交互 */
}
.zj-spin-slider-mark {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.3px;     /* 防止英文 mark 文字相邻重叠 */
  color: var(--zj-text-mute);
}
.zj-spin-slider-mark::before {
  content: '';
  display: block;
  width: 1px;
  height: 4px;
  background: currentColor;
  margin-bottom: 2px;
  opacity: 0.7;
}
/* 针织 = 鼠尾草绿（柔软 / 适用针织物）*/
.zj-spin-slider-mark.zj-mark-knit   { color: var(--zj-tertiary); }
/* 机织 = 靛蓝主色（标准机织物）— 文字垂直错位上行，避开水平重叠 */
.zj-spin-slider-mark.zj-mark-weave  {
  color: var(--zj-primary);
  transform: translateX(-50%) translateY(-10px);
}
/* 强捻 = 赭红（高捻度区，工艺/动力超临界）*/
.zj-spin-slider-mark.zj-mark-strong { color: var(--zj-secondary); }
/* 锭速临界 = 赭红（≥ 此线锭子振动/断头风险陡升）*/
.zj-spin-slider-mark.zj-mark-safety {
  color: var(--zj-secondary);
  font-weight: 600;
}
.zj-spin-slider-mark.zj-mark-safety::before {
  width: 2px;
  height: 6px;
  background: var(--zj-secondary);
  opacity: 1;
}
.zj-spin-check input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.zj-btn:disabled,
.zj-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }
.zj-spin-val-cell {
  display: inline-flex; align-items: baseline; gap: 2px;
  justify-content: flex-end;
}
.zj-spin-slider-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--zj-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.zj-spin-slider-unit {
  font-size: 10px;
  color: var(--zj-text-mute);
}

.zj-spin-gauge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.zj-spin-gauge {
  background: var(--zj-bg);
  border-radius: 6px;
  padding: 8px 10px;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.zj-spin-gauge:has(.zj-spin-gauge-val.over)   { border-color: var(--zj-danger); }
.zj-spin-gauge:has(.zj-spin-gauge-val.under)  { border-color: var(--zj-warning); }
.zj-spin-gauge-label {
  font-size: 11px;
  color: var(--zj-text-mute);
}
.zj-spin-gauge-val-line {
  display: flex; align-items: baseline; gap: 3px;
  margin-top: 2px;
}
.zj-spin-gauge-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--zj-accent);
  font-variant-numeric: tabular-nums;
}
.zj-spin-gauge-val.over  { color: var(--zj-danger); }
.zj-spin-gauge-val.under { color: var(--zj-warning); }
.zj-spin-gauge-unit {
  font-size: 11px;
  color: var(--zj-text-mute);
  font-weight: 400;
}

.zj-spin-check-row {
  margin-top: 4px;
}
.zj-spin-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--zj-text);
  cursor: pointer;
}
.zj-spin-check input[type="checkbox"] {
  accent-color: var(--zj-accent);
}
.zj-spin-hint-tip {
  font-size: 11px;
  color: var(--zj-text-mute);
  margin-left: 4px;
}

.zj-spin-cost-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--zj-bg);
}
.zj-spin-cost-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  font-weight: 500;
  transition: width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 成本段 4 色（P3a 阶段1③）— 走 5 角色 token */
.zj-spin-cost-seg-material    { background: var(--zj-tertiary); }
.zj-spin-cost-seg-energy      { background: var(--zj-primary); }
.zj-spin-cost-seg-breakage    { background: var(--zj-secondary); }
.zj-spin-cost-seg-efficiency  { background: var(--zj-warning); }
.zj-spin-cost-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  font-size: 11px;
  color: var(--zj-text-mute);
}
.zj-spin-cost-legend-item { display: flex; align-items: center; gap: 4px; }
.zj-spin-cost-legend-dot {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}
.zj-spin-cost-legend-dot.material    { background: var(--zj-tertiary); }
.zj-spin-cost-legend-dot.energy      { background: var(--zj-primary); }
.zj-spin-cost-legend-dot.breakage    { background: var(--zj-secondary); }
.zj-spin-cost-legend-dot.efficiency  { background: var(--zj-warning); }
.zj-spin-cost-total {
  font-size: 12px;
  color: var(--zj-text);
}
.zj-spin-cost-total b { color: var(--zj-accent); font-weight: 600; }

.zj-spin-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.zj-spin-actions .zj-btn { flex: 1; }
.zj-btn-block { width: 100%; display: block; }
.zj-spin-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--zj-tertiary);  /* 鼠尾草绿：运行正常 */
  padding: 4px 0;
}
.zj-spin-status.breaking { color: var(--zj-secondary); }  /* 赭红：断头/异常 */
.zj-spin-action-hint {
  font-size: 11px;
  color: var(--zj-text-mute);
  line-height: 1.4;
  padding: 4px 6px 0;
  text-align: center;
}

/* ── 中央：3D 视窗 + 曲线 ── */
.zj-spin-center {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
}
.zj-spin-stage {
  position: relative;
  background:
    radial-gradient(ellipse at center top, rgba(36,65,143,0.06), transparent 60%),
    linear-gradient(180deg, #f0f3f7 0%, #dde3eb 100%);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 2px rgba(15,23,42,0.04);
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}
.zj-spin-stage canvas { display: block; }
.zj-p21-refvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #101418;
}
/* 参考视频（D6-fix）：保持原三栏布局——左栏列表 / 中栏整窗播放 / 右栏介绍 */
.zj-p21-reflist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zj-p21-refitem {
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  background: var(--zj-card);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.zj-p21-refitem:hover { border-color: var(--zj-accent); }
.zj-p21-refitem.active {
  border-color: var(--zj-accent);
  box-shadow: 0 0 0 1px var(--zj-accent);
}
.zj-p21-refitem-title { font-size: 14px; font-weight: 600; color: var(--zj-text); }
.zj-p21-refitem-dur { font-size: 12px; color: var(--zj-text-mute); margin-top: 4px; }
.zj-p21-reftitle { margin: 0 0 6px; font-size: 15px; color: var(--zj-text); }
.zj-p21-refdesc { margin: 0; font-size: 13px; line-height: 1.7; color: var(--zj-text-mute); }
/* D10b：参考视频空片源诚实空态（收录中） */
.zj-p21-refitem-empty { padding: 18px 14px; font-size: 13px; color: var(--zj-text-mute); text-align: center; border: 1px dashed var(--zj-border); border-radius: 8px; }
.zj-spin-stage-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.zj-spin-stage-tag {
  background: rgba(36, 65, 143, 0.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.zj-spin-stage-tag.warn { background: rgba(192, 57, 43, 0.9); }
/* 3D 视窗全屏切换按钮（右上角） */
.zj-spin-stage-fullscreen {
  pointer-events: auto;
  background: rgba(27, 54, 93, 0.85);
  color: #fff;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.zj-spin-stage-fullscreen svg { width: 16px; height: 16px; }
.zj-spin-stage-fullscreen:hover { background: var(--zj-primary); }
.zj-spin-stage-fullscreen.active { background: var(--zj-secondary); }

/* M4.1 「开始纺纱」长度 HUD（右上 tag 行第 3 个；带 ● 绿点表示纺纱中） */
.zj-spin-stage-length {
  background: rgba(255,255,255,0.85);
  color: var(--zj-text-mute);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.zj-spin-stage-length.running {
  background: rgba(46, 139, 86, 0.92);   /* 运行中绿底 */
  color: #fff;
  box-shadow: 0 1px 4px rgba(46,139,86,0.4);
}
.zj-spin-stage-length[hidden] { display: none; }

/* M4.1 P9-b+ 断纱计数 HUD（长度 tag 旁；>0 变红警示） */
.zj-spin-stage-breaks {
  background: rgba(255,255,255,0.85);
  color: var(--zj-text-mute);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.zj-spin-stage-breaks.hit {
  background: rgba(200, 60, 60, 0.92);
  color: #fff;
  box-shadow: 0 1px 4px rgba(200,60,60,0.4);
}
.zj-spin-stage-breaks[hidden] { display: none; }

/* M4.1 机型标注：3D 台左下角（参考 FA506 教学示意轮廓） */
.zj-spin-stage-model {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(255,255,255,0.8);
  color: var(--zj-text-mute);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  pointer-events: auto;
  cursor: help;
  max-width: 70%;
  z-index: 5; /* 盖过同为绝对定位的 WebGL canvas（DOM 序在标注之后） */
}

/* P9-b+ 交单报告运行证据条 */
.zj-task-report-evidence {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--zj-accent-soft, rgba(43, 84, 148, 0.08));
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--zj-text-mute);
}
.zj-spin-stage-tip {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(255,255,255,0.85);
  color: var(--zj-text-mute);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  pointer-events: none;
  z-index: 2;
  font-weight: 500;
}

.zj-spin-stage-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  font-size: 11px;
  color: var(--zj-text-mute);
}
.zj-spin-stage-hint {
  padding: 2px 8px;
  background: var(--zj-bg);
  border-radius: 10px;
  white-space: nowrap;
}

.zj-spin-curve-canvas {
  width: 100%;
  height: 100px;
  display: block;
  background: #fafbfc;
  border: 1px solid var(--zj-border);
  border-radius: 6px;
}

/* ── 右：指引 + 历史 ── */
.zj-spin-help {
  margin: 0; padding-left: 18px;
  font-size: 12px; color: var(--zj-text-mute);
  line-height: 1.65;
}
.zj-spin-help li { margin-bottom: 4px; }
.zj-spin-help li::marker { color: var(--zj-accent); font-weight: 600; }
.zj-spin-history-hint {
  font-size: 11px;
  color: var(--zj-text-mute);
  font-style: italic;
}
.zj-spin-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.zj-spin-history-empty {
  padding: 18px 10px;
  text-align: center;
  color: var(--zj-text-mute);
  font-size: 12px;
  line-height: 1.5;
  border: 1px dashed var(--zj-border);
  border-radius: 8px;
  background: var(--zj-bg);
}
.zj-spin-history-item {
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--zj-bg);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.zj-spin-history-item:hover { background: var(--zj-accent-soft); border-color: var(--zj-accent); }
.zj-spin-history-item.open {
  background: var(--zj-card);
  border-color: var(--zj-accent);
  box-shadow: 0 2px 8px rgba(36, 65, 143, 0.12);
}
.zj-spin-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 6px;
}
.zj-spin-history-id { font-weight: 600; color: var(--zj-accent); }
.zj-spin-history-meta { font-size: 11px; color: var(--zj-text-mute); flex: 1; text-align: right; }
.zj-spin-history-toggle {
  font-size: 10px;
  color: var(--zj-text-mute);
  transition: transform 0.2s;
}
.zj-spin-history-item.open .zj-spin-history-toggle { transform: rotate(180deg); }
/* V2.1-D27：教师评语块（交卷记录 / 考核锁定面板共用） */
.zj-spin-history-comment {
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--zj-accent);
  background: var(--zj-accent-soft);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--zj-text);
  word-break: break-word;
}
.zj-spin-history-comment-label {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--zj-accent);
  margin-bottom: 2px;
}
.zj-spin-history-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.zj-spin-history-body b { color: var(--zj-text); font-weight: 500; }
.zj-spin-history-detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--zj-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.zj-spin-history-detail[hidden] { display: none; }
.zj-spin-history-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--zj-text-mute);
  padding: 1px 0;
}
.zj-spin-history-detail-row b {
  color: var(--zj-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.zj-spin-history-detail-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--zj-border);
}
.zj-spin-history-del {
  background: transparent;
  border: 1px solid var(--zj-border);
  color: var(--zj-text-mute);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.zj-spin-history-del svg { width: 10px; height: 10px; }
.zj-spin-history-del:hover {
  background: var(--zj-secondary);
  border-color: var(--zj-secondary);
  color: #fff;
}

.zj-spin-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--zj-success);
  color: #fff;
  padding: 8px 18px;
  border-radius: 18px;
  font-size: 13px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.25s;
}
.zj-spin-toast.show { opacity: 1; }
.zj-spin-toast.err { background: var(--zj-danger); }

/* ── M4.1 P7：练习模式（peak / spiral / break）────────────────── */
.zj-spin-section-sub {
  font-size: 12px;
  color: var(--zj-text-mute);
  margin: 0 0 6px 0;
  line-height: 1.5;
}
.zj-spin-level-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 13px;
}
.zj-spin-level-label {
  color: var(--zj-text-mute);
  font-size: 12px;
  margin-right: 4px;
}
.zj-spin-level-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid var(--zj-border);
  background: var(--zj-card);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  color: var(--zj-text-mute);
}
.zj-spin-level-chip:hover { background: var(--zj-accent-soft); color: var(--zj-accent); }
.zj-spin-level-chip input[type="radio"] { display: none; }
.zj-spin-level-chip:has(input:checked) {
  background: var(--zj-accent);
  border-color: var(--zj-accent);
  color: #fff;
  font-weight: 500;
}

/* P7.x.y：学生端学段只读展示（教师后台设定） */
.zj-spin-level-display {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--zj-border);
  background: var(--zj-bg);
  cursor: default;
}
.zj-spin-level-display-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--zj-accent);
}
.zj-spin-level-display-tag {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--zj-accent-soft);
  color: var(--zj-accent);
  letter-spacing: 0.2px;
}
.zj-spin-level-display--error {
  border-color: var(--zj-secondary);
  opacity: 0.7;
}

.zj-spin-practice-cards {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.zj-spin-practice-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: inherit;
}
.zj-spin-practice-card:hover {
  transform: translateY(-1px);
  border-color: var(--zj-accent-soft);
  box-shadow: var(--zj-shadow-card);
}
.zj-spin-practice-card.active {
  border-color: var(--zj-accent);
  background: rgba(36, 65, 143, 0.04);
  box-shadow: 0 2px 8px rgba(36, 65, 143, 0.15);
}
.zj-spin-practice-card-num {
  flex: 0 0 22px;
  font-size: 11px;
  font-weight: 700;
  color: var(--zj-accent);
  letter-spacing: 0.5px;
  text-align: center;
  background: rgba(36, 65, 143, 0.08);
  padding: 2px 0;
  border-radius: 4px;
}
.zj-spin-practice-card-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.zj-spin-practice-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--zj-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zj-spin-practice-card-desc {
  font-size: 12px;
  color: var(--zj-text-mute);
  line-height: 1.45;
  word-break: keep-all;       /* 不拆字：解决原来"外观-参数"被截成"外观-参 / 数" */
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zj-spin-practice-card-tag {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;        /* 选项不要竖排：tag 永远单行 */
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--zj-accent-soft);
  color: var(--zj-accent);
  align-self: center;
}

.zj-spin-practice-panel {
  margin-top: 16px;
  padding: 16px;
  background: var(--zj-bg);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;     /* 撑开剩余高度，避免练习模式短内容留下大块空白 */
}
.zj-spin-practice-hint {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 20px;
  text-align: left;
  color: var(--zj-text-mute);
}
.zj-spin-practice-hint-title {
  font-size: 16px; font-weight: 600;
  color: var(--zj-text);
}
.zj-spin-practice-hint-list {
  margin: 0; padding-left: 20px; line-height: 1.9;
  font-size: 14px;
}
.zj-spin-practice-hint-list li b {
  color: var(--zj-text);
  margin-right: 6px;
}
.zj-spin-practice-hint-foot {
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--zj-border);
  color: var(--zj-text-mute);
}
.zj-spin-ex-meta {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--zj-border);
}
.zj-spin-ex-stem {
  font-size: 14px;
  color: var(--zj-text);
}
.zj-spin-ex-meta-num {
  font-size: 12px;
  color: var(--zj-text-mute);
  font-variant-numeric: tabular-nums;
}
.zj-spin-ex-meta-num b { color: var(--zj-accent); font-weight: 600; }

.zj-spin-ex-slider {
  display: grid;
  grid-template-columns: 78px 1fr 64px;
  gap: 8px;
  align-items: center;
}
.zj-spin-ex-slider label { font-size: 12px; color: var(--zj-text-mute); }
.zj-spin-ex-slider input[type="range"] { width: 100%; accent-color: var(--zj-accent); }
.zj-spin-ex-readout {
  font-size: 13px;
  color: var(--zj-text);
  padding: 8px 12px;
  background: var(--zj-card);
  border-radius: 6px;
  border: 1px solid var(--zj-border);
}
.zj-spin-ex-readout b { color: var(--zj-accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* spiral 选项卡 */
.zj-spin-spiral-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.zj-spin-spiral-opt {
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.zj-spin-spiral-opt:hover { border-color: var(--zj-accent-soft); background: var(--zj-accent-soft); }
.zj-spin-spiral-opt.active {
  border-color: var(--zj-accent);
  background: rgba(36, 65, 143, 0.06);
}
.zj-spin-spiral-opt-svg {
  background: #fafbfc;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 4px;
}
.zj-spin-yarn-svg { width: 100%; height: 60px; display: block; }
.zj-spin-spiral-opt-label {
  font-size: 12px;
  color: var(--zj-text);
  font-weight: 500;
}

/* reveal 框 */
.zj-spin-practice-reveal {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.zj-spin-practice-reveal.pass {
  background: rgba(74, 138, 62, 0.08);
  border: 1px solid rgba(74, 138, 62, 0.4);
  color: var(--zj-success);
}
.zj-spin-practice-reveal.fail {
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.35);
  color: var(--zj-danger);
}
.zj-spin-reveal-row {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.zj-spin-reveal-row b { font-weight: 600; }
.zj-spin-reveal-row.score {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed currentColor;
  font-size: 14px;
  font-weight: 600;
}

/* ── P7.x 学习流程编号 ① ~ ⑦（小圆章） ── */
.zj-spin-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--zj-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  font-family: var(--zj-mono, ui-monospace, Menlo, monospace);
  flex-shrink: 0;
}

/* ── P7.x ⑥ 练习：折叠列表 + 状态丸（3 色） ── */
.zj-spin-mode-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.zj-spin-mode-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.zj-spin-mode-row:hover {
  background: #f7f9fc;
  border-color: rgba(36, 65, 143, 0.4);
}
.zj-spin-mode-row:active { transform: translateY(1px); }
.zj-spin-mode-row.active {
  background: rgba(36, 65, 143, 0.08);
  border-color: var(--zj-accent);
  box-shadow: 0 0 0 1px var(--zj-accent) inset;
}
.zj-spin-mode-row-icon {
  font-weight: 700;
  color: var(--zj-accent);
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}
.zj-spin-mode-row-title {
  flex: 1;
  font-size: 13px;
  color: var(--zj-text);
}

/* ── P7.x 状态丸：未做灰 / 通过·分 绿 / 未过 红 ── */
.zj-spin-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.zj-spin-status-pill--idle {
  background: var(--zj-bg);          /* surface 深 ~3% 留空，使用 bg */
  color: var(--zj-text-mute);
}
.zj-spin-status-pill--pass {
  background: var(--zj-success-bg);  /* e8f0ec 鼠尾草软底 */
  color: var(--zj-tertiary);
}
.zj-spin-status-pill--fail {
  background: var(--zj-danger-bg);   /* f6e9e3 赭红软底 */
  color: var(--zj-secondary);
}

/* ── P7.x ⑦ 考核卡：locked 置灰规范、unlocked 激活态 ── */
.zj-spin-exam-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px dashed var(--zj-border);
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.zj-spin-exam-card--locked {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f6f8;
}
.zj-spin-exam-card--locked:hover { opacity: 0.65; }
.zj-spin-exam-card--unlocked {
  cursor: pointer;
  background: rgba(36, 65, 143, 0.04);
  border-style: solid;
  border-color: var(--zj-accent);
}
.zj-spin-exam-card--unlocked:hover {
  background: rgba(36, 65, 143, 0.10);
  transform: translateY(-1px);
}
.zj-spin-exam-card-icon {
  font-size: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--zj-text-mute);
}
.zj-spin-exam-card-icon svg { width: 22px; height: 22px; }
.zj-spin-exam-card-body { flex: 1; }
.zj-spin-exam-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--zj-text);
  margin-bottom: 2px;
}
.zj-spin-exam-card-hint {
  font-size: 11px;
  color: var(--zj-text-mute);
}

/* ── P7.x 右栏：与左栏相同的卡片样式 ── */
.zj-spin-panel-right {
  /* 与 .zj-spin-panel 共用样式；此处只覆盖差异（如果有） */
}
.zj-spin-mode-content {
  display: flex; flex-direction: column;
  /* 高度随内容：原 height:100% 会在短屏溢出，与下方 YarnCard 历史区重叠（2026-10-12 主人截图反馈修复） */
  flex: 0 0 auto;
  min-height: 0;
}

/* ── P9：纺纱仿真模块首页（hub）── */
.zj-hub-section {
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 12px;
}
.zj-hub-section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-size: 15px; font-weight: 600;
  color: var(--zj-text);
}
.zj-hub-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--zj-accent);
  color: #fff;
  font-size: 12px; font-weight: 700;
  border-radius: 6px;
}
.zj-hub-section-sub {
  margin-left: auto;
  font-size: 12px; font-weight: 400;
  color: var(--zj-text-mute);
}
.zj-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.zj-hub-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--zj-text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.zj-hub-card-ready:hover {
  border-color: var(--zj-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(36, 65, 143, 0.10);
}
.zj-hub-card-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--zj-accent-soft);
  border-radius: 8px;
}
.zj-hub-card-body { flex: 1; min-width: 0; }
.zj-hub-card-title {
  font-size: 14px; font-weight: 600;
  margin-bottom: 2px;
}
.zj-hub-card-desc {
  font-size: 12px;
  color: var(--zj-text-mute);
  line-height: 1.4;
}
.zj-hub-card-tag {
  position: absolute;
  top: 8px; right: 10px;
  padding: 2px 8px;
  font-size: 10px; font-weight: 600;
  background: var(--zj-border);
  color: var(--zj-text-mute);
  border-radius: 10px;
  letter-spacing: 0.3px;
}
.zj-hub-card-tag-ready {
  background: rgba(40, 167, 69, 0.12);
  color: #28a745;
}
/* ── 灰占位卡（Kimi 规范：opacity .45 + cursor not-allowed + 版本标签）── */
.zj-hub-card-placeholder {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;        /* 仍可触发 title tooltip */
}
.zj-hub-card-placeholder .zj-hub-card-icon { background: var(--zj-border); }

/* ── 练习进度状态丸 ── */
.zj-hub-progress {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 14px;
}
.zj-hub-progress-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 16px;
  font-size: 12px;
  color: var(--zj-text);
  cursor: default;
  user-select: none;
}
.zj-hub-progress-pill.zj-hub-progress-link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.zj-hub-progress-pill.zj-hub-progress-link:hover {
  border-color: var(--zj-accent);
}
.zj-hub-progress-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #adb5bd;          /* default · none */
  flex-shrink: 0;
}
.zj-hub-progress-pill.state-attempted .zj-hub-progress-dot { background: #f59f00; }
.zj-hub-progress-pill.state-passed .zj-hub-progress-dot { background: #28a745; }
.zj-hub-progress-pill[hidden] { display: none; }   /* flex parent overrides [hidden] */

/* ── 面包屑链节 ── */
.zj-breadcrumb-link {
  color: var(--zj-text-mute);
  text-decoration: none;
  transition: color 0.15s;
}
.zj-breadcrumb-link:hover { color: var(--zj-accent); }
.zj-spin-mode-content[hidden] { display: none; }

/* ── P1 · 等宽字体（JetBrains Mono）选位应用 ─────────────────────
 * 设计图："一切工艺数值必须等宽字体"（`18,000 RPM`、`28.0 tex`）
 * 选位：① 管理/教师 KPI 卡 ② 滑杆读数 ③ 仪表读数 ④ 成本合计
 * 不动正文与标签 — 仅 4 类工艺数值
 */
.zj-stat-card-value,
.zj-spin-slider-val,
.zj-spin-gauge-val,
.zj-spin-cost-total b {
  font-family: var(--zj-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================================
 * M4.1 P8：订单实操外壳（task.html）— 工单头 / 规范书 / KPI 表 / 评阅报告
 * ============================================================================ */
.zj-task-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.zj-task-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--zj-secondary); margin-bottom: 4px; }
.zj-task-head-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.zj-task-no { font-size: 12px; color: var(--zj-text-mute); }
.zj-task-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.zj-task-badge[data-state="todo"]  { color: var(--zj-text-mute);  background: var(--zj-accent-soft); }
.zj-task-badge[data-state="pass"]  { color: var(--zj-tertiary);   background: var(--zj-success-bg); }
.zj-task-badge[data-state="fail"]  { color: var(--zj-secondary);  background: var(--zj-danger-bg); }

.zj-task-head-side { text-align: center; background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: 10px; padding: 10px 20px; }
.zj-task-timer { font-size: 24px; font-weight: 700; color: var(--zj-primary); font-variant-numeric: tabular-nums; font-family: var(--zj-font-mono); }
.zj-task-timer--danger { color: var(--zj-secondary); }
.zj-task-timer-label { font-size: 11px; color: var(--zj-text-mute); margin-top: 2px; }

.zj-task-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.zj-task-spec .zj-spin-section { background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.zj-task-brief { font-size: 13px; line-height: 1.8; color: var(--zj-text); white-space: pre-wrap; margin: 0; }

.zj-task-kpi { width: 100%; border-collapse: collapse; font-size: 13px; }
.zj-task-kpi th { text-align: left; font-weight: 600; color: var(--zj-text-mute); padding: 6px 8px; border-bottom: 1px solid var(--zj-border); font-size: 12px; }
.zj-task-kpi td { padding: 8px; border-bottom: 1px solid var(--zj-border); }
.zj-task-kpi tr:last-child td { border-bottom: none; }
.zj-task-kpi-req { color: var(--zj-text-mute); }
.zj-task-kpi-actual { font-variant-numeric: tabular-nums; font-weight: 600; font-family: var(--zj-font-mono); }

.zj-task-verdict { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.zj-task-verdict--pass { color: var(--zj-tertiary);  background: var(--zj-success-bg); }
.zj-task-verdict--fail { color: var(--zj-secondary); background: var(--zj-danger-bg); }
.zj-task-verdict--wait { color: var(--zj-text-mute); background: var(--zj-accent-soft); }

.zj-task-lock-list { list-style: none; margin: 0; padding: 0; }
.zj-task-lock-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--zj-border); }
.zj-task-lock-list li:last-child { border-bottom: none; }
.zj-task-lock-icon { width: 14px; height: 14px; color: var(--zj-secondary); flex: none; }

.zj-task-workarea { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zj-task-frame { width: 100%; height: 72vh; min-height: 560px; border: 1px solid var(--zj-border); border-radius: 12px; background: var(--zj-card); }
.zj-task-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.zj-task-hint { font-size: 12px; color: var(--zj-text-mute); }
.zj-task-msg--err { color: var(--zj-danger); }

.zj-task-report { margin-top: 24px; background: var(--zj-card); border: 1px solid var(--zj-border); border-radius: 12px; padding: 20px; }
.zj-task-report-head { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; flex-wrap: wrap; }
.zj-task-score { font-size: 28px; font-weight: 700; color: var(--zj-primary); font-family: var(--zj-font-mono); }
.zj-task-score-label { font-size: 13px; color: var(--zj-text-mute); }
.zj-task-report-reveal { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--zj-success-bg); font-size: 13px; line-height: 1.7; }
.zj-task-report-reveal p { margin: 0 0 6px; }
.zj-task-report-reveal p:last-child { margin-bottom: 0; }
.zj-task-report-next { color: var(--zj-text); }

@media (max-width: 1080px) {
  .zj-task-layout { grid-template-columns: 1fr; }
  .zj-task-frame { height: 64vh; }
}

/* ── P8 工单内嵌模式：task.html iframe 嵌 spinning-frame?embed=task ──
 * 藏掉自由纺/练习场景的壳（顶栏、面包屑、页头、⑥练习、⑦考核、右栏答题区），
 * 只留左栏参数区 + 中栏 3D 台；class 由 frame 页 head 内联脚本加到 <html> 上 */
html.zj-embed-task #zj-topbar-slot,
html.zj-embed-task .zj-page-nav,
html.zj-embed-task .zj-page-head,
html.zj-embed-task #zj-spin-section-practice,
html.zj-embed-task #zj-spin-section-exam,
html.zj-embed-task .zj-spin-panel-right { display: none; }
html.zj-embed-task .zj-spin-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  height: calc(100vh - 56px);   /* .zj-main-full 上下 padding 24+32，壳已隐藏 */
}

/* ── P8：工单锁定工艺项 → 滑杆禁用态（左右关联：规范书锁定项 = 右侧真锁） ── */
.zj-spin-slider-locked { opacity: 0.55; }
.zj-spin-slider-locked input[type="range"] { cursor: not-allowed; }

/* ── P8：工单操作提示（逐级解锁式） ── */
.zj-task-hint-list { list-style: none; margin: 0 0 10px; padding: 0; counter-reset: zj-hint; }
.zj-task-hint-list li { position: relative; font-size: 13px; line-height: 1.7; color: var(--zj-text); padding: 6px 0 6px 28px; border-bottom: 1px dashed var(--zj-border); }
.zj-task-hint-list li:last-child { border-bottom: none; }
.zj-task-hint-list li::before { counter-increment: zj-hint; content: counter(zj-hint); position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--zj-accent-soft); color: var(--zj-primary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#zj-task-hint-btn:disabled { opacity: 0.5; cursor: default; }