:root {
  --me-deep: #261c26;
  --me-deep-rgb: 38, 28, 38;
  --me-mid-dark: #1a212d;
  --me-mid-dark-rgb: 26, 33, 45;
  --me-mauve: #1a7373;
  --me-mauve-rgb: 26, 115, 115;
  --me-rose: #f2caa7;
  --me-soft: #05f2db;
  --me-soft-rgb: 5, 242, 219;
  --me-accent: #f27457;
  --me-accent-rgb: 242, 116, 87;
  --me-white-glass: rgba(255, 255, 255, 0.08);
  --me-white-stroke: rgba(255, 255, 255, 0.16);
}

html[data-theme='tsl'] {
  --me-deep: #3f362f;
  --me-deep-rgb: 63, 54, 47;
  --me-mid-dark: #5a4c41;
  --me-mid-dark-rgb: 90, 76, 65;
  --me-mauve: #7b7565;
  --me-mauve-rgb: 123, 117, 101;
  --me-rose: #ae927a;
  --me-soft: #e0a13a;
  --me-soft-rgb: 224, 161, 58;
  --me-accent: #957e56;
  --me-accent-rgb: 149, 126, 86;
  --me-white-glass: rgba(255, 255, 255, 0.08);
  --me-white-stroke: rgba(255, 255, 255, 0.22);
}

html[data-theme='tsl'] .atmospheric-bg,
html[data-theme='tsl'] .reader-bg {
  background:
    radial-gradient(
      145% 100% at 12% -16%,
      rgba(var(--me-soft-rgb), 0.2) 0%,
      rgba(var(--me-soft-rgb), 0) 56%
    ),
    radial-gradient(
      128% 96% at 96% 120%,
      rgba(var(--me-accent-rgb), 0.2) 0%,
      rgba(var(--me-accent-rgb), 0) 62%
    ),
    linear-gradient(165deg, #655d4f 0%, #4b4037 52%, #302923 100%) !important;
}

html[data-theme='tsl'] .atmospheric-bg {
  background:
    radial-gradient(
      145% 100% at 12% -16%,
      rgba(var(--me-soft-rgb), 0.22) 0%,
      rgba(var(--me-soft-rgb), 0) 56%
    ),
    radial-gradient(
      128% 96% at 96% 120%,
      rgba(var(--me-mauve-rgb), 0.3) 0%,
      rgba(var(--me-mauve-rgb), 0) 62%
    ),
    linear-gradient(165deg, #7c7767 0%, #645a4f 52%, #4a4038 100%) !important;
}

html[data-theme='tsl'] .reader-bg {
  background:
    radial-gradient(
      140% 92% at 10% -22%,
      rgba(var(--me-soft-rgb), 0.12) 0%,
      rgba(var(--me-soft-rgb), 0) 56%
    ),
    linear-gradient(170deg, #453a31 0%, #342b24 52%, #251f1a 100%) !important;
}

html[data-theme='tsl'] .atmospheric-bg::before,
html[data-theme='tsl'] .reader-bg::before {
  opacity: 0.32;
  filter: blur(24px) saturate(104%);
}

html[data-theme='tsl'] .atmospheric-bg::after,
html[data-theme='tsl'] .reader-bg::after {
  opacity: 0.06;
}

.atmospheric-bg,
.reader-bg {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      150% 110% at 10% -18%,
      rgba(var(--me-soft-rgb), 0.28) 0%,
      rgba(var(--me-soft-rgb), 0) 58%
    ),
    radial-gradient(
      130% 100% at 94% 118%,
      rgba(var(--me-accent-rgb), 0.24) 0%,
      rgba(var(--me-accent-rgb), 0) 62%
    ),
    linear-gradient(165deg, var(--me-mauve) 0%, var(--me-mid-dark) 55%, var(--me-deep) 100%) !important;
  background-attachment: scroll;
  overflow-x: hidden;
}

.atmospheric-bg > *,
.reader-bg > * {
  position: relative;
  z-index: 2;
}

.atmospheric-bg::before,
.reader-bg::before {
  content: '';
  position: fixed;
  top: -16%;
  bottom: -16%;
  left: -140%;
  right: -140%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.56;
  filter: blur(28px) saturate(108%);
  background-image:
    radial-gradient(30% 20% at 16% 12%, rgba(var(--me-soft-rgb), 0.34), transparent 72%),
    radial-gradient(32% 22% at 40% 34%, rgba(var(--me-accent-rgb), 0.28), transparent 74%),
    radial-gradient(30% 20% at 64% 58%, rgba(var(--me-soft-rgb), 0.18), transparent 76%),
    radial-gradient(28% 18% at 86% 82%, rgba(var(--me-accent-rgb), 0.18), transparent 78%);
}

.atmospheric-bg::after,
.reader-bg::after {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: normal;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004));
}

