@font-face{font-family:MSPInterface;src:url('/msp/99.0.6/fonts/bluehighway/bluehigh.ttf') format('truetype');font-display:swap}
@font-face{font-family:MSPInterface;src:url('/msp/99.0.6/fonts/bluehighway/bluebold.ttf') format('truetype');font-weight:700;font-display:swap}
#cosmetics-panel{box-sizing:border-box;width:min(780px,94vw);height:min(590px,90vh);padding:0;color:#351153;background:#fcf8ff;border:4px solid #42205f;border-radius:22px;box-shadow:0 5px 0 #210c34,0 12px 45px #0006;font:22px MSPInterface,'Trebuchet MS',Arial,sans-serif}
#cosmetics-panel[open]{display:flex;flex-direction:column}#cosmetics-panel::backdrop{background:#0008}
#cosmetics-panel header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:14px 22px;background:radial-gradient(circle at 20% 20%,#ffffff20 0 14px,transparent 15px),linear-gradient(#f17bce,#cc278b 65%,#951461);border-bottom:3px solid #54205b;color:white}
#cosmetics-panel header small{font-size:16px;letter-spacing:2px}#cosmetics-panel h1{font-size:34px;line-height:1.1;margin:3px 0;text-shadow:0 2px #94215f}
#cosmetics-panel nav{display:flex;gap:8px;flex-shrink:0;padding:12px 20px 8px;background:#e5d2f2}
#cosmetics-panel>p{flex-shrink:0;font-size:20px;padding:9px 20px;margin:0;background:#eee4f7;border-bottom:1px solid #c5a8da}
#cosmetics-panel main{flex:1;min-height:0;overflow:auto;padding:18px 20px;background:radial-gradient(circle at 100% 100%,#edc2e7,transparent 55%),#fffafc}
#cosmetics-panel button{background:linear-gradient(#f478d2,#d32b9c 52%,#b71c83);border:2px solid #70205f;border-radius:12px;color:white;font:700 22px MSPInterface,'Trebuchet MS',Arial,sans-serif;padding:7px 18px;cursor:pointer;box-shadow:inset 0 1px #ffdcf4,0 2px #55215c;min-height:40px}
#cosmetics-panel button:hover{background:linear-gradient(#ff9fe5,#e64ab3 52%,#c52b91)}#cosmetics-panel button.selected{background:linear-gradient(#b897e6,#8054b6);border-color:#4c2573}
#cosmetics-panel button:focus-visible{outline:3px solid #ffc72c;outline-offset:3px}#cosmetics-panel button:disabled{opacity:.6;cursor:wait}
#cosmetics-panel .cosmetic-close{border-radius:50%;width:37px;height:37px;min-height:0;padding:0;line-height:29px;border:2px solid #771616;background:linear-gradient(#ff7777,#df2222 55%,#aa1515);font:bold 34px Arial;text-shadow:0 1px #7e1414;box-shadow:inset 0 1px #ffcbcb;align-self:flex-start}
.cosmetic-preview{text-align:center;font:bold 34px Arial,sans-serif;min-height:44px;padding:18px 12px;margin:10px 0;background:linear-gradient(#aa83cc,#8250af);border:2px solid #6b358c;border-radius:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 2px #311348}
.cosmetic-grid{display:grid;gap:14px;margin:18px 0}.cosmetic-owned{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}.cosmetic-owned article{background:#f2def3;border:2px solid #d296ce;padding:14px;border-radius:16px}.cosmetic-owned article p{margin:10px 0}.cosmetic-owned .cosmetic-preview{font-size:28px}
#cosmetics-panel main>button+button{margin-left:10px}
.studio-purchase{flex-shrink:0;background:#e6d4f1;border-top:2px solid #bd8bcf;padding:14px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.studio-purchase p{flex:1;margin:0}#cosmetics-panel .studio-purchase button:first-of-type{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(#b095ff,#7750ec 55%,#5129b7);border-color:#3c1b84;font-size:26px;min-width:150px;justify-content:center}
.cosmetic-diamond{display:block;width:30px;height:25px;object-fit:contain}.colour-swatch{height:42px;border:2px solid #85549f;border-radius:10px;margin:14px 0}.cosmetic-error{color:#971643;background:#ffe1ec;padding:12px 20px;margin:8px 0}
@media(max-width:600px){#cosmetics-panel{height:92vh;font-size:20px}#cosmetics-panel header{padding:12px 16px}#cosmetics-panel h1{font-size:29px}#cosmetics-panel main{padding:12px}#cosmetics-panel button{font-size:20px;padding:7px 12px}.studio-purchase p{flex-basis:100%}.cosmetic-preview{font-size:27px}}