:root {
    color-scheme: light;

    --hvt-background: #0b0f12;
    --hvt-surface: #151b20;
    --hvt-surface-elevated: #20272d;
    --hvt-canvas: #eef1f2;
    --hvt-content-surface: #ffffff;
    --hvt-yellow: #d99b2b;
    --hvt-yellow-hover: #e8aa36;
    --hvt-yellow-ink: #171109;
    --hvt-silver: #aeb7bf;
    --hvt-text-primary: #f7f8f8;
    --hvt-text-secondary: #b6c0c6;
    --hvt-content-text: #151a1e;
    --hvt-content-text-secondary: #5d6870;
    --hvt-border: #343d44;
    --hvt-content-border: #d5dade;
    --hvt-success: #167449;
    --hvt-warning: #8b5c08;
    --hvt-error: #a93630;
    --hvt-info: #216b99;
    --hvt-disabled: #7b858c;
    --hvt-success-soft: #e7f3ed;
    --hvt-warning-soft: #fff3d6;
    --hvt-error-soft: #fbe9e7;
    --hvt-info-soft: #e7f1f7;
    --hvt-yellow-soft: #fff4d5;
    --hvt-focus-ring: rgba(217, 155, 43, .34);
    --hvt-grid-line: rgba(21, 26, 30, .055);
    --hvt-grid-line-dark: rgba(247, 248, 248, .055);
    --hvt-overlay: rgba(4, 7, 9, .72);

    --hvt-radius-sm: 2px;
    --hvt-radius-md: 4px;
    --hvt-radius-lg: 8px;
    --hvt-shadow-sm: 0 2px 8px rgba(4, 7, 9, .12);
    --hvt-shadow-md: 0 14px 36px rgba(4, 7, 9, .18);
    --hvt-shadow-lg: 0 28px 72px rgba(4, 7, 9, .34);

    --hvt-space-1: .25rem;
    --hvt-space-2: .5rem;
    --hvt-space-3: .75rem;
    --hvt-space-4: 1rem;
    --hvt-space-5: 1.25rem;
    --hvt-space-6: 1.5rem;
    --hvt-space-8: 2rem;
    --hvt-space-10: 2.5rem;
    --hvt-space-12: 3rem;
    --hvt-space-16: 4rem;

    --hvt-font-xs: .75rem;
    --hvt-font-sm: .875rem;
    --hvt-font-md: 1rem;
    --hvt-font-lg: 1.125rem;
    --hvt-font-xl: 1.375rem;
    --hvt-font-2xl: 1.75rem;
    --hvt-font-3xl: 2.25rem;
    --hvt-heading-page: var(--hvt-font-2xl);
    --hvt-heading-section: var(--hvt-font-xl);

    --hvt-button-height: 44px;
    --hvt-input-height: 48px;
    --hvt-touch-target: 48px;
    --hvt-sidebar-width: 264px;
    --hvt-topbar-height: 72px;
    --hvt-topbar-mobile-height: 64px;
    --hvt-content-max: 1480px;

    --hvt-display-font: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", sans-serif;
    --hvt-body-font: "Aptos", "Noto Sans", "Helvetica Neue", sans-serif;

    --ink: var(--hvt-content-text);
    --ink-soft: var(--hvt-surface-elevated);
    --paper: var(--hvt-canvas);
    --surface: var(--hvt-content-surface);
    --line: var(--hvt-content-border);
    --muted: var(--hvt-content-text-secondary);
    --accent: var(--hvt-yellow);
    --success: var(--hvt-success);
    --danger: var(--hvt-error);
    --display-font: var(--hvt-display-font);
    --body-font: var(--hvt-body-font);
}

* { box-sizing: border-box; }

html,
body,
#app { min-height: 100%; }

html { background: var(--hvt-background); }

body {
    background:
        linear-gradient(90deg, var(--hvt-grid-line) 1px, transparent 1px),
        linear-gradient(var(--hvt-grid-line) 1px, transparent 1px),
        var(--hvt-canvas);
    background-size: 32px 32px;
    color: var(--hvt-content-text);
    font-family: var(--hvt-body-font);
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }
a { color: inherit; }

