/* =========================================================
   TEMA CLARO
   Paleta quente inspirada em deserto claro, bronze antigo e tinta café.
========================================================= */

html[data-theme="light"] {
  --gold: #b87928;
  --gold-light: #edc66f;
  --gold-dark: #6c3f15;
  --gold-border: rgba(150, 95, 33, 0.36);
  --border-gold: rgba(150, 95, 33, 0.34);
  --border-gold-soft: rgba(150, 95, 33, 0.18);

  --night: #d7b980;
  --night-deep: #ad7d48;
  --cream: #2d241b;
  --text: rgba(35, 30, 25, 0.90);
  --muted: rgba(35, 30, 25, 0.64);
  --white-soft: rgba(35, 30, 25, 0.88);
  --text-muted: rgba(35, 30, 25, 0.64);

  --glass: rgba(255, 246, 228, 0.58);
  --glass-soft: rgba(255, 255, 255, 0.32);
  --card-bg: rgba(255, 244, 223, 0.68);
  --card-bg-strong: rgba(245, 225, 188, 0.82);

  --shadow-dark: 0 22px 58px rgba(43, 35, 27, 0.22);
  --shadow-gold: 0 0 24px rgba(140, 91, 37, 0.20);

  --light-desert-size: auto 125vh;
  --light-desert-position: 74% clamp(-230px, calc(-62px - 15vh), -170px);

  color-scheme: light;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 50% -12%, rgba(134, 185, 212, 0.26), transparent 36%),
    linear-gradient(180deg, #dfc99d 0%, #c99a61 52%, #b97742 100%);
  color: rgba(35, 30, 25, 0.90);
}

/* =========================================================
   CABEÇALHO E NAVEGAÇÃO
========================================================= */

html[data-theme="light"] #header,
html[data-theme="light"] .header-sobre {
  background: linear-gradient(
    to bottom,
    rgba(255, 249, 237, 0.84),
    rgba(255, 249, 237, 0.46),
    rgba(255, 249, 237, 0)
  );
}

html[data-theme="light"] #header.scrolled,
html[data-theme="light"] .header-sobre.scrolled {
  background: rgba(255, 247, 230, 0.90);
  border-bottom-color: rgba(184, 121, 40, 0.22);
  box-shadow: 0 12px 32px rgba(91, 58, 26, 0.16);
}

html[data-theme="light"] .brand-logo,
html[data-theme="light"] .side-logo img {
  filter:
    drop-shadow(0 2px 0 rgba(255, 250, 238, 0.55))
    drop-shadow(0 8px 16px rgba(70, 42, 16, 0.28));
}

html[data-theme="light"] .menu-desktop a {
  color: rgba(45, 36, 27, 0.86);
  text-shadow: 0 1px 0 rgba(255, 252, 243, 0.70);
}

html[data-theme="light"] .menu-desktop a:hover,
html[data-theme="light"] .menu-desktop a.active {
  color: #8d551d;
}

html[data-theme="light"] .menu-desktop a::after {
  background: #a9712f;
  box-shadow: 0 0 10px rgba(169, 113, 47, 0.40);
}

html[data-theme="light"] .theme-button,
html[data-theme="light"] .menu-toggle,
html[data-theme="light"] #backToTop,
html[data-theme="light"] .close-menu {
  border-color: rgba(232, 199, 134, 0.32);
  background: rgba(255, 247, 230, 0.72);
  color: #81501b;
}

html[data-theme="light"] .theme-button:hover,
html[data-theme="light"] .menu-toggle:hover,
html[data-theme="light"] #backToTop:hover {
  background: rgba(255, 252, 244, 0.86);
  box-shadow: 0 0 22px rgba(169, 113, 47, 0.18);
}

html[data-theme="light"] .menu-toggle span {
  background: #81501b;
}

html[data-theme="light"] #side-menu {
  background:
    linear-gradient(rgba(255, 249, 236, 0.90), rgba(236, 203, 155, 0.94)),
    var(--night-deep);
  border-left-color: rgba(139, 92, 36, 0.26);
}

