:root{--ink:#17211c;--muted:#6d776f;--line:#dce1db;--paper:#f5f5f0;--card:#fff;--acid:#d7ff4f;--green:#235844;--orange:#ff7253;--mono:"DM Mono",monospace}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC",sans-serif}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100% - 1200px)/2));background:rgba(245,245,240,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:35px;height:35px;background:var(--ink);color:var(--acid);font:500 13px var(--mono);border-radius:50%}.engine{font:12px var(--mono);text-transform:uppercase;letter-spacing:.08em}.engine i{display:inline-block;width:7px;height:7px;background:#35a568;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #dceee4}main{max-width:1200px;margin:auto;padding:0 28px 80px}.hero{position:relative;padding:78px 0 65px;border-bottom:1px solid var(--line);overflow:hidden}.eyebrow{font:500 11px var(--mono);letter-spacing:.14em;color:var(--green)}h1{font-size:clamp(43px,6vw,72px);line-height:1.08;letter-spacing:-.055em;margin:20px 0 25px;max-width:760px}h1 em{font-style:normal;color:var(--green);position:relative}h1 em:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;background:var(--acid);z-index:-1}.hero p{color:var(--muted);max-width:610px;line-height:1.8;margin:0;font-size:15px}.helix{position:absolute;right:25px;top:58px;width:260px;height:180px;opacity:.7;transform:rotate(-8deg)}.helix:before,.helix:after{content:"";position:absolute;inset:10px 0;border-top:2px solid var(--green);border-radius:50%;transform:rotate(18deg)}.helix:after{transform:rotate(-18deg);top:90px}.helix span{position:absolute;width:2px;height:100px;background:var(--line);left:20%;top:40px;transform:rotate(55deg)}.helix span:nth-child(2){left:35%}.helix span:nth-child(3){left:50%}.helix span:nth-child(4){left:65%}.helix span:nth-child(5){left:80%}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.85fr);gap:22px;padding-top:28px;align-items:start}.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:27px;box-shadow:0 9px 30px rgba(21,36,28,.035)}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.card-head>div{display:flex;align-items:center;gap:12px}.step{font:11px var(--mono);background:var(--acid);padding:5px 7px;border-radius:4px}.card h2{font-size:20px;margin:0;letter-spacing:-.02em}.counter{font:11px var(--mono);color:var(--muted)}label{font-size:12px;font-weight:600;color:#37423b}.field{margin-bottom:21px}.field.compact{max-width:360px}.field label,.label-row{display:block;margin-bottom:9px}.label-row{display:flex;justify-content:space-between;align-items:center}.field b{color:var(--orange)}input,textarea,select{width:100%;border:1px solid #cfd6cf;background:#fbfcfa;border-radius:7px;padding:12px;color:var(--ink);font:13px "Noto Sans SC",sans-serif;outline:none;transition:.2s}input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(35,88,68,.08)}textarea{font:13px/1.7 var(--mono);resize:vertical;min-height:190px}.text-btn{border:0;background:none;color:var(--green);padding:0;font:500 11px var(--mono);cursor:pointer}.field-error{min-height:17px;color:#b7442f;font-size:11px;padding-top:5px}.regions{display:grid;grid-template-columns:1fr 160px 160px;gap:12px;align-items:end;padding:17px;background:#f3f7ed;border-left:3px solid var(--acid);border-radius:3px;margin-top:2px}.regions label,.detail-grid label,.triple label,.double label{font-size:10px;color:var(--muted)}.region-title{font-size:13px;font-weight:600;align-self:center}.region-title small{display:block;color:var(--muted);font-weight:400;margin:5px 0 0 16px}.target-dot{display:inline-block;width:8px;height:8px;background:var(--orange);margin-right:8px}details{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}summary{cursor:pointer;color:var(--green);font-size:12px;font-weight:600}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.param-group{border-bottom:1px solid var(--line);padding:0 0 21px;margin-bottom:21px}.param-group h3{font-size:13px;margin:0 0 13px}.param-group h3 small{font:10px var(--mono);color:var(--muted);margin-left:4px}.triple,.double{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.double{grid-template-columns:1fr 1fr}.triple input,.double input{margin-top:7px;padding:10px}.range{grid-template-columns:1fr 15px 1fr;align-items:end}.range>span{text-align:center;padding-bottom:10px;color:var(--muted)}.return-count{display:flex;justify-content:space-between;align-items:center}.return-count h3{margin:0}.return-count select{width:90px;padding:9px}.primary{width:100%;border:0;background:var(--ink);color:white;padding:16px;border-radius:7px;font-weight:600;cursor:pointer;display:flex;justify-content:center;gap:12px;transition:.2s}.primary b{color:var(--acid);font-size:18px;line-height:14px}.primary:hover{background:var(--green);transform:translateY(-1px)}.primary:disabled{opacity:.65;cursor:wait}.spinner{display:none;width:15px;height:15px;border:2px solid #ffffff55;border-top-color:var(--acid);border-radius:50%;animation:spin .7s linear infinite}.loading .spinner{display:block}.loading .button-label{display:none}@keyframes spin{to{transform:rotate(360deg)}}.engine-note{text-align:center;font-size:10px;color:var(--muted);margin:12px 0 0}.message{display:none;margin-top:22px;padding:15px;border-radius:7px;background:#fff0ec;color:#9e3825;font-size:13px;border:1px solid #ffd5ca}.message.show{display:block}.results{padding-top:64px}.results-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.results-head h2{font-size:31px;margin:8px 0 0;letter-spacing:-.04em}.result-actions{display:flex;align-items:center;gap:15px;color:var(--muted);font:11px var(--mono)}.outline{background:white;border:1px solid var(--line);border-radius:6px;padding:10px 13px;cursor:pointer}.pair-list{display:grid;gap:13px}.pair{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.pair-top{display:grid;grid-template-columns:70px 1fr 105px 95px;align-items:center;padding:15px 20px;background:#fafbf8;border-bottom:1px solid var(--line)}.rank{font:500 11px var(--mono);color:var(--green)}.pair-score small,.product small{display:block;color:var(--muted);font:9px var(--mono);margin-bottom:4px}.pair-score,.product{font:500 13px var(--mono)}.map{height:8px;background:#e6e9e4;position:relative;border-radius:5px;margin-right:22px}.map .amplicon{position:absolute;height:8px;background:var(--acid);border:1px solid #b9df31;border-radius:5px;min-width:5%}.map .primer-left,.map .primer-right{position:absolute;width:3px;height:18px;background:var(--green);top:-5px}.map .primer-right{background:var(--orange)}.oligos{display:grid;grid-template-columns:1fr 1fr}.oligo{padding:19px 20px}.oligo+ .oligo{border-left:1px solid var(--line)}.oligo-head{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px;font-weight:600}.oligo-head span:last-child{font:10px var(--mono);color:var(--muted)}.oligo-seq{font:500 clamp(11px,1.35vw,14px) var(--mono);letter-spacing:.06em;overflow-wrap:anywhere;margin-bottom:16px}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.metric{border-left:1px solid var(--line);padding-left:8px}.metric:first-child{border-left:0;padding-left:0}.metric small{font:8px var(--mono);color:var(--muted);display:block;text-transform:uppercase}.metric b{font:500 11px var(--mono)}.explain{margin-top:18px;padding:18px;background:white;border:1px solid var(--line);border-radius:8px}.explain pre{white-space:pre-wrap;font:11px/1.7 var(--mono);color:var(--muted)}@media(max-width:850px){.helix{display:none}.workspace{grid-template-columns:1fr}.params-card{order:2}.regions{grid-template-columns:1fr 1fr}.region-title{grid-column:1/-1}.pair-top{grid-template-columns:55px 1fr 80px}.pair-score{display:none}.oligos{grid-template-columns:1fr}.oligo+.oligo{border-left:0;border-top:1px solid var(--line)}}@media(max-width:560px){main{padding:0 16px 60px}.topbar{padding:0 16px}.hero{padding:52px 0 45px}.card{padding:19px}.triple{grid-template-columns:1fr}.oligos{display:block}.metrics{grid-template-columns:repeat(3,1fr);row-gap:12px}.results-head{align-items:start;gap:18px}.result-actions{flex-direction:column;align-items:end}.pair-top{padding:13px}.oligo{padding:16px 13px}}


/* GeneCreate visual alignment */
:root{--ink:#14532d;--muted:#5f806d;--line:#cfe8de;--paper:#ecfdf5;--card:#fff;--acid:#dff5e8;--green:#3ba564;--orange:#f39c4a;--mono:"SFMono-Regular",Consolas,monospace}
body{background:var(--paper);color:var(--ink);font-family:"Segoe UI",Roboto,Inter,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
.topbar{width:min(calc(100% - 40px),1280px);height:68px;margin:auto;padding:0 26px;background:#fffffff2;border:1px solid #e2f0e9;border-top:0;border-radius:0 0 20px 20px;box-shadow:0 2px 8px #00402009;backdrop-filter:blur(14px)}
.brand-mark{width:38px;height:38px;color:#fff;background:#3ba564;border-radius:13px;box-shadow:0 5px 12px #3ba56438}
.engine{padding:7px 15px;color:#2c6e49;background:#eef8f2;border-radius:99px}
main{max-width:1280px;padding-bottom:72px}.hero{min-height:285px;margin-top:16px;padding:58px 54px;background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:0 16px 32px #00402011}
.hero:before{content:"";position:absolute;top:-110px;right:-90px;width:390px;height:390px;background:radial-gradient(circle,#dff7e9 0,#dff7e966 42%,transparent 70%)}
.hero h1{color:#103f24}.hero h1 em{color:#3ba564}.hero h1 em:after{height:9px;background:#d9f2e3;border-radius:8px}.hero p{color:#5f806d}.eyebrow{color:#2d8c54}.helix:before,.helix:after{border-color:#3ba564}
.workspace{gap:20px;padding-top:20px}.card{border:1px solid var(--line);border-radius:28px;box-shadow:0 16px 32px #00402011}.sequence-card,.params-card{padding:28px}.step{display:grid;place-items:center;width:38px;height:38px;padding:0;color:#fff;background:#3ba564;border-radius:13px;box-shadow:0 5px 12px #3ba56430}
.card h2{color:#1e593b}label{color:#356349}input,textarea,select{background:#fbfefc;border-color:#c7dfd3;border-radius:14px}input:focus,textarea:focus,select:focus{border-color:#3ba564;box-shadow:0 0 0 4px #3ba5641a}.text-btn{padding:5px 10px;color:#2d8c54;background:#eafaf2;border-radius:99px}
.regions{background:#f5faf7;border:1px solid #e2f0e9;border-left:4px solid #3ba564;border-radius:18px}.regions input,.detail-grid input,.triple input,.double input{border-radius:11px}.target-dot{background:#f39c4a;border-radius:3px}details,.param-group{border-color:#e2f0e9}
.primary{padding:13px 22px;background:#3ba564;border-radius:99px;box-shadow:0 5px 12px #3ba56433}.primary:hover{background:#2d8c54}.engine-note span{box-shadow:none}.message{border-radius:16px}
.outline{color:#2d8c54;border-color:#cfe8de;border-radius:99px}.pair{border-color:#cfe8de;border-radius:24px}.pair-top{background:#f5faf7;border-color:#e2f0e9}.map{background:#dfece5;border-radius:8px}.map .amplicon{background:#8ed3aa;border:0;border-radius:8px}.map .primer-left{background:#2d8c54}.map .primer-right{background:#f39c4a}.oligo+.oligo,.metric{border-color:#e2f0e9}.explain{border-color:#cfe8de;border-radius:20px}
@media(max-width:560px){.topbar,main{width:calc(100% - 24px);padding-left:0;padding-right:0}.topbar{padding:0 16px}.hero{padding:38px 24px;border-radius:22px}.card{border-radius:22px}.sequence-card,.params-card{padding:20px}}