/**
 * DynoStage — high-fidelity tokens from Stitch exports (/ui).
 * Panels: landing (Kinetic Pulse), customer/tuner (dyno stage), admin (DynoStage admin).
 */

:root {
    --ds-font-display: 'Space Grotesk', system-ui, sans-serif;
    --ds-font-body: 'Inter', system-ui, sans-serif;
    --ds-font-alt: 'Manrope', system-ui, sans-serif;

    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-8: 2rem;
    --ds-space-10: 2.5rem;
    --ds-space-12: 3rem;
    --ds-space-16: 4rem;
    --ds-space-24: 6rem;

    --ds-radius-sm: 0.375rem;
    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 1rem;
    --ds-radius-xl: 1.5rem;
    --ds-radius-bento: 1.5rem;
}

/* -------------------------------------------------------------------------- */
/* Light theme (shared baseline; panel-tuned primaries)                         */
/* -------------------------------------------------------------------------- */

html[data-theme='light'] {
    --ds-surface: #f4f2ef;
    --ds-surface-low: #ebe8e4;
    --ds-surface-mid: #e4e0db;
    --ds-surface-high: #ffffff;
    --ds-surface-highest: #f9f8f6;
    --ds-sidebar: #1a1918;
    --ds-on-surface: #1c1b1a;
    --ds-on-surface-muted: #5c5854;
    --ds-on-primary: #2f1500;

    --ds-primary: #c45d1a;
    --ds-primary-soft: #ffb77d;
    --ds-primary-strong: #ff8c00;

    --ds-success: #0d7a3e;
    --ds-success-bright: #16a34a;
    --ds-warning: #b45309;
    --ds-danger: #b42318;
    --ds-secondary-wash: #474747;

    --ds-admin-red: #dc2626;
    --ds-admin-red-glow: rgba(220, 38, 38, 0.15);
    --ds-admin-orange-glow: rgba(255, 140, 0, 0.1);

    --ds-outline-ghost: rgba(86, 67, 52, 0.12);
    --ds-outline-faint: rgba(28, 27, 26, 0.08);
    --ds-glow: rgba(255, 140, 0, 0.12);
    --ds-glass: rgba(255, 255, 255, 0.72);

    --ds-shadow-glow: 0 0 40px var(--ds-glow);
    --ds-shadow-soft: 0 12px 40px rgba(28, 27, 26, 0.08);
    --ds-shadow-topbar: 0 1px 0 var(--ds-outline-ghost);

    --ds-display-hero: clamp(3rem, 6vw, 6rem);
    --ds-display-xl: clamp(2.5rem, 4vw, 3.75rem);
    --ds-display-lg: clamp(2rem, 3vw, 3rem);
    --ds-display-metric: 4.5rem;
    --ds-headline-page: 2.25rem;
    --ds-headline: 1.75rem;
    --ds-title: 1.125rem;
    --ds-body: 0.9375rem;
    --ds-label: 0.6875rem;
}

/* -------------------------------------------------------------------------- */
/* Dark — Landing (Kinetic Pulse stitch_dynostage_landing)                    */
/* -------------------------------------------------------------------------- */

html[data-ds-panel='landing'][data-theme='dark'] {
    --ds-font-body: 'Inter', system-ui, sans-serif;
    --ds-surface: #131313;
    --ds-surface-low: #1b1b1b;
    --ds-surface-mid: #1f1f1f;
    --ds-surface-high: #2a2a2a;
    --ds-surface-highest: #353535;
    --ds-sidebar: #0e0e0e;
    --ds-on-surface: #e2e2e2;
    --ds-on-surface-muted: #ddc1ae;
    --ds-on-primary: #4d2600;

    --ds-primary: #ffb77d;
    --ds-primary-soft: #ffb77d;
    --ds-primary-strong: #ff8c00;

    --ds-success-bright: #4ade80;
    --ds-danger: #ffb4ab;
    --ds-outline-ghost: rgba(86, 67, 52, 0.15);
    --ds-outline-faint: rgba(86, 67, 52, 0.1);
    --ds-glow: rgba(255, 183, 125, 0.08);
    --ds-glass: rgba(53, 53, 53, 0.6);

    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 0.75rem;
    --ds-radius-xl: 0.75rem;
    --ds-radius-bento: 1.5rem;

    --ds-display-hero: clamp(3.25rem, 7vw, 6rem);
    --ds-shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.55);
}

/* -------------------------------------------------------------------------- */
/* Dark — Customer + Tuner cockpit (stitch_dynostage_customers / tuner)       */
/* -------------------------------------------------------------------------- */

html[data-ds-panel='customer'][data-theme='dark'],
html[data-ds-panel='tuner'][data-theme='dark'] {
    --ds-font-body: 'Inter', system-ui, sans-serif;
    --ds-font-alt: 'Manrope', system-ui, sans-serif;

    --ds-surface: #0e0e0e;
    --ds-surface-low: #131313;
    --ds-surface-mid: #191919;
    --ds-surface-high: #1f1f1f;
    --ds-surface-highest: #262626;
    --ds-sidebar: #000000;
    --ds-on-surface: #ffffff;
    --ds-on-surface-muted: #ababab;
    --ds-on-primary: #000000;

    --ds-primary: #ff9062;
    --ds-primary-soft: #ffb77d;
    --ds-primary-strong: #ff793e;

    --ds-success-bright: #4ade80;
    --ds-danger: #ff716c;
    --ds-outline-ghost: rgba(255, 255, 255, 0.06);
    --ds-outline-faint: rgba(255, 255, 255, 0.04);
    --ds-glow: rgba(255, 144, 98, 0.14);
    --ds-glass: rgba(38, 38, 38, 0.35);

    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 0.75rem;
    --ds-radius-xl: 1rem;
    --ds-radius-bento: 1.5rem;

    --ds-headline-page: 2.25rem;
    --ds-display-metric: 2.25rem;
    --ds-shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.45);
    --ds-shadow-topbar: 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-ds-panel='tuner'][data-theme='dark'] {
    --ds-font-body: 'Manrope', 'Inter', system-ui, sans-serif;
    --ds-surface: #131313;
    --ds-surface-low: #1c1b1b;
    --ds-surface-mid: #20201f;
    --ds-surface-high: #2a2a2a;
    --ds-surface-highest: #353535;
    --ds-sidebar: #0c0a09;
    --ds-on-surface: #e5e2e1;
    --ds-on-surface-muted: #a8a29e;
    --ds-primary: #ffb77d;
    --ds-primary-soft: #ffb77d;
    --ds-primary-strong: #ff8c00;
    --ds-on-primary: #2f1500;
    --ds-outline-ghost: rgba(120, 113, 108, 0.2);
}