html[data-theme="light"] .side-logo h2,
html[data-theme="light"] .side-logo p,
html[data-theme="light"] .side-links i {
  color: #6e471b;
}

html[data-theme="light"] .side-links a {
  color: rgba(45, 38, 31, 0.78);
}

html[data-theme="light"] .side-links a:hover {
  background: rgba(169, 113, 47, 0.10);
  border-color: rgba(139, 92, 36, 0.28);
  color: #5c3a16;
}

/* =========================================================
   FUNDOS E TÍTULOS
========================================================= */

html[data-theme="light"] .hero::before,
html[data-theme="light"] .sobre-hero::before,
html[data-theme="light"] .fichamentos-page::before,
html[data-theme="light"] .vocab-page::before,
html[data-theme="light"] .contato-page::before {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(to right, rgba(255, 248, 232, 0.14), transparent 28%, transparent 72%, rgba(255, 248, 232, 0.14));
}

html[data-theme="light"] .hero::after,
html[data-theme="light"] .sobre-hero::after,
html[data-theme="light"] .fichamentos-page::after,
html[data-theme="light"] .vocab-page::after,
html[data-theme="light"] .contato-page::after {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(169, 104, 43, 0.24)),
    linear-gradient(to right, rgba(89, 54, 23, 0.08), transparent 22%, transparent 78%, rgba(89, 54, 23, 0.08));
}

html[data-theme="light"] .hero-shade,
html[data-theme="light"] .sobre-hero-overlay,
html[data-theme="light"] .page-overlay {
  background: linear-gradient(to bottom, transparent, rgba(188, 123, 62, 0.36), rgba(132, 79, 40, 0.52));
}

html[data-theme="light"] .hero,
html[data-theme="light"] .sobre-hero,
html[data-theme="light"] .fichamentos-page,
html[data-theme="light"] .vocab-page,
html[data-theme="light"] .contato-page {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 252, 244, 0.30) 0%,
      rgba(255, 246, 226, 0.10) 40%,
      rgba(219, 157, 83, 0.08) 64%,
      rgba(126, 73, 35, 0.32) 100%
    ),
    url("imagens/desertoclaroatualizado.png") center center / cover no-repeat;
  background-position: center center, var(--light-desert-position);
  background-repeat: no-repeat;
  background-size: auto, var(--light-desert-size);
}

html[data-theme="light"] .fichamentos-page,
html[data-theme="light"] .vocab-page {
  --light-desert-size: auto 132vh;
  --light-desert-position: 74% -160px;
}

html[data-theme="light"] .sobre-hero {
  --light-desert-size: auto 134vh;
  --light-desert-position: 70% -190px;
}

html[data-theme="light"] .contato-page {
  --light-desert-size: auto 126vh;
  --light-desert-position: 74% -148px;
}

html[data-theme="light"] .hero-kicker {
  border-color: rgba(139, 92, 36, 0.18);
  background: rgba(255, 250, 239, 0.58);
  color: #5c3a16;
  text-shadow: none;
}

html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero-title-area h1 {
  color: #30281d;
  text-shadow:
    0 1px 0 rgba(255, 252, 244, 0.90),
    0 12px 32px rgba(107, 65, 25, 0.22),
    0 0 18px rgba(255, 225, 161, 0.24);
}

html[data-theme="light"] .hero-subtitle,
html[data-theme="light"] .hero-title-area p {
  color: rgba(92, 56, 24, 0.88);
  text-shadow: 0 1px 0 rgba(255, 252, 244, 0.76);
}

html[data-theme="light"] .ornament,
html[data-theme="light"] .small-ornament {
  color: #a9712f;
}

html[data-theme="light"] .ornament span,
html[data-theme="light"] .small-ornament span {
  background: linear-gradient(to right, transparent, rgba(169, 113, 47, 0.56));
}

html[data-theme="light"] .ornament span:last-child,
html[data-theme="light"] .small-ornament span:last-child {
  background: linear-gradient(to left, transparent, rgba(169, 113, 47, 0.56));
}

/* =========================================================
   BOTÕES, BUSCA E FILTROS
========================================================= */

