:root {
    --va-bg: #f7f1e8;
    --va-surface: #fffdf9;
    --va-surface-soft: #f1e8dc;
    --va-text: #252321;
    --va-muted: #6f6a64;
    --va-border: #ded3c6;
    --va-accent: #9b4a3c;
    --va-accent-strong: #713126;
    --va-player-surface: #17191d;
    --va-success: #287a52;
    --va-warning: #a56616;
    --va-danger: #b23434;
    --va-radius-sm: 10px;
    --va-radius-md: 16px;
    --va-radius-lg: 24px;
    --va-radius-xl: 32px;
    --va-shadow-card: 0 18px 50px rgba(62, 45, 32, .12);
    --va-control-height: 44px;
    --va-content-width: 1180px;
    --va-bottom-nav-height: 68px;
    --va-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

:where(.va-public-page) {
    margin: 0;
    background: var(--va-bg);
    color: var(--va-text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

:where(.va-public-page, .va-public-header, .va-public-footer, .va-mobile-bottom-nav) *,
:where(.va-public-page, .va-public-header, .va-public-footer, .va-mobile-bottom-nav) *::before,
:where(.va-public-page, .va-public-header, .va-public-footer, .va-mobile-bottom-nav) *::after {
    box-sizing: border-box;
}

:where(.va-public-page, .va-public-header, .va-public-footer, .va-mobile-bottom-nav) a {
    text-underline-offset: .18em;
}

:where(.va-public-page, .va-public-header, .va-public-footer, .va-mobile-bottom-nav) :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--va-accent) 72%, white);
    outline-offset: 3px;
}

:where(.va-public-page) img {
    max-width: 100%;
    height: auto;
}

.va-container {
    width: min(var(--va-content-width), 100%);
    margin-inline: auto;
    padding-inline: clamp(14px, 3vw, 24px);
}

.va-card {
    border: 1px solid var(--va-border);
    border-radius: var(--va-radius-lg);
    background: var(--va-surface);
    color: var(--va-text);
    box-shadow: var(--va-shadow-card);
}

.va-button {
    min-height: var(--va-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid var(--va-border);
    border-radius: 999px;
    background: var(--va-surface);
    color: var(--va-text);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.va-button--primary {
    border-color: var(--va-accent);
    background: var(--va-accent);
    color: #fff;
}

.va-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--va-surface-soft);
    color: var(--va-muted);
    font-size: .78rem;
    font-weight: 800;
}

:where(.va-public-page) :where(input, select, textarea, button) {
    font: inherit;
}

:where(.va-public-page) :where(input, select, textarea) {
    min-height: var(--va-control-height);
    border: 1px solid var(--va-border);
    border-radius: var(--va-radius-md);
    background: var(--va-surface);
    color: var(--va-text);
}

.va-public-header.topbar {
    background: rgba(255, 253, 249, .94);
    border-bottom-color: var(--va-border);
    color: var(--va-text);
    box-shadow: 0 8px 28px rgba(62, 45, 32, .08);
}

.va-public-header.topbar .brand {
    color: var(--va-text);
}

.va-public-header.topbar .brand-mark {
    background: linear-gradient(135deg, var(--va-accent), var(--va-accent-strong));
    box-shadow: 0 12px 28px rgba(113, 49, 38, .22);
}

.va-public-header .va-public-nav .btn,
.va-public-header .va-public-nav button.btn {
    min-height: var(--va-control-height);
    border-color: var(--va-border);
    background: var(--va-surface);
    color: var(--va-text);
    font-size: 14px;
}

.va-public-header .va-public-nav .btn:hover,
.va-public-header .va-public-nav button.btn:hover {
    border-color: var(--va-accent);
    background: var(--va-surface-soft);
    color: var(--va-accent-strong);
}

.va-public-header .va-public-nav .btn.is-active {
    border-color: var(--va-accent);
    background: var(--va-accent);
    color: #fff;
}

.va-public-header .va-header-icon {
    width: var(--va-control-height);
    height: var(--va-control-height);
    border-color: var(--va-border);
    background: var(--va-surface);
    color: var(--va-text);
}

.va-public-header .va-header-icon:hover {
    border-color: var(--va-accent);
    background: var(--va-surface-soft);
}

.va-public-header .va-language-dropdown {
    border-color: var(--va-border);
    background: var(--va-surface);
    box-shadow: var(--va-shadow-card);
}

.va-public-header .va-language-option {
    min-height: var(--va-control-height);
    color: var(--va-text);
}

.va-public-header .va-language-option:hover {
    border-color: var(--va-border);
    background: var(--va-surface-soft);
}

.va-public-footer.voxaudio-footer {
    border-top-color: var(--va-border);
    background: var(--va-surface);
    color: var(--va-muted);
}

.va-public-footer .voxaudio-footer-inner {
    width: min(var(--va-content-width), 100%);
}

.va-public-footer .voxaudio-footer-brand,
.va-public-footer .voxaudio-footer-links a {
    color: var(--va-text);
}

.va-public-footer .voxaudio-footer-links a:hover {
    color: var(--va-accent-strong);
}

.va-public-footer .voxaudio-footer-copy,
.va-public-footer .va-public-footer-version {
    color: var(--va-muted);
}

.va-mobile-bottom-nav,
.va-mobile-bottom-nav-spacer {
    display: none;
}

@media (max-width: 768px) {
    .va-mobile-bottom-nav {
        position: fixed;
        z-index: 95;
        right: 0;
        bottom: 0;
        left: 0;
        min-height: calc(var(--va-bottom-nav-height) + var(--va-safe-area-bottom));
        padding: 6px 6px calc(6px + var(--va-safe-area-bottom));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        border-top: 1px solid var(--va-border);
        background: rgba(255, 253, 249, .97);
        box-shadow: 0 -10px 30px rgba(62, 45, 32, .12);
        backdrop-filter: blur(16px);
    }

    .va-mobile-bottom-nav-spacer {
        height: calc(var(--va-bottom-nav-height) + var(--va-safe-area-bottom));
        display: block;
    }

    .va-mobile-bottom-nav__link {
        min-width: 0;
        min-height: 52px;
        padding: 5px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: var(--va-radius-sm);
        color: var(--va-muted);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
    }

    .va-mobile-bottom-nav__link:hover,
    .va-mobile-bottom-nav__link.is-active {
        background: var(--va-surface-soft);
        color: var(--va-accent-strong);
    }

    .va-mobile-bottom-nav__icon {
        font-size: 19px;
        line-height: 1;
    }
}

@media (min-width: 981px) {
    .va-public-header .va-public-nav {
        gap: 9px;
    }
}