/* -------------------------------------------------------------------------- */
/* Dark — Admin (stitch_dynostage_admin)                                       */
/* -------------------------------------------------------------------------- */

html[data-ds-panel='admin'][data-theme='dark'] {
    --ds-font-body: 'Inter', system-ui, sans-serif;
    --ds-surface: #0e0e0e;
    --ds-surface-low: #131313;
    --ds-surface-mid: #191919;
    --ds-surface-high: #1f1f1f;
    --ds-surface-highest: #262626;
    --ds-sidebar: #000000;
    --ds-on-surface: #ffffff;
    --ds-on-surface-muted: #ababab;
    --ds-on-primary: #000000;

    --ds-primary: #ff9062;
    --ds-primary-soft: #ffb77d;
    --ds-primary-strong: #ff793e;

    --ds-admin-red: #ff525e;
    --ds-admin-red-glow: rgba(255, 82, 94, 0.2);
    --ds-admin-orange-glow: rgba(255, 140, 0, 0.2);

    --ds-success-bright: #4ade80;
    --ds-danger: #ff716c;
    --ds-outline-ghost: rgba(255, 255, 255, 0.06);
    --ds-outline-faint: rgba(255, 255, 255, 0.04);
    --ds-glow: rgba(255, 144, 98, 0.14);
    --ds-glass: rgba(38, 38, 38, 0.35);

    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 0.75rem;
    --ds-radius-xl: 1rem;
    --ds-radius-bento: 1.5rem;

    --ds-headline-page: 2.25rem;
    --ds-display-metric: 2.25rem;
    --ds-shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.45);
    --ds-shadow-topbar: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Default html before theme init */
html:not([data-theme]):not([data-ds-panel]) {
    --ds-surface: #0e0e0e;
    --ds-on-surface: #ffffff;
    --ds-primary: #ff9062;
    --ds-primary-soft: #ffb77d;
    --ds-primary-strong: #ff793e;
    --ds-sidebar: #000000;
    --ds-on-surface-muted: #ababab;
    --ds-surface-high: #1f1f1f;
    --ds-surface-highest: #262626;
    --ds-surface-low: #131313;
    --ds-surface-mid: #191919;
    --ds-on-primary: #000000;
    --ds-outline-ghost: rgba(255, 255, 255, 0.06);
    --ds-glow: rgba(255, 144, 98, 0.14);
    --ds-glass: rgba(38, 38, 38, 0.35);
    --ds-radius-md: 0.75rem;
    --ds-radius-lg: 0.75rem;
    --ds-radius-xl: 1rem;
    --ds-radius-bento: 1.5rem;
    --ds-display-hero: clamp(3.25rem, 7vw, 6rem);
    --ds-display-xl: clamp(2.5rem, 4vw, 3.75rem);
    --ds-display-lg: clamp(2rem, 3vw, 3rem);
    --ds-display-metric: 2.25rem;
    --ds-headline-page: 2.25rem;
    --ds-headline: 1.75rem;
    --ds-body: 0.9375rem;
    --ds-label: 0.6875rem;
    --ds-shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.45);
    --ds-success-bright: #4ade80;
    --ds-danger: #ff716c;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                         */
/* -------------------------------------------------------------------------- */

body.ds-app {
    font-family: var(--ds-font-body);
    font-size: var(--ds-body);
    background-color: var(--ds-surface);
    color: var(--ds-on-surface);
    -webkit-font-smoothing: antialiased;
}

html[data-ds-panel='landing'] .ds-landing-body {
    background-color: var(--ds-surface);
}

.ds-font-display {
    font-family: var(--ds-font-display);
}

.ds-kicker {
    font-family: var(--ds-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ds-primary);
    font-weight: 700;
}

html[data-ds-panel='customer'] .ds-kicker,
html[data-ds-panel='tuner'] .ds-kicker,
html[data-ds-panel='admin'] .ds-kicker {
    color: var(--ds-on-surface-muted);
}

html[data-ds-panel='landing'] .ds-kicker {
    color: var(--ds-primary);
}

.ds-headline {
    font-family: var(--ds-font-display);
    font-size: var(--ds-headline-page);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ds-on-surface);
}

.ds-headline--section {
    font-size: clamp(2rem, 3vw, 3rem);
}

