.dual-hero{background:linear-gradient(120deg,#101438 0%,#2d155d 58%,#6638c9 140%)}
.dual-workspace{grid-template-columns:minmax(0,1.65fr) minmax(285px,.75fr)}
.direction-control{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px;padding:5px;border:1px solid #ded8e9;border-radius:13px;background:#fff}
.direction-control button{min-height:44px;border:0;border-radius:9px;background:transparent;color:#62586e;font:800 .78rem Montserrat,sans-serif;cursor:pointer}
.direction-control button.active{background:#17133c;color:#fff;box-shadow:0 5px 13px rgba(16,20,56,.16)}
.system-route{display:flex;align-items:center;gap:9px;margin-top:16px}
.system-route b{padding:7px 10px;border-radius:9px;background:#eee8fa;color:#4b2ebf;font-size:.68rem}
.system-route i{color:#9a6a14;font-style:normal;font-weight:900}
.conversion-reference .reference-list{display:grid;gap:8px}
.conversion-reference .reference-list div{display:flex;justify-content:space-between;gap:16px;padding:11px 12px;border-radius:10px;background:#f7f4fc;font-size:.76rem}
.conversion-reference .reference-list b{color:#292047}
.conversion-reference .reference-list span{color:#62586e;text-align:right}
.volume-note{margin-top:18px;padding:15px;border-left:3px solid #d39324;border-radius:8px;background:#fff9ea}
.volume-note strong{font-size:.72rem;color:#7b5410}
.volume-note p{margin:5px 0 0;font-size:.72rem;line-height:1.55}
@media(max-width:900px){.dual-workspace{grid-template-columns:1fr}}
@media(max-width:560px){.direction-control{grid-template-columns:1fr}.dual-workspace .quantity-tabs{grid-template-columns:1fr 1fr}}