/* RECODET — direct icon buttons + dark surface correction */
:root{
  --ri-bg:#070807;
  --ri-surface:#10120f;
  --ri-surface-2:#151712;
  --ri-line:rgba(212,175,55,.28);
  --ri-gold:#e2bc43;
  --ri-text:#f7f2e4;
  --ri-muted:#aaa28f;
}

/* Remove the white/orange card combination across public module screens. */
#moduleBody .card,
#scoreBody .card,
#scoreBody .scoreCard,
#scoreBody .scoreAction,
#scoreBody .ruleRow,
#scoreBody .workItem,
#scoreBody .scoreNavBtn,
#moduleBody .eventDetailRows>div,
#moduleBody .eventProCard,
#moduleBody .eventDetailCard,
#moduleBody .eventCard,
#moduleBody .eventsCard,
#moduleBody .serviceCard,
#moduleBody .serviceProCard,
#moduleBody .walletTxRow,
#moduleBody .coinHistoryRow,
#moduleBody .sportsMatchCard,
#moduleBody .sportsRankRow,
#moduleBody .sportsTeamRow,
#moduleBody .profilePostCard,
#moduleBody .chatListItem,
#moduleBody .chatConversationRow,
#moduleBody .chatGroupRow,
#moduleBody .eduCourseCard,
#moduleBody .learnCourseCard,
#moduleBody .educationCourseCard,
#moduleBody .moduleCategoryTile{
  background:linear-gradient(180deg,var(--ri-surface-2),var(--ri-surface))!important;
  color:var(--ri-text)!important;
  border:1px solid var(--ri-line)!important;
  box-shadow:none!important;
}
#scoreBody .scoreCard *,#scoreBody .scoreAction *,#scoreBody .ruleRow *,#scoreBody .workItem *,
#moduleBody .eventDetailRows>div *,#moduleBody .eventProCard *,#moduleBody .eventDetailCard *{
  color:inherit;
}
#scoreBody .scoreNote,#scoreBody .scoreActionBody,#scoreBody .workItemMeta,
#moduleBody small,#moduleBody p,#moduleBody .eventDetailRows small{color:var(--ri-muted)!important}

/* Main menu — icon is the button, no nested icon frame. */
.hubModuleGrid{
  gap:10px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.hubModuleTile{
  min-height:94px!important;
  padding:10px 4px 8px!important;
  border-radius:18px!important;
  border:1px solid var(--ri-line)!important;
  background:linear-gradient(180deg,#151711,#0e100d)!important;
  box-shadow:none!important;
  gap:6px!important;
  overflow:hidden!important;
}
.hubModuleTile:active,
.hubModuleTile:focus-visible{
  background:linear-gradient(180deg,#2a230d,#171307)!important;
  border-color:rgba(226,188,67,.72)!important;
}
.hubModuleIcon{
  width:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;
  place-items:center!important;
}
.hubModuleIcon img,.hubModuleIcon svg,.hubMainIconImage{
  width:58px!important;
  height:58px!important;
  max-width:none!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.hubModuleTile>span:last-child{
  color:var(--ri-text)!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
}

/* Bottom bars — the full tab is the button, icon has no separate box. */
#bottomBar.bottombar{
  min-height:78px!important;
  padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important;
  background:rgba(10,11,9,.97)!important;
  border:1px solid rgba(212,175,55,.35)!important;
  border-radius:24px!important;
  box-shadow:0 14px 38px rgba(0,0,0,.46)!important;
}
#bottomBar.bottombar::before{display:none!important}
#bottomBar.bottombar button{
  min-height:64px!important;
  height:64px!important;
  padding:5px 3px!important;
  gap:3px!important;
  border:0!important;
  border-radius:17px!important;
  background:transparent!important;
  color:#c6bfae!important;
  box-shadow:none!important;
}
#bottomBar.bottombar button.active{
  color:#171106!important;
  background:linear-gradient(180deg,#f0cf59,#cf9e1c)!important;
  border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38)!important;
}
#bottomBar .tabIcon{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
}
#bottomBar button.active .tabIcon{
  background:transparent!important;
  color:inherit!important;
}
#bottomBar .tabIcon img,#bottomBar .tabIcon svg,#bottomBar .moduleIconImage{
  width:36px!important;
  height:36px!important;
  max-width:none!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#bottomBar .tabLabel{
  color:inherit!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
}

