:root {
    --color-bg: #f4f5f7;
    --color-surface: #ffffff;
    --color-surface-2: #f7f8fa;
    --color-border: #e2e5ea;
    --color-text: #16181d;
    --color-muted: #5f6672;
    --color-accent: #e31e24;
    --color-accent-2: #b8151a;
    --color-ink: #101114;
    --color-shadow: rgba(16, 24, 40, 0.10);
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    /* FLEX-inspired backdrop: clean white top fading into light gray with
       horizontal "speed stripes" near the bottom of the viewport. */
    background-image:
        radial-gradient(circle at 15% 0%, rgba(227, 30, 36, 0.05), transparent 40%),
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 78vh,
            rgba(16, 24, 40, 0.045) 78vh,
            rgba(16, 24, 40, 0.045) calc(78vh + 5px),
            transparent calc(78vh + 5px),
            transparent calc(78vh + 26px),
            rgba(16, 24, 40, 0.04) calc(78vh + 26px),
            rgba(16, 24, 40, 0.04) calc(78vh + 30px),
            transparent calc(78vh + 30px),
            transparent calc(78vh + 48px),
            rgba(16, 24, 40, 0.035) calc(78vh + 48px),
            rgba(16, 24, 40, 0.035) calc(78vh + 51px),
            transparent calc(78vh + 51px),
            transparent 100vh
        ),
        linear-gradient(180deg, #ffffff 0%, #f6f7f9 55%, #eef0f3 100%);
    background-attachment: fixed;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-2);
}

::selection {
    background: rgba(227, 30, 36, 0.25);
}

h1:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.app-layout {
    min-height: 100vh;
}

.landing-layout {
    min-height: 100vh;
}

/* Black automotive app bar — keeps the white "TEST DRIVE" logo readable and
   anchors the FLEX black/red/white palette. */
.app-bar {
    border-bottom: 3px solid var(--color-accent);
    background: rgba(16, 17, 20, 0.96);
    backdrop-filter: blur(18px);
}

/* Same visual identity as the in-app bar (.app-bar) so the transition from the
   marketing page to the client panel feels seamless. */
.landing-app-bar {
    background: rgba(16, 17, 20, 0.96);
    backdrop-filter: blur(18px);
    border-bottom: 3px solid var(--color-accent);
}

.landing-app-bar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-flags {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

.flag-btn {
    background: transparent;
    border: none;
    padding: 2px 6px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.flag-btn.active {
    outline: 2px solid var(--color-accent);
}

.app-bar__menu {
    margin-right: 0.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* The TEST DRIVE logo is a wide horizontal mark — constraining it to a square
   made it tiny. Fix the height, let the width follow the aspect ratio. */
.landing-brand__logo {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.landing-brand__title {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.brand-title {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-chip {
    box-shadow: 0 0 14px rgba(227, 30, 36, 0.35);
}

.user-panel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 1rem;
}

.user-avatar {
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

.user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Dark sidebar (Dynosport-style): light text on graphite, red active state. */
.app-drawer {
    border-right: 1px solid #1d2026;
}

.app-drawer .drawer-subtitle,
.app-drawer .drawer-footer,
.app-drawer .nav-section {
    color: #8b919b;
}

.app-drawer .drawer-divider,
.app-drawer .nav-divider {
    border-color: rgba(255, 255, 255, 0.10);
}

.drawer-header {
    padding: 1.5rem 1.5rem 0.75rem;
}

.drawer-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drawer-subtitle {
    color: var(--color-muted);
}

.drawer-footer {
    padding: 1rem 1.5rem 1.5rem;
    color: var(--color-muted);
}

.drawer-divider {
    margin-bottom: 0.75rem;
    border-color: var(--color-border);
}

.drawer-footnote {
    display: block;
}

.app-content {
    padding: 2.5rem 0 3rem;
}

.landing-content {
    padding: 3.5rem 0 4rem;
}

.landing-content__container {
    padding-top: 1rem;
}

.content-container {
    padding-top: 1.5rem;
}

.app-nav {
    padding: 0.25rem 0.75rem 1rem;
}

.nav-section {
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 1.25rem 0 0.5rem;
}

.file-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    border: 1px dashed #c9ced6;
    border-radius: 14px;
    background: var(--color-surface-2);
}

.file-upload__input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file-upload__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--color-accent);
    background: linear-gradient(135deg, #e31e24, #c11318);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(227, 30, 36, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.file-upload__button:hover {
    transform: translateY(-1px);
    border-color: var(--color-accent-2);
    box-shadow: 0 12px 24px rgba(227, 30, 36, 0.36);
}

.file-upload__text {
    flex: 1 1 auto;
}

.nav-divider {
    margin: 0.75rem 0;
    border-color: var(--color-border);
}

.app-nav .mud-nav-link {
    border-radius: 14px;
    margin: 0.2rem 0;
    padding: 0.6rem 0.75rem;
    color: #d6d9de;
    transition: all 0.2s ease;
}

.app-nav .mud-nav-link:hover {
    background: rgba(227, 30, 36, 0.16);
    color: #ffffff;
}

.app-nav .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(227, 30, 36, 0.85), rgba(227, 30, 36, 0.45));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(227, 30, 36, 0.30);
    font-weight: 600;
}

.app-nav .mud-nav-link.active .mud-icon-root {
    color: #ffffff;
}

.landing-hero {
    padding: 3rem;
    background:
        linear-gradient(135deg, rgba(227, 30, 36, 0.07), rgba(227, 30, 36, 0) 55%),
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 82%,
            rgba(16, 24, 40, 0.05) 82%,
            rgba(16, 24, 40, 0.05) calc(82% + 4px),
            transparent calc(82% + 4px),
            transparent calc(82% + 16px),
            rgba(16, 24, 40, 0.04) calc(82% + 16px),
            rgba(16, 24, 40, 0.04) calc(82% + 18px),
            transparent calc(82% + 18px)
        ),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.12);
    position: relative;
    overflow: hidden;
    animation: rise 0.6s ease-out;
}

