/* ============================================================
   自己做衣服 · 设计系统 v3
   暖色亚麻质感 / 图形优先 / 克制的动效
   ------------------------------------------------------------
   v3 相对 v2 的变化：
   1. 图形优先：新增图标/针脚/参数条/步骤条/对比卡等图形组件样式
   2. 留白加大：正文行高与区块间距提升，卡片内距更松
   3. 层级更强：标题字重与字号差拉开，关键数字放大
   4. 网格打破：支持不规则卡片排布（2/3 + 1/3 等）
   5. 配色收敛：功能色只用于状态，正文统一暖灰阶
   设计原则不变：
   - 层级靠「色阶 + 间距」建立，不靠粗边框
   - 阴影分三级，统一低透明度暖色偏移
   - 圆角成套：大容器 16 / 卡片 14 / 控件 10 / 徽标 999
   - 动效只用 transform + opacity，时长 120–260ms
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */

:root{
  /* --- 背景层：三级递进，靠明度区分区块 --- */
  --bg:            #fdfbf7;
  --bg-soft:       #f7f3ea;
  --bg-tint:       #f2ece0;
  --surface:       #ffffff;
  --surface-2:     #fbf8f2;
  --surface-3:     #f5f0e6;

  /* --- 描边：两档足够，强描边只用于焦点与选中 --- */
  --line:          #ece5d8;
  --line-2:        #ded4c2;
  --line-strong:   #c9bca5;

  /* --- 文字：四级灰阶 --- */
  --ink:           #26221c;
  --ink-2:         #57503f;
  --ink-3:         #857c69;
  --ink-4:         #a79d88;

  /* --- 主色：亚麻棕，三档明度 --- */
  --accent:        #8b6a45;
  --accent-hi:     #a17d54;
  --accent-ink:    #6b4f31;
  --accent-soft:   #f3ead9;
  --accent-tint:   #faf5ec;

  /* --- 功能色 --- */
  --sage:          #5f7d5c;
  --sage-soft:     #e9f0e6;
  --sage-line:     #cddfc8;

  --clay:          #b06a48;
  --clay-soft:     #f9ece3;
  --clay-line:     #eed3c1;

  --blue:          #4f6f8c;
  --blue-soft:     #e9f0f6;
  --blue-line:     #cfdfec;

  --danger:        #a2453a;
  --danger-soft:   #fbedeb;
  --danger-line:   #eccac4;

  /* --- 圆角成套 --- */
  --r-lg:          16px;
  --r:             13px;
  --r-sm:          9px;
  --r-xs:          6px;
  --r-full:        999px;

  /* --- 阴影三级：低透明度 + 多层，暖色调偏移 --- */
  --sh-1: 0 1px 2px rgba(56,44,28,.04), 0 1px 1px rgba(56,44,28,.03);
  --sh-2: 0 1px 2px rgba(56,44,28,.05), 0 4px 12px -4px rgba(56,44,28,.10);
  --sh-3: 0 2px 4px rgba(56,44,28,.06), 0 14px 32px -10px rgba(56,44,28,.16);

  /* --- 字体 --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- 间距节奏 --- */
  --gut:  20px;
  --sec-y:88px;

  /* --- 动效 --- */
  --ease: cubic-bezier(.32,.72,.35,1);
  --dur:  .18s;

  /* --- v3 新增：图形组件色 --- */
  --ink-faint:     #bdb3a0;
  --bar-track:     #eee7d9;
  --tone-a:        #8b6a45;   /* 主色条 */
  --tone-b:        #5f7d5c;   /* 绿条 */
  --tone-c:        #b06a48;   /* 陶条 */
  --tone-d:        #4f6f8c;   /* 蓝条 */
}

/* ============================================================
   2. 基础排版
   ============================================================ */

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15.5px;
  line-height:1.75;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{
  margin:0;
  font-weight:650;
  line-height:1.28;
  letter-spacing:-.018em;
  color:var(--ink);
}
h1{ font-size:clamp(28px, 3.8vw, 42px); letter-spacing:-.028em; }
h2{ font-size:clamp(21px, 2.5vw, 28px); }
h3{ font-size:16.5px; }
h4{ font-size:14px; }

p{ margin:0 0 12px; }
p:last-child{ margin-bottom:0; }

a{ color:var(--accent-ink); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover{ color:var(--accent); }

b, strong{ font-weight:650; color:var(--ink); }

::selection{ background:var(--accent-soft); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--accent-hi);
  outline-offset:2px;
  border-radius:4px;
}

.wrap{ width:min(1160px, 100% - 44px); margin-inline:auto; }
.muted{ color:var(--ink-3); font-size:14px; }

/* ============================================================
   3. 顶栏
   ============================================================ */

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(253,251,247,.82);
  backdrop-filter:saturate(1.8) blur(14px);
  -webkit-backdrop-filter:saturate(1.8) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; gap:18px;
  height:66px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:16px; color:var(--ink);
  letter-spacing:-.01em;
  flex:none;
}
.brand:hover{ text-decoration:none; color:var(--ink); }
.brand-mark{
  display:grid; place-items:center;
  width:31px; height:31px; border-radius:9px;
  background:linear-gradient(145deg, var(--accent-hi), var(--accent));
  color:#fff; font-size:15px;
  box-shadow:0 2px 6px -1px rgba(107,79,49,.35), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--dur) var(--ease);
}
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.05); }
.brand-text{ white-space:nowrap; }

.brand-sm{ font-size:14px; gap:8px; }
.brand-sm .brand-mark{ width:25px; height:25px; font-size:12px; border-radius:7px; }

.nav{
  display:flex; gap:2px; margin-left:auto;
  overflow-x:auto; scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  position:relative;
  padding:7px 12px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:14px; font-weight:500;
  white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover{ background:var(--accent-tint); color:var(--accent-ink); text-decoration:none; }
.nav a.nav-here{
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-weight:600;
}
.nav a.nav-here::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px;
  height:2px; border-radius:2px;
  background:var(--accent);
}

.nav-toggle{
  display:none; margin-left:auto;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  width:38px; height:36px;
  font-size:16px; cursor:pointer; color:var(--ink);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover{ background:var(--accent-tint); border-color:var(--accent); }

/* ============================================================
   4. 按钮
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  font-family:inherit; font-size:14.5px; font-weight:600;
  letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform .1s var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--accent); color:#fff;
  box-shadow:0 1px 2px rgba(107,79,49,.22), 0 6px 16px -6px rgba(107,79,49,.42);
}
.btn-primary:hover{ background:var(--accent-ink); color:#fff; box-shadow:0 2px 4px rgba(107,79,49,.24), 0 8px 20px -6px rgba(107,79,49,.48); }

.btn-ghost{
  background:var(--surface); border-color:var(--line-2); color:var(--ink-2);
}
.btn-ghost:hover{
  background:var(--accent-tint); border-color:var(--accent-hi); color:var(--accent-ink);
}

.btn-danger{
  background:var(--surface); border-color:var(--danger-line); color:var(--danger);
}
.btn-danger:hover{ background:var(--danger); border-color:var(--danger); color:#fff; }

.btn-sm{ padding:7px 13px; font-size:13.2px; border-radius:var(--r-xs); }

/* ============================================================
   5. 首屏
   ============================================================ */

.hero{
  position:relative;
  padding:84px 0 88px;
  overflow:hidden;
  background:
    radial-gradient(820px 400px at 92% -12%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(620px 340px at 2% 104%, var(--sage-soft) 0%, transparent 58%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.35;
  mask-image:radial-gradient(700px 400px at 78% 30%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(700px 400px at 78% 30%, #000 0%, transparent 72%);
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.4fr .85fr;
  gap:56px; align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:16px; padding:5px 12px;
  border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--accent-ink);
  font-size:12.5px; font-weight:600; letter-spacing:.05em;
  box-shadow:var(--sh-1);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:none;
}

.hero h1{ margin-bottom:20px; }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(180deg, transparent 62%, var(--accent-soft) 62%);
  padding:0 2px;
}

.lead{
  font-size:16.5px; color:var(--ink-2);
  max-width:62ch;
  line-height:1.78;
}

.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 34px; }

.hero-stats{
  display:flex; gap:0; flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:22px;
}
.stat{
  padding-right:34px; margin-right:34px;
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:0; margin-right:0; padding-right:0; }
.stat b{
  display:block; font-size:26px; font-weight:700;
  color:var(--accent-ink); letter-spacing:-.03em;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.stat span{ font-size:12.8px; color:var(--ink-3); }

.hero-copy{ min-width:0; }
.hero-art svg, .art-svg{ width:100%; height:auto; display:block; }
.art-circle{ stroke:var(--line-2); stroke-width:1.4; }
.art-ring{ fill:none; stroke:var(--line); stroke-width:1; }
.art-seam{ fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:3 6; }
.art-line{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.art-line circle{ fill:var(--surface); }
.art-pivot{ fill:var(--accent) !important; stroke:none; }
.art-dash{ fill:none; stroke:var(--clay); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:6 9; }
.art-needle{ fill:none; stroke:var(--accent-hi); stroke-width:2.4; stroke-linecap:round; }
.art-needle circle{ fill:var(--surface); }
.art-scale{ fill:none; stroke:var(--ink-4); stroke-width:1.6; stroke-linecap:round; }

/* ============================================================
   6. 区块与卡片
   ============================================================ */

.section{ padding:var(--sec-y) 0; }
.section-soft{
  background:var(--bg-soft);
  border-block:1px solid var(--line);
}

.sec-title{ margin-bottom:0; }
.sec-title + .sec-sub{ margin-top:14px; }
.sec-sub{
  color:var(--ink-2); font-size:15.5px;
  max-width:78ch; margin-bottom:38px;
  line-height:1.78;
}
.section .sec-sub{ margin-top:14px; }

.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:23px;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ box-shadow:var(--sh-2); }
.card h3{ font-size:16.5px; margin-bottom:9px; }
.card > p{ color:var(--ink-2); font-size:14.5px; }

/* 编号事实卡 */
.fact{ position:relative; padding-top:24px; overflow:hidden; }
.fact::before{
  content:""; position:absolute; left:0; top:0; width:38px; height:3px;
  background:var(--accent); border-radius:0 0 3px 0;
}
.fact-num{
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  color:var(--accent); letter-spacing:.1em; margin-bottom:10px;
  opacity:.9;
}
.fact h3{ font-size:16.5px; margin-bottom:10px; }

/* ============================================================
   7. 首页板块入口卡
   ============================================================ */

.nav-cards{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.nav-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:26px 24px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  color:var(--ink);
  overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             border-color .22s var(--ease);
}
.nav-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, var(--accent-tint), transparent 46%);
  opacity:0; transition:opacity .22s var(--ease);
  pointer-events:none;
}
.nav-card:hover{
  text-decoration:none; color:var(--ink);
  transform:translateY(-4px);
  box-shadow:var(--sh-3);
  border-color:var(--line-2);
}
.nav-card:hover::before{ opacity:1; }
.nav-card > *{ position:relative; }

.nav-card-hl{ border-color:var(--accent-hi); }
.nav-card-hl::before{ opacity:1; }
.nav-card-hl::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent);
}

