/* ======================================================================
   Docker Compose 生成器 · 独立设计（集装箱堆场主题）
   浅色 = 海雾白 + 集装箱蓝；深色 = 夜航蓝 + 亮青
   ====================================================================== */
.dc{
  --ink:#132836; --sub:#54718a; --faint:#8fa9bd;
  --bg:#f1f6f9; --card:#ffffff; --card2:#e7f0f5; --line:#d3e1ea; --line2:#e0ebf2;
  --pri:#1273b5; --pri-2:#38a1db; --pri-soft:#ddecf7; --pri-ink:#0b5788;
  --orange:#c2570b; --orange-soft:#fbead8;
  --green:#146c43; --green-soft:#e0f2ea;
  --red:#b3261e; --red-soft:#fbe6e4;
  --r:14px;
  --shadow:0 1px 2px rgba(19,40,54,.05),0 10px 28px rgba(19,40,54,.08);
  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 54px,rgba(18,115,181,.035) 54px 56px),
    radial-gradient(820px 400px at 90% -140px, rgba(18,115,181,.09), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .dc{
  --ink:#dceaf3; --sub:#93b0c4; --faint:#5f7d93;
  --bg:#0a1620; --card:#12222f; --card2:#172b3a; --line:#254156; --line2:#1e3648;
  --pri:#38bdf8; --pri-2:#7dd3fc; --pri-soft:rgba(56,189,248,.13); --pri-ink:#bae6fd;
  --orange:#fb923c; --orange-soft:rgba(251,146,60,.12);
  --green:#34d399; --green-soft:rgba(52,211,153,.12);
  --red:#f87171; --red-soft:rgba(248,113,113,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
}
.dc *{box-sizing:border-box;}
.dc-wrap{max-width:1180px;margin:0 auto;}
.dc pre,.dc input,.dc code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;}
.dc-hero{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);padding:24px 28px;}
.dc-hero h1{margin:0 0 6px;font-size:clamp(23px,3.4vw,30px);font-weight:900;}
.dc-hero p{margin:0;color:var(--sub);font-size:14.5px;max-width:850px;}
.dc-hero p em{font-style:normal;color:var(--pri-ink);font-weight:700;}
.dc-desk{display:grid;grid-template-columns:470px 1fr;gap:18px;margin-top:20px;}
@media (max-width:1000px){.dc-desk{grid-template-columns:1fr;}}
.dc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.dc-card h2{margin:0 0 12px;font-size:16px;font-weight:800;}
.dc-proj{display:flex;gap:8px;align-items:center;margin-bottom:12px;}
.dc-proj label{font-size:12.5px;font-weight:700;color:var(--sub);white-space:nowrap;}
.dc-in{flex:1;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:13px;outline:none;}
.dc-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
/* 集装箱卡片 */
.dc-box{position:relative;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--card2);
  background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(19,40,54,.05) 14px 16px);transition:all .15s;}
