/* 载体构建模拟器 — tpl_zaitigoujianmoni.css
   DNA Lab Space 免费工具页样式。CSS 变量 + body.light 覆盖。 */
:root{
  --vcbg:#0a111a;
  --vccard:#111c28;
  --vccard2:#0e1720;
  --vcline:rgba(37,99,235,.16);
  --vctext:#d9e6ee;
  --vcmut:#7f98a6;
  --vcacc:#2563eb;
  --vcacc2:#3D9BFF;
  --vcdna-a:#4CD964;   /* A 绿 */
  --vcdna-t:#FF5C5C;   /* T 红 */
  --vcdna-c:#3D9BFF;   /* C 蓝 */
  --vcdna-g:#FFA24D;   /* G 橙 */
  --vcdanger:#FF8A8A;
  --vcaccbg:rgba(37,99,235,.10);
  --vcradius:14px;
  --vcshadow:0 10px 34px rgba(0,0,0,.38);
}
body.light{
  --vcbg:#f4f7fa;
  --vccard:#ffffff;
  --vccard2:#f0f4f7;
  --vcline:rgba(20,60,90,.14);
  --vctext:#1c2b38;
  --vcmut:#6b8294;
  --vcacc:#00a884;
  --vcacc2:#1f6fd6;
  --vcdna-a:#1f9d3c;
  --vcdna-t:#d63a3a;
  --vcdna-c:#1f6fd6;
  --vcdna-g:#d97a1e;
  --vcdanger:#c0392b;
  --vcaccbg:rgba(0,168,132,.12);
  --vcshadow:0 10px 30px rgba(15,40,70,.10);
}

