:root {
  --bg-color: #f4f7fb;
  --surface-color: #ffffff;
  --surface-muted: #eef2f7;
  --text-color: #203040;
  --text-muted: #5b6777;
  --border-color: #d7deea;
  --accent-color: #1f6feb;
  --accent-soft: rgba(31, 111, 235, 0.12);
  --accent-strong: #1554b8;
  --accent-contrast: #ffffff;
  --menu-active-bg: rgba(31, 111, 235, 0.14);
  --sidebar-active-bg: #5f6b7a;
  --sidebar-active-text: #ffffff;
  --sidebar-text-color: #203040;
  --sidebar-muted-color: #516173;
  --sidebar-heading-color: #122033;
  --sidebar-hover-bg: rgba(31, 111, 235, 0.12);
  --shadow-color: rgba(31, 42, 68, 0.08);
  --code-bg: #f3f6fb;
}

:root[data-theme='dark'] {
  --bg-color: #0f1723;
  --surface-color: #182232;
  --surface-muted: #111a29;
  --text-color: #e6edf7;
  --text-muted: #9fb0c6;
  --border-color: #2b3a4e;
  --accent-color: #7cc4ff;
  --accent-soft: rgba(124, 196, 255, 0.16);
  --accent-strong: #a8dcff;
  --accent-contrast: #08111d;
  --menu-active-bg: rgba(124, 196, 255, 0.18);
  --sidebar-active-bg: #566273;
  --sidebar-active-text: #ffffff;
  --sidebar-text-color: #f2f7ff;
  --sidebar-muted-color: #c4d2e6;
  --sidebar-heading-color: #ffffff;
  --sidebar-hover-bg: rgba(124, 196, 255, 0.2);
  --shadow-color: rgba(0, 0, 0, 0.32);
  --code-bg: #0d1522;
}

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

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

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-color);
  color: var(--text-color);
  box-shadow: 0 10px 24px var(--shadow-color);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
  text-shadow: none;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-contrast);
}

.github-corner svg,
.sidebar,
.content,
.app-nav,
.cover-main,
.search input,
.sidebar ul li a,
.sidebar-toggle,
.markdown-section a,
.markdown-section code,
.markdown-section pre,
.markdown-section blockquote,
.markdown-section tr,
.markdown-section th,
.markdown-section td {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.sidebar {
  background: var(--surface-color);
  border-right: 1px solid var(--border-color);
  box-shadow: 0 18px 36px var(--shadow-color);
}

.sidebar,
.sidebar-nav,
.sidebar-nav a,
.sidebar ul li > a,
.sidebar p,
.sidebar .app-sub-sidebar li > a {
  color: var(--sidebar-text-color);
}

.sidebar .app-sub-sidebar li > a,
.sidebar p,
.sidebar .search input::placeholder {
  color: var(--sidebar-muted-color);
}

.sidebar strong,
.sidebar-nav strong,
.sidebar .sidebar-nav > ul > li > p {
  color: var(--sidebar-heading-color);
}

.content {
  background: var(--bg-color);
}

.cover-main {
  color: var(--text-color);
}

.cover-main > p:last-child a {
  border-radius: 999px;
}

.markdown-section,
.sidebar ul li a,
.app-nav a,
.anchor span,
.cover-main,
.sidebar-nav,
.sidebar-nav strong,
.search input,
.search .clear-button,
.pagination-item a,
.pagination-item span {
  color: var(--text-color);
  text-shadow: none;
}

.sidebar p,
.sidebar ul li.collapse .app-sub-sidebar li > a,
.markdown-section p,
.markdown-section li,
.markdown-section blockquote,
.app-nav li ul a,
.pagination-item-label,
.search input::placeholder {
  color: var(--text-muted);
}

.markdown-section a,
.sidebar ul li.active > a,
.app-nav a:hover {
  color: var(--accent-color);
}

.sidebar ul li > a {
  border-radius: 10px;
  display: block;
  padding: 0.35rem 0.6rem;
}

.sidebar ul li.active > a {
  background: var(--sidebar-active-bg);
  border-left: 4px solid var(--accent-color);
  color: var(--sidebar-active-text);
  font-weight: 700;
  padding-left: calc(0.6rem - 4px);
  text-shadow: none;
}

.sidebar ul li > a:hover,
.app-nav a:hover {
  background: var(--sidebar-hover-bg);
  border-radius: 10px;
  color: var(--sidebar-heading-color);
  text-shadow: none;
}

.markdown-section strong,
.sidebar-nav strong {
  color: var(--text-color);
}

.search {
  margin-bottom: 1rem;
}

.search input {
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.sidebar .search input {
  color: var(--sidebar-text-color);
}

/* Keep the sidebar readable even when Docsify theme rules are more generic. */
.sidebar .sidebar-nav,
.sidebar .sidebar-nav a,
.sidebar ul li > a,
.sidebar .search input {
  color: var(--sidebar-text-color);
}

.sidebar p,
.sidebar .app-sub-sidebar li > a,
.sidebar .search input::placeholder {
  color: var(--sidebar-muted-color);
}

.sidebar .sidebar-nav strong,
.sidebar .sidebar-nav > ul > li > p {
  color: var(--sidebar-heading-color);
}

.search .results-panel {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
}

.search .matching-post {
  border-bottom: 1px solid var(--border-color);
}

.search .matching-post:last-child {
  border-bottom: 0;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  color: var(--text-color);
}

.markdown-section blockquote {
  background: var(--surface-muted);
  border-left: 4px solid var(--accent-color);
}

.markdown-section code {
  background: var(--accent-soft);
  color: var(--accent-color);
}

.markdown-section pre {
  background: var(--code-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 24px var(--shadow-color);
}

.markdown-section pre code {
  background: transparent;
  color: var(--text-color);
}

.markdown-section table {
  border-color: var(--border-color);
}

.markdown-section tr:nth-child(2n) {
  background: var(--surface-muted);
}

.markdown-section th,
.markdown-section td {
  border: 1px solid var(--border-color);
}

.pagination-item a,
.pagination-item span {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 10px 22px var(--shadow-color);
  color: var(--text-color);
  text-shadow: none;
}

.sidebar-toggle {
  background: var(--surface-color);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 8px 20px var(--shadow-color);
}

.sidebar-toggle span {
  background: var(--text-color);
}

section.cover {
  background:
    radial-gradient(circle at top, var(--accent-soft), transparent 36%),
    linear-gradient(180deg, var(--bg-color) 0%, var(--surface-muted) 100%);
}

section.cover .cover-main > p:last-child a:last-child {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-contrast);
  font-weight: 700;
  text-shadow: none;
}

section.cover .cover-main > p:last-child a:first-child {
  background: var(--surface-color);
  border-color: var(--accent-color);
  color: var(--accent-strong);
  font-weight: 700;
  text-shadow: none;
}

section.cover .cover-main > p:last-child a:hover {
  box-shadow: 0 12px 28px var(--shadow-color);
}

section.cover .cover-main > p:last-child a:first-child:hover {
  background: var(--menu-active-bg);
}

section.cover .cover-main > p:last-child a:last-child:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-contrast);
}

@media (max-width: 768px) {
  .theme-toggle {
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.8rem;
    padding: 0.55rem 0.8rem;
  }
}