.ds-display {
    font-family: var(--ds-font-display);
    font-size: var(--ds-display-xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.ds-display--hero {
    font-size: var(--ds-display-hero);
    text-transform: uppercase;
}

.ds-muted {
    color: var(--ds-on-surface-muted);
}

.ds-kinetic-gradient {
    background: linear-gradient(135deg, var(--ds-primary-soft) 0%, var(--ds-primary-strong) 100%);
    color: var(--ds-on-primary);
    border: none;
    box-shadow: 0 0 40px rgba(255, 144, 98, 0.2);
}

html[data-ds-panel='landing'] .ds-kinetic-gradient {
    box-shadow: 0 0 40px rgba(255, 183, 125, 0.12);
    color: var(--ds-on-primary);
}

.ds-kinetic-gradient:hover {
    filter: brightness(1.06);
    color: var(--ds-on-primary);
}

.ds-neon-core-gradient {
    background: linear-gradient(135deg, #ff8c00 0%, #ff5357 100%);
    color: #fff;
}

.ds-glass {
    background: var(--ds-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.ds-glass--panel {
    border: 1px solid var(--ds-outline-ghost);
    box-shadow: 0 0 40px rgba(255, 183, 125, 0.08);
}

.ds-ghost-border {
    box-shadow: inset 0 0 0 1px var(--ds-outline-ghost);
}

/* Landing nav */
.ds-landing-nav {
    background: rgba(23, 23, 23, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 0 40px rgba(255, 140, 0, 0.08);
}

.ds-landing-nav .navbar-brand {
    font-size: 1.5rem;
    letter-spacing: -0.04em;
}

.ds-landing-nav .nav-link {
    font-family: var(--ds-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-on-surface-muted) !important;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
}

.ds-landing-nav .nav-link:hover {
    color: #f5f5f5 !important;
}

.ds-landing-nav .nav-link.active {
    color: #f97316 !important;
    border-bottom-color: #f97316;
}

html[data-theme='light'] .ds-landing-nav .nav-link.active {
    color: var(--ds-primary-strong) !important;
    border-bottom-color: var(--ds-primary-strong);
}

/* -------------------------------------------------------------------------- */
/* Page ambient (customer dashboard decoration)                                */
/* -------------------------------------------------------------------------- */

.ds-page-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ds-page-ambient::before,
.ds-page-ambient::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
}

.ds-page-ambient::before {
    top: 0;
    right: 0;
    width: 50vw;
    height: 50vw;
    background: color-mix(in srgb, var(--ds-primary) 18%, transparent);
    transform: translate(25%, -45%);
}

.ds-page-ambient::after {
    bottom: 0;
    left: 0;
    width: 30vw;
    height: 30vw;
    background: color-mix(in srgb, var(--ds-surface-highest) 40%, transparent);
    transform: translate(-35%, 35%);
}

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                      */
/* -------------------------------------------------------------------------- */

.ds-sidebar {
    width: 16rem;
    background: var(--ds-sidebar);
    color: var(--ds-on-surface-muted);
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    padding: var(--ds-space-8) var(--ds-space-4);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-ds-panel='tuner'] .ds-sidebar {
    border-right: 1px solid rgba(41, 37, 36, 0.35);
}

.ds-sidebar__brand-block {
    margin-bottom: var(--ds-space-10);
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
}

.ds-sidebar__brand {
    font-family: var(--ds-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ds-primary);
    text-transform: lowercase;
}

html[data-ds-panel='admin'] .ds-sidebar__brand {
    text-transform: none;
    color: #f97316;
}

.ds-sidebar__tagline {
    font-family: var(--ds-font-body);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ds-on-surface-muted);
    margin-top: 0.35rem;
}

html[data-ds-panel='admin'] .ds-sidebar__tagline {
    color: var(--ds-on-surface-muted);
    letter-spacing: 0.2em;
}

.ds-sidebar__nav {
    gap: 0.35rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

html[data-ds-panel='customer'] .ds-sidebar__nav,
html[data-ds-panel='tuner'] .ds-sidebar__nav {
    gap: 0.5rem;
}

.ds-sidebar__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--ds-radius-md);
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease;
}

html[data-ds-panel='customer'] .ds-sidebar__link,
html[data-ds-panel='tuner'] .ds-sidebar__link {
    color: #ababab;
}

html[data-ds-panel='customer'] .ds-sidebar__link:hover,
html[data-ds-panel='tuner'] .ds-sidebar__link:hover {
    color: var(--ds-primary);
    background: transparent;
}

html[data-ds-panel='admin'] .ds-sidebar__link {
    gap: 0.75rem;
    border-radius: 0;
    border-left: 4px solid transparent;
    color: var(--ds-on-surface-muted);
    text-transform: none;
    font-family: var(--ds-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.75rem 1rem;
}

html[data-ds-panel='admin'] .ds-sidebar__link:hover {
    color: #fafafa;
    background: rgba(255, 255, 255, 0.08);
}

html[data-ds-panel='admin'] .ds-sidebar__link.is-active {
    color: #fb923c;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    border-left-color: #f97316;
    transform: scale(0.98);
    box-shadow: none;
}

html[data-ds-panel='tuner'] .ds-sidebar__link {
    border-radius: 0.125rem;
    font-weight: 500;
    color: #a8a29e;
}

html[data-ds-panel='tuner'] .ds-sidebar__link:hover {
    background: rgba(28, 25, 23, 0.8);
    color: #fb923c;
}

html[data-ds-panel='tuner'] .ds-sidebar__link.is-active {
    color: #f97316;
    font-weight: 700;
    background: rgba(28, 25, 23, 0.5);
    border-right: 2px solid #ea580c;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

html[data-ds-panel='customer'] .ds-sidebar__link.is-active {
    color: var(--ds-primary);
    font-weight: 700;
    transform: scale(0.95);
    box-shadow: 0 0 20px rgba(255, 144, 98, 0.1);
    background: transparent;
}

.ds-sidebar__label {
    font-family: var(--ds-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-ds-panel='admin'] .ds-sidebar__label {
    font-family: var(--ds-font-display);
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    text-transform: none;
}

html[data-ds-panel='tuner'] .ds-sidebar__label {
    font-family: var(--ds-font-display);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.ds-sidebar__icon {
    font-size: 1.35rem;
    line-height: 1;
}

/* -------------------------------------------------------------------------- */
/* Dashboard shell + topbar                                                       */
/* -------------------------------------------------------------------------- */

.ds-dashboard-wrap {
    margin-left: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .ds-dashboard-wrap {
        margin-left: 16rem;
    }
}

.ds-topbar {
    z-index: 1030;
    padding: var(--ds-space-4) var(--ds-space-8);
    background: color-mix(in srgb, var(--ds-surface) 78%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    box-shadow: var(--ds-shadow-topbar);
}

html[data-ds-panel='customer'] .ds-topbar,
html[data-ds-panel='tuner'] .ds-topbar {
    min-height: 5rem;
}

@media (min-width: 992px) {
    html[data-ds-panel='customer'] .ds-topbar,
    html[data-ds-panel='tuner'] .ds-topbar,
    html[data-ds-panel='admin'] .ds-topbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 16rem;
        width: auto;
    }
}

html[data-ds-panel='tuner'] .ds-topbar {
    border-bottom: 1px solid rgba(41, 37, 36, 0.12);
}

.ds-topbar__brand-mark {
    font-size: 1.25rem;
    text-transform: lowercase;
}

.ds-topbar__search-wrap {
    max-width: 28rem;
}

.ds-topbar__search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: var(--ds-on-surface-muted);
    pointer-events: none;
}

.ds-topbar__search {
    width: 100%;
    max-width: 16rem;
    background: var(--ds-surface-low);
    border: none;
    border-radius: var(--ds-radius-md);
    padding: 0.5rem 1rem 0.5rem 2.65rem;
    font-size: 0.875rem;
    color: var(--ds-on-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-ds-panel='customer'] .ds-topbar__search::placeholder,
html[data-ds-panel='tuner'] .ds-topbar__search::placeholder {
    color: color-mix(in srgb, var(--ds-on-surface-muted) 55%, transparent);
}

.ds-topbar__search:focus {
    outline: none;
    border-bottom: 2px solid var(--ds-primary);
    border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
    box-shadow: none;
}

.ds-topbar__search--admin {
    max-width: none;
    height: 2.25rem;
    padding-left: 2.5rem;
    padding-right: 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-low);
    color: var(--ds-on-surface-muted);
}

.ds-topbar__notif-dot {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ds-primary);
    box-shadow: 0 0 0 2px var(--ds-surface);
}

.ds-topbar__divider {
    width: 1px;
    height: 2rem;
    background: rgba(255, 255, 255, 0.08);
}

.ds-topbar__balance {
    color: var(--ds-on-surface);
}

.ds-topbar__system-meta {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-on-surface-muted);
}

.ds-topbar__system-label {
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--ds-font-display);
    letter-spacing: 0.04em;
    color: var(--ds-on-surface);
}

.ds-topbar__user-title {
    font-size: 0.625rem;
    font-weight: 700;
    font-family: var(--ds-font-display);
    letter-spacing: 0.04em;
    color: var(--ds-on-surface);
    line-height: 1.1;
}

.ds-topbar__user-sub {
    font-size: 0.5625rem;
    color: var(--ds-on-surface-muted);
    font-family: var(--ds-font-display);
    margin-top: 0.15rem;
}

.ds-topbar__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-primary) 22%, transparent);
}

