#exchange{overflow:auto;align-items:flex-start;padding:24px;box-sizing:border-box}
.exchange-shell{width:min(1180px,100%);margin:0 auto;color:#c8dcea;background:rgba(5,15,24,.96);padding:28px;box-sizing:border-box}
.exchange-header{display:flex;justify-content:space-between;gap:24px;align-items:center;border-bottom:1px solid #284553;padding-bottom:18px}
.exchange-header h2{font-size:32px;letter-spacing:.08em;margin:8px 0 0}
.exchange-header span,#exchange-kind{font-size:12px;letter-spacing:.14em;color:#85a6b5}
.exchange-header>div:last-child{display:flex;align-items:center;gap:18px}
#exchange-wallet{color:#ffd166;font-size:14px}#exchange-wallet-note{font-size:13px;color:#9db5c2}
.exchange-filters,.exchange-modes{display:flex;gap:6px;flex-wrap:wrap}
.exchange-filters button,.exchange-modes button,.exchange-secondary button{background:transparent;border:0;border-bottom:2px solid transparent;color:#aac4d1;min-height:44px;padding:10px 16px;font:inherit;cursor:pointer}
.exchange-filters button[aria-pressed=true],.exchange-modes button[aria-pressed=true]{color:#76f1ff;border-bottom-color:#76f1ff;background:#112831}
.exchange-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;margin:12px 0 24px}
#exchange-stage{background:radial-gradient(ellipse at 50% 45%,#14334280,transparent 65%),url('../assets/premium/hangar-pro.svg') center/contain no-repeat;min-width:0}
#exchange-preview{width:100%;max-height:390px;object-fit:contain;display:block}
.exchange-modes{justify-content:center}.exchange-modes button{font-size:12px}
#exchange-name{font-size:38px;letter-spacing:.04em;margin:8px 0 12px;line-height:1.1}
#exchange-description{font-size:16px;line-height:1.5;max-width:42ch}
#exchange-price{font-size:23px;color:#ffd166;display:block;margin:20px 0 8px}
#exchange-purchase-note{font-size:14px;line-height:1.5;min-height:42px}
.exchange-detail>.mbtn{display:block;width:100%;margin:8px 0;min-height:46px}
.exchange-secondary{display:flex;justify-content:space-between;gap:8px}.exchange-secondary button{font-size:12px;padding:8px 0}
#exchange-status{font-size:13px;min-height:20px;color:#9defd0}
.exchange-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.exchange-items button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:160px;padding:10px;background:#0a1a25;border:1px solid #284553;color:#c8dcea;cursor:pointer;font:inherit}
.exchange-items button[aria-pressed=true]{border-color:#67e5f6;background:#12303b;box-shadow:inset 0 -3px #67e5f6}
.exchange-items img{object-fit:contain;max-width:100%}.exchange-items strong{font-size:13px;text-align:center}.exchange-items span{font-size:12px;color:#ffd166}
.exchange-footer{display:flex;gap:20px;align-items:center;margin-top:24px;border-top:1px solid #284553;padding-top:18px}.exchange-footer span{flex:1;font-size:13px}
.exchange-footer .mbtn{min-width:110px}#exchange button:focus-visible,.pilot-showcase-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
#exchange button:disabled{opacity:.5;cursor:default}
#exchange-pilot{background:#081823;color:#d5e7ef;border:1px solid #568394;width:min(540px,85vw);max-height:80vh;padding:24px}
#exchange-pilot::backdrop{background:#020810d9}.exchange-pilot-content>div{display:flex;align-items:center;gap:20px}.exchange-pilot-content img{width:100px;height:100px;object-fit:contain}
.exchange-pilot-badge{width:32px;height:32px;vertical-align:middle;margin-right:8px}.pilot-showcase-link{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;padding:4px 0;text-decoration:underline;text-decoration-color:#365c6c}
#workshop-receipt{text-align:center;color:#9defd0;font-size:14px}
@media(max-width:900px){.exchange-shell{padding:18px}.exchange-layout{gap:18px}.exchange-header>div:last-child{flex-direction:column;align-items:flex-end}.exchange-items{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#exchange{padding:8px}.exchange-layout{grid-template-columns:1fr}.exchange-header{align-items:flex-start}.exchange-header h2{font-size:23px}.exchange-header{gap:12px}.exchange-header .mbtn{font-size:11px;padding:8px}.exchange-items{grid-template-columns:repeat(2,minmax(0,1fr))}#exchange-name{font-size:30px}.exchange-footer{flex-wrap:wrap}.exchange-footer span{flex-basis:100%;order:3}}
@media(prefers-reduced-motion:reduce){#exchange *{scroll-behavior:auto!important}}


#exchange [hidden]{display:none!important}

#exchange-goal{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #284553;font-size:14px}
#exchange-goal>span{flex:1}
#exchange progress,#workshop-receipt progress{accent-color:#7be5ed;max-width:180px;height:7px}
.exchange-goal-link{background:none;border:0;color:#7be5ed;font:inherit;cursor:pointer;min-height:44px}
.exchange-earning{font-size:14px;color:#abc5d3;margin:10px 0}
.exchange-earning summary{cursor:pointer;min-height:44px;display:list-item;align-content:center}
.exchange-earning p{line-height:1.65;max-width:78ch;padding-bottom:10px}
#workshop-receipt{border-top:1px solid #36525f;padding:14px 10px;margin:14px auto;max-width:640px}
#workshop-receipt strong{color:#b9f7dc}#workshop-receipt p{margin:8px 0;font-size:14px}
#workshop-receipt progress{display:block;width:100%;max-width:none;margin:10px 0}
#workshop-receipt .mbtn{min-height:44px}

#cosmetic-campaigns {padding:20px 0;border-block:1px solid #284657;margin:18px 0;}
#cosmetic-campaigns h3 {font-size:16px;letter-spacing:.12em;}
.campaign-reward {display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 0;}
.campaign-reward > div {flex:1;min-width:220px;}
.campaign-reward p {font-size:14px;line-height:1.5;margin:6px 0;}
.campaign-reward > p {flex-basis:100%;}
.campaign-reward .mbtn {width:auto;min-width:180px;min-height:44px;margin:0;}