.landing-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2rem;
    align-items: center;
}

.landing-hero__title {
    margin-bottom: 0.6rem;
}

.landing-hero__subtitle {
    color: var(--color-muted);
    max-width: 520px;
}

.landing-hero__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-hero__chips {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* The white "TEST DRIVE" logo needs a dark plate on the light hero card —
   a black panel with a red edge keeps the FLEX black/red/white contrast. */
.landing-hero__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 2rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 0%, rgba(227, 30, 36, 0.22), transparent 55%),
        linear-gradient(160deg, #1a1c21 0%, #0f1114 70%);
    border-bottom: 4px solid var(--color-accent);
    box-shadow: 0 20px 40px rgba(16, 24, 40, 0.30);
}

.landing-hero__image {
    max-width: 320px;
    width: 100%;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}

.metrics-grid {
    margin-top: 2rem;
}

.landing-highlight-grid {
    margin-top: 2.5rem;
}

/* Shared card surface for all landing cards — sets the common radius, border,
   transition, and hover lift. Variants below (.landing-highlight,
   .landing-tunings__card, .landing-step, .landing-brand-card) override background
   and padding but inherit a consistent feel. */
.landing-card {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Optional illustration attached to a news post / custom section (mini-CMS). */
.landing-media-img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 12px;
    margin: 12px 0;
}

/* Responsive 16:9 wrapper for YouTube/Vimeo embeds and native video. */
.landing-media-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 12px 0;
}

.landing-media-video iframe,
.landing-media-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    background: #000;
}

.landing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 30, 36, 0.5);
    box-shadow: 0 16px 28px rgba(16, 24, 40, 0.14);
}

.landing-highlight {
    padding: 1.5rem;
    display: grid;
    gap: 0.5rem;
    /* Highlights sit on the bare page (no wrapping .landing-section), so they
       get a solid surface + subtle shadow to carry visual weight. */
    background: var(--color-surface);
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
}

.landing-highlight__icon {
    font-size: 2rem;
}

.landing-tunings__grid {
    margin-top: 1.5rem;
}

.landing-tunings__card {
    padding: 1.4rem;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    height: 100%;
}

.landing-tunings__icon {
    font-size: 1.7rem;
    margin-bottom: 0.15rem;
}

.landing-tunings__name {
    font-weight: 600;
}

.landing-section__title {
    margin-bottom: 0.6rem;
}

.landing-hero__eyebrow {
    color: var(--color-accent);
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
    display: block;
}

.ticket-options-grid {
    row-gap: 0.35rem;
}

.ticket-option-checkbox .mud-checkbox-label {
    font-size: 0.82rem;
    line-height: 1.2;
}

.landing-process__steps {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}

.landing-process__steps--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .landing-process__steps--grid {
        grid-template-columns: 1fr;
    }
}

.landing-step {
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.landing-step__number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(227, 30, 36, 0.12);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Generic section container for Tunings + Process + Platforms + FAQ blocks.
   Mirrors landing-process padding + border so the sections read as siblings. */
.landing-section {
    margin-top: 3rem;
    padding: 2.25rem;
    border-radius: 22px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

.landing-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.landing-brand-card {
    /* Smaller than the other .landing-card variants — these are chip-like tiles
       in a dense grid, so radius + padding scale down. */
    padding: 0.85rem 1rem;
    border-radius: 12px;
}

.landing-brand-card__name {
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.landing-brand-footnote {
    display: block;
    margin-top: 0.75rem;
    font-style: italic;
}

/* Last tile in the brand grid — the "…and many more" catch-all. Tints the
   accent color and nudges the caption to a lighter shade so the tile reads
   as a label rather than a specific brand. */
.landing-brand-card--more {
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.10), rgba(227, 30, 36, 0.02));
    border-color: rgba(227, 30, 36, 0.45);
}

.landing-brand-card--more .landing-brand-card__name {
    color: var(--color-accent-2);
}

.landing-faq {
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.landing-faq .mud-expand-panel {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.landing-faq .mud-expand-panel:last-child {
    border-bottom: none;
}

/* Cooperation cards (Dynosport "packages" analog): two side-by-side offers with
   check-marked feature lists. */
.landing-coop-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.landing-coop-card__eyebrow {
    color: var(--color-accent-2);
    letter-spacing: 0.14em;
}

.landing-coop-card__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.landing-coop-card__list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.landing-coop-card__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent-2);
    font-weight: 700;
}

/* Contact section ("Talk to us"): three info cards + centered message form. */
.landing-contact-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.landing-contact-card__link {
    font-weight: 600;
    color: var(--color-accent-2);
    word-break: break-all;
}

.landing-contact-form {
    margin: 2rem auto 0;
    max-width: 720px;
    padding: 2rem;
}

.landing-cta {
    margin-top: 3rem;
    padding: 2.25rem;
    border-radius: 22px;
    border: 1px solid rgba(227, 30, 36, 0.35);
    background: linear-gradient(120deg, rgba(227, 30, 36, 0.10), rgba(227, 30, 36, 0)), var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.10);
}