.ds-topbar__avatar--sm {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    box-shadow: none;
    border: 1px solid #27272a;
}

.ds-topbar__avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ds-font-display);
    font-weight: 700;
    line-height: 1;
    color: var(--ds-on-surface);
    background: color-mix(in srgb, var(--ds-surface-highest) 80%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
}

.ds-topbar__avatar-initials--customer {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-primary) 22%, transparent);
}

.ds-topbar__avatar-initials--sm {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 0.625rem;
}

.ds-topbar__avatar-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--ds-surface-highest) 65%, transparent);
}

.ds-topbar__user-btn {
    color: inherit !important;
}

.ds-content {
    flex: 1;
    padding: var(--ds-space-8) var(--ds-space-8) var(--ds-space-12);
    max-width: 80rem;
    margin: 0 auto;
    width: 100%;
}

html[data-ds-panel='customer'] .ds-content,
html[data-ds-panel='tuner'] .ds-content,
html[data-ds-panel='admin'] .ds-content {
    padding-top: 7rem;
}

html[data-ds-panel='admin'] .ds-content,
html[data-ds-panel='tuner'] .ds-content {
    max-width: 90rem;
}

html[data-ds-panel='tuner'] .ds-content {
    padding-top: 5.5rem;
}

.ds-page-title {
    margin-bottom: var(--ds-space-10);
}

/* Sidebar mobile */
.ds-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1035;
}

body.ds-sidebar-open .ds-sidebar-backdrop {
    display: block;
}

@media (max-width: 991.98px) {
    .ds-sidebar {
        transform: translateX(-100%);
    }

    body.ds-sidebar-open .ds-sidebar {
        transform: translateX(0);
    }

    html[data-ds-panel='customer'] .ds-topbar,
    html[data-ds-panel='tuner'] .ds-topbar,
    html[data-ds-panel='admin'] .ds-topbar {
        position: sticky;
        left: 0;
        right: 0;
        width: 100%;
    }

    html[data-ds-panel='customer'] .ds-content,
    html[data-ds-panel='tuner'] .ds-content,
    html[data-ds-panel='admin'] .ds-content {
        padding-top: var(--ds-space-6);
    }
}

