:root {
  --blue:#1D4ED8;
  --blue-mid:#2563EB;
  --blue-lit:#3B82F6;
  --blue-glow:rgba(37,99,235,0.14);
  --green:#16A34A;
  --green-glow:rgba(22,163,74,0.12);
  --r:12px; --r-sm:8px; --r-lg:18px;
  --ease:.22s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#070B12; --bg2:#0C1018; --bg3:#111620; --bg4:#161C28;
  --card:#0F1419; --cb:rgba(255,255,255,0.06);
  --t:#EDF2FF; --t2:#8896B0; --t3:#3D4A60; --t4:#222C3A; --t5:#ffffff;
  --line:rgba(255,255,255,0.06); --line2:rgba(255,255,255,0.1);
}
[data-theme="light"]{
  --bg:#F5F7FF; --bg2:#EDF0FB; --bg3:#E4E9F7; --bg4:#D8DFEF;
  --card:#FFFFFF; --cb:rgba(0,0,0,0.07);
  --t:#080E1E; --t2:#4A5570; --t3:#9AA3BA; --t4:#CBD2E4; --t5:#111827;
  --line:rgba(0,0,0,0.07); --line2:rgba(0,0,0,0.12);
}
    
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown > a svg {
  flex-shrink: 0;
  transition: transform var(--ease);
}

.nav-dropdown:hover > a svg,
.nav-dropdown:focus-within > a svg {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
  z-index: 1100;
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px !important;
  color: var(--t2);
  white-space: nowrap;
}

.nav-submenu a:hover {
  background: var(--bg3);
  color: var(--t);
}

.nav-submenu a.active {
  background: var(--blue-glow);
  color: var(--blue-lit);
}