/* Leitura: fundo mais escuro e com menos interferência visual */
.reader-bg {
  background:
    radial-gradient(
      140% 92% at 10% -22%,
      rgba(var(--me-soft-rgb), 0.16) 0%,
      rgba(var(--me-soft-rgb), 0) 56%
    ),
    linear-gradient(170deg, var(--me-mid-dark) 0%, var(--me-mid-dark) 52%, var(--me-deep) 100%) !important;
}

.reader-bg::before {
  opacity: 0.44;
  filter: blur(34px) saturate(104%);
  background-image:
    radial-gradient(30% 18% at 18% 14%, rgba(var(--me-mauve-rgb), 0.2), transparent 72%),
    radial-gradient(30% 18% at 42% 36%, rgba(var(--me-soft-rgb), 0.14), transparent 74%),
    radial-gradient(30% 18% at 66% 58%, rgba(var(--me-accent-rgb), 0.16), transparent 76%),
    radial-gradient(28% 16% at 86% 82%, rgba(var(--me-soft-rgb), 0.12), transparent 78%);
}

.reader-bg::after {
  opacity: 0.08;
  mix-blend-mode: normal;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.002));
}

.glass,
.glass-card,
.glass-item {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.08) 46%,
    rgba(255, 255, 255, 0.04) 100%
  ) !important;
  border: 1px solid var(--me-white-stroke) !important;
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme='tsl'] .glass,
html[data-theme='tsl'] .glass-card,
html[data-theme='tsl'] .glass-item {
  background: linear-gradient(
    155deg,
    rgba(83, 70, 58, 0.84) 0%,
    rgba(108, 92, 77, 0.72) 48%,
    rgba(78, 66, 55, 0.86) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.control-muted {
  opacity: 0.35;
  pointer-events: none;
}

/* Menu inferior: um pouco menos transparente para melhorar leitura/contraste */
nav.fixed.bottom-0 .glass-card {
  background: linear-gradient(
    145deg,
    rgba(var(--me-accent-rgb), 0.34) 0%,
    rgba(var(--me-deep-rgb), 0.74) 46%,
    rgba(var(--me-deep-rgb), 0.68) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.text-primary {
  color: var(--me-soft) !important;
}

.bg-primary {
  background-color: var(--me-soft) !important;
}

html[data-theme='tsl'] .text-slate-300 {
  color: #f2e7d8 !important;
}

html[data-theme='tsl'] .text-slate-400 {
  color: #e2d0bb !important;
}

html[data-theme='tsl'] .text-slate-500 {
  color: #ddcab3 !important;
}

html[data-theme='tsl'] #book-content {
  color: #f4ecdf !important;
}

html[data-theme='tsl'] #book-content h1,
html[data-theme='tsl'] #book-content h2,
html[data-theme='tsl'] #book-content h3,
html[data-theme='tsl'] #book-content h4,
html[data-theme='tsl'] #book-content strong {
  color: #fff8ee !important;
}

html[data-theme='tsl'] #book-content p,
html[data-theme='tsl'] #book-content li {
  color: #f4ecdf !important;
}

.border-primary,
.border-primary\/50 {
  border-color: rgba(var(--me-soft-rgb), 0.55) !important;
}

::selection {
  background: rgba(var(--me-soft-rgb), 0.3);
}