/* Shared profile frames wrap the ID itself, leaving rank, badges and score aligned. */
.thread-profile-frame { display:inline-block; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; vertical-align:middle; }
.thread-profile-frame:not([data-frame="none"]) { padding:4px 6px; border:2px solid transparent; border-radius:8px; color:#f2f8ff; font-weight:750; line-height:1.4; }
.thread-profile-frame[data-frame="circuit"] { border-color:#61f1ff; border-radius:3px 10px; background:#092631; box-shadow:inset 0 0 8px #25dfff30; }
.thread-profile-frame[data-frame="prism"] { background:linear-gradient(#17122c,#17122c) padding-box,linear-gradient(115deg,#65f3ff,#af83ff,#ff71d8) border-box; }
.thread-profile-frame[data-frame="architect"] { border-color:#ffbb68; border-style:double; border-width:3px; border-radius:3px; background:#2a1c16; }
.thread-profile-frame[data-frame="challenger"] { background:linear-gradient(#21142c,#21142c) padding-box,repeating-linear-gradient(135deg,#ff8ddf 0 6px,#9652cd 6px 12px) border-box; }
.thread-profile-frame[data-frame="champion"] { background:linear-gradient(#291e0d,#291e0d) padding-box,linear-gradient(150deg,#fff5c8,#b57b1d,#ffe398,#fff9db) border-box; color:#ffe8a0; box-shadow:0 0 8px #ffd25030; }
.thread-profile-frame[data-frame="cosmic"] { border-radius:12px 3px; background:radial-gradient(circle at 18% 25%,#fff9 0 1px,transparent 1.5px),radial-gradient(circle at 82% 72%,#b8ffff 0 1px,transparent 1.5px),linear-gradient(120deg,#172455,#351641) padding-box; border-color:#ce9fff; box-shadow:inset 0 0 9px #bd7aff35; }
.unlockables-entry { display:block; width:100%; min-height:52px; margin:16px 0 22px; padding:12px; border:1px solid #ffade7; border-radius:15px; background:linear-gradient(110deg,#af80ff,#f477d6); box-shadow:0 4px 0 #70317d; color:#11142b; font:900 14px/1.4 Inter,system-ui,sans-serif; letter-spacing:1px; text-align:center; }
#unlockables .guide-title { max-width:calc(100% - 92px); padding:10px 12px; font-size:clamp(11px,3.3vw,16px); letter-spacing:1px; }
.unlockable-count { margin:0 0 14px; text-align:center; color:#ffe09a; font-size:13px; }
.equipped-preview { padding:14px; margin:14px 0 18px; border:1px solid #6adfff65; border-radius:18px; background:radial-gradient(ellipse at 50% 20%,#203457,#070e20 80%); text-align:center; }
.equipped-preview small { display:block; color:#b8c9e4; font-size:10px; font-weight:850; letter-spacing:1.5px; }
.equipped-preview svg { display:block; width:100%; height:82px; }
.preview-laser { fill:none; stroke:var(--laser-preview); stroke-width:4; filter:drop-shadow(0 0 5px var(--laser-preview)); }
.preview-tracker { fill:none; stroke:var(--tracker-preview); stroke-width:5; filter:drop-shadow(0 0 5px var(--tracker-preview)); }
.cosmetic-tabs { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.cosmetic-tabs button { width:100%; min-width:0; min-height:46px; margin:0; padding:8px 2px; border:1px solid #7c88b2; border-radius:12px; background:#101a30; color:#d8e6fb; font:800 12px Inter,system-ui,sans-serif; }
.cosmetic-tabs button[aria-pressed="true"] { border-color:#ffb4ed; background:#d41aa8; color:#fff; }
.unlockable-heading { margin:20px 0 12px; color:#fff; font:850 16px Inter,system-ui,sans-serif; }
.unlockable-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cosmetic-choice { display:flex; flex-direction:column; align-items:stretch; min-width:0; margin:0; padding:10px; border:1px solid #526083; border-radius:16px; background:linear-gradient(140deg,#15233a,#101326); color:#eff7ff; text-align:left; font-family:Inter,system-ui,sans-serif; cursor:pointer; box-shadow:none; letter-spacing:0; }
.cosmetic-choice[aria-pressed="true"] { border-color:#77ffe0; box-shadow:inset 0 0 0 1px #77ffe04a; }
.cosmetic-choice[aria-disabled="true"] { cursor:default; }
/* Keep tap feedback visible even when refreshing the preview rebuilds its card. */
.cosmetic-card .cosmetic-choice { transition:transform 110ms ease, border-color 110ms ease; }
.cosmetic-card .cosmetic-choice:active { transform:translateY(1px) scale(.985); border-color:#dfcaff; }
.cosmetic-choice[data-previewing="true"] { border-color:#b89ae8; box-shadow:inset 0 0 0 1px #b89ae830; }
.cosmetic-choice[data-previewing="true"] .cosmetic-state { background:#403053; color:#efdcff; }
.cosmetic-choice.preview-tapped { animation:cosmetic-preview-tap 320ms ease-out; }
@keyframes cosmetic-preview-tap { from { border-color:#eadbff; box-shadow:inset 0 0 0 1px #d4b6ff80,0 0 12px #af80ff40; } }
@media(prefers-reduced-motion:reduce) {
  .cosmetic-card .cosmetic-choice { transition:none; animation:none; }
  .cosmetic-card .cosmetic-choice:active { transform:none; }
}
.reduced-motion .cosmetic-card .cosmetic-choice { transition:none; animation:none; }
.reduced-motion .cosmetic-card .cosmetic-choice:active { transform:none; }

.cosmetic-choice strong { margin:8px 0; font-size:14px; color:#fff; }
.cosmetic-detail { flex:1; color:#c1cde2; font-size:11px; line-height:1.5; }
.cosmetic-progress { margin-top:8px; color:#c8b7ff; font-size:10px; line-height:1.4; }
.cosmetic-state { margin-top:12px; padding:7px 4px; border-radius:7px; background:#252d47; color:#bfcee5; font-size:10px; font-weight:900; letter-spacing:.7px; text-align:center; }
.cosmetic-choice[aria-disabled="false"] .cosmetic-state { background:#2e2348; color:#eed5ff; }
.cosmetic-choice[aria-pressed="true"] .cosmetic-state { background:#183e3d; color:#8affdc; }
.cosmetic-sample { display:grid; place-items:center; min-height:68px; border-radius:9px; background:#070d1a; }
.cosmetic-sample svg { width:100%; height:68px; overflow:visible; }
.cosmetic-sample .thread-profile-frame { font-size:10px; letter-spacing:.3px; }
.sample-guide { fill:none; stroke:#72f6ff44; stroke-width:2; }
.sample-color { fill:none; stroke:var(--swatch); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 4px var(--swatch-glow)); }
.sample-palette { background:linear-gradient(110deg,#12353b,#24223c,#331d32); }
.cosmetic-choice:focus-visible,.cosmetic-tabs button:focus-visible,.unlockables-entry:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.cosmetic-feedback { min-height:18px; margin:12px 0 0; color:#9fffe6; text-align:center; font-size:12px; }
.achievement-body p.achievement-reward,.milestone-copy small.milestone-reward { color:#ffdda0; }
@media(max-width:380px) { .cosmetic-choice { padding:8px; } .thread-profile-frame:not([data-frame="none"]) { padding:3px; } }

/* Collection cards keep preview and purchase as separate, accessible actions. */
.cosmetic-card { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cosmetic-card .cosmetic-choice { flex:1; width:100%; }
.cosmetic-buy,.restore-purchases { min-height:44px; border:1px solid #f4b2ec; border-radius:11px; background:linear-gradient(110deg,#bb8df7,#f47bcc); color:#100e27; font:900 11px Inter,system-ui,sans-serif; letter-spacing:.4px; }
.cosmetic-buy:disabled { background:#182237; border-color:#59627e; color:#c0cde4; opacity:1!important; }
.restore-purchases { display:block; width:100%; margin:14px 0; background:#142239; color:#b7f4ff; border-color:#76cbd9; }
.material-sample { width:100%; height:80px; object-fit:contain; }
#material-preview { display:block; width:100%; height:110px; object-fit:contain; }
#material-preview[hidden],.equipped-preview svg[hidden] { display:none; }
.preview-shape-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 16px; color:#c3d3eb; font-size:12px; }
.preview-shape-label select { min-height:40px; padding:7px 12px; border:1px solid #8794b6; border-radius:10px; background:#111b31; color:#fff; }
.cosmetic-buy:focus-visible,.restore-purchases:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* Additional collection frames. Catalog IDs are shared with the service. */
.thread-profile-frame[data-frame="aurora"]{color:#83ffdf;border-color:#83ffdf;background:#111c30;background:linear-gradient(#171c32,#171c32) padding-box,linear-gradient(120deg,#83ffdf,#b38cff,#83ffdf) border-box;border-color:transparent;}
.thread-profile-frame[data-frame="solar"]{color:#ffc373;border-color:#ffc373;background:#111c30;border-radius:1px 12px;}
.thread-profile-frame[data-frame="lunar"]{color:#e7ecff;border-color:#e7ecff;background:#111c30;border-style:double;border-width:3px;}
.thread-profile-frame[data-frame="ember"]{color:#ffad71;border-color:#ffad71;background:#111c30;border-style:dashed;}
.thread-profile-frame[data-frame="frost"]{color:#b2f9ff;border-color:#b2f9ff;background:#111c30;border-radius:3px;box-shadow:inset 0 0 0 2px #7c9fdc77;}
.thread-profile-frame[data-frame="jade"]{color:#9bf3bf;border-color:#9bf3bf;background:#111c30;border-style:double;border-width:3px;}
.thread-profile-frame[data-frame="amethyst"]{color:#dec0ff;border-color:#dec0ff;background:#111c30;border-radius:3px;box-shadow:inset 0 0 0 2px #996adf77;}
.thread-profile-frame[data-frame="cobalt"]{color:#92bdff;border-color:#92bdff;background:#111c30;border-radius:1px 12px;}
.thread-profile-frame[data-frame="rose-gold"]{color:#ffd0ad;border-color:#ffd0ad;background:#111c30;background:linear-gradient(#171c32,#171c32) padding-box,linear-gradient(120deg,#ffd0ad,#d887a8,#ffd0ad) border-box;border-color:transparent;}
.thread-profile-frame[data-frame="hex-grid"]{color:#91f6e8;border-color:#91f6e8;background:#111c30;background:repeating-linear-gradient(45deg,transparent 0 5px,#3b9fac44 5px 6px),repeating-linear-gradient(-45deg,#111c30 0 5px,#3b9fac44 5px 6px);}
.thread-profile-frame[data-frame="checker"]{color:#eaf9ff;border-color:#eaf9ff;background:#111c30;background:linear-gradient(#151b30,#151b30) padding-box,repeating-conic-gradient(#eaf9ff 0 25%,#8a69ba 0 50%) 0/8px 8px border-box;border-color:transparent;}
.thread-profile-frame[data-frame="orbit"]{color:#b5dcff;border-color:#b5dcff;background:#111c30;border-radius:99px;}
.thread-profile-frame[data-frame="laurel"]{color:#d3efac;border-color:#d3efac;background:#111c30;border-radius:18px 3px;background:linear-gradient(120deg,#87974c44,#121f28);border-style:double;border-width:3px;}
.thread-profile-frame[data-frame="royal"]{color:#f1d899;border-color:#f1d899;background:#111c30;border-style:double;border-width:3px;}
.thread-profile-frame[data-frame="pixel"]{color:#9effe0;border-color:#9effe0;background:#111c30;border-radius:0;box-shadow:2px 2px 0 #ba91ff;}
.thread-profile-frame[data-frame="art-deco"]{color:#fae4aa;border-color:#fae4aa;background:#111c30;border-radius:1px;border-style:double;border-width:3px;box-shadow:inset 3px 0 #b89761,inset -3px 0 #b89761;}
.thread-profile-frame[data-frame="starlight"]{color:#e1f5ff;border-color:#e1f5ff;background:#111c30;background:radial-gradient(circle at 20% 22%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 82% 75%,#e1f5ff 0 1px,transparent 1.5px),#141c35;}
.thread-profile-frame[data-frame="carbon"]{color:#e2e5ee;border-color:#e2e5ee;background:#111c30;background:repeating-linear-gradient(45deg,transparent 0 5px,#66738a44 5px 6px),repeating-linear-gradient(-45deg,#111c30 0 5px,#66738a44 5px 6px);}
.thread-profile-frame[data-frame="lightning"]{color:#c0efff;border-color:#c0efff;background:#111c30;border-radius:0 10px;background:linear-gradient(#141c35,#141c35) padding-box,repeating-linear-gradient(135deg,#c0efff 0 5px,#7194ff 5px 10px) border-box;border-color:transparent;}