/* v668 — shared Basic / Unlocked / Purchased visual authority. */
:root{
  --gg-basic-bg:linear-gradient(180deg,#fff 0%,#e4e8ed 48%,#b9c0c9 100%);
  --gg-basic-fg:#111318;
  --gg-basic-border:#8e959e;
  --gg-unlocked-bg:linear-gradient(180deg,#f7dd79 0%,#ddb94f 56%,#bc8f28 100%);
  --gg-unlocked-fg:#111318;
  --gg-unlocked-border:#9a7624;
  --gg-purchased-bg:linear-gradient(180deg,#c990ff 0%,#9c57db 54%,#7131a8 100%);
  --gg-purchased-fg:#fff;
  --gg-purchased-border:#5d268b;
}

/* Shared rail geometry. Individual buttons keep permanent identity. */
.gg-selection-mode-rail-v668,
#ggScrollFilterTabsV664{
  display:flex!important;
  gap:7px!important;
  align-items:stretch!important;
  box-sizing:border-box!important;
}
.gg-selection-mode-rail-v668{
  width:min(620px,calc(100% - 24px));
  margin:8px auto 4px;
  padding:6px;
  border:1.5px solid rgba(112,119,128,.68);
  border-bottom-color:rgba(112,119,128,.36);
  border-radius:18px 18px 9px 9px;
  background:linear-gradient(180deg,rgba(247,249,252,.97),rgba(211,216,224,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(0,0,0,.10);
  overflow-x:auto;
  scrollbar-width:none;
}
.gg-selection-mode-rail-v668::-webkit-scrollbar{display:none}
.gg-selection-mode-rail-v668 button,
#ggScrollFilterTabsV664 [data-gg-item-filter]{
  flex:1 0 92px;
  min-height:42px;
  border-radius:14px;
  font:800 14px/1 inherit;
  touch-action:manipulation;
}
.gg-selection-mode-rail-v668 [data-gg-selection-mode="basic"],
#ggScrollFilterTabsV664 [data-gg-item-filter="basic"]{background:var(--gg-basic-bg)!important;color:var(--gg-basic-fg)!important;border:2px solid var(--gg-basic-border)!important}
.gg-selection-mode-rail-v668 [data-gg-selection-mode="unlocked"],
#ggScrollFilterTabsV664 [data-gg-item-filter="unlocked"]{background:var(--gg-unlocked-bg)!important;color:var(--gg-unlocked-fg)!important;border:2px solid var(--gg-unlocked-border)!important}
.gg-selection-mode-rail-v668 [data-gg-selection-mode="purchased"],
#ggScrollFilterTabsV664 [data-gg-item-filter="purchased"]{background:var(--gg-purchased-bg)!important;color:var(--gg-purchased-fg)!important;border:2px solid var(--gg-purchased-border)!important}
.gg-selection-mode-rail-v668 button.active,
#ggScrollFilterTabsV664 [data-gg-item-filter].active{
  outline:2px solid rgba(30,31,36,.55)!important;
  outline-offset:1px!important;
  transform:translateY(-1px)!important;
  box-shadow:0 0 0 3px rgba(21,22,26,.18),inset 0 2px 0 rgba(255,255,255,.46),0 4px 8px rgba(0,0,0,.18)!important;
}

/* Mode variables live on the category-control root, never on the preview/avatar. */
.gg-mode-basic-v668{--gg-mode-bg:var(--gg-basic-bg);--gg-mode-fg:var(--gg-basic-fg);--gg-mode-border:var(--gg-basic-border)}
.gg-mode-unlocked-v668{--gg-mode-bg:var(--gg-unlocked-bg);--gg-mode-fg:var(--gg-unlocked-fg);--gg-mode-border:var(--gg-unlocked-border)}
.gg-mode-purchased-v668{--gg-mode-bg:var(--gg-purchased-bg);--gg-mode-fg:var(--gg-purchased-fg);--gg-mode-border:var(--gg-purchased-border)}

/* Avatar Studio compact selector. */
#ggV515CategoryShell:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668) #ggV515PrimaryNav .gg-v515-main-btn,
#ggV515CategoryShell:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668) #ggV515SubNav button{
  background:var(--gg-mode-bg)!important;
  color:var(--gg-mode-fg)!important;
  border-color:var(--gg-mode-border)!important;
}
#ggV515CategoryShell:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668) #ggV515PrimaryNav .gg-v515-main-btn svg{
  color:var(--gg-mode-fg)!important;fill:var(--gg-mode-fg)!important;stroke:var(--gg-mode-fg)!important;
}
#ggV515CategoryShell.gg-mode-purchased-v668 #ggV515PrimaryNav .gg-v515-main-btn span,
#ggV515CategoryShell.gg-mode-purchased-v668 #ggV515SubNav button{color:#fff!important}