.landing-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 0;
}

.stat-card {
    padding: 1.5rem;
    border-radius: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 14px 28px rgba(16, 24, 40, 0.10);
    animation: rise 0.7s ease-out;
}

/* Dynosport-style colored metric tiles, in the portal palette:
   gray / red / black. Colored variants drop the red top border and
   carry their own text colors. */
.stat-card--gray {
    background: #eceef1;
    border: none;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}

.stat-card--red {
    background: linear-gradient(135deg, #e31e24, #b8151a);
    border: none;
    box-shadow: 0 14px 28px rgba(227, 30, 36, 0.35);
}

.stat-card--dark {
    background: linear-gradient(150deg, #1c1e24, #101114);
    border: none;
    box-shadow: 0 14px 28px rgba(16, 24, 40, 0.30);
}

.stat-card--red .stat-label,
.stat-card--red .stat-value,
.stat-card--red .stat-note,
.stat-card--dark .stat-value {
    color: #ffffff;
}

.stat-card--red .stat-note,
.stat-card--red .stat-label {
    opacity: 0.85;
}

.stat-card--dark .stat-label,
.stat-card--dark .stat-note {
    color: #aab0b9;
}

.stat-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-muted);
}

.stat-value {
    margin: 0.4rem 0;
}

.stat-note {
    color: var(--color-muted);
}

.panel-grid {
    margin-top: 2.5rem;
}

.panel-card {
    padding: 1.75rem;
    border-radius: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.08);
}

/* ============================================================
   Dynosport-style customer dashboard: header row, notice banner,
   "submitted tickets" card with colored tiles, action cards and
   a wide promo card — all in the light red/gray palette.
   ============================================================ */
.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Intake box (admin approval queue) */
.intake-card {
    border-left: 4px solid #f59e0b;
}

