:root {
    --surface-bg: #060b18;
    --surface-card: rgba(14, 24, 44, 0.84);
    --surface-card-solid: #111c33;
    --surface-border: rgba(144, 169, 212, 0.24);
    --surface-text: #e6efff;
    --surface-muted: #a7b8d8;
    --surface-primary: #5f8dff;
    --surface-primary-strong: #3e74ff;
    --surface-shadow: 0 18px 45px rgba(6, 10, 24, 0.35);
}

html[data-bs-theme="light"] {
    --surface-bg: #f2f5fb;
    --surface-card: rgba(255, 255, 255, 0.92);
    --surface-card-solid: #ffffff;
    --surface-border: rgba(44, 76, 137, 0.18);
    --surface-text: #0f1f3a;
    --surface-muted: #5f6f8d;
    --surface-primary: #2e5fff;
    --surface-primary-strong: #1f4ae0;
    --surface-shadow: 0 14px 34px rgba(20, 35, 67, 0.12);
}

body {
    background:
        radial-gradient(circle at 10% -5%, rgba(88, 128, 255, 0.2), transparent 52%),
        radial-gradient(circle at 90% 0%, rgba(74, 160, 255, 0.14), transparent 42%),
        var(--surface-bg);
    color: var(--surface-text);
    min-height: 100vh;
}

.brand-navbar {
    background: rgba(8, 16, 34, 0.78) !important;
    border-bottom: 1px solid var(--surface-border);
    backdrop-filter: blur(16px);
}

html[data-bs-theme="light"] .brand-navbar {
    background: rgba(255, 255, 255, 0.86) !important;
}

.brand-navbar .navbar-brand,
.brand-navbar .nav-link,
.brand-navbar .navbar-text {
    color: var(--surface-text) !important;
}

.brand-navbar .nav-link:hover {
    color: var(--surface-primary) !important;
}

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

.surface-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--surface-border);
    color: var(--surface-text);
}

.surface-muted,
.text-muted {
    color: var(--surface-muted) !important;
}

.btn-primary {
    background: var(--surface-primary);
    border-color: var(--surface-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--surface-primary-strong);
    border-color: var(--surface-primary-strong);
}

.status-toolbar {
    background: rgba(12, 22, 43, 0.74);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 1rem;
}

html[data-bs-theme="light"] .status-toolbar {
    background: rgba(255, 255, 255, 0.84);
}

.page-end-spacer {
    height: 28px;
}

.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
}

.table-glass {
    --bs-table-bg: transparent;
    --bs-table-color: var(--surface-text);
    --bs-table-striped-bg: rgba(90, 122, 190, 0.12);
    --bs-table-striped-color: var(--surface-text);
    --bs-table-hover-bg: rgba(97, 138, 230, 0.16);
    --bs-table-hover-color: var(--surface-text);
    border-color: var(--surface-border);
}

.form-control,
.form-select,
.form-floating > .form-control,
.form-floating > .form-select {
    background-color: rgba(20, 34, 62, 0.5);
    border-color: var(--surface-border);
    color: var(--surface-text);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(95, 141, 255, 0.7);
    box-shadow: 0 0 0 .25rem rgba(95, 141, 255, .2);
}

.form-floating > label {
    color: var(--surface-muted);
}

html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .form-floating > .form-control,
html[data-bs-theme="light"] .form-floating > .form-select {
    background-color: rgba(255, 255, 255, 0.88);
}

.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    min-height: 100vh;
}