/* Hub dashboard only — button colors + rounded corners (Home quick-action look).
   Scoped via html[data-app="hub"]. */

html[data-app='hub'] {
  --accent: #d4af37;
  --accent-deep: #a67c1a;
  --hub-btn-icon: #f0d060;
  --hub-btn-icon-hot: #ffe58f;
  --hub-btn-text: #ffffff;
  --hub-btn-bg: linear-gradient(155deg, rgba(90, 36, 78, 0.42) 0%, #0c0c12 46%, #08080c 100%);
  --hub-btn-bg-gold: linear-gradient(155deg, rgba(180, 130, 40, 0.28) 0%, #0c0c12 46%, #08080c 100%);
  --hub-btn-border: rgba(212, 175, 55, 0.34);
  --hub-btn-border-hot: rgba(212, 175, 55, 0.7);
  --hub-btn-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --hub-radius: 14px;
  --hub-radius-lg: 18px;
  --hub-radius-pill: 999px;
}

/* Feed / post inline icon actions — never gold “button” chrome */
html[data-app='hub'] :is(button, a, [role='button']):where(
    [class*='react'],
    [class*='React'],
    [class*='save'],
    [class*='Save'],
    [class*='share'],
    [class*='Share'],
    [class*='comment'],
    [class*='Comment'],
    [class*='like'],
    [class*='Like'],
    [class*='emoji'],
    [class*='Emoji'],
    [class*='bookmark'],
    [class*='Bookmark'],
    [class*='repost'],
    [class*='Repost']
  ),
html[data-app='hub'] [class*='actionRow'] :is(button, a, [role='button']),
html[data-app='hub'] [class*='ActionRow'] :is(button, a, [role='button']) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

html[data-app='hub'] :is(button, a, [role='button']):where(
    [class*='react'],
    [class*='React'],
    [class*='save'],
    [class*='Save'],
    [class*='share'],
    [class*='Share'],
    [class*='comment'],
    [class*='Comment'],
    [class*='like'],
    [class*='Like'],
    [class*='emoji'],
    [class*='Emoji'],
    [class*='bookmark'],
    [class*='Bookmark']
  ):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Primary Hub controls — colors + always rounded.
   No [class*="save"] / broad action — those hit feed react/save icons. */
html[data-app='hub'] :is(button, a, [role='button'], input[type='submit'], input[type='button']):where(
    [class*='cta'],
    [class*='Cta'],
    [class*='join'],
    [class*='Join'],
    [class*='compose'],
    [class*='Compose'],
    [class*='send'],
    [class*='Send'],
    [class*='create'],
    [class*='Create'],
    [class*='primary'],
    [class*='Primary'],
    [class*='submit'],
    [class*='Submit'],
    [class*='accept'],
    [class*='Accept'],
    [class*='postBtn'],
    [class*='publish'],
    [class*='Publish'],
    [class*='_action_'],
    [class*='ActionBtn'],
    [class*='actionBtn'],
    [class*='headerBtn'],
    [class*='toolBtn'],
    [class*='_control_'],
    [class*='ControlBtn'],
    [class*='chip'],
    [class*='Chip'],
    [class*='pill'],
    [class*='Pill'],
    [class*='source'],
    [class*='Source'],
    [class*='_tab_'],
    [class*='TabBtn'],
    [class*='ghost'],
    [class*='Ghost'],
    [class*='Btn'],
    [class*='_btn_']
  ):not(
    :where(
      [class*='person'],
      [class*='Person'],
      [class*='author'],
      [class*='Author'],
      [class*='avatar'],
      [class*='Avatar'],
      [class*='hang'],
      [class*='Hang'],
      [class*='decline'],
      [class*='Decline'],
      [class*='danger'],
      [class*='Danger'],
      [class*='delete'],
      [class*='Delete'],
      [class*='logout'],
      [class*='Logout'],
      [class*='react'],
      [class*='React'],
      [class*='save'],
      [class*='Save'],
      [class*='share'],
      [class*='Share'],
      [class*='comment'],
      [class*='Comment'],
      [class*='like'],
      [class*='Like'],
      [class*='emoji'],
      [class*='Emoji'],
      [class*='bookmark'],
      [class*='Bookmark'],
      [class*='repost'],
      [class*='Repost'],
      [class*='menuBtn'],
      [class*='MenuBtn'],
      [class*='iconBtn'],
      [class*='IconBtn'],
      [class*='navIcon']
    )
  ) {
  background: var(--hub-btn-bg) !important;
  border: 1px solid var(--hub-btn-border) !important;
  color: var(--hub-btn-text) !important;
  box-shadow: var(--hub-btn-shadow) !important;
  border-radius: var(--hub-radius) !important;
}

html[data-app='hub'] :is(button, a, [role='button']):where(
    [class*='chip'],
    [class*='Chip'],
    [class*='pill'],
    [class*='Pill'],
    [class*='_tab_'],
    [class*='TabBtn']
  ):not(:where([class*='person'], [class*='Person'], [class*='author'], [class*='Author'])) {
  border-radius: var(--hub-radius-pill) !important;
}

html[data-app='hub'] :is(button, a, [role='button']):where(
    [class*='cta'],
    [class*='join'],
    [class*='compose'],
    [class*='send'],
    [class*='create'],
    [class*='primary'],
    [class*='submit'],
    [class*='accept'],
    [class*='_action_'],
    [class*='ActionBtn'],
    [class*='actionBtn'],
    [class*='headerBtn'],
    [class*='toolBtn'],
    [class*='chip'],
    [class*='pill'],
    [class*='source'],
    [class*='_tab_'],
    [class*='ghost'],
    [class*='Btn'],
    [class*='_btn_']
  ):not(
    :where(
      [class*='person'],
      [class*='Person'],
      [class*='author'],
      [class*='Author'],
      [class*='hang'],
      [class*='decline'],
      [class*='danger'],
      [class*='delete'],
      [class*='logout'],
      [class*='react'],
      [class*='React'],
      [class*='save'],
      [class*='Save'],
      [class*='share'],
      [class*='Share'],
      [class*='comment'],
      [class*='Comment'],
      [class*='like'],
      [class*='Like'],
      [class*='emoji'],
      [class*='Emoji'],
      [class*='bookmark'],
      [class*='Bookmark'],
      [class*='menuBtn'],
      [class*='MenuBtn'],
      [class*='iconBtn'],
      [class*='IconBtn']
    )
  )
  svg {
  color: var(--hub-btn-icon) !important;
  stroke: var(--hub-btn-icon);
}

html[data-app='hub'] :is(button, a):where(
    [class*='cta'],
    [class*='join'],
    [class*='compose'],
    [class*='send'],
    [class*='_action_'],
    [class*='ActionBtn'],
    [class*='actionBtn'],
    [class*='headerBtn'],
    [class*='toolBtn'],
    [class*='chip'],
    [class*='pill'],
    [class*='source'],
    [class*='_tab_'],
    [class*='Btn'],
    [class*='_btn_']
  ):is(:hover, :focus-visible):not(
    :where(
      [class*='person'],
      [class*='Person'],
      [class*='author'],
      [class*='Author'],
      [class*='hang'],
      [class*='decline'],
      [class*='danger'],
      [class*='delete'],
      [class*='react'],
      [class*='React'],
      [class*='save'],
      [class*='Save'],
      [class*='share'],
      [class*='Share'],
      [class*='comment'],
      [class*='Comment'],
      [class*='like'],
      [class*='Like'],
      [class*='emoji'],
      [class*='Emoji'],
      [class*='bookmark'],
      [class*='Bookmark'],
      [class*='menuBtn'],
      [class*='MenuBtn'],
      [class*='iconBtn'],
      [class*='IconBtn']
    )
  ) {
  border-color: var(--hub-btn-border-hot) !important;
  background: linear-gradient(155deg, rgba(110, 48, 95, 0.5) 0%, #12121a 50%, #0a0a10 100%) !important;
  border-radius: var(--hub-radius) !important;
}

/* Active/selected — NEVER [class*="on"] (matches "person") */
html[data-app='hub'] :is(button, a):where(
    [class*='_on_'],
    [class*='_On_'],
    [class*='isOn'],
    [class*='IsOn'],
    [class*='_active_'],
    [class*='Active'],
    [class*='selected'],
    [class*='Selected'],
    [class*='isActive'],
    [class*='IsActive']
  ):not(
    :where(
      [class*='person'],
      [class*='Person'],
      [class*='author'],
      [class*='Author'],
      [class*='hang'],
      [class*='decline'],
      [class*='react'],
      [class*='React'],
      [class*='save'],
      [class*='Save']
    )
  ) {
  border-color: var(--hub-btn-border-hot) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(212, 175, 55, 0.28) !important;
  border-radius: var(--hub-radius) !important;
}

/* Home quick-action cards */
html[data-app='hub'] [class*='_action_'] {
  background: var(--hub-btn-bg) !important;
  border: 1px solid rgba(168, 85, 180, 0.35) !important;
  color: var(--hub-btn-text) !important;
  box-shadow: var(--hub-btn-shadow) !important;
  border-radius: var(--hub-radius-lg) !important;
}

html[data-app='hub'] [class*='_action_'] svg {
  color: var(--hub-btn-icon) !important;
  filter: drop-shadow(0 0 8px rgba(240, 208, 96, 0.45)) !important;
}

html[data-app='hub'] [class*='_action_'] strong {
  color: var(--hub-btn-text) !important;
}

html[data-app='hub'] [class*='_violet_'],
html[data-app='hub'] [class*='_blue_'],
html[data-app='hub'] [class*='_green_'],
html[data-app='hub'] [class*='_orange_'] {
  background: var(--hub-btn-bg) !important;
  border: 1px solid rgba(168, 85, 180, 0.35) !important;
  border-radius: var(--hub-radius-lg) !important;
}

html[data-app='hub'] [class*='_blue_'],
html[data-app='hub'] [class*='_orange_'] {
  background: var(--hub-btn-bg-gold) !important;
  border-color: var(--hub-btn-border) !important;
}

html[data-app='hub'] :is(button, a)[style*='6d5efc'],
html[data-app='hub'] :is(button, a)[style*='8b7cff'] {
  background: var(--hub-btn-bg) !important;
  border: 1px solid var(--hub-btn-border) !important;
  color: var(--hub-btn-text) !important;
  border-radius: var(--hub-radius) !important;
}

/* Author / person rows */
html[data-app='hub'] :is(button, a)[class*='person'],
html[data-app='hub'] :is(button, a)[class*='Person'],
html[data-app='hub'] :is(button, a)[class*='author'],
html[data-app='hub'] :is(button, a)[class*='Author'],
html[data-app='hub'] :is(button, a)[class*='postPerson'] {
  border-radius: var(--hub-radius) !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-app='hub'] :is(button, a)[class*='person']:hover,
html[data-app='hub'] :is(button, a)[class*='Person']:hover,
html[data-app='hub'] :is(button, a)[class*='author']:hover,
html[data-app='hub'] :is(button, a)[class*='Author']:hover,
html[data-app='hub'] :is(button, a)[class*='postPerson']:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: var(--hub-radius) !important;
  box-shadow: none !important;
}

/* Badges / chips */
html[data-app='hub'] [class*='badge']:not([class*='avatar']):not([class*='Avatar']),
html[data-app='hub'] [class*='Badge']:not([class*='avatar']):not([class*='Avatar']),
html[data-app='hub'] [class*='chip'],
html[data-app='hub'] [class*='Chip'],
html[data-app='hub'] [class*='pill'],
html[data-app='hub'] [class*='Pill'] {
  border-radius: 999px !important;
}

/* Nested cards / panels / sheets */
html[data-app='hub'] [class*='repostBox'],
html[data-app='hub'] [class*='RepostBox'],
html[data-app='hub'] [class*='postCard'],
html[data-app='hub'] [class*='PostCard'],
html[data-app='hub'] [class*='feedCard'],
html[data-app='hub'] [class*='FeedCard'],
html[data-app='hub'] [class*='momentCard'],
html[data-app='hub'] [class*='MomentCard'],
html[data-app='hub'] [class*='doCard'],
html[data-app='hub'] [class*='DoCard'],
html[data-app='hub'] [class*='tile'],
html[data-app='hub'] [class*='Tile'],
html[data-app='hub'] [class*='panel'],
html[data-app='hub'] [class*='Panel'],
html[data-app='hub'] [class*='sheet'],
html[data-app='hub'] [class*='Sheet'],
html[data-app='hub'] [class*='dialog'],
html[data-app='hub'] [class*='Dialog'] {
  border-radius: var(--hub-radius-lg) !important;
}

/* Generic Hub buttons — exclude feed icons + menu/icon circles */
html[data-app='hub'] button:not(
    :where(
      [class*='avatar'],
      [class*='Avatar'],
      [class*='dock'],
      [class*='Dock'],
      [class*='react'],
      [class*='React'],
      [class*='save'],
      [class*='Save'],
      [class*='share'],
      [class*='Share'],
      [class*='comment'],
      [class*='Comment'],
      [class*='like'],
      [class*='Like'],
      [class*='emoji'],
      [class*='Emoji'],
      [class*='bookmark'],
      [class*='Bookmark'],
      [class*='menuBtn'],
      [class*='MenuBtn'],
      [class*='iconBtn'],
      [class*='IconBtn'],
      [class*='navIcon']
    )
  ),
html[data-app='hub'] a[class*='Btn']:not(
    :where(
      [class*='react'],
      [class*='React'],
      [class*='save'],
      [class*='Save'],
      [class*='share'],
      [class*='Share'],
      [class*='menuBtn'],
      [class*='iconBtn'],
      [class*='IconBtn'],
      [class*='navIcon']
    )
  ),
html[data-app='hub'] a[class*='_btn_'],
html[data-app='hub'] [role='button']:not(
    :where([class*='avatar'], [class*='Avatar'], [class*='react'], [class*='save'], [class*='share'], [class*='menuBtn'], [class*='iconBtn'])
  ) {
  border-radius: var(--hub-radius) !important;
}

/* Keep circles circular */
html[data-app='hub'] [class*='avatar'],
html[data-app='hub'] [class*='Avatar'],
html[data-app='hub'] [class*='storyRing'],
html[data-app='hub'] [class*='StoryRing'],
html[data-app='hub'] [class*='fab'],
html[data-app='hub'] [class*='Fab'] {
  border-radius: 50% !important;
}

/* Floating bottom dock — rounded capsule, centered in content column vs right sidebar */
html[data-app='hub'] [class*='_dock_'],
html[data-app='hub'] nav[class*='dock'],
html[data-app='hub'] [class*='FeedDock'],
html[data-app='hub'] [class*='feedDock'] {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
  width: min(36rem, calc(100vw - 1.5rem)) !important;
  max-width: calc(100vw - 1.5rem) !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.4rem 0.45rem !important;
  padding-bottom: 0.4rem !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  background: rgba(10, 10, 14, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  z-index: 70 !important;
  transition:
    left 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    max-width 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Desktop: sidebar is on the RIGHT — center dock + size in the stage column */
@media (min-width: 1025px) {
  html[data-app='hub'] [class*='_dock_'],
  html[data-app='hub'] nav[class*='dock'] {
    left: calc(50% - var(--sidebar-w, 252px) / 2) !important;
    right: auto !important;
    width: min(36rem, calc(100vw - var(--sidebar-w, 252px) - 2rem)) !important;
    max-width: calc(100vw - var(--sidebar-w, 252px) - 2rem) !important;
    transform: translateX(-50%) !important;
    border-radius: 20px !important;
  }

  /* Keep page content centered in the resizing stage */
  html[data-app='hub'] [class*='_content_'] > *,
  html[data-app='hub'] [class*='_page_'],
  html[data-app='hub'] [class*='_feedContent_'] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-app='hub'] [class*='_shell_'],
  html[data-app='hub'] [class*='_shellSidebarHidden_'] {
    transition: grid-template-columns 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

@media (max-width: 1024px) {
  html[data-app='hub'] [class*='_dock_'],
  html[data-app='hub'] nav[class*='dock'] {
    left: 50% !important;
    right: auto !important;
    width: min(36rem, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem) !important;
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transform: translateX(-50%) !important;
  }
}

/* Three-dot / menu / circular icon buttons — center glyph in ring */
html[data-app='hub'] [class*='menuBtn'],
html[data-app='hub'] [class*='MenuBtn'],
html[data-app='hub'] [class*='iconBtn'],
html[data-app='hub'] [class*='IconBtn'],
html[data-app='hub'] [class*='navIconBtn'],
html[data-app='hub'] [class*='_topActions_'] [class*='Btn'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

html[data-app='hub'] [class*='menuBtn'] svg,
html[data-app='hub'] [class*='MenuBtn'] svg,
html[data-app='hub'] [class*='iconBtn'] svg,
html[data-app='hub'] [class*='IconBtn'] svg,
html[data-app='hub'] [class*='navIconBtn'] svg,
html[data-app='hub'] [class*='_topActions_'] [class*='Btn'] svg {
  display: block !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

/* Catalog → Module icons — Hub button look (dark + gold), not rainbow fills */
html[data-app='hub'] a[class*='_module_'],
html[data-app='hub'] [class*='_module_dj7lh_'] {
  background: var(--hub-btn-bg) !important;
  border: 1px solid var(--hub-btn-border) !important;
  box-shadow: var(--hub-btn-shadow) !important;
  border-radius: var(--hub-radius-lg) !important;
  color: var(--hub-btn-text) !important;
}

html[data-app='hub'] a[class*='_module_']:hover,
html[data-app='hub'] [class*='_module_dj7lh_']:hover {
  border-color: var(--hub-btn-border-hot) !important;
  background: linear-gradient(155deg, rgba(110, 48, 95, 0.5) 0%, #12121a 50%, #0a0a10 100%) !important;
}

html[data-app='hub'] a[class*='_module_'] > span:first-child,
html[data-app='hub'] [class*='_module_'] > span:first-of-type {
  background: linear-gradient(155deg, rgba(90, 36, 78, 0.55) 0%, #0c0c12 55%, #08080c 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  border-radius: 14px !important;
  color: var(--hub-btn-icon) !important;
  display: inline-grid !important;
  place-items: center !important;
}

html[data-app='hub'] a[class*='_module_'] > span:first-child svg,
html[data-app='hub'] [class*='_module_'] > span:first-of-type svg {
  color: var(--hub-btn-icon) !important;
  stroke: var(--hub-btn-icon) !important;
  filter: drop-shadow(0 0 8px rgba(240, 208, 96, 0.45)) !important;
}