:root{--navy:#0b2744;--blue:#146b8c;--teal:#36b4a7;--ink:#172536;--muted:#627083;--line:#d9e2ea;--paper:#fff;--wash:#f3f7fa;--danger:#ad2e3d;--shadow:0 18px 45px rgba(16,39,63,.1)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--wash)}
.site-header{color:#fff;background:radial-gradient(circle at 80% 10%,rgba(54,180,167,.3),transparent 32%),linear-gradient(135deg,#071d33,#10486b)}
.nav{max-width:1480px;margin:auto;padding:22px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between}.logo{font-size:1.15rem;font-weight:800;color:#fff;text-decoration:none}.navlinks{display:flex;gap:26px}.navlinks a{color:#dceaf2;text-decoration:none;font-weight:650}
.hero{max-width:1480px;margin:auto;padding:55px clamp(20px,4vw,64px) 70px}.eyebrow,.tag{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:800;color:#61d2c5}.hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.02;max-width:900px;margin:12px 0}.hero>p:last-child{max-width:760px;color:#dceaf2;font-size:1.08rem;line-height:1.7}
.tool-shell{max-width:1480px;margin:-28px auto 50px;padding:0 clamp(16px,3vw,48px);display:grid;grid-template-columns:minmax(330px,430px) minmax(0,1fr);gap:24px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:25px}.inputs-panel{position:sticky;top:18px}.panel-head,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.panel h2,.panel h3{margin:5px 0 0}.status{font-size:.78rem;color:var(--blue);background:#eaf6f7;padding:7px 10px;border-radius:999px;font-weight:750}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.form-grid label:first-child{grid-column:span 2}label span{display:block;font-size:.79rem;font-weight:750;margin-bottom:6px}label{position:relative}input{width:100%;border:1px solid #c8d4de;border-radius:9px;padding:11px 44px 11px 12px;font:inherit;color:var(--ink);background:#fbfdfe}input:focus{outline:3px solid rgba(20,107,140,.15);border-color:var(--blue)}label small{position:absolute;right:10px;bottom:12px;color:var(--muted);font-size:.72rem}
.collection{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.section-head p{font-size:.78rem;color:var(--muted);margin:4px 0}.rows{display:grid;gap:9px;margin-top:14px}.input-row{display:grid;grid-template-columns:34px 1fr 1fr 34px;gap:8px;align-items:center}.input-row.support-row{grid-template-columns:34px 1fr 34px}.row-label{width:30px;height:30px;border-radius:50%;background:#e9f3f6;color:var(--blue);display:grid;place-items:center;font-size:.75rem;font-weight:850}.input-row input{padding:10px}.input-wrap{position:relative}.input-wrap small{position:absolute;right:9px;top:11px;color:var(--muted);font-size:.68rem}.remove{border:0;background:#f5e9eb;color:var(--danger);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:1rem}.remove:disabled{opacity:.35;cursor:not-allowed}
button,.download{border:0;border-radius:9px;padding:11px 16px;background:var(--blue);color:#fff;font:inherit;font-weight:750;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.secondary{background:#eef3f6;color:var(--navy);border:1px solid #d5e0e7}.small{padding:7px 10px;font-size:.76rem}.actions{display:flex;gap:10px;margin-top:24px}.actions button:first-child{flex:1}.error{background:#fff0f1;border:1px solid #efc3c8;color:var(--danger);padding:10px;border-radius:8px;margin-bottom:0}.download.disabled{pointer-events:none;opacity:.4}
.results-panel{min-height:600px}.empty{height:500px;display:grid;place-content:center;text-align:center;color:var(--muted);gap:8px}.empty strong{font-size:1.15rem;color:var(--ink)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.metric{background:#f3f7f9;border-radius:11px;padding:14px}.metric span{display:block;color:var(--muted);font-size:.73rem;margin-bottom:4px}.metric strong{font-size:1.12rem}.diagram-wrap{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:auto}.diagram-wrap img{display:block;width:100%;min-width:650px}.reaction-table{display:grid;gap:7px}.reaction{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}.reaction strong{color:var(--blue)}.note{font-size:.82rem;color:var(--muted);background:#f4f7f9;border-left:3px solid var(--teal);padding:10px 12px}
footer{text-align:center;padding:34px;color:var(--muted);font-size:.85rem}
@media(max-width:900px){.tool-shell{grid-template-columns:1fr;margin-top:-18px}.inputs-panel{position:static}.results-panel{min-height:auto}.navlinks{display:none}.metrics{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.panel{padding:18px}.form-grid{grid-template-columns:1fr}.form-grid label:first-child{grid-column:auto}.metrics{grid-template-columns:1fr}.actions{flex-direction:column}.hero{padding-top:35px}.input-row{grid-template-columns:30px 1fr 1fr 30px}}