:root, [data-bs-theme="dark"] {
  --dvs-bg: #0b1016;
  --dvs-surface: #121a23;
  --dvs-surface-2: #182230;
  --dvs-border: #243142;
  --dvs-muted: #8a9bb0;
  --dvs-accent: #3fb6a8;
  --dvs-accent-rgb: 63, 182, 168;
  --dvs-amber: #f2b84b;
  --dvs-danger: #e5675d;
  --bs-body-bg: var(--dvs-bg);
  --bs-body-color: #dbe4ee;
  --bs-border-color: var(--dvs-border);
  --bs-secondary-color: var(--dvs-muted);
  --bs-primary: var(--dvs-accent);
  --bs-primary-rgb: var(--dvs-accent-rgb);
  --bs-link-color: var(--dvs-accent);
  --bs-link-hover-color: #6fd3c7;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
body { background: var(--dvs-bg); }
.font-mono, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* navbar */
.navbar { background: rgba(11, 16, 22, .92); backdrop-filter: blur(8px); }
.brand-mark { width: 30px; height: 30px; }
.live-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; background: var(--dvs-danger); }
.live-dot.on { background: var(--dvs-accent); box-shadow: 0 0 0 0 rgba(var(--dvs-accent-rgb), .6); animation: pulse 2s infinite; }

/* cards */
.card { background: var(--dvs-surface); border-color: var(--dvs-border); }
.card-header { background: transparent; border-color: var(--dvs-border); font-weight: 600; letter-spacing: .02em; }
.card-header .bi { color: var(--dvs-accent); }

/* status tiles */
.tile { background: var(--dvs-surface); border: 1px solid var(--dvs-border); border-radius: .75rem; padding: .75rem .9rem; height: 100%; min-width: 0; }
.tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dvs-muted); }
.tile-value { font-size: 1.35rem; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub { font-size: .8rem; color: var(--dvs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.on-air { border-color: var(--dvs-amber); box-shadow: 0 0 0 1px var(--dvs-amber) inset; }
.tile.on-air .tile-value { color: var(--dvs-amber); }

/* buttons in the accent colour (Bootstrap reads these per component) */
.btn-primary { --bs-btn-bg: var(--dvs-accent); --bs-btn-border-color: var(--dvs-accent); --bs-btn-color: #04211d;
  --bs-btn-hover-bg: #5ccabd; --bs-btn-hover-border-color: #5ccabd; --bs-btn-hover-color: #04211d;
  --bs-btn-active-bg: #34a093; --bs-btn-active-border-color: #34a093; --bs-btn-active-color: #04211d;
  --bs-btn-disabled-bg: var(--dvs-accent); --bs-btn-disabled-border-color: var(--dvs-accent); --bs-btn-disabled-color: #04211d;
  --bs-btn-focus-shadow-rgb: var(--dvs-accent-rgb); font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--dvs-accent); --bs-btn-border-color: rgba(var(--dvs-accent-rgb), .55);
  --bs-btn-hover-bg: rgba(var(--dvs-accent-rgb), .15); --bs-btn-hover-border-color: var(--dvs-accent); --bs-btn-hover-color: #a9ece4;
  --bs-btn-active-bg: var(--dvs-accent); --bs-btn-active-border-color: var(--dvs-accent); --bs-btn-active-color: #04211d;
  --bs-btn-focus-shadow-rgb: var(--dvs-accent-rgb); }
.form-control:focus, .form-check-input:focus { border-color: var(--dvs-accent); box-shadow: 0 0 0 .2rem rgba(var(--dvs-accent-rgb), .25); }
.form-check-input:checked { background-color: var(--dvs-accent); border-color: var(--dvs-accent); }
.border-primary { border-color: var(--dvs-accent) !important; }
body.busy { cursor: progress; }

/* mode buttons */
.mode-btn { font-weight: 600; letter-spacing: .04em; }
.btn-group > .btn-check:checked + .mode-btn { background: var(--dvs-accent); border-color: var(--dvs-accent); color: #04211d; }

/* search results */
.results { max-height: 320px; overflow-y: auto; }
.results .list-group-item { background: var(--dvs-surface); border-color: var(--dvs-border); cursor: pointer; }
.results .list-group-item:hover, .results .list-group-item:focus { background: var(--dvs-surface-2); }
.results .list-group-item.current { border-left: 3px solid var(--dvs-accent); }

/* DG-ID grid */
.dgid-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.dgid-grid button { padding: .35rem 0; font-size: .85rem; font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--dvs-surface-2); border: 1px solid var(--dvs-border); color: inherit; border-radius: .35rem; }
.dgid-grid button:hover { border-color: var(--dvs-accent); }
.dgid-grid button.active { background: var(--dvs-accent); border-color: var(--dvs-accent); color: #04211d; font-weight: 700; }
.dgid-grid button:disabled { opacity: .5; }

/* last heard */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--dvs-border); }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dvs-muted); font-weight: 600; }
.lh-row.active td { background: rgba(242, 184, 75, .08); }
.badge-mode { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; min-width: 3.4rem; }
.badge-DMR { background: #3d6fd9; } .badge-YSF { background: #2f9e8f; } .badge-NXDN { background: #9a5bd6; } .badge-P25 { background: #c27a2c; }
.on-air-badge { background: var(--dvs-amber); color: #2b1d00; animation: pulse-amber 1.6s infinite; }
.events li { border-color: var(--dvs-border) !important; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--dvs-accent-rgb), .6); } 70% { box-shadow: 0 0 0 .5rem rgba(var(--dvs-accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--dvs-accent-rgb), 0); } }
@keyframes pulse-amber { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .live-dot.on, .on-air-badge { animation: none; } }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; }