h1,
h2,
h3 {
    font-family: var(--hvt-display-font);
    letter-spacing: 0;
}

h1 {
    font-size: var(--hvt-heading-page);
    line-height: 1.12;
}

h2 {
    font-size: var(--hvt-heading-section);
    line-height: 1.2;
}

h1:focus { outline: none; }

::selection {
    background: var(--hvt-yellow);
    color: var(--hvt-yellow-ink);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--hvt-yellow);
    outline-offset: 3px;
}

.hvt-skip-link {
    background: var(--hvt-yellow);
    color: var(--hvt-yellow-ink);
    font-weight: 800;
    left: var(--hvt-space-4);
    padding: var(--hvt-space-3) var(--hvt-space-4);
    position: fixed;
    top: var(--hvt-space-4);
    transform: translateY(-180%);
    z-index: 1200;
}

.hvt-skip-link:focus { transform: translateY(0); }

.eyebrow {
    color: var(--hvt-warning);
    font-size: var(--hvt-font-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.hvt-button,
.primary-command,
.secondary-command {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--hvt-radius-md);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--hvt-font-sm);
    font-weight: 800;
    gap: var(--hvt-space-2);
    justify-content: center;
    min-height: var(--hvt-button-height);
    padding: var(--hvt-space-3) var(--hvt-space-4);
    text-decoration: none;
}

.hvt-button--primary,
.primary-command {
    background: var(--hvt-yellow);
    border-color: var(--hvt-yellow);
    color: var(--hvt-yellow-ink);
}

.hvt-button--primary:hover,
.primary-command:hover {
    background: var(--hvt-yellow-hover);
    border-color: var(--hvt-yellow-hover);
}

.hvt-button--secondary,
.secondary-command {
    background: var(--hvt-content-surface);
    border-color: var(--hvt-content-border);
    color: var(--hvt-content-text);
}

.hvt-button--secondary:hover,
.secondary-command:hover { border-color: var(--hvt-content-text-secondary); }

.hvt-button--danger {
    background: var(--hvt-error);
    border-color: var(--hvt-error);
    color: var(--hvt-text-primary);
}

.hvt-button--danger:hover { filter: brightness(.92); }

.hvt-button:disabled,
.primary-command:disabled,
.secondary-command:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.hvt-button.inline,
.primary-command.inline { width: auto; }

.hvt-icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--hvt-content-border);
    border-radius: var(--hvt-radius-md);
    cursor: pointer;
    display: inline-flex;
    height: var(--hvt-touch-target);
    justify-content: center;
    padding: 0;
    width: var(--hvt-touch-target);
}

.hvt-icon-button:hover { background: var(--hvt-canvas); }

.hvt-field {
    display: grid;
    gap: var(--hvt-space-2);
}

.hvt-field label,
.hvt-field-label {
    color: var(--hvt-content-text);
    font-size: var(--hvt-font-sm);
    font-weight: 750;
}

.hvt-input,
.hvt-select,
.hvt-field input,
.hvt-field select,
.hvt-field textarea {
    background: var(--hvt-content-surface);
    border: 1px solid var(--hvt-content-border);
    border-radius: var(--hvt-radius-md);
    color: var(--hvt-content-text);
    min-height: var(--hvt-input-height);
    padding: var(--hvt-space-3) var(--hvt-space-4);
    width: 100%;
}

.hvt-field textarea {
    min-height: 7rem;
    resize: vertical;
}

.hvt-input:hover,
.hvt-select:hover,
.hvt-field input:hover,
.hvt-field select:hover,
.hvt-field textarea:hover { border-color: var(--hvt-silver); }

.hvt-input:focus,
.hvt-select:focus,
.hvt-field input:focus,
.hvt-field select:focus,
.hvt-field textarea:focus {
    border-color: var(--hvt-yellow);
    box-shadow: 0 0 0 3px var(--hvt-focus-ring);
    outline: 0;
}

