/* ======================================================================
   手工皂 SAP 值计算器 · 独立设计（牛皮纸手作标签主题）
   浅色 = 牛皮纸卡 + 焦糖麻绳；深色 = 深夜工坊
   ====================================================================== */
.sp{
  --ink:#3d2e1c; --sub:#7c6750; --faint:#a8927a;
  --bg:#f5efe3; --card:#fffdf6; --card2:#f1e8d6; --line:#ddceb2; --line2:#e9dfc9;
  --pri:#96683a; --pri-2:#c08a4e; --pri-soft:#f2e4cf; --pri-ink:#6d4a24;
  --sage:#5c7a46; --sage-soft:#eaf0df;
  --clay:#b4553a; --clay-soft:#f8e5dc;
  --red:#b4232a; --red-soft:#fbe9e7;
  --r:12px;
  --shadow:0 1px 2px rgba(61,46,28,.06),0 10px 26px rgba(150,104,58,.12);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  background:
    radial-gradient(760px 340px at 90% -120px, rgba(192,138,78,.14), transparent 60%),
    radial-gradient(560px 300px at -6% 130px, rgba(92,122,70,.08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(150,104,58,.028) 0 2px, transparent 2px 12px),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .sp{
  --ink:#ece2d0; --sub:#b3a28a; --faint:#7d6c55;
  --bg:#171208; --card:#221a0e; --card2:#2b2113; --line:#3d3018; --line2:#332812;
  --pri:#d9a566; --pri-2:#eab879; --pri-soft:rgba(217,165,102,.13); --pri-ink:#f2d3a5;
  --sage:#a3c584; --sage-soft:rgba(163,197,132,.12);
  --clay:#e08a6a; --clay-soft:rgba(224,138,106,.12);
  --red:#f87171; --red-soft:rgba(248,113,113,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.45);
}
.sp *{box-sizing:border-box;}
.sp b{font-weight:700;}
.sp-wrap{max-width:1100px;margin:0 auto;}
.sp input,.sp select,.sp textarea{font-family:ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;}

/* ---------- 首屏：牛皮纸吊牌 ---------- */
.sp-hero{
  margin-top:24px;position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:24px 26px 22px 34px;
}
.sp-hero:before{content:"";position:absolute;left:14px;top:18px;bottom:18px;width:0;border-left:2px dashed var(--faint);border-radius:2px;}
.sp-hole{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--faint);}
.sp-hero h1{margin:0 0 6px;font-size:clamp(23px,3.4vw,31px);font-weight:900;letter-spacing:.02em;}
.sp-hero p{margin:0;color:var(--sub);font-size:14.5px;max-width:760px;}
.sp-hero p em{font-style:normal;color:var(--pri-ink);font-weight:800;border-bottom:2px solid var(--pri-2);}
.sp-stamp{position:absolute;right:22px;top:16px;transform:rotate(9deg);border:2.5px solid var(--clay);color:var(--clay);border-radius:10px;padding:4px 12px;font-size:12.5px;font-weight:900;letter-spacing:.14em;opacity:.85;}
.sp-stamp small{display:block;font-size:10px;letter-spacing:.05em;font-weight:700;}
@media (max-width:640px){.sp-stamp{display:none;}}

/* ---------- 工作台 ---------- */
.sp-desk{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:20px;}
@media (max-width:920px){.sp-desk{grid-template-columns:1fr;}}
.sp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.sp-card h2{margin:0 0 4px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.sp-num{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:6px;background:var(--pri);color:#fff;font-size:12px;font-weight:800;}
:root[data-theme="dark"] .sp-num{color:#241705;}
.sp-tip{font-size:12.5px;color:var(--sub);margin:0 0 12px;}

.sp-oilrow{display:grid;grid-template-columns:1fr 110px 34px;gap:8px;margin-bottom:8px;align-items:center;}
.sp-sel,.sp-in{background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 10px;font-size:13.5px;outline:none;width:100%;}
.sp-sel:focus,.sp-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.sp-del{border:1px solid var(--line);background:var(--card2);color:var(--red);border-radius:8px;height:34px;font-size:15px;font-weight:800;cursor:pointer;}
.sp-del:hover{background:var(--red-soft);border-color:var(--red);}
.sp-param{display:flex;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap;}
.sp-param label{font-size:13.5px;color:var(--sub);min-width:118px;font-family:inherit;}
.sp-param .sp-in{width:92px;}
.sp-unit{font-size:12.5px;color:var(--faint);}
.sp-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card2);}
.sp-toggle button{border:none;background:transparent;color:var(--sub);padding:6px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;}
.sp-toggle button.on{background:var(--pri);color:#fff;}
:root[data-theme="dark"] .sp-toggle button.on{color:#241705;}
.sp-btn{border:none;border-radius:9px;padding:9px 18px;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .15s;font-family:inherit;}
.sp-btn-go{background:var(--pri);color:#fff;}
:root[data-theme="dark"] .sp-btn-go{color:#241705;}
.sp-btn-go:hover{background:var(--pri-2);}
.sp-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.sp-btn-ghost:hover{border-color:var(--pri-2);}
.sp-btn-add{background:var(--sage-soft);color:var(--sage);border:1px dashed var(--sage);width:100%;margin-top:2px;}
.sp-btn-add:hover{background:var(--sage);color:#fff;}
.sp-rowbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.sp-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.sp-msg.err{color:var(--red);}
.sp-msg.ok{color:var(--sage);}

/* ---------- 结果 ---------- */
.sp-result{background:var(--pri-soft);border:1px dashed var(--pri);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;}
.sp-result .big{font-size:34px;font-weight:900;color:var(--pri-ink);font-family:ui-monospace,Consolas,monospace;line-height:1.15;}
.sp-result .big small{font-size:15px;font-weight:800;}
.sp-result .cap{font-size:12.5px;color:var(--sub);font-family:inherit;}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.sp-cell{background:var(--card2);border:1px solid var(--line2);border-radius:9px;padding:8px 12px;}
.sp-cell .cap{font-size:11.5px;color:var(--sub);}
.sp-cell .val{font-size:17px;font-weight:800;font-family:ui-monospace,Consolas,monospace;color:var(--ink);}
.sp-cell .val.warnv{color:var(--clay);}
.sp-note{font-size:12.5px;color:var(--sub);background:var(--sage-soft);border-radius:9px;padding:9px 12px;margin-top:10px;}
.sp-note b{color:var(--sage);}

/* ---------- 明细与对照表 ---------- */
.sp-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px;}
.sp-table th,.sp-table td{border:1px solid var(--line);padding:6px 10px;text-align:center;}
.sp-table th{background:var(--card2);font-weight:700;}
.sp-table td.l{text-align:left;}
.sp-table td.mono{font-family:ui-monospace,Consolas,monospace;color:var(--pri-ink);font-weight:700;}
.sp-detail{margin-top:18px;}
.sp-ref{margin-top:18px;}
.sp-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px;}
.sp-ref-item{background:var(--card2);border:1px solid var(--line2);border-radius:9px;padding:7px 11px;font-size:13px;display:flex;justify-content:space-between;gap:6px;}
.sp-ref-item b{font-family:ui-monospace,Consolas,monospace;color:var(--pri-ink);}

/* ---------- FAQ ---------- */
.sp-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.sp-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.sp-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.sp-faq p{margin:0;color:var(--sub);font-size:14px;}
.sp-faq p b{color:var(--ink);}