:root {
  --sp-red: #e30613;
  --sp-red-dark: #9f000a;
  --sp-header-bg: rgba(7,8,11,.94);
  --sp-panel-bg: rgba(14,16,24,.97);
  --sp-border: rgba(255,255,255,.14);
  --sp-text: #ffffff;
  --sp-muted: rgba(255,255,255,.72);
}

html[data-theme="light"] {
  --sp-header-bg: rgba(255,255,255,.96);
  --sp-panel-bg: rgba(255,255,255,.98);
  --sp-border: rgba(0,0,0,.13);
  --sp-text: #111111;
  --sp-muted: rgba(0,0,0,.62);
}

.header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--sp-header-bg) !important;
  border-bottom: 1px solid var(--sp-border);
  backdrop-filter: blur(16px);
}

.header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mobile-actions {
  display: none;
}

.sp-icon-btn {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.06);
  color: var(--sp-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
}

.sp-burger {
  width: 28px;
  height: 20px;
  position: relative;
}

.sp-burger span,
.sp-burger::before,
.sp-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: currentColor;
  transition: .2s ease;
}

.sp-burger span {
  top: 8px;
}

.sp-burger::before {
  top: 0;
}

.sp-burger::after {
  bottom: 0;
}

body.menu-open .sp-burger span {
  opacity: 0;
}

body.menu-open .sp-burger::before {
  top: 8px;
  transform: rotate(45deg);
}

body.menu-open .sp-burger::after {
  bottom: 9px;
  transform: rotate(-45deg);
}

.mobile-menu-panel {
  display: none;
}

@media (max-width: 900px) {
  .header {
    padding: 14px 0;
  }

  .header .nav {
    flex-wrap: wrap;
  }

  .header .menu {
    display: none !important;
  }

  .mobile-actions {
    display: flex;
    gap: 12px;
    margin-left: auto;
  }

  .mobile-menu-panel {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border-radius: 28px;
    border: 1px solid var(--sp-border);
    background:
      radial-gradient(circle at top left, rgba(227,6,19,.20), transparent 34%),
      var(--sp-panel-bg);
    box-shadow: 0 24px 60px rgba(0,0,0,.38);
  }

  body.menu-open .mobile-menu-panel {
    display: block;
  }

  .mobile-menu-panel a {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 58px;
    padding: 15px 17px;
    border-radius: 17px;
    color: var(--sp-text) !important;
    text-decoration: none !important;
    font-size: 21px;
    font-weight: 800;
  }

  .mobile-menu-panel a + a {
    border-top: 1px solid var(--sp-border);
  }

  .mobile-menu-panel a:hover,
  .mobile-menu-panel a.active {
    background: linear-gradient(135deg, var(--sp-red), var(--sp-red-dark));
    color: #fff !important;
  }

  .mobile-menu-panel .demo {
    margin-top: 12px;
    background: linear-gradient(135deg, var(--sp-red), var(--sp-red-dark));
    color: #fff !important;
    justify-content: space-between;
  }

  .mobile-menu-panel .icon {
    width: 30px;
    text-align: center;
  }
}