/* =====================================================================
   VEYLMU admin panel theme ("Beyond the Veil. Beyond Limits.").
   Loaded after all OpenMU stylesheets by Components/Branding/BrandHead.razor,
   so it only overrides tokens and a few component rules; OpenMU's own CSS
   stays untouched. Dark is the default theme, light keeps working.
   Tokens match website/wwwroot/style.css. See VEYLMU-BRANDING.md.
   ===================================================================== */

/* === BRAND TOKENS (both themes) ===
   The accent shades are overridden by an inline style when another accent
   color is configured (AdminPanel:Branding:AccentColor, see AccentPalette.cs). */
:root {
    --vm-accent: #8f7bff;              /* glow, icons, chart, active states */
    --vm-accent-rgb: 143, 123, 255;
    --vm-accent-hi: #c9c0ff;           /* links and text on dark backgrounds */
    --vm-accent-hi-rgb: 201, 192, 255;
    --vm-accent-strong: #6a57e3;       /* solid fills with white text (5.1:1), text on light backgrounds */
    --vm-accent-strong-rgb: 106, 87, 227;
    --vm-accent-deep: #5a48d4;         /* hover/active of solid fills */
    --vm-accent-deep-rgb: 90, 72, 212;

    --vm-night: #09090e;
    --vm-bg: #0b0a10;
    --vm-text: #e7e7ee;
    --vm-muted: #a3a2b4;
    --vm-heading: #f2f0ff;
    --vm-sidebar-text: #c9c7d8;

    --vm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vm-font-head: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* === BOOTSTRAP + OPENMU TOKENS: shared by both themes === */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-body-font-family: var(--vm-font);
    --bs-font-sans-serif: var(--vm-font);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-focus-ring-color: rgba(var(--vm-accent-rgb), 0.35);

    /* The sidebar is VEYLMU-dark in both themes (the emblem only works on dark). */
    --omu-sidebar-gradient:
        radial-gradient(140% 32% at 0% 0%, rgba(var(--vm-accent-rgb), 0.2), transparent 70%),
        linear-gradient(180deg, #110f1b 0%, #0a0910 100%);
    --omu-nav-link: var(--vm-sidebar-text);
    --omu-link-primary: var(--vm-accent-strong);
    --omu-link-primary-border: var(--vm-accent-deep);
}

/* === LIGHT THEME: violet accent on light surfaces === */
:root,
[data-bs-theme=light] {
    --bs-primary: var(--vm-accent-strong);
    --bs-primary-rgb: var(--vm-accent-strong-rgb);
    --bs-primary-text-emphasis: #352a8a;
    --bs-primary-bg-subtle: #eeebff;
    --bs-primary-border-subtle: #d2cbff;
    --bs-link-color: var(--vm-accent-strong);
    --bs-link-color-rgb: var(--vm-accent-strong-rgb);
    --bs-link-hover-color: var(--vm-accent-deep);
    --bs-link-hover-color-rgb: var(--vm-accent-deep-rgb);
    --bs-tertiary-bg: #f6f5fb;
    --bs-tertiary-bg-rgb: 246, 245, 251;
    --omu-link: var(--vm-accent-strong);
    --omu-spinner-dot: var(--vm-accent-strong);
}

/* === DARK THEME (default): near-black, one cold violet === */
[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-bg: #0b0a10;
    --bs-body-bg-rgb: 11, 10, 16;
    --bs-body-color: #e7e7ee;
    --bs-body-color-rgb: 231, 231, 238;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: var(--vm-heading);
    --bs-secondary-color: rgba(231, 231, 238, 0.72);
    --bs-secondary-color-rgb: 231, 231, 238;
    --bs-secondary-bg: #17151f;
    --bs-secondary-bg-rgb: 23, 21, 31;
    --bs-tertiary-color: rgba(231, 231, 238, 0.56);
    --bs-tertiary-color-rgb: 231, 231, 238;
    --bs-tertiary-bg: #121119;
    --bs-tertiary-bg-rgb: 18, 17, 25;
    --bs-border-color: #2a2735;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.09);
    --bs-primary: var(--vm-accent);
    --bs-primary-rgb: var(--vm-accent-rgb);
    --bs-primary-text-emphasis: var(--vm-accent-hi);
    --bs-primary-bg-subtle: #1b1733;
    --bs-primary-border-subtle: #3d3373;
    --bs-link-color: var(--vm-accent-hi);
    --bs-link-color-rgb: var(--vm-accent-hi-rgb);
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-highlight-bg: #3b2f6b;
    --bs-highlight-color: #ffffff;
    --bs-code-color: var(--vm-accent-hi);

    --omu-bg: #0b0a10;
    --omu-surface: #12111a;
    --omu-surface-2: #121119;
    --omu-surface-muted: #17151f;
    --omu-surface-hover: #221f2e;
    --omu-text: #e7e7ee;
    --omu-text-muted: var(--vm-muted);
    --omu-text-secondary: #b9b8c8;
    --omu-border: #2a2735;
    --omu-link: var(--vm-accent-hi);
    --omu-mark-bg: #4a3b8f;
    --omu-spinner-dot: var(--vm-accent);

    scrollbar-color: #34303f transparent;
}

/* === BASE === */
html,
body {
    font-family: var(--vm-font);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--vm-font-head);
    letter-spacing: -0.01em;
}

