html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Carousel Background ── */

.carousel-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out;
  z-index: 0;
}

.carousel-container.no-carousel {
  position: static;
  min-height: auto;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.carousel-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 56px); /* viewport minus navbar */
  padding-top: 56px;
}

/* ── Footer Copyright (centered, small font) ── */

footer.border-top.footer {
  text-align: center;
  font-size: 0.75rem;
}

/* ── Navbar: semi-transparent on carousel home, hover to opaque ── */

body.carousel-home header nav.navbar {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(4px);
  transition: background 0.4s ease;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1050;
}

body.carousel-home header nav.navbar:hover {
  background: rgba(0, 0, 0, 0.85) !important;
}

body.carousel-home header nav.navbar .navbar-brand,
body.carousel-home header nav.navbar .nav-link,
body.carousel-home header nav.navbar .dropdown-toggle,
body.carousel-home header nav.navbar .dropdown-item {
  color: #fff !important;
}

/* ── Language Panel (card panel) ── */

.lang-switcher { position: relative; }
.lang-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; color: inherit; }
.lang-toggle:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; border-radius: 4px; }
.lang-flag { font-weight: 600; font-size: 0.85em; }
.lang-panel {
  position: absolute; top: 100%; right: 0; z-index: 1050;
  min-width: 200px; max-width: calc(100vw - 20px);
  background: #fff; border: 1px solid #dee2e6;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 12px; margin-top: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.lang-panel[hidden] { display: none; }
.lang-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 12px; border: 2px solid #e9ecef; border-radius: 10px;
  background: #fff; cursor: pointer; transition: all 0.15s ease;
  color: #212529; position: relative;
}
.lang-card:hover { border-color: #0d6efd; background: #f8f9ff; }
.lang-card.active { border-color: #0d6efd; background: #e8f0fe; }
.lang-card .lang-flag { font-size: 1.2rem; }
.lang-card .card-label { font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.lang-card .card-sublabel { font-size: 0.65rem; color: #6c757d; white-space: nowrap; }
.lang-card .check-icon { position: absolute; top: 4px; right: 4px; font-size: 0.7rem; color: #0d6efd; display: none; }
.lang-card.active .check-icon { display: block; }
[data-bs-theme="dark"] .lang-panel { background: #212529; border-color: #495057; }
[data-bs-theme="dark"] .lang-card { background: #2c3034; border-color: #495057; color: #dee2e6; }
[data-bs-theme="dark"] .lang-card:hover { border-color: #6ea8fe; background: #373b3e; }
[data-bs-theme="dark"] .lang-card.active { border-color: #6ea8fe; background: #1a3a5c; }
[data-bs-theme="dark"] .lang-card .card-sublabel { color: #adb5bd; }
[data-bs-theme="dark"] .lang-card .check-icon { color: #6ea8fe; }
@media (max-width: 576px) {
  .lang-panel { min-width: auto; width: calc(100vw - 20px); right: -60px; }
}

/* ── Theme Popover Panel ── */

.theme-switcher { position: relative; }
.theme-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; color: inherit; }
.theme-toggle:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; border-radius: 4px; }
.theme-panel {
  position: absolute; top: 100%; right: 0; z-index: 1050;
  min-width: 280px; max-width: calc(100vw - 20px);
  background: #fff; border: 1px solid #dee2e6;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 12px; margin-top: 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.theme-panel[hidden] { display: none; }
.theme-cards-row {
  display: flex; flex-direction: row; gap: 8px;
}
.theme-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border: 2px solid #e9ecef; border-radius: 10px;
  background: #fff; cursor: pointer; transition: all 0.15s ease;
  color: #212529; position: relative;
}
.theme-card:hover { border-color: #0d6efd; background: #f8f9ff; }
.theme-card.active { border-color: #0d6efd; background: #e8f0fe; }
.theme-card .card-icon { font-size: 1.4rem; line-height: 1; }
.theme-card .card-label { font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.theme-card .check-icon { position: absolute; top: 4px; right: 4px; font-size: 0.7rem; color: #0d6efd; display: none; }
.theme-card.active .check-icon { display: block; }
[data-bs-theme="dark"] .theme-panel { background: #212529; border-color: #495057; }
[data-bs-theme="dark"] .theme-card { background: #2c3034; border-color: #495057; color: #dee2e6; }
[data-bs-theme="dark"] .theme-card:hover { border-color: #6ea8fe; background: #373b3e; }
[data-bs-theme="dark"] .theme-card.active { border-color: #6ea8fe; background: #1a3a5c; }
[data-bs-theme="dark"] .theme-card .check-icon { color: #6ea8fe; }
.home-theme-note {
  font-size: 0.72rem; color: #6c757d; text-align: center;
  border: none; background: none; display: block;
}
[data-bs-theme="dark"] .home-theme-note { color: #adb5bd; }
@media (max-width: 576px) {
  .theme-panel { min-width: auto; width: calc(100vw - 20px); right: -60px; }
  .theme-card { padding: 10px 4px; }
}

/* ── Article Content Styles ── */

.article-content h1 { font-size: 1.8rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.article-content h2 { font-size: 1.5rem; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.article-content h3 { font-size: 1.25rem; margin-top: 1rem; margin-bottom: 0.5rem; }
.article-content p { line-height: 1.8; margin-bottom: 1rem; }
.article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.article-content pre { background: #f5f5f5; border-radius: 8px; padding: 1rem; overflow-x: auto; }
.article-content code { background: #f0f0f0; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
.article-content pre code { background: none; padding: 0; }
.article-content blockquote { border-left: 4px solid #dee2e6; padding-left: 1rem; color: #6c757d; margin: 1rem 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.article-content th, .article-content td { border: 1px solid #dee2e6; padding: 0.5rem; }
.article-content th { background: #f5f5f5;
}

body.carousel-home header nav.navbar .nav-link:hover,
body.carousel-home header nav.navbar .navbar-brand:hover {
  color: #d1d1d1 !important;
}

body.carousel-home header nav.navbar .dropdown-menu {
  background: rgba(0, 0, 0, 0.9) !important;
}

body.carousel-home header nav.navbar .dropdown-item {
  color: #fff !important;
}

body.carousel-home header nav.navbar .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d1d1d1 !important;
}

body.carousel-home header nav.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-width='2' d='M4 6h22M4 15h22M4 24h22'/%3E%3C/svg%3E");
}

/* ── Navbar: dark theme override ── */

[data-bs-theme="dark"] header nav.navbar {
  background-color: var(--bs-dark) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] header nav.navbar .navbar-brand,
[data-bs-theme="dark"] header nav.navbar .nav-link,
[data-bs-theme="dark"] header nav.navbar .dropdown-toggle {
  color: var(--bs-light) !important;
}

[data-bs-theme="dark"] header nav.navbar .nav-link:hover,
[data-bs-theme="dark"] header nav.navbar .navbar-brand:hover {
  color: #fff !important;
}

[data-bs-theme="dark"] header nav.navbar .dropdown-menu {
  background-color: var(--bs-dark) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] header nav.navbar .dropdown-item {
  color: var(--bs-light) !important;
}

[data-bs-theme="dark"] header nav.navbar .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] header nav.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-width='2' d='M4 6h22M4 15h22M4 24h22'/%3E%3C/svg%3E");
}

/* 第三方登录图标按钮（圆形） */
.btn-icon-circle {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, transform .15s ease-in-out;
}

.btn-icon-circle:hover {
  transform: scale(1.08);
}