/* Scoped to member cosmetics. Static frame layers never handle pointer input. */
.memberPages{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding-bottom:10px;gap:20px;scroll-snap-type:x mandatory}
.memberPages>*{flex-shrink:0;scroll-snap-align:start}
.memberPages::after{content:"";flex:0 0 var(--member-nav-tail,0px)}
#authTop.memberTopFramed{position:relative;isolation:isolate;border-color:transparent;border-radius:10px;padding:9px 14px;min-height:58px}
#authTop .topMemberFrameLayer{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:2}
@media(max-width:700px){
 #authTop.memberTopFramed{padding:8px 12px;min-height:50px}
}
@media(max-width:430px){
 /* Only shrink the selected frame; retain the existing header grid and controls. */
 .top .topin #authTop.memberTop.memberTopFramed{width:clamp(160px,46vw,190px);max-width:190px;justify-self:end;height:50px;min-height:50px}
}
.cosmeticRules{margin:14px 0;color:var(--muted,#b3c3d0);font-size:14px}
.cosmeticRules summary{cursor:pointer;color:#d8e8ec;font-weight:700;min-height:32px}
.cosmeticRules li{margin:8px 0;line-height:1.65}
.cosmeticPageHead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cosmeticPageHead h2{margin:0 0 10px}
.cosmeticPageHead p{margin:0;line-height:1.6}
.cosmeticRules.panel{padding:16px 20px}
.cosmeticFrameGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cosmeticFrameCard{min-width:0;border:1px solid #354050;border-radius:14px;background:radial-gradient(ellipse at top,#19242e,#0b1017 70%);padding:12px}
.cosmeticCardBody{padding:0 16px 12px}
.cosmeticCardBody h3{color:#edd9ad;font-size:19px;margin:8px 0}
.cosmeticCardBody p{line-height:1.5;margin:8px 0}
.cosmeticCardBody .btn{min-height:44px}
#framesView .frameMobileText{display:none}
.memberFrameIdentity{position:relative;isolation:isolate;width:100%;max-width:640px;min-width:0;margin:0 auto 10px;container-type:inline-size}
.memberFrameLayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;object-fit:fill}
[data-frame-preview] .vipDepthStage *,[data-frame-preview] .vipDepthStage *::before,[data-frame-preview] .vipDepthStage *::after,[data-frame-preview] .bf-badge-motion{animation:none!important;transition:none!important}
.memberFrameContent{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;gap:14px;min-height:158px;padding:44px 54px;background:linear-gradient(90deg,transparent,#060b10 16%,#060b10 84%,transparent);border-radius:24px}
.memberFrameVip,.memberFrameBadge{display:flex;align-items:center;justify-content:center;min-width:0}
.memberFrameVip .vipBadge{--vip-badge-size:64px;width:64px;height:64px;flex:0 0 64px}
.memberFrameBadge .bf-badge-art,.memberFrameBadge .badgeArtFallback{width:64px;height:64px;flex:0 0 64px}
.memberFrameName{min-width:0;border-left:1px solid #34414c;border-right:1px solid #34414c;padding:0 14px}
.memberFrameName h2,.memberFrameName strong{display:block;overflow-wrap:anywhere;font-size:24px;margin:0;color:#f5f6f7;line-height:1.3}
.memberFrameName span{display:block;color:#ffdb81;font-weight:700;font-size:19px;margin-top:5px}
.cosmeticStampGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cosmeticStampCard{padding:22px 18px;background:linear-gradient(145deg,#18272d,#10151e);border:1px solid #3c4c60;border-radius:14px;min-width:0}
.cosmeticStampCard>img{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 14px}
.cosmeticStampCard h3{font-size:19px;color:#e4ccfa}
.cosmeticStampCard p{line-height:1.65}
.cosmeticOwned{color:#aeff71}
.cosmeticAssetPreview{position:relative;width:100%;aspect-ratio:3.2}
.cosmeticAssetPreview img{width:100%;height:100%;object-fit:fill;pointer-events:none}
.adminCosmeticHost .cosmeticFrameCard{padding:16px}
.adminCosmeticHost .cosmeticFrameCard .field{margin:10px 0}
.cosmeticAudit{overflow-wrap:anywhere}
@container (max-width:460px){
 .memberFrameContent{grid-template-columns:52px minmax(0,1fr) 48px;gap:7px;padding:32px 33px;min-height:132px}
 .memberFrameVip .vipBadge{--vip-badge-size:48px;width:48px;height:48px;flex-basis:48px}
 .memberFrameBadge .bf-badge-art,.memberFrameBadge .badgeArtFallback{width:46px;height:46px;flex-basis:46px}
 .memberFrameName{padding:0 8px}
 .memberFrameName h2,.memberFrameName strong{font-size:18px}
 .memberFrameName span{font-size:16px}
 .memberFrameBadge .small{font-size:12px}
}
@media(max-width:760px){
 .cosmeticFrameGrid{grid-template-columns:1fr;gap:14px}
 .cosmeticStampGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cosmeticStampCard{padding:16px 12px;font-size:14px}
 .cosmeticStampCard h3{font-size:17px}
 .cosmeticStampCard>img{width:76px;height:76px}
 .cosmeticPageHead{align-items:flex-start;flex-direction:column}
 .memberPages>*{font-size:18px!important}
 .memberPages{gap:16px}
 .cosmeticCardBody{padding:0 8px 10px}
 /* Compact mobile catalog only; account identity, dialogs and desktop stay unchanged. */
 #framesView .cosmeticFrameGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #framesView .cosmeticFrameCard{padding:8px}
 #framesView .cosmeticFrameCard .memberFrameIdentity{aspect-ratio:3.2;margin:0 auto 8px}
 #framesView .cosmeticFrameCard .memberFrameContent{display:none}
 #framesView .cosmeticCardBody{padding:0;display:flex;flex-direction:column}
 #framesView .cosmeticCardBody h3{font-size:14px;line-height:1.5;margin:0;min-height:42px;overflow-wrap:anywhere}
 #framesView .frameDesktopText,#framesView .frameUnlockDetail{display:none}
 #framesView .frameMobileText{display:inline}
 #framesView .cosmeticCardBody .frameThreshold{font-size:14px;line-height:1.5;margin:4px 0 8px}
 #framesView .cosmeticCardBody .btn{width:100%;min-height:44px;padding:8px 4px;font-size:14px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.memberFrameLayer{animation:none;transition:none}}