html.site-dark {
    color-scheme: dark;
    --site-bg: #060b15;
    --site-bg-soft: #0c1526;
    --site-panel: #121d33;
    --site-panel-2: #17243d;
    --site-border: #253857;
    --site-ink: #e6edf8;
    --site-muted: #8fa3bf;
    --site-accent: #33c3ff;
    --site-danger: #f87171;
}

html.site-dark body {
    background: radial-gradient(circle at top right, #14263f 0%, #0b1527 42%, #060b15 100%);
    color: var(--site-ink);
}

html.site-dark a {
    color: #9adfff;
}

html.site-dark a:hover {
    color: #c8edff;
}

html.site-dark .text-muted,
html.site-dark .small,
html.site-dark small {
    color: var(--site-muted) !important;
}

html.site-dark .container,
html.site-dark .container-fluid,
html.site-dark .card,
html.site-dark main,
html.site-dark header,
html.site-dark .logout-card {
    color: var(--site-ink);
}

html.site-dark .card,
html.site-dark .logout-card,
html.site-dark .table-responsive {
    background: var(--site-panel);
    border-color: var(--site-border);
}

html.site-dark .card-header,
html.site-dark .card-footer,
html.site-dark .modal-header,
html.site-dark .modal-footer {
    background: var(--site-panel-2);
    border-color: var(--site-border);
}

html.site-dark .modal-content {
    background: var(--site-panel);
    border-color: var(--site-border);
}

html.site-dark .table,
html.site-dark table {
    color: var(--site-ink);
}

html.site-dark .table th,
html.site-dark .table td,
html.site-dark th,
html.site-dark td {
    border-color: var(--site-border);
}

html.site-dark .table thead th {
    background: #1a2a46 !important;
    color: #e9f1ff;
}

html.site-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.02);
}

html.site-dark .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(51, 195, 255, 0.08);
}

html.site-dark input,
html.site-dark textarea,
html.site-dark select,
html.site-dark .form-control,
html.site-dark .form-select {
    background: var(--site-bg-soft);
    border-color: var(--site-border);
    color: var(--site-ink);
}

html.site-dark input::placeholder,
html.site-dark textarea::placeholder {
    color: #7d93b3;
}

html.site-dark input:focus,
html.site-dark textarea:focus,
html.site-dark select:focus,
html.site-dark .form-control:focus,
html.site-dark .form-select:focus {
    background: #0f1a2f;
    border-color: var(--site-accent);
    color: var(--site-ink);
    box-shadow: 0 0 0 0.2rem rgba(51, 195, 255, 0.2);
}

html.site-dark .btn-primary {
    background: #1f6fa4;
    border-color: #2b86c3;
}

html.site-dark .btn-primary:hover {
    background: #2783be;
    border-color: #3c97d4;
}

html.site-dark .btn-secondary {
    background: #344966;
    border-color: #48648a;
}

html.site-dark .btn-secondary:hover {
    background: #3f5a7f;
}

html.site-dark .btn-outline-secondary {
    border-color: #48648a;
    color: #dbe9ff;
}

html.site-dark .btn-outline-secondary:hover {
    background: #2b4267;
    color: #ffffff;
}

html.site-dark .btn-outline-danger {
    border-color: #bc4a67;
    color: #ff99b1;
}

html.site-dark .btn-outline-danger:hover {
    background: #7a2840;
    color: #ffffff;
}

html.site-dark .alert {
    border-color: var(--site-border);
}

html.site-dark .alert-danger {
    background: #3a1620;
    color: #ffd4de;
}

html.site-dark .alert-warning {
    background: #3b2d11;
    color: #ffe1a0;
}

html.site-dark .alert-success {
    background: #153827;
    color: #b9f0d2;
}

html.site-dark code,
html.site-dark pre {
    background: #0d1728;
    color: #c4defd;
    border-color: var(--site-border);
}

html.site-dark .bg-light {
    background-color: #111f36 !important;
    color: #d6e7ff !important;
}

html.site-dark .code-preview {
    background: #111f36 !important;
    color: #d6e7ff !important;
    border: 1px solid var(--site-border);
}

html.site-dark .bg-white {
    background-color: var(--site-panel) !important;
}

html.site-dark .bg-gray-100 {
    background-color: #0b1527 !important;
}

html.site-dark .bg-gray-200 {
    background-color: #111f36 !important;
}

html.site-dark .border {
    border-color: var(--site-border) !important;
}