/* -------------------------------------------------------------------------- */
/* Cards, stats, tables                                                         */
/* -------------------------------------------------------------------------- */

.ds-card {
    background: var(--ds-surface-high);
    border-radius: var(--ds-radius-bento);
    padding: var(--ds-space-8);
    box-shadow: var(--ds-shadow-soft);
    border: 1px solid var(--ds-outline-ghost);
}

.ds-card--accent {
    border-color: color-mix(in srgb, var(--ds-primary) 45%, transparent);
    box-shadow: var(--ds-shadow-glow), var(--ds-shadow-soft);
}

.ds-stat-tile {
    background: var(--ds-surface-high);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    height: 100%;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-ds-panel='landing'] .ds-stat-tile {
    border-color: var(--ds-outline-faint);
}

.ds-stat-tile--accent {
    border-width: 2px;
    border-color: var(--ds-primary);
    box-shadow: 0 0 20px rgba(255, 144, 98, 0.1);
}

.ds-stat-tile__label {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--ds-font-body);
    color: var(--ds-on-surface-muted);
    margin-bottom: var(--ds-space-4);
}

.ds-stat-tile--accent .ds-stat-tile__label {
    color: var(--ds-primary);
}

.ds-stat-tile__value {
    font-family: var(--ds-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ds-on-surface);
}

.ds-stat-tile__value--accent {
    color: var(--ds-primary);
}

.ds-stat-tile__value--success {
    color: var(--ds-success-bright);
}

.ds-admin-metric {
    position: relative;
    background: var(--ds-surface-high);
    padding: var(--ds-space-6);
    padding-left: calc(var(--ds-space-6) + 4px);
    border-radius: var(--ds-radius-lg);
    border: 1px solid var(--ds-outline-ghost);
}

.ds-admin-metric::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--ds-primary);
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2);
}

.ds-admin-metric--red::before {
    background: #ff525e;
    box-shadow: 0 0 15px rgba(255, 82, 94, 0.2);
}

.ds-admin-metric--neutral::before {
    background: #a1a1aa;
    box-shadow: none;
}

.ds-admin-metric__label {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ds-on-surface-muted);
    margin-bottom: var(--ds-space-4);
}

.ds-admin-metric__value {
    font-family: var(--ds-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--ds-on-surface);
}

.ds-table-shell {
    background: var(--ds-surface-mid);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ds-outline-faint);
}

.ds-table-shell__head {
    padding: var(--ds-space-6);
    border-bottom: 1px solid var(--ds-outline-faint);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
}

.ds-table-shell__title {
    font-family: var(--ds-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.ds-table-shell .table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-on-surface);
}

.ds-table-shell thead th {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-on-surface-muted);
    border: none;
    padding: 1rem 1.5rem;
    background: var(--ds-surface-low);
}

.ds-table-shell tbody td {
    border: none;
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
}

.ds-table-shell tbody tr {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}

.ds-table-shell tbody tr:hover {
    background: var(--ds-surface-high);
}

.ds-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: #474747;
    color: #d2d0cf;
}

.ds-chip--tint {
    background: rgba(255, 121, 62, 0.2);
    color: #ff7436;
}

.ds-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ds-primary);
    animation: ds-pulse 1.4s ease-in-out infinite;
}

@keyframes ds-pulse {
    50% {
        opacity: 0.65;
    }
}

.ds-telemetry-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-6);
    background: color-mix(in srgb, var(--ds-surface-highest) 22%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ds-outline-ghost);
}

.ds-telemetry-card::after {
    content: '';
    position: absolute;
    bottom: -2.5rem;
    right: -2.5rem;
    width: 8rem;
    height: 8rem;
    background: color-mix(in srgb, var(--ds-primary) 12%, transparent);
    filter: blur(48px);
    border-radius: 50%;
    pointer-events: none;
}

.ds-progress-track {
    height: 0.25rem;
    border-radius: 999px;
    background: var(--ds-surface-mid);
    overflow: hidden;
}

.ds-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ds-primary);
}

.ds-table-wrap {
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ds-outline-ghost);
    background: var(--ds-surface-high);
}

.ds-table-wrap .table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-on-surface);
}

.ds-table-wrap thead th {
    font-size: var(--ds-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ds-on-surface-muted);
    border: none;
    padding-top: var(--ds-space-5);
    padding-bottom: var(--ds-space-3);
}

.ds-table-wrap tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--ds-surface) 55%, transparent);
}

.ds-table-wrap tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--ds-surface-low) 65%, transparent);
}

.ds-table-wrap td {
    border: none;
    padding-top: var(--ds-space-4);
    padding-bottom: var(--ds-space-4);
    vertical-align: middle;
}

/* Buttons */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8125rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--ds-radius-md);
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
        color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}

