diff --git a/api/app/static/css/style.css b/api/app/static/css/style.css
index 191a48d..dee9ac2 100644
--- a/api/app/static/css/style.css
+++ b/api/app/static/css/style.css
@@ -849,6 +849,11 @@ tr.mapping-deleted td {
/* ── Mobile segmented control (hidden on desktop) ── */
.mobile-seg { display: none; }
+.seg-active {
+ background: var(--accent) !important;
+ border-color: var(--accent) !important;
+ color: #fff !important;
+}
/* ── Bottom nav (mobile) ─────────────────────────── */
.bottom-nav {
diff --git a/api/app/static/js/shared.js b/api/app/static/js/shared.js
index 9ac20ee..dd72a2c 100644
--- a/api/app/static/js/shared.js
+++ b/api/app/static/js/shared.js
@@ -194,7 +194,7 @@ function renderMobileSegmented(containerId, pills, onSelect) {
const btnStyle = 'font-size:0.75rem;height:32px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;flex:1;padding:0 0.25rem';
container.innerHTML = `${pills.map(p => {
- const cls = p.active ? 'btn btn-primary' : 'btn btn-outline-secondary';
+ const cls = p.active ? 'btn seg-active' : 'btn btn-outline-secondary';
const countColor = (!p.active && p.colorClass) ? ` class="${p.colorClass}"` : '';
return ``;
}).join('')}
`;
diff --git a/api/app/templates/base.html b/api/app/templates/base.html
index cf5c08b..cd1080c 100644
--- a/api/app/templates/base.html
+++ b/api/app/templates/base.html
@@ -19,7 +19,7 @@
{% set rp = request.scope.get('root_path', '') %}
-
+
@@ -140,7 +140,7 @@
-
+