/* Strong dark theme with vivid red/green/blue accents; no ghost colours */
:root{
  --hn-bg: #0b0d10;
  --hn-card: #0f1318;
  --hn-border: #1a2028;
  --hn-text: #e5e9f0;
  --hn-muted: #a5adba;

  --hn-accent: #2b6cb0;      /* blue */
  --hn-accent-2: #2f855a;    /* green */
  --hn-accent-3: #c53030;    /* red */
}

html, body { background: var(--hn-bg); color: var(--hn-text); }
.nav-accent { background: #0c1116; }
.section-title { color: var(--hn-text); border-left: 4px solid var(--hn-accent); padding-left: .6rem; }

.card-dark { background: var(--hn-card); }
.modal-dark { background: var(--hn-card); color: var(--hn-text); }
.modal-dark .modal-header, .modal-dark .modal-footer { border-color: var(--hn-border); }

.border-dark-subtle { border-color: var(--hn-border) !important; }
.text-muted { color: var(--hn-muted) !important; }

.icon-img { width: 2rem; height: 2rem; object-fit: contain; }
.icon-i { font-size: 2rem; line-height: 1; }

.btn-accent{
  --bs-btn-bg: var(--hn-accent);
  --bs-btn-border-color: var(--hn-accent);
  --bs-btn-hover-bg: #245b92;
  --bs-btn-hover-border-color: #245b92;
  --bs-btn-color: #fff;
}
.btn-outline-accent{
  --bs-btn-color: var(--hn-accent);
  --bs-btn-border-color: var(--hn-accent);
  --bs-btn-hover-bg: var(--hn-accent);
  --bs-btn-hover-border-color: var(--hn-accent);
  --bs-btn-hover-color: #fff;
}
.btn-outline-danger{
  --bs-btn-color: var(--hn-accent-3);
  --bs-btn-border-color: var(--hn-accent-3);
  --bs-btn-hover-bg: var(--hn-accent-3);
  --bs-btn-hover-border-color: var(--hn-accent-3);
  --bs-btn-hover-color: #fff;
}

.conn-badge {
  background: #162236;
  border: 1px solid #274870;
  color: #d6e3f5;
}

@media (max-width: 576px){
  .icon-img, .icon-i { width: 1.75rem; height: 1.75rem; }
}