.nc-num{
  font-family:var(--mono);
  font-size:11.5px; font-weight:700; letter-spacing:.12em;
  color:var(--accent); margin-bottom:12px;
}
.nav-card h3{ font-size:19px; margin-bottom:10px; letter-spacing:-.022em; }
.nav-card p{
  font-size:14px; color:var(--ink-2); line-height:1.72;
  margin:0 0 16px; flex:1;
}
.nc-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.nc-go{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:600; color:var(--accent-ink);
}
.nc-go::after{
  content:"→"; transition:transform .22s var(--ease);
}
.nav-card:hover .nc-go::after{ transform:translateX(4px); }

/* ============================================================
   8. 独立页标题区
   ============================================================ */

.page-head{
  position:relative;
  padding:52px 0 40px;
  overflow:hidden;
  background:
    radial-gradient(760px 300px at 8% -30%, var(--accent-soft) 0%, transparent 62%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.page-head::after{
  content:""; position:absolute; right:-40px; top:-40px;
  width:260px; height:260px; border-radius:50%;
  border:1px dashed var(--line-2);
  opacity:.7; pointer-events:none;
}
.page-head .wrap{ position:relative; z-index:1; }
.page-head .eyebrow{ margin-bottom:14px; }
.page-head h1{ margin-bottom:16px; }
.page-head .lead{ max-width:840px; font-size:16px; margin:0; }

/* ============================================================
   9. 标签、徽标、胶囊
   ============================================================ */

.chips, .tool-filter, .stage-tabs, .journal-tabs, .pat-tabs, .pat-tools{
  display:flex; gap:7px; flex-wrap:wrap;
}
.chips{ margin-top:2px; }
.tool-filter, .stage-tabs, .journal-tabs, .pat-tabs{ margin-bottom:22px; }
.pat-tools{ margin-bottom:14px; }

.chip{
  padding:7px 14px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--ink-2); font-size:13.2px; font-weight:550; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chip:hover{ border-color:var(--accent-hi); color:var(--accent-ink); background:var(--accent-tint); }
.chip.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 2px 8px -2px rgba(107,79,49,.4);
}

.fbadge, .mtag, .tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:3.5px 10px; border-radius:var(--r-xs);
  font-size:11.8px; font-weight:600;
  background:var(--surface-3); color:var(--ink-3);
  border:1px solid var(--line);
  white-space:nowrap;
}
.fbadge.good{ background:var(--sage-soft); color:var(--sage); border-color:var(--sage-line); }
.fbadge.warn{ background:var(--clay-soft); color:var(--clay); border-color:var(--clay-line); }
.fbadge.info{ background:var(--blue-soft); color:var(--blue); border-color:var(--blue-line); }

.tag{
  background:var(--accent-soft); color:var(--accent-ink);
  border-color:transparent;
  border-radius:var(--r-full);
  padding:4px 11px; font-size:11.5px; font-weight:700;
  letter-spacing:.01em;
}

.mtag{ background:var(--surface-3); color:var(--ink-2); border-color:var(--line); }
.mtag.time{ background:var(--blue-soft); color:var(--blue); border-color:var(--blue-line); }
.mtag.done-tag{ background:var(--sage-soft); color:var(--sage); border-color:var(--sage-line); }

.badge-must{ background:var(--clay-soft); color:var(--clay); border-color:var(--clay-line); }
.badge-nice{ background:var(--sage-soft); color:var(--sage); border-color:var(--sage-line); }
.badge-later{ background:var(--surface-3); color:var(--ink-3); border-color:var(--line); }

.pill{
  padding:1.5px 8px; border-radius:var(--r-full);
  font-size:11.5px; font-family:var(--mono); font-weight:700;
  background:var(--accent-soft); color:var(--accent-ink);
}
.jtab.active .pill{ background:rgba(255,255,255,.28); color:#fff; }

/* ============================================================
   10. 学习路径
   ============================================================ */

.stage-tab{
  display:flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--ink-2); font-size:13.5px; font-weight:550; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform .1s var(--ease);
}
.stage-tab:hover{ border-color:var(--accent-hi); color:var(--accent-ink); background:var(--accent-tint); }
.stage-tab:active{ transform:translateY(1px); }
.stage-tab.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 2px 8px -2px rgba(107,79,49,.4);
}
.stage-tab .tnum{
  display:grid; place-items:center;
  width:21px; height:21px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink);
  font-size:11.5px; font-weight:700; font-family:var(--mono);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.stage-tab.done .tnum{ background:var(--sage); color:#fff; }
.stage-tab.active .tnum{ background:rgba(255,255,255,.26); color:#fff; }

.progress-bar-wrap{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:17px 22px; margin-bottom:22px;
  box-shadow:var(--sh-1);
}
.progress-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--ink-2); font-weight:600; margin-bottom:10px;
}
.progress-label span:last-child{ font-family:var(--mono); font-size:12.5px; color:var(--accent-ink); }
.progress-track{
  height:7px; background:var(--bg-tint); border-radius:var(--r-full);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(56,44,28,.07);
}
.progress-fill{
  height:100%; width:0; border-radius:var(--r-full);
  background:linear-gradient(90deg, var(--sage), var(--accent-hi), var(--accent));
  transition:width .55s var(--ease);
}

.stages{ display:flex; flex-direction:column; gap:13px; }

.stage{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stage:hover{ border-color:var(--line-2); }
.stage.open{ border-color:var(--line-2); box-shadow:var(--sh-2); }
.stage.done{ background:linear-gradient(180deg, var(--sage-soft) 0%, var(--surface) 78px); }

.stage-head{
  display:flex; align-items:flex-start; gap:16px;
  padding:21px 23px; cursor:pointer; user-select:none;
  transition:background var(--dur) var(--ease);
}
.stage-head:hover{ background:var(--accent-tint); }

.stage-badge{
  flex:none; display:grid; place-items:center;
  width:40px; height:40px; border-radius:11px;
  background:var(--accent-soft); color:var(--accent-ink);
  font-family:var(--mono); font-weight:700; font-size:15px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.stage.done .stage-badge{
  background:var(--sage); color:#fff;
  box-shadow:0 2px 8px -2px rgba(95,125,92,.5);
}
.stage-headmain{ flex:1; min-width:0; }
.stage-headmain h3{
  font-size:17.5px; margin-bottom:6px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.stage-goal{ color:var(--ink-2); font-size:14px; margin:0; line-height:1.7; }
.stage-meta{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }

.stage-caret{
  flex:none; color:var(--ink-4); font-size:12px;
  transition:transform .26s var(--ease), color var(--dur) var(--ease);
  margin-top:13px;
}
.stage-head:hover .stage-caret{ color:var(--accent); }
.stage.open .stage-caret{ transform:rotate(180deg); color:var(--accent); }

.stage-body{ display:none; padding:0 23px 26px 79px; }
.stage.open .stage-body{ display:block; animation:reveal .3s var(--ease); }
@keyframes reveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

.stage-block{ margin-bottom:22px; }
.stage-block:last-child{ margin-bottom:0; }
.stage-block h4{
  font-size:12px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent); margin-bottom:11px; font-weight:700;
}
.stage-block ol, .stage-block ul{
  margin:0; padding-left:21px; color:var(--ink-2); font-size:14.5px;
}
.stage-block li{ margin-bottom:9px; padding-left:3px; }
.stage-block li::marker{ color:var(--ink-4); }
.stage-block p{ color:var(--ink-2); font-size:14.5px; }

.buy-list{
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px;
}
.buy-list li{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 14px; margin:0; font-size:13.8px;
}
.buy-list strong{ display:block; color:var(--ink); font-size:14px; margin-bottom:3px; }
.buy-list span{ color:var(--ink-3); font-size:12.8px; }

.pitfall{
  background:var(--clay-soft);
  border-left:3px solid var(--clay);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:14px 17px; font-size:14.2px; color:var(--ink-2);
}
.pitfall b{ color:var(--clay); }

.checkline{
  display:flex; align-items:center; gap:12px;
  margin-top:20px; padding-top:18px;
  border-top:1px dashed var(--line-2);
}
.checkline input{
  width:19px; height:19px; accent-color:var(--sage);
  cursor:pointer; flex:none;
}
.checkline label{ font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; }

/* ============================================================
   11. 布料库
   ============================================================ */

.fabric-toolbar{ margin-bottom:24px; }

.input{
  width:100%; max-width:480px;
  padding:11px 15px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface);
  font-family:inherit; font-size:14.5px; color:var(--ink);
  margin-bottom:14px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder{ color:var(--ink-4); }
.input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.fabric-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
  gap:16px;
}

.fabric{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px; box-shadow:var(--sh-1);
  display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform .2s var(--ease);
}
.fabric:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); transform:translateY(-2px); }

.fabric-top{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.swatch{
  flex:none; width:44px; height:44px; border-radius:11px;
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(56,44,28,.1);
}
.fabric-top h3{ font-size:16.5px; }
.fabric-top .fiber{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }

.fabric-fields{ display:flex; flex-direction:column; gap:8px; font-size:13.8px; margin-bottom:14px; }
.frow{ display:flex; gap:10px; }
.frow .k{ flex:none; width:62px; color:var(--ink-4); font-size:12.8px; }
.frow .v{ color:var(--ink-2); }

.badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; }
.fabric > p:last-child{ color:var(--ink-2) !important; }

.empty-hint{
  text-align:center; color:var(--ink-3); padding:36px 0; font-size:14.5px;
}

/* ============================================================
   12. 提示框
   ============================================================ */

