:root {
  --sb-w: 336px;
  --sb-bg: #0a0b0d;
  --sb-bg-2: #0d0f13;
  --sb-line: rgba(255, 255, 255, 0.07);
  --sb-line-strong: rgba(255, 255, 255, 0.14);
  --sb-txt: #a8afba;
  --sb-txt-hi: #ffffff;
  --sb-dim: #6b7381;
  --sb-acc: #002fa7;
  --sb-acc-hi: #3a63ff;
  --sb-warn: #d54e4e;
  --sb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sb-ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
}

.menu-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #c5c5c5;
  transform-origin: center;
  transition:
    transform 0.42s var(--sb-ease),
    opacity 0.22s ease,
    background-color 0.3s ease;
}

.menu-toggle:hover span,
.menu-toggle:focus-visible span { background: #fff; }

.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-toggle::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1px;
  background: var(--sb-acc);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--sb-ease);
}

.menu-toggle:hover::after,
.menu-toggle:focus-visible::after,
.menu-toggle.is-open::after { transform: scaleX(1); }

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sb-w);
  max-width: 86vw;
  height: 100vh;
  z-index: 2000;
  background: var(--sb-bg);
  overflow: hidden;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.6s var(--sb-ease);
  box-shadow: 26px 0 70px rgba(0, 0, 0, 0.72);
  will-change: transform;
}

#sidebar.open { transform: translate3d(0, 0, 0); }

#sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--sb-acc) 0%, var(--sb-acc-hi) 46%, rgba(0, 47, 167, .12) 100%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.72s var(--sb-ease) 0.06s;
  pointer-events: none;
  z-index: 3;
}

#sidebar.open::before { transform: scaleY(1); }

#sidebar .sidebar-scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 78px 0 42px;
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 99, 255, 0.55) transparent;
}

#sidebar .sidebar-scroll::-webkit-scrollbar { width: 5px; }
#sidebar .sidebar-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
#sidebar .sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sb-acc), var(--sb-acc-hi));
  border-radius: 3px;
}

.sidebar-title {
  margin: 0 22px 20px;
  padding: 0 0 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease 0.1s, transform 0.62s var(--sb-ease) 0.1s;
}

#sidebar.open .sidebar-title { opacity: 1; transform: none; }

.sidebar-title .t1 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3em;
  transition: letter-spacing 0.9s var(--sb-ease) 0.12s;
}

#sidebar.open .sidebar-title .t1 { letter-spacing: 0.12em; }

.sidebar-title .t2 {
  margin-top: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--sb-dim);
  text-align: left;
}

.sidebar-title::after {
  content: '';
  display: block;
  margin-top: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--sb-acc-hi), rgba(58, 99, 255, 0.06));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--sb-ease) 0.26s;
}

#sidebar.open .sidebar-title::after { transform: scaleX(1); }

.sidebar-group {
  position: relative;
  margin: 0 0 2px;
  padding: 0 22px;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition:
    clip-path 0.7s var(--sb-ease),
    opacity 0.5s ease;
}

#sidebar.open .sidebar-group {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition-delay: calc(0.14s + var(--gi, 0) * 0.045s);
}

.sidebar-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 0 9px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-dim);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.35s ease, letter-spacing 0.55s var(--sb-ease);
}

.sidebar-heading:hover,
.sidebar-heading:focus-visible {
  color: #cfd6e2;
  letter-spacing: 0.24em;
  outline: none;
}

.sidebar-heading::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sb-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--sb-ease);
}

#sidebar.open .sidebar-heading::after {
  transform: scaleX(1);
  transition-delay: calc(0.26s + var(--gi, 0) * 0.045s);
}

.sidebar-heading .sb-ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: rgba(140, 152, 174, 0.8);
  transition: color 0.35s ease, transform 0.5s var(--sb-ease);
}

.sidebar-heading:hover .sb-ico,
.sidebar-heading:focus-visible .sb-ico {
  color: var(--sb-acc-hi);
  transform: scale(1.12);
}

.sidebar-group::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--sb-acc-hi), rgba(58, 99, 255, 0.08));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.55s var(--sb-ease);
  pointer-events: none;
}

.sidebar-group:hover::before,
.sidebar-group:focus-within::before {
  transform: scaleY(1);
}

.sidebar-heading .sb-chev {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.42);
  transition: transform 0.5s var(--sb-ease), color 0.3s ease;
}

.sidebar-heading:hover .sb-chev { color: rgba(255, 255, 255, 0.75); }

.sidebar-group.is-collapsed .sidebar-heading .sb-chev { transform: rotate(-90deg); }

