:root {
  color-scheme: light;

  --m4u-bg: #f4f6fb;
  --m4u-surface: #ffffff;
  --m4u-surface-2: #f8f9fa;
  --m4u-surface-3: #eef3ff;
  --m4u-text: #1f2937;
  --m4u-muted: #6c757d;
  --m4u-border: #dee2e6;
  --m4u-link: #00539c;
  --m4u-link-hover: #003f78;
  --m4u-nav-bg: #00539c;
  --m4u-nav-bg-2: #0074d9;
  --m4u-primary: #0d6efd;
  --m4u-primary-soft: #eef3ff;
  --m4u-success-soft: #eaf6ef;
  --m4u-success-border: #b8dec5;
  --m4u-success-text: #24784a;
  --m4u-danger-soft: #faecec;
  --m4u-danger-border: #e5baba;
  --m4u-danger-text: #9a4141;
  --m4u-warning-soft: #fff8e1;
  --m4u-warning-border: #ead28a;
  --m4u-warning-text: #8a6b16;
  --m4u-info-soft: #eaf4ff;
  --m4u-shadow: 0 .25rem .75rem rgba(15, 23, 42, .08);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --m4u-bg: #0f141b;
  --m4u-surface: #171d26;
  --m4u-surface-2: #1f2733;
  --m4u-surface-3: #182c46;
  --m4u-text: #e8edf4;
  --m4u-muted: #a7b0bd;
  --m4u-border: #313b49;
  --m4u-link: #80b8ff;
  --m4u-link-hover: #b7d5ff;
  --m4u-nav-bg: #102842;
  --m4u-nav-bg-2: #164d80;
  --m4u-primary: #6aa9ff;
  --m4u-primary-soft: #182c46;
  --m4u-success-soft: #183428;
  --m4u-success-border: #356c4b;
  --m4u-success-text: #8ed8a8;
  --m4u-danger-soft: #3a2023;
  --m4u-danger-border: #7e3d45;
  --m4u-danger-text: #e99aa3;
  --m4u-warning-soft: #3a3119;
  --m4u-warning-border: #826f32;
  --m4u-warning-text: #e6ca72;
  --m4u-info-soft: #173047;
  --m4u-shadow: 0 .25rem 1rem rgba(0, 0, 0, .32);
}

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

body {
  transition: background-color .15s ease, color .15s ease;
}

a {
  color: var(--m4u-link);
}

a:hover {
  color: var(--m4u-link-hover);
}

.site-navbar {
  background: linear-gradient(135deg, var(--m4u-nav-bg), var(--m4u-nav-bg-2)) !important;
}

footer {
  background-color: var(--m4u-nav-bg) !important;
  color: #ffffff !important;
  border-color: var(--m4u-border) !important;
}

.large-links--title a,
.large-links--list a {
  color: var(--m4u-link) !important;
}

.bg-light,
.bg-white {
  background-color: var(--m4u-bg) !important;
}

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

.card,
.modal-content,
.popover,
.dropdown-menu,
.list-group-item,
.offcanvas,
.toast {
  background-color: var(--m4u-surface) !important;
  color: var(--m4u-text) !important;
  border-color: var(--m4u-border) !important;
}

.card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-secondary):not(.bg-dark),
.card-footer,
.modal-header,
.modal-footer,
.popover-header {
  background-color: var(--m4u-surface-2) !important;
  color: var(--m4u-text) !important;
  border-color: var(--m4u-border) !important;
}