.callout{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 26px; margin-top:28px;
  box-shadow:var(--sh-1);
}
.callout h3{ font-size:16.5px; margin-bottom:14px; }
.callout ol, .callout ul{ margin:0; padding-left:21px; color:var(--ink-2); font-size:14.5px; }
.callout li{ margin-bottom:10px; padding-left:3px; }
.callout li::marker{ color:var(--accent); font-weight:700; }
.callout li:last-child{ margin-bottom:0; }

.callout-warn{
  background:var(--clay-soft); border-color:var(--clay-line);
}
.callout-warn h3{ color:var(--clay); }
.callout-warn li b{ color:var(--clay); }

/* ============================================================
   13. 工具清单
   ============================================================ */

.tool-list{ display:flex; flex-direction:column; gap:12px; }

.tool-item{
  display:grid; grid-template-columns:1fr auto; gap:16px 24px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 21px; box-shadow:var(--sh-1);
  align-items:start;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tool-item:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); }
.tool-item h4{
  font-size:15.5px; margin-bottom:6px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.tool-item p{ color:var(--ink-2); font-size:14px; margin:0; }
.tool-price{
  font-family:var(--mono); font-size:14.5px; font-weight:700;
  color:var(--accent-ink); white-space:nowrap; text-align:right;
  font-variant-numeric:tabular-nums;
}
.tool-price small{
  display:block; font-family:var(--font); font-size:12px;
  color:var(--ink-3); font-weight:500; margin-top:3px;
}

/* ============================================================
   14. 计算器
   ============================================================ */

.tools-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.tool-card{ display:flex; flex-direction:column; }

.tool-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px;
}
.tool-head h3{ font-size:16.5px; }
.tool-desc{ color:var(--ink-2); font-size:13.8px; margin-bottom:16px; line-height:1.72; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:16px; }

.form-grid label, .form-card label.full{
  display:flex; flex-direction:column; gap:6px;
  font-size:12.8px; font-weight:600; color:var(--ink-2);
}

.form-grid input, .form-grid select,
.form-card input, .form-card select, .form-card textarea{
  padding:9px 12px;
  border:1px solid var(--line-2); border-radius:var(--r-xs);
  background:var(--surface);
  font-family:inherit; font-size:14.2px; color:var(--ink);
  width:100%;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-grid input:focus, .form-grid select:focus,
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.form-card textarea{ resize:vertical; line-height:1.65; }
.form-card label.full{ margin-bottom:13px; grid-column:1 / -1; }
.form-card .form-grid label.full{ margin-bottom:0; }

.result{
  margin-top:auto; padding:16px 18px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  font-size:14.2px; color:var(--ink-2);
}
.result .big{
  display:block; font-size:27px; font-weight:700;
  color:var(--accent-ink); letter-spacing:-.03em;
  margin:3px 0 8px; line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.result .rowline{
  display:flex; justify-content:space-between; gap:12px; padding:4px 0;
}
.result .rowline + .rowline{ border-top:1px dashed var(--line-2); }
.result .rowline span:last-child{
  font-family:var(--mono); font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.result .note{ font-size:12.8px; color:var(--ink-3); margin-top:10px; }

/* ============================================================
   15. 作品与踩坑
   ============================================================ */

.jtab{
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--ink-2); font-size:14.5px; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.jtab:hover{ border-color:var(--accent-hi); color:var(--accent-ink); background:var(--accent-tint); }
.jtab.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 2px 8px -2px rgba(107,79,49,.4);
}

.jpanel{ display:none; }
.jpanel.active{ display:block; animation:reveal .26s var(--ease); }

.form-card{ margin-bottom:22px; }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

.entry-list{ display:flex; flex-direction:column; gap:13px; }

.entry{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-2);
  border-radius:var(--r); padding:19px 21px; box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease);
}
.entry:hover{ box-shadow:var(--sh-2); }
.entry.work{ border-left-color:var(--sage); }
.entry.issue{ border-left-color:var(--clay); }

.entry-head{ display:flex; align-items:flex-start; gap:13px; margin-bottom:12px; }
.entry-head h4{ font-size:16px; flex:1; }
.entry-date{
  font-size:12.5px; color:var(--ink-3); font-family:var(--mono);
  white-space:nowrap; padding-top:2px;
}
.stars{ color:var(--clay); font-size:12.5px; letter-spacing:1.5px; }
.entry-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.entry-body{ font-size:14.2px; color:var(--ink-2); }
.entry-body dt{ font-weight:650; color:var(--ink); font-size:13.5px; margin-top:11px; }
.entry-body dd{ margin:3px 0 0; }
.entry-actions{
  margin-top:14px; padding-top:13px;
  border-top:1px dashed var(--line-2);
}
.entry-photo{
  margin-top:13px; max-width:100%; border-radius:var(--r-sm);
  border:1px solid var(--line);
}

.entry-empty{
  text-align:center; padding:44px 22px; color:var(--ink-3);
  background:var(--surface-2);
  border:1px dashed var(--line-2); border-radius:var(--r);
  font-size:14.2px;
}

.share-preview{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:17px;
  font-family:var(--mono); font-size:12.8px; line-height:1.8;
  white-space:pre-wrap; word-break:break-word; color:var(--ink-2);
  max-height:400px; overflow:auto; margin:0 0 4px;
}

/* ============================================================
   16. 服装模板
   ============================================================ */

.tpl-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
  gap:16px; margin-bottom:8px;
}

.tpl-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:21px; box-shadow:var(--sh-1);
  display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform .2s var(--ease);
}
.tpl-card:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); transform:translateY(-2px); }

.tpl-head{ display:flex; gap:15px; align-items:center; margin-bottom:14px; }
.tpl-head h3{ font-size:16.5px; }
.tpl-who{ font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.6; }
.tpl-svg{
  width:98px; height:auto; flex:none;
  background:var(--surface-2); border-radius:var(--r-sm); padding:8px;
  border:1px solid var(--line);
}
.ts-fill{ fill:var(--surface-2); stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ts-dash{ fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:4 4; }
.ts-acc{ fill:none; stroke:var(--clay); stroke-width:1.8; stroke-linecap:round; }

.tpl-facts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px; }
.tpl-fact{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-xs); padding:8px 11px; font-size:12.5px;
}
.tpl-fact b{
  display:block; color:var(--accent-ink); font-size:11.5px;
  margin-bottom:3px; letter-spacing:.02em;
}
.tpl-fact span{ color:var(--ink-2); }

.tpl-block{ font-size:13.8px; color:var(--ink-2); margin-bottom:13px; }
.tpl-block h4{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); margin-bottom:6px; font-weight:700;
}
.tpl-block ol{ margin:0; padding-left:19px; }
.tpl-block li{ margin-bottom:5px; }
.tpl-block li::marker{ color:var(--ink-4); }

.tpl-foot{
  margin-top:auto; border-top:1px dashed var(--line-2);
  padding-top:13px; font-size:13.4px;
}
.tpl-foot .hl b{ color:var(--sage); }
.tpl-foot .pf b{ color:var(--clay); }
.tpl-variants{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }

/* ============================================================
   17. 纸样工作台
   ============================================================ */

.ptab{
  display:flex; align-items:center; gap:8px;
  padding:10px 17px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--ink-2); font-size:14px; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.ptab:hover{ border-color:var(--accent-hi); color:var(--accent-ink); background:var(--accent-tint); }
.ptab.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 2px 8px -2px rgba(107,79,49,.4);
}

.pat-panel{ display:none; }
.pat-panel.active{ display:block; animation:reveal .26s var(--ease); }
.pat-panel .card{ margin-bottom:16px; }

