:root {
  --bs-body-bg: #0e1410;
  --surface: #18211a;
  --surface-2: #121a13;
  --bs-primary: #23b24d;
  --bs-primary-rgb: 35, 178, 77;
  --bs-border-color: #2a3a2d;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-link-color: #46c96a;
  --bs-link-color-rgb: 70, 201, 106;   /* BS5 anchors read the -rgb form */
  --bs-link-hover-color-rgb: 99, 217, 132;
}

body {
  background-color: var(--bs-body-bg);
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, .navbar-brand { font-weight: 600; letter-spacing: -0.02em; }

/* ---- Nav ---- */
.navbar {
  background-color: rgba(20, 23, 27, 0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar .nav-link { color: rgba(255, 255, 255, 0.62); font-weight: 500; }
.navbar .nav-link:hover { color: #fff; }
/* Pixel-art leaf mark — keep it crisp at small sizes */
.leaf { image-rendering: pixelated; image-rendering: crisp-edges; }
.leaf-nav { width: 30px; height: 30px; }
.leaf-auth { width: 76px; height: 76px; filter: drop-shadow(0 6px 16px rgba(var(--bs-primary-rgb), .35)); }

/* ---- Cards / surfaces ---- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
}
.btn { border-radius: .6rem; font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #3399ff; --bs-btn-hover-border-color: #3399ff; }
.badge { font-weight: 500; }
.table { --bs-table-bg: transparent; }

/* ---- Forms (floating, dark) ---- */
.form-control, .form-select {
  background-color: var(--surface-2);
  border-color: var(--bs-border-color);
  color: #fff;
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface-2);
  color: #fff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.form-floating > label { color: rgba(255,255,255,.5); }
.form-floating > textarea.form-control { min-height: 110px; }
.form-text { color: rgba(255,255,255,.45); }

/* ---- Auth screens ---- */
.auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(var(--bs-primary-rgb), .12), transparent 60%);
}
.auth-card { width: 100%; max-width: 410px; }
.auth-card .card { box-shadow: 0 20px 60px rgba(0,0,0,.45); }

/* ---- Empty state ---- */
.empty-state { padding: 4rem 1rem; text-align: center; }
.empty-state .icon {
  width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
  color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1);
}

pre.console, .console { background: #0b100c; border: 1px solid var(--bs-border-color); border-radius: .6rem; }

/* Tame Bootstrap's default pink <code> so container names/paths read neutral */
:root { --bs-code-color: #8fd6a6; }
code { color: var(--bs-code-color); }

/* Console card */
.card-header { background: var(--surface-2); border-bottom: 1px solid var(--bs-border-color); }
#console { background: #0b100c; border-radius: 0 0 1rem 1rem; }