
/* CommunityHub Cosmetics Foundation v1.0.150 */
.ch-cosmetics{--ch-cos-surface:#ffffff;--ch-cos-surface-soft:#f6f8fb;--ch-cos-text:#172033;--ch-cos-muted:#687386;--ch-cos-border:rgba(70,82,104,.18);max-width:1120px;margin:0 auto;padding:18px;color:var(--ch-cos-text)}
.ch-cosmetics-hero,.ch-cosmetics-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.ch-cosmetics-hero{padding:24px;border:1px solid var(--ch-cos-border);border-radius:22px;background:var(--ch-cos-surface);box-shadow:0 14px 40px rgba(15,23,42,.06)}
.ch-cosmetics-kicker{display:block;margin-bottom:5px;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.ch-cosmetics h1,.ch-cosmetics h2,.ch-cosmetics h3{margin:0}
.ch-cosmetics-hero p,.ch-cosmetics-section-title p{margin:7px 0 0;color:var(--ch-cos-muted)}
.ch-cosmetics-owned-count{display:grid;place-items:center;min-width:86px;padding:13px 18px;border-radius:18px;border:1px solid var(--ch-cos-border);background:rgba(127,127,127,.06)}
.ch-cosmetics-owned-count strong{font-size:28px;line-height:1}
.ch-cosmetics-owned-count span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-top:5px}
.ch-cosmetics-equipped,.ch-cosmetics-preview-stage,.ch-cosmetics-inventory{margin-top:22px;padding:22px;border:1px solid var(--ch-cos-border);border-radius:22px;background:var(--ch-cos-surface)}
.ch-cosmetics-slot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}
.ch-cosmetics-slot{min-width:0;padding:12px;border:1px solid var(--ch-cos-border);border-radius:14px;background:rgba(127,127,127,.045)}
.ch-cosmetics-slot>span{display:block;font-size:11px;opacity:.7}
.ch-cosmetics-slot strong{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-cosmetics-slot button,.ch-cosmetic-card button{appearance:none;border:1px solid var(--ch-cos-border);border-radius:999px;background:rgba(127,127,127,.08);color:inherit;padding:7px 11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.ch-cosmetics-slot button{margin-top:8px}
.ch-cosmetics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.ch-cosmetic-card{overflow:hidden;border:1px solid var(--ch-cos-border);border-radius:18px;background:rgba(127,127,127,.035)}
.ch-cosmetic-card.is-equipped{box-shadow:0 0 0 2px rgba(36,146,255,.65)}
.ch-cosmetic-card.is-locked{opacity:.72}
.ch-cosmetic-card-preview{position:relative;display:grid;place-items:center;min-height:132px;padding:20px;overflow:hidden;background:linear-gradient(145deg,rgba(127,127,127,.06),rgba(127,127,127,.13))}
.ch-cosmetic-lock{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:rgba(0,0,0,.55)}
.ch-cosmetic-preview-avatar{position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;padding:7px}
.ch-cosmetic-preview-avatar img{display:block;width:60px!important;height:60px!important;border-radius:50%!important}
.ch-cosmetic-preview-surface{width:min(100%,190px);padding:16px;border-radius:15px;border:1px solid rgba(127,127,127,.22);background:var(--ch-cos-surface);text-align:center}
.ch-cosmetic-preview-surface span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.62}
.ch-cosmetic-preview-surface strong{display:block;margin-top:4px}
.ch-cosmetic-card-body{padding:15px}
.ch-cosmetic-card-meta,.ch-cosmetic-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ch-cosmetic-card-meta{font-size:11px;color:var(--ch-cos-muted)}
.ch-cosmetic-card h3{margin-top:8px}
.ch-cosmetic-card p{min-height:40px;margin:6px 0 14px;color:var(--ch-cos-muted);font-size:13px}
.ch-cosmetic-card-foot{font-size:11px;color:var(--ch-cos-muted)}
.ch-cosmetic-rarity{font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.ch-cosmetic-rarity--legendary{color:#d39b18}.ch-cosmetic-rarity--epic{color:#8b5cf6}.ch-cosmetic-rarity--rare{color:#1687d9}.ch-cosmetic-rarity--uncommon{color:#2f9e68}
.ch-cosmetic-locked-label{font-weight:800}
.ch-cosmetics-status{position:fixed;left:50%;bottom:86px;z-index:40;transform:translate(-50%,12px);padding:10px 14px;border-radius:999px;background:#111827;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:.18s ease}
.ch-cosmetics-status.is-visible{opacity:1;transform:translate(-50%,0)}
.ch-cosmetic-demo{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-top:16px}
.ch-cosmetic-demo-avatar{position:relative;display:grid;place-items:center;width:98px;height:98px;padding:11px;border-radius:50%}
.ch-cosmetic-demo-avatar img{width:76px!important;height:76px!important;border-radius:50%!important}
.ch-cosmetic-demo-card{padding:18px;border-radius:18px;border:1px solid var(--ch-cos-border);background:var(--ch-cos-surface)}
.ch-cosmetic-demo-card p{margin:5px 0 13px;color:var(--ch-cos-muted)}
.ch-cosmetic-demo-comment{padding:10px 12px;border-radius:13px;background:rgba(127,127,127,.06)}

/* Preview effects. Runtime surface application is Phase 1B. */
.ch-cosmetic-effect--solar-flare{box-shadow:0 0 0 3px #d88b1a,0 0 18px rgba(255,116,25,.8),0 0 34px rgba(255,196,61,.42);animation:chCosSolar 1.55s ease-in-out infinite alternate}
.ch-cosmetic-effect--electric-orbit{box-shadow:0 0 0 3px #58c9ff,0 0 22px rgba(76,174,255,.72);animation:chCosElectric 1.2s ease-in-out infinite alternate}
.ch-cosmetic-effect--gold-prestige{box-shadow:0 0 0 3px #cfae56,0 0 0 6px rgba(207,174,86,.22)}
.ch-cosmetic-effect--midnight-gold{background:linear-gradient(145deg,#131722,#202839)!important;border-color:rgba(207,174,86,.62)!important;box-shadow:inset 0 1px rgba(255,255,255,.04),0 0 0 1px rgba(207,174,86,.12)}
.ch-cosmetic-effect--cosmic{background:radial-gradient(circle at 20% 15%,rgba(93,80,255,.24),transparent 38%),linear-gradient(145deg,#121528,#1c1432)!important;box-shadow:0 0 24px rgba(119,91,255,.22);animation:chCosCosmic 3s ease-in-out infinite alternate}
.ch-cosmetic-effect--neon-circuit{border-color:rgba(43,187,255,.8)!important;box-shadow:0 0 0 1px rgba(43,187,255,.2),0 0 18px rgba(43,187,255,.3);animation:chCosNeon 2s ease-in-out infinite alternate}
.ch-cosmetic-effect--ember-edge{border-color:rgba(244,114,37,.75)!important;box-shadow:0 0 14px rgba(244,114,37,.24)}
.ch-cosmetic-effect--ember-whisper{border-color:rgba(235,112,45,.62)!important;box-shadow:inset 3px 0 rgba(235,112,45,.72)}
.ch-cosmetic-effect--frost-line{border-color:rgba(110,203,255,.62)!important;box-shadow:inset 3px 0 rgba(110,203,255,.72)}
.ch-cosmetic-effect--titanium{border-color:rgba(161,176,194,.72)!important;background:linear-gradient(145deg,rgba(161,176,194,.06),rgba(161,176,194,.16))!important}
@keyframes chCosSolar{to{box-shadow:0 0 0 3px #f5b942,0 0 26px rgba(255,94,20,.92),0 0 48px rgba(255,205,72,.5)}}
@keyframes chCosElectric{to{box-shadow:0 0 0 3px #9ee7ff,0 0 30px rgba(68,126,255,.82)}}
@keyframes chCosCosmic{to{filter:saturate(1.18);box-shadow:0 0 34px rgba(119,91,255,.38)}}
@keyframes chCosNeon{to{box-shadow:0 0 0 1px rgba(43,187,255,.32),0 0 28px rgba(43,187,255,.46)}}

@media(max-width:900px){.ch-cosmetics-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ch-cosmetics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ch-cosmetics{padding:10px}.ch-cosmetics-hero,.ch-cosmetics-section-title{align-items:flex-start;flex-direction:column}.ch-cosmetics-grid,.ch-cosmetics-slot-grid{grid-template-columns:1fr}.ch-cosmetic-demo{grid-template-columns:1fr}.ch-cosmetic-demo-avatar{margin:auto}}
@media(prefers-reduced-motion:reduce){.ch-cosmetics *{animation:none!important;transition:none!important}}


/* v1.0.150 — Cosmetics usability + authoritative dual-theme readability. */
body.ch-theme-dark .ch-cosmetics,
body.ch-theme-mode-dark .ch-cosmetics{
  --ch-cos-surface:#121c2b;
  --ch-cos-surface-soft:#172235;
  --ch-cos-text:#f4f7fb;
  --ch-cos-muted:#aeb9c9;
  --ch-cos-border:rgba(197,211,232,.16);
}
.ch-cosmetics :is(.ch-cosmetics-hero,.ch-cosmetics-equipped,.ch-cosmetics-preview-stage,.ch-cosmetics-inventory,.ch-cosmetics-slot,.ch-cosmetic-card,.ch-cosmetic-preview-surface,.ch-cosmetic-demo-card,.ch-cosmetic-demo-comment){color:var(--ch-cos-text)}
.ch-cosmetics :is(.ch-cosmetics-hero,.ch-cosmetics-equipped,.ch-cosmetics-preview-stage,.ch-cosmetics-inventory){background:var(--ch-cos-surface)!important}
.ch-cosmetics :is(.ch-cosmetics-slot,.ch-cosmetic-card,.ch-cosmetic-demo-comment){background:var(--ch-cos-surface-soft)!important}
.ch-cosmetics h1,.ch-cosmetics h2,.ch-cosmetics h3,.ch-cosmetics strong{color:var(--ch-cos-text)!important}
.ch-cosmetics :is(.ch-cosmetics-hero p,.ch-cosmetics-section-title p,.ch-cosmetic-card p,.ch-cosmetic-card-meta,.ch-cosmetic-card-foot,.ch-cosmetic-demo-card p){color:var(--ch-cos-muted)!important}
.ch-cosmetics-phase-note{display:block;margin-top:12px;padding:9px 11px;border:1px solid var(--ch-cos-border);border-radius:12px;background:var(--ch-cos-surface-soft);color:var(--ch-cos-muted);font-size:12px;line-height:1.4}
.ch-cosmetics-phase-note strong{color:var(--ch-cos-text)!important}
.ch-cosmetics button:disabled{opacity:.55;cursor:wait}
body.ch-theme-dark .ch-cosmetic-effect--midnight-gold,
body.ch-theme-mode-dark .ch-cosmetic-effect--midnight-gold,
body.ch-theme-dark .ch-cosmetic-effect--cosmic,
body.ch-theme-mode-dark .ch-cosmetic-effect--cosmic{color:#f4f7fb!important}