html[data-ds-panel='admin'] .ds-btn {
    border-radius: var(--ds-radius-sm);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

.ds-btn:active {
    transform: scale(0.97);
}

.ds-btn--primary.ds-kinetic-gradient {
    color: var(--ds-on-primary);
}

.ds-btn--secondary {
    background: color-mix(in srgb, var(--ds-surface-highest) 80%, transparent);
    color: var(--ds-on-surface);
    border-color: var(--ds-outline-ghost);
}

.ds-btn--secondary:hover {
    border-color: color-mix(in srgb, var(--ds-primary) 40%, transparent);
    color: var(--ds-primary);
}

.ds-btn--outline {
    background: transparent;
    color: var(--ds-primary);
    border-color: color-mix(in srgb, var(--ds-primary) 35%, transparent);
}

.ds-btn--outline:hover {
    background: color-mix(in srgb, var(--ds-primary) 8%, transparent);
}

.ds-btn--ghost {
    background: transparent;
    color: var(--ds-on-surface-muted);
}

.ds-btn--ghost:hover {
    color: var(--ds-on-surface);
    background: color-mix(in srgb, var(--ds-surface-highest) 40%, transparent);
}

html[data-ds-panel='landing'] .ds-btn-landing-ghost {
    font-family: var(--ds-font-display);
    font-size: 1.125rem;
    padding: 1.25rem 2.5rem;
    border-radius: var(--ds-radius-md);
    border: 1px solid rgba(86, 67, 52, 0.3);
    color: var(--ds-on-surface);
    background: transparent;
}

html[data-ds-panel='landing'] .ds-btn-landing-ghost:hover {
    background: var(--ds-surface-bright, #393939);
    border-color: rgba(86, 67, 52, 0.45);
}

/* Forms */
.ds-form-label {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-on-surface-muted);
    margin-bottom: var(--ds-space-2);
    display: block;
}

.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    background: var(--ds-surface-highest);
    color: var(--ds-on-surface);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-lg);
    padding: 0.85rem 1.1rem;
    font-size: 0.9375rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

html[data-ds-panel='landing'] .ds-input,
html[data-ds-panel='landing'] .ds-select {
    border-radius: var(--ds-radius-md);
    padding: 1rem 1.5rem;
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--ds-primary) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-primary) 22%, transparent);
}

.ds-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Badges */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ds-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ds-badge--neutral {
    background: var(--ds-surface-highest);
    color: var(--ds-on-surface-muted);
    border-color: var(--ds-outline-ghost);
}

.ds-badge--primary {
    background: color-mix(in srgb, var(--ds-primary) 14%, transparent);
    color: var(--ds-primary);
    border-color: color-mix(in srgb, var(--ds-primary) 28%, transparent);
}

.ds-badge--success {
    background: color-mix(in srgb, var(--ds-success-bright) 16%, transparent);
    color: var(--ds-success-bright);
    border-color: color-mix(in srgb, var(--ds-success-bright) 28%, transparent);
}

.ds-badge--warning {
    background: color-mix(in srgb, var(--ds-warning, #fbbf24) 18%, transparent);
    color: var(--ds-warning, #fbbf24);
}

.ds-badge--danger {
    background: color-mix(in srgb, var(--ds-danger) 16%, transparent);
    color: var(--ds-danger);
}

/* Modal */
.ds-modal .modal-content {
    background: var(--ds-surface-high);
    color: var(--ds-on-surface);
    border: 1px solid var(--ds-outline-ghost);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-soft);
}

.ds-modal .modal-header {
    border-bottom-color: var(--ds-outline-ghost);
}

.ds-modal .btn-close {
    filter: invert(0.85);
}

html[data-theme='light'] .ds-modal .btn-close {
    filter: none;
}

/* Bootstrap dropdowns */
.ds-app .dropdown-menu {
    background: var(--ds-surface-high);
    border: 1px solid var(--ds-outline-ghost);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-soft);
}

.ds-app .dropdown-item {
    color: var(--ds-on-surface);
}

.ds-app .dropdown-item:hover,
.ds-app .dropdown-item:focus {
    background: color-mix(in srgb, var(--ds-primary) 10%, transparent);
    color: var(--ds-on-surface);
}

.ds-section-gap {
    margin-bottom: var(--ds-space-12);
}

.ds-landing-section {
    padding: var(--ds-space-24) var(--ds-space-8);
}

.ds-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-md);
    border: none;
    background: transparent;
    color: var(--ds-on-surface-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

html[data-ds-panel='customer'] .ds-icon-btn:hover,
html[data-ds-panel='tuner'] .ds-icon-btn:hover {
    background: var(--ds-surface-high);
    color: var(--ds-primary);
}

html[data-ds-panel='admin'] .ds-icon-btn:hover {
    color: #fb923c;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

html[data-theme='dark'] .ds-theme-icon-when-light {
    display: none;
}

html[data-theme='light'] .ds-theme-icon-when-dark {
    display: none;
}

/* Landing: package cards */
.neon-glow-orange {
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2);
}

.ds-package-card {
    background: var(--ds-surface-high);
    padding: var(--ds-space-8);
    border-radius: var(--ds-radius-bento);
    border-top: 4px solid var(--ds-primary);
    transition: transform 0.2s ease;
    height: 100%;
}

.ds-package-card:hover {
    transform: translateY(-6px);
}

.ds-package-card--accent-top {
    border-top-color: #ff8683;
}

.ds-package-price {
    font-family: var(--ds-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
}

.ds-process-step__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-highest);
    border: 4px solid var(--ds-surface);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    margin-bottom: var(--ds-space-8);
    transition: border-color 0.2s ease;
}

.ds-process-step:hover .ds-process-step__icon {
    border-color: var(--ds-primary);
}

/* -------------------------------------------------------------------------- */
/* Toast Notification System                                                    */
/* -------------------------------------------------------------------------- */

.ds-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