/* Room + Salon selection/category boxes use the same mode colors. */
#ggRoomEditBelowV658:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668) .room-category-icon,
body.gg-salon-room-v206 .room-main:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668) .room-category-icon,
body.gg-salon-room-v206 .rich-avatar-shell:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668) .room-category-icon,
body.gg-salon-room-v206 .room-studio-card:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668) .room-category-icon,
body.gg-salon-room-v206.gg-mode-basic-v668 .room-category-icon,
body.gg-salon-room-v206.gg-mode-unlocked-v668 .room-category-icon,
body.gg-salon-room-v206.gg-mode-purchased-v668 .room-category-icon{
  background:var(--gg-mode-bg)!important;
  background-image:var(--gg-mode-bg)!important;
  color:var(--gg-mode-fg)!important;
  border-color:var(--gg-mode-border)!important;
}
#ggRoomEditBelowV658.gg-mode-purchased-v668 .room-category-icon :is(span,b),
body.gg-salon-room-v206.gg-mode-purchased-v668 .room-category-icon :is(span,b){color:#fff!important}
#ggRoomEditBelowV658:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668) .room-category-icon :is(span,b),
body.gg-salon-room-v206:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668) .room-category-icon :is(span,b){color:#111318!important}

/* v681: Avatar Room category and subsection cards share the active mode surface. */
#ggRoomEditBelowV658:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668)
  :is(#roomCategoryLoop,#roomOptionLoop)
  :is(.room-category-icon,.room-option-chip,button[data-room-category],button[data-room-option]){
  background:var(--gg-mode-bg)!important;
  background-image:var(--gg-mode-bg)!important;
  color:var(--gg-mode-fg)!important;
  border-color:var(--gg-mode-border)!important;
}
#ggRoomEditBelowV658:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668)
  :is(#roomCategoryLoop,#roomOptionLoop)
  :is(.room-category-icon,.room-option-chip,button[data-room-category],button[data-room-option]) :is(span,b,strong,small,i,svg){
  color:var(--gg-mode-fg)!important;
  fill:currentColor;
  stroke:currentColor;
}
#ggRoomEditBelowV658:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668)
  :is(.room-category-icon.active,.room-option-chip.selected){
  outline:3px solid rgba(22,24,29,.78)!important;
  outline-offset:-3px!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.48),0 3px 8px rgba(0,0,0,.22)!important;
}
#ggRoomEditBelowV658.gg-mode-purchased-v668 :is(#roomCategoryLoop,#roomOptionLoop)
  :is(.room-category-icon,.room-option-chip) :is(span,b,strong,small){color:#fff!important}
#ggRoomEditBelowV658 .room-option-chip.gg-room-locked-v681{
  position:relative!important;
  overflow:hidden!important;
  cursor:pointer!important;
}
#ggRoomEditBelowV658 .room-option-chip.gg-room-locked-v681 b{
  filter:grayscale(1) brightness(.08) contrast(1.6)!important;
  opacity:.88!important;
  text-shadow:none!important;
}
#ggRoomEditBelowV658 .room-option-chip.gg-room-locked-v681 span{
  color:#15171b!important;
  opacity:.82!important;
}
#ggRoomEditBelowV658 .gg-room-lock-badge-v681{
  position:absolute!important;
  right:4px!important;
  top:4px!important;
  z-index:2!important;
  min-width:38px!important;
  padding:3px 5px!important;
  border:1px solid rgba(0,0,0,.66)!important;
  border-radius:999px!important;
  background:rgba(22,24,29,.9)!important;
  color:#fff!important;
  font:900 9px/1 system-ui,-apple-system,sans-serif!important;
  letter-spacing:.04em!important;
  text-align:center!important;
}