:root[data-theme="dark"] .dc-box{background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.04) 14px 16px);}
.dc-box.on{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft);}
.dc-boxhead{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;}
.dc-boxhead b{font-size:14px;}
.dc-boxhead span.dc-tag{margin-left:auto;font-size:11.5px;color:var(--faint);font-family:ui-monospace,monospace;}
.dc-boxhead .dc-led{width:10px;height:10px;border-radius:50%;background:var(--faint);}
.dc-box.on .dc-led{background:var(--pri);}
.dc-cfg{display:none;padding:4px 12px 12px;border-top:1px dashed var(--line);}
.dc-box.on .dc-cfg{display:block;}
.dc-cfg .dc-f{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:12.5px;}
.dc-cfg .dc-f label{width:96px;color:var(--sub);font-weight:700;flex:none;}
.dc-cfg .dc-f input{flex:1;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:12.5px;outline:none;}
.dc-cfg .dc-f input[type=checkbox]{flex:none;width:16px;height:16px;}
.dc-btn{border:none;border-radius:10px;padding:9px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:all .15s;}
.dc-btn-go{background:var(--pri);color:#fff;}
:root[data-theme="dark"] .dc-btn-go{color:#0a1620;}
.dc-btn-go:hover{background:var(--pri-2);}
.dc-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.dc-btn-ghost:hover{border-color:var(--pri-2);}
.dc-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.dc-msg{font-size:13px;font-weight:700;border-radius:8px;padding:8px 12px;margin-top:10px;}
.dc-msg.err{color:var(--red);background:var(--red-soft);}
.dc-msg.ok{color:var(--green);background:var(--green-soft);}
.dc-msg:empty{display:none;}
.dc-out{background:#0b1c28;color:#bfe3f7;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.8;overflow:auto;max-height:520px;white-space:pre;margin:0;}
:root[data-theme="dark"] .dc-out{background:#051019;}
.dc-net{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card2);font-size:12.5px;color:var(--sub);}
.dc-net b{color:var(--pri-ink);}
.dc-net code{color:var(--pri-ink);}
.dc-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.dc-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.dc-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.dc-faq p{margin:0;color:var(--sub);font-size:14px;}
.dc-faq p b{color:var(--ink);}

/* ======================================================================
   编排模板 / 服务拓扑 / YAML 逐行解释 / 多格式导出（新增强区块）
   ====================================================================== */
.dc2-lab{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);padding:18px;min-width:0;}
.dc2-head{margin-bottom:14px;}
.dc2-head h2{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--ink);}
.dc2-head p{margin:0;color:var(--sub);font-size:13.5px;}
.dc2-head p em{font-style:normal;color:var(--pri-ink);font-weight:700;}
.dc2-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;min-width:0;}
.dc2-grid:last-child{margin-bottom:0;}
@media (max-width:900px){.dc2-grid{grid-template-columns:1fr;}}
.dc2-panel{background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:14px;min-width:0;}
.dc2-panel h3{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--ink);}
.dc2-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
@media (max-width:520px){.dc2-presets{grid-template-columns:1fr;}}
.dc2-preset{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer;font-family:inherit;font-size:12.5px;line-height:1.45;font-weight:700;transition:all .15s;min-width:0;}
.dc2-preset small{display:block;font-weight:500;color:var(--sub);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dc2-preset:hover{border-color:var(--pri-2);}
.dc2-preset.on{background:var(--pri-soft);border-color:var(--pri);}
.dc2-msg{margin-top:8px;font-size:12.5px;font-weight:600;min-height:18px;color:var(--sub);}
.dc2-msg.ok{color:var(--green);}
.dc2-msg.err{color:var(--red);}
.dc2-msg.info{color:var(--orange);}
.dc2-msg:empty{display:none;}
.dc2-svgwrap{width:100%;overflow-x:auto;background:var(--card);border:1px solid var(--line2);border-radius:10px;}
.dc2-svgwrap svg{display:block;width:100%;height:auto;min-width:420px;}
#dc2Svg .dc2-node{fill:var(--card);stroke:var(--line);stroke-width:1.5;}
#dc2Svg .dc2-node.web{fill:var(--pri-soft);stroke:var(--pri);}
#dc2Svg .dc2-node.gateway{fill:var(--orange-soft);stroke:var(--orange);}
#dc2Svg .dc2-node.data{fill:var(--green-soft);stroke:var(--green);}
#dc2Svg .dc2-edge{stroke:var(--faint);stroke-width:1.5;stroke-dasharray:5 4;fill:none;}
#dc2Svg .dc2-nl{fill:var(--ink);font-size:11.5px;font-weight:800;text-anchor:middle;}
#dc2Svg .dc2-ns{fill:var(--sub);font-size:9.5px;text-anchor:middle;}
#dc2Svg .dc2-cap{fill:var(--sub);font-size:11px;}
#dc2Svg .dc2-hint{fill:var(--faint);font-size:12px;text-anchor:middle;}
#dc2Svg .dc2-zl{fill:var(--faint);font-size:9.5px;text-anchor:middle;}
.dc2-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:11.5px;color:var(--sub);}
.dc2-legend span{display:inline-flex;align-items:center;gap:5px;}
.dc2-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;background:var(--pri);}
.dc2-legend i.g{background:var(--orange);}
.dc2-legend i.d{background:var(--green);}
.dc2-code{background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:6px 0;max-height:340px;overflow:auto;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:12px;}
.dc2-ln{display:flex;gap:8px;padding:2px 10px;cursor:pointer;white-space:pre;line-height:1.7;min-width:0;}
.dc2-ln:hover{background:var(--card2);}
.dc2-ln.on{background:var(--pri-soft);}
.dc2-ln .no{color:var(--faint);width:24px;flex:none;text-align:right;user-select:none;}
.dc2-ln .txt{color:var(--ink);white-space:pre-wrap;word-break:break-all;min-width:0;}
.dc2-k{color:var(--pri-ink);font-weight:700;}
.dc2-s{color:var(--green);}
.dc2-c{color:var(--faint);font-style:italic;}
.dc2-empty{color:var(--faint);text-align:center;padding:26px;font-family:inherit;}
.dc2-lineinfo{margin-top:10px;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--sub);line-height:1.7;min-height:64px;word-break:break-all;}
.dc2-lineinfo b{color:var(--pri-ink);}
.dc2-lineinfo code{display:block;margin-top:6px;white-space:pre-wrap;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--ink);}
.dc2-fmt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.dc2-fmt-btn{border:1px solid var(--line);background:var(--card);color:var(--sub);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;}
.dc2-fmt-btn:hover{border-color:var(--pri-2);}
.dc2-fmt-btn.on{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .dc2-fmt-btn.on{color:#0a1620;}
.dc2-out{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.8;white-space:pre;overflow:auto;max-height:300px;margin:0;color:var(--ink);font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
.dc2-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.dc2-btn{border:1px solid var(--line);background:var(--card);color:var(--pri-ink);border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;}
.dc2-btn:hover{border-color:var(--pri-2);}
.dc2-btn-go{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .dc2-btn-go{color:#0a1620;}
.dc2-tip{font-size:11.5px;color:var(--sub);line-height:1.6;margin-top:8px;}