html[data-theme="light"] .primary-btn,
html[data-theme="light"] .submit-button,
html[data-theme="light"] .historia-btn,
html[data-theme="light"] .filtro-btn.active,
html[data-theme="light"] .filtro-btn:hover,
html[data-theme="light"] .category-btn.active,
html[data-theme="light"] .category-btn:hover,
html[data-theme="light"] .page-btn.active,
html[data-theme="light"] .page-btn:hover:not(:disabled) {
  border-color: rgba(107, 67, 25, 0.34);
  background: linear-gradient(135deg, #c99143, #7c4e1d);
  color: #fff7e6;
  box-shadow:
    0 12px 28px rgba(73, 50, 26, 0.18),
    0 0 18px rgba(169, 113, 47, 0.14);
}

html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .filtro-btn,
html[data-theme="light"] .category-btn,
html[data-theme="light"] .page-btn {
  border-color: rgba(139, 92, 36, 0.26);
  background: rgba(255, 248, 234, 0.62);
  color: rgba(47, 38, 28, 0.78);
}

html[data-theme="light"] .search-box,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {
  border-color: rgba(88, 67, 43, 0.28);
  background: rgba(255, 248, 234, 0.68);
  color: rgba(47, 38, 28, 0.86);
  box-shadow: 0 14px 34px rgba(43, 35, 27, 0.14);
}

html[data-theme="light"] .search-box:focus-within,
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group textarea:focus {
  border-color: rgba(127, 82, 31, 0.50);
  background: rgba(255, 252, 244, 0.82);
  box-shadow:
    0 14px 34px rgba(43, 35, 27, 0.16),
    0 0 18px rgba(140, 91, 37, 0.12);
}

html[data-theme="light"] .search-box input,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {
  color: rgba(47, 38, 28, 0.86);
}

html[data-theme="light"] .search-box input::placeholder,
html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder {
  color: rgba(47, 38, 28, 0.46);
}

html[data-theme="light"] .search-box i,
html[data-theme="light"] .filtro-btn i,
html[data-theme="light"] .category-btn i {
  color: #7c4e1d;
}

html[data-theme="light"] .form-group label {
  color: #5c3a16;
}

html[data-theme="light"] .category-list {
  scrollbar-color: rgba(169, 113, 47, 0.72) rgba(255, 250, 239, 0.58);
}

html[data-theme="light"] .category-list::-webkit-scrollbar-track {
  background: rgba(255, 250, 239, 0.58);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 36, 0.14);
}

html[data-theme="light"] .category-list::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(153, 105, 38, 0.62), rgba(201, 145, 67, 0.86));
}

/* =========================================================
   PAINÉIS E CARDS
========================================================= */

html[data-theme="light"] .study-counter,
html[data-theme="light"] .resource-card,
html[data-theme="light"] .sobre-card,
html[data-theme="light"] .mission-panel,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .ficha-card,
html[data-theme="light"] .vocab-card,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .comunidade-card,
html[data-theme="light"] .sobre-texto p,
html[data-theme="light"] blockquote {
  border-color: rgba(92, 69, 43, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 249, 236, 0.78), rgba(218, 167, 96, 0.22)),
    rgba(255, 240, 212, 0.54);
  color: rgba(47, 38, 28, 0.86);
  box-shadow: 0 18px 44px rgba(43, 35, 27, 0.18);
  backdrop-filter: blur(16px);
}

html[data-theme="light"] .resource-card:hover,
html[data-theme="light"] .ficha-card:hover,
html[data-theme="light"] .vocab-card:hover {
  border-color: rgba(127, 82, 31, 0.46);
  box-shadow:
    0 24px 54px rgba(43, 35, 27, 0.22),
    0 0 22px rgba(140, 91, 37, 0.14);
}

html[data-theme="light"] .card-icon,
html[data-theme="light"] .ficha-icon,
html[data-theme="light"] .vocab-icon,
html[data-theme="light"] .channel-icon,
html[data-theme="light"] .stat-item i,
html[data-theme="light"] .recursos-lista li > span,
html[data-theme="light"] .audio-btn {
  border-color: rgba(139, 92, 36, 0.28);
  background: rgba(169, 113, 47, 0.10);
  color: #6e471b;
}

