:root {
    --default-font: "Roboto", "Segoe UI", sans-serif;
    --heading-font: "Raleway", "Segoe UI", sans-serif;
    --nav-font: "Poppins", "Segoe UI", sans-serif;
    --background-color: var(--freight-brand-color-surface-base, #ffffff);
    --surface-color: var(--freight-brand-color-surface-base, #ffffff);
    --section-background: var(--freight-brand-color-primary-wash, #f8f4ef);
    --default-color: var(--freight-brand-color-text-muted, #5f544d);
    --heading-color: var(--freight-brand-color-text-strong, #2f241d);
    --muted-color: var(--freight-brand-color-text-muted, #7d726b);
    --border-color: var(--freight-brand-color-border-subtle, #eadfd4);
    --accent-color: var(--freight-brand-color-primary, #c86f2a);
    --accent-color-strong: var(--freight-brand-color-primary-strong, #a95a1b);
    --accent-color-rgb: 200, 111, 42;
    --contrast-color: var(--freight-brand-color-surface-base, #ffffff);
    --nav-color: #3b312b;
    --nav-hover-color: var(--accent-color);
    --landing-border-rgb: 63, 49, 37;
    --landing-shadow-rgb: 41, 31, 23;
    --landing-header-surface: rgba(255, 252, 247, 0.94);
    --landing-header-shadow: 0 12px 30px rgba(var(--landing-border-rgb), 0.12);
    --landing-session-surface: rgba(255, 252, 247, 0.82);
    --landing-session-shadow: 0 12px 28px rgba(var(--landing-shadow-rgb), 0.08);
    --landing-shell-surface: rgba(255, 255, 255, 0.88);
    --landing-card-surface-soft: rgba(255, 255, 255, 0.84);
    --landing-card-surface-strong: rgba(255, 255, 255, 0.92);
    --landing-panel-surface: rgba(250, 245, 238, 0.94);
    --landing-panel-surface-soft: rgba(250, 245, 238, 0.82);
    --landing-card-shadow: 0 28px 80px rgba(var(--landing-shadow-rgb), 0.12);
    --landing-border-subtle: rgba(var(--landing-border-rgb), 0.08);
    --landing-border-default: rgba(var(--landing-border-rgb), 0.1);
    --landing-border-strong: rgba(var(--landing-border-rgb), 0.14);
    --landing-border-input: rgba(var(--landing-border-rgb), 0.16);
    --landing-border-emphasis: rgba(var(--landing-border-rgb), 0.28);
    --landing-copy-color: rgba(58, 45, 33, 0.82);
    --landing-copy-muted: rgba(58, 45, 33, 0.72);
    --landing-page-gradient: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(248, 243, 236, 0.96) 100%);
    --landing-page-surface-soft: rgba(255, 252, 247, 0.95);
    --landing-input-disabled: rgba(246, 241, 234, 0.92);
    --landing-input-disabled-strong: rgba(244, 238, 230, 0.96);
    --landing-success-border: rgba(58, 119, 92, 0.2);
    --landing-success-surface: rgba(236, 248, 242, 0.92);
    --landing-success-text: #275842;
    --landing-warning-border: rgba(181, 108, 31, 0.28);
    --landing-warning-surface: rgba(255, 244, 224, 0.9);
    --landing-warning-text: #7d4b16;
    --landing-danger-border: rgba(156, 63, 29, 0.22);
    --landing-danger-border-soft: rgba(156, 63, 29, 0.18);
    --landing-danger-surface: rgba(255, 241, 236, 0.92);
    --landing-danger-surface-strong: rgba(255, 232, 224, 0.98);
    --landing-danger-text: #6a2f16;
    --landing-danger-text-strong: #7a3518;
}

html {
    scroll-behavior: smooth;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--default-color);
    font-family: var(--default-font);
    background: var(--background-color);
}

.landing-shell__main:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
}

a {
    color: inherit;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

img {
    max-width: 100%;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(var(--accent-color-rgb), 0.35);
    outline-offset: 3px;
}

.landing-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.validation-message {
    color: #b42318;
}

.landing-transition {
    min-height: calc(100vh - 5rem);
    padding-top: 140px;
    padding-bottom: 88px;
    background:
        radial-gradient(circle at top left, rgba(var(--accent-color-rgb), 0.16), transparent 34%),
    var(--landing-page-gradient);
}

.landing-transition__shell {
    display: grid;
    gap: 1.25rem;
    max-width: 52rem;
    padding: 2rem;
}

.landing-transition__progress {
    width: min(100%, 24rem);
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--landing-border-subtle);
}

.landing-transition__progress-bar {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--accent-color-rgb), 0.38), rgba(var(--accent-color-rgb), 0.9));
    animation: landing-transition-progress 1.2s ease-in-out infinite;
}

.landing-transition__skeleton {
    display: grid;
    gap: 0.85rem;
}

.landing-transition__line {
    display: block;
    height: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--landing-border-subtle), rgba(255, 255, 255, 0.82), var(--landing-border-subtle));
    background-size: 200% 100%;
    animation: landing-transition-shimmer 1.35s linear infinite;
}

.landing-transition__line--short {
    width: min(100%, 10rem);
}

.landing-transition__line--long {
    width: min(100%, 22rem);
}

@keyframes landing-transition-progress {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(260%);
    }
}

@keyframes landing-transition-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 991.98px) {
    .landing-transition {
        padding-top: 122px;
        padding-bottom: 72px;
    }

    .landing-transition__shell {
        padding: 1.6rem;
    }
}