.intake-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.intake-card__ref {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.intake-card__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.intake-card__price {
    font-weight: 700;
    color: var(--color-primary, #e31e24);
}

.nav-badge {
    margin-left: 0.5rem;
}

/* Ticket chat (complaint / correction conversation) */
.chat-window {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 420px;
    overflow-y: auto;
    padding: 0.75rem;
    background: #f6f7f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}

.chat-empty {
    text-align: center;
    padding: 1.5rem 0;
}

.chat-msg {
    display: flex;
}

.chat-msg--own {
    justify-content: flex-end;
}

.chat-msg--other {
    justify-content: flex-start;
}

.chat-msg__bubble {
    max-width: 78%;
    padding: 0.55rem 0.8rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.chat-msg--own .chat-msg__bubble {
    background: #fdecec;
    border-color: rgba(227, 30, 36, 0.25);
    border-bottom-right-radius: 4px;
}

.chat-msg--other .chat-msg__bubble {
    border-bottom-left-radius: 4px;
}

.chat-msg__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.chat-msg__sender {
    font-weight: 600;
    font-size: 0.78rem;
}

.chat-msg__time {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6b7280);
}

.chat-msg__text {
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-msg--system {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #1e40af;
    font-size: 0.78rem;
    max-width: 92%;
}

.chat-input {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.chat-input .mud-input-control {
    flex: 1;
}

.chat-input .mud-button-root {
    margin-top: 0.5rem;
}

/* Follow-up ("duplicate") source-scope card on ticket detail */
.source-scope-card {
    border-left: 4px solid #3b82f6;
}

.dashboard-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    background: rgba(227, 30, 36, 0.07);
    border: 1px solid rgba(227, 30, 36, 0.25);
    margin-bottom: 1.5rem;
}

.dashboard-banner__icon {
    color: var(--color-accent);
}

.dashboard-banner__text {
    color: var(--color-text);
}

.dashboard-banner__btn {
    margin-left: auto;
    white-space: nowrap;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.dashboard-banner__btn:hover {
    background: #b8151a;
}

.files-card {
    margin-bottom: 1.5rem;
}

.files-card__head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.files-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eceef1;
    color: var(--color-accent);
    flex-shrink: 0;
}

.file-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.file-tile {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
}

.file-tile__label {
    font-size: 0.85rem;
    font-weight: 600;
}

.file-tile.stat-card--gray .file-tile__label {
    color: var(--color-text);
}

.file-tile.stat-card--red .file-tile__label,
.file-tile.stat-card--dark .file-tile__label {
    color: #ffffff;
}

.file-tile__count {
    align-self: flex-start;
    min-width: 2.2rem;
    text-align: center;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.file-tile.stat-card--gray .file-tile__count {
    background: #ffffff;
    color: var(--color-text);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.10);
}

.file-tile.stat-card--red .file-tile__count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.file-tile.stat-card--dark .file-tile__count {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.action-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
}

.action-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eceef1;
    color: var(--color-accent);
}

.action-card__icon--light {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.action-card__actions {
    margin-top: auto;
    padding-top: 0.75rem;
}

.action-card--accent {
    background: linear-gradient(135deg, #e31e24, #9e1116);
    border: none;
    box-shadow: 0 16px 32px rgba(227, 30, 36, 0.30);
}

.action-card--accent .mud-typography {
    color: #ffffff;
}

.action-card__btn-light {
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
}

.action-card__btn-light:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.promo-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
    overflow: hidden;
}

.promo-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1 1 55%;
}

.promo-card__badge {
    align-self: flex-start;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: rgba(227, 30, 36, 0.1);
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.promo-card__image {
    flex: 1 1 40%;
    max-width: 420px;
    min-width: 0;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.18);
}

/* Mini stats chart in the promo card (replaces the static photo). */
.promo-card__chart {
    flex: 1 1 45%;
    max-width: 460px;
    min-width: 0;
    padding: 1rem 1.25rem 0.5rem;
    background: #ffffff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.08);
}

@media (max-width: 900px) {
    .file-tiles {
        grid-template-columns: 1fr;
    }

    .promo-card {
        flex-direction: column;
        align-items: stretch;
    }

    .promo-card__image {
        max-width: none;
        height: 180px;
    }

    .promo-card__chart {
        max-width: none;
    }
}

/* Saved-vehicle cards on /vehicles. */
.vehicle-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
}

.vehicle-card__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.vehicle-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eceef1;
    color: var(--color-accent);
    flex-shrink: 0;
}

.vehicle-card__rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vehicle-card__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
}

.vehicle-card__row span {
    color: var(--color-muted);
}

.vehicle-card__row strong {
    text-align: right;
    word-break: break-word;
}