.dropdown-item {
  color: var(--m4u-text);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item[aria-pressed="true"] {
  background-color: var(--m4u-primary-soft);
  color: var(--m4u-link);
}

.dropdown-divider,
hr {
  border-color: var(--m4u-border);
}

.table {
  color: var(--m4u-text);
  border-color: var(--m4u-border);
}

.table-light {
  --bs-table-bg: var(--m4u-surface-2);
  --bs-table-color: var(--m4u-text);
  --bs-table-border-color: var(--m4u-border);
}

.table-striped {
  --bs-table-striped-bg: var(--m4u-surface-2);
  --bs-table-striped-color: var(--m4u-text);
}

.table-hover {
  --bs-table-hover-bg: var(--m4u-primary-soft);
  --bs-table-hover-color: var(--m4u-text);
}

.table > :not(:last-child) > :last-child > *,
.table td,
.table th {
  border-color: var(--m4u-border);
}

.form-control,
.form-select,
.form-check-input,
textarea,
input,
select {
  background-color: var(--m4u-surface) !important;
  color: var(--m4u-text) !important;
  border-color: var(--m4u-border) !important;
}

.form-check-input:checked {
  background-color: var(--m4u-primary) !important;
  border-color: var(--m4u-primary) !important;
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-check-input:focus {
  border-color: var(--m4u-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .18) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--m4u-muted) !important;
  opacity: 1;
}

.btn-outline-secondary {
  color: var(--m4u-muted);
  border-color: var(--m4u-border);
}

.btn-outline-secondary:hover {
  color: var(--m4u-text);
  background-color: var(--m4u-surface-2);
  border-color: var(--m4u-border);
}

.alert-light,
.alert-secondary {
  background-color: var(--m4u-surface-2);
  color: var(--m4u-text);
  border-color: var(--m4u-border);
}

.alert-info {
  background-color: var(--m4u-info-soft);
  color: var(--m4u-text);
  border-color: var(--m4u-border);
}

.alert-warning {
  background-color: var(--m4u-warning-soft);
  color: var(--m4u-text);
  border-color: var(--m4u-border);
}

.filter-label,
.qid-badge,
.question-inline-info {
  color: var(--m4u-muted) !important;
}

.tag {
  background: var(--m4u-primary-soft) !important;
  border-color: var(--m4u-border) !important;
  color: var(--m4u-link) !important;
}

.question-card,
.problem-card {
  border-left-color: var(--m4u-danger-border) !important;
}

.problem-state-card,
.practice-state-card {
  --m4u-card-state-bg: var(--m4u-surface);
  --m4u-card-state-border: var(--m4u-border);
  background: linear-gradient(90deg, var(--m4u-surface) 0%, var(--m4u-surface) 54%, var(--m4u-card-state-bg) 100%) !important;
  border-color: var(--m4u-card-state-border) !important;
  border-left-color: var(--m4u-card-state-border) !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.problem-card-solved,
.practice-card-solved {
  --m4u-card-state-bg: var(--m4u-success-soft);
  --m4u-card-state-border: var(--m4u-success-border);
}

.problem-card-studied,
.practice-card-attempted {
  --m4u-card-state-bg: var(--m4u-danger-soft);
  --m4u-card-state-border: var(--m4u-danger-border);
}

.problem-card-bookmarked:not(.problem-card-solved):not(.problem-card-studied),
.practice-card-bookmarked:not(.practice-card-solved):not(.practice-card-attempted) {
  --m4u-card-state-bg: var(--m4u-warning-soft);
  --m4u-card-state-border: var(--m4u-warning-border);
}

.problem-card-bookmarked,
.practice-card-bookmarked {
  box-shadow: var(--m4u-shadow), inset 4px 0 0 var(--m4u-warning-border) !important;
}

.section,
.filter-bar,
.filters,
.settings,
.preview-box,
.q-card,
.teaser,
.example-box,
.question-box,
.notes,
.sticky-toolbar,
.sticky-save,
.type-tip,
.help,
.drop-note {
  background-color: var(--m4u-surface) !important;
  color: var(--m4u-text) !important;
  border-color: var(--m4u-border) !important;
}

.filter-bar,
.settings,
.sticky-toolbar,
.sticky-save {
  background-color: var(--m4u-surface-2) !important;
}

.small-muted,
.form-help {
  color: var(--m4u-muted) !important;
}

.thumb {
  background-color: var(--m4u-surface) !important;
  border-color: var(--m4u-border) !important;
}

.example {
  background-color: var(--m4u-primary-soft) !important;
  color: var(--m4u-text) !important;
  border-color: var(--m4u-border) !important;
}

.highlight {
  background-color: var(--m4u-warning-soft) !important;
  color: var(--m4u-text) !important;
}

summary.show-solution,
.notes h2,
.notes h3,
.example h3 {
  color: var(--m4u-link) !important;
}

.bar {
  background: var(--m4u-nav-bg) !important;
  color: #ffffff !important;
}

.bar a {
  color: #ffdd57 !important;
}

html[data-theme="dark"] .table-dark {
  --bs-table-bg: var(--m4u-surface-2);
  --bs-table-color: var(--m4u-text);
  --bs-table-border-color: var(--m4u-border);
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
  color: var(--m4u-text) !important;
}

.badge-soft,
.totals-bar,
.database-note {
  background: var(--m4u-primary-soft) !important;
  color: var(--m4u-link) !important;
  border-color: var(--m4u-border) !important;
}

.database-note {
  color: var(--m4u-text) !important;
}

.database-note i {
  color: var(--m4u-link) !important;
}

a.badge-soft:hover {
  background: var(--m4u-surface-3) !important;
  color: var(--m4u-link-hover) !important;
}

.sub-item,
.practice-toolbar,
.problem-toolbar,
.practice-sidebar,
.problem-sidebar,
.practice-sidebar-link,
.problem-sidebar-link,
.practice-jump,
.problem-jump {
  background-color: var(--m4u-surface) !important;
  color: var(--m4u-text) !important;
  border-color: var(--m4u-border) !important;
}

.practice-mobile-nav,
.problem-mobile-nav {
  background-color: var(--m4u-bg) !important;
  border-color: var(--m4u-border) !important;
}

.practice-sidebar-link:hover,
.practice-sidebar-link.active,
.problem-sidebar-link:hover,
.problem-sidebar-link.active {
  background-color: var(--m4u-primary-soft) !important;
  border-color: var(--m4u-primary) !important;
  color: var(--m4u-link) !important;
}

.practice-sidebar-index,
.problem-sidebar-index {
  color: var(--m4u-link) !important;
}

.practice-sidebar-status,
.problem-sidebar-status {
  background: var(--m4u-muted) !important;
}

.practice-sidebar-link.solved .practice-sidebar-status,
.problem-sidebar-link.solved .problem-sidebar-status {
  background: var(--m4u-success-text) !important;
}

.practice-sidebar-link.attempted .practice-sidebar-status,
.problem-sidebar-link.studied .problem-sidebar-status {
  background: var(--m4u-danger-text) !important;
}

.practice-sidebar-toggle,
.problem-sidebar-toggle {
  background-color: var(--m4u-surface) !important;
  color: var(--m4u-link) !important;
  border-color: var(--m4u-border) !important;
  box-shadow: var(--m4u-shadow);
}

.practice-jump.active,
.problem-jump.active {
  border-color: var(--m4u-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(106, 169, 255, .16);
}

.practice-jump.solved,
.problem-jump.solved {
  border-color: var(--m4u-success-border) !important;
  color: var(--m4u-success-text) !important;
}

.practice-jump.attempted,
.problem-jump.studied {
  border-color: var(--m4u-danger-border) !important;
  color: var(--m4u-danger-text) !important;
}

.attempt-circle-solved {
  background: var(--m4u-success-soft) !important;
  border-color: var(--m4u-success-border) !important;
  color: var(--m4u-success-text) !important;
}

.attempt-circle-studied {
  background: var(--m4u-danger-soft) !important;
  border-color: var(--m4u-danger-border) !important;
  color: var(--m4u-danger-text) !important;
}

.bookmark-btn,
.solve-indicator {
  color: var(--m4u-muted) !important;
}

.solve-indicator.attempted {
  color: var(--m4u-danger-text) !important;
}

.bookmark-btn.bookmarked {
  color: var(--m4u-warning-text) !important;
}

.solve-indicator.solved {
  color: var(--m4u-success-text) !important;
}

.solution-media,
.marks-media,
.problem-media,
.notes-content,
.MathJax,
mjx-container {
  color: var(--m4u-text) !important;
}

.notes-content .alert,
.notes-content .bg-light,
.notes-content .bg-white,
.notes-content .bg-info,
.notes-content .bg-secondary {
  background-color: var(--m4u-surface-2) !important;
  color: var(--m4u-text) !important;
  border-color: var(--m4u-border) !important;
}

.notes-content .alert-info,
.notes-content .bg-info {
  background-color: var(--m4u-info-soft) !important;
}

.notes-content .text-white,
.notes-content .text-light,
.notes-content .text-dark,
.notes-content .text-body,
.notes-content .text-primary,
.notes-content .text-info,
.notes-content .text-secondary {
  color: var(--m4u-text) !important;
}

.notes-content .text-muted {
  color: var(--m4u-muted) !important;
}

.notes-content .MathJax,
.notes-content mjx-container {
  color: var(--m4u-text) !important;
}

code,
pre {
  background-color: var(--m4u-surface-2);
  color: var(--m4u-text);
  border-color: var(--m4u-border);
}

html[data-theme="dark"] img:not(.theme-keep-normal) {
  opacity: .96;
}

@media print {
  :root,
  html[data-theme="dark"] {
    color-scheme: light;
    --m4u-bg: #ffffff;
    --m4u-surface: #ffffff;
    --m4u-surface-2: #ffffff;
    --m4u-text: #111111;
    --m4u-muted: #555555;
    --m4u-border: #dddddd;
    --m4u-link: #111111;
  }
}