.hvt-input:disabled,
.hvt-select:disabled,
.hvt-field input:disabled,
.hvt-field select:disabled,
.hvt-field textarea:disabled {
    background: var(--hvt-canvas);
    color: var(--hvt-disabled);
    cursor: not-allowed;
}

.hvt-checkbox {
    align-items: start;
    display: inline-grid;
    gap: var(--hvt-space-3);
    grid-template-columns: 20px 1fr;
    min-height: var(--hvt-touch-target);
    padding-block: var(--hvt-space-3);
}

.hvt-checkbox input {
    accent-color: var(--hvt-yellow);
    height: 20px;
    margin: 0;
    width: 20px;
}

.validation-message {
    color: var(--hvt-error);
    font-size: var(--hvt-font-xs);
    font-weight: 650;
}

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

.hvt-card--elevated { box-shadow: var(--hvt-shadow-md); }

.hvt-dialog {
    background: var(--hvt-content-surface);
    border: 1px solid var(--hvt-content-border);
    border-radius: var(--hvt-radius-lg);
    box-shadow: var(--hvt-shadow-lg);
    color: var(--hvt-content-text);
    max-width: min(92vw, 640px);
    padding: var(--hvt-space-6);
}

.hvt-dialog::backdrop { background: var(--hvt-overlay); }

.hvt-table-region {
    border: 1px solid var(--hvt-content-border);
    border-radius: var(--hvt-radius-lg);
    overflow-x: auto;
}

.hvt-table {
    border-collapse: collapse;
    min-width: 720px;
    width: 100%;
}

.hvt-table th,
.hvt-table td {
    border-bottom: 1px solid var(--hvt-content-border);
    padding: var(--hvt-space-3) var(--hvt-space-4);
    text-align: left;
}

.hvt-table th {
    background: var(--hvt-canvas);
    color: var(--hvt-content-text-secondary);
    font-size: var(--hvt-font-xs);
    text-transform: uppercase;
}

.hvt-table tr:last-child td { border-bottom: 0; }

.hvt-mobile-list {
    display: grid;
    gap: var(--hvt-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hvt-mobile-list > li {
    background: var(--hvt-content-surface);
    border: 1px solid var(--hvt-content-border);
    border-radius: var(--hvt-radius-md);
    min-height: var(--hvt-touch-target);
    padding: var(--hvt-space-4);
}

.hvt-status-badge {
    align-items: center;
    border-radius: var(--hvt-radius-sm);
    display: inline-flex;
    font-size: var(--hvt-font-xs);
    font-weight: 800;
    gap: var(--hvt-space-2);
    min-height: 28px;
    padding: var(--hvt-space-1) var(--hvt-space-2);
    width: fit-content;
}

.hvt-status-badge::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 7px;
    width: 7px;
}

.hvt-status-badge--success { background: var(--hvt-success-soft); color: var(--hvt-success); }
.hvt-status-badge--warning { background: var(--hvt-warning-soft); color: var(--hvt-warning); }
.hvt-status-badge--error { background: var(--hvt-error-soft); color: var(--hvt-error); }
.hvt-status-badge--info { background: var(--hvt-info-soft); color: var(--hvt-info); }
.hvt-status-badge--neutral { background: var(--hvt-canvas); color: var(--hvt-content-text-secondary); }

.hvt-alert {
    border: 1px solid currentColor;
    border-left-width: 4px;
    border-radius: var(--hvt-radius-md);
    font-size: var(--hvt-font-sm);
    padding: var(--hvt-space-3) var(--hvt-space-4);
}

.hvt-alert--success { background: var(--hvt-success-soft); color: var(--hvt-success); }
.hvt-alert--warning { background: var(--hvt-warning-soft); color: var(--hvt-warning); }
.hvt-alert--error { background: var(--hvt-error-soft); color: var(--hvt-error); }
.hvt-alert--info { background: var(--hvt-info-soft); color: var(--hvt-info); }

.hvt-state {
    align-items: center;
    display: grid;
    gap: var(--hvt-space-3);
    justify-items: start;
    max-width: 620px;
    min-height: 180px;
    padding: var(--hvt-space-8) 0;
}

.hvt-state::before {
    background: var(--hvt-yellow);
    content: "";
    height: 4px;
    width: 48px;
}

.hvt-state--error::before { background: var(--hvt-error); }
.hvt-state--loading::before { background: var(--hvt-info); }
.hvt-state h2 { margin: 0; }
.hvt-state p { color: var(--hvt-content-text-secondary); margin: 0; }
.empty-state { max-width: 620px; padding: var(--hvt-space-8) 0; }
.empty-state p { color: var(--hvt-content-text-secondary); }

.hvt-page-header {
    align-items: end;
    border-bottom: 1px solid var(--hvt-content-border);
    display: flex;
    gap: var(--hvt-space-6);
    justify-content: space-between;
    padding-bottom: var(--hvt-space-6);
}

.hvt-page-header__copy { min-width: 0; }
.hvt-page-header h1 { margin: var(--hvt-space-2) 0; }
.hvt-page-header p { color: var(--hvt-content-text-secondary); margin: 0; }
.hvt-page-header__meta { color: var(--hvt-content-text-secondary); flex: 0 0 auto; }

.hvt-action-bar,
.hvt-filter-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hvt-space-3);
    justify-content: space-between;
}

