/* Ocupa a largura visual da página e preserva respiro interno responsivo. */
#oda-app {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;
  isolation: isolate;
  background: #07111f;
}

#oda-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('../images/aruanda-night-background.png') center center / cover no-repeat;
}

#oda-app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 10, 20, .34), rgba(3, 10, 20, .62)), radial-gradient(circle at 50% 18%, rgba(220, 187, 112, .12), transparent 38%);
}

#oda-app .synthesis,
#oda-app .theme-card,
#oda-app .method-card,
#oda-app .question-box textarea {
  backdrop-filter: blur(10px);
}

#oda-app .pdf-button {
  border-color: rgba(228, 201, 139, .75);
  color: #e4c98b;
}

#oda-app .deck-grid.auto-mode {
  grid-template-columns: repeat(var(--auto-count), 56px);
  justify-content: center;
}

#oda-app .daily-used {
  opacity: .7;
  text-decoration: none;
}

#oda-app .topbar,
#oda-app .view {
  width: 100%;
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
}

@media (max-width: 480px) {
  #oda-app .deck-grid.auto-mode {
    grid-template-columns: repeat(var(--auto-count), 40px);
  }
  #oda-app .topbar,
  #oda-app .view {
    padding-left: 20px;
    padding-right: 20px;
  }
}