/* the "veil": slow violet mist over near-black, like the website */
[data-bs-theme=dark] body {
    background-color: var(--vm-bg);
    background-image:
        radial-gradient(1100px 520px at 85% -10%, rgba(var(--vm-accent-rgb), 0.1), transparent 62%),
        radial-gradient(900px 480px at 15% 115%, rgba(var(--vm-accent-rgb), 0.06), transparent 60%);
    background-attachment: fixed;
}

[data-bs-theme=dark] ::selection {
    background: rgba(var(--vm-accent-rgb), 0.45);
    color: #fff;
}

a:focus-visible,
.btn-link:focus-visible,
.nav-link:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--vm-accent-hi);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

[data-bs-theme=light] a:focus-visible,
[data-bs-theme=light] .btn-link:focus-visible,
[data-bs-theme=light] summary:focus-visible {
    outline-color: var(--vm-accent-strong);
}

/* === BRAND MARK (nav + login) === */
.vm-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--vm-heading);
    text-decoration: none;
    line-height: 1;
}

.vm-brand__emblem {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 10px rgba(var(--vm-accent-rgb), 0.45));
}

.vm-brand__text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vm-wordmark {
    font-family: var(--vm-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--vm-heading);
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(var(--vm-accent-rgb), 0.35);
}

.vm-wordmark__accent {
    background: linear-gradient(180deg, var(--vm-accent-hi), var(--vm-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vm-brand__caption {
    font-family: var(--vm-font);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--vm-muted);
}

/* === SIDEBAR === */
.sidebar {
    background-color: #0a0910; /* under --omu-sidebar-gradient */
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* The gradient is drawn once by .sidebar; the nav on top stays transparent. */
.sidebar > nav {
    background: transparent;
    box-shadow: none !important;
}

.sidebar .top-row {
    background-color: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar .top-row .navbar-brand {
    padding: 0.5rem 0;
    margin-right: 0;
}

.sidebar .nav-item .nav-link {
    color: var(--vm-sidebar-text);
    font-weight: 500;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar .nav-item .nav-link .oi {
    color: var(--vm-accent-hi);
    opacity: 0.8;
}

.sidebar .nav-item .nav-link:hover {
    background-color: rgba(var(--vm-accent-rgb), 0.1);
    color: #fff;
}

.sidebar .nav-item a.nav-link.active {
    background: linear-gradient(90deg, rgba(var(--vm-accent-rgb), 0.28), rgba(var(--vm-accent-rgb), 0.07));
    color: #fff;
    box-shadow: inset 2px 0 0 var(--vm-accent);
}

.sidebar .nav-item a.nav-link.active .oi {
    opacity: 1;
}

.sidebar .nav-link:focus-visible {
    outline-offset: -2px;
}

/* Narrow screens: OpenMU's menu toggle sits on the right of the brand row. */
@media (max-width: 767.98px) {
    .sidebar .top-row {
        padding-right: 5rem;
    }

    .sidebar .vm-brand__text {
        display: none;
    }
}

/* Game configuration drop-down inside the sidebar: dark in both themes. */
.sidebar .dropdown-menu {
    --bs-dropdown-bg: rgba(255, 255, 255, 0.03);
    --bs-dropdown-color: var(--vm-sidebar-text);
    --bs-dropdown-border-color: rgba(255, 255, 255, 0.07);
    --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.08);
    --bs-dropdown-link-color: var(--vm-sidebar-text);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(var(--vm-accent-rgb), 0.12);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: rgba(var(--vm-accent-rgb), 0.26);
}

[data-bs-theme=dark] .sidebar > nav > div > ul > li.dropdown > div > a.active {
    background-color: rgba(var(--vm-accent-rgb), 0.24);
    color: #fff;
}

.culture-selector::before {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--vm-accent-rgb), 0.45) 50%, transparent 100%);
}

/* === HEADER + BREADCRUMB === */
[data-bs-theme=dark] .main-header {
    --bs-tertiary-bg-rgb: 11, 10, 16;
    --bs-bg-opacity: 0.82;
    --bs-border-color: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.main-header::after {
    /* thin glowing veil line under the header */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--vm-accent-rgb), 0.45), transparent);
    pointer-events: none;
}

