:root {
  color-scheme: light;
  --page-bg: #f6f8ff;
  --page-text: #1c1f30;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --header-bg: rgba(255, 255, 255, 0.94);
  --header-border: rgba(20, 34, 90, 0.12);
  --card-bg: rgba(255, 255, 255, 0.78);
  --muted: #5f6c8b;
  --accent: #4f7eff;
  --accent-strong: #3b62c5;
  --brand: #2e0c6d;
  --toggle-track: #d8e0ff;
  --toggle-thumb: #ffffff;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0d1227;
  --page-text: #edf2ff;
  --surface: rgba(16, 21, 42, 0.9);
  --surface-strong: rgba(14, 19, 38, 0.95);
  --header-bg: rgba(11, 16, 36, 0.92);
  --header-border: rgba(255, 255, 255, 0.14);
  --card-bg: rgba(15, 21, 40, 0.82);
  --muted: #a1b1d4;
  --accent: #80b6ff;
  --accent-strong: #5fa4ff;
  --brand: #9ab8ff;
  --toggle-track: rgba(255, 255, 255, 0.18);
  --toggle-thumb: #e4ecff;
}

body {
  background-color: var(--page-bg);
  color: var(--page-text);
  transition: background 0.25s ease, color 0.25s ease;
}

body::selection {
  background: rgba(79, 136, 255, 0.24);
  color: var(--page-text);
}

.nabbox::before,
.top-bar,
.navbox,
.container,
.container2,
#bannerbox {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.nabbox::before {
  background-color: rgba(255, 255, 255, 0.88);
}

body[data-theme="dark"] .nabbox::before {
  background-color: rgba(12, 18, 36, 0.88);
}

#b-text {
  color: var(--brand);
}

#menu,
#profile,
#back-link,
#user-icon,
.title h2,
#objective,
.theme-toggle,
.theme-toggle .label-text {
  color: var(--page-text);
}

#bannerbox {
  background-color: rgba(255, 255, 255, 0.28);
}

body[data-theme="dark"] #bannerbox {
  background-color: rgba(18, 24, 48, 0.72);
}

.box {
  box-shadow: 0 4px 24px rgba(33, 9, 56, 0.16);
}

body[data-theme="dark"] .box {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

.container,
.container2 {
  background-color: var(--card-bg);
  color: var(--page-text);
}

.top-bar,
.navbox {
  background: var(--header-bg);
}

.title h2 {
  color: var(--page-text);
}

select,
.time-picker select {
  background: var(--surface);
  color: var(--page-text);
  border: 2px solid var(--accent);
}

button,
.container2 button[type="submit"] {
  background: var(--accent);
  color: #ffffff;
}

button:hover,
.container2 button[type="submit"]:hover {
  filter: brightness(0.95);
}

.requests {
  background-color: rgba(255, 255, 255, 0.14);
}

body[data-theme="dark"] .requests {
  background-color: rgba(10, 18, 38, 0.74);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--page-text);
}

.theme-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.theme-toggle .switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--toggle-track);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.theme-toggle .switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--toggle-thumb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, background 0.25s ease;
}

.theme-toggle input:checked + .switch::after {
  transform: translateX(18px);
}

.theme-toggle input:checked + .switch {
  background: var(--accent);
  border-color: transparent;
}

.theme-toggle .label-text {
  display: none;
}

@media (min-width: 700px) {
  .theme-toggle .label-text {
    display: inline;
  }
}

.top-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}