/* ============================================================
   自己做衣服 · 设计系统 v2
   暖色亚麻质感 / 精细排版 / 克制的动效
   ------------------------------------------------------------
   设计原则：
   1. 层级靠「色阶 + 间距」建立，不靠粗边框
   2. 阴影分三级（静置 / 悬浮 / 抬升），统一使用低透明度
   3. 圆角成套：大容器 16 / 卡片 14 / 控件 10 / 徽标 999
   4. 动效只用 transform + opacity，时长 120–260ms
   5. 字重只用 400 / 500 / 600 / 700，标题统一收紧字距
   ============================================================ */

/* ============================================================
   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:80px;

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

/* ============================================================
   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); }

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

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

@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; }
}

/* ============================================================
   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;
  }
}