html[data-theme="light"] .card-content h2,
html[data-theme="light"] .sobre-card h2,
html[data-theme="light"] .mission-text h2,
html[data-theme="light"] .channels-card h2,
html[data-theme="light"] .ficha-card h2,
html[data-theme="light"] .empty-state h2,
html[data-theme="light"] .footer-col h3 {
  color: #2d241b;
}

html[data-theme="light"] .card-content p,
html[data-theme="light"] .sobre-card p,
html[data-theme="light"] .mission-text p,
html[data-theme="light"] .ficha-card p,
html[data-theme="light"] .footer-desc,
html[data-theme="light"] .comunidade-card p:not(.section-kicker),
html[data-theme="light"] .sobre-texto p,
html[data-theme="light"] .recursos-lista p,
html[data-theme="light"] .channel-item small,
html[data-theme="light"] .result-count,
html[data-theme="light"] .empty-state p {
  color: rgba(35, 30, 25, 0.72);
}

html[data-theme="light"] .card-content a,
html[data-theme="light"] .ficha-bottom a,
html[data-theme="light"] .footer-col a,
html[data-theme="light"] .section-kicker,
html[data-theme="light"] .arabic-text,
html[data-theme="light"] .recursos-lista strong,
html[data-theme="light"] .channel-item strong,
html[data-theme="light"] .ficha-bottom span i {
  color: #654017;
}

html[data-theme="light"] .contador-item span,
html[data-theme="light"] .stat-item strong,
html[data-theme="light"] .vocab-main h2,
html[data-theme="light"] blockquote p {
  color: #533411;
  text-shadow: none;
}

html[data-theme="light"] .counter-title,
html[data-theme="light"] .contador-item small,
html[data-theme="light"] .ficha-bottom span,
html[data-theme="light"] .vocab-meta span {
  color: rgba(35, 30, 25, 0.62);
}

html[data-theme="light"] .vocab-main p {
  color: rgba(35, 30, 25, 0.80);
}

html[data-theme="light"] .vocab-tag {
  background: rgba(56, 83, 78, 0.16);
  color: #263f3b;
}

html[data-theme="light"] .counter-divider,
html[data-theme="light"] .vocab-meta,
html[data-theme="light"] .mission-text,
html[data-theme="light"] .stat-item,
html[data-theme="light"] .channel-item {
  border-color: rgba(139, 92, 36, 0.18);
}

/* =========================================================
   SEÇÕES E RODAPÉ
========================================================= */

html[data-theme="light"] #sobre-simples,
html[data-theme="light"] #comunidade {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 239, 198, 0.32), transparent 34%),
    linear-gradient(180deg, #d4ad72 0%, #9b663a 100%);
}

html[data-theme="light"] #footer {
  background: #6d4322;
  border-top-color: rgba(255, 222, 164, 0.20);
}

html[data-theme="light"] #footer .footer-col h3,
html[data-theme="light"] #footer .arabic-text,
html[data-theme="light"] #footer .heart {
  color: #f6d38d;
}

html[data-theme="light"] #footer .footer-desc,
html[data-theme="light"] #footer .footer-col a {
  color: rgba(255, 247, 225, 0.72);
}

html[data-theme="light"] #footer .footer-col a:hover {
  color: #ffe1a1;
}

html[data-theme="light"] .footer-bottom {
  border-top-color: rgba(232, 199, 134, 0.18);
  color: rgba(255, 247, 225, 0.66);
}

html[data-theme="light"] .social-icons a {
  border-color: rgba(232, 199, 134, 0.24);
  background: rgba(255, 247, 225, 0.10);
  color: #f6d38d;
}

html[data-theme="light"] .social-icons a:hover {
  background: rgba(169, 113, 47, 0.12);
}

/* A home tem mais respiro visual que as internas; no claro ela sobe um pouco. */
html[data-theme="light"] .hero-content {
  padding-top: clamp(230px, 30vh, 260px);
}

/* Mantém os títulos das internas abaixo da faixa das luas do fundo claro. */
html[data-theme="light"] .sobre-content {
  padding-top: clamp(148px, 21vh, 168px);
}

