:root{font-family:Inter,ui-sans-serif,system-ui;color:#102a32;background:#f4f7f5;--sea:#073b4c;--aqua:#0b7285;--coral:#ef8354;--ink:#102a32}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}header{height:72px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dae5e2;position:sticky;top:0;z-index:10}.brand{display:flex;gap:12px;align-items:baseline}.brand b{font-size:24px;letter-spacing:.13em;color:var(--sea)}.brand span{font-size:12px;color:#688087}nav{display:flex;gap:22px;align-items:center;font-size:14px}.pill,.primary{background:var(--sea);color:#fff!important;padding:11px 18px;border-radius:999px;border:0;cursor:pointer}.link{border:0;background:none;cursor:pointer;color:var(--sea)}main{max-width:1180px;margin:auto;padding:40px 24px 72px}.hero{background:linear-gradient(130deg,#063747,#0b7285);color:#fff;border-radius:28px;padding:48px;display:grid;grid-template-columns:1.5fr 1fr;gap:30px;overflow:hidden}.hero h1{font-size:clamp(34px,5vw,62px);line-height:1;margin:0 0 18px}.hero p{font-size:18px;line-height:1.6;color:#d8f3f1}.hero .metric{align-self:end;border-left:1px solid #ffffff55;padding-left:28px}.metric strong{font-size:48px;display:block}.filters{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.filters input,.filters select,.form input,.form select,.form textarea{padding:13px 15px;border:1px solid #cbdad6;border-radius:12px;background:#fff;font:inherit}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}.card{background:#fff;border:1px solid #dce6e3;border-radius:20px;padding:20px;box-shadow:0 8px 22px #1233 0}.card .top{display:flex;justify-content:space-between;gap:10px}.status{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#087f5b;background:#e6fcf5;padding:6px 9px;border-radius:999px}.species{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.chip{background:#eef4f2;border-radius:8px;padding:5px 8px;font-size:12px}.price{font-size:28px;font-weight:800;color:var(--sea);margin:14px 0}.meta{font-size:13px;color:#587178;line-height:1.8}.buy{display:flex;gap:8px;margin-top:16px}.buy input{width:85px;border:1px solid #cbdad6;border-radius:10px;padding:10px}.buy button{flex:1}.empty,.panel{background:#fff;border-radius:18px;padding:28px;border:1px solid #dce6e3}.form{max-width:650px;margin:auto;display:grid;gap:14px}.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tabs{display:flex;gap:8px}.tabs button{padding:10px 16px;border:1px solid #cbdad6;background:#fff;border-radius:10px}.tabs .active{background:var(--sea);color:#fff}.notice{padding:12px;background:#fff3bf;color:#7c5700;border-radius:10px}.success{background:#d3f9d8;color:#245c2f;padding:14px;border-radius:10px}.order{display:grid;grid-template-columns:1fr auto;gap:12px;border-bottom:1px solid #e5ecea;padding:16px 0}.trace-head{text-align:center}.timeline{border-left:3px solid var(--aqua);padding-left:20px;margin:24px 0}.trace-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.trace-grid div{background:#fff;padding:18px;border-radius:14px}footer{padding:30px clamp(20px,5vw,72px);background:#062e3c;color:#fff;display:flex;justify-content:space-between}footer span{color:#a9c9cf}@media (max-width:720px){header{height:auto;padding:18px;align-items:flex-start}.brand span{display:none}nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}.hero{grid-template-columns:1fr;padding:30px}.hero .metric{display:none}.form .row,.trace-grid{grid-template-columns:1fr}}
