/* ======================================================================
   色阶映射生成器 · 独立设计（石墨工作台 + 橙色十档色带）
   浅色 = 石墨浅灰；深色 = 炭黑工坊
   ====================================================================== */
.csm{
  --ink:#1f2428; --sub:#5d6870; --faint:#98a3ab;
  --bg:#f2f4f6; --card:#ffffff; --card2:#eaeef1; --line:#dbe2e7; --line2:#e7ecf0;
  --pri:#ea580c; --pri-2:#f97316; --pri-soft:#feeadd; --pri-ink:#9a3412;
  --graphite:#334155; --graphite-soft:#e6ebf2;
  --ok:#156734; --ok-soft:#e0f2e6; --red:#b42323; --red-soft:#fbe9e9; --amber:#b45309;
  --r:14px;
  --shadow:0 1px 2px rgba(31,36,40,.05),0 10px 28px rgba(31,36,40,.07);
  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(880px 400px at 90% -120px, rgba(234,88,12,.08), transparent 60%),
    radial-gradient(660px 340px at -8% 130px, rgba(51,65,85,.07), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .csm{
  --ink:#e6ebf0; --sub:#9aa8b3; --faint:#66737d;
  --bg:#121619; --card:#1a2025; --card2:#222a31; --line:#313c45; --line2:#28323a;
  --pri:#fb923c; --pri-2:#fdba74; --pri-soft:rgba(251,146,60,.13); --pri-ink:#fed7aa;
  --graphite:#94a3b8; --graphite-soft:rgba(148,163,184,.12);
  --ok:#4ade80; --ok-soft:rgba(74,222,128,.12); --red:#f87171; --red-soft:rgba(248,113,113,.12); --amber:#fbbf24;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
}
.csm *{box-sizing:border-box;}
.csm b{font-weight:700;}
.csm-wrap{max-width:1120px;margin:0 auto;}
.csm code,.csm input,.csm pre{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;}

/* ---------- Hero：十档色带 ---------- */
.csm-hero{margin-top:22px;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--card);}
.csm-band{display:flex;height:56px;}
.csm-band div{flex:1;position:relative;transition:flex .2s;}
.csm-band div:hover{flex:1.6;}
.csm-band div span{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:10.5px;font-weight:800;font-family:"JetBrains Mono",monospace;opacity:.85;}
.csm-hero-b{padding:20px 26px 22px;}
.csm-hero h1{margin:0 0 6px;font-size:clamp(22px,3.2vw,30px);font-weight:900;}
.csm-hero h1 span{color:var(--pri);}
.csm-hero p{margin:0;color:var(--sub);font-size:14.5px;max-width:780px;}
.csm-hero p em{font-style:normal;color:var(--pri-ink);font-weight:700;}

/* ---------- 卡片 ---------- */
.csm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-top:18px;}
.csm-card h2{margin:0 0 4px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.csm-card h2 .csm-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--pri);color:#fff;font-size:12px;font-weight:800;}
:root[data-theme="dark"] .csm-card h2 .csm-num{color:#1a2025;}
.csm-tip{font-size:12.5px;color:var(--sub);margin:0 0 12px;}
.csm-desk{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
@media (max-width:920px){.csm-desk{grid-template-columns:1fr;}}
.csm-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;}
.csm-btn{border:none;border-radius:10px;padding:9px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:all .15s;}
.csm-btn-go{background:var(--pri);color:#fff;}
:root[data-theme="dark"] .csm-btn-go{color:#1a2025;}
.csm-btn-go:hover{background:var(--pri-2);}
.csm-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.csm-btn-ghost:hover{border-color:var(--pri-2);}
.csm-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.csm-msg.err{color:var(--red);}
.csm-msg.ok{color:var(--ok);}
.csm-hexrow{display:flex;gap:10px;align-items:center;}
.csm-hex{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:14px;outline:none;}
.csm-hex:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.csm-pick{width:46px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--card2);cursor:pointer;padding:3px;}
.csm-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.csm-qc{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.14);cursor:pointer;}

/* ---------- 色阶卡 ---------- */
.csm-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
@media (max-width:760px){.csm-steps{grid-template-columns:repeat(2,1fr);}}
.csm-step{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card2);}
.csm-step .csm-chipc{height:56px;display:flex;flex-direction:column;justify-content:space-between;padding:6px 9px;cursor:pointer;}
.csm-step .csm-chipc b{font-size:12px;}
.csm-step .csm-chipc i{font-style:normal;font-size:11px;font-family:"JetBrains Mono",monospace;}
.csm-step .csm-badges{padding:6px 8px;display:flex;gap:5px;flex-wrap:wrap;font-size:10.5px;font-weight:800;}
.csm-bg{border-radius:5px;padding:1px 6px;}
.csm-bg.pass{background:var(--ok-soft);color:var(--ok);}
.csm-bg.fail{background:var(--red-soft);color:var(--red);}
.csm-bg.mid{background:var(--pri-soft);color:var(--amber);}