.landing-error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(circle at top left, rgba(var(--accent-color-rgb), 0.16), transparent 24rem),
        radial-gradient(circle at bottom right, rgba(63, 49, 37, 0.12), transparent 22rem),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(245, 239, 231, 0.98) 100%);
}

.landing-error-card {
    width: min(100%, 42rem);
    padding: 2.25rem;
    border: 1px solid var(--landing-border-subtle);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 56px rgba(var(--landing-border-rgb), 0.12);
}

.landing-error-card h1 {
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.landing-error-card p {
    margin-bottom: 0;
    line-height: 1.65;
}

.landing-error-card__help {
    margin-top: 1rem;
    color: var(--muted-color);
}

.landing-error-card__reference {
    display: grid;
    gap: 0.35rem;
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(var(--accent-color-rgb), 0.18);
    border-radius: 1rem;
    background: rgba(255, 249, 242, 0.92);
}

.landing-error-card__reference-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-color);
}

.landing-error-card__reference-code {
    color: var(--heading-color);
    font-size: 1rem;
    letter-spacing: 0.05em;
    word-break: break-word;
}

.landing-error-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.landing-error-card__primary,
.landing-error-card__secondary,
.landing-shell-fallback__primary,
.landing-shell-fallback__secondary,
.landing-host-status__primary,
.landing-host-status__secondary,
.landing-reconnect__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.8rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.landing-error-card__primary,
.landing-shell-fallback__primary,
.landing-host-status__primary,
.landing-reconnect__primary {
    border: 0;
    color: var(--contrast-color);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-strong));
    box-shadow: 0 16px 30px rgba(var(--accent-color-rgb), 0.22);
}

.landing-error-card__secondary,
.landing-shell-fallback__secondary,
.landing-host-status__secondary,
.landing-reconnect__secondary {
    color: var(--heading-color);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--landing-border-strong);
}

.landing-shell-fallback__secondary,
.landing-error-card__secondary,
.landing-host-status__secondary,
.landing-reconnect__secondary {
    color: var(--freight-brand-color-text-strong, #1f1a17);
}

.landing-shell-fallback__secondary:hover,
.landing-error-card__secondary:hover,
.landing-host-status__secondary:hover,
.landing-reconnect__secondary:hover {
    color: var(--freight-brand-color-text-strong, #1f1a17);
    background: rgba(255, 255, 255, 0.96);
}

.landing-shell-fallback {
    min-height: calc(100vh - 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8.5rem 1.25rem 4rem;
}

.landing-shell-fallback__panel {
    width: min(100%, 48rem);
    padding: 2.2rem;
    border: 1px solid rgba(var(--accent-color-rgb), 0.14);
    border-radius: 1.75rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 247, 241, 0.98) 100%);
    box-shadow: 0 24px 56px rgba(var(--landing-border-rgb), 0.12);
}

.landing-shell-fallback__kicker,
.landing-host-status__kicker,
.landing-reconnect__kicker {
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color-strong);
}

.landing-shell-fallback__title,
.landing-host-status__card h2,
.landing-reconnect__card h2 {
    margin-bottom: 0.9rem;
    color: var(--heading-color);
}

.landing-shell-fallback__text,
.landing-host-status__text,
.landing-reconnect__message {
    margin: 0;
    line-height: 1.7;
    color: var(--default-color);
}

.landing-shell-fallback__actions,
.landing-host-status__actions,
.landing-reconnect__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

#blazor-error-ui {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    padding: 1.5rem;
    background: rgba(33, 25, 19, 0.46);
}

#blazor-error-ui[style*="display: block"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.landing-host-status__card,
.landing-reconnect__card {
    width: min(100%, 36rem);
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.98) 0%, rgba(247, 240, 232, 0.98) 100%);
    box-shadow: 0 32px 64px rgba(33, 25, 19, 0.26);
}

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(41, 32, 24, 0.34);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.landing-reconnect__message {
    display: none;
}

#components-reconnect-modal[data-reconnect-state="show"] .landing-reconnect__message--show,
#components-reconnect-modal[data-reconnect-state="retrying"] .landing-reconnect__message--retrying,
#components-reconnect-modal[data-reconnect-state="failed"] .landing-reconnect__message--failed,
#components-reconnect-modal[data-reconnect-state="rejected"] .landing-reconnect__message--rejected {
    display: block;
}

.landing-reconnect__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.8rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .landing-error-card,
    .landing-shell-fallback__panel,
    .landing-host-status__card,
    .landing-reconnect__card {
        padding: 1.5rem;
        border-radius: 1.25rem;
    }

    .landing-shell-fallback {
        padding-top: 7rem;
    }

    .landing-error-card__actions,
    .landing-shell-fallback__actions,
    .landing-host-status__actions,
    .landing-reconnect__actions {
        flex-direction: column;
    }

    .landing-error-card__primary,
    .landing-error-card__secondary,
    .landing-shell-fallback__primary,
    .landing-shell-fallback__secondary,
    .landing-host-status__primary,
    .landing-host-status__secondary,
    .landing-reconnect__primary,
    .landing-reconnect__secondary {
        width: 100%;
    }
}