.pat-upload-row{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.pat-upload-row .muted{ font-family:var(--mono); font-size:12.8px; }

.pat-board-card{ margin-bottom:16px; }

.pat-canvas-wrap{
  position:relative;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  overflow:hidden; background:#fffdf9;
  box-shadow:inset 0 1px 3px rgba(56,44,28,.05);
}
#patCanvas{ display:block; width:100%; cursor:crosshair; }

.pat-hint{
  position:absolute; left:11px; top:11px; right:11px;
  font-size:12.5px; color:var(--ink-2);
  pointer-events:none;
  background:rgba(255,253,249,.9);
  backdrop-filter:blur(4px);
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  padding:5px 11px;
}
.pat-preview{ line-height:0; }
.pat-preview svg{ border-radius:var(--r-sm); }

/* ============================================================
   18. 打印（A4 分片 1:1）—— 保持原样，确保 1:1 精度
   ============================================================ */

#printArea{ display:none; }
@media print{
  @page{ size: A4 portrait; margin:0; }
  body.pp-printing > *:not(#printArea){ display:none !important; }
  body.pp-printing #printArea{ display:block !important; }
  .pp-page{
    width:210mm; height:297mm; overflow:hidden; position:relative;
    page-break-after:always; break-after:page;
    background:#fff;
  }
  .pp-page:last-child{ page-break-after:auto; break-after:auto; }
  .pp-svg{ position:absolute; left:10mm; top:10mm; }
  .pp-sep{ page-break-after:always; break-after:page; height:0; }
}

/* ============================================================
   19. 页脚
   ============================================================ */

.footer{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  padding:44px 0;
}
.footer-inner{
  display:flex; justify-content:space-between; gap:28px;
  flex-wrap:wrap; align-items:flex-start;
}
.footer .muted{ margin:11px 0 0; }
.footer-links{
  display:flex; gap:6px 20px; flex-wrap:wrap; font-size:14px;
}
.footer-links a{ color:var(--ink-2); }
.footer-links a:hover{ color:var(--accent-ink); }

/* ============================================================
   23. 图形语言（v3 新增）
   ------------------------------------------------------------
   目标：让内容不再是一整片文字
   全部组件复用既有设计令牌
   ============================================================ */

/* --- 23.1 通用图标 --- */
.ico{ display:block; flex:none; }
[class*="ico-"]{ color:inherit; }

/* 图标容器：方形底 + 主色描边 */
.icon-tile{
  display:grid; place-items:center;
  width:44px; height:44px; flex:none;
  border-radius:var(--r-sm);
  background:var(--accent-tint);
  border:1px solid var(--line);
  color:var(--accent);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.icon-tile.sm{ width:34px; height:34px; border-radius:var(--r-xs); }
.icon-tile.lg{ width:56px; height:56px; border-radius:var(--r); }

/* --- 23.2 参数条形图（面料特性可视化） --- */
.meters{ display:flex; flex-direction:column; gap:9px; }
.meter{
  display:grid; grid-template-columns:64px 1fr 30px;
  align-items:center; gap:11px;
  font-size:12.5px;
}
.meter-label{ color:var(--ink-2); font-weight:600; white-space:nowrap; }
.meter-track{
  height:7px; border-radius:var(--r-full);
  background:var(--bar-track); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(56,44,28,.06);
}
.meter-fill{
  display:block; height:100%; border-radius:var(--r-full);
  background:var(--tone-a);
  transition:width .5s var(--ease);
}
.meter-fill.tone-b{ background:var(--tone-b); }
.meter-fill.tone-c{ background:var(--tone-c); }
.meter-fill.tone-d{ background:var(--tone-d); }
.meter-val{
  font-family:var(--mono); font-size:11.8px; font-weight:600;
  color:var(--ink-3); text-align:right;
  font-variant-numeric:tabular-nums;
}

/* --- 23.3 针脚示意图 --- */
.stitch-svg{
  display:block; width:100%; height:auto;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.stitch-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:15px;
  box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:11px;
  transition:box-shadow var(--dur) var(--ease), transform .2s var(--ease);
}
.stitch-card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.stitch-card h4{
  font-size:14.5px; display:flex; align-items:center; gap:7px;
}
.stitch-card .sc-when{
  font-size:12.5px; color:var(--ink-3); margin:0;
  padding-top:10px; border-top:1px dashed var(--line-2);
}

/* --- 23.4 步骤指示条 --- */
.steps-strip{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.step-node{
  position:relative;
  display:grid; grid-template-columns:auto auto 1fr;
  align-items:start; gap:12px;
  padding:0 0 20px 0;
}
.step-node:last-child{ padding-bottom:0; }
/* 竖向连接线 */
.step-node:not(:last-child)::before{
  content:""; position:absolute;
  left:13px; top:28px; bottom:0; width:1.5px;
  background:linear-gradient(180deg, var(--line-2), var(--line));
}
.step-dot{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:27px; height:27px; flex:none;
  border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent-soft);
  font-family:var(--mono); font-size:12px; font-weight:700;
}
.step-ico{
  display:grid; place-items:center;
  width:27px; height:27px; flex:none;
  border-radius:var(--r-xs);
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-3);
}
.step-txt{
  font-size:14.2px; color:var(--ink-2); line-height:1.68;
  padding-top:3px;
}
.step-txt b{ color:var(--ink); }
.step-txt em{
  display:block; font-style:normal;
  font-size:12.8px; color:var(--ink-3); margin-top:3px;
}
/* 横向紧凑版 */
.steps-strip.compact{
  flex-direction:row; flex-wrap:wrap; gap:8px;
}
.steps-strip.compact .step-node{
  grid-template-columns:auto auto; padding:0;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:8px 13px 8px 9px;
  gap:9px; align-items:center;
}
.steps-strip.compact .step-node::before{ display:none; }
.steps-strip.compact .step-txt{ padding-top:0; font-size:13px; }

/* --- 23.5 对比卡（避坑） --- */
.versus{
  display:grid; grid-template-columns:1fr 1fr; gap:11px;
}
.vs-col{
  border-radius:var(--r-sm); padding:14px 16px;
  font-size:13.6px; color:var(--ink-2);
  border:1px solid;
}
.vs-col p{ margin:8px 0 0; line-height:1.7; }
.vs-head{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.2px; font-weight:700; letter-spacing:.02em;
}
.vs-bad{ background:var(--danger-soft); border-color:var(--danger-line); }
.vs-bad .vs-head{ color:var(--danger); }
.vs-good{ background:var(--sage-soft); border-color:var(--sage-line); }
.vs-good .vs-head{ color:var(--sage); }
.vs-note{
  font-size:12.8px; color:var(--ink-3);
  margin:10px 0 0; text-align:center;
}

/* --- 23.6 面料质感示意 --- */
.weave-svg{
  display:block; width:100%; height:auto;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
}
.fabric-visual{
  display:grid; grid-template-columns:106px 1fr;
  gap:15px; align-items:start;
}
.fabric-visual.no-thumb{ grid-template-columns:1fr; }

/* --- 23.7 品类小插画 --- */
.figure-svg{
  display:block; width:100%; height:auto;
  background:var(--surface-2);
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  padding:6px;
}

/* --- 23.8 关键数字卡 --- */
.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px 20px;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stat-card:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); }
.sc-num{
  display:block;
  font-size:32px; font-weight:700; line-height:1.05;
  color:var(--accent-ink); letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.sc-num em{
  font-style:normal; font-size:15px; font-weight:600;
  margin-left:3px; color:var(--ink-3);
}
.sc-label{
  display:block; margin-top:7px;
  font-size:12.8px; color:var(--ink-3);
}

/* --- 23.9 特征点列表 --- */
.feature-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1px;
}
.feature-list li{
  display:flex; gap:13px; align-items:flex-start;
  padding:12px 0;
}
.feature-list li + li{ border-top:1px solid var(--line); }
.fl-ico{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:var(--r-xs);
  background:var(--accent-tint); color:var(--accent);
  border:1px solid var(--line);
}
.fl-txt{ font-size:14px; color:var(--ink-2); line-height:1.65; padding-top:3px; min-width:0; }
.fl-txt b{ display:block; color:var(--ink); font-size:14.4px; margin-bottom:3px; }
.fl-txt em{ display:block; font-style:normal; font-size:13px; color:var(--ink-3); }
.feature-list .fl-ico + .fl-txt{ flex:1; }

/* --- 23.10 色卡 --- */
.swatch-row{ display:flex; gap:9px; flex-wrap:wrap; }
.swatch{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:11.5px; color:var(--ink-3);
}
.swatch i{
  display:block; width:38px; height:38px;
  border-radius:var(--r-xs);
  border:1px solid rgba(56,44,28,.12);
  box-shadow:inset 0 -8px 16px -10px rgba(56,44,28,.25);
}
.swatch em{ font-style:normal; font-family:var(--mono); font-size:10.5px; }

/* --- 23.11 三板块导航卡（大号） --- */
.sec-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.sec-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 24px 24px;
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:box-shadow .22s var(--ease), transform .22s var(--ease),
             border-color var(--dur) var(--ease);
}
.sec-card:hover{
  box-shadow:var(--sh-3); transform:translateY(-3px);
  border-color:var(--line-2); text-decoration:none;
}
.sec-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--accent); opacity:.85;
}
.sec-card.tone-b::before{ background:var(--sage); }
.sec-card.tone-c::before{ background:var(--clay); }
.sec-card.tone-d::before{ background:var(--blue); }

.sc-top{
  display:flex; align-items:center; gap:13px;
  margin-bottom:16px;
}
.sc-top .sec-no{
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--ink-4); letter-spacing:.06em;
}
.sec-card h3{ font-size:20px; letter-spacing:-.024em; margin-bottom:9px; }
.sec-card > p{
  font-size:14px; color:var(--ink-2); line-height:1.72;
  margin-bottom:18px; flex:1;
}
.sec-card .sec-list{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; flex-direction:column; gap:7px;
}
.sec-card .sec-list li{
  display:flex; align-items:center; gap:9px;
  font-size:13.2px; color:var(--ink-2);
}
.sec-card .sec-list .ico{ color:var(--accent); opacity:.85; }
.sec-card .sec-go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:650; color:var(--accent-ink);
  margin-top:auto;
}
.sec-card .sec-go::after{
  content:"→"; transition:transform .22s var(--ease);
}
.sec-card:hover .sec-go::after{ transform:translateX(4px); }
.sec-card.coming{
  border-style:dashed; background:var(--surface-2);
  box-shadow:none;
}
.sec-card.coming::before{ opacity:.35; }
.sec-card.coming h3{ color:var(--ink-3); }

