/* Vchat Learning Hub 2.1 — cache-safe visual release */

/* Official Vchat mark supplied by StudioVainilla */
.brand-logo-shell{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  overflow:hidden;
}
.brand-logo-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Main product navigation: force a consistent button treatment even if an older stylesheet was cached. */
.topbar .hub-tabs{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:5px !important;
  margin:0 !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:var(--bg-soft) !important;
  min-width:max-content;
}
.topbar .hub-tabs a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 13px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  color:var(--muted) !important;
  background:transparent !important;
  text-decoration:none !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease !important;
}
.topbar .hub-tabs a:hover{
  color:var(--primary) !important;
  background:var(--panel) !important;
  border-color:var(--line) !important;
  text-decoration:none !important;
  transform:translateY(-1px);
}
.topbar .hub-tabs a.active{
  color:var(--primary) !important;
  background:var(--panel) !important;
  border-color:#d9d5ff !important;
  box-shadow:0 4px 14px rgba(69,61,180,.08) !important;
  text-decoration:none !important;
}

/* Sidebar section shortcuts should also look and behave as controls, not raw links. */
.sidebar .mobile-hub-tabs a,
.sidebar .quick-links a,
.sidebar .cat-group a{
  text-decoration:none !important;
}
.sidebar .mobile-hub-tabs a{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:var(--panel) !important;
  color:var(--muted) !important;
  font-weight:800 !important;
}
.sidebar .mobile-hub-tabs a:hover,
.sidebar .mobile-hub-tabs a:focus-visible{
  color:var(--primary) !important;
  border-color:#cbc6ff !important;
  background:var(--panel-2) !important;
  outline:none;
}

/* Header spacing and overflow protection */
.topbar{overflow:visible}
.brand-wrap,.top-actions,.hub-tabs,.search-trigger{min-width:0}
.brand{min-width:max-content}

/* Keyboard focus */
.hub-tabs a:focus-visible,
.mobile-hub-tabs a:focus-visible,
.app-link:focus-visible,
.icon-btn:focus-visible,
.search-trigger:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 22%,transparent) !important;
  outline-offset:2px !important;
}

@media (max-width:1320px){
  .topbar .hub-tabs a{padding:0 10px !important;font-size:11px !important}
}

@media (max-width:1080px){
  .topbar .hub-tabs{display:none !important}
  .mobile-hub-tabs{display:grid !important}
}

@media (max-width:540px){
  .brand-logo-shell{width:32px;height:32px;flex-basis:32px}
}