.sidebar-panel {
  max-height: 2400px;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition:
    max-height 0.55s var(--sb-ease),
    clip-path 0.5s var(--sb-ease),
    opacity 0.4s ease;
}

.sidebar-group.is-collapsed .sidebar-panel {
  max-height: 0;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 6px 0 10px;
}

.sidebar-menu > li {
  position: relative;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.48s var(--sb-ease);
}

#sidebar.open .sidebar-menu > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.2s + var(--gi, 0) * 0.045s + var(--i, 0) * 0.018s);
}

#sidebar .sidebar-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 7px 0;
  color: var(--sb-txt);
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left !important;
  border-radius: 3px;
  transition:
    color 0.3s ease,
    transform 0.42s var(--sb-ease),
    background-color 0.35s ease;
}

#sidebar .sidebar-menu > li > a:hover,
#sidebar .sidebar-menu > li > a:focus-visible {
  color: var(--sb-txt-hi);
  transform: translateX(5px);
  background-color: rgba(58, 99, 255, 0.09);
  outline: none;
}

#sidebar .sidebar-menu > li::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--sb-acc-hi);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s var(--sb-ease);
  pointer-events: none;
}

#sidebar .sidebar-menu > li:hover::before,
#sidebar .sidebar-menu > li:focus-within::before { transform: scaleX(1); }

.sidebar-ico {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: rgba(160, 172, 194, 0.72);
  transition: transform 0.45s var(--sb-ease), color 0.3s ease;
}

#sidebar .sidebar-menu > li > a:hover .sidebar-ico,
#sidebar .sidebar-menu > li > a:focus-visible .sidebar-ico {
  color: var(--sb-acc-hi);
  transform: translateY(-1px) scale(1.08);
}

.sidebar-group:hover .sidebar-ico { transform: rotate(-4deg); }
.sidebar-group:hover .sidebar-menu > li > a:hover .sidebar-ico { transform: translateY(-1px) scale(1.08); }

#sidebar .sidebar-menu > li > a[href^="http"]:hover .sidebar-ico { transform: translate(1px, -2px) scale(1.06); }

.sidebar-series {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding: 7px 0 11px;
}

.sidebar-series .sb-sep {
  display: inline-block;
  color: rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  transform: scaleX(1);
  transition: transform 0.4s var(--sb-ease), color 0.3s ease;
  transform-origin: center;
}

.sidebar-series:hover .sb-sep {
  transform: scaleX(1.6);
  color: rgba(58, 99, 255, 0.6);
}

.sidebar-series a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  color: var(--sb-txt);
  font-size: 0.8rem;
  border-radius: 3px;
  text-align: left !important;
  transition: color 0.28s ease, background-color 0.3s ease, transform 0.36s var(--sb-ease);
}

.sidebar-series a:hover,
.sidebar-series a:focus-visible {
  color: #fff;
  background-color: rgba(58, 99, 255, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.sidebar-series .sidebar-ico { width: 13px; height: 13px; }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.sidebar-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s linear 0s;
}

body.sidebar-open #header,
body.sidebar-open .spacer,
body.sidebar-open .parallax-container {
  transform: translate3d(10px, 0, 0) scale(0.996);
  opacity: 0.72;
  transition: transform 0.6s var(--sb-ease), opacity 0.5s ease;
}

#header,
.spacer,
.parallax-container {
  transition: transform 0.6s var(--sb-ease), opacity 0.5s ease;
  transform-origin: left center;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  #sidebar,
  #sidebar::before,
  .sidebar-title,
  .sidebar-title .t1,
  .sidebar-title::after,
  .sidebar-group,
  .sidebar-heading,
  .sidebar-heading::after,
  .sidebar-panel,
  .sidebar-menu > li,
  #sidebar .sidebar-menu > li::before,
  #sidebar .sidebar-menu > li > a,
  .sidebar-ico,
  .sidebar-series .sb-sep,
  .sidebar-series a,
  .sidebar-backdrop,
  .menu-toggle span,
  .menu-toggle::after,
  body.sidebar-open #header,
  body.sidebar-open .spacer,
  body.sidebar-open .parallax-container {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .sidebar-group,
  .sidebar-menu > li,
  .sidebar-title {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.sidebar-open #header,
  body.sidebar-open .spacer,
  body.sidebar-open .parallax-container {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 480px) {
  :root { --sb-w: 300px; }
  .sidebar-group { padding: 0 16px; }
  .sidebar-title { margin: 0 16px 18px; }
  #sidebar .sidebar-menu > li > a { font-size: 0.79rem; padding: 6px 6px 6px 0; }
  .sidebar-series a { font-size: 0.77rem; }
}