/* ---------- 映射表 ---------- */
.csm-map{width:100%;border-collapse:collapse;font-size:13px;}
.csm-map th,.csm-map td{border:1px solid var(--line);padding:6px 10px;text-align:left;}
.csm-map th{background:var(--card2);font-weight:800;}
.csm-map i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid rgba(0,0,0,.15);}
.csm-map td code{background:var(--card2);border:1px solid var(--line2);border-radius:5px;padding:0 6px;font-size:12px;}

/* ---------- 输出 ---------- */
.csm-out{width:100%;min-height:210px;border-radius:10px;border:1px solid var(--line);background:#141a1f;color:#e2e8f0;padding:12px 14px;font-size:12.5px;line-height:1.7;white-space:pre;overflow:auto;margin-top:8px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
:root[data-theme="dark"] .csm-out{background:#0b0f12;border-color:var(--line);}

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

/* ===== 品牌色预设与色阶对照板（新增） ===== */
.cs2{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.cs2 h2{margin:0 0 4px;font-size:16px;font-weight:800;}
.cs2-tip{margin:0 0 12px;font-size:12.5px;color:var(--sub);}
.cs2-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
@media (max-width:820px){.cs2-presets{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:480px){.cs2-presets{grid-template-columns:1fr;}}
.cs2-preset{text-align:left;border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:10px;padding:7px 10px;cursor:pointer;font-size:12.5px;font-weight:700;transition:all .15s;}
.cs2-preset:hover{border-color:var(--pri-2);}
.cs2-preset.on{border-color:var(--pri);background:var(--pri-soft);}
.cs2-preset small{display:flex;gap:3px;margin-top:4px;}
.cs2-preset small i{width:16px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.15);display:inline-block;}
.cs2-viz{margin-top:12px;}
.cs2-viz svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px;background:var(--card2);}
.cs2-scroll{margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;}
.cs2-audit{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.cs2-audit th,.cs2-audit td{border:1px solid var(--line);padding:6px 10px;text-align:left;white-space:nowrap;}
.cs2-audit th{background:var(--card2);font-weight:800;}
.cs2-audit code{background:var(--card2);border:1px solid var(--line2);border-radius:5px;padding:0 6px;font-size:12px;}
.cs2-audit i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid rgba(0,0,0,.15);}
.cs2-bg{border-radius:5px;padding:1px 7px;font-weight:800;font-size:11.5px;display:inline-block;}
.cs2-bg.pass{background:var(--ok-soft);color:var(--ok);}
.cs2-bg.mid{background:var(--pri-soft);color:var(--amber);}
.cs2-bg.fail{background:var(--red-soft);color:var(--red);}
.cs2-empty{text-align:center;color:var(--faint);font-weight:400;}
.cs2-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.cs2-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.cs2-msg.err{color:var(--red);}
.cs2-msg.ok{color:var(--ok);}