.ds-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--ds-radius-md, 0.75rem);
    background: var(--ds-surface-high, #1f1f1f);
    border: 1px solid var(--ds-outline-ghost, rgba(255, 255, 255, 0.06));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ds-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.ds-toast.is-leaving {
    opacity: 0;
    transform: translateX(2rem);
}

.ds-toast__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-toast__icon .material-symbols-outlined {
    font-size: 1.125rem;
}

.ds-toast--success .ds-toast__icon {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.ds-toast--error .ds-toast__icon {
    background: rgba(255, 113, 108, 0.15);
    color: #ff716c;
}

.ds-toast--warning .ds-toast__icon {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.ds-toast--info .ds-toast__icon {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

.ds-toast__body {
    flex: 1;
    min-width: 0;
}

.ds-toast__title {
    font-family: var(--ds-font-display, 'Space Grotesk', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ds-on-surface, #fff);
    margin: 0 0 0.15rem;
}

.ds-toast__message {
    font-size: 0.75rem;
    color: var(--ds-on-surface-muted, #ababab);
    margin: 0;
    line-height: 1.4;
}

.ds-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--ds-on-surface-muted, #ababab);
    padding: 0.125rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.ds-toast__close:hover {
    opacity: 1;
}

.ds-toast__close .material-symbols-outlined {
    font-size: 1rem;
}

.ds-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
}

.ds-toast__progress-bar {
    height: 100%;
    width: 100%;
    border-radius: 0 0 var(--ds-radius-md, 0.75rem) var(--ds-radius-md, 0.75rem);
}

.ds-toast__progress-bar--success { background: #4ade80; }
.ds-toast__progress-bar--error { background: #ff716c; }
.ds-toast__progress-bar--warning { background: #fbbf24; }
.ds-toast__progress-bar--info { background: #60a5fa; }

/* -------------------------------------------------------------------------- */
/* Admin CSS (inline — from stitch_dynostage_admin)                            */
/* -------------------------------------------------------------------------- */

html[data-ds-panel='admin'] .ad-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
}

html[data-ds-panel='admin'] .ad-section-title {
    font-family: var(--ds-font-display);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ds-on-surface-muted);
    margin-bottom: 1.5rem;
}

html[data-ds-panel='admin'] .ad-page-header {
    margin-bottom: 2.5rem;
}

/* Reserve space for fixed live-feed on vehicle database */
html[data-ds-panel='admin'] .ad-veh-page {
    padding-bottom: clamp(5rem, 22vw, 14rem);
}

html[data-ds-panel='admin'] .ad-veh-hero-metric {
    font-family: var(--ds-font-display);
    font-size: clamp(2.5rem, 7vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--ds-on-surface);
}

html[data-ds-panel='admin'] .ad-veh-hero-metric__suffix {
    font-size: 0.42em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ds-primary);
    vertical-align: baseline;
    margin-left: 0.2em;
}

html[data-ds-panel='admin'] .ad-veh-stat-tile {
    background: var(--ds-surface-high);
    border: 1px solid var(--ds-outline-ghost);
    border-radius: var(--ds-radius-lg);
    padding: 0.875rem 1rem;
    height: 100%;
}

html[data-ds-panel='admin'] .ad-veh-stat-tile__label {
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ds-on-surface-muted);
    margin-bottom: 0.35rem;
}

html[data-ds-panel='admin'] .ad-veh-stat-tile__value {
    font-family: var(--ds-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ds-on-surface);
    line-height: 1.2;
}

html[data-ds-panel='admin'] .ad-veh-stat-tile__value--success {
    color: var(--ds-success-bright);
}

html[data-ds-panel='admin'] .ad-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.55rem;
    border-radius: var(--ds-radius-sm);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
}

html[data-ds-panel='admin'] .ad-badge--primary {
    background: color-mix(in srgb, var(--ds-primary) 18%, transparent);
    color: var(--ds-primary);
    border: 1px solid color-mix(in srgb, var(--ds-primary) 35%, transparent);
}

html[data-ds-panel='admin'] .ad-badge--muted {
    background: rgba(161, 161, 170, 0.12);
    color: var(--ds-on-surface-muted);
    border: 1px solid rgba(244, 244, 245, 0.06);
}

html[data-ds-panel='admin'] .ad-badge--danger {
    background: rgba(255, 82, 94, 0.12);
    color: var(--ds-admin-red);
    border: 1px solid rgba(255, 82, 94, 0.25);
}

html[data-ds-panel='admin'] .ad-live-feed {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: min(19rem, calc(100vw - 2.5rem));
    z-index: 1030;
    padding: 1rem 1.125rem;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface-high);
    border: 1px solid var(--ds-outline-ghost);
    box-shadow: var(--ds-shadow-soft);
}

html[data-ds-panel='admin'] .ad-live-feed__title {
    font-family: var(--ds-font-display);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ds-on-surface-muted);
    margin-bottom: 0.75rem;
}

html[data-ds-panel='admin'] .ad-live-feed__item {
    font-size: 0.75rem;
    color: var(--ds-on-surface-muted);
    padding: 0.5rem 0;
}

html[data-ds-panel='admin'] .ad-live-feed__item + .ad-live-feed__item {
    border-top: 1px solid var(--ds-outline-ghost);
}

html[data-ds-panel='admin'] .ad-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    height: 100%;
    background: var(--ds-surface-high);
    border: 1px solid var(--ds-outline-ghost);
    border-radius: var(--ds-radius-lg);
    transition: border-color 0.15s ease, background 0.15s ease;
}

html[data-ds-panel='admin'] .ad-brand-card:hover {
    border-color: color-mix(in srgb, var(--ds-primary) 40%, transparent);
    background: var(--ds-glass);
}

html[data-ds-panel='admin'] .ad-brand-card .material-symbols-outlined {
    font-size: 2rem;
    color: var(--ds-primary);
}

html[data-ds-panel='admin'] .ad-brand-card__name {
    font-family: var(--ds-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-on-surface);
}

html[data-ds-panel='admin'] .ad-table-card {
    background: var(--ds-surface-high);
    border-radius: var(--ds-radius-bento);
    overflow: hidden;
    border: 1px solid var(--ds-outline-ghost);
}

html[data-ds-panel='admin'] .ad-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ds-outline-ghost);
}

