:root{--bg:#f8fafc;--cyan:#2563eb;--purple:#8B5CF6;--t1:#F3F4F6;--t2:#9CA3AF;--t3:#4B5563;--card:rgba(7,20,40,.78);--bdr:rgba(37,99,235,.1)}
body{background:var(--bg);color:#D1D5DB;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;margin:0}
a{text-decoration:none}

.tool-hero{text-align:center;padding:40px 24px 20px;position:relative;z-index:10}
.tool-hero h1{font-size:1.8rem;color:var(--t1);margin:0 0 6px}
.tool-hero .sub{font-size:.9rem;color:var(--t2);max-width:600px;margin:0 auto}

.tool-wrap{max-width:900px;margin:0 auto;padding:0 24px 48px;position:relative;z-index:10}

/* Host selector */
.host-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:20px}
.host-card{padding:12px;background:var(--card);border:2px solid var(--bdr);border-radius:10px;cursor:pointer;transition:all .2s;text-align:center}
.host-card:hover{border-color:rgba(37,99,235,.3);transform:translateY(-1px)}
.host-card.active{border-color:var(--cyan);background:rgba(37,99,235,.08)}
.host-card .hn{font-size:.9rem;color:var(--t1);font-weight:600;margin-bottom:2px}
.host-card .hd{font-size:.75rem;color:var(--t3);line-height:1.3}

/* Form area */
.form-section{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:24px;margin-bottom:16px}
.form-section h3{font-size:.95rem;color:var(--t1);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.form-label{display:block;font-size:.82rem;color:var(--t2);margin-bottom:6px}
.form-input{width:100%;padding:10px 14px;background:rgba(2,8,18,.6);border:1px solid var(--bdr);border-radius:8px;color:var(--t1);font-size:.88rem;font-family:monospace;resize:vertical;box-sizing:border-box;transition:border-color .2s}
.form-input:focus{outline:none;border-color:var(--cyan)}
.form-textarea{min-height:100px;line-height:1.5}
.form-select{appearance:none;cursor:pointer}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(139,92,246,.15));border:1px solid var(--cyan);border-radius:10px;color:var(--cyan);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-primary:hover{background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(139,92,246,.25));box-shadow:0 0 30px rgba(37,99,235,.15)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-download{padding:8px 16px;background:rgba(37,99,235,.1);border:1px solid var(--bdr);border-radius:6px;color:var(--cyan);font-size:.85rem;cursor:pointer;transition:all .15s}
.btn-download:hover{background:rgba(37,99,235,.2)}

/* Progress */
.progress-wrap{display:none;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:20px;margin-bottom:16px;text-align:center}
.progress-bar{height:4px;background:rgba(37,99,235,.1);border-radius:2px;margin:12px 0;overflow:hidden}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--purple));border-radius:2px;transition:width .3s;width:0}
.progress-msg{font-size:.85rem;color:var(--t2)}
.progress-elapsed{font-size:.78rem;color:var(--t3);margin-top:4px}

/* Results */
.result-wrap{display:none;background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:24px;margin-bottom:16px}
.result-section{margin-bottom:20px}
.result-section:last-child{margin-bottom:0}
.result-section h4{font-size:.9rem;color:var(--t1);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--bdr)}
.rationale{font-size:.88rem;color:var(--t2);line-height:1.6;padding:10px 14px;background:rgba(37,99,235,.04);border-radius:8px}

