:root {
  --navy: #1d542b;
  --navy2: #216532;
  --red: #e95c0c;
  --gold: #eda72c;
  --bg: #fffaf0;
  --text: #173b23;
  --muted: #667269;
  --line: #eadfcb;
  --green: #338044;
  --shadow: 0 12px 40px rgba(33, 101, 50, .1);
}

.brand-panel { background: linear-gradient(140deg, rgba(23,77,36,.97), rgba(33,101,50,.92)), url('../banner.png') center/cover; }
.brand-mark span, .mobile-logo span, .logo > span { background: linear-gradient(135deg, var(--red), #c94308); }
.tabs { background: #f8f1e5; }
.tab.active { color: var(--navy); box-shadow: 0 3px 12px #dfd3bf; }
.auth-form input:focus, .field input:focus, .field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px #e3f0e5; }
.sidebar { background: linear-gradient(180deg, #184923, #216532); }
.nav-item:hover, .nav-item.active { background: #327340; }
.support-card { background: #2a6d38; border-color: #43864f; }
.support-card > span { background: #3e854b; }
.avatar, .mini-avatar { background: #e8f2e7; color: var(--green); }
.welcome { background: linear-gradient(115deg, #1d542b, #338044); }
.ref-code button { border-color: #70a578; background: #286936; }
.wallet-card { background: linear-gradient(145deg, #338044, #1d542b); }
.progress i { background: linear-gradient(90deg, var(--gold), var(--red)); }
.bar { background: linear-gradient(#438d50, #216532); }
.card { border-color: var(--line); box-shadow: 0 5px 20px rgba(33,101,50,.05); }
.primary { background: var(--green); }
.primary:hover { background: var(--navy); }
.link { color: var(--green); }
.topbar { background: #fffdf8; }
.workspace { background: var(--bg); }

/* Full Bestie identity in place of the temporary B badge. */
.brand-mark img,
.mobile-logo img,
.logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-mark { width: min(360px, 75%); }
.mobile-logo { width: 225px; max-width: 75%; }
.logo { margin: 0 10px 24px; gap: 6px; }
.logo img { width: 190px; border-radius: 4px; }
.logo button { flex: 0 0 auto; }