@media (max-width: 575.98px) {
  .tile-value { font-size: 1.1rem; }
  .dgid-grid button { font-size: .75rem; padding: .3rem 0; }
}

/* DMR network */
.net-dot { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--dvs-muted); }
.net-dot.connected { background: var(--dvs-accent); }
.net-dot.connecting, .net-dot.retrying { background: var(--dvs-amber); }
.net-dot.login_failed, .net-dot.closed { background: var(--dvs-danger); }
#dmr-networks .list-group-item { background: transparent; }
.tg-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; margin: 0 .3rem .3rem 0;
  border: 1px solid var(--dvs-border); border-radius: 999px; background: var(--dvs-surface-2); font-family: ui-monospace, Menlo, Consolas, monospace; }
.tg-chip button { border: 0; background: none; color: var(--dvs-muted); padding: 0; line-height: 1; }
.tg-chip button:hover { color: var(--dvs-danger); }
.form-select:focus { border-color: var(--dvs-accent); box-shadow: 0 0 0 .2rem rgba(var(--dvs-accent-rgb), .25); }
.list-group-item.is-current { box-shadow: inset 3px 0 0 var(--dvs-accent); }
#m17-module { flex: 0 0 5.5rem; padding-left: .6rem; padding-right: 1.9rem; background-position: right .5rem center; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* browser audio */
.form-range::-webkit-slider-thumb { background: var(--dvs-accent); }
.form-range::-moz-range-thumb { background: var(--dvs-accent); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem rgba(var(--dvs-accent-rgb), .3); }
.au-meter { height: .55rem; border-radius: 999px; background: var(--dvs-surface-2); border: 1px solid var(--dvs-border); overflow: hidden; }
.au-level { height: 100%; width: 0%; background: linear-gradient(90deg, var(--dvs-accent), var(--dvs-amber)); transition: width .1s linear; }
.au-ptt { width: 100%; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.1rem 1rem;
  border-radius: .9rem; border: 2px solid var(--dvs-border); background: var(--dvs-surface-2); color: inherit;
  font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; touch-action: none; user-select: none; -webkit-user-select: none; }
.au-ptt:not(:disabled):hover { border-color: var(--dvs-accent); }
.au-ptt:disabled { opacity: .45; }
.au-ptt.active { background: var(--dvs-danger); border-color: var(--dvs-danger); color: #fff; }
.au-ptt .bi { font-size: 1.4rem; }