:root{--bg: #06090f;--bg-surface: #0d1117;--bg-card: #151b25;--bg-card-hover: #1a2332;--border: #21293a;--border-bright: #2f3b4e;--primary: #00e599;--primary-dim: #00c07a;--primary-glow: rgba(0, 229, 153, .15);--secondary: #0ea5e9;--text: #e6edf3;--text-muted: #7d8da1;--text-dim: #4a5567;--danger: #f85149;--warning: #d29922;--success: #3fb950;--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--mono: "JetBrains Mono", "Fira Code", monospace;--radius: 10px;--radius-lg: 16px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}code,.mono{font-family:var(--mono)}.page{max-width:1140px;margin:0 auto;padding:2rem 1.5rem 4rem}.page h1{font-size:2rem;font-weight:700;margin-bottom:1.5rem}.page h2{font-size:1.35rem;font-weight:600;margin-bottom:1rem;color:var(--text)}.page h3{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:border-color .2s,box-shadow .2s}.card:hover{border-color:var(--border-bright)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}.card-glow{border-color:#00e59933;box-shadow:0 0 30px #00e5990d}.card-glow:hover{border-color:#00e59966;box-shadow:0 0 40px #00e5991a}.card-accent{position:relative;overflow:hidden}.card-accent:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--primary));background-size:200% 100%;animation:gradientSlide 3s ease infinite}@keyframes gradientSlide{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;border:none;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:.9rem;font-weight:600;transition:all .15s;text-decoration:none}.btn:hover{text-decoration:none}.btn-primary{background:var(--primary);color:#06090f}.btn-primary:hover{background:#0f8;box-shadow:0 0 20px var(--primary-glow)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{opacity:.85}.btn-sm{padding:.4rem .9rem;font-size:.8rem}.btn-lg{padding:.85rem 2rem;font-size:1rem}.btn-icon{padding:.5rem;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all .15s}.btn-icon:hover{border-color:var(--primary);color:var(--primary)}.btn-glow{box-shadow:0 0 20px var(--primary-glow);animation:btnGlow 2s ease-in-out infinite alternate}@keyframes btnGlow{0%{box-shadow:0 0 15px var(--primary-glow)}to{box-shadow:0 0 30px #00e5994d}}.input,.textarea,select.input{width:100%;padding:.65rem 1rem;background:var(--bg-surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:.9rem;transition:border-color .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237d8da1'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.5rem;cursor:pointer}select.input option{background:var(--bg-card);color:var(--text)}.input:focus,.textarea:focus,select.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.input-mono{font-family:var(--mono);font-size:.82rem}.textarea{min-height:100px;resize:vertical;font-family:var(--mono);font-size:.82rem}.label{display:block;font-size:.82rem;font-weight:500;color:var(--text-muted);margin-bottom:.4rem}.field{margin-bottom:1.25rem}.badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.03em}.badge-primary{background:var(--primary-glow);color:var(--primary)}.badge-warning{background:#d2992226;color:var(--warning)}.badge-danger{background:#f8514926;color:var(--danger)}.badge-secondary{background:#0ea5e91f;color:var(--secondary)}.stat{text-align:center}.stat-value{font-size:2rem;font-weight:800;color:var(--primary);font-family:var(--mono)}.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:.2rem}.dna-strand{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;word-break:break-all;line-height:1.8;padding:1rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);max-height:400px;overflow-y:auto}.dna-strand .base-T,.base-T{color:#f85149}.dna-strand .base-A,.base-A{color:#3fb950}.dna-strand .base-C,.base-C{color:#58a6ff}.dna-strand .base-G,.base-G{color:#d29922}.text-success{color:var(--success)}.progress-track{height:8px;background:var(--bg-surface);border-radius:4px;border:1px solid var(--border);overflow:hidden}.progress-fill{height:100%;border-radius:4px;transition:width .4s ease;background:linear-gradient(90deg,var(--primary-dim),var(--primary))}.stepper{display:flex;gap:0;align-items:center;margin-bottom:2rem}.step{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;color:var(--text-dim);white-space:nowrap}.step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:2px solid var(--border);color:var(--text-dim);background:var(--bg-surface);transition:all .2s}.step.active .step-num{border-color:var(--primary);color:var(--primary);background:var(--primary-glow)}.step.done .step-num{border-color:var(--primary);color:var(--bg);background:var(--primary)}.step.active{color:var(--text)}.step.done{color:var(--primary)}.step-line{flex:1;height:2px;background:var(--border);min-width:20px}.step-line.done{background:var(--primary)}.empty-state{text-align:center;padding:3rem 2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.6}.empty-title{font-size:1.15rem;font-weight:600;margin-bottom:.5rem}.empty-desc{color:var(--text-muted);font-size:.9rem;max-width:400px;margin:0 auto 1.5rem;line-height:1.6}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem}.toast{padding:.8rem 1.2rem;border-radius:var(--radius);font-size:.85rem;font-weight:500;animation:slideIn .2s ease-out;box-shadow:0 8px 32px #0006;cursor:pointer}.toast-success{background:#132a1e;border:1px solid var(--success);color:var(--success)}.toast-error{background:#2a1315;border:1px solid var(--danger);color:var(--danger)}.toast-info{background:#0d1f33;border:1px solid var(--secondary);color:var(--secondary)}@keyframes slideIn{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem}.tab-btn{background:none;border:none;color:var(--text-muted);font-size:.9rem;padding:.75rem 1.25rem;cursor:pointer;position:relative;font-family:var(--font);transition:color .2s;font-weight:500}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--primary);font-weight:600}.tab-btn.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--primary);border-radius:1px 1px 0 0}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-wrap{flex-wrap:wrap}.gap-05{gap:.25rem}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.mt-05{margin-top:.25rem}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.text-muted{color:var(--text-muted)}.text-primary{color:var(--primary)}.text-center{text-align:center}.text-sm{font-size:.85rem}.text-xs{font-size:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.w-full{width:100%}.relative{position:relative}.grad-text{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.protein-bar{display:inline-flex;align-items:center;gap:0;border-radius:3px;overflow:hidden;vertical-align:middle}.protein-bar-inline{display:inline-flex;align-items:center;gap:0;border-radius:2px;overflow:hidden;vertical-align:middle;margin:0 .25rem}.protein-bar-sq{display:inline-block;flex-shrink:0}.gel-wrap{display:inline-block;border-radius:6px;overflow:hidden}.gel-svg{display:block;border-radius:4px 4px 0 0}.gel-labels{display:flex;align-items:center;background:var(--bg-card);border-top:1px solid var(--border);border-radius:0 0 4px 4px;padding:.25rem 0}.gel-label{text-align:center;font-family:var(--mono);font-size:.6rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}.gel-label-hl{color:var(--primary)}@media(max-width:768px){.page{padding:1.25rem 1rem 3rem}.page h1{font-size:1.5rem}.card-grid{grid-template-columns:1fr}.hide-mobile{display:none}.stepper{overflow-x:auto}.step{font-size:.75rem;padding:.4rem .5rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}