:root {
  --saliio-bg: #080818;
  --saliio-surface: #101022;
  --saliio-surface-raised: #17172d;
  --saliio-text: #f7f5ff;
  --saliio-muted: #aaa5bf;
  --saliio-line: #292744;
  --saliio-violet: #6c4cff;
  --saliio-purple: #c44cff;
  --saliio-pink: #ff6fae;
  --saliio-peach: #ffb58e;
  --saliio-gradient: linear-gradient(135deg, #6c4cff 0%, #c44cff 35%, #ff6fae 68%, #ffb58e 100%);
  --bg: var(--saliio-bg);
  --panel: var(--saliio-surface);
  --text: var(--saliio-text);
  --muted: var(--saliio-muted);
  --line: var(--saliio-line);
  --accent: var(--saliio-purple);
  --red: var(--saliio-pink);
  --gold: var(--saliio-peach);
}

body {
  background:
    radial-gradient(circle at 48% -18%, rgba(108, 76, 255, .14), transparent 32rem),
    var(--saliio-bg);
  color: var(--saliio-text);
}

header,
.reader-head,
.reader-bottom,
.bottom-nav {
  background: rgba(8, 8, 24, .94);
  border-color: var(--saliio-line);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  min-width: 0;
}

.brand-lockup img {
  display: block;
  width: 148px;
  height: 48px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.reader-brand img { width: 124px; height: 40px; }

.primary,
.reader-bottom button,
.genre-tabs button.selected,
.episode-row:first-child b,
.voice-note.playing .voice-play {
  background: var(--saliio-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(196, 76, 255, .2);
}

.bottom-nav .selected,
.sender,
.page a,
.card .genre {
  color: var(--saliio-pink);
}

.message:nth-of-type(2n) .sender { color: #c993ff; }
.eyebrow { background: var(--saliio-gradient); color: #fff; }
.episode-chip.current { border-color: var(--saliio-purple); box-shadow: inset 0 -3px var(--saliio-purple); }
.card,
.episode-row,
.secondary,
.bubble,
.chapter-label { background-color: var(--saliio-surface); border-color: var(--saliio-line); }
.reader { background-color: var(--saliio-bg); }

@media (max-width: 360px) {
  .brand-lockup img { width: 122px; height: 40px; }
  .reader-brand img { width: 108px; height: 35px; }
}