:root {
            /* HA default light theme */
            --primary-color: #03a9f4;
            --dark-primary-color: #0288d1;
            --accent-color: #ff9800;
            --primary-text-color: #212121;
            --secondary-text-color: #727272;
            --disabled-text-color: #bdbdbd;
            --primary-background-color: #fafafa;
            --secondary-background-color: #e5e5e5;
            --card-background-color: #ffffff;
            --ha-card-border-radius: 12px;
            --divider-color: rgba(0, 0, 0, .12);
            --error-color: #db4437;
            --success-color: #43a047;
            --warning-color: #ffa600;
            --info-color: #039be5;
            --ha-card-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
                                  0 1px 5px 0 rgba(0,0,0,.12),
                                  0 3px 1px -2px rgba(0,0,0,.2);
            --code-background-color: #1e293b;
            --code-text-color: #e2e8f0;
            --app-header-background-color: var(--primary-color);
            --app-header-text-color: #fff;
            --badge-font-size: 11px;
            --badge-font-weight: 600;
            --badge-line-height: 1.2;
            --badge-min-height: 24px;
            --badge-padding-y: 4px;
            --badge-padding-x: 9px;
            --badge-radius: 999px;
            --tone-success-bg: rgba(67, 160, 71, 0.12);
            --tone-success-border: rgba(67, 160, 71, 0.18);
            --tone-warning-bg: rgba(255, 166, 0, 0.12);
            --tone-warning-border: rgba(255, 166, 0, 0.24);
            --tone-error-bg: rgba(219, 68, 55, 0.12);
            --tone-error-border: rgba(219, 68, 55, 0.18);
            --tone-neutral-bg: rgba(107, 114, 128, 0.10);
            --tone-neutral-border: rgba(107, 114, 128, 0.16);
        }

html.theme-light {
    color-scheme: light;
    --primary-color: #03a9f4;
    --dark-primary-color: #0288d1;
    --accent-color: #ff9800;
    --primary-text-color: #212121;
    --secondary-text-color: #727272;
    --disabled-text-color: #bdbdbd;
    --primary-background-color: #fafafa;
    --secondary-background-color: #e5e5e5;
    --card-background-color: #ffffff;
    --divider-color: rgba(0, 0, 0, .12);
    --ha-card-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
                          0 1px 5px 0 rgba(0,0,0,.12),
                          0 3px 1px -2px rgba(0,0,0,.2);
    --code-background-color: #1e293b;
    --code-text-color: #e2e8f0;
    --app-header-background-color: var(--primary-color);
    --app-header-text-color: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #03a9f4;
        --primary-background-color: #111111;
                --secondary-background-color: #202020;
                --card-background-color: #1c1c1c;
                --primary-text-color: #e1e1e1;
                --secondary-text-color: #9b9b9b;
                --disabled-text-color: rgba(225,225,225,.5);
                --divider-color: rgba(225, 225, 225, .12);
                --ha-card-box-shadow: 0 2px 2px 0 rgba(0,0,0,.4),
                                      0 1px 5px 0 rgba(0,0,0,.3),
                                      0 3px 1px -2px rgba(0,0,0,.5);
        --code-background-color: #0f172a;
    }
}

html.theme-dark {
    color-scheme: dark;
    --primary-color: #03a9f4;
    --primary-background-color: #111111;
    --secondary-background-color: #202020;
    --card-background-color: #1c1c1c;
    --primary-text-color: #e1e1e1;
    --secondary-text-color: #9b9b9b;
    --disabled-text-color: rgba(225,225,225,.5);
    --divider-color: rgba(225, 225, 225, .12);
    --ha-card-box-shadow: 0 2px 2px 0 rgba(0,0,0,.4),
                          0 1px 5px 0 rgba(0,0,0,.3),
                          0 3px 1px -2px rgba(0,0,0,.5);
    --code-background-color: #0f172a;
    --app-header-background-color: var(--primary-color);
    --app-header-text-color: #fff;
}

        * { margin: 0; padding: 0; box-sizing: border-box; }