html[data-ds-panel='admin'] .ad-table-head__title {
    font-family: var(--ds-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

html[data-ds-panel='admin'] .ad-table-card .table thead th {
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ds-on-surface-muted);
    border: none;
    padding: 0.75rem 1.5rem;
    background: var(--ds-surface-low);
}

html[data-ds-panel='admin'] .ad-table-card .table tbody td {
    border: none;
    padding: 1rem 1.5rem;
    vertical-align: middle;
    border-top: 1px solid var(--ds-outline-ghost);
}

html[data-ds-panel='admin'] .ad-table-card .table tbody tr:hover {
    background: var(--ds-glass);
}

html[data-ds-panel='admin'] .ad-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ds-radius-md);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-ds-panel='admin'] .ad-pill--success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

html[data-ds-panel='admin'] .ad-pill--warning {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
}

html[data-ds-panel='admin'] .ad-pill--danger {
    background: rgba(255, 82, 94, 0.12);
    color: #ff525e;
}

html[data-ds-panel='admin'] .ad-pill--info {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

html[data-ds-panel='admin'] .ad-pill--neutral {
    background: color-mix(in srgb, var(--ds-on-surface-muted) 12%, transparent);
    color: var(--ds-on-surface-muted);
}

html[data-ds-panel='admin'] .ad-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ds-outline-ghost);
}

html[data-ds-panel='admin'] .ad-page-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-on-surface-muted);
    font-family: var(--ds-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

html[data-ds-panel='admin'] .ad-page-btn:hover {
    background: var(--ds-glass);
    color: var(--ds-on-surface);
}

html[data-ds-panel='admin'] .ad-page-btn--active {
    background: var(--ds-primary-strong);
    color: var(--ds-on-primary);
}

html[data-ds-panel='admin'] .ad-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-strong));
    color: var(--ds-on-primary);
    box-shadow: 0 8px 24px var(--ds-glow);
    cursor: pointer;
    transition: transform 0.15s ease;
    z-index: 100;
}

html[data-ds-panel='admin'] .ad-fab:hover {
    transform: scale(1.08);
}

html[data-ds-panel='admin'] .ad-detail-card {
    background: var(--ds-surface-high);
    border-radius: var(--ds-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--ds-outline-ghost);
}

html[data-ds-panel='admin'] .ad-detail-card__title {
    font-family: var(--ds-font-display);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ds-on-surface-muted);
    margin-bottom: 1rem;
}

html[data-ds-panel='admin'] .ad-toggle {
    position: relative;
    width: 2.5rem;
    height: 1.25rem;
    background: var(--ds-surface-highest);
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

html[data-ds-panel='admin'] .ad-toggle.is-active {
    background: var(--ds-primary-strong);
}

html[data-ds-panel='admin'] .ad-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

html[data-ds-panel='admin'] .ad-toggle.is-active .ad-toggle__knob {
    transform: translateX(1.25rem);
}

/* Admin account settings (/profile for administrators) */
html[data-ds-panel='admin'] .ad-form-section-title {
    letter-spacing: 0.08em;
}

html[data-ds-panel='admin'] .ad-form-section-title--danger {
    color: var(--ds-admin-red);
}

html[data-ds-panel='admin'] .ds-table-shell.ad-account-delete-card {
    border-color: color-mix(in srgb, var(--ds-admin-red) 28%, transparent);
}

html[data-ds-panel='admin'] .ad-account-delete-open {
    color: var(--ds-admin-red);
    border-color: color-mix(in srgb, var(--ds-admin-red) 45%, transparent);
}

html[data-ds-panel='admin'] .ad-account-delete-open:hover {
    color: #fff;
    background: color-mix(in srgb, var(--ds-admin-red) 22%, transparent);
    border-color: color-mix(in srgb, var(--ds-admin-red) 55%, transparent);
}

html[data-ds-panel='admin'] .ad-account-delete-confirm {
    background: linear-gradient(135deg, var(--ds-admin-red) 0%, color-mix(in srgb, var(--ds-admin-red) 72%, #140506) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 0 18px var(--ds-admin-red-glow);
}

html[data-ds-panel='admin'] .ad-account-delete-confirm:hover {
    filter: brightness(1.06);
    color: #fff;
}

/* Admin page titles (settings-style h1) */
html[data-ds-panel='admin'] .ad-page-title-xl {
    font-size: 1.75rem;
}

/* Admin list / filter toolbar controls (shared across jobs, orders, users, vehicles) */
html[data-ds-panel='admin'] .ad-filter-control {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

html[data-ds-panel='admin'] .ad-filter-select {
    max-width: 14rem;
}

html[data-ds-panel='admin'] .ad-filter-select--narrow {
    max-width: 12rem;
}

html[data-ds-panel='admin'] .ad-filter-date {
    max-width: 11rem;
}

html[data-ds-panel='admin'] .ad-filter-search {
    min-width: 12rem;
    max-width: 24rem;
}

html[data-ds-panel='admin'] .ad-filter-btn-ghost {
    font-size: 0.75rem;
}

html[data-ds-panel='admin'] .ad-billing-section-title {
    letter-spacing: 0.08em;
}

html[data-ds-panel='admin'] .ad-billing-section-title--sub {
    letter-spacing: 0.06em;
}

html[data-ds-panel='admin'] .ad-modal-content-tight {
    overflow: hidden;
}

html[data-ds-panel='admin'] .ad-vehicles-shell__subtitle {
    font-size: 1rem;
}

html[data-ds-panel='admin'] .ad-filter-select-wide {
    max-width: 28rem;
}