html[data-theme="light"] .fichamentos-content,
html[data-theme="light"] .contato-content {
  padding-top: clamp(258px, 37vh, 282px);
}

html[data-theme="light"] .vocab-content {
  padding-top: clamp(274px, 39vh, 300px);
}

@media (max-width: 1260px) {
  html[data-theme="light"] .sobre-content {
    padding-top: clamp(140px, 20vh, 160px);
  }

  html[data-theme="light"] .fichamentos-content,
  html[data-theme="light"] .contato-content {
    padding-top: clamp(246px, 35vh, 270px);
  }

  html[data-theme="light"] .vocab-content {
    padding-top: clamp(258px, 36vh, 284px);
  }
}

@media (max-width: 960px) {
  html[data-theme="light"] {
    --light-desert-size: auto 130vh;
    --light-desert-position: 50% clamp(-224px, calc(-70px - 14vh), -164px);
  }

  html[data-theme="light"] .hero,
  html[data-theme="light"] .sobre-hero,
  html[data-theme="light"] .fichamentos-page,
  html[data-theme="light"] .vocab-page,
  html[data-theme="light"] .contato-page {
    background-position: center center, var(--light-desert-position);
    background-size: auto, var(--light-desert-size);
  }

  html[data-theme="light"] .vocab-content {
    padding-top: clamp(238px, 34vh, 264px);
  }

  html[data-theme="light"] .hero-content {
    padding-top: clamp(210px, 30vh, 245px);
  }

  html[data-theme="light"] .fichamentos-content,
  html[data-theme="light"] .contato-content {
    padding-top: clamp(228px, 33vh, 252px);
  }

  html[data-theme="light"] .sobre-hero,
  html[data-theme="light"] .fichamentos-page,
  html[data-theme="light"] .vocab-page,
  html[data-theme="light"] .contato-page {
    --light-desert-position: 50% clamp(-218px, calc(-74px - 14vh), -162px);
  }

  html[data-theme="light"] .sobre-hero {
    --light-desert-size: auto 136vh;
  }
}

@media (max-width: 650px) {
  html[data-theme="light"] {
    --light-desert-size: auto 138vh;
    --light-desert-position: 50% clamp(-210px, calc(-74px - 13vh), -164px);
  }

  html[data-theme="light"] .hero,
  html[data-theme="light"] .sobre-hero,
  html[data-theme="light"] .fichamentos-page,
  html[data-theme="light"] .vocab-page,
  html[data-theme="light"] .contato-page {
    background-position: center center, var(--light-desert-position);
    background-size: auto, var(--light-desert-size);
  }

  html[data-theme="light"] .vocab-content {
    padding-top: clamp(220px, 34vh, 246px);
  }

  html[data-theme="light"] .hero-content {
    padding-top: 172px;
  }

  html[data-theme="light"] .fichamentos-content,
  html[data-theme="light"] .contato-content {
    padding-top: clamp(210px, 33vh, 236px);
  }

  html[data-theme="light"] .sobre-hero,
  html[data-theme="light"] .fichamentos-page,
  html[data-theme="light"] .vocab-page,
  html[data-theme="light"] .contato-page {
    --light-desert-position: 50% clamp(-202px, calc(-78px - 12vh), -156px);
  }

  html[data-theme="light"] .sobre-hero {
    --light-desert-size: auto 142vh;
  }
}

@media (max-width: 420px) {
  html[data-theme="light"] .vocab-content {
    padding-top: clamp(206px, 32vh, 228px);
  }

  html[data-theme="light"] .hero-content {
    padding-top: 152px;
  }

  html[data-theme="light"] .fichamentos-content,
  html[data-theme="light"] .contato-content {
    padding-top: clamp(196px, 31vh, 218px);
  }
}

/* =========================================================
   MENU LATERAL PREMIUM
========================================================= */

#side-menu {
  top: 7px;
  right: -370px;
  bottom: 7px;
  width: min(336px, calc(100vw - 16px));
  height: auto;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  transition: right 0.32s ease;
}