/* Module bar visualization */
.module-bar{display:flex;gap:2px;margin:12px 0;height:36px;border-radius:6px;overflow:hidden}
.module-seg{display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.module-seg:hover{filter:brightness(1.3)}
.seg-P{background:#2196F3}.seg-R{background:#FF9800}.seg-S{background:#E91E63}
.seg-N{background:#9C27B0}.seg-L{background:#607D8B}.seg-C{background:#4CAF50}
.seg-T{background:#F44336}.seg-tag{background:#795548}
.seg-colors{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0;font-size:.72rem;color:var(--t3)}

/* Parts list */
.parts-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.part-item{padding:8px 12px;background:rgba(2,8,18,.4);border-radius:6px;font-size:.82rem}
.part-item .pi-label{color:var(--t3);font-size:.72rem}
.part-item .pi-value{color:var(--t1);font-weight:500}
.part-item .pi-reason{color:var(--t2);font-size:.75rem;margin-top:2px}

/* Output tabs */
.output-tabs{display:flex;gap:4px;margin-bottom:12px}
.output-tab{padding:6px 14px;background:rgba(2,8,18,.4);border:1px solid var(--bdr);border-radius:6px 6px 0 0;color:var(--t2);font-size:.82rem;cursor:pointer}
.output-tab.active{background:var(--card);border-bottom-color:transparent;color:var(--cyan)}
.output-content{background:rgba(2,8,18,.6);border:1px solid var(--bdr);border-radius:0 8px 8px 8px;padding:16px;max-height:400px;overflow:auto;font-size:.78rem;font-family:monospace;color:var(--t2);line-height:1.5;white-space:pre-wrap;word-break:break-all}
.output-content::-webkit-scrollbar{width:6px}
.output-content::-webkit-scrollbar-thumb{background:rgba(37,99,235,.15);border-radius:3px}

.balance-bar{font-size:.8rem;color:var(--t3);text-align:center;margin-bottom:16px}
.balance-bar span{color:var(--cyan)}

.warn-item{padding:6px 10px;background:rgba(255,152,0,.08);border-left:3px solid #FF9800;border-radius:0 4px 4px 0;font-size:.82rem;color:#FFB74D;margin-bottom:4px}
/* ── TF-Scan 专属样式 ── */
.req{color:#F87171;font-size:.75rem}
.opt{color:var(--t3);font-size:.75rem;font-weight:400}
.file-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.file-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(37,99,235,.08);border:1px dashed var(--cyan);border-radius:8px;color:var(--cyan);font-size:.82rem;cursor:pointer;transition:all .2s}
.file-btn:hover{background:rgba(37,99,235,.18)}
.file-hint{font-size:.75rem;color:var(--t3)}
.form-textarea{width:100%;padding:10px 14px;background:rgba(2,8,18,.6);border:1px solid var(--bdr);border-radius:8px;color:var(--t1);font-size:.85rem;resize:vertical;box-sizing:border-box;font-family:inherit}
.form-textarea:focus{outline:none;border-color:var(--cyan)}
.mono{font-family:monospace;font-size:.78rem}
.opt-row{margin-bottom:12px}
.opt-row select{background:rgba(2,8,18,.6);border:1px solid var(--bdr);border-radius:8px;color:var(--t1);padding:8px 12px;font-size:.85rem}
.chk-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--t2);cursor:pointer}
.chk-label input{accent-color:var(--cyan)}
.btn-submit{display:block;width:100%;padding:14px;background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(139,92,246,.15));border:1px solid var(--cyan);border-radius:10px;color:var(--cyan);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-submit:hover{background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(139,92,246,.25));box-shadow:0 0 30px rgba(37,99,235,.15)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}
.pairs-table{width:100%;border-collapse:collapse;font-size:.82rem}
.pairs-table th{background:rgba(37,99,235,.08);color:var(--cyan);padding:8px 10px;text-align:left;font-weight:600;border-bottom:1px solid var(--bdr)}
.pairs-table td{padding:8px 10px;border-bottom:1px solid rgba(37,99,235,.05);color:var(--t2)}
.pairs-table tr:hover td{background:rgba(37,99,235,.03)}
.pairs-table .tf{color:var(--t1);font-weight:600}
.pairs-table .fam{color:var(--purple);font-size:.75rem}
.pairs-table .score{color:var(--cyan);font-weight:600}
.pairs-table .hit{color:#F59E0B}
.pairs-table .coexp{color:#4CAF50}
.rank-badge{display:inline-block;min-width:22px;text-align:center;padding:2px 6px;border-radius:12px;font-size:.72rem;font-weight:700;background:rgba(139,92,246,.15);color:var(--purple)}
.rank-badge.top{background:rgba(37,99,235,.2);color:var(--cyan)}
.fam-chip{display:inline-block;padding:4px 12px;margin:4px 6px 4px 0;border-radius:20px;font-size:.78rem;background:rgba(139,92,246,.1);color:#C4B5FD;border:1px solid rgba(139,92,246,.2)}
.fam-chip b{color:var(--cyan)}
.site-row{margin-bottom:14px;background:rgba(2,8,18,.4);border-radius:8px;padding:12px}
.site-row .site-title{font-size:.85rem;color:var(--t1);font-weight:600;margin-bottom:8px}
.site-row .site-title .site-tf{color:var(--purple)}
.site-track{position:relative;height:36px;background:rgba(37,99,235,.04);border:1px solid var(--bdr);border-radius:6px;margin:6px 0}
.site-track .track-line{position:absolute;top:17px;left:0;right:0;height:2px;background:rgba(37,99,235,.15)}
.site-track .tick{position:absolute;top:4px;height:28px;border-left:2px solid rgba(139,92,246,.5);cursor:pointer;transition:all .15s}
.site-track .tick:hover{background:rgba(139,92,246,.25)}
.site-track .tick-label{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:.62rem;color:var(--t3);white-space:nowrap}
.site-track .tick.plus{background:linear-gradient(180deg,rgba(37,99,235,.35),transparent)}
.site-track .tick.minus{background:linear-gradient(180deg,rgba(139,92,246,.35),transparent)}
.site-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.72rem;color:var(--t3);margin-top:4px}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.stat-item{padding:10px 12px;background:rgba(2,8,18,.4);border-radius:8px;font-size:.78rem;color:var(--t3)}
.stat-item b{display:block;font-size:1.1rem;color:var(--cyan);margin-bottom:2px}
.cost-line{font-size:.82rem;color:var(--t3)}
.cost-line span{color:var(--cyan)}
.lit-list{font-size:.75rem;color:var(--t2);margin-top:4px}
.lit-list a{color:var(--cyan)}
.test-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:rgba(139,92,246,.12);border:1px dashed rgba(139,92,246,.4);border-radius:8px;color:#C4B5FD;font-size:.78rem;cursor:pointer;transition:all .2s;margin-left:auto}
.test-btn:hover{background:rgba(139,92,246,.25);color:#DDD6FE}
.hit-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hit-chip{padding:3px 10px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3);border-radius:20px;font-size:.72rem;color:#C4B5FD;cursor:pointer;transition:all .15s}
.hit-chip:hover{background:rgba(139,92,246,.3);color:#DDD6FE}
.hit-detail{margin-top:8px;background:rgba(2,8,18,.7);border:1px solid rgba(37,99,235,.25);border-radius:8px;padding:12px 14px;animation:fadeIn .2s ease}
.hit-detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--cyan);font-size:.85rem}
.hit-close{cursor:pointer;color:var(--t3);font-size:.9rem;padding:0 6px}
.hit-close:hover{color:#F87171}
.hit-table{width:100%;border-collapse:collapse;font-size:.82rem}
.hit-table td{padding:5px 8px;border-bottom:1px solid rgba(37,99,235,.06);color:var(--t2);vertical-align:top}
.hit-table td:first-child{color:var(--t3);width:110px;white-space:nowrap}
.hit-table td b{color:var(--t1)}
.mono-seq{font-family:monospace;color:var(--cyan);word-break:break-all;font-size:.85rem}
.hit-tip{margin-top:8px;font-size:.75rem;color:#F59E0B;line-height:1.5}
@keyframes fadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

/* ── SnapGene 风格序列浏览器 ── */
.sg-wrap{margin-top:12px;background:rgba(2,8,18,.5);border:1px solid var(--bdr);border-radius:8px;padding:12px 14px}
.sg-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.72rem;color:var(--t3);margin-bottom:8px}
.sg-lg{display:inline-flex;align-items:center;gap:4px}
.sg-lg.plus{color:#4ADE80}
.sg-lg.minus{color:#C4B5FD}
.sg-lg.plain{color:var(--t2)}
.sg-tag-track{position:relative;height:20px;margin-bottom:4px}
.sg-tag{position:absolute;top:0;height:16px;border-radius:3px;font-size:.6rem;line-height:16px;text-align:center;color:#fff;cursor:pointer;overflow:hidden;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.sg-tag.plus{background:rgba(34,197,94,.75)}
.sg-tag.minus{background:rgba(139,92,246,.75)}
.sg-tag:hover{filter:brightness(1.2)}
.sg-viewer{font-family:'SF Mono',Consolas,'Courier New',monospace;font-size:.78rem;line-height:1.7;overflow-x:auto;padding:4px 0}
.sg-row{display:flex;white-space:nowrap}
.sg-row:hover{background:rgba(37,99,235,.03)}
.sg-pos{color:var(--t3);width:52px;text-align:right;padding-right:10px;user-select:none;flex-shrink:0}
.sg-bases{letter-spacing:0;color:var(--t1)}
.sg-grp{margin-right:1px}
.sg-plain{color:var(--t2)}
.sg-hit{border-radius:3px;padding:0 1px;cursor:pointer;transition:filter .15s}
.sg-hit.plus{background:rgba(34,197,94,.22);color:#4ADE80;border-bottom:2px solid #22C55E}
.sg-hit.minus{background:rgba(139,92,246,.22);color:#C4B5FD;border-bottom:2px solid #8B5CF6}
.sg-hit:hover{filter:brightness(1.35)}
.sg-scale{display:flex;justify-content:space-between;font-size:.65rem;color:var(--t3);margin-top:4px}

/* ── SnapGene 选中态 ── */
.sg-selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(2,8,18,.6);border:1px solid rgba(37,99,235,.2);border-radius:6px;padding:6px 10px;margin-bottom:8px;font-size:.78rem}
.sg-sel-motif{font-weight:700;padding:1px 8px;border-radius:10px;color:#fff;font-size:.72rem}
.sg-sel-motif.plus{background:#22C55E}
.sg-sel-motif.minus{background:#8B5CF6}
.sg-sel-pos{color:var(--t1)}
.sg-sel-strand{color:var(--t2)}
.sg-sel-score{color:#F59E0B}
.sg-sel-seq{color:var(--cyan);word-break:break-all}
.sg-hit.active{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 8px rgba(37,99,235,.4)}
.sg-tag.active{outline:2px solid #fff;outline-offset:1px;z-index:2}

/* ── v6.1 SnapGene 视觉强化：高对比度位点色块 ── */
.sg-hit{border-radius:3px;padding:1px 2px;cursor:pointer;transition:all .12s;font-weight:700;font-size:.85rem}
.sg-hit.plus{background:rgba(34,197,94,.45);color:#DCFCE7;border-bottom:3px solid #22C55E;text-shadow:0 0 4px rgba(0,0,0,.5)}
.sg-hit.minus{background:rgba(139,92,246,.5);color:#EDE9FE;border-bottom:3px solid #8B5CF6;text-shadow:0 0 4px rgba(0,0,0,.5)}
.sg-hit:hover{filter:brightness(1.35);transform:scale(1.02)}
.sg-hit.active{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 10px rgba(37,99,235,.55);background:rgba(34,197,94,.65)}
.sg-hit.minus.active{background:rgba(139,92,246,.7)}
.sg-tag{height:20px;font-size:.66rem;line-height:20px;font-weight:700;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.sg-tag.plus{background:#16A34A}
.sg-tag.minus{background:#7C3AED}
.sg-tag.active{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 8px rgba(255,255,255,.5)}
.sg-plain{color:#9CA3AF}
.sg-viewer{font-size:.82rem;line-height:1.9}
.sg-pos{color:#6B7280;width:56px;font-weight:600}
.sg-bases{letter-spacing:.5px}
.sg-selbar{border:1px solid rgba(37,99,235,.35);background:rgba(37,99,235,.06);padding:8px 12px;font-size:.8rem}
.sg-sel-seq{font-size:.85rem;letter-spacing:.5px}
.sg-scale{font-weight:600;color:#6B7280}

/* ── v7 碱基四色 ── */
.sg-base{font-weight:600}
.sg-hit .sg-base{font-weight:800}
.sg-hit.plus .sg-base{color:#fff}
.sg-hit.minus .sg-base{color:#fff}
.sg-plain{color:inherit}

/* 预计消耗提示（通用工具页同款样式） */
.tool-cost-hint{margin:0 0 12px;font-size:.82rem;color:#6B7280;line-height:1.6}
body.light .tool-cost-hint{color:#8B7355}