.dealer-connection {
            position: fixed; left: 50%; top: 4.75rem; z-index: 60; transform: translateX(-50%);
            display: flex; align-items: center; gap: .75rem; width: max-content; max-width: min(34rem, calc(100vw - 1.5rem));
            padding: .7rem .8rem .7rem .7rem; border-radius: var(--dui-radius, .9rem); background: #fff; color: var(--gray-950);
            box-shadow: 0 12px 32px -8px rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .06); animation: dc-in .26s cubic-bezier(.2, .8, .2, 1);
        }
        .dark .dealer-connection { background: var(--gray-800); color: #fff; box-shadow: 0 12px 32px -8px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .08); }
        .dealer-connection[hidden] { display: none; }
        .dc-icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; --dc: var(--danger-600); color: var(--dc); background: color-mix(in oklab, var(--dc) 13%, transparent); }
        .dc-icon svg { width: 1.15rem; height: 1.15rem; }
        .dc-i { display: none; }
        .dealer-connection[data-state="offline"] .dc-i-offline, .dealer-connection[data-state="server"] .dc-i-server, .dealer-connection[data-state="back"] .dc-i-back { display: grid; }
        .dealer-connection[data-state="server"] .dc-icon { --dc: var(--warning-600); }
        .dealer-connection[data-state="server"] .dc-i-server svg { animation: dc-spin 1.2s linear infinite; }
        .dealer-connection[data-state="back"] .dc-icon { --dc: var(--success-600); }
        .dc-body { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
        .dc-title { font-size: .875rem; font-weight: 650; line-height: 1.3; }
        .dc-text { font-size: .8125rem; line-height: 1.35; color: var(--gray-600); }
        .dark .dc-text { color: var(--gray-300); }
        .dealer-connection[data-state="back"] .dc-text { display: none; }
        .dc-retry-ic { display: none; width: 1.1rem; height: 1.1rem; }
        .dc-retry { flex: none; display: inline-flex; align-items: center; justify-content: center; margin-inline-start: .25rem; padding: .4rem .7rem; border-radius: var(--dui-radius-control, .55rem); font-size: .8125rem; font-weight: 600; color: var(--gray-800); background: rgb(0 0 0 / .05); }
        .dark .dc-retry { color: var(--gray-100); background: rgb(255 255 255 / .08); }
        .dc-retry:hover { background: rgb(0 0 0 / .09); }
        .dealer-connection[data-state="back"] .dc-retry { display: none; }
        .dealer-connection.dc-leaving { animation: dc-out .2s ease-in forwards; }
        @keyframes dc-in { from { opacity: 0; transform: translate(-50%, -.6rem) scale(.98); } }
        @keyframes dc-out { to { opacity: 0; transform: translate(-50%, -.6rem) scale(.98); } }
        @keyframes dc-spin { to { transform: rotate(360deg); } }
        @media (max-width: 639px) {
            .dealer-connection { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem); left: .75rem; right: .75rem; width: auto; max-width: none; transform: none; animation-name: dc-up; }
            .dealer-connection.dc-leaving { animation-name: dc-down; }
            .dc-retry { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 999px; }
            .dc-retry-ic { display: block; }
            .dc-retry-label { display: none; }
            @keyframes dc-up { from { opacity: 0; transform: translateY(1rem); } }
            @keyframes dc-down { to { opacity: 0; transform: translateY(1rem); } }
        }
        @media (prefers-reduced-motion: reduce) { .dealer-connection, .dealer-connection.dc-leaving, .dc-i-server svg { animation: none !important; } }