/* ── Hero ── */
.vc-hero{position:relative;z-index:1;text-align:center;padding:56px 20px 24px}
.vc-hero-ico{font-size:56px;line-height:1;filter:drop-shadow(0 0 18px rgba(37,99,235,.45))}
.vc-hero-h1{margin:14px 0 8px;font-size:34px;font-weight:800;letter-spacing:.5px;color:var(--vctext);background:linear-gradient(90deg,var(--vcacc),var(--vcacc2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vc-hero-sub{font-size:16px;color:var(--vcmut);margin:0 0 6px}
.vc-hero-desc{max-width:720px;margin:8px auto 0;font-size:14px;line-height:1.8;color:var(--vcmut)}

/* ── 栅格布局 ── */
.vc-grid{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:8px 16px 40px;display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
@media(max-width:960px){.vc-grid{grid-template-columns:1fr}.vc-aside{order:2}}

/* ── 卡片 ── */
.vc-card{background:var(--vccard);border:1px solid var(--vcline);border-radius:var(--vcradius);box-shadow:var(--vcshadow);padding:20px;margin-bottom:20px}
.vc-card-h{margin:0 0 16px;font-size:17px;font-weight:700;color:var(--vctext);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vc-badge-free{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px;background:linear-gradient(90deg,var(--vcacc),#7AE8B0);color:#062a22;margin-left:8px}

/* ── 表单 ── */
.vc-row{margin-bottom:16px}
.vc-lbl{display:block;font-size:13px;font-weight:600;color:var(--vctext);margin-bottom:8px}
.vc-lbl .req{color:var(--vcdanger)}
.vc-count{color:var(--vcmut);font-weight:500;font-size:12px;margin-left:8px}
.vc-flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.vc-select{flex:1;min-width:220px;background:var(--vccard2);color:var(--vctext);border:1px solid var(--vcline);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;transition:border-color .15s}
.vc-select:focus,.vc-file:focus{border-color:var(--vcacc)}
.vc-select:disabled{opacity:.55}

.vc-switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--vcmut);cursor:pointer;user-select:none;white-space:nowrap}
.vc-switch input{display:none}
.vc-switch-slider{width:38px;height:20px;border-radius:20px;background:#2a3b49;position:relative;transition:background .2s;flex:none}
.vc-switch-slider:after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#cfe6f0;transition:left .2s}
.vc-switch input:checked+.vc-switch-slider{background:var(--vcacc)}
.vc-switch input:checked+.vc-switch-slider:after{left:20px;background:#062a22}
body.light .vc-switch-slider{background:#cfd9e2}
.vc-switch input:checked+.vc-switch-slider{background:#00a884}

.vc-custom-box{margin-top:10px}
.vc-custom-box textarea,.ins-seq,.vc-seq-out{width:100%;box-sizing:border-box;background:var(--vccard2);color:var(--vctext);border:1px solid var(--vcline);border-radius:10px;padding:10px 12px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;outline:none;resize:vertical;transition:border-color .15s}
.vc-custom-box textarea:focus,.ins-seq:focus{border-color:var(--vcacc)}

.vc-hint{font-size:12px;color:var(--vcmut);margin:6px 0 0}

/* ── 策略标签 ── */
.vc-tabs{display:flex;gap:8px;flex-wrap:wrap}
.vc-tab{background:var(--vccard2);color:var(--vcmut);border:1px solid var(--vcline);border-radius:10px;padding:9px 16px;font-size:14px;cursor:pointer;transition:all .15s}
.vc-tab:hover{color:var(--vctext);border-color:var(--vcacc)}
.vc-tab.is-active{background:linear-gradient(90deg,rgba(37,99,235,.18),rgba(61,155,255,.18));color:var(--vcacc);border-color:var(--vcacc);font-weight:600}
body.light .vc-tab.is-active{background:rgba(0,168,132,.10)}

/* ── 插入片段卡片 ── */
.ins-card{background:var(--vccard2);border:1px solid var(--vcline);border-radius:12px;padding:12px;margin-bottom:10px}
.ins-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ins-title{font-weight:700;font-size:13px;color:var(--vcacc)}
.ins-del{background:none;border:none;color:var(--vcmut);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:6px}
.ins-del:hover{color:var(--vcdanger);background:rgba(255,138,138,.12)}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ins-grid .ins-seq-fg{grid-column:1 / -1}
@media(max-width:560px){.ins-grid{grid-template-columns:1fr}}
.fg label{display:block;font-size:12px;color:var(--vcmut);margin-bottom:5px}
.fg input[type=text],.fg input[type=number]{width:100%;box-sizing:border-box;background:var(--vccard);color:var(--vctext);border:1px solid var(--vcline);border-radius:8px;padding:8px 10px;font-size:13px;outline:none;transition:border-color .15s}
.fg input:focus{border-color:var(--vcacc)}

/* ── 结果区编辑态（在线编辑 v2）── */
.vc-edit-card{border-color:var(--vcacc)}
.vc-edit-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.vc-edit-head .vc-card-h{margin:0}
.vc-edit-actions{display:flex;gap:8px;flex-wrap:wrap}
.vc-edit-tip{font-size:13px;font-weight:600;color:var(--vcacc);margin:0 0 10px;min-height:18px}
.ins-card-edit{border-color:var(--vcacc)}
.ins-len{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--vcacc);background:var(--vcaccbg);border:1px solid var(--vcline);border-radius:6px;padding:2px 8px}
.fg select{width:100%;box-sizing:border-box;background:var(--vccard);color:var(--vctext);border:1px solid var(--vcline);border-radius:8px;padding:8px 10px;font-size:13px;outline:none;cursor:pointer;transition:border-color .15s}
.fg select:focus{border-color:var(--vcacc)}

/* ── 按钮 ── */
.vc-btn{display:inline-flex;align-items:center;gap:6px;background:var(--vccard2);color:var(--vctext);border:1px solid var(--vcline);border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.vc-btn:hover{border-color:var(--vcacc);color:var(--vcacc);transform:translateY(-1px)}
.vc-btn-primary{background:linear-gradient(90deg,var(--vcacc),var(--vcacc2));color:#062a22;border:none;box-shadow:0 6px 20px rgba(37,99,235,.28)}
.vc-btn-primary:hover{color:#062a22;filter:brightness(1.08)}
.vc-btn-ghost{background:transparent}
.vc-btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.vc-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.vc-file{display:block;color:var(--vcmut);font-size:13px}

/* ── 错误与加载 ── */
.vc-err{color:var(--vcdanger);font-size:13px;margin-top:10px;min-height:18px}
.vc-loading{text-align:center;padding:40px 0;color:var(--vcmut);font-size:14px}
.spin{width:34px;height:34px;border:3px solid var(--vcline);border-top-color:var(--vcacc);border-radius:50%;margin:0 auto 12px;animation:vcspin .8s linear infinite}
@keyframes vcspin{to{transform:rotate(360deg)}}

/* ── 结果 ── */
.vc-result-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.vc-size{font-size:14px;font-weight:700;color:var(--vcacc)}
.vc-warnings{margin-bottom:12px}
.vc-warn-item{background:rgba(255,138,138,.10);border:1px solid rgba(255,138,138,.4);color:var(--vcdanger);border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.7}
.vc-map-wrap{background:var(--vccard2);border:1px solid var(--vcline);border-radius:12px;padding:10px;margin:8px 0 4px;text-align:center;overflow:auto}
.vc-map-wrap svg{max-width:600px;width:100%;height:auto}

/* SnapGene 风格 DNA 四色序列 */
.vc-seq-out{height:150px}
.vc-seq-out::-webkit-scrollbar{width:8px;height:8px}
.vc-seq-out::-webkit-scrollbar-thumb{background:rgba(37,99,235,.25);border-radius:4px}

.vc-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.info-box{background:var(--vccard2);border:1px solid var(--vcline);border-radius:10px;padding:10px 12px}
.info-lbl{font-size:11px;color:var(--vcmut);margin-bottom:4px}
.info-val{font-size:14px;font-weight:700;color:var(--vctext);word-break:break-all}
.info-val .muted{font-weight:400;color:var(--vcmut);font-size:12px}
.vc-strategy-detail{grid-column:1 / -1;font-size:12.5px;color:var(--vcmut);background:var(--vccard);border:1px dashed var(--vcline);border-radius:8px;padding:8px 10px;line-height:1.7}

/* 酶切位点 chip */
.vc-cuts{display:flex;flex-wrap:wrap;gap:8px}
.cut-chip{display:inline-flex;align-items:center;gap:6px;background:var(--vccard2);border:1px solid var(--vcline);color:var(--vctext);border-radius:20px;padding:5px 12px;font-size:12.5px;cursor:pointer;transition:all .15s}
.cut-chip:hover{border-color:var(--vcacc);color:var(--vcacc)}
.cut-chip.is-active{background:rgba(37,99,235,.16);border-color:var(--vcacc);color:var(--vcacc)}
body.light .cut-chip.is-active{background:var(--vcaccbg)}
.cut-count{font-weight:700;color:var(--vcacc);font-size:12px}
.cut-site{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--vcmut);font-size:11px}

/* 特征列表 */
.vc-feats{display:flex;flex-direction:column;gap:6px}
.feat-row{display:flex;align-items:center;gap:10px;background:var(--vccard2);border:1px solid var(--vcline);border-radius:8px;padding:7px 10px;font-size:13px;flex-wrap:wrap}
.feat-dot{width:10px;height:10px;border-radius:50%;flex:none}
.feat-name{font-weight:600;color:var(--vctext)}
.feat-meta{color:var(--vcmut);font-size:12px}

/* SVG 酶标记 */
.enz-marker{cursor:pointer;pointer-events:all}
.enz-marker circle{transition:fill .15s,r .15s}
.enz-marker:hover circle{fill:#fff;r:6}
.enz-marker.is-hidden{display:none}

.vc-downloads{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ── 侧栏 ── */
.vc-aside{display:flex;flex-direction:column;gap:16px}
.vc-aside-card{background:var(--vccard);border:1px solid var(--vcline);border-radius:var(--vcradius);padding:16px;box-shadow:var(--vcshadow)}
.vc-aside-card h4{margin:0 0 10px;font-size:15px;color:var(--vcacc)}
.vc-aside-t{margin:10px 0 4px;font-size:13.5px;color:var(--vctext)}
.vc-aside-c{margin:0 0 10px;font-size:12.5px;line-height:1.75;color:var(--vcmut)}
.vc-aside-card a{display:block;font-size:13px;color:var(--vcacc);text-decoration:none;padding:5px 0;border-bottom:1px dashed var(--vcline)}
.vc-aside-card a:hover{color:var(--vcacc2)}

/* ── 教程与 SEO ── */
.vc-tutorial{position:relative;z-index:1;max-width:1180px;margin:0 auto 20px;padding:0 16px}
.vc-tutorial .vc-card{box-shadow:none}
.vc-tutorial h3{color:var(--vcacc);margin:0 0 10px}
.vc-tutorial p{font-size:13.5px;line-height:1.9;color:var(--vctext);margin:0 0 8px}
.vc-tutorial ul{margin:4px 0 10px;padding-left:20px;font-size:13.5px;line-height:1.9;color:var(--vctext)}

.vc-seo{position:relative;z-index:1;max-width:1180px;margin:0 auto 30px;padding:0 16px}
.vc-seo .vc-card{box-shadow:none}
.vc-seo-h2{margin:26px 0 8px;font-size:20px;color:var(--vctext);position:relative;padding-left:14px}
.vc-seo-h2:before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--vcacc),var(--vcacc2))}
.vc-seo p{font-size:14px;line-height:2;color:var(--vcmut);margin:0}

/* ── 响应式细节 ── */
@media(max-width:640px){
  .vc-hero-h1{font-size:27px}
  .vc-hero{padding:40px 14px 16px}
  .vc-card{padding:14px}
}