/* --- 23.12 板块内子页切换条 --- */
.subnav{
  position:sticky; top:0; z-index:20;
  background:rgba(253,251,247,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.subnav-inner{
  display:flex; gap:4px; align-items:center;
  overflow-x:auto; scrollbar-width:none;
  padding:11px 0;
}
.subnav-inner::-webkit-scrollbar{ display:none; }
.subnav-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:var(--r-sm);
  font-size:13.8px; font-weight:600; color:var(--ink-2);
  white-space:nowrap; flex:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.subnav-link:hover{ background:var(--accent-tint); color:var(--accent-ink); text-decoration:none; }
.subnav-link.here{
  background:var(--accent); color:#fff;
  box-shadow:0 2px 8px -2px rgba(107,79,49,.4);
}
.subnav-link .ico{ opacity:.9; }
.subnav-sep{
  width:1px; height:20px; background:var(--line-2);
  flex:none; margin:0 6px;
}

/* --- 23.13 板块头部（子页共用） --- */
.sec-head{
  position:relative;
  padding:46px 0 34px;
  overflow:hidden;
  background:
    radial-gradient(720px 280px at 6% -40%, var(--accent-soft) 0%, transparent 64%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.sec-head .wrap{ position:relative; z-index:1; }
.sec-head h1{ font-size:clamp(26px, 3.4vw, 36px); margin-bottom:14px; }
.sec-head .lead{ font-size:15.5px; max-width:760px; margin:0; }
.sec-head-mark{
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  color:var(--accent); opacity:.07; pointer-events:none;
}

/* --- 23.14 不规则卡片网格 --- */
.grid-mix{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:16px;
}
.grid-mix > *{ min-width:0; }
.grid-mix > .span-6{ grid-column:span 6; }
.grid-mix > .span-4{ grid-column:span 4; }
.grid-mix > .span-3{ grid-column:span 3; }
.grid-mix > .span-2{ grid-column:span 2; }

/* --- 23.15 图块卡（图形大、文字少） --- */
.tile{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh-1);
  transition:box-shadow .22s var(--ease), transform .22s var(--ease),
             border-color var(--dur) var(--ease);
}
.tile:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); border-color:var(--line-2); }
.tile-art{
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  padding:16px;
  display:grid; place-items:center;
}
.tile-art .ico{ color:var(--accent); }
.tile-art.big{ padding:22px; }
.tile-body{ padding:16px 18px; flex:1; display:flex; flex-direction:column; }
.tile-body h4{ font-size:15px; margin-bottom:7px; }
.tile-body p{ font-size:13.4px; color:var(--ink-2); line-height:1.68; margin:0; }
.tile-body .tile-meta{
  display:flex; gap:6px; flex-wrap:wrap; margin-top:12px;
}

/* --- 23.16 空状态 --- */
.blank-slate{
  text-align:center; padding:56px 24px;
  background:var(--surface); border:1px dashed var(--line-2);
  border-radius:var(--r-lg);
}
.blank-slate .bs-ico{
  display:grid; place-items:center;
  width:64px; height:64px; margin:0 auto 18px;
  border-radius:var(--r);
  background:var(--accent-tint); color:var(--accent);
  border:1px solid var(--line);
}
.blank-slate h3{ font-size:17px; margin-bottom:9px; }
.blank-slate p{
  font-size:14px; color:var(--ink-3); margin:0 auto;
  max-width:44ch; line-height:1.75;
}

/* --- 23.17 v3 通用增强：区块分隔更松 --- */
.section-tight{ padding:52px 0; }
.sec-title{ letter-spacing:-.024em; }
.card > p{ font-size:14.8px; line-height:1.76; }

/* ============================================================
   24. 选布配款
   ============================================================ */

/* --- 选择器栅格 --- */
.pick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(158px, 1fr));
  gap:12px;
}
.pick-card{
  display:flex; flex-direction:column; gap:7px;
  padding:12px; text-align:left; font-family:inherit;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform .18s var(--ease);
}
.pick-card:hover{
  border-color:var(--accent-hi); box-shadow:var(--sh-2);
  transform:translateY(-2px);
}
.pick-card.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft), var(--sh-2);
}
.pick-thumb{
  display:block; border-radius:var(--r-xs); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
}
.pick-thumb .weave-svg,
.pick-thumb .figure-svg{ border:0; border-radius:0; }
.pick-name{
  font-size:13.6px; font-weight:650; color:var(--ink);
  line-height:1.42;
}
.pick-sub{
  font-size:11.8px; color:var(--ink-3); line-height:1.5;
}
.pick-mini{
  display:flex; gap:5px; flex-wrap:wrap; margin-top:auto;
  padding-top:7px; border-top:1px solid var(--line);
}
.pick-mini i{
  font-style:normal; font-family:var(--mono);
  font-size:10.4px; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-xs); padding:2px 6px;
}
/* 难度标签（选款卡片里用，比参数标签更醒目一点） */
.pick-mini i.lvl{ font-family:inherit; font-weight:600; }
.pick-mini i.lvl::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  margin-right:5px; vertical-align:1px;
}
.pick-mini i.lvl.easy{ color:#3f7a55; background:#eef6f0; border-color:#c9e2d3; }
.pick-mini i.lvl.easy::before{ background:#5f9c74; }
.pick-mini i.lvl.mid{ color:#8a6a3c; background:#fbf4e6; border-color:#eadfc4; }
.pick-mini i.lvl.mid::before{ background:#c99f52; }
.pick-mini i.lvl.hard{ color:#9a5f4a; background:#fbefe9; border-color:#eed6ca; }
.pick-mini i.lvl.hard::before{ background:#c07a5e; }

/* --- 结果区头部 --- */
.match-hero{
  display:grid; grid-template-columns:150px 1fr; gap:22px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px;
  box-shadow:var(--sh-1); margin-bottom:24px;
  align-items:start;
}
.match-hero .mh-left{ border-radius:var(--r-sm); overflow:hidden; }
.match-hero .mh-left.narrow{ max-width:130px; }
.match-hero .mh-left .weave-svg,
.match-hero .mh-left .figure-svg{ border:0; }
.mh-right h3{ font-size:20px; margin-bottom:7px; letter-spacing:-.022em; }
.mh-feel{
  font-size:13.6px; color:var(--ink-3);
  margin:0 0 15px;
}
.needs-row{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px; }
.need-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:12.2px; color:var(--ink-2); font-weight:600;
}
.need-pill .ico{ color:var(--accent); }
.needs-why{
  font-size:13.4px; color:var(--ink-2);
  background:var(--accent-tint); border-left:3px solid var(--accent-hi);
  border-radius:0 var(--r-xs) var(--r-xs) 0;
  padding:10px 14px; margin:0; line-height:1.68;
}

/* --- 分组标题 --- */
.match-group-h{
  display:flex; align-items:center; gap:8px;
  font-size:15px; margin:26px 0 13px;
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.match-group-h .ico{ color:var(--sage); }
.match-group-h.warn .ico{ color:var(--clay); }
.match-group-h.bad .ico{ color:var(--danger); }
.match-group-h.warn{ color:var(--ink-2); }
.match-group-h.bad{ color:var(--ink-2); }

/* --- 匹配行 --- */
.match-list{ display:flex; flex-direction:column; gap:11px; }
.match-list.dim{ opacity:.62; }

.match-row{
  display:grid; grid-template-columns:86px 1fr auto;
  gap:17px; align-items:start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 17px;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.match-row:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); }
.mr-thumb{ border-radius:var(--r-xs); overflow:hidden; }
.mr-thumb .weave-svg,
.mr-thumb .figure-svg{ border:0; }
.mr-main{ min-width:0; }
.mr-head{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:4px;
}
.mr-head h4{ font-size:15px; margin:0; }
.mr-sub{ font-size:12.6px; color:var(--ink-3); margin:0 0 11px; }
.mr-main .meters{ gap:7px; }
.mr-main .meter{ grid-template-columns:44px 1fr 28px; font-size:11.6px; }
.mr-why{
  display:flex; align-items:flex-start; gap:6px;
  font-size:12.5px; color:var(--danger);
  margin:11px 0 0; line-height:1.6;
}
.mr-why.good{ color:var(--sage); }
.mr-why .ico{ flex:none; margin-top:2px; }
.mr-acts{ display:flex; flex-direction:column; gap:7px; }

/* --- 响应式 --- */
@media (max-width: 900px){
  .match-row{ grid-template-columns:74px 1fr; }
  .mr-acts{ grid-column:1 / -1; flex-direction:row; }
  .match-hero{ grid-template-columns:120px 1fr; gap:17px; }
}
@media (max-width: 720px){
  .pick-grid{ grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:10px; }
  .match-hero{ grid-template-columns:1fr; }
  .match-hero .mh-left,
  .match-hero .mh-left.narrow{ max-width:100%; }
  .match-row{ grid-template-columns:1fr; gap:13px; }
  .mr-thumb{ max-width:110px; }
  .match-group-h{ font-size:14.2px; }
}

/* ============================================================
   25. 缝纫方法工序表
   ============================================================ */

.stitch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:14px;
}

/* --- 工序表头部 --- */
.order-head{
  display:grid; grid-template-columns:126px 1fr; gap:20px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--sh-1); align-items:start;
}
.oh-fig{ border-radius:var(--r-sm); overflow:hidden; }
.oh-fig .figure-svg{ border:0; }
.oh-main h3{ font-size:19px; margin-bottom:6px; letter-spacing:-.022em; }
.oh-sub{ font-size:13.2px; color:var(--ink-3); margin:0 0 12px; line-height:1.65; }
.oh-stats{ display:flex; gap:6px; flex-wrap:wrap; }

/* --- 机器设置 --- */
.preset-box{
  margin-top:16px; padding:17px 20px;
  background:var(--accent-tint);
  border:1px solid var(--accent-soft);
  border-radius:var(--r);
}
.preset-box h4{
  display:flex; align-items:center; gap:8px;
  font-size:14.4px; margin-bottom:13px;
}
.preset-box h4 .ico{ color:var(--accent); }
.preset-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
}
.preset-item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xs); padding:9px 12px;
}
.preset-item b{
  display:block; font-size:11.4px; color:var(--ink-3);
  font-weight:600; margin-bottom:3px; letter-spacing:.02em;
}
.preset-item span{
  font-family:var(--mono); font-size:13.4px;
  font-weight:600; color:var(--accent-ink);
}
.preset-note{
  display:flex; align-items:flex-start; gap:6px;
  font-size:12.6px; color:var(--clay);
  margin:12px 0 0; line-height:1.6;
}
.preset-note .ico{ flex:none; margin-top:2px; }