body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         'Helvetica Neue', Arial, sans-serif;
            background: var(--primary-background-color);
            color: var(--primary-text-color);
            min-height: 100vh;
            padding: 20px;
        }
        .container { max-width: 1224px; margin: 0 auto; }

        /* Header */
        .header {
            background: var(--app-header-background-color);
            border-radius: var(--ha-card-border-radius); padding: 14px 20px 12px;
            margin-bottom: 20px; box-shadow: var(--ha-card-box-shadow);
            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        .header-row1 {
            display: flex; justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 10px 16px;
        }
        .header-title {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            min-width: 0;
        }
        .header-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            min-width: 0;
        }
        .header h1 {
            color: var(--app-header-text-color);
            font-size: 18px;
            line-height: 1.2;
            font-weight: 500;
            letter-spacing: -0.01em;
            margin-bottom: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .header-logo {
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            filter: brightness(10);
        }
        .header-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .header-version.channel-rc {
            --header-version-color: #ffe066;
        }
        .header-version.channel-beta {
            --header-version-color: #ffb4b4;
        }
        .header-version.channel-demo {
            --header-version-color: #b8f5ff;
        }
        .update-badge-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-sizing: border-box;
            min-height: var(--badge-min-height);
            font-size: var(--badge-font-size);
            line-height: var(--badge-line-height);
            text-decoration: none;
            border-radius: var(--badge-radius);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            white-space: nowrap;
            font-weight: var(--badge-font-weight);
            cursor: pointer;
            color: rgba(255,255,255,0.9);
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.18);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
            user-select: none;
            -webkit-user-select: none;
            transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
        }
        .update-badge-link:hover {
            background: rgba(255,255,255,0.20);
            border-color: rgba(255,255,255,0.30);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 3px rgba(255,255,255,0.12);
            transform: translateY(-1px);
        }
        .update-badge-link.has-update {
            color: #4ade80;
        }
        .update-badge-link.no-update {
            color: rgba(255,255,255,0.9);
        }
        .ui-icon-slot {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
        }
        .ui-icon-svg,
        .btn-icon-svg {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
        }
        #update-icon {
            width: 14px;
            height: 14px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .update-badge-link.checking #update-icon { animation: spin 1s linear infinite; }
        .update-modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5);
            display: flex; align-items: center; justify-content: center; z-index: 9999;
            animation: brFadeIn 0.15s ease-out;
        }
        .update-modal {
            background: var(--card-background-color, #fff); color: var(--primary-text-color, #333);
            border-radius: 12px; min-width: 340px; width: min(560px, calc(100vw - 24px)); max-width: 560px;
            max-height: 85vh; display: flex; flex-direction: column;
            box-shadow: var(--ui-overlay-shadow, 0 8px 32px rgba(0,0,0,0.3));
            overflow: hidden;
            animation: brSlideUp 0.2s ease-out;
        }
        .update-modal-header {
            background: var(--success-color, #4caf50); color: #fff;
            padding: 14px 18px; display: flex; align-items: center; gap: 10px;
        }
        .update-modal-header svg { width: 20px; height: 20px; flex-shrink: 0; }
        .update-modal-header-title { font-size: 16px; font-weight: 600; flex: 1; }
        .update-modal-header-close {
            background: none; border: none; color: rgba(255,255,255,0.7);
            font-size: 20px; cursor: pointer; padding: 0 2px; line-height: 1;
        }
        .update-modal-header-close:hover { color: #fff; }
        .update-modal-version {
            padding: 12px 18px; font-size: 13px; color: var(--secondary-text-color, #666);
            display: flex; align-items: center; gap: 8px;
            border-bottom: 1px solid var(--divider-color, #e0e0e0);
        }
        .update-modal-version-arrow { color: var(--success-color, #4caf50); font-weight: 700; }
        .update-modal-version-new { font-weight: 700; color: var(--success-color, #4caf50); }
        .update-modal-body {
            padding: 14px 18px; font-size: 13px; color: var(--secondary-text-color, #666);
            line-height: 1.6; overflow-y: auto; flex: 1; min-height: 0;
            background: var(--secondary-background-color, #f5f5f5);
            border-bottom: 1px solid var(--divider-color, #e0e0e0);
        }
        .update-modal-instructions,
        .update-modal-release-notes {
            background: var(--card-background-color, #fff);
            border: 1px solid var(--divider-color, #e0e0e0);
            border-radius: 10px;
            padding: 12px 14px;
        }
        .update-modal-release-notes { margin-top: 12px; }
        .update-modal-section-title {
            margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
            text-transform: uppercase; color: var(--secondary-text-color, #666);
        }
        .update-modal-instructions-copy {
            white-space: pre-line;
        }
        .update-modal-md-h2 {
            margin: 14px 0 6px; font-size: 14px; font-weight: 700;
            color: var(--primary-text-color, #111);
        }
        .update-modal-md-h2:first-child { margin-top: 0; }
        .update-modal-md-h3 {
            margin: 12px 0 4px; font-size: 11px; font-weight: 700;
            letter-spacing: 0.06em; text-transform: uppercase;
            color: var(--secondary-text-color, #666);
        }
        .update-modal-md-h3:first-child { margin-top: 0; }
        .update-modal-md-p {
            margin: 0 0 10px; line-height: 1.55;
        }
        .update-modal-md-p:last-child { margin-bottom: 0; }
        .update-modal-md-list {
            margin: 0 0 10px; padding-left: 20px;
        }
        .update-modal-md-list:last-child { margin-bottom: 0; }
        .update-modal-md-list li {
            margin-bottom: 4px; line-height: 1.55;
        }
        .update-modal-inline-code {
            padding: 1px 5px; border-radius: 4px;
            background: rgba(15, 23, 42, 0.06);
            color: var(--primary-text-color, #111);
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 0.92em;
            word-break: break-word;
        }
        .update-modal-command-row {
            margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        }
        .update-modal-command {
            flex: 1 1 320px; display: block; padding: 10px 12px; border-radius: 8px;
            background: rgba(15, 23, 42, 0.06); color: var(--primary-text-color, #333);
            border: 1px solid var(--divider-color, #d1d5db);
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 12px; line-height: 1.5; word-break: break-all;
        }
        .update-modal-copy-btn {
            padding: 8px 12px; border-radius: 8px; border: 1px solid var(--divider-color, #d1d5db);
            background: var(--card-background-color, #fff); color: var(--primary-text-color, #333);
            font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, background 0.15s;
        }
        .update-modal-copy-btn:hover { opacity: 0.85; }
        .update-modal-footer {
            padding: 14px 18px; display: flex; gap: 8px; justify-content: flex-end;
        }
        .update-modal-btn {
            padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
            cursor: pointer; text-decoration: none; border: none; display: inline-flex;
            align-items: center; gap: 6px; transition: opacity 0.15s, background 0.15s;
        }
        .update-modal-btn svg { width: 14px; height: 14px; }
        .update-modal-btn.secondary {
            background: var(--divider-color, #e0e0e0); color: var(--primary-text-color, #333);
        }
        .update-modal-btn.secondary:hover { opacity: 0.8; }
        .update-modal-btn.primary {
            background: var(--success-color, #4caf50); color: #fff;
        }
        .update-modal-btn.primary:hover { opacity: 0.9; }

        /* Bug Report Modal */
        .bugreport-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.45);
            display: flex; align-items: center; justify-content: center; z-index: 9999;
            animation: bugreport-fade-in 0.15s ease;
        }
        @keyframes bugreport-fade-in { from { opacity: 0; } to { opacity: 1; } }
        .bugreport-modal {
            background: var(--card-background-color, #fff); color: var(--primary-text-color, #333);
            border-radius: var(--ha-card-border-radius, 12px);
            width: 90vw; max-width: 520px;
            box-shadow: var(--ui-overlay-shadow, var(--ha-card-box-shadow, 0 2px 8px rgba(0,0,0,0.2)));
            max-height: 85vh; display: flex; flex-direction: column;
            overflow: hidden;
            animation: bugreport-slide-up 0.2s ease;
        }
        @keyframes bugreport-slide-up {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .bugreport-header {
            display: flex; align-items: center; gap: 10px;
            padding: 14px 20px;
            background: #f59e0b;
            color: #fff;
        }
        .bt-info-header {
            background: var(--info-color, #03a9f4);
        }
        .bugreport-header-icon { width: 18px; height: 18px; flex-shrink: 0; }
        .bugreport-header-title { font-size: 16px; font-weight: 600; flex: 1; }
        .bugreport-close {
            width: 28px; height: 28px; border-radius: 50%; border: none;
            background: rgba(255,255,255,0.15); color: var(--app-header-text-color, #fff);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 16px; line-height: 1; transition: background 0.15s;
            flex-shrink: 0;
        }
        .bugreport-close:hover { background: rgba(255,255,255,0.3); }
        .bugreport-body { padding: 20px; overflow-y: auto; flex: 1; }
        .bugreport-field { margin-bottom: 14px; }
        .bugreport-field label {
            display: block; font-size: 12px; font-weight: 600;
            color: var(--secondary-text-color, #666);
            text-transform: uppercase; letter-spacing: 0.5px;
            margin-bottom: 5px;
        }
        .bugreport-field input,
        .bugreport-field textarea {
            width: 100%; box-sizing: border-box;
            border: 1px solid var(--divider-color, rgba(0,0,0,.12));
            border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit;
            background: var(--primary-background-color, #fafafa);
            color: var(--primary-text-color, #333);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .bugreport-field input:focus,
        .bugreport-field textarea:focus {
            outline: none;
            border-color: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
        }
        .bugreport-field textarea { resize: vertical; min-height: 72px; }
        .bugreport-field input.invalid,
        .bugreport-field textarea.invalid {
            border-color: var(--error-color, #db4437);
            box-shadow: 0 0 0 3px rgba(219,68,55,0.1);
        }
        .bugreport-field .field-error {
            font-size: 11px; color: var(--error-color, #db4437);
            margin-top: 4px; display: none;
        }
        .bugreport-field input.invalid ~ .field-error,
        .bugreport-field textarea.invalid ~ .field-error { display: block; }
        .bugreport-preview-toggle {
            font-size: 12px; color: var(--secondary-text-color, #666); cursor: pointer;
            margin-bottom: 8px; user-select: none;
            display: flex; align-items: center; gap: 6px;
        }
        .bugreport-preview-toggle:hover { color: var(--primary-text-color, #333); }
        .bugreport-preview-arrow,
        .paired-arrow {
            display: inline-flex;
            width: 8px;
            height: 8px;
            flex-shrink: 0;
            border-right: 1.7px solid currentColor;
            border-bottom: 1.7px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.2s ease;
        }
        .bugreport-preview-arrow.expanded,
        .paired-arrow.expanded { transform: rotate(45deg); }
        .bugreport-preview {
            overflow-y: auto; font-size: 11px; font-family: monospace;
            background: var(--code-background-color, #1e293b);
            color: var(--code-text-color, #e2e8f0);
            border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
            white-space: pre-wrap; word-break: break-all;
            max-height: 180px; line-height: 1.5;
        }
        .bugreport-hint {
            display: flex; align-items: flex-start; gap: 8px;
            font-size: 12px; color: var(--secondary-text-color, #666);
            line-height: 1.5; margin-bottom: 4px;
            padding: 10px 12px; border-radius: 8px;
            background: var(--primary-background-color, #fafafa);
            border: 1px solid var(--divider-color, rgba(0,0,0,.12));
        }
        .bugreport-hint-icon { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; opacity: 0.6; }
        /* v2.70.0-rc.2 (#262) — pre-submit likely-causes hint block */
        .bugreport-likely-causes {
            display: flex; flex-direction: column; gap: 10px;
            padding: 12px 14px; border-radius: 8px;
            background: rgba(245, 158, 11, 0.06);
            border: 1px solid rgba(245, 158, 11, 0.4);
            margin-bottom: 4px;
        }
        .bugreport-likely-causes-heading {
            font-size: 13px; font-weight: 600; color: var(--primary-text-color, #222);
        }
        .bugreport-likely-causes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
        .bugreport-likely-cause {
            display: flex; flex-direction: column; gap: 4px;
            padding: 8px 10px; border-radius: 6px;
            background: var(--primary-background-color, #fff);
            border: 1px solid var(--divider-color, rgba(0,0,0,.08));
        }
        .bugreport-likely-cause-title { font-size: 13px; font-weight: 500; color: var(--primary-text-color, #222); }
        .bugreport-likely-cause-hint { font-size: 12px; color: var(--secondary-text-color, #666); line-height: 1.5; }
        .bugreport-likely-cause-action {
            align-self: flex-start; margin-top: 4px;
            font-size: 12px; font-weight: 500; color: #f59e0b;
            text-decoration: none; padding: 4px 10px; border-radius: 6px;
            border: 1px solid rgba(245, 158, 11, 0.4); background: transparent;
        }
        .bugreport-likely-cause-action:hover { background: rgba(245, 158, 11, 0.1); }
        .bugreport-likely-causes-dismiss {
            align-self: flex-end; font-size: 12px; color: var(--secondary-text-color, #666);
            text-decoration: none; padding: 4px 6px;
        }
        .bugreport-likely-causes-dismiss:hover { color: var(--primary-text-color, #222); }
        .bugreport-footer {
            display: flex; gap: 8px; justify-content: flex-end; align-items: center;
            padding: 14px 20px;
            border-top: 1px solid var(--divider-color, rgba(0,0,0,.12));
            flex-shrink: 0;
        }
        .bugreport-btn {
            padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500;
            cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px;
            transition: background 0.15s, opacity 0.15s;
        }
        .bugreport-btn.secondary {
            background: transparent; color: var(--secondary-text-color, #666);
        }
        .bugreport-btn.secondary:hover { background: var(--divider-color, rgba(0,0,0,.06)); }
        .bugreport-btn.primary {
            background: #f59e0b; color: #fff;
        }
        .bugreport-btn.primary:hover { background: #d97706; }
        .bt-info-btn-primary {
            background: var(--info-color, #03a9f4);
        }
        .bt-info-btn-primary:hover {
            background: #0288d1;
        }
        .bugreport-btn.primary.btn-disabled {
            opacity: 0.45; cursor: not-allowed;
        }
        .bugreport-btn.primary.btn-disabled:hover { background: #f59e0b; }
        .bugreport-btn-icon { width: 14px; height: 14px; flex-shrink: 0; }
        .bugreport-spinner {
            width: 14px; height: 14px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff; border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        /* Bug Report Modal — submission options */
        .bugreport-submit-section {
            margin-top: 16px;
            border-top: 1px solid var(--divider-color, rgba(0,0,0,.12));
            padding-top: 16px;
        }
        .bugreport-submit-row {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }
        .bugreport-method-select {
            flex: 1;
            min-width: 0;
            border: 1px solid var(--divider-color, rgba(0,0,0,.12));
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 14px;
            font-family: inherit;
            background: var(--card-background-color, #fff);
            color: var(--primary-text-color, #333);
            cursor: pointer;
            appearance: auto;
        }
        .bugreport-method-select:focus {
            outline: none;
            border-color: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
        }
        .bugreport-submit-btn {
            flex-shrink: 0;
            padding: 8px 20px;
            border: none;
            border-radius: 8px;
            background: #f59e0b;
            color: #000;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s, opacity 0.15s;
        }
        .bugreport-submit-btn:hover:not(:disabled) {
            background: #d97706;
        }
        .bugreport-submit-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .bugreport-submit-btn.is-success {
            background: #238636;
            color: #fff;
        }
        .bugreport-status {
            margin-top: 10px;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            display: none;
        }
        .bugreport-status.is-error {
            display: block;
            background: rgba(219, 68, 55, 0.08);
            border: 1px solid rgba(219, 68, 55, 0.3);
            color: var(--error-color, #db4437);
        }
        .bugreport-status.is-success {
            display: block;
            background: rgba(67, 160, 71, 0.08);
            border: 1px solid rgba(67, 160, 71, 0.3);
            color: var(--success-color, #43a047);
        }
        .bugreport-status a {
            color: inherit;
            text-decoration: underline;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .header-utility-block {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 32px;
            min-width: 0;
            margin-left: 4px;
            padding-left: 12px;
            border-left: 1px solid rgba(255,255,255,.2);
        }
        .header-user {
            font-size: 12px; color: rgba(255,255,255,0.92);
            text-decoration: none; cursor: pointer; font-weight: 500;
        }
        .header-user:hover { color: #fff; text-decoration: underline; }
        .header-signout {
            font-size: 12px; color: rgba(255,255,255,0.8); text-decoration: none;
            border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; padding: 3px 10px;
        }
        .header-signout:hover { background: rgba(255,255,255,0.1); }
        .header-row2-right {
            display: flex; align-items: center; gap: 12px;
            min-width: 0;
        }
        .header-row2-right .header-user {
            text-align: right; white-space: nowrap;
        }
        .header-link,
        .header-theme-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 32px;
            font-size: 13px;
            font-weight: 500;
            color: rgba(255,255,255,0.92);
            text-decoration: none;
            padding: 6px 10px;
            border-radius: 8px;
            background: transparent;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .header-theme-btn {
            border: none;
            cursor: pointer;
            font: inherit;
            justify-content: center;
            min-width: 32px;
            padding-inline: 8px;
        }
        .header-link:hover,
        .header-theme-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
        .header-link.has-errors { color: #f59e0b; }
        .header-link svg,
        .header-theme-btn svg,
        .header-btn-signout svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            stroke: currentColor;
            flex-shrink: 0;
        }
        .header-theme-btn .ui-icon-slot {
            width: 16px;
            height: 16px;
        }
        .header-link.has-errors svg { color: currentColor; }

        /* Header user name & sign-out (redesign) */
        .header-user-name {
            display: flex;
            align-items: center;
            gap: 6px;
            color: rgba(255,255,255,.9);
            font-size: 13px;
            font-weight: 500;
            min-height: 32px;
            min-width: 0;
            max-width: min(100%, 240px);
            position: relative;
            margin-left: 2px;
            padding-left: 12px;
            white-space: nowrap;
        }
        .header-user-name a {
            display: inline-block;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .header-utility-block .header-user-name::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 1px;
            height: 18px;
            background: rgba(255,255,255,.2);
            transform: translateY(-50%);
        }
        .header-user-icon {
            width: 16px;
            height: 16px;
        }
        .header-btn-signout-icon {
            width: 16px;
            height: 16px;
        }
        .header-btn-signout {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 32px;
            min-height: 32px;
            padding: 0 10px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: rgba(255,255,255,.88);
            opacity: .85;
            cursor: pointer;
            text-decoration: none;
            transition: opacity 150ms, background 150ms;
        }
        .header-btn-signout-label {
            display: none;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
        }
        .header-btn-signout:hover { opacity: 1; background: rgba(255,255,255,.12); }
        .health-icon {
            width: 12px;
            height: 12px;
            fill: currentColor;
            vertical-align: -1px;
        }

        .header-row2 {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 10px;
            padding-top: 9px;
            border-top: 1px solid rgba(255,255,255,.16);
            flex-wrap: wrap;
            gap: 8px 16px;
        }
        .header-sysinfo {
            font-size: 12px;
            color: rgba(255,255,255,0.82);
        }
        .runtime-badge {
            vertical-align: middle;
            margin-right: 6px;
            letter-spacing: 0.01em;
        }
        .health-indicator {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 12px;
            color: rgba(255,255,255,0.86);
        }
        .health-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: var(--badge-min-height);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            background: rgba(255,255,255,.12);
            white-space: nowrap;
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            user-select: none;
            -webkit-user-select: none;
        }
        .health-pill.meta-badge {
            background: rgba(255,255,255,.10);
            border-color: transparent;
            color: rgba(255,255,255,.9);
        }
        .health-indicator .health-pill.meta-badge.is-success {
            color: #9fe6a7;
            background: rgba(255,255,255,.10);
            border-color: transparent;
        }
        .health-indicator .health-pill.meta-badge.is-warning {
            color: #ffd28a;
            background: rgba(255,255,255,.10);
            border-color: transparent;
        }
        .health-indicator .health-pill.meta-badge.is-info {
            color: #8fdcff;
            background: rgba(255,255,255,.10);
            border-color: transparent;
        }
        .health-indicator .health-pill.meta-badge.is-error {
            color: #ffb2ab;
            background: rgba(255,255,255,.10);
            border-color: transparent;
        }
        .health-indicator .health-pill.meta-badge.is-neutral {
            color: rgba(255,255,255,.88);
            background: rgba(255,255,255,.08);
            border-color: transparent;
        }
        .health-pill .health-pill-text {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            white-space: nowrap;
        }
        .health-indicator .guidance-health-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 9px;
            border: 1px solid rgba(255,255,255,.22);
            background: rgba(255,255,255,.08);
            color: rgba(255,255,255,.94);
            cursor: pointer;
            font: inherit;
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
            transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .health-indicator .guidance-health-action:hover:not(:disabled) {
            background: rgba(255,255,255,.16);
            border-color: rgba(255,255,255,.28);
            transform: translateY(-1px);
        }
        .health-indicator .guidance-health-action[aria-expanded="true"] {
            background: rgba(255,255,255,.18);
            border-color: rgba(255,255,255,.3);
        }
        .health-indicator .guidance-health-action:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255,255,255,.18);
        }
        .health-indicator .guidance-health-action-label {
            display: inline-flex;
            align-items: center;
        }
        .health-indicator .guidance-health-action-icon {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
        }
        .health-indicator .guidance-health-action-icon .ui-icon-svg {
            width: 14px;
            height: 14px;
        }
        .version-info { text-align: right; font-size: 12px; color: var(--app-header-text-color); opacity: 0.95; }
        #system-info { color: rgba(255,255,255,0.8) !important; }

        /* Restart progress (inside header) */
        .restart-banner {
            display: none; margin-top: 10px;
        }
        .restart-banner.active { display: block; }
        .restart-status {
            display: flex; align-items: center; gap: 10px;
            font-size: 13px; color: rgba(255,255,255,0.9);
        }
        .restart-spinner {
            width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff; border-radius: 50%;
            animation: spin 0.8s linear infinite; flex-shrink: 0;
        }
        .restart-check {
            width: 14px; height: 14px; flex-shrink: 0;
            color: #4ade80;
        }
        .restart-warn {
            width: 14px; height: 14px; flex-shrink: 0;
            color: #fbbf24;
        }
        .restart-elapsed {
            opacity: 0.5; font-size: 11px; margin-left: auto; white-space: nowrap;
        }
        .restart-progress-bar {
            height: 3px; border-radius: 2px; margin-top: 8px;
            background: rgba(255,255,255,0.15); overflow: hidden;
        }
        .restart-progress-fill {
            height: 100%; border-radius: 2px;
            background: rgba(255,255,255,0.7);
            transition: width 0.5s ease;
        }
        .notice-stack {
            display: grid;
            gap: 12px;
            margin-bottom: 16px;
        }
        .notice-stack[hidden] {
            display: none !important;
        }
        body.backend-ui-locked .container > :not(.header):not(#status-grid) {
            display: none !important;
        }
        .notice-card {
            --notice-accent: var(--warning-color, #f59e0b);
            --notice-border: rgba(245, 158, 11, 0.2);
            --notice-icon-bg: rgba(245, 158, 11, 0.12);
            --notice-action-bg: var(--notice-accent);
            --notice-action-border: transparent;
            --notice-action-text: #fff;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            border-radius: var(--ha-card-border-radius);
            background: var(--card-background-color);
            border: 1px solid var(--notice-border);
            border-inline-start: 4px solid var(--notice-accent);
            box-shadow: var(--ha-card-box-shadow);
        }
        .notice-card[hidden] {
            display: none !important;
        }
        .notice-card--warning {
            --notice-accent: #c77700;
            --notice-border: rgba(255, 166, 0, 0.28);
            --notice-icon-bg: rgba(255, 166, 0, 0.12);
        }
        .notice-card--danger {
            --notice-accent: var(--error-color, #db4437);
            --notice-border: rgba(219, 68, 55, 0.2);
            --notice-icon-bg: rgba(219, 68, 55, 0.12);
        }
        .notice-card--info {
            --notice-accent: var(--info-color, #039be5);
            --notice-border: rgba(3, 155, 229, 0.22);
            --notice-icon-bg: rgba(3, 155, 229, 0.12);
        }
        .notice-card-icon {
            width: 36px;
            height: 36px;
            padding: 8px;
            border-radius: 10px;
            background: var(--notice-icon-bg);
            color: var(--notice-accent);
            align-self: start;
        }
        .notice-card-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .notice-card-title {
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--primary-text-color);
        }
        .notice-card-text {
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }
        .notice-card-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }
        .notice-card-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0 14px;
            border-radius: 999px;
            text-decoration: none;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
            transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, background 0.15s ease;
        }
        .notice-card-action:hover {
            transform: translateY(-1px);
        }
        .notice-card-action--primary {
            background: var(--notice-action-bg);
            border: 1px solid var(--notice-action-border);
            color: var(--notice-action-text);
            box-shadow: none;
        }
        .notice-card-action--primary:hover {
            opacity: 0.92;
        }
        .notice-action-menu {
            position: relative;
        }
        .notice-action-menu > summary {
            list-style: none;
            cursor: pointer;
        }
        .notice-action-menu > summary::-webkit-details-marker {
            display: none;
        }
        .notice-action-menu-toggle::after {
            content: "▾";
            margin-left: 8px;
            font-size: 11px;
        }
        .notice-action-menu[open] .notice-action-menu-toggle::after {
            content: "▴";
        }
        .notice-action-menu-list {
            position: absolute;
            right: 0;
            top: calc(100% + 8px);
            min-width: 200px;
            display: grid;
            gap: 6px;
            padding: 8px;
            border-radius: 14px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            box-shadow: var(--ha-card-box-shadow);
            z-index: 20;
        }
        .notice-card-action--menu-item {
            justify-content: flex-start;
            border-radius: 10px;
            background: rgba(148, 163, 184, 0.08);
            border: 1px solid rgba(148, 163, 184, 0.14);
            color: var(--primary-text-color);
        }
        .onboarding-card {
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: start;
        }
        .onboarding-card.is-collapsed {
            align-items: center;
        }
        .onboarding-card.is-collapsed .notice-card-copy {
            gap: 2px;
        }
        .onboarding-card.is-collapsed .notice-card-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .onboarding-card.is-collapsed .notice-card-actions {
            align-self: center;
        }
        .recovery-card {
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: start;
        }
        .onboarding-progress {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .onboarding-progress-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            width: 100%;
        }
        .onboarding-progress-pill {
            display: inline-flex;
            align-items: center;
            min-height: var(--badge-min-height);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            border: 1px solid rgba(128, 145, 171, 0.18);
            background: rgba(148, 163, 184, 0.08);
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            color: var(--secondary-text-color);
        }
        .onboarding-progress-pill--strong {
            background: rgba(3, 155, 229, 0.1);
            border-color: rgba(3, 155, 229, 0.16);
            color: var(--info-color, #039be5);
        }
        .onboarding-progress-pill--journey {
            background: rgba(99, 102, 241, 0.1);
            border-color: rgba(99, 102, 241, 0.16);
            color: var(--primary-text-color);
        }
        .onboarding-phase-rail {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 10px;
            margin-top: 2px;
        }
        .onboarding-phase {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid var(--divider-color);
            background: rgba(148, 163, 184, 0.06);
        }
        .onboarding-phase.is-complete {
            border-color: rgba(67, 160, 71, 0.26);
            background: rgba(67, 160, 71, 0.08);
        }
        .onboarding-phase.is-current {
            border-color: rgba(33, 150, 243, 0.24);
            background: rgba(33, 150, 243, 0.08);
        }
        .onboarding-phase-marker {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--primary-text-color);
            background: var(--card-background-color);
            border: 1px solid rgba(127, 137, 154, 0.22);
            flex: 0 0 auto;
        }
        .onboarding-phase-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .onboarding-phase-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .onboarding-phase-summary {
            font-size: 11px;
            line-height: 1.4;
            color: var(--secondary-text-color);
        }
        .onboarding-checkpoints {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        .onboarding-checkpoint {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(148, 163, 184, 0.08);
            color: var(--secondary-text-color);
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
        }
        .onboarding-checkpoint.is-reached {
            border-color: rgba(67, 160, 71, 0.24);
            background: rgba(67, 160, 71, 0.12);
            color: var(--primary-text-color);
        }
        .onboarding-checkpoint-icon {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: inherit;
        }
        .onboarding-step-list {
            display: grid;
            gap: 6px;
            margin-top: 10px;
        }
        .onboarding-step {
            --onboarding-step-surface: rgba(148, 163, 184, 0.08);
            --onboarding-step-rail-color: rgba(128, 145, 171, 0.18);
            display: grid;
            grid-template-columns: 24px minmax(0, 1fr) auto;
            gap: 8px;
            align-items: start;
            position: relative;
            padding: 8px 10px;
            border-radius: var(--ui-control-radius);
            background: var(--onboarding-step-surface);
            border: 1px solid rgba(148, 163, 184, 0.16);
        }
        .onboarding-step::before {
            content: "";
            position: absolute;
            left: 20px;
            top: 20px;
            bottom: -26px;
            width: 3px;
            border-radius: 999px;
            background: var(--onboarding-step-rail-color);
            pointer-events: none;
        }
        .onboarding-step:last-child::before {
            display: none;
        }
        .onboarding-step > * {
            position: relative;
            z-index: 1;
        }
        .onboarding-step.is-complete {
            --onboarding-step-surface: rgba(67, 160, 71, 0.08);
            --onboarding-step-rail-color: rgba(67, 160, 71, 0.24);
            border-color: rgba(67, 160, 71, 0.22);
            background: var(--onboarding-step-surface);
        }
        .onboarding-step.is-current {
            --onboarding-step-surface: rgba(3, 155, 229, 0.08);
            --onboarding-step-rail-color: rgba(3, 155, 229, 0.24);
            border-color: rgba(3, 155, 229, 0.24);
            background: var(--onboarding-step-surface);
        }
        .onboarding-step.is-upcoming {
            opacity: 0.92;
        }
        .onboarding-step-main {
            display: grid;
            gap: 4px;
            min-width: 0;
        }
        .onboarding-step-indicator {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid rgba(128, 145, 171, 0.2);
            font-size: 12px;
            font-weight: 700;
            background: var(--card-background-color);
            box-shadow: 0 0 0 4px var(--onboarding-step-surface);
            color: var(--secondary-text-color);
        }
        .onboarding-step-indicator-icon,
        .onboarding-step-indicator-number {
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .onboarding-step-indicator-number {
            font-variant-numeric: tabular-nums;
        }
        .onboarding-step-indicator-icon .ui-icon-svg {
            width: 13px;
            height: 13px;
        }
        .onboarding-step.is-complete .onboarding-step-indicator {
            background: var(--success-color, #43a047);
            border-color: rgba(67, 160, 71, 0.32);
            color: #fff;
        }
        .onboarding-step.is-current .onboarding-step-indicator {
            background: var(--card-background-color);
            border-color: rgba(3, 155, 229, 0.28);
            color: var(--info-color, #039be5);
        }
        .onboarding-step-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .onboarding-step-title {
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--primary-text-color);
        }
        .onboarding-step-badge {
            align-self: start;
            justify-self: end;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }
        .onboarding-step-summary {
            margin-top: 0;
            font-size: 12px;
            line-height: 1.45;
            color: var(--secondary-text-color);
        }
        .onboarding-step-note {
            font-size: 12px;
            line-height: 1.45;
            color: var(--secondary-text-color);
        }
        .onboarding-step-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .onboarding-step-fact {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid rgba(128, 145, 171, 0.18);
            background: rgba(148, 163, 184, 0.07);
            font-size: 11px;
            line-height: 1.35;
            color: var(--secondary-text-color);
        }
        .onboarding-step-fact-label {
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .onboarding-step-fact-value {
            min-width: 0;
        }
        .onboarding-step--interactive {
            display: block;
            padding: 0;
            overflow: hidden;
        }
        .onboarding-step-toggle {
            list-style: none;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 10px;
            align-items: start;
            padding: 10px 12px;
            cursor: pointer;
        }
        .onboarding-step-toggle::-webkit-details-marker {
            display: none;
        }
        .onboarding-step-expander {
            align-self: center;
            color: var(--secondary-text-color);
            font-size: 11px;
            line-height: 1;
        }
        .onboarding-step-expander::before {
            content: "▾";
        }
        .onboarding-step--interactive[open] .onboarding-step-expander::before {
            content: "▴";
        }
        .onboarding-step-body {
            display: grid;
            gap: 10px;
            padding: 0 12px 12px 46px;
            border-top: 1px solid rgba(148, 163, 184, 0.14);
        }
        .onboarding-step--interactive .onboarding-step-summary {
            margin-top: 0;
        }
        .onboarding-step-detail-list {
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
        }
        .onboarding-step-detail {
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(148, 163, 184, 0.06);
        }
        .onboarding-step-detail-label {
            font-size: 10px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
        }
        .onboarding-step-detail-value {
            margin-top: 4px;
            font-size: 12px;
            line-height: 1.4;
            color: var(--primary-text-color);
        }
        .onboarding-step-guidance {
            display: grid;
            gap: 6px;
            margin: 0;
            padding-left: 18px;
            font-size: 12px;
            line-height: 1.45;
            color: var(--secondary-text-color);
        }
        .onboarding-step-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .recovery-issue-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        .recovery-issue-pill {
            max-width: 100%;
        }
        .recovery-issue-pill-icon {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: inherit;
        }
        .device-blocked-hints-wrap {
            margin-top: 10px;
        }
        .device-blocked-hints {
            display: grid;
            gap: 8px;
        }
        .device-blocked-hints.is-compact {
            gap: 6px;
        }
        .device-blocked-hint {
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid rgba(255, 183, 77, 0.22);
            background: rgba(255, 183, 77, 0.1);
            color: var(--secondary-text-color);
        }
        .device-blocked-hint-title {
            font-size: 11px;
            font-weight: 700;
            line-height: 1.3;
            color: var(--primary-text-color);
        }
        .device-blocked-hint-message,
        .device-blocked-hint-deps {
            margin-top: 4px;
            font-size: 11px;
            line-height: 1.45;
        }
        .device-blocked-hint-actions {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .list-detail-body .device-blocked-hints {
            margin-top: 10px;
        }

        /* Status grid — responsive card grid */
        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            align-items: start;
            max-width: 1400px;
            gap: 10px; margin-bottom: 20px;
            position: relative;
            z-index: 2;
        }
        .no-devices-hint {
            grid-column: 1 / -1;
            text-align: center; padding: 40px 20px;
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius);
            box-shadow: var(--ha-card-box-shadow);
            color: var(--secondary-text-color, #888);
        }
        .no-devices-icon {
            width: 44px;
            height: 44px;
            margin: 0 auto 10px;
            color: var(--secondary-text-color);
            transform-origin: center;
        }
        .no-devices-text { font-size: 1.1em; margin-bottom: 14px; }
        .no-devices-link {
            display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
            background: var(--primary-color, #4fc3f7); color: #fff;
            border-radius: 6px; text-decoration: none; font-weight: 500;
            transition: opacity 0.2s;
        }
        .no-devices-link-icon {
            width: 14px;
            height: 14px;
        }
        .no-devices-link:hover { opacity: 0.85; }
        .service-state-hint {
            text-align: center;
        }
        .service-state-hint.is-warning,
        .service-state-hint.is-error {
            border: 1px solid rgba(255, 166, 0, 0.24);
        }
        .service-state-hint.is-info {
            border: 1px solid rgba(59, 130, 246, 0.22);
        }
        .service-state-copy {
            margin: 0 auto 14px;
            max-width: 560px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--secondary-text-color);
        }
        .service-state-icon.is-warning,
        .service-state-icon.is-error {
            color: var(--warning-color);
        }
        .service-state-icon.is-info {
            color: var(--info-color);
        }
        .service-state-icon--spin {
            animation: service-state-icon-spin 2.8s linear infinite;
        }
        .service-state-icon--pulse {
            animation: service-state-icon-pulse 1.8s ease-in-out infinite;
        }
        @keyframes service-state-icon-spin {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.06); }
            100% { transform: rotate(360deg) scale(1); }
        }
        @keyframes service-state-icon-pulse {
            0%, 100% { transform: scale(1); opacity: 0.92; }
            50% { transform: scale(1.08); opacity: 1; }
        }
        .device-card {
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius); padding: 12px 14px;
            box-shadow: var(--ha-card-box-shadow);
            display: flex; flex-direction: column; gap: 6px;
            border-left: 3px solid transparent;
            transition: opacity 0.2s, box-shadow 0.2s, border-color 0.2s;
            position: relative;
            z-index: 0;
        }
        .device-card:hover {
            box-shadow: var(--ui-surface-shadow-raised, 0 4px 12px rgba(0,0,0,.35));
            z-index: 4;
        }
        .device-card:focus-within,
        .device-card.preview-open {
            z-index: 5;
        }
        .device-card.playing,
        .device-card.is-success {
            border-left-color: var(--success-color);
        }
        .device-card.is-warning {
            border-left-color: var(--warning-color);
        }
        .device-card.inactive {
            opacity: 0.6;
            box-shadow: var(--ui-surface-shadow-muted, 0 1px 2px 0 rgba(0,0,0,.08));
        }
        .device-card.released {
            opacity: 0.6;
        }
        .device-card.device-card--disabled {
            opacity: 0.5;
            filter: grayscale(1);
            pointer-events: none;
        }
        .device-card.device-card--disabled:hover,
        .device-card.device-card--disabled:focus-within {
            box-shadow: var(--ha-card-box-shadow);
            z-index: 0;
        }
        .device-card.error,
        .device-card.is-error {
            border-left-color: var(--error-color);
        }
        .device-card-actions {
            display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
            max-height: 0; overflow: hidden; opacity: 0;
            padding-top: 0; margin-top: 0; border-top: none;
            transition: max-height 0.2s, opacity 0.15s, padding-top 0.2s, margin-top 0.2s;
        }
        .device-card:hover .device-card-actions,
        .device-card:focus-within .device-card-actions {
            max-height: 60px; opacity: 1;
            padding-top: 8px; margin-top: 8px;
            border-top: 1px solid var(--divider-color);
        }
        /* ── Card Row Structure ── */
        .card3-row1 { display: flex; align-items: center; }
        .card3-row1-left {
            display: flex; align-items: center; gap: 6px;
            flex: 1; min-width: 0;
        }
        .card3-row1b {
            display: flex; align-items: center; gap: 6px;
            flex-wrap: wrap; font-size: 12px;
        }
        .card3-row2 {
            display: flex; align-items: center; gap: 6px;
            min-height: 30px;
        }
        .card3-row-track {
            display: flex; align-items: center;
            min-height: 18px;
            position: relative;
        }
        .card3-row-track::after {
            content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
            background: linear-gradient(to right, transparent, var(--card-background-color));
            pointer-events: none;
        }
        .card3-row-progress {
            display: flex; align-items: center; gap: 8px;
            min-height: 14px;
        }

        /* Status chips */
        .status-chip {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 11px; color: var(--secondary-text-color);
            white-space: nowrap;
        }
        .chip-label {
            font-weight: 700; text-transform: uppercase;
            font-size: 10px; color: var(--secondary-text-color);
        }
        .chip-detail {
            display: inline-flex;
            align-items: center;
            min-height: var(--badge-min-height);
            font-size: var(--badge-font-size); font-weight: var(--badge-font-weight); text-transform: uppercase;
            color: var(--secondary-text-color);
            background: var(--divider-color, rgba(0,0,0,0.08));
            border: 1px solid transparent;
            border-radius: var(--badge-radius);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            line-height: var(--badge-line-height);
            cursor: default;
            user-select: none;
            -webkit-user-select: none;
        }
        .chip-detail.ma {
            color: var(--primary-color);
            background: rgba(139,92,246,0.12);
            border-color: transparent;
        }
        .chip-minor {
            font-size: 10px; color: var(--secondary-text-color);
            opacity: 0.8;
        }

        /* Status dots (8px circles) */
        .status-dot {
            display: inline-block; width: 8px; height: 8px;
            border-radius: 50%; flex-shrink: 0;
        }
        .status-dot.green { background: var(--success-color); box-shadow: 0 0 6px var(--success-color); }
        .status-dot.red { background: var(--error-color); }
        .status-dot.orange {
            background: var(--warning-color);
        }
        .status-dot.orange.pulse {
            animation: dot-pulse 1.2s ease-in-out infinite;
        }
        .status-dot.grey { background: #9ca3af; }
        @keyframes dot-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        /* Play state chip */
        .play-state {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 12px; font-weight: 600; white-space: nowrap;
        }
        .play-state-label {
            font-size: 11px; color: var(--secondary-text-color);
        }
        /* Track name with marquee on card hover */
        .track-art-wrap {
            position: relative; flex: 1; min-width: 0;
            display: flex; align-items: center;
        }
        .track-name {
            font-size: 12px; color: var(--secondary-text-color);
            white-space: nowrap; display: inline-block;
            overflow: hidden; text-overflow: ellipsis; max-width: 100%;
        }
        .device-card:hover .track-name {
            overflow: visible;
            animation: marquee-scroll 10s linear infinite;
            animation-delay: 1s;
        }
        @keyframes marquee-scroll {
            0%, 15%  { transform: translateX(0); }
            85%, 100% { transform: translateX(calc(-100% + 150px)); }
        }

        /* Album art popup on track hover */
        .album-art-popup {
            display: none; position: absolute;
            bottom: calc(100% + 6px); left: 0;
            width: 120px; height: 120px;
            border-radius: 6px; object-fit: cover;
            box-shadow: var(--ui-floating-shadow, 0 4px 16px rgba(0,0,0,.45));
            z-index: 50; pointer-events: none;
        }
        .track-art-wrap:hover .album-art-popup:not([src=""]) { display: block; }

        /* Tooltip (audio format on progress time) */
        .tooltip-wrap { position: relative; cursor: help; }
        .tooltip-text {
            display: none; position: absolute;
            bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
            background: #333; color: #e1e1e1; font-size: 11px;
            padding: 4px 8px; border-radius: 4px; white-space: nowrap;
            z-index: 100; box-shadow: var(--ui-floating-shadow, 0 2px 8px rgba(0,0,0,.4));
        }
        .tooltip-wrap:hover .tooltip-text { display: block; }

        /* Volume slider (in row2) */
        .vol-slider { flex: 1; height: 2px; accent-color: var(--primary-color); cursor: pointer; min-width: 60px; }
        .vol-pct { min-width: 32px; text-align: right; font-size: 12px; color: var(--secondary-text-color); }
        .mute-btn {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 28px; height: 28px; padding: 0 5px;
            border: 1px solid var(--divider-color); border-radius: 4px;
            background: var(--card-background-color); cursor: pointer;
            font-size: 14px; color: var(--primary-text-color);
        }
        .mute-btn:hover { background: var(--secondary-background-color); }
        .mute-btn.muted {
            background: rgba(219, 68, 55, 0.12);
            border-color: var(--error-color); color: var(--error-color);
        }

        /* Progress bar */
        .progress-bar {
            height: 3px; flex: 1; min-width: 0;
            background: var(--divider-color, rgba(0,0,0,0.12));
            border-radius: 2px; overflow: hidden;
        }
        .progress-fill {
            height: 100%; background: var(--primary-color);
            border-radius: 2px; transition: width 0.5s linear;
        }
        .progress-time {
            font-size: 11px; color: var(--secondary-text-color);
            white-space: nowrap; flex-shrink: 0;
        }
        .btn-bt-action {
            padding: 4px 8px; font-size: 11px; font-weight: 600; border: none;
            border-radius: 5px; cursor: pointer; color: white; transition: opacity 0.15s;
        }
        .btn-bt-action:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-bt-reconnect { background: var(--primary-color); }
        .btn-bt-reconnect:hover:not(:disabled) { background: var(--dark-primary-color); }
        .btn-bt-pair {
            background: transparent; color: var(--warning-color);
            border: 1px solid var(--warning-color);
        }
        .btn-bt-pair:hover:not(:disabled) { background: rgba(255,166,0,.12); }
        .btn-bt-release {
            background: transparent; color: var(--secondary-text-color);
            border: 1px solid var(--divider-color);
        }
        .btn-bt-release:hover:not(:disabled) {
            background: rgba(219,68,55,.08); color: var(--error-color);
            border-color: var(--error-color);
        }
        .btn-bt-reclaim { background: var(--success-color); }
        .btn-bt-reclaim:hover:not(:disabled) { background: #388e3c; }
        .btn-bt-disable { background: #6b7280; }
        .btn-bt-disable:hover:not(:disabled) { background: #4b5563; }
        .bt-action-status {
            font-size: 12px;
            color: var(--secondary-text-color);
            min-width: 0;
            flex: 0 1 auto;
            text-align: left;
        }
        .bt-action-status:empty {
            display: none;
        }
        /* Group controls */
        .group-controls {
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius); padding: 12px 20px;
            box-shadow: var(--ha-card-box-shadow); margin-bottom: 14px;
            display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
        }
        .group-controls-label {
            font-size: 12px; font-weight: 700; color: var(--primary-color);
            text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
        }
        .group-select-info { font-size: 12px; color: var(--secondary-text-color); white-space: nowrap; }
        .group-filter-sel {
            max-width: 160px;
        }
        .group-vol-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
        .group-vol-slider { flex: 1; height: 3px; accent-color: var(--primary-color); cursor: pointer; }
        .group-vol-pct { min-width: 36px; font-size: 13px; color: var(--secondary-text-color); text-align: right; }
        .btn-group-mute {
            padding: 4px 12px; font-size: 12px; font-weight: 600;
            border: 1px solid var(--divider-color);
            border-radius: 5px; background: var(--card-background-color);
            color: var(--primary-text-color); cursor: pointer;
        }
        .btn-group-mute.muted  { background: rgba(219,68,55,.1); border-color: var(--error-color); color: var(--error-color); }
        .btn-group-mute.paused { background: rgba(3,169,244,.1); border-color: var(--primary-color); color: var(--primary-color); }
        .device-select-cb { width: 15px; height: 15px; accent-color: var(--primary-color); cursor: pointer; }
        .device-card-title {
            font-size: 15px; font-weight: 700; color: var(--primary-text-color);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            min-width: 0;
        }
        .group-badge-unified {
            min-width: 0;
            max-width: 100%;
            text-decoration: none;
        }
        .group-badge-unified.empty,
        .group-badge-unified:disabled {
            background: rgba(107, 114, 128, 0.08);
            border-color: transparent;
            color: var(--secondary-text-color);
        }
        .group-badge-icon {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            opacity: 0.82;
        }
        .group-badge-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .device-card-group-badge.hover-only { display: none !important; }
        .device-card:hover .device-card-group-badge.hover-only,
        .device-card:focus-within .device-card-group-badge.hover-only { display: inline-flex !important; }

        /* ── Toolbar — HA-card style (redesign) ── */
        .toolbar-stack {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-bottom: 16px;
            position: relative;
            /* Bumped above .status-grid (z-index:2) so the bulk-actions
               dropdown menu — which is positioned outside the toolbar's
               box but inherits its stacking context — floats over the
               device cards instead of being intercepted by them. */
            z-index: 5;
        }
        .filter-bar {
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius) var(--ha-card-border-radius) 0 0;
            box-shadow: var(--ha-card-box-shadow);
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .toolbar-stack--filters-only .filter-bar {
            border-radius: var(--ha-card-border-radius);
        }
        .filter-icon {
            width: 18px;
            height: 18px;
            color: var(--secondary-text-color);
            flex-shrink: 0;
        }
        .filter-bar select {
            border: 1px solid var(--divider-color);
            border-radius: 6px;
            padding: 5px 10px;
            font-size: 13px;
            background: var(--card-background-color);
            color: var(--primary-text-color);
            cursor: pointer;
            font-family: inherit;
        }
        .action-bar {
            background: var(--card-background-color);
            border-radius: 0 0 var(--ha-card-border-radius) var(--ha-card-border-radius);
            box-shadow: var(--ha-card-box-shadow);
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid var(--divider-color);
            /* Lift above the status-grid (z-index:2) so the bulk-actions
               dropdown menu floats over device cards instead of being
               clipped/intercepted by them. */
            position: relative;
            z-index: 5;
        }
        .toolbar-count {
            font-size: 13px;
            color: var(--secondary-text-color);
        }
        .toolbar-sep {
            width: 1px;
            height: 20px;
            background: var(--divider-color);
        }
        .toolbar-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--secondary-text-color);
            text-transform: uppercase;
            letter-spacing: .5px;
        }
        .view-toggle {
            display: flex;
            margin-left: auto;
            border: 1px solid var(--divider-color);
            border-radius: 8px;
            overflow: hidden;
        }
        .view-toggle-btn {
            padding: 5px 10px;
            border: none;
            background: var(--card-background-color);
            color: var(--secondary-text-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 150ms;
        }
        .view-toggle-btn.active {
            background: var(--primary-color);
            color: #fff;
        }
        .view-toggle-btn svg { width: 16px; height: 16px; }
        .text-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 6px;
            border: 1px solid var(--divider-color);
            background: var(--secondary-background-color);
            color: var(--secondary-text-color);
            cursor: pointer;
            font-family: inherit;
            transition: background 150ms;
        }
        .text-btn:hover {
            background: var(--primary-background-color);
            color: var(--primary-text-color);
        }
        .text-btn svg { width: 14px; height: 14px; }

        /* ── Devices grid (redesign) ── */
        .devices-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }

        /* ── Card header (redesign) ── */
        .card-head {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .card-icon {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--secondary-background-color);
            color: var(--secondary-text-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .card-icon svg { width: 20px; height: 20px; }
        .card-icon.playing-icon,
        .card-icon.is-success {
            background: var(--tone-success-bg);
            color: #2e7d32;
        }
        .card-icon.is-warning {
            background: var(--tone-warning-bg);
            color: #c77700;
        }
        .card-icon.is-error {
            background: var(--tone-error-bg);
            color: #d14336;
        }
        .card-name-block { flex: 1; min-width: 0; }
        .card-name {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .name-text {
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 1;
            min-width: 0;
        }
        .adapter-link-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            max-width: 100%;
            min-height: var(--badge-min-height);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            border: 1px solid transparent;
            background: rgba(99, 102, 241, 0.10);
            color: var(--primary-text-color);
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
        }
        button.adapter-link-badge {
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            font-family: inherit;
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }
        .adapter-link-badge.empty,
        button.adapter-link-badge:disabled {
            background: var(--tone-neutral-bg);
            border-color: transparent;
            color: var(--secondary-text-color);
            cursor: default;
        }
        button.adapter-link-badge:disabled {
            opacity: 1;
        }
        .adapter-badge-icon {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            opacity: 0.82;
        }
        .adapter-badge-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .device-settings-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid rgba(127, 137, 154, 0.18);
            color: var(--secondary-text-color);
            flex-shrink: 0;
        }
        .device-settings-btn:hover,
        .list-settings-btn:hover {
            color: var(--primary-color);
            background: rgba(3,169,244,.08);
            border-color: rgba(3,169,244,.24);
        }

        /* ── Card chips (redesign) ── */
        .card-chips {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
        }
        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-sizing: border-box;
            min-height: var(--badge-min-height);
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            background: var(--secondary-background-color);
            color: var(--secondary-text-color);
        }
        .chip.adapter-link-badge {
            border: 1px solid transparent;
            background: rgba(99, 102, 241, 0.10);
            color: var(--primary-text-color);
        }
        .chip.service-chip-badge {
            border: 0;
            background: rgba(99, 102, 241, 0.10);
            color: var(--primary-text-color);
            gap: 6px;
        }
        .chip.adapter-link-badge.empty,
        .chip.adapter-link-badge:disabled {
            background: rgba(107, 114, 128, 0.08);
            border-color: transparent;
            color: var(--secondary-text-color);
        }
        .chip .dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .chip-icon {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }
        .ma-service-badge .chip-icon {
            opacity: 0.9;
        }
        .ma-chip-tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 0;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            color: currentColor;
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            letter-spacing: 0.01em;
            opacity: 0.82;
        }

        /* ── Card controls (redesign) ── */
        .card-controls {
            display: flex;
            align-items: center;
            gap: 0;
            min-height: 28px;
        }
        .icon-btn {
            min-width: 28px; min-height: 28px;
            border: none;
            background: none;
            cursor: pointer;
            border-radius: 4px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary-text-color);
            transition: color 150ms;
        }
        .icon-btn:hover {
            color: var(--primary-text-color);
            background: rgba(0,0,0,.05);
        }
        .media-btn {
            min-width: 30px;
            min-height: 30px;
            border: 0;
            background: transparent;
            cursor: pointer;
            border-radius: 999px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary-text-color);
            box-shadow: none;
            transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
        }
        .media-btn:hover {
            color: var(--primary-text-color);
            background: rgba(3, 169, 244, 0.08);
        }
        .media-btn svg { width: 16px; height: 16px; fill: currentColor; }
        .icon-btn.muted,
        .media-btn.muted,
        .list-inline-btn.muted {
            color: var(--error-color);
            background: rgba(219,68,55,.12);
        }
        .icon-btn.muted:hover,
        .media-btn.muted:hover,
        .list-inline-btn.muted:hover {
            color: var(--error-color);
            background: rgba(219,68,55,.18);
        }
        .icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
        .card-controls .icon-btn.ma-ready.active {
            color: var(--primary-color);
            background: rgba(3, 169, 244, 0.12);
        }
        .card-controls .icon-btn.ma-ready.active:hover {
            background: rgba(3, 169, 244, 0.18);
        }
        .card-controls .media-btn.ma-ready.active {
            color: var(--primary-color);
            background: rgba(3, 169, 244, 0.14);
        }
        .card-controls .media-btn.ma-ready.active:hover {
            background: rgba(3, 169, 244, 0.2);
        }
        .vol-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 4px;
        }
        .vol-pct {
            font-size: 11px;
            color: var(--secondary-text-color);
            min-width: 26px;
            text-align: right;
        }

        /* ── Volume slider — MA style (redesign) ── */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            flex: 1;
            height: 24px;
            background: transparent;
            cursor: pointer;
            margin: 0;
            padding: 0;
        }
        input[type="range"]::-webkit-slider-runnable-track {
            height: 4px;
            border-radius: 999px;
            background: var(--slider-fill, var(--divider-color));
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px; height: 14px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,.2);
            transition: transform 100ms;
            margin-top: -5px;
        }
        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        /* ── Now Playing (redesign) ── */
        .card-np {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 6px;
            background: rgba(0,0,0,.03);
            border-radius: 8px;
            margin-top: 0;
        }
        .np-art {
            width: 48px; height: 48px;
            flex-shrink: 0;
            border-radius: 6px;
            background: var(--secondary-background-color);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }
        .np-art.has-artwork-preview {
            cursor: zoom-in;
        }
        .np-art-image {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            object-fit: cover;
            display: block;
            position: relative;
            z-index: 1;
        }
        .artwork-preview-popover {
            display: none;
            position: absolute;
            left: 50%;
            bottom: calc(100% + 8px);
            transform: translateX(-50%);
            width: 220px;
            height: 220px;
            border-radius: 14px;
            object-fit: cover;
            box-shadow: var(--ui-floating-shadow, 0 14px 36px rgba(0,0,0,.42));
            border: 1px solid rgba(127, 137, 154, 0.22);
            background: var(--card-background-color);
            z-index: 70;
            pointer-events: none;
        }
        .np-art.preview-open .artwork-preview-popover:not([src=""]) {
            display: block;
        }
        .np-art svg { width: 18px; height: 18px; fill: var(--secondary-text-color); }
        .np-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .np-track {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .np-meta {
            font-size: 11px;
            color: var(--secondary-text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .np-progress {
            height: 2px;
            background: var(--divider-color);
            border-radius: 1px;
            margin-top: 2px;
            overflow: hidden;
        }
        .np-progress-fill {
            width: 0;
            height: 100%;
            background: var(--primary-color);
            border-radius: 1px;
            transition: width 0.3s;
        }
        .np-time {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            font-size: 11px;
            color: var(--secondary-text-color);
            white-space: nowrap;
            width: 100%;
        }

        /* ── Card actions row (redesign) ── */
        .card-actions-row {
            display: flex;
            align-items: center;
            gap: 6px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            padding-top: 0;
            border-top: 1px solid transparent;
            margin-top: 0;
            pointer-events: none;
            transition: max-height 0.2s ease, opacity 0.15s ease, padding-top 0.2s ease, border-color 0.2s ease;
        }
        .device-card:hover .card-actions-row,
        .device-card:focus-within .card-actions-row {
            max-height: 44px;
            opacity: 1;
            padding-top: 6px;
            border-top-color: var(--divider-color);
            pointer-events: auto;
        }
        .card-action-buttons {
            display: flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            flex: 1 1 auto;
            flex-wrap: nowrap;
        }
        .card-corner-settings-btn {
            margin-left: auto;
        }
        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            min-height: 30px;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid var(--divider-color);
            background: transparent;
            cursor: pointer;
            color: var(--secondary-text-color);
            font-family: inherit;
            transition: background 150ms, color 150ms, border-color 150ms, opacity 150ms, transform 150ms;
        }
        .action-btn:hover:not([disabled]) {
            background: var(--secondary-background-color);
            color: var(--primary-text-color);
        }
        .action-btn.accent {
            --action-hover-color: var(--primary-color);
            --action-hover-border: rgba(3, 169, 244, 0.28);
            --action-hover-bg: rgba(3, 169, 244, 0.10);
        }
        .action-btn.success {
            --action-hover-color: #2e7d32;
            --action-hover-border: rgba(67, 160, 71, 0.28);
            --action-hover-bg: rgba(67, 160, 71, 0.10);
        }
        .action-btn.warn {
            --action-hover-color: #c77700;
            --action-hover-border: rgba(255, 166, 0, 0.26);
            --action-hover-bg: rgba(255, 166, 0, 0.10);
        }
        .action-btn.danger {
            --action-hover-color: #d14336;
            --action-hover-border: rgba(219, 68, 55, 0.26);
            --action-hover-bg: rgba(219, 68, 55, 0.10);
        }
        .action-btn.accent:hover:not([disabled]),
        .action-btn.success:hover:not([disabled]),
        .action-btn.warn:hover:not([disabled]),
        .action-btn.danger:hover:not([disabled]) {
            color: var(--action-hover-color);
            border-color: var(--action-hover-border);
            background: var(--action-hover-bg);
        }
        .action-btn-content {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        .action-btn-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            display: block;
        }
        .action-btn-label {
            white-space: nowrap;
        }
        /* ── Hidden disabled devices footer ── */
        .hidden-devices-footer {
            text-align: center;
            font-size: 12px;
            color: var(--secondary-text-color);
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .hidden-devices-footer svg { width: 14px; height: 14px; fill: currentColor; }
        .hidden-devices-footer a { color: var(--primary-color); }
        .status-grid.list-view {
            display: block;
        }
        .list-view-shell {
            border: 1px solid var(--divider-color);
            border-radius: 12px;
            overflow: visible;
            background: var(--card-background-color);
        }
        .list-header,
        .list-row-main {
            display: grid;
            grid-template-columns: 40px minmax(220px, 1.9fr) 94px 92px 126px minmax(100px, 0.67fr) 118px;
            gap: 12px;
            align-items: center;
        }
        .list-header {
            padding: 11px 16px;
            background: var(--primary-background-color);
            border-bottom: 1px solid var(--divider-color);
        }
        .list-sort-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0;
            border: none;
            background: none;
            font: inherit;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
            cursor: pointer;
        }
        .list-sort-btn.active {
            color: var(--primary-color);
        }
        .list-sort-label {
            cursor: default;
        }
        .list-col-divider-start,
        .list-col-divider-mid,
        .list-col-divider-end,
        .list-status-cell,
        .list-adapter-cell,
        .list-group-cell,
        .list-vol-wrap,
        .list-actions {
            position: relative;
        }
        .list-col-divider-start,
        .list-col-divider-mid,
        .list-col-divider-end,
        .list-status-cell,
        .list-adapter-cell,
        .list-group-cell,
        .list-vol-wrap,
        .list-actions {
            padding-left: 10px;
        }
        .list-col-divider-start::before,
        .list-col-divider-mid::before,
        .list-col-divider-end::before,
        .list-status-cell::before,
        .list-adapter-cell::before,
        .list-group-cell::before,
        .list-vol-wrap::before,
        .list-actions::before {
            content: '';
            position: absolute;
            left: -6px;
            top: -10px;
            bottom: -10px;
            width: 1px;
            background: rgba(127, 137, 154, 0.18);
        }
        .list-col-divider-mid,
        .list-col-divider-end,
        .list-sort-label {
            color: rgba(107, 114, 128, 0.92);
        }
        .list-row {
            border-bottom: 1px solid var(--divider-color);
            position: relative;
            z-index: 0;
        }
        .list-row:last-child {
            border-bottom: none;
        }
        .list-row:hover,
        .list-row:focus-within,
        .list-row.expanded,
        .list-row.preview-open {
            z-index: 4;
        }
        .list-row-main {
            padding: 8px 16px;
            min-height: 44px;
            cursor: pointer;
            transition: background 0.15s ease, box-shadow 0.15s ease;
        }
        .list-row:hover .list-row-main,
        .list-row.expanded .list-row-main {
            background: rgba(3, 169, 244, 0.05);
        }
        .list-row.is-success .list-row-main,
        .list-row.is-success .list-row-detail {
            box-shadow: inset 3px 0 0 var(--success-color);
        }
        .list-row.is-warning .list-row-main,
        .list-row.is-warning .list-row-detail {
            box-shadow: inset 3px 0 0 var(--warning-color);
        }
        .list-row.is-error .list-row-main,
        .list-row.is-error .list-row-detail {
            box-shadow: inset 3px 0 0 var(--error-color);
        }
        .list-row.list-row--disabled {
            opacity: 0.5;
            filter: grayscale(1);
        }
        .list-row.list-row--disabled .list-row-main,
        .list-row.list-row--disabled .list-row-detail {
            pointer-events: none;
        }
        .list-row.list-row--disabled:hover .list-row-main,
        .list-row.list-row--disabled.expanded .list-row-main {
            background: transparent;
        }
        .list-select-cell {
            display: flex;
            justify-content: center;
        }
        .list-select-cell input {
            width: 16px;
            height: 16px;
        }
        .list-cell-name {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .list-name-icon {
            position: relative;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--secondary-background-color);
            color: var(--secondary-text-color);
        }
        .list-name-icon svg {
            width: 16px;
            height: 16px;
        }
        .list-name-icon.is-success {
            background: rgba(67, 160, 71, 0.12);
            color: #2e7d32;
        }
        .list-name-icon.is-warning {
            background: rgba(255, 166, 0, 0.12);
            color: #c77700;
        }
        .list-name-icon.is-error {
            background: rgba(219, 68, 55, 0.12);
            color: #d14336;
        }
        .list-name-icon.is-neutral {
            background: rgba(107, 114, 128, 0.10);
            color: #6b7280;
        }
        .list-name-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1;
        }
        .list-name-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .list-name-title-group {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
            flex: 0 1 auto;
            max-width: 100%;
        }
        .list-name-title-row .list-name-title {
            flex: 1 1 auto;
            min-width: 0;
        }
        .card-name-eq {
            flex: 0 0 auto;
        }
        .list-name-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list-name-meta {
            font-size: 11px;
            color: var(--secondary-text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list-inline-badges {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            flex: 0 0 auto;
            min-width: max-content;
            margin-left: 4px;
            margin-top: 0;
        }
        .list-inline-badges .chip {
            align-self: center;
        }
        .list-inline-badges .status-dot:not(.meta-badge-state-dot) {
            width: 6px;
            height: 6px;
            box-shadow: none;
        }
        .list-inline-badge {
            min-width: 0;
            flex-shrink: 0;
        }
        .battery-chip,
        .list-battery-chip {
            min-width: 0;
            padding-inline: 8px;
            gap: 0;
            justify-content: center;
        }
        .chip.meta-badge.battery-chip .meta-badge-indicator,
        .chip.meta-badge.list-battery-chip .meta-badge-indicator {
            width: 18px;
            height: 14px;
            margin-right: 0;
        }
        .chip.meta-badge.battery-chip .meta-badge-indicator-icon,
        .chip.meta-badge.list-battery-chip .meta-badge-indicator-icon {
            width: 18px;
            height: 14px;
        }
        .battery-chip svg,
        .list-battery-chip svg {
            flex-shrink: 0;
        }
        .list-name-meta-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            flex-wrap: nowrap;
        }
        .list-name-meta-row.is-controls {
            min-height: 24px;
            width: 100%;
            justify-content: flex-end;
        }
        .list-name-meta-row .list-name-meta {
            flex: 1 1 0;
            min-width: 0;
        }
        .list-status-cell,
        .list-adapter-cell,
        .list-group-cell,
        .list-vol-wrap {
            display: flex;
            align-items: center;
            align-self: start;
            margin-top: 0;
            margin-bottom: 0;
        }
        button.meta-badge {
            appearance: none;
            -webkit-appearance: none;
            font-family: inherit;
        }
        button.meta-badge:disabled {
            opacity: 1;
        }
        /* Badge semantics: interactive badges keep a visible frame; passive badges stay frameless. */
        .meta-badge {
            --meta-badge-state-color: currentColor;
            --meta-badge-state-bg: rgba(107, 114, 128, 0.10);
            --meta-badge-state-bg-hover: rgba(107, 114, 128, 0.12);
            --meta-badge-state-border: rgba(107, 114, 128, 0.16);
            --meta-badge-state-glow: rgba(107, 114, 128, 0.08);
            --meta-badge-hover-border: rgba(107, 114, 128, 0.22);
            --meta-badge-hover-glow: rgba(107, 114, 128, 0.12);
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            max-width: 100%;
            min-height: var(--badge-min-height);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            border: 1px solid transparent;
            background: rgba(107, 114, 128, 0.08);
            color: var(--secondary-text-color);
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
            user-select: none;
            -webkit-user-select: none;
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        }
        .meta-badge .meta-badge-indicator {
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: currentColor;
        }
        .meta-badge .meta-badge-indicator.is-pulse {
            animation: dot-pulse 1.2s ease-in-out infinite;
        }
        .meta-badge .meta-badge-indicator-icon {
            width: 13px;
            height: 13px;
            display: block;
            filter: none;
        }
        .meta-badge .status-symbol-indicator {
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            text-shadow: none;
        }
        .meta-badge .status-symbol-indicator-text {
            display: block;
            line-height: 1;
        }
        .meta-badge-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .meta-badge.meta-badge-interactive {
            cursor: pointer;
            border-color: var(--meta-badge-state-border);
            box-shadow: none;
        }
        .meta-badge.meta-badge-interactive:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--meta-badge-hover-glow);
        }
        .meta-badge.is-success {
            --meta-badge-state-color: #2e7d32;
            --meta-badge-state-bg: rgba(67, 160, 71, 0.14);
            --meta-badge-state-bg-hover: rgba(67, 160, 71, 0.16);
            --meta-badge-state-border: rgba(67, 160, 71, 0.18);
            --meta-badge-state-glow: rgba(67, 160, 71, 0.08);
            --meta-badge-hover-border: rgba(67, 160, 71, 0.18);
            --meta-badge-hover-glow: rgba(67, 160, 71, 0.14);
        }
        .meta-badge.is-warning {
            --meta-badge-state-color: #c77700;
            --meta-badge-state-bg: rgba(255, 166, 0, 0.10);
            --meta-badge-state-bg-hover: rgba(255, 166, 0, 0.12);
            --meta-badge-state-border: rgba(255, 166, 0, 0.24);
            --meta-badge-state-glow: rgba(255, 166, 0, 0.08);
            --meta-badge-hover-border: rgba(255, 166, 0, 0.24);
            --meta-badge-hover-glow: rgba(255, 166, 0, 0.14);
        }
        .meta-badge.is-info {
            --meta-badge-state-color: #0277bd;
            --meta-badge-state-bg: rgba(3, 169, 244, 0.10);
            --meta-badge-state-bg-hover: rgba(3, 169, 244, 0.13);
            --meta-badge-state-border: rgba(3, 169, 244, 0.18);
            --meta-badge-state-glow: rgba(3, 169, 244, 0.06);
            --meta-badge-hover-border: rgba(3, 169, 244, 0.18);
            --meta-badge-hover-glow: rgba(3, 169, 244, 0.10);
        }
        .meta-badge.is-error {
            --meta-badge-state-color: #d14336;
            --meta-badge-state-bg: rgba(219, 68, 55, 0.10);
            --meta-badge-state-bg-hover: rgba(219, 68, 55, 0.12);
            --meta-badge-state-border: rgba(219, 68, 55, 0.18);
            --meta-badge-state-glow: rgba(219, 68, 55, 0.08);
            --meta-badge-hover-border: rgba(219, 68, 55, 0.18);
            --meta-badge-hover-glow: rgba(219, 68, 55, 0.14);
        }
        .meta-badge.is-neutral {
            --meta-badge-state-color: #6b7280;
            --meta-badge-state-bg: rgba(107, 114, 128, 0.10);
            --meta-badge-state-bg-hover: rgba(107, 114, 128, 0.12);
            --meta-badge-state-border: rgba(107, 114, 128, 0.16);
            --meta-badge-state-glow: rgba(107, 114, 128, 0.06);
            --meta-badge-hover-border: rgba(107, 114, 128, 0.16);
            --meta-badge-hover-glow: rgba(107, 114, 128, 0.12);
        }
        .meta-badge.meta-badge-status {
            border-color: transparent;
            background: rgba(107, 114, 128, 0.10);
            color: #6b7280;
        }
        .meta-badge.meta-badge-status.is-success {
            color: #2e7d32;
            border-color: transparent;
            background: rgba(67, 160, 71, 0.14);
        }
        .meta-badge.meta-badge-status.is-warning {
            color: #c77700;
            border-color: transparent;
            background: rgba(255, 166, 0, 0.10);
        }
        .meta-badge.meta-badge-status.is-info {
            color: #0277bd;
            border-color: transparent;
            background: rgba(3, 169, 244, 0.10);
        }
        .meta-badge.meta-badge-status.is-error {
            color: #d14336;
            border-color: transparent;
            background: rgba(219, 68, 55, 0.10);
        }
        .meta-badge.meta-badge-status.is-neutral {
            color: #6b7280;
            border-color: transparent;
            background: rgba(107, 114, 128, 0.10);
        }
        .meta-badge.meta-badge-link {
            border-color: transparent;
            background: rgba(3, 169, 244, 0.08);
            color: var(--primary-text-color);
        }
        .meta-badge.meta-badge-link.meta-badge-interactive.is-success,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-info,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-warning,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-error,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-neutral,
        .meta-badge.meta-badge-service.is-success,
        .meta-badge.meta-badge-service.is-warning,
        .meta-badge.meta-badge-service.is-error,
        .meta-badge.meta-badge-service.is-neutral {
            color: var(--meta-badge-state-color);
            background: var(--meta-badge-state-bg);
            border-color: transparent;
            box-shadow: none;
        }
        .meta-badge.meta-badge-link.meta-badge-interactive.is-success,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-info,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-warning,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-error,
        .meta-badge.meta-badge-link.meta-badge-interactive.is-neutral {
            border-color: var(--meta-badge-state-border);
            box-shadow: none;
        }
        .meta-badge.meta-badge-link.meta-badge-interactive:hover:not(:disabled) {
            color: var(--meta-badge-state-color);
            border-color: var(--meta-badge-hover-border);
            background: color-mix(in srgb, var(--meta-badge-state-bg-hover) 85%, white 15%);
            box-shadow: 0 0 0 3px var(--meta-badge-hover-glow);
            transform: translateY(-1px);
        }
        .meta-badge.meta-badge-link.empty,
        .meta-badge.meta-badge-link:disabled {
            background: rgba(107, 114, 128, 0.08);
            border-color: transparent;
            color: var(--secondary-text-color);
            box-shadow: none;
            cursor: default;
        }
        .meta-badge:not(.meta-badge-interactive),
        .health-pill:not(.meta-badge-interactive) {
            cursor: default;
        }
        .meta-badge.meta-badge-service {
            border-color: transparent;
            background: rgba(99, 102, 241, 0.10);
            color: var(--primary-text-color);
        }
        .meta-badge.meta-badge-service .ma-chip-tag {
            color: currentColor;
            font-weight: 700;
            opacity: 0.92;
        }
        .sync-chip,
        .list-sync-chip {
            gap: 6px;
        }
        .sync-detail-chip,
        .list-sync-detail-chip {
            gap: 6px;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
        }
        .group-badge-unified,
        .adapter-link-badge,
        .service-chip-badge,
        .sync-chip,
        .sync-detail-chip,
        .list-sync-chip,
        .list-sync-detail-chip {
            min-width: 0;
            max-width: 100%;
        }
        .list-vol-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .list-vol-wrap input[type="range"] {
            flex: 1 1 auto;
            min-width: 0;
            height: 20px;
        }
        .list-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
        }
        .list-row:not(.expanded) .list-actions {
            align-self: start;
            margin-top: -3px;
        }
        .list-row:not(.expanded) .list-row-main {
            align-items: start;
        }
        .list-row:not(.expanded) .list-cell-name {
            align-items: flex-start;
        }
        .list-row:not(.expanded) .list-name-icon {
            margin-top: -4px;
        }
        .list-row:not(.expanded) .list-status-cell,
        .list-row:not(.expanded) .list-adapter-cell,
        .list-row:not(.expanded) .list-group-cell,
        .list-row:not(.expanded) .list-vol-wrap {
            align-self: start;
        }
        .list-row.expanded .list-row-main,
        .list-row.expanded .list-cell-name,
        .list-row.expanded .list-name-title-row {
            align-items: center;
        }
        .list-row.expanded .list-name-title {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            line-height: 24px;
        }
        .list-row.expanded .list-actions {
            align-self: center;
            align-items: center;
            margin-top: 0;
            padding-top: 0;
        }
        .list-row.expanded .list-status-cell,
        .list-row.expanded .list-adapter-cell,
        .list-row.expanded .list-group-cell,
        .list-row.expanded .list-vol-wrap {
            align-self: center;
            align-items: center;
            margin-top: 0;
            padding-top: 0;
        }
        .list-row.expanded .list-status-cell::before,
        .list-row.expanded .list-adapter-cell::before,
        .list-row.expanded .list-group-cell::before,
        .list-row.expanded .list-vol-wrap::before,
        .list-row.expanded .list-actions::before {
            top: 0;
            bottom: 0;
        }
        .list-inline-btn {
            width: 30px;
            height: 30px;
            border-radius: 8px;
        }
        .list-inline-btn svg,
        .list-transport-btn svg {
            width: 16px;
            height: 16px;
        }
        .list-settings-btn {
            border: 1px solid rgba(127, 137, 154, 0.18);
        }
        .list-action-btn {
            font-size: 11px;
            font-weight: 600;
            border-color: rgba(127, 137, 154, 0.18);
            color: var(--secondary-text-color);
            opacity: 0.84;
        }
        .list-inline-btn[disabled],
        .list-transport-btn[disabled],
        .list-action-btn[disabled] {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .list-action-btn:hover:not([disabled]) {
            opacity: 1;
        }
        .list-row-detail {
            display: none;
            padding: 0 16px 12px 68px;
            background: rgba(0,0,0,.018);
        }
        .list-row.expanded .list-row-detail {
            display: block;
        }
        .list-detail-player-shell {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 6px;
        }
        .list-detail-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
        }
        .list-detail-player-main {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            min-width: 0;
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--divider-color);
            border-radius: 11px;
            background: var(--card-background-color);
        }
        .list-detail-art-rail {
            width: fit-content;
            max-width: min(100%, 304px);
            flex-shrink: 0;
            display: grid;
            grid-template-columns: auto fit-content(216px);
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .np-art.list-detail-art {
            width: 96px;
            height: 96px;
            border-radius: 12px;
            flex-shrink: 0;
        }
        .list-detail-art-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .list-detail-album-title {
            font-size: 10.5px;
            line-height: 1.3;
            color: var(--secondary-text-color);
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
        .list-detail-player-center {
            min-width: 0;
            flex: 1;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .list-detail-playback-rail {
            --playback-side-width: 220px;
            --playback-center-width: 184px;
            --playback-lane-gap: 8px;
            min-width: 0;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            text-align: left;
        }
        .list-detail-playback-rail.is-solo {
            width: 100%;
            align-items: center;
        }
        .list-player-transport {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-shrink: 0;
            width: var(--playback-center-width);
        }
        .list-player-transport-btn {
            width: 32px;
            height: 32px;
            border-radius: 999px;
            border: 1px solid rgba(127, 137, 154, 0.22);
            background: rgba(127, 137, 154, 0.08);
            color: var(--primary-text-color);
        }
        .list-player-transport-btn svg {
            width: 16px;
            height: 16px;
        }
        .list-player-transport-btn.is-mode {
            width: 28px;
            height: 28px;
            opacity: 0.86;
        }
        .list-player-transport-btn.is-mode svg {
            width: 14px;
            height: 14px;
        }
        .list-player-transport-btn.is-primary {
            width: 40px;
            height: 40px;
            background: rgba(44, 110, 203, 0.12);
            border-color: rgba(44, 110, 203, 0.26);
            color: var(--primary-color);
        }
        .list-player-transport-btn.active {
            background: rgba(44, 110, 203, 0.14);
            border-color: rgba(44, 110, 203, 0.34);
            color: var(--primary-color);
        }
        .list-player-transport-btn:disabled,
        .transport-btn:disabled {
            opacity: 0.46;
            cursor: not-allowed;
            pointer-events: none;
            box-shadow: none;
        }
        .list-player-transport-btn.is-primary svg {
            width: 18px;
            height: 18px;
        }
        .list-player-media-lane {
            width: auto;
            max-width: 100%;
            display: grid;
            grid-template-columns: minmax(0, var(--playback-side-width)) var(--playback-center-width) minmax(0, var(--playback-side-width));
            grid-template-rows: auto auto;
            align-items: start;
            gap: var(--playback-lane-gap);
            row-gap: 4px;
            margin: 0;
            justify-content: flex-start;
        }
        .list-player-media-lane.is-solo {
            grid-template-columns: var(--playback-center-width);
            grid-template-rows: auto auto;
            justify-content: center;
        }
        .list-detail-current-copy {
            min-width: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            text-align: left;
        }
        .list-detail-current-copy.is-rail {
            flex: 0 1 auto;
            min-width: 0;
            width: auto;
            max-width: 216px;
        }
        .list-now-playing-row {
            min-height: var(--badge-min-height);
            display: flex;
            align-items: center;
        }
        .list-now-playing-badge {
            align-self: flex-start;
            padding: var(--badge-padding-y) var(--badge-padding-x);
            min-height: var(--badge-min-height);
            display: inline-flex;
            align-items: center;
            gap: 0;
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            letter-spacing: 0.01em;
        }
        .list-now-playing-badge.is-placeholder {
            visibility: hidden;
            pointer-events: none;
        }
        .list-track-title-row {
            width: 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            margin-top: 1px;
        }
        .list-track-title-group {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
            max-width: 100%;
        }
        .list-detail-current-copy .list-track-title {
            font-size: 13px;
            line-height: 1.32;
        }
        .list-track-title-row .list-track-title,
        .list-track-title-group .list-track-title {
            flex: 1 1 auto;
            min-width: 0;
        }
        .list-detail-current-copy .list-track-meta {
            font-size: 11px;
        }
        .list-detail-progress-wrap {
            grid-column: 2;
            grid-row: 2;
            width: var(--playback-center-width);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 3px;
            margin-left: 0;
        }
        .list-detail-progress-wrap .np-progress {
            margin: 0;
            order: 1;
        }
        .list-player-transport {
            grid-column: 2;
            grid-row: 1;
        }
        .list-player-media-lane:not(.is-solo) .list-player-transport {
            margin-top: 28px;
        }
        .list-player-media-lane.is-solo .list-player-transport,
        .list-player-media-lane.is-solo .list-detail-progress-wrap {
            grid-column: 1;
        }
        .list-player-media-lane.is-solo .list-player-transport {
            justify-content: center;
        }
        .list-player-media-lane.is-solo .list-detail-progress-wrap {
            margin-left: auto;
            margin-right: auto;
        }
        .list-queue-neighbor.is-prev,
        .list-queue-neighbor.is-next {
            grid-row: 1 / span 2;
            align-self: start;
        }
        .list-queue-neighbor {
            position: relative;
            min-width: 0;
            width: 100%;
            max-width: var(--playback-side-width);
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 4px 0;
            border-radius: 0;
            border: 0;
            background: transparent;
            opacity: 0.64;
        }
        .list-queue-neighbor.is-next {
            align-items: flex-end;
            text-align: right;
        }
        .list-queue-neighbor.is-empty {
            opacity: 0.52;
        }
        .list-queue-neighbor-label {
            min-height: var(--badge-min-height);
            display: flex;
            align-items: center;
            margin-top: 6px;
            font-size: var(--badge-font-size);
            line-height: var(--badge-line-height);
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
        }
        .list-queue-neighbor.is-prev .list-queue-neighbor-label {
            justify-content: flex-end;
        }
        .list-queue-neighbor.is-next .list-queue-neighbor-label {
            justify-content: flex-start;
        }
        .list-queue-neighbor-title,
        .list-queue-neighbor-artist,
        .list-queue-neighbor-album {
            width: 100%;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .list-queue-neighbor.is-prev {
            justify-self: end;
            text-align: right;
        }
        .list-queue-neighbor.is-next {
            justify-self: start;
            align-items: flex-start;
            text-align: left;
        }
        .list-queue-neighbor-title {
            font-size: 11.5px;
            font-weight: 700;
            line-height: 1.28;
            color: var(--primary-text-color);
            -webkit-line-clamp: 1;
            margin-top: 4px;
        }
        .list-queue-neighbor-artist,
        .list-queue-neighbor-album {
            font-size: 10px;
            line-height: 1.25;
            color: var(--secondary-text-color);
            -webkit-line-clamp: 1;
        }
        .list-detail-footer {
            display: block;
        }
        .list-detail-actions {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: stretch;
            gap: 6px;
            width: 110px;
            align-self: center;
        }
        .list-detail-actions .list-action-btn {
            padding: 4px 7px;
            font-size: 10px;
            border-color: rgba(127, 137, 154, 0.18);
            background: transparent;
            color: var(--secondary-text-color);
            opacity: 0.9;
            width: 100%;
            min-width: 0;
        }
        .list-detail-actions .list-action-btn:hover:not([disabled]) {
            opacity: 1;
        }
        .list-track-title {
            max-width: 100%;
            font-size: 13px;
            font-weight: 700;
            color: var(--primary-text-color);
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list-track-meta {
            font-size: 12px;
            color: var(--secondary-text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list-detail-time {
            order: 2;
            font-size: 11px;
            color: var(--secondary-text-color);
            white-space: nowrap;
            text-align: center;
            margin-top: 1px;
        }
        .list-route-summary {
            max-width: 100%;
            font-size: 10.5px;
            line-height: 1.25;
            color: var(--secondary-text-color);
            opacity: 0.78;
            text-align: left;
            text-transform: capitalize;
            padding-top: 2px;
        }
        .list-route-summary-spacer {
            min-height: 1px;
        }
        .list-footer {
            padding: 10px 16px;
            background: var(--primary-background-color);
            color: var(--secondary-text-color);
            font-size: 12px;
        }
        .list-empty-state {
            padding: 22px 16px;
            text-align: center;
            color: var(--secondary-text-color);
            font-size: 13px;
        }

        /* Equalizer animation (MA-style) — shown when audio data is actually streaming */
        .eq-bars {
            display: none;
            align-items: flex-end;
            gap: 1.5px;
            height: 14px;
            flex-shrink: 0;
            color: var(--primary-color);
        }
        .eq-bars.active { display: flex; }
        .eq-bars.stale { display: flex; }
        .eq-bars.stale .eq-bar {
            background: #e53935;
            animation: none;
            transform: scaleY(1);
            opacity: 0.7;
        }
        .eq-bars.stale .eq-bar:nth-child(1) { transform: scaleY(0.36); }
        .eq-bars.stale .eq-bar:nth-child(2) { transform: scaleY(0.71); }
        .eq-bars.stale .eq-bar:nth-child(3) { transform: scaleY(0.50); }
        .eq-bars.stale .eq-bar:nth-child(4) { transform: scaleY(0.86); }
        .eq-bar {
            width: 3px;
            height: 14px;
            border-radius: 999px;
            background: currentColor;
            transform-origin: bottom;
            animation: eq-ma-bar-1 1.28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
            will-change: transform, opacity;
        }
        .eq-bar:nth-child(1) { animation-name: eq-ma-bar-1; animation-duration: 1.28s; animation-delay: -0.42s; }
        .eq-bar:nth-child(2) { animation-name: eq-ma-bar-2; animation-duration: 1.46s; animation-delay: -0.7s; }
        .eq-bar:nth-child(3) { animation-name: eq-ma-bar-3; animation-duration: 1.22s; animation-delay: -0.56s; }
        .eq-bar:nth-child(4) { animation-name: eq-ma-bar-4; animation-duration: 1.38s; animation-delay: -0.82s; }
        .eq-bars.list-name-eq {
            align-self: center;
            height: 11px;
            gap: 1.25px;
        }
        .eq-bars.list-name-eq .eq-bar {
            width: 2px;
            height: 11px;
        }
        .eq-bars.list-track-eq {
            align-self: center;
            height: 12px;
            gap: 1.5px;
        }
        .eq-bars.list-track-eq .eq-bar {
            width: 2px;
            height: 12px;
        }
        @keyframes eq-ma-bar-1 {
            0%, 100% { transform: scaleY(0.24); opacity: 0.42; }
            18% { transform: scaleY(0.86); opacity: 0.94; }
            44% { transform: scaleY(0.38); opacity: 0.6; }
            67% { transform: scaleY(1); opacity: 1; }
            84% { transform: scaleY(0.56); opacity: 0.74; }
        }
        @keyframes eq-ma-bar-2 {
            0%, 100% { transform: scaleY(0.68); opacity: 0.78; }
            20% { transform: scaleY(0.26); opacity: 0.46; }
            40% { transform: scaleY(1); opacity: 1; }
            62% { transform: scaleY(0.42); opacity: 0.62; }
            82% { transform: scaleY(0.9); opacity: 0.96; }
        }
        @keyframes eq-ma-bar-3 {
            0%, 100% { transform: scaleY(0.32); opacity: 0.48; }
            16% { transform: scaleY(0.94); opacity: 0.98; }
            38% { transform: scaleY(0.54); opacity: 0.72; }
            60% { transform: scaleY(0.22); opacity: 0.42; }
            82% { transform: scaleY(0.82); opacity: 0.92; }
        }
        @keyframes eq-ma-bar-4 {
            0%, 100% { transform: scaleY(0.88); opacity: 0.96; }
            22% { transform: scaleY(0.34); opacity: 0.5; }
            46% { transform: scaleY(0.72); opacity: 0.86; }
            68% { transform: scaleY(0.18); opacity: 0.38; }
            86% { transform: scaleY(0.98); opacity: 1; }
        }

        /* Config section */
        .config-section {
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius); padding: 20px;
            box-shadow: var(--ha-card-box-shadow); margin-bottom: 20px;
        }
        .config-section summary {
            color: var(--primary-color); font-size: 20px; font-weight: 700;
            cursor: pointer; list-style: none; user-select: none; margin-bottom: 0;
            display: flex; align-items: center; gap: 8px;
        }
        .logs-section summary {
            color: var(--primary-color); font-size: 20px; font-weight: 700;
            cursor: pointer; list-style: none; user-select: none; margin-bottom: 0;
            display: flex; align-items: center; gap: 8px;
        }
        .config-section > summary::-webkit-details-marker,
        .logs-section > summary::-webkit-details-marker,
        #ma-token-details summary::-webkit-details-marker { display: none; }
        #ma-token-details summary { list-style: none; display: flex; align-items: center; gap: 6px; }
        #ma-token-details summary::before {
            content: '';
            display: inline-flex;
            width: 8px;
            height: 8px;
            border-right: 1.7px solid currentColor;
            border-bottom: 1.7px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        #ma-token-details[open] summary::before { transform: rotate(45deg); }
        .config-section > summary::before, .logs-section > summary::before {
            content: '';
            display: inline-flex;
            width: 8px;
            height: 8px;
            border-right: 1.7px solid currentColor;
            border-bottom: 1.7px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        .logs-section[open] > summary::before, .config-section[open] > summary::before { transform: rotate(45deg); }
        .config-section[open] > summary, .logs-section[open] > summary { margin-bottom: 15px; }
        .summary-title-icon {
            width: 16px;
            height: 16px;
        }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; color: var(--primary-text-color); font-weight: 500; }
        .form-group input,
        .form-group select {
            width: 100%; padding: 10px; border: 1px solid var(--divider-color);
            border-radius: 5px; font-size: 14px;
            background: var(--card-background-color); color: var(--primary-text-color);
        }
        .form-group input:focus,
        .form-group select:focus { outline: none; border-color: var(--primary-color); }
        .form-group input.config-readonly-input[readonly],
        .form-group input.config-readonly-input:disabled {
            background: var(--secondary-background-color);
            color: var(--secondary-text-color);
            border-color: var(--divider-color);
            cursor: not-allowed;
            opacity: 1;
            box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.03);
        }
        .form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
        #config-form { padding-bottom: 0; }
        .form-inline,
        .form-inline-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        .form-inline > input:first-child,
        .form-inline-actions > input:first-child {
            flex: 1 1 240px;
        }
        .inline-status {
            font-size: 12px;
            color: var(--secondary-text-color);
        }
        .config-tabs {
            display: flex;
            gap: 0;
            padding: 0;
            margin: 4px 0 0;
            box-shadow: inset 0 -2px 0 var(--divider-color);
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .config-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: none;
            background: transparent;
            color: var(--secondary-text-color);
            padding: 12px 16px 10px;
            font: inherit;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: inset 0 -2px 0 transparent;
            transition: color 0.15s ease, box-shadow 0.15s ease;
        }
        .config-tab:hover {
            color: var(--primary-text-color);
        }
        .config-tab.active {
            color: var(--primary-color);
            box-shadow: inset 0 -2px 0 var(--primary-color);
        }
        .config-summary-dirty-count,
        .config-tab-dirty-count {
            border: 1px solid var(--ui-count-badge-border);
            background: var(--ui-count-badge-bg);
            color: var(--ui-count-badge-color);
        }
        .config-summary-dirty-count {
            margin-left: var(--ui-space-100);
        }
        .config-tab.has-dirty {
            color: var(--primary-text-color);
        }
        .config-tab.active .config-tab-dirty-count {
            background: var(--ui-count-badge-bg-active);
            border-color: transparent;
            color: var(--ui-count-badge-color-active);
        }
        .config-section [hidden] { display: none !important; }
        .config-tab-panel { display: none; padding-top: 16px; }
        .config-tab-panel.active { display: block; }
        .config-empty-state {
            border: 1px dashed var(--divider-color);
            border-radius: 10px;
            padding: 16px;
            background: var(--primary-background-color);
            color: var(--secondary-text-color);
            line-height: 1.6;
        }
        .config-panel-card {
            background: var(--primary-background-color);
            border: 1px solid var(--divider-color);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 14px;
        }

        .devices-stack {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .devices-card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(128, 145, 171, 0.18);
        }
        .devices-card-copy {
            flex: 1 1 auto;
            min-width: 0;
        }
        .devices-card-header .config-card-title {
            margin-bottom: 5px;
        }
        .devices-card-subtitle {
            font-size: 12px;
            line-height: 1.55;
            color: var(--secondary-text-color);
            max-width: 84ch;
        }
        .devices-card-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        /* BT device table */
        .bt-header {
            display: grid; grid-template-columns: 56px minmax(200px, 1.2fr) minmax(156px, 1.1fr) minmax(96px, 0.8fr) 84px 86px minmax(120px, 0.95fr) minmax(168px, 1.15fr);
            gap: 8px; margin-bottom: 8px; padding: 0 4px 8px;
            font-size: 12px; font-weight: 700; color: var(--secondary-text-color);
            border-bottom: 1px solid var(--divider-color);
        }
        .bt-device-wrap {
            margin-bottom: 10px;
            border-radius: 10px;
            transition: box-shadow 0.15s ease, background-color 0.15s ease;
        }
        .bt-device-wrap.disabled {
            opacity: 0.68;
        }
        .bt-device-wrap.settings-highlight {
            border-radius: 12px;
            box-shadow: 0 0 0 3px rgba(3,169,244,.18);
            animation: bt-settings-highlight 1.4s ease;
        }
        .bt-device-wrap.duplicate-conflict {
            border-radius: 12px;
            box-shadow: 0 0 0 3px rgba(229, 57, 53, .35);
            animation: bt-duplicate-conflict 1.4s ease;
        }
        @keyframes bt-duplicate-conflict {
            0%   { box-shadow: 0 0 0 0 rgba(229,57,53,.45); }
            35%  { box-shadow: 0 0 0 5px rgba(229,57,53,.40); }
            100% { box-shadow: 0 0 0 3px rgba(229,57,53,.35); }
        }
        .adapter-row.settings-highlight {
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
            animation: adapter-settings-highlight 1.4s ease;
        }
        @keyframes bt-settings-highlight {
            0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(3,169,244,.28); }
            35% { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(3,169,244,.24); }
            100% { transform: translateY(0); box-shadow: 0 0 0 3px rgba(3,169,244,.18); }
        }
        @keyframes adapter-settings-highlight {
            0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(79,70,229,.28); }
            35% { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(79,70,229,.24); }
            100% { transform: translateY(0); box-shadow: 0 0 0 3px rgba(79,70,229,.18); }
        }
        .bt-device-row {
            display: grid; grid-template-columns: 56px minmax(200px, 1.2fr) minmax(156px, 1.1fr) minmax(96px, 0.8fr) 84px 86px minmax(120px, 0.95fr) minmax(168px, 1.15fr);
            gap: 8px; align-items: center; margin-bottom: 0;
        }
        .bt-device-row input:not([type="checkbox"]), .bt-device-row select {
            padding: 7px 10px; border: 1px solid var(--divider-color);
            border-radius: 5px; font-size: 13px;
            background: var(--card-background-color); color: var(--primary-text-color); width: 100%;
        }
        .bt-device-row input:not([type="checkbox"]):focus, .bt-device-row select:focus {
            outline: none; border-color: var(--primary-color);
        }
        .bt-enabled-cell {
            display: flex;
            justify-content: center;
        }
        .config-switch,
        .bt-switch {
            position: relative;
            display: inline-flex;
            width: 34px;
            height: 20px;
            cursor: pointer;
        }
        .config-switch input,
        .bt-switch input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }
        .config-switch-track,
        .bt-switch-track {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 999px;
            background: rgba(107, 114, 128, 0.35);
            transition: background 0.18s ease;
        }
        .config-switch-track::after,
        .bt-switch-track::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 2px rgba(0,0,0,.25);
            transition: transform 0.18s ease;
        }
        .config-switch input:checked + .config-switch-track,
        .bt-switch input:checked + .bt-switch-track {
            background: var(--success-color);
        }
        .config-switch input:checked + .config-switch-track::after,
        .bt-switch input:checked + .bt-switch-track::after {
            transform: translateX(14px);
        }
        .config-switch.compact {
            transform: scale(0.92);
            transform-origin: right center;
        }
        .bt-name-field {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .bt-name-field input {
            flex: 1 1 auto;
        }
        .bt-device-row input.invalid { border-color: var(--error-color); background: rgba(219,68,55,.08); }
        .btn-remove-dev {
            background: transparent; color: var(--secondary-text-color); border: none; border-radius: 8px;
            width: 32px; height: 32px; cursor: pointer; line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            transition: color 0.15s ease, background 0.15s ease;
        }
        .btn-remove-dev:hover {
            color: var(--error-color);
            background: rgba(219,68,55,.15);
        }
        .btn-remove-dev svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        .bt-row-actions {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            min-width: 0;
        }
        .bt-device-action-menu {
            position: relative;
        }
        .bt-device-action-menu > summary {
            list-style: none;
        }
        .bt-device-action-menu > summary::-webkit-details-marker {
            display: none;
        }
        .bt-device-action-toggle::after {
            content: "▾";
            margin-left: 6px;
            font-size: 10px;
        }
        .bt-device-action-menu[open] .bt-device-action-toggle::after {
            content: "▴";
        }
        .bt-device-action-menu-list {
            position: absolute;
            right: 0;
            top: calc(100% + 8px);
            min-width: 220px;
            display: grid;
            gap: 6px;
            padding: 8px;
            border-radius: 14px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            box-shadow: var(--ui-floating-shadow, var(--ha-card-box-shadow));
            z-index: 20;
        }
        .bt-device-action-item {
            width: 100%;
            justify-content: flex-start;
        }
        .group-bulk-action-menu {
            position: relative;
        }
        .group-bulk-action-menu > summary {
            list-style: none;
            cursor: pointer;
        }
        .group-bulk-action-menu > summary::-webkit-details-marker {
            display: none;
        }
        .group-bulk-action-toggle::after {
            content: "▾";
            margin-left: 6px;
            font-size: 10px;
        }
        .group-bulk-action-menu[open] .group-bulk-action-toggle::after {
            content: "▴";
        }
        .group-bulk-action-menu[open] .group-bulk-action-toggle {
            background: var(--secondary-background-color);
        }
        .group-bulk-action-menu-list {
            position: absolute;
            right: 0;
            top: calc(100% + 8px);
            min-width: 220px;
            display: grid;
            gap: 6px;
            padding: 8px;
            border-radius: 14px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            box-shadow: var(--ui-floating-shadow, var(--ha-card-box-shadow));
            z-index: 30;
        }
        .group-bulk-action-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            justify-content: flex-start;
            padding: 8px 12px;
            border: 1px solid transparent;
            border-radius: 10px;
            background: transparent;
            color: var(--primary-text-color);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .group-bulk-action-item:hover,
        .group-bulk-action-item:focus-visible {
            background: var(--secondary-background-color);
            outline: none;
        }
        /* Match the accent / warn semantics of ``.action-btn.accent`` /
           ``.action-btn.warn`` (line ~2390) — the master ``accent``
           tone in this app is ``--primary-color`` (blue), not
           ``--accent-color`` (which is amber in the default theme).
           Hover background derives from the same colour-family so a
           themed deployment with a non-blue ``--primary-color`` keeps
           text and hover bg coherent. */
        .group-bulk-action-item.accent {
            color: var(--primary-color);
        }
        .group-bulk-action-item.accent:hover,
        .group-bulk-action-item.accent:focus-visible {
            background: rgba(3, 169, 244, 0.10);
            color: var(--primary-color);
        }
        .group-bulk-action-item.warn {
            color: var(--error-color, #db4437);
        }
        .group-bulk-action-item.warn:hover,
        .group-bulk-action-item.warn:focus-visible {
            background: rgba(219, 68, 55, 0.10);
            color: var(--error-color, #db4437);
        }
        .bt-toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .bt-paired-header-actions {
            justify-content: flex-end;
        }
        .bt-paired-show-all {
            margin-left: 0;
        }
        .paired-box--static {
            margin-top: 0;
        }
        .paired-box-header--static {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
            cursor: default;
        }
        .paired-box-header--static:hover {
            background: transparent;
        }
        .paired-box-header--static .paired-box-copy {
            overflow: visible;
            white-space: normal;
        }
        .paired-device-highlight {
            box-shadow: 0 0 0 3px rgba(3,169,244,.18);
            animation: bt-settings-highlight 1.4s ease;
        }
        .bt-scan-modal {
            width: min(92vw, 780px);
            max-width: 780px;
        }
        .bt-scan-modal-body {
            display: grid;
            gap: var(--ui-space-150);
        }
        .bt-scan-toolbar {
            display: flex;
            align-items: flex-end;
            gap: var(--ui-space-100);
            flex-wrap: wrap;
            padding: var(--ui-space-150);
            border: 1px solid var(--ui-data-surface-border, var(--divider-color));
            border-radius: var(--ha-card-border-radius);
            background: var(--ui-data-surface-bg, var(--primary-background-color));
        }
        .bt-scan-field {
            display: grid;
            gap: var(--ui-space-075);
            min-width: min(100%, 220px);
            flex: 1 1 220px;
        }
        .bt-scan-field-label,
        .bt-scan-progress-detail,
        .scan-results-title {
            font-size: var(--ui-type-meta-size);
            line-height: var(--ui-type-meta-line-height);
            font-weight: var(--ui-type-meta-weight);
            letter-spacing: var(--ui-type-meta-letter-spacing);
            text-transform: uppercase;
            color: var(--ui-data-header-color, var(--secondary-text-color));
        }
        .bt-scan-select {
            width: 100%;
            min-height: var(--ui-field-height);
            padding: 0 var(--ui-field-padding-x);
            border: 1px solid var(--ui-field-border);
            border-radius: var(--ui-field-radius);
            font-size: var(--ui-field-font-size);
            background: var(--ui-field-bg);
            color: var(--ui-field-color);
        }
        .bt-scan-select:focus,
        .bt-scan-select:focus-visible {
            outline: none;
            border-color: var(--ui-field-focus-border);
            box-shadow: var(--ui-field-focus-ring);
        }
        .bt-scan-toggle {
            display: inline-flex;
            align-items: center;
            gap: var(--ui-space-100);
            min-height: var(--ui-field-height);
            padding: 0 2px;
            font-size: var(--ui-type-body-size);
            line-height: var(--ui-type-body-line-height);
            font-weight: 600;
            color: var(--primary-text-color);
        }
        .bt-scan-progress {
            display: grid;
            gap: var(--ui-space-100);
            padding: var(--ui-space-150);
            border: 1px solid var(--ui-data-surface-border, var(--divider-color));
            border-radius: var(--ha-card-border-radius);
            background: var(--ui-data-surface-bg, var(--primary-background-color));
        }
        .bt-scan-progress-copy {
            display: grid;
            gap: var(--ui-space-075);
        }
        .bt-scan-progress-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--ui-space-100);
            flex-wrap: wrap;
        }
        .bt-scan-progress-remaining {
            font-size: var(--ui-type-body-size);
            line-height: var(--ui-type-body-line-height);
            font-weight: 700;
            color: var(--secondary-text-color);
        }
        .bt-scan-progress-bar {
            position: relative;
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(107, 114, 128, 0.18);
        }
        .bt-scan-progress-bar-fill {
            display: block;
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--primary-color), rgba(3, 169, 244, 0.68));
            transition: width 0.22s ease;
        }
        .bt-scan-status-panel {
            display: grid;
            gap: var(--ui-space-100);
        }
        .bt-scan-results-box {
            margin-top: 0;
        }
        #scan-results-list {
            overflow-y: auto;
            max-height: min(380px, 44vh);
        }
        .bt-scan-modal-footer {
            justify-content: flex-end;
        }
        .bt-runtime {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            min-width: 0;
        }
        .bt-runtime-badge {
            max-width: 100%;
        }
        /* Horizontal scroll shadow hint for BT table */
        .bt-table-wrap {
            position: relative;
            background-image: linear-gradient(to right, var(--card-background-color), var(--card-background-color)),
                              linear-gradient(to right, var(--card-background-color), var(--card-background-color)),
                              linear-gradient(to right, rgba(0,0,0,.08), transparent),
                              linear-gradient(to left,  rgba(0,0,0,.08), transparent);
            background-position: left center, right center, left center, right center;
            background-repeat: no-repeat;
            background-color: var(--card-background-color);
            background-size: 20px 100%, 20px 100%, 8px 100%, 8px 100%;
            background-attachment: local, local, scroll, scroll;
        }
        .scan-badge {
            font-size: var(--badge-font-size); color: var(--secondary-text-color);
            display: flex; align-items: center; gap: 4px;
            cursor: default;
            user-select: none;
            -webkit-user-select: none;
        }
        .scan-results-box {
            margin-top: var(--ui-space-150);
            border: 1px solid var(--ui-data-surface-border, var(--divider-color));
            border-radius: var(--ha-card-border-radius);
            padding: var(--ui-space-100);
            background: var(--card-background-color);
        }
        .scan-results-title {
            margin: 0;
            padding: 0 var(--ui-space-050);
        }
        .scan-result-item {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 4px; border-bottom: 1px solid var(--divider-color); font-size: 13px;
            cursor: default; border-radius: 4px; transition: background 0.15s;
        }
        .scan-result-item:hover { background: transparent; }
        .scan-result-item:focus-within { background: var(--primary-color-alpha, rgba(3,169,244,0.08)); }
        .scan-result-item--passive {
            opacity: 0.88;
        }
        .scan-result-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .scan-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            color: var(--primary-text-color);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
        }
        .scan-action-btn:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .scan-action-btn--primary {
            background: rgba(3,169,244,0.12);
            border-color: rgba(3,169,244,0.24);
            color: var(--primary-color);
        }
        .scan-action-btn--pair {
            background: rgba(67,160,71,0.12);
            border-color: rgba(67,160,71,0.24);
            color: #2e7d32;
        }
        .scan-action-btn--warning {
            background: rgba(245,158,11,0.14);
            border-color: rgba(245,158,11,0.24);
            color: #c77700;
        }
        .scan-action-btn.is-pairing,
        .scan-action-btn:disabled {
            opacity: 0.65;
            cursor: wait;
        }
        .scan-action-btn.is-success {
            background: rgba(67,160,71,0.16);
            border-color: rgba(67,160,71,0.28);
            color: #2e7d32;
        }
        .scan-action-btn.is-error {
            background: rgba(219,68,55,0.12);
            border-color: rgba(219,68,55,0.24);
            color: var(--error-color);
        }
        .paired-actions { display: flex; gap: 6px; flex-shrink: 0; }
        .paired-result-item {
            display: grid;
            grid-template-columns: auto 132px minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 10px;
        }
        .paired-result-item .paired-actions {
            justify-self: end;
            margin-left: auto;
            flex-wrap: nowrap;
            width: auto;
        }
        .paired-remove-btn {
            flex-shrink: 0;
        }
        .scan-result-item:last-child { border-bottom: none; }
        .scan-result-mac {
            font-family: monospace;
            color: var(--secondary-text-color);
            font-size: var(--ui-type-meta-size);
            line-height: var(--ui-type-meta-line-height);
            width: 132px;
            flex-shrink: 0;
        }
        .scan-result-summary {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            flex-wrap: wrap;
            min-width: 0;
        }
        .scan-result-name {
            display: inline-block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: var(--ui-type-body-size);
            line-height: var(--ui-type-body-line-height);
            font-weight: 600;
        }
        .paired-result-item .scan-result-name {
            display: block;
            max-width: 100%;
        }
        .paired-adapter-badges {
            display: inline-flex;
            gap: 4px;
            margin-left: 6px;
            vertical-align: middle;
        }
        .paired-adapter-badge {
            display: inline-flex;
            align-items: center;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 500;
            background: var(--chip-bg, rgba(100, 120, 180, 0.15));
            color: var(--primary-color, #4a6cd0);
            letter-spacing: 0.02em;
        }
        .scan-result-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            min-width: 0;
        }
        .scan-result-chip,
        .scan-result-passive {
            display: inline-flex;
            align-items: center;
            min-height: var(--badge-min-height);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            cursor: default;
            user-select: none;
            -webkit-user-select: none;
        }
        .scan-result-chip {
            border: 1px solid transparent;
            background: rgba(107, 114, 128, 0.1);
            color: var(--secondary-text-color);
        }
        .scan-result-chip.is-audio {
            background: rgba(67, 160, 71, 0.12);
            border-color: transparent;
            color: #2e7d32;
        }
        .scan-result-chip.is-other {
            background: rgba(255, 166, 0, 0.14);
            border-color: transparent;
            color: #c77700;
        }
        .scan-result-chip.is-warning {
            background: rgba(244, 67, 54, 0.12);
            border-color: transparent;
            color: #c62828;
        }
        /* v2.63.0-rc.8: RSSI badge palette removed — _renderRssiBadgeHtml
           now uses the shared meta-badge tone classes
           (.is-success / .is-warning / .is-error / .is-neutral) so the
           chip inherits the project-wide colour scheme. */
        .scan-result-passive {
            color: var(--secondary-text-color);
            background: rgba(107, 114, 128, 0.08);
            border: 1px solid transparent;
        }
        .paired-box {
            margin-top: 12px; border: 1px solid var(--divider-color); border-radius: 12px;
            padding: 12px; background: var(--card-background-color);
        }
        .paired-box-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            padding: 4px 2px;
            font-size: 12px;
            color: var(--secondary-text-color);
            cursor: default;
        }
        .paired-box-copy {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Adapters panel */
        /* Adapters panel */
        .adapters-box {
            border: 1px solid var(--divider-color); border-radius: 12px;
            padding: 6px 10px; background: var(--card-background-color);
        }
        .ha-assist {
            margin-top: 8px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(3, 169, 244, 0.18);
            background: rgba(3, 169, 244, 0.07);
            color: var(--primary-text-color);
        }
        .ha-assist--muted {
            background: rgba(158, 158, 158, 0.08);
            border-color: rgba(158, 158, 158, 0.18);
        }
        .ha-assist-copy {
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            color: var(--secondary-text-color);
        }
        .ha-assist-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .ha-assist-controls select {
            min-width: 200px;
            max-width: 100%;
        }
        .ha-assist-note {
            font-size: 12px;
            color: var(--secondary-text-color);
        }
        .adapter-row {
            display: grid;
            grid-template-columns: 5rem 1fr 1.4fr minmax(180px, auto) 2.5rem auto;
            gap: 8px; align-items: center;
            padding: 7px 10px; border-bottom: 1px solid var(--divider-color); font-size: 13px;
            cursor: default; border-radius: 6px; transition: background 0.15s, box-shadow 0.15s ease;
        }
        .adapter-row:hover { background: var(--primary-color-alpha, rgba(3,169,244,0.08)); }
        .adapter-row:last-child { border-bottom: none; }
        .adapter-row.detected { color: var(--primary-text-color); }
        .adapter-row input {
            padding: 5px 8px; border: 1px solid var(--divider-color);
            border-radius: 4px; font-size: 13px; width: 100%;
            background: var(--card-background-color); color: var(--primary-text-color);
        }
        .adapter-row .adp-name {
            min-width: 0;
        }
        .adapter-row input:focus { outline: none; border-color: var(--primary-color); }
        .adapter-ha-assist {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 2px;
        }
        .adapter-ha-assist-copy {
            font-size: 11px;
            color: var(--secondary-text-color);
        }
        .adapter-ha-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .adapter-ha-controls select {
            flex: 1 1 220px;
            min-width: 180px;
            max-width: 100%;
            padding: 5px 8px;
            border: 1px solid var(--divider-color);
            border-radius: 4px;
            font-size: 13px;
            background: var(--card-background-color);
            color: var(--primary-text-color);
        }
        .adapter-ha-meta {
            font-size: 11px;
            color: var(--secondary-text-color);
        }
        .adapter-cod-override.adapter-cod-inline {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            min-width: 0;
            padding: 4px 6px;
            border-radius: 5px;
        }
        .adapter-cod-inline .adp-cod-preset {
            flex: 1 1 auto;
            min-width: 0;
            padding: 5px 6px;
            border: 1px solid var(--divider-color);
            border-radius: 4px;
            font-size: 12px;
            background: var(--card-background-color);
            color: var(--primary-text-color);
        }
        .adapter-cod-inline .adp-cod-custom {
            flex: 0 1 110px;
            min-width: 0;
            padding: 5px 6px;
            border: 1px solid var(--divider-color);
            border-radius: 4px;
            font-size: 12px;
            background: var(--card-background-color);
            color: var(--primary-text-color);
        }
        .adapter-cod-inline .adapter-cod-live {
            font-size: 11px;
            color: var(--secondary-text-color);
            font-family: 'Courier New', monospace;
            white-space: nowrap;
        }
        .adapter-cod-inline .adapter-cod-live--match {
            color: var(--success-color);
        }
        .adapter-cod-inline .adapter-cod-error {
            flex-basis: 100%;
            font-size: 11px;
            color: var(--error-color);
        }
        .dot { font-size: 16px; text-align: center; }
        .dot.green { color: var(--success-color); }
        .dot.grey  { color: var(--secondary-text-color); }
        .mono { font-family: 'Courier New', monospace; font-size: 12px; color: var(--secondary-text-color); }
        .btn-remove-adapter {
            background: transparent; color: var(--error-color); border: none; border-radius: 4px;
            width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 1;
        }
        .btn-remove-adapter:hover { background: rgba(219,68,55,.15); }
        .adapter-power-btns { display: flex; gap: 2px; }
        .adapter-power-btns .btn-bt-action {
            padding: 3px 8px; font-size: 11px;
            border: 1px solid var(--divider-color); border-radius: 3px;
            background: var(--card-background-color); color: var(--secondary-text-color);
            cursor: pointer; transition: all 0.15s;
        }
        .adapter-power-btns .btn-bt-action:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .adapter-power-btns .btn-bt-action:disabled { opacity: 0.5; cursor: wait; }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--primary-color); color: white; padding: 10px 20px;
            border: none; border-radius: 4px; font-size: 15px; font-weight: 500;
            letter-spacing: 0.0892857143em; text-transform: uppercase;
            cursor: pointer; transition: background 0.2s;
        }
        .btn:hover { background: var(--dark-primary-color); }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-sm { padding: 7px 14px; font-size: 13px; }
        .btn-secondary {
            background: var(--card-background-color);
            color: var(--primary-color);
            border: 1px solid rgba(3, 169, 244, 0.22);
        }
        .btn-secondary:hover {
            background: rgba(3,169,244,0.10);
            color: var(--primary-color);
        }
        .btn-ghost {
            background: transparent;
            color: var(--secondary-text-color);
            border: 1px solid var(--divider-color);
        }
        .btn-ghost:hover {
            background: rgba(3,169,244,0.08);
            color: var(--primary-color);
        }
        .btn-block {
            width: 100%;
            justify-content: center;
        }
        .btn-icon-slot,
        .btn-icon-svg {
            width: 14px;
            height: 14px;
        }
        .btn-restart { background: var(--warning-color); }
        .btn-restart:hover { background: #e09600; }
        .btn-refresh { background: var(--success-color); }
        .btn-refresh:hover { background: #388e3c; }
        .btn-scan { background: #8b5cf6; }
        .btn-scan:hover { background: #7c3aed; }

        /* Logs section */
        .logs-section {
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius);
            padding: 20px;
            box-shadow: var(--ha-card-box-shadow);
        }
        .logs-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            padding: 12px 14px;
            margin-bottom: 0;
            border: 1px solid var(--divider-color);
            border-bottom: none;
            border-radius: 12px 12px 0 0;
            background: var(--primary-background-color);
        }
        .logs-toolbar-left,
        .logs-toolbar-right {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .logs-filter-select {
            min-width: 120px;
        }
        .logs-runtime-controls {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .logs-runtime-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--secondary-text-color);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .logs-inline-status {
            min-width: 56px;
        }
        .logs-auto-refresh {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--secondary-text-color);
        }
        .logs-container {
            background: var(--code-background-color);
            color: var(--code-text-color);
            padding: 14px 16px;
            border-radius: 0 0 12px 12px;
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.6;
            height: 350px;
            overflow-y: auto;
            border: 1px solid rgba(15, 23, 42, 0.2);
        }
        .log-line {
            margin-bottom: 4px;
            word-break: break-word;
            white-space: pre-wrap;
        }
        .log-line:last-child { margin-bottom: 0; }
        .log-ts { opacity: 0.62; }
        .log-context { color: #94a3b8; }
        .log-level { font-weight: 700; letter-spacing: 0.05em; }
        .log-message { color: var(--code-text-color); }
        .log-error .log-level,
        .log-error .log-message { color: #ef4444; }
        .log-warning .log-level,
        .log-warning .log-message { color: #f59e0b; }
        .log-info .log-level { color: #22c55e; }
        .log-debug .log-level,
        .log-debug .log-message { color: #94a3b8; }
        .logs-empty-state { color: #94a3b8; }

        /* Diagnostics section */
        .diag-section {
            background: var(--card-background-color);
            border-radius: var(--ha-card-border-radius);
            padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
            box-shadow: var(--ha-card-box-shadow);
            margin: 18px 0 20px;
            scroll-margin-top: 18px;
            scroll-margin-bottom: 96px;
        }
        .diag-section > summary {
            color: var(--primary-color);
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .diag-section > summary::-webkit-details-marker { display: none; }
        .diag-section > summary::before {
            content: '';
            display: inline-flex;
            width: 8px;
            height: 8px;
            border-right: 1.7px solid currentColor;
            border-bottom: 1.7px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        .diag-section[open] > summary::before { transform: rotate(45deg); }
        .diag-section[open] > summary { margin-bottom: 18px; }
        #diag-content {
            padding-bottom: 6px;
        }
        .diag-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 6px;
        }
        .diag-overview-head {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 0 2px 2px;
        }
        .diag-overview-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
        }
        .diag-overview-copy {
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }
        .diag-card {
            border: 1px solid var(--divider-color);
            border-radius: 12px;
            background: var(--card-background-color);
            overflow: hidden;
            scroll-margin-top: 22px;
        }
        .diag-advanced-section {
            border: 1px solid var(--divider-color);
            border-radius: 12px;
            background: var(--card-background-color);
            overflow: hidden;
        }
        .diag-advanced-section > summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 16px;
            color: var(--primary-text-color);
        }
        .diag-advanced-section > summary::-webkit-details-marker {
            display: none;
        }
        .diag-advanced-section > summary::before {
            content: '';
            display: inline-flex;
            width: 8px;
            height: 8px;
            margin-top: 5px;
            border-right: 1.7px solid currentColor;
            border-bottom: 1.7px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        .diag-advanced-section[open] > summary::before {
            transform: rotate(45deg);
        }
        .diag-advanced-section[open] > summary {
            border-bottom: 1px solid var(--divider-color);
            background: var(--primary-background-color);
        }
        .diag-advanced-summary {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .diag-advanced-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-advanced-copy {
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }
        .diag-advanced-panel {
            padding: 16px;
        }
        .diag-card--primary {
            border-color: rgba(33, 150, 243, 0.22);
            box-shadow: none;
        }
        .diag-card--primary .diag-card-header {
            background: rgba(33, 150, 243, 0.08);
        }
        /* "Last run" breadcrumb banner — only rendered when prior run was
           non-graceful (sigkill, crash, etc.). Tone follows the err/warn
           palette already established for diagnostics pills. */
        .diag-last-run {
            margin-bottom: 12px;
        }
        .diag-last-run.is-err {
            border-color: rgba(244, 67, 54, 0.32);
        }
        .diag-last-run.is-err .diag-card-header {
            background: rgba(244, 67, 54, 0.08);
        }
        .diag-last-run.is-warn {
            border-color: rgba(255, 152, 0, 0.32);
        }
        .diag-last-run.is-warn .diag-card-header {
            background: rgba(255, 152, 0, 0.08);
        }
        .diag-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            background: var(--primary-background-color);
            border-bottom: 1px solid var(--divider-color);
        }
        .diag-card-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .diag-card-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-card-subtitle {
            font-size: 12px;
            color: var(--secondary-text-color);
        }
        .diag-copy-btn {
            white-space: nowrap;
        }
        .diag-config-btn {
            white-space: nowrap;
        }
        .diag-raw-details {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid var(--divider-color);
        }
        .diag-raw-details > summary {
            list-style: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--primary-color);
        }
        .diag-raw-details > summary::-webkit-details-marker {
            display: none;
        }
        .diag-raw-details > summary::before {
            content: '';
            display: inline-flex;
            width: 7px;
            height: 7px;
            border-right: 1.6px solid currentColor;
            border-bottom: 1.6px solid currentColor;
            transform: rotate(-45deg);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        .diag-raw-details[open] > summary::before {
            transform: rotate(45deg);
        }
        .diag-raw-pre {
            margin: 8px 0 0;
            padding: 10px;
            border-radius: 10px;
            background: rgba(127, 127, 127, 0.08);
            color: var(--primary-text-color);
            font-size: 11px;
            line-height: 1.55;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-x: auto;
        }
        .diag-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px 20px;
            padding: 16px;
        }
        .diag-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            padding: 16px;
            border-bottom: 1px solid var(--divider-color);
        }
        /* ── Diagnostics health strip ── */
        .diag-health-strip {
            display: flex;
            gap: 8px;
            padding: 8px 4px 4px;
            flex-wrap: wrap;
        }
        .diag-health-pill {
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--divider-color);
            white-space: nowrap;
            color: var(--secondary-text-color);
        }
        .diag-health-pill.ok {
            border-color: rgba(67, 160, 71, 0.3);
            color: #43a047;
        }
        .diag-health-pill.warn {
            border-color: rgba(255, 166, 0, 0.3);
            color: #e68a00;
        }
        .diag-health-pill.err {
            border-color: rgba(219, 68, 55, 0.3);
            color: #db4437;
        }
        .diag-summary-card {
            display: block;
            width: 100%;
            border: 1px solid var(--divider-color);
            border-radius: 12px;
            padding: 14px;
            background: var(--primary-background-color);
            text-align: left;
            font: inherit;
            color: inherit;
            appearance: none;
            -webkit-appearance: none;
        }
        .diag-summary-card--link {
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }
        .diag-summary-card--link:hover {
            transform: translateY(-1px);
            box-shadow: var(--ui-surface-shadow-raised, 0 8px 20px rgba(15, 23, 42, 0.08));
        }
        .diag-summary-card--link:focus-visible {
            outline: 2px solid rgba(33, 150, 243, 0.38);
            outline-offset: 2px;
        }
        .diag-summary-card.ok {
            border-color: rgba(67, 160, 71, 0.28);
        }
        .diag-summary-card.warn {
            border-color: rgba(255, 166, 0, 0.28);
        }
        .diag-summary-card.error {
            border-color: rgba(219, 68, 55, 0.28);
        }
        .diag-summary-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
        }
        .diag-summary-value {
            margin-top: 8px;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-summary-hint {
            margin-top: 4px;
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }
        .diag-runtime-grid {
            border-top: 0;
        }
        .diag-item {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--divider-color);
        }
        .diag-item--stacked {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }
        .diag-label {
            font-size: 13px;
            color: var(--secondary-text-color);
        }
        .diag-value {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-text-color);
            text-align: right;
            word-break: break-word;
        }
        .diag-item--stacked .diag-value {
            width: 100%;
            text-align: left;
        }
        .diag-adapters,
        .diag-devices,
        .diag-ma-groups {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
            padding: 16px;
        }
        .diag-mini-card {
            border: 1px solid var(--divider-color);
            border-radius: 10px;
            padding: 12px;
            background: var(--primary-background-color);
        }
        .diag-mini-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 700;
            color: var(--primary-text-color);
            margin-bottom: 8px;
        }
        .diag-mini-meta {
            display: grid;
            gap: 8px;
            font-size: 12px;
            color: var(--secondary-text-color);
            line-height: 1.55;
            word-break: break-word;
        }
        .diag-meta-row {
            display: grid;
            grid-template-columns: minmax(0, auto) minmax(0, 1fr);
            align-items: start;
            gap: 8px;
        }
        .diag-meta-row--stack {
            grid-template-columns: 1fr;
            gap: 4px;
        }
        .diag-meta-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
        }
        .diag-meta-value {
            min-width: 0;
            color: var(--primary-text-color);
        }
        .diag-code-pill {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(127, 127, 127, 0.12);
            color: var(--primary-text-color);
            font-size: 11px;
            line-height: 1.45;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            word-break: break-all;
            white-space: normal;
        }
        .diag-jump-target {
            border-radius: 12px;
            transition: box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
        }
        .diag-target-highlight {
            box-shadow: var(--ui-highlight-shadow, 0 0 0 2px rgba(33, 150, 243, 0.2), 0 14px 32px rgba(15, 23, 42, 0.12));
            border-color: rgba(33, 150, 243, 0.34);
        }
        .diag-dot {
            display: inline-block;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .diag-dot.ok { background: var(--success-color); box-shadow: 0 0 6px rgba(67,160,71,.45); }
        .diag-dot.err { background: var(--error-color); }
        .diag-dot.warn { background: var(--warning-color); }
        .sink-table-wrap { overflow-x: auto; }
        .sink-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .sink-table th,
        .sink-table td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--divider-color);
            vertical-align: top;
        }
        .sink-table th {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
            background: var(--primary-background-color);
        }
        .sink-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 700;
        }
        .sink-status.running { background: rgba(67,160,71,.14); color: #2e7d32; }
        .sink-status.connected { background: rgba(3,169,244,.14); color: #0277bd; }
        .sink-status.idle { background: rgba(107,114,128,.14); color: #6b7280; }
        .sink-status.error { background: rgba(219,68,55,.14); color: #db4437; }
        .diag-subsection {
            padding: 0 16px 16px;
            border-top: 1px solid var(--divider-color);
        }
        .diag-subsection-title {
            padding-top: 14px;
            margin-bottom: 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--secondary-text-color);
        }
        .diag-subsection .diag-devices {
            padding: 0;
        }
        .diag-actions {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            padding: 0 2px;
        }
        .diag-actions--hero {
            padding: 0;
            margin-top: 4px;
            padding-top: 12px;
            border-top: 1px solid var(--divider-color);
        }
        .diag-actions-left,
        .diag-actions-right {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        /* ── Diagnostics sticky footer ── */
        .diag-footer {
            position: sticky;
            bottom: 0;
            z-index: 9;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 16px;
            margin-top: 8px;
            background: var(--card-background-color);
            border-top: 1px solid var(--divider-color);
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
            border-radius: 0 0 12px 12px;
        }
        .diag-footer-left, .diag-footer-right {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .diag-filter-input {
            display: block;
            width: 100%;
            padding: 8px 12px;
            margin: 8px 0 12px;
            font-size: 13px;
            border: 1px solid var(--divider-color);
            border-radius: 8px;
            background: var(--primary-background-color);
            color: var(--primary-text-color);
            outline: none;
            box-sizing: border-box;
        }
        .diag-filter-input:focus {
            border-color: var(--primary-color, #2196f3);
            box-shadow: 0 0 0 2px rgba(33,150,243,.15);
        }
        .diag-filter-empty {
            text-align: center;
            color: var(--secondary-text-color);
            font-size: 13px;
            padding: 16px 0;
            margin: 0;
        }
        .diag-copy-device-btn {
            margin-left: auto;
            padding: 2px 6px;
            font-size: 12px;
            line-height: 1;
            opacity: 0.5;
            transition: opacity 0.15s;
        }
        .diag-mini-card:hover .diag-copy-device-btn {
            opacity: 1;
        }
        .diag-report-issue-btn {
            padding: 2px 8px;
            font-size: 12px;
            line-height: 1;
        }
        .diag-recovery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
            padding: 16px;
            border-top: 1px solid var(--divider-color);
        }
        .diag-recovery-summary {
            padding: 16px;
            border-top: 1px solid var(--divider-color);
        }
        .diag-recovery-summary--hero {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 18px 16px;
            background: rgba(33, 150, 243, 0.05);
        }
        .diag-recovery-headline {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-recovery-copy {
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.6;
            color: var(--secondary-text-color);
        }
        .diag-recovery-list {
            display: grid;
            gap: 10px;
        }
        .diag-recovery-item {
            border: 1px solid var(--divider-color);
            border-radius: 10px;
            background: var(--primary-background-color);
            padding: 12px;
        }
        .diag-recovery-item.is-error {
            border-color: rgba(219, 68, 55, 0.28);
        }
        .diag-recovery-item.is-warning {
            border-color: rgba(255, 166, 0, 0.28);
        }
        .diag-recovery-item-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-recovery-item-summary {
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.55;
            color: var(--secondary-text-color);
        }
        .diag-recovery-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        .diag-recovery-actions--wrap {
            margin-top: 14px;
        }
        .diag-recovery-action {
            min-height: 32px;
        }
        .diag-recovery-action--primary {
            font-weight: 600;
        }
        .diag-action-menu {
            position: relative;
        }
        .diag-action-menu > summary {
            list-style: none;
            cursor: pointer;
        }
        .diag-action-menu > summary::before {
            content: none;
        }
        .diag-action-menu > summary::-webkit-details-marker {
            display: none;
        }
        .diag-action-menu-toggle::after {
            content: "▾";
            margin-left: 8px;
            font-size: 11px;
        }
        .diag-action-menu[open] .diag-action-menu-toggle::after {
            content: "▴";
        }
        .diag-action-menu-list {
            position: absolute;
            left: 0;
            top: calc(100% + 8px);
            min-width: 220px;
            display: grid;
            gap: 6px;
            padding: 8px;
            border-radius: 14px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            box-shadow: var(--ui-floating-shadow, var(--ha-card-box-shadow));
            z-index: 20;
        }
        .diag-recovery-action--menu-item {
            width: 100%;
            justify-content: flex-start;
        }
        .diag-trace-list {
            display: grid;
            gap: 10px;
        }
        .diag-trace-entry {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid var(--divider-color);
        }
        .diag-trace-entry:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
        .diag-trace-copy {
            min-width: 0;
        }
        .diag-trace-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-trace-meta {
            font-size: 11px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }
        .diag-test-path {
            display: grid;
            gap: 8px;
        }
        .diag-timeline {
            display: grid;
            gap: 10px;
            margin-top: 10px;
        }
        .diag-timeline-overview {
            display: grid;
            gap: 8px;
            padding: 10px 12px;
            border: 1px solid var(--divider-color);
            border-radius: 10px;
            background: rgba(148, 163, 184, 0.08);
        }
        .diag-timeline-overview-copy {
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }
        .diag-timeline-source-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .diag-timeline-source-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            font-size: 11px;
            font-weight: 600;
            color: var(--secondary-text-color);
        }
        .diag-timeline-advanced {
            margin: 0;
            border: 1px solid var(--divider-color);
            border-radius: 10px;
            background: var(--primary-background-color);
        }
        .diag-timeline-advanced-summary {
            cursor: pointer;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-text-color);
            list-style: none;
        }
        .diag-timeline-advanced-summary::-webkit-details-marker {
            display: none;
        }
        .diag-timeline-advanced-summary::after {
            content: "▾";
            float: right;
            color: var(--secondary-text-color);
        }
        .diag-timeline-advanced[open] .diag-timeline-advanced-summary::after {
            content: "▴";
        }
        .diag-timeline-controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
            padding: 0 12px 12px;
        }
        .diag-timeline-control {
            display: grid;
            gap: 6px;
            font-size: 11px;
            color: var(--secondary-text-color);
        }
        .diag-timeline-control-label {
            font-weight: 700;
            color: var(--secondary-text-color);
        }
        .diag-timeline-control select {
            width: 100%;
            min-height: 34px;
            border: 1px solid var(--divider-color);
            border-radius: 8px;
            padding: 6px 10px;
            background: var(--card-background-color);
            color: var(--primary-text-color);
        }
        .diag-timeline-entry {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: flex-start;
            padding: 10px 0;
            border-top: 1px solid var(--divider-color);
        }
        .diag-timeline-entry:first-child {
            border-top: 0;
            padding-top: 0;
        }
        .diag-timeline-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .diag-timeline-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-timeline-summary,
        .diag-timeline-meta {
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }
        .diag-timeline-empty {
            padding: 12px;
            border: 1px dashed var(--divider-color);
            border-radius: 10px;
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
            background: rgba(148, 163, 184, 0.05);
        }
        .diag-test-step {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--divider-color);
            border-radius: 10px;
            background: var(--primary-background-color);
        }
        .diag-test-step.is-reached {
            border-color: rgba(67, 160, 71, 0.28);
        }
        .diag-test-step-copy {
            min-width: 0;
        }
        .diag-test-step-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-text-color);
        }
        .diag-test-step-summary {
            margin-top: 4px;
            font-size: 11px;
            line-height: 1.5;
            color: var(--secondary-text-color);
        }

        /* ── Diagnostics nav strip ── */
        .diag-nav {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            gap: 4px;
            padding: 8px 4px;
            margin: -6px 0 8px;
            background: var(--card-background-color);
            border-bottom: 1px solid var(--divider-color);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .diag-nav::-webkit-scrollbar { display: none; }
        .diag-nav-btn {
            white-space: nowrap;
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            background: transparent;
            border: 1px solid var(--divider-color);
            color: var(--secondary-text-color);
            cursor: pointer;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
            flex-shrink: 0;
        }
        .diag-nav-btn:hover {
            background: rgba(33, 150, 243, 0.08);
            border-color: rgba(33, 150, 243, 0.3);
        }
        .diag-nav-btn.is-active {
            background: var(--primary-color, #2196f3);
            color: #fff;
            border-color: transparent;
        }

        .diag-panel.is-simple .diag-simple-hide {
            display: none !important;
        }

        .diag-mode-toggle {
            margin-left: auto;
            white-space: nowrap;
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            background: var(--primary-background-color);
            border: 1px solid var(--divider-color);
            color: var(--secondary-text-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .diag-mode-toggle:hover {
            background: var(--divider-color);
        }

        .diag-mode-icon {
            font-size: 14px;
        }

        .diag-panel.is-simple .diag-nav-btn[data-target="diag-health-summary"],
        .diag-panel.is-simple .diag-nav-btn[data-target="diag-speaker-states"],
        .diag-panel.is-simple .diag-nav-btn[data-target="diag-routing"],
        .diag-panel.is-simple .diag-nav-btn[data-target="diag-ma-groups-card"],
        .diag-panel.is-simple .diag-nav-btn[data-target="diag-advanced-section"] {
            display: none;
        }

        /* ── Recovery sub-sections ── */
        .diag-recovery-sub {
            border-top: 1px solid var(--divider-color);
        }
        .diag-recovery-sub-summary {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-text-color);
            cursor: pointer;
            list-style: none;
            user-select: none;
            -webkit-user-select: none;
        }
        .diag-recovery-sub-summary::-webkit-details-marker { display: none; }
        .diag-recovery-sub-summary::before {
            content: '';
            display: inline-block;
            width: 7px;
            height: 7px;
            border-right: 2px solid var(--secondary-text-color);
            border-bottom: 2px solid var(--secondary-text-color);
            transform: rotate(-45deg);
            transition: transform 0.15s;
            flex-shrink: 0;
        }
        .diag-recovery-sub[open] > .diag-recovery-sub-summary::before {
            transform: rotate(45deg);
        }
        .diag-recovery-sub-count {
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--divider-color);
            color: var(--secondary-text-color);
        }
        .diag-recovery-sub-count.warn {
            background: rgba(255, 166, 0, 0.15);
            color: #e68a00;
        }
        .diag-recovery-sub-count.error {
            background: rgba(219, 68, 55, 0.15);
            color: #db4437;
        }
        .diag-recovery-sub-body {
            padding: 0 16px 16px;
        }

        /* Timezone preview */
        .tz-preview {
            display: block;
            margin-top: 4px;
            font-size: 12px;
            font-weight: 400;
            color: var(--secondary-text-color);
            white-space: normal;
        }

        .transport-btn {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 34px; height: 30px; padding: 0 7px; font-size: 15px;
            border: 1px solid var(--divider-color); border-radius: 4px;
            background: var(--card-background-color); color: var(--primary-text-color);
            cursor: pointer; transition: background 0.15s;
        }
        .transport-btn:hover { background: var(--secondary-background-color); }
        .transport-btn.active {
            background: rgba(3, 169, 244, 0.12);
            border-color: var(--primary-color); color: var(--primary-color);
        }
        /* Shuffle/repeat — visible only when MA active */
        .transport-btn[id^="dma-shuffle-"],
        .transport-btn[id^="dma-repeat-"] { display: none !important; }
        .transport-btn.ma-ready[id^="dma-shuffle-"],
        .transport-btn.ma-ready[id^="dma-repeat-"] { display: inline-flex !important; }

        /* Released badge on device card */
        .released-badge {
            display: inline-flex;
            align-items: center;
            min-height: var(--badge-min-height);
            font-size: var(--badge-font-size);
            font-weight: var(--badge-font-weight);
            line-height: var(--badge-line-height);
            letter-spacing: 0.01em;
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            background: rgba(107, 114, 128, 0.15);
            color: var(--secondary-text-color);
            border: 1px solid transparent;
            vertical-align: middle;
            cursor: default;
            user-select: none;
            -webkit-user-select: none;
        }
        .released-badge-warn {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border-color: transparent;
        }

        /* Config dirty indicator */
        .config-input-dirty:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .config-field-dirty > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .config-field-dirty > select,
        .config-field-dirty > textarea,
        .bt-device-row .config-input-dirty:not([type="checkbox"]),
        .bt-device-row .config-input-dirty + select,
        .adapter-row .config-input-dirty,
        .bt-detail-row .config-input-dirty {
            border-color: rgba(245, 158, 11, 0.55) !important;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
            background: rgba(245, 158, 11, 0.06);
        }
        .config-field-dirty:is(.form-group, .config-setting-row, .config-inline-field, .config-inline-row) {
            border-radius: 10px;
            background: rgba(245, 158, 11, 0.05);
        }
        .config-switch.config-field-dirty .config-switch-track,
        .bt-switch.config-field-dirty .bt-switch-track,
        label.config-field-dirty .config-switch-track {
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
        }
        .config-dirty-row {
            border-radius: 10px;
            box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.28);
            background: rgba(245, 158, 11, 0.04);
        }
        .config-panel-has-dirty > .config-panel-card:first-child,
        .config-panel-has-dirty .config-panel-card:first-child {
            border-color: rgba(245, 158, 11, 0.32);
        }

        /* Experimental feature highlight — mirrors the amber dirty pattern
           above but in red, so rows revealed by the "Show experimental
           features" master switch stand out from stable settings. The
           ::before badge renders a small circular "!" icon (rather than
           a wide text label) so the row stays compact while still
           carrying a non-colour-only signal. The hover hint comes from
           the row's own ``title=`` attribute. */
        [data-experimental]:is(.config-setting-row, .bt-scan-toggle, .adapter-cod-override) {
            position: relative;
            border-radius: 10px;
            box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.32);
            background: rgba(239, 68, 68, 0.05);
            padding-inline-end: 36px;
        }
        [data-experimental]:is(.config-setting-row, .bt-scan-toggle, .adapter-cod-override)::before {
            content: "!";
            position: absolute;
            top: 6px;
            right: 8px;
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            color: #ef4444;
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.4);
            border-radius: 50%;
            pointer-events: none;
        }
        [data-experimental] .config-switch-track,
        [data-experimental] .bt-switch-track {
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
        }

        /* Scan spinner */
        @keyframes spin { to { transform: rotate(360deg); } }
        .scan-spinner {
            display: inline-block; width: 12px; height: 12px;
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-top-color: #8b5cf6;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        /* Auto-refresh active state */
        #auto-refresh-btn.auto-on { background: var(--success-color); }

        /* Toast notifications */
        .toast-container {
            position: fixed; bottom: 24px; right: 24px;
            z-index: 9999; display: flex; flex-direction: column; gap: 8px;
            pointer-events: none;
        }
        .toast {
            background: var(--card-background-color);
            border: 1px solid var(--divider-color);
            border-radius: 8px; padding: 10px 16px;
            font-size: 13px; color: var(--primary-text-color);
            box-shadow: var(--ui-floating-shadow, 0 4px 12px rgba(0,0,0,.15));
            opacity: 0; transform: translateY(8px);
            transition: opacity 0.2s, transform 0.2s;
            pointer-events: auto; max-width: 320px;
        }
        .toast.show { opacity: 1; transform: translateY(0); }
        .toast-success { border-left: 3px solid var(--success-color); }
        .toast-error   { border-left: 3px solid var(--error-color); }
        .toast-info    { border-left: 3px solid var(--primary-color); }

        /* Config section groups */
        .config-group { margin-bottom: 32px; }
        .config-group--flush { margin-bottom: 0; }
        .config-group:last-child { margin-bottom: 0; }
        .config-group-heading {
            display: flex;
            flex-direction: column;
            gap: var(--ui-space-050);
            margin-bottom: var(--ui-space-200);
        }
        .config-group-title {
            display: flex; align-items: center; gap: 8px;
            font-size: var(--ui-type-section-title-size);
            font-weight: var(--ui-type-section-title-weight);
            line-height: var(--ui-type-section-title-line-height);
            color: var(--primary-color);
            margin: 0;
        }
        .config-group-title .cg-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            color: var(--primary-color);
        }
        .config-group-subtitle {
            margin: 0;
            font-size: var(--ui-type-support-size);
            line-height: var(--ui-type-support-line-height);
            color: var(--secondary-text-color);
            max-width: 90ch;
        }
        .config-settings-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
            gap: 16px;
            align-items: start;
        }
        .config-settings-card {
            background: var(--card-background-color);
            border: 1px solid var(--divider-color);
            border-radius: 12px;
            padding: 16px;
            box-shadow: none;
        }
        .config-settings-card--span {
            grid-column: 1 / -1;
        }
        .config-settings-card--muted {
            background: rgba(3,169,244,0.025);
        }
        .config-settings-card--utility {
            background: rgba(255, 166, 0, 0.03);
        }
        /* Experimental-flags grouping card.  Mirrors the amber palette
           used by .notice-card--warning so operators read it as
           "in-development, may bite" at a glance.  Border-inline-start
           accent + faint tint match the notice-card pattern; title gets
           the warning colour and an icon to the left. */
        .config-settings-card--experimental {
            background: rgba(255, 166, 0, 0.05);
            border-color: rgba(255, 166, 0, 0.32);
            border-inline-start: 4px solid #c77700;
        }
        .config-settings-card--experimental .config-card-title {
            color: #c77700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .config-settings-card--experimental .config-card-title-icon {
            width: 18px;
            height: 18px;
            color: #c77700;
            flex: 0 0 auto;
        }
        .config-card-stack {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .config-card-header {
            margin-bottom: var(--ui-space-200);
            padding-bottom: var(--ui-space-150);
            border-bottom: 1px solid rgba(128, 145, 171, 0.18);
        }
        .config-card-header--split {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }
        .config-card-header--split > :first-child {
            flex: 1 1 auto;
            min-width: 0;
        }
        .config-card-title {
            font-size: var(--ui-type-card-title-size);
            font-weight: var(--ui-type-card-title-weight);
            line-height: var(--ui-type-card-title-line-height);
            letter-spacing: 0.01em;
            color: var(--primary-text-color);
            margin-bottom: 0;
        }
        .config-card-subtitle {
            margin: 0;
            font-size: var(--ui-type-body-size);
            line-height: var(--ui-type-support-line-height);
            color: var(--secondary-text-color);
            max-width: 84ch;
        }
        #config-bluetooth-paired-card .config-card-subtitle {
            max-width: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .config-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px 16px;
        }
        .config-form-grid--single {
            grid-template-columns: 1fr;
        }
        .config-form-grid .form-group {
            margin-bottom: 0;
        }
        .config-form-group-compact {
            margin-bottom: 0;
        }
        .config-setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 10px 0;
            cursor: pointer;
            border-bottom: 1px solid var(--divider-color);
        }
        .config-setting-row:first-of-type {
            padding-top: 2px;
        }
        .config-setting-row:last-of-type {
            padding-bottom: 2px;
            border-bottom: none;
        }
        .config-setting-row--compact {
            padding-bottom: 4px;
            border-bottom: none;
        }
        /* Warning treatment for the "Show experimental features" master
           toggle: amber border + glyph cue so the user understands the
           switch reveals risky in-development surface area.  Distinct
           from per-row ``data-experimental`` styling which marks
           individual experimental settings inside the revealed card. */
        .config-setting-row--warn {
            border: 1px solid var(--warning-color, #f59e0b);
            border-radius: 10px;
            padding: 10px 12px;
            background: rgba(245, 158, 11, 0.08);
        }
        .config-setting-row--warn:last-of-type {
            border-bottom: 1px solid var(--warning-color, #f59e0b);
            padding-bottom: 10px;
        }
        .config-setting-warn-glyph {
            display: inline-block;
            margin-right: 6px;
            color: var(--warning-color, #f59e0b);
            font-size: 1.05em;
        }
        /* Accent + soft pulse for the scan modal's primary button when
           no scan has run yet — directs attention without being noisy.
           Falls back gracefully on browsers that don't run the
           keyframes (the colour treatment alone is enough). */
        .scan-start-btn--pulse {
            box-shadow: 0 0 0 0 rgba(3, 169, 244, 0.55);
            animation: scan-start-pulse 1.6s ease-out infinite;
        }
        @keyframes scan-start-pulse {
            0%   { box-shadow: 0 0 0 0   rgba(3, 169, 244, 0.45); }
            70%  { box-shadow: 0 0 0 10px rgba(3, 169, 244, 0);    }
            100% { box-shadow: 0 0 0 0   rgba(3, 169, 244, 0);    }
        }
        @media (prefers-reduced-motion: reduce) {
            .scan-start-btn--pulse { animation: none; }
        }
        /* Split-button for scan-result rows: primary "Pair and Add"
           button + adjacent caret that opens a small ui-action-menu
           with the secondary "Add to fleet" item.  Both halves share
           the ``--pair`` green colour so they read as one control;
           inner corners are flat (border-radius 0) and the seam is a
           1px subtle divider so the two halves don't bleed together. */
        /* The wrapper is the positioning context — both halves of the
           split button anchor to it, and the popup floats relative
           to the wrapper's edges so it lines up with the END of the
           split (toggle's right edge), not the toggle alone.  The
           <details> itself must NOT be position:relative or the popup
           would shrink to its 30px width and overflow horizontally. */
        .scan-action-split {
            position: relative;
            display: inline-flex;
            align-items: stretch;
            line-height: 1;
        }
        .scan-action-split-menu {
            position: static;
        }
        /* Force consistent geometry across both halves so the seam is
           clean — same height, no inner border-radius, primary's
           right border collapses into the toggle's left border. */
        .scan-action-split-primary {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            border-right: none !important;
            min-height: 32px !important;
        }
        .scan-action-split-toggle {
            /* Match the SOLID primary look of the "Pair and Add" half
               (which is themed via .btn-primary / --button-primary-bg
               and ends up as solid var(--primary-color) with white
               text).  !important guards against shared rules
               (.ui-action-menu-toggle / .scan-action-btn:hover) that
               would otherwise repaint the toggle and break the seam. */
            background: var(--primary-color) !important;
            border: 1px solid var(--primary-color) !important;
            /* Subtle inner divider so the seam between primary and
               toggle is still visible without breaking the solid look. */
            border-left: 1px solid rgba(255, 255, 255, 0.32) !important;
            color: #fff !important;
            border-radius: 999px;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            padding: 0 10px;
            min-height: 32px;
            min-width: 30px;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            list-style: none;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .scan-action-split-toggle::-webkit-details-marker,
        .scan-action-split-toggle::marker {
            display: none;
            content: "";
        }
        .scan-action-split-toggle::after {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid currentColor;
            transition: transform 0.15s ease;
        }
        .scan-action-split-toggle:hover,
        .scan-action-split-menu[open] .scan-action-split-toggle {
            /* Slightly darker solid blue on hover/open — uses
               --button-primary-hover-bg from the theme stack. */
            background: var(--button-primary-hover-bg, #0288d1) !important;
            border-color: var(--button-primary-hover-bg, #0288d1) !important;
        }
        .scan-action-split-menu[open] .scan-action-split-toggle::after {
            transform: rotate(180deg);
        }
        /* Ensure the scan-results scroll container doesn't clip the
           floating popup — by default the modal body is scrollable
           and would hide a popup that overflows the row. */
        .scan-results-box,
        .bt-scan-results-box,
        .bt-scan-modal-body,
        .scan-result-item,
        .scan-result-actions {
            overflow: visible;
        }
        .scan-action-split-menu-list {
            position: absolute;
            /* Anchor: right edge of the wrapper (so the popup aligns
               with the END of the split button), opening UPWARD so
               it doesn't spill below the modal's clip boundary on
               the last visible row.  Width capped at the action
               column width (~125px wrapper) using max-width to
               avoid leaking past the modal's left edge — only the
               item label needs to fit. */
            right: 0;
            bottom: calc(100% + 6px);
            min-width: 130px;
            max-width: 180px;
            display: grid;
            gap: 2px;
            padding: 4px;
            border-radius: 10px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            box-shadow: var(--ui-floating-shadow, 0 6px 22px rgba(0,0,0,0.18));
            z-index: 40;
            white-space: nowrap;
        }
        .scan-action-menu-item {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            padding: 8px 12px;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            color: var(--primary-text-color);
            font-size: 13px;
            font-weight: 500;
            text-align: left;
            cursor: pointer;
            transition: background 0.12s ease;
        }
        .scan-action-menu-item:hover,
        .scan-action-menu-item:focus-visible {
            background: var(--secondary-background-color);
            outline: none;
        }
        .config-setting-copy {
            display: flex;
            flex-direction: column;
            gap: var(--ui-space-050);
            min-width: 0;
        }
        .config-setting-copy strong {
            font-size: var(--ui-type-support-size);
            font-weight: var(--ui-type-body-strong-weight);
            line-height: var(--ui-type-card-title-line-height);
            color: var(--primary-text-color);
        }
        .config-setting-copy .form-hint {
            margin-top: 0;
        }
        .config-group .form-group > label {
            font-size: 13px;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 6px;
        }
        .config-group .form-group > label .form-hint {
            margin-top: 4px;
        }
        .config-setting-control {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 24px;
            flex-shrink: 0;
        }
        .config-setting-control--field {
            justify-content: flex-end;
            min-width: 148px;
        }
        .config-inline-row {
            align-items: center;
        }
        .config-inline-field {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .config-inline-field input {
            width: 92px;
            min-width: 92px;
            text-align: right;
        }
        .config-inline-unit {
            font-size: 12px;
            color: var(--secondary-text-color);
            white-space: nowrap;
        }
        .config-inline-fill {
            flex: 1 1 220px;
            min-width: 180px;
        }
        .config-inline-note {
            margin-top: 10px;
        }
        .config-channel-warning {
            margin-top: 12px;
            padding: 11px 13px;
            border-radius: 12px;
            border: 1px solid var(--tone-warning-border);
            background: var(--tone-warning-bg);
            color: var(--primary-text-color);
            font-size: 12px;
            line-height: 1.5;
        }
        .config-inline-link {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-color);
            text-decoration: none;
            white-space: nowrap;
        }
        .config-inline-link:hover {
            text-decoration: underline;
        }
        .config-subsection {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--divider-color);
        }
        .security-policy-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .security-policy-fields.is-disabled {
            opacity: 0.58;
        }
        .security-policy-fields.is-disabled input {
            cursor: not-allowed;
        }
        .panel-status {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding: 12px 14px;
            border-radius: 10px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
        }
        .panel-status--neutral {
            color: var(--secondary-text-color);
        }
        .panel-status--success {
            background: rgba(67,160,71,0.10);
            border-color: rgba(67,160,71,0.24);
            color: #2e7d32;
        }
        .panel-status--warning {
            background: rgba(245,166,35,0.10);
            border-color: rgba(245,166,35,0.30);
            color: #b86e00;
        }
        .panel-status--error {
            background: rgba(229,57,53,0.10);
            border-color: rgba(229,57,53,0.30);
            color: #b71c1c;
        }
        .panel-status-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .panel-status-text {
            font-size: 13px;
            line-height: 1.5;
            flex: 1 1 220px;
            min-width: 0;
        }
        .panel-status-action {
            margin-left: auto;
            flex-shrink: 0;
        }
        .ma-auth-stack {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .ma-addon-hint {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .config-target-highlight {
            outline: 2px solid rgba(255, 166, 0, 0.95);
            outline-offset: 2px;
            box-shadow: 0 0 0 4px rgba(255, 166, 0, 0.14);
            transition: outline-color 0.2s ease, box-shadow 0.2s ease;
        }
        .config-status-message {
            min-height: 18px;
        }
        .config-status-message--center {
            text-align: center;
        }
        .inline-status[data-tone="muted"] { color: var(--secondary-text-color); }
        .inline-status[data-tone="success"] { color: var(--success-color); }
        .inline-status[data-tone="error"] { color: var(--error-color); }
        .paired-show-all {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            font-size: 12px;
            color: var(--secondary-text-color);
            cursor: pointer;
            white-space: nowrap;
        }
        .paired-show-all {
            margin-left: auto;
        }
        .form-hint {
            display: block; font-size: 11px; font-weight: 400;
            color: var(--secondary-text-color);
            margin-top: 2px; line-height: 1.45;
        }
        .config-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 16px;
            margin-top: 18px;
            border-top: 1px solid var(--divider-color);
        }
        .config-footer-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .config-dirty-label {
            display: none;
            font-size: 13px;
            font-weight: 700;
            color: var(--warning-color);
        }
        .config-footer.is-dirty .config-dirty-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .config-footer-hint {
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
            max-width: 56ch;
        }
        .config-footer-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
        .config-btn-group { display: flex; gap: 8px; }
        .config-btn-group--utility {
            justify-content: flex-end;
        }
        .config-hidden-input {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* BT device detail sub-row */
        .bt-detail-row {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 8px; padding: 8px 2px 4px; margin-left: 64px;
        }
        .bt-detail-row label {
            font-size: 11px; font-weight: 600; color: var(--secondary-text-color);
            text-transform: uppercase; margin-bottom: 2px; display: block;
        }
        .bt-detail-row input {
            padding: 6px 8px; border: 1px solid var(--divider-color);
            border-radius: 4px; font-size: 13px; width: 100%;
            background: var(--card-background-color); color: var(--primary-text-color);
        }
        .bt-detail-row select {
            padding: 6px 8px; border: 1px solid var(--divider-color);
            border-radius: 4px; font-size: 13px; width: 100%;
            background: var(--card-background-color); color: var(--primary-text-color);
            cursor: pointer;
        }
        .bt-detail-row input:focus, .bt-detail-row select:focus { outline: none; border-color: var(--primary-color); }
        .bt-expand-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            border: 1px solid var(--divider-color);
            background: var(--card-background-color);
            color: var(--secondary-text-color);
            cursor: pointer;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
            flex-shrink: 0;
        }
        .bt-expand-btn:hover {
            background: rgba(3,169,244,.08);
            border-color: rgba(3,169,244,.24);
            color: var(--primary-color);
        }
        .bt-expand-btn-icon {
            font-size: 12px;
            line-height: 1;
            transition: transform 0.2s ease;
        }
        .bt-expand-btn.open .bt-expand-btn-icon { transform: rotate(180deg); }
        .scan-action-icon {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        /* Keyboard shortcuts hint */
        .kbd-hint {
            text-align: center; font-size: 11px;
            color: var(--secondary-text-color); margin-top: 16px; padding-top: 12px;
            border-top: 1px solid var(--divider-color);
        }
        .kbd { display: inline-block; padding: 1px 5px; border: 1px solid var(--divider-color);
               border-radius: 3px; font-family: monospace; font-size: 11px; }

        @media (prefers-color-scheme: dark) {
            .chip {
                background: rgba(255,255,255,.08);
                border-color: rgba(255,255,255,.12);
            }
            .filter-bar,
            .action-bar,
            .config-panel-card,
            .diag-mini-card,
            .list-detail-player-main {
                background: var(--card-background-color);
            }
            .list-row:hover .list-row-main,
            .list-row.expanded .list-row-main {
                background: rgba(255,255,255,.04);
            }
            .list-row-detail,
            .card-np {
                background: rgba(255,255,255,.04);
            }
            .health-pill {
                background: rgba(255,255,255,.08);
            }
        }

        html.theme-dark .chip,
        html.theme-dark .health-pill,
        html.theme-dark .diag-mini-card,
        html.theme-dark .list-detail-player-main,
        html.theme-dark .config-panel-card {
            background: rgba(255,255,255,.08);
        }
        html.theme-dark .config-tab.active {
            background: transparent;
        }
        html.theme-dark .config-tabs {
            box-shadow: inset 0 -2px 0 rgba(255,255,255,.14);
        }
        html.theme-dark .card-np,
        html.theme-dark .list-row-detail {
            background: rgba(255,255,255,.04);
        }
        html.theme-dark .list-row:hover .list-row-main,
        html.theme-dark .list-row.expanded .list-row-main {
            background: rgba(255,255,255,.05);
        }

        @media (max-width: 960px) {
            .filter-bar {
                flex-wrap: wrap;
                align-items: flex-start;
            }
            .filter-bar select {
                flex: 1 1 180px;
                min-width: 0;
            }
            .view-toggle {
                margin-left: 0;
                order: 10;
            }
            .action-bar {
                flex-wrap: wrap;
                align-items: center;
                gap: 10px;
            }
            .toolbar-sep {
                display: none;
            }
            .toolbar-count {
                flex: 1 1 auto;
                min-width: 0;
            }
            .vol-wrap {
                flex: 1 1 220px;
                min-width: 200px;
                margin: 0;
            }
            .action-bar .action-btn {
                flex: 1 1 180px;
                justify-content: center;
            }
            .action-bar .action-btn-label {
                white-space: normal;
                line-height: 1.2;
            }

            .list-view-shell {
                overflow-x: auto;
                overflow-y: visible;
                -webkit-overflow-scrolling: touch;
            }
            .list-header,
            .list-row-main {
                min-width: 0;
                grid-template-columns: 32px minmax(138px, 1.65fr) 82px 74px 92px minmax(76px, 0.68fr) 72px;
                gap: 8px;
            }
            .list-header {
                padding: 10px 12px;
            }
            .list-row-main {
                padding: 8px 12px;
            }
            .list-col-divider-start,
            .list-col-divider-mid,
            .list-col-divider-end,
            .list-status-cell,
            .list-adapter-cell,
            .list-group-cell,
            .list-vol-wrap,
            .list-actions {
                padding-left: 8px;
            }
            .list-col-divider-start::before,
            .list-col-divider-mid::before,
            .list-col-divider-end::before,
            .list-status-cell::before,
            .list-adapter-cell::before,
            .list-group-cell::before,
            .list-vol-wrap::before,
            .list-actions::before {
                left: -5px;
            }
            .list-sort-btn {
                font-size: 10px;
                letter-spacing: 0.06em;
            }
            .list-cell-name {
                gap: 8px;
            }
            .list-name-meta-row {
                flex-wrap: wrap;
                gap: 6px;
            }
            .list-actions {
                justify-content: flex-start;
                gap: 4px;
            }

            .bt-table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                -webkit-mask-image: none;
                mask-image: none;
            }
            .bt-header,
            .bt-device-row {
                min-width: 0;
                grid-template-columns: 42px minmax(132px, 1.15fr) minmax(116px, 1fr) minmax(76px, 0.82fr) 56px 64px minmax(74px, 0.7fr) minmax(148px, 1fr);
                gap: 6px;
            }
            .bt-header {
                padding: 0 2px 8px;
                font-size: 11px;
            }
            .bt-device-row input:not([type="checkbox"]),
            .bt-device-row select {
                padding: 6px 8px;
                font-size: 12px;
            }
            .bt-name-field {
                gap: 6px;
            }
            .btn-remove-dev {
                width: 28px;
                height: 28px;
            }
            .bt-row-actions {
                gap: 6px;
            }

            .paired-box-header {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                align-items: start;
                column-gap: 10px;
                row-gap: 8px;
            }
            .paired-box-copy {
                white-space: normal;
            }
            .paired-show-all {
                grid-column: 2;
                margin-left: 0;
                justify-self: start;
            }

            .scan-result-item {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                grid-template-areas:
                    "primary name"
                    "mac mac";
                align-items: start;
                column-gap: 10px;
                row-gap: 8px;
            }
            .scan-result-item:has(.paired-actions) {
                grid-template-areas:
                    "primary name"
                    "mac mac"
                    "actions actions";
            }
            .scan-result-actions {
                grid-area: primary;
                flex-wrap: wrap;
            }
            .scan-result-summary {
                grid-area: name;
                align-self: center;
            }
            .scan-result-name {
                max-width: 100%;
            }
            .scan-result-mac {
                grid-area: mac;
                width: auto;
            }
            .paired-actions {
                grid-area: actions;
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                width: 100%;
            }
            .paired-result-item {
                display: grid;
                grid-template-columns: auto 112px minmax(0, 1fr) auto;
                grid-template-areas: none;
                align-items: center;
                column-gap: 10px;
                row-gap: 8px;
            }
            .paired-result-item .scan-result-actions,
            .paired-result-item .scan-result-mac,
            .paired-result-item .scan-result-name,
            .paired-result-item .paired-actions {
                grid-area: auto;
            }
            .paired-result-item .scan-result-actions {
                flex-wrap: nowrap;
            }
            .paired-result-item .scan-result-mac {
                width: 112px;
            }
            .paired-result-item .paired-actions {
                width: auto;
                margin-left: auto;
                flex-wrap: nowrap;
                justify-content: flex-end;
            }
            .paired-box-header--static {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
            }
        }

        /* ── Mobile ── */
        @media (max-width: 640px) {
            body { padding: 10px; }
            .header { padding: 12px 16px; }
            .header h1 { font-size: 18px; }
            .diag-section {
                margin: 16px 0 18px;
                padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
            }
            .diag-section > summary {
                font-size: 18px;
            }
            .diag-panel {
                gap: 16px;
            }
            .diag-advanced-section > summary,
            .diag-advanced-panel {
                padding-left: 14px;
                padding-right: 14px;
            }
            .diag-card-header,
            .diag-summary-grid,
            .diag-grid,
            .diag-adapters,
            .diag-devices,
            .diag-ma-groups,
            .diag-recovery-grid,
            .diag-recovery-summary,
            .diag-subsection {
                padding-left: 14px;
                padding-right: 14px;
            }
            .diag-card-header {
                padding-top: 13px;
                padding-bottom: 13px;
            }
            .diag-recovery-summary--hero {
                padding-top: 16px;
                padding-bottom: 16px;
            }
            .diag-recovery-sub-summary { padding: 10px 14px; }
            .diag-recovery-sub-body { padding: 0 14px 14px; }
            .header-row1 { gap: 6px; }
            .header-brand {
                gap: 8px;
            }
            .header-meta {
                width: 100%;
            }
            .header-row2 { flex-direction: column; align-items: flex-start; gap: 2px; }
            .header-link,
            .header-theme-btn {
                font-size: 0;
                min-width: 40px;
                min-height: 40px;
                justify-content: center;
                padding-inline: 10px;
            }
            .header-utility-block {
                gap: 6px;
                min-height: 40px;
                margin-left: 0;
                padding-left: 10px;
                flex-wrap: nowrap;
                max-width: 100%;
            }
            .header-user-name {
                font-size: 12px;
                min-height: 40px;
                max-width: min(100%, 18ch);
                padding-right: 0;
            }
            .header-user-name a { font-size: 12px; }
            .header-utility-block .header-user-name::before {
                height: 20px;
            }
            .header-btn-signout {
                min-height: 40px;
                padding-inline: 12px;
            }
            .header-btn-signout-label {
                display: inline;
            }
            .health-indicator {
                font-size: 0;
                gap: 8px;
            }
            .notice-card {
                grid-template-columns: auto minmax(0, 1fr);
                align-items: start;
            }
            .notice-card-actions {
                grid-column: 1 / -1;
                width: 100%;
                justify-content: stretch;
            }
            .notice-card-action {
                width: 100%;
            }
            .onboarding-card {
                grid-template-columns: 1fr;
            }
            .onboarding-card.is-collapsed .notice-card-text {
                white-space: normal;
            }
            .onboarding-progress-bar {
                width: 100%;
            }

            .status-grid { grid-template-columns: minmax(0, 1fr); }
            .filter-bar {
                flex-wrap: wrap;
                gap: 8px;
            }
            .filter-bar select {
                flex: 1 1 calc(50% - 4px);
                min-width: 140px;
            }
            .action-bar {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .view-toggle { display: none; }
            .config-tabs {
                gap: 0;
                padding: 0;
            }

            .bt-table-wrap {
                overflow-x: auto; -webkit-overflow-scrolling: touch;
                -webkit-mask-image: linear-gradient(to right, black 90%, transparent);
                mask-image: linear-gradient(to right, black 90%, transparent);
            }
            .bt-table-wrap::-webkit-scrollbar { height: 4px; }
            .bt-table-wrap::-webkit-scrollbar-thumb { background: var(--secondary-text-color); border-radius: 2px; }
            .bt-header, .bt-device-row { min-width: 1040px; }
            .adapter-row { min-width: 380px; }

            .btn-bt-action { padding: 8px 12px; }
            .mute-btn { min-height: 36px; }
            .transport-btn { min-height: 36px; }
            .logs-toolbar {
                align-items: flex-start;
            }
            .logs-toolbar-left,
            .logs-toolbar-right {
                width: 100%;
            }
            .logs-runtime-controls {
                width: 100%;
                align-items: stretch;
            }
            .logs-container { height: 280px; font-size: 11px; }
            .bt-detail-row { grid-template-columns: 1fr 1fr; }
            .devices-card-header {
                flex-direction: column;
                align-items: stretch;
            }
            .devices-card-actions {
                justify-content: flex-start;
            }
            .config-settings-grid,
            .config-form-grid {
                grid-template-columns: 1fr;
            }
            .config-card-header--split,
            .config-footer {
                flex-direction: column;
                align-items: stretch;
            }
            .panel-status-action {
                margin-left: 0;
            }
            .config-footer-actions {
                width: 100%;
                justify-content: stretch;
            }
            .config-btn-group {
                width: 100%;
                justify-content: stretch;
            }
            .config-btn-group .btn { flex: 1; }
            .toast-container { left: 12px; right: 12px; bottom: 16px; }
            .toast { max-width: none; }
            .diag-grid { grid-template-columns: 1fr; }
            .diag-summary-grid { grid-template-columns: 1fr 1fr; }
            .list-detail-player-main {
                flex-direction: column;
                align-items: stretch;
            }
            .list-detail-body {
                grid-template-columns: 1fr;
            }
            .list-detail-art-rail {
                width: 100%;
                gap: 8px;
            }
            .list-detail-player-center,
            .list-detail-current-copy {
                align-items: flex-start;
                text-align: left;
            }
            .list-detail-playback-rail {
                width: 100%;
                --playback-side-width: 100%;
                --playback-center-width: min(100%, 240px);
            }
            .list-track-title,
            .list-track-meta,
            .list-detail-time {
                text-align: left;
            }
            .list-detail-progress-wrap {
                width: 100%;
                margin-left: 0;
            }
            .list-player-media-lane {
                width: 100%;
                grid-template-columns: 1fr;
            }
            .list-queue-neighbor,
            .list-queue-neighbor.is-next {
                align-items: flex-start;
                text-align: left;
            }
            .list-detail-actions {
                width: 100%;
            }
            .list-route-summary {
                text-align: left;
            }
            .list-header,
            .list-row-main {
                grid-template-columns: 32px minmax(160px, 1.65fr) 96px 88px 110px minmax(80px, 0.67fr) 108px;
            }
            .list-actions {
                justify-content: flex-start;
            }
        }

        @media (max-width: 480px) {
            .header-title { gap: 6px; }
            .header-brand {
                width: 100%;
            }
            .header h1 { font-size: 16px; }
            .header-version { font-size: 12px; }
            .diag-section {
                padding-left: 12px;
                padding-right: 12px;
            }
            .diag-section > summary {
                font-size: 17px;
            }
            .diag-advanced-section > summary {
                padding-left: 12px;
                padding-right: 12px;
            }
            .diag-advanced-panel {
                padding-left: 12px;
                padding-right: 12px;
            }
            .filter-bar select,
            .form-inline > input,
            .form-inline-actions > input,
            .form-inline-actions > select,
            .form-inline-actions > button,
            .logs-filter-select {
                width: 100%;
                flex: 1 1 100%;
            }
            .logs-runtime-controls {
                gap: 10px;
            }
            .config-tab {
                font-size: 13px;
                padding: 10px 12px 9px;
            }
            .config-setting-row {
                align-items: center;
            }
            .security-policy-grid {
                grid-template-columns: 1fr;
            }
            .diag-summary-grid {
                grid-template-columns: 1fr;
            }
            .diag-recovery-sub-summary { padding: 10px 12px; }
            .diag-recovery-sub-body { padding: 0 12px 12px; }
            .sink-table { font-size: 11px; }
            .sink-table th,
            .sink-table td { padding: 8px 6px; }
            .sink-table td code {
                max-width: 130px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                vertical-align: middle;
            }
            input[type="range"] { height: 40px; }
            .toolbar-count[data-compact] {
                font-size: 0;
            }
            .toolbar-count[data-compact]::after {
                content: attr(data-compact);
                font-size: 13px;
            }
            .status-grid { grid-template-columns: minmax(0, 1fr); }            .list-header { display: none; }
            .list-row-main {
                grid-template-columns: 28px 1fr;
                gap: 10px;
                align-items: flex-start;
            }
            .list-row-main > :nth-child(n+3) {
                grid-column: 2;
            }
            .list-status,
            .list-adapter-cell,
            .list-group-cell,
            .list-vol-wrap,
            .list-actions {
                margin-top: 4px;
            }
            .list-status-cell,
            .list-adapter-cell,
            .list-group-cell {
                align-self: auto;
                margin-top: 4px;
                margin-bottom: 0;
            }
            .list-col-divider-start,
            .list-col-divider-mid,
            .list-col-divider-end,
            .list-status-cell,
            .list-adapter-cell,
            .list-group-cell,
            .list-vol-wrap,
            .list-actions {
                padding-left: 0;
            }
            .list-col-divider-start::before,
            .list-col-divider-mid::before,
            .list-col-divider-end::before,
            .list-status-cell::before,
            .list-adapter-cell::before,
            .list-group-cell::before,
            .list-vol-wrap::before,
            .list-actions::before {
                display: none;
            }
            .list-name-meta-row {
                flex-wrap: wrap;
                gap: 6px;
            }
            .list-row-detail {
                padding: 0 12px 12px 12px;
            }
            .np-art.list-detail-art {
                width: 56px;
                height: 56px;
            }
            .list-player-transport {
                width: 100%;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 5px;
            }
            .list-player-transport-btn {
                width: 31px;
                height: 31px;
            }
            .list-player-transport-btn.is-mode {
                width: 27px;
                height: 27px;
            }
            .list-player-transport-btn.is-primary {
                width: 38px;
                height: 38px;
            }
            .card-action-buttons {
                flex-wrap: wrap;
                justify-content: flex-start;
            }
            .diag-actions,
            .diag-actions-left,
            .diag-actions-right {
                flex-direction: column;
                align-items: stretch;
            }
        }

        @media (max-width: 375px) {
            body { padding: 8px; }
            .header { padding: 12px; }
            .header-actions {
                width: 100%;
                justify-content: space-between;
            }
            .header-utility-block {
                padding-left: 8px;
            }
            .header-link,
            .header-theme-btn,
            .header-btn-signout {
                min-width: 40px;
                min-height: 40px;
                padding-inline: 8px;
            }
            .header-user-name {
                max-width: 14ch;
                min-height: 40px;
            }
            .header-btn-signout-label {
                display: none;
            }
            .action-bar { padding-bottom: 6px; }
            .action-bar-group--bulk {
                grid-template-columns: 1fr;
            }
            .action-bar-group--bulk .action-btn {
                width: 100%;
            }
            .config-section,
            .diag-section,
            .logs-section {
                padding: 16px;
            }
            .bt-header,
            .bt-device-row {
                min-width: 640px;
            }
        }

        /* ── Config tabs scroll indicator ── */
        .config-tabs-wrap {
            position: relative;
        }
        .config-tabs-wrap::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 40px;
            background: linear-gradient(to right, transparent, var(--card-background-color));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 1;
        }
        .config-tabs-wrap.has-overflow-right::after {
            opacity: 1;
        }

        /* ── Hamburger menu (mobile) ── */
        .header-hamburger {
            display: none;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0;
            border: none;
            background: transparent;
            color: rgba(255,255,255,0.92);
            cursor: pointer;
            border-radius: 8px;
            transition: background 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .header-hamburger:active {
            background: rgba(255,255,255,0.12);
        }
        .header-hamburger svg {
            width: 22px;
            height: 22px;
        }

        @media (max-width: 480px) {
            .header-row1 {
                flex-wrap: nowrap;
                align-items: center;
            }
            .header-title {
                flex: 1 1 0;
                min-width: 0;
            }
            .header-hamburger { display: inline-flex; }
            .header-actions {
                display: none !important;
            }
            .header-actions.mobile-menu-open {
                display: flex !important;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 100;
                background: var(--primary-background-color);
                flex-direction: column;
                padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
                gap: 4px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                animation: mobile-menu-enter 0.2s ease-out;
            }
            .header-actions.mobile-menu-open .header-link,
            .header-actions.mobile-menu-open .header-theme-btn,
            .header-actions.mobile-menu-open .header-btn-signout {
                font-size: 15px;
                min-height: 48px;
                padding: 12px 16px;
                border-radius: 10px;
                justify-content: flex-start;
                gap: 12px;
                width: 100%;
                color: var(--primary-text-color);
            }
            .header-actions.mobile-menu-open .header-link:active,
            .header-actions.mobile-menu-open .header-theme-btn:active,
            .header-actions.mobile-menu-open .header-btn-signout:active {
                background: var(--divider-color);
            }
            .header-actions.mobile-menu-open .header-link svg,
            .header-actions.mobile-menu-open .header-theme-btn svg,
            .header-actions.mobile-menu-open .header-theme-btn .ui-icon-slot,
            .header-actions.mobile-menu-open .header-btn-signout svg,
            .header-actions.mobile-menu-open .header-btn-signout .ui-icon-slot {
                width: 20px;
                height: 20px;
            }
            .header-actions.mobile-menu-open .header-theme-btn::after {
                content: 'Theme';
                font-size: 15px;
            }
            .header-actions.mobile-menu-open .header-utility-block {
                border-left: none;
                padding-left: 0;
                margin-left: 0;
                flex-direction: column;
                width: 100%;
                border-top: 1px solid var(--divider-color);
                padding-top: 8px;
                margin-top: 4px;
            }
            .header-actions.mobile-menu-open .header-user-name {
                max-width: 100%;
                padding-left: 16px;
            }
            .header-actions.mobile-menu-open .header-user-name::before {
                display: none;
            }
            .header-actions.mobile-menu-open .header-btn-signout-label {
                display: inline;
            }
            .mobile-menu-close {
                display: flex;
                align-self: flex-end;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border: none;
                background: transparent;
                color: var(--primary-text-color);
                cursor: pointer;
                border-radius: 8px;
                margin-bottom: 8px;
            }
            .mobile-menu-close:active {
                background: var(--divider-color);
            }
        }
        @media (min-width: 481px) {
            .mobile-menu-close { display: none; }
            .header-hamburger { display: none; }
        }

        @keyframes mobile-menu-enter {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ── Landscape compact header ── */
        @media (max-height: 500px) and (orientation: landscape) {
            .header {
                padding: 6px 12px;
            }
            .header h1 {
                font-size: 14px;
            }
            .header-row2 {
                display: none;
            }
            .header-link,
            .header-theme-btn,
            .header-btn-signout {
                min-height: 32px;
            }
            .header-user-name {
                min-height: 32px;
            }
        }

        /* Unified UI v2 overrides */
        :root {
            --ha-card-border-radius: 10px;
            --ui-space-0: 0;
            --ui-space-025: 2px;
            --ui-space-050: 4px;
            --ui-space-075: 6px;
            --ui-space-100: 8px;
            --ui-space-150: 12px;
            --ui-space-200: 16px;
            --ui-space-300: 24px;
            --ui-space-400: 32px;
            --ui-surface-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
            --ui-surface-shadow-raised: 0 8px 24px rgba(15, 23, 42, 0.11);
            --ui-surface-shadow-muted: 0 1px 4px rgba(15, 23, 42, 0.05);
            --ui-overlay-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
            --ui-floating-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
            --ui-highlight-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2), 0 8px 24px rgba(15, 23, 42, 0.12);
            --ui-focus-ring: 0 0 0 3px rgba(3, 169, 244, 0.14);
            --ha-card-box-shadow: var(--ui-surface-shadow);
            --ui-type-page-title-size: 1.1875rem;
            --ui-type-page-title-line-height: 1.25;
            --ui-type-page-title-weight: 600;
            --ui-type-section-title-size: 1rem;
            --ui-type-section-title-line-height: 1.35;
            --ui-type-section-title-weight: 600;
            --ui-type-card-title-size: 0.9375rem;
            --ui-type-card-title-line-height: 1.35;
            --ui-type-card-title-weight: 700;
            --ui-type-support-size: 0.8125rem;
            --ui-type-support-line-height: 1.55;
            --ui-type-body-size: 0.75rem;
            --ui-type-body-line-height: 1.45;
            --ui-type-body-strong-weight: 600;
            --ui-type-meta-size: 0.6875rem;
            --ui-type-meta-line-height: 1.4;
            --ui-type-meta-weight: 700;
            --ui-type-meta-letter-spacing: 0.04em;
            --badge-min-height: 22px;
            --badge-padding-y: 3px;
            --badge-padding-x: 8px;
            --badge-radius: 8px;
            --ui-count-badge-min-size: 18px;
            --ui-count-badge-padding-x: 5px;
            --ui-count-badge-radius: 999px;
            --ui-count-badge-font-size: 0.625rem;
            --ui-count-badge-font-weight: 800;
            --ui-count-badge-bg: rgba(245, 158, 11, 0.18);
            --ui-count-badge-border: transparent;
            --ui-count-badge-color: #a75700;
            --ui-count-badge-bg-active: rgba(245, 158, 11, 0.24);
            --ui-count-badge-color-active: #8f4900;
            --ui-control-height: 32px;
            --ui-control-radius: 8px;
            --ui-control-font-size: 12px;
            --ui-control-font-weight: 700;
            --ui-control-padding-x: 10px;
            --ui-message-gap: 12px;
            --ui-message-padding-y: 12px;
            --ui-message-padding-x: 14px;
            --ui-message-icon-size: 32px;
            --ui-message-title-size: 13px;
            --ui-message-title-line-height: 1.35;
            --ui-message-text-size: 12px;
            --ui-message-text-line-height: 1.45;
            --ui-message-action-gap: 6px;
            --ui-menu-offset: 8px;
            --ui-menu-gap: 6px;
            --ui-menu-padding: 8px;
            --ui-menu-radius: 12px;
            --ui-menu-border: var(--divider-color);
            --ui-menu-bg: var(--card-background-color);
            --ui-menu-shadow: var(--ui-floating-shadow);
            --ui-field-height: 34px;
            --ui-field-radius: 8px;
            --ui-field-font-size: 13px;
            --ui-field-padding-x: 10px;
            --ui-field-bg: var(--card-background-color);
            --ui-field-border: rgba(128, 145, 171, 0.24);
            --ui-field-color: var(--primary-text-color);
            --ui-field-placeholder: var(--secondary-text-color);
            --ui-field-focus-border: rgba(3, 169, 244, 0.34);
            --ui-field-focus-ring: 0 0 0 3px rgba(3, 169, 244, 0.12);
            --ui-field-readonly-bg: var(--primary-background-color);
            --ui-field-readonly-border: rgba(128, 145, 171, 0.18);
            --ui-field-invalid-border: rgba(219, 68, 55, 0.34);
            --ui-field-invalid-ring: 0 0 0 3px rgba(219, 68, 55, 0.1);
            --ui-segmented-bg: var(--primary-background-color);
            --ui-segmented-border: var(--divider-color);
            --ui-segmented-padding: 3px;
            --ui-segmented-active-bg: var(--card-background-color);
            --ui-segmented-active-border: rgba(128, 145, 171, 0.22);
            --ui-segmented-active-color: var(--primary-text-color);
            --ui-segmented-idle-color: var(--secondary-text-color);
            --ui-segmented-hover-bg: rgba(3, 169, 244, 0.06);
            --ui-disclosure-row-bg: transparent;
            --ui-disclosure-row-hover-bg: rgba(3, 169, 244, 0.05);
            --ui-disclosure-icon-color: var(--secondary-text-color);
            --ui-media-btn-size: 32px;
            --ui-media-btn-radius: 999px;
            --ui-media-btn-color: var(--secondary-text-color);
            --ui-media-btn-hover-color: var(--primary-text-color);
            --ui-media-btn-hover-bg: rgba(3, 169, 244, 0.08);
            --ui-media-btn-active-color: var(--primary-color);
            --ui-media-btn-active-bg: rgba(3, 169, 244, 0.14);
            --ui-media-btn-danger-color: var(--error-color);
            --ui-media-btn-danger-bg: rgba(219, 68, 55, 0.12);
            --ui-media-btn-danger-hover-bg: rgba(219, 68, 55, 0.18);
            --ui-media-btn-disabled-opacity: 0.38;
            --ui-data-surface-bg: var(--primary-background-color);
            --ui-data-surface-border: rgba(128, 145, 171, 0.2);
            --ui-data-row-divider: rgba(128, 145, 171, 0.16);
            --ui-data-row-hover-bg: rgba(3, 169, 244, 0.05);
            --ui-data-row-radius: 8px;
            --ui-data-row-min-height: 40px;
            --ui-data-header-font-size: 10px;
            --ui-data-header-font-weight: 700;
            --ui-data-header-letter-spacing: 0.08em;
            --ui-data-header-color: var(--secondary-text-color);
            --ui-data-label-font-size: 11px;
            --ui-data-value-font-size: 12px;
            --ui-empty-bg: rgba(128, 145, 171, 0.05);
            --ui-empty-border: rgba(128, 145, 171, 0.2);
            --ui-empty-icon-bg: rgba(128, 145, 171, 0.1);
            --ui-empty-icon-color: var(--secondary-text-color);
            --ui-empty-title-color: var(--primary-text-color);
            --ui-empty-copy-color: var(--secondary-text-color);
            --ui-empty-chip-bg: rgba(107, 114, 128, 0.08);
            --ui-empty-chip-border: rgba(107, 114, 128, 0.14);
            --ui-empty-chip-color: var(--secondary-text-color);
            --button-secondary-bg: var(--card-background-color);
            --button-secondary-border: rgba(128, 145, 171, 0.24);
            --button-secondary-color: var(--primary-text-color);
            --button-secondary-hover-bg: rgba(3, 169, 244, 0.08);
            --button-secondary-hover-border: rgba(3, 169, 244, 0.22);
            --button-secondary-hover-color: var(--primary-color);
            --button-primary-bg: var(--primary-color);
            --button-primary-border: var(--primary-color);
            --button-primary-color: #fff;
            --button-primary-hover-bg: var(--dark-primary-color);
            --button-primary-hover-border: var(--dark-primary-color);
            --button-primary-hover-color: #fff;
            --button-success-bg: rgba(67, 160, 71, 0.12);
            --button-success-border: rgba(67, 160, 71, 0.28);
            --button-success-color: #2e7d32;
            --button-success-hover-bg: rgba(67, 160, 71, 0.18);
            --button-success-hover-border: rgba(67, 160, 71, 0.34);
            --button-success-hover-color: #256628;
            --button-warning-bg: rgba(245, 158, 11, 0.14);
            --button-warning-border: rgba(245, 158, 11, 0.28);
            --button-warning-color: #b96b00;
            --button-warning-hover-bg: rgba(245, 158, 11, 0.2);
            --button-warning-hover-border: rgba(245, 158, 11, 0.36);
            --button-warning-hover-color: #945500;
            --button-danger-bg: rgba(219, 68, 55, 0.12);
            --button-danger-border: rgba(219, 68, 55, 0.28);
            --button-danger-color: #c43b30;
            --button-danger-hover-bg: rgba(219, 68, 55, 0.18);
            --button-danger-hover-border: rgba(219, 68, 55, 0.34);
            --button-danger-hover-color: #a92c21;
        }

        html.theme-dark {
            --ui-surface-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
            --ui-surface-shadow-raised: 0 14px 32px rgba(0, 0, 0, 0.34);
            --ui-surface-shadow-muted: 0 2px 8px rgba(0, 0, 0, 0.2);
            --ui-overlay-shadow: 0 22px 48px rgba(0, 0, 0, 0.44);
            --ui-floating-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
            --ui-highlight-shadow: 0 0 0 2px rgba(33, 150, 243, 0.22), 0 14px 32px rgba(0, 0, 0, 0.32);
            --ha-card-box-shadow: var(--ui-surface-shadow);
        }

        body {
            padding: 14px;
        }

        .ui-stack {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .ui-stack--xs {
            gap: var(--ui-space-050);
        }

        .ui-stack--sm {
            gap: var(--ui-space-100);
        }

        .ui-inline {
            display: inline-flex;
            min-width: 0;
        }

        .ui-inline--xs {
            gap: var(--ui-space-075);
        }

        .ui-inline--sm {
            gap: var(--ui-space-100);
        }

        .ui-inline--center {
            align-items: center;
        }

        .ui-split {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--ui-space-150);
        }

        .ui-count-badge,
        .config-summary-dirty-count,
        .config-tab-dirty-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: var(--ui-count-badge-min-size);
            height: var(--ui-count-badge-min-size);
            padding: 0 var(--ui-count-badge-padding-x);
            border-radius: var(--ui-count-badge-radius);
            border: 1px solid var(--ui-count-badge-border);
            background: var(--ui-count-badge-bg);
            color: var(--ui-count-badge-color);
            font-size: var(--ui-count-badge-font-size);
            font-weight: var(--ui-count-badge-font-weight);
            line-height: 1;
            letter-spacing: 0.01em;
            font-variant-numeric: tabular-nums;
            box-sizing: border-box;
        }

        .container {
            max-width: 1400px;
        }

        .header,
        .config-section,
        .diag-section,
        .logs-section {
            box-shadow: var(--ha-card-box-shadow);
        }

        .update-modal,
        .bugreport-modal,
        .ui-modal {
            box-shadow: var(--ui-overlay-shadow);
        }

        .toast,
        .diag-action-menu-list,
        .album-art-popup,
        .artwork-preview-popover,
        .tooltip-text {
            box-shadow: var(--ui-floating-shadow);
        }

        .diag-card--primary {
            box-shadow: none;
        }

        .diag-summary-card--link:hover {
            box-shadow: var(--ui-surface-shadow-raised);
        }

        .diag-target-highlight {
            box-shadow: var(--ui-highlight-shadow);
        }

        .ui-modal-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--ui-space-150);
            background: rgba(15, 23, 42, 0.42);
            z-index: 9999;
            animation: bugreport-fade-in 0.15s ease;
        }

        .ui-modal {
            background: var(--card-background-color);
            color: var(--primary-text-color);
            border: 1px solid var(--ui-data-surface-border, var(--divider-color));
            border-radius: max(var(--ha-card-border-radius), 16px);
            width: min(92vw, 720px);
            max-height: min(88vh, 880px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: bugreport-slide-up 0.2s ease;
        }

        .ui-modal-header {
            display: flex;
            align-items: flex-start;
            gap: var(--ui-space-150);
            padding: var(--ui-space-200);
            border-bottom: 1px solid var(--ui-data-row-divider);
            background: var(--card-background-color);
        }

        .ui-modal-header--accent {
            background: linear-gradient(180deg, rgba(3, 169, 244, 0.16), rgba(3, 169, 244, 0.06));
            border-bottom-color: rgba(3, 169, 244, 0.18);
        }

        .ui-modal-title {
            display: inline-flex;
            align-items: center;
            gap: var(--ui-space-100);
            font-size: var(--ui-type-section-title-size);
            line-height: var(--ui-type-section-title-line-height);
            font-weight: var(--ui-type-section-title-weight);
            color: var(--primary-text-color);
        }

        .ui-modal-title .ui-icon-slot {
            width: 18px;
            height: 18px;
            color: var(--primary-color);
        }

        .ui-modal-subtitle {
            margin: 0;
            max-width: 64ch;
            font-size: var(--ui-type-body-size);
            line-height: var(--ui-type-body-line-height);
            color: var(--secondary-text-color);
        }

        .ui-modal-body {
            padding: var(--ui-space-200);
            overflow-y: auto;
            flex: 1;
            min-height: 0;
            background: var(--card-background-color);
        }

        .ui-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--ui-space-100);
            padding: var(--ui-space-150) var(--ui-space-200);
            border-top: 1px solid var(--ui-data-row-divider);
            background: var(--primary-background-color);
        }

        .ui-modal-close {
            width: 32px;
            height: 32px;
            margin-left: auto;
            border-radius: var(--ui-control-radius);
            border: 1px solid var(--button-secondary-border);
            background: var(--button-secondary-bg);
            color: var(--button-secondary-color);
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
        }

        .ui-modal-close:hover {
            border-color: var(--button-secondary-hover-border);
            background: var(--button-secondary-hover-bg);
            color: var(--button-secondary-hover-color);
        }

        .ui-modal-close:focus-visible {
            outline: none;
            box-shadow: var(--ui-focus-ring);
        }

        .ui-modal-footer-action {
            min-width: 88px;
        }

        .header {
            padding: 12px 14px 10px;
            margin-bottom: 14px;
        }

        .header h1 {
            font-size: var(--ui-type-page-title-size);
            font-weight: var(--ui-type-page-title-weight);
            line-height: var(--ui-type-page-title-line-height);
            letter-spacing: -0.015em;
        }

        .header-logo {
            width: 24px;
            height: 24px;
        }

        .header-meta,
        .header-actions,
        .header-utility-block {
            gap: 6px;
        }

        .header-utility-block {
            min-height: var(--ui-control-height);
            padding-left: 10px;
        }

        .header-user-name,
        .header-btn-signout,
        .header-link,
        .header-theme-btn {
            min-height: var(--ui-control-height);
            border-radius: var(--ui-control-radius);
            font-size: var(--ui-control-font-size);
        }

        .header-version,
        .runtime-badge {
            min-height: var(--badge-min-height);
            border-radius: var(--badge-radius);
            font-size: var(--badge-font-size);
        }

        .header .header-version.meta-badge.meta-badge-link {
            --header-version-color: rgba(255,255,255,0.96);
            align-items: center;
            justify-content: center;
            padding: var(--badge-padding-y) var(--badge-padding-x);
            color: var(--header-version-color);
            border-color: rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.12);
            box-shadow: none;
        }

        .header .header-version.meta-badge.meta-badge-link.channel-rc {
            --header-version-color: #ffe066;
        }

        .header .header-version.meta-badge.meta-badge-link.channel-beta {
            --header-version-color: #ffb4b4;
        }

        .header .header-version.meta-badge.meta-badge-link.channel-demo {
            --header-version-color: #b8f5ff;
        }

        .header .header-version.meta-badge.meta-badge-link:hover:not(:disabled) {
            border-color: rgba(255,255,255,0.30);
            background: rgba(255,255,255,0.18);
            box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
            transform: none;
        }

        .header .header-version.meta-badge.meta-badge-link:focus-visible {
            box-shadow: 0 0 0 2px rgba(255,255,255,0.14);
        }

        .header .runtime-badge.meta-badge {
            justify-content: center;
            color: rgba(255,255,255,0.88);
            border-color: transparent;
            background: rgba(255,255,255,0.10);
            box-shadow: none;
        }

        .header-link,
        .header-theme-btn,
        .header-btn-signout {
            padding: 0 var(--ui-control-padding-x);
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.08);
            font-weight: var(--ui-control-font-weight);
        }

        .header-user-name {
            padding-right: 2px;
            font-weight: 600;
        }

        .header-sysinfo,
        .health-indicator {
            font-size: 12px;
        }

        .health-pill {
            gap: 6px;
            border-radius: var(--badge-radius);
        }

        .restart-banner {
            margin-top: 8px;
        }

        .restart-status {
            gap: 8px;
            font-size: 12px;
        }

        .restart-spinner,
        .restart-check,
        .restart-warn {
            width: 16px;
            height: 16px;
        }

        .restart-progress-bar {
            height: 4px;
            margin-top: 6px;
            border-radius: 999px;
        }

        .notice-stack {
            gap: var(--ui-space-150);
            margin-bottom: 14px;
        }

        .notice-card {
            gap: var(--ui-message-gap);
            padding: var(--ui-message-padding-y) var(--ui-message-padding-x);
            border-radius: var(--ha-card-border-radius);
            box-shadow: none;
        }

        .notice-card-icon {
            width: var(--ui-message-icon-size);
            height: var(--ui-message-icon-size);
            padding: 7px;
            border-radius: var(--ui-control-radius);
        }

        .notice-card-copy {
            display: flex;
            flex-direction: column;
            gap: var(--ui-space-050);
            min-width: 0;
        }

        .notice-card-title {
            font-size: var(--ui-message-title-size);
            font-weight: var(--ui-type-card-title-weight);
            line-height: var(--ui-message-title-line-height);
        }

        .notice-card-text {
            font-size: var(--ui-message-text-size);
            line-height: var(--ui-message-text-line-height);
        }

        .notice-card-actions {
            gap: var(--ui-message-action-gap);
        }

        .onboarding-toggle-action {
            flex-shrink: 0;
        }

        .notice-card-action,
        .notice-card-action--menu-item,
        .btn,
        .action-btn,
        .diag-recovery-action,
        .btn-bt-action,
        .scan-action-btn,
        .bt-expand-btn,
        .btn-group-mute,
        .no-devices-link,
        .view-toggle-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: var(--ui-control-height);
            padding: 0 var(--ui-control-padding-x);
            border-radius: var(--ui-control-radius);
            font-size: var(--ui-control-font-size);
            font-weight: var(--ui-control-font-weight);
            letter-spacing: normal;
            text-transform: none;
            text-decoration: none;
            border: 1px solid var(--button-border, var(--button-secondary-border));
            background: var(--button-bg, var(--button-secondary-bg));
            color: var(--button-color, var(--button-secondary-color));
            box-shadow: none;
            transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
        }

        .notice-card-action:hover,
        .notice-card-action--menu-item:hover,
        .btn:hover,
        .action-btn:hover:not([disabled]),
        .diag-recovery-action:hover:not([disabled]),
        .btn-bt-action:hover:not([disabled]),
        .scan-action-btn:hover:not([disabled]),
        .bt-expand-btn:hover:not([disabled]),
        .btn-group-mute:hover:not([disabled]),
        .no-devices-link:hover,
        .view-toggle-btn:hover {
            background: var(--button-hover-bg, var(--button-secondary-hover-bg));
            border-color: var(--button-hover-border, var(--button-secondary-hover-border));
            color: var(--button-hover-color, var(--button-secondary-hover-color));
            transform: none;
        }

        .notice-card-action:disabled,
        .btn:disabled,
        .action-btn:disabled,
        .diag-recovery-action:disabled,
        .btn-bt-action:disabled,
        .scan-action-btn:disabled,
        .bt-expand-btn:disabled,
        .btn-group-mute:disabled,
        .view-toggle-btn:disabled {
            opacity: 0.56;
            cursor: not-allowed;
            box-shadow: none;
        }

        .notice-card-action:focus-visible,
        .notice-card-action--menu-item:focus-visible,
        .btn:focus-visible,
        .action-btn:focus-visible,
        .diag-recovery-action:focus-visible,
        .btn-bt-action:focus-visible,
        .scan-action-btn:focus-visible,
        .bt-expand-btn:focus-visible,
        .btn-group-mute:focus-visible,
        .no-devices-link:focus-visible,
        .view-toggle-btn:focus-visible,
        .config-tab:focus-visible,
        .notice-action-menu > summary.notice-action-menu-toggle:focus-visible,
        .diag-action-menu > summary.diag-action-menu-toggle:focus-visible,
        .bt-device-action-menu > summary.bt-device-action-toggle:focus-visible {
            outline: none;
            box-shadow: var(--ui-focus-ring);
        }

        .btn-sm {
            padding: 0 10px;
            font-size: 12px;
        }

        .btn,
        .btn-secondary,
        .btn-ghost,
        .notice-card-action,
        .notice-card-action--menu-item,
        .action-btn,
        .diag-recovery-action,
        .btn-bt-action,
        .scan-action-btn,
        .bt-expand-btn,
        .btn-group-mute,
        .view-toggle-btn {
            --button-bg: var(--button-secondary-bg);
            --button-border: var(--button-secondary-border);
            --button-color: var(--button-secondary-color);
            --button-hover-bg: var(--button-secondary-hover-bg);
            --button-hover-border: var(--button-secondary-hover-border);
            --button-hover-color: var(--button-secondary-hover-color);
        }

        .btn-primary,
        .notice-card-action--primary,
        .action-btn.accent,
        .diag-recovery-action--primary,
        .btn-bt-reconnect,
        .scan-action-btn--primary,
        .no-devices-link,
        .view-toggle-btn.active {
            --button-bg: var(--button-primary-bg);
            --button-border: var(--button-primary-border);
            --button-color: var(--button-primary-color);
            --button-hover-bg: var(--button-primary-hover-bg);
            --button-hover-border: var(--button-primary-hover-border);
            --button-hover-color: var(--button-primary-hover-color);
        }

        .btn-warning,
        .btn-restart,
        .action-btn.warn,
        .btn-bt-release,
        .scan-action-btn--warning {
            --button-bg: var(--button-warning-bg);
            --button-border: var(--button-warning-border);
            --button-color: var(--button-warning-color);
            --button-hover-bg: var(--button-warning-hover-bg);
            --button-hover-border: var(--button-warning-hover-border);
            --button-hover-color: var(--button-warning-hover-color);
        }

        .btn-danger,
        .action-btn.danger,
        .btn-bt-disable,
        .icon-btn.muted,
        .btn-group-mute.muted {
            --button-bg: var(--button-danger-bg);
            --button-border: var(--button-danger-border);
            --button-color: var(--button-danger-color);
            --button-hover-bg: var(--button-danger-hover-bg);
            --button-hover-border: var(--button-danger-hover-border);
            --button-hover-color: var(--button-danger-hover-color);
        }

        .action-btn.success,
        .btn-bt-reclaim,
        .scan-action-btn--pair {
            --button-bg: var(--button-success-bg);
            --button-border: var(--button-success-border);
            --button-color: var(--button-success-color);
            --button-hover-bg: var(--button-success-hover-bg);
            --button-hover-border: var(--button-success-hover-border);
            --button-hover-color: var(--button-success-hover-color);
        }

        .btn-group-mute.paused,
        .card-controls .icon-btn.ma-ready.active {
            --button-bg: var(--button-secondary-hover-bg);
            --button-border: var(--button-secondary-hover-border);
            --button-color: var(--button-secondary-hover-color);
            --button-hover-bg: rgba(3, 169, 244, 0.14);
            --button-hover-border: rgba(3, 169, 244, 0.28);
            --button-hover-color: var(--primary-color);
        }

        .notice-card-action,
        .no-devices-link {
            padding: 0 12px;
        }

        .onboarding-progress {
            margin-top: 8px;
            gap: 8px;
        }

        .onboarding-progress-bar {
            width: min(260px, 100%);
            height: 6px;
        }

        .onboarding-checkpoints {
            display: none !important;
        }

        .onboarding-step-list {
            gap: 6px;
            margin-top: 10px;
        }

        .onboarding-step {
            gap: 8px;
            padding: 8px 10px;
            border-radius: var(--ui-control-radius);
        }

        .onboarding-step-toggle {
            gap: 8px;
            padding: 8px 10px;
        }

        .onboarding-step-indicator {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            background: var(--card-background-color);
            border: 1px solid rgba(128, 145, 171, 0.2);
        }

        .onboarding-step-title {
            font-size: 12px;
        }

        .onboarding-step-badge,
        .recovery-issue-pill {
            min-height: var(--badge-min-height);
            padding: var(--badge-padding-y) var(--badge-padding-x);
            border-radius: var(--badge-radius);
            font-size: var(--badge-font-size);
        }

        .onboarding-step-summary,
        .onboarding-step-guidance,
        .onboarding-step-detail-value,
        .onboarding-step-note {
            font-size: 12px;
        }

        .onboarding-step-body {
            gap: 8px;
            padding: 0 10px 10px 42px;
        }

        .onboarding-step-detail {
            border-radius: 8px;
        }

        .toolbar-stack {
            margin-bottom: 14px;
        }

        .filter-bar,
        .action-bar {
            padding: var(--ui-space-150);
            box-shadow: none;
            border: 1px solid var(--divider-color);
        }

        .filter-bar {
            border-radius: var(--ha-card-border-radius) var(--ha-card-border-radius) 0 0;
        }

        .action-bar {
            border-radius: 0 0 var(--ha-card-border-radius) var(--ha-card-border-radius);
            gap: var(--ui-space-150);
        }

        .toolbar-count {
            font-size: var(--ui-type-body-size);
            line-height: var(--ui-type-body-line-height);
            font-weight: 600;
        }

        .toolbar-label {
            font-size: var(--ui-type-meta-size);
            font-weight: var(--ui-type-meta-weight);
            line-height: var(--ui-type-meta-line-height);
            letter-spacing: var(--ui-type-meta-letter-spacing);
        }

        .bugreport-field input:not([type="hidden"]),
        .bugreport-field textarea,
        .config-setting-control--field > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .config-setting-control--field > select,
        .config-inline-field input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .form-group input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .form-group select,
        .form-group textarea,
        .form-inline > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .form-inline > select,
        .form-inline-actions > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .form-inline-actions > select,
        .bt-device-row input:not([type="checkbox"]),
        .bt-device-row select,
        .adapter-row input,
        .bt-detail-row input,
        .bt-detail-row select,
        .filter-bar select,
        .group-filter-sel,
        .logs-filter-select {
            width: 100%;
            min-height: var(--ui-field-height);
            padding: 0 var(--ui-field-padding-x);
            border: 1px solid var(--ui-field-border);
            border-radius: var(--ui-field-radius);
            background: var(--ui-field-bg);
            color: var(--ui-field-color);
            font-size: var(--ui-field-font-size);
            font-weight: 500;
            line-height: 1.35;
            box-shadow: none;
            transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
        }

        .bugreport-field textarea,
        .form-group textarea {
            min-height: 88px;
            padding-top: 9px;
            padding-bottom: 9px;
            resize: vertical;
        }

        .form-inline > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .form-inline > select,
        .form-inline-actions > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .form-inline-actions > select,
        .config-inline-field input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
        .filter-bar select,
        .group-filter-sel,
        .logs-filter-select {
            width: auto;
        }

        .bugreport-field input:not([type="hidden"])::placeholder,
        .bugreport-field textarea::placeholder,
        .config-setting-control--field > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"])::placeholder,
        .config-inline-field input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"])::placeholder,
        .form-group input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"])::placeholder,
        .form-group textarea::placeholder,
        .form-inline > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"])::placeholder,
        .form-inline-actions > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"])::placeholder,
        .bt-device-row input:not([type="checkbox"])::placeholder,
        .adapter-row input::placeholder,
        .bt-detail-row input::placeholder {
            color: var(--ui-field-placeholder);
            opacity: 0.85;
        }

        .bugreport-field input:not([type="hidden"]):focus,
        .bugreport-field textarea:focus,
        .config-setting-control--field > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):focus,
        .config-setting-control--field > select:focus,
        .config-inline-field input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):focus,
        .form-group input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):focus,
        .form-group select:focus,
        .form-group textarea:focus,
        .form-inline > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):focus,
        .form-inline > select:focus,
        .form-inline-actions > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):focus,
        .form-inline-actions > select:focus,
        .bt-device-row input:not([type="checkbox"]):focus,
        .bt-device-row select:focus,
        .adapter-row input:focus,
        .bt-detail-row input:focus,
        .bt-detail-row select:focus,
        .filter-bar select:focus,
        .group-filter-sel:focus,
        .logs-filter-select:focus {
            outline: none;
            border-color: var(--ui-field-focus-border);
            box-shadow: var(--ui-field-focus-ring);
        }

        .form-group input.config-readonly-input[readonly],
        .form-group input.config-readonly-input:disabled,
        .security-policy-fields.is-disabled input,
        .bugreport-field input:disabled,
        .bugreport-field textarea:disabled,
        .config-setting-control--field > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):disabled,
        .config-setting-control--field > select:disabled,
        .config-inline-field input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):disabled,
        .form-group input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):disabled,
        .form-group select:disabled,
        .form-group textarea:disabled,
        .form-inline > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):disabled,
        .form-inline > select:disabled,
        .form-inline-actions > input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]):disabled,
        .form-inline-actions > select:disabled,
        .bt-device-row input:not([type="checkbox"]):disabled,
        .bt-device-row select:disabled,
        .adapter-row input:disabled,
        .bt-detail-row input:disabled,
        .bt-detail-row select:disabled,
        .filter-bar select:disabled,
        .group-filter-sel:disabled,
        .logs-filter-select:disabled {
            background: var(--ui-field-readonly-bg);
            border-color: var(--ui-field-readonly-border);
            color: var(--secondary-text-color);
            cursor: not-allowed;
            opacity: 1;
            box-shadow: none;
        }

        .bugreport-field input.invalid,
        .bugreport-field textarea.invalid,
        .bt-device-row input.invalid,
        .config-form-grid .form-group input.invalid {
            border-color: var(--ui-field-invalid-border);
            box-shadow: var(--ui-field-invalid-ring);
        }

        /* Required-field marker shown next to the label (filled in via JS
           when the form's current mode makes the field required). */
        .config-form-grid .form-group label .required-marker {
            color: var(--error-color, #db4437);
            margin-left: 0.2em;
            font-weight: 600;
        }

        /* Inline error message rendered below an input.  Hidden by default;
           shown by adding ``.has-error`` to the surrounding form-group. */
        .config-form-grid .form-group .field-error {
            display: none;
            color: var(--error-color, #db4437);
            font-size: 11px;
            margin-top: 0.25em;
        }
        .config-form-grid .form-group.has-error .field-error {
            display: block;
        }

        .config-setting-control--field > select {
            min-width: 148px;
        }

        .config-inline-field input:not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]) {
            width: 92px;
            min-width: 92px;
            text-align: right;
        }

        .view-toggle,
        .config-tabs {
            display: inline-flex;
            align-items: center;
            gap: 0;
            padding: var(--ui-segmented-padding);
            border: 1px solid var(--ui-segmented-border);
            border-radius: calc(var(--ui-control-radius) + 1px);
            background: var(--ui-segmented-bg);
            box-shadow: none;
            overflow: hidden;
        }

        .view-toggle {
            margin-left: auto;
        }

        .view-toggle-btn,
        .config-tab {
            min-height: var(--ui-control-height);
            padding: 0 12px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: var(--ui-segmented-idle-color);
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            box-shadow: none;
            transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
        }
        .config-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .view-toggle-btn {
            min-width: var(--ui-control-height);
            padding: 0 10px;
        }

        .view-toggle-btn.active,
        .config-tab.active {
            background: var(--ui-segmented-active-bg);
            color: var(--ui-segmented-active-color);
            box-shadow: inset 0 0 0 1px var(--ui-segmented-active-border);
        }
        .config-tab.active .config-tab-dirty-count {
            background: var(--ui-count-badge-bg-active);
            border-color: transparent;
            color: var(--ui-count-badge-color-active);
        }

        .view-toggle-btn:hover,
        .config-tab:hover {
            background: var(--ui-segmented-hover-bg);
            color: var(--primary-text-color);
        }

        .icon-btn {
            min-width: var(--ui-control-height);
            min-height: var(--ui-control-height);
            padding: 0;
            border-radius: var(--ui-control-radius);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--button-border, var(--button-secondary-border));
            background: var(--button-bg, var(--button-secondary-bg));
            color: var(--button-color, var(--button-secondary-color));
            box-shadow: none;
            transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
        }

        .icon-btn:hover {
            background: var(--button-hover-bg, var(--button-secondary-hover-bg));
            border-color: var(--button-hover-border, var(--button-secondary-hover-border));
            color: var(--button-hover-color, var(--button-secondary-hover-color));
        }

        .media-btn,
        .transport-btn {
            min-width: var(--ui-media-btn-size);
            min-height: var(--ui-media-btn-size);
            width: var(--ui-media-btn-size);
            height: var(--ui-media-btn-size);
            padding: 0;
            border: 0;
            border-radius: var(--ui-media-btn-radius);
            background: transparent;
            color: var(--ui-media-btn-color);
            box-shadow: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
        }

        .media-btn:hover,
        .transport-btn:hover {
            background: var(--ui-media-btn-hover-bg);
            color: var(--ui-media-btn-hover-color);
        }

        .media-btn svg,
        .transport-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .media-btn.ma-ready.active,
        .media-btn.is-primary,
        .media-btn:not(.is-mode).active,
        .transport-btn.active {
            background: var(--ui-media-btn-active-bg);
            color: var(--ui-media-btn-active-color);
        }

        .media-btn.muted,
        .transport-btn.muted {
            background: var(--ui-media-btn-danger-bg);
            color: var(--ui-media-btn-danger-color);
        }

        .media-btn.muted:hover,
        .transport-btn.muted:hover {
            background: var(--ui-media-btn-danger-hover-bg);
            color: var(--ui-media-btn-danger-color);
        }

        .media-btn.paused:not(.is-mode),
        .media-btn.list-inline-btn.paused {
            color: var(--primary-text-color);
        }

        .media-btn:disabled,
        .transport-btn:disabled {
            opacity: var(--ui-media-btn-disabled-opacity);
            cursor: not-allowed;
            pointer-events: none;
        }

        .media-btn--toolbar {
            width: var(--ui-control-height);
            height: var(--ui-control-height);
            min-width: var(--ui-control-height);
            min-height: var(--ui-control-height);
        }

        .list-inline-btn.media-btn,
        .media-btn.list-inline-btn {
            width: 30px;
            height: 30px;
            min-width: 30px;
            min-height: 30px;
            border-radius: 999px;
        }

        .list-player-transport-btn.media-btn,
        .media-btn.list-player-transport-btn {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
            border-radius: 999px;
        }

        .list-player-transport-btn.media-btn.is-mode,
        .media-btn.list-player-transport-btn.is-mode {
            width: 28px;
            height: 28px;
            min-width: 28px;
            min-height: 28px;
            opacity: 0.86;
        }

        .list-player-transport-btn.media-btn.is-mode svg,
        .media-btn.list-player-transport-btn.is-mode svg {
            width: 14px;
            height: 14px;
        }

        .list-player-transport-btn.media-btn.is-primary,
        .media-btn.list-player-transport-btn.is-primary {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            background: var(--ui-media-btn-active-bg);
            color: var(--ui-media-btn-active-color);
        }

        .list-player-transport-btn.media-btn.is-primary svg,
        .media-btn.list-player-transport-btn.is-primary svg {
            width: 18px;
            height: 18px;
        }

        .list-view-shell,
        .scan-results-box,
        .paired-box,
        .adapters-box,
        .sink-table-wrap {
            border-color: var(--ui-data-surface-border);
            box-shadow: none;
        }

        .sink-table-wrap {
            border: 1px solid var(--ui-data-surface-border);
            border-radius: var(--ha-card-border-radius);
            background: var(--card-background-color);
        }

        .list-header,
        .bt-header,
        .sink-table thead tr {
            background: var(--ui-data-surface-bg);
        }

        .list-header {
            padding: 10px 14px;
            border-bottom-color: var(--ui-data-row-divider);
        }

        .list-sort-btn,
        .list-sort-label,
        .bt-header,
        .sink-table th,
        .diag-meta-label {
            font-size: var(--ui-data-header-font-size);
            font-weight: var(--ui-data-header-font-weight);
            letter-spacing: var(--ui-data-header-letter-spacing);
            text-transform: uppercase;
            color: var(--ui-data-header-color);
        }

        .list-col-divider-start::before,
        .list-col-divider-mid::before,
        .list-col-divider-end::before,
        .list-status-cell::before,
        .list-adapter-cell::before,
        .list-group-cell::before,
        .list-vol-wrap::before,
        .list-actions::before {
            background: var(--ui-data-row-divider);
        }

        .list-row,
        .config-setting-row,
        .scan-result-item,
        .adapter-row,
        .diag-item,
        .sink-table th,
        .sink-table td {
            border-bottom-color: var(--ui-data-row-divider);
        }

        .list-row-main,
        .config-setting-row,
        .bt-device-row,
        .adapter-row,
        .scan-result-item {
            min-height: var(--ui-data-row-min-height);
        }

        .list-row-main {
            padding: 9px 14px;
        }

        .list-row:hover .list-row-main,
        .list-row.expanded .list-row-main,
        .config-setting-row:hover,
        .bt-device-wrap:hover .bt-device-row,
        .adapter-row:hover,
        .scan-result-item:hover,
        .sink-table tbody tr:hover {
            background: var(--ui-data-row-hover-bg);
        }

        .config-setting-row {
            gap: 12px;
            padding: 10px 10px;
            border-radius: var(--ui-data-row-radius);
            transition: background-color 150ms ease, border-color 150ms ease;
        }

        .config-setting-row:first-of-type {
            padding-top: 10px;
        }

        .config-setting-row:last-of-type {
            padding-bottom: 10px;
        }

        .config-setting-row--compact {
            padding-bottom: 8px;
        }

        .config-setting-copy strong {
            font-size: 12px;
        }

        .bt-header {
            margin-bottom: 6px;
            padding: 0 6px 10px;
            border-bottom-color: var(--ui-data-row-divider);
        }

        .bt-device-row {
            padding: 8px 6px;
            border-radius: var(--ui-data-row-radius);
            transition: background-color 150ms ease;
        }

        .bt-detail-row {
            gap: 10px;
            padding: 10px 6px 6px;
            margin-left: 62px;
        }

        .scan-result-item,
        .adapter-row {
            border-radius: var(--ui-data-row-radius);
            transition: background-color 150ms ease, border-color 150ms ease;
        }

        .scan-result-item {
            padding: 9px 8px;
        }

        .adapter-row {
            padding: 8px 10px;
            border-radius: var(--ui-data-row-radius);
        }

        .paired-box-header {
            margin-bottom: 6px;
            padding: 6px 6px;
        }
        .paired-box-header--static {
            padding: 0;
            margin-bottom: 10px;
        }
        .notice-action-menu-list,
        .diag-action-menu-list,
        .bt-device-action-menu-list {
            top: calc(100% + var(--ui-menu-offset));
            display: grid;
            gap: var(--ui-menu-gap);
            padding: var(--ui-menu-padding);
            border-radius: var(--ui-menu-radius);
            border: 1px solid var(--ui-menu-border);
            background: var(--ui-menu-bg);
            box-shadow: var(--ui-menu-shadow);
            z-index: 20;
        }
        .notice-card-action--menu-item,
        .diag-recovery-action--menu-item,
        .bt-device-action-item {
            width: 100%;
            justify-content: flex-start;
        }
        .bt-device-action-menu > summary.bt-device-action-toggle,
        .bt-device-action-menu-list .bt-device-action-item {
            appearance: none;
            -webkit-appearance: none;
            font-family: inherit;
            border-radius: var(--ui-control-radius);
            min-height: 30px;
            padding: 0 10px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: normal;
            text-transform: none;
        }
        .notice-action-menu > summary.notice-action-menu-toggle,
        .diag-action-menu > summary.diag-action-menu-toggle,
        .bt-device-action-menu > summary.bt-device-action-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .bt-device-action-item {
            background: var(--button-secondary-bg);
            border-color: var(--button-secondary-border);
            color: var(--button-secondary-color);
        }
        .bt-device-action-item:hover {
            border-color: var(--button-secondary-hover-border);
            background: var(--button-secondary-hover-bg);
            color: var(--button-secondary-hover-color);
        }
        .bt-scan-modal {
            width: min(92vw, 780px);
            max-width: 780px;
        }
        .bt-scan-modal-header,
        .bt-scan-modal-footer {
            background: var(--card-background-color);
        }
        .bt-scan-modal-close {
            flex-shrink: 0;
        }
        .bt-scan-modal-body .scan-status-card,
        .bt-scan-modal-body .ui-empty-state {
            margin: 0;
        }

        .diag-item {
            gap: 10px;
            padding: 2px 0 8px;
        }

        .diag-label {
            font-size: var(--ui-data-label-font-size);
            font-weight: 700;
            color: var(--secondary-text-color);
        }

        .diag-value {
            font-size: var(--ui-data-value-font-size);
        }

        .diag-mini-meta {
            gap: 6px;
        }

        .diag-meta-row {
            gap: 6px 10px;
        }

        .diag-meta-value {
            font-size: var(--ui-data-value-font-size);
        }

        .sink-table {
            font-size: 12px;
        }

        .sink-table th,
        .sink-table td {
            padding: 9px 12px;
        }

        .sink-table th {
            background: transparent;
        }

        .sink-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .ui-empty-state {
            display: grid;
            gap: 8px;
            padding: 14px 16px;
            border: 1px dashed var(--ui-empty-border);
            border-radius: var(--ha-card-border-radius);
            background: var(--ui-empty-bg);
            color: var(--ui-empty-copy-color);
        }

        .ui-empty-state--center {
            justify-items: center;
            text-align: center;
        }

        .ui-empty-state--compact {
            gap: 6px;
            padding: 12px;
        }

        .ui-empty-state--inline {
            width: 100%;
            min-height: 0;
        }

        .ui-empty-state.is-success {
            --ui-empty-icon-bg: rgba(67, 160, 71, 0.12);
            --ui-empty-icon-color: #2e7d32;
        }

        .ui-empty-state-icon {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: var(--ui-empty-icon-bg);
            color: var(--ui-empty-icon-color);
        }

        .ui-empty-state-icon .ui-icon-svg {
            width: 18px;
            height: 18px;
        }

        .ui-empty-state-title {
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--ui-empty-title-color);
        }

        .ui-empty-state-copy {
            font-size: 12px;
            line-height: 1.55;
            color: var(--ui-empty-copy-color);
        }

        .ui-empty-state--center .ui-empty-state-copy {
            max-width: 54ch;
        }

        .ui-empty-state-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 2px;
        }

        .ui-empty-state-list {
            margin: 0;
            padding-left: 18px;
            display: grid;
            gap: 6px;
        }

        .ui-empty-state-list li {
            margin: 0;
        }

        .no-devices-hint:not(.service-state-hint) {
            padding: 0;
            background: transparent;
            box-shadow: none;
            color: inherit;
        }

        .service-state-hint {
            background: var(--ha-card-background, var(--card-background-color));
            box-shadow: var(--ha-card-box-shadow, none);
        }

        .list-empty-state,
        .config-empty-state,
        .scan-status-card.is-empty,
        .sink-table-empty-state {
            border-style: dashed;
        }

        .config-empty-state {
            text-align: left;
        }

        .diag-mini-card--empty {
            background: var(--primary-background-color);
        }

        .diag-mini-card--empty .ui-empty-state {
            min-height: 100%;
        }

        .sink-table-empty-row td {
            padding: 12px;
            border-bottom: 0;
        }

        .logs-empty-state {
            display: block;
            padding: 0;
            color: #94a3b8;
            opacity: 0.86;
        }

        .group-badge-unified.empty,
        .group-badge-unified:disabled,
        .adapter-link-badge.empty,
        .adapter-link-badge:disabled,
        .chip.adapter-link-badge.empty,
        .chip.adapter-link-badge:disabled,
        .meta-badge.meta-badge-link.empty,
        .meta-badge.meta-badge-link:disabled {
            background: var(--ui-empty-chip-bg);
            border-color: transparent;
            color: var(--ui-empty-chip-color);
            box-shadow: none;
        }

        .list-queue-neighbor.is-empty {
            opacity: 0.56;
        }

        .meta-badge,
        .scan-badge,
        .recovery-issue-pill,
        .bt-runtime-badge {
            border-radius: var(--badge-radius);
        }

        .meta-badge {
            font-weight: 700;
        }

        .status-grid {
            gap: 12px;
            margin-bottom: 16px;
        }

        .device-card {
            padding: 12px;
            gap: 8px;
            border-left-width: 4px;
            box-shadow: var(--ha-card-box-shadow);
        }

        .device-card:hover {
            box-shadow: var(--ui-surface-shadow-raised);
        }

        .device-card.inactive {
            box-shadow: var(--ui-surface-shadow-muted);
        }

        .card-actions-row {
            gap: 8px;
        }

        .card-action-buttons {
            gap: 6px;
        }

        .card-np {
            padding: 6px;
            border-radius: 8px;
        }

        .np-art {
            border-radius: 8px;
        }

        .artwork-preview-popover {
            border-radius: 12px;
        }

        .config-tabs {
            margin-top: 6px;
        }

        .config-tab-panel {
            padding-top: 14px;
        }

        .config-section > summary,
        .logs-section > summary,
        .diag-section > summary,
        .diag-advanced-section > summary,
        #ma-token-details summary,
        .onboarding-step-toggle {
            border-radius: var(--ui-control-radius);
            background: var(--ui-disclosure-row-bg);
            transition: background-color 150ms ease, color 150ms ease;
        }

        .config-section > summary:hover,
        .logs-section > summary:hover,
        .diag-section > summary:hover,
        .diag-advanced-section > summary:hover,
        #ma-token-details summary:hover,
        .onboarding-step-toggle:hover {
            background: var(--ui-disclosure-row-hover-bg);
        }

        .config-section > summary::before,
        .logs-section > summary::before,
        .diag-section > summary::before,
        .diag-advanced-section > summary::before,
        #ma-token-details summary::before,
        .paired-arrow,
        .onboarding-step-expander {
            color: var(--ui-disclosure-icon-color);
        }

        .devices-stack,
        .config-settings-grid,
        .config-card-stack {
            gap: 14px;
        }

        .config-settings-card,
        .config-panel-card,
        .config-empty-state {
            border-radius: var(--ha-card-border-radius);
        }

        .config-settings-card {
            padding: 14px;
            box-shadow: none;
        }

        .config-card-header,
        .devices-card-header {
            margin-bottom: 12px;
            padding-bottom: 10px;
        }

        .config-card-title {
            font-size: 14px;
        }

        .devices-card-subtitle,
        .config-card-subtitle,
        .config-group-subtitle,
        .config-footer-hint {
            font-size: 12px;
            line-height: 1.5;
        }

        .bt-header,
        .bt-device-row {
            gap: 10px;
        }

        .bt-device-row input:not([type="checkbox"]),
        .bt-device-row select,
        .adapter-row input,
        .form-group input:not([type="hidden"]),
        .form-group select,
        .form-group textarea,
        .bt-detail-row input,
        .bt-detail-row select,
        .bugreport-field input:not([type="hidden"]),
        .bugreport-field textarea {
            border-radius: 8px;
        }

        .btn-remove-dev {
            border-radius: var(--ui-control-radius);
        }

        .scan-badge {
            flex: 1 1 100%;
            display: flex;
            align-items: flex-start;
            gap: 6px;
            font-size: var(--badge-font-size);
        }

        #paired-box-count.scan-badge {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            white-space: nowrap;
            min-width: fit-content;
        }

        .scan-badge:empty {
            display: none;
        }

        .scan-status-pill {
            align-self: flex-start;
            max-width: 100%;
        }

        .scan-status-label {
            line-height: 1.2;
        }

        .scan-status-hint {
            font-size: 11px;
            font-weight: 600;
            opacity: 0.8;
        }

        .scan-status-card {
            display: grid;
            gap: 6px;
            min-height: 0;
            padding: 10px;
            color: var(--primary-text-color);
            font-weight: 600;
        }

        .scan-status-title {
            font-size: 12px;
            font-weight: 800;
        }

        .scan-status-note {
            font-size: 12px;
            line-height: 1.5;
            color: var(--secondary-text-color);
            font-weight: 500;
        }

        .scan-spinner {
            width: 14px;
            height: 14px;
        }

        .scan-results-box,
        .paired-box,
        .adapters-box {
            border-radius: var(--ha-card-border-radius);
        }

        .scan-result-item,
        .adapter-row,
        .subrow {
            border-radius: 8px;
        }

        .scan-action-btn,
        .bt-expand-btn {
            border-radius: var(--ui-control-radius);
        }

        .config-dirty-banner {
            order: -1;
        }

        .config-footer {
            gap: 14px;
            padding-top: 14px;
            margin-top: 14px;
            align-items: flex-start;
        }

        .config-dirty-label {
            display: none;
        }

        .config-footer-actions,
        .config-btn-group {
            gap: 8px;
        }

        .logs-section {
            padding: 16px;
        }

        .logs-toolbar {
            padding: 10px 12px;
            gap: 10px;
            border-radius: var(--ha-card-border-radius) var(--ha-card-border-radius) 0 0;
            background: var(--card-background-color);
        }

        .logs-runtime-label {
            font-size: 10px;
            font-weight: 700;
        }

        .logs-auto-refresh {
            font-size: 12px;
        }

        .logs-container {
            padding: 8px 0;
            border-radius: 0 0 var(--ha-card-border-radius) var(--ha-card-border-radius);
            font-size: 12px;
            line-height: 1.5;
            border-color: rgba(15, 23, 42, 0.18);
        }

        .log-line {
            margin-bottom: 0;
            padding: 6px 12px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.08);
        }

        .log-line:last-child {
            border-bottom: 0;
        }

        .log-line:hover {
            background: rgba(255,255,255,0.03);
        }

        .log-ts {
            display: inline-block;
            min-width: 19ch;
            color: #8fa2bf;
        }

        .log-context {
            color: #8fa2bf;
        }

        .log-level {
            display: inline-block;
            min-width: 54px;
            font-weight: 800;
        }

        @media (max-width: 900px) {
            body {
                padding: 10px;
            }

            .header,
            .config-section,
            .diag-section,
            .logs-section {
                padding-inline: 12px;
            }

            .notice-card {
                grid-template-columns: auto minmax(0, 1fr);
            }

            .notice-card-actions {
                grid-column: 1 / -1;
                justify-content: flex-start;
            }

            .onboarding-step {
                grid-template-columns: 24px minmax(0, 1fr);
            }
            .onboarding-card.is-collapsed .notice-card-text {
                white-space: normal;
            }

            .onboarding-step-badge {
                grid-column: 2;
                justify-self: start;
            }

            .filter-bar,
            .action-bar,
            .logs-toolbar {
                padding: 10px;
            }

            .log-ts {
                min-width: 0;
                display: block;
                margin-bottom: 2px;
            }
        }


/* Mobile refinement pass */
.action-bar-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.action-bar-group--selection {
    flex: 0 1 auto;
}

.action-bar-volume {
    flex: 1 1 240px;
    min-width: 220px;
    margin-right: auto;
}

.action-bar-group--transport,
.action-bar-group--bulk {
    flex-wrap: wrap;
}

.action-bar-group--bulk {
    margin-left: auto;
}

.bt-device-row .bt-cell {
    min-width: 0;
}

@media (max-width: 640px) {
    .devices-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .card-actions-row {
        opacity: 1;
        max-height: none;
        pointer-events: auto;
    }

    .header-row1 {
        gap: 12px;
    }

    .config-settings-card,
    .config-settings-card--span,
    .config-form-grid,
    .config-settings-grid,
    .devices-stack,
    .adapters-box,
    .paired-box,
    .bt-table-wrap {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }

    .header-link,
    .header-theme-btn,
    .header-btn-signout {
        font-size: 12px;
        min-width: 0;
        min-height: 40px;
        padding-inline: 12px;
    }

    .header-theme-btn {
        justify-content: center;
    }

    .header-utility-block {
        width: 100%;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .header-user-name {
        max-width: min(100%, 24ch);
        padding-left: 0;
    }

    .header-utility-block .header-user-name::before {
        display: none;
    }

    .health-indicator {
        font-size: 12px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
    }

    .filter-icon {
        display: none;
    }

    .filter-bar select {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .action-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        overflow: clip;
        padding: 10px 12px;
        align-items: center;
        position: sticky;
        bottom: 0;
        z-index: 20;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .action-bar-group,
    .action-bar-volume {
        min-width: 0;
    }

    /* Selection checkbox merges into volume row */
    .action-bar-group--selection {
        order: 2;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0;
    }

    .action-bar-group--selection .toolbar-count {
        display: none;
    }

    /* Volume slider + transport mute/pause share one row */
    .action-bar-volume {
        order: 3;
        flex: 1 1 0%;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .action-bar-volume .toolbar-label {
        display: none;
    }

    .action-bar-volume input[type="range"] {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    .action-bar-group--transport {
        order: 4;
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .action-bar-group--transport .media-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        justify-content: center;
    }

    .action-bar-group--bulk {
        order: 5;
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .action-bar-group--bulk .action-btn {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
        width: 100%;
        justify-content: center;
    }

    .card-chips .meta-badge,
    .card-chips .chip-detail {
        min-height: 28px;
        padding: 4px 8px;
    }

    .config-tabs {
        display: flex;
        width: 100%;
        gap: 4px;
        padding: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .config-tabs::-webkit-scrollbar {
        display: none;
    }

    .config-tab {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 10px 14px;
        scroll-snap-align: start;
    }

    /* ── Progressive disclosure ── */
    .card-chips,
    .list-inline-badges {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
        margin: 0;
    }
    .device-card.expanded .card-chips,
    .list-row.expanded .list-inline-badges {
        max-height: 200px;
        opacity: 1;
        margin-top: 6px;
    }
    .card-expand-indicator {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-left: auto;
        color: var(--secondary-text-color);
        transition: transform 0.2s;
        flex-shrink: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .device-card.expanded .card-expand-indicator,
    .list-row.expanded .card-expand-indicator {
        transform: rotate(180deg);
    }

    .np-art {
        width: 64px;
        height: 64px;
    }

    .vol-pct,
    .toolbar-label,
    .np-meta,
    .status-chip,
    .progress-time {
        font-size: 12px;
    }

    .list-view-shell {
        overflow: visible;
    }

    .list-header {
        display: none;
    }

    .list-row-main {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-areas:
            'select name'
            'select status'
            'select adapter'
            'select group'
            'select actions'
            'select volume';
        gap: 6px 10px;
        align-items: start;
    }

    .list-select-cell {
        grid-area: select;
        justify-content: flex-start;
        padding-top: 4px;
    }

    .list-cell-name {
        grid-area: name;
        align-items: flex-start;
    }

    .list-status-cell {
        grid-area: status;
    }

    .list-adapter-cell {
        grid-area: adapter;
    }

    .list-group-cell {
        grid-area: group;
    }

    .list-vol-wrap {
        grid-area: volume;
    }

    .list-actions {
        grid-area: actions;
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-self: start;
        justify-content: flex-start;
    }

    .list-status-cell,
    .list-adapter-cell,
    .list-group-cell,
    .list-vol-wrap,
    .list-actions {
        padding-left: 0;
    }

    .list-status-cell::before,
    .list-adapter-cell::before,
    .list-group-cell::before,
    .list-vol-wrap::before,
    .list-actions::before {
        display: none;
    }

    .list-inline-badges,
    .list-name-meta-row {
        flex-wrap: wrap;
    }

    .list-name-title-row {
        display: grid;
        gap: 4px;
        align-items: start;
    }

    .list-inline-badges {
        min-width: 0;
        margin-left: 0;
        width: 100%;
    }

    .list-actions .list-inline-btn,
    .list-actions .list-settings-btn {
        min-width: 40px;
        min-height: 40px;
    }

    .list-row-detail {
        padding: 0 12px 12px;
    }

    .list-detail-body {
        grid-template-columns: 1fr;
    }

    .list-detail-player-main {
        flex-direction: column;
        align-items: stretch;
    }

    .list-detail-art-rail {
        width: 100%;
        gap: 8px;
    }

    .list-detail-player-center,
    .list-detail-current-copy {
        align-items: flex-start;
        text-align: left;
    }

    .list-detail-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .list-detail-actions .list-action-btn {
        padding: 8px 10px;
        font-size: 11px;
        overflow: hidden;
    }

    .list-detail-actions .action-btn-label {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-detail-playback-rail {
        --playback-center-width: 100%;
        gap: 8px;
    }

    .list-player-media-lane,
    .list-player-media-lane.is-solo {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .list-player-media-lane:not(.is-solo) .list-player-transport {
        margin-top: 0;
    }

    .list-player-transport,
    .list-detail-progress-wrap {
        width: 100%;
        max-width: 100%;
        grid-column: auto;
        grid-row: auto;
    }

    .list-player-transport {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .list-queue-neighbor,
    .list-queue-neighbor.is-prev,
    .list-queue-neighbor.is-next {
        width: 100%;
        max-width: none;
        justify-self: stretch;
        grid-row: auto;
        align-items: flex-start;
        text-align: left;
    }

    .list-queue-neighbor-label {
        margin-top: 0;
    }

    .bt-table-wrap {
        overflow: visible;
        background: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .bt-header {
        display: none;
    }

    .bt-device-wrap {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--divider-color);
        border-radius: 12px;
        background: var(--primary-background-color);
    }

    .bt-device-row {
        min-width: 0 !important;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            'enabled name'
            'mac mac'
            'adapter port'
            'delay live'
            'actions actions';
        gap: 10px;
    }

    .bt-device-row > * {
        min-width: 0;
        width: auto;
    }

    .bt-enabled-cell {
        grid-area: enabled;
        display: grid;
        justify-content: flex-start;
        align-content: start;
        gap: 4px;
    }

    .bt-name-field {
        grid-area: name;
        display: grid;
        align-content: start;
        gap: 6px;
    }

    .bt-name-field .bt-name {
        order: 1;
    }

    .bt-name-field .bt-expand-btn {
        order: 2;
        justify-self: start;
    }

    .bt-cell--mac {
        grid-area: mac;
    }

    .bt-cell--adapter {
        grid-area: adapter;
    }

    .bt-cell--port {
        grid-area: port;
    }

    .bt-cell--delay {
        grid-area: delay;
    }

    .bt-cell--runtime {
        grid-area: live;
    }

    .bt-row-actions {
        grid-area: actions;
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .bt-device-row .bt-cell::before,
    .bt-enabled-cell::before,
    .bt-name-field::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--secondary-text-color);
    }

    .bt-runtime {
        min-height: 40px;
        align-items: flex-start;
    }

    .bt-device-action-menu {
        flex: 1 1 180px;
        min-width: 0;
    }

    .bt-device-action-toggle {
        width: 100%;
        justify-content: center;
    }

    .bt-device-action-menu-list,
    .ui-action-menu-list {
        max-width: min(280px, calc(100vw - 32px));
    }

    .btn-remove-dev {
        min-width: 40px;
        min-height: 40px;
    }

    .bt-detail-row {
        grid-template-columns: 1fr;
        margin: 10px 0 0;
        padding: 12px;
        border: 1px dashed rgba(128, 145, 171, 0.28);
        border-radius: 10px;
        background: var(--card-background-color);
    }

    .adapter-row {
        grid-template-columns: 1fr;
        gap: 10px;
        min-width: 0;
        width: 100%;
        padding: 10px 0;
    }

    .adapter-ha-assist {
        padding-top: 0;
    }

    .ha-assist-controls,
    .adapter-ha-controls {
        align-items: stretch;
    }

    .ha-assist-controls select,
    .adapter-ha-controls select {
        min-width: 0;
        width: 100%;
    }

    .adapter-power-btns,
    .paired-actions,
    .bt-toolbar {
        flex-wrap: wrap;
    }

    .paired-box-header--static,
    .config-card-header--split {
        flex-direction: column;
        align-items: stretch;
    }

    .scan-result-item,
    .paired-result-item {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .scan-result-mac,
    .paired-result-item .scan-result-mac {
        width: auto;
    }

    .paired-result-item .paired-actions,
    .paired-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .bt-scan-modal,
    .bugreport-modal,
    .ui-modal {
        width: min(calc(100vw - 20px), 780px);
        max-height: calc(100dvh - 20px);
    }
}

@media (max-width: 480px) {
    .device-card {
        padding: 10px 12px;
    }

    .action-bar {
        /* flex layout from 640px rule — no grid override needed */
    }

    .action-bar-group--bulk {
        grid-template-columns: repeat(2, 1fr);
    }

    .list-detail-actions {
        grid-template-columns: 1fr;
    }

    .bt-device-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            'enabled'
            'name'
            'mac'
            'adapter'
            'port'
            'delay'
            'live'
            'actions';
    }
}

/* ── Login: password toggle ── */
.login-password-wrap {
    position: relative;
}
.login-password-wrap input[type="password"],
.login-password-wrap input[type="text"] {
    padding-right: 44px;
}
.login-eye-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
}
.login-eye-toggle:active {
    background: var(--divider-color);
}
.login-eye-toggle svg {
    width: 18px;
    height: 18px;
}

/* ── Login: submit loading ── */
.login-submit.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}
.login-submit.loading .login-submit-text {
    visibility: hidden;
}
.login-submit.loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: login-spin 0.6s linear infinite;
}
@keyframes login-spin {
    to { transform: rotate(360deg); }
}

/* ── Bottom navigation (mobile) ── */
.bottom-nav {
    display: none;
}
@media (max-width: 640px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: var(--card-background-color);
        border-top: 1px solid var(--divider-color);
        padding: 4px 0 max(4px, env(safe-area-inset-bottom));
        gap: 0;
        justify-content: space-around;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    }
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        min-height: 48px;
        padding: 6px 4px 4px;
        border: none;
        background: transparent;
        color: var(--secondary-text-color);
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s;
        text-decoration: none;
    }
    .bottom-nav-item:active {
        color: var(--primary-color);
    }
    .bottom-nav-item.active {
        color: var(--primary-color);
    }
    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
    }
    /* Account for bottom nav height in page padding */
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }
}

/* ── Skeleton loading ── */
.skeleton-card {
    background: var(--card-background-color);
    border-radius: var(--ha-card-border-radius);
    padding: 16px;
    border-left: 3px solid var(--divider-color);
}
.skeleton-line {
    height: 14px;
    background: var(--divider-color);
    border-radius: 4px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line--title {
    width: 60%;
    height: 18px;
    margin-bottom: 12px;
}
.skeleton-line--subtitle {
    width: 40%;
    margin-bottom: 8px;
}
.skeleton-line--bar {
    width: 100%;
    height: 8px;
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ── Portrait mobile: grid-only, compact card controls ── */
@media (max-width: 640px) and (orientation: portrait) {
    /* Hide list toggle — grid only in portrait */
    #view-list-btn { display: none; }

    /* Prevent grid track from expanding beyond container */
    .status-grid,
    .devices-grid {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    .device-card {
        min-width: 0;
        overflow: hidden;
    }

    /* Card controls: volume+mute row first, transport row second */
    .card-controls {
        flex-wrap: wrap;
        gap: 2px;
    }
    .card-controls .vol-wrap {
        order: -2;
        flex: 1 1 calc(100% - 36px);
        min-width: 0;
        margin: 0;
    }
    .card-controls > [id^="dmute-"] {
        order: -1;
    }
    .card-controls .media-btn {
        min-width: 28px;
        width: 28px;
        height: 28px;
        padding: 0;
    }

    /* Prevent now-playing content from forcing width */
    .card-np { min-width: 0; overflow: hidden; }
    .np-info { min-width: 0; }
    .np-track, .np-meta { overflow: hidden; text-overflow: ellipsis; }

    /* Action buttons: single row, compact */
    .card-action-buttons {
        flex-wrap: nowrap;
        gap: 4px;
    }
    .card-action-buttons .action-btn {
        padding: 0 6px;
        font-size: 11px;
        min-width: 0;
    }
}

/* ===================================================================
   HA tab UX refactor (v2.67.0-rc.2)
   =================================================================== */

/* Segmented control replacing the Mode <select>. Three equal-width
   radio labels in a single pill; the :checked option highlights with
   the same accent-on-surface treatment used by .config-tab. */
.segmented-control {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: var(--color-surface-3, rgba(127, 127, 127, 0.12));
    margin: 0.4em 0 0.6em;
    width: 100%;
    max-width: 540px;
}
.segmented-option {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    position: relative;
}
.segmented-option input[type="radio"] {
    /* Visually hidden but kept in DOM for radiogroup semantics. */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.segmented-option-label {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.45em 0.8em;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-2, inherit);
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}
.segmented-option:hover .segmented-option-label {
    background: var(--color-surface-2, rgba(127, 127, 127, 0.08));
}
.segmented-option input:checked + .segmented-option-label {
    background: var(--color-accent, #2563eb);
    color: var(--color-on-accent, #fff);
    font-weight: 600;
}
.segmented-option input:focus-visible + .segmented-option-label {
    outline: 2px solid var(--color-accent, #2563eb);
    outline-offset: 2px;
}

/* HA Connection-status detail rows under the status pill — broker URL,
   last connect time, last error.  Hidden until the status panel has
   data to show. */
.ha-status-detail {
    margin: 0.6em 0 0;
    padding: 0.6em 0 0;
    border-top: 1px solid var(--color-divider, rgba(127, 127, 127, 0.18));
    font-size: 12.5px;
    display: grid;
    gap: 0.3em;
}
.ha-status-detail-row {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 0.6em;
    align-items: baseline;
}
.ha-status-detail dt {
    color: var(--color-text-2, rgba(127, 127, 127, 0.85));
    margin: 0;
    font-weight: 500;
}
.ha-status-detail dd {
    margin: 0;
    color: var(--color-text-1, inherit);
    word-break: break-word;
}
#ha-status-last-error {
    color: var(--color-danger, #c43a3a);
}

/* Inline Mosquitto add-on hint that lives next to the MQTT radio
   instead of the full install banner when the add-on is OK. */
.ha-mosquitto-inline-hint {
    margin-top: 0.5em;
    padding: 0.35em 0.6em;
    border-radius: 4px;
    background: var(--color-surface-2, rgba(127, 127, 127, 0.08));
    font-size: 12.5px;
}
.ha-mosquitto-inline-hint--ok {
    color: var(--color-success, #2a8a4f);
}
.ha-mosquitto-inline-hint--warn {
    color: var(--color-warning, #b07a18);
}

/* MQTT broker form regrouping into Broker / Authentication fieldsets. */
.ha-mqtt-fieldset {
    border: 1px solid var(--color-divider, rgba(127, 127, 127, 0.18));
    border-radius: 6px;
    padding: 0.7em 0.9em 0.9em;
    margin: 0 0 0.9em;
}
.ha-mqtt-legend {
    padding: 0 0.4em;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2, rgba(127, 127, 127, 0.9));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ha-mqtt-advanced {
    margin-top: 0.4em;
}
.ha-mqtt-advanced > summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--color-text-2, rgba(127, 127, 127, 0.85));
    padding: 0.3em 0;
    user-select: none;
}
.ha-mqtt-advanced[open] > summary {
    color: var(--color-text-1, inherit);
    font-weight: 500;
}

/* Test-connection feedback colours next to the button. */
#ha-mqtt-test-feedback.test-feedback--ok {
    color: var(--color-success, #2a8a4f);
    font-weight: 500;
}
#ha-mqtt-test-feedback.test-feedback--err {
    color: var(--color-danger, #c43a3a);
    font-weight: 500;
}
#ha-mqtt-test-feedback.test-feedback--pending {
    color: var(--color-text-2, rgba(127, 127, 127, 0.85));
}

/* Form-group spans for the two-column broker-address grid. */
.form-group--span-2 {
    grid-column: span 2;
}
@media (max-width: 540px) {
    .form-group--span-2 {
        grid-column: auto;
    }
    .segmented-control {
        max-width: 100%;
    }
}