.qotd {
  /* Local variables only - not available globally */
  --qotd-bg: #1f2024;
  --qotd-border-color: #fbbf24;
  --qotd-border-width: 4px;
  --qotd-padding: 1rem 1.5rem;
  --qotd-margin: 1rem 0;
  --qotd-margin-top: 40px;
  --qotd-border-radius: 0.5rem;
  --qotd-shadow: 0 2px 6px rgba(0,0,0,0.5);
  --sticker-bg: #fbbf24;
  --sticker-text-color: #1f2024;
  --sticker-font-size: 0.75rem;
  --sticker-padding: 0.2rem 0.5rem;
  --sticker-border-radius: 0.25rem;
  --sticker-top-offset: -0.75rem;
  --sticker-left-offset: 1rem;
  --text-margin-top: 0.5rem;
  
  background-color: var(--qotd-bg);
  border-left: var(--qotd-border-width) solid var(--qotd-border-color);
  padding: var(--qotd-padding);
  margin: var(--qotd-margin);
  border-radius: var(--qotd-border-radius);
  color: var(--text-color); /* global dark-theme variable */
  position: relative;
  box-shadow: var(--qotd-shadow);
  margin-top: var(--qotd-margin-top);
}

/* --- QOTD (LIGHT THEME OVERRIDES) --- */
html.light .qotd {
  --qotd-bg: #ffffff;
  --qotd-border-color: #B65A3A;
  --qotd-shadow: 0 2px 6px rgba(0,0,0,0.1);

  --sticker-bg: #B65A3A;
  --sticker-text-color: #ffffff;
}

.qotd-sticker {
  position: absolute;
  top: var(--sticker-top-offset);
  left: var(--sticker-left-offset);
  background-color: var(--sticker-bg);
  color: var(--sticker-text-color);
  font-size: var(--sticker-font-size);
  font-weight: bold;
  padding: var(--sticker-padding);
  border-radius: var(--sticker-border-radius);
  text-transform: uppercase;
}

.qotd-text {
  margin-top: var(--text-margin-top);
}