#side-menu.active {
  right: 8px;
}

#side-menu::before,
#side-menu::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#side-menu::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 14%, rgba(247, 221, 176, 0.08), transparent 16%),
    radial-gradient(circle at 78% 30%, rgba(216, 174, 95, 0.07), transparent 18%),
    radial-gradient(circle at 32% 72%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1.5px),
    linear-gradient(145deg, rgba(216, 174, 95, 0.08), transparent 28%, rgba(0, 0, 0, 0.14));
}

#side-menu::after {
  top: 22%;
  left: -2px;
  z-index: 1;
  width: 4px;
  height: 96px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, var(--gold-light), transparent);
  box-shadow:
    0 0 20px rgba(247, 221, 176, 0.75),
    0 0 42px rgba(216, 174, 95, 0.36);
}

.side-menu-inner {
  position: relative;
  z-index: 2;
  min-height: 100%;
  padding: 26px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.close-menu {
  z-index: 4;
  pointer-events: auto;
}

.side-logo {
  margin: 0;
  text-align: left;
}

.side-logo img {
  display: block;
  width: min(218px, 86%);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.side-ornament {
  width: calc(100% - 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
  opacity: 0.82;
}

.side-ornament span {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(216, 174, 95, 0.55));
}

.side-ornament span:last-child {
  background: linear-gradient(to left, transparent, rgba(216, 174, 95, 0.55));
}

.side-ornament i {
  font-size: 0.58rem;
  filter: drop-shadow(0 0 8px rgba(247, 221, 176, 0.42));
}

.side-links {
  gap: 5px;
}

.side-links a {
  position: relative;
  min-height: 46px;
  padding: 0 14px;
  gap: 14px;
  border-radius: 9px;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.96rem;
  letter-spacing: 0;
  overflow: hidden;
}

.side-links a i {
  width: 25px;
  flex: 0 0 25px;
  text-align: center;
  font-size: 1.08rem;
}

.side-links a span {
  flex: 1;
}

.side-links a.active {
  border-color: rgba(216, 174, 95, 0.32);
}

.side-links a.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(216, 174, 95, 0.20), transparent 62%),
    radial-gradient(circle at 0 50%, rgba(247, 221, 176, 0.22), transparent 34%);
}

.side-links a.active::after {
  content: "\f186";
  position: absolute;
  right: 15px;
  top: 50%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
  transform: translateY(-50%);
}

.side-status-card {
  margin-top: auto;
  padding: 14px 14px 12px;
  border-radius: 12px;
}

.side-days-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 12px;
}

.side-days-seal {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}

.side-days-row strong {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
}

.side-days-row span {
  display: block;
  margin-top: 3px;
  font-size: 0.9rem;
}

.side-status-card p {
  margin: 10px 0 13px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.side-theme-toggle {
  width: 100%;
  min-height: 42px;
  padding: 0 6px 0 12px;
  border-radius: 9px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font: inherit;
}

.side-theme-toggle > span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
}

.side-theme-switch {
  position: relative;
  width: 52px;
  height: 26px;
  border-radius: 999px;
  flex: 0 0 52px;
}

.side-theme-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.side-theme-toggle.is-night-active .side-theme-switch span {
  transform: translateX(26px);
}

html:not([data-theme="light"]) #side-menu {
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 174, 95, 0.10), transparent 30%),
    radial-gradient(circle at 14% 28%, rgba(247, 221, 176, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(5, 19, 25, 0.98), rgba(2, 9, 13, 0.99) 62%, rgba(1, 7, 10, 1));
  border: 1px solid rgba(216, 174, 95, 0.58);
  box-shadow:
    -18px 0 48px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(247, 221, 176, 0.08),
    inset 0 0 34px rgba(216, 174, 95, 0.08);
  color: rgba(255, 247, 225, 0.88);
}

html:not([data-theme="light"]) .close-menu {
  border-color: rgba(216, 174, 95, 0.26);
  background: rgba(4, 13, 17, 0.46);
  color: var(--gold-light);
}

html:not([data-theme="light"]) .side-logo img {
  filter:
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 16px rgba(216, 174, 95, 0.16));
}