/* v678: Salon mode owns every existing selector card below its rail. */
body.gg-salon-room-v206:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668)
  :is(#roomCategoryLoop,#roomOptionLoop,#roomOptionDrawer,.room-category-wrap-v061,.room-options-drawer)
  :is(.room-category-icon,.room-option-chip,button[data-room-category],button[data-room-option]){
  background:var(--gg-mode-bg)!important;background-image:var(--gg-mode-bg)!important;
  color:var(--gg-mode-fg)!important;border-color:var(--gg-mode-border)!important;
}
body.gg-salon-room-v206:is(.gg-mode-basic-v668,.gg-mode-unlocked-v668,.gg-mode-purchased-v668)
  :is(#roomCategoryLoop,#roomOptionLoop,#roomOptionDrawer,.room-category-wrap-v061,.room-options-drawer)
  :is(.room-category-icon,.room-option-chip,button[data-room-category],button[data-room-option]) :is(span,b,strong,small,i,svg){
  color:var(--gg-mode-fg)!important;fill:currentColor;stroke:currentColor;
}
body.gg-salon-room-v206 :is(#roomCategoryLoop,#roomOptionLoop,.room-category-strip,.room-option-loop){
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
  width:100%!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;overscroll-behavior-inline:contain!important;scrollbar-width:none!important;
}
body.gg-salon-room-v206 :is(#roomCategoryLoop,#roomOptionLoop,.room-category-strip,.room-option-loop)::-webkit-scrollbar{display:none!important}
body.gg-salon-room-v206 :is(#roomCategoryLoop,#roomOptionLoop,.room-category-strip,.room-option-loop)>*{flex:0 0 auto!important}

/* Room rail belongs after Avatar/Familiar and immediately above the room category controls. */
body.avatar-room-page:not(.gg-salon-room-v206) #ggRoomEditBelowV658 #ggRoomModeRailV668{order:2!important;margin:4px auto 2px!important}
body.avatar-room-page:not(.gg-salon-room-v206) #ggRoomEditBelowV658 #roomEditorActiveLabelV061{order:3!important}
body.avatar-room-page:not(.gg-salon-room-v206) #ggRoomEditBelowV658 .room-category-wrap-v061{order:4!important}
body.avatar-room-page:not(.gg-salon-room-v206) #ggRoomEditBelowV658 #roomOptionDrawer{order:5!important}
body.avatar-room-page:not(.gg-salon-room-v206) #ggRoomEditBelowV658 #roomSaveNote{order:6!important}

/* Salon rail is normal-flow, directly above its selector scroller. */
body.gg-salon-room-v206 #ggSalonModeRailV668{position:relative!important;inset:auto!important;transform:none!important;z-index:auto!important;margin:8px auto 2px!important}

/* Heart eye placement parent owns geometry; motion wrapper keeps animation. */
body.avatar-room-page #eyeAccessory .heart-pulse[data-gg-face-origin-v668="1"],
body.gg-salon-room-v206 #eyeAccessory .heart-pulse[data-gg-face-origin-v668="1"]{
  transform-box:view-box!important;
  transform-origin:center!important;
}
body.avatar-room-page #eyeAccessory .gg-heart-glasses-v641[data-gg-face-origin-v668="1"],
body.gg-salon-room-v206 #eyeAccessory .gg-heart-glasses-v641[data-gg-face-origin-v668="1"]{
  transform-box:view-box!important;
  transform-origin:0 0!important;
}