:root,
[data-bs-theme="dark"] {
    --brand-blue: #143cf3;
    --brand-blue-hover: #2b52ff;
    --brand-blue-soft: rgba(20, 60, 243, 0.24);
    --brand-bg: #141415;
    --brand-panel: #18191b;
    --brand-panel-soft: #1d1f23;
    --brand-input: #111214;
    --brand-border: #30343b;
    --brand-text: #ffffff;
    --brand-muted: #a8b0bd;

    --bs-body-bg: var(--brand-bg);
    --bs-body-color: var(--brand-text);
    --bs-primary: var(--brand-blue);
    --bs-primary-rgb: 20, 60, 243;
    --bs-border-color: var(--brand-border);
    --bs-secondary-bg: var(--brand-panel-soft);
    --bs-tertiary-bg: var(--brand-panel-soft);
}

html,
body {
    background: var(--brand-bg) !important;
    color: var(--brand-text);
}

.main-container {
    max-width: 1500px;
}

.main-container header {
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
    border-bottom-color: var(--brand-border) !important;
}

.main-container header a.color-mode-choice {
    width: fit-content !important;
    max-width: 100%;
}

.main-container header a.color-mode-choice img {
    display: block;
    max-height: 54px;
}

.card {
    background: var(--brand-panel) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.card + .card {
    margin-top: 2rem;
}

.card-title,
h1,
h2,
h3,
h4,
h5 {
    color: var(--brand-text);
    font-weight: 650;
}

.form-label,
.text-muted,
.small,
small {
    color: var(--brand-muted) !important;
}

.form-control,
.form-select,
.input-group-text,
.btn-outline-secondary {
    background-color: var(--brand-input) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 0.18rem var(--brand-blue-soft) !important;
}

.input-group-text {
    color: #d6dce7 !important;
}

.btn-primary {
    background: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(20, 60, 243, 0.24);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-blue-hover) !important;
    border-color: var(--brand-blue-hover) !important;
}

.btn-outline-secondary:hover,
.btn-secondary:hover {
    background-color: var(--brand-panel-soft) !important;
    border-color: #48505b !important;
    color: var(--brand-text) !important;
}

a {
    color: #7892ff;
}

a:hover {
    color: #a7b7ff;
}

footer,
.footer,
.main-container > hr:last-of-type {
    border-color: var(--brand-border) !important;
}

@media (max-width: 768px) {
    .main-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .main-container header a.color-mode-choice img {
        max-height: 44px;
    }
}