.vehicle-card__actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Monospace DTC code badge on /dtc. */
.dtc-code {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    background: #16181d;
    color: #ffffff;
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Knowledge-base expansion panels — flat list separated by hairlines. */
.kb-panels .mud-expand-panel {
    border-bottom: 1px solid var(--color-border);
}

/* Service status pill in the dark app bar (Dynosport's "Obsługa plików: online"). */
.service-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 1.25rem;
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.service-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.service-pill--online {
    background: rgba(29, 158, 87, 0.16);
    color: #4cd07d;
}

.service-pill--offline {
    background: rgba(227, 30, 36, 0.18);
    color: #f1666b;
}

/* Clickable top-bar schedule indicator ("Dziś do 22:00") — opens the file-service
   schedule dialog. Rendered as a <button> so it stays keyboard accessible. */
.service-pill--schedule {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: none;
    margin-left: 0.6rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.service-pill--schedule:hover {
    background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 700px) {
    .service-pill--schedule {
        display: none;
    }
}

/* Admin global search in the dark top bar — light glassy input so it reads well
   against the app-bar background. */
.global-search {
    width: 320px;
    margin-right: 1rem;
}

.global-search .mud-input-control-input-container .mud-input {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
}

.global-search input.mud-input-slot {
    color: #ffffff;
}

.global-search .mud-input-slot::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.global-search .mud-input-adornment .mud-icon-root,
.global-search .mud-icon-button .mud-icon-root {
    color: rgba(255, 255, 255, 0.7);
}

.global-search .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 960px) {
    .global-search {
        display: none;
    }
}

/* Customer order progress timeline (TicketProgress component). */
.ticket-progress {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0 0.25rem;
}

.ticket-progress__step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.ticket-progress__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6e8ec;
    color: #7a8089;
    font-size: 0.78rem;
    font-weight: 700;
    z-index: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.ticket-progress__label {
    margin-top: 0.35rem;
    text-align: center;
    color: #7a8089;
    line-height: 1.15;
    padding: 0 0.2rem;
}

.ticket-progress__bar {
    position: absolute;
    top: 14px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 3px;
    border-radius: 2px;
    background: #e6e8ec;
}

.ticket-progress__bar--done {
    background: var(--mud-palette-success, #1d9e57);
}

.ticket-progress__step--done .ticket-progress__dot {
    background: var(--mud-palette-success, #1d9e57);
    color: #fff;
}

.ticket-progress__step--done .ticket-progress__label {
    color: var(--mud-palette-success, #1d9e57);
}

.ticket-progress__step--active .ticket-progress__dot {
    background: var(--mud-palette-primary, #e31e24);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(227, 30, 36, 0.15);
}

.ticket-progress__step--active .ticket-progress__label {
    color: var(--mud-palette-primary, #e31e24);
    font-weight: 600;
}

.ticket-progress__step--warning .ticket-progress__dot {
    background: #f5a623;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.18);
}

.ticket-progress__step--warning .ticket-progress__label {
    color: #b97400;
    font-weight: 600;
}

@media (max-width: 600px) {
    .ticket-progress__label {
        font-size: 0.62rem;
    }
}

/* Maintenance-mode splash (MainLayout) shown to non-admins while the portal is locked. */
.maintenance-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 2rem;
}

.maintenance-splash__icon {
    font-size: 4.5rem !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    color: var(--mud-palette-primary, #e31e24);
}

.platform-card {
    margin-top: 2rem;
}

.platform-chips {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.panel-title {
    margin-bottom: 1rem;
}

/* Section heading that sits next to an info/help icon. Keeps the inline text
   on the same optical baseline as the icon button (which has its own 32px
   hit target) and carries the same margin-bottom as a standalone panel-title. */
.panel-title-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.panel-title-inline {
    margin: 0;
}

.panel-title-info-btn {
    padding: 4px !important;
}

.counter-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.panel-action {
    margin-top: 1.25rem;
}

.activity-list .mud-list-item {
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.35rem;
    background: var(--color-surface-2);
}

.activity-list .mud-list-item:last-child {
    margin-bottom: 0;
}

.muted-text {
    color: var(--color-muted);
}

.health-list {
    margin: 1rem 0 1.5rem;
}

.health-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 0.75rem;
    align-items: center;
}

.health-bar .mud-progress-linear {
    height: 8px;
}

.health-action {
    margin-top: 0.5rem;
}

.page-title {
    margin-bottom: 0.4rem;
}

.section-divider {
    margin: 1rem 0 1.5rem;
    border-color: var(--color-border);
}

.data-table {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
}

.data-table .mud-table-head {
    background: var(--color-surface-2);
}

/* Tickets list: fixed column layout so the table always fits the viewport width
   with no horizontal scrollbar. Long content (customer e-mails, vehicle names,
   ticket ids) wraps inside its column instead of stretching the table. Only
   applies on desktop — below 960px MudTable stacks rows as cards anyway. */
@media (min-width: 961px) {
    .tickets-table table {
        table-layout: fixed;
        width: 100%;
    }

    .tickets-table .mud-table-cell,
    .tickets-table .mud-table-head-cell {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .tickets-table .mud-table-cell {
        font-size: 0.85rem;
    }

    .tickets-table .mud-chip {
        height: auto;
        min-height: 22px;
        padding: 0.1rem 0.5rem;
        font-size: 0.72rem;
        margin: 1px 2px 1px 0;
    }
}

.data-table .mud-table-row:hover {
    background: rgba(227, 30, 36, 0.05);
}

/* Compact cell gutters — base defaults are fine on wide screens; we tighten
   progressively at narrower viewports so dense columns don't crowd each
   other. MudTable already stacks rows as cards on small screens via
   DataLabel, so the 600px rules target the stacked layout's inner padding. */
.data-table .mud-table-cell,
.data-table .mud-table-head-cell {
    padding: 0.45rem 0.7rem;
}

@media (max-width: 960px) {
    .data-table .mud-table-cell,
    .data-table .mud-table-head-cell {
        padding: 0.4rem 0.55rem;
        font-size: 0.85rem;
    }

    .data-table .mud-button {
        padding: 0.25rem 0.55rem;
        font-size: 0.8rem;
    }

    .data-table .mud-chip {
        height: auto;
        padding: 0.1rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {
    .data-table .mud-table-cell,
    .data-table .mud-table-head-cell {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Stacked/card rows: tighten the gap between cells and the row margin so
       a single ticket/user/invoice row stays on one thumb-scroll. */
    .data-table .mud-table-row {
        margin-bottom: 0.35rem;
    }

    .data-table .mud-table-row .mud-table-cell[data-label]::before {
        font-size: 0.7rem;
    }
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 0;
}

.dashboard-hero {
    margin-bottom: 2rem;
}

.dashboard-select {
    margin-top: 0.5rem;
}

.dashboard-action {
    height: 56px;
}

.dashboard-tabs {
    margin-top: 2rem;
}

.file-list .file-item,
.chat-list .chat-item {
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.3rem;
    background: var(--color-surface-2);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.file-list .file-item:last-child,
.chat-list .chat-item:last-child {
    margin-bottom: 0;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    background: var(--color-surface-2);
}

.activity-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.file-text,
.chat-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Dynosport-style full-screen split login: dark branding panel on the left
   (logo + tagline anchored low, like the Dynosport photo panel), clean white
   column with the form on the right. */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 40%) 1fr;
}

.auth-aside {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 3rem 2.5rem 4rem;
    color: #f2f3f5;
    background-color: #0f1114;
    overflow: hidden;
}

/* Crossfading photo slideshow (truck / agri / OHW / electronics). Each slide
   fades in for ~6s of a 24s loop; delays are staggered per slide. */
.auth-aside__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.auth-aside__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: auth-slide-fade 24s infinite;
}

.auth-aside__slide:nth-child(1) { animation-delay: 0s; }
.auth-aside__slide:nth-child(2) { animation-delay: 6s; }
.auth-aside__slide:nth-child(3) { animation-delay: 12s; }
.auth-aside__slide:nth-child(4) { animation-delay: 18s; }

@keyframes auth-slide-fade {
    0% { opacity: 0; }
    5% { opacity: 1; }
    25% { opacity: 1; }
    33% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-aside__slide {
        animation: none;
    }
    .auth-aside__slide:first-child {
        opacity: 1;
    }
}

/* Dark + red-tinted overlays above the slides so the white logo and text stay
   readable on any photo. */
.auth-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(200deg, rgba(227, 30, 36, 0.16), transparent 45%),
        linear-gradient(180deg, rgba(10, 11, 14, 0.25) 0%, rgba(10, 11, 14, 0.35) 55%, rgba(10, 11, 14, 0.82) 100%);
    pointer-events: none;
}

.auth-aside__content {
    max-width: 380px;
    position: relative;
    z-index: 2;
}

.auth-aside__logo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.auth-aside__tagline {
    color: #ffffff;
    letter-spacing: 0.04em;
}

.auth-aside__description {
    margin-top: 0.75rem;
    color: #aab0b9;
}

.auth-main {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
}

.auth-main__top {
    display: flex;
    justify-content: flex-end;
    padding: 1.25rem 2rem 0;
}

.auth-main__body {
    flex: 1;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
}

.auth-title {
    margin-bottom: 0.35rem;
}

/* MudDivider defaults to flex-grow inside a flex column — pin it so it never
   swallows the vertical space between the heading and the form. */
.auth-main__body .mud-divider {
    flex-grow: 0;
}

.native-form__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.native-form__forgot {
    font-size: 0.82rem;
    font-weight: 500;
}

.native-form {
    margin-top: 1rem;
}

/* FocusOnNavigate lands on the page heading for screen readers — keep the focus
   programmatic but hide the visible ring on the auth title. */
.auth-title:focus,
.auth-title:focus-visible {
    outline: none;
}

/* Two-up field row on the register panel; collapses to one column on phones. */
.native-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .native-form__row {
        grid-template-columns: 1fr;
    }
}

.native-form__hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.native-form__captcha {
    margin: 0.35rem 0 0.1rem;
    min-height: 78px;
}

.native-form__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.2rem;
    cursor: pointer;
}

/* Company-account toggle: pure CSS reveal. The hidden checkbox is a *sibling* of the
   .native-form__company block so :checked ~ works without any JS or Blazor re-render. */
.native-check__box {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.native-check__label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.55rem 0 0.15rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.native-check__mark {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid #c3c8d0;
    border-radius: 4px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.native-check__box:checked + .native-check__label .native-check__mark {
    background: var(--color-primary, #d32f2f);
    border-color: var(--color-primary, #d32f2f);
}

.native-check__box:checked + .native-check__label .native-check__mark::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.native-form__company {
    display: none;
}

.native-check__box:checked ~ .native-form__company {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.35rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fafbfc;
}

.native-form__section {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

/* Sign-in <-> register toggle under the form (Dynosport-style). */
.auth-switch {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.auth-switch:hover {
    text-decoration: underline;
}

.auth-back {
    margin-top: 2.5rem;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-aside {
        align-items: center;
        padding: 2rem 1.5rem;
    }

    .auth-aside__logo {
        max-width: 220px;
    }
}

/* Still used by ForgotPassword / ResetPassword / AccountDeleted cards. */
.login-card {
    height: 100%;
}

.login-form {
    margin-top: 0.5rem;
}

.login-error {
    margin-top: 0.5rem;
}

.native-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.native-form__label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.native-form__input {
    padding: 0.625rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    outline: none;
}

.native-form__input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(227, 30, 36, 0.2);
}

.native-form__button {
    padding: 0.625rem 1rem;
    border-radius: 4px;
    border: none;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
    cursor: pointer;
    font: inherit;
}

.native-form__button:hover {
    filter: brightness(1.05);
}

.empty-state {
    text-align: center;
}

.empty-action {
    margin-top: 1.5rem;
}

.error-alert {
    margin-bottom: 1.25rem;
}

.request-id {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

#blazor-error-ui {
    background: var(--color-ink);
    color: #f7f7f7;
    bottom: 0;
    box-shadow: 0 -1px 10px rgba(16, 24, 40, 0.25);
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
}

#blazor-error-ui .dismiss:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Skip-to-main link: hidden until focused (keyboard users), then surfaces at the top
   of the viewport with high-contrast styling so screen-reader and keyboard users can
   jump past the app bar / drawer. */
.skip-to-main {
    background: var(--color-accent);
    color: #ffffff;
    font-weight: 600;
    left: 0.5rem;
    padding: 0.5rem 0.9rem;
    position: fixed;
    top: 0.5rem;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform 120ms ease-out;
    z-index: 2000;
}

.skip-to-main:focus,
.skip-to-main:focus-visible {
    color: #ffffff;
    transform: translateY(0);
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

/* Don't render a focus ring when the main landmark receives focus
   programmatically via FocusOnNavigate — it's not an interactive element.
   Keyed on the id so the rule survives any MudMainContent tag swap (today the
   component renders a <main> element; in the future it might render a <div>
   with role=main, and we'd still want this rule to apply to #main-content). */
[id="main-content"]:focus {
    outline: none;
}

@keyframes rise {
    from {
        transform: translateY(12px);
        opacity: 0.6;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .landing-app-bar__inner {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .landing-hero {
        padding: 2rem 1.5rem;
    }

    .landing-hero__grid {
        grid-template-columns: 1fr;
    }

    .landing-hero__image {
        max-width: 240px;
    }

    .landing-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .health-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .user-meta {
        display: none;
    }

    .user-panel {
        gap: 0.4rem;
        margin-right: 0.5rem;
    }
}

/* Chip + badge text containment. Long status labels (e.g. "PendingSurcharge",
   "NeedsAttention") would otherwise overflow the pill boundary in tight columns.
   Cap at the parent width and ellipsize the inner label — MudBlazor's v7 chip
   uses white-space: nowrap internally so overflow is horizontal. Covers both
   MudChip (inline pills) and MudBadge (numeric overlay). */
.mud-chip {
    max-width: 100%;
    min-width: 0;
}

.mud-chip .mud-chip-label,
.mud-chip .mud-chip-content,
.mud-chip > span:not(.mud-icon-root) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mud-badge .mud-badge {
    max-width: calc(100% - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bullet list used inside the admin settings info guides. Slightly tighter
   than a raw <ul>, with code spans styled to hint "copy this literal". */
.settings-guide-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.settings-guide-list li {
    margin-bottom: 0.25rem;
}

.settings-guide-list code {
    padding: 0 0.3em;
    border-radius: 3px;
    background: rgba(16, 24, 40, 0.07);
    font-size: 0.85em;
}

/* ============================================================
   Dynosport-style landing structure in the portal's light palette:
   white background, gray shadows, red accents. Only the top app bar
   stays black (keeps the white TEST DRIVE logo readable).
   ============================================================ */
.landing-login-pill {
    background: #ffffff !important;
    color: #101114 !important;
    border-radius: 999px !important;
    padding: 0.35rem 1.4rem !important;
    font-weight: 600;
    margin-left: 0.5rem;
}

.landing-login-pill:hover {
    background: #e9ebee !important;
}

/* Hero: centered, oversized gradient heading like the Dynosport hero. */
.landing-hero2 {
    text-align: center;
    padding: 4rem 1rem 3rem;
}

.landing-hero2__title {
    margin: 0.75rem auto 1rem;
    max-width: 900px;
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 700;
    line-height: 1.12;
    background: linear-gradient(180deg, #16181d 20%, #767c85 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-hero2__subtitle {
    color: var(--color-muted);
    max-width: 620px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
}

.landing-hero2__actions {
    margin-top: 1.9rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.landing-pill {
    border-radius: 999px !important;
    padding: 0.5rem 1.7rem !important;
}

.landing-pill--ghost {
    border-color: rgba(16, 24, 40, 0.25) !important;
    color: var(--color-text) !important;
}

.landing-pill--ghost:hover {
    border-color: rgba(16, 24, 40, 0.5) !important;
    background: rgba(16, 24, 40, 0.04) !important;
}

/* Glow panel wrapping the showcase card — soft red spots on a light gray
   plate (Dynosport's teal/orange glows, in the portal palette). */
.landing-glow {
    border-radius: 28px;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        radial-gradient(520px 340px at 6% 92%, rgba(227, 30, 36, 0.28), transparent 65%),
        radial-gradient(520px 340px at 96% 42%, rgba(227, 30, 36, 0.18), transparent 62%),
        radial-gradient(420px 280px at 60% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
        #eceef1;
    overflow: hidden;
}

.landing-showcase {
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 26px 52px rgba(16, 24, 40, 0.22);
    max-width: 880px;
    margin: 0 auto;
}

.landing-showcase__image {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: cover;
}

/* Hero slideshow — same photo set and crossfade rhythm as the login aside. */
.landing-showcase__slides {
    position: relative;
    width: 100%;
    height: 380px;
}

.landing-showcase__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: auth-slide-fade 24s infinite;
}

.landing-showcase__slide:nth-child(1) { animation-delay: 0s; }
.landing-showcase__slide:nth-child(2) { animation-delay: 6s; }
.landing-showcase__slide:nth-child(3) { animation-delay: 12s; }
.landing-showcase__slide:nth-child(4) { animation-delay: 18s; }

@media (prefers-reduced-motion: reduce) {
    .landing-showcase__slide {
        animation: none;
    }
    .landing-showcase__slide:first-child {
        opacity: 1;
    }
}

.landing-showcase__quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.landing-quote {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
}

.landing-quote__stars {
    color: var(--color-accent);
    letter-spacing: 2px;
    font-size: 0.8rem;
}

.landing-quote .mud-typography {
    color: var(--color-text);
    font-style: italic;
}

/* Landing sections: white surfaces from the base styles, with centered,
   oversized gradient headings like Dynosport. */
.landing-layout .landing-section {
    background: var(--color-surface);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.07);
    margin-top: 4rem;
}

.landing-layout .landing-section__title {
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    background: linear-gradient(180deg, #16181d 20%, #767c85 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-layout .landing-section > .mud-typography-body2 {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .landing-showcase__image {
        height: 240px;
    }

    .landing-showcase__slides {
        height: 240px;
    }

    .landing-showcase__quotes {
        grid-template-columns: 1fr;
    }
}

/* Legal footer (landing + auth pages) */
.site-footer {
    margin-top: 4rem;
    padding: 1.25rem 1rem 1.5rem;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
}

.site-footer__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #6b7280);
}

.site-footer__links a {
    color: inherit;
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--color-primary, #d32f2f);
    text-decoration: underline;
}

.site-footer__sep {
    margin: 0 0.4rem;
}

.site-footer--compact {
    margin-top: 1.5rem;
    border-top: none;
    padding: 0;
}

/* Dynosport-style link columns above the legal line (landing variant only). */
.site-footer__columns {
    max-width: 1120px;
    margin: 0 auto 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    padding-top: 0.5rem;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
}

.site-footer__col a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.site-footer__col a:hover {
    color: var(--color-primary, #d32f2f);
    text-decoration: underline;
    opacity: 1;
}

.site-footer__col-title {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 0.2rem;
}

/* Subtle social icons in the legal line — muted by default, brand-red on hover. */
.site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.site-footer__social .mud-icon-button {
    color: rgba(16, 24, 40, 0.45);
}

.site-footer__social .mud-icon-button:hover {
    color: var(--color-primary, #d32f2f);
}

/* Cookie consent banner */
.cookie-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    z-index: 1500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    max-width: min(720px, calc(100vw - 2rem));
    padding: 0.9rem 1.2rem;
    border-radius: 12px;
    background: #16181d;
    color: #f3f4f6;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.35);
    font-size: 0.85rem;
}

.cookie-banner__text {
    flex: 1 1 320px;
    line-height: 1.4;
}

.cookie-banner__link {
    color: #f87171;
    margin-left: 0.35rem;
}

/* Long legal texts: keep readable line lengths */
.legal-page {
    max-width: 920px;
    margin: 2rem auto;
}

/* ── Ticket wizard (Dynosport-style two-step form) ─────────────────── */
.wizard-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wizard-step:hover {
    border-color: #d1d5db;
}

.wizard-step--active {
    border-color: #dc2626;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.12);
}

.wizard-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 34px;
    font-weight: 700;
    background: #f3f4f6;
    color: #6b7280;
}

.wizard-step--active .wizard-step__num {
    background: #dc2626;
    color: #ffffff;
}

.wizard-step--done .wizard-step__num {
    background: #16181d;
    color: #ffffff;
}

.wizard-step__title {
    line-height: 1.2;
}

@media (max-width: 640px) {
    .wizard-steps {
        grid-template-columns: 1fr;
    }
}

/* Large drag/drop-style upload panel */
.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 220px;
    padding: 1.5rem;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #fafafa;
    text-align: center;
}

.upload-dropzone__icon {
    color: #9ca3af;
}

/* Segmented two-value toggle (file type, transmission, master/slave tool) */
.toggle-pair {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.toggle-pair__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.toggle-pair__btn:hover {
    border-color: #d1d5db;
}

.toggle-pair__btn--active {
    border-color: #dc2626;
    background: #fef2f2;
    color: #b91c1c;
}

/* Stage picker rows */
.stage-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stage-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stage-row:hover {
    border-color: #d1d5db;
}

.stage-row--selected {
    border-color: #dc2626;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.1);
}

.stage-row__body {
    flex: 1;
    min-width: 0;
}

.stage-row__note {
    display: block;
    margin-top: 0.35rem;
    color: #b45309;
}

/* Option checkbox label (names only; prices show in the estimated total) */
.option-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.option-label__name {
    font-weight: 500;
}

/* Sticky price summary card on step 2 */
.price-panel {
    position: sticky;
    top: 84px;
}

.price-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    margin: -0.25rem -0.25rem 0.75rem;
    border-radius: 10px;
    background: #16181d;
    color: #ffffff;
}

.price-panel__header .mud-icon-root {
    color: #f87171;
}

.price-panel__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
}

.price-panel__total {
    color: #dc2626;
    font-weight: 800;
}


/* Price matrix: hidden-service cells stay clickable (eye adornment) but the
   value itself looks muted. Opacity goes on the <input> only, so the eye icon
   keeps full contrast. */
.matrix-cell-hidden input {
    opacity: 0.4;
    text-decoration: line-through;
}