/* ======================================================================
   CSP 安全策略生成器 · 独立设计（工程蓝图网格主题）
   ====================================================================== */
.cs{
  --ink:#12212e; --sub:#54708a; --faint:#8aa4bc;
  --bg:#eef4fa; --card:#f8fbfe; --card2:#e4eef7; --line:#b9cfe2; --line2:#cfdff0;
  --pri:#0b5fa5; --pri-2:#1a86d4; --pri-soft:#dcedfa; --pri-ink:#0a4d85;
  --grid:rgba(11,95,165,.10);
  --red:#c22525; --red-soft:#fbe9e9; --amber:#b45309; --amber-soft:#fdf2df; --ok:#0e7a4d; --ok-soft:#e3f5ec;
  --r:6px;
  --shadow:0 1px 0 rgba(18,33,46,.06),0 10px 24px rgba(11,95,165,.10);
  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:
    repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .cs{
  --ink:#dcebf8; --sub:#8fb0cc; --faint:#5d7d99;
  --bg:#0a1622; --card:#10202f; --card2:#15293c; --line:#274058; --line2:#1d3349;
  --pri:#4db2ff; --pri-2:#7cc7ff; --pri-soft:rgba(77,178,255,.12); --pri-ink:#a5dcff;
  --grid:rgba(77,178,255,.08);
  --red:#ff8080; --red-soft:rgba(255,128,128,.12); --amber:#ffc266; --amber-soft:rgba(255,194,102,.12); --ok:#57d9a3; --ok-soft:rgba(87,217,163,.12);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.5);
}
.cs *{box-sizing:border-box;}
.cs-wrap{max-width:1160px;margin:0 auto;}
.cs code,.cs pre,input,textarea{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

.cs-hero{margin-top:22px;border:1.5px solid var(--pri);border-radius:var(--r);background:var(--card);
  box-shadow:var(--shadow);padding:22px 26px;position:relative;}
.cs-hero::before{content:"BLUEPRINT / SECURITY";position:absolute;top:-11px;left:18px;background:var(--pri);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;padding:2px 10px;border-radius:3px;}
:root[data-theme="dark"] .cs-hero::before{color:#06121d;}
.cs-hero h1{margin:0 0 8px;font-size:clamp(23px,3.4vw,31px);font-weight:900;}
.cs-hero p{margin:0;color:var(--sub);font-size:14.5px;max-width:800px;}
.cs-hero p b{color:var(--pri-ink);}

.cs-desk{display:grid;grid-template-columns:1.25fr .85fr;gap:18px;margin-top:20px;}
@media (max-width:940px){.cs-desk{grid-template-columns:1fr;}}
.cs-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;}
.cs-card h2{margin:0 0 4px;font-size:15px;font-weight:900;letter-spacing:.04em;display:flex;align-items:center;gap:8px;}
.cs-card h2::before{content:"";width:10px;height:10px;border:2px solid var(--pri);background:var(--pri-soft);}
.cs-tip{font-size:12.5px;color:var(--sub);margin:0 0 10px;}

.cs-dir{border:1px dashed var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:10px;background:var(--card);}
.cs-dir h3{margin:0 0 6px;font-size:13.5px;font-weight:800;color:var(--pri-ink);font-family:ui-monospace,Consolas,monospace;}
.cs-chips{display:flex;gap:6px;flex-wrap:wrap;}
.cs-chip{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:4px;
  padding:3px 10px;font-size:12px;cursor:pointer;font-weight:700;font-family:ui-monospace,Consolas,monospace;transition:all .12s;}
.cs-chip:hover{border-color:var(--pri-2);color:var(--pri-ink);}
.cs-chip.on{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .cs-chip.on{color:#06121d;}
.cs-chip.danger.on{background:var(--red);border-color:var(--red);}
.cs-custom{width:100%;margin-top:8px;padding:6px 10px;border:1px solid var(--line);border-radius:4px;
  background:var(--card2);color:var(--ink);font-size:12.5px;outline:none;}
.cs-custom:focus{border-color:var(--pri-2);box-shadow:0 0 0 2px var(--pri-soft);}

.cs-opt{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.cs-lab{font-size:13px;font-weight:700;color:var(--sub);display:flex;gap:6px;align-items:center;cursor:pointer;}
.cs-lab input{accent-color:var(--pri);}
.cs-in{padding:7px 10px;border:1px solid var(--line);border-radius:4px;background:var(--card2);color:var(--ink);font-size:13px;outline:none;width:150px;}
.cs-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 2px var(--pri-soft);}

.cs-btn{border:1.5px solid var(--pri);border-radius:4px;padding:8px 18px;font-size:13.5px;font-weight:800;cursor:pointer;background:var(--pri);color:#fff;transition:all .12s;}
:root[data-theme="dark"] .cs-btn{color:#06121d;}
.cs-btn:hover{background:var(--pri-2);border-color:var(--pri-2);}
.cs-btn-ghost{background:var(--card);color:var(--pri-ink);}
.cs-btn-ghost:hover{background:var(--pri-soft);}
.cs-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.cs-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:700;}
.cs-msg.err{color:var(--red);}
.cs-msg.ok{color:var(--ok);}

.cs-out{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  font-size:12.5px;line-height:1.9;white-space:pre-wrap;word-break:break-all;color:var(--pri-ink);min-height:120px;}
:root[data-theme="dark"] .cs-out{background:#0b1826;}

.cs-risk{margin-top:14px;}
.cs-risk div{font-size:13px;border-radius:4px;padding:8px 12px;margin-bottom:8px;border:1px solid;}
.cs-risk .hi{background:var(--red-soft);border-color:var(--red);color:var(--red);font-weight:700;}
.cs-risk .md{background:var(--amber-soft);border-color:var(--amber);color:var(--amber);}
.cs-risk .lo{background:var(--pri-soft);border-color:var(--line);color:var(--sub);}
.cs-risk .gd{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);font-weight:700;}

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

/* ===== 新增：模板预设 / 多格式导出 / 指令覆盖图（前缀 csx） ===== */
.csx-lab{margin-top:20px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--shadow);}
.csx-lab h2{margin:0 0 8px;font-size:17px;font-weight:900;}
.csx-lab p{margin:0 0 10px;color:var(--sub);font-size:13.5px;}
.csx-lab p b{color:var(--ink);}
.csx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.csx-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;}
.csx-chip{border:1.5px solid var(--line);background:var(--card2);color:var(--pri-ink);border-radius:5px;
  padding:9px 12px;font-size:13px;font-weight:800;cursor:pointer;text-align:left;transition:all .12s;}
.csx-chip:hover{border-color:var(--pri);background:var(--pri-soft);}
.csx-sel{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:5px;
  padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.csx-out{margin:10px 0 0;max-height:260px;overflow:auto;background:var(--card2);border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  color:var(--ink);}
.csx-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.csx-msg{margin-top:8px;font-size:13px;min-height:20px;font-weight:700;}
.csx-msg.err{color:var(--red);}
.csx-msg.ok{color:var(--ok);}
.csx-svgwrap{width:100%;overflow-x:auto;background:var(--card2);border:1px solid var(--line2);border-radius:6px;padding:6px;}
.csx-svgwrap svg{display:block;width:100%;height:auto;}
.csx-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--sub);}
.csx-legend span{display:inline-flex;align-items:center;gap:6px;}
.csx-dot{width:11px;height:11px;border-radius:3px;display:inline-block;}
.csx-dot.ok{background:var(--pri);}
.csx-dot.none{border:1.5px dashed var(--line);background:transparent;}
.csx-dot.warn{background:var(--amber);}
@media (max-width:640px){.csx-lab{padding:14px 12px;}.csx-presets{grid-template-columns:1fr 1fr;}}