/* --- 工序列表 --- */
.order-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.order-item{
  position:relative;
  display:grid; grid-template-columns:auto 1fr;
  gap:14px; padding:15px 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:10px;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.order-item:hover{ box-shadow:var(--sh-2); }
.order-item.risk-warn{ border-left:3px solid var(--clay-line); }
.order-item.risk-hard{
  border-left:3px solid var(--clay);
  background:linear-gradient(90deg, var(--clay-soft) 0%, var(--surface) 110px);
}
.oi-no{
  display:grid; place-items:center;
  width:28px; height:28px; flex:none;
  border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink);
  font-family:var(--mono); font-size:12.4px; font-weight:700;
}
.order-item.risk-hard .oi-no{ background:var(--clay); color:#fff; }
.oi-body{ min-width:0; }
.oi-top{
  display:flex; align-items:center; gap:9px;
  flex-wrap:wrap; margin-bottom:6px;
}
.oi-top h5{
  font-size:14.6px; font-weight:650; margin:0;
  color:var(--ink); letter-spacing:-.012em;
}
.oi-seam{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.8px; color:var(--blue);
  background:var(--blue-soft); border:1px solid var(--blue-line);
  border-radius:var(--r-xs); padding:2.5px 8px;
  font-weight:600;
}
.oi-note{
  font-size:13.3px; color:var(--ink-2);
  margin:0; line-height:1.68;
}
.order-item.risk-hard .oi-note{ color:var(--accent-ink); }

@media (max-width: 720px){
  .stitch-grid{ grid-template-columns:1fr; }
  .order-head{ grid-template-columns:1fr; }
  .oh-fig{ max-width:120px; }
  .order-item{ padding:13px 14px; gap:11px; }
  .preset-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   26. 缝纫技巧：故障对照 + 参数表
   ============================================================ */

.trouble-list{ display:flex; flex-direction:column; gap:12px; }

.trouble{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:17px 19px;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.trouble:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); }

.tb-sym{
  display:flex; align-items:center; gap:9px;
  flex-wrap:wrap; margin-bottom:13px;
  padding-bottom:12px; border-bottom:1px dashed var(--line-2);
}
.tb-sym .ico{ color:var(--clay); flex:none; }
.tb-sym h4{
  font-size:15px; margin:0; flex:1; min-width:0;
  color:var(--ink); letter-spacing:-.012em;
}

.tb-rows{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tb-row{ display:flex; flex-direction:column; gap:5px; }
.tb-k{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.6px; font-weight:700;
  letter-spacing:.04em; color:var(--ink-3);
}
.tb-row p{
  font-size:13.5px; margin:0; line-height:1.68;
  color:var(--ink-2);
}
.tb-cause .tb-k{ color:var(--clay); }
.tb-cause p{ color:var(--ink-2); }
.tb-fix .tb-k{ color:var(--sage); }
.tb-fix p{ color:var(--accent-ink); font-weight:500; }

/* --- 数据表 --- */
.tbl-wrap{
  overflow-x:auto; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--sh-1);
}
.data-tbl{
  width:100%; border-collapse:collapse;
  font-size:13.6px; min-width:660px;
}
.data-tbl thead th{
  text-align:left; font-size:11.8px; font-weight:700;
  letter-spacing:.05em; color:var(--ink-3);
  background:var(--surface-2);
  padding:12px 15px; border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.data-tbl tbody td{
  padding:12px 15px; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:top;
}
.data-tbl tbody tr:last-child td{ border-bottom:0; }
.data-tbl tbody tr:hover{ background:var(--accent-tint); }
.td-strong{ font-weight:650; color:var(--ink) !important; }
.td-mono{
  font-family:var(--mono); font-size:12.8px;
  color:var(--accent-ink) !important; font-weight:600;
  white-space:nowrap;
}
.td-note{ font-size:12.8px; color:var(--ink-3) !important; }

@media (max-width: 720px){
  .tb-rows{ grid-template-columns:1fr; gap:11px; }
  .trouble{ padding:15px 16px; }
}

/* ============================================================
   27. 试衣台
   ============================================================ */

.du-layout{
  display:grid; grid-template-columns:minmax(300px, 400px) 1fr;
  gap:26px; align-items:start;
}
.du-left{ position:sticky; top:96px; }

/* --- 人台 --- */
.du-stage-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px 16px 12px;
  box-shadow:var(--sh-sm);
}
.du-stage{
  position:relative; width:100%; max-width:340px; margin:0 auto;
  aspect-ratio:200 / 460;
  background:
    radial-gradient(ellipse 78% 62% at 50% 30%, #fdfaf5 0%, #f6f0e6 62%, #f1e9dc 100%);
  border-radius:var(--r); overflow:hidden;
}
.du-stage svg{ position:absolute; inset:0; width:100%; height:100%; }
.du-garment{ z-index:2; }
.du-body{ z-index:1; }
/* 衣服部件轻微高光，让人形有体积感 */
.du-part path{ transition:fill .18s ease, stroke .18s ease; }
.du-stage-tag{
  position:absolute; left:10px; top:10px; z-index:3;
  font-size:11.6px; font-weight:600; color:var(--ink-2);
  background:rgba(255,253,249,.86); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:var(--r-full);
  padding:3px 10px;
}
.du-stage-bar{
  display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap;
}
.du-note{
  margin-top:14px; font-size:12.9px; line-height:1.72; color:var(--ink-3);
  background:var(--surface-2); border:1px dashed var(--line);
  border-radius:var(--r); padding:12px 14px;
}
.du-note b{ color:var(--ink); }

/* --- 右侧面板 --- */
.du-right{ display:flex; flex-direction:column; gap:20px; }
.du-panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px 22px;
}
.du-h{
  font-size:15.5px; font-weight:700; color:var(--ink);
  margin:0 0 4px; letter-spacing:-.01em;
}
.du-p{ font-size:13.2px; color:var(--ink-3); line-height:1.68; margin:0 0 14px; }
.du-sub{
  display:block; font-size:12.4px; font-weight:600; color:var(--ink-3);
  letter-spacing:.04em; margin-bottom:10px;
}

/* --- 身形预设 --- */
.du-body-presets{
  display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
/* --- 滑块 --- */
.du-sliders{ display:flex; flex-direction:column; gap:14px; }
.du-slider{ display:block; cursor:pointer; }
.ds-label{
  display:flex; align-items:baseline; gap:5px;
  font-size:13.2px; color:var(--ink-2); margin-bottom:7px;
}
.ds-label b{
  font-family:var(--mono); font-size:15px; font-weight:700;
  color:var(--accent-ink); margin-left:auto;
}
.ds-label i{ font-style:normal; font-size:11.4px; color:var(--ink-4); }
.du-slider input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:5px; border-radius:999px;
  background:var(--bar-track); outline:none; cursor:pointer;
}
.du-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:19px; height:19px; border-radius:50%;
  background:var(--accent); border:3px solid #fff;
  box-shadow:0 1px 5px rgba(56,44,28,.3); cursor:grab;
  transition:transform .14s ease;
}
.du-slider input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.14); cursor:grabbing; }
.du-slider input[type=range]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%;
  background:var(--accent); border:3px solid #fff;
  box-shadow:0 1px 5px rgba(56,44,28,.3); cursor:grab;
}

/* --- 配色方案 --- */
.du-schemes{ margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.du-scheme-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:9px; }
.du-scheme{
  display:flex; flex-direction:column; gap:7px; align-items:stretch;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:9px 10px; cursor:pointer;
  transition:all .16s ease;
}
.du-scheme:hover{ border-color:var(--accent-hi); transform:translateY(-1px); }
.du-scheme.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(138,95,60,.14);
}
.ds-swatch{ display:flex; height:20px; border-radius:var(--r-xs); overflow:hidden; }
.ds-swatch i{ flex:1; }
.ds-name{ font-size:11.6px; color:var(--ink-2); text-align:center; font-weight:500; }

/* --- 部件换色 --- */
.du-parts{ display:flex; flex-direction:column; gap:12px; }
.du-part-row{
  display:grid; grid-template-columns:66px 1fr auto;
  gap:12px; align-items:center;
}
.dpr-name{ font-size:13px; color:var(--ink-2); font-weight:500; }
.dpr-chips{ display:flex; gap:4px; flex-wrap:wrap; }
.du-chip{
  width:21px; height:21px; border-radius:var(--r-xs);
  border:1.5px solid rgba(56,44,28,.14); cursor:pointer; padding:0;
  transition:transform .13s ease, box-shadow .13s ease;
}
.du-chip:hover{ transform:scale(1.16); }
.du-chip.active{
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent);
  transform:scale(1.1);
}
.dpr-hex{
  font-family:var(--mono); font-size:10.8px; color:var(--ink-4);
  min-width:56px; text-align:right;
}

/* --- 身形比例可视化 --- */
.du-shape{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 24px;
}
.du-shape-row{
  display:grid; grid-template-columns:58px 1fr 76px;
  gap:14px; align-items:center; margin-bottom:11px;
}
.dsr-name{ font-size:13px; color:var(--ink-2); }
.dsr-bar{
  height:9px; border-radius:999px; background:var(--bar-track); overflow:hidden;
}
.dsr-bar i{ display:block; height:100%; border-radius:999px; transition:width .3s cubic-bezier(.32,.72,.35,1); }
.dsr-val{ font-family:var(--mono); font-size:12.4px; color:var(--ink-3); text-align:right; }
.du-shape-note{
  margin:16px 0 0; padding-top:15px; border-top:1px solid var(--line);
  font-size:13.4px; line-height:1.72; color:var(--ink-2);
}

/* --- 尺寸表脚注 --- */
.du-size-foot{
  margin:16px 0 0; font-size:13.2px; line-height:1.75; color:var(--ink-3);
  background:var(--surface-2); border-left:3px solid var(--accent-hi);
  border-radius:0 var(--r) var(--r) 0; padding:13px 16px;
}
.du-size-foot b{ color:var(--ink); }

/* --- 存档小色块 --- */
.du-mini-swatches{ display:inline-flex; gap:2px; vertical-align:middle; margin-left:4px; }
.du-mini-swatches i{
  width:14px; height:14px; border-radius:3px;
  border:1px solid rgba(56,44,28,.14);
}

@media (max-width: 1040px){
  .du-layout{ grid-template-columns:1fr; }
  .du-left{ position:static; }
  .du-stage{ max-width:300px; }
}

@media (max-width: 720px){
  .du-panel{ padding:17px 16px; }
  .du-part-row{ grid-template-columns:1fr; gap:7px; }
  .dpr-hex{ text-align:left; }
  .du-shape{ padding:17px 16px; }
  .du-shape-row{ grid-template-columns:52px 1fr 66px; gap:10px; }
  .du-scheme-row{ grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ============================================================
   28. 项目工作台：七阶段流水线
   ============================================================ */

.pr-topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* 设计平台总览页的主入口 CTA */
.pr-cta{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding:28px 30px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--bg-tint), var(--bg));
  border:1px solid var(--line); box-shadow:var(--sh);
}
.pr-cta-txt{ flex:1 1 380px; }
.pr-cta-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  padding:3px 11px; border-radius:var(--r-full); background:var(--accent); color:#fff; margin-bottom:11px;
}
.pr-cta h2{ margin:0 0 8px; font-size:25px; }
.pr-cta p{ margin:0; font-size:13.5px; line-height:1.75; color:var(--ink-2); max-width:62ch; }
.btn-lg{ padding:13px 26px; font-size:15px; }

.pr-topbar-r{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pr-overall{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-3); }
.pr-ob-bar{ display:block; width:120px; height:7px; border-radius:var(--r-full); background:var(--bg-tint); overflow:hidden; }
.pr-ob-bar i{ display:block; height:100%; border-radius:var(--r-full); background:linear-gradient(90deg, var(--accent), var(--accent-hi)); transition:width .3s; }
.pr-overall b{ color:var(--ink); font-size:13px; }

/* 阶段条 */
.pr-stages{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-top:22px;
}
.pr-stage{
  display:flex; flex-direction:column; gap:7px; align-items:flex-start;
  padding:12px 11px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-soft); cursor:pointer; text-align:left;
  transition:border-color .16s, background .16s, transform .16s;
}
.pr-stage:hover{ border-color:var(--accent); transform:translateY(-1px); }
.pr-stage.active{ border-color:var(--accent); background:var(--bg); box-shadow:0 0 0 2px rgba(138,95,60,.13); }
.pr-stage.done .prs-no{ background:var(--accent); color:#fff; border-color:var(--accent); }
.prs-no{
  width:23px; height:23px; border-radius:var(--r-full); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; color:var(--ink-3); flex:none; background:var(--bg);
}
.prs-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.prs-txt b{ font-size:13px; color:var(--ink); }
.prs-txt em{ font-size:11px; color:var(--ink-4); font-style:normal; line-height:1.45; }

/* 面板 */
.pr-panel{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 26px 22px;
}
.pr-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pr-panel-step{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.pr-panel-head h3{ margin:0; font-size:22px; }
.pr-panel-acts{ flex:none; }
.pr-help{ margin:9px 0 22px; font-size:13.5px; color:var(--ink-3); line-height:1.7; }

.pr-panel-nav{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
}
.pr-fin{ font-size:14px; font-weight:700; color:var(--accent); }

.pr-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px; }
.pr-card + .pr-card{ margin-top:14px; }
.pr-card h4{ margin:0 0 4px; font-size:15px; display:flex; align-items:center; gap:8px; }
.pr-sub{ margin:5px 0 12px; font-size:12.5px; color:var(--ink-3); line-height:1.65; }
.pr-flabel{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:8px; }
.pr-field{ margin-top:16px; }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }

/* 难度 */
.pr-diffs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:9px; }
.pr-diff{
  display:flex; flex-direction:column; gap:3px; padding:12px 13px; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-soft); cursor:pointer;
  transition:border-color .16s, background .16s;
}
.pr-diff:hover{ border-color:var(--accent); }
.pr-diff.active{ border-color:var(--accent); background:var(--bg); box-shadow:0 0 0 2px rgba(138,95,60,.13); }
.pr-diff b{ font-size:13px; color:var(--ink); }
.pr-diff em{ font-size:11.5px; color:var(--ink-4); font-style:normal; }

/* 提示卡（棕色调） */
.pr-hint-card{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:16px; padding:14px 15px; border-radius:var(--r-sm);
  background:var(--bg-tint); border:1px solid var(--line); font-size:12.5px; line-height:1.7; color:var(--ink-2);
}
.pr-hint-card svg{ flex:none; color:var(--accent); margin-top:1px; }
.pr-hint-card a{ color:var(--accent); text-decoration:underline; }

/* 阶段内部两栏 */
.pr-step-grid, .pr-body-grid{ display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start; }
.pr-side{ display:flex; flex-direction:column; }

/* 选布 */
.pr-fab-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:9px; }
.pr-fab{
  display:flex; flex-direction:column; gap:6px; padding:11px 12px; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-soft); cursor:pointer;
  transition:border-color .16s, background .16s;
}
.pr-fab:hover{ border-color:var(--accent); }
.pr-fab.active{ border-color:var(--accent); background:var(--bg); box-shadow:0 0 0 2px rgba(138,95,60,.13); }
.prf-chips{ display:flex; align-items:center; gap:3px; }
.prf-chips i{ width:15px; height:15px; border-radius:4px; display:block; border:1px solid rgba(0,0,0,.07); }
.prf-lv{ margin-left:auto; font-size:10px; font-style:normal; padding:2px 6px; border-radius:var(--r-full); background:var(--bg-tint); color:var(--ink-3); }
.prf-lv.lv-1{ background:#e6efe4; color:#4d6b48; }
.prf-lv.lv-2{ background:#f3ead9; color:#8a6a35; }
.prf-lv.lv-3{ background:#f2e0dc; color:#8a4f42; }
.prf-name{ font-size:13px; font-weight:700; color:var(--ink); }
.prf-use{ font-size:11px; color:var(--ink-4); line-height:1.45; }

.pr-calc{ margin:10px 0 0; font-size:13px; color:var(--ink-2); }
.pr-calc b{ color:var(--accent); }
.pr-calc-note{ margin:10px 0 0; font-size:12px; color:var(--ink-3); line-height:1.65; }

.pr-swatches{ display:grid; grid-template-columns:repeat(auto-fill, minmax(30px, 1fr)); gap:6px; }
.pr-sw{
  aspect-ratio:1; border-radius:7px; border:2px solid transparent; cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .14s;
}
.pr-sw:hover{ transform:scale(1.08); }
.pr-sw.active{ border-color:var(--accent); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px rgba(138,95,60,.2); }
.pr-chosen{ display:flex; gap:6px; align-items:center; margin-top:11px; min-height:26px; flex-wrap:wrap; }
.pr-chosen i{ width:26px; height:26px; border-radius:7px; display:block; border:1px solid rgba(0,0,0,.09); }

/* 纸样 */
.pr-sliders{ display:flex; flex-direction:column; gap:11px; margin-top:14px; }
.pr-seam-row{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.pr-seam-row .muted{ font-size:12px; }

.pr-pieces{ display:flex; flex-direction:column; gap:9px; }
.pr-piece{
  display:flex; gap:12px; align-items:center; padding:10px 11px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-soft);
}
.prpc-art{
  width:66px; height:66px; flex:none; background:#fffdf9; border-radius:8px;
  border:1px solid var(--line); padding:3px;
}
.prpc-art svg{ width:100%; height:100%; display:block; }
.prpc-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.prpc-body b{ font-size:13px; }
.prpc-body em{ font-size:11.5px; color:var(--ink-3); font-style:normal; }
.prpc-grain{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-4); }
.prpc-grain svg{ flex:none; }

/* 投影阶段 */
.pr-proj-card{ background:var(--bg-tint); }
.pr-piece-chips{ display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 0; }
.pr-piece-chip{ font-size:11.5px; padding:4px 10px; border-radius:var(--r-full); background:var(--bg); border:1px solid var(--line); color:var(--ink-2); }
.pr-acts{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
.pr-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pr-good, .pr-bad{ display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:var(--r-full); margin-bottom:7px; }
.pr-good{ background:#e6efe4; color:#4d6b48; }
.pr-bad{ background:#f2e0dc; color:#8a4f42; }
.pr-ul{ margin:0; padding-left:17px; font-size:12.5px; line-height:1.85; color:var(--ink-2); }
.pr-ol{ margin:0; padding-left:19px; font-size:12.5px; line-height:1.85; color:var(--ink-2); }
.pr-ul li, .pr-ol li{ margin-bottom:3px; }

/* 裁剪 */
.pr-cut-list{ display:flex; flex-direction:column; gap:9px; }
.pr-cut-row{
  display:flex; gap:12px; align-items:flex-start; padding:12px 13px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-soft);
  cursor:pointer; transition:border-color .16s, opacity .16s;
}
.pr-cut-row:hover{ border-color:var(--accent); }
.pr-cut-row.done{ opacity:.62; }
.pr-cut-row.done .prct-body b{ text-decoration:line-through; }
.pr-cut-row input{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--accent); }
.prct-art{
  width:58px; height:58px; flex:none; background:#fffdf9; border-radius:8px;
  border:1px solid var(--line); padding:3px;
}
.prct-art svg{ width:100%; height:100%; display:block; }
.prct-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.prct-body b{ font-size:13.5px; }
.prct-qty{ font-size:12px; color:var(--accent); font-style:normal; font-weight:700; }
.prct-qty strong.warn{ color:#a8452f; }
.prct-note{ font-size:11.5px; color:var(--ink-3); line-height:1.6; }
.prct-grain{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-4); }
.prct-grain svg{ flex:none; }

.pr-warn-card{
  display:flex; gap:12px; align-items:flex-start; padding:16px 16px; border-radius:var(--r-sm);
  background:#fdf1ee; border:1px solid #f0d5cd; font-size:12.5px; line-height:1.7; color:#7a4030;
}
.pr-warn-card svg{ flex:none; color:#a8452f; margin-top:2px; }
.pr-warn-card b{ display:block; margin-bottom:6px; color:#8a4028; }
.pr-warn-card .pr-ol{ color:#7a4030; }
.pr-warn-card + .pr-card{ margin-top:14px; }
.pr-mirror-warn{
  margin-top:11px; padding:11px 12px; border-radius:var(--r-xs);
  background:#fdf1ee; border-left:3px solid #c4573d; font-size:12px; line-height:1.65; color:#7a4030;
}

/* 缝制 */
.pr-sew-list{ display:flex; flex-direction:column; gap:14px; }
.pr-sew-phase{ display:flex; flex-direction:column; gap:7px; }
.prsp-name{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--accent);
  padding-bottom:5px; border-bottom:1px dashed var(--line);
}
.pr-sew-row{
  display:flex; gap:11px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-soft);
  cursor:pointer; transition:border-color .16s, opacity .16s;
}
.pr-sew-row:hover{ border-color:var(--accent); }
.pr-sew-row.done{ opacity:.58; }
.pr-sew-row.done .prsw-body b{ text-decoration:line-through; }
.pr-sew-row.risk-hard{ background:#fdf1ee; border-color:#f0d5cd; }
.pr-sew-row.risk-warn{ background:#fdf8ee; border-color:#efe0c8; }
.pr-sew-row input{ margin-top:2px; width:16px; height:16px; flex:none; accent-color:var(--accent); }
.prsw-no{
  width:22px; height:22px; flex:none; border-radius:var(--r-full); background:var(--bg-tint);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--ink-2);
}
.prsw-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.prsw-body b{ font-size:13px; }
.prsw-body em{ font-size:11.5px; color:var(--ink-3); font-style:normal; line-height:1.6; }
.prsw-risk{ font-size:10.5px; font-weight:700; color:#a8452f; }

/* 成品 */
.pr-upload{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:32px 20px; border:2px dashed var(--line); border-radius:var(--r);
  background:var(--bg-soft); cursor:pointer; text-align:center; transition:border-color .16s, background .16s;
}
.pr-upload:hover{ border-color:var(--accent); background:var(--bg-tint); }
.pr-upload svg{ color:var(--accent); }
.pr-upload b{ font-size:13.5px; }
.pr-upload em{ font-size:11.5px; color:var(--ink-4); font-style:normal; line-height:1.55; }
.pr-photo{ position:relative; border-radius:var(--r-sm); overflow:hidden; }
.pr-photo img{ width:100%; display:block; border-radius:var(--r-sm); }
.pr-photo-del{
  position:absolute; top:9px; right:9px; padding:5px 11px; font-size:11.5px;
  border-radius:var(--r-full); border:none; background:rgba(40,30,22,.72); color:#fff; cursor:pointer;
}
.pr-stars{ display:flex; gap:5px; margin-bottom:9px; }
.pr-star{ font-size:25px; line-height:1; border:none; background:none; cursor:pointer; color:var(--line); padding:0; transition:color .14s, transform .14s; }
.pr-star:hover{ transform:scale(1.14); }
.pr-star.on{ color:#d99b3f; }

.pr-summary{ margin:0; padding:0; list-style:none; font-size:12.5px; }
.pr-summary li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); }
.pr-summary li:last-child{ border-bottom:none; }
.pr-summary span{ color:var(--ink-3); }
.pr-summary b{ color:var(--ink); display:flex; align-items:center; gap:4px; }
.pr-mini{ width:16px; height:16px; border-radius:5px; display:block; border:1px solid rgba(0,0,0,.08); }

/* 项目列表 */
.pr-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(276px, 1fr)); gap:14px; }
.pr-card-item{
  padding:16px 17px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg); cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s;
}
.pr-card-item:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--sh); }
.pr-card-item.active{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(138,95,60,.14); }
.prci-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.prci-top h4{ margin:0; font-size:14.5px; }
.prci-pct{ font-size:12.5px; font-weight:700; color:var(--accent); flex:none; }
.prci-bar{ height:6px; border-radius:var(--r-full); background:var(--bg-tint); overflow:hidden; margin-bottom:11px; }
.prci-bar i{ display:block; height:100%; border-radius:var(--r-full); background:linear-gradient(90deg, var(--accent), var(--accent-hi)); transition:width .3s; }
.prci-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.prci-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:11px; border-top:1px dashed var(--line); }
.prci-foot .muted{ font-size:11.5px; }

