/* ===========================================================
   配方生成器 · forge.css
   沿用 styles.css 的设计 token（墨色 × 暖中性底 × 柔渐变）
   方法=暖色系(m) / 形态=冷色系(f)，与架构页一致
   =========================================================== */

/* ============ Hero ============ */
.fg-hero{
  position:relative;overflow:hidden;
  background:var(--grad-hero),var(--bg);
  border-bottom:1px solid var(--line);
  padding-block:clamp(56px,11vw,120px) clamp(40px,7vw,72px);
}
.fg-hero .wrap{max-width:980px}
.fg-hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.2rem,7vw,3.2rem);line-height:1.04;letter-spacing:-1px;
  margin:0 0 22px;
}
.fg-hero h1 span{
  background:linear-gradient(100deg,#1a1a1a 0%,#6b6258 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 公式条（复用架构页风格） */
.eqbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:26px;
}
.eqbar .t{
  font-size:.9375rem;font-weight:500;
  background:var(--bg-soft);border:1px solid var(--line-2);
  padding:8px 14px;border-radius:var(--r-pill);
}
.eqbar .t.m{background:#F1ECE5}
.eqbar .t.f{background:#ECEFEF}
.eqbar .op{font-family:var(--display);font-weight:600;color:var(--ink-soft)}

/* ============ Builder 选择区 ============ */
.fg-build{padding-block:clamp(40px,7vw,72px)}
.builder{display:grid;gap:clamp(24px,4vw,36px)}

.step{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(20px,4vw,30px);
  box-shadow:var(--sh-1);
}
.step-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.step-h h2{margin:0;font-size:clamp(1.25rem,3.6vw,1.5rem)}
.step-h .sn{
  flex:none;width:32px;height:32px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1rem;
  color:#fff;background:var(--ink);
}
.step-h .eng{
  margin-left:auto;font-size:.75rem;font-weight:500;letter-spacing:.3px;
  color:#5a4f3f;background:#EFEBE4;border:1px solid var(--line-2);
  padding:4px 11px;border-radius:var(--r-pill);
}
.step-h .eng.cool{color:#3f4650;background:#ECEFEF}
.step-lede{color:var(--ink-soft);font-size:.9375rem;margin:0 0 16px}

/* 资源输入 + 示例 chips */
.res-input{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:14px 16px;min-height:48px;
  transition:border-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.res-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.res-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rchip{
  font-family:var(--sans);font-size:.875rem;color:var(--ink-soft);
  background:var(--bg);border:1px solid var(--line-2);
  padding:8px 13px;min-height:38px;border-radius:var(--r-pill);cursor:pointer;
  transition:all var(--t-micro) var(--ease);
}
.rchip:hover{color:var(--ink);border-color:rgba(0,0,0,.2)}
.rchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 方法/形态选择网格 */
.pick-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.pick{
  text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;
  background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:13px 14px;min-height:44px;
  transition:border-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),transform var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.pick:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.pick .pc{font-family:var(--display);font-weight:700;font-size:.75rem;color:var(--ink-soft)}
.pick .pn{font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.3px}
.pick .pg{font-size:.8125rem;color:var(--ink-soft);line-height:1.4}
.pick.mp.on{background:#F1ECE5;border-color:#b9a888;box-shadow:0 0 0 1px #b9a888}
.pick.fp.on{background:#ECEFEF;border-color:#94a1ad;box-shadow:0 0 0 1px #94a1ad}
.pick.mp.on .pc,.pick.fp.on .pc{color:var(--ink)}

/* builder 操作 */
.build-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-ghost{
  font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:13px 24px;min-height:48px;cursor:pointer;
  transition:all var(--t-micro) var(--ease);
}
.btn-ghost:hover{border-color:rgba(0,0,0,.25);transform:translateY(-1px)}

/* ============ 结果区 ============ */
.result{margin-top:clamp(28px,5vw,44px)}
.result-empty{
  text-align:center;color:var(--ink-soft);
  background:var(--bg-quiet);border:1px dashed var(--line-2);
  border-radius:var(--r-lg);padding:36px 24px;margin:0;font-size:1rem;
}
.result-card{
  background:var(--grad-warm);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,4.5vw,40px);
  box-shadow:var(--sh-1);
}
.rc-kicker{
  display:inline-block;font-size:.75rem;font-weight:500;letter-spacing:.4px;
  color:var(--ink-soft);text-transform:uppercase;
  background:var(--bg);border:1px solid var(--line-2);
  padding:4px 10px;border-radius:var(--r-pill);margin-bottom:12px;
}
.rc-head h3{
  font-size:clamp(1.4rem,4.4vw,1.9rem);line-height:1.18;margin:0 0 12px;letter-spacing:-.5px;
}
.rc-combo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}
.rc-combo span{
  font-family:var(--display);font-weight:600;font-size:.8125rem;
  padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);
}
.rc-combo .m{background:#F1ECE5;color:#5a4f3f}
.rc-combo .f{background:#ECEFEF;color:#3f4650}
.rc-combo .r{background:var(--bg);color:var(--ink)}
.rc-combo .x{border:0;color:var(--ink-soft);padding:0 2px}
.rc-sentence{
  font-size:clamp(1.0625rem,2.4vw,1.25rem);line-height:1.6;
  color:var(--ink);margin:0 0 18px;max-width:var(--paragraph);
}
.rc-diff{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rc-diff .lvl{
  font-size:.8125rem;font-weight:600;padding:5px 13px;border-radius:var(--r-pill);
}
.rc-diff .lvl.easy{background:#EEF0EC;color:#3f4a3a}
.rc-diff .lvl.mid{background:#EFEBE4;color:#5a4f3f}
.rc-diff .lvl.hard{background:#EDEAEA;color:#4d4444}
.rc-diff .dd{font-size:.9375rem;color:var(--ink-soft)}

.rc-block{margin-top:24px;border-top:1px solid var(--line-2);padding-top:20px}
.rc-block h4{font-family:var(--sans);font-weight:600;font-size:1rem;margin:0 0 12px}
.rc-block h4 .muted{font-weight:400;font-size:.875rem}

.rc-caps{display:grid;gap:16px}
.capcol .caplabel{
  display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.3px;
  padding:3px 10px;border-radius:var(--r-pill);margin-bottom:8px;
}
.capcol .caplabel.m{background:#F1ECE5;color:#5a4f3f}
.capcol .caplabel.f{background:#ECEFEF;color:#3f4650}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-size:.8125rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);
  padding:5px 11px;border-radius:var(--r-pill);
}
.tag.tm{background:#F7F2EB}
.tag.tf{background:#F0F2F3}

.rc-refs{display:flex;flex-direction:column;gap:8px}
.rc-refs a{
  font-size:.9375rem;color:var(--ink);
  display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;width:fit-content;
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.rc-refs a:hover{color:#000;border-color:var(--ink)}

/* prompt 框 */
.prompt-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.prompt-h h4{margin:0}
.mini-btn{
  font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:8px 16px;min-height:40px;cursor:pointer;
  transition:all var(--t-micro) var(--ease);white-space:nowrap;
}
.mini-btn:hover{border-color:rgba(0,0,0,.25)}
.mini-btn:disabled{opacity:.75;cursor:default}
.mini-btn.ghost{color:var(--ink-soft)}
.prompt-box{
  width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans SC",monospace;
  font-size:.875rem;line-height:1.65;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:16px;resize:vertical;
}
.prompt-box:focus{outline:none;border-color:var(--ink)}
.prompt-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:14px;
}
.prompt-foot .muted{font-size:.875rem}
.prompt-foot a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.prompt-foot a:hover{border-color:var(--ink)}

/* ============ 收藏清单 ============ */
.fav-wrap{
  margin-top:clamp(32px,6vw,52px);
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,4vw,32px);
}
.fav-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.fav-head h2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;font-size:clamp(1.25rem,3.6vw,1.5rem)}
.fav-count-pill{
  font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--ink-soft);
  background:var(--bg);border:1px solid var(--line-2);padding:4px 12px;border-radius:var(--r-pill);
}
.fav-count-pill b{color:var(--ink)}
.fav-actions{display:flex;gap:8px}
.fav-note{font-size:.875rem;margin:10px 0 18px}
.fav-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fav-list li{
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:16px 18px;
}
.fav-list b{font-family:var(--display);font-weight:600;font-size:1.0625rem}
.fav-list p{margin:6px 0 8px;font-size:.9375rem;color:var(--ink-soft);line-height:1.55}
.fav-tags{font-size:.75rem;color:var(--ink-soft);font-family:var(--display);font-weight:600}
.fav-del{
  flex:none;width:36px;height:36px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--line-2);color:var(--ink-soft);
  font-size:.9rem;transition:all var(--t-micro) var(--ease);
}
.fav-del:hover{background:#EDEAEA;color:var(--ink)}

/* ============ 用法说明 ============ */
.fg-how{background:var(--bg-quiet)}
.how-grid{display:grid;gap:16px;grid-template-columns:1fr;margin:0 0 28px}
.howcard{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,3.5vw,28px);
}
.howcard .hi{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--ink-soft)}
.howcard h3{margin:10px 0 8px}
.howcard p{margin:0;color:var(--ink-soft);font-size:.9375rem;line-height:1.6}
.how-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ============ 响应式 ============ */
@media (min-width:760px){
  .rc-caps{grid-template-columns:1fr 1fr;gap:24px}
  .how-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:480px){
  .pick-grid{grid-template-columns:1fr 1fr}
  .build-actions .btn,.build-actions .btn-ghost{flex:1 1 auto;text-align:center}
}