.hvt-action-bar { margin-bottom: var(--hvt-space-5); }
.hvt-filter-bar { background: var(--hvt-canvas); padding: var(--hvt-space-3); }

.hvt-search-field {
    display: grid;
    gap: var(--hvt-space-2);
    max-width: 30rem;
    width: 100%;
}

.hvt-pagination {
    align-items: center;
    display: flex;
    gap: var(--hvt-space-2);
    justify-content: flex-end;
}

.hvt-pagination button { min-height: var(--hvt-touch-target); min-width: var(--hvt-touch-target); }

.route-loading {
    align-items: center;
    background: var(--hvt-background);
    color: var(--hvt-text-primary);
    display: flex;
    gap: var(--hvt-space-3);
    justify-content: center;
    min-height: 100vh;
}

.spinner {
    animation: spin .8s linear infinite;
    border: 3px solid var(--hvt-silver);
    border-radius: 50%;
    border-right-color: var(--hvt-yellow);
    display: inline-block;
    height: 28px;
    width: 28px;
}

.spinner.small { height: 18px; width: 18px; }

@keyframes spin { to { transform: rotate(360deg); } }

.offline-indicator {
    background: var(--hvt-warning);
    bottom: 0;
    color: var(--hvt-text-primary);
    font-size: var(--hvt-font-sm);
    font-weight: 800;
    left: 0;
    padding: var(--hvt-space-3) var(--hvt-space-4);
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui {
    background: var(--hvt-error);
    bottom: 0;
    color: var(--hvt-text-primary);
    display: none;
    left: 0;
    padding: var(--hvt-space-4) var(--hvt-space-12) var(--hvt-space-4) var(--hvt-space-4);
    position: fixed;
    width: 100%;
    z-index: 1100;
}

#blazor-error-ui a { font-weight: 800; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--hvt-space-4); }

.loading-stage {
    align-items: center;
    background:
        linear-gradient(90deg, var(--hvt-grid-line-dark) 1px, transparent 1px),
        linear-gradient(var(--hvt-grid-line-dark) 1px, transparent 1px),
        var(--hvt-background);
    background-size: 32px 32px;
    color: var(--hvt-text-primary);
    display: grid;
    gap: var(--hvt-space-4);
    justify-items: center;
    min-height: 100vh;
}

.loading-stage img { height: 68px; object-fit: contain; width: 68px; }
.loading-stage strong { font-family: var(--hvt-display-font); font-size: var(--hvt-font-lg); }

@media (max-width: 640px) {
    :root {
        --hvt-heading-page: var(--hvt-font-xl);
        --hvt-heading-section: var(--hvt-font-lg);
    }

    .hvt-page-header {
        align-items: start;
        flex-direction: column;
        gap: var(--hvt-space-3);
    }

    .hvt-action-bar > .hvt-button { width: 100%; }
    .hvt-pagination { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .spinner { animation-duration: 1.6s; }
}