:root {
  --sidebar-bg: #09271a;
  --sidebar-surface: rgba(255, 255, 255, .055);
  --sidebar-line: rgba(174, 229, 198, .13);
  --sidebar-text: #b8d0c3;
  --sidebar-accent: #b9f04b;
}

.app-version-bar {
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-line);
  box-shadow: 0 8px 24px rgba(7, 31, 21, .16);
}

.sidebar {
  padding: 16px 14px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 4%, rgba(70, 211, 132, .12), transparent 24%),
    linear-gradient(180deg, #0a2b1d 0%, var(--sidebar-bg) 44%, #071f15 100%);
  border-right: 1px solid var(--sidebar-line);
  box-shadow: 12px 0 34px rgba(5, 25, 16, .13);
  scrollbar-width: thin;
  scrollbar-color: #285a42 transparent;
}

.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: #285a42; border-radius: 999px; }

.sidebar-brand {
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid var(--sidebar-line);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .12);
}

.brand {
  gap: 10px;
  min-height: 58px;
  padding: 8px 9px;
  border-radius: 13px;
  transition: background .2s ease, transform .2s ease;
}

.brand:hover { background: rgba(255, 255, 255, .045); }
.brand-mark {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid rgba(185, 240, 75, .26);
  border-radius: 12px;
  background: #071f15;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.brand strong { font-size: 15px; letter-spacing: -.2px; }
.brand small { color: #7fb095; font-size: 8px; font-weight: 750; letter-spacing: 1.55px; }

.sidebar-promo {
  margin-bottom: 14px;
  border: 1px solid var(--sidebar-line);
  border-radius: 14px;
  background: var(--sidebar-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.sidebar-promo:hover,
.sidebar-promo.active {
  border-color: rgba(100, 215, 154, .48);
  background: rgba(46, 151, 94, .15);
  transform: translateY(-1px);
}

.sidebar nav { gap: 6px; }
.nav-item {
  position: relative;
  min-height: 44px;
  padding: 10px 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #92b3a1;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-item:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .06);
  transform: translateX(2px);
}
.nav-item.active {
  color: #fff;
  border-color: rgba(185, 240, 75, .18);
  background: linear-gradient(90deg, rgba(40, 137, 81, .5), rgba(28, 102, 61, .26));
  box-shadow: inset 3px 0 var(--sidebar-accent), 0 8px 22px rgba(0, 0, 0, .11);
}
.nav-item.active::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sidebar-accent);
  box-shadow: 0 0 0 4px rgba(185, 240, 75, .09);
}
.nav-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  flex: 0 0 27px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  font-size: 15px;
}
.nav-item.active .nav-icon { color: var(--sidebar-accent); background: rgba(185, 240, 75, .1); }

.tool-account-nav {
  margin-top: 16px;
  padding-top: 13px;
  border-top-color: var(--sidebar-line);
}
.tool-account-nav .menu-label { color: #6f9f87; }
.tool-account-nav a {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--sidebar-text);
  transition: .18s ease;
}
.tool-account-nav a:hover {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .055);
  transform: translateX(2px);
}
.tool-account-nav a.active {
  border-color: rgba(185, 240, 75, .16);
  background: rgba(33, 116, 69, .35);
  box-shadow: inset 3px 0 var(--sidebar-accent);
}

.tool-member {
  border-color: var(--sidebar-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.tool-member a { background: rgba(255, 255, 255, .065); transition: .18s ease; }
.tool-member a:hover { color: #fff; background: rgba(62, 169, 109, .2); }
.tool-member.logged-in { background: rgba(255, 255, 255, .045); }
.tool-member .tool-logout { background: rgba(58, 139, 91, .2); }
.tool-member .tool-logout:hover { background: rgba(66, 164, 104, .3); }

@media (max-width: 800px) {
  .sidebar {
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-line);
    box-shadow: 0 10px 28px rgba(5, 25, 16, .13);
  }
  .sidebar-brand { margin-bottom: 9px; }
  .brand { min-height: 52px; padding: 6px 8px; }
  .sidebar nav { gap: 5px; }
  .nav-item { min-height: 40px; transform: none; }
  .nav-item:hover { transform: none; }
  .nav-item.active::after { display: none; }
  .app-version-bar { background: var(--sidebar-bg); }
}