/* =====================================================================
   VEXTRIS · Steam/Epic-style LIBRARY SIDEBAR — self-contained.
   Layout uses literal values (no CSS-var dependency) so it positions
   correctly regardless of which page theme is loaded.
   Activated when vx-library.js adds body.vx-has-sidebar.
   ===================================================================== */
.vx-sidebar {
  position: fixed !important;
  top: 60px; left: 0; bottom: 0; width: 276px;
  z-index: 95;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(14,12,26,0.94), rgba(9,8,17,0.97));
  border-right: 1px solid var(--vx-glass-brd, rgba(140,130,230,0.18));
  backdrop-filter: blur(16px) saturate(130%);
  padding: 1rem 0.75rem 0;
  overflow: hidden;
}
.vx-sb-user { display: flex; align-items: center; gap: 0.7rem; padding: 0.25rem 0.5rem 1rem; border-bottom: 1px solid var(--vx-glass-brd, rgba(140,130,230,0.18)); }
.vx-sb-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--vx-violet, #8b6bff), var(--vx-cyan, #4fd6ff)); box-shadow: 0 0 18px rgba(139,107,255,0.45); text-decoration: none; transition: transform 0.2s; }
.vx-sb-avatar:hover { transform: scale(1.06); }
.vx-sb-id { min-width: 0; }
.vx-sb-name { font-weight: 700; color: #fff; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-sb-wallet { font-size: 0.7rem; color: var(--vx-muted, #9aa0c4); font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-sb-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 0; border-bottom: 1px solid var(--vx-glass-brd, rgba(140,130,230,0.18)); }
.vx-sb-nav a { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; color: var(--vx-muted, #9aa0c4); text-decoration: none; transition: background 0.18s, color 0.18s; }
.vx-sb-nav a .i { width: 18px; text-align: center; color: var(--vx-cyan, #4fd6ff); }
.vx-sb-nav a:hover { background: rgba(139,107,255,0.12); color: #fff; }
.vx-sb-nav a.active { background: rgba(139,107,255,0.16); color: #fff; }
.vx-sb-search { padding: 0.85rem 0 0.6rem; }
.vx-sb-search input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.8rem; font-size: 0.78rem; color: var(--vx-text, #eef0ff); background: rgba(8,6,15,0.6); border: 1px solid var(--vx-glass-brd, rgba(140,130,230,0.18)); border-radius: 999px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.vx-sb-search input::placeholder { color: var(--vx-muted, #9aa0c4); }
.vx-sb-search input:focus { border-color: var(--vx-cyan, #4fd6ff); box-shadow: 0 0 0 3px rgba(79,214,255,0.16); }
.vx-sb-sec { display: flex; align-items: center; justify-content: space-between; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vx-muted, #9aa0c4); padding: 0.2rem 0.55rem 0.5rem; }
.vx-sb-count { color: var(--vx-cyan, #4fd6ff); font-weight: 700; }
.vx-sb-list { flex: 1; overflow-y: auto; padding: 0 0.1rem 0.5rem; scrollbar-width: thin; scrollbar-color: var(--vx-glass-brd, rgba(140,130,230,0.18)) transparent; }
.vx-sb-list::-webkit-scrollbar { width: 5px; }
.vx-sb-list::-webkit-scrollbar-thumb { background: var(--vx-glass-brd, rgba(140,130,230,0.18)); border-radius: 3px; }
.vx-sb-game { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.55rem; border-radius: 10px; color: var(--vx-text, #eef0ff); text-decoration: none; transition: background 0.16s; }
.vx-sb-game:hover { background: rgba(139,107,255,0.14); }
.vx-sb-thumb { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: rgba(235,240,255,0.92); background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); filter: drop-shadow(0 0 6px rgba(139,107,255,0.3)); }
.vx-sb-gn { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-sb-heart { color: var(--vx-pink, #ff5ec4); font-size: 0.7rem; }
.vx-sb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.vx-sb-dot.gold { background: var(--vx-gold, #ffc94d); box-shadow: 0 0 7px var(--vx-gold, #ffc94d); }
.vx-sb-dot.silver { background: var(--vx-silver, #d8dcf0); box-shadow: 0 0 7px var(--vx-silver, #d8dcf0); }
.vx-sb-dot.certified { background: var(--vx-green, #8ef0b4); box-shadow: 0 0 7px var(--vx-green, #8ef0b4); }
.vx-sb-empty { color: var(--vx-muted, #9aa0c4); font-size: 0.78rem; text-align: center; padding: 1.5rem 0.5rem; }
.vx-sb-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.55rem; border-top: 1px solid var(--vx-glass-brd, rgba(140,130,230,0.18)); }
.vx-sb-status { font-size: 0.72rem; color: var(--vx-muted, #9aa0c4); display: inline-flex; align-items: center; gap: 0.4rem; }
.vx-sb-online { width: 8px; height: 8px; border-radius: 50%; background: var(--vx-green, #8ef0b4); box-shadow: 0 0 8px var(--vx-green, #8ef0b4); }
.vx-sb-out { font-size: 0.72rem; font-weight: 600; color: var(--vx-muted, #9aa0c4); background: transparent; border: 1px solid var(--vx-glass-brd, rgba(140,130,230,0.18)); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.vx-sb-out:hover { color: #ff8aa0; border-color: rgba(255,138,160,0.5); }

/* Reflow page content into the centered space to the right of the rail */
body.vx-has-sidebar { padding-left: 276px; }

@media (max-width: 1080px) {
  .vx-sidebar { display: none !important; }
  body.vx-has-sidebar { padding-left: 0; }
}