/* Remove white icon chips from category / quick-action buttons. */
.moduleCategoryTile .img,.quickActionTile>span,.walletQuickTile>span,.coinQuickTile>span,
.sportsQuickGrid button>span,.sportsRoleGrid button>span,.sportsCategoryGrid button>span,
.eduCategoryGrid button>span,.learnCategoryGrid button>span,.educationCategoryGrid button>span{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.moduleCategoryTile .img img,.moduleCategoryTile .img svg,
.quickActionTile img,.quickActionTile svg,
.walletQuickTile img,.walletQuickTile svg,.coinQuickTile img,.coinQuickTile svg{
  width:38px!important;height:38px!important;
}

@media(max-width:390px){
  .hubModuleGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .hubModuleTile{min-height:92px!important}
  .hubModuleIcon,.hubModuleIcon img,.hubModuleIcon svg,.hubMainIconImage{width:56px!important;height:56px!important}
  #bottomBar.bottombar{left:5px!important;right:5px!important;width:calc(100vw - 10px)!important}
  #bottomBar.bottombar button{min-height:62px!important;height:62px!important}
  #bottomBar .tabIcon,#bottomBar .tabIcon img,#bottomBar .tabIcon svg,#bottomBar .moduleIconImage{width:35px!important;height:35px!important}
}

/* Premium category landing screens — first bottom-bar action */
.premiumCategoryHero{
  position:relative;
  overflow:hidden;
  padding:22px 20px;
  margin:0 0 14px;
  border:1px solid rgba(225,170,41,.34);
  border-radius:22px;
  background:
    radial-gradient(circle at 92% 0%,rgba(255,184,44,.18),transparent 42%),
    linear-gradient(145deg,#211a0e 0%,#15130f 48%,#0c0c0d 100%);
  box-shadow:0 16px 34px rgba(0,0,0,.34),inset 0 1px rgba(255,218,124,.16);
}
.premiumCategoryHero::after{
  content:"";position:absolute;right:-42px;bottom:-54px;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(232,183,57,.16);box-shadow:0 0 70px rgba(232,166,32,.12);
}
.premiumCategoryHero>span{display:block;color:#e6ad32;font-size:10px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;margin-bottom:7px}
.premiumCategoryHero h2{margin:0;color:#fff7df;font-size:25px;line-height:1.08;letter-spacing:-.035em}
.premiumCategoryHero p{max-width:34rem;margin:8px 0 0;color:#b9b4a8;font-size:12px;line-height:1.5}
.premiumCategoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding-bottom:10px}
.premiumCategoryTile{
  position:relative;isolation:isolate;display:grid;grid-template-columns:54px minmax(0,1fr) 18px;align-items:center;gap:11px;
  min-height:98px;padding:14px 12px;border:1px solid rgba(220,169,51,.25);border-radius:18px;
  color:#fff;background:linear-gradient(155deg,#201b11 0%,#121214 62%,#0c0c0d 100%);
  box-shadow:0 11px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04);
  text-align:left;cursor:pointer;overflow:hidden;
  animation:premiumCatIn .42s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--cat-delay,0ms);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.premiumCategoryTile::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 18%,rgba(255,199,72,.09) 48%,transparent 78%);transform:translateX(-115%);transition:transform .45s ease;z-index:-1}
.premiumCategoryTile:hover,.premiumCategoryTile:focus-visible{transform:translateY(-4px) scale(1.015);border-color:rgba(236,186,60,.65);box-shadow:0 17px 32px rgba(0,0,0,.42),0 0 24px rgba(215,154,28,.1)}
.premiumCategoryTile:hover::before,.premiumCategoryTile:focus-visible::before{transform:translateX(115%)}
.premiumCategoryTile:active{transform:translateY(1px) scale(.985);box-shadow:0 6px 14px rgba(0,0,0,.34)}
.premiumCategoryIcon{display:grid;place-items:center;width:54px;height:54px;color:#17130a;background:linear-gradient(145deg,#ffd769,#df971c);border-radius:15px;box-shadow:inset 0 1px rgba(255,255,255,.55),0 7px 16px rgba(0,0,0,.28)}
.premiumCategoryIcon img{width:44px;height:44px;object-fit:contain;filter:none!important}
.premiumCategoryIcon svg{width:30px;height:30px}
.premiumCategoryCopy{min-width:0;display:flex;flex-direction:column;gap:4px}
.premiumCategoryCopy strong{color:#fff4d1;font-size:14px;line-height:1.15}
.premiumCategoryCopy small{color:#9f9b91;font-size:10px;line-height:1.35}
.premiumCategoryArrow{color:#e7ad30;font-size:25px;font-weight:400;line-height:1}
@keyframes premiumCatIn{from{opacity:0;transform:translateY(13px) scale(.97)}to{opacity:1;transform:none}}

/* Existing Shop and Services category screens receive the same premium language. */
#viewCategories .categoryGrid,#viewCategories .groupGrid,.serviceCategoryGrid{gap:11px!important}
#viewCategories .categoryTile,#viewCategories .groupTile,.serviceCategoryTile{
  min-height:104px!important;border:1px solid rgba(220,169,51,.28)!important;border-radius:18px!important;
  background:linear-gradient(155deg,#211b10,#121214 65%,#0b0b0c)!important;
  color:#fff!important;box-shadow:0 11px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
#viewCategories .categoryTile:hover,#viewCategories .groupTile:hover,.serviceCategoryTile:hover{transform:translateY(-4px);border-color:rgba(236,186,60,.68)!important;box-shadow:0 17px 32px rgba(0,0,0,.42)!important}
.serviceCategoryTile>span{background:linear-gradient(145deg,#ffd769,#df971c)!important;color:#17130a!important;border:0!important;box-shadow:inset 0 1px rgba(255,255,255,.55),0 7px 16px rgba(0,0,0,.28)!important}

@media(max-width:390px){
  .premiumCategoryHero{padding:18px 16px;border-radius:19px}.premiumCategoryHero h2{font-size:22px}
  .premiumCategoryGrid{grid-template-columns:1fr;gap:9px}
  .premiumCategoryTile{min-height:84px;grid-template-columns:48px minmax(0,1fr) 16px;padding:11px}
  .premiumCategoryIcon{width:48px;height:48px;border-radius:13px}.premiumCategoryIcon img{width:39px;height:39px}
}
@media(prefers-reduced-motion:reduce){.premiumCategoryTile{animation:none;transition:none}.premiumCategoryTile::before{display:none}}

/* Coded Shop category-button artwork */
.shopPremiumCategoryIcon,
#catGrid .tile .img{
  overflow:hidden!important;
  padding:0!important;
  background:#070707!important;
}
.shopPremiumCategoryIcon img,
#catGrid .tile .img img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  border-radius:inherit!important;
  background:#070707!important;
  filter:none!important;
}
.shopPremiumCategoryTile .shopPremiumCategoryIcon{
  width:64px!important;
  height:82px!important;
  border-radius:14px!important;
  border:1px solid rgba(226,188,67,.36)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.32)!important;
}
@media(min-width:700px){
  .shopPremiumCategoryTile{
    grid-template-columns:76px minmax(0,1fr) 18px!important;
    min-height:118px!important;
  }
  .shopPremiumCategoryTile .shopPremiumCategoryIcon{
    width:76px!important;
    height:102px!important;
  }
}