html:not([data-theme="light"]) .side-links a {
  color: rgba(255, 238, 207, 0.76);
  border-color: transparent;
}

html:not([data-theme="light"]) .side-links a:hover,
html:not([data-theme="light"]) .side-links a.active {
  color: var(--gold-light);
  background: rgba(216, 174, 95, 0.10);
  box-shadow:
    inset 0 0 0 1px rgba(216, 174, 95, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

html:not([data-theme="light"]) .side-links a i,
html:not([data-theme="light"]) .side-links a.active::after {
  color: var(--gold);
}

html:not([data-theme="light"]) .side-status-card {
  border: 1px solid rgba(216, 174, 95, 0.26);
  background:
    radial-gradient(circle at 20% 18%, rgba(216, 174, 95, 0.13), transparent 34%),
    rgba(2, 12, 16, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 225, 0.04),
    0 18px 36px rgba(0, 0, 0, 0.25);
}

html:not([data-theme="light"]) .side-days-seal {
  border: 1px solid rgba(216, 174, 95, 0.38);
  color: var(--gold-light);
  background: rgba(216, 174, 95, 0.08);
  box-shadow: inset 0 0 22px rgba(216, 174, 95, 0.08);
}

html:not([data-theme="light"]) .side-days-row strong {
  color: var(--gold-light);
}

html:not([data-theme="light"]) .side-days-row span,
html:not([data-theme="light"]) .side-status-card p {
  color: rgba(255, 238, 207, 0.76);
}

html:not([data-theme="light"]) .side-theme-toggle {
  background: rgba(5, 16, 20, 0.72);
  color: rgba(255, 238, 207, 0.82);
}

html:not([data-theme="light"]) .side-theme-toggle i {
  color: var(--gold);
}

html:not([data-theme="light"]) .side-theme-switch {
  border: 1px solid rgba(216, 174, 95, 0.40);
  background: rgba(216, 174, 95, 0.15);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.24);
}

html:not([data-theme="light"]) .side-theme-switch span {
  background: linear-gradient(135deg, #f8df9d, #ad6a26);
  box-shadow: 0 0 12px rgba(247, 221, 176, 0.38);
}

html[data-theme="light"] .side-menu-inner {
  scrollbar-color: rgba(169, 113, 47, 0.58) rgba(255, 250, 239, 0.40);
}

html[data-theme="light"] .side-ornament,
html[data-theme="light"] .side-links a.active::after {
  color: #8d551d;
}

html[data-theme="light"] .side-links a.active {
  background: rgba(169, 113, 47, 0.12);
  border-color: rgba(139, 92, 36, 0.24);
  color: #5c3a16;
}

html[data-theme="light"] .side-status-card {
  border: 1px solid rgba(139, 92, 36, 0.24);
  background: rgba(255, 248, 234, 0.66);
  box-shadow: 0 16px 34px rgba(91, 58, 26, 0.14);
}

html[data-theme="light"] .side-days-seal,
html[data-theme="light"] .side-theme-switch {
  border: 1px solid rgba(139, 92, 36, 0.26);
  background: rgba(169, 113, 47, 0.10);
  color: #7c4e1d;
}

html[data-theme="light"] .side-days-row strong {
  color: #654017;
}

html[data-theme="light"] .side-days-row span,
html[data-theme="light"] .side-status-card p,
html[data-theme="light"] .side-theme-toggle {
  color: rgba(47, 38, 28, 0.72);
}

html[data-theme="light"] .side-theme-toggle {
  background: rgba(255, 252, 244, 0.62);
}

html[data-theme="light"] .side-theme-switch span {
  background: linear-gradient(135deg, #9d6830, #e4bf7c);
  box-shadow: 0 4px 10px rgba(91, 58, 26, 0.22);
}

@media (max-width: 380px) {
  #side-menu {
    top: 5px;
    bottom: 5px;
    width: calc(100vw - 10px);
  }

  #side-menu.active {
    right: 5px;
  }

  .side-menu-inner {
    padding-inline: 13px;
  }

  .side-links a {
    min-height: 44px;
    font-size: 0.9rem;
  }
}