:root {
  --me-deep: #261c26;
  --me-mid-dark: #1a212d;
  --me-mauve: #1a7373;
  --me-rose: #f2caa7;
  --me-soft: #05f2db;
  --me-accent: #f27457;
  --me-white-glass: rgba(255, 255, 255, 0.08);
  --me-white-stroke: rgba(255, 255, 255, 0.16);
}

.atmospheric-bg,
.reader-bg {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(150% 110% at 10% -18%, rgba(5, 242, 219, 0.28) 0%, rgba(5, 242, 219, 0) 58%),
    radial-gradient(130% 100% at 94% 118%, rgba(242, 116, 87, 0.24) 0%, rgba(242, 116, 87, 0) 62%),
    linear-gradient(165deg, #17333a 0%, #1a212d 55%, #261c26 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(5, 242, 219, 0.34), transparent 72%),
    radial-gradient(32% 22% at 40% 34%, rgba(242, 116, 87, 0.28), transparent 74%),
    radial-gradient(30% 20% at 64% 58%, rgba(242, 202, 167, 0.22), transparent 76%),
    radial-gradient(28% 18% at 86% 82%, rgba(26, 115, 115, 0.22), 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(5, 242, 219, 0.16) 0%, rgba(5, 242, 219, 0) 56%),
    linear-gradient(170deg, #141c24 0%, #1a212d 52%, #261c26 100%) !important;
}

.reader-bg::before {
  opacity: 0.44;
  filter: blur(34px) saturate(104%);
  background-image:
    radial-gradient(30% 18% at 18% 14%, rgba(26, 115, 115, 0.26), transparent 72%),
    radial-gradient(30% 18% at 42% 36%, rgba(242, 202, 167, 0.18), transparent 74%),
    radial-gradient(30% 18% at 66% 58%, rgba(242, 116, 87, 0.16), transparent 76%),
    radial-gradient(28% 16% at 86% 82%, rgba(5, 242, 219, 0.14), 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);
}

.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(16, 28, 36, 0.82) 0%,
    rgba(20, 34, 42, 0.74) 46%,
    rgba(24, 38, 48, 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;
}

.border-primary,
.border-primary\/50 {
  border-color: rgba(5, 242, 219, 0.55) !important;
}

::selection {
  background: rgba(5, 242, 219, 0.3);
}