/* ============================================================
   29. 全屏投影模式
   ============================================================ */
.pj-overlay{
  position:fixed; inset:0; z-index:9000; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pj-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:grab; }
.pj-stage.grabbing{ cursor:grabbing; }
.pj-svg{ will-change:transform; }
.pj-svg .pj-grid line{ stroke:#1d3a2a; stroke-width:.5; }
.pj-svg .pj-outer{ fill:none; stroke:#8bfff0; stroke-width:1.6; stroke-linejoin:round; }
.pj-svg .pj-net{ fill:none; stroke:#8bfff0; stroke-width:1; stroke-dasharray:7 5; opacity:.72; }
.pj-svg .pj-dim text{ fill:#7fe0d0; font-size:11px; font-family:system-ui, sans-serif; }
.pj-svg .pj-grain line{ stroke:#f0d060; stroke-width:1.1; }
.pj-svg .pj-grain path{ fill:none; stroke:#f0d060; stroke-width:1.1; }
.pj-svg .pj-grain text{ fill:#f0d060; font-size:10px; font-family:system-ui, sans-serif; }
.pj-svg .pj-fold text{ fill:#ffb347; font-size:10px; font-family:system-ui, sans-serif; }
.pj-svg .pj-ruler rect{ fill:rgba(255,255,255,.08); }
.pj-svg .pj-ruler line{ stroke:#ffffff; stroke-width:1.1; }
.pj-svg .pj-ruler text{ fill:#ffffff; font-size:10px; font-family:system-ui, sans-serif; }

.pj-hud{
  position:absolute; left:0; right:0; bottom:0; padding:14px 18px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.62) 62%, transparent);
  display:flex; flex-direction:column; gap:10px; color:#fff;
  font-family:system-ui, -apple-system, sans-serif; font-size:12.5px;
}
.pj-hud.hide{ display:none; }
.pj-hud-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pj-badge{
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--r-full);
  background:rgba(139,255,240,.16); color:#8bfff0; border:1px solid rgba(139,255,240,.35);
}
.pj-hint{ font-size:11px; color:rgba(255,255,255,.5); }
.pj-close{
  margin-left:auto; padding:7px 15px; font-size:12.5px; border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
}
.pj-close:hover{ background:rgba(255,255,255,.2); }
.pj-btn{
  padding:7px 13px; font-size:12px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; transition:background .14s, border-color .14s;
}
.pj-btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); }
.pj-btn b{ color:#8bfff0; font-weight:700; margin-left:2px; }
.pj-btn-primary{ background:rgba(139,255,240,.2); border-color:rgba(139,255,240,.5); color:#c9fff7; }
.pj-btn-primary:hover{ background:rgba(139,255,240,.32); }
.pj-scale-info{ font-size:11.5px; color:rgba(255,255,255,.66); }
.pj-scale-info b{ color:#8bfff0; }
.pj-scale-info em{ color:#f0d060; font-style:normal; }
.pj-calib-box{ display:flex; align-items:center; gap:9px; margin-left:auto; }
.pj-calib-box label{ font-size:11.5px; color:rgba(255,255,255,.72); display:flex; align-items:center; gap:5px; }
.pj-calib-box input{
  width:74px; padding:6px 9px; font-size:12.5px; border-radius:var(--r-xs);
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff;
}
.pj-calib-box i{ font-style:normal; color:rgba(255,255,255,.5); }

.pj-help{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px, 90vw); padding:26px 28px; border-radius:var(--r-lg);
  background:rgba(16,16,16,.96); border:1px solid rgba(255,255,255,.16); color:#eee;
  font-family:system-ui, sans-serif; font-size:13px; line-height:1.8;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.pj-help.hide{ display:none; }
.pj-help h4{ margin:0 0 12px; font-size:16px; color:#8bfff0; }
.pj-help ol{ margin:0 0 18px; padding-left:20px; }
.pj-help li{ margin-bottom:7px; }
.pj-help li b{ color:#8bfff0; }
.pj-help .pj-btn{ width:100%; padding:10px; }

/* 投影模式在窄屏的适配 */
@media (max-width: 900px){
  .pj-hint{ display:none; }
  .pj-calib-box{ margin-left:0; }
}

/* ============================================================
   20. 响应式
   ============================================================ */

@media (max-width: 1040px){
  .hero-inner{ grid-template-columns:1.25fr .8fr; gap:40px; }
  .nav-cards{ grid-template-columns:repeat(2, 1fr); }
  .pr-stages{ grid-template-columns:repeat(4, 1fr); }
  .pr-step-grid, .pr-body-grid{ grid-template-columns:1fr; gap:16px; }
}

@media (max-width: 900px){
  :root{ --sec-y:64px; }
  .hero{ padding:64px 0 68px; }
  .hero-inner{ grid-template-columns:1fr; gap:34px; }
  .hero-art{ max-width:272px; margin-inline:auto; order:-1; }
  .hero-stats{ flex-wrap:wrap; gap:20px 0; }
  .stat{ padding-right:24px; margin-right:24px; }
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
  .tools-grid{ grid-template-columns:1fr; }
  .tpl-grid{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  body{ font-size:15px; }
  :root{ --sec-y:52px; --gut:16px; }

  .wrap{ width:calc(100% - 32px); }

  .nav{
    display:none;
    position:absolute; top:66px; left:0; right:0;
    flex-direction:column; gap:3px;
    padding:12px 16px 16px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:var(--sh-3);
  }
  .nav.open{ display:flex; }
  .nav a{ padding:11px 14px; border-radius:var(--r-sm); }
  .nav a.nav-here::after{ display:none; }
  .nav-toggle{ display:block; }

  .hero{ padding:48px 0 54px; }
  .hero h1{ font-size:clamp(24px, 7vw, 30px); }
  .lead{ font-size:15.5px; }
  .hero-actions{ margin:24px 0 28px; }
  .hero-actions .btn{ flex:1 1 auto; }

  .page-head{ padding:36px 0 28px; }
  .page-head::after{ display:none; }

  .grid-3{ grid-template-columns:1fr; }
  .nav-cards{ grid-template-columns:1fr; }

  .card, .stage-head{ padding-left:18px; padding-right:18px; }
  .stage-body{ padding:0 18px 22px 18px; }
  .stage-head{ gap:13px; }
  .stage-badge{ width:36px; height:36px; border-radius:10px; font-size:14px; }

  .tool-item{ grid-template-columns:1fr; gap:11px; }
  .tool-price{ text-align:left; }
  .tool-price small{ display:inline; margin-left:8px; }

  .form-grid{ grid-template-columns:1fr; }
  .fabric-grid{ grid-template-columns:1fr; }
  .buy-list{ grid-template-columns:1fr; }

  .callout{ padding:20px 18px; }
  .sec-sub{ font-size:15px; }
}

/* --- v3 图形组件的断点适配 --- */
@media (max-width: 1040px){
  .grid-mix > .span-4,
  .grid-mix > .span-3{ grid-column:span 6; }
  .grid-mix > .span-2{ grid-column:span 3; }
  .sec-cards{ gap:16px; }
}

@media (max-width: 900px){
  .sec-cards{ grid-template-columns:1fr; }
  .grid-mix > .span-2{ grid-column:span 6; }
  .fabric-visual{ grid-template-columns:88px 1fr; gap:13px; }
}

@media (max-width: 720px){
  .versus{ grid-template-columns:1fr; }
  .grid-mix > *{ grid-column:span 6 !important; }
  .fabric-visual{ grid-template-columns:1fr; }
  .meter{ grid-template-columns:56px 1fr 27px; gap:9px; }
  .steps-strip.compact{ flex-direction:column; }
  .steps-strip.compact .step-node{ width:100%; }
  .sec-head{ padding:34px 0 26px; }
  .sec-head-mark{ display:none; }
  .sc-num{ font-size:27px; }
  .blank-slate{ padding:40px 20px; }
  .subnav-link{ padding:7px 12px; font-size:13.2px; }
  .icon-tile.lg{ width:48px; height:48px; }

  /* 项目工作台 */
  .pr-stages{ grid-template-columns:repeat(2, 1fr); gap:7px; }
  .prs-txt em{ display:none; }
  .pr-panel{ padding:18px 16px 16px; }
  .pr-panel-head h3{ font-size:18px; }
  .pr-panel-nav{ flex-direction:column-reverse; align-items:stretch; }
  .pr-panel-nav .btn{ width:100%; }
  .pr-two-col{ grid-template-columns:1fr; }
  .pr-list{ grid-template-columns:1fr; }
  .pr-fab-list{ grid-template-columns:1fr 1fr; }
  .pr-swatches{ grid-template-columns:repeat(auto-fill, minmax(26px, 1fr)); }
  .pr-topbar{ flex-direction:column; align-items:stretch; }
  .pr-topbar-r{ justify-content:space-between; }
  .pr-ob-bar{ width:80px; }

  /* 投影模式的手机端：控制条堆叠 */
  .pj-hud{ padding:10px 12px 12px; }
  .pj-hud-row{ gap:7px; }
  .pj-btn{ padding:6px 10px; font-size:11.5px; }
  .pj-badge{ font-size:11px; padding:4px 9px; }
  .pj-scale-info{ font-size:10.5px; }
  .pj-calib-box input{ width:60px; }
  .pj-help{ padding:20px 20px; font-size:12.5px; }
}

/* ============================================================
   21. 打印时简化
   ============================================================ */

@media print{
  .topbar, .footer, .btn, .nav-toggle, .journal-tabs, .form-actions{ display:none !important; }
  .stage-body{ display:block !important; }
}

/* ============================================================
   22. 降低动效偏好
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}