.confirmation-hero { display:flex; align-items:center; gap:24px; margin-bottom:40px; }
.confirmation-hero h1 { margin:0 0 8px; font:800 clamp(38px,5vw,62px)/1 Outfit; letter-spacing:-1.8px; }
.confirmation-hero p:not(.eyebrow) { color:#9cafc2; }
.success-mark { flex:0 0 auto; display:grid; place-items:center; width:78px; height:78px; border-radius:50%; color:#07111f; background:var(--lime); font-size:38px; font-weight:800; box-shadow:0 0 45px rgba(142,229,46,.18); }
.confirmation-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:25px; align-items:start; }
.confirmation-layout > section { display:grid; gap:22px; }
.confirmation-layout aside { position:sticky; top:100px; display:grid; gap:18px; }
.trade-summary { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:25px; }
.trade-summary > .item-photo { width:150px; height:130px; }
.trade-summary h2 { margin:9px 0 5px; }
.trade-summary p { margin:0 0 8px; }
.trade-summary > div > strong { color:var(--lime); }
.label-heading { display:flex; justify-content:space-between; align-items:start; }
.label-heading > span { padding:6px 9px; border-radius:999px; color:#ffca94; background:rgba(255,145,55,.1); font-size:9px; font-weight:800; text-transform:uppercase; }
.prototype-warning { margin:14px 0 22px; padding:11px 13px; border-radius:10px; color:#e8b883; background:rgba(255,145,55,.08); font-size:10px; }
.label-content { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:30px; }
.fake-qr { width:190px; aspect-ratio:1; display:grid; grid-template-columns:repeat(13,1fr); gap:2px; padding:10px; background:white; border-radius:10px; }
.fake-qr i { background:white; }
.fake-qr i.on { background:#07111f; }
.upload-zone { min-height:150px; margin:18px 0; display:grid; place-content:center; gap:5px; text-align:center; border:1px dashed #36546f; border-radius:16px; color:#b9ccdc; background:#071522; cursor:pointer; }
.upload-zone:hover { border-color:#78c7f3; }
.upload-zone span { color:#78c7f3; font-size:30px; }
.upload-zone small { color:#72889d; font-size:10px; }
.upload-zone input { display:none; }
.extras-preview { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.extra-thumb { width:95px; padding:8px; border:1px solid var(--line); border-radius:12px; background:#07131f; }
.extra-thumb img { width:100%; height:62px; object-fit:cover; border-radius:7px; }
.extra-thumb span { display:block; margin-top:5px; overflow:hidden; color:#8fa5ba; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.save-note { font-size:11px; }
.next-card ol { display:grid; gap:20px; margin:22px 0; padding:0; list-style:none; counter-reset:next; }
.next-card li { position:relative; padding-left:37px; display:grid; gap:4px; counter-increment:next; }
.next-card li::before { content:counter(next); position:absolute; left:0; top:0; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#07111f; background:var(--lime); font-size:11px; font-weight:800; }
.next-card li b { font-size:13px; }
.next-card li span { color:#8096ac; font-size:11px; line-height:1.5; }
.packing-card a { color:#78c7f3; font-size:12px; }
@media(max-width:900px){.confirmation-layout{grid-template-columns:1fr}.confirmation-layout aside{position:static}.label-content{grid-template-columns:1fr}.fake-qr{width:170px}.trade-summary{grid-template-columns:110px 1fr}.trade-summary > .item-photo{width:110px;height:100px}}
@media(max-width:520px){.confirmation-hero{align-items:flex-start;flex-direction:column}.success-mark{width:60px;height:60px}.trade-summary{grid-template-columns:1fr}.trade-summary > .item-photo{width:150px}.label-heading{flex-direction:column;gap:10px}}
.confirmation-mark {position:relative;flex:0 0 94px;width:94px;height:94px;display:grid;place-items:center;}
.confirmation-mark img {width:84px;height:84px;object-fit:contain;}
.confirmation-tick {position:absolute;right:0;bottom:0;width:32px;height:32px;display:grid;place-items:center;background:var(--lime);color:#07111f;border:3px solid #07111f;border-radius:50%;}
.confirmation-tick svg {width:22px;height:22px;}
.confirmation-hero[data-received="true"] .confirmation-tick path {stroke-dasharray:24;stroke-dashoffset:0;animation:trade-tick-draw 420ms ease-out both;}
.confirmation-hero #confirmation-guidance {font-size:14px;}
.next-card #confirmation-next-title {font:800 26px/1.2 Outfit;margin:12px 0;}
.next-card #confirmation-next-copy {color:#b6c6d6;line-height:1.65;margin-bottom:22px;}
.confirmation-help {display:block;margin-top:16px;color:#78c7f3;font-size:14px;}
@keyframes trade-tick-draw {from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.confirmation-hero[data-received="true"] .confirmation-tick path{animation:none}}
@media(max-width:900px){.confirmation-layout > aside{order:-1}.confirmation-layout .label-content{grid-template-columns:44px minmax(0,1fr);gap:14px}.confirmation-layout .postage-waiting{font-size:32px;min-height:0}}
@media(max-width:520px){.confirmation-hero{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px}.confirmation-mark{width:64px;height:64px}.confirmation-mark img{width:60px;height:60px}.confirmation-hero h1{font-size:32px;letter-spacing:-.8px}.confirmation-tick{width:27px;height:27px}.confirmation-tick svg{width:19px;height:19px}.confirmation-hero .eyebrow{font-size:12px}.confirmation-hero p{overflow-wrap:anywhere}}