[data-bs-theme=dark] .breadcrumb-bar {
    --bs-border-color: rgba(255, 255, 255, 0.06);
    background-color: rgba(18, 17, 25, 0.6);
}

[data-bs-theme=dark] .theme-selector:hover,
[data-bs-theme=dark] .theme-selector:focus {
    background-color: rgba(255, 255, 255, 0.08);
}

/* === BUTTONS === */
.btn {
    font-weight: 500;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--vm-accent-strong);
    --bs-btn-border-color: var(--vm-accent-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vm-accent-deep);
    --bs-btn-hover-border-color: var(--vm-accent-deep);
    --bs-btn-focus-shadow-rgb: var(--vm-accent-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--vm-accent-deep);
    --bs-btn-active-border-color: var(--vm-accent-deep);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--vm-accent-strong);
    --bs-btn-disabled-border-color: var(--vm-accent-strong);
}

[data-bs-theme=dark] .btn-primary {
    box-shadow: 0 6px 18px rgba(var(--vm-accent-deep-rgb), 0.28);
}

[data-bs-theme=dark] .btn-primary:hover {
    box-shadow: 0 8px 24px rgba(var(--vm-accent-rgb), 0.32);
}

.btn-outline-primary {
    --bs-btn-color: var(--vm-accent-strong);
    --bs-btn-border-color: var(--vm-accent-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vm-accent-strong);
    --bs-btn-hover-border-color: var(--vm-accent-strong);
    --bs-btn-focus-shadow-rgb: var(--vm-accent-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--vm-accent-deep);
    --bs-btn-active-border-color: var(--vm-accent-deep);
    --bs-btn-disabled-color: var(--vm-accent-strong);
    --bs-btn-disabled-border-color: var(--vm-accent-strong);
}

[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--vm-accent-hi);
    --bs-btn-border-color: rgba(var(--vm-accent-rgb), 0.6);
}

[data-bs-theme=dark] .btn-secondary {
    --bs-btn-color: var(--vm-text);
    --bs-btn-bg: #24212f;
    --bs-btn-border-color: #34303f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2e2a3b;
    --bs-btn-hover-border-color: rgba(var(--vm-accent-rgb), 0.5);
    --bs-btn-focus-shadow-rgb: var(--vm-accent-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #353044;
    --bs-btn-active-border-color: rgba(var(--vm-accent-rgb), 0.6);
    --bs-btn-disabled-color: var(--vm-muted);
    --bs-btn-disabled-bg: #1c1a25;
    --bs-btn-disabled-border-color: #2a2735;
}

[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: #c4c3d2;
    --bs-btn-border-color: #3a3647;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--vm-accent-rgb), 0.12);
    --bs-btn-hover-border-color: rgba(var(--vm-accent-rgb), 0.55);
    --bs-btn-focus-shadow-rgb: var(--vm-accent-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--vm-accent-rgb), 0.2);
    --bs-btn-active-border-color: var(--vm-accent);
    --bs-btn-disabled-color: #8a8999;
    --bs-btn-disabled-border-color: #2a2735;
}

.btn-link {
    --bs-btn-focus-shadow-rgb: var(--vm-accent-rgb);
}

/* Bootstrap's text color utilities use the base colors, which are too dark on near-black. */
[data-bs-theme=dark] .text-success {
    --bs-success-rgb: 52, 211, 153;
}

[data-bs-theme=dark] .text-danger {
    --bs-danger-rgb: 248, 113, 113;
}

[data-bs-theme=dark] .text-secondary {
    --bs-secondary-rgb: 163, 162, 180;
}

/* White text needs the darker accent shade (the light one is only 3.3:1). */
.text-bg-primary {
    color: #fff !important;
    background-color: var(--vm-accent-strong) !important;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--vm-accent-strong-rgb), var(--bs-bg-opacity)) !important;
}

/* === FORMS === */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
    background-color: #0e0d15;
    border-color: #363244;
}

[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-select:disabled {
    background-color: #17151f;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--vm-accent-rgb), 0.8);
    box-shadow: 0 0 0 0.2rem rgba(var(--vm-accent-rgb), 0.25);
}

.form-check-input:focus {
    border-color: rgba(var(--vm-accent-rgb), 0.8);
    box-shadow: 0 0 0 0.2rem rgba(var(--vm-accent-rgb), 0.25);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--vm-accent-strong);
    border-color: var(--vm-accent-strong);
}

[data-bs-theme=dark] .form-check-input {
    --bs-form-check-bg: #0e0d15;
    border-color: #4a4559;
}

[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--vm-accent-strong);
    border-color: var(--vm-accent);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--vm-accent-strong);
}

.form-range::-moz-range-thumb {
    background-color: var(--vm-accent-strong);
}

/* === CARDS, LISTS, TABLES === */
[data-bs-theme=dark] .card {
    --bs-card-bg: #12111a;
    --bs-card-border-color: rgba(255, 255, 255, 0.07);
    --bs-card-cap-bg: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.3);
}

[data-bs-theme=dark] .card .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: rgba(255, 255, 255, 0.06);
}

.list-group {
    --bs-list-group-active-bg: var(--vm-accent-strong);
    --bs-list-group-active-border-color: var(--vm-accent-strong);
}

.card .table {
    --bs-table-bg: transparent;
}

[data-bs-theme=dark] .table {
    --bs-table-border-color: #26232f;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(var(--vm-accent-rgb), 0.07);
    --bs-table-hover-color: #fff;
    --bs-table-active-bg: rgba(var(--vm-accent-rgb), 0.12);
}

[data-bs-theme=dark] .quickgrid {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(var(--vm-accent-rgb), 0.07);
}

[data-bs-theme=dark] .table > thead > tr > th,
[data-bs-theme=dark] .quickgrid > thead > tr > th {
    color: var(--bs-secondary-color);
    font-weight: 600;
    border-bottom-color: rgba(var(--vm-accent-rgb), 0.3);
}

/* === OTHER BOOTSTRAP COMPONENTS === */
.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--vm-accent-strong);
}

[data-bs-theme=dark] .progress,
[data-bs-theme=dark] .progress-stacked {
    --bs-progress-bg: #221f2e;
}

[data-bs-theme=dark] .progress-bar {
    background-image: linear-gradient(90deg, var(--vm-accent-strong), var(--vm-accent));
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--vm-accent-rgb), 0.25);
    --bs-pagination-active-bg: var(--vm-accent-strong);
    --bs-pagination-active-border-color: var(--vm-accent-strong);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--vm-accent-strong);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--vm-accent-strong);
}

[data-bs-theme=dark] .dropdown-menu {
    --bs-dropdown-bg: #14121c;
    --bs-dropdown-border-color: rgba(255, 255, 255, 0.08);
    --bs-dropdown-link-hover-bg: rgba(var(--vm-accent-rgb), 0.12);
}

[data-bs-theme=dark] .modal {
    --bs-modal-bg: #12111a;
    --bs-modal-border-color: rgba(var(--vm-accent-rgb), 0.22);
    --bs-modal-header-border-color: rgba(255, 255, 255, 0.07);
    --bs-modal-footer-border-color: rgba(255, 255, 255, 0.07);
}

[data-bs-theme=dark] .modal-backdrop {
    --bs-backdrop-bg: #050508;
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--vm-accent-rgb), 0.25);
}

[data-bs-theme=dark] .accordion {
    --bs-accordion-active-color: var(--vm-accent-hi);
    --bs-accordion-active-bg: #1b1733;
}

/* === LOGIN PAGE === */
.login-layout {
    background-color: var(--vm-night);
    background-image:
        radial-gradient(800px 420px at 50% 30%, rgba(var(--vm-accent-rgb), 0.12), transparent 70%),
        linear-gradient(180deg, rgba(9, 9, 14, 0.62) 0%, rgba(9, 9, 14, 0.8) 55%, rgba(9, 9, 14, 0.96) 100%),
        url("img/hero.jpg");
    background-size: auto, auto, cover;
    background-position: center, center, center 38%;
    background-repeat: no-repeat;
    color: var(--vm-text);
}

.login-layout .login-panel .card {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(13, 12, 20, 0.8);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden;
}

.login-layout .login-panel .card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--vm-accent-rgb), 0.7), transparent);
}

.login-layout .login-panel .card-body {
    padding: 1.75rem;
}

.vm-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 0.6rem;
    font-size: inherit;
    text-align: center;
}

.vm-login-brand .vm-brand__emblem {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 0 22px rgba(var(--vm-accent-rgb), 0.55));
}

.vm-login-brand .vm-wordmark {
    font-size: 1.7rem;
    letter-spacing: 0.32em;
    /* the letter spacing adds space after the last letter, too */
    margin-right: -0.32em;
}

.vm-login-brand .vm-brand__caption {
    font-size: 0.68rem;
}

.vm-login-tagline {
    margin: 0 0 1.75rem;
    text-align: center;
    color: var(--vm-muted);
    font-size: 0.95rem;
}

/* === DASHBOARD HEADER === */
.vm-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: 1.25rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--vm-accent-rgb), 0.22);
    background-color: var(--vm-bg);
    background-image:
        linear-gradient(90deg, rgba(11, 10, 16, 0.97) 0%, rgba(11, 10, 16, 0.9) 40%, rgba(11, 10, 16, 0.5) 100%),
        url("img/hero.jpg");
    background-size: auto, cover;
    background-position: center, center 42%;
    background-repeat: no-repeat;
    color: var(--vm-text);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    container-type: inline-size;
}

.vm-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--vm-accent-rgb), 0.6), transparent);
    pointer-events: none;
}

.vm-hero__main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}

.vm-hero__main > div {
    min-width: 0;
}

.vm-hero__emblem {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 0 18px rgba(var(--vm-accent-rgb), 0.55));
}

.vm-hero__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-accent-hi);
}

.vm-hero__title {
    margin: 0;
    font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.2rem);
    line-height: 1.1;
}

.vm-hero__title .vm-wordmark {
    font-size: inherit;
    letter-spacing: 0.24em;
}

.vm-hero__title-suffix {
    margin-left: 0.15em;
    font-weight: 400;
    font-size: 0.55em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--vm-muted);
    vertical-align: middle;
}

.vm-hero__tagline {
    margin: 0.5rem 0 0;
    color: #bdbbcc;
    font-size: 0.98rem;
}

.vm-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
}

.vm-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vm-hero__links .btn-outline-light {
    --bs-btn-color: var(--vm-text);
    --bs-btn-border-color: rgba(255, 255, 255, 0.22);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--vm-accent-rgb), 0.16);
    --bs-btn-hover-border-color: rgba(var(--vm-accent-rgb), 0.6);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--vm-accent-rgb), 0.24);
    --bs-btn-active-border-color: var(--vm-accent);
    background-color: rgba(11, 10, 16, 0.55);
}

.vm-hero__runbook {
    margin: 0;
    font-size: 0.8rem;
    color: var(--vm-muted);
}

.vm-hero__runbook code {
    color: var(--vm-accent-hi);
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .vm-hero {
        padding: 1.25rem;
    }
}

/* The header adapts to its own width (the sidebar takes a varying share of the page). */
@container (max-width: 48rem) {
    .vm-hero__aside {
        align-items: flex-start;
    }
}

@container (max-width: 30rem) {
    .vm-hero__main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .vm-hero__emblem {
        width: 52px;
        height: 52px;
    }

    .vm-hero__title .vm-wordmark {
        letter-spacing: 0.16em;
    }

    .vm-hero__title-suffix {
        display: block;
        margin: 0.4rem 0 0;
    }
}