/* Ember / graphite navigation. Motion runs on entry or interaction only. */
#sidebar.sidebar {
  --nav-accent: #ff7867;
  --nav-rgb: 255, 120, 103;
  --nav-surface: #111217;
  --nav-text: #e7e6e7;
  --nav-muted: #85848d;
  color: var(--nav-text) !important;
  background: linear-gradient(165deg, #151318 0%, #0e1015 45%, #0d0f13 100%) !important;
  border-right: 1px solid #30262b !important;
  box-shadow: 8px 0 32px #00000030, inset -1px 0 #ffffff03 !important;
  scrollbar-color: #443139 transparent;
  overscroll-behavior: contain;
}
:where(body.theme-light) #sidebar :where(*) { color: inherit !important; }
#sidebar .sb-brand-area { padding: 10px 9px 12px !important; }
#sidebar .sb-logo-stage {
  border-color: #4c2b2c !important;
  box-shadow: 0 6px 18px #00000040, 0 1px 0 #ffffff06 !important;
}
#sidebar .sb-navigation {
  position: relative;
  flex: 0 0 auto;
  margin: 0 8px 16px;
  padding: 0 6px 9px;
  border: 1px solid #ffffff0c;
  border-top-color: #80514c66;
  border-radius: 13px;
  background: linear-gradient(150deg, #211b2080, #121319 48%, #111217);
  box-shadow: inset 0 1px 0 #ffffff04, 0 8px 20px #00000018;
}
#sidebar .sb-navigation-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 5px 11px;
  margin-bottom: 2px;
  border-bottom: 1px solid #ffffff08;
  color: #d7b6b0 !important;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .15em;
}
#sidebar .sb-navigation-heading > svg { width: 15px; height: 15px; flex: none; stroke: var(--nav-accent); stroke-width: 1.35; }
#sidebar .sb-navigation-detail { margin-left: auto; width: 16px; height: 5px; border-block: 1px solid #a46c625e; transform: skewX(-30deg); }
#sidebar .sb-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 6px 7px !important;
  font-size: .52rem !important;
  letter-spacing: .13em;
  color: var(--nav-muted) !important;
}
#sidebar .sb-section-index { color: #70616a !important; font-size: .5rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#sidebar .sb-divider { margin: 8px 6px 0 !important; height: 1px; background: linear-gradient(90deg, #ff78671c, #ffffff09, transparent); }
#sidebar .sb-nav { gap: 5px !important; padding: 0 !important; }
#sidebar .sb-nav > * + * { margin-top: 0; }
#sidebar .sb-item, #sidebar .sb-btn {
  --nav-item-rgb: var(--nav-rgb);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  translate: 0;
  scale: 1 !important;
  transition: transform .3s cubic-bezier(.2,.75,.25,1), scale .16s ease,
    border-color .3s ease, background-color .3s ease, color .24s ease, box-shadow .3s ease !important;
}
#sidebar .sb-item {
  min-height: 43px !important;
  height: auto !important;
  gap: 9px !important;
  padding: 6px 9px 6px 7px !important;
  border: 1px solid #ffffff08 !important;
  border-radius: 9px !important;
  background: #ffffff02 !important;
  color: #aeacb5 !important;
  box-shadow: inset 0 1px #ffffff02 !important;
  font-size: .735rem !important;
  font-weight: 650;
}
#sidebar .sb-item::before, #sidebar .sb-btn::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(var(--nav-item-rgb), .23), rgba(var(--nav-item-rgb), .075) 65%, rgba(255,255,255,.025));
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.75,.25,1);
}
#sidebar .sb-item::after {
  content: '';
  position: relative;
  z-index: 1;
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  margin-left: 0;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateX(-3px) rotate(45deg);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
#sidebar .sb-item-icon {
  position: relative;
  z-index: 1;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px;
  border: 1px solid #ffffff08;
  border-radius: 8px !important;
  background: #1e2028 !important;
  color: #a6a4b0 !important;
  font-size: .76rem !important;
  box-shadow: inset 0 1px #ffffff06 !important;
  transition: transform .3s cubic-bezier(.2,.75,.25,1), background-color .3s ease, color .25s ease, border-color .3s ease, box-shadow .3s ease;
}
#sidebar .sb-item-icon > :is(i,svg) { translate: 0; scale: 1; }
#sidebar .sb-nav-svg { width: 15px; height: 15px; color: inherit !important; stroke: currentColor !important; }
#sidebar .sb-item-text { position: relative; z-index: 1; min-width: 0; transition: transform .3s cubic-bezier(.2,.75,.25,1); }
#sidebar .sb-item-ranking { --nav-item-rgb: 224, 180, 102; }
#sidebar .sb-item-downloads { --nav-item-rgb: 93, 203, 164; }
#sidebar .sb-item-ranking .sb-item-icon { color: #cbb17c !important; }
#sidebar .sb-item-downloads .sb-item-icon { color: #8cc5b2 !important; }
#sidebar .sb-item.sb-active {
  background: linear-gradient(110deg, rgba(var(--nav-item-rgb), .15), rgba(var(--nav-item-rgb), .045)) !important;
  border-color: rgba(var(--nav-item-rgb), .36) !important;
  color: #fff1ed !important;
  box-shadow: inset 2px 0 rgb(var(--nav-item-rgb)), inset 0 1px #ffffff08, 0 3px 12px #00000020 !important;
}
#sidebar .sb-item.sb-active .sb-item-icon {
  color: rgb(var(--nav-item-rgb)) !important;
  background: rgba(var(--nav-item-rgb), .13) !important;
  border-color: rgba(var(--nav-item-rgb), .25);
  box-shadow: inset 0 1px #ffffff08 !important;
}
#sidebar .sb-item.sb-active::after { opacity: .8; transform: translateX(0) rotate(45deg); color: rgb(var(--nav-item-rgb)); }
#sidebar .sb-badge {
  position: relative;
  z-index: 1;
  font-size: .46rem !important;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 5px !important;
  border-radius: 4px;
}
#sidebar .sb-badge-free { background: #62cda419 !important; border-color: #62cda43b !important; color: #8ddabb !important; }
#sidebar .sb-badge-hot { background: #ff786719 !important; border-color: #ff786744 !important; color: #ffad99 !important; }
#sidebar .sb-auth-area {
  position: relative;
  gap: 7px;
  margin-top: auto;
  padding: 14px 9px max(13px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #ffffff08;
  background: linear-gradient(0deg, #141217, #0e101500);
}
#sidebar .sb-btn {
  min-height: 39px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid #ffffff19 !important;
  background: #ffffff03 !important;
  color: #d6d2d6 !important;
  font-size: .71rem;
  font-weight: 750;
  box-shadow: inset 0 1px #ffffff05 !important;
}
#sidebar .sb-btn-login {
  border-color: #f58b715c !important;
  background: linear-gradient(115deg, #b33d35, #803831) !important;
  color: #fff2e9 !important;
  box-shadow: inset 0 1px #ffffff19, 0 4px 12px #650c0c30 !important;
}
#sidebar .sb-btn > :is(i,span):not(.sb-nav-ripple) { position: relative; z-index: 1; }
#sidebar .sb-nav-ripple {
  position: absolute;
  z-index: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--nav-item-rgb), .85), rgba(var(--nav-item-rgb), .15) 60%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
/* Color feedback also works with a mouse attached to a touch-first device. */
#sidebar :is(.sb-item,.sb-btn):is(:hover,:focus-visible) {
  border-color: rgba(var(--nav-item-rgb), .55) !important;
  color: #fff4ee !important;
  box-shadow: inset 0 1px #ffffff0d, 0 4px 14px rgba(var(--nav-item-rgb), .12) !important;
}
#sidebar :is(.sb-item,.sb-btn):is(:hover,:focus-visible)::before { opacity: 1; transform: translateX(0); }
#sidebar .sb-item:is(:hover,:focus-visible)::after { opacity: 1; transform: translateX(1px) rotate(45deg); }
#sidebar .sb-item:is(:hover,:focus-visible) .sb-item-icon {
  color: rgb(var(--nav-item-rgb)) !important;
  border-color: rgba(var(--nav-item-rgb), .42);
  background-color: rgba(var(--nav-item-rgb), .15) !important;
  box-shadow: inset 0 1px #ffffff0d, 0 2px 8px rgba(var(--nav-item-rgb), .1) !important;
}
#sidebar .sb-item.sb-active:is(:hover,:focus-visible) {
  box-shadow: inset 2px 0 rgb(var(--nav-item-rgb)), inset 0 1px #ffffff0d, 0 4px 14px rgba(var(--nav-item-rgb), .14) !important;
}
#sidebar .sb-btn-login::before { background: linear-gradient(105deg, #ffffff20, #ffb09112 70%, #ffffff05); }
@media (any-hover: hover) {
  #sidebar .sb-item:is(:hover,:focus-visible) { transform: translateX(3px); }
  #sidebar .sb-item:is(:hover,:focus-visible) .sb-item-text { transform: translateX(2px); }
  #sidebar .sb-item:is(:hover,:focus-visible) .sb-item-icon { transform: translateY(-1px) scale(1.06); }
  #sidebar .sb-btn:is(:hover,:focus-visible) { transform: translateY(-2px); }
}
#sidebar :is(.sb-item,.sb-btn):is(:active,.fx-pressing) { scale: .97 !important; transform: translateX(1px); transition-duration: .1s !important; }
#sidebar :is(.sb-item,.sb-btn):focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; color: #fff4ee !important; }
#sidebar :is(.sb-item,.sb-btn):focus-visible::before { opacity: 1; }

@keyframes sbNavEntry {
  from { opacity: 0; transform: translate3d(-9px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (min-width: 1181px) {
  #sidebar .sb-item { animation: sbNavEntry .36s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--nav-order, 0) * 32ms); }
}
@media (max-width: 1180px) {
  #sidebar.sidebar { z-index: 200; }
  #sidebar.open .sb-item { animation: sbNavEntry .36s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(65ms + var(--nav-order, 0) * 32ms); }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar .sb-item, #sidebar .sb-btn, #sidebar .sb-item-icon,
  #sidebar .sb-item::before, #sidebar .sb-item::after, #sidebar .sb-btn::before {
    animation: none !important;
    transition: none !important;
  }
  #sidebar .sb-item:is(:hover,:focus-visible), #sidebar .sb-btn:is(:hover,:focus-visible),
  #sidebar .sb-item:is(:hover,:focus-visible) .sb-item-icon,
  #sidebar .sb-item:is(:hover,:focus-visible) .sb-item-text,
  #sidebar :is(.sb-item,.sb-btn)::before { transform: none; }
  #sidebar .sb-item-text { transition: none; }
}