:root{color-scheme:dark;--swap-bg:#000;--swap-panel:#090b0c;--swap-field:#131516;--swap-line:#2b3032;--swap-muted:#8b9296;--swap-accent:#9be7f4}
html,body{min-height:100%;margin:0;background:var(--swap-bg);color:#fff;font:16px 'Host Grotesk Number',Onest,Arial,sans-serif}*{box-sizing:border-box}button,input{font:inherit}.market-shared-header{height:80px;position:relative;z-index:50}
.swap-shell{width:min(1280px,calc(100% - 64px));min-height:650px;margin:0 auto;padding:72px 0 88px;display:grid;grid-template-columns:minmax(0,1fr) 520px;align-items:center;gap:90px}
.swap-intro{padding-left:4px}.swap-intro h1{margin:0;font-size:clamp(54px,5vw,76px);line-height:.98;font-weight:600;letter-spacing:-.045em}.swap-intro h1 span{color:#c8cdd0}.swap-benefits{display:flex;align-items:center;gap:13px;margin:30px 0 0;color:#bec3c5;font-size:17px;font-weight:500}.swap-benefits i{width:3px;height:3px;border-radius:50%;background:#62696c}.swap-account-note{max-width:610px;margin:28px 0 0;color:var(--swap-muted);font-size:15px;line-height:1.65}
.swap-card{padding:30px 32px 28px;border:1px solid var(--swap-line);border-radius:22px;background:linear-gradient(145deg,rgba(21,25,27,.96),rgba(5,7,8,.98));box-shadow:0 28px 80px rgba(0,0,0,.36)}.swap-card-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}.swap-card-head h2{margin:0;font-size:25px;line-height:32px;font-weight:650;letter-spacing:-.02em}.swap-card-head span{padding:4px 8px;border-radius:5px;background:var(--swap-accent);color:#0b2024;font-size:10px;font-weight:800}
.swap-card form{position:relative}.swap-field{display:block;min-height:132px;padding:16px;border-radius:14px;background:var(--swap-field);border:1px solid transparent;transition:border-color .16s}.swap-field:focus-within{border-color:#4c5559}.swap-label{display:block;color:#c8ccce;font-size:13px}.swap-field-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:13px}.swap-token{display:flex;align-items:center;gap:9px;flex:none}.swap-token i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#26a17b;color:#fff;font-style:normal;font-size:14px;font-weight:800}.swap-token i.usdc{background:#2775ca}.swap-token b{font-size:18px}.swap-field input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:#fff;text-align:right;font-size:30px;line-height:38px;font-weight:550}.swap-field input::placeholder{color:#5d6366}.swap-field small{display:flex;justify-content:flex-end;gap:6px;margin-top:8px;color:var(--swap-muted);font-size:12px}.swap-field small b{font-weight:500}.swap-field small button{padding:0;border:0;background:none;color:var(--swap-accent);font-size:12px;font-weight:700}
.swap-direction{position:relative;z-index:2;display:grid;place-items:center;width:48px;height:48px;margin:-10px auto;border:7px solid #080a0b;border-radius:50%;background:#191d1f;color:#fff}.swap-direction:hover{background:#293033}.swap-direction svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.swap-rate{display:flex;justify-content:space-between;gap:16px;margin:20px 2px 18px;color:var(--swap-muted);font-size:13px}.swap-rate b{color:#c8ccce;font-weight:500}.swap-submit{width:100%;height:56px;border:0;border-radius:28px;background:#f7f8f8;color:#101314;font-size:15px;font-weight:700}.swap-submit:not(:disabled):hover{background:var(--swap-accent)}.swap-submit:disabled{background:#262a2c;color:#73797c;cursor:not-allowed}.swap-status{min-height:18px;margin:12px 4px 0;color:var(--swap-muted);font-size:12px;text-align:center}.swap-status.error{color:#ff7186}.swap-status.success{color:#6ce2ba}
@media(max-width:1000px){.swap-shell{grid-template-columns:1fr;gap:45px;padding-top:48px}.swap-intro{text-align:center}.swap-benefits{justify-content:center}.swap-account-note{margin-left:auto;margin-right:auto}.swap-card{width:min(520px,100%);margin:auto}}
@media(max-width:620px){.swap-shell{width:calc(100% - 28px);padding:34px 0 58px}.swap-intro h1{font-size:42px}.swap-benefits{flex-wrap:wrap;font-size:13px}.swap-account-note{font-size:14px}.swap-card{padding:22px 16px;border-radius:17px}.swap-field{min-height:124px}.swap-field input{font-size:25px}}