:root {
  --teal: #a7cc22;
  --teal2: #7fa312;
  --navy: #171a16;
}

.brand-logo {
  position: relative;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.brand-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.55);
}

.brand-logo-nav { width: 62px; height: 46px; border-radius: 13px; }
.brand-logo-hero { width: 148px; height: 98px; margin-bottom: 18px; border-radius: 24px; }
.brand-logo-mobile { width: 62px; height: 44px; border-radius: 13px; }

.login-logo {
  position: relative;
  width: 112px;
  height: 76px;
  margin: 0 auto 20px;
  display: block;
  overflow: hidden;
  border: 1px solid #e8ecdf;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(73, 88, 33, .14);
}

.login-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.55);
}

.logo { padding-left: 2px; }
.logo strong span,
.mobile-logo > span:last-child { color: #f5b400; }
.sidebar { background: linear-gradient(180deg, #171a16, #252b1d); }
.nav-item.active,
.nav-item:hover { background: linear-gradient(100deg, rgba(167, 204, 34, .26), rgba(245, 180, 0, .08)); box-shadow: inset 3px 0 #a7cc22; }
.nav-item[hidden] { display: none !important; }
.status-dot { background: #a7cc22; box-shadow: 0 0 0 4px rgba(167, 204, 34, .16); }
.primary-button { background: linear-gradient(135deg, #a7cc22, #7fa312); box-shadow: 0 8px 20px rgba(127, 163, 18, .25); }
.login-brand { background: linear-gradient(145deg, #171a16, #343c24 62%, #a67b00 155%); }
.overview-total { background: linear-gradient(125deg, #20251b, #748f16 72%, #d59d00); }
.bar-summary-card:hover { border-color: #bfd968; }
.toast-icon { background: #8bad17; }

@media (max-width: 850px) {
  .mobile-logo { display: flex; }
}