.coa{--coa-ice: #9cc9ff;--coa-gold: #f3c452;--coa-gold-hi: #ffe7a0;position:relative;display:flex;flex-direction:column;gap:.5rem;border-radius:1rem;padding:.9rem;background:linear-gradient(#0c101aeb,#0c101aeb) padding-box,linear-gradient(135deg,#ffffff47,#ffffff0d 40%,#f3c45259) border-box;border:1px solid transparent}.coa .coa__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 .15rem .15rem}.coa .coa__title{margin:0;font-size:.95rem;font-weight:600;letter-spacing:.01em;color:#fff}.coa .coa__only{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--coa-gold-hi);white-space:nowrap}.coa .coa__only:before{content:"";width:.45rem;height:.45rem;border-radius:999px;background:var(--coa-gold)}.coa .coa__row{position:relative;display:grid;grid-template-columns:4.5rem 1fr auto;align-items:center;gap:.85rem;border-radius:.8rem;padding:.75rem;background:#ffffff09;border:1px solid rgb(255 255 255 / .08);transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}.coa .coa__row.is-on{background:#9cc9ff12;border-color:#9cc9ff73;box-shadow:0 0 0 1px #9cc9ff1f,0 10px 30px -18px #9cc9ff99}.coa .coa__row--gold.is-on{background:#f3c45212;border-color:#f3c45280;box-shadow:0 0 0 1px #f3c4521f,0 10px 30px -18px #f3c45299}.coa .coa__art{display:flex;align-items:center;justify-content:center;width:4.5rem;height:3.6rem}.coa .coa__pass-art{width:4.5rem;height:3.2rem;border-radius:.55rem;object-fit:cover;box-shadow:0 0 0 1px #ffffff24,0 8px 18px -10px #9cc9ffb3}.coa .coa__badge{width:3.2rem;height:3.2rem}.coa .coa__body{min-width:0}.coa .coa__name{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;font-size:.95rem;font-weight:600;color:#fff}.coa .coa__tag{font-size:.75rem;font-weight:600;background:linear-gradient(100deg,#fff3c8,#f3c452 55%,#e0a93a);-webkit-background-clip:text;background-clip:text;color:transparent}.coa .coa__line{margin:.2rem 0 0;font-size:.8rem;line-height:1.4;color:#ffffffa8}.coa .coa__price{margin:.4rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;font-variant-numeric:tabular-nums}.coa .coa__was{font-size:.8rem;color:#ffffff6b}.coa .coa__now{font-size:1rem;font-weight:600;color:#fff}.coa .coa__per{font-size:.75rem;color:#ffffff8c}.coa .coa__urgency{margin:.2rem 0 0;font-size:.72rem;line-height:1.35;color:#ffe7a0d1}.coa .coa__add{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.35rem;min-width:5.4rem;justify-content:center;border-radius:999px;padding:.5rem .95rem;font-size:.85rem;font-weight:600;color:#0b111c;background:#e8f1fd;box-shadow:inset 0 -1px #00000026,0 6px 18px -8px #9cc9ffcc;transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease;cursor:pointer}.coa .coa__row--gold .coa__add{background:#f3c452;box-shadow:inset 0 -1px #78460059,0 6px 18px -8px #f3c452e6}.coa .coa__add:hover:not(:disabled){transform:translateY(-1px)}.coa .coa__add:active:not(:disabled){transform:translateY(0) scale(.97)}.coa .coa__add:focus-visible{outline:2px solid #fff;outline-offset:2px}.coa .coa__add:disabled{opacity:.55;cursor:default}.coa .coa__add[aria-pressed=true]{color:#fff;background:#ffffff14;box-shadow:inset 0 0 0 1px #9cc9ff8c}.coa .coa__row--gold .coa__add[aria-pressed=true]{color:var(--coa-gold-hi);background:#f3c4521a;box-shadow:inset 0 0 0 1px #f3c45299}.coa .coa__add-sweep{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .85) 50%,transparent 70%);translate:-120% 0;animation:coa-sweep 3.8s ease-in-out 3;pointer-events:none}.coa .coa__row--gold .coa__add-sweep{animation-delay:1.9s}.coa .coa__add[aria-pressed=true] .coa__add-sweep{display:none}.coa .coa__add>:not(.coa__add-sweep){position:relative}.coa .coa__foot{margin:.15rem .15rem 0;font-size:.72rem;line-height:1.4;color:#ffffff80}.coa .coa__foot.is-on{color:#ffffffc7}@keyframes coa-sweep{0%{translate:-120% 0}35%{translate:120% 0}to{translate:120% 0}}@media (max-width: 420px){.coa .coa__row{grid-template-columns:3.4rem 1fr;grid-template-areas:"art body" "add add"}.coa .coa__art{grid-area:art;width:3.4rem}.coa .coa__pass-art{width:3.4rem;height:2.6rem}.coa .coa__body{grid-area:body}.coa .coa__add{grid-area:add;width:100%}}@media (prefers-reduced-motion: reduce){.coa .coa__add-sweep